@charset "UTF-8";
/* CSS Document */

/******************************************************\
* serious djs.co.uk  -  layout                         *
* carved of codeat oastone.co.uk                       *
* version 2, may 2019                                  *
* all the layout stuff                                 *
\******************************************************/


/* UNIVERSAL */

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	font-size: 100%; /* maybe remove */
	font-size: 16px; /* maybe remove */
}

* { /* clears padding/margins from all elements and makes boxes include padding/margins in their width/height values */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.fullwidth { /* a wrapper for a container that allows full-width background */
	
}

.faceouter, #pbd-alp-load-posts, .listtitle {
	width: 50vw;
	height: 50vw;
	float: left;
	overflow: hidden;
	position: relative;
}
a.facecontainer {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: block;
	width: 100%;
	height: 100%;
	transition: all 0.5s ease;
	position: absolute;z-index: 100;
}
a.facecontainer p {
	/*position: absolute;               
    top: 50%;                        
    transform: translate(0, -50%);
	color: white;*/
	display: none;
}   
a.facecontainer .faceinner p {
	
}
a.facecontainer:hover,
a.facecontainer:focus,
a.facecontainer:active {
	transform: scale(1.2);
	opacity: 0.3;
	
}
a.facecontainer .faceinner {
	width: 100%;
	height: 100%;
	background-color: rgba(200,0,0,0.00);
	transition: all 0.25s ease;
	position: absolute;
	/*z-index: 10;*/
}
.faceinner:hover  {
	/*background-color: rgba(200,0,0,0.50);
	z-index: 1000;*/
}

.faceinner {
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	color: #fff;
}


.djlist::after { /* clears */
	content: "";
	display: table;
	clear: both;
}


.listtitle {
	padding: 10px;
}



@media only screen and (min-width: 480px) {  /* 33.75rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
			width: 33.33vw;
			height: 33.33vw;
	}
}

@media only screen and (min-width: 640px) {  /* 33.75rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
			width: 25vw;
			height: 25vw;
	}
}

@media only screen and (min-width: 800px) {  /* 45rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
			width: 20vw;
			height: 20vw;
	}
}

@media only screen and (min-width: 960px) { /* 60rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
		width: 16.66vw;
		height: 16.66vw;
	}
	
}

@media only screen and (min-width: 1200px) { /* 60rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
		width: 12.5vw;
		height: 12.5vw;
	}
	
}
@media only screen and (min-width: 1500px) { /* 60rem */
	.faceouter, #pbd-alp-load-posts, .listtitle {
		width: 10vw;
		height: 10vw;
	}
	
}