/*

FRAMEWORK
---------------------------

#009FEE UN BLUE
#AAAAAA TEXT


LINKED
--------------------------- 

Padding --> Paragraphs + Headers


MEDIA QUERIES
---------------------------

xs @media (max-width: 767px)
sm @media (max-width: 997px)
md @media (max-width: 1199px)
lg @media (max-width: 2560px)


===========================
===========================

*/

	/*

	main
	===========================

	*/

		html {
		  box-sizing: border-box;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  -ms-box-sizing: border-box;
		  -o-box-sizing: border-box;
		}
		*, *:before, *:after {
		  box-sizing: inherit;
		}
		body {
			background-color: #F9F9F9;
			color: #6A6A6A;
			font-size: 21px;
			font-family: "Avenir Next", Arial;
			font-weight: 200;
		}		
		.img-responsive {
			width: 100%;
		}
		img {
			display: block;
		}
		video {
			display: block;
		}
		button {
			outline: none;
		}
		.container {
			/*background-color: pink;*/
			max-width: 2560px;
			display: block;
			margin: 0 auto;
			/*padding: 34px;*/
		}
		@media (max-width: 767px) {
			.container {
				/*padding: 21px;*/
			}	
		}
		.sub-container {
			display: block;
			position: relative;
			max-width: 1920px;
			margin: 0 auto;
		}	
		.fade-in {
		  opacity: 1;
		  transition: 1s opacity;		
		}
		.fade-out {
			opacity: 0;
		  transition: none;
		}

	/*

	media queries
	===========================

	*/	

		@media (max-width: 767px) {
		  .hidden-xs {
		    display: none !important;
		  }
		}
		@media (min-width: 768px) and (max-width: 997px) {
		  .hidden-sm {
		    display: none !important;
		  }
		}
		@media (min-width: 998px) and (max-width: 1199px) {
		  .hidden-md {
		    display: none !important;
		  }
		}
		@media (min-width: 1200px) {
		  .hidden-lg {
		    display: none !important;
		  }
		}

	/*

	fonts + padding/margins
	===========================

	*/

		p {
			/*background-color: black;*/
			padding: 0px 89px 89px 89px;
			margin: 0;
			text-align: justify;
		}	
		@media (max-width: 997px) {
			p {
				padding: 0px 55px 55px 55px;
			}	
		}
		@media (max-width: 767px) {
			p {
				padding: 0px 34px 34px 34px;
				text-align: justify;
			}	
		}	
		.ss01 {
			font-feature-settings: "swsh";
		}
		.ss02 {
			font-feature-settings: "swsh" 2;
		}					
		h1 {
			/*background-color: pink;*/
			color: #009FEE;
			font-size: 55px;
			margin: 89px 89px 55px 89px;
			font-family: bookman-jf-pro, serif;
			font-weight: 400;
			font-style: italic;
		}
		@media (max-width: 997px) {
			h1 {
				font-size: 34px;
				margin: 55px 55px 55px 55px;
			}	
		}
		@media (max-width: 767px) {
			h1 {
				margin: 55px 34px 55px 34px;
			}	
		}						
		h2 {
			/*background-color: pink;*/
			color: #009FEE;
			font-size: 34px;
			margin: 55px 89px 55px 89px;
			font-family: helvetica;
			font-weight: 200;
			text-align: left;
		}
		@media (max-width: 997px) {
			h2 {
				margin: 55px 55px 55px 55px;
			}	
		}
		@media (max-width: 767px) {
			h2 {
				margin: 34px 34px 34px 34px;
			}	
		}			
		h3 {
			/*background-color: pink;*/
			color: #009FEE;
			font-size: 21px;
			margin: 0px 89px 0px 89px;
			font-family: helvetica;
			font-weight: 200;
		}
		@media (max-width: 997px) {
			h3 {
				margin: 0px 55px 0px 55px;
			}	
		}
		@media (max-width: 767px) {
			h3 {
				margin: 0px 34px 0px 34px;
			}	
		}				
		a {
			color: #AAAAAA;
			text-decoration: none;
			transition: .3s color;
			-webkit-transition: .3s color;
			-moz-transition: .3s color;
			-ms-transition: .3s color;
			-o-transition: .3s color;
			outline: none;
			border: none;			
		}
		a:hover {
			color: #6A6A6A;
			text-decoration: none;
		}
		form {
			/*background-color: black;*/
			padding: 34px 89px 89px 89px;
			margin: 0;
			text-align: justify;
		}	
		@media (max-width: 997px) {
			form {
				padding: 34px 55px 55px 55px;
			}	
		}
		@media (max-width: 767px) {
			form {
				padding: 21px 34px 34px 34px;
			}	
		}	

	/*

	columns
	===========================

	*/

		.col-100 {
			/*background-color: grey;*/
			display: inline-block;
			width: 100%;
			vertical-align: top;	
		}
		@media (max-width: 767px) {
			.col-100 {
				width: 100%;
			}	
		}			
		.col-80 {
			/*background-color: grey;*/
			display: inline-block;
			width: 80%;
			vertical-align: top;	
		}
		@media (max-width: 767px) {
			.col-80 {
				width: 100%;
			}	
		}				
		.col-60 {
			/*background-color: grey;*/
			display: inline-block;
			max-width: 960px;
			width: 60%;
			vertical-align: top;	
		}
		@media (max-width: 767px) {
			.col-60 {
				width: 100%;
			}	
		}					
		.col-50 {
			/*background-color: grey;*/
			display: inline-block;
			max-width: 960px;
			width: 50%;
			vertical-align: top;	
		}
		@media (max-width: 767px) {
			.col-50 {
				width: 100%;
			}	
		}	
		.col-40 {
			/*background-color: grey;*/
			display: inline-block;
			max-width: 960px;
			width: 40%;
			vertical-align: top;	
		}
		@media (max-width: 767px) {
			.col-40 {
				width: 100%;
			}	
		}			
		.col-33 {
			/*background-color: grey;*/
			display: inline-block;
			max-width: 960px;
			width: 33%;
			vertical-align: top;
			text-align: center;	
		}		
		@media (max-width: 997px) {
			.col-33 {
				width: 100%;
			}	
		}				

