/* Table of Contents 01. Animate ---------------------------------- 02. Fix BG ----------------------------------- 03. Ico -------------------------------------- Mobile ----------------------------------- 04. MFP -------------------------------------- 05. Parallax --------------------------------- 06. Player ----------------------------------- 07. Story ------------------------------------ Modifier: Stories Secondary -------------- Medium Desktop --------------------------- Small Desktop ---------------------------- Tablet ----------------------------------- Modifier: Stories Secondary -------------- Mobile ----------------------------------- Mobile ----------------------------------- I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Mobile ----------------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Container -------------------------------- Mobile ----------------------------------- 02. Footer ----------------------------------- Tablet ----------------------------------- Mobile ----------------------------------- 03. Header ----------------------------------- Mobile ----------------------------------- 04. Shell ------------------------------------ 05. Wrapper ---------------------------------- III. Modules -------------------------------------- 01. Article ---------------------------------- Mobile ----------------------------------- 02. Button ----------------------------------- Button Secondary ------------------------- Button Teritary -------------------------- Button White ----------------------------- Button White Secondary ------------------- Button Block ----------------------------- Button Socials --------------------------- Mobile ----------------------------------- 03. Form Elements ---------------------------- 04. Form ------------------------------------- 05. Intro ------------------------------------ Medium Desktop --------------------------- Tablet ----------------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 06. Link Scroll ------------------------------ 07. Link External ---------------------------- Mobile ----------------------------------- 08. List ------------------------------------- 09. List Logos ------------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 10. List Utilities --------------------------- Mobile ----------------------------------- 11. List Links ------------------------------- Tablet ----------------------------------- 12. Logo ------------------------------------- Tablet ----------------------------------- 13. Nav -------------------------------------- Mobile ----------------------------------- 14. Nav Btn ---------------------------------- Mobile ----------------------------------- 15. Nav Dots --------------------------------- Tablet ----------------------------------- 16. Popup ------------------------------------ Tablet ----------------------------------- Mobile ----------------------------------- 17. Section Difficulties --------------------- Small Desktop ---------------------------- Tablet ----------------------------------- Mobile ----------------------------------- 18. Section Stories -------------------------- 19. Section Benefits ------------------------- Tablet ----------------------------------- Mobile ----------------------------------- 20. Section Videos --------------------------- Tablet ----------------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 21. Section Tabs ----------------------------- Mobile ----------------------------------- 22. Share ------------------------------------ Mobile ----------------------------------- 23. Slider Bubbles --------------------------- Tablet ----------------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 24. Slider Videos ---------------------------- Tablet ----------------------------------- Mobile ----------------------------------- 25. Socials ---------------------------------- Modifier: Socials Secondary -------------- Modifier: Socials Teritary --------------- Modifier: Socials Quaternary ------------- Modifier: Socials White ------------------ Mobile ----------------------------------- 26. Socials Quinary -------------------------- Mobile ----------------------------------- 27. Table ------------------------------------ 28. Tabs ------------------------------------- Tablet ----------------------------------- Mobile ----------------------------------- 29. Widget ----------------------------------- 30. Widget Socials --------------------------- Mobile ----------------------------------- */ /* ------------------------------------------------------------ *\ Animate \* ------------------------------------------------------------ */ .animate { transition: .3s; } .scale-in { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .animated.scale-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .fade-in { opacity: 0; } .animated.fade-in { opacity: 1; } .fade-in-children > * { opacity: 0; transition: .3s; } .animated.fade-in-children > * { opacity: 1; } .fade-in-children > :nth-child(2) { transition-delay: .2s; } .fade-in-children > :nth-child(3) { transition-delay: .4s; } .fade-in-children > :nth-child(4) { transition-delay: .6s; } .fade-in-children > :nth-child(5) { transition-delay: .8s; } .fade-in-children > :nth-child(6) { transition-delay: 1s; } .fade-in-children > :nth-child(7) { transition-delay: 1.2s; } .fade-in-children > :nth-child(8) { transition-delay: 1.4s; } .fade-in-children > :nth-child(9) { transition-delay: 1.6s; } .fade-in-children > :nth-child(10) { transition-delay: 1.8s; } .fade-up-children > * { -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); opacity: 0; transition: .3s; } .animated.fade-up-children > * { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .fade-up-children > :nth-child(2) { transition-delay: .2s; } .fade-up-children > :nth-child(3) { transition-delay: .4s; } .fade-up-children > :nth-child(4) { transition-delay: .6s; } .fade-up-children > :nth-child(5) { transition-delay: .8s; } .fade-up-children > :nth-child(6) { transition-delay: 1s; } .fade-up-children > :nth-child(7) { transition-delay: 1.2s; } .fade-up-children > :nth-child(8) { transition-delay: 1.4s; } .fade-up-children > :nth-child(9) { transition-delay: 1.6s; } .fade-up-children > :nth-child(10) { transition-delay: 1.8s; } .finished.fade-up-children > :nth-child(2), .finished.fade-up-children > :nth-child(3), .finished.fade-up-children > :nth-child(4), .finished.fade-up-children > :nth-child(5), .finished.fade-up-children > :nth-child(6), .finished.fade-up-children > :nth-child(7), .finished.fade-up-children > :nth-child(8), .finished.fade-up-children > :nth-child(9), .finished.fade-up-children > :nth-child(10), .finished.fade-in-children > :nth-child(2), .finished.fade-in-children > :nth-child(3), .finished.fade-in-children > :nth-child(4), .finished.fade-in-children > :nth-child(5), .finished.fade-in-children > :nth-child(6), .finished.fade-in-children > :nth-child(7), .finished.fade-in-children > :nth-child(8), .finished.fade-in-children > :nth-child(9), .finished.fade-in-children > :nth-child(10) { transition-delay: 0s; } /* ------------------------------------------------------------ *\ Fix BG \* ------------------------------------------------------------ */ .fix-bg { background-size: cover; background-position: center center; } .fix-bg .background { display: none; } /* ------------------------------------------------------------ *\ Ico \* ------------------------------------------------------------ */ .ico-arrow-down { background: url(../css/images/icons/ico-arrow-down.png) no-repeat 0 0; width: 19px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-briefcase { background: url(../css/images/icons/ico-briefcase.png) no-repeat 0 0; width: 55px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment1-white { background: url(../css/images/icons/investment/ico-investment1-white.png) no-repeat 0 0; width: 33px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment1 { background: url(../css/images/icons/investment/ico-investment1.png) no-repeat 0 0; width: 33px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment2-white { background: url(../css/images/icons/investment/ico-investment2-white.png) no-repeat 0 0; width: 36px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment2 { background: url(../css/images/icons/investment/ico-investment2.png) no-repeat 0 0; width: 36px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment3-white { background: url(../css/images/icons/investment/ico-investment3-white.png) no-repeat 0 0; width: 45px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment3 { background: url(../css/images/icons/investment/ico-investment3.png) no-repeat 0 0; width: 45px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment4-white { background: url(../css/images/icons/investment/ico-investment4-white.png) no-repeat 0 0; width: 40px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment4 { background: url(../css/images/icons/investment/ico-investment4.png) no-repeat 0 0; width: 40px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment5-white { background: url(../css/images/icons/investment/ico-investment5-white.png) no-repeat 0 0; width: 56px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment5 { background: url(../css/images/icons/investment/ico-investment5.png) no-repeat 0 0; width: 56px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment6-white { background: url(../css/images/icons/investment/ico-investment6-white.png) no-repeat 0 0; width: 46px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment6 { background: url(../css/images/icons/investment/ico-investment6.png) no-repeat 0 0; width: 46px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment7-white { background: url(../css/images/icons/investment/ico-investment7-white.png) no-repeat 0 0; width: 45px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment7 { background: url(../css/images/icons/investment/ico-investment7.png) no-repeat 0 0; width: 45px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment8-white { background: url(../css/images/icons/investment/ico-investment8-white.png) no-repeat 0 0; width: 41px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-investment8 { background: url(../css/images/icons/investment/ico-investment8.png) no-repeat 0 0; width: 41px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-crowd { background: url(../css/images/icons/ico-crowd.png) no-repeat 0 0; width: 75px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-devices { background: url(../css/images/icons/ico-devices.png) no-repeat 0 0; width: 94px; height: 54px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-external { background: url(../css/images/icons/ico-external.png) no-repeat 0 0; width: 9px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-medium { background: url(../css/images/icons/ico-facebook-medium.png) no-repeat 0 0; width: 6px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-secondary { background: url(../css/images/icons/ico-facebook-secondary.png) no-repeat 0 0; width: 6px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-small { background: url(../css/images/icons/ico-facebook-small.png) no-repeat 0 0; width: 4px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook { background: url(../css/images/icons/ico-facebook.png) no-repeat 0 0; width: 6px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-hover, a:hover .ico-facebook, button:hover .ico-facebook, a.hover .ico-facebook, button.hover .ico-facebook, .ico-facebook.hover { background: url(../css/images/icons/ico-facebook_hover.png) no-repeat 0 0; width: 6px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-medium { background: url(../css/images/icons/ico-linkedin-medium.png) no-repeat 0 0; width: 15px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-secondary { background: url(../css/images/icons/ico-linkedin-secondary.png) no-repeat 0 0; width: 15px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-small { background: url(../css/images/icons/ico-linkedin-small.png) no-repeat 0 0; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin { background: url(../css/images/icons/ico-linkedin.png) no-repeat 0 0; width: 17px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-hover, a:hover .ico-linkedin, button:hover .ico-linkedin, a.hover .ico-linkedin, button.hover .ico-linkedin, .ico-linkedin.hover { background: url(../css/images/icons/ico-linkedin_hover.png) no-repeat 0 0; width: 17px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-persons { background: url(../css/images/icons/ico-persons.png) no-repeat 0 0; width: 75px; height: 56px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-big { background: url(../css/images/icons/ico-play-big.png) no-repeat 0 0; width: 204px; height: 205px; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-play { background: url(../css/images/icons/ico-play.png) no-repeat 0 0; width: 15px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-medium { background: url(../css/images/icons/ico-twitter-medium.png) no-repeat 0 0; width: 14px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-secondary { background: url(../css/images/icons/ico-twitter-secondary.png) no-repeat 0 0; width: 14px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-small { background: url(../css/images/icons/ico-twitter-small.png) no-repeat 0 0; width: 9px; height: 7px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter { background: url(../css/images/icons/ico-twitter.png) no-repeat 0 0; width: 17px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-hover, a:hover .ico-twitter, button:hover .ico-twitter, a.hover .ico-twitter, button.hover .ico-twitter, .ico-twitter.hover { background: url(../css/images/icons/ico-twitter_hover.png) no-repeat 0 0; width: 17px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-left { background: url(../css/images/icons/ico-arrow-left.png) no-repeat 0 0; width: 39px; height: 39px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-quinary { background: url(../css/images/icons/ico-facebook-quinary.png) no-repeat 0 0; width: 10px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; transition: .5s; } .ico-twitter-quinary { background: url(../css/images/icons/ico-twitter-quinary.png) no-repeat 0 0; width: 23px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; transition: .5s; } .ico-linkedin-quinary { background: url(../css/images/icons/ico-linkedin-quinary.png) no-repeat 0 0; width: 25px; height: 25px; display: inline-block; vertical-align: middle; font-size: 0; transition: .5s; } .ico-book { background: url(../css/images/icons/ico-book.png) no-repeat 0 0; width: 32px; height: 43px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-white { background: url(../css/images/icons/ico-facebook-white.png) no-repeat 0 0; width: 7px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-white { background: url(../css/images/icons/ico-twitter-white.png) no-repeat 0 0; width: 17px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-white { background: url(../css/images/icons/ico-linkedin-white.png) no-repeat 0 0; width: 17px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up { background: url(../css/images/icons/ico-arrow-up.png) no-repeat 0 0; width: 22px; height: 13px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-external-secondary { background: url(../css/images/icons/ico-external-secondary.png) no-repeat 0 0; width: 8px; height: 8px; display: inline-block; vertical-align: middle; font-size: 0; } a:hover .ico-facebook-secondary { background: url(../css/images/icons/ico-facebook-secondary_hover.png) no-repeat 0 0; } a:hover .ico-twitter-secondary { background: url(../css/images/icons/ico-twitter-secondary_hover.png) no-repeat 0 0; } a:hover .ico-linkedin-secondary { background: url(../css/images/icons/ico-linkedin-secondary_hover.png) no-repeat 0 0; } a:hover .ico-facebook-medium { background: url(../css/images/icons/ico-facebook-medium_hover.png) no-repeat 0 0; } a:hover .ico-twitter-medium { background: url(../css/images/icons/ico-twitter-medium_hover.png) no-repeat 0 0; } a:hover .ico-linkedin-medium { background: url(../css/images/icons/ico-linkedin-medium_hover.png) no-repeat 0 0; } .current .ico-facebook-quinary, a:hover .ico-facebook-quinary { background: url(../css/images/icons/ico-facebook-quinary_hover.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .current .ico-twitter-quinary, a:hover .ico-twitter-quinary { background: url(../css/images/icons/ico-twitter-quinary_hover.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .current .ico-linkedin-quinary, a:hover .ico-linkedin-quinary { background: url(../css/images/icons/ico-linkedin-quinary_hover.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow-down { background: url(../css/images/icons/ico-arrow-down@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-briefcase { background: url(../css/images/icons/ico-briefcase@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment1-white { background: url(../css/images/icons/investment/ico-investment1-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment1 { background: url(../css/images/icons/investment/ico-investment1@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment2-white { background: url(../css/images/icons/investment/ico-investment2-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment2 { background: url(../css/images/icons/investment/ico-investment2@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment3-white { background: url(../css/images/icons/investment/ico-investment3-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment3 { background: url(../css/images/icons/investment/ico-investment3@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment4-white { background: url(../css/images/icons/investment/ico-investment4-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment4 { background: url(../css/images/icons/investment/ico-investment4@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment5-white { background: url(../css/images/icons/investment/ico-investment5-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment5 { background: url(../css/images/icons/investment/ico-investment5@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment6-white { background: url(../css/images/icons/investment/ico-investment6-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment6 { background: url(../css/images/icons/investment/ico-investment6@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment7-white { background: url(../css/images/icons/investment/ico-investment7-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment7 { background: url(../css/images/icons/investment/ico-investment7@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment8-white { background: url(../css/images/icons/investment/ico-investment8-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-investment8 { background: url(../css/images/icons/investment/ico-investment8@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-devices { background: url(../css/images/icons/ico-devices@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-external { background: url(../css/images/icons/ico-external@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook-medium { background: url(../css/images/icons/ico-facebook-medium@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook-secondary { background: url(../css/images/icons/ico-facebook-secondary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook-small { background: url(../css/images/icons/ico-facebook-small@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook { background: url(../css/images/icons/ico-facebook@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin-medium { background: url(../css/images/icons/ico-linkedin-medium@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin-secondary { background: url(../css/images/icons/ico-linkedin-secondary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin-small { background: url(../css/images/icons/ico-linkedin-small@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin { background: url(../css/images/icons/ico-linkedin@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-persons { background: url(../css/images/icons/ico-persons@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-play-big { background: url(../css/images/icons/ico-play-big@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-play { background: url(../css/images/icons/ico-play@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter-medium { background: url(../css/images/icons/ico-twitter-medium@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter-secondary { background: url(../css/images/icons/ico-twitter-secondary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter-small { background: url(../css/images/icons/ico-twitter-small@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter { background: url(../css/images/icons/ico-twitter@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-arrow-left { background: url(../css/images/icons/ico-arrow-left@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook-quinary { background: url(../css/images/icons/ico-facebook-quinary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter-quinary { background: url(../css/images/icons/ico-twitter-quinary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin-quinary { background: url(../css/images/icons/ico-linkedin-quinary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-book { background: url(../css/images/icons/ico-book@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-facebook-white { background: url(../css/images/icons/ico-facebook-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-twitter-white { background: url(../css/images/icons/ico-twitter-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-linkedin-white { background: url(../css/images/icons/ico-linkedin-white@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-arrow-up { background: url(../css/images/icons/ico-arrow-up@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } .ico-external-secondary { background: url(../css/images/icons/ico-external-secondary@2x.png) no-repeat 0 0; display: inline-block; vertical-align: middle; font-size: 0; background-size: 100% 100%; } } /* Mobile */ @media(max-width: 767px){ .ico-facebook-quinary { width: 5px; height: 11px; background-size: 100% 100%; } .ico-twitter-quinary { width: 11px; height: 9px; background-size: 100% 100%; } .ico-linkedin-quinary { width: 12px; height: 12px; background-size: 100% 100%; } .ico-play { width: 13px; height: 13px; background-size: 100% 100%; } .ico-mosk { width: 24px; height: 27px; background-size: 100% 100%; } .ico-church { width: 23px; height: 25px; background-size: 100% 100%; } .ico-windmill { width: 20px; height: 26px; background-size: 100% 100%; } .ico-house { width: 20px; height: 31px; background-size: 100% 100%; } .ico-monument { width: 23px; height: 19px; background-size: 100% 100%; } .ico-store { width: 30px; height: 18px; background-size: 100% 100%; } .ico-factory { width: 24px; height: 24px; background-size: 100% 100%; } .ico-crowd { width: 56px; height: 33px; background-size: 100% 100%; } .ico-devices { width: 49px; height: 28px; background-size: 100% 100%; } .ico-persons { width: 45px; height: 34px; background-size: 100% 100%; } .ico-briefcase { width: 31px; height: 27px; background-size: 100% 100%; } .ico-facebook-white, .ico-facebook-secondary, .ico-facebook-small, .ico-facebook-medium, .ico-facebook { width: 4px; height: 10px; background-image: url(../css/images/icons/ico-facebook.png); background-size: 100% 100%; } .ico-twitter-white, .ico-twitter-secondary, .ico-twitter-small, .ico-twitter-medium, .ico-twitter { width: 11px; height: 8px; background-image: url(../css/images/icons/ico-twitter.png); background-size: 100% 100%; } .ico-linkedin-white, .ico-linkedin-secondary, .ico-linkedin-small, .ico-linkedin-medium, .ico-linkedin { width: 11px; height: 11px; background-image: url(../css/images/icons/ico-linkedin.png); background-size: 100% 100%; } .ico-investment1-white { width: 22px; height: 26px; } .ico-investment1 { width: 22px; height: 26px; } .ico-investment2-white { width: 24px; height: 26px; } .ico-investment2 { width: 24px; height: 26px; } .ico-investment3-white { width: 30px; height: 26px; } .ico-investment3 { width: 30px; height: 26px; } .ico-investment4-white { width: 26px; height: 26px; } .ico-investment4 { width: 26px; height: 26px; } .ico-investment5-white { width: 37px; height: 26px; } .ico-investment5 { width: 37px; height: 26px; } .ico-investment6-white { width: 30.67px; height: 26px; } .ico-investment6 { width: 30px; height: 26px; } .ico-investment7-white { width: 30px; height: 26px; } .ico-investment7 { width: 30px; height: 26px; } .ico-investment8-white { width: 27px; height: 26px; } .ico-investment8 { width: 27px; height: 26px; } @media only screen and ( -webkit-min-device-pixel-ratio: 2 ), only screen and ( min-device-pixel-ratio: 2 ), only screen and ( min-resolution: 192dpi ) { .ico-facebook-white, .ico-facebook-secondary, .ico-facebook-small, .ico-facebook-medium, .ico-facebook { background-image: url(../css/images/icons/ico-facebook@2x.png); background-size: 100% 100%; } .ico-twitter-white, .ico-twitter-secondary, .ico-twitter-small, .ico-twitter-medium, .ico-twitter { background-image: url(../css/images/icons/ico-twitter@2x.png); background-size: 100% 100%; } .ico-linkedin-white, .ico-linkedin-secondary, .ico-linkedin-small, .ico-linkedin-medium, .ico-linkedin { background-image: url(../css/images/icons/ico-linkedin@2x.png); background-size: 100% 100%; } } } /* ------------------------------------------------------------ *\ MFP \* ------------------------------------------------------------ */ .mfp-bg { opacity: 1; background: rgba(18, 22, 22, .95); } /* ------------------------------------------------------------ *\ Parallax \* ------------------------------------------------------------ */ .parallax { position: relative; width: 100%; height: auto; top: 0; } /* ------------------------------------------------------------ *\ Player \* ------------------------------------------------------------ */ .player { height: auto !important; } /* ------------------------------------------------------------ *\ Story \* ------------------------------------------------------------ */ .stories { position: relative; padding-top: 50.06%; list-style-type: none; } .stories:after { content: ''; line-height: 0; display: table; clear: both; } .stories .story { position: absolute; } .stories .story-image { padding-top: 59.19%; } .stories .story-size1 { width: 17.64%; padding-top: 29.43%; } .stories .story-size2 { width: 20.21%; padding-top: 25.03%; } .stories .story-size3 { width: 24.3%; } .stories .story-size4 { width: 20.33%; padding-top: 25.03%; } .stories .story-size5 { width: 17.52%; padding-top: 20.21%; } .stories .story-size6 { width: 17.64%; padding-top: 20.7%; } .stories .story-size7 { width: 20.21%; padding-top: 25.09%; } .stories .story-size8 { width: 24.3%; padding-top: 14.65%; } .stories .story-size9 { width: 20.33%; padding-top: 25.09%; } .stories .story-size10 { width: 17.52%; padding-top: 29.91%; } .stories .story-position1 { top: 0; left: 0; } .stories .story-position2 { top: 0; left: 17.64%; } .stories .story-position3 { top: 0; left: 37.85%; } .stories .story-position4 { top: 0; left: 62.15%; } .stories .story-position5 { top: 0; right: 0; } .stories .story-position6 { bottom: 0; left: 0; } .stories .story-position7 { bottom: 0; left: 17.64%; } .stories .story-position8 { bottom: 0; left: 37.85%; } .stories .story-position9 { bottom: 0; left: 62.15%; } .stories .story-position10 { bottom: 0; right: 0; } .story { z-index: 1; } .story.active, .story:hover { backface-visiblity: hidden; box-shadow: 0px 5px 24.5px 0.5px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); z-index: 5; } .story.active .story-content, .story:hover .story-content { opacity: 1; visibility: visible; } .story img { width: 100%; height: auto; } .story .story-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #fff; text-align: center; opacity: 0; visibility: hidden; background: url(../css/images/story-content-shadow.png) repeat-x 0 bottom; transition: .5s; } .story .story-group { display: table; width: 100%; height: 100%; table-layout: fixed; padding-bottom: 53px; } .story .link-external { position: absolute; left: 5px; right: 5px; bottom: -15px; padding: 0; font-size: 11px; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); white-space: nowrap; } .story .socials-quaternary { position: absolute; left: 50%; bottom: 28px; -webkit-transform: translateX(-50%) scale(.9); -ms-transform: translateX(-50%) scale(.9); transform: translateX(-50%) scale(.9); } .story .story-inner { display: none; font-size: 18px; line-height: 1.33; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } .story .story-inner.active { display: table-cell; width: 100%; vertical-align: bottom; } .story .story-inner strong { display: block; margin-top: 5px; font-size: 13px; text-transform: uppercase; } .story .story-inner p { margin-bottom: 10px; } .story-entry { position: absolute; width: 24.48%; height: 500px; top: 28%; left: 37.85%; padding: 40px 40px 50px; font-size: 15px; color: #fff; text-align: center; background: #0aa5b0; } .story-entry h3 { font-size: 26px; margin-bottom: 15px; } .story-entry p { margin-bottom: 15px; } .story-entry-secondary { width: 25.7%; height: 550px; top: 26%; left: 17.34%; padding: 45px 20px 52px; color: #434443; background: #f3f3f8; z-index: 1; } .story-entry-secondary p { margin-bottom: 23px; font-size: 15px; line-height: 1.75; } .story-entry-secondary h3 { margin-bottom: 16px; } .story-entry-secondary h4 { font-size: 22px; } .story-entry-secondary .btn { padding: 0 20px; } /* Modifier: Stories Secondary */ .stories-secondary { padding-top: 46.46%; } .stories-secondary .btn { padding: 0 10px; } .stories-secondary .story-content { max-width: 335px; left: auto; right: 0; background: url(../css/images/story-shadow-2.png) repeat-y 0 0; } .stories-secondary .socials-quaternary { width: 100%; } .stories-secondary .story-content-secondary { max-width: 100%; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); background: url(../css/images/story-content-shadow.png) repeat-x 0 bottom; } .stories-secondary .story-image { padding-top: 48.3%; } .stories-secondary .story-size1 { width: 17.34%; padding-top: 16.36%; } .stories-secondary .story-size2 { width: 25.7%; padding-top: 0; } .stories-secondary .story-size3 { width: 24.48%; padding-top: 27.05%; } .stories-secondary .story-size4 { width: 32.48%; padding-top: 27.05%; } .stories-secondary .story-size5 { width: 17.36%; padding-top: 19.41%; } .stories-secondary .story-size6 { width: 27.11%; padding-top: 10.94%; } .stories-secondary .story-size7 { width: 15.93%; padding-top: 10.93%; } .stories-secondary .story-size8 { width: 39.07%; padding-top: 19.41%; } .stories-secondary .story-size9 { width: 17.89%; padding-top: 19.41%; } .stories-secondary .story-position1 { top: 0; left: 0; } .stories-secondary .story-position2 { top: 0; left: 17.34%; } .stories-secondary .story-position3 { top: 0; left: 43.04%; } .stories-secondary .story-position4 { top: 0; left: 67.52%; } .stories-secondary .story-position5 { top: 35.19%; left: 0; } .stories-secondary .story-position6 { bottom: 0; left: 0; } .stories-secondary .story-position7 { bottom: 0; left: 27.11%; } .stories-secondary .story-position8 { bottom: 0; left: 43.04%; } .stories-secondary .story-position9 { bottom: 0; left: auto; right: 0; } /* Medium Desktop */ @media(max-width: 1550px){ .story .story-content p { font-size: 14px; } .story-entry { padding: 20px 20px 50px; height: 400px; font-size: 13px; } .story-entry h3 { font-size: 20px; margin-bottom: 10px; } .story-entry-secondary { height: 400px; } .story-entry-secondary p { margin-bottom: 2px; font-size: 10px; } .story-entry-secondary h4 { font-size: 16px; margin-bottom: 8px; } } /* Small Desktop */ @media (max-width: 1250px) { .story .story-content p { font-size: 10px; } .story-entry { font-size: 10px; } .story-entry-secondary { height: 300px; } } /* Tablet */ @media (max-width: 1023px) { .stories { padding-top: 0; } .stories:after { } .stories .story { position: static; float: left; width: 50%; padding-top: 50%; } .stories .story-image { padding-top: 100%; } .stories .story-size3 { padding-top: 0; } .story .story-content p { font-size: 14px; } .story-entry { position: static; width: 100%; height: auto; padding: 20px; font-size: 14px; } .story-entry-secondary p { margin-bottom: 10px; font-size: 14px; } /* Modifier: Stories Secondary */ .stories-secondary .story-image { padding-top: 100%; } .stories-secondary .story-size2 { padding-top: 0; } .stories-secondary .story-size3 { padding-top: 50%; } } /* Mobile */ @media (max-width: 767px) { .stories .owl-stage-outer { overflow: visible; } .stories .owl-prev { position: absolute; width: 34px; height: 34px; top: 50%; left: 15px; margin-top: -17px; background: url(../css/images/prev.png) no-repeat 0 0; background-size: 100% 100%; font-size: 0; line-height: 0; text-indent: -4004px; } .stories .owl-next { position: absolute; width: 34px; height: 34px; top: 50%; right: 15px; margin-top: -17px; background: url(../css/images/next.png) no-repeat 0 0; background-size: 100% 100%; font-size: 0; line-height: 0; text-indent: -4004px; } .stories .story { position: relative; width: 100%; padding: 0; top: auto; right: auto; bottom: auto; left: auto; } .stories .story img { display: none; } .stories .active .story { height: 302px; margin-top: 0; box-shadow: 0px 3px 12.74px 0.26px rgba(0, 0, 0, 0.5); } .stories .active .story:after { opacity: 0; visibility: hidden; } .story-entry { padding: 35px 20px 30px; font-size: 13px; line-height: 1.48; } .story-entry h3 { margin-bottom: 13px; } .story-entry-secondary { padding: 0 20px 30px; } .story-entry-secondary p { font-size: 13px; line-height: 1.46; } .story-entry h3 { font-size: 22px; } .story-entry br { display: none; } .story .story-image { height: 100%; padding: 0; } .story .btn-socials { width: 77px; border-color: #fff; color: #fff; } .story .socials-inner { vertical-align: top; } .story { position: relative; height: 275px; margin-top: 16px; transition: .5s; } .story:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .75); transition: .5s; } .story .link-external { height: 19px; left: 15px; right: 15px; bottom: -5px; padding: 0 5px; font-size: 7px; line-height: 19px; } .story .link-external em { -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); } .story .story-content { padding: 0 10px; opacity: 1; visibility: visible; } .story .story-content p { font-size: 12px; } .story .story-content strong { font-size: 9px; } .story .socials-quaternary { width: 100%; bottom: 23px; -webkit-transform: scale(1) translate(-50%); -ms-transform: scale(1) translate(-50%); transform: scale(1) translate(-50%); } .story .socials-quaternary p { font-size: 9px; } .story .socials-quaternary .socials-inner { border-color: #9d968f; } .story-entry, .story-entry-secondary { position: static; width: 100%; } .story .story-inner, .story .link-external, .story.active, .story:hover { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .stories:last-child, .stories { margin: -16px 0; } } /* Mobile */ @media (max-width: 370px) { .story .socials-quaternary ul { width: 130px; } } .cols:after, .header .shell:after, .list-logos:after, .popup .popup-caption:after, .slider-bubbles .slide-tooltip:after, .socials ul:after, .socials-quinary ul:after, .tabs .tabs-nav ul:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ html, body { height: 100%; } body { min-width: 320px; background: #fff; font-family: 'Proxima Nova', sans-serif; font-size: 16px; line-height: 1.63; color: #434443; } a { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.815em; line-height: 1.2; } h1 { font-family: 'Axis', sans-serif; font-size: 98px; line-height: 0.88; font-weight: 800; color: #fff; text-align: center; text-transform: uppercase; } h2 { font-family: 'Axis', sans-serif; font-size: 39px; font-weight: 800; } h3 { font-family: 'Axis', sans-serif; font-size: 30px; line-height: 1.2; font-weight: 800; } h4 { font-size: 24px; font-weight: 800; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.63em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } [class*="ico"] { font-size: 0; line-height: 0; text-indent: -4004px; } /* Mobile */ @media (max-width: 767px) { body { font-size: 13px; line-height: 1.46; } h3 { font-size: 22px; line-height: 1.09; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-nova-regular.eot'); src: url('fonts/proxima-nova-regular.eot?#iefix') format('embedded-opentype'), url('fonts/proxima-nova-regular.woff2') format('woff2'), url('fonts/proxima-nova-regular.woff') format('woff'), url('fonts/proxima-nova-regular.ttf') format('truetype'), url('fonts/proxima-nova-regular.svg#youworkforthem') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-nova-bold.eot'); src: url('fonts/proxima-nova-bold.eot?#iefix') format('embedded-opentype'), url('fonts/proxima-nova-bold.woff2') format('woff2'), url('fonts/proxima-nova-bold.woff') format('woff'), url('fonts/proxima-nova-bold.ttf') format('truetype'), url('fonts/proxima-nova-bold.svg#youworkforthem') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-nova-light.eot'); src: url('fonts/proxima-nova-light.eot?#iefix') format('embedded-opentype'), url('fonts/proxima-nova-light.woff2') format('woff2'), url('fonts/proxima-nova-light.woff') format('woff'), url('fonts/proxima-nova-light.ttf') format('truetype'), url('fonts/proxima-nova-light.svg#youworkforthem') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('fonts/ProximaNova-Extrabld.eot'); src: url('fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'), url('fonts/ProximaNova-Extrabld.woff') format('woff'), url('fonts/ProximaNova-Extrabld.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima_nova_semibold-webfont.eot'); src: url('fonts/proxima_nova_semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proxima_nova_semibold-webfont.woff') format('woff'), url('fonts/proxima_nova_semibold-webfont.ttf') format('truetype'), url('fonts/proxima_nova_semibold-webfont.svg#ProximaNova-Semibold&') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-nova-thin.eot'); src: url('fonts/proxima-nova-thin.eot?#iefix') format('embedded-opentype'), url('fonts/proxima-nova-thin.woff2') format('woff2'), url('fonts/proxima-nova-thin.woff') format('woff'), url('fonts/proxima-nova-thin.ttf') format('truetype'), url('fonts/proxima-nova-thin.svg#youworkforthem') format('svg'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Axis'; src: url('fonts/axis_extrabold-webfont.woff2') format('woff2'), url('fonts/axis_extrabold-webfont.woff') format('woff'); font-weight: 800; font-style: normal; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; } .cols:after { } .col { float: left; width: 100%; padding: 0 15px; } .col-1of2 { width: 50%; } .col-size1 { width: 50.51%; } .col-size2 { width: 38.61%; } .col-size4 { width: 42.77%; } .col-size5 { width: 63.49%; } .col-size6 { width: 24.33%; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1250px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1251px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { position: relative; height: 100%; overflow: hidden; } /* Mobile */ @media (max-width: 767px) { .container { overflow: visible; } } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #434443; } .footer .shell { padding: 0 50px; } .footer .col + .col { float: right; } .footer .col-size4 h3 { font-size: 22px; color: #fff; } .footer .footer-content { padding: 69px 0; } .footer .footer-bar { padding: 13px 0; background: #373737; } .footer .footer-links { padding-top: 16px; border-top: 3px solid #434443; text-align: center; } .footer .footer-links strong { margin-right: 23px; opacity: .4; font-size: 10px; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; } .footer .footer-links strong, .footer .footer-links ul { display: inline-block; vertical-align: middle; } .footer .footer-entry { padding-top: 35px; font-size: 16px; line-height: 1.5; color: #fff; } .footer .footer-entry h3 { margin-bottom: 8px; } /* Tablet */ @media (max-width: 1023px) { .footer .list-logos { max-width: 370px; margin: 0 auto; } .footer .footer-content { text-align: center; } .footer .footer-entry { padding-top: 0; } .footer .footer-links strong { padding-bottom: 10px; } .footer .footer-links strong, .footer .footer-links ul { display: block; } .footer .col { float: none; width: 100%; } .footer .col + .col { margin-top: 34px; } } /* Mobile */ @media (max-width: 767px) { .footer h3 { font-size: 22px; line-height: 1.09; } .footer .shell { padding: 0 20px; } .footer .footer-content { padding: 48px 0; } XXX.footer .footer-links { display: none; } .footer .list-utilities { margin-bottom: 0; } .footer .footer-entry { font-size: 13px; line-height: 1.46; } .footer .footer-entry h3 { margin-bottom: 13px; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: absolute; width: 100%; top: 0; left: 0; z-index: 20; } /* Mobile */ @media (max-width: 767px) { .header { z-index: auto; } .header .logo { position: relative; float: left; z-index: 20; } .header .nav-btn { float: right; margin: 17px 16px 0 0; } .header .shell { padding: 0; } .header .shell:after { } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1110px; padding-left: 20px; padding-right: 20px; margin: auto; } .shell-fluid { max-width: none; } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { position: relative; overflow: hidden; } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { padding-top: 12px; } .article h3 { margin-bottom: 21px; } .article p { margin-bottom: 19px; } .article .btn { margin-top: 4px; } /* Mobile */ @media (max-width: 767px) { .article { font-size: 13px; line-height: 1.39; text-align: center; } .article h3 { margin-bottom: 17px; } .article p { margin-bottom: 10px; } .article .btn { margin-top: 7px; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; height: 46px; padding: 0 43px; border-radius: 9px; font-size: 16px; line-height: 46px; font-weight: 700; color: #fff; text-align: center; text-decoration: none; background: #0aa5b0; vertical-align: middle; text-align: center; cursor: pointer; transition: .3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn:hover { background: #44d0da; } /* Button Secondary */ .btn-secondary { height: 35px; padding: 0 20px; font-size: 14px; line-height: 35px; font-weight: 600; } .btn-secondary em { position: relative; top: -2px; margin-right: 3px; } /* Button Teritary */ .btn-teritary { height: 37px; padding: 0 32px; font-size: 15px; line-height: 37px; } /* Button White */ .btn-white { padding: 0 48px; height: 36px; border: 1px solid #585958; font-size: 14px; line-height: 34px; font-weight: 600; color: #434443; background: none; } .btn-white:hover { background: #f3f3f8; } .btn-white:active { background: #d7d7df; } /* Button White Secondary */ .btn-white-secondary { height: 42px; border-color: #fff; font-size: 17px; line-height: 42px; font-weight: 700; color: #fff; } .btn-white-secondary:hover { color: #434443; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } /* Button Socials */ .btn-socials { display: none; } /* Mobile */ @media (max-width: 767px) { .btn { height: 34px; padding: 0 30px; font-size: 12px; line-height: 34px; } .btn-secondary { height: 30px; padding: 0 13px; border-radius: 5px; font-size: 12px; line-height: 30px; } .btn-teritary { height: 24px; padding: 0 20px; border-radius: 5px; font-size: 10px; line-height: 24px; } .btn-socials { display: inline-block; width: 108px; height: 21px; font-size: 9px; border: 1px solid #98999b; border-radius: 5px; line-height: 22px; font-weight: 700; color: #3e3f3f; text-decoration: none; text-align: center; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } .field {} .textarea {} .select {} .radio {} .checkbox {} /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form {} /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { position: relative; } .intro h2 { font-family: 'Proxima Nova', sans-serif; font-size: 24px; font-weight: 800; margin-bottom: 14px; } .intro p { margin-bottom: 36px; } .intro .shell { position: absolute; width: 100%; top: 36.5%; height: 63.5%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .intro .intro-content { position: absolute; width: 580px; bottom: 0; left: 50%; padding: 49px 66px 17px; margin-left: -290px; text-align: center; background: rgba(243, 243, 248, .8); } /* Medium Desktop */ @media(max-width: 1550px){ .intro h1 { font-size: 60px; } .intro p { margin-bottom: 14px; } .intro .intro-content { padding: 20px; } .intro .shell { top: 30%; height: 70%; } } /* Tablet */ @media (max-width: 1023px) { .intro { padding-top: 110px; background: url(../css/images/temp/parallax-image.jpg) no-repeat center center; background-size: cover; } .intro img { display: none; } .intro .intro-content { position: static; width: 100%; left: 0; margin-left: 0; font-size: 14px; } .intro .shell { position: static; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* Mobile */ @media (max-width: 767px) { .intro { padding-top: 169px; } .intro h1 { font-size: 49px; line-height: 0.87; padding: 0 10px; margin-bottom: 24px; } .intro h2 { font-size: 17px; margin-bottom: 6px; } .intro .intro-content { padding: 20px 13px 5px; font-size: 13px; line-height: 1.47; } .intro .intro-content p { margin-bottom: 16px; } } /* Mobile */ @media (max-width: 370px) { .intro h1 { font-size: 35px; } } /* ------------------------------------------------------------ *\ Link Scroll \* ------------------------------------------------------------ */ .link-scroll { display: inline-block; font-weight: 800; text-decoration: none; transition: .3s; } .link-scroll:hover { opacity: .7; } .link-scroll em { display: block; margin: 5px auto 0; } /* ------------------------------------------------------------ *\ Link External \* ------------------------------------------------------------ */ .link-external { display: inline-block; height: 27px; padding: 0 7px; font-size: 12px; line-height: 29px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; color: #373737; text-decoration: none; background: #fff; transition: .3s; } .link-external:hover { background: #0aa5b0; } .link-external em { position: relative; top: -2px; margin-left: 2px; } /* Mobile */ @media (max-width: 767px) { .link-external { font-size: 9px; } .link-external em { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Logos \* ------------------------------------------------------------ */ .list-logos { padding-top: 13px; } .list-logos:after { } .list-logos li { float: left; margin: -13px 0 0 53px; } .list-logos li:nth-child(4) { margin-left: -10px; } .list-logos a { display: block; transition: .3s; } .list-logos a:hover { opacity: .7; } /* Mobile */ @media (max-width: 767px) { .list-logos li { margin-left: 47px; } .list-logos li:nth-child(4) { margin-left: -4px; } .list-logos img { width: 60px; } } /* Mobile */ @media (max-width: 370px) { .list-logos li { float: none; display: inline-block; margin: 10px; } .list-logos li:nth-child(4) { margin: 10px; } } /* ------------------------------------------------------------ *\ List Utilities \* ------------------------------------------------------------ */ .list-utilities { margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; text-align: center; } .list-utilities li { position: relative; display: inline-block; vertical-align: top; } .list-utilities li + li { margin-left: 24px; } .list-utilities li + li:after { content: '|'; position: absolute; top: 0; left: -16px; opacity: .4; } .list-utilities a { display: block; opacity: .4; text-decoration: none; transition: .3s; } .list-utilities a:hover { opacity: 1; } .list-utilities p { opacity: .4; } /* Mobile */ @media (max-width: 767px) { .list-utilities { font-size: 9px; } .list-utilities li:first-child { float: none; display: block; margin-bottom: 4px; } .list-utilities li:nth-child(2) { margin-left: 0; } .list-utilities li:nth-child(2):after { display: none; } } /* ------------------------------------------------------------ *\ List Links \* ------------------------------------------------------------ */ .list-links { position: relative; counter-reset: nums; padding-left: 32px; font-size: 12px; line-height: 1.5; color: #fff; text-align: left; } .list-links:before { content: ''; position: absolute; width: 3px; top: 5px; left: 0; bottom: 5px; background: #434443; } .list-links li { counter-increment: nums; } .list-links li + li { margin-top: -1px; } .list-links em { position: relative; top: -1px; } .list-links sup { position: relative; display: inline-block; width: 8px; top: 1px; left: 1px; font-size: 8px; } .list-links sup:before { content: counter(nums); } .list-links a { text-decoration: none; } .list-links a:hover { text-decoration: underline; } /* Tablet */ @media (max-width: 1023px) { .list-links { padding-left: 0; } .list-links:before { display: none; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: block; width: 289px; height: 113px; line-height: 113px; text-align: center; background: #fff; } .logo img { width: 233px; height: 71px; } /* Tablet */ @media (max-width: 1023px) { .logo { width: 192px; height: 75px; line-height: 75px; } .logo img { width: 155px; height: 47px; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { display: none; } /* Mobile */ @media (max-width: 767px) { .nav { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: -100%; overflow: auto; font-size: 17px; font-weight: 800; color: #fff; background: none; z-index: 40; transition: .5s; } .nav.active { left: 0; background: rgba(0, 0, 0, .5); transition: left .5s, background .5s .5s; } .nav ul { position: relative; width: calc(100% - 58px); height: 100%; background: rgba(10, 165, 176, .95); } .nav li { border-bottom: 2px solid #008b95; } .nav a { display: block; height: 41px; padding: 0 24px; line-height: 41px; text-decoration: none; } .nav em { position: relative; top: -2px; margin-right: 5px; } } /* ------------------------------------------------------------ *\ Nav Btn \* ------------------------------------------------------------ */ .nav-btn { display: none; } /* Mobile */ @media (max-width: 767px) { .nav-btn { position: relative; display: block; width: 29px; z-index: 90; } .nav-btn:after { content: ''; position: absolute; width: 59px; height: 54px; top: -17px; left: -14px; opacity: 0; visibility: hidden; background: #008b95; transition: .3s; } .nav-btn.active { position: fixed; top: 0; right: 0; z-index: 100; } .nav-btn.active:after { opacity: 1; visibility: visible; } .nav-btn span { position: relative; display: block; height: 3px; top: 0; background: #fff; transition: .3s; z-index: 3; } .nav-btn span + span { margin-top: 4px; } .nav-btn.active span:nth-child(1) { top: 7px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: top .3s, -webkit-transform .3s .3s; transition: top .3s, transform .3s .3s; transition: top .3s, transform .3s .3s, -webkit-transform .3s .3s; } .nav-btn.active span:nth-child(2) { opacity: 0; } .nav-btn.active span:nth-child(3) { top: -7px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); transition: top .3s, -webkit-transform .3s .3s; transition: top .3s, transform .3s .3s; transition: top .3s, transform .3s .3s, -webkit-transform .3s .3s; } } /* ------------------------------------------------------------ *\ Nav Dots \* ------------------------------------------------------------ */ .nav-dots { position: fixed; top: 50%; right: 60px; list-style-type: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; } .nav-dots .nav-tooltip { position: absolute; height: 36px; padding: 0 20px; top: 21px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden; font-size: 16px; line-height: 36px; font-weight: 800; color: #0aa5b0; text-indent: 0; white-space: nowrap; background: rgba(0, 0, 0, .8); transition: .5s; } .nav-dots .nav-tooltip:after { content: ''; position: absolute; width: 23px; height: 11px; left: 50%; margin-left: -11px; bottom: 100%; background: url(../css/images/triangle.png) no-repeat 0 0; } .nav-dots li { position: relative; } .nav-dots li:hover .nav-tooltip { opacity: 1; visibility: visible; } .nav-dots li + li { margin-top: 50px; } .nav-dots a { display: block; width: 18px; height: 18px; box-shadow: 0 0 4px rgba(0, 0, 0, .6); border: 2px solid #fff; border-radius: 50%; transition: .5s; font-size: 0; line-height: 0; text-indent: -4004px; } .nav-dots .current a, .nav-dots li:hover a { border-color: #0aa5b0; background: #0aa5b0; } /* Tablet */ @media (max-width: 1023px) { .nav-dots { display: none; } } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { position: fixed; width: 100%; max-width: 758px; top: 135px; left: 50%; margin-left: -379px; font-size: 15px; line-height: 1.33; z-index: 20; } .popup h3 { margin-bottom: 5px; } .popup .mfp-close { width: 44px; height: 44px; opacity: 1; top: -44px; right: -44px; background: url(../css/images/close-btn.png) no-repeat 0 0; background-size: 100% 100%; font-size: 0; line-height: 0; text-indent: -4004px; } .popup .popup-video { position: relative; padding-top: 56%; } .popup .popup-content { float: left; width: 450px; } .popup .popup-aside { float: right; width: 160px; padding: 39px 0; margin-top: -6px; border-left: 3px solid #000; text-align: right; } .popup .socials { display: inline-block; vertical-align: top; } .popup .player { position: absolute; width: 100% !important; height: 100% !important; top: 0; left: 0; } .popup .popup-caption { padding: 20px 41px 20px 31px; color: #fff; background: #1b2020; } .popup .popup-caption:after { } /* Tablet */ @media (max-width: 1023px) { .popup { top: 0; left: 0; margin-left: 0; } .popup .mfp-close { top: 0; right: 0; } } /* Mobile */ @media (max-width: 767px) { .popup { text-align: center; } .popup .popup-aside { padding: 30px 0; } .popup .popup-content, .popup .popup-aside { float: none; width: 100%; border: 0; text-align: center; } } /* ------------------------------------------------------------ *\ Section Difficulties \* ------------------------------------------------------------ */ .section-difficulties { padding: 146px 0 122px; background: #f3f3f8; } .section-difficulties .shell { padding: 0 50px; } .section-difficulties .col + .col { float: right; } .section-difficulties .section-entry { padding-top: 12px; text-align: center; } .section-difficulties .section-entry h2:not(.section-title) { line-height: 1; position: relative; padding-bottom: 16px; margin: 0 -20px 10px; } .section-difficulties .section-entry h2:not(.section-title) strong { display: block; margin-top: -3px; font-size: 46px; } .section-difficulties .section-entry h3 { font-size: 29px; line-height: 1; position: relative; padding-bottom: 19px; margin: 0 -15px 13px; } .section-difficulties .section-entry h3 span { font-size: 26px; } .section-difficulties .section-entry h3 strong { display: block; font-size: 32px; margin-top: -1px; } .section-difficulties .section-title { font-size: 30px; line-height: 1; padding-bottom: 0; margin: 0 -20px 11px; } .section-difficulties .section-title strong { display: block; font-size: 42px; margin: 0 -15px -1px; } .section-difficulties .section-title:after { display: none; } .section-difficulties .section-entry h2, .section-difficulties .section-entry h3 { color: #373737; } .section-difficulties .section-entry h2:after, .section-difficulties .section-entry h3:after { content: ''; position: absolute; width: 290px; height: 3px; left: 50%; bottom: 0; margin-left: -145px; background: #0aa5b0; } /* Small Desktop */ @media (max-width: 1250px) { .section-difficulties .shell { padding: 0 20px; } .section-difficulties .col-size2 { width: 44%; } } /* Tablet */ @media (max-width: 1023px) { .section-difficulties { padding: 35px 0; } .section-difficulties .section-entry { padding-top: 0; } .section-difficulties .col { float: none; width: 100%; } .section-difficulties .col + .col { margin-top: 40px; } } /* Mobile */ @media (max-width: 767px) { .section-difficulties { padding-bottom: 0; } .section-difficulties .col + .col { margin-top: 30px; } .section-difficulties .section-entry { padding: 35px 20px; margin: 0 -20px; background: rgb(229,229,237); background: linear-gradient(to bottom, rgba(229,229,237,1) 0%,rgba(243,243,248,1) 100%); } .section-difficulties .section-entry h2:not(.section-title) { padding-bottom: 15px; margin-bottom: 7px; font-size: 32px; } .section-difficulties .section-entry h2:not(.section-title):after { width: 241px; margin-left: -120px; } .section-difficulties .section-entry h2:not(.section-title) strong { font-size: 39px; } .section-difficulties .section-entry h3:after { width: 241px; margin-left: -120px; } .section-difficulties .section-entry h3 { padding-bottom: 16px; margin-bottom: 10px; font-size: 24px; } .section-difficulties .section-entry h3 span { display: block; padding-bottom: 3px; font-size: 22px; } .section-difficulties .section-entry h3 strong { font-size: 26px; } .section-difficulties .section-title { margin: 0 -10px 10px; font-size: 25px; } .section-difficulties .section-title strong { font-size: 35px; } } /* ------------------------------------------------------------ *\ Section Stories \* ------------------------------------------------------------ */ .section-stories { position: relative; } /* ------------------------------------------------------------ *\ Section Benefits \* ------------------------------------------------------------ */ .section-benefits { position: relative; padding: 113px 0 32px; overflow: hidden; box-shadow: inset 0px 3px 73px 0px rgba(172, 172, 185, 0.5); font-size: 15px; color: #373737; } .section-benefits:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: .4; background: #e2e2ea; } .section-benefits h3 { color: #373737; margin-bottom: 25px; } .section-benefits h4 { font-size: 22px; color: #373737; text-align: center; margin-bottom: 5px; } .section-benefits .shell { position: relative; max-width: 560px; z-index: 2; } .section-benefits .shell > p { margin-bottom: 21px; line-height: 1.75; } .section-benefits .section-inner { position: relative; z-index: 2; } .section-benefits .section-actions { padding-bottom: 23px; text-align: center; } /* Tablet */ @media (max-width: 1023px) { .section-benefits { padding: 40px 0; } } /* Mobile */ @media (max-width: 767px) { .section-benefits { width: 100%; padding: 60px 0 30px; margin-top: -16px; text-align: center; } .section-benefits h3 { margin-bottom: 10px; } .section-benefits h4 { font-size: 15px; } .section-benefits .shell > p { margin-bottom: 11px; font-size: 13px; line-height: 1.48; } .section-benefits .section-actions { padding-bottom: 15px; } } /* ------------------------------------------------------------ *\ Section Videos \* ------------------------------------------------------------ */ .section-videos { position: relative; padding: 103px 0 95px; background: url(../css/images/section-bg-pattern.jpg) repeat 0 0; } .section-videos:after { content: ''; position: absolute; width: 100%; height: 50%; bottom: 0; left: 0; background-color: #fff; background: linear-gradient(rgba(255, 255, 255, 0), #fff 20%); } .section-videos h2 { font-size: 18px; line-height: 1.1; letter-spacing: 0.01em; color: #373737; position: relative; padding-bottom: 31px; margin-bottom: 6px; } .section-videos h2 strong { display: block; margin-bottom: -2px; font-size: 134px; letter-spacing: -0.03em; } .section-videos h2:after { content: ''; position: absolute; width: 490px; height: 1px; bottom: 0; left: 50%; margin-left: -245px; background: #373737; } .section-videos span { display: block; margin-bottom: 9px; font-family: 'Axis', sans-serif; font-size: 18px; letter-spacing: 0.01em; text-align: center; color: #0aa5b0; } .section-videos span em { display: inline-block; margin: 0 5px; } .section-videos .shell { position: relative; z-index: 2; } .section-videos .section-head { margin-bottom: 19px; text-align: center; } /* Tablet */ @media (max-width: 1023px) { .section-videos { padding: 70px 0; } .section-videos h2 strong { font-size: 90px; } } /* Mobile */ @media (max-width: 767px) { .section-videos { padding: 17px 0 20px; } .section-videos h2 { font-size: 13px; line-height: 1.31; padding-bottom: 11px; } .section-videos h2:after { width: 245px; margin-left: -122px; } .section-videos h2 strong { font-size: 58px; margin-bottom: -5px; } .section-videos span { position: relative; padding-top: 38px; margin-top: -10px; font-size: 13px; line-height: 1.31; } .section-videos span em { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } /* Mobile */ @media (max-width: 370px) { .section-videos h2 strong { font-size: 50px; } } /* ------------------------------------------------------------ *\ Section Tabs \* ------------------------------------------------------------ */ .section-tabs { position: relative; padding: 134px 0 122px; text-align: center; background: #f3f3f8; z-index: 2; } .section-tabs h2 { font-size: 36px; margin-bottom: 10px; } .section-tabs .shell { max-width: 1300px; } .section-tabs .shell > p { margin-bottom: 42px; font-size: 15px; line-height: 1.73; } /* Mobile */ @media (max-width: 767px) { .section-tabs { position: static; padding: 70px 0 50px; } .section-tabs h2 { font-size: 22px; line-height: 1.09; margin-bottom: 12px; } .section-tabs .shell > p { font-size: 13px; line-height: 1.46; } } /* ------------------------------------------------------------ *\ Share \* ------------------------------------------------------------ */ .share h3 { margin-bottom: 8px; } .share h3 + h4 { margin-bottom: 23px; font-family: 'Proxima Nova', sans-serif; font-size: 15px; font-weight: 400; } .share .share-inner { position: relative; min-height: 170px; padding-left: 65px; background: #fff; } .share .share-inner:after { content: ''; position: absolute; width: 3px; height: 98px; top: 50%; margin-top: -49px; right: -54px; background: #d9d9dd; } .share .share-aside { position: absolute; top: 0; left: 0; } .share .share-actions { padding-top: 10px; text-align: center; } .share .share-content { display: none; padding: 18px 45px 15px 25px; font-size: 17px; line-height: 1.9; text-align: left; } .share .share-content.active { display: block; } .share .share-content a { color: #0aa5b0; text-decoration: none; } .share .share-content a:hover { color: #434443; } /* Mobile */ @media (max-width: 767px) { .share .share-aside { position: static; width: 100%; } .share .share-inner { padding: 0; min-height: 0; } .share .share-content { padding: 10px 12px; font-size: 13px; line-height: 1.46; } } /* ------------------------------------------------------------ *\ Slider Bubbles \* ------------------------------------------------------------ */ .slider-bubbles { position: relative; padding-top: 48px; font-family: 'Axis', sans-serif; font-size: 12px; line-height: 1.17; font-weight: 800; text-align: center; } .slider-bubbles .slide-image { position: absolute; width: 90px; top: 50%; left: 0; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-bubbles .slide-inner > p { margin-bottom: 10px; } .slider-bubbles .slider-clip { position: relative; min-height: 168px; } .slider-bubbles .slider-clip:after { content: ''; position: absolute; width: 100%; height: 5px; top: 65px; left: 0; background: url(../css/images/slider-separator.png) repeat-x 0 0; } .slider-bubbles .slide-content a { position: relative; display: inline-block; width: 134px; height: 134px; padding-top: 14px; border-radius: 50%; text-decoration: none; background: #fff; transition: .5s; z-index: 2; } .slider-bubbles .slide-content a span { position: relative; display: block; min-height: 49px; margin-bottom: 3px; text-align: center; } .slider-bubbles .slide-content a em { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .slider-bubbles .slide-tooltip { position: absolute; width: 350px; bottom: 158px; left: 50%; padding: 20px 25px 10px 109px; margin-left: -175px; opacity: 0; visibility: hidden; font-family: 'Proxima Nova', sans-serif; font-size: 13px; line-height: 1.46; font-weight: 400; color: #fff; text-transform: none; text-align: left; background: rgba(10, 165, 176, .9); transition: .5s; z-index: 10; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; } .slider-bubbles .slide-tooltip:before { content: ''; position: absolute; width: 0; height: 0; top: 100%; left: 50%; margin-left: -16px; border-style: solid; border-width: 16px 16.5px 0 16.5px; border-color: #0fa9b4 transparent transparent transparent; } .slider-bubbles .slide-tooltip:after { } .slider-bubbles .slide-tooltip strong { display: block; margin-bottom: 4px; font-size: 16px; line-height: 1.38; } .slider-bubbles .owl-item:last-child { display: none; } .slider-bubbles .slider-inner { position: relative; } .slider-bubbles .slider-next { right: 148px; background-image: url(../css/images/slider-next_mobile.png); } .slider-bubbles .slider-prev { left: 148px; background-image: url(../css/images/slider-prev_mobile.png); } .slider-bubbles .slider-next, .slider-bubbles .slider-prev { position: absolute; width: 39px; height: 39px; bottom: 0; margin-top: -19px; background-size: 100% 100%; opacity: .8; transition: .5s; z-index: 10; } .slider-bubbles .slider-next:hover, .slider-bubbles .slider-prev:hover { opacity: 1; } .slider-bubbles .slide { position: relative; margin: 0 10px; } .slider-bubbles .slide:hover .slide-tooltip { opacity: 1; visibility: visible; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; } .slider-bubbles .slide:hover .slide-content a { position: relative; width: 168px; height: 168px; padding: 31px 10px 0; margin-top: -17px; background: #3ad0db; } .slider-bubbles .slides { list-style: none outside none; } .slider-bubbles .owl-stage-outer { overflow: visible; } .slider-bubbles .owl-item { -webkit-backface-visibility: visible; backface-visibility: visible; } /* Tablet */ @media (max-width: 1023px) { .slider-bubbles .slider-prev { left: 20px; } .slider-bubbles .slider-next { right: 20px; } } /* Mobile */ @media (max-width: 767px) { .slider-bubbles { padding-top: 20px; } .slider-bubbles .slide-image { display: none; } .slider-bubbles .btn-socials { border-color: #fff; color: #fff; } .slider-bubbles .socials .socials-inner { border-color: #8cd0d6; } .slider-bubbles .slide-content { text-align: center; } .slider-bubbles .slide-content a { width: 85px; height: 85px; padding-top: 10px; font-size: 8px; line-height: 1.13; } .slider-bubbles .slide-content a span { min-height: 30px; } .slider-bubbles .slider-prev, .slider-bubbles .slider-next { top: auto; bottom: -9px; margin: 0; } .slider-bubbles .slide-tooltip { position: relative; width: 325px; min-height: 230px; left: 50%; top: auto; bottom: auto; right: auto; padding: 20px; margin: 0 0 21px; -webkit-transform: rotateY(0deg) translateX(-50%); transform: rotateY(0deg) translateX(-50%); opacity: 0; text-align: center; transition: opacity .5s; } .slider-bubbles .slide-tooltip:before { width: 0; height: 0; margin-left: -7px; border-style: solid; border-width: 7px 7px 0 7px; border-color: #32aab5 transparent transparent transparent; } .slider-bubbles .slider-clip { min-height: 107px; } .slider-bubbles .slider-clip:after { bottom: 40px; top: auto; } .slider-bubbles .owl-item:not(.active) + .active .slide:hover .slide-content a, .slider-bubbles .owl-item:not(.active) + .active .slide-content a, .slider-bubbles .active + .active + .active .slide-content a { width: 85px; height: 85px; padding-top: 12px; margin-top: 0; background: #fff; } .slider-bubbles .slide:hover .slide-tooltip, .slider-bubbles .active + .active + .active .slide-tooltip { opacity: 0; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .slider-bubbles .active + .active .slide-tooltip, .slider-bubbles .owl-item:not(.active) + .active + .active .slide-tooltip { opacity: 1; -webkit-transform: rotateY(0deg) translateX(-50%); transform: rotateY(0deg) translateX(-50%); } .slider-bubbles .owl-item:not(.active) + .active + .active .slide-tooltip { opacity: 1; visibility: visible; } .slider-bubbles .active + .active .slide-content a, .slider-bubbles .slide:hover .slide-content a { width: 107px; height: 107px; padding-top: 21px; margin: -11px 0 0 0px; background: #0aa5b0; } } /* Mobile */ @media (max-width: 370px) { .slider-bubbles .slide-tooltip { width: 260px; } .slider-bubbles .owl-item .active + .active { position: relative; right: 5px; } .slider-bubbles .socials ul { width: 130px; } .slider-bubbles .active + .active .slide-content a, .slider-bubbles .slide:hover .slide-content a { position: relative; width: 90px; height: 90px; padding-top: 17px; margin: -5px 0 0 0; background: #0aa5b0; } } /* ------------------------------------------------------------ *\ Slider Videos \* ------------------------------------------------------------ */ .slider-videos { opacity: 0; padding-top: 117px; overflow: hidden; transition: .5s; } .slider-videos.loaded { opacity: 1; } .slider-videos .slider-inner { position: relative; } .slider-videos .slider-prev { left: 150px; background: url(../css/images/slider-prev.png) no-repeat 0 0; } .slider-videos .slider-next { right: 150px; background: url(../css/images/slider-next.png) no-repeat 0 0; } .slider-videos .slide-inner { position: relative; opacity: 0; visibility: hidden; transition: .5s; } .slider-videos .slide { width: 648px; } .slider-videos .slide.playing .play-btn { opacity: 0; visibility: hidden; } .slider-videos .slide.playing .slide-video:before { display: none; } .slider-videos .slide-inner { padding-top: 10px; text-align: center; } .slider-videos .slide-inner strong { display: inline-block; margin-right: 20px; vertical-align: middle; font-size: 24px; } .slider-videos .slide-inner .socials { display: inline-block; vertical-align: middle; } .slider-videos .current { -webkit-transform: translateZ(1000px) !important; transform: translateZ(1000px) !important; } .slider-videos .current .slide-video:after { opacity: 0; visibility: hidden; } .slider-videos .current .slide-inner { opacity: 1; visibility: visible; } .slider-videos .play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: scale(.6) translate(-50%, -50%); -ms-transform: scale(.6) translate(-50%, -50%); transform: scale(.6) translate(-50%, -50%); -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; z-index: 3; transition: .5s; } .slider-videos .play-btn:hover { opacity: .7; } .slider-videos .play-btn span { font-size: 0; line-height: 0; text-indent: -4004px; } .slider-videos .slide-video { position: relative; padding-top: 56%; } .slider-videos .slide-video:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); transition: .5s; z-index: 3; } .slider-videos .slide-video:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0); z-index: 3; } .slider-videos .slide-video .player { position: absolute; width: 100% !important; height: 100% !important; top: 0; left: 0; } .slider-videos .slider-head { max-width: 551px; padding: 30px 30px 22px; margin: 0 auto; text-align: center; background: #fff; } .slider-videos .slider-head h3 { margin-bottom: 7px; } .slider-videos .slider-head p { font-size: 15px; line-height: 1.75; } .slider-videos .slider-prev:hover, .slider-videos .slider-next:hover { opacity: .7; } .slider-videos .slider-prev, .slider-videos .slider-next { position: absolute; display: inline-block; width: 39px; height: 39px; top: 43%; margin-top: -19px; -webkit-transform: translateZ(1000px); transform: translateZ(1000px); background-size: 100% 100%; z-index: 10; transition: .3s; font-size: 0; line-height: 0; text-indent: -4004px; } @media(max-width: 1024px){ .slider-videos .slide-video:before, .slider-videos .play-btn { display: none; } } /* Tablet */ @media (max-width: 1023px) { .slider-videos { padding-top: 30px; } .slider-videos .slider-prev { left: 0; } .slider-videos .slider-next { right: 0; } } /* Mobile */ @media (max-width: 767px) { .slider-videos { margin: 0 -20px; } .slider-videos .slider-prev { top: auto; bottom: 28px; left: 15px; background-image: url(../css/images/slider-prev_mobile.png); } .slider-videos .slider-next { top: auto; bottom: 28px; right: 15px; background-image: url(../css/images/slider-next_mobile.png); } .slider-videos .slide { width: 296px; } .slider-videos .slider-inner strong { display: block; margin-right: 0; font-size: 18px; line-height: 1.17; } .slider-videos .ico-play-big { width: 110px; height: 110px; } .slider-videos .play-btn span { display: none; } .slider-videos .slider-head { padding: 20px 12px; margin: 0 20px; } .slider-videos .slider-head p { padding-top: 2px; font-size: 13px; line-height: 1.46; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { font-weight: 700; text-align: center; } .socials ul { margin: 0; list-style-type: none; } .socials ul:after { } .socials li { float: left; } .socials li + li { margin-left: 9px; } .socials span { display: none; } .socials p { position: relative; top: 4px; margin: 0 6px 0 0; } .socials .link-external { display: block; width: 330px; margin: 33px auto 0; } .socials ul, .socials p { display: inline-block; vertical-align: middle; } /* Modifier: Socials Secondary */ .socials-secondary p { top: 2px; margin-right: 5px; font-size: 14px; } /* Modifier: Socials Teritary */ .socials-teritary { text-align: left; } .socials-teritary p { top: 0; font-size: 9px; } /* Modifier: Socials Quaternary */ .socials-quaternary { font-size: 14px; } .socials-quaternary p { top: 1px; } /* Modifier: Socials White */ .socials-white p { top: 1px; font-size: 18px; } /* Mobile */ @media (max-width: 767px) { .socials { text-align: center; } .socials ul { width: 190px; } .socials li { position: relative; width: 33.3%; padding-bottom: 1px; background: #dedde5; } .socials li + li { margin: 0; border-left: 1px solid #afb0b4; } .socials li:first-child { background: url(../css/images/socials-trinagle.png) no-repeat 0 0; } .socials li:after { content: ''; position: absolute; top: 0; left: 3px; bottom: 0; right: 0; background: #dedde5; } .socials p { top: 0; font-size: 9px; } .socials a { position: relative; z-index: 2; } .socials .link-external { width: 100%; margin-top: 20px; } .socials .socials-inner { min-height: 21px; padding-left: 12px; vertical-align: top; border: 1px solid #a5a6a9; border-radius: 4px; overflow: hidden; } [class*="socials"] .btn-socials.active, .socials-inner { display: none; } [class*="socials"] .btn-socials, .socials-inner.active { display: inline-block; } } /* ------------------------------------------------------------ *\ Socials Quinary \* ------------------------------------------------------------ */ .socials-quinary ul { list-style-type: none; } .socials-quinary li { border-bottom: 3px solid #cdcdd4; } .socials-quinary li:last-child { border: 0; } .socials-quinary a { position: relative; display: block; width: 65px; height: 56px; background: #e5e5ed; transition: .5s; } .socials-quinary em { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .socials-quinary .current { border: 0; } .socials-quinary .current:last-child { margin-top: -3px; } .socials-quinary a:hover, .socials-quinary .current a { background: #0aa5b0; } /* Mobile */ @media (max-width: 767px) { .socials-quinary ul:after { } .socials-quinary li { float: left; width: 33.3%; border-bottom: 0; border-right: 2px solid #cdcdd4; } .socials-quinary a { width: 100%; height: 32px; } .socials-quinary .current:last-child { margin-top: 0; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table {} /* ------------------------------------------------------------ *\ Tabs \* ------------------------------------------------------------ */ .tabs .tab-back { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .tabs .tab { position: relative; display: none; } .tabs .tab.active { display: block; } .tabs .tab-teritary { padding-left: 80px; } .tabs .tab-primary { padding-left: 84px; } .tabs .tab-primary .col + .col { float: right; margin-right: 40px; } .tabs .tab-secondary { padding: 0 30px 0 100px; } .tabs .tab-secondary h3 { margin: 0 0 35px -100px; } .tabs .tab-secondary .tab-entry { text-align: left; } .tabs .tab-secondary .tab-entry p { margin-bottom: 0; } .tabs .tab-secondary .tab-entry strong { font-weight: 800; } .tabs .tab-secondary .tab-entry .btn { margin-top: 25px; } .tabs .tab-secondary .col { position: relative; } .tabs .tab-secondary .col + .col:after { content: ''; position: absolute; width: 3px; height: 263px; top: 0; left: 0; background: #d9d9dd; } .tabs .tab-secondary .col:last-child .tab-entry { padding-left: 28px; } .tabs .tabs-nav { text-align: center; } .tabs .tabs-nav ul:after { } .tabs .tabs-nav li { position: relative; float: left; width: 33.3%; } .tabs .tabs-nav li.helpthem { position: relative; float: left; width: 50%; }/*avasio added this since there are only 2 main sections*/ .tabs .tabs-nav li + li:after { content: ''; position: absolute; width: 3px; height: 98px; top: 30px; left: 0; background: #d9d9dd; } .tabs .tabs-nav span { display: block; width: 100%; min-height: 56px; margin-bottom: 10px; line-height: 56px; } .tabs .tabs-nav strong { display: block; } .tabs .tabs-nav a:not(.btn) { display: block; margin-bottom: 12px; font-family: 'Axis', sans-serif; font-size: 20px; text-transform: uppercase; text-decoration: none; transition: .3s; } .tabs .tabs-nav a:not(.btn):hover { opacity: .7; } .tabs .tabs-nav-secondary li { padding: 0 55px; } .tabs .tabs-nav-secondary strong { margin-bottom: 7px; line-height: 1.3; } .tabs .tabs-nav-secondary p { margin-bottom: 15px; } /* Tablet */ @media (max-width: 1023px) { .tabs .tab-secondary .col, .tabs .tab-primary .col + .col, .tabs .tab-primary .col { float: none; width: 100%; } .tabs .tab-secondary { padding: 0 0 0 70px; } .tabs .tab-secondary h3 { margin-left: -70px; } .tabs .tab-secondary .col:last-child .tab-entry { padding-left: 0; } .tabs .tab-secondary .col + .col:after { display: none; } .tabs .tabs-nav-secondary li { float: none; width: 100%; } .tabs .tabs-nav-secondary li + li { margin-top: 40px; } .tabs .tabs-nav-secondary li + li:after { width: 100%; height: 2px; top: -17px; left: 0; } } /* Mobile */ @media (max-width: 767px) { .tabs .tab-teritary, .tabs .tab-primary { padding-left: 56px; } .tabs .tab-teritary { padding-right: 20px; } .tabs .tab-teritary { text-align: left; } .tabs .tab-teritary h3 { text-align: center; margin-left: -55px; } .tabs .tab-secondary { padding-left: 55px; } .tabs .tab-secondary h3 { margin: 0 0 20px -55px; } .tabs .tab-secondary .tab-entry { font-size: 13px; line-height: 1.46; } .tabs .tab-secondary .btn { padding: 0 14px; font-size: 11px; } .tabs .tab-secondary .btn em { position: relative; top: -2px; } .tabs .tabs-nav span { min-height: 30px; margin-bottom: 4px; line-height: 30px; } .tabs .tabs-nav a:not(.btn) { margin-bottom: 6px; } .tabs .tabs-nav .btn { width: 148px; height: 32px; border-radius: 5px; line-height: 30px; } .tabs .tabs-nav strong { font-size: 17px; } .tabs .tabs-nav li { float: none; width: 100%; } .tabs .tabs-nav li.helpthem { float: none; width: 100%; }/*avasio added this since there are only 2 main sections*/ .tabs .tabs-nav li + li { margin-top: 30px; } .tabs .tabs-nav li + li:after { width: 190px; height: 1px; top: -13px; left: 50%; margin-left: -95px; } .tabs .tabs-nav-secondary { text-align: left; } .tabs .tabs-nav-secondary li { padding: 0; } .tabs .tabs-nav-secondary li + li:after { width: 100%; left: 0; margin-left: 0; } .tabs .tabs-nav-secondary .btn { padding: 0 15px; } .tabs .tabs-nav-secondary .btn em { position: relative; top: -1px; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Socials \* ------------------------------------------------------------ */ .widget-social { position: relative; padding-top: 40px; font-size: 15px; line-height: 1.73; } .widget-social h5 { font-family: 'Axis', sans-serif; font-size: 20px; line-height: 1.3; font-weight: 800; text-transform: uppercase; padding: 14px 0 6px; margin: 0 -10px; } .widget-social p { margin-bottom: 20px; } /* Mobile */ @media (max-width: 767px) { .widget-social { position: relative; padding: 20px 0 0 50px; margin-top: 23px; border-top: 1px solid #d9d9dd; text-align: left; } .widget-social h5 { font-size: 16px; line-height: 1.13; margin: 0; } .widget-social p { margin-bottom: 8px; font-size: 13px; line-height: 1.46; } .widget-social em { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .link-external { visibility:hidden; } a.footnotelink { display:inline-block; margin-left:2px; width:12px; height:12px; background:rgba(255,255,255,1); border:#ccc solid 1px; font-family: Segoe, "Segoe UI", "Trebuchet MS", Verdana, sans-serif; font-weight:normal; font-size:9px; line-height:9px; color:#333333; text-decoration:none; } a.footnotelink:hover { background:rgba(255,255,255,.8); } /*override*/ .ico-crowd { display:block !important; margin: 0 auto !important; align-self:center; }