@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

body,html{width:100%;height:100%}
body{
    font-family: 'Montserrat', sans-serif;
    padding-top:92px;
}

.bg-light {background-color:#f0f0f0!important;}

::-moz-selection{color:#fff;background:#212529;text-shadow:none}
::selection{color:#fff;background:#212529;text-shadow:none}
img::selection{color:#fff;background:transparent}
img::-moz-selection{color:#fff;background:transparent}

input::-moz-placeholder {color:#888;}
input::-webkit-input-placeholder {color:#888;}

hr{max-width:50px;background-color:#e20000;}
a{color:#000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;text-decoration:none;}
a:hover{color: #007fff !important;}
.h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5,.h6,h6{font-weight:500}
label{font-weight:500}
section{padding:4rem 0;position:relative;}
@media (min-width: 992px) {
    section{padding:6.25rem 0;}
}

.form-success {display:none;}

.section-heading{margin-top:0;margin-bottom:2rem}
.table td, .table th {padding: .75rem 1rem;}
.table-hover tbody tr:hover {background-color: #009D91!important;color: #fff!important;box-shadow: 0 5px 10px rgb(0,0,0,0.1)}
.lead {font-weight:400;}
.img-rounded{border-radius:6px}

.box{display:block;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important}
.box:hover{box-shadow:rgba(0,0,0,0.2) 0 6px 12px}
.zoom-in{position:relative;overflow:hidden}
.zoom-in:before{position:absolute;display:none;content:'';width:100%;height:100%;background:rgba(0,0,0,0.75) url(/img/zoom-in.png) 50% 50% no-repeat;top:0;left:0;bottom:0;right:0}
a:hover .zoom-in:before{display:block}

.bg-primary{background-color:#e20000!important}
.bg-secondary{background-color:#141414!important}
.bg-dark{background-color:#212529!important}
.text-primary{color:#007fff!important}
.text-secondary{color:#007fff!important}
.text-faded{color:rgba(255,255,255,0.7)}

/* NAVBAR */
#pageNav {
    background-color: #fff;
    -webkit-transition:background-color 0.2s;
    -moz-transition:background-color 0.2s;
    transition:background-color 0.2s;
}

#pageNav .navbar-nav > li.nav-item > a.nav-link,
#pageNav .navbar-nav > li.nav-item > a.nav-link:focus{font-weight:500;text-transform:uppercase;color: #000;}
#pageNav .navbar-nav > li.nav-item > a.nav-link:hover,
#pageNav .navbar-nav > li.nav-item > a.nav-link:focus{color:#ffd427}
#pageNav .navbar-nav > li.nav-item > a.nav-link.active,
#pageNav .navbar-nav > li.nav-item > a.nav-link:focus.active{color:#e20000!important;border-color: #e20000;}
#pageNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
#pageNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover{border-color: #e20000;}

#pageNav .phone, #pageNav .navbar-brand img {transition:1s}
#pageNav .phone{display:block;color:#000;font-size:1.5rem;font-weight:700}
#pageNav .navbar-brand img {width:100%;max-height:50px;}

#pageNav.navbar-shrink {box-shadow: rgba(0,0,0, 0.05) 0 10px 10px;}
#pageNav.navbar-shrink .phone {font-size:1.5rem!important}

@media (min-width: 992px) {
#pageNav {background-color:transparent}
#pageNav .navbar-nav > li.nav-item {padding:.25rem .8rem;}
#pageNav .navbar-nav > li.nav-item > a.nav-link{padding:.25rem 0;}
#pageNav .navbar-nav > li.nav-item > a.nav-link,
#pageNav .navbar-nav > li.nav-item > a.nav-link:focus{color: #000;text-decoration:none;}
#pageNav .navbar-nav > li.nav-item > a.nav-link:hover{color:#000;}
#pageNav .phone{margin:0 1rem}

#pageNav.navbar-shrink{background-color: #fff;}
#pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
#pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus{/* color:#fff; */}
#pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover{color:#fff}

#pageNav .navbar-brand img {max-height:70px;}
    
}

/* HEADER */
header {
    position:relative;
    min-height: 100vh;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url(/img/header/background.jpg);
}

header:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #000 0, rgba(0,0,0,0.35) 10%);
}

header .container{position:relative;}

@media (min-width: 992px) {
    header {padding-top:0;padding-bottom:0}
    header h1{font-size:3rem}
}
@media (min-width: 1200px) {
    header h1{font-size:4rem}
}


/* BUTTONS */
.btn{
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 3px solid transparent;
    border-radius: 300px;
    text-transform: uppercase;
    transition: 0.3s;
    position: relative;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.5);
}

.btn-sm{
    padding: 0.5rem 1rem;
}

.btn-xl{
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

@media (min-width: 992px) {
    .btn{
        padding: 0.75rem 1.5rem;
        font-size:1rem;
    }
    .btn-sm{
        padding: 0.5rem 1.2rem;
        font-size: 0.875rem;
    }
	.btn-lg {
        padding: 1rem 2rem;
        font-size:1rem;
	}
    .btn-xl{
        padding: 1.125rem 2.25rem;
        font-size: 1.125rem;
    }
}

/* BUTTONS COLORS */
.btn-primary {
    color: #fff !important;
    background-color: #e20000 !important;
    border-color: #e20000 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff !important;
    background-color: #e20000 !important;
    border-color: #e20000 !important;
    box-shadow: 0 0 1rem rgba(0, 157, 145, 0.5) !important;
}

.btn-secondary {
    background: linear-gradient(to bottom, #005bb7, #007fff);
    border-color: #007fff !important;
    color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus {
    background: linear-gradient(to bottom, #004c9b, #0078f1);
    border-color: #0078f1 !important;
}

.btn-outline-primary {
    color: #e20000;
    border-color: #e20000;
}

.btn-outline-primary:hover {
    color:#fff !important;
    background-color: #e20000 !important;
    border-color: #009D91 !important;
    box-shadow: 0 0 1rem rgba(0, 157, 145, 0.5) !important;
}

.btn-outline-secondary {
    color: #fff;
    border-color: #e20000;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #e20000 !important;
    border-color: #e20000 !important;
}

.btn-pulsation{
    transition:.3s;
    -webkit-animation:hoverWave linear 1s infinite;
    animation:hoverWave linear 1s infinite
}

.btn-excel {
    padding-left:100px;
}
.btn-calculator {
    padding-left:106px;
}
.btn-calculator:before,
.btn-excel:before {
    position:absolute;
    display:block;
    width:100px;
    height:100px;
    left: 0px;
    top: calc(50% - 50px);
    content:'';
}
.btn-excel:before{
    background:url(/img/buttons.png) 0 0 no-repeat;
}
.btn-calculator:before {
    background:url(/img/buttons.png) -100px 0 no-repeat;
}


.navbar-light .navbar-toggler{color:#aaa;font-size:1.5rem;border-color:#999;padding:.35rem .75rem}
.nav{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:7999;top:0;bottom:0;right:0;padding:0 1%;background:#333;transition:padding .7s,transform .7s;transition:padding .7s,transform .7s,-webkit-transform .7s}
.nav.active{-webkit-transform:translateX(100%);transform:translateX(100%)}
.nav.active .touch__menu-nav{opacity:1;-webkit-transform:none;transform:none;right:100%}

@media (max-width:1365px),(max-height:685px) {
.nav{padding:0 1.82292% 0 1.04167%}
}
@media (max-height:685px) {
.nav{width:180px}
.nav .menu{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:auto}
.nav .menu li{width:50%;margin-top:0}
.nav .menu li:nth-child(n+3){margin-top:20px}
}
@media (max-height:379px) {
.nav{width:250px}
.nav .menu{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.nav .menu li{width:33%}
.nav .menu li:nth-child(n+3){margin-top:0}
.nav .menu li:nth-child(n+4){margin-top:20px}
}
#form1_success,#form2_success,#form3_success,#form4_success{display:none}

#call{display:none}
@media (max-width: 992px) {
#call{display:block;background:#FFD427;border:2px solid #FFD427;background:linear-gradient(to right,#ffb100,#ffe600);border-radius:50%;box-shadow:0 8px 10px rgba(250,196,115,0.3);cursor:pointer;width:65px;height:65px;text-align:center;position:fixed;right:105px;bottom:20px;z-index:9999;opacity:1;transition:.3s;-webkit-animation:hoverWave linear 1s infinite;animation:hoverWave linear 1s infinite}
#call a{display:block;height:65px;width:65px;border-radius:50%;position:relative;overflow:hidden}
#call span{color:#000;font-size:36px;transition:.3s;line-height:62px;transition:.5s ease-in-out;animation:1500ms ease 0 normal none 1 running shake;animation-iteration-count:infinite;-webkit-animation:1500ms ease 0 normal none 1 running shake;-webkit-animation-iteration-count:infinite}
}
@-webkit-keyframes hoverWave {
0%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 0 rgba(255,212,39,0.2),0 0 0 0 rgba(255,212,39,0.2)}
40%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 15px rgba(255,212,39,0.2),0 0 0 0 rgba(255,212,39,0.2)}
80%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 30px rgba(255,212,39,0),0 0 0 26.7px rgba(255,212,39,0.067)}
100%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 30px rgba(255,212,39,0),0 0 0 40px rgba(255,212,39,0)}
}
@keyframes hoverWave {
0%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 0 rgba(255,212,39,0.2),0 0 0 0 rgba(255,212,39,0.2)}
40%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 15px rgba(255,212,39,0.2),0 0 0 0 rgba(255,212,39,0.2)}
80%{box-shadow:0 8px 10px rgba(255,212,39,0.3),0 0 0 30px rgba(255,212,39,0),0 0 0 26.7px rgba(255,212,39,0.067)}
100%{box-shadow:0 8px 10px rgba(255,212,395,0.3),0 0 0 30px rgba(255,212,39,0),0 0 0 40px rgba(255,212,39,0)}
}
@keyframes shake {
0%{transform:rotateZ(0deg);-ms-transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)}
10%{transform:rotateZ(-30deg);-ms-transform:rotateZ(-30deg);-webkit-transform:rotateZ(-30deg)}
20%{transform:rotateZ(15deg);-ms-transform:rotateZ(15deg);-webkit-transform:rotateZ(15deg)}
30%{transform:rotateZ(-10deg);-ms-transform:rotateZ(-10deg);-webkit-transform:rotateZ(-10deg)}
40%{transform:rotateZ(7.5deg);-ms-transform:rotateZ(7.5deg);-webkit-transform:rotateZ(7.5deg)}
50%{transform:rotateZ(-6deg);-ms-transform:rotateZ(-6deg);-webkit-transform:rotateZ(-6deg)}
60%{transform:rotateZ(5deg);-ms-transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg)}
70%{transform:rotateZ(-4.28571deg);-ms-transform:rotateZ(-4.28571deg);-webkit-transform:rotateZ(-4.28571deg)}
80%{transform:rotateZ(3.75deg);-ms-transform:rotateZ(3.75deg);-webkit-transform:rotateZ(3.75deg)}
90%{transform:rotateZ(-3.33333deg);-ms-transform:rotateZ(-3.33333deg);-webkit-transform:rotateZ(-3.33333deg)}
100%{transform:rotateZ(0deg);-ms-transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)}
}
@-webkit-keyframes shake {
0%{transform:rotateZ(0deg);-ms-transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)}
10%{transform:rotateZ(-30deg);-ms-transform:rotateZ(-30deg);-webkit-transform:rotateZ(-30deg)}
20%{transform:rotateZ(15deg);-ms-transform:rotateZ(15deg);-webkit-transform:rotateZ(15deg)}
30%{transform:rotateZ(-10deg);-ms-transform:rotateZ(-10deg);-webkit-transform:rotateZ(-10deg)}
40%{transform:rotateZ(7.5deg);-ms-transform:rotateZ(7.5deg);-webkit-transform:rotateZ(7.5deg)}
50%{transform:rotateZ(-6deg);-ms-transform:rotateZ(-6deg);-webkit-transform:rotateZ(-6deg)}
60%{transform:rotateZ(5deg);-ms-transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg)}
70%{transform:rotateZ(-4.28571deg);-ms-transform:rotateZ(-4.28571deg);-webkit-transform:rotateZ(-4.28571deg)}
80%{transform:rotateZ(3.75deg);-ms-transform:rotateZ(3.75deg);-webkit-transform:rotateZ(3.75deg)}
90%{transform:rotateZ(-3.33333deg);-ms-transform:rotateZ(-3.33333deg);-webkit-transform:rotateZ(-3.33333deg)}
100%{transform:rotateZ(0deg);-ms-transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)}
}


#about {
    position:relative;
}
#about .h4{
    font-weight:700;
}

/*
#catalog .btn{padding-left:106px}
*/
#catalog .h1 .small{font-size:55%}
#catalog .callback {cursor:pointer!important}
.card{border-radius:1rem;transition-duration:.25s;border-color:transparent;}
#catalog .card img{-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;max-height:250px;}
#catalog .card:hover{box-shadow: rgba(0,0,0,.075) 0 4px 12px!important}
#catalog .card:hover img{-webkit-transform:scale(1.08);-moz-transform:scale(1.08);-o-transform:scale(1.08)}

#catalog .row-cols-lg-4 .card .lead {font-size:1rem;font-weight:400;}


#tech {

    background:#f4f4f4 url(/img/tech/background.jpg) 50% 100% no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    
}
@media (min-width: 992px) {
    #tech { min-height:100vh; }
}
/*
#tech:after {
    position:absolute;
	content:'';
	width: 0;
	height: 0;
	z-index:99;
    bottom:-30px;
	left:calc(50% - 30px);
	border-top: 30px solid #e20000;
	border-left: 30px solid;
	border-right: 30px solid;
	border-left-color:transparent !important;
	border-right-color:transparent !important;
}
*/
#sizes {
    background:#f0f0f0;
    overflow:hidden;
}

#schetkaLeft,
#schetkaRight {
    position:absolute;
	width: 600px;
	height: 600px;
}

#schetkaLeft {
	left:-300px;
	background:url(/img/sizes/schetka-p.png) 50% 50% no-repeat;
}

#schetkaRight {
	right:-300px;
	background:url(/img/sizes/schetka-m.png) 50% 50% no-repeat;
}

#schetkaLeft.position-top,
#schetkaRight.position-top {
    top:0;
}
#schetkaLeft.position-fixed,
#schetkaRight.position-fixed {
    top:calc(50% - 300px);
}
#schetkaLeft.position-bottom,
#schetkaRight.position-bottom {
    bottom:0;
}

