@font-face {
    font-family: 'Montserrat-UltraLight';
    src: url('../fonts/Montserrat-UltraLight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Light';
    src: url('../fonts/Montserrat-Light.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/Montserrat-Bold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('../fonts/Montserrat-SemiBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Montserrat-UltraLight';
    color: #000000;
    background-color: #ffffff;
}

a {
    color: #000000;
    text-decoration: underline;
}

a:hover {
    color: #000000;
    text-decoration: none;
}

h1 {
    font-family: 'Montserrat-Bold';
    font-size: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    font-family: 'Montserrat-SemiBold';
}

h2.headline {
    font-size: 35px;
    font-weight: bold;
}

h3 {
    font-family: 'Montserrat-Bold';
    font-weight: 800;
}

.montserrat-bold {
    font-family: 'Montserrat-Bold';
}

.montserrat-semibold {
    font-family: 'Montserrat-SemiBold';
}

.montserrat-light{
    font-family: 'Montserrat-Light';
}

.screenshot {
    border-radius: 7px;
}

nav#header {
    min-height: 100px;
    background-color: #ffffff;
    opacity: 0.8;
    border-bottom: 5px solid rgba(167, 20, 63, 1);
}

nav#header ul li {
    padding: 0 30px 0 30px;
    text-transform: uppercase;
    cursor: pointer;
}

nav#header ul li a {
    color: #000000;
    font-weight: bold;
    font-size: 19px;
    text-decoration: none;
}

nav#header ul li a:hover {
    color: #000000;
    text-decoration: underline;
}

#welcome {
    background: url('../imgs/backgrounds/welcome-background.png') no-repeat;
    background-size: auto;
    background-size: 1920px;
    background-position-x: 0%;
    background-position-x: center;
    margin-top: -100px;
    color: white;
}

#welcome .mobile, #welcome .apps_icons, #welcome .headline-texts {
    padding-top: 5em;
}

.app_stores_icons img {
    width: 150px;
}

.social_networks_icons img {
    width: 100%;
    max-width: 50px;
}

.transport_icons img {
    width: 100%;
    max-width: 60px;
}
#welcome .soon {
    font-size: 30px;
    font-weight: bold;
}

#travel, #pay_go {
    background: url('../imgs/backgrounds/mapa-background.png') no-repeat;
    background-size: auto;
    background-size: 1920px;
    background-position-x: 0%;
    background-position-x: center;
}

.mobile {
    width: 330px;
}

#direction {
    background: url('../imgs/backgrounds/direction-background.png') no-repeat;
    background-size: auto;
    background-size: 1920px;
    background-position-x: 0%;
    background-position-x: center;
}

footer {
    background: url('../imgs/backgrounds/footer-background.png') no-repeat;
    background-size: auto;
    background-size: 1920px;
    background-position-x: 0%;
    background-position-x: center;
    color: #000000;
}

.font-size-18 {
    font-size: 18px;
}

.margin-bottom-05-rem {
    margin-bottom: 0.5rem !important;
}

.color-cred {
    color: rgba(167, 20, 63, 1);
}

.border-radius-25 {
    border-radius: 25px !important;
}

#vop ol {
    counter-reset: item;
    list-style-type: none;
}

#vop ol > li {
    counter-increment: item;
}

#vop ol > li::before {
    content: counters(item, '.') ' ';
}

#vop ol, #gdpr ol{
    padding-top: 12px;
    padding-bottom: 15px;
}

#vop ol > li, #gdpr ol > li {
    padding-bottom: 6px;
}

.screenshot-happyway-text {
    padding-left: 0;
}

@media screen and (min-width: 768px) {
    .screenshot-happyway-text {
        padding-left: 150px;
    }
}