/*@font-face {
  font-family: ScalaSans;
  Veranderen naar paths van het font 
  src: url(scalasans.eot); /* IE9 Compat Modes 
  src: url(scalasans.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */ 
       url(scalasans.ttf)  format('truetype'), /* Safari, Android, iOS 
       url(scalasans.otf)  format('opentype');
  
}*/
body{
  
}
form{
  height:100%;
  width:100%;
}
p{
  font-family: Arial;
  padding:5px;
  color:rgb(0,32,70);
}
h1{
  font-family: Arial;
  font-size: 30px;
  color:rgb(0,142,198);
}
h2{
  font-family: Arial;
  font-size: 45px;
  color:rgb(0,142,198);
}
h3{
  font-family: Arial;
  font-size: 20px;
  color:rgb(0,142,198);
  margin-left:32%;
}
a{
  text-decoration : none; 
  color : #000;
}
.T{
  float:right; 
  font-size:1vw;
  width:92%;
  margin-left:0;
  margin-top:0;
}
.resul{
  float:left;
  font-size:1.1vw;
  padding:0;
  padding-left:0.8%;
  left:0;
  width:49%;
  height:90%;
  position: absolute;
  margin-top:-1%;
}
.background{  
  width: 100%;
  height:100%;
  position:fixed;
  background-image:url('img/background.jpg');
   background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
 /* -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  */
  display: block;
  z-index: 1;
  padding:0;
  margin:0;
  left:0;
  top:0;
}

.container{
  position: relative;
  width:95%; 
  top:50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform:translateY(-50%); 
  transform: translateY(-50%);
  text-align: center;
  left:0;
  right: 0;
  margin:auto;
}
.toekomst{
  width:70%;
  height:6%;
  overflow:hidden;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  display:block;
}
.question{
  width:70%;
  height:70%;
  text-align:center;
  background: linear-gradient(45deg, transparent 3%, #ffffff 3%);
  z-index: 9999;
 /* box-shadow: 5px 5px 70px 2px #000;*/
  margin: auto;  
  position: fixed;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#myProgress {
    width: 100%;
    background-color: white;
    position: absolute;
}
#myBar {
    height: 10px;
    background-color: rgb(0,142,198);
    position: absolute;
}

input[type=radio] {
  display: none;
}
label {
  display: inline-block;
  color:rgb(0,32,70);
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 50px;
  font-size: 1.4vw;
  font-family: 'Helvetica';
}
.check{
  font-size:11px;
}
table{
  text-align:left;
    border-spacing: 15px;
}
label:before {
  content: "";
  display: inline-block;

  width: 16px;
  height: 16px;

  margin-right: 20px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #eee;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

label:hover:before {
 background-color: #ccc;
}

.radio label:before {
  border-radius: 8px;
}

input[type=radio]:checked + label:before {
  content: "\2022";
  color: #555;
  font-size: 30px;
  text-align: center;
  line-height: 18px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + label:before {
  content: "\2713";
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 30px;
  color: #555;
  line-height: 15px;
}
.checkbox label:before {
  border-radius: 3px;
}

input[type=button]{
  color:rgb(239,238,236);
  cursor: pointer;
  font-family:'Helvetica';
  font-size:25px;
  border:none;
  width:37%;
  height:10%;
  position: absolute;
  bottom:   7%;
  box-shadow: 2px 2px 1px #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.5s;  
  -o-transition: background-color 0.5s; 
  -webkit-transition: background-color 0.5s; /* Safari */
  transition: background-color 0.5s;

}
 
input[type=button]:hover{
  background-color: #001E50;
  cursor: pointer;

}

input[type=submit]{
  color:rgb(239,238,236);
  background-color: #036;
  cursor: pointer;
  font-family:'Helvetica';
  font-size:25px;
  border:none;
  width:37%;
  height:10%;
  position: absolute;
  bottom:   7%;
  float: right;
  right:    10%;
  box-shadow: 2px 2px 1px #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.5s;  
  -o-transition: background-color 0.5s; 
  -webkit-transition: background-color 0.5s; /* Safari */
  transition: background-color 0.5s;
}

.back{
  float: left;
  left:10%;
  background-color:#004174;
}
.next{
  float: right;
  right:10%;
  background-color: #036;
}
.next2{
  float: right;
  right: 10%;
  background-color:#036;
}
input[type=submit]:hover{
  background-color: #001E50;
  cursor: pointer;
}

input[type=number]{
 width:5%;
 float: left;
 margin-top:1.4%;
 margin-bottom:4.5%;
}
#hbo{
  width:30%;
  float:none;
  left:0;
  right:0;
  margin:auto;
}


.outer{
  width:70%;
  left:0;
  right: 0;
  margin:auto;
  padding:20px;
  height:4px;
  position: relative;
  background-color:#ffffff;
  text-align:left;
  box-shadow: 1px 1px 4px 1px;
}
.outer:hover{
  background: linear-gradient(45deg, transparent 2%, #FCFCFC 2%);
  box-shadow: 2px 2px 6px 1px;
  cursor: pointer;
  padding:20px;
}
.inner{
  float:right;
  top:0;
  left:50%;
  width:0;
  height:100%;
  position: absolute;
  background-color:rgb(217, 188, 116);
  border-left:2px solid rgb(0,32,70);
}

img{
 top:10;
 height:25%;
 position: absolute;
 left:0;
 right:0; 
 margin:auto;
}

#result{
  top: auto;
  height:100%;
}