/*responsive (media query)*********************************************************************************************************/ @media only screen and (min-width: 1141px) { .container{ margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 1140px) { .container{ margin-left: 15px; margin-right: 15px; } } @media only screen and (max-width: 850px) { #menuknopje { display: inline-block !important; color: #D2E0F0; font-size: 50px; position: absolute; right: 15px; top: 10px; } nav{ display: none; } #main_menu_01 { width: 100%; border-top: 1px solid #D2E0F0; border-bottom: 1px solid #D2E0F0; background-color: #10161D; } #main_menu_01 ul li { display: block; } } @media only screen and (max-width: 850px) { logo { font-size: 50px !important; } } /*Fonts**********************************************************************************************************/ @font-face { font-family: "Titillium_Web"; src: url("/assets/fonts/Titillium_Web/TitilliumWeb-Regular.ttf"); font-display: fallback; } @font-face { font-family: "Roboto"; src: url("/assets/fonts/Roboto/Roboto-Bold.ttf"); font-display: fallback; } /*Algemeen*********************************************************************************************************/ body { margin: 0; padding: 0; /* font-family: Titillium_Web , Fallback, sans-serif; */ font-family: Roboto , Fallback, sans-serif; background-color: #171E26; overflow: auto; } #page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 80px; /* Footer height */ } #page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 80px; /* Footer height */ } .container{ max-width: 1140px; } /*Secties*********************************************************************************************************/ #sectie_kop { background-color: #10161D; border-bottom: 2px solid #242D38; } header { padding-top: 10px; padding-bottom: 10px; } #sectie_pagina { background-color: #171E26; min-height: 595px; } #sectie_footer { background-color: #10161D; border-top: 2px solid #242D38; position: absolute; bottom: 0; width: 100%; height: 100px; } /*Standaard*********************************************************************************************************/ /*links**/ #tekst-links{ text-align: left; color: #374351; } #tekst-links h1{ padding-top: 50px; margin-top: 0px; font-size: 42px; margin-bottom: 60px; } #tekst-links h2{ padding-top: 30px; margin-top: 0px; font-size: 30px; margin-bottom: 60px; } #tekst-links p{ background-color: #2B3642; font-size: 15px; } /*midden**/ #tekst-midden{ text-align: center; color: #D2E0F0; } #tekst-midden h1{ padding-top: 50px; margin-top: 0px; font-size: 42px; margin-bottom: 60px; } #tekst-midden h2{ padding-top: 30px; margin-top: 0px; font-size: 30px; margin-bottom: 60px; } #tekst-midden p{ font-size: 18px; } a:active { color: #8d100e; background-color: #2B3642; text-decoration: underline; } a:link{ color: #D2E0F0; background-color: transparent; text-decoration: none; } a:visited { color: rgba(255, 255, 255, 0); background-color: #2B3642; text-decoration: none; } a:hover { background-color: #374351; } /*specials*********************************************************************************************************/ logo { color: #D2E0F0; margin-top: 25px; margin-bottom: 25px; text-transform: uppercase; font-family: Roboto, Fallback, sans-serif; font-size: 50px; text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black, 1px 1px 2px black, 0 0 25px black, 0 0 5px black; } .knop{ text-align: center; padding: 25px 90px 25px 90px; text-decoration: none; border-radius: 5px; font-size: 20px; cursor: pointer; } #knop a:link{ color: #D2E0F0; background-color: #2B3642; text-decoration: none; padding: 25px 25px 25px 25px; } #knop a:visited { color: #D2E0F0; background-color: #2B3642; text-decoration: none; } #knop a:hover { background-color: #374351; } #knop a:active { color: #8d100e; background-color: #2B3642; text-decoration: underline; } #knop_contact{ text-align: center; padding: 0px 0px 25px 0px; text-decoration: none; border-radius: 5px; font-size: 20px; cursor: pointer; } #knop_contact a:link{ color: #D2E0F0; background-color: transparent; text-decoration: none; padding: 25px 25px 25px 25px; } #knop_contact a:visited { color: #D2E0F0; background-color: transparent; text-decoration: none; } #knop_contact a:hover { background-color: #374351; border-radius: 5px; } #knop_contact a:active { color: #8d100e; background-color: #2B3642; text-decoration: underline; border-radius: 5px; } /*menu*********/ nav{ float: right; } nav ul li { display: inline-block; padding: 10px 17px 10px 17px; text-transform: uppercase; margin: 0; } nav ul li.active{ background-color: #2B3642; border-radius: 5px; } nav ul li:hover { background: #374351; border-radius: 5px; cursor: pointer; color: #D2E0F0; text-decoration: none; } nav ul li a { text-decoration: none; color: #D2E0F0 } /*footer*********/ /*footer**cernter*/ .footer-links{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; border-radius: 5px; } .footer-links ul { padding: 0px; display: inline-block } .footer-links ul li { display: inline-block; padding: 15px 17px 15px 17px; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links ul li:hover { display: inline-block; background-color: #374351; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links ul li a { text-decoration: none; color: #D2E0F0; } .footer-links ul li a:hover { text-decoration: none; border-radius: 5px; color: #D2E0F0; } .footer-links ul li a:active { color: #8d100e; } /*footer**links*/ @media { .footer-links-l{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: left; border-radius: 5px; } .footer-links-l ul { padding: 0px; display: inline-block } .footer-links-l ul li { display: inline-block; padding: 15px 17px 15px 17px; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-l ul li:hover { display: inline-block; background-color: #374351; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-l ul li a { text-decoration: none; color: #D2E0F0; } .footer-links-l ul li a:hover { text-decoration: none; border-radius: 5px; color: #D2E0F0; } .footer-links-l ul li a:active { color: #8d100e; } } /*footer**links*klein*/ @media (max-width: 450px) { .footer-links-l{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: left; border-radius: 5px; } .footer-links-l ul { padding: 0px; display: inline-block } .footer-links-l ul li { display: inline-block; padding: 15px 10px 15px 10px; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-l ul li:hover { display: inline-block; background-color: #374351; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-l ul li a { text-decoration: none; color: #D2E0F0; } .footer-links-l ul li a:hover { text-decoration: none; border-radius: 5px; color: #D2E0F0; } .footer-links-l ul li a:active { color: #8d100e; } } /*footer**rechts*/ @media { .footer-links-r{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: right; border-radius: 5px; } .footer-links-r ul { padding: 0px; display: inline-block } .footer-links-r ul li { display: inline-block; padding: 15px 17px 15px 17px; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-r ul li:hover { display: inline-block; background-color: #374351; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-r ul li a { text-decoration: none; color: #D2E0F0; } .footer-links-r ul li a:hover { text-decoration: none; border-radius: 5px; color: #D2E0F0; } .footer-links-r ul li a:active { color: #8d100e; } } /*footer**rechts*small*/ @media (max-width: 450px) { .footer-links-r{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: right; border-radius: 5px; } .footer-links-r ul { padding: 0px; display: inline-block } .footer-links-r ul li { display: inline-block; padding: 15px 10px 15px 10px; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-r ul li:hover { display: inline-block; background-color: #374351; text-transform: uppercase; border-radius: 5px; font-size: 20px; } .footer-links-r ul li a { text-decoration: none; color: #D2E0F0; } .footer-links-r ul li a:hover { text-decoration: none; border-radius: 5px; color: #D2E0F0; } .footer-links-r ul li a:active { color: #8d100e; } } /*footer**bar*/ .footer-links-bar{ max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; border-radius: 0px; } .footer-links-bar ul { padding: 0px; display: inline-block } .footer-links-bar ul li { display: inline-block; padding: 0px 17px 0px 17px; text-transform: uppercase; border-radius: 5px; font-size: 50px; } .footer-links-bar ul li a { text-decoration: none; color: #D2E0F0; } /*uitzonderingen*********************************************************************************************************/