@charset "UTF-8";
/* CSS Document */
body { font-family: 'Roboto', sans-serif; }
html { height:100%; width:100%; background:#555857; }

#black { position:fixed; top:0; left:0; right:0; bottom:0; background:black; opacity:0.36; z-index:1399; }
#splash { width:600px; height:350px; max-height:100%; max-width:90%; display:inline-block; left:0; right:0; top:0; bottom:0; margin:auto; z-index:1499; position:absolute; }
#splash .bg { position:absolute; top:0; left:0; bottom:0; right:0; background:#4e9ed4; opacity:0.90; } /* #079eec  >  #3ebb58*/
#splash .inside { padding:50px; margin-left:10px; margin-right:10px; text-align:center; }
#splash .inside h1 { font-family: 'sundayregular'; font-size:2.6em; position:relative; color:white; letter-spacing:5px; line-height:1.2em; text-align:left; display:block; max-width:100%; word-wrap:break-word; }
#splash .inside p { font-size:1.5em; font-weight:300; line-height:1.6em; color:white; position:relative; margin-top:20px; text-align:left;}
#splash .inside #button { line-height:40px; font-size:1.8em; color:#0d3959; font-weight:300; position:relative; text-align:center; height:40px; width:230px; background:white; display:inline-block; margin-top:25px;
	-moz-border-radius: 	30px;
	-webkit-border-radius: 	30px;
	border-radius: 			30px; /* future proofing */
	khtml-border-radius: 	30px; /* for old Konqueror browsers */ 
	-webkit-box-shadow: 	8px 8px 32px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 		8px 8px 32px 0px rgba(0,0,0,0.2);
	box-shadow: 			8px 8px 32px 0px rgba(0,0,0,0.2);
}
#splash .inside #button:hover { background:#0d3959; color:white; }
#splash .close { position:absolute; right:0; top:0; display:inline-block; }

nav { display:block; width:380px; max-width:100%; padding:17px; height:100%; position:fixed; right:-200px; top:0; bottom:0; color:white; 
background:#555857; /* #3ebb58 */
 box-shadow: 			inset 6px 1px 16px -4px #1C1D1C;
-webkit-box-shadow: 	inset 6px 1px 16px -4px #1C1D1C;
-moz-box-shadow: 		inset 6px 1px 16px -4px #1C1D1C;
-o-box-shadow: 			inset 6px 1px 16px -4px #1C1D1C;
}
nav p { margin-top:38px; display:inline-block; font-family:'Roboto'; font-weight:300; font-size:1.5em; line-height:1.8em; }
nav h2 { font-family:'Roboto Slab'; font-size:1.8em; }
nav hr { border:none; height:1px; background:white; margin:15px 0; }
nav a { font-family:'Roboto'; font-weight:300; font-size:1.5em; line-height:1.5em; display:block; }
nav a:hover { text-decoration:underline; }
nav ol { margin-left:10px; list-style:disc; display:inline-block; line-height:1.5em; }
nav ol li { margin-bottom:5px; }
nav .footer { position:fixed; bottom:43px; left:10px; right:10px; text-align:left; }

section.main { width:auto; height:auto; display:block; position:absolute; left:0; right:0; top:0; bottom:0; }
section.main .sandwich { position:absolute; right:23px; top:20px; z-index:1599; }

