/* View port (height: 100vh) => html => body
Adding height: 100% to isn't a good idea.
If you do that, the html ist just as height as the browser window und the longer content flows out of html.
This can produce strange behaviors and is hard to debug.
What you can do is min-height: 100vh; on the element to fit the screen viewport size and let it grow if the content is longer.
The html will also have the same size as the body.
*/
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
/* min-height: 100vh; */
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: #353535;
}
#header {
position: flex; /* fixed; flex; relative; */
top: 0;
min-height: 155px;
max-height: auto;
width: 100%;
border-bottom: 1px solid #009DAC;
}
#header-inner {
position: center;
display: block;
vertical-align: middle;
overflow: visible;
visibility: visible;
width: 100%;
height: 155px;
/* margin: 0 auto; */
text-align: center;
}
#amh-menu {
position: absolute;
display: inline-block;
}
ul #menu-mainmenu-1 {}
ul #bodylist {
list-style-position: outside;
text-align: left;
}
li {
list-style: circle;
display: inline-block;
}
li a {
color: #017C8E;
padding: 10px 10px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
}
li a:hover {
color: #f89c18;
}
#wrapper {
position: relative; /* flex; absolute; */ /* this will fix the unwanted margin between header and body */
height:auto; /*!important; */
min-height:100%;
visibility: visible;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
position: absolute; /* this will fix the unwanted margin between header and body */
visibility: visible;
top: 0px;
width: 100%;
/* margin: 0 auto; */
padding: 0;
border: 0;
/* licht zand gele achtergrond */
background-color: #fffcb0;
/* licht gele achtergrond */
/* background-color: #FFFF84; */
/* roze achtergrond */
/* background-color: #fee3e3; */}
#content-inner {
position: flex;
text-align: center;
width: 100%;
margin: 0px 0 100px 0; /* 60px 0 150px 0 */
padding: 0;
border: 0;
}
a {
color: #fe8301;
}
a:hover {
color: #353535;
}
.boldtext {
font-family: Arial,Helvetica,sans-serif;
font-size: 25px;
color: #8000FF;
margin: 0 0 8px 0;
}
.domain {
text-align: center;
vertical-align: middle;
font-family: Arial,Helvetica,sans-serif;
font-size: 19px;
font-weight: normal;
color: #ff8400;
}
.smalltext {
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
color: #353535;
margin: 0 0 8px 0;
}
.button {
margin-top: 15px;
padding: 20px;
/*background-color: #fe8301;*/
/* Alphamega oranje
background: -webkit-linear-gradient(left, rgba(237,105,11,1) 0%,rgba(237,105,11,1) 34%,rgba(242,164,62,1) 74%,rgba(242,161,55,1) 100%,rgba(244,191,117,1) 100%,rgba(244,191,117,1) 100%) !important;
*/
/*Alpha rood
background: -webkit-linear-gradient(left, rgba(228,35,18,1) 0%,rgba(228,35,18,1) 34%,rgba(242,103,91,1) 74%,rgba(241,91,80,1) 100%,rgba(244,133,123,1) 100%,rgba(244,133,123,1) 100%) !important;
*/
/* Coran kerk groen (donker 31,145,2 midden 37,179,2 licht 50,239,3 bleek 131,253,100 wittig 181,254,163 */
background: -webkit-linear-gradient(left, rgba(31,145,2,1) 0%,rgba(31,145,2,1) 34%,rgba(37,179,2) 74%,rgba(50,239,3,1) 100%,rgba(181,254,163,1) 90%,rgba(131,253,100,1) 100%) !important;
color:#fff;
font-size: 20px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-decoration: none;
}
.button:hover {
color:#fff;
text-decoration: underline;
}
.button_alert {
margin-top: 15px;
padding: 20px;
/*background-color: #fe8301;*/
/* Alphamega oranje
background: -webkit-linear-gradient(left, rgba(237,105,11,1) 0%,rgba(237,105,11,1) 34%,rgba(242,164,62,1) 74%,rgba(242,161,55,1) 100%,rgba(244,191,117,1) 100%,rgba(244,191,117,1) 100%) !important;
*/
/*Alpha rood */
background: -webkit-linear-gradient(left, rgba(228,35,18,1) 0%,rgba(228,35,18,1) 34%,rgba(242,103,91,1) 74%,rgba(241,91,80,1) 100%,rgba(244,133,123,1) 100%,rgba(244,133,123,1) 100%) !important;
/* Coran kerk groen (donker 31,145,2 midden 37,179,2 licht 50,239,3 bleek 131,253,100 wittig 181,254,163
background: -webkit-linear-gradient(left, rgba(31,145,2,1) 0%,rgba(31,145,2,1) 34%,rgba(37,179,2) 74%,rgba(50,239,3,1) 100%,rgba(181,254,163,1) 90%,rgba(131,253,100,1) 100%) !important;
*/
color:#fff;
font-size: 20px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-decoration: none;
}
.button_alert:hover {
color:#fff;
text-decoration: underline;
}
.button_orange {
margin-top: 15px;
padding: 20px;
/*background-color: #fe8301;*/
/* Alphamega oranje */
background: -webkit-linear-gradient(left, rgba(237,105,11,1) 0%,rgba(237,105,11,1) 34%,rgba(242,164,62,1) 74%,rgba(242,161,55,1) 100%,rgba(244,191,117,1) 100%,rgba(244,191,117,1) 100%) !important;
color:#fff;
font-size: 20px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-decoration: none;
}
.button_orange:hover {
color:#fff;
text-decoration: underline;
}
#footer{
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: #fff;
border-top: 1px solid #009DAC;
}
#footer-inner {
width: 100%;
/* width: 1000 px; */
/* height: 110; */
text-align: center;
vertical-align: middle;
margin: 0 auto;
padding-top: 5px;
color: #017C8E;
}