@font-face {
    font-family: "GothamPro";
    src: url("./fonts/GothaProReg.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "GothamPro";
    src: url("./fonts/GothaProMed.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "GothamPro";
    src: url("./fonts/GothaProBol.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "GothamPro";
    src: url("./fonts/GothaProBla.otf") format("opentype");
    font-style: normal;
    font-weight: 900;
}

* { margin: 0; padding: 0; }
html, body { position: relative; height: 100%;  }
body {    font-family: "GothamPro";  font-size: 14px; min-width: 1170px; background:#fff; }
img { border: none; }
input { color: #868686; font-size: 15px;  }
h2 { 
    font-size: 35px;
    font-weight: 900;
    line-height: 45px;
    color: #494949;
    text-transform: uppercase;
    text-align: center; 
}

.important {
    color: #c01218;
}

h2 span { color: #c01218; }
.clr { clear: both; }
.center_945 { width: 945px; margin: 0 auto; }
.center_1140 { width: 1140px; margin: 0 auto; }
.center_1100 {
    width: 1100px;
    margin: 0 auto;
}
.hide { display: none; }

h3 { font-size: 24px;
    line-height: 30px;
    color: #494949;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
 }


.animatedBorder {
position: relative;
}
#onpbxcb__container
{    z-index: 99999;
    position: relative;}



.on_map_address .r0 {
  padding: 0px 0 0 20px;
  font-size: 16px;
  color: #353535;
  line-height: 18px;
}



/*=============================================
	header 
 =============================================*/
.header {
    background:  url('images/header-bg.jpg') center top no-repeat;
    padding-bottom: 40px;;
}


.top {
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
    align-items: top;
}

 .top__left-wrapper {
    display: flex;
 }

.logo {
    width: 230px;
    height: 54px;
    background: url('images/logo.png') no-repeat center left;
    background-size: contain;
}

.logo-description {
    margin: 10px 30px 0 11px;
    font-size: 18px;
}

.basis {
    /* font-weight: bold; */
    font-family: 'Open Sans', sans-serif;
}
.egger {
    color: #cb0027;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

.header__addres { display: inline-block; vertical-align: top;
  border-left: 1px solid #c01218;
  padding-left: 30px;
}
 
.addres {
    margin: 3px 0;
    max-width: 400px;
}
.header__addres .r1 { color: #494949;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
}

.header__addres .r2 { color: #494949;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    padding-left: 20px;
    background: url('images/pin.png') left top no-repeat;
}

/* phone block */ 
.header__phone {
  text-align: left;
}
.header__phone .r0 {  padding: 2px 10px 0 0; font-size: 18px; line-height: 24px; color: #FFF; font-weight: 700; text-transform:uppercase;}
.header__phone .r1 {
  color: #c01218;
font-size: 28px;
font-weight: 900;
line-height: 21px;
margin: 10px 0;
padding-left: 25px;
background: url('images/phone.png') left 0px no-repeat;
}
.header__phone .r1 a {color: #c01218; text-decoration: none;  }
.header__phone .r2 {
  color: #494949;
font-size: 16px;
font-weight: 500;
line-height: 19px;
}

.header__phone .r3 {
    color: #494949;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    padding-left: 25px;
    background: url('images/clock.png') left center no-repeat;
}

.header__phone .r4 {
    color: #494949;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    padding-left: 25px;
    background: url('images/mail.png') left center no-repeat;
    font-weight: normal;
    color: black
}

.header__phone .r4 a {
    font-weight: normal;
}

.header__phone .l_phone {float:left;padding-left:10px;}

.header__buttons { display: flex; flex-direction: row;     gap: 144px;
    margin-top: 86px; gap: 40px; justify-content: center; align-items: center}

.header__buttons .submit {
    max-width: 360px; 
}

/* left txt */
.header_text {  padding: 90px 0 0 0px;  
  }
.header_text .r1 {
    color: #494949;
    font-size: 40px;
    font-weight: 900;
    line-height: 55px;
    text-align: center;
}

.header_text .r2 {
    color: #494949;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.4em;
    text-align: center;
}

.header .submit p { display: inline-block; vertical-align: top; }
.submit .circle { display: inline-block; vertical-align: top; margin-top: 0; display: flex
    ;
        justify-content: center;
        align-items: center;}
.header .submit p span { font-size: 14px; text-align: center; }

.header ul { list-style: none; text-align: center; display: flex;
    justify-content: center;
    flex-wrap: wrap; padding-top: 70px; }
.header li { width: 33%; margin-bottom: 70px; }

.header .div1 { height: 65px; }
.header ul li .div2 {
padding-top: 25px; }
.header ul li .div2 .r1 { color: #494949;
font-size: 18px;
font-weight: 900;
line-height: 1.4em;
text-transform: uppercase; }
.header ul li .div2 .r2 { color: #494949;
font-size: 16px;
font-weight: 400;
line-height: 23px;
padding-top: 20px; }
.header .i1 { background-image: url('images/item5.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain;}
.header .i2 { background-image: url('images/item4.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain;}
.header .i3 { background-image: url('images/item6.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
.header .i4 { background-image: url('images/item3.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
.header .i5 { background-image: url('images/item1.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
.header .i6 { background-image: url('images/item2.png');  background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
	



/*=============================================
request
=============================================*/
.akc { background:  url('images/akc-bg.jpg') center top no-repeat; height: 395px;  }
.request_callback { }
.request_callback_style { margin: 0px 0 20px 0; } 

.request_callback .r1 {  
	padding: 30px 0 5px 0; font-size: 22px;  font-weight: 700;  line-height: 29px; color: #fff; text-align: center; text-transform: uppercase; }

.request_callback .r1 span { color:#ff7300; }	
.request_callback .r1 a { color:#ff7300; text-decoration: none;
}
	
.zv {     
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    line-height: 20px; }

.inputs { padding: 0px 0 0px 0px; margin: 0 auto; width: 436px;  
	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;    }
	
.input_text input {font-weight: 400;color: #868686; background: none; width: 100%; height: 70px;   border: none; outline: none; padding-left: 40px;  }
.input_text input::-webkit-input-placeholder {  color: #868686; font-size: 15px;  }
.input_text input::-moz-placeholder { /* Firefox 19+ */  color: #868686; font-size: 15px; }
.input_text input:-ms-input-placeholder {   color: #868686; font-size: 15px; }
.input_text input:-moz-placeholder { /* Firefox 18- */  color: #868686;  font-size: 15px;}

.border {
    border-radius: 35px !important;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.25) !important;
}

input[type="text"] {font-weight: 400;color: #868686; background: none; width: 100%; height: 70px;   outline: none; padding-left: 40px;  }
input[type="text"]::-webkit-input-placeholder {  color: #868686; font-size: 15px;  }
input[type="text"]::-moz-placeholder { /* Firefox 19+ */  color: #868686; font-size: 15px; }
input[type="text"]:-ms-input-placeholder {   color: #868686; font-size: 15px; }
input[type="text"]:-moz-placeholder { /* Firefox 18- */  color: #868686;  font-size: 15px;}


.request_callback .input_text 
{ width: 100%;   height: 70px; background-color: white; margin: 0 0 10px 0; 
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.25);
-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;
position: relative;  } 

.button-offer { font-size: 24px; margin: 0px 0 0 26px;   } /* for a awesome arrow*/
.submit {
    display: flex;
    height: 70px; 
	width: 100%;
    line-height: 70px;
    font-family: GothamPro;
    font-size: 15px;
    font-weight: 500;
    border-radius: 35px;
	border: 0px solid #c01218;
    color: #fff !important;
	/* text-shadow: 0.03em 0.03em 0.03em #333; */
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #c01218;
    background-image: linear-gradient(to top, #af0e13  0%, #cf3c41  100%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.32), 0 3px 0 #b11116, 2px 8px 29px #c01218;
	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;   
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.submit:hover  {
    background-image: linear-gradient(to top, #a0070c 0%, #cf3c41 100%);
}

.submit .circle { width: 40px;
height: 40px;
color: #c01218;
background-color: white;
/* box-shadow: inset 0 4px 9px rgba(123, 12, 15, 0.33); */
border-radius: 50px;
float: right;
margin-right: 10px; }



/*=============================================
   work
=============================================*/
.work {
    background: url('images/work-bg.jpg') center top no-repeat;
    -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;
    margin-top: -44px;
    padding: 0px 0 130px 0;
}

.work h2 { padding: 140px 0 80px 0; }
.work ul { display: inline-block; vertical-align: top; width: 49%; }
.work ul li { color: #494949;
font-size: 18px;
font-weight: 400;
line-height: 25px;  list-style: none;
  background:  url('images/li.png') no-repeat;
  background-position:  left top 4px; 
  padding: 0px 0 0px 50px; margin: 0px 0px 25px 0; }

/*=============================================
  kons
=============================================*/
.kons { height: 704px;
  background: url('images/kons-bg.jpg') center bottom no-repeat; 
  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;
  position: relative; overflow: hidden;
  margin-top: -193px; }
.kons h2 {   color: white;
font-size: 40px;
font-weight: 900;
line-height: 55px;  padding: 280px 0 40px 0;
text-align: left; }
.kons .inputs { margin-left: 0; }
.kons .men1 { background: url('images/men1.png') center top no-repeat; width: 634px; height: 704px;
position: absolute;
margin-left: 620px; }

/*=============================================
  help
=============================================*/
.help { height: 691px;
  background: url('images/help-bg.jpg') center bottom no-repeat; 
  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;
  position: relative; overflow: hidden;
  margin-top: -79px;
 }
.help h2 {   color: white;
font-size: 40px;
font-weight: 900;
line-height: 55px;  padding: 170px 0 30px 0;
text-align: left; }

.help__wrapper
{
    max-width: 550px;
}
.help .r1 { color: white;
font-size: 23px;
font-weight: 500;
line-height: 33px;
padding-bottom: 25px; }
.help .r1 a { text-decoration: none; color: white; font-size: 30px;
font-weight: 900; }
.help .r1 span { font-weight: 900; }
.help .inputs { margin-left: 0; }
.help .men2 { background: url('images/men2.png') center top no-repeat; width: 699px; height: 691px;
position: absolute;
margin-left: 550px; }

/*=============================================
  preim
=============================================*/
.preim {
  background: url('images/preim-bg.jpg') center top no-repeat; 
  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 60px 0}
.preim h2 {     padding: 90px 0 70px 0; }
.preim ul { list-style: none; text-align: center; display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
.preim li { width: 45%; margin-bottom: 40px; }

.preim .div1 { height: 112px; }
.preim ul li .div2 {  color: #494949;
font-size: 16px;
font-weight: 400;
line-height: 22px;
padding-top: 20px; }
.preim .i1 { background-image: url('images/preim1.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}
.preim .i2 { background-image: url('images/preim2.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}
.preim .i3 { background-image: url('images/preim3.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}
.preim .i4 { background-image: url('images/preim4.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}
.preim .i5 { background-image: url('images/preim5.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}
.preim .i6 { background-image: url('images/preim6.png');  background-position: center 0px; background-repeat: no-repeat; background-size: contain;}


/*=============================================
  gar
=============================================*/
.gar {
  background: url('images/gar-bg.jpg') center top no-repeat; 
  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 0 70px 0}
.gar h2 {     padding: 90px 0 45px 0; }
.gar ul { list-style: none; text-align: center; display: flex;
    justify-content: center;
    flex-wrap: wrap; }

.sert-grid__item img {
    height: 350px;
}

/*=============================================
   katalog
=============================================*/
.katalog {
    background: #fff;
    margin: 0px 0 135px 0;
}
.katalog h2 {
    
    padding: 90px 0px 40px 0px;
}
   .tabs {
    position: relative; /* Относительное позиционирование */
    height: 700px;
   }
   .tab { margin-right: 25px; }
   .tab:last-child { margin-right: 0; }
   .tab, .tab-title {
    display: inline-block; /* Выстраиваем по горизонтали */
   }
   .tab input[type="radio"] { display: none; }
   .tab-title {
width: 293px;
height: 64px;
border: 1px solid #b7b7b7;
border-radius: 32px;
cursor: pointer;
   }
 .tab-title p { color: #494949;;
font-size: 18px;
font-weight: 500;
line-height: 18px;
text-align: center;
padding-top: 14px; }
.tab-title p span { opacity: 0.6; font-size: 14px; font-weight: 400; }
  .tab :checked +  .tab-title p { color: white;
font-size: 18px;
font-weight: 500;
line-height: 18px;
text-align: center;
padding-top: 14px; }
.tab :checked + .tab-title p span { opacity: 0.6; font-size: 14px; font-weight: 400; }
   .tab-content {
    position: absolute; /* Абсолютное позиционирование */
    padding-top: 50px;
    left: 0; /* Размещаем у левого края */
    width: calc(100% - 20px); /* Ширина содержимого */
    display: none; /* Прячем вкладку */
   }
   .tab :checked + .tab-title {
    width: 293px;
height: 64px;
background-color: #c01218;
background-image: linear-gradient(to top, #c01218 0%, #26703e 100%);
border-radius: 32px;
    top: 1px; /* Сдвигаем вниз */
    z-index: 1; /* Отображаем поверх содержимого */
   }
   .tab :checked ~ .tab-content {
    display: block; /* Показываем активную вкладку */
   }
.youtube {
    border-radius: 5px;
    background-color: #494949;
    position: relative;
    padding-top: 66%;
    overflow: hidden;
    cursor: pointer;
}
.katalog .left-block { display: inline-block; vertical-align: top; width: 457px; }
.katalog .right-block { display: inline-block; vertical-align: top; width: 400px; padding-left: 60px; }
.katalog h3 { color: #494949;
font-size: 30px;
font-weight: 700;
line-height: 45px;
margin-top: -10px; }
.katalog .text { color: #494949;
font-size: 16px;
font-weight: 400;
line-height: 22px;
padding-top: 30px; }

.katalog .submit { width: 436px; margin: auto; margin-top: 30px;}




/*=============================================
on_map
=============================================*/
.form-bottom {
    padding: 45px 0;
    background: #023467;
}

.on_map_address .r3 a
{
    font-weight: normal;
}
.on_map {
    margin: 0;
    background-color: #fff;
    overflow: hidden;
}

.maps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#map-canvas,
#map-canvas2 {
    height: 608px;
    padding: 0px 0 0px 0;
    overflow: hidden;
    transform: translateZ(0px);
}


.on_map .center_1140 {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.on_map_address {
    position: absolute;
    right: 0px;
width: 458px;
background-color: white;
border-radius: 5px;
box-shadow: 0 8px 60.8px 1.2px rgba(0, 0, 0, 0.46);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 120px;
    padding-left: 50px;
    padding: 30px 20px 30px 50px;
}

.on_map h2 {
    line-height: 120px;
}

.on_map_address .r1 {
    margin: 15px 0 0px 0px;
    padding-left: 25px;
color: #494949;
font-size: 14px;
font-weight: 400;
line-height: 19px;
    background: url('images/pin.png') left 2px no-repeat;
}

.on_map_address .r3 {
    margin: 15px 0 0px 0px;
    padding-left: 25px;
color: #494949;
font-size: 14px;
font-weight: 400;
line-height: 19px;
    background: url('images/mail.png') left 3px no-repeat;
}

.on_map_address .r2 {
    margin: 15px 0 0 0px;
    padding-top: 5px;
    padding-left: 30px;
color: #c01218;
font-size: 25px;
font-weight: 900;
line-height: 21px;
    background: url('images/phone.png') left 4px no-repeat;
    height: 31px;
}

.on_map_address .r2 a {
    color: #c01218;
    text-decoration: none;
}

.on_map_address .r5 {
    margin: 15px 0 0 0px;
    padding-left: 25px;
color: #494949;
font-size: 14px;
font-weight: 400;
line-height: 19px;
    background: url('images/clock.png') left 0px no-repeat;
}

.on_map_address .r6 {
    color: #494949;
font-size: 18px;
font-weight: 700;
line-height: 23px;
text-transform: uppercase;
    text-transform: uppercase;
}
	
/*=============================================
	footer
=============================================*/
.footer-logo-bg {  
   padding-top: 20px; width: 100%; height: 400px; background: url('images/footer-bg.jpg') center top  no-repeat; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; 
 position: relative;   }


/* --- to top ---- */
.footer-logo-bg .scroll_top { display: block; position: absolute; right: -80px; top: 100px; width: 68px; height: 68px;  background: url('images/page-up.png') no-repeat; text-decoration: none; z-index: 600; }
.footer-logo-bg .scroll_top:hover {  right: -79px; background: url('images/page-up-hover.png') no-repeat;}
.footer-logo-bg .center_960 { position: relative;
     /* Переход */
	-webkit-transition: 1.2s all;
	-moz-transition: 1.2s all;
	transition: 1.2s all;
	-o-transition: 1.2s all;
 }
 


/*=============================================
   request_callback2
=============================================*/
.formblock2 {
    background: url('images/footer-bg.jpg') center top no-repeat;
    padding: 130px 0;
    text-align: center;
}
.formblock2 h2 {
    
    font-size: 40px;
    font-weight: 900;
    line-height: 55px;
    color: #494949;
}

.formblock2 h2 span { color: #c01218; }

.formblock2__phone
{
    display: block;
    margin-top: 40px;
    color: #c01218;
    font-size: 40px;
}


/*=============================================
	footer-copyright
=============================================*/
.footer_bot { height: 100px; }

.footer-copyright {
 
float: left;
padding: 35px 0 0 9px;
font-size: 14px;
color:#1c2632;
height: 35px;
}

.footer-copyright .logo { width: 160px; height: 40px;
background: url('images/logo.png') center top no-repeat; background-size: contain;}


.creator {
float: right;
padding: 25px 30px 0px 0;
font-size: 14px;
color: #494949;
 
}

.adtrust_logo {
display: inline-block;
width: 126px;
height: 51px;
margin-left: 6px;
vertical-align: middle;
background: url('images/logo-adtrust.jpg');
text-decoration: none;

}


.portfolio__grid  {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    gap: 5px;
}
  
.portfolio__grid-item {
    height: 27vh;
    flex-grow: 1;
}

.portfolio__grid-item img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}