@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);

/* 

    ASC BOXMEER

	CBX Backstage CMS 
	2013
    Updated: okt 2015;
	
	Cybox - www.cybox.nl


*/

/* Reset CSS v1.0 | 20080212 */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  /* remember to define focus styles! */ :focus { 	outline: 0; }  /* remember to highlight inserts somehow! */ ins { 	text-decoration: none; } del { 	text-decoration: line-through; }  /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: collapse; 	border-spacing: 0; }
/* Clearfix for floats! */  /**  * For modern browsers  * 1. The space content is one way to avoid an Opera bug when the  *    contenteditable attribute is included anywhere else in the document.  *    Otherwise it causes space to appear at the top and bottom of elements  *    that are clearfixed.  * 2. The use of `table` rather than `block` is only necessary if using  *    `:before` to contain the top-margins of child elements.  */ .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; }


/*  
	// 
		ROOT SETTINGS 
	// 
*/


div {
	border: 0px solid #f00;
}
html,
body {
   margin:0;
   padding:0;
}
body {
    font-family:  "Roboto Slab", Arial, Verdana, sans-serif;
    font-size: 1em;
    line-height: 1.5;
    background-color: #efefef;
	color: #000;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url('/images/bg16.png'); 
}

/*  
	// 
		TITLE TYPE
	// 
*/

h1, h2, h3, h4 {
    font-weight: bold;
    line-height: 1;
}
h1 {
    font-size: 2em;
    padding-bottom: 1em;
	color: #a6953b;
    font-weight: 500;
}  
h2 {

} 
h3 {

} 

/*  
	// 
		LINKS
	// 
*/
  
a {
    text-decoration: none;   
    color: #000084;
    font-weight: 500;
}
a:hover {
    color: #333;
}
a.leesmeer {
    white-space:nowrap;   
}
a img {
    display:block;
}

/*  
	// 
		IE NOTICE
	// 
*/

div#oldiemsg {
    background: #feffe5; 
    padding:4px;
}

/*  
	// 
		MAIN LAYOUT
	// 
*/


#header-holder {
    background: #a6953b;
    background-image: url('/images/bg16.png');     
}
#header {
    max-width: 1300px; 
    min-width: 500px;
    width: 95%;
    margin: 0 auto;
    position: relative;
    height: 140px;
}

    #header #logo {
    	width: 150px; height: 150px;  z-index: 8; 
        position: absolute; left: 0; top: 10px;
    }
    #header #logo a {
    	display: block;
    	width: 100%;
    	height: 100%;
        background-size: 150px 150px;
    	background-image: url('/images/logo_3.png');
    }
    #header #menu {    
    }
    #header #menu ul {
        position: relative;
        float: right; 
        padding: 55px 0;
    }
    #header #menu ul li {
        float: left;
        position: relative;
        margin-left: 1.4em;
    }
    #header #menu ul li a {
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        font-size: 1.2em;
    }
    #header #menu ul li a:hover {
        color: #666;
    }
    #header #menu ul li.active > a, div.submenu_on_page li.active  a {
        color: #666;
    }

    .menu_trigger {
        display: none;
    }

#container {
    max-width: 1300px; 
    min-width: 500px;
    margin: 2em auto;
    position: relative;
}

#footer {
    clear:both;
}
#footer .footer-content {
    max-width: 1300px; 
    min-width: 500px;
    margin: 0 auto;
    padding: 2em 0; padding-bottom: 3em;
    position: relative;
    color: #A6953B; font-weight: 100;
}
#footer .footer-content ul {
    float: right; margin-top: -30px;
}
#footer .footer-content ul li {
    float: left; font-size: 0.8em; margin-left: 1em;  margin-top: 3px;
}
#footer .footer-content ul li a {
    color: #757158; font-weight: 300;
}
#footer .footer-content ul li a:hover {
    color: #A6953B; 
}
#footer .footer-content ul li:last-child a {
    font-weight: 700; color: #999; margin-left: 0.3em;  opacity: 0.5;
}
#footer .footer-content ul li:last-child a:hover {
    color: #999;   opacity: 1;
}
#footer .footer-content ul li:last-child a img {
    float: right; margin-left: 0.5em; margin-top: 2px; 
}

#footer a.fb {
	width: 20px; height: 20px; background: blue; 
	position: absolute; left: 0px; top: 4px;
	background-image: url('/images/facebook_1.png'); background-size: 20px 20px;
	background-color: #000084; border-radius: 2px;
}
#footer a.fb:hover {
	background-color: #000; 
}
#footer .fb-like {
	position: absolute; left: 30px; top: 0;
}
#footer .slogan {
	position: absolute; left: 0; top: 35px;
	font-size: 0.8em; color: #A6953B; font-weight: 100;
}

