* {
  padding: 0;
  margin: 0;
}


body {
  font-family: normal;
  font-size: 15pt;
  background-repeat: no-repeat;
  position: relative;
  background: var(--background-colord);

}



.download-container{
  background: none ;
  width: 648px;
  height: 740px;
  position: absolute ;
  display: block ;
}

/**download **/

.download-container .download-sample{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 16%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-sample h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
}
.download-sample .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-sample .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex ;
align-items: center ;
justify-content: center ;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-sample .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-sample .section .free a:hover::before {
  transform: scaleX(1);
  
}
.download-sample .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-sample .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-sample .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

/**download **/

.download-container .download-dwp{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 33%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-dwp h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
  
}


.download-container .download-music {
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute;
  top: 50%;
  border-radius: 0px 20px 0px 0px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 -5px 5px rgba(0, 0, 0, 0.1);
}

.download-container .download-music h3 {
  font-weight: 300;
  font-size: 1em;
  color: var(--header);
  padding-left: 15px;

}


.download-music .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-music .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-music .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-music .section .free a:hover::before {
  transform: scaleX(1);
}
.download-music .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-music .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-music .section .pay a:hover::before {
  transform: scaleX(1);
}

/**/

.download-dwp .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-dwp .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-dwp .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-dwp .section .free a:hover::before {
  transform: scaleX(1);
}
.download-dwp .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-dwp .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-dwp .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

/**download **/

.download-container .download-vid{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 67%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-vid h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
  
}
.download-vid .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-vid .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-vid .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-vid .section .free a:hover::before {
  transform: scaleX(1);
}
.download-vid .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-vid .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-vid .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

.down-section{
  display: none ;
  overflow: hidden ;
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 648px;
  height: 500px;
  position: fixed ;
  border: 1px solid darkred;
  top: 12%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),0 -2px 5px rgba(0, 0, 0, 0.1);
}
.down-section .cancel {
  width: 100%;
  text-align: right;
}
.cancel h1{
  font-size: 3.6em ;
  font-weight: 200;
  padding-right: 20px;
}
.cancel h1 a{
  text-decoration: none ;
  color: var(--header) ;
  cursor: none;
}
.down-section .down-cont{
  margin-top: 24px ;
  width: 100% ;
  height: 60px ;
  min-height: 400px;
  overflow-y: auto ;
  
}

.down-list{
  width: 100% ;
  display: flex ;
  align-items: center ;
  border-bottom: 1px solid black ;
  overflow: hidden ;
}
.down-list a{
  text-decoration: none;
  width: 100% ;
  display: flex ;
  align-items: center ;
  cursor: pointer ;
}
.down-list .image{
  padding: 1px;
  padding-left: 20px;
  padding-right: 20px;
}

.down-list .image img{
  width: 60px ;
}
.down-li .text{
  display: flex ;
}
.down-list .text h1{
  font-size: 1.3em ;
  font-weight: 400;
  color: var(--header);
}
.down-list .text h3 {
  font-size: 1em;
  font-weight: 300;
  color: var(--fo);
  
}

