/*
CSS Structure
CSS Grid by cssgrid.co & Marc Strainchamps
-------------------------------------------------------------

*/


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:text-bottom;
}
body {
	width:100%;
	margin:0 auto;
	font-family:'poppinslight', Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#000000;
	background-color:#fff;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
	margin:0 auto;
	overflow-x:hidden;
}
@font-face {
    font-family: 'poppinslight';
    src: url('../fonts/poppins-light-webfont.woff2') format('woff2'),
         url('../fonts/poppins-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinssemibold';
    src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ManhattanCoiffure';
    src: url('../fonts/Manhattan_Font_2019.woff') format('woff'),
         url('../fonts/Manhattan_Font_2019.otf') format('truetype');        
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ManhattanCoiffure_Logo';
    src: url('../fonts/MC_VersionMenu.woff') format('woff'),
         url('../fonts/MC_VersionMenu.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;
}
.header-static,
.header-fixed,
.header-sticky,
.header-reveal {
	position:absolute;
	width:auto;
	left:0;
	right:0;
	background-color:#fff;
	margin:0 auto;
	padding:10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cdcfd1;
	line-height:40px;
	z-index:2;
}
.header-fixed {
	position:fixed;
}
.header-sticky {
	position:-webkit-sticky;
	position:-moz-sticky;
	position:-o-sticky;
	position:-ms-sticky;
	position:sticky;
	top:0;
}
.header-reveal {
	top:0;
	position:fixed;
}
.nav-down {
	top:-62px;
}
.nav-up {
	top:0;
}
.logo {
	text-align:right;
	color:black;
	font-size:60px;
	padding-left:20px;
	padding-right:10px;
	padding-top:20px;
	line-height:62px;
	font-family:'ManhattanCoiffure_Logo', Arial, Helvetica, sans-serif;
	font-weight:normal;
	z-index:3;
	position:relative;
}
.logo span {
	color:#f1844d;
	font-weight:normal;
	vertical-align:baseline;
}
.logo a {
	display:block;
	width:100%;
	height:100%;
}
.footer .logo {
	padding-left:0;
}
.nav-right .logo {
	float:left;
}
.nav-left .logo {
	float:right;
}
.nav-center .logo {
	margin:0 auto;
	text-align:center;
	float:none;
}
.nav-center + .wrapper {
	padding-top:90px;
}
.nav-right .nav {
	padding-right:50px;
	padding-top:15px;
	float:right;
}
.nav-left .nav {
	float:left;
}
.nav-center .nav {
	float:none;
	margin:0 auto;
	text-align:center;
	display:block;
}
.nav {
	z-index:2;
	display:inline-block;
}
ul.nav-buttons {
	list-style:none;
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	
}
ul.nav-buttons li {
	text-align:left;
	display:inline-block;
}
ul.nav-buttons li a {
	color:black;
	font-size:18px;
	display:inline-block;
	text-decoration:none;
	line-height:40px;
	padding-left:10px;
	padding-right:10px;
}
ul.nav-buttons li:hover a {
	background-color: rgba(0,0,0,0);
	color:red;
}
ul.nav-buttons li ul {
	position:absolute;
	width:160px;
	opacity:0.5;
	display:none;
}
ul.nav-buttons li:hover ul {
	opacity:1;
	display:block;
}
ul.nav-buttons li ul li {
	display:block;
	background-color: rgba(0,0,0,0.1);
}
ul.nav-buttons li ul li a {
	display:block;
	background-color:#f2f3f3;
}
ul.nav-buttons li ul li a:hover,
ul.nav-buttons li ul li.current a {
	display:block;
	background-color:#fbfbfb;
}
.wrapper, a, a img, .header-reveal, .nav, .nav-off, .line-nav-1, .line-nav-2, .line-nav-3, .line-nav-4, .logo {
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}
a {
	text-decoration:none;
	outline:0px;
	color:#74797e;
}
strong {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	Color:red;
	font-size:40px;
	vertical-align:baseline;
	
}
img,
img a {
	font-size:14px;
	color:#999;
	border:0;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
}
.blank {
	display:block;
	height:20px;
}
.blank-middle {
	display:block;
	height:40px;
}
.blank-high {
	display:block;
	height:50px;
}
.hr-black1 {
		width:100%; 
		height:1px; 
		background-color:black; 
		border:none;
}
.hr-black1-reduced {
		width:50%; 
		height:1px; 
		background-color:black; 
		border:none;
}
.big { 
	display:block;
	width:500px;
	height:300px;  
	margin-left:auto;
	margin-right:auto;
}
.barber-shop { 
	display:block;
	width:500px;
	height:377px;  
	margin-left:auto;
	margin-right:auto;
}
.equipe {
	display:block;
	width:800px;
	height:438px;  
	margin-left:auto;
	margin-right:auto;
}
.hairdreams {
	display:block;
	width:800px;
	height:533px;  
	margin-left:auto;
	margin-right:auto;
}

.follow-us { 
	display:block;
	width:100px;
	height:100px;  
	margin-left:auto;
	margin-right:auto;
}
.follow-us:hover {
	-o-transform: translateY(-10px);
	-ms-transform: translateY(-10px); 
	-moz-transform: translateY(-10px); 
	-webkit-transform: translateY(-10px); 
	transform: translateY(-10px);
	transition: all 0.2s ease-in-out;
}


#header_image {
	background-color:#fff;
	min-height:520px;
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: auto;
}
.wrapper {
	padding-top:135px;
	width:100%;
	height:auto;
	position:relative;
	z-index:1;
}
.wrapper-padding {
	padding-top:60px;
	padding-left:0px;
	padding-right:0px;
}
.max-width {
	max-width:1920px;
	margin:0 auto;
}
.welcome {
	padding-bottom:40px;
}
h1 {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:right;
	font-size:20px;
	padding-top:10px;
	padding-bottom:0px;
	line-height:20px;
	color:black;
}
h2 {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:right;
	font-size:20px;
	padding-top:10px;
	padding-bottom:0px;
	line-height:30px;
	color:black;
}
h3 {
	font-family:'ManhattanCoiffure', Arial, Helvetica, sans-serif;
	font-weight:normal;
	Color:black;
	text-align:center;
	font-size:50px;
}
h4 {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:center;
	font-size:18px;
}
h5 {
	font-family:'poppinslight', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	font-size:18px;
	line-height:30px;
	color:black;
}
.footer {
	font-size:14px;
	line-height:22px;
	background-color:#f2f3f3;
	padding-top:40px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:40px;
}
.padding_top-50 {
	padding-top:50px;
}

.modul-title {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:center;
	font-size:25px;
	color:black;
}
.modul-title strong {
	font-size:25px;
	Color:red;
	vertical-align:baseline;
}
.exclamation strong {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	Color:red;
	font-size:75px;
	text-align:left;
	vertical-align:baseline;
}
.modul-content {
	font-size:18px;
	color:#666b6e;
	line-height:28px;
}
.modul-content strong {
	font-size:28px;
	color:grey;
	vertical-align:baseline;
}
.tag-line {
	font-size:40px;
	color:#666b6e;
	line-height:60px;
}
.tag-line strong {
	color:red;
	vertical-align:baseline;
}
.reduced-width {
	width:70%; 
	margin:0 auto;
}
.container {
	clear: both;
	margin: 0 auto; 
	max-width: 1485px;
	width:80%;
	position: relative;
}

.center{text-align:center;}

.content{padding-top: 15px; padding-bottom:15px;}

.width50{
	width:50%; 
	margin:0 auto;
}
.bg {
		background-color: #f2f2f2;
}

.p1 .one .header-content{margin-top:15px; margin-bottom:15px;}
.header-content.with-border:before, 
	.header-content.with-border:after {
		width:15px; 
		height:200px; 
		background: none; 
		content:""; 
		position:absolute;		
}

.header-content.with-border:before{top:10px; left:21%; border-top: 3px solid red; border-left: 3px solid red;}
.header-content.with-border:after{bottom:5px; right:21%; border-bottom: 3px solid red; border-right: 3px solid red;}

footer.upper-footer{display:block}

#global-footer{font-family:"Gibson W04","Helvetica","Open Sans",sans-serif;background-color:black}

.f-links{position:relative;width:calc(100% - 40px);max-width:1000px;margin:0 auto 25px auto;padding-top:53px}
.f-links:after{content:'';display:table;clear:both}

.f-links .f-header,.f-links a{font-family:"Gibson W04","Helvetica","Open Sans",sans-serif;margin:0;padding:0;font-size:12px;line-height:24px;font-weight:400;text-decoration:none;text-align:left;}
.f-links .f-header{font-weight:600;color:white}

.f-links a{color:white}
.f-links a:hover{text-decoration:underline;color:white}
.f-links ul{margin:0;padding:0;list-style:none}
.f-links img{float:right;margin-left:15px}

.f-links .f-column{float:left;width:28.5%}
.f-links .f-column:nth-child(4){width:14.5%}

.lower-footer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:calc(100% - 40px);max-width:1000px;margin:0 auto;padding:27px 0 63px;border-top:1px solid white}

