a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: blue;}
a:active {color: blue;}

.wrapper{position:absolute;top:24%; left:50px; width:18%; height: auto; z-index:100; text-align:center; border:4px solid red; border-radius: 20px; padding: 20px;background-color: white;} 
.instruct {position:absolute; top:0; left:10%; width:80%;height: auto;z-index:5; text-align:center;}
.title {position:absolute; bottom:1.5%; left:10%; width:80%;height: 15%;z-index:10; text-align:center;}
#rettoinstrns {position:absolute; top:22%; left:32px; width:5%; height:5%; display:none; z-index:1}

.exit_btn {position: relative; top: -45px; left: -45px; width: 10%; height: 10%; text-align:center;}
.btn_exit {background-color: white; width:50px; height:50px; border: 3px solid black; border-radius: 50%; color: black; padding: 5px 5px; font-size: 26px; cursor: pointer;}
.btn_exit:hover {background-color: red; border: 5px solid red; color:white;}	

.gobackinst_btn {width: 10%; height: 10%; text-align:center;}
.btn_gobackinst {background-color: #EC801B; border: 5px solid #EC801B; border-radius: 50%; width: 45px; height:45px; color: white; font-size: 26px; cursor: pointer;}
.btn_gobackinst:hover {background-color: red; border: 5px solid red;}


hr {display: block;  margin-top: 0.2em; margin-bottom: 0.2em; width:65%; border-style: inset; border-width: 3px;clear: both; border:2px solid black;}

.instruction_title{font-family: Calibri; font-size:16pt; font-size: 1.4vmax; text-decoration:underline; font-weight:bold; color:black;line-height:0.7;}
.instruction_body {font-family: Calibri; font-size:14pt; font-size: 1.2vmax; color:black;line-height:1.0;}
.title_big {font-family: Palatino; font-size:20pt; font-size:1.6vmax; color: #F1420E; line-height:1.2;font-weight:bold; margin-top:-20px; margin-bottom:-3px; background-color:white; z-index:1;}
.title_small {font-family: Calibri; font-size:14pt; font-size:1.0vmax; color:black; line-height:1.5; margin-top:-2px; background-color:white; z-index:1;}
.instrctns {font-family: Calibri; font-size:14pt; font-size:1.0vmax; color:black; line-height:1.2; margin-top:-60px;}
.mark {font-family: Verdana Calibri ; color:black; font-size:14pt; font-size:1.0vmax; cursor:pointer; margin-bottom:-20px; margin-top:-20px;}
.mark:hover {color:red; font-weight:bold;}
.tooltiptxt {font-family: Times New Roman; color:white; padding: 2px 4px; font-size:14pt; display:inline-block;}

/* tooltips */
.tooltip { position: relative; display: inline-block; border-bottom: 2px solid blue; line-height:1.0; cursor:pointer;}
.tooltip .tooltiptext {width: 230px;  width: fit-content; background-color: #F9CA66; color: #000; text-align: center; padding: 10px; border-radius: 6px; position: absolute; z-index: 2; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); visibility: hidden; opacity: 0;  -webkit-transition: all 0.9s ease-out 0.2s;   -moz-transition: all 0.9s ease-out 0.2s;   -ms-transition: all 0.9s ease-out 0.2s;   -o-transition: all 0.9s ease-out 0.2s;   transition: all 0.9s ease-out 0.2s;}
.tooltip:hover .tooltiptext {visibility: visible; -webkit-opacity: 1.0 -moz-opacity: 1.0; opacity: 1.0;}
.tooltip.hover_effect .tooltiptext {visibility: visible; -webkit-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0;} /* used for touch devices only  */
.hover {-webkit-user-select:none; -webkit-touch-callout:none}  /* used for touch devices only */

.tooltip .tooltiptext_m2p {top:25px; min-width: 150px; background-color: #F9CA66; color: #000; text-align: left; padding: 10px; border-radius: 6px; position: absolute; z-index: 2; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); visibility: hidden; opacity: 0;  -webkit-transition: all 0.9s ease-out 0.2s;   -moz-transition: all 0.9s ease-out 0.2s;   -ms-transition: all 0.9s ease-out 0.2s;   -o-transition: all 0.9s ease-out 0.2s;   transition: all 0.9s ease-out 0.2s;}
/*.tooltiptext_m2p {text-align:left; width:140px;top: 25px;}   used for map 2 page panel */
.tooltip.hover_effect .tooltiptext_m2p {visibility: visible; -webkit-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0;} /* used for touch devices only  */
.tooltip:hover .tooltiptext_m2p {visibility: visible; -webkit-opacity: 1.0 -moz-opacity: 1.0; opacity: 1.0;}

/*@media only screen and (max-width: 800px) {   iPads and smaller devices) */
@media only screen and (min-device-width: 80px) and (max-device-width : 1024px) and (orientation : portrait) {
	input[type=range] {display: none;}
	form{opacity:0;}
	.wrapper{position:absolute;top:24%; left:20px; width:18%; height: auto; z-index:1; text-align:center; border:4px solid red; border-radius: 20px; padding: 20px;background-color: white;}
	#page_map_index{position:absolute;top:24%; left:20px; width:content-fit; height: auto; z-index:1; text-align:left; border:4px solid red; border-radius: 20px; padding: 20px; background-color: white; display:none;}
	.title {position:absolute; top:7%; left:10%; width:80%;height: 15%;z-index:1; text-align:center;}
	.instruct {display:none;} 
	.goinstback_btn {position: relative; top: -90px; right: -86px; width: 10%; height: 10%; text-align:center; z-index: 1; }
	.header {padding: 8px 0 10px 0; background: #cccccc; position: relative; height:380px;  display: none;  z-index: 2000;}
	p.mark {font-family: Verdana Calibri ; color:black; font-size:14pt; font-size:1.5vmax; cursor:pointer; margin-bottom:-20px; margin-top:-20px;}
}

@media only screen and (min-device-width: 80px) and (max-device-width : 1024px) and (orientation : landscape){
	input[type=range] {display: none;}
	form{opacity:0;}.
	wrapper{position:absolute;top:24%; left:20px; width:18%; height: auto; z-index:1; text-align:center; border:4px solid red; border-radius: 20px; padding: 20px;background-color: white;}
	#page_map_index{position:absolute;top:24%; left:20px; width:content-fit; height: auto; z-index:1; text-align:left; border:4px solid red; border-radius: 20px; padding: 20px; background-color: white; display:none;}.
	title {position:absolute; top:3%; left:10%; width:80%;height: 15%;z-index:1; text-align:center;}
	.title {position:absolute; top:7%; left:10%; width:80%;height: 15%;z-index:1; text-align:center;}
	.instruct {display:none;}
	.goinstback_btn {position: relative; top: -90px; right: -86px; width: 10%; height: 10%; text-align:center; z-index: 1; }
	.header {padding: 8px 0 10px 0; background: #cccccc; position: relative; height:380px;  display: none;  z-index: 2000;}
	p.mark {font-family: Verdana Calibri ; color:black; font-size:14pt; cursor:pointer; margin-bottom:-20px; margin-top:-20px;}
}