html, body{
   font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
    font-size: 100%;
    background: #FFf;
}
body a{
 transition:0.5s all;
 -webkit-transition:0.5s all;
 -moz-transition:0.5s all;
 -o-transition:0.5s all;
 -ms-transition:0.5s all;
}

.header{
 min-height:750px;
 background:url(../images/banner.jpg) no-repeat;
 background-size:cover;
 background-position:center; 
 position:relative;
}
.menu{ 
}
.menu ul{
 margin: 2.5em 0 0 3em;
 padding: 0;
}
.menu ul li{
 display:inline-block;
}
.menu ul li a{
 color:#FFF;
 font-weight:400;
 text-transform:uppercase;
 font-size:1em;
 margin:0 4em;
 display:block;
 text-decoration:none;
}
.menu ul li a:hover{
 color:#c59a6d;
}
span.menu-icon{
 width: 42px;
 height: 42px;
 display: inline-block;
 background: url(../images/nav-icon.png) no-repeat 0px 0px;
 position: absolute;
 top: 40px;
 cursor: pointer;
}
.header-info{
 width: 40%;
 position: absolute;
 top: 34%;
 left: 28.5%;
}
.header-info h2{
 color:#FFF;
 font-size:1.2em;
 text-transform:uppercase;
 font-weight:400;
 margin:0 0 0.5em 0;
 padding:0;
 
}
.header-info span{
 height:2px;
 width:15%;
 background:#c59a6d;
 display:inline-block;
}
.header-info h1{
 font-weight:700;
 color:#FFF;
 font-size:3.5em;
 margin:1em 0 2em 0;
 padding:0;
}
label.downarrow{
 width:24px;
 height:24px;
 display:inline-block;
 background:url(../images/downarrow.png) no-repeat 0px 0px;
 cursor:pointer;
}


.intro{
 padding:4em 0;
}
.head-section{
 
}
.head-section h2{
 color:#424a51;
 text-transform:uppercase;
 font-weight:700;
 font-size:1.8em;
 margin:0 0 0.4em 0;
 padding:0
}
.head-section span{
 height:2px;
 width:5%;
 background:#c59a6d;
 display:inline-block;
}
label.downarrow1{
 width:24px;
 height:24px;
 display:inline-block;
 background:url(../images/downarrow1.png) no-repeat 0px 0px;
 cursor:pointer;
}
.intro p{
 color: #424a51;
 font-weight: 400;
 font-size: 1.0em;
 width: 80%;
 margin: 1em auto 2em auto;
 line-height: 1.5em;
 text-align:left;
 text-indent:2em;
 
}

.video{
 background:url(../images/video-bg.png) no-repeat 0px 0px;
 min-height:400px;
 background-size:cover;
 text-align:center;
 position:relative;
}
a.play span{
 width:64px;
 height:64px;
 display:inline-block;
 background:url(../images/paly-icon.png) no-repeat 0px 0px;
 position:absolute;
 top:43%;
 left:48%;
}
a.play span:hover{
 opacity:0.8;
}
.copyrights{
 text-indent:-9999px;
 height:0;
 line-height:0;
 font-size:0;
 overflow:hidden;
}

.services{
 padding:4em 0;
}
.services p{
 color: #424a51;
 font-weight: 400;
 font-size: 1.3em;
 width: 80%;
 margin: 1em auto 2em auto;
 line-height: 1.8em;
 font-family: 'Asap', sans-serif;
}
.service-grid span{
 width: 65px;
 height: 64px;
 display: inline-block;
 background: url(../images/service-icons.png) no-repeat 4px 0px;
}
.service-grid h4{
 color:#8e9297;
 font-weight:700;
 text-transform:uppercase;
 font-size:1.2em;
 margin: 1.3em 0 1.4em 0;
}
.service-grid p{
 color: #8e9297;
 font-size: 1em;
 width: 90%;
 margin: 1em auto 0 auto;
}
.service-grid span.s-icon{
 background-position:4px 0px;
}
.service-grid:hover span.s-icon{
 background-position: -209px 0px;
}
.service-grid span.s-icon1{
 background-position:-74px 0px;
}
.service-grid:hover span.s-icon1{
 background-position: -287px 0px;
}
.service-grid span.s-icon2{
 background-position: -142px 0px;
}
.service-grid:hover span.s-icon2{
 background-position: -355px 0px;
}
.service-grid:hover h4{
 color:#c59a6d;
}
.service-grid:hover p{
 color:#424a51;
}
.service-grids{
 margin:6em 0 5em 0;
}

