html,
 body {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;  
    width: 100%; 
 }
 
 /* css para logo*/
 
.logosize {
    float: left;
    margin: 70px 70px 25px 20px; 
 }
 /*Fin*/

#box1 {
    font-size: 1.2em;
    margin-right: 50px;
}
 .header {
     background: url("img/background.gif") center center;
     background-size: cover;
     height: 100vh;
     text-align: center;
 }

 .header .container {
     position: relative;
     top: 160px;
 }

 .header h1 {
     color: #fff;
     padding-top: 50px;
     font-size: 5.3em;
     margin-top: 0;
     margin-bottom: 80px;
     text-transform: uppercase;
 }

.header p {
    background-image: linear-gradient(to left top, #73e8e5, rgb(24, 104, 156));
    color: #0D2229;
    font-weight: 600;
    letter-spacing: 5px;
    margin: 0 auto;
    text-transform: uppercase;
    opacity: 0.6;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
     }
 h1 {
    padding-top: 60px;
    text-align: center;
    
}
h2 {
    margin-left: 20px;
    padding: 0 30px 30px;
    font-weight:bold;
    color: #379cb6;
    font-size: 1.3em;
}
h3 {
    padding-top: 50px;
    text-align: left;
}
h4 {
    text-align: right;
    padding-bottom: 20px;
}
h5 {
    margin-top: 15%;
    color :#379cb6;
    
}
.btn {
    color: #fff;
    background: rgb(57, 134, 185);
    padding: 10px 20px;
    text-decoration: none;
    transition-duration: 3s;
    cursor: pointer;
    border-radius: 5px;
     
 }
#color {
    color: rgb(201, 224, 247);
    font-weight: 500;
    font-size: 1em;
   
}
.link {
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
} 
#title {
    color: rgb(45, 100, 126);
    font-weight: bold;
    width: 100%;
    margin: auto;
    display: inline-block;
    height: 250px;
    padding: 50px 100px;
    font-size: 1.6em;
}
.title {
   font-size: 1.8em;
   margin: 0 auto;
   text-align: center;
}
input[type=text], input[type=email], select, textarea{
   width: 95%;
   padding: 12px;
   border: 1px solid rgb(187, 186, 186);
   border-radius: 4px;
   resize: vertical;
 }
 
 /* Style the label to display next to the inputs */
 form label {
   padding: 5px 0 0 80px;
   display: inline-block;
 }

 /* Style the submit button */
input[type=submit] {
  
   background-color: rgb(25, 128, 146);
   color: rgb(209, 243, 252);
   padding: 12px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   font-size: 0.9em;
   margin-left: 100px;
 }
 #send { 
  margin: 0 auto;
  padding-right: 85px;
   }
  #enviar {
    background-color: rgb(25, 128, 146);
    color: rgb(209, 243, 252);
    text-align: center;
      }

 /* Style the container */
 form .container1 {
   border-radius: 5px;
   background-color: #e0f2f1;
   padding: 20px;
   max-width: 700px;  
   margin: 30px 300px;
 }
.col-25 {
    width: 20%;
    float: left;
    }
 .col-75  {
   margin-bottom: 15px;
   padding-left: 170px;
   max-width: 50%;
 }
.right {
    color: #1d6a8d;
    text-align: center;
    width: 35%;
    margin: auto;
    padding: 0 0 90px 180px;
    line-height: 2;

}
.right1{
    padding-right: 430px;
    color: #1d6a8d;
    width: 50%;
    margin: auto;
    text-align: center;
    padding: 0 0 90px 150px;
    line-height: 2;

}
.right2 {
     line-height: 2;
     color: #1d6a8d;
     width: 35%;
     margin: auto;
     text-align: center;
     padding: 0 0 90px 150px; 

}
.right3 { 
     color: #1d6a8d;
     padding-top: 1px;
     line-height: 2;
     width: 35%;
     margin: auto;
     text-align: center;
     padding: 0 0 90px 180px;
}
.right4 {
    margin-top: 50px;
    color: #1d6a8d;
    text-align: center;
    padding: 20px 0 90px 140px;
    width: 50%;
    margin: auto;
}

