/* ===========================================

            Bootstrap Media Queries

============================================ */


/* Large Devices */

@media (min-width: 1200px) and (max-width: 1300px) {
    
    .navbar {
        padding-left: 20px;
        padding-right: 20px;
    } 
       
}




/* Medium Devices */

@media (min-width: 992px) and (max-width: 1199px) {
    
    .navbar-nav {
        transform: translateX(-80px);
    }
    
    .menu-buttons-details h3 {
        font-size: 30px; 
        line-height: 30px; 
    }
  

}





/* Small Devices */

@media (min-width: 768px) and (max-width: 991px) {
    
    .menu-buttons-details h3 {
        font-size: 20px; 
        line-height: 20px; 
    }
    
    .btn-afspraak,
    .btn-laserbehandeling {
        font-size: 20px;
        line-height: 20px;
    }
    
    .navbar {
        background: black;  
    }
    
    .navbar-nav {
        text-align: right;
    }
    
    .dropdown-menu {
        text-align: right;
    }
    
    #home-heading {
        font-size: 70px;
        color: #5f5e5e; 
    }
    
    #arrow-down {
        font-size: 30px; 
        color: #5f5e5e; 
    }
    
    #home-bg-img {
        max-width: 100%;
        min-height: auto;
        z-index: -1;
        top: 35%;
    }

}




/* Extra small Devices */

@media (min-width: 395px) and (max-width: 767px) {
    
    .menu-buttons-details h3 {
        font-size: 40px; 
        line-height: 40px; 
    }
    
    .btn-afspraak,
    .btn-laserbehandeling {
        font-size: 20px;
        line-height: 20px;
    }
    
    .navbar {
        background: black;  
    }
    
    .navbar-nav {
        text-align: right;
    }
    
    .dropdown-menu {
        text-align: right;
    }
    
    #about-header {
        border-left: white; 
        border-bottom: white; 
    }
    
    #about-heading {
        margin-bottom: 40px; 
    }
    
    #about-text {
        border-left: white; 
        border-bottom: white;
    }
    
    #home-heading {
        font-size: 70px;
        color: #5f5e5e; 
    }
    
    #arrow-down {
        font-size: 30px; 
        color: #5f5e5e; 
    }
    
    #home-bg-img {
        max-width: 100%;
        min-height: auto;
        z-index: -1;
        top: 30%;
    }
}


/* Even smaller Devices */

@media (max-width: 394px) {
  
    .menu-buttons-details h3 {
        font-size: 30px; 
        line-height: 40px; 
    }
    
    .btn-afspraak,
    .btn-laserbehandeling {
        font-size: 20px;
        line-height: 20px;
    }
    
    .navbar {
        background: black;  
    }
    
    .navbar-nav {
        text-align: right;
    }
    
    .dropdown-menu {
        text-align: right;
    }
    
    .navbar-brand img {
        width: 70%;
    }
    
    .navbar-toggler {
        transform: translateX(200px);
    }
    
    #home-heading {
        font-size: 30px;
        color: #5f5e5e; 
    }
    
    #arrow-down {
        font-size: 30px; 
        color: #5f5e5e; 
    }
    
    #about-header {
        border-left: white; 
        border-bottom: white; 
    }
    
    #about-heading {
        margin-bottom: 40px; 
    }
    
    #about-text {
        border-left: white; 
        border-bottom: white;
    }
    
    #home-bg-img {
        max-width: 100%;
        min-height: auto;
        top: 45%;
    }
        
}