/*--------------------------------------------------------------------
Author        : Codexboss
Template Name : Idol Personal Portfolio Template
Developed By  : Codexboss
Version       : 1.0.0                                       
--------------------------------------------------------------------*/

/*--------------------------------------
Table Of Index
============================
1. Reset css
2. Style Css
2.1 Navigation
2.2 Banner
2.3 Seravices
2.4 About Me
2.5 Portfolio
2.6 Testimonial
2.7 Blog
2.8 Contact
2.9 footer
2.10 Extras
3. Responsive Css
--------------------------------------*/

/*--------------------------------------------------------------------
Start Default Settings
--------------------------------------------------------------------*/
@font-face {
	font-family: "web-vazir";
	src: url("../fonts/vazir-fd-wl.eot"); /* IE */
	src: url("../fonts/vazir-fd-wl.eot?#iefix") format("embedded-opentype"), /* IE */
		 url("../fonts/vazir-fd-wl.woff2") format("woff2"), /* Modern Browsers */
		 url("../fonts/vazir-fd-wl.woff") format("woff"), /* Modern Browsers */
		 url("../fonts/vazir-fd-wl.ttf") format("truetype"); /* Safari, Android, iOS */
	font-weight: normal;
}

@font-face {
	font-family: "web-vazir";
	src: url("../fonts/vazir-bold-fd-wl.eot"); /* IE */
	src: url("../fonts/vazir-bold-fd-wl.eot?#iefix") format("embedded-opentype"), /* IE */
		 url("../fonts/vazir-bold-fd-wl.woff2") format("woff2"), /* Modern Browsers */
		 url("../fonts/vazir-bold-fd-wl.woff") format("woff"), /* Modern Browsers */
		 url("../fonts/vazir-bold-fd-wl.ttf") format("truetype"); /* Safari, Android, iOS */
	font-weight: bold;
}

.ltr_text {
	display: inline-block;
	direction: ltr;
}

body {
	padding: 0;
	margin: 0;
	color: #666;
	font-size: 14px;
	font-family: 'web-vazir', 'segoe ui', tahoma !important;
	line-height: 2;
	direction: rtl;
}

a,
a:hover,
a:focus,
input,
button,
textarea {
	text-decoration: none;
	outline: none;
}

ul,
ol,
li {
	padding: 0;
	margin: 0;
	list-style: none;
}
.logo a{
	float:left;
}
/*--------------------------------------------------------------------
Typhography Settings
--------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
	line-height: 2;
}

h1 {
	color: #fff;
	font-size: 53px;
	font-weight: 700;
	line-height: 170px;
}

h2 {
	color: #365669;
	font-size: 35px;
	font-weight: 600;
	line-height: 45px;
}

h3 {
	color: #333;
	font-size: 18px;
	line-height: 34px;
}

h4 {
	color: #666;
	font-size: 22px;
	line-height: 38px;
}

h5 {
	color: #333;
	font-size: 15px;
	font-weight: 500;
	line-height: 30px;
}

p {
	color: #666;
	font-size: 14px;
	font-weight: 400;
	line-height: 28px;
}
.marginTop30{
	margin-top:30px;
}
.paddingSide5{
	padding-right:5px !important;
	padding-left:5px !important;
}
/*--------------------------------------------------------------------
alignment css
--------------------------------------------------------------------*/

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

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

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

/*--------------------------------------------------------------------
Spacing css
--------------------------------------------------------------------*/

.pt-1 {
	padding-top: 70px;
}

.pb-1 {
	padding-bottom: 30px;
}

.pb-2 {
	padding-bottom: 65px;
}

.pb-3 {
	padding-bottom: 37px;
}

.pb-4 {
	padding-bottom: 55px;
}

.ptb-1 {
	padding-top: 42px;
	padding-bottom: 100px;
}

.mb-1 {
	margin-bottom: 30px;
}

.no-gap {
	padding: 0;
	margin: 0;
}


.marginTop120{
	margin-top:120px;
}


.page-address-box{
	min-height: 30px;
	padding:5px;
}

.marginBtn20{
	margin-bottom: 20px;
}
/*--------------------------------------------------------------------
Color css
--------------------------------------------------------------------*/

.bg-1 {
	background: #f8f8f8;
}

.bg-2 {
	background: #111;
}

.white {
	color: #fff;
}

/*--------------------------------------------------------------------
All Transition Settings
--------------------------------------------------------------------*/

