:root {
    --text: #333 ;
    --back1: #F0F0F0;
    --back2: #E1D5C9;
    --back3: #D9D9D9;
    --white: white;
    --red: #9F2B25;
    --text-gray: #939393;
    --line: #311D09;
    --backinput: #EFEFF6;
    --backbutton: #311D09;


    --font-title1: 2.5em;
    --font-title2: 2.3em;
    --font-title3: 1.9em;
    --font-title4: 1.8em;
    --font-title5: 1.7em;
    --font-title6: 1.6em;
    --font-text1: 1.5em;
    --font-text2: 1.4em;
    --font-text3: 1.3em;
    --font-text4: 1.2em;
    --font-text5: 1.1em;
    --font-text6: 0.9em;
    --font-text7: 0.8em;
    --font-text8: 0.7em;
    --font-text: 1em;
}


html {
    min-width: 350px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    background-color: #fff;
}

h2 {
    font-size: var(--font-title1);
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
}
h3 {
    font-size: var(--font-title2);
    font-weight: 500;
}
h4 {
    font-size: var(--font-title4);
    font-weight: 700;
}


.header, .content-wrapper, .container, .content, .footer {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
}
.content {
    padding: 5px;
}

.header {
    height: 200px;
    background: white;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

.header img {
  max-width: 488px;
  width: 100%;
  padding: 0 10px;
}
.header a {
  margin: auto;
}


.fotorama {
  width: 100%;
  max-height: 800px;
}

.swiper {
  width: 100%;
  padding: 13px !important;
}


.swiper-slide {
  text-align: center;/*
  background: var(--white);*/
  justify-content: center;
  /*align-items: center;*/
  /*width: auto !important;*/
}

.swiper-slide img {
    padding: 35px 40px 0;
}
.swiper-wrapper {
    /*justify-content: center;*/

}


.footer {
    height: 189px;
    background: var(--red);
    color: var(--white);
    /*-webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;*/
    align-items: center;
}

.footer div {

    flex-direction: column;
    flex: 1 1 auto;
    order: 0;
    min-width: 350px;
    max-width: 746px;
    margin: 0 auto;

    font-size: var(--font-title1);
    font-weight: 700;
    line-height: 43px;
    letter-spacing: 0em;
    text-align: center;
    text-transform: uppercase;
    padding-left: 26px;
    /*
    margin: auto;
    font-size: var(--font-title1);
    font-weight: 700;
    line-height: 43px;
    letter-spacing: 0em;
    text-align: left;
    text-transform: uppercase;
    */
}

.content-wrapper {
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

.container {
    flex-wrap: nowrap;
    flex: 1 0 auto;
}

.content, .swiper {
    flex-direction: column;
    flex: 1 1 auto;
    order: 0;
    min-width: 350px;
    max-width: 1200px;
    margin: 0 auto;
}


.index_block {
    display: flex;
    flex-wrap: wrap;
}

.index_block a {
    display: flex;
    font-size: var(--font-title1);
    font-weight: 700;
    height: 190px;
    /*min-width: 265px;*/
    width: 50%;
    text-transform: uppercase;
    text-align: center;
    flex-grow: 1;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text);
}


.index_block a:nth-of-type(1) {
    background-color: var(--back1);
}
.index_block a:nth-of-type(2) {
    background-color: var(--back2);
}



.index_block2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.index_block2 > div {
    /*max-width: 600px;*/
    padding: 30px 40px;
    flex-grow: 1;
    min-width: 50%;
}
.index_block2 h3 {
    text-align: center;
}
.index_block2 p {
    font-size: var(--font-text4);
    color: var(--text);
    font-weight: 650;
}
.index_block2 a {
    color: var(--text-gray);
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
}

.index_block2 > div:nth-of-type(1) {
    background-color: var(--back1);
}
.index_block2 > div:nth-of-type(2) {
    background-color: var(--back3);
}

/*
.index_block2 > div > div {
    display: flex;
    font-size: 23px;
    flex-wrap: wrap;
}

.index_block2 > div > div >div {
    max-width: 40vmin;
    min-width: 16vmax;
}
*/

/*.index_block2 > div > div {
    display: table;
    width: 100%;
}

.index_block2 > div > div > div {
    display: table-row;
    font-size: var(--font-text4);
}

.index_block2 > div > div > div > div {
    display: table-cell;
    height: 120px;
    width: 50%;
    padding: 0 5px;
}

.index_block2 > div > div  > div:nth-of-type(1) p {
    color: var(--text-gray);
}
.index_block2 > div > div  > div:nth-of-type(2) p {
}

.index_block2 > div > div  > div:nth-of-type(2) h4 {
    border-top: 1.2px solid var(--line);
    display: inline-block;
    padding-top: 35px;
}

.index_block2 h4 {
    margin: 0;
    font-size: var(--font-text4);
}*/

.index_block3, .index_block4 {
    display: flex;
    flex-wrap: nowrap;
    height: 650px;
    margin-top: 50px;
}
.index_block3 > div, .index_block4 > div {
    width: 50%;
}

.index_block3 > div:nth-of-type(1) {
    background: var(--back2);
    min-width: 350px;
    flex-grow: 1;
}
.index_block3 > div:nth-of-type(2) {
    background: url(/img/tpl/form.jpg);
    background-position: center top;
    background-size: cover;
}





.index_block4 {
    flex: 0 0 auto;
    margin-top: -650px;
}


.index_block4 > div {
    margin: auto;
    max-width: 1200px;
    flex: 1 1 auto;
}
.index_block4 > div > div {
    width: 50%;
    font-size: var(--font-text5);
}
.index_block4 > div > div:nth-of-type(1) {
    min-width: 350px;
    padding: 30px;
    flex-grow: 1;
}

.index_block4 h3 {
    text-transform: uppercase;
    margin: 0;
    line-height: 35px;
}
.index_block4 h3 span {
    line-height: 40px;
}

.index_block4 input, .index_block4 textarea, .index_block4 button {
    min-width: 300px;
    height: 50px;
    border: 0;
    background: var(--backinput);   
    padding: 22px; 
    margin: 12px 0 0 0;
    border-radius: 5px;
}

.index_block4 button {
    background: var(--backbutton);   
    color: var(--white);
    padding: 0px; 
}
.index_block4 textarea {
    height: 152px;
}

.index_block4 input[type=checkbox] {
    width: 25px;
    height: 25px;
    min-width: 25px;
    margin-right: 10px;
}


/*bonus*/

.path, .path a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: var(--font-text3);
    padding: 0 0 40px;
}

