/*
SALAR-MA
Version 1.0
by Hamid Shavarean Studio
License: MIT License http://hamidshavarean.mit-license.org/
*/

@import 'reset.css';
@import 'responsive.gs.24col.css';
@import 'micromodal.css';

@font-face {
	font-family: Kara;
	src: url("../fonts/SGKara-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/SGKara-Light.woff2") format("woff2"), url("../fonts/SGKara-Light.woff") format("woff"), url("../fonts/SGKara-Light.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Kara;
	src: url("../fonts/SGKara-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SGKara-Regular.woff2") format("woff2"), url("../fonts/SGKara-Regular.woff") format("woff"), url("../fonts/SGKara-Regular.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
    font-family: Adieu;
    src: url('../fonts/AdieuRegular.eot');
    src: url('../fonts/AdieuRegular.eot') format('embedded-opentype'),
         url('../fonts/AdieuRegular.woff2') format('woff2'),
         url('../fonts/AdieuRegular.woff') format('woff'),
         url('../fonts/AdieuRegular.ttf') format('truetype'),
         url('../fonts/AdieuRegular.svg#AdieuRegular') format('svg');
         font-weight:normal;
}

@font-face {
    font-family: Adieu;
    src: url('../fonts/AdieuBold.eot');
    src: url('../fonts/AdieuBold.eot') format('embedded-opentype'),
         url('../fonts/AdieuBold.woff2') format('woff2'),
         url('../fonts/AdieuBold.woff') format('woff'),
         url('../fonts/AdieuBold.ttf') format('truetype'),
         url('../fonts/AdieuBold.svg#AdieuBold') format('svg');
         font-weight:bold;
}

@font-face {
    font-family: Adieu;
    src: url('../fonts/AdieuBlack.eot');
    src: url('../fonts/AdieuBlack.eot') format('embedded-opentype'),
         url('../fonts/AdieuBlack.woff2') format('woff2'),
         url('../fonts/AdieuBlack.woff') format('woff'),
         url('../fonts/AdieuBlack.ttf') format('truetype'),
         url('../fonts/AdieuBlack.svg#AdieuBlack') format('svg');
         font-weight:700;
}

:root {
	--third: #00ffce;
	--fourth: #111111;
	--fifth: #919191;
}


body {
	margin:0;
	padding:0;
	overflow-x:hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:default;
	background:#0a0a0a;
	color:white;
	font-family: Kara;
}

b, strong {font-weight:bold;}

.container {
	max-width:1024px;
	margin:1em auto;
	padding:1em;
}


header {
	margin:1rem 0;
}


header img {
	width:100%;
	height:auto;
	padding:2rem;
	margin:1rem 0;
}


header h1 {
	font-weight:700;
	text-align:center;
	text-transform:uppercase;
	font-family: Adieu;
	font-size:1.3rem;
}

header h2 {
	text-align:center;
	text-transform:uppercase;
	font-family: Adieu;
	font-size:.9rem;
}

header p {
	direction:rtl;
	text-align:justify;
	font-size:.8rem;
	padding:1rem 0;
	margin-top:1rem;
}

header p.en {
	direction:ltr;
	font-size:.85rem;
}

.wrapper {
	display: grid;
    grid-gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
.wrapper {
    grid-template-columns: repeat(1, 1fr);
   }
}


.info {
}


.notice {
	margin-top:1em;
	direction:rtl;
	text-align:right;
}
.notice svg {
	color: #00ffce;
	margin-left:.3em;
}
ul {
	direction:rtl;
	margin:.5em 0;
	font-size:.85em;
	list-style: initial;
	list-style-position: inherit;
    list-style-image: url('../img/bullet.svg');
    padding-right:1.21em;
}

ul li {
	text-align:right;
	margin-bottom:.5em;
}

ul li span a {
	color:white;
	text-decoration:underline;
}


.payment {
	
}

.payment .buy {
	font-weight:bold;
	text-align:right;
	direction:rtl;
}

.payment .buy svg {
	fill:#00ffce;
	height:1rem;
	margin-left:.5rem;
	display:inline-block;
}

.payment span.choose {
	text-align:right;
	direction:rtl;
	display:block;
	font-size:.9rem;
	color:var(--fifth);
}

.payment .amount {
	display:flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	padding:1rem 0;
}

.payment .amount a {
	text-align:center;
	text-decoration:none;
	direction:rtl;
	padding:1.2rem .75rem 1rem .75rem;
	color:black;
	line-height:0;
	border-radius:2rem;
}
.payment .amount a:nth-child(1) {
	background:#e22d54;
}

.payment .amount a:nth-child(2) {
	background:#ffc022;
}

.payment .amount a:nth-child(3) {
	background:#00ffce;
}

.payment .amount a:nth-child(4) {
	background:#3fa9f5;
}

.payment .amount a:hover {
	background:var(--fifth);
}


.payment .amount b {
	font-weight:bold;
	font-size:1.2rem;
}

.payment .amount span {
	font-size:.8rem;
}

.payment .amount a:last-child span {
	font-size:.9rem;
	font-weight:bold;
}

@media (max-width: 768px) {
.payment .amount, .payment .amount a {
	display:block;
}

.payment .amount a {
	margin-bottom:1rem;
	margin-left:0;
}
.payment .amount a:last-child {
	margin-bottom:0;
}
}


.footer {
	padding-top:2em;
	display:flex;
	flex-direction: row-reverse;
	font-family: Adieu;
}

.footer a {
	color: #e22d54;
}

.footer a:hover {
	color:#828282;
}

.copyright span {
	display:block;
	font-size:.5em;
	line-height: 2em;
	color: #828282;
}
.copyright a {
	color:#828282;
	font-weight:bold;
	text-transform:uppercase;
}


.copyright, .copyright.single {
		margin-top:2em;
	}
	
	.copyright-wrapper, .copyright-wrapper.single {
		margin:0 auto;
	}
	
	.copyright-wrapper span, .copyright-wrapper.single span {
		text-align:center;
	}
	
	
@media ( max-width : 768px ) {
	
	.footer {
		flex-direction:column-reverse;
	}
	
	.copyright {
		margin-top:2em;
	}
	
	.copyright-wrapper {
		margin:0 auto;
	}
	
	.copyright-wrapper span {
		text-align:center;
	}
}

/* TRACKS */

.tracks div.table {
	display: table;
	width: 100%;
	margin:1rem 0;
	font-family: Adieu;
}

.tracks div.table div.tbody {
	display: table-row-group;	
}

.tracks div.table div.row {
	position:relative;
	border-bottom:1px solid var(--fourth);
	cursor:pointer;
	transition:background-color .15s cubic-bezier(0,0,0,1);
}

.tracks div.table div.row:last-child {
	border-bottom:none;
}

.tracks div.table div.row.playing, .tracks div.table div.row:hover {
	background-color:var(--fourth);
}

.tracks div.table div.row .progress {
	position:absolute;
	width:0;
	height:1px;
	left:0;
	bottom:0;
	padding:0;
	background:var(--third);
	transition:width .15s cubic-bezier(0,0,0,1);
}

.tracks div.table div.column {
	display: table-cell;
	padding:1rem;
	padding-right:0;
	text-align:center;
}

.tracks div.table div.column:first-child {
	width:0;
	color:var(--fifth);
	vertical-align:middle;
}

.tracks div.table div.column:first-child span.index {
	width:1.5rem;
	margin:0 auto;
	display:block;
	text-align:center;
	font-size:.8rem;
}

.tracks div.table div.column:first-child svg {
	width:1.5rem;
	height:.75rem;
	margin:0 auto;
	display:none;
}

.tracks div.table div.column:first-child svg path {
	fill:var(--third);
}

.tracks div.table div.column:first-child span.equalizer {
	position:relative;
	display:none;
	height:.75rem;
	width:1.5rem;
	justify-content:space-between;
	align-items: center;
	padding:0 .25rem;
	margin:0 auto;
}

.tracks div.table div.column:first-child span.equalizer span {
  display: inline-block;
  width:2px;
  height:10px;
  background-color: var(--third);
}

@keyframes shorteq{
  0% {height: 10px}
  50% {height: 3px}
  100% {height: 10px}
}
@-webkit-keyframes shorteq{
  0% {height: 10px}
  50% {height: 3px}
  100% {height: 10px}
}

@keyframes talleq{
  0% {height: 10px}
  50% {height: 5px}
  100% {height: 10px}
}
@-webkit-keyframes talleq{
  0% {height: 10px}
  50% {height: 5px}
  100% {height: 10px}
}

.tracks div.table div.column:first-child span.equalizer span.eq1 {
  height: 10px;
  animation-name: shorteq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  -webkit-animation-name: shorteq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0s;
}

.tracks div.table div.column:first-child span.equalizer span.eq2 {
  height: 10px;
  animation-name: talleq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.17s;
  -webkit-animation-name: talleq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0.17s;
}

.tracks div.table div.column:first-child span.equalizer span.eq3 {
  height: 10px;
  animation-name: shorteq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.34s;
  -webkit-animation-name: shorteq;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0.34s;
}

.tracks div.table div.column:first-child span.equalizer span.eq4 {
  height: 10px;
  animation-name: shorteq;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  -webkit-animation-name: shorteq;
  -webkit-animation-duration: 0.9s;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0s;
}

.tracks div.table div.row.playing span.equalizer {
	display:flex;
}

.tracks div.table div.row.playing:hover .fa-play, .tracks div.table div.row.playing span.index, .tracks div.table div.row:hover span.index {
	display:none;
}

.tracks div.table div.row:hover .fa-play {
	display:block;
}

.tracks div.table div.row.playing:hover .fa-stop {
	display:block;
}

.tracks div.table div.row.playing:hover span.equalizer {
	display:none;
}

@media (hover: none) {
.tracks div.table div.row.playing:hover span.equalizer {
	display:flex;
}
.tracks div.table div.row.playing:hover .fa-stop {
	display:none;	
}
}

.tracks div.table div.column:nth-child(2) {
	width:100%;
	text-align:left;
}

.tracks div.table div.column:nth-child(2) span {
	text-transform: uppercase;
	font-weight:bold;
	font-size:.9rem;
}

.tracks div.table div.row.playing div.column:nth-child(2) {
	color:var(--third);
}

.tracks div.table div.column span.explicit {
	background:var(--fourth);
	color:var(--third);
	width:1rem;
	height:1rem;
	line-height:0;
	font-size:.6rem;
	border-radius:3px;
	margin-left:.5rem;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	vertical-align:.12rem;
}

.tracks div.table div.row:hover div.column span.explicit, .tracks div.table div.row.playing div.column span.explicit {
	background:var(--first);
}

.tracks div.table div.column span.feat {
	display:block;
	font-size:.8rem;
	color:var(--fifth);
	margin-top:.25rem;
	text-transform:capitalize;
	font-weight:normal;
}


.tracks div.table div.column:nth-child(3) {
	color:var(--fifth);
	vertical-align:middle;
	padding-right:1rem;
	font-size:.7rem;
}

.trc20 svg {
	fill:white;
	max-width:5rem;
	display:block;
	margin:1rem auto;
}

.trc20 span.address {
	direction:ltr;
	display:block;
	text-align:center;
}

.trc20 span.telegram {
	font-size:.8rem;
	margin-top:.5rem;
}

.trc20 span.telegram:before {
	content:'•';
	color:#00ffce;
	padding-left:.5rem;
}

.trc20 span.telegram a {
	color:white;
	text-decoration:none;
	direction:ltr;
}


.paypal .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#A6FFEE;}
.paypal .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#00FFCE;}
.paypal .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#3FD1B5;}

.paypal-amount {
	justify-content:initial !important;
}

.paypal-amount a {
	font-family: Adieu;
	padding:1rem .75rem 1rem .75rem !important;
	margin-left:1rem;
}

.paypal-amount a:last-child {
	margin-left:0;
	text-transform:uppercase;
}

.paypal-amount a b {
	font-size:1rem !important;
}

.paypal-amount a:last-child span {
	font-weight:normal !important;
}

.wrapper.single {
	display:block;
}

.stores {
	text-align:center;
}


.stores a {
	display:inline-block;
	margin-top:.5rem;
	margin-left:1rem;
}

.stores a:first-child {
	margin-left:0;
}
.stores a svg {
	fill:white;
	height: 1.5rem;
}

.stores a:hover svg {
	fill:var(--third);
}

.stores a.youtube-music svg {
	max-width:7.35rem;
}

.stores a.amazon-music svg {
	max-width:6.35rem;
}

.stores a.deezer svg {
	max-width:4.5rem;
}

.stores a.tidal svg {
	max-width:6rem;
}

.single a.preorder-l {
	text-decoration:none;
}

.single .pre-order {
	color:black;
	background:var(--third);
	padding:.75rem 0;
	margin:1rem 0;
	border-radius:2rem;
}

.single .pre-order:hover {
	background:#e22d54;
	color:white;
}

.single .pre-order span {
	display:block;
	text-align:center;
	font-weight:bold;
}
.single .pre-order span:nth-child(2) {
	text-transform:uppercase;
	font-family: Adieu;
	font-weight:normal;
	font-size:.8rem;
}

@media ( max-width : 635px ) {
.single header h1 {
	font-size:.75rem;
}

.single header h2 {
	font-size:.5rem;
}

.single header img {
	padding:1rem 0 0 0;
}
.stores {
	padding-top:.5rem;
}

.stores:nth-child(2) {
	padding-top:0;
}
.stores a {
	display:block;
	margin-left:0;
	text-align:center;
}
}




@media (max-width: 952px) {
.wrapper.pay {
    grid-template-columns: repeat(1, 1fr);
}

.payment .amount {
    justify-content: end;
}

.payment .amount a {
	margin-left:1rem;
}
}