/*--------------------------------------------------*/
.displayres{
    position:fixed;
    z-index:3000;
    top: 0px;
    right:0px;
    width:100px;
    height:5vh;
    background-color: blue;
    color:white;
    display:none;
}
/*---------------------------------------------------*/

html,body {
    margin:		            0;
    padding:		        0;
    height:		            100%;
    
    background-color:   #f4feff !important;
}

html, body, body td, td, .container, #content, #content td, #footer{
    font-family:            'Montserrat', sans-serif !important;
    font-size:		        100%;
    -webkit-text-size-adjust:100%;
    
}
#content, #content td{
    line-height: 180%;
}
h1, h2, h3, h4, h5, h6{
    margin-top:             0px;
    padding-top:            0px;
    font-weight:            100 !important;
    color:                  #37a8db;			
}
h2{
    color:                  #353f49;
}
#wrap, #wrap-home{
    width:                  100%;
    height:                 auto;
    min-height:             100%;
    
}
#wrap{
    margin:                 0 auto -30vh;   /* Negative indent footer by its height */
    padding:                0 0 30vh;      /* Pad bottom by footer height */
}

/*------ #top-bar ------*/
#top-bar{                   
    width:              100%;
    height:             8vh;
    background:         #ffffff ;
    padding-top:        1vh;
}

#top-bar .row{
    height:100%;
    width:70vw;
    margin:auto;
    
}
#top-bar .col{
    height:inherit;
    display:table;
}
#top-bar .top-logo{
    height:9vh;
    margin-top:1vh;
    background: url(../assets/logos/logo_21ev.png) no-repeat left center;
    background-size: contain;
}
#top-bar .top-buttons{
    height:100%;
    padding-top:5vh;
    display:table-cell;
    vertical-align: middle;
}

/*-----------*/
.hotspot-webwinkel{
    position: absolute;
    top:42vh;
    right: 0px;
    width:20vw;
    
    background-color:#375cb7;
    color:white;
    padding:4vh 4vw 4vh 4vw;
    text-align:center;
}
.hotspot-webwinkel a{
    color:white;
    text-decoration:none;
}
.hotspot-webwinkel img{
    border:0px;
    width:2vw;
}
/*------------------*/

/*---- #menu-bar ----*/
#menu-bar{
    
}
.menu-bar-content{
    width:70%;
    margin:auto;
}

#top-banner{
    position: relative;
    overflow:hidden;
    width:100%;
    height:48vh;
    background-color:#343c40;
    
}
.banner-hotspot{
    position: absolute;
    bottom:0px;
    left:15vw;
    z-index:100;
    height: 30vh;
    width:  25vw;
    padding: 2%;
    background: url(../bg/white75.png) repeat;
    border-radius: 0.5vw 0.5vw 0px 0px;
}

.header-single-slide{
  width:100%;
  height:100%;
  background-position: center center;
  background-size:cover;
}



/*------------------------------------------*/
/* Navigation                               */
/*------------------------------------------*/

.hoofdmenu{
    padding-top:5vh;
    width:  100%;
    height: inherit;
    margin: auto;
}

.hoofdmenu a{
    display: inline-block;
    height: 4vh;
    border-right:1px solid #e6ebee;
    padding: 1vh 2vw 0 2vw;
    color: black;
    text-decoration: none;
}

.hoofdmenu a:hover{
    background-color: #e10360;
    color:white;
}

.hoofdmenu .submenuitem a{
    width: 100%;
    height: auto;
    padding: 1vh 2vw 1vh 2vw;
    color: black;
}

.hoofdmenu .submenuitem a:hover{
    background-color: #e10360;
    color: white;
}

/*---------------------------------------*/
/* Foto Album                            */
/*---------------------------------------*/
.fotoalbum-thumbnail{
    position: relative;
    width:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom:20%;
    border-radius: 0.5vw;
    box-shadow: 1vw 1vh 2vw silver;
}
.fotoalbum-thumbnail-title{
    position:absolute;
    bottom:0%;
    height: 20%;
    width: 100%;
    padding:2%;
    background-color:#74a8db;
    color:white;
    overflow: hidden;
    line-height: normal;
    border-radius: 0 0 0.5vw 0.5vw;
}
/*---------------------------------------*/
/* Bootstrap Navbar                      */
/*---------------------------------------*/
.navbar-inverse, .navbar-default{
    background-color:transparent;
    border-color:transparent;
    position:relative;
    z-index:10000;
}
.navbar-inverse .navbar-nav>li>a{
    color:white;
}
.navbar-brand{
    width:200px;
    padding: 0px;
    margin-right:50px;
}

