/*--------------*/
/*--- Reset ---*/
/*------------*/


body, h1, h2, h3, ul {
    margin: 0;
    padding: 0;
}

/*----------------*/
/*--- General ---*/
/*--------------*/

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f2f2f2;
}

h1, h2, h3, h4 {
    font-family: 'Raleway', sans-serif;
}

h1 {
    color: #fff;
    font-size: 72px;
}

h1 span {
    color: #AE1919;
    display: block;
}

h2 {
    margin-bottom: 56px;
    font-size: 32px;
}

h3 {
    margin-bottom: 40px;
    font-size: 24px;
}

h4 {
    font-size: 16px;
    margin: 0 0 8px;
}

p{
    font-size: 16px;
}

a, .action {
    color: #AE1919;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    height: 100%;
}

.button {
    background: #AE1919;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 8px 25px;
    text-decoration: none;
    border: 1px solid #AE1919;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
}

.button.full {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

.button:hover {
    color: #AE1919;
    background-color: transparent;
}

.information {
    display: flex;
    align-items: center;
}

.information img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.logo {
    max-width: 176px;
    display: block;
    width: auto;
    height: auto;
}

.line-break {
    width: 100%;
}

.big-hidden {
    display: none;
}

.inline {
    display: inline;
}

.content-container {
    padding: 16px 32px;
    border-radius: 10px;
    box-shadow: 
        0.8px 0.8px 2.2px rgba(0, 0, 0, 0.02),
        0px 2px 5.3px rgba(0, 0, 0, 0.028),
        0px 3px 10px rgba(0, 0, 0, 0.035),
        0px 6px 17.9px rgba(0, 0, 0, 0.042),
        0px 10px 33.4px rgba(0, 0, 0, 0.05),
        0px 25px 80px rgba(0, 0, 0, 0.07)
    ;
}

p {
    margin: 0;
}

sup {
    font-size: 10px;
    position: absolute;
    top: -5px;
    right: -8px;
}

.separator {
    height: 2px;
    width: 50px;
    background-color: #AE1919;
    margin: 0 auto 40px;
}

/*--------------*/
/*--- Header  ---*/
/*--------------*/

header{
    display: flex;
    justify-content: center;
    padding: 24px;
    width: 100%;
    box-shadow: 0px 10px 17px 0px rgba(0,0,0,0.20);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

header img{
    width: 150px;
}


/*--------------*/
/*--- #first_content ---*/
/*--------------*/

#first_content {
    align-items: center;
    background-image: url("../img/qlvoyage-background.png");
    background-position: center 55%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    height: 400px;

}

/*--------------*/
/*--- Footer ---*/
/*--------------*/

footer {
    background: #333;
    color: #fff;
    padding: 15px 0;
}

footer li {
    list-style: none;
    margin-bottom: 10px;
}

footer a {
    color: #fff;
    font-weight: 400;
}

footer div p:first-child{
    margin-top: 0;
}

footer .capital,
footer .location {
    margin: 0;
}

/*---------------*/
/*--- Content ---*/
/*---------------*/

main {
    position: relative;
    display: block;
}

main:focus {
    outline: none;
}

article {
    padding: 56px 0;
}

/*--- Who ---*/

.background-icon {
    position: absolute;
    opacity: .5;
    width: 30%;
    left: -86px;
    z-index: -1;
    top: 20px;
}

.who span {
    margin: 0 auto;
}

.who p {
    margin-bottom: 12px;
}

.who p:nth-last-child(2) {
    margin-bottom: 0;
}

/*--- How ---*/

.how {
    background-color: #fff;
    text-align: center;
}

form {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.b2c-container .contact-block {
    margin-bottom: 40px;
}

.phone-details {
    margin-top: 4rem;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.b2c-container .content-container.form {
    padding: 32px;
}

.form .input-container {
    padding: 0 8px 0 0;
}

.form label {
    position: absolute;
    top: -9px;
    left: 10px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
    background-color: #fff;
    color: #333;
    padding: 0 4px;

}

.form input {
    position: relative;
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Open Sans';
    font-size: 16px;
}

.form .button:hover {
    background-color: #fff;
    color: #AE1919;
}

.form .input-container.error label{
    color:#f65656;
}

.form .input-container.error input{
    border: 1px solid #f65656;
}

.form .input-container.error .error {
    color: #f65656;
    font-size: 12px;
    text-align: left;
    display: flex;
}

.form input::placeholder {
    color: #ccc;
}

#right-arrow {
    width: 8px;
    height: 15px;
    fill: #fff;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.button:hover #right-arrow {
  fill: #AE1919;
}

.how p {
    margin-bottom: 16px;
    text-align: left;
}

.how p:nth-last-child(1) {
    margin-bottom: 0;
}

.phone {
    position: relative;
    white-space: nowrap;
}

    /* --- How for B2C --- */

.b2c-container {
    margin-bottom: 56px;
    width: 100%;
}

.b2c-container .b2c-text-container {
    margin-bottom: 16px;
    padding: 0;
}

.b2c-container .b2c-text-container p {
    text-align: left;
}

.contact-block {
    justify-content: center
}

.how p.mandatory {
    position: absolute;
    bottom: 5px;
    right: 12px;
    font-size: 12px;
}

.info-access {
    display: flex;
    text-align: left;
    font-size: 14px;
    margin-top: 12px;
}

.info-access svg {
    margin-right: 5px;
    flex: 0 0 auto;
}

.error-message {
    margin-top: 8px;
    padding: 0;
}

.error-message p {
    margin-bottom: 0;
    color: #f65656;
    font-size: 14px;
    font-weight: 600;
}

.devices,
.call-center {
    height: 70px;
    width: auto;
    fill: #AE1919;
}

.b2c-container .content-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.b2c-container .content-container .text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.b2c-container .content-container.contact {
    max-width: 736px;
}

.b2c-container .others-means {
    display: flex;
    justify-content: center;
    width: 100%;
}

.b2c-container .others-means p {
    text-align: center;
}

.b2c-container .content-container .text-container .phone-text {
    display: flex;
    flex-direction: column;
}

/* --- How for B2B --- */

.b2b-container {
    margin-bottom: 24px;
    width: 100%;
}

.how p.agency-text {
    font-size: 14px;
    margin-bottom: 40px;
}

.agency {
    display: flex;
    flex-direction: column;
}

.agency span {
    margin-bottom: 8px;
    font-size: 14px;
}

.agency .phone {
    font-size: 16px;
}

/*--- Price ---*/

.price{
    text-align: center;
}

.price p {
    display: inline-block;
    font-size: 13px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
}

.price p:last-child {
    margin-right: 0;
    margin-bottom: 20px;
}

/*-------------------*/
/*--- Responsive ---*/
/*-----------------*/

@media screen and (min-width: 1024px) {

    .how p {
        padding: 0;
    }

    .b2c-container .content-container.contact {
        width: 440px;
        min-height: 210px;
        margin: 0 10px;
    }

    .b2c-container .content-container .text-container {
        height: 88px;
    }
}

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

    #first_content {
        background-position: initial;
    }

    .background-icon {
        width: 80%;
    }
}

