/*   
Theme Name: Demon Graphics
Description: This is the theme for the Demon Graphics website
Author: Kevin Walton
Author URI: http://www.adroitmultimedia.co.nz
Version: 2.0
*/

/* STYLES RESET */

* { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* IE Fix */

a img{border:none;}

/* Remove placeholder text in inputs when they get focus. */

input:focus::-webkit-input-placeholder { color: transparent; }
input:focus::-moz-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus::-moz-placeholder { color:transparent; }

input:focus{ text-align:left; }
input:focus{ text-align:left; }
textarea:focus{ text-align:left; }
textarea:focus{ text-align:left; }

/* CLEARFIX */

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; clear: both; }

/* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */

/*******************************************************/

/* BASE STYLES */

body{
	font-family: 'Roboto Slab', serif;
	color:#e8c692;
	font-size:12px;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto Slab', serif;
	font-weight:300;
	text-transform:uppercase;
}

h2{
	font-size:38px;
	margin-bottom:40px;
}

strong{
	font-weight:700;
}

p{margin-bottom:12px;}

a{
	color:#e8c692;
	transition:all 0.2s;
}

a:hover{
	color:#fff;
	text-shadow:0 0 5px #e8c692, 0 0 15px #e8c692;
	transition:all 0.2s;
}

.container{
	width:940px;
	margin:0 auto;
	text-align:center;
}

.font13 p{
	font-size:13px;
}

.font14 p{
	font-size:14px;
}

.font15 p{
	font-size:15px;
}

@media(max-width:940px){
	.container{
		width:100%;
	}
	
	.container img{
		max-width:100%;
		height:auto;
	}
}

/* END BASE STYLES */

/*******************************************************/

/* HEADER STYLES */

header{
	min-height:260px;
	text-align:center;
}

#header_content{
	width:69.15%;
	padding-top:120px;
	padding-bottom:50px;
}

.red_separator{
	height:15px;
	background:#a8111a url('images/red_bg.jpg') center center;
	background-size:cover;
}

/* END HEADER STYLES */

/*******************************************************/

/* NAV STYLES */

#top_nav_hr, #bottom_nav_hr{
	border:solid 1px #e8c692;
}

#bottom_nav_hr{
	width:90%;
	margin:0 auto;
}

#header_nav{
	margin-top:-80px;
	padding:15px 0;
	background:#a8111a url('images/red_bg.jpg') top center;
	background-size:cover;
}

#header_nav ul{
	display:table;
}

#header_nav ul li{
	display:table-cell;
	padding:0 20px;
}

#header_nav ul li a{
	display:inline-block;
	text-decoration:none;
	color:#e8c692;
	text-transform:uppercase;
	font-size:16px;
	padding:10px 0;
	transition:all 0.2s;
}

#header_nav ul li a:hover{
	color:#fff;
	text-shadow:0 0 5px #e8c692, 0 0 15px #e8c692;
	transition:all 0.2s;
}

header .menu-header-left-container{
	float:right;
	text-align:right;
	margin-right:120px;
}

header .menu-header-right-container{
	float:left;
	text-align:left;
	margin-left:120px;
}

#nav_logo{
	position:relative;
	top:40px;
}

/* Responsive Navigation Menu */

#responsive_nav, #responsive_nav_icon{
	display:none;
}

#responsive_nav_icon{
	background:#a8111a url('images/red_bg.jpg') top center;
	background-size:cover;
	padding:5px 20px 5px 0;
	width:100%;
	text-align:right;
	position:absolute;
	top:0;
	right:0;
	color:#E8C692;
	font-size:40px;
}

#responsive_nav{
	position:fixed;
	top:0px;
	width:80%;
	height:100%;
	background:#fff;
	border-left:solid 1px #000;
	border-top:solid 5px #E8C692;
}

.onscreen{
	right:0;
	transition:all 0.5s;
}

.offscreen{
	right:-81%;
	transition:all 0.5s;
}

#responsive_close{
	text-align:right;
	padding:10px 20px;
	color:#000;
	border-bottom:solid 1px #ccc;
}

