* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	
	font-family:"Lato", sans-serif;
}

html,
body {
	padding:0;
	margin:0;
	
	width:100%;
	height:100%;
	
	font-size:14pt;
	
	overflow:hidden;
}

/*
	DEFINITIONS OF GENERAL STYLES
*/

h1 {
	font-size:34pt;
	font-weight:300;
	letter-spacing:2pt;
}

big {
	font-size:20pt;
	font-weight:400;
	letter-spacing:0.5pt;
}

a img {
	border:0;
}

/*
	YELLOW:rgb(255,209,86)
	BLUE: rgb(0,177,203)
	GREEN: rgb(169,208,109)
	RED: rgb(239,77,88)
	
*/

div#wrapper {
	width:100%;
	height:100%;
	overflow:hidden;
	
	position:absolute;
	top:0;
	left:0;
}

div#scroller {
	width:100%;
	height:300%;
	
	overflow:hidden;
	position:relative;
	top:0;
	left:0;
}

div.section{
	width:100%;
	height:33%;
	height:calc(100% / 3);
	overflow:hidden;
	
	position:relative;
}

div.section .scroll {
	width:100%;
	height:100%;
	position:relative;
	overflow-x:auto;
	
	padding-top:75px;
}

div.section .scroll p {
	margin-left:15px;
	font-size:24pt;
	font-weight:300;
}

div.section .scroll h1 {
	padding-left:25px;
}

div.section .scroll iframe {
	margin-bottom:50px;
}

div.section .scroll table {
	width:100%;
}

div.section .scroll table td {
	width:20%;
	padding:25px;
	position:relative;
	vertical-align:bottom;
}

div.section .scroll table td img {
	width:100%;
	margin-bottom:15px;
}

div.section#float .scroll p {
	color:white;
}
	
div#main {
	background:rgb(255,209,86) url('backgrounds.eanam.png') no-repeat right bottom;
	background-size:100% auto;
}

div#fold {
	background-color:rgb(169,208,109);	

}

div#float {
	background-color:rgb(239,77,88);	

}

div#float img {
	width:100%;
}

div#header {
	position:absolute;
	width:100%;
	height:10%;
	left:0;
	top:0;
	
	overflow:hidden;	
	
	color:rgb(0,177,203);
}

.carousel .item.flyer {
	background-size:50% auto;
	background-position:10% bottom;
}

.carousel .item.fold {
	background-size:55% auto;
	background-position:10% bottom;	
}

.carousel .item.float {
	background-size:55% auto;
	background-position:10% bottom;	
}

.carousel .item .item_text {
	position:absolute;
	right:0;
	width:30%;
	top:50%;
	transform:translateY(-45%);
	padding-right:20px;
}

.carousel .item .item_text h1 {
	font-size:30pt;
}

.carousel .item .item_text u {
	color:blue;
}

.carouselNav {
	top:0;
	bottom:auto;
	left:auto;
	height:auto;
	padding:10px;
	padding-bottom:10px;
	position:absolute;
	width:100%;
}

.carouselNav .navItem,
a.about,
a.home,
div#closer {
	background:transparent url('backgrounds.red.png') no-repeat center center;
	background-size:100% 100%;
	
	display:block;
	float:left;
	
	width:25%;
	height:auto;
	margin-right:5%;
	
	color:rgb(255,255,255);
	font-size: 20pt;
	font-weight:300;
	
	padding:10px;
	
	text-decoration:none;
	
	position:relative;
}

a.about {
	font-size:14pt;
	width:auto;
	padding-right:50px;
}

.carouselNav .navMarker {
	width:25%;
	top:auto;
	bottom:0;
	border-bottom:2px solid rgb(0,177,203);
	background:transparent url('resources.swan-right.png') no-repeat right bottom;
	background-size:auto 100%;
	height:50px;
	z-index:100;
}

