html, body { 
	height: 100%;
	padding: 0;
	margin: 0; 
	color: #003da6;
}

.quadrant {
	width: 50%; height: 50%; float: left; 
}


.scroll-up {
	height: 100%;	
	overflow: hidden;
	position: relative;
}
.scroll-up p {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 50px;
	text-align: center;
	/* Starting position */
	-moz-transform:rotate(-90deg) translateX(-100%);
	-webkit-transform:rotate(-90deg) translateX(-100%) ;	
	transform:rotate(-90deg) translateX(-100%);
	/* Apply animation to this element */	
	-moz-animation: scroll-up 7s linear infinite;
	-webkit-animation: scroll-up 7s linear infinite;
	animation: scroll-up 7s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
	0%   { -moz-transform:rotate(-90deg) translateX(-100%); }
	100% { -moz-transform:rotate(-90deg) translateX(100%); }
	}
@-webkit-keyframes scroll-up {
	0%   { -webkit-transform:rotate(-90deg) translateX(-100%); }
	100% { -webkit-transform:rotate(-90deg) translateX(100%); }
	}
@keyframes scroll-up {
	0%   { 
		-moz-transform:rotate(-90deg) translateX(-100%); /* Browser bug fix */
		-webkit-transform:rotate(-90deg) translateX(-100%); /* Browser bug fix */
		transform: rotate(-90deg) translateX(-100%); 		
	}
	100% { 
		-moz-transform:rotate(-90deg) translateX(100%); /* Browser bug fix */
		-webkit-transform:rotate(-90deg) translateX(100%); /* Browser bug fix */
		transform: rotate(-90deg) translateX(100%); 
		}
	}
	
.scroll-right {
	height: 100%;	
	overflow: hidden;
	position: relative;
}
.scroll-right p {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 50px;
	text-align: center;
	/* Starting position */
	-moz-transform:translateX(-1000%);
	-webkit-transform:translateX(-1000%);	
	transform:translateX(-1000%);
	/* Apply animation to this element */	
	-moz-animation: scroll-right 30s linear infinite;
	-webkit-animation: scroll-right 30s linear infinite;
	animation: scroll-right 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
	0%   { -moz-transform: translateX(-1000%); }
	100% { -moz-transform: translateX(100%); }
	}
@-webkit-keyframes scroll-right {
	0%   { -webkit-transform: translateX(-1000%); }
	100% { -webkit-transform: translateX(100%); }
	}
@keyframes scroll-right {
	0%   { 
	-moz-transform: translateX(-1000%); /* Browser bug fix */
	-webkit-transform: translateX(-1000%); /* Browser bug fix */
	transform: translateX(-1000%); 		
	}
	100% { 
	-moz-transform: translateX(90%); /* Browser bug fix */
	-webkit-transform: translateX(90%); /* Browser bug fix */
	transform: translateX(90%); 
	}
}	


#bust {
	position:fixed;
	margin-top:20px;
	margin-left:20px;	
}

#application {
	background-color:#003da6;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width:60%;
	height:60%;
	position:fixed;
	z-index:999999;
	color:#fff;
	font-family:'Cousine';
	font-size:1.25vw;
	line-height:2vw;
	background-size:contain;
	background-repeat:no-repeat;
	 box-shadow: 10px 10px 20px #888888;
	 display:none;
}

#application a{
	color:#fff;
}

#howto {
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width:80%;
	position:absolute;	
}

#close {
	position:absolute;
	right:5%;
	top:8%;	
}

#address {
	position:absolute;
	top:5%;
	left:0;
}


#withpleasure {
	position:absolute;
	right:5%;
	bottom:8%;
	
}

/*////////////////////////////////// 1 ////////////////////////////////////////*/

#one {
	background-color:#fff;
}

.center {
	margin-top:12%;
	margin-left:12%;

}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size:3vw;
}

#line {
	height:2px;
	width:50%;
	background-color:#003da6;	
	margin-top:15px;
	margin-bottom:10px;
}

#description {
	font-family: 'Cousine' ;
	font-size:.9vw;
	line-height:2.25vh;
	width:85%;
}


/*////////////////////////////////// 2 ////////////////////////////////////////*/

#two {
	background-color:#fff;	
}

	#two_topleft {
		width:50%;
		height:50%;
		background-color:#fff;
		float:left;
	}
	
	
	#two_topright {
		width:50%;
		height:50%;
		background-color:#fff;
		float:left;
	}
	
		#two_topright p {
				font-family: 'Oswald', sans-serif;
				font-size:10vw;
				Line-height:13vw;
			}
	
	#two_bottom {
		width:100%;
		height:50%;
		background-color:#fff;
		float:left;
		  
	}
		#two_bottom img {
			width:90%;
			margin-left: auto;
			margin-right: auto;
			display:block;
			margin-top:10%;
		}


/*////////////////////////////////// 3 ////////////////////////////////////////*/

#three {
	background-color:#fff;
}

