/** * DarkStar * Theme CSS * Author: Dragan Milenkovic * Copyright - 2022 Skilltech Web Design - skilltechwebdesign.com * -------------------------------------------------------------- * 1. Priority Load * 2. Overrides / Enhances * 3. Structure * 4. Navigation Menus * 5. Fonts * 6. Forms and Buttons * 7. General (transitions, sections, images, reusable style classes) * 8. Hero Section * 9. Half-screen Sections (parallax images, text, parallax text) * 10. Numbers Section * 11. About Us Section * 12. Partners Section * 13. Portfolio Section * 14. Featured Project Section * 15. Features Section * 16. Laptop Section * 17. Services Section * 18. Skills Section (& Testimonials Section) * 19. CTA Section (Warped CTA) * 20. Contact Us Section * 21. Browsers Section * 22. Custom Animations, Effects & Decorations * 23. Footer * 24. PAGE: Portfolio Item * 25. PAGE: Service Item * 26. PAGE: News (Blog) * 27. PAGE: News Item (Article) * 28. Media Queries * 29. Other * 30. Theme Elements & Theme Preview Only CSS * --------------------------------- * -- Colors are in theme-colors.css * --------------------------------- * -- Gear menu is in theme-preview-color-styler.css * ------------------------------------------------- */ /** * 1. Priority Load * ================ */ .sk__master-curtain { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 10001; background-color: #000000; } .mcurtain { opacity: 0; position: absolute; width: 34%; height: 100%; top: 0; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); background-size: cover; background-position: center; background-repeat: no-repeat; } .mcurtain.mcurtain-visible { -webkit-transition: all 0.8s ease-in 0s; -o-transition: all 0.8s ease-in 0s; transition: all 0.8s ease-in 0s; opacity: 1; } .mcurtain-left { left: 0; background-image: url(../images/curtain-background-left.svg); } .mcurtain-center { background-image: url(../back.png); left: 33.333%; } .mcurtain-right { background-image: url(../images/curtain-background-right.svg); left: 66.666%; } .sk__master-curtain { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 10000; } @-webkit-keyframes slowZoom { 0% { background-color: #0A0A0A; -webkit-transform: scale(1); transform: scale(1); } 20% { background-color: #0A0A0A; -webkit-transform: scale(1.02); transform: scale(1.02); } 85% { background-color: #0A0A0A; -webkit-transform: scale(1.085); transform: scale(1.085); } 100% { background-color: rgba(10,10,10,0); -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes slowZoom { 0% { background-color: #0A0A0A; -webkit-transform: scale(1); transform: scale(1); } 20% { background-color: #0A0A0A; -webkit-transform: scale(1.02); transform: scale(1.02); } 85% { background-color: #0A0A0A; -webkit-transform: scale(1.085); transform: scale(1.085); } 100% { background-color: rgba(10,10,10,0); -webkit-transform: scale(1.1); transform: scale(1.1); } } .sk__master-curtain { -webkit-transform-origin: 50% 70%; -ms-transform-origin: 50% 70%; transform-origin: 50% 70%; -webkit-animation: slowZoom 3s ease-out 0s forwards; animation: slowZoom 3s ease-out 0s forwards; } /* Innitially hidden elements, revealed with JS */ [class*=sk__fade-in-], .sk__mobile-main-logo, .navbar-brand, .hc-nav-trigger, .sk__mobile-menu-bar, .sk__body-section, .sk__services-page .sk__iconbox .sk__iconbox-icon-link, .sk__services-page .sk__iconbox .sk__iconbox-text-link, .sk__services-page .sk__iconbox > p, .sk__proj-infobox-label, .sk__proj-infobox-value { opacity: 0; } /** * Wrapper for text that will have clip-style reveal effect. * If you wrap your text into .cover-text-wrapper use JS to * reveal it. Use scrollRevealText() and revealText() functions, * examples are already in the JS file. * * A container div/section with class .sk__reveal-all-wrapped-text * will automatically reveal all text children wrapperd in * .cover-text-wrapper class */ .cover-text-wrapper { position: relative; overflow: hidden; } .cover-text-wrapper > * { opacity: 0; } /** * Animated Headlines */ .sk__animated-headline-words { -webkit-perspective: 388px; perspective: 388px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; display: inline-block; position: relative; text-align: center; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .sk__animated-headline-words span.lvl2 { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; padding: 0 5px; } .sk__animated-headline-words span.lvl2.sk__visible { position: relative; } .sk__animated-headline span.lvl1 { display: inline-block; } .sk__animated-headline span.lvl1:not(.sk__animated-headline-words) { padding: 0; } .sk__animated-headline .sk__animated-headline-words { overflow: hidden; vertical-align: top; padding: 0.21em 0 0.21em 15px; margin: -0.21em -5px -0.21em -20px; } .sk__animated-headline span.lvl2 { opacity: 0; top: 0.2em; } .sk__animated-headline span.lvl2.sk__visible { top: 0; opacity: 1; -webkit-transform-origin: center 90%; -ms-transform-origin: center 90%; transform-origin: center 90%; -webkit-animation: slideFromBottom 0.45s ease-out 0s; animation: slideFromBottom 0.45s ease-out 0s; } .sk__animated-headline span.lvl2.sk__hidden { -webkit-transform-origin: center 0%; -ms-transform-origin: center 0%; transform-origin: center 0%; -webkit-animation: slideToTop 0.4s ease-in 0s; animation: slideToTop 0.4s ease-in 0s; } @-webkit-keyframes slideToTop { 0% { opacity: 1; -webkit-transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); } 50% { opacity: 0.3; -webkit-transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); } 100% { opacity: 0; -webkit-transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); } } @keyframes slideToTop { 0% { opacity: 1; -webkit-transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); } 50% { opacity: 0.3; -webkit-transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); } 100% { opacity: 0; -webkit-transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); } } @-webkit-keyframes slideFromBottom { 0% { opacity: 0; -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); } 14.28% { opacity: 0; -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); } 35% { opacity: 1; -webkit-transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); } 50% { opacity: 1; -webkit-transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); } 100% { opacity: 1; -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); } } @keyframes slideFromBottom { 0% { opacity: 0; -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); } 14.28% { opacity: 0; -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); } 35% { opacity: 1; -webkit-transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); } 50% { opacity: 1; -webkit-transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); } 100% { opacity: 1; -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); } } /** * 2. Overrides / Enhances * ======================= */ /** * Override bootstrap's scroll-behavior rule * to avoid conflict with GSAP ScrollSmoother */ @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: initial; } } /** * Custom theme bootstrap containers * container < super < power < ultra */ @media all and (min-width: 1500px) { .sk__supercontainer.container, .sk__supercontainer.container-lg, .sk__supercontainer.container-md, .sk__supercontainer.container-sm, .sk__supercontainer.container-xl { max-width: 1460px; } } @media all and (min-width: 1500px) and (max-width: 1779px) { .sk__powercontainer.container, .sk__powercontainer.container-lg, .sk__powercontainer.container-md, .sk__powercontainer.container-sm, .sk__powercontainer.container-xl, .sk__ultracontainer.container, .sk__ultracontainer.container-lg, .sk__ultracontainer.container-md, .sk__ultracontainer.container-sm, .sk__ultracontainer.container-xl { max-width: 1460px; } } @media all and (min-width: 1780px) and (max-width: 1920px) { .sk__powercontainer.container, .sk__powercontainer.container-lg, .sk__powercontainer.container-md, .sk__powercontainer.container-sm, .sk__powercontainer.container-xl, .sk__ultracontainer.container, .sk__ultracontainer.container-lg, .sk__ultracontainer.container-md, .sk__ultracontainer.container-sm, .sk__ultracontainer.container-xl { max-width: 1740px; } } @media all and (min-width: 1921px) { .sk__powercontainer.container, .sk__powercontainer.container-lg, .sk__powercontainer.container-md, .sk__powercontainer.container-sm, .sk__powercontainer.container-xl { max-width: 1740px; } .sk__ultracontainer.container, .sk__ultracontainer.container-lg, .sk__ultracontainer.container-md, .sk__ultracontainer.container-sm, .sk__ultracontainer.container-xl { max-width: 1910px; } } @media all and (max-width: 575px) { /* xs */ .row > * { padding-left: 20px; padding-right: 20px; } } /** * 3. Structure * ============ */ .px-15px { padding-left: 15px; padding-right: 15px; } .mw-660 { max-width: 660px; } .mw-560 { max-width: 560px; } .mw-440 { max-width: 440px; } .mw-320 { max-width: 320px; } /** * Vertical paddings suitable for header sections * y assigns both top and bottom padding, * t assigns top and b bottom padding only. * m = medium (normal) padding, l = large padding */ .sk__header-y-m, .sk__header-t-m { padding-top: 190px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 128px; } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__header-y-m, .sk__header-t-m { padding-top: 125px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 78px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__header-y-m, .sk__header-t-m { padding-top: 190px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 80px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__header-y-m, .sk__header-t-m { padding-top: 190px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 96px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__header-y-m, .sk__header-t-m{ padding-top: 120px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 60px; } } @media all and (max-width: 575px) { /* xs */ .sk__header-y-m, .sk__header-t-m { padding-top: 114px; } .sk__header-y-m, .sk__header-b-m { padding-bottom: 52px; } } .sk__header-y-l, .sk__header-t-l { padding-top: 284px; } .sk__header-y-l, .sk__header-b-l { padding-bottom: 238px; } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__header-y-l .sk__header-t-l { padding-top: 176px; } .sk__header-y-l .sk__header-b-l { padding-bottom: 115px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__header-y-l .sk__header-t-l { padding-top: 176px; } .sk__header-y-l .sk__header-b-l { padding-bottom: 91px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__header-y-l .sk__header-t-l { padding-top: 284px; } .sk__header-y-l .sk__header-b-l { padding-bottom: 206px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__header-y-l .sk__header-t-l { padding-top: 123px; } .sk__header-y-l .sk__header-b-l { padding-bottom: 53px; } } @media all and (max-width: 575px) { /* xs */ .sk__header-y-l .sk__header-t-l { padding-top: 130px; } .sk__header-y-l .sk__header-b-l { padding-bottom: 65px; } } /** * Vertical paddings suitable for body sections * py = both top and bottom paddings * pt = top padding, pb = bottom padding * s = small paddings, m = medium, l = large, * xl = extra large */ .sk__py-s, .sk__pt-s { padding-top: 100px; } .sk__py-m, .sk__pt-m { padding-top: 140px; } .sk__py-l, .sk__pt-l { padding-top: 170px; } .sk__py-xl, .sk__pt-xl { padding-top: 300px; } .sk__py-s, .sk__pb-s { padding-bottom: 50px; } .sk__py-m, .sk__pb-m { padding-bottom: 160px; } .sk__py-l, .sk__pb-l { padding-bottom: 170px; } .sk__py-xl, .sk__pb-xl { padding-bottom: 230px; } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__py-l, .sk__pt-l { padding-top: 140px; } .sk__py-xl, .sk__pt-xl { padding-top: 160px; } .sk__py-l, .sk__pb-l { padding-bottom: 140px; } .sk__py-xl, .sk__pb-xl { padding-bottom: 160px; } } @media all and (max-width: 767px) { /* custom xs + sm */ .sk__py-xl, .sk__pt-xl { padding-top: 125px; padding-top: 80px; } .sk__py-xl, .sk__pb-xl { padding-bottom: 115px; padding-bottom: 50px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__py-m, .sk__pt-m, .sk__py-l, .sk__pt-l { padding-top: 100px; } .sk__py-m, .sk__pb-m, .sk__py-l, .sk__pb-l { padding-bottom: 100px; } } @media all and (max-width: 575px) { /* xs */ .sk__py-s, .sk__pt-s { padding-top: 60px; } .sk__py-m, .sk__pt-m { padding-top: 60px; } .sk__py-l, .sk__pt-l { padding-top: 70px; } .sk__py-s, .sk__pb-s { padding-bottom: 50px; } .sk__py-m, .sk__pb-m { padding-bottom: 60px; } .sk__py-l, .sk__pb-l { padding-bottom: 60px; } } /** * Vertical paddings for header within a body section */ .sk__inner-header { padding-bottom: 48px; } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__inner-header { padding-bottom: 48px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__inner-header { padding-bottom: 24px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__inner-header { padding-bottom: 16px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__inner-header { padding-top: 24px; padding-bottom: 40px; } } @media all and (max-width: 575px) { /* xs */ .sk__inner-header { padding-top: 24px; padding-bottom: 24px; } } /** * Vertical paddings for the simple strip header */ .sk__strip-header { padding-top: 100px; padding-bottom: 100px; } @media all and (min-width: 1200px) and (max-width: 1920px) { /* custom */ .sk__strip-header { padding-top: 84px; padding-bottom: 75px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__strip-header { padding-top: 64px; padding-bottom: 57px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__strip-header { padding-top: 64px; padding-bottom: 57px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__strip-header { padding-top: 64px; padding-bottom: 57px; } } @media all and (max-width: 575px) { /* xs */ .sk__strip-header { padding-top: 54px; padding-bottom: 47px; } } /** * Standard sections */ /** * Section that centers content vertically, * sets width to 100% and position to relative. * For other use, see flex-center, flex-center-x * and flex-center-y */ section.sk__centered-section, /* deprecated, use Y class */ section.sk__centered-y-section, .sk__centered-section, /* deprecated, use Y class */ .sk__centered-y-section { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } /* Full height */ .sk__full-height { height: 100vh; } /** * Absolutely positioned child/inner element that fills the entire * parent (parent should have 'position': 'relative' or 'fixed') */ .sk__absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** * Align children to center (horizontally and vertically) using display flex */ .sk__flex-center, .sk__hero-item-theme-style.sk__flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /** * Align children to center (horizontally) using display flex */ .sk__flex-center-x { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /** * Align children to center (vertically) using display flex * (Section that centers content vertically - new) */ .sk__flex-center-y { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /** * Prepare for flex alignment of children, but don't specify alignment */ .sk__flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } /* Heading spacers (bottom paddings) */ .sk__heading-spacer-xs { padding-bottom: 20px; } .sk__heading-spacer-s { padding-bottom: 60px; } .sk__heading-spacer-m { padding-bottom: 90px; } .sk__heading-spacer-l { padding-bottom: 110px; } .sk__heading-spacer-xl { padding-bottom: 110px; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__heading-spacer-s { padding-bottom: 60px; } .sk__heading-spacer-m { padding-bottom: 70px; } .sk__heading-spacer-l { padding-bottom: 80px; } .sk__heading-spacer-xl { padding-bottom: 80px; } } @media all and (max-width: 575px) { /* xs */ .sk__heading-spacer-xs { padding-bottom: 10px; } .sk__heading-spacer-s { padding-bottom: 30px; } .sk__heading-spacer-m { padding-bottom: 50px; } .sk__heading-spacer-l { padding-bottom: 50px; } .sk__heading-spacer-xl { padding-bottom: 50px; } } @media all and (min-width: 1921px) { .sk__heading-spacer-xl { padding-bottom: 150px; } } /** * Z-index helper classes */ .sk__z0, .sk__hover-z0:hover { z-index: 0; } .sk__z1, .sk__hover-z1:hover { z-index: 1; } .sk__z2, .sk__hover-z2:hover { z-index: 2; } .sk__z3, .sk__hover-z3:hover { z-index: 3; } .sk__z4, .sk__hover-z4:hover { z-index: 4; } .sk__z5, .sk__hover-z5:hover { z-index: 5; } .sk__z6, .sk__hover-z6:hover { z-index: 6; } .sk__z7, .sk__hover-z7:hover { z-index: 7; } .sk__z8, .sk__hover-z8:hover { z-index: 8; } .sk__z9, .sk__hover-z9:hover { z-index: 9; } .sk__z10, .sk__hover-z10:hover { z-index: 10; } .sk__z-1, .sk__hover-z-1:hover { z-index: -1; } .sk__z-2, .sk__hover-z-2:hover { z-index: -2; } .sk__z-3, .sk__hover-z-3:hover { z-index: -3; } .sk__z-4, .sk__hover-z-4:hover { z-index: -4; } .sk__z-5, .sk__hover-z-5:hover { z-index: -5; } .sk__z-6, .sk__hover-z-6:hover { z-index: -6; } .sk__z-7, .sk__hover-z-7:hover { z-index: -7; } .sk__z-8, .sk__hover-z-8:hover { z-index: -8; } .sk__z-9, .sk__hover-z-9:hover { z-index: -9; } .sk__z-10, .sk__hover-z-10:hover { z-index: -10; } /* * 4. Navigation Menus * =================== * Match Mobile & Desktop media queries * to 'disableAt' in theme.js file. * See documentation for more info. */ .sk__logo-no-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 4; } @media all and (max-width: 767px) { /* xs + sm */ .sk__logo-no-menu { height: 60px; } } .sk__logo-no-menu img { height: 100%; width: auto; } nav a em { font-style: initial; font-weight: 700; } .sk__navbar { -webkit-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; border-bottom: 1px solid rgba(255,255,255,0.07); } body.sk__scrolling-started .sk__navbar { background-color: rgba(0,0,0,0.94); border-bottom: 1px solid rgba(255,255,255,0.13); } /* menu icons */ span.sk__menu-icon { display: inline-block; position: relative; width: 16px; height: 24px; margin-right: 10px; margin-bottom: -6px; border-radius: 12px; font-size: 14px; color: #afb1b5; } span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) { background: transparent; } span.sk__menu-icon.accented { background: #71797c; } span.sk__menu-icon.accented, span.sk__menu-icon.sk__gradient-back-v1 { width: 24px; margin: 0 8px -6px -3px; color: #ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } span.sk__menu-icon i, span.sk__menu-icon span[class^="icon-"] { text-align: center; line-height: 24px; } span.sk__menu-icon.green i, span.sk__menu-icon.green span[class^="icon-"] { color: #6fd105; } span.sk__menu-icon.accented i, span.sk__menu-icon.sk__gradient-back-v1 i, span.sk__menu-icon.accented span[class^="icon-"], span.sk__menu-icon.sk__gradient-back-v1 span[class^="icon-"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 24px; font-size: 13px; text-align: center; } span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) i, span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) span[class^="icon-"] { position: inherit; width: auto; } .sk__icon-popup-text { position: absolute; top: 34px; left: -50%; left: 18px; min-width: 172px; line-height: 23px; -webkit-transition: all 0.3s ease 0.3s, color 0.4s ease 0s; -o-transition: all 0.3s ease 0.3s, color 0.4s ease 0s; transition: all 0.3s ease 0.3s, color 0.4s ease 0s; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); color: rgba(255,255,255,0); background: rgba(26,27,28,0.97); padding: 0; font-size: 0; } .nav-item:last-child .sk__icon-popup-text { top: -52px; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .nav-item:nth-last-child(2) .sk__icon-popup-text { top: -22px; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .sk__icon-popup:hover .sk__icon-popup-text { -webkit-transition: all 0.4s ease 0s, color 0.3s ease 0.3s; -o-transition: all 0.4s ease 0s, color 0.3s ease 0.3s; transition: all 0.4s ease 0s, color 0.3s ease 0.3s; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; padding: 10px 12px; font-size: 13px; color: #ffffff; } /* * Mobile Menu * =========== * done with off-canvas-menu, * there are only additions & overrides */ @media all and (max-width: 1899px) { /* menu crossover (-1) */ .sk__mobile-menu-bar { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; position: fixed; top: 0; left: 0; width: 100%; height: 100px; border-bottom: 1px solid rgba(255,255,255,0.12); z-index: 9998; } body.sk__scrolling-started .sk__mobile-menu-bar { border-bottom: 1px solid rgba(255,255,255,0); } body.sk__scrolling-started.sk__solid-menu .sk__mobile-menu-bar { background-color: rgba(0,0,0,0.94); border-bottom: 1px solid rgba(255,255,255,0.13); } .sk__mobile-main-logo { position: fixed; top: 0; left: 0; z-index: 9998; -webkit-filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); -webkit-backface-visibility: hidden; } .sk__mobile-main-logo img { width: auto; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } body.sk__nav-open .sk__mobile-main-logo { opacity: 0 !important; } .hc-offcanvas-nav { font-family: 'Poppins', sans-serif; } .nav-content { padding: 10px; background: #000000; border-left: 1px solid #212528; } .hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a, .hc-offcanvas-nav .nav-content > .nav-close a { font-size: 13px; } .hc-offcanvas-nav .nav-back span::before { margin-left: 0px; -webkit-transform: translate(-50%, -50%) rotate(135deg); -ms-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } .hc-offcanvas-nav .nav-content > h2, .hc-offcanvas-nav .nav-content > h3, .hc-offcanvas-nav .nav-content > h4, .hc-offcanvas-nav .nav-content > h5, .hc-offcanvas-nav .nav-content > h6 { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; margin-bottom: 0; font-size: 16px; font-weight: 700; text-transform: uppercase; padding: 32px 17px 22px; } body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { padding: 13px 17px 11px; } .hc-nav-trigger { width: 35px; height: 30px; position: fixed; top: 36px; right: 37px; cursor: pointer; display: inline-block; -webkit-transition: 0.4s ease 0s; -o-transition: 0.4s ease 0s; transition: 0.4s ease 0s; z-index: 9999; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .hc-nav-trigger.toggle-open { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); right: 16px; top: 38px; } .hc-nav-trigger span, .hc-nav-trigger span:before, .hc-nav-trigger span:after { background-color:#FFF; position: absolute; border-radius: 2px; -webkit-transition: .3s cubic-bezier(.8, .5, .2, 1.4); -o-transition: .3s cubic-bezier(.8, .5, .2, 1.4); transition: .3s cubic-bezier(.8, .5, .2, 1.4); width:100%; height: 4px; } .hc-nav-trigger span { top:0px; left: 0px; } .hc-nav-trigger span:before { top:13px; left: 0px; } .hc-nav-trigger span:after { top: 26px; left: 0px; } .hc-nav-trigger:not(.toggle-open) span { -webkit-filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); } .hc-nav-trigger.toggle-open span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); top: 13px; } .hc-nav-trigger.toggle-open span:before { -webkit-transition-duration: 50ms; -o-transition-duration: 50ms; transition-duration: 50ms; } .hc-nav-trigger.toggle-open span::before { -webkit-transform: translate3d(0, -12px, 0); transform: translate3d(0, -12px, 0); } .hc-nav-trigger.toggle-open span:after { top: 13px; } .hc-nav-trigger.toggle-open span::after { -webkit-transform: rotate(-90deg) translate3d(12px, 0, 0); transform: rotate(-90deg) translate3d(12px, 0, 0); } a.hc-nav-trigger:focus { outline: none; } /* use disableBody:true CSS even with disableBody:false */ .hc-offcanvas-nav.nav-open::after, .hc-offcanvas-nav .sub-level-open::after { visibility: visible; opacity: 1; -webkit-transition-delay: .05s; -o-transition-delay: .05s; transition-delay: .05s; } .hc-offcanvas-nav::after { position: fixed; } .hc-offcanvas-nav::after, .hc-offcanvas-nav .nav-wrapper::after { content: ''; z-index: 9990; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -ms-scroll-chaining: none; overscroll-behavior: none; visibility: hidden; opacity: 0; -webkit-transition: visibility 0s ease .4s,opacity .4s ease; -o-transition: visibility 0s ease .4s,opacity .4s ease; transition: visibility 0s ease .4s,opacity .4s ease; } /* Mobile menu items background, mobile menu item background */ .hc-offcanvas-nav .nav-container, .hc-offcanvas-nav .nav-wrapper, .hc-offcanvas-nav ul { background: #000000; } .hc-offcanvas-nav .nav-content > .nav-close:first-child a, .hc-offcanvas-nav .nav-title + .nav-close a.has-label, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a { -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; background: #0f0f10; border-top: 1px solid #1b1e20; } .hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a { padding: 3px 17px; } .hc-offcanvas-nav .nav-content > ul > li > .nav-item-wrapper > .nav-item-link { padding: 8px 17px; } .hc-offcanvas-nav .nav-content > ul > li.nav-parent.level-open .nav-item-wrapper > .nav-item-link { padding: 3px 17px; } .hc-offcanvas-nav .nav-content > .nav-close:first-child a:hover, .hc-offcanvas-nav .nav-title + .nav-close a.has-label:hover, .hc-offcanvas-nav li.nav-close a:hover, .hc-offcanvas-nav .nav-back a:hover { background: #09090a; color: #ffffff; } .hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover { background: #09090a; } .hc-offcanvas-nav .nav-content > .nav-close a:hover { border-left: 0px solid #0e171f; } .hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a, .hc-offcanvas-nav a.nav-next { border-bottom: 1px solid #1d1d1e; } .hc-offcanvas-nav .nav-wrapper-0 > .nav-content > ul:first-of-type > li:first-child:not(.nav-back):not(.nav-close) > .nav-item-wrapper > .nav-item-link { border-top: 1px solid #1d1d1e; } .hc-offcanvas-nav .nav-content > h2, .hc-offcanvas-nav .nav-content > h3, .hc-offcanvas-nav .nav-content > h4, .hc-offcanvas-nav .nav-content > h5, .hc-offcanvas-nav .nav-content > h6 { color: #ffffff; } .hc-offcanvas-nav .nav-close-button span, .hc-offcanvas-nav .nav-parent .nav-next, .hc-offcanvas-nav .nav-back span { -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .hc-offcanvas-nav a.nav-next { border-left: none; } .hc-offcanvas-nav .nav-wrapper-0>.nav-content>ul:not(:last-child) { border-bottom: 0px solid #1d1d1e; } .hc-offcanvas-nav .nav-close-button span::before { margin-left: -6px; } .hc-offcanvas-nav::after, .hc-offcanvas-nav .nav-wrapper::after { background: rgba(0,0,0,0.85); } .hc-offcanvas-nav .nav-custom-content { border-bottom: 0px solid #1d1d1e; } li.nav-item.nav-item-custom { background: #000000; } .nav-custom-content .footer-socials-section { padding-top: 10px; } .nav-custom-content .footer-socials-section h3 { font-size: 19px; margin-bottom: 0; } .nav-custom-content .footer-socials-section .footer-socials a { font-size: 12px; margin: 0 3px 8px 0; width: 35px; height: 35px; line-height: 34px; } /* If close buttons are set to false in JS */ li.custom-content.sk__mobile-menu-logo > div { padding: 0; } li.custom-content.sk__mobile-menu-logo { position: absolute; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; top: 19px; padding-left: 15px; width: 100%; background: #101112; border-bottom: 1px solid #1b1e20; } .sk__mobile-menu-logo img { height: 66px; width: auto; } ul.navbar-nav { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; margin-top: 86px; overflow: hidden; } ul.sk__sub-submenu-ul, ul.sk__submenu-ul { margin-top: 10px; } /** * decrease right padding on mobile links so that more text * could fit in before collapsing into next line */ .hc-offcanvas-nav li.nav-parent .nav-item-link:last-child { padding-right: 26px; } /* fix for chrome blurry 3d translate */ .pushable-content { -webkit-font-smoothing: subpixel-antialiased; } } /** * Mobile Menu - XS Only * --------------------- */ @media all and (max-width: 767px) { .sk__mobile-menu-bar { height: 60px; } body.sk__scrolling-started .sk__mobile-menu-bar { height: 44px; background-color: rgba(0,0,0,0.94); border-bottom: 1px solid rgba(255,255,255,0.13); } .sk__mobile-main-logo img { height: 60px; } body.sk__scrolling-started .sk__mobile-main-logo img { height: 44px; } .hc-nav-trigger { top: 17px; right: 15px; -webkit-transform: scale(0.76); -ms-transform: scale(0.76); transform: scale(0.76); } .hc-nav-trigger.toggle-open { top: 37px; right: 10px; -webkit-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } body.sk__scrolling-started .hc-nav-trigger { top: 1px; right: -2px; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); top: 8px; right: 6px; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } body.sk__scrolling-started .hc-nav-trigger.toggle-open { top: 20px; right: 10px; -webkit-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } body.sk__scrolling-started li.custom-content.sk__mobile-menu-logo { top: 0; } body.sk__scrolling-started ul.navbar-nav { margin-top: 66px; } body.sk__scrolling-started .nav-back { margin-top: 10px; } } /* * Mobile Menu - MEDIUM Only * ------------------------- */ @media all and (min-width: 768px) and (max-width: 991px) { body.sk__scrolling-started .sk__mobile-menu-bar { height: 60px; background-color: rgba(0,0,0,0.94); border-bottom: 1px solid rgba(255,255,255,0.13); } .sk__mobile-main-logo img { height: 100px; } body.sk__scrolling-started .sk__mobile-main-logo img { height: 60px; } .hc-offcanvas-nav .nav-content > h2, .hc-offcanvas-nav .nav-content > h3, .hc-offcanvas-nav .nav-content > h4, .hc-offcanvas-nav .nav-content > h5, .hc-offcanvas-nav .nav-content > h6 { padding: 32px 17px 22px; } body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { padding: 13px 17px 11px; } .nav-back { margin-top: 11px; } body.sk__scrolling-started .hc-nav-trigger { top: 17px; right: 15px; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .hc-nav-trigger.toggle-open { -webkit-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } body.sk__scrolling-started .hc-nav-trigger.toggle-open { -webkit-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); top: 20px; } ul.navbar-nav { margin-top: 86px; } body.sk__scrolling-started ul.navbar-nav { margin-top: 66px; } body.sk__scrolling-started li.custom-content.sk__mobile-menu-logo { top: 0; } body.sk__scrolling-started ul.navbar-nav { margin-top: 66px; } } /* * Mobile Menu - LARGE Only * ------------------------ */ @media all and (min-width: 992px) and (max-width: 1900px) { body.sk__scrolling-started .sk__mobile-menu-bar { height: 72px; } .sk__mobile-main-logo img { height: 100px; width: auto; } body.sk__scrolling-started .sk__mobile-main-logo img { height: 72px; } body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { padding: 32px 17px 22px; } .nav-back { margin-top: 11px; } .hc-nav-trigger:not(.toggle-open) { top: 36px; right: 34px; -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } .hc-nav-trigger.toggle-open { -webkit-transform: scale(0.75) rotate(45deg); -ms-transform: scale(0.75) rotate(45deg); transform: scale(0.75) rotate(45deg); } body.sk__scrolling-started .hc-nav-trigger { top: 23px; right: 26px; -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } body.sk__scrolling-started .hc-nav-trigger.toggle-open { top: 38px; right: 16px; -webkit-transform: scale(0.75) rotate(45deg); -ms-transform: scale(0.75) rotate(45deg); transform: scale(0.75) rotate(45deg); } } /* * Mobile Menu - EXTRA LARGE Only * ------------------------------ */ /* @media all and (min-width: 1921px) and (max-width: 1999px) { menu crossover (-1) if disableAt is 1923 or higher. The value goes in max-width */ @media all and (min-width: 1899px) and (max-width: 1921px) { /* menu crossover (-1) if disableAt is lower than 1923. The value goes in min-width */ .sk__mobile-main-logo img { height: 100px; width: auto; } body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { padding: 32px 17px 22px; } .nav-back { margin-top: 11px; } } /** * Mobile menu trigger on true hover-capable devices only * aka, avoid menu hamburger trigger being stuck in hover */ @media (hover: hover) and (max-width: 1899px) { /* menu crossover (-1) */ .hc-nav-trigger:not(.toggle-open):hover span { -webkit-transform: scaleX(.8); -ms-transform: scaleX(.8); transform: scaleX(.8); } .hc-nav-trigger:not(.toggle-open):hover span:before { -webkit-transform: scaleX(.5); -ms-transform: scaleX(.5); transform: scaleX(.5); } .hc-nav-trigger:not(.toggle-open):hover span:after { -webkit-transform: scaleX(.85); -ms-transform: scaleX(.85); transform: scaleX(.85); } } /* * Desktop Menu * ============ */ @media all and (min-width: 1900px) { /* menu crossover */ nav li a { display: inline-block !important; } li.custom-content.sk__mobile-menu-logo, .sk__menu-socials, .sk__mobile-main-logo { display: none; } nav.navbar.sk__navbar { position: fixed; width: 100%; margin-top: -100px; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); z-index: 4; padding: 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .sk__navbar .navbar-brand { padding: 0; margin: 0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .navbar-brand img { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; height: 100px; width: auto; } body.sk__scrolling-started .sk__navbar .navbar-brand img { height: 60px; } .sk__navbar a.nav-link { font-size: 14px; } .sk__navbar.navbar-dark .navbar-nav { margin-right: 35px; } .sk__navbar.navbar-dark .navbar-nav .nav-link { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: rgba(255,255,255,0.98); } .sk__navbar.navbar-dark .navbar-nav .active .nav-link, .sk__navbar.navbar-dark .navbar-nav .nav-link:hover, nav li a:hover em { color: rgba(255,255,255,1); } .sk__navbar.navbar-dark .navbar-nav .active .nav-link { text-decoration: underline; } .sk__navbar.navbar-dark .navbar-nav .sk__submenu-ul li > a:hover { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .sk__navbar.navbar-expand-lg .navbar-nav .nav-link { padding: 20px 19px; } .sk__navbar ul { list-style: none; padding-left: 0; } .navbar-nav li.menu-item-has-children:before { /* menu items dropdown */ font-family: icomoon; content:"\f107"; color: #ffffff; font-size: 14px; float: right; cursor: pointer; } .navbar-nav > li.menu-item-has-children:before { /* mind the > */ /* top level menu items dropdown */ -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; padding-top: 20px; padding-top: 36px; padding-right: 0px; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } body.sk__scrolling-started .navbar-nav > li.menu-item-has-children:before { /* mind the > */ padding-top: 15px; } @-webkit-keyframes sinking-rotated-dropdown-icon { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); } 25% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(9px); transform: translateY(9px); } 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); } } @keyframes sinking-rotated-dropdown-icon { 0% { -webkit-transform: translateY(3px); transform: translateY(3px); } 25% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(9px); transform: translateY(9px); } 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(3px); transform: translateY(3px); } } .navbar-nav > li > ul > .nav-subwrap > li.menu-item-has-children:not(.sk__expand-children):hover:before { -webkit-animation-name: sinking-rotated-dropdown-icon; animation-name: sinking-rotated-dropdown-icon; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: alternate; animation-direction: alternate; } .sk__navbar.navbar-expand-lg .navbar-nav > li > a.nav-link { /* top level menu links */ position: relative; text-transform: uppercase; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; padding: 20px 20px 20px 25px; padding: 36px 20px 34px 24px; font-weight: 600; } body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav > li > a.nav-link { padding: 15px 20px 15px 25px; } /* Top level menu items hover background */ .navbar-nav > li > a.nav-link:before { position: absolute; width: calc(100% + 1px); height: 100%; bottom: 0; left: 0; content: ''; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); background: rgba(255,255,255,0.1); } .navbar-nav > li.menu-item-has-children > a.nav-link:before { width: calc(100% + 9px); } .navbar-nav > li:hover > a.nav-link:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .sk__navbar.navbar-expand-lg .navbar-nav > li.menu-item-has-children > a.nav-link { /* top level menu links with submenus */ -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; padding: 20px 29px 20px 24px; padding: 36px 29px 34px 24px; } body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav > li.menu-item-has-children > a.nav-link { padding: 15px 29px 15px 24px; } .sk__navbar .navbar-nav > li > .sk__submenu-ul { /* the sub menu */ position: absolute; overflow: hidden; margin-top: 1px; -webkit-transition: all 0s ease 0.4s; -o-transition: all 0s ease 0.4s; transition: all 0s ease 0.4s; -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .sk__navbar .navbar-nav > li:hover .sk__submenu-ul { -webkit-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; } .sk__navbar .navbar-nav > li > ul > .nav-subwrap { display: block; padding: 10px 12px 10px 5px; background: rgba(0,0,0,0.87); -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul .nav-subwrap { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li { -webkit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; opacity: 0; } .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul .nav-subwrap > li { -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; opacity: 1; } .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .sk__navbar.navbar-expand-lg .navbar-nav > li > ul a.nav-link { /* sub menu links */ font-weight: 300; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px 20px; } .sk__navbar.navbar-expand-lg .navbar-nav > li:hover a.nav-link { opacity: 1 !important; } .sk__navbar.navbar-expand-lg .navbar-nav > li:hover a.nav-link:focus { outline: none; } .navbar-nav > li > ul li.menu-item-has-children:before { /* sub menu items dropdown */ padding-top: 8px; padding-right: 10px; } .navbar-nav > li > ul > .nav-subwrap > li.menu-item-has-children.sk__expand-children:before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); padding-top: 0; padding-right: 0px; padding-left: 10px; padding-bottom: 9px; } /* the sub menu */ /* since width is defined by parents, set min width in case parents are too short */ .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li a { min-width: 220px; } .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul { overflow: hidden; -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } /* Sub sub menu */ .sk__expand-children ul.sk__sub-submenu-ul { padding: 10px 0 8px; } .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul > li, .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a { -webkit-transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; -o-transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; max-height: 0; opacity: 0; } .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children li, .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children a { max-height: 38px; opacity: 1; white-space: nowrap; } .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children li span.sk__icon-popup, .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children a span.sk__icon-popup { white-space: initial; } .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a.nav-link { color: #a6aaaf; padding: 5px 10px 5px 30px; padding: 2px 10px 1px 30px; margin-right: 10px; opacity: 1; } .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li:hover > a.nav-link { color: rgba(255,255,255,1); } a.nav-link.active { color: #ffffff !important; } /* submenu line indicator */ .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li a { min-width: 232px; } ul.sk__sub-submenu-ul { position: relative; } ul.sk__sub-submenu-ul:before { content: ''; position: absolute; top: 9px; left: 26px; width: 1px; height: calc(100% - 21px); background: rgba(255,255,255,0.15); z-index: 1; } .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a.nav-link { padding: 3px 10px 1px 40px; } } /** * 5. Fonts * ======== */ /* icon font */ span[class^="icon-"] { display: inline-block; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } p { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 30px; color: #C6C6C6; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ p { font-size: 14px; line-height: 21px; } } @media all and (max-width: 575px) { /* xs */ p { font-size: 14px; line-height: 21px; } } p.p-xs { font-family: 'Poppins', sans-serif; /*font-size: 10px;*/ font-size: 11px; font-weight: 300; line-height: 19px; color: #FFFFFF; } p.p-xl { font-size: 19px; font-weight: 300; } @media all and (min-width: 1921px) { p.p-xl { font-size: 23px; } } @media all and (min-width: 768px) and (max-width: 1199px) { /* custom */ p.p-xl { font-size: 17px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ p.p-xl { font-size: 17px; line-height: 1.6; margin-bottom: 0; } } @media all and (max-width: 575px) { /* xs */ p.p-xl { font-size: 16px; line-height: 1.5; margin-bottom: 0; } } p.p-super { font-family: 'Poppins', sans-serif; font-size: 23px; line-height: 1.5; font-weight: 300; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ p.p-super { font-size: 20px; } } @media all and (min-width: 768px) and (max-width: 1399px) { /* custom */ p.p-super { font-size: 18px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ p.p-super { font-size: 16px; line-height: 1.55; } } @media all and (max-width: 575px) { /* xs */ p.p-super { font-size: 15px; } } p.p-v2 { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 30px; margin-bottom: 20px; } @media all and (max-width: 575px) { p.p-v2 { font-size: 12px; line-height: 24px; } } h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-family: 'Syncopate', sans-serif; font-weight: 900; font-size: 77px; text-transform: uppercase; letter-spacing: -5px; line-height: 1.1; } h1.h1-bright { color: #fff; } h1.h1-dark { color: #000; } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-size: 66px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-size: 56px; letter-spacing: -4.5px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-size: 70px; letter-spacing: -4px; line-height: 1.1; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-size: 38px; font-size: 39px; line-height: 50px; letter-spacing: -1.52px; } } @media all and (max-width: 575px) { /* xs */ h1, .big-abbreviated-heading, span.big-abbreviated-heading.sk__gradient-fancy-text-back { font-size: 27px; letter-spacing: -2px; line-height: 1.3; } } h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 118px; line-height: 1; } @media all and (min-width: 1400px) and (min-width: 1920px) { /* custom */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 118px; line-height: 1; } } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 94px; line-height: 1; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 90px; line-height: 1.1; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 84px; line-height: 1.1; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 68px; line-height: 1.1; } } @media all and (max-width: 575px) { /* xs */ h1.h1-mega, span.h1-mega.sk__gradient-fancy-text-back { font-size: 12.4vw; font-size: 10.7vw; line-height: 1.3; } } h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 102.75px; letter-spacing: -5.1px; text-transform: inherit; line-height: 1.35; margin-bottom: 0.3em; } h1.super-heading.shadowed, span.super-heading.sk__gradient-fancy-text-back.shadowed { color: #000000; opacity: 0.59; text-shadow: -6px 11px 5px rgba(0,0,0,1); } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-size: 92px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-size: 70px; letter-spacing: -4.1px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { line-height: 1.12; margin-bottom: 0.4em; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__rings-section h1.super-heading, .sk__rings-section span.super-heading.sk__gradient-fancy-text-back { font-size: 85px; letter-spacing: -5.1px; line-height: 120%; margin-bottom: 0.2em; } .sk__single-article h1.super-heading, .sk__single-article span.super-heading { font-size: 59px; letter-spacing: -2px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-size: 70px; letter-spacing: -4.1px; line-height: 1.25; } } @media all and (min-width: 501px) and (max-width: 575px) { /* custom xs */ h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-size: 49px; letter-spacing: -3px; line-height: 1.25; } } @media all and (max-width: 500px) { /* custom xxs */ .sk__rings-section h1.super-heading, .sk__rings-section span.super-heading.sk__gradient-fancy-text-back { font-size: 44px; } h1.super-heading, span.super-heading.sk__gradient-fancy-text-back { font-size: 40px; letter-spacing: -2px; line-height: 1.2; } } h1.h1-small, span.h1-small.sk__gradient-fancy-text-back { font-family: 'Syncopate', sans-serif; font-weight: 900; font-size: 38px; font-size: 39px; letter-spacing: -1.52px; color: #FFFFFF; } @media all and (max-width: 575px) { /* xs */ h1.h1-small, span.h1-small.sk__gradient-fancy-text-back { font-size: 24px; letter-spacing: -1px; } } h2, h2.h2-regular, span.h2-regular.sk__gradient-fancy-text-back { font-family: 'Poppins', sans-serif; font-size: 24px; line-height: 1.4; margin-bottom: 0.9em; letter-spacing: -0.24px; color: #FFFFFF; } ol.sk__legal { font-size: 24px; line-height: 1.4; margin-bottom: 0.9em; } @media all and (max-width: 575px) { /* xs */ h2, h2.h2-regular, span.h2-regular.sk__gradient-fancy-text-back, ol.sk__legal { font-size: 19px; margin-bottom: 0.5em; } } h2 strong, h2.h2-regular strong, span.h2-regular.sk__gradient-fancy-text-back strong { font-weight: 800; } h2.thin, h2.h2-regular.thin, span.h2-regular.sk__gradient-fancy-text-back.thin { font-weight: 300; } h2.h2-regular.thin strong, span.h2-regular.sk__gradient-fancy-text-back.thin strong { font-weight: 600; } h2.h2-small, span.h2-small.sk__gradient-fancy-text-back { font-size: 18px; line-height: 33.6px; color: #FFFFFF; color: rgb(255, 255, 255); } h2.h2-small.shadowed { color: #000000; } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__rings-section h2.h2-small, .sk__rings-section span.h2-small.sk__gradient-fancy-text-back { max-width: 520px; margin: 0 auto; } } @media all and (min-width: 501px) and (max-width: 575px) { /* custom xs */ h2.h2-small, span.h2-small.sk__gradient-fancy-text-back { font-size: 16px; line-height: 26px; } } @media all and (max-width: 500px) { /* custom xxs */ h2.h2-small, span.h2-small.sk__gradient-fancy-text-back { font-size: 15px; line-height: 24px; } } h2.h2-large, span.h2-large.sk__gradient-fancy-text-back { font-size: 33px; line-height: 1.5; } h2.h2-large.shadowed { color: #000000; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h2.h2-large, span.h2-large.sk__gradient-fancy-text-back { font-size: 30px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h2.h2-large, span.h2-large.sk__gradient-fancy-text-back { font-size: 27px; } } @media all and (max-width: 575px) { /* xs */ h2.h2-large, span.h2-large.sk__gradient-fancy-text-back { font-size: 23px; } } h2.h2-large.thin, span.h2-large.thin.sk__gradient-fancy-text-back { font-weight: 200; } h2.h2-large.thin strong, span.h2-large.thin.sk__gradient-fancy-text-back strong { font-weight: 600; } h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 66px; letter-spacing: -2.5px; text-transform: inherit; line-height: 1.3; margin-bottom: 0.3em; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-size: 49px; letter-spacing: -2.5px; } } @media all and (min-width: 992px) and (max-width: 1400px) { /* lg */ h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-size: 45px; letter-spacing: -2.4px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-size: 49px; letter-spacing: -2.5px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-size: 39px; letter-spacing: -1.5px; } } @media all and (max-width: 575px) { /* xs */ h2.h2-super, span.h2-super.sk__gradient-fancy-text-back { font-size: 28px; letter-spacing: -0.6px; } } h3 { font-family: 'Lato', sans-serif; font-size: 23px; font-weight: 300; } h3 strong { font-weight: 600; } h3.h3-elegant, span.h3-elegant.sk__gradient-fancy-text-back { font-family: 'Poppins', sans-serif; font-size: 44px; line-height: 1.5; margin: 0 0 23px 0; font-weight: 700; } h3.h3-elegant { display: inline-block; position: inherit; z-index: 1; } h3.h3-elegant.narrow, span.h3-elegant.sk__gradient-fancy-text-back.narrow { letter-spacing: -1px; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h3.h3-elegant, span.h3-elegant.sk__gradient-fancy-text-back { font-size: 33px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h3.h3-elegant, span.h3-elegant.sk__gradient-fancy-text-back { font-size: 40px; } } @media all and (max-width: 575px) { /* xs */ h3.h3-elegant, span.h3-elegant.sk__gradient-fancy-text-back { font-size: 28px; } span.h3-elegant.sk__gradient-fancy-text-back { display: none; } } h3.h3-super, span.h3-super.sk__gradient-fancy-text-back { margin-bottom: 0.9em; letter-spacing: -0.24px; font-family: 'Poppins', sans-serif; font-size: 33px; line-height: 1.5; } h3.h3-super.narrow, span.h3-super.sk__gradient-fancy-text-back.narrow { letter-spacing: -1.3px; } h3.h3-super.shadowed { color: #000000; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ h3.h3-super, span.h3-super.sk__gradient-fancy-text-back { font-size: 30px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h3.h3-super, span.h3-super.sk__gradient-fancy-text-back { font-size: 27px; } } @media all and (max-width: 575px) { /* xs */ h3.h3-super, span.h3-super.sk__gradient-fancy-text-back { font-size: 23px; } } h3.h3-super.thin, span.h3-super.thin.sk__gradient-fancy-text-back { font-weight: 200; } h3.h3-super.thin strong, span.h3-super.thin.sk__gradient-fancy-text-back strong { font-weight: 600; } h4 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.3px; line-height: 1.4; color: #FFFFFF; margin-bottom: 1.1875rem; } h4.narrow { letter-spacing: -1.3px; } h4.h4-dark { color: #989A9B; } h4.h4-shadow { text-shadow: -4.34px 9.76px 3.25px rgba(0,0,0,0.75); } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h4 { font-size: 24px; } } @media all and (max-width: 575px) { /* xs */ h4:not(.h4-small) { /* aka h4 only */ font-size: 22px; line-height: 1.5; margin-bottom: 15px; } } h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.35; letter-spacing: -0.3px; text-transform: uppercase; color: #FFFFFF; } @media all and (min-width: 1921px) { /* custom - over FullHD */ h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-size: 24px; line-height: 1.15; } } @media all and (min-width: 768px) and (max-width: 1920px) { /* md + lg + xl + xxl */ h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-size: 18px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-size: 17px; } } @media all and (max-width: 420px) and (max-width: 575px) { /* custom xs 1 */ h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-size: 15px; } } @media all and (max-width: 419px) { /* custom xs 2 */ h4.h4-small, span.h4-small.sk__gradient-fancy-text-back { font-size: 13px; } } h5 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; line-height: 33.6px; letter-spacing: -0.2px; color: #FFFFFF; } @media all and (max-width: 1399px) { /* xl */ h5 { font-size: 17px; line-height: 25px; } } h5.h5-elegant, span.h5-elegant.sk__gradient-fancy-text-back { font-family: 'Lato', sans-serif; font-size: 23px; font-weight: 300; } h5.h5-elegant strong, span.h5-elegant.sk__gradient-fancy-text-back strong { font-weight: 600; } h5.h5-large, span.h5-large.sk__gradient-fancy-text-back { font-size: 24px; font-weight: 400; line-height: 1.4; margin-bottom: 0.9em; letter-spacing: -0.24px; color: #FFFFFF; } @media all and (max-width: 575px) { /* xs */ h5.h5-large, span.h5-large.sk__gradient-fancy-text-back { font-size: 19px; margin-bottom: 0.5em; } } h5.h5-large strong, span.h5-large.sk__gradient-fancy-text-back strong { font-weight: 800; } h5.h5-large.thin, span.h5-large.sk__gradient-fancy-text-back.thin { font-weight: 300; } h5.h5-large.thin strong, span.h5-large.sk__gradient-fancy-text-back.thin strong { font-weight: 600; } h6 { font-family: 'Poppins', sans-serif; font-size: 16px; letter-spacing: 3.2px; text-transform: uppercase; color: #FFFFFF; } .fancy-gradient-text-box { display: inline-block; position: relative; } .narrow-text { letter-spacing: -0.05em; } /* 404 page huge numbers */ .sk__404 { font-size: 256px; line-height: 0.8; font-weight: 700; letter-spacing: -19px; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ .sk__404 { font-size: 187px; letter-spacing: -15px; } } @media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ .sk__404 { font-size: 137px; letter-spacing: -12px; } .sk__404-page h2.h2-super, .sk__404-page span.h2-super.sk__gradient-fancy-text-back { font-size: 37px; letter-spacing: -1.4px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__404 { font-size: 198px; letter-spacing: -18px; } .sk__404-page h2.h2-super, .sk__404-page span.h2-super.sk__gradient-fancy-text-back { font-size: 37px; letter-spacing: -1.4px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__404 { font-size: 108px; letter-spacing: -9px; } .sk__404-page h2.h2-super, .sk__404-page span.h2-super.sk__gradient-fancy-text-back { font-size: 30px; letter-spacing: -1px; } } @media all and (max-width: 575px) { /* xs */ .sk__404 { font-size: 68px; letter-spacing: -4.5px; } .sk__404-page h2.h2-super, .sk__404-page span.h2-super.sk__gradient-fancy-text-back { font-size: 18px; } .sk__404-page p.p-super { font-size: 12px; } } /* Elements --------------------------------------------- */ body { font-family: 'Poppins', sans-serif; color: #FFFFFF; font-size: 16px; line-height: 30px; background: #000000; } hr { } ul, ol { } ul { } ol { } li > ul, li > ol { } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* Make sure embeds and iframes fit their containers. */ embed, iframe:not(#sk__yt-video-background), object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 1em 0; } table { margin: 0 0 1.5em; width: 100%; } blockquote { font-style: italic; font-size: 125%; font-weight: 300; } @media all and (max-width: 767px) { /* xs + sm */ blockquote { font-size: 104%; } } /* Links --------------------------------------------- */ a { color: #FFFFFF; } a:visited { color: #FFFFFF; } a:hover, a:focus, a:active { color: #FFFFFF; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /** * 6. Forms and Buttons * ==================== */ .form-group { margin-bottom: 0.5rem; } label { font-size: 14px; font-weight: 300; color: #ffffff; } textarea { resize: none; } input, textarea { outline: none; width: 100%; padding: 9px 18px 7px; color: #ccd7e0; font-size: 15px; font-weight: 400; background: transparent; border: none; background-color: rgba(142,151,161,0.06); border-bottom: 1px solid rgba(255,255,255,0.45); margin-bottom: 18px; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: rgba(255,255,255,0.65); } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px rgba(129,144,160,0.13) inset, 0 0 0 50px white inset; -webkit-text-fill-color: #ccd7e0; } textarea:focus:hover, input:focus:hover { color: #ccd7e0; border-color: rgba(255,255,255,0.65); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0px 1000px rgba(129,144,160,0.13) inset; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } input:-webkit-autofill::first-line { font-size: 17px; font-weight: 300; font-family: 'Poppins', sans-serif; } input::-webkit-input-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:hover::-webkit-input-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea::-webkit-input-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:hover::-webkit-input-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input::-moz-placeholder{ opacity: 1; color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:hover::-moz-placeholder{ color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea::-moz-placeholder { opacity: 1; color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:hover::-moz-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:-ms-input-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:hover:-ms-input-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:-ms-input-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:hover:-ms-input-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:-moz-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } input:hover:-moz-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:-moz-placeholder { color: #9aa4ad; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } textarea:hover:-moz-placeholder { color: #ccd7e0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } button[type="submit"], input[type="submit"] { outline: none; width: 100%; margin-top: 15px; padding: 12px 54px; border: 1px solid #686868; border-radius: 3px; font-size: 17px; font-weight: 600; color: #ffffff; background-color: rgba(127,127,127,0); } button[type="submit"]:hover, input[type="submit"]:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,1); } /* Contact Form */ @media all and (min-width: 341px) and (max-width: 575px) { /* custom */ .sk__contact-form, .sk__contact-info { padding-left: 30px; padding-right: 30px; } } @media all and (max-width: 340px) { /* custom */ .sk__contact-form, .sk__contact-info { padding-left: 14px; padding-right: 14px; } } .sk__contact-form-col { margin-top: 20px; } .sk__contact-form-col form { margin-top: 34px; } /* Subscribe Form */ .sk__subscribe-form { position: relative; padding-right: 90px; } .sk__subscribe-form input { padding: 11px 18px 9px; border-radius: 3px 0 0 3px; border-bottom: none; background-color: rgba(142,151,161,0.09); } .sk__subscribe-form button[type="submit"] { position: absolute; top: 0; right: 0; outline: none; margin-top: 0; padding: 11px 0 9px; width: 90px; border: none; border-radius: 0 3px 3px 0; font-size: 15px; font-weight: 600; letter-spacing: 3.08px; color: #ffffff; background-color: rgba(244,244,244,0.09); } .sk__subscribe-form button[type="submit"]:hover { background-color: rgba(244,244,244,0.4); } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__subscribe-form { padding-right: 64px; } .sk__subscribe-form input { padding: 4px 6px 4px 11px; font-size: 11px; font-weight: 600; } .sk__subscribe-form button[type="submit"] { font-size: 11px; padding: 4px 0 4px; width: 64px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__subscribe-form { padding-right: 64px; } .sk__subscribe-form input { padding: 4px 6px 4px 11px; font-size: 11px; font-weight: 600; } .sk__subscribe-form button[type="submit"] { font-size: 11px; padding: 4px 0 4px; width: 64px; } } @media all and (max-width: 575px) { /* xs */ .sk__subscribe-form { padding-right: 64px; max-width: 280px; margin: 0 auto; } .sk__subscribe-form input { padding: 4px 6px 4px 11px; font-size: 11px; font-weight: 600; } .sk__subscribe-form button[type="submit"] { font-size: 11px; padding: 4px 0 4px; width: 64px; } } /** * Buttons - main * .btn, .btn-outline-light (default), .btn-gradient, .btn-gradient-outline */ .btn { font-family: 'Poppins', sans-serif; padding: 15px 30px 14px; font-weight: 600; font-size: 14px; letter-spacing: 3px; border-radius: 29px; border-radius: 300px; } @media all and (max-width: 575px) { /* xs */ .btn { padding: 16px 20px 14px; font-size: 13px; letter-spacing: 2px; } } @media all and (min-width: 1921px) { .btn.btn-lg, .btn-lg { padding: 25px 39px 21px; font-size: 17px; letter-spacing: 7px; border-width: 2px; } } .btn:not([class*="btn-"]), /* aka only .btn */ .btn-gradient { position: relative; overflow: hidden; } .btn:not([class*="btn-"]) { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } .btn:not([class*="btn-"]):hover, .btn-gradient { color: #fff; background-color: rgba(248,249,250,0); border-color: rgba(248,249,250,0); } .btn-gradient:hover { color: #ffffff; border-color: rgba(242, 242, 242, 0.26); background-color: rgba(0,0,0,1); } .btn:not([class*="btn-"]):before, .btn-gradient:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .btn:not([class*="btn-"]):before { opacity: 0; } .btn-gradient:before { opacity: 1; } .btn:not([class*="btn-"]):hover:before { opacity: 1; } .btn-outline-light { color: #ffffff; border-color: rgba(242, 242, 242, 0.26); background-color: rgba(0,0,0,0.64); } .btn-outline-light:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } /* gradient outline button - suitable only for dark backgrounds */ a.btn-gradient-outline:link, a.btn-gradient-outline:visited, a.btn-gradient-outline:hover, a.btn-gradient-outline:active, a.btn-gradient-outline-hard:link, a.btn-gradient-outline-hard:visited, a.btn-gradient-outline-hard:hover, a.btn-gradient-outline-hard:active { position: relative; overflow: hidden; color: #000000; mix-blend-mode: lighten; font-weight: 900; background-size: 110%; background-position-x: 15%; } .btn-gradient-outline:before, .btn-gradient-outline-hard:before { content: ''; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 56px; top: 1px; left: 1px; z-index: 1; mix-blend-mode: difference; } .btn-gradient-outline:hover:before, .btn-gradient-outline-hard:hover:before { opacity: 0; } /* Back to top button */ a.sk__back-to-top { position: fixed; width: 46px; height: 46px; right: 40px; right: 32px; bottom: 39px; bottom: 31px; background: rgba(0,0,0,0.74); border-radius: 3px; } span.sk__back-to-top { display: block; width: 19px; height: 19px; border-top: 4px solid #c0ccd1; border-right: 4px solid #c0ccd1; border-radius: 2px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 17px; left: 13px; position: absolute; } a.sk__back-to-top:hover span.sk__back-to-top { border-top-color: #ffffff; border-right-color: #ffffff; } .sk__back-to-top-wrap { z-index: 999; position: fixed; bottom: 0; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; opacity: 0; } .sk__back-to-top-wrap.sk__backtotop-visible { opacity: 1; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ a.sk__back-to-top { width: 36px; height: 36px; right: 15px; bottom: 15px; } span.sk__back-to-top { width: 16px; height: 16px; top: 14px; left: 10px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ a.sk__back-to-top { width: 36px; height: 36px; right: 15px; bottom: 15px; } span.sk__back-to-top { width: 16px; height: 16px; top: 14px; left: 10px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__back-to-top-wrap { height: 40px; width: 100%; text-align: center; } a.sk__back-to-top { display: inline-block; position: relative; width: 32px; height: 32px; right: 0; bottom: 20px; } span.sk__back-to-top { top: 12px; left: 8px; width: 16px; height: 16px; } } @media all and (max-width: 575px) { /* xs */ .sk__back-to-top-wrap { height: 40px; width: 100%; text-align: center; } a.sk__back-to-top { display: inline-block; position: relative; width: 32px; height: 32px; right: 0; bottom: 20px; } span.sk__back-to-top { top: 12px; left: 8px; width: 16px; height: 16px; } } /* Links */ a, a:hover { text-decoration: none; } /** * 7. General * ========== */ a, em, input, textarea, button, .btn, .btn:before, span.sk__back-to-top, .sk__mobile-main-logo, .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul, .hc-offcanvas-nav li:not(.custom-content) a, .nav-back, .hero-socials-inner, .sk__social-icons i, .sk__project-icons i, .sk__social-icons span[class^="icon-"], .sk__project-icons span[class^="icon-"], .sk__proj-infobox-label, .sk__proj-infobox-value, .sk__parallax-gallery-nav, a.sk__iconbox-icon-link > span.sk__iconbox-icon:after, a.sk__gallery-nav-link, a.sk__gallery-nav-link:before, a.sk__gallery-nav-link:after, .slick-dots li button:before, .cat-item, .sk__ease-03 { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } a.sk__iconbox-icon-link i, a.sk__iconbox-icon-link span[class^="icon-"], a.sk__iconbox-icon-link > span.sk__iconbox-icon, .sk__ease-06, .sk__in-content-post-image, .sk__imagebox-img { -webkit-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } img { max-width: 100%; } /** * Standard sections */ /* Set background image as cover and center it */ .sk__image-back, /* deprecated, use 'cover' class */ .sk__image-back-cover { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Set background image as contain and center it */ .sk__image-back-contain { background-size: contain; background-position: center; background-repeat: no-repeat; } /* Animated header - used for "slide in from top" effect for the header */ .sk__animated-header { opacity: 0; border-bottom: 1px solid; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); /* animated with JS */ } hr.sk__divider, .divider { /* combine with background color, border, gradients, patterns... */ display: block; width: 100%; height: 1px; margin-bottom: 20px; margin-top: 20px; background-color: #1A1A1A; background-color: rgba(255,255,255,0.11); } hr { opacity: 1; } hr.sk__divider.bright, .divider.bright { background-color: rgba(255,255,255,0.16); } @media all and (max-width: 575px) { /* xs */ hr.sk__divider, .divider { width: 90%; margin-left: 5%; } } .fat-divider { display: block; width: 100%; height: 20px; margin-bottom: 25px; /* bg color .dark-shade-5-bg */ } .sk__pattern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: repeat; background: url(../images/overlay-pattern.png); } .sk__tint { z-index: -1; background: #000000; opacity: 0.6; } .sk__tint-light { z-index: -1; background: #000000; opacity: 0.15; } .sk__filter-city { -webkit-filter: sepia(0.6) hue-rotate(0deg) brightness(0.7) contrast(1.1) saturate(1.1); filter: sepia(0.6) hue-rotate(0deg) brightness(0.7) contrast(1.1) saturate(1.1); } .sk__body-end { display: none; } .sk__invisible { opacity: 0 !important; } /** * Parallax Backgrounds * sk__skip-parallax-background-section is used to * skip parallax on hero images on mobile. It needs * to have the same CSS as sk__parallax-background-section */ section.sk__parallax-background-section, section.sk__skip-parallax-background-section { position: relative; width: 100%; min-height: 100vh; overflow: hidden; } section.sk__parallax-background-section.sk__parallax-fixer-ignore-height, section.sk__skip-parallax-background-section.sk__parallax-fixer-ignore-height { min-height: 0; } section.sk__parallax-background-section.sk__parallax-fixer-section, section.sk__skip-parallax-background-section.sk__parallax-fixer-section { overflow: initial; height: auto; } .sk__parallax-background-element { z-index: -1; /*height: 100vh;*/ min-height: 100vh; height: auto; background-attachment: fixed; } .sk__parallax-header { position: relative; overflow: hidden; } .sk__parallax-header-image { z-index: -1; } /* transparent parallax background element - fixes parallax init */ .sk__parallax-fixer { background-image: url(../images/parallax-fixer-background.png); } /** * Parallax images and parallax videos. * The "container" and "element" elements work in pair. * element-1 to element-10 indicate parallax image/video * height in relation to container, which affects the * speed of the image/video. */ .sk__parallax-container { position: relative; overflow: hidden; } .sk__parallax-container .sk__gradient-back-v1, .sk__parallax-container .sk__gradient-back-v2 { z-index: 2; } .sk__parallax-container .sk__pattern-overlay { z-index: 3; } .sk__parallax-element-1, .sk__parallax-element-2, .sk__parallax-element-3, .sk__parallax-element-4, .sk__parallax-element-5, .sk__parallax-element-6, .sk__parallax-element-7, .sk__parallax-element-8, .sk__parallax-element-9, .sk__parallax-element-10 { position: absolute; -o-object-fit: cover; object-fit: cover; width: 100%; bottom: 0; } .sk__parallax-element-1 { height: 110%; } .sk__parallax-element-2 { height: 120%; } .sk__parallax-element-3 { height: 130%; } .sk__parallax-element-4 { height: 140%; } .sk__parallax-element-5 { height: 150%; } .sk__parallax-element-6 { height: 160%; } .sk__parallax-element-7 { height: 170%; } .sk__parallax-element-8 { height: 180%; } .sk__parallax-element-9 { height: 190%; } .sk__parallax-element-10 { height: 200%; } /** * Parallax vertical strips */ .sk__hero-parallax-strip-vertical { position: absolute; top: 0; height: 100%; } .sk__hero-parallax-strip-vertical:nth-child(1) { left: 0; } /** * Layered parallax hero background / header */ .sk__layered-parallax-header { position: relative; overflow: hidden; } .sk__layered-parallax-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } /** * Image boxes */ .sk__imagebox { display: block; position: relative; overflow: hidden; cursor: pointer; border-radius: 5px; background-color: #0C0C0C; margin-bottom: 24px; } .sk__imagebox:hover { background-color: #121212; background-color: #1E1E1E; } .sk__imagebox-img-wrap { padding: 19px 16px 19px; } .sk__imageboxes img { display: block; width: 100%; height: auto; } .sk__imagebox-text-wrap { padding: 0 17px 10px; } .sk__imagebox:hover { -webkit-transform: translateY(-10px) !important; -ms-transform: translateY(-10px) !important; transform: translateY(-10px) !important; -webkit-box-shadow: 0 10px 5px 3px rgba(0,0,0,0.99); box-shadow: 0 10px 5px 3px rgba(0,0,0,0.99); } .sk__imagebox:hover .sk__imagebox-img { -webkit-filter: saturate(1.2) brightness(1.25); filter: saturate(1.2) brightness(1.25); } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__imagebox-text-wrap p { font-size: 15px; line-height: 25px; } } /** * 8. Hero Section * =============== */ /** * Hero Section Theme-style: Default * Hero heading on the left and * text boxes in the bottom corners */ section.sk__hero-item-theme-style { position: relative; width: 100%; min-height: 100vh; overflow: hidden; padding: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media all and (min-width: 360px) and (max-width: 575px) { section.sk__hero-item-theme-style { padding: 60px 24px 20px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media all and (max-width: 359px) { section.sk__hero-item-theme-style { padding: 60px 10px 20px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } /** * Hero section: default content position classes. * As opposed to sk__hero-item-theme-style which has * fully custom positioning and elements, these are * basic top, right, left, bottom and center positioning * classes. * A helper fullscreen content wrapper which * easily positions inside content vertically * and horizontally. Includes side paddings to * avoid overlaps with social icons and slider * navigation. */ section.sk__hero-item-center-center, section.sk__hero-item-left-center, section.sk__hero-item-left-top, section.sk__hero-item-left-bottom, section.sk__hero-item-center-top, section.sk__hero-item-right-top, section.sk__hero-item-right-center, section.sk__hero-item-right-bottom, section.sk__hero-item-center-bottom { position: relative; width: 100%; min-height: 100vh; overflow: hidden; padding-left: 98px; padding-right: 98px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } section.sk__hero-item-center-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section.sk__hero-item-left-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } section.sk__hero-item-left-top { -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } section.sk__hero-item-left-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } section.sk__hero-item-center-top { -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section.sk__hero-item-right-top { -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } section.sk__hero-item-right-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } section.sk__hero-item-right-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } section.sk__hero-item-center-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ section.sk__hero-item-center-center, section.sk__hero-item-left-center, section.sk__hero-item-left-top, section.sk__hero-item-left-bottom, section.sk__hero-item-center-top, section.sk__hero-item-right-top, section.sk__hero-item-right-center, section.sk__hero-item-right-bottom, section.sk__hero-item-center-bottom { padding-left: 78px; padding-right: 78px; } } @media all and (max-width: 767px) { /* sm */ section.sk__hero-item-center-center, section.sk__hero-item-left-center, section.sk__hero-item-left-top, section.sk__hero-item-left-bottom, section.sk__hero-item-center-top, section.sk__hero-item-right-top, section.sk__hero-item-right-center, section.sk__hero-item-right-bottom, section.sk__hero-item-center-bottom { padding-left: 20px; padding-right: 20px; } } /** * Bootstrap Carousel - Hero Slider */ /* slider */ #sk__hero-carousel-slider { } /* Hero Slider Nav UI (carousel indicators + prev/next buttons) */ #sk__hero-carousel-slider button[data-bs-target="#sk__hero-carousel-slider"] { opacity: 0; } /* carousel indicators */ #sk__hero-carousel-slider .carousel-indicators [data-bs-target] { opacity: 0; background-color: rgba(255,255,255,0.5); } #sk__hero-carousel-slider .carousel-indicators [data-bs-target].active, #sk__hero-carousel-slider .carousel-indicators [data-bs-target]:hover, #sk__hero-carousel-slider .carousel-indicators [data-bs-target]:focus { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background-color: rgba(255,255,255,1); } /* prev/next buttons */ #sk__hero-carousel-slider .carousel-control-next:focus, #sk__hero-carousel-slider .carousel-control-next:hover, #sk__hero-carousel-slider .carousel-control-prev:focus, #sk__hero-carousel-slider .carousel-control-prev:hover { opacity: 1 !important; } #sk__hero-carousel-slider .carousel-control-next, #sk__hero-carousel-slider .carousel-control-prev { position: absolute; top: 144px; left: initial; width: 30px; height: 30px; } #sk__hero-carousel-slider .carousel-control-prev { right: 111px; } #sk__hero-carousel-slider .carousel-control-next { right: 45px; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom xxl */ #sk__hero-carousel-slider .carousel-control-prev { top: 136px; right: 85px; } #sk__hero-carousel-slider .carousel-control-next { top: 136px; right: 29px; } } @media all and (min-width: 768px) and (max-width: 1399px) { /* md to xl */ #sk__hero-carousel-slider .carousel-control-prev { top: 136px; right: 85px; } #sk__hero-carousel-slider .carousel-control-next { top: 136px; right: 29px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ #sk__hero-carousel-slider .carousel-control-prev { top: 87px; right: 62px; } #sk__hero-carousel-slider .carousel-control-next { top: 87px; right: 13px; } } @media all and (max-width: 575px) { /* xs */ #sk__hero-carousel-slider .carousel-control-prev, #sk__hero-carousel-slider .carousel-control-next { display: none; } } /* carousel item */ #sk__hero-carousel-slider .carousel-item { min-height: 100vh; height: auto; } #sk__hero-carousel-slider .carousel-item { -webkit-transition-timing-function: cubic-bezier(.75,0,.34,1); -o-transition-timing-function: cubic-bezier(.75,0,.34,1); transition-timing-function: cubic-bezier(.75,0,.34,1); -webkit-transition-duration: 1.2s; /* moze i 1.1 */ -o-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } #sk__hero-carousel-slider .carousel-item.active { -webkit-transition-timing-function: cubic-bezier(.9,0,.25,.88); -o-transition-timing-function: cubic-bezier(.9,0,.25,.88); transition-timing-function: cubic-bezier(.9,0,.25,.88); -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s; transition-duration: 1.2s; } #sk__hero-carousel-slider .carousel-item:not(.active):first-child { z-index: 1; } /* slide parallax background */ #sk__hero-carousel-slider .sk__parallax-background-element { z-index: auto; } /* Hero Video */ .sk__parallax-video-background-element { top: 0; } video.sk__video { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .sk__youtube-container { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; } .sk__youtube-container .youtube-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; margin: auto; } .sk__youtube-container .sk__gradient-back-v1 { z-index: 2; } .sk__youtube-container .sk__gradient-back-v2 { z-index: 2; } .sk__youtube-container .sk__pattern-overlay { z-index: 3; } /* morphing hover effect */ .sk__morphing-hover-hero-overlay { -webkit-transform: translateY(-120vh); -ms-transform: translateY(-120vh); transform: translateY(-120vh); } .sk__morphing-hover-hero-content { padding: 120px 0; } @media all and (min-width: 768px) and (max-width: 1199px) { /* md - lg */ .sk__morphing-hover-hero-content { padding: 80px 0; } } @media all and (max-width: 767px) { /* xs + sm */ .sk__morphing-hover-hero-content { padding: 20px 0; } } /* slide elements */ .hero-box-bottom-left { position: relative; max-width: 300px; } @media all and (max-width: 380px) { .hero-box-bottom-left { max-width: 90%; } } .hero-h1-box { position: relative; left: 124px; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { font-family: 'Syncopate', sans-serif; font-weight: 900; font-size: 77px; text-transform: uppercase; letter-spacing: -5px; line-height: 1.1; line-height: 120%; text-shadow: 3px 3px 4px rgba(0,0,0,0.35); } .hero-box-p { font-family: 'Poppins', sans-serif; font-size: 10px; line-height: 22px; font-weight: 300; } .hero-socials-section, section.hero-socials-section { position: fixed; top: 0; left: -70px; width: 70px; height: 100vh; z-index: 1; } .hero-socials { position: absolute; top: 0; /* controlled via JS */ left: 35px; left: 105px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; cursor: context-menu; } .hero-socials span { /* animated with JS */ opacity: 0; -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); } .hero-socials i, .hero-socials span[class^="icon-"] { width: 36px; height: 36px; font-size: 12px; line-height: 57.6px; color: #ffffff; text-align: center; } .hero-box-bottom-right { position: absolute; width: 260px; height: 450px; bottom: 0; right: 0; } .hero-box-bottom-right span, .hero-box-bottom-right h4, .hero-box-bottom-right p { position: absolute; margin: 0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .hero-box-bottom-right .big-abbreviated-heading { bottom: 31px; right: 26px; } .hero-box-bottom-right h4 { bottom: 36px; right: 125px; font-family: 'Syncopate', sans-serif; font-size: 26px; } .hero-box-bottom-right p { bottom: 37.5px; right: 104px; font-family: 'Lato', sans-serif; font-size: 11px; line-height: 23px; } .hero-box-bottom-right .cover-text-wrapper { position: absolute; width: 100%; height: 100%; } .animated-element { opacity: 0; } @media all and (min-width: 1921px) { /* custom over FullHD */ .hero-h1-box { left: 124px; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { font-size: 97px; text-shadow: 3px 5px 5px rgba(0,0,0,0.35); } .hero-box-bottom-left .btn { padding: 25px 39px 21px; font-size: 17px; letter-spacing: 7px; border-width: 2px; } .hero-box-bottom-right { bottom: 13px; height: 570px; } .hero-box-bottom-right .big-abbreviated-heading { font-size: 92px; right: 43px; right: 30px; } .hero-box-bottom-right p { bottom: 39.5px; right: 123px; right: 126px; font-size: 13px; line-height: 37px; } .hero-box-bottom-right h4 { font-size: 30px; line-height: 40px; right: 151px; } .hero-socials i, .hero-socials span[class^="icon-"] { height: 51px; font-size: 18px; } } @media all and (min-width: 1800px) and (max-width: 1920px) { /* custom for FullHD - Default */ .hero-h1-box { left: 69px; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { font-size: 73px; } } @media all and (min-width: 1281px) and (max-width: 1799px) { /* custom for 1366x768, 1600x900 and up until 1799 */ .hero-h1-box { left: 72px; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { line-height: 111%; font-size: 66px; text-shadow: 2px 3px 3px rgba(0,0,0,0.35); } .hero-box-bottom-right .big-abbreviated-heading { font-size: 71px; letter-spacing: -3px; } .hero-socials { letter-spacing: -3px; } .hero-socials i, .hero-socials span[class^="icon-"] { height: 26px; } } @media all and (min-width: 992px) and (max-width: 1280px) { /* custom for over tablet and 1280x720 */ .hero-h1-box { left: 60px; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { line-height: 107%; font-size: 59px; text-shadow: 2px 3px 3px rgba(0,0,0,0.35); } .sk__hero-item-theme-style h1.hero-h1, .sk__hero-item-theme-style span.hero-h1.sk__gradient-fancy-text-back { margin-bottom: 30px; } .hero-box-bottom-right .big-abbreviated-heading { bottom: 60px; } .hero-box-bottom-right p { bottom: 66px; } .hero-box-bottom-right h4 { bottom: 64px; line-height: 1.5; } .hero-socials { letter-spacing: -3px; } .hero-socials i, .hero-socials span[class^="icon-"] { height: 14px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .hero-h1-box { left: 65px; padding-right: 50px; } .hero-box-bottom-left { margin-bottom: 20px; } .hero-box-bottom-right { margin-bottom: 41px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .hero-h1-box { left: 0; width: 100%; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { font-size: 59px; letter-spacing: -4px; line-height: 101%; text-shadow: 2px 3px 3px rgba(0,0,0,0.35); } .hero-box-bottom-right { width: 167px; height: 440px; } .hero-box-bottom-right .big-abbreviated-heading { font-size: 67px; line-height: 104%; } .hero-box-bottom-right h4 { font-size: 22px; line-height: 104%; } .hero-box-bottom-right p { line-height: 14px; } .hero-socials-section { display: none; } } @media all and (max-width: 575px) { /* xs */ .hero-h1-box { left: 0; width: 100%; } h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { /* xs done separately in 2 queries below */ } .hero-socials-section { display: none; } .hero-box-bottom-left { max-width: 100%; } .hero-box-bottom-right { position: relative; width: 100%; height: auto; top: 0; left: 0; margin-bottom: 145px; margin-top: auto; } .hero-box-bottom-right .big-abbreviated-heading { line-height: 120%; font-size: 1.8rem; letter-spacing: -0.14rem; } .hero-box-bottom-right h4 { line-height: 114%; font-size: 1.15rem; } .hero-box-bottom-right p { font-size: 11px; line-height: 18px; margin-bottom: 6px; } .hero-box-bottom-right .cover-text-wrapper { position: relative; } .hero-box-bottom-right span, .hero-box-bottom-right h4, .hero-box-bottom-right p { position: initial; -webkit-writing-mode: initial; -ms-writing-mode: initial; writing-mode: initial; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } } @media all and (min-width: 360px) and (max-width: 575px) { h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { line-height: 115%; font-size: 2.7rem; letter-spacing: -0.14rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.35); } .sk__hero-item-theme-style h1.hero-h1, .sk__hero-item-theme-style span.hero-h1.sk__gradient-fancy-text-back { margin-bottom: 3vh; margin-top: 3vh; } } @media all and (max-width: 359px) { h1.hero-h1, span.hero-h1.sk__gradient-fancy-text-back { line-height: 120%; font-size: 1.8rem; letter-spacing: -0.14rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.35); } } /** * Hero section - Mega text (video) */ section.sk__mega-video-text-section { position: relative; /*width: 100vw;*/ /*min-height: 100vh;*/ /*height: auto;*/ } .sk__video-and-text-fusion { mix-blend-mode: multiply; overflow-x: hidden; } h1.h1-hero-mega-text { opacity: 1; font-family: 'Poppins', sans-serif; margin-top: -6vh; text-transform: inherit; font-size: 38rem; font-size: 23.75vw; letter-spacing: -1.7rem; letter-spacing: -1.0625vw; -webkit-transition: all 1.8s ease-in-out; -o-transition: all 1.8s ease-in-out; transition: all 1.8s ease-in-out; } h1.h1-hero-mega-text.unspaced { opacity: 0; letter-spacing: 5rem; letter-spacing: 3.125vw; -webkit-transform: translateX(10vw); -ms-transform: translateX(10vw); transform: translateX(10vw); } /** * Hero section - Mega text (video) */ section.sk__mega-image-text-section { position: relative; width: 100vw; min-height: 100vh; height: auto; } .sk__image-and-text-fusion { mix-blend-mode: multiply; } /** * 9. Half-screen Sections * ======================= * parallax images, text, * parallax text */ .sk__halfscreen-section { } .sk__halfscreen-parallax-image-col, .sk__halfscreen-parallax-video-col { min-height: 400px; padding: 0; } .sk__halfscreen-text-col { min-height: 400px; padding: 8vw; } .sk__halfscreen-text-col-inner { margin: 0 auto; } /** * 10. Numbers Section * =================== */ .sk__numbers-row { padding-top: 8px; padding-bottom: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sk__numbers-row .counters-wrap { position: relative; height: 22vw; padding-top: 40px; } .sk__numbers-row .counters-wrap:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.07); } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__numbers-row .counters-wrap { height: 24vw; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__numbers-row .counters-wrap { height: 24vw; padding: 0; border-bottom: 1px solid #1A1A1B; border-bottom: 1px solid rgba(255,255,255,0.07); } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__numbers-row .counters-wrap { height: 35vw; padding: 0; } .sk__numbers-row .counters-wrap:not(:last-child) { border-right: 1px solid #1A1A1B; border-right: 1px solid rgba(255,255,255,0.07); } } @media all and (max-width: 575px) { /* xs */ .sk__numbers-row .counters-wrap { height: 42vw; padding: 0; } .sk__numbers-row .counters-wrap:not(:last-child) { border-right: 1px solid #1A1A1B; border-right: 1px solid rgba(255,255,255,0.07); } } span.sk__counter { font-size: 55px; font-weight: 700; line-height: 1.2; letter-spacing: -1.65px; color: #ffffff; } .counters-wrap p { font-size: 19px; color: #ffffff; } @media all and (min-width: 1921px) { span.sk__counter { font-size: 66px; } .counters-wrap p { font-size: 23px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ span.sk__counter { font-size: 48px; } .counters-wrap p { font-size: 17px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ span.sk__counter { font-size: 4.3vw; } .counters-wrap p { font-size: 1.83vw; margin-bottom: 0; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ span.sk__counter { font-size: 48px; } .counters-wrap p { font-size: 17px; margin-bottom: 0; } } @media all and (max-width: 575px) { /* xs */ span.sk__counter { font-size: 30px; letter-spacing: -1px; } .counters-wrap p { font-size: 16px; margin-bottom: 0; } } span.numbers-deco { width: calc(100% - 24px); top: 32px; left: 12px; height: 1px; background-color: rgba(255,255,255,0.07); } @media all and (max-width: 991px) { /* xs to (and including) md */ span.numbers-deco { width: 100%; left: 0; top: 0; } } /** * 11. About Us Section * ==================== */ .sk__about-us-section { overflow-x: hidden; } .about-right-image-wrap { position: relative; overflow: hidden; padding-top: 49.42%; } @media all and (max-width: 991px) { /* xs to (and including) md */ .about-right-image-wrap { margin-top: 30px; } } .about-right-image { background-image: url('https://veqr.com.tr/trogam/DSC00452%20rev1.jpg'); } .custom-about-us-p2 { max-width: 320px; width: 100%; display: inline-block; } @media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ .p-xs.custom-about-us-p2 { max-width: 300px; line-height: 1.8; margin-top: -7px; } } @media all and (max-width: 575px) { /* xs */ .custom-about-us-p2 { margin-left: auto; margin-right: auto; } } .about-number { display: inline-block; font-size: 66px; font-weight: 700; line-height: 46.37px; letter-spacing: -1.98px; margin-right: -30px; margin-left: 30px; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .about-number { font-size: 62px; } } @media all and (max-width: 991px) { .about-number { margin-right: 0; } } @media all and (max-width: 575px) { /* xs */ .about-number { width: 100%; margin-left: auto; margin-right: auto; font-size: 39px; } } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .custom-about-divider-col { padding-left: 42px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .custom-about-number-col { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .about-button-col { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } @media all and (max-width: 575px) { /* xs */ .about-button-col > div { margin-left: auto; margin-right: auto; } } /** * 12. Partners Section * ==================== */ .sk__partners-section { padding-top: 10px; } .sk__partners > div { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 1.5px; } .sk__partners > div:first-child { padding-left: 0; } .sk__partners > div:last-child { padding-right: 0; } .sk__partners .col-sm-2 { /* make partners col-sm-2 1/5 instead of 1/6 width */ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; } @media all and (max-width: 575px) { .sk__partners .col-xs-4 { /* reaffirm xs */ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333334%; } .sk__partners > div:first-child { padding-left: 1.5px; } .sk__partners > div:last-child { padding-right: 1.5px; } } .partner { width: 100%; padding-top: 80%; background-color: rgba(255,255,255,0.05); } .partner.partner-1 { background-image: url(../images/partner-1.png); } .partner.partner-2 { background-image: url(../images/partner-2.png); } .partner.partner-3 { background-image: url(../images/partner-3.png); } .partner.partner-4 { background-image: url(../images/partner-4.png); } .partner.partner-5 { background-image: url(../images/partner-5.png); } /** * 13. Portfolio Section * ===================== */ /* decrease top padding (set by sk__py) on these pages */ .sk__portfolio-page .sk__portfolio-section, .sk__home-portfolio .sk__portfolio-section { padding-top: 23px; } .sk__portfolio-thumbs { position: relative; /* fix for gsap animation */ overflow-x: hidden; /* fix for gsap animation */ overflow-y: hidden; /* remove vert scrollbar after fix */ } @media all and (min-width: 1921px) { .sk__portfolio-item { padding: 18px; } } @media all and (min-width: 768px) and (max-width: 1920px) { .sk__portfolio-item { padding: 13px; } } @media all and (min-width: 320px) and (max-width: 767px) { .sk__portfolio-item { padding: 8px; } } @media all and (max-width: 319px) { .sk__portfolio-item { padding: 2px; } } a.sk__portfolio-thumblink { display: block; position: relative; overflow: hidden; width: 100%; padding-top: 211.7%; padding-right: 0; } @media all and (min-width: 768px) and (max-width: 1280px) { /* custom */ a.sk__portfolio-thumblink { padding-top: 200%; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ a.sk__portfolio-thumblink { padding-top: 186%; } } @media all and (max-width: 575px) { /* xs */ a.sk__portfolio-thumblink { padding-top: 174%; } } .sk__portfolio-thumblink-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; z-index: -1; } a.sk__portfolio-thumblink:hover .sk__portfolio-thumblink-image { transition: filter 0.6s, transform 4s cubic-bezier(.12,.72,.31,.65) 0.1s, -webkit-filter 0.6s, -webkit-transform 4s cubic-bezier(.12,.72,.31,.65) 0.1s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-filter: saturate(1.5) brightness(0.5); filter: saturate(1.5) brightness(0.5); } .portfolio-thumb-info { position: absolute; bottom: 0; width: 100%; padding-left: 10px; padding-right: 10px; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: translateY(43px); -ms-transform: translateY(43px); transform: translateY(43px); } @media all and (min-width: 321px) and (max-width: 575px) { /* custom xs 1 */ .portfolio-thumb-info { padding-left: 4px; padding-right: 4px; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } } @media all and (max-width: 320px) { /* custom xs 2 */ .portfolio-thumb-info { padding-left: 4px; padding-right: 4px; -webkit-transform: translateY(80px); -ms-transform: translateY(80px); transform: translateY(80px); } } a.sk__portfolio-thumblink:hover .portfolio-thumb-info { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } a.sk__portfolio-thumblink h4.h4-small, a.sk__portfolio-thumblink span.h4-small.sk__gradient-fancy-text-back { line-height: 1.45; margin-bottom: 1rem; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } a.sk__portfolio-thumblink:hover h4.h4-small, a.sk__portfolio-thumblink:hover span.h4-small.sk__gradient-fancy-text-back { margin-bottom: 0.6rem; } a.sk__portfolio-thumblink:hover h4.h4-small, a.sk__portfolio-thumblink:hover span.h4-small.sk__gradient-fancy-text-back { -webkit-transition: all 0.45s ease-in 0s; -o-transition: all 0.45s ease-in 0s; transition: all 0.45s ease-in 0s; } a.sk__portfolio-thumblink h6 { margin-bottom: 5px; -webkit-transition: opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; transition: opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; -o-transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s; transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s; transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media all and (min-width: 420px) and (max-width: 575px) { /* custom xs 1*/ a.sk__portfolio-thumblink h6 { font-size: 13px; letter-spacing: 1.6px; margin-bottom: 4px; } } @media all and (max-width: 419px) { a.sk__portfolio-thumblink h6 { /* custom xs 2 */ font-size: 11px; letter-spacing: 1px; } } a.sk__portfolio-thumblink:hover h6 { -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; transition: opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; -o-transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s; transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s; transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; -webkit-transform: translateY(18px); -ms-transform: translateY(18px); transform: translateY(18px); opacity: 0; } a.sk__portfolio-thumblink p { display: inline-block; background: black; padding: 10px 23px; border-radius: 70px; -webkit-transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; -o-transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; -webkit-transition: opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; transition: opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; -webkit-transform: translateY(23px); -ms-transform: translateY(23px); transform: translateY(23px); opacity: 0; } a.sk__portfolio-thumblink:hover p { -webkit-transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; -o-transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; -webkit-transition: opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; transition: opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } a.sk__portfolio-thumblink p:hover { background-color: #ffffff; color: #000000; } /* Slick slider UI */ .slick-dots li button:before { color: rgba(255,255,255,1); } .slick-prev:before, .slick-next:before { font-family: icomoon; } /* Plain portfolio thumbnails - without slick.js */ .sk__portfolio-wrapper.not-slick { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sk__portfolio-wrapper.not-slick .sk__portfolio-item { opacity: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20%; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } @media all and (min-width: 1024px) and (max-width: 1279px) { .sk__portfolio-wrapper.not-slick .sk__portfolio-item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } } @media all and (min-width: 768px) and (max-width: 1023px) { .sk__portfolio-wrapper.not-slick .sk__portfolio-item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333333%; } } @media all and (min-width: 680px) and (max-width: 767px) { .sk__portfolio-wrapper.not-slick .sk__portfolio-item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333333%; } } @media all and (max-width: 679px) { .sk__portfolio-wrapper.not-slick .sk__portfolio-item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } } .sk__portfolio-wrapper.not-slick .sk__portfolio-thumblink-image { z-index: initial; } /** * 14. Featured Project Section * ============================ */ .sk__featured-project-section { overflow-x: hidden; padding-top: 140px; padding-bottom: 140px; } .sk__featured-project-background { -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0.76785); -ms-transform: scale(0.76785); transform: scale(0.76785); top: 11.6075%; } @media all and (max-width: 1920px) { .sk__featured-project-background { -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); top: 7.5%; } } @media all and (max-width: 991px) { /* xs + sm + md */ .sk__featured-project-background { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); top: 0; } } .sk__featured-project-infos-container { padding: 15px; } .sk__featured-project-section .sk__parallax-background-element { z-index: 0; } .featured-project { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .sk__featured-project-infos { position: relative; } .featured-project-padder { height: 140px; } @media all and (max-width: 575px) { /* xs */ .featured-project-padder { height: 0; } } /** * 15. Features Section * ==================== */ /** * Feature Boxes V1 */ .sk__features { padding-bottom: 70px; margin-left: -2px; margin-right: -2px; } .sk__feature-col { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2px; } .sk__feature, .sk__feature-clean { position: relative; overflow: hidden; width: 100%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .sk__feature { padding: 90px 60px 70px 60px; background-color: #171717; background-color: rgba(255,255,255,0.05); background-color: rgba(255,255,255,0.034); } .sk__feature-clean { padding: 40px 60px 30px 60px; } a.sk__feature, .sk__feature-clean { cursor: pointer; } .sk__feature:hover { background-color: rgba(255,255,255,0.025); } .sk__feature span[class*="icon-"], .sk__feature-clean span[class*="icon-"] { display: inline-block; font-size: 46px; margin-bottom: 31px; } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__feature { padding: 60px 46px 46px 46px; } .sk__feature-clean { padding: 40px 46px 30px 46px; } .sk__feature p, .sk__feature-clean p { line-height: 27px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__feature { padding: 46px 46px 38px 46px; } .sk__feature-clean { padding: 38px 46px 26px 46px; } } @media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ .sk__feature { padding: 46px 36px 34px 36px; } .sk__feature-clean { padding: 38px 20px 26px 20px; } .sk__feature p, .sk__feature-clean p { font-size: 14px; line-height: 24px; } } @media all and (min-width: 321px) and (max-width: 575px) { /* custom xs 1 */ .sk__feature { padding: 46px 36px 34px 36px; } .sk__feature-clean { padding: 38px 36px 24px 36px; } } @media all and (max-width: 320px) { /* custom xs 1 */ .sk__feature { padding: 34px 20px 18px 20px; } .sk__feature-clean { padding: 28px 20px 18px 20px; } } .sk__feature:before { content: ""; position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #898989; background-color: rgba(255,255,255,0.27); } .colorline-deco { /* tied with sk__feature side paddings */ position: relative; width: 100%; height: 1px; margin-top: 15px; margin-bottom: 13px; } .colorline-deco-normal { background-color: rgba(255,255,255,0.15); -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; opacity: 1; } .colorline-deco-hover { -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; opacity: 0; } .sk__feature:hover .colorline-deco-normal, .sk__feature-clean:hover .colorline-deco-normal { opacity: 0; } .sk__feature:hover .colorline-deco-hover, .sk__feature-clean:hover .colorline-deco-hover { opacity: 1; } .sk__features-subtext { display: -webkit-box; display: -ms-flexbox; display: flex; } .features-subtext-p { max-width: 90%; width: 320px; } @media all and (max-width: 575px) { /* xs */ .features-subtext-p { margin-left: auto; margin-right: auto; } } .features-subtext-deco { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background-color: #5C5C5C; background-color: rgba(255,255,255,0.22); margin-right: 15px; margin-top: 8px; } @media all and (max-width: 575px) { /* xs */ .features-subtext-deco { display: none; } } /** * Feature boxes V2 */ @media all and (max-width: 575px) { .sk__featureboxes h2.h2-large, .sk__featureboxes span.h2-large.sk__gradient-fancy-text-back { font-size: 19px; } } @media all and (max-width: 575px) { .sk__featurebox-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; max-width: 288px; margin: 0 auto; } } @media all and (max-width: 420px) { .sk__featurebox-col { max-width: 228px; } } .sk__featurebox { margin-bottom: 30px; } .sk__featurebox-headwrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 100%; margin-bottom: 17px; padding-top: 100%; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; } .sk__featurebox-headwrap img { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 100%; } .sk__featurebox h4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 12px; width: calc(100% - 24px); height: 100%; font-size: 40px; font-weight: 700; letter-spacing: -2.5px; text-transform: inherit; line-height: 1.3; margin-bottom: 0; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ .sk__featurebox h4 { font-size: 36px; letter-spacing: -2px; } } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__featurebox h4 { font-size: 30px; letter-spacing: -1.3px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__featurebox h4 { font-size: 25px; letter-spacing: -1.1px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__featurebox h4 { font-size: 30px; letter-spacing: -1.3px; } } @media all and (max-width: 420px) { /* custom */ .sk__featurebox h4 { font-size: 30px; letter-spacing: -1.3px; } } .sk__featurebox h5 { font-weight: 600; font-size: 17px; line-height: 1.55; color: #b8bcbf; } .sk__featureboxes-image-style .sk__featurebox h5 { color: #FFFFFF; } @media all and (min-width: 1400px) and (max-width: 1399px) { /* custom */ .sk__featurebox h5 { font-size: 16px; } } @media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ .sk__featurebox h5 { font-size: 14px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__featurebox h5 { font-size: 16px; } } @media all and (max-width: 767px) { /* xs + sm */ .sk__featurebox h5 { font-size: 15px; } } .sk__featurebox p.p-v2 { font-size: 13px; line-height: 23px; } @media all and (min-width: 1400px) { /* xxl */ .sk__featurebox p.p-v2 { font-size: 13px; line-height: 23px; } } @media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ .sk__featurebox p.p-v2 { font-size: 12px; line-height: 21px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__featurebox p.p-v2 { font-size: 12px; line-height: 21px; } } @media all and (max-width: 575px) { /* xs */ .sk__featurebox p.p-v2 { font-size: 13px; line-height: 23px; } } /** * 16. Laptop Section * ================== */ .sk__laptop-section { overflow-x: hidden; background-size: cover; background-position: left bottom; background-repeat: no-repeat; background-image: url(../images/section-laptop-background.svg); } .sk__laptop-image-col { z-index: 1; } .sk__laptop-image-col img { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1.56869); -ms-transform: scale(1.56869); transform: scale(1.56869); max-width: 626px; height: auto; } .sk__laptop-infos-container { position: relative; min-height: 1124px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .sk__laptop-infos-container > div { -ms-flex-preferred-size: auto; flex-basis: auto; } .sk__laptop-mockup-subcontainer { position: absolute; top: 30px; left: 0; width: 982px; height: 1040px; background-image: url(../images/MacBook-Pro-2020-Isometric-982x1040-by-Skilltech.webp); background-repeat: no-repeat; background-position: center; background-size: cover; } @media all and (min-width: 1660px) { /* custom */ .sk__laptop-mockup-subcontainer { left: -53px; } } .sk__laptop-infos-subcontainer { padding: 2vh 12px 33vh; } @media all and (min-width: 1400px) and (max-width: 1660px) { .sk__laptop-infos-container { min-height: 925px; } .sk__laptop-mockup-subcontainer { width: calc(982px * 0.8); height: calc(1040px * 0.8); } } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__laptop-infos-container { min-height: 788px; } .sk__laptop-mockup-subcontainer { width: calc(982px * 0.65); height: calc(1040px * 0.65); } .sk__laptop-infos-subcontainer { padding: 6vh 12px 33vh; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__laptop-infos-container { min-height: 727px; } .sk__laptop-mockup-subcontainer { width: calc(982px * 0.6); height: calc(1040px * 0.6); } } @media all and (max-width: 991px) { /* xs + sm + md */ .sk__laptop-infos-container { min-height: 650px; height: auto; padding-bottom: 100px; } .sk__laptop-infos-subcontainer { padding: 2vh 12px 0; } .sk__laptop-mockup-subcontainer { top: 30px; position: relative; width: 100%; height: 105.9%; background-size: contain; background-position: center top; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__laptop-mockup-subcontainer { width: 700px; height: calc(700px * 1.059); } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__laptop-mockup-subcontainer { width: 520px; height: calc(520px * 1.059); } } @media all and (max-width: 575px) { /* xs */ .sk__laptop-mockup-subcontainer { width: 90vw; height: calc(90vw * 1.059); } } @media all and (max-width: 767px) { .sk__laptop-infos-container.sk__flex-center-y { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .sk__laptop-infos-subcontainer { margin-top: 30px; } } .sk__laptop-infos { position: relative; } .sk__rectangles-laptop .sk__rectangle-white-1 { -webkit-transform: translate(168px,-87px); -ms-transform: translate(168px,-87px); transform: translate(168px,-87px); } .sk__rectangles-laptop .sk__rectangle-white-2 { -webkit-transform: translate(50px,37px); -ms-transform: translate(50px,37px); transform: translate(50px,37px); } .sk__rectangles-laptop .sk__rectangle-black { -webkit-transform: translate(104px,-20px); -ms-transform: translate(104px,-20px); transform: translate(104px,-20px); } .sk__rectangles-laptop { position: relative; max-width: 100%; width: 780px; } @media all and (max-width: 575px) { /* xs */ .sk__rectangles-laptop { width: 100%; } } .sk__rectangles-laptop-parallax-layers { position: absolute; height: 140%; width: 100%; top: -20%; right: 0; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__rectangles-laptop-parallax-layers { width: 73%; } } p.sk__rectangles-laptop-custom-p { margin: 0 0 1rem auto; } /** * 17. Services Section * ==================== */ .sk__services-background.sk__parallax-background-element { background-image: url(../images/services-background-v3.jpg); -webkit-filter: contrast(1.07); filter: contrast(1.07); -webkit-transform: scale(1.22); -ms-transform: scale(1.22); transform: scale(1.22); } .sk__iconbox { padding: 20px; margin-bottom: 20px; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__iconbox { padding: 20px 0; } } @media all and (max-width: 575px) { /* xs */ .sk__iconbox { padding: 20px 30px; max-width: 360px; margin: 0 auto; } } a.sk__iconbox-icon-link { display: inline-block; margin: 0 auto 25px; position: relative; width: 128px; height: 128px; mix-blend-mode: difference; -webkit-transition: initial; -o-transition: initial; transition: initial; } .mix-blend-difference { mix-blend-mode: difference !important; } @-webkit-keyframes counterRotateInfinitely { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes counterRotateInfinitely { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } span.sk__iconbox-icon-dash { opacity: 0; position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; border-radius: 100%; border: 2px dotted #000; z-index: -1; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-animation: counterRotateInfinitely 30s linear 0s infinite; animation: counterRotateInfinitely 30s linear 0s infinite; } a.sk__iconbox-icon-link:hover span.sk__iconbox-icon-dash { opacity: 1; width: 110%; height: 110%; top: -5%; left: -4%; } a.sk__iconbox-icon-link > span.sk__iconbox-icon { position: absolute; width: 128px; height: 128px; border: 2px solid rgba(255,255,255,0.13); border-radius: 130px; overflow: hidden; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon { border-color: rgba(255,255,255,0); } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(2), a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(3), a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(4), a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(5), a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(6), a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(7) { border: 2px solid transparent; } a.sk__iconbox-icon-link i, a.sk__iconbox-icon-link span[class^="icon-"] { padding: 3px; font-size: 44px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:not(:first-child) i, a.sk__iconbox-icon-link > span.sk__iconbox-icon:not(:first-child) span[class^="icon-"] { display: none; } a.sk__iconbox-icon-link span[class*="icon-"].sk__gradient-fancy-text { z-index: 1; background: #000000; color: #ffffff; -webkit-background-clip: text; -webkit-text-stroke: 0 transparent; } a.sk__iconbox-icon-link:hover span[class*="icon-"].sk__gradient-fancy-text { /* see it under colors */ } @-webkit-keyframes rotateInfinitely { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateInfinitely { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { content: ''; opacity: 0; position: absolute; width: 124px; height: 124px; top: 1px; left: 1px; border-radius: 130px; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: rotateInfinitely 3s linear 0s infinite; animation: rotateInfinitely 3s linear 0s infinite; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:first-child > span.sk__iconbox-trail { display: none; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(2) > span.sk__iconbox-trail { -webkit-animation-delay: 1s; animation-delay: 1s; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(3) > span.sk__iconbox-trail { -webkit-animation-delay: 2s; animation-delay: 2s; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(4) > span.sk__iconbox-trail { -webkit-animation-delay: 3s; animation-delay: 3s; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(5) > span.sk__iconbox-trail { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(6) > span.sk__iconbox-trail { -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(7) > span.sk__iconbox-trail { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { opacity: 1; height: 50%; top: 0; right: 0; border-top-left-radius: 62px; border-top-right-radius: 62px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { content: ''; position: absolute; width: 128px; height: 128px; top: -1px; left: -1px; border: 2px solid transparent; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; border-radius: 130px; background: #000000; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { -webkit-transform: scale(0.935) translate(-1px, -1px); -ms-transform: scale(0.935) translate(-1px, -1px); transform: scale(0.935) translate(-1px, -1px); } @media all and (min-width: 576px) and (max-width: 1920px) { a.sk__iconbox-icon-link { margin: 0 auto 15px; width: 112px; height: 112px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon { width: 112px; height: 112px; border-radius: 114px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { width: 108px; height: 108px; border-radius: 114px; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { border-top-left-radius: 54px; border-top-right-radius: 54px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { width: 112px; height: 112px; border-radius: 114px; } a.sk__iconbox-icon-link i, a.sk__iconbox-icon-link span[class^="icon-"] { font-size: 41px; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { -webkit-transform: scale(0.925) translate(-1px, -1px); -ms-transform: scale(0.925) translate(-1px, -1px); transform: scale(0.925) translate(-1px, -1px); } } @media all and (max-width: 575px) { /* xs */ a.sk__iconbox-icon-link { margin: 0 auto 15px; width: 98px; height: 98px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon { width: 98px; height: 98px; border-radius: 100px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { width: 108px; height: 108px; border-radius: 100px; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { border-top-left-radius: 47px; border-top-right-radius: 47px; } a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { width: 98px; height: 98px; border-radius: 100px; } a.sk__iconbox-icon-link i, a.sk__iconbox-icon-link span[class^="icon-"] { font-size: 35px; } a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { -webkit-transform: scale(0.925) translate(-1px, -1px); -ms-transform: scale(0.925) translate(-1px, -1px); transform: scale(0.925) translate(-1px, -1px); } } a.sk__iconbox-text-link { -webkit-transition: initial; -o-transition: initial; transition: initial; margin: 0 auto; } @media all and (min-width: 1400px) and (max-width: 1920px) { .sk__iconbox h5 { font-size: 19px; } } /** * 18. Skills Section (& Testimonials Section) * =========================================== */ p.skills-subhead { margin-bottom: 0; } .sk__skills h1.h1-small { line-height: 49px; } .sk__skill-wrap { position: relative; margin-bottom: 7px; } .sk__skill-el { display: inline-block; } .sk__skill-name { width: 18.6%; margin-right: 0.74%; } .sk__skill-area { position: relative; width: 75%; margin-right: 0.5%; height: 13px; border-top: 1px solid #222222; } .sk__skill-bar { height: 6px; position: absolute; margin-top: 6px; left: 0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .sk__skill-number { width: 4.5%; text-align: right; } .sk__skill-wrap p { font-family: 'Poppins', sans-serif; color: #e1e1e1; font-size: 14px; text-transform: uppercase; font-weight: 600; } @media all and (min-width: 1400px) { /* over xxl */ .sk__skill-wrap p { font-size: 15px; } } @media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ .sk__skill-name { width: 18.4%; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__skill-name { width: 22%; margin-right: 1%; } .sk__skill-area { width: 70.5%; margin-right: 0.9%; } .sk__skill-number { width: 4.5%; } } @media all and (max-width: 575px) { /* xs */ .sk__skill-wrap p { font-size: 12px; } } @media all and (max-width: 991px) { /* xs--to--md */ .sk__skill-name, .sk__skill-area { display: block; width: 100%; } .sk__skill-area { margin-bottom: 25px; } .sk__skill-number { position: absolute; right: 0; top: 0; min-width: 50px; } .sk__skill-wrap p { margin-bottom: 8px; } } /** * Testimonials * ============ */ .sk__testimonials { margin-top: 30px; margin-bottom: 30px; } .sk__testimonial-container { margin-bottom: 30px; margin-top: 20px; } @media and (max-width: 991px) { /* up to 991 */ .sk__testimonial-container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } } .sk__testimonial-img { width: 134px; height: 134px; border-radius: 134px; -ms-flex-negative: 0; flex-shrink: 0; } .sk__testimonial-img-1 { background-image: url(../images/testimonial-img-1.webp); } .sk__testimonial-img-2 { background-image: url(../images/testimonial-img-2.webp); } .sk__testimonial-txt { margin-left: 41px; } .sk__testimonial-txt h5 { margin-bottom: 0; line-height: 28.6px; } .sk__testimonial-txt p.p-xs { font-size: 11px; margin-bottom: 0.75rem; } .sk__testimonial-txt p:not(.p-xs) { margin-bottom: 0; margin-top: 4px; line-height: 20px; } @media all and (max-width: 575px) { /* xs */ .sk__testimonial-container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .sk__testimonial-img { margin: 0 auto 25px; } .sk__testimonial-txt { margin-left: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .sk__testimonial-txt p { margin-left: auto; margin-right: auto; } } /** * 19. CTA Section (Warped CTA) * ============================ */ section.sk__cta-warp { padding: 170px 0; overflow-x: hidden; } section.sk__cta-warp:not(.no-background) { background-image: url(../images/section-CTA-background-SVG.svg); } @media all and (max-width: 575px) { section.sk__cta-warp { padding: 75px 0; } } .sk__warped-text-wrapper { position: relative; z-index: 1; opacity: 0; } .sk__warped-text-wrapper[class*="clone"] { opacity: 0.15; position: absolute; top: 0; left: 0; height: auto; margin-left: auto; margin-right: auto; } .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { -webkit-transition: -webkit-filter 1s ease; transition: -webkit-filter 1s ease; -o-transition: filter 1s ease; transition: filter 1s ease; transition: filter 1s ease, -webkit-filter 1s ease; -webkit-filter: blur(10px); filter: blur(10px); -webkit-text-stroke: 5px transparent; } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { -webkit-text-stroke: 3.6px transparent; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { -webkit-text-stroke: 3.2px transparent; } } @media all and (max-width: 575px) { /* xs */ .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { -webkit-text-stroke: 2.9px transparent; } } .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text.deblur { -webkit-filter: blur(0); filter: blur(0); } .warped-text-clone-l1 { -webkit-transform: translateX(-15vw); -ms-transform: translateX(-15vw); transform: translateX(-15vw); } .warped-text-clone-l2 { -webkit-transform: translateX(-12vw); -ms-transform: translateX(-12vw); transform: translateX(-12vw); } .warped-text-clone-l3 { -webkit-transform: translateX(-9vw); -ms-transform: translateX(-9vw); transform: translateX(-9vw); } .warped-text-clone-l4 { -webkit-transform: translateX(-6vw); -ms-transform: translateX(-6vw); transform: translateX(-6vw); } .warped-text-clone-l5 { -webkit-transform: translateX(-3vw); -ms-transform: translateX(-3vw); transform: translateX(-3vw); } .warped-text-clone-r1 { -webkit-transform: translateX(15vw); -ms-transform: translateX(15vw); transform: translateX(15vw); } .warped-text-clone-r2 { -webkit-transform: translateX(12vw); -ms-transform: translateX(12vw); transform: translateX(12vw); } .warped-text-clone-r3 { -webkit-transform: translateX(9vw); -ms-transform: translateX(9vw); transform: translateX(9vw); } .warped-text-clone-r4 { -webkit-transform: translateX(6vw); -ms-transform: translateX(6vw); transform: translateX(6vw); } .warped-text-clone-r5 { -webkit-transform: translateX(3vw); -ms-transform: translateX(3vw); transform: translateX(3vw); } .sk__warped-text { font-family: 'Bebas Neue', sans-serif; line-height: 1; font-size: 6vw; color: #000000; background: #ffffff; -webkit-background-clip: text; -webkit-text-stroke: 4px transparent; } .sk__warped-text-wrapper[class*="clone"] .sk__warped-text { -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: #000000; background: #000000; -webkit-background-clip: text; -webkit-text-stroke: 4px transparent; } .sk__warped-text-wrapper[class*="clone"] .sk__warped-text.sk__warped-text-color-changed { color: #000000; background: #ffffff; -webkit-background-clip: text; -webkit-text-stroke: 4px transparent; padding: 0.065em; } @media all and (min-width: 1921px) and (orientation: landscape) { .sk__warped-text { font-size: 5vw; } } @media (orientation: portrait) { .sk__warped-text { font-size: 6vh; } } .sk__cta-warp h3 { -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; opacity: 0; letter-spacing: 40px; line-height: 1.7; margin-bottom: 2rem; margin-top: 0.1rem; } .sk__cta-warp h3.sk__cta-warp-h3-unspaced { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; opacity: 1; letter-spacing: 18px; } @media all and (max-width: 767px) { .sk__cta-warp h3 { letter-spacing: 17px; font-size: 16px; } .sk__cta-warp h3.sk__cta-warp-h3-unspaced { letter-spacing: 9px; } } .btn.sk__warped-button { opacity: 0; } /** * 20. Contact Us Section * ====================== */ section.sk__parallax-background-section.sk__contact-us { min-height: 80vh; } .sk__contact-us .sk__parallax-background-element { background-image: url(../images/contact-back.webp); } .sk__contact-us .sk__tint { mix-blend-mode: soft-light; } .sk__contact-left, .sk__contact-right { width: 100%; } @media all and (max-width: 575px) { /* xs */ .sk__contact-left { margin-left: auto; margin-right: auto; } .sk__contact-left p { max-width: 100%; } } @media all and (max-width: 420px) { /*custom xs*/ .sk__contact-left .p-v2 span { display: block; } .sk__contact-left .p-v2 span br { display: none; } } .sk__contact-page #contact-us { opacity: 0; } /** * 21. Browsers Section * ==================== */ .sk__browsers-section { } .sk__browsers-wrapper { position: relative; overflow: hidden; width: 100%; padding-top: 35.84%; } .sk__browsers-wrapper > div { -webkit-filter: drop-shadow(12px 15px 10px rgba(0,0,0,0.85)); filter: drop-shadow(12px 15px 10px rgba(0,0,0,0.85)); } .sk__browsers-tablet { position: absolute; bottom: 0; width: 25.757575%; height: 100%; left: 30%; opacity: 0; } .sk__browsers-desktop { position: absolute; bottom: -120%; width: 58.2750582%; height: 100%; left: 25.757575%; z-index: 1; } .sk__browsers-phone { position: absolute; bottom: 0; width: 15.9673668%; height: 100%; left: 64.0326332%; opacity: 0; } /** * 22. Custom Animations, Effects & Decorations * ============================================ */ /* Reusable decorations */ @media all and (max-width: 991px) { /* xs + sm + md */ span.heading-deco { display: none; } } .sk__rectangles { position: relative; width: 605px; height: 269px; max-width: 90vw; max-height: 40vw; } .sk__rectangles-full-left-main-tint, .sk__rectangles-fluid-left-main-tint { position: absolute; width: 100%; height: 71.43%; margin-top: 14.2857%; background-color: rgba(0,0,0,0.82); } @media all and (max-width: 575px) { .sk__rectangles-full-left-main-tint, .sk__rectangles-fluid-left-main-tint { width: 100%; height: 100%; margin-top: 0; } } .sk__rectangle-black { background-color: rgba(0,0,0,0.64); } .sk__rectangle-white-1, .sk__rectangle-white-2 { background-color: rgba(255,255,255,0.07); } .sk__rectangle-white-1 { -webkit-transform: translate(-64px,-67px); -ms-transform: translate(-64px,-67px); transform: translate(-64px,-67px); } .sk__rectangle-white-2 { -webkit-transform: translate(54px,57px); -ms-transform: translate(54px,57px); transform: translate(54px,57px); } .sk__deco-row-section { z-index: 10; } .sk__deco-row { border-top: 1px solid; border-bottom: 1px solid; padding: 75px 15px; } @media all and (max-width: 767px) { .sk__deco-row { padding: 48px 15px; } } /* rectangles on the left side */ .sk__rectangles-left { position: relative; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__rectangles-left { margin-bottom: 30px; } } .sk__rectangles-left-parallax-layers { z-index: -1; position: absolute; height: 140%; width: 100%; top: -20%; left: 0; } @media all and (max-width: 767px) { .sk__rectangles-left-parallax-layers { height: 100%; top: 0; } } .sk__rectangles-left .sk__rectangles { -webkit-transform: translate(-100px, -70px); -ms-transform: translate(-100px, -70px); transform: translate(-100px, -70px); } @media all and (max-width: 767px) { .sk__rectangles-left .sk__rectangles { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } /* text under rectangles left */ @media all and (max-width: 575px) { /* xs */ .sk__rectangles-left p { margin-left: auto; margin-right: auto; } } /* rectangles on the left side (full width) */ .sk__rectangles-full-left { position: relative; max-width: 100%; width: 780px; padding: 110px; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__featured-project-infos-container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sk__rectangles-full-left { width: 100%; padding: 14vw; } } @media all and (max-width: 575px) { /* xs */ .sk__featured-project-infos-container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sk__rectangles-full-left { width: 100%; padding: 14vw; } } .sk__rectangles-full-left-parallax-layers { position: absolute; height: 140%; width: 100%; top: -20%; left: 0; } @media all and (max-width: 575px) { /* xs */ .sk__rectangles-full-left-parallax-layers { height: 100%; top: 0; } } /* rectangles on the left side */ .sk__rectangles-right { position: relative; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__rectangles-right { margin-bottom: 30px; } } .sk__rectangles-right-parallax-layers { z-index: -1; position: absolute; height: 140%; width: 100%; top: -20%; left: 0; } @media all and (max-width: 767px) { .sk__rectangles-right-parallax-layers { height: 100%; top: 0; } } .sk__rectangles-right .sk__rectangle-white-1 { -webkit-transform: translate(168px,-87px); -ms-transform: translate(168px,-87px); transform: translate(168px,-87px); } .sk__rectangles-right .sk__rectangle-white-2 { -webkit-transform: translate(50px,37px); -ms-transform: translate(50px,37px); transform: translate(50px,37px); } .sk__rectangles-right .sk__rectangle-black { -webkit-transform: translate(104px,-20px); -ms-transform: translate(104px,-20px); transform: translate(104px,-20px); } /* text under rectangles right */ @media all and (min-width: 576px) { /* custom */ .sk__rectangles-right p { margin-left: auto; margin-right: 0; } } @media all and (max-width: 575px) { /* xs */ .sk__rectangles-right p { margin-left: auto; margin-right: auto; } } /** * Rings Section (theme.js controls it) * ------------------------------------ */ .sk__rings-section { overflow-x: hidden; background-image: url(../images/section-rings-background.svg); } .ring-l-container { -webkit-filter: blur(13px); filter: blur(13px); } .ring-m-container { -webkit-filter: blur(7.5px); filter: blur(7.5px); } .ring-s-container { -webkit-filter: blur(2px); filter: blur(2px); } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .ring-l-container { -webkit-filter: blur(8px); filter: blur(8px); } .ring-m-container { -webkit-filter: blur(4px); filter: blur(4px); } .ring-s-container { -webkit-filter: blur(1.5px); filter: blur(1.5px); } } @media all and (max-width: 575px) { /* xs */ .ring-l-container { -webkit-filter: blur(5px); filter: blur(5px); } .ring-m-container { -webkit-filter: blur(2px); filter: blur(2px); } .ring-s-container { -webkit-filter: blur(1.5px); filter: blur(1.5px); } } .ring-l, .ring-m, .ring-s { position: relative; border-radius: 100%; } .ring-l:after, .ring-m:after, .ring-s:after { content: ""; position: absolute; border-radius: 100%; } .ring-l.landscape { width: 785px; height: 785px; } .ring-l.portrait { width: 100vw; height: 100vw; } .ring-l:after { top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } .ring-m.landscape { width: 610px; height: 610px; } .ring-m.portrait { width: 77.707vw; height: 77.707vw; } .ring-m:after { top: 7.5px; left: 7.5px; width: calc(100% - 15px); height: calc(100% - 15px); } .ring-s.landscape { width: 432px; height: 432px; } .ring-s.portrait { width: 55.0318vw; height: 55.0318vw; } .ring-s:after { top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); } .sk__rings-section .sk__rectangles { -webkit-transform: translateX(11vw); -ms-transform: translateX(11vw); transform: translateX(11vw); } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__rings-section .sk__rectangles { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes hueRotator { 0% { -webkit-filter: hue-rotate(0); filter: hue-rotate(0); } 100% { -webkit-filter: hue-rotate(359.99deg); filter: hue-rotate(359.99deg); } } @keyframes hueRotator { 0% { -webkit-filter: hue-rotate(0); filter: hue-rotate(0); } 100% { -webkit-filter: hue-rotate(359.99deg); filter: hue-rotate(359.99deg); } } .hue-rotator { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: hueRotator linear 0s infinite; animation: hueRotator linear 0s infinite; } .duration-2s { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-20s { -webkit-animation-duration: 20s; animation-duration: 20s; } .sk__mix-multiply { mix-blend-mode: color; } .sk__mix-color-burn { mix-blend-mode: color-burn; } .sk__mix-color-dodge { mix-blend-mode: color-dodge; } .sk__mix-darken { mix-blend-mode: darken; } .sk__mix-difference { mix-blend-mode: difference; } .sk__mix-exclusion { mix-blend-mode: exclusion; } .sk__mix-hard-light { mix-blend-mode: hard-light; } .sk__mix-hue { mix-blend-mode: hue; } .sk__mix-lighten { mix-blend-mode: lighten; } .sk__mix-luminosity { mix-blend-mode: luminosity; } .sk__mix-multiply { mix-blend-mode: multiply; } .sk__mix-overlay { mix-blend-mode: overlay; } .sk__mix-plus-lighter { mix-blend-mode: plus-lighter; } /* not fully supported */ .sk__mix-saturation { mix-blend-mode: saturation; } .sk__mix-screen { mix-blend-mode: screen; } .sk__mix-soft-light { mix-blend-mode: soft-light; } /** * Edge beauty effect - add subtle styled edges and shadows to specified * sections (suitable for repeated fullscreen parallax sections). * Add .sk__edge-beauty class to relatively positioned * container
or
*/ .sk__edge-beauty-top { position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,1); } .sk__edge-beauty-bottom { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.13); } .sk__edge-beauty-bottom-shadow { position: absolute; bottom: 0; left: 0; width: 100%; height: 21.7vh; background: rgb(0,0,0); background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.29735644257703087)), color-stop(28%, rgba(0,0,0,0.11528361344537819)), to(rgba(0,0,0,0))); background: -o-linear-gradient(bottom, rgba(0,0,0,0.29735644257703087) 0%, rgba(0,0,0,0.11528361344537819) 28%, rgba(0,0,0,0) 100%); background: linear-gradient(0deg, rgba(0,0,0,0.29735644257703087) 0%, rgba(0,0,0,0.11528361344537819) 28%, rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); opacity: 0.7; } /* for creating colorful underlines */ span.sk__underliner { position: relative; } span.sk__underliner:before { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 5px; z-index: -1; } /** * 23. Footer * ========== */ footer { padding: 150px 0 40px; padding: 120px 0 40px; } .footer-background-container { padding: 16px; } .footer-background { border-radius: 100px; margin: 16px; width: calc(100% - 32px); } .footer-top { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 86px; padding-bottom: 70px; } @media all and (max-width: 991px) { footer { padding: 70px 0 40px; } .footer-background { border-radius: 47px; } .footer-top { padding-bottom: 32px; } } .top-footer-logo { max-width: 243px; } .top-footer-logo, .top-footer-tagline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top-footer-tagline { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .top-footer-tagline h5.h5-elegant { margin-bottom: 0; } a.footer-main-links { font-weight: 600; line-height: 3.05; } .footer-main { padding: 60px 0 95px 0; padding: 60px 0 60px 0; } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .footer-main { padding: 30px 0 24px 0; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .footer-main { padding: 30px 0 35px 0; } } @media all and (max-width: 575px) { /* xs */ .footer-main { padding: 20px 0 30px 0; } } .footer-main-large-col p { color: #6f7b85; } .footer-main-large-col p span { display: inline-block; } .footer-main-large-col h5 { margin-top: 40px; } .footer-main-small-col h5 { margin-top: 12px; margin-bottom: 31px; } footer .widget_nav_menu ul { list-style: none; padding-left: 0; } .footer-socials-section { width: 100%; } .footer-socials { display: inline-block; margin-top: 14px; margin-bottom: 27px; } .footer-socials a { position: relative; overflow: hidden; display: inline-block; font-size: 14px; margin: 0 8px 8px 0; width: 40px; height: 40px; line-height: 38px; border: 2px solid rgba(255,255,255,0.25); border-radius: 39px; text-align: center; color: #FFFFFF; } .footer-socials a:hover { border-color: rgba(255,255,255,0.45); } .footer-socials a:before { content: ''; -webkit-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } .footer-socials a:hover:before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; background: rgba(255,255,255,0.1); -webkit-transform: translate(50px, 50px) scale(1); -ms-transform: translate(50px, 50px) scale(1); transform: translate(50px, 50px) scale(1); } .footer-socials a:hover:before { background: rgba(255,255,255,0.43); -webkit-transform: translate(7px, 8px) scale(1.1); -ms-transform: translate(7px, 8px) scale(1.1); transform: translate(7px, 8px) scale(1.1); } .footer-socials a i, .footer-socials a span[class^="icon-"] { position: relative; z-index: 1; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .footer-socials a:hover i, .footer-socials a:hover span[class^="icon-"] { -webkit-transform: translate(-2px, -2px) scale(1.15); -ms-transform: translate(-2px, -2px) scale(1.15); transform: translate(-2px, -2px) scale(1.15); text-shadow: 2px 2px 2px rgba(0,0,0,0.38); } .footer-bottom { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 20px; } .footer-bottom h5, .footer-bottom p { margin-bottom: 0; } .footer-bottom h5 { font-size: 15px; } .footer-bottom p { font-size: 13px; font-family: 'Poppins', sans-serif; } .footer-bottom a { color: #969696; } .footer-bottom a:hover { color: #FFFFFF; } a.footer-bottom-right-links { margin-right: 25px; font-size: 13px; } a.footer-bottom-right-links:last-child { margin-right: 0; } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .footer-main-large-col p { font-size: 14px; line-height: 27px; color: #7f8b95; } a.footer-main-links { font-size: 14px; line-height: 2.5; } .footer-main-small-col h5 { margin-top: 12px; margin-bottom: 23px; font-size: 16px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .top-footer-tagline h5.h5-elegant { font-size: 17px; } .footer-main-small-col h5 { margin-top: 25px; margin-bottom: 12px; } a.footer-main-links { line-height: 2.5; font-size: 15px; } } @media all and (max-width: 575px) { /* xs */ .top-footer-logo, .top-footer-tagline { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .top-footer-logo { max-width: 260px; margin: 0 auto 12px; } .top-footer-tagline h5.h5-elegant { font-size: 17px; } .footer-main-large-col p { font-size: 13px; line-height: 23px; color: #9aa1a7; margin: 0 auto 20px; } a.footer-main-links { margin: 0 auto; font-size: 13px; line-height: 2.3; } .footer-main-small-col h5 { margin-top: 12px; margin-bottom: 13px; font-size: 16px; } .footer-bottom { font-weight: 600; } .footer-bottom > div { margin-bottom: 5px; } a.footer-bottom-right-links { margin-right: 15px; } .footer-bottom p, .footer-bottom a { font-size: 12px; } } /** * Simple Footer */ footer.sk__footer-simple { padding: 21px 0 40px; } .sk__footer-simple .footer-background-container { padding: 6px; } .sk__footer-simple .footer-background { border-radius: 24px; margin: 6px; width: calc(100% - 32px); } footer.sk__footer-simple.sk__footer-simple-fixed { position: fixed; bottom: 0; width: 100%; } @media all and (max-width: 767px) { footer.sk__footer-simple.sk__footer-simple-fixed { padding: 10px 0; } } /* Customizations for 404 Page and Coming Soon Page */ .sk__coming-soon-page footer.sk__footer-simple, .sk__404-page footer.sk__footer-simple { padding: 0; } .sk__coming-soon-page footer.sk__footer-simple .footer-bottom, .sk__404-page footer.sk__footer-simple .footer-bottom { padding-top: 0; padding-bottom: 20px; } .sk__coming-soon-page .carousel-item > section > .sk__main-slide-content, .sk__404-page .carousel-item > section > .sk__main-slide-content { margin-top: 130px; } @media all and (max-width: 767px) { .sk__coming-soon-page .carousel-item > section > div.container, .sk__404-page .carousel-item > section > div.container { -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; } .sk__coming-soon-page .carousel-item > section > .sk__main-slide-content, .sk__404-page .carousel-item > section > .sk__main-slide-content { margin-top: 70px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__coming-soon-page footer.sk__footer-simple a.footer-bottom-right-links, .sk__404-page footer.sk__footer-simple a.footer-bottom-right-links { margin-right: 18px; } } /** * 24. PAGE: Portfolio Item * ======================== */ /* Project Top (Header) Section */ .sk__project-header { overflow-x: hidden; padding-top: 135px; padding-bottom: 10px; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__project-header { padding-top: 125px; } } @media all and (max-width: 575px) { /* xs */ .sk__project-header { padding-top: 100px; } } .sk__project-thumbnail-portrait-col img, .sk__project-thumbnail-landscape-col img { opacity: 0; /* animated */ } .sk__project-thumbnail-portrait-cover { left: 12px; width: calc(100% - 24px); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .sk__project-thumbnail-landscape-cover { left: 12px; width: calc(100% - 24px); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } @media all and (min-width: 1200px) { /* xl and above */ .sk__project-thumbnail-landscape-col { padding-left: 40px; } .sk__project-thumbnail-landscape-cover { left: 20px; width: calc(100% - 52px); } } @media all and (max-width: 575px) { /* xs */ .sk__project-thumbnail-landscape-cover { left: 20px; width: calc(100% - 40px); } } /* Project Main Info */ .sk__project-main-info-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; } .sk__project-info-and-thumbnail { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .sk__project-main-heading { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } /* Main heading & Subheading */ .sk__project-main-heading h1 { -webkit-transform: translateY(140%); -ms-transform: translateY(140%); transform: translateY(140%); } @media all and (min-width: 1400px) and (max-width: 1779px) { /* custom */ .sk__project-main-heading h1.super-heading, .sk__project-main-heading span.super-heading.sk__gradient-fancy-text-back { font-size: 5rem; } } @media all and (max-width: 1199px) { .sk__project-main-heading h1.super-heading, .sk__project-main-heading span.super-heading.sk__gradient-fancy-text-back { line-height: 1; } } .sk__project-main-heading h2 { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } /* Project Infos */ .sk__project-infoboxes .fat-divider { -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .sk__project-infoboxes h4 { opacity: 0; } .sk__proj-infobox { position: relative; line-height: 24px; } @media all and (min-width: 1400px) and (max-width: 1499px) { .sk__project-infoboxes.col-xl-4 { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 35%; } } .sk__proj-infobox-label, .sk__proj-infobox-value { display: inline-block; vertical-align: top; width: 50%; text-align: left; } .sk__proj-infobox-label { font-size: 13px; font-weight: 600; } .sk__proj-infobox-value { font-size: 13px; font-weight: 300; } .sk__project-infoboxes-helper { display: block; width: 100%; } @media all and (min-width: 768px) and (max-width: 1199px) { /* md & lg*/ .sk__project-infoboxes-helper { display: inline-block; width: 46%; } .sk__project-infoboxes-helper.sk__right { float: right; } .sk__project-infoboxes { margin-top: 25px; margin-bottom: 25px; } } @media all and (min-width: 340px) and (max-width: 767px) { /* custom sm */ .sk__project-infoboxes-helper { display: block; width: 100%; } .sk__project-infoboxes { margin-top: 25px; margin-bottom: 25px; } } @media all and (max-width: 339px) { /* custom xs */ .sk__project-infoboxes-helper { display: block; width: 100%; } .sk__proj-infobox-label, .sk__proj-infobox-value { width: 100%; text-align: center; } .sk__project-infoboxes { margin-top: 25px; margin-bottom: 25px; } .sk__proj-infobox { margin-bottom: 9px; } } /* Project Body Section */ .sk__project-body { margin-top: 80px; margin-bottom: 260px; } @media all and (min-width: 1500px) and (max-width: 1920px) { .sk__project-body { margin-bottom: 160px; } } @media all and (min-width: 992px) and (max-width: 1499px) { .sk__project-body { margin-bottom: 100px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__project-body { margin-bottom: 120px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__project-body { margin-bottom: 100px; } } @media all and (max-width: 575px) { .sk__project-body { margin-bottom: 70px; } } .sk__project-body-image-col { overflow: hidden; } .sk__project-body-image-col img { opacity: 0; } .sk__project-body-info-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: self-end; -ms-flex-align: self-end; align-items: self-end; } @media all and (max-width: 575px) { /* xs */ .sk__project-body-info-col { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .sk__project-body-info-col .btn { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } @media all and (min-width: 1200px) and (max-width: 1779px) { .sk__project-body-info-col p { margin-bottom: 2.5rem; } .sk__project-body-info-col .btn { margin-bottom: 2.5rem; } } @media all and (max-width: 1199px) { .sk__project-body-info-col h4 { margin-bottom: 1.6rem; } .sk__project-body-info-col .btn { margin-bottom: 3.5rem; } } @media all and (min-width: 576px) and (max-width: 1199px) { .sk__project-body-info-col p { margin-bottom: 2.5rem; line-height: 26px; } } @media all and (max-width: 576px) { /* xs */ .sk__project-body-info-col p { margin-bottom: 2.5rem; line-height: 22px; } .sk__project-body-info-col p.p-xs { line-height: 18px; } } /** * Project Gallery (Fullscreen Parallax) */ /* Huge decorative text - NOT visible on all screens! */ .sk__huge-vertical-deco-text-wrapper { display: none; position: relative; height: 21.73vw; width: 100vw; max-width: 100vh; -ms-flex-item-align: baseline; align-self: baseline; } .sk__hvdt-left { margin-left: 0; margin-right: auto; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); -ms-transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); } .sk__hvdt-right { margin-left: auto; margin-right: 0; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: rotate(-90deg) translateY(-24.54vw); -ms-transform: rotate(-90deg) translateY(-24.54vw); transform: rotate(-90deg) translateY(-24.54vw); } span.sk__huge-vertical-deco-text { display: inline-block; position: absolute; min-width: 100%; width: auto; height: 100%; top: 0; left: 0; font-family: 'Bebas Neue', sans-serif; font-size: 21.73vw; letter-spacing: 1px; line-height: 1; white-space: nowrap; } /* Portfolio item gallery navigation */ .sk__parallax-gallery-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; top: 100px; right: -80px; width: 78px; height: calc(100vh - 200px); z-index: 1; } @media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ .sk__parallax-gallery-nav { right: -62px; width: 60px; } } @media all and (max-width: 575px) { /* xs */ .sk__parallax-gallery-nav { width: 30px; right: -42px; width: 40px; } } .sk__parallax-gallery-nav.sk__gallery-nav-visible { right: 0; } .sk__parallax-gallery-nav-icon { width: 56px; height: 56px; margin: 18px auto 4px 0; background: url(../images/gallery-icon-white.webp) no-repeat center center; background-size: cover; border-radius: 100%; -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33)); } @media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ .sk__parallax-gallery-nav-icon { width: 44px; height: 44px; } } @media all and (max-width: 575px) { /* xs */ .sk__parallax-gallery-nav-icon { width: 36px; height: 36px; } } a.sk__gallery-nav-link:link, a.sk__gallery-nav-link:visited { position: relative; margin: 18px auto 18px 22px; width: 12px; height: 12px; background: rgba(79,79,79,0.7) url(../images/glass.svg) no-repeat center center; background-size: cover; border-radius: 100%; display: block; } /* with icon */ @media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ a.sk__gallery-nav-link:link, a.sk__gallery-nav-link:visited { margin: 18px auto 18px 16px; } } @media all and (max-width: 575px) { /* xs */ a.sk__gallery-nav-link:link, a.sk__gallery-nav-link:visited { margin: 18px auto 18px 12px; } } a.sk__gallery-nav-link:link:before, a.sk__gallery-nav-link:visited:before { content: ''; position: absolute; border: 2px solid rgba(255,255,255,0); border-radius: 100%; width: calc(100% + 20px); height: calc(100% + 20px); top: -10px; left: -10px; } a.sk__gallery-nav-link:hover { background-color: rgba(255,255,255,0.8); -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); } a.sk__gallery-nav-link:hover:before { border: 2px solid rgba(255,255,255,1); width: calc(100% + 12px); height: calc(100% + 12px); top: -6px; left: -6px; opacity: 0.5; -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); } a.sk__gallery-nav-link:active, a.sk__gallery-nav-link.active { background-color: rgba(255,255,255,0.8); -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); } a.sk__gallery-nav-link:active:before { border: 2px solid rgba(255,255,255,0); width: calc(100% + 20px); height: calc(100% + 20px); top: -10px; left: -10px; } a.sk__gallery-nav-link:focus { outline: none; } /* Basic Gallery with thumbnails */ .sk__gallery-basic-thumbnails .carousel-indicators { position: initial; } .sk__gallery-basic-thumbnails .carousel-indicators { position: initial; width: 100%; margin: 16px 0; } .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { position: relative; width: 7.46vw; height: 5.4vw; width: 214.27px; height: 120.52px; margin-bottom: 16px; margin-right: 0; margin-left: 0; background-color: transparent; border: 0; border-top: 0; border-bottom: 0; opacity: .75; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target]:hover, .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target].active { opacity: 1; } @media all and (min-width: 1500px) and (max-width: 1779px) { .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 179.5px; height: 101px; } } @media all and (min-width: 1401px) and (max-width: 1499px) { .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 162px; height: 92px; } } @media all and (min-width: 1200px) and (max-width: 1400px) { /* xl custom */ .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 139.5px; height: 79px; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 117px; height: 66px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 87px; height: 49px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 129px; height: 72.56px; } } @media all and (max-width: 575px) { /* xs */ .sk__gallery-basic-thumbnails .carousel-indicators { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { width: 21.46vw; height: 9.4vw; } } .sk__gallery-basic-thumbnails .carousel-indicators button img { width: 100%; height: auto; } .sk__gallery-basic-thumbnails .carousel-control-next:focus, .sk__gallery-basic-thumbnails .carousel-control-next:hover, .sk__gallery-basic-thumbnails .carousel-control-prev:focus, .sk__gallery-basic-thumbnails .carousel-control-prev:hover { opacity: 1 !important; } .sk__gallery-basic-thumbnails .carousel-control-next, .sk__gallery-basic-thumbnails .carousel-control-prev { position: absolute; top: 50px; left: initial; width: 30px; height: 30px; } .sk__gallery-basic-thumbnails .carousel-control-prev { right: 111px; } .sk__gallery-basic-thumbnails .carousel-control-next { right: 45px; } @media all and (min-width: 1400px) and (max-width: 1920px) { /* custom xxl */ .sk__gallery-basic-thumbnails .carousel-control-prev { top: 60px; right: 85px; } .sk__gallery-basic-thumbnails .carousel-control-next { top: 60px; right: 29px; } } @media all and (min-width: 768px) and (max-width: 1399px) { /* md to xl */ .sk__gallery-basic-thumbnails .carousel-control-prev { top: 22px; right: 60px; } .sk__gallery-basic-thumbnails .carousel-control-next { top: 22px; right: 18px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__gallery-basic-thumbnails .carousel-control-prev { top: 15px; right: 42px; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .sk__gallery-basic-thumbnails .carousel-control-next { top: 15px; right: 9px; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } } @media all and (max-width: 575px) { /* xs */ .sk__gallery-basic-thumbnails .carousel-control-prev, .sk__gallery-basic-thumbnails .carousel-control-next { display: none; } } /* gallery - general */ @media all and (min-width: 768px) and (max-width: 991px) { /* md */ section[class*="gallery"] h1.super-heading { font-size: 72.75px; } } .carousel-caption-description p { font-family: 'Poppins', sans-serif; font-size: 18px; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0,0,0,0.55); padding: 0 14px; } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .carousel-caption-description p { font-size: 16px; line-height: 1.5; } } @media all and (max-width: 575px) { /* xs */ .carousel-caption-description p { font-size: 13px; line-height: 1.5; } } @media all and (min-width: 768px) and (max-width: 1199px) { /* xs + sm */ .sk__gallery-basic .carousel-caption, .sk__gallery-basic-thumbnails .carousel-caption { padding: 0; } } @media all and (max-width: 767px) { /* xs + sm */ .sk__gallery-basic .carousel-caption, .sk__gallery-basic-thumbnails .carousel-caption { padding: 0; bottom: 0; } } @media all and (max-width: 575px) { /* xs */ .sk__gallery-basic .carousel-indicators { display: none; } } /** * 25. PAGE: Service Item * ====================== */ /** * 26. PAGE: News (Blog) * ===================== */ .sk__news-header img[class*=sk__parallax-element] { z-index: -1; } .sk__articles-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -15px; margin-right: -15px; margin-bottom: 30px; } .sk__blog-article-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 10px; padding-right: 10px; margin-bottom: 30px; } @media all and (min-width: 1921px) { .sk__blog-article-wrapper { padding-left: 0.6vw; padding-right: 0.6vw; } } @media all and (max-width: 199px) { /* custom */ .sk__blog-main-content .sk__blog-article-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .post-image { position: relative; } .post-image-inner { overflow: hidden; } .sk__in-content-post-image { padding-bottom: 63.78%; width: 100%; background-size: cover; background-position: center; } .post-image:hover .sk__in-content-post-image { -webkit-transform: scale(1.06) rotate(0.0001deg); -ms-transform: scale(1.06) rotate(0.0001deg); transform: scale(1.06) rotate(0.0001deg); } .post-image span[class*=icon-] { position: absolute; right: 0; top: 0; color: #d9dbdc; background: rgba(0, 0, 0, 0.38); padding: 8px; margin: 10px; z-index: 3; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media all and (min-width: 1921px) { .sk__blog-feed .post-excerpt p { font-size: 21px; line-height: 1.7; } } @media all and (min-width: 1200px) and (max-width: 1920px) { /* custom xxl */ .sk__blog-feed .post-excerpt p { font-size: 18px; line-height: 1.7; font-weight: 300; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__blog-feed .post-excerpt p { font-size: 16px; line-height: 30px; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__blog-feed .entry-header h4 { font-size: 24px; } .sk__blog-feed .post-excerpt p { line-height: 28px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__blog-feed .entry-header h4 { font-size: 17px; line-height: 1.55; margin-bottom: 12px; } .sk__blog-feed .post-excerpt p { line-height: 27px; } } @media all and (max-width: 575px) { /* xs */ .sk__blog-feed .entry-header h4 { font-size: 15px; line-height: 1.6; margin-bottom: 8px; } } /** * 27. PAGE: News Item (Article) * ============================= */ .sk__article-1-header .sk__parallax-header-image { background-image: url(../images/article-1-header-cover.webp); } /* Blog (bigger) text */ .sk__single-article .post-content p { font-size: 21px; line-height: 1.7; } @media all and (min-width: 1200px) and (max-width: 1920px) { /* custom xxl */ .sk__single-article .post-content p { font-size: 18px; line-height: 1.7; font-weight: 300; } } @media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ .sk__single-article .post-content p { font-size: 17px; line-height: 30px; } } @media all and (min-width: 576px) and (max-width: 991px) { /* md */ .sk__single-article .post-content p { font-size: 16px; line-height: 30px; } } @media all and (max-width: 575px) { /* xs */ .sk__single-article .post-content p { font-size: 14px; line-height: 21px; } } /** * 28. Media queries * ================= */ @media all and (min-width: 1921px) { .sk__live-scaler { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } /** * 29. Other * ========= */ /* Clipped text stroke widths */ .sk__gradient-fancy-text, .sk__gradient-fancy-text-back { -webkit-text-stroke: 4px transparent; } span[class*="icon-"].sk__gradient-fancy-text, a.sk__iconbox-icon-link:hover span[class*="icon-"].sk__gradient-fancy-text { -webkit-text-stroke: 3.5px transparent; } @media all and (max-width: 767px) { .sk__gradient-fancy-text-back { -webkit-text-stroke: 3px transparent; } } /* Coming soon page text sizes correction */. @media all and (max-width: 767px) { .sk__coming-soon-page .sk__main-slide-content h2, .sk__coming-soon-page .sk__main-slide-content h2.h2-regular, .sk__coming-soon-page .sk__main-slide-content span.h2-regular.sk__gradient-fancy-text-back { font-size: 14px; margin-bottom: 1.5em; } } @-webkit-keyframes linkColorAnimation { 0% { background-size: 400% 400%; background-position: 0% 100%; } 15% { background-size: 170% 400%; background-position: 100% 100%; } 100% { background-size: 240% 400%; background-position: 100% 100%; } } @keyframes linkColorAnimation { 0% { background-size: 400% 400%; background-position: 0% 100%; } 15% { background-size: 170% 400%; background-position: 100% 100%; } 100% { background-size: 240% 400%; background-position: 100% 100%; } } .gradient-links:hover, .gradient-links-bright:hover { -webkit-animation: linkColorAnimation 5s ease 0s 1 forwards; animation: linkColorAnimation 5s ease 0s 1 forwards; } /* Shades used for backgrounds */ .dark-shade-1-bg { background-color: #000000 !important; } .dark-shade-1-bg-before:before { background-color: #000000 !important; } .dark-shade-1-bg-after:after { background-color: #000000 !important; } .dark-shade-1-clr { color: #000000 !important; } .dark-shade-1-border { border-color: #000000 !important; } .dark-shade-2-bg { background-color: #030303 !important; } .dark-shade-2-bg-before:before { background-color: #030303 !important; } .dark-shade-2-bg-after:after { background-color: #030303 !important; } .dark-shade-2-clr { color: #030303 !important; } .dark-shade-2-border { border-color: #030303 !important; } .dark-shade-3-bg { background-color: #0A0A0A !important; } .dark-shade-3-bg-before:before { background-color: #0A0A0A !important; } .dark-shade-3-bg-after:after { background-color: #0A0A0A !important; } .dark-shade-3-clr { color: #0A0A0A !important; } .dark-shade-3-border { border-color: #0A0A0A !important; } .dark-shade-4-bg { background-color: #242424 !important; } .dark-shade-4-bg-before:before { background-color: #242424 !important; } .dark-shade-4-bg-after:after { background-color: #242424 !important; } .dark-shade-4-clr { color: #242424 !important; } .dark-shade-4-border { border-color: #242424 !important; } .dark-shade-5-bg { background-color: #282A2D !important; } .dark-shade-5-bg-before:before { background-color: #282A2D !important; } .dark-shade-5-bg-after:after { background-color: #282A2D !important; } .dark-shade-5-clr { color: #282A2D !important; } .dark-shade-5-border { border-color: #282A2D !important; } .dark-shade-6-bg { background-color: #18191a !important; } .dark-shade-6-bg-before:before { background-color: #18191a !important; } .dark-shade-6-bg-after:after { background-color: #18191a !important; } .dark-shade-6-clr { color: #18191a !important; } .dark-shade-6-border { border-color: #18191a !important; } .dark-shade-7-bg { background-color: #101314 !important; } .dark-shade-7-bg-before:before { background-color: #101314 !important; } .dark-shade-7-bg-after:after { background-color: #101314 !important; } .dark-shade-7-clr { color: #101314 !important; } .dark-shade-7-border { border-color: #101314 !important; } .white-bg { background-color: #FFFFFF !important; } .white-bg-before:before { background-color: #FFFFFF !important; } .white-bg-after:after { background-color: #FFFFFF !important; } .white-clr { color: #FFFFFF !important; } .white-border { border-color: #FFFFFF !important; } .transparent-bg { background-color: transparent !important; } .transparent-bg-before:before { background-color: transparent !important; } .transparent-bg-after:after { background-color: transparent !important; } .transparent-clr { color: transparent !important; } .transparent-border { border-color: transparent !important; } /** * 30. Theme Elements & Theme Preview Only CSS * =========================================== */ .sk__icons-presentation-icons span { opacity: 0; display: inline-block; position: relative; width: 64px; height: 64px; padding: 16px; font-size: 32px; color: #ededed; text-align: center; } @media all and (max-width: 1920px) { .sk__icons-presentation-icons span { font-size: 26px; } } .sk__icons-presentation-icons span.icon-youtube2 { width: 128px; } .sk__icons-presentation-icons span:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 64px; text-align: center; } .sk__icons-presentation-section h1, .sk__icons-presentation-section h2 { opacity: 0; } .gsap-features .img-feature-wrap { max-width: 23.6%; margin: 0.7%; } @media all and (min-width: 768px) and (max-width: 1199px) { /* lg */ .gsap-features .img-feature-wrap { max-width: 31%; margin: 1.1%; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .gsap-features .img-feature-wrap { max-width: 46%; margin: 2%; } } @media all and (max-width: 575px) { /* xs */ .gsap-features .img-feature-wrap { max-width: 46%; margin: 2%; } } .tp-hero-content { margin-bottom: 44.5vh; margin-top: 14.5vh; } @media all and (min-width: 3840px) { /* 4K and above */ h1.h1-mega.theme-preview-hero-h1 { font-size: 236px; letter-spacing: -10px; padding-top: 6%; } } @media all and (min-width: 2080px) and (max-width: 3839px) { /* > FullHD, < 4K */ h1.h1-mega.theme-preview-hero-h1 { font-size: 157px; letter-spacing: -7px; padding-top: 6%; } } h2.h2-super.theme-preview-hero-h2 { font-size: 35px; letter-spacing: -0.9px; } @media all and (min-width: 3840px) { /* 4K and above */ h2.h2-super.theme-preview-hero-h2 { font-size: 70px; letter-spacing: -2px; } } @media all and (min-width: 1400px) and (max-width: 3839px) { /* > FullHD, < 4K */ h2.h2-super.theme-preview-hero-h2 { font-size: 47px; letter-spacing: -1.2px; font-size: 49px; letter-spacing: -1.9px; font-weight: 600; } h2.h2-super.theme-preview-hero-h2 .sk__animated-headline-words { font-weight: 700; } } @media all and (min-width: 768px) and (max-width: 991px) { /* md */ h2.h2-super.theme-preview-hero-h2 { font-size: 31px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ h2.h2-super.theme-preview-hero-h2 { font-size: 24px; letter-spacing: -0.5px; line-height: 1.5; } } @media all and (max-width: 575px) { /* xs */ h2.h2-super.theme-preview-hero-h2 { font-size: 24px; letter-spacing: -0.5px; } } .tp-thumbs { position: absolute; bottom: 0; min-height: 422px; width: 100%; } .tp-thumbs, .tp-thumbs-container { max-width: 1624px; } @media all and (min-width: 3840px) { /* 4K and above */ .tp-thumbs { min-height: 844px; } .tp-thumbs, .tp-thumbs-container { max-width: 3248px; } } @media all and (min-width: 2080px) and (max-width: 3839px) { /* > FullHD, < 4K */ .tp-thumbs { min-height: 468px; } .tp-thumbs, .tp-thumbs-container { max-width: 1940px; } } @media all and (min-width: 1801px) and (max-width: 2040px) { /* FullHD */ .tp-thumbs { min-height: 406px; width: 86%; left: 7%; } } @media all and (min-width: 992px) and (max-width: 1800px) { /* custom */ .tp-thumbs, .tp-thumbs-container { max-width: 80vw; } } @media all and (max-width: 991px) { /* custom */ .tp-thumbs, .tp-thumbs-container { max-width: 95vw; } .tp-thumbs { height: 40vh; max-height: 40vh; min-height: initial; } } @media all and (max-width: 575px) { .tp-thumbs { height: 0; max-height: 0; min-height: initial; } .tp-thumbs-container, .tp-thumbs-row { position: absolute; width: 100%; } } .tp-thumbs div[class*="tp-thumb-"] { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-filter: drop-shadow(0px -5px 22px black); filter: drop-shadow(0px -5px 22px black); -webkit-filter: drop-shadow(0px -5px 22px rgba(0,0,0,0.3)); filter: drop-shadow(0px -5px 22px rgba(0,0,0,0.3)); } .tp-thumb-01 { position: absolute; left: 37.007%; bottom: 0; width: 25.986%; padding-top: 24.138654%; -webkit-transform-origin: center 105%; -ms-transform-origin: center 105%; transform-origin: center 105%; } .tp-thumbs div[class*="tp-thumb-"]:not(.tp-thumb-01) { opacity: 0; } .tp-thumb-02, .tp-thumb-03 { position: absolute; bottom: 0; width: 22.475369%; padding-top: 21.06%; } .tp-thumb-02 { left: 17.1798%; -webkit-transform-origin: 180% 115%; -ms-transform-origin: 180% 115%; transform-origin: 180% 115%; } .tp-thumb-03 { left: 60.4064%; -webkit-transform-origin: -80% 115%; -ms-transform-origin: -80% 115%; transform-origin: -80% 115%; } .tp-thumb-04, .tp-thumb-05 { position: absolute; bottom: 0; width: 19.458128%; padding-top: 19.15025%; } .tp-thumb-04 { left: 0; -webkit-transform-origin: 400% 130%; -ms-transform-origin: 400% 130%; transform-origin: 400% 130%; } .tp-thumb-05 { right: 0; -webkit-transform-origin: -300% 130%; -ms-transform-origin: -300% 130%; transform-origin: -300% 130%; } @media all and (max-width: 930px) { /* custom */ .tp-thumb-01 { position: absolute; left: 26%; bottom: 0; width: 48%; padding-top: 44.8%; -webkit-transform-origin: center 105%; -ms-transform-origin: center 105%; transform-origin: center 105%; } .tp-thumb-02, .tp-thumb-03 { position: absolute; bottom: 0; width: 33.7130535%; padding-top: 31.59%; } .tp-thumb-02 { left: 12%; left: 0; } .tp-thumb-03 { right: 12%; left: 66.2869465%; } .tp-thumb-04, .tp-thumb-05 { display: none; } } /** * Theme top features */ @media all and (min-width: 768px) and (max-width: 991px) { /* md */ .sk__features-section-v2-header h2.h2-super, .sk__features-section-v2-header span.h2-super.sk__gradient-fancy-text-back { font-size: 40px; letter-spacing: -1.5px; } } @media all and (min-width: 576px) and (max-width: 767px) { /* sm */ .sk__features-section-v2-header h2.h2-super, .sk__features-section-v2-header span.h2-super.sk__gradient-fancy-text-back { font-size: 40px; letter-spacing: -1.7px; } } .server-response { padding-top: 10px; } .sf-success-message { color: #32eb9e; } .simple-error-label { font-size: 14px; color: #e3a4bb; } .sf-error-message { color: #ff6371; }