.logo,
.main-menu .navbar-nav > li > a,
.main-menu .navbar-nav > li > a:after,
.sticky .main-menu .navbar-nav > li > a,
.single-service-item,
.single-service-icon,
.single-service-title,
.single-service-content,
.portfolio-overlay,
.portfolio-menu li:after,
.portfolio-item-details h6,.portfolio-item-details h2,
.portfolio-overlay .portfolio-item-details,
.portfolio-overlay .portfolio-item-details:before,
.portfolio-overlay .portfolio-item-details:after,
.client-area .client-image .owl-item .client-single-item img,
.icon-link,
.single-post-item h5,
.btn2,
.contact-icon i,
.ftr-social-link li a i,
.cat-list li a,
.comments .auther-img,
.blog-social-link li a i,
.read-btn,
ul.blog-pagination li a,
.tag-list > a,
.not-visible,
.switcher-area,
.style-info {
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

/*--------------------------------------------------------------------
Start Common section
--------------------------------------------------------------------*/

.section-title {
	margin: 0 auto;
	max-width: 430px;
}

.section-title h3 {
	padding-bottom: 10px;
}

.section-title p {
	padding-top: 10px;
}

.section-devider {
	position: relative;
}

.section-block {
	height: 10px;
	width: 10px;
	background: #365669;
	display: inline-block;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.section-devider::before {
	top: 50%;
	right: 127px;
	height: 1px;
	width: 70px;
	background: #999;
	content: "";
	position: absolute;
}

.section-devider::after {
	top: 50%;
	left: 127px;
	height: 1px;
	width: 70px;
	background: #999;
	content: "";
	position: absolute;
}

/*--------------------------------------------------------------------
End Common section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Header section
--------------------------------------------------------------------*/

header.header-area {
	right: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	position: fixed;
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	min-height: 70px;
}

.logo {
	padding-top: 10px;
}

.logo p {
	color: #fff;
	font-size: 30px;
	font-weight: 600;
}

header.header-area.sticky .logo {
	padding-top: 18px;
}
.logo img {
    max-width: 161px;
    margin-bottom: 10px;
}	

header.header-area.sticky .logo p {
	color: #333;
}
.navbar-default{
	background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
width: 100%;

}

header.header-area.sticky {
	position: fixed;
	background: #f9f9f9 !important;
	color:#000;
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	-o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
}
header.header-area.sticky a{
	color:#000;
}
.navbar-toggle .icon-bar {
	background: #fff;
}

header.header-area.sticky .navbar-toggle .icon-bar {
	background: #333;
}

header.header-area.header-page{
	background: rgba(77, 139, 161, 0) linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%;
background-color:rgba(0,120,159,1) ;
}
.navbar-default .navbar-nav > li > a {
    color: #fff ;
}
.header-page .navbar-default .navbar-nav > li > a {
	color: #fff;
}
.sticky .navbar-default .navbar-nav > li > a {
    color: #000 !important;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: rgba(0,0,0,0) !important;
	color:#fff;
}
.sticky .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
   
	color:#000 !important;
}
.navbar-default .navbar-nav > li > a::after {
    position: absolute;
    content: "";
    bottom: 5px;
    right: -10%;
    height: 2px;
    width: 50%;
    background: #fff;
    visibility: hidden;
}
.header-page .navbar-default .navbar-nav > li > a::after{
	background: #fff;
}
.sticky .navbar-default .navbar-nav > li > a::after {
    position: absolute;
    content: "";
    bottom: 5px;
    right: -10%;
    height: 2px;
    width: 0%;
    background: #000 !important;
    visibility: hidden;
	margin-top:5px;
}
.navbar-default .navbar-nav > li:hover a::after {
    right: 0;
    visibility: visible;
	 width: 100%;
}
.navbar-nav a{
	text-align:right;
}
.logo, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a::after, .sticky .navbar-default .navbar-nav > li > a, .single-service-item, .single-service-icon, .single-service-title, .single-service-content, .portfolio-overlay, .portfolio-menu li::after, .portfolio-item-details h6, .portfolio-overlay .portfolio-item-details, .portfolio-overlay .portfolio-item-details::before, .portfolio-overlay .portfolio-item-details::after, .client-area .client-image .owl-item .client-single-item img, .icon-link, .single-post-item h5, .btn2, .contact-icon i, .ftr-social-link li a i, .cat-list li a, .comments .auther-img, .blog-social-link li a i, .read-btn, ul.blog-pagination li a, .tag-list > a, .not-visible, .switcher-area, .style-info {
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
	color:#fff;
	background-color:rgba(0,0,0,0) !important;
}
.navbar{
	margin-top:10px;
}
/*--------------------------------------------------------------------
End Header section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Slider section
--------------------------------------------------------------------*/

.banner-area.banner-1 {
	background: url(../images/banner.jpg)50% no-repeat fixed;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
}

/*-----------Start Particles Banner CSS-----------*/

.banner-area.banner-2 {
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 85vh;
	position: relative;
}

.banner-2 #particles-js {
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 9;
	background-color: transparent;
	background-image: url("");
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*-----------End Particles Banner CSS-----------*/

/*------------Start Video Banner CSS------------*/

.background-video {
	position: absolute;
	background-position: top center;
	background-repeat: no-repeat;
	bottom: 0;
	right: 0;
	overflow: hidden;
	left: 0;
	top: 0;
}

video,
source {
	bottom: 0;
	right: 0;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
}

/*-------------End Video Banner CSS-------------*/

.slider-title {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-moz-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: column nowrap;
	-moz-flex-flow: column nowrap;
	-ms-flex-flow: column nowrap;
	-o-flex-flow: column nowrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column nowrap;
	height: 85vh;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
}

.slider-title h1,
.slider-title > h3,
.slider-title p {
	z-index: 9;
}

.slider-title span {
	color: #fff;
	font-size: 25px;
	font-weight: 600;
	width:100%;
	text-align: center;
}

.slider-title h4 {
	color: #fff;
	font-size: 20px;
	line-height: 35px;
}

.overlay {
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	background: #0071968c;
}

.arrow-down {
	width: 26px;
	height: 55px;
	bottom: 2%;
	right: 50%;
	z-index: 9;
	text-align: center;
	position: absolute;
	border: 1px solid #aaa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-transform: translate(50%, -50%);
	-moz-transform: translate(50%, -50%);
	-ms-transform: translate(50%, -50%);
	-o-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
}

.arrow-down i {
	color: #fff;
	font-size: 22px;
	line-height: 40px;
	-webkit-animation: arrowdown 2s infinite;
	-moz-animation: arrowdown 2s infinite;
	-o-animation: arrowdown 2s infinite;
	animation: arrowdown 2s infinite;
}

.arrow-down i:hover {
	padding-top: 10px;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
}

@-webkit-keyframes arrowdown {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0);
	}
}

@-moz-keyframes arrowdown {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-moz-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0);
	}
}

@-o-keyframes arrowdown {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translate3d(0, 50%, 0);
	}
}

@keyframes arrowdown {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		-moz-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0);
	}
}



