@charset "utf-8";
/*@-webkit-keyframes slide {
    100% { -webkit-transform: translateX(0%); }
}
@keyframes slide {
    0% { transform: translateX(0%); }
}

.state{transform: translateX(100%); animation: slide 1s forwards;  animation-delay: 0; }
.state_back{transform: translateX(100%); animation: slide 1s forwards; animation-direction:reverse; animation-delay: 0; }
*/
#loading{position:absolute; left:40%; top:40%; transform(-50%, -50%);}
#content {
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 20px;
}
#position_icon{right:150px;}
#item_header_holder {
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 1px;
	background-color: #444;
	color: #fff;
	
}
#item_header_holder_inner {
	max-width:1250px; 
	margin:0 auto; 
	padding:0 20px; 
	box-sizing:border-box;
}

#item_header_straat {
	font-family: 'Fjalla One', sans-serif;
	display: inline-block;
	font-size: 230%;
	margin: 0 30px 0 0;
	padding:0;
	font-weight:400;
}
#item_header_name {
	display: inline-block;
	font-size: 260%;
	font-weight: 400;
	padding:0;
	margin:0;
	/*white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%;*/
}
#item_header_noname {
	display: inline-block;
	margin: 5px 0 0 0;
	padding:0;
	font-size: 200%;
	font-weight: 300;
}
#button_holder {
	padding: 10px 10px;
	box-sizing: border-box;
	margin-bottom: 15px;
	background-color: #bbb;
}
#button_holder_inner {
	max-width: 1210px;
	margin: 0 auto
} /*width- padding*/
/*#map_holder{position: absolute; z-index:10;top:-2000px;  }*/

#no_match {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	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;
	display: none;
}
#favorites, #location, .voor, .insp {
	border: solid 1px #bbb;
	background-color: #fff;
	padding: 5px 10px;
	font-size: 80%;
	font-weight: 400;
}
#button_seperator{display:none;}
.voor {
	margin-right: 20px;
}
.insp {
}
.but_sel {
	border: solid 1px #f00;
	background: #f00
}
#location {
	position: absolute;
	left: 40%
}
/*#location{margin-left:40px}*/
#favorites {
	float: right;
	margin-right: 0;
}
button.button_hover:hover {
	color: #f00;
	cursor: pointer;
}
.b_clicked {
	border: solid 1px #f00;
	background: linear-gradient(to bottom, #fff, #fff2f2);
	color: #f00
}
/*.cloner{position:absolute; margin-top:-3px;  background-color:#fff; color:#ccc; user-select:none;padding:4px 10px;}
.cloner:hover{color:#ccc;}*/
#img_holder {
	text-align: right;
}
#img_holder img {
	margin: 0 0 0 20px;
	padding: 3px 3px 4px 3px;
	border: solid 1px #ccc;
	transition: width 600ms ease-in-out;	
}
#img_holder img:hover {
	border: solid 1px #666;
}
#full_scr_txt_holder {
	position: fixed;
	top: 5px;
	width: 100%;
	text-align: center;
}
#full_scr_txt {
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	padding: 2px 10px;
	border-radius: 5px;
	font-weight: 400;
	background-color: rgba(0,0,0,0.5);
}
p {
	margin:0; padding:0;
}
.no_txt_found {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: #ccc;
	text-align: center;
	font-size: 250%;
}
#txt_content {
	/*line-height:1.5;*/
	white-space: pre-line;
}
#txt_content p {
	font-size: 110%;
	line-height: 1.4;	
}
#txt_content p:first-child {
	font-size: 230%;
	font-weight: 400;
	line-height: 1.2;
}
#txt_content p:nth-child(2) {
	font-size: 190%;
	line-height: 1.3;
}
#txt_content a {
	text-decoration: underline;
}
.more {
	color: #036;
	padding: 5px;
	white-space: pre-line;
	line-height: 1.5;
	display: none;
}
.extra { /*staat onderin text file om under images te definieren*/
	display: none;
}
#under_img_holder_holder {
	background-color: #f5f5f5;
	white-space: normal;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	
	display: none;
}
.scroll_hide {
	overflow-x: hidden;
}
#under_img_holder {
}
.under_image {
	display: inline-block;
	margin-right: 8px;
	border: solid 1px #fff;
}
.under_image:hover {
	border: solid 1px #aaa;
}
.under_image img {
	border: solid 10px #fff;
	border-bottom: none;
	cursor: pointer
}
.under_img_txt {
	background-color: #fff;
	text-align: center;
	font-size: small;
	padding: 0 10px;
	margin-top: -4px;
}
.upper_image {
	display: inline-block
}
#under_img_arrows{margin-top:-10px; color:#888; font-size:100%; display:none;}
#under_img_arrows div{display:inline; cursor:pointer;}
#under_img_arrows div:hover{color:#f00;}

