@charset "utf-8";
/* CSS Document */
/* Desktops and laptops ----------- 
@media only screen and (min-width : 1224px) {
a{}
a:hover{color:#000;}*/
h3{display:inline-block;}
#content{width:100%; max-width:1250px;  margin:0 auto;  box-sizing:border-box; padding: 0 20px; overflow:hidden; min-width:676px; }

#cat_holder{padding: 5px 0;background-color:#444; color:#fff; min-width:676px;}
#cat_inner_holder{max-width:1250px; margin: 0 auto; padding:0 20px; box-sizing:border-box}
#cat, #subcat{font-size:230%; font-family: 'Fjalla One', sans-serif; margin:0; font-weight:300;}

#cat{padding-left:10px;}
/*#subcat:first-letter{text-transform:capitalize;}*/

#position_icon{right:150px;}

#search_input{padding:5px 10px;
width:175px;
background:#fff;
border:0px solid #dbdbdb;
border-top-left-radius:10px; border-bottom-left-radius:10px;
}
.scrollUp{float:right; background-color:#fff; color:#000; font-size:16px; padding:0 9px 4px 9px;margin-right:20px; border-radius:20px; margin-top:11px; cursor:pointer; display:none;}


#search_opener_new{float:right; margin-top:2px; cursor:pointer;}
#search_opener_new img{width:40px; background-color:transparent; border:none;}

#search_holder_new{position:fixed;top:15%; left:50%; z-index:20; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); padding:30px 80px; background-color:#444; border:solid 2px #fff; border-radius:5px; display:none;}


#search_opener{position:relative; z-index:5; background-color:#888; border:none; color:#fff; font-size:16px; padding:1px 15px 3px 15px; border-top-right-radius:10px;  border-bottom-right-radius:10px;cursor:pointer; }
#search_opener:hover{background-color:#f00;}

#search_opener_top{display:none;}
#search_holder{ float:right; padding:12px 0;  margin-top:-3px; }


#search_holder input{ border-top-left-radius:8px; border-bottom-left-radius:8px;-webkit-appearance: none; appearance: none; }
/*#search_holder img{ width:21px; border:solid 1px #bbb; background-color:#fff; padding: 3px 5px; margin-top:-5px; margin-left:-3px; cursor:pointer;border-bottom-right-radius:8px; border-top-right-radius:8px;}
#search_holder img:hover{border:solid 1px #fff; }*/
/*#search_holder input{font-size:115%; font-weight:300; padding-left:5px;}*/
#search_holder button{font-size:108%; color:#666; font-weight:300; margin-top:-1px;}
#search_holder button:hover{color:#000; cursor:pointer;}
#search_holder2{display:inline-block; margin-left:20px;border-radius:5px; }
#search_holder2 input{padding:3px 0 0 0; }
#search_holder2 img{border:solid 1px #bbb; background-color:#fff; padding: 5px 7px; border-radius:3px;; margin-top:-5px;}*/

.scrollUp{float:right; background-color:#fff; color:#000; font-size:16px; padding:0 9px 4px 9px;margin-right:20px; border-radius:20px; margin-top:11px; cursor:pointer; display:none;}
.scrollUp:hover{background-color:#f00; color:#fff;}

#cat{text-transform: capitalize;}
#subcount{display:inline-block;font-size:110%; margin-left:10px; vertical-align:top; margin-top:20px;}
#g_counter_holder{float:right;}

#sub_header_holder{width:100%; padding:8px 0; box-sizing:border-box;  background-color:#bbb; overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling: touch;font-family: 'Fjalla One', sans-serif; text-align:center;}

#sub_header{  max-width:1210px; margin:0 auto; padding:0 10px;}/*1210*/
#sub_header .sh_arrow{color:#fff; font-size:x-large; font-weight:bold; display:none;}
/*#all_stones{display:inline-block; border:solid 3px #fff;  padding:0 6px; font-size:120%; padding:1px 13px; font-family: 'Fjalla One', sans-serif; cursor:pointer;}*/
#alle-gevelstenen:hover:not(.select_selected){color:#f00; transition:0.4s; cursor:pointer;}
/*#favorites{display:inline-block; border:solid 4px #fff;  width:155px; text-align:center; font-size:120%; font-family: 'Fjalla One', sans-serif; cursor:pointer;}*/
.white_bg{background-color:#fff;}
#favorites:hover:not(.select_selected){color:#f00;  transition:0.4s; cursor:pointer;}

/*select{font-size:120%; width:155px; text-align:center; border:solid 3px #fff;font-family: 'Fjalla One', sans-serif;  padding:-5px; cursor:pointer}
#straat_select{max-height:50px;}*/

select{}
select:hover:not(.select_selected){color:#f00; transition:0.4s; cursor:pointer;}
select option{text-align:left; background-color:#fff; color:#000;}
select option:first-child{ font-style:italic; font-weight:none; color:#ccc; }
.select_selected{background-color:#666; color:#fff; border:none;}

#sub_header div{display:inline-block; width:16%;  text-align:center; padding:3px 0;font-size:20px; }
#sub_header select{font-family: 'Fjalla One', sans-serif; font-weight:300; font-size:20px; padding:2px 0; width:15%; text-align:center;/*padding:2px 0 2px 20px;*/ }


/*#menu div{display:inline-block;}*/


#list{list-style:none; margin-left:-40px; margin-top:0; display:none;}
#list li{margin-top:10px; padding:10px; border:solid 1px #aaa;  height:105px; background-color:#f5f5f5;  border-radius:3px; transition: 0.4s }
#list li:hover{border:solid 1px #888;background-color:#fefefe; box-shadow:0 0 4px #ccc; cursor:pointer }


#list div{display:inline-block; vertical-align:top}
#list .im_holder{float:left;width:200px;}
#list .im_holder img{padding:2px; border:solid 1px #ccc; border-radius:2px;}
#list h3.straat_all{font-size:180%; font-weight:400;}
#list div.straat{ display:inline-block}
#list div.straat_nr{ display:inline-block }
#list div.name{font-size:190%; font-weight:700; max-height:50px; margin-top:-1px;max-width: Calc(100% - 220px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ellipsy{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#list div.noname{font-size:150%; font-weight:400; vertical-align:bottom; max-width: Calc(100% - 220px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#list div.txt{font-size:105%; padding-bottom:2px; height:40px; white-space:normal; overflow:hidden; width: Calc(100% - 220px);}
#list div.tags{font-size:small; border-top:solid 1px #ccc; box-shadow: inset 1px 1px 4px #ddd; padding-left:10px;}

/*#loading{position:absolute; left:50%; top:50%; -webkit-transform(-50%, -50%); transform(-50%, -50%);}

#img_big{position:fixed;z-index:12; width:100%; height: 100%; background-color:#000;  background-repeat:no-repeat; background-position:center; background-size:contain;display:none;}*/

#no_match{position:fixed; z-index:12; top:260px; padding:10px 20px; border:solid 5px #fff; background-color:#000; color:#fff; font-size:140%; font-weight:400; border-radius:10px; box-shadow: 0 0 10px #000; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display:none;}

.not_found{text-align:center; width:100%; font-size:120%;vertical-align:middle; font-weight:700; color:#ccc;  margin-top:50px; font-size:250%;  }
.not_found span{}
/*voor de fav */
.fr{padding:0 8px 4px 8px;float:right; margin-top:18px; font-weight:700; margin-right:10px; border-radius:15px; border:solid 1px #aaa ; background-color:#fff;}
.fr:first-child{ margin-top:8px;}
.fr:hover{background-color:#F00; color:#fff; cursor:pointer}


@keyframes blink {  
    25% { color:red; }
    100% { color: black; }
}
@-webkit-keyframes blink {
    25% { color: red; }
    100% { color: black; }
}
.blink {
    -webkit-animation: blink 3s linear;
    -moz-animation: blink 3s linear ;
    -ms-animation: blink 3s linear;
    -o-animation: blink 3s linear;
    animation: blink 3s linear;
} 



/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2){
/*#homer{width:6%; margin-top:-2px;}*/
#cat_holder, #content{min-width:100%;}

#cat, #subcat{font-size:200%;}
#cat{padding-left:0;}
#subcount{margin-top:13px;}
#sub_header_holder{ padding-top:8px;}
#sub_header{width:1000px; }
#sub_header .sh_arrow{ display:none;}
select{font-size:110%; width:80px;-webkit-appearance: none;background: #fff; padding:2px 2px 2px 10px; text-align-last:center;}
#favorites{font-size:110%; width:120px;-webkit-appearance:combo-box; appearance:combo-box;  border-radius:5px; padding:1px 2px; }
#alle-gevelstenen{border-radius:5px; padding-bottom:2px;}
/*#search_holder{   margin-top:-5px;}*/
#search_opener{ padding:0 8px 2px 15px; margin-left:-10px; margin-top:1px; }
#search_opener_new img{width:39px;}
/*#search_holder input{margin-right:-4px;}
#search_holder img{padding: 2px 5px 1px 5px; margin-top:-5px;}*/

.scrollUp{ padding:1px 5px 1px 5px; margin-top:8px;}
.scrollUp:hover{background-color:#fff; color:#000;}

#position_icon{right:100px;}

#list{}
#list h3.straat_all{font-size:170%; margin-top:-2px;vertical-align:text-top; }
#list div.name{font-size:160%; display:inline-block; margin-bottom:3px; max-width:Calc(100% - 200px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#list div.noname{font-size:140%;display:inline-block; margin-bottom:3px; max-width:Calc(100% - 200px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#list li:hover{border:solid 1px #888;background-color:#fefefe; box-shadow:0 0 4px #ccc; cursor:pointer }

#list div.txt{display:inline; height:120px; line-height:0.9;}

#sub_header select{padding:2px 0 2px 30px; width:15%; text-align:center;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#list h3.straat_all{font-size:150%;}
#list div.name{font-size:140%;}
#list div.noname{font-size:130%;}
#sub_header .sh_arrow{color:#000; font-size:x-large; font-weight:bold; display:inline-block; }
#sub_header{  width:1200px;}

/*#search_holder{ display:none;position:absolute; left:-3000px; }*/
#search_holder_new{text-align:center; width:40%}
#search_opener_top{position:absolute;right:67px; top:12px; width:31px;  -webkit-appearance: none; appearance:none; }
#content{margin-top:50px;  }

}



/*----------------------------------------------PHONE--------------------------------------------------------*/
@media only screen 
and (min-device-width : 320px)
and (max-device-width : 640px) {
	
/*#overlay{position:fixed; top:0; left:0; z-index:100; background-color:rgba(0,0,0,0.5); width:100%; height:100%; display:none;}
#loading{position:fixed; left:50%; top:50%; -webkit-transform(-50%, -50%); transform(-50%, -50%);}*/

#cat_holder{}
#cat_holder{padding: 4px 10px 1px 10px; background-color:#000; color:#fff;min-width:100%; width:100%; white-space:nowrap; box-sizing:border-box;}
#filter_holder{position:fixed; width:100%;font-family: 'Fjalla One', sans-serif;padding: 4px 10px 1px 10px;background-color:#000; color:#fff;width:100%; font-size:120%; white-space:nowrap; box-sizing:border-box; display:none;}
#cat_inner_holder{max-width:1500px;  margin:none; padding:0;}

#cat{padding-left:0;}
#cat, #subcat{font-family: 'Fjalla One', sans-serif;}
#cat{font-size:130%;text-transform: capitalize;}
#subcat{font-size:130%;}

#search_opener_top{position:absolute;right:67px; top:12px; width:31px; display:none; -webkit-appearance: none; appearance:none; }

#search_opener_new{display:none;}
#search_holder{ display:none;}
#subcount{ font-size:80%; position:absolute; right:10px; margin-left:10px; vertical-align:top; margin-top:5px; font-weight:400;}

/*#search_holder input{padding:4px; border:solid 1px #444; border-radius:3px; font-size:100%; width:60%; }
#search_holder img{border:solid 1px #444; background-color:#fff; padding: 4px 20px 5px 20px; border-radius:3px;; margin-top:-5px;}*/

#position_icon{right:105px;}

/*#g_counter_holder{float:right;}*/
#sub_header_holder{width:100%; overflow-x:scroll; padding:0; overflow-y:hidden; -webkit-overflow-scrolling: touch; background-color:#bbb; }
#sub_header{width:1000px; padding:5px; border-top:solid 1px #aaa; font-size:90%; border-bottom:solid 1px #888; text-align:center;} /*width:925px;*/
#sub_header div{display:inline-block; text-align:center; width:120px; font-size:120%; padding:3px 8px 3px 8px;  font-family: 'Fjalla One', sans-serif;}
#sub_header div:first-child{ width:200px}
#sub_header .sh_arrow{display:inline;color:#fff; font-size:x-large; font-weight:bold; vertical-align:middle;}
#sub_header select{font-size:120%;}
select:hover:not(.select_selected){color:#000;}
/*#header img#homer{width:12%; margin-top:0}*/

/*#alle-gevelstenen{display:inline-block; border:solid 3px #fff; padding:1px 13px;font-size:110%; padding:1px 8px; border-radius:5px; font-family: 'Fjalla One', sans-serif;}
#favorites{display:inline-block; text-align:center; font-size:110%; font-family: 'Fjalla One', sans-serif; cursor:default;width:130px; border:solid 3px #fff; border-radius:5px; padding:1px 2px;}*/
.white_bg{background-color:#fff;}


/* text-align:center; border:solid 3px #fff; font-family: 'Fjalla One', sans-serif; width:130px; -moz-appearance: none;; -webkit-appearance: none; appearance: none; background: #fff; border-radius:5px; padding:0 4px; }
select option{text-align:left;  background-color:#fff; color:#000;}
select option:first-child{ font-style:italic; font-weight:none; color:#ccc}*/
.select_selected{background-color:#666; color:#fff; text-align:center;}

.scrollUp{display:none;}



#content{width:100%;  padding: 0; background-color:#fff; box-sizing:border-box; overflow:hidden; max-width:none; min-width:100%; }


#list{display:none; margin-top:25px; width:100%;}
#list li{margin-top:5px; padding:10px; border:none; border-top:solid 1px #aaa; border-radius:0; border-bottom:solid 1px #aaa; background-color:#f5f5f5; padding:5px;  height:75px; overflow:hidden;}
#list li:hover{border:none;border-top:solid 1px #888;border-bottom:solid 1px #888;background-color:#fefefe; box-shadow:0 0 4px #ccc; cursor:pointer }

#list div{display:inline-block; vertical-align:top}
#list .im_holder{float:left;width:140px;  vertical-align:top;}
#list .im_holder img{padding:2px; border:solid 1px #ccc; border-radius:2px;height:73px;; padding:0;border-radius:4px;}
#list h3.straat_all{padding-bottom:0; margin-top:1px; margin-bottom:5px;  font-size:100%; font-family: 'Fjalla One', sans-serif; font-weight:400; white-space:nowrap;}
#list div.straat{max-width:Calc(100% - 10px); }
#list div.straat_nr{}
#list div.tussen{display:none;}
#list div.name{font-size:100%; font-weight:400; display:block; margin-top:-3px; max-width:Calc(100% - 130px);  word-wrap: break-word; white-space:normal; overflow:hidden; 
text-overflow:clip;}/*word-break:break-all;*/
.breaker{overflow-wrap: break-word; word-break:break-all;word-break: break-word;}
#list div.noname{display:block; font-size:90%; font-weight:400; max-height:40px;  white-space:normal;  margin-top:0; vertical-align:top; max-width:Calc(100% - 130px);overflow-wrap: break-word;}
#list div.txt{display:none;}
/*#list div.tags{font-size:small; border-top:solid 1px #ccc; box-shadow: inset 1px 1px 4px #ddd; padding-left:10px;}
#list div.txt{display:none;}
#list div.tags{display:none}*/


.menu_popup{position:fixed; z-index:50; top:85px; left:0; background-color:#f5f5f5; width:100%; height:Calc(100% - 85px); font-family: 'Fjalla One', sans-serif; box-sizing:border-box; line-height:1.5; overflow-y:auto; -webkit-overflow-scrolling:touch; display:none;}
#straat_holder{padding-bottom:30px;}
.insert{border-bottom:solid 1px #ccc; padding: 10px;}
.insert:hover{background-color:#444; color:#fff;}
.insert_header{background-color:#444; color:#fff; font-size:110%;  padding:7px ;}
.popup_bottom{position:fixed; bottom:0; width:100%; background-color:#444; color:#fff; padding:6px ; text-align:center;}



/*#no_match{position:fixed; z-index:12; top:260px; padding:10px 20px; border:solid 5px #fff; background-color:#000; color:#fff; font-size:140%; font-weight:400; border-radius:10px; box-shadow: 0 0 10px #000; transform: translate(-50%, -50%); display:none;}*/

/*.not_found{text-align:center; width:100%; font-size:80%;vertical-align:middle; font-weight:700; color:#f00;  margin-top:50px;   }
.not_found span{border:solid 4px #f00; padding:2px 6px;}*/
.not_found{text-align:center;  font-size:13vw; font-weight:700; color:#eee;   }

.fr{padding:0 8px 4px 8px;float:right;  font-weight:700;  border-radius:15px; border:solid 1px #aaa ; background-color:#fff;position:absolute; right:0;margin-right:5px; margin-top:10px;}
.fr:first-child{ margin-top:4px;}
/*.fr:hover{background-color:#F00; color:#fff; cursor:pointer}*/
	
	
}