html,body {
Margin-top: 0px;
    Margin-left: 0px;
Margin-right: 0px;
	padding: 0;
font-family: "Host Grotesk", serif;
	letter-spacing: 0.05em;
line-height: 1.3; 
	scroll-snap-align: none;	
	scroll-snap-type: y mandatory;
background: linear-gradient(136deg, #4ee08b, #e8e926, #de57a6);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.mySidenav {
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
top: 0;
  Right: 0;
  background-color: white;
	color: black;
  overflow-x: hidden;
  transition: 0.3s;
  text-align: left;
Z-index: 200;
}
.sidenav a { 
  Padding-bottom: 0px;
margin-left: 20px;
Margin-right: 20px;
  text-decoration: none;
  font-size: 1.3em;
font-weight: 700;
line-height: 1.1; 
	letter-spacing: 0.05em;
Text-align: left;
  color: black;
  display: block;
  transition: 0.3s;
}
@media only screen and (min-width: 601px) {
.sidenav a {
margin-left: 20%;
Margin-right: 20%;
}
}
@media only screen and (min-width: 1024px) {
.sidenav a {
margin-left: 30%;
Margin-right: 30%;
}
}
.sidenav a:hover {
  color: blue;
}
.sidenav .openbtn {
  position: absolute;
  top: 0;
  Margin-right: 10px;
Text-align: right;
  font-size: 3em;
font-weight: 300;
	color: pink;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: -10px;
Text-align: right;
  font-size: 3em;
font-weight: 300;
  margin-left: 0px;
	color: black;
}
@media only screen and (min-width: 601px) {
.sidenav .closebtn {
  margin-right: 20px;
}
}
@media only screen and (min-width: 1024px) {
.sidenav .closebtn {
margin-right: 20px;
}
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
}
.indent
Margin-left: 50px;
}
.container {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	height: 100vh;
}
section {
height: 100vh;
	scroll-snap-align: start;
}
.white {
position: absolute;
margin-top: 0px;
margin-bottom: 15px;
Margin-left: 15px;
Margin-right: 15px;
Padding-top: 10px;
Padding-bottom: 0px;
padding-left: 10px;
Padding-right: 10px;
Background-color: white;
}
.green {
position: relative;
margin-bottom: 0px;
Margin-left: -10px;
Margin-right: -10px;
Padding-top: 15px;
Padding-bottom: 0px;
padding-left: 10px;
Padding-right: 10px;
Background-color: beige;
}
@media screen and (min-width: 1024px) {
  div.green {
Margin-top: 40px;  
}
}
@media screen and (max-width: 1023px) {
  div.green {
Margin-top: 40px;  
}
}
@media screen and (max-width: 600px) {
  div.green {
Margin-top: 20px; 
}
}
.intro {
}
@media screen and (min-width: 1024px) {
  div.intro {
Margin-top: 0px;
Margin-left: -10px; 
Margin-right: -10px;  
}
}
@media screen and (max-width: 1023px) {
  div.intro {
Margin-top: 0px;
Margin-left: -10px; 
Margin-right: -10px;
}
}
@media screen and (max-width: 600px) {
  div.intro {
Margin-top: 0px;
Margin-left: -10px; 
Margin-right: -10px;
}
}
.imageintro {
height: 100vh;
width: 100%;
object-fit: cover;
}
.imagefull {
width: 100%;
object-fit: cover;
}
.grid {
display: grid;
flex-wrap: wrap;
margin-top: 0px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 0px;
Column-gap: 15px;
row-gap: 15px;
}
.colum {
Margin-top: 0px;  
margin-bottom: 0px;
color: black;
line-height: 1.3; 
}
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 0px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 0px;
column-gap: 10px;
row-gap: 5px;
}
.imagegrid {
Max-width: 100%;
object-fit: contain;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 0px;
}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 601px) {
  /* For tablets: */
  .col-s-1 {width: 7.88%;}
  .col-s-2 {width: 15.75%;}
  .col-s-3 {width: 23.63%;}
  .col-s-4 {width: 31.5%;}
  .col-s-5 {width: 39.38%;}
  .col-s-6 {width: 47.25%;}
  .col-s-7 {width: 55.13%;}
  .col-s-8 {width: 63%;}
  .col-s-9 {width: 70.88%;}
  .col-s-10 {width: 78.75%;}
  .col-s-11 {width: 86.63%;}
  .col-s-12 {width: 94.5%;}
}
@media only screen and (min-width: 1024px) {
  /* For desktop: */
  .col-1 {width: 7.88%;}
  .col-2 {width: 15.75%;}
  .col-3 {width: 23.63%;}
  .col-4 {width: 31.5%;}
  .col-5 {width: 39.38%;}
  .col-6 {width: 47.25%;}
  .col-7 {width: 55.13%;}
  .col-8 {width: 63%;}
  .col-9 {width: 70.88%;}
  .col-10 {width: 78.75%;}
  .col-11 {width: 86.63%;}
  .col-12 {width: 94.5%;}
  .col-13 {width: 100%;}
}
.imagecolum {
 margin-left: 0px;
  margin-right: 0px;
max-width: 100%;
object-fit: contain;
}
.heading {
color: black;
  position: fixed;
 text-align: left;
}
@media screen and (min-width: 1024px) {
  div.heading {
 font-size: 1.1em;
Left: 5px;
Top: 300px;
}
}
body a {
  cursor: pointer;
  text-decoration: none;
  color: black; 
}
body a:hover {
  cursor: pointer;
  color: blue;
  text-decoration: none;
}
body section {
  margin-bottom: 0px;
}
.title {
margin-bottom: 5px;
font-weight: 700;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black; 
line-height: 1;
}
@media screen and (min-width: 1024px) {
  div.title {
Margin-top: 50px; 
Margin-left: 180px;
Margin-right: 180px;
    font-size: 2em;  
}
}
@media screen and (max-width: 1023px) {
  div.title {
Margin-top: 40px; 
Margin-left: 90px;
Margin-right: 90px;
    font-size: 2em;   
}
}
@media screen and (max-width: 600px) {
  div.title {
Margin-top: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 2em;
}
}
.tamil {
font-family: "Catamaran", serif;
  Font-size: 1.3em;
  font-weight: 600;
  font-style: normal;
}
.sans { 
margin-top: 20px;
margin-bottom: 0px;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;
}
@media screen and (min-width: 1024px) {
  div.sans {
Margin-top: 50px; 
Margin-left: 180px;
Margin-right: 180px;
    font-size: 1em;
line-height: 1.3;   
}
}
@media screen and (max-width: 1023px) {
  div.sans {
Margin-top: 40px; 
Margin-left: 90px;
Margin-right: 90px;
    font-size: 1em;
line-height: 1.3;    
}
}
@media screen and (max-width: 600px) {
  div.sans {
Margin-top: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1em;
line-height: 1.3;
}
}
.sanstitle {
margin-bottom: 0px;
font-weight: 700;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;  
}
@media screen and (min-width: 1024px) {
  div.sanstitle {
Margin-top: 50px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1em;
line-height: 1.3;   
}
}
@media screen and (max-width: 1023px) {
  div.sanstitle {
Margin-top: 40px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1em;
line-height: 1.3;    
}
}
@media screen and (max-width: 600px) {
  div.sanstitle {
Margin-top: 30px; 
Margin-bottom: 10px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1em;
line-height: 1.3;
}
}
.sanssub {
margin-bottom: 0px;
font-weight: 700;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;  
}
@media screen and (min-width: 1024px) {
  div.sanssub {
Margin-top: 60px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;   
}
}
@media screen and (max-width: 1023px) {
  div.sanssub {
Margin-top: 50px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;    
}
}
@media screen and (max-width: 600px) {
  div.sanssub {
Margin-top: 50px; 
Margin-bottom: 10px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;
}
}
.sanssubtop {
margin-bottom: 0px;
font-weight: 700;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;  
}
@media screen and (min-width: 1024px) {
  div.sanssubtop {
Margin-top: 0px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;   
}
}
@media screen and (max-width: 1023px) {
  div.sanssubtop {
Margin-top: 0px; 
Margin-bottom: 20px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;    
}
}
@media screen and (max-width: 600px) {
  div.sanssubtop {
Margin-top: 0px; 
Margin-bottom: 10px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1.3em;
line-height: 1.1;
}
}
.sansgreen { 
margin-top: 0px;
margin-bottom: 0px;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;
}
.sanstitlegreen {
margin-bottom: 0px;
font-weight: 700;
	letter-spacing: 0.05em;
font-kerning: auto;
color: black;  
}
@media screen and (min-width: 1024px) {
  div.sansgreen, div.sanstitlegreen {
Margin-top: 10px; 
Margin-left: 180px;
Margin-right: 180px;
    font-size: 1em;
line-height: 1.3;   
}
}
@media screen and (max-width: 1023px) {
  div.sansgreen, div.sanstitlegreen {
Margin-top: 0px; 
Margin-left: 90px;
Margin-right: 90px;
    font-size: 1em;
line-height: 1.3;    
}
}
@media screen and (max-width: 600px) {
  div.sansgreen, div.sanstitlegreen {
Margin-top: 0px; 
Margin-bottom: 0px; 
Margin-left: 0px;
Margin-right: 0px;
    font-size: 1em;
line-height: 1.3;
}
}
.sansmini {
Margin-top: 0px;  
Margin-bottom: 8px;
color: black;
	letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  div.sansmini {
Margin-left: 100px;
Margin-right: 100px;
    font-size: 0.5em;
}
}
@media screen and (max-width: 1023px) {
  div.sansmini {
Margin-left: 90px;
Margin-right: 90px;
    font-size: 0.5em;
}
}
@media screen and (max-width: 600px) {
  div.sansmini {
        Margin-left: 10px;
	Margin-right: 10px;
    font-size: 0.9em;
}
}
.sansminicolum {
Margin-bottom: 8px;
color: black;
	letter-spacing: 0.05em;
line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  div.sansminicolum {
Margin-top: 16px;  
Margin-left: 0px;
Margin-right: 100px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 1023px) {
  div.sansminicolum {
Margin-top: 1px;  
Margin-left: 0px;
Margin-right: 90px;
    font-size: 0.9em;
}
}
@media screen and (max-width: 600px) {
  div.sansminicolum {
Margin-top: 40px;  
Margin-bottom: 40px;
        Margin-left: 10px;
	Margin-right: 10px;
Max-width: 100%;
    font-size: 0.9em;
}
}
.toggle {
Margin-bottom: 0px;
}
.toggle-title {
cursor: pointer;
opacity: 2;
Text-align: left;
}
.toggle-tile:hover {
color: blue;
}
.toggle .toggle-inner {
display: none;
}
.list {
Margin-top: 10px;  
margin-bottom: 10px;
Font-weight: 400;
}
.box {
  background-color: white;
  color: white;
}
  .wrapper {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    Margin-top: 20px;
    margin-bottom: 0px;
   Margin-left: 0px;
   Margin-right: 0px;
grid-row-gap: 10px;
} 
  .wrappertext {
    width: 100%;
Margin-bottom: 20px;
    display: grid;
    grid-gap: 15px;
    font-size: 0.8em;
Color: black;
}
@media screen and (min-width: 1024px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(3, 31.6%);    
}
}
@media screen and (max-width: 1023px) {
  div.wrapper, div.wrappertext {
grid-template-columns: repeat(2, 48.7%);
}
}
@media screen and (max-width: 600px) {
  div.wrapper, div.wrappertext {
        grid-template-columns: repeat(1, 100%);
}
}
.imagebox {
   width: 100%;
   height: 100%;
  object-fit: cover;
opacity: 2;
}
.textbox {
height: 200px;
padding-top: 15px;
Padding-left: 15px;
Padding-right: 15px;
padding-bottom: 15px;
  Border: 2px solid;
Border-color: blue;
Background-color: none;
opacity: 2;
Text-align: left;
}
.textboxnav {
height: 100px;
padding-top: 15px;
Padding-left: 15px;
Padding-right: 15px;
padding-bottom: 15px;
  Border: 2px solid;
Border-color: black;
Background-color: none;
opacity: 2;
Text-align: left;
}
@media screen and (min-width: 1024px) {
  div.textbox, div.textboxnav {
color: black; 
Margin-bottom: 5px;   
}
}
@media screen and (max-width: 1023px) {
  div.textbox, div.textboxnav {
color: black;
Margin-bottom: 5px;
}
}
@media screen and (max-width: 600px) {
  div.textbox, div.textboxnav {
color: blue;
Margin-bottom: 5px;
}
}
.textboxblue {
  height: 200px;
padding-top: 20px;
Padding-left: 20px;
Padding-right: 20px;
padding-bottom: 20px;
border: 8px;
Border: solid;
Border-color: none;
Background-color: blue;
color: white;
opacity: 2;
Text-align: left;
}
.textbox:hover {
color: blue;
}
.textboxnav:hover {
background-color: none;
}
.kachel {
position: relative;
	margin-left: 0px;
Margin-right: 0px;
Margin-top: 0px;
margin-bottom: 0px;
	z-index:1;
}
@media screen and (min-width: 1024px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 1023px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
@media screen and (max-width: 600px) {
div.kachel {
	width: 310px;
max-height: 410px;
}
}
.imagekachel {
  object-fit: cover;
max-width: 300px;
max-height: 400px;
opacity: 2;
}
@media screen and (min-width: 1024px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 1023px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
@media screen and (max-width: 600px) {
div.imagekachel {
max-width: 300px;
max-height: 400px;
}
}
.imagefull {
Margin-top: 0px;  
margin-bottom: 0px;
Margin-left: 0px;
  margin-right: 0px;
max-width: 100%; 
object-fit: cover;
}
.hr {
  Border-top: 2px solid black;
Margin-top: 10px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 10px;
}
.hrblue {
  Border-top: 2px solid;
Margin-top: 10px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 10px;
color: blue;
}
.hrpurple {
  Border-top: 2px solid;
Margin-top: 10px;
Margin-left: 0px;
Margin-right: 0px;
margin-bottom: 10px;
color: #CBC3E3;
}
.hrnav {
  Border-top: 2px solid;
Margin-top: 10px;
margin-bottom: 10px;
color: blue;
}
@media screen and (min-width: 1024px) {
div.hrnav {
margin-left: 30%;
margin-right: 30%;
}
}
@media screen and (max-width: 1023px) {
div.hrnav {
margin-left: 20%;
margin-right: 20%;
}
}
@media screen and (max-width: 600px) {
div.hrnav {
margin-left: 20px;
margin-right: 20px;
}
}
.logo {
Margin-top: 10px;
width: 60%;
height: 60%;
}
.logomedium {
Margin-top: 10px;
width: 48%;
height: 48%;
}
.logosmall {
Margin-top: 10px;
width: 30%;
height: 30%;
}
.underline {
	color: black;
	border-bottom-color: black;
	border-bottom: 1px solid;
	padding-bottom: 0px;

}
.underlinewhite {
	color: white;
	border-bottom-color: white;
	border-bottom: 1px solid;
	padding-bottom: 0px;

}
.underlineblack {
	color: black;
	border-bottom-color: black;
	border-bottom: 1px solid;
	padding-bottom: 0px;
}
p.uppercase {
    text-transform: uppercase;
}
.highlight {
  background: white;
color: black;
}
::selection {
color: blue;
} 
}