#testBlock { position: absolute; z-index: 999999; left: -10000px; width: 100%; max-width: 1170px; } #testBlock h4 { margin-top: 0; } #testBlock.middle .fps-main-link, #testBlock.middle .fps-date { display: none; } #testBlock.middle img { width: 75px; height: 75px; } #testBlock.middle .media-body { display: block; } #testBlock.middle p.fps-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; margin-bottom: 5px; } #testBlock.middle h2 { font-size: 20px; } #testBlock.middle h4 { font-size: 14px; } #testBlock.middle .fps-subtitle { margin-top: 10px; } #testBlock p.fps-subtitle.fps-small-device { display: none; } #testBlock.middle p.fps-subtitle.fps-small-device { display: block; } /** normal mode **/ #floatPersistentStrip { position: fixed; z-index: 1050; bottom: 0; right: 0; width: 100%; height: 350px; background-color: rgb(247, 229, 179); border-top: 20px solid rgba(85, 85, 85, .5); -webkit-background-clip: padding-box; background-clip: padding-box; } .fps-arrow { position: absolute; z-index: 10; top: 0; right: 50px; padding: 15px; padding-right: 0; font-size: 20px; color: rgb(85, 85, 85); cursor: pointer; } .fps-close { position: absolute; z-index: 10; top: 100px; right: 0; padding: 15px; font-size: 20px; color: rgb(85, 85, 85); cursor: pointer; } .fps-container { position: relative; width: 100%; max-width: 1170px; margin: 0 auto; } .fps-row { margin-left: 35px; margin-right: 35px; } .fps-col { position: relative; width: 33.33333333%; float: left; min-height: 1px; padding-right: 15px; padding-left: 15px; } #floatPersistentStrip .fps-main-link { margin-top: 15px; } .fps-text { width: 100%; } #floatPersistentStrip.fps-full-floating p.fps-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #floatPersistentStrip.fps-full-floating .fps-main-link { display: none; } #floatPersistentStrip h4 { margin-top: 0; } #floatPersistentStrip .fps-subtitle.fps-small-device { display: none; } /** middle mode **/ #floatPersistentStrip.fps-middle-mode { border-left: none; width: 100%; height: 170px; } #floatPersistentStrip.fps-middle-mode .fps-arrow, #floatPersistentStrip.fps-middle-horizontal-floating .fps-arrow { padding-right: 0; } #floatPersistentStrip.fps-middle-mode h2, #floatPersistentStrip.fps-middle-horizontal-floating h2 { font-size: 20px; } #floatPersistentStrip.fps-middle-mode h4, #floatPersistentStrip.fps-middle-horizontal-floating h4 { font-size: 14px; } #floatPersistentStrip.fps-middle-mode img, #floatPersistentStrip.fps-middle-horizontal-floating img { width: 75px; height: 75px; } #floatPersistentStrip.fps-middle-mode p, #floatPersistentStrip.fps-middle-horizontal-floating p { font-size: 12px; margin-bottom: 5px; } #floatPersistentStrip.fps-middle-mode p.fps-text, #floatPersistentStrip.fps-middle-horizontal-floating p.fps-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #floatPersistentStrip.fps-middle-floating .fps-main-link, #floatPersistentStrip.fps-middle-mode .fps-main-link, #floatPersistentStrip.fps-middle-horizontal-floating .fps-main-link { display: none; } /** small mode **/ #floatPersistentStrip.fps-small-mode { border-left: 20px solid rgba(85, 85, 85, .5); width: 70px; height: 70px; } #floatPersistentStrip.fps-full-hide .fps-arrow, #floatPersistentStrip.fps-middle-hide .fps-arrow, #floatPersistentStrip.fps-small-mode .fps-arrow { left: 0; right: auto; padding-right: 15px; } #floatPersistentStrip.fps-middle-hide .fps-close, #floatPersistentStrip.fps-middle-hide h2, #floatPersistentStrip.fps-middle-hide img, #floatPersistentStrip.fps-middle-hide .media-body, #floatPersistentStrip.fps-middle-hide .fps-main-link, #floatPersistentStrip.fps-small-mode .fps-close { display: none; } #floatPersistentStrip.fps-small-mode .fps-container { margin: 10px 0 0 0; } #floatPersistentStrip.fps-min-over { width: 540px; } #floatPersistentStrip.fps-small-mode h2 { display: none; font-size: 20px; margin-top: 5px; } #floatPersistentStrip.fps-small-mode img { display: none; } #floatPersistentStrip.fps-small-mode .media-body { display: none; } #floatPersistentStrip.fps-small-mode .fps-main-link { display: none; } /** animations **/ #floatPersistentStrip.fps-full-floating { animation-name: fps-middle-to-full; animation-duration: .5s; height: 350px; } #floatPersistentStrip.fps-full-floating img { animation-name: image-zooming; animation-duration: .5s; width: 156px; height: 156px; } #floatPersistentStrip.fps-full-floating h2 { animation-name: title-zooming; animation-duration: .5s; font-size: 30px } #floatPersistentStrip.fps-full-floating h4 { animation-name: tanchor-zooming; animation-duration: .5s; font-size: 18px } #floatPersistentStrip.fps-middle-floating { animation-name: fps-middle-to-full; animation-duration: .5s; animation-direction: reverse; height: 170px; } #floatPersistentStrip.fps-middle-floating img { animation-name: image-zooming; animation-duration: .5s; animation-direction: reverse; width: 75px; height: 75px; } #floatPersistentStrip.fps-middle-floating h2 { animation-name: title-zooming; animation-duration: .5s; animation-direction: reverse; font-size: 20px } #floatPersistentStrip.fps-middle-floating h4 { animation-name: tanchor-zooming; animation-duration: .5s; animation-direction: reverse; font-size: 14px } #floatPersistentStrip.fps-full-hide { animation-name: fps-full-to-small; animation-duration: .5s; border-left: 20px solid rgba(85, 85, 85, .5); width: 70px; height: 70px; } #floatPersistentStrip.fps-full-hide .fps-close, #floatPersistentStrip.fps-full-hide h2, #floatPersistentStrip.fps-full-hide img, #floatPersistentStrip.fps-full-hide .media-body, #floatPersistentStrip.fps-full-hide .fps-main-link { display: none; } #floatPersistentStrip.fps-middle-horizontal-floating { animation-name: fps-middle-h-floating; animation-duration: .5s; border-left: none; width: 100%; height: 170px; } #floatPersistentStrip.fps-middle-horizontal-floating img { animation-name: display_content; animation-duration: 2s; } #floatPersistentStrip.fps-middle-horizontal-floating .media-body { animation-name: display_content; animation-duration: 2s; } #floatPersistentStrip.fps-middle-hide { animation-name: fps-middle-to-small; animation-duration: .5s; border-left: 20px solid rgba(85, 85, 85, .5); width: 70px; height: 70px; } #floatPersistentStrip.fps-small-horizontal-floating { animation-name: fps-small-h-floating; animation-duration: .5s; } #floatPersistentStrip.fps-small-horizontal-floating.reverse { animation-name: fps-small-h-floating; animation-duration: .5s; animation-direction: reverse; } #floatPersistentStrip.fps-min-over h2 { display: block; animation-name: display_content; animation-duration: .5s; } @keyframes image-zooming { from { width: 75px; height: 75px; } to { width: 156px; height: 156px; } } @keyframes title-zooming { from { font-size: 20px; } to { font-size: 30px; } } @keyframes tanchor-zooming { from { font-size: 14px; } to { font-size: 18px; } } @keyframes fps-full-to-small { from { width: 100%; height: 350px; } to { width: 70px; height: 70px; } } @keyframes fps-middle-to-full { from { height: 170px; } to { height: 350px; } } @keyframes fps-middle-h-floating { from { width: 540px; height: 70px; border-left-width: 20px; } to { width: 100%; height: 170px; border-left-width: 0; } } @keyframes fps-middle-to-small { from { width: 100%; height: 170px; } to { width: 70px; height: 70px; } } @keyframes fps-small-h-floating { from { width: 70px; } to { width: 540px; } } @keyframes display_content { from { opacity: 0; } to { opacity: 1; } } @keyframes md-image-zooming { from { width: 75px; height: 75px; } to { width: 110px; height: 110px; } } @keyframes md-image-zooming { from { width: 55px; height: 55px; } to { width: 55px; height: 55px; } } @keyframes sm-image-zooming { from { width: 75px; height: 75px; } to { width: 100px; height: 100px; } } @keyframes sm-middle-h-floating { from { width: 70px; height: 70px; border-left-width: 20px; } to { width: 100%; height: 170px; border-left-width: 0; } } @media screen and (min-width: 992px) and (max-width: 1199px) { #floatPersistentStrip.fps-middle-mode img, #floatPersistentStrip.fps-middle-horizontal-floating img { width: 75px; height: 75px; } #floatPersistentStrip.fps-full-floating img { animation-name: md-image-zooming; animation-duration: .5s; width: 110px; height: 110px; } #floatPersistentStrip.fps-middle-floating img { animation-name: md-image-zooming; animation-duration: .5s; animation-direction: reverse; width: 75px; height: 75px; } } @media screen and (min-width: 768px) and (max-width: 991px) { #floatPersistentStrip.fps-middle-mode img, #floatPersistentStrip.fps-middle-horizontal-floating img { width: 55px; height: 55px; } #floatPersistentStrip.fps-full-floating img { animation-name: md-image-zooming; animation-duration: .5s; width: 55px; height: 55px; } #floatPersistentStrip.fps-middle-floating img { animation-name: md-image-zooming; animation-duration: .5s; animation-direction: reverse; width: 55px; height: 55px; } } @media screen and (max-width: 767px) { #floatPersistentStrip .media-body { display:block; } #floatPersistentStrip .fps-subtitle { margin-top: 10px; } #floatPersistentStrip.fps-full-mode .fps-arrow, #floatPersistentStrip.fps-middle-mode .fps-arrow, #floatPersistentStrip.fps-full-hide .fps-arrow, #floatPersistentStrip.fps-middle-hide .fps-arrow, #floatPersistentStrip.fps-middle-horizontal-floating .fps-arrow, #floatPersistentStrip.fps-middle-floating .fps-arrow, #floatPersistentStrip .fps-date { display: none; } #floatPersistentStrip.fps-middle-mode img, #floatPersistentStrip.fps-middle-horizontal-floating img { width: 75px; height: 75px; } #floatPersistentStrip.fps-middle-horizontal-floating { animation-name: sm-middle-h-floating; } #floatPersistentStrip.fps-full-floating img { animation-name: sm-image-zooming; width: 100px; height: 100px; } #floatPersistentStrip.fps-middle-floating img { animation-name: sm-image-zooming; animation-direction: reverse; width: 75px; height: 75px; } #floatPersistentStrip p.fps-subtitle:not(.fps-small-device) { display: none; } #floatPersistentStrip p.fps-subtitle.fps-small-device { display: block; } } @media screen and (max-width: 479px) { #floatPersistentStrip h2, #floatPersistentStrip h4 { font-size: 12px !important; } #floatPersistentStrip h4 { margin-bottom: 5px; font-weight: 700 !important; } #floatPersistentStrip .media-object { width: 55px !important; height: 55px !important; } #floatPersistentStrip.fps-middle-horizontal-floating .fps-main-link { display: none; } }