/* Mobile */
@media (max-width: 480px){
    .example-box .btn-quote {
        margin-bottom: 1em;
    }
}
/* Mobile */
@media (max-width: 767px){
    .sidebar {
        bottom: unset;
        width: 100%;
        position: relative;
    }

    .sidebar-spacing {
        padding-left: 0;
    }

    .side-navbar{
        padding: 0!important;
    }

    .logo {
        margin: 0;
        display: flex;
        padding: 0;
        width: 5em;
    }

    header{
        background-color: #fff;
        -webkit-box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
        box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
    }

    .nav-item{
        color: #4746A0;
    }

    .sidebar-logo{
        display: none;
    }

    .slogan {
        display: none;
    }

    .sidebar .row {
        /* width: 100%; */
        width: 100vw;;
    }

    .header-spacing {
        margin-top: 5em;
    }

    .body-content {
        padding-top: 2em;
    }

    .navbar-nav {
        align-items: center;
    }

    .nav-item {
        margin-bottom: 0.5em;
    }

    .navbar button:focus {
        outline: none;
    }

    .navbar-toggler {
        font-size: 1.6em;
        color: #4746A0;
    }

    .nav-item:active, .nav-item.active {
        color: #3C444D;
    }

    h1, h2 {
        font-size: 2em;
    }

    .home-info h2 {
        margin: 0.5em 0;
    }

    .home, .about-page, .sample-page, .pharma-page {
        background-image: none;
    }

    .tns-nav {
        margin: 0 0 2em;
    }

    .pharma-info {
        padding-bottom: 6em;
    }

    sup {
        top: -2em;
        left: 0.5em;
    }

    .navbar-expand-md {
        padding: 0.5em 0;
    }

    .chem-info table {
        margin-top: 1em;
    }

    .chem-info {
        padding-bottom: 1em;
    }

    .body-content li {
        padding-bottom: 0.5em;
    }

    .about-img {
        /* height: 11em; */
        max-width: 32em;
        margin: 0 auto;
    }

    .about-quote {
        padding: 0;
    }

    .info-toggle {
        margin: 0 auto;
        display: flex;
    }

    /* Sidebar  */
    .accred-box img {
        border-radius: 0.5em;
        width: 7em;
    }

    .accred-box {
        width: 15em;
        margin: 0 auto;
        justify-content: space-evenly;
    }

    .side-info p {
        margin-bottom: 0;
    }

    .side-info {
        padding-top: 0;
        align-items: center;
        flex-flow: column;
    }
/* --------- End of Sidebar --------- */

    .about-info {
        padding-bottom: 0;
    }

    .about-team {
        padding: 2em 0 0;
    }

    .about-quote h1{
        font-size: 1.5em;
    }

    .fun-photos-gallery {
        padding: 1em 0 0;
        max-width: 33em;
        margin: 0 auto;

    }

    .fun-photos-gallery img {
        margin-bottom: 1em;
    }

    .about-team .col-md-4 {
        padding-right: 1em;
    }

    .fun-photos-gallery img {
        margin-bottom: 1em;
    }

    .fun-photos-gallery .col-6 {
        padding: 0 0.6em;
    }

    .about-team .card-img {
        max-width: 20em;
    }

    .tablet-sidebar {
        padding: 0 0 1em;
    }

/* Quote  */
    .quote-form {
        padding-bottom: 2em;
    }

    .quote-form .col-md-12 {
        margin: 0.5em 0 0;
    }

    .tablet-sidebar{
        background-color: #E8E8E8;
        padding-top:0.5em;
    }

    footer{
        position: relative;
    }

    .footer-spacing {
        padding-bottom: 0;
    }

    /* .about-team .card-img{
        margin: 0 auto;
    } */

    /* Sending Samples  */
    .packaging img {
        width: 100%;
    }

    .example-box {
        justify-content: center;
        width: auto;
        flex-wrap: wrap;
    }

    /* Pharmaceutical testing  */

    .pharma-list img {
        width: 100%;
    }

    .pharma-list h2 {
        font-size: 1em;
    }
    

}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px){

    h1, h2 {
        font-size: 2em;
    }

    /* Sidebar  */
    .sidebar {
        display:none;
    }

    .sidebar-spacing {
        padding-left: 0;
    }

    #menuToggle {
        justify-content: space-between;
    }

    .navbar-expand-md {
        padding: 0.5em 0;
    }

    .navbar-brand {
        width: 7em;
    }

    .tablet-header{
        background-color: #fff;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 0.8em;
    }

    .logo {
        padding-top: 0;
        float: left;
        width: 7em;
    }

    /* End of Sidebar  */

    .body-content li {
        padding-bottom: 0.3em;
    }

    .header-top {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .header-spacing {
        margin-top: 7em;
    }

    .body-content {
        padding-top: 2em;
    }

    .home {
        background-size: 100%;
        background-position: 0 38%;
    }

    .home-info h2 {
        margin: 0.5em 0;
    }

    .tns-nav {
        margin: 0 0 2em;
    }

    .pharma-info {
        padding-bottom: 3em;
    }

    .chem-info {
        padding-bottom: 2em;
    }

    /* .about-img {
        height: 11em;
    } */

    .about-info {
        padding-bottom: 0.5em;
    }

    .about-team {
        padding: 2em 0 0;
    }

    .card {
        margin-bottom: 1.5em;
    }

    .card-img {
        height: 10em;
    }

    .card-title {
        font-size: 1.1em;
        margin-bottom: 0;
    }

    .fun-photos-gallery {
        padding: 0;
    }

    .about-quote h1 {
        font-size: 1.5em;
    }

    .fun-photos-gallery .col-md-4 {
        padding: 0 0.5em;
    }

    .fun-photos-gallery img {
        margin-bottom: 1em;
    }

    .quote-form {
        padding-bottom: 1.5em;
    }

    .quote-form label {
        font-size: 0.9em;
    }

    .quote-form .col-md-12 {
        margin: 1em 0 0;
    }

    .about-quote {
        padding: 0;
    }

    /* Footer Sidebar  */
    .accred-box img {
        border-radius: 0.5em;
        width: 9em;
    }

    .slogan {
        margin-bottom: 0;
    }

    .side-info {
        flex-flow: column wrap;
        padding-right: 0;
    }

    .tablet-sidebar p {
        margin-bottom: 0;
    }

    .side-content {
        padding-bottom: 0.5em;
    }

    .footer-spacing {
        padding-bottom: 1em;
    }

    footer{
        position: relative;
    }

    .tablet-sidebar{
        background-color: #E8E8E8;
        padding-top:0.5em;
        -webkit-box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
        box-shadow: 0px -2px 21px 0px rgba(0,0,0,0.19);
    }

    .foot-accred {
        width: 28em;
        justify-content: center;
    }

    .accred-box{
        justify-content: space-evenly;
    }

    .pharma-list h2 {
        font-size: 1.5em;
    }

    
}

