/* Base styles */

* {
  margin: 0;
  padding: 0;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

p{
	font-family: 'Roboto', sans-serif; 
	font-size: 13px;
	line-height: 1.3;
}

header {
	height: 72px;
	background-color: #F37067;
	width: 100%;
}

#headerCines{
	max-width: 2000px;
	margin: 0 auto;
}

#logo{
	float:left;
	position: relative;

}

#logoCosmos{

	/**
	margin-left: auto;
 	margin-right: auto;**/
	 width: 148px;
	 height: 71px
}

#listaMenu {
	float: right;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
  	margin-right:4%;
}

.itemMenu {
	float: right;	
  	font-family: 'Roboto', sans-serif;
}

.itemMenu a {
  height: 100%;
  display: block;
  color: white;
  text-align: center;
  margin-top: 10px;
  padding: 10px 16px 10px 16px;
  text-decoration: none;
}

.itemMenu a:hover {
  background-color: #bc4842;
  color:#FFFFFF;
  text-decoration: none;
}

/**

.carousel-item	{
	height: 500px;

}**/

.wrapperSection {

  max-width: 1200px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

.wrapperSection {
  display: flex;
  flex-wrap: wrap;
}

.wrapperSection {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(150px, auto);
}

.sectionIndex{
		height:100%;
	background-color: #e6e7e8;
	padding-bottom: 50px;
}

.wrapperFooter{
	max-width: 940px;  
	display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, [col] 150px auto-fill, minmax(200px, 1fr)) ;
    grid-template-rows: repeat(2, [row] auto  );
    background-color: #fff;
}

.wrapperFooterInfo {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    background-color: #010101;
    color: #999697;
    }

#uba{
	padding: 20px;
}

#cosmosInfo{
    padding: 20px;
}

#incaa{
    padding: 20px;
}

#newsletter{
    grid-column: col 1 / span 2;
    grid-row: row 2;
}


#access{
	grid-column: col 3 / span 2;
    grid-row: row 2;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

#comoLlegar{
	    grid-column: 1 / 3;
        grid-row: 1;
}

#precios{
	    grid-column: 1 / 3;
        grid-row: 2;
}



#tituloSection{

	float:left;
	margin-left: 60px;
	margin-top:30px;

}

#cartelera{
	float:left;
	height: 50px;
	padding-right: 10px;
}

#tituloSection{
  margin-left: 10px;
  margin-right: 5px;
  flex: 0 1 100%;
  grid-column: 1 / -1;
  height:50px;

}

.wrapperSection{
	grid-auto-rows :minmax(50px, auto)
} 

h2{
	float:left;
	font-family: 'Belgrano', serif;
	color: #464547;
}

.card-footer{
	background-color: #74408d;
	padding:0;
	padding:5px 10px;
}

.textoPeliFooter{
	float:right;
	color: #FFFFFF;
	margin-bottom:0;
	font-weight: bold;
}

.card-title{
	font-family: 'Belgrano', serif;
	color: #231f20;
}

.lightText{
	color:#747678;
	margin-bottom: 0;
}

.direccion{
	font-weight: bold;
	margin-bottom: 0;
}

.card{
  /* needed for the flex layout*/

  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
  margin: 10px;
}

.card-body{
	padding:0;
	padding: 10px 20px;
}

.miniImg{
	float:left;
	height: 20px;
	margin:7px;
}

.sobre{
	padding-top:4px;

}
#imgUba{
	height: 40px;
	clear: left;
	margin-bottom:10px;
}

#facebook{
	height:20px;
	margin-right:5px;
	vertical-align: baseline;
}

#primerFooter{
	margin:50px;
}



#footerInput{
	width: 50%;
}

button{
	background-color:#010101;
	color:#FFFFFF;
	border-radius: 10px;
	border: none;
	padding: 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width:100px;
	margin-top:10px;
}

.footerText{
	margin-left:30px;
	margin-top:5px;
}

.espacio{
	margin-left:10px;
	margin-top:10px;
}

.suscribite{
	margin-bottom: 0px;
}

#newsletter{
	margin-bottom:20px;
}
 
input{
	border-radius: 10px;
	height: 40px;
}

.googleMapsText{
	color:#f68c48;
}

/**
.carousel-item	{
	height: 500px;

}**/

.trailerBg{
	height:600px;
}

#trailerPelicula{
  object-position: center; /* Center the image within the element */
  width: 100%;
}


.trailerBoton {
    position: absolute;
    right: 50%;
    bottom: 40%;
    left: 50%;
    z-index: 11;
    padding-top: 20px;
    padding-bottom: 20px;
}

#trailerBotonImg{
	width:100px;
}

.sectionPelicula{
	background-color:#3b3b3c;
	height: 100%;
	padding-top: 30px;
	padding-bottom:30px;
}

.peliculaDescp{
	float:left;
	clear:none;
	margin:0px;
	border:0px;
}

