lermer.nl/assets/css/mrl.css

587 lines
12 KiB
CSS
Raw Normal View History

2023-01-08 12:52:20 +01:00
/*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;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
font-size: 50px;
position: absolute;
right: 15px;
top: 10px;
}
nav{
display: none;
}
#main_menu_01 {
width: 100%;
2023-01-08 14:34:02 +01:00
border-top: 1px solid #D2E0F0;
border-bottom: 1px solid #D2E0F0;
background-color: #10161D;
2023-01-08 12:52:20 +01:00
}
#main_menu_01 ul li {
display: block;
}
}
2023-01-11 17:16:42 +01:00
@media only screen and (max-width: 850px) {
2023-01-08 12:52:20 +01:00
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;
}
#content-wrap {
2023-06-19 21:42:03 +02:00
padding-bottom: 0px; /* Footer height */
2023-01-08 12:52:20 +01:00
}
.container{
max-width: 1140px;
}
/*Secties*********************************************************************************************************/
#sectie_kop {
background-color: #10161D;
border-bottom: 2px solid #242D38;
}
header {
padding-top: 10px;
padding-bottom: 10px;
}
#sectie_pagina {
2023-06-19 21:42:03 +02:00
background-color: #171E26;
min-height: calc(100vh - 200px);
2023-06-15 22:16:43 +02:00
padding-bottom: -100px;
2023-01-08 12:52:20 +01:00
}
2023-06-19 21:42:03 +02:00
#sectie_pagina_train {
min-height: calc(100vh - 290px);
padding-bottom: -100px;
background-image: url('/assets/afb/train.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
2023-01-08 12:52:20 +01:00
#sectie_footer {
background-color: #10161D;
border-top: 2px solid #242D38;
2023-06-15 21:58:05 +02:00
position: relative;
2023-01-08 12:52:20 +01:00
bottom: 0;
width: 100%;
2023-04-19 20:42:02 +02:00
height: 100px;
2023-01-08 12:52:20 +01:00
}
/*Standaard*********************************************************************************************************/
/*links**/
#tekst-links{
text-align: left;
2023-06-11 14:52:52 +02:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
}
#tekst-links h1{
2023-04-19 20:54:48 +02:00
padding-top: 50px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 42px;
margin-bottom: 60px;
}
#tekst-links h2{
2023-01-11 17:16:42 +01:00
padding-top: 30px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 30px;
margin-bottom: 60px;
}
#tekst-links p{
background-color: #2B3642;
font-size: 15px;
}
/*midden**/
#tekst-midden{
text-align: center;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
}
#tekst-midden h1{
2023-04-20 13:24:07 +02:00
padding-top: 50px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 42px;
margin-bottom: 60px;
}
#tekst-midden h2{
2023-01-11 17:16:42 +01:00
padding-top: 30px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 30px;
margin-bottom: 60px;
}
#tekst-midden p{
font-size: 18px;
}
a:active {
2023-01-16 20:20:29 +01:00
color: #8d100e;
2023-01-08 12:52:20 +01:00
background-color: #2B3642;
text-decoration: underline;
}
a:link{
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
background-color: transparent;
text-decoration: none;
}
a:visited {
color: rgba(255, 255, 255, 0);
background-color: #2B3642;
text-decoration: none;
}
a:hover {
2023-01-16 19:28:18 +01:00
background-color: #374351;
2023-01-08 12:52:20 +01:00
}
/*specials*********************************************************************************************************/
2023-05-08 21:03:36 +02:00
.logo {
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
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;
2023-01-16 20:20:29 +01:00
padding: 25px 90px 25px 90px;
2023-01-08 12:52:20 +01:00
text-decoration: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
2023-01-11 17:16:42 +01:00
2023-01-08 12:52:20 +01:00
}
#knop a:link{
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-16 19:28:18 +01:00
background-color: #2B3642;
2023-01-08 12:52:20 +01:00
text-decoration: none;
2023-01-16 19:28:18 +01:00
padding: 25px 25px 25px 25px;
2023-01-08 12:52:20 +01:00
}
#knop a:visited {
2023-01-16 19:28:18 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
background-color: #2B3642;
text-decoration: none;
}
#knop a:hover {
2023-01-16 19:28:18 +01:00
background-color: #374351;
2023-01-16 20:20:29 +01:00
2023-01-08 12:52:20 +01:00
}
#knop a:active {
2023-01-16 20:20:29 +01:00
color: #8d100e;
2023-01-08 12:52:20 +01:00
background-color: #2B3642;
text-decoration: underline;
}
2023-01-16 20:20:29 +01:00
#knop_contact{
text-align: center;
padding: 0px 0px 25px 0px;
text-decoration: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
2023-01-08 12:52:20 +01:00
}
2023-01-16 20:20:29 +01:00
#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;
}
2023-01-08 12:52:20 +01:00
/*menu*********/
nav{
float: right;
}
2023-06-11 14:52:52 +02:00
2023-01-11 17:16:42 +01:00
nav ul li {
display: inline-block;
padding: 10px 17px 10px 17px;
text-transform: uppercase;
margin: 0;
2023-01-08 12:52:20 +01:00
}
2023-01-11 17:16:42 +01:00
nav ul li.active{
background-color: #2B3642;
border-radius: 5px;
}
nav ul li:hover {
background: #374351;
border-radius: 5px;
color: #D2E0F0;
text-decoration: none;
}
nav ul li a {
text-decoration: none;
color: #D2E0F0
}
2023-01-08 12:52:20 +01:00
/*footer*********/
2023-04-19 20:42:02 +02:00
/*footer**cernter*/
2023-01-08 12:52:20 +01:00
.footer-links{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
2023-01-11 17:16:42 +01:00
border-radius: 5px;
2023-04-19 20:42:02 +02:00
}
2023-06-11 14:52:52 +02:00
.footer-links ul {
2023-01-08 12:52:20 +01:00
padding: 0px;
display: inline-block
}
2023-04-19 20:42:02 +02:00
.footer-links ul li {
2023-01-08 12:52:20 +01:00
display: inline-block;
2023-01-16 20:20:29 +01:00
padding: 15px 17px 15px 17px;
2023-01-08 12:52:20 +01:00
text-transform: uppercase;
2023-01-11 17:16:42 +01:00
border-radius: 5px;
2023-01-08 12:52:20 +01:00
font-size: 20px;
}
2023-01-16 19:28:18 +01:00
.footer-links ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
2023-01-08 12:52:20 +01:00
.footer-links ul li a {
text-decoration: none;
2023-01-16 19:28:18 +01:00
color: #D2E0F0;
}
.footer-links ul li a:hover {
text-decoration: none;
2023-01-16 20:20:29 +01:00
border-radius: 5px;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
}
2023-01-16 20:20:29 +01:00
.footer-links ul li a:active {
color: #8d100e;
}
2023-04-19 20:42:02 +02:00
/*footer**links*/
2023-05-08 21:03:36 +02:00
@media only screen and (min-width: 450px) {
2023-04-20 13:24:07 +02:00
.footer-links-l{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-radius: 5px;
2023-04-19 20:42:02 +02:00
}
2023-06-11 14:52:52 +02:00
.footer-links-l ul {
2023-04-20 13:24:07 +02:00
padding: 0px;
display: inline-block
}
.footer-links-l ul li {
2023-04-19 20:42:02 +02:00
display: inline-block;
2023-04-20 13:24:07 +02:00
padding: 15px 17px 15px 17px;
2023-04-19 20:42:02 +02:00
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
2023-04-20 13:24:07 +02:00
.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;
}
2023-04-19 20:42:02 +02:00
.footer-links-l ul li a:active {
color: #8d100e;
2023-04-20 13:24:07 +02:00
}
}
2023-04-19 20:42:02 +02:00
2023-04-20 13:14:30 +02:00
/*footer**links*klein*/
2023-05-08 21:03:36 +02:00
@media only screen and (max-width: 450px) {
2023-04-20 13:14:30 +02:00
.footer-links-l{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-radius: 5px;
}
2023-06-11 14:52:52 +02:00
.footer-links-l ul {
2023-04-20 13:14:30 +02:00
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;
}
}
2023-04-19 20:42:02 +02:00
/*footer**rechts*/
2023-05-08 21:03:36 +02:00
@media only screen and (min-width: 450px) {
.footer-links-r{
2023-04-19 20:42:02 +02:00
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
border-radius: 5px;
}
2023-06-11 14:52:52 +02:00
.footer-links-r ul {
2023-04-19 20:42:02 +02:00
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;
}
2023-04-20 13:14:30 +02:00
}
2023-04-19 20:42:02 +02:00
2023-04-20 13:14:30 +02:00
/*footer**rechts*small*/
2023-05-08 21:03:36 +02:00
@media only screen and (max-width: 450px) {
2023-04-20 13:14:30 +02:00
.footer-links-r{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
border-radius: 5px;
}
2023-06-11 14:52:52 +02:00
.footer-links-r ul {
2023-04-20 13:14:30 +02:00
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;
}
}
2023-04-19 20:42:02 +02:00
/*footer**bar*/
.footer-links-bar{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 0px;
2023-05-15 21:39:56 +02:00
color: #D2E0F0;
2023-04-19 20:42:02 +02:00
}
.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;
}
2023-06-11 14:52:52 +02:00
/*Link tree*********************************************************************************************************/
.links-container {
display: flex;
flex-direction: column;
jusify-content: center;
align-items: center;
}
.links-container a {
width: 80%;
font-size: 20px;
padding-top: 15px;
padding-bottom: 15px;
background-color: #374351;
}
.mrl-button{
2023-06-19 21:03:43 +02:00
max-width: 300px;
2023-06-11 14:52:52 +02:00
margin-bottom: 10px;
border-radius:16px;
border:2px solid #ddd;
text-align: center;
padding:8px 16px
}
.mrl-button:hover{
color:#000!important;
background-color:#ddd !important
}
2023-01-08 12:52:20 +01:00
/*uitzonderingen*********************************************************************************************************/