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

Colors & Fonts

Fonts :  Kalam & Open Sans

Colors : 
Light blue : #9fd6e5
Dark blue : #46bcd3
Light grey : 8c8c8b
Dark grey : 5f5e5e
Black : #000
White : #fff

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



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

            HTML & Body

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

html, body {
    height: 100%;
}

body {
    color: #5f5e5e; 
}

h1, h2, h3, h4 {
    font-family: "Kalam", sans-serif;
}

h5 {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #46bcd3;
}

p {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;   
}

section {
    background: #fff;
    overflow: hidden;
}



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

            Content boxes

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

.content-box-lg {
    padding-top: 80px;
    padding-bottom: 80px; 
}

.content-box-lg-no-top-padding {
    padding: 0 0 120px 0;
}

.content-box-lg-blue-bottom {
    padding: 80px 0;
    border-bottom: solid;
    border-bottom-color: #46bcd3;
    border-bottom-width: 20px; 
}

.container-blue-bottom {
    padding-top: 0px;
    padding-bottom: 80px; 
    border-bottom: solid;
    border-bottom-color: #46bcd3;
    border-bottom-width: 20px; 
}



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

            Buttons

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

.btn-general {
    font-family: "Kalam", sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: white; 
    border-radius: 0px;
    margin: 0 6px;
    padding: 12px 46px 12px 46px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.btn-afspraak {
    background: #46bcd3;
    border: solid 1px #46bcd3;
}

.btn-afspraak:hover,
btn-afspraak:focus {
    background: #9fd6e5;
    color: white;
    text-shadow: 1px 1px 2px #5f5e5e;
}

.btn-laserbehandeling {
    background: #46bcd3;
    border: solid 1px #46bcd3;
}

.btn-laserbehandeling:hover,
btn-laserbehandeling:focus {
    background: #9fd6e5;
    color: white;
    text-shadow: 1px 1px 2px #5f5e5e;
}

.btn-contact {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;  
    padding: 5px 30px 5px 30px; 
    background-color: #fff;
    border-radius: 0;
}

.btn-contact:hover, 
btn-contact:focus {
    color: #46bcd3;
}


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

            Preloader

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

#preloader {
    background-color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

#status {
    background-image: url("../img/preloader/preloader.gif");
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}



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

            Home Section

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

#home {
    background: none; 
    height: 100%;
}

#home-content {
    width: 100%;
    height: 100%;
    display: table;
}

#home-button {
    width: 100%;
    height: 100%;
    display: table;
}

#home-content-inner {
    display: table-cell;
    vertical-align: bottom;
    -webkit-transform: translateY(-10%);    transform: translateY(-10%);
}

#home-shop-button {
    display: table-cell;
    vertical-align: bottom;
    -webkit-transform: translateY(-50%);    transform: translateY(-50%);
}

#home-heading {
    color : #fff;
    font-size: 150px;
    margin: 0;
    display: inline-block;
}

#arrow-down {
    position: absolute;
    left: 50%;
    bottom: 20px;
    color: #fff;
    font-size: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-left: -20px;
    z-index: 1;
    -webkit-transition: all .5s;transition: all .5s;
}

#arrow-down:hover, #arrow-down:focus {
    color: #46bcd3;
}

#home-bg-img {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

#home-overlay {
    background-color: #9fd6e5;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}



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

            About section

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

#about-header {
    padding-top: 120px;
    border-left: solid;
    border-left-color: #9fd6e5;
    border-left-width: 20px;
}
    
#about-text {
    padding-left: 20px;
    padding-bottom: 20px;
    border-left: solid;
    border-left-color: #9fd6e5;
    border-left-width: 20px;
    border-bottom: solid;
    border-bottom-color: #46bcd3;
    border-bottom-width: 20px;    
}

#about-heading {
    font-size: 50px;
    margin: 0;
    display: inline-block;
    margin-bottom: 120px;
}

#name-owner {
    font-size: 30px;
    margin: 0;
    display: inline-block;
    padding: 20px 0px 20px 20px;
}

#about-picture img {
    margin: auto;
    display: block;
}

#oolaboo-picture img {
    margin: auto;
    display: block;
    padding-top: 60px;
}




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

            Menu buttons section

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

.row.no-gutters [class*=col-] {
    padding: 0;
}

.menu-button {
    overflow: hidden;
    position: relative;
}

