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

	TABLE OF CONTENTS
	---------------------------
	 1. Typography
	 	- font-family: ;
	 	- font-size: ;
	 		- Mobile & Tablet - font-size: ;
	 	- letter-spacing: ;
	 	- line-height: ;
	 	- text-align: ;
	 	- text-transform: ;
	 	- font-weight: ;
	 2. Colors
	 	- color: ;
	 	- background-color: ;
	 	- background: ;
	 	- border: ;
	 3. Loader
	 4. Overlay & Background Layer
	 5. Content	 	
	 6. Media Queries
	 	- Tablets
	 	- Mobiles

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

/******************************************************************
*******************************		1. TYPOGRAPHY
******************************************************************/

	/**************************************
		font-family: ;
	*************************************/
		@import url('https://fonts.googleapis.com/css?family=Open+Sans:400|Source+Sans+Pro:300|Montserrat:400,600,700');
		body,
		html
		{
			font-family: 'Open Sans', sans-serif; 
		}

		#front-title,
		#about-title,
		#message-title,
		.details-title
		{
			font-family: 'Montserrat', 'Open Sans', sans-serif;
		}

		#content-details-wrap
		{
			font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
		}

	/**************************************
		font-size: ;
	*************************************/

		.font-15
		{
			font-size: 15px;
		}

		.font-16
		{
			font-size: 16px;
		}

		.font-17
		{
			font-size: 17px;
		}

		.font-18
		{
			font-size: 18px;
		}

		.font-19
		{
			font-size: 19px;
		}

		.font-20
		{
			font-size: 20px;
		}

		.font-25
		{
			font-size: 25px;
		}

		.font-40
		{
			font-size: 40px;
		}

		.font-45
		{
			font-size: 45px;
		}

		.font-60
		{
			font-size: 60px;
		}

		.font-70
		{
			font-size: 70px;
		}

		.font-80
		{
			font-size: 80px;
		}


		/**************************************
			TABLET & MOBILE
		*************************************/
			@media only screen and (max-width : 991px) {

				.font-15
				{
					font-size: 12px;
				}

				.font-16
				{
					font-size: 13px;
				}

				.font-17
				{
					font-size: 16px;
				}

				.font-18
				{
					font-size: 17px;
				}

				.font-19
				{
					font-size: 18px;
				}

				.font-20
				{
					font-size: 19px;
				}

				.font-25
				{
					font-size: 20px;
				}

				.font-40
				{
					font-size: 30px;
				}

				.font-45
				{
					font-size: 32px;
				}

				.font-60
				{
					font-size: 38px;
				}

				.font-70
				{
					font-size: 45px;
				}

				.font-80
				{
					font-size: 55px;
				}
			}


		/**************************************
			MOBILE
		*************************************/
			@media only screen and (max-width : 600px) {

				.font-16
				{
					font-size: 9px;
				}
				
				.font-60
				{
					font-size: 34px;
				}
			}


	/**************************************
		letter-spacing: ;
	*************************************/

		.spacing-2
		{
			letter-spacing: 2px;
		}

		.spacing-1
		{
			letter-spacing: 1.3px;
		}
	
	/**************************************
		line-height: ;
	*************************************/

		.lineHeight-0
		{
			line-height: 1;
		}

		.lineHeight-1
		{
			line-height: 1.5;
		}

		.lineHeight-2
		{
			line-height: 1.8;
		}

	/**************************************
		text-align: ;
	*************************************/

		.text-left
		{
			text-align: left;
		}

		.text-right
		{
			text-align: right;
		}

		.text-center
		{
			text-align: center;
		}

	/**************************************
		text-transform: ;
	*************************************/

		.text-uppercase
		{
			text-transform: uppercase;
		}


	/**************************************
		font-weight: ;
	*************************************/

		.details-title
		{
			font-weight: 600;
		}

		.label
		{			
			font-weight: 100;
		}