.logos {
    display: inline-block;
    margin-left: 300px;
    margin-right: 0;
    margin-top: 10px;
    padding-top: 1px;  
    padding-bottom: 40px;
    max-width: 130px;
    float: left;
}
#das {  
    max-width: 70px;
    padding-left: 140px;
    margin: 1px 90px 60px 0;
}            
.col-md-666 {
    color: #1d6a8d;
    font-weight: 600;
    line-height: 1.4em;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;

}
.main {
    padding: 30px 70px;
    font-weight: 500;
    color: #1d6a8d;
    line-height: 1.8em;
    font-size: 1em;
    margin-bottom: 35px;
    margin: 0 auto;
    width: 90%;
    display: inline-block;
}

 .frase3 {
      margin: auto;
      padding: 10px;
      color: #1d6a8d;
    }
#text {
    width: 60%;
    margin: 0 auto;
    font-weight: 500;
    text-align: justify;
    line-height: 2;
    font-size: 17px;
    color: #1d6a8d;
    padding: 0 150px 100px 150px;
}
#text4 {
    color: #1d6a8d;
    text-align: justify;
    font-weight: 600;
    margin: 0 40px 10px 40px;
    line-height: 1.8em;
    font-size: 17px;
    padding-bottom: 40px;
}
#lista {
    margin: auto;
    font-weight: 500;
    color: #1d6a8d;
    line-height: 2;
    font-size: 1.2em;
    padding-left: 30%;
    padding-bottom: 5%;

}
.center {
    text-align: center; 
    color: #1d6a8d;
    margin: 0 auto;
    padding: 40px 350px;
    font-size: 1.1em;
    display: inline-block;
}

.size {
    font-size: 2.2em;
    position: relative;
    margin: 20px 200px;
    padding-top: 50px;
}
#title_contacto {
    font-size: 1.4em;
    color: #1d6a8d;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 5px;
    text-align: center;
}
.tel {
    text-align: center;
    color: #1d6a8d;
    font-weight: bold;
    font-size: 1.3em;
    margin-left: 450px;
    padding-right: 35px;
    
 }
.tel1 {
    text-align: center;
    font-weight: bold;
    color:#1d6a8d;
    font-size: 1.3em;
 }

.container {
    color: #fff;
    text-align: center; 
    margin: 0 auto;   
    padding-top: 30px;
}
.img-responsive {
    padding-top: 5px;
}

.uno {
    padding-top: 120px;
    padding-bottom: 60px;
    color: #1d6a8d;
    font-size: 2.2em;
    margin: 0;
}
.just {
    text-align: justify;
    font-size: 1.1em;
    color: #1d6a8d;
    margin: 30px 190px 50px;
}

.frase1 {
    padding-bottom: 50px;
    width: 85%;
    padding-left: 50px;
    text-align: justify;
}
.link {
    font-weight: 500;
  }

