@charset "utf-8";

body {
    background: #0264d6;
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #0264d6), color-stop(100%, #1c2b5a));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, #dae2eb 1%, #1c2b5a 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0264d6', endColorstr='#1c2b5a', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    height: 90vh;
    width: 100%;
    color: #606468;
    font: 87.5%/1.5em 'Open Sans', sans-serif;
    margin: 0;
    overflow: hidden;
}

label, a, .form-title {
    color: #fff;
}

form {
    margin: 0 5rem;
}

img{
    display: block;
    margin: 0 auto;
    max-width: calc(100% - 5rem)
}

.grid {
    height: calc(100vh - 10rem);
    align-items: center
}

.grid__2 > div {
    width: 100%;
    justify-items: center;
}

.form-title {
    text-align: center;
    font-weight: bold
}

/* 67.5rem: 1040px */
@media only screen and (max-width: 65rem){
    .form-login {
        grid-row: 1;
        grid-column: 1/3
    }

   .logo-login {
       display: none
   }
}

/* 37.5rem: 600px */
@media only screen and (max-width: 37.5rem) {
    form {
        margin: 0 1rem
    }
}