section.main ul.grid { width:100%; height:100%; display:block; }
section.main ul.grid li { display:inline-block; overflow:hidden; border:0; margin:0; padding:0; float:left; background-size: cover; position:relative; }
section.main ul.grid li div.bg { background:#4e9ed4; height:100%; width:100%; position:absolute; left:0; top:0; opacity:0; z-index:1099; }
section.main ul.grid li div.box { padding:26px; height:auto; opacity:0; z-index:1199; text-align:center;   position: absolute; right:0; top:0; left:0; bottom:0; }
section.main ul.grid li div.box h3 { font-family:'sundayregular','Roboto Slab'; text-transform: uppercase; line-height:1.2em; font-size:2.0em; margin-bottom:10px; color:white; width:auto; text-align:center; display:block; opacity:1; }
section.main ul.grid li div.box .url { font-family:'Roboto Slab'; font-weight:400; font-size:1.4em; letter-spacing:0.2px; color:white; display:block; position:absolute; left:20px; bottom:20px; right:20px; text-align:center;  }
section.main ul.grid li div.box .play { position:absolute; bottom:60px; right: 50%; margin-right: -51px; }

section.main ul.grid li:hover div.bg { opacity:0.55; }
section.main ul.grid li:hover div.box { opacity:1; }

.touch section.main ul.grid li div.bg { background:#0e0317; opacity:0.25; }
.touch section.main ul.grid li div.box { opacity:1; }
.touch section.main ul.grid li div.box h3 { opacity:0.6; }
.touch #splash .bg { opacity:1; }

.box2 { width:35%; height:50%; background:url(../images/happypeopleonline_03.jpg) center center #DCDCDC; }
.box8 { width:23%; height:50%; background:url(../images/happypeopleonline_09.jpg) center center #DCDCDC; }
.box5 { width:21%; height:50%; background:url(../images/happypeopleonline_06.jpg) center center #DCDCDC; }
.box1 { width:21%; height:50%; background:url(../images/happypeopleonline_02.jpg) center center #DCDCDC; }

.box0 { width:21%; height:50%; background:url(../images/happypeopleonline_01.jpg) center center #DCDCDC; }
.box6 { width:26%; height:50%; background:url(../images/happypeopleonline_07.jpg) center center #DCDCDC; }
.box7 { width:25%; height:50%; background:url(../images/happypeopleonline_08.jpg) center center #DCDCDC; }
.box4 { width:28%; height:50%; background:url(../images/happypeopleonline_05b.jpg) center center #DCDCDC; }

.box3 { width:23%; height:50%; background:url(../images/happypeopleonline_04.jpg) center center #DCDCDC; display:none !important; }

body.openmenu nav { right:0; }
body.openmenu section { right:414px; }
body.openmenu #black { right:414px; }

.animation { -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s; }

#footer { position:fixed; bottom:0; left:0; right:0; background:#fdf8f2; text-align:center; font-size:1.5em; color:#949494; width:100%; padding-top:10px; padding-bottom:10px; display:none; }


@media only screen and (min-width: 768px) {
	/* tablets and desktop */
	/* body { background:url(happypeopleonline_1200px.jpg) center top repeat-y;  }*/
}

@media only screen and (min-width: 1201px) {
	/* tablets and desktop */
	/* body { background:url(happypeopleonline_1200px.jpg) center top; }*/
}
@media only screen and (min-width: 1501px) {
	/* tablets and desktop */
	/* body { background:url(happypeopleonline_1500px.jpg) center top; }*/
}
@media only screen and (max-width: 867px) and (orientation: landscape) {
	/* phones */
	/* body { background:url(happypeopleonline_800px.jpg) center top repeat-y; background-size:cover; font-size:50%; } */
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
	/* portrait phones */
	/* body { background:url(happypeopleonline_480px.jpg) center top repeat-y;background-size:cover; font-size:45%; }*/
}
@media (max-width: 991px) {
	section.main ul.grid li { height:25%; width:50%; }
	/*.box2 { width:100%; }
	.box8 { width:30%; }
	.box5 { width:32%; }
	
	.box1 { width:21%; }
	.box0 { width:21%; }
	.box6 { width:26%; }
	
	.box7 { width:25%; }
	.box4 { width:28%; }*/
	.box3 { display:inline-block; }
}
@media (max-width: 767px) {
	#splash { display:none; }
	#black { display:none; }
	body.openmenu section { right:100%; }
	body.openmenu #black { right:100%; }
	section.main ul.grid li { height:25%; width:50%; }
	#splash .inside #button { width:auto; padding-left:20px; padding-right:20px; }	
	nav { width:auto; }
	
	.box2 { width:100%; }
	.box8 { width:30%; }
	.box5 { width:32%; }
	
	.box1 { width:21%; }
	.box0 { width:21%; }
	.box6 { width:26%; }
	
	.box7 { width:25%; }
	.box4 { width:28%; }
	.box3 { width:23%; display:inline-block; }
}
@media (max-width: 480px) {
	#splash { margin:10px; top:50px; width:auto; max-width:none; height:auto; }
	#splash .inside { padding:48px; }
	#splash .inside p { display:inline-block; }
	
	.touch section.main ul.grid { height:1160px; }
	.touch section.main ul.grid li { height:20%; width:100%; background-position:top center; }
	.touch section.main ul.grid li div.box h3 { font-size:2.2em; opacity:1; }
	section.main ul.grid li div.box {  }
	
	body.openmenu section { right:100%; }
	body.openmenu #black { right:100%; }
}