@charset "UTF-8";
@import url("styles2.css");
/* CSS Document */

.container-fluid{
	padding: 0px !important;
	margin: 0px !important;
}
body {
  background-color: #8384B9;
  color: #D4CDFD;
  font-family: 'Roboto', sans-serif;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  color: white;
  font-family: 'Teko', sans-serif;
  padding: 20px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  padding: 30px;
  display: block;
  margin: 0 auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #3F3A64;
}
ul.bodyul {
  style: none;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li .color {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li .sound {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li .worlds {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li .logo {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  align-content: center;
}
.logo {
  margin-top: -50px;
  z-index: 10000;
}
.logo img {
  width: 100px;
  animation: myAnim 2s ease 0s 1 normal forwards;
}
@keyframes myAnim {
  0%, 100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
.row {
  margin-right: 0px;
  margin-left: 0px;
}
.mainheader {
  padding: 0px;
  z-index: 10;
}
.col-lg-12 {
  padding: 0;
}
.nav a {
  text-decoration: none;
}
.LightBlue:hover, .LightBlue.active {
  color: #7EA8DA;
}
.LightPink:hover, .LightPink.active {
  color: #F9C4D8;
}
.Yellow:hover, .Yellow.active {
  color: #FDF8C0;
}
.Mint:hover, .Mint.active {
  color: #A9D8C7;
}
.footer {
  background: #3F3A64;
  padding: 40px;
}
.footer a {
  text-decoration: none;
  color: white;
}
.footer a:hover {
  color: white;
}
ul.bodyul {
  background: none;
  margin-bottom: 25px;
}
.banner {
	padding-left: 65px;
	padding-bottom: 50px;
	
}

.bannerdd {
	padding-left: 140px;
}

.color {
	margin-left: 100px;
}

.centered {
	text-align: center;
}

.stars {
	padding: 30px 100px 30px 130px;
}
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}
/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	ul.bodyul {
  background: none;
  margin-bottom: 25px;
}
}
/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}
/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}