* {box-sizing: border-box;}
	
	body html {max-width:100%; height:auto; margin:0; background-color:#87CEEB; overflow-x:hidden; overflow-y:hidden;}
	img { margin-left:0; margin-right:0; width:100%; height:100%;overflow-x:hidden;}

    .banner-1 {display:block;}
	.banner-2 {display:none;}
	.banner-1 img { width:auto;height:auto; max-height:100px;margin:0 auto; }
	.banner-2 img { width: 100%;max-height:50px; margin:0 auto; }

	.page_heading {
	 	font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:36px;
		font-weight:900;
		color:red;
		text-shadow:6px 6px 6px grey;
		text-align:center;
		overflow-x:hidden;
		margin-top:0em;
		padding-top:5px;
		padding-bottom:5px;
	}
	
	.page_sub_heading {
	 	font-family:Geneva, Arial, Helvetica, sans-serif;
		font-size:22px;
		font-weight:900;
		color:Navy;
		text-shadow:6px 6px 6px grey;
		text-align:center;
		overflow-x:auto;
		margin-top:0px;
		padding-top:5px;
		padding-bottom:5px;
	}


	.bottom_footer {
		overflow-x:hidden;
		height:auto;
		max-width:100%;
		min-width:100%;
		background-color: white;
		color:blue;
		font-size:12px;
		font-weight:bold;
	}
	
	div.scrollmenu {
	  display: flex;
	  height: auto;
	  width: 98%;
	  flex-wrap: nowrap;
	  white-space:nowrap;
	  align-content: center;
	  align-items: center;
      justify-content: center;
	  background-color: white;
	  font-weight:900;
	  font-size:14px;
	  overflow-x:auto;
	  font-size:18px;
	  margin:5px auto; 
	}

	div.scrollmenu a {
	  display: inline-block;
	  color: black;
	  padding: 3px 10px;
	  text-decoration: none;
	}

	div.scrollmenu a:hover {
	  background-color: white;
	  color:orange;
	  font-style:italic;
	  font-weight:900;
	  font-size:18px;
	  text-decoration:none;
	}
	

	.scrollmenu2 {
		  display: flex;
		  height: auto;
		  width: 100%;
		  flex-wrap: nowrap;
		  white-space:nowrap;
		  align-content: center;
		  align-items: center;
		  background-color: white; 
		  font-weight:bolder;
		  font-size:16px;
		  margin:5px auto; 
		  border-top:1px dotted black;
		  overflow-x:auto;
	}

	.scrollmenu2 a {
	  display: inline-block;
	  color: orange;
	  text-align: center;
	  padding: 3px 10px;
	  text-decoration: none;
	  
	}

	.scrollmenu2 a:hover {
	  background-color: orange;
	  color:white;
	}

	.flex-container {  
		 display: -webkit-box; 
		 display: -webkit-flex;
		 display: -ms-flexbox;
		 display: flex;
		 -webkit-box-align: stretch;
		 -webkit-align-items: stretch;
		 -ms-flex-align: stretch;
		 align-items: stretch;
		 -webkit-flex-wrap: wrap;
		 -ms-flex-wrap: wrap;
		 flex-wrap: wrap;
		 background-color: #87CEEB;
		 justify-content: center;
		 padding:0px;
	}

	.flex-container div {
		 background: white;
		 padding: inherit;
		 margin: 0 auto;
		 width: 25% ;
		 text-align: left;
  		 font-size: 14px;
	     overflow:auto;
		 border-radius: 10px;
		 border:1px dotted black;
		 padding:2px;
		 margin:1px;


	}	
	
	
	.flex-container::-webkit-scrollbar{
		display: true;
	}
	
	.scroll-tip {display:block; overflow:hidden;}
	
	.transparency {
	
	  position: absolute;
	  top: 0;
	  left: 0;
	  width:100%;
	  height:auto;
	  min-height:200%;
	  background: rgb(255, 255, 255); /* Fallback color */
	  background: rgba(255, 255, 255, 0.9); /* grey background with 0.5 opacity */
	  z-index:999;
	  overflow:hidden;
	  text-align:center;
	  display:block;
	}
	
	 .transparency .transparency_content {
		 width:100%; !important 
		 height:auto; 
		 border-sizing:bordered-box;
		 overflow:hidden;
	}
	
	.transparency_content img {
		width:auto;
		height:auto;
		padding:0em;
		marginm:0 auto;
	
	}
	 

	
		body .close-button {
		  position:absolute;
		  top:10px;
		  left:15px;
		  float:left;
		  font-size:24px;
		  font-weight:900;
		  text-decoration:none;
		  z-index:100;
		  padding:5px;
		  background-color: rgba(0,0,0,0.5);
		}
		.close-button a {
		   text-decoration:none;
		   color:white;
		   padding:5px;
		}
		.close-button a:hover {
		 text-decoration:none;
		 
		}
		
		.menu-more {
		  display:none;
		  position:absolute;
		  top:2em;
		  right:10px;
		  font-size:14px;
		  font-weight:500;
		  padding:5px;
		  background-color: rgba(256,256,256,0.2);
		  backgroun-color: white;
		  color:red;
		  text-align:right;
		}	
			
		.motto { margin:0 auto; display:block; overflow:auto; padding:5px; width:100%; height:auto;}
		.motto img { display:block; margin:0 auto; width:100%;height:auto;}
		
	
		hr{
		  display: none;
		  margin-top: 0.5em;
		  margin-bottom: 0.5em;
		  margin-left: auto;
		  margin-right: auto;
		  border-style: inset;
		  border-width: 2px;
		}
		
		.thumbnail {margin:0 auto; width:auto; height:50px; border:2px solid black;}

			
		.col1_news  {display:block; height:auto; width:24vw; overflow:hidden;padding-bottom:1em; font-size:14px; line-height:16px;}
		.col3_awards { display:block; min-height: 400px; width:24vw; padding-bottom:1em; font-size:14px; overflow-x:hidden; overflow-y:auto; }
		.col2_carousel {display:block; height:auto; width:50vw; overflow:hidden;padding-bottom:1em;}
		.col3_awards a {text-decoration:none;}
		.col3_awards hover {text-decoration:none;}
		
		.carousel {position:relative; display:block; margin:0 auto; top:0px; left:0px; right:0px; bottom:0px;}
		.carousel > div {margin:0 auto; width:98%; height:auto; }
		.carousel img {margin:0 auto; width:50vw; height:32vh;}
		
		.below_footer { margin:0 auto; width:100%; background-color:#CCDFFB; position:relative; height:500px;}
	
		
	@media screen (min-width:801px) and (max-width:1279px){

	  .menu-more {dipslay:none;}
  	  .carousel img {margin:0 auto; width:50vw; height:34vh;}

		div.scrollmenu {
		  display: flex;
		  height: auto;
		  width: 98%;
		  flex-wrap: nowrap;
		  white-space:nowrap;
		  align-content: center;
		  align-items: center;
		  justify-content: start;
		  background-color: white;
		  font-weight:900;
		  font-size:12px;
		  overflow-x:auto;
		  font-size:16px;
		  margin:3px auto; 
		}
	
	}



	@media screen and ( max-width:800px){
		hr {display:block;}
 
 		.bottom_footer { font-size: 14px; color:blue; background-color:white; font-weight: 300; margin-bottom:2px;}
	
		.menu-more {display:block;}
		
		.thumbnail {width:40vw; height:auto; border:2px solid black;}

	  .col2_carousel, .col1_news, .col3_awards {width:100%; height:auto;}
  	  .carousel  img {margin:0 auto; width:100vw; height:50vh; }

	  .banner-1 {display:none;}
	  .banner-2 {display:block;}
	  
  
	  .scroll-tip {display:none;}


		.page_heading {
			font-size:24px;
			font-weight:600;
			color:red;
			text-shadow:3px 3px 3px grey;
			text-align:center;
			overflow-x:hidden;
			padding-top:0.5em;
			padding-bottom:0.5em;
		}
		
		.page_sub_heading {
			font-family:Geneva, Arial, Helvetica, sans-serif;
			font-size:16px;
			font-weight:600;
			color:Navy;
			text-shadow:3px 3px 3px grey;
			text-align:center;
			overflow-x:auto;
			padding-top:5px;
			padding-bottom:5px;
		}
	

		.motto img {margin:0 auto;max-height:20px; width:100%; overflow:auto;}
			

		#arrow-left {
		  bottom:6em;
		  left:1em;
		}
		#arrow-right {
		  bottom:6em;
		  right:1em;
		}
		
		
		img {margin:0 auto; width:100%; height:auto;}
		
			
		div.scrollmenu {
		  display: flex;
		  height: auto;
		  width: 98%;
		  flex-wrap: nowrap;
		  white-space:nowrap;
		  align-content: center;
		  align-items: center;
		  justify-content: start;
		  background-color: white;
		  font-weight:900;
		  font-size:12px;
		  overflow-x:auto;
		  font-size:16px;
		  margin:3px auto; 
		}
		
		
	}


	@media screen and (max-width:700px){

	  .menu-more {dipslay:block;}
  	  .carousel img {margin:0 auto; width:98vw; height:22vh;}

		div.scrollmenu {
		  display: flex;
		  height: auto;
		  width: 98%;
		  flex-wrap: nowrap;
		  white-space:nowrap;
		  align-content: center;
		  align-items: center;
		  justify-content: start;
		  background-color: white;
		  font-weight:900;
		  font-size:12px;
		  overflow-x:auto;
		  font-size:16px;
		  margin:3px auto; 
		}


	}