@font-face {
        font-family: 'RobotoThin';
        src: url("../fonts/RobotoThin.ttf");
    }
    @font-face {
        font-family: 'RobotoRegular';
        src: url("../fonts/RobotoRegular.ttf");
    }
    @font-face {
        font-family: 'RobotoCondensedLight';
        src: url("../fonts/RobotoCondensedLight.ttf");
    }

    .grupo {
        font-family: "RobotoThin";
        color: #000000;
        font-size: 24px;        
    }
    
    .instrucciones {
        font-family: "RobotoCondensedLight";
        color: #000000;
        font-size: 20px;  
        text-align: justify;
        text-justify: inter-word;
    }
    
    .colorcorner {
        border-radius: 25px;
        border: 2px solid;
        padding: 20px; 
        width: 100%;
        margin: 10px 0px;
    }
    
    .logo {
        font-family: "RobotoThin";
        color: #FFFFFF;
        font-size: 28px;
    }
    
    body {        
        font-family: 'RobotoRegular', sans-serif;
        padding-top: 100px;
        padding-bottom: 20px;
    }
    
    .navbar-inverse {
        /*background-color: #771227;*/
        background-color: #950909;
        border-color: #771227;
    }            
    
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>li>a:hover,
    .navbar-inverse .navbar-nav>.open>a:link, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a {
        /*background-color: #950909;*/
        background-color: #771227;
    }
    
    .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
        color: #555;
        background-color: #f5f5f5;
        border-color: #f5f5f5;
    }
    
    .navbar-inverse .navbar-toggle {
        border-color: transparent;
    }
    
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: white;
    }
    
    .navbar-inverse .navbar-brand.logo:hover {
        background-color: #950909;
    }
    
    .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>li>a {
        color: white;
    }   
    
    .panel-black {
        border-color: #eee;                
    }

    .panel-black .panel-heading {
        color: white;
        border-color: #eee;
        background-color: #950909;
    }
    
    @media (min-width: 361px) and (max-width: 767px) {
    
        .container.login{
            width: 75%;
        }
    }
    
    @media (max-width: 361px) {
    
        .logo {
            font-family: "RobotoThin";
            color: #FFFFFF;
            font-size: 20px;
        }
    }