/*@font-face {font-family: ProximaNovaBold; src: local("ProximaNova Bold"),url("../font/ProximaNova-Bold.woff") format('woff'),url("../font/ProximaNova-Bold.ttf") format('truetype');}
@font-face {font-family: ProximaNovaLight; src: local("ProximaNova Light"),url("../font/ProximaNova-Light.woff") format('woff'),url("../font/ProximaNova-Light.ttf") format('truetype');}
@font-face {font-family: ProximaNova;src: local("ProximaNova Regular"), local("ProximaNova"),url("../font/ProximaNova-Regular.woff") format('woff'),url("../font/ProximaNova-Regular.ttf") format('truetype');}
@font-face {font-family: ProximaNovaSemibold;src: local("ProximaNova Semibold"),url("../font/ProximaNova-Semibold.woff") format('woff'),url("../font/ProximaNova-Semibold.ttf") format('truetype');}*/
/*@font-face {font-family: ProximaNovaBold; src: url("../font/Eurostile-Extended-Black.woff") format('woff'),url("../font/Eurostile-Extended-Black.ttf") format('truetype');}
@font-face {font-family: ProximaNova;src: url("../font/Eurostile-Extended-Regular.woff") format('woff'),url("../font/Eurostile-Extended-Regular.ttf") format('truetype');}
@font-face {font-family: ProximaNovaSemibold;src: url("../font/Eurostile-Extended-Medium.woff") format('woff'),url("../font/Eurostile-Extended-Medium.ttf") format('truetype');}*/
@font-face {font-family: ProximaNovaBold; src: url("../font/edit-serif-cyrillic-bold.otf");}
@font-face {font-family: ProximaNova;src: url("../font/edit-serif-cyrillic-regular.otf");}
@font-face {font-family: ProximaNovaSemibold;src: url("../font/edit-serif-cyrillic-semi-bold.otf");}
@font-face {font-family: Venus;src: url("../font/venus2.ttf") format('truetype');}
/*@font-face {font-family: Venus;src: url("../font/bicubik.otf") format('opentype');}*/
@font-face {font-family: Porsche;src: url("../font/sk-porsche.ttf") format("truetype");}
/*@font-face {font-family: Roboto;src: url("../font/roboto/Roboto-Regular.ttf") format("truetype");}*/
/*@font-face {font-family: RobotoBold;src: url("../font/roboto/Roboto-Medium.ttf") format("truetype");}*/
@font-face{font-display:swap;font-family:"Montserrat";font-weight:normal;src:url("../font/Montserrat-Regular.woff2") format("woff2"), url("../font/Montserrat-Regular.woff") format("woff");}
@font-face{font-display:swap;font-family:"MontserratB";src:url("../font/Montserrat-SemiBold.woff2") format("woff2"), url("../font/Montserrat-SemiBold.woff") format("woff");}
:root {--brandcolor: #cf5c36; --brandcolorold: #fd6c3a; --btnhover: #9a3517; --btnhoverold:#ca540d; --branddark: #a84103;
    --backgrey: #F3F3F3;--darkgrey: #2d2d2d; --padtop: 80px; --padside: 80px; --navpos: -75px;
    --2nback: #101010; --2n1back: #181818; --modalback: #101010;
    --fonttext: Montserrat, sans-serif; --fonttextbold: MontserratB, sans-serif; --fontheader: ProximaNovaSemibold, serif; --fontlogo: Venus, sans-serif}
* {font-family: var(--fonttext);}

