/*
---------------------------------------------------
TABLES OF CONTENTS
---------------------------------------------------
*/

/*

	01. GENERAL STYLES
	02. COLORS
	03. CONTENT
	04. NAVBAR COLLAPSE BUTTON
	05. NAVBAR
	06. OPENING TEXT
	07. TEXT ROTATOR
	08. BIG LOGO IMAGE
	09. TIMER
	10. MODALS
	11. ABOUT MODAL
	12. SERVICES MODAL
	13. WORK MODAL
	14. CONTACT MODAL
	15. SERVICES MODAL
	16. SOCIAL LINKS
	17. FOOTER
	18. PLUGINS
	19. MODERNIZR CLASSES

*/

/*
---------------------------------------------------
GENERAL STYLES
---------------------------------------------------
*/

body, html {
	width: 100%;
	height: 100%;
}

body {
	font-size: 13px;
	color: #fff;
	line-height: 1.8em;
}

a {
	outline: 0 !important;
	color: #fff;
	text-decoration: none;
}

::selection {
	background: rgba(255, 255, 255, .4); /* Safari */
	}
::-moz-selection {
	background: rgba(255, 255, 255, .4); /* Firefox */
}

#page_wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: table;
}

	.content_centerlizer {
		display: table-row;
		width: 100%;
		height: 100%;
	}

	.inner_content {
		display: table-cell;
		vertical-align: middle;
	}

.nomargin {
	margin: 0 !important; 
}


/*section title*/

.section_header {
	text-align: center;
	margin-bottom: 50px;
}

	.section_header.fancy_title h1 {
		position: relative;
		font-family: 'Abel', sans-serif;
		margin-bottom: 30px;
		text-transform: capitalize;
		color: #fff;
	}

	.section_header.fancy_title h1:after {
		position: absolute;
		content: '';
		display: block;
		width: 100px;
		bottom: -10px;
		left: 50%;
		margin-left: -50px;
		height: 1px;
		background-color: rgba(255, 255, 255, .3);
	}

/*
---------------------------------------------------
COLORS
---------------------------------------------------
*/