.menu-button img {
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform 0.5s ease;transition: -webkit-transform 0.5s ease;transition: transform 0.5s ease;transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.menu-button:hover img {
    -webkit-transform: scale(1.1);transform: scale(1.1);
}

.container-fluid {
    padding: 0;
}

.menu-buttons-overlay {
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0;
    right: 0;
    background: rgba(159, 214, 229, 0.5);
    -webkit-transition: background 0.5s ease;transition: background 0.5s ease;
}

.menu-buttons-details {
    width: 100%;
    position: absolute;
    top: 70%;
    left: 0; 
}

.menu-buttons-details h3 {
    color: white;
    font-size: 35px;
    -webkit-transition: -webkit-transform 0.5s ease;transition: -webkit-transform 0.5s ease;transition: transform 0.5s ease;transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    transition: text-shadow 0.5 ease;
}

.menu-button:hover .menu-buttons-details h3 {
    -webkit-transform: translateY(-20%);transform: translateY(-20%);
    text-shadow: 2px 2px 3px #5f5e5e;
}

.menu-button:hover .menu-buttons-overlay {
    background: rgba(159, 214, 229, 0);
}






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

            Tarieven section

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

#tarieven-header h2 {
    font-size: 50px;
    margin-bottom: 50px;
    margin-top: 50px; 
}

.float-left p {
    height: 5px; 
}

.float-right p {
    height: 5px;
}

.tarief-title {
    padding-left: 10px;
    padding-right: 10px;  
}

.tarief-overlay {
    padding-left: 10px;
    padding-right: 10px;
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease; 
}
.tarief-overlay:hover {
    background-color: #46bcd3;
    color: white;
}

#button-afspraak {
    margin-top: 50px;
}

#button-afspraak-laserbehandelingen {
    margin-top: 50px;
}




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

            Contact

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

#map {
    height: 773px;
}

#contact-heading {
    background: #46bcd3;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
}

#mail-link {
    color: white; 
}

#contact-heading a i {
    font-size: 40px;
    color: white;
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
}

#contact-heading a i:hover {
    color: #5f5e5e; 
}

#contact-form {
    background: #46bcd3;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 15px;
    color: white;
}

#contact-form input.form-control {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    padding: 10px 15px;
    line-height: 20px;
    border-radius: 0;
    border: 0;
}

#contact-form textarea.form-control {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    padding: 10px 15px;
    line-height: 20px;
    min-height: 80px;
    border-radius: 0;
    border: 0;
}

.help-block {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 30px;
}

#contact-form label {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

#contact-form p {
    padding-top: 15px;
}





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

            Footer

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


footer {
    background: black; 
    color: white;
    padding: 40px; 
}

footer a i {
    color: white; 
    font-size: 40px;
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
}

footer a i:hover,
footer a i:focus {
    color: #46bcd3;
}

footer a {
    color: white; 
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
}

footer a:hover,
footer a:focus {
    color: #46bcd3;
    text-decoration-line: none;
}

#sub-buttons {
    padding-left: 10px;
}

#sub-buttons a {
    line-height: 0px; 
}

#sub-sub-buttons {
    padding-left: 20px;
}

#sub-buttons-right {
    padding-right: 10px;
}



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

            Navigation

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

.navbar {
    padding-left: 50px;
    padding-right: 50px;
    -webkit-transition: all 300ms linear;transition: all 300ms linear; 
}

.navbar-brand {
    transform: translateY(50px);
}

ul.navbar-nav > li > a {
    font-family: "Open Sans", sans-serif;
    color: white;
    font-weight: 400;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 17px; 
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
}

ul.navbar-nav > li > a:hover,
ul.navbar-nav > li > a:focus {
    color: #46bcd3; 
}


.black-nav-top {
    background: black; 
    -webkit-box-shadow: 0 8px 6px -9px #999;box-shadow: 0 8px 6px -9px #999;
    z-index: 2;
}

.black-nav-top ul.navbar-nav > li.active > a {
    color: #46bcd3;
}

.dropdown-menu {
    background: black;
    border-radius: 0;
}

.dropdown-item {
    color: white; 
    -webkit-transition: all 0.3s ease;transition: all 0.3s ease;
}

.dropdown-item:hover {
    color: #46bcd3;
    background: black; 
}

.dropdown-item.disabled{
    color: #46bcd3;
}



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

            Mobile Navigation

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

.navbar-toggler-icon {
    font-size: 35px;
    color: white;  
}


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

            Animation

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

#home-heading {
    animation-duration: 1s;
    animation-delay: 1s;
}

#arrow-down i {
    animation-duration: 1s;
    animation-delay: 1.5s;
}




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

            Offset anchor tag

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

/* zorgt ervoor dat pagina op juiste hoogte terechtkomt bij link naar sectie op andere pagina */

:target:before {
content:"";
display:block;
height:240px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}



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

            Subpagina's

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

.behandelingen-header {
    padding-top: 0px; 
}

.behandelingen-heading {
    padding-bottom: 40px; 
}

.behandelingen-text span {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #46bcd3;
}

.behandelingen-images {
    padding-bottom: 50px;  
}