:root {
    --primary-text-color: #333;
    --secondary-text-color: #333333bb;
    --primary-link-color: #2b5876;
    --blue-bright-color: #3f2aff;
    --darkBG-color: #0d0b1a96;
    --darkBG-transparent-color: #1c1c1cd1;
    --reverse-link-color: #fff;
    --reverse-text-color: #fff;
    --yellow-color: #ffcc00;
    --yellow-light-color: #ffcc008f;
    --orange-color: #ff6900;
    --primary-color: #1a5d79;
    --secondary-color: #f8c81d;
    --green-color: #22840c;
    --gray-BG-color: #f5f5f5;
    --rose-BG-color: #fff6e6;
    --bluegray-box-shadow: 0 4px 20px 0 rgba(0,0,0,.1),0 4px 4px 0 rgba(0,0,0,.04);
    --blue-gray-BG-color: #e2dff;
    --midle-gray-color: #242424;
    --light-gray-BG-color: #F7F7F5;
    --blue-gray-BG2-color: #F8FCFF;
  }
  /* * {
    border: 1px solid red
  } */


body {
    font-family: 'Open Sans', Tahoma, Verdana, sans-serif;
    font-size: 16px;
}

.show {
    opacity: 1;
}

details { 
    cursor: pointer;
    position: relative;
 }

details summary { 
    list-style-image: url("../img/icons/location-mark-mini.png");
    background-size: 20px;
}

details summary { 
    position: relative;
    transition: all .1s ease-out; 
    font-size: 12px;
}
details summary:hover { 
    opacity: .7;
}


details summary::before{
    content: '';
    background: url("../img/icons/location-mark.png"); 
    position:absolute;
    top:0px;
    left:0px;
}

details[open] div.details_content {
    position: absolute;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    z-index: 11;
    background-color: rgba(53, 54, 82, 0.873);
    height: 300px;
    overflow-y: scroll;
    top: 60px;
    border-radius:0 0 5px 5px;
}

details p {
    margin: 20px;
    color: rgb(222, 222, 222);
    text-transform: uppercase;
    font-weight: bold;
}

details ul {
    width: 100%;
}

details li a {
    padding: 10px 15px;
    background-color: rgba(27, 27, 27, 0.449);
    color: rgb(255, 255, 255);
    display: inline-block;
    width: 100%;
    transition: all .1s ease-out;
}

details li a:hover {
    background-color: rgba(12, 12, 12, 0.449);
    color: rgb(241, 241, 241);
    transition: all .1s ease-out;
}
.mobile,
.lazyMobile {
    display: none;
}
.lazyMobile1 {
    height: 0;
    opacity: 0;
}


