* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
    font-family: 'Akshar', sans-serif;
}

/* framework */
    /* ----- colors ----- */
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
        .green{
            background: green;
        }

        .bg-primary{
            background: rgb(240, 214, 14);
        }

        .bg-secondary{ 
            background: rgb(153, 83, 30)
        }

        .primary{
            color: rgb(240, 214, 14);
        }

        .secondary{ 
            color: rgb(153, 83, 30)
        }

        .white{
            color: white;
        }


    /* ----- paddings ----- */
        .p-1{
            padding: 1rem;
        }
        .pt-5{
        padding-top: 5%;
        }

        .pb-5{
            padding-bottom: 5%;
        }

        .pl-5{
            padding-left: 5%;
        }

        .pr-5{
            padding-right: 5%;
        }

        .pr-10{
            padding-right: 10%;
        }

        .p-10px{
            padding: 10px;
        }

        .p-5px{
            padding: 5px;
        }

        .pl-5px{
            padding-left: 5px;
        }

        .py-05{
            padding: 0.5rem 0;
        }

        .py-05-mb{
            padding: 0.25rem 0;
        }

        .py-1{
            padding: 1rem 0;
        }

        .py-1-mb{
            padding: 1rem 0;
        }

        .py-2{
            padding: 2rem 0;
        }

        .py-2-mb{
            padding: 2rem 0;
        }

        .pt-2{
            padding-top: 2rem;
        }

    /* ----- margins ----- */
        .m-l-auto{
            margin-left: auto;
        }
        .m-r-auto{
            margin-right: auto;
        }

        .m-r-fix{
            margin-right: 5%;
        }

        .m-auto{
            margin: auto;
        }


    /* ----- widths ----- */
        .w-50{
            width: 50%;
        }

        .w-55{
            width: 55%;
        }

        .w-75{
            width: 75%;
        }


        .w-20{
            width: 20%;
        }

        .w-80{
            width: 80%;
        }

        .w-100{
            width: 100%;
        }

        .container{
            padding-left: 5%;
            padding-right: 5%;
        }
        .w-33{
            width: 33.3333333%;
        }


    /* ----- display flex ----- */
        .flex{
            display: flex;
        }

        .flex-mobile{
            display: flex;
        }

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

        .justify-center{
            justify-content: center;
        }

        .justify-between{
            justify-content: space-between;
        }

        .justify-around{
            justify-content: space-around;
        }

        .justify-end{
            justify-content: flex-end;
        }

        .flex-col{
            flex-direction: column;
        }

        
        .absolute{
            position: absolute;
        }

        .relative{
            position: relative;
        }

        .fixed{
            position: fixed;
        }



/* ----- nav ----- */
    nav{
        width: 100%;
        height: 15vh;
        position: fixed;
        border-bottom: 4px solid rgb(240, 214, 14);
        z-index: 5000;
        overflow-y: hidden;
    }

    .nav-bg{
        width: 100%;
        height: 15vh;
        background-image: url('img/zwart\ achtergrond.png');
        background-repeat: no-repeat;
        background-size: cover;
    }

    nav img{
        width: 14.6vh;
    }

    .nav-links{
        padding: 1% 10%;
        border-radius: 50px 0px 0px 50px;
        font-size: x-large;
        opacity: 85%;
    }

    nav a{
        color: rgb(240, 214, 14);
    }

    .mobile-nav-links{
        background: rgba(153, 83, 30, 0.95);
        border: 1px solid yellow;
        right: 4.8%;
    }

    .mobile-nav-links > a{  
        padding: 1rem;
        
    }

    .border{
        border: 1px solid yellow;
    }

    .nav-reset{
        margin-top: 15vh;
    }

    #hamburgerMenu{
        cursor: pointer;
    }

