html, body {
    font-family: 'Josefin Sans', sans-serif;
    height:100%;
    background-color: #ffffff;
}

.left-section {
    background-color: hsl(0, 100%, 98%);
    background-image: url(../images/bg-pattern-desktop.svg);
    background-size: cover;
}
.logo{
    padding: 8% 0 0 20%;
}

.heading {
    font-family: 'Josefin Sans', sans-serif;
    padding: 15% 20% 0 20%;
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 15px;
    color: hsl(0, 6%, 24%);
}
span.h1-colored {
    color: hsl(0, 36%, 70%);
    font-weight: 300;
}

.message {
    font-family: 'Josefin Sans', sans-serif;
    padding: 0 15% 2% 20%;
    font-size: 1rem;
    color: hsl(0, 36%, 70%);
}
.form-group{
    width: 100%;
    position: relative;
}
.form-control-custom{
    width: 80%;
    border: 1px solid hsl(0, 36%, 70%);
    border-radius: 50px;
    background-color: transparent;
    color: hsl(0, 36%, 70%);
    font-size: 0.9rem;
    height: 60px;
    opacity: 50%;
}
.form-control-custom-alert{
    border: 2px solid hsl(0, 93%, 68%);
}

.form-inline {
    padding: 0 10% 0 20%;
}
.btn-custom{
    width: 100px;
    height: 60px;
    border: none;
    color: #ffffff;
    font-size: 2rem;
    margin-left: -170px;
    border-radius: 50px;
    background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
    z-index: 1;
    box-shadow: 0.2em 0.2em 1em hsl(0, 30%, 68%);
}
.right-section{
    background-image: url(../images/hero-desktop.jpg);
    background-repeat: no-repeat;
    width: 610px;
    height: 800px;
}

.input-msg{
    font-family: 'Josefin Sans', sans-serif;
    color: hsl(0, 6%, 24%);
}
.icon-error{
    position: relative;
    left: -100px;
}

button:focus, input:focus{
    outline: none;
}

.shadow-button{
    box-shadow: 0.3em 0.3em 1em hsl(0, 50%, 68%);
}


/* Mobile Layout */
@media (min-width: 992px) {
    .logo-mobile{
        visibility: hidden;
    }
}
@media (max-width: 992px) {
    .container{
        width: 100%;
        text-align: center;  
        background-color: hsl(0, 100%, 98%); 
    }
    .right-section{
        background-image: url(../images/hero-mobile.jpg);
        width: 375px;
        height: 420px;
    }
    .left-section{
        margin-top: -190px;
        z-index: 1;
        background-image: none;
        background-color: hsl(0, 100%, 98%);
    }
    .right-section{
        margin-top: -120px;
    }
    .row{
        box-shadow: none!important;
    }
    .heading {
        text-align: center;
        font-size: 2.5rem;
        letter-spacing: 8px;
        padding: 3% 20% 0 20%;
    }
    .logo{
        visibility: hidden;
    }
    .logo-mobile{
        width: 40%;
        padding: 10% 0 0 10%;
    }
    .message {
        padding: 0 10%;
        text-align: center;
    }

    .form-inline {
        padding: 0;
        text-align: center;
    }
    .form-control-custom{
        margin: 0 auto;
        height: 50px;
    }
    .btn-custom{
        width: 80px;
        font-size: 1.5rem;
        margin-left:-110px;
        height: 50px;
    }
}