/*en*/
@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 400;
  src:  url("font-files/Inter-UI-Regular.woff?v=2.1") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 400;
  src:url("font-files/Inter-UI-RegularItalic.woff?v=2.1") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 500;
  src: 
       url("font-files/Inter-UI-Medium.woff?v=2.1") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 500;
  src: 
       url("font-files/Inter-UI-MediumItalic.woff?v=2.1") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 700;
  src: 
       url("font-files/Inter-UI-Bold.woff?v=2.1") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 700;
  src: 
       url("font-files/Inter-UI-BoldItalic.woff?v=2.1") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 900;
  src: 
       url("font-files/Inter-UI-Black.woff?v=2.1") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 900;
  src:
       url("font-files/Inter-UI-BlackItalic.woff?v=2.1") format("woff");
}
.wtf-menu ul.submenu {
    width: 360px;}
body {
	  font-family: 'Inter UI';
  font-style:  normal;
	}
	
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Inter UI";
    font-weight: 700;
	text-transform: capitalize;
}
ul.wtf-menu li a {
    padding: 0px 10px;
    font-family: "Inter UI";
}
.header {
    float: left;
    margin-left: 0px;
    margin-right: inherit;
	height:60px;
}
.header .grid-x{height:60px;}
.logo {
	float:left;
    margin-left: 45px;
	margin-right:inherit;
}
ul.wtf-menu {
    float: left;
    margin-left:0px;
	margin-right:inherit;
	    padding: 0;}
ul.wtf-menu li {float:left;}
.dl-menuwrapper li > a:after {
right: 10px;
left: inherit;}
.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {content: "\f0d9";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
ul.wtf-menu li.parent:after {
    right: -1px;
	left:inherit;
}
ul.wtf-menu li a {
    font-size: .9rem;
    letter-spacing: .7px;
    font-weight: 400;
    text-transform: capitalize;}
.wtf-menu ul.submenu {
    left: 0px;
	right:auto;}
.contact .fa {
    margin-right:5px;
    margin-left: 80px;
    float: left;
    direction: ltr;
    line-height: 60px;
}
.contact {
	margin-right:inherit;
    margin-left: -50px;
}
.contact .language {
	margin-right:inherit;
    margin-right: -20px;
	float:right;
}
.header .contact span {
    margin-left: -10px;
        display: inline-block;}
.contactus .contact li {
    float: left;
    direction: ltr;
    text-align: left;
    margin-left: 0px;
    margin-right: 0px;}
.contactus .contact .fa {
    color: #33bcdc;
    margin-right: 10px;
    margin-left: 0px;
    line-height: 30px;
}
.contact-form h4 {
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 700;
    font-family: "Inter UI";
}
.contactus p {float: left;
margin-top:10px;
    font-size: .9rem;
    font-weight: 500;
    font-family: "Inter UI";}
.contactus .contact li {
    font-size: .9rem;
    font-weight: 500;
    font-family: "Inter UI";
	line-height:30px;
}
.postcode {
    margin-left:-20px;
	margin-right:inherit;
	float:left;
	font-size:.8rem;
	text-transform: capitalize;
}
/*home*/
.slide_content h1 {    font-size: 1.8rem;
    font-weight: 700;
    font-family: "Inter UI";}
.slide_content p {    font-size: 1rem;
    font-weight:500;
    font-family: "Inter UI";}
.cbp-bicontrols {
right:inherit;
    left: 2%;
}
.slide_content {
    right: 0%;
	left:inherit;
}
.slide_content h1 {
    margin-left: 20%;
	margin-right:inherit;

}
a.close {
    right: 0px;
	left:inherit;}
.project h2 span {margin:-1.5% -2% 0% 15%;}
.owl-theme .owl-nav {
    margin-right: -35%;
    float: right;
	margin-left:inherit;
}
.client h2 span {margin:-5% 25% 3% 33%;}
.client h2 {
    margin-left: 20px;
	margin-right:inherit;}
.breadcrumbs {margin-bottom: .01rem;}
.breadcrumbs li {float:left;}
.breadcrumbs li { font-size: 0.7rem;}
.titlebar .title {
    float: right;
    font-weight: 500;
    font-family: "Inter UI";
	    line-height: 100px;
}
.titlehead_2 h2 span:after { left: 15px;
right:initial;}


/*feedback-box*/
button#feedback {
  right: 0;
  left:initial;}
.feedback-box {
  z-index: 999;
  position: fixed;
  bottom: 0;
  right: 0;
   left:initial;
  display: inline-block;
  width:28%;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  pointer-events: none;}
.feedback-box .content {
  height:300px;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  background: white;
  border: 1px solid #ddd;
  border-right: none;
  border-bottom: none;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -moz-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -o-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -webkit-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);}
