@charset "UTF-8";

/* Put your styles into the appropriate breakpoints below. */


/* BEGIN Logo Font Call */

@font-face {
  font-family: "papillon-marks";
  src:url("../fonts/papillon-marks.eot");
  src:url("../fonts/papillon-marks.eot?#iefix") format("embedded-opentype"),
    url("../fonts/papillon-marks.woff") format("woff"),
    url("../fonts/papillon-marks.ttf") format("truetype"),
    url("../fonts/papillon-marks.svg#papillon-marks") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "papillon-marks" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "papillon-marks" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-papillon-mark:before {
  content: "\70";
}
.icon-papillon-mark-full:before {
  content: "\50";
}

/* END Logo Font Call */




/***** XS (Extra Small) – Mobile Size AND ABOVE *****/
    
    body {
        font-family: 'Open Sans', sans-serif;
        color: #222;
    }
    
    .hero-gradient {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,111111+100&0+45,0.9+55,1+100 */
        background: -moz-linear-gradient(top, rgba(17,17,17,0) 0%, rgba(17,17,17,0) 45%, rgba(17,17,17,0.9) 55%, rgba(17,17,17,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(17,17,17,0) 0%,rgba(17,17,17,0) 45%,rgba(17,17,17,0.9) 55%,rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(17,17,17,0) 0%,rgba(17,17,17,0) 45%,rgba(17,17,17,0.9) 55%,rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00111111', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
    }
    
    .hero-bg {
        background-repeat: no-repeat;
        background-position: top;
        background-size: 60%;
    }
    
    .home-hero {background-image: url(../img/bottles.png);}
    .flavor-hero {background-image: url(../img/grape-cluster.png);}
    
    header {
        font-size: 12px;
        color: #fff;
        background-color: #161616;
    }
    
    header ul {
        padding: 10px 0;
        background-color: rgba(0,0,0,0.75);
    }
    
    header p {
        color: #aaa;
        font-size: 1.4em;
        text-shadow: 0 0 5px rgba(0,0,0,1);
        margin-bottom: 0px;
        line-height: 27px;
    }
    
    header i {
        color: #fff;
    }
    
    header .section-intro {
        font-size: 2.0rem;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-style: italic;
        display: inline-block;
        margin-bottom: -40px;
    }
    
    nav {
        margin: 0;
    }
    
    nav ul {
        text-align: center;
    }
    
    nav li {
        list-style: none;
        list-style-position: inside;
        display: inline-block;
        padding-right: 25px;
    }
    
    nav li:last-child {
        padding-right: 0;
    }
    
    nav a {
        color: #fff;
        text-decoration: none;
    }
    
    nav a:hover {
        text-shadow: 0 0 10px rgba(255, 123, 0, 0.75);
        text-decoration: underline;
    }
    
    h2 {
        font-size: 2.1em;
        margin: 45px 0 15px 0;
        padding-bottom: 15px;
        text-align: center;
        font-weight: 600;
        font-style: italic;
    }
    
    h3 {
        font-size: 2.2em;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 25px;
        font-weight: 700;
    }
    
    h4 {
        font-size: 1.6em;
        font-weight: 600;
        color: #777;
        margin-bottom: 6px;
        display: block;
    }
    
    p {
        font-size: 1.4em;
        line-height: 22px;
        margin-bottom: 16px;
    }
    
    .last-p {
        margin-bottom: 60px;
    }
    
    .last-li {
        margin-bottom: 16px;
    }
    
    .social-link {
        color: inherit;
        font-weight: 700;
    }
    
    .social-link:hover {
        text-decoration: underline;
    }
    
    ul {
        font-size: 1.2em;
        list-style: square;
        list-style-position: outside;
        padding-left: 18px;
    }
    
    .ingredients {
        list-style: none;
        padding-left: 0;
        
    }
    
    .flavor-thumb {
        height: 120px;
        width: 120px;
        margin: 20px auto;
        border-radius: 50%;
        border: solid 2px #ff7b00;
        background-size: cover;
    }
    
    .flavor {
        color: #fff;
        font-size: 2.0em;
        font-weight: 600;
        text-align: center;
        margin: 12px auto 30px auto;
    }
    
    .flavor-thumb:hover {
        box-shadow: 0 0 10px 5px #333;
    }
    
    .flavor:hover {
        color: #ffb875;
    }
    
    .flavor-image-full {
        height: 250px;
        background-position: center;
    }
    
    .flavor-button {
        text-align: center;
        font-weight: 600;
        font-size: 2.1em;
        margin-bottom: 45px;
    }
    
    .flavor-link {
        color: #444;
        margin-bottom: 45px;
    }
    
    .flavor-link:hover {
        color: #ff7b00;
    }
    
    ul {
        font-size: 1.4em;
        list-style: square;
        list-style-position: outside;
        padding-left: 18px;
    }
    
    li {
        margin-bottom: 6px;
        line-height: 18px;
    }
    
    footer {
        background-color: #ff7b00;
        padding: 25px 0;
        color: #fff;
        text-align: center;
    }
    
    .full-logo, .sm-logo {
        font-family: "papillon-marks";
    }
    
    .full-logo {
        font-size: 14.0rem;
        margin: 20px 0 60px 0;
        padding: 0;
        text-align: center;
    }
    
    .recipe-image {
        height: 150px;
        margin-bottom: 25px;
        background-position: 50% 25%;
    }
    
    .recipe-detail {
        margin-bottom: 25px;
    }
    
/***** END XS (Extra Small) */




/***** SM (Small) - Tablet Size AND ABOVE! (768px) */
@media (min-width: 768px) {
	
    .hero-gradient {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,111111+60&0+50,0.9+60,1+85 */
        background: -moz-linear-gradient(top, rgba(17,17,17,0) 0%, rgba(17,17,17,0) 50%, rgba(17,17,17,0.9) 60%, rgba(17,17,17,1) 85%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(17,17,17,0) 0%,rgba(17,17,17,0) 50%,rgba(17,17,17,0.9) 60%,rgba(17,17,17,1) 85%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(17,17,17,0) 0%,rgba(17,17,17,0) 50%,rgba(17,17,17,0.9) 60%,rgba(17,17,17,1) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00111111', endColorstr='#111111',GradientType=0 ); /* IE6-9 */ 
    }
    
    .full-logo {
        font-size: 16.0rem;
        text-align: center;
    }
    
    .shadowed-logo {
        text-shadow: 0 0 20px rgba(0,0,0,1)
    }
    
    
} /***** END SM (Small) */




/***** MD (Medium) - Medium Desktop Size AND ABOVE! (992px) */
@media (min-width: 992px) {
    
    .hero-bg {
        background-position: right;
    }
    
    .hero-gradient {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000111+0,111111+100&0+0,0+100 */
        background: -moz-linear-gradient(top, rgba(0,1,17,0) 0%, rgba(17,17,17,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,1,17,0) 0%,rgba(17,17,17,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,1,17,0) 0%,rgba(17,17,17,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000111', endColorstr='#00111111',GradientType=0 ); /* IE6-9 */
    }
    
    header ul {
        padding: 10px 0;
        background-color: rgba(0,0,0,0)
    }
    
    header li {
        font-size: 14px;
        padding-right: 45px;
    }
    
    header .section-intro {
        font-size: 2.4rem;
        margin-bottom: -40px;
    }
    
    nav ul {
        text-align: left;
    }
    
    h2 {
        font-size: 2.8em;
        margin: 45px 0 15px 0;
        padding-bottom: 15px;
        text-align: left;
    }
    
    p {
        font-size: 1.4em;
        line-height: 22px;
        margin-bottom: 16px;
    }
    
    .p-flavor {
        font-size: 1.6rem;
        line-height: 24px;
    }
    
    p:last-child {
        margin-bottom: 45px;
    }
    
    .flavor-thumb {
        height: 80px;
        width: 80px;
        margin: auto;
        border-radius: 50%;
        border: solid 2px #ff7b00;
    }
    
    .flavor {
        color: #fff;
        font-size: 1.6em;
        font-weight: 600;
        text-align: center;
        margin: 12px auto 30px auto;
    }
    
    .flavor-thumb:hover {
        box-shadow: 0 0 10px 5px #333;
    }
    
    .flavor-image-full {
        margin-top: 45px;
    }
    
    .flavor:hover {
        color: #ffb875;
    }
    
    img {
        height: 435px;
        width: auto;
    }
    
    h3 {
        font-size: 2.2em;
        text-transform: uppercase;
        margin-bottom: 25px;
        font-weight: 700;
        text-align: left;
    }
    
    h4 {
        font-size: 1.6em;
        font-weight: 600;
        color: #777;
        margin-bottom: 6px;
    }
    
    .full-logo {
        font-size: 18.0rem;
        margin: 0 0 -20px 0;
        text-align: left;
    }
    
    .recipe-image {
        height: 375px;
        margin-bottom: 45px;
    }
    
    .recipe-detail {
        margin-bottom: 5px;
    }
    
} /***** END MD (Medium) */




/***** LG (Large) – Large Desktop AND BEYOND! (1200px) */
@media (min-width: 1200px) {
    
    header li {
        padding-right: 60px;
    }
    
    header .section-intro {
        font-size: 2.8rem;
        margin-bottom: -55px;
    }
    
    h2 {
        font-size: 3.2em;
    }
    
    h3 {
        font-size: 2.4em;
    }
    
    .hero-bg {
        background-size: 65%;
    }
    
    .flavor-hero {
        background-size: 60%;
    }
    
    .flavor-thumb {
        height: 100px;
        width: 100px;
    }
    
    .flavor {
        font-size: 1.9em;
    }
    
    .full-logo {
        font-size: 22.5rem;
        margin: 0 0 -30px 0;
    }
    
    .recipe-image {
        height: 435px;
        margin-bottom: 45px;
    }
    
} /***** END LG (Large) */




/* Borders */
.border-orange {border-bottom: solid 1px #ff7b00;}
.border-white {border-bottom: solid 1px #fff;}
.border-black {border-bottom: solid 1px #000;}




/* Background Colors */
.orange-bg {background-color: #ff7b00}
.lt-orange-bg {background-color: #ffeddc}
.dk-gray-bg {background-color: #161616}
.black-bg {background-color: #000}




/* Text Colors */
.orange {color: #ff7b00}
.white {color: #fff}




/* Images */

.bottles {
    background-image: url(../img/bottles.png);
    background-repeat: no-repeat;
    background-position: right;
}

.black-truffle-martini {
    background-image: url(../img/black-truffle-martini.jpg);
    background-size: cover;
/*    background-position: center;*/
}

.vinyard-ghost {
    background-image: url(../img/vinyard-15.png);
    background-size: cover;
}

.ice-ghost {
    background-image: url(../img/ice-15.png);
    background-size: cover;
}

.flavor-monarch {background-image: url(../img/flav-monarch.jpg)}
.flavor-peche {background-image: url(../img/flav-peche.jpg)}
.flavor-principal {background-image: url(../img/flav-principal.jpg)}
.flavor-vanille {background-image: url(../img/flav-vanille.jpg)}
.flavor-bere {background-image: url(../img/flav-bere.jpg)}
.flavor-chocolat {background-image: url(../img/flav-chocolat.jpg)}
.flavor-pomme {background-image: url(../img/flav-pomme.jpg)}
.flavor-miel {background-image: url(../img/flav-miel.jpg)}

.monarch {background-image: url(../img/monarch.jpg); background-size: cover}
.principal {background-image: url(../img/cluster.jpg); background-size: cover}
.bere {background-image: url(../img/bere.jpg); background-size: cover}
.pomme {background-image: url(../img/pomme.jpg); background-size: cover}
.peche {background-image: url(../img/peche.jpg); background-size: cover}
.vanille {background-image: url(../img/vanille.jpg); background-size: cover}
.chocolat {background-image: url(../img/chocolat.jpg); background-size: cover}
.miel {background-image: url(../img/miel.jpg); background-size: cover}

/* MISC */

.clear {
    clear: both;
}

a {
    text-decoration: none;
}