*{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
a:visited {
  color: #777777;
}

a:hover {
  color: #FFCC00;
}

h1{
  margin-left: 10%;
  color: #669900;
}

h2{
  text-align: justify;
   color: #0083A3;
   padding: 10px 10px;
   font-family: "Open Sans";
   font-weight:lighter;
}
h3{
  color: #009900;
  margin-left: 20px;
}
h4{
  width: 40%;
  color: #33CCCC;
  font-size: 18px;
  text-align: left;
  padding: 20px;
}
p{
  text-align: center;
  padding: 10px 0px;
}

.p1{
   font-size: 20px;
   width: 60%;
  margin: 10px auto;
  text-align: left;
  padding-bottom: 20px;
  color:#52A300;
}
.p2{
   font-size: 20px;
  margin: 10px auto;
  width: 60%;
  text-align: center;
  padding-bottom: 20px;
  color:#003366;
}
.p3{
font-size: 20px;
  margin: 10px auto;
  width: 60%;
  text-align: center;
  padding-bottom: 20px;
  color:#FF3366;
}
.le-i{
  margin-left: 10%;
}

.hr{
  margin: 10px auto;
}
 .m1{
    color: #CC0000;
   font-size: 18px;
  }
  .m2{
    color: #00CC00;
   font-size: 18px;
  }
   .m3{
    color: #0099FF;
   font-size: 18px;
  }
   .m4{
    color: #FFFF00;
   font-size: 18px;
  }
   .m5{
    color: #9933CC;
   font-size: 18px;
  }
   .m6{
    color: #FF9900;
   font-size: 18px;
  }
   .m7{
    color: #CC00CC;
   font-size: 18px;
  }
  .green{
    color: #66CC00;
  }
/* Create three unequal columns that floats next to each other */
.box{
  width: 98%;
  margin: 0px auto;
}
.spncolor{
    color: #33CC00;
  }
 .spncolor2{
    color: #9900FF;
  }
  .spncolor3{
    color: #CC0000;
  }
 .span{
    color: #FFFFFF !important;
    margin-top: 15px;
    padding-left: 30px;
    padding-top:20px;
    font-size:18px;
  }
 /* .spnmarquee{
    color: #99CCFF !important;
    font-size:20px;
  }*/
  .marquee-top{
   display: block;
   width: 350px;
   margin: 10px 10px;
    padding-left: 10px;
   color: rgb(51, 255, 204)
  }

  .ftmarquee{
    color: #FFCC00 !important;
    margin-top: 10px;
    padding-top:30px;
    font-size:28px;
  }
  .marquee{
    color: #FFFFFF;
   width: 300px;
   overflow: auto;
  }
   .marquee-div{
    width: 300px;
  }
/* Clear floats after the columns */
 .responsive {
  width: 100%;
  height: auto;
}
  img{
    box-shadow: 0 10px 10px -6px #003333;
    text-align: center;
     border-radius: 10px;
  }
/* added the css */
#gradient {
  width: 100%;
  height: auto;
  position: relative;
  background: linear-gradient(270deg, #002E5C, #CC8100, #006699, #006699, #FFFF00);
  background-size: 600% ;
  -webkit-animation: colors 40s ease infinite;
  -moz-animation: colors 40s ease infinite;
  animation: colors 40s ease infinite;
  z-index: auto;
}
 #gradient2 {
  width: 100%;
  height: auto;
  position: relative;
  background: linear-gradient(270deg, #002E5C, #CC8100, #006699, #006699, #FFFF00);
  background-size: 600% ;
  -webkit-animation: colors 40s ease infinite;
  -moz-animation: colors 40s ease infinite;
  animation: colors 40s ease infinite;
   z-index: auto;
}

 ul.topnav {
  list-style-type: none;
  font: "Open Sans";
  font-size: 20px;
  margin:20px auto;
  padding-top: 15px;
  padding-bottom: 15px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(51, 204, 255, 0.10); margin-top: 20px;
  -moz-border-radius: 10px !important;
  -webkit-box-shadow: 0 10px 10px -6px #003333;
  -moz-box-shadow: 0 10px 10px -6px #003333;
  box-shadow: 0 13px 14px -5px #007575;
  z-index: 1;
}
.topnav{
 background-color: #00CCFF;
}
ul.topnav li {
  float: left;
  }
ul.topnav li a {
  display: block;
  color: #FFFFE5;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-family: serif;
   font-size: 20px;
}
ul.topnav li a:hover:not(.active) {
color: #FF99CC;
  }

ul.topnav li a.active {
  background-color: #00FF00;
  }
ul.topnav li.right {
  float: right;
  }
 .wraper{
   width: 90%;
   margin: 0px auto;
}
.card {
        color: #336600;
        float: left;
        width: calc(33.33% - 20px);
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        height: auto;
}
.card p { font-size: 18px;
font-family: "Open Sans";
}

.cardContainer:after {
        content: "";
        display: table;
        clear: both;
}
.cardContainer{
  width: 98%;
  margin-left: 15px;
  }

}

.clear{
  clear: both;
}
/* Style the footer */
.footer {
  width: 98% !important;
  height:  auto;
  background-color: #66FFFF;
  margin: 10px auto;
  padding: 24px;
  text-align: center;
  vertical-align: middle ;
  border-radius: 10px;
  box-shadow: inset -1px -1px 8px 8px #33CCCC;
  background-color: #66FFFF;
}
.footer a{
  color: #FFFFFF;
}
.footer a:hover{
background-color: #00CCCC;
}
.ftheart{
  color: #FF0000;
}
.ftdots{
  color: #FF0000;
}
.ftdiv{
  width: 350px;
 margin: 35px auto;
 color: #FFCC00;
  font-size:28px;
}
* {
  box-sizing: border-box;
}
@-webkit-keyframes colors {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes colors {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes colors {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
 /* Responsive layout - */
@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {float: none;}
 .column.side1.side2, .column.middle {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
.card {
width: 100%;
   }
 }
@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {float: none;}
 .column.side, .column.middle {
    width: 100%;
  }
}
 .clear{ clear: both;}