/*

 Theme Name:   17absolut

 Theme URI:    http://example.com/twenty-fifteen-child/

 Description:  Twenty Fifteen Child Theme

 Author:       John Doe

 Author URI:   http://example.com

 Template:     twentytwenty

 Version:      1.0.0

 License:      GNU General Public License v2 or later

 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

 Text Domain:  twentyfifteenchild

*/



@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap");



.post-inner {

  padding: 0 !important;

}

.entry-content .fl-builder-content {

  max-width: none !important;

  width: 100% !important;

}



#videoBlock {

  z-index: 1;
  position: relative;

}


#videoBlock .fl-row-content {

  position: relative;

}



#videoFrame {

  background-image: url("http://17absolut.com/wp-content/uploads/2022/07/Film_Frame.png");

  width: 628px;

  height: 335px;

  position: absolute;

  top: 20px;

  right: 19px;

}



#videoFrame h2 {

  position: absolute;

  top: -55px;

  right: 268px;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 200;

  color: white;

  font-size: 31px;

}



#videoDescription h3 {

  position: absolute;

  top: 68px;

  right: 298px;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 400;

  color: white;

  font-size: 30px;

}



#videoDescription span {

  position: absolute;

  top: 100px;

  right: 292px;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 200;

  color: white;

  font-size: 20px;

}



#videoDescription p {

  position: absolute;

  top: 170px;

  right: 228px;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 200;

  color: white;

  font-size: 15px;

}



.platformlinks {

  list-style: none;

  text-decoration: none;

  position: absolute;

  bottom: -33px;

  right: 100px;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 300;

  font-size: 20px;

}



.platformlinks li {

  float: left;

}



.platformlinks a {

  color: white;

}



#newSingle h2 {

  width: 265px;

  background-color: #f9a028;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 200;

  color: white;

  font-size: 31px;

  text-align: left;

  padding: 2px 10px;

  margin: 0px;

}

#sideBlock {
    height: 539px;

  width: 120px;

  background-color: #f9a028;

  float: left;

}

#trackJacket {

  float: left;

  width: 462px;

  margin-left: -65px;

}



#playerBlock h2 {

  width: 300px;

  color: white;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-size: 31px;

  font-weight: 200;

  text-align: left;

  padding: 10px;

  margin: 0px;

}

#player {

  height: 58px;

  width: 380px;

  background-color: purple;

  float: left;

  z-index: 1;

  position: relative;

}

#player-nextTrack {

  height: 58px;

  width: 100%;

  background-color: purple;

  float: left;

  z-index: 1;

  position: relative;

}


#platformsBlock {

  height: 100px;

  width: 300px;

  float: left;

  background-color: #f9a028;

  margin-left: -280px;

  position: relative;

}

#comingSoon {

  clear: both;

  width: 300px;

  margin-top: 50px;

  float: right;

  margin-right: 65px;

}

#trackCover {

  height: 200px;

  width: 200px;

  margin: auto;

}



#comingSoon h3 {

  color: white;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  background-color: purple;

  font-weight: 200;

  font-size: 25px;

  width: 300px;

  margin: 0;

  padding-top: 80px;

  margin-top: -75px;

  text-align: right;

  padding-right: 10px;

  padding-bottom: 5px;

}



#platformsBlock .platformlinks {

  bottom: -34px;

  right: 20px;

}



#playButton, #playButton-nextTrack {

  background-color: #5e005e;

  width: 60px;

  float: left;

}



#playButton i, #playButton-nextTrack i {

  color: white;

  font-size: 50px;

  padding-left: 5px;

  padding-top: 5px;

}

#playButton.playing i::before, #playButton-nextTrack.playing i::before {

  content: "\f28b";

}



#playButton.paused i::before, #playButton-nextTrack.paused i::before {

  content: "\f144";

}



#player .hp_slide {

  width: 320px;

  float: left;

  height: 58px;

}

#player .hp_range {

  width: 0;

  background: black;

  height: 25px;

}

#player #hp_range_highlight {

  height: 58px;

  background: #3b043b;

}




#player-nextTrack .hp_slide {

  width: calc(100% - 60px);
  float: left;

  height: 58px;

}

#player-nextTrack .hp_range {

  width: 0;

  background: black;

  height: 58px;

}

#player-nextTrack #hp_range_highlight {

  height: 58px;

  background: #3b043b;

}




.previousTrackContainer {

  position: relative;

}



.previousTrackJacket {

  width: 100px;

  height: 100px;

  float: left;

  margin-right: 20px;

  position: relative;

}



.previousTrackContainer .previousTrackJacket .overlay {

  background: rgba(234, 0, 255, 0.329);

  position: absolute;

  width: 100px;

  height: 100px;

  display: none;

}



.previousTrackContainer:hover .previousTrackJacket .overlay {

  display: block !important;

}



.previousTrackContainer:hover .previousTrackJacket .hp_range {

  display: block !important;

}



