@font-face {
  font-family: 'ocr';
  src: url('../font/OCRAStd.woff') format('woff'),
       url('../font/OCRAStd.ttf') format('truetype'),
       url('../font/OCRAStd.eot'),
       url('../font/OCRAStd.woff2') format('woff2'),
       url('../font/OCRAStd.svg#OCRAStd') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
	--white: #EEE;
	--primary: #ff3c00;
	--secondary: #00FFFF;
	--grey:#888;
	--bluefluor: #00FFFF;
}

* { padding:0; margin:0; border:0; box-sizing: border-box;  }
body { background-color: #000000; background-image: url(../img/fondo2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top; background-size: 100%;}
a { text-decoration: none; color: #999; cursor: pointer; }
a:hover { color:var(--white); }
header, section{ font-family: 'ocr', serif; line-height: 1.5; }
img { width: 100%; height:100%; }
h2, h3 { font-size: 21px; color: var(--primary); font-weight: 400; }
footer { background-color: #080808; margin-top: 180px; }
a.link-friend { color: var(--bluefluor); }
strong { color: var(--secondary); font-weight: 400;}


/*ATOMS*/
.grey-bg { background-color: #080808; }
.orange { color: var(--secondary); }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; }
.flex-start { display: flex; align-items: flex-start; }
.flex-just-center { justify-content: center; }

.padd-t-15 { padding-top: 15px; }

.padd-t-30 { padding-top: 45px; }
.padd-t-60 { padding-top: 60px; }
.padd-t-90 { padding-top: 90px; }
.padd-t-180 { padding-top: 180px; }

.padd-b-15 { padding-bottom: 15px; }
.padd-b-90 { padding-bottom: 90px; }

.fondo { object-fit: cover; height: 100%; }


/*HEADER*/
.logo { width:300px; margin: 100px auto; }
.logo__donate { width:100px; margin: 70px auto 0 auto; }
.menu { text-align: center; padding: 0 50px; }
.menu-btn{ display: inline-block;  padding: 10px 20px; font-size: 14px; text-align: center; color: #AAA; border: 1px solid #333; cursor: pointer; user-select: none; }
.menu li.active { color: var(--white); border-color: var(--grey); }
.menu li:hover{ color: var(--white); }


/*CONTENT*/
.container { width:100%; max-width:1280px; margin: 0 auto; color: var(--white); font-size: 16px; padding:80px 50px; }
.container.info, .container.project, .container.music, .container.join_us { display: none; }
.container.info.active, .container.project.active, .container.music.active { display: block; }
.track-container { opacity: 0.3;}
.track-container.active { opacity: 1;}
.track-item-part { height:40px; border: 1px solid #333; }
.playing .track-item-part { border-color:  #555; }
.playing .track-name p { color:  #FFF; }
.track-container { display: flex; flex-wrap: nowrap; }
.track-item-controls { display: flex; flex-wrap: nowrap; }
.track-foto, .track-stop, .track-play, .track-rewind, .track-ffwd { cursor: pointer; }
.track-foto, .track-stop, .track-play { width:40px; margin-right: 10px; flex-shrink: 0; }
.track-rewind, .track-ffwd { width:42.1px; margin-right: 10px; flex-shrink: 0; cursor: pointer; }
.track-name, .track-download{ font-size: 14px; }
.track-name { position:relative; width:80%; margin-right: 10px; white-space: nowrap; min-width: 0 }
.track-name p { padding: 0 15px; overflow: hidden; text-overflow: ellipsis; }
.track-bar { position: absolute; width:0%; height:100%; opacity: 0.2; background-color: var(--primary); }
.track-download { width:15%; min-width: 100px; text-align: center; color: var(--secondary); padding: 0 15px; font-size: 0.8rem }
.message-info { padding: 50px 0; }
.info-rrss__icon { width: 20px; margin-right: 10px; }
.life-protectors__map { margin: 180px auto 0 auto; position: relative; contain: paint; max-width: 960px;}
.life-protectors__map-info { position: absolute; right: 0;; top: 0; border: 1px solid red; width: 300px; height: 400px; background: #00000080; display: none; padding: 20px 20px; }
.life-protectors__map-info.active { display: block; }

/*PROTECTORS LIST*/
.life-protectors__list { padding-left: 50px; }
.life-protectors__item { font-size: 16px; color:#999; }
.life-protectors__img { width:20px; margin-top: 2px; margin-right: 10px; border: 1px solid var(--grey); }
.life-protectors__info-header { display: flex; flex-direction: row; align-items: center; }
.life-protectors__info-flag { width: 30px;  margin-right: 10px; margin-top: 4px; height: auto;} 
.life-protectors__info-flag-img { border: 1px solid var(--grey); height: auto; } 

/*JOIN US*/
.joinus__list { padding-left: 50px; }
.joinus__list li {padding-top: 12px; }

.world-map-st0 {fill:#3a3a3a; stroke:#000000; stroke-miterlimit:10; cursor: pointer; }
.world-map-st0.active-project {fill:var(--primary); stroke:#000000; stroke-miterlimit:10; cursor: pointer; }
.world-map-st0.active-project:hover {fill:var(--white); stroke:#000000; stroke-miterlimit:10; cursor: pointer; }
.world-map-st0:hover {fill:var(--grey); stroke:#000000; stroke-miterlimit:10; cursor: pointer; }

/*PROJECT*/
.money-split-list { font-size: 13px; padding-left: 24px; padding-top: 18px; }
.money-split-list__item{ margin-top: 8px; }
.share-graph { width: 50%; margin: 0 auto;  padding: 120px 0; }

/*DONATE*/
.donate__form { border: 1px solid var(--grey); }
.ok-message { padding-top: 100px; width: 100%; max-width: 600px; margin:0 auto; }
.ok-message h1, .ok-message p {color: var(--white); }
.ok-message h1 { padding-bottom: 60px;}
.ok-message p { padding-bottom: 30px;}
/*FOOTER*/
.logo-footer { width:50px; margin: 0 auto; padding:45px 0 42px 0;}

@media only screen and (max-width: 960px) {
 	.container { padding: 120px 30px; }
	.track-name { width:85%; margin-right: 0; padding: 20px 0;}
	.track-container { flex-wrap: wrap; }  
	.track-item-controls, .track-download { margin-top: 5px; }
	.menu { padding: 0 30px; }
	.menu li{ display: block; margin-bottom: 5px; padding: 20px 20px; }
}

@media only screen and (max-width: 768px) {
 	
 	.logo { width: 200px; }
	.track-container { flex-wrap: wrap; justify-content: center;}  
	.track-item-controls { margin: 5px 0; } 
	.track-item-controls { justify-content: space-between;}
	.track-item-part { height:auto; margin-right: 0; }
	.track-stop, .track-play { width: 25%; }
	.track-rewind, .track-ffwd { width: 15%; }
	.track-download { margin-top: 0; height: 50px; margin-bottom: 40px; }
	.track-foto, .track-name { width:100%; margin-right: 0; }
	.track-foto{ height:auto; padding:50px; }
	.track-download { width:100%; }
	.protector-list { padding-left: 0; }

}