@font-face
{
	font-family: 'hr';
	src: url('../fonts/HelveticaNeueLT.otf');
}

@font-face
{
	font-family: 'hb';
	src: url('../fonts/HelveticaNeueLT-B.otf');
}
*{
    margin: 0;padding: 0;outline: 0;
}
.ltr{
    direction: ltr;
}
body{
    direction: rtl;
    font-family: "hr";
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-family: "hb";
}
.pserv-item {
    transition: all .5s;
}
.pserv-item-act {
    padding: 0;
    margin: 0;
    width: 0;
    overflow: hidden;
}
header{
    background: #fff url('../images/hbg.png') no-repeat 0% 0%;
    background-size: 100% 100%;
    height: 800px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.navbar{
    padding: 100px 0 100px 0;
}
.nav-social a{
    display: inline-block;
    padding: 8px 6px 6px;
    position: relative;
    margin: 0 2px;
    transition: all .5s;
}
.nav-social a i{
    color:#EE3F5A;
    font-size: 28px;
    transition: all .5s;
}
.nav-social a:hover i{
    transform: scale(2.2) rotate(-10deg);
    color:rgb(150, 41, 58);
}
.logo{
    position: relative;
    top:-20px;
}
.logo img{
    width:110px
}
nav li{
    list-style: none;
    display: inline;
}
nav li a {
    margin: 1px 13px 10px;
    color: #333366;
    font-size: 22px;
    display: inline-block;
    position: relative;
    font-family: hr;
    transition: all .5s;
}
nav li a:hover{
    color:#EE3F5A;
}
.header-view img{
    width:600px;
    height: auto;
}
.header h3{
    color:#333366;
    font-size: 40px;
    margin-bottom: 20px;
}
.header-r {
    position: relative;
    right: 60px;
}
.header a{
    background-color: #EE3F5A;
    color:#fff;
    font-size: 23px;
    font-family: hb;
    padding: 10px 25px;
    display: inline-block;
    border-radius: 50px;
    margin-top:20px;
    transition: all .5s;
}
.header a:hover{
    background-color: #333366;
}
.htitle{
    font-size: 32px;
    font-family: hr;
}
.htitle span{
    color:#EE3F5A;
    font-size: 46px;
    font-family: hb;
}
h3.htitle2 {
    font-size: 45px;
}
.about-us,
.services,
.portfolio,
.clients,
.teamwork{
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}
.about-us-head,
.services-head,
.portfolio-head,
.clients-head,
.teamwork-head{
    color:#EE3F5A;
    font-size: 43px;

    position: relative;
    margin: 40px 0;
}
.about-us-head:after,
.services-head:after,
.portfolio-head:after,
.clients-head:after,
.teamwork-head:after{
    position: absolute;
    content: "";
    width: 300px;
    height: 1px;
    background:#EE3F5A;
    top:50%;
    right: 20%;
}
.portfolio_page .portfolio-head{
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}
.portfolio_page .portfolio-head:after{
    position: absolute;
    content: "";
    width: 50px;
    height: 3px;
    background: #EE3F5A;
    bottom: -80px;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 40px;
}
.portfolio_page .portfolio-head a{
    position: absolute;
    right:0;
    top:0;
    display: inline-block;
    font-size: 18px;
    color:#EE3F5A;
    transition: all .5s;
}
.portfolio_page .portfolio-head a i{
    position: relative;
    top:3px;
    right:0;
    transition: all .5s;
}
.portfolio_page .portfolio-head a:hover{
 color:#999;   
}
.portfolio_page .portfolio-head a:hover i{
    right:-5px;
}
.about-us{
    background: transparent url('../images/bgh.png') no-repeat 100% 100%;
    background-size: 100% 100%;
}
.services{
    background: transparent url('../images/bgm.png') no-repeat 100% 100%;
    background-size: 100% 100%;
}
.portfolio{
    background: transparent url('../images/bgf.png') no-repeat 0 0;
    background-size: 91%;
}
.portfolio_page{
    background-image: none !important;
    min-height: 1000px;
    padding-bottom: 500px;
}
.portfolio_single{
}
.about-us-right h3{
    color:#333366;
    margin-top: 50px;
    font-size: 50px;
    margin-bottom: 30px;
}
.about-us-right p {
    font-size: 22px;
    color: #999;
    text-align: justify;
    line-height: 37px;
}
.about-us-left{
    text-align: center;
}
.about-us-left img{
    width: 250px;
    height: auto;
    margin-top: 50px
}
.services-left{
    text-align: center;
}
.services-left img{
    width:500px;
    margin-top: 60px;
}
.services-tab{
    margin-top: 50px;
}
.services-tab-item{
    border:1px solid #ddd;
    background-color: #fff;
    margin: auto;
    margin-bottom:25px;
    padding: 10px;
    width:80%;
    overflow: hidden;
    box-shadow: 0 0 10px #ddd;
    padding-bottom: 20px;
    transition: all .5s;
}
.services-tab-item.stab-active{
    background: #EE3F5A;
    color:#fff;
}
.services-tab-item.stab-active p,
.services-tab-item.stab-active a{
    display: block;
}

.services-tab-item img {
    width: 40px;
    height: auto;
    float: right;
    position: relative;
    top: 12px;
    margin: 5px 10px;
    filter: contrast(0.5);
}
.services-tab-item.stab-active img {
    filter: brightness(100) !important;
}
/*
.services-tab-item.stab-active i.stab1{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}
.services-tab-item.stab-active i.stab2{
    background-image: url('../images/icon2.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}
.services-tab-item.stab-active i.stab13{
    background-image: url('../images/icon1.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}
.services-tab-item i.stab1{
    background-image: url('../images/icon3g.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}
.services-tab-item i.stab2{
    background-image: url('../images/icon2g.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}
.services-tab-item i.stab13{
    background-image: url('../images/icon1g.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px ;
}*/
.services-tab-body{
    float: right;
    width: 80%;
    margin-right: 10px;
}
.services-tab-body h3{

    margin-bottom: 10px;
}
.services-tab-body p{
    padding-right: 10px;
    display: none;
}
.services-tab-body a{
    display: block;
    background: #fff;
    padding: 10px ;
    text-align: center;
    font-family: hb;
    font-size: 16px;
    border-radius: 50px;
    margin: 20px 30px 10px;
    display: none;
    color: #EE3F5A;
    border:1px solid transparent;
    transition: all 1s;
}

.services-tab-body a:hover{
    color:#fff !important;
    border-color:#fff;
    box-shadow: inset 0px 0px 0px 100px #EE3F5A;
}
footer{
 
    position: relative;
    background:  url('../images/fbg.png') no-repeat 0 0;
    background-size: 100% auto;
}
footer:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 70%;
    width: 100%;
    z-index: -1;
    background: #F4F4F4;
}
.copyright{
    text-align: center;
    margin: 50px 0 0;
}
.copyright a{
    color:#222;
    display: block;
    font-size: 16px;
}
.copyright a span{
    transition: all .5s;
}
.copyright a:hover span{
    color:#EE3F5A;
}
.footer-contact-form input{
    padding: 10px;
    margin-bottom: 5px;
    width:100%;
    background: #ddd;
    position: relative;
    border: 1px solid #ddd;
    transition: all .5s;
}
.load-icon{
    display: none;
    background: rgba(247,247,247,0.5) url('../images/load.gif') no-repeat 50% 20%;
    width:100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.footer-contact-form textarea{
    padding: 10px;
    margin-bottom: 5px;
    width:100%;
    background: #ddd;
    border: 1px solid #ddd;
    resize: none;
    transition: all .5s;
}
.footer-contact-form input:focus,
.footer-contact-form textarea:focus{
    background-color: #fff;
    color:#000;
}
.footer-contact-form button{
    background-color:#EE3F5A;
    display: block;
    border:1px solid #EE3F5A;
    color:#fff;
    width:100%;
    border-radius: 50px;
    padding: 10px;
    font-family: hb;
    transition: all .5s;
}
.footer-contact-form button:hover{
    box-shadow:inset 0 60px 0 0 rgb(153, 37, 54);
}
.footer-contact-form .col-xs-12{
    padding: 4px;
}
.footer-address-bar{
    text-align: center;
    overflow: hidden;
    margin-bottom: 10px;
}
.footer-address-bar span{
    color:#EE3F5A;
    border: 1px solid #EE3F5A;
    width: 40px;
    display: inline-block;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    padding-top: 7px;
    margin-bottom: 10px;
    transition: all .5s;
}
.footer-address-bar span i{
    display: inline-block;
    position: relative;
    transition: all .5s;
}
.footer-address-bar:hover span{
    transform: rotate(360deg);
    background: #fff;
}
.footer-address-bar p{
    color:#666;
}
.footer-left{
    overflow: hidden;
    border-right: 1px solid #ddd;
}
.footer-map{
    background: #eeebeb;
    width:90%;
    height: 280px;
    border:1px solid #ddd;
    margin: 0 auto;
}


.portfolio-filter-head-items {
    text-align: center;
}
.portfolio-filter-body{
    overflow: hidden;
    margin-bottom: 20px;
}
.portfolio-filter-body-item {
    position: relative;
    margin: 20px 0 ;
    transition: all .5s;
    top:0;
    box-shadow: 0 3px 5px 1px #ddd;
    padding-bottom: 15px;
}
.portfolio-filter-body-item img{
    width:100%;
    height: 200px;
}
.portfolio-filter-body-item i{
    transition: all 1.5s;
}
.portfolio-filter-body-item-img{
    position: relative;
}
.portfolio-filter-body-item-img a {
    position: absolute;
    right: 0;
    text-align: center;
    opacity: 0;
    left: 0;
    transition: all .5s;
    background: rgba(0,0,0,0.4);
    top: 0;
    height: 100%;
    width: 100%;
    padding-top: 25%;
}
.portfolio-filter-body-item:hover i{
    color: #ee3f5a;
    transform: scale(1.5);
}
.portfolio-filter-body-item:hover{
    box-shadow: 0 3px 10px 1px #ddd;
    top:-5px;
}
.portfolio-filter-body-item:hover a{
    opacity: 1;
}
.portfolio-filter-body-item a i{
    color:#fff;
    font-size: 22px;
    transition: all 1s;
}
.portfolio-filter-body-item > a{
    display: block;
}
.portfolio-filter-body-item > a span{
    display: inline-block;
    border: 1px solid #ddd;
    color: #999;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 24px;
    margin-right: 15px;
}
.portfolio-filter-body-item > a h3{
    color: #ee3f5a;
    font-size: 16px;
    margin: 10px 15px 16px 0;
    line-height: 26px;
}
.portfolio-filter-head{
    margin: 20px 0 40px;
    overflow: hidden;
}
.portfolio-cons-projects{
    background: #ee3f5a;
    color:#fff;
    display: block;
    padding: 10px;
    border-radius: 50px;
    font-size: 18px;
    text-align: center;
    position: relative;
    transition: all .5s;
    font-family: hb;
}
.portfolio-cons-projects:hover{
    background-color: #333366;
}
.portfolio-cons-projects:after{
    content: "";
    position: absolute;
    top:2px;
    left:3px;;
    width:98%;
    height: 91%;
    border: 2px solid #fff;
    border-radius: 50px;
}
.portfolio-filter-head-items a{
    display: inline-block;
    margin: 0 10px;
    color: #999;
    font-size: 14px;
    border: 1px solid #999;
    padding: 7px 35px 10px;
    border-radius: 50px;
    transition: all .5s;
}
.portfolio-filter-footer{
    text-align: center;
    overflow: hidden;
    clear: both;
}
.portfolio-filter-footer a{
    display: inline-block;
    background: #ee3f5a;
    color:#fff;
    font-size: 23px;
    padding: 10px 60px 16px;
    border-radius: 50px;
    transition: all .5s;
}
.portfolio-filter-footer a:hover{
    background-color: #333366;
}
.client-item{
    box-shadow: 0 10px 10px 0 #ddd;
    width: 180px;
    height: 180px;
    margin: 30px 15px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow:hidden;
    transition: all .5s;
}
.client-item:hover img{
    filter: none;
}
.client-item:hover{
    border: 3px solid #ee3f5a;
    transform: scale(1.1, 1.2);
}
.client-item img{
    width:90px;
    height:auto;
    filter: grayscale(1);
    position: absolute;
  top: 0; 
  bottom: 0;
  right:0;
  left:0;
  margin: auto;
    transition: all .5s;
}
.owl1 .owl-buttons{
    text-align: center;
    margin: 50px 0 30px;
}
.owl1 .owl-buttons div{
    display: inline-block;
    margin: 0 30px;
    font-size: 22px;
    color:#ee3f5a;
    position: relative;
}
.owl1 .owl-buttons .owl-prev:after{
    content: "";
    position: absolute;
    width:30px;
    height: 6px;
    background: #ddd;
    top:37%;
    border-radius: 50px;
    left:27px;
}
.twork-item{
    box-shadow: 0 10px 10px 0 #ddd;
    width:82%;
    height: 380px;
    overflow: hidden;
    margin: 20px auto;
    text-align: center;
    position: relative;
    top:0;
    transition: all .5s;
}
.twork-item:hover  h3{
    color: #fff;
}
.twork-item:hover{
    background: #333366;
    border: 1px solid #333366;
    top:-10px;
}
.twork-item img{
    width: 100%;
    height: 230px
}
.twork-item h3{
    color:#333366;
    transition: all .5s;
}
.twork-item h4{
    color:#999;
    margin-bottom: 20px;
    font-size:13px;
}
.twork-social{
    border-top:1px solid #ddd;
    width: 70%;
    margin: auto;
    padding-top: 15px;
}
.twork-social a{
    color:#333366;
    font-size: 22px;
    margin: 0 6px;
    transition: all .5s;
    display: inline-block;
}
.twork-item:hover .twork-social a{
    color:#fff;
}
.twork-social a:hover{
    transform: scale(1.3);
}
.owl2 .owl-pagination{
    text-align: center;
    overflow: hidden;
    margin: 35px 0;
    width:100%;
    clear: both;
}
.owl2 .owl-pagination div{
    background: rgb(141, 140, 140);
    width:10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
}
.owl2 .owl-pagination div.active{
    background: #222;
}
.pfh_act{
    background: #333366;
    color:#fff !important;
}
.portfolio-filter-head-items a:hover{
    background: #ee3f5a;
    color:#fff !important;
    border-color:#fff;
}
.up{
    position: fixed;
    bottom: 100px;
    right:50px;
    background: #ee3f5a;
    width:60px;
    height: 60px;
    border-radius: 50px;
    font-size: 40px;
    display: none;
    z-index: 9999;
    transition: all .5s;
    text-align: center;
    color: #fff;
    font-size: 22px;
    padding-top: 14px;
}
.up:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 8px;
    background: #ee3f5a;
    bottom: -16px;
    left: 18px;
    border-radius: 50px;
    transform: rotate(-35deg);
}
.up i{
    color:#fff;
    font-size: 26px;
}
.up:hover{
    font-size: 26px;
    padding-top: 5px;
}
.closenav{
    display: none;
}