.bonus {
}

.bonus h1 {
    text-transform: uppercase;
    text-align: center;
}
.bonus h4 {
    text-transform: uppercase;
    text-align: center;
}


.bonus_info, .bonus_table {
    flex: 0 0 auto;
}

.bonus_info h3 {
    text-align: center;
    font-size: var(--font-title3);
    text-transform: uppercase;
}

.bonus_info > div {
    background: var(--back1);
    border-radius: 25px;
    max-width: 746px;
    margin: auto;
    padding: 20px 5px 10px;
}

.bonus_info > div > div {
    display: flex;
    justify-content: space-evenly;
}
.bonus_info > div > div > div:nth-of-type(2) {
    width: 6px;
    background: var(--red);
}
.bonus_info > div > div > div  > div:nth-of-type(1) {
    font-size: 92px;
    font-weight: 800;
}
.bonus_info > div > div > div  > div:nth-of-type(2) {
    font-size: var(--font-text2);
}


.bonus_table > div {
    max-width: 746px;
    margin: auto;    
}

.bonus table {
    width: 100%;
    background: var(--back2);
    border-collapse: collapse;
    border: 3px solid var(--white);
}
.bonus td {
    border: var(--backbutton) 2px solid;
    height: 80px;
    text-align: center;
    font-size: var(--font-text4);
    line-height: 20px;
    font-weight: 700;
}
.bonus td.left {
    text-align: left;
    padding-left: 1%;
    text-transform: uppercase;
}
.bonus td span {
    font-size: var(--font-text6);
    font-weight: 400;
    text-transform: lowercase;
}
.bonus td.min {
    font-size: var(--font-text4);
    font-weight: 600;


}


