@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,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}

.logo{height: 100px; width: 100px; position: fixed; top: 10px;left: 10px;background-color: var(--cl2);padding: 10px;z-index: 9000}
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}

.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: 50px;height: 50px;margin-right: 10px;display: flex; flex-direction:column ; justify-content: center;text-align: center;background-color: var(--cl5);cursor: pointer;}

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

.modele div{display: none}
.modele.size_L .size_L, .modele.size_M .size_M, .modele.size_XL .size_XL{display: block;}

.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;}

.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;z-index: 9999 ; height: 100vh; width: 100%;}

.gla_alert .center{ display: flex; justify-content: center; align-items: center;}
.gla_alert{width: 500px;background: #fff;box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 11px;padding: 25px; }
.gla_alert p{text-align: left;color: var(--cl2); margin-bottom: 30px;}
.gla_alert .gla_btns{text-align: center; }
.gla_alert .gla_btns span{font-weight: bold;text-transform: uppercase;cursor: pointer;text-align: center; color: var(--cl1); background-color: var(--cl3); padding:10px 35px ; border-radius: 5px;}
.gla_alert .gla_btns span:hover{color: var(--cl1); background-color: var(--cl2);}