h1, .h1{
    color:#333;
    font:48px/60px AvertaStdPE-Bold;
    margin:0 0 16px 0;
}

h2, .h2{
    color:#333;
    font:32px/40px AvertaStdPE-Bold;
    margin-bottom:0 0 24px 0;
}

h3, .h3{

}

h4, .h4{

}

h5, .h5{

}

h6, .h6{

}

@media only screen and (max-width: 768px) {

    h1, .h1{
        font-size:32px;
        line-height:40px;
    }

    h2, .h2{
        font-size:24px;
        line-height:32px;
        margin:0 0 16px 0;
    }

    h3, .h3{

    }

    h4, .h4{

    }

    h5, .h5{

    }

    h6, .h6{

    }

}

.body-1{
    color:#333;
    font:16px/22px AvertaStdPE-Regular
}

    .body-1 b, .body-1 a{
        font-family:AvertaStdPE-Bold
    }

    .body-1 a{
        color:#333;
    }

@media only screen and (max-width: 768px) {

    .body-1{
        font-size:14px;
        line-height:20px;
    }

}

.body-2{
    color:#333;
    font:20px/26px AvertaStdPE-Regular
}

    .body-2 b, .body-2 a{
        font-family:AvertaStdPE-Bold
    }

    .body-2 a{
        color:#333;
    }

@media only screen and (max-width: 768px) {

    .body-2{
        font-size:18px;
        line-height:20px;
    }

}


small{
    color:#666;
    font:12px/18px AvertaStdPE-Regular
}

.btn{
    background:none;
    border:1px solid;
    border-radius:8px;
    font:16px/22px AvertaStdPE-Bold;
}

.btn.type01{
    background-color:#1C1C1C;
    border-color:#1C1C1C;
    color:#FFF;
}

.btn.type02{
    background-color:#FFF;
    border-color:#FFF;
    color:#333;
}

.btn.size01{
    font-size:16px;
    line-height:22px;
    padding:18px 32px;
}

.btn[disabled]{
    cursor:await;
    opacity:0.7;
}

@media only screen and (max-width: 768px) {

    .btn.size01{
        font-size:14px;
        line-height:20px;
        width:100%;
    }

}

/*Input*/
.fieldset{
    margin-top:16px;
}

.input-wrap{
  align-items:center;
  background-color:#F7F7F7;
  border:1px solid #CBCBCB;
  border-bottom:1px solid #002E6D;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  padding:12px 16px;
  display:flex;
  height: 64px;
  justify-content: space-between;
}

    .input-wrap div{
        display:flex;
        flex-direction: column;
        gap:0;
        justify-content: center;
        width: 100%;
    }

        .input-wrap div label{
            color:#666666;
            display:block;
            font:500 16px AvertaStdPE-Regular;
            transition: 200ms;
        }

        .input-wrap div input{
            background-color:transparent;
            border:none;
            color:#333;
            font:300 16px AvertaStdPE-Regular;
            height: 0;
            padding:0;
            transition: 300ms;
            width: 100%;
        }

        .input-wrap .btn-reset{
            background:url(../img/icons/delete.svg) no-repeat center / 18px transparent;
            border:none;
            cursor:pointer;
            display: none;
            height:24px;
            padding:0;
            width:24px;
            z-index: 10;
        }

        /*Active mode*/
        .input-wrap div input:focus{
            outline:none;
        }

        .input-wrap:has(input:focus) .btn-reset,
        .input-wrap:has(input:not(:placeholder-shown)) .btn-reset,
        .fieldset[data-error] .input-wrap:has(input:focus) .btn-reset{
            display: block;
        }

        .fieldset[data-error] .input-wrap:has(input:focus) .btn-reset{
            opacity:1;
        }

        .fieldset[data-error] .input-wrap:has(input:focus) {
            background-image:none;
        }

        .input-wrap.active div,
        .input-wrap:has(input:focus) div,
        .input-wrap:has(input:not(:placeholder-shown)) div,
        .input-wrap:has(option:not([value=""]):checked) div{
            gap:2px;
        }

        .input-wrap.active label,
        .input-wrap:has(input:focus) label,
        .input-wrap:has(input:not(:placeholder-shown)) label,
        .input-wrap:has(option:not([value=""]):checked) label{
            color:#002E6D;
            font-size: 12px;
        }

        .input-wrap.active input,
        .input-wrap:has(input:focus) input,
        .input-wrap:has(input:not(:placeholder-shown)) input{
            height: 21px;
        }
        /*Fin - Active mode*/