#sizes table button {
    padding: 0.4rem 0.8rem;
    padding-left:2.5rem;
    position:relative;
    
}
#sizes table button:before {
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    left:12px;
    top:calc(50% - 12px);
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="rgb(255,255,255)" class="bi bi-cart2" viewBox="0 0 16 16"><path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/></svg>') 50% 50% no-repeat;
}

@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotation {
    0% {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);-moz-transform:rotate(720deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}

.modal-body .btn-close {
    position:absolute;
    top:1rem;
    right:1rem;
}
.modal-content {
    border-radius:1rem;
}


#advantages{background:url(/img/advantages/background.jpg) 50% 50% no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
#advantages:before{background-color:rgba(0,0,0,0.75);width:100%;height:100%;position:absolute;top:0;left:0;display:block;content:'';}
#advantages .h4 {font-weight:700;}

#howBuy .step{
    font-weight: 500;
    font-size: 3.125rem;
    line-height: 1;
    border-radius: 1rem;
    text-align: center;
    width:1.2em;
    padding-top:0.1em;
    padding-bottom:0.1em;
    color:#e20000;
    box-shadow:2px 2px 10px rgba(0,0,0,0.2);
    background-color:#fff;
}
#howBuy .h4 {font-weight:700;}

#contacts a {color:#fff;}
#contacts .h2 {font-weight:700;}
#contacts .h5 {font-weight:300;}
#contacts iframe {min-height:300px;}

