
@font-face {
        font-family: 'MPSBI';
        src: url('MyriadPro-SemiboldIt.eot');
        src: url('MyriadPro-SemiboldIt.woff2') format('woff2'),
            url('MyriadPro-SemiboldIt.woff') format('woff');
        font-weight: 600;
        font-style: italic;
    }

@font-face {
        font-family: 'MyriadPro-Black';
        src:
            url('MyriadPro-Black.woff2') format('woff2'),
            url('MyriadPro-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
    }

    @font-face {
        font-family: 'MPSB';
        src:
            url('MyriadPro-Semibold.woff2') format('woff2'),
            url('MyriadPro-Semibold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'MyriadPro-BlackIt';
        src:
            url('MyriadPro-BlackIt.woff2') format('woff2'),
            url('MyriadPro-BlackIt.woff') format('woff');
        font-weight: 900;
        font-style: italic;
    }

    @font-face {
        font-family: 'MyriadPro';
        src:
            url('MyriadPro-Regular.woff2') format('woff2'),
            url('MyriadPro-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family:'MyriadProBR';
        scr:
            url('MyriadPro-Bold.woff2') format('woff2'),
            url('MyriadPro-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'MyriadPro-BoldIt';
        src: url('MyriadPro-BoldIt.eot');
        src: local('Myriad Pro Bold Italic'), local('MyriadPro-BoldIt'),
            url('MyriadPro-BoldIt.eot?#iefix') format('embedded-opentype'),
            url('MyriadPro-BoldIt.woff2') format('woff2'),
            url('MyriadPro-BoldIt.woff') format('woff'),
            url('MyriadPro-BoldIt.ttf') format('truetype');
        font-weight: bold;
        font-style: italic;
    }

    @font-face {
        font-family: 'MPLI';
        src: url('MyriadPro-LightIt.eot');
        src:url('MyriadPro-LightIt.woff2') format('woff2'),
            url('MyriadPro-LightIt.woff') format('woff'),
            url('MyriadPro-LightIt.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
    }

    @font-face {
        font-family: 'MPI';
        src: url('MyriadPro-It.eot');
        src:url('MyriadPro-It.woff2') format('woff2'),
            url('MyriadPro-It.woff') format('woff');
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: 'MPL';
        src: url('MyriadPro-Light.eot');
        src: local('Myriad Pro Light'), local('MyriadPro-Light'),
            url('MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
            url('MyriadPro-Light.woff2') format('woff2'),
            url('MyriadPro-Light.woff') format('woff'),
            url('MyriadPro-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 200;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('SourceSerif4Display-ExtraLight.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-ExtraLight.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-ExtraLight.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-ExtraLight.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 200;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-ExtraLightIt.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-ExtraLightIt.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-ExtraLightIt.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-ExtraLightIt.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 300;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-Light.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-Light.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-Light.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-Light.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 300;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-LightIt.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-LightIt.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-LightIt.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-LightIt.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif Regular';
        font-weight: 400;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('SourceSerifPro-Regular.otf') format('opentype');

    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 400;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: url('SourceSerifPro-It.otf') format('opentype');
    }

    @font-face{
        font-family: 'Source Serif Semibold';
        font-weight: 600;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('SourceSerifPro-Semibold.otf') format('opentype');
    }

    @font-face{
        font-family: 'Source Serif SemiboldIt';
        font-weight: 600;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: url('SourceSerifPro-SemiboldIt.otf') format('opentype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 700;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-Bold.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-Bold.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-Bold.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-Bold.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 700;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: /*url('./WOFF2/TTF/SourceSerif4Display-BoldIt.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-BoldIt.otf.woff') format('woff'),*/
             url('./OTF/SourceSerif4Display-BoldIt.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-BoldIt.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 900;
        font-display: swap;
        font-style: normal;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-Black.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-Black.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-Black.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-Black.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Source Serif';
        font-weight: 900;
        font-display: swap;
        font-style: italic;
        font-stretch: normal;
        src: url('./WOFF2/TTF/SourceSerif4Display-BlackIt.ttf.woff2') format('woff2'),
             url('./WOFF/OTF/SourceSerif4Display-BlackIt.otf.woff') format('woff'),
             url('./OTF/SourceSerif4Display-BlackIt.otf') format('opentype'),
             url('./TTF/SourceSerif4Display-BlackIt.ttf') format('truetype');
    }

    @font-face{
        font-family: 'Financier';
        font-weight: 400;
        font-display: swap;
        font-stretch: normal;
        src: url('./TestFinancierDisplay-Regular.otf') format('opentype'),

    }

    @font-face{
        font-family: 'Tex Gyre Termes';
        font-weight: 400;
        font-stretch: normal;
        src: url('./texgyretermes-math.otf') format('opentype'),
    }




/*
https://www.w3schools.com/colors/colors_picker.asp
Yellow 50% #e79b18 voor letters
Yellow 60% #ecaf46 voor lijnen *******
yellow 80% #f5d7a3 voor vlakken
yellow 90% #faebd1 voor lichtere vlakken

Red
50% #cb3437
60% #D55C5F
80% #eaaeaf
90% #f5d6d7

Blue
50% #2e7ad1
60% #5995DA
80% #abcaed
90% #d5e4f6
*/



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
body {
color: #414141;              /* Dark gray */
background-color: #FAFAFA;
  /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300; /*#F0F0F0; */ */
font-size: 16px;
}

.page {
display: flex;
flex-direction: column;
align-items: center;
background-color:  #FAFAFA;
/*background-color: yellow;
/*margin: 0 auto;
border: 1px solid red;*/
/*background-image: url("netherlands-3952587.jpg");*/
}

.top {
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.topcontainer81 {
  margin: 0 auto;
  width:inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:  #FAFAFA ;/*#414141; /**/
  /*border: 3px solid Red;*/

}

.topcontainer81text {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:  #FAFAFA;/*#414141; /**/
  overflow:hidden;
  padding-top:10px;
  /*border: 3px solid Blue;*/
}


.bottom {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #414141;
  overflow: hidden;
}

.leader {
  margin: 0 auto;
  width: 100%;
  max-width:1000px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color:  #FAFAFA ;/*#414141; /**/
  padding-top: 20px; /* was 20*/
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom:10px;
  overflow:hidden;
  /*border: 3px solid Blue;*/
}

.header {
  width: 100%;
  max-width:1000px;
  display: flex;
  flex-direction: row;
  background-color: #818181;
  align-items: stretch;
  justify-content: space-between;
  padding-top: 5px; /* was 20*/
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom:10px;
  overflow:hidden;
/*border: 3px solid Yellow;*/

}


.headtext{
  width: 100%;
  max-width:600px;
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content:center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  /*border: 3px solid Red;*/

}

.headtext p {
  font-family: 'MPLI';
  font-weight: 800;
  font-style: italic;/*MyriadPro-SemiboldIt;*/
  font-size: 20px;
  letter-spacing: .2px;
  color:#FAFAFA;/*#e79b18;*/
  line-height: 1.2;
  text-align: left;
}


.mid{
  width:100%;
  margin: 0 auto;
  margin-top:50px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  /*margin-bottom: 70px;*/
  overflow: hidden;
  /*border-top: 5px solid grey;*/
  height:250px;
  background-size: cover;
  background-image: url("RW.jpeg");
  opacity: 1;
  /*tanker1.jpg");*/
  background-repeat: no-repeat;
  /*background-size: 1400px 600px; /*#C70038;*/
  /*background-color: yellow;*/
}

.midtop{
  display: flex;
  flex-flow: row;

  align-items: center;
  justify-content: space-between;
  width:100%;
  max-width:1000px;
  padding-left: 20px;
  padding-right:20px;
  overflow:hidden;
  /*margin-bottom: 70px;*/
/*  border: 3px solid Red;*/
}



.midbottom{
  display: flex;
  flex-flow: row;
  align-items:flex-start;
  justify-content: flex-end;
  width:100%;
  max-width:350px;
/*border: 3px solid Yellow;*/

}

.midbottom p {
  font-family: 'MPLI';
  font-weight: 600;
  font-display: swap;
  font-style: italic;
  font-stretch: normal;
  font-size: 21px;
  /*font-style: Bold; /*MyriadPro-SemiboldIt;*/
  color:#FAFAFA;/*414141 /*#143a66 /*  /* #00234C /*hsl(215, 59%, 29%)*/
  line-height: 1.2;
  text-align: left;

}

a:link,
a:visited {
  color: #414141;
  text-decoration: none;
}

a:link, a:visited .features-icon {
  color: #FAFAFA;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #FAFAFA;
  /*background-color: #cb3437;*/
}

li:hover {
  text-decoration: none;
  background-color: #e79b18 /*#cb3437*/;
  color:#FAFAFA;
}

.topnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /*justify-content: space-between;*/
  background-color: #414141;/* #414141;*/
  width: 100%;
  max-width: 1000px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
}



.active {
  background-color: #cb3437;
  color: #FAFAFA;
}

 .topnav .icon {
  display: none;

}


.menu {
  display: flex;
  height:35px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;

  /*border: 3px solid Red;*/
}




.logo {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;

  /*border: 3px solid Red;*/

}

.socials {
  width: 180px;
  display: flex;
  height:30px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;



  /* border: 3px solid Yellow;*/
}

.subsocials {
  width: 170px;
  height: 30px;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;



  /* border: 3px solid Yellow;*/
}

.socialitem {
  Height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  /*background-color: red;*/
  /*z-index: 4;
  /* border: 3px solid Yellow;*/
}

.search {
  width: 170px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
    /*background-color: red;*/
  /*z-index: 4;
  * border: 3px solid Yellow;*/
}


#searchQueryInput {
  width: 100%;
  height: 2.8rem;
  background: #FEFEFE;
  outline: none;
  border: 1px #414141 solid;
  border-radius: 1.625rem;
  padding: 0 3.5rem 0 1.5rem;
  font-size: 1rem;
}

#searchQuerySubmit {
  width: 3.5rem;
  height: 2.8rem;
  margin-left: -3.5rem;
  background: none;
  border: none;
  outline: none;
}

#searchQuerySubmit:hover {
  cursor: pointer;
}




h1 {
  font-family: 'Source Serif SemiboldIt';
  font-size: 24px;
  /*font-style: Bold; /*MyriadPro-SemiboldIt;*/
  color: #414141;/*f5d7a3;/*414141 /*#143a66 /*  /* #00234C /*hsl(215, 59%, 29%)*/
  line-height: 1.2;
  text-align: center;
  padding-top:20px;
  padding-bottom: 20px;
  /*border: 2px solid blue;*/
}

h2 {
  font-family: 'Source Serif SemiboldIt';
  font-size: 21px;
  font-style: italic; /*MyriadPro-SemiboldIt;*/
  color: #414141 /* #143a66 /* #00234C /*hsl(215, 59%, 29%)*/;
  line-height: 1.2;
  text-align: center;
  padding-top:20px;
  padding-bottom: 20px;
}

.main-text {
  width: 100%;
  max-width:600px;
  display: flex;
  flex-direction: column;
  /*margin-top: 10px;*/
  box-sizing: border-box;
  align-items: left;
  justify-content: left;
  overflow: hidden;
  text-align: left;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color:  #FAFAFA; /*#f4f3f3 ;
  /*border: 2px solid red;
  /*background-color: #FFC400;*/
}

.main-text p {
  font-family: 'Source Serif Regular'; /* 'Financier';/*'Source Serif Regular'; /*'Financier'; /*'Source Serif Regular'; */
  font-style: normal;
  font-stretch: normal;
  font-size: 18px;
  text-align:left;
  /*letter-spacing: .3px;*/
  /*letter-spacing: .3px;
  /*letter-spacing: .3px;*/
  line-height: 1.6;
  color: #414141/*#143a66  /*  /* #00234C   #00234C   /*hsl(215, 59%, 29%)*/;
   /* #13322B;*/
}


.footernaw {
  width: 100%;
  max-width:1000px;
  margin: 0 auto;
  padding-top:30px;
  display: flex;
  flex-direction: column;
  align-items:baseline;
  flex-wrap:nowrap;
  background-color: #414141 /*#00234C /*hsl(215, 59%, #414141 /* 29%)*/;
  padding-left: 20px;
  padding-right: 20px;
  /*border: 3px solid Green;*/
  /*background-color: green;*/
}


.footernaw p {
text-align:left;
font-size: 16px;
font-family: MPL;
/*Roboto;*/
color: #FAFAFA; /*#00234C; /*#143a66;*/
line-height:1.4;
}







@media screen and (max-width: 600px) {


 .mid{
   height:340px;
   padding-top:40px;
   justify-content: flex-start;
 }

}




@media only screen and (min-width: 601px) {

}
