/*****************************************

	TABLE OF CONTENTS
	---------------------------
	 1. Defaults
	 2. Typography
		- font-family: ;
	 3. Colors
		- color: ;
		- background-color: ;
		- outline: ;
		- border: ;
	 4. Loader
	 5. Overlay & Background
	 6. Content
		- Welcome Section
		- Main Content
			- Contact Section
			- About Section
			- Divider
	 7. Media Queries
		- Tablets
		- Mobiles

*****************************************/

/******************************************************************
*******************************     1. DEFAULTS
******************************************************************/

	*, *:before, *:after {
		margin: 0px; 
		padding: 0px; 
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	body, html {
		font-family: Arial, sans-serif;
		font-size: 15px;
		color: #666666;
		overflow-x: hidden;
		height: 100%;
		background-color: #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	a:focus {outline: none;}
	a:hover {text-decoration: none;}

	h1,h2,h3,h4,h5,h6,p {margin: 0px;}

	ul, li {
		margin: 0px;
		list-style-type: none;
	}

	input, textarea, label {
		display: block;
		outline: none;
		border: none;
	}

	button {
		outline: none;
		border: none;
		background: transparent;
		cursor: pointer;
	}
	button:focus {outline: none;}

	iframe {border: none;}

/******************************************************************
*******************************     2. TYPOGRAPHY
******************************************************************/
	
	/**************************************
		font-family: ;
	*************************************/

		@font-face {
			font-family: Poppins-Regular;
			src: url('../fonts/Poppins/Poppins-Regular.ttf'); 
		}

		@font-face {
			font-family: Poppins-Bold;
			src: url('../fonts/Poppins/Poppins-Bold.ttf'); 
		}

		@font-face {
			font-family: Poppins-Thin;
			src: url('../fonts/Poppins/Poppins-Thin.ttf'); 
		}

		@font-face {
			font-family: Poppins-Black;
			src: url('../fonts/Poppins/Poppins-Black.ttf'); 
		}

		@font-face {
			font-family: Poppins-Medium;
			src: url('../fonts/Poppins/Poppins-Medium.ttf'); 
		}

		@font-face {
			font-family: PlayfairDisplay-Italic;
			src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf'); 
		}

		@font-face {
			font-family: PlayfairDisplay-BlackItalic;
			src: url('../fonts/PlayfairDisplay/PlayfairDisplay-BlackItalic.ttf'); 
		}

		@font-face {
			font-family: PlayfairDisplay-Bold;
			src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf'); 
		}

		.coming-soon-wrapper h3 {
			font-family: PlayfairDisplay-BlackItalic;
		}

		.coming-soon-wrapper p {
			font-family: Poppins-Regular;
		}

		.subscribe-wrapper input {
			font-family: Poppins-Medium;
		}

		.number {
			font-family: PlayfairDisplay-Bold;
		}

		.string {
			font-family: PlayfairDisplay-Italic;
		}

/******************************************************************
*******************************     3. COLORS
******************************************************************/

	/**************************************
		color: ;
	*************************************/
		
		.subscribe-wrapper button i,
		.number,
		.string,
		.si-link,
		#stay-in-touch ,
		#about,
		.close-content:hover,
		.open-content:hover,
		.coming-soon-wrapper h3,
		.subscribe-wrapper button,
		.subscribe-wrapper input {
			color: #fff;
		}

		.close-content, .open-content {
			color: #105e53;
		}

		.open-content {
			color: #000;
		}

		.coming-soon-wrapper p {
			color: #cccccc;
		}

		.si-link:hover {
			color: rgba(255,255,255,0.2);
		}

	/**************************************
		background-color: ;
	*************************************/

		.divider .circle-small,
		.divider .line,
		.close-content,
		.open-content {
			background-color: #FFF;
		}

		.background-effect {
			background-color: #000;
		}

		.close-content:hover,
		.open-content:hover,
		#stay-in-touch li {
			background-color: transparent;
		}

		.subscribe-wrapper {
			background-color: rgba(255,255,255, 0.1);
		}

		.subscribe-wrapper input {
			background-color: rgba(255,255,255, 0.0);
		}

		.subscribe-wrapper button:hover {
			background-color: rgba(255,255,255,0.12);
		}

		#main-content {
			background-color: rgba(16, 97, 86, 0.96);
		}

	/**************************************
		outline: ;
	*************************************/
		
		#main-content {
			outline: 2px solid #CCC;
		}

	/**************************************
		border: ;
	*************************************/
		
		#stay-in-touch hr,
		#about hr {
			border-top: 1px solid #FFF;
		}

		.divider .circle-large {
			border: 2px solid #fff;
		}

