/* FONTS */
@font-face {
    font-family: 'Ubuntu';  
    src: url('../fonts/ubuntu/Ubuntu-R.ttf')  format('truetype')
}
@font-face {
    font-family: 'Antonio';  
    src: url('../fonts/antonio/Antonio-Regular.ttf')  format('truetype')
}

/* GLOBAL */
h1, h2, h3, h4 { font-family: "Antonio", sans-serif; color: #fff; }
h1 { font-size: 56px; }
h2 { font-size: 48px; }
h3 { font-size: 32px; }
h4 { margin: 8px 0; }
h5 { font-family: "Ubuntu", sans-serif; color: #fff; font-size: 16px; margin: 0px 0px 12px 0px; }
h6 { font-family: "Ubuntu", sans-serif; color: #ebd9b2; font-size: 24px; }
p { font-family: "Ubuntu", sans-serif; color: #fff; }
h3 span { font-size: 34px;}

/* HEADER */
#logo img { width: 160px; }
#logo-home img {  width: 500px !important; } /* NUEVO CSS LOGO HOME */
.uk-nav a { padding: 10x 0px; }

/* FOOTER */
#footer { background: url("../img/bg.jpg") repeat top center; }
#footer img { width: 120px; display: none !important; }
#footer a { color: #fff; }
#footer .uk-padding-small { padding: 8px !important;}

/* CONTENT */
.blue-text { color: #17275e; }
.gold-text { color: #ebd9b2; }
.orange-text { color: #B45623;}
.dark-text { color: #222; }
.grey-text { color: #444; }
.no-margin { margin: 0; }
#fairtrade { width: 124px; }
#fairtrade-text { font-size: 24px; }
.control { width: 40px; }
.uk-offcanvas-bar { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }
.uk-offcanvas-bar a { color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 21px; }
.uk-overlay-primary { padding: 16px; }

#volcanic-icons img { width: 120px; } /* clase para iconos volcan desktop */

#cocktails2 { background-color: #031227; }   
#cocktails2 h3 { margin: 12px 0px;}
#cocktails2 h4 { margin: 4px 0px; }
#volcano3 { background-color: #040716; }
.play img { width: 80px; }
.play { margin-left: -20px; }
#seal1 { margin: 0; display: none; }
#seal2 { display: none; }
#seal1 img { width: 200px; }
#seal2 img { width: 300px; }
#detail { padding: 64px; }
#detail h2 { color: #17275e; text-transform: uppercase; }
#detail h4 { color: #444;}
#detail h4 strong { text-transform: uppercase; }
#detail p { color: #444; }
#detail p strong { text-transform: uppercase; line-height: 32px; color: #17275e; }
#detail-prizes h2 { color: #222; }
#detail-prizes p { color: #222; line-height: 32px; }
#detail-prizes strong { font-size: 18px; }
.collection-content { bottom: 80; }
#story3 { background-color: #151924;}
#ultra h3, #super h3, #premium h3 { margin: 0; font-size: 28px; }
.bg-image { width: 100% !important; }
.bg-video { width: 100% !important; }
#stores .uk-modal-dialog { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }
#stores img { width: 100px; }
#stores h2, #stores h5 { color: #222; }
.uk-modal-close { color: #222; }
.uk-modal-close-full { color: #17275e; background-color: transparent !important; }
#story2 h5 { font-size: 21px; }
#responsibility .uk-modal-dialog { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }
#responsibility h2, #responsibility h4 { color: #222; }
#responsibility a { color: #222; font-family: "Antonio", sans-serif; font-size: 32px; }
#responsibility { color: #222; font-family: "Ubuntu", sans-serif; }
#responsibility img { width: 180px; }

.shop-modal .uk-modal-dialog { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }

/*#menu { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }*/
#menu .uk-list a { color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 21px; line-height: 40px; }
#menu-seal1 img { width: 140px; margin: 40px; }
#menu-seal2 { margin: 30px; }
#menu-seal2 img { width: 300px; }
#menu-logo { width: 180px; }
#menu-lng { padding: 20px; display: block; }
#menu .uk-button { background: transparent !important; color: #17275e !important; border: 1px #17275e solid; }
#menu-bottle { width: 280px; right: 316px; position: absolute; bottom: 0; }
/*#menu .uk-modal-close-full { position: relative; float: right; line-height: 21px; padding-top: 40px; }*/
#menu-lng { display: block; float: left; color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 21px; padding: 20px; }

/*#menu-mobile { background: url("../img/menu-bg.jpg") repeat top left; background-size: cover; }*/

#menu-mobile a { color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 30px; }  /* este elemento lo cambie el valor de font size era 21*/
#menu-mobile #menu-logo { width: 180px; }
#menu-mobile #menu-lng { padding: 20px; }
#menu-mobile .uk-button { background: transparent !important; color: #17275e !important; border: 1px #17275e solid; }
#menu-mobile .uk-list a { line-height: 50px; }   /* este elemento lo cambie el valor interlineado era 34*/

#pillars p { font-size: 12px; }
#pillars-mobile p { font-size:12px; }
#pillars .icon { width: 100px; }
#pillars-mobile .icon { width: 160px; }
#pillars li { font-size: 12px; line-height: 21px; margin: 0px; }
#pillars-mobile li { font-size: 12px; line-height: 21px; margin: 0px;}

/* BUTTONS */
.uk-button, .uk-button-default, .uk-button:active, .uk-button:visited { font-family: "Antonio", sans-serif; color: #fff !important; text-transform: uppercase; background-color: rgba(19, 20, 36, 0.6) !important; font-size: 16px; border: 1px solid #666 !important; padding: 0 16px; -webkit-transition: border 1s; transition: border 1s; }
.uk-button:hover { color: #fff; border: 1px #fff solid !important; background-color: rgba(19, 20, 36, 0.6); }
.uk-dotnav a { color: #fff !important; }
.uk-button span { padding-left: 16px; }
.uk-button-link { color: #ebd9b2 !important; font-family: "Antonio", sans-serif; font-size: 21px; }
.uk-button-large { padding: 0 21px; font-size: 18px; line-height: 42px; -webkit-transition: font-size .4s; transition: font-size .4s; }
.uk-button-large:hover { font-size: 21px; }
.uk-button-group { display: none; }
#collection1 .uk-slidenav { top: 60%; }
#collection2 .uk-slidenav { top: 60%; }
#collection3 .uk-slidenav { top: 60%; }
.active { font-weight: bold; }

/* LIGHTBOX */
.uk-lightbox { background-color: rgba(0, 0, 0, 0.8) !important; }
/*.uk-lightbox-items iframe { width: 640px; }*/

.uk-nav-divider { border-top-color: #17275e !important; }

.product-title { top: 62%; left: 5%; }
.product-title-right { top: 62%; right: 5%; }

#detail .uk-slidenav { top: 50%; }
#detail .uk-slidenav h3 { margin-bottom: 8px !important; color: #222; }
#detail .uk-list li { font-family: "Ubuntu", sans-serif; color: #444; }
#detail .uk-list li strong { text-transform: uppercase; color: #17275e; }

#detail-prizes h2 { text-transform: uppercase;}
#detail-prizes p { line-height: 24px; }
#detail-prizes { position: absolute !important; top: 8% !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; display: block !important; }
#detail { position: absolute !important; top: 0% !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; display: block !important; }

@media screen and (max-width: 1280px) {
    .extra-space { display: none; }
}

/* TABLET */
@media screen and (max-width: 980px) {
    #detail { position: relative !important; }
    #detail-prizes { position: relative !important; }
}

/* MOBILE */
@media screen and (max-width: 640px) {
    h1 { font-size: 38px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h3 span { font-size: 26px; }
    h5 { font-size: 16px; }
    p { font-size: 14px; }
    ul { font-size: 14px; }
    #fairtrade { width: 100%; }
    #cocktails2 { background-color: #031227; }   
    #volcanic-icons img { width: 100px; }
    #volcano3 { background-color: #040716; }
    #detail { margin-top: -20px; }
    #detail { position: relative !important; }
    #detail-prizes { position: relative !important; }
    .uk-sticky-fixed { position: inherit !important; }
    #ultra h3, #super h3, #premium h3 { margin: 0; font-size: 16px; }
    #collection1 h1, #collection2 h1, #collection3 h1 { font-size: 30px; }
    #ultra .uk-button-link, #super .uk-button-link, #premium .uk-button-link { font-size: 16px; }
    #stores img { width: 80px; }
    .uk-modal-title { font-size: 28px; }
    #story3 h5 { font-size: 16px; }  
    #home-link { padding: 20px; display: block; }
    #collection1 h5, #collection2 h5, #collection3 h5 { font-size: 13px; }
    #detail .uk-slidenav { top: 45%; }
     #ultra .uk-slidenav { top: 55%; } /* NUEVO para flechas */
    #super .uk-slidenav { top: 55%; }
    #premium .uk-slidenav { top: 55%; }
    /* CSS PARA PERMITIR QUE EL LOGO EN MOVIL CREZCA */
    #logo-home img { max-width: 9999px !important; }
    /* NUEVO CSS LOGO HOME, ANCHO Y ESPACIO ARRIBA */
    #logo-home img { width: 240px !important; margin-top: 16px !important; } 
}

@media screen and (max-width: 400px) {
    #menu-mobile a { font-size: 21px; }  /* IPHONE 6 Y 7 ,este elemento lo cambie el valor de font size era 18*/
    #menu-mobile #menu-logo { width: 140px; }
    #glasses-img { width: 200px; }
    #menu-mobile .uk-list a { line-height: 40px; }   /* este elemento lo cambie el valor interlineado era 34*/
}

@media screen and (min-width: 2500px) and (max-width: 3200px) {
    h1 { font-size: 72px; }
    h2 { font-size: 64px; }
    h3 { font-size: 48px; }
    h5 { font-size: 16px; }
    p { font-size: 24px; }
    ul { font-size: 24px; }
    #ultra h3, #super h3, #premium h3 { margin: 0; font-size: 24px; }
    #ultra .uk-button-link, #super .uk-button-link, #premium .uk-button-link { font-size: 24px; }
    #fairtrade { width: 100px; }
    .uk-container { max-width: 1920px; }
      /* BUTTONS */
    .uk-button, .uk-button-default, .uk-button:active, .uk-button:visited { font-family: "Antonio", sans-serif; color: #fff !important; text-transform: uppercase; background-color: rgba(19, 20, 36, 0.6) !important; font-size: 32px; border: 1px solid #666 !important; padding: 16px 32px; -webkit-transition: border 1s; transition: border 1s; }
    .uk-button:hover { color: #fff; border: 1px #fff solid !important; background-color: rgba(19, 20, 36, 0.6); }
    .uk-dotnav a { color: #fff !important; }
    .uk-button span { padding-left: 16px; }
    .uk-button-link { color: #ebd9b2 !important; font-family: "Antonio", sans-serif; font-size: 48px; }
    .uk-button-large { padding: 12px 21px; font-size: 32px; line-height: 42px; -webkit-transition: font-size .4s; transition: font-size .4s; }
    .uk-button-large:hover { font-size: 36px; }
    .uk-button-group { display: none; }
    .uk-slidenav { top: 60%; }
    
    /* MENU */
    .uk-offcanvas-bar a { color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 24px; }
.uk-overlay-primary { padding: 16px; }
}
/*
@media screen and (min-height: 800px) {
    .uk-width-2-3 { width: 50%; }
    .uk-wdith-1-3 { width: 50%; }
}
*/
@media screen and (min-width: 3240px) {
    h1 { font-size: 128px; }
    h2 { font-size: 96px; }
    h3 { font-size: 64px; }
    h5 { font-size: 32px; }
    h6 { font-size: 36px; }
    p { font-size: 32px; }
    #ultra h3, #super h3, #premium h3 { margin: 0; font-size: 24px; }
    #ultra .uk-button-link, #super .uk-button-link, #premium .uk-button-link { font-size: 24px; }
    #fairtrade { width: 140px; }
    .uk-container { max-width: 2800px; }
   /* BUTTONS */
    .uk-button, .uk-button-default, .uk-button:active, .uk-button:visited { font-family: "Antonio", sans-serif; color: #fff !important; text-transform: uppercase; background-color: rgba(19, 20, 36, 0.6) !important; font-size: 32px; border: 1px solid #666 !important; padding: 16px 32px; -webkit-transition: border 1s; transition: border 1s; }
    .uk-button:hover { color: #fff; border: 1px #fff solid !important; background-color: rgba(19, 20, 36, 0.6); }
    .uk-dotnav a { color: #fff !important; }
    .uk-button span { padding-left: 16px; }
    .uk-button-link { color: #ebd9b2 !important; font-family: "Antonio", sans-serif; font-size: 48px; }
    .uk-button-large { padding: 12px 21px; font-size: 32px; line-height: 42px; -webkit-transition: font-size .4s; transition: font-size .4s; }
    .uk-button-large:hover { font-size: 36px; }
    .uk-button-group { display: none; }
    .uk-slidenav { top: 60%; }
    /* MENU */
    .uk-offcanvas-bar a { color: #17275e !important; font-family: "Antonio", sans-serif; font-size: 24px; }
.uk-overlay-primary { padding: 16px; }
#volcanic-icons img { width: 300px; }
}