body{ margin:0; padding:0; font-family:'Arial'; font-size:18px;}.audio-player, .audio-player div, .audio-player h1,.audio-player a, .audio-player img,.audio-player span, .audio-player button { margin: 0; padding: 0; border: none; outline: none; }#audio-player{ display: none; } div.audio-player { position: relative; width: 100%; max-width: 500px; height: 155px; margin: 0px auto; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.btnc{ -webkit-border-radius:100px; -moz-border-radius: 100px; border-radius: 100px; color: #FFFFFF; font-weight:bold; font-size: 22px; font-weight: 100; height: 50px; width: 50px; padding: 12px; background-color: rgba(12, 12, 12, 0.92); box-shadow: -4px -3px 42px 0px #000000; -webkit-box-shadow: -4px -3px 42px 0px #000000; -moz-box-shadow: -4px -3px 42px 0px #000000; text-shadow: 1px 1px 20px #000000; border: solid #747474 1px; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; }.btnc:hover { border: solid #000000 1px; text-decoration: none; }.audio-player .cover { float: left; max-width: 115px; max-height: 115px; }.mejs-controls .mejs-button button { cursor: pointer; display: block; position: absolute; left: 0; right: 0; margin: 0 auto; text-indent: -9999px; } .mejs-controls .mejs-play button, .mejs-controls .mejs-carga button, .mejs-controls .mejs-pause button { width:78px; height: 80px; background: transparent url(/static/player/play-front.svg)0 0; }.mejs-controls .mejs-pause button { background-position:0 -168px; }.mejs-controls .mejs-carga button { background-position:0 -84px;}.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button { width: 0px; height: 0px; top: 88px; left: 130px; }.mejs-controls .mejs-unmute button { background-position: 0 -12px; }.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; top: 90px; width: 80%; display: block; left: 0; right: 0; margin: 0 auto; text-indent: -9999px; }.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { height: 3px; background: #212227; -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25); -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25); box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; height: 3px; top: 1px; left: 1px; background: repeating-linear-gradient( 135deg, #fff, #fff 10px, #fff 10px, #fff 20px );-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .mejs-controls div.mejs-time-rail { width: 400px; } .mejs-controls .mejs-time-rail span { position: absolute; display: block; width: 400px; height: 5px; left: 0; bottom: 0; cursor: pointer; -webkit-border-radius: 0px 0px 2px 2px; -moz-border-radius: 0px 0px 2px 2px; border-radius: 0px 0px 2px 2px; } .mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }.mejs-controls .mejs-time-rail .mejs-time-loaded { width: 0; background: #cccccc; } .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; background: #64b44c; } .mejs-controls .mejs-time-rail .mejs-time-handle, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { position: absolute; display: block; width: 12px; height: 14px; top: -4px; background: url(/static/player/handle.png) no-repeat; }.mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 60px; height: 23px; top: -26px; margin-left: -17px; }.mejs-controls .mejs-time-rail .mejs-time-float-current { width: 33px; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center; }.msie{ display: none !important; position: absolute; top: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); color: #FFFFFF; text-align: center; font-size: 15px; font-weight: bold; font-family: "Ubuntu","Verdana"; vertical-align: middle; padding:15px !important; }ul { margin:0; padding:0; text-decoration:none; list-style:none; } li { padding:0; margin:0; } nav {position: absolute;z-index: 999; text-align:center; width:100%; height:auto; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0) 2%, rgba(0,0,0,0) 11%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 55%, rgba(2,2,2,1) 78%); } nav ul { text-align:center; } nav ul li { display:inline-block; } .btn { -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius: 8px; color: #FFFFFF; font-weight:bold; font-size: 22px; padding: 8px; background-color: rgba(12, 12, 12, 0.72); box-shadow: -4px -3px 42px 0px #000000; -webkit-box-shadow: -4px -3px 42px 0px #000000; -moz-box-shadow: -4px -3px 42px 0px #000000; text-shadow: 1px 1px 20px #000000; border: solid #747474 1px; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; } .btn:hover { border: solid #000000 1px; text-decoration: none; }.marque{ color:#c0c0c0; display:inline-block; padding:10px; text-decoration:none; font-size:28px; font-weight:bold; } nav ul li a { color:#fff; display:inline-block; padding:3px; text-decoration:none; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; font-size:26px; font-weight:bold; } nav ul li a:hover { color: #000; } .button { display:inline; position:absolute;color:#fff;right:20px; z-index:999; font-size:30px;top: 40%; } .button a { color:#fff; text-decoration:none; } .btn-open:after { color:#e1e1e1; content:"\f0c9"; font-family:"FontAwesome"; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .btn-open:hover:after { color:#e1e1e1; } .btn-close:after { color:#fff; content:"\f00d"; font-family:"FontAwesome"; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .btn-close:hover:after { color: #ccc; } .overlay { display:none; position:fixed; top:0; height:100%; width:100%; background:rgba(0, 0, 0, 0.72); overflow:auto; z-index:99; } .wrap { color:#e9e9e9; text-align:center; max-width:90%; margin:0 auto; } .wrap ul.wrap-nav { text-transform:capitalize; padding:150px 0px 100px; } .wrap ul.wrap-nav li { font-size:20px; display:inline-block; vertical-align:top; width:24%; position:relative; padding:2px 0; } .wrap ul.wrap-nav li a { color:#eeeeee; display:block; padding:8px 0; text-decoration:none; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; } .wrap ul.wrap-nav li a:hover { color:#f0f0f0; } .wrap ul.wrap-nav ul { padding:20px 0; } .wrap ul.wrap-nav ul li { display:block; font-size:13px; width:100%; color:#e9e9e9; } .wrap ul.wrap-nav ul li a { color:#f0f0f0; } .wrap ul.wrap-nav ul li a:hover { color:#34B484;}.social { font-size:25px; padding:20px; } .social p { margin:0; padding:20px 0 5px 0; line-height:30px; font-size:13px;}.social p a { color:#eeeeee; text-decoration:none; margin:0; padding:0; }.social-icon { width:80px; height:50px; background:#e9e9e9; color:#333; display:inline-block; margin:0 20px; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s;}.social-icon:hover { background:#eeeeee; color:#f0f0f0; } .social-icon i { margin-top:12px;}.image-ri{ width:30%; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);}@media screen and (max-width:48em) { .wrap ul.wrap-nav>li { width:80%; padding:2px 0; } .wrap ul.wrap-nav { } .image-ri{ width:70%; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); } .social { color:#c1c1c1; font-size:25px; padding:15px 0; } .social-icon { width:100%; height:50px; background:#fff; color:#333; display:block; margin:5px 0; } }.footer { position: fixed; left: 0; bottom: 0; width: 100%; color: white; text-align: center; }*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } #movingBars { width: 100%;  bottom: -10px; position: fixed; overflow: hidden; white-space: nowrap; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 29%, rgba(2,2,2,0.4175445899534761) 51%, rgba(0,0,0,0) 65%, rgba(2,2,2,0) 67%, rgba(255,255,255,0) 86%);} #movingBars span { width: 10px; float: left; margin: 0 1px; display: block; background-color: rgba(255, 255, 255, 0.27);}.home-page-wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-repeat: no-repeat; background-position: center; background-size: cover; animation: bg 10s linear infinite; } @keyframes bg { 0% { background-image: url('/static/bg/02.jpg'); } 50% { background-image: url('/static/bg/03.jpg'); } 100% { background-image: url('/static/bg/01.jpg'); } } .home-page { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background: linear-gradient(185deg, rgba(5,5,5,0) 0%, rgb(1 1 1 / 69%) 48%, rgba(12,12,13,1) 93%);}