section {
    float: left;
}

#bannercontainer {
   position: relative;
   display: inline-block;
   width: 100%;
}

#bannercontainer img {
   display: block;
   width: inherit;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 10em;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.72); /*background-color: rgba(0,0,0,0.3); /*dim the background*/
}

#banner , #banner2 , #banner3 , #banner4 , #banner5 {
   position: absolute;
   opacity: 0;
   animation-duration: .7s;
   animation-timing-function: ease-in-out;   
   -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
           animation-fill-mode: forwards;       
}

#banner {
   animation-name: banner;
   animation-delay: 1s;
}

#banner2 {
   animation-name: banner2;
   animation-delay: 1.5s; 
}

#banner3 {
   animation-name: banner3;
   animation-delay: 2s;   
}

#banner4 {
   animation-name: banner4;
   animation-delay: 2.5s;
}

#banner5 {
   animation-name: banner5;
   animation-delay: 3s;
}

#banner h2 , #banner2 h2 , #banner3 h2 , #banner4 h2 , #banner5 h2 {
    font-family: "myriad";
    color: #f7fbff;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px 3px #000;
    background-color: #0e5997;
    padding: 2px 15px;
    width: 6em;
    border-radius: 4px;
    border: 1px solid #252426;
    box-shadow: 2px 2px 40px #211111;
}

@keyframes banner {
    0%   {opacity: 0; left: 3%; top:0px;}
    100% {opacity: 1; left: 3%; top:15%;}   
}

@keyframes banner2 {
    0%   {opacity: 0; left: 3%; top:0px;}
    100% {opacity: 1; left: 3%; top:30%;}     
}

@keyframes banner3 {
    0%   {opacity: 0; left: 3%; top:0px;}
    100% {opacity: 1; left: 3%; top:45%;}    
}

@keyframes banner4 {
    0%   {opacity: 0; left: 3%; top:0px;}
    100% {opacity: 1; left: 3%; top:60%;}     
}

@keyframes banner5 {
    0%   {opacity: 0; left: 3%; top:0px;}
    100% {opacity: 1; left: 3%; top:75%;}    
}

#headingcontainer {
   width: 100%;
}

#headingcontainer > h1 {
   font-size: 1.5em;
   text-align: center;
   color: #fff;
   text-shadow: 0 1px 0 #423C3E;
   background: #1D91F2;
   background: -moz-linear-gradient(top, #1D91F2, #0D538E);
   background: -webkit-gradient(linear, left top, left bottom, from(#1D91F2), to(#0D538E));
   -webkit-box-shadow: 2px 2px 3px #8B909C;
      -moz-box-shadow: 2px 2px 3px #8B909C;
           box-shadow: 2px 2px 3px #8B909C;
   -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
           border-radius: 18px;           
   margin: 0px auto 20px auto;  
   padding: 10px 25px;
   width: 40%;   
}

#headingcontainer h2 {
   color: #0C4D83;
   background-color: #d5d5d5;
   font-family: "myriad";
   font-size: 1.8em;
   font-weight: 400;    
   padding: 10px;
   margin-top: 1em;
   border-left: 15px solid #F7941E;
}

#praktijkblok {
   float: left;
   font-size: 1em;
   color: #101010;
   width: 100%;
   line-height: 24px;
}

#praktijkblok li {
   list-style: disc;
   margin-left: 30px;
   padding-bottom: 5px;
}

#praktijkblok a , #eindepagina a {
   color: #0377BD;
}

#roteerboek {
   -webkit-transform: rotate(7deg);
       -ms-transform: rotate(7deg);
           transform: rotate(7deg);
}

#praktijk-accent {
   background-color: #F9DBB6;
   border-radius: 5px;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #FFC175;
}

.col6040-1 {
   float: left;
}

.col6040-2 {
   float: right;
}

.col6040-1 , .col6040-2 {
   width: 47%;
   padding: 10px 15px;   
}

#topofpage {
    float: right;
    position: relative;
    top: -38px;
    font-size: 34px;
    right: 7px;
}