/* ----- top slideshow ----- */


    .top-slider{
        position: relative;
    }

    /* Slideshow container */
    .slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    
    }

    .dot {
    /* height: 15px;
    width: 15px; */
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    /* top slider centered text */
    .centered {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    
    text-align: center;
    /* padding: 100px 0px; */
    } 

    .active {
    background-color: #717171;
    }

    /* Fading animation */
    .fade {
    animation-name: fade;
    animation-duration: 1.5s;
    }

    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

   


/* ----- main slideshow ----- */

    .main-slider{
        position: relative;
    }

    .right-text-slider{
        position: absolute;
        top: 15%;
        bottom: 15%;
        left: 60%;
        width: 25%;
        text-align: center;
        overflow-y: hidden;
    }


    .right-text-slider-overlay{
        position: absolute;
        top: 15%;
        bottom: 15%;
        left: 60%;
        width: 25%;

        background-color: black;
        opacity: 50%;
  
    }

    .onze-diensten-title{
        font-size: 3rem;
    }

    .onze-diensten-text{
        text-align: left;
        font-size: 1.5rem;
        margin-left: .7em;
        padding: 0.5rem 1rem;
    }


/* ----- side slider ----- */
    .side-slider{
        position: absolute;
        top: 0%;
        bottom: 0%;
        left: 3%;
        width: 8%;
        
    }

    .slider-element{
        height: 33%;
        overflow-y: hidden;
    }

    .slider-element-img-box{
        width: 90%;
        margin-left: 5%;
        height: 60%;
        
        overflow-y: hidden;
    }

    .bg-black-opacity{
        background: rgba(0, 0, 0, 0.6);
        margin-bottom: 4px;
        padding: 0px 5px;
    }


    
    


  
/* ----- footer----- */
    .footer-bg{
        width: 100%;
        background-image: url(img/zwart\ achtergrond.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-top: 4px solid rgb(240, 214, 14);
    }
    img{
        width: 15vh;
    }


    a.anchor {
        display: block;
        position: relative;
        top: -15vh;
        visibility: hidden;
    }

    .footer-text{
        font-size: 1.5em;
    }

    .footer-icon{
        height: 1.2em;
        width:auto;
        padding-right: 10px;
        margin-top: 5px;
    }

    .social-icon-footer{
        height: 30px;
        width: auto;
        margin: 5px;
    }



    .responsive-img {
        width: 100%;
        height: auto;
      }


    .full-bg{
        background-image: url(img/achtergrond\ website.png);
        width: 100vw;
    }
    
    a{
        text-decoration: none;
    }
    
    .tel{
        font-size: 2em;
        margin-right: auto;
    }
    
    .tel-icon{
        height: 1.6em;
        width:auto;
        padding-right: 10px;
        margin-top: 10px;
    }

   


    /* ----- text----- */
        h1{
            font-size: 3.6rem;
            padding-top: 130px;
            padding-bottom: 30px;
            font-weight: bold;
        }

        h2{
            font-size: 2rem;
            padding-bottom: 30px;
        }


        h3{
            font-size: 2rem;
            padding-top: 30px;
            padding-bottom: 130px;
        }
        
        .text-center{
            text-align: center;
        }
    
        .text-right{
            text-align: right;
        }
    
        .bold{
            font-weight: bold;
        }
        
        .bigger-text{
            font-size: 2rem;
        }

        .big-text{
            font-size: 2.7rem;
            color: rgb(240, 214, 14);
        }



  

    /* ----- form ----- */
        input{
            width: 100%;
            padding: 10px;
        }

        select{
            padding: 10px;
        }

        textarea{
            padding: 10px;
        }

        .form-img{
            background-image: url('img/OPHALING.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            height: 100%;
            background-position: center;
            
        }

        input[type=file]{ 
            color:transparent;
            display: none;
        }

        .upload-icon{
            height: 30px;
            width: auto;
        }

        .center{
            /* form has 75% width */
            padding-left: 12.5%;
        }

        


    /* ----- buttons ----- */
    
        .btn-primary{
            border: 1px solid rgb(240, 214, 14);
            background: black;
            color: rgb(240, 214, 14);
            padding: 10px;
            font-size: x-large;
        }

        
        .btn-secondary{
            width: 40%;
            cursor: pointer;
            font-size: large;
        }

        .btn-upload{
            background: rgb(166, 230, 250);
            width: 40%;
            cursor: pointer;
            border: 1px solid black;
            text-align: center;
            margin-top: auto;
            margin-bottom: auto;
            padding: 10px 5px;
            
        }

        .btn-upload-text{
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 5px;
            margin-left: 10px;
        }

    /* ----- contact ----- */
        .bel-img{
            height: 50px;
            width: auto;
        }

        .mail-img{
            height: 50px;
            width: auto;
        }

        .location-img{
            height: 50px;
            width: auto;
        }

        .social-icon{
            height: 30px;
            width: auto;
            margin: 5px;
        }

        
        
        

 /* ----- side slider images ----- */

    .img-positioning{
        background-position: center;
        height: 100%;
        background-size: cover;
    }


    .img-1{
        background-image: url(img/veritcal_slider/Airco.jpg);   
    }

    .img-2{
        background-image: url(img/veritcal_slider/Aluminium.jpg);   
    }

    .img-3{
        background-image: url(img/veritcal_slider/Geel\ koper.jpg);   
    }

    .img-4{
        background-image: url(img/veritcal_slider/Ijzer.jpg);   
    }

    .img-5{
        background-image: url(img/veritcal_slider/Inox.jpg);   
    }

    .img-6{
        background-image: url(img/veritcal_slider/Kabel.jpg);   
    }

    .img-7{
        background-image: url(img/veritcal_slider/Kuisgoed.jpg);   
    }

    .img-8{
        background-image: url(img/veritcal_slider/Lood.jpg);   
    }

    .img-9{
        background-image: url(img/veritcal_slider/Messinghulzen.jpg);   
    }

    .img-10{
        background-image: url(img/veritcal_slider/Milberry\ -\ Handgepelde\ kabel.jpg);   
    }

    .img-11{
        background-image: url(img/veritcal_slider/Rood\ Koper.jpg);   
    }

    .img-12{
        background-image: url(img/veritcal_slider/vloerweegschaal.jpg);   
    }

    .img-13{
        background-image: url(img/veritcal_slider/Vloerweegschaal\ 2.jpg);   
    }

    .img-14{
        background-image: url(img/veritcal_slider/Zink.jpg);   
    }


    .hide{
        display: none;
    }

    .show{
        display: block;
    }


    
    .hamburger-menu{
        margin-right: 500px;
    }


    .g-recaptcha > div {

        height: auto !important;
        
    }

    .swal2-icon, .swal2-icon-content {

        overflow: hidden;
        
    }