body {padding: 0; margin: 0;
    font-size: 16px; color: white;
    background: #121212 url(../img/smoke.png) no-repeat center fixed;
    background-size: cover;
}
h1,h2,h3,h4,h5,h6 {font-family: var(--fontheader);}
main {width: 1340px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
body.blur main {filter: blur(3px);}
body.blur {overflow: hidden}
section {background: var(--2nback); box-sizing: border-box; padding: var(--padtop) var(--padside);}
section:nth-child(2n+1) {background: var(--2n1back);}
header  {height: 600px;  align-content: end;  position: relative; padding: 0!important; padding-top: 60px;}
header div.bg {
    position: absolute; background-image: url('/images/drones/pp/1761748653_850_1340.jpeg?1761152212')/*, url(../img/smoke.png)*/;
    top: 60px; bottom: 0; left: 0; right: 0;
    box-sizing: border-box; background-position: center; background-repeat: no-repeat; background-size: cover;
}
header p { color: white; font-family: var(--fonttext), serif; font-weight: bold; font-size: 40px; margin: 10px 0;}
header p.h {
    font-family: var(--fontlogo);
    /*transform: scaleY(1.2);*/
    background-image: linear-gradient(to bottom, #fff, #eee 50%, #ddd 51%, #999);
    background-clip: text;
    color: #fff5;
/*    background: url('../img/metal3.jpg') no-repeat;
    background-clip: text; color: transparent;*/
}
header .video-background {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
header .video-background video {width: 100%; height: 100%;}
header div.c {position: relative; z-index: 1; padding: var(--padtop) var(--padside);}
/*header div.c p.h {text-shadow: 1px 1px 4px rgba(0,0,0,0.4);}*/
h1 {font-size: 40px;}
h2 {font-size: 32px;}
h3 {font-size: 24px;}
a.btn, button.btn {
    color: white;
    display: inline-block;
    padding: 10px 0 8px;
    width: 252px;
    font-family: ProximaNova, serif; font-weight: bold;
    text-decoration: none;
    font-size: 22px;
    text-transform: lowercase;
    text-align: center;
    background: var(--brandcolor);
    /*background: var(--brandcolor) url('../img/metal3.jpg') no-repeat;*/
    text-indent: 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-out;
    background-blend-mode: multiply;
}
/*a.btn:hover, .product:hover a.btn {background-color: var(--btnhover);}*/
a.btn:active, button.btn:active {color: #f4f4f4; background: var(--branddark);}
#orderbtn {
    position: relative; background-blend-mode: normal;
    height: 54px; padding: 0;
    /*background: var(--brandcolor) url("../img/btnbg.png") no-repeat center;*/
    &:after {
        position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-align: center; align-content: center;
        content: 'оставить заявку'; opacity: 1;

        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, transparent );
    }
    &:hover {
        &::after {background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 70% );}
    }
}
a.btn, button.btn {
    border-color: var(--branddark);
    /*background: linear-gradient(to top, var(--branddark), var(--brandcolor) 25%, #ffffff 38%, #c5c5c5 63%, var(--btnhover) 87%, var(--branddark));*/
    background: linear-gradient(180deg,var(--brandcolor) 0%,var(--branddark) 49%, var(--btnhover) 51%,var(--branddark) 100%);
    position: relative; overflow: hidden;
    &::before {content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
        left: -100%;
        top: 0;}
    &::after {content: ""; position: absolute; opacity: 0;
        right: 0; top: 0;  bottom: 17px; left: 0;
        background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) );
        display:block; transition: 0.5s;}
}
a.btn:hover, .product:hover a.btn, form:valid button.btn:hover {
    color:white; &::before{left: 100%;transition: 1.5s;} &::after {opacity: 1;}
}

.advantages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px; grid-template-rows: 290px;
}
.advantages + p {margin-top: 60px;}
.advantages > div {
    text-align: center;
    border: 2px solid #4d3527;
    border-radius: 10px;
    padding: 15px;
    /*background: linear-gradient(to top, #3a3a3a, #101010);*/
    /*background: linear-gradient(to bottom, var(--2n1back), var(--2nback));*/
    display: grid;
    grid-template-rows: 160px auto;
    cursor: default;
    background: var(--2n1back) url(/theme/drones/img/metal21.jpg) no-repeat left top;
    background-blend-mode: overlay;
    background-size: 200%;
}
.advantages .icon {
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: ease-in-out transform 0.2s;
}
.advantages div:hover .icon {transform: scale(1.1);}
.advantages .camera .icon {background-image: url('../img/camerab.svg');}
.advantages .signal .icon {background-image: url('../img/signalsolidb.svg');}
.advantages .stable .icon {background-image: url('../img/dronefillb.svg');}
.advantages .drop .icon {background-image: url('../img/hook-portb.svg');}
.advantages div {font-family: var(--fonttextbold);}
section#aboutproduct, section#о-товаре {display: grid; grid-template-columns: 50% auto; gap: 50px;}
section#aboutproduct .pic, section#о-товаре .pic {background: url("/images/drones/pp/1759510885_99_700.jpeg") no-repeat right center;
    background-size: contain; /*mix-blend-mode: multiply;*/}