.bonus .note {
    font-size: var(--font-text3);
    text-align: center;
    padding: 50px 0;
}

.bonus_welcome {
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
}
.bonus_welcome > div {
    max-width: 746px;
    display: flex;
    justify-content: space-evenly;
    background: var(--red);
    color: var(--white);
    font-size: 30px;
    padding: 50px 0;
    font-weight: 600;
    line-height: 75px;
    flex-grow: 1;
}
.bonus_welcome span {
    font-size: 63px;
}
.bonus_welcome .w1 {
    font-size: 42px;
}
.bonus_welcome .w2 {
    font-size: 63px;
}




.bonus_welcome > div > div:nth-of-type(2) {
    width: 6px;
    background: var(--white);
    flex-shrink: 0;
}



/* accordion-1 */
#accordion-1 {
    position: relative;
    margin-bottom: 200px;
    max-width: 746px;
    margin: auto;
}

#accordion-1 .question{
    margin-top: 2px;
    background-color: var(--back1);
    color: var(--text);
    padding: 0px 20px;
    cursor: pointer;
    transition: 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: var(--font-text3);
    text-align: left;
}

#accordion-1 .arrow{
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--text);
    border-right: 2px solid var(--text);
    margin-right: 10px;
    transform: rotate(45deg);
    flex-shrink: 0;
}
#accordion-1 .arrow-animate{
    transform: rotate(135deg);
}

#accordion-1 .answer{
    display: none;
    padding: 20px 30px;
    color: var(--red);
    background-color: var(--back1);
    font-size: var(--font-text3);
    font-weight: 500;
}




@media screen and (max-width: 730px) {
    .index_block3 > div:nth-of-type(2) {
        background: var(--back2);
    }
    .index_block2 h3 {
        font-size: var(--font-title6);
    }
    .index_block a {
        font-size: var(--font-title3);
    }
    .index_block2 > div {
        padding: 0 10px;
    }
    .swiper img {
        max-width: 90% !important;
        /*padding-right: 10px;
        padding-left: 10px;*/
    }
    .footer div {
        font-size: var(--font-title6);
        text-align: left;
    }
    .path, .path a {
        font-size: var(--font-text5);
    }
    .bonus td.min {
        font-size: var(--font-text5);
    }
    h2 {
        font-size: var(--font-title3);
    }


    .bonus_welcome > div {
        font-size: 30px;
    }
    .bonus_welcome span {
        font-size: 53px;
    }
    .bonus_welcome .w1 {
        font-size: 32px;
    }
    .bonus_welcome .w2 {
        font-size: 33px;
    }

    .index_block4 h3 {
        font-size: var(--font-title4);
    }

}
@media screen and (max-width: 550px) {
    .index_block2 h3 {
        font-size: var(--font-text3);
    }
    .index_block2 > div {
        font-size: var(--font-text6);
        padding: 20px 10px;
    }
    .index_block a {
        font-size: var(--font-text4);
        height: 100px;
    }

    .bonus_info > div > div > div  > div:nth-of-type(1) {
        font-size: 52px;
        font-weight: 800;
        padding: 10px;
        text-align: center;
    }

    .bonus_info > div > div > div  > div:nth-of-type(2) {
        padding: 10px;
        text-align: center;
    }

    .path, .path a {
        font-size: var(--font-text6);
    }
    .bonus td {
        font-size: var(--font-text6);
    }
    .bonus td:nth-of-type(1) {
        min-width: 109px;
    }
    .bonus td span {
        font-size: var(--font-text8);
    }
    .bonus td.min {
        font-size: var(--font-text6);
        /*white-space: nowrap;*/
    }
    h2 {
        font-size: var(--font-title4);
    }
    .swiper img {
        /*width: 60% !important;*/
        /*padding-right: 0px;
        padding-left: 0px;*/
    }
    .bonus_welcome > div {
        font-size: 20px;
        line-height: 50px;
    }
    .bonus_welcome span {
        font-size: 43px;
    }
    .bonus_welcome .w1 {
        font-size: 29px;
    }
    .bonus_welcome .w2 {
        font-size: 43px;
    }
    .index_block2 p {
        min-height: 85px;
    }

}