.heartbeatBody{
	bottom: 30px;
	left: 30px;
	position: fixed;
	z-index: 9999;
	display: inherit;
}
.heartbeat {
	position:relative;
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	animation: heartbeat 1.5s ease-in-out infinite both;
	transition:1s;

}
.heartbeat:hover {
	cursor: pointer;
	transition:1s;
}
/* ----------------------------------------------
 * Generated by Animista on 2018-10-3 13:32:56
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
.heartbeat{
	z-index: 2;
}
.heartbeatBody:hover{
	cursor: pointer;
}
.heartWithHover{
	background-image:url('../img/cell1.png');
	background-color: #365669;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	float: left;
	transition: 0.9s;
	z-index: 99;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}
.heartNoHover{
	background-image:url('../img/cell2.png');
	background-color:#365669;
	width:60px;
	height:60px;
	border-radius: 50%;
	float:left;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}
.heartText{
	margin-left:30px;
	margin-top:10px;padding-top:10px;padding-right:0px;width:0px;background-color: #b9b9b9;height: 40px;border-top-right-radius:30px;border-bottom-right-radius:30px;
	z-index:999999;
	padding-right:0px;
	transition: 1s;
	display: none;
}
.heartText span{
	padding-right:10px;
}
/*--------------------------------------------------------------------
End Slider section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start About section
--------------------------------------------------------------------*/
/* ABOUT US */
section.aboutus {
    padding-bottom: 41px;
	background-color: #f6f6f6;
}
section.aboutus {background: #eaedf2 url(../images/aboutusbg.jpg) top left; min-height:355px; padding-top:100px;}
section.aboutus hr.small { border: solid #3190E7; border-width: 2px 0 0; clear: both; height: 0; margin:21px 0 42px; max-width:100px;}
section.aboutus h3 {margin-bottom:25px; text-align: right;}
section.aboutus h4 {font-weight:300; font-size:30px; margin-bottom:35px;}
section.aboutus a.btn.btn-default {margin-top:20px; -webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;   border: 1px solid #fff; border-radius:4px; background:#3190E7; color:#fff; font-size:14px; letter-spacing: .06em; font-weight:400; padding: 7px 18px 8px; text-shadow:none;}
section.aboutus a.btn.btn-default:hover { background: #ffffff; color: #3190E7;  border: 1px solid #3190E7; }
.about-content-box{}

/*--------------------------------------------------------------------
Skill Progressbar
--------------------------------------------------------------------*/

.skill .progress .lead {
	color: #333;
	font-size: 12px;
	font-weight: 400;
	right: 0;
	position: absolute;
	top: -21px;
	z-index: 9;
}

.skill .progress {
	background-color: #eee;
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	height: 7px;
	margin-bottom: 51px;
	overflow: visible;
	position: relative;
}

.skill .progress-bar span {
	color: #333;
	float: left;
	font-weight: 400;
	font-size: 12px;
	margin-left: 10px;
	margin-top: -26px;
	position: relative;
	padding: 0 5px;
}

.skill .progress:nth-child(1) .progress-bar {
	background: #365669;
}

.skill .progress:nth-child(2) .progress-bar {
	background: #365669;
}

.skill-bar-area {
	overflow: hidden;
	padding-top: 50px;
}

/*--------------------------------------------------------------------
End About section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Service section
--------------------------------------------------------------------*/
#features {
	text-align: center;
	padding: 60px 0px;
	padding-bottom:41px;
}

#features i {
	font-size: 40px;
	color: #2196f3;
}

.item-descr {
	font-size: 13px;
	font-family: 'web-vazir', 'segoe ui', tahoma !important;
}
.servicePic{
	width:70px;
	height:70px;
}
/*--------------------------------------------------------------------
End Service section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Portfolio section
--------------------------------------------------------------------*/
#portfolio.our-product{
	background-color: #f6f6f6;
	margin-top:30px;
}
.portfolio-area-nav {
    padding-top: 42px;
    padding-bottom: 40px;
}
.Portfolio-title {
    color: #fff;
}

.portfolio-menu {
	margin-bottom: 30px;
}
.portfolio-menu.Portfolio-title  li:after {
    position: absolute;
    content: "";
    bottom: 0;
    right: -100%;
    background: #000	;
    width: 100%;
    height: 1px;
    visibility: hidden;
    opacity: 0;
} 

.portfolio-menu li {
	color: #333;
	cursor: pointer;
	display: block;
	line-height: 30px;
	margin-left: 25px;
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.portfolio-menu li:last-child {
	margin-left: 0;
}

.portfolio-menu li:after {
	position: absolute;
	content: "";
	bottom: 0;
	right: -100%;
	background: #333;
	width: 100%;
	height: 1px;
	visibility: hidden;
	opacity: 0;
}

.portfolio-menu li:hover::after {
	right: 0;
	opacity: 1;
	visibility: visible;
}

.portfolio-menu li.active::after {
	right: 0;
	opacity: 1;
	visibility: visible;
}

.portfolio-item {
	width: 100%;
	height: 100%;
	position: relative;
	margin-bottom: 30px;
	border:1px solid #eee;
}

.portfolio-item img {
	width: 100%;
	height: 250px;
}

.portfolio-overlay {
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 25px;
	opacity: 0;
	position: absolute;
	background: rgba(0, 0, 0, 0.8);
}

.portfolio-overlay .portfolio-item-details {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: 35px;
}

.portfolio-overlay .portfolio-item-details:before {
	content: '';
	width: 25%;
	height: 25%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	border-right: 1px solid #999;
	border-top: 1px solid #999;
}

.portfolio-overlay .portfolio-item-details:after {
	content: '';
	width: 25%;
	height: 25%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
}

.portfolio-item:hover .portfolio-overlay {
	opacity: 1;
}

.portfolio-item:hover .portfolio-overlay .portfolio-item-details:before {
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
}

.portfolio-item:hover .portfolio-overlay .portfolio-item-details:after {
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
}

.portfolio-item-details h6 {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 70px;
	display: inline-block;
}

.portfolio-item-details h6:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 20px;
	bottom: -13px;
	right: 0;
	border-bottom: 1px solid #999;
}

.portfolio-item-details h2 {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 70px;
	display: inline-block;
}

.portfolio-item-details h2:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 20px;
	bottom: -13px;
	right: 0;
	border-bottom: 1px solid #999;
}

.icon-link li {
	display: inline-block;
	margin-left: 15px;
}

.icon-link li:last-child {
	margin-left: 0;
}