.feedback-box.show p {
	float:left;
    font-size:.9rem;
    font-weight: 500;
    font-family: "Inter UI";
	    line-height: 1.4;
    margin-top: 10px;
	}
.feedback-box 	[type=text], .feedback-box [type=password]  {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.2375rem;
    margin: 0 0 .8rem;}
.feedback-box .confirm {
  z-index: 2;
  color: #fff;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #33bcdc;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
    text-align:center;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -o-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -webkit-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);}
.feedback-box .confirm h1 {
  text-align: center;
  font-weight: 600;
  Text-transform: uppercase;
  font-size: 70px;
  margin-top: 60px;
  line-height: 1.2;}
  .feedback-box .confirm h2 {  font-size:28px; text-align:center;}
.feedback-box .confirm h1 i { vertical-align: 3px; }
.feedback-box .confirm h1 span {
  display: block;
  font-size: 40%;
  font-weight: 300;
  text-transform: none;
  text-align:center;
  font-size:24px;}
.feedback-box.show { pointer-events: auto; }
.feedback-box.show .content {
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  padding:0px;}
.feedback-box.show-confirm .confirm {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;}
.feedback-box.error input { border-color: red; }
.feedback-box header {
    font-size:1.1rem;
    font-weight: 500;
    font-family: "Inter UI";
	text-transform: capitalize;
  border-bottom: 1px solid #ddd;}
.feedback-box section {
  padding: 10px 30px;
  overflow: hidden;
  -moz-transition: all ease;
  -o-transition: all ease;
  -webkit-transition: all ease;
  transition: all ease;}
.feedback-box section input {
  z-index: 0;
  width: 100%;
  margin-bottom: 10px;
  padding:5px 10px;
  font-size: 15px;
  line-height: 1;
  resize: none;
  color: #333;
  border: 1px solid #ddd;
  height:35px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;}
.feedback-box section input:focus {
  outline: none;
  border: 1px solid #999;}
.feedback-box section button {
  display: block;
  padding: 12px;
  text-align: center;
  width: 100%;}
  
/*titlehead*/
.titlehead_2 h2 {
    font-size:2.5rem;
    font-weight: 700;
    font-family: "Inter UI";
}
.titlehead_2 h2 span:after {
   font-size: 3.5rem;
}
/*footer-nav*/
.footer-nav p {
    font-weight: 300;
    font-size: 1.1rem;
    padding-top: 10px;
    font-size: .75rem;
    font-weight: 300;
    font-family: "Inter UI";
        letter-spacing: -1px;
}
#footer p {letter-spacing: -1px;}
/*content*/
.border {
    direction: ltr;
	    margin-bottom: 5px;
}

p {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Inter UI";
}
.content-pg h3 {
    font-size: 2rem;
    font-weight: 700;
    font-family: "Inter UI";
}
.content-pg  li {
	font-size: .9rem;
    font-weight: 700;
    font-family: "Inter UI";
	line-height: 2px;
	margin-left:20px;
	}
.p_about h2 {     font-size:1.5rem;
    font-weight: 700;
    font-family: "Inter UI";}
/*ser*/
.ser h4 {
    font-size:1.1rem;
    font-weight: 700;
    font-family: "Inter UI";
}
.ser p {
	font-size:.9rem;
    font-weight: 700;
    font-family: "Inter UI";
	}
/*pro-item*/
.pro-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Inter UI";}
.pro-content p {
	font-size:.9rem;
    font-weight: 700;
    font-family: "Inter UI";
    line-height: 18px;
    text-align: justify;
    height: 130px;
    overflow: hidden;
	}
/*pagination*/
/*project*/
.paging-nav li {float:left;}
#gallery li {float:left;}
.paging-nav .active {float:left;}
.paging-nav ol, .paging-nav ul {padding-left:20px;}
.paging-nav ol li, .paging-nav ul li {margin-left:5px;}
.effect-julia h2 {float: left;     text-align: left;}
figure.effect-julia h2 {margin-left: 0px; font-size: .9rem;
    font-weight: 500;
    font-family: "Inter UI";}
.pro_container .pro_con .grid figure.effect-julia .pro_name {float: right;}
figure.effect-julia p {
    -webkit-transform: translate3d(360px,0,0);
    transform: translate3d(360px,0,0);
}
figure.effect-julia p { border-radius: 0px 0px 0px 5px;}
.project figure.effect-julia .pro_name { float: right;}
.dl-menuwrapper {float: left;}

/*project*/
.owl-carousel {
    float: right;
text-align: center;}
@media (max-width:1350px) {.phone {margin-left:10px;}
	.postcode {
    margin-left: -10px;
    margin-right: inherit;
    float: left;
}}
@media (max-width:1260px) {.contact .fa {
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 80px;
}
.contact .language {
    margin-right: -20px;
    float: right;
    margin-left: -20px ! important;
}
.feedback-box { width:30%;}
[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea {
    height: 2.2em;
margin: 0 0 .7rem;}
	}
@media (max-width:1200px)  {
	.contact span {
    margin-left: 10px;}
    .contact span.ph_number { display:none;}
        .contact span.postcode{ display:none;}  
/*feedback*/
.feedback-box { width:30%;}
.phone { display:none;}
ul.wtf-menu {
    margin-left: 50px;
}
.home #footer {
    top: 91%;
}
.home .social-icons ul {float: left;}

}
button#feedback {font-size: 14px;}
@media (max-width:1024px) { 
.demo-4 .dl-menuwrapper button {
    margin-left: 35px;
}
.phone { display: inline;}
.contact .postcode {
    margin-left:70px ! important;
    margin-right: initial ! important;
}
.dev_company{    display: none;}
/*product*/
.product_pg { 
width : 85%;
margin: 0 auto;
}
.contact span.ph_number {
    display: inline-block;
}

#footer p { font-size: 1em;line-height:30px; margin-top:5px;}
.ph_number { display:none;} 
} 

  @media (max-width:900px)  {
.contact .language {float: right;     margin-right: -20px;}
/*feedback*/
.feedback-box { width:35%;}
 .dev_company { display:none;}

.logo {
    margin-right: 25px;
    margin-left: inherit;
}

.demo-4 .dl-menuwrapper button {
    margin-left: 5px;
}
.social-icons {
    display: inherit;
}
}

  @media (max-width:779px) 
  {
      .home .social-icons ul {
    float: left;
}
      button#feedback {
    right: 0;
    font-size: 12px;}
.contact .postcode {
    margin-left: 50px ! important;
    margin-right: initial ! important;
}
	  .contact span {
    margin-left:5px;
}
.contact span {
    margin-right: 10px;
}
.contact .fa {
    float: left;
    direction: ltr;
    line-height: 60px;
    margin-right: 0px;
    margin-left: 20px;
    padding-left: 50px;
}
.dl-menuwrapper {float: left;} 
.feedback-box.show p {
    font-size: .84rem;
    line-height: 1.3;
    margin-top: 0px;
}


/*feedback*/
.feedback-box { width:40%;}
.feedback-box .content_box {
padding: 10px 20px;}
/*product*/
.product_pg { 
width :100%;
margin: 0 auto;
}

  }

 @media (max-width:640px) 
 {
	       .home .social-icons ul {
    float: inherit;
}
	 .content-pg h3 {font-size:1.5em;}
.contact .fa {
    margin-right: 0px;
    margin-left: 30px;
}
	.demo-4 .dl-menuwrapper button {
    margin-left:40px;
    margin-right:20px;
}
.titlebar .title { line-height:30px;}
.contact span {
    margin-left:5px;
	margin-right:0px;
}
.contact .language {
    margin-right:-35px;
    float:right;
}
/*feedback*/
.feedback-box { width:60%;}
.feedback-box header {
    font-size: .95em;
    text-align: left;
    padding-left: 20px;
}
.home #footer {
    top:80%;
}
/*product*/

.product_pg { 
width : 75%;
margin: 0 auto;
}
[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea {
    height:2.3em;
	font-size:.95em;}
.feedback-box .content_box {padding: 10px 15px;}

.feedback-box.show p {
    margin-top:.1em;
    margin-bottom:.8em;
	font-size:.9em;
	line-height:1.4;}
.slide_content h1 {
    font-size: 1.4rem;
}
#footer p {margin-top:0px;}
button#feedback {top:92%;     font-size: 12px;}
}
 @media (max-width:480px)
{
/*feedback*/
.feedback-box {width:75%;}
.feedback-box header {
    font-size: .8rem;
    text-align: left;
    padding-left: 20px;
}
.dev_company {  display: inherit;}
.dev_company p {width: 100%;}
[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea {
    height:2.5em;
	font-size:.9rem;}
.feedback-box .content_box {padding: 10px 15px;}

.slide_content h1 { font-size: 1.2em; line-height:inherit;}
button {padding:10px 20px; font-size:.9em;}
.titlehead_2 h2 { font-size: 1.5em;}
.titlehead_2 h2 span:after {font-size:1.8em;}
.titlebar .title {
    float: inherit;
    text-align: center;}
	
/*product*/
.product_pg { 
width : 85%;
margin: 0 auto;
}
.dev_company {display:none;}


}


 @media (max-width:360px){
.feedback-box.show p {font-size: .8rem;}	

.contact span {
    margin-right: 50px;
    display: none;}
.contact .language {
    margin-left: 0px;
    display: block;}
	
/*product*/
.product_pg { 
width :100%;
margin: 0 auto;
}
 .contact span.ph_number { display:none;} 
	}