/* ======= ==================================================== * Filename: custom.css * Version: 0.1 * Project: radio-rab.hr * Author: web360 * =========================================================== */ .overlay { background-color: #5268BD; width: 100%; height: 100%; position: fixed; z-index: 999999;} .overlay .centerContainer { position: absolute; top: 40%; width: 100%; text-align: center; margin: 0 auto; } .overlay .centerContainer i { display: block; margin-top: 30px; color: #fff; } header { width: 100%; height: 800px; position: relative;} header .slider { height: 800px; margin-top: 10px; z-index: 999999;} header .slider .bxslider { height: 800px;} header .slider .bxslider li { min-height: 800px; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;} .bottomHeader { position: absolute; bottom: 10px; width: 100%; left: 0; text-align: center; } .bottomHeader i { font-size: 5em; color: #fff; cursor: pointer; } .categ-header { width: 100%; height: 300px; position: relative;} .categ-header .slider { height: 100%; margin-top: 10px;} .categ-header .slider::after {content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.7); box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.7); bottom: 0px; width: 100%; height: 20%; border-radius: 100%; left: 0; right: 0;} .categ-header .slider .bxslider { height: 100%;} .categ-header .slider .bxslider li { min-height: 300px; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;} header .header-wrapper { position: absolute; width: 100%; top: 100px; z-index: 999;} header .header-wrapper #logo { position: absolute; z-index: 9999; background: url('../images/elements/logo-background.png') no-repeat; background-size: 100%; padding: 50px; left: 50%; top: -50px; transform: translateX(-50%);} header .header-wrapper #logo a { text-align: center; display: block; padding-top: 10px; } header .header-wrapper #logo a img { width: 80px;} header .header-wrapper #logo h1 { font-size: 2em; color: #000; } header .headerBottom { background-color: #5268BD; position: absolute; bottom: 0; width: 100%; padding: 20px 0; } header .headerBottom .item { display: inline-block; padding-right: 30px; margin-bottom: 20px;} header .headerBottom .item:nth-child(2) {padding-right: 0px;} header .headerBottom .item:nth-child(3) {margin-bottom: 0px;} header .headerBottom .item img { vertical-align: middle; margin-right: 10px; } header .headerBottom .item div { vertical-align: middle; display: inline-block; } header .headerBottom .item div p { padding-bottom: 0; line-height: 1.3em; color: #fff; font-size: 1.3em;} header .header-wrapper nav { text-align: center; width: 100%;} header .header-wrapper nav ul > li { width: 100px; height: 100px; padding: 10px; margin-right: 10px; background-color: #2C4BA5; border-radius: 50%; display: inline-block; vertical-align: middle; text-align: center; position: relative; transition: .5s all ease-in-out;} header .header-wrapper nav ul > li:nth-child(4) { margin-right: 100px;} header .header-wrapper nav ul > li:nth-child(5) { margin-left: 100px;} header .header-wrapper nav ul > li:last-child { margin-right: 0;} header .header-wrapper nav ul > li img { width: 30px; display: block; margin: 0 auto; } header .header-wrapper nav ul > li span { padding-top: 10px; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 1.3em; display: block;} header .header-wrapper nav ul > li:hover .activities { visibility: visible; opacity: 1; width: 270px; } header .header-wrapper nav ul > li a { display: block; padding: 20px 0; color: #2c2c2c; transition: .5s all ease-in-out;} header .header-wrapper nav ul > li:hover a { color: #fff;} header .header-wrapper nav ul > li:hover { background-color: #5268BD;} header .header-wrapper nav ul > li ul { opacity: 0; height: 0; visibility: hidden; transition: .3s all ease-in;position: absolute; left: 0; width: 100%; margin-top: 15px;} header .header-wrapper nav ul > li.dropDown:hover { border-radius: 50% 50% 0 0; } header .header-wrapper nav ul > li:hover ul { opacity: 1; height: auto; background-color: red; visibility: visible;} header .header-wrapper nav ul > li ul li { background-color: none !important; width: auto; height: auto; border-radius: 0 !important; display: block; padding: 0 !important; margin: 0 !important; width: 100%;} header .header-wrapper nav ul > li ul li a { padding: 10px 0; } header .header-wrapper nav ul > li ul li span { padding: 0; } header .header-wrapper .active { border-color: #fff;} header .header-wrapper nav ul > .active img { -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25); } header .header-wrapper nav .menu-icon { display: none;} .topNav { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 40px; padding: 20px 0 50px 0; background-color: #5268BD; } .topNavPattern { background: url('../images/elements/nav_pattern.png'); height: 100px; background-repeat: repeat-x; position: absolute; top: 110px; left: 0; width: 100%; z-index: 10; } .topNav #logo { float: left; } .topNav #logo img { width: 220px; } .topNav nav { float: right; margin-top: 25px;} .topNav nav ul > li { display: inline-block; text-align: center; transition: .5s all ease; border-radius: 10px; position: relative;} .topNav nav ul > li.multi:hover { border-radius: 10px 10px 0 0;} .topNav nav ul > li:hover { background-color: #fff;} .topNav nav ul > li.active { background-color: #fff; border-radius: 10px;} .topNav nav ul > li.active a { color: #5268BD;} .topNav nav ul > li:hover a { color: #5268BD;} .topNav nav ul > li a { display: block; padding: 15px 20px; color: #fff; font-size: 1.6em; font-weight: bold;} .topNav nav ul li ul { visibility: hidden; background-color: #5268BD; opacity: 0; height: 0; position: absolute; top: 100%; left: 0; transition: .5s all ease-in-out; width: 200px; padding-top: 20px;} .topNav nav ul li ul li { width: 100%; text-align: left; border-radius: 0;} .topNav nav ul li ul li a { color: #fff !important; font-weight: normal !important;} .topNav nav ul li ul li:hover a { color: #5268BD !important;} .topNav nav ul li:hover ul { visibility: visible; z-index: 999; opacity: 1; height: auto;} .topNav .active { border-color: #fff;} .topNav nav ul > .active img { -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25); } .topNav nav .menu-icon { display: none;} #home { padding: 30px 0;} #home h1 { padding: 40px 0; color: #00ADEF; font-size: 3em;} #home article { padding: 20px; margin-bottom: 20px; transition: .5s all ease;} #home article h1 { color: #034221; font-size: 2.2em; padding: 0; transition: .5s all ease;} #home article p { transition: .5s all ease;} #home article img { width: 150px; margin: 0 20px 20px 0; float: left;} #news { padding: 50px 0;} #news h1 { padding: 40px 0; color: #5268BD; font-size: 3em;} #news article { padding: 30px; color: #034221; transition: .5s all ease; border-bottom: 1px solid #DBDBDB;} #news article:last-child { border-bottom: none;} #news article a { color: #034221; display: block;} #news article h1 { color: #5268BD; font-size: 2em; padding: 0; transition: .5s all ease;} #news article small { font-size: 1.3em; padding-left: 20px; margin: 10px 0 15px 0; display: block; color: #046D35; transition: .5s all ease;} #news article p { transition: .5s all ease;} #news article .img-container { float: left; width: 200px; height: 150px; overflow: hidden; margin-right: 40px; border: 2px solid #999999; transition: .5s all ease;} #news article .img-container .article-image { min-width: 200px; min-height: 150px; width: 300px;} #newsSidebar { padding: 20px 0 10px 0; background: url('../images/elements/voda.png') #fff; background-repeat: no-repeat; background-position: bottom; position: absolute; top: -400px; width: 100%; z-index: 99; -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px 2px rgba(0,0,0,0.5); box-shadow: 0 0 5px 2px rgba(0,0,0,0.5); left: 10px;} #newsSidebar .container { padding-top: 0px; } #newsSidebar h1 { padding: 10px 0 30px 0; color: #000; font-size: 2em; text-align: center;} #newsSidebar article { padding: 10px 30px; color: #fff; transition: .5s all ease; border-bottom: 1px solid #DBDBDB;} #newsSidebar article:last-child { border-bottom: none;} #newsSidebar article a { color: #fff; display: block;} #newsSidebar article h1 { color: #000; font-size: 1.7em; padding: 0; transition: .5s all ease; text-align: left;} #newsSidebar article p { transition: .5s all ease; color: #474747; font-size: 1.3em;} #newsSidebar article .img-container { float: left; width: 90px; height: 60px; overflow: hidden; margin-right: 20px; border: 2px solid #999999; transition: .5s all ease;} #newsSidebar article .img-container .article-image { min-width: 150px; min-height: 100px; width: 300px;} #newsSidebar article .img-container img { width: 100% !important; } #newsSidebar article:hover { background: #377FA8; color: #fff;} #newsSidebar article:hover * { color: #fff;} #newsSidebar article:hover .img-container { border-color: #fff;} .manometar { position: absolute; left: 50%; transform: translateX(-50%); top: -100px; width: 80px; z-index: 88;} .pipe { position: absolute; left: 50%; transform: translateX(-50%); bottom: -357px; width: 120px; z-index: 88;} #news article:hover { background: #5268BD; color: #fff;} #news article:hover * { color: #fff;} #news article:hover .img-container { border-color: #fff;} #article { padding: 60px 0;} #article article h1 { color: #5268BD; font-size: 2.5em; padding: 0; } #article article small { font-size: 1.3em; padding-left: 20px; margin: 10px 0 25px 0; display: block; color: #00ADEF; } #article article .article-text { padding: 20px;} #article article .article-text table td { border: 1px solid #BABABA; padding: 5px;} #article article .article-text a { color: #00ADEF;} #article article .article-text a:hover { color: #057EAA;} #article article p { padding-bottom: 10px;} #article article ul,ol { font-size: 1.6em; padding-bottom: 10px; padding-left: 40px;} #article article li { padding-bottom: 10px;} #article article ol li ul { font-size: 1em; padding-top: 10px; padding-bottom: 10px;} #article .allNews { border-left: 1px solid #ccc; padding-left: 20px; margin-bottom: 50px;} #article .allNews h1 { color: #5268BD; margin-bottom: 20px;} #article .allNews article { margin-bottom: 10px;} #article .allNews article a h1 { font-size: 1.4em; color: #4C4C4C;} #article .allNews article a:hover h1 { color: #034221;} .article-category h3 { margin-top: 15px; margin-left: 20px; } .article-category h3 a { color: #00A2E7;} .article-category h3 a:hover { color: #20272A;} .active-category { color: #20272A !important; } .pipeDroplet { position: absolute; right: 0; top: 215px; } .pipeDroplet img { width: 250px; } #footerSmall { background: url('../images/elements/footer.png') no-repeat; background-size: 100%; width: 100%; margin-top: 50px; min-height: 300px; padding-bottom: 70px; position: relative; z-index: 99999; } #footerSmall .container { padding-top: 0; } /*.drop { position: absolute; top: -76px; right: 200px; }*/ #footerSmall .item { float: left; margin-top: 20px; margin-right: 20px; text-align: center;} #footerSmall .item h3 { font-weight: normal; color: #fff; padding-top: 20px; } #footerSmall .item .itemWrapper { background-color: #377FA8; border-radius: 50%; padding: 20px;} #footerSmall i { font-size: 5em; color: #fff; } #footerSmall .item .itemWrapper .iconWrapper { padding: 20px; width: 50px; height: 50px; text-align: center; border-radius: 50%; } #footerSmall .item:first-child .itemWrapper .iconWrapper { background-color: #205782;} #footerSmall .item:nth-child(2) .itemWrapper .iconWrapper { background-color: #e94551;} #footerSmall .item:nth-child(3) .itemWrapper .iconWrapper { background-color: #bfbe5d;} .sidebar a { margin-bottom: 20px; display: block;} .fotos { padding: 30px 0;} .fotos h2 { color: #00ADEF; padding-bottom: 30px;} .fotos a { border: 3px solid #4C4C4C; display: inline-block; margin-right: 10px; margin-bottom: 5px; width: 150px; height: 100px; overflow: hidden; transition: .5s all ease-in-out;} .fotos a:hover { border-color: #00ADEF;} .documents { padding-top: 30px;} .documents h2 { color: #00ADEF; padding-bottom: 30px;} .documents .document { width: 200px; vertical-align: top;} .documents .document img { float: left; padding-right: 10px;} .documents .document { display: inline-block; margin-right: 15px;} .documents .document a { display: block;} .documents .document h1 { font-size: 1.6em; color: #4C4C4C; padding-bottom: 5px; transition: .5s all ease-in-out;} .documents .document small { font-size: 1.2em; color: #034221;} .documents .document a:hover h1 { color: #00ADEF;} #footer-image { min-height: 400px; background: url('../images/elements/footer-bg.png') no-repeat; background-size: 100% 400px; } footer { color: #636363; padding: 50px 0 20px 0;} footer .container { padding-top: 0; } footer h1 { font-size: 2em; padding-bottom: 20px;} footer .footer-town-logo { margin: 20px;} footer .copyright { padding: 20px 0; text-align: right;} footer .copyright a { color: #636363; font-size: 1.4em;} footer .borderBottom { border-bottom: 5px solid #cdcdce; } .dropTest { position: absolute; } .dropTest:before, .dropTest:after { content: ""; display: block; position: absolute; } .dropTest:before { background: #3D84B0; border-radius: 100%; box-shadow: 0 0 0 0.1em #3D84B0, 0 0 0 0.15em #3D84B0, 0 0 0 0.2em #3D84B0, 0 0 0 0.25em #3D84B0, 0 0 0 0.3em #3D84B0, 0 0 0 0.35em #3D84B0, 0 0 0 0.4em #3D84B0, 0 0 0 0.45em #3D84B0, 0 0 0 0.5em #3D84B0; top: 510px; left: 125px; z-index: 55; width: 1em; height: 1em; -webkit-animation: fall 5s cubic-bezier(0.5, 0, 1, 0.5) infinite; -moz-animation: fall 5s cubic-bezier(0.5, 0, 1, 0.5) infinite; -ms-animation: fall 5s cubic-bezier(0.5, 0, 1, 0.5) infinite; animation: fall 5s cubic-bezier(0.5, 0, 1, 0.5) infinite; } @-webkit-keyframes fall { 5%, 15% { box-shadow: 0 -1.4em 0 0.1em #3D84B0, 0 -0.8em 0 0.15em #3D84B0, 0 -0.3em 0 0.2em #3D84B0, 0 -0.1em 0 0.25em #3D84B0, 0 0 0 0.3em #3D84B0, 0 0.2em 0 0.35em #3D84B0, 0 0.4em 0 0.4em #3D84B0, 0 0.6em 0 0.45em #3D84B0, 0 0.8em 0 0.5em #3D84B0; } 16% { top: 80%; } 18% { top: 80%; box-shadow: 1em -8em 0 0.2em #3D84B0, -2.2em -3.8em 0 0.1em #3D84B0, 3em -2.85em 0 0.3em #3D84B0, -3.5em -4em 0 0.2em #3D84B0, 0 0 0 0.3em #3D84B0, 2em -2em 0 0.2em #3D84B0, -0.3em -3em 0 0.2em #3D84B0, 0.5em -5em 0 0.35em #3D84B0, -3em -1em 0 0.3em #3D84B0; } 30% { top: 90%; box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.15em rgba(252,252,255,0.1), 3em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.25em rgba(252,252,255,0.1), 0 0 0 0.2em rgba(252,252,255,0.1), 2.35em 0 0 0.3em rgba(252,252,255,0.1), -0.5em 0 0 0.2em rgba(252,252,255,0.1), 1em 0 0 0.3em rgba(252,252,255,0.1), -4em 0 0 0.4em rgba(252,252,255,0.1); } 40%, 100%{ top: 95%; background: rgba(255,255,255,1); box-shadow: 1.8em 0.5em 0 0.2em rgba(255,255,255,0), -3em 0.5em 0 0.1em rgba(255,255,255,0), 4em 0.5em 0 0.1em rgba(255,255,255,0), -3.5em 0.5em 0 0.1em rgba(255,255,255,0), 0 0 0 0.3em rgba(255,255,215,0), 2.45em 0.5em 0 0.1em rgba(255,255,255,0), -0.8em 0.5em 0 0.2em rgba(255,255,255,0), 1.5em 0.5em 0 0.3em rgba(255,255,255,0), -4.5em 0.5em 0 0.2em rgba(255,255,255,0); } } @-moz-keyframes fall { 5%, 15% { box-shadow: 0 -1.4em 0 0.1em #3D84B0, 0 -0.8em 0 0.15em #3D84B0, 0 -0.3em 0 0.2em #3D84B0, 0 -0.1em 0 0.25em #3D84B0, 0 0 0 0.3em #3D84B0, 0 0.2em 0 0.35em #3D84B0, 0 0.4em 0 0.4em #3D84B0, 0 0.6em 0 0.45em #3D84B0, 0 0.8em 0 0.5em #3D84B0; } 16% { top: 80%; } 18% { top: 80%; box-shadow: 1em -8em 0 0.2em #3D84B0, -2.2em -3.8em 0 0.1em #3D84B0, 3em -2.85em 0 0.3em #3D84B0, -3.5em -4em 0 0.2em #3D84B0, 0 0 0 0.3em #3D84B0, 2em -2em 0 0.2em #3D84B0, -0.3em -3em 0 0.2em #3D84B0, 0.5em -5em 0 0.35em #3D84B0, -3em -1em 0 0.3em #3D84B0; } 30% { top: 90%; box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.15em rgba(252,252,255,0.1), 3em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.25em rgba(252,252,255,0.1), 0 0 0 0.2em rgba(252,252,255,0.1), 2.35em 0 0 0.3em rgba(252,252,255,0.1), -0.5em 0 0 0.2em rgba(252,252,255,0.1), 1em 0 0 0.3em rgba(252,252,255,0.1), -4em 0 0 0.4em rgba(252,252,255,0.1); } 40%, 100% { top: 95%; background: rgba(255,255,255,1); box-shadow: 1.8em 0.5em 0 0.2em rgba(255,255,255,0), -3em 0.5em 0 0.1em rgba(255,255,255,0), 4em 0.5em 0 0.1em rgba(255,255,255,0), -3.5em 0.5em 0 0.1em rgba(255,255,255,0), 0 0 0 0.3em rgba(255,255,215,0), 2.45em 0.5em 0 0.1em rgba(255,255,255,0), -0.8em 0.5em 0 0.2em rgba(255,255,255,0), 1.5em 0.5em 0 0.3em rgba(255,255,255,0), -4.5em 0.5em 0 0.2em rgba(255,255,255,0); } } @-ms-keyframes fall { 5%, 15% { box-shadow: 0 -1.4em 0 0.1em #3D84B0, 0 -0.8em 0 0.15em #3D84B0, 0 -0.3em 0 0.2em #3D84B0, 0 -0.1em 0 0.25em #3D84B0, 0 0 0 0.3em #3D84B0, 0 0.2em 0 0.35em #3D84B0, 0 0.4em 0 0.4em #3D84B0, 0 0.6em 0 0.45em #3D84B0, 0 0.8em 0 0.5em #3D84B0; } 16% { top: 80%; } 18% { top: 80%; box-shadow: 1em -8em 0 0.2em #3D84B0, -2.2em -3.8em 0 0.1em #3D84B0, 3em -2.85em 0 0.3em #3D84B0, -3.5em -4em 0 0.2em #3D84B0, 0 0 0 0.3em #3D84B0, 2em -2em 0 0.2em #3D84B0, -0.3em -3em 0 0.2em #3D84B0, 0.5em -5em 0 0.35em #3D84B0, -3em -1em 0 0.3em #3D84B0; } 30% { top: 90%; box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.15em rgba(252,252,255,0.1), 3em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.25em rgba(252,252,255,0.1), 0 0 0 0.2em rgba(252,252,255,0.1), 2.35em 0 0 0.3em rgba(252,252,255,0.1), -0.5em 0 0 0.2em rgba(252,252,255,0.1), 1em 0 0 0.3em rgba(252,252,255,0.1), -4em 0 0 0.4em rgba(252,252,255,0.1); } 40%, 100% { top: 95%; background: rgba(255,255,255,1); box-shadow: 1.8em 0.5em 0 0.2em rgba(255,255,255,0), -3em 0.5em 0 0.1em rgba(255,255,255,0), 4em 0.5em 0 0.1em rgba(255,255,255,0), -3.5em 0.5em 0 0.1em rgba(255,255,255,0), 0 0 0 0.3em rgba(255,255,215,0), 2.45em 0.5em 0 0.1em rgba(255,255,255,0), -0.8em 0.5em 0 0.2em rgba(255,255,255,0), 1.5em 0.5em 0 0.3em rgba(255,255,255,0), -4.5em 0.5em 0 0.2em rgba(255,255,255,0); } } @keyframes fall { 5%, 15% { box-shadow: 0 -1.4em 0 0.1em #3D84B0, 0 -0.8em 0 0.15em #3D84B0, 0 -0.3em 0 0.2em #3D84B0, 0 -0.1em 0 0.25em #3D84B0, 0 0 0 0.3em #3D84B0, 0 0.2em 0 0.35em #3D84B0, 0 0.4em 0 0.4em #3D84B0, 0 0.6em 0 0.45em #3D84B0, 0 0.8em 0 0.5em #3D84B0; } 16% { top: 80%; } 18% { top: 80%; box-shadow: 1em -8em 0 0.2em #3D84B0, -2.2em -3.8em 0 0.1em #3D84B0, 3em -2.85em 0 0.3em #3D84B0, -3.5em -4em 0 0.2em #3D84B0, 0 0 0 0.3em #3D84B0, 2em -2em 0 0.2em #3D84B0, -0.3em -3em 0 0.2em #3D84B0, 0.5em -5em 0 0.35em #3D84B0, -3em -1em 0 0.3em #3D84B0; } 30% { top: 90%; box-shadow: 1.5em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.15em rgba(252,252,255,0.1), 3em 0 0 0.2em rgba(252,252,255,0.1), -2em 0 0 0.25em rgba(252,252,255,0.1), 0 0 0 0.2em rgba(252,252,255,0.1), 2.35em 0 0 0.3em rgba(252,252,255,0.1), -0.5em 0 0 0.2em rgba(252,252,255,0.1), 1em 0 0 0.3em rgba(252,252,255,0.1), -4em 0 0 0.4em rgba(252,252,255,0.1); } 40%, 100% { top: 95%; background: rgba(255,255,255,1); box-shadow: 1.8em 0.5em 0 0.2em rgba(255,255,255,0), -3em 0.5em 0 0.1em rgba(255,255,255,0), 4em 0.5em 0 0.1em rgba(255,255,255,0), -3.5em 0.5em 0 0.1em rgba(255,255,255,0), 0 0 0 0.3em rgba(255,255,215,0), 2.45em 0.5em 0 0.1em rgba(255,255,255,0), -0.8em 0.5em 0 0.2em rgba(255,255,255,0), 1.5em 0.5em 0 0.3em rgba(255,255,255,0), -4.5em 0.5em 0 0.2em rgba(255,255,255,0); } } @-webkit-keyframes surface { 50% { border-radius: 0 100% 0 75%; opacity: 0.5; height: 3.5em; } } @-moz-keyframes surface { 50% { border-radius: 0 100% 0 75%; opacity: 0.5; height: 3.5em; } } @-ms-keyframes surface { 50% { border-radius: 0 100% 0 75%; opacity: 0.5; height: 3.5em; } } @keyframes surface { 50% { border-radius: 0 100% 0 75%; opacity: 0.5; height: 3.5em; } } .stick { position: fixed; top: 0; } .fa-bounce { display: inline-block; position: relative; -moz-animation: bounce 1s infinite linear; -o-animation: bounce 1s infinite linear; -webkit-animation: bounce 1s infinite linear; animation: bounce 1s infinite linear; } @-webkit-keyframes bounce { 0% { top: 0; } 50% { top: -0.2em; } 70% { top: -0.3em; } 100% { top: 0; } } @-moz-keyframes bounce { 0% { top: 0; } 50% { top: -0.2em; } 70% { top: -0.3em; } 100% { top: 0; } } @-o-keyframes bounce { 0% { top: 0; } 50% { top: -0.2em; } 70% { top: -0.3em; } 100% { top: 0; } } @-ms-keyframes bounce { 0% { top: 0; } 50% { top: -0.2em; } 70% { top: -0.3em; } 100% { top: 0; } } @keyframes bounce { 0% { top: 0; } 50% { top: -0.2em; } 70% { top: -0.3em; } 100% { top: 0; } }