*{box-sizing: border-box; margin: 0;}
@font-face{ src: url("poiret.ttf"); font-family: encabezado;}
@font-face{ src: url("Prompt-ExtraLight.ttf"); font-family: parrafos;}
@font-face{ src: url("Quintessential-Regular.ttf"); font-family: titulos;}
@font-face{ src: url("Prompt-Regular.ttf"); font-family: listas;}

h1,h2,h3,h4,h5{font-family: titulos;}
p{ font-family: parrafos; }
nav li{font-family: listas;}

/*encabezado------------------------------------------*/
header{width: 100%;display: flex;flex-direction: column;height: auto;}
        .contacto{padding: 10px;background-color:rgba(9, 48, 103, 1.0) ;width: 100%;display: flex;
          justify-content: space-between;color: #D0D3D4;}
          .contacto2{padding: 10px;background-color:rgba(9, 48, 103, 1.0) ;width: 100%;display: flex;
          justify-content: space-between;color: #D0D3D4; position: fixed;z-index: 10;transition: 1s;}

        .logo{width: 100%;height: auto;display: flex;justify-content: center;align-items: center;margin-top: 30px;}
           .imglogo{width: 150px;height: 150px;margin-right: 20px;}
                   .imglogo img{width: 100%;height: 100%;}
            .logo h1{letter-spacing: 15px;font-size: 30pt;text-shadow: 0px 0px 2px #C7B754;font-family: encabezado;}
                   .tocho {font-size: 50px;text-shadow: 1px 1px blue;}
                   .logo a{text-decoration: none;color: inherit;}

        nav{width: 100%;height: auto;display: flex; flex-direction: column;padding-bottom: 0px;}
            nav p{float: left;font-family:listas ;margin-left: 10px;font-size: 15pt;}
            nav img{width: 40px ;height: 30px;margin-left: 30px;cursor: pointer;float: left;}
             ul{padding: 0;list-style-type: none;margin: 0 auto;transition: 0.5s;}
             nav a{display: block; text-align: center;text-decoration: none;height: 40px;margin-top: 5px;
                   font-size: 20pt;padding-top: 3px;background-image:linear-gradient( to right,rgba(9, 48, 103, 1.0) ,rgba(9, 48, 103, 1.0));
                   background-size: 0% 5px;background-repeat: no-repeat;background-position: bottom left;color: inherit;transition: 1s; }
             nav a:hover {background-size: 100% 5px;}

       .encabefoto{width: 100%;height: auto;display: flex;position: relative;}
                 .alcala1{background-image: url(fotos/alcala5.jpg);background-size: cover;background-repeat: no-repeat;
                                           background-position: center center;transition: 1s;}
                 .alcala3{background-image: url(fotos/alcala3.jpg);background-size: cover;background-repeat: no-repeat;
                                           background-position: center center;transition: 1s;}
                 .encabefoto div{width: 100%;height: 400px;display: flex;justify-content: center;align-items: flex-end;}
                 .encabefoto img {width: 100%;height: 100%;}
                 .quijote{background-image: url(fotos/alcala.jpg);background-size: cover;background-repeat: no-repeat;
                                            background-position: center left; }
                 div .siempre{;padding: 70px; color: white;font-size: 40px;
                    position: absolute;}


/*cuerpo----------------------------------------------------*/
main{width: 80%;height: auto;max-width: 1200px;margin: 0 auto;display: flex;flex-direction: column;}  
    
    .entrada{width: 100%;height: auto;padding: 50px;background: linear-gradient( to right,rgba(9, 48, 103, 1.0), white)}
            .entrada p{ text-align: center;line-height: 50px;font-size: 20pt;padding: 50px;} 
            .entrada hr{height: 5px;background: linear-gradient(to left,#C7B754 ,white,transparent);border: 0px;width: 100%;}

    .entrada2{width: 100%;height: auto;display: flex;background: #EAEDED;padding-bottom: 20px;transition: 1.5s} 
             .entrada2>div{width: 400px;min-height: 300px;height: auto;display: flex;flex-direction: column;}
             .personal , .compromiso , .profesional {width: 97%;height: 300px;background-size: cover;margin: 5px;
                                                     display: flex;align-items: flex-end;background-position: center center}  
              .personal{background-image: url(fotos/trato.jpg); }                                        
             .compromiso{background-image: url(fotos/compromiso.jpg); } 
             .profesional{;background-image: url(fotos/honestidad.jpg);}  
             .personal div , .compromiso div , .profesional div{width: 100%;height: 50%;display: flex;
                align-items: center;justify-content: center;background-color: rgba(254, 254, 254, 0.8);font-size: 15pt;color: rgb(9, 48, 103) ;
                font-weight: bold;transition: 1.5s;text-align: center;}
             .personal div:hover , .compromiso div:hover , .profesional div:hover{opacity: 0;}

             .entrada3{width: 100%;height: auto;background:#EAEDED;} 
             .entrada3 hr{width: 100%;max-width: 200px; height: 5px; background-color: #C7B754;border: none;margin: 35px auto;margin-bottom: 20px;}
             .entrada3 p{ font-size: 17pt;text-align: center;line-height: 40px; ;padding: 0 20px;}


 /*metodos de trabajo------------------------------------------- */   
        .entrada4{width: 100%;height: auto;padding: 20px;display: flex;flex-direction: column;margin-top:50px ;}  
                 .entrada4 h2{font-size: 30pt;}
                 .entrada4 hr{height: 5px; background: linear-gradient(to right ,#C7B754 ,transparent );border: none;margin-bottom: 20px;} 
        .metodo{width: 100%;height: auto;min-height: 150px;display: flex;transition: 1s;}
               .ico{width: 30%; font-size: 40pt;text-align: center;color: rgba(9, 48, 103, 1.0);display: flex;align-items: center;
                    justify-content: center;}  
               .trabajo{width: 70%;font-size: 15pt;padding: 30px 15px;display: flex;align-items: center;} 
        #metodo1 ,#metodo2 ,#metodo3 ,#metodo4{transition: 1.5s;}

         .metodo:hover{box-shadow: 0 0 5px rgb(9, 48, 103);}                


/*pie de pagina----------------------------------------------------*/            
footer {width: 100%;height: auto;background-color: rgba(9, 48, 103, 1.0 );}
       .legales {width: 100%;display: flex;justify-content: space-between;}
       .legales div{width: 300px;height: auto;background-color: ;padding: 30px 20px 30px 20px;}
                   .legales h4{color: #EAEDED;margin-bottom: 5px;text-decoration: underline;text-decoration-color: #C7B754; }
                   .legales p{color: #D0D3D4;margin-bottom: 5px;font-style: italic}
                   .legales a {text-decoration: none;color: #D0D3D4;display: inline;}
                   .legales a:hover{background: #C7B754;color:rgba(9, 48, 103, 1.0 ) ;}
                   .telep{margin-right: 5px;}
                   
        .copy p{color: #D0D3D4;text-align: center;padding-bottom: 10px;} 
        .copy a{color: inherit;text-decoration: none;}