@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700&subset=latin-ext);
body,
html{height:100%}
body{min-height:100%;
    font-family:Roboto Mono,monospace;
    background-color:#111;
    color:#585858;
    padding:0;
    margin:0;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
*{box-sizing:border-box}

.flashit{-webkit-animation:flash linear 1s infinite;
    animation:flash linear 1s infinite}
    
@-webkit-keyframes flash{0%{opacity:1}50%{opacity:.1}to{opacity:1}}
@keyframes flash{0%{opacity:1}50%{opacity:.1}to{opacity:1}}
@-webkit-keyframes neon{0%{text-shadow:0 0 20px #1F649D}50%{text-shadow:0 0 20px rgba(50,253,206,.1)}to{text-shadow:0 0 20px #1F649D}}
@keyframes neon{0%{text-shadow:0 0 20px #1F649D}50%{text-shadow:0 0 20px rgba(50,253,206,.1)}to{text-shadow:0 0 20px #1F649D}}
@-webkit-keyframes color{0%{color:#000}to{color:#585858}}
@keyframes color{0%{color:#000}to{color:#585858}}
@-webkit-keyframes color-blue{0%{color:#585858}to{color:#1F649D}}
@keyframes color-blue{0%{color:#585858}to{color:#1F649D}}
@-webkit-keyframes color-blue-active{0%{color:#000}50%{color:#585858}to{color:#1F649D}}
@keyframes color-blue-active{0%{color:#000}50%{color:#585858}to{color:#1F649D}}
@-webkit-keyframes background-color{0%{color:#000;background-color:#000}to{background-color:#2d2d2d;color:#585858}}
@keyframes background-color{0%{color:#000;background-color:#000}to{background-color:#2d2d2d;color:#585858}}
@-webkit-keyframes background-color-blue{0%{background-color:#000}50%{background-color:#585858}to{background-color:#1F649D}}
@keyframes background-color-blue{0%{background-color:#000}50%{background-color:#585858}to{background-color:#1F649D}}
@-webkit-keyframes color-border{0%{border-color:#000}to{border-color:#2d2d2d}}
@keyframes color-border{0%{border-color:#000}to{border-color:#2d2d2d}}
@keyframes fade{0%{opacity:1}25%{opacity:1}75%{opacity:0}to{opacity:0}}
@keyframes fade-op{0%{opacity:0}25%{opacity:0}75%{opacity:1}to{opacity:1}}
@keyframes fade-op-adv{0%{opacity:0}to{opacity:1}}

.navbar{height:88px;
    padding:29px 15px;
    margin:0 auto;
    position:relative;
    z-index:3}

@media screen and (min-width:768px)
{.navbar{padding:29px 40px}}
@media screen and (min-width:1364px)
{.navbar{padding:29px 80px}}

.navbar .navbar-brand{float:left}

.navbar .navbar-brand a{position:relative}

.navbar .navbar-brand a img{position:absolute}

.navbar .navbar-brand a .top{animation-name:fade;
    animation-timing-function:ease-in-out;
    animation-duration:2.25s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.navbar .navbar-brand a .bottom{animation-name:fade-op;
    animation-timing-function:ease-in-out;
    animation-duration:2.25s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.navbar .navbar-collapse{display:none}

@media screen and (min-width:950px)
{.navbar .navbar-collapse{float:right;padding-top:5px;display:block}}

.navbar .navbar-collapse .navbar-item{font-size:16px;
    text-decoration:none;
    display:inline-block;
    margin-right:30px}
    
.navbar .navbar-collapse .navbar-item,.navbar .navbar-collapse .navbar-item span{color:#585858;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.navbar .navbar-collapse .navbar-item span{transition:color .4s}

.navbar .navbar-collapse .navbar-item:hover span{color:#1F649D}

.navbar .navbar-collapse .navbar-item.active span{animation-name:color-blue-active;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-fill-mode:forwards}
    
.navbar .navbar-collapse .navbar-item:last-child{margin-right:0}

@media screen and (min-width:768px)
{.navbar .navbar-collapse .navbar-item{margin-right:60px}}
@media screen and (min-width:1364px)
{.navbar .navbar-collapse .navbar-item{margin-right:130px}}

.navbar .navbar-collapse.navbar-collapse-open{position:absolute;
    display:none;
    width:100%;
    padding:0 23px;
    top:88px;
    z-index:2;
    left:0;
    background-color:#2d2d2d}
    
.navbar .navbar-collapse.navbar-collapse-open .navbar-item{display:block;
    padding:5px 0}
    
.navbar .navbar-collapse.navbar-collapse-open .navbar-item:first-child{padding-top:10px}

.navbar .navbar-collapse.navbar-collapse-open .navbar-item:last-child{padding-bottom:10px}

.navbar:after{display:block;
    content:" ";
    clear:both}
    
.navbar .navbar-toggler{background-color:transparent;
    border:2px solid #2d2d2d;
    color: #585858;
    float:right;
    width:40px;
    height:28px;
    font-size:1.25rem;
    line-height:1;
    transition:border-color .4s;}
    
.navbar .navbar-toggler .navbar-toggler-icon{display:inline-block;
    width:1rem;
    height:1rem;
    vertical-align:middle;
    content:"";}

@media screen and (min-width:950px)
{.navbar .navbar-toggler{display:none}}

.navbar .navbar-toggler:focus{outline:none}

.navbar .navbar-toggler.active{border-color:#1F649D}

.container-products{min-height:calc(100% - 215px - 88px);
    margin:0 auto;
    display:
    -webkit-flex;
    -webkit-align-items:stretch;
    display:flex;
    align-items:stretch;
    flex-direction:column}
    
@media screen and (min-width:992px)
{.container-products{flex-direction:row}}
@media screen and (min-width:950px)
{.container-products{min-height:calc(100% - 31vh - 88px)}}
@media screen and (min-width:1918px)
{.container-products{min-height:calc(100% - 31vh - 88px)}}

.container-products .col{-webkit-flex:0 0 50%;
    flex:0 0 50%}
    
.container-products .col.col-right{border:15px solid #2d2d2d;
    box-sizing:border-box;
    animation-name:color-border;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.container-products .col.col-left{background:url(https://van-nimwegen.eu/IMG/bg-prod.png) repeat-x 0 100%;
    padding:40px 25px 113px}
    
@media screen and (min-width:480px)
{.container-products .col.col-left{padding:40px 50px 113px}}
@media screen and (min-width:950px)
{.container-products .col.col-left{padding:20px 75px 113px}}
@media screen and (min-width:1918px)
{.container-products .col.col-left{padding:40px 75px 113px}}

.container-products .col.col-left .title{font-size:9.5vw}

@media screen and (min-width:640px)
{.container-products .col.col-left .title{font-size:61px;line-height:75px}}
@media screen and (min-width:1364px)
{.container-products .col.col-left .title{font-size:3.4vw;line-height:4vw}}
@media screen and (min-width:1438px)
{.container-products .col.col-left .title{font-size:4vw;line-height:4.5vw}}
@media screen and (min-width:1918px)
{.container-products .col.col-left .title{font-size:4.4vw;line-height:5.3vw}}

.container-products .col.col-left .title strong{font-size:13vw}

@media screen and (min-width:640px)
{.container-products .col.col-left .title strong{font-size:80px}}
@media screen and (min-width:680px)
{.container-products .col.col-left .title strong{font-size:88px}}
@media screen and (min-width:992px)
{.container-products .col.col-left .title strong{font-size:6.4vw}}
@media screen and (min-width:1364px)
{.container-products .col.col-left .title strong{font-size:5.5vw}}
@media screen and (min-width:1438px)
{.container-products .col.col-left .title strong{font-size:5vw}}
@media screen and (min-width:1918px)
{.container-products .col.col-left .title strong{font-size:6.5vw}}

.container-products .col.col-left .title strong span{animation-name:color-blue;
    animation-duration:1.5s;
    animation-timing-function:linear;
    animation-delay:1.5s;animation-fill-mode:forwards}
    
    

.container-products .col.col-left p{font-size:11px;
    font-weight:700;
    max-width:320px;
    line-height:20px;
    margin:30px 0 0}
    
@media screen and (min-width:950px)
{.container-products .col.col-left p{max-width:26vw;line-height:1.5vw;font-size:.9vh;font-weight:400}}
@media screen and (min-width:1438px)
{.container-products .col.col-left p{line-height:1.5vw;font-size:0.9vh;margin:25px 0 0}}
@media screen and (min-width:1918px)
{.container-products .col.col-left p{line-height:1.5vw;font-size:0.9vh;margin:35px 0 0}}

.container-products .chat-content{display:-webkit-flex;
    -webkit-align-items:center;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%}
    
.container-products .chat-content .chat-entrence{-webkit-flex:1;
    flex:1;
    max-width:420px;
    padding:40px 15px}
    
@media screen and (min-width:480px)
{.container-products .chat-content .chat-entrence{padding:40px 25px}}
@media screen and (min-width:640px)
{.container-products .chat-content .chat-entrence{padding:40px 30px}}
@media screen and (min-width:1364px)
{.container-products .chat-content .chat-entrence{padding:40px 0}}

.container-products .chat-content .chat-entrence p{font-size:11px;
    text-align:center;
    max-width:250px;
    margin:0 auto 40px;
    font-weight:700}
    
@media screen and (min-width:1364px)
{.container-products .chat-content .chat-entrence p{max-width:20vw;line-height:1.5vw;font-size:.9vw;font-weight:400}}

.container-products .chat-content .chat-entrence .chat-button,.container-products .chat-content .chat-entrence .chat-info{color:#585858;
    position:relative;
    display:inline-block;
    width:100%;
    font-style:italic;
    font-size:11.5px;
    text-align:center;
    font-weight:700}
   
.container-products .chat-content .chat-entrence .chat-info{background-color:#2d2d2d;
    padding:12px 0;
    animation-name:background-color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.container-products .chat-content .chat-entrence .chat-info:after{position:absolute;
    content:"";
    width:6px;
    height:6px;
    background-color:#1F649D;
    top:50%;
    right:30px;
    transform:translate(-50%,-50%);
    -webkit-animation:flash linear 1s infinite;
    animation:flash linear 1s infinite}
    
.container-products .chat-content .chat-entrence .chat-info.end-event:after{background-color:#f70051}

.container-products .chat-content .chat-entrence .chat-button{background-color:#000;
    cursor:pointer;
    display:flex;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.container-products .chat-content .chat-entrence .chat-button .chat-button-text{flex:1 0 auto;
    padding:12px 0}
    
.container-products .chat-content .chat-entrence .chat-button .chat-button-icon{flex:0 0 39px;
    content:"\2192";
    width:39px;
    height:39px;
    top:0;
    right:0;
    font-size:26px;
    color:#000;
    animation-name:background-color-blue;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-fill-mode:forwards}

.container-products .chat-content .chat-entrence:after,.container-products:after{display:block;
    content:" ";
    clear:both}
        
.footer-products{background-color:#000;
    height:215px;
    position:relative;
    overflow:hidden}
    
.footer-products img{position:absolute;
    left:50%;
    max-width:150%;
    transform:translate(-50%)}
    
@media screen and (min-width:480px)
{.footer-products img{margin-top:-2vh;max-width:100%}}
@media screen and (min-width:950px)
{.footer-products img{margin-top:-10vh}}
@media screen and (min-width:1918px)
{.footer-products img{margin-top:-15vh}}

.footer-products .top{animation-name:fade-op;
    animation-timing-function:ease-in-out;
    animation-duration:1.5s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.footer-products .bottom{opacity:0;
    animation-name:fade-op-adv;
    animation-timing-function:ease-in-out;
    animation-duration:525ms;
    animation-direction:alternate;
    animation-delay:1.5s;
    animation-fill-mode:forwards}
    
@media screen and (min-width:950px)
{.footer-products{height:31vh}}
@media screen and (min-width:1918px)
{.footer-products{height:31vh}}