#im_nav {
	position: absolute;
	z-index: 120;
	bottom: 0;
	width: 100%;
	background-color: #444;
	text-align: center;
	display: none;
}
#im_nav img.up {
	border: solid 1px #ddd;
	height: 50px;
	margin: 0 5px -3px 5px
}
#im_nav img.up:hover {
	border: solid 1px #fff
}
/*#im_nav_closer{margin-bottom:10px; float:right; padding:10px;}*/

#meer_weten_holder {
	text-align: center;
	margin: 20px 0;
}
#meer_weten {
	font-size: 150%;
	font-weight: 400;
	display: none;
}
#meer_weten:hover {
	color: #666;
	cursor: pointer
}
.notclicked:after {
	content: '';
	width: 25px;
	height: 25px;
	background-image: url(../site_pic/plus2.png);
	margin-left: 10px;
	position: absolute;
	margin-top: 2px;
	cursor: pointer;
}
.clicked:after {
	content: '';
	width: 25px;
	height: 25px;
	background-image: url(../site_pic/min2.png);
	margin-left: 10px;
	position: absolute;
	margin-top: 2px;
	cursor: pointer;
}
/*.open_rest, .open_insp, .open_img{text-decoration:underline; cursor:default; font-weight:400}*/

.arrow_box_under {
	position: relative;
	background: #ffffff;
	border: 1px solid #888;
}
/*.arrow_box_under:after, .arrow_box_under:before {left:50%}*/
.arrow_box_under:after, .arrow_box_under:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box_under:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}
.arrow_box_under:before {
	border-color: rgba(204, 204, 204, 0);
	border-top-color: #888;
	border-width: 21px;
	margin-left: -21px;
}
/*#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;}
#video, #audio{display:none;}*/

#onder_balk {
	padding: 15px 0 10px 0;

	border-top: solid 1px #ccc;
	margin-top: 10px;
	
	text-align: center;
	height: 35px;
	display: none;
}
#route_naam {
	font-weight: 400;
	text-transform: capitalize;
}
#deRoute {
	border: solid 1px #ccc;
	padding: 2px 8px;
	border-radius: 4px;
	background: linear-gradient(to bottom, #fff, #ddd);
	float: left;
	cursor: pointer;
}
#deRoute:hover {
	color: #666;
}
#download {
	cursor: pointer;
	border: solid 1px #ccc;
	padding: 2px 8px;
	display: inline-block;
	border-radius: 4px;
	background: linear-gradient(to bottom, #fff, #ddd);
}
.download-float {
	float: right
}
#download:hover {
	color: #666;
	cursor: pointer;
}
#next_prev_holder {
	height: 25px;
	text-align: center;
	margin-top: 20px;
	display: none;
}
#prev_stone {
	cursor: pointer;
	background-color: transparent;
	border: none;
	outline: none;
	width: 100px;
	text-align: right;
}
#next_stone {
	cursor: pointer;
	background-color: transparent;
	border: none;
	outline: none;
	width: 100px;
	text-align: left;
}
#prev_stone:hover, #next_stone:hover {
	color: #f00
}
#welke_selection {
	display: inline-block;
	padding: 1px 15px 2px 15px;
	border-radius: 15px;
	text-transform: capitalize;
	background-color: #f5f5f5;
	border: solid 1px #aaa;
	text-transform: lowercase;
}
#welke_selection:hover {
	color: #f00;
	cursor: pointer
}
#terug_naar_route {
	text-align: center;
	padding: 15px 0 0 0;
	width: 150px;
	margin: 0 auto;
	display: none;
}
#terug_naar_route:hover {
	color: #f00;
	cursor: pointer;
}
#tags{ font-size:70%; color:#666; margin-top:17px;display:none; font-weight:400; padding:0 10px;}
#tags_txt{font-weight:300;}
/*footer hier anders door de tags*/
#footer{margin-top: 10px;}

/*#hover_img_left{position:absolute;  margin-top:-93px; height:60px; width:80px;  background-repeat:no-repeat; background-position:center; background-size:contain; display:none;}
#hover_img_right{position:absolute;  margin-top:-93px; height:60px; width:100px;  background-repeat:no-repeat; background-position:center; background-size:contain; display:none;}
*/
@media only screen and (max-width : 1250px) {
#onder_balk {
	margin-right: -20px;
	margin-left: -20px;
	padding: 9px 20px 0 20px;
}
}



