/*
Theme Name: Period.
Theme URI: ////
Description: Period. Magazine
Version: 1.0
Author: Jesse Jones
Author URI: www.codingfashion.com
*/



@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CooperBlackStd';
        font-family: 'CooperBlackStd.svg' format('svg');
        
    }
}

@font-face {
    font-family: 'CooperBlackStd';
    src: url('CooperBlackStd.eot');
    src: url('CooperBlackStdt.eot?#iefix') format('embedded-opentype'),
         url('CooperBlackStd.woff') format('woff'),
         url('CooperBlackStd.ttf') format('truetype'),
         url('CooperBlackStd.svg#CooperBlackStd') format('svg');
    font-weight: normal;
    font-style: normal;
}





body {
	background: #fff;
	overflow: scroll;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size:1em;
	letter-spacing:0.5px;
}

#preloader { 
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-image: url('../periodload.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center; 
  background-color: #fff;
}

h2 {
font-family:'CooperBlackStd','Corben', Georgia, Times, "Times New Roman", serif;
font-weight:700;

}

h1 {
font-family:'CooperBlackStd','Corben', Georgia, Times, "Times New Roman", serif;

}
  
.hidden {
	overflow:hidden;
}
.header {
	background-color:#fff;
	height:60px;
	width:100%;
	margin:0 auto;
	position:fixed;
	top:0;
	left:0;
	z-index:6;
}
.logo {
	position:fixed;
	display:inline;
	top:18px;
	left:6.1%;
	z-index:4;
	width:25%;
	height:auto;
}

.logo_m {
	position:fixed;
	display:none;
	
}

.desk_nav {
	position:fixed;
	top:38px;
	right:8.1%;
	z-index:1;
	font-family: georgia, serif;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
.wrapper {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
	flex-wrap:wrap;
	margin-top:0;
	> * {
		margin: 5px;
	}
}
.media {
    display:-moz-flex;
    display:-webkit-box;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
            flex-direction:row; 
    -webkit-box-pack: center;
            justify-content: center;
    flex-wrap:wrap;
    -webkit-box-align: center;
            align-items: center;
    /*END FLEX*/
	overflow: hidden;
	position: relative;
	margin-top:90px;
	padding-right:5%;
	bottom:0;
	padding-left:5%;
	max-width: 380px;
	max-height: 600px;
	text-align:center;
	background-color:none;
}
.media img {
	max-width: 100%;
	height: auto;
}
.layer {
	opacity: 1;
	position: absolute;
	display: -webkit-box;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
	/*END FLEX*/
top:calc(50% - 50px);
left:calc(50% - 50px);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgb(201, 84, 76);
	color: #000;
	-webkit-transition: all 0.9s ease;
	transition: all 0.9s ease;
	-webkit-transform: scale(0);
	        transform: scale(0);
}
.layer p {
	text-align: center;
	font-weight:bold;
	font-size: 12px;
	letter-spacing:1px;
	-webkit-transition: all 0.9s ease;
	transition: all 0.9s ease;
	-webkit-transform: scale(1);
	        transform: scale(1)
}
.media:hover .layer {
	cursor:pointer;
	-webkit-transform: scale(1);
	        transform: scale(1);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	p {
		-webkit-transform: scale(1);
		        transform: scale(1);
		-webkit-transition: all 0.9s ease;
		transition: all 0.9s ease;
	}
}
/* START MODAL STYLES */
#hennybox, #wigubox, #linneabox,#amiebox, #matildabox, #sfbbox {
	display:none;
}
.box {
	display:block;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 4;
	/* Sit on top */
	left: 0;
	top: 40px;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background: rgb(201, 84, 76);
	/* Fallback color */
	/* Black w/ opacity */
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 2s;
	animation-name: animatetop;
	animation-duration: 2s
}
@-webkit-keyframes animatetop {
	from {
		top: 100%;
		opacity: 1
}
	to {
		top: 40px;
		opacity: 1
}
}
@keyframes animatetop {
	from {
		top: 100%;
		opacity: 1
}
	to {
		top: 40px;
		opacity: 1
}
}
/* BEGIN MODAL CONTENT STYLES */
.box-content {
	text-align: center;
	margin: 8% auto;
	margin-top:100px;
	/* 15% from the top and centered */
	width: 90%;
	/* Could be more or less, depending on screen size */
}
.box img {
	width: 100%;
	padding-bottom: 20px;
	padding-top: 40px;
}
/* The Close Button */
.close {
	color: #000;
	position: fixed;
	top: 45%;
	right: 4%;
	font-size: 50px;
	font-weight: bold;
}
.close:hover,.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
/*END BOX*/


@media (max-width: 900px) {



body {
font-size: 80%;
}



#preloader { 
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 300%;
  height: 300%;
  }

.header {
	background-color:#fff;
	height:70px;
	
	}
.logo {
	position:fixed;
	display:none;
	top:40px;
	left:6.1%;
	z-index:4;
	width:10%;
	height:auto;
}
.logo_m {
	position:fixed;
	display:inline;
	top:18px;
	left:6.1%;
	z-index:4;
	max-width:18%;
	min-width:70px;
	height:auto;
}



.media {
		
		min-width: 90%;
		max-width: 90%;
		width: 90%;
		max-height: none;
		height:auto !important;
		margin-top:40px;
		-webkit-box-align: center;
			align-items: center;
		flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
            
}

.media img {


	    max-width: 90vw;
    	height: auto;

}


}

@media (max-width: 500px) {




	.header {
		background-color:#fff;
	}
	.logo {
		position:fixed;
		top:18px;
		width:170px;
	}
	.box-content {
		margin-top:100px;
	}
	.media {
		margin-top:40px;
		-webkit-box-align: center;
            align-items: center;
	}
	.wrapper {
		display: block;
		margin-top:50px;
		> * {
			margin-bottom: 10px;
		}
	}
}