.lower-footer .left-box-address{box-sizing:border-box;width:57%;padding-right:10px}
.lower-footer .left-box-address p{font-size:11px;line-height:16px;color:white}

.lower-footer .left-box-address p a{font-weight:400;color:white;text-decoration:underline}

.lower-footer .middle-box{box-sizing:border-box;width:calc(43% - 50px);padding-right:10px}
.lower-footer .middle-box p{font-size:12px;line-height:normal;color:white;white-space:nowrap}

.lower-footer .middle-box .socials{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:10px}
.lower-footer .middle-box .socials .social-item{margin-left:10px}


.lower-footer .right-box-logo{width:50px}
.lower-footer .right-box-logo img{display:block}


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

.container {
	width:90%;
}
.modul-content {
	font-size:18px;
	color:#666b6e;
	line-height:20px;
}
.modul-content strong {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:grey;
	font-size:18px;
}
.width50{
	width:70%; 
	margin:0 auto;
}
.header-content.with-border:before, 
	.header-content.with-border:after {
		width:15px; 
		height:170px; 
		background: none; 
		content:""; 
		position:absolute;		
}
.header-content.with-border:before{top:10px; left:10%; border-top: 3px solid red; border-left: 3px solid red;}
.header-content.with-border:after{bottom:5px; right:10%; border-bottom: 3px solid red; border-right: 3px solid red;}