.magneta { background-color: #D03E8D }

.purple  { background-color: #A200FF }

.teal 	 { background-color: #00ABA9 }

.lime    { background-color: #8CBF26 }

.brown   { background-color: #A05000 }

.pink    { background-color: #E671B8 }

.orange  { background-color: #F09609 }

.blue    { background-color: #1BA1E2 }

.red     { background-color: #E51400 }

.green   { background-color: #339933 }


/*
---------------------------------------------------
CONTENT
---------------------------------------------------
*/

.content {
	background-color: rgba(0, 0, 0, 0.4);
	height: 200px;
}

	.content > div {
		height: inherit;
	}

	/* content responsivity */

	@media screen and (max-width: 992px) {
		.content {
			background-color: rgba(0, 0, 0, 0.4);
			height: 300px;
		}
	}


/*
---------------------------------------------------
NAVBAR COLLAPSE BUTTON
---------------------------------------------------
*/


.navbar_collapse {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
}

.navbar_collapse.active {
	left: 76px;
}

	.navbar_collapse button {
		width: 48px;
		height: 48px;
		outline: 0;
		background-color: transparent;
		border: 2px solid #fff;
		border-radius: 100em;
		text-align: center;
		color: #fff;
		font-size: 14px;
		margin: 20px 0 0 20px;
		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
	}

/*
---------------------------------------------------
NAVBAR
---------------------------------------------------
*/

.navbar_container {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0);
	z-index: 10;
	visibility: hidden;
	overflow: hidden;

}

.navbar_container.active {
	visibility: visible;
	background-color: rgba(0, 0, 0, .5);
}

	.navbar_menu {
		position: relative;
		left: 0;
		top: 0;
		width: 76px;
		left: -76px;
		height: 100%;
		overflow-y: auto;
	}

		/* small logo */

		.mobile_logo img {
			width: 44px;
			height: 23px;
			margin: 30px auto 30px auto;
			display: block;
		}

	.navbar_menu, .navbar_collapse, .navbar_container {
		transition: all 0.2s linear;
	}

	.navbar_container.active .navbar_menu {
		left: 0;
	}

		.navbar_menu nav {
			margin-top: 30px;
		}

		.navbar_menu nav a {
			display: block;
			width: 76px;
			height: 76px;
			text-align: center;
			line-height: 76px;
			font-size: 22px;
			color: rgba(255, 255, 255, .8);
		}


/*
---------------------------------------------------
OPENING TEXT
---------------------------------------------------
*/

.opening_text {
	text-align: center;
	padding-bottom: 50px;
	padding-top: 50px;
	
}

	.opening_text h1 {
		font-family: 'Abel', sans-serif;
		font-size: 48px;
		text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
		             0px 8px 13px rgba(0,0,0,0.1),
		             0px 18px 23px rgba(0,0,0,0.1);
	}

	

	/* opening text responsivity */

	@media screen and (max-width: 640px) {
		.opening_text {
			padding-top: 80px;
		}

			.opening_text h1 {
				font-size: 32px !important;
			}
	}

	@media screen and (max-width: 320px) {

		.opening_text h1 {
			font-size: 22px !important;

		}

	}


/*
---------------------------------------------------
TEXT ROTATOR
---------------------------------------------------
*/

.text_rotator {
	text-align: center;
	padding: 0 10px 50px 10px;
}

	.text_rotator ul {
		display: inline-block;
		width: auto;
		min-width: 200px;
		padding: 10px 40px;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 100em;
		overflow: hidden;
	}

		.text_rotator ul li {
			text-transform: capitalize;
			font-size: 14px;
			color: rgba(255, 255, 255, .9);
		}

		.text_rotator ul li:not(.active) {
			display: none;
		}

/*
---------------------------------------------------
BIG LOGO IMAGE
---------------------------------------------------
*/

.logo {
	background-color: #fff;
	width: 250px;
	height: 100%;
	position: relative;
	animation-duration: 1s;
	animation-delay: 1s;
}

	.logo img {
		width: 167px;
		height: 102px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -51px 0 0 -83px;
	}

	/* big logo image resposivity */

	@media screen and (max-width: 640px) {

		.logo {
			display: none;
		}

	}

/*
---------------------------------------------------
CAREERS IMAGE
---------------------------------------------------
*/

.careers_img {
	position: fixed;
	margin-top: 10px;
	margin-bottom: 0px;
	position: relative;

}

	.careers_img img {
		width: 393px;
		height: 186px;
		position: relative;
		top: 50%;
		left: 50%;
		margin: -10px 0 0 -200px;
	}

	/*  image responsivity */

	@media screen and (max-width: 640px) {

		.careers_img {
			display: none;
		}

	}	
	
	
	
/*
---------------------------------------------------
TIMER
---------------------------------------------------
*/

.right_container {
	overflow: hidden;
	opacity: .8;
}


.timer_container {
	animation-duration: 1s;
	animation-delay: 2s;
}

	.date_block_box {
		width: 25%;
		height: 200px;
		float: left;
		text-align: center;
	}

		.timer_number {
			line-height: 180px;
			font-size: 48px;
			font-family: 'Abel', sans-serif;
		}

		.descp {
			margin-top: -50px;
			width: 80px;
			margin-left: auto;
			margin-right: auto;
			padding: 5px;
			border-radius: 50px;
			background-color: rgba(0, 0, 0, .2);
		}


	/* timer section resposivity */

	@media screen and (max-width: 992px) {
		.date_block_box {
			width: 50%;
			height: 150px;
		}

			.timer_number {
				line-height: 130px;
				font-size: 40px;
			}

			.descp {
				margin-top: -30px;
			}
	}

	@media screen and (max-width: 320px) {

			.timer_number {
				line-height: 130px;
				font-size: 32px;
			}
	}


/*
---------------------------------------------------
MODALS
---------------------------------------------------
*/
.modal_box {
	position: fixed;
	color: rgba(255,255,255,.8);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 30;
	overflow: auto;
	opacity: 0;
	transform: scale(0.5);
	opacity: 0;
	transition: 500ms;
	display: block !important;
	visibility: hidden;
}



.modal_box.shown {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}


	.modal_box .close_btn_box button[data-dismiss="modal"] {
		background-color: rgba(0, 0, 0, .1);
		width: 40px;
		height: 40px;
		position: absolute;
		top: 20px;
		right: 20px;
		color: rgba(255, 255, 255, 0.5);
		outline: 0;
		border: 0;
		border-radius: 100em;
		transition: 300ms;
		z-index: 999999;
	}

	.modal_box .close_btn_box button[data-dismiss="modal"]:hover {
		background-color: rgba(0, 0, 0, 0.2);
		color: rgba(255, 255, 255, 0.8);
	}



/*
---------------------------------------------------
ABOUT MODAL
---------------------------------------------------
*/


/* title */

.section_header {
	margin-top: 80px;
}

	.section_header p {
		padding: 0 15%;
		margin-top: 50px;
		margin-bottom: 50px;
	}

/* features */

.feature {
	padding-left: 80px;
}

	.left_part {
		position: absolute;
		left: 0;
		top: 0;
		width: 60px;
		height: 60px;
		border-radius: 100em;
		background-color: rgba(0,0,0,0.15);
		line-height: 60px;
		text-align: center;
		font-size: 24px;
	}

	.right_part h4 {
		text-transform: capitalize;
		margin-bottom: 15px;
		margin-top: 0;
		color: rgba(255, 255, 255, .9);
	}

	/* features responsivity */

	@media screen and (max-width: 992px) {
		.feature + .feature {
			margin-top: 30px;
		}
	}

/* skills section */

.skills_section {
	margin-top: 50px;
}

	.progress_bars * {
		background-image: none;
		box-shadow: none;
	}

		.progress {
			background-color: rgba(0, 0, 0, .15);
			border-radius: 3px;
			height: 30px;
			margin-bottom: 30px;
		} 

			.progress-bar {
				background-color: rgba(255, 255, 255, .6);
				padding-right: 15px;
				color: rgba(0, 0, 0, .5);
				font-size: 12px;
				font-weight: bold;
				line-height: 30px;
				text-align: right;
			}

				.progress-bar span {
					padding-left: 10px;
				}




/*
---------------------------------------------------
CONTACT MODAL
---------------------------------------------------
*/

/* google maps */

.google_maps {
	position: relative;
	margin-bottom: 50px;
}

	
	/* make div height relative to its width */

	.google_maps .adjuster {
		width: 100%;
		padding-top: 30%;
	}

	.google_maps .map {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}


	/* google maps responsivity */

	@media screen and (max-width: 480px) {

		.google_maps .adjuster {
			padding-top: 60%;
		}
	}


	
/*contact form*/

#contact_form {
	margin-bottom: 30px;
}

.input-group {
	width: 100%;
	position: relative;
}

.input-group {
	margin-bottom: 15px;
}

	.input-group input {
		height: 46px;
		font-size: 13px;
		background-color: transparent;
		color: #fff;
		outline: 0;
		border: 3px solid rgba(255, 255, 255, .2);
		box-shadow: none;
		transition: 500ms;
		border-radius: 4px !important;
	}

	.input-group input:focus, #message:focus {
		border-color: rgba(255, 255, 255, .4);
	}	


		.input-group-addon {
			background-color: transparent;
			color: rgba(255, 255, 255, .6);
			width: 50px;
			transition: 500ms;
			position: absolute;
			height: 46px;
			line-height: 46px;
			right: 0;
			top: 0;
			border: 0;
			padding: 0;
		}


	#message {
		width: 100%;
		height: 229px;
		font-size: 13px;
		background-color: transparent;
		color: #fff;
		outline: 0;
		border: 3px solid rgba(255, 255, 255, .2);
		box-shadow: none;
		transition: 500ms;
		border-radius: 4px;
		resize: none;
		padding: 12px;
	}

	.message_container {
		position: relative;
	}

		.message_container button {
			background-color: rgba(0, 0, 0, .1);
			width: 40px;
			height: 40px;
			position: absolute;
			color: rgba(255, 255, 255, 0.5);
			outline: 0;
			border: 0;
			border-radius: 100em;
			transition: 300ms;
			bottom: 27px;
			right: 30px;
		}

		.message_container button:hover {		
			background-color: rgba(0, 0, 0, 0.2);
			color: rgba(255, 255, 255, 0.8);
		}



	.input-group .form-control {
		box-shadow: none;
	}

	
#contact_form ul.parsley-error-list {
		list-style: none;
		padding: 0;
		margin-top: 5px;
		margin-bottom: 0px;
		color: red;
		opacity: .55;
	}


	/* placeholders colors */

	#contact_form ::-webkit-input-placeholder {
	   color: rgba(255, 255, 255, .4);
	}

	#contact_form :-moz-placeholder { /* Firefox 18- */
	   color: rgba(255, 255, 255, .4);  
	}

	#contact_form ::-moz-placeholder {  /* Firefox 19+ */
	   color: rgba(255, 255, 255, .4);  
	}

	#contact_form :-ms-input-placeholder {  
	   color: rgba(255, 255, 255, .4);  
	}


/*
---------------------------------------------------
SERVICES MODAL
---------------------------------------------------
*/


#newsletter_modal {
	background-color: rgba(0, 0, 0, .5);	
}

	.newsletter_box {
		padding: 30px;
		position: fixed;
		width: 700px;
		height: 365px;
		left: 50%;
		top: 50%;
		margin: -182px 0 0 -350px;
		box-shadow: 0px 5px 40px rgba(0, 0, 0, .6);
	}


	/* newsletter responsivity */

	@media screen and (max-width: 700px) {
		.newsletter_box {
			width: 100%;
			left: 0;
			top: 0;
			margin: 0;
			display: table;
			height: 100%;
			padding: 0;
		}

			.newsletter_box_inner {
				display: table-cell;
				vertical-align: middle;
				padding: 30px;
			}
	}

			.newsletter_box .section_header {
				margin-top: 0;
			}

				.newsletter_box .section_header h1 {
					color: rgba(255, 255, 255, .9);
				}

				.newsletter_box .section_header p {
					padding: 0;
					color: rgba(255, 255, 255, .7);
				}

					#subscribe_form .form_btns button,
					#subscribe_form .form_btns input {
						padding: 0px 20px;
						height: 40px;
						outline: 0;
						border: 0;
						border-radius: 2px;
						transition: 300ms;
					}

					#subscribe_form .form_btns button {
						background-color: rgba(0, 0, 0, .1);
						color: rgba(255, 255, 255, .5);
						margin-right: 10px;
					}

					#subscribe_form .form_btns button:hover {
						background-color: rgba(0, 0, 0, .3);
					}

					#subscribe_form .form_btns input {
						background-color: rgba(255, 255, 255, .3);
						color: rgba(0, 0, 0, .7);
					}

					#subscribe_form .form_btns input:hover {
						background-color: rgba(255, 255, 255, .5);
					}