/*css para menu*/
.menu .lines {
    border-bottom: 15px double #f8f8f8;
    border-top: 5px solid #f8f8f8;
    content:"";
    height: 5px; 
    width: 25px;
    padding-right: 18px;
    float: right;
}
.menu {
    display: block;
    width: 100%;
    line-height: 1.6em;
    font-weight: 400;
    text-align: center;
    position: relative;
    margin: 0 auto;
    
  }
  
  /*Strip the ul of padding and list styling*/
  .menu ul {
    list-style-type: none;
    margin: 0 auto;
    padding-left: 0;
    text-align: center;
    width: 100%;
    position: absolute;
    background:  rgb(32, 156, 187);
  }
  
  /*Create a horizontal list with spacing*/
  .menu li {
    display: inline-block;
      
  }
  
  /*Style for menu links*/
  .menu li a {
      display: block;
      min-width: 180px;
      text-align: center;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: rgb(205, 233, 247);
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: none;
      margin: 0 auto;
      padding: 20px 0;  
     -webkit-transition: all 0.3s ease 0s;
      -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
      -o-transition: all 0.3s ease 0s;
      transition: all 0.3s ease 0s;
    
  }
  
  /*Hover state for top level links*/
  .menu li:hover a {
      color: #2c6074;
       background-color:#f6f9fa;
       font-weight: bold;
  }
  
  /*Style for dropdown links*/
  .menu li:hover ul a {
      background: #1f4c69;
      color: #82dbeb;
      height: 40px;
      line-height: 40px;
      
  }
  
  /*Hover state for dropdown links*/
  .menu li:hover .menu ul a:hover {
      color: #2dc4ff;
  }
  
  /*Hide dropdown links until they are needed*/
  .menu li ul {
      display: none;
  }
  
  /*Make dropdown links vertical*/
  .menu li ul li {
      display: block;
      float: none;
  }
  
  /*Prevent text wrapping*/
  .menu li ul li a {
      width: auto;
      min-width: 100px;
      padding: 0 20px;
  }
  
  
  /*Style 'show menu' label button and hide it by default*/
  .menu .show-menu {
    text-decoration: none;
    color: #fff;
    background: #0b788b;
    text-align: center;
    padding: 15px;
    display: none;
    cursor: pointer;
    text-transform: uppercase;  }
  
  .menu .show-menu span{
    padding-left: 35px;
  }
  
  /*Hide checkbox*/
  .menu input[type=checkbox]{
    display: none;
  }
  
  /*Show menu when invisible checkbox is checked*/
  .menu input[type=checkbox]:checked ~ #menu{
    display: block;
  }
  .jumbotron {
    background: url("img/footer.gif");
    height: 500px;
   }
   
  .jumbotron #box1 {
    position: relative;
    top: 220px;
    padding: 30px;
   }
   
  .jumbotron #box1 h2 {
    color: #fff;
    text-align: right;
   }
   
  .jumbotron #box1 p {
    color: #fff;
    text-align: right;
   }
   
  .jumbotron #box1 .btn {
    margin: 10px 0 0;
    float: right;
   }
   
  .footer {
   background: rgb(15, 56, 83);
   margin: 0 auto;
   text-align: center;
   padding-bottom: 10px;
   
   }
   
  .footer p {
   color: #fff;
   font-size: 16px;
   margin: 0;
   line-height: 1.8;
   }
  .footer-text {
   text-align: center;
   color: azure;
   line-height: 1.7;
   
   }
   
   
    
    
   
    
  /*----------------------------Responsive Styles------------------------------*/
  @media only screen and (min-width: 768px)
  and (max-width: 1024px) {
  
    .menu .lines {
        padding-right: 18px;
        float: right;
        margin-right: 8px;
        }
  /*Make dropdown links appear inline*/
    .menu ul {
        display: none;
        margin: 0 auto;
            }       
   /*Create vertical spacing*/
    .menu li {
        margin-bottom: 1px;
        font-size: 16px;
            }
/*Make all menu links full width*/
    .menu ul li, .menu li a {
        width: 100%;
        font-size: 20px;
            }
/*Display 'show menu' link*/
    .menu .show-menu {
        display: block;
        font-size: 18px;
            }
    .menu .show-menu span {
        padding-left: 50px;
        font-size: 24px;
}
       /*Fin*/
  
    .header h1{
       padding-top: 1px;
       font-size: 4.5em;
       padding-top: 150px;
   }
   .header p {
      margin: auto;
      text-transform: uppercase;
      width: 100%;  
      font-size: 1em;
    }
    .frase1 {
      font-size: 1.3em;
      width: 85%;
      text-align: justify;
      line-height: 2;
      }
    .logosize {
       width: 95%;
       text-align: center;
       padding-top: 0;
       margin-top: 0;    
    }
    .uno {
       text-align: center;
       padding: 50px 30px 40px;
    }
   #das {
     position: relative;
    text-align: center;

    }            
   .logos {
      margin-left: 100px;
      padding-bottom: 20px;
      padding-right: 30px;
      width: 80%;
      max-width: 150px; 
      float: left;
        }
  #text {
      margin: auto;
      width: 78%;
      font-size: 1.2em;
      line-height: 2.2;
      padding: 15px 20px 60px;
      }
 .tel {
      text-align: center;
      margin-left: 150px;
      width: 100%;
      padding-top: 10px;
    }
   form .container1 {
      width: 90%;
      margin-left: 0;
      padding-left: 60px;
      margin-bottom: 0;
      padding-bottom: 80px;
      margin-top: 40px;
     }
  #enviar {
    margin-top: 10px;
  }
  }


