/* CSS Document */
body{
	overflow-x:hidden;
}

.topLang{
	position:relative;
	display:grid;
	grid-template:10vh/auto;
	grid-auto-columns:10vw;
	grid-auto-flow:column;
	justify-content:center;
	width:100vw;
	height:30px;
	margin-left:-0.7%;
	margin-top:-0.2%;
	background-color:#90EE90;
	text-align:center;
	line-height:1.3;
	color:#FFFFFF;
	font-size:140%;
	font-family:Arial, Helvetica, sans-serif;
}
.topLang a{
	text-decoration:none;
	color:#FFF;
}
.logInfo{
	margin-left:-60vw !important;
}
.schoolName, .mainLink, #homeAnimation, #homeAnimationSection{
	z-index:15;
}

.currentLink{
	color:#FFF !important;
	background-color:#90EE90 !important;
	border-bottom:3px solid #FFF !important;
}
.schoolName{
	position:relative;
	display:grid;
	width:100%;
	height:100px;
	background-color:#2c3e50; /* Dark blue-gray background */
	text-align:center;
	font-size:36px;
	font-weight:600;
	letter-spacing:1.5px;
	word-spacing:6px;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color:#ecf0f1; /* Light gray text for maximum contrast */
	padding-top:20px;
	padding-bottom:20px;
	box-shadow: 0 2px 15px rgba(0,0,0,1);
}
.schoolName h1{
	font-size:58px;
	font-weight:600;
	letter-spacing:1.8px;
	word-spacing:8px;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color:#ecf0f1; /* Light text on dark background */
	margin-top:0px;
	margin-bottom:0px;
	line-height:2;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Subtle text shadow for depth */
}
.mobileMenu{
	display:none;
}
.mobileMenu a{
	display:none;
}

.mainLink{
	position:relative;
	display:grid;
	grid-template:10vh/auto;
	grid-auto-flow:column;
	justify-content:start;
	width:100vw;
	height:35px;
	top:0px;
	left:-1vw;
	background-color:#0066cc;
	box-sizing:border-box;
	padding:0;
	margin:0;
}
.mainLink a{
	color:#FFF;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	margin-left:0px;
	width:13vw;
	margin-right:0px;
	height:35px;
	border-right:#CCC solid thin;
	alignment-adjust:central;
	text-align:center;
	padding-right:0px;
	line-height:1.5;
}
	.mainLink a:nth-child(1){
		width:9vw;
	}
	.mainLink a:nth-child(2){
		font-size:20px;
		text-align:center;
		width:15vw;
		margin-left:0vw;
		border-right:#CCC solid thin !important;
		alignment-adjust:central;
		font-family:Arial, Helvetica, sans-serif;
		white-space:nowrap;
	}
	.mainLink a:nth-child(7){
		width:8vw;
	}
	.mainLink a:nth-child(8){
		width:15vw;
	}
	.mainLink a:hover{
		background-color:#A5AFFF;
	}

#homeAnimation{
	position:relative;
	display:grid;
	width:101.5%;
	height:550px;
	margin-left:-0.7%;
	margin-top:0px;
	background-repeat:no-repeat;
	background-size:100% 550px;
}
#homeAnimation:after{
	position:absolute;
	display:block;
	content:"";
	top:0;
	left:0;
	background-image:url(images/home_background.jpg);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
			src='images/home_background.jpg', sizingMethod='scale');
	background-size:100%;
	width:100%;
	height:100%;
	opacity:1;
	background-position: 50%;
	background-repeat:no-repeat;
	z-index:-1;
}

#homeAnimationSection{
	position:relative;
	width:100%;
	height:400px;
	background-size:100% 400px;
	background-repeat:no-repeat;
	overflow:hidden;
}

