@charset "UTF-8";
@import url("reset.css");

/*GLOBAL STYLES
*/


article {
	width: 100%;
	min-width: 250px;
	max-width: 1650px;
}

/*NAVIGATION*/

nav {
    width: 100%;
}

nav .back, nav .home, nav .next {
	width: 20%;
	height: 3.5em;
	margin-left: 13%;
	float: left;
	background-size: contain;
	background-repeat: no-repeat;
	transition: background-image 1s ease-in;
}

nav .back {
	background-image: url("../images/navleft.png");
}

nav .back:hover {
	background-image: url("../images/navleft.png");
}

nav .home {
	background-image: url("../images/navmiddle.png");
}

nav .home:hover { background-image: url("../images/navmiddle.png");
}

nav .next {
	background-image: url("../images/navright.png");
	margin-right: 0;
}

nav .next:hover {
	background-image: url("../images/navright.png");
}

/*HEADER*/

header {
    width: 102%;
	padding-bottom: 5%;
	padding-top: 5%;
}

title {
	width: 100%;
}

.title img {
	width: 100%;
	margin-top: 0.75em;
	margin-bottom: 0.25em;
}

.bar {
	width: 80%;
	margin: 15px auto;
	max-width: 525px;
}

.bar img {
	width: 100%;
}

.bar2 {
	width: 80%;
	margin: 15px auto;
	max-width: 525px;
}

.bar2 img {
	width: 100%;
}

.letterhead {
	margin-top: 10%;
	margin-left: 10%;
	margin-bottom: 10%;
	width: 100%;
}

.letterhead img {
	width: 82%;
}

.title {
	margin: 3em 0;
	position: relative;
	text-align: center;
	width: 100%;
}

.title img {
	margin-left: 5px;
	width: 80%;
	height: 80%;
}

h2 {
	font-family: 'Superclarendon', Times New Roman;
	color: black;
	width: 100%;
	font-size: 2em;
	font-weight: normal;
	text-align: center;
	line-height: 1.4;
}

h3 {
    font-family: "Rochester", cursive, Times New Roman, Georgia;
  	font-weight: 400;
  	font-style: normal;
    width: 60%;
	font-size: 2em;
	text-align: center;
	line-height: 1.3;
	margin: .5em auto;
}

/*SECTION*/

section {
    width: 85%;
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4em;
}

p {
	font-family: Times, Times New Romain, serif;
	font-size: 1em;
	line-height: 1.6em;
	margin-bottom: .75em;
	margin-top: .75em;
	text-align: left;
}

section p {
	margin-bottom: .75em;
	margin-top: .75em;	
}

p.hide {
	display: none;
}

.bear {
	width: 100%;
	display: none;
}
	