.shope{
 background:#282f35;
 padding:5em 0;
}
.shope a{
 color: #FFF;
 font-weight: 700;
 border: 1px solid #776551;
 text-transform: uppercase;
 padding: 1em 4em;
 font-family: 'Asap', sans-serif;
 display: inline-block;
 letter-spacing: 0.1em;
 text-decoration: none;
}
.shope a:hover{
 color:#776551;
 border-color:#FFf;
}

.portfolio{
 padding:5em 0 4em;
}
.portfolio p{
 color: #424a51;
 font-weight: 400;
 font-size: 1.3em;
 width: 90%;
 margin: 1em auto 2em auto;
 line-height: 1.5em;

}
.portfolio-grid{
 position:relative;
}
.portfolio-grid-pic{
 position:relative;
}
.portfolio-grid-pic img{
 width:100%;
}
.portfolio-grid-caption{
 position: absolute;
 top: 0;
 width: 100%;
 background:rgba(66, 74, 81, 0.6);
 bottom:0;
 right:0;
 padding-top:1.5em;
 display:none;
}
.portfolio-grid:hover div.portfolio-grid-caption{
 display:block;
}
.portfolio-grid-caption h4{
 color:#FFF;
 font-weight:700;
 font-size:1.2em;
 text-transform:uppercase;
}
.portfolio-grid-caption p{
 color:#f5f5f5;
 font-size:0.9em;
 font-weight:400;
 text-align:left;
}
.portfolio-grid-caption span{
 width:20%;
 height:2px;
 display:inline-block;
 background:#c59a6d;
}
a.more{
 background:#c59a6d;
 color:#FFF;
 text-transform:uppercase;
 font-family: 'Asap', sans-serif;
 letter-spacing:0.1em;
 padding:0.8em 2em;
 text-decoration:none;
 margin:3em 0;
 display:inline-block;
}
a.more:hover{
 background:#282f35;
}

.clients{
 
 padding:5em 0 4em;
}
.clients p{
color: #424a51;
 font-weight: 400;
 font-size: 1.3em;
 width: 90%;
 margin: 1em auto 2em auto;
 line-height: 1.5em;
 }

.clients div.head-section h2{
 color:#424a51;
 
}
.client-list{
 margin-top:3em;
}
.client-list ul{
 margin:0;
 padding:0;
}
.client-list ul li{
 display:inline-block;
}
.client-list ul li a{
 margin:0 3em;
}
.client-list ul li a:hover{
 opacity:0.8;
}

.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1em;margin-left:-1em;margin-top:2em}
.row:after,.row:before{display:table;content:" "}
.row:after{clear:both}
.col-md-4,.col-md-6,.col-lg-12,.col-lg-4{position:relative;width:100%;min-height:1px;padding-right:1em;padding-left:1em}
@media (min-width:992px){
 .col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
 .col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
 }
@media (min-width:768px){
 .col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
}
.img-fluid{max-width:100%;height:auto}
#about {
  background: url("../images/about-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 3.75em 0 2.5em 0;
  position: relative;
}

#about::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#about .container {
  position: relative;
  z-index: 10;
}

#about .about-col {
  background: #fff;
  border-radius: 0 0 0.25em 0.25em;
  box-shadow: 0px 0.125em 0.75em rgba(0, 0, 0, 0.08);
  margin-bottom: 1.25em;
}

#about .about-col .img {
  position: relative;
}

#about .about-col .img img {
  border-radius: 0.25em 0.25em 0 0;
}

#about .about-col .icon {
  width: 4em;
  height: 4em;
  padding-top: 0.85em;
  text-align: center;
  position: absolute;
  background-color: #c59a6d;
  border-radius: 50%;
  text-align: center;
  border: 0.25em solid #fff;
  left: calc( 50% - 2em);
  bottom: -1.875em;
  transition: 0.3s;
}

#about .about-col i {
  font-size: 1.5em;
  line-height: 1;
  color: #fff;
  transition: 0.3s;
  font-weight:lighter;
}