.previousTrackContainer:hover .previousTrackJacket .playButton {

  display: block !important;

}



.previousTrackJacket img {

  border-radius: 5px;

}



.previousTrackInfo h3 {

  color: purple;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 300;

  font-size: 25px;

  margin: 0;

}



.previousTrackInfo p {

  color: purple;

  font-family: "Oswald", sans-serif;

  text-transform: uppercase;

  font-weight: 200;

  font-size: 15px;

  margin: 0;

}



.previousTrackContainer .platformlinks {

  bottom: -85px;

  right: 10px;

}



.previousTrackContainer .hp_slide {

  position: absolute;

  width: 100%;

  height: 100px;

  z-index: 2;

}

.previousTrackContainer .hp_range {

  display: none;

  position: absolute;

  width: 0;

  background: #2d023db3;

  height: 100px;

}



.previousTrackContainer .playButton {

  display: none;

  position: absolute;

  left: 18%;

  width: 60px;

  top: 20px;

  z-index: 3;

}



.previousTrackContainer .playButton i {

  color: white;

  font-size: 50px;

  padding-left: 5px;

  padding-top: 5px;

}

.previousTrackContainer .playButton.playing i::before {

  content: "\f28b";

}



.previousTrackContainer .playButton.paused i::before {

  content: "\f144";

}


#countdown{

  font-family: "Oswald", sans-serif;

}

#countdown .fl-countdown-unit-number{

  font-size:44px !important;

}

#countdown .fl-countdown-unit-label{

  font-size:20px !important;

}


/************************************       PopUp     *********************************************/



.overlay {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity 500ms;

  visibility: hidden;

  opacity: 0;

  z-index: 1000000;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}



.popup {

  margin: 70px auto;

  padding: 20px;

  background: rgb(197 58 58);

  border-radius: 5px;

  width: 30%;

  position: relative;

  transition: all 5s ease-in-out;

  background-image: url("http://localhost/17absolut/wp-content/uploads/2022/07/Demon_Icon_opaque.png");

  background-size: cover;

  background-position: center;

  z-index: 10000;

}



.popup h2 {

  margin-top: 0;

  text-align: center;

  color: #802222;

  font-family: "Oswald", sans-serif;

}



.popup h2 img {

  width: 20px;

}



.popup h2 span:before {

  content: "";

  width: 50px;

  height: 60px;

  background-image: url("http://localhost/17absolut/wp-content/uploads/2022/07/DemonHead_Outlines_Full_Red.png");

}



.popup .close {

  position: absolute;

  top: 20px;

  right: 30px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: bold;

  text-decoration: none;

  color: purple;

}

.popup .close:hover {

  color: #f9a028;

}

.popup .content {

  max-height: 30%;

  overflow: auto;

}



label {

  font-family: "Oswald", sans-serif;

  color: #501818;

  font-size: 20px;

}



.wpcf7-submit {

  background-color: #f9a028 !important;

  float: right;

}



input,

textarea {

  background-color: #fbfbfb !important;

}

.prevTrackContainer{
background:#f9a028;
border-radius:7px;
margin-bottom: 9px;
}


/********************************  Desktop - exclusive **********************************/

@media screen and (min-width: 1065px) {

    #videoBlock iframe {
    width: 560px !important;
    height: 315px !important;
    z-index: 1;
    position: relative;
    }

}

/********************************   Big Phone - Version   ***********************************/



