/* cmsms stylesheet: informere modified: 09-12-19 16:17:29 */
 /* use as color: rgba(253,79,87,1); */
 /* use as color: rgba(60,85,124,1); */

html, body {
    margin: 0 auto;
    min-height: 100%;
    width: 100%;
}

html {
width: 100%;
height: 100%;
font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/*background-image: url(https://informere.nl/uploads/images/Bij-oceaan-aan-rustkust.jpg);*/
background-size: cover;
background-repeat: no-repeat;
background-color: #fff;
font-family: 'Source Sans Pro', sans-serif;
}


body.home-rsp {
background-image: url(https://informere.nl/uploads/images/Bij-oceaan-aan-rustkust.jpg);
}

body.about-rsp {
background-image: url(https://informere.nl/uploads/images/In-gras-Denemarken.jpg);
}

body.services-rsp {
background-image: url(https://informere.nl/uploads/images/Nieuw-Zeeland-duinen.jpg);
}

body.contact-rsp {
background-image: url(https://informere.nl/uploads/images/In-de-duinen-Wadden.jpg);
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.trapezium {
display: none;
}

#container {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow-y: scroll;
z-index: 10;
}

.headercontainer {
display: block;
position: fixed;
width: 100%;
height: 90px;
background-color: #fff;
padding: 1em 0;
z-index: 1;
}

#header {
display: block;
position: relative;
top: -20px;
left: 0;
height: 50px;
width: 290px;
padding: 0 0 0 3em;
background-color: transparent;
}

#header a h1 {
display: block;
position: relative;
height: 50px;
width: 227px;
padding: 0;
background-image: url(https://informere.nl/uploads/images/informere_lighthouse_beam_logo-72ppi1x.png);
background-size: 227px 50px;
background-repeat: no-repeat;
text-indent: -9999px;
z-index: 3;
}

#menu {
display: block;
position: absolute;
width: 100%;
padding-left: 40%;
padding-top: 2.5em;
padding-right: 2em;
z-index: 2;
}

#content {
display: block;
position: relative;
top: 90px;
width: 100%;
height: auto;
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}


#content ul {
list-style-type: disc;
list-style-position: outside;
padding-right: 2em;
padding-bottom: 15px;
padding-left: 17px;
}

#content ul li {
font-weight: 400;
font-size: 13px;
line-height: 21px;
}

#content li {
color: #fff;
padding-right: 0;
padding-left: 2em;
width: 95%;
}

#content ul.over {
list-style-type: disc;
list-style-position: outside;
padding: 0;
}

#content ul.over li {
margin-left: 1em;
}

#content h1 {
color: #fff;
font-weight: 900;
font-size: 20px;
padding-bottom: 18px;
}

#content h3 {
display: block;
width: 100%;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 13px;
padding-bottom: 18px;
padding: 5px;
}

#content p {
display: block;
width: 95%;
color: #fff;
font-weight: 400;
font-size: 13px;
padding-bottom: 10px;
padding-right: 0;
line-height: 21px;
}

#content p a {
color: #fff;
text-decoration: underline;
}

#content p a:hover {
text-decoration: none;
}

.contentblok {
display: block;
position: relative;
width: 100%;
height: auto;
padding: 2em 2em 12em 2em;
background-color: transparent;
border-radius: 0;
z-index: 0;
}

.contentblok:before {
    content:"";
    width: 100%;
    height: calc(100% + 86px);
    position: absolute;
    bottom: 86px;
    left: 0px;
    z-index: -100;
    background: rgba(0,0,0,0.4);
    transform: skew(0deg, 5deg);

}