#map {
    position:absolute;
    left:-10%;
    top:-10%;
    width:120%;
    height:120%;
    filter: brightness(30%);
	-ms-filter: brightness(30%);
	-webkit-filter: brightness(30%);
	-moz-filter: brightness(30%);
	-o-filter: brightness(30%);
}

footer a {
    color:rgba(255,255,255,0.5);
    text-decoration:underline;
}

.stroke-up:after, .stroke-down:after {height:70px;width:100%;display:block;position:absolute;left:0;content:''}
.stroke-up:after{background:url(/img/bg-stroke.png) 0 0 repeat-x;top:-70px}
.stroke-down:after{background:url(/img/bg-stroke.png) 100% -70px repeat-x;top:0px;}

.stroke-2:before{background:url(/img/bg-stroke-2.png) 0 0 repeat-x;height:50px;width:100%;display:block;position:absolute;top:-50px;left:0;content:'';z-index:999}
.stroke-2:after{background:url(/img/bg-stroke-2.png) 50% -50px repeat-x;height:50px;width:100%;display:block;position:absolute;bottom:-50px;left:0;content:'';z-index:999}
.stroke-3:before{background:url(/img/mask.png) 0 0 repeat-x;height:56px;width:100%;display:block;position:absolute;top:-56px;left:0;content:'';z-index:999}
.stroke-3:after{background:url(/img/mask.png) 0 -56px repeat-x;height:34px;width:100%;display:block;position:absolute;bottom:-34px;left:0;content:'';z-index:999}
/*
.gradient:before{background:url(/img/bg-gradient.png) 0 0 repeat-x;height:30px;width:100%;display:block;position:absolute;top:-30px;left:0;content:'';z-index:999}
.gradient:after{background:url(/img/bg-gradient.png) 50% -30px repeat-x;height:30px;width:100%;display:block;position:absolute;bottom:-30px;left:0;content:'';z-index:999}
.gradient-2:before{background:url(/img/bg-gradient-2.png) 0 0 repeat-x;height:50px;width:100%;display:block;position:absolute;top:-50px;left:0;content:'';z-index:999}
.gradient-2:after{background:url(/img/bg-gradient-2.png) 50% -50px repeat-x;height:50px;width:100%;display:block;position:absolute;bottom:-50px;left:0;content:'';z-index:999}
*/
.parallel:before,
.parallel:after {
    position:absolute;
    content:'';
    height:0;
    border-left:3rem solid transparent;
    border-right:3rem solid transparent;
}
.parallel:before{
    border-bottom:3rem solid #fff;
    top:-3rem;
    left:10%;
    right:10%;
}
.parallel:after{
    border-top:3rem solid #fff;
    bottom:-3rem;
    left:15%;
    right:15%;
    z-index:1;
}