/******************************************************************
*******************************     4. LOADER
******************************************************************/
	
	#loader-container {
		z-index: 11111;
		position: absolute;
		width: 100vw;
		height: 100vh;
		background-color: #FFF
	}

	.loader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
	}

	@-webkit-keyframes ball-triangle-path-1 {
	  33% {
	    -webkit-transform: translate(25px, -50px);
	            transform: translate(25px, -50px); }
	  66% {
	    -webkit-transform: translate(50px, 0px);
	            transform: translate(50px, 0px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	@keyframes ball-triangle-path-1 {
	  33% {
	    -webkit-transform: translate(25px, -50px);
	            transform: translate(25px, -50px); }
	  66% {
	    -webkit-transform: translate(50px, 0px);
	            transform: translate(50px, 0px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	@-webkit-keyframes ball-triangle-path-2 {
	  33% {
	    -webkit-transform: translate(25px, 50px);
	            transform: translate(25px, 50px); }
	  66% {
	    -webkit-transform: translate(-25px, 50px);
	            transform: translate(-25px, 50px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	@keyframes ball-triangle-path-2 {
	  33% {
	    -webkit-transform: translate(25px, 50px);
	            transform: translate(25px, 50px); }
	  66% {
	    -webkit-transform: translate(-25px, 50px);
	            transform: translate(-25px, 50px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	@-webkit-keyframes ball-triangle-path-3 {
	  33% {
	    -webkit-transform: translate(-50px, 0px);
	            transform: translate(-50px, 0px); }
	  66% {
	    -webkit-transform: translate(-25px, -50px);
	            transform: translate(-25px, -50px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	@keyframes ball-triangle-path-3 {
	  33% {
	    -webkit-transform: translate(-50px, 0px);
	            transform: translate(-50px, 0px); }
	  66% {
	    -webkit-transform: translate(-25px, -50px);
	            transform: translate(-25px, -50px); }
	  100% {
	    -webkit-transform: translate(0px, 0px);
	            transform: translate(0px, 0px); } }

	.ball-triangle-path {
		position: relative;
		-webkit-transform: translate(-29.994px, -37.50938px);
		transform: translate(-29.994px, -37.50938px); }
	.ball-triangle-path > div:nth-child(1) {
		-webkit-animation-name: ball-triangle-path-1;
		animation-name: ball-triangle-path-1;
		-webkit-animation-delay: 0;
		animation-delay: 0;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite; }
	.ball-triangle-path > div:nth-child(2) {
		-webkit-animation-name: ball-triangle-path-2;
		animation-name: ball-triangle-path-2;
		-webkit-animation-delay: 0;
		animation-delay: 0;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite; }
	.ball-triangle-path > div:nth-child(3) {
		-webkit-animation-name: ball-triangle-path-3;
		animation-name: ball-triangle-path-3;
		-webkit-animation-delay: 0;
		animation-delay: 0;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite; 
	}
  	.ball-triangle-path > div {
	    -webkit-animation-fill-mode: both;
	            animation-fill-mode: both;
	    position: absolute;
	    width: 10px;
	    height: 10px;
	    border-radius: 100%;
	    border: 1px solid #7d7d80; 
	}
    .ball-triangle-path > div:nth-of-type(1) {
    	top: 50px; 
  	}
    .ball-triangle-path > div:nth-of-type(2) {
     	left: 25px; 
     }
    .ball-triangle-path > div:nth-of-type(3) {
    	top: 50px;
    	left: 50px; 
    }

/******************************************************************
*******************************     5. OVERLAY & BACKGROUND
******************************************************************/

	#background-effect {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat; 
	}

	.overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../images/pattern.png);
		opacity: 0.5;
		z-index: 0; 
	}

/******************************************************************
*******************************     6. CONTENT
******************************************************************/

	/**************************************
		Welcome Section
	*************************************/
		
		#welcome {
			position: relative;
			z-index: 1;
			width: 100%;
			min-height: 100vh;
		}

		.logo-info {
			width: 100%;
			justify-content: space-between;
			-ms-align-items: center;
			align-items: center;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			padding-right: 65px;
			padding-left: 65px;
			padding-top: 65px;
		}

		.logo {
			display: block;
			flex-grow: 1;
		}

		.info {
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			position: absolute;
			right: 65px;
			top: 65px;
		}

		.coming-soon-content {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
			height: 300px;
		}

		.coming-soon-wrapper {
			position: absolute;
			top: 0;
			left: 19%;
			max-width: 600px;
		}

		.coming-soon-wrapper h3 {
			font-size: 90px;
			line-height: 1.1;
		}

		.coming-soon-wrapper p {
			font-size: 24px;
			line-height: 1.2;
			padding-bottom: 30px;
			padding-top: 30px;
		}

		.coming-soon-form {
			width: 100%;
		}

		.subscribe-wrapper {
			position: relative;
			width: 500px;
			max-width: 100%;
			position: relative;
			height: 60px;
			padding-right: 80px;
		}

		.subscribe-wrapper input {
			font-size: 15px;
			line-height: 1.2;
			display: block;
			width: 100%;
			height: 100%;
			padding: 0 15px 0 25px;
			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;
		}

		.subscribe-wrapper button {
			width: 80px;
			height: 100%;
			font-size: 14px;
			line-height: 1;
			position: absolute;
			right: 0px;
			top: 0px;
			justify-content: center;
			-ms-align-items: center;
			align-items: center;
			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;
		}

		.subscribe-wrapper button i {
			font-weight: 900;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
		}

		.subscribe-response {
			padding: 10px;
		}

		.counter-wrapper {
			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			-o-flex-direction: column;
			flex-direction: column;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			bottom: 65px;
			right: 65px;
			text-align: center;
			position: absolute;
		}

		.counter-box {
			width: 90px;
			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			-o-flex-direction: column;
			flex-direction: column;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			margin-bottom: 20px;
		}

		.number {
			font-size: 40px;
			line-height: 1;
			padding-bottom: 10px;
		}

		.string {
			font-size: 14px;
			line-height: 1;
		}

		.social-icons-wrapper {
			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			-o-flex-direction: column;
			flex-direction: column;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			bottom: 65px;
			left: 65px;
			position: absolute;
		}

		.si-link {
			font-size: 28px;
			background-color: transparent;
			width: 36px;
			height: 36px;
			justify-content: center;
			-ms-align-items: center;
			align-items: center;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-transition: all 0.4s;
			-o-transition: all 0.4s;
			-moz-transition: all 0.4s;
			transition: all 0.4s;
			margin-right: 3px;
			margin-left: 3px;
			margin-bottom: 5px;
		}

		.si-icon {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
		}

	/**************************************
		Main Content
	*************************************/

		#main-content {
			position: absolute;
			width: 100vw;
			height: 100vh;
			top: 0;
			z-index: 1;
			outline-offset: -20px; 
		}

		#main-content .section-container {
			height: 100vh;
			display: table;
		}

		#stay-in-touch hr,
		#about hr {
			width: 100px;
		}

		.close-content, .open-content {
			right: 65px;
			top: 65px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			font-size: 30px;
			padding-top: 10px;
			padding-left: 14px;
			border: 1px solid #FFF;
			cursor: pointer;
			z-index: 11;
			transition: 0.5s;
		}

		.close-content {
			position: absolute;
		}

		.open-content {
			padding-top: 10px;
			padding-left: 19px;
		}

		/**************************************
			Contact Section
		*************************************/
			
			#stay-in-touch {
				display: table-cell;
				padding: 20px;
				vertical-align: middle;
			}

			#stay-in-touch p {
				padding-top: 20px;
				padding-bottom: 20px;
			}

			#stay-in-touch li {
				background-color: transparent;
				border: none;
				padding-left: 0px;
			}

			#stay-in-touch li i {
				padding-right: 10px;
				width: 30px;
			}

		/**************************************
			About Section
		*************************************/

			#about {
				display: table-cell;
				vertical-align: middle;	
				padding: 20px;
			}

			#about p {
				padding-top: 20px;
				text-align: justify;
			}

			#about h5 {
				font-size: 16px;
				font-weight: 500;
				padding-top: 20px;
			}

			#about .social-icons {
				position: relative;
				text-align: right;
				margin-top: 50px;
			}

			#about .social-icons i {
				padding: 10px;
				font-size: 20px;
			}

		/**************************************
			Divider
		*************************************/
			
			.divider {
				position: absolute;
				left: calc(50% - 10px);
				top: calc(50% - 283px);
			}

			.divider .circle-small {
				background-color: #FFF;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-left: 5px;
			}

			.divider .circle-large {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				margin-top: 5px;
				margin-bottom: 5px;
			}

			.divider .line {
				height: 250px;
				width: 2px;
				margin: 9px;
			}


		#main-content, #about, #stay-in-touch, .line, .circle-small, .circle-large {
			display: none;
		}
		.close-content {
			display: none !important;
		}

