@font-face {
    font-family: 'normal';
    src: url('../fonts/normal.eot');
    src: url('../fonts/normal.woff') format('woff');
}

@font-face {
    font-family: 'bold';
    src: url('../fonts/bold.eot');
    src: url('../fonts/bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
	font-family: ebde;
	src: url('../fonts/ebde.eot');
	src: url('../fonts/ebde.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@media all {
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
    
    .player{
         height:43px;
    width:43px;
    background-image:url(../img/audio-speaker.png);
    position:absolute;
    top:4px;
    right:10px;
    cursor:pointer;
    display:block;
    -webkit-tap-highlight-color:transparent;
    margin:0 auto;
    }
    
    .player.on{
        background-position:0px 43px;
    }

    .player.off{
        background-position:0px 0px;
    }
    
    .compra {
        margin-left:auto;
        margin-right:auto;
        cursor:pointer;
        width:72px;
        height:30px;
        background-image: url(../img/reservar.png);
        background-color: transparent;
        background-repeat: no-repeat;
    }
    .compra:hover {background-position: -73px 0; }

    p {
    font-family:normal;
    color:#FFF;
    font-size:26px;
    }
    
    h1 {
    font-family:bold;
    color:#FFF;
    font-size:46px;
    }
    
    b {
    font-family:bold;
    color:#000;
    font-size:26px;
    }
    
    a {
    font-family:ebde;
    color:#FFF;
    font-size:26px;
    }
    
    a:link {
    color:#FFF;
    text-decoration:none;
    }
    
    .menu {
    font-family:ebde;
    color:#000;
    font-size:24px;
    }
    
    .cabecera {
    background-color:rgba(0,0,0,0.68);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    left:0;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:1000;
    }
    
    .header-logo {
        position:relative;
        top:10px;
    }
    
    .head-element {
    -webkit-transition:text-shadow .1s linear;
    -moz-transition:text-shadow .1s linear;
    -ms-transition:text-shadow .1s linear;
    -o-transition:text-shadow .1s linear;
    transition:text-shadow .1s linear;
    position:relative;
    margin:25px;
    }
    
    .head-element:hover {
    -webkit-stroke-width:10px;
    -webkit-stroke-color:#FFF;
    -webkit-fill-color:#FFF;
    text-shadow:2px 0 10px #FFF;
    }
    
    .head-element:active {
    text-shadow:2px 0 10px red;
    }
    
    nav {
    text-align:center;
    }
    
    nav * {
    display:inline;
    }
    
    nav span {
    display:inline-block;
    position:relative;
    width:10%;
    height:0;
    }
    
    #splash .flecha-big {
    height:60px;
    width:60px;
    background-image:url(../img/arrow-big.png);
    position:relative;
    top:40px;
    cursor:pointer;
    display:block;
    -webkit-tap-highlight-color:transparent;
    margin:0 auto;
    }
    
    .story {
    height:1000px;
    width:100%;
    max-width:1920px;
    position:relative;
    border-top:1px solid rgba(255,255,255,0.3);
    border-bottom:1px solid rgba(0,0,0,0.4);
    box-shadow:0 0 50px rgba(0,0,0,0.8);
    margin:0 auto;
    padding:0;
    }
    
    .flecha-down {
    height:33px;
    width:72px;
    background-image:url(../img/arrow-down.png);
    position:relative;
    top:11px;
    cursor:pointer;
    display:block;
    -webkit-tap-highlight-color:transparent;
    margin:0 auto;
    }
    
    .flecha-up {
    height:33px;
    width:72px;
    background-image:url(../img/arrow-up.png);
    position:relative;
    top:-11px;
    cursor:pointer;
    display:block;
    -webkit-tap-highlight-color:transparent;
    margin:0 auto;
    }
    
    #splash {
    background:url(../img/bg-mid.png) 50% 0 repeat fixed;
        height:1080px;
    }
    
    #disco {
    background:url(../img/studio.jpg) 50% 0 no-repeat fixed;
    padding:50px 0;
    }
    
    #artwork {
    background:url(../img/slide3.jpg) 50% 0 no-repeat fixed;
        height:1080px;
    }
    
    #colabs {
    background:url(../img/colabs.jpg) 50% 0 no-repeat fixed;
        height:1080px;
    }
    
    #compra {
    background:url(../img/bg-mid.png) 50% 0 repeat fixed;
        height:1080px;
    }
    
    #splash .liberalo {
    background:url(../img/liberalo.png) 50% 200px no-repeat fixed;
    min-height:1080px;
    width:100%;
    max-width:1920px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #splash .ebde {
    position:relative;
    top:40px;
    font-family:ebde;
    color:#000;
    font-size:46px;
    }
    
    #splash p {
    position:relative;
    top:1.4em;
    color:#000;
    }
    
    #splash .message {
    position:relative;
    top:7px;
    height:203px;
    background-color:rgba(255,255,255,0.4);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    text-align:center;
    width:100%;
    z-index:1000;
    }
    
    #splash article {
    width:100%;
    top:350px;
    position:absolute;
    text-align:center;
    }
    
    #splash article a {
    color:#ccc;
    text-decoration:underline;
    }
    
    #splash article a:hover {
    color:#fff;
    }
    
    #disco article {
    background:url(../img/grain.png) repeat #333;
    color:#fff;
    width:445px;
    margin-left:100px;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    line-height:1.5em;
    box-shadow:0 0 25px rgba(0,0,0,0.3);
    border:1px solid rgba(150,150,150,0.1);
    padding:10px 20px;
    }
    
    #disco article p {
    margin-bottom:25px;
    }
    
    #disco article a {
    color:#ff0;
    }
    
    #disco h1{
        text-align:center;
        color:rgb(199, 186, 156);
        margin-top:5px;
        margin-bottom:15px;
    }
    
    #disco p, b{
        text-align:justify;
        margin-top:20px;
        font-size:18px;
    }
    
    #disco b{
        color:rgb(199, 186, 156);
    }
    
    .disco-article {
        position:relative;
        top:40px;
    }
    
    #colabs h1 {
        text-align:center;
        color:rgb(199, 186, 156);
        margin-bottom:25px;
    }
    
    #colabs article {
    background:url(../img/grain.png) repeat #333;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    line-height:1.5em;
    color:#fff;
    position:absolute;
    top:10px;
    box-shadow:0 0 25px rgba(0,0,0,0.3);
    border:1px solid rgba(150,150,150,0.1);
    margin:80px 0 0 54%;
    padding:10px 20px;
    }
    
    #colabs .photograph {
    background:url(../img/maria.png) transparent 40% 100px no-repeat fixed;
    min-height:1080px;
    width:100%;
    max-width:1920px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #colabs article p {
    width:450px;
    margin-bottom:25px;
    text-align:justify;
    margin-top:20px;
    font-size:20px;
    }
    
    #colabs b{
        color:rgb(199, 186, 156);
        font-size:20px;
    }
    
    #artwork article {
        width:400px;
        background:url(../img/grain.png) repeat #333;
        line-height:1.5em;
        color:#fff;
        position:relative;
        margin:85px 0 0 5%;
        padding:10px 20px;
    }
    
    #artwork h1 {
        text-align:center;
        color:rgb(199, 186, 156);
        margin-bottom:25px;
        margin-top:15px;
    }
    
    #artwork article p {
        text-shadow:0 -1px 0 rgba(0,0,0,0.5);
        text-align:justify;
        font-size:20px;
        width:400px;
        margin:30px 0;
    }
    
    #artwork b{
        color:rgb(199, 186, 156);
        font-size:20px;
    }
    
    #compra .byebye {
    background:url(../img/theend.png) 40% 100px no-repeat fixed;
    height:1080px;
    width:100%;
    max-width:1920px;
    position:relative;
    margin:0 auto;
    top:-175px;
    padding:0;
    }
    
    #compra .alert {
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    margin-bottom:27px;
    width:710px;
    font-family:ebde;
    color:#000;
    font-size:46px;
    -webkit-stroke-width:10px;
    -webkit-stroke-color:#FFF;
    -webkit-fill-color:#FFF;
    text-shadow:2px 0 10px #FFF;
    }
    
    #compra span{
        margin-left:auto;
        margin-right:auto;
    }
    
    #compra .advice{
        background-color: rgba(80, 186, 61, 0.8);
        border-radius:10px;
        padding: 8px;
        max-width:1200px;
        margin-top:30px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        font-family:normal;
        color:#000;
        font-size:20px;
        box-shadow:0 0 25px rgba(0,0,0,0.3);
    }
     #compra .advice a{
    -webkit-transition:color .2s linear;
    -moz-transition:color .2s linear;
    -ms-transition:color .2s linear;
    -o-transition:color .2s linear;
    transition:color .2s linear;
        font-family:bold;
        font-size:20px;
    }
    #compra .advice a:hover{
        
        color:#000;
    }
    
    table a{
        font-family:bold;
    }
    
    table a:link {
	text-decoration:none;
}
table a:visited {
	text-decoration:none;
}
table a:active,
table a:hover {
        -webkit-transition:color .2s linear;
    -moz-transition:color .2s linear;
    -ms-transition:color .2s linear;
    -o-transition:color .2s linear;
    transition:color .2s linear;
	color: rgb(199, 186, 156);
	text-decoration:none;
}
table {
	background:url(../img/grain.png) repeat #333;
	color:#dbdbdb;
	font-size:12px;
	text-shadow: 1px 1px 0px #383838;
	background:#000;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
	border:#4a4a4a 1px solid;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}
table th {
	padding:11px 15px 12px 15px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #000;
	background:url(../img/grain.png) repeat #333;
    font-size:14px;
    font-family:bold;
        vertical-align:middle;
}
table th:first-child {
	text-align: left;
	padding-left:20px;
}
table tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table tr {
	text-align: center;
	padding-left:5px;
        
}
table td:first-child {
    font-family:bold;
        vertical-align:middle;
	text-align: center;
    font-size:16px;
}
table td {
	padding:5px;
	border-top: 1px solid #ce9a26;
	border-bottom:1px solid #dbb35a;
	border-left: 1px solid #e0c487;
	background:url(../img/grain.png) repeat #333;
        vertical-align:middle;
}
table tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td {
       color:#dec572;
	   border-bottom:0;
       height:30px;
       font-family:bold;
       font-size:30px;
       border-top: 1px solid #000;
}
table tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
    font-family:bold;
	text-align: center;
    font-size:16px;
    color:#d1d1d1;
}
table tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
table tr:hover td {
	background: rgb(199, 186, 156);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(199, 186, 156)), to(#4b4b4b));
	background: -moz-linear-gradient(top,  rgb(199, 186, 156),  #4b4b4b);
}
.tick, .cross{
	background: url(../img/sprites.png) no-repeat;
    margin-left:auto;
    margin-right:auto;
}

.tick{
	background-position: 0 0;
	width:36px;
	height: 36px;
}

.cross{
	background-position: -37px 0;
	width: 36px;
	height: 36px;
}
}

