:root {
    --primary: #2C2E3A;
    --primary-dark: #171925;
    --button-1: #E23E34;
    --button-2: #E47E34;
    --button-3: #249DBA;
    --button-4: #2A3350;
    --button-5: #EB6530;
    --button-1-dark: #D72519;
    --button-2-dark: #DF701D;
    --button-3-dark: #168FAC;
    --button-4-dark: #18223D;
    --button-5-dark: #E44A0A;
}

/** Reset HTML styles */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

html, body { font-family: 'Open Sans' !important; }
body {
    margin: 0;
}

*[role=button] { cursor: pointer; }

.content {
    background: transparent center top no-repeat;
    background-size: cover;
    margin: 0;
    padding-top: 35px;
    height: 100vh;
    min-height: 700px;
}

.bg-1 {background-image: url('../images/bg-xs-1.jpg'); }
.bg-2 {background-image: url('../images/bg-xs-2.jpg'); }
.bg-3 {background-image: url('../images/bg-xs-3.jpg'); }

.logo {
    background: transparent url('../images/logo-vendelo-l-m-xs.png') center top no-repeat;
    width: 100%;
    height: 75px;
    margin: 35px 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-family: 'Open Sans';
    font-style: normal;
    line-height: 27px;
    text-align: center;
    margin: 40px auto;
}

.title {
    font-family: 'Open Sans';
    text-align: center;
    max-width: 346px;
}

h1 {
    font-weight: 700;
    font-size: 25px;
    line-height: 34px;
}
h6 {
    font-weight: 400;
    font-size: 20px;
}

.alert {
    font-size: 14px;
    color: white;
    font-weight: 300;
    margin: 0 auto 5px;
    padding: 5px;
    text-align: left;
    width: 389px;
}

/* .alert.alert-info { background-color: var(--button-4); }
.alert.alert-warning { background-color: var(--button-2); } */

.form-container h6 {
    color: var(--primary);
    text-align: left;
    width: 100%;
    margin: 0 auto 10px;
    font-weight: 400;
}

.validation-error {
    background-color: var(--button-1);
    border-radius: 25px;
    color: #fff;
    display: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin: 10px auto;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    max-width: 300px;
}

.input-text {
    background-color: #fff;
    color: #C4C4C4;
    display: flex;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 300px;
}

.input-text input[type=email]:active, .input-text input[type=email]:focus, .input-text input[type=email]:hover {
    border-radius: 0;
    outline: 0;
}
.input-text input[type=email] {
    background-color: transparent;
    border: none;
    color: #C4C4C4;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    width: 100%;
    padding: 5px 0 5px 15px;
}

.input-text .input-addon {
    border: none;
    padding: 15px;
}

.btn {
    background-color: var(--primary);
    border-radius: 0 5px 5px 0;
    color: #fff;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
}

.btn:hover { background-color: var(--primary-dark); }

.footer {
    background-color: #fff;
    width: 100%;
    padding: 15px 0;
    margin-top: 25px;
    left: 0;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: var(--primary);
    margin: 10px 0;
}
.footer h5 {
    margin: auto;
    width: 280px;
}

.logos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    padding-bottom: 25px;
}

.logos span { width: 109px; height: 32px; }

.logos span:first-child { margin: 0 10px; }
.logos .logo-app-store { background: transparent url('../images/logo-app-store-xs.png'); }
.logos .logo-google-play { background: transparent url('../images/logo-google-play-xs.png'); }

.left-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: flex-end;
    justify-content: end;
    top: 445px;
    right: 0;
    z-index: 1;
}

.left-panel .btn {
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #FFFFFF;
    transition: font-size .25s, font-weight .25s, line-height .25s, height .25s;
}
.left-panel .btn::before {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 60px;
    line-height: 82px;
    display: flex;
    align-items: center;
    text-align: right;
    height: 54px;
}

.left-panel .btn-1 { background-color: var(--button-1) !important; }
.left-panel .btn-2 { background-color: var(--button-2) !important; }
.left-panel .btn-3 { background-color: var(--button-3) !important; }
.left-panel .btn-4 { background-color: var(--button-4) !important; }
.left-panel .btn-5 { background-color: var(--button-5) !important; }

