@media all and (min-width: 0px) {
    .anim-archive-item {
        position: relative;
        overflow: hidden;
        text-align: center;
        max-width: 100%;
        flex-basis: 100%;
        min-height: 250px;
        -webkit-transition: all ease 0.5s;
        -moz-transition: all ease 0.5s;
        transition: all ease 0.5s;
        cursor: pointer;
        margin: 0.5em;
    }

    .archive-items-wrapper .anim-archive-item .anim-content-first a {
        color: inherit;
        text-decoration: none !important;
    }

    .archive-items-wrapper .anim-archive-item img {
        width: 100%;
        height: auto;
        vertical-align: middle;
    }

    .archive-items-wrapper .anim-archive-item .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.45;
        filter: alpha(opacity=45);
        -webkit-transition: all ease 0.5s;
        -moz-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }

    .archive-items-wrapper .anim-archive-item:hover .overlay {
        opacity: 0.98;
        filter: alpha(opacity=98);
    }

    .archive-items-wrapper .anim-archive-item div div {
        -webkit-transition: all ease 1s;
        -moz-transition: all ease 1s;
        transition: all ease 1s;
    }

    .archive-items-wrapper .anim-archive-item .anim-content-first {
        position: absolute;
        width: 100%;
        opacity: 1;
        top: 50%;
        left: 50%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-transition: all ease 0.5s 0.3s;
        -moz-transition: all ease 0.5s 0.3s;
        transition: all ease 0.5s 0.3s;
    }

	h.clean-archive-title {
		font-size:1.75em;
		line-height:1em;
		width:90%;
		position: relative;
		display: inline-block;
		/* colours set by PHP */
	}

	h.clean-archive-title::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		font-weight: 900;
		z-index: -1;
		box-sizing: border-box;
		/* colours set by PHP */
	}
	
    .archive-items-wrapper .anim-archive-item:hover .anim-content-first {
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .archive-items-wrapper .anim-archive-item .anim-content-second {
        position: absolute;
        width: 85%;
        opacity: 0;
        filter: alpha(opacity=0);
        top: 100%;
        left: 50%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-transition: all ease 0.5s 0.3s;
        -moz-transition: all ease 0.5s 0.3s;
        transition: all ease 0.5s 0.3s;
    }

    .archive-items-wrapper .anim-archive-item:hover .anim-content-second {
        top: 50%;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .archive-items-wrapper .anim-archive-item .anim-content-second>:first-of-type {
        font-size: 1.05em;
        padding-bottom: 11px;
    }

    .archive-items-wrapper .anim-archive-item .anim-content-first .archive-meta {
        font-size: 0.9em;
    }
}

@media all and (min-width: 800px) {
    .anim-archive-item {
        max-width: 45.5%;
        flex-basis: 45.5%;
    }
}

@media all and (min-width: 1000px) {
    .anim-archive-item {
        max-width: 30.5%;
        flex-basis: 30.5%;
    }
}

@media all and (min-width: 1200px) {
    .anim-archive-item {
        max-width: 23.5%;
        flex-basis: 23.5%;
    }
}