/*  
	// 
		MENU ACTIVE
	// 
*/

div#menu ul > li > ul {
    display: none;   
}
div#menu ul > li.active > ul {
    display: block; 
}

/*  
	// 
		SUBMENU ON PAGE
	// 
*/

div.submenu_on_page {
  display: block;
  float: left;
  text-decoration: none;
  width: 30%;
  padding-bottom:10px;
}
div.submenu_on_page  h2 {

}
div.submenu_on_page ul {

}
div.submenu_on_page ul li.mainitem {
    color: #706b59;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 1em;
}
div.submenu_on_page ul li {
    clear: both;
    line-height: 1.2;
    border-bottom: 1px solid #efefef;
  
}
div.submenu_on_page ul li a {
    color: #A6953B;
    display:block;
    padding: 1em 0;
}
div.submenu_on_page ul li a:hover {
    color: #666;
}
div.page_content {
    width: 100%;
    float: right;   
}
div.page_content.hassubmenu {
    width: 65%;
    float: right;
}

/*  
	// 
		CONTENT
	// 
*/

#content {
    box-sizing:border-box!important; -moz-box-sizing:border-box!important; -webkit-box-sizing:border-box!important;
    background: #fff;
    padding: 2em;
    width: 100%; float: left;
    margin-bottom: 2em; 
    min-height: 700px;
}
#content.content-home {
     width: 49%; min-height: 450px;
}
#content.content-has-images {
     width: 68%
}

/* content text */
#content strong {
    color: #A9973C; font-weight: 800; text-transform: uppercase;
}
#content .page_content ol, #content .page_content ul {
    margin: 1em 0;
}
#content .page_content ol li {
    list-style-type: decimal; padding-left: 0px; margin-left: 20px;
}
#content .page_content ul li {
    list-style-type: disc; padding-left: 0px; margin-left: 20px;
}

/* content home */
#home {
   background: #fff;  
   width: 49%; float: right; margin-bottom: 2em;
   box-sizing:border-box!important; -moz-box-sizing:border-box!important; -webkit-box-sizing:border-box!important; 
}

#home .home_events {
    
}
    #home .home_events .item {
        box-sizing:border-box!important; -moz-box-sizing:border-box!important; -webkit-box-sizing:border-box!important;    
        width: 50%; float: left; 
    }
    #home .home_events .item a {
        font-weight: 400!important;
        display: block; padding: 2em;
        color: #A6953B;
        transition: opacity 500ms ease-in-out;
        min-height: 100px;
    }
    #home .home_events .item strong {
        font-weight: 600; color: #A6953B;
    }
    #home .home_events .item:first-child {
        width: 100%; font-size: 2em;
        border-bottom: 2px solid #ccc;
    }
    #home .home_events .item:last-child {
        border-left: 2px solid #ccc;
    }
    #home .home_events .item a:hover {
        color: #000;
    }

#home .label {
    position: absolute; right: 50px; top: 0; background: #A6953B; padding: 1em; background-color: #A6953B; color: #fff;
}


/* content rit tabel */

#content table {
	width: 100%; max-width: 800px;
}
#content table td {
	padding-left: 60px; height: 90px; padding-top: 20px; color: #999;
	background-size: 30px 30px; background-position: 10px 25px; background-repeat: no-repeat;
	 background-image: url('/images/prize_silver.png'); 
	 font-size: 0.9em;
}
#content table td:first-child {
	color: #e1c739; background-image: url('/images/prize_gold.png');  font-weight: 800;
}
#content table td:last-child {
	color: #94884a; background-image: url('/images/prize_bronze.png'); font-weight: 300;
}


/* content table LEDENGEDEELTE */
#content.members table td {
    background-image: none;
    height: auto;
    padding: 0;
    font-weight: normal;
    max-width: 100%;
    min-width: 100%;
    color: #000;
    line-height: 1.5;
    font-size: 1em;
}



/*  
	//  
		PHOTOS ON PAGE
	// 
*/

#container div.fotos {
    width: 30%;
    float: right;
    position: relative;
    box-sizing:border-box!important; -moz-box-sizing:border-box!important; -webkit-box-sizing:border-box!important;
    z-index: 1;
}
/* fotos op subpags */
#container div.fotos.fotos-sub {
    padding-top: 20px;
}
#container div.fotos.fotos-sub a {
    display: block; 
    width: 100%; 
    float: left;
}

