/* Responsive styles
================================================== */

/* Large Devices, Wide Screens */

@media (min-width: 1200px) {
   
}

/* Medium Devices, Desktops */

@media (min-width: 992px) and (max-width:1199px) {
    
}

/* Small Devices, Tablets */

@media (min-width: 768px) and (max-width: 991px) {
   .navbar-toggler{
        background: transparent;
    }
    
    .transparent-nav#main-nav .navbar-collapse {
        background: #eee;
        
    } 
    .transparent-nav#main-nav .navbar-collapse a{
        color: #111;
        padding: 10px 20px;
    }
    
    .transparent-nav#main-nav .navbar-collapse a:hover{
        background: #fff;
    }
}

/* Small Devices Potrait */

@media (max-width: 767px) {
    .navbar-toggler{
        background: transparent;
    }
    
    .transparent-nav#main-nav .navbar-collapse {
        background: #eee;
        
    } 
    .transparent-nav#main-nav .navbar-collapse a{
        color: #111;
        padding: 10px 20px;
    }
    
    .transparent-nav#main-nav .navbar-collapse a:hover{
        background: #fff;
    }
    
     .blog-box{
        padding: 0px 30px;
    }
    
}

/* Extra Small Devices, Phones */

@media (max-width: 560px) {
   #section-banner {
		margin-top: -80px;
	}
	.navbar-scroll{
		top: 0px !important;
		padding-top: 0px !important;
		margin-top: 0px !important;
		position: fixed !important;
	}
	
	h1 {
   font-size: 24px;
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 16px;
    }
    h5 {
        font-size: 14px;
    }

    .header .caption h1 {
        font-size: 28px;
    }
    p.lead{
        font-size: 16px;
    }
    
    .service-bg{
        display: none;
    }
    
    .navbar-toggler{
        background: transparent;
    }
    
  #main-nav .navbar-collapse {
        /*background: #eee;*/
	  	/*background: rgba(1,65,86,1)*/
        
    } 
  #main-nav .navbar-collapse a{
        color: #111;
        padding: 10px 20px;
    }
    
#main-nav .navbar-collapse a:hover{
        background: #fff;
    }
    
    
     .service-bg{
        width: 100%;
    }
    .service-bg:after{
        position: absolute;
        content:"";
        top: 0px;
        left: 0px;
        background: #fff;
        width: 100%;
        height: 100%;
        opacity: .86;
    }
    
}

/* Custom, iPhone Retina */

@media (max-width: 320px) and (max-width: 478px) {
	
     .header .caption h1 {
        font-size: 28px;
    }
    p.lead{
        font-size: 16px;
    }
    
    .service-bg,.banner-img{
        display: none;
    }
    
    .portfolio .filtering span{
        margin-bottom: 17px;
        display: inline-block;
    }
    .blog-box {
        padding: 0px 20px;
    }
    .navbar-toggler{
        background: transparent;
    }
    
  #main-nav .navbar-collapse {
        background: #eee;
        
    } 
  #main-nav .navbar-collapse a{
        color: #111;
        padding: 10px 20px;
    }
    
#main-nav .navbar-collapse a:hover{
        background: #fff;
    }
    
    .feature-icon{
        margin-bottom: 20px;
    }
    .feature-content{
        clear: both;
    }
    
    
    #section-banner::before{
        display: none;
    }
    
    .banner-content{
        padding: 160px 0px 100px;
    }
    
    .skill-list li img {
        width: 65px;
        height: 65px;
    }
    
    .navbar-brand{
        margin-left: 0px;
    }
    
    .navbar-toggler{
        margin-right: 10px;
    }
}