/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	margin: 0 0 0 0;
}

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #efe5d5 ;
	height: 100%;
	
}

.italic {
	font-style: italic;
}

strong {
	font-style: italic;
}

a {
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid #FF4500;
}

a:hover {
	color: #FF4500!important;
	border-bottom: 2px solid #FF4500;
}

.coverimg {
}

#bg {
	width: 100%;
	height: auto;
	position: absolute;
}

.things {
	width: auto;
	max-height: 650px;
	z-index: -99;
	position: relative; 
	text-align: center;
	margin-bottom: 200px;
	top: -40%;
	left: -40%;
	transform: translate (-40%, -40%);
	
}

.lazy {
	width: auto;
	max-height: 650px;
	position: relative; 
	text-align: center;
	margin-bottom: 200px;
	top: -40%;
	left: -40%;
	transform: translate (-40%, -40%);
	
}

#logo {
	z-index: 99; 
	color: #593e2c;
	font-size: 2em;
	padding: 1.2em 0 0 2em;
	text-align: left;
	
} 

#sections {
	position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline;
    text-align: justify;
    
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

#sections p {
	font-family: sofia-pro-soft, sans-serif;
font-style: normal;
font-weight: 700;
	font-size: 1.2em;
	color: black;
	line-height: 3em;
	
	margin-bottom: 20px;
	opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  animation-duration: 0.3s;
  
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#sections a {
	text-decoration: none;
	color: #fff;
	mix-blend-mode: difference!important;
	
	border-bottom: 2px solid transparent;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
	-webkit-transform: translateZ(0);
	padding-left: 0;
	margin-left: 0;
	padding-right: 10px;
}



#logo img {
	width: 150px;
}

nav {
	margin: 1.2em 0 0 0;
	
}	


nav a{
	color: #fff;
	
	z-index: 99;
	border: none;
	text-decoration: none;
	font-family: sofia-pro-soft, sans-serif;
font-style: normal;
font-weight: 700;
	font-size: 0.8em;
	margin: 0 0 0 5em;
	line-height: 1.5em;
} 

nav a:hover {
	color: #FF4500;
	
}

#left {
	position: fixed;
	height: 100%;
	top: 10%;
	left: 5%;
	width: 300px;
	z-index; 999;
	
}

#left a { 
	border: none;
}

.container {
	position: absolute;
	text-align: center;
	width: 50%;
	height: auto;
	display: inline-block;
	margin-bottom: 50px;
	margin: auto;
	top: 30%;
	left: 46%;
	transform: translate (-46%, -30%);
	
}

.container img {
	border-radius: 0.5em;
	max-width: 100%;
}

iframe {
	z-index: 999;
}

.homepageimg {
	position: absolute;
	width: 50%;
	height: 70%;
	text-align: center;
	margin: auto;
	top: 15%;
	left: 50%;
	transform: translatex(-50%);
	
} 

.homepageimg a {
	border: none;
}

.homepageimg img {
	position: relative;
	max-height: 100%;
	max-width: 100%;
	border-radius: 0.5em;
	
}

.homepageimg img:hover {
	mix-blend-mode: normal!important;
}



#ptuesday {
	text-align: right;
	font-family: sofia-pro-soft, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 0.8em;
}

.ptcontainer {
	position: absolute;
	text-align: center;
	width: 70%;
	height: 85%;
	margin-bottom: 50px;
	margin: auto;
	top: 30%;
	left: 30%;
	transform: translate (-30%, -15%);
	
}

.pt {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: auto;
	margin-left: 40%;
	transform: translatex(-50%);
	
} 

.ptinner img {
	width: 100%;
	border-radius: 0.5em;
	
}

.ptinner {
	width: 45%;
	position: relative;
	height: 100%;
	margin: auto;
	margin-bottom: 50px;
	text-align: justify;
	float: left;
	color: black;
	font-family: minion-3, serif;
font-style: normal;
font-weight: 400;
	font-size: 0.8em;
	padding-right: 3em;
}

#imgblank {
	opacity: 0;
}

#one {
	width: 100%;
	position: absolute;
	margin: auto;
	top: 2em;
	left: 1em;
}

