lermer.nl/assets/css/mrl.css

585 lines
12 KiB
CSS
Executable file

/*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: #D2E0F0;
}
#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;
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 only screen and (min-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 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 only screen and (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 only screen and (min-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 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 only screen and (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;
color: #D2E0F0;
}
.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;
}
/*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{
width: 80%;
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
}
/*uitzonderingen*********************************************************************************************************/