/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@font-face {
    font-family: 'catamaranbold';
    src: url('../fonts/catamaran-bold-webfont.woff2') format('woff2'), url('../fonts/catamaran-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'catamaranlight';
    src: url('../fonts/catamaran-light-webfont.woff2') format('woff2'), url('../fonts/catamaran-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'catamaranregular';
    src: url('../fonts/catamaran-regular-webfont.woff2') format('woff2'), url('../fonts/catamaran-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'passionone';
    src: url('../fonts/passionone-regular-webfont.woff2') format('woff2'), url('../fonts/passionone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



html {
    color: #000;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
audio, canvas, iframe, img, svg, video {vertical-align: middle;}
fieldset {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.browserupgrade {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}
.ie7 .title {padding-top: 20px;}


body {
    font: 16px/26px 'catamaranregular', Arial;
}
h1, h2, h3, .logo{
    font-family: 'passionone';
    font-weight: normal;
}
strong{
    font-family: 'catamaranbold';
    font-weight: normal;
    font-style: none;
}
img.fondo{
    width: 100%;
    height: auto;
}


/**** Layout ****/ 
.wrapper{
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

/**** Preheader ****/
.preheader-container{ background: #292929;text-align: center; }
.preheader-container p{ line-height: 1em;color: #999; }
.preheader-container p a{ color: #999;text-decoration: none; }


/**** header ****/
.header-container{ background: #000; }
.header-container h1{ color: #fff; }
.header-container h1 a{ color: #fff;text-decoration: none;}
.header-container h1 a:hover{ opacity: 0.8; }


/**** Menu ****/
.header-container nav a{ color:#fff;text-decoration: none;font-family: 'passionone';color: #fff; }
.header-container nav a:hover{ color: #c5cdb3; }


/**** banner ****/
.banner-container{ position: relative; }
.banner-container h2{ width: 100%;color: #fff;text-align: center;z-index: 100;}


/**** Article *****/
article{ display: table;width: 100%; }
article .title, article .text{ display: table-cell; }
article .text p{ font-size: 1.1em;line-height: 1.3em; }
article .title{ vertical-align: middle; }
article .title h2{ text-align: center; }
article .text .phone{
    font-size: 1.5em; 
    color: #000;
    text-decoration: none;
}
article .text sup{
    vertical-align: bottom;
    font-size: 1.5em;
    margin: 0 10px;   
}
article .text a.mail{
    color: #000;
    text-decoration: none;
    font-family: 'catamaranbold';
}


/**** Mapa ****/
#map{margin-top: 2em;}
#map .leaflet-popup-content h3{font-size: 1.7em;margin: 5px 0!important;}


/**** Footer ****/
.footer-container{ background: #000;padding: 2.5em 0; }
.footer-container footer{ overflow: auto;color: #fff; }
.footer-container a{ color: #fff;text-decoration: none; }
.footer-container a:hover{ color: #c5cdb3; }
.footer-container .info{ margin: 0 0 1em 0;overflow: visible;font-size: 1em;}
.footer-container .info .phone{ font-size: 1.3em; }
.footer-container .info sup{vertical-align: bottom;}


/**** Botellas ****/
.bottle{overflow: visible;text-align: center;position: relative;}
.bottle img{ margin-bottom: 3em; }
.bottle h2{ margin: 0 0 15px 0; }
.bottle h3{ margin: 0 0 0.75em 0; }
.bottle .do{ font-family: 'catamaranlight'; }
.bottle .year{ font-family: 'catamaranbold'; }
.bottle .tecnic{ border-top: 4px solid #000;border-bottom: 4px solid #000;padding: 2em 0; }
.bottle .tecnic strong, .bottle .cata strong{ display: block; }
.bottle .cata, .bottle .tecnic{ line-height: 1.3em; }
.bottle .pdf{
    display: block;
    background: #b8b2a0;
    padding: 0.75em 0;
    color: #000;
    text-decoration: none;
    line-height: 1em;
    font-family: 'catamaranlight';
}
.bottle .pdf:hover{ background: #ece4ca; }






/* ==========================================================================
   Media Queries
   ========================================================================== */
    
    @media only screen and (min-width: 320px) and (max-width: 767px) {

    	.preheader-container{display: none;}
        .preheader-container p{ margin: 1em auto;font-size: 0.9em;line-height: 1.4em!important;width:85%; }
        .preheader-container p a{ margin-right: 1em; }

        .header-container{ text-align: center; }
        .header-container h1{ font-size: 2.2em;margin:0.75em 0 0.5em 0;}
        .header-container nav{ width: 100%;}
        .header-container nav ul{ padding: 0;margin:0 0 1em 0; }
        .header-container nav li{display: inline-block;}
        .header-container nav a{font-size: 1.1em;margin: 0 0.5em;font-family: 'catamaranregular'!important;}

        .banner-container h2{
            font-size: 1.1em;
            background: #b8b2a0;
            margin: 0 auto;
            padding: 10px 0!important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.62);
            font-family: 'catamaranregular'!important;
            line-height: 1.4em;
        }

        article{ display: block!important; }
        article .title, article .text{display: block!important; }
        article .text{ padding: 1em 1em 3em 1em;text-align: center; }
        article .title h2{ font-size: 1.8em;margin: 0;padding: 1em 0; }

        .bodega .wrapper, .tradicion .wrapper, .vinedos .wrapper, .elaboracion .wrapper{padding: 0;}
        .bodega .title{ background: #ece4ca; }
        .tradicion .title{ background: #c5cdb3;}
        .vinedos .title{ background: #b48e9d; }
        .elaboracion .title{ background: #b8b2a0;}
        .tradicion .title, .elaboracion .title{position: absolute;top: 0;left: 0;width: 100%;}
        .tradicion .text, .elaboracion .text{padding-top: 6em;}

        .footer-container .legal{ margin-bottom: 2em; }
        .footer-container .legal span{ font-size: 2.2em; }
        .footer-container .legal a{ margin: 0 0.25em; } 
        .footer-container .info, .footer-container .legal{ text-align: center;}
        .footer-container .info .phone{ font-size: 1.2em; }
        .footer-container .info sup{ margin: 0 0.5em;font-size: 1.4em;}

        .bottle{ width: 90%;margin: 1.5em 5% 5em 5%;padding-bottom: 2em; }
        .bottle img {width: 100%!important;height: auto!important;}

        .bottle h2{ font-size: 2.6em; }
        .bottle h3{ font-size: 1.7em; }
        .bottle .do{ font-size: 1.3em; }
        .bottle .year{ font-size: 1.4em; }
        .bottle .cata, .bottle .tecnic{font-size: 1.1em;}
        .bottle .pdf{
            font-size: 1.2em;
            margin: 2em 0 0 0;
            width: 100%;
        }

    }





    @media only screen and (min-width: 768px) and (max-width: 1199px){

        .preheader-container p{ margin: 6px 0 8px 0;font-size: 0.9em; }
        .preheader-container p a{ margin-right: 1em; }

        .header-container{ text-align: center; }
        .header-container h1{ font-size: 2.5em;margin:0.75em 0 0 0;}
        .header-container nav{ width: 100%;}
        .header-container nav ul{ padding: 0; }
        .header-container nav li{display: inline-block;}
        .header-container nav a{font-size: 1.4em;margin: 0 0 0 1.5em;}

        .banner-container h2{
            font-size: 3em;
            position: absolute;
            top: 40%;
            left: 0;
            text-shadow: 7px 4px 9px rgba(0, 0, 0, 0.62);
        }

        article .title{ width: 30%; }
        article .text{ width: 70%; }
        .bodega article .text, .vinedos article .text{ padding: 2em 1em 2em 3em;text-align: left; }
        .tradicion article .text, .elaboracion article .text{ padding: 2em 3em 2em 1em;text-align: right; }
        article .title h2{ font-size: 2em; }

        .bodega{
            background: #ece4ca;
            background: -moz-linear-gradient(left,  #ece4ca 30%, #ffffff 30%);
            background: -webkit-linear-gradient(left, #ece4ca 30%,#ffffff 30%);
            background: linear-gradient(to right, #ece4ca 30%,#ffffff 30%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2eea2e', endColorstr='#ffffff',GradientType=1 );
        }

        .tradicion{
            background: #c5cdb3;
            background: -moz-linear-gradient(left,  #ffffff 70%, #c5cdb3 70%);
            background: -webkit-linear-gradient(left, #ffffff 70%,#c5cdb3 70%);
            background: linear-gradient(to right, #ffffff 70%,#c5cdb3 70%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5cdb3',GradientType=1 );
        }

        .vinedos{
            background: #b48e9d;
            background: -moz-linear-gradient(left,  #b48e9d 30%, #ffffff 30%);
            background: -webkit-linear-gradient(left, #b48e9d 30%,#ffffff 30%);
            background: linear-gradient(to right, #b48e9d 30%,#ffffff 30%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b48e9d', endColorstr='#ffffff',GradientType=1 );
        }

        .elaboracion{
            background: #b8b2a0;
            background: -moz-linear-gradient(left,  #ffffff 70%, #b8b2a0 70%);
            background: -webkit-linear-gradient(left, #ffffff 70%,#b8b2a0 70%);
            background: linear-gradient(to right, #ffffff 70%,#b8b2a0 70%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8b2a0',GradientType=1 );
        }

        .footer-container .legal{ float: left; }
        .footer-container .legal span{font-size: 2.5em; }
        .footer-container .legal a{ margin: 0 0.25em; } 
        .footer-container .info{float: right;width: 400px;text-align: right;}
        .footer-container .info .phone{ font-size: 1.3em; }
        .footer-container .info sup{margin: 0 0.5em;font-size: 1.4em;}

        .bottle{ width: 32%;float: left;margin: 1.5em 0 5em 0;padding-bottom: 4em; }
        .bottle img {width: 100%!important;height: auto!important;}
        .bottle.row2{ margin-left: 2%;margin-right: 2%; }
        .bottle h2{ font-size: 2.6em; }
        .bottle h3{ font-size: 1.7em; }
        .bottle .do{ font-size: 1.3em; }
        .bottle .year{ font-size: 1.4em; }
        .bottle .cata, .bottle .tecnic{font-size: 1.1em;}
        .bottle .pdf{
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 1.2em;
            margin: 2.5em 0 0 0;
            width: 100%;
        }

    }





    @media only screen and (min-width: 1200px) {

        .wrapper { width: 1180px; }

        .preheader-container p{ margin: 6px 0 8px 0;font-size: 0.9em; }
        .preheader-container p a{ margin-right: 1em; }

        .header-container h1{ font-size: 2.5em;float: left;}

        .header-container nav{ float: right;margin-top: 1em; }
        .header-container nav li{display: inline-block;}
        .header-container nav a{font-size: 1.5em;margin: 0 0 0 1.5em;}

        .banner-container h2{
            font-size: 3.8em;
            position: absolute;
            top: 40%;
            left: 0;
            text-shadow: 7px 4px 9px rgba(0, 0, 0, 0.62);
        }

        article .title, article .text{ width: 50%; }
        .bodega article .text, .vinedos article .text{ padding: 3em 0 3em 6em;text-align: left; }
        .tradicion article .text, .elaboracion article .text{ padding: 3em 6em 3em 0;text-align: right; }
        article .title h2{ font-size: 3em; }

        .bodega{
            background: #ece4ca;
            background: -moz-linear-gradient(left,  #ece4ca 50%, #ffffff 50%);
            background: -webkit-linear-gradient(left, #ece4ca 50%,#ffffff 50%);
            background: linear-gradient(to right, #ece4ca 50%,#ffffff 50%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2eea2e', endColorstr='#ffffff',GradientType=1 );
        }

        .tradicion{
            background: #c5cdb3;
            background: -moz-linear-gradient(left,  #ffffff 50%, #c5cdb3 50%);
            background: -webkit-linear-gradient(left, #ffffff 50%,#c5cdb3 50%);
            background: linear-gradient(to right, #ffffff 50%,#c5cdb3 50%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5cdb3',GradientType=1 );
        }

        .vinedos{
            background: #b48e9d;
            background: -moz-linear-gradient(left,  #b48e9d 50%, #ffffff 50%);
            background: -webkit-linear-gradient(left, #b48e9d 50%,#ffffff 50%);
            background: linear-gradient(to right, #b48e9d 50%,#ffffff 50%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b48e9d', endColorstr='#ffffff',GradientType=1 );
        }

        .elaboracion{
            background: #b8b2a0;
            background: -moz-linear-gradient(left,  #ffffff 50%, #b8b2a0 50%);
            background: -webkit-linear-gradient(left, #ffffff 50%,#b8b2a0 50%);
            background: linear-gradient(to right, #ffffff 50%,#b8b2a0 50%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b8b2a0',GradientType=1 );
        }

        .footer-container .legal{ float: left; }
        .footer-container .legal span{font-size: 2.5em; }
        .footer-container .legal a{ margin: 0 0.25em; } 
        .footer-container .info{float: right;width: 400px;text-align: right;}
        .footer-container .info .phone{ font-size: 1.3em; }
        .footer-container .info sup{margin: 0 0.5em;font-size: 1.4em;}


        .bottle{ width: 32%;float: left;margin: 1.5em 0 5em 0;padding-bottom: 4em; }
        .bottle.row2{ margin-left: 2%;margin-right: 2%; }
        .bottle h2{ font-size: 3em; }
        .bottle h3{ font-size: 2em; }
        .bottle .do{ font-size: 1.5em; }
        .bottle .year{ font-size: 1.6em; }
        .bottle .cata, .bottle .tecnic{font-size: 1.1em;}
        .bottle .pdf{
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 1.35em;
            margin: 2.5em 0 0 0;
            width: 100%;
        }

    }




/* ==========================================================================
   Helper classes
   ========================================================================== */
    .hidden {display: none !important;visibility: hidden;}
    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
    .invisible {visibility: hidden;}
    .clearfix:before, .clearfix:after {content: " ";display: table;}
    .clearfix:after {clear: both;}
    .clearfix {*zoom: 1;}


/* ==========================================================================
   Print styles
   ========================================================================== */
    @media print {
        *, *:before, *:after {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
        a, a:visited {text-decoration: underline;}
        a[href]:after {content: " (" attr(href) ")";}
        abbr[title]:after {content: " (" attr(title) ")";}
        a[href^="#"]:after, a[href^="javascript:"]:after {content: "";}
        pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
        thead {display: table-header-group;}
        tr, img {page-break-inside: avoid;}
        img {max-width: 100% !important;}
        p, h2, h3 {orphans: 3;widows: 3;}
        h2, h3 {page-break-after: avoid;}
    }