/******************************************************************
*******************************		2. COLORS
******************************************************************/

	/**************************************
		color: ;
	*************************************/

	.text-color-a
	{
		color: rgba(29, 108, 226, 1);
	}

	.text-color-b
	{
		color: #3c5e91;
	}

	.text-color-1
	{
		color: #545862;
	}

	.text-color-2
	{
		color: #f0f0f0;
	}

	#subscribe-input-styles::placeholder
	{
		color: #f0f0f0;
	}

	.details-text a:hover
	{
		color: #545862;
	}

	#content-open a:hover
	{
		color: #f0f0f0;
	}


	/**************************************
		background-color: ;
	*************************************/
	
	#subscribe-button-styles,
	#content-open,
	.submit-btn
	{
		background-color: rgba(29, 108, 226, 1);
	}

	#loader-wrap
	{
		background: #222222;
	}

	#about-section
	{
		background-color: white;
	}

	#contact-section
	{
		background-color: #e6e6e6;
	}

 	#message-section
 	{
 		background-color: #dbdbdb;
 	}

	
	/**************************************
		border: ;
	*************************************/

	#subscribe-button-styles
	{
	    border: 1px solid rgba(244, 244, 244, 0.7);
	    border-left: none;    
	}

	#subscribe-input-styles
	{
	    border: 1px solid rgba(244, 244, 244, 0.7);
	    border-right: none;
	}

	#content-open
	{		
		border: 1px solid #FFF;
	}

	.submit-btn
	{
		border: 1px solid #111;
	}

/******************************************************************
*******************************		3. LOADING
******************************************************************/

	#loader-wrap
	{
		display: table;
		position: fixed;
		width: 100vw;
		height: 100vh;		
		z-index: 4;
		transition: all 1s;
	}

	#loader
	{
		display: table-cell;
		vertical-align: middle;
	}

	.loading {
		transition: all 1s;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		margin: 0 auto;
		border: 4px solid rgba(255, 255, 255, 0.3);
		border-top-color: white;
		-webkit-animation: spin 1s infinite linear;
		animation: spin 1s infinite linear;
	}

	@-webkit-keyframes spin {
	  	0% {
	    	-webkit-transform: rotate(0deg);
	            transform: rotate(0deg);
	  	}
	  	100% {
	    	-webkit-transform: rotate(360deg);
	            transform: rotate(360deg);
	  	}
	}
	@keyframes spin {
  		0% {
	    	-webkit-transform: rotate(0deg);
	            transform: rotate(0deg);
	  	}
	  	100% {
	    	-webkit-transform: rotate(360deg);
	            transform: rotate(360deg);
	  	}
	}

/******************************************************************
*******************************		4. OVERLAY & BACKGROUND LAYER
******************************************************************/

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

	#overlay
	{
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		background-color: rgba(12,12,12,0.0);
	}


/******************************************************************
*******************************		5. CONTENT
******************************************************************/

	body,html
	{
		color: #000;
		overflow-x: hidden; 
	}

	/*Back to top*/

	.toTop
	{
		color: white;
		opacity: 1;
		cursor: pointer;
		width: 70px;
		height: 50px;
		overflow: hidden;
		text-align: center;
		background-color: rgba(0,0,0,0.5);
		-webkit-border-radius: 90px;
		-khtml-border-radius: 90px;
		-moz-border-radius: 90px;
		-o-border-radius: 90px;
		border-radius: 90px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;	
		display: none;
		position: fixed;
		z-index: 3;
		right: 30px;
		bottom: 0px;
	}





/***************************************************
****************		Front Section
***************************************************/

	#align
	{
		display: table;
		position: fixed;
		height: 85vh;
	}

	#logo
	{
		margin: -100px 0px 0px 0px;
	}

	#logo img
	{
		width: 280px;
	}

	#front-section
	{		
		display: table-cell;
		vertical-align: middle;
	}

	#front-section p
	{
		padding: 0px 0px 20px 0px;
		font-weight: 600;
	}

	#counter
	{
		display: block;
	}

	.countdown-wrap
	{
		display: inline-block;
		margin: 0 auto; 
		padding: 0 20px;
	}
	
	
	
	
	/**************************************
		MOBILE
	*************************************/
	@media only screen and (max-width : 600px)
	{
		.countdown-wrap
		{
			margin: 0 auto; 
			padding: 0 8px;
		}
	}
	


	#content-open,
	.submit-btn
	{    
		display: block;
		width: 200px;
		height: 50px;
		cursor: pointer;
		margin: 0 auto;
		transition: all 0.5s;
	}

	#content-open a
	{	
		display: block;
		width: 100%;
		height: 100%;
		line-height: 45px;
		text-decoration: none;
	}



.intro-text h1
{
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 600;
	padding: 20px 0px 0px 0px;
	text-transform: uppercase;
}

.intro-text
{
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 21px;
	text-transform: none;
	padding: 10px 0px 20px 0px;
}

