html,body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	min-height:100%;
	font-family: 'Oswald', sans-serif;
	color:#fdfbd7;
}
body{
	background-color:#cf3427;
	text-align:center;
	overflow-y: scroll;
}

.white{
	color:#fdfbd7;
}
.red{
	color:#cf3427;
}
.gold{
	color:#9d802e;
}

a{
	color:inherit;
}



ul.menu{
	list-style:none;
	display:flex;
	justify-content: center;
	margin:0 auto;
	padding:0;
	width:100%;
	font-weight: 700;
	font-size:27px;
	transition: 1s;
}

ul.menu li{
	text-align:center;
	padding-right:2em;
	position:relative;
}
ul.menu li:after{
	content:'\2022';
	display:inline-block;
	position:absolute;
	right:1em;
	line-height:2em;
	color:#9d802e;
	font-size:0.7em;
	z-index:1;
}
ul.menu li:before{
	display:block;
	position:absolute;
	content:'';
	top:0px;
	left:0px;
	height:calc(100% - 0.1em);
	width:calc(100% - 2em);
	width:0;
	opacity:0;
	border-bottom:solid 2px #cf3427;
	transition:500ms;
}
ul.menu li:hover:before,
ul.menu li.selected:before{
	width:calc(100% - 2em);
	opacity:1;
	z-index:1;
}

ul.menu li a{
	text-decoration:none;
	text-transform:uppercase;
	color:inherit;
	position:relative;
	z-index:4;
}
ul.menu li a:hover{

}


	.page-home ul.menu{
		font-size:33px;
	}
	.page-home ul.menu li{
		padding-right:1.5em;
	}
	.page-home ul.menu li:after{
		right:0.75em;
	}
	.page-home ul.menu li:hover:before,
	.page-home ul.menu li.selected:before{
		width:calc(100% - 1.5em);
	}


	@media only screen and (max-width: 1440px){
		.page-home ul.menu{
			font-size:2.4vw;
		}
	}


	@media only screen and (max-width: 1240px){
		ul.menu{
			font-size:2.4vw;
		}
		ul.menu li{
			padding-right:1.5em;
		}
		ul.menu li:after{
			right:0.75em;
		}
		ul.menu li:hover:before,
		ul.menu li.selected:before{
			width:calc(100% - 1.5em);
		}
	}




ul.menu li:last-child{
	padding-right:0;
}
ul.menu li:last-child:after{
	display:none;
	content:'';
}
ul.menu li:last-child:hover:before,
ul.menu li.selected:last-child:before{
	width:calc(100%);
}



#wrap{
	width:90%;
	max-width:1300px;
	margin:0 auto;
	min-height:100%;
	background-color:#000;
	background-image:url('../../images/page-home.jpg');
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-image 2s;
}
	.page-about #wrap{
		background-image:url('../../images/page-chair.jpg');
	}
	.page-services #wrap,
	.page-contact #wrap,
	.page-gallery #wrap,
	.page-products #wrap,
	.page-book #wrap{
		background-image:url('../../images/page-towel.jpg');
	}

#wrap{
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	flex-direction: column;
}


.body{
	flex:1;
	width:100%;
}


.page-home .body{
    display: flex;
    flex-direction: column;
    justify-content: center;
}









#logo{
	display:block;
	position:relative;
	width:80%;
	height:80%;
	margin-top:-6%;
	max-width:677px;
	max-height:810px;
	transition: 1s;
}
#logo .bigd{
	display:block;
	width:100%;
	padding-bottom:100%;
	background-image:url('../../images/big-d.png');
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
}