/*
.triangle-top:before{width:0;height:0;border-bottom:60px solid rgba(215,215,215,0.5);border-left:1200px solid transparent;border-right:100px solid transparent;position:absolute;content:'';top:-60px;right:100px;z-index:997}
.triangle-bottom:after{width:0;height:0;border-top:50px solid rgba(215,215,215,0.5);border-left:100px solid transparent;border-right:1200px solid transparent;position:absolute;content:'';bottom:-50px;left:100px;z-index:997}
.triangle-up:before{width:0;height:0;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:40px solid rgba(255,255,255,1);position:absolute;content:'';top:-40px;margin-left:-80px;left:50%;z-index:997}
.triangle-down:after{width:0;height:0;border-left:100px solid transparent;border-right:100px solid transparent;border-top:50px solid rgba(255,255,255,1);position:absolute;content:'';bottom:-50px;margin-left:-100px;left:30%;z-index:997}

.triangle-tl:before{width:0;height:0;border-bottom:100px solid rgba(255,255,255,0.75);border-right:1000px solid transparent;position:absolute;content:'';top:-100px;right:0;z-index:997}
.triangle-tr:before{width:0;height:0;border-bottom:100px solid rgba(255,255,255,0.75);border-left:1000px solid transparent;position:absolute;content:'';top:-100px;right:0;z-index:998}
.triangle-bl:after{width:0;height:0;border-top:100px solid rgba(255,255,255,0.75);border-right:1000px solid transparent;position:absolute;content:'';bottom:-100px;left:0;z-index:997}
.triangle-br:after{width:0;height:0;border-top:100px solid rgba(255,255,255,0.75);border-left:1000px solid transparent;position:absolute;content:'';bottom:-100px;left:0;z-index:997}
*/

