/* ELEMENTS */

html, body{
    width:100%;
    margin:0px;
    padding:0px;
    height:100%;
    min-width:320px;
    min-height:480px;
    color:#9e9e9e;
    font-family:'Roboto', sans-serif;
}

a{
    border:none;
    color:#312C37;
    text-decoration:none;
    border-bottom:2px dotted #312C37;
}

/*REPETITIVE*/

.center{
    text-align:center;
}
.left{
    text-align:left;
}
.right{
    text-align:right;
}
.upper{
    text-transform:uppercase;
}
.ib{
    display:inline-block;
}
.italic{
    font-style:italic;
}
.crisp{
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
}
.white{
    color:#ffffff !important;
}
.mobile-only{
    display:none;
}

/*BASIC*/

.wrapper{
    width:calc(100% - 40px);
    max-width:1160px;
    height:calc(100% - 40px);
    margin:0 auto;
    /*background-color:rgba(0,0,0,.5);*/
    padding:40px 20px;
    position:relative;
    top:0px;
    left:0px;
}
#content .wrapper{
    padding:80px 0px;
}
#header{
    height:360px;
}
.no-header{
    height:0px !important;
    background-size:cover;
    background-position:50% calc(50% + 45px);
    background-repeat:no-repeat;
}
.no-header #navigation{
    transition:background-color 0.25s ease;
}
#header.super-header{
    height:100%;
    background-image:url('/images/backgrounds/wine.jpg');
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
    min-height:480px;
    position:relative;
    top:0px;
    left:0px;
}
.short-header{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    top:0px;
    left:0px;
    padding-top:105px !important;
}
.short-header .title{
    margin-bottom:0px;
}
.wine{
    background-image:url('/images/backgrounds/wine2.jpg');
}
.juice{
    background-image:url('/images/backgrounds/juice2.jpg');
}
.beer{
    background-image:url('/images/backgrounds/beer2.jpg');
}
.cheers{
    background-image:url('/images/backgrounds/cheers.jpg');
}
.map{
    background-color:#000000;
}
#slideshow{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow:hidden;
    font-size:0px;
}
.slide{
    width:0%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0%;
    left:0%;
    transform:translate(0%, 0%);
    transition:width 1s ease;
}
.slide div{
    background-position:50% calc(50% - 10px);
    background-attachment:fixed;
    width:100%;
    height:100%;
}
#logo{
    width:calc(100% - 40px);
    max-width:512px;
    position:absolute;
    top:calc(50%);
    left:50%;
    transform:translate(-50%, -55%);
    -webkit-transform:translate(-50%, -55%);
    z-index:1;
}
#logo a{
    border-bottom:0px;
}
#logo img{
    width:100%;
}
#navigation{
    text-align:center;
    position:absolute;
    top:0px;
    left:0px;
    font-size:0px;
    width:calc(100% - 40px);
    padding:0px 20px;
    background-color:rgba(49, 44, 55, 0.8);
    vertical-align:middle;
    z-index:9;
    height:105px;
}
.super-header #navigation{
    top:initial;
    bottom:0px;
}
#hamburger{
    width:30px;
    height:20px;
    cursor:pointer;
    margin-top:40px;
}
#hamburger img{
    width:100%;
    height:100%;
}
#mobile-nav{
    background-color:#312C37;
    width:0%;
    overflow-x:hidden;
    height:calc(100% - 106px);
    position:fixed;
    top:105px;
    right:0px;
    color:#9e9e9e;
    border-top:1px solid #9e9e9e;
    transition:all .25s ease;
}
.full{
    background-color:rgba(49, 44, 55, 1) !important;
}
#nav-logo{
    overflow:hidden;
    margin-right:20px;
    font-size:32px;
    font-weight:200;
    vertical-align:middle;
    height:65px;
    opacity:0;
    position:relative;
    top:20px;
    left:0px;
    float:left;
    text-transform:uppercase;
}
#nav-logo img{
    height:100%;
    vertical-align:middle;
    margin-right:10px;
}
#nav-logo a{
    border:none;
    color:#ffffff;
    font-family: "Open Sans", sans-serif;
    font-size:24px;
}
.scrolled #nav-logo{
    height:65px;
    opacity:1;
}
#navigation.scrolled{
    position:fixed;
    top:0px;
    bottom:initial;
    left:0px;
    text-align:right;
    box-shadow:0 0 15px 0px rgba(0, 0, 0, 0.75);
}
#navigation .wrapper{
    width:100%;
    padding:0px;
}
#links a, #mobile-nav a{
    color:#9e9e9e;
    text-decoration:none;
    font-size:14px;
    height:auto;
    padding-bottom:4px;
    border-bottom:2px solid rgba(255, 255, 255, 0);
    margin:40px 0px;
    vertical-align:middle;
    margin-left:100px;
    position:relative;
    top:0px;
    left:0px;
    font-family:'Roboto Slab', serif;
    transition:color 0.25s ease, border-bottom 0.25s ease;
}
#mobile-nav a{
    margin-left:0px;
    margin-top:20px;
    margin-bottom:0px;
}
.scrolled #links a{
    margin-left:45px;
}
#links a:first-child{
    margin-left:0px;
}
#links a:hover, #mobile-nav a:hover{
    color:#ffffff;
    border-bottom:2px solid rgba(255, 255, 255, 1);
    top:0px;
}
#navigation .current{
    color:#ffffff;
    top:0px;
    border-bottom:2px solid #ffffff;
}
#content{
    background-color:#ffffff;
    min-height:calc(100% - 129px);
}
.section{
    width:100%;
    height:auto;
    padding:60px 0px;
}
.title{
    font-size:60px;
    color:#312C37;
    font-family: 'Roboto Slab', serif;
    font-weight:600;
    line-height:.99;
    margin-bottom:50px;
    /*letter-spacing:9px;*/
}
.columns{
    width:100%;
}
.three .column{
    width:calc(33.33% - 14px);
    margin-left:20px;
    float:left;
}
.three .column:first-child{
    margin-left:0px;
}
.tall-stock{
    width:100%;
    background:orange;
}
.subtitle{
    font-size:30px;
    color:#312C37;
    font-family: 'Roboto Slab', serif;
    font-weight:600;
}
#prices .subtitle{
    margin-top:40px;
}
#prices .subtitle:first-of-type{
    margin-top:0px;
}

.subertitle{
    font-size:14px;
    color:#312C37;
    font-family: 'Roboto Slab', serif;
    font-weight:600;
}
#summary, #occasions, #prices, #gallery, #contact, #new, #pricing-editor{
    background-color:#fafafa;
}
#isubmit2{
    color:#8a8a8a;
    cursor:default;
}
#occasions{
    margin-top:82px;
}
#small{
    padding:0px;
    box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    position:absolute;
}
#small .wrapper{
    padding:20px 20px;
}
.small{
    font-size:10px;
}
.two-columns>div{
    width:50%;
    vertical-align:top;
}
.two-columns>div:first-of-type{
    width:calc(50% - 20px);
    margin-right:20px;
}
.padded{
    margin-bottom:20px;
}
.padded2{
    margin-top:20px;
    margin-bottom:20px;
}
.underline{
    border-bottom-style:dotted;
    border-bottom=color:inherit;
    border-bottom-width:2px;
}
.add{
    cursor:pointer;
}
.pl{
    margin-left:10px;
}
#testimonials{
    background-image:url("/images/backgrounds/cheers.jpg");
    background-size:cover;
    background-position:%50 %50;
}
.testimonial{
    margin:40px 0px;
    margin-top:0px;
    color:#ffffff;
    font-size:18px;
}
#loby{
    background-image:url("/images/photos/loby.jpg");
    background-size: 150%;
    background-position: center 20%;
    background-repeat:no-repeat;
    height:200px;
}
.small{
    font-size:14px;
}
.special-sides-a, .special-sides-b{
    position:relative;
    top:0px;
    left:0px;
}
.special-sides-a:before, .special-sides-b:before{
    transform: translateX(-100%);
    left:-23px;
}
.special-sides-a:after, .special-sides-b:after{
    transform: translateX(100%);
    right:-23px;
}
.special-sides-a:before, .special-sides-a:after, .special-sides-b:before, .special-sides-b:after{
    background-color:#ffffff;
    height:2px;
    width:80px;
    content:"";
    position: absolute;
    top:calc(50% - 1px);
}
.special-sides-b:before, .special-sides-b:after{
    background-color:rgb(49, 44, 55);
}
.tiny-sides{
    position:relative;
    top:0px;
    left:0px;
    font-family: 'Roboto Slab', serif;
    font-weight:500;
    color:#312C37;
}
.tiny-sides:before{
    transform: translateX(-100%);
    left:-23px;
}
.tiny-sides:after{
    transform: translateX(100%);
    right:-23px;
}
.tiny-sides:before, .tiny-sides:after{
    background-color:#dadada;
    height:2px;
    width:80px;
    content:"";
    position: absolute;
    top:calc(50% - 1px);
}
.three .column:nth-child(odd) .subtitle{
    margin-top:12px;
}
.three .column:nth-child(even) .subtitle{
    margin-bottom:12px;
    margin-top:-8px;
}
#empty{
    width:100%;
    height:105px;
}
.galleryitem{
    width:calc(25% - 32px);
    padding-top:calc(25% - 42px);
    border:5px solid #ffffff;
    outline:1px solid #dadada;
    margin-right:20px;
    margin-top:20px;
    margin-left:1px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-color:#fafafa;
}
#gallery .subtitle{
    margin-top:10px;
}
#gallery .subtitle:nth-of-type(1){
    margin-top:0px;
}
.gallery{
    margin-bottom:40px;
    text-align:left;
}
.gallery a{
    border-bottom:0px dotted #312C37;
}
.gallery .remove{
    vertical-align: middle;
}
.gallery:last-of-type{
    margin-bottom:0px;
}
a:nth-of-type(4n) .galleryitem{
    margin-right:0px;
}
.oneh{
    width:100%;
}
#contactForm input, #new input{
    width:calc(33.333% - 38px);
    padding:10px;
    margin-right:20px;
    font-size:16px;
}
#new input{
    width:calc(100% - 24px);
    margin:10px 0px;
}
#new .detail{
    width:calc(100% - 64px);
}
#pricing-editor [contenteditable]:not(:focus), #gallery-editor [contenteditable]:not(:focus){
    outline:none;
    transition:outline 0.25s ease;
}
#pricing-editor [contenteditable]:not(:focus):hover, #gallery-editor [contenteditable]:not(:focus):hover{
    cursor:pointer;
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
}
#pricing-editor [contenteditable]:focus, #gallery-editor [contenteditable]:focus{
    cursor:text;
    text-transform:none;
}
#contactForm input:nth-of-type(4){
    margin-right:0px;
}
#imessage{
    width:calc(100% - 22px);
    padding:10px;
    font-size:16px;
    font-family:'Roboto', sans-serif;
    height:250px;
    margin:20px 0px;
    border-color:#dadada;
}
.button{
    background-color:rgb(49, 44, 55);
    color:#ffffff;
    font-weight:700;
    font-size:14px;
    font-family:'Roboto Slab', serif;
    width:auto !important;
    border:none;
    cursor:pointer;
    margin-right:0px !important;
    padding:15px 25px !important;
}
select{
    width:100%;
}
#cancel{
    margin-left:20px;
}
table{
    width:100%;
    border-collapse:collapse;
    border:1px solid #dadada;
    table-layout:fixed;
    margin:20px 0px;
}
table:last-of-type{
    margin-bottom:0px;
}
table td{
    border-collapse:collapse;
    border:1px solid #dadada;
    padding:10px 0px;
    background-color:#ffffff;
    transition:border 0.25s ease, border-bottom 0.25s ease;
}
table tr:first-child td{
    background-color:#f8f8f8;
}
.ui-state-highlight{
    height: 300px;
    border:2px dashed #312C37;
    margin-bottom:40px;
}
.gallery .ui-sortable-placeholder{
    vertical-align:bottom;
}
.mr{
    margin-top:20px;
    margin-right:20px;
    margin-bottom:0px !important;
}
.table .name, .table .cell.price, .table .cell.detail, .pre-asterisk{
    text-transform:capitalize;
}
.table .cell.sub{
    text-transform:lowercase;
}
.price td{
    border-bottom:0px solid #dadada;
    font-size:48px;
    padding-bottom:0px;
    padding-top:20px;
    font-weight:700;
    color:#222222;
}
.price td:before{
    content:'$';
    font-size:50%;
    margin-left:-14px;
    vertical-align:super;
}
.sub td{
    border-top:0px solid #dadada;
    padding-top:0px;
    padding-bottom:20px;
}
td.asterisk:after{
    content:'*';
    font-size:80%;
    color:#da4444;
    vertical-align:super;
}
p.pre-asterisk{
    color:#da4444;
}
p.pre-asterisk:before{
    content:'*';
    font-size:80%;
    color:#da4444;
    vertical-align:super;
}
.name{
    color:#666666;
    font-weight:700;
}
#policy{
    background-color:#da4444;
    color:#ffffff;
    padding:0px;
}
#policy a{
    color:#fafafa !important;
    text-decoration:none;
    border-bottom:2px dotted #fafafa;
}
#mapiframe{
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.5;
    width:100%;
    height:100%;
}
.green{
    color:#00ff00;
}
.red{
    color:#ff0000;
}
.lp{
    margin-left:20px;
}
.controls{
    margin-bottom:10px;
}
.controls:last-of-type(){
    margin-bottom:0px;
}
.controls div{
    cursor:pointer;
    color:#312C37;
}
.new{
    width:calc(100% - 4px);
    display:table;
    border: 2px dashed #4a4a4a;
    margin:20px 0px;
}
table.new{
    margin:0px;
    border-color:#dadada;
    cursor:pointer;
}
table.new.editor.side{
    width:40px;
    height:198px;
    margin-top:20px;
}
.create.category.first, .create.galleries.first{
    height:300px;
    margin:0px;
}
.new div{
    font-size:24px;
    font-weight:100;
    display:table-cell;
    vertical-align:middle;
    color:#4a4a4a;
    cursor:pointer;
}
#pricing-editor .table{
    margin-bottom:0px;
}
.remove{
    color:#dadada;
    padding:0px 5px;
    border:2px dashed #dadada;
    display:inline-block;
    margin-right:5px;
    cursor:pointer;
    margin-left:-25px;
}
.subtitle .remove{
    width:29px;
    margin-left:-50px;
    margin-right:20px;
}
.table.fake.editor{
    float:left;
}
.editor{
    width:calc(100% - 40px);
}
.gallery.editor{
    min-height:300px;
    width:100%;
}
.editor .galleryitem{
    transition:outline 0.25s ease;
    position:relative;
    vertical-align:middle;
    width:calc(25% - 58px);
}
.gallery .remove{
    margin-left:0px;
}
.ui{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:99;
}
#form2 form:nth-of-type(n+2) label:nth-child(1), #form2 form:nth-of-type(n+2) input:nth-child(2){
    display:none;
}
#form2 form:last-of-type label:nth-child(1), #form2 form:last-of-type input:nth-child(2){
    display:inline-block;
}
.chart, .gall{
    padding:20px;
    background-color:#fafafa;
    position:relative;
    border:0px solid #fafafa;
    transition:border 0.25s ease;
}
.move{
    padding:0px 10px 7px 10px;
    background:#fafafa;
    color:#fafafa;
    border:1px solid #fafafa;
    position:absolute;
    top:0px;
    left:50%;
    transform: translate(-50%, -50%);
    cursor:move;
    transition:border 0.25s ease, color 0.25s ease;
}
.gall{
    position:relative;
    background-color:#ffffff;
}
.gall .move{
    background-color:#ffffff;
    border:1px solid #dadada;
    color:#dadada;
}
.fancybox-close{
    border:none;
}
.galleryitem .move{
    top:-5px;
}
.galleryitem.fake{
    cursor:pointer;
}
.up{
    margin-bottom:20px;
}
.uploader{
    width:calc(100% + 1px);
    height:100%;
    background-color:rgba(255,255,255,0.9);
    position:fixed;
    left:calc(50% - 1px);
    top:50%;
    transform:translate(-50%, -50%);
    z-index:8;
}
.uploader form, #response{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.hidden{
    display:none;
}
#footer{
    font-family:'Roboto Slab', serif;
    background-color:#ffffff;
}
#footer a{
    background-color:#ffffff;
    border-bottom:0px dotted #312C37;
}
#footer img{
    width:25px;
    height:25px;
    margin:10px;
    transition:all 1s ease;
}
#footer img:hover{
    transform:scale(1.2, 1.2);
}

/* UNDER CONSTRUCTION */
#under-construction-body{
    text-align:center;
    background-image:url('/images/backgrounds/wine.jpg');
    background-position:center;
    background-size:cover;
}

#under-construction-overlay{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity:0.25;
    background:#ffffff;
}

#under-construction-logo{
    width:auto;
    max-width:100%;
    height:80%;
    display:block;
    margin:auto;
    position:relative;
    top:50%;
    transform:translate(0, -50%);
}

#under-construction-span{
    font-size:24px;
    color:#ffffff;
    position:absolute;
    bottom:40px;
    transform:translate(-50%, 0);
    font-weight:bold;
}

/* MOBILE */

@media screen and (max-width: 1023px) {
    #occasions .subtitle{
        max-width:220px;
    }
}

@media screen and (max-width: 767px) {
    .section{
        padding:0px;
    }
    .two-columns>div{
        width:100%;
        vertical-align:baseline;
    }
    .side-image{
        width:100% !important;
        margin-bottom:20px;
    }
    .subtitle{
        text-align:center !important;
    }
    .three .column{
        width:calc(50% - 10px);
    }
    .desktop-only{
        display:none;
    }
    .mobile-only{
        display:inline-block;
    }
    .three .column:last-child{
        width:100%;
        margin-left:0px;
    }
    .title{
        font-size:40px;
    }
    .galleryitem{
        width:calc(50% - 22px);
        padding-top:calc(50% - 32px);
    }
    a:nth-child(2n) .galleryitem{
        margin-right:0px;
    }
    .three .column:nth-child(1) .subtitle, .three .column:nth-child(2) .subtitle{
        margin-top:0px;
        margin-bottom:15px;
    }
    .three .column:nth-child(3) .subtitle{
        margin-top:10px;
        margin-bottom:15px;
    }
    .special-sides-a:before, .special-sides-a:after, .special-sides-b:before, .special-sides-b:after{
        width:0px;
    }
    #contactForm input{
        width:calc(100% - 22px);
        margin-top:20px;
    }
    #contactForm input:nth-of-type(2){
        margin-top:0px !important;
    }
}
@media screen and (max-width: 480px) {
    .tiny-sides:before, .tiny-sides:after{
        width:60px;
    }
    .galleryitem{
        width:calc(100% - 12px);
        margin-right:0px;
        padding-top:calc(100% - 22px);
    }
    .three .column{
        width:100%;
        margin-left:0px;
    }
    .three .subtitle{
        margin:10px 0px 15px 0px !important;
    }
    #occasions .subtitle{
        max-width:100%;
    }
    .three .column:first-child .subtitle{
        margin-top:0px !important;
    }
}