@charset "utf-8";
/* CSS Document */

body {
	background-color: black;
	padding: 0;
  	margin: 0;
}
.anderson{
	background-image:url(../imagenes/fotograma_museo.jpg);
	height: 500px;
  	background-position:top;
	}
h1{
  color: #FFF;
  font-family: 'Ruda', sans-serif;
  font-size: 70px;
  font-weight: 900;
  margin: 0;
  padding-top: 240px;
  text-align: center;
  text-transform: uppercase;
	}
h2{
  color: white;
  font-family: 'Ruda', sans-serif;
  font-size: 1.7em;
  margin-left: 1em;
  padding-top: 0.2em;
  text-align:left;
  text-transform: uppercase;
  	}
h3 {
  font-family: 'Ruda', sans-serif;
  font-size: 1.5em;
  margin-left: 1em;
  padding-top: 0.05em;
  text-align:left;
  text-transform: uppercase;
	}
h4{
	font-family:'Ruda', sans-serif;
	font-size:1em;
	}
.contenedor {
	display: flex;
	flex-wrap: wrap; 
	}
.card img, .fotogramas img {
	width:100%;
	height:auto;
	vertical-align:bottom;
	}
.fotogramas{
	display: flex;
	flex-wrap: wrap;
	width:100%;
	}
.info{
	background-color:white;
	padding-top: 0.1em;	
	}
.sinopsis{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	}
	
.sinopsis div{
	margin-right:0.8em;
	margin-left: 1.5em;
	flex-basis: 1;
	flex-shrink: 1;
	flex-grow: 1;
	}
	
@media	(min-width: 480px){
	.card {
		width: calc(100% / 2)}
	.sinopsis div{
		width: calc(100% / 2)}
	}
	
@media	(min-width: 768px){
	.card {
		width: calc(100% / 3)}
	.foto{
		width: calc(100% / 3)}
	.sinopsis div {
		width:calc(100% /3)}
}
@media	(min-width: 992px){
	.card {
		width: calc(100% / 6)}
	.foto {
		width: calc(100% / 3)}
	.sinopsis div{
		width:calc(100% / 4)}
}