@media screen and (max-width: 1023px) {
    .b2c-container .content-container {
        flex: 1 1 auto;
    }

    .b2c-container .content-container.contact:not(:last-child) {
        margin: 0 0 12px 0;
    }

    .b2c-container .others-means {
        flex-wrap: wrap;
    }

    .others-means .content-container svg {
        margin-bottom: 12px;
    }
}

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

    header img{
        width: 125px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 28px;
        margin-bottom: 32px;
    }

    h3 {
        font-size: 20px;
        margin-bottom: 24px;
    }

    article {
        padding: 32px 0;
    }

    .who h2 {
        text-align: left;
    }

    .how p.agency-text {
        margin-bottom: 24px;
    }

    .how-container {
        padding: 0 15px;
    }

    .b2c-container,
    .b2b-container {
        padding: 0;
    }

    .b2c-container {
        margin-bottom: 32px;
    }

    .b2c-container h4,
    .b2b-container h4 {
        text-align: left;
    }

    .b2c-container .content-container.form {
        position: relative;
        padding: 32px 32px 24px 32px;;
    }

    .form .input-container {
        padding: 0 0 16px;
    }

    .form .button.full {
        position: absolute;
        bottom: -19px;
        left: calc(50% - 118px);
        width: 236px;
    }

    .info-access {
        margin-top: 28px;
    }

    .error-message {
        margin-top: 0;
    }

    .error-message p {
        text-align: center;
    }

    .b2b-container p {
        text-align: left;
    }

    .link .button-container:not(:last-child) {
        margin-bottom: 15px;
    }

    .link .button {
        padding: 10px 25px;
    }
}

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

    .small-hidden {
        display: none;
    }

    .big-hidden {
        display: block;
    }

    .inline {
        display: block;
    }

    #first_content {
        background-position: center 65%;
        background-size: 200%;
        height: 300px;
    }

        header img{
        width: 115px;
    }

    footer p,
    footer a {
        font-size: 12px;
    }

    .background-icon {
        top: 5px;
        width: 100%;
    }

    .who p:nth-last-child(2) {
        margin-bottom: 15px;
    }

    .how p.mandatory {
        font-size: 12px;
        text-align: right;
        position: initial;
        margin: 8px -16px 0 0;
    }

    .price {
        text-align: center;
        padding: 0 90px 10px;
    }

    .price p {
        display: inline;
        font-size: 12px;
    }
}

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

    p {
        font-size: 14px;
    }

    #first_content {
        height: 250px;
    }

    .price {
        padding: 0 30px 10px;
    }
}