/****************************************/
/* overlay */
/****************************************/
//need as a bg image for overlay, also the divb has to be only overlaying the image not the complete div
//div.item{ position: relative; width:100%; background-image: url(../images/banner_nijmegen.jpg); background-size: cover; background-position: center; min-height: 754px; background-repeat: no-repeat; }
//div.item #banner_overlay { background-color: #074684 ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1;}
.five_colums_20 {}
.five_colums_20 .column_20{min-height:1px; width:20%;float:left;}
.five_colums_20 .column_20_row{float:left; width: 100%;}


.item .portrait {
    display: inline-block;
    position: relative;
    //width: 241px;
}

.item .portrait.changed:after { 
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(47,193,244,.5);
    z-index: 1;
}

.item .portrait img {
    margin: 0;
    padding: 0;
    filter: grayscale(70%);
    -webkit-filter: grayscale(70%);
    opacity: 1;
}


/****************************************/
/* POP UP */
/****************************************/

#content_box span.popupSpeaker_button {font-size:12px; cursor: pointer; color:black;}
span.popupSpeaker_button :hover{cursor: pointer;}
span.popupSpeakerClose{font-size:12px; cursor: pointer; float:right; margin-top: 30px;}
span.popupSpeakerClose:hover{cursor: pointer;}
span.popupSpeakerClose img{height: 40px;}

//.popupSpeaker{display:none; position:fixed; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; margin-right: 381px; margin-left: 33px; }
.popupSpeaker{display:none; position:inherit;  }

