@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: .33s;
}

::view-transition-old(root) {
  animation: .33s ease-in both leave;
}

::view-transition-new(root) {
  animation: .33s ease-in both enter;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0s;
  }
}

body{
    background: #0096D4;
    background: radial-gradient(ellipse, rgba(139, 203, 240, 1) 0%, rgba(0, 167, 222, 1) 90%, rgba(0, 150, 212, 1) 100%);
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    top:0px;
    left: 0px;
    width:100vw;
    height: 100vh;
    color: #FFF;
    font-family: 'Helvetica Now Display';
}

.container{
    color: #FFF;
    font-family: 'Helvetica Now Display';
}


.title_big{
    position: relative;
    left:150px;

}

.title_big_blue, .title_big_white{
    font-size: 3.5rem;
    font-weight:800;
    background-color: #00467F;
    display:table;
    padding:.25em;
    margin: 0px;
    opacity:0; /*for the jquery fadein*/
}

.title_big_white{
    background-color: rgba(0,0,0,0);
    color: #00467F;
}


.title_big_blue:first-child{
    padding-top: .5em;
}

.title_sub{
    position: relative;
    left: 150px;
    opacity: 0;
}
.title_center{
    position: relative;
    left: 0px;
    width: 100vw;
    top:128px;
    text-align: center;
}

.title_sub h1, .title_center h1{
    font-size: 4rem;
    font-weight: 800;
}

.title_center .paragraph{
    position: relative;
    font-size: 1.5rem;
    line-height: 3rem;
    color: #00467F;
    width: 40vw;
    left:30vw;
    text-align: left;
}


.go_back{
    position: fixed;
    top:24px;
    left:24px;
    float: right;
    font-size: 2em;
    line-height: 150px;
    height:150px;
    scale: 1;
    opacity: 0;
}

.go_home{
    position: fixed;
    top:24px;
    right:24px;
    float: right;
    font-size: 2em;
    line-height: 150px;
    height:150px;
    scale: 1;
    opacity: 0;
}

.current_page{
    position: relative;
    left:50px;
    height: 150px;
    top:24px;
    width: fit-content;
}

.terug{
    position:relative;
    top: -20px;
    left:-14px;
}

.current_page .current_title{
    float: right;
    font-size: 2em;
    line-height: 150px;
    height:150px;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    padding-left: 1em;
    opacity: 0;
}

.current_icon{
    display: inline-block;
  /*  float: right;*/
    vertical-align: middle;
}

#icon_1{
    transition-delay: 1s;
}

.items{
    position: relative;
    left:150px;
    opacity: 1;

}

.items_right_top{
    position: fixed;
    right:16px;
    top:16px;
    width: 100vw;
    text-align: right;
    opacity: 1;

}

.item{
    display: inline-block; 
    text-align: center;
    vertical-align: top;
    scale: 1;
    width: 180px;
    margin-left: 8px;
    margin-right: 8px;
}

.paddingtop180{
    padding-top: 180px;
}

.width150{
    width: 150px; 
}
.width200px{
    width: 200px;
}

.width150px{
    width: 150px;
}

.noPadding{
    padding: 0;
}

.item p{
    /*font-size: 1.5em;*/
    font-weight: 700;
}
.opacity0{
    opacity: 0;
}

