* {
    	box-sizing: border-box;
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

		}

    body{
    	color: #333;
      background-color: #FFF;/*#4499FF;/*# DA251C;
			54B6D1
			00C3FF
			#49f


			*/

    }
		.hidden{
			display: none !important;
		}
      /* white main div*/
    div.main{
    	background-color: #FFF;
			margin:auto;
			width:70%;
			height:auto;
			min-height: 85vh;
			border: 4px solid #FF0000;
    	border-radius: 0px;
      /*width: 600px;
      min-height: 1000px;
			margin-top:-15px;
      margin-left:50px;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 30px;*/
    }
		div.infobox{
			background-color: #FFF;
			margin:auto;
			width:70%;
			height:auto;
			border: 4px solid #FF0000;
			border-radius: 0px;
			margin-top: 10px;
		}

		a.sitemaplink{
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
		}

	  div.main>p, div.infobox>p{
			color: #333;
      font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size:  14px;
	  }
		div.infobox>p{
			font-size: 15px;
		}

		div.navbar{
			background-color: #FFF;
			position: fixed;
			top: 0px;
			right: 0px;
			margin: 10px;
			margin-top:23px;
			border: 4px solid #f00;
		}

		img.logo, div.logo{
			position: fixed;
			max-width:150px;
			width: calc(10%);
      height: auto;

  		top:2.5%;
      left:2.5%;
    }
		div.logo{
			display: inline-block;
    	vertical-align: middle;
		}

		img.logo_test, svg.logo_test{
			max-width:150px;
			width: 10vw;
      height: auto;
			vertical-align: middle;
		}

		svg.logo_test{
			position: absolute;
			top: 0;
			left: 0;
		}

		img.bubble{
			text-align: center;
	    position: absolute;
	    top: 50%;
	    left: 50%;
			max-width: 12px;
			width: 0.8vw;
			height: auto;
			display: none;
		}
		#bubble_1{
			top: 70%;
	    left: 25%;
		}
		#bubble_2{
			top: 77%;
	    left: 33%;
		}
		#bubble_3{
			top: 80%;
	    left: 41%;
		}
		#bubble_4{
			top: 80%;
	    left: 46%;
		}
		#bubble_5{
			top: 76%;
	    left: 56%;
		}
		#bubble_6{
			top: 70%;
	    left: 64%;
		}

	  #clc{
			text-align:center;
			/*position:fixed;
			/*top:220px;
      left:730px;
			width: 300px;
      height: 40px;*/
			color: #000;
      font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size:  18px;
  	}

    #lastsaved{
			text-align:center;
			/*position:fixed;
			top:240px;
      left:730px;
			width: 300px;
      height: 40px;*/
			color: #000;
    	font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    	font-size:  18px;
	  }

    #progress{
			text-align:center;
			/*position:fixed;
			top:260px;
      left:730px;
			width: 300px;
      height: 40px;*/
			color: #000;
      font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size:  18px;
	  }

  	#alert{
      text-align:center;
			color: #000;
      background-color: #FFF;
			line-height: 50px;
      font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size:  28px;

			position:fixed;
			width: 90%;
			padding: 10%;
			top: 30px;
			left:50%;
			transform: translate(-50%, 0);

      border-style: solid;
			border-width: 4px;
      border-color: #FF0000;
      display: none;
    }

		#img_modal {
		 display: none;
		 position: fixed;
		 z-index: 1;
		 left: 0;
		 top: 0;
		 width: 100%;
		 height: 100vh;
		 overflow: auto;
		 background-color: rgb(0,0,0);
		 background-color: rgba(0,0,0,0.4);
		}

		#img_modal .modal-content {
		 background-color: #fff;
		 margin: auto;
		 margin-top: 5vh;
		 max-height: 90vh;
		 padding: 3vh 3vw;
		 width: 90%;
		}

		#img_modal .mimg-container {
		 height: 100vh;
		 max-height: 200vw;
		 width: 90%;
		 position: relative;
		}


		#img_modal .mimg{
			max-width: 100%;
			max-height: 100%;
			/*height: auto;*/
			width: 80%;
			height: 80%;
			object-fit: contain;
			margin: auto;
			display: block;
			top: 0;
			bottom: 0;
		}

		/* The Close Button */
		#img_modal .close {
		 color: #aaa;
		 float: right;
		 font-size: 28px;
		 font-weight: bold;
		}

		#img_modal .close:hover,
		#img_modal .close:focus {
		 color: black;
		 text-decoration: none;
		 cursor: pointer;
		}

		div.aboxcontainer{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;

		}
		div.abox{
			border: 2px solid #FF0000;
			text-align: center;
			vertical-align: middle;
			flex-grow: 1;
			margin-right: 2%;
		}

		div.abox2{
			border: 2px solid #FF0000;
			text-align: center;
			vertical-align: middle;
			display:inline-block;
		}


		div.abox:last-child {
			margin-right: 0;
		}
		div.abox a, div.abox2 a{
			color: #333;
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
			text-transform: uppercase;
			font-weight: bold;
			font-size:  16px;
			text-decoration: none;
			-webkit-transition: background-color .5s linear;
      transition: background-color .5s linear;
			display:inline-block;
	    width:100%;
	    height:100%;
			padding: 0% 2% 0% 2%;
			text-align: center;
			vertical-align: middle;
			margin-top: -2px;
			padding-top: 1px;
		}

		div.abox2 a{
				padding: 0.1em 1em;
		}

		div.abox a:hover, div.abox2 a:hover{
			background-color: #FF0000;
		}

      /*div for h1,h2*/
    div.subdiv{
    	padding-left:0px;
      background-color: #FFF;
    }

	  div.titles{
			/*padding-top: 10px;*/
      background-color: #FFF;
    }

    div.footer{
			width:70%;
			text-align: center;
			vertical-align: middle;
			margin: auto;
			margin-top: 10px;
			padding: 10px;
      /*margin-left:50px;*/
      padding-bottom: 10px;
      color: #333;
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
			font-size:  16px;
			border: 4px solid #FF0000;
    	border-radius: 0px;
			background-color: #FFF;
    }

    h1{
			color: #333;
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
			font-size:  32px;
			font-weight: bold;
			text-transform: uppercase;
			margin-top: 15px;
		}

    h2{
    	color: #333;
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
			/*font-size:  20px;*/
    }
		input{
			font-family: "Trebuchet MS", "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
		}

    .errorlist{
      color: red;
    }

		/* For mobile phones: */
	@media only screen and (max-width: 600px) {
		[class*="col-"] {
			 width: 100%;
		}
		img.logo, div.logo, div.logo *{
			 display: none;
		}
		div.navbar{
			display: -webkit-flex; /* Safari */
    	-webkit-flex-direction: column; /* Safari 6.1+ */
    	display: flex;
    	flex-direction: column;
			margin: 0;
			left:50%;
			transform: translate(-50%, 0);
			border-width: 2px;
			/*width:calc((100% - 16px) * 0.98 * 0.98)*/

		}
		div.navbar>div{
			text-align:left !important;
			margin-left: 5%;
			padding-top: 0px;
			padding-right: 1px;
			padding-bottom: 0px;
			padding-left: 1px;
			font-size:  14px !important;
		}
		div.main{
		 margin-top: - 15px ;
		 width: 98%;
		 padding-left: 1%;
		 padding-right: 1%;
		 border-width: 2px;
		}

		div.infobox{
			width: 98%;
 		 padding-left: 1%;
 		 padding-right: 1%;
 		 border-width: 2px;
		}

		div.footer{
		 width: 98%;
		 border-width: 2px;

		}
		div.abox a, div.abox2 a{
			font-size: 12px;
			padding: 0 5px;
		}
	}

	@media only screen and (min-width: 601px) and (max-width: 900px) {
		/* For tablets: */
		.col-s-1 {width: 8.33%;}
		.col-s-2 {width: 16.66%;}
		.col-s-3 {width: 25%;}
		.col-s-4 {width: 33.33%;}
		.col-s-5 {width: 41.66%;}
		.col-s-6 {width: 50%;}
		.col-s-7 {width: 58.33%;}
		.col-s-8 {width: 66.66%;}
		.col-s-9 {width: 75%;}
		.col-s-10 {width: 83.33%;}
		.col-s-11 {width: 91.66%;}
		.col-s-12 {width: 100%;}
		img.logo, div.logo{
			max-width: 16.66%;
			height: auto;
			padding-top: 0px;
			padding-right: 1px;
			padding-bottom: 0px;
			padding-left: 1px;
		}
		img.logo_test, svg.logo_test{
			max-width: 16.66vw;
			height: auto;
		}
		div.navbar{
			display: -webkit-flex; /* Safari */
			-webkit-flex-direction: row; /* Safari 6.1+ */
			display: flex;
			flex-direction: row;
			margin: 0;
			left:50%;
			transform: translate(-50%, 0);
		}
		div.navbar>div{
			padding-top: 0px;
			padding-right: 1px;
			padding-bottom: 0px;
			padding-left: 1px;
			font-size: 16px !important;
			font-size: calc(0.66vw + 12px) !important;

		}
		div.main{
		 margin-top: 0px ;
		 padding-left: 1.6%;
		 padding-right: 1.6%;
		}
		div.infobox{
		 padding-left: 1.6%;
 		 padding-right: 1.6%;
		}
		div.abox a, div.abox2 a{
			font-size: 16px;
			padding: 0 8px;
		}

	}
	@media only screen and (min-width: 901px) {
		 /* For desktop: */
		 .col-1 {width: 8.33%;}
		 .col-2 {width: 16.66%;}
		 .col-3 {width: 25%;}
		 .col-4 {width: 33.33%;}
		 .col-5 {width: 41.66%;}
		 .col-6 {width: 50%;}
		 .col-7 {width: 58.33%;}
		 .col-8 {width: 66.66%;}
		 .col-9 {width: 75%;}
		 .col-10 {width: 83.33%;}
		 .col-11 {width: 91.66%;}
		 .col-12 {width: 100%;}
		div.main{
	 	 margin-top: 0px ;
	 	 max-width: 1000px;
	 	 padding-left: 15px;
	 	 padding-right: 15px;
	 	}
		div.infobox{
		 max-width: 1000px;
 	 	 padding-left: 15px;
 	 	 padding-right: 15px;
		}
		 img.logo, div.logo{
   	}

		[class*="col-"] {
	    float: left;
	    padding: 15px;
	    /*border: 1px solid red;*/
		}
		.row::after {
    	content: "";
    	clear: both;
    	display: table;
		}
	}