.peliculaInfo{
	float:left;
	clear:none;
	margin:0px;
	border:0px;
}

h1{
	font-family: 'Belgrano', serif;
}

#peliculaH1{
	font-size:42px;
	color:#ffffff;
}

.peliculaSubTexto{
	font-size:13px;
	color:#f68c48;
}

.peliculaDescpTexto{
	font-size:13px;
	font-style: italic;
	color:#bcbec0;
	width:428px;
	line-height: 1.7;
}

.peliculaInfoTexto{
	font-size:13px;
	color:#ffffff;
	width:428px;
	line-height: 1.7;
}

.peliculaImgCont{
	height:400px;
	width:100%;
	overflow:hidden;
	float:right;
}

.peliculaImg{
	height: 400px;
}

.peliculaFunciones{
	list-style-type: none;
 	margin-top:40px;
  	padding: 0;
}

.funcionesHora{
  display: inline;
}

.funcionesHora{
	height: 50px;
	width: 200px;
	background-color: #ef435c;
	color:#FFFFFF;
	font-size: 13px;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
	padding: 10px 20px 10px 20px; 
	margin-right: 10px;
}

#segundoFooter{
	    background-color: #010101;
    color: #999697;
    padding-top:20px;
}

/* We need to set the margin used on flex items to 0 as we have gaps in grid.  */

@supports (display: grid) {
  .wrapper > * {
    margin: 0;
  }
}

.h2CineCosmos{
	color:#F37167;
}

.carruselImagen {
	width: 100%;
	max-width: initial;
}

.carousel-inner{
	max-width: 2000px;
	max-height: 500px;
	overflow: hidden;
}

.h1Carousel{
	font-size:400%;
}

.carousel-caption {
width:500px;
z-index:10;
color:#fff;
text-align:left;
top:200px;
left:15%;
bottom:auto;
-webkit-transform:translate(0, -50%);
-ms-transform:translate(0, -50%);
transform:translate(0, -50%);
text-shadow: 2px 2px 4px #000000;
line-height: 500px;
}

.tituloUnaLinea{
	width:500px;
}

.carousel-inner a{
	color: #ffffff;
}
/**

.tituloTresLineas{
	top:37%;
}**/


.controlescarrusel{
	display: inline-block;
	height: 60%;
	width:60%;
}

.carHorario{
	top:335px;
	left:15%;
	z-index:10;
	position:absolute;
	text-align: center;
	float:left;
	/*width:200px;*/
	height: 30px;
	background-color: #000000;
	color:#FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size:1em;
	padding-top: 18px;
	padding-bottom:38px;
	padding-left: 18px;
	padding-right: 18px;

}

.botonTrailer{
	top:335px;
	left:70%;
	z-index:10;
	position:absolute;
	text-align: center;
	float:right;
	width:130px;
	height: 35px;
	background-color: #000000;
	color:#FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size:1em;
	padding-top: 18px;
	padding-bottom:38px;
}

.carousel-item a { color: #fff; }

.imgBotonTrailer{
	height: 20px;
	width:20px;
	margin-right:5px;
	margin-bottom: 5px;
}

.textoBotonTrailer{
	padding:5px,4px;
}

.historiaBg{
	height:300px;
	overflow:hidden;
}

#imgHistoria{
	height:60em;
	margin-top:-20%;
}

.pHistoria{
	margin-top:2em;
	color:#dcddde;
	line-height: 2;
	font-size:0.8em;
}

.textoHistoria{
	margin-top:2.5em;
	margin-bottom: 3em;
}

.textoResaltado{
	color:#f37167;
}

.tituloPeliCard:hover{
	color:#F37067;
}

.card-img-top{
	object-fit: cover;

  	height: 196px;
}

.noPeliHoyDiv{
	margin-top:10px;
	width:350px;
}

.noPeliHoy{
	margin-left:10px;
	font-size: 1em;

}

.consultaCartelera{
	color: #f37167;
	font-weight: bold;	
}

.consultaCartelera a:hover {
	color:#000000;
} 


.puertas{
	margin-left:60px;
	margin-top:10px;
}

header li a {
	display: block;
	color: white;
	padding: 20px 16px 0px 16px;
	text-decoration: none;
}

#iphoneNav { display: none;}

@media (max-width: 600px) {

  .h1Carousel {
  	font-size: 2.5em
  }
  .carousel-caption{
	top: 90px;
  	width:300px;
  	/*padding-top: 15%;*/
  }
  .tituloUnaLinea{
  	width:250px;
  }
  .carHorario{
  	display:none;
  }
  .botonTrailer{
  	display:none;
  }

  header ul {
		display: none;
	}

	#iphoneNav { display: block; height: 50px;}

}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 
	
	header ul {
		display: none;
	}
	#iphoneNav { display: block;}
}


/**
.carousel {
	width: 1200px;
	margin: 0 auto;
}**/