#homeAnimationSection img{
	position:absolute;
	width:65%;
	height:400px;
	margin-top:70px;
	transform:scale(0, 0);
    -webkit-animation-name:alertLandingTopAnim;
   	-webkit-animation-duration:360s;
	-webkit-animation-iteration-count:infinite;
	animation-name:alertLandingTopAnim;
	animation-duration:360s;
	animation-iteration-count:infinite;
	border-radius:20vw;
	box-shadow:1px 1px 10px 1px  #FFF;
	object-fit: cover;
}

	#homeAnimationSection img.landFirst{
		animation-delay:0s;
		-webkit-animation-delay:0s;
		width:200px;
		height:200px;
		margin-left:50px;
		z-index:1;
		opacity:1;
		}
	#homeAnimationSection img.landSecond{
		animation-delay:1s; 
		-webkit-animation-delay:2s;
		width:200px;
		height:200px;
		margin-left:350px;
		z-index:2;
		opacity:1;
	}
	#homeAnimationSection img.landThird{
		animation-delay:4s; 
		-webkit-animation-delay:4s;
		width:200px;
		height:200px;
		margin-left:700px;
		z-index:3;
		opacity:1;
		}
	#homeAnimationSection img.landFour{
		animation-delay:6s; 
		-webkit-animation-delay:6s;
		width:200px;
		height:200px;
		margin-left:1050px;
		z-index:4;
		opacity:1;
		}
	#homeAnimationSection img.landFive{
		animation-delay:9s; 
		-webkit-animation-delay:9s;
		width:1100px;
		height:90px;
		padding-top:20px;
		margin-left:120px;
		margin-top:280px;
		z-index:5;
		}		
	
@-webkit-keyframes alertLandingTopAnim{
	0%{transform:scale(0, 0); }
	1%{transform:scale(1, 1); }
	1.3%{transform:scale(1, 1); }
	1.6%{transform:scale(1, 1); }
	30%{transform:scale(1, 1);}	
	36%{transform:scale(1, 1);}
	65%{transform:scale(1, 1);}
	99.8%{opacity:1;}
	100%{transform:scale(1,1); opacity:0;}
}

@keyframes alertLandingTopAnim{
	0%{transform:scale(0, 0); }
	0.51%{transform:scale(1, 1); }
	1.3%{transform:scale(1, 1); }
	1.6%{transform:scale(1, 1); }
	30%{transform:scale(1, 1);}	
	36%{transform:scale(1, 1);}
	65%{transform:scale(1, 1);}
	99.8%{opacity:1;}
	100%{transform:scale(1,1); opacity:0;}
}

/* Hero Slogan – Beautiful, transparent, 3-color options */
.hero-slogan {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Georgia', serif;
  font-size: clamp(2.2rem, 3vw, 5.5rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  opacity: 0;
  animation: fadeInUp 2.5s ease-out forwards, pulse 4s infinite 3s;
  z-index: 10;
  white-space: nowrap;
  padding: 0 20px;
}

/* 3 Color Variants */
.hero-slogan.gold {
  background: linear-gradient(90deg, #ffd700, #ffb300, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-slogan.blue {
  background: linear-gradient(90deg, #4fc3f7, #0288d1, #01579b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-slogan.green {
  background: linear-gradient(90deg, #66bb6a, #2e7d32, #1b5e20);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Entrance + Pulse */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translate(-50%, -30%); }
  70%  { opacity: 0.9; }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.03); }
}

/* Optional: auto-cycle colors every 8 seconds */
.hero-slogan.auto-cycle {
  animation: fadeInUp 2.5s ease-out forwards, pulse 4s infinite 3s, colorCycle 24s infinite;
}

@keyframes colorCycle {
  0%    { color: #ffd700; }
  33%   { color: #4fc3f7; }
  66%   { color: #66bb6a; }
  100%  { color: #ffd700; }
}

.firstContact{
	position:fixed;
	display:grid;
	grid-template:10vh/10vw 20vw 5vw 20vw 10vw 20vw;
	grid-auto-flow:column;
	justify-content:start;
	white-space:nowrap;
	margin-top:-96px;
	margin-left:-0.7%;
	width:101.5%;
	height:70px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	background-color:#90EE90;
	text-indent:160px;
	line-height:4;
	color:#fff;
	z-index:50;
}

.firstContact a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	margin-left:-40px;
	line-height:4.5;
	color:#FFF;
}

 .footerContact{
	position:relative;
	box-sizing:border-box;
	padding:0;
	margin-top:20px;
	margin-left:-0.7%;
	width:101.5%;
	height:60px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	background-color:#90EE90;
	text-indent:160px;
	line-height:4;
	color:#FFF;
	z-index:10;
}

.footerContact a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	margin-right:100px;
	color:#FFF;
}

#homeFirstSection, #homeSecondSection, #homeThirdSection, #homeFourthSection, #homeFivethSection, #homeSixthSection, #homeSevenSection,  #homeEightSection{
	height:613px;
	width:101.5%;
}

#homeFirstSection{
	position:relative;
	display:grid;
	margin-left:-0.5%;
			    background: linear-gradient(45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
		padding-top:200px;
	color:#ffffff; /* White text on blue background */
	text-align:justify;

}
#homeFirstSection p{
	position:fixed;
	top:150px;
	width:55%;
	left: 320px;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:28px;
	font-weight:500;
	line-height:1.6;
	padding:40px; /* More padding */
	background-color:#A5AFFF; /* Very light transparent overlay */
	border-radius:15px; /* More rounded corners */
	border: 2px solid rgba(255,255,255,0.3); /* Subtle border */
	backdrop-filter: blur(10px); /* Modern frosted glass effect */
	-webkit-backdrop-filter: blur(10px); /* For Safari */
	box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Deeper shadow */
}

#tranPic{
	position:relative;
	width:101.7%;
	height:150px;
	margin-left:-0.5%;
	margin-top:0px;
	opacity:0.5;
}

#tranPic img{
	width:100%;
	height:150px;
	opacity:0.5;
}

