html { min-height:100%; -webkit-font-smoothing: antialiased; }
body { min-height:100%; background:#111; font-family:Roboto,sans-serif;}
header { background:white; }

#logo {
	margin:auto;
	position:relative;
	display:block;
	width:700px;
	max-width:90%;
	transition:all .2s;
	animation: fadein 1s ease-in forwards;
	z-index:1;
}

#background-logo {
	opacity:.1;
	position:absolute;
	display:none;
	width:100%;
	background: url(/img/bg_logo.gif) repeat-y;
	background-size:contain;
	background-position:0 -25px;
	background-position: center -25px; 
}

#page_desc { text-align:center; font-size:1.1em; border-top:2px solid #222; padding:.5em; display:none;}

h1 { color:yellow; text-align:center;}

main { padding:1em 0; }
.portfolio { position:relative; cursor:pointer; padding:.75em 1em !important;}
.portfolio img { transition:all .1s;}
.portfolio .thumb_bg { z-index:5;}
.portfolio .port_thumb { z-index:10; left:0; position:absolute;}
.portfolio .fp-ratio { background-color:rgba(0,0,0,0); transition:all .2s;}
.portfolio.unloaded:hover .fp-ratio { background-color:rgba(0,0,0,.6);}
.portfolio.unloaded:hover .portfolio-text { opacity:1; z-index:15;}

.flowplayer { background-color: #222; background-size: cover; }
.flowplayer .fp-controls { background-color: rgba(17, 17, 17, 1)}
.flowplayer .fp-timeline { background-color: rgba(204, 204, 204, 1)}
.flowplayer .fp-progress { background-color: rgba(0, 167, 200, 1)}
.flowplayer .fp-buffer { background-color: rgba(249, 249, 249, 1)}
.flowplayer .fp-ui { background:none !important;}
.flowplayer .fp-logo {
  opacity: 1;
  display:block;
  margin-left: calc(97% - 60px);
  transition:all .5s;
}


.portfolio-text {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  	position:absolute;
	font-size:2vw;
	color:white;
	width:100%;
	padding:0 2em;
	text-align:center;
	transition:all .2s;
	text-shadow:  0 0 5px black;
	opacity:0;
}
.portfolio-client,.portfolio-program,.portfolio-title { font-family:"Open Sans" !important; font-weight:400 !important;}
.portfolio-client,.portfolio-program { text-transform:uppercase; font-weight:800 !important;}
.portfolio-description { font-style:italic !important; margin-top:1em !important; line-height:1.2em !important; font-size:.8em !important;}

.is-ready + .portfolio-text { display:none;}
.is-loading + .portfolio-text { transition:all 1.5s; opacity:0 !important;}

footer { background-color:white; font-size:1.1em; text-align:center; text-transform:uppercase; padding:1em; bottom:0; width:100%; }
footer span { display:inline-block; padding:.2em .5em; white-space: nowrap; z-index:10; position:relative;}
footer a { color:black; transition:all .2s;}
footer a:hover { color:black;}

.fadeIn { display:none;}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes zoomIn {
	from { opacity: 0; transform: scale(.2); }
	to { opacity: 1; transform: scale(1); }
}

@media only screen and (min-width: 1200px) {
	.portfolio-text { font-size:2em;}
}


/* single width images */
@media only screen and (max-width: 767px) {
	#page_desc { font-size:2.5vw;}
	.portfolio-text { font-size:5vw;}
	footer { font-size:2.5vw;}
}

@media only screen and (max-width: 480px) {
	body { font-size:10px;}
}