#topofpage:hover , #eindepagina:hover {
   text-shadow: 2px 2px #9C9C9C;
   -webkit-transform: translate(-1px,-1px) rotate(0.03deg);
      -moz-transform: translate(-1px,-1px) rotate(0.03deg);
        -o-transform: translate(-1px,-1px) rotate(0.03deg);
           transform: translate(-1px,-1px) rotate(0.03deg);
   -webkit-transition: .4s ease-in-out;
      -moz-transition: .4s ease-in-out;
        -o-transition: .4s ease-in-out;
           transition: .4s ease-in-out;
}

#reserveerpraktijk {
   width: 35%;
   padding: 20px 0px 20px 0px;
   margin-left: 30%;
}

#reserveerpraktijk:hover {
text-shadow: 2px 2px #9C9C9C;
  -webkit-transform: translate(-1px,-1px);
     -moz-transform: translate(-1px,-1px);  
       -o-transform: translate(-1px,-1px);
	       transform: translate(-1px,-1px);
   -webkit-transition: .4s ease-in-out;
		-moz-transition: .4s ease-in-out;
   	  -o-transition: .4s ease-in-out;
   		  transition: .4s ease-in-out;   
}

#eindepagina {
   float: left;
   width: 100%;
   display: block;
   text-align: right;
   font-size: 3em;  
}

@media only screen and (max-width: 1023px) {
   #headingcontainer > h1 {
      font-size: 1.4em;
      padding: 8px 25px;        
   }
   #reserveerpraktijk {
      width: 38%;
      margin-left: 30%;
   }   
}

@media only screen and (max-width: 900px) {
   @keyframes banner {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:8%;}   
   }

   @keyframes banner2 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:26%;}     
   }

   @keyframes banner3 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:44%;}    
   }

   @keyframes banner4 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:62%;}     
   }

   @keyframes banner5 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:80%;}    
   }
   .overlay {
      width: 8em;
   }
   #banner h2, #banner2 h2, #banner3 h2, #banner4 h2, #banner5 h2 {
      font-size: 1.3em;
      padding: 1px 15px;
   }
   #reserveerpraktijk {
      width: 50%;
      margin-left: 27%;
   }   
}

@media only screen and (max-width: 767px) {
   @keyframes banner {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:5%;}   
   }

   @keyframes banner2 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:23%;}     
   }

   @keyframes banner3 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:41%;}    
   }

   @keyframes banner4 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:59%;}     
   }

   @keyframes banner5 {
       0%   {opacity: 0; left: 3%; top:0px;}
       100% {opacity: 1; left: 3%; top:77%;}    
   }
   #headingcontainer > h1 {
      font-size: 1.3em;
      padding: 7px 25px;   
   }
   #praktijkblok {
       font-size: 0.9em;
   }
   hr.style-two {
      top: 45px;        
   }
   #reserveerpraktijk {
      width: 55%;
      margin-left: 23%;
   }      
}

@media only screen and (max-width: 595px) {
   .overlay {
      display: none;
   }
   #banner h2, #banner2 h2, #banner3 h2, #banner4 h2, #banner5 h2 {
      display: none;
   }
   #headingcontainer > h1 {
      font-size: 1.1em;
      padding: 5px 25px;         
   }
   #topofpage {
      top: -56px;
   }
   hr.style-two {
      top: 43px;        
   }
   #reserveerpraktijk {
      width: 60%;
      margin-left: 20%;
   }     
}

@media only screen and (max-width: 494px) {
   #praktijkblok {
       font-size: 0.8em;
   }
   #reserveerpraktijk {
      width: 65%;
      margin-left: 22%;
   }      
}

@media only screen and (max-width: 424px) {
   #headingcontainer > h1 {
      padding: 5px 10px;         
   }   
}
/*#headingcontainer .arrow {
     width: 0;
     height: 0;
     line-height: 0;
     border-left: 20px solid transparent;
     border-top: 10px solid #c8c8c8;
     top: 104%;
     left: 0;
     position: absolute;
}*/

/* einde heading */