ol > li { margin-bottom: 10px;}
ol > li::marker {color: var(--brandcolor); font-weight: bold;}
ul > li {list-style-type: disc; margin-bottom: 5px;}
li > ul {margin-top: 5px;}
ul > li::marker {color: var(--brandcolor);}
/*#aboutproduct p::first-letter {font-size: 24px; color: var(--brandcolor); font-family: var(--fontheader);}*/
div.modal {
    position: fixed; z-index: 100; top: calc(50% - 200px); left: calc(50% - 220px);
    width: 440px; background: var(--modalback); box-sizing: border-box; display: none;
}
/*div.message.modal {display: block;}*/
.message.modal::before {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 0;
    content: ''; z-index: -1;
}
.message .message-title {
    padding: 15px 20px;
    font-size: 1.3rem;
    background: var(--modalback);
    font-family: var(--fontheader);
    font-weight: bold;
}
.message .message-body {
    display: grid;
    grid-template-columns: 50px auto;
    background: var(--modalback);
    padding: 10px 20px;
    gap: 10px;
}
.message .message-action {
    padding: 20px; text-align: center;background: var(--modalback);
}
.message .message-body .icon {height: 50px; position: relative;}
.message .message-body .text {align-self: center; padding-right: 50px;}
.message .message-body .icon:after {
    position: absolute; width: 100%; height: 100%; content: '';
    left: 0; top: 0; align-content: center; font-size: 30px; background: url('../img/information.svg') center center no-repeat; background-size: 30px;}
.message.warning .message-body .icon:after {/*content: '\26A0';*/background-image: url('../img/warning.svg');}
.message.error .message-body .icon:after {/*content: '\26D4';*/background-image: url('../img/error.svg');}
div#about {width: 500px; left: calc(50% - 250px);}
div.modal h3 {margin: 10px 0 0;}
div.modal form > div.mhead {background: var(--modalback);}
div.modal form > div, div.modal div.text > div {background: var(--modalback); padding: 10px 30px;}
div.modal p.flds:first-of-type {margin-top: 0;}
div.modal p.flds {display: grid; grid-template-columns: 100px auto; align-items: baseline; gap: 5px;}
div.modal p.checks {display: grid; grid-template-columns: min-content auto; align-items: start; gap: 5px;}
div.modal p.checks label {font-size: smaller;}
div.modal input, div.modal textarea { padding: 6px 10px 4px; font-size: 14px;}
div.modal::before {
    z-index: -1; display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(50,50,50,0.5);  content: '';
}
div.modal p.btn {margin-top: 25px;}
div.modal p.btn button.btn {width: 100%}
div.modal p.confirm {font-size: 12px;}
a.close {width: 30px; height: 30px; position: absolute; top: 15px; right: -45px;}
a.close {border-radius: 50%; transition: ease 0.2s; text-decoration: none;}
a.close:before {content: '×';
    color: white;
    font-size: 30px;
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: var(--fonttextbold);
    top: -1px; line-height: 30px;}
.photoviewer > a.close:hover, a.close:hover {background: var(--brandcolor);}
form button[type=submit] {opacity: 0.5;}
form:valid button[type=submit] { opacity: 1; }

