/************************** MEDIA QUERY ***********************/

/* (1440x768) WXGA Display */
@media screen and (max-width: 1440px) {
    #recycle {
        background-position: 50% 110px;
        background-size: 20%;
    }
}

/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {
    .below-carousel p {
        padding: 13px 0px 0px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .navbar-header {
        width: 40%;
    }
    .navbar-default .navbar-nav>li>a {
        padding: 28px 12px;
    }
    p.about-content {
        margin: 20px 0px;
    }
    img.about-img {
        margin-top: 77px;
    }
    #recycle {
        background-size: 50%;
    }
    ul.footer-links {
        margin-left: -122px;
    }
    ul.footer-links li a {
        padding-right: 8px;
    }
    .aboutpage-content p {
        padding: 10px 20px 5px;
    }
    iframe {
        width: 300px;
        height: 260px;
    }
    .slick-prev {
        left: 4px !important;
    }
    .slick-next {
        right: 4px !important;
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    #recycle {
        background-size: 32%;
    }
    iframe {
        width: 400px;
        height: 300px;
    }
}

/* Mobile Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 767px)  and (orientation : portrait) {
	
    p {
        font-size: 13px !important;
    }
    .social-header {
        padding: 7px 15px 0px;
    }
    .navbar-toggle {
        position: relative;
        float: right;
        padding: 20px 10px;
        margin-top: 14px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: #ffffff;
        border: none;
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background: #ffffff;
    }
    .navbar-default .navbar-collapse, .navbar-default .navbar-form {
        border-color: #e7e7e7;
        background: #ffffff;
    }
    .navbar-default .navbar-nav>li>a {
        padding: 8px 25px;
    }
    .navbar-nav {
        margin: 0px -15px;
    }
    .below-carousel {
        height: 40px;
    }
    .below-carousel p {
        font-size: 10px !important;
        padding-top: 15px;
    }
    .below-carousel p img {
        width: 7%;
    }
    img.about-img, img.prod-img {
        margin: 5px auto 0px;
    }
    p.about-content {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    h2.prod-title {
        margin-top: 30px;
    }
    .prod-content {
        margin-top: 20px;
    }
    a.readmore-prod {
        display: block;
        width: 50%;
        margin: 40px auto 0px;
    }
    ul.footer-links li a {
        padding: 10px 2px 0px;
        font-size: 10px;
    }
    p.copyright {
        margin: 5px 0px 0px;
    }
    a.mapping {
        display: block;
        margin-top: 4px;
    }
    #recycle {
        background-position: 50% 50%;
        background-size: 88%;
    }
    .prod-content p {
        margin-bottom: 15px;
    }
    .navbar-brand>img {
        margin-left: 10px;
    }
    .slick-next {
        right: 4px !important;
    }
    .slick-prev {
        left: 4px !important;
    }
    iframe {
        width: 100%;
        height: 300px;
    }
    .aboutpage-content p {
        padding: 10px 15px 5px;
    }
	.category h2{font-size:15px !important;}
	.form-heading h1{font-size:22px !important;}
	
    
}

@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation: landscape) {
    .navbar-brand>img {
        width: 16%;
        padding: 12px 0px 0px;
        margin-left: 18px;
    }
    img.about-img, img.prod-img {
        margin: 30px auto 0px;
    }
    #recycle {
        background-size: 55%;
    }
    .slick-next {
        right: 6px !important;
    }
    .slick-prev {
        left: 6px !important;
    }
    .below-carousel p {
        padding-top: 10px;
    } 
}

/*********************** galaxy s5 Device *************************/

@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) {
    .border-left{height: 376px !important ;}
	
}

@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : landscape) {
    .border-left{height: 275px !important;}
	
}



/*********************** Apple Device *************************/

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
    .border-left{height: 430px;}
}

/* iPhone 5 landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
    .border-left{height: 289px !important;}}

/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #recycle {
        background-size: 45%;
    }
	
}

/* iPhone 6 portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	.border-bottom{height:376px !important;}
}

/* iPhone 6 Plus landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
    #recycle {
        background-size: 40%;
    }
}

/* iPhone 6 Plus portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
	
	
    .border-bottom{height:330px !important}
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
	.border-left{height: 330px !important;}

}