@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaylight';
    src: url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'great_vibesregular';
    src: url('../fonts/greatvibes-regular-webfont.woff2') format('woff2'),
         url('../fonts/greatvibes-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html{ width: 100%; height: 100%;}
body{ width: 100%; height: 100%; margin:0; font-family: 'ralewayregular'; font-size: 15px; line-height: 20px; text-align: justify; color: #5d5d5d; position: relative;}
header, section, footer, article, aside{ display:block;}
a{ color: inherit; text-decoration: none;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}

.blackWindow{ width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); z-index:3000; display:none;}
.blackWindow .espace{ height:50%}
.blackWindow .loading{width: 40px; margin: auto; position: relative; z-index: 3600;}
.blackWindow .loading .loader{width: 40px; height: 40px; line-height: 40px; text-align: center; margin: auto; position: absolute; top: -20px; color: #FFF; font-size: 25px;}
.blackWindow .loading img{ display: block; position: absolute; top: -15px;}
.blackWindow .imgBlock{ margin:auto; position:relative; border:solid #FFF 3px; background: #FFF; width: 0; height: 0;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.blackWindow .imgBlock .nav{ width: 100%; height: 30px; position: absolute; left: 0;z-index: 3500; display: none;}
.blackWindow .imgBlock:hover > .nav{ display:block;}
.blackWindow .imgBlock .nav div{ width: 30px; height: 30px; line-height: 30px; background: #000; text-align: center; font-size: 25px; color: #FFF; cursor: pointer; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
.blackWindow .imgBlock .nav .next{ float: right;}
.blackWindow .imgBlock .nav .previous{float: left;}
.blackWindow .close{ width: 25px; height: 25px; line-height: 25px; text-align: center; background: #000; cursor:pointer; position:absolute; top:-15px; right:-15px; color: #FFF; font-size: 20px; border: solid 2px #FFF; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
body >.blackWindow {position:fixed}

h1, h2, h3, h4, h5{ font-weight: normal; font-family: 'great_vibesregular';}


.wrapper{ width: 100%; max-width: 1280px; margin: auto; position: relative;}

header{ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 0; z-index: 20;}
header .logoPhone{ display: none;}
header .navIcon{ display: block; float: left; margin: 30px; color: #FFF; height: 40px; line-height: 40px; text-transform: uppercase; font-size: 30px; font-family: 'ralewaylight';}
header .navIcon .icon{ float: left; width: 40px; height: 40px; line-height: 40px; background: rgba(0,0,0,0.5); text-align: center; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; margin-right: 8px; font-size: 28px; }
header .social{ padding: 30px; float: right;}
header .social ul{ list-style-type: none; margin: 0; padding: 0;}
header .social ul li{ display: inline-block;}
header .social ul li+li{ margin-left: 10px;}
header .social ul li a{ display: block; width: 40px; height: 40px; line-height: 40px; background: rgba(185,140,54,0.3); color: #FFF; font-size: 21px; text-align: center; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px;}
header .social a.facebook:hover{ background: rgba(59, 89, 152,0.8); color: #FFF;}
header .social a.youtube:hover{ background: rgba(187, 0, 0,0.8); color: #FFF;}
header .logo{ display: block; width: 100%; position: absolute; top: 0; left: 0; text-align: center; padding: 20px 0;}
header .logo a{ display: inline-block;}
header .logo img{ width: 200px; display: block; margin: auto;}

.page-menu{ width: 360px; height: 100%; position: fixed; overflow: hidden; z-index: 30; left: -360px;}
.nav-bar{ width: 100%; height: 100%; background: url(../img/arabesk-nav.png) left repeat-y, rgba(54,38,34,0.9); position: relative;}
.nav-bar .close{ display: block; color: #FFF; font-size: 25px; position: absolute; top: 10px; right: 10px;}
.nav-bar .logo{ text-align: center; padding: 30px 0;}
.nav-bar nav{ color: #FFF; font-size: 17px; margin: 50px 30px 0 30px;}
.nav-bar nav ul{ list-style-type: none; margin: 0; padding: 0;}
.nav-bar nav ul li+li{ margin-top: 10px;}
.nav-bar nav .subMenu{ padding-left: 30px; font-size: 15px; margin-top: 5px;}
.nav-bar nav .subMenu li+li{ margin-top: 5px;}
.nav-bar nav .subMenu li a:before{content: ""; font-family: 'FontAwesome'; margin-right: 5px;}

.nav-bar .footer{ width: 100%; position: absolute; bottom: 0;}
.nav-bar .social{ width: 100%; list-style-type: none; margin: 0; padding:0; text-align: center; color: #FFF; font-size: 15px;}
.nav-bar .social a{ font-size: 17px;}
.nav-bar .social li{ display: inline-block;}
.nav-bar .social li+li{ margin-left: 10px;}
.nav-bar .lineSep{ width: 150px; margin: 20px auto; border-bottom: solid 1px #FFF;}
.nav-bar .copyright{ color: #FFF; font-size: 12px; text-align: center; padding: 0 0 20px 0;}

/*logo*/
.logoBlock{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
.logoBlock .halfSpace{ height: 50%;}
.logoBlock .logo{ width: 100%; text-align: center;}
.logoBlock .logo a{ display: inline-block; position: relative; bottom: 158px;}

.pageHeader{ width: 100%; height: 100%; overflow: hidden; display: table; margin-bottom: 50px; background-size: cover;}
.pageHeader .logo{ margin-bottom: 100px;}
.pageHeader .content{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; position: relative;}
.pageHeader h1{ margin: auto; color: #FFF; font-family: 'great_vibesregular'; font-size: 50px; text-shadow:0 0 2px #000;}
/*end of logo*/


h1{text-align: center; font-size: 50px; color: #b98c36; margin: 60px 0 40px 0; line-height: 50px;}

/*home*/
.bannerBlock{ width: 100%; height: 100%; margin: auto; position: relative;}
.bannerItems{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.bannerItems .item{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.bannerItems .item img{ display: block; width: 100%; height: 100%; object-fit:cover;}
.bannerItems .item+.item{ display: none;}
.bannerBlock .overlay{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(46,32,29,0.5);}
/*end of home*/


.accessButton{ color: #FFF; font-size: 50px; width: 100%; text-align: center; position: absolute; bottom: 0; padding: 10px 0; z-index: 15; text-shadow:0 0 2px #000;}


/*about_us*/
.about_us p{ margin: 0;}
.about_us p+p{ margin-top: 15px;}

.about_us .parallax{ width: 100%; height: 300px; position: relative; background: url(../img/parallax1.jpg) no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; margin: 30px 0;}
.about_us .parallax .parallax_content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: table; vertical-align: middle; text-align: center;}
.about_us .parallax .title{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; color: #FFF; font-size: 55px; line-height: 55px; font-family: 'great_vibesregular';}
.parallax .overlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5)}
/*end of about_us*/

/*services*/
.services .features{ margin-top: 80px;}
.services .features .featureItem{ padding-top: 80px;}
.services .parallax{ width: 100%; height: 300px; position: relative; background: url(../img/parallax2.jpg) no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; margin: 30px 0;}
.services .parallax .parallax_content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: table; vertical-align: middle; text-align: center;}
.services .parallax .title{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; color: #FFF; font-size: 55px; line-height: 55px; font-family: 'great_vibesregular';}
/*end of services*/


/*features*/
.features .featureItem{ width: 100%; border: solid #d2d2d2 1px; padding-bottom:50px; position: relative; background: url(../img/arabesk-features.png) bottom repeat-x; }
.features .icon{ width: 150px; height: 150px; background: #362622; margin: auto; position: absolute; left: 0; right: 0; top: -75px; text-align: center;
 -webkit-border-radius: 150px; -moz-border-radius: 150px; -ms-border-radius: 150px; -o-border-radius: 150px; border-radius: 150px;
}
.features .icon img{ display: block; padding-top: 30px; margin: auto;}
.features .img img{ display: block; width: 100%;}
.features .content{ padding: 20px; text-align: center; }
.features h2{ font-size: 30px; color: #362622; margin: 10px 0 13px 0}
.features .border{ width: 120px; margin: auto; border-bottom: solid 2px #b98c36;}
.features .readmore{ display: block; width: 120px; height: 30px; line-height: 30px; position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; text-align: center; background: #b98c36; color: #FFF; text-transform: uppercase; border: solid 1px #b98c36;}
.features .readmore:hover{ background: #FFF; color: #b98c36}
/*end of features*/



/*catalogue*/
.catalogue_bg{ background: url(../img/catalogue-bg.jpg) no-repeat fixed center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
.products .features .featureItem{height: 400px;}

.produit_bg{ width: 100%; height: 100%; margin: auto; position: relative; margin-bottom: 50px;}
.produit_bg .img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.produit_bg .img img{ display: block; width: 100%; height: 100%; -webkit-object-fit:cover; -moz-object-fit:cover; -o-object-fit:cover; -ms-object-fit:cover; object-fit:cover;}
.spa article .img{ width: 190px; float: left; border: solid 1px #d2d2d2; box-sizing:border-box;}
.spa article .img img{ width: 100%;}
.spa article .details{ margin-left: 210px;}
/*End of catalogue*/


/*spa*/
.spa_bg{ background: url(../img/spa-bg.jpg) no-repeat fixed center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}

.spa{ margin-bottom: 40px;}
.spa article{ padding: 0 50px;}
.spa article+article{ margin-top: 50px;}
.spa h2{ font-size: 30px; color: #362622; margin: 0 0 20px 0; line-height: 35px;}
.spa h2 .border{ display: block; width: 120px; border-bottom: solid 2px #b98c36; margin-top: 10px;}
/*End of spa*/

/*galerie*/
.galerie .one_fourth{ box-sizing:border-box;}
.galerie .galerieItem{ display: block; width: 100%; height: auto; background: #FFF; position: relative;}
.galerie .galerieItem img{ display: block; width: 100%;}
.galerie .galerieItem .border{ width: 100%; height: 100%; box-sizing:border-box; border: solid 5px rgba(255,255,255,0.3); position: absolute; top: 0; left: 0;}
.galerie .galerieItem .tranparentHover{ width: 0px; height: 0px; position: absolute; top: 80px; left: 120px; background: rgba(46,32,29,0.5); text-align: center; overflow: hidden; 
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
.galerie .galerieItem .tranparentHover .espace{ height: 50%;}
.galerie .galerieItem .tranparentHover i{ font-size: 50px; color: #FFF; position: relative; bottom: 20px;}
.galerie .galerieItem:hover .tranparentHover{ width: 100%; height: 100%; top: 0; left: 0;}
/*end of galerie*/


/*errorPage*/
.errorPage{ background: url(../img/banner01.jpg) no-repeat fixed center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; margin-bottom: 0;}
.errorPage .content{ color: #FFF; text-shadow: 0 0 5px #000;}
.errorPage .content h1{ font-family: 'ralewayregular'; font-size: 60px; margin: 0;}
.errorPage .content h2{ font-family: 'ralewayregular'; font-size: 70px; margin: 0 0 30px 0; line-height: 70px;}
/*End of errorPage*/



/*contact*/
.contact_bg{ background: url(../img/contact-bg.jpg) no-repeat fixed center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
.contact{ margin-bottom: 40px;}
.contact .map{ width: 100%; height: 400px; margin-bottom: 30px;}
.contact .map #map{ width: 100%; height: 100%;}
.contact h2{ font-family: 'ralewayregular'; text-transform: uppercase; color: #362622; font-size: 21px; margin: 0 0 20px 0;}
.contact h3{ font-family: 'ralewayregular'; font-size: 19px; margin: 0 0 10px 0; color: #b98c36;}
.contact input{ border:solid #dfdfdf 1px; width:100%; padding:10px 15px; box-sizing: border-box;}
.contact textarea{border:solid #dfdfdf 1px; width:100%; padding:10px 15px; height:100px; box-sizing: border-box; margin-top: 20px;}
.contact input[type="submit"]{background:#b98c36; color:#FFFFFF;  border:none; margin:10px 0; padding:5px 15px; font-size:12px; width: auto; float: right;}
/*End of contact*/




.msg_ok{ font-weight:bold; color:#72a132; margin-bottom: 10px;}
.msg_ok i{ font-size: 25px;}
.msg_ko{ font-weight:bold; color:red; margin-bottom: 10px;}
.msg_ko i{ font-size: 25px;}

.requiredField{ background:#dd7171; color:#7d0000;}
.requiredFieldTxt{ color:#cf0000; font-size: 11px; font-weight: bold; display: none;}

.imgCenter{ display: block; margin: auto;}
.imgLeft{ display: block; float: left; margin: 0 20px 20px 0}
.imgFull{ display: block; width: 100%;}

.one_half{ width: 50%; float: left; box-sizing:border-box;}
.one_third{ width: 33.33%; float: left; box-sizing:border-box;}
.one_fourth{ width: 25%; float: left; box-sizing:border-box;}
.two_third{ width: 66.66%; float: left; box-sizing:border-box;}


.padding5{ padding: 5px;}
.padding10{ padding: 10px;}
.padding20{ padding: 20px;}
.clear{ clear: both;}


footer{  height: 50px; line-height: 50px; padding: 0 20px; background: #2e201d; color: #fefefe; font-size: 12px;}
footer .copyright{ float: left;}
footer .atlascript{ float: right;}