@media screen and (max-width: 1064px) {

  #menu-navigation-2{

    display: block;
    background-color: black;

  }

  #newTrackBloc {

    width: 100%;

  }



  #sideBlock {

    display: none;

  }



  #trackJacket {

    width: 100%;

    height: auto;

    float: none;

    margin: 0;

  }



  #trackJacket img {

    width: 100%;

  }



  #player {

    height: 58px;

    width: 100%;

    background-color: purple;

    float: none;

    position: relative;

  }



  #player .hp_slide {

    width: 100%;

    float: none;

    height: 58px;

  }


  #videoBlock h2{

  top: -35px;
  left: 106px;
  position:initial !important;
  display:none !important;
  }

 
  #videoFrame{

   width: 100%;
   height: 156px;
   padding: 0 15% 0 15%;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position-y: center;
   position: initial !important;
  }

  #videoBlock iframe{

  width: 100% !important;
  z-index: 1;
  position: relative;
  }


  #videoDescription h3{

  top: 320px;
  left: 100px;
  margin: 30px 0 5px 0;
  font-size: 57px;
  position: initial !important;

  }


  #videoDescription span{

  top: 362px;
  left: 162px;
  position: initial !important;
  font-size: 38px;
  margin-right: 8px;
  }

 #videoDescription p{
 
 position: initial !important;
 top: 368px;
 right: 301px;
 font-family: "Oswald", sans-serif;
 text-transform: uppercase;
 font-weight: 200;
 color: white;
 font-size: 28px;
 display: inline-block;
 }


  #videoFrame .platformlinks{

  bottom: -15px;
  right: 166px;
  position: absolute;
  font-size: 30px;

  }


  #tracksContainer h2 span {

  font-size: 30px
  }



  #platformsBlock {

    margin: 0;

    width: 100%;

    height: 50px;

    float: none;

  }



  #platformsBlock .platformlinks {

    position: static;

    margin: 0;

    display: flex;

    justify-content: flex-end;

    font-size: 30px;

  }



  #platformsBlock .platformlinks li {

    margin-top: -1px;

  }



  #comingSoon {

    clear: both;

    width: 100%;

    margin-top: 50px;

    float: none;

    margin-right: 0;

  }



  #trackCover {

    height: auto;

    width: 100%;

    margin: auto;

  }



  #trackCover img {

    width: 100%;

    margin: auto;

  }



  #tracksContainer .fl-col {

    margin-bottom: 12px;

    width: 90% !important;

  }



  .previousTrackContainer .platformlinks {

    bottom: 0;

    right: 0;

    position: static;

    display: flex;

    flex-wrap: wrap;

    font-size: 30px;

    align-content: center;

    flex-direction: row;

    justify-content: space-evenly;

  }

   #nextTrackBloc{
    width: 80%;
    margin-left: 10%;
  }

  #nextTrackBloc .platformlinks{
   position:absolute;
   top:139%;
   right:1%;

  }

  #topSpot .platformlinks{
   bottom:10%;
  }


  .previousTrackInfo {

    margin-bottom: -29px;

  }


  #headerCustomBlock .fl-col-content {

    display: flex;

  }



  #menuCustomSocial {

    right: 0;

  }



  #menuCustomSocial,

  #menuCustomPrincipal {

    z-index: 1000;

    position: fixed;

    background: black;

    height: 55px;

    top: 0px;

  }



  #menuCustomPrincipal .fl-node-content {

    margin: 20px 0;

    margin-top: 5px;

  }



  #menuCustomSocial .fl-node-content {

    margin-left: 0;

    margin-top: 5px;

  }



  #menu-socials-1 {

    width: 100%;

    margin-right: 0;

  }



  #menu-socials-1 li {

    font-size: 24px;

    float: left;

    margin-right: -12px;

  }



  .box {

    width: 70%;

  }

  .popup {

    width: 95%;

  }

}

#countdown{

  margin:-30px 10px -30px -44px;


}

.fl-countdown{

  width:110%;

}

/*********************************************************** LapTop - Version ************************************************************/

@media screen and (max-width: 899px) {

  #videoFrame .platformlinks{

  bottom: -15px;
  right: 146px;
  position: absolute;
  font-size: 25px;

  }

  #videoDescription h3{

    top: 320px;
    left: 100px;
    margin: 30px 0 5px -23px;
    font-size: 57px;
    position: initial !important;
  
  }

  #videoDescription span{

    top: 362px;
    left: 162px;
    position: initial !important;
    font-size: 38px;
    margin-right: 8px;
    margin-left:-23px;
  }

}

/*********************************************************** Tablet - Version ************************************************************/
@media screen and (max-width: 768px) {

  #videoFrame{
    background-image:url("http://17absolut.com/wp-content/uploads/2023/07/Demon_Iconic_Dual_W25.png");
    background-color:none;
    background-size: contain;
    background-position: center;
    display: flex;
    padding: 0px 8% 0 8%;
    margin-bottom: -33px;
    flex-direction: column;
    height:auto;
  }

  #videoFrame .platformLinks-container{
    align-self:flex-end;
  }

  #videoFrame .platformlinks{

  bottom: unset;
  right: unset;
  position: static;
  display:inline-block;
  font-size: 25px;
  margin-bottom:0;

  }

  #videoDescription h3{

    top: 320px;
    left: 100px;
    margin: 28px 0 5px 0;
    font-size: 57px;
    position: initial !important;
  
  }

  #videoDescription span{

    top: 362px;
    left: 162px;
    position: initial !important;
    font-size: 38px;
    margin-right: 1%;
    margin-left: 1%;
  }

   #nextTrackBloc{
    width: 80%;
    margin:auto;
  }

  #nextTrackBloc .platformlinks{
   position:absolute;
   top:139%;
   right:1%;

  }

  #topSpot .platformlinks{
   position: static;
   padding-right: 3%;
  }

}

/************************************** iPhone 12 pro ****************************************/

@media screen and (max-width: 391px) {

  #videoDescription h3{

    font-size: 39px;
  
  }

  #videoDescription span{
    font-size: 24px;
  }

  #videoDescription p{
  
    font-size: 16px;
  } 

  #nextTrackBloc{
   margin : 0 2% 0 2%;
 }

 #topSpot .platformlinks{
   position: absolute;
   top: 12%;
   right: 2%;
 } 

 .previousTrackContainer .platformlinks{
   position: absolute;
   top: 152%;
   right: 1%;

 }

}