@media only screen and (max-width : 991px)
{
	.intro-text h1
	{
		font-size: 24px;
		font-weight: 700;
		padding: 40px 0px 0px 0px;
	}
}


@media only screen and (max-width : 600px)
{
	.intro-text h1
	{
		font-size: 20px;
		font-weight: 700;
		padding: 30px 0px 0px 0px;
	}
}

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

	#sections
	{
		z-index: 2;
		margin-top: 100vh; 
		padding: 0;
	}

	#about-title
	{
		margin-top: 30px;
	}

	.hr-line-first
	{
		margin: 5px 0 0;
		width: 70px;
		height: 0px;
		border: 3px solid rgba(29, 108, 226, 1);
		border-radius: 4px;
	}

	.hr-line-second
	{		
		margin: 5px 0 40px;
		width: 40px;
		height: 0px;
		border: 3px solid rgba(29, 108, 226, 1);
		border-radius: 4px;
	}

	#about-section
	{
		min-height: 100vh;
		padding: 0;
	}

	#about-section p
	{
		padding: 0 20px 20px 0;
	}

/*Gallery*/

	#gallery
	{
		padding-left: 0;
	}

	.my-gallery
	{
		padding: 0;
	}

	.my-gallery img 
	{
		min-width: 100%;
		height: auto;
		background-size: cover;
		background-position: center;
		transition: all .5s;
	}

	.img-figure:hover img
	{
		transform: scale(1.05,1.05);
		-webkit-transform:scale(1.05,1.05);
		-moz-transform:scale(1.05,1.05);
		-ms-transform:scale(1.05,1.05);
		-o-transform:scale(1.05,1.05);
	}

	.caption
	{
		width: 100%;
		height: 100%;
		top: 0;
		cursor: pointer;
		position: absolute;
		opacity: 0;
		-webkit-transition:all 0.45s ease-in-out;
		-moz-transition:all 0.45s ease-in-out;
		-o-transition:all 0.45s ease-in-out;
		-ms-transition:all 0.45s ease-in-out;
		transition:all 0.45s ease-in-out;
	}

	.img-figure:hover .caption
	{
		opacity: 1;
	}

	.cap-bg
	{
		background-color: rgba(0,0,0,0.65);
		height: 100%;
		width: 100%;
		z-index: 1;
		position: absolute;
	}

	.cap-text
	{
		z-index: 2;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 45%;
	}

	.my-gallery figure 
	{
		padding: 0; 
		overflow: hidden;
	}

	.my-gallery figcaption 
	{	
		display: none;
	}

	.pswp__bg
	{
		background-color: white;
	}

	.pswp__caption
	{		
		background-color: black;	
	}

/***************************************************
****************		Subscribe Section
***************************************************/
	
	#sub-section
	{
		height: auto;
		margin: 0 auto;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;    
		background-attachment: fixed;
		padding: 90px 0px;
		z-index: -1;
	}

	#sub-overlay
	{
		background-color: rgba(14,14,14,0.8);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
	}

	#sub-content
	{
		z-index: 2;		
		position: relative;
		margin: 0 auto;
		border: 2px solid rgba(88, 87, 87, 0.44);
		background: url('../img/pattern.png');
		background-color: rgba(0, 0, 0, 0.31);
		width: 50%;
		padding: 60px 0 80px;
	}

	.hr-line-third
	{
		width: 200px;
		height: 1px;
		background-color: rgba(150,150,150,0.4);
		border: 0;
		margin: 10px auto 30px;
	}

	.hr-line-fourth
	{
		width: 150px;
		height: 1px;
		background-color: rgba(150,150,150,1);
		border: 0;
		margin-right: 0;
	}

	input:focus,
	button:focus,
	input:required,
	input:invalid
	{
	    outline: none;	    
    	box-shadow: none;
	}

	#subscribe-button-styles
	{
	    padding: 14px 25px;
	}

	#subscribe-input-styles
	{
		background-color: rgba(175, 175, 175, 0.1);
		width: 300px;
		padding: 14px 15px;
		margin-right: -10px;
	}

/***************************************************
****************		Contact Section
***************************************************/

	#contact-section
	{
		padding: 0;
	}

	#map
	{
		padding: 0;
		height: 600px;
		overflow: hidden;
	}

	#contact-text-area
	{
		padding: 0;
	}

	.details-title
	{
		margin: 10px 0;
	}

	.details-text
	{
		padding-bottom: 20px;		
	}

	#content-details-wrap
	{
		display: table;
		height: 600px;
		padding-right: 25px;
	}

	#details-align
	{
		display: table-cell;
		vertical-align: middle;
	}