.input-wrap.focus{
  border-color:#333;
}

  .input-wrap.focus .phone-wrap::before{
    color:#333;
  }

  .input-wrap.focus .phone-wrap .btn-reset{
    display: block;
  }

    .fieldset .messages-wrap {
        margin-top: 4px;
    }

        .fieldset .messages-wrap .message {
            align-items: center;
            background-size:15px;
            color: #333;
            display: none;
            font:14px/20px AvertaStdPE-Regular;
            gap:5px;
        }

        .fieldset .messages-wrap .message::before{
            background-color: #333;
            content:'';
            display: block;
            -webkit-mask: url(../img/icons/achtung.svg) no-repeat center left;
            -webkit-mask-size: 15px;
            height: 16px;
            width:16px;

        }

    .fieldset[data-error] .input-wrap{
        background:url(../img/icons/achtung.svg) no-repeat center right 18px #FFF;
        border-bottom:2px solid #E71706;
    }

    .fieldset[data-error] .input-wrap .btn-reset{
        opacity: 0;
    }

    .fieldset[data-error] .input-wrap div label{
        color: #E71706;
    }

    .fieldset[data-error="1"] .message:nth-child(1),
    .fieldset[data-error="2"] .message:nth-child(2),
    .fieldset[data-error="3"] .message:nth-child(3){
        display: flex;
    }
/*Fin - Input*/

.fieldset:has(.hide),
.fieldset:has(.hide) .messages-wrap{
    margin-top:0;
}

.fieldset[data-error]:has(.hide){
    margin-bottom:16px;
    margin-top:16px;
}

.fieldset .hide{
    height: 0;
    overflow: hidden;
    padding: 0;
    border: none!important;
}

/*Popup*/
.popup{
    background-color:#FFF;
    border:none;
    border-radius: 8px;
    max-width: 704px;
    padding:0;
    width: 100%;
}

.popup::backdrop{
    background-color:#2E2B2B;
    opacity:0.2;
}

    .popup .content{
        align-items: center;
        display: flex;
        flex-direction: column;
        gap:32px;
        padding:64px 32px;
        position: relative;
        text-align: center;
    }

        .popup .close{
            background: url(../img/icons/close.svg) no-repeat transparent;
            border:none;
            height:32px;
            position: absolute;
            right:24px;
            top:24px;
            width:32px;
        }

        .popup img{
            margin:16px 0;
            max-width: 150px;
            width: 100%;
        }

        .popup h2{
            margin:0 0 16px 0;
        }

        .popup button{
            text-transform: uppercase;
        }

.popup footer{
    display: flex;
    flex-direction: column;
    gap:16px;
}

@media only screen and (max-width: 768px) {

    .popup{
        border-radius: unset;
        height: 100vh;
        max-height: none;
        max-width: none;
    }

    .popup .content{
        height: 100%;
        justify-content: center;
        padding:16px;
        margin:0;
    }

        .popup .close{
            right: 16px;
            top: 16px;
        }

        .popup img{
            margin-top:auto;
        }

        .popup footer{
            margin-top:auto;
        }

}
/*Fin - Popup*/

section{
    align-items:center;
    display:flex;
    gap:144px;
    justify-content:center;
    margin-bottom:64px;
    padding:48px 16px;
}

    section .text{
        max-width:496px;
        width:100%;
    }

    section .img img{
        max-width:attr(data-width);
        width:100%;
    }

