/^@import url(https://fonts.googleapis.com/css?family=Open+Sans);*/

* { box-sizing: border-box; }


@font-face {
  font-family: myFont;
  src: url('TektonPro-BoldObl.otf');
}

html {
    font-family: myFont;
    text-align: left;
    font-size: calc(1em + 1vw);
    color: #FFFFFF;
}
body { 
    border: 0px;
    margin: 0px;
    padding: 0px;

    text-align: left;
    font-size: 1.2em

    background-color: #000000;
    background-image: url('../images/bg.jpg');
    background-repeat: repeat;

}
TD {
  white-space: nowrap;
}
H2 {
   text-align: center;
}

a:link {
  color: white;
  text-decoration: none;
}

/* visited link */
a:visited {
  text-decoration: none;
  color: white;
}

/* mouse over link */
a:hover {
  text-decoration: none;
  color: yellow;
  background-color: rgba(240, 240, 9, 0.22 );
 
  box-shadow:         10px 10px 99px 6px rgba(240, 240, 9, 1);
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 240, 9, 1);
  -moz-box-shadow:    10px 10px 99px 6px rgba(240, 240, 9, 1);
}

/* selected link */
a:active {
  text-decoration: none;
  color: white;
}


/* STRUCTURE */

@keyframes moving1 {
  0%   {transform: translateX(-6000px);}
  5%   {transform: translateX(-4500px);}
  20%  {transform: translateX(-4500px);}
 
  25%  {transform: translateX(-3000px);}
  40%  {transform: translateX(-3000px);}

  45%  {transform: translateX(-1600px);}
  60%  {transform: translateX(-1600px);}

  65%  {transform: translateX(100px);}
  90%  {transform: translateX(100px);}
  100% {transform: translateX(3000px);}
}

@keyframes moving2 {
  0%   {transform: translateX(-2000px);}
  30%  {transform: translateX( -2000px);}
  50%  {transform: translateX(0px);}
  100% {transform: translateX(0px);}
}


.page {
        width: 216mm;
        min-height: 303mm;
        padding: 0cm;
        margin: 0cm;
}
@page {
        size: A4;
        margin: 0;
      
}
@media print {
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
}

.hout { 
    border: 0px;
    margin: 0px;
    padding: 0px;
    background-image: url('../images/hout.jpg');
    background-repeat: repeat;
}



.wrapper {
	padding: 5px;
	max-width: 960px;
	width: 95%;
	margin: 20px auto;
}
header {
	padding: 0 15px;
}

.mid {
   text-align: center;
   font-size: 1.6em

}
.midsmall {
   text-align: center;
   font-size: 1.2em
}


.columns {
	text-align: left;

	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}

.prijsmenu {
   background:#888888;
   background:rgba(0,0,0,0.4);
   padding: 0px;
 
   width: 92%;
   vertical-align: middle;
   white-space: nowrap;
}


.pdfprijs {

   position:absolute;
   top:0px;
   left:0px;

   size: A4;
   margin: 0;
   width: 216mm;

   color : white;
   text-align: center;
}

.frame {
        padding: 5mm;
}

.menu {
   position:absolute;
   top:0px;
   left:0px;
   right:0%;
   width:120%;
   color : white;
   background:#000000;
   background:rgba(0,0,0,0.5);
   font-family: arial, helvetica, sans-serif;
   text-align: left;
   padding: 2px;

   width: 100%;
   vertical-align: middle;


}

.responsive {
  width: 100%;
  height: auto;
}


.mover1 {
   position: relative;
   animation-name: moving1;
   animation-iteration-count: infinite;
   animation-duration: 20s; 
   animation-timin-function: ease-in-out;
}

.mover2 {
   position: relative;
   animation-name: moving2;
   animation-iteration-count: 1;
   animation-duration: 4s;
   animation-timin-function: ease-in-out;
}


.column {
	flex: 1;
/*	border: 1px solid gray;*/
	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
	
}

footer {
	padding: 0 15px;
}


@media screen and (max-width: 980px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
}

@media screen and (max-width: 680px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
}