#three_left {
	width:50%;
	height:100%;
	float:left;
}

	#getpaid {
		display:none;
		float:left;
	}

	#rose {
			margin-left:-35px;	
			padding-left:50%;
			padding-top:15%;
		}


	h2 {
		font-family: 'Cousine' ;
		font-size:1.25vw;
		color:#003da6;
		text-align:center;
			margin-top:15px;
		
	}
	
	h3 {
		font-family: 'Oswald', sans-serif;
		font-size:2vw;
		text-align:center;
		margin-top:10px;
	}
	
	sup { 
		font-family: 'Cousine' ;
		font-size:1vw;
		vertical-align:top;
		text-decoration:underline;
	}
	
	
	h5 {
		font-family: 'Cousine' ;
		font-size:.9vw;
		color:#003da6;
		text-align:center;
		margin-top:15px;
	}

	
#three_right {
	width:50%;
	height:100%;
	float:left;
}

	#three_right p {
		font-family: 'Oswald', sans-serif;
		font-size:15vw;
		Line-height:15vw;
		padding:25%;
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rorotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	
	
	
/*////////////////////////////////// 4 ////////////////////////////////////////*/
	
#four {
	background-color:#fff;
}

	#four_left {
		width:50%;
		height:100%;
		float:left;
		border-left: 2px solid #003da6;
		border-top: 2px solid #003da6;
	}

		#sneaker {
			margin-left:-35px;	
			padding-left:50%;
			padding-top:15%;
			opacity:0;
		}

		#four_left h2 {
			margin-top:15px;
			text-align:center;
			color:#003da6;
		}
		
		#mightdo {
			font-family: 'Cousine' ;
			font-size:.9vw;	
			line-height:1.35vw;
			width:70%;
			margin-left:auto;
			margin-right:auto;
			margin-top:15px;
			display:none;
		}

	#four_right{
		width:49%;
		height:100%;
		float:left;
		border-left: 2px solid #003da6;
		border-top: 2px solid #003da6;
	}
	
		#hotdog {
			margin-left:-35px;	
			padding-left:50%;
			padding-top:15%;
			opacity:0;
		}

	
		#four_right h2 {
			margin-top:15px;
			text-align:center;
			color:#003da6;
			
		}
		
		#careabout {
			font-family: 'Cousine' ;
			font-size:.9vw;	
			line-height:1.35vw;
			width:70%;
			margin-left:auto;
			margin-right:auto;
			margin-top:15px;
			display:none;
		}
		
		

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.quadrant {
	width: 100%; height: 100%; float: left; 
	}

	h1 {
		font-size:10vw;
	}
	
	#line {
		width:87%;	
	}
	
	#description {
		font-size:4vw;
	line-height:3.5vh;
	width:85%;	
	}
	
	h2 {
		font-family: 'Cousine' ;
		font-size:2.5vw;
		margin-top:15px;
	}
	
	#two_topleft, #two_topright {
		width:100%;
	}
	
	#two_topright p {
		font-size:30vw;
		line-height:30vw;	
	}
	
	#three_left {
		width:100%;
	}
	
	
	#rose {
		margin-left:-45px;	
		padding-left:50%;
		padding-top:15%;
		width:20%;
		margin-bottom:30px;
	}
	
	#three h2{
		font-size:6vw;

	}
	
	h5 {
		margin-top:15px;
		font-size:4vw;
	}
	
	#three h3 {
		font-size:10vw;
		margin-top:20px;	
	}
	
	
	sup { 
		font-size:6vw;
	}
	
	#three_right {
		display:none;
	}
	
	
	#four_left {
		width:100%;
	}
	
	#four h2{
		font-size:6vw;
		width:250px;	
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	
	#mightdo, #careabout {
		font-size:5vw;	
		line-height:6vw;
		width:85%;
	}
	
	#four_right {
		width:100%;
	}
	
	
#application {
	width:100%;
	height:100%;
	font-size:5vw;
	line-height:8vw;
	left: 0%;
    top: 0%;
    transform: translate(-0%,-0%);
	
}	

#withpleasure {
	width:80%;
	right:10%;
	bottom:2%;
}

#address {
	width:50%;	
}



}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 977px){
	.quadrant {
		width: 100%; height: 100%; float: left; 
	}
	
	h1 {
		font-size:10vw;
	}
	
	#line {
		width:90%;	
	}
	
	#description {
		font-size:3vw;
	line-height:4vh;
	width:85%;	
	}
	
	h2 {
		font-family: 'Cousine' ;
		font-size:2.5vw;
		margin-top:15px;
	}
	
	
	h5 {
		margin-top:25px;
		font-size:2vw;
	}
	
	#two_topright p {
			font-size:20vw;
			line-height:20vw;
		}
	
	
	#three_left {
		width:100%;
	}
	
	#rose {
		margin-left:-45px;	
		padding-left:50%;
		padding-top:15%;
		width:10%;
		margin-bottom:30px;
	}
	
	#three h2{
		font-size:	4vw;

	}
	
	#three h3 {
		font-size:5vw;
		margin-top:20px;	
	}
	
	sup { 
		font-size:4vw;
	}
	
	#three_right {
		display:none;	
		
	}
	
	#four_left {
		width:49.5%;	
	}
	
	#sneaker, #hotdog {
		padding-top:45%;
	}
	

	
	
	#four_right {
		width:49.5%;	
	}
	
	#mightdo {
		font-size:2vw;	
		line-height:3.5vw;
		width:85%;
	}
	
	#careabout {
		font-size:2vw;	
		line-height:3.5vw;
		width:85%;
	}
	
#application {
	width:80%;
	font-size:2.5vw;
	line-height:4vw;
}	
	
	
	
	
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 978px){
	#container{
		width:978px;
	}
}