@media only screen 
  and (min-width: 320px) 
  and (max-width: 767px) {
    
        /*Menú*/
    .menu .lines {
        height: 5px; 
        width: 20px;
        padding-right: 20px;
        float: right;
        margin-right: 5px;
        }
  /*Make dropdown links appear inline*/
    .menu ul {
        position: static;
        display: none;
        margin: 0 auto;
            }       
   /*Create vertical spacing*/
    .menu li {
        margin-bottom: 1px;
        font-size: 16px;
            }
/*Make all menu links full width*/
    .menu ul li, .menu li a {
        width: 100%;
            }
/*Display 'show menu' link*/
    .menu .show-menu {
        display: block;
        font-size: 18px;
            }
    span {
        font-size: 20px;
        margin-left: 15px;
        display: inline-block;
            }
             /*Fin*/
    .header .container {
       position: relative;
       top: 140px;
       width: 100%;
 }       
    .header h1 {
       font-size: 3.7em;
       padding-top: 50px;
       margin-bottom: 60px;
     }
   .header p {
      text-align: center;
      width: 80%;
      font-size: 0.8em;
      border-radius: 8px;
      padding: 5px;
      line-height: 1.5;
      opacity: 0.5;
   }
    
    h2 {
        font-size: 1.2em;
        padding-bottom: 25px;
        padding-left: 25px;
        text-align: center;
        width: 75%;
    }
    h5 {
        margin-top: 0;
        text-align: center;
        padding-top: 2px;
        margin-right: 180px;
        font-size: 0.8em;
        padding-bottom: 0;
        }
    .header .container {
       position: relative;
       top: 100px;
       height: auto;
     }
   
    .logosize {
        width: 60%;
        margin-top: 10px;
        text-align: center;
     }
     .main {
       width: 90%;
       display: inline-block;
       margin: 0 auto;
     }
     .jumbotron {
        width: 100%;
        margin: 0;
     }
    .jumbotron #box1 {
        font-size: 1.1em;
        margin-right: 10px;
     }
    #title_contacto {
        font-size: 1.1em;
        margin-left: 0;
        padding: 5px 30px;
    
      }
    #lista {
        padding-left: 40px;
        padding-bottom: 30px;
        font-size: 1.1em;
      }
    .tel {
        margin-left: 100px;
        font-size: 1.1em;
     }
    .tel1 {
        font-size: 1.1em;
        margin-left: 100px;
     }

    .col-md-666 {
        margin: 0 auto;
        padding-bottom: 20px;
        padding-left: 5px;
        font-size: 1em;
        text-align: center;
     }
    .title {
        font-size: 1.4em;
        text-align: center;
        padding-left: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
     }
    .frase3 {
       margin: auto;
       padding: 10px;
       color: #1d6a8d;
       text-align: center;
    }
    .uno {
        padding: 40px 20px;
        text-align: center;
        font-size: 1.8em;
     }
       
    #text {
      margin: 0 auto;
      padding: 10px 10px 50px;
      font-size: 1em;
      width: 92%;    
     }
    
    #text4 {
      margin: 0 auto;
      width: 90%;
      text-align: justify;  
     }
    #title5 {
      width: 100%;
      font-size: 1.5em;
      margin: auto;
      padding-bottom: 20px;
      padding-top: 30px;
       } 
    #das {
        width: 50%;
        float: none;
        margin-left: 10px;
        
     }           
    #send {
        margin: 0 auto;
        padding-right: 90px;
         font-size: 1.2em;

      }
    #enviar {
      background-color: rgb(25, 128, 146);
      color: rgb(209, 243, 252);
      text-align: center;
      }
   
    .col-75 {
      padding-left: 30px;
      max-width: 78%;
      }
   
    .frase1 {
     display: inline-block;
     width: 70%;
     margin: 0;
     padding: 1px;
     font-size: 0.9em;
   }
  
   .container2 {
    width: 100%;
    text-align: center;
    margin: 0 auto;
   }
    form .container1{
        width: 90%;
        max-width: 400px;  
        margin-top: 40px;
        margin-left: 0;
      }
    form label {
         width: 100%;
         margin: auto;
         padding: 10px 130px;
         }
    
    .logos {
     padding-left: 130px;
     width: 100%;
     margin: 0 auto;
     }  
   .right {
      font-size: 1em;
      text-align: center;
      width: 88%;
      color: #1d6a8d;
       margin-left: 20px;
      padding: 0 5px 50px 5px;  
       display: inline-block; 
       }

   .right1{
      font-size: 1em;
      width: 88%;
      margin-left: 20px;
      text-align: center;
      padding: 0 5px 50px 5px;   
      color: #1d6a8d;
      display: inline-block;
    }

   .right2 {
     font-size: 1em;
     width: 88%;
     margin-left: 20px;
     text-align: center;
      padding: 0 5px 50px 5px;   
     color: #1d6a8d;
      display: inline-block;  
    }

   .right3 {
     font-size: 1em;
     width: 88%;
     margin-left: 20px;
     text-align: center;
      padding: 0 5px 50px 5px;   
     color: #1d6a8d;
      display: inline-block;
    }

   .right4 {
     font-size: 1em;
     text-align: center;
     padding: 0 5px 50px 5px;   
     width: 88%;
     margin-left: 20px;
     color: #1d6a8d;
     display: inline-block;
    } 
    
   .link {
    font-weight: 500;
    }  
   .footer {
     width: 100%;
     margin: 0;
     text-align: center;
     color: #fff;
  }
  }