.innerpage #logo{
	width:170px;
	padding-top:20px;
	padding-bottom:10px;
	margin:0 auto;
}
.innerpage #logo .bigd{
	background-image:url('../../images/big-d-circle.png');
}

		.page-home #logo{
			width:400px;
			height:auto;
			padding-top:20px;
			padding-bottom:20px;
			margin:0 auto;
			max-width:90%;
		}
		.page-home #logo .bigd{
			background-image:url('../../images/big-d-circle.png');
		}

		@media only screen and (min-width: 1440px){
			.page-home #logo{
				width:40%;
			}
		}




	#hamburger{
		display:none;
		color:inherit;
		text-decoration:none;
		font-size:32px;
		position:absolute;
		top:20px;
		right:12%;
		cursor:normal;
	}
	#hamburger .fa-bars{
		cursor:pointer;	
	}

	#clickaway{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:800;
		display:none;
	}

	@media only screen and (min-width: 701px){
		#hamburger{
			display:none !important;
		}
	}

	@media only screen and (max-width: 700px){
		.innerpage #logo,
		.page-home #logo,
		#logo{
			width: 40%;
		}

		ul.menu{
			display:none;
			transition: none;
		}

		ul.menu{
			position:fixed;
			top:0px;
			left:0px;
			width:100%;
			z-index:900;
			box-shadow: 0px 3px 3px #000000;
		}
			ul.menu li:after,
			ul.menu li:before{
				display:none;
			}
			.page-home ul.menu li,
			ul.menu li,
			ul.menu li:last-child{
				display:block;
				background-color:#000;
				padding:8px 4px;
				border-bottom:solid 1px #cf3427;
				margin:0;
				font-size:20px;
			}
			ul.menu li a{display:block;}

		#hamburger{
			display:block;
		}

		.offTop #hamburger{
			width:88%;
			background-color:#000;
			display:block;
			text-align:right;
			position: fixed;
			height: 50px;
			line-height:50px;
			right: 0;
			top: 0;
			padding-right:12%;
			z-index:800;
			box-shadow: 0px 3px 3px #000000;
		}
		.offTop #hamburger::before{
			content:'';
			background-image:url('../../images/big-d-circle.png');
			background-repeat:no-repeat;
			background-size:contain;
			position:absolute;
			left:12%;
			top:5px;
			height:45px;
			width:45px;
		}

	}



	@media only screen and (max-width: 400px){
		.innerpage #logo,
		.page-home #logo,
		#logo{
			width: 38%;
			margin-right: auto;
			margin-left: 10%;
		}
}













.homequote{
	font-family: 'Roboto Slab', serif;
	font-weight:400;
	letter-spacing:0.03em;
	font-size:3.3vw;
	max-width:65%;
	margin:1em auto;
}

@media only screen and (min-width: 1440px){
	.homequote{
    	font-size: 49px;
	}
}
@media only screen and (max-width: 860px){
	.homequote{
    	font-size: 32px;
	}
}
@media only screen and (max-width: 700px){
	.homequote {
	    font-size: 26px;
	    max-width: 90%;
	}
}




.homequote p{
	margin:0.2em;
}
.homequote .byline{
	font-weight:200;
	font-size:0.75em;
	text-align:right;
}








.barbers{
	width:80%;
	margin:0 auto;
	max-width:720px;
}

.barbers .barber{
	width:100%;
	display:flex;
	flex-direction:row;
	text-align:left;
	font-size:19px;
	padding:1em 0;
}
.barbers .barber .portrait{
	width:163px;
	min-width:163px;
	height:175px;
	margin-right:30px;
	background-color:#333333cc;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	border:solid 2px #9d802e;
}
.barbers .barber h2{
	margin:0;
	font-size:1.1em;
	line-height:1em;
	text-transform:uppercase;
	font-weight:500;
}
.barbers .barber p{
	margin:0.2em 0 0.6em 0;
}

@media only screen and (max-width: 700px){
	.barbers .barber{
		flex-direction:column;
	}
	.barbers .barber .portrait {
    margin-bottom: 1em;
	}
}







a.btn{
	display:inline-block;
	text-decoration:none;
	color:#fdfbd7;
	background-color:#9d802e;
	min-width:120px;
	text-align:center;
	text-transform:uppercase;
	padding:2px 2px;
	border:solid 1px #fdfbd7;
	font-size:14px;
	letter-spacing:0.03em;
	transition:300ms;
}

a.btn:hover{
	background-color:#cf3427;
}



a.btn.big{
	font-size:18px;
	padding:4px 8px;
}


.services-menu{
	display:flex;
	flex-direction:row;
	width:80%;
	margin:0 auto;
}


ul.services{
	list-style:none;
	text-align:left;
	margin:0 0 0 1em;
	padding:0 1em 0 0;
	font-weight:300;
	border-right:solid 1px #9d802e;
}

ul.services:first-child{
	margin:0;
}

ul.services:last-child{
	border-right:0;
	padding-right:0;
}


ul.services li{
	margin:0.5em 0 1em 0;
	white-space:nowrap;
}

ul.services li .description{
	white-space:normal;
}

ul.services li h3,
ul.services li .price,
ul.services li .time{
	margin:0;
	display:inline-block;
	text-transform:uppercase;
	font-weight:500;
	font-size:18px;
}
ul.services li .time{
	font-size:0.9em;
}
ul.services li .time span{
	font-size:0.75em;
}
ul.services li h3:after{
	content:' \2013 ';
	color:#9d802e;
}
ul.services li .time:after{
	content:' }';
	color:#9d802e;
}
ul.services li .time:before{
	content:'{ ';
	color:#9d802e;
}

