* {
    box-sizing: border-box}




.btn-ini {
    position: fixed; /*boton lateral que lleva al inicio*/
    width: 40px; /*ancho*/
    height: 40px; /*alto*/
    line-height: 40px;
    bottom: 20px;
    right: 20px;
    background: rgba(250, 250, 250, 0.658);
    color: #14171a;
    text-align: center;
border-radius: 50px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
    font-size: 20px;}



  .btn-ini:hover {
    background: #000;}



    body {
    /*background: color celeste #49a3d6;*/
    background: #14171a;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;}

   .titulo {text-align: center;}

   



.contenedor {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    
}



header {
    
    background: url(../image/background1.webp);
    background-repeat: repeat; 
    background-position: center;
    max-height: 600px;
      
}




/* a continuacion se alinea el MENU DE NAVEGACION (nosotros, peliculas,contacto) */

header .menu {
    margin: 40px 0;
    text-align: right;
    
}

header .menu a {
    margin: 0 20px;
    color: #000;
    display: inline-block;
    padding: 9px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 1.3em;
    color: #fff;
    
}


header .menu a:hover {
    border-bottom: 2px solid #fff;
    
}



/* HEADER- CONTENEDOR TEXTO*/



header .contenedor-texto {
    margin: 190px 0;
    display: flex;
    justify-content: center;
    align-content: center;}



    header .contenedor-texto .texto {
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    padding: 20px 60px;}



.main .acerca-de {
    text-align: center;
    color: #fff;
    }

    

     
.main .peliculas .contenedor-peliculas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}



.main .peliculas .contenedor-peliculas .peliculas {
    width: 24%;
    margin-bottom: 40px;
}




.main .peliculas .contenedor-peliculas .peliculas .thumb img {
    width: 100%;
  vertical-align: top;
  border-radius: 10px;
}



/*hace que al pasar por encima de las imagenes se transparenten*/
.main .peliculas .contenedor-peliculas .peliculas .thumb img:hover {
    opacity: 0.5; 
}




/*centra los titulos debajo de las imagenes de las pelis*/
.main .peliculas .contenedor-peliculas .peliculas .categoria {
    text-align: center;
    color: #ffff;
    text-decoration: underline #fff;
   
}

.peliculas .contenedor h2 {
    color: #fff;
}

.peliculas .contenedor p {
    color: #fff;
}


.titulo .contenedor p {
    color: #fff;
}


.titulo .contenedor h2 {
    color: #fff;
}









/*   FOOTER - CONTACTO   */

footer .contacto {
    padding: 60px 0;
}




footer .contacto .titulo {
    font-size: 34px;
    line-height: 34px;
    margin-bottom: 40px;
    font-weight: 300;
    color: #ffff;
    text-align: center;
}





footer .contacto .formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}






footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"],
footer .contacto .formulario textarea {
    border: 2px solid #cecece;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 20px;
    color: #a4a4a4;
}







footer .contacto .formulario input[type="text"]:hover,
footer .contacto .formulario input[type="email"]:hover,
footer .contacto .formulario textarea:hover {
    border: 2px solid #3895ea;
}




footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"] {
    width: 49%;
    margin-bottom: 15px;
}




footer .contacto .formulario textarea {
  width: 100%;
  height: 100px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100px;
  max-height: 300px;
  margin-bottom: 15px;  
}





footer .contacto .formulario .boton {
    margin: auto;
    background: #666666;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 15px 40px;
    cursor: pointer;
}




footer .contacto .formulario .boton:hover {
    background: #387bea;
}



/*   FOOTER - REDES SOCIALES   */


footer .redes-sociales {
    background: #1e2b38;
    padding: 30px 0px;
}



footer .redes-sociales .contenedor {
    display: flex;
    justify-content: center;
}



footer .redes-sociales a {
    color: #fff;
    text-align: center;
    width: 100px;
    display: block;
    padding: 15px 0;
    border-radius: 3px;
    font-size: 30px;
    margin: 0 20px;
}




footer .redes-sociales .twitter:hover {	background: #14171a; }
footer .redes-sociales .facebook:hover { background: #3b5998; }
footer .redes-sociales .youtube:hover {	background: #cd201f; }
footer .redes-sociales .github:hover { background: #666666; }
footer .redes-sociales .instagram:hover { background: #3f729b; }





/*   MEDIA QUERIES   */

@media screen and (max-width: 800px) {
    header .menu 
        text-align: center;
    }


    footer .redes-sociales .contenedor {
        text-align: center; color: white;
        padding: 1em;
        flex-wrap: wrap;
        padding: 20px 0;
    }