.icon-link i {
	background: #fff;
	display: inline-block;
	font-size: 23px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	color: #333;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.portfolio-item:hover .portfolio-item-details h6 {
	-webkit-transform: translateY(60%);
	-moz-transform: translateY(60%);
	-ms-transform: translateY(60%);
	-o-transform: translateY(60%);
	transform: translateY(60%);
}
.portfolio-item:hover .portfolio-item-details h2 {
	-webkit-transform: translateY(60%);
	-moz-transform: translateY(60%);
	-ms-transform: translateY(60%);
	-o-transform: translateY(60%);
	transform: translateY(60%);
}
.portfolio-item:hover .icon-link {
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*--------------------------------------------------------------------
End Portfolio section
--------------------------------------------------------------------*/


/*--------------------------------------------------------------------
Start project section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
End project section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Blog section
--------------------------------------------------------------------*/
.blog-area {
    padding-bottom: 42px;
    background: url(../img/twitter-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

.section-title.text-center.pb-1 p, .section-title.text-center.pb-1 h3 {
    color: #fff !important;
}

.single-post-item img {
	width: 100%;
	height: 200px;
}

.single-post-item h5 {
	color: #666;
	font-size: 18px;
	padding-bottom: 15px;
	padding-top: 10px;
}

.single-post-item:hover h5 {
	color: #e0e0e0;
}

.blog-meta {
	margin-top: 10px;
}

.blog-meta i {
	padding-left: 5px;
}

.post-by > a {
	color: #fff;
	font-weight: 400;
	line-height: 30px;
	margin-left: 25px;
	display: inline-block;
}
.blog-meta span {
    color: #fff !important;
}
.single-post-item a>h5 {
    color: #fff;
}
.single-post-item p {
    color: #ffffffbf;
}

.post-date {
	font-weight: 400;
	line-height: 30px;
	margin-left: 25px;
}

.post-comment > a {
	color: #777;
	display: inline-block;
	font-weight: 400;
	line-height: 30px;
}

.post-by:hover a {
	color: #666;
}

.post-comment:hover a {
	color: #666;
}

.single-post-item h5:hover {
	color: #999;
}

.blog-overlay {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	right: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.comments-post-co {
	margin-bottom: 30px;
	padding: 25px;
	background-color: #fbfbfb;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	position: relative;
	transform: scale(1);
	z-index: 1;
	margin-top: 24px;
	border-bottom: #0061ab solid 3px;
}
.comments-post-co .comments-list-co {
	display: block;
	margin-top: 0px;
	border: 1px solid rgba(229, 235, 239, 0.52);
	padding: 23px;
	BACKGROUND: #FFF;
	border-radius: 12px;
}
.get_in_touch {
	background-color: #fbfbfb;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	padding: 50px 80px;
	position: relative;
	transform: scale(1);
	z-index: 1;
	margin-top: 24px;
	border-bottom: #0061ab solid 3px;
}
#contentCommentSave input[type="text"],#contentCommentSave input[type="email"],#contentCommentSave textarea{
	font-size: 14px;
	font-weight: 300;
	background-color: #fff;
	border: 1px solid #eceaea;
	border-radius: 5px;
	padding: 10px 25px;
	width: 100%;
	color: #444444;
	margin-bottom: 15px;
}
#contentCommentSave [type="submit"]{
	border-radius: 5px;
	padding:5px 15px
}
#contentCommentSave [type="submit"]:hover {
	background-color: #555;
	color:#fff;
}
/*--------------------------------------------------------------------
End Blog section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Contact section
--------------------------------------------------------------------*/

.contact-area {
	padding-bottom: 98px;
	background: url(../img/contact-bg.jpg);
	
}

.contact-info > img {
	width: 100%;
}

.single-contact-field {
	margin-bottom: 20px;
}

.single-contact-field .text-field {
	font-size: 14px;
	height: 50px;
	line-height: 20px;
	padding: 0 10px;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: #ffffff4a;;
}

.single-contact-field textarea {
	height: 150px;
	width: 100%;
	line-height: 20px;
	padding: 12px 10px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	    background: #ffffff4a;;
}
section#contact h2, section#contact p {
    color: #Fff;
}
.btn2 {
    background: #00b7c6;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.btn2:hover {
	color: #333;
	background: #fff;
	border: 1px solid #ddd;
}

