/* For any information type pages */


body{
    background-image: url("https://ik.imagekit.io/eephoto/photoSite/florida/Florida_2_hd_cUVBOFDEUo.jpg");
}


#contentArea{
  top: 110px;
  height: 64vh;
  /*background-color: rgb(220,220,220);*/
  background-color: white;
  text-align: center;
  overflow-y: hidden;
  padding: 30px 50px 50px 50px;

}

#newsArea{
    height: 60vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 5px 5px 5px rgba(0,0,0, .2);
}

.entry{
  padding: 10px;
  margin: 0;
  min-height: 200px;
  text-align: left;
  position: relative;
  overflow-y: auto;
}

.entry:nth-of-type(odd){
  background-color: rgb(150,150,150);
}

.entry:nth-of-type(even){
  background-color: rgb(200,200,200);
}

.bigEntry{
  min-height: 400px;
}

.date{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: .65em;
  padding-right: 5px;
  margin: 0;
}

.imageThumb{
  width: 140px;
  float: right;
  margin-top: 20px;
  box-shadow: 5px 5px 5px rgba(0,0,0,.25);
  transition: all .5s;
}

.imageThumb:first-of-type{
  /* margin-right: 150px; */
}

.largeThumb{
  width: 270px;
}

.awardImage{
  width: 500px;
  margin-top: 20px;
  box-shadow: 5px 5px 5px rgba(0,0,0,.25);
  transition: all .5s;
  display: block;
}

/*-------------------------------------- Edit the scroll bar style ----------------------------------------*/

#newsArea::-webkit-scrollbar{
    width:8px;
    background-color:#cccccc;
}


.style-10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.style-10::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

.style-10::-webkit-scrollbar-thumb
{
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                      rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}


	/* #footerBar{
		
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		background: white;
		height: 1.5vh;
		font-size: .85em;
		text-transform: uppercase;
		
	} */

/* --------------------------------- Change the font size when width of page reduces ----------------------------------------*/


/* @media screen and (min-width: 320px) and (max-width: 1000px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

 */

@media only screen and (max-device-width: 800px) and (orientation : portrait){
	
	
	html{
		width: 100vw;
		height: 100vh;
	}
	
	
	body{
		width: 100vw;
		height: 100vh;
	}
	
	
		#left_space{
			color: white;
			width: 70%;
			height: 50%;
			border-radius: 0px;
			background:  rgba(0,0,0,.75);
			position: absolute;
			left: 20px;
			top: 120px;
			line-height: 28px;    
			font-family: 'Stalemate', cursive;
			font-size: 2.0em;   
		}

	
	
		#contentArea{
		  width: 90vw;
		  height: 70vh;
		  margin: 0 auto;       
		  border-radius: 8px;
		  background: rgba(190,190,190, .925);
		  position: relative;
		  top: 9vh;
		  font-size: .75em;   
		  padding: 10px;
		  box-shadow: 10px 10px 8px rgba(0,0,0,.3);
		  overflow-y: auto;
		}
	
		.largeThumb{
		   width: 170px;
			margin: 0;
		}
	
		.awardImage{
		  width: 200px;
		  /* margin-top: 20px; */
		  margin: 0;
		  box-shadow: 5px 5px 5px rgba(0,0,0,.25);
		  transition: all .5s;
		  display: block;
		}
	
	
		#footerBar{
		
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		background: white;
		height: 3vh;
		font-size: .85em;
		text-transform: uppercase;
		
	}


	
}






@media screen and (max-width:1920px)  and (orientation : landscape){
 .imageThumb{
    width: 100px;
 }
 
 .awardImage{
    width: 400px;
 }
 
 .largeThumb{
    width: 200px;
 }
	
	
	#contentArea{

		  top: 10%;
		
		}
}



/* @media screen and (max-width:900px){
 .imageThumb{
    width: 60px;
 }
 
 .awardImage{
    width: 250px;
 }
 
 .largeThumb{
    width: 150px;
 }
} */