@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Spectral+SC:400,500,600,800');
@font-face {
    font-family: 'icon';
    src: url('icon.ttf') format('truetype')
}
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

html,body{height:100%}
*{margin:0;box-sizing: border-box;}
body,input,select,textarea{font-family: 'Poppins', sans-serif;color:#222f3e}

.icon{font-family: 'icons' !important;line-height: 1;vertical-align: middle}

.c{width: 990px;margin: 0 auto;}

.logo{height: 100px; width: 100px; position: fixed; top: 10px;left: 10px;background-color: var(--cl2);padding: 10px;z-index: 9000}
.logo2{height: 50px;object-fit: contain;}
img{width: 100%;height: 100%;}
.menu{position: fixed; top: 10px;right: 10px;height:52px;padding: 10px;background-color: var(--cl1);z-index: 9000}

a{text-decoration: none}
.h{font-family: 'Spectral SC', serif;font-weight: 500;}

.c1{position: relative; height: 100vh;width: 100%;}
.c1 .masq{position: absolute;top: 25px;left: 0;width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.c1 .masq h1{font-size: 4em;color: var(--cl1);font-weight: 400;width: 40%;text-align: center;}

.image-home{width: 100%;height: 100vh;object-fit: cover;}

.article{text-align: center;overflow: hidden;margin-bottom: 15px;border: 1px solid transparent;cursor: pointer;transition: .5s ease;position: relative;}
.article img{width: 100%;height: 400px;object-fit: cover;margin-bottom: 5px;}
.article p{font-size: 1.1em;margin-bottom: 8px;color: var(--cl2);}
.article .price{font-size: 1.1em;color: var(--cl3);font-weight: 500;display: block;margin-bottom: 10px;}
.article .price .strike{font-size: .9em;color: var(--cl8);text-decoration: line-through; margin-left: 10px;}
.article:hover{border-width: 1px;border-style:  solid ;border-left-color: var(--cl3);border-right-color:  var(--cl2);border-top-color: var(--cl3);border-bottom-color: var(--cl2);}
.article .colors{display: flex;justify-content: flex-start;position: absolute;top: 360px;left: 10px;}
.article .colors div{width: 30px;height: 30px;border-radius: 15px;margin-right: 10px;}
.color1{background-color: #3a2618;}
.color2{background-color: #d09259;}
.color3{background-color: #9f5d54;}
.color4{background-color: #adb5bd;}
.color5{background-color: #46494c;}


.caroussel{width: 100%;height: 100vh;max-width: 100%;z-index: 6000;position: relative;overflow: hidden;}
.caroussel .slider{transition: 0.4s ease;display: flex; width: 100%;height: 100vh;}
.caroussel .child{position:relative;display: flex;justify-content:center;flex-wrap: wrap;}
.caroussel .child img{position:absolute;width:100%;height:100%;object-fit: cover; top: 0;}
.caroussel .child div{position:relative;color: #fff;}
.caroussel h1{margin: 0 auto;font-weight:500;;margin-bottom: 20px;display: block}

.content{height: 100vh;overflow: scroll;scroll-behavior: smooth;scrollbar-width: none;-ms-overflow-style: none;}

.options .color div{width: 30px;height: 30px;border-radius: 15px;margin-right: 10px;}
.options .color div.active, .options .size div.active, .options .modele div.active{border: 3px solid var(--cl3);}
.options .color1{background-color: #272a2e;}
.options .color2{background-color: #A2B2C6;}

.options .size div{width: 30px;height: 30px;margin-right: 10px;display: flex; flex-direction:column ; justify-content: center;text-align: center;background-color: var(--cl5);}

.options .modele div{height: 170px;}
.options .modele img{width: 100%; height: 100%;object-fit: cover;}
.options .modele span{display: block;font-size: .9em; padding: 8px;}

.btn{padding: 20px!important;display: inline-block; cursor: pointer;}

.gla-form select{background-color: #fff;}
.gla-form input,.gla-form textarea,.gla-form select{padding: 10px 15px;border-radius: 0;-webkit-appearance: none; }
.gla-form input[type=text],.gla-form input[type=email],.gla-form input[type=tel],.gla-form input[type=password], .gla-form input[type=number], .gla-form textarea,.gla-form select{margin-bottom: 20px;border:1px solid #000;}
.gla-form input[type=submit]{border: none;font-size: 1em;}

.gla-form textarea{height: 130px}

/* GLA Slider ---------- */

.gla_slider{position: relative;overflow: hidden;}
.gla_slider .gla_slider_slider{width:100%;display: flex;transition: 0.4s ease;flex-wrap: nowrap}

.gla_slider .slider_btn{position: absolute;color:var(--cl1);top:43%;padding: 10px;cursor: pointer;transition: 0.2s ease;font-size: 1.5em;background-color: var(--cl2);}
.gla_slider .slider_btn:hover{opacity: 1;}
.gla_slider .next_btn{right: 10px}
.gla_slider .previos_btn{left: 10px}

.c6 .gla_slider{position: static;}