body{
	margin:0;
	padding:0;
	background-color:#212429;
	color: #C5C5C5;
	font-family: 'Open Sans', 'Helvetica', sans-serif;
}

img{
	width:100%;
}

.clear{
	clear:both;
}

h1{
	color:#46C2FD;
	font-weight:800;
	font-size:2em;
	margin:0;

}

h2{
	color:#EFEFEF;
	font-size:1em;
	font-weight:400;
	margin:0;
}

p{
	font-size: .9em;
	margin:0;
}

.content{
	max-width:700px;
	margin:0 auto;
}

@media (max-width: 720px) {
  .content {
    margin: 0 10px;
  }
}


/* TRAILER STYLE STARTS HERE */
.trailer{
	max-width:1200px;
	height:550px;
	margin:0 auto;
}



/* TITLE STYLE STARTS HERE */
.title{
	margin-top:50px;
	margin-bottom:25px;
}





/* DETAIL STYLE STARTS HERE */

.details{
	margin-bottom:40px;
	font-size:0;
}

.poster, .details-right{
	float:left;
}

.details-right{
	width:68%;
	margin-left:2%;
}

.details p{
	font-size:14px;
	line-height: 145%;
}

.poster{
	width:30%;
}

.tomatometer, .audience, .thumbs{
	width:33.3%;
	display:inline-block;
	vertical-align: top;
}

.ratings{
	border:3px solid #46C2FD;
	color:#EFEFEF;
	font-size:0;
	padding:8px 10px;
	margin-top:20px;
}

.ratings h2{
	text-transform: uppercase;
	font-size:12px;
	font-weight:700;
	margin:0;
	margin-bottom:4px;
}

.ratings h3{
	margin:0;
	font-size:22px;
	font-weight:200;
	float:left;
	margin-left:4px;
}

.rating-img{
	background-size:contain;
	width:35px;
	height:35px;
	background-repeat: no-repeat;
	float:left;
	background-position: center;
}

.thumbs-rating-img{
	background-size:contain;
	width:25px;
	height:25px;
	background-repeat: no-repeat;
	float:left;
	background-position: center;
	margin-top:3px;
}

.thumbs h3{
	font-size:11px;
	margin-right:10px;
	margin-top:7px;
}

.summary-mobile{
	display:none;
	margin-top:15px;
}






/* STARS STYLE STARTS HERE */
.stars{
	width:100%;
	font-size:0;
	margin-bottom:40px;
}

.star{
	display:inline-block;
	vertical-align: top;
	width:15%;
	margin-right:2%;
	font-size:12px;
	color:#C5C5C5;
	font-weight:400;
}

.star-photo{
	width:100%;
	height:50px;
	background-size: cover;
	background-position: center;
}

.star p{
	margin:5px 0 0 0;
}

.star:last-child{
	margin-right:0;
}




/* VIDEO STYLE STARTS HERE */

.videos{
	font-size:0;
}

.video{
	width:48%;
	display:inline-block;
	height: 500px;
	margin-bottom:30px;
}

.video:nth-child(odd){
	margin-right:4%;
}




@media (max-width: 680px) {
  	.star{
		width:32%;
		margin-right:2%;
		margin-bottom:20px;
	}

	.star:nth-child(3n+3){
		margin-right:0;
	}

	.summary-mobile{
		display:inline;
	}

	.summary-desktop{
		display:none;
	}

	.poster{
		margin-bottom:15px;
		width:50%;
		float:none;
		display:inline-block;
		vertical-align: top;
	}

	.details-right{
		width:46%;
		margin-left:4%;
		float:none;
		display:inline-block;
		vertical-align: top;
	}

	.ratings{
		margin-top:0;
		position:relative;
	}



	.tomatometer, .audience, .thumbs{
		width:calc(100% - 20px);
		text-align: center;
		height:55px;
		position:absolute;
	}

	.tomatometer{
		top:10%;
	}

	.audience{
		top:40%;
	}

	.thumbs{
		top:70%;
	}

	.trailer{
		height:300px;
	}

	#thumb-up{
		margin-left: calc(50% - 54px);
	}

	.rating-img{
		margin-left: calc(50% - 43px);
	}
}