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


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

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

@media screen and (max-width: 1300px) {
	#slider1_container {
		left: 0 !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.collab {
		float: none !important;
		margin-right: 0 !important;
		text-align: center;
		margin-bottom: 2em;
	}
	
	.role {
		float: none !important;
		margin-left:  0 !important;
		margin-right:  0 !important;
		text-align: center;
		margin-bottom: 2em;
	}
	
	.tools {
		float: none !important;
		text-align: center;
	}
	
	.alignment-img {
		float: none !important;
		margin-right: auto !important;
		margin-left: auto !important;
		display: block !important;
		border: 1px solid #000;
	}
	
	.align-title {
		color:#000;
		font-size:2em;
		margin-left:16%;
		margin-top: 1em!important;
	}
	
	.align-description {
		margin-left:16%;
		margin-right: 15% !important;
		margin-bottom: 3em;
	}
	
	.balance-contrast-img {
		float: none !important;
		margin-right: auto !important;
		margin-left: auto !important;
		display: block !important;
		border: 1px solid #000;
	}
	
	.balance-title {
		color:#000;
		font-size:2em;
		margin-right:0 !important;
		margin-left:16% !important;
		margin-top: 1em !important;
	}
	
	.balance-description {
		margin-right: 15% !important;
		margin-left: 16% !important;
	}
	
	.line3 {
		margin-top: 5em !important;
	}
	
	.swipe {
		display: block !important;
	}
	
}

@media screen and (max-width: 550px) {
	.alignment-img {
		width: 80% !important;
	}

	.balance-contrast-img {
		width: 80% !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: LatoRegular;
	text-decoration: none;
	color: #999;
}

a:visited {
	color: #999;
}

/*----------------Content----------------*/
.swipe {
		display: block;
}
	

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

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

.collab {
	float: left;
	margin-right: 10%;
	text-align: center;
}

.role {
	float: left;
	margin-left: 20.5%;
	margin-right: 10%;
	text-align: center;
}

.tools {
	float: left;
	text-align: center;
}

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

p.description {
	margin-left: 16%;
	margin-right: 16%;
	margin-bottom: 5%;
} 

.element.style {
	border: none;
}

.line2 {
	border-bottom: 1px solid #000;
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 100px;
	margin-top: 5%;
	margin-bottom: 5%;
}

.alignment-img {
	float: right;
	margin-right: 16%;
	margin-top: 0;
	border: 1px solid #000;
}

.align-title {
	color:#000;
	font-size:2em;
	margin-left:16%;
	margin-top:7%;
}

.align-description {
	margin-left:16%;
	margin-right:55%;
}

.balance-contrast-img {
	float: left;
	margin-left: 16%;
	margin-top: 0;
	border: 1px solid #000;
}

.balance-title {
	color:#000;
	font-size:2em;
	margin-right:16%;
	margin-left:55%;
	margin-top:14%;
}

.balance-description {
	margin-right:16%;
	margin-left:55%;
}

.line3 {
	border-bottom: 1px solid #000;
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 100px;
	margin-top: 20%;
	margin-bottom: 5%;
}