#homeSecondSection{
	position:relative;
	display:grid;
	margin-left:-0.5%;
	background: linear-gradient(45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
	padding-top:200px;
	color:#00fe15;
	text-align:justify;
	z-index:1;
}

#homeSecondSection p{
	position:fixed;
	top:250px;
	left: 320px;
	height: 200px;
	width:50%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:35px;
	text-align: center;
	font-weight:800;
	background-color:#586cff; /* Very light transparent overlay */
	border-radius:15px; /* More rounded corners */
	border: 2px solid rgba(255,255,255,0.3); /* Subtle border */
	backdrop-filter: blur(10px); /* Modern frosted glass effect */
	-webkit-backdrop-filter: blur(10px); /* For Safari */
	box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Deeper shadow */
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}	

#homeThirdSection{
    position:relative;
    margin-left:-0.5%;
    padding-top:-140px;
    text-transform:uppercase;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Better font */
    font-size:35px;
    z-index:20;
    color:#000; /* White text for contrast */
    text-align:center; /* Center alignment */
    display:flex;
    align-items:center;
    justify-content:center;

}

#homeThirdSection p{
    font-size: 42px; /* Increased from default */
    line-height: 1.5; /* Better line spacing */
    margin: 0; /* Remove default margins */
    padding: 40px; /* Add padding inside */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* Color variation for different lines */
#homeThirdSection br:nth-of-type(1)::before,
#homeThirdSection br:nth-of-type(2)::before {
    content: ""; /* Visual separator if needed */
}

/* Optional: Different colors for each line */
#homeThirdSection center {
    display: block; /* Ensure center works properly */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

#homeFourthSection{
	position:relative;
	display:grid;
	margin-left:-0.5%;
	padding-top:200px;
	background-color: #90EE90;
	background-size: 900px 8073px;
	color:#804000;
	text-align:center;
}

#homeFourthSection p{
	position:fixed;
  	background-image: url("images/english_teaching_materials.jpg"),
                    linear-gradient(45deg, #FFFFFF 0%, #FFD700 25%, #90EE90 50%, #00CCFF 75%, #FFFFFF 100%);
	
	background-repeat:no-repeat;
	background-position:200px 0px;	
	background-size: 700px 300px;	
	top:10px;
	width:80%;
	height:173px;
	left: 220px;
	padding-top:320px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	font-weight:800;
}

#homeFirstSection, #homeSecondSection, #homeThirdSection, #homeFourthSection
#homeFivethSection{
	position:relative;
	display:grid;
		    background: linear-gradient(45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
	background-size: 900px 1073px;	
	margin-left:-0.5%;
	padding-top:200px;
	text-align:center;
	z-index:5;
}
#homeFivethSection p{
	position:fixed;
	background-color: #90EE90;
	background-image:url(images/elcc_languages_pic.jpg);
	background-repeat:no-repeat;
	background-position:50px 0px;	
	background-size: 700px 300px;		
	top:10px;
	width:50%;
	height:873px;
	left: 320px;
	padding-top:220px;
	color:#FFF;
	font-family:"Comic Sans MS", cursive;
	font-size:30px;
	font-weight:800;
	z-index:15;
}

#homeSixthSection{
	position:relative;
	display:grid;
	width:101.5%;
	margin-left:-0.5%;
	    background: linear-gradient(45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
	padding-top:10px;
	text-align:center;
	z-index:5;
}
#homeSixthSection p{
	position:fixed;
	top:10px;
	width:50%;
	left: 320px;
	height:873px;
	padding-top:1px;
	/* fallback single color while keeping the multi-stop gradient as a layered background */
	background-color: #90EE90;
	background-image: linear-gradient(45deg, #FFFFFF 0%, #FFD700 25%, #90EE90 50%, #00CCFF 75%, #FFFFFF 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:800;
	z-index:15;
}
#homeSixthSection p i{
	font-style:normal;
	font-size:20px;
}
#homeSixthSection p input{
	font-size:20px;
	width:500px;
	height:35px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	opacity:1;
}
#printBtn{
	display:block;
}

