.slide-image-1 { background-image: url("../img/backgrounds/960x1440-slide-1.webp"); } .slide-image-2 { background-image: url("../img/backgrounds/960x1440-slide-2.webp"); } .slide-image-3 { background-image: url("../img/backgrounds/960x1440-slide-3.webp"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; src: url("../fonts/Poppins-Light/Poppins-Lightd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Light/Poppins-Light.woff2") format("woff2"), url("../fonts/Poppins-Light/Poppins-Light.woff") format("woff"), url("../fonts/Poppins-Light/Poppins-Light.ttf") format("truetype"), url("../fonts/Poppins-Light/Poppins-Light.svg#Poppins") format("svg"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; src: url("../fonts/Poppins-Regular/Poppins-Regulard41d.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular/Poppins-Regular.woff") format("woff"), url("../fonts/Poppins-Regular/Poppins-Regular.ttf") format("truetype"), url("../fonts/Poppins-Regular/Poppins-Regular.svg#Poppins") format("svg"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; src: url("../fonts/Poppins-Medium/Poppins-Mediumd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Medium/Poppins-Medium.woff2") format("woff2"), url("../fonts/Poppins-Medium/Poppins-Medium.woff") format("woff"), url("../fonts/Poppins-Medium/Poppins-Medium.ttf") format("truetype"), url("../fonts/Poppins-Medium/Poppins-Medium.svg#Poppins") format("svg"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; src: url("../fonts/Poppins-SemiBold/Poppins-SemiBoldd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-SemiBold/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold/Poppins-SemiBold.woff") format("woff"), url("../fonts/Poppins-SemiBold/Poppins-SemiBold.ttf") format("truetype"), url("../fonts/Poppins-SemiBold/Poppins-SemiBold.svg#Poppins") format("svg"); } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } button:active, button:focus { outline: none !important; } button::-moz-focus-inner { border: 0 !important; } input::-moz-focus-inner { border: 0 !important; } ::-moz-selection { background-color: rgba(0, 191, 99, 0.3); color: #ffffff; text-shadow: none; } ::selection { background-color: rgba(0, 191, 99, 0.3); color: #ffffff; text-shadow: none; } ::-webkit-scrollbar { display: none; width: 5px; background: rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { ::-webkit-scrollbar { display: block; } } ::-webkit-scrollbar-track { border-radius: 20px; background-color: rgba(0, 0, 0, 0); } ::-webkit-scrollbar-thumb { background-color: #00BF63; background: -webkit-gradient(linear, left top, left bottom, from(#00BF63), to(#00BF63)); background: linear-gradient(to bottom, #00BF63 0%, #00BF63 100%); border-radius: 10px; } html { font-family: sans-serif; font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { width: 100%; height: 100%; overflow: hidden; } body { position: relative; min-width: 360px; overflow-x: hidden !important; font: normal 400 1.6rem/1.6 "Poppins", sans-serif; color: #676767; background-color: #0A0A0C; } section { position: relative; min-width: 360px; } a { text-decoration: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { display: block; width: 100%; height: auto; } .overflow-hidden { overflow: hidden !important; } .fullheight { position: static; height: auto; } @media only screen and (min-width: 992px) { .fullheight { position: relative; height: 100%; } } .fullheight-mobile { position: relative; height: 100%; } .block-rounded-l { -moz-border-radius: 15px; border-radius: 15px; overflow: hidden; } .block-rounded-m { -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; } .main { opacity: 0; visibility: hidden; } .main.active { opacity: 1; visibility: visible; } .main .intro__content .headline .headline__subtitle, .main .intro__content .headline h1, .main .intro__content .headline .headline__numblock { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .main .intro__button { opacity: 0; } .main.animate-in .intro__content .headline .headline__subtitle, .main.animate-in .intro__content .headline h1, .main.animate-in .intro__content .headline .headline__numblock { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .main.animate-in .intro__content .headline .headline__subtitle { -webkit-transition: opacity 0.6s 0.1s, -webkit-transform 0.6s 0.1s; transition: opacity 0.6s 0.1s, -webkit-transform 0.6s 0.1s; -o-transition: opacity 0.6s 0.1s, transform 0.6s 0.1s; -moz-transition: opacity 0.6s 0.1s, transform 0.6s 0.1s, -moz-transform 0.6s 0.1s; transition: opacity 0.6s 0.1s, transform 0.6s 0.1s; transition: opacity 0.6s 0.1s, transform 0.6s 0.1s, -webkit-transform 0.6s 0.1s, -moz-transform 0.6s 0.1s; } .main.animate-in .intro__content .headline h1 { -webkit-transition: opacity 0.6s 0.2s, -webkit-transform 0.6s 0.2s; transition: opacity 0.6s 0.2s, -webkit-transform 0.6s 0.2s; -o-transition: opacity 0.6s 0.2s, transform 0.6s 0.2s; -moz-transition: opacity 0.6s 0.2s, transform 0.6s 0.2s, -moz-transform 0.6s 0.2s; transition: opacity 0.6s 0.2s, transform 0.6s 0.2s; transition: opacity 0.6s 0.2s, transform 0.6s 0.2s, -webkit-transform 0.6s 0.2s, -moz-transform 0.6s 0.2s; } .main.animate-in .intro__content .headline .headline__numblock { -webkit-transition: opacity 0.6s 0.3s, -webkit-transform 0.6s 0.3s; transition: opacity 0.6s 0.3s, -webkit-transform 0.6s 0.3s; -o-transition: opacity 0.6s 0.3s, transform 0.6s 0.3s; -moz-transition: opacity 0.6s 0.3s, transform 0.6s 0.3s, -moz-transform 0.6s 0.3s; transition: opacity 0.6s 0.3s, transform 0.6s 0.3s; transition: opacity 0.6s 0.3s, transform 0.6s 0.3s, -webkit-transform 0.6s 0.3s, -moz-transform 0.6s 0.3s; } .main.animate-in .intro__button { opacity: 1; -webkit-transition: opacity 0.8s 0.8s; -o-transition: opacity 0.8s 0.8s; -moz-transition: opacity 0.8s 0.8s; transition: opacity 0.8s 0.8s; } .main.animate-out { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.8s 0s; transition: -webkit-transform 0.8s 0s; -o-transition: transform 0.8s 0s; -moz-transition: transform 0.8s 0s, -moz-transform 0.8s 0s; transition: transform 0.8s 0s; transition: transform 0.8s 0s, -webkit-transform 0.8s 0s, -moz-transform 0.8s 0s; } .main.animate-out .main__intro { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; transition: opacity 0.6s, -webkit-transform 0.6s; -o-transition: opacity 0.6s, transform 0.6s; -moz-transition: opacity 0.6s, transform 0.6s, -moz-transform 0.6s; transition: opacity 0.6s, transform 0.6s; transition: opacity 0.6s, transform 0.6s, -webkit-transform 0.6s, -moz-transform 0.6s; } @media only screen and (min-width: 1200px) { .main.animate-out { -webkit-transform: translateX(-66.66666667%); -moz-transform: translateX(-66.66666667%); -ms-transform: translateX(-66.66666667%); transform: translateX(-66.66666667%); } } .header { opacity: 0; -webkit-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); } .header.smaller { padding: 1.8rem 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(0, 191, 99, 0.5); -webkit-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); } .header.menu-is-visible { opacity: 0; visibility: hidden; } .header.animate-in { opacity: 1; -webkit-transition: opacity 0.8s 0.8s, padding 0.3s, background-color 0.3s, visibility 0.3s; -o-transition: opacity 0.8s 0.8s, padding 0.3s, background-color 0.3s, visibility 0.3s; -moz-transition: opacity 0.8s 0.8s, padding 0.3s, background-color 0.3s, visibility 0.3s; transition: opacity 0.8s 0.8s, padding 0.3s, background-color 0.3s, visibility 0.3s; } .header.animate-out { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.8s 0s; transition: -webkit-transform 0.8s 0s; -o-transition: transform 0.8s 0s; -moz-transition: transform 0.8s 0s, -moz-transform 0.8s 0s; transition: transform 0.8s 0s; transition: transform 0.8s 0s, -webkit-transform 0.8s 0s, -moz-transform 0.8s 0s; } .header.animate-out .header__logo img, .header.animate-out .header__buttons { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); -webkit-transition: opacity 0.6s, -webkit-transform 0.6s; transition: opacity 0.6s, -webkit-transform 0.6s; -o-transition: opacity 0.6s, transform 0.6s; -moz-transition: opacity 0.6s, transform 0.6s, -moz-transform 0.6s; transition: opacity 0.6s, transform 0.6s; transition: opacity 0.6s, transform 0.6s, -webkit-transform 0.6s, -moz-transform 0.6s; } .header.animate-out.smaller { -webkit-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.8s 0s; transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, -webkit-transform 0.8s 0s; -o-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, transform 0.8s 0s; -moz-transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, transform 0.8s 0s, -moz-transform 0.8s 0s; transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, transform 0.8s 0s; transition: padding 0.3s, background-color 0.3s, opacity 0.3s, visibility 0.3s, transform 0.8s 0s, -webkit-transform 0.8s 0s, -moz-transform 0.8s 0s; } @media only screen and (min-width: 1200px) { .header.smaller { padding: 6rem 0; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .header.animate-out { -webkit-transform: translateX(-66.66666667%); -moz-transform: translateX(-66.66666667%); -ms-transform: translateX(-66.66666667%); transform: translateX(-66.66666667%); } } h1 { font: normal 600 3.6rem/1.2 "Poppins", sans-serif; color: #ffffff; max-width: 46rem; } h1.large { font-size: 5rem; } @media only screen and (min-width: 768px) { h1 { font-size: 5rem; max-width: none; } h1.large { font-size: 6rem; } } @media only screen and (min-width: 1400px) { h1 { font-size: 6rem; } h1.medium { font-size: 6.6rem; } h1.large { font-size: 7.6rem; } } .typed-cursor { position: relative; display: inline-block; white-space: nowrap; color: rgba(255, 255, 255, 0); } .typed-cursor::before { content: ""; display: block; position: absolute; right: 3px; bottom: 6px; width: 2px; height: 28px; -moz-border-radius: 2px; border-radius: 2px; background-color: #00BF63; background: -webkit-gradient(linear, left top, left bottom, from(#00BF63), to(#00BF63)); background: -moz-linear-gradient(top, #00BF63 0%, #00BF63 100%); background: -o-linear-gradient(top, #00BF63 0%, #00BF63 100%); background: linear-gradient(to bottom, #00BF63 0%, #00BF63 100%); } @media only screen and (min-width: 768px) { .typed-cursor::before { width: 2px; height: 42px; position: absolute; right: 6px; bottom: 10px; } } @media only screen and (min-width: 1400px) { .typed-cursor::before { width: 2px; height: 56px; position: absolute; right: 6px; bottom: 10px; } } .headline__subtitle { display: block; position: relative; font: normal 600 1.6rem/1 "Poppins", sans-serif; color: #00BF63; margin-top: 1rem; padding-left: 8rem; margin-bottom: 3rem; } .headline__subtitle::before { content: ""; display: block; position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 2px; -moz-border-radius: 1px; border-radius: 1px; background-color: #00BF63; background: -webkit-gradient(linear, left top, right top, from(#00BF63), to(#00BF63)); background: -moz-linear-gradient(left, #00BF63 0%, #00BF63 100%); background: -o-linear-gradient(left, #00BF63 0%, #00BF63 100%); background: linear-gradient(to right, #00BF63 0%, #00BF63 100%); } @media only screen and (min-width: 768px) { .headline__subtitle { font-size: 1.8rem; } } @media only screen and (min-width: 992px) { .headline__subtitle { padding-top: 0; } } @media only screen and (min-width: 1200px) { .headline__subtitle { margin-top: 0; } } @media only screen and (min-width: 1400px) { .headline__subtitle { margin-bottom: 4rem; } } .headline__numblock { margin-top: 3.7rem; } @media only screen and (min-width: 1400px) { .headline__numblock { margin-top: 4.2rem; } } .numblock { background-color: rgba(255, 255, 255, 0.05); padding: 2rem; margin-right: 2rem; } .numblock:last-of-type { margin-right: 0; margin-bottom: 0; } @media only screen and (min-width: 576px) { .numblock { margin-bottom: 0; } .numblock:last-of-type { margin-right: 0; } } .numblock__number { display: block; font: normal 500 3rem/1 "Poppins", sans-serif; color: #ffffff; padding-top: 0.4rem; } @media only screen and (min-width: 576px) { .numblock__number { padding-top: 0.4rem; margin-right: 1.2rem; } } @media only screen and (min-width: 1400px) { .numblock__number { font-size: 4rem; } } .numblock__descr { display: block; font: normal 300 1.3rem/1.3 "Poppins", sans-serif; color: #b3bbc3; margin-top: 0.4rem; } @media only screen and (min-width: 576px) { .numblock__descr { margin-top: 0; } } @media only screen and (min-width: 1400px) { .numblock__descr { font-size: 1.5rem; } } .popup-close { position: relative; display: block; border: none; outline: 0; padding: 0; cursor: pointer; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 4.4rem; height: 4.4rem; -moz-border-radius: 50%; border-radius: 50%; background-color: #ffffff; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: background-color 0.5s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: background-color 0.5s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: background-color 0.5s, box-shadow 0.5s, transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: background-color 0.5s, box-shadow 0.5s, transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-box-shadow 0.5s, -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: background-color 0.5s, box-shadow 0.5s, transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: background-color 0.5s, box-shadow 0.5s, transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); } .popup-close span { display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 20px; height: 2px; background-color: transparent; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: width 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: width 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: width 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: width 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09); } .popup-close span::before, .popup-close span::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-border-radius: 2px; border-radius: 2px; background-color: #212121; -webkit-transition: background-color 0.5s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: background-color 0.5s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: background-color 0.5s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: background-color 0.5s cubic-bezier(0.23, 0.65, 0.74, 1.09); } .popup-close span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .popup-close span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .popup-close:hover { -webkit-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.8); -moz-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.8); box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.8); } .no-touch .popup-close:hover span::before, .no-touch .popup-close:hover span::after { background-color: #ffffff; } .popup-close.is-scaled-up { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .btn-round-mobile { position: relative; display: inline-block; border: none; outline: 0; padding: 0; background-color: transparent; cursor: pointer; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 4.4rem; height: 4.4rem; line-height: 4rem; -moz-border-radius: 50%; border-radius: 50%; text-align: center; font-size: 1.4rem; } .btn-round-mobile .btn-caption { display: none; } @media only screen and (min-width: 1200px) { .btn-round-mobile { width: auto; height: 4.4rem; padding: 0 2.4rem; -moz-border-radius: 2.4rem; border-radius: 2.4rem; font: normal 600 1.4rem/4rem "Poppins", sans-serif; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .btn-round-mobile i { display: none; } .btn-round-mobile .btn-caption { display: block; position: relative; } } @media only screen and (min-width: 1200px) { .btn-notify { margin-right: 0; } } .btn-light-outline { background-color: transparent; border: 2px solid #ffffff; color: #ffffff; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); } .btn-green-outline { background-color: transparent; border: 2px solid #00BF63; color: #ffffff; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); } @media only screen and (min-width: 1200px) { .hover-white { position: relative; overflow: hidden; color: #ffffff; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -webkit-transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s ease-in-out; -o-transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out; -moz-transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out; } .hover-white em { position: absolute; display: block; width: 0; height: 0; -moz-border-radius: 50%; border-radius: 50%; background-color: #ffffff; -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .no-touch .hover-white:hover { color: #212121; background-color: #ffffff; -webkit-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -moz-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -webkit-transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out; -o-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out; -moz-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -moz-box-shadow 0.5s, -moz-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out; } .no-touch .hover-white:hover em { width: 225%; height: 9.9rem; } } .no-touch .hover-green:hover { color: #212121; background-color: #00BF63; -webkit-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -moz-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -webkit-transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out; -o-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out; -moz-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -moz-box-shadow 0.5s, -moz-transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out; } .no-touch .hover-white-s:hover em { width: 225%; height: 9.9rem; } @media only screen and (min-width: 1200px) { .hover-gradient { position: relative; overflow: hidden; color: #212121; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -webkit-transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s 0s ease-in-out; -o-transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s 0s ease-in-out; -moz-transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s 0s ease-in-out, -moz-transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s 0s ease-in-out, -webkit-transform 0.3s 0s ease-in-out, -moz-transform 0.3s 0s ease-in-out; } .hover-gradient em { position: absolute; display: block; width: 0; height: 0; -moz-border-radius: 50%; border-radius: 50%; background: -moz-linear-gradient(315deg, #00BF63 0%, #00BF63 100%); background: -o-linear-gradient(315deg, #00BF63 0%, #00BF63 100%); background: linear-gradient(135deg, #00BF63 0%, #00BF63 100%); -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .no-touch .hover-gradient:hover { color: #ffffff; background-color: transparent; -webkit-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -moz-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -webkit-transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s 0s ease-in-out; -o-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s 0s ease-in-out; -moz-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s 0s ease-in-out, -moz-box-shadow 0.5s, -moz-transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s 0s ease-in-out; transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s 0s ease-in-out, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s 0s ease-in-out, -moz-transform 0.3s 0s ease-in-out; } .no-touch .hover-gradient:hover em { width: 225%; height: 9.9rem; } } .no-touch .hover-gradient-s:hover em { height: 9.9rem; } .btn-bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .btn-bottom .circle { position: relative; width: 6rem; height: 6rem; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #07051c; background-color: #ffffff; -webkit-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); -moz-box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); box-shadow: 0px 6px 38px -9px rgba(0, 191, 99, 0.34); overflow: hidden; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .btn-bottom .circle em { position: absolute; display: block; width: 0; height: 0; -moz-border-radius: 50%; border-radius: 50%; background: -moz-linear-gradient(315deg, #00BF63 0%, #00BF63 100%); background: -o-linear-gradient(315deg, #00BF63 0%, #00BF63 100%); background: linear-gradient(135deg, #00BF63 0%, #00BF63 100%); -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .btn-bottom .circle i { display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 1.6rem; color: #212121; z-index: 2; -webkit-transition: color 0.3s 0s ease-in-out; -o-transition: color 0.3s 0s ease-in-out; -moz-transition: color 0.3s 0s ease-in-out; transition: color 0.3s 0s ease-in-out; } .btn-bottom .circle i.fa-play { padding-left: 0.2rem; } .btn-bottom .circle svg { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); fill: #07051c; -webkit-transition: fill 0.3s; -o-transition: fill 0.3s; -moz-transition: fill 0.3s; transition: fill 0.3s; z-index: 2; } .no-touch .btn-bottom .circle:hover { background-color: transparent; -webkit-transition: background-color 0.3s 0.2s, -webkit-box-shadow 0.3s 0s; transition: background-color 0.3s 0.2s, -webkit-box-shadow 0.3s 0s; -o-transition: background-color 0.3s 0.2s, box-shadow 0.3s 0s; -moz-transition: background-color 0.3s 0.2s, box-shadow 0.3s 0s, -moz-box-shadow 0.3s 0s; transition: background-color 0.3s 0.2s, box-shadow 0.3s 0s; transition: background-color 0.3s 0.2s, box-shadow 0.3s 0s, -webkit-box-shadow 0.3s 0s, -moz-box-shadow 0.3s 0s; } .no-touch .btn-bottom .circle:hover em { width: 225%; height: 13.5rem; } .no-touch .btn-bottom .circle:hover i { color: #ffffff; } .no-touch .btn-bottom .circle:hover svg { fill: #ffffff; } .btn-bottom .caption { margin-left: 2rem; font: normal 600 1.4rem/1.2 "Poppins", sans-serif; color: #ffffff; -webkit-transition: colors 0.3s; -o-transition: colors 0.3s; -moz-transition: colors 0.3s; transition: colors 0.3s; } .no-touch .btn-bottom:hover .circle { -webkit-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); -moz-box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); box-shadow: 0px 10px 38px -9px rgba(0, 191, 99, 0.64); } .no-touch .btn-bottom:hover .caption { color: #b3bbc3; } @media only screen and (min-width: 1200px) { .btn-bottom .caption { margin-left: 2.4rem; } } @media only screen and (min-width: 1400px) { .btn-bottom .circle { width: 8rem; height: 8rem; } .btn-bottom .circle i { font-size: 1.8rem; } .btn-bottom .circle i.fa-play { padding-left: 0.3rem; } .no-touch .btn-bottom .circle:hover em { height: 18rem; } } .header { position: fixed; top: 0; left: 0; width: 100%; min-width: 360px; z-index: 9; background-color: rgba(0, 191, 99, 0.5); padding: 3rem 0; background-color: transparent; } @media only screen and (min-width: 768px) { .header { padding: 5rem 0; } } @media only screen and (min-width: 1400px) { .header { padding: 6rem 0; } } .header__content { position: relative; padding: 0 10%; } @media only screen and (min-width: 1200px) { .header__content { padding: 0; } } .header__logo { position: absolute; left: 10%; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-top: 0.4rem; } .header__logo img { width: auto; max-width: 130px; } @media only screen and (min-width: 1200px) { .header__logo { padding-top: 0.4rem; } .header__logo img { width: auto; max-width: 164px; } } @media only screen and (min-width: 1200px) { .header__logo { left: 8rem; } } @media only screen and (min-width: 1200px) { .header__logo img { width: auto; max-width: none; } } @media only screen and (min-width: 1400px) { .header__logo { left: 10rem; } } .header__menu, .header__buttons { position: relative; } @media only screen and (min-width: 1200px) { .header__menu, .header__buttons { padding: 0 8rem; } } @media only screen and (min-width: 1400px) { .header__menu, .header__buttons { padding: 0 10rem; } } .main { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; background-color: #0A0A0C; padding-top: 104px; z-index: 3; } @media only screen and (min-width: 768px) { .main { padding-top: 144px; } } @media only screen and (min-width: 1200px) { .main { padding-top: 0; min-height: 600px; overflow: hidden; } } .main__content { position: relative; } @media only screen and (min-width: 1200px) { .main__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .main__intro, .main__media { position: relative; } @media only screen and (min-width: 1200px) { .main__intro, .main__media { height: 100%; } } .main__intro { background-color: #0A0A0C; } .intro__content { position: relative; padding: 6rem 0; } @media only screen and (min-width: 1200px) { .intro__content { height: 100%; padding: 0; } } .headline { position: relative; width: 100%; padding: 0 10%; } @media only screen and (min-width: 1200px) { .headline { position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 8rem; } } @media only screen and (min-width: 1400px) { .headline { padding: 0 10rem; } } .intro__button { position: relative; padding: 0 10%; margin: 3rem 0; } @media only screen and (min-width: 768px) { .intro__button { margin: 5rem 0; } } @media only screen and (min-width: 1200px) { .intro__button { position: absolute; bottom: 5rem; left: 8rem; margin: 0; padding: 0; } } @media only screen and (min-width: 1400px) { .intro__button { bottom: 6rem; left: 10rem; } } .main__media { height: 100vh; min-height: 600px; } @media only screen and (min-width: 1200px) { .main__media { height: 100%; min-height: auto; } } .media__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; background-size: cover; } .socials-mobile { display: block; position: relative; padding: 3rem 0; text-align: center; } .socials-mobile ul { display: block; padding: 0 3rem; } .socials-mobile ul li { display: inline-block; margin-right: 2rem; } .socials-mobile ul li:last-of-type { margin-right: 0; } .socials-mobile ul li a { display: block; font-size: 1.6rem; line-height: 1; color: #b3bbc3; } @media only screen and (min-width: 768px) { .socials-mobile { padding: 5rem 0; } } @media only screen and (min-width: 1200px) { .socials-mobile { display: none; } } .socials-desktop { display: none; } @media only screen and (min-width: 1200px) { .socials-desktop { display: block; } .socials-desktop ul { display: block; margin-right: 2.4rem; } .socials-desktop ul li { display: inline-block; margin-right: 2rem; } .socials-desktop ul li:last-of-type { margin-right: 0; } .socials-desktop ul li a { display: block; font-size: 1.6rem; line-height: 1; color: #ffffff; background-image: -webkit-gradient(linear, left top, right top, from(#00BF63), color-stop(50%, #00FFB4), color-stop(50%, #ffffff)); background-image: -moz-linear-gradient(left, #00BF63, #00FFB4 50%, #ffffff 50%); background-image: -o-linear-gradient(left, #00BF63, #00FFB4 50%, #ffffff 50%); background-image: linear-gradient(to right, #00BF63, #00FFB4 50%, #ffffff 50%); -moz-background-size: 200% 100%; background-size: 200% 100%; background-position: -100%; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .no-touch .socials-desktop ul li:hover a { background-position: 0; } } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(34, 34, 34, 0.6); z-index: 10; opacity: 0; visibility: hidden; -webkit-transition: visibility 0s 0s, opacity 0.3s 0s; -o-transition: visibility 0s 0s, opacity 0.3s 0s; -moz-transition: visibility 0s 0s, opacity 0.3s 0s; transition: visibility 0s 0s, opacity 0.3s 0s; } .popup.animate-in { opacity: 1; visibility: visible; } .popup.animate-in .popup__content { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .popup.animate-out { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; -o-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; transition: opacity 0.3s 0.6s, visibility 0s 0.9s; } .popup.animate-out .popup__content { opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .popup__container { position: relative; padding: 3rem 10%; } @media only screen and (min-width: 768px) { .popup__container { position: absolute; left: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; padding: 0; } } .popup__controls { position: relative; margin-bottom: -2rem; z-index: 2; } @media only screen and (min-width: 992px) { .popup__controls { max-width: 600px; margin: 0 auto -2rem; } } .popup__content { position: relative; width: 100%; height: auto; background-color: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.12); box-shadow: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.12); padding: 3.6rem; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); z-index: 1; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: opacity 0.6s, -webkit-transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: opacity 0.6s, -webkit-transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); -o-transition: opacity 0.6s, transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); -moz-transition: opacity 0.6s, transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09); } @media only screen and (min-width: 768px) { .popup__content { max-width: 600px; margin: 0 auto; } } @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) { .popup__content { background-color: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } } @supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) { .popup__content { background-color: #0A0A0C; border: 1px solid rgba(255, 255, 255, 0.05); } } .popup-title { position: relative; margin-bottom: 2.4rem; } .popup.notify .popup__container { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } @media only screen and (min-width: 768px) { .popup.notify .popup__container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup.notify .popup__content, .popup.notify .popup__controls { max-width: none; width: 100%; } .popup.notify .popup-title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .popup.notify .popup-title .btn-round-mobile { margin: 0.6rem 0; } } .swiper { height: 100%; background-color: #00BF63; } .swiper-slide { position: relative; width: 100%; height: 100%; background-color: transparent; } .project-trigger { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .no-touch .project-trigger:hover .slide-image { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); transform: scale(1.03); } .slide-image { position: relative; width: 100%; height: 100%; background-color: #00BF63; background-position: center center; background-repeat: no-repeat; -moz-background-size: cover; background-size: cover; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.8s; transition: -webkit-transform 0.8s; -o-transition: transform 0.8s; -moz-transition: transform 0.8s, -moz-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s, -moz-transform 0.8s; } .slide-caption { position: absolute; bottom: 3rem; left: 0; width: 100%; padding: 0 10%; } .slide-caption p { font: normal 600 2.4rem/1.2 "Poppins", sans-serif; color: #ffffff; } .slide-caption p a { display: inline-block; font: normal 600 2.4rem/1.2 "Poppins", sans-serif; color: #ffffff; text-decoration: none; background: -webkit-gradient(linear, left top, right top, from(rgba(179, 187, 195, 0)), to(rgba(179, 187, 195, 0))), -webkit-gradient(linear, left top, right top, from(white), to(white)); background: -moz-linear-gradient(left, rgba(179, 187, 195, 0), rgba(179, 187, 195, 0)), -moz-linear-gradient(left, white, white); background: -o-linear-gradient(left, rgba(179, 187, 195, 0), rgba(179, 187, 195, 0)), -o-linear-gradient(left, white, white); background: linear-gradient(to right, rgba(179, 187, 195, 0), rgba(179, 187, 195, 0)), linear-gradient(to right, white, white); -moz-background-size: 100% 1px, 0 1px; background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; -webkit-transition: background-size 400ms, color 300ms; -o-transition: background-size 400ms, color 300ms; -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms; transition: background-size 400ms, color 300ms; transition: background-size 400ms, color 300ms, -moz-background-size 400ms; cursor: pointer; } .no-touch .slide-caption p a:hover { color: #ffffff; -moz-background-size: 0 1px, 100% 1px; background-size: 0 1px, 100% 1px; } .slide-caption p span { display: block; font: normal 400 1.4rem/1.6 "Poppins", sans-serif; color: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 768px) { .slide-caption { bottom: 5rem; } } @media only screen and (min-width: 1200px) { .slide-caption { padding: 0 8rem; } } @media only screen and (min-width: 1400px) { .slide-caption { bottom: 6rem; padding: 0 10rem; } } .marvio-pagination { font: normal 400 1.4rem/1.6 "Poppins", sans-serif; color: #ffffff; width: auto; min-width: 3.2rem; left: auto; bottom: 10.4rem; right: -moz-calc(10% + 3.6rem); right: calc(10% + 3.6rem); } @media only screen and (min-width: 768px) { .marvio-pagination { bottom: 12.4rem; } } @media only screen and (min-width: 1200px) { .marvio-pagination { right: 11.6rem; } } @media only screen and (min-width: 1400px) { .marvio-pagination { bottom: 13.4rem; right: 13.6rem; } } .marvio-navigation { color: #ffffff; position: absolute; top: auto; right: auto; bottom: 9.6rem; left: auto; margin: 0; width: 4rem; height: 4rem; } .marvio-navigation::after { display: none; } @media only screen and (min-width: 768px) { .marvio-navigation { bottom: 11.6rem; } } @media only screen and (min-width: 1400px) { .marvio-navigation { bottom: 12.6rem; } } .marvio-next { right: -moz-calc(10% - 1.4rem); right: calc(10% - 1.4rem); } @media only screen and (min-width: 1200px) { .marvio-next { right: 6.6rem; } } @media only screen and (min-width: 1400px) { .marvio-next { right: 8.6rem; } } .marvio-prev { right: -moz-calc(10% + 7.8rem); right: calc(10% + 7.8rem); } @media only screen and (min-width: 1200px) { .marvio-prev { right: 15.8rem; } } @media only screen and (min-width: 1400px) { .marvio-prev { right: 17.8rem; } }