/*
    https://habr.com/ru/post/126207/
*/

.triangle-up:before,
.triangle-down:after,
.triangle-tl:before,
.triangle-tr:before,
.triangle-bl:after,
.triangle-br:after
{
    position:absolute;
	content:'';
	width: 0;
	height: 0;
	z-index:99;
}

.triangle-up:before {
	top:-30px;
	left:calc(50% - 30px);
	border-bottom: 30px solid white;
	border-left: 30px solid;
	border-right: 30px solid;
	border-left-color:transparent !important;
	border-right-color:transparent !important;
}

.triangle-down:after {
	bottom:-30px;
	left:calc(50% - 30px);
	border-top: 30px solid white;
	border-left: 30px solid;
	border-right: 30px solid;
	border-left-color:transparent !important;
	border-right-color:transparent !important;
}

.triangle-left:before {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-right: 30px solid red;
	border-bottom: 30px solid transparent;
}

.triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}

.triangle-tl:before {
    top:0;
	border-top: 10vh solid red; 
	border-right: 100vw solid;
	border-right-color: transparent !important;
}

.triangle-tr:before {
    top:0;
	border-top: 10vh solid red;
	border-left: 100vw solid;
	border-left-color: transparent !important;
}

.triangle-bl:after {
    bottom:0;
	border-bottom: 10vh solid red;
    border-right: 100vw solid;
	border-right-color: transparent !important;
}

