body {
	background-color: #000;
	overflow-x: hidden; 
}

/*@font-face {
	font-family: "Questa Grande"; 
	src: url("../font/Questa_Grande_Regular.otf"); 
}*/

@font-face {
    font-family: 'Questa Grande';
    font-style: normal;
    font-weight: 400;
    src: url("../font/Questa_Grande_Regular.otf") format("otf"), url("../font/Questa_Grande_Regular.ttf") format("ttf"), url("../font/Questa_Grande_Regular.woff") format("woff");
}


.headline{
	font-family: "Questa Grande", serif;
}

.cover h1{
	font-family: "Questa Grande", serif;
	font-size: 93pt;
	color: #fff;
	letter-spacing: 19pt;
	margin-top: -40px;
}

h2 {
	font-family: "Questa Grande", serif;
	color: #eadeca;
	text-transform: uppercase;
	letter-spacing: 2pt;
	font-size: 18pt;
}

h3 {
	margin: 0px;
	font-family: "Questa Grande", serif;
	color: #6d6d6d;
	letter-spacing: 2pt;
	font-size: 13pt;
	line-height: 18pt;
}

h3 a{
	font-family: "Questa Grande", serif;
	color: #6d6d6d;
	text-transform: uppercase;
}

h3 a.safehouse-link {
	text-transform: none;
	font-weight: bolder;
}

h3 a.safehouse-link:hover {
	color: #eadeca;
	text-decoration: none;
}

hr {
	opacity: .5;
	margin-top: 30px;
}

.linking-button {
	font-family: "Questa Grande", serif;
	text-transform: uppercase;
	color: #eadeca;
	letter-spacing: 1.2pt;
}

.linking-button:hover {
	opacity: .5;
	color: #eadeca;
	text-decoration: none;
}

.details {
	margin-bottom: 33px;
	line-height: 24pt;
}

.quote {
	padding: 40px;

/*	border: 1px solid rgba(255,255,255,.2);*/

	font-family: "Questa Grande", serif;
	color: #6d6d6d;
	opacity: 1;
	font-size: 15pt;
	letter-spacing: 1.4pt;
	line-height: 27pt;
}

.quote a {
	color: #eadeca;
}

.quote a:hover {
	opacity: .5;
	text-decoration: none;
}

.cast p.quote {
	color: #eadeca;
	letter-spacing: 2pt;
}
.cast {
	text-transform: uppercase;
	color: #fff;
}

span {
	
	font-family: "Questa Grande", serif;
}

.cover-image {
	min-width: 100%;
	background-image: url("../img/cover.png");
}

.leader {
	margin-top: -50px;
	margin-bottom: 14px; 
}

.buy-button {
	margin:0px;
	background-color: #000;
	padding: 20px 30px;
	border-color: #eadeca;

	font-size: 16pt;
	text-transform: uppercase;
	letter-spacing: 3pt;
	font-family: "Questa Grande", serif;
	color: rgba(255,255,255,.5);
}

.buy-button:hover, .buy-button:focus, .buy-button:active {
	background-color: #eadeca;
	color: #000;
	border-color: #eadeca;
}


.linking {
	margin: 60px 0px 30px 0px;
}

.divider-line {
	width: 400px;
	height: 1px;
	background-color: #eadeca;
	margin: 0 auto;
	margin-bottom: 20px;
	margin-top: 20px;
	opacity: .5;
}

.separator {
	width: 1px;
	height: 180px;
	background-color: #fff;
	opacity: 1;
	margin: 0 auto;
}

.separator2 {
	width: 1pt;
	height: 80px;
	background-color: #fff;
	opacity: .2;
	margin: 0 auto;

}

.circle {
	width: 18px;
	height: 18px;
	background-color: #000;
	margin: 0 auto;
	margin-bottom: 2px;
	border: 1px solid #fff;
	border-radius: 10px;
}

.center-pic {
	margin: 100px 0px 50px 30px;
}

.chloe-bg {
	margin: 0 auto;
	margin-top: 60px;

}

.logo:hover {
	opacity: .5;
}

.no-padding {
	padding-bottom: 0px;
}

ul {
	list-style: none;
}

.social {
	padding: 0px;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:.3; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:.3; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:.3; } }

.fade-in {
	opacity:0;	/* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;	/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in {
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
animation-delay: .5s;

}

.pulse1 {
	-webkit-animation: pulse1 2s ease-in;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: .7s;
	opacity: 0.0
}
@-webkit-keyframes pulse1 {
	0% {-webkit-transform: scale(.7, .7); opacity: 0.0;}
	50% {opacity: .4;}
	100% {-webkit-transform: scale(1.4, 1.4); opacity: 0.0;}
}

/*=================hover===============*/

ul {
	margin: 0px;
	padding: 0px;
}

ul.img-list li:hover span.text-content {
	opacity: 1;
}

span.text-content {
	font-family: "Questa Grande", serif;
	letter-spacing: 2pt;
	font-size: 13pt;

	background: rgba(0,0,0,0.5);
	color: #eadeca;
	cursor: pointer;
	display: inline-block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	padding-top: 90%;

	opacity: 0;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

/*=================End hover===============*/

/*==================== @2x ======================*/

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
	.cover-image {
		background-image: url("../img/cover@2x.png");
	}
}

/*======================== End @2x ===================*/

/*==================== max-width 600px ======================*/

@media only screen and (max-device-width: 600px) {
    
    .cover-image {
    	background-image: url("../img/cover-mobile.png");
		
    }

    .cover h1{
		font-size: 40pt;
		color: #fff;
		letter-spacing: 19pt;
		margin-top: -40px;
	}

	.divider-line {
		max-width: 90%;
		padding: 0px 2px;

	}

}