#about .about-col:hover .icon {
  background-color: #fff;
}

#about .about-col:hover i {
  color: #c59a6d;
}

#about .about-col h2 {
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 1em;
  line-height:1.5em;
  padding: 0;
  margin: 2.5em 0 0.75em 0;
}

#about .about-col h2 a {
  color: #000;
}

#about .about-col h2 a:hover {
  color: #c59a6d;
}

#about .about-col p {
  font-size: 0.875em;
  line-height: 1.5em;
  color: #333;
  margin-bottom: 0;
  padding: 0 1.25em 1.25em 1.25em;
text-align:center;
}

#portfolio {
  padding: 60px 0;
}

#portfolio #portfolio-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#portfolio #portfolio-flters li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.875em;
  line-height: 1.5em;
  color: #666666;
  border-radius: 4px;
  text-transform: uppercase;
  background: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {
  background: #8a1d22;
  color: #fff;
}

#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio .portfolio-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

#portfolio .portfolio-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}

#portfolio .portfolio-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}

#portfolio .portfolio-item figure {
  background: #000;
  overflow: hidden;
  height: 240px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

#portfolio .portfolio-item figure:hover img {
  opacity: 0.4;
  transition: 0.3s;
}

#portfolio .portfolio-item figure .link-preview, #portfolio .portfolio-item figure .link-details {
  position: absolute;
  display: inline-block;
  visibility: hidden;
  line-height: 1;
  text-align: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

#portfolio .portfolio-item figure .link-preview i, #portfolio .portfolio-item figure .link-details i {
  padding-top: 6px;
  font-size: 22px;
  color: #333;
}

#portfolio .portfolio-item figure .link-preview:hover, #portfolio .portfolio-item figure .link-details:hover {
  background: #c59a6d;
}

#portfolio .portfolio-item figure .link-preview:hover i, #portfolio .portfolio-item figure .link-details:hover i {
  color: #fff;
}

#portfolio .portfolio-item figure .link-preview {
  left: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure .link-details {
  right: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure:hover .link-preview {
  visibility: visible;
  left: calc(50% - 44px);
}

#portfolio .portfolio-item figure:hover .link-details {
  visibility: visible;
  right: calc(50% - 44px);
}

#portfolio .portfolio-item .portfolio-info {
  background: #fff;
  text-align: center;
  padding:10px 30px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

#portfolio .portfolio-item .portfolio-info h4 {
  font-size: 1.125em;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: 18px;
  padding-bottom: 0;
}

#portfolio .portfolio-item .portfolio-info h4 a {
  color: #333;
}

#portfolio .portfolio-item .portfolio-info h4 a:hover {
  color: #c59a6d;
}

#portfolio .portfolio-item .portfolio-info p {
  padding: 0;
  margin: 0;
  color: #b8b8b8;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

.latest-twittes{
 background:url(../images/twitts-bg.jpg) no-repeat 0px 0px;
 
 
 background-size:cover;
 
}
.latest-twittes div.head-section h2{
 color:#FFF;
}
.twitt-mask{ background-color:rgba(0, 0, 0, 0.4);padding:5.5em 0 0 0;min-height:450px; }
.twitt{

 margin-top:1.5em;
}
.twitt p{
 color: #FFF;
 font-weight: 400;
 font-size: 1.2em;
 font-style: italic;
 margin: 0em auto 2em;
 width: 60%;
}
.twitt a{
 color:#FFF;
 font-weight:700;
 text-transform:uppercase;
 font-size:1.3em;
 text-decoration:none;
}
.twitt a:hover{
 color:#c59a6d;
}