@media (max-width:900px){
    .header-logo {
        display:none;
    }
    #colabs article {
    text-shadow:none;
    position:relative;
    width:450px;
    top:-900px;
    left:-250px;
    box-shadow:none;
    }

    #disco article{
        margin-left:150px;
    }

    #artwork article {
    margin:80px 0 0 54%;
    padding:10px 20px;
    text-shadow:none;
    position:relative;
    left:-220px;
    box-shadow:none;
    }
    
    table{
        width:680px;
    }
    table tr{
        width:680px;
    }
    table td{
        width:50px;
    }

}

@media (max-width:700px){
    .story {
    max-width:700px;
    }
    .head-element {
        margin:15px;
        font-size:20px;
    }
    #splash .liberalo {
        background:url(../img/liberalo-min.png) 50% 200px no-repeat fixed;
        width:100%;
        max-width:400px;
        position:relative;
        margin:0 auto;
        padding:0;
    }
    #disco article {
        margin-left:80px;
    }
    table{
        width:580px;
    }
    table th{
        max-width:40px;
        font-size:10px;
    }
    table tr{
        width:580px;
    }
    table td{
        width:40px;
        max-width:40px;
    }
table td:first-child {
    font-size:10px;
}

table tr:last-child td {
    font-size:10px;
    }
    #compra .alert {
    width:610px;
    font-size:38px;
    }
}

