@font-face { font-family: 'BasicSans'; src: url('../fonts/BasicSans-Light.woff') format('woff'), url('../fonts/BasicSans-Light.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'BasicSans'; src: url('../fonts/BasicSans-LightIt.woff') format('woff'), url('../fonts/BasicSans-LightIt.ttf') format('truetype'); font-weight: normal; font-style: italic;}
@font-face { font-family: 'BasicSans'; src: url('../fonts/BasicSans-SemiBold.woff') format('woff'), url('../fonts/BasicSans-SemiBold.ttf') format('truetype'); font-weight: bold; font-style: normal;}

/* http://meyerweb.com/eric/tools/css/reset/ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

::selection {background:#414149;  color:#ffffff;}
::-moz-selection  {background:#414149;  color:#ffffff;}
img::selection {background: transparent;} 
img::-moz-selection   { background: transparent; } 

html, body {
	min-height: 100%;
	height: 100%;
}

body {
	font-family: "BasicSans", "helvetica";
	color:#414149;
	background-color: #ffffff;
	font-size: 16px;
	line-height:22px;
}


.clear {clear:both;}
b {font-weight:bold;}
i {font-style:italic;}
a, a:link, a:visited {color:#414149; text-decoration:none;}
a:hover {}
header {padding:12px 0; width:100%; box-sizing: border-box; z-index:90; position:fixed; height:55px;  text-align:center;   }
.screen_project header{background:rgba(255,255,255,0.85);}

 .logo {padding:12px 10px; pointer-events:none;z-index:999; position:relative; z-index:91;text-align:center; margin:auto; }
 .logo img {max-width:320px; width:80%;}
.logo span {display:block; z-index: 99;}
header a {position:absolute; z-index:2;     color:white;  }
header a.back {top:15px; left:25px;   font-size:14px;}
header a.contact {top:17px; right:25px;}
header a.linkedin {top:15px; right:38px; width:16px; margin-right:20px; }
header a.linkedin img,
header a.contact img { width:16px;  }
header a:hover {opacity:0.44;}
.content_container {margin:25px  auto 0;   max-width:1020px; 
     flex-wrap: wrap; display:flex; 

}
.content_block {background:#ffffff; min-height:100px;   position:relative; border:0px red solid; margin:0 10px 25px; box-shadow:0 0 40px #f0f0f0; }
.content_block > img {width:100%; display:block;}
.content_block.full {width:100%; flex:auto;}
.text_block {margin: 0 10px 25px;}

.project_list {margin:25px auto; display:block; max-width:500px;  }
.project_list li {   display:none;min-height:100px;   transition:all 0.3s; position:relative;margin:0 10px 22px; box-shadow:0 0 40px #f4f4f4; background:#414149;}
.project_list li.ready {display:block;}
.project_list li img {opacity:0.30; display:block; filter: grayscale(100%); width:100%;  transition:all 0.3s;}
.project_list li:hover {box-shadow:0 0 0px #ffffff; background:#ffffff;}
.project_list li:hover img {opacity:0.1; cursor:pointer;     }
.project_list li div { display:none; transition:all 0.3s; position:absolute; width:100%; height:100%;   left:0; top:0;  }
.project_list li:hover div { display:block;}
.project_list li span{    top: 50%; font-weight: bold; font-size: 22px;  display:block;text-align:center;  transform: translateY(-50%);    vertical-align: middle;    position: relative;}

.content_block.half,
.text_block.half{ width:47%;  border-right:0px solid grey; flex:1 0 auto;  max-width:48%;  }
.project_info_container {/*background:#414149; color:#ffffff;*/ padding:25px 0; margin-bottom:25px;  }
.project_info {  margin:auto; max-width:1020px; overflow:auto; }
.project_info h3 {font-weight:bold;  font-size:22px; line-height:32px; margin-top:-7px; position:relative;}
.project_info .details {float:left; width:40%;  margin-left:10px;  }
.project_info .details b {display:inline-block; width:110px;   }
.project_info .details p {clear:both;}
.project_info .summary {float:right; width:48%;  margin-right:11px;  }
.asterisk {position:absolute; top:2px; right:5px; font-size:11px;}
video {cursor:pointer; position:relative; display:block;}
.speaker { position: absolute; cursor:pointer; pointer-events:none;z-index: 60; width: 34px; height: 34px; background: url('../images/speaker2.png')  no-repeat; background-size:40px; background-position:-3px -1px; top: 10px; right: 15px; display: block;}
.muted .speaker {background-position:-3px -36px; }

.project_duranduran .speaker,
.project_imaginedragons .speaker,
.project_adele .speaker,
.project_shields .speaker,
.project_recs .speaker  {display:none;}


.project_recs video {max-width:800px; margin:20px auto;}

.adele_overlay {position:absolute; z-index:12; max-width:340px; left:50%; margin-left:-170px; bottom:7px;}

footer {margin:-15px  auto 25px;   max-width:1020px; text-align:left;  }
footer small {font-size:10px; color:#555555; display:inline-block; padding:0 22px; }

.launch.button {position:relative; display:inline-block; padding:12px 26px; border:white solid 1px; width:auto; margin:12px 0; color:white; background:#414149; margin-bottom:12px;  }
.launch.button:hover { cursor:pointer; border:#414149 solid 1px; background:#ffffff;color:#414149;}
.container {transition:all 0.8s;}
.container.blur  {    -webkit-filter: blur(7px);    -moz-filter: blur(7px);    -o-filter: blur(7px);    -ms-filter: blur(7px);    filter: blur(7px);    opacity:0.3;}
.contactclose  {display:none; cursor:pointer;z-index:66; top:17px; right:25px; position:fixed;}
.contactclose:hover {opacity:0.44;}
.contactclose img { width:16px; }
.contactdetails {display:none;width:300px; padding:20px; text-align:center; left:50%; margin-left:-170px; position:fixed; top:50%; margin-top:-65px;  height:90px;}
.contactdetails img{ display:inline-block;  width:16px; margin-right:5px;     top: 2px; position: relative;}
.contactdetails h3 {text-transform:uppercase; display:block; margin-bottom:12px;}
.contactdetails span {display:block; position:relative; padding:1px 10px;}




@media only screen and (max-width: 1060px) {
.content_container {padding:0 15px;}
.project_info_container {padding:25px 15px;}
}

@media only screen and (max-width: 768px) {
header {background:rgba(255,255,255,0.85);}
.content_container {padding:0 12px; display:block;}
.content_block {margin:0 0 25px;}
.project_info_container {padding:0px 12px;}
.project_info .details {float:none; width:auto;  margin:auto;}
.project_info .summary {float:none; width:auto;  margin:0 auto 25px;}
header  {position:static; width:auto; padding: 12px; height: auto; overflow:auto; }
.content_block.half, .text_block.half{ width:auto; max-width:100%;  }
header a {margin-bottom:0px;}
.logo {width: 260px;}
header a.back {top:85px; position:static;float:left; }
header a.contact {top:2px; right:inherit; position:relative;float:right; }
header a.linkedin {top:0px; right:inherit; position:relative;  float:right; margin-right:10px;}
.project_list {display:block;padding-bottom:22px;}
.project_list li {box-shadow:0 0 0px #ffffff; background:#ffffff;}
.project_list li div { display:block;}
.project_list li img {opacity:0.2;}
footer small {padding:0 12px; }

.contactclose {right:12px; top:14px;}
.logo {clear:both; padding:0;}
.text_block {margin:0 0 25px;}
.adele_overlay { max-width:230px; left:50%; margin-left:-115px; bottom:0px;}
.project_adele video::-webkit-media-controls-start-playback-button {  display: none !important;}


}