.triangle-br:after {
	bottom:0;
	border-bottom: 10vh solid red;
    border-left: 100vw solid;
	border-left-color: transparent !important;
}


.triangle-up-primary:before,
.triangle-down-primary:after
{
    border-color:#009D91;
}

.triangle-tl-primary:before,
.triangle-tr-primary:before,
.triangle-bl-primary:after,
.triangle-br-primary:after
{
    border-color:rgba(0, 157, 145, 0.15);
    border-color:#009D91;
}

/* ===== FIX iPhone Safari + mobile header (spetstros.ru) ===== */
html{ -webkit-text-size-adjust:100% !important; }
html, body{ max-width:100% !important; overflow-x:hidden !important; }

@media (max-width: 991.98px){

  /* Убираем "раздувание" от py-4 на мобильных и задаём нормальную высоту */
  #pageNav.navbar.fixed-top{
    padding-top: calc(env(safe-area-inset-top) + 6px) !important;
    padding-bottom: 6px !important;
    min-height: 72px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Выравниваем содержимое шапки */
  #pageNav.navbar.fixed-top > .container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  /* Логотип больше, но контролируемый */
  #pageNav .navbar-brand{
    padding:0 !important;
    margin:0 !important;
  }
  #pageNav .navbar-brand img.img-fluid{
    max-height: 44px !important;
    width:auto !important;
    height:auto !important;
    display:block !important;
  }

  /* Бургер компактнее и по центру */
  #pageNav .navbar-toggler{
    padding:.25rem .5rem !important;
    line-height:1 !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    align-self:center !important;
  }

  /* Компенсация fixed-top */
  body{
    padding-top: 84px !important;
  }
}



/* ===== spetstros.ru: полупрозрачный чёрный фон шапки при прокрутке (DESKTOP) ===== */
@media (min-width: 992px){

  /* Шапка изначально прозрачная */
  #pageNav{
    background-color: transparent !important;
    transition: background-color .25s ease, backdrop-filter .25s ease;
  }

  /* При прокрутке сайт сам добавляет navbar-shrink — используем его */
  #pageNav.navbar-shrink{
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 10px 10px rgba(0,0,0,0.12) !important;
  }

  /* Делаем текст/ссылки белыми, чтобы читалось на чёрном фоне */
  #pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus,
  #pageNav.navbar-shrink .phone{
    color: #fff !important;
  }

  #pageNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover{
    color: rgba(255,255,255,0.85) !important;
  }
}

