/*    Default Layout: 992px. 
    Gutters: 24px.
    Outer margins: 48px.
    Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media (max-width: 767px) {



}



/*    Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */





@media only screen and (min-width: 1199px) {
	
	.navigation .navbar-nav > li > a{
		padding: 36px 20px !important;
	}
  
  #contact .row{

    margin-left: 0px !important;
  }

  .carousel-inner{

    margin-top: 70px;
  }

  .carousel{

  max-height: 600px;
}

	
	
}

/**/
@media only screen and (min-width: 992px) and (max-width: 1199px) {


.carousel{

  max-height: 468px;
}

  .navigation .navbar-nav > li > a{

    padding: 36px 20px;
  }

  .carousel-caption > div{

    top: 20%;
  }

  .mobile-device img.first{

    max-width: 350px;
  }

    .mobile-device img.second{

    max-width: 313px;
  }

    #contact .row{

    margin-left: 0px !important;
  }

    .carousel-inner{

    margin-top: 70px;
  }
  
}

/**/

@media only screen and (min-width: 768px) and (max-width: 991px) {


.navigation .navbar-nav > li > a{
  padding: 38px 7px;
}

.animated-nav .navigation .navbar-nav > li > a{
  padding: 30px 20px;
}

#service .media{
  padding-left: 0;
}

.mobile-device .black{
  left: 0px;
}

.mobile-device .white{
  left: -98px;
}

  .mobile-device img.first{

    max-width: 350px;
  }

    .mobile-device img.second{

    display: none;
  }

  #service-bottom{

    position: relative;

    float: left;

    padding-bottom: 25px;
  }


.service-features{

  padding-left: 0px;

  position: relative;

  float: right;
}

.service-features ul li{

  padding-left: 0px;

      font-size: 14px;

    line-height: 30px;
}


#about,#count{

  position: relative;

  float: left;

  width: 100%;
}

  section#portfolio {
    position: relative;
    float: left !important;

}

figcaption.mask{
  padding: 10px;
}

figcaption.mask h3{
  font-size: 15px;
}

figcaption.mask span{
  font-size: 12px;
}

.plus{
    height: 30%;
    width: 30%;
    margin-left: -15%;
}

.portfolio-item:hover .plus{
  top: 40%;
}

.fact-item{
  padding-bottom: 30px;
}

.subtitle{
  padding-top: 50px;
  position: relative;float: left;
}

#testimonial..owl-carousel{

  position: relative;

  float: left;
}

.subtitle p{

  text-align: center;
}

.pricing-table{
  padding-bottom: 50px;
}

figure, p{
  padding-top: 5px;
}

.progress-bars{

  position: relative;

  float: left;

  width: 100%;

  padding: 30px;
}


.progress-bars img{

  width: 100% !important;
  height: auto !important;
}

.section-title{
		width:100% !important;
} 

#home-carousel .carousel-inner .item {
    background-size: 100%;
    height: 500px!important;
    background-repeat: no-repeat;
}

.carousel-inner{
	    margin-top: 50px;
		height: 400px;}
		
.carousel {
    height: 350px;
	
}

.section-title h2{
	
margin-top: 10px;

}
	
	
.carousel-caption > div{
	top:15%;
	padding: 30px 50px 30px 20%;
}			


#home-carousel .carousel-inner h2{
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0px;
}
}



