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

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

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

@media screen and (max-width: 1000px) {
	.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;
	}
	
	.swipe {
		display: block !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----------------*/
#slider1_container {
	display: block;
	margin-right: auto;
	margin-left: auto;
	left: 0 !important;
}

.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: 12%;
	text-align: center;
}

.role {
	float: left;
	margin-left: 17%;
	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: 12%;
	margin-bottom: 5%;
}

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


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