#homeSixthSection p iframe{
    display:block;
    margin-left:20px !important;
	width:100%;
	height:300px;
}

#homeSevenSection{
	position:relative;
	display:grid;
	width:101.5%;
	margin-left:-0.5%;
		height:1073px;
	background-size: 900px 1073px;	
	padding-top:10px;
	text-align:center;
	z-index:18;
}
#homeSevenSection p{
	position:fixed;
	top:10px;
	width:50%;
	left: 320px;
	height:873px;
	padding-top:1px;
	/* fallback single color while keeping the multi-stop gradient as a layered background */
	background-color: #90EE90;		
	background-image: linear-gradient(45deg, #FFFFFF 0%, #FFD700 25%, #90EE90 50%, #00CCFF 75%, #FFFFFF 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:800;
	z-index:18;
	opacity:1;
}
#homeSevenSection p i{
	font-style:normal;
	font-size:20px;
}
#homeSevenSection p input{
	font-size:20px;
	width:500px;
	height:35px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	opacity:1;
}
#homeSevenSection p textarea{
	font-size:20px;
	text-align:justify;
	width:500px;
	height:120px;
	font-family:Arial, Helvetica, sans-serif;
}
#homeSevenSection a{
	text-decoration:none;
	color:#FFF;
}

#homeEightSection{
	position:relative;
	width:101.5%;
	margin-left:-0.5%;
	/* fallback single color while keeping the multi-stop gradient as a layered background */
	background-color: #90EE90;
	background-image: linear-gradient(45deg, #FFFFFF 0%, #FFD700 25%, #90EE90 50%, #00CCFF 75%, #FFFFFF 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding-top:10px;
	text-align:center;
	z-index: 8;   /* very high */
}
#homeEightSection p{
	position:fixed;
	top:10px;
	width:60%;
	left: 320px;
	height:873px;
	padding-top:1px;
	/* fallback single color while keeping the multi-stop gradient as a layered background */
	background-color: #90EE90;
	background-image: linear-gradient(45deg, #FFFFFF 0%, #FFD700 25%, #90EE90 50%, #00CCFF 75%, #FFFFFF 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family:"Comic Sans MS", cursive;
	font-size:20px;
	font-weight:800;
	z-index: 8;   /* very high */
}

#homeEightSection p iframe{
	width:100%;
	height:300px;
}

#printArea{
	position:fixed;
	display:none;
	top:10px;
	left:40px;
	width:95%;
	height:90%;
	background-color:#FFF;
	z-index:100;
}
#printRegistration{
	position:relative;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#printRegistration h1{	
	font-size:36px;
	text-align:center;
}
#printRegistration h3{	
	font-size:30px;
	text-align:center;
}
#printRegistration h4{	
	font-size:30px;
	text-indent:20px;
}
.classPages{
	position:relative;
	display:grid;
	width:101.5%;
	height:400px;
	margin-left:-0.7%;
	margin-top:0px;
	background-repeat:no-repeat;
	background-size:100% 400px;
	z-index: 1;
}

.classPages img{
	position:absolute;
	width:65%;
	height:400px;
	margin-top:70px;
	object-fit: cover;
	transform: translateX(1200px);
    -webkit-animation-name:alertClassTopAnim;
   	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	animation-name:alertClassTopAnim;
	animation-duration:30s;
	animation-iteration-count:infinite;
}

	.classPages img.landFirst{
		animation-delay:0s;
		-webkit-animation-delay:0s; 
		width:400px;
		height:200px;
		margin-left:50px;
		margin-top:30px;
		z-index:1;
		}
	.classPages img.landSecond{
		animation-delay:0.4s; 
		-webkit-animation-delay:5s;
		width:350px;
		height:200px;
		margin-left:200px;
		margin-top:250px;
		z-index:2;
	}	
	.classPages img.landThird{
		animation-delay:0.4s; 
		-webkit-animation-delay:4s;
		width:350px;
		height:200px;
		margin-left:550px;
		margin-top:30px;
		z-index:3;
		}
	.classPages img.landFour{
		animation-delay:2s; 
		-webkit-animation-delay:6s;
		width:300px;
		height:200px;
		margin-left:550px;
		margin-top:250px;
		z-index:4;
		}
	.classPages img.landFive{
		animation-delay:2.1s; 
		-webkit-animation-delay:9s;
		width:300px;
		height:420px;
		margin-left:950px;
		margin-top:30px;
		z-index:5;
		}		
	
