* { border:0; padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Barlow', sans-serif; color: var(--main-white); overflow-x: hidden; background-color:  #000; }
h2, h3, h4{ font-family: 'Barlow', sans-serif; font-weight: 400 }
p { color: var(--main-white); font-size: 18px; }
h2 { font-size: 24px; }
h3 { font-size: 33px;}
a{ text-decoration: none; color: var(--main-white); cursor: pointer; }
li { list-style: none; }
a:hover span { color: var(--main-white); }
section{ padding: 50px; position: relative; }

/*atomic*/
:root {
    --main-blue: #00FFD4;
    --medium-blue: #006854;
    --dark-blue: #001C17;
    --main-white: #F0FFFC;
}


/*canvas*/
#defaultCanvas0 { position: absolute;  bottom: 0;  right: 0; z-index: 0; }


/*home*/
.home { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; z-index: 1; overflow-x: hidden; }
.home__logo { max-width: 40%; padding-top: 5%; padding-left: 5%; z-index: 1; }

.home__slogan { padding-top: 80px; z-index: 1; }
.home__slogan--desktop { display: block; font-size: 33px; }
.home__slogan--responsive { display: none; font-size: 33px; }
#Capa_1 { fill: var(--main-blue); }

.home__menu { position:absolute; font-weight: 300; font-size: 24px; top:0; right: 0; text-align: right; z-index: 1; }
.home__menu--desktop { padding: 50px; }
.home__menu--btn{ width:40px; margin: 33px; z-index: 1; cursor: pointer; }
.home__menu li { list-style: none; padding-bottom: 10px; }
.home__menu--responsive { height: 100%; width:100%; position: absolute; top: 0; bottom:0; right: -100%; padding: 50px; background-color: #001C17; opacity: 0.98; z-index: 2; overflow-y: auto; }
.home__menu--responsive li { font-size: 32px; padding-bottom: 40px; }
.home__close-btn { font-size: 40px; position: absolute; right: 15px; top: 15px; padding: 5px 9px; cursor: pointer; }
.alter-color{ color: var(--main-blue); top:0; right: 0; }


/*common*/
.artist__title, .contact__title { color: var(--main-blue); font-size: 40px; }


/*artist*/
.artists {  margin-top: 100px; overflow-x: hidden; padding: 50px 84px; }
.artist-rack { margin-top: 62px;}
.artist-rack__item { display:flex; justify-content: space-between;  cursor: pointer; }
.artist-rack__item-in { border-bottom: 1px solid var(--main-blue); display:flex; justify-content: space-between; padding-left: 3px; width: 100%; }
.artist-rack__title { line-height: 1; font-size: 48px; padding: 13px 0 16px 0; }
.artist-rack__item:first-child { border-top: 1px solid var(--main-blue); }
.artist-rack__bars-box { display: flex; padding: 5px 0 5px 5px; }
.artist-rack__bars { display: flex; flex-direction: row; }
.artist-rack__item:hover .darkbar {  animation: coloranime 0.2s steps(2) forwards; }
.artist-rack__item:hover .mediumbar { animation: coloranime 0.4s steps(2) forwards; }
.artist-rack__item:hover .lightbar { animation: coloranime 0.6s steps(2) forwards; ; }
.artist-rack__item:hover .artist-rack__title { color: var(--main-blue); transition: 1s; }
.artist-rack__bar { width: 6px; height:100%; background-color: red; margin-left: 4px; }
.artist-rack__bars{ height: 100%;}
.lightbar{ background-color: var(--main-blue); animation: coloranimeback 0.3s steps(2) forwards; }
.mediumbar{ background-color: var(--medium-blue); animation: coloranimeback 0.2s steps(2) forwards; }
.darkbar{ background-color: var(--dark-blue); animation: coloranimeback 0.1s steps(2) forwards; }


/*artist-in*/
.artist-in {  margin-top: 100px; padding: 50px 84px; }
.st0artist-in{ fill:#00FFDA; }
.artist-in__window { display: flex; width: 100%; background-repeat: no-repeat; background-size: 90%; background-position: 100%; cursor: pointer;}
.artist-in__window:hover .bar1 { animation: pictureanime 0.1s steps(3) forwards; }
.artist-in__window:hover .bar2 { animation: pictureanime 0.2s steps(3) forwards; }
.artist-in__window:hover .bar3 { animation: pictureanime 0.3s steps(3) forwards; }
.artist-in__window:hover .square1 { animation: pictureanime 0.4s steps(3) forwards; }
.artist-in__window:hover .square2 { animation: pictureanime 0.5s steps(3) forwards; }
.artist-in__window:hover .square3 { animation: pictureanime 0.6s steps(3) forwards; }
.artist-in__window svg {width: 100%; }
.artist-in__title { color: var(--main-blue); font-size: 48px; margin-top: 48px; }
.artist-in__subtitle { color: var(--main-white); font-size: 27px; margin-top: 16px; }
.artist-in__bio {margin-top: 48px; line-height: 1.4; }
.artist-in__bio-title, .artist-in__labels-title {color: var(--main-blue); margin: 24px 0 10px 0; font-size: 26px; }
.artist-in__player {color: var(--main-white); font-size: 24px; margin-top: 12px; display: flex; flex-direction: row; border-top: 1px solid var(--medium-blue); border-bottom: 1px solid var(--medium-blue); width: auto;  display: inline-flex; margin-top: 16px; flex-direction: row; align-items: center; padding: 7px 5px 9px; }
.artist-in__player-item { width:21px; margin-right: 15px; background-color: transparent; line-height: 0; cursor: pointer; }
.artist-in__player-item:last-child { margin:0; }
.artist-in__bio-text { line-height: 1.5; font-size: 18px; }
.artist-in__bio-text p{ margin-top: 8px; }
.stop, .pause { width: 19px; }
.play { width: 20px; }


/*contact*/
.contact {  margin-top: 100px; padding: 50px 84px; }
.contact__info { display: flex; flex-direction: row; margin-top: 42px; }
.contact__friendly-message { font-size: 48px; margin-top: 24px; max-width: 430px; width:100%; margin-right: 33px; line-height: 1.2 }
.contact__details { border-left: 1px solid var(--medium-blue); width: auto; padding:0 10px 0 48px; margin-top: 40px; min-width: 290px; } 
.contact__details-item { margin-right: 80px;  margin-top: 36px; }
.contact__details-item:first-child { margin-top: 0; }
.contact__details-item:last-child { margin-right: 0; }
.contact__details-title {color: var(--main-blue); margin: 0px 0 14px 0; font-size: 24px; line-height: 0.8; }
.contact__details-text { font-size: 19px; line-height: 1.4; }


/*automations*/
.showmenu { right:0; transition: 0.2s cubic-bezier(.99,0,1,.48); }
.hidemenu { right: -100%; transition: 0.2s cubic-bezier(.99,0,1,.48); }
.hide { opacity: 0; transition: 0.1s; color: var(--main-blue); }
.show { opacity: 1; transition: 0.1s; color: var(--main-white); }

.legal { position: absolute; bottom:0; right:0; padding: 33px; color: #666; z-index: 2; text-align: right;}
.legal p  { color: #999; margin-top: 33px; font-size: 10px;}
.legal a  { color: var(--main-blue); }


/*animations*/
@keyframes coloranime {
    from {}
    to   { background-color: transparent; border:1px solid var(--main-blue);}
}

@keyframes coloranimeback {
    from {background-color: transparent; border:1px solid var(--main-blue);}
    to   {}
}

@keyframes pictureanime {
    0% {}
    50%   { fill: var(--main-blue);}
    100% {}
}


/*responsive*/
@media only screen and (max-width: 1400px) {
    .home__logo { max-width: 50%; }
}
@media only screen and (max-width: 1200px) {
    .home__logo { max-width: 60%; }
    .contact { padding: 0 30px 50px ; }
    .contact__info { flex-direction: column; margin: 0;}
    .contact__details { border: none; padding: 0; margin-top: 80px; }
}

@media only screen and (max-width: 1024px) {
    .contact, .artists, .artist-in { padding: 0 30px 50px ; }
    .contact__info { flex-direction: column; margin: 0;}
    .contact__details { border: none; padding: 0; margin-top: 80px; }
}

@media only screen and (max-width: 768px) {
    .home__logo { max-width: 100%; padding-left: 0; }
    .home__slogan--desktop { display: none; }
    .home__slogan--responsive { display: block; }
    .home__menu--btn { margin: 25px 20px; }
}