/** BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY **/

body {

    overflow-x: hidden;
    font-family:'Museo500web', Arial, Helvetica, sans-serif;
   color:black;
    
    padding:0;
}
html {
    overflow-x: hidden;
    border:20px solid #353535;
    border-top:0;
    border-bottom:0;
}

a img {
    border:0;
}
a {
    text-decoration: none;
}

* {
   margin: 0;
   padding: 0;
    
}

::selection {
	background: #FFE17E;
        color:#353535;
	}
::-moz-selection {
	background: #FFE17E;
        color:#353535;
}

@font-face {
    font-family: 'Museo500web';
    src: url('Museo500-Regular-webfont.eot');
    src: url('Museo500-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo500-Regular-webfont.woff') format('woff'),
         url('Museo500-Regular-webfont.ttf') format('truetype'),
         url('Museo500-Regular-webfont.svg#Museo500') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Museo700web';
    src: url('museo700-regular-webfont.eot');
    src: url('museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('museo700-regular-webfont.woff2') format('woff2'),
         url('museo700-regular-webfont.woff') format('woff'),
         url('museo700-regular-webfont.ttf') format('truetype'),
         url('museo700-regular-webfont.svg#Museo700web') format('svg');
    font-weight: normal;
    font-style: normal;

}


#content {
    width:100%;
    background:#353535;
    overflow:hidden;
}
.wrap {

    width:960px;
    left:50%;
    margin-left:-480px;
    position:relative;
}
.outerwrap {
    width:100%;
     background-color:#eee;
    background:url(images/subtlenet2.png);
    padding-bottom:120px;
    padding-top:120px;
}


#header {
 background:#353535;
    padding:0;
    position:fixed;
    height:90px;
    z-index:1666;
    border-bottom:2px #353535 solid;
    /*border-bottom:2px #008aCF solid;*/
    margin-left:-20px;
    
}
#header h2 {
 margin-top:0;
    margin-bottom:0;   
     top:26px;
    line-height:22px;
    position:absolute;
     color:#a8a8a8;
}

#header h2 p{
  display:block;
}

#header h2 a{
   display:block;
    color:#a8a8a8;
}
#header h2 a:hover{
 color:#fff;   
     
}


#logo {
	position:absolute;
	margin-left:-110px;
    left:50%;
   
}
#contacticon {
    position:relative;
    left:0;
 width:24px;
    height:21px;
    top:0;
    background:url(images/contact1.png);
}



#cover {
    z-index:999;
    position:relative;
    
    
    color:#fff;
 background:#0196d8;   
    padding-top:80px;
    padding-bottom:58px;
    margin-top:92px;
     text-align:center;
    
    border-top:2px #00A8F2 solid;
    border-bottom:2px #008aCF solid;
    
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    /* border-top:2px #323232 solid;
    border-bottom:2px #000 solid;
   
  background:url(images/back1.jpg);*/
}
#cover li {
    text-align:center;
    padding:12px;
    padding-left:15px;
    padding-right:7px;
    
    display:inline-block;
    list-style-type: none;
    background-color:#0082C3;
    border-radius:4px;
    margin-right:15px;
    margin-left:15px;
    margin-bottom:20px;
}

#cover li:after {
    content:"";
     position: absolute;
   margin-top:-11px;
    margin-left:6px;
   width: 0;
   height: 2px;
   border-top: 19px solid transparent;
   border-left: 18px solid #0082C3;
   border-bottom: 19px solid transparent;
}
#cover li:hover {
    cursor:default;
 color:#FFE17E;   
}
/*
#cover li:nth-child(odd):after {
   
   position: absolute;
   margin-top:-11px;
    margin-left:6px;
   width: 0;
   height: 2px;
   border-top: 19px solid transparent;
   border-left: 18px solid #008aCF;
   border-bottom: 19px solid transparent;
}
#cover li:before {
    content:"";
}

#cover li:nth-child(even):before {
   
   position: absolute;
   margin-top:-11px;
    margin-left:-32px;
   width: 0;
   height: 2px;
   border-top: 19px solid transparent;
   border-right: 18px solid #008aCF;
   border-bottom: 19px solid transparent;
}*/


