/* Coding by 101Media.nl */
* { margin: 0; padding: 0; outline: none; }
html { font-family: 'Open Sans', sans-serif; -webkit-text-size-adjust: none;height:100%; }
body { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #000000; overflow-x:hidden; height:100%}
header, hgroup, nav, article, aside, footer, section { display: block }
a img, fieldset { border: 0; }
.clear { clear: both; line-height: 0; height: none; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
address { font-style: normal; }
th { text-align: left; }
.fl { float: left; }
.fr { float: right; }
.nf { float: none; }
.last { margin-right: 0 !important; }
.tabelize { display: inline-block; width: 50px; }
a{ -webkit-transition: 0.5s; -moz-transition:0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration:none;}

@font-face{ 
	font-family: 'Frente';
	src: url('../fonts/FrenteH1-Regular-webfont.eot');
	src: url('../fonts/FrenteH1-Regular-webfont.eot?iefix') format('eot'),
	     url('../fonts/FrenteH1-Regular-webfont.woff') format('woff'),
	     url('../fonts/FrenteH1-Regular-webfont') format('truetype'),
	     url('../fonts/FrenteH1-Regular-webfont#webfont') format('svg');
}
body{background:url(../images/background.svg) no-repeat; background-position: right 400px top; background-size:400px auto; }
.rightContent:before{z-index:-30; background: url(../images/background.svg) no-repeat; background-size: 400px auto; background-position: right top; width: 400px; height: 100%; display: block; right: 100%; position: absolute; z-index:0;}
.container{z-index:10; position:relative; max-width:1200px; width:100%; margin:0 auto 0 auto; height:100%; padding:50px; box-sizing: border-box;}
.container .topInfo{width:60%;}
.container .topInfo h1{font-family: "Montserrat",sans-serif; float:left; font-size:46px; width: 100%;
    word-break: break-word; text-transform: uppercase;}
.container .topInfo h1:after{display:block;content:""; height:9px; width:50%; background:#12222d;}
.container .topInfo p{font-size:30px; float:left; width:100%; margin:50px 0; }
.container .bottom{z-index: 100000;left:-100px; bottom:0; position: absolute;width:60%;}
.container .bottom img{float:left;}
.container .bottom .infobox{float:left; max-width:450px;margin-top:50px;}
.container .bottom .infobox{font-family: 'Frente', Arial, sans-serif; font-size:30px;}
.container .bottom .infobox h2,
.container .bottom .infobox p,
.container .bottom .infobox a{color:#12222d; font-weight:600; font-size:30px;}
.container .bottom .infobox a:hover{color:#abd25d;}
.container .bottom .infobox p{width:100%; float:left;}
.container .bottom .infobox h2{margin-bottom:15px;}
.container .bottom .infobox h2{width:auto;float:left;}
.container .bottom .infobox h2:before{content:""; background: url(../images/lamp.svg); background-size:100% 100%; display:block;margin:0 auto;width:60px; height:100px; margin-bottom:15px;}
.container .bottom .infobox a.mail{font-size:21px;}

.rightContent{z-index:20;width:468px; height:100%; position:fixed;; right:0;background:#12222d;top:0;padding:50px 70px 0 70px; box-sizing: border-box;}
.rightContent .content a{width:100%; float:left; color:#fff; font-size:26px;margin:10px 0;}
.rightContent a:hover{text-decoration:none; color:#abd25d;}
.rightContent .content{position:absolute; bottom:150px;}
.rightContent .content a:before{content:""; width:26px; height:26px; display: block; float: left; margin:5px 10px 0 0;}
.rightContent .content a:nth-child(1):before{background:url(../images/url.svg); background-size:100% 100%;}
.rightContent .content a:nth-child(2):before{background:url(../images/telefoon.svg); background-size:100% 100%;}
.rightContent a.logo{width:280px; max-width:100%;} 
.rightContent a.logo img{width:100%; height:auto;}

/*TELEFOON PORTRAIT*/
@media only screen and (max-width: 479px) {
  .container{padding-top:110px!important; min-height:100%!important; height:auto; box-sizing:border-box;} 
  .container .bottom .infobox{ width:45%; margin-top:30px;} 
  .container .bottom img{width:40%!important;}
  .container .bottom{ left:-20px!important;}
  .rightContent a{font-size:16px!important;}
  .container .topInfo h1{font-size:21px!important;}
  .container .topInfo p{font-size:18px!important;  margin:30px 0;}
  .container .bottom .infobox h2,
  .container .bottom .infobox a,
  .container .bottom .infobox p{font-size:21px!important;}  
  .rightContent .content a{margin-top:0%!important;}
}

/*TELEFOON LANDSCAPE/PORTRAIT*/
@media only screen
and (max-width : 767px) { 
    body{background: url(../images/background.svg) no-repeat; background-size: 100% auto; background-position: right top;}
    .container{min-height:auto!important; padding:140px 10px 0 10px;}
    .container .bottom{float:left; position:relative;} 
    .rightContent{float:left;width:100%; height:auto; top:0; padding: 20px; position: fixed;}
    .rightContent a.logo{width:35%; float:left;}
    .rightContent .content{position:relative; float:right; width:auto;max-width:55%;bottom:auto; margin-top:2%;}    
    .rightContent a{font-size:18px;}
    .rightContent .content a:before{width:20px; height:20px;}
    .container .bottom {width:100%;left:-30px;}
    .container .bottom .infobox{max-width:70%; margin-top:30px;}
    .container .bottom img{width:25%; bottom:0;margin-right:20px;}    
    .container .bottom .infobox h2,
    .container .bottom .infobox a,
    .container .bottom .infobox p{font-size:26px;}
    .container{padding-top:150px;float:left; width:100%;}
    .container .topInfo,
    .container .bottom{width:100%;}
    .container h1{font-size:14px;}
    .container .topInfo h1{font-size:30px; }    
    .container .topInfo h1:after{height:5px;}
    .container .topInfo p{font-size:24px;  margin:30px 0;}
    .container .bottom .infobox h2:before{display:block;margin:0 auto;width:30px; height:50px; margin-bottom:15px;}
    
    .rightContent{z-index:100;}
    .rightcontent .content{bottom:0;}
    .rightContent .content a {width:20px; height:20px; margin:0;}
    .rightContent .content a{margin-left:20px;text-indent:-9999px;margin-top:2%;}
    .rightContent:before{content: ""; display:none;}

}

/*TABLET*/
@media only screen
and (min-width : 768px)
and (max-width : 999px) { 
    .rightContent{width:300px!important;}
    .rightContent a{font-size:20px!important;}
    .rightContent .content a:before{width:20px; height:20px;}
    .container .bottom {left:10px;}
    .container .bottom img{width:30%; bottom:0; margin-right:20px;}    
    .container .bottom .infobox{width:50%;}    
    .container .bottom .infobox h2,
    .container .bottom .infobox a,
    .container .bottom .infobox p{font-size:26px;}
}

/*TABLET LANDSCAPE*/
@media only screen
and (min-width : 1000px)
and (max-width : 1100px) {
    .rightContent{width:400px!important;}
    .container .bottom {left:0;}
    .container .bottom img{width:200px;}
}

/*DEKSTOP GROOT*/
@media only screen
and (min-width : 992px)
and (max-width : 1199px) {
}

@media only screen 
and (min-width : 992px){
}

@media only screen
and (min-height : 550px)
and (max-height:900px) {
    .container .topInfo h1{font-size:28px;}
    .container .topInfo h1:after{height:6px;}
    .container .topInfo p{font-size:22px;}
    .container .bottom{position:absolute;bottom:0!important; left:-20px!important;}
    .container .bottom img{max-height:350px; max-width:25%; bottom:0;margin-right:20px;}
    .container .bottom .infobox{margin-top:0px;}    
}

@media only screen
and (min-height : 0px)
and (max-height : 550px) 
and (min-width : 480px) { 
    .container .topInfo h1{font-size:21px;}
    .container .topInfo h1:after{height:3px;}
    .container .topInfo p{font-size:18px;}
    .container .bottom .infobox h2:before{display:none;}
    .container .bottom{left:0;}
    .container .bottom img{max-height:250px; width:auto!important; margin-right:30px;} 
    .container .bottom .infobox h2,
    .container .bottom .infobox a,
    .container .bottom .infobox p{font-size:18px;}
}

@media only screen
and (min-height : 0px)
and (max-height : 420px) 
and (min-width : 580px) {
  .container .bottom{display:none;}
  .rightContent .content{bottom:0px;}
}