.big { 
	display:block;
	width:400px;
	height:240px;  
	margin-left:auto;
	margin-right:auto;
}
.men-model-sp-pronails { 
	display:block;
	width:400px;
	height:148px;  
	margin-left:auto;
	margin-right:auto;
}
.barber-shop	{ 
	display:block;
	width:400px;
	height:302px;  
	margin-left:auto;
	margin-right:auto;
}
.equipe {
	display:block;
	width:600px;
	height:329px;  
	margin-left:auto;
	margin-right:auto;
}

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

.header-sticky ul.nav-buttons {
	margin-top:0;
}
.wrapper {
	padding-top:50px;
	opacity:1;
}
.wrapper-push {
	opacity:0.2;
}
.blank {
	display:block;
	height:0px;
}
.blank-middle {
	display:block;
	height:1px;
}
.blank-high {
	display:block;
	height:12px;
}	

.logo {
	text-align:right;
	color:black;
	font-size:30px;
	padding-left:20px;
	padding-right:10px;
	padding-top:10px;
	line-height:32px;
	font-family:'ManhattanCoiffure_Logo', Arial, Helvetica, sans-serif;
	font-weight:normal;
	z-index:3;
	position:relative;
}
h1 {
	font-size:12px;
}

.container {
	width:90%;
}
.modul-content {
	font-size:14px;
	color:#666b6e;
	line-height:20px;
}
.modul-content strong {
	font-family:'poppinssemibold', Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:grey;
	font-size:18px;
}
.width50{
	width:90%; 
	margin:0 auto;
}
.header-content.with-border:before, 
	.header-content.with-border:after {
		width:15px; 
		height:150px; 
		background: none; 
		content:""; 
		position:absolute;		
}
.header-content.with-border:before{top:10px; left:0%; border-top: 3px solid red; border-left: 3px solid red;}
.header-content.with-border:after{bottom:5px; right:0%; border-bottom: 3px solid red; border-right: 3px solid red;}

