/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2/12/2018, 04:22:39 PM
    Author     :  MYSTERIOUS WEB DEVELOPER

*/

/*++++++++++++----------        DISPOSIIVOS MOVILES     ---------++++++++++++++++++++++++*/
@media only screen and (max-width: 900px) {
    #div-logo{
    display:none;
    }
    #div-menu{
        display:none;
    }
    .header{
        width: 100%;
        overflow: AUTO;
        border-bottom: 1px solid lightgray;
    } 
    #div-logo-movil{
        width: 100%;
        overflow: auto;
        float:left;
        text-align: center;

    }
    #div-logo-movil img{
        padding-left: 20%;
        padding-right: 20%;
        width: 60%;
        margin-top: 5px;

    }

    #div-menu-movil{
        float:left;
        width: 100%;
        overflow: auto;
    }
    .menu-barra{
       width: 100%;
       height: 20px;
       padding-top: 20px;
       float:left;
       text-align: center;
       display: none;
    }
    .menu-opcion{
        width: 100%;
        height: 20px;
        padding-top: 10px;
        float:left;
        text-align: center;
        cursor: pointer;
        color:gray;
    }
    .menu-opcion a{
        text-decoration: none;
        color:gray;        
    }
    .menu-opcion a:hover{
        color:black;
        text-decoration: underline;
    } 
}

/*++++++++++++----------      ESCRITORIO   ---------++++++++++++++++++++++++*/
@media only screen and (min-width: 901px){

    #div-logo-movil{
        display:none;
    }
    #div-menu-movil{
        display:none;
    }
    .header{
        width: 100%;
        height: 100px;
        border-bottom: 1px solid lightgray;
    } 
    #div-logo{
        width: 50%;
        height: 100%;
        float:left;

    }
    #div-logo img{
        padding-left: 20px;
        height: 80px;
        margin-top: 5px;

    }
    
    #div-menu{
        float:left;
        width: 50%;
        height: 100px;
    }
    .menu-barra{
       width: 25%;
       height: 20px;
       padding-top: 20px;
       float:left;
       text-align: center;
    }
    .menu-opcion{
        width: 25%;
        height: 20px;
        padding-top: 10px;
        float:left;
        text-align: center;
        cursor: pointer;
        color:gray;
    }
    .menu-opcion a{
        text-decoration: none;
        color:gray;        
    }
    .menu-opcion a:hover{
        color:black;
        text-decoration: underline;
    }
}

body{
  font-family: "Gadugi"; 
}
h1{
      font-family: "Gadugi"; 
}