/*
Theme Name: You Dance
Theme URI: https://www.youdance.co.nz/
Description: Custom theme designed by Touch Marketing
Version: 1.0
Author: Chris Grimshaw-Jones
Author URI: www.touchmarketing.co.nz
*/

/* ==|== You Dance ===================================================
====================================================================== */

/* ==|== Structure ===================================================
====================================================================== */

.row{
	position:relative;
	-webkit-perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;	
}

#content{
	margin-top:100px;
}

#top, #bottom{
	margin-bottom:50px;
}

#view-menu-mobile{display:none;}
#back-to-top{display:none;}
#mobile-nav{display:none;}
#main-wrapper{
	position:relative;
	z-index:2;
	background:#fff;
}

#outer-wrapper{
	width:100%;
	overflow:hidden;
}

/* ==|== Typography ==================================================
====================================================================== */

h1, h2, h3, h4, h5, h6{
	font-family: 'Titillium Web', sans-serif;
	color:#1f2123;	
}

h1{
	font-size:58px;
	margin:0;
	line-height:0.9em;
	word-break:break-all;
}

h2{
	font-size:28px;
	margin:0 0 10px;
}

h3{
	font-size:24px;
	margin:0 0 10px;	
}

p{
	margin:0 0 10px 0;
}

@font-face {
    font-family: 'WebfontRegular';
    src: url('fonts/social_logos-webfont.eot');
    src: url('fonts/social_logos-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/social_logos-webfont.woff') format('woff'),
         url('fonts/social_logos-webfont.ttf') format('truetype'),
         url('fonts/social_logos-webfont.svg#WebfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.social-nav ul li a{
	font-family:'WebfontRegular';
	color:#fff;
	font-weight:100;
	font-size:65px;
}

li{
	list-style-type:none;
}

a.arrow{
	background:url('images/icons/link-arrow.png') no-repeat top left;
	padding-left:24px;
	line-height:24px;
	height:24px;
	display:block;
	color:#1f2123;	
	font-weight:600;
	float:left;
}

a.arrow:hover{
	color:#30b1e8;
}

.underline{
	border-bottom:solid 10px #1d93d0;
	padding-bottom:20px;
	margin-bottom:20px;
}

.contact-numbers h3{
	color:#fff;
	margin-top:0;
	font-weight:300;
}

/* ==|== Header ======================================================
====================================================================== */

#main-header{
	background:#000;
	width:100%;
	margin:0 0 50px 0;
	overflow:hidden;
}

#navigation{
	position:fixed;
	width:100%;
	height:50px;
	top:0;
	left:0;
	background:#1f2123;	
	z-index:100;
}

/*#navigation.home{
	position:absolute;
	background:none;
	z-index:10;
}*/

#navigation ul li{
	float:left;
	line-height:50px;	
}

#navigation ul li a{
	color:#fff;
}

#main-nav ul li{
	margin-left:8%;
}

#main-nav ul li:first-child{
	margin-left:0;
}

#main-nav ul li a.selected{
	border-bottom:solid 2px #009fe3;
}

#main-nav ul li a:hover{
	border-bottom:solid 2px #009fe3;
}

.social-nav ul li{
	float:right!important;
}

.social-nav ul li a:hover{
	color:#c9c9c9;
}

/* ==|== Slider ======================================================
====================================================================== */

#slider{
	width:100%;
	max-width:1500px;
	position:relative;
	margin:0 auto;
}

#slide-overlay{
	width:100%;
	height:auto;
	position:relative;
	z-index:5;
}

.slide{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}

.slide-cntrl{
	position:absolute;
	bottom:10px;
	z-index:6;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:100px;
}



.slide-btn{
	float:left;
	height:12px;
	width:12px;
	background:#c9c9c9;
	margin-right:5px;
	-moz-border-radius:100%;
	-webkit-border-radius:100%;
	-ms-border-radius:100%;
	-o-border-radius:100%;
	border-radius:100%;
}

.slide-btn.selected{
	background:#009fe3;
}

/* ==|== Welcome =====================================================
====================================================================== */

#welcome{
	margin:0 0 50px;
}

/* ==|== Blog =========================================================
====================================================================== */

#blog{
	margin:0 0 50px;
	background:#ececec;
	border-top:solid 1px #c3c3c3;
	border-bottom:solid 1px #c3c3c3;
	padding:50px 0;
}

#blog.page{
	margin:0 0 50px;
	background:#fff;
	border-top:none;
	border-bottom:none;
	padding:0;
}