h3 {
 font-size:22px;  
    letter-spacing:1.48px;
   
	
    text-align:center;  
    
    
    color:#fff;
    
    margin-bottom:30px;
    border-radius:4px;
    
     font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.pakket {
 width:23%;   
    float:left;
    border-radius:4px;
    margin:4.1667%;
    padding:1%;
    padding-bottom:1%;
    background-color:#353535;
    
   /* border-bottom:2px solid #fff;
  */
    
}
.pakket:before {
    content:"";
     position: absolute;
   margin-top:-29px;
    margin-left:-19px;
   width: 0;
   height: 2px;
   border-left: 19px solid transparent;
   border-bottom: 18px solid #353535;
   border-right: 19px solid transparent;
    
}
    
  

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   
      .pakket:before {
        margin-left:9.5%;
}
      
  }

@media screen and (max-width:980px) and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:980px) {  
   /* IE10+ specific styles go here */  
   
      .pakket:before {
        margin-left:10.5%;
}
      
  }

@media screen and (max-width:500px) and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:500px) {  
   /* IE10+ specific styles go here */  
   
      .pakket:before {
        margin-left:8.5%;
}
      
  }


@media screen and (max-width:320px) and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:320px) {  
   /* IE10+ specific styles go here */  
   
      .pakket:before {
        margin-left:7%;
}
      
  }



 

h1 {
	font-size:22px;
	color:#fff;
	
	font-weight:500;
	text-shadow: 0px 2px 0px rgba(0,0,0,0.25);
    margin-top:4px;
    margin-bottom:4px;

}
h1 span {
    color:#FFE17E;
    font-family:'Museo700web', Arial, Helvetica, sans-serif;
    font-weight:700;
}
h2 {
	font-size:14px;
	color:#fff;

	font-weight:500;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
    
    margin-top:11px;
    margin-bottom:11px;
}

#aanbieding {

    margin-left:36px;
    margin-right:36px;
     font-family:'Museo500web', Arial, Helvetica, sans-serif;
    font-weight:500; 
    font-size:21px;
    letter-spacing:1.3px;
    text-align:center;
    
    background:#FFE17E;
    color:#353535;
    padding:14px;
    
    border-radius:4px;
    
    position:absolute;
    z-index:500;
    width:860px;
    
    margin-top:88px;
}



#intro {
    border-top:2px #fff solid;
     color:#333; 
    line-height:22px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size:14px;
    height:850px;
    padding-bottom:45px;
}
#intro a {
 color:#333;   
    text-decoration:underline;
}
#intro a:hover {
    
    color:#0196d8;
}
#intro li {
 list-style-position: inside;   
    padding-left: 1.5em;
 text-indent: -1em;
    color:#0196d8;
    font-size:13px;
}


.right b, .left b{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color:#0196d8;
    font-size:13px;
}

.left {
    width:416px;
    position:absolute;
    top:50px;
    left:0;
    background-color:#fcfcfc;
    border-radius:4px;
    padding:36px;
    padding-top:125px;
    
     border-top:2px solid #fff;
    border-bottom:2px solid #efefef;
}

.right {
    width:416px;
    position:absolute;
    top:50px;
    right:0;
     background-color:#fcfcfc;
    border-radius:4px;
    padding:36px;
   padding-top:125px;
    
    border-top:2px solid #fff;
    border-bottom:2px solid #efefef;
}

.infointrowrap {
    background:#fcfcfc;
    padding-top:30px;
padding-bottom:34px;
    margin-bottom:-100px;
    position:relative;
    
     border-top:2px solid #fff;
    border-bottom:2px solid #efefef;
}
.infointrowrap:after {
    content:url(images/arrowdown.png);
     position: absolute;
   margin-top:31px;
    margin-left:-38px;
    left:50%;
 
}
.infointro {
color:#353535;
   font-family: 'Open Sans', sans-serif;
    line-height:22px;
width:600px;
    margin-left:-300px;
    left:50%;
    font-size:14px;
    position:relative;
    font-style:italic;
}
.infointro b {
 width:100%;
    text-align:center;
    color:#0196d8;
    text-transform:uppercase;
    display:inline-block;
    font-size:16px;
    letter-spacing:1px;
    font-size:17px;
    font-style:normal;
    margin-top:3px;
}