.navbar-brand-logo{
    width:100%;
    height:100%;
    background-color: transparent;
    background-position: center center;
    background-size:contain;
    background-repeat: no-repeat;
}
.logo-dark{
    background-image: url(../assets/logos/rujost_logo_medium_dark.png);
}
.logo-light{
    background-image: url(../assets/logos/rujost_logo_medium.png);
}
/*---------------------------------------*/
/* Sections:                             */
/*---------------------------------------*/
.section{
    width:100%;
    height:auto;
    padding: 5vh 0 5vh 0;
}
.section-full-screen{
    width:100%;
    height:100vh;
}
.section-home{
    background-color:#152348;
    background-image:url(../bg/bg.jpg);
    background-size: cover;
    background-position: top left;
}
.section-light{
    background-color:#f4feff;
}
.section-white{
    background-color:#ffffff;
}
.section-content-block{
    width:70%;
    margin:auto;
}

/*---- #content ----*/
#content{
    width:100%;
    min-height:67vh;
    background-image:url(../bg/bg_section_1.jpg);
    background-size: cover;
    background-position: top left;
}
.row-equal-height{
  display:flex;
}
.round-corners{
  border-radius: 2%;
}

/*------------------------------------*/
/* SLOGAN                             */
/*------------------------------------*/
.slogan{
    margin-top:10vh;
    width:50vw;
    height:75vh;
    background-image: url(../bg/bg_slogan.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

/*------------------------------------*/
/* BS popover                         */
/*------------------------------------*/
.popover{
  width:50vw;
}
.popover-title{
  color:#767676;
}


/*------------------------------------*/
/* Navigation                         */
/*------------------------------------*/

.xs-menu{
  position: absolute;
  z-index:100;
  top:0px;
  left:0px;
  width:100vw;
  background-color: #E1E1E1;
  display:none;
}
.xs-menu a{
  display: block;
  width: 100%;
  padding: 4%;
  text-decoration:none;
  color: #009AC0;
  border-bottom: 1px solid #009AC0;
}
.xs-menu .menu-xs-top-bar{
    width:100%;
    height:10vh;
    background-color: white;
    
}
.xs-menu .menu-xs-top-bar img{
    height: 7vh;
    padding-top: 2vh;
    float:left;
}


/*------------------------------------*/
/* Footer:                            */
/*------------------------------------*/

#footer{
    
    height:                 30vh;
    
    background-color:       #152348;
    background-image:url(../bg/bg.jpg);
    background-size: cover;
    background-position: top left;
    font-size:              90%;
}
#footer .footerTop{
    height:80%;
    box-shadow: 0 -0.5vh 1vh grey;
}
#footer .footerBottom{
    height: 20%;
    background-color: #192853;
    box-shadow: 0 -0.5vh 2vh #0b1f33;
}
#footer .footerContent{
    width:70%;
    margin:auto;
}

#footer .footerContent .row{
    padding:0px;
    margin:0px;
}

#footer .footerTop .footerContent{
    color: #c9c8c7;
}
#footer .footerTop .footerContent a{
    color: #c9c8c7;
}
#footer .footerTop .footerContent a:hover{
    color: #ffffff;
}
#footer .footerBottom .footerContent{
    color: #6699cc;
    font-size:80%;
}
#footer .footerBottom .footerContent a{
    color: #6699cc;
}
/*------------------------------------*/
/* Overig:                            */
/*------------------------------------*/

/* Google Maps iframe 16x9 verhouding: */
.iframe-container{
    position: relative;
    height: 0;
    overflow: hidden;
}
.iframe-container-16x9{
    padding-bottom: 56.25%;
}
.iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
label{
  font-weight:600;

}
.no-padding{
  padding:0px;
}
.no-margin{
  margin:0px;
}
.badge-light{
    background-color:#F4FEFF;
    color:#777777;
}
#printable-lesidee { display: none; }

@media print
{
    #wrap, #footer, #aantekeningen { display: none; }
    #printable-lesidee { display: block; }
    .btn-screen { display: none; }
}
/*------------------------------------*/
/* Sidebar:                           */
/*------------------------------------*/
.sidebar{
  border-left:1px solid #e3e3e3;
  padding-left:1vw;
  font-size: 90%;
  line-height: normal;
}
.sidebar .divider{
    border-bottom: 1px solid #e3e3e3;
    margin: 4% 0 4% 0;
}
.sidebar-aanbieding{
    box-shadow: 0.5vw 1vh 1vw silver;
}
.sidebar .sidebar-aanbieding a, .sidebar .sidebar-aanbieding a:hover, .sidebar .sidebar-aanbieding a:active{
    text-decoration: none;
    
}

.sidebar .sidebar-productnaam, .sidebar .sidebar-prijs{
    background-color:#74a8db;
    color: white;
    padding: 5px;
}
.sidebar .sidebar-productfoto{
    width:100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color:silver;
}