/* CSS Document */
html{
	box-sizing: border-box;  
	height: 100%;
  	margin: 0;
  	scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {background-color:#060201;color:#fff;
  margin: 0;font-family:Calibri, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;height:100%;width:100%;}

/* Colors */
	.red {color:red;}
/* Rotation */
.rotate90p {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}
.rotate45p {-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
/* Links */
a.blue:link {color:yellow;text-decoration:underline;}
a.blue:visited {color:yellow;text-decoration:underline;}
a.blue:hover {color:red;text-decoration:underline;}
a.blue:active {color:red;text-decoration:none;}
.yellowH {color:#fff;cursor: pointer;font-weight:600;}
.yellowH:hover{color:yellow;text-decoration:underline;cursor: pointer;font-weight:600;}
.element1 {color:#fff;padding:1px 4px 2px 4px;font-weight:600;}
.element1:hover{background:linear-gradient(to right, #33ffb0, #15bdf0);border-radius:2px;color:#000;transition:background-color 0.3s;cursor:pointer;font-weight:600;}
/* Borders */
	.border1 {border:1px #676767 solid;}
	.border1r {border-right:1px #676767 solid;}
	.round3 {border-radius:3px;}
/* Small Phones   */
@media only screen and (max-width: 380px)
{
	.grid1 {float:left;width:99%;}
	.grid2 {float:left;width:99%;}
	.grid2m {float:left;width:99%;}
	.grid2l {float:left;width:99%;}
	.grid3 {float:left;width:99%;}
	.graph2 {width:275px;}
	.containerH {height:100px}
	.attain {font-size: 190%;margin:30px 0px 10px 120px;}
}
}

/* Smart Phones */
@media only screen and (min-width: 381px) and (max-width: 600px)
{
	.grid1 {float:left;width:99%;}
	.grid2 {float:left;width:99%;}
	.grid2m {float:left;width:99%;}
	.grid2l {float:left;width:99%;}
	.grid3 {float:left;width:99%;}
	.graph2 {width:300px;}
	.containerH {height:100px}
	.attain {font-size: 190%;margin:30px 0px 10px 120px;}
}

/* TABLETS */
@media only screen and (min-width: 601px) and (max-width: 991px)
{
	.grid1 {float:left;width:99%;}
	.grid2 {float:left;width:49%}
	.grid2m {float:left;width:30%;}
	.grid2l {float:left;width:68%;}
	.grid3 {float:left;width:33%;}
	.graph2 {width:350px;}
	.containerH {height:180px}
	.attain {font-size: 290%;margin:60px 0px 20px 220px;}
}

/* DESKTOPS */
@media only screen and (min-width: 992px)
{
	.grid1 {float:left;width:99%;}
	.grid2 {float:left;width:49%;}
	.grid2m {float:left;width:30%;}
	.grid2l {float:left;width:68%;}
	.grid3 {float:left;width:33%;}
	.graph2 {width:350px;}
	.containerH {height:180px}
	.attain {font-size: 290%;margin:60px 0px 20px 220px;}
}