/*    Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

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

#home{
  overflow: visible;
}

.carousel-inner{

  overflow: visible;
}


    #home .banner-image img {
      width: 150%;
      min-height: 350px;
      overflow: hidden;
          margin-left: -170px;
  }

  .carousel-caption > div {
    position: relative;
    float: left;

    width: 100%;
    text-align: center;
    padding: 7px 30px;
    background-color: rgba(70,65,52,1);

      top: 20%;
}


.row{

  margin-left: -15px !important;
}


#home-carousel .carousel-inner .item {
    background-size: 100%;
    height: 500px!important;
    background-repeat: no-repeat;

}
.carousel-inner{
	height:350px;
	margin-top:50px;
}

.section-title h2{
	margin-top:20px;
}




#nav-arrows > a.sl-next:hover {
  background-color:transparent;
 border-color: #009EE3;
    color: #fff;
}

    .fa-4x {
   margin-left:-10px;
   font-size:2em
}
.fa-angle-left::before {
    content: "\f104";
    color: #fff;
  display: block;
  height: 2%;
 
  position: absolute;
  text-align: center;
 // top: 80%;
  width: 3%;
  z-index: 20;
  margin-top: -55px;


    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.fa-angle-right::before {            
    content: "\f105";
    color: #fff;
  display: block;
  height: 2%;
 
  position: absolute;
  text-align: center;
 // top: 80%;
  width: 3%;
  z-index: 20;
  margin-top: -55px;
 

    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}

  #nav-arrows > a.sl-prev {
    left: 20px;
}
#nav-arrows > a.sl-next {
    right: 20px;
}


#nav-arrows > a {
  border:none;
  color: #fff;
  display: block;
  height: 60px;
  line-height: 76px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 60px;
  z-index: 20;
  margin-top: 10px;

    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}


    
    
.navbar-toggle {
  border: 1px solid  #999d37;
  margin-top: 37px;
}

.navbar-toggle .icon-bar {
  background-color:  #999d37;
}

.animated-nav .navbar-toggle {
  border: 1px solid #fff;
  margin-top: 21px;
}

.animated-nav .navbar-toggle .icon-bar {
  background-color: #fff;
}

.animated-nav .navigation .navbar-nav > li > a,
.navigation .navbar-nav > li > a {
  padding: 15px 25px;
}

.navigation .navbar-nav > li > a {
  background-color: rgb(70,65,52);
}

.navigation .navbar-nav > li > a:hover {
  background-color: #999d37;
}

.navigation .navbar-nav > li.current > a {
  border-bottom: 1px solid #fff;
  color: #fff;
}


#home-carousel .carousel-inner h2{
        font-size: 20px;
    line-height: 27px;
    margin: 0px;
    padding-top: 15px;
}

.carousel-caption{

  position: relative;
  right: 0;
}

.section-title{
  width: 100%;
}

#service .media{
  padding-left: 0px;
}

#service .media > .pull-left{
  margin-right: 15px;
}

.mobile-device img{
  float: none;
}

.mobile-device .black{
  left: 0;
}

.mobile-device .white{
  bottom: 20px;
    left: 150px;
}

.service-features{
    position: relative;
    float: left;
    padding: 20px 0px 20px 10%;
    width: 100%;

}

.service-features h3{
  margin-bottom: 0px;
}

.portfolio-item{
  width: 100%;
}

.tst-content{
  margin: 10px 0 0 125px;
}

.subtitle{
  padding-top: 50px;
}

.call-to-action p{
  font-size: 14px;
}

.pricing-table{
  padding-bottom: 50px;
}

figure, p{
  padding-top: 15px;
}

.special-plan p{
  line-height: 30px;
}

.contact-details{
  margin-bottom: 0px;
}

.contact-details > span{
  padding-top: 100px;
}

    .mobile-device img.second{

    display: none;
  }

  #projects img{

    width: 100%;
  }



   .mobile-device img.first{

    max-width: 320px;

    margin: 0 auto;
  }

    .mobile-device img.second{

    max-width: 300px;
  }

  nav.navigation.navbar-collapse.navbar-right.collapse.in{

    max-height: 365px;
  }


}



/**************/

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

  #home .banner-image img {
      width: 180%;
      min-height: 350px;
      overflow: hidden;
      margin-left: -250px;
  }


}



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

  #home .banner-image img {
    width: 200%;
    min-height: 350px;
    overflow: hidden;
    margin-left: -360px;
  }


}


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

  #home .banner-image img {
    width: 230%;
    min-height: 350px;
    overflow: hidden;
    margin-left: -390px;
  }


}



/************/
@media only screen and (max-width: 500px) {

  #home-carousel .carousel-caption p{
    display: none;
  }

  .mobile-device img.second{

    display: none;
  }

  .service-features{

    display: block;

    position: relative;

    float: left;

    padding-left: 0px;
  }

  .service-features h3{

    margin-top: 20px;
  }

  .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img{

    width: 100% !important;

    height: auto !important;
  }

  .service-features h3{

    padding-left: 0px;
  }

  .service-features ul li{

    padding-left: 0px;
  }

  .well{

    padding: 0px;
  }

  .mobile-device img.first{

    max-width: 100% !important;
  }

  .subscription-form #mail-submit{

    position: relative;

    float: none;

    margin-left: 0px;

    width: 100%;
  }

  .service-features{

  top:57%;
}


}
/****************************/
@media only screen and (max-width: 480px) {
	
.carousel-inner {
    height: 300px;
    margin-top: 73px;
}

.mobile-device .white {
    bottom: 10px;
    left: 0px;
}



/*    Wide Mobile Layout: 480px.
    Gutters: 24px.
    Outer margins: 22px.
    Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */





/*  Retina media query.
  Overrides styles for devices with a 
  device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
  
  
  
}