ul.services li .disclaimer{
	white-space:normal;
	padding-left:1.2em;
	font-size:0.95em;
	position:relative;
}

ul.services li .disclaimer:before{
	position:absolute;
	left:0;
	content:'**';
	color:#9d802e;
}
@media only screen and (max-width: 1340px){

	.services-menu{
		width:90%;
	}

	ul.services li h3{
		display:block;
		white-space:normal;
	}
	ul.services li h3:after{
		display:none;
	}

}

@media only screen and (max-width: 1240px){
	.services-menu{
		display:flex;
		flex-direction:column;
		width:90%;
		margin:0 auto;
		padding-bottom:2em;
	}

	ul.services li h3{
		display:inline-block;
		white-space:nowrap;
	}
	ul.services li h3:after{
		display:inline;
	}


	ul.services,
	ul.services:first-child,
	ul.services:last-child{
		margin:0 auto;
		padding:0;
		border:0;
		width:90%;
		max-width:400px;
	}
}

@media only screen and (max-width: 500px){
	ul.services li h3{
		display:block;
		white-space:normal;
	}
	ul.services li h3:after{
		display:none;
	}
}













.contactform .entry{
	display:block;
	float:left;
	box-sizing: border-box;
	margin-bottom:0.5em;
	padding-right:0.5em;
}
.contactform:after{
	display:block;
	clear:both;
	content:'';
}

.contactform .entry input,
.contactform .entry textarea{
	width:100%;
	margin:0;
	padding:3px 6px;
	font-family:inherit;
	font-size:24px;
	box-sizing: border-box;
	background-color:#fdfbd7;
	border:solid 1px #9d802e;
	color:#333;
}
.contactform .entry input::placeholder,
.contactform .entry textarea::placeholder{
	color:#9d802e;
}



.contactform .entry.w100{
	width:100%;
}
.contactform .entry.w50{
	width:50%;
}

	@media only screen and (max-width: 800px){
		.contactform .entry.w50{
			width:100%;
		}
	}



.contactform .entry input.btn{
	width:auto;
	display:inline-block;
	text-decoration:none;
	color:#fdfbd7;
	background-color:#9d802e;
	min-width:120px;
	text-align:center;
	text-transform:uppercase;
	padding:2px 2px;
	border:solid 1px #fdfbd7;
	font-size:0.8em;;
	letter-spacing:0.03em;
	transition:300ms;
	cursor:pointer;
}

.contactform .entry input.btn:hover{
	background-color:#cf3427;
}













h1{
	font-size:35px;
	font-weight:300;
	text-transform:uppercase;
}


.innerpage .intro:before,
.innerpage .intro:after{
	display:block;
	content:'';
	background-image:url('../../images/gold-thing.png');
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
	height:39px;
	max-height:39px;
	max-width:80%;
	margin:1em auto;
}

.innerpage .intro:after{
	transform: rotate(180deg);
}

.innerpage .intro{
	width:88%;
	max-width:910px;
	margin-left:auto;
	margin-right:auto;
	font-size:26px;
	font-weight:300;
}

.innerpage .intro .testimonial{
	position:relative;
	padding:0 1em;
}
.innerpage .intro .testimonial:before{
	content:'\201C';
	font-size:3em;
	position:absolute;
	margin-left:-0.35em;
	margin-top:-0.35em;
}
.innerpage .intro .testimonial:after{
	content:'\201D';
	font-size:3em;
	position:absolute;
	margin-left:0.05em;
	margin-top:-0.1em;
}
.innerpage .intro .byline{
	font-weight:200;
}

.innerpage .intro.skinny{
	width:60%;
}



@media only screen and (max-width: 700px){
	.innerpage .intro{
		font-size:22px;
	}
}









.gallery{
	width:90%;
	margin:3em auto;
}
.gallery img{
	width:100%;
	height:auto;
	border:solid 2px #9d802e;
}



footer{
	font-size: 15px;
    padding-bottom: 1.32em;
	transition: 500ms;
}

.page-home footer,
.page-contact footer{
	font-size: 20px;
}

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

	footer,
	.page-home footer,
	.page-contact footer{
		font-size: 15px;
	}

}

footer a{
	color:inherit;
}


footer a.social{
	display:inline-block;
	width:2em;
	height:2em;
    margin: 0 0.7em;
	background-position:center center;
	background-size:contain;
	background-repeat:no-repeat;
    border-radius: 50%;
    background-color: #9d802e00;
	transition:background-color 300ms;
}
footer a.social:hover{
	background-color:#9d802e;
}
footer a.social.face{
	background-image:url('../../images/social-fb.png');
}
footer a.social.gram{
	background-image:url('../../images/social-gram.png');
}