/*

HOME
===========================
===========================

*/

	/*

	billboard
	===========================

	*/

		.billboard {
			position: absolute;
			width: 233px;
			top: 40%;
			left: 50%;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
			-moz-transform: translate(-50%,-50%);
			-ms-transform: translate(-50%,-50%);		
			-o-transform: translate(-50%,-50%);				
		}
		@media (max-width: 1199px) {
			.billboard {
				top: 30%;
				width: 144px;
			}	
		}	
		.billboard-button {
			display: block;
			position: relative;
			width: 75%;
			color: rgba(256,256,256,.7);
			font-size: 13px;
			border: 1px solid rgba(256,256,256,.7);
			border-radius: 4px;
			margin: 0 auto;
			padding: 8px;
			text-align: center;
			transition: .3s border, .3s color, .3s background-color;	
		}
		.billboard-button:hover {
			color: rgba(256,256,256,1);
			border: 1px solid rgba(256,256,256,1);
		}

	/*

	design
	===========================

	*/
		.design-container {
			text-align: justify;
		}
		@media (max-width: 767px) {
			.design-container  {
				text-align: center;
			}
		}		
	
	/*

	connect
	===========================

	*/

		.social-menu {
			display: block;
			margin: 0 auto;
		}
		.social-icon-box {
			display: block;
			width: 233px;
			margin: 0 auto;
		}
		@media (max-width: 767px) {
			.social-icon-box  {
				width: 144px;
			}
		}		
		.social-icon {
			transition: .3s fill;
		}
		.social-icon-box:hover .social-icon {
			fill: #6A6A6A;
		}


/*

APPLICATION
===========================
===========================

*/

	.application-logo {
		position: absolute;
		width: 89px;
		top: 36px;
		left: 50%;
		transform: translate(-50%,0%);
		-webkit-transform: translate(-50%,0%);
		-moz-transform: translate(-50%,0%);
		-ms-transform: translate(-50%,0%);		
		-o-transform: translate(-50%,0%);				
	}


	/*

	form
	===========================

	*/
		.form-container {
			vertical-align: top;
			/*max-width: 767px;*/
			margin: 0 auto;
		}
		.form-label {
			display: inline-block;
			margin-top: 21px;
			border-radius: 0px;
			font-weight: normal;
		}
		.form-field {
			display: inline-block;
			width: 100%;
			background-color: transparent;
			margin-top: 21px;
			padding: 8px;
			border: 0;
			text-align: center;
			border-bottom: 1px solid #AAAAAA;
			border-radius: 0px;
			font-weight: 100;
			transition: .3s background-color;
			/*-webkit-autofill */
		}
		.form-field:focus {
			display: inline-block;
			width: 100%;
			outline: none;
			/*background-color: #ebebeb;*/
		}
		textarea {
			resize: none;
			width: 100%;
		}
		input:-webkit-autofill,
		input:-webkit-autofill:hover,
		input:-webkit-autofill:focus,
		input:-webkit-autofill:active {
		   -webkit-transition-delay: 9999s;
		   transition-delay: 9999s;
		}
		.submit-button {
			display: block;
			cursor: pointer;
			width: 100%;
			text-align: center;
			color: #AAAAAA;
			background-color: transparent;
			border: 1px solid #AAAAAA;
			border-radius: 5px;
			font-weight: 100;
			padding: 8px;
			margin: 8px 0px;
			outline: 0;
			vertical-align: bottom;
			transition: .3s border, .3s color;
		}
		@media (max-width: 767px) {
			.submit-button {
				width: 100%;
			}
		}		
		.submit-button:hover {
			border: 1px solid  #6A6A6A;
			color: #6A6A6A;
		}
		.submit-box {
			background-color: #fcff4f;
			margin: 0 auto;
			border-radius: 21px;
		}
		.form-thanks {
			height: 500px;
			text-align: center;
		}
		@media (max-width: 767px) {
			.form-thanks-block  {
				margin: 50px 0 200px 0;
			}
		}
		.recaptcha {
			/*background-color: pink;*/
			display: inline-block;
			margin: 0px auto;
			text-align: center;
		}
		.g-recaptcha {
			display: inline-block;
		}

/*

FOOTER
===========================
*/

	footer {
		background-color: #DCDCDC;
		display: block;
		width: 100%;
	}
	.footer-logo {
		display: block;
		position: relative;
		width: 89px;
		top: 50%;
		left: 50%;
		padding: 34px 0 0 0;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		-moz-transform: translate(-50%,0);
		-ms-transform: translate(-50%,0);		
		-o-transform: translate(-50%,0);				
	}
	.copyright {
		color: #FFFFFF;
		margin: 0 auto;
		padding: 0 0 34px 0;
		text-align: center;
		font-size: 8px;
	}