/***************************************************
****************		Message Section
***************************************************/

 	#message-section
 	{
 		padding: 60px 0;

 	}

 	#message-title
 	{
 		margin: 30px 0 10px;
 	}

/********* Form Styles ********/

	.contact-form
	{
		padding: 30px 0 20px;
	}

	.form-field
	{
		position: relative;
		margin: 15px 0;
	}

	.input-text,
	.input-textarea
	{
		display: block;
		width: 100%;
		height: 36px;
		border: 1px solid #788b8c;
		border-top: none;
		border-left: none;
		border-right: none;
		background: transparent;
		font-size: 16px;
		line-height: 26px;
	}

	.input-text:focus,
	.input-textarea:focus,
	.input-text:invalid,
	.input-textarea:invalid,
	.input-text:required,
	.input-textarea:required
	{
		outline: none;
    	box-shadow: none;
	}

	.input-text:focus + .label,
	.input-textarea:focus + .label,
	.input-text.not-empty + .label,
	.input-textarea.not-empty + .label
	{
		opacity: 0;
	}

	.input-textarea
	{
		resize: none;
		height: 150px;
	}

	.label
	{
		position: absolute;
		left: 5px;
		bottom: -2px;
		background: transparent;
		font-size: 18px;
		line-height: 26px;
		cursor: text;
		transition: all .1s ease-in-out;
	}

	.textarea-label
	{
		top: -3px;
	}

	.submit-btn
	{
		display: inline-block;
		cursor: pointer;
		transition: all 0.5s;
	}

	#name,
	#email,
	#message
	{
		transition: all 0.5s;
	}

/*Form Styles END*/


		/**************************************
			TABLET & MOBILE
		*************************************/
			@media only screen and (max-width : 991px) {

				#front-title
				{
					line-height: 1.5;
					margin: 0 auto;
				}

				#logo
				{
					margin: -120px 0px 5px 0px;
				}

				#logo img
				{
					width: 220px;
				}

				#align
				{
					position: relative;
				}

				#front-section p
				{
					padding: 0px 0;
				}

				#content-open
				{
					margin-bottom: 20px;
				}

				#sections
				{
					margin-top: 0;
				}

				#about-title
				{
					padding: 40px 0 20px;
				}

				#gallery
				{
					padding: 0;
				}

				#sub-section
				{
					padding: 70px 0;
				}

				#sub-content
				{
					width: 100%;
					padding: 50px 0 50px;
				}

				#sub-content form
				{
					padding: 0 10px;
				}

				#subscribe-input-styles
				{
					width: 90%;
					margin: 0 auto;
					border: 1px solid rgba(244, 244, 244, 0.7);
				}

				#subscribe-button-styles
				{
					border: 1px solid rgba(244, 244, 244, 0.7);
					margin-top: 25px;
				}

				#content-details-wrap
				{
					padding: 20px 0;
					text-align: center;
					height: 600px;
				}

				.hr-line-fourth
				{
					margin: 10px auto;
				}

				#message-p
				{
					padding: 0 10px;
				}

			}


	@media only screen and (max-width : 600px)
	{
		#logo
		{
			margin: -120px 0px 5px 0px;
		}

		#logo img
		{
			width: 200px;
		}
	}


#social-media
{
	display: inline-block;
	margin: 0px auto 0px auto; 
}

#social-media .social-media-text
{
	display: inline-block;
	overflow: hidden;
	padding: 20px 15% 20px 15%;
}

#social-media .social-media-text p
{
	text-transform: none;
	padding: 0px 0px 0px 0px;
}



#social-media .social-media-icons
{
	display: inline-block;
	overflow: hidden;
}

#social-media .social-media-icons ul
{
	padding: 0px;
	margin: 0px;
}

#social-media .social-media-icons li
{
	border: none;
	float: left;
	display: block; 
}

#social-media .social-media-icons i
{
	text-align: center;
	font-size: 34px;
	line-height: 34px;
	height: 34px;
	width: 34px;
	background-color: none;
	color: #fff;
	margin: 0px 10px 0px 0px;
	-moz-border-radius: 50%;
	border-radius: 50%;
  -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#social-media .social-media-icons i:hover
{
	color: #fff;
	cursor: pointer;
}