@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight:200;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff2') format('woff2'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Thin-webfont.eot');
    src: url('../fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin-webfont.woff2') format('woff2'),
         url('../fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'satisfy';
    src: url('../fonts/Satisfy-Regular.eot');
    src: url('../fonts/Satisfy-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Satisfy-Regular.woff2') format('woff2'),
         url('../fonts/Satisfy-Regular.woff') format('woff'),
         url('../fonts/Satisfy-Regular.ttf') format('truetype'),
         url('../fonts/Satisfy-Regular.svg#robotothin') format('svg');
    font-weight: 100;
    font-style: normal;
}
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: roboto;
}
img{
	border:0;
	display:block;
}
html, body{
	min-height:100%;
	scroll-behavior: smooth;
}
body{height:100%;}
header{
	width: 100%;
	height: 100vh;
	background-image: url(../img/Header_001.png);
	background-size: cover;
	background-repeat: no-repeat;
}
nav.mainNav{
	display:block;
	transition: all 0.3s ease;
    background-color: rgba(51,116,193,0.00);
	position:sticky;
	top:0px;
	z-index: 100;
	height:50px;margin-top: -50px;text-align: center;
}
nav.scrolled{
	transition: all0.3s  ease;
    background-color: rgba(51,116,193,1.00);
	z-index: 100;
	height:50px;
	margin-top: -50px;text-align: center;
}
nav.mainNav ul li{
	transition: all 0.3s  ease;
	display:inline-block;
	margin:0 20px 0 20px;
	font-size: 1.5em;
	margin-top: 50px;
}
nav.scrolled ul li{
	transition: all 0.5s ease;
	font-size: 1.1em;
	margin-top: 15px;
}
nav.mainNav ul li a{
	transition: all 0.3s ease;
	text-decoration: none;
	color: rgba(51,116,193,1.00);
}
nav.scrolled ul li a{
	transition: all 0.3s  ease;
	text-decoration: none;
	color: #FFF;
}
#branding{
	position: absolute;
	left:50px;
	top:50px;
	width: 250px;
	height: 250px;
	background-image: url(../img/logo.svg);
	background-repeat: no-repeat;
	z-index: 100;
}
#slogan{
	font-family: satisfy;
	font-size: 2.5em;
	position: absolute;
	text-align: center;
	right:50px;
	bottom:100px;
	color:#3374C1;
}
#join{
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	padding-top: 10px;
	right:50px;
	top:50px;
	text-align: center;
	font-weight:bold;
	font-size: 2em;
	color:#fff;
	background-color: #3374C1;
}
#contacts{
	position: absolute;
	width: 65px;
	height: 175px;
	bottom:100px;
	background-color: #3374C1;
}
.contactIcon{
	background-color: transparent;
	width:35px;
	margin:15px 15px 20px 15px;
	height: 35px;
}
.contactIcon.mail{	
	background-image: url(../img/C1__mail.svg);	
}
.contactIcon.fb{	
	background-image: url(../img/C1__fb.svg);	
}
.contactIcon.ig{	
	background-image: url(../img/C1__ig.svg);	
}
.callout{
	padding: 60px 0px 50px 0px;
	font-family: roboto;
	font-weight: 100;
	font-size: 2em;
	line-height: 1.5em;
	color:#FFF;
	text-align: center;
	background-color: #3374C1;
}
.callout b, .callout strong{
	font-size: 2.3em;
	font-weight: bold;
}
.wrapper{
	width:80%;
	margin: 0 auto;
}
.column, .columnLeft{
	position: relative;
	float: left;
	padding: 50px 0 0 0;
}
.wrapper .column{
	width:60%;
}
.wrapper .columnLeft{
	width:40%;
}
.column{
	color: #777;
	font-weight:200;
	line-height: 1.6em;
}
.columnLeft{
	color: #777;font-weight: 200;
}
.columnLeft h2{
	color: #3374C1;
}
.quote{
	font-size: 1.9em;
	width:70%;
	padding-top: 100px;
	margin:0 auto;
	text-align: center;
	font-family: satisfy;
	color: #3374C1;
	line-height: 1.65em;
}
.quote>cite{
	color:#777;
	font-size: 0.7em;
}
footer{
	width:100%;
	height:200px;
	position: relative;
	background-color: #3374C1;
}
#footerNav{
	position: relative;
	top: 20px;
}
#footerNav ul li{
	list-style-type: none;
}
#footerNav ul li a{
	color:#fff;
	text-decoration: none;
}
footer > .wrapper > #contacts{
	width: 250px;
	height: 40px;
	bottom:50px;
	right:10%;
}
footer > .wrapper > #contacts > a > .contactIcon{
	float: left;
	margin:10px;
}

@media only screen and (max-width: 600px) {
	nav.mainNav{
		display:none;
	}
	#branding{
		position: absolute;
		margin:0 auto;
		left:50px;
		top:50px;
		width: 200px;
		height: 200px;
	}
	#slogan{
		font-size: 1.4em;
		position: absolute;
		text-align: center;
		bottom:50px;
		width:60%;
		color:#3374C1;
	}
	#join{
		width: 170px;
		height: 170px;
		right:50px;
		top:280px;
		font-size: 1.7em;
		color:#fff;
		background-color: #3374C1;
	}
	#contacts{

		bottom:50px;

	}
	.callout{
		font-size: 1.7em;
	}
	.callout b, .callout strong{
		font-size: 1em;
	}
	.wrapper .column{
		width:100%;
	}
	.wrapper .columnLeft{
		width:100%;
	}
	.quote{
		font-size: 1.4em;
		width:100%;
		padding-top: 0px;
		padding-bottom: 30px;

	}
	.quote>cite{
		color:#777;
		font-size: 0.7em;
	}
}