@charset "utf-8";
/* CSS Document */
@font-face{
    font-family:'GL';
    src:url('fonts/GothamRounded-Light.eot');
    src:url('fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamRounded-Light.woff2') format('woff2'),
		url('fonts/GothamRounded-Light.woff') format('woff'),
		url('fonts/GothamRounded-Light.ttf') format('truetype'),
		url('fonts/GothamRounded-Light.svg#GothamRounded-Light') format('svg');
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}
@font-face{
    font-family:'G';
    src:url('fonts/GothamRounded-Book.eot');
    src:url('fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamRounded-Book.woff2') format('woff2'),
		url('fonts/GothamRounded-Book.woff') format('woff'),
		url('fonts/GothamRounded-Book.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}
@font-face{
    font-family:'GM';
    src:url('fonts/GothamRounded-Medium.eot');
    src:url('fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamRounded-Medium.woff2') format('woff2'),
		url('fonts/GothamRounded-Medium.woff') format('woff'),
		url('fonts/GothamRounded-Medium.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}
@font-face{
    font-family:'GB';
    src:url('fonts/GothamRounded-Bold.eot');
    src:url('fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/GothamRounded-Bold.woff2') format('woff2'),
		url('fonts/GothamRounded-Bold.woff') format('woff'),
		url('fonts/GothamRounded-Bold.ttf') format('truetype'),
		url('fonts/GothamRounded-Bold.svg#GothamRounded-Bold') format('svg');
    font-weight:normal;
    font-style:normal;
	font-display:fallback;
}
*,*::before,*::after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body{
	display:block;
	margin:0;
	padding:0;
	width:100%;
	max-width:100%;
	min-height:100vh;
	font-family: 'GL',sans-serif;
	background-color:#023d50;
	background-image:url("img/joi-page-bg.svg");
	background-position:100% 100%;
	background-size:43vw auto;
	background-repeat:no-repeat;
}
body #page{
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:0 auto;
	padding:0 20px;
	width:100%;
	max-width:1480px;
	min-height:100vh;
}
body #page .header{
	display:block;
	margin:0 auto 40px auto;
	width:100%;
	max-width:720px;
}
.header-divider{
	border:0;
	border-bottom:1px solid #FFFFFF;
	box-shadow:none;
}
.content-inner{
	display:block;
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:720px;
}
.content-inner .intro-text{
	display:block;
	margin:0;
	padding:40px 0;
	font-size:18px;
	color:#FFFFFF;
	line-height:1.4;
}
.content-bottom{
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	margin:0 auto;
	padding:40px 0;
	width:100%;
	max-width:720px;
}
.content-bottom .address{
	display:block;
	margin:0;
	width:50%;
}
.content-bottom .address p{
	margin:0 0 20px 0;
	font-size:18px;
	color:#FFFFFF;
	line-height:1.4;
}
.content-bottom .address .contact-email{
	display:block;
	margin:0;
	padding:0;
	font-size:20px;
	color:#FFFFFF;
	font-family: 'GL',sans-serif;
	text-decoration:none;
}
.content-bottom .social{
	display:block;
	margin:0;
	padding:0;
	width:50%;
}
.content-bottom .social .social-channels{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	margin:0;
	padding:0;
	list-style:none;
}
.content-bottom .social .social-channels li{
	display: block;
    margin: 0 20px 0 0;
    padding: 0;
}
.content-bottom .social .social-channels li:last-of-type{
	margin-right:0;
}
.content-bottom .social .social-channels li a{
	font-size:30px
}

/****
 * Responsive
****/
@media screen and (max-width:780px){
	body{
		background-attachment:fixed;
	}
	body #page .header,
	.content-inner,
	.content-bottom{
		padding-left:40px;
		padding-right:40px;
		max-width:100%;
	}	
}
@media screen and (max-width:600px){
	body #page{
		padding:40px 20px;
	}
	body #page .header,
	.content-inner,
	.content-bottom{
		padding-left:0;
		padding-right:0;
	}
	body #page .header #logo{
		display:block;
		margin:0 auto;
		padding:0;
		width:100%;
		max-width:250px;
	}
	body #page .header #logo > img{
		display:block;
		margin:0;
		padding:0;
		width:100%;
		max-width:100%;
	}
	.content-inner .intro-text{
		text-align:center;
	}
	.content-bottom .address{
		width:100%;
		text-align:center;
	}
	.content-bottom .social{
		margin-top:40px;
		width:100%;
		text-align:center;
	}
	.content-bottom .social .social-channels{
		justify-content:center;
	}
}