@charset "UTF-8";
/* CSS Document */
@import url("/css/font-awesome-4.7.0/css/font-awesome.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(/css/ie.css);
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
vertical-align: baseline;
-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
:before, :after {
font-family: 'FontAwesome';
}
h1, h2, h3, h4, h5, h6 {
font-family: "open sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
/****** SAME STYLES *****/
header, section, footer {
width: 100%;
}
.slides-content-home, .publicity-home, .slider-playlist-prominent, .footer-content {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.header-container {
width: 96%;
margin-left: auto;
margin-right: auto;
}
/* #CC0000 */
/***** BODY ******/
body {
font-size: 14px;
line-height: 1.5;
/*-webkit-font-smoothing: antialiased;*/
font-family: "open sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
/***** MAIN *****/
.main {
width: 100%;
height: 100%;
}
/***** HEADER *****/
header {
height: 60px;
background: #000000;
position: fixed;
z-index: 99;
}
header.header-home {
position: absolute;
z-index: 99999;
background: rgba(0, 0, 0, 0.8);
}
header .header-container {
height: 100%;
background-color: none;
}
header .logo {
width: 234px;
height: 100%;
float: left;
/*border: solid 1px #fff;*/
}
header .logo a {
display: block;
padding: 14px 0;
font-size: 26px;
color: #ffffff;
}
.nav-container {
height: 100%;
float: right;
background-color: none;
}
.btn-responsive {
display: none;
}
a.nav-logo, a.close-nav {
display: none;
}
.nav-container ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
}
.nav-container ul li a {
font-size: 14px;
color: #ffffff;
padding: 20px 18px 19px;
display: block;
-webkit-transition: color .2s;
-o-transition: color .2s;
transition: color .2s;
}
.nav-container ul li a:hover {
color: #CC0000;
}
.nav-container ul li a.li-search:after {
content: "\f107";
position: relative;
top: 0;
left: 5px;
line-height: 0;
}
.nav-container ul li:hover .children {
display: none;
}
.nav-container ul li .children {
display: none;
/*background: #333333;*/
background: rgba(0, 0, 0, 0.85) !important;
filter: alpha(opacity=85); /* For IE8 and earlier */
position: absolute;
width: 300px;
z-index: 999;
right: 0;
}
.nav-container ul li .children:after {
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 10px;
width: 0px;
height: 0;
position: absolute;
top: -20px;
right: 9px;
background: none;
content: '';
}
.nav-container ul li .children li {
display: block;
/*border-bottom: 1px solid #333;*/
text-transform: none;
}
.nav-container ul li .children li:last-child {
border-bottom: none;
}
.nav-container ul li .children li a {
display: block;
padding: 10px 20px;
color: #999999;
font-size: 14px;
-webkit-transition: color .2s;
-o-transition: color .2s;
transition: color .2s;
}
.nav-container ul li .children li a:hover {
color: #ffffff;
}
.nav-container ul li .children li a:before {
/*content: "\f001";*/
position: relative;
margin-right: 10px;
font-size: 20px;
top: 0;
line-height: 0;
}
/** NAV LANGUAGES **/
.languajes {
width: 40px;
float: right;
height: 60px;
position: relative;
margin-left: 10px;
display: block;
}
.icon-languajes {
position: absolute;
width: 40px;
height: 60px;
background: url(/css/img/flags/mundo.png) center center no-repeat;
z-index: 5;
left: 0;
cursor: pointer;
}
.box-languajes {
/*width: 300px;*/
position: absolute;
height: 60px;
background: #000;
z-index: 2;
left: 0;
opacity: 0;
padding-left: 0;
overflow: hidden;
}
.box-languajes a {
display: inline-block;
margin: 18px 3px;
color: #fff;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: .7;
}
/*.close-languajes {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
cursor: pointer;
}*/
a.espanol:after, a.english:after, a.italiano:after, a.deutsch:after, a.nederlands:after, a.svenska:after, a.france:after, a.japanese:after, a.chinese:after, a.polski:after {
width: 21px;
height: 21px;
content: '';
display: block;
opacity: .8;
}
a.espanol:after {
background: url(/css/img/flags/espanol.png) center center no-repeat;
}
a.english:after {
background: url(/css/img/flags/english.png) center center no-repeat;
}
a.italiano:after {
background: url(/css/img/flags/italiano.png) center center no-repeat;
}
a.deutsch:after {
background: url(/css/img/flags/deutsch.png) center center no-repeat;
}
a.nederlands:after {
background: url(/css/img/flags/nederlands.png) center center no-repeat;
}
a.svenska:after {
background: url(/css/img/flags/svenska.png) center center no-repeat;
}
a.france:after {
background: url(/css/img/flags/France.png) center center no-repeat;
}
a.polski:after {
background: url(/css/img/flags/polski.png) center center no-repeat;
}
a.japanese:after {
background: url(/css/img/flags/japanese.png) center center no-repeat;
}
a.chinese:after {
background: url(/css/img/flags/chinese.png) center center no-repeat;
}
a.espanol, a.english, a.italiano, a.deutsch, a.nederlands, a.svenska, a.france, a.japanese, a.chinese {
position: relative;
}
a.english span, a.espanol span, a.france span, a.italiano span, a.deutsch span, a.nederlands span, a.svenska span, a.japanese span, a.chinese span, a.polski span {
width: 70px;
position: absolute;
bottom: -14px;
left: -100%;
font-size: 11px;
opacity: 0;
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
-o-transition: all .8s ease-out;
transition: all .8s ease-out;
font-family: "open sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
text-align: center;
}
a.english:hover span, a.espanol:hover span, a.france:hover span, a.italiano:hover span, a.deutsch:hover span, a.nederlands:hover span, a.svenska:hover span, a.japanese:hover span, a.chinese:hover span, a.polski:hover span {
/*opacity: 1;*/
display: none;
}
.box-languajes a:hover {
/*margin: 13px 5px 23px;*/
}
a.espanol:hover, a.english:hover, a.italiano:hover, a.deutsch:hover, a.nederlands:hover, a.svenska:hover, a.france:hover, a.japanese:hover, a.chinese:hover, a.polski:hover {
opacity: 1;
}
/************ Bocadillo informativo de idiomas ***********/
.information-languages {
position: absolute;
width: 200px;
background: #888;
right: 0;
top: 60px;
border-radius: 5px;
color: #fff;
padding: 10px;
display: none;
opacity: .8;
}
.information-languages a {
color: #fff;
}
.information-languages:after {
border-color: transparent transparent #888888 transparent;
border-style: solid;
border-width: 10px;
width: 0px;
height: 0;
position: absolute;
top: -20px;
right: 10px;
background: none;
content: '';
}
/*** NEW BUTTON ***/
.list-bg-container, .intro-bg-container {
height: 200px;
position: relative;
/**display: none;**/
}
.btn-list-container, .btn-intro-container, .christmasButton {
position: absolute;
bottom: 10px;
left: 0;
}
.btn-list-container a, .btn-intro-container a {
display: block;
padding: 6px 7px;
background: rgba(204, 0, 0, 0.8);
filter: alpha(opacity=85);
color: #ccc;
font-size: 12px;
text-transform: uppercase;
border: 2px solid #510000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.btn-list-container a:hover, .btn-intro-container a:hover {
background: rgba(204, 0, 0, 1);
}
/*Botón de navidad*/
.christmasButton a {
display: inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
min-width:100px;
padding: 8px 10px;
font-family: 'Lobster', cursive;
font-size: 14px;
line-height: 14px;
text-decoration: none;
color: #FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
background: #5e0d0c;
outline: none;
border-radius: 15px;
border: 1px solid #4c0300;
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #a23227, /* inner glow */
inset 0 80px 80px -40px #ac3223, /* gradient */
1px 1px 3px rgba(0,0,0,0.75); /* shadow */
overflow: visible; /* IE9 & 10 */
-webkit-transition: 500ms linear;
-moz-transition: 500ms linear;
-o-transition: 500ms linear;
transition: 500ms linear;
}
.christmasButton a::before {
content: '';
display: block;
position: absolute;
top: -7px;
left: -3px;
right: 0;
height: 23px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat 0 0,
url(data:image/png;base64,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) no-repeat 50% 0,
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) no-repeat 100% 0;
}
.christmasButton a:hover {
background: #a61715;
text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #da3b2c, /* inner glow */
inset 0 80px 80px -40px #dd4330, /* gradient */
1px 1px 3px rgba(0,0,0,0.75); /* shadow */
}
.christmasButton a:focus {
outline: none; /*FF*/
}
.christmasButton a:active {
box-shadow:
inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
inset 0 0 6px #da3b2c, /* inner glow */
inset 0 80px 80px -40px #dd4330, /* gradient */
0px 1px 0px rgba(255,255,255,0.25); /* shadow */
-webkit-transition: 50ms linear;
-moz-transition: 50ms linear;
-o-transition: 50ms linear;
transition: 50ms linear;
}
/****** SLIDER *****/
#slides {
position: relative;
}
#slides .slides-container {
display: none;
}
#slides .scrollable {
*zoom: 1;
position: relative;
top: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
}
#slides .scrollable:after {
content: "";
display: table;
clear: both;
}
.slides-pagination {
display: none !important;
}
.slides-content {
position: absolute;
width: 100%;
height: auto;
background-color: none;
/*top: calc(50% + 30px);*/
top: 50%;
z-index: 5;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.slides-content-home {
height: auto;
text-align: center;
}
.slides-content-home figure {
margin: 0 auto;
width: 100px;
height: 140px;
text-align: center;
/*
background: rgba(0, 0, 0, 0.6);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
*/
}
.slides-content-home figure img {
width: 100%;
}
.svg-guitar {
width: 95px;
height: 95px;
position: relative;
top: 22px;
}
.slides-content-home h1 {
font-size: 60px;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
margin: 20px 0 10px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
}
.slides-content-home h2 {
font-size: 30px;
color: #ffffff;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
}
.link-home {
width: 100%;
height: auto;
background-color: none;
}
.link-home:after {
content: '';
display: block;
clear: both;
}
.link-home-songs, .link-home-chords {
width: 100%;
height: auto;
}
.link-home-songs {
background-color: none;
}
.link-home-chords {
background-color: none;
}
.link-home-songs a {
display: block;
padding: 16px 0;
background-color: rgba(204, 0, 0, 0.8);
color: #510000;
font-size: 26px;
text-transform: uppercase;
border: 2px solid #510000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.dutch .link-home-songs a {
font-size: 21px;
}
.svenska .link-home-songs a {
font-size: 21px;
}
.link-home-chords a {
display: block;
padding: 16px 0;
background-color: rgba(204, 0, 0, 0.8);
color: #510000;
font-size: 26px;
text-transform: uppercase;
border: 2px solid #510000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.dutch .link-home-songs a, .dutch .link-home-chords a {
font-size: 21px;
}
.svenska .link-home-songs a, .svenska .link-home-chords a {
font-size: 21px;
}
.link-home-songs a:hover, .link-home-chords a:hover {
background-color: rgba(204, 0, 0, 1);
}
.next-box {
width: 55px;
height: 55px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 5;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
}
.next-box a {
width: 55px;
height: 55px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.next-box a:before {
content: '';
background: url(../images/arrow-home.png) center center no-repeat;
background-size: 70%;
width: 55px;
height: 55px;
/*content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"><g><path fill="rgb(255,255,255)" d="M201.893,84.946c3.369,0,6.107,2.732,6.107,6.107c0,3.373-2.738,6.107-6.107,6.107 c-3.379,0-6.107-2.734-6.107-6.107C195.785,87.679,198.514,84.946,201.893,84.946L201.893,84.946z"></path><path fill="rgb(255,255,255)" d="M183.424,84.946c3.365,0,6.106,2.732,6.106,6.107c0,3.373-2.741,6.107-6.106,6.107 c-3.378,0-6.113-2.734-6.113-6.107C177.311,87.679,180.046,84.946,183.424,84.946L183.424,84.946z"></path><path fill="rgb(255,255,255)" d="M183.424,103.415c3.365,0,6.106,2.734,6.106,6.115c0,3.371-2.741,6.105-6.106,6.105 c-3.378,0-6.113-2.734-6.113-6.105C177.311,106.149,180.046,103.415,183.424,103.415L183.424,103.415z"></path><path fill="rgb(255,255,255)" d="M164.941,103.415c3.374,0,6.117,2.734,6.117,6.115c0,3.371-2.743,6.105-6.117,6.105 c-3.367,0-6.107-2.734-6.107-6.105C158.834,106.149,161.574,103.415,164.941,103.415L164.941,103.415z"></path><path fill="rgb(255,255,255)" d="M164.941,121.892c3.374,0,6.117,2.734,6.117,6.109c0,3.371-2.743,6.105-6.117,6.105 c-3.367,0-6.107-2.734-6.107-6.105C158.834,124.626,161.574,121.892,164.941,121.892L164.941,121.892z"></path><path fill="rgb(255,255,255)" d="M146.47,121.892c3.378,0,6.11,2.734,6.11,6.109c0,3.371-2.732,6.105-6.11,6.105 c-3.366,0-6.105-2.734-6.105-6.105C140.364,124.626,143.104,121.892,146.47,121.892L146.47,121.892z"></path><path fill="rgb(255,255,255)" d="M146.47,140.364c3.378,0,6.11,2.734,6.11,6.105c0,3.379-2.732,6.115-6.11,6.115 c-3.366,0-6.105-2.736-6.105-6.115C140.364,143.099,143.104,140.364,146.47,140.364L146.47,140.364z"></path><path fill="rgb(255,255,255)" d="M128,140.364c3.379,0,6.109,2.734,6.109,6.105c0,3.379-2.73,6.115-6.109,6.115s-6.109-2.736-6.109-6.115 C121.891,143.099,124.621,140.364,128,140.364L128,140.364z"></path><path fill="rgb(255,255,255)" d="M128,158.837c3.379,0,6.109,2.736,6.109,6.111c0,3.373-2.73,6.105-6.109,6.105s-6.109-2.732-6.109-6.105 C121.891,161.573,124.621,158.837,128,158.837L128,158.837z"></path><path fill="rgb(255,255,255)" d="M109.53,121.892c3.366,0,6.105,2.734,6.105,6.109c0,3.371-2.739,6.105-6.105,6.105 c-3.378,0-6.11-2.734-6.11-6.105C103.42,124.626,106.152,121.892,109.53,121.892L109.53,121.892z"></path><path fill="rgb(255,255,255)" d="M109.53,140.364c3.366,0,6.105,2.734,6.105,6.105c0,3.379-2.739,6.115-6.105,6.115 c-3.378,0-6.11-2.736-6.11-6.115C103.42,143.099,106.152,140.364,109.53,140.364L109.53,140.364z"></path><path fill="rgb(255,255,255)" d="M91.059,103.415c3.367,0,6.109,2.734,6.109,6.115c0,3.371-2.742,6.105-6.109,6.105 c-3.374,0-6.117-2.734-6.117-6.105C84.941,106.149,87.685,103.415,91.059,103.415L91.059,103.415z"></path><path fill="rgb(255,255,255)" d="M91.059,121.892c3.367,0,6.109,2.734,6.109,6.109c0,3.371-2.742,6.105-6.109,6.105 c-3.374,0-6.117-2.734-6.117-6.105C84.941,124.626,87.685,121.892,91.059,121.892L91.059,121.892z"></path><path fill="rgb(255,255,255)" d="M72.576,84.946c3.379,0,6.113,2.732,6.113,6.107c0,3.373-2.734,6.107-6.113,6.107 c-3.365,0-6.106-2.734-6.106-6.107C66.47,87.679,69.211,84.946,72.576,84.946L72.576,84.946z"></path><path fill="rgb(255,255,255)" d="M72.576,103.415c3.379,0,6.113,2.734,6.113,6.115c0,3.371-2.734,6.105-6.113,6.105 c-3.365,0-6.106-2.734-6.106-6.105C66.47,106.149,69.211,103.415,72.576,103.415L72.576,103.415z"></path><path fill="rgb(255,255,255)" d="M54.108,84.946c3.378,0,6.106,2.732,6.106,6.107c0,3.373-2.729,6.107-6.106,6.107 c-3.38,0-6.108-2.734-6.108-6.107C48,87.679,50.729,84.946,54.108,84.946L54.108,84.946z"></path></g></svg>');*/
display: block;
position: relative;
top: 3px;
left: 0;
right: 0;
margin: 0 auto;
}
/***** PUBLICITY HOME *****/
.publicity-home {
/*quito la publicidad*/
/*para poner publicidad debe quedar así*/
/*height: 100px;
background-color: #f0f0f0;
margin: 20px auto;*/
/*Fin para añadir la publicidad*/
height: 0px;
margin: 20px auto;
display: none; /*quitada la publicidad pongo
display: none para que desaparezaca por completo*/
}
.publicity-home h1 {
font-size: 20px;
text-align: center;
line-height: 100px;
text-transform: uppercase;
color: #999999;
}
/***** SLIDER PLAYLIST PROMINENT *****/
.slider-playlist-prominent {
height: auto;
background-color: none;
}
.slider-prominent:after {
content: "";
display: block;
clear: both;
}
.prominent-images {
height: 300px;
background: none;
position: relative;
}
.prominent-images-bg1 {
position: absolute;
width: 100%;
height: 300px;
background: url(img/prominent-bg1.jpg) center center;
background-size: cover;
}
.prominent-songs {
width: 100%;
height: auto;
background: none;
position: relative;
}
/*----- PROMINENT SLIDER -----*/
.liquid-slider {
height: 350px;
overflow: scroll;
}
.liquid-slider {
background: none;
width: 100%;
margin: 0 auto;
float: left;
overflow: hidden;
position: relative;
}
.ls-responsive .liquid-slider {
width: 100%;
margin: 0;
}
.panel-container {
position: relative;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
/* from http://davidwalsh.name/translate3d */
}
.liquid-slider .panel-container .fade {
width:100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
display: block;
}
/*** Panels ***/
.liquid-slider .ls-panel {
width: 100%;
display: block;
float: left;
}
.liquid-slider h2.title {
display: none;
}
.panel-wrapper {
padding: 20px 0 10px;
position:relative;
}
.panel-wrapper .box-social {
display: none;
}
/* 1 */
/*.tabs-link {
width: 123px;
height: 33px;
text-align: center;
position: absolute;
top: 15px;
left: 130px;
color: #888;
padding: 5px 10px 6px;
border-radius: 4px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2;
border: 1px solid #d4d4d4;
background-color: #ececec;
display: none;
}
.tabs-link:hover {
background-color: #f2f2f2;
color: #777;
}*/
/* 2 */
/*.tabs-link {
width: 123px;
height: 33px;
text-align: center;
position: absolute;
top: 15px;
left: 130px;
color: #cc0000;
padding: 5px 10px 6px;
border-radius: 4px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2;
border: 1px solid #cc0000;
background-color: transparent;
display: none;
}
.tabs-link:hover {
background: rgba(204, 0, 0, 0.1);
color: #cc0000;
}*/
.box-newSongs-popularSongs {
position: absolute;
height: auto;
top: 15px;
right: 0;
}
/* 3 */
.tabs-link, .tabs-link-popular-songs {
height: 33px;
text-align: center;
color: #cc0000;
padding: 5px 10px 6px;
border-radius: 4px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2;
border: 1px solid #cc0000;
background: rgba(204, 0, 0, 0.1);
text-transform: uppercase;
display: inline-block;
}
.tabs-link:hover, .tabs-link-popular-songs:hover {
background: rgba(204, 0, 0, 0.2);
color: #cc0000;
}
/*** Tabbed Navigation ***/
.ls-nav {
overflow:hidden;
clear:both;
/*background-color: #f0f0f0;*/
margin-top: 15px;
}
.ls-nav a {
background: none;
color: #333333;
margin-right: 1px;
padding: 10px 15px;
outline:0;
}
.ls-nav a:hover {
background-color: #555555;
color: #ffffff;
border: 2px solid #555555;
text-shadow: none;
}
.ls-nav .current a {
background-color: #555555;
color: #ffffff;
border: 2px solid #555555;
}
.currentCrossLink {
font-weight: normal;
}
.ls-nav ul {
padding:0;
clear: both;
display: block;
margin: auto;
overflow: hidden;
}
.ls-nav ul li {
display: inline-block;
}
.ls-nav ul li a {
display: inline-block;
text-decoration: none;
margin-right: 4px;
padding: 4px 10px;
border: 2px solid #b2b2b2;
border-radius: 4px;
color: #666666;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2;
}
#prominent-slider-nav-select {
display: none !important;
}
#prominent-slider-nav-ul {
display: block !important;
}
/*.liquid-slider a {
border-bottom: 1px solid #e5e5e5;
display: block;
padding: 12px 10px;
}
.liquid-slider a:hover .prominent-songs-name {
color: #CC0000;
}
.liquid-slider a:last-child {
border-bottom: none;
}
.prominent-songs-name {
width: 40%;
text-align: left;
display: inline-block;
color: #333333;
font-weight: 600;
background-color: none; ********** Este css es anulado por pertenecer al antiguo estilo del listado slider *********
}
.prominent-songs-band {
width: 35%;
text-align: left;
display: inline-block;
color: #999999;
background-color: none;
}
.prominent-songs-rating {
background-color: none;
text-align: right;
float: right;
}
.prominent-star-on {
width: 10px;
height: 10px;
}
.prominent-star-on:after {
content: "\f005";
color: #CC0000;
}
.prominent-star-off:after {
content: "\f005";
color: #999999;
}*/
/*Generic elements*/
.botonLogin {
}
.botonLogin a:hover{
color: #fff !important;
}
.button-generic{
padding: 5px 14px !important;
margin: 0px !important;
width: 100%;
height: 30px;
background-color: #cc0000;
color: #ffffff;
display: block;
text-align: center;
padding: 10px 0;
font-size: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.searchOptionPanel {
/*position: relative;*/
display: inline-block;
padding: 17px 18px 16px;
cursor: pointer;
color: #ffffff;
}
.searchOptionPanel:after {
content: "\f002";
display: inline-block;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-webkit-transition: color .2s;
-o-transition: color .2s;
transition: color .2s;
}
.searchOptionPanel:hover {
color: #CC0000;
}
.searchBandPanel {
position: absolute;
top: 60px;
right: 0;
left: 0;
margin: 0 auto;
width: 505px;
background: rgba(0, 0, 0, 0.85);
padding: 20px;
display: -webkit-flex;
display: none;
-webkit-justify-content: center;
justify-content: center;
z-index: 50;
}
.searchBandTextBox {
width: calc(100% - 76px) !important;
float: left;
padding: 4px 14px;
height: 40px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.button-inMenu{
padding: 5px 14px !important;
margin: 0px !important;
/*width: 100px;*/
height: 40px;
background-color: #cc0000;
color: #ffffff;
display: block;
text-align: center;
padding: 10px 0;
font-size: 15px;
-webkit-border-radius: 0 4px 4px 0px;
-moz-border-radius: 0 4px 4px 0px;
border-radius: 0 4px 4px 0px;
float: left;
cursor: pointer;
}
input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
}
.inlineDiv {
display:inline;
}
#singleMessageResponse, .singleMessageResponse {
width: 100%;
background-color: rgba(80,155,245,0.2);
border-color: #cbe1fc;
padding: 14px 0;
text-align: center;
margin: 160px auto;
}
#singleMessageResponse a {
color: #cc0000;
}
#singleMessageResponse a:hover {
text-decoration: underline;
}
.singleMessage {
margin: 30px 30px;
display:none;
}
/***************************/
/** DISEÑO REDES SOCIALES **/
/***************************/
/***** RIGHT BOX *****/
.container-right {
width: 100%;
height: auto;
background-color: none;
float: left;
}
.box-social {
width: 100%;
height: auto;
background-color: #f0f0f0;
padding: 10px 15px;
color: #666;
margin-bottom: 20px;
text-align: center;
}
#content_boxSocialTwitterPanel.box-social {
text-align: center !important;
padding: 10px 10px 4px !important;
}
.box-social-icons {
margin-top: 10px;
}
.social-facebook {
width: 30px;
height: 30px;
background-color: rgb(59, 89, 152);
fill: #fff;
display: inline-block;
margin-right: 5px;
}
.social-twitter {
width: 30px;
height: 30px;
background-color: rgb(85, 172, 238);
fill: #fff;
display: inline-block;
}
.container-right .right-box {
margin-left: 0;
float: none;
}
/***** FOOTER *****/
footer {
background-color: #333333;
}
.footer-content {
height: auto;
margin: 20px auto 0;
background: none;
}
.footer-content h1 {
font-size: 20px;
text-align: center;
line-height: 80px;
text-transform: uppercase;
color: #999999;
}
.footer-nav1 {
text-align: center;
padding: 30px 0 20px;
}
.footer-nav1 a {
color: #e9e9e9;
text-transform: uppercase;
font-size: 13px;
margin: 5px 15px;
display: inline-block;
}
.footer-nav2 {
text-align: center;
padding: 0 0 30px;
color: #666666;
text-transform: uppercase;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* nuevo css a la actualizacion de la publicidad 22-01-2018
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.ads_barraSuperior01_AdaptableGenericaPanel,
.ads_barraAdaptableInnerListPanel,
.ads_matchedContentGPB01PlaceHolder,
.ads_barraSuperior01_728x90GenericaPanel,
.ads_barraInferior01_970x90GenericaPanel {
text-align: center;
}
#up {
margin-top: 20px;
}
.ads_barraSuperior01_AdaptableGenericaPanel {
margin-top: 15px;
}
#content_ads_barraInferior01_728x90GenericaPanel_mediaNET,
#content_ads_barraSuperior01_728x90GenericaPanel {
max-width: 1130px;
width: 96%;
margin: 20px auto 0;
text-align: center;
}
@media screen and (min-width: 1130px) {
/********* HOME **********/
header .header-container, .slides-content-home, .publicity-home, .slider-playlist-prominent, .footer-content {
width: 1130px;
}
.slider-playlist-prominent {
margin: 60px auto;
}
.slides-content-home h2 {
padding: 0 100px;
}
.link-home-songs, .link-home-chords {
width: 50%;
float: left;
}
.link-home-songs a {
float: right;
width: 70%;
margin-right: 10px;
}
.link-home-chords a {
float: left;
width: 70%;
margin-left: 10px;
}
.link-home {
margin-top: 40px;
}
.prominent-pop-image {
width: 50%;
}
.prominent-images {
width: 35%;
float: left;
}
.prominent-songs {
width: 62%;
float: right;
}
#singleMessageResponse, .singleMessageResponse {
width: 70%;
}
/***************************/
/** DISEÑO REDES SOCIALES **/
/***************************/
/***** RIGHT BOX *****/
.container-right {
width: 300px;
float: left;
margin-left: 20px;
}
/* BOTTOM */
.adtester-container-104 .ob-widget-section {
width: 1130px;
margin: 20px auto;
}
}
@media screen and (max-width: 1129px) and (min-width: 768px) {
/********* HOME **********/
/*.slides-content {
top: calc(50% - 150px);
}*/
.slides-content-home figure {
margin: 0 auto;
text-align: center;
width: 95px;
height: 120px;
}
.svg-guitar {
width: 65px;
height: 65px;
top: 15px;
}
.slides-content-home h1 {
font-size: 38px;
margin: 15px 0 5px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
}
.slides-content-home h2 {
font-size: 24px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
padding: 0 150px;
}
.slider-playlist-prominent {
margin: 50px auto;
}
.link-home {
margin-top: 20px;
}
.link-home-songs {
float: left;
width: 50%;
}
.link-home-chords {
float: right;
width: 50%;
}
.link-home-songs a {
padding: 14px;
color: #510000;
font-size: 16px;
float: right;
width: 65%;
margin-right: 10px;
font-weight: bold;
}
.link-home-chords a {
padding: 14px;
color: #510000;
font-size: 16px;
margin-left: 10px;
float: left;
width: 65%;
font-weight: bold;
}
.next-box, .next-box a {
width: 35px;
height: 35px;
}
.next-box a:before {
/*font-size: 25px;
top: 20px;
left: 9px;*/
width: 35px;
height: 35px;
top: 2px;
}
.ls-nav {
margin-top: 15px;
}
#singleMessageResponse, .singleMessageResponse {
width: 80%;
}
.prominent-images {
width: 35%;
float: left;
}
.prominent-songs {
width: 62%;
float: right;
}
}
/*************** NAV LANGUAGES *****************/
@media screen and (max-width: 830px) and (min-height: 320px) {
.languajes {
margin-right: 20px;
}
.icon-languajes {
background: url(/css/img/flags/mundo.png) center 17px no-repeat;
background-size: 60% !important;
}
}
@media screen and (max-width: 767px) and (min-width: 481px) {
/********* HOME **********/
/*.slides-content {
top: calc(50% - 120px);
}*/
.slides-content-home figure {
width: 80px;
height: 100px;
text-align: center;
}
.svg-guitar {
width: 50px;
height: 50px;
top: 15px;
}
.slides-content-home h1 {
font-size: 28px;
margin: 15px 0 5px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
}
.slides-content-home h2 {
font-size: 20px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
margin-bottom: 20px;
}
.link-home {
margin-top: 10px;
}
.link-home-chords a {
padding: 11px 0 9px;
color: #510000;
font-size: 16px;
float: right;
width: 48%;
margin-right: 0px;
font-weight: bold;
}
.link-home-songs a {
padding: 11px 0 8px;
color: #510000;
font-size: 16px;
margin-left: 0px;
float: left;
width: 48%;
font-weight: bold;
}
.dutch .link-home-chords a, .dutch .link-home-songs a {
font-size: 12px;
}
.svenska .link-home-chords a, .svenska .link-home-songs a {
font-size: 12px;
}
.next-box, .next-box a {
width: 35px;
height: 35px;
}
.next-box a:before {
width: 35px;
height: 35px;
top: 2px;
}
.slider-playlist-prominent {
margin-top: 10px;
}
.prominent-images, .prominent-images-bg1, .prominent-images-bg2 {
height: 200px;
}
.header-songs-pop a, .header-songs-rock a {
font-size: 16px;
padding: 13px 15px;
}
.prominent-songs-link a {
padding: 12px 0 10px;
font-size: 14px;
}
.prominent-songs-name {
width: 100%;
display: block;
}
.prominent-songs-band {
width: 60%;
display: block;
}
.prominent-songs-rating {
width: 30%;
position: relative;
bottom: 18px;
}
.prominent-songs-link {
margin-top: 10px;
}
.ls-nav {
margin-top: 15px;
}
.ls-nav ul {
width: 100%;
}
.ls-nav ul li {
width: 16%;
}
.ls-nav ul li:first-child {
margin-right: 6px;
}
.ls-nav ul li a {
width: 100%;
text-align: center;
}
#singleMessageResponse, .singleMessageResponse {
margin: 100px auto;
}
/* button latest songs */
.box-newSongs-popularSongs {
top: 0;
}
}
@media screen and (max-width: 480px) and (min-width: 300px) {
/********* HOME **********/
/*.slides-content {
top: calc(50% - 120px);
}*/
.slides-content-home figure {
width: 60px;
height: 60px;
}
.svg-guitar {
width: 40px;
height: 40px;
top: 10px;
}
.slides-content-home h1 {
font-size: 25px;
margin: 15px 0 5px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
}
.slides-content-home h2 {
font-size: 16px;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999;
margin-bottom: 20px;
}
.link-home {
margin-top: 10px;
}
.link-home-chords a {
padding: 10px 0;
color: #510000;
font-size: 11px;
float: right;
width: 48%;
margin-right: 0px;
font-weight: bold;
}
.link-home-songs a {
padding: 10px 0;
color: #510000;
font-size: 11px;
margin-left: 0px;
float: left;
width: 48%;
font-weight: bold;
}
.dutch .link-home-chords a, .dutch .link-home-songs a {
font-size: 8px;
}
.svenska .link-home-chords a, .svenska .link-home-songs a {
font-size: 8px;
}
.next-box, .next-box a {
width: 35px;
height: 35px;
bottom: 10%;
}
.slider-playlist-prominent {
margin-top: 7px;
}
.next-box a:before {
/*font-size: 25px;
top: 20px;
left: 9px;*/
width: 35px;
height: 35px;
top: 2px;
}
.prominent-images, .prominent-images-bg1, .prominent-images-bg2 {
height: 200px;
}
.header-songs-pop a, .header-songs-rock a {
font-size: 16px;
padding: 13px 15px;
font-weight: 600;
}
.prominent-songs-link a {
padding: 12px 15px 10px;
font-size: 14px;
}
.prominent-songs-name {
width: 100%;
display: block;
}
.prominent-songs-band {
width: 60%;
display: block;
}
.prominent-songs-rating {
width: 35%;
position: relative;
bottom: 21px;
}
.prominent-songs-link {
margin-top: 10px;
}
.ls-nav {
margin-top: 15px;
}
#singleMessageResponse, .singleMessageResponse {
margin: 80px auto;
}
.ls-nav ul {
width: 100%;
}
.ls-nav ul li {
width: 49%;
text-align: center;
}
.ls-nav ul li:first-child {
margin-right: 6px;
}
.ls-nav ul li a {
width: 100%;
}
header .logo img {
width: 182px;
padding: 5px 0;
}
/* button latest songs */
.box-newSongs-popularSongs {
width: 100%;
top: 0;
}
/* button small */
.prominent-songs-small {
margin-top: 15px !important;
padding-top: 25px !important;
}
.newpopular-button-small a {
width: 49% !important;
display: inline-block;
}
.newpopular-button-small a:last-child {
margin-left: 0.6%;
}
/* button large */
.prominent-songs-large {
margin-top: 15px !important;
padding-top: 60px !important;
}
.newpopular-button-large a {
width: 100% !important;
display: block;
}
.newpopular-button-large a:first-child {
margin-bottom: 4px;
}
/*ads*/
.ads_barraInferior01_336x280x2GenericaPanel {
display: none !important;
}
#list .ads_barraInferior01_336x280x2GenericaPanel, #songAds .ads_barraInferior01_336x280x2GenericaPanel #textLessons .ads_barraInferior01_336x280x2GenericaPanel{
display: none !important;
}
.ads_barraInferior01_320x100x2MovilPanel {
margin: 0px auto;
display: table !important;
/*width: 320px;*/
text-align: center;
}
.ads_barraInferior01_320x100MovilPanel, .ads_barraInferior02_320x100MovilPanel {
/*width: 320px;
height: 100px;
background-color: #ccc;*/
}
.ads_barraInferior01_320x100MovilPanel {
margin-bottom: 30px;
}
.ads_barraInferior02_320x100MovilPanel {
margin-top: 25px;
}
.ads_barraSuperior01_AdaptableGenericaPanel {
margin-top: 20px;
}
}
/*************** MENU RESPONSIVE max-width: 810px SIN SEARCH *****************/
@media screen and (max-width: 830px) and (min-height: 320px) {
/*************** MENU RESPONSIVE max-width: 810px SIN SEARCH *****************/
@media screen and (max-width: 830px) and (min-height: 320px) {
.header-container {
position: relative;
}
a.btn-nav {
display: block;
color: #ffffff;
position: absolute;
top: 10px;
right: 0;
font-size: 25px;
padding: 0;
background: #000;
z-index: 999;
}
a.btn-nav:after {
content: "\f0c9";
background: #000;
}
.nav-container {
width: 100%;
/*width: 270px;*/
height: 100%;
position: fixed;
top: 0;
left: -100%;
margin: 0;
background: #000000;
overflow: scroll;
z-index: 999;
}
.nav-container ul li {
width: 280px;
display: block;
margin: 0 auto;
}
.searchOptionPanel {
display: block;
width: 100%;
max-width: 450px;
margin: 0 auto;
}
.searchOptionPanel:after {
content: '';
display: none;
}
.searchBandPanel {
display: flex;
position: inherit;
width: 100%;
padding: 0;
background: none;
}
.button-inMenu {
/*width: 100px;*/
height: 40px;
padding: 0px 12px !important;
font-size: 14px;
}
input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
}
.searchBandTextBox {
width: 100% !important;
height: 40px !important;
padding: 0 0 0 8px;
}
.nav-container ul li a {
display: block;
padding: 18px 15px;
-webkit-transition: background .2s;
-o-transition: background .2s;
transition: background .2s;
font-size: 14px;
}
.nav-container ul li a:hover {
background: #000;
}
.nav-container ul li:hover .children {
display: none;
}
.nav-container ul li .children {
width: 100%;
position: relative;
}
.nav-container ul li .children li a {
display: block;
padding: 10px 25px;
background: #000;
}
.nav-container ul li .children li {
display: block;
border-bottom: 1px solid #000;
}
.nav-container ul li .children li:last-child {
border-bottom: none;
}
.nav-container ul li .children:after {
display: none;
}
.nav-container ul li a.li-search:after {
float: right;
top: 12px;
line-height: 0;
font-size: 22px;
margin-right: 4.6%;
}
a.nav-logo {
width: 180px;
display: block;
padding: 8px 0 6px;
font-size: 26px;
color: #ffffff;
margin-left: 4%;
}
a.nav-logo img {
width: 180px;
}
a.close-nav {
display: block;
position: absolute;
top: 16px;
right: 4%;
width: 22px;
height: 22px;
}
.separate-responsive {
width: 100%;
height: 1px;
background-color: #191919;
}
.button-generic {
width: 90%;
height: 45px;
padding: 12px 0 !important;
margin: 15px auto 25px !important;
}
.footer-nav1 a {
font-size: 12px;
margin: 5px 10px;
}
.footer-nav2 span {
font-size: 13px;
}
.btn-list-container a, .btn-intro-container a {
padding: 4px 5px;
font-size: 9px;
color: #eee;
}
}
/*Ads*/
.ads_barraSuperior01_728x90GenericaPanel {
margin: 20px auto;
width: 728px !important;
height: auto !important;
/*height: 90px;*/
/*background-color: #ccc;*/
}
.ads_barraSuperior01_AdaptableGenericaPanel {
text-align: center;
margin: 20px auto;
width: 100%;
height: auto !important;
/*height: 90px;*/
/*background-color: #ccc;*/
}
.ads_barraSuperior01_320x100GenericaPanel {
display: none;
}
.ads_barraInferior01_728x90GenericaPanel {
display: none;
}
.ads_barraInferior01_320x100GenericaPanel {
display: none;
}
.ads_barraInferior01_336x280x2GenericaPanel {
margin: 0px auto;
display: table;
}
.ads_barraInferior01_336x280GenericaPanel {
margin: 10px;
width: 336px;
height: 280px;
/*background-color: #ccc;*/
float: left;
}
.ads_barraInferior02_336x280GenericaPanel {
margin: 10px;
width: 336px;
height: 280px;
/*background-color: #000;*/
float: left;
}
#list .ads_barraInferior01_336x280x2GenericaPanel, #songAds .ads_barraInferior01_336x280x2GenericaPanel {
display: none;
}
.ads_barraInferior01_970x90GenericaPanel, .ads_matchedContentGPB01PlaceHolder {
margin: 20px auto;
width: 100%;
height: auto;
/*background-color: #ccc;*/
text-align: center;
}
.ads_barraSuperior01_970x90GenericaPanel {
margin: 0px auto;
width: 970px;
height: auto;
/*background-color: #ccc;*/
text-align: center;
}
.ads_barraInferior01_320x100x2MovilPanel {
display: none;
}
@media screen and (max-width: 970px) {
.ads_barraInferior01_970x90GenericaPanel {
display: none;
}
#list .ads_barraInferior01_336x280x2GenericaPanel, #songAds .ads_barraInferior01_336x280x2GenericaPanel #textLessons .ads_barraInferior01_336x280x2GenericaPanel{
margin: 0px auto;
display: table;
width: 336px;
}
.ads_barraSuperior01_970x90GenericaPanel {
margin: 0px auto;
width: 100%;
height: auto;
/*background-color: #ccc;*/
text-align: center;
}
}
@media screen and (max-width: 740px) {
/*Ads*/
.ads_barraSuperior01_728x90GenericaPanel {
display: none;
}
.ads_barraSuperior01_320x100GenericaPanel {
margin: 10px auto;
width: 320px;
height: 100px;
/*background-color: #ccc;*/
/*optimización para valueImpression*/
/*display: block;*/
display: table;
}
.ads_barraInferior01_728x90GenericaPanel {
display: none;
}
.ads_barraInferior01_320x100GenericaPanel {
display: none;
}
.ads_barraInferior01_336x280x2GenericaPanel {
margin: 0px auto;
display: table;
width: 336px;
}
.ads_barraInferior01_336x280GenericaPanel {
margin: 10px;
width: 336px;
height: 280px;
/*background-color: #ccc;*/
float: left;
}
.ads_barraInferior02_336x280GenericaPanel {
margin: 10px;
width: 336px;
height: 280px;
/*background-color: #000;*/
float: left;
}
}