@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    
}
body{
    font-family: 'Open Sans', sans-serif;
}
header{
    width: 100%;
    height: 55px;
    background: #333;
    color: #fff;
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
}
.contenedor{
    width: 100%;
    margin: auto;
}
.logo{
     float: left;
     cursor: pointer;
}

h1{
    float: left;
	font-size: 22px;    

    
}


header .contenedor{
    display: table;
}

section{
    width: 100%;
    margin-bottom: 25px;
}

#bienvenidos{
    text-align: center;
    padding: 15px 0 5px 0;
}



#bienvenidos2 {
    text-align: center;
    padding: 15px 0 5px 0;
    background-color: #2c60b6;
    color: white;
    font-weight: bold;
    animation: aparecer 1.5s ease-in-out;
}

@keyframes aparecer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#bienvenidos3 {
    text-align: center;
    padding: 5px 0 5px 0;
    background-color: rgb(248, 148, 156);
    color: white;
    font-weight: bold;
    animation: aparecer 5.5s ease-in-out;
    animation: deslizarAbajo 2s ease-out;
}


@keyframes deslizarAbajo {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes colorAzul {
    from {
        background-color: #0044ff;
    }
    to {
        background-color: #0022aa;
    }
}


@media(min-width:1024px){
    .contenedor{
        width: 1000px;
    }
}

@media(max-width:500px){
    .contenedor{
        width: 300px;
    }
    h1{
    font-size: 20px; 
    }
    
}
@media(max-width:350px){
    .contenedor{
        width: 320px;
        high: 620px;
     }
     
     .contenedor p{
    	font-size: 12px; 
    	}
     .contenedor h1{
    	font-size: 22px; 
    	}
      .contenedor h2{
    	font-size: 8px; 
    	}
 .contenedor h3{
    	font-size: 12px; 
    	}
.contenedor h5{
    	font-size: 2px; 
    	}

	

}
/* --- Ajustes para evitar que el botón se superponga al siguiente párrafo en móviles --- */

#banner .banner-contenido {
    max-width: 90%;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

@media(max-width: 600px){
    #banner .banner-contenido {
        top: 60%; /* antes 50% */
        transform: translate(-50%, -50%);
    }

    #banner {
        padding-bottom: 30px; /* evita solapamiento */   
    }
}


@media (max-width: 768px) {
    #banner .contenedor a {
        display: none !important;
    }
    
    #banner .contenedor h2 {
        display: none !important;
    }

}