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

/*----------------Media Query-----------------*/

/*------------ BREAKPOINT ON DESKTOP -----------*/

@media screen and (max-width: 1400px) {
	img.seamless {
		margin-left: 15% !important;
		margin-top: 5em !important;
	}
	
	.seamless-title {
		margin-top: 16em !important;
		font-size: 2em !important;
	}
	
	p.description1 {
		width: 30%;
		margin-bottom: 0em !important;
	}
	
	img.simple {
		margin-left: 54% !important;
		margin-top: -26.7em !important;
	}
	
	.simple-title {
		margin-top: -2.4em !important;
		float: none !important;
		font-size: 2em !important;
		margin-left: 54% !important;
	}
	
	p.description2 {
		float: none !important;
		margin-bottom: 0em !important;
		margin-left: 54% !important;
		text-align: left !important;
	}
	
	.line2 {
		margin-top: 8em !important;
		margin-bottom: 8em !important;
	}
}

@media screen and (max-width: 1200px) {
	img.seamless {
		position: inherit !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 5em !important;
	}
	
	.seamless-title {
		margin-top: 0em !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		padding-top: 0 !important;
		font-size: 2em !important;
		text-align: center;
	}
	
	p.description1 {
		width: auto !important;
		text-align: center;
		margin-bottom: 5em !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	img.simple {
		position: inherit !important;
		display: block !important;
		margin-right: auto !important;
		margin-left: auto !important;
		margin-top: 0em !important;
	}
	
	.simple-title {
		margin-top: 0em !important;
		float: none !important;
		font-size: 2em !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center;
	}
	
	p.description2 {
		float: none !important;
		margin: 0 !important;
		width: auto !important;
		text-align: center !important;
	}
	
	.line2 {
		margin-top: 8em !important;
		margin-bottom: 8em !important;
	}
}

/*------iPhone 5------*/
@media screen and (device-aspect-ratio: 40/71) {
	img.seamless {
		position: inherit !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 5em !important;
	}
	
	.seamless-title {
		margin-top: 0em !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		padding-top: 0 !important;
		font-size: 2em !important;
		text-align: center;
	}
	
	p.description1 {
		width: auto !important;
		text-align: center;
		margin-bottom: 5em !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	img.simple {
		position: inherit !important;
		display: block !important;
		margin-right: auto !important;
		margin-left: auto !important;
		margin-top: 0em !important;
	}
	
	.simple-title {
		margin-top: 0em !important;
		float: none !important;
		font-size: 2em !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: center;
	}
	
	p.description2 {
		float: none !important;
		margin: 0 !important;
		width: auto !important;
		text-align: center !important;
	}
	
	.line2 {
		margin-top: 8em !important;
		margin-bottom: 8em !important;
	}
}

/*------iPad------*/
@media screen and (device-aspect-ratio: 3/4) {
		img.seamless {
		margin-left: 15% !important;
		margin-top: 5em !important;
	}
	
	.seamless-title {
		margin-top: 16em !important;
		font-size: 2em !important;
	}
	
	p.description1 {
		width: 30%;
		margin-bottom: 0em !important;
	}
	
	img.simple {
		margin-left: 54% !important;
		margin-top: -26.7em !important;
	}
	
	.simple-title {
		margin-top: -2.4em !important;
		float: none !important;
		font-size: 2em !important;
		margin-left: 54% !important;
	}
	
	p.description2 {
		float: none !important;
		margin-bottom: 0em !important;
		margin-left: 54% !important;
		text-align: left !important;
	}
	
	.line2 {
		margin-top: 8em !important;
		margin-bottom: 8em !important;
	}
}
	

/*----------------Lato Font----------------*/

@font-face {
	font-family: LatoLight;
	src: url(../font/Lato-Light.ttf);
}

@font-face {
	font-family: LatoThin;
	src: url(../font/Lato-Thin.ttf);
}

@font-face {
	font-family: LatoSemibold;
	src: url(../font/Lato-Semibold.ttf);
}

@font-face {
	font-family: LatoRegular;
	src: url(../font/Lato-Regular.ttf);
}

@font-face {
	font-family: LatoMedium;
	src: url(../font/Lato-Medium.ttf);
}

@font-face {
	font-family: LatoHeavy;
	src: url(../font/Lato-Heavy.ttf);
}

@font-face {
	font-family: LatoHairline;
	src: url(../font/Lato-Hairline.ttf);
}

@font-face {
	font-family: LatoBold;
	src: url(../font/Lato-Bold.ttf);
}

@font-face {
	font-family: LatoBlack;
	src: url(../font/Lato-Black.ttf);
}

/*----------------Global----------------*/

body, html {
	font-family: LatoLight;
	font-size: 100%;
	margin: 0;
	padding: 0;
	height: 99%;
	width: auto;
}

p {
	font-family: LatoLight;
	font-size: 1em;
	color: #000;
	margin: 0;
	padding: 0;
}

#fade-on-load {
	opacity: 0;
}


/*----------------Links----------------*/

a:link {
	font-family: LatoThin;
	text-decoration: none;
	color: #999;
}

a:visited {
	color: #999;
}

a:hover {
	color: #6AA8A8;
}

/*----------------Content----------------*/

p.title {
	font-family: LatoBold;
	font-size: 2.5em;
	text-align: center;
	padding-top: 2.5em;
}

p.sub-title {
	font-famly: LatoThin;
	font-size: 1.5em;
	text-align: center;
	padding-bottom: 2em;
	color: #333;
}

p.content {
	margin-bottom: 4em;
	text-align: center;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.line1 {
	border-bottom: 1px solid #000;
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 6em;
	margin-bottom: 5em;
}

.seamless-title {
	color:#000;
	font-size:2.5em;
	margin-left:16%;
	padding-top:15%;
}

p.description1 {
	margin-left: 16%;
	margin-right: 50%;
	margin-bottom: 3em;
} 

img.seamless {
	position: absolute;
	margin-top: 0em;
	margin-left: 54%;
}

.simple-title {
	color:#000;
	font-size:2.5em;
	float:right;
	margin-right:20%;
	margin-top:12em;
}

p.description2 {
	clear: right;
	float: right;
	margin-right: 20%;
	width: 30%;
	margin-bottom: 5em;
	text-align: right;
}

img.simple {
	position: absolute;
	margin-left: 16%;
	margin-top: 20%;
}

.line2 {
	border-bottom: 1px solid #000;
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 6em;
	margin-top: 50em;
	margin-bottom: 10em;
}

.interactive-title {
	color:#000;
	font-size:2.5em;
	text-align:center;
	margin-bottom:5%;
}

.interactive-group {
	margin-left: 15%;
}