.nav_marker {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	
	animation-name: fadeOut;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.carouselNav .navItem:hover .nav_marker,
a.home:hover .nav_marker {
	background:transparent url('backgrounds.stripes.png') no-repeat center top;
	background-size:100% 100%;
	animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.carouselNav .navItem.current .nav_marker {
	background:transparent url('backgrounds.stripes.png') no-repeat center top;
	background-size:100% 100%;
	animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.carouselNav .navItem.flyer {
	background-image:url('backgrounds.blue.png');
}

.carouselNav .navItem.fold {
	background-image:url('backgrounds.green.png');
}

.carouselNav .navItem.float {
	background-image:url('backgrounds.red.png');
}

a.home {
	background-image:url('backgrounds.yellow.png');
	color:rgb(239,77,88);
	
	float:none;
	
	position:absolute;
	left:20px;
	
	z-index:100;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}


div#header h1 {
	margin:0;
	padding:0;
	padding-left:10px;
	float:left;
}

div#header img {
	height:100%;
	float:left;
}

div#footer {
	position:absolute;
	width:100%;
	height:8%;
	left:0;
	bottom:0;
	
	background-color:rgb(255,209,86);
	
	border-top:10px solid rgb(255,209,86);
	border-bottom:5px solid rgb(255,209,86);
	padding-left:10px;
	
	z-index:201;
}

div#footer img {
	height:100%;
	margin-left:15px;
	float:right;
}

#about {
	position:absolute;
	
	background-color:rgb(169,208,109);
    border-top:10px solid rgb(239,77,88);
    
    overflow-y:auto;
    padding:20px;
    
    z-index:200;
    
    padding-top:70px;
}

#about #closer {
	position:absolute;
	top:5px;
	right:10px;
	width:100px;
	height:50px;
	margin-right:0;
	
	color:rgb(255,209,86);
	
	cursor:pointer;
}

#about.show {
	position:absolute;
	
	animation-name: aboutIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#about.hide {
	position:absolute;
	
	animation-name: aboutOut;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

#blanker {
	z-index:199;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:white;
	
	opacity:0.6;
	display:none;
}

@media screen and (orientation:portrait) {
	.landscape {
		display:none;
	}
	
	div#footer {
		height:5%;
	}
	
	div#header h1 {
		font-size:28pt;
		font-weight:400;
		letter-spacing:1.5pt;
	}
	
	.carouselNav .navItem {
		width:30%;
		margin-right:3%;
		font-size: 30pt;
	}
	
	.carousel .item .item_text h1 {
		font-size:50pt;
		letter-spacing:1pt;
		font-weight:400;
	}
	
	.carousel .item .item_text big {
		font-size:30pt;
		font-weight:400;
	}
	
	.carousel .item .item_text {
		position:absolute;
		width:80%;
		top:120px;
		transform:none;
		padding-left:20px;
		font-size:24pt;
		text-align:right;
	}
	
	.carousel .item .item_text p {
		width:60%;
		float:right;
	}
	
	div#main {
		background-size:200%;
	}
	
	.carousel .item.flyer {
		background-size:55% auto;
		background-position:1% bottom;
	}
	
	.carousel .item.fold {	
		background-position:1% bottom;
	}
	
	.carousel .item.float {
		background-size:90% auto;
	}
	
	#about {
		width:95%;
		height:85%;
		
		bottom:-110%;
		left:0px;
		
		font-size:12pt;		
	}
	
	@keyframes aboutIn {
		from {bottom:-110%;}
		to {bottom: 5%;}
	}

	@keyframes aboutOut {
		from {bottom: 5%;}
		to {bottom: -110%;}
	}
}


@media screen and (orientation:landscape) {
	.portrait {
		display:none;
	}
	
	#about {
		width:75%;
		height:75%;
		
		bottom:-110%;
		left:20px;		
	}
	
	@keyframes aboutIn {
		from {bottom:-110%;}
		to {bottom: 8%;}
	}
	
	@keyframes aboutOut {
		from {bottom: 8%;}
		to {bottom: -110%;}
	}
	
	
}