#responsive_close .fa-times-circle-o{
	font-size:40px!important;
}

#responsive_nav_icon:hover, #responsive_close .fa:hover{
	cursor:pointer;
}

#responsive_nav ul{
	list-style:none;
}

#responsive_nav ul li{
	font-family: 'HelveticaLight';
	text-transform:uppercase;
	font-size:16px;
	border-bottom:solid 1px #ccc;
	line-height:50px;
	height:50px;
}

#responsive_nav ul li a{
	text-decoration:none;
	padding-left:40px;
	color:#222;
	width:100%;
	height:100%;
	display:block;
	text-shadow:none;
}

#responsive_nav ul li a:hover{
	background:#f0f0f0;
	color:#232323;
}

@media(max-width:720px){
	/* Switch to mobile menu */
	#nav_logo{
		top:95px;
	}
	
	#header_nav{
		display:none;
	}
	
	header .menu-header-left-container{
		float:none;
		text-align:left;
		margin-right:0;
	}

	header .menu-header-right-container{
		float:none;
		text-align:left;
		margin-left:0;
	}
	
	#responsive_nav{
		display:block;
	}
	
	#responsive_nav_icon{
		display:block;
	}
}

@media(max-height:320px){
	#responsive_close{
		padding:2px 20px;
	}
	
	#responsive_nav ul li{
		font-size:12px;
		line-height:30px;
		height:30px;
	}
}

/* END NAV STYLES */

/*******************************************************/

/* CONTENT STYLES */

a.link{
	color:#e8c692;
	text-transform:uppercase;
	font-size:17px;
	font-weight:700;
	transition:all 0.2s;
}

a.link:hover{
	color:#fff;
	text-shadow:0 0 5px #e8c692, 0 0 15px #e8c692;
	transition:all 0.2s;
}

.section_header{margin-bottom:40px;}

.grunge_bg{
	background:#000 url('images/grunge_bg.jpg') top center;
	background-size:cover;
	padding:50px 0;
}

#what_we_offer article{
	width:27%;
	padding:0 3%;
	float:left;
}

.red_grunge{
	background:#000 url('images/red_bg.jpg') bottom center;
	background-size:cover;
	padding:50px 0;
}

.ngg-gallery-thumbnail-box{
	width:33.33%;
}

.ngg-gallery-thumbnail img{
	margin:0px!important;
	padding:0px!important;
	border:none!important;
}

#lets_talk{
	background:#000 url('images/grunge_bg.jpg') bottom center;
	background-size:cover;
	padding:100px 0;
}

#keep_updated{
	background:#000 url('images/red_bg.jpg') top center;
	background-size:cover;
	padding:100px 0;
	border-bottom:solid 10px #640909;
}

#keep_updated .container{
	width:650px;
}

#facebook, #instagram{
	margin:0 35px;
}

#facebook .fa{
	font-size:100px!important;
	color:#366797!important;
	transition:all 0.2s;
}

#facebook .fa:hover{
	color:#fff!important;
	transition:all 0.2s;
}

#work_galleries{
	margin-top:-80px;
	margin-bottom:50px;
}

#work_galleries .ngg-gallery-thumbnail-box{
	margin-right:0px!important;
}

#work_galleries .ngg-gallery-thumbnail img{
	width:300px;
	margin:0px!important;
}

.tabs-shortcode.ui-tabs{
	background:none!important;
}

.tabs-shortcode .ui-tabs-nav li{
	border:none!important;
	background: rgb(118,11,13)!important; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2MGIwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MzA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)!important;
	background: -moz-linear-gradient(top,  rgba(118,11,13,1) 0%, rgba(83,8,9,1) 100%)!important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,11,13,1)), color-stop(100%,rgba(83,8,9,1)))!important; /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(118,11,13,1) 0%,rgba(83,8,9,1) 100%)!important; /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(118,11,13,1) 0%,rgba(83,8,9,1) 100%)!important; /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(118,11,13,1) 0%,rgba(83,8,9,1) 100%)!important; /* IE10+ */
	background: linear-gradient(to bottom,  rgba(118,11,13,1) 0%,rgba(83,8,9,1) 100%)!important; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#760b0d', endColorstr='#530809',GradientType=0 )!important; /* IE6-8 */
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active, .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected{
	background:#840b0f!important;
}

