* {
    box-sizing : border-box;
}

*:focus {
    outline : none;
}

body {
    background  : #f9f8f3;
    min-height  : 100vh;
    font-family : 'Gotham', serif;
}

a {
    text-decoration : none;
    color           : black;
}

img {
    border-style : none;
    /*height       : 3vh;*/
}

i.fas,
i.fas:before {
    display : block
}

input[type="text"] {
    border        : none;
    border-bottom : 1px solid grey;
}

h3 {
    /*font-family    : "Gotham", serif;*/
    text-transform : uppercase;
}

.fal {
    font-size     : 150%;
    text-align    : center;
    padding-right : 2%;
    color         : black;
}

.fas {
    font-size      : 200%;
    text-align     : center;
    vertical-align : middle;
    padding-right  : 2%;
    padding-left   : 50%;
    color          : black;
    font-weight    : 300;
}

.fa-angle-right,
.fa-angle-down {
    position   : relative;
    float      : right;
    text-align : right;
    /*padding-right : 5%;*/
}

.img-cont {
    width : auto
}

#slider-range {
    width       : 80%;
    align-items : center;
}

.slider {
    -webkit-appearance : none;
    width              : 80%;
    height             : 15px;
    border-radius      : 5px;
    background         : #d3d3d3;
    outline            : none;
    opacity            : 0.7;
    -webkit-transition : 0.2s;
    transition         : opacity 0.2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance : none;
    appearance         : none;
    width              : 25px;
    height             : 25px;
    border-radius      : 50%;
    background         : #ffce37;
    cursor             : pointer;
}

.slider::-moz-range-thumb {
    width         : 25px;
    height        : 25px;
    border-radius : 50%;
    background    : #ffce37;
    cursor        : pointer;
}

.fade-enter-active,
.fade-leave-active {
    transition : opacity 0.5s, transform 1s;
}

.fade-enter,
.fade-leave-active {
    opacity   : 0;
    transform : translateY(20px);
}

.site-container {
    display    : block;
    margin     : 0;
    min-height : 100vh;
}

.site-pusher {
    margin         : 0;
    height         : 100vh;

    display        : flex;
    flex-direction : column;

    background     : rgb(250, 250, 250);
    background     : -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    background     : -webkit-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    background     : linear-gradient(to bottom, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    filter         : progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#fdf2d3', GradientType=0);
}

.site-content {
    background : #f9f8f3;
}

#flipbook {
    /*width  : 100% !important;*/
    /*height : 440px !important;*/
    width  : auto !important;
    height : auto !important;
    flex   : 1 0 auto;
}

/*#flipbook .page-wrapper > div {*/
/*width  : 100% !important;*/
/*height : 100% !important;*/
/*}*/

/*#flipbook .page-wrapper,*/
#flipbook,
#flipbook .page,
#flipbook .double {
    z-index    : 0;
    /*max-height : 100%;*/
    /*max-width  : 100vw;*/
    background : rgb(250, 250, 250);
    background : -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    background : -webkit-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    background : linear-gradient(to bottom, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 247, 1) 60%, rgba(253, 242, 211, 1) 100%);
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#fdf2d3', GradientType=0);
}

#flipbook .page-wrapper {
    -webkit-perspective : 2000px;
    -moz-perspective    : 2000px;
    -ms-perspective     : 2000px;
    perspective         : 2000px;
}

/*#flipbook .page-wrapper > div {*/
/*height     : 100%;*/
/*max-height : 100%;*/
/*max-width  : 100vw;*/
/*}*/

/*#flipbook .double {*/
/*!*width:835px;*!*/
/*!*height:1200px;*!*/
/*!*width:1080px;*!*/
/*!*height:780px;*!*/
/*width           : 100% !important;*/
/*height : 100% !important;*/
/*background-size : 100% 100%;*/
/*}*/

/*#flipbook .even .double {*/
/*margin-left : -100% !important;*/
/*}*/

/*#flipbook .odd .double {*/
/*margin-left : 0 !important;*/
/*}*/

#flipbook .double {
    position        : absolute;
    display         : flex;
    justify-content : center;
}

#flipbook .even .double {
    left : 0;
}

#flipbook .odd .double {
    right : 0;
}

#flipbook h3,
#flipbook .subRegion-title,
#flipbook .h5 {
    color          : #0e0e0e;
    line-height    : 0.75;
    margin-bottom  : 1.25em;
    font-weight    : 600;
    text-transform : uppercase;
    /*margin-top     : 2.5em;*/
    margin-top     : 1em;
}

#flipbook h3 {
    color         : #0e0e0e;
    /*font-size     : 18px;*/
    font-size     : 20px;
    line-height   : 0.75;
    margin-bottom : 1.25em;
    font-weight   : 600;
}

#flipbook h3:not(:first-child) {
    margin-top : 2em;
}

#flipbook .list-title {
    margin-top : 2.5em;
}

#flipbook .subRegion-title {
    font-size : 16px;
}

/*#flipbook .h5 {*/
/*font-size : 14px;*/
/*}*/

#flipbook h3 {
    font-size : 23px;
}

#flipbook h4 {
    /*font-size : 16px;*/
    font-size      : 19px;
    margin         : 5px 0;
    text-transform : uppercase;
}

#flipbook h3 ~ div {
    padding-left : 10px;
}

#flipbook h4 ~ div {
    padding-left : 10px;
}

#flipbook h5 ~ a {
    padding-left : 10px;
}

#flipbook h5 {
    /*font-size : 14px;*/
    font-size      : 16px;
    text-transform : uppercase;
    margin         : 0;
    margin-bottom  : 5px;
    margin-top     : 1em;
}

#flipbook .wines {
    flex          : 1 0 67%;
    padding       : 30px 0 40px;
    padding-left  : 3.5%;
    padding-right : calc(2% - 15px);
    overflow      : auto;
}

#flipbook .wines .left-title {
    font-family    : 'Playfair Display', serif;
    font-size      : 25px;
    padding-top    : 2.5em;
    padding-bottom : 1.8em;
    line-height    : 0.75;
}

#flipbook .wines-img {
    display : flex;
    flex    : 0 1 33%;
}

#flipbook > div img {
    max-width      : 100%;
    object-fit     : contain;
    pointer-events : none;
}