.conclusion {
  display: none;
  justify-content: center ;
  align-items: center ;
  position: absolute ;
  background: var(--background-image);
  width: 100%;
  height: 60px;
  top: 140%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.conclusion h4 {
  color: var(--header);
  font-weight: 400;
  font-size: 0.7em ;
  border-bottom: 1px solid var(--header);
}
.down-cont h2{
  font-size: 1em ;
  position: fixed ;
  width: 200px;
  top: 3%;
  padding: 0px ;
  padding-left: 30px;
  color: var(--header);
}
.love{
  background: var(--header1);
  display: flex ;
}
.love h2{
  font-size: 1em;
  position: fixed;
  width: 200px;
  top: 3%;
  padding: 0px;
  padding-left: 30px;
  color: var(--header);
}









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


body {
  font-family: normal;
  font-size: 9pt;
  background-repeat: no-repeat;
  min-height: 100vh;

}

.download-container{
  width: 100%;
  height: 740px;
  position: absolute ;
  display: block ;
}

/**download **/

.download-container .download-sample{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 16%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-sample h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
}
.download-sample .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-sample .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex ;
align-items: center ;
justify-content: center ;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-sample .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-sample .section .free a:hover::before {
  transform: scaleX(1);
  
}
.download-sample .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-sample .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-sample .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

/**download **/

.download-container .download-dwp{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 33%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-dwp h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
  
}


.download-container .download-music {
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute;
  top: 50%;
  border-radius: 0px 20px 0px 0px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 -5px 5px rgba(0, 0, 0, 0.1);
}

.download-container .download-music h3 {
  font-weight: 300;
  font-size: 1em;
  color: var(--header);
  padding-left: 15px;

}


.download-music .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-music .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-music .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-music .section .free a:hover::before {
  transform: scaleX(1);
}
.download-music .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-music .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-music .section .pay a:hover::before {
  transform: scaleX(1);
}

/**/

.download-dwp .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-dwp .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-dwp .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-dwp .section .free a:hover::before {
  transform: scaleX(1);
}
.download-dwp .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-dwp .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-dwp .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

/**download **/

.download-container .download-vid{
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100px;
  position: absolute ;
  top: 67%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.download-container .download-vid h3{
  font-weight: 300;
  font-size: 1em ;
  color: var(--header);
  padding-left: 15px ;
  
}
.download-vid .section {
  width: 100%;
  position: absolute ;
  height: 60px;
  
}
.download-vid .section .free a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center ;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 19%;
  left: 0%;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-vid .section .free a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-vid .section .free a:hover::before {
  transform: scaleX(1);
}
.download-vid .section .pay a{
  text-decoration: none ;
  position: absolute ;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  top: 64%;
  left: 0%;
  text-align: center ;
  color: var(--header) ;
  font-weight: 400;
  font-size: 1em ;
}
.download-vid .section .pay a::before{
  content: '';
  background: var(--header);
  position: absolute;
  top: 90%;
  left: 0%;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  transform: scaleX(0);
  transition: 0.5s;
}
.download-vid .section .pay a:hover::before {
  transform: scaleX(1);
}
/** end down**/

.down-section{
  display: none ;
  overflow: hidden ;
  background: var(--background-image);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 500px;
  position: fixed ;
  border: 1px solid darkred;
  top: 30%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),0 -2px 5px rgba(0, 0, 0, 0.1);
}
.down-section .cancel {
  width: 100%;
  text-align: right;
}
.cancel h1{
  font-size: 3.6em ;
  font-weight: 200;
  padding-right: 20px;
}
.cancel h1 a{
  text-decoration: none ;
  color: var(--header) ;
  cursor: none;
}
.down-section .down-cont{
  margin-top: 24px ;
  width: 100% ;
  height: 60px ;
  min-height: 400px;
  overflow-y: auto ;
  
}

.down-list{
  width: 100% ;
  display: flex ;
  align-items: center ;
  border-bottom: 1px solid black ;
  overflow: hidden ;
}
.down-list a{
  text-decoration: none;
  width: 100% ;
  display: flex ;
  align-items: center ;
  cursor: pointer ;
}
.down-list .image{
  padding: 1px;
  padding-left: 20px;
  padding-right: 20px;
}

.down-list .image img{
  width: 60px ;
}
.down-li .text{
  display: flex ;
}
.down-list .text h1{
  font-size: 1.3em ;
  font-weight: 400;
  color: var(--header);
}
.down-list .text h3 {
  font-size: 1em;
  font-weight: 300;
  color: var(--fo);
  
}

.conclusion {
  display: flex;
  justify-content: center ;
  align-items: center ;
  position: absolute ;
  background: var(--background-image);
  width: 100%;
  height: 60px;
  top: 140%;
  border-radius: 0px 20px 0px 0px ;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 -5px 5px rgba(0, 0, 0, 0.1);
}
.conclusion h4 {
  color: var(--header);
  font-weight: 400;
  font-size: 0.7em ;
  border-bottom: 1px solid var(--header);
}
.down-cont h2{
  font-size: 1em ;
  position: fixed ;
  width: 200px;
  top: 3%;
  padding: 0px ;
  padding-left: 30px;
  color: var(--header);
}
.love{
  background: var(--header1);
  display: flex ;
}
.love h2{
  font-size: 1em;
  position: fixed;
  width: 200px;
  top: 3%;
  padding: 0px;
  padding-left: 30px;
  color: var(--header);
}
}