/* * * * * * * * H E A D E R * * * * * * * */

* {
    margin: 0;
    padding: 0;
    
}

html {
     height: 100%;
     width: 100%;
      /*overflow:hidden; */
}

body{
    background-image: url("../img/fondo.jpg");
    overflow-x:hidden;
    
}

.principal {
    width: 100%;
    height: 100%;   
    padding:auto;
}

header{
    
    /*background-color: #124D68;*/
    padding-top: 10px;
    color: #F0F6F8;
    display: inline-block;
    width:100%;
    margin:auto;
}

.logo{
    float:left;
    margin-left:30px;
}

.logo h2{ margin-left: 25px;}

.experiencia{
    width: 55%;
    float:left;    
    font: italic bold 25px arial, sans-serif;   
    text-align: center;
}

.par{
    color:#EF8307;
}

.sesion{
    width: 15%;
    float:right;
    margin-right:50px;
}
/*propiedades del boton*/
.session{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #F0F6F8;    
    border-radius: 6px;
    border: 2px solid #F3AB4E;
    float:right;
  }
  
  
 /* * * * * * * * N A V  * * * * * * * */ 
 
 nav {
    /*background-color:#EF8307;*/
    width:90%;
    text-decoration: none;
    padding: 20px;
    text-align:center;
    margin: 20px auto;
    display: block;

 }
 .minimo{
    text-align: center;
    display: none;
    border-radius: 6px;
    border: 2px solid #FFFFFF;
 }
 
 .menus{
    width: 80%;
    margin:10px auto;
    text-align: center;
 }
 nav .menus ul{
    list-style:none;



}
 nav .menus ul li{
    text-decoration: none;
    float: left;
    font-weight: 600;
    font-size: 22px;   
    margin-left:30px;      
 }

 nav .menus ul li a{
    text-decoration: none;
    color: #EF8307;
    font-weight: 600;
    font-size: 25px;    
    margin-right:40px;
 }

 nav .menus ul li a:hover { 
    color: #F0F6F8; 
    font-weight: bold; 
} 

/* * * * * * * * S E C T I O N * * * * * * * */

section{
    margin-top: 60px;
}

#container-main{
    margin:20px auto;
    width:95%;
    min-width:320px;
    max-width:960px;    
}
 
#container-main h1{
    font-size: 40px;
    text-shadow:4px 4px 5px #16a085;
    color:#fff;
    margin-bottom: 20px;
   
}
 
.accordion-container {
    width: 100%;
    margin: 0 10 20px;
    margin-bottom: 20px;
    clear:both;
}
 
.accordion-titulo {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 24px;
    font-weight: 300;
    background: #2c3e50;
    color: #fff;
    text-decoration: none;
}
.accordion-titulo.open {
    background: #EF8307;
    color: #fff;
}
.accordion-titulo:hover {
    background: #1abc9c;
}
 
.accordion-titulo span.toggle-icon:before {
    content:"+";
}
 
.accordion-titulo.open span.toggle-icon:before {
    content:"-";
}
 
.accordion-titulo span.toggle-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 38px;
    font-weight:bold;
}
 
.accordion-content {
    display: none;
    padding: 20px;
    overflow: auto;
    color:#fff;
    text-align: justify;
    font-size: 22px; 
}
 
.accordion-content p{
    margin:0;
}
 
    
/* * * * * * * * F O O T E R * * * * * * * * */
footer{
    width:100%; 
    color: #FFFEFD;
    float: left;
    padding-top: 180px;
    padding-bottom:32px;
    
}

.fot{
    float:left;
    margin-left:50px;
    margin-right:25px; 
    font-size: 30px; 
}

.fotlogo{
    float:right;
    margin-right:50px;
    font-size: 23px;

 }
 .fotologo h2{font-size: 25px;}


/***********************************************************/
/* * * * * * * * * * * * M O V I L E S * * * * * * * * * * */
/**********************************************************/