#blog.page .row{
	border-top:solid 10px #1d93d0;
	padding-top:50px;
}

#posts h1{
	word-break:normal;
}

.the-date{
	font-weight:bold;
	font-style:italic;
}

#posts article{
	border-left:solid 10px #1d93d0;
	margin-bottom:50px;
}

/* ==|== Single =====================================================
====================================================================== */

.single-post h1{
	border-bottom:solid 10px #1d93d0;
	padding-bottom:20px;
	margin-bottom:20px;
}

/* ==|== Gallery =====================================================
====================================================================== */

#gallery{
	margin:0 0 50px;
}

.gallery-image{
	float:left!important;
	margin:0 0 20px;
	width:100%;
}

.gallery-image img{
	transition: all 0.3s;
	-moz-transition: all 0.3s; /* Firefox 4 */
	-webkit-transition: all 0.3s; /* Safari and Chrome */
	-o-transition: all 0.3s; /* Opera */		
}

.gallery-image img:hover{
	box-shadow:2px 2px 2px 2px rgba(1,1,1,0.3);
}

/* ==|== Contact =====================================================
====================================================================== */

#contact{
	margin:0;
	background:#1f2123;
	padding:50px 0;
}

#contact h1{
	color:#fff;
}

#contact-form-wrap{
	position:relative;
}

#contact-form p{
	position:relative;
	line-height:1em;
	margin:0;
}

#contact-form span.label{
	position:absolute;
	top:40px;
	left:10px;
	color:#1f2123;
	font-size:18px;
	font-style:italic;
	background:none;
	font-weight:400;
	text-transform:uppercase;
}

#name{
	margin-top:-8px!important;
}

#name input, #email input, #subject input{
	height:70px;
	margin:0;
}

#name input{
	text-indent:130px;
}

#email input{
	text-indent:130px;
}

#subject input{
	text-indent:160px;
}

#message textarea{
	height:210px;
	text-indent:165px;
	padding-top:27px;
}

#name input, #email input, #subject input, #message textarea{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;	
}

#send input{
	background:url('images/icons/big-arrow.png') no-repeat top left;
	padding-left:43px;
	line-height:24px;
	height:52px;
	display:block;
	color:#fff;	
	font-weight:400;
	float:left;
	border:none;
	font-size:18px;
	cursor:pointer;
}

#send input:hover{
	color:#30b1e8;
}

#contact-form-wrap nav{
	float:right;
	margin-top:12px;
}

#contact-form-wrap nav li{
	float:left;
	line-height:1em;
}

.wpcf7-response-output{
	color:#fff!important;
	float: right;
    font-size: 20px;
    font-style: italic;
    margin-top: 15px;	
}

/* ==|== Signoff =====================================================
====================================================================== */

#signoff{
	margin:0;
	background:#ececec;
	padding:20px 0;
}

#signoff p{
	margin-top:30px;
}

/* ==|== Media Queries ===================================================== */

@media screen and (max-width: 1024px) {

	#main-nav{width:100%;}	
	#navigation .social-nav{display:none;}
	
	h1.small-on-ipad{
		font-size:44px;
	}
	
}

@media screen and (max-width: 767px) {
	
	h1{word-break:normal;}
	
	#main-header{margin-bottom:80px;}
	
	#slider{display:none;}
	
	#main-nav{display:none;}	
	
	#navigation{
		height:60px;
		overflow:hidden;
	}
	
	#view-menu-mobile{
		display:block;
		float:left;
		margin-left:10px;
	}  
	
	#view-menu-mobile p{
		background:url('images/icons/menu-icon.png') no-repeat top left;
		padding-left:80px;	
		color:#fff;
		line-height:60px;
		font-size:24px;		
		font-weight:300;	
	}	
	
	#mobile-nav{
		display:block;
		position:fixed;
		height:100%;
		width:150px;
		background:#fff;
		top:80px;
		border-right:solid 1px rgba(1,1,1,0.3);
		opacity:0;
	}
	
	#mobile-nav a{
		float:none;
		margin:0 0 20px 10px;
	}
	
	#mobile-nav a.selected{
		color:#30b1e8;
	}
	
	#back-to-top{
		display:block;
		float:right;
		border-left:solid 1px #737373;
	}
	
	#contact-form-wrap{margin-top:20px;}
	#blog article{margin-top:20px;}
	#gallery .gallery-image{margin-top:20px;}
	
	#content #top header{
		margin-bottom:20px;
	}
}