/******************************************************************
*******************************     7. MEDIA QUERIES
******************************************************************/

	@media (max-width: 1024px) {

		.coming-soon-content {
			position: relative;
    		transform: none;
			padding-left: 15px;
			padding-right: 15px;
		}

		.coming-soon-wrapper {
			position: relative;
			left: unset;
			top: unset;
			max-width: 100%;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-wrap: wrap;
		}

		.counter-wrapper {
			flex-direction: row;
			justify-content: center;
			right: 0px;
			bottom: 0px;
			position: relative;
		}

		.counter-box {
			align-items: center;
			margin-right: 15px;
			margin-left: 15px;
		}

		.social-icons-wrapper {
			padding: 0px;
			flex-direction: row;
			justify-content: center;
			left: 0;
			right: 0;
		}

		.coming-soon-wrapper h3,
		.coming-soon-wrapper p {
			text-align: center;
		}

		.subscribe-wrapper {
			padding-right: 0px; 
    		margin: 0 auto;	
    	}

	}

	@media (max-width: 768px) {

		#main-content {
			overflow-y: scroll;
		}
		.divider {
			display: none;
		}

		.coming-soon-wrapper h3 {
			font-size: 65px;
		}

	}

	@media (max-width: 576px) {

		.logo-info {
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 15px;
		}

		.info {
			top: 15px;
			right: 15px;
		}

		.close-content {
			right: 35px;
			top: 35px;
		}

		.social-icons-wrapper {
			bottom: 20px;
		}

		.coming-soon-wrapper p {
			font-size: 20px;
		}

	}