div#birds-container { top: 200px; position: relative; } @media(max-width:$screen-xs-min){ div#birds-container { top: -80px; position: relative; } } #linaro-latest-tweets .linaro-tweet { padding: 20px; } #linaro-latest-tweets .tweet-header { overflow: auto; padding: 5px; border-bottom: 1px solid #eee; } #linaro-latest-tweets .tweet-inner-content { padding-top: 0; padding: 5px; padding-top:0px; padding-right:0px; border-bottom: 1px solid #eee; overflow: hidden; } #linaro-latest-tweets .tweet-footer { overflow: auto; padding-top: 0; padding: 5px; } // Anything below the large container size @media(min-width:$screen-lg-min){ #linaro-latest-tweets .tweet-user-name { padding-left: 35px; } } p.tweet-content::-webkit-scrollbar { width: 10px; } p.tweet-content::-webkit-scrollbar-track { border: 1px solid #eee; } p.tweet-content::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid #eee; background-color: #eee; } #linaro-latest-tweets p.tweet-content{ font-size: 16px; margin-bottom: 0; height: 130px; padding-right: 5px; overflow-y: scroll; } #linaro-latest-tweets div.tweet-img{ width: 100%; padding:0px; margin-top: 0px; height: 170px; } #linaro-latest-tweets div.tweet-img > img { width: 100%; height: auto; margin-top: 5px; } #linaro-latest-tweets .tweet-inner { border: 1px solid #eee; overflow: auto; background-color: white; z-index: 99999; } .row.tweet-row { padding: 10px; margin-top:100px; margin-bottom: 100px; } #linaro-latest-tweets p.interact { margin-bottom: 0; float: left; width: auto; padding-left:5px; font-size: 12px; } #linaro-latest-tweets p.interact > a { color: #b3b3b3; transition: all .5s linear; } #linaro-latest-tweets p.interact > a:hover { color: #252525; } #linaro-latest-tweets p.interact > a > i { margin-bottom: 0; float: left; width: 20px; margin-right:5px; } #linaro-latest-tweets p.tweet-infos { margin-bottom: 0px; font-size: 12px; text-align: right; } #linaro-latest-tweets .tweet-user-img { padding: 0; } #linaro-latest-tweets .tweet-user-img > img { border: 1px solid #eee; } #linaro-latest-tweets .tweet-user-name { padding:0; padding-left: 20px; } #linaro-latest-tweets .tweet-user-name a { color: #252525; } #linaro-latest-tweets .tweet-user-name a > h3 { padding: 0; margin: 0; margin-top: 5px; font-size: 16px; } #linaro-latest-tweets .tweet-user-name a > small { padding: 0; margin: 0; margin-top: 5px; font-size: 12px; } #linaro-latest-tweets .tweet-user-img > a > img { border: 1px solid #eee; height: 50px; } #linaro-latest-tweets .twitter-bird { padding: 0; margin: 0; margin-top: 5px; font-size: 12px; color: #1da1f2; transition: all .5s linear; } #linaro-latest-tweets .twitter-bird > a { color: #1da1f2; transition: all .5s linear; } #linaro-latest-tweets .twitter-bird > a:hover { color: #106ca5; } .flying-twitter-bird > svg > g > path { fill: #dae1e5; } .flying-twitter-bird > svg { transform: rotate(22deg); } .flying-twitter-bird { position: absolute; left: 0px; opacity: 0; animation: movement 30s linear infinite; transition: all 100ms ease; } .flying-twitter-bird.small { animation-delay: 6s; } .flying-twitter-bird.small { width: 20px; height: 20px; } .flying-twitter-bird.small.two{ margin-top: 200px; animation-delay: 12s; } .flying-twitter-bird.small.three { margin-top: 160px; animation-delay: 18s; } .flying-twitter-bird.small.four { margin-top: 70px; animation-delay: 24s; } .flying-twitter-bird.small.five { margin-top: 200px; animation-delay: 30s; } .flying-twitter-bird.big { height: 60px; width: 60px; } .flying-twitter-bird.big.two { margin-top: 200px; animation-delay: 10s; } .flying-twitter-bird.big.three { margin-top: 150px; animation-delay: 15s; } .flying-twitter-bird.big.four { margin-top: 70px; animation-delay: 20s; } .flying-twitter-bird.big.five { margin-top: 180px; animation-delay: 22s; } @keyframes movement{ 0% { left: 0px; transform: rotate(30deg); transform: translateY(0px); } 1%{ opacity: 0; } 2%{ opacity: .1; } 3%{ opacity: .3; } 4%{ opacity: .5; } 5%{ opacity: .7; } 10% { opacity: 1; transform: rotate(29deg); transform: translateY(2px); } 20% { transform: rotate(28deg); transform: translateY(5px); } 30% { transform: rotate(27deg); transform: translateY(10px); } 40% { transform: rotate(26deg); transform: translateY(15px); } 50% { transform: rotate(26deg); transform: translateY(15px); left: 50vw } 60% { transform: rotate(26deg); transform: translateY(15px); } 70% { transform: rotate(27deg); transform: translateY(10px); } 80% { transform: rotate(28deg); transform: translateY(5px); } 90% { transform: rotate(29deg); transform: translateY(2px); } 95%{ opacity: 1; } 96%{ opacity: .7; } 97%{ opacity: .5; } 98%{ opacity: .3; } 99%{ opacity: .1; } 100% { transform: rotate(30deg); transform: translateY(0px); opacity: 0; left: 90vw; } } @media(max-width:$screen-xs-min){ @keyframes movement{ 0% { left: 0px; transform: rotate(30deg); transform: translateY(0px); } 1%{ opacity: 0; } 2%{ opacity: .1; } 3%{ opacity: .3; } 4%{ opacity: .5; } 5%{ opacity: .7; } 10% { opacity: 1; transform: rotate(29deg); transform: translateY(2px); } 20% { transform: rotate(28deg); transform: translateY(5px); } 30% { transform: rotate(27deg); transform: translateY(10px); } 40% { transform: rotate(26deg); transform: translateY(15px); } 50% { transform: rotate(26deg); transform: translateY(15px); left: 50vw } 60% { transform: rotate(26deg); transform: translateY(15px); } 70% { transform: rotate(27deg); transform: translateY(10px); } 80% { transform: rotate(28deg); transform: translateY(5px); } 90% { transform: rotate(29deg);transform: translateY(2px); transform: translateY(2px); } 95%{ opacity: 1; } 96%{ opacity: .7; } 97%{ opacity: .5; } 98%{ opacity: .3; } 99%{ opacity: .1; } 100% { transform: rotate(30deg); transform: translateY(0px); opacity: 0; left: 80vw; } } }