*{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
body {
  font-family: Helvetica, sans-serif;
  margin: 0px auto;
}
h2{
  text-align: center;
   color: #0083A3;
   padding: 10px 10px;
   font-family: "Open Sans";
   font-weight:lighter;
}
h3{
  color: #009900;
}
h4{
  width: 40%;
  color: #33CCCC;
  font-size: 18px;
  text-align: left;
  padding: 20px;
}
 .box{
  margin: 0px auto;
  width: 90%;
  height: auto;
}
 .responsive {
  width: 100%;
  height: auto;
}
.spncolor{
    color: #33CC00;
  }
 .spncolor2{
    color: #A8FFFF;
  }
  .spncolor3{
    color: #CC0000;
  }
 .spnmarquee{
    color: #FFCCFF !important;
     padding-left: 40px;
      padding-top: 30px;
       font-size:20px;
  }
  .marquee{
    color: #F1F1F1;
   width: 350;
   display: block;
   overflow: auto;
  }
    .marquee-div{
    width: 350px;
    text-align: center;
     margin: 0px auto;
  }
/* Style the header */
/* Create three unequal columns that floats next to each other */
.row{
  margin: 0 auto;
}
.column {
  text-align: center;
  padding: 5px 0px 5px 5px;
  margin: 10px auto;
}
/* Left and right column */
.column.side1 {
  width: 0%;
  padding-left: 16px;
}
.column.side2 {
  width: 0%;
  float: right;
}
/* Middle column */
.column.middle {
  width: 90%;
  box-shadow: 0 12px 8px -2px #33CC99;
  text-align: center;
  margin-bottom: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* added the css */
 ul.topnav {
  list-style-type: none;
  font: "Open Sans";
   font-size: 20px;
  margin:20px auto;
  padding-top: 10px;
  padding-bottom: 0px;
  overflow: hidden;
  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 a:hover {
  color: #FFFF00;
}
ul.topnav li {float: left;}
ul.topnav li a {
  display: block;
  color: #A8FFFF;
  text-align: center;
  padding: 22px 16px;
  text-decoration: none;
  font-family: serif;
}
/* Style the footer */
.footer {
  width: 95%;
  height: auto;
  background-color: #f1f1f1;
  margin: 10px auto;
  padding: 16px;
  text-align: center;
  border-radius: 10px;
  box-shadow: inset -1px -1px 8px 8px #33CCCC;
}

.footer a{
  color: #FFFFFF;
}
.footer a:hover{
background-color: #00CCCC;
}
.ftdots{
  color: #66FF00
}
ul.topnav li.right {float: right;}
#gradient {
  width: 90%;
  height: 100%;
  position: relative;
  background: linear-gradient(270deg, #002E5C, #CC8100, #000099, #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;
}
@-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%;
  }
}
p{
  text-align: center;
  padding: 10px 0px;
}
.clear{
  clear: both;
}
.p1{
   font-size: 20px;
  margin: 10px auto;
  width: 60%;
  text-align: left;
  padding-bottom: 20px;
  color:#003366
}
.p2{
   font-size: 20px;
  margin: 10px auto;
  width: 60%;
  text-align: center;
  padding-bottom: 20px;
  color:#003366
}
.hr{
 padding: 0px 10px;
}
 .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;
  }