/* coffe popup */

#coffee-popup { position: fixed; z-index: 1000; top: auto; left: 0; right: 0; bottom: -525px; height: 455px; padding: 20px 30px 20px; border-top: 5px solid #db251f; background-image: url("../images/popup-bg.jpg"); background-size: cover; background-position: center; background-color: #27211a; color: #fff; font-family: "Open Sans Hebrew", Arial, sans-serif; text-align: center; visibility: hidden; -webkit-transition: visibility 0.5s, bottom 0.5s ease-in; transition: visibility 0.5s, bottom 0.5s ease-in; -webkit-transition-delay: .35s; transition-delay: .35s; }
#coffee-popup .coffee-popup-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; }
#coffee-popup .coffee-popup-content > p, #coffee-popup .coffee-popup-content > img, #coffee-popup .coffee-popup-content > h2, #coffee-popup .coffee-popup-content > h3, #coffee-popup .coffee-popup-content > .coffee-popup-form, #coffee-popup .coffee-popup-content > .coffee-popup-close-button { opacity: 0; -webkit-transform: translateY(150px); transform: translateY(150px); -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }
#coffee-popup .coffee-popup-content > p { -webkit-transition-delay: .25s; transition-delay: .25s; }
#coffee-popup .coffee-popup-content > img { -webkit-transition-delay: .2s; transition-delay: .2s; }
#coffee-popup .coffee-popup-content > h2 { -webkit-transition-delay: .15s; transition-delay: .15s; }
#coffee-popup .coffee-popup-content > h3, #coffee-popup .coffee-popup-content > .coffee-popup-close-button { -webkit-transition-delay: .1s; transition-delay: .1s; }
#coffee-popup .coffee-popup-content > .coffee-popup-form { -webkit-transition-delay: .05s; transition-delay: .05s; }
#coffee-popup h2 { font-size: 30px; line-height: 30px; font-weight: 700; margin: 20px 0 8px; }
#coffee-popup h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0 0 18px; }
#coffee-popup p { font-size: 18px; line-height: 28px; margin-bottom: 14px; }
#coffee-popup .coffee-popup-form { width: 100%; }
#coffee-popup .coffee-popup-form .wrap-info { font-size: 12px; line-height: 16px; color: #b5afa5; margin: 12px 0; }
#coffee-popup .coffee-popup-form a { color: #b5afa5; text-decoration: underline; }
#coffee-popup .coffee-popup-form-input { direction: rtl; width: 100%; height: auto; font-family: "Open Sans Hebrew", Arial, sans-serif; font-size: 16px; line-height: 24px; padding: 9px 13px; color: #787878; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
#coffee-popup .coffee-popup-form-submit, #coffee-popup .coffee-popup-close-button { display: inline-block; margin: 12px 0; padding: 6px 38px; width: auto; height: auto; min-width: 71px; font-family: "Open Sans Hebrew", Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 700; font-style: normal; border: none; border-radius: 18px; }
#coffee-popup .coffee-popup-form-submit { color: #fff; background-color: #db251f; }
#coffee-popup .coffee-popup-info-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline; border: none; background: none; padding: 0; margin: 0; color: #b5afa5; text-decoration: underline; }
#coffee-popup .coffee-popup-close-button { margin-top: 28px; color: #000; background-color: #fff; }
#coffee-popup.opened { visibility: visible; bottom: 0; -webkit-transition: bottom 0.5s ease-out; transition: bottom 0.5s ease-out; -webkit-transition-delay: .5s; transition-delay: .5s; }
#coffee-popup.opened .coffee-popup-content > p, #coffee-popup.opened .coffee-popup-content > img, #coffee-popup.opened .coffee-popup-content > h2, #coffee-popup.opened .coffee-popup-content > h3, #coffee-popup.opened .coffee-popup-content > .coffee-popup-form, #coffee-popup.opened .coffee-popup-content > .coffee-popup-close-button { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; }
#coffee-popup.opened .coffee-popup-content > p { -webkit-transition-delay: .9s; transition-delay: .9s; }
#coffee-popup.opened .coffee-popup-content > img { -webkit-transition-delay: .95s; transition-delay: .95s; }
#coffee-popup.opened .coffee-popup-content > h2 { -webkit-transition-delay: 1s; transition-delay: 1s; }
#coffee-popup.opened .coffee-popup-content > h3 { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; }
#coffee-popup.opened .coffee-popup-content > .coffee-popup-form { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

/* coffe popup info */
#coffee-popup-info { position: fixed; top: 100%; left: 0; width: 100%; height: 100%; direction: rtl; background-color: #fff; z-index: 1010; visibility: hidden; -webkit-transition: visibility 0.4s, top 0.4s ease-in; transition: visibility 0.4s, top 0.4s ease-in; }
#coffee-popup-info.opened { top: 0; visibility: visible; -webkit-transition: top 0.4s ease-out; transition: top 0.4s ease-out; }
#coffee-popup-info .article { position: relative; height: 100%; }
#coffee-popup-info .section-header { margin: 0; padding: 15px 50px 15px 15px; }
#coffee-popup-info .article-body { position: absolute; top: 72px; left: 0; padding: 15px; width: auto; height: calc(100% - 112px); overflow-y: auto; }

body.coffee-popup-opened { overflow: hidden; }

#coffee-popup .coffee-popup-close, #coffee-popup-info .coffee-popup-info-close { position: absolute; width: 40px; height: 40px; top: 0; right: 0; z-index: 5; }
#coffee-popup .coffee-popup-close:before, #coffee-popup-info .coffee-popup-info-close:before, #coffee-popup .coffee-popup-close:after, #coffee-popup-info .coffee-popup-info-close:after { content: ''; position: absolute; top: 20px; left: 10px; width: 20px; height: 2px; background-color: #fff; }
#coffee-popup .coffee-popup-close:before, #coffee-popup-info .coffee-popup-info-close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#coffee-popup .coffee-popup-close:after, #coffee-popup-info .coffee-popup-info-close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }