@charset "UTF-8";

#cup{
    max-width: 100% !important;
    height: auto !important
}
@-webkit-keyframes ipadanimate {
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}
@keyframes ipadanimate {
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}
@-webkit-keyframes capanimate {
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}
@keyframes capanimate {
    to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}
.midpage-banner1 .container,
.midpage-banner1 .img-holder {
    position: relative
}
.banner-section {
    padding: 60px 0;
    background-color: #372726
}
/*.banner-section p {
    color: #c7a298;
    font-size: 14px;
    margin: 30px auto
}*/
.banner-section h3 {
    color: #fff;
    font-size: 40px
}
.midpage-banner1 {
    background: url(../img/mid-banner1-bg.jpg) center no-repeat;
    background-size: cover;
    text-align: center;
    padding: 0
}
.midpage-banner1 #cup{
    height: 250px
}
.midpage-banner1 .cup,
.midpage-banner1 .milk,
.midpage-banner1 .milk-drop {
    position: absolute;
    opacity: 0;
    display: none
}
.midpage-banner1 .cup {
    bottom: 5%;
    max-width: 81%;
    left: 0
}
.midpage-banner1 .milk {
    top: 0;
    left: 5%;
    max-width: 100%
}
.midpage-banner1 .milk-drop {
    top: 46%;
    left: 40%
}
.midpage-banner1 .banner1-details {
    position: relative;
    min-height: 1px;
    padding: 50px 0
}
@media (min-width: 768px) {
    .midpage-banner1 .banner1-details {
        margin-left: 50%;
        float: left;
        width: 50%
    }
}
.midpage-banner1 h3 {
    margin: 0
}
/*.midpage-banner1 p {
    margin: 30px 0;
    font-style: italic
}
.midpage-banner1 .button-primary {
    background-color: #dc8068;
    color: #fff
}*/
@media screen and (min-width: 768px) {
    .midpage-banner1 {
        text-align: center
    }
    .midpage-banner1>.container {
        height: 700px
    }
    .midpage-banner1 .img-holder {
        position: absolute;
        left: 0;
        top: 0;
        height: 90%
    }
    .midpage-banner1 .milk-cup {
        opacity: 0
    }
    .midpage-banner1 .cup,
    .midpage-banner1 .milk,
    .midpage-banner1 .milk-drop {
        display: block
    }
    .midpage-banner1 .milk {
        max-height: 0%;
        overflow: hidden;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        -webkit-transition: all 1.5s ease-out;
        transition: all 1.5s ease-out;
        opacity: 1!important
    }
    .midpage-banner1 .milk.animate {
        max-height: 57%
    }
    .midpage-banner1 .milk-drop {
        -webkit-transition: opacity .3s ease;
        transition: opacity .3s ease
    }
    .midpage-banner1 .milk-drop.appear {
        opacity: 1
    }
    .midpage-banner1 #cup{
        max-height: 100%;
        height: auto
    }
    .midpage-banner1 .banner1-details {
        text-align: right;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}
/*@media screen and (min-width: 768px) {
    .section-heading h1 span {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        opacity: 0;
        -webkit-transition: all 1s ease;
        transition: all 1s ease
    }
    .section-heading h1 span.animate {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
    .banner-img #cup,
    .banner-img-holder .cup,
    .banner-text h2 span,
    .coffee-text,
    .inner-page .pricing-table,
    .order-type-wrapper,
    .premium-text,
    .reservation-form,
    .section-heading h2,
    .service-details .service-wrapper {
        opacity: 0
    }
    .reservation-form.animated,
    .service-details .service-wrapper.animated {
        opacity: 1
    }
}*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}
.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}
/*@media screen and (min-width: 768px) {
    .section-heading h1 span {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        opacity: 0;
        -webkit-transition: all 1s ease;
        transition: all 1s ease
    }
    .section-heading h1 span.animate {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
    .banner-img #cup,
    .banner-img-holder .cup,
    .banner-text h2 span,
    .coffee-text,
    .inner-page .pricing-table,
    .order-type-wrapper,
    .premium-text,
    .reservation-form,
    .section-heading h2,
    .service-details .service-wrapper{
        opacity: 0
    }
    .reservation-form.animated,
    .service-details .service-wrapper.animated {
        opacity: 1
    }
}*/
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}
.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}