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

/* LAYOUT */

body { 
	margin: 0px; 
	background-color: #FFF;
	font-family: proxima-nova, sans-serif;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.container {
	width: 900px;
	margin: 0 auto;
}

.title {
	height: 100vh;
	width: 100%;
	background-color: #FFF;
	color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px 30px 0px 30px;
	overflow: auto;
	background: url(img/bg.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.title-image {
	height: 90vh; 
	width: auto; 
	margin: 0 auto;
	-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-5-20 17:22:59
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}

.intro {
	background: #FFF;
	width: 800px;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 150px;
	text-align: left;
	padding: 50px;
}

.story {
	width: 800px;
	margin: 0 auto;
	margin-top: -250px;
	margin-bottom: 150px;
	text-align: justify;
	padding: 50px;
}
.chapter-title {
	width: 100%;
	text-align: center;
	padding: 100px 100px 350px 100px;
	color: #000;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}

.chapter-title.bib { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/bib.jpg) no-repeat center center }
.chapter-title.slide { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/slide.jpg) no-repeat center center }
.chapter-title.francebeach { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/francebeach.jpg) no-repeat center center }
.chapter-title.rain { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/rain.jpg) no-repeat center center }
.chapter-title.balloon { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/balloon.jpg) no-repeat center center }
.chapter-title.car { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/car.jpg) no-repeat center center }
.chapter-title.santa { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/santa.jpg) no-repeat center center }
.chapter-title.jail { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/jail.jpg) no-repeat center center }
.chapter-title.frenchfancy { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/frenchfancy.jpg) no-repeat center center }
.chapter-title.football { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/football.jpg) no-repeat center center }
.chapter-title.wrestlingtapes { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/wrestlingtapes.jpg) no-repeat center center }
.chapter-title.milkshake { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/milkshake.jpg) no-repeat center center }

.chapter-title.socks { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/socks.jpg) no-repeat center center }
.chapter-title.wrestling { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/wrestling.jpg) no-repeat center center }
.chapter-title.expelled { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/expelled.jpg) no-repeat center center }
.chapter-title.hrgiger { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/hrgiger.jpg) no-repeat center center }
.chapter-title.bullied { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/bullied.jpg) no-repeat center center }
.chapter-title.yearbook { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/yearbook.jpg) no-repeat center center }
.chapter-title.abseiling { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/abseiling.jpg) no-repeat center center }
.chapter-title.flat { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/flat.jpg) no-repeat center center }
.chapter-title.milkybar { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/milkybar.jpg) no-repeat center center }
.chapter-title.money { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/money.jpg) no-repeat center center }

.chapter-title.dating { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/dating.jpg) no-repeat center center }
.chapter-title.jackbauer { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/jackbauer.jpg) no-repeat center center }
.chapter-title.runover { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/runover.jpg) no-repeat center center }
.chapter-title.relationships { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/relationships.jpg) no-repeat center center }
.chapter-title.ultrameet { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/ultrameet.jpg) no-repeat center center }
.chapter-title.matrixcode { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/matrixcode.jpg) no-repeat center center }
.chapter-title.house { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1)), url(img/headers/house.jpg) no-repeat center center }


/* TYPOGRAPHY */

h1 {
	font-size: 4.5em;
	font-family: big-caslon-fb, serif;
	font-weight: 700;
	font-style: normal;
	line-height: 1.4em;
}
h2 {
	font-size: 3em;
	font-family: questa-sans, sans-serif;
	font-weight: 700;
}
h3 {
	font-family: questa-sans, sans-serif;
	font-size: 2.3em;
	font-weight: 300;
}
p,li {
	font-family: questa-sans, sans-serif;
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1.7em;
	color: #444;
}
img { width: 100%; margin: 30px 0 30px 0; display: block }
blockquote {
	font-family: questa-sans, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 1.5em;
	line-height: 1.7em;
	color: #444;
	border-left: 3px solid #CCC;
	margin-left: 30px; 
	padding-left: 30px;
}




/* Media Queries */

/* iPhone */

@media screen and (max-width: 640px) and (max-width: 1136px) {

.container { width: 100% }
	
h1 { font-size: 3em; line-height: 1.2em }
h2 { font-size: 2em }
h3 { font-size: 2em }
p,li { font-size: 1.1em; line-height: 1.6em }
img { margin: 30px 0 30px 0; width: 100% }
.title {
	height: 100vh;
	width: 100%;
	text-align: center;
	margin: 0px;
	padding: 0px 20px 0px 20px;
	overflow: auto;
}
.title-image {
	margin-top: 80px;
	width: 100%; 
	height: auto;
}
.intro {
	background: #FFF;
	width: 100%;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 150px;
	text-align: left;
	padding: 20px;
}

.story {
	width: 100%;
	margin-top: -250px;
	margin-bottom: 150px;
	padding: 20px;
}
.chapter-title {
	width: 100%;
	padding: 70px 20px 320px 20px;
}


}