@media (min-width:768px) and (max-width:991px) {
    .navbar-right li a {
        font-size: 12px;
        padding-right: 10px
    }

    .social-icons ul li {
        margin-bottom: 10px
    }

    .extra-services-heading {
        padding-left: 115px
    }

    .our-services .col-md-4 {
        border-right: none;
        padding: 50px 100px
    }
	
	.extra-services-image {
		float: left; 
		max-width: 300px !important; 
		height: auto; 
		clear: both; 
		margin: 0; 
		margin-right: 15px;
	}
}



@media (max-width:750px) {
    body {
        font-size: 14px
    }
	

    /*     This section is commented out. However if we need to specify images for mobile index slider here is where we add them.*/

    .img-slider1 {
        background-image: url(../images/slider/1-mobile.jpeg)
    }

    /*
    .img-slider2 {
        background-image: url(../images/slider/2-mobile.jpeg)
    }

    .img-slider3 {
        background-image: url(../images/slider/3-mobile.jpeg)
    }

    .img-slider4 {
        background-image: url(../images/slider/4-mobile.jpeg)
    }
*/


    #home-slider .caption h1 {
        font-size: 33px
    }

    #home-slider .caption {
        font-size: 15px;
        padding: 0 30px
    }

    #home-services {
        background-image: url(../images/page-headers/services-header-mobile.jpeg);
        height: 470px
    }

    #home-business-pick-ups {
        background-image: url(../images/page-headers/business-pick-ups-header-mobile.jpeg);
        height: 470px
    }

    #page-header {
        background-image: url(../images/page-headers/data-center-header-mobile.jpeg);
        height: 470px
    }

    #home-extra {
        background-image: url(../images/services-mobile.jpeg);
        height: 470px
    }

    #items-header {
        background-image: url(../images/items-we-accept/items-header-mobile.jpeg);
        height: 470px
    }

    #community-header .caption-extra h1,
    #home-extra .caption-extra h1,
    #items-we-accept .caption-extra h1 {
        font-size: 28px;
        text-align: center;
        padding: 80px 0 0
    }

    .left-control,
    .right-control {
        font-size: 20px;
        height: 30px;
        line-height: 25px;
        width: 30px
    }

    .logo-overlay {
        top: 90px;
        left: 11%
    }

    .logo-overlay-extra {
        background: top center no-repeat;
        position: absolute;
        top: 40px;
        left: 10px;
        width: 90%;
        z-index: 10;
        padding-left: 40px
    }

    #home-slider:hover .right-control {
        right: 15px
    }

    #home-slider:hover .left-control {
        left: 15px
    }

    .caption .btn-start {
        font-size: 12px;
        padding: 10px 30px;

    }

    .navbar-brand {
        padding: 2.5px 15px;
        margin-left: 24px;
        box-shadow: 0 9px 0px 0px white, 0 0px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
    }

    .navbar-brand h1 {
        margin-top: 3px
    }

    .navbar-toggle {
        border: 1px solid #fff
    }

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

    .navbar-right li a {
        font-size: 13px;
        padding-bottom: 8px;
        padding-top: 10px
    }

    /*    mobile sub menu font color*/
    .navbar-right li a.dropdown-item {
        color: #FFF;
    }

    .heading,
    .sector h3,
    .sector p {
        font-size: 14px
    }

    #about-us {
        background-image: url(../images/about-bg.jpeg);
        padding: 75px 0
    }

    .tooltip.top {
        float: none;
        margin-top: 10px
    }

    .flip {
        float: right !important;
        margin-left: 20px
    }

    .flip-text {
        text-align: right
    }

    .about-info,
    .service-info p {
        text-align: left
    }

    .sector p {
        padding-bottom: 15px
    }

    hr.visible-xs-block {
        width: 100%
    }

    .btn-start-extra,
    .btn-start-extra-1 {
        padding-right: 20px;
        padding-left: 20px
    }

    #services-main {
        padding: 20px 10px
    }

    section {
        padding: 45px 0
    }


    .heading {
        padding-bottom: 10px
    }

    .heading h2 {
        font-size: 26px
    }

    .service-info h3 {
        font-size: 20px;
        text-align: left
    }

    .our-services .col-sm-4 {
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 15px
    }

    .about-info,
    .team-member {
        margin-bottom: 50px
    }

    .our-services .col-sm-4:nth-child(4),
    .our-services .col-sm-4:nth-child(5),
    .our-services .col-sm-4:nth-child(6) {
        padding-top: 0
    }

    .service-icon {
        font-size: 30px;
        height: 65px;
        line-height: 62px;
        width: 65px;
        float: left;
        margin-top: 30px;
        margin-right: 10px
    }

    .our-services .col-sm-4:hover .service-icon:before {
        height: 90px;
        width: 90px
    }

    #products .col-sm-3,
    .blog-posts .col-sm-4,
    .team-members .col-sm-3 {
        width: 50%;
        float: left
    }

    .social-icons ul li a {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        width: 30px
    }

    .count .col-xs-6 {
        margin-bottom: 35px
    }

    #overview {
        min-height: 330px
    }

    #overview i {
        font-size: 35px
    }

    #overview h3 {
        font-size: 25px
    }

    #facebook {
        padding-bottom: 75px
    }

    .facebook-left-control,
    .facebook-right-control {
        top: inherit;
        bottom: 30px;
        height: 25px;
        width: 25px;
        line-height: 23px;
        font-size: 14px
    }

    .facebook-left-control {
        left: 40%
    }

    .facebook-right-control {
        right: 40%
    }

    #community-contact-us .heading,
    #contact-us .heading {
        padding-top: 35px
    }

    .contact-info {
        padding-left: 0
    }

    #footer .footer-bottom {
        text-align: center
    }

    .footer-bottom p.pull-right {
        float: none !important
    }

    /* color and spacing for social icons on mobile*/
    .fa-youtube {
        background-color: #D32323;
        padding: 0 2px 0 2px;
    }

    .fa-instagram {
        background-color: #2ac6f7;
        padding: 0 2px 0 2px;
    }

    .fa-facebook {
        background-color: #3b5999;
        padding: 0 5px 0 5px;

    }

    .fa-at {
        background-color: #CECB26;
        padding: 0 2px 0 2px;
    }

    .fa-yelp {
        background-color: red;
        padding: 0 2px 0 2px;
    }

    .fa-home {
        background-color: #19975d;
        padding: 0 2px 0 2px;
    }
	

    /*remove wow effects on mobile*/
    .wow {
        visibility: visible !important;
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }

    /*H1 for header titles*/
    .mobile-title {
        font-size: 33px;
    }

    #contact-us {
        background: #fff;
        padding-bottom: 20px;
        color: #30343f;
    }

    .address-padding {
        padding-top: 0%;
    }

    /*    Overide to help center mobile images in the page header parallax*/
    .parallax-mobile {
        background-size: unset;
        background-position: top;
    }
}

@media (max-width:320px) {
    .logo-overlay {
        top: 90px;
        left: 10px
    }
	
}

@media (max-width:479px) {

    #products .col-sm-3,
    .blog-posts .col-sm-4,
    .pricing-table .col-sm-3,
    .team-members .col-sm-3 {
        width: 100%;
        float: none
    }

    .extra-services-heading {
        font-size: 30px;
        text-align: center
    }
	
	.clear {
		clear:both;
	}
	
	.extra-services-image{
		float: inherit !important;
		position: relative;
		margin: 0 auto 20px;
		max-width: 300px !important;
	}
	
	.center {
		text-align:center;
	}
	
}

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

    #community-header,
    #home-extra,
    #items-header {
        background-attachment: scroll
    }
	
}

#page-header {}