.wrapper {
    background-color: #fff;
    background-image: url("../img/bg/fence-firstBG.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top 0 right 0;
    height: 100%;
    margin-top: -95px;
    padding-top: 95px;
}
main {
    background-image:url("../img/bg/background.jpg");
    background-repeat: no-repeat;
}
.colorBG {
    background-image:url("../img/bg/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 0 bottom 0;
}
.color2BG {
    background-color: var(--blue-gray-BG2-color);
}
.colorImgFence {
    background-image:url("../img/bg/dark-bg-fence.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 0 bottom 0;
}
.colorImgScrewdriver {
    background-image:url("../img/extra/screwdriver.png");
    background-repeat: no-repeat;
    background-position: left 0 top 0;
}
.colorImgScrews {
    background-image:url("../img/extra/srews.png");
    background-repeat: no-repeat;
    background-position: left 0 top 0;
}
.colorDark {
    background-color: var(--darkBG-transparent-color);
}
.wideContainer {
    width: 100%;
}

.container {
    width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
a.phoneLink {
    display: inline-block;
    color: #2b5876;
    margin: 30px auto;
    text-align: center;
    font-size: 30px;   
}
a.phoneLink:hover {
    display: inline-block;
    color: #1f3e53;
    margin: 30px auto;
    text-align: center;
    transition: all .1s ease-out;   
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

header.active {
    background-color: #fffffff5;
    margin-bottom: 30px;
    box-shadow: 0px 0px 30px #333;
}

.header__box {
    position: relative;    
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 3px dotted #35633b;
}
header.active .header__box {
    border-bottom: none;
}
.header__menu {
    position: absolute;
    top: 100%;
    left: 30%;
    color: #fff;
    z-index: -10;
    opacity: 0;   
    display: none;
    flex-wrap: wrap;
    z-index: 10;
    background-color: rgba(53, 54, 82, 0.873);
    border-radius:0 5px 5px 0;
}
.header__menuBtn {
    text-align: center;
    cursor: pointer;
    transition: all .2s ease-out;
  }
  .header__menuBtn:hover {
    opacity: .7;
  }

.header__menu a {
    padding: 10px 15px;
    background-color: rgba(27, 27, 27, 0.449);
    color: rgb(255, 255, 255);
    display: inline-block;
    width: 100%;
    cursor: default;

}

.header__menu a:hover{
    background-color: rgba(12, 12, 12, 0.449);
    color: rgb(241, 241, 241);
    transition: all .2s ease-out;
}


.header__menu.active {
    z-index: 10;
    opacity: 1;
    display: flex;
}
.header__menu.active a{
    cursor: pointer;
}

.header__info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    flex-direction: row;
    padding: 30px 0 20px 0;  
    align-items:center;
    
}
header.active .header__info {
    padding: 20px 0 15px 0;
}
.header__logoPart,
.header__contacts {
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    flex-direction: row;
}

.header__logoPart>div {
    width: 50%;
    font-size: 14px;
}

.header__phone {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;

}

.header__phoneImg img {
    max-width: 40px;
    height: auto;
    margin: 0 30px;
    cursor: pointer;
    transition: all .2s ease-out;
}

.header__phoneNumber {
    display: flex;
    align-items: center;
    transition: all .2s ease-out;
}
 
.header__phoneNumber a {
    text-decoration: none;
    color: #2b5876;
    font-size: 18px;
    font-weight: bold;
    transition: all .1s ease-out; 
}
.header__phoneNumber:hover,
.header__phoneImg img:hover {
    opacity: .7;
}

.firstScreen {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 200px auto 400px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.firstScreen__heightBox,
.firstScreen__finishBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.firstScreen__heightBox{
    flex-direction: row;
}
.firstScreen__goodsOffer {
    width: 60%;
}

.firstScreen__title {
    font-size: 90px;
    line-height: 1;
    color: #333;
    font-weight: bold;
    padding-bottom: 15px;
}

.firstScreen__img {
    width: 100%;
    margin: 0 auto;
   
}
.firstScreen__img img{
    width: 80%;
    max-width: 255px;
}
.firstScreen__img figure {
    display: flex;
    flex-direction: column-reverse;
    margin: 45px auto;
}

.firstScreen figcaption {
    color: #3c7957;
    font-size: 29px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 10px 10px 10px #3c79574d;;
    margin-bottom: 45px;
}

.firstScreen__priceBox{
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 40%;
}

.firstScreen__priceOffer{
    color: rgb(254, 254, 43);
    font-size: 55px;
    font-weight: bold;
    text-shadow: 2px 2px 19px #333;
}

.firstScreen__priceBox img {
    width: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.firstScreen__link a {
    font-size: 16px;
    display: inline-block;
    padding: 18px;
    border-radius: 38px;
    background-color: #2b4352;
    color: #f8f3f3;
    text-decoration: none;
    border: 1px solid #333;
}

.firstScreen__finishBox {
    flex-direction: column-reverse;
    display: flex;
    justify-content: center;
    align-items: center;
}

.firstScreen__subtitle {
    color: rgb(246, 246, 161);
    margin: 85px auto 30px auto;
    text-shadow: 1px 1px 1px #333;
}

.mainInfoBlock {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -300px;
}
.mainInfoBlock__preFormText {
    order:2;
    background-image:url("../img/extra/master-zamera.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 0;
    min-height: 675px;
    height: 100%;
    width: 60%;
    display: block;
    position: relative;
}
.mainInfoBlock__preFormText p{
    width: 60%;
    margin: 60px auto 60px 0;
    display: block;
    font-size: 20px;
    color: #333;
}
.mainInfoBlock__preFormText span {
    font-size: 50px;
    font-weight: bold;
}
.mainInfoBlock__preFormText span.mainInfoBlock__preFormText_color {
    color: rgb(255, 204, 0);
    text-transform: uppercase;
}
.mainInfoBlock__preFormText img {
    position: absolute;
    left: 0;
    bottom: -50px;
    }
.mainInfoBlock__breadcrambs {
    order:1;
    width: 100%;
    display: block;
    text-align: right;
    margin-bottom: 45px;
    transition: all .5s ease-out;
}
.mainInfoBlock__breadcrambs a {
    color: inherit;
}
.mainInfoBlock__breadcrambs a:hover {
    opacity: 0.8;
    transition: all .5s ease-out;
}
.mainInfoBlock__header1 {
    order:4;
    width: 100%;
    display: block;
    background: url("../img/extra/listok.png");
    background-repeat: no-repeat;
    margin: 60px auto 30px auto;
}

.mainInfoBlock__header1 h1 {
    font-size: 45px;
    margin: 65px auto;
    font-weight: bold;
    color: #333;
}
.mainInfoBlock__formBox,
.salesBlock__formBox,
.reviewsBlock__formBox,
.calcBlock__formBox {
    order:3;
    width: 40%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.mainInfoBlock__form,
.salesBlock__form,
.reviewsBlock__form {
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 30px #33333368 ;
    color: #333;
    width: 100%;
}
/* div.mainInfoBlock__formElement,
div.salesBlock__formElement,
div.reviewsBlock__formElement {
    width: 90%;
    margin: 10px auto;
} */
.mainInfoBlock__form label,
.salesBlock__form label,
.reviewsBlock__form label,
.calcBlock__form label {
    margin: 5px auto;    
}
.mainInfoBlock__form input[type=text],
.mainInfoBlock__form select,
.salesBlock__form input[type=text],
.reviewsBlock__form textarea,
.calcBlock__form input[type=text],
.calcBlock__form select {
    width: 100%;
}
.mainInfoBlock__form label[for=mainInfoBlock__Phone],
.salesBlock__form label[for=salesBlock__Phone],
.reviewsBlock__form label[for=reviewsBlock__text],
.calcBlock__form label[for=calcBlock__Phone] {
    font-size: 20px;
}
.mainInfoBlock__form label[for=mainInfoBlock__Phone]::after,
.salesBlock__form label[for=salesBlock__Phone]::after,
.calcBlock__form label[for=calcBlock__Phone]::after {
    color: #eb433e;
    content: "*";
    margin-left: 4px;
}
div.btn__formBtn {
    display: block;
    background-image: linear-gradient(180deg, #FFCF47 0%, #F9A72C 100%);
    box-shadow: 0px 2px 0px #de8b0c, 0px 4px 20px #ffcf47;
    border-radius: 10px;
    padding: 10px 5px;
    text-align: center;
    width: 90%;   
    margin: 35px auto 35px auto;
    transition: all .1s ease-out;
}

div.btn__formBtn:hover {
    opacity:.8;
    cursor: pointer;
}

input[type=submit] {
    font-weight: bold;
}

.cardsBlock {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.cardsBlock__item {
    max-width: 32%;
    margin: 0;
    padding: 0;
    position: relative;
    margin-bottom: 30px;
    border-radius: 11px;
    transition: all .3s ease-in;
}
.cardsBlock__item:hover {    
    box-shadow: 2px 2px 10px #3333334f;
}
.cardsBlock__photo {
    width: 100%;
    position: relative;
}
.cardsBlock__mouseSensor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
}
.cardsBlock__mouseSensor:hover {
    cursor: pointer;

}
.cardsBlock__photoCurtain {
    position: absolute;
    opacity: 0;
    background-color: #0d0b1a96;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 12px;
}
.cardsBlock__item_active .cardsBlock__photoCurtain {
    opacity: 1;
    z-index: 5;
    transition: all .5s ease-out;
}
.cardsBlock__item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.cardsBlock__list {
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    display: inline;
    opacity: 0;
    z-index: 10;
    margin: 10px;
    color: #fff;
}
.cardsBlock__item_active .cardsBlock__list{
    opacity: 1;
    transition: all .1s ease-out;
}
.cardsBlock__title {    
    margin: 25px 0;
    padding: 0 15px;
    height: 55px;
}
.cardsBlock__title a {
    font-size: 18px;
    color: inherit;
    display: inline;
    font-weight: bold;
    transition: all .25s ease-in;
}
.cardsBlock__title a:hover {
    cursor: pointer;
    color: var(--primary-color);
}

.cardsBlock__desc {
    padding: 0 15px;
    display: inline-block;
}

.cardsBlock__itemText,
.cardsBlock_phoneNumber {
    padding: 0 15px;
}

.cardsBlock__item p {
    padding: 0px 0 10px 45px;
    position: relative;
}
.cardsBlock__item p::before {
    content: '';
    background: url("../img/icons/money-bill-1.svg");
    background-size: 30px 30px;
    position:absolute;
    width: 30px;
    height: 30px;
    top:-2px;
    left:0px;
    opacity: .3;

}


.cardsBlock_phoneNumber a {
    color: var(--primary-link-color);
    cursor: pointer;
    margin: 10px 0;
    padding: 10px 0 10px 45px;
    display: inline-block;
    transition: all .25s;
    font-size: 18px;
    position: relative;
    border-top: 2px dotted;
    width: 100%;
}
.cardsBlock_phoneNumber a:hover {
    color: var(--primary-color);
    cursor: pointer;
}
.cardsBlock_phoneNumber a::before {
    content: '';
    background: url("../img/icons/phone-icon-yellow-transparent.png");
    background-size: 30px 30px;
    position:absolute;
    width: 30px;
    height: 30px;
    top:8px;
    left:0px;
    opacity: .3;
}
.priceBlock {
    width: 100%;
    background: url("../img/extra/samorez-for-right.png") right top;
    background-repeat: no-repeat;
    background-position: top 0 right 50px;
    padding: 80px 0 0 0;
}
.priceBlock__header2 {
    margin: 40px auto;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    position: relative;
}
.priceBlock__header2::after {
    color: #333;
    content: "*";
    font-size: 12px;
    position: absolute;
    top: 15px;
    right:5 px;
}
.priceBlock__box {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.priceBlock__item {
    width: 90%;
    margin: 30px auto;
    order: 7;
    display: none;
    opacity: 0;
}
.priceBlock__item_active {
    display: block;
    opacity: 1;
}
.priceBlock__tableName {
    margin: 30px auto;
    font-size: 15px;
    font-weight: bold;
    color: var(--primary-text-color);
    display: inline-block;
    border: 4px solid transparent;
    transition: all .2s ease-out;
    position: relative;
}
.priceBlock__tableName::before {
    content: "";
    position: absolute;
    bottom: -12px;
    display: block;
    width: 0;
    height: 6px;
    transition: all .25s;
    background: var(--primary-color);
}
.priceBlock__tableName:hover {
    cursor: pointer;
}
.priceBlock__tableName:hover::before {
    content: "";
    position: absolute;
    bottom: -12px;
    display: block;
    width: 100%;
    height: 6px;
    transition: all .25s;
    background: var(--primary-color);
}

.priceBlock__tableName.priceBlock__tableName_active::before {
    content: "";
    position: absolute;
    bottom: -12px;
    display: block;
    width: 100%;
    height: 6px;
    transition: all .25s;
    background: var(--primary-color);
}
.priceBlock__tableName[data-pricetable-title="#text1"] {
    order: 1;
 }
 .priceBlock__tableName[data-pricetable-title="#text2"] {
    order: 2;
 }
 .priceBlock__tableName[data-pricetable-title="#text3"] {
    order: 3;
 }
 .priceBlock__tableName[data-pricetable-title="#text4"] {
    order: 4;
 }
 .priceBlock__tableName[data-pricetable-title="#text5"] {
    order: 5;
 }
 .priceBlock__tableName[data-pricetable-title="#text6"] {
    order: 6;
 }

.priceBlock table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.priceBlock tr:nth-child(odd) {
    background-color: var(--gray-BG-color);
}
.priceBlock tr:nth-child(even) {
    background-color: var(--gray-BG-color);
}
.priceBlock tr {
    transition: all .2 ease-in-out;
    border: 1px solid #dedede;
    border-top-color: transparent;
}
.priceBlock tr:hover {
    background-color: var(--reverse-text-color);
}

.priceBlock tr td {
    padding: 6px 6px;
}

.priceBlock tr:first-child {
    background-color: var(--primary-color);
    color: var(--reverse-text-color);
    font-size: 20px;
    padding: 3px;
}
.priceBlock tr:first-child:hover {
    background-color: var(--primary-color);
}
.priceBlock tr:first-child td{        
    padding: 10px 3px;
}
.priceBlock__asterisk {
    font-style: italic;
    display: block;
    margin: 30px auto;
    text-align: right;
}
.calcBlock {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
}
.calcBlock__header {
    margin: 50px auto;
    display: block;
    color: #ff9b26;
    font-weight: bold;
    font-size: 26px;
    background-image:url("../img/extra/calculator.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top 0 right 50px;
    padding: 50px 0 50px 0px;
    width: 100%;
}
.calcBlock__header h3 {
    font-size: 35px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}
.calcBlock__midlPart {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    background-image: url("../img/extra/metr-vertical.png");
    background-repeat: no-repeat;
    background-position: bottom 0 left 100px;
    background-size: contain;
}
.calcBlock__bgPicture {
    min-height: 675px;
    height: 100%;
    width: 20%;
    display: block;
}
.calcBlock__formBox {
    width: 60%;
    justify-content: space-around;
}
.calcBlock__formBox form {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.calcBlock__correctionText {
    margin: 53px auto 114px auto;
    line-height: 1;
    padding: 0 20px 0 46px;
}
.calcBlock__correctionText a {
    font-size: inherit;
    display: inline-block;
    color: inherit;
    margin: 5px auto 30px;
}
.calcBlock__correctionText a:hover {
    font-size: inherit;
    display: inline-block;
    color: inherit;
    margin: 5px auto 30px;
    opacity: .8;
}

.salesBlock {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}
.salesBlock h2{
    font-size: 25px;
    font-weight: bold;
}
.salesBlock__text,
.reviewsBlock__text {
    margin: 20px auto;
    width: 90%;
}
.salesBlock textarea {
    resize: none;
    width: 100%;
    height: 55px;
}

.textBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    width: 100%;
    transition: all .3s ease-in;
}

.textBlock div:nth-child(1) {
    background: linear-gradient(275.59deg, #D0D0D0 19.29%, #FEFEFE 83.47%);
    border-radius: 30px;
}
.textBlock div:nth-child(2) {
    background: linear-gradient(129.09deg, #FFE6BF 20.65%, #FFB951 79.9%);
    border-radius: 30px;
}
.textBlock div:nth-child(1)::after {
    background-image: url('../img/extra/brick.png');
    left: 0px;
    width: 110px;
    height: 88px;
    top: -58px;
}
.textBlock div:nth-child(2)::after {
    background-image: url('../img/extra/tool.png');
    right: 0px;
    width: 150px;
    height: 150px;
    top: -88px;
}
.textBlock__card {
    box-shadow: 2px 2px 10px #3333334f;
    margin-bottom: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    flex:1
}
.textBlock__card:hover {
    box-shadow: 0px 0px 15px rgba(76, 106, 124, 0.25);
}

.textBlock__card::after {
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    content: "";
}

.textBlock__a {
    text-align: center;
    display: block;
    transform: rotate(-12deg);
    margin-top: -36px;
}
.textBlock__a a {
    font-size: 20px;
    border: 2px solid;
    padding: 20px;
}
.textBlock__card p {
    margin: 45px 23px;
}
.textBlock__card a {
    font-style: italic;
    margin: 20px;
    color: inherit;
    text-decoration: none;
}

.advantagesBlock {
    background: url('../img/extra/leafs-bundle-left.png') left top, url('../img/extra/leaf-right.png') right 50%;
    background-repeat: no-repeat;
 }
 .advantagesBlock__h2 {
    display: block;
    max-width: 80%;
    text-align: center;
    margin: 108px auto;
    font-weight: bold;
    font-size: 43px;
 }
.advantagesBlock__cardBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 50px;
}
.advantagesBlock__cardBox figure {
    /* background-color: #ffffff48; */
    width: 18%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex-grow: 1;
    padding: 5px
}
.advantagesBlock__cardBox figure img {
    max-width: 40%;
    margin: 35px auto 15px auto;
    padding-bottom: 20px;
}
.advantagesBlock__cardBox figure figcaption {
    margin: 15px auto 30px auto;
    padding: 0 20px;
    font-weight: bold;
    border-top: 3px dotted #911414;
    padding-top: 22px;
}

.markBlock {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    margin: 50px auto;
}

.markBlock__h2 {
    margin: 40px auto;
    font-size: 35px;
    font-weight: bold;
}

.markBlock__text {
    margin: 30px 20px;

}
.markBlock__box {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
    background-color: var(--reverse-text-color);
    transition: all .3s ease-in;
}
.markBlock__box:hover {
    transform: scale(1.01);
    cursor: pointer;
}
.markBlock__main {
width: 60%;
margin: 30px auto;
padding: 30px 20px;
}
.markBlock__main p{
    padding: 55px 10px;
}
.markBlock__main a {
    color: inherit;    
    margin: 0px;
    font-weight: bold;
    font-size: 20px;
    transition: all .3s ease-in-out;
}
.markBlock__main a:hover {
    opacity: .8;
}
.markBlock a.simpleLink {
    border: 2px solid var(--yellow-color);
    display: inline-block;
    width: 300px;
    margin: 20px auto;
    text-align: center;
    color: var(--primary-text-color);
    padding: 20px;
    border-radius: 52px;
    font-size: 18px;
    background: var(--yellow-color);
    background-image: linear-gradient(180deg, #FFCF47 0%, #F9A72C 100%);
    box-shadow: 0px 2px 0px #de8b0c, 0px 4px 20px #ffcf47;
}
.markBlock a.simpleLink:hover {
    opacity: .8;
    color: var(--primary-text-color);
}
.markBlock__picture {
    width: 40%;
    background-color: var(--gray-BG-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
div.markBlock__picture.c8 {
    background-image: url('../img/extra/c8-zabor.png');
}
div.markBlock__picture.c20 {
    background-image: url('../img/extra/c20-zabor.png');
}
div.markBlock__picture.c21 {
    background-image: url('../img/extra/c21-zabor.png');
}

.colorBlock {
    width: 100%;
    margin: 60px auto;
}
.colorBlock__titleBox {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}
.colorBlock__title {
    margin: 40px auto 50px;
    font-size: 35px;
    font-weight: bold;
}
.colorBlock__subTitle {
    margin: 30px 20px;
}
.colorBlock__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    border-radius: 10px;
    box-shadow: 0 0 3px var(--gray-BG-color);
}
.colorBlock figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 19%;
    transition: all .2s ease-in;
}
.colorBlock figure:hover {
    transform: scale(1.02);
    cursor: pointer;
  }
.colorBlock img {
    max-width: 70%;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
    border-radius: 50%;
}
.colorBlock figcaption {
    padding: 20px 10px 20px 10px;
    margin: 20px auto;
}
.colorBlock__orderBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin: 30px auto 50px auto;
}
.colorBlock__imgPart {
    width: 55%;
    background-position: 54px 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../img/extra/master.png');
}

.colorBlock__formPart {
    max-width: 45%;
}

.hammer {
    background: url("../img/extra/hammer-right.png") right 0 top 0 no-repeat;
    width: 100%;
}
.cementMixer {
    background: url("../img/extra/cement-mixer-mini.png") left 0 top 0 no-repeat, url("../img/extra/schurik-small.png") right 0 bottom 0 no-repeat;
    width: 100%;
    padding-top: 150px;
  margin-top: -100px;
  padding-bottom: 200px;
}

.deadlinesBlock {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 100px auto 0 auto;
    padding: 100px 0;
}
.deadlinesBlock__card {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 30px;
}

.deadlinesBlock__icon{
    width: 20%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
}
.deadlinesBlock__icon figure {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--yellow-light-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 40px auto;
}
.deadlinesBlock__icon figure img {
    width: 50%;
}
.deadlinesBlock__box{
    width: 80%;
}
.deadlinesBlock__box p,
.deadlinesBlock__box ul {
    padding: 10px 20px 0 20px;
}
.deadlinesBlock__title {
    margin: 40px auto 20px auto;
    font-size: 20px;
    font-weight: bold;
}

.deadlinesBlock__box li{
    padding: 0px 0px 3px 20px;
}


.schemeBlock {
    display: flex;
    flex-direction: column;
}
.schemeBlock__title {
    font-size: 23px;
    font-weight: bold;
    margin: 0 auto 40px auto;
}
.schemeBlock__subtitle {
    font-size: 16px;
    margin: 30px auto;
}
.schemeBlock__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.schemeBlock__card {
    width: 30%;
    position: relative;
    padding-top: 73px;
}
.schemeBlock figure {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--yellow-light-color);
}
.schemeBlock img {
    height: 50%;
}
.schemeBlock a {
    border: 2px solid var(--yellow-color);
    display: inline-block;
    width: 300px;
    margin: 20px auto;
    text-align: center;
    color: var(--primary-text-color);
    padding: 20px;
    border-radius: 52px;
    font-size: 18px;
    background: var(--yellow-color);
    background-image: linear-gradient(180deg, #FFCF47 0%, #F9A72C 100%);
    box-shadow: 0px 2px 0px #de8b0c, 0px 4px 20px #ffcf47;
}
.schemeBlock a:hover {
    opacity: .8;
}
.schemeBlock__cardTitle {
    font-size: 18px;
    font-weight: bold;
    margin: 35px auto 20px auto;
}
.howToOrder {
    display: flex;
    flex-direction: column;
    background-image: url("../img/extra/leaf-right.png");
    background-repeat: no-repeat;
    background-position: right 0 top 50%;
}
.howToOrder__titleBox {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}
.howToOrder__subTitle {
    margin: 30px 20px;
  }
.howToOrder__title {
    margin: 40px auto 50px;
    font-size: 35px;
    font-weight: bold;
  }

.howToOrder  ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
  }

.howToOrder ol>li {
    list-style: none;
    display: block;
    padding: 40px 20px;
    margin: 30px auto;
    border-radius: 7px;
    box-shadow: 0 0 10px var(--bluegray-box-shadow);
    position: relative;
    width: 31%;
  }
  .howToOrder ol>li::before {
    width: 50px;
    height: 50px;
    top: -20px;
    left: 10px;
    position: absolute;
    background-color: var(--green-color);
    content: "";
    border-radius: 50%;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
  }
  .howToOrder ol>li::after {
    width: 30px;
    height: 30px;
    top: -10px;
    left: 20px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
  }
  .howToOrder ol>li:nth-child(1)::after {
       background-image: url("../img/icons/figures/1-y.svg");
  }
  .howToOrder ol>li:nth-child(2)::after {
       background-image: url("../img/icons/figures/2-y.svg");
  }
  .howToOrder ol>li:nth-child(3)::after {
       background-image: url("../img/icons/figures/3-y.svg");
  }

  .howToOrder__text {
    font-weight: bold;
    font-size: 18px;
    margin: 50px auto;   
  }

  .howToOrder  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    background-image: url("../img/extra/master-zaborov-blue-transparent.png");
    background-repeat: no-repeat;
    background-position: bottom 0 right -20%;
    background-size: contain;
  }

.howToOrder ul>li {
    list-style: none;
    display: block;
    padding: 20px 20px 20px 100px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    transition: all .3s ease-in-out;
    background-color: transparent;
    border-top: 1px solid rgba(109,156,186,0.25);
  }

  .howToOrder ul>li:last-of-type {
    margin-bottom: 90px;
   }
  .howToOrder ul>li:hover {
    background-color: rgb(77 120 26);
    transform: scale(1.02);
    transition: all .3s ease-in-out;
    cursor: pointer;
    border-top-color: transparent;
    color: var(--reverse-text-color);
    border-radius: 5px;
  }
  .howToOrder ul>li::before {
    width: 50px;
    height: 50px;
    top: 5px;
    left: 10px;
    position: absolute;
    background-color: var(--green-color);
    content: "";
    border-radius: 50%;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
  }
  .howToOrder ul>li::after {
    width: 30px;
    height: 30px;
    top: 15px;
    left: 20px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    background-image: url("../img/icons/figures/question.svg");
  }


  .darkBlock {
    margin: 0px auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--reverse-text-color);
  }
  p.darkBlock__title {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin: 90px auto 40px auto;
  }
  .darkBlock a {
    display: inline-block;
    margin: 30px auto;
    padding: 20px 40px 20px 80px;
    background-color: var(--green-color);
    color: inherit;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    border-radius: 45px;
    transition: background-color .6s ease;
  }
  .darkBlock a:hover {
    cursor: pointer;
    background-color: #3dc439;
  }
  .darkBlock a:after {
    position: absolute;
    top: 12px;
    left: 27px;
    background-image: url("../img/icons/phone-icon-green-1.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    width: 40px;
    height: 40px;
    content: "";
    
    animation: onCallTwo 3s steps(10) infinite;
    -webkit-animation: onCallTwo 6s steps(10) infinite;
  }

  @keyframes onCall {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-44deg);
    }
    10% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }
  
  @-webkit-keyframes onCall {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-44deg);
    }
    10% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }
  
  @keyframes onCallTwo {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-44deg);
    }
    10% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }
  
  @-webkit-@keyframes onCallTwo {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-44deg);
    }
    10% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }

 p.darkBlock__textBox {
    display: flex;
    flex-direction: column;
    padding: 30px;
 }
p span.darkBlock__li {
    padding-left: 70px;
    margin-bottom: 25px;
    font-size: 22px;
    position: relative;
}

p span.darkBlock__li::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0;
    background-color: var(--secondary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
p span.darkBlock__li::after {
    position: absolute;
    content: "";
    top: 10px;
  left: 9px;
    width: 22px;
    height: 22px;
    background-image: url("../img/icons/figures/check.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
.darkBlock__lastText {
    margin: 30px auto 70px auto;
    opacity: .8;
}
.afterDarkBlock {
    margin: 0 auto;
    padding: 50px 0;
}
.workExamplesBlock {
    display: flex;
    flex-direction: column;
    margin: 0px auto 90px auto;  
}
.workExamplesBlock h2 {
    font-size: 36px;
    font-weight: bold;
    margin: 0px auto 80px auto;
    padding-top: 160px;
}

.workExamplesBlock__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.workExamplesBlock__card {
    display: flex;
    margin: 20px auto;
    padding: 0;
    position: relative;
    width: 24%;
    flex-direction: column;
    transition: all .3s ease-in;
}
.workExamplesBlock__card:hover {
    transform: scale(1.01);
    cursor: pointer;
}
.workExamplesBlock__title {
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 30px 0;
}
.workExamplesBlock__location,
.workExamplesBlock__price,
.workExamplesBlock__details,
.workExamplesBlock__date {
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}
.workExamplesBlock__location::before,
.workExamplesBlock__price::before,
.workExamplesBlock__details::before,
.workExamplesBlock__date::before {
   content: "";
   background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 4px;
    left: 0;
    opacity: .7;
}
.workExamplesBlock__location::before {
    background-image: url("../img/icons/examples/map-location-dot.svg");
}
.workExamplesBlock__price::before {
    background-image: url("../img/icons/examples/money-bill-1-wave.svg");
}
.workExamplesBlock__date::before {
    background-image: url("../img/icons/examples/calendar-days.svg");
}
.workExamplesBlock__details::before {
    background-image: url("../img/icons/examples/pen-ruler.svg");
}
.workExamplesBlock__card ul {
    width: 100%;
    position: relative;
}
.workExamplesBlock__card ul>li:not(:first-of-type) {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;    
}

.workExamplesBlock__card p:last-child {
    position: absolute;
    top: 0px;
    left: 0px;
    color: var(--reverse-text-color);
    padding: 10px;
    background-color: var(--green-color);
    font-size: 14px;
}

.usefulInfoBlock {
    display: flex;
    flex-direction: column;
    width: 100%;

}
.usefulInfoBlock p:first-child {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 10px auto 125px auto;
}
.usefulInfoBlock__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.usefulInfoBlock__card {
     width: 49%;
     background-color: #3f6a35d9;
     color: var(--reverse-text-color);
     box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
}
.usefulInfoBlock__card:hover {
    cursor: pointer;
    box-shadow: 0px 0px 25px rgba(78, 112, 133, 0.25);
}

.usefulInfoBlock__card ul {
    position: relative;
    width: 100%;
}
.usefulInfoBlock__card ul span {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    font-size: 14px;
    background-color: #21591492;
    border-radius: 0 0 50% 0;
    width: 40%;
    display: inline-block;
    color: var(--reverse-text-color);
    cursor: pointer;
}
.usefulInfoBlock__title {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
}
.usefulInfoBlock__card p{
    padding: 20px;
}
p.usefulInfoBlock__typoLink {
    margin: 50px 0 90px auto;
}

.profnastilsTypesBlock__cardBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.profnastilsTypesBlock__card {
    width: 32%;
    margin-bottom: 40px;
    position: relative;
    background-color: white;
    padding: 20px;
    border-radius: 11px;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
    transition: all .2s ease-in;
}
.profnastilsTypesBlock__card:hover {
    cursor: pointer;
    transform: scale(1.02);
}
.profnastilsTypesBlock__card:first-of-type::after {
    content: '';
    position: absolute;
    top: -35px;
    right: -21px;
    width: 100px;
    height: 140px;
    background-image: url('../img/extra/hit.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
.profnastilsTypesBlock__title {
    font-size: 28px;
    font-weight: bold;
    border-bottom: 2px dotted;
}
.profnastilsTypesBlock__card p {
    padding: 0px 10px 2px 20px;;
}

p.profnastilsTypesBlock__title {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.profnastilsTypesBlock__card p:nth-child(odd) {
    font-weight: bold;
}
.profnastilsTypesBlock__card a {
    color: inherit;
    font-weight: normal;
    padding-top: 20px;
    display: inline-block;
}
.profnastilsTypesBlock__card a:hover {
    opacity: .9;
}
.addressBlock {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 400px;
}
.addressBlock__extraInfo {
    width: 30%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    background-color: rgba(255, 255, 255, 0.879);
    z-index: 3;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    border-radius: 2px;
}
.addressBlock__mapsBox {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;   
    z-index: 1;
    flex-direction: column;
    align-items: center;
}
.addressBlock__mapsDescription {
    text-align: center;
    position: absolute;
    background: #3d505e;
    bottom: 10px;
    left:10px;
    padding: 20px 30px;    
    color: var(--reverse-text-color);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    border-radius: 2px;
  }

#videoFromYoutube {
    width: 100%;
    height: 100%;
}
#mapsGoogle {
    width: 100%;
    height: 400px;
}

.addressBlock__text {
    padding: 40px 10px 20px 15px;
}
.addressBlock__mapsTitle {
    font-size: 18px;
}


.emptyMeasure {
    height: 225px;
    width: 100%;
    background-image: url('../img/extra/metr-gorizontal.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    margin: 100px auto 0 auto;
}

footer {
     width: 100%;
     color: var(--reverse-text-color);
}
.footer {
     background-color: #3d3434cd;
     width: 100%;
}
.isQuestions {
    width: 80%;
    color: var(--reverse-text-color);
    margin: 0 auto;
    text-align: center;
}
.isQuestions p:first-of-type {
    font-size: 34px;
    font-weight: bold;
    color: var(--secondary-color);
    padding-top: 200px;
    margin-bottom: 50px;    
}
.isQuestions p:last-of-type {
    font-size: 22px;
    margin-bottom: 50px;    
}


.orderLinks {
    display: flex;
    flex-direction: column-reverse;
    margin: 0px auto 60px auto;
    align-items: center;
}
.links {
        text-align: center;
}

.callBackButton {
    margin: 20px auto 40px auto;
    margin-right: auto;
    display: block;
    width: 100%;
    border: none;
    color: #333;
    background-image: linear-gradient(180deg, #FFCF47 0%, #F9A72C 100%);
    border-radius: 10px;
    font-size: 18px;
    transition: all .3s ease-in-out;
    max-width: 300px;
    padding: 20px;
    text-align: center;
}

.callBackButton:hover {
    box-shadow: 0px 2px 0px #de8b0c, 0px 4px 20px #ffcf47;
    cursor: pointer;
}
footer .darkBlock a {
    background-color: #3dc439;
}
footer .darkBlock a:hover {
   background-color: var(--green-color);
}
footer a {
    color: inherit;
}
footer a:hover {
    cursor: pointer;
    opacity: .8;
}

.otherPages {
    margin: 0px auto;
}
.otherPages section {
    margin: 30px auto;
    padding: 40px 0px;
    border-radius: 5px;
    background-color: #7eac472e;
}
.otherPages figure {
    margin: 60px auto;
    width: 100%;
    max-width: 450px;
    box-shadow: 0px 0px 15px rgba(109,156,186,0.25);
}
.otherPages figure img{
    width: 100%;
}
.otherPages h1 {
    font-size: 34px;
    font-weight: bold;
    padding-left: 40px;    
    margin-bottom: 50px;
}
.otherPages h2 {
    font-size: 30px;
    font-weight: bold;
    padding-left: 40px;
    margin: 80px auto;
}
.otherPages h3 {
    font-size: 24px;
    font-weight: bold;
    padding-left: 40px;    
    margin: 75px auto;
}
.otherPages h4 {
    font-size: 20px;
    font-weight: bold;
    padding-left: 40px;
    margin: 65px auto;
}
.otherPages p {
    font-size: 16px;
    padding-left: 45px;
    margin-bottom: 40px;
    position: relative;   
}
.otherPages ul,
.otherPages ol {
    padding-left: 50px;
}
.otherPages ol {
    counter-reset: item;
    list-style: none;
}

.otherPages ul>li {
    font-size: 16px;
    margin-bottom: 25px;
    list-style: none;
}
.otherPages ul>li,
.otherPages ol>li {
    font-size: 16px;
    margin-bottom: 40px;
    position: relative;
    padding-left: 50px;
}
.otherPages ul>li::before,
.otherPages ol>li::before {
    position: absolute;
    left: 0;
    top: -10px;
    display: inline-block;
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--yellow-light-color);

  }
.otherPages ul>li::after,
.otherPages ol>li::after {
    position: absolute;
    left: 9px;
    top: -8px;
    width: 20px;
    height: 20px;
    content: counter(item) " ";
    counter-increment: item;
    color: white;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  }
.otherPages ul>li::after {
    content: " ";
    background-image: url('../img/icons/figures/tools.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
    left: 5px;
    top: -6px;
  }

.otherPages p::before {
    content: " ";
    background-image: url('../img/icons/figures/pen.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
    left: 5px;
    top: -6px;
    position: absolute;
  }
  .otherPages .currentLink {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}
.otherPages .currentLink a {
    display: inline-block;
    margin: 30px auto;
    padding: 20px 40px 20px 80px;
    background-color: var(--green-color);
    font-weight: bold;
    font-size: 18px;
    position: relative;
    border-radius: 45px;
    transition: background-color .6s ease;
    color: var(--reverse-text-color);
  }
  .otherPages .currentLink a:hover {
    cursor: pointer;
    background-color: #3dc439;
}
.otherPages .currentLink a:after {
    position: absolute;
    top: 12px;
    left: 27px;
    background-image: url('../img/icons/phone-icon-green-1.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    width: 40px;
    height: 40px;
    content: "";
}

.otherPages [data-wrapper-for]{
    width: 80%;
    margin-top: 50px;
}
.otherPages [data-title-for] {
    padding-top: 30px;
}
.otherPages [data-title-for]::before {
    top: 28px;
}




/* Circle imgages styles */

.circleFigure__wrapper {
    width: 100%;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.circleFigure__wrapperCircle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
.circleFigure__wrapperCircle_color {
    border: 16px solid var(--rose-BG-color);
} 
.circleFigure__wrapperCircle_color2BG {
        border: 16px solid var(--blue-gray-BG2-color);
} 
.circleFigure__wrapper figure {
    width: 720px;
    height: 400px;
    background: var(--blue-gray-BG2-color);
    position: absolute;
    overflow: hidden;
    top: -44px;
    left: -200px;
}
.circleFigure__wrapper img {
    height: auto;
    position: absolute;
    top:0;
    left: 0;
}

/* End circle imgages styles */



/* MEDIA QUERYS */

@media (max-width: 1199.98px) { 
    .header__info {
        padding: 10px;
    }
    .container,
    .firstScreen,
    .header__box {
        padding: 0 10px;
    }
    .links {
        text-align: left;
    }
}

@media (min-width: 801px) and (max-width: 1199.98px) {
    .header__logoPart {
        width: 30%;
        flex-direction: column;
    }
    .header__logo {
        margin-top: 3px;
      }
    .header__contacts {
        width: 70%;
    }
    .advantagesBlock__cardBox {
        justify-content: space-around;
    }
 .advantagesBlock__cardBox figure {
    width: 19%;
}
}

@media (min-width: 601px) and (max-width: 900px) {
    .cardsBlock__item {
        max-width: 45%;
    }
    .calcBlock__midlPart {
        background-position: bottom 0 left 0;
      }
}


@media (max-width: 800px) {
    .wrapper {
        background-size: cover;
    }
    
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }
    .header__logoPart {
        width: 75%;
    }
    .header__contacts{
        width: 25%;
        justify-content: end;
    }
    .header__phoneImg img {
        margin-right: 0;
    }
    .firstScreen {
        margin: 120px auto;
    }
    .firstScreen__heightBox {
        flex-direction: column;
    } 
    .firstScreen__goodsOffer {
        width: 90%;
        text-align: center;
    }
    .firstScreen__title {
        font-size: 40px;
        color: var(--primary-text-color);
        text-shadow: 0 0 18px #fdfdfd;
    }
    .firstScreen figcaption {
        color: #fff8f8;
        text-shadow: 0 0 18px var(--primary-text-color);
    } 
    .firstScreen__img img {
        z-index: -1;
        display: none;
    }
    .firstScreen__priceBox {
        max-width: 90%;
        text-align: center;
    }
    .firstScreen__priceOffer {
        font-size: 35px;
    }
    .mainInfoBlock {
        margin-top: -36px;
    }
    .mainInfoBlock__breadcrambs {
        text-align: left;
        margin-bottom: 0px;
    }
    
    .mainInfoBlock__preFormText,
    .mainInfoBlock__formBox {
        width: 100%;
        background: none;
    }
    .mainInfoBlock__preFormText {
        min-height: 100%;
    }

    .mainInfoBlock__preFormText span {
        font-size: 32px;
    }

    .mainInfoBlock__preFormText p {
        width: 100%;
        margin-bottom: 30px;
    }
    .mainInfoBlock__preFormText img {
        display: none;
    }

    .mainInfoBlock__header1 h1 {
        font-size: 28px;
    } 

    .priceBlock__tableName {
        margin: 15px auto;
    }

    .priceBlock__item {
        width: 95%;
        margin: 0px auto;
        font-size: 14px;
        border-top: 1px solid var(--primary-color);
        padding-top: 30px;
    }
    .priceBlock tr:first-child {
        font-size: 14px;
    }
    .calcBlock__header {
        background-image: url("../img/extra/calculator-trancparent.png");
        color: #333;
        font-size: 18px;
        padding-bottom: 0;
        background-position: top 0 right 20px;
      }
    .calcBlock__bgPicture {
        display: none;
    }
    .calcBlock__formBox,
    .reviewsBlock__formBox,
    .salesBlock__formBox {
        width:100%;
    }
    .textBlock {
         grid-template-columns: 1fr;
    }
    .textBlock div:nth-child(1)::after {
        left: 0;
    }
    .advantagesBlock__cardBox{
        justify-content: flex-start;
    }
    .advantagesBlock__h2 {
        font-size: 24px;
        width: 90%;
        margin: 85px auto 70px auto;
    }
.advantagesBlock__cardBox figure {
    width: 43%;
    box-shadow: none;
}
.advantagesBlock__cardBox figure img {
    max-width: 50%;
 }
 .colorBlock__orderBox {
    margin: 42px auto 50px auto;
  }

 .colorBlock__imgPart {
    width: 0%;
    background-color: var(--gray-BG-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/extra/fence.jpg');
}

.colorBlock__formPart {
    max-width: 100%;
}
.deadlinesBlock {
    margin: 0 auto 50px auto;
    padding: 145px 0 80px 0;
}
.deadlinesBlock__icon,
.deadlinesBlock__box {
    width: 100%;
}
.deadlinesBlock__card {
    flex-wrap: wrap;
}
.deadlinesBlock__title {
    margin: 0px auto 20px auto;
    
  }

.cementMixer {
    padding-top: 340px;
  }
  .schemeBlock__title {
    margin: 60px auto 20px auto;
    
  }
  .schemeBlock__card {
    width: 100%;
    margin-bottom: 60px;
  }

  .howToOrder ol>li {
    width: 100%;
  }
.workExamplesBlock__card { 
    width: 100%;
}
.usefulInfoBlock__card {
    width: 100%;
    margin-bottom: 30px;
}
.profnastilsTypesBlock__card {
    width: 100%;
}


.addressBlock {
    height: 450px;
}
.addressBlock__extraInfo {
    width: 40%;
}
.addressBlock__mapsDescription {
    text-align: center;
}
#mapsGoogle {
    height: 450px;
}

.addressBlock__text {
    padding: 20px 10px 20px 15px;
}
.emptyMeasure {
    height: 120px;
}



/* lazy DESKTOP */

.lazyDisapeared1 .header__menuBtn {
    height: 0;
    opacity: 0;
    transition: all .3s ease-in;
}
.lazyDisapeared .header__menuBtn {
    display: none;
}

/* end lazy desktop */
.header__logo {
    order:1;
}
.header__menuBtn {
    order:0;
    font-size: 14px;
}
.header__logoPart {
    width: 35%;
}
.header__contacts {
    width: 65%;
    justify-content: end;
    display: flex;
    flex-direction: row;
}
.header__logoPart>div {
    width: 95%;
}
.header__addressAndHours{
    width: 60%;
}
.header__phone {
    width: 30%;
}
.lazyDisapeared1 details[open] div.details_content,
.lazyDisapeared1 .lazyDesktop {
    height: 0;
    opacity: 0;
    transition: all .3s ease-in;
}
.lazyDisapeared details[open] div.details_content,
.lazyDisapeared .lazyDesktop {
    display: none;
}
/* end lazy DESKTOP */




}

@media (max-width: 600px) {
    .cardsBlock__item {
        max-width: 100%;
    }
    .colorBlock figure {
        width: 33%;
      }
    .circleFigure__wrapper figure {
        width: 720px;
    }

    .addressBlock {
        height: 500px;
    }
    .addressBlock__extraInfo {
        width: 50%;
    }
    .addressBlock__mapsDescription {
        font-size: 14px;
        padding: 20px 7px;
        text-align: left;
        bottom: 5px;
        left:0px;
    }
    #mapsGoogle {
        height: 500px;
    }
    
    .addressBlock__text {
        padding: 20px 10px 20px 15px;
    }



    .emptyMeasure {
        height: 50px;
    }

}
@media (max-width: 400px) { 
    .addressBlock {
        height: 550px;
    }   
    #mapsGoogle {
        height: 550px;
    }
    .addressBlock__extraInfo {
        width: 100%;
        height: 32%;
        display: flex;
        flex-flow: row-reverse;
        font-size: 14px;
    }
    .addressBlock__mapsDescription {
        width: 100%;
        text-align: center;
        padding: 35px 7px;
    }
}
@media (max-width: 340px) { 
    .firstScreen__title {
        font-size: 34px;
        color: var(--primary-text-color);
        text-shadow: 0 0 18px #fdfdfd;
    }
    .addressBlock {
        height: 650px;
    }   
    #mapsGoogle {
        height: 650px;
    }
    .mainInfoBlock__header1 h1 {
        font-size: 23px;
    }
    .schemeBlock a,
    .markBlock a.simpleLink {
        width: 100%;
    }
    .workExamplesBlock h2,
    .markBlock__h2,
    .howToOrder__title,
    .colorBlock__title,
    .advantagesBlock__h2,
    .calcBlock__header h3,
    .priceBlock__header2,
    p.darkBlock__title,
    .usefulInfoBlock p:first-child,
    .usefulInfoBlock p:first-child,
    .mainInfoBlock__preFormText span {
        font-size: 20px;
    }
}