.fold {
    background-color:#fcfcfc;
    margin-bottom:20px;  
    height:auto;
    max-height:38px;
    position:relative;
    overflow:hidden;
    border-radius:4px;
    -webkit-transition: max-height 0.3s ;
    -moz-transition: max-height 0.3s ;
    -ms-transition: max-height 0.3s ;
    -o-transition: max-height 0.3s ;
    transition: max-height 0.3s ;
    
}
.fold.active {
 max-height:600px;
    padding-bottom:0!important;
}

.fold.active img{
    
         -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve {
    
}
.fold p {
 padding:20px;
    padding-left:24px;
  font-family: 'Open Sans', sans-serif;
    font-weight:500;
    color:#333;
    line-height:22px;
    font-size:14px;
    border-bottom:2px solid #efefef;
}
.fold p a {
 color:#333;
    text-decoration:underline;
}
.fold p a {
 color:#0196d8;   
}

h4 {
 font-size:16px;  
    letter-spacing:1px;
    	font-weight:500;
	background-color:#0196d8;
    color:#fff;
    padding:8px;
    padding-left:14px;
    padding-top:10px;
    
      /*  border-top-left-radius:4px;
    border-top-right-radius:4px;*/
    
    border-bottom:2px #008aCF solid;
    
    cursor:pointer;
}
h4 img{
    float:right;
    opacity:0.66;
    margin-top:-1px;
}
h4 img:hover {
 opacity:1;   
}
h4:hover img{
   opacity:1;    
    
}

#info {
    padding-top:230px;
    border-bottom:2px #fff solid;
}


#contact {
    background:#0196d8;
    border-bottom:2px #009DDF solid;
    border-top:2px #008aCF solid;
    min-height:425px;
    padding-bottom:60px;
    padding-top:60px;
    
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}
#contact h5 {
    text-shadow: 0px 2px 0px rgba(0,0,0,0.25);
 color:#fff;   
}


#contactinfo {
    width:100%;
    text-align:center;
    height:30px;
    padding-top:25px;
    position:relative;
    background:#353535;
    
}
#contactinfo a{
    text-decoration:underline;  
 color:#eee;
    
}
#contactinfo a:hover{
  color:#FFE17E;
}
#contactinfo h2 {
 margin-top:-4px;
    margin-bottom:0;
}

#page-wrap {
    position:absolute;
    top:92px;
    left:50%;
    margin-left:-230px;
    text-align:center;
}
#contact-area textarea, #contact-area input {
    
    margin-top:2px;
    margin-bottom:2px;
    margin-left:-8px;
    padding:5px;
    padding-left:11px;
    max-width:460px;
    max-height:170px;
    width:460px;
    outline:none;
    border:none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    
    
    border-radius:4px;
    background-color:#008aCF;
    color:#fff;
    letter-spacing:0.1em;
    
    font-size:12px;
    line-height:24px;
    resize: none;
}
#contact-area textarea:hover, #contact-area input:hover {
    background-color:#00A8F2;
    color:#fff;
}
#contact-area textarea:focus, #contact-area input:focus {
    background-color:#00A8F2;
    color:#fff;
}
#contact-area input.submit-button {
    margin-top:8px;
    padding-right:10px;
    border-bottom:2px solid #008aCF;
    background-color:#00A8F2;
    color:#efefef;
    font-size:14px;
    font-family:'Museo500web', Arial, Helvetica, sans-serif;
}
#contact-area input.submit-button:hover {
    background-color:#00B8FF;
    color:#fff;
}
#contact-area input.submit-button:active {
    margin-top:10px;
    border-bottom:0px solid #008aCF;
    background-color:#00B8FF;
    color:#fff;
}
#contact-area input.submit-button:visited {
    
    border-bottom:2px solid #008aCF;
    background-color:#0196d8;
    color:#fff;
}
::-webkit-input-placeholder {
    color:    #bbb;
}
:-moz-placeholder {
    color:    #bbb;
}
:-ms-input-placeholder {
    color:    #bbb;
}









h5 {
  width:960px;
    text-align:center;
    margin-bottom:20px;
    color:#555;
    
    
   
    font-size:22px;
 
    letter-spacing:1px;
font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}



@media (max-width:1092px) {
         #contactinfo {
          height:70px;   
         }
         
         #contactinfo h2 {
         margin-top:-6px;
         line-height:29px;
     }
         
         #contactinfo h2 span {
          display:inline-block;   
         }
    
}



@media (max-width:1060px) {
    
 h3 {
 
     margin-left:3%;
     margin-right:3%;
 }
    
}


