@charset "utf-8";
/* CSS Document */

.home {}

.services h4, .facts h4, .featured h4, .process h4, .reviews h4 {
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 30px;
}
@media screen and (max-width: 420px) { 
	.services h4, .facts h4, .featured h4, .process h4, .reviews h4 {
	font-size: 28px;
	letter-spacing: 4px;}
}

u { border-bottom: 1px solid #B40000;}

a:hover {
	text-decoration: none;
	color: #9E030D;
	-webkit-transition: background-color .4s linear, color .4s linear;
	-moz-transition: background-color .4s linear, color .4s linear;
	-o-transition: background-color .4s linear, color .4s linear;
	-ms-transition: background-color .4s linear, color .4s linear;
	transition: background-color .4s linear, color .4s linear;
}

.home h1 { font-size: 42px; margin: 5px auto; }
main p { font-size: 15px; font-weight: 400; color: #ECECEC; text-align: center; margin-bottom: 30px; }

.home .hor2-shapes-color-16 { margin: 10px auto 6px;}


/* -------------------------------- services ---*/

.services { cursor: default; padding:10px 0px ;}

.services .line-title {
	display: block;
	width: 50%;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 50px;
	border-top: 3px solid #ECECEC;
}
.serv1 {border-color: #C70411;}
.serv2 {border-color: #F45B00;}
.serv3 {border-color: #008CB0;}
.serv4 {border-color: #3FA600;}


.serv1, .serv2, .serv3, .serv4 { 
	border-style: solid;
	border-width: 3px;
	border-radius: 2px;
	-webkit-transition: border-width .4s ease, color 4s ease;
	-moz-transition: border-width .4s ease, color 4s ease;
	-o-transition: border-width .4s ease, color 4s ease;
	-ms-transition: border-width .4s ease, color 4s ease;
	transition: border-width .4s ease, color 4s ease;
}
.serv1:hover, .serv2:hover, .serv3:hover, .serv4:hover { ;
	border-width: 2px;
	-webkit-transition: border-width .4s ease;
	-moz-transition: border-width .4s ease;
	-o-transition: border-width .4s ease;
	-ms-transition: border-width .4s ease;
	transition: border-width .4s ease;
}

.services .wrap-service {
	background-color: #000000;
	opacity: 0.80;
	display: block;
}
.services .wrap-service:hover { 
	opacity: 0.90;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.service-icon {
	margin: 16px auto;
	position: relative;
  	width: 100%;
	overflow: hidden;
}
.services img { margin: auto; }
.services h4 { color: #FFFFFF;}
.services p {
	color: #FFFFFF;
	font-weight: 500;
	text-align: center;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 20px;
}
.services p small {font-size: 13px;}

.services .one_fourth:hover,.services p:hover { color: #FFFFFF;}

.services .line { 
	width: 70%; 
	margin-left: auto; margin-right: auto; 
	margin-bottom: 16px;
	border-style: solid; 
	border-width: 1px;
}


/* -------------------------------- facts ---*/

.facts {}
.facts .one_half { padding: 5px 20px; }
.facts h4 {margin-bottom: 18px;}
.facts h5 {font-size: 16px; font-weight: 500; margin-bottom: 4px;}
.facts p { font-size: 14px; line-height: 17px; margin: 6px 0px 10px;}
.facts ul, .facts li {font-size: 14px; line-height: 17px;}
.facts li {text-indent: 6px;}

/* -------------------------------- featured portfolio ---*/

.featured { padding: 40px 0px 60px; background-color: #14181A;}

.featured h4 {color: #FFFFFF;}

.featured-item .item-wrap {border: 2px solid #363A40;}

.featured-item .item-wrap:hover {
	border: 2px solid #9E030D;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.featured .item-info {
	width: 100%;
	color: #9F9F9F;
	padding:12px 10px;
	height: auto;
	background-color: #14181A;
}
.featured .item-info::after { clear: both; }

.featured .item-text {width: 65%; float: left; padding-left: 5px; line-height: 24px;}

.featured .item-text h5 { font-size: 18px; line-height: 24px; margin: 0px;}

.featured .item-btn {
	width: 35%;
	float: right;
	color: #F4F4F4;
	background-color: #454545;
	border: 1px solid #454545;
	margin: auto auto;
}
.featured .item-btn a:hover {color: #FFFFFF;}
.featured .item-btn:hover {background-color: #171717; color: #FFFFFF; border: 1px solid #555555; }
.featured-item .hvr-rectangle-out::before { background-color: #171717; border: 1px solid #272727;}

a.view-btn {
	width: 90px; height: 28px;
	display: block;
	line-height: 26px;
	padding: 2px 6px;
	margin-left: auto; margin-right: auto;
}

a.view-btn i { 
	display: block; 
	line-height: 26px; 
	width: 22px; height: 22px;
	float: left; 
	margin-top: 2px;
}

a.view-btn span {
	font-family: "Barlow Semi Condensed", "sans-serif";
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	display: inline-block;
	margin-left: 5px;
	vertical-align: 60%;
}

.featured .img-mask-patt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	transition: .5s ease;
	background-image: url(../img/bg/patterns/21.png);
	background-repeat: repeat;
	opacity: 0.05;
	background-blend-mode: multiply;
}

.featured .featured-text p { text-align: center; font-size:16px; margin-top: 30px; color: #B3B3B3;}
.featured .featured-text p a {
	white-space: nowrap;
}

@media screen and (max-width: 760px) { 
	.featured .item-text {width: 65%;} 
	.featured .item-btn {width: 35%; padding-left: auto; padding-right: auto; }
}
@media screen and (max-width: 420px) {
	.featured .item-text {width: 80%;} 
	.featured .item-btn {width: 20%; padding-left: auto; padding-right: auto; }
	a.view-btn span {display: none; font-size: 0px;}
	a.view-btn i {margin-left: auto; margin-right: auto;}
}
	
	
/* -------------------------------- proces ---*/

.process { padding: 40px 0px 50px; cursor: default;}

.process-grid { 
	display: grid; /* or inline-grid */
  	justify-content: center; /* align the whole grid */
	align-content: center; /* vertical align */
	grid-auto-flow: column;
	grid-template-columns: auto auto; 
	grid-template-rows: auto auto auto auto;
	grid-column-gap: 15px; /* for the grid-column-gap and the grid-row-gap */
	grid-row-gap:10px; 
	padding: 20px 0px;
	
}

@media screen and (max-width: 720px) { 
	.process-grid { grid-template: auto auto auto auto auto auto auto auto auto / auto ; grid-gap:5px;} }

.process-text { padding: 15px 0px; }
.process p { text-align: center; font-size:16px; margin: 10px 0px 12px; }
.process .line {
	width: 50%;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	border-top: 2px solid #BCBCBC;
	clear: both;
}
.process-item { padding: 10px; min-height:90px; }

.process-icon { 
	position: relative;
	display: block; 
	float: left; 
	padding: 10px;  
	margin: auto 16px 12px 0px;
	border: 2px solid #A7A7A7 ;
	border-radius: 4px;
}
.process-icon img {width: 60px; height: 60px; opacity: 0.75;}

.process-item-text { align-content: center; position: relative; }

.process-item p { 
	text-align: left; 
	font-size:15px;
	line-height: 18px;
	margin: 6px 0px 6px;
	padding-top: 6px;
}
.process-item b {
	text-align: left;
	font-size: 18px;
	line-height: 18px;
	font-weight: 500;
	margin-bottom: 6px;
	letter-spacing: 1px;
	border-bottom: 2px solid;
	padding-bottom: 2px;
	color: #2D6382;
}
.process-item b small {
	text-align: left;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: normal;
}

.process .btn {
	position: relative;
	font-size: inherit;
	line-height: inherit;
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	font-family: "Barlow" , sans-serif;
	border: 1px solid;
	padding: 2px 6px 2px;
}

.process .red {color:#A72828;}
.process .lila {color: #782A93;}
.process .blue-md {color: #014884;}


@media screen and (min-width: 720px) and (max-width: 840px){ 
.process-icon img {width: 50px; height: 50px;}
.process-item b {font-size: 16px;letter-spacing: normal;} 
.process-item b small {font-size: 12px;}
.process-item p {font-size: 14px;}
}

@media screen and (max-width: 440px){ 
.process-icon img {width: 50px; height: 50px;}
.process-item b {font-size: 16px;letter-spacing: normal;} 
.process-item b small {font-size: 12px;}
.process-item p {font-size: 14px;}
}


/* -------------------------------- reviws, testimonials ---*/

.reviews {
	padding: 40px 0px 60px;
	background-color: #F1F1F1;
	border-top: 2px solid #E7E7E7;
}

.reviews .client { padding: 30px 30px; }
.reviews .client img { float: left; margin: 0 10px 15px 0; height: 46px; width: 46px; opacity: 0.8; }
.reviews .client-name { float: left; }
.reviews .client h5 { margin: 0 0 3px 0; font-size: 22px;}
.reviews .client small {font-size: 14px; font-weight: 500;}
.reviews .client a {font-size: 14px; color: #9E030D;}
.reviews .client .line35-thin { margin-top: 5px;}

.reviews .owl-carousel .owl-stage-outer { 
	background-color: #FBFBFB;
	border: 2px solid #E7E7E7;
	padding: 10px;
}

.owl-carousel .owl-dots { text-align: center; margin-top: 15px;}

.owl-carousel .owl-dots button.owl-dot span {
	display: inline-block;
    background: none;
    border: 2px solid #4F4F4F;
    padding: 0 !important;
    width:12px;
	height:12px;
	margin:8px;
    transition: all 500ms ease;
}
.owl-carousel .owl-dots button.owl-dot.active span {background: #4F4F4F;}



/* FancyBox
-----------------------------------------------------------------*/

.compensate-for-scrollbar { margin-right: 20px;}
.fancybox-slide--iframe .fancybox-content { background: transparent;}
.fancybox-slide--iframe {
	width  : 100%;
    height : 100%;
    max-height: calc(100vh);
	padding: 10px;
}
.fancybox-slide--iframe .fancybox-content {
    width  : 100%;
    height : 100%;
    max-height: calc(100vh);
    margin: 0;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: opacity .3s;
	background-color: #060808;
	overflow: visible;
}
@media only screen and (max-width: 800px) {
	.fancybox-slide--iframe .fancybox-content {max-height: 100%; max-width: 100%; }
	.fancybox-slide { padding: 5px;}
}

.fancybox-slide.watermark .fancybox-spaceball {
	background-image: url(../img/me/patt/5cf89c0c-ae97-4748-ad96-e429745ac0ac.png);
	opacity: 0.05;
	background-size: auto;
	background-repeat: repeat;
}
.fancybox-button { width: 46px; height: 46px; top: 30; right: 30px; padding: 5px;}
.fancybox-close-small { padding: 6px; right: -10px; top: -44px;}

/* ----------------------------------------------- end FancyBox */