#container div.fotos.fotos-sub a img {
    width: 100%;  
}
/* captions > sub */
#container div.fotos.fotos-sub a span.caption { 
    position: relative; margin-top: -50px; line-height: 50px; display: block;  height:50px; background: #A6953B; color: #191a16; font-size: 1em; font-weight: 500; text-align: left; 
    opacity: 0; transition: opacity 300ms ease-out; overflow: hidden; padding-left: 1em;
}
#container div.fotos.fotos-sub a:hover span.caption {
    opacity: 1;
}
/* fotoriedel op home */
#container div.fotos.fotos-home {
    width: 100%; 
}
#container div.fotos.fotos-home a {
   position: relative; display: block; overflow: hidden; padding-bottom: 50px;
}
#container div.fotos.fotos-home a img {
    display: block; width: 100%; position: relative; z-index: -1; 
}
/* captions home */
#container div.fotos.fotos-home a span.caption { 
    position: relative; margin-bottom: -50px; line-height: 50px; display: block;  height: 50px; background: #A6953B; color: #191a16; font-size: 1em; font-weight: 500; text-align: center; 
    opacity: 0; transition: opacity 300ms ease-out;   overflow: hidden;
}
#container div.fotos.fotos-home a:hover span.caption {
    opacity: 1;
}

/* hover fun */
#container div.fotos a img {
    transition: opacity 300ms ease-out;
}
#container div.fotos a:hover img {
    opacity: 0.5;
}


/* pager */
#pager {
    position: absolute; 
    right: 0;
    bottom: 0px;
    z-index: 9;
    text-align: center;
    background: rgba(0,0,0,0.5);
    padding: 15px;
}

#pager span {
    display: block;
    width: 10px; height: 10px;
    margin: 5px 10px; background: #A6953B;
    color: transparent;
    border-radius: 10px;
    float: left;
    cursor: pointer;
}
#pager span.cycle-pager-active, #pager span:hover {
    background: #978835;
}

.vid {
    background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center;
}

/* sponsors */

/* fotoriedel op home */
#container div.sponsors {
    width: 100%; clear: both;
}
#container div.sponsors a {
   position: relative; display: block; overflow: hidden;
}
#container div.sponsors a img {
    display: block; width: 80%; margin: 0 auto; position: relative; z-index: -1; 
    transition: opacity 300ms ease-out; border-radius: 2px; padding: 0 0.5em; background: #fff;
}
#container div.sponsors a:hover img {
    opacity: 1;
}



/*  
	//  
		LINKS + DOWNLOADS
	// 
*/

div.links {
    margin-top: 20px;   
}

/*  
	//  
		PHOTO ALBUMS
	// 
*/

#content div.fotoalbum  {
	margin-left: -5px;

}
#content div.fotoalbum a.foto {
    margin: 10px;
	float: left;
	position: relative;
}
#content div.fotoalbum a.foto img {
	border-radius: 1px; 
	transition: opacity 300ms ease-in-out;
}
#content div.fotoalbum a.foto:hover img {
	opacity: 0.5;
}
#content div.fotoalbum a.foto .popuptitle {
	position: absolute; left: 0; top: 0;
	padding: 10px; background-color: #fff; color: #666;
}
.backlink {
	margin-left: 10px; margin-bottom: 10px; text-transform: uppercase;
}

/*  
    //  
       ACTIVITEITEN
    // 
*/

#content.calendar {
    background: transparent;
    padding: 0;
}
#content.calendar .intro_calendar {
    background: #fff;  
    padding: 2em;   
}
.agenda {
    margin-top: 2em;
}
.agenda .item {
    background: #fff;
    margin-bottom: 2em;
    padding: 40px;

    position: relative;
}
.agenda .item .content {
    border: 0px solid #f00;   
    margin-bottom: 0em;
    width: 50%; 
    min-height: 180px;
}

.agenda .item .content .cal_cycle {
    width: 40%; 
    position: absolute;
    right: 0; top: 0;
    min-height: 200px;
    z-index: 1;
    height: 100%;
}
.agenda .item .content .cal_cycle  a {
    width: 100%; position: relative; z-index: 1; 
}

.agenda .item .content .cal_cycle a img {
    width: 100%; display: block; z-index: 1; 
    opacity: 1; transition: 300ms ease-out;

}
.agenda .item .content .cal_cycle a:hover img {
    opacity: 1;
}
.agenda .item .content .this-pager {
    position: absolute; padding: 15px; background: rgba(255,255,255,0.5); top:0; right: 0; z-index: 9999;
}
.agenda .item .content .this-pager span {
    display: block;
    width: 10px; height: 10px;
    margin: 5px 10px; background: #A6953B;
    color: transparent;
    border-radius: 10px;
    float: left;
    cursor: pointer;
}
.agenda .item .content .this-pager span.cycle-pager-active, .agenda .item .content .this-pager span:hover {
    background: #978835;
}