@media (max-width:980px) {
    
 .wrap {
     width:94%;
     margin-left:3%;
     margin-right:3%;
     left:0;
    
}
    
     h3 {
 
     margin-left:0;
     margin-right:0;
 }
    
    
    .pakket {
     width:27.3%;
        margin:2%;
        margin-top:4.5%;
    }
    .pakket:before {
        
     margin-top:-22px;   
    }
    
    h5 {
     width:100%;   
    }
    
    #aanbieding {
     width:auto;   
    }
    #intro {
     height:auto;   
        padding-bottom:120px;
    }
    .left {
        width:auto;
        position:relative;
        top:0;
        padding-bottom:23px;
        padding-top:150px;
        border-bottom:0;
    }
    .right {
        width:auto;
        position:relative;
        top:0;
        padding-top:0;
        border-top:0;
    }
    .right span {
     display:none;  
    }
    #info {
    
    }
}





@media (max-width:904px) {
    #cover div ul span {
     display:none;   
    }
    

    
}


     @media (max-width:755px) {
        html {
         border:0px solid #353535;   
        }
         #header {
             position:absolute;
          height:120px;   
             margin-left:0;
         }
         #header h2 a {
         display:inline-block;
             margin-right:20px;
             margin-top:63px;
         }
         #header h2 p {
         display:inline-block;
             margin-left:20px;
             margin-top:63px;
          
         }
         #cover {
            margin-top:122px;   
         }
        
         
         
         .fold.active {
 max-height:1000px;
         }
         .infointro {
             width:auto;
     margin-left:24px;
     margin-right:24px;
             left:0;
         }
         
        
         .gallery img {
             height:240px;
         }
         
         
     }
    
    



 @media (max-width:642px) {
      #aanbieding {
      font-size:18px;   
     }
 }

    
 @media (max-width:620px) {
     
    #header {
     height:150px;
        
    }
     #header h2 {
         width:100%;
         text-align:center;
     }
     #header h2 a {
      margin-top:90px;
         margin-left:10px;
         margin-right:10px;
     }
     #header h2 p {
         
         margin-left:10px;
         margin-right:10px;
     }
     
     
        #cover {
         margin-top:152px;   
        }
    
     #cover li {
      padding-right:15px;   
     }
    #cover li:after {
        display:none;
    content:"";
     position: absolute;
   margin-top:-11px;
    margin-left:6px;
        
   width: 0;
   height: 2px;
   border-top: 19px solid transparent;
   border-left: 18px solid #008aCF;
   border-bottom: 19px solid transparent;
}
     
     h1 {
         font-size:16px;
     }
     .pakket h2 {
      font-size:12px;   
     }
    
 } 

    
     @media (max-width:560px) {
     
    
    
         #page-wrap {
          left:0;
             margin-left:0;
             width:100%;
         }
         
    #contact-area textarea, #contact-area input {
    
    margin-top:2px;
    margin-bottom:2px;
    margin-left:-8px;
    padding:5px;
    padding-left:11px;
    max-width:100%;
    max-height:170px;
    width:100%;
    outline:none;
    border:none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    
    
    border-radius:4px;
    background-color:#008aCF;
    color:#fff;
    letter-spacing:0.1em;
    
    font-size:12px;
    line-height:24px;
    resize: none;
}
    
}
    
    
    
        @media (max-width:538px) {
        #one {
         padding-bottom:16px;   
        }
            #one h4 {
             padding-bottom:24px;   
            }
        }
    
      @media (max-width:510px) {
              #ten {
               padding-bottom:16px;   
              }
          #ten h4 {
             padding-bottom:24px;   
            }
              
          }
    
      @media (max-width:471px) {
              #five {
               padding-bottom:16px;   
              }
              #five h4 {
             padding-bottom:24px;   
            }
          }
    
    
        @media (max-width:465px) {
            
              #contactinfo {
          height:96px;   
         }

            
        }


    @media (max-width:400px) {
        #header {
            height:165px
        }
        

        
        #header h2 a {
         margin-top:0;   
        }
        
        .left {
         padding-top:192px;   
        }
        .mailetc {
            margin-top:84px!important;
            
        }
           #contactinfo {
          height:116px;   
         }
        #cover {
         margin-top:167px;   
        }
        
    }
    
    
        