#one p {
	padding-right: 2em;
	line-height: 1.5em;
}

#two {
	position: absolute;
	margin: 0;
	right: 1em;
	bottom: 2em;
}

#two p{
	text-align: right;
	position: relative;
	
}




#bodytext {
	position: relative;
	text-align: justify;
	width: 50%;
	height: 40em;
	margin-bottom: 80%;
	overflow: visible;
	color: white;
	z-index: 100;
	
	font-family: minion-3, serif;
font-style: normal;
font-weight: 400;
	font-size: 0.9em;
	
}

#bodytext p {
	line-height: 1.5em;
	
}

#bodytext a {
	color: #ffe600;
	mix-blend-mode: difference;
}

.infocontainer {
	position: absolute;
	text-align: center;
	width: 70%;
	height: 85%;
	margin-bottom: 50px;
	margin: auto;
	top: 15%;
	left: 30%;
	transform: translate (-30%, -15%);
	background: #efe5d5;
}

.info {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: auto;
	margin-left: 40%;
	transform: translatex(-50%);
	
} 

.infoinner img {
	width: 100%;
	border-radius: 0.5em;
	mix-blend-mode: multiply;
}

.infoinner {
	width: 45%;
	position: relative;
	height: 100%;
	margin: auto;
	text-align: justify;
	float: left;
	color: black;
	font-family: minion-3, serif;
font-style: normal;
font-weight: 400;
	font-size: 0.9em;
	padding-right: 3em;
	background: #efe5d5;
}

#imgblank {
	opacity: 0;
}

#one {
	width: 100%;
	position: absolute;
	margin: auto;
	top: 2em;
	left: 1em;
}

#one p {
	padding-right: 2em;
}

#two {
	position: absolute;
	margin: 0;
	right: 1em;
	bottom: 2em;
}

#two p{
	text-align: right;
	position: relative;
	
}

#infotext {
	position: relative;
	text-align: justify;
	width: 30%;
	height: 40em;
	margin-bottom: 50%;
	overflow: hidden;
	color: #593e2c;
	z-index: 100;
	left: -10%;
	font-family: minion-3, serif;
font-style: normal;
font-weight: 400;
	font-size: 0.8em;
}

#infotext p {
	line-height: 1.5em;
	
}

h2 {
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: sofia-pro-soft, sans-serif;
font-style: normal;
font-weight: 700;
}

sup { 
  vertical-align: super;
  font-size: smaller;
}


.wrap {
	max-width: 80%;
	height: 100%;
    width: auto\9; /* ie8 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 350px;
}


.box {
	width: 25%;
	padding-bottom: 25%;
	position: relative;
	overflow: hidden;
	float: left;
}

.boxInner {
	position: absolute;
	left: 15px;
	right: 15px;
	top: 15px;
	bottom: 15px;
	overflow: hidden;
	z-index: 100;
	border: 2px solid #efe5d5;
	-moz-border-radius: 2%;
	-webkit-border-radius: 2%;
	border-radius: 2%;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(.5,1.8,.3,.5);
	-webkit-transform: translateZ(0);
	background: #efe5d5;
}

.boxInner:hover {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #FF4500;
}

.boxInner img {
	width: 100%;
	mix-blend-mode: multiply;
}

.boxInner img:hover {
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }
}



@media only screen and (max-width : 1050px) {
   /* Smartphone view: 1 tile */
   #left {
   		position: absolute;
   }
   .infoinner {
      width: 90%;
      padding-bottom: 10%;
      left: -10%; 
   }
   .info {
   	padding-bottom: 20%;
   }
   .infocontainer {
		top: 30%;
		height: 70%;
		
   }
   
   .ptinner {
      width: 90%;
      padding-bottom: 10%;
      left: -10%; 
   }
   .pt {
   	padding-bottom: 20%;
   }
   .ptcontainer {
		top: 30%;
		height: 70%;
		
   }
}


::selection {
  background: #FF4500;
  color: #FFE600;  /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #FF4500;
  color: #FFE600; /* Gecko Browsers */
}