@media (min-width: 992px){
  #pageNav.navbar-shrink{
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background-image: none !important;
  }
}

/* ================================
   ФОН ШАПКИ ПРИ ПРОКРУТКЕ (DESKTOP)
   ================================ */
@media (min-width: 992px){

  /* сама шапка */
  #pageNav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
  }

  /* затемняющий слой */
  #pageNav::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* чтобы логотип и меню были поверх фона */
  #pageNav > .container,
  #pageNav > .container-fluid{
    position: relative;
    z-index: 1;
  }

  /* ВОТ ГЛАВНОЕ:
     сайт САМ добавляет navbar-shrink при скролле */
  #pageNav.navbar-shrink::before{
    opacity: 1;
  }

  /* делаем текст читаемым на чёрном фоне */
  #pageNav.navbar-shrink .nav-link,
  #pageNav.navbar-shrink .phone{
    color: #fff !important;
  }
}

@media (min-width: 992px){
  #pageNav{
    background: transparent !important;
  }
  #pageNav.navbar-shrink{
    background: red !important;  /* ТЕСТ: должно стать КРАСНЫМ при скролле */
  }
}

@media (min-width: 992px){
  #pageNav{ transition: background-color .25s ease, backdrop-filter .25s ease; }
}

/* ===== DESKTOP: всегда читаемая шапка (без JS) ===== */
@media (min-width: 992px){
  #pageNav{
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background-image: none !important;
    transition: background-color .25s ease, backdrop-filter .25s ease;
  }

  /* чтобы ссылки/телефон читались на тёмном фоне */
  #pageNav .nav-link,
  #pageNav .phone{
    color: #fff !important;
  }
  #pageNav .nav-link:hover{
    color: rgba(255,255,255,0.85) !important;
  }
}

/* ===== spetstros.ru: цвет текста меню (DESKTOP) ===== */
@media (min-width: 992px){

  /* пункты меню */
  #pageNav .nav-link{
    color: #111 !important;
  }

  #pageNav .nav-link:hover{
    color: #000 !important;
  }

  /* телефон */
  #pageNav .phone{
    color: #111 !important;
  }
}

/* ===== spetstros.ru: пункты меню крупнее и жирнее (DESKTOP) ===== */
@media (min-width: 992px){

  #pageNav .navbar-nav .nav-link{
    font-size: 20px;      /* было ~14–15 */
    font-weight: 600;    /* semibold */
    letter-spacing: 0.02em;
  }
}

/* ===== spetstros.ru: MOBILE бургер-меню с фоном + blur ===== */
@media (max-width: 991.98px){

  /* 1) Шапка на мобилке всегда выделена */
  #pageNav{
    background: rgba(20,20,20,0.78) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    background-image: none !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.18) !important;
  }

  /* 2) Кнопка бургера читабельная */
  #pageNav .navbar-toggler{
    border-color: rgba(255,255,255,0.35) !important;
  }
  #pageNav .navbar-toggler-icon{
    filter: invert(1) opacity(.9) !important;
  }

  /* 3) Выпадающее меню: подложка + blur */
  #pageNav .navbar-collapse{
    margin-top: 12px;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(20,20,20,0.78) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* 4) Пункты меню — как у тебя, просто делаем визуально аккуратно */
  #pageNav .navbar-nav .nav-link{
    color: #fff !important;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 6px;
  }

  /* разделители между пунктами */
  #pageNav .navbar-nav .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,0.10);
  }

  /* телефон (если показывается) */
  #pageNav .phone{
    color: #fff !important;
  }
}

@media (max-width: 991.98px){

  /* рамка кнопки */
  #pageNav .navbar-toggler{
    border-color: rgba(0,0,0,0.35) !important;
    background: rgba(255,255,255,0.65);
  }

  /* тёмно-серые полоски */
  #pageNav .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>\
      <path stroke='rgba(60,60,60,0.9)' stroke-width='2.4' stroke-linecap='round'\
      d='M4 7h22M4 15h22M4 23h22'/>\
      </svg>") !important;
  }

}