/**
============================================
======== Orders Page
============================================
*/
.order-header{
    background-color: #ee3f5a;
    min-height: 100px;
    padding-top: 30px;
    margin-bottom: 30px;
}
.order-header-logo img{
    width:90px;
}
.order-header-social{
    text-align: center;
}
.order-header-social a{
    color: #fff;
    display: inline-block;
    margin: 15px 10px 0;

    transition: all .5s;
}
.omore-info button,
.order-services button{
    width:100%;
    border: 1px solid #ddd;
    padding: 10px;

    transition: all .5s;
}
.omore-info button:hover,
.order-services button:hover{
    background-color: #ee3f5a;
    color:#fff;
}
.order-header-social a i{
    font-size: 24px;
    display: inline-block;
    transition: all .5s;
}
.order-header-social a:hover i{
    transform: rotate(360deg) scale(1.4);
}
.order-header-nav a{
    display: inline-block;
    padding: 20px 30px;
    font-size: 18px;
    border-radius: 10px 10px 0 0;
    margin: 0 5px;
    position: relative;
    top:5px;
    transition: all .5s;
    color:#fff;
}
.order-header-nav a i{
    margin-left: 7px;
}
.order-nav_active,
.order-header-nav a:hover{
    background-color: #fff;
    color: #ee3f5a !important;
}
.personal-info,
.omore-info{
    overflow: hidden;
    padding: 10px 0;
}
.personal-info-head,
.omore-info-head{
    background-color: #f5f5f5;
    text-align: center;
    font-size: 16px;
    padding: 15px;
    color:#999;
    margin-bottom: 20px;
}
.personal-info-item{
    position: relative;
}
.personal-info-item i{
    position: absolute;
    right:10px;
    top:15%;
    color:#cccccc;
    font-size: 18px;
    transition: all .5s;
}
.personal-info-item input,
.omore-info-item textarea{
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    text-indent: 25px;
    border: none;
    border-bottom: 1px solid #ddd;
    color:#000;
    transition: all .5s;
}
.omore-info-item textarea{
    width:100%;   
}
.personal-info-item input::placeholder,
.omore-info-item textarea::placeholder{
    color:#ccc;
}
.personal-info-item input:focus + i{
    color:#ee3f5a;
}
.personal-info-item input:focus{
    border-color:#ee3f5a;
    color:#000;
}
.omore-info-item textarea{
    resize: none;
    border: 1px solid #ddd;
    height: 100px;
}
.personal-info-item button{
    background-color: #ee3f5a;
    color:#fff;
    border:none;
    width: 200px;
    padding: 10px;
    margin: 40px auto 10px;
    display: block;

    transition: all .5s;
}
.personal-info-item button:hover{
    background: #666;
}
.order-services{
    background-color: #f7f7f7;
    padding: 10px 0;
}
.order-services-head{
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    padding: 15px;
    color:#999;
    margin-bottom: 5px;
}
.order-services-co{
    margin-bottom: 10px;
    overflow: hidden;
}
.order-services-item h3{
    color: #ee3f5a;

    margin-bottom: 30px;
    margin-right: 20px;
    font-size: 16px;
    position: relative;
}
.order-services-item h3:before{
    content: "";
    width:16px;
    height: 16px;
    display: inline-block;
    background-color: #ee3f5a;
    border-radius: 50%;
    position: relative;
    top:6px;
    right:-10px;
    border: 2px solid #fff;
    box-shadow: 0px 0px 0px 3px #ee3f5a;
}
.order-services-item-checkbox label{
    position: absolute;
    top:0;
    padding-top: 10px;
    right:0;
    width:100%;
    height: 100%;
    text-align: center;
}
.order-services-item-checkbox {
    background-color: #fff;
    border:1px solid #ddd;
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    width:100%;
    color:#999;
    text-align: center;
    height: 45px;
    position: relative;
}
.order-services-item-checkbox input{
    position: absolute;
    width:110%;
    height: 100%;
    margin: 0;
    top:0;
    right:0;
    display: none;
}
.order-services-item-checkbox input:checked{
    display: block;
}
.order-services-item-checkbox input:checked:after{
    content: "";
    position: absolute;
    width:100%;
    height: 100%;
    background: #ee3f5a;
    top:0;
    right:0;
}
.order-services-item-checkbox input:checked + label{
    z-index: 1;
    color:#fff;
}
.success-popup{
    position: fixed;
    top:0;
    right:0;
    width:100%;
    height: 100%;
    background: rgba(0,0,0, 0.5);
    display: none;
    z-index: 9999;
}
.success-popup-co{
    background: #fff;
    width:400px;
    margin: 30px auto;
    padding: 40px 15px;
    border-radius: 5px;
    text-align: center;
}
.success-popup-co img{
    width:100px;
    height: auto;
}
.success-popup-co a{
    background: #ee3f5a;
    color:#fff;
    font-family: hb;
    padding: 10px 25px;
    display: inline-block;
    transition: all .5s;
}
.success-popup-co a:hover{
    background: #666;
}
.success-popup-co h3{
    color: #ee3f5a;
    font-size: 14px;

}
.success-popup-co p{
    color:#999;
    margin-bottom: 25px;
}
.order-step-hidden{
    display: none;
}
.order-step-active{
    display: block;
}
.order_header{
    background-image: none;
    height: auto;
    background: #F5F5F5;
    position: relative;
    overflow: visible;
}
.order_header:after{
    content: "";
    border-top:30px solid #F5F5F5;
    border-bottom:30px solid transparent;
    border-right:30px solid transparent;
    border-left:30px solid transparent;
    position: absolute;
    bottom: -60px;
    right:0;
    left:0;
    margin: auto;
    width:60px;
}
.order_header .navbar{
    padding: 60px 0 0px;
}
.p-main-titl{
    color:#EE3F5A;
    text-align: center;
    font-size: 24px;
    margin-bottom: 50px;
}
.p-main-img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.p-title-desc{
    margin: 30px 0;
}
.p-title-desc h3{
    color:#EE3F5A;
    margin-bottom: 10px;
}
.p-title-desc p{
    font-size: 14px;
    line-height: 26px;
    color: #999;
}
.p-thump-splited{
    margin: 70px 0;
}
.p-thump-splited-item{
    overflow: hidden;
}
.p-thump-splited-item img{
    height: 250px;
    width:100%;
}
.p-thump-splited-item h3{
    color:#EE3F5A;
    font-size: 20px;
    margin-bottom: 15px;
}
.p-thump-splited-item p{
    color: #999;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 30px;
}
.p-right-thumb{
    overflow: hidden;
    margin: 80px 0;
}
.p-right-thumb-r{
    overflow: hidden;
}
.p-right-thumb-r img{
    width:100%;
    height: 250px;
}
.p-right-thumb-l h3{
    color:#EE3F5A;
    font-size: 20px;
    margin-bottom: 15px;
}
.p-right-thumb-l p{
    color: #999;
    font-size: 14px;
    line-height: 24px;
    
}

