/***********************************
Normal Css Style for every page.
***********************************/
html, body {
	min-height: 100%;
	height: 100%;
	font-family: 'Josefin Sans', sans-serif !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
	font-family: 'Josefin Sans', sans-serif !important;
}

h1 {
	font-size: 36px !important;
}

h2 {
	font-size: 30px !important;
}

.main-content {
	background: rgba(0, 0, 0, 0.5);
	padding-top: 80px;
}

.azen-header {
	padding: 15px 0px;
}

.azen-h1 {
	text-align: center; 
	padding-bottom: 30px;
	color: #FFF;
}

.back-btn {
	background: transparent; 
	color: white; 
	border: 2px solid;
}

.back-btn:hover {
	background: transparent; 
	color: #74c7d5; 
}

/***********************************
Header navigation style
***********************************/
#main-nav .container{
	padding:0 0 20px;
}

#main-nav .navbar-brand img{
	margin-right: 15px;
	max-width: 250px;
}

#main-nav.scrolled .navbar-brand img{
	margin-right: 15px;
	max-width: 150px;
	margin-top: 5px;
}

#main-nav .navbar-brand{
	display: inline-block;
	font-size:24px;
	font-weight:700;
	color: #fff;
	text-transform: uppercase;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:active,
.navbar-brand:focus {
	padding:0 10px;
	font-size:30px;
	line-height:30px;
	font-weight:normal;
	color:#fff;
}

.navbar-brand span {
	font-size:24px;
	font-weight:300;
}

#main-nav.scrolled .navbar-brand{
	color:#6d6d6d;
}

#main-nav{
	background: rgba(0, 0, 0, 0.3);
	color: white;
	box-shadow:0 0 0px transparent;
	-webkit-transition:background 0.3s ease-out;
	transition:background 0.3s ease-out;
}

#main-nav.scrolled{
	background: #707070;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

#main-nav.scrolled .navbar-toggle{
	color:#74c7d5;
	border-color:#74c7d5;
}

#main-nav.scrolled .navbar-toggle .icon-bar{
	background:#74c7d5;
}

#main-nav .container{
	padding:30px 20px;
	-webkit-transition:padding 0.5s ease-out;
	transition:padding 0.5s ease-out;
}

#main-nav.scrolled .container{
	padding:10px 20px;
}

#main-nav .nav a,
#main-nav .nav a:active,
#main-nav .nav a:hover{
	padding:0px 10px;
	font-size:14px;
	line-height:54px;
	font-weight:400;
	background:transparent;
	color:#fff;
	transition: color .2s ease-in;
}

#main-nav .nav a,
#main-nav .nav a:active,
#main-nav .nav a:hover{
	color: white;
}

#main-nav.scrolled .nav a,
#main-nav.scrolled .nav a:active,
#main-nav.scrolled .nav a:hover{
	color: #FFF;
}

#main-nav li{
	background:transparent;
	border:2px solid transparent;
}

#main-nav .nav li.active a,
#main-nav .nav a:hover{
	color: #12BBBA;
}

#main-nav.scrolled .nav li.active a,
#main-nav.scrolled .nav a:hover{
	color: #12BBBA;
}


/***********************************
Home page slide show dot style
***********************************/
.azen-carousel {
	height: 100%;
}

.azen-carousel>ol>li {
	border-radius: 0px;
}

.carousel-indicators li {
	border-color: #12BBBA;
}

.carousel-indicators .active {
	background-color: #12BBBA;
}

.azen-carousel-caption {
	height: 35%;
}

.azen-carousel-control {
	background-image: initial !important;
}


/***********************************
Contact us page map css style
***********************************/
.map {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(100%);
	   -moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		 -o-filter: grayscale(100%);
			filter: gray;
	padding: 0px; 
	margin: 0px;
}

.maps iframe{
	pointer-events: none;
}

.contact-details-container {
	padding: 30px 0px; 
}

.contact-information {
	padding: 0 50px 50px 50px;
}

.contact-company-name {
	color: #12BBBA;
}

.contact-form {
	padding: 0px 50px;
}

@media screen and (max-width: 768px) {
	.contact-form {
		padding: 20px 0px;
	}
	
	.contact-form input, .contact-form textarea {
		margin-bottom: 10px;
	}
	
	.contact-form .form-group {
		margin-bottom: 0px;
	}
}

.contact-form input, .contact-form textarea {
	border-radius: 0px; 
	padding: 20px 10px;
}

.send-button {
	background-color: #12BBBA; 
	color: white; 
	border-radius: 0px;
}


/***********************************
Service page css style
***********************************/
.service-big-container {
	padding: 0 50px 50px 50px;
}

.service-big-container .icon-h1 {
	font-size: 80px !important;
	color: #12BBBA;
}

.service-big-container .icon-h1 .icon {
	border: 3px solid #12BBBA; 
	padding: 20px 20px 20px 20px; 
	cursor: pointer;
}

.service-big-container .service-title {
	color: #12BBBA;
	padding-bottom: 20px;
}

.service-big-container .service-description {
	padding: 10px;
	min-height: 250px;
	color: white;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.service-big-container .service-description {
		min-height: initial !important;
		margin-bottom: 20px;
	}
}

/***********************************
Work page css style
***********************************/
.blur-background {
	background-color: rgba(0,0,0,0.7);
}

.work-img {
	padding: 0px; 
	border-radius: 0px; 
	margin: 15px 0px;
	border: 0px;
}
	
.white-h1 {
	color: white;
}
			
