@import url('https://fonts.googleapis.com/css?family=Quicksand');

*{margin: 0;padding: 0;box-sizing: border-box}
body{font-family: 'Quicksand', sans-serif}

header{z-index: 8000;position: relative}
.head{padding: 6px 40px 0;font-size: 0.8em;color: #fff;border-bottom: 3px solid rgba(255,255,255,0.1)}
.head ul{display: flex;justify-content: flex-start;}
.head li{margin-right: 10px}
.head ul .ico{transform: scale(0.7);margin-right: -5px}
.head .sc .icon{transform: scale(0.5);margin-right: -8px}
.head .sc{margin-top: -7px}

header .c{padding-top:16px;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center}
header .logo{height:90px}
header .c p{max-width: 340px;font-size: 0.8em;color: #eee;margin-left: 20px;}
header .c p span:not(.ico){font-weight: bold;font-size:1.2em;color:#fff;display: block;margin-bottom: 10px;}
header .c p .ico{margin-right: 0}

header nav{width: 100%;box-shadow: 0 0 2px rgba(0,0,0,0.2);margin-bottom: -35px;}
header nav ul{display: flex;justify-content: flex-start;align-items: center}
header nav ul li{position: relative}
header nav ul li a{padding: 18px 18px;display: block;font-weight:bold;transition: 0.1s ease}
header nav ul li a:hover{background: rgba(0,0,0,0.08)}
header nav li:hover ul{display: block}
header nav li ul{display:none;position: absolute;z-index: 8888;height: auto;min-width: 200px;box-shadow: 0 0 5px rgba(0,0,0,0.3)}

.flex{display: flex;justify-content: space-between}
.c{margin: 0 auto;width:1200px}

.caroussel{height: 600px;overflow: hidden;z-index: 7000;position: relative}
.caroussel .slider{transition: 0.4s ease;display: flex}
.caroussel .child{position:relative;display: flex;justify-content:center;flex-wrap: wrap}
.caroussel .child img{position:absolute;width:100%;height:100%;object-fit: cover}
.caroussel .child div{position:relative;margin: 100px auto;width: 70%;z-index: 8000;color: #fff;}
.caroussel .child span{font-size: 3.8em;font-weight:bold;text-shadow: 0 0 3px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.2);margin-bottom: 20px;display: block}
.caroussel .child p{display:block;z-index: 8000;font-size: 1.2em;font-weight:bold;text-shadow: 0 0 3px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.2)}
.caroussel .child a{display: inline-block;padding: 20px 30px;position: relative;top: 30px;}

.caroussel .btn{position: absolute;top: 41%;padding: 30px 15px;cursor: pointer;font-size: 1.3em;transition: 0.1s ease}
.caroussel span.btn:hover{transform: scaleY(1.2)}
.caroussel .btn#nx{right: 0}

.btn:hover{box-shadow: 0 0 3px rgba(0,0,0,0.1)}

.c1{background: #2C3E50;padding: 50px;color: #fff}
.c1 .c, .c2, .c3, .c3 div{display: flex;justify-content: space-around;text-align: center;align-items: center}

.c2{text-align: left}
.c2 .left, .c2 img{width: 48%}
.c2 .left{padding: 30px;}
.c2 h1{margin-bottom: 20px;font-size: 2.8em}
.c2 p{margin-bottom: 20px;color: #666;}
.c2 a{padding: 8px 10px;}

.c3,.c5{padding: 100px 0;margin-bottom:50px;background: #ecf0f1}
.c3 p span{font-size: 1.3em;font-weight: bold}

.c5{padding: 100px 20px}
.c5 .sld{overflow: hidden}
.c5 #slide{display: flex;transition: 1s ease}
.c5 #slide div{width:300px;height: 150px;display: flex;justify-content: center;align-items: center;padding: 0 20px;}
.c5 img{max-width:100%;max-height: 100%;}

.c6{padding-bottom: 60px;}
.c6 h3{font-size: 2.8em}
.c6 .news{margin-top: 60px;display: flex;justify-content: flex-start}
.c6 .article{border: none;background-color: #ecf0f1;margin-right: 40px;}
.c6 .article .t{color: #000}

.c4 h2{font-size: 2.8em;}
.articles{padding: 60px 0}
.article{background: #fff;border:1px solid #faaf47;margin-bottom: 30px;border-radius: 6px}
.article:hover{background:#ecf0f1}
.article div{padding: 10px;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center}
.article img{width: 100%;height: 250px;object-fit: cover;//border-bottom: 1px solid #faaf47;border-radius: 4px 4px 0 0}
.article .t{display: block;font-size: 1.4em;margin-bottom: 10px;}
.article .cat, .article .time{font-size: 0.9em;color: #666;width: 50%;display: block;margin-bottom: 10px;}
.article .cat{text-align: right}
.price{font-size: 1.4em;color: #faaf47;font-weight: bold}
.price.no{font-size: 0.9em;color: red;text-decoration: line-through}

.categorie{}
.c-infos{position: relative;height: 260px;overflow: hidden}
.c-infos img{position: absolute;width: 100%;height: 100%;object-fit: cover}
.c-infos h1{padding:50px;position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.2);display: flex;justify-content: center;align-items: center;color: #fff;font-size: 3em;text-shadow: 0 0 3px rgba(0,0,0,0.4)}
.categorie .c{margin-top: 60px;}

.single .first-cont{display: flex;justify-content: space-between}
.single .first-cont{padding-top: 60px;margin-bottom: 40px}
.single .photos{width: 49%}
.single .photos .first{width: 100%}
.single .photos .more-img{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between}
.single .photos .more-img img{width: 100px;height: 100px;object-fit: cover;margin-bottom: 5px;border: 1px solid rgba(0,0,0,.1)}
.single .ar-cont{width: 49%}
.single .ar-cont h1{margin: 20px 0;border-left: 3px solid #faaf47;padding: 0 10px}
.single .ar-cont .price{display: block;}
.single .ar-cont p{margin: 15px 0}
.shar{border-top: 1px solid #ecf0f1;margin-top: 20px}
.single .desc{color: #E3E7E8;border-bottom: 3px solid #E3E7E8;display: block;font-weight: bold;margin-top: 20px;text-transform: uppercase}
.tag-s{margin: 40px 0!important;}
.tag{padding: 5px 10px;display: inline-block}


.more-articles {position: relative}
.more-articles .car-slide{width:90%;margin: 30px auto 0;overflow: hidden}
.more-articles .car-slide .slide{display: flex;justify-content: flex-start;transition: 0.1s linear}
.more-articles .article{width: 305px;margin-right: 20px;}
.more-articles .article:last-child{margin-right: 0}
.more-articles .btn.sld{position: absolute;top: 32%;padding: 10px;}
.more-articles .btn.sld#nx{right: 0;cursor: pointer}

.page .c{padding: 30px 0}
.page .child{width: 68%}
.page .article{width: 49%}
.page .pag{display: block}
.page .child p{margin: 10px}

.page-aside{background-color: #ecf0f1;padding: 15px;border-radius: 5px}

.pg .flex{align-items: center}
.pg .child{width: 59%;padding: 30px}
.pg .child p{margin-bottom: 20px}
.pg .child2{width: 40%}
.pg .child2 img{width: 100%;margin-bottom: 30px}
.pg .child2 ul{padding: 40px 30px}

.h{display: block;font-size: 1.3em;font-weight: bold;margin-bottom: 20px}

.gla-cptch span{margin-right: 10px;}
.gla-cptch input[type=text]{width: 40px;text-align: center}

.gla-pagination, .sub_cats{padding: 40px 0}
.gla-pagination a, .sub_cats a{padding: 6px 10px;margin: 5px}

footer{padding: 60px 0;}
footer .c{display: flex;justify-content: space-between}
footer .child.cnt{padding: 10px;width: 32%}
footer .t{color: #fff;display: block;margin-bottom: 20px;font-size: 1.2em;text-transform: uppercase}
footer a{color: #ccc}
footer a:hover{color: #fff}
footer .child a{display: block;margin-bottom: 10px;font-size: 0.9em;text-transform: capitalize}
footer .child img{width: 300px}
footer .child.cnt li{margin-bottom: 10px;}
footer .child .social{margin-top: 30px;}
footer .child .social a{display: inline-block}
footer .foot-b{font-size: 0.8em;text-align: center;border-top: 1px solid rgba(255,255,255,.1);padding-top: 20px}
footer .foot-b a{display: block;}

.car-sld{width:500px;overflow: hidden;margin-bottom: 15px;}
.car-sld .car-slide{transition: 0.4s ease-in;display: flex;align-items: center}
.car-sld .ch{width: 400px;padding: 20px;position: relative;background: rgba(255,255,255,0.1)}
.car-sld .ch::before,.car-sld .ch::after{content: '';position: absolute}
.car-sld .ch::before{top: 0;left: 0;transform: rotate(180deg)}
.car-sld .ch::after{bottom: 0;right: 0}
.car-sld .ch span{display: block;font-size: 1.2em;margin-bottom: 10px;}
.car-sld .ch p{color: #ccc;font-size: 0.9em;margin-bottom: 20px;}

.gla-comment{margin: 40px 0}
.gla-cptch span{margin-right: 20px;}
.gla-cptch input[type=text]{width: 40px;text-align: center}

.gla-com{margin-bottom: 20px;display: flex;align-items: flex-end}
.gla-com>div{width: 30%}
.gla-com img{width: 50px;height: 50px;margin-right: 6px;float: left}
.gla-com span{font-size: 1.1em;display: block}
.gla-com span.gla-com-time{font-size: 0.8em;color: #666;}
.gla-com p{font-size: 0.9em;display: block;padding: 10px;margin-top: 20px;}

.gla-form input, .gla-form textarea{width: 100%;padding: 10px;margin-bottom: 15px;border: 1px solid rgb(237,237,237);font-family: 'Quicksand', sans-serif}
.gla-form input[type=submit]{width: auto;padding: 10px 20px;}
.gla-form textarea{height: 130px}

.mask{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.4);display: flex;align-items: center;justify-content: center;padding:20px;z-index: 9999}
.mask img{max-width: 100%;max-height: 100%;background: rgba(255,255,255,0.5);box-shadow: 0 0 3px #666;transition: 0.14s linear}
.mask .exit, .mask .btn{position: absolute;width: 50px;height:50px;text-align: center;line-height: 31px;font-size: 1.4em;cursor: pointer;opacity: 0.7}
.mask .exit{right: 10px;top: 10px !important;}
.mask .btn{top: 48%;transition: 0.14s linear;padding-top: 9px;border-radius: 40px;}
.mask .btn-next{right: 20px;}
.mask .btn-prev{left: 20px;}
.mask .btn-next:hover,.mask .btn-prev:hover,.mask .exit:hover{opacity: 1}

.succes, .error{display:block;margin: 20px 0;padding:10px;}
.succes{background: rgba(0,255,0,0.2);color: rgba(0,200,0,0.9)}
.error{background: rgba(255,0,0,0.3);color: rgba(255,0,0,0.9)}

.rem{font-size: 0.9em !important;color: #666;font-style: italic}
a{text-decoration: none;}
li{margin-left: 50px}
footer li,header li,.contact li{list-style: none;margin-left: 0}

span.menu-res{display: none;width: 50px;height: 50px;border-radius:3px;background: url('../img/menu.png') no-repeat #fff;margin-right: 3px;vertical-align: middle;margin-top: -2px}
span.icon,.srch,span.ico,.offre ul li::before,.car-sld .ch::before,.car-sld .ch::after{display: inline-block;width: 50px;height: 50px;border-radius:3px;background: url('../img/ws-icon.png') no-repeat #fff;margin-right: 3px;vertical-align: middle;margin-top: -2px}
span.ico,.offre ul li::before,.car-sld .ch::before,.car-sld .ch::after{width: 35px;height: 35px;background-color: transparent}

.icon.fb{background-position: 0 0}
.icon.tw{background-position: -50px 0}
.icon.gp{background-position: -100px 0}

.ico.tel{background-position: -185px 0}
.ico.ml{background-position: -220px 0}
.ico.map{background-position: -254px 0}
.ico.lg{background-position: -155px 0}

.car-sld .ch::before,.car-sld .ch::after{background-position: -220px -35px}
.clear{clear: both}