section[data-cattype="251"] { text-align: left; padding: 11.1vh 0; background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; } [data-cattype="251"] .wrapper_herotext { width: 60%; padding: 15px; } [data-cattype="251"] h1 { font-size: 3.6em; text-transform: uppercase; font-weight: 800; color: #fb9202; margin-bottom: 0.6em; } [data-cattype="251"] h2 { font-size: 2em; font-weight: 500; color: #000; } [data-cattype="251"] .ag-bubbles { height: 100%; width: 100%; margin: 0 auto; overflow: hidden; z-index: -2; position: absolute; left: 0; bottom: 0; } [data-cattype="251"] .js-ag-bubble-container { position: absolute; bottom: 10em; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-animation: an-bubble-1 5s infinite ease-in; -moz-animation: an-bubble-1 5s infinite ease-in; -o-animation: an-bubble-1 5s infinite ease-in; animation: an-bubble-1 5s infinite ease-in; will-change: transform; } [data-cattype="251"] .js-ag-bubble { height: 5px; width: 4px; margin: 0 auto; border: 1px solid rgba(214, 214, 214, 0.1); background: rgba(255, 255, 255, 0.9); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-animation: an-bubble-2 .4s infinite linear; -moz-animation: an-bubble-2 .4s infinite linear; -o-animation: an-bubble-2 .4s infinite linear; animation: an-bubble-2 .4s infinite linear; will-change: transform; } section[data-cattype="251"][data-screen="off"] .js-ag-bubble-container, section[data-cattype="251"][data-screen="off"] .js-ag-bubble { animation-iteration-count: 0; } @media (min-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="251"] .wrapper_herotext{ width: 100%; } [data-cattype="251"] h1 { font-size: 2.4em; } } @media (max-width: 767px) { section[data-cattype="251"] { background-position: top center; background-size: cover; background-attachment: fixed; } [data-cattype="251"] .wrapper_herotext{ width: 100%; text-align: center; padding: 15px 30px; } [data-cattype="251"] h1 { font-size: 2.4em; } [data-cattype="251"] h2 { font-size: 1.62em; } } @media (max-width: 480px) {} @-webkit-keyframes an-bubble-1 { 0% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: translateY(0); transform: translateY(0); } 30% { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } 98% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } to { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: translateY(-150em); transform: translateY(-150em); } } @-moz-keyframes an-bubble-1 { 0% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-transform: translateY(0); transform: translateY(0); } 30% { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } 98% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } to { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -moz-transform: translateY(-150em); transform: translateY(-150em); } } @-o-keyframes an-bubble-1 { 0% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -o-transform: translateY(0); transform: translateY(0); } 30% { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } 98% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } to { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -o-transform: translateY(-150em); transform: translateY(-150em); } } @keyframes an-bubble-1 { 0% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 30% { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } 98% { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); } to { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: translateY(-150em); -moz-transform: translateY(-150em); -o-transform: translateY(-150em); transform: translateY(-150em); } } @-webkit-keyframes an-bubble-2 { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(.1em) translateZ(.01px); transform: translateX(.1em) translateZ(.01px); } } @-moz-keyframes an-bubble-2 { 0% { -moz-transform: translateX(0); transform: translateX(0); } 50% { -moz-transform: translateX(.1em) translateZ(.01px); transform: translateX(.1em) translateZ(.01px); } } @-o-keyframes an-bubble-2 { 0% { -o-transform: translateX(0); transform: translateX(0); } 50% { -o-transform: translateX(.1em) translateZ(.01px); transform: translateX(.1em) translateZ(.01px); } } @keyframes an-bubble-2 { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(.1em) translateZ(.01px); -moz-transform: translateX(.1em) translateZ(.01px); -o-transform: translateX(.1em) translateZ(.01px); transform: translateX(.1em) translateZ(.01px); } }