.agenda .item .content h2 {
    font-size: 1.5em; padding-bottom: 1em; color: #A6953B; padding-top: 0.3em;
}

.agenda .item .content .date { color: #A6953B;}
.agenda .item .content .location { padding-left: 1em; color: #A6943A;}

.agenda .item .content .description {
    height: 210px; overflow: hidden;
    position: relative;
    transition: all 300ms;
}
.agenda .item .content .description.active {
    height: auto;
}
.agenda .item:not(.standalone) .content .description:after {
        cursor: pointer;
    content: " lees meer "; width: 100%; padding: 20px 0; 
    background: #fff; background: rgba(255,255,255,0.9); 
    color: #999; text-transform: uppercase; font-weight: 100;
    position: absolute; left: 0; bottom: 0; text-align: center;
    transition: opacity 300ms; font-weight: bold;
}
.agenda .item .content .description:hover:after {
    color: #A6953B;
}
.agenda .item .content .description.active:after {
    opacity: 0;
}
.agenda .item .content .description a {
    color: #A6953B; text-decoration: underline;
}
.agenda .item .content .description a:hover {
    color: #d6c259;
}

/*  
	//  
		CONTACT FORM
	// 
*/

#contact form {
    float: right; border: 1px solid #A6953B; border-radius: 5px;
    width: 60%; padding: 2.5%; background: #fff;
}
#contact form .field {
	padding: 20px 0;
	clear: both; 
    position:relative;
}
#contact form .field label {
	clear: both;
	display: block; 
	margin: 0; padding: 5px 0;
}
#contact form .field.radio label,#contact form .field.checkbox label  {
    height:20px;
    line-height:20px;
}

#contact form input, #contact form textarea, #contact form select {
	padding: 10px; 
    font-family: inherit;
	font-size: inherit;
	color: #666; background: #A6953B;
	border: 1px solid #d5d5d5;
	width: 400px;
	float: left;
	margin-top: 3px;
    border-radius: 3px;
    box-sizing:content-box;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}

#contact form textarea {
	height: 200px;	
}
#contact form input[type=checkbox], #contact form input[type=radio] {
	width: auto; 
    padding: 0;
    margin: 0;
    border: none;
    display: inline;
    margin-right: 15px;
    height:20px; 
    
}
#contact form input.submit {
	clear: both; margin-top: 10px; 
    margin-bottom: 20px; 
    cursor: pointer;
    width: auto; background: #A6953B; border-radius: 0px; font-size: 1.3em; border: 0px; color: #000;
}

#contact form br { display: none; }
#contact form  label.error {
    color: red;
	position: absolute;
	clear: both;
	white-space: nowrap;
    position:absolute;
	background: #A6953B;
	border: 2px solid #f00;
    border-radius: 3px;
	padding: 10px 20px;
	font-size: 11px;
	z-index: 9;
    bottom:0; right: 5px;
}
#contact div.field.bc {
    display: none;   
}

/** mailstage **/
span#ms_error, div#ms_success {    
	  position: absolute;left: 0; top:0px;
	  background-color: #A6953B;
	  color: #f53d24; border: 7px solid #f53d24;
	  padding: 8px 15px; z-index: 9; 
	  font-size: 24px;  line-height:22px;
	  width: 330px;
	  text-align: center;
}
span#ms_error {
display: none; left: 4px;
}
div#ms_success {
	font-size: 28px; line-height: 33px;
}





 
@media screen and (max-width: 1000px) {
 
    #content.content-home, #home {
     width: 100%; 
    }
    #home .home_events .item, #home .home_events .item:first-child {
        width: 100%; font-size: 1.5em; padding: 1em!important;  padding-bottom: 0.5em!important; border-bottom: 1px solid #272822; border-left: 0!important;
    }
    #home .home_events .item:first-child {
        font-size: 1.8em;
    }
    #home .home_events .item a {
        padding: 0;
    }
    #home .home_events .item:last-child {
        border-bottom: 0;
    }

    #header .menu_trigger {
        display: block;
        width: 40px; height: 40px; display: block;
        position: absolute; right: 45px; top: 45px;
        cursor: pointer; z-index: 99;
    }
    #header #menu.active {
        display: block;
    }
    #header #menu {
        display: none;
        width: 100%;
        position: relative;
        z-index: 9;
        background: rgba(30,31,26,1);
    }
    #header #menu ul {
        float: none; padding: 0;
    }
    #header #menu ul:before {
    }
    #header #menu ul li {
        float: none; margin: 0;
       border-bottom: 2px solid #000; 
    }
    #header #menu ul li:last-child {
        border-bottom: 16px solid #000;
    }
    #header #menu ul li a {
        font-weight: 800;
        font-size: 1.5em;
        display: block;
        padding: 1em 2em; 
    }
    #header #logo {
        left: 1.5em;
    }

    #container div.fotos, #content.content-has-images {
        width: 100%;
    }

    .agenda .item .content {
        width: 100%;
    }
    .agenda .item .content .cal_cycle {
        width: 100%; position: relative!important; margin-bottom: 2em;
    }

    #footer { text-align: center; min-height: 80px; }
    #footer ul {  }
    #footer ul li a, #footer .slogan, #footer .fb, #footer .fb-like {  display: none!important; } 
    #footer ul li:last-child a {  display: block; margin-right: 200px; } 




}


/* disable selection */

#pager, .fotos, .agenda .item .content .description
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

span.selectable {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  user-select: text;
    
}

/**
  * jquery.kiek.css
  * Lightweight image viewer
  * © Cybox internet & communicatie, 2013
  * Lastchange: 25-04-13
  */

#kiek {
	position: fixed;
	top: 10%;
	left: 0;
	width: 100%;
	height: 80%;
	box-sizing:border-box!important;	
	-moz-box-sizing:border-box!important;	
	-webkit-box-sizing:border-box!important;
	z-index: 11;
	text-align:center;
	background-image: url('/images/ajax-loader_2.gif'); background-position: 50% 50%; background-repeat: no-repeat;background-size:32px 32px;
}

#kiek img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -25%;
	margin-top: -25%;
	
	display: none;
	
	max-width:100%;
	max-height:100%;
	cursor: pointer;
	/*border-radius: 3px;*/
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);

	background-color: #000;	
}

#kiek iframe {
    z-index: 13;   
}

#kiek-overlay {
	width: 100%;
	height: 100%;
	
	background: #000;
	
	position: fixed;
	left: 0;
	top: 0;
	
	opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	
	z-index: 9;
	
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	
	cursor: pointer;
}
#kiek-close {
	position: fixed; z-index: 99999999999; 
	left: 50%; 
	bottom: 5%; 
	width: 100px; 
	margin-left: -50px;
	text-align: center; 
	font-size: 16px;
}
#kiek-title {
	position: fixed; z-index: 99999999999; 
	left: 0; 
	top: 5%; 
	width: 100%; 
	text-align: center; 
	font-size: 16px;
	font-weight: bold;
}
div#kiek-left, div#kiek-right {
    font-family: Arial, sans-serif!important;
    font-size: 100px;
    position: fixed; height: 100%;
    top:0; z-index: 12;  
    cursor:pointer; 
    text-align: center;
    width: 150px;
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}
div#kiek-left:hover, div#kiek-right:hover {
    color:black;   
}
div#kiek-left {
    left:0px;
}
div#kiek-right {
    right: 0px;   
}
div#kiek-close span.kiek-close {
    cursor: pointer;
}
div#kiek-close span.kiek-close:hover {
    color:black;
}

/* css login */
.ledenform {
    border: 1px solid #ccc; background-color: #A79C60;
    padding: 40px; padding-left: 10%; padding-right: 0;
    border-radius: 4px;
    margin-top: 20px;
    /*background-image: url(#); background-position: 2% 50%; background-repeat: no-repeat; background-size: 64px 64px;*/
}
.ledenform input {
    font-family: inherit; font-size: inherit; color: #666; border: 1px solid #ccc; padding: 5px; margin-right: 5px; margin-left: 5px; border-radius: 3px;
}
.ledenform input[type=submit] {
    background:#333;
    color: #fff;
    margin-left:2px;
    padding: 4px;
    cursor: pointer;
    background-image: url(#);
    border: 1px solid #111;
    width:80px;
    -webkit-appearance: none;
    margin-right: 0;
}
.ledenform input[type=submit]:hover {
    background: #000;
}

@media screen and (max-width: 900px) {

    .ledenform {
        padding-left: 40px;
        background-position: 90% 15%;
    }
    .ledenform input {
        display: block; margin-right: 0; margin: 10px 0;
    }
    .ledenform input[type=submit] {
        margin-top: 20px;
    }

}