.contact{
 background:#282f35;
 padding:5em 0;
}
.contact div.head-section h2{
 color:#FFF;
}
.contact-left h4{
 color:#FFF;
 text-transform:uppercase;
 font-size:1.2em;
 margin:0 0 1.5em 0;
 padding:0;
}
ul.address{
 margin:0;
 padding:0;
}
ul.address li{
 display:block;
 font-size:1em;
 font-family: 'Asap', sans-serif;
 font-style:italic;
 color:#FFF;
 margin:0.8em 0;
}
ul.social-icons{
 margin:3em 0 0 0;
 padding:0;
}
ul.social-icons li{
 display:inline-block;
}
ul.social-icons li a{
 display:block;
 margin:0 2em 0 0; 
}
ul.social-icons li a span{
 width:22px;
 height:22px;
 display:inline-block;
 background:url(../images/social-icons.png) no-repeat 0px 0px;
}
ul.social-icons li a span.facebook{
 background-position: 4px 0px;
}
ul.social-icons li a:hover span.facebook{
 background-position: 4px -22px;
}
ul.social-icons li a span.twitter{
 background-position: -54px 2px;
}
ul.social-icons li a:hover span.twitter{
 background-position: -54px -20px;
}
ul.social-icons li a span.vimeo{
 background-position: -117px 1px;
}
ul.social-icons li a:hover span.vimeo{
 background-position: -117px -21px;
}
ul.social-icons li a span.behance{
 background-position: -177px 1px;
}
ul.social-icons li a:hover span.behance{
 background-position: -177px -21px;
}


 .spotlight {
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
 }

  .spotlight .image {
   -moz-order: 1;
   -webkit-order: 1;
   -ms-order: 1;
   order: 1;
   border-radius: 0;
   width: 40%;
  }

   .spotlight .image img {
    border-radius: 0;
    width: 100%;
   }

  .spotlight .content {
   padding: 2em 4em 0.1em 4em ;
   -moz-order: 2;
   -webkit-order: 2;
   -ms-order: 2;
   order: 2;
   max-width: 48em;
   width: 60%;
  }

  .spotlight:nth-child(2n) {
   -moz-flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
  }

  .spotlight:nth-child(1) {
   background-color: rgba(0, 0, 0, 0.075);
  }

  .spotlight:nth-child(2) {
   background-color: rgba(0, 0, 0, 0.025);
  }

  .spotlight:nth-child(3) {
   background-color: rgba(0, 0, 0, 0.075);
  }

  .spotlight:nth-child(4) {
   background-color: rgba(0, 0, 0, 0.025);
  }

  .spotlight:nth-child(5) {
   background-color: rgba(0, 0, 0, 0.075);
  }

  .spotlight:nth-child(6) {
   background-color: rgba(0, 0, 0, 0.025);
  }

  .spotlight:nth-child(7) {
   background-color: rgba(0, 0, 0, 0.075);
  }

  .spotlight:nth-child(8) {
   background-color: rgba(0, 0, 0, 0.025);
  }

  

  @media screen and (max-width: 1280px) {

   .spotlight .image {
    width: 45%;
   }

   .spotlight .content {
    width: 55%;
   }

  }

  @media screen and (max-width: 980px) {

   .spotlight {
    display: block;
   }

    .spotlight br {
     display: none;
    }

    .spotlight .image {
     width: 100%;
    }

    .spotlight .content {
     padding: 4em 3em 2em 3em ;
     max-width: none;
     text-align: left;
     width: 100%;
    }

  }

  @media screen and (max-width: 736px) {

   .spotlight .content {
    padding: 3em 2em 1em 2em ;
   }

  }


 .wrapper {
  padding: 6em 0 4em 0 ;
 }

  .wrapper > .inner {
   width: 60em;
   margin: 0 auto;
  }

   @media screen and (max-width: 1280px) {

    .wrapper > .inner {
     width: 90%;
    }

   }

   @media screen and (max-width: 980px) {

    .wrapper > .inner {
     width: 100%;
    }

   }

  .wrapper.alt {
   padding: 0;
  }
  .wrapper.style2 {
   background-color: #ffffff;
  }



#testimonials {
  padding: 60px 0;
  background-color:#f7f7f7;
}

#testimonials .section-header {
  margin-bottom: 40px;
}

#testimonials .testimonial-item {
  text-align: center;
  margin-top:30px;
}

#testimonials .testimonial-item .testimonial-img {
  width: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

#testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

#testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 15px 0;
}

#testimonials .testimonial-item .quote-sign-left {
  margin-top: -15px;
  padding-right: 10px;
  display: inline-block;
  width: 37px;
}

#testimonials .testimonial-item .quote-sign-right {
  margin-bottom: -15px;
  padding-left: 10px;
  display: inline-block;
  max-width: 100%;
  width: 37px;
}

#testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

