@font-face{
    font-family: Roboto;
    src: url(../fonts/Roboto-Light.ttf);
}

@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

/*Elementos básicos*/
h1 {
    font-family: Roboto;
}

h2 {
    font-family: 'Cabin Condensed', sans-serif;
    font-size: 30px;
    color: #2471a3;
    text-shadow:  0 1px 0 rgba(255, 255, 255, 0.4);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #2471a3;
    text-shadow:  0 1px 0 rgba(255, 255, 255, 0.4);
}

a {
    text-decoration: none;
    font-family: Roboto;
    color:  #fdfefe;
}

p {
    font-family: Roboto;
    margin-top: 15px;
}

ul {
	font-family: 'Cabin Condensed', sans-serif;
}

input[type="text"], input[type="email"], textarea {
    border-radius: 15px;
    border: 1px solid #58d68d;
    height: 20px;
    padding: 10px;
    display: block;
    margin-bottom: 15px;
	width: 410px;
}

input[type="submit"] {
    border-radius: 10px;
    background: #1f618d;
    border: none;
    width: 200px;
    padding: 10px;
    font-family: 'Cabin Condensed', sans-serif;
    color: #fdfefe;
    display: block;
    margin: 0 auto;
}

input[type="submit"]:hover {
	background: #58d68d;
	cursor: pointer;
}

textarea {
    font-family: Roboto;
	font-size: 14px;
	text-align: justify;
    height: 200px;
    width: 410px;
}

ul {
	list-style: none;
}

/*Secciones*/
* {
	margin: 0;
}

body{
    background:  #aab7b8;
}

header{
    background: url("../images/fondo.jpg");
    background-size: cover;
    width: 100%;
	margin-top: 50px;
    height: 200px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
}

nav {
    background: #138d75;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
}

nav ul {
	display: inline-block;
}

nav li {
	float: left;
}

section {
    background: #fdfefe;
    width: 100%;
    height: 200px;
    padding: 15px;
    box-sizing: border-box;
}

footer {
    background:  #34495e;
    width: 100%;
    height: 200px;
    padding: 15px;
    color: white;
    font-size: 12px;
    box-sizing: border-box;
}

article {
		margin-top: 20px;
	}

/*ID*/
#logoIco {
    width: 100%; 
    height: auto; 
    display: none;
}

#submenu2 {
    display: none;
}
/*Clases*/
.listas {
  margin-left: 50px;
}

.active a {
    margin-right: 100px;
}

.active a:hover {
    color: #f9e79f;
}

ul.active ul {
    text-align: left;
    display: none;
    position: absolute;
    background: #34495e;
    padding: 5px 0px 5px 5px;
    margin: 0;
    border-radius: 20px;
    width: 20%;
    z-index: 2;
}

ul.active ul li {
    float: left;
    width: 100%;
    margin:2% 0%;
}

ul.active li:hover ul,ul.active ul li:hover ul,ul.active ul ul li:hover ul {
    display: block;
}

.justificado {
		text-align: justify;
		font-size: 14px;
        line-height: 25px;
}

.activo {
	font-variant: small-caps;
	font-weight: 900;
}

.titulo-panel {
    text-align: center;
    background: #58d68d;
    color: #fdfefe;
    font-weight: 900;
    border-radius: 10px 10px 0 0;
}

.cuerpo-panel {
    border-radius: 0 0 10px 10px;
    border: 1px solid #58d68d;
    padding: 5px;
}

.contenedor {
  width: 90%;
  margin: auto;
  max-width: 1300px;
}

.toggle-nav {
	display:none;
}

.personalizada li {
    background-image: url(../images/checkmark_32.png);
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 32px;
}

.personalizada a {
    color: #16a085;
}

.zoom img {
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}

.zoom img:hover {
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
}

/*Para el slider*/
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

/*Diseno responsivo*/
@media screen and (max-width: 1024px){
	.contenedor {
    	width: 100%;
  	}
     header {
		margin-top: 0;
		height: 190px;  
  	}
}

@media screen and (max-width: 750px){
    header {
		margin-top: 0;
		height: 150px;  
  	}
}

@media screen and (max-width: 600px){
	.contenedor {
    	width: 100%;
  	}
    
    #slider {
        display: none;
    }

    #logoIco {
      display: block;
    }
    
    #submenu1 {
        display: none;
    }
    
    #submenu2 {
        display: block;
    }

    .listas {
      margin-left: 0px;
      font-size: 10px;
    }
	
	header {
		margin-top: 0;
		height: 100px;  
  	}
	
	nav {
	  position: relative;
	  display: inline-block;
  }
  
  nav ul.active {
	  display: none;
  }
  
  nav ul {
	  width:85%;
	  position:absolute;
	  top:120%;
	  left:0px;
	  background: #34495e;
      text-align: left;
  }
  
  nav ul:after {
	  width:0px;
		height:0px;
		position:absolute;
		top:0%;
		left:22px;
		content:'';
		transform:translate(0%, -100%);
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #303030;
  }
  
  nav li {
	  margin-top: 10px;
	  float:none;
		display:block;
  }
  
  nav a {
	  display: block;
  }
  
  .toggle-nav {
		float:left;
		display:inline-block;
		font-size:20px;
		transition:color linear 0.15s;
	}

	.toggle-nav:hover, .toggle-nav.active {
		text-decoration:none;
		color:#f4d03f;
    }
    
    #imagen {
	  	display: none;
	  }
}

@media screen and (max-width: 400px){
  .contenedor {
    width: 100%;
  }
  
  header {
	margin-top: 0;
	height: 80px;  
  }
    
    input[type="text"], input[type="email"], textarea {
        width: 250px;
    }
}