.modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0; pointer-events: none; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable { height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #34412d; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; } .modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 0 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: 15px; border-top-right-radius: 15px; } .modal-header .btn-close { padding: 0.5rem 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; } .modal-title { margin-bottom: 0; line-height: 1.5; } .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } .modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } .modal-footer > * { margin: 0.25rem; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 576px) { .modal-dialog { max-width: 600px; margin: 1.75rem auto; } .modal-dialog-scrollable { height: calc(100% - 3.5rem); } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } .modal-sm { max-width: 300px; } } @media (min-width: 992px) { .modal-lg, .modal-xl { max-width: 800px; } } @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } } .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen .modal-header { border-radius: 0; } .modal-fullscreen .modal-body { overflow-y: auto; } .modal-fullscreen .modal-footer { border-radius: 0; } @media (max-width: 575.98px) { .modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-sm-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-sm-down .modal-header { border-radius: 0; } .modal-fullscreen-sm-down .modal-body { overflow-y: auto; } .modal-fullscreen-sm-down .modal-footer { border-radius: 0; } } @media (max-width: 767.98px) { .modal-fullscreen-md-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-md-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-md-down .modal-header { border-radius: 0; } .modal-fullscreen-md-down .modal-body { overflow-y: auto; } .modal-fullscreen-md-down .modal-footer { border-radius: 0; } } @media (max-width: 991.98px) { .modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-lg-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-lg-down .modal-header { border-radius: 0; } .modal-fullscreen-lg-down .modal-body { overflow-y: auto; } .modal-fullscreen-lg-down .modal-footer { border-radius: 0; } } @media (max-width: 1199.98px) { .modal-fullscreen-xl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xl-down .modal-header { border-radius: 0; } .modal-fullscreen-xl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xl-down .modal-footer { border-radius: 0; } } @media (max-width: 1399.98px) { .modal-fullscreen-xxl-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-xxl-down .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen-xxl-down .modal-header { border-radius: 0; } .modal-fullscreen-xxl-down .modal-body { overflow-y: auto; } .modal-fullscreen-xxl-down .modal-footer { border-radius: 0; } } .categores { width: 90%; display: flex; flex-direction: row; justify-content: right; margin: 0 auto; margin-top: 0px; border-radius: 4px; padding: 0; margin-bottom: 0px; overflow-x: scroll; } .tag { width: auto; margin-top: 0px; margin-left: 0px; display: flex; justify-content: center; align-items: center; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .tag.active { background: #edf4fe; } .vue-sweet-progress { top: -40px; position: absolute; display: flex; align-items: center; justify-content: center; width: auto; z-index: 10; left: 5%; flex-direction: column; } .vue-sweet-progress-line { width: 100%; border-radius: 100px; background-color: #efefef; vertical-align: middle; } .vue-sweet-progress-line-inner { position: relative; min-height: 6px; border-radius: 100px; transition: width 0.3s ease; } .bubble { display: block; position: absolute; cursor: pointer; } .bubble:hover:after { background-color: #ade5ed; } .bubble:after { content: ""; background-color: #ff561c; width: 8px; height: 8px; border-radius: 50%; position: absolute; display: block; top: 1px; left: 1px; } .bubble .bubble-outer-dot { margin: 1px; display: block; text-align: center; opacity: 1; background-color: rgba(255, 0, 0, 0.4); width: 8px; height: 8px; border-radius: 50%; -webkit-animation: bubble-pulse 1.5s linear infinite; -moz-animation: bubble-pulse 1.5s linear infinite; -o-animation: bubble-pulse 1.5s linear infinite; animation: bubble-pulse 1.5s linear infinite; } .bubble .bubble-inner-dot { display: block; text-align: center; opacity: 1; background-color: rgba(255, 0, 0, 0.4); width: 8px; height: 8px; border-radius: 50%; -webkit-animation: bubble-pulse 1.5s linear infinite; -moz-animation: bubble-pulse 1.5s linear infinite; -o-animation: bubble-pulse 1.5s linear infinite; animation: bubble-pulse 1.5s linear infinite; } .bubble .bubble-inner-dot:after { content: ""; display: block; text-align: center; opacity: 1; background-color: rgba(255, 0, 0, 0.4); width: 8px; height: 8px; border-radius: 50%; -webkit-animation: bubble-pulse 1.5s linear infinite; -moz-animation: bubble-pulse 1.5s linear infinite; -o-animation: bubble-pulse 1.5s linear infinite; animation: bubble-pulse 1.5s linear infinite; } @-webkit-keyframes bubble-pulse { 0% { transform: scale(1); opacity: 0.75; } 25% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes bubble-pulse { 0% { transform: scale(1); opacity: 0.75; } 25% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.5); opacity: 0; } } @-moz-keyframes bubble-pulse { 0% { transform: scale(1); opacity: 0.75; } 25% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.5); opacity: 0; } } @-o-keyframes bubble-pulse { 0% { transform: scale(1); opacity: 0.75; } 25% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.5); opacity: 0; } } #center-div { margin: auto; width: 10px; height: 10px; } .stories.carousel .story > .item-link > .info { display: none; } .stories.snapgram .story > .item-link > .item-preview img { border-radius: 100%; border: 1px solid #ffffff; background: #ffffff; } .story, .stories.snapgram .story.seen { opacity: 0 !important; position: absolute !important; top: 0 !important; } .hero_area { width: 100%; position: absolute; height: 120px; margin-top: 25px; max-width: 600px;border-bottom-right-radius: 10px;  border-bottom-left-radius: 10px;} .waves { position: absolute; width: 100%; height: 15vh; min-height: 100px; max-height: 150px; bottom: 0; left: 0; } .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }