@import url("../fonts/stylesheet.css");

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-family: 'rockwellregular', Arial, sans-serif;
    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;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
    width: 100%;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a:hover {
    color: #be1e2d;
}

/* ==========================================================================
   de-construct's custom styles
   ========================================================================== */

/* ==============================
   General Styles
   ============================== */
.left { float: left; }
.right { float: right; }
.wrapper {
    width: 100%;
    max-width: 1070px;
    padding: 0 10px;
    display: block;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.article { width: 680px; }
.aside { width: 265px; padding-left: 20px; border-left: 3px solid #e6e7e8; }
.main-content { padding: 50px 0; }

/* ==============================
   Header Styles
   ============================== */

.site-header { width: 100%; position: absolute; background-color: #fff; top: 0; z-index: 999; }
.site-header .wrapper {
    width: 100%;
    max-width: 1270px;
}
#top-head {
    width: 100%;
    height: 190px;
    padding: 20px 30px;
    position: relative;
    font-size: 14px;
    color: #666;
    line-height: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */    
}
#top-head a {
    color: #666;
    text-decoration: none;
}
#top-social {
    float: left;
}
#top-cart {
    height: 31px;
    float: right;
}
#member-actions {
    float: right;
    line-height: 31px;
    padding-right: 30px;
}
#my-account {
    float: left;
    position: relative;
}
.dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    min-width: 260px;
    background-color: #fff;
    border: 1px solid #bcbec0;
    z-index: 2;
    -moz-box-shadow:    2px 2px 6px -4px #000;
    -webkit-box-shadow: 2px 2px 6px -4px #000;
    box-shadow:         2px 2px 6px -4px #000;
    display: none;
    /*padding: 20px;*/
}
#mini-cart {
    width: 30px;
    height: 30px;
    position: relative;
    float: right;
}
    #mini-cart-trigger {
        width: 30px;
        height: 30px;
        float: right;
        background-image: url('/images/site/cart.png');
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .close-dropdown { 
        width: 15px;
        height: 15px;
        background-image: url('/images/site/close.png');
        background-position: top left;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: 8px;
        right: 5px;
    } 
    #mini-cart-box {
        padding: 0;
        position: absolute;
        top: 45px;
        right: 0;
        width: 350px;
        background-color: #fff;
        border: 1px solid #bcbec0;
        z-index: 2;
        -moz-box-shadow:    2px 2px 6px -4px #000;
        -webkit-box-shadow: 2px 2px 6px -4px #000;
        box-shadow:         2px 2px 6px -4px #000;
        display: none;
    }
    .triangle { 
        width: 14px; 
        height: 8px; 
        background-image: url('/images/site/triangle.png');
        background-position: top left;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        top: -7px;
        right: 7px;
    }
    .dropdown .title {
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        line-height: 16px;
        color: #414042;
        border-bottom: 1px solid #bcbec0;
        
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    }
    #mini-cart-box .cart-items {
        border-bottom: 1px solid #bcbec0;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #mini-cart-box .cart-items li {
        width: 100%;
        float: left;
        padding: 10px 20px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    }
    #mini-cart-box .cart-items li .img {
        float: left;
    }
    #mini-cart-box .cart-items li .info {
        width: 250px;
        float: right;
        font-size: 14px;
        color: #414042;
    }
    #top-head .dropdown .actions {
        width: 100%;
        padding: 15px 20px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */        
    }
    #top-head .dropdown .reg-btn {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        color: #fff;
    }
    .reg-btn {
        max-width: 100%;
        height: 36px;
        line-height: 34px;
        display: block;
        background-color: #231f20;
        font-family: 'rockwellbold';
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        padding: 0 20px;
        border: none;
        text-transform: uppercase;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    }
    .reg-btn.grey { background-color: #a7a9ac; }
    .reg-btn.btn-danger { background-color: #999; }
    .reg-btn.btn-primary {  }
    .reg-btn.print-page { text-align: center; width: auto; margin-bottom: 20px; display: inline-block; }
    /*#top-head .view-shopping-bag { font-size: 12px; }*/
    

input[type="text"], 
input[type="email"], 
input[type="password"] {
    /*height: 20px;*/
    border: 1px solid #666;
    padding: 0 5px;
    outline: none;
    line-height: 25px;
    background: none;
    min-height: 25px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
#search-form {
    min-width: 250px;
}
#search-form label {
    width: auto;
    float: left; 
    padding-right: 10px;
    line-height: 25px;
}
#search-form input[type="text"] {
    width: 100px;
    height: 20px;
    float: left; 
}
#search-form input[type="submit"] {
    width: 21px;
    height: 21px;
    float: left; 
    background-color: transparent;
    background-image: url('/images/site/search.png');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px;
    margin-left: 5px;
}
#logo {
    width: 250px;
    height: 152px;
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;;
    margin-left: -125px;
}
#logo img {
    max-width: 100%;
    height: auto;
}
.social-links {
    width: 100%;
    float: left;
    padding-bottom: 10px;
}

.addthis_toolbox a.at300b, 
.addthis_toolbox a.at300m, 
.social-links a {
    width: 32px !important;
    height: 32px;
    float: left;
    margin-right: 5px; 
    background-image: url('/images/site/social_links.png');
    background-repeat: no-repeat;
}
    .social-links .twitter { background-position: 0 0; }
    .social-links .facebook { background-position: -37px 0; }
    .social-links .email { background-position: -73px 0; }
    .social-links .instagram { background-position: -111px 0; }
    
a.at300b .at4-icon, 
a.at300m .at4-icon, 
.social-links a span { display: none !important; }
    
#main-nav {
    width: 100%;
}
    #main-nav ul { width: 100%; text-align: center; padding: 0; margin: 0 0 10px; background-image: url('/images/site/nav-bg.png'); background-position: left center; background-repeat: repeat-x; }
    #main-nav ul li { display: inline-block; padding: 0 15px; background-color: #fff; }
    #main-nav ul li a { color: #000; text-decoration: none; font-size: 26px; line-height: 30px; font-family: 'brandon_grotesquebold'; /*text-shadow: 1px 1px 1px #333;*/ font-weight: bold; letter-spacing: 2px; }
    #main-nav ul li a:hover, #main-nav ul li a.active { color: #be1e2d; }
    
    
    
/* ==============================
   Hero Slider || Main Banner
   ============================== */
.delivery-note {
	width: 100%; max-width: 1250px; text-align: center; height: auto; margin: 0 auto; display: none;
}
.delivery-note .wrapper {
	width: 100%; max-width: 100%; background-color: #000; color: #fff; font-size: 18px; padding: 30px 20px;
}

.site-content {
    margin: 230px 0 0;
}
.main-banner-wrapper {
    height: auto;
    max-width: 1260px;
    width: 100%;
    margin: 0 auto 5px;
    padding: 0 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.main-banner {
    width: 100%;
    height: 525px;
}
.main-banner .slide {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main-banner .slide .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0,0,0,0.1);
}
.main-banner .slide .txt {
    max-width: 100%;
    text-align: center;
    color: #fff;
    margin: 200px auto 0;
}
    .main-banner .slide .txt .cat { font-size: 46px; line-height: 50px; font-family: 'core_circus_2d_inregular'; }
    .main-banner .slide .txt .title { font-size: 66px; line-height: 70px; font-family: 'advertiser_jnlregular'; }
    .main-banner .slide .txt .info { font-size: 24px; font-family: 'rockwellbold'; }

.main-banner .slide .logo {
    text-align: center;
    line-height: 525px;
}
    .main-banner .slide .logo img { max-width: 100%; height: auto; }

    .video_html5 {
        width: 100%;
        height: 100%;
    }
    .main-banner.video-bg .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        height: 100%;
        z-index: 2;
    }
    .video-play {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        background-image: url('/images/site/video-play.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100px 100px;
        opacity: 1;
    }
    .video-play.off {
        background-image: url('/images/site/video-pause.png');
        opacity: 0;
        -webkit-transition: opacity 200ms ease 200ms;
        -moz-transition: opacity 200ms ease 200ms;
        -o-transition: opacity 200ms ease 200ms;
        transition: opacity 200ms ease 200ms;
    }
    .main-banner.video-bg { height: 200px; }
    .main-banner.video-bg:hover .video-play.off {
        opacity: 1;
    }
    
.video_html5 video {
	position: absolute; 
        right: 0; 
        bottom: 0;
	min-width: 100%; 
        min-height: 100%;
        max-width: 100%;
	width: auto; 
        height: auto; 
        display: block;
/* 	background: url(polina.jpg) no-repeat; */
/* 	background-size: cover; */
}
    
    
/* ==============================
   Column Items
   ============================== */
.col-items {
    width: 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.col-items .wrapper {
    width: 100%;
    max-width: 1260px;
    padding: 0 2px;
}
.col-items .item {
    width: 33.33%;
    padding: 0 2px;
    margin-bottom: 5px;
    float: left;
    display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.col-items .item > a, 
.col-items .item .item-wrapper {
    display: block;
    position: relative;
}
.col-items .item img {
    max-width: 100%;
    height: auto;
}
.col-items .item .title {
    width: 100%;
    height: auto;
    background-color: #231f20;
    padding: 10px 20px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 20px;
    text-align: center;
    font-family: 'rockwellbold';
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.col-items .item > a:hover .title {
    background-color: #be1e2d;
}
.col-items .item .icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
}
.col-items .item .icon.Polygon { background-image: url('/images/site/shape_polygon.png'); }
.col-items .item .icon.Polygon:hover { background-image: url('/images/site/shape_polygon_active.png'); }
.col-items .item .icon.Ellipse { background-image: url('/images/site/shape_ellipse.png'); }
.col-items .item .icon.Ellipse:hover { background-image: url('/images/site/shape_ellipse_active.png'); }
.col-items .item .icon.Seal { background-image: url('/images/site/shape_seal.png'); }
.col-items .item .icon.Seal:hover { background-image: url('/images/site/shape_seal_active.png'); }
.col-items .item .icon.Gallery { background-image: url('/images/site/shape_gallery.png'); }
.col-items .item .icon.Gallery:hover { background-image: url('/images/site/shape_gallery_active.png'); }
.col-items .item .icon.Gallery span { line-height: 100px; }
.col-items .item .icon.None span { top: 0; left: 0; margin: 0; padding: 30px; line-height: 20px; color: #000; text-align: left;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.col-items .item .icon span {
    width: 100%;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -40px;
    text-align: center;
    font-family: 'rockwellbold';
    color: #fff;
    line-height: 80px;
    text-transform: uppercase;
}

/* ==============================
   Articles List
   ============================== */
.articles-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.articles-list li {
    padding-bottom: 10px;
}
.articles-list li a {
    color: #000;
    font-size: 16px;
    /*line-height: 30px;*/
    text-decoration: none;
}

.gallery-wrapper {}
.gallery-wrapper .gallery img { width: 100%; height: auto; }
.gallery-wrapper .gallery-pager { margin-top: 20px; }
.gallery-wrapper .gallery-pager a { display: inline-block; margin-bottom: 5px; }



/* ==============================
   Ingredients Steps
   ============================== */
.ingredients-steps {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
.ingredients-steps h6 {
    font-family: 'rockwellbold';
    font-size: 16px;
    color: #594a42;
    width: 100%;
    border-bottom: 1px solid #726658;
    margin: 0 0 10px;
    padding-bottom: 5px;
}
.ingredients-steps ul {
    padding: 0 0 20px;
    margin: 0;
    list-style: none;
}
.ingredients-steps ul li {
    padding-bottom: 5px;
}


/* ==============================
   Video Box
   ============================== */
.video-box a {
    display: block;
    position: relative;
    margin: 0 0 30px;
}
.video-box .play {
    width: 110px;
    height: 110px;
    background-image: url('/img/play.png');
    bakcground-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -55px;
}
.article .social-links {
    margin: 0 0 40px;
}
.quote {
    font-size: 20px;
}


/* ==============================
   Footer
   ============================== */
.site-footer {
    width: 100%;
    padding: 50px 0 20px;
}
.site-footer .wrapper {
}
#foot-menu {
    width: 100%;
}
#foot-menu ul {
    padding: 0 0 10px;
    margin: 0 0 20px;
    border-bottom: 4px solid #000;
    text-align: center;
}
#foot-menu ul li {
    display: inline-block;
    padding: 0 5px;
}
#foot-menu ul li a {
    font-family: 'rockwellbold';
    color: #000;
    text-decoration: none;
}
#foot-menu ul li a:hover {
    color: #be1e2d;
}
#foot-logos {
    text-align: center;
}
#foot-logos a {
    display: inline-block;
    margin: 0 10px 10px;
}
#foot-copyright {
	text-align: center;
	font-size: 11px;
	color: #666;
	padding: 20px 0;
}
#foot-copyright a {
	color: #666;
}

/* ==============================
   Search Results
   ============================== */
.search-content {
    border-top: 1px solid #808285;
    padding: 40px 0 0;
}
.search-content .wrapper {
    max-width: 1260px;
}
.search-content .shop-items.col-items {
    border: none;
}
.search-content .shop-items.col-items .item {
    height: auto;
}
#info-text {
    text-align: center;
    margin-bottom: 20px;
    text-align: left;
}

/* ==============================
   Newsletter Form
   ============================== */
.newsletter {
    border-top: 1px solid #BCBEC0;
}
.newsletter h1, .newsletter p {
    text-align: center;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.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 {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: "";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }
    
    #top-social,
    #top-cart, 
    #member-actions, 
    #sandwich, 
    .site-footer, 
    #main-nav,
    .reg-btn.print-page {
        display: none;
    }
    #logo {
        width: 200px;
        height: auto;
        margin: 0 auto;
        position: static;
    }
    .site-content {
        margin: 150px 0 0;
    }
    .main-banner {
        height: auto;
    }
    .main-banner .slide .txt {
        margin-top: 0;
    }
    .main-banner .slide .txt .cat,
    .main-banner .slide .txt .title, 
    .main-banner .slide .txt .info, 
    h1, h2, h3, h4, h5, h6, p {
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 14px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    p, .ingredients-steps {
        font-size: 12px;
    }
    
    .article {
        width: 55%;
        padding: 0 20px 0 0;
    }
    .aside {
        width: 35%;
        padding: 0 0 0 20px;
    }
    .article, .aside {
        max-height: 100%;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    
}