.item_icon{
    width: 72;
    height: 72px;
      -webkit-filter: drop-shadow(2px 2px 5px #00467F);
  filter: drop-shadow(2px 2px 5px #00467F);
}


.item_icon_big{
    width: 96px;
    height: 96px;
      -webkit-filter: drop-shadow(2px 2px 5px #00467F);
  filter: drop-shadow(2px 2px 5px #00467F);
}

.padding16{
    padding: 16px;
}


.margin_top_0{
    margin-top: 0px;
}

.vms_container{
    position: absolute;
    top:250px;
    left:912px;
}

.vms_image, .farmer_image{
    opacity: 0;
    scale:1;
}

.farmer_image{
    position: absolute;
    top:-50px;
    left:475px;
}


.select_to_continue{
    position: fixed;
    bottom: 150px;
    font-size: 2.5em;
    font-weight: 300;
    text-align: center;
    width: 100vw;
    scale:1;
    opacity: 0;
}

.select_to_continue_small{
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    scale:1;
    opacity: 0;
    overflow: hidden;
}


.select_to_continue2{
    font-size: 2.5em;
    font-weight: 300;
    text-align: center;
    width: 100vw;
    scale:1;
    opacity: 0;
}

.logo_bottom{
    position:fixed;
    z-index:999;
    width:159px;
    height:60px;;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    right:200px;
    bottom:96px;
}

.footer_menu{
    position: fixed;
    width: 100vw;
    height: 96px;
    background-color: #00467F;
    left: 0px;
    bottom: 0px;
    line-height: 96px;
}

.footer-wrap {
    margin: 0 auto;
    width:100vw;
    scale:1;
    opacity: 0;
}
.button {
    margin: 16px;
    width: 20vw;
    height: 32px;
    text-align: center;
    display: table-cell;
    border-right: solid #4678A2 1px;  
    vertical-align: middle;
}

.button.w-10{
    width: 10vw;
}
.button.w-20{
    width: 20vw;
}


.button.w-40{
    width: 40vw;
}

.button.title{
    font-size: 2em;
    font-weight:bold;
    margin:0px;
}

.button:last-child {
    border: 0px;
}


.showDivById{
    opacity: 0;
    position: fixed;
    top:200px;
    width: 80vw;
    left: 4vw;
}


.showDivById H1{
    font-size: 2.5em;
}

.showDivById .details{  
    position: fixed;
  top: 296px;
  left: 416px;
  width: 70vw;
  
}


.details_bg{
    background-color: #fff;
    height: 52vh;
    width: 100%;
    border-radius: 16px;
    position: absolute;
    top:0px;
    padding: 16px;
    padding-top: 0px;
}



.details_bg h1{
    color: #00467F;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 1.75em;
}

.details_bg p, .details_bg li{
    color: #444;
    font-size: 1.25em;
    line-height: 1.5em;
    margin-top: 8px;
}

.video_overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 96px;
    background-color: rgba(10,10,10,0.8);
   /* text-align: center;*/
}


.video_overlay video{
    position: absolute;
    height: calc(100vh - 96px);
    left:85px;
      max-width: calc(100vw - 85px - 85px);

}

.block_pointer{
pointer-events: none;
}

.video_start_image img{
    width: 250px;
}
.video_start_image{
    position: relative;
    width: 250px;
}


.player {
  background: none;
  width: 50px;
  height: 50px;
  border: solid 5px #fff;
  border-radius: 100%;
  position: absolute; 
  text-indent:-9999px;
  /*box-shadow: 1px 1px 3px #999999;*/
  filter: drop-shadow(0px 1px 5px #999);
  display: inline-block;
  top:calc(50% - 25px);
  left:calc(50% - 25px);
}

.player span {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 20px solid #fff;
  border-bottom: 15px solid transparent;
  position:absolute;
  top:20%;
  left:36%;    
  filter: drop-shadow(0px 1px 5px #999);
}

.half{
    width: calc(50% - 32px);
    float: left;
    padding: 16px;
}


.quart{
    width: calc(25% - 32px);
    float: left;
    padding: 16px;
}

.threequart{
    width: calc(75% - 32px);
    float: left;
    padding: 16px;
}

.item_image{
    position: relative;
    text-align: center;
    top:16px;
    left: 16px;
    width: 256px;
}


.margin-bottom-0{
    margin-bottom: 0px;
}

.smaller_text_titles{
    font-size: 1.2em;
}
.normal_text_titles{
    font-size: 1.5em;
}


.subitem{
    text-align: center;
    padding: 32px;
    display: inline-block;
    padding-top:128px; 
}

.center{
    text-align: center;
}

.knop_vms{background-color: #00467F;
  padding: 12px;
  border-radius: 8px;
  width: 160px;
  left:180px;
}

.item_vimage{
    width: 242px;
}


.item_vimage_sm{
    width: 164px;
}


.vms_content{
    position: relative;
    background-color: #fff;
    width: 80vw;
    height: 752px;
    left:10vw;
    border-radius: 85px;
}

.vms_collapse_container{
    width: 40vw;
    height: 100%;
    
    float: left;
}

.vms_image_container{
    vertical-align: middle;
    text-align: center;
    position: relative;
    height: 100%;
    float: right;
}

.vms_image_container img{
    position: relative;
    top:160px;
    width: 760px;
}


.vms_button_left{
    background-color: #00467F;
    padding: 1.25em;
    border-radius: 8px;
}