@charset "utf-8";
/* CSS Document */


/* The sidepanel menu */
.sidepanel {
  height: 130px; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
	margin-top: 0px;
	margin-left: -40px;
  background-color: #FFFFFF; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden;
  padding-bottom: 100px; /* Place content 60px from the top */
	padding-left: 40px;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 40px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

em {font-style: normal;}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: .4em;
	font-weight: bold;
  cursor: pointer;
  background-color: #188167;
  color: white;
  padding: 10px 15px;
  border: 2px #188167 solid;
	position:absolute;
	top: 160px;
	left: -5px;
	border-radius: 5px;
}

.openbtn:hover {
  background-color: #444;
}

	.red {color: #ad1015;}

#CURTAIN {width:100%; height:100vh; box-sizing:border-box; -webkit-transition:opacity 0.3s ease-out; transition:opacity 0.3s ease-out; background-color:rgba(255,255,255,0.45); position:fixed; top:0; left:-100%; z-index:9999; overflow:visible; opacity:0; line-height:1.2;}

#CURTAIN2 {width:100%; height:auto; box-sizing:border-box; -webkit-transition:opacity 0.3s ease-out; transition:opacity 0.3s ease-out; background-color:rgba(0,0,0,0.75); position:absolute; top:-9999px; left:-100%; z-index:9998; overflow:visible; opacity:0; line-height:1.2;}

#CURTAIN.show, #CURTAIN2.show {left:0; opacity:1;}

#CURTAIN2.show {overflow-y:auto; height:100vh; top:0px; padding:20px 0;}

#CURTAIN.show>div {background-color:#EDEDED;}

#CURTAIN2.show>div {background-color:#FFFFFF; padding:0 3% 10px 3%; position:relative; top:0px;}

#CURTAIN h3, #CURTAIN h2 {margin:0 0 5px 0; padding:0 0 2px 0; border-bottom:1px #000000 solid; font-size:1.4em; color:#000000; top:auto; width:100%; background:none;}

#CURTAIN h3 {margin:0 0 5px 0; padding:0 0 2px 0; border-bottom:1px #000000 solid; font-size:1.4em; color:#000000; top:auto; width:100%; background:none; margin-bottom: 10px;}


#CURTAIN p:last-of-type {margin-bottom:0;}

#CURTAIN ul {margin-bottom:10px;}

#CURTAIN li {margin-bottom:10px !important;}

#CURTAIN span {position:fixed; top:-9999px;}

#CURTAIN2 #CLOSE_INFO2 {position:fixed; right:-100px; top:-40px; bottom:auto; width:120%; height:40px; background-color:#00529B; font-size:100%; font-weight:bold; color:#FFFFFF; text-align: center; padding-top:10px;  text-decoration:none; box-sizing:border-box; -webkit-transition:background-color 0.2s ease-in; transition:background-color 0.2s ease-in;}

#CURTAIN2 #CLOSE_INFO2:hover, #CURTAIN2 #CLOSE_INFO2:focus {background-color:#44AA90;}

#CURTAIN2.show #CLOSE_INFO2 {top:0px;}

.backer {position:absolute; width:100%; height:100%; background-color:#FFFFFF; top:0px; left:0px; pointer-events:none; z-index:-1;}

@media screen and (min-width: 0px) {
	#CURTAIN {font-size:0.9em; line-height:0.9;}
	
	#CURTAIN2.show {/*padding:1vh 0 0 0; top:4.5vh;*/ width:100%; height:100vh; overflow-x:hidden; position:absolute;}
	
	#CURTAIN ul ul {margin-bottom:4px; margin-top:4px;}
	
	#CURTAIN li {margin-bottom:10px !important;}
	
	#CURTAIN.show>div {height:calc(100vh - 80px); padding: 5px 5px 5px 5px; top:-50px; position:relative; }
	
	#CURTAIN.show>div::before {content:url(../images/Help.png); position:absolute; top:-15px; left:calc(100% - 59px); border-radius:50px; border:3px #FFFFFF solid; overflow:hidden; box-shadow:0px 0px 5px #333333; width:44px; height:44px; z-index:9}
	
	#CURTAIN #CLOSE_INFO {position:fixed; right:0px; top:-40px; bottom:auto; width:100%; height:40px; background-color:#00529B; font-size:100%; font-weight:bold; color:#FFFFFF; text-align: center; padding-top:10px; text-decoration:none; box-sizing:border-box;}
	
	#CURTAIN.show #CLOSE_INFO {top:0px;}
}

@media screen and (min-width: 650px) {
	#CURTAIN {font-size:1em; line-height:1.2;}
	
	#CURTAIN ul ul {margin-bottom:6px; margin-top:6px;}
	
	#CURTAIN li {margin-bottom:6px !important;}
}

@media screen and (min-width: 800px) {
	#CURTAIN.show {padding:15vh 25%;}
	
	#CURTAIN2.show {padding:20px 10%;}
	
	#CURTAIN.show>div:not(.backer), #CURTAIN2.show>div {width:100%; height:auto; margin:0 0 30px 0; padding:20px 5px 5px 20px; border-radius:10px; border:3px #FFFFFF solid; box-shadow:0px 0px 20px #000000; position:relative; box-sizing:border-box;}
	
	#CURTAIN.show>div::before {top:-22px; left:-22px;}
	
	#CURTAIN.show #CLOSE_INFO {position:absolute; right:6px; bottom:6px; top:auto; width:auto; height:auto; background-color:transparent; font-size:100%; font-weight:normal; color:#0000FF; text-align:left; padding:0px; text-decoration:underline;}
	
		#CURTAIN li {margin-bottom:6px !important;}
}