/*
Theme Name: Coiffure
Theme URI:
Description: 
Version: 1.0
Author: Bens
Author URI: www.bens.nl
Tags:
*/

/*
===========================================
=      ====        ==  =======  ===      ==
=  ===  ===  ========   ======  ==  ====  =
=  ====  ==  ========    =====  ==  ====  =
=  ===  ===  ========  ==  ===  ===  ======
=      ====      ====  ===  ==  =====  ====
=  ===  ===  ========  ====  =  =======  ==
=  ====  ==  ========  =====    ==  ====  =
=  ===  ===  ========  ======   ==  ====  =
=      ====        ==  =======  ===      ==
===========================================
=== R E C L A M E  &  M A R K E T I N G ===
===========================================
*/


/* ========================================================================= 
////	RESET
=========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin: 0;	padding: 0;	border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* ========================================================================= 
////	ALGEMENE LAY-OUT
=========================================================================== */
html {margin: 0; padding: 0; background-color: #eeeeee;}
body {margin:0; width:100%; font-family: 'TraiteurSlager', Arial, Helvetica, Verdana; font-size: 16px; color:#333; font-weight: normal; word-spacing: -0.03em; line-height: 20px; margin: 0; padding: 0;}
#wrapper-buiten {margin:0 auto; width:100%; height:auto;}
.content-container {margin:0 auto; max-width: 960px; height:auto; overflow:auto; clear:both; position:relative;}
img {border-style:none; max-width:100%; vertical-align:top; height:auto;}

/* ========================================================================= 
////	TEKSTEN  EN BASIS ONDERDELEN
=========================================================================== */
h1 {font-family:'Exo 2', Helvetica, Arial; font-size: 28px; color:#000; font-weight:300; letter-spacing: 0.05em; line-height: 1.1; margin: 10px 0; padding: 0;}
h2 {font-family:'Exo 2', Helvetica, Arial; font-size: 26px; color:#000; font-weight:300; line-height: 1.0; margin: 10px 0; padding: 0;}
h3 {font-family:'Exo 2', Helvetica, Arial; font-size: 24px; color:#000; font-weight:300; line-height: 1.0; margin: 10px 0; padding: 0;}
h4 {font-family:'Exo 2', Helvetica, Arial; font-size: 22px; color:#000; font-weight:300; line-height: 1.0; margin: 10px 0; padding: 0;}
h5 {font-family:'Exo 2', Helvetica, Arial; font-size: 20px; color:#000; font-weight:300; line-height: 1.0; margin: 10px 0; padding: 0;}
h6 {font-family:'Exo 2', Helvetica, Arial; font-size: 18px; color:#000; font-weight:300; line-height: 1.0; margin: 10px 0; padding: 0;}
p {font-family: 'Exo 2', Arial, Helvetica, Verdana, sans-serif; font-size: 18px; color:#555; line-height: 34px; margin: 0; padding: 0; font-weight: 500; -webkit-font-smoothing: antialiased;}
blockquote p {font-family: 'Exo 2', Arial, Helvetica, Verdana, sans-serif; font-size: 18px; line-height: 22px; font-weight: 300; margin:10px; padding:10px 20px; color:#aaa;}
hr {border: 0; height: 0; border-top: 1px solid #eee; margin:20px 0;}
b, strong {font-weight: 900;}
small {font-size:12px;}
a {text-decoration:none; color:#fff; font-weight:300;}

/* ========================================================================= 
////	ELEMENT SUFFIX
=========================================================================== */
.clear {clear:both;}
.overflow {overflow:hidden;}
.relative {position: relative;}
.absolute {position: absolute;}
.block {display:block;}
.caps {text-transform: uppercase;}
.center {text-align:center; margin:0 auto;}
.left {text-align:left; margin:0 auto;}
.right {text-align:right; margin:0 auto;}

/* ========================================================================= 
////	PAGE
=========================================================================== */
.top-bar {height:150px; background:#fff; margin:0 auto; z-index: 9999; position:relative;}
.coiffure-logo-container {width:100%; height:194px; position: absolute; top:53px; left:0;}
.coiffure-logo {display:block; height:194px; width:194px; margin:0 auto; background: url(images/club_coiffure-logo.png) center center no-repeat; background-size: contain; }

.coiffure-header {width:100%; height:700px; background: url(images/club_coiffure-header_foto.jpg)center center no-repeat; background-size: cover;}
.content-container-text {width:auto; display:block; background:#fff; padding:80px 150px;}
.text-spacer {width:100%; clear:both; height:80px;}
.showcase-container {display: block; background:#fff;}
ul.showcase {width:100%; display: block; background:#fff; overflow:auto;}
ul.showcase > li {width:50%; height:480px; float:left; background: center center no-repeat; background-size:cover;}
ul.showcase > li.full {width:100%; height:700px; float:left;}

/* ========================================================================= 
////	FOOTER
=========================================================================== */
.footer {margin:0 auto; padding:80px 0 0 0; height:auto; background:#9499a1; width:100%; position:relative;}
.footer-logo-container {position:absolute; top:-85px; left:0; width:100%; height:165px; display: block;}
.footer-logo {margin:0 auto; width:165px; height:165px; display: block; background:url(images/Ovenvers-logo-s.png);}
.footer-content-container {width:auto; color:#fff; padding:40px 150px;}
.footer-content-container > h1 {color:#fff;}
.footer-content-container > p {color:#fff;}

.footer-copyright {width:100%;  padding:80px 0 20px 0; height:auto; background:#333;}
ul.firms {width:100%; display: flex; clear:both;}
ul.firms > li {width:28%; display: inline-block; padding: 0 2.5%; border-left:1px solid #fff; float:left;}
ul.firms > li > p {color:#fff; font-size:14px; line-height:20px;}
ul.firms > li:last-of-type {border-right:1px solid #fff;}
.naw {color:#fff; text-align: center; margin:80px auto 0; line-height: 26px;}
.copyright {color:#fff; text-align: center; font-size:14px; margin:40px auto; line-height: 26px;}

/* ========================================================================= 
////	FORM
=========================================================================== */
form {padding:80px 0;}
input[type="text"], input[type="email"] {width: 100%; padding: 20px 20px; margin: 10px 0; box-sizing: border-box; border:none; text-align: left; 
	color:#000; font-family: 'Exo 2'; font-size:18px; font-weight:500; border-radius: 20px; outline: none;}
::-webkit-input-placeholder {color: #555;}
::-moz-placeholder {color: #555;}
:-ms-input-placeholder {color: #555;}
:-moz-placeholder {color: #555;}
input[type="text"]:focus::-webkit-input-placeholder, input[type="email"]:focus::-webkit-input-placeholder {color: #ddd;}
input[type="text"]:focus::-moz-placeholder, input[type="email"]:focus::-moz-placeholder {color: #ddd;}
input[type="text"]:focus:-ms-input-placeholder, input[type="email"]:focus:-ms-input-placeholder {color: #ddd;}
input[type="text"]:focus:-moz-placeholder, input[type="email"]:focus:-moz-placeholder {color: #ddd;}
.button {background-color:#000; border:none; color:#fff; padding:20px 60px; text-align:center; text-decoration:none; display:inline-block;
	font-size:18px; font-weight:800; margin:40px 0px; cursor:pointer; border-radius:20px;}

.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {border:none; background-color:#ff0000; color:#fff; text-align:center; font-family:Georgia, Times, Serif; font-size: 14px; font-weight: 700; letter-spacing:-0.03em; margin: 10px 0;}
span.wpcf7-not-valid-tip {color: #f00; font-size: 1em; text-align: center; display: block; width: 100%; margin-top:-15px; display:none;}
input.wpcf7-not-valid {border:1px solid #ff0000; background:#ffeeee; -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1); -moz-box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1); box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 1);}
div.wpcf7-mail-sent-ok {background-color: #398F14; color:#fff; padding:15px;}
#wpcf7-f1555-p1551-o1 > form.wpcf7-form > p > input.wpcf7-submit {top:-10px;}
input.wpcf7-submit {background-color:#000; border:none; color:#fff; padding:20px 60px; text-align:center; text-decoration:none; display:inline-block;
	font-size:18px; font-weight:800; margin:40px 0px; cursor:pointer; border-radius:20px;}
.wpcf7-response-output {background:#555; border: none!important; text-align: center; padding:20px 40px!important; margin:0 0 40px 0!important;}
/* ========================================================================= 
//////	RESPONSIVE > 1280
=========================================================================== */
@media only screen and (max-width: 1200px) {
	.content-container {width:95%;}
	.content-container-text {width:auto; display:block; padding:80px 10%;}
	
}

/* ========================================================================= 
//////	RESPONSIVE > 1024
=========================================================================== */
@media only screen and (max-width: 980px) {
	.content-container {width:95%;}
	
}

/* ========================================================================= 
//////	RESPONSIVE > 800
=========================================================================== */
@media only screen and (max-width: 790px) {
	ul.showcase > li {height:350px;}
	.footer-content-container {padding:40px 10%;}
	.coiffure-header {height:400px;}
	ul.firms {width:100%; display: block; clear:both;}
	ul.firms > li {width:99%; border:none; margin:0 auto; text-align: center; padding:0;}
	ul.firms > li:last-of-type {border-right:0;}
	ul.showcase > li.full {height:400px!important;}
	
	.coiffure-logo-container {width:100%; height:142px; position: absolute; top:79; left:0;}
	.coiffure-logo {display:block; height:142px; width:142px; margin:0 auto; background: url(images/club_coiffure-logo.png) center center no-repeat; background-size: contain; }
}

 /* ========================================================================= 
//////	RESPONSIVE > 640
=========================================================================== */
 @media screen and (max-width: 640px) {
	 input.wpcf7-submit {padding:20px;}
	 
	h1 {font-size: 38px;}
}
/* ========================================================================= 
//////	RESPONSIVE > 480
=========================================================================== */
 @media screen and (max-width: 450px) {

	ul.showcase > li {height:200px!important;}
	ul.showcase > li.full {height:300px!important;}
	 h1 {font-size:32px;}
}