@media only screen and (max-width: 768px) {

    section{
        flex-direction:column;
        gap:24px;
        margin-bottom:40px;
        padding:40px 0;
    }

        section .text{
            padding:0 16px;
            max-width:none;
        }

        section .img{
            margin:0 16px;
        }

}

/*Main header*/
#main-header{
    padding:24px 0 29px;
}

    #main-header .content{
        margin:0 auto;
        max-width:1038px;
        width:auto;
    }

        #main-header ul{
            align-items:center;
            display:flex;
            gap:20px;
        }

            #main-header ul li{
                margin-bottom:0;
            }

                #main-header ul hr{
                    background-color:#C3C2C1;
                    height:33px;
                    width:1px;
                }

@media only screen and (max-width: 768px) {

    #main-header{
        padding:21px 22px;
    }

        #main-header ul{
            gap:13px;
        }

            #main-header ul hr{
                height:22px;
            }

            #main-header li:nth-child(1) img{
                width:229px;
            }

            #main-header li:nth-child(3) img{
                width:32px;
            }

}
/*Fin - Main header*/

/*sec01*/
#sec01{
    gap:0;
    padding:0 16px 0 0;
}

    #sec01 .text{
        background-color:#FFCD00;
        padding:80px 176px;
        max-width:911px;
    }

        #sec01 form{
            margin-top:24px;
        }

            #sec01 form legend{
                color:#333;
                font-family:AvertaStdPE-Bold;
                margin-bottom:16px;
            }

            #sec01 form fieldset > p:last-of-type{
                margin-top: 16px;
            }

            #sec01 form .legal-wrap{
                margin-top:16px;
            }

            #sec01 footer{
                margin-top:24px;
            }

                #sec01 .btn{
                    text-transform:uppercase
                }

                #sec01 footer p{
                    margin-top:24px;
                }

                    #sec01 footer p small{
                        color:#333;
                        font-size:14px;
                        line-height: 20px;
                    }

                    #sec01 footer > p a{
                        color:#002E6D;
                    }

    #sec01 .img{
        margin-left:-120px;
    }

        #sec01 .img img{
            max-width:478px
        }

@media only screen and (max-width: 768px) {

    #sec01{
        padding:0;
    }

        #sec01 .text{
            border-radius:8px;
            margin-top:-64px;
            order:2;
            padding:24px;
            width:calc(100% - 32px);
        }

            #sec01 form{
                margin-top:24px;
            }

                #sec01 footer{
                    margin-top:20px;
                }

                    #sec01 footer p{
                        margin-top:20px;
                    }

                        #sec01 footer > p br{
                            display: none;
                        }

        #sec01 .img{
            margin-left:0;
            margin-right:0;
            max-width:none;
            order:1;
            width:100%;
        }

            #sec01 .img img{
                max-width: 100%;
                width:100%;
            }

}
/*Fin - sec01*/

/*sec02*/
#sec02 ol{
    counter-reset:c;
}

    #sec02 ol li{
        counter-increment:c;
        display:flex;
        gap:5px;
    }

    #sec02 ol li::before{
        content:counter(c) "."
    }

    #sec02 .img img{
        max-width:496px
    }

@media only screen and (max-width: 768px) {

    #sec02 {
        margin-bottom:0;
    }

}
/*Fin - sec02*/

/*sec03*/
#sec03 .img img{
    max-width:528px
}

@media only screen and (max-width: 768px) {

    #sec03{
        margin-bottom:0;
    }

        #sec03 .text{
            order:2;
        }

        #sec03 .img{
            order:1;
        }

}
/*Fin - sec03*/

/*Main footer*/
#main-footer{
    padding:0 0 64px;
}

    #main-footer .content{
        margin:0 auto;
        max-width:1152px;
        text-align:center;
        width:100%;
    }

        #main-footer .content hr{
            background-color:#E5E5E5;
            margin:0 auto 24px;
            max-width:1112px;
            width:100%;
        }

@media only screen and (max-width: 768px) {

    #main-footer{
        padding:40px 24px 40px;
    }

}
/*Fin - Main footer*/