:root {

    --green: #28a745;
    --white: #fff;
    --light: #f8f9fa;
    --dark: #343a40;
    --metia-graylight: #f4f4f4;
    --metia-gray: #D1D3D4;
    --metia-graydark: #44515C;
    --metia-black: #29353A;
    --metia-blue: #6B96BF;
    --metia-yellow: #D8D453;
    --metia-black2: #231F20;
    --metia-bluelight: #AADCE4;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}
html, body { overflow: hidden; height: 100%;}
body {
    margin: 0; 
    padding: 0; 
    background: rgba(255, 255, 255, 0.5) url(../images/login-fondo.png) repeat-x 50% 50% / cover;
}

@font-face {
    font-family: 'RegularFont';
    src: /*url('myfont.woff') format('woff'),  Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.div-img {
    position: absolute;
    top: 20px;
    left: 50px;
}

.container-fluid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-family: RegularFont;
    color: var(--light);
    letter-spacing: 2px;
    font-weight: 400;
    font-size: 12px;
}

.text-center {
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-weight: 800;
    font-family: RegularFont;
}

.form-control {
    border-radius: 25px;
    background-color: transparent;
    color: white;
    padding: 0 20px;
    font-size: 12px;
    letter-spacing: 0.2rem;
}

.col-sm-6 > input {
    border-radius: 25px;
    opacity: 0.9;
    background-color: white;
    border-color: white; 
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
}

.col-sm-6 > input:hover {
    background-color: var(--metia-graydark); 
    font-weight: 950;
    color: white;
}

@media (min-width:768px) {
    .container-fluid{
        width: 400px;
    }
}