/************************  

Realease CSS File

*/

/*Custom Variables*/
:root {
  --primary-color: rgb(110, 105, 185);
  --secondary-color: rgb(121, 113, 234);
  --dark-color: rgb(18, 19, 24);
  --light-dark-color: rgb(25, 27, 39);
}

/*General*/
html {
  width: 100%;
}
body {
  background: var(--dark-color);
  font-size: 16px;
  color: white;
  overflow-x: hidden;
  width: 100%;
  font-family: "Source Sans Pro";
}

/*Utility Classes*/
.bg-light-dark{
  background-color:  var(--light-dark-color);
}
.active {
  color: var(--primary-color);
}



/*********************************************************************************************
                                          NAVIGATION BAR
**********************************************************************************************/
.navbar-dark .navbar-nav .nav-link {
  color: white;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary-color);
}
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--primary-color);
}

        /*BUTTONS*/
.btn-sign {
  color: white;
  border: 2px solid var(--primary-color);
}
.btn-sign:hover {
  color: var(--primary-color);
}
.btn-primary {
  background-color: var(--primary-color);
  border: solid var(--primary-color);
}
.btn-primary:hover {
  background-color: var(--secondary-color);
  border: solid var(--secondary-color);
}

/* 
/////////////////////////////////// Hero
*/
header .hero{
  overflow: hidden;
  width: 100%;
  height: 78vh;
  background: url(/assets/img/Rectangle\ 7.png) no-repeat;
  background-size: cover;
  padding-top: 160px;
}

header .hero .hero-content{
  padding-top: .6rem;
}



/*********************************************************************************************
                                          FOOTER
**********************************************************************************************/
footer {
  margin-top: 3.3rem;
}

/* footer ul {
  list-style: none;
  padding: 0;
}
footer ul li a {
  font-size: 13px;
  text-decoration: none;
  color: white;
}
footer ul li a:hover {
  text-decoration: none;
  color: var(--primary-color);
}
footer ul li {
  text-align: center;
  padding: 0;
}
footer i {
  color: var(--primary-color);
}
hr {
  background: white;
}

@media screen and (max-width: 400px) {
  footer ul li a {
    font-size: 11px;
  }
} */


/*Don't touch this file if it was not assigned to you, I'm warning you!!!!!!!!!!!!!!!*/


/*********************************************************************************************
                                          RELEASES PAGE HERO SECTION
**********************************************************************************************/
/* #releases-hero {
  background-image: url('../../assets/img/Rectangle 7.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  /* padding-top: 16vh;
  padding-bottom: 16vh; */
  /* width: 100%; */
  /* height: 70vh; */
/* } */
/* .releases-hero__content {
  width: 80%;
} */


/*********************************************************************************************
                                          NEW RELEASES SECTION
**********************************************************************************************/
.releases-new {
  margin-bottom: 2rem;
}
.releases-new img{
  height: 250px;
  width: 100%;
  object-fit: cover;
  position: relative;
}
.releases-new h6,.releases-new p, .releases-new .fa-play{
  position: absolute;
  top: 180px;
  left: 40px;
}
.releases-new .fa-play {
  top: 130px;
  left: 22px;
}
.releases-new--2 h6, .releases-new--2 p {
  left: 20px;
}
.releases-new p {
  top: 200px;
  font-weight: 300;
}

/*********************************************************************************************
                                          POPULAR RELEASES SECTION
**********************************************************************************************/
.releases-popular-content {
  background-color: var(--light-dark-color);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.releases-popular-content p {
  margin-bottom: 0.4rem;
}

/*********************************************************************************************
                                          SUBSCRIBE SECTION
**********************************************************************************************/
.form-control, .form-control:focus{
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  border-radius: 0;
  width: 75%;
  color: white;
}
@media screen and (max-width: 400px) {
  .form-control, .form-control:focus{
    width: 100%;
  }
}