@media (min-width: 992px) {
  #testimonials .testimonial-item p {
    width: 80%;
  }
}

#testimonials .owl-nav, #testimonials .owl-dots {
  margin-top: 5px;
  text-align: center;
}

#testimonials .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd;
}

#testimonials .owl-dot.active {
  background-color: #18d26e;
}


@media(max-width:1280px){
 .header-info {
  width: 50%;
 }
 .header {
  min-height:650px;
 }
 .menu ul li a {
  margin: 0 3em;
 }
}
@media(max-width:1024px){
 .header-info {
  width: 50%;
  left: 24%;
 }
 .header {
  min-height:500px;
 }
 .menu ul li a {
  margin: 0 2em;
 }
}
@media(max-width:768px){
 .header-info {
  width: 72%;
  left: 15%;
 }
 .header {
  min-height:400px;
 }
 .menu ul li a {
  margin: 0 0.875em;
 }
 .service-grids {
  margin: 2em 0 3em 0;
 }
 .service-grid {
  padding: 0 0 1em 0;
 }
 .service-grid h4 {
  margin: 0.8em 0 0 0;
 }
 .client-list ul li a {
  margin: 0 2em;
 }
 .about-grid-info span {
  display: block;
 }
 .about-grid{
  padding:1.5em 0;
 }
 .contact-right{
  margin-top:2em;
 }
 .contact-grids {
  margin: 2em 0 1em;
 }
 .contact {
  padding: 3em 0 2em 0;
  
 }
}
@media(max-width:640px){
 .header-info {
  width: 72%;
  left: 14%;
  top: 36%;
 }
 .header {
  min-height:350px;
 }
 .menu ul li a {
  margin: 0 0.3125em;
 }
 .service-grids {
  margin: 2em 0 3em 0;
 }
 .service-grid {
  padding: 0 0 1em 0;
 }
 .service-grid h4 {
  margin: 0.8em 0 0 0;
 }
 .client-list ul li a {
  margin: 0 1em;
 }
 .about-grid-info span {
  display: block;
 }
 .about-grid{
  padding:1.5em 0;
 }
 .contact-right{
  margin-top:2em;
 }
 .contact-grids {
  margin: 2em 0 1em;
 }
 .contact {
  padding: 3em 0 2em 0;
  
 }
 .header-info h1 {
  font-size: 2.9em;
 }
 .intro {
  padding: 2em 0;
 }
 .head-section h2 {
  font-size: 1.5em;
 }
 .head-section span {
  width: 12%;
 }
 .intro p,.portfolio p,.services p,.about-us p{
  font-size: 1.1em;
 }
 .video {
  min-height: 200px;
 }
 a.play span {
  top: 34%;
  left: 46%;
 }
 .services {
  padding: 2em 0;
 }
 .portfolio {
  padding: 2.5em 0;
 }
 a.more {
  margin: 1.5em 0 3em;
 }
 .clients {
  min-height: 275px;
  padding: 1em 0;
 }
 .clients div.head-section {
  margin-top: 2em;
 }
 .about-us {
  padding: 2em 0;
 }
 .about-grids {
  margin: 0em 0 2em 0;
 }
 .latest-twittes {
  min-height: 370px;
  padding: 2.5em 0 0 0;
 }
}
@media(max-width:480px){
 .header-info {
  width: 72%;
  left: 14%;
  top: 37%;
 }
 .header {
  min-height:200px;
 }
 .menu ul li a {
  margin: 0 0.2em;
 }
 .service-grids {
  margin: 2em 0 0.5em 0;
 }
 .service-grid {
  padding: 0 0 1em 0;
 }
 .service-grid h4 {
  margin: 0.8em 0 0 0;
 }
 .client-list ul li a {
  margin: 0 1em;
 }
 .about-grid-info span {
  display: block;
 }
 .about-grid{
  padding:1.5em 0;
 }
 .contact-right{
  margin-top:2em;
 }
 .contact-grids {
  margin: 2em 0 1em;
 }
 .contact {
  padding: 3em 0 2em 0;
  
 }
 .header-info h1 {
  font-size: 2.1em;
 }
 .intro {
  padding: 2em 0;
 }
 .head-section h2 {
  font-size: 1.3em;
  margin: 0 0 0.3em 0;
 }
 .head-section span {
  width: 15%;
 }
 .intro p,.portfolio p,.services p,.about-us p{
  font-size: 1em;
  margin: 0.8em auto 1.2em;
 }
 .video {
  min-height: 200px;
 }
 a.play span {
  top: 34%;
  left: 46%;
 }
 .services {
  padding: 2em 0;
 }
 .portfolio {
  padding: 2.5em 0;
 }
 a.more {
  margin: 1.5em 0 3em;
 }
 .clients {
  min-height: 275px;
  padding: 1em 0;
 }
 .clients div.head-section {
  margin-top: 2em;
 }
 .about-us {
  padding: 2em 0;
 }
 .about-grids {
  margin: 0em 0 2em 0;
 }
 .latest-twittes {
  min-height: 340px;
  padding: 2em 0 0 0;
 }
 .header-info span {
  width: 20%;
 }
 .client-list ul li:nth-child(4){
  display:none;
 }
 .twitt p {
  font-size: 1.1em;
  width: 90%;
 }
 .text-box {
  width:100%;
  float:none;
  margin-right:0%;
  margin-bottom: 1em;
 }
 .contact-right input[type="submit"]{
  float:none;
  width:100%;
  margin-top:1em;
 }
 #small-dialog iframe{
  min-height:200px;
  border:none;
 }
}
@media(max-width:320px){
 .header-info{
  width: 83%;
  left: 8%;
  top: 37%;
 }
 .header {
  min-height:150px;
 }
 .menu ul li a {
  margin: 0 0.2em;
 }
 .service-grids {
  margin: 2em 0 0.5em 0;
 }
 .service-grid {
  padding: 0 0 1em 0;
 }
 .service-grid h4 {
  margin: 0.8em 0 0 0;
 }
 .client-list ul li a {
  margin: 0 1em;
 }
 .about-grid-info span {
  display: block;
 }
 .about-grid{
  padding:1.5em 0;
 }
 .contact-right{
  margin-top:2em;
 }
 .contact-grids {
  margin: 2em 0 1em;
 }
 .contact {
  padding: 2em 0 1em 0;
 }
 .header-info h1 {
  font-size: 1.6em;
 }
 .intro {
  padding: 1.5em 0;
 }
 .head-section h2 {
  font-size: 1.3em;
  margin: 0 0 0.3em 0;
 }
 .head-section span {
  width: 15%;
 }
 .intro p,.portfolio p,.services p,.about-us p{
  font-size: 1em;
  margin: 0.8em auto 1.2em;
  width:100%;
 }
 .video {
  min-height: 200px;
 }
 a.play span {
  top: 33%;
  left: 44%;
 }
 .services {
  padding: 1.5em 0;
 }
 .portfolio {
  padding: 1.5em 0 1.2em;
 }
 a.more {
  margin: 0.8em 0 2em;
 }
 .clients {
  min-height: 220px;
  padding: 1em 0;
 }
 .clients div.head-section {
  margin-top: 1.5em;
 }
 .about-us {
  padding: 1.5em 0;
 }
 .about-grids {
  margin: 0em 0 2em 0;
 }
 .latest-twittes {
  min-height: 340px;
  padding: 2em 0 0 0;
 }
 .header-info span {
  width: 25%;
 }
 .client-list ul li:nth-child(4),.client-list ul li:nth-child(3){
  display:none;
 }
 .twitt p {
  font-size: 1.1em;
  width: 90%;
 }
 .text-box {
  width:100%;
  float:none;
  margin-right:0%;
  margin-bottom: 1em;
 }
 .contact-right input[type="submit"]{
  float:none;
  width:100%;
  margin-top:1em;
 }
 #small-dialog iframe{
  min-height:200px;
  border:none;
 }
 .header-info h2 {
  font-size: 1em;
 }
 span.menu-icon {
  top: 30px;
 }
 .menu ul {
  margin: 2.2em 0 0 3em;
 }
 .shope a {
  padding: 1em 2.5em;
 }
 .shope {
  padding: 2em 0;
 }
 .client-list {
  margin-top: 2em;
 }
 .footer-left {
  float: none;
  text-align:center;
 }
 .footer-right {
  float: none;
  text-align:center;
  margin-top:1em;
 }
}