*{
    font-family: 'Rajdhani', sans-serif;
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
    box-shadow: none;
}
/*icon hover*/
.fa-facebook:hover {
  color: #3b5998;
}
.column1 {
     background: -moz-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(32,65,128,1)), color-stop(100%, rgba(48,197,244,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ie10+ */
    background: linear-gradient(145deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204180', endColorstr='#30C5f4',GradientType=0 ); /* ie6-9 */
padding-bottom: 0.3%;
}
.column2 {
  background-color: white;
}
#hv:hover{
  color: #235b93 !important;
  width:100%;
  height: 32px;
}#hv2:hover{
  color:  #ffffff !important;
  width:100%;
  height: 32px;
}#hv3:hover{
  color: #ffffff !important;
  width:100%;
  height: 32px;
}
.gr-fonts {
	color: white;
}
.card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.25s cubic-bezier(0.2, 0.7, 0.4, 1);
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.4, 1);
}

.card-panel {
    transition: box-shadow .25s;
    padding: 24px;
    margin: -1.5rem 0 1rem 0;
    border-radius: 12px;
}
.teal {
	background-color: white !important;
}
.rows{ margin-bottom: auto; }
nav ul a
{
padding: 2.2em 15px;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

.view {
  position: absolute;
  top: 24%;
  left: 23%;
  right: 0;
  bottom: 0;
  -webkit-perspective: 400;
          perspective: 400;
}

.plane {
  width: 150px;
  height: 150px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.plane.main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotateX(60deg) rotateZ(-30deg);
          transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotate 20s infinite linear;
          animation: rotate 20s infinite linear;
}
.plane.main .circle {
  width: 150px;
  height: 150px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 20px white, inset 0 0 20px white;
}
.plane.main .circle::before, .plane.main .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: white;
  box-sizing: border-box;
  box-shadow: 0 0 60px 2px white;
}
.plane.main .circle::before {
  -webkit-transform: translateZ(-190px);
          transform: translateZ(-190px);
}
.plane.main .circle::after {
  -webkit-transform: translateZ(190px);
          transform: translateZ(190px);
}
.plane.main .circle:nth-child(1) {
  -webkit-transform: rotateZ(72deg) rotateX(63.435deg);
          transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
  -webkit-transform: rotateZ(144deg) rotateX(63.435deg);
          transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
  -webkit-transform: rotateZ(216deg) rotateX(63.435deg);
          transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
  -webkit-transform: rotateZ(288deg) rotateX(63.435deg);
          transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
  -webkit-transform: rotateZ(360deg) rotateX(63.435deg);
          transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
}
<--!end of front banner animation!-->
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
.view {
  position: absolute;
  top: 24%;
  left: 23%;
  right: 0;
  bottom: 0;
  -webkit-perspective: 400;
          perspective: 400;
}

.plane {
  width: 150px;
  height: 150px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.plane.main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotateX(60deg) rotateZ(-30deg);
          transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotate 20s infinite linear;
          animation: rotate 20s infinite linear;
}
.plane.main .circle {
  width: 150px;
  height: 150px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 20px white, inset 0 0 20px white;
}
.plane.main .circle::before, .plane.main .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: white;
  box-sizing: border-box;
  box-shadow: 0 0 60px 2px white;
}
.plane.main .circle::before {
  -webkit-transform: translateZ(-190px);
          transform: translateZ(-190px);
}
.plane.main .circle::after {
  -webkit-transform: translateZ(190px);
          transform: translateZ(190px);
}
.plane.main .circle:nth-child(1) {
  -webkit-transform: rotateZ(72deg) rotateX(63.435deg);
          transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
  -webkit-transform: rotateZ(144deg) rotateX(63.435deg);
          transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
  -webkit-transform: rotateZ(216deg) rotateX(63.435deg);
          transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
  -webkit-transform: rotateZ(288deg) rotateX(63.435deg);
          transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
  -webkit-transform: rotateZ(360deg) rotateX(63.435deg);
          transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

}

.buttons #play {
 float: left;
 margin-right: 20px;
 width: 50px;
 height: 50px;
 cursor: pointer;

 }
buttons #play:hover {
   outline: 1px solid #84bd21;


  }

.buttons #play {
 background: background: -moz-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ff3.6+ */
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(32,65,128,1)), color-stop(100%, rgba(48,197,244,1))); /* safari4+,chrome */
     background: -webkit-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* safari5.1+,chrome10+ */
     background: -o-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* opera 11.10+ */
     background: -ms-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ie10+ */
     background: linear-gradient(145deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* w3c */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204180', endColorstr='#30C5f4',GradientType=0 ); /* ie6-9 */

 text-align: center;
 -webkit-transition: width 0.5s ease-in-out;
 -moz-transition: width 0.5s ease-in-out;
 -ms-transition: width 0.5s ease-in-out;
 transition: width 0.5s ease-in-out; }

 .buttons #play:hover {
   width: 100%;
   background: background: -moz-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ff3.6+ */
       background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(32,65,128,1)), color-stop(100%, rgba(48,197,244,1))); /* safari4+,chrome */
       background: -webkit-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* safari5.1+,chrome10+ */
       background: -o-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* opera 11.10+ */
       background: -ms-linear-gradient(305deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* ie10+ */
       background: linear-gradient(145deg, rgba(32,65,128,1) 0%, rgba(48,197,244,1) 100%); /* w3c */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204180', endColorstr='#30C5f4',GradientType=0 ); /* ie6-9 */
     }

     svg {
     	display: block;
     	margin: 15% auto;
     	animation: rotate 200s infinite linear;
     }

     @keyframes rotate {
     	0%   { transform: rotate(0deg); }
     	100% { transform: rotate(360deg); }
     }
.anim-banner{
    border: 0;
    margin-top: -94%;
}
 .buttons #play button {
     text-decoration: none;
   font-size: 1.4em;
   display: block;
   line-height: 50px;
   opacity: 0;
   -webkit-transition: opacity 0.3s linear;
   -moz-transition: opacity 0.3s linear;
   -ms-transition: opacity 0.3s linear;
   transition: opacity 0.3s linear; }
   .buttons #play a:hover {
     opacity: 1; }
#footer{display:inline; float:left; width:100%; margin-bottom:20px}
.footer_top{background-color:#252525; color:#ddd; display:inline; float:left; padding:10px 30px 48px; width:100%}
.footer_widget{display:inline; float:left; width:100%; min-height:310px}
.footer_widget > h2{border-bottom:3px solid #666; font-family:Oswald,arial,Georgia,serif; font-size:16px; padding:10px 0; text-transform:uppercase}
.footer_bottom{float:left; display:inline; width:100%; padding:10px 30px; background-color:#303030; color:#ccc}
nav ul a.btn, nav ul a.btn-large, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating {
    margin-top: 38px !important;
    margin-left: 15px;
    margin-right: 15px;
}
.btn:hover, .btn-large:hover {
    background-color: #ffffff;
    color: #000;
}