/*-----------------------------All rights reserved-----------------------
-----------------------Developed by saman kumara wijerathne --------------
-------------------------send2samanbandarawela@gmail.com------------------
----------------------------------071-8928319------------------------------
-------------------------------e-thaksalawa.gov.lk-----------------------*/
@charset "utf-8";
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body{
  	margin:0;
  	padding:0;
 	background: #a366ff; 
  	background: -webkit-linear-gradient(to bottom,  #70db70,  #ccff99);  
  	background: linear-gradient(to bottom,  #70db70,  #ccff99); 
    background-size: cover;
    background-position: absolute; 
    background-repeat: no-repeat; 
	background-attachment: fixed;
	overflow-y: hidden;
  	overflow-x: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.callmaintbl{
	height:85vh;
	width:100%;
}
.indexfulldiv1{
	width:100vw;
	position:relative;
	height:90vh;
	margin:0px;
	padding:0px;
}
.indexfulldiv2{
	width:98%;
	height:98%;
	position:absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	margin:0px;
	padding:0px;
}

.fulldiv1{
	width:100vw;
	position:relative;
	height:90vh;
	margin:0px;
	padding:0px;
}
.fulldiv2{
	width:98%;
	height:98%;
	position:absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	margin:0px;
	padding:0px;

}
.box div {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 6px solid rgba(255,255,255,0.8);
  z-index:-4;
}
.box div:nth-child(1) {
  top: 12%;
  left: 42%;
  animation: animate 10s linear infinite;
}
.box div:nth-child(2) {
  top: 70%;
  left: 50%;
  animation: animate 7s linear infinite;
}
.box div:nth-child(3) {
  top: 17%;
  left: 6%;
  animation: animate 9s linear infinite;
}
.box div:nth-child(4) {
  top: 20%;
  left: 60%;
  animation: animate 10s linear infinite;
}

.box div:nth-child(5) {
  top: 67%;
  left: 10%;
  animation: animate 6s linear infinite;
}
.box div:nth-child(6) {
  top: 80%;
  left: 70%;
  animation: animate 12s linear infinite;
}
.box div:nth-child(7) {
  top: 60%;
  left: 80%;
  animation: animate 15s linear infinite;
}
.box div:nth-child(8) {
  top: 32%;
  left: 25%;
  animation: animate 16s linear infinite;
}
.box div:nth-child(9) {
  top: 90%;
  left: 25%;
  animation: animate 9s linear infinite;
}
.box div:nth-child(10) {
  top: 20%;
  left: 80%;
  animation: animate 5s linear infinite;
}
.box div:nth-child(11) {
  top: 30%;
  left: 90%;
  animation: animate 8s linear infinite;
}
.box div:nth-child(12) {
  top: 70%;
  left: 90%;
  animation: animate 9s linear infinite;
}
@keyframes animate {
  0% {
    transform: scale(0) translateY(-90px) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.3) translateY(-90px) rotate(-180deg);
    border-radius: 50%;
    opacity: 0;
  }
}
.saman1{
  display: block;
  width: 100%;
  height: 20%;
  max-height: 10%;
  margin: 0;
  z-index:5;
  bottom:0;
  position:absolute;
  left:0px;
  float:left;
  z-index:-5;
}
.bg1 > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
  	animation-delay: -2s;
  }
}
.bg2 > use {
  animation: move-forever2 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.bg3 > use {
  animation: move-forever3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.bg4 > use {
  animation: move-forever4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.bg1,.bg2,.bg3,.bg4{
	z-index:-2;
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
/*--------------media quarey under developing---------------------------*/
@media screen and (max-width: 576px) {
  table {
    width: 100%;
    margin-bottom: 1rem;
  }

  th, td {
    padding: 0.5rem;
  }
}

@media (min-width: 576px) {
  .main-tb {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
 bod{
    max-width: 720px;
  }
}

@media (min-width: 992px) {
 .main-tb{
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .main-tb {
    max-width: 1140px;
  }
}
/*-----------------------------------------*/
.firsttr{
	height:10%;
}
.lasttr{
	height:10%;
}
.lasttablecol{
	width:12.4%;
}
.btndiv{
	width:98%;
	height:98%;
	position:relative;
	margin-top:8%;
	z-index:2;
}
.btn{
	width:98%;
	border:solid;
	color:red;
	align:center;
	font-size:1.2vw;
	cursor:pointer;
  	will-change: transform;
  	transition: transform 450ms;
	position:absolute;
	z-index:3;
}
.btn:hover {
    transition: transform 125ms;
    transform: translateY(-5px);
	background-color:#FFCC00;
	color:#990000;
}
#btnprevless{
	border-radius:40px 0px 0px 40px;
}
#nextless{
	border-radius:0px 40px 40px 0px;
}
#testanswer{
	border-radius:20px;
}
#startlesson{
	border-radius:20px;
}
.commontrbg{
	background-color:rgba(255, 250, 252, 0.60);
}
.footer{
	position: absolute;
    bottom: 3%;
    right: 0%;
	background-color:#FFFF33;
	padding:0.3%;
	width:3%;
	text-align:center;
	cursor:pointer;
	border-radius:40px 0px 0px 40px;
	font-size:1.2vw;
}
.footer:hover{
	background-color:#FF3300;
	color:#FFCC33;
}
.design{
	position:absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	width:40%;
	height:40%;
	border:solid;
	border-color:#FFFFFF;
	font-size:1.5vw;
	border-radius:40px 0px 40px 0px;
	background: rgb(248,252,204);
	background: radial-gradient(circle, rgba(248,252,204,1) 0%, rgba(120,252,137,1) 51%, rgba(55,214,113,1) 100%);
	box-shadow: 0px 0px 20px #888888;
	z-index:10;
}
.desp{
	text-align:center;
	
}
.copyri{
	font-size:1vw;
	position: absolute;
    bottom: 1%;
    right:30%
}
.subname{
	position: absolute;
    top: 12%;
    right: 0%;
	background-color:#075d01;
	color:#FFFF00;
	width:9%;
	text-align:center;
	border-radius:30% 0% 0% 30%;
	z-index:3;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	border:solid;
	border-width:thin;
	border-right:none;
	border-color:#FFFFFF;
}
.grade{
	position: absolute;
    top: 21%;
    right: 0%;
	background-color:#075d01;
	color:#FFFF00;
	width:8%;
	text-align:center;
	border-radius:30% 0% 0% 30%;
	z-index:3;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	border:solid;
	border-width:thin;
	border-right:none;
	border-color:#FFFFFF;
}
.logdiv{
	position: absolute;
    top: 1%;
    right: 0%;
	width:10%;
	z-index:3;
	}
.logimg{
	position:relative;
	width:98%;
}
.subp{
	font-size:1.6vw;
	margin-top:2%;
	margin-bottom:5%;
}
.gradep{
	font-size:1.2vw;
	margin-top:3%;
	margin-bottom:5%;
}/*---------for index page------------*/

.pivisuma{
	width:15%;
	font-size:1.5vw;
	padding:1%;
	border:solid;
	background-color:#FF9900;
	color:#FFFFFF;
	border-radius:30px;
	cursor:pointer;
  	will-change: transform;
  	transition: transform 450ms;
	box-shadow: 0px 0px 20px #888888;
}
.pivisuma:hover {
    transition: transform 125ms;
    transform: translateY(-5px);
	background-color:#FFCC00;
	color:#990000;
	border-color:#990000;
}
.frontpg{
	position:absolute;
	width:80%;
	height:80%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	border:solid;
	border-color:#FFFFFF;
	box-shadow: 0px 0px 30px #000000;
	z-index:5;
	border-radius:0px 0px 40px 40px;
	
}
.frontpgp1{
	padding-top:2%;
	text-align:center;
	font-size:2.5vw;
	font-weight: 600;
	color:#000066;
}
.frontpgp11{
	padding-top:2%;
	text-align:center;
	font-size:2vw;
	font-weight: 600;
	color:#000066;
}
.frontpgp111{
	padding-top:2%;
	text-align:center;
	font-size:1.7vw;
	font-weight: 600;
	color:#000066;
}
.frontpgp1111{
	padding-top:2%;
	text-align:center;
	font-size:1.4vw;
	font-weight: 600;
	color:#000066;
}
.frontpgp2{
	text-align:center;
	font-size:1.3vw;
	margin:1%;
}
.imgdivfp{
	position:relative;
	width:95%;
	height:90%;
	top: 42%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.5);
	border-radius:0px 0px 40px 40px;
	
}
.gradeF{
	font-size:1.3vw;
	font-weight: 600;
	width:10%;
	height:auto;
	position:absolute;
	text-align:center;
	top:1.5%;
	left:1%;
	border-radius:0px 40px 40px 0px;
	padding:1%;
	background-color:rgba(255, 250, 252, 0.98);
	box-shadow: 0px 0px 20px #888888;
	z-index:5;
}
.subjectF{
	font-size:1.3vw;
	font-weight: 600;
	width:10%;
	height:auto;
	position:absolute;
	text-align:center;
	top:1.5%;
	left:87%;
	border-radius:40px 0px 0px 40px;
	padding:1%;
	background-color:rgba(255, 250, 252, 0.98);
	box-shadow: 0px 0px 20px #888888;
	z-index:5;
}
/*--------------------------------------------------------------------------------------------*/
/*------------------use below classes into your lesson without any changes--------------------*/
/*--------------------------------------------------------------------------------------------*/

/*---------Enter first for any content------------*/
.relativediv{
	position:relative;
	width:98%;
	height:98%;
	background-color:rgba(255, 250, 252, 0.50);
	z-index:3;
	margin:0px;
}
/*---------Enter second for any content------------*/
.absolutecenterdiv{
	position:absolute;
	width:99%;
	height:99%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	margin:0px;
}
/*---------Enter for your any topics------------*/
.topic1{
	font-size:1.5vw;
	color:#FFFFFF;
	font-weight: 400;
}
.topic2{
	font-size:1.4vw;
	color:#FFFFFF;
	font-weight: 500;
}
.topic3{
	font-size:1.3vw;
	color:#000C66;
	font-weight: bold;
	
}
.topic4{
	font-size:1.1vw;
	color:#FFFFFF;
	font-weight: 500;
}

/*---------Enter for your any text contents------------*/
.txt1{
	position:absolute;
	width:99%;
	height:99%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align:justify;
	font-size:1.2vw;
	margin:0px;
	
}
.txt2{
	position:absolute;
	width:99%;
	height:99%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align:justify;
	font-size:1.3vw;
	margin:0px;
}
.txt3{
	position:absolute;
	width:99%;
	height:99%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align:justify;
	font-size:1.4vw;
	margin:0px;
}
/*---------Use for one picture full frame------------*/
.absoluteimg100{
	position:absolute;
	width:99%;
	height:99%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
/*---------Use for  resize picture 75% and align center------------*/
.absoluteimg75{
	position:absolute;
	width:75%;
	height:75%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
/*---------Use for  resize picture 50% and align center------------*/
.absoluteimg50{
	position:absolute;
	width:50%;
	height:50%;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
/*-----------2 images can be entered into the div------*/
.absoluteimgmulti50{
	width:50%;
	height:50%;
}
/*-----------16 images can be entered into the div------*/
.absoluteimgmulti25{
	width:22%;
	height:22%;
}
/*-----------convert as a button style 1 (magentashadow)------*/
.convertbtn1{
	cursor:pointer;
	padding:2%;
}
.convertbtn1:hover{
	box-shadow: -3px 3px 20px 8px rgba(222,31,123,0.62);
	-webkit-box-shadow: -3px 3px 20px 8px rgba(222,31,123,0.62);
	-moz-box-shadow: -3px 3px 20px 8px rgba(222,31,123,0.62);
}
/*-----------convert as a button style 2 (yellow shadow)------*/
.convertbtn2{
	cursor:pointer;
	padding:2%;
}
.convertbtn2:hover{
	box-shadow: -3px 3px 20px 8px rgba(255,246,0,0.62);
	-webkit-box-shadow: -3px 3px 20px 8px rgba(255,246,0,0.62);
	-moz-box-shadow: -3px 3px 20px 8px rgba(255,246,0,0.62);
}
/*-----------convert as a button style 2 (red shadow and zoom)------*/
.convertbtn3{
	cursor:pointer;
	padding:2%;
	transition: 0.4s all ease-in-out;
}
.convertbtn3:hover{
	box-shadow: -3px 3px 20px 8px rgba(255,0,0,0.62);
	-webkit-box-shadow: -3px 3px 20px 8px rgba(255,0,0,0.62);
	-moz-box-shadow: -3px 3px 20px 8px rgba(255,0,0,0.62);
	transform: scale(1.2);
}

/*-----------main table collomn width------*/
.comcolomnWidth{
	width:12.5%;
}