*{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
h2{
  text-align: justify;
   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;
}
p{
  text-align: center;
  padding: 10px 0px;
}
.clear{
  clear: both;
}
.p1{
   font-size: 20px;
  margin: 10px auto;
  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
}
.pside{
 font-size: 20px;
  margin: 10px auto;
  text-align: left;
  padding-bottom: 20px;
  color:#00CCFF !important;
}
.pside-r{
 font-size: 20px;
  margin: 10px auto;
  text-align: left;
  padding-bottom: 20px;
  color:#CC00CC!important;
}
.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;
     padding-left: 40px;
      padding-top: 30px;
       font-size:20px;
  }
  .ftmarquee{
    color: #FFCC00 !important;
    margin-top: 10px;
    padding-top:30px;
    font-size:28px;
  }
  .marquee{
    color: #FFFFFF;
   width: 350;
   display: block;
   overflow: auto;
  }
   .marquee-div{
    width: 350px;
    text-align: center;
     margin: 0px auto;
  }
.column {
  float: left;
  padding: 5px;
  margin-left: 2%;
}
/* Left and right column */
.column.side {
  width: 15%;
}
/* Middle column */
.column.middle {
  width: 60%;
  box-shadow: 0 10px 10px -6px #003333;
}
.row{
  margin: 0px auto;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 .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;
  }
@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {float: none;}
 .column.side, .column.middle {
    width: 100%;
  }
}
@-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%;
  }
}
.clear{
  clear: both;
}
.p2{
   font-size: 20px;
  margin: 10px auto;
  width: 60%;
  text-align: center;
  padding-bottom: 20px;
  color:#003366
}
/* Style the footer */
.footer {
  width: 95% !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{
 margin: 35px auto;
 color: #FFCC00;
  font-size:28px;
}
.pside{
  text-align: left;
  color: #FF0099;
}
.pside2{
 color: #333399;
 font-size: 18px;
}
.pside3{
 color: #66CC00;
 font-size: 18px;
 text-align: left;
}
 h5{
   color: blue;
   font-size: 14px;
 }