@media (min-width: 992px) and (max-width: 1198px){
    h1,h2{
        font-size: 2em;
    }

    .sidebar {
        width: 15em;
    }

    .sidebar-spacing {
        padding-left: 15em;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 0.8em;
    }

    .body-content {
        padding-top: 2em;
    }

    .home-info h2 {
        margin: 0.6em 0;
    }

    .pharma-info {
        padding-bottom: 5em;
    }

    .body-content li {
        padding-bottom: 0.5em;
    }

    /* .about-img {
        height: 16em;
    } */

    .quote-form label {
        font-size: 0.9em;
    }

    .quote-form {
        padding-bottom: 2.5em;
    }

    .header .container, .home .container, .header-top .container, .chem-page .container, .pharma-page .container, .quote-page .container, .about-page .container{
        max-width: 44em;
    }

    .packaging img {
        width: 25em;
    }

    .pharma-list h2 {
        font-size: 1.5em;
    }

    .accred-box img {
        width: 60%;
    }

}

/* Laptop: */
@media (min-width: 1199px) and (max-width: 1399px){
    .sidebar {
        width: 20em;
    }
    
    .sidebar-spacing {
        padding-left: 20em;
    }

    .pharma-info {
        padding-bottom: 14em;
    }

    .header .container, .home .container, .header-top .container, .chem-page .container, .pharma-page .container, .quote-page .container, .about-page .container{
        max-width: 52em;
    }

    .pharma-list h2 {
        font-size: 1.8em;
    }

    
    .navbar-brand {
        width: 9em;
    }

    .side-content p {
    margin-bottom: 0.5em;
}

}

@media (min-width: 1400px) and (max-width: 1600px){

    .header .container, .home .container, .header-top .container, .chem-page .container, .pharma-page .container, .quote-page .container, .about-page .container{
        max-width: 55em;
    }

    .navbar-brand {
        width: 9em;
    }

    .side-content p {
        margin-bottom: 0.5em;
    }

    .about-quote {
        padding: 1.5em 6em 0;
    }

	
}