@media only screen and (min-device-width : 320px) 
and (max-device-width : 600px) {

 /* * * * * * * * * HEADER * * * * * * * */   
    header{
         padding-top: 15px;  
         background-color: #2c3e50;
         padding:10px;
    }

    .logo{ 
        width: 100%;
        /*text-align: center;*/
        margin-bottom: 2px;
     }

    .exp{
        display:none;
    }
    .experiencia{
        width: 100%;
        text-align: center;
        margin-left: 1px;        
        font: italic bold 18px arial, sans-serif;   
    }
    .sesion{
        display: none;
    }

/* * * * * * * * * MENU * * * * * * * * * */
   
   nav{
        text-align: left;
        margin-top: 3px;
    }

    .minimo{
        width: 25%;
        display: block;
        margin-left: 0px;
    }  
    .minimo a {
        display:block;
        padding:8px;       
        color:#fff;
        text-decoration:none;
        font-weight: bold;
        font-size:25px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }

    .menus{
        text-align: left;
        background-color:#EF8307;
        color:#fff;
         width:80%;
        width:80%;
        height:100%;
        left:-100%;
        margin:0;
        position: fixed;
        z-index: 100;
    }

    nav .menus ul li{
        text-decoration: none;
        float: none;
        font-weight: 600;
        font-size: 21px;
        padding: 10px;
        border-bottom:1px solid rgba(255,255,255, .3);    
    }

    nav .menus ul li a{
        text-decoration: none;        
        font-weight: 600;
        font-size: 18px;    
        margin-left:20px;
        color: #fff;

    }

  /* * * * * * * SECTION * * * * * * * */
   section{ margin-top: 0px;}
    
    #container-main{
        margin:10px auto;
        width:60%;       
    }
     
    #container-main h1{
        font-size: 25px;
        text-shadow:3px 3px 3px #16a085;
        color:#fff;
        margin-bottom: 15px;
    }
     
    .accordion-container {
        width: 90%;
        margin: 0 0 20px;
        clear:both;
        margin-left:5px;
    }
     
    .accordion-titulo {
        position: relative;
        display: block;
        padding: 10px;
        font-size: 24px;
        font-weight: 300;
        background: #2c3e50;
        color: #fff;
        text-decoration: none;
    }

    .accordion-titulo.open {
        background: #EF8307;
        color: #fff;
    }

    .accordion-titulo:hover {
        background: #1abc9c;
    }
     
    .accordion-titulo span.toggle-icon:before {
        content:"+";
    }
     
    .accordion-titulo.open span.toggle-icon:before {
        content:"-";
    }
     
    .accordion-titulo span.toggle-icon {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 38px;
        font-weight:bold;
    }
     
    .accordion-content {
        display: none;
        padding: 20px;
        overflow: auto;
        color:#fff;
    }
     
    .accordion-content p{
        margin:0;
    }




/* * * * * * * * FOOTER * * * * * * * */

    footer{
        width:100%; 
        color: #FFFEFD;
        float: left;
        padding-bottom: 100px;
        }
    
    .fot{
        float:left;
        margin-left:10px;
        font-size: 18px; 
    }   
    

    .fotlogo{
        float:right;
        margin-right:50px;

    }
}
    
/*******************************************************/
/* * * * * * * * TABLET * * * * * * * * /
/*******************************************************/
@media only screen and (min-device-width : 601px) 
and (max-device-width : 1080px) {

    body{
      background-image: url("../img/fondoXS.jpg");
    }
     header{
        width: 100%;
        padding-top: 18px;         
        padding:10px;
    }

    .logo{ 
        width: 28%;
        /*text-align: center;*/
        margin-bottom: 5px;
        margin-left: 2px;
        float:left;
       
    }
    .logo h2{
          margin-left: 15px;
     }

    .experiencia{
        width: 70%;      
        margin-left: 1px;        
        font: italic bold 22px arial, sans-serif; 
        float:left;
        text-align: left;     
    }

    .sesion{
        display: none;
    }

    /* * * * * * * * * MENU * * * * * * * * * */
   
   nav{
        text-align: left;
        margin-top: 3px;
    }

    .minimo{
        width: 15%;
        display: block;
        margin-left: 0px;
        clear: left;
    }  
    .minimo a {
        display:block;
        padding:10px;       
        color:#fff;
        text-decoration:none;
        font-weight: bold;
        font-size:25px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }

    .menus{
        text-align: left;
        background-color:#EF8307;
        color:#fff;         
        width:70%;
        height:100%;
        left:-100%;
        margin:0;
        position: fixed;
        z-index: 100;
    }

    nav .menus ul li{
        text-decoration: none;
        float: none;
        font-weight: 600;
        font-size: 21px;
        padding: 10px;
        border-bottom:1px solid rgba(255,255,255, .3);    
    }

    nav .menus ul li a{
        text-decoration: none;        
        font-weight: 600;
        font-size: 18px;    
        margin-left:20px;
        color: #fff;

    }

/* * * * * * * * * SECTION * * * * * * * * * */

    section {
        margin-top: 0px;
    }

    .accordion-container {
        width: 80%;
        margin:20px auto;
    }
    
    #container-main h1{ margin-left:80px; }

    #accordion-content{ font-size: 22px;  }

}

/***********************************************************/
/* * * * * * * * * * * TABLET XS * * * * * * * * * * * * * */
/***********************************************************/
@media only screen and (min-device-width : 1080px) 
and (max-device-width : 1280px) {

    body{ background-image: url("../img/fondoXS.jpg"); }

/* * * * * * * * * HEADER * * * * * * *  * */
    header{
        margin-top: 10px;
    }

    .logo{ 
        width: 15%;       
        margin-bottom: 5px;
        float: left;
        margin-left: 20px;       
     }

     .logo h2{
          margin-left: 15px;
     }

     .experiencia{
        width: 55%;
        font: italic bold 25px arial, sans-serif;
        float: left;
        text-align: center; 
        text-align: right;;      
     }


     /* * * * * * * * * * MENU  * * * * * * * * */
     nav{
        clear:left;
        margin: 0px auto;
        width:90%
     }
     
     .menus{
        width:88%;
        font-size: 22px
   
     }    

    nav .menus ul li a { font-size: 22px; }

    


    
}