.photoviewer {position: fixed; display: none; width: 1014px; left: 50%;top:50%; margin-left: -507px;margin-top: -350px; background: var(--modalback);z-index: 1000;}
.photoviewer > * {background: var(--modalback);}
.photoviewer > a.close {background: none;}
a.nav::after {
    content: ''; position: absolute; display: block; width: 51px; height: 51px;
    background: url("../img/right.svg?1") center no-repeat; background-size: contain;
    border-radius: 26px; left: 50%; margin-left: -10px;top: 50%; margin-top: -26px;box-sizing: border-box;
}
.photowraper, .grabbing {user-select: none;}
a.nav:hover::after {/*border: 1px solid var(--brandgreen);*/ background-image: url("../img/right-hover.svg?1");}
.photoviewer .photowraper, .photopreviewer .photowraper {position: relative;display: flex; flex-flow: nowrap;overflow: hidden;}
.photopreviewer .photowraper {gap: 25px;}
.photoviewer:before {z-index: -1; display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(50,50,50,0.5); content: ''}
.photoviewer:after {z-index: -1; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--2nback); content: ''}
.photoviewer h2.h1 {margin: 0; padding: 29px 36px 36px 36px;}
.photoviewer .about {padding: 29px 32px 38px; background: none; margin: 0; text-align: center;}
.g-container .piccontainer {height: 500px; background-position: center center; background-repeat: no-repeat; background-size: contain;
    background-color: var(--backgrey); border: 20px solid var(--backgrey); box-sizing: border-box; border-radius: 16px;
    width: 840px; margin: 0 87px;background-blend-mode: darken; text-align: center;}
.g-container .description {height: 500px;background-color: var(--2n1back);border: 20px solid var(--2n1back);box-sizing: border-box; border-radius: 16px;
    width: 840px; margin: 0 87px;}
.g-container .description {overflow-y: scroll; text-align: left;}
.g-container .description dl, .modal dl {display: grid; grid-template-columns: auto 1fr; gap: 10px;}
.g-container .gg-item .description p {text-align: left; font-size: medium;}
.g-container .description h3,.g-container .description h4,.g-container .description h1,.g-container .description h2, section h2 {color: var(--brandcolor);}
.photopreviewer .g-container .piccontainer {width: 100%; height: 200px;margin: 0; border: none; background-color: unset; transition: 0.2s ease;}
.photopreviewer .gg-item:hover .piccontainer { transform: scale(1.03);}
.photoviewer .piccontainer video {max-height: 100%; max-width: 100%;}
.photoviewer .about ol li {list-style-type: none;width: 33%; display: inline-block; font-size: 14px;}
.photoviewer .about ol li span {display: inline-block; width: 77%;vertical-align: middle; margin-left: 16px;}
.photoviewer .about ol li::before {color: var(--brandgreen); border: 1px solid var(--brandgreen); width: 48px; height: 48px; box-sizing: border-box; display: inline-block;
    border-radius: 24px; font-size: 20px;text-align: center;line-height: 48px;}
.photoviewer .about ol li:nth-child(1)::before {content: '1'}
.photoviewer .about ol li:nth-child(2)::before {content: '2'}
.photoviewer .about ol li:nth-child(3)::before {content: '3'}
.photoviewer a.nav {position: absolute;top: 107px;width: 110px;height: 442px;}
.photoviewer a.nav.prev {left: 7px;transform: rotate(180deg);}
.photoviewer a.nav.next {right: 7px;}
.photopreviewer a.nav {position: absolute;top: 0;width: 110px;height: 200px;}
.photopreviewer a.nav.prev {left: var(--navpos); transform: rotate(180deg);}
.photopreviewer a.nav.next {right: var(--navpos);}
section.category a.nav {position: absolute;top: 0;width: calc(40px + var(--padside));height: 100%;}
section.category a.nav.prev {left: 0; transform: rotate(180deg);}
section.category a.nav.next {right: 0;}
section.category:nth-child(2n) a.nav {background-image: linear-gradient(to right, transparent, var(--2nback))}
section.category:nth-child(2n+1) a.nav {background-image: linear-gradient(to right, transparent, var(--2n1back))}
.photopreviewer {position: relative; cursor: pointer;}
.photopreviewer .gg-item {position: relative; border: 2px solid var(--darkgrey);
    padding: 25px; border-radius: 5px; flex: 1 1 0;}