/* errors list styles */

#subscribe_form ul.parsley-error-list {
		list-style: none;
		padding: 0;
		margin-top: 5px;
		margin-bottom: 0px;
		color: #fff;
		opacity: 0.4;
	}


/* newsletter placeholder color */

#newsletter_modal ::-webkit-input-placeholder {
   color: rgba(255, 255, 255, .3);
}

#newsletter_modal :-moz-placeholder { /* Firefox 18- */
   color: rgba(255, 255, 255, .3);  
}

#newsletter_modal ::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(255, 255, 255, .3);  
}

#newsletter_modal :-ms-input-placeholder {  
   color: rgba(255, 255, 255, .3);  
}


	
/*
---------------------------------------------------
SOCIAL LINKS
---------------------------------------------------
*/

.social_list {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 100px;
}

	.social_list div {
		margin-left: -10px;
	}

		.social_list div a {
			display: inline-block;
			width: 100px;
			height: 100px;
			line-height: 100px;
			color: rgba(0, 0, 0, .45);
			text-align: center;
			background-color: #fff;
			font-size: 24px;
			margin-bottom: 10px;
			margin-left: 10px;
			text-decoration: none;
			border-radius: 100em;
			box-shadow: 0 0 0 0 transparent;
			transition: all 0.2s linear;
			animation-duration: 1s;
		}



		.social_list div a.fa-twitter {
			animation-delay: 0s;
		}

		.social_list div a.fa-facebook {
			animation-delay: 0.5s;
		}

		.social_list div a.fa-google-plus {
			animation-delay: 1s;
		}

		.social_list div a.fa-instagram {
			animation-delay: 1.5s;
		}

		.social_list div a.fa-dribbble {
			animation-delay: 2s;
		}



