/* CSS Document */ @font-face { font-family: 'elgar'; src: url('../tipo/elgar-regular-webfont.woff2') format('woff2'), url('../tipo/elgar-regular-webfont.ttf') format('truetype'), url('../tipo/elgar-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Century Bold'; src: url('../tipo/subset-CenturyGothic-Bold.eot'); src: url('../tipo/subset-CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'), url('../tipo/subset-CenturyGothic-Bold.woff2') format('woff2'), url('../tipo/subset-CenturyGothic-Bold.woff') format('woff'), url('../tipo/subset-CenturyGothic-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Century'; src: url('../tipo/subset-CenturyGothic.eot'); src: url('../tipo/subset-CenturyGothic.eot?#iefix') format('embedded-opentype'), url('../tipo/subset-CenturyGothic.woff2') format('woff2'), url('../tipo/subset-CenturyGothic.woff') format('woff'), url('../tipo/subset-CenturyGothic.ttf') format('truetype'); font-weight: normal; font-style: normal; } h1 { font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:1.375em; text-transform:uppercase; color:#fff; } h2 { font-family:Century, Arial, Helvetica, sans-serif; font-size:1em; color:#e4b4ff; line-height:1.25em; } h3 { font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:1em; color:#11be7b; text-transform:uppercase; } h4 { font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:1.375em; color:#ffbd4b; text-transform:uppercase; } h5 { font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:2em; color:#FFF; line-height:1.1em; } .alba { font-family:elgar, Georgia, "Times New Roman", Times, serif; } p { font-family:Century, Arial, Helvetica, sans-serif; font-size:0.938em; line-height:1.15em; color:#fff; } a { text-decoration:none; } strong { font-family:Century Bold, Arial, Helvetica, sans-serif; } img { max-width:100%; height:auto; box-sizing:border-box; /* descuenta borde */ } var nav = responsiveNav (".nav-collapse" { // Selector animate: true, // Boolean: Use CSS3 transitions, true or false transition: 400, // Integer: Speed of the transition, in milliseconds label: "Menu", // String: Label for the navigation toggle insert: "after", // String: Insert the toggle before or after the navigation customToggle: "", // Selector: Specify the ID of a custom toggle openPos: "relative", // String: Position of the opened nav, relative or static jsClass: "js", // String: 'JS enabled' class which is added to el init: function(){}, // Function: Init callback open: function(){}, // Function: Open callback close: function(){} // Function: Close callback }); html, body { margin:0; padding:0; font-size:90%; color:#fff; } #oculto { display:none; border:none; } #contenedor { width:100%; } .idioma { width:100%; background:#121212; float:left; } .creditos { width:100%; margin:0 auto; color:#663f77; text-align:center; font-size:0.688em; padding:5% 0 5% 0; font-family:Century, Arial, Helvetica, sans-serif; } .creditos a { color:#5b396a; } .coto { width:95%; margin:0 auto; text-align:right; } .coto li { font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:0.688em; float:right; } .coto li a { display:block; color:#663f77; text-decoration:none; padding: 0.85em 0.25em 0.85em 0.25em; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .coto li a:hover { color:#e4b4ff; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } header { width:100%; float:left; } .inicio { background: url(../img/Fondo-Inicio-C.png) no-repeat top center, #2d0245 ; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .shows { background: url(../img/Fondo-Shows-C.png) no-repeat top center, #2d0245 ; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .prensaa { background: url(../img/Fondo-Prensa-C.png) no-repeat top center, #2d0245 ; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .albabio { background: url(../img/Cabezal-Alba-C.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:5%; } .show { background: url(../img/Cabezal-Shows-C.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:5%; } .prensa { background: url(../img/Cabezal-Prensa-C.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:5%; } .logo a{ width:80%; padding:10% 10% 0% 10%; font-family:elgar, Georgia, "Times New Roman", Times, serif; font-size:4.063em; margin: 0 auto; display:block; text-align:center; color:#fff; text-decoration:none; } #contenido{ width:86%; padding:7%; text-align:center; } .degradado { background-image: linear-gradient(#550e3a, #2d0245) !important; } .separador { float:left; width:20%; margin:0 40% 0 40%; border-bottom:thin solid #fff; } .fila, .links { width:100%; float:left; padding:7% 0 7% 0; } .grupo { padding:0; } .links{ opacity:0.9; } .link { width:100%; float:left; font-family:Century, Arial, Helvetica, sans-serif; font-size:1em; color:rgba (255,255,255,0.8); margin:2% 0 2% 0; color:#fff; } .link a { color:#fff; } .lin { padding:5%; vertical-align:super; } .bloque { background-image: linear-gradient(#2d0245, #550e3a); float:left; width:100%; } .full{ width:100%; float:left; } .bio{ background:url(../img/Fondo-Alba-C.jpg) no-repeat top right, #550e3a; } .intro { text-align:left; padding:5% 10% 5% 0; } .fotos { width:100%; float:left; background-color:#222222; margin:0 auto; } .fotos li a{ width:100%; float:left; overflow:hidden; opacity:0.7; display:block; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; } .fotos a:hover{ opacity:1; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; } .logos { width:100%; float:left; } .logos li { float:left; width:50%; } .espada{ background:url(../img/espada.png) no-repeat center center; background-size:50%; } .col { width:100%; float:left; margin-bottom:5%; } .cita{ font-size:0.8em; color:#11be7b; margin-top:1em; text-transform:uppercase; } .notas { padding-bottom:5%; } #press a{ display:block; color:#093; } #press a:hover { color:#ffbd4b !important; } .fondito{ background-image: linear-gradient(#8a115b, rgba(255,255,255,0)); padding:20px; max-width:280px; margin:0 auto; } .ver { width:30%; margin:0 auto; font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:1em; margin-top:5%; } .ver a{ padding:10%; display:block; color:#ffbd4b; background-color:rgba(255,189,75,0.15); text-decoration:none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .ver a:hover { background-color:rgba(255,189,75,0.35); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } footer { background: url(../img/Fondo-Contacto-C.jpg) no-repeat top center ; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-top:thin solid #836c2d; width:100%; float:left; padding:5% 0 5% 0; } #oculto { display:none; border:none; } .video-responsive { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; } .video-responsive iframe, .video-responsive object, .video-responsive embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #formulario { width:100%; padding:5% 0 5% 0; float:left; } .campoChico { width:97%; height:1.75em; float:left; font-family:Century, Arial, Helvetica, sans-serif; font-size:0.938em; background-color:rgba(255,189,75,0.2); color:#fff; margin-bottom:3%; border:none; padding-left:3%; } ::placeholder { color:rgba(255,255,255,0.8); } .desplegable{ width:100%; color:rgba(255,255,255,0.8) } .desplega { background-color: #306; } .campoGrande { width:97%; height:8em; float:left; font-family:Century, Arial, Helvetica, sans-serif; font-size:0.938em; background-color:rgba(255,189,75,0.2); color:#fff; margin-bottom:3%; border:none; padding-left:3%; } .boton { width:40%; height:2em; float:right; font-family:Century Bold, Arial, Helvetica, sans-serif; font-size:0.938em; background-color:rgba(255,189,75,0.15); color:#fff; margin-bottom:8%; border:none; text-align:center; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; display:block; cursor: pointer; } .boton:hover{ background-color:rgba(255,189,75,0.35); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .cd-top { /* BACK TO TOP */ display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0, 0, 0, 0.7) url(../img/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: .5; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .2; } .no-touch .cd-top:hover { background-color: #000; opacity: 1; } /* TABLETA */ @media screen and (min-width:35em){ body { font-size:95%; } .inicio { background: url(../img/Fondo-Inicio.png) no-repeat top center, #2d0245; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .shows { background: url(../img/Fondo-Shows.png) no-repeat top center, #2d0245; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .prensaa { background: url(../img/Fondo-Prensa.png) no-repeat top center, #2d0245; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .albabio { background: url(../img/Cabezal-Alba.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:1.5%; } .show { background: url(../img/Cabezal-Shows.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:1.5%; } .prensa { background: url(../img/Cabezal-Prensa.jpg) no-repeat top center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-bottom:thin solid #a68733; padding-bottom:1.5%; } .logo a{ padding:5%; } #contenido{ width:80%; padding:0 10% 0 10%; } .intro { text-align:left; padding:10% 0 10% 0; width:70%; } .fotos li a{ width:50%; } .primera{ margin-top:10%; } .links{ padding:0; } .link { width:100%; margin:2% 0 2% 0; color:#fff; } .lin { padding:2.5%; vertical-align:super; } .bloque { padding:0; } .logos li { width:33.33%; } .separador { width:10%; margin:0 45% 0 45%; } .espada{ background-size:30%; padding:7% 5% 0 5%; } #formulario { padding:2.5% 0 2.5% 0; } .campoChico { width:48.5%; height:1.75em; margin-bottom:1%; padding-left:1.5%; } .medio { width:47.15%; margin-left:1%; float:right; } .desplegable{ width:48.8%; height:1.85em; padding-left:1%; float:right; } .campoGrande { width:98.3%; margin-bottom:1.5%; padding-left:1.5%; } .boton { width:25%; height:2.5em; margin-bottom:5%; } .creditos { padding:2.5% 0 2.5% 0; } } /* PC */ @media screen and (min-width:60em){ body { font-size:100%; } .albabio { padding-bottom:1.5%; } #contenido{ width:1000px; padding:0; margin:0 auto; } .intro { padding:7% 0 7% 0; width:40%; } .fotos li a{ width:20%; } #oculto { display:block; font-family:elgar, Georgia, "Times New Roman", Times, serif; font-size:4.063em; text-align:center; color:#fff; text-decoration:none; padding-top:0.7em; width:16%; } .bio{ background:url(../img/Fondo-Alba.jpg) no-repeat center center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; } .fila { padding:5% 0 5% 0; } .esp{ padding-bottom:0; } .logos li { width:16.66%; } .grupo{ padding:0 !important; } .primera{ margin-top:5%; } .espada{ background:url(../img/espada.png) no-repeat center center; background-size:15%; width:60%; padding:3% 20% 0 20%; } .chica { width:60%; padding:3% 20% 3% 20%; } .video { width:70%; margin:0 auto; } .col { width:30%; margin:0 1.5% 0 1.5%; } .fondito{ padding:35px; } #formulario { width:60%; padding:1% 20% 3% 20%; } .boton { width:20%; height:2em; margin-bottom:2%; } footer { background: url(../img/Fondo-Contacto.jpg) no-repeat top center ; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -ms-behavior: url(backgroundsize.min.htc); background-position:50% 50%; border-top:thin solid #836c2d; width:100%; float:left; padding:3% 0 3% 0; } .links{ width:90%; padding:0 3% 0 7%; } .link { width:25%; margin:2% 0 2% 0; } .lin { padding:2.5%; } .logo a{ display:none; padding:2%; } .coto { width:1000px; } .creditos { padding:1.25% 0 1.25% 0; } } @media screen and (min-width:90em){ .intro { padding:10% 0 10% 0; width:40%; } }