.contact-icon {
	height: 50px;
	width: 50px;
	float: right;
	overflow: hidden;
	text-align: center;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.contact-icon i {
	color: #fff;
	font-size: 25px;
	line-height: 50px;
	display: block;
}

.info-text {
	overflow: hidden;
	padding-right: 20px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color:rgba(255,255,255,0.8);
}

.contact-info li {
	width: 100%;
	margin-bottom: 35px;
	display: inline-block;
}

.contact-info li:hover .contact-icon i {
	color: #365669;
	background: #fff;
}

.success {
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	background: #365669;
	padding: 15px;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 25px;
}

/*--------------------------------------------------------------------
End Contact section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Footer section
--------------------------------------------------------------------*/

footer.footer-area {
	padding-bottom: 82px;
}

.footer-logo > a {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
}

.ftr-social-link {
	margin-top: 30px;
	margin-bottom: 40px;
}

.ftr-social-link li {
	display: inline-block;
}

.ftr-social-link li a i {
	background: #fff;
	color: #365669;
	display: block;
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	width: 40px;
	margin-left: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.ftr-social-link li:hover a i {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

/*--------------------------------------------------------------------
End Footer section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Blog Page
--------------------------------------------------------------------*/

.blog-banner-area {
	background: url(../images/blog-bg.jpg);
	background-position: 50% 35%;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 140px;
	padding-bottom: 140px;
	position: relative;
	overflow: hidden;
}

.breadcrumb-area .breadcrumb {
	background: #333;
	display: inline-block;
	margin-bottom: 0;
	background: transparent;
}

.breadcrumb-area .breadcrumb li a {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
}

.breadcrumb-area .breadcrumb > .active {
	color: #999;
	font-size: 16px;
}

.breadcrumb-area .breadcrumb li {
	color: #fff;
	position: relative;
}

.single-blog-post {
	margin-bottom: 75px;
}

.read-btn {
	background: transparent;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #333;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 35px;
	padding: 0 18px;
	margin-top: 20px;
}

.read-btn:hover {
	background: #365669;
	border: 1px solid #333;
	color: #fff;
}

.post-thumbnail > img {
	width: 100%;
}

.post-head {
	padding: 25px 0;
}

.date {
	width: 60px;
	color: #fff;
	float: right;
	height: 65px;
	background: #365669;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-left: 20px;
	margin-bottom: 25px;
	text-align: center;
	padding-top: 7px;
	line-height: 1.2;
}

.date > span {
	color: #fff;
	display: block;
	font-size: 25px;
}

.entry-title > a {
	color: #333;
	font-size: 22px;
	font-weight: 500;
}

.entry-meta {
	margin-top: 5px;
	margin-bottom: 0;
}

.entry-meta > a {
	color: #666;
	padding-right: 5px;
	padding-left: 5px;
}

.entry-content > p {
	text-align: justify;
}

.quote {
	color: #666;
	font-style: italic;
	font-weight: 500;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 0 76px;
	position: relative;
	text-align: center;
	font-size: 20px;
	line-height: 36px;
}

.quote::before,
.quote::after {
	font: 22px FontAwesome;
	position: absolute;
	padding: 0 50px;
}

.quote::before {
	content: '\f10e';
	right: 0;
	top: 0;
}

.quote::after {
	bottom: 0;
	content: '\f10d';
	left: 0;
}

#pagination {
	direction: ltr;
}

ul.blog-pagination li a {
	border: 1px solid #ccc;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	color: #666;
	font-size: 16px;
	height: 35px;
	line-height: 22px;
	margin: 5px;
	min-width: 35px;
	float: left;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

ul.blog-pagination li:first-child a {
	margin-left: 0;
	margin-right: 5px;
}

.black-icon > span {
	padding-right: 0;
}

.black-icon {
	background: #365669 !important;
}

.black-icon:hover {
	background: #365669 !important;
}

ul.blog-pagination li a:hover {
	color: #fff;
	background: #365669;
	border: 1px solid #333;
}

.black-icon i {
	font-size: 14px;
	color: #fff !important;
}

.comments {
	margin-top: 50px;
}

.comment-title {
}

.comments .auther-img {
	float: right;
	height: 100px;
	overflow: hidden;
	width: 100px;
	margin: 0 0 20px 20px;
	border: 4px solid #ccc;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.comments .auther-img img {
	height: 100%;
	max-width: 100%;
}

.children:hover .auther-img,
.parent:hover .auther-img {
	border-color: #666;
}

.auther-link {
	margin-bottom: 7px;
}

.auther-link a {
	color: #333;
	font-weight: 600;
	padding-left: 15px;
}

.auther-link > span {
	color: #333;
	font-weight: 600;
	padding-left: 15px;
}

.auther-link:hover span,
.auther-link:hover a {
	color: #666;
}

.parent {
	display: inline-block;
}

.children {
	display: inline-block;
	margin-right: 100px;
}

.parent,
.children {
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.comment-form h4 {
	color: #333;
	display: table;
	font-size: 25px;
	font-weight: 600;
	margin-bottom: 30px;
	position: relative;
}

.comment-form h4::after {
	background: #ccc;
	bottom: -10px;
	content: "";
	height: 2px;
	right: 0;
	position: absolute;
	width: 100%;
}

.single-comment-box {
	margin-bottom: 25px;
}

.single-comment-box input {
	height: 45px;
	line-height: 50px;
	padding: 0 10px;
	width: 100%;
	border: 1px solid #ccc;
}

.single-comment-box textarea {
	height: 180px;
	padding: 10px;
	width: 100%;
	border: 1px solid #ccc;
}

/*--------------Sidebar--------------*/

.single-sidebar {
	margin-bottom: 50px;
}

.single-sidebar > h4 {
	color: #333;
	padding-bottom: 20px;
}

.form-control.input-field {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	float: right;
	height: 40px;
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	width: calc(100% - 40px);
}

.search-btn {
	color: #333;
	font-size: 22px;
	height: 40px;
	width: 40px;
	background: transparent;
	border: 1px solid #ccc;
	line-height: 22px;
}

.cat-list li {
	border-bottom: 1px solid #ccc;
}

.cat-list li:last-child {
	border-bottom: 0;
}

.cat-list li a {
	color: #666;
	line-height: 45px;
}

.cat-list span {
	color: #666;
	float: left;
	font-weight: 400;
	padding-left: 20px;
}

.cat-list li a i {
	padding-left: 10px;
}

.cat-list li:hover a {
	padding-right: 10px;
}

.blog-social-link li {
	margin-left: 5px;
	display: inline-block;
}

.blog-social-link li a i {
	background: #365669;
	border: 1px solid #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	font-size: 17px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	width: 36px;
}
.section-title.text-center.pb-1.service h3 {
    color: #365669 !important;
}
.blog-social-link li:hover a i {
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.recent-post li {
	display: inline-block;
	margin-bottom: 15px;
}

.rp-thumb {
	float: right;
	margin-left: 12px;
}

.rp-text {
	float: right;
}

.rp-text h5 {
	font-size: 14px;
}

.tag-list > a {
	color: #333;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	font-weight: 500;
	line-height: 30px;
	margin-bottom: 10px;
	padding: 0 15px;
}

.tag-list > a:hover {
	background: #365669;
	color: #fff;
	border: 1px solid #333;
}

.instagram-photo img {
	float: right;
	width: 33.33%;
}

/*--------------------------------------------------------------------
End Blog Page
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Scroll To Top section
--------------------------------------------------------------------*/

.scroll-top {
	height: 35px;
	width: 35px;
	background: #365669;
	text-align: center;
	position: fixed;
	right: 20px;
	cursor: pointer;
	bottom: 50px;
	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.scroll-top i {
	line-height: 35px;
	color: #fff;
	font-size: 24px;
}

.not-visible {
	visibility: hidden;
	opacity: 0;
}

/*--------------------------------------------------------------------
End Scroll To Top section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start Preloader section
--------------------------------------------------------------------*/

.loader-overlay {
	background-color: rgba(255, 255, 255, 1);
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	position: absolute;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

.preloader {
	background: #333;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 9999999;
}

.preloader-inner-area {
	height: 100%;
	position: relative;
	width: 100%;
}

.l-preloader {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.c-preloader {
	width: 60px;
	height: 60px;
	position: relative;
}

.c-preloader::before {
	content: '';
	width: 60px;
	height: 60px;
	display: inline-block;
	position: absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #333;
	opacity: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-animation-name: preloading;
	-moz-animation-name: preloading;
	-o-animation-name: preloading;
	animation-name: preloading;
	-webkit-animation-duration: 1.2s;
	-moz-animation-duration: 1.2s;
	-o-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.c-preloader::after {
	content: '';
	width: 60px;
	height: 60px;
	display: inline-block;
	position: absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #333;
	opacity: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-animation-name: preloading;
	-moz-animation-name: preloading;
	-o-animation-name: preloading;
	animation-name: preloading;
	-webkit-animation-duration: 1.2s;
	-moz-animation-duration: 1.2s;
	-o-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-delay: -0.6s;
	-moz-animation-delay: -0.6s;
	-o-animation-delay: -0.6s;
	animation-delay: -0.6s;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes preloading {
	0% {
		opacity: 1;
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@-moz-keyframes preloading {
	0% {
		opacity: 1;
		-moz-transform: scale(0);
		transform: scale(0);
	}
	100% {
		opacity: 0;
		-moz-transform: scale(1);
		transform: scale(1);
	}
}

@-o-keyframes preloading {
	0% {
		opacity: 1;
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		opacity: 0;
		-o-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes preloading {
	0% {
		opacity: 1;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

/*--------------------------------------------------------------------
End Preloader section
--------------------------------------------------------------------*/

/*--------------------------------------------------------------------
Start switcher area
--------------------------------------------------------------------*/

.switcher-area {
	background: #fff;
	display: inline-block;
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 999;
	-webkit-transform: translate(212px, -50%);
	-moz-transform: translate(212px, -50%);
	-ms-transform: translate(212px, -50%);
	-o-transform: translate(212px, -50%);
	transform: translate(212px, -50%);
}

.switcher-inner-area {
	width: 210px;
	padding: 10px 10px;
	position: relative;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .20);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .20);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .20);
}

.style-info span {
	font-size: 17px;
	font-weight: 500;
	padding-right: 0;
}

.switcher-inner-area img {
	width: 100%;
}

.switcher-icon {
	background: #fff;
	color: #365669;
	cursor: pointer;
	font-size: 30px;
	height: 45px;
	line-height: 48px;
	position: absolute;
	left: -45px;
	text-align: center;
	top: 30%;
	width: 45px;
	-webkit-box-shadow: -2px 0px 4px rgba(0, 0, 0, .20);
	-moz-box-shadow: -2px 0px 4px rgba(0, 0, 0, .20);
	box-shadow: -2px 0px 4px rgba(0, 0, 0, .20);
	-webkit-border-top-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-left-radius: 3px;
}

.switcher-inner-area > span {
	color: #333;
	display: block;
	font-size: 15px;
	font-weight: 400;
	padding-bottom: 10px;
	text-align: center;
}

.style-info {
	background: rgba(255, 255, 255, .9);
	height: 100%;
	right: 0;
	opacity: 0;
	top: 0;
	width: 100%;
	position: absolute;
	visibility: hidden;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.switcher-area .switcher-inner-area ul li {
	margin-bottom: 15px;
	position: relative;
}

.switcher-area .switcher-inner-area ul li:hover .style-info {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.switcher-area .switcher-inner-area .style-info > a {
	color: #333;
	font-size: 20px;
	height: 100%;
	width: 100%;
	font-weight: 600;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-flow: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.switcher-area.switcher-toggle {
	-webkit-transform: translate(0px, -50%);
	-moz-transform: translate(0px, -50%);
	-ms-transform: translate(0px, -50%);
	-o-transform: translate(0px, -50%);
	transform: translate(0px, -50%);
}
#ajax-contact #form-messages{
	display:none !important;
}
/*--------------------------------------------------------------------
End switcher area
--------------------------------------------------------------------*/

.boxCustom{
	background-color: #f9f9f9;
	padding: 15px;
	margin-top: 5px !important;
	border: 1px solid #ebeced;
	margin-top: 0px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
	margin:20px 0px !important;
	padding-bottom:50px;
}

.widget-title {
	margin-bottom: 15px;
	padding-right: 7px;
	border-right-width: 3px;
	border-right-style: solid;
	font-size: 18px;
	line-height: 30px;
	color: #000;
	text-align: right;
	margin-top: 8px;
}

/*contact*/
.contact-us .single-contact-field .text-field{
	background: #6e727b4d;
}
.contact-us .single-contact-field textarea{
	background: #6e727b4d;
}

/*service*/
.widget-sevices a, .widget-sevices span {
	position: relative;
	display: inline-block;
	padding: 14px 28px 12px 14px;
	color: #333;
}
.widget-sevices li {
	font-size: 13px;
	line-height: 24px;
}
/*project*/
.mainBlog {
	border: 1px solid #ddd;
	padding: 10px;
	margin: 10px;
}
.portfolio-info:last-child {
	border-bottom: 3px solid #57c6d2;
}
.portfolio-info {
	background-color: #f8f8f8;
	padding-top: 15px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border:1px solid #eee;
}
.portfolio-info-box {
	border-bottom: solid 1px #eee;
	padding-top: 15px;
	padding-bottom: 15px;
}
.portfolio-info-box h6 {
	float: right;
	font-size: 14px;
	display: inline-block;
	line-height: 1;
	margin-bottom: 0;
	margin-top:3px;
}
.portfolio-term {
	display: inline-block;
	font-size: 14px;
	text-rendering: optimizeLegibility !important;
	line-height: 1px;
}
.share .icon-wrap span {
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
	background-color: #eee;
}
/* --------------------------
---------------news------------
-----------------------------*/
.content-box-thumb {
	display: block;
	max-width: 100%;
	height: auto !important;
	height: 120px;
	margin-right: auto;
	margin-left: auto;
}
.dotBox {
	border-bottom: 1px dashed #555;
	padding: 10px;
	padding-right: 10px;
	padding-left: 10px;
	height:150px;
}
.dotBox:nth-child(2n+1) {
	border-left: 1px dashed #555;
}
.dotBox:nth-last-of-type(2) {
	border-bottom: 1px dashed #f7f7f7;
}
.dotBox:last-child {
	border-bottom: 1px dashed #f7f7f7;
}
.news-box-header a{
	font-size:14px;
}
.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}
.pagination a{
	float: right;
	padding: 0px 10px;
	border: 1px solid #ddd;
	border-radius: 2px;
}
.pagination .active{
	background-color:#337ab7;
	color:#fff;
}
h2.news-box-header{
margin-bottom: 20px;
	white-space: nowrap;
}
@media only screen and (max-width: 768px){
	.dotBox:nth-child(2n+1){
		border:none;
	}
	.comments-post-co h3{
		font-size:13px;
		line-height: 40px;
		margin-top:0px;
		padding-top: 0px;
	}
	.employment{
		overflow-x: hidden !important;

	}
	

	.get_in_touch{
		padding:50px 30px !important;
	}
	body{
		overflow-x: hidden !important;
	}

}
/*-------------------------
--------------product category----------
----------------*/
.catPro {
	height: 200px;
	position: relative;
	transition: 2s;
	margin-bottom: 5px;
}
.catPro:hover p {
	height: 100%;
	transition: 0.4s;
	padding-top: 30%;
	font-size: 16px;
}
.catPro p {
	text-align: center;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	position: absolute;
	bottom: 0px;
	width: 100%;
	margin-bottom: 0px;
	height: 40px;
	transition: 0.4s;
	left: 0px;
}
.catPro img {
	max-height: 100%;
	width: 100%;
	transition: 0.4s;
}
.headH1H2.textHead{
	background-color: #027297;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: 15px;
	margin-left:15px;
	height:66px;
	margin-bottom: 30px;
}
.headH1H2.textHead  h2{
	margin-right:40%;
	text-align:right;

}
.trapezoid{
	border-bottom: 66px solid #dcddde;
	border-left: 50px solid transparent;
	height: 0;
	width: 40%;
	position: absolute;
	right:0px;
	top:0px;
	margin-top:-10px;
}
.trapezoid h1{
	font-size:16px;
	padding-right: 15px;
	padding-top: 5px;
}
.desProCat{
	background-color:#F2AB00;margin-bottom: 40px;padding:15px;border-right: 5px solid #01455C;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);border-radius: 2px;
}
.desProCat p{
	color:#fff;
	text-align: justify;
}
/*-------------------for pages--------------*/
.backImgPage{
	width:100%;
	height:300px;
	margin-top:75px;
}
.backImgPage img{
	width:100%;
	height:100%;
}
/*----------------------address bar-------------------*/
.topbreadcrumb .page-address-box  a,.topbreadcrumb .page-address-box  span,.topbreadcrumb .page-address-box  i.fa-home::before {
	color:#fff !important;
	font-size:12px;
}
.topbreadcrumb{
	padding-right: 0px;padding-left: 0px;background-color:#00789f
}

/*------------------details product-----------
----------------------------------------------*/
@media only screen and (max-width: 600px) {
	.detProductPage{
		margin-top:120px !important;
	}
	.trapezoid{
		width:100%;
		margin-top: 55px;
		border-left: 0px solid transparent;
	}
	.headH1H2.textHead{
		margin-bottom: 100px;
	}
	.headH1H2.textHead h2{
		margin-right:0px;
	}
}
select#garanty{
	padding-right:30px;
}
.boxmore a{
	background-color:rgb(14,83,120);
	padding:5px;

}
.details-tab .owl-item img{
	height:70px;
}

/*...--------------select lang---------------------...*/
.selectLang{
	position:absolute;
	background-color:#f3f3f3;
	height:60px;
	margin: 0;
	top: 40%;
	right: -50px;
	transform: rotate(-90deg);
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 5px;
	z-index:1000;
}
.lang{
	height:30px;text-align:center
}
.aboutUsSec{
	visibility: visible;
	animation-duration: 600ms;
	animation-delay: 600ms;
	animation-name: fadeInLeft;
}
.selectLang:hover{
	cursor: pointer;
}
.lang{
	display:none;
}
.closelang{
	position:absolute;
	left: 0px;
	top: -15px;
	display: block;
	background-color: #f3f3f3;
	width: 20px;
	height: 20px;
	text-align: center;
	display:none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.langFlag{
	transform: rotate(90deg);
	width:30px;
	height:30px
}
.langFlag:hover{
	border:1px solid;
	border-radius: 50%;
}

/*...--------------------index page-------------------------...*/
.textHead{
	background-color:#027297;
	padding-top: 10px;
	padding-bottom: 10px;
}
.textHead h2{
	margin-top: 0px;
	color: #fff;
	padding: 15px;
	text-align: center;
	font-size: 16px;
	margin-bottom: -2px;
	margin-right: 10px;
	margin-left: 10px;
}

.content-seo-box-text{
	text-align: justify;

}
.seo-text-box {
	border: 1px solid #ebeef0;
	box-shadow: 0 1px 0 #ebeef0;
	background: #fff;
	overflow: hidden;
	position: relative;
	transition: all 0.3s;
	margin-bottom: 30px;
	padding: 20px;
	height:300px;
	margin-top:30px;
}
.seo-text-box  p {
	font-size: 12px;
	line-height: 18px;
	text-align: justify;
	color: #868686;
}
.seo-text-box h3 {
	font-size: 16px;
	color: #ffc527;
	margin-bottom: 15px;
}
.seo-text-box i {
	transition-delay: 0.35s;
	visibility: visible;
	opacity: 0.2;
	margin-top: 0;
	transition: all 0.3s;
	font-size: 108px;
	width: 170px;
	height: 170px;
	line-height: 170px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #0dc0c096;
}

/* -----------------------------------
-------------------advertise ----------
---------------------------------*/
.advertise{
	margin-top:20px
}
.advertise a:hover img {
	transition: 0.3s;
	opacity: 0.8;
}
.advertise a:before {
	bottom: 15px;
	content: "";
	right: 25px;
	position: absolute;
	left: 25px;
	top: 25px;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	z-index: -10;
	border-bottom: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-o-transform: scale(0, 1);
	transform: scale(0, 1);
}
.advertise a:hover:before {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 9;
}
.advertise a:after {
	bottom: 15px;
	content: "";
	right: 25px;
	position: absolute;
	left: 25px;
	top: 25px;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	z-index: -10;
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);

}
.advertise a:hover:after {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 9;
}
.advertise .itemAdvertise{
	width:100%;
	height:200px;
	margin-top:10px;
}
.advertise div[class*='col-md']{
	padding-left: 5px;
	padding-right:5px;
}
#brand  img {
	margin: 0 auto;
	transition: 0.3s;
	height: 80px;
	width: 80px;
	margin-top:10px;
	margin-bottom: 10px;
}
#brand .item{
	border-left: #d3d3d3 solid 1px;
	background: rgb(254,254,254);
	background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(244,244,245,1) 40%, rgba(221,216,216,1) 100%);
	background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(244,244,245,1) 40%,rgba(221,216,216,1) 100%);
	background: linear-gradient(to bottom, rgba(254,254,254,1) 0%,rgba(244,244,245,1) 40%,rgba(221,216,216,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#ddd8d8',GradientType=0 );
	border: none;
	border-left-color: currentcolor;
	border-left-style: none;
	border-left-width: medium;
	border-left: #d2d2d28c solid 1px;
	margin-left:1px;
	min-height: 100px;}
#brand .owl-nav{
	display:none;
}
#brand .owl-dots{
	display:none;
}
.productList .icon-link{
	margin-top:25px;
}
.productList .portfolio-item-details h3{
	color: #fff;
	margin-top:10px;
	font-size:20px;
}
.productList .portfolio-item-details h2{
	margin-bottom:30px;
}

#trapezoid{
	border-bottom: 66px solid #dcddde;
	border-left: 50px solid transparent;
	height: 0;
	width: 20%;
	position: absolute;
	right:0px;
	top:0px;
	margin-right:-10px;
	margin-top:-10px;
}
#trapezoid span{
	color: #555;
	border-radius: 1em;
	padding: 1.5em 0.5em;
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	margin-right: -50%;
	white-space: nowrap;
	overflow: hidden;

}
h2.static-text{
	position: relative;
	padding-right:20%;
}
h1.demo2{
	text-align: center;
	width: 100%;
}
.links-wrap {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin: 30px 0;
	direction: rtl;
	position:absolute;
	top:60%;
}
.links-wrap a {
	font-size: 1.7rem !important;
	color: #e6e6e6;
	display: inline-block;
	position: relative;
	float: right;
	background-color: rgba(11,61,101,.64);
	padding: 2px 7px;
	border-radius: 3px;
	width: 20%;
	margin-right: 2%;
	margin-left: 2%;
	margin-top: 3%;
	z-index:9;
}
.links-wrap a:hover {
	color:#fff;
	text-decoration: none;
}
@media only screen and (min-width: 768px){
	.links-wrap a {
		display:block;
	}
	.pagination {
		position: absolute;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		height: 30px;
	}
}
@media only screen and (max-width: 768px){
	.links-wrap a {
		display:none;
	}

	#trapezoid{
		border-left: 0px solid transparent;
		width: 100%;
		position: relative;
		margin-top:20px;
		margin-right:0px;
	}
	h2.static-text {
		padding-right:5%;
	}
	.header-page .navbar-default .navbar-nav > li > a{
		color:#000 !important;
	}
}
#aboutDiv p{
	padding-right:10px;
}
.page-address-box.padding-addressBar > span{
	float:right;
}
.page-address-box .fa-home{
margin-top:2px;
	margin-left:6px;
	float:right;
}
span.fa-angle-left{
	margin-top:4px;
}
/* ...------------------------- link Index Page -----------------------...*/
#linkIndexPage a{
	color:#fff;
}
#linkIndexPage a:hover{
	color:#fff;
}
/*...----------------------------end link Index Page ------------------------...*/
.topbreadcrumb .page-address-box a{
	float:right
}
.rightProduct p{
	width:100%;
}
#linkIndexPage .col-md-3{
	margin-bottom: 20px;
}

/*---------------------search section----------------*/
/*define modal*/
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	min-height:100px;
	background-color: #fff;
	margin: 15% auto; /* 15% from the top and centered */
	border: 1px solid #888;
	/* Could be more or less, depending on screen size */
}
#myModal .modal-content{
	width: 40%;
}
.modal-content2 {
	margin: 5% auto !important; /* 15% from the top and centered */

}
#myModal .modal-content {
	width: 40%;
}
.modal-content {
	min-height: 100px;
	background-color: #fff;
	margin: 15% auto;
	border: 1px solid #888;
}
.modal-content .close {
	color: #aaa;
	float: right;
	font-size: 17px;
	width: 25px;
	height: 25px;
	background-color: #2b2d2f !important;
	opacity: 1;
	padding: 4px 7px;
	position: absolute;
}
.modal-content .close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
.dialog-search h3 {
	margin-top: 30px;
	text-align: center;
	font-size: 13px !important;
	margin-bottom: 20px;
}
.dialog-search input {
	border: 1px solid #eee !important;
	line-height: 3 !important;
	padding: 0 20px !important;
	color: #8f8f8f !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
	width:auto !important;
}
.dialog-search button {
	border: 4px double #027297;
	background-color: transparent;
	padding: 5px 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
}
.dialog-search button:hover {
	background-color: #027297;
	cursor: pointer;
	color: #fff;
}
.moreDetails{
	float:left;
	margin-top:0px;
}
.descriptionSearch p {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 90%;
	height: 25px;
}
.descriptionSearch *{
	display:none;
}
.descriptionSearch p:first-child{
	display:block;
}

.paginationFrame {
	height: 50px;
}
/*-------------end search section7--------------*/
/*-------------gallery page---------------------*/
.backGalleryImage{
	margin-top:40px;
	margin-bottom: 40px;
}
/*-------------end gallery page-----------------*/

/*----------------department page-------------*/


/*-----------end department page---------------*/
/*------------personnel page-------------------------*/
img.personnelImg{
	height:150px;
	float:left;
	margin-top:20px;
	margin-bottom: 20px;
}
.callInfoPersonel table{
	max-width:400px;
}
.callInfoPersonel a{
	margin-left: 5px;
	margin-right: 5px;
}
/*------------end personnel page-----------------------*/