@font-face {
  font-family: titel;
  src: url(../fonts/Roboto-BlackItalic.otf);
}

@font-face {
font-family: body;
src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
font-family: bodytekst;
src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
font-family: link;
src: url(../fonts/Roboto-BoldItalic.ttf);
}




* {
  box-sizing: border-box;
}

#myVideo {
  position: fixed;
  top: 20%;
  left: 2%;
  width: 47%;
  height: 70%;
background-color:#031f6c;

  opacity: 0.1;
}


.content {
  position: fixed;
  top: 40%;
  left: 9%;
  width: 33%;
  color: #FFFFFF;
  padding: 20px;
  z-index:1;
}

.contenttop {
  position: fixed;
  top: 20%;
  left: 9%;
  width: 33%;
  color: #FFFFFF;
  padding: 20px;
  z-index:1;
}


.buttonbar {
  position: fixed;
  top: 20%;
  left: 9%;
  width: 33%;
  height: 10%
  color: #FFFFFF;
  padding: 20px;
  z-index:1;
}







.box1 {
  position: absolute;
  top: 20%;
  left: 2%;
  right: 2%;
  width: 94%;
  max-height: 70%;
  overflow: auto; 
  background-color:#FFFFFF;
  color:black;
  z-index:1;
  overflow: auto; 
  padding: 15px;
       scrollbar-color: white #031f6c;
       overflow-y: auto;

}





.item-1 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
 
.item-2 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;

}
 
.item-3 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}


.item-4 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
 
.item-5 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
 
.item-6 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-7 {
	position: absolute;
  	display: block;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}



.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

.item-5{
	animation-name: anim-5;
}

.item-6{
	animation-name: anim-6;
}

.item-7{
	animation-name: anim-7;
}



@keyframes anim-1 {
  0%, 1% { opacity: -100%; opacity: 0; }
  1%,20% { opacity: 100%; opacity: 1; }
  20%, 25% { opacity: 100%; opacity: 0; }
  25%, 100% { opacity: 0; opacity: -100%; }
}

@keyframes anim-2 {
  0%, 20% { opacity: -100%; opacity: 0; }
  21%, 40% { opacity: 25%; opacity: 1; }
  40%, 45% { opacity: 110%; opacity: 0; }
  45%, 100% { opacity: 0; opacity: -100%; }
}

@keyframes anim-3 {
  0%, 40% { opacity: -100%; opacity: 0; }
  41%, 60% { opacity: 25%; opacity: 1; }
  60%, 65% { opacity: 110%; opacity: 0; }
  65%, 100% { opacity: 0; opacity: -100%; }

}

@keyframes anim-4 {
  0%, 60% { opacity: -100%; opacity: 0; }
  61%,80% { opacity: 25%; opacity: 1; }
  80%, 85% { opacity: 110%; opacity: 0; }
  85%, 100% { opacity: 0; opacity: -100%; }
}

@keyframes anim-5 {
  0%, 80% { opacity: -100%; opacity: 0; }
  81%, 100% { opacity: 25%; opacity: 1; }
  99,5%, 100% { opacity: 110%; opacity: 0; }
}

@keyframes anim-6 {
  0%, 79% { opacity: -100%; opacity: 0; }
  80%,99% { opacity: 25%; opacity: 1; }
  99%, 100% { opacity: 110%; opacity: 0; }
}

@keyframes anim-7 {
  0%, 93% { opacity: -100%; opacity: 0; }
  93%,99% { opacity: 25%; opacity: 1; }
  99%, 100% { opacity: 110%; opacity: 0; }
}




a.menu { font-family:link; color:#CC0000; text-decoration:none; font-weight:bold;  font-size:24px;}
a.menu:hover { font-family:link; color:#fab40a; text-decoration:none;  font-weight:bold; font-size:24px;}

</style>