@-webkit-keyframes alertClassTopAnim{
	0%{ transform: translateX(1200px);}
	10%{transform: rotate(0deg); }
	100%{transform:rotate(0deg); }
}

@keyframes alertClassTopAnim{
	0%{ transform: translateX(1200px); opacity:1;}
	10%{transform: rotate(0deg); }
	77%{opacity:1;}
	82%{opacity:0;}
	100%{transform:rotate(0deg); opacity:0;}
}

.pageTitle{
	position:relative;
	display:grid;
	width:101.5%;
	height:50px;
	font-size:34px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-transform:uppercase;
	margin-top:70px;
	text-indent:40%;
	letter-spacing:2px;
	word-spacing:5px;
	 font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;   
	 font-weight: 600;   
	 font-size: clamp(1.25rem, 2.2vw + 0.6rem, 2.8rem); /* ~20px → ~45px */  
	  color: #333333; /* navy — switch to #fff on dark/image backgrounds */   line-height: 1.15;   
	  letter-spacing: 0.5px;    
	  margin: 0.6rem 0;   
	  text-shadow: 0 5px 5px #fff; 
	  z-index: 10;
}

.insideTabPage{
	position:relative;
	display:grid;
	grid-template:40vh/50vw 50vw;
	grid-auto-flow:column;
	width:101.5%;
	height:50px;
	margin-left:-0.5%;
	margin-top:10px;
	
	background-image: (45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
	white-space:nowrap;
}

.insideTabPage a{
	position:relative;
	display:grid;
	font-family:"Comic Sans MS", cursive;
	font-size:18px;
	width:50vw;
	height:50px;
	margin-right:-0.1%;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	line-height:3;
}
.insideTabPage a[href="#thisPage"]{
	background-color:#006699;
		background-image: linear-gradient(45deg, 
        #FFFFFF 0%, 
        #FFD700 25%, 
        #90EE90 50%, 
        #00CCFF 75%, 
        #FFFFFF 100%);
}
.insideTabPage a[href="#thisBlog"]{
	background-color:#BAB3FD;
		background-image: linear-gradient(65deg, 
		#FFFFFF 0%, 
		#FFD700 50%, 
		#90EE90 75%, 
		#00CCFF 25%, 
		#FFFFFF 100%);
}

.pageSection{
	position:relative;
	display:grid;
}

.pageFirst, .pageThird, .pageFiveth{
	position:relative;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:25px;
	width:70%;
	margin-left:13%;
	margin-top:30px;
	text-align:center;	
}
.pageSecond, .pageFourth, .pageSixth{
	position:relative;
	font-family:"Comic Sans MS", cursive;
	font-size:18px;
	width:101.5%;
	height:60x;
	margin-left:-0.5%;
	margin-top:40px;
	border-top:#000 thin solid;
	border-bottom:#000 thin solid;
	text-align:center;
	line-height:3;
}

.pageSecond img{
	display:block;
	width:100%;
	height:120px;
	object-fit: cover;
}

.blogSection{
	position:relative;
	display:none;
	grid-template:auto/30vw 65vw;
	width:101vw;
	margin-left:-0.5%;
	background-color:#FFF;
}

#topicTitlesList{
	position:relative;
	display:grid;
	width:30vw;
	height:700px;
	overflow-y:auto;
	box-shadow:#36F 1px 10px 10px 1px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#topicTitlesList a{
	color:#8080FF;
	text-decoration:none;
	text-indent:20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-bottom:#8080FF 1em solid;
	border-radius:2em;
}
#topicTitlesList a:hover{
	text-decoration:underline;
	border-bottom:#804000 1em solid;
}
#topicTitlesList h2{
	text-align:center;
	font-size:22px;
	text-transform:uppercase;
	font-family:Georgia, "Times New Roman", Times, serif;
	
}

.blogTopic{
	position:relative;
	display:grid;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:25px;
	width:65vw;
	margin-left:2vw;
}
.blogTopic h3{
	text-align:center;
}
.blogTopic h4{
	font-size:12px;
	font-weight:normal;
	margin-left:20vw;
}
.blogTopic img{
	display:block;
	width:30vw;
	height:20vh;
	margin-left:10vw;
}

.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}