.myimage{
    height: 50px;
    width: auto;
}

@font-face {
    font-family: 'Montserrat', sans-serif;
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}


.mytitle{
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: rgba(0,0,0,0.7);
}

a{
    color: rgba(0,0,0,0.7);
    text-decoration: none; 
}

a:hover{
    text-decoration: none; 
}
/* ESTILOS NORMALES (para escritorios muy grandes)*/

/* ++++++++++++++++++++++++++++++++++++++ */

body{
    margin: 0;
    padding: 0;
    background: url("../img/pattern.svg") repeat;
    background-color: #fff;
    position: relative; /* Necesario para que ::before se posicione sobre este elemento */
    z-index: 0;

}

.btn, .panel{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.10);
}


/*========================================*/
/* CSS PANTALLA DE CARGA*/
/*========================================*/
.spinner {
    margin: 200px auto;
    width: 60px;
    height: 80px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #4f2c1d;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}




/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.5s;
    animation-name: animatebottom;
    animation-duration: 0.5s
}

@-webkit-keyframes animatebottom {
    from { opacity:0 } 
    to {opacity:1 }
}

@keyframes animatebottom { 
    from{ opacity:0 } 
    to{ opacity:1 }
}

#myDiv {
    display: none;
}


/*RESPONSIVE*/
/* Tablets en horizonal y escritorios normales */
@media (min-width: 768px) and (max-width: 1199px) { 
    .myimage{
        height: 40px;
        width: auto;
    }

    .mytitle{
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: rgba(0,0,0,0.7);  
        font-size: 1em;
    }

    a{
        color: rgba(0,0,0,0.7);
        text-decoration: none; 
    }

}
/* Móviles en horizontal o tablets en vertical*/
@media (max-width: 767px) { 

    .myimage{
        height: 60px;
        width: auto;
    }

    .mytitle{
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: rgba(0,0,0,0.7);  
        font-size: 1.5em;
    }

    a{
        color: rgba(0,0,0,0.7);
        text-decoration: none; 
    }
}

/*Móviles en vertical*/
@media (max-width: 480px) { 

}