* {
  box-sizing: border-box;
}
h1{
	font-family: "Arial", Helvetica, sans-serif;
	font-size:60px;
    text-align: center;
	line-height: 10pt
}
h2{
	font-family: "Tahoma", Helvetica, sans-serif;
	font-size:52px;
	line-height: 10pt
}
h3{font-size:44px;}
h4{
	color:#ff9900 ;
	font-size:34px;
	text-align: center;
	line-height: 0.5;		
}
h5{
font-size:23px;
text-align: center;
font-weight: none;	
}
h6{font-size:18px;}
p {
	font-family: "FreesiaUPC", Times, serif;
	font-size:24px;
	text-align: center;
	font-weight: bold;
	line-height: 16pt
}
.fontbold{
  font-family: "FreesiaUPC", Times, serif;
	font-size:32px;
	color:#ff3300 ;
	font-weight: bold;
    text-align: center;
line-height: 16pt
padding-bottom: 15px;
}
.fontbold2{
  font-family: "FreesiaUPC", Times, serif;
	font-size:26px;
	color:#ff3300 ;
	font-weight: bold;
    text-align: center;
line-height: 16pt
padding-bottom: 15px;
}


body {
  font-family: "Tahoma", Helvetica, sans-serif;
  background-color: #fff ;
}

/* Style the header */
.header {
  background-color: # ;
  padding: 5px;
  text-align: center;
  font-size: 2.5vh;
  font-family: "FreesiaUPC",Tahoma, Helvetica, sans-serif;
font-weight: bold;
color:#000;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.column{
  float: left;
  width: 100%;
/*  width: auto;*/
  height: auto; 
  padding: 1px 1px 1px1px;
  margin-right: 5px;
  background-color:none;
   display: block;
}
.column1{
  float: left;
  width: 28vh;
/*  width: auto;*/
  height: 46vh; 
  padding: 10px 15px 15px 5px;
  margin-right: 10px;
  background-color:#005128;
    display: block;
}
.column2 {
  float: left;
  height: 46vh; 
  width: 42vh;
  padding: 1px;
  margin-right: 1px;
  background-color:#;
   border: 1px solid #b4b4b4;
    display: block;
}
.column_c {
  height: 34vh; 
  width: 41vh;
  float: left;
  padding: 1px;
  margin: 2px;
  background-color:#;

  position: relative;
line-height: 1.2;	
}
.column2_1 {
  float: left;
  width: 100%;
  height: 425px; 
  padding: 5px 5px 5px 5px;
 margin: 0px;
  background-color:#f7f7f7;
 border-top-left-radius: 20px;
 border: 1px solid #b4b4b4;
 text-align:center;
 display: block;
}
.column2_2 {
  display: block;
  float: left;
  width: 100%;
  height: 200px; 
  padding: 10px ;
 margin: 2px;
  background-color:#dfe7f7;
 border: 1px solid #5881d6;
 text-align:Left;
 font-size:1.08vh;
 line-height:12px;
}
.column3 {
  width: 26vw;
  height: 300px; 
  float: left;
  padding: 3px;
  margin: 2px;
  background-color:none;
  position: relative;

/*  overflow: hidden;*/
}
.column3_2 {
  width: 45vh;
 height: 14.7vw;
  float: left;
  margin: 5px;
  padding:5px;
  border: 1px solid #ff0000;
  background-color:none;
  position: relative;
/*  overflow: hidden;*/
}
.column5 {
  width: 26vw;
 height: 5vh;
  float: left;
  padding: 3px;
  margin: 2px;
  background-color:none;
  position: relative;
line-height: 1.2;	
/*  overflow: hidden;*/
}
.colu_in {
  float: left;
  width: 58vh;
 height: 15.5vw;
  padding:5px 5px 1px 5px;
 margin: 2px;
background-color:#ffc164;
}

.tiktok {
  display: flex;
flex-direction: column;
    height: 31vh; 
    width: 7vw;
	margin:6px;
  padding:5px;
  font-size:1.4vw;
  float: left;
  background-color:#6dbe96;

}

.column4 {
  width: 26vw;
  height: 135px; 
  margin:7px;
  float: left;
  padding-top: 0px;
 margin-left: 2px;
  background-color:none;
  color:#000;
  text-align: left;
  line-height: auto;
 border-radius: 2px;
 border: 1.5px solid #eaeaea;
}
.column4_2 {
  width: 26vw;
  height: 115px; 
  margin:5px;
  float: left;
  padding: 5px;
 margin-left: 2px;
  background-color:#fff;
  color:#0033ff;
  font-size:2vh;
  text-align: left;
  line-height: auto;
 border-radius: 2px;
 border: 1.5px solid #ff0000;
}
.columnTable{
  width: 100%;
  height: auto; 
  margin-top:20px;
  float: left;
  padding-top: 1px;
 margin-left: 1px;
  background-color:none;
  color:#000;
  text-align: left;
  line-height: 13pt
}
.Visitors {
  width: 100%;
  height: auto; 
  float: left;
  padding-top: 115px;
  background-color:none;
  color:#000;
  text-align: Left;
  line-height: 14pt
}