.p-left-thumb{
    overflow: hidden;
    margin: 80px 0;
}
.p-left-thumb-l{
    overflow: hidden;
}
.p-left-thumb-l img{
    width:100%;
    height: 250px;
}
.p-left-thumb-r h3{
    color:#EE3F5A;
    font-size: 20px;
    margin-bottom: 15px;
}
.p-left-thumb-r p{
    color: #999;
    font-size: 14px;
    line-height: 24px;
    
}
/* --------------------------------------
   Media Queries
   -------------------------------------- */
/* Large desktop */
@media all and (device-width: 1280px)
{
    header{
        background-size: 100%;
        height: 600px ;
    }
    .navbar {
        padding: 80px 0 0 0;
    }
    .header-r {
        right: 130px;
    }
    footer:after{
        height: 80%;;
    }
}

@media only screen 
and (min-width: 1024px) 
and (max-height: 1366px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 1.5) 
{

    .portfolio-filter-head-items a{
        padding:10px 20px;
    }
    .services-tab-body{
        width:77%;
    }
    .about-us-head, .services-head, .portfolio-head, .clients-head, .teamwork-head{
        font-size: 30px;
    }
    footer:after{
        height: 80%;;
    }header{
        background-size: 109%;
        height: 500px ;
    }
    .navbar {
        padding: 80px 0 0 0;
    }
    .header-r {
        right: 12%;
    }
    .header h3{
        font-size: 40px;
    }
}
@media (min-height: 1000px) and (min-width: 1800px){
    
}
@media (max-width: 768px)
{
    .navbar{
        padding: 40px 0 0;
    }
    footer:after{
        height: 90%;;
    }
    header{
        background-size: 100%;
        height: auto ;
    }
    .header-r{
        padding-right: 30px;
    }
    .header a{
        margin-bottom: 60px;
    }
    .header h3{
        font-size: 35px;
    }
    .htitle span{
        font-size: 25px;
    }
    .about-us-left img{
        width:100px;
        position: relative;
        top:40px;
        right:-20px;
    }
    .about-us-right h3{
        font-size: 26px;
    }
    .about-us-right p{
        font-size: 12px;
    }
    .about-us-head, .services-head, .portfolio-head, .clients-head, .teamwork-head{
        font-size: 24px;
        margin: 10px 0;
    }
    .about-us-head:after,
    .services-head:after,
    .portfolio-head:after,
    .clients-head:after,
    .teamwork-head:after{
        width:150px;
        right:40%;
    }
    header{
        height: auto;
    }
    .services-tab-item{
        width:90%;
    }
    .services-tab-body{
        width:70%;
    }
    .services-left img{
        width:300px;
    }
    .client-item{
        margin: 30px auto;
        padding-top: 15%;
    }
    footer{
        padding: 40px 0;
        border-radius: 0;
    }
    .footer-contact {
        margin-bottom: 30px;
        padding: 0 25px;
    }
    .navicon{
        display: inline-block;
        width: 50px;
        height: 40px;
        position: relative;
        top:10px;
    }
    .navicon i{
        background: #ee3f5a;
        display: block;
        width:90%;
        height: 3px;
        margin-bottom: 7px;
    }
    .nav-social{
        margin-top:10px;
    }
    .nav-xs{
        position: fixed;
        background: #f7f7f7;
        top:0;
        right:0;
        z-index: 9999;
        width:100%;
        padding: 20px 0;
        display: none;
    }
    .nav-xs a{
        display: block;
        font-size: 16px;
        text-align: center;
        margin-bottom: 15px;
    }
    .closenav{
        display: block;
        margin-bottom: 20px;
        display: block;
    }
    .closenav i{
        position: relative;
        right:40px;
        color:#999;
        transition: all .5s;
    }
    .closenav i:hover{
        color:#ee3f5a;
    }
    .logo{
        text-align: center;
        top:-5px;
    }
    .logo img{
        width: 200px;
    }
    .navicon{
        width:40px;
        margin-right: 30px;
    }
    header {
        background-position: 100% 0%;
        background-size: 170%;
    }
    .header-r {
        padding-right: 160px;
    }
    .header-view{
        text-align: center;
    }
    .header-view img{
        width:400px
    }
    .about-us-right p{
        font-size: 16px;
    }
    .portfolio-filter-head-items a{
        margin: 0 3px;
        font-size:14px;
        padding: 10px 20px;
    }
    .portfolio-filter-head{
        margin-bottom: 10px;
    }
    .portfolio{
        background-image: none;
    }
    .order-header-logo{
        text-align: center;
        margin-bottom: 20px;;
    }
    .order-header-nav{
        text-align: center
    }
    .order-header-nav a{
        border-radius: 10px;
        font-size: 14px;
        font-weight:bold;
        padding: 15px 20px;;
    }
    .p-right-thumb,
    .p-thump-splited,
    .p-left-thumb{
        margin: 25px 0;
    }
}
@media (max-width: 600px)
{
    .nav-social a{
        padding: 8px 3px ;
    }
    .nav-social a i{
        font-size: 16px;
    }
    .portfolio-filter-head-items a{
        display: block;
        margin-bottom: 10px;
        text-align: center;
    }
    .portfolio-filter-footer a{
        display: block;
        margin: 0 20px;
    }
    .order-header-social{
        margin: 20px 0;
    }
    footer:after{
        height: 97%;;
    }
    .header-r{
        padding: 0;
    }
    .logo img {
        width: 100px;
    }
    .logo {
        margin-right: 25px;
    }
    header {
        background-position: 100% 0%;
        background-size: 370%;
    }
    .header h3 {
        font-size: 25px;
    }
    .header-view img {
        width: 300px;
    }
}