.photopreviewer .gg-item .enlarge {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.gg-item p {text-align: center; font-size: small;}
section.category .g-container { margin: 0 var(--navpos); position: relative;}
.catview {display: flex; flex-direction: row; gap: 25px; overflow: hidden; padding: 30px var(--padside) 40px var(--padside);}
.catview .product {
    border: 2px solid #4d3527;
    /*background: linear-gradient(to bottom, var(--2n1back), var(--2nback));*/
    padding: 25px; border-radius: 5px; gap: 7px;
    width: 250px; box-sizing: border-box; text-align: center; transition: ease 0.4s; position: relative; display: grid;
    grid-template-rows: 1fr 66px auto; min-width: 250px;
    background: var(--2nback) url(/theme/drones/img/metal21.jpg) no-repeat left top;
    background-blend-mode: overlay;
    }
.catview .product .enlarge {position: absolute;left: 0; top: 0; right: 0; bottom: 0; cursor: pointer;}
.catview .product:hover {transform: scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.15);}
.btn.btn-small { width: auto; padding: 8px 20px; font-size: 18px; }
.catview .product .image { height: 200px; background-repeat: no-repeat; background-position: center center; background-size: contain;
background-color: var(--backgrey); background-blend-mode: darken;}
.catview .product .name {margin-bottom: 8px; overflow: hidden; font-size: 14px; transform: scaleY(1.1); line-height: 20px;}
dt {font-family: var(--fonttextbold);}
#faq dt, #about dt {color: var(--brandcolor);}
dd {margin-left: 0; margin-bottom: 10px;}
footer {padding: var(--padtop) var(--padside); background: var(--darkgrey); color: white; margin-bottom: 40px;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "logo links" "copyright links";
    align-items: start;}
.logoicon {background: url('../img/drone-white.svg') no-repeat center center; background-size: contain; width: 40px; height: 40px;}
/*footer .logo {grid-area: logo; display: grid; grid-template-columns: 40px auto; align-items: center; gap: 10px;}*/
footer .logo p {font-family: var(--fontlogo);     background-image: linear-gradient(to bottom, #fff, #eee 50%, #ddd 51%, #999);
    background-clip: text;
    color: #fff5;
    font-size: 20px; /*transform: translateY(3px);*/}
footer .links {grid-area: links}
footer .copyright {grid-area: copyright}
footer a, a.text {color: white; text-decoration: none;}
footer a:hover, a.text:hover {color: var(--brandcolor);}
b, strong {font-family: var(--fonttextbold);}
a.accent {color: var(--brandcolor); text-decoration: none;}
a.accent:hover {color: var(--branddark); text-decoration: underline;}
.g-container .description {position: relative;}
.g-container .descr .hh {position: absolute; right: calc(var(--padside) + 30px); margin-top: -40px;animation:backpos 2s infinite ease-in-out;
    width: 30px; height: 30px; background: url("../img/down.svg?1") no-repeat center; background-size: contain;}
section video {width: 100%;}
#обратная-связь { display: grid; grid-template-columns: auto 200px; gap: 50px; overflow: hidden;}
#обратная-связь .pic {background: url("../img/question.svg") center no-repeat; background-size: contain;
    transform: scale(3) translateX(-60px); opacity: 0.2;}
header nav {background: var(--2nback); box-sizing: border-box; padding: 0 var(--padside);}
header nav ul {padding: 0; display: flex; flex-direction: row; margin: 0;}
header nav li {list-style: none; margin: 0; padding: 0;}
header nav li a {display: inline-block; padding: 20px 25px; color: white; text-decoration: none;  position: relative;}
header nav li a::after { background: linear-gradient(180deg,var(--brandcolor) 0%,var(--branddark) 49%, var(--btnhover) 51%,var(--branddark) 100%);
    opacity: 0; position: absolute; left: 35%; top: 0; bottom: 0; right: 35%; content: ''; display: block; transition: 0.2s ease; z-index: -1;}
header nav li a:hover::after { opacity: 1; left: 0; right: 0;}
header nav {
    position: fixed;  top: 0; width: 1340px;
    background-image: url("../img/metal31.jpg");
    background-blend-mode: soft-light;
    box-shadow: 0 15px 24px -15px rgba(255, 255, 255, 0.5);
    z-index: 1;
}
header nav .burger {display: none;}
header nav .burger a {display: inline-block; width: 35px; height: 35px; background: url('../img/menu.svg') no-repeat center;
    background-size: contain;
    border: 15px solid transparent; }
@keyframes backpos{from,100%,to{transform: translateY(-30px);}40%{transform: translateY(0);}}