.project-item:hover .hover-mask {
	opacity: .9;
	filter: alpha(opacity=90);
}

.project-item:hover .hover-mask .project-title {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.hover-mask {
	position: absolute;
	padding: 0px;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #12BBBA;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.project-item .hover-mask .project-title {
	color:#fff;
	margin:90px 0 0;
	padding:10px;
	font-size:26px;
	line-height:34px;
	font-weight:400;
	text-align:center;
	opacity: 0;
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	-webkit-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

.pagination>li>a {
	background-color: transparent;
	border: 0px;
	color: #12BBBA;
	text-decoration: underline;
}
.pagination>li.selected>a {
	background-color: #12BBBA;
	color: white;
	text-decoration: none;
}
.pagination>li>a:hover {
	background-color: #12BBBA;
	color: white;
	text-decoration: none;
}

.pagination>.active>a,
.pagination>.active>a:hover {
	background-color: #12BBBA;
	color: white;
	text-decoration: none;
}

.single-work-main-img {
	padding: 0px; 
	border-radius: 0px;
	border: 0px;
}

.single-work-description {
	padding: 20px;
	color: white;
}

.single-work-sub-img {
	padding: 0px; 
	border-radius: 0px;
	margin: 15px 0px;
	border: 0px;
}

.portfolio-content {
	padding: 0px;
}

.portfolio-content .portfolio-item {
	margin: 0;
}

.portfolio-content .portfolio-item [class^="col-"] {
	padding: 3px;
	overflow: hidden;
}

.portfolio-content .portfolio-item  li {
	position: relative;
	-webkit-backface-visibility: hidden;
	max-height:350px;
	padding: 5px;
}

.portfolio-content .portfolio-item  li:after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	position: absolute;
}

 .portfolio-content .portfolio-item  li:hover:after {
	background: rgba(0, 0, 0, 0.8);
}

.portfolio-content .portfolio-item  li:after,
.portfolio-content .portfolio-item  li:hover:after {
	transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;  	
}

.portfolio-content .portfolio-item  li img {
	width: 100%;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.portfolio-content .portfolio-item  li .img-place {
	height: 200px; 
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat;
}

.portfolio-content .portfolio-item  .portfolio-item-content {
	left: 0;
	top: 65%;
	z-index: 1;
	width: 100%;
	visibility: hidden;
	min-height: 50px;
	margin-top: -75px;
	text-align: center;
	position: absolute;
}

.portfolio-content .portfolio-item  li:hover .portfolio-item-content{
	visibility: visible;
}

.portfolio-content .portfolio-item  .portfolio-item-content h3 {
	color: #12BBBA;
	font-weight: 600;
	font-size: 22px;
	margin-top: 20px;
	position: relative;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.portfolio-content .portfolio-item  .portfolio-item-content h3:after {
	left: 50%;
	height: 1px;
	width: 40px;
	content: " ";
	bottom: -10px;
	background: #12BBBA;	
	margin-left: -20px;
	position: absolute;
}

.portfolio-content .portfolio-item  .portfolio-item-content p {
	font-size: 16px;
	margin-bottom: 10px;
	padding: 0px 20px;
	color: #fff;
}

.portfolio-content .portfolio-item  .portfolio-item-content a.btn-u {
	font-weight: normal;
	-webkit-backface-visibility: hidden;
}

@media (max-width: 768px) {
	.portfolio-content .portfolio-item  .portfolio-item-content h3 {
		font-size: 16px;
	}
	
	.portfolio-content .portfolio-item  .portfolio-item-content p {
		font-size: 12px;
	}
}

.img-place {
	height: 200px; 
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat;
}

/***********************************
About css style
***********************************/
.about-content {
	padding: 0 50px 50px 50px; 
	color: #fff; 
	background: #12BBBA;
}

@media (max-width: 860px) {
	.about-content {
		padding: 0; 
		color: #fff; 
		background: #12BBBA;
	}
}

.about-content-container {
	padding: 30px 0px;
}

.about-content-container-details {
	text-align: justify; 
	font-size: 20px;
	padding-top: 20px;
}


/***********************************
Footer css style
***********************************/
.footer {
	background: #222;
	padding:60px 0 45px;
	position:relative;
	color: white;
}
ul.social-icons {
	padding: 0px;
}
ul.social-icons li {
	display:inline-block;
	float:none;
	padding:17px;
	width:10px;
	height:10px;
	position:relative;
	background:#555;
	margin-right:5px;
	border-radius:50%;
}
ul.social-icons li i {
	position:absolute;
	font-size:15px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	left:50%;
	top:50%;
	margin-left:-20px;
	margin-top:-20px;
}
ul.social-icons li a {
	color:#fff;
}
ul.social-icons li a i {
	-webkit-transition-duration:0.8s;
	-moz-transition-duration:0.8s;
	-o-transition-duration:0.8s;
	transition-duration:0.8s;
	-webkit-transition-property:-webkit-transform;
	-moz-transition-property:-moz-transform;
	-o-transition-property:-o-transform;
	transition-property:transform;
	overflow:hidden;
}
ul.social-icons li a i:hover {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
}
ul.social-icons li a:hover {
	text-decoration:none;
	color: #fff;
}

.filter_btn {
	background: transparent;
	border-radius: 0px;
	border: 1px solid #12BBBA;
	color: #fff;
	margin-bottom: 10px;
}

.filter_btn:hover,
.filter_btn.active {
	background: #12BBBA;
	color: #fff;
	border-radius: 0px;
	border: 1px solid #12BBBA;
}