.left-panel .btn-1::before { content: '1'; color: var(--button-1-dark); margin-right: 15px; }
.left-panel .btn-2::before { content: '2'; color: var(--button-2-dark); margin-right: 15px; }
.left-panel .btn-3::before { content: '3'; color: var(--button-3-dark); margin-right: 15px; }
.left-panel .btn-4::before { content: '4'; color: var(--button-4-dark); margin-right: 15px; }
.left-panel .btn-5::before { content: '5'; color: var(--button-5-dark); margin-right: 15px; }

.left-panel .btn:hover::before { font-size: 80px; }
.left-panel .btn:hover { font-weight: 700; font-size: 16px; line-height: 22px; height: 84px; }

@media screen and (orientation: landscape) {
    .content { min-height: 700px;}
}
@media screen and (min-width: 768px) and (orientation: landscape) {

    .content { background: transparent center top no-repeat; background-size: cover; }

    .bg-1 {background-image: url('../images/bg-m-1.jpg'); }
    .bg-2 {background-image: url('../images/bg-m-2.jpg'); }
    .bg-3 {background-image: url('../images/bg-m-3.jpg'); }

    .form-container {
        position: absolute;
        left: 50px;
        top: 270px;
    }

    .input-text { max-width: 397px; }

    .logo {
        position: absolute;
        float: left;
        left: 50px;
        width: 243px;
    }
    
    .title {
        font-family: 'Open Sans';
        position: absolute;
        float: left;
        left: 50px;
        top: 135px;
        width: 380px;
        text-align: left;
    }

    .subtitle {
        position: absolute;
        float: right;
        right: 50px;
        top: 120px;
    }

    .footer {
        background-color: transparent;
        position: absolute;
        float: left;
        left: 50px;
        bottom: 5%;
        width: 300px;
    }

    .footer h1,
    .footer h2,
    .footer h3,
    .footer h4,
    .footer h5,
    .footer h6 {
        color: white;
        margin: 10px 0;
        width: 100%;
    }

    .left-panel { top: 200px; }
    .left-panel .btn { height: 70px; font-size: 16px; }
    .left-panel .btn::before { font-size: 70px; }
    .left-panel .btn:hover::before { font-size: 90px; }
    .left-panel .btn:hover { font-weight: 700; font-size: 18px; line-height: 31px; height: 90px; }

    .logos span { width: 123px; height: 36px; }
    .logos .logo-app-store { background: transparent url('../images/logo-app-store-l-m.png'); }
    .logos .logo-google-play { background: transparent url('../images/logo-google-play-l-m.png'); }
}

@media screen and (min-width: 1280px) and (orientation: landscape) {
    
    .content { background: transparent center top no-repeat; background-size: cover; }
    .bg-1 {background-image: url('../images/bg-l-1.jpg'); }
    .bg-2 {background-image: url('../images/bg-l-2.jpg'); }
    .bg-3 {background-image: url('../images/bg-l-3.jpg'); }

    .subtitle { font-size: 31px; }

    .left-panel { top: 200px; }
    .left-panel .btn { height: 95px; font-size: 18px; }
    .left-panel .btn::before { font-size: 90px; }
    .left-panel .btn:hover::before { font-size: 130px; }
    .left-panel .btn:hover { font-weight: 700; font-size: 20px; line-height: 31px; height: 132px; }

    .logo { background: transparent url('../images/logo-vendelo-xl.png') center top no-repeat; }
}
@media screen and (min-width: 1440px) and (orientation: landscape) {
    
    .content { background: transparent center top no-repeat; background-size: cover; }
    .bg-1 {background-image: url('../images/bg-xl-1.jpg'); }
    .bg-2 {background-image: url('../images/bg-xl-2.jpg'); }
    .bg-3 {background-image: url('../images/bg-xl-3.jpg'); }

    .validation-error {
        max-width: 413px;
    }

    .title { font-size: 23px; max-width: 380px; }
    .subtitle { top: 110px; font-size: 36px; }

    .input-text { width: 413px; }

    .left-panel { top: 200px; }
    .left-panel .btn { height: 99px; font-size: 20px; }
    .left-panel .btn::before { font-size: 100px; }
    .left-panel .btn:hover::before { font-size: 130px; }
    .left-panel .btn:hover { font-weight: 700; font-size: 23px; line-height: 31px; height: 137px; }

    .logos span { width: 144px; height: 43px; }
    .logos .logo-app-store { background: transparent url('../images/logo-app-store-xl.png'); }
    .logos .logo-google-play { background: transparent url('../images/logo-google-play-xl.png'); }
    
}