@import url('https://fonts.googleapis.com/css?family=Lexend:300,400,500,600,700');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

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

header{z-index: 9000;position: relative;}

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

.head .c{padding: 10px 5px}
.head .char .icon{display: inline-block;font-size: 1.1em;}
.head .icon{margin-right: 5px}
.head p{font-weight: 500;padding: 0 20px;margin-right: 15px;font-size: .9em}

.logo{height: 50px}

header{border-bottom: 1px solid #eee}
header nav ul{display: flex;justify-content: start;position: relative;padding:0}
header nav ul li a{padding: 15px;display: inline-block;font-size: .9em;}
header nav ul li a .icon2{font-size: .75em;transform: rotate(90deg);display: inline-block;font-weight: 900;margin-left: 5px}
header nav ul ul{position: absolute;top: 100%;padding: 15px 0;display: none}
header nav ul li:hover ul{display: block}

.caroussel{height: 800px;overflow: hidden;z-index: 6000;position: relative}
.caroussel .slider{transition: 0.4s ease;display: flex;height: 100%;}
.caroussel .child{position:relative;display: flex;justify-content:center;flex-wrap: wrap;height: 100%;}
.caroussel .child img{position:absolute;width:100%;height:100%;object-fit: cover}
.caroussel .child div{position:relative;margin: 100px auto;width: 70%;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;font-size: 1.1em;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;}

.masq{position: absolute;width: 100%;top: 0;left:0;height: 100%;}

.masq .shape{position: absolute;top: auto;bottom: -5px;left: 0;right: 0;}
.masq .phone{position: absolute;bottom: -30px;right: 10%;top: auto;object-fit: contain;height: 800px;}
.masq .btn img{width: 60px;}

.zi-1{z-index: 1}
.zi-10{z-index: 10}

.client .masq .phone{right:auto;left: 10%;height: 750px;}
.driver .masq .phone{right:auto;left: 20px;height: 780px;bottom: -12px;}

.caroussel .btn.icon{display:none;position: absolute;top: 45%;cursor: pointer;transition: 0.3s ease;padding: 10px;box-shadow: none;background-color: transparent;text-align: center;font-size: 1.5em}
.caroussel:hover .btn.icon{display: block}
.caroussel .btn#nx{right: 20px}
.caroussel .btn#pv{transform: rotate(180deg);left: 20px}

.btn{padding: 15px 30px;display: inline-block; font-weight: 500; font-size:.9em; border-radius: 50px;}
.btn:hover{box-shadow: 0 0 3px rgba(0,0,0,0.1)}

.c1{position: relative;}
.c1 img{
        /* animation properties */
        animation-name: my-animation;
        animation-duration: 2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        
        /* other properties */
        position: absolute;
        left: 0;
        margin-left: auto;
        margin-right: auto; 
      
      }
      
      @keyframes my-animation {
        from {
          top: 0;
        }
        to {
          top: 50px;
        }
      
}

.col-3-all{width: 30%;}
.col-5-all{width: 50%;}
.col-7-all{width: 70%;}

.c2, .infos{background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed;}
.c2 .box{position:relative;overflow: hidden;padding:30px;box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.c2 .box .img img{height: 250px; object-fit: cover}
.c2 .box .img::before{content: "";height: 150px;width: 10px;background-color: #ff7d19;display: block;position: absolute;top: 0;right: 0;transform: skewX(60deg)}
.c2 .box .img::after{content: "";height: 180px;width: 5px;background-color: #ff7d19;display: block;position: absolute;top: 0;right: 0;transform: skewX(60deg)}

.contact{background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;}

.services .serv .service{justify-content: space-between;align-items: center;}
.services .serv:nth-child(2n) .service{flex-direction: row-reverse}
.services .serv .cnt{padding: 50px}
.services .serv .title{display:block;font-size: 2em;margin-bottom: 40px;font-weight: 700}
.services .serv img{max-height: 400px;object-fit: cover;}

.services .serv{position: relative;overflow: hidden}
.services .serv .service::before{content: "";height: 10px;width: 200px;background-color: #ff7d19;display: block;position: absolute;top: 0;right: 0;transform: skewX(60deg)}
.services .serv .service::after{content: "";height: 100px;width: 10px;background-color: #ff7d19;display: block;position: absolute;top: 0;right: 0;}
.services .serv:nth-child(2n) .service::before{bottom: 0; top: auto;left:0;right:auto}
.services .serv:nth-child(2n) .service::after{bottom: 0;top: auto;left:0;right:auto}

.page .first{width: 100%;max-height: 470px;object-fit: cover}
.more-img img{width:100%;height: 160px;object-fit: cover;cursor: pointer}
.more-img img:hover{opacity: 1;}
.more_services a{display: block;margin-top: 10px; font-size: 1.2em;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6{margin-bottom: 15px;margin-top: 25px}
.content p{margin-bottom: 15px}
.content li{margin-bottom: 10px}

.content table{margin:30px 0;color:#fff;background-image: linear-gradient(160deg, #0d3dde 70%, #ffb700);border-collapse: collapse; border:0}
.content tr:first-child th{background: rgba(255,255,255,.4)}
.content tr th{background: rgba(255,255,255,.3)}
.content th{padding: 20px 15px;text-align: left;font-weight: 700;font-size: 12px;text-transform: uppercase; }
.content td{padding: 15px;text-align: left;vertical-align:middle;font-weight: 300;font-size: .9em;border-bottom: solid 1px rgba(255,255,255,0.1)!important;}

.infos div{background-color: rgba(0,0,0,.5)}

.contact-form{box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}

footer{color: #b5b5b8;font-size: .9em}
footer .title{font-size: 1em; font-weight: 600;text-transform: uppercase;display:block;margin-bottom: 15px}
footer a{display: block;margin-bottom: 8px;color: #b5b5b8}
footer .info p{margin-bottom: 8px}
footer .facebook{color: #4267B2}
footer .twitter{color: #1DA1F2}
footer .instagram{color: #e95950}
footer .kiuper{color: #6F9C00}

.contact p{margin-bottom: 10px;}

.gla-pagination a,.gla-pagination .btn{padding: 8px 15px;margin-right: 5px}
.gla-pagination{text-align: right}

.more-articles{position: relative;}
.more-articles .article{margin-right: 10px;width: 100%;}
.more-articles h2{margin: 30px 0 15px 0}

.car-slide{overflow: hidden;margin: 40px 0;position: relative;}
.car-slide .slide{display: flex;justify-content: flex-start;transition: 0.1s linear;padding: 0 20px;}
.car-slide .article{margin-right: 20px}
.btn.sld{position: absolute;top: 50%;padding:12px 15px;text-align: center;}
.btn.sld#nx{right: 0;cursor: pointer}
.btn.sld#pr{transform: rotate(180deg)}


.gla-form input,.gla-form textarea,.gla-form select{padding: 15px;}
.gla-form input[type=text],.gla-form input[type=email], .gla-form textarea,.gla-form select{width: 100%;margin-bottom: 20px;border:none}
.gla-form input[type=submit]{width: auto;border: none;float: right;margin-top: 15px;}
.gla-form textarea{height: 130px}
.gla-cptch input{width: 60px !important;}

.gla-form label{margin: 10px 20px;font-weight: bold;display: block}

.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);border-radius:3px;box-shadow: 0 0 6px #444;transition: 0.14s linear}
.mask .exit, .mask .btn{position: absolute;text-align: center;line-height: 40px;font-size: 2em;cursor: pointer;opacity: 0.7;padding: 10px 20px}
.mask .exit{right: 10px;top: 10px !important;border-radius: 50px;}
.mask .btn{top: 48%;transition: 0.14s linear;background: transparent;color: #0a1d61;vertical-align: middle}
.mask .btn:hover, .mask .exit:hover{border: 1px solid #0a1d61}
.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;}
footer li,header li,.contact li{list-style: none;margin-left: 0}

span.menu-res{display: none;width: 45px;height: 45px;font-size:1.5em;text-align:center;margin-right: 20px;cursor: pointer;padding-top: 5px;}

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