
*{box-sizing: border-box; margin: 0;}
@font-face{ src: url("poiret.ttf"); font-family: encabezado;}
*{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;padding: 0px;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: 400px;display: flex;background-image: url(fotos/contacto.jpg);background-size: cover;
                    background-position: center center; }  
                    .titulo1{width: 100%;min-width: 300px;height: auto;display: flex;
                            justify-content: left;align-items: center; }
                            .titulo1 div { border-left: 10px solid #C7B754;border-bottom: 10px solid #C7B754;padding: 10px;
                                         font-size: 20pt;margin-left: 10%; background-color: #EAEDED;}


/*cuerpo----------------------------------------------------*/

main{width: 80%;height: auto;max-width: 1200px;margin: 0 auto;display: flex;flex-direction: column;}
     .entrada0{width: 100%;height: auto;display: flex;justify-content: center;flex-direction: column;}
              .viacon{width: 100%;height: auto;font-size: 20pt;text-align: center;line-height: 50px;padding-top: 50px;}
              .viacon span{font-weight: bold;}
              .iframemaps{width: 100%;height: 400px;margin-top: 50px;}

      .entrada1{width: 100%;height: auto;display: flex;justify-content: space-around;margin: 50px 0px;flex-flow: wrap;}
               .entrada1 div{width: 300px;height: 250px;background-color: #EAEDED; text-align: center;padding: 10px;border: solid #C7B754 ;
                            border-radius: 10px;margin: 5px 5px;}
               .iconocon{ color: rgba(9, 48, 103, 1.0);font-size: 40pt;margin-bottom: 20px; } 
               .entrada1 h2{margin-bottom: 20px;}  
               .entrada1 p {font-size: 14pt;} 
               .entrada1 address{ font-size: 15pt;font-style: inherit; }    
               .entrada1 a{text-decoration: none;color: inherit;font-family: parrafos;}

.entrada2{width: 100%;height: auto;margin: 50px 0;} 
          form{width: 100%;;margin: 10px 10px;}
             label{width: 10%;height: 60px;display: block;float: left;margin-bottom:30px ;
                   text-align: center;padding: 5px;border: solid 2px rgba(9, 48, 103, 1.0);border-right: none;
                   border-radius: 5px 0px 0px 5px;background-color: #EAEDED;}
             input{width: 90%;height: 60px;display: block;float: left;margin-bottom:30px;
                   border: solid 2px rgba(9, 48, 103, 1.0);border-left: none;border-radius: 0px 5px 5px 0px; 
                   font-size: 15pt;padding-left: 20px;} 
            input:focus , textarea:focus {outline: none; background-color: rgba(199, 183, 84, 0.3) ;}
            .tarea{height: 300px;}
            textarea {height: 300px;width: 90%;font-size: 15pt;border: solid 2px rgba(9, 48, 103, 1.0);border-left: none;
                border-radius: 0px 5px 5px 0px;outline: none;padding-left: 20px;margin-bottom: 30px;}
            .iconofor {font-size: 30pt;padding-top: 5px;color: rgba(9, 48, 103, 1.0);margin-right: 20px;}  
            button{display: block;margin: 0px auto;width: 200px; height: 60px;border: solid 2px rgba(9, 48, 103, 1.0);
                   border-radius: 5px;font-size: 20pt;margin-top: 50px;} 
            button:hover{background-color:rgba(199, 183, 84, 0.3) ;cursor: pointer;}
            #robot{
                width: 260px;
                background: none;
                border: none;
                height: auto;
                margin-bottom: 0;
            }
            #robotInput{
                width: 30px;
                height: 30px;
                margin-bottom: 0;
            }

/*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;c; }
                   .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;}





    