.tabs-shortcode-top .ui-tabs-nav{
	border-bottom:none!important;
	display:table!important;
	width:100%!important;
}

.tabs-shortcode .ui-tabs-nav li{
	float:inherit!important;
	display:table-cell!important;
	text-align:center!important;
	padding:10px 0px!important;
}

.tabs-shortcode .ui-tabs-nav li a{
	color:#e8c692!important;
	text-align:center!important;
	float:inherit!important;
	padding:10px 20px!important;
	text-transform:uppercase!important;
}

.tabs-shortcode .ui-tabs-nav li a:hover{
	color:#fff!important;
	cursor:pointer!important;
}

.tabs-shortcode .ui-tabs-panel{
	background:#840b0f!important;
	padding:20px!important;
}

@media(max-width:940px){
	.ngg-gallery-thumbnail-box{
		width:32%;
	}
	
	.ngg-gallery-thumbnail-box img{
		width:100%!important;
	}
}

@media(max-width:650px){
	#keep_updated .container{
		width:100%;
	}
}

@media(max-width:540px){
	#what_we_offer article{
		float:none;
		width:90%;
		margin:40px auto;
		clear:both;
	}
	
	.ngg-gallery-thumbnail-box{
		width:99%;
		margin-left:auto!important;
		margin-right:auto!important;
	}
	
	.ngg-gallery-thumbnail{
		width:100%;
	}
}

/* END CONTENT STYLES */

/*******************************************************/

/* CONTACT FORM STYLES */

.textfield, .textarea{
	font-family: 'Roboto Slab', serif;
	padding:15px;
	border:none;
	border-radius:3px;
	background:#959595;
	color:#000;
	text-transform:uppercase;
	text-align:center;
	margin:10px;
	font-weight:700;
	font-size:12px;
}

.textfield{
	width:200px;
}

.textarea{
	width:700px;
	height:100px;
	max-width:85%;
}

.submit_button{
	font-family: 'Roboto Slab', serif;
	padding:15px 25px;
	border:none;
	border-radius:3px;
	background:#e8c692;
	color:#000;
	text-transform:uppercase;
	text-align:center;
	margin:10px;
	font-weight:700;
	transition:all 0.2s;
}

.submit_button:hover{
	background-color:#fff;
	box-shadow:0 0 5px #e8c692, 0 0 15px #e8c692;
	transition:all 0.2s;
	cursor:pointer;
}

/* END OF CONTACT FORM STYLES */

/*******************************************************/

/* FOOTER STYLES */

footer{
	background:#000 url('images/grunge_bg.jpg') center center;
	background-size:cover;
}

#footer_logo{
	position:relative;
	top:-45px;
}

footer nav{
	margin-top:-90px;
}

footer nav ul{
	display:table;
}

footer nav ul li{
	display:table-cell;
	padding:0 20px;
}

footer nav ul li a{
	display:inline-block;
	text-decoration:none;
	color:#e8c692;
	text-transform:uppercase;
	font-size:12px;
	transition:all 0.2s;
}

footer nav ul li a:hover{
	color:#fff;
	text-shadow:0 0 5px #e8c692, 0 0 15px #e8c692;
	transition:all 0.2s;
}

footer .menu-footer-left-container{
	float:right;
	text-align:right;
	margin-right:120px;
}

footer .menu-footer-right-container{
	float:left;
	text-align:left;
	margin-left:120px;
}

@media(max-width:620px){
	footer nav{
		display:none;
	}
}

#gherkin_logo{
	padding:50px 0 10px 0;
}

/* END FOOTER STYLES */

/*******************************************************/

/* MISCELLANEOUS */

.half_left{width:50%;float:left;}
.half_right{width:50%;float:right;}
.fleft{float:left;}
.fright{float:right;}
.center{margin-left:auto;margin-right:auto;}
.hidden{display:none;}