*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body	{
	font-family: 'Poppins', sans-serif;
    background-color: #607b8b;
}

h1 {
    color: white;
    font-family:Verdana, Geneva, sans-serif;
    font-size: .75em;
}

h2{
    color: white;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1.25em;
}

h3{
    color: white;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1.75em;
}

a	{
	text-decoration:none;
	color: white;
}
p	{
	color: white;
}
.blue-link {
    color: blue;
    text-decoration: none; /* Verwijdert onderstreping als je dat wilt */
}



        @media only screen and (min-width:769px){
    
            .wrapper_1 {
                max-width: 1300px;
                margin: auto;
            } 
            
            .logo {
                display: flex;            /* Flexbox gebruiken om de inhoud te centreren */
                justify-content:left; /* Horizontaal centreren */
                align-items: center;      /* Verticaal centreren, indien nodig */
                width: 30%;              /* Optioneel: om de container volledige breedte te geven */
                height: auto;             /* Optioneel: indien je de container een specifieke hoogte wilt geven */
                padding: 1px;            /* Optioneel: ruimte rond de afbeelding */
            }
            
            .logo img {
                width: 100%;               /* Pas de breedte aan, bijv. 90% van de containerbreedte */         
                height: auto;             /* Houd de oorspronkelijke verhoudingen van de afbeelding */
            }
            
            .inloggen2{
                width: 20%;
                float: right;
                margin-top: 2%;
                margin-right: 4%;
            }
            
            .navbar {
                display: flex;
                align-items: center;
                padding: 5px;
            }
            
            nav	{
                flex: 1;
                text-align: right;
            }
            nav ul{
                display: inline-block;
                list-style-type: none;
            }
            nav ul li {
                display:inline-block;
                margin-right: 20px;
            }
            
            .navbar .logo   {
                float: left;
                width: 30%;
            }
            
            .inlog  {
            display: none;
            }
            
            .container  {
                float: right;
                width: 80%;
            }
            
            .container_2    {
               display: none;
            }
            
            .wrapper_2 {
                max-width: 1300px;
                width: 90%;
                margin: auto;
                margin-top: 3px;
            }

                    /* Overlay-styling */
                    .overlay {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.8); /* Donkere, semi-transparante achtergrond */
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        visibility: hidden; /* Verberg standaard */
                        z-index: 9999; /* Zorg ervoor dat de overlay bovenop andere elementen komt */
                    }
                    
                    .overlay-content {
                        background-color: #fff; /* Witte achtergrond */
                        padding: 20px;
                        border-radius: 8px;
                        text-align: center;
                        max-width: 80%;
                        font-size: 18px;
                        color: black; /* Maak de tekst zwart */
                    }

        /* Sluitknop */
        .close-button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #f6b007;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        

        .wrapper1 {
            width: 100%;
            max-width: 1300px;
            height: 850px;
            margin: auto;
            background-color: #607b8b;
        }
    
        .row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    
        .col-2 {
            flex-basis: 50%;
            min-width: 300px;
            margin-top: 0px;
        }
    
        .form-container {
            background-color: #fff;
            width: 300px;
            height: 250px;
            position: relative;
            text-align: center;
            padding-top: 20px;
            padding-left: 40px;
            margin: auto;
            overflow: hidden;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
    
        .afbeelding_inlog {
            max-width: 100%;
            padding: 50px 0;
        }
    
        .form-container2 {
            background-color: #fff;
            width: 300px;
            height: 200px;
            position: relative;
            text-align: center;
            padding-top: 20px;
            padding-left: 20px;
            margin: auto;
            overflow: hidden;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }
    
        .form-container form {
            max-width: 300px;
            padding: 0 20px;
            position: absolute;
            top: 80px;
            transition: transform 1s;
        }
    
        form input {
            width: 100%;
            height: 30px;
            margin: 10px 0;
            padding: 0 10px;
            border: 1px solid #ccc;
        }
    
        form .btn {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.0em;
            text-align: center;
            width: 200px;
            border: none;
            cursor: pointer;
            margin: 20px 0;
        }
    
        form .btn:focus {
            outline: none;
        }
    
        .form-container span {
            font-weight: bold;
            padding: 0 10px;
            color: #555;
            cursor: pointer;
            width: 100px;
            display: inline-block;
        }
    
        .btn {
            display: inline-block;
            background-color: #f6b007;
            padding: 8px 30px;
            margin: 30px 0;
            border-radius: 30px;
            transition: background 0.5s;
        }
    
        .btn:hover {
            background-color: #555;
        }
    }


    @media only screen and (max-width:768px){

        .wrapper_1  {
            width: 100%;
        }
        
        .logo {
            display: flex;            /* Flexbox gebruiken om de inhoud te centreren */
            justify-content: center;  /* Horizontaal centreren */
            align-items: center;      /* Verticaal centreren, indien nodig */
            width: 100%;              /* Optioneel: om de container volledige breedte te geven */
            height: auto;             /* Optioneel: indien je de container een specifieke hoogte wilt geven */
            padding: 20px;            /* Optioneel: ruimte rond de afbeelding */
        }
        
        .logo img {
            width: 90%;               /* Pas de breedte aan, bijv. 90% van de containerbreedte */         
            height: auto;             /* Houd de oorspronkelijke verhoudingen van de afbeelding */
        }
        
        .inloggen2{
            width: 20%;
            float: right;
            margin-top: 2%;
            margin-right: 4%;
        }
        
        .container{
            display: none;
        }
        
        .container_2{
            display: block;
        }
        
        .custom-link2 {
            color:#fff; /* De kleur van de tekst en het icoon */
            font-size: 1.0em; /* Stel de grootte in van de tekst en het icoon */
            text-decoration: none; /* Verwijder de standaard onderlijning van de link */
            margin-left: 5px;
        }
        
        /* Verberg de checkbox */
        #menu-toggle {
            display: none;
        }
        
        /* Overlay stijlen */
        .overlay {
            display: none; /* Standaard niet tonen */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        
        /* Standaard menu stijlen */
        .menu {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 250px;
            background-color: white;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            padding-top: 60px; /* Ruimte voor de hamburgerknop */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 1001;
        }
        
        /* Toon het menu en overlay als de checkbox is aangevinkt */
        #menu-toggle:checked + .custom-link2 + .overlay {
            display: block;
        }
        
        #menu-toggle:checked + .custom-link2 + .overlay + .menu {
            transform: translateX(0);
        }
        
        /* Menu lijst stijlen */
        .menu ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .menu ul li {
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
        }
        
        .menu ul li a {
            text-decoration: none;
            color: #333;
        }
        
        /* Hover effect */
        .menu ul li:hover {
            background-color: #f4f4f4;
        }

        ul{
            list-style-type: none;
            color: #fff;	
        }
        
        .inlog{
            float: right;
            margin-right: 3px;
        }
        
        
        
        .wrapper_2 {
            max-width: 1300px;
            width: 98%;
            margin: auto;
            margin-top: 10px;
        }

                            /* Overlay-styling */
                            .overlay {
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: rgba(0, 0, 0, 0.8); /* Donkere, semi-transparante achtergrond */
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                visibility: hidden; /* Verberg standaard */
                                z-index: 9999; /* Zorg ervoor dat de overlay bovenop andere elementen komt */
                            }
                            
                            .overlay-content {
                                background-color: #fff; /* Witte achtergrond */
                                padding: 20px;
                                border-radius: 8px;
                                text-align: center;
                                max-width: 80%;
                                font-size: 18px;
                                color: black; /* Maak de tekst zwart */
                            }

                                    /* Sluitknop */
        .close-button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #f6b007;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }


        
        
        .lijn_1   {
            clear: both;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .lijn_2 {
            display: none;
        }
        
        /*inloggen-----*/
    
        .wrapper1 {
            width: 100%;
            height: 800px;
            margin: auto;
            max-width: 1300px;
            background-color: #607b8b;
        }
    
        .row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    
        .col-2 {
            flex-basis: 50%;
            min-width: 300px;
            margin-top: 0px;
        }
    
        .form-container {
            background-color: #fff;
            width: 300px;
            height: 250px;
            position: relative;
            text-align: center;
            padding-top: 20px;
            padding-left: 40px;
            margin: auto;
            overflow: hidden;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
    
        .afbeelding_inlog {
            max-width: 100%;
            padding: 50px 0;
        }
    
        .form-container2 {
            background-color: #fff;
            width: 300px;
            height: 200px;
            position: relative;
            text-align: center;
            padding-top: 20px;
            padding-left: 20px;
            margin: auto;
            overflow: hidden;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }
    
        .form-container form {
            max-width: 300px;
            padding: 0 20px;
            position: absolute;
            top: 80px;
            transition: transform 1s;
        }
    
        form input {
            width: 100%;
            height: 30px;
            margin: 10px 0;
            padding: 0 10px;
            border: 1px solid #ccc;
        }
    
        form .btn {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.0em;
            text-align: center;
            width: 200px;
            border: none;
            cursor: pointer;
            margin: 20px 0;
        }
    
        form .btn:focus {
            outline: none;
        }
    
        .form-container span {
            font-weight: bold;
            padding: 0 10px;
            color: #555;
            cursor: pointer;
            width: 100px;
            display: inline-block;
        }
    
        .btn {
            display: inline-block;
            background-color: #f6b007;
            padding: 8px 30px;
            margin: 30px 0;
            border-radius: 30px;
            transition: background 0.5s;
        }
    
        .btn:hover {
            background-color: #555;
        }
    
    }