/* SLIDER IMAGE & TEXT PORTRAIT */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 414px) 
  { 

    .carousel-caption{
      max-width: 100%;
      position: relative;
      top: 10em;
      margin: auto;

    }

    #slider .carousel-inner .item .img-slider1 img{
      max-width: 80%;
      position: relative;
      top: 8.5em;
      left: 2em;
      margin: auto;
      
    }
    
    .carousel-caption h3 {
      font-size: 1.2em;
    }

    .carousel-caption h1 {
      font-size: 2em;

    }

    .carousel-caption h3.sub {
      font-size: 1em;
      max-width: 70%;
    }
}

/*Landscape */

@media only screen and (min-width: 568px) and (max-device-width: 667px) {

  #slider .carousel-inner .item .img-slider1 img{
        max-width: 38%;
        position: relative;
        top: 7.5em;
        left: 19em;
        margin: auto;
      }
      
      .carousel-caption {
        position: absolute;
        top: 6em;
        
      }
      .carousel-caption h3 {
        font-size: 1em;
        line-height: 0.1em;
        
      }

      .carousel-caption h1 {
        font-size: 1.3em;
      }

      .carousel-caption h3.sub {
        font-size: 0.9em;
        max-width: 50%;
      }

  }

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

    #slider .carousel-inner .item .img-slider1 img{
      max-width: 50%;
      position: relative;
      top: 6.5em;
      left: 20em;
      margin: auto;
    }
  
    .carousel-caption h3 {
      font-size: 1em;
      line-height: 0.1em;
      
    }

    .carousel-caption {
      position: absolute;
      top: 6em;
      
    }
  
    .carousel-caption h1 {
      font-size: 1.3em;
    }
  
    .carousel-caption h3.sub {
      font-size: 1em;
      max-width: 50%;
    }
  
  }

  @media only screen and (width: 768px) {

    #slider .carousel-inner .item .img-slider1 img{
      max-width: 70%;
      position: relative;
      top: 9.5em;
      left: 8em;
      margin: auto;
    }
  
    .carousel-caption h3 {
      font-size: 2em;
      line-height: 0.1em;
      
    }

    .carousel-caption {
      position: absolute;
      top: 39em;
      
    }
  
    .carousel-caption h1 {
      font-size: 3.3em;
    }
  
    .carousel-caption h3.sub {
      font-size: 1.4em;
      max-width: 100%;
    }

  }

  @media only screen and (width: 834px) {

    #slider .carousel-inner .item .img-slider1 img{
      max-width: 70%;
      position: relative;
      top: 9.5em;
      left: 8em;
      margin: auto;
    }
  
    .carousel-caption h3 {
      font-size: 2em;
      line-height: 0.1em;
      
    }

    .carousel-caption {
      position: absolute;
      top: 39em;
      
    }
  
    .carousel-caption h1 {
      font-size: 3.3em;
    }
  
    .carousel-caption h3.sub {
      font-size: 1.4em;
      max-width: 100%;
    }

  }

  @media only screen and (min-width: 812px) and (max-width: 813px) {

  #slider .carousel-inner .item .img-slider1 img{
    max-width: 50%;
    position: relative;
    top: 6.5em;
    left: 20em;
    margin: auto;
  }

  .carousel-caption h3 {
    font-size: 1em;
    line-height: 0.1em;
    
  }

  .carousel-caption {
    position: absolute;
    top: 6em;
    
  }

  .carousel-caption h1 {
    font-size: 1.3em;
  }

  .carousel-caption h3.sub {
    font-size: 1em;
    max-width: 50%;
  }
}

@media only screen and (min-width: 896px) and (max-width: 897px){
  #slider .carousel-inner .item .img-slider1 img{
    max-width: 40%;
    position: relative;
    top: 6.5em;
    left: 25em;
    margin: auto;
  }

  .carousel-caption h3 {
    font-size: 1em;
    line-height: 0.1em;
    
  }

  .carousel-caption {
    position: absolute;
    top: 6.5em;
    
  }

  .carousel-caption h1 {
    font-size: 1.3em;
  }

  .carousel-caption h3.sub {
    font-size: 1em;
    max-width: 50%;
  }
} 

@media only screen and (width: 1024px) {

  #slider .carousel-inner .item .img-slider1 img{
    max-width: 70%;
    position: relative;
    top: 9.5em;
    left: 10em;
    margin: auto;
  }

  .carousel-caption h3 {
    font-size: 1.7em;
    line-height: 0.1em;
    
  }

  .carousel-caption {
    position: absolute;
    top: 45em;
    
  }

  .carousel-caption h1 {
    font-size: 4.0em;
  }

  .carousel-caption h3.sub {
    font-size: 1.2em;
    max-width: 100%;
  }

}

@media only screen and (width: 1366px) {

  #slider .carousel-inner .item .img-slider1 img{
    max-width: 50%;
    position: relative;
    top: 13.5em;
    left: 39em;
    margin: auto;
  }

  .carousel-caption h3 {
    font-size: 1.7em;
    line-height: 0.1em;
    
  }

  .carousel-caption {
    position: absolute;
    top: 25em;
    
  }

  .carousel-caption h1 {
    font-size: 4.0em;
  }

  .carousel-caption h3.sub {
    font-size: 1.2em;
    max-width: 67%;
  }

}
/*============================================================
	For Small Desktop
==============================================================*/

/* slider */


/* works */


/* team */

.member-thumb {
  width: auto;
}

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {


/* slider */




/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 325px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  width: 33%;
}

/* team */

.member-thumb .overlay h5 {
  margin: 25px 0;
}

.member-thumb {
  margin: 0 auto;
}

/* facts */

#facts {
background-position: center top !important;
}
.counters-item {
  margin-bottom: 30px;
}

.counters-item i {
  margin: 0 0 15px;
}

.counters-item strong {
  font-size: 45px;
}

/* contact */

.contact-form .name-email input {
  margin-right: 0;
  width: 100%;
}

.footer-social {
  margin-top: 45px;
}

/* footer */

.footer-single {
  margin-bottom: 30px;
}

}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

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

.sec-sub-title p {
  font-size: 14px;
}

/* slider */


.social-links {
  margin-top: 20%;
}

/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 280px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  left: 5% !important;
  width: 90%;
}

/* team */

.team-member {
  margin-bottom: 30px;
}

.team-member:last-child {
  margin-bottom: 0;
}

.member-thumb {
  margin: 0 auto;
}

/* facts */

#facts {
background-position: center top !important;
}

.counters-item {
  margin-bottom: 30px;
}

/* contact */
.contact-address {
  margin-bottom: 30px;
}

.footer-social {
  margin-top: 20px;
  text-align: center;
}

.footer-social li {
  display: inline-block;
}

.footer-social li a {
  margin: 0 10px;
}

/* footer */

.footer-single {
  margin-bottom: 30px;
}

}

.button{
      background-color: transparent;
    border: 2px solid #d75c37;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;

}

/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* services */

.service-item {
  margin: 0 auto 30px;
  text-align: center;
  width: 325px;
}

.service-icon {
  float: none;
  margin: 0 auto 15px;
  text-align: center;
  width: 50px;
}

.service-desc {
  margin-left: 0;
  position: relative;
  top: 0;
}

/* works */

.work-item {
  left: inherit !important;
  width: 50%;
}


}

@media only screen and (max-width: 767px) {
  .phone h1{
  margin-top: -67px;
}
}

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

  .phone{
  padding-left: 0px;
  padding-top: 0px;
  margin-top: -66px;
}
.phone h1 {
  font-size: 14px;
}

}