/* ===================================== GERAL ===================================== */

@font-face {
    font-family: Raleway;
    src: url(../fonts/RalewayMedium.ttf);
    font-weight: 200;
}

@font-face {
    font-family: Raleway;
    src: url(../fonts/RalewayBold.ttf);
    font-weight: bold;
}

html {
    background-color: #cca391;
    color: #ffffff;
    font-family: Raleway, Arial, Helvetica, sans-serif;
    font-weight: 200;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

main {
    margin: 0 auto;
    max-width: 1366px;
}

section {
    position: relative;
}

.bold {
    font-weight: bold!important;
}



/* ===================================== SEC01 ===================================== */

#sec01 {
    background: url(../images/bg-top.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}

#logo-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 115px 100px;
}

#txt-top p {
    font-size: 1.5rem;
    letter-spacing: 10px;
    line-height: 1.8;
    text-transform: uppercase;
}

#txt-top p:last-child {
    margin-left: 45px;
}

#img-top {
    position: absolute;
    right: 0;
    top: 0;
}



/* ===================================== SEC02 ===================================== */

#sec02 iframe {
    height: 800px;
    width:100%;
}



/* ===================================== SEC03 ===================================== */

#sec03 {
    padding: 80px 20px;
}

#sec03 p {
    font-size: 1.8rem;
    letter-spacing: 10px;
    line-height: 1.8;
    text-align: center;
    text-transform: uppercase;
}



/* ===================================== SEC04 ===================================== */

#sec04 {
    background: url(../images/bg-sec04.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    height: 900px;
    width: 100%;
}

#sec04 div {
    background-color: rgba(255,255,255,.9);
    margin: 70px 95px;
    position: absolute;
    right: 0;
}

#sec04 div p {
    color: #cca391;
    font-size: 1.5rem;
    letter-spacing: 10px;
    line-height: 1.8;
    padding: 30px 30px 20px;
    text-align: center;
    text-transform: uppercase;
}

#sec04 div img {
    margin: 0 auto;
}

#sec04 div p:last-child {
    padding: 40px 30px 40px;
}



/* ===================================== SEC05 ===================================== */

#sec05 {
    align-items: center;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 65px 200px 90px;
}

#sec05 div {
    margin-bottom: 70px;
}

#sec05 p {
    color: #9ea1a6;
    font-size: 1.8rem;
    letter-spacing: 10px;
    line-height: 1.8;
    text-align: center;
}



/* ===================================== SEC06 ===================================== */

#sec06 {
    display: flex;
    flex-direction: column;
    z-index: 99;
}

#sec06 .sec06-row {
    display: flex;
}

#sec06 .sec06-row:first-child {
    justify-content: flex-end;
}

#sec06 .sec06-row p {
    background-color: #d6cd6c;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 2rem;
    letter-spacing: 10px;
    line-height: 2.3;
    padding: 70px 30px;
    text-align: right;
    max-width: 400px;
}

#sec06 .sec06-row:last-child {
    justify-content: center;
    margin-top: 110px;
}

#sec06 .sec06-row:last-child>div {
    margin: 0 20px;
}



/* ===================================== SEC07 ===================================== */

#sec07 {
    align-items: center;
    background-color: #e4ccc0;
    display: flex;
    flex-direction: column;
    margin-top: -50px;
}

#sec07-txt {
    font-size: 1.8rem;
    letter-spacing: 10px;
    line-height: 1.5;
    padding: 100px 20px 60px;
    text-align: center;
}

#sec07-block, #trip-logos {
    align-items: center;
    display: flex;
}

#trip-logos div:nth-child(2) {
    margin: 0 50px;
}

#sec07-block p {
    box-sizing: border-box;
    font-size: 1.6rem;
    letter-spacing: 8px;
    line-height: 1.5;
    max-width: 650px;
    text-align: center;
    text-transform: uppercase;
}



/* ===================================== SEC08 ===================================== */

#sec08 {
    background-color: #e4ccc0;
}

#sec08 .container {
    align-items: center;
    display: flex;
    flex-direction: column;
}

#form-title {
    padding: 60px 0;
    max-width: 1100px;
}

#form-title p {
    color: #6d6e71;
    font-size: 1.9rem;
    font-weight: 100;
    letter-spacing: 6px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.sent-notification {
    margin-bottom: 30px;
    text-align: center;
}