body.bw .contentblok:before {
    background: rgba(60,85,124,0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(3px);
-moz-backdrop-filter: blur(3px);
}

.miel {
display: inline;
float: left;
width: 48%;
height: auto;
text-align: justify;
padding-left: 1em;
}

.rik {
display: inline;
float: left;
width: 50%;
height: auto;
margin-left: 0;
padding-left: 3em;
/*border-left: 1px dashed #fff;*/
text-align: justify;
}

.miel h1 {
display: block;
height: 100px;
padding: 20px 0 120px 7em;
}

.rik h1 {
display: block;
height: 100px;
padding: 20px 0 120px 7em;
}

.bold {
font-weight: 800;
}

.contentblok img {
display: block;
align: left;
width: 110px;
height: 110px;
border: solid 10px rgba(243,79,87,0.8);
margin: 0 2em 0 0;
border-radius: 62px;
}

.kernwaarden {
display: block;
width: auto;
max-width: 500px;
margin: 0 auto;
}

@media only screen 
and (min-device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: landscape)
{ 
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(https://informere.nl/uploads/images/bkg2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: #fff;
font-family: 'Source Sans Pro', sans-serif;
overflow: scroll;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.trapezium {
display: none;
}

#container {
display: block;
width: 100%;
height: 100%;
position: absolute;
overflow: scroll;
}

.headercontainer {
display: block;
position: fixed;
width: 100%;
height: auto;
background-color: #fff;
padding: 2em 0 1em 0;
z-index: 100;
}

#header {
display: block;
position: relative;
height: 50px;
width: 290px;
padding: 0 0 0 1em;
background-color: transparent;
top: -40px;
}

#header a h1 {
display: block;
position: relative;
height: 50px;
width: 227px;
padding: 0;
background-image: url(https://informere.nl/uploads/images/informere_lighthouse_beam_logo-300ppi2x.png);
background-size: 227px 50px;
background-repeat: no-repeat;
text-indent: -9999px;
z-index: 3;
}

#menu {
display: block;
position: absolute;
width: 100%;
padding-left: 0%;
padding-top: 2.5em;
padding-right: 2em;
z-index: 2;
}

#content {
display: block;
position: relative;
top: 90px;
width: 100%;
height: auto;
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}

#content ul {
list-style-type: disc;
list-style-position: outside;
color: red;
padding-right: 2em;
padding-bottom: 15px;
padding-left: 17px;
}

#content ul li {
font-weight: 400;
font-size: 16px;
line-height: 23px;
}

#content li {
color: #fff;
padding-right: 2em;
padding-left: 1em;
width: 100%;
}

#content ul.over {
list-style-type: disc;
list-style-position: outside;
color: red;
padding-right: 2em;
padding-bottom: 15px;
padding-left: 5px;
}

#content h1 {
color: #fff;
font-weight: 900;
font-size: 18px;
padding-bottom: 18px;
}

#content h3 {
display: block;
width: 100%;
text-align: left;
color: #fff;
font-weight: 700;
font-size: 14px;
padding-bottom: 18px;
padding: 5px;
}

#content p {
display: block;
width: 99%;
color: #fff;
font-weight: 400;
font-size: 16px;
padding-bottom: 15px;
padding-right: 1em;
line-height: 23px;
}

#content p a {
color: #fff;
text-decoration: underline;
}

#content p a:hover {
text-decoration: none;
}

.contentblok {
display: block;
position: relative;
width: 100%;
height: auto;
padding: 2em 2em 12em 2em;
background-color: transparent;
border-radius: 0;
z-index: 0;
}

.contentblok:before {
    content:"";
    width: 100%;
    height: calc(100% + 86px);
    position: absolute;
    bottom: 86px;
    left: 0px;
    z-index: -100;
    background: rgba(0,0,0,0.4);
    transform: skew(0deg, 5deg);
}

.miel {
display: block;
float: left;
width: 100%;
height: auto;
margin-left: 0;
padding-left: 1em;
text-align: justify;
border-left: none;
}

.rik {
display: block;
float: left;
width: 100%;
height: auto;
margin-left: 0;
padding-left: 1em;
text-align: justify;
border-left: none;
}

.miel h1 {
display: block;
font-size: 12px;
height: 75px;
padding: 15px 0 70px 6.5em;
}

.rik h1 {
display: block;
font-size: 12px;
height: 75px;
padding: 15px 0 70px 6.5em;
}

.bold {
font-weight: 800;
}

.contentblok img {
display: block;
width: 90px;
height: 90px;
border: solid 10px rgba(243,79,87,0.8);
margin: 0 2em 70% 0;
border-radius: 45px;
}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait)
{ 
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/*background-image: url(https://informere.nl/uploads/images/Ameland-dichtbij.jpg);*/
background-size: cover;
background-repeat: no-repeat;
background-color: #fff;
font-family: 'Source Sans Pro', sans-serif;
}

