body > main {
    overflow-x: hidden;
}
.root {
    --bluecustom: #004d71;
    --yellowcustom: #ffd751;
}

* {
    font-family: "Roboto", sans-serif !important;
}

.bg-custom {
    background-color: #004d71;
}

.masthead {
    display: none;
    height: 115vh;
    min-height: 500px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url("/img/banner-header3.png");
    background-attachment: fixed;
}

.masthead-dato {
    height: 115vh;
    min-height: 500px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url("/img/banner-header2.png");
    background-attachment: fixed;
}

.masterhead-text4 {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 2em;
    text-align: center;
    margin-right: 7em;
    margin-left: 9em;
}

.dato-logo {
    margin-top: -9em;
    margin-left: 5em;
}

.white-line4 {
    border: 1px solid white;
    width: 25%;
    margin-top: 4em;
}

.nav-item-login {
    width: 6em;
    border: 2px solid yellow;
    border-radius: 1em;
    margin-left: 1em;
}

@media screen and (max-width: 767px) {
    .nav-item-login {
        margin-left: -0.7em;
    }
    .login {
        margin-left: 0.1em;
    }
}

.login {
    color: yellow;
    font-weight: bold;
    margin-left: 0.6em;
}

.nav-link-login {
    display: block;
    text-decoration: none;
}

.text-yellow {
    color: yellow;
}

.border-yellow {
    border: 2px solid yellow;
    padding: 10px;
}

@media (max-width: 575px) {
    .masterhead-text4 {
        font-size: 1.3em;
        margin-right: 1em;
        margin-left: 1em;
    }

    .dato-logo {
        width: 20em;
        margin-top: -9em;
        margin-left: 1em;
    }

    .white-line4 {
        width: 60%;
        margin-top: 2em;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .masterhead-text4 {
        font-size: 1.8em;
        margin-right: 3em;
        margin-left: 3em;
    }

    .dato-logo {
        width: 26em;
        margin-top: -9em;
        margin-left: 3em;
    }

    .white-line4 {
        width: 40%;
        margin-top: 3em;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .masterhead-text4 {
        font-size: 2em;
        margin-right: 4em;
        margin-left: 4em;
    }

    .dato-logo {
        width: 26em;
        margin-top: -9em;
        margin-left: 4em;
    }

    .white-line4 {
        width: 30%;
        margin-top: 3em;
    }
}

.font-weight-bold3 {
    font-weight: 700;
    font-size: 2.444em;
    margin-left: 11.3em;
    margin-top: -15em;
}

.second-text {
    font-weight: 700;
    font-size: 2.1em;
    margin-left: 13em;
}

.smartphone {
    width: 20em;
    margin-left: 5em;
    margin-bottom: -3em;
}

.mappa {
    margin-left: 27em;
}

.vacanzedigital-logo {
    width: 19%;
    margin-left: 39em;
}

.logo-apulia {
    width: 12%;
    margin-left: 41.5em;
}

.masthead.active {
    display: block;
}

#masthead-3 {
    background-image: url("/img/banner-header3.png");
    background-position-y: 40px;
    display: none;
}

#masthead-2 {
    background-image: url("/img/banner-header2.png");
}

#masthead-1 {
    background-image: url("/img/banner-header.jpeg");
}

.white-line1 {
    border: 1px solid white;
    width: 38%;
    margin-left: 4em;
}
.white-line2 {
    border: 1px solid white;
    width: 13%;
    margin-left: 41em;
}
.white-line3 {
    border: 1px solid white;
    width: 13%;
    margin-left: 41em;
}

@media (min-width: 666px) and (max-width: 900px) {
    .smartphone {
        width: 11em;
        margin-left: 5em;
        margin-bottom: 37em;
        margin-top: 2em;
    }

    .font-weight-bold3 {
        font-weight: 700;
        font-size: 1em;
        margin-left: 3em;
        margin-top: -36em;
        font-size: 1em;
    }
    .second-text {
        font-weight: 700;
        font-size: 1em;
        margin-left: 1.5em;
    }
    .mappa {
        width: 16em;
        margin-left: 2.2em;
    }
    .vacanzedigital-logo {
        width: 8em;
        margin-left: 7.5em;
    }
    .logo-apulia {
        width: 5em;
        margin-left: 8.5em;
    }
    .white-line1 {
        border: 1px solid white;
        width: 70%;
        margin-left: 1em;
    }
    .white-line2 {
        border: 1px solid white;
        width: 20%;
        margin-left: 8.8em;
    }
    .white-line3 {
        border: 1px solid white;
        width: 20%;
        margin-left: 8.8em;
    }
}