.popupSpeaker .item_top {background-color:#4f5156; padding:0;}
.popupSpeaker .single_speaker_info {    display: inline-block; border-top: 1px solid #F9B21C; border-bottom: 1px solid #F9B21C; min-height: 470px;}
.popupSpeaker .two_colums_33_66 > .column_right {padding-right:0px;     padding-left: 0px;}
.popupSpeaker_button {font-family: 'Open Sans', sans-serif;  font-size:13px; color:#A0C63C; }
.popupSpeaker_button img { margin-left: 10px; margin-top: -5px;}
.popupSpeaker h1{text-align: center;}
.popupSpeaker h2{text-align: center;}

/* SPACER IN BETWEEN ITEMS */
.popupSpeaker .spacer {margin:0 0 20px 0;}




/****************************************/
/* Speakers specific*/
/****************************************/
.speakers .fce_column_one{float:left; width:192px /*25%*/;}
.speakers .fce_column_one .item_top {background-color: white;}

.speakers {float:none; background-color: white; padding: 50px 200px 0px 200px;}
.speakers h1{    /*margin-left: 160px; */text-align: center;}
.speakers .speaker_item{ padding: 10px; text-align: center;}
.speakers .speaker_item .banner{float:right; margin:0 0 10px 10px; padding:0;}
.speakers .speaker_item .title{clear:both; padding: 0; font-size: 14px; font-weight: bold;}
.speakers .speakers_item .title{ padding:0; font-size: 14px;font-weight: bold;} 
.speakers .speaker_item .subtitle{ color:rgb(70,137,70); font-weight:bold; font-size:12px; margin:0; padding:0;}
.speakers .speaker_item .article{font-family: 'Open Sans', sans-serif;  font-size:13px; padding:0; margin:0;}
.speakers .speaker_item .speaker_info{ padding:10px 0px 0px 0px; width:100%; text-align: center; vertical-align: middle;}

.speakers .speaker_item img{ height: 260px /*135px*/; vertical-align: middle; text-align: center; align-content: center;}

/****************************************/
/* SCROLLABLE AREA */
/****************************************/
#scrollbar{    width:100%; height: 480px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;}
#scrollbar .clear{clear:both; height:1px; padding:0; margin:0;}

.scrollable {/* required settings */ position:relative; overflow:hidden; width: 93%; height:100%; float:left; border:1px solid rgb(200,200,200); border-width:0; }

/* needed to contain all items */
.scrollable .items{width:20000em; position:absolute; clear:both; }

/* vertical align by using display table and cell */
.items div.floater {float:left; height:auto; width:auto;/*height:155px; width:420px; padding:10px 20px 0 20px;*/ margin:0; overflow:hidden;}
.items div.floater img.image{ margin:0; padding:0; filter: grayscale(70%); -webkit-filter: grayscale(70%); opacity: 1} .items div.floater h1.header{font-size:13px !important; color:black !important; font-weight:bold !important; padding:0 10px 0 10px; margin-top:0;}
.items div.floater p.bodytext{ font-size:11px !important; padding:0 10px 0 10px !important;}
.items div.floater p.link {padding:0 10px 0 10px !important;}
.items div.floater p.link a{font-size:11px !important; text-decoration:none; font-weight:bold;}

/* clear floating area on bottom*/
div.scrollable_bottom{clear:both; height:1px; padding:0; margin:0;}

/* prev, next, prevPage and nextPage buttons */
a.browse {display:block; width:20px; height:155px; float:left; margin:0; padding:0; font-size:1px; cursor:pointer; }
/* right */
a.right { margin-left: 4px; margin-top: 75px; clear:right; margin-right: 0px; background-image:url(../images/scrollable/scrollbar_browse_right_bright.png); background-repeat: no-repeat; background-position:50% 50%;}
a.right:hover {  background-color:transparent !important; background-image:url(../images/scrollable/scrollbar_browse_right.png);}
/* left */
a.left	{ margin-right: 4px; margin-top: 75px; margin-left: 0px; background-image:url(../images/scrollable/scrollbar_browse_left_bright.png); background-repeat: no-repeat; background-position:50% 50%;}
a.left:hover {  background-color:transparent !important; background-image:url(../images/scrollable/scrollbar_browse_left.png); }




/****************************************/
/* NAVIGATION */
/****************************************/
.navi_bar {clear:both; width:745px; text-align:center;}
/* position and dimensions of the navigator */
.navi {height:20px; width:300px; margin:325px; text-align:center; }
/* items inside navigator */
.navi a {width:8px; height:8px; float:left; margin:3px 5px 3px 5px; background:url(../images/scrollable/navigator.png) 0 0 no-repeat; display:block; font-size:1px; }
/* mouseover state */
.navi a:hover {background-position:0 -8px; }
/* active state (current page state) */
.navi a.active {background-position:0 -16px; }
.speakers .popupSpeaker h1 {margin-left: 0px; }



/****************************************/
/* NOT USED*/
/****************************************/
/* up and down */
a.up, a.down{background:url(../images/scrollable/vert_large.png) no-repeat; float: none; margin: 10px 50px;}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {visibility:hidden !important;}
/* active item */
.scrollable .active {border:2px solid #000; position:relative; cursor:default;}
.three_colums_20_60_20 { overflow: hidden;}


/* ********************************************************************** */
/* ITEM */
/* ********************************************************************** */


#content_box .speaker_row .item{
    //background: #4f5156;
    padding: 30px 0px;
    margin-top: 10px;
    margin-left: 3px;
    margin-right: 3px;
    color: #FFF;
    /*-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    text-align: center;
    //height: 670px;
}

#content_box .item .portrait img { width: 200px;}

/* ********************************************************************** */
/* LIGHTBOX: ITEM */
/* ********************************************************************** */

#content_box .speaker_row .item_lightbox{
    //background: #4f5156;
    padding: 30px 0px;
    margin-top: 10px;
    margin-left: 3px;
    margin-right: 3px;
    color: #FFF;
    /*-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    text-align: left;
    //height: 670px;
}
.popupSpeaker .speaker_item_lightbox{margin: 100px 0 20px 100px;padding: 10px;}
#content_box .item_lightbox .portrait img { width: 270px;}


/* ********************************************************************** */
/* LIGHTBOX: TITLE and DISCRIPTION */
/* ********************************************************************** */

#content_box .speaker_row .item_lightbox div.title{    
    border-left: none;
    margin-top: -290px; 
    position: relative;
    padding-top: 90px;
    z-index: 1;
    margin-left: 210px;
    padding-left: 70px;
    padding-bottom: 25px;

}
#content_box .speaker_row .item_lightbox div.description{   

    margin-left: 210px;
    padding-left: 70px;
    margin-top: -37px;
    /* padding-left: 10px; */
    border-bottom: 7px solid #F9B21C;
    text-align: left;
    position: relative;
    padding-bottom: 15px;
}



/* ********************************************************************** */
/* TITLE and DISCRIPTION */
/* ********************************************************************** */
#content_box .speaker_row div.title{
    font-family: 'Hammersmith One', sans-serif;
    color: #F9B21C;
    font-size: 21px;
    line-height: 22px;
    margin-left: 5px;
    padding-left: 5px;
    margin-top: -40px;
    opacity: 0.99;
    border-left: 7px solid #F9B21C;
    position: relative;
    padding-top: 50px;
    padding-bottom: 5px;
    z-index: 1;
    margin-left: 30px;
}
#content_box .speaker_row .description { 
    font-family: 'Hammersmith One', sans-serif;
    text-align: center;
    color: #4A4A4A;
    font-size: 18px;
    line-height: 21px;
    padding-left: 10px;
    margin-left: 30px;

}







/* ********************************************************************** */
/* Responsive */
/* ********************************************************************** */


@media only screen and (min-width: 1281px){
    #content_box .popupSpeaker .two_colums_33_66 > .column_left { float: left; width: 40%;}
    #content_box .popupSpeaker .two_colums_33_66 > .column_right { float: left; width: 60%;}
}

@media only screen and (max-width: 1024px) {   
    .three_colums_20_60_20 > .column_left {width:0%; display: none; }
    .three_colums_20_60_20 > .column_right {width:0%; display: none; }
    .three_colums_20_60_20 > .column_middle {width:100%; text-align: center;}
}

@media only screen and (max-width: 767px) {   
    .five_colums_20 .column_20 { width: 100%;}
    .two_colums_33_66 .column_left {display: none;}
    .popupSpeaker .speaker_item_lightbox {margin:0; padding:0; margin-top: 120px;}
    #content_box .speaker_row .description {margin-top: 0px;}
}

@media only screen and (max-width: 600px) {   
    .speakers .speaker_item img {height: 100px;}
}