body.home-rsp {
background-image: url(https://informere.nl/uploads/images/Ameland-dichtbij.jpg);
}

body.about-rsp {
background-image: url(https://informere.nl/uploads/images/Klein-Hawaii.jpg);
}

body.services-rsp {
background-image: url(https://informere.nl/uploads/images/Corny-point-South-Australia.jpg);
}

body.contact-rsp {
background-image: url(https://informere.nl/uploads/images/Wit-met-lucht-en-wolk.jpg);
}

body.bw {
background-image: url(https://informere.nl/uploads/images/bkg3-bw.jpg);
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.trapezium {
display: none;
}

#container {
display: block;
width: 100%;
height: 100%;
position: absolute;
overflow-y: scroll;
}

.headercontainer {
display: block;

width: 100%;
height: auto;
background-color: #fff;
padding: 1em 0 1em 0;
z-index: 100;
}

#header {
display: block;
position: relative;
height: 50px;
width: 290px;
padding: 0 0 0 1em;
background-color: transparent;
top: -30px;
}

#header a h1 {
display: block;
position: relative;
height: 50px;
width: 227px;
padding: 0;
background-image: url(https://informere.nl/uploads/images/informere_lighthouse_beam_logo-300ppi2x.png);
background-size: 227px 50px;
background-repeat: no-repeat;
text-indent: -9999px;
z-index: 3;

}

#menu {
display: block;
position: relative;
width: 100%;
padding-left: 0%;
padding-top: 2.5em;
padding-right: 2em;
z-index: 2;
}

#content {
display: block;
position: relative;
top: 80px;
width: 100%;
height: auto;
padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}

#content ul {
list-style-type: disc;
list-style-position: outside;
color: red;
padding-right: 2em;
padding-bottom: 15px;
padding-left: 17px;
}

#content ul li {
font-weight: 400;
font-size: 16px;
line-height: 23px;
}

#content li {
color: #fff;
padding-right: 2em;
padding-left: 1em;
width: 100%;
}

#content ul.over {
list-style-type: disc;
list-style-position: outside;
color: red;
padding-right: 2em;
padding-bottom: 15px;
padding-left: 5px;
}

#content h1 {
color: #fff;
font-weight: 900;
font-size: 18px;
padding-bottom: 18px;
}

#content h3 {
display: block;
width: 100%;
text-align: left;
color: #fff;
font-weight: 700;
font-size: 14px;
padding-bottom: 18px;
padding: 5px;
}

#content p {
display: block;
width: 100%;
color: #fff;
font-weight: 400;
font-size: 16px;
padding-bottom: 15px;
padding-right: 1em;
line-height: 23px;
}

#content p a {
color: #fff;
text-decoration: underline;
}

#content p a:hover {
text-decoration: none;
}

.contentblok {
display: block;
position: relative;
width: 100%;
height: auto;
padding: 2em 2em 12em 2em;
background-color: transparent;
border-radius: 0;
z-index: 0;
}

.contentblok:before {
    content:"";
    width: 100%;
    height: calc(100% + 86px);
    position: absolute;
    bottom: 86px;
    left: 0px;
    z-index: -100;
    background: rgba(0,0,0,0.4);
    transform: skew(0deg, 5deg);
}

.miel {
display: block;
float: left;
width: 100%;
height: auto;
margin-left: 0;
padding-left: 1em;
text-align: left;
border-left: none;
}

.rik {
display: block;
float: left;
width: 100%;
height: auto;
margin-left: 0;
padding-left: 1em;
text-align: left;
border-left: none;
}

.miel h1 {
display: block;
width: 100%;
clear: both;
height: auto;
padding: 15px 0 0 0;
}

.rik h1 {
display: block;
width: 100%;
clear: both;
font-size: 18px;
height: auto;
padding: 15px 0 0 0;
}

.bold {
font-weight: 800;
}

.contentblok img {
display: block;
width: 90px;
height: 90px;
border: solid 10px rgba(243,79,87,0.8);
margin: 0 2em 0 0;
border-radius: 45px;
}

}
@media only screen  
and (max-device-width: 767px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) 
{
.headercontainer {
display: block;

width: 100%;
height: auto;
background-color: #fff;
padding: 1em 0 0 0;
z-index: 100;
}
#header {
padding-top: 0.6em;
}
}

@media only screen  
and (max-device-width: 767px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) 
{
.headercontainer {
display: block;

width: 100%;
height: auto;
background-color: #fff;
padding: 1em 0 0 0;
z-index: 100;
}
#header {
padding-top: 0;
}
}