#form-container {
    max-width: 1000px;
}

form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form input {
    background-color: #eadad1;
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 1.9rem;
    height: 120px;
    margin-bottom: 30px;
    padding-left: 25px;
    width: 470px;
}

form input:last-child {
    background-color: #1b5570;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.9rem;
    height: 120px;
    padding: 0;
    transition: .3s ease;
    width: 470px;
}

::placeholder {
    color: #b08c7c;
    font-size: 1.9rem;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #ffffff;
    opacity: 1;
}

form input:not(:last-child):focus {
    background-color: #c4aa9b;
    color: #ffffff;
    outline-color: #c4aa9b;
}
form input:last-child:focus {
    outline-color: #1b5570;
}

form input:last-child:hover {
    transform: scale(1.02);
}

form input:last-child:active {
    transform: scale(.95);
}



/* ===================================== divider ===================================== */

#divider {
    background-color: #e4ccc0;
    padding: 10px 6% 60px;
}



/* ===================================== footer ===================================== */

footer {
    background-color: #ffffff;
    padding: 85px;
}

#social-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
}

#social {
    display: flex;
    justify-content: space-between;
    width: 160px;
}




/* ===================================== MEDIA-QUERY ===================================== */

@media only screen and (max-width: 1300px) {
    #sec06 .sec06-row:first-child {
        flex-direction: column;
    }

    #sec06 .sec06-row p {
        max-width: 100%;
        order: 2;
        text-align: center;
    }

    #sec06 .sec06-row p br {
        display: none;
    }

    #sec06 .sec06-row:first-child div {
        order: 1;
    }

    #sec06 .sec06-row:first-child div img {
        width: 100%;
    }

    #sec07-block {
        flex-direction: column;
    }

    #trip-logos>div {
        margin: 0 20px;
    }

    #trip-logos div:nth-child(2) {
        margin: 0;
    }
}

@media only screen and (max-width: 1100px) {
    #logo-top {
        padding: 115px 50px;
    }

    #sec05 {
        padding: 65px 90px 90px;
    }
}

@media only screen and (max-width: 950px) {
    #logo-top {
        flex-direction: column;
        justify-content: center;
        padding: 80px 20px;
    }

    #logo-top>div {
        padding: 20px 0;
    }

    #txt-top p {
        text-align: center;
    }

    #txt-top p:last-child {
        margin-left: 0;
    }

    form {
        justify-content: center;
    }
}

@media only screen and (max-width: 750px) {
    #sec02 iframe {
        height: 500px;
    }

    #sec03 p {
        font-size: 1.3rem;
    }

    #sec05 {
        padding: 65px 30px 90px;
    }

    #sec05 p {
        font-size: 1.3rem;
    }

    #sec06 .sec06-row p {
        font-size: 1.5rem;
    }

    #sec06 .sec06-row:last-child {
        margin-top: 50px;
    }

    #sec07-txt {
        font-size: 1.3rem;
    }

    #sec07-block p {
        font-size: 1.1rem;
    }

    #form-title p {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 550px) {
    #txt-top p {
        font-size: 0.7rem;
        letter-spacing: 4px;
    }

    #sec02 iframe {
        height: 250px;
    }

    #sec03 {
        padding: 40px 20px;
    }

    #sec03 p {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #sec04 {
        display: flex;
        justify-content: center;
    }

    #sec04 div {
        height: 300px;
        margin: 70px 0;
        position: relative;
    }

    #sec04 div p {
        font-size: 1rem;
    }

    #sec04 div p:last-child {
        padding: 40px 10px 40px;
    }

    #sec05 p {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #sec06 .sec06-row {
        align-items: center;
        flex-direction: column;
    }

    #sec06 .sec06-row p {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #sec06 .sec06-row:last-child>div {
        margin: 20px;
    }

    #sec07-txt {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #sec07-block p {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #form-title {
        padding: 80px 0 20px 0;
        max-width: 1100px;
    }

    #form-title p {
        font-size: 1rem;
        letter-spacing: 5px;
    }

    #form-container {
        width: 100%;
    }

    form input, form input:last-child {
        height: 80px;
        width: 90%;
    }

    footer {
        padding: 45px;
    }

    #social-container {
        align-items: center;
        flex-direction: column;
    }

    #social {
        margin-bottom: 30px;
    }
}