.tag-line {
	font-size:20px;
	color:#666b6e;
	line-height:30px;
}
.tag-line strong {
	font-size:20px;
	color:red;
}

h3 {
	font-size:16px;

}

.big { 
	display:block;
	width:300px;
	height:180px;  
	margin-left:auto;
	margin-right:auto;
}
.barber-shop { 
	display:block;
	width:300px;
	height:226px;  
	margin-left:auto;
	margin-right:auto;
}
.equipe {
	display:block;
	width:350px;
	height:192px;  
	margin-left:auto;
	margin-right:auto;
}
.f-links{display:none}
.right-box-logo{display:none}

.lower-footer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:calc(100% - 40px);max-width:1000px;margin:0 auto;padding:27px 0 27px;border-top:1px solid black}

.lower-footer .middle-box{box-sizing:border-box;width:calc(100% - 10px);padding-right:10px;margin-left:auto;margin-right:auto}
.lower-footer .left-box-address{box-sizing:border-box;width:57%;padding-right:20px}

.navclosed {
	color:transparent;
	display:block;
	width:60px;
	height:60px;
	position:absolute;
	top:15px;
	z-index:5;
	cursor:pointer;
}
.navclosed a {
	color:transparent;
	display:block;
	width:100%;
	height:100%;
}
.nav-right .navclosed,
.nav-center .navclosed {
	right:6px;
}
.nav-left .navclosed {
	left:6px;
}
.nav-right .close-side,
.nav-left .close-side,
.nav-center .close-side {
	position:fixed;
	top:0;
	bottom:0;
	left:100%;
	right:0;
	z-index:3;
}
.nav-left .close-side-on {
	left:320px;
}
.nav-right .close-side-on,
.nav-center .close-side-on {
	left:0;
	right:320px;
}
.line-nav-1,
.line-nav-2,
.line-nav-3,
.line-nav-4 {
	width:32px;
	height:4px;
	position:absolute;
	background-color:#000000;
}
.line-nav-1 {
	top:20px;
	left:14px;
}
.line-nav-4 {
	top:38px;
	left:14px;
}
.line-nav-2,
.line-nav-3 {
	top:29px;
	left:14px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
.line-nav-2-open {
	background-color:red;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.line-nav-3-open {
	background-color:red;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.line-nav-1-open,
.line-nav-4-open {
	opacity:0;
}
.nav-off {
	top:0;
	bottom:0;
	left:auto;
	right:auto;
	position:fixed;
	opacity:0;
	background-color:#f2f3f3;
}
.nav-on {
	top:50px;
	bottom:50px;
	left:auto;
	right:auto;
	position:fixed;
	opacity:1;
	background-color:#f2f3f3;
}
.nav {
	position:absolute;
	width:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.nav-right .nav-off,
.nav-center .nav-off {
	right:-310px;
	width:280px;
}
.nav-right .nav-on,
.nav-center .nav-on {
	right:0;
	width:280px;
}
.nav-left .nav-off {
	left:-320px;
	width:280px;
}
.nav-left .nav-on {
	left:0;
	width:280px;
}
.nav-center + .wrapper {
	padding-top:60px;
}
ul.nav-buttons {
	padding:20px;
	margin-top:60px;
	overflow-x:hidden;
	overflow-y:auto;
}
ul.nav-buttons li {
	display:block;
}
ul.nav-buttons li a {
	display:block;
	text-decoration:none;
	line-height:40px;
}
ul.nav-buttons li ul {
	position:relative;
	width:auto;
	opacity:1;
	display:block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cdcfd1;
}

}