.illust1  {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.illust1 img {
	width: 83%;
	margin-left: 20%;
}

.quote1 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.quote1 img {
	width: 55%;
	margin-left: 30%;
}

.illust2 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.illust2 img {
	width: 70%;
	height: 30%;
	margin-left: 25%;
}

.illust3 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.illust3 img {
	width: 55%;
	margin-left: 30%;
}

.illust4 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.illust4 img {
	width: 87.5%;
	margin-left: 15%;
}

.illust5 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.illust5 img {
	width: 68%;
	margin-left: 25%;
}

.quote2 {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	position: relative;
}

.quote2 img {
	width: 84%;
	margin-left: 20%;
}

.illust6 {
	width: 100%;
	margin-top: 2em;
	margin-bottom: 2em;
	position: relative;
}

.illust6 img {
	width: 75%;
	margin-left: 25%;
}

.falling, .fallen {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	display: none;
	float: right;
}

.falling img, .fallen img {
	width: 75%;
	display: none;
}

.umbrella {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	display: none;
	float: right;
}

.umbrella img {
	width: 75%;
	display: none;
}

/* MEDIA QUERIES */

@media (min-width: 320px){
	
	nav {
		margin-bottom: 1em;
	}
	
	.illust1 img {
	width: 83%;
	margin-left: 10%;
}
	
	.quote1 img {
	width: 55%;
	margin-left: 20%;
}
	
	.illust2 img {
	width: 70%;
	height: 30%;
	margin-left: 15%;
}
	
	.illust3 img {
	width: 55%;
	margin-left: 22%;
}
	
	.illust4 img {
	width: 87.5%;
	margin-left: 5%;
}
	
	.illust5 img {
	width: 68%;
	margin-left: 20%;
}
	
	.quote2 img {
	width: 84%;
	margin-left: 5%;
}
	
	.illust6 img {
	width: 75%;
	margin-left: 13%;
}
	
	
}
@media (min-width:450px) {
	
	nav {
		margin-bottom: 1em;
	}
	
	.illust5 img {
		width: 80%;
		margin-left: 10%;
	}
	
	.illust1 img {
	width: 65%;
	margin-left: 18%;
}
	
	.quote1 img {
	width: 45%;
	margin-left: 30%;
}
	
	.illust2 img {
	width: 60%;
	height: 30%;
	margin-left: 22%;
}
	
	.illust3 img {
	width: 45%;
	margin-left: 27%;
}
	
	.illust4 img {
	width: 77.5%;
	margin-left: 13%;
}
	
	.illust5 img {
	width: 58%;
	margin-left: 25%;
}
	
	.quote2 img {
	width: 74%;
	margin-left: 13%;
}
	
	.illust6 img {
	width: 65%;
	margin-left: 15%;
}
	
}
@media (min-width:550px) {
	
	.letterhead img {
		width: 72%;
		margin-left: 3%;
	}
	
		.illust1 img {
	width: 53%;
	margin-left: 25%;
}
	
	.quote1 img {
	width: 35%;
	margin-left: 30%;
}
	
	.illust2 img {
	width: 50%;
	height: 30%;
	margin-left: 28%;
}
	
	.illust3 img {
	width: 35%;
	margin-left: 32%;
}
	
	.illust4 img {
	width: 67.5%;
	margin-left: 15%;
}
	
	.illust5 img {
	width: 48%;
	margin-left: 28%;
}
	
	.quote2 img {
	width: 64%;
	margin-left: 18%;
}
	
	.illust6 img {
	width: 55%;
	margin-left: 21%;
}
}

@media (min-width: 686px){
	.letterhead img {
		width: 60%;
		margin-left: 10%;
	}
	
		.illust1 img {
	width: 47%;
	margin-left: 25%;
}
	
	.quote1 img {
	width: 33%;
	margin-left: 33%;
}
	
	.illust2 img {
	width: 50%;
	height: 30%;
	margin-left: 28%;
}
	
	.illust3 img {
	width: 33%;
	margin-left: 35%;
}
	
	.illust4 img {
	width: 62%;
	margin-left: 20%;
}
	
	.illust5 img {
	width: 39%;
	margin-left: 34%;
}
	
	.quote2 img {
	width: 64%;
	margin-left: 18%;
}
	
	.illust6 img {
	width: 55%;
	margin-left: 21%;
}
}
	
@media (min-width: 768px){
	header {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.letterhead img {
		width: 55%;
		margin-left: 10%;
	}
	
	.title img {
		width: 50%;
	}
	
	.bar img {
		width: 100%;
	}
	
	h2 {
		width: 100%;
	}
	
	h3 {
		width: 40%;
		margin-top: -6%;
	}
	
	p.hide {
		display: block;
	}
	
	section {
		width: 80%;
	}
	.illust1 {
    width: 90%;
    margin-right: -7em;
    margin-left: -5em;
    float: right;
	}
	
	.quote1 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
		
	.illust2 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust3 {
		width: 85%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust4 {
		width: 68%;
		margin-right: -7em;
		margin-left: -6em;
		float: right;
	}
	
	.illust5 {
		width: 77%;
		margin-right: -9em;
		margin-left: -6em;
		float: right;
	}
	
	.quote2 {
		width: 65%;
		margin-right: -7em;
		margin-left: -2em;
		float: right;
	}
	
	.illust6 {
    width: 66%;
    margin-right: -7em;
    margin-left: -6em;
	margin-top: -10em;
    float: right;
	}
	
	.falling {
	width: 60%;
    margin-left: -6em;
	display: block;
}
	
	.falling img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.umbrella {
	width: 66%;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
		
}
	
	.umbrella img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.fallen {
	width: 55%;
	margin-left: 30%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	
}
@media (min-width:886px){
	
	header {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.letterhead img {
		width: 50%;
		margin-left: 15%;
	}
	
	.title img {
		width: 50%;
	}
	
	.bar img {
		width: 100%;
	}
	
	h2 {
		width: 100%;
	}
	
	h3 {
		width: 40%;
		margin-top: -6%;
	}
	
	p.hide {
		display: block;
	}
	
	section {
		width: 80%;
	}
	.illust1 {
    width: 90%;
    margin-right: -7em;
    margin-left: -5em;
    float: right;
	}
	
	.quote1 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
		
	.illust2 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust3 {
		width: 85%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust4 {
		width: 68%;
		margin-right: -7em;
		margin-left: -6em;
		float: right;
	}
	
	.illust5 {
		width: 77%;
		margin-right: -7em;
		margin-left: -6em;
		float: right;
	}
	
	.quote2 {
		width: 65%;
		margin-right: -7em;
		margin-left: -2em;
		float: right;
	}
	
	.illust6 {
    width: 66%;
    margin-right: -7em;
    margin-left: -6em;
	margin-top: -10em;
    float: right;
	}
	
	.falling {
	width: 60%;
    margin-left: -6em;
	display: block;
}
	
	.falling img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.umbrella {
	width: 66%;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
		
}
	
	.umbrella img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.fallen {
	width: 55%;
	margin-left: 10%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	
}

@media (min-width:950px){
	
	header {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.letterhead img {
		width: 46%;
		margin-left: 18%;
	}
	
	.title img {
		width: 50%;
	}
	
	.bar img {
		width: 100%;
	}
	
	h2 {
		width: 100%;
	}
	
	h3 {
		width: 40%;
		margin-top: -6%;
	}
	
	p.hide {
		display: block;
	}
	
	section {
		width: 80%;
	}
	.illust1 {
    width: 90%;
    margin-right: -7em;
    margin-left: -5em;
    float: right;
	}
	
	.quote1 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
		
	.illust2 {
		width: 80%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust3 {
		width: 85%;
		margin-right: -7em;
		margin-left: -5em;
		float: right;
	}
	
	.illust4 {
		width: 68%;
		margin-right: -7em;
		margin-left: -6em;
		float: right;
	}
	
	.illust5 {
		width: 77%;
		margin-right: -7em;
		margin-left: -6em;
		float: right;
	}
	
	.quote2 {
		width: 65%;
		margin-right: -7em;
		margin-left: -2em;
		float: right;
	}
	
	.illust6 {
    width: 66%;
    margin-right: -7em;
    margin-left: -6em;
	margin-top: -10em;
    float: right;
	}
	
	.falling {
	width: 60%;
    margin-left: -6em;
	display: block;
}
	
	.falling img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.umbrella {
	width: 66%;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
		
}
	
	.umbrella img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.fallen {
	width: 45%;
	margin-left: 10%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	
}

@media (min-width: 1000px){
	
	header {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		left: 0;
	}
	
	.letterhead img {
		width: 40%;
		margin-left: 20%;
	}
	
	.title img {
		width: 50%;
	}
	
	.bar {
		margin-top: -5%;
	}
	
	.bar img {
		width: 100%;
	}
	
	.bar2 {
		margin-top: 5%;
	}
	
	.bar2 img {
		width: 100%;
	}
	
	h2 {
		width: 100%;
	}
	
	h3 {
		width: 30%;
		margin-left: 35%;
		margin-top: 10%;
		line-height: 1.6;
	}
	
	p.hide {
		display: block;
	}
	
	.illust1 {
		width: 70%;
		float: right;
	}
	
	.quote1 {
		width: 70%;
		float: right;
	}
		
	.illust2 {
		width: 70%;
		float: right;
	}
	
	.illust3 {
		width: 70%;
		float: right;
	}
	
	.illust4 {
		width: 60%;
		float: right;
	}
	
	.illust5 {
		width: 70%;
		float: right;
	}
	
	.quote2 {
		width: 70%;
		float: right;
	}
	
	.illust6 {
		width: 70%;
		float: right;
	}
	
	.falling {
	width: 60%;
	display: block;
}
	
	.falling img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.umbrella {
	width: 60%;
	display: block;
		
}
	
	.umbrella img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}
	
	.fallen {
	width: 40%;
	margin-left: 10%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	
}

@media (min-width: 1150px){

	.umbrella {
	width: 50%;
	margin-right: 10%;
	display: block;
		
}
	
	.umbrella img {
	width: 56%;
	height: 40%;
	float: right;
	display: block;
}	
	
	.fallen {
	width: 38%;
	margin-left: 10%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	
	p.hide {
		display: block;
	}
	
}

@media (min-width: 1250px){
	
	nav {
    	width: 100%;
		margin-top: -5%;
}
	
	header {
    width: 30%;
    background-color: #FAF9F6;
    position: fixed;
    top: 0;
    left: 0;
	margin-top: -2%;
	}
	
	.bar {
		width: 80%;
		margin-top: -5%;
	}
	
	.bar2 {
		display: none;
	}
	
	h2 {
		margin-bottom: 8%;
	}
	
	h3 {
		width: 64%;
		margin-top: -5%;
		margin-left: 19%;
		font-family: "Jacques Francois Shadow", serif;
  		font-weight: 400;
  		font-style: normal;
		font-size: 1.3em;
	}
	
	.letterhead {
		display: none;
	}
	
	p.hide {
		display: block;
	}
	
	section {
    width: 55%;
    float: right;
    padding-top: 3em;
    padding-right: 10%;
    padding-left: 11%;
    padding-bottom: 0;
	}
	
	.title img {
		width: 80%;
	}
	
	.bar {
		margin-top: -2%;
	}
	
	.bar img {
		width: 100%;
	}
	
	.bear {
	width: 84%;
	display: block;
	float: right;
    margin-left: 10%;
	margin-right: 17%;
	margin-bottom: 1%;
}
	
	p:first-of-type::first-letter {
    font-size: 2.5em;
    font-weight: bold;
	}
	

	.illust1 {
    width: 80%;
	float: right;
	}
	
	.quote1 {
		width: 80%;
		float: right;
	}
		
	.illust2 {
		width: 80%;
		float: right;
	}
	
	.illust3 {
		width: 80%;
		float: right;
	}
	
	.illust4 {
		width: 70%;
		float: right;
	}
	
	.illust5 {
		width: 80%;
		float: right;
	}
	
	.quote2 {
		width: 70%;
		float: right;
	}
	
	.illust6 {
		width: 50%;
		margin-right: -18px;
		float: right;
	}
	
	.falling {
	width: 70%;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: -18px;
	display: block;
}
	
	.falling img {
	width: 46%;
	height: 38%;
	margin-right: 15%;
	float: right;
	display: block;
}
	
	.umbrella {
	width: 60%;
	float: right;
	display: block;
		
}
	
	.umbrella img {
	width: 50%;
	height: 38%;
	margin-right: 15%;
	float: right;
	display: block;
}
	.fallen {
	width: 40%;
	margin-left: 10%;
	display: block;
	float: right;
}

	.fallen img {
	width: 75%;
	display: block;
}
	}