/* 
Name: Dystopianlabs
Author: Scryren
Website: http://dystopianlabs.com
Version: 8
Date: 8/12/2014
*/

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic);

/* Layout */
body {
	background-color: #e7e7e7;
}

.row-full-width {
	width: 100%; 
	clear: both; 
	content: " ";
	display: table;	
}

h1 {
	font-family: "Oswald", Arial, sans-serif !important;
	color: #e7e7e7;
}

h2 {
	font-family: "Oswald", Arial, sans-serif !important;
	color: #606060;
	text-shadow:0 1px 2px rgba(0,0,0,0.6);	
}

h3 {
	font-family: "Oswald", Arial, sans-serif !important;
	color: #404040;
}

#about a, #footer a {
	color: #a0d01f;
}

#about a:hover, #about a:focus, #footer a:hover, #footer a:focus {
	color: #008cba;    
	}

/* Transition: Opacity  */
img.portfolio-lg, img.portfolio-lg:hover, .about-social-icon, .about-social-icon:hover {
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

/* Transition: Color*/
#about a, #footer a, #about a:hover, #about a:focus, #footer a:hover, #footer a:focus {
    transition: color .2s ease-out;
    -moz-transition: color .2s ease-out;
    -webkit-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;	
}

/* Transition: Background  */
button, .button, button:hover, button:focus, .button:hover, .button:focus {
    transition: background .2s ease-out;
    -moz-transition: background .2s ease-out;
    -webkit-transition: background .2s ease-out;
    -o-transition: background .2s ease-out;	
}



/* Navigation */
.top-bar-section ul li > a  {
	font-family: "Oswald", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;	
}

.top-bar-section ul li > a:hover  {
	color: #a0d01f !important;
}

.top-bar, .top-bar-section li a:not(.button), .tab-bar, .left-off-canvas-menu {
	background-color: #151515 !important;
}

.top-bar-section li a:not(.button):hover {
    background-color: #151515 !important;  
}

.top-bar-section ul li.active > a {
    background-color: #008cba !important;  
}

.top-bar-section ul li.active > a:hover {
    background-color: #151515 !important;  
}

/* Banner Image */
#banner {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #151515;
    background-image: url("images/penguinBanner_1920.jpg");
    background-origin: padding-box;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 250px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 100px;
    position: relative;
    text-align: left;
}


#intro {
	font-family: "Oswald", Arial, sans-serif !important;
	padding-bottom: 30px;	
}

.top-logo {
	font-size: 48px;
	font-weight: 200;
	color: #303030;
	text-shadow:0 1px 2px rgba(255,255,255,0.8);	
}

.intro-quote {
	font-family: "Oswald", Arial, sans-serif;
	color: #555555;	
	padding: 15px 0px 20px 0px;
	font-size: 21px;
	font-weight: 300;
	margin: 0px;	
}

.quote-emphasis {
	font-weight: 400;
	font-style: italic;

	text-shadow:0 1px 2px rgba(255,255,255,0.8);	
}

/* Portfolio */
.portfolio img {
	border: 1px solid #cccccc;
}
	
.portfolio-lg-container {
	margin: 0px;
	padding: 0px;
    background:#000000;	
}

img.portfolio-lg {
    opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */	
}

img.portfolio-lg:hover  {	
    opacity: .4;
	filter: alpha(opacity=40); /* For IE8 and earlier */
}

.portfolio {
	margin-bottom: 10px; /*Space between artwork rows*/	
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #f2f2f2;
}

.portfolio p {
	color: #404040;
	font-size: 16px;
}

p.portfolio-details {
	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 13px;
	font-weight: 400;
}

/* About */
#about {
	margin-top: 30px;
	padding: 30px 0px 30px 0px;
	border-top: 1px solid #ffffff;
	background-color: #222222;

}

#about article, #about h2 {
	color: #eeeeee;
}

#about article {
	font-family: "Oswald", Arial, sans-serif;
	color: #999999;
	font-size: 18px;
	font-weight: 300;
	line-height: 175%;
}

.about-social-icon {
	display: inline;
	padding-left: 10px;
    opacity: .7;
	filter: alpha(opacity=70); /* For IE8 and earlier */	
	height: auto;
	width: auto;
}

.about-social-icon:hover {
	display: inline;
    opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */	
}

#contact {
	padding-top: 15px;	
}

/* Footer */

#footer {
	padding-top: 15px;
	padding-bottom: 15px;		
	color: #666666;
	background-color: #222222;	
	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 16px;
	font-weight: 400;
	border-top: 1px dashed #4f4f4f; 	
}

.footer-logo {
	font-family: "Oswald", Arial, sans-serif !important;
	font-size: 21px;
	font-weight: 400;	
}

#footer-links {
	float: right; 
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.copyright {
	font-size: 12px;	
}

/* Fancybox 2 Overrides */
.fancybox-lock body {
    overflow: visible !important;
}

.fancybox-skin {
	padding: 0px !important;
		
}

/* Misc */
button, .button {
	font-size: 13px !important;
	background-color: #91ca09;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #008cba;	
}


/* Small | Mobile (Max 640px) */
@media (max-width: 40em) {
	#banner {    	
		background-image: url("images/penguinBanner_640.jpg");	
		padding-top:1%; /* slope */
		height:150px; /* start height */
		display:block;
		margin:0;
		background-size:cover;
		-moz-background-size:cover;
		background-position:center bottom;
	}

	
	.f-topbar-fixed  {
		padding: 0px;
	}
}

/* Medium | Tablet (641px - 1024px) */
@media (min-width: 40.063em) and (max-width: 64em) {
	#banner {
		background-image: url("images/penguinBanner_1024.jpg");				
		padding-top:1%; /* slope */
		height:250px; /* start height */
		display:block;
		margin:0;
		background-size:cover;
		-moz-background-size:cover;
		background-position:center bottom;		
	}
	
}

/* Large | LQ Desktop (1025px - 1440px) */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }

/* XLarge | HQ Desktop (1441px - 1920px) */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }

/* XXLarge | Apple Thunderbolt (1921px+) */
@media only screen and (min-width: 120.063em) { }