body {
    padding-left: 1px;
    padding-right: 1px;
}



.panel-heading {
    height: 50%;
    background-color: orange;
}



.box-container {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 350px;
    width: 700px;
    transform: translateX(-50%);
}

.form-items{

}

/* hide mobile version by default */
.logo .mobile {
    display: none;
}
.banner .mobile {
    display: none;
}
/* when screen is less than 600px wide
     show mobile version and hide desktop */
@media (max-width: 500px) {
    .logo .mobile {
        display: block;
    }
    .banner .mobile {
        display: block;
    }

    .logo .desktop {
        display: none;
    }

    .banner .desktop {
        display: none;
    }

    .box-container {
        position: absolute;
        z-index: 100;
        left: 50%;
        top: 200px;
        width: 350px;
        transform: translateX(-50%);
    }

    .form-items {
        width: 320px;
    }


}


.logo .desktop {
    position: absolute;
    z-index: 100;
    left: 46%;
    top: 30px;
    width: 40%;
    height: auto;
    transform: translateX(-50%);
}

.logo .mobile {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 30px;
    width: 50%;
    height: auto;
    transform: translateX(-50%);
}


.banner .mobile {
    width: 90%;
    height: auto;
}

.banner .desktop{
    width: 83%;
    height: auto;
}

.facebook {
    width: 10%;
    height: auto;
}