@media (max-height:900px){
    #splash {
        height:900px;
    }
    
    #disco {
    height:900px;
    }
    
    #artwork {
    height:900px;
    }
    
    #colabs {
     height:900px;
    }
    
    #compra {
    height:900px;
    }
    #colabs .photograph {
    background:url(../img/maria.png) transparent 40% 100px no-repeat fixed;
    min-height:900px;
    width:100%;
    max-width:1920px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    #compra .alert{
        margin-top:55px;
    }
}

@media (max-height:850px){
    #splash {
        height:850px;
    }
    
    #disco {
    height:850px;
    }

    #disco h1{
    font-size:24px;
    margin-top:5px;
    margin-bottom:15px;
    }

    #disco article p,b{
    font-size:18px;
    margin-bottom:20px;
    }

    #disco article {
    line-height:1.3em;
    padding:10px 20px;
    }
    
    #artwork {
    height:850px;
    }
    
    #colabs {
     height:850px;
    }
    
    #compra {
    height:850px;
    }
}

@media (max-height:697px){
    #splash {
        height:697px;
    background:url(../img/bg-mid.png) 50% 0 repeat fixed;
    }
    
    #disco {
    height:697px;
    background:url(../img/studio-mid.jpg) 50% 0 repeat fixed;
    }

    #disco h1{
    font-size:24px;
    margin-top:3px;
    margin-bottom:5px;
    }

    #disco article p,b{
    font-size:17px;
    margin-bottom:5px;
    }

    #disco article {
    line-height:1.3em;
    width:500px;
    padding:5px 20px;
    }

    #colabs .photograph {
    background:url(../img/maria-mid.png) transparent 40% 100px no-repeat fixed;
    }

    
    #artwork {
    background:url(../img/slide3-mid.jpg) 50% 0 repeat fixed;
    height:697px;
    }
    
    #colabs {
     height:697px;
    background:url(../img/colabs-mid.jpg) 50% 0 repeat-x fixed;
    }

    #colabs h1{
    font-size:34px;
    margin-top:3px;
    margin-bottom:5px;
    }

    #colabs article p,b{
    font-size:17px;
    margin-bottom:5px;
    }

    #colabs article {
    line-height:1.3em;
    padding:5px 20px;
    }
    
    #compra {
    height:697px;
    background:url(../img/bg-mid.png) 50% 0 repeat fixed;
    }

    #compra .alert {
    width:610px;
    font-size:40px;
    }
}