/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#item_header_holder {
	padding-left: 0;
	padding-top: 6px;
	padding-bottom: 1px;
	background-color: #444;
	color: #fff;
}
#item_header_straat {
	font-size: 200%
}
#item_header_name {
	font-size: 200%;
	margin-top: -10px;
}
#item_header_noname {
	font-size: 130%;
}
#back_route {
	margin-top: -2px;
	width: 6%;
	cursor: pointer;
}
.voor:hover, .insp:hover, #location:hover, #favorites:hover, #video:hover, #audio:hover {
	color: #000;
}
.voor {
	margin-right: 5px;
}
#txt_content p:first-child {
	font-size: 200%;
}
#txt_content p:nth-child(2) {
	font-size: 150%;
}
#position_icon{right:100px;}
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#img_holder {
	text-align: left;
}
#img_holder img {
	width: 100%;
}
}






/*---------------------------------------PHONE-----------------------------------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) {
#loading{position:absolute; left:50%; top:50%; transform(-50%, -50%);}

#content{width:100%;max-width:1250px; margin:0 auto;  background-color:#fff; box-sizing:border-box; padding: 0;}

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

#item_header_holder{padding:7px 0 5px 10px;background-color:#444; color:#fff; box-sizing:border-box; width:100%; }
#item_header_holder_inner {
	max-width:1250px; 
	margin:0 auto; 
	padding:0 ; 
	box-sizing:border-box;
}
#item_header_straat{font-family: 'Fjalla One', sans-serif;display:block;  font-size:130%;  white-space:nowrap; overflow:hidden;text-overflow: ellipsis;}
#item_header_name{display:inline-block; font-size:120%; font-weight:700;word-break:break-all;}
#item_header_noname{display:inline-block;  font-size:120%;font-weight:300; margin: 0 0 0 -5px; max-width:100%; }


#position_icon{right:80px;}

#button_seperator{display:block; clear:both;}
#button_holder{ box-sizing:border-box; background-color:#bbb; padding:5px 0 0 0; margin-bottom:0; border:none; text-align:center; border-bottom:solid 2px #aaa; height:75px; }

#button_holder button{width:50%; display:inline-block;}
/*#button_holder table td{padding: 0 5px 0 5px;}*/
.voor{float:left;}
#location{float:left; left:0;}
.insp{float:right;}
#favorites{float:right;}

#no_match{position:absolute; z-index:10; width:70%; top:50%; left:50%;  -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);padding:10px 20px; border:solid 5px #fff; background-color:#000; color:#fff; font-size:100%; font-weight:400; border-radius:10px; box-shadow: 0 0 10px #000; text-align:center; display:none;}
/*#no_match{top:260px; padding:10px 20px;font-size:100%; text-align:center; display:none;}*/

#favorites, #location, .voor, .insp{border:solid 1px #bbb; background-color:#fff; padding:5px 10px; font-size:80%;font-weight:400; margin-right:0;  margin-bottom:5px; }


.insp{}
.but_sel{border:solid 1px #f00; background:#f00}



button.button_hover:hover{color:#000}




.b_clicked{border:solid 1px #f00; background: linear-gradient(to bottom, #fff,#fff2f2); color:#f00}

/*.cloner{position:absolute; margin-top:-3px;  background-color:#fff; color:#ccc; user-select:none;padding:4px 10px;}
.cloner:hover{color:#ccc;}*/

#img_holder img{transition:width 600ms ease-in-out;width:100%; margin:0 0 10px 0; padding:0; }



#full_scr_txt_holder{position:fixed; top:5px; width:100%; text-align:center;}
#full_scr_txt{ color:#fff; text-shadow:1px 1px 1px #000; padding:2px 10px; border-radius:5px; font-weight:400; background-color:rgba(0,0,0,0.5);}

p{margin-bottom:0;}

.no_txt_found{ font-family: 'Roboto', sans-serif; font-weight:700; color:#ccc; text-align:center; font-size:250%; }

#txt_content {
	/*line-height:1.5;*/
	white-space:pre-line;padding:5px 10px;box-sizing:border-box;
}
#txt_content p {
	
	
	margin:0;
	padding:0;
	line-height:1.4;
	font-size:100%;
	
}
#txt_content p:first-child {
	
	font-weight:400;	
	
	font-size:150%;	
	line-height:1.2;
}
#txt_content p:nth-child(2) {
	
	font-size:130%;
	line-height:1.2;
}






