/*--------------------------------------------------------------
GLOBAL STYLES
--------------------------------------------------------------*/
.relative{position: relative}
section{width: 100%}

.container-fluid{
    max-width: 105rem;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 80px 40px
}

.content{max-width: 700px}

.title + p{
    color: var(--emperor);
    font-size: 17px;
    margin-top: 30px;
    line-height: 27px
}

.sections-image{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.sections-image > .floating{
    display: flex;
    justify-content: flex-end
}

.sections-image img{height: auto}

h1{font-size: 60px}
h2{
    font-size: 40px;
    font-weight: 900
}
h3{font-size: 30px}

.section-bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}


/*--------------------------------------------------------------
FIRST SECTIONS
--------------------------------------------------------------*/
.first-sections .sections-image{right: 138px}
.first-sections .sections-image img{
    height: 700px;
    box-shadow: 0 0 24px 0 rgba(0,0,0,.3);
    border-radius: 40px
}


/* FIRST SECTION */
.first-sub-section{
    box-shadow: 0 0 24px 0 rgba(0,0,0,.4);
    position: relative;
}

.first-sub-section .logo img{height: 40px}

.first-sub-section .content{margin-top: 120px}
.first-sub-section .content > *{
    color: var(--white);
    text-shadow: 0 0 4px rgba(0,0,0,.15)
}

.first-sub-section .content h3{
    font-weight: 300;
    margin-bottom: 15px
}

.first-sub-section .buttons{margin-top: 40px}
.first-sub-section .buttons a:first-child{margin-right: 20px}


/* SECOND SECTION */
.second-sub-section ul{margin-top: 30px}
.second-sub-section .list-v2 li:before{margin-right: 30px}
.second-sub-section .list-v2 li *{color: var(--dove)}


/*--------------------------------------------------------------
SECOND SECTION
--------------------------------------------------------------*/
.second-section{
    height: 400px;
    box-shadow: inset 0 0 24px 0 rgba(0,0,0,.3)
}


/*--------------------------------------------------------------
THIRD SECTION
--------------------------------------------------------------*/
.third-section a, .fourth-section a, .fifth-section .checkboxes{margin-top: 60px}


/*--------------------------------------------------------------
FOURTH SECTION
--------------------------------------------------------------*/
.fourth-section{
    box-shadow: inset 0 0 24px 0 rgba(0,0,0,.3);
    position: relative;
    z-index: 10;
}

.fourth-section h3{color: var(--white)}
.fourth-section > div > div{align-items: flex-start}


/*--------------------------------------------------------------
FIFTH SECTION
--------------------------------------------------------------*/
.fifth-section{
    box-shadow: 0 0 24px 0 rgba(0,0,0,.5);
    position: relative
}

.fifth-section .form .row:last-child{align-items: flex-end}

.fifth-section .form .radios{padding: 25px 0}

.fifth-section .form .radios h6{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400
}

.fifth-section .form .radios label:last-child{margin-left: 25px}


/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/
footer{overflow-y: hidden}
footer > div{padding: 30px 20px!important}

footer > div *{color:var(--white)}
footer img{height: 30px}

footer > div > div:first-child div{margin-left: 40px}
footer > div > div:first-child div > a:first-child{margin-right: 15px}


/*--------------------------------------------------------------
QUERIES
--------------------------------------------------------------*/
@media screen and (max-width: 1280px){
    .container-fluid{padding: 60px 30px}

    .first-sections .sections-image{right: 20px}

    .fourth-section > div > div{flex-direction: column}
    .fourth-section .content{max-width: 100%}

    .fourth-section ul{margin-top: 40px}
}

@media screen and (max-width: 1110px){
    .first-sections .sections-image{top: 40%}
    .first-sections .sections-image img{height: 500px}

    .first-sub-section h1{font-size: 50px}
    .first-sub-section h3{font-size: 20px}
    .first-sub-section .buttons{
        display: flex;
        flex-direction: column;
    }
    
    .first-sub-section .buttons a:first-child{margin-right: 0}
    .first-sub-section .buttons a:last-child{margin-top: 20px}
}

@media screen and (max-width: 980px){
    h2{font-size: 30px}
    h3{font-size: 20px}
    .title + p{font-size: 14px}

    .second-section{height: 300px}

    .form .row{flex-direction: column}
    .form .row .col{
        width: 100%;
        margin-left: 0!important
    }

    .form .row .col button{width: 100%}

    .third-section a, .fourth-section a{margin-top: 40px}
    .fifth-section .checkboxes{margin-top: 10px}
    .list-medium p{font-size: 15px}
}

@media screen and (max-width: 780px){
    .first-sections .sections-image{display: none}
}

@media screen and (max-width: 700px){
    .first-sub-section .content{margin-top: 60px}
    .first-sub-section h1{font-size: 30px}
    .first-sub-section h3{font-size: 15px}

    .second-section{height: 200px}

    footer > div{
        flex-direction: column;
        align-items: flex-start!important
    }

    footer > div > div{
        justify-content: space-between!important;
        width: 100%
    }

    footer > div > a{margin-top: 20px}
}


@media screen and (max-width: 600px){
    .third-section .title{display: block}
}

@media screen and (max-width: 430px){
    .btn-icon i{display: none}
    .btn-link-v1{
        width: 100%;
        justify-content: center
    }

    footer > div > div{flex-direction: column}
    footer > div > div:first-child div{margin: 15px 0 0}
}