.env-stories{ display: none; float: left; width: 100%; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.1); } .stories-dkt-s{ display: block; } .lista-stories { float: left; width: 100%; padding: 10px 0; overflow-y: hidden; overflow-x: scroll; margin-top: 10px; } .lista-stories::-webkit-scrollbar { display: none } .pos-stories { margin: 0 auto; width: 1350px; height: 120px; overflow: hidden } .lista-stories button { float: left; width: 80px; height: 100px; margin: 0 5px; overflow: hidden; cursor: pointer; border: none; background: #fff; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .lista-stories button .pos-img-storie{ float: left; padding: 3px; background: var(--cor-pr); border-radius: 50%; animation-name: animaStorie; animation-duration: 2s; animation-timing-function: linear; -webkit-animation-name: animaStorie; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; } @-webkit-keyframes animaStorie { 0% { background: var(--cor-pr); } 25% { background: rgba(var(--cor-pr-rgb), 0.2); } 50% { background: var(--cor-pr); } 75% { background: rgba(var(--cor-pr-rgb), 0.2); } 100% { background: var(--cor-pr); } } .lista-stories button img { float: left; width: 65px; height: 65px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; object-position: center; } .lista-stories button span { float: left; width: 95%; padding: 0 2.5%; margin-top: 3px; text-align: center; font-size: 12px; color: #000; font-family: 'Roboto'; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .storie-visto .pos-img-storie{ background: rgba(0,0,0,0.1) !important } .storytime { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 999999 } .story-nav { position: relative; width: 100%; height: 50px; z-index: 2 } .story-cover { z-index: 999999; position: fixed; top: 0; left: 0; height: 100%; width: 100%; min-width: 100%; min-height: 100%; background: #000 } .story-nav-left { height: 50px; display: inline-block; overflow: hidden; position: relative; color: #fff; font-family: 'Montserrat'; vertical-align: middle; width: 80%; margin: 0; padding: 0; text-align: left } .story-nav-right { height: 50px; display: inline-block; overflow: hidden; position: relative; text-align: right; width: 20%; vertical-align: middle; margin: 0; padding: 0 } .story-text { font-weight: 700; font-size: 13px; padding-left: 10px } .story-date { font-size: 13px; font-weight: 300; padding-left: 10px } .story-timeline { position: relative; z-index: 2; height: 15px; margin: 0 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; align-items: center } .story-timeline-item { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 2px; position: relative; margin-right: 5px } .story-timeline-item:last-child { margin-right: 0 } .story-timeline-line { background: rgba(255, 255, 255, .35); border-radius: 2px; height: 2px; position: absolute; top: 0; width: 100% } .storie-active { animation-name: animastorie; animation-duration: 10s; animation-timing-function: linear; -webkit-animation-name: animastorie; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -ms-animation-name: animastorie; -ms-animation-duration: 10s; -ms-animation-timing-function: linear; -moz-animation-name: animastorie; -moz-animation-duration: 10s; -moz-animation-timing-function: linear; -o-animation-name: animastorie; -o-animation-duration: 10s; -o-animation-timing-function: linear } @keyframes animastorie { from { width: 0 } to { width: 100% } } .story-timeline-line-active { width: auto; will-change: width; border-radius: 2px; height: 2px; position: absolute; top: 0; background: #fff } .story-icon { width: 40px; height: 40px; margin: 6px 0 0 20px; object-fit: cover; object-position: center; border-radius: 50%; vertical-align: middle; border: 2px solid #fff } .story-window { z-index: 1010; position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: block; z-index: 9999999; opacity: 0; transition: opacity .4s; -moz-transition: opacity .4s; -webkit-transition: opacity .4s } .story-window:before { content: ''; position: absolute; width: 100%; height: 80px; top: 0; left: 0; z-index: 1; background: -webkit-linear-gradient(top, rgba(0, 0, 0, .6) 40%, transparent 100%); background: -moz-linear-gradient(top, rgba(0, 0, 0, .6) 40%, transparent 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, .6) 40%, transparent 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, .6) 40%, transparent 100%); background: linear-gradient(top, rgba(0, 0, 0, .6) 40%, transparent 100%) } .story-item-ele1 { position: relative; display: block; width: 100%; height: 100%; margin-top: -65px; text-align: center } .story-item-ele1:before { content: ''; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .9) 0, transparent 100%); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .9) 0, transparent 100%); background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .9) 0, transparent 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, .9) 0, transparent 100%); background: linear-gradient(bottom, rgba(0, 0, 0, .9) 0, transparent 100%) } .story-item-ele1 img { width: 50%; height: 100%; z-index: 1; object-fit: cover; object-position: center } .close { position: absolute; top: 6px; right: 10px; bottom: 20%; width: 32px; height: 32px; opacity: .3; margin-bottom: auto; display: block } .close:hover { opacity: 1 } .close:after, .close:before { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #fff } .close:before { transform: rotate(45deg) } .close:after { transform: rotate(-45deg) } .story-arrow { display: block; opacity: .2; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent } .story-arrow:hover { opacity: .9 } .storie-right { position: absolute; width: 50%; height: 90%; right: 0; top: 10%; z-index: 2; cursor: pointer } .storie-left { position: absolute; position: absolute; width: 50%; height: 90%; left: 0; top: 10%; z-index: 2; cursor: pointer } .spinner { width: 70px; text-align: center; margin: auto; position: absolute; left: 50%; top: 50%; z-index: -1; margin-left: -30px } .spinner>div { width: 18px; height: 18px; background-color: #999; border-radius: 100%; display: inline-block; -webkit-animation: st-sk-bouncedelay 1.4s infinite ease-in-out both; animation: st-sk-bouncedelay 1.4s infinite ease-in-out both } .spinner .bounce1 { -webkit-animation-delay: -.32s; animation-delay: -.32s } .spinner .bounce2 { -webkit-animation-delay: -.16s; animation-delay: -.16s } .pos-info-storie { position: absolute; width: 100%; bottom: 0; left: 0; } .info-storie { float: left; width: 40%; margin: 0 25% 50px 25%; padding: 0 5%; font-family: 'Roboto'; } .info-storie span{ text-align: left; } .info-storie span:nth-of-type(1) { position: relative; float: left; padding: 5px 20px; border-radius: 4px; background: var(--cor-pr); } .info-storie span:nth-of-type(1) b { position: relative; z-index: 1; font-size: 16px; font-weight: 400; color: #000 } .info-storie span:nth-of-type(1):before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, .5); border-radius: 4px } .info-storie span:nth-of-type(2){ float: left; width: 100%; margin-top: 20px; font-size: 26px; font-weight: 900; color: #fff; opacity: 0; text-shadow: 0 1px 0 #000 } .info-storie span:nth-of-type(3){ float: left; width: 100%; margin-top: 10px; font-size: 12px; font-weight: 100; color: #fff; opacity: 0; text-shadow: 0 1px 0 #000 } .info-storie span:nth-of-type(4){ float: left; width: 100%; margin-top: 10px; font-size: 15px; text-align: center; font-weight: 300; color: #fff; opacity: 0; text-shadow: 0 1px 0 #000 } .info-storie span:nth-of-type(4):before{ content: "\e912"; font-family: 'icons-v11' !important; position: relative; top: 1px; margin-right: 5px; font-weight: normal; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; color: transparent; } .titulo-anima-storie { opacity: 1!important; transition: opacity 1s, visibility 1s } .url-storie { position: relative; display: inline-block; padding: 10px 30px 10px 50px; margin-top: 20px; color: #fff; border-radius: 20px; background: rgba(0, 0, 0, .1); border: 1px solid #fff; font-size: 14px; font-weight: 300; z-index: 999999 } .url-storie:hover { background: #fff; color: #000; text-decoration: none; outline: 0 } .url-storie:before { content: "\e9cb"; font-family: 'icons-v11' !important; position: absolute; left: 25px; top: 10px; font-size: 15px; margin-right: 5px } @media (max-width: 600px) { .pos-stories { height: 100px; } .lista-stories button { width: 80px; height: 100px; } .lista-stories button img { width: 65px; height: 65px; } .stories-mob-n{ display: none; } .stories-mob-s{ display: block; } .story-item-ele1 img { width: 100% } .info-storie { width: 90%; margin: 0 0 50px 0 } } @-webkit-keyframes st-sk-bouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1) } } @keyframes st-sk-bouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); transform: scale(0) } 40% { -webkit-transform: scale(1); transform: scale(1) } }