/*
---------------------------------------------------
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 }
.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: 180px;
}

	.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: 100px;
	
}

	.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: #222222;
	width: 350px;
	height: 100%;
	position: relative;
	animation-duration: 1s;
	animation-delay: 1s;
}

	.logo img {
		width: 350px;
		height: 179px;
		position: absolute;

	}

	/* big logo image resposivity */

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

		.logo {
			display: none;
		}

	}

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

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


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

	.date_block_box {
	width: 22%;
	height: 180px;
	float: left;
	text-align: right;
	margin-left: 20px;
	}

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

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


	/* 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;
				}




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


.service {
	text-align: center;
}

/* service responsivity */

@media screen and (max-width: 992px) {
	.service {
		margin-bottom: 30px;
	}
}

	.service_icon {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 0 auto 32px auto;
		line-height: 100px;
		background-color: rgba(0, 0, 0, .15);
		font-size: 42px;
		border-radius: 3px;
	}

	.service_icon:after {
		position: absolute;
		bottom: -12px;
		left: 50%;
		margin-left: -15px;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 15px 0 15px;
		border-color: rgba(0, 0, 0, .15) transparent transparent transparent
	}


		.service_body h3 {
			font-family: 'Abel', sans-serif;
		}



/* pricing tables */

.pricing_table {
	text-align: center;
	margin-bottom: 30px;
}

	.pricing_table h3 {
		color: rgba(255,255,255,.8);
		margin: 0;
		background-color: rgba(0, 0, 0, .4);
		padding: 15px 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.pricing_table div:first-of-type {
		padding: 30px 0;
		background-color: rgba(0, 0, 0, .2);
		font-size: 32px;
		font-family: 'georgia', sans-serif;
	}

		.pricing_table span:last-child {
			font-size: 14px;
		}

			.pricing_table sup {
				font-size: 14px;
			}

	.pricing_table ul {
		padding: 30px 0;
		background-color: rgba(0, 0, 0, .1);
		margin-bottom: 0;
	}

		.pricing_table li {
			margin: 0 30px;
		}

		.pricing_table li:not(:last-child) {
			padding-bottom: 15px;
			border-bottom: 1px dashed rgba(255, 255, 255, .2);
		}

		.pricing_table li:not(:first-child) {
			padding-top: 15px;
		}

	.pricing_table .order_btn {
		background-color: rgba(0, 0, 0, .2);
		padding: 20px 0;
	}
	
		.pricing_table .order_btn a {
			padding: 8px 20px;
			background-color: rgba(0, 0, 0, .1);
			text-transform: capitalize;
			margin-bottom: 0;
			border-radius: 2px;
			font-size: 13px;
			color: rgba(255, 255, 255, .7);
			transition: 300ms;
		}
	
		.pricing_table .order_btn a:hover {
			background-color: rgba(0, 0, 0, .2);
			color: rgba(255, 255, 255, .9);
		}

/*
---------------------------------------------------
WORK MODAL
---------------------------------------------------
*/

.work_content .work_filter {
	margin-bottom: 30px;
}

	.work_content .work_filter ul {
		text-align: center;
	}

		.work_content .work_filter ul li {
			display: inline-block;
			padding: 8px 20px;
			background-color: rgba(0, 0, 0, .1);
			color: rgba(255, 255, 255, .6);
			cursor: pointer;
			transition: 300ms;
			text-transform: capitalize;
			border-radius: 2px;
		}


		/* work filter responsivity */

		@media screen and (max-width: 767px) {
			.work_content .work_filter ul {
				padding: 0 20px;
			}
			.work_content .work_filter ul li {
				width: 100%;
				margin-bottom: 15px;
			}
		}

		.work_content .work_filter ul li:hover, .work_content .work_filter ul li.active {
			background-color: rgba(0, 0, 0, .3);
			color: rgba(255, 255, 255, .9);
		}

.work_content .work_items {
	
}

	.work_items .work_item.mix {
		width: 25%;
		position: relative;
		display: none;
		opacity: 0;
		text-align: center;
		overflow: hidden;
		float: left;
		transition: 300ms;
	}


	/* work item responsivity */

	@media screen and (max-width: 992px) {
		.work_items .work_item.mix {
			width: 33.3333333333333333333333333333333%;
		}
	}


	@media screen and (max-width: 768px) {
		.work_items .work_item.mix {
			width: 50% !important;
		}
	}


	@media screen and (max-width: 480px) {
		.work_items .work_item.mix {
			width: 100% !important;
		}
	}

		.work_item img {
			transform: scale(1);
			transition: 300ms;
		}

		.image_caption {
			position: absolute;
			background-color: rgba(0, 0, 0, .6);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			transform: scale(.8);
			opacity: 0;
			visibility: hidden;
			transition: 300ms; 
		}


		 .work_item:hover .image_caption {
			transform: scale(1);
			opacity: 1;
			visibility: visible;
		}

		.work_item:hover img {
			transform: scale(1.2);
		}

			.image_caption a {
				display: block;
				position: absolute;
				width: 40px;
				height: 40px;
				border-radius: 100em;
				line-height: 40px;
				background-color: rgba(255, 255, 255, .5);
				color: rgba(0, 0, 0, .5);
				top: 50%;
				left: 50%;
				margin-top: -20px;
				font-size: 14px;
				transition: 300ms;
			}

			.image_caption a:hover {
				background-color: rgba(255, 255, 255, .7);
				color: rgba(0, 0, 0, .7);
			}

			.image_caption a:first-child {
				margin-left: -45px;
			}




/*
---------------------------------------------------
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;
	}


	/* 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);
}

.vh-center {
	display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;	
}

	.vh-center * {
		vertical-align: middle;
	}

	.vh-center {
		display: block;
	}

	.vh-center .adjuster {
	    display: inline-block;
	    height: 100%;
	    width: 1px;
	    margin-right: -1px;
	}

	.newsletter_box {
		padding: 30px;
		display: inline-block;
		box-shadow: 0px 5px 40px rgba(0, 0, 0, .6);
	}


	/* newsletter responsivity */

	@media screen and (max-width: 767px) {
		.vh-center, .newsletter_box {
			display: block;
			height: 100%;
		}

		.vh-center .adjuster {
			display: none;
		}
	}

			.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);
					}


/* 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;
}

/* parsley plugin error list style modification */

ul.parsley-error-list {
		list-style: none;
		padding: 5px 0;
		margin-top: 5px;
		margin-bottom: 0px;
		background-color: rgba(255, 255, 255, 0.6);
		color: rgba(255, 0, 0, 0.5);
		font-weight: bold;
		border-radius: 2px;
		text-indent: 12px;
		text-align: left;
	}


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

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