.boxitem{
	width: 100%;
	height: 10vh; 
	float: left;
    text-align: center;
	padding: 5px;
	margin:2px;
	background-color:none;
	color:#000;
  display: flex;
}
.boxitem_row{
display: block;
	width: auto;
	height: auto; 
	font-size: 14px;
    text-align: center;
	padding: auto;
	margin:auto;
	background-color:none;
	color:#000;
}
.boxitem_row2{
	width: auto;
	height: auto; 
	font-size: 16px;
    text-align:center;
	padding: auto;
	margin: 100px;
	background-color:#33ff00;
	color:#000;
	display: block;
}
.boxitem_row a:hover{
width: 60px;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s ease;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(106, 90, 205);
}
}
.boxitem_row2 a:hover{
	background-color:#f7f7f7;
	width:160px ;
	height: 81px;
	border-bottom: 3px solid blue;
	animation-duration: 4s;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Style the footer */
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  color: black;
  text-align: center;
  padding-top:5px;
}


.div1 {
  width: 100%;
  height: 14vh;
  border: 2px solid #a4a4a4;
  box-sizing: border-box;
  background:#002412;
 padding: 15px;
 margin:5px 5px 5px 5px;
 float: center;
font-size:2.2vh; 
color:#c0c0c0 ;
text-align: Left; 
line-height: 14pt;
}

a:link, a:visited {
  background-color: #;
  color: white;
  text-align: center;
  text-decoration: none;
}
a:hover {
  font-size: 1.8vh;
    color: #000;
	  text-align: center;
  text-decoration: none;
  display: inline-block;
}


.button {
  background-color: #0059b3; 
  border-radius: 17px;
  width: 100%;
  height:45px;
  padding: 10px 0px;
  margin:5px 0px 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.8vh;
position: relative;
}
 a:hover {
  color:#ffff00;
  width: 80px;
  height: 80px;	
border: 1px solid #;
background-color: #f0f0f0; 
  }
  
a:link{
  color:#99ff00;
}
a:active {
  color: yellow;
}


.button2 {
  background-color: #5e0445; 
  border-radius: 0px;
  color: #fff;
  width: 100%;
  height:35px;
  padding: 6px 0px;
  margin:0px 0px 0px 0px;
  text-align: Left;
  text-decoration: none;
  display: inline-block;
  font-size: 1.6vh;
position: center;
}

.navbar {
  width: 100%;
  margin:5px;
  background-color: #004d33;
  overflow: auto;
  padding: 5px ;
}

.navbar a {
  float: left;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.navbar a:hover {
  background-color: #004d33;
  box-shadow: 2px 1px 0px #00d500;
  border-radius: 5px;
  text-decoration: none;
  height:4.2vh;
  width:auto;
  color:#fff;
}
.topnav-right {
  float: right;
}
.active {
  background-color: #009b65;
}

@media screen and (max-width: 480px) {
  .navbar {
    float: none;
	text-align: Left;
    display: block;
	font-size: 1.8vw;
	width:100%;
	height:100%;
	margin-left:3px;
	line-height: 1.8;
	background-color: #004d33;
	overflow: auto;
  }
}

@media screen and (max-width: 768px) {
  .navbar a {
    float: none;
	text-align: Left;
    display: block;
	font-size: 2vh;
	padding:7px 0px;
	
  }
}

@media screen and (max-width: 768px){
 .header {
  font-size: 26px;
  }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {
  .column.side, .column.middle{
    width: 100%;
	height:100%;
  }
}
@media screen and (max-width: 768px) {
   .column2{
   	margin-top:30px;
	font-size:1.6vh;
    height: auto; 
    width: 92%;
  }
}
@media screen and (max-width: 480px,600px) {
  .column3{
  	padding-bottom:50px;
	font-size:1.24vh;
    height: 100px; 
	width: 428px;
  }
}
@media screen and (max-width: 768px){
  .column3_2{
	font-size:1.6vh;
	padding:5px;
	border: none;
	height: 80px; 
	width: 450px;
  }
}

@media screen and (max-width: 768px) {
  .column5{
  	padding-bottom:20px;
	font-size:1.24vh;
    height: auto; 
	width: 450px;
  }
}
@media screen and (max-width: 768px) {
   .column2,.column2_2{
	font-size:1vh;
    height: 150px; 
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
   .column2_1{
	font-size:1.6vh;
    height: auto; 
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .column2_2{
	font-size:1.3vh;
    height: 150px; 
    width: 100%;
  }
}

@media screen and (max-width:768px){
.tiktok {
    height: 38vh; 
    width: 40vw;
	padding:5px;
	font-size:1.8vh;
	background-color:#f7f7f7;
}
}

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}
@media screen and (max-width:768px) {
.button{
   width:100%;
  height: 20%;
  font-size: 2.4vh;
  margin:5px 0px 7px 0px;
  }
}


@media screen and (max-width:768px) {
 .column1,.column2{
  width:58vh;
  display: block;
  margin:2px;
  padding:5px 5px 5px 10px;
  height: auto;
  font-size: 14px;
  }
}
@media screen and (max-width:768px) {
 .boxitem{
  width:450px;
  display: flex;
  margin:2px;
  padding:5px 5px 5px 10px;
  height: auto;
  font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .boxitem_row {
	margin:5px 5px 5px 5px;
	color:#ccffcc;
	display: flex;
	padding:5px;
	height:10vh;
	width:20vw;
  }
}
@media screen and (max-width: 768px) {
  .boxitem_row2 {
	margin:5px 5px 5px 5px;
	color:#ccffcc;
	display: flex;
	padding:5px;
	height:100vh;
	width:20vw;	
  }
}

@media screen and (max-width:768px) {
 .column1,.div1{
  display: block;
  width: 98%;
  height: 100%;
  padding:10px 5px;
  font-size: 20px;
  }
}

@media screen and (max-width:768px) {
 .Table{
  width:450px;
  height: 100%;
  padding:5px 5px;
  font-size: 18px;
  }
}