@media (min-width: 375px) and (max-width: 667px) {
    .smartphone {
        width: 5em;
        margin-left: 8em;
        margin-bottom: 36em;
    }

    .font-weight-bold3 {
        font-weight: 700;
        font-size: 1em;
        margin-left: 3em;
        margin-top: -36em;
        font-size: 1em;
    }
    .second-text {
        font-weight: 700;
        font-size: 1em;
        margin-left: 1.5em;
    }
    .mappa {
        width: 16em;
        margin-left: 2.2em;
    }
    .vacanzedigital-logo {
        width: 8em;
        margin-left: 7.5em;
    }
    .logo-apulia {
        width: 5em;
        margin-left: 8.5em;
    }
    .white-line1 {
        border: 1px solid white;
        width: 70%;
        margin-left: 0.5em;
    }
    .white-line2 {
        border: 1px solid white;
        width: 20%;
        margin-left: 8.8em;
    }
    .white-line3 {
        border: 1px solid white;
        width: 20%;
        margin-left: 8.8em;
    }
}

h1,
h5 {
    color: white;
    font-size: 7vh;
}

.vacanze-digital-custom {
    color: #ffd751;
}
.form-control.error {
    border-color: #e60000;
}
label.error {
    margin: 4px 0;
    color: #e60000;
    font-size: 12px;
}
.modal-content {
    padding: 10px;
}
.custom-yellow {
    color: #ffd751;
}

.landing-page-c {
    margin-top: -45em;
    margin-left: 9em;
}

.row1 {
    background-image: url("/img/3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.row2 {
    background-image: url("/img/6.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row2 {
        background-position: right;
    }
}

.h2-dato {
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    font-weight: bold;
}

.h2-dato-blue {
    font-size: 2.5em;
    text-align: center;
    font-weight: bold;
    color: #1a1857;
}

.img-fluid1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.h4-dato-white {
    color: #fff;
    font-size: 1.5em;
    width: 22em;
    font-weight: bold;
    margin-left: 0em;
    height: 12em;
    font-family: auto;
    text-align: center;
}

.h4-dato {
    color: #fff;
    width: 22em;
    font-weight: bold;
    margin-left: 2em;
    height: 12em;
}

.h4-dato-blue {
    color: #1a1857;
    font-size: 2.5em;
    text-align: center;
    font-weight: bold;
}

.h4-dato-text {
    color: #1a1857;
    margin-left: 3em;
}

.row3 {
    background-image: url("/img/8.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row3 {
        background-position: left;
    }
}

.row4 {
    background-image: url("/img/11.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row4 {
        background-position: right;
    }
}
.row5 {
    background-image: url("/img/14.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row5 {
        background-position: left;
    }
}
.row6 {
    background-image: url("/img/17.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row6 {
        background-position: right;
    }
}
.row7 {
    background-image: url("/img/20.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row7 {
        background-position: left;
    }
}
.row8 {
    background-image: url("/img/23.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row8 {
        background-position: right;
    }
}
.row9 {
    background-image: url("/img/26.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row9 {
        background-position: left;
    }
}
.row10 {
    background-image: url("/img/29.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 375px) and (max-width: 884px) {
    .row10 {
        background-position: right;
    }
}
.row11 {
    background-image: url("/img/31.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

form {
    margin-top: -16em;
    margin-right: -7em;
}

@media (min-width: 375px) and (max-width: 884px) {
    .h4-dato-text {
        margin-left: 1em;
    }

    .h4-dato {
        color: #fff;
        width: 15em;
        font-weight: bold;
        margin-left: 0em;
        height: 12em;
    }

    form {
        width: 22em;
    }

    .h4-dato-white {
        color: #fff;
        font-size: 1.5em;
        width: 16em;
        font-weight: bold;
        margin-left: 0em;
        height: 13em;
        font-family: auto;
        text-align: center;
    }

    .img-fluid1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20em;
    }
}

section.ok {
    background-color: #555;
}

.scroll-down {
    opacity: 1;
    -webkit-transition: all 0.5s ease-in 3s;
    transition: all 0.5s ease-in 3s;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -16px;
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    background-size: 14px auto;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    transform: scale(1);
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    60% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}
form.dato-contact label {
    color: white;
}