/*

		   hgsafarigrid.css
		---------------------

  This stylesheet has been created by Snowbody Cortes for HG Safari Grid (HGS Grid).
  
  Free to use or modify for non-commercial uses.
  If you want to use for a commercial project, contact Snowbody Cortes.

  Current version:	07
  
  Version history:
  	00		initial version.
  	01		flexbox for divs with text+image, 2 images, 2 text columns.
  	02		homepage styles integration.
  	03		webp background image, footer text resized for mobile.
  	04		<pre> for single and double column.
  	05		highlighting for map areas.
  	06		readonly text.
  	07    navigation bar, touchable img, overlay window
  
*/

		body {
			background-image: url('hgsafari_background.webp');
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			font-family: Helvetica, sans-serif;	/*"Arial Black", Helvetica, sans-serif;*/
			/*font-size: 16px;*/
			color: white;
		}
		.header_div {
			/*border:1px solid #FF0000;*/	/*for debugging*/
			text-align: center;
		}
		.header_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 70%;
			height: auto;
		}
		.small_button {
			border: none;
			color: white;
			padding: 6px 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 12px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 6px;  /* rounded button */
		}
		.button {
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 12px;  /* rounded button */
		}
		.green_filled {background-color: #04AA6D;} /* Green (valid) */
		.red_filled {background-color: #AA046D;} /* Red (not valid) */
		.text_input {
			border: 2px solid green;
			color: green;
			padding: 8px 32px;
			text-align: left;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			background-color: #C0C0C0; /* Light Gray */
		}
		.text_readonly {
			border: 2px solid green;
			color: green;
			padding: 8px 32px;
			text-align: left;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			background-color: #C0C0C0; /* Light Gray */
			cursor:not-allowed;
		}
		a:link {
			text-decoration: none;
			color: #9eff73;
		}
		a:visited {
			text-decoration: none;
			color: #abc4a0;
		}
		a:hover {
			text-decoration: underline;
			color: #23c492;
		}
		.footer_div {
			/*border:1px solid #FF0000;*/	/*for debugging*/
			width: 100%;		/* use the whole page width */
			text-align: center;	/* to center the slots group */
		}
		.footer_slot_div {
			/*border:1px solid #00FF00;*/	/*for debugging*/
			max-width: 15%;		/* to limit the slot width (up to 5 slots) */
			padding: 6px 10px;	/* to create some space in between the slots */
			display: inline-block;	/* to put the slots on a single row */
		}
		.footer_p {
			/*border:1px solid #0000FF;*/	/*for debugging*/
			text-align: center;	/* to center the text in the slot */
		}
		.footer_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 70%;	/* to limit the image width inside the slot width */
			height: auto;	/* to mantain the proportions */
		}
		/*---------*/
		.image_div {
			width: 40%;
			height: auto;
			margin:15px;
		}
		.full_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 100%;
			height: auto;
			/*display: inline-block;*/
		}
		.under_img_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: center;
			font-size: 80%;		/* a little smaller than normal size */
		}
		.session_div {
			border:2px solid #9F9F9F;
			text-align: center;
		}
		.blockseq_div {
			/*border: 1px solid #ffff00;*/	/* for debugging */
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: auto;
		}
		.block_div {
			/*border: 1px solid #00ffff;*/	/* for debugging */
			width: 100%;
			height: auto;
		}
		.block_pre {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			margin: 10px;
		}
		.block_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			margin: 10px;
		}
		.border_3d {
			/*display: inline-block;*/
  			border: 1px solid #000000;
  			box-shadow: 2px 2px 5px #000000;
  			border-radius: 8px;
  			/*margin: 15px;*/
  			/*margin: 15px 15px 0px 15px;*/	/* thin bottom margin */
		}
		.transp20 {
			filter: opacity(80%);
		}
		.float_left {
	 		float: left;
		}
		.float_right {
		 	float: right;
		}
		.float_center {
			width: 60%;
			margin: auto;
		}
		.twoimages_div {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			width: 47%;
			height: auto;
			margin:10px;
		}
		.twotexts_pre {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			width: 47%;
			margin: 10px;
		}
		.twotexts_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			width: 47%;
			margin: 10px;
		}
		.text_3d {
  			text-shadow: 2px 2px 5px #000000;
		}
                .touchmap_div {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
                	position: relative;
			width: 60%;
			height: auto;
			/*margin:15px;*/
                }
                .toucharea_div {
  			/*border: 1px solid yellow;*/	/*for debugging*/
			/*background-color: rgba(0, 0, 0, .25);*/	/*for debugging*/
			position: absolute;
			left: 0%; top: 0%; width: 100%; height: 100%;	/* default: the whole image */
		}
		.toucharea_div:hover {
  			border: 1px dashed yellow;
			background-color: rgba(0, 0, 0, .25);
			cursor: url(Open.png),auto;
		}
		/*---------*/
		.menu_button {
  			border: none;
  			color: white;
  			padding: 15px 32px;
  			text-align: center;
  			text-decoration: none;
  			display: inline-block;
  			font-size: 16px;
  			margin: 4px 2px;
  			cursor: pointer;
		}
		.menu_button2 {
			background-color: #80808000; /* Transparent */
		}
		.menu_button3 {
			background-color: #00C0C060; /* Light blue */
		}

    /*---------*/

    .touchable_img {
      cursor:pointer;
    }

    /*---------*/

    /* Style the navigation bar */
    .topnav {
      overflow: auto;
      width: 100%;
      background-color: #0303037f;  /* navbar dark-transparent background */
      position: fixed; top: 0;  /* fixed top menu */
    }
    /* navigation bar links */
    .topnav a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      /*width: 20%;*/
      border: 2px solid black;
    }
    /* the navigation item icon */
    .topnav img {
      width: 32px;
      height: 32px;
    }
    /* the navigation bar title */
    .topnav p {
      font-size:150%;
      text-align:center;
      background-color: #d0d0d090;
      color: white;
      /*border: 2px solid #9F9F9F;*/
    }
    /* mouse over a navigation bar item */
    .topnav a:hover.touchable {
      background-color: #d0d0d090;
      color: black;
      border: 2px solid #9F9F9F;
    }
    /* mouse over a disabled navigation bar item */
    .topnav a:hover.disabled {
      cursor:not-allowed;
    }
    /* the active navigation bar item */
    .topnav a.active {
      background-color: #d0d0d090;
      color: white;
      border: 2px solid #9F9F9F;
      cursor:default;
    }
    .gap_under_topnav {
      height: 100px; /* Used to create a margin on top of the page */
    }

 		/*---------*/

    /* Overlay window */

    .overlay {
      /*border:1px solid #00FF00;*/	/*for debugging*/
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-x: auto;
      transition: 0.5s;
    }

    .overlay-content {
      /*border:1px solid #FF0000;*/	/*for debugging*/
      position: relative;
      top: 10%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
      font-size: 30px;
    }

    .overlay .closebtn {
      /*border:1px solid #FFFF00;*/	/*for debugging*/
      position: absolute;
      top: 0px;
      right: 45px;
      font-size: 60px;
      color: white;
    }

 		/*---------*/
		
		@media screen and (max-width: 600px) {
			/* mobile device in portrait mode */
			.image_div {
				width: 60%;	/* make the image larger */
			}
			.twoimages_div {
				width: 80%;	/* make the image larger */
			}
			.twotexts_pre {
				font-size: 60%;		/* smaller than normal size */
			}
			.twotexts_p {
				width: 40%;	/* make the two columns small */
			}
      .touchmap_div {
				width: 90%;	/* make the mapimage larger */
			}
			.footer_p {
				font-size: 80%;		/* a little smaller than normal size */
			}
			.text_readonly {
				font-size: 80%;		/* a little smaller than normal size */
			}
		}
		
		@media screen and (max-width: 500px) {
      .gap_under_topnav {
        height: 200px; /* Used to create a margin on top of the page */
      }
    }

    @media screen and (max-height: 450px) {
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }