/* -------------------------------------------------------------------------- -MASTER STYLESHEET- Name: style.css Project: Zeplin Written By: Goldeyes Themes - (https://themeforest.net/user/goldeyes) Version: 1.0.0 FILE CONTENT:; 1. Theme included fonts 2. Theme reset styles 3. Typography 4. Global sections and options 4.1. Section and fullscreen blocks 4.2. Section titles and subtitles 4.3. Section waves with svg 4.4. Parallax options 4.5. Animated svg icons opitons 4.6. Popover styles 4.7. Modal styles 4.8. Animated icons 4.9. Animated elements 5. Pagetop styles 6. Navigation styles 6.1. Navigation types 6.2. Navigation colors 6.3. Dropdown and mega menu styles 6.4. Mobile navigation styles 7. Home pages 8. About section 9. Features section 10. History section 11. Team section 12. Fun facts section 13. Projects section 14. Works section 14.1. Filter Styles 14.2. Work item styles 14.3. Live pagination effects 14.4. Column System 15. Steps section 16. Skills section 17. Prices section 18. Contact section 19. Address section 20. Footer 21. Fullscreen search form styles 22. Page titles and hero styles for subpages 23. Lightbox styles 24. Social network colors -------------------------------------------------------------------------- */ /* ============================================== THEME FONTS ============================================== */ /* Oswald + Open sans Compilied Font Families - Customize link: https://fonts.google.com/?selection.family=Open+Sans:300,400,400i,600i,700|Oswald:300,400,500; */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600i,700|Oswald:300,400,500'); /* ============================================== THEME RESET ============================================== */ html, body{ width:100%; max-width: 100%; height:auto; padding:0; margin:0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ overflow-x: hidden !important; overflow-y: scroll; -webkit-tap-highlight-color:rgba(0,0,0,0.3); font-style: normal; font-weight: 400; font-size: 15px; font-family: 'Open Sans', sans-serif; line-height: 24px; letter-spacing: 0px; color: #9D9D9D;} section, .cover{ background-size:cover; background-position: center center; background-repeat: no-repeat; } ::selection{color:white;} html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{ -webkit-text-size-adjust:none; } /* Undragable Images */ img{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-user-drag: none; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,p{ color: inherit; font-variant-ligatures: common-ligatures; line-height: 1.63; padding:0; margin:0; } h1, .h1{ font-size: 36px; } h2, .h2{ font-size: 32px; } h3, .h3{ font-size: 24px; } h4, .h4{ font-size: 18px; } h5, .h5{ font-size: 14px; } h6, .h6{ font-size: 12px; } ol, ul{ list-style: none; padding: 0; } a, a:hover, a:focus, button, button:hover, button:focus{ text-decoration: none; color: inherit; cursor: pointer; } .disable-hover, .disable-hover * { pointer-events: none !important; } *, *:hover, *:focus{ outline:none !important; } /* ============================================== TYPOGRAPHY ============================================== */ .font-secondary{ font-family: 'Oswald', sans-serif; } .open-sans{ font-family: 'Open Sans', sans-serif; } .ls-xs{ letter-spacing: -1px !important; } .ls-sm{ letter-spacing: 1px !important; } .ls-md{ letter-spacing: 3px !important; } .ls-lg{ letter-spacing: 7px !important; } .ls-xl{ letter-spacing: 12px !important; } .ls-2xl{ letter-spacing: 20px !important; } .lh-xs{ line-height: 90%; } .lh-sm{ line-height: 120%; } .lh-md{ line-height: 150%; } .lh-lg{ line-height: 200%; } .lh-xl{ line-height: 240%; } .fs-xs{ font-size: 10px !important; } .fs-sm{ font-size: 20px !important; } .fs-md{ font-size: 30px !important; } .fs-lg{ font-size: 42px !important; } .fs-xl{ font-size: 46px !important; } .fs-2xl{ font-size: 52px !important; } .fs-3xl{ font-size: 56px !important; } .fs-4xl{ font-size: 60px !important; } @media screen and (max-width: 992px){ .fs-md-xxs{ font-size: 11px !important; } .fs-md-xs{ font-size: 13px !important; } .fs-md-sm{ font-size: 116px !important; } .fs-md-md{ font-size: 19px !important; } .fs-md-lg{ font-size: 24px !important; } .fs-md-xl{ font-size: 32px !important; } .fs-md-2xl{ font-size: 40px !important; } } /* ============================================== GLOBAL SECTIONS AND OPTIONS ============================================== */ /* Section and Fullscreen Blocks */ section, .section, .fullscreen{ width: 100%; height: auto; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; -ms-flex-align: center; align-items: center; justify-content: center; } .fullscreen{ height: 100vh; -ms-flex-pack: center; justify-content: center; align-items: center; } .section-inner{ display: block; height: auto; padding-top: 80px; padding-bottom: 80px; width: 100%; } @media screen and (max-width: 768px){ .section-inner{ padding-top: 80px; padding-bottom:80px; } } /* Typography */ /* Section Classics */ .section-subtitle{ text-align: center; font-size: 13px; color: #000; text-transform: uppercase; } .section-title{ text-align: center; color: #000; letter-spacing: 1px; font-weight: 300; line-height: 45px; text-transform: uppercase; } .section-desc{ text-align: center; margin:25px auto 0; max-width: 985px; font-size: 16px; color: #000; letter-spacing: 0; line-height: 31px; } @media screen and (max-width: 768px){ .section-title{ letter-spacing: 0.5px; line-height: 35px; font-size: 23px; } .section-desc{ margin: 15px auto 0; font-size: 15px; line-height: 23px; } } /* Background positions */ .bg-left{background-position: left !important;} .bg-right{background-position: right !important;} .bg-top{background-position: top !important;} .bg-bottom{background-position: bottom !important;} .bg-center{background-position: center center !important;} @media only screen and (max-width: 992px){ .bg-mobile-left{background-position: left !important;} .bg-mobile-right{background-position: right !important;} .bg-mobile-top{background-position: top !important;} .bg-mobile-bottom{background-position: bottom !important;} .bg-mobile-center{background-position: center center !important;} .bg-mobile-none{ background-image:none !important; } } /* Background options */ .bg-norepeat{background-repeat: no-repeat !important;} .bg-repeatx{background-repeat: repeat-x !important;} .bg-repeaty{background-repeat: repeat-y !important;} .bg-repeat{background-repeat: repeat !important;} .bg-scroll{background-attachment: scroll !important;} .bg-normal{background-size: auto !important;} .bg-fixed{background-attachment:fixed !important;} .bg-cover{background-size:cover !important;} /* Loader Circle */ .pageloader{ position: fixed; display: block; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background: white; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .loader-circle{ position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; margin-left: -30px; margin-top: -30px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } .loader-line-mask{ position: absolute; left: 50%; top: 50%; width: 30px; height: 60px; margin-left: -30px; margin-top: -30px; overflow: hidden; -webkit-transform-origin: 30px 30px; -moz-transform-origin: 30px 30px; -ms-transform-origin: 30px 30px; -o-transform-origin: 30px 30px; transform-origin: 30px 30px; -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0)); -webkit-animation: circleRotate 1.2s infinite linear; -moz-animation: circleRotate 1.2s infinite linear; -o-animation: circleRotate 1.2s infinite linear; animation: circleRotate 1.2s infinite linear; } .loader-line-mask .loader-line{ width: 60px; height: 60px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(60, 60, 60, 1); } .stop .loader-line-mask{ animation: none !important; } /* Dark */ .bg-dark .loader-circle{ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .bg-dark .loader-line-mask .loader-line{ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1); } /* Keyframes for circle loader */ @-webkit-keyframes circleRotate{ 0%{ -webkit-transform: rotate(0deg);} 100%{ -webkit-transform: rotate(360deg);}} @-moz-keyframes circleRotate{ 0%{ -moz-transform: rotate(0deg);} 100%{ -moz-transform: rotate(360deg);}} @-o-keyframes circleRotate{ 0%{ -o-transform: rotate(0deg);} 100%{ -o-transform: rotate(360deg);}} @keyframes circleRotate{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);}} /* Section Classics Under Dark */ .dark-section .section-subtitle{ color: #000; } .dark-section .section-title{ color: #FFFFFF; } .dark-section .section-desc{ color: #B9B9B9; } .text-dark,.text-dark-hover:hover{ color: #171717 !important; } .text-light,.text-light-hover:hover{ color: #fff !important; } /* Section Waves */ .section-waves{ position: relative; overflow: hidden; } .section-waves:before,.section-waves:after{ content:''; width: 100%; position: absolute; z-index: 5; pointer-events: none; height: 275px; background-image: url("../images/section-waves-bottom.svg"); background-size: cover; left: 0; bottom:-2px; background-repeat: no-repeat; background-position: center bottom; } .section-waves:after{ display: none; background-image: url("../images/section-waves-top.svg"); bottom: auto; top: -2px; background-position: center top; } .section-waves.section-waves-top:after{ display: block; } .section-waves.section-waves-top:before{ display: none; } .section-waves.section-waves-both:after, .section-waves.section-waves-both:before{ display: block; } .section-waves-both.hero.hero-full, .section-waves-both.fullscreen{ min-height: 115vh !important; } @media screen and (min-width: 1921px){ .section-waves:before, .section-waves:after{ height: 400px; } } @media screen and (max-height: 800px){ .section-waves{ min-height: 620px !important; } .section-waves-both{ min-height: 920px !important; } } /* Parallax Backgrounds */ .bg-parallax{ position: absolute; left:0; top:0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center center; background-repeat: no-repeat; } .bg-parallax.img-scale:not(..bg-parallax-mobiled){ top:-10%; height: 120%; } section.has-parallax{ position: relative; z-index: 0; overflow: hidden; } /* Animated SVG Icons */ .animated:not(.visible) path, .animated:not(.visible) ellipse, .animated:not(.visible) rect, .animated:not(.visible) polyline, .animated:not(.visible) polygon, .animated:not(.visible) circle, path.animated:not(.visible){ fill: transparent; stroke: transparent; } .animated.visible path, .animated.visible rect, .animated.visible ellipse, .animated.visible polyline, .animated.visible polygon, .animated.visible circle{ fill: transparent; stroke-width: 1px; stroke-dashoffset: 40; stroke-dasharray: 0; animation: 2s svgDrawing; } @keyframes svgDrawing { 0% { stroke-dasharray: 0 500; stroke-dashoffset: -155; } 100% { stroke-dasharray: 600; stroke-dashoffset: 10; } } /* Popover */ [data-toggle="popover"]{ cursor: pointer; position: relative; } .popover{ border: none; outline: none; padding: 25px; background-color: #141414; min-width: 240px; z-index: 999; font-size: 14px; color:#8d8d8d; border-radius: 14px; box-shadow: 2px 30px 65px 5px rgba(0,0,0,0.2); } .popover .popover-header{ background-color: transparent; padding: 0 0 4px 0; border:none !important; color:#cacaca; font-size: 14px; } .popover-body{ padding: 0; color:inherit; } .popover>.arrow{ display: none !important; } .popover img{ max-width: 100%; } @media only screen and (max-width: 641px){ .popover{ padding: 17px 15px 17px 22px; font-size: 12px; } } /* Fade scale effect - using for modals */ .modal{ backface-visibility: hidden; perspective: 1000px; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); } .modal.fade-scale .modal-dialog{ -ms-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7); opacity: 0; -webkit-transition: all .15s; -o-transition: all .15s; transition: all .15s; } .modal.fade-scale.show .modal-dialog{ opacity: 1; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } .modal .modal-close{ position: absolute; right: 5px; top: 15px; width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; border: none; z-index: 150; } .modal .modal-image-background{ background-position: center center; background-size: cover; min-height: 400px; } /* Animated Icons */ .icon-animated{ position: relative; } .icon-animated:after,.icon-animated:before{ z-index: -1; opacity: 0; pointer-events: none; background:inherit; border-radius:inherit; position: absolute; left:0; top:0; width: 100%; height: 100%; content:''; -webkit-animation-delay: 0s; } .icon-animated.inview:after, .icon-animated.inview:before{ animation: 1.3s icon-animate infinite; } .icon-animated.inview:before{ -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @keyframes icon-animate{ 0%{ opacity: .5; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } 100%{ -ms-transform: scale(1.35); -webkit-transform: scale(1.35); transform: scale(2.25); opacity: 0; } } /* Animated Elements */ .animated{ animation-duration: 0.8s; backface-visibility: hidden; visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .animated.fast{ animation-duration: 0.4s; } .visible{ visibility: visible !important; } @media only screen and (max-width: 1024px){ .animated{ visibility:visible; } } /* ============================================== PAGETOP ============================================== */ .pagetop{ height: 50px; line-height: 50px; border-bottom: 1px solid #E9E9E9; } body.dark-layout .pagetop, .section-dark.pagetop{ border-bottom: 1px solid rgba(150,150,150,0.1); } .pagetop .pagetop-desc{ font-size: 13px; color: #9E9E9E; line-height: inherit; } .pagetop .pagetop-socials{ display: flex; justify-content: flex-end; } .pagetop .pagetop-socials a{ display: inline-flex; height: 50px; width: 50px; align-items: center; justify-content: center; color: #A2A2A2; font-size: 11px; } .pagetop .pagetop-socials a:hover{ color: white; } @media only screen and (max-width: 992px){ .pagetop{ height: auto; line-height: normal; padding:10px 0; } .pagetop .pagetop-socials{ margin-top: 10px; justify-content: center; } .pagetop .pagetop-socials a{ height: 35px; width: 35px; font-size: 10px; } } /* ============================================== NAVIGATION ============================================== */ /* Navigation main styles */ .navigation{ z-index: 1050; width: 100%; height: 75px; line-height: 75px; align-items: center; display: flex; border: none; -webkit-transition: background 0.3s, height 0.3s, line-height 0.3s, border 0.3s, transform 0.3s; -moz-transition: background 0.3s, height 0.3s, line-height 0.3s, border 0.3s, transform 0.3s; transition: background 0.3s, height 0.3s, line-height 0.3s, border 0.3s, transform 0.3s; } .navigation .nav-container, .navigation .nav-wrapper, .navigation .nav{ height: 100%; -ms-flex-align: center; align-items: center; position: relative; } .navigation .container-fluid{ padding-left: 40px; padding-right: 40px; } @media only screen and (max-width: 992px){ .navigation .container-fluid{ padding-left: 20px; padding-right: 20px; } } /* Logo Options */ .navigation a.logo{ display: block; } .navigation .logo-white, .navigation .logo-dark{ display: none; } .navigation:not(.scrolled) .logo-white{ display: block; } .navigation.scrolled.nav-white .logo-dark{ display: block; } .navigation.scrolled.nav-dark .logo-white{ display: block; } .navigation.nav-white:not(.fixed) .logo-dark{ display: block; } .navigation.nav-white:not(.fixed) .logo-white{ display: none; } .navigation.details-white .logo-white{ display: block; } .navigation.details-white .logo-dark{ display: none; } .navigation.details-dark .logo-dark{ display: block; } .navigation.details-dark .logo-dark{ display: none; } /* Navigation types */ /* Sticky Navigation */ #navigation-sticky-wrapper{ position: relative; z-index: 1050; margin: 0; display: block; top: 0; } .navigation.sticky{ backface-visibility: hidden; } /* Fixed Navigation */ .navigation.fixed{ position: fixed !important; top: 0; left: 0; background-color: transparent; } .navigation.fixed:not(.scrolled){ color: #fff !important; background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } .navigation.fixed.hover-dark:not(.scrolled):hover{ background-color: rgba(0,0,0,0.3) !important; } .navigation.fixed.hover-white:not(.scrolled):hover{ background-color: rgba(255,255,255,0.15) !important; } .navigation.fixed.details-dark{ color: #0e0e0e !important; } .navigation.fixed.details-white{ color: #fff !important; } .navigation.fixed:not(.scrolled) .nav-links>.nav-link:hover, .navigation.fixed:not(.scrolled) .nav-links>div>.nav-link:hover{ background-color: transparent !important; } /* Scrolled options */ .navigation.fixed.scrolled:not(.fixed-height){ height: 55px; line-height: 55px; } /* White navigation */ .navigation.nav-white{ background-color: #fff; border-bottom: 1px solid #ECECEC; color: #333; } .navigation.nav-white .nav-links .dropdown-menu .nav-link:hover, .navigation.nav-white .nav-links .dropdown-menu li.active .nav-link{ background-color: #F0F0F0; } .navigation.nav-white .mega-menu>li ul.column .nav-link.column-title{ color: #060606 !important; } /* Dark navigation */ .navigation.nav-dark{ background-color: rgba(0,0,0,0.9); color: #fff; box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.06); } .navigation.nav-dark .nav-links .dropdown-menu{ background-color: rgba(14,14,14,0.95); color: #aaa; } .navigation.nav-dark .nav-links .dropdown-menu .nav-link:hover, .navigation.nav-dark .nav-links .dropdown-menu li.active .nav-link{ background-color: #232323; color: #fff; } .navigation.nav-dark .mega-menu>li ul.column .nav-link.column-title{ color: #fff !important; } /* Nav links top strip */ .navigation .nav-links .nav-link:before{ content:''; width: 0%; height: 2px; position: absolute; top: 0; left: 50%; display: block; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .navigation .nav-links>li>.nav-link:hover:before, .navigation .nav-links>li>.nav-link.active:before, .navigation .nav-links>li.active>.nav-link:before{ width: 100%; } /* Links wrapper */ .navigation .nav-links{ display: -moz-box; display: -ms-flexbox; display: flex; -ms-flex-pack: end; -ms-flex-align: center; justify-content: flex-end; margin: 0; width: 100%; height: 100%; white-space: nowrap; } .navigation .nav-links.nav-links-centered{ display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; width: 100%; } /* Links */ .navigation .nav-links li{ position: relative; } .navigation .nav-links li.logo-for-mobile-navigation{ display: none !important; } .navigation .nav-links .nav-link{ font-weight: 700; font-size: 11px; pointer-events: auto !important; text-transform: uppercase; padding: 0 20px; display: block; width: auto; height: 100%; opacity: 1; cursor: pointer; position: relative; -webkit-transition: all 0.2s, height 0s, line-height 0s, background 0s, padding 0s; -moz-transition: all 0.2s, height 0s, line-height 0s, background 0s, padding 0s; transition: all 0.2s, height 0s, line-height 0s, background 0s, padding 0s; } @media only screen and (min-width: 992px) and (max-width: 1200px){ .navigation .nav-links .nav-link{ padding: 0 14px; }} .navigation .nav-links .nav-link i{ font-weight: 900; font-size: 10px; } .navigation .nav-links .nav-link img{ max-width: 15px; display: inline-block; margin-top: -2px; } .navigation .nav-links>.extra-links{ padding: 0px; font-size: 0px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: auto; height: 100%; opacity: 1; cursor: pointer; position: relative; } /* Left Brackets */ .navigation .bracket{ width: 1px; height: 20px; background-color: rgba(150,150,150,0.3); display: inline-block; margin: 0 10px; } /* Hide by scroll */ .hide-by-scroll.hiding{ -webkit-transform: translateY(-100%) !important; -moz-transform: translateY(-100%) !important; -ms-transform: translateY(-100%) !important; transform: translateY(-100%) !important; } .sticky-wrapper .hide-by-scroll.hiding{ -webkit-transform: translateY(0%) !important; -moz-transform: translateY(0%) !important; -ms-transform: translateY(0%) !important; transform: translateY(0%) !important; } .sticky-wrapper.is-sticky .hide-by-scroll.hiding{ -webkit-transform: translateY(-100%) !important; -moz-transform: translateY(-100%) !important; -ms-transform: translateY(-100%) !important; transform: translateY(-100%) !important; } /* Dropdowns */ .navigation .nav-links .dropdown-menu{ display: none; border-radius: 0; min-width: 12rem; border: none; margin: -1px 0 0 0; box-shadow:0px 15px 45px 2px rgba(0, 0, 0, 0.09); padding: 10px 0px; left: 0; right: auto; } .navigation.dropdown-arrows .nav-links .dropdown-menu{ margin: 7px 0 0 0; } .navigation.dropdown-arrows .nav-links>li>.dropdown-menu:before{ position: absolute; left: 35px; top: -7px; content: ''; width: 0; display: block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid white; } .navigation.dropdown-arrows .nav-links>li>.dropdown-menu.to-left:before{ left: auto; right: 35px; } .navigation.dropdown-radius .nav-links .dropdown-menu{ border-radius: 8px; } .navigation .nav-links .dropdown-menu.to-left{ left: auto; right: 0; } .navigation .nav-links .dropdown-menu li{ line-height: 16px; font-size: 0px; } .navigation .nav-links .dropdown-menu .nav-link{ display: block; width: 100%; height: auto; padding: 11px 22px; line-height: normal; text-transform: none; font-size: 12px; font-weight: 600; letter-spacing: -0.15px; -webkit-transition: all 0.2s, height 0s, line-height 0s; -moz-transition: all 0.2s, height 0s, line-height 0s; transition: all 0.2s, height 0s, line-height 0s; } .navigation .nav-links .dropdown-menu .nav-link i{ font-size: 10px; font-weight: 600; margin-right: 6px; } /* Infinite dropdowns */ .navigation .nav-links .dropdown-menu .dropdown-menu{ top: 0; } .navigation .nav-links .dropdown-menu .dropdown-menu.to-left{ right: 100%; left: auto; } .navigation .nav-links .dropdown-menu .dropdown-menu.to-right{ right: auto; left: 100%; } /* Sub nav arrows */ .navigation .nav-links .has-sub .has-sub>a:after{ content: "\e6e2"; font-family: 'themify'; font-size: 9px; opacity: 1; border: none; vertical-align: 0; position: absolute; right: 15px; top: 50%; margin-top: -0.26em; } /* Buttons for navs */ .navigation .nav-button{ display: -ms-flexbox; display: flex; color: white; width: auto; height: 32px; line-height: 32px; align-self: center; white-space: nowrap; text-transform: uppercase; font-weight: 700; border-radius: 50px; font-size: 11px; padding: 0 40px; position: relative; } .navigation .mobile-nav-closer{ display: none; } /* Mega Menu */ .navigation .mega-menu{ display: -ms-flexbox; display: flex; padding: 20px 10px !important; white-space: normal; } .navigation .mega-menu>li{ display: -ms-flexbox; display: flex; -ms-flex-flow: row; flex-flow: row; } .navigation .mega-menu>li ul.column{ width: auto; min-width: 250px; padding: 0 20px; } .navigation .mega-menu>li ul.column .nav-link{ background-color: transparent !important; padding: 14px 0 !important; font-weight: 300 !important; font-size: 13px !important; } .navigation .mega-menu>li ul.column .nav-link.column-title{ padding-bottom: 13px; text-transform: uppercase; border-bottom: 1px solid rgba(150,150,150,0.1); font-size: 11px !important; cursor: default; } /* if mega menu too big */ .navigation .mega-menu.too-big{ width: 97vw; } .navigation .mega-menu.too-big>li{ width: 100%; } .navigation .mega-menu.too-big>li ul.column{ min-width: auto; width: auto; position: relative; flex: 1 1 auto; } /* Hamburger menu icon on the navigations */ .mobile-nb{ display: none; } .mobile-nb .hamburger-menu{ display: -ms-flexbox; display: flex; align-self: center; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; width: 30px; height: 11px; cursor: pointer; } .mobile-nb .hamburger-menu div{ align-self: flex-start; align-self: start; height: 1px; width: 75%; background: #141414; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .nav-dark .mobile-nb .hamburger-menu div{ background: #fff; } .mobile-nb .hamburger-menu div:nth-of-type(2){ width: 50%; margin: 2px 0; } .mobile-nb .hamburger-menu div:nth-of-type(3){ width: 100%; } .mobile-nb .hamburger-menu .meat{ width: 100%; transition: all 200ms ease-in-out; } .mobile-nb .hamburger-menu .bottom-bun{ width: 100%; transition: all 400ms ease-in-out; } .mobile-nb:hover .hamburger-menu .top-bun, .hamburger-menu:hover .top-bun, .menu-trigger:hover .hamburger-menu .top-bun{ animation: topbun-hover 0.8s infinite ease-in-out alternate; } .mobile-nb:hover .hamburger-menu .meat, .hamburger-menu:hover .meat, .menu-trigger:hover .hamburger-menu .meat{ animation: meat-hover 0.8s infinite ease-in-out alternate forwards 100ms; } .mobile-nb:hover .hamburger-menu .bottom-bun, .hamburger-menu:hover .bottom-bun, .menu-trigger:hover .hamburger-menu .bottom-bun{ animation: bottombun-hover 0.8s infinite ease-in-out alternate forwards 200ms; } @keyframes topbun-hover{0%{ width: 75%; }50%{ width: 100%; }100%{ width: 75%; } } @keyframes meat-hover{0%{ width: 50%; }50%{ width: 100%; }100%{ width: 50%; } } @keyframes bottombun-hover{0%{ width: 100%; }50%{ width: 50%; }100%{ width: 100%; } } /* Mobile Navigation */ @media only screen and (max-width: 992px){ .mobile-nb{ display: -ms-flexbox; display: flex; position: absolute; right: 25px; height: 100%; cursor: pointer; } .navigation .nav-menu{ position: fixed; width: 260px; height: 100%; padding: 70px 0; left: 0; top: 0px; z-index: 1; background-color: #2d2d2d; overflow-y: auto; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .navigation .nav-menu.animate{ -webkit-transition: transform 0.4s; -moz-transition: transform 0.4s; transition: transform 0.4s; } .navigation .nav-menu.active{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .navigation .nav-menu ul, .navigation .nav-menu ul li{ display: block; width: 100%; float: none; } .navigation .nav-menu ul li.logo-for-mobile-navigation{ position: absolute; left: 0; top: 0; width: 100%; height: 70px; padding: 10px 25px; display: -ms-flexbox !important; display: flex !important; -ms-flex-align: center; align-items: center; } .navigation .nav-menu ul li.logo-for-mobile-navigation img{ display: block !important; width: auto; height: auto; max-height: 40px; max-width: 90%; } .navigation .nav-links{ height: auto; } .navigation .nav-links .nav-link{ display: block; width: 100%; line-height: normal; padding: 13px 25px !important; font-size: 12px !important; letter-spacing: -0.24px; text-transform: none; font-weight: 400 !important; background-color: transparent; color: #8C8C8C; border-top: 1px solid rgba(255,255,255,0.03); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .navigation .nav-menu .nav-links li>.nav-link:hover, .navigation .nav-menu .nav-links li.active>.nav-link, .navigation .nav-menu .nav-links li.showing>.nav-link, .navigation .nav-menu .nav-links>li>.nav-link.active{ background-color: #373737 !important; color: white !important; } .navigation .nav-links .nav-link:before{ display: none !important; } .navigation .nav-links .has-sub>a:after{ content: "\e6e2"; font-family: 'themify'; font-size: 11px !important; opacity: 1; color: inherit; border: none; vertical-align: 0; position: absolute; right: 15px; top: 50%; margin-top: -0.26em; } .navigation.dropdown-arrows .nav-links>li>.dropdown-menu:before{ display: none !important; } .navigation .nav-links .dropdown-menu, .navigation .nav-links .dropdown-menu.mega-menu{ position: relative; padding: 0 !important; margin: 0 !important; background-color: transparent; padding: 0; left: 0 !important; top: 0 !important; } .navigation .nav-links .dropdown-menu .nav-link, .navigation .nav-links .dropdown-menu.mega-menu .nav-link{ display: block !important; position: relative; left: 0 !important; top: 0 !important; padding-left: 30px !important; background-color: #232323 !important; } .navigation .nav-links .dropdown-menu .dropdown-menu .nav-link{ padding-left: 45px !important; } .navigation .mega-menu>li ul.column{ width: auto; min-width: auto; padding: 0; } .navigation .bracket{ display: none !important; } .navigation .nav-links>.extra-links{ display: block; text-align: left; height: auto; padding: 0 10px; margin-top: 15px; line-height: normal; } .navigation .nav-links>.extra-links .nav-link{ display: inline-block; width: auto; height: auto; border-top: none; } .navigation .nav-button{ display: block; margin: 15px auto; width: 90%; text-align: center; } .navigation .mobile-nav-bg{ display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 0; cursor: pointer; } } /* ============================================== HOME PAGE VERSIONS HOME 1 - IMAGE BACKGROUND ============================================== */ /* Home type */ .home.version1{ overflow: hidden; position: relative; } .home.version1 .home-inner{ position: relative; z-index: 5; max-width: 100%; } /* Home Texts */ .home.version1 .home-title{ font-size: 34px; line-height: 52px; color: #FFFFFF; letter-spacing: 1.12px; margin-right: 1.12px; text-transform: uppercase; font-weight: 400; cursor: default; } .home.version1 .home-title1{ font-size: 32px; color: #FFFFFF; letter-spacing: 39px; margin-right: -39px; text-transform: uppercase; font-weight: 300; } .home.version1 .home-desc{ font-size: 17px; color: rgba(255,255,255,0.64); opacity: 0.7; font-weight: 300; font-style: italic; margin-top: 4px; } @media only screen and (max-width: 992px){ .home.version1 .home-title{ font-size: 26px; line-height: 160%; letter-spacing: 1px; margin-right: -1px; } .home.version1 .home-title1{ font-size: 28px; letter-spacing: 16px; margin-right: -16px; } .home.version1 .home-desc{ font-size: 16px; opacity: 0.9; } } @media only screen and (max-width: 640px){ .home.version1 .home-title{ font-size: 22px; letter-spacing: 1px; margin-right: -1px; } .home.version1 .home-title1{ font-size: 22px; letter-spacing: 9px; margin-right: -9px; } .home.version1 .home-desc{ font-size: 12px; opacity: 1; } } /* ============================================== HOME BUTTON STYLES - USABLE ON ALL SECTIONS ============================================== */ /* Button Styles */ .home-button,.home-button1,.home-button2{ font-size: 11px; color: #FFFFFF; text-transform: uppercase; font-weight: 700; display: inline-block; width: auto; height: auto; padding: 5px 35px; background: rgba(255,255,255,0.07); border: 1px solid #979797; border-radius: 50px; -webkit-transition: background 0.3s, border 0.3s, color 0.3s !important; -moz-transition: background 0.3s, border 0.3s, color 0.3s !important; transition: background 0.3s, border 0.3s, color 0.3s !important; } .home-button:hover,.home-button:focus,.home-button1:hover,.home-button1:focus,.home-button2:hover,.home-button2:focus{ color: white; } .home-button.dark-button{ color: #8a8a8a !important; background: rgba(200,200,200,0.1); border: 1px solid #c3c3c3; } .home-button.dark-button:hover{ color: #fff !important; } .home-button1{ background-color: rgba(0,0,0,0.2); border: none; } .home-button1.dark-button{ background-color: rgba(0,0,0,0.4); border: none; } .home-button2{ background-color: rgba(255,255,255,0.08); border: none; } .home-button2.dark-button{ background-color: rgba(90,90,90,0.5); border: none; } .home-button.border-effect:hover{ background-color: transparent !important; border-color: #141414 !important; color: #141414 !important; } /* Slider Arrows */ .slider-controls{ pointer-events: none; position: absolute; display: flex; height: 140px; width: 100%; left: 0; right: 0; top: 50%; margin-top: -70px; z-index: 2; } .slider-controls .slider-button{ pointer-events: auto; width: 30px; height: 140px; background: rgba(0,0,0,0.2); text-align: center; font-size: 22px; align-items: center; position: relative; overflow: hidden; line-height: 140px; color: #fff; backface-visibility: hidden; cursor: pointer; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .slider-controls .slider-button.slider-prev{ -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%) translate3d(0,0,0) translateZ(0); } .slider-controls .slider-button.slider-next{ -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%) translate3d(0,0,0) translateZ(0); } .home:hover .slider-controls .slider-button{ opacity: 1; -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); } /* ============================================== HOME 3 - RAINY DAY ============================================== */ /* Rainyday general options */ .home.rainyday{ position: relative; overflow: hidden; } .home.rainyday canvas{ width: 100%; height: 100%; left: 0; top: 0 !important; } .home.rainyday .home-inner{ position: absolute; z-index: 100; left: 0; top: 0; text-align: center; max-width: 100%; } .home.rainyday .home-text-slider .swiper-slide{ opacity: 0 !important; } .home.rainyday .home-text-slider .swiper-slide.swiper-slide-active{ opacity: 1 !important; } /* Texts */ .home.rainyday .home-subtitle{ font-size: 16px; color: #fff; letter-spacing: 17.78px; margin-right: -17.78px; font-weight: 400; text-transform: uppercase; } .home.rainyday .home-title{ font-size: 60px; color: #fff; letter-spacing: 0; font-weight: 400; text-transform: uppercase; margin-top: 8px; cursor: default; } .home.rainyday .home-desc{ font-size: 18px; color: #fff; letter-spacing: 0; font-style: italic; opacity: 0.7; margin-top: 4px; } @media only screen and (max-width: 992px){ .home.rainyday .home-subtitle{ font-size: 15px; letter-spacing: 9px; margin-right: -9px; } .home.rainyday .home-title{ font-size: 36px; } .home.rainyday .home-desc{ font-size: 15px; } } @media only screen and (max-width: 460px){ .home.rainyday .home-subtitle{ font-size: 13px; letter-spacing: 6px; } .home.rainyday .home-title{ font-size: 22px; } .home.rainyday .home-desc{ font-size: 13px; } } /* RainyDay Home - Text Slider Navigations */ .home.rainyday .home-navigations{ position: relative; text-align: center; margin-top: 5px; } .home.rainyday .home-navigations .slider-button{ display: inline-block; width: auto; cursor: pointer; height: 35px; margin:0 15px; } .home.rainyday .home-navigations .slider-button svg{ fill: #979797; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .home.rainyday .home-navigations .slider-button:hover svg{ -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } .home.rainyday .home-navigations .slider-button:hover svg#home-left-arrow{ -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); } /* Home text animations */ .home.rainyday .swiper-slide .home-title{ opacity: 0; backface-visibility: hidden; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 0s; transition-delay: 0s; } .home.rainyday .swiper-slide.swiper-slide-active .home-title, .home.rainyday .swiper-slide.swiper-slide-duplicate-active .home-title{ opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; } /* Play button options */ .home.rainyday .play-button{ position: absolute; width: 42px; height: 42px; left: 50%; bottom: 35px; margin-left: -21px; z-index: 120; } .play-button{ cursor: pointer; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s; } .play-button:hover{ -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .play-button:active{ -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } .play-button path.animating{ fill: transparent; stroke-dasharray: 0 500; stroke-dashoffset: -155; -webkit-transition: all 1.3s; -moz-transition: all 1.3s; transition: all 1.3s; } .play-button:hover path.animating{ stroke-dasharray: 600; stroke-dashoffset: 10; } /* Play button play/pause options */ .play-button rect.playing{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .play-button rect.playing:nth-of-type(2){ -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .play-button.paused rect.playing{ height: 0; transform: translateY(8px); opacity: 0; } .play-button.playing rect.playing{ height: 16; transform: translateY(0px); opacity: .5; } .play-button.playing:hover rect.playing{ opacity: 0.7; } .play-button .paused{ opacity: .5; -ms-transform: scaleY(1) translateY(0px); -webkit-transform: scaleY(1) translateY(0px); transform: scaleY(1) translateY(0px); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .play-button.playing .paused{ opacity: 0; -ms-transform: scaleY(0) translateY(100%); -webkit-transform: scaleY(0) translateY(100%); transform: scaleY(0) translateY(100%); } /* ============================================== HOME 4 - FULL WIDTH SLIDER VERSION ============================================== */ /* Slider and backgrounds */ .home.version4{ overflow: hidden; position: relative; } .home.version4 .home-slider-container { width: 100%; height: 550px; max-height: 70vh; min-height: 400px; } .home.version4.fullscreen .home-slider-container { width: 100%; height: 100vh; max-height: none; min-height: auto; } .home.version4 .swiper-slide{ text-align: center; font-size: 18px; background: #000; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .home.version4 .swiper-slide .slide-bg{ position: absolute; width: 100%; height: 100%; left:0; top: 0px; z-index: 0; background-size: cover; background-position: center center; backface-visibility: hidden; opacity: 0; -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) translate3d(0,0,0) translateZ(0); -webkit-transition: all 0.9s; -moz-transition: all 0.9s; transition: all 0.9s; -webkit-transition-delay: 0s; transition-delay: 0s; } .home.version4 .swiper-slide .slide-bg .bg-parallax{ height: 110%; height: calc(100% + 70px); top: -35px;} .home.version4 .swiper-slide.swiper-slide-active .slide-bg, .home.version4 .swiper-slide.swiper-slide-duplicate-active .slide-bg{ opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /* Slide inner */ .home-slider-container .swiper-slide .slide-inner{ position: relative; z-index: 10; opacity: 0; -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05) translate3d(0,0,0) translateZ(0); backface-visibility: hidden; -webkit-transition: all 0.9s; -moz-transition: all 0.9s; transition: all 0.9s; -webkit-transition-delay: 0s; transition-delay: 0s; } .home-slider-container .swiper-slide.swiper-slide-active .slide-inner, .home-slider-container .swiper-slide.swiper-slide-duplicate-active .slide-inner{ opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) translate3d(0,0,0) translateZ(0); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } /* First slide texts */ .home.version4 .swiper-slide .slide-inner .slide-subtitle{ font-size: 15px; color: #868686; letter-spacing: 7px; margin-left: 7px; font-weight: 300; text-transform: uppercase; } .home.version4 .swiper-slide .slide-inner .slide-title{ font-size: 60px; color: #FFFFFF; letter-spacing: 0px; font-weight: 400; text-transform: uppercase; margin-top: 6px; } .home.version4 .swiper-slide .slide-inner .slide-desc{ font-size: 15px; color: #868686; margin-top: 10px; } /* Second slide texts */ .home.version4 .swiper-slide .slide-inner .slide-subtitle2{ font-size: 15px; color: #8D664D; letter-spacing: 7px; font-weight: 300; text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased !important; } .home.version4 .swiper-slide .slide-inner .slide-title2{ font-size: 50px; color: #4E4646; letter-spacing: 0px; line-height: 62px; font-weight: 300; text-transform: uppercase; margin-top: 6px; -webkit-font-smoothing: subpixel-antialiased !important; } .home.version4 .swiper-slide .slide-inner .slide-desc2{ font-size: 15px; color: #868686; margin-top: 10px; } /* Third slide texts */ .home.version4 .swiper-slide .slide-inner .slide-subtitle3{ font-size: 15px; color: #9D9D9D; letter-spacing: 7px; font-weight: 300; text-transform: uppercase; } .home.version4 .swiper-slide .slide-inner .slide-title3{ font-size: 60px; color: #444444; letter-spacing: 0px; line-height: 62px; font-weight: 400; text-transform: uppercase; margin-top: 6px; } .home.version4 .swiper-slide .slide-inner .slide-desc3{ font-size: 15px; color: #959595; margin-top: 10px; } @media screen and (max-width: 992px){ .home.version4 .swiper-slide .slide-inner .slide-title{ font-size: 40px; } .home.version4 .swiper-slide .slide-inner .slide-title2{ font-size: 32px; line-height: 42px; } .home.version4 .swiper-slide .slide-inner .slide-title3{ font-size: 40px; } } @media screen and (max-width: 640px){ .home.version4 .swiper-slide .slide-inner .slide-title{ font-size: 32px; } .home.version4 .swiper-slide .slide-inner .slide-title2{ font-size: 24px; line-height: 38px; } .home.version4 .swiper-slide .slide-inner .slide-desc2{ font-size: 14px; color: #fff; } .home.version4 .swiper-slide .slide-inner .slide-title3{ font-size: 32px; } .home.version4 .swiper-slide .slide-inner .slide-desc3{ font-size: 14px; color: #666; } } /* ============================================== HOME 5 - PARTICLE ANIMATION ============================================== */ /* Version5 general options */ .home.version5{ position: relative; overflow: hidden; } .home.version5 .home-inner{ position: relative; z-index: 30; left: 0; top: 0; text-align: center; } .home.version5 .home-text-slider .swiper-slide{ opacity: 0 !important; } .home.version5 .home-text-slider .swiper-slide.swiper-slide-active, .home.version5 .home-text-slider .swiper-slide.swiper-slide-duplicate-active{ opacity: 1 !important; } /* Texts */ .home.version5 .home-subtitle{ font-size: 15px; color: #fff; letter-spacing: 24px; margin-right: -24px; margin-top: -30px; font-weight: 400; text-transform: uppercase; } .home.version5 .swiper-slide .home-title{ font-size: 45px; color: #fff; letter-spacing: 0; font-weight: 400; text-transform: uppercase; margin-top: 3px; cursor: default; opacity: 0; backface-visibility: hidden; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 0s; transition-delay: 0s; } .home.version5 .swiper-slide.swiper-slide-active .home-title, .home.version5 .swiper-slide.swiper-slide-duplicate-active .home-title{ opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; } @media only screen and (max-width: 992px){ .home.version5 .home-inner{ max-width: 100%; } .home.version5 .home-subtitle{ font-size: 15px; letter-spacing: 9px; margin-right: -9px; } .home.version5 .swiper-slide .home-title{ font-size: 32px; } } @media only screen and (max-width: 640px){ .home.version5 .swiper-slide .home-title{ font-size: 22px; } } #particles-wrapper, #particles-wrapper canvas{ position: absolute; z-index: 25; left: 0; top: 0; width: 100%; height: 100%; } /* Version 5 Home - Text Slider Navigations */ .home.version5 .home-navigations{ position: relative; text-align: center; margin-top: 5px; } .home.version5 .home-navigations .slider-button{ display: inline-block; width: auto; cursor: pointer; height: 35px; margin:0 15px; } .home.version5 .home-navigations .slider-button svg{ fill: #979797; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .home.version5 .home-navigations .slider-button:hover svg{ -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } .home.version5 .home-navigations .slider-button:hover svg#home-left-arrow{ -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); } .home.version5 .play-button{ position: absolute; width: 42px; height: 42px; left: 50%; bottom: 35px; margin-left: -21px; z-index: 120; } /* ============================================== HOME 6 - WAVE EFFECT ============================================== */ /* Home version 6 texts */ .home.version6{ height: 90vh; } @media screen and (max-width: 1441px){ .home.version6{ height: 100vh; } } .home.version6 .home-inner{ position: relative; z-index: 5; } .home.version6 .home-title{ font-size: 54px; color: #FFFFFF; letter-spacing: 0px; line-height: 58px; font-weight: 400; text-transform: uppercase; margin-top: -60px; } .home.version6 .home-desc{ font-size: 14px; color: #FFFFFF; margin-top: 10px; margin-left: 4px; } .home.version6 + section .section-inner{ padding-top: 100px; } @media screen and (max-width: 992px){ .home.version6 .home-title{ font-size: 42px; line-height: 53px; } } @media screen and (max-width: 480px){ .home.version6 .home-title{ font-size: 36px; line-height: 46px; } } /* ============================================== HOME 7 - FULL SCREEN SLIDER VERSION ============================================== */ /* Slides */ .home.version7 .swiper-slide{ text-align: center; font-size: 18px; background: #000; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .home.version7 .swiper-slide .title-line{ width: 70px; height: 1px; } /* Slider Arrows */ .home.version7:hover .slider-controls .slider-button{ opacity: 1; -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); } /* ============================================== ABOUT SECTION ============================================== */ section.about{ border-bottom: 1px solid #e6e6e6; } section.about .section-inner{ padding-bottom: 50px; } /* You can see section title, subtitle .etc styles on the THEME SKELETON > Typograhy on top this file */ /* Boxes on about section */ .about-boxes{ margin-top: 70px; } .about-boxes .about-box{ background-color: transparent; padding: 45px 15px; cursor: default; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; } .about-boxes .about-box:hover{ background-color: #f6f6f6; } /* Icon on box */ .about-boxes .about-box-icon{ font-size: 70px; height: 80px; display: flex; align-items: center; justify-content: center; } /* Box Title */ .about-boxes .box-title{ margin-top: 30px; font-size: 18px; color: #515151; letter-spacing: 1px; text-transform: uppercase; font-weight: 300; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; } /* Box Description */ .about-boxes .box-desc{ margin-top: 15px; font-size: 15px; color: #9d9d9d; letter-spacing: 0; line-height: 24px; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; } /* Box Buttons */ .about-boxes .box-buttons{ margin: 30px auto 0; position: relative; height: 25px; } /* Circle placeholder */ .about-boxes .box-buttons .box-button-placeholder{ width: 25px; height: 25px; line-height: 25px; color: #aaa; font-size: 12px; border-radius: 25px; border: 1px solid #d4d4d4; left: 50%; top:3px; margin-left: -12.5px; text-align: center; position: absolute; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .about-boxes .about-box:hover .box-buttons .box-button-placeholder{ opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition-delay: 0.0s; transition-delay: 0.0s; } /* Button */ .about-boxes .box-buttons .box-button{ color: white; backface-visibility: hidden; font-weight: 700; display: inline-block; opacity: 0; padding: 3.5px 32px; font-size: 11px; border-radius: 30px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .about-boxes .about-box:hover .box-button{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .about-boxes .box-buttons .box-button:hover{ background-color: #131313; } /* ============================================== FEATURES SECTION ============================================== */ .features{ position: relative; } .features .section-inner{ padding-bottom: 0; } .features .features-slider-wrapper{ margin-top: 90px; width: 100%; } /* Hotspots */ .hotspots{ position: relative; } .hotspots img{ display: block; width: 100%; max-width: 1020px; margin:0 auto; height: auto; position: relative; z-index: 1; } .hotspots img[src*="loading"] + .items .item,.hotspots img[src*="loader"] + .items .item{ display: none; } .hotspots img[src*="loading"],.hotspots img[src*="loader"]{ width: auto; margin:40px auto; display: block; } @media screen and (max-width: 1280px) and (min-width: 768px){ .features .hotspots{ max-width: 60%; } } @media screen and (max-width: 768px){ .features .hotspots{ max-width: 90%; } } .hotspots .items{ position: absolute; width: 100%; height: 100%; left:0; top:0; z-index: 2; } .hotspots .items .item{ position: absolute; } .hotspots .items .item .item-inner{ display: block; width: 40px; height: 40px; border-radius: 100%; background: #fff; box-shadow: 0 10px 34px 0 rgba(0,0,0,0.14); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } /* Darker shadow for features section */ .features .hotspots .items .item .item-inner{ box-shadow: 0 10px 34px 0 rgba(0,0,0,0.50); } @media screen and (max-width: 768px){ .hotspots .items .item .item-inner{ width: 25px; height: 25px; } } .hotspots .items .item.center{ left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } /* Features Slider Bullets */ .features-slider-wrapper .features-pagination{ position: relative; z-index: 100; top: -10px; } .features-slider-wrapper .swiper-pagination-bullet{ width: 12px; margin:0px 8px !important; height: 12px; background-color: #4d4d4d; opacity: 1; } /* Features Slider */ .features .features-slider-container{ position: relative; margin-top: -30px; padding: 0 15px 120px; width: 100%; } .features .features-slider-container .features-bg{ height: 140%; height: calc(100% + 240px); position: absolute; z-index: 0; left:0; bottom:0; width: 100%; } .features .features-slider-container .features-bg:before{ position: absolute; left: 50%; margin-left: -22px; top:99.8%; content: ''; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 17px solid; } @media screen and (max-width: 992px){ .features .features-slider-container .features-bg{ height: 120%; height: calc(100% + 140px); } } @media screen and (max-width: 768px){ .features .features-slider-container .features-bg{ height: 110%; height: calc(100% + 100px); } .features .features-slider-container{ padding: 0 15px 70px; } } .features .features-slider-wrapper .swiper-slide{ opacity: 0 !important; } .features .features-slider-wrapper .swiper-slide.swiper-slide-active{ opacity: 1 !important; } /* Features Slider Texts */ .features .features-slider .features-slider-title{ margin-top: 55px; font-size: 26px; color: #c9c9c9; letter-spacing: 0; } .features .features-slider .features-slider-desc{ margin: 25px auto 0; font-size: 15px; line-height: 33px; max-width: 970px; color: #a4a4a4; letter-spacing: 0; } .features .features-slider .features-slider-button{ margin: 35px auto 0; padding: 6px 60px 5px; font-weight: 600; border-radius: 50px; display: inline-block; font-size: 12px; color: #a4a4a4; border: 1px solid #adadad; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .features .features-slider .features-slider-button:hover{ color: white; } @media screen and (max-width: 768px){ .features .features-slider .features-slider-title{ margin-top:40px; font-size: 19px; } .features .features-slider .features-slider-desc{ margin:10px auto 0; line-height: 21px; } .features .features-slider .features-slider-button{ margin: 20px auto 0; padding: 5px 50px 4px; } } /* ============================================== HISTORY SECTION ============================================== */ /* Wrapper and keeper */ .history-wrapper{ margin-top: 70px; width: 100%; overflow: visible; height: auto; position: relative; -webkit-transition: height 0.8s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: height 0.8s cubic-bezier(0.77, 0, 0.2, 1); transition: height 0.8s cubic-bezier(0.77, 0, 0.2, 1); } .history-wrapper:before{ width: 1px; z-index: -1; height: 100%; position: absolute; content:''; left:50%; margin-left: -0.5px; background-color: #dfdfdf; } .history-wrapper.news-loading{ overflow: hidden; } /* Dates */ .history-wrapper .date,.history-wrapper .start-date{ background-color: #E5E5E5; color: #5A5A5A; width: auto; clear: both; max-width: 150px; display: block; cursor: default; margin:50px auto; text-align: center; border-radius: 60px; height: 32px; line-height: 32px; text-transform: uppercase; font-size: 13px; font-weight: 600; list-style: none !important; } .history-wrapper .start-date{ color: white; margin-top: 0; } .history-wrapper .date:not(.start-date){ top: 10px; position: relative; } /* Notes */ .history-wrapper .note{ width: 50%; float: left; clear: left; margin: 25px auto; position: relative; cursor: default; } .history-wrapper .date + .note{ margin-top: 0px; } .history-wrapper .note .note-inner{ color: #9E9E9E; width: 90%; float: left; background-color: #fff; border-radius: 17px; border: 1px solid #E3E3E3; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .history-wrapper .note .note-inner:before,.history-wrapper .note .note-inner:after{ width: 10%; background: #E3E3E3; content:''; position: absolute; top: 50px; right: 0; height: 1px; } .history-wrapper .note .note-inner:after{ width: 9px; height: 9px; top: 46.5px; right: -4.5px; border-radius: 100%; } .history-wrapper .note:hover .note-inner{ color: #AEAEAE; background-color: #232323; border-color: #232323; box-shadow: 0 34px 51px -20px rgba(0,0,0,0.54); } .history-wrapper .note:hover .note-inner:before,.history-wrapper .note:hover .note-inner:after{ background: #4A4A4A; } /* Fixed to right notes */ .history-wrapper .note:nth-of-type(2n){ float: right; clear: right; } .history-wrapper .note:nth-of-type(2n) .note-inner{ float: right; } .history-wrapper .note:nth-of-type(2n) .note-inner:before{ left: 0; right: auto; } .history-wrapper .note:nth-of-type(2n) .note-inner:after{ left: -4.5px; right: auto; } /* Note Texts and image */ .history-wrapper .note .note-image{ width: 100.5%; height: auto; overflow: hidden; margin: -1px; border-top-left-radius: 17px; border-top-right-radius: 17px; } .history-wrapper .note .note-image img{ width: 100.5%; width: calc(100% + 2px); position: relative; left: -1px; right: -1px; top: -1px; display: block; height: auto; } .history-wrapper .note .note-inner .note-texts{ padding: 30px 32px 28px; position: relative; } .history-wrapper .note .note-date{ color: #979797; font-size: 14px; letter-spacing: -0.2px; font-style: italic; } .history-wrapper .note .note-title{ font-size: 16px; letter-spacing: -0.2px; font-weight: 600; } .history-wrapper .note .note-desc{ margin-top:10px; color: inherit; font-size: 15px; line-height: 26px; } /* Note Button */ .history-wrapper .note .note-button{ position: absolute; top: 0; display: block; width: 46px; height: 46px; line-height: 46px; margin-top: -23px; right: 7%; background-color: #fff; border: 1px solid #E3E3E3; border-radius: 100%; text-align: center; backface-visibility: hidden; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .history-wrapper .note .note-button i{ color: #9e9e9e; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } @media screen and (max-width: 568px){ .history-wrapper .note .note-button i{ font-size: 13px; } } .history-wrapper .note:hover .note-button i{ color: white !important; } .history-wrapper .note .note-button:hover{ -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .history-wrapper .note .note-button:active{ -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } /* Dropdown Toggle In Notes */ .history-wrapper .note .note-dropdown{ display: block !important; border: none; background: transparent; border-radius: 14px; top: -39px !important; box-shadow: 0 6px 54px -5px rgba(0,0,0,0.14); padding: 0; left: auto !important; right: 20px; width: 200px; transform:translate3d(60px, -10%, 0px) scale(0.4) !important; visibility: hidden; opacity: 0;-webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .history-wrapper .note .note-dropdown.show{ visibility: visible; opacity: 1; transform:translate3d(60px, -10%, 0px) scale(1) !important; } .history-wrapper .note .note-dropdown li a{ display: block; padding: 5px 15px; border-bottom: 1px solid #eee; position: relative; font-size: 13px; background-color: white; color: #454545; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .history-wrapper .note .note-dropdown li a i{ font-size: 10px; margin-right: 7px; } .history-wrapper .note .note-dropdown.show li a{ padding: 11px 15px; } .history-wrapper .note .note-dropdown li a:hover{ background-color: #eaeaea } .history-wrapper .note .note-dropdown li:nth-of-type(1) a{ border-top-left-radius: 14px; border-top-right-radius: 14px; } .history-wrapper .note .note-dropdown li:last-of-type a{ border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-bottom: none; } .history-wrapper .note .dropdown-toggle::after{ display: none; } /* Load More - No More Buttons */ .history-wrapper .load-more-button,.history-wrapper .no-more-button{ display: -ms-flexbox; display: flex; position: absolute; bottom:0; left:50%; margin-left: -37.5px; width: 75px; height: 75px; line-height: 15px; -ms-flex-pack: center; -ms-flex-align: center; justify-content: center; align-items: center; border-radius: 100%; font-size: 12px; font-weight: 600; text-align: center; color: white; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .history-wrapper .no-more-button{ display: none; cursor: default; border: none; font-size: 14px } .history-wrapper .load-more-button:hover{ opacity: 0.85; } .history-wrapper .load-more-button span{ position: relative; z-index: 2; } .history-wrapper .news{ clear: both; margin-bottom: 80px; } /* History Section - Responsive Options */ @media screen and (max-width: 568px){ .history-wrapper .note{ float: none !important; width: 100% !important; margin-top: 50px !important; } .history-wrapper .note .note-inner{ width: 100% !important; float: none !important; } .history-wrapper .note .note-inner:before, .history-wrapper .note .note-inner:after{ display: none; } .history-wrapper .news{ margin-bottom: 0; height: 100px; } .history-wrapper .note .note-dropdown.show{ transform:translate3d(10px, -10%, 0px) scale(1) !important; } } /* ============================================== TEAM SECTION ============================================== */ /* Team Section, wrapper, col and slider settings */ .team{ position: relative; } .team .section-inner{ padding-bottom: 0; } .team .team-wrapper{ position: relative; bottom: -60px; margin-top: 10px; } .team .team-wrapper .row{ margin-left: 0px; margin-right: 0px; } .team .team-wrapper .slider-col{ margin-top: 25px; position: relative; padding-left: 0px; padding-right: 0px; } .team .team-wrapper .team-slider{ overflow: hidden; position: relative; width: 100%; height: auto; background: #101010; perspective: none !important; box-shadow: 5px 31px 60px -15px rgba(0,0,0,0.56); } /* Back effects */ .team .team-wrapper .slider-col:before{ position: absolute; content: ''; display: block; z-index: 0; } .team .team-wrapper .slider-col:after{ position: absolute; content: ''; display: block; z-index: 0; } .team .team-wrapper .slider-col.first-slider{ z-index: 2; } .team .team-wrapper .slider-col.first-slider:before{ width: 60%; height: 45%; left: -5px; top: -5px; } .team .team-wrapper .slider-col.second-slider:before{ width: 25%; height: 25%; left: -5px; bottom: -5px; } .team .team-wrapper .slider-col.third-slider:before{ width: 60%; height: 45%; right: -5px; bottom: -5px; } /* Position editing for second slider */ .team .team-wrapper .slider-col.second-slider{ top: 65px; } @media screen and (max-width: 767px){ .team .team-wrapper .slider-col.second-slider{ top: 0px; } } /* Member Image Settings */ .team .team-wrapper .team-slider .swiper-slide{ overflow: hidden; transform: translateZ(0); } .team .team-wrapper .team-slider .swiper-slide img{ width: 100%; height: auto; } /* Pagination settings */ .team .team-wrapper .team-pagination{ margin:0 auto; text-align: center; } .team .team-wrapper .team-pagination .swiper-pagination-bullet{ display: inline-block; width: 12px; height: 12px; margin: 0 5px; background-color: transparent; border: 1px solid #5D5D5D; opacity: 1; } .team .team-wrapper .team-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 1px solid transparent; } /* Member Names and details */ .team .team-wrapper .team-slider .member{ transform: translateZ(0); } .team .team-wrapper .team-slider .member-details{ opacity: 0; visibility: hidden; position: absolute; width: 100%; background-color: rgba(0,0,0, 0.4); height: 100%; left: 0; top: 0; z-index: 15; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: end; align-items: flex-end; padding: 30px 30px 50px; color: white; text-align: center; transform: translateZ(0); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .team .team-wrapper .team-slider .member-details .member-name{ text-transform: uppercase; letter-spacing: .75px; font-size: 24px; font-weight: 400; } .team .team-wrapper .team-slider .member-details .member-position{ text-transform: uppercase; letter-spacing: .38px; margin-top: 15px; font-size: 12px; font-weight: 600; } .team .team-wrapper .team-slider .member-details .more-button{ text-align: center; width: 40px; border: none; height: 40px; line-height: 40px; font-size: 25px; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: end; align-items: flex-end; margin: 20px auto 0; backface-visibility: hidden; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } /* Hover styles for members */ .team .team-wrapper .team-slider:hover .member-details{ opacity: 1; visibility: visible; } .team .team-wrapper .team-slider .member-details .more-button:hover{ -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .team .team-wrapper .team-slider .member-details .more-button:active{ -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } /* Line Skills */ .line-skills .item .progress{ height: 1px; background-color:#E0E0E0; margin-bottom:10px; } .line-skills .item .progress-bar{ height: inherit; } /* ============================================== FUN FACTS SECTION ============================================== */ /* Section and wrapper options */ .facts{ margin-top: 120px; } .facts .section-inner{ padding-top: 30px; padding-bottom: 75px; text-align: center; } @media screen and (max-width: 768px){ .facts .section-inner{ padding-top: 50px;} } .facts .facts-wrapper{ margin-top: 50px; } /* Boxes and texts */ .facts .facts-wrapper .fact-box{ margin-top: 20px; border: 1px solid #C9C9C9; padding: 40px 20px; } .facts .facts-wrapper .fact-subtitle{ font-size: 22px; color: #535353; letter-spacing: -0.34px; } .facts .facts-wrapper .factor{ font-size: 60px; font-weight: 400; letter-spacing: 0; line-height: 67px; } .facts .facts-wrapper .fact-desc{ font-size: 18px; color: #8D8D8D; letter-spacing: -0.18px; margin-top: 6px; } /* Bottom button options */ .facts .facts-bottom-button{ position: relative; display: inline-block; margin: 70px auto 0; padding: 12px 22px 8px; overflow: hidden; } .facts .facts-bottom-button:active{ background-color: rgba(120,120,120,0.03); } .facts .facts-bottom-button span.first-text{ display: block; font-size: 16px; color: #505050; line-height: 17px; font-weight: 600; } .facts .facts-bottom-button span.second-text{ display: block; font-size: 12px; color: #8F8F8F; } @media screen and (max-width: 768px){ .facts .facts-bottom-button{ padding: 12px 0px 8px; } .facts .facts-bottom-button span.first-text{ font-size: 14px; } .facts .facts-bottom-button span.second-text{ font-size: 11px; } } /* Bottom button hover options */ .facts .facts-bottom-button:before{ position: absolute; z-index: -1; width: 100%; height: 10%; border-radius: 50px; background-color: #f5f5f5; left: 0; bottom: 0; content: ''; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); } .facts .facts-bottom-button:hover:before{ -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } /* ============================================== PROJECTS SECTION ============================================== */ /* Project Wrapper */ .projects{ overflow: hidden; } .projects .projects-wrapper{ margin: 70px auto 0; max-width: 67vw; } @media screen and (max-width: 1280px){ .projects .projects-wrapper{ max-width: 90%; } } @media screen and (max-width: 990px){ .projects .section-inner{ max-width: 100%; } } @media screen and (max-width: 768px){ .projects .projects-wrapper{ margin: 40px auto 20px; } } /* Slider's Ease Animation */ .project-slider .swiper-wrapper{ transition-timing-function: cubic-bezier(0.77, 0, 0.2, 1); -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.2, 1); -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.2, 1); } .project-slider .swiper-wrapper .swiper-slide{ -webkit-transform: translateZ(0); transform: translateZ(0); } .projects .project-slider .swiper-slide:not(.swiper-slide-active) .project-image{ pointer-events: none; } /* Project Image */ .project-slider .project-image{ display: block; position: relative; transform: translateZ(0); } .project-slider .project-image img{ display: block; width: 100%; box-shadow: none; transform: translateZ(0); -webkit-transition: box-shadow 0.8s; -moz-transition: box-shadow 0.8s; transition: box-shadow 0.8s; } .project-slider .swiper-slide-duplicate-active .project-image img, .project-slider .swiper-slide-active .project-image img{ box-shadow: 2px 8px 55px 0 rgba(0,0,0,0.50); } .project-slider .project-image .image-hover-button{ left: 35px; bottom: 25px; width: 40px; height: 40px; line-height: 42px; font-size: 10px; backface-visibility: hidden; background-color: #141414; color: #fff; visibility: hidden; opacity: 0; display: block; position: absolute; text-align: center; -webkit-font-smoothing: subpixel-antialiased; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; } @media screen and (max-width: 768px){ .project-slider .project-image .image-hover-button{ left: 25px; bottom: 15px; } } .project-slider .project-image:hover .image-hover-button{ visibility: visible; opacity: 1; } .project-slider .project-image .image-hover-button:hover{ -ms-transform: scale(1.15); -webkit-transform: scale(1.15); transform: scale(1.15) translateZ(0); } .project-slider .project-image .image-hover-button:active{ -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9) translateZ(0); } /* Progress bars on the images */ .project-slider .slider-timer{ height: 2px; opacity: 0; visibility: hidden; position: relative; width: 0%; display: block; z-index: 15; transition: opacity 0.3s 1.3s, visibility 0.3s 1.3s, width 0.2s 2s; -webkit-transform: translateZ(0); transform: translateZ(0); } .project-slider .swiper-slide-duplicate-active .slider-timer, .project-slider .swiper-slide-active .slider-timer{ opacity: 1; visibility: visible; transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s, width 0.1s 0s; } /* Project Date */ .project-slider .project-date{ position: absolute; left: -45px; top: 13%; color: #666; font-weight: 600; text-transform: uppercase; font-size: 12px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } @media screen and (max-width: 768px){ .project-slider .project-date{ position: relative; left: 0; top: 0; margin-top: 15px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* Mask for all elements */ .project-slider .item-mask{ overflow: hidden; display: inline-block; } /* Project Texts */ .project-slider .bottom-details{ padding-bottom: 35px; } .project-slider .bottom-details .project-texts{ padding-top: 35px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; } @media screen and (min-width: 768px){ .project-slider .bottom-details .project-texts{ padding-left: 0; } } @media screen and (max-width: 768px){ .project-slider .bottom-details{ padding-bottom: 0px; } .project-slider .bottom-details .project-texts{ padding-top: 20px; } } .project-slider .bottom-details .project-texts .item-mask{ display: block; } .project-slider .project-texts .project-name{ font-weight: 500; font-size: 20px; color: #D9D9D9; text-transform: uppercase; } .project-slider .project-texts .project-desc{ font-size: 14px; color: #5E5E5E; font-weight: 600; letter-spacing: -0.4px; } /* Styles for animation */ .project-slider .project-texts .project-name, .project-slider .project-texts .project-desc{ display: block; opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.2, 1); } /* Project Socials */ .project-slider .project-socials{ padding-top: 35px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; } @media screen and (min-width: 768px){ .project-slider .project-socials{ padding-right: 0; } } @media screen and (max-width: 768px){ .project-slider .project-socials{ padding-top: 20px; } } .project-slider .project-socials a.social{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; opacity: .4; font-size: 14px; margin-right: 2px; opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .project-slider .project-socials a.social:hover{ opacity: 1; } .project-slider .project-socials a.project-button{ display: inline-flex; margin-left: 10px; color: #fff; padding: 9px 30px; top: -1px; position: relative; font-size: 11px; font-weight: 600; opacity: 0; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .project-slider .project-socials .item-mask:nth-of-type(1) a{ transition: all 0.2s, transform 0.8s 0.0s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.8s 0.0s cubic-bezier(0.77, 0, 0.2, 1); } .project-slider .project-socials .item-mask:nth-of-type(2) a{ transition: all 0.2s, transform 0.8s 0.05s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.8s 0.05s cubic-bezier(0.77, 0, 0.2, 1); } .project-slider .project-socials .item-mask:nth-of-type(3) a{ transition: all 0.2s, transform 0.8s 0.1s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.8s 0.1s cubic-bezier(0.77, 0, 0.2, 1); } .project-slider .project-socials .item-mask:nth-of-type(4) a{ transition: all 0.2s, transform 0.8s 0.15s cubic-bezier(0.77, 0, 0.2, 1), opacity 0.8s 0.15s cubic-bezier(0.77, 0, 0.2, 1); } /* Texts And Button Animations for active slider */ .project-slider .swiper-slide-active .project-texts .project-name, .project-slider .swiper-slide-duplicate-active .project-texts .project-name, .project-slider .swiper-slide-active .project-texts .project-desc, .project-slider .swiper-slide-duplicate-active .project-texts .project-desc, .project-slider .swiper-slide-active .project-socials a.social, .project-slider .swiper-slide-duplicate-active .project-socials a.social, .project-slider .swiper-slide-active .project-socials a.project-button, .project-slider .swiper-slide-duplicate-active .project-socials a.project-button{ opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .project-slider .swiper-slide-active .project-texts .project-name:hover, .project-slider .swiper-slide-duplicate-active .project-texts .project-name:hover{ opacity: 0.7; } /* Project Navigation */ .projects .project-navigations{ position: relative; text-align: center; margin-top: 0px; } .projects .project-navigations .slider-button{ display: inline-block; width: auto; cursor: pointer; height: 40px; margin:0 15px; } .projects .project-navigations .slider-button svg{ fill: #979797; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .projects .project-navigations .slider-button:hover svg{ fill: #fff; -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } .projects .project-navigations .slider-button:hover svg#left-arrow{ fill: #fff; -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); } /* Section bottom note */ .projects .bottom-note{ text-align: center; margin-top: 35px; } .projects .bottom-note .bottom-note-button span{ font-size: 18px; color: #9c9c9c; text-transform: uppercase; display: inline-block; overflow: hidden; position: relative; } .projects .bottom-note .bottom-note-button span:before{ content: attr(data-letters); display: block; position: absolute; z-index: 2; overflow: hidden; color: #fff; white-space: nowrap; left: 0; top: 0; width: 0%; transition: width 0.5s 0.2s; } @media screen and (min-width: 768px){ .projects .bottom-note .bottom-note-button:hover span:before{ width: 100%; } } .projects .bottom-note .bottom-note-button span.bottom-note-desc{ font-size: 12px; margin-top: -3px; color: #8a8a8a; text-transform: capitalize; } /* ============================================== WORKS SECTION ============================================== */ /* Filters */ .works .filters{ margin-top: 60px; text-align: center; } .works .filters button{ background: transparent; border: 1px solid #E3E3E3; margin: 5px 5px; padding: 5px 45px 4.6px; border-radius: 50px; font-size: 12px; color: #474747; text-align: center; text-transform: uppercase; font-weight: 600; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .works .filters button.active{ background-color: #2D2D2D; border-color: #2D2D2D; color: #fff; } .works .filters button:not(.active):hover{ background-color: #eee; border-color: #eee; color: #474747 } /* Works */ /* Works wrapper settings */ .works .works-container{ -webkit-transition: height 0.4s; -moz-transition: height 0.4s; transition: height 0.4s; } .works .works-grid{ margin-top: 40px; margin-left: 0; margin-right: 0; -webkit-transition: height .42s; -moz-transition: height .42s; transition: height .42s; } .works .works-grid:after{ content: " "; visibility: hidden; display: block; clear: both; } .works .works-grid.hidden{ display: none; } /* Item Skeleton */ .works .works-grid a{ display: block; float: left; padding: 0; backface-visibility: hidden; transform: translate3d(0,0,0) translateZ(0); } .works .works-grid a.changing{ pointer-events: none !important; } .works .works-grid a figure{ position: relative; overflow: hidden; margin: 0; width: 100%; height: 100%; backface-visibility: hidden; transform: translate3d(0,0,0) translateZ(0); -webkit-transition: opacity 0.4s, transform 0.4s; -moz-transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .works .works-grid a .works-overlay{ position: absolute; overflow: hidden; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* Animation with page changing */ .works .works-grid.active a figure{ opacity: 1; transform: translate3d(0,0,0) translateZ(0); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .works .works-grid.hiding{ pointer-events: none; } .works .works-grid:not(.active) a figure{ opacity: 0; -ms-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7); } /* Image settings */ .works .works-grid a img{ display: -ms-flexbox; display: flex; width: 100%; height: auto; position: relative; filter: blur(0px); -webkit-backface-visibility: hidden; -webkit-perspective: 1000px; -webkit-transform: translate3d(0,0,0) translateZ(0); backface-visibility: hidden; perspective: 1000px; transform: translate3d(0,0,0) translateZ(0) scale(1); -webkit-transition: filter 0.4s; -moz-transition: filter 0.4s; transition: filter 0.4s; } /* Item Overlay For Hovers */ .works .works-grid a .item-overlay{ background: rgba(10,10,10,0.92); padding: 20px; opacity: 0; visibility: hidden; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; text-align: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; backface-visibility: hidden; perspective: 1000px; transform: translate3d(0,0,0) translateZ(0) scale(1); -webkit-transition: opacity 0.4s, visibility 0.4s; -moz-transition: opacity 0.4s, visibility 0.4s; transition: opacity 0.4s, visibility 0.4s; } .works .works-grid a:hover .item-overlay{ opacity: 1; visibility: visible; } .works .works-grid a:hover img{ filter:blur(3px); } /* Item Overlay items */ .works .works-grid a .item-overlay .item-text-wrapper>*{ -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .works .works-grid a .item-overlay .item-text-wrapper .line{ width: 0px; height: 1px; margin:0 auto; } .works .works-grid a .item-overlay .item-text-wrapper .item-title{ margin-top: 15px; font-size: 20px; color: #fff; letter-spacing: 0; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } .works .works-grid a .item-overlay .item-text-wrapper .item-desc{ font-size: 14px; color: #888; letter-spacing: 0; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } /* Hovers */ .works .works-grid a:hover .item-overlay .item-text-wrapper .line{ width: 70px; -webkit-transition-delay: 0.02s; transition-delay: 0.02s; } .works .works-grid a:hover .item-overlay .item-text-wrapper .item-title, .works .works-grid a:hover .item-overlay .item-text-wrapper .item-desc{ opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } .works .works-grid a:hover .item-overlay .item-text-wrapper .item-desc{ -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } /* Works pagination */ .works .works-pagination{ text-align: center; margin-top: 50px; } .works .works-pagination button{ font-size: 13px; color: #444; font-weight: 700; margin:4px 0 2px -4px; background-color: transparent; border: 1px solid transparent; border-radius: 45px; width: 45px; height: 45px; line-height: 43px; white-space: nowrap; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .works .works-pagination button.active{ opacity: .3; border-color: transparent; } .works .works-pagination button.arrow{ font-size: 11px; color: #000; } .works .works-pagination button[disabled]{ cursor: default; } .works .works-pagination button.arrow[disabled]{ opacity: .5; } .works .works-pagination button:not(.active):not([disabled]):hover{ box-shadow: 3px 6px 51px 0 rgba(0,0,0,0.16); } .works .works-pagination a.more{ font-size: 12px; font-weight: 600; color: #444; text-transform: uppercase; width: 160px; height: 45px; line-height: 45px; border-radius: 45px; text-align: center; display: inline-block; border: 1px solid #eee; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .works .works-pagination a.more:hover{ background-color: #eee; } /* Loading animations when change page */ .works .works-grid.active a:nth-of-type(1) figure{ -webkit-transition-delay: 400ms; transition-delay: 400ms; } .works .works-grid.active a:nth-of-type(2) figure{ -webkit-transition-delay: 450ms; transition-delay: 450ms; } .works .works-grid.active a:nth-of-type(3) figure{ -webkit-transition-delay: 500ms; transition-delay: 500ms; } .works .works-grid.active a:nth-of-type(4) figure{ -webkit-transition-delay: 550ms; transition-delay: 550ms; } .works .works-grid.active a:nth-of-type(5) figure{ -webkit-transition-delay: 600ms; transition-delay: 600ms; } .works .works-grid.active a:nth-of-type(6) figure{ -webkit-transition-delay: 650ms; transition-delay: 650ms; } .works .works-grid.active a:nth-of-type(7) figure{ -webkit-transition-delay: 700ms; transition-delay: 700ms; } .works .works-grid.active a:nth-of-type(8) figure{ -webkit-transition-delay: 750ms; transition-delay: 750ms; } .works .works-grid.active a:nth-of-type(9) figure{ -webkit-transition-delay: 800ms; transition-delay: 800ms; } .works .works-grid.active a:nth-of-type(10) figure{ -webkit-transition-delay: 850ms; transition-delay: 850ms; } .works .works-grid.active a:nth-of-type(11) figure{ -webkit-transition-delay: 900ms; transition-delay: 900ms; } .works .works-grid.active a:nth-of-type(12) figure{ -webkit-transition-delay: 950ms; transition-delay: 950ms; } .works .works-grid.active a:nth-of-type(13) figure{ -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .works .works-grid.active a:nth-of-type(14) figure{ -webkit-transition-delay: 1050ms; transition-delay: 1050ms; } .works .works-grid.active a:nth-of-type(15) figure{ -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .works .works-grid.active a:nth-of-type(16) figure{ -webkit-transition-delay: 1150ms; transition-delay: 1150ms; } .works .works-grid.active a:nth-of-type(17) figure{ -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } /* Gap (Space between items) settings */ .gap-sm{ margin-left: -3px !important; margin-right: -3px !important; } .gap-sm a{ padding: 3px !important; } .gap-md{ margin-left: -7px !important; margin-right: -7px !important; } .gap-md a{ padding: 7px !important; } .gap-lg{ margin-left: -12px !important; margin-right: -12px !important; } .gap-lg a{ padding: 12px !important; } .gap-xl{ margin-left: -15px !important; margin-right: -15px !important; } .gap-xl a{ padding: 15px !important; } /* Loader */ .works .page-change-loader{ visibility: hidden; position: fixed; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; z-index: 500; left: -1px; top: 50%; width: 100px; height: 70px; margin-top: -35px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.6); background: #141414; border-top-right-radius: 70px; border-bottom-right-radius: 70px; backface-visibility: hidden; -webkit-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .works .page-change-loader svg{ width: 30px; fill: #fff; display: block; -webkit-transform: translateY(-3px) translateZ(0); transform: translateY(-3px) translateZ(0); } /* Loader Active */ .works.changing .page-change-loader{ visibility: visible; -webkit-transform: translateX(0%) translateZ(0); transform: translateX(0%) translateZ(0); } .works.changing .page-change-loader svg{ visibility: visible; -webkit-animation: fa-spin 0.6s infinite linear; animation: fa-spin 0.6s infinite linear; } /* ============================================== COL SYSTEM FOR WORKS ============================================== */ /* Col System */ @media screen and (min-width: 992px){ .works-2-col a{ width: 50%; } .works-3-col a{ width: 33.33%; } .works-4-col a{ width: 25%; } .works-5-col a{ width: 20%; } .works-6-col a{ width: 16.6666%; } } @media screen and (min-width: 568px) and (max-width: 991px){ .works-2-col a, .works-3-col a, .works-4-col a, .works-5-col a, .works-6-col a{ width: 50%; } } @media screen and (max-width: 568px){ .works-2-col a, .works-3-col a, .works-4-col a, .works-5-col a, .works-6-col a{ width: 100%; } } /* ============================================== STEPS SECTION ============================================== */ /* Wrapper for steps */ .steps .steps-wrapper{ margin-top: 65px; min-height: 440px; } .steps .steps-wrapper .steps-container{ position: relative; margin-top: 10px; } @media screen and (max-width: 1200px){ .steps .section-inner{ max-width: 1140px; } } /* Svgs options */ .steps .steps-wrapper svg{ width: 100%; display: block; margin: 0 auto; } /* Fake path with colored stroke */ .steps .steps-wrapper .colored-svg{ position: absolute; width: 0%; overflow: hidden; left: 0; top: 0; height: auto; z-index: 2; -webkit-transition: all 1.2s; -moz-transition: all 1.2s; transition: all 1.2s; } /* Step boxes */ .steps .steps-wrapper .steps-boxes{ position: absolute; width: 100%; height: 100%; left:0; top:0; z-index: 2; } .steps .steps-wrapper .steps-boxes .steps-box{ width: 26%; position: absolute; text-align: center; cursor: pointer; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .steps .steps-wrapper .steps-boxes .steps-box.active{ cursor: default; } /* Images on the boxes */ .steps .steps-wrapper .steps-box .box-img{ margin: 0 auto; border-radius: 100%; border: 4px solid rgba(255,255,255,0.33); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .steps .steps-wrapper .steps-box .box-img img{ display: block; width: 100%; border-radius: inherit; } /* Images sizes */ .steps .steps-wrapper .steps-box .box-img.box-img-sm{ width: 90px; height: 90px; } .steps .steps-wrapper .steps-box .box-img.box-img-md{ width: 120px; height: 120px; } .steps .steps-wrapper .steps-box .box-img.box-img-lg{ width: 180px; height: 180px; } /* Box Texts */ .steps .steps-wrapper .steps-box .box-title{ font-size: 18px; color: white; margin-top: 20px; } .steps .steps-wrapper .steps-box .box-subtitle{ font-size: 15px; color: #AEAEAE; } .steps .steps-wrapper .steps-box .box-desc{ font-size: 14px; color: #8B8B8B; line-height: 25px; margin-top: 12px; } /* Bottom active bars */ .steps .steps-wrapper .steps-box .active-bar{ width: 0px; height: 1px; margin: 25px auto 0; background-color: #BABABA; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .steps .steps-wrapper .steps-box:hover .active-bar, .steps .steps-wrapper .steps-box.active .active-bar{ width: 50px; } /* Little items on graphic */ .steps .steps-point{ position: absolute; width: 20px; height: 20px; line-height: 15px; background: #3F3F3F; border-radius: 100%; text-align: center; } .steps .steps-point:before,.steps .steps-point:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #fff; border-radius: inherit; -ms-transform: scale(.2); -webkit-transform: scale(.2); transform: scale(.2); -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .steps .steps-point:after{ -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); background: #222; } .steps .steps-point:hover:before, .steps .steps-point.active:before{ -ms-transform: scale(.8); -webkit-transform: scale(.8); transform: scale(.8); } .steps .steps-point:hover:after, .steps .steps-point.active:after{ -ms-transform: scale(.2); -webkit-transform: scale(.2); transform: scale(.2); } /* Steps Navigation */ .steps .steps-wrapper .steps-navigation{ width: 100%; text-align: center; } .steps .steps-wrapper .steps-navigation button{ width: 40px; height: 40px; line-height: 40px; margin: 3px; background-color: #303030; border-radius: 100%; border: none; color: white; font-size: 12px; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .steps .steps-wrapper .steps-navigation button[disabled]{ cursor: default; opacity: .3; } /* Bottom Button */ .steps .bottom-link{ margin-top: 70px; text-align: center; } .steps .bottom-link .bottom-button{ font-size: 11px; color: #7c7c7c; padding:12px 40px; background: transparent; text-transform: uppercase; font-weight: 600; border: 1px solid rgba(192,192,192, 0.36); border-radius: 50px; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .steps .bottom-link .bottom-button:hover{ color: white; } /* Break steps on maximum 800px */ @media screen and (max-width: 800px){ .steps .steps-wrapper .steps-boxes{ position: relative; } .steps .steps-container>svg,.steps .steps-container>img,.steps .steps-container>.colored-svg, .steps .steps-point, .steps .steps-wrapper .steps-navigation{ display: none; } .steps .steps-wrapper .steps-boxes .steps-box{ position: relative; width: 90%; left: 0 !important; top: 0 !important; margin: 30px auto; -webkit-transform: translateX(0%); transform: translateX(0%); } } /* ============================================== SKILLS SECTION ============================================== */ /* Skills Section Wrapper */ .skills .section-inner{ padding-bottom: 105px; } .skills .skills-wrapper{ margin-top: 70px; text-align: center; } /* Skill Boxes */ .skills .skills-wrapper .skill-box .box-inner{ cursor: default; background: transparent; padding: 30px 10px 32px; border-radius: 8px; box-shadow: 0 1px 40px -6px rgba(0,0,0,0); -webkit-transition: all .15s; -moz-transition: all .15s; transition: all .15s; } .skills .skills-wrapper .skill-box .box-inner *{ -webkit-transition: all .15s; -moz-transition: all .15s; transition: all .15s; } .skills .skills-wrapper .skill-box .box-inner .factor{ -webkit-transition: all .0s; -moz-transition: all .0s; transition: all .0s; } /* Chart and percent texts */ .skills .skills-wrapper .skill-box .chart{ position: relative; display: block; width: 180px; height: 180px; margin: 0 auto; } .skills .skills-wrapper .skill-box .chart>span{ position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .skills .skills-wrapper .skill-box .chart .percent-title{ font-size: 18px; color: #6d6d6d; display: block; } .skills .skills-wrapper .skill-box .chart .percent-desc{ font-size: 11px; white-space: nowrap; color: #BFBFBF; text-transform: uppercase; display: block; margin-top: 0px; } /* Box title and desc */ .skills .skills-wrapper .skill-box .box-title{ margin-top: 15px; font-size: 16px; color: #6a6a6a; } .skills .skills-wrapper .skill-box .box-desc{ margin-top: 5px; font-size: 14px; color: #A2A2A2; line-height: 22px; } /* Hover */ .skills .skills-wrapper .skill-box:hover .box-inner{ background-color: #292929; box-shadow: 0 1px 40px -6px rgba(0,0,0,0.61); } .skills .skills-wrapper .skill-box:hover .chart .percent-title, .skills .skills-wrapper .skill-box:hover .box-title{ color: #FFFFFF; } .skills .skills-wrapper .skill-box:hover .chart .percent-desc, .skills .skills-wrapper .skill-box:hover .box-desc{ color: #969696; } /* ============================================== PRICES SECTION ============================================== */ .prices .prices-wrapper{ margin-top: 50px; } @media screen and (max-width: 1200px) and (min-width: 992px){ .prices .section-inner{ max-width: 1140px; } } /* Package Box */ .prices .prices-wrapper .package{ padding: 0 10px; margin: 20px auto 0; } .prices .prices-wrapper .package .package-wrapper{ background-color: transparent; border-radius: 10px; padding: 65px 35px; -webkit-transition: all .15s; -moz-transition: all .15s; transition: all .15s; } .prices .prices-wrapper .package .package-wrapper:hover{ background-color: #252525; } .prices .prices-wrapper .package.active .package-wrapper{ background-color: #303030; } /* Price package top details */ .prices .prices-wrapper .package .top-details{ position: relative; display: -ms-flexbox; display: flex; } .prices .prices-wrapper .package .top-details *{ display: -ms-inline-flexbox; display: inline-flex; } .prices .prices-wrapper .package .top-details .price-package{ font-weight: 300; font-size: 70px; line-height: 70px; color: #cbcbcb; } .prices .prices-wrapper .package .top-details .price-right{ -ms-flex-direction: column; flex-direction: column; font-weight: 300; padding-left: 3px; } .prices .prices-wrapper .package .top-details .price-right .currency-unit{ align-self: flex-start; font-size: 30px; color: #cbcbcb; } .prices .prices-wrapper .package .top-details .price-right .billing{ align-self: flex-end; font-size: 16px; color: #cbcbcb } .prices .prices-wrapper .package .top-details .price-right .best-mark{ margin: 4px 0 0 6px; display: inline-block; height: 18px; line-height: 18px; font-size: 11px; font-weight: 700; padding: 0 14px; font-family: 'Open Sans', sans-serif; border-radius: 50px; } /* Yearly calculator */ .prices .prices-wrapper .package .yearly-calculator{ font-size: 13px; margin-top: 9px; } /* Package title */ .prices .prices-wrapper .package .package-title{ font-size: 35px; line-height: 40px; margin-top: 3px; font-weight: 300; color: #cbcbcb; text-transform: uppercase; } /* Package List */ .prices .prices-wrapper .package .package-list{ margin-top: 30px; } .prices .prices-wrapper .package .package-list li{ margin: 21px 0; color: #A7A7A7; font-size: 14px; } .prices .prices-wrapper .package .package-list li i{ margin-right: 3px; color: #D8D8D8; } /* Package Button */ .prices .prices-wrapper .package .package-button{ color: #7C7C7C; font-size: 11px; text-transform: uppercase; background: #191919; border: 1px solid #252525; padding: 6.5px 50px; font-weight: 600; border-radius: 40px; display: inline-block; margin-top: 15px; -webkit-transition: all .15s; -moz-transition: all .15s; transition: all .15s; } .prices .prices-wrapper .package .package-button:hover, .prices .prices-wrapper .package.active .package-button{ color: white; } /* ============================================== CONTACT SECTION ============================================== */ /* Contact and Input wrappers */ .contact{ position: relative; } .contact .contact-wrapper{ margin-top: 70px; } .contact .contact-wrapper .contact-form{ -webkit-transition: margin 0.6s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: margin 0.6s cubic-bezier(0.77, 0, 0.2, 1); transition: margin 0.6s cubic-bezier(0.77, 0, 0.2, 1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .contact .contact-wrapper .contact-form .input-wrapper{ position: relative; padding: 15px; } /* Inputs and textarea */ .contact .contact-wrapper .contact-form input, .contact .contact-wrapper .contact-form textarea{ font-size: 16px; color: transparent; letter-spacing: 0.43px; text-transform: uppercase; background: #F8F8F8; border: 1px solid #E8E8E8; padding: 18px; width: 100%; -webkit-transition: all .25s, height 0s; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1), color 1s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1), color 1s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1), color 1s cubic-bezier(0.77, 0, 0.2, 1); } .contact .contact-wrapper .contact-form textarea{ min-height: 150px; resize: none;} /* Focused input */ .contact .contact-wrapper .contact-form .input-wrapper.focused input, .contact .contact-wrapper .contact-form .input-wrapper.focused textarea{ color: #fff; background: transparent !important; border: 1px solid transparent; border-bottom-color: rgba(151,151,151,0.5); padding: 18px; width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;} /* Label options */ .contact .contact-wrapper .contact-form .input-wrapper label{ position: absolute; width: 100%; height: 100%; left: 0; font-size: 16px; top: 0; color: #A6A6A6; text-transform: uppercase; user-select: none; pointer-events: none; backface-visibility: hidden; } .contact .contact-wrapper .contact-form .input-wrapper label span{ position: absolute; left: 35px; top: 50%; backface-visibility: hidden; -webkit-transform: translate(0%,-50%); -moz-transform: translate(0%,-50%); -ms-transform: translate(0%,-50%); transform: translate(0%,-50%); -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); } .contact .contact-wrapper .contact-form .textarea-wrapper label span{ top: 50px; -webkit-transform: translate(0%,-50%); -moz-transform: translate(0%,-50%); -ms-transform: translate(0%,-50%); transform: translate(0%,-50%); -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); } /* Focused label > span */ .contact .contact-wrapper .contact-form .input-wrapper.focused label span{ left: 15px; top: 0; font-size: 11px; color: #BDBDBD; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); } /* Send button */ .contact .contact-wrapper .contact-form .send-button{ margin-top: 10px; display: inline-block; font-weight: 400; background: #191919; box-shadow: 0 21px 35px -5px rgba(0,0,0,0.30); padding: 21px 40px; border: none; outline: none; color: white; font-size: 16px; letter-spacing: 0.43px; backface-visibility: hidden; position: relative; overflow: hidden; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) translateZ(0); -webkit-transition: all .25s; -moz-transition: all .25s; transition: all .25s; } .contact .contact-wrapper .contact-form .send-button:hover{ -ms-transform: scale(1.02); -webkit-transform: scale(1.02); transform: scale(1. translateZ(0)02); } .contact .contact-wrapper .contact-form .send-button:active{ -ms-transform: scale(0.98); -webkit-transform: scale(0.98); transform: scale(0. translateZ(0)98); } .send-button span.loader{ background-color:inherit; border-radius: inherit; } .send-button.loading span.loader:before{ width: 20px; height: 20px; margin: 0 auto; content:''; position: absolute; top:50%; left: 50%; margin-top:-10px; margin-left:-10px; border: 1px solid rgb(255,255,255); border-radius: 50%; z-index: 2; border-left-color: transparent; border-right-color: transparent; animation: cssload-spin 650ms infinite linear; -o-animation: cssload-spin 650ms infinite linear; -ms-animation: cssload-spin 650ms infinite linear; -webkit-animation: cssload-spin 650ms infinite linear; -moz-animation: cssload-spin 650ms infinite linear; } .send-button.loading span.loader:after{ background-color:inherit; border-radius: inherit; width: 100%; height: 100%; position: absolute; left:0; top:0; content:''; z-index: 1; } @keyframes cssload-spin{ 100%{ transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes cssload-spin{ 100%{ -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes cssload-spin{ 100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes cssload-spin{ 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes cssload-spin{ 100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); } } /* Inputs on error */ .contact .contact-wrapper .contact-form .input-wrapper:not(.focused) .error_warning{ border-color: #f90000; } .contact .contact-wrapper .contact-form .input-wrapper.focused .error_warning{ border-bottom-color: #f90000; } /* Clear form effect */ .contact .contact-wrapper .contact-form.reseting .input-wrapper:nth-of-type(1) *{ -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .contact .contact-wrapper .contact-form.reseting .input-wrapper:nth-of-type(2) *{ -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .contact .contact-wrapper .contact-form.reseting .input-wrapper:nth-of-type(3) *{ -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .contact .contact-wrapper .contact-form.reseting .input-wrapper:nth-of-type(4) *{ -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .contact .contact-wrapper .contact-form.reseting .input-wrapper:nth-of-type(5) *{ -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } /* Delays for labels and inputs */ .contact .contact-wrapper .contact-form .input-wrapper.focused label span{ -webkit-transition-delay: 0s; transition-delay: 0.1s; } .contact .contact-wrapper .contact-form .input-wrapper:not(.focused) input, .contact .contact-wrapper .contact-form .input-wrapper:not(.focused) textarea{ -webkit-transition-delay: 0s; transition-delay: 0.1s; } /* Contact form error messages */ .contact .error-messages{ height: auto; position: absolute; width: 100%; max-width: 100%; bottom: 0; left: 0; cursor: default; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); } .contact .error-messages .submit_message, .contact .error-messages .error_message{ opacity: 0; visibility: hidden; bottom: 70px; font-size:14px; font-family: 'Open Sans', sans-serif; padding: 14px 20px 13.5px; color:#fff; font-weight: 400; background-color: #D74C4C; position: absolute; border-radius: 7px; box-shadow:15px 30px 80px 4px rgba(149,109,109,0.28); backface-visibility: hidden; left: 50%; -ms-transform: translateX(-50%) scale(0.94) translateZ(0); -webkit-transform: translateX(-50%) scale(0.94) translateZ(0); transform: translateX(-50%) scale(0.94) translateZ(0); -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); transition: all 0.6s cubic-bezier(0.77, 0, 0.2, 1); } .contact .error-messages .submit_message{ background:#7fb924; box-shadow:15px 30px 80px 4px rgba(90,105,66,0.28); } .contact .contact-form.error-message-showing{ margin-bottom: 70px; -webkit-transition-delay: 0s; transition-delay: 0s; } @media screen and (max-width: 992px){ .contact .contact-form.error-message-showing{ margin-bottom: 120px; } } @media screen and (max-width: 769px){ .contact .error-messages .submit_message, .contact .error-messages .error_message{ width: 90%; } } .contact .error-messages.show.success .submit_message, .contact .error-messages.show.error .error_message{ bottom: 70px; visibility: visible; opacity: 1; -ms-transform: translateX(-50%) scale(1) translateZ(0); -webkit-transform: translateX(-50%) scale(1) translateZ(0); transform: translateX(-50%) scale(1) translateZ(0); -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .contact .error-messages.show.success .submit_message{ -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } /* Google Re-Captcha */ .g-recaptcha{ display: inline-block; width: auto !important; border:1px solid transparent; } .g-recaptcha.error_warning{ border-color: red !important; } @media screen and (max-width: 361px){ .g-recaptcha{ max-width: 290px; overflow: hidden; border-right: 1px solid #ccc; } } /* ============================================== ADDRESS SECTION ============================================== */ /* Address section */ section.address{ border-top: 1px solid #E9E9E9; } /* Boxes */ .address .address-wrapper .address-box{ margin: 15px 0; display: -ms-flexbox; } .address .address-wrapper .address-box .box-inner{ padding: 70px 50px; width: 100%; text-align: center; border: 1px solid #E9E9E9; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .address .address-wrapper .address-box .box-inner:hover{ background-color: #ECECEC; } /* Box icon */ .address .address-wrapper .address-box .box-inner .box-icon{ width: 44px; height: 44px; line-height: 46px; display: block; margin: 0 auto; text-align: center; position: relative; color: white; font-size: 16px; } .address .address-wrapper .address-box .box-inner .box-icon:before{ width: 100%; height: 100%; position: absolute; content: ''; display: block; left: 0; top:0; background-color: #262626; border-radius: 9px; z-index: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .address .address-wrapper .address-box .box-inner .box-icon i{ position: relative; z-index: 1; } /* Box Texts */ .address .address-wrapper .address-box .box-inner .box-title{ font-size: 15px; color: #585858; letter-spacing: 2.68px; font-weight: 400; margin-top: 20px; text-transform: uppercase; } .address .address-wrapper .address-box .box-inner .box-desc{ font-size: 14px; color: #A2A2A2; letter-spacing: 0; font-weight: 400; margin-top: 10px; } /* ============================================== FOOTER ============================================== */ /* Footer wrapper */ footer{ overflow: hidden; } footer .footer-inner{ padding-top: 90px; padding-bottom: 120px; } footer .footer-inner .row>div{ margin-top: 30px; } /* Left, slider buttons */ footer .footer-inner .slider-buttons a{ display: block; padding: 7px 0; color: white; font-size: 18px; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Footer Title */ footer .footer-inner .footer-title{ display: block; margin-bottom: 10px; padding: 7px 0; color: white; font-size: 18px; text-transform: uppercase; } /* Footer Links */ footer .footer-inner .footer-list a{ display: block; padding: 10px 0; color: #969696; font-size: 14px; -webkit-transition: all .12s; -moz-transition: all .12s; transition: all .12s; } footer .footer-inner .footer-list a:hover{ color: #fff; } /* Site Logo */ footer .website-logo{ max-width: 110px; display: inline-block; } footer .website-logo img{ display: block; width: 100%; } /* Slide inner */ footer .footer-slider .swiper-slide .slide-inner{ opacity: 0; animation:tabPaneChangeEffectBack .6s ease forwards; -webkit-animation:tabPaneChangeEffectBack .6s ease forwards; backface-visibility: hidden; } @media screen and (min-width: 992px){ footer .footer-slider .swiper-slide .slide-inner{ margin-right: -4px; } } /* Social networks */ footer .footer-slider .swiper-slide .footer-socials .footer-icon{ width: 40px; height: 40px; line-height: 42px; border-radius: 100%; text-align: center; background: #303030; display: inline-block; color: #131313; font-size: 16px; margin-left: 5px; } footer .footer-slider .swiper-slide .footer-socials .footer-icon:nth-of-type(1){ margin-left: 0px; } footer .footer-slider .swiper-slide .footer-socials .footer-icon:hover{ color: white; } /* Newsletter form */ footer .footer-newsletter .newsletter-form{ visibility: visible; opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) translateZ(0); -webkit-transition: all .32s; -moz-transition: all .32s; transition: all .32s; backface-visibility: hidden; perspective: 1000; } footer .footer-newsletter input, footer .footer-newsletter button{ width: 250px; height: auto; padding: 8px 15px; display: inline-block; border-radius: 50px; border: none; outline: none; font-size: 13px; background-color: #2C2C2C; color: #666666; backface-visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } footer .footer-newsletter button{ color: #fff; margin-top: 10px; font-size: 11px; font-weight: 700; backface-visibility: hidden; position: relative; overflow: hidden; } footer .footer-newsletter input.error_warning{ background-color: #702F2F; color: white; } footer .footer-newsletter input.error_warning::-webkit-input-placeholder{color: #bbb;} footer .footer-newsletter input.error_warning:-moz-placeholder{color: #bbb;} footer .footer-newsletter input.error_warning::-moz-placeholder{color: #bbb; } footer .footer-newsletter input.error_warning:-ms-input-placeholder{color: #bbb;} /* Newsletter form Message */ footer .footer-newsletter .success-message{ position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) translateZ(0); -webkit-transition: all .32s; -moz-transition: all .32s; transition: all .32s; } footer .footer-newsletter .success-message .title{ text-transform: uppercase; font-size: 20px; letter-spacing: 6px; font-weight: 300; } footer .footer-newsletter .success-message .desc{ color: #5A5A5A; font-size: 15px; margin-top: 15px; } /* Animation with success newsletter */ footer .footer-newsletter.success .newsletter-form{ opacity: 0; visibility: hidden; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8) translateZ(0); } footer .footer-newsletter.success .success-message{ opacity: 1; visibility: visible; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1) translateZ(0); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } /* Footer About Us */ footer .footer-about .title{ text-transform: uppercase; color: #fff; font-size: 15px; letter-spacing: 4px; font-weight: 300; backface-visibility: hidden; } footer .footer-about .desc{ color: #5A5A5A; font-size: 14px; margin-top: 15px; line-height: 24px; backface-visibility: hidden; } /* Animation for slides */ footer .footer-slider .swiper-slide.swiper-slide-active .slide-inner, footer .footer-slider .swiper-slide.swiper-slide-duplicate-active .slide-inner{ opacity: 1; animation: tabPaneChangeEffect .6s ease forwards; -webkit-animation: tabPaneChangeEffect .6s ease forwards; } /* Footer Navigation */ footer .footer-dots{ position: relative; margin-top: 3rem; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; -webkit-transition-delay: .6s; transition-delay: .6s; } @media screen and (min-width: 992px){ footer .footer-dots{ opacity: 0; visibility: hidden; margin-left: 8px; } } footer .footer-slider:hover .footer-dots{ opacity: 1; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; } footer .footer-dots .swiper-pagination-bullet{ display: inline-block; width: 12px; height: 12px; margin: 0 5px; background-color: transparent; border: 1px solid #5D5D5D; opacity: 1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } footer .footer-dots .swiper-pagination-bullet.swiper-pagination-bullet-active{ border: 1px solid transparent; } /* Footer Bottom */ footer .footer-bottom{ padding: 20px 0; font-size: 14px; color: #626262; border-top: 1px solid #242424; } footer .footer-bottom a:hover{ text-decoration: underline; color: #888; } /* Tab Pane Animation For Footer and Tabs */ @-webkit-keyframes tabPaneChangeEffect{ 0%{ opacity: 0; transform: translateX(25px); } 100%{ opacity: 1; transform: translateX(0px); } } @-moz-keyframes tabPaneChangeEffect{ 0%{ opacity: 0; transform: translateX(25px); } 100%{ opacity: 1; transform: translateX(0px); } } @-ms-keyframes tabPaneChangeEffect{ 0%{ opacity: 0; transform: translateX(25px); } 100%{ opacity: 1; transform: translateX(0px); } } @-o-keyframes tabPaneChangeEffect{ 0%{ opacity: 0; transform: translateX(25px); } 100%{ opacity: 1; transform: translateX(0px); } } @keyframes tabPaneChangeEffect{ 0%{ opacity: 0; transform: translateX(25px); } 100%{ opacity: 1; transform: translateX(0px); } } @-webkit-keyframes tabPaneChangeEffectBack{ 0%{ opacity: 1; transform: translateX(0px); } 100%{ opacity: 1; transform: translateX(-25px); } } @-moz-keyframes tabPaneChangeEffectBack{ 0%{ opacity: 1; transform: translateX(0px); } 100%{ opacity: 0; transform: translateX(-25px); } } @-ms-keyframes tabPaneChangeEffectBack{ 0%{ opacity: 1; transform: translateX(0px); } 100%{ opacity: 0; transform: translateX(-25px); } } @-o-keyframes tabPaneChangeEffectBack{ 0%{ opacity: 1; transform: translateX(0px); } 100%{ opacity: 0; transform: translateX(-25px); } } @keyframes tabPaneChangeEffectBack{ 0%{ opacity: 1; transform: translateX(0px); } 100%{ opacity: 0; transform: translateX(-25px); } } /* ============================================== FULL SCREEN SEARCH FORM ============================================== */ .fs-searchform{ z-index: 2000; width: 100%; display: -ms-flexbox; display: flex; padding: 15px; height: 100%; position: fixed; left:0; top:0; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .fs-searchform .search-inner{ background-color: #050505; margin:0 auto; padding: 15px 15px 25px; width: 100%; height: auto; max-width: 900px; position: relative; pointer-events: none; z-index: 2; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .fs-searchform.active .search-inner{ opacity: 1; pointer-events: auto; } .fs-searchform .form-bg{ background-color:rgba(12,12,12,0.85); position: absolute; left:0; top:0; z-index: 0; opacity: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateZ(0); transform: translateZ(0);} .fs-searchform.active .form-bg{ opacity: 1; } .fs-searchform.active{ visibility: visible; } #fs-searchform{ position: relative; z-index: 1; margin-top: 15px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; opacity: 0; } .fs-searchform.active #fs-searchform{ opacity: 1; } #fs-searchform input{ width: 100%; background-color: transparent; border: none; padding:20px 30px; transform: translateX(45px); font-size: 24px; color:#c9c9c9; -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; transition: transform 0.6s; -webkit-transition-delay: 0s; transition-delay: 0s; } .fs-searchform.active #fs-searchform input{ transform: translateX(0px); } #fs-searchform button{position: absolute; right: 40px; top:50%; border:none; background:transparent; color:#3B3B3B; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #fs-searchform button i{ font-size: 22px; } /* Place Holders effects For Browsers */ #fs-searchform input::-webkit-input-placeholder{ color: #3B3B3B; opacity:0; } #fs-searchform input:-moz-placeholder{ color: #3B3B3B; opacity: 0; } #fs-searchform input::-moz-placeholder{ color: #3B3B3B; opacity: 0; } #fs-searchform input:-ms-input-placeholder{ color: #3B3B3B; opacity: 0; } .fs-searchform.active #fs-searchform ::-webkit-input-placeholder{ opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } .fs-searchform.active #fs-searchform :-moz-placeholder{ opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } .fs-searchform.active #fs-searchform ::-moz-placeholder{ opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } .fs-searchform.active #fs-searchform :-ms-input-placeholder{ opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } /* Recommended Page styles and effects*/ .fs-searchform .recommended{ margin: 20px 0 0; opacity: 0; padding:20px 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} .fs-searchform.active .recommended{ opacity: 1; } .fs-searchform .recommended .rcm-title{ color:#3B3B3B; font-size: 13px; cursor: default; padding-left:25px; margin-bottom: 15px; transform: translateX(70px); -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .fs-searchform.active .recommended .rcm-title{ transform: translateX(0px); } .fs-searchform .recommended a{ display: block; color: #545454; font-size: 16px; padding:7px 25px; position: relative; transform: translateX(70px); opacity: 0; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .fs-searchform.active .recommended a{ transform: translateX(0px); opacity: 1; } .fs-searchform .recommended a:hover{ background-color:#171717; color:#9E9E9E; } /* Animation delays */ .fs-searchform.active .recommended .rcm-title{ -webkit-transition-delay: 0s; transition-delay: 0.1s; } .fs-searchform.active .recommended a:nth-of-type(1){ -webkit-transition: all 0.45s, transform 0.45s 0.2s, opacity 0.45s 0.2s; -moz-transition: all 0.45s, transform 0.45s 0.2s, opacity 0.45s 0.2s; transition: all 0.45s, transform 0.45s 0.2s, opacity 0.45s 0.2s; } .fs-searchform.active .recommended a:nth-of-type(2){ -webkit-transition: all 0.45s, transform 0.45s 0.3s, opacity 0.45s 0.3s; -moz-transition: all 0.45s, transform 0.45s 0.3s, opacity 0.45s 0.3s; transition: all 0.45s, transform 0.45s 0.3s, opacity 0.45s 0.3s; } .fs-searchform.active .recommended a:nth-of-type(3){ -webkit-transition: all 0.45s, transform 0.45s 0.4s, opacity 0.45s 0.4s; -moz-transition: all 0.45s, transform 0.45s 0.4s, opacity 0.45s 0.4s; transition: all 0.45s, transform 0.45s 0.4s, opacity 0.45s 0.4s; } .fs-searchform.active .recommended a:nth-of-type(4){ -webkit-transition: all 0.45s, transform 0.45s 0.5s, opacity 0.45s 0.5s; -moz-transition: all 0.45s, transform 0.45s 0.5s, opacity 0.45s 0.5s; transition: all 0.45s, transform 0.45s 0.5s, opacity 0.45s 0.5s; } .fs-searchform.active .recommended a:nth-of-type(5){ -webkit-transition: all 0.45s, transform 0.45s 0.45s, opacity 0.45s 0.45s; -moz-transition: all 0.45s, transform 0.45s 0.45s, opacity 0.45s 0.45s; transition: all 0.45s, transform 0.45s 0.45s, opacity 0.45s 0.45s; } .fs-searchform.active .recommended a:nth-of-type(6){ -webkit-transition: all 0.45s, transform 0.45s 0.7s, opacity 0.45s 0.7s; -moz-transition: all 0.45s, transform 0.45s 0.7s, opacity 0.45s 0.7s; transition: all 0.45s, transform 0.45s 0.7s, opacity 0.45s 0.7s; } /* Responsive Search form */ @media only screen and (max-width: 640px){ #fs-searchform input{ font-size: 13px; } .fs-searchform .recommended .rcm-title{ font-size: 11px; padding-left:15px; padding-bottom: 10px; margin: 0px 0px 5px; } .fs-searchform .recommended a{ padding:4px 15px; font-size: 13px; } } /* ============================================== PAGE TITLE AND HEROS FOR SUBPAGES ============================================== */ /* Page Title */ .pagetitle{ background-color: #FBFBFB; border-bottom: 1px solid rgba(140,140,140,0.12) } .pagetitle .pagetitle-wrapper .title{ font-size: 24px; color: #444444; letter-spacing: 6px; font-weight: 300; } .pagetitle .pagetitle-wrapper p{ font-size: 14px; color: #999; letter-spacing: 0px; font-weight: 300; } .pagetitle .pagetitle-wrapper .breadcrumbs>*{ display: inline-block; color: #737373; text-transform: uppercase; font-size: 11px; } .pagetitle .pagetitle-wrapper .breadcrumbs .active{ opacity: .6; } .pagetitle .pagetitle-wrapper .breadcrumbs .seperator{ margin: 0 6px; } @media only screen and (min-width: 1200px){ .pagetitle .pagetitle-wrapper .breadcrumbs{ padding-right: 35px; } } /* Pagetitle Sizes */ .pagetitle.pagetitle-xs{ padding: 10px 0; } .pagetitle.pagetitle-sm{ padding: 30px 0; } .pagetitle.pagetitle-md{ padding: 50px 0; } .pagetitle.pagetitle-lg{ padding: 75px 0; } .pagetitle.pagetitle-xl{ padding: 120px 0; } /* Hero */ .hero{ position: relative; width: 100%; height: auto; min-height: 350px; display: flex; align-items: center; justify-content: center; } .hero .hero-wrapper{ z-index: 2; position: relative; } .hero .hero-wrapper .hero-title{ font-weight: 400; text-transform: uppercase; color: white; } .hero .hero-wrapper .hero-desc{ font-size: 14px; font-weight: 400; color: #BCBCBC; } /* Hero Sizes */ .hero.hero-xs{ height: 34vh; } .hero.hero-sm{ height: 45vh; } .hero.hero-md{ height: 53vh; } .hero.hero-lg{ height: 65vh; } .hero.hero-xl{ height: 75vh; } .hero.hero-xxl{ height: 90vh; } .hero.hero-full{ height: 100vh; } /* ============================================== LIGHTBOX STYLES ============================================== */ .lg-outer .lg-thumb{ margin:0 auto; } .lg-outer .lg-thumb-item{ border:0px solid transparent; border-radius: 0; } .lg-outer .lg-thumb-item img{ opacity: 0.8; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .lg-outer .lg-thumb-item.active img{ opacity: 1; } .lg-outer .lg-item{background:url(../images/loading1.svg) center center no-repeat;} .lg-backdrop,.lg-outer{ z-index: 1650; } .lg-outer .lg-video { -webkit-overflow-scrolling: touch; overflow: auto; } /* Left Right Buttons */ .lg-actions .lg-next, .lg-actions .lg-prev{ padding:25px 13px; background-color:rgba(0,0,0,0.3); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover{ background-color:rgba(0,0,0,0.5); color:#ddd; } /* Classic Colors */ .lg-toolbar .lg-icon,#lg-counter, .lg-outer .lg-thumb-outer, .lg-outer .lg-toogle-thumb{ color:#ccc; } .lg-toolbar{ background-color:rgba(0,0,0,0.6); } .lg-sub-html{ background-color:rgba(0,0,0,0); } .lg-backdrop{ background-color:rgba(20,20,20,0.8); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object{ border:0px solid rgba(255,255,255,0.1); } .lg-outer .lg-thumb-outer,.lg-outer .lg-toogle-thumb{ background-color:rgba(0,0,0,0.2); } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover{ border-color:rgba(180,180,180,0.5); } /* ============================================== SOCIAL ELEMENT COLORS ============================================== */ /* Background Hovers And Actives */ .mail:hover,.mail-bg{background:#404040 !important;} .facebook:hover,.facebook-bg{background:#4b6ea8 !important;} .twitter:hover,.twitter-bg{background:#4fd5f8 !important;} .youtube:hover,.youtube-bg{background:#da1818 !important;} .vimeo:hover,.vimeo-bg{background:#96d3f0 !important;} .pinterest:hover,.pinterest-bg{background:#d83633 !important;} .linkedin:hover,.linkedin-bg{background:#0189c3 !important;} .flickr:hover,.flickr-bg{background:#84979e !important;} .dropbox:hover,.dropbox-bg{background:#1e81c2 !important;} .instagram:hover,.instagram-bg{background:#d82950 !important;} .tumblr:hover,.tumblr-bg{background:#345365 !important;} .skype:hover,.skype-bg{background:#00bbf0!important;} .google:hover,.google-bg{background:#da2200 !important;} .twitter-square:hover,.twitter-square-bg{background:#4fd5f8 !important;} .rss:hover,.rss-bg{background:#fb9c00 !important;} .apple:hover,.apple-bg{background:#404040 !important;} .windows:hover,.windows-bg{background:#0063f4 !important;} .dribbble:hover,.dribbble-bg{background:#f2689c !important;} .android:hover,.android-bg{background:#80da23 !important;} .html5:hover,.html5-bg{background:#ec6432 !important;} .css3:hover,.css3-bg{background:#3a88d0 !important;} .pagelines:hover,.pagelines-bg{background:#4f98df !important;} .gittip:hover,.gittip-bg{background:#7c6035 !important;} /* Color Hovers */ .mail-color:hover{color:#404040 !important;} .facebook-color:hover{color:#4b6ea8 !important;} .twitter-color:hover{color:#4fd5f8 !important;} .youtube-color:hover{color:#da1818 !important;} .vimeo-color:hover{color:#96d3f0 !important;} .pinterest-color:hover{color:#d83633 !important;} .linkedin-color:hover{color:#0189c3 !important;} .flickr-color:hover{color:#84979e !important;} .dropbox-color:hover{color:#1e81c2 !important;} .instagram-color:hover{color:#d82950 !important;} .tumblr-color:hover{color:#345365 !important;} .skype-color:hover{color:#00bbf0!important;} .google-color:hover{color:#da2200 !important;} .twitter-square-color:hover{color:#4fd5f8 !important;} .rss-color:hover{color:#fb9c00 !important;} .apple-color:hover{color:#404040 !important;} .windows-color:hover{color:#0063f4 !important;} .dribbble-color:hover{color:#f2689c !important;} .android-color:hover{color:#80da23 !important;} .html5-color:hover{color:#ec6432 !important;} .css3-color:hover{color:#3a88d0 !important;} .pagelines-color:hover{color:#4f98df !important;} .gittip-color:hover{color:#7c6035 !important;} hr {height:1px; border:none; color:#fff; background-color:#E0E0E0} .tp-leftarrow.tparrows, .tp-rightarrow.tparrows { display: none !important; } .tp-bullets { display: none !important; }