body {
    background-image: url("bg.png");
    background-size: 100%;
    background-attachment: fixed;
    font-family: verdana;
    color: white;
}

a {
    color: white;
}

a:hover {
    color: #BA83CE;
}

.header {
    float: left;
    width: 100%;
    background-color: black;
    color: white;
}

.header a {
    color: white;
    text-decoration: none;
}

.header a:hover {
    color: #BA83CE;
}

.social {
    float: left;
    width: 25%;
    text-align: center;
    padding: 13px 0;
}

@media screen and (max-width: 600px) {
  .social {
    width: 100%;
  }
}

.social i {
    font-size: 25px;
    margin: 0 20px;
}

.mic {
    float: left;
    width: 5%;
    height: 50px;
    text-align: center;
}

@media screen and (max-width: 600px) {
  .mic {
    display: none;
  }
}

.mic img {
    height: 100%;
}

.nav {
    float: left;
    width: 45%;
    text-align: center;
    padding: 16px 0;
}

@media screen and (max-width: 600px) {
  .nav {
    width: 100%;
  }
}

.nav a {
    margin: 0 20px;
}

@media screen and (max-width: 600px) {
  .nav a {
    display: block;
    background-color: #BA83CE;
    margin: 10px 0;
    padding: 5px 0;
  }
  
  .nav a:hover {
    color: black;
  }
}

.login_register {
    float: left;
    width: 25%;
    text-align: center;
    padding: 16px 0;
}

@media screen and (max-width: 600px) {
  .login_register {
    width: 100%;
  }
}

.login_register a {
    margin: 0 20px;
}

@media screen and (max-width: 600px) {
  .login_register a {
    padding: 0 25px;
  }
}

.banner {
    float: left;
    width: 100%;
    margin-top: 25px;
}

.logo {
    float: left;
    width: 25%;
    padding: 40px 0;
}

@media screen and (max-width: 600px) {
  .logo {
    width: 100%;
  }
}

.logo img {
    width: 100%;
    height: auto;
}

.iframe {
    float: left;
    width: 50%;
}

@media screen and (max-width: 600px) {
  .iframe {
    width: 100%;
  }
}

.iframe iframe {
    width: 100%;
    height: 360px;
}

.para {
    float: left;
    width: 25%;
    text-align: center;
    padding: 60px 0;
}

@media screen and (max-width: 600px) {
  .para {
    width: 100%;
  }
}

.para p {
    font-size: 30px;
}

.para span {
    background-color: #BA83CE;
}

.plan_recentvideos {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 25px;
}

.plan {
    float: left;
    width: 50%;
}

@media screen and (max-width: 600px) {
  .plan {
    width: 100%;
  }
}

.plan h1 span {
    color: #BA83CE;
}

.plan_container {
    float: left;
    width: 100%;
    background-color: #BA83CE;
    border-radius: 50px;
    padding: 25px 0;
}

.plan_container div {
    float: left;
    width: 40%;
    margin: 0 5%;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50px;
}

.plan_container a {
    background-color: #BA83CE;
    padding: 5px 20px;
    text-decoration: none;
    color: white;
}

.plan_container a:hover {
    background-color: black;
}

.plan_type {
    background-color: green;
}

.tickmark {
    color: rgb(0,255,0);
}

.recent_videos {
    float: left;
    width: 50%;
}

@media screen and (max-width: 600px) {
  .recent_videos {
    width: 100%;
  }
}

.recent_videos span {
    color: #BA83CE;
}

.notification {
    float: left;
    width: 100%;
    background-color: #BA83CE;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 10px;
}

.notification input {
    width: 25%;
}

.sitemap {
    float: left;
    width: 100%;
    background-color: black;
    text-align: center;
}

.sitemap a {
    color: white;
    text-decoration: none;
}

.sitemap a:hover {
    color: #BA83CE;
}

.sitemap div {
    float: left;
    width: 25%;
}

@media screen and (max-width: 600px) {
  .sitemap div {
    width: 100%;
  }
}

.footer {
    float: left;
    width: 100%;
    background-color: #BA83CE;
    text-align: center;
}

.about {
    float: left;
    width: 50%;
    margin: 0 25%;
}

.about h1 {
    text-align: center;
}

.about span {
    color: #BA83CE;
}

.contact {
    float: left;
    width: 50%;
    margin: 0 25%;
    text-align: center;
}

.login_register_form {
    float: left;
    width: 50%;
    margin: 100px 25%;
    border: 1px solid #BA83CE;
}

@media screen and (max-width: 600px) {
    .login_register_form {
        float: left;
        width: 100%;
        margin: 0;
        border: 1px solid #BA83CE;
    }
}

.login_register_form h2, h3, input, label {
    width: 50%;
    height: 35px;
    margin: 0 25%;
}

.login_register_form img {
    margin: 0 25%;
}

@media screen and (max-width: 600px) {
    .login_register_form h2, input, label {
        width: 100%;
        height: 35px;
        margin: 0;
    }
}

.login_register_form a {
    color: white;
}

.login_register_form a:hover {
    color: #BA83CE;
}

.btn {
    text-decoration: none;
    background-color: #BA83CE;
    color: white;
    padding: 5px 10px;
}

.btn:hover {
    background-color: black;
}

.demo {
    display: none;
}