.icon:hover {
	color: rgba(255, 255, 255, .9);
}


.icon.fa-twitter:hover {
	background-color: rgb(28, 169, 225);
	box-shadow: 0 0 0 5px rgba(28, 169, 225, .3)
}

.icon.fa-facebook:hover {
	background-color: rgb(60, 90, 154);
	box-shadow: 0 0 0 5px rgba(60, 90, 154, .3);
}

.icon.fa-google-plus:hover {
	background-color: rgb(203, 59, 40);
	box-shadow: 0 0 0 5px rgba(203, 59, 40, .3);
}

.icon.fa-instagram:hover {
	background-color: rgb(74, 64, 56);
	box-shadow: 0 0 0 5px rgba(74, 64, 56, .3);
}

.icon.fa-dribbble:hover {
	background-color: rgb(226, 85, 139);
	box-shadow: 0 0 0 5px rgba(226, 85, 139, .3);
}



/*
---------------------------------------------------
FOOTER
---------------------------------------------------
*/

footer {
	display: table-row;
	height: 1px;
	bottom: 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
}

	footer .copyright_text small{
		display: inline-block;
		height: 3em;
		line-height: 3em;
		padding: 0 40px;
		background-color: rgba(0, 0, 0, 0.4);
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}






/*
---------------------------------------------------
PLUGINS
---------------------------------------------------
*/

/*tooltip modifying styles*/
.tooltip-inner {
	padding: 8px 12px;
	color: rgba(255, 255, 255, .9);
	border-radius: 3px;
}


/*
---------------------------------------------------
MODERNIZR CLASSES
---------------------------------------------------
*/
.generatedcontent form label {
	display: none;
}

.no-cssanimations .cb-slideshow {
	list-style: none;
}