.more{color:#036; padding:5px; white-space:pre-line; line-height:1.5; display:none;}


.extra { /*staat onderin text file om under images te definieren*/
	display:none;
}
#under_img_holder_holder{background-color:#f5f5f5; white-space:normal; width:100%;  box-sizing:border-box;  padding:10px; margin-top:10px; margin-bottom:10px;  overflow-y:hidden;  -webkit-overflow-scrolling: touch;; display:none;}
.scroll_hide{overflow-x:hidden;}
#under_img_holder{}
.under_image{display:inline-block; margin-right:8px; border:solid 1px #fff;}
.under_image:hover{border:solid 1px #aaa;}
.under_image img{ border:solid 10px #fff; border-bottom:none; cursor:pointer}
.under_img_txt{background-color:#fff; text-align:center; font-size:small; padding:0 10px; margin-top:-4px;}



/*.upper_image{display:inline-block}
#im_nav{position:absolute; z-index:120; bottom:0;  width:100%; background-color:#444;   text-align:center; display:none;}
#im_nav img.up{border:solid 1px #ddd; height:50px; margin: 0 5px -3px 5px}
#im_nav img.up:hover{border:solid 1px #fff}
#im_nav_closer{margin-bottom:10px; float:right; padding:10px;}*/

#meer_weten_holder{text-align:center; margin:10px 0 20px 0;}
#meer_weten{font-size:100%; font-weight:400; display:none;}
#meer_weten img{float:left;}
#meer_weten_txt{margin-left:-20px;}


.notclicked:after {
	content:'';
	width:20px;
	height:20px;
	background-image:url(../site_pic/plus.png);
	background-size:contain;
	margin-left:10px;	
	position:absolute;
	margin-top:0;
	
}
.clicked:after {
	content:'';
	width:20px;
	height:20px;
	background-image:url(../site_pic/min.png);
	background-size:contain;
	margin-left:10px;	
	position:absolute;
	margin-top:0;
}




/*.open_rest, .open_insp, .open_img{text-decoration:underline; cursor:default; font-weight:400}*/

.arrow_box_under { position: relative; background: #ffffff; border: 1px solid #888; }
/*.arrow_box_under:after, .arrow_box_under:before {left:50%}*/
.arrow_box_under:after, .arrow_box_under:before { top: 100%;  border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
.arrow_box_under:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 20px; margin-left: -20px; } 
.arrow_box_under:before { border-color: rgba(204, 204, 204, 0); border-top-color: #888; border-width: 21px; margin-left: -21px; }

/*#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;}


#video, #audio{display:none;}*/








#im_nav img.up{height:50px; margin: 0 5px -3px 5px}
#dubbelclick_close{display:none}
/*#map_holder{position: absolute; z-index:10;top:-2000px; border:none;  box-shadow:none; width:100%; height:100%; }

#im_nav{width:55px; padding:5px;margin-top:0; margin-left:0;}
#im_nav img.up{width:50px; margin-bottom:5px;}
#im_nav_closer{margin-bottom:5px; float:right; padding:5px;}
*/

/*.under_image img{height:100px; width:100px}
.under_image div{ width:100px}*/
.under_img_txt{font-size:x-small;}


#next_prev_holder{height:30px;   text-align:center; margin:10px ; padding:5px 0;}
#prev_stone{  cursor:pointer; background-color:transparent; border:none; outline:none;float:left;}
#next_stone{ float:right; cursor:pointer;background-color:transparent; border:none; outline:none;}


/*#welke_selection{display:inline-block;  padding:1px 15px 2px 15px;  text-transform:capitalize; }*/


#onder_balk{margin:0;box-sizing:border-box; padding:5px 5px 45px 5px; font-size:x-small; font-weight:400; background-color:#f5f5f5; border-bottom:solid 1px #ccc; min-height:20px; display:none;}

#route_naam{text-transform: capitalize;display:block;}
#deRoute{float:left; text-align:left; border:solid 1px #ccc; padding:7px 8px 5px 8px;  border-radius:4px; background:linear-gradient(to bottom, #fff, #fff, #ddd); width:40%;}
#deRoute img{float:left; margin-right:8px; margin-top:3px;}

/*#deRoute:hover{color:#666; cursor:pointer;}*/

#download:hover{color:#666; cursor:pointer;}

#download{ border:solid 1px #ccc; padding:7px 8px 11px 8px; border-radius:4px; background:linear-gradient(to bottom, #fff, #fff, #ddd); width:40%;}






}