@charset "utf-8"; /*------------------------------------------------------------------ [Master Stylesheet] Project: Rhythm Version: 2.13 Last change: 22.10.2019 Primary use: MultiPurpose Template -------------------------------------------------------------------*/ @import "font-awesome.min.css"; @import "et-line.css"; @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,300,700); @import url(https://fonts.googleapis.com/css?family=Dosis:300,400,700); /*------------------------------------------------------------------ [Table of contents] 1. Common styles 2. Page loader / .page-loader 3. Typography 4. Buttons 5. Forms fields 6. Home sections / .home-section 6.1. Home content 6.2. Scroll down icon 6.3. Headings styles 7. Compact bar / .nav-bar-compact 8. Classic menu bar / .main-nav 9. Sections styles / .page-section, .small-section, .split-section 10. Alternative services / .alt-service-grid 11. Team / .team-grid 12. Features 29. Bootstrap multicolumn grid /*------------------------------------------------------------------ # [Color codes] # Black (active elements, links, text) #111 # Gray (text) #777 # Dark #111 # Dark Lighter #252525 # Gray BG #f4f4f4 # Gray BG Lighter #f8f8f8 # Mid grey #5f5f5f # Borders #e9e9e9 # */ /*------------------------------------------------------------------ [Typography] Body: 14px/1.6 "Open Sans", arial, sans-serif; Headers: Dosis, arial, sans-serif; Serif: "Times New Roman", Times, serif; Section Title: 35px/1.3 "Open Sans", arial, sans-serif; Section Heading: 24px/1.3 "Open Sans", arial, sans-serif; Section Text: 15px/1.7 "Open Sans", arial, sans-serif; -------------------------------------------------------------------*/ /* ============================== Common styles ============================== */ .align-center{ text-align:center !important; } .align-left{ text-align:left !important;} .align-right{ text-align:right !important; } .left{float:left !important;} .right{float:right !important;} .relative{position:relative;} .hidden{display:none;} .inline-block{display:inline-block;} .white{ color: #fff !important; } .black{ color: #111 !important; } .color{ color: #e41919 !important; } .glass{ opacity: .5; }; .image-fullwidth img{ width: 100%; } .stick-fixed{ position: fixed !important; top: 0; left: 0; } .round{ -webkit-border-radius: 2px !important; -moz-border-radius: 2px !important; border-radius: 2px !important; } ::-moz-selection{ color: #fff; background:#000; } ::-webkit-selection{ color: #fff; background:#000; } ::selection{ color: #fff; background:#000; } .animate, .animate *{ -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .no-animate, .no-animate *{ -webkit-transition: 0 none !important; -moz-transition: 0 none !important; -ms-transition: 0 none !important; -o-transition: 0 none !important; transition:0 none !important; } .shadow{ -webkit-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15); -moz-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15); box-shadow: 0px 3px 50px rgba(0, 0, 0, .15); } .white-shadow{ -webkit-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2); -moz-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2); box-shadow: 0px 0px 200px rgba(255, 255, 255, .2); } .clearlist, .clearlist li { list-style: none; padding: 0; margin: 0; background: none; } .full-wrapper { margin: 0 2%; } .container-fluid{ max-width: 1170px; margin: 0 auto; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container-1400{ max-width: 1400px; margin: 0 auto; padding-left: 2%; padding-right: 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html{ overflow-y: scroll; -ms-overflow-style: scrollbar; } html, body{ height: 100%; -webkit-font-smoothing: antialiased; } .page{ overflow: hidden; } .body-masked{ display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fff url(../images/loader.gif) no-repeat center center; z-index: 100000; } .mask-delay{ -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; animation-delay: 0.75s; } .mask-speed{ -webkit-animation-duration: 0.25s !important; -moz-animation-duration: 0.25s !important; animation-duration: 0.25s !important; } iframe{ border: none; } a, b, div, ul, li{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -moz-outline-: none; } a:focus:not(.focus-visible), a:active{ -moz-outline: none; outline: none; } a:focus.focus-visible, button:focus.focus-visible{ -moz-outline: 2px dotted #36a367 !important; outline: 2px dotted #36a367 !important; outline-offset: 0 !important; } img:not([draggable]), embed, object, video{ max-width: 100%; height: auto; } /* ============================== Page loader ============================== */ .page-loader{ display:block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #fefefe; z-index: 100000; } .loader{ width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; font-size: 10px; text-indent: -12345px; border-top: 1px solid rgba(0,0,0, 0.08); border-right: 1px solid rgba(0,0,0, 0.08); border-bottom: 1px solid rgba(0,0,0, 0.08); border-left: 1px solid rgba(0,0,0, 0.5); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: spinner 700ms infinite linear; -moz-animation: spinner 700ms infinite linear; -ms-animation: spinner 700ms infinite linear; -o-animation: spinner 700ms infinite linear; animation: spinner 700ms infinite linear; z-index: 100001; } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* ============================== Typography ============================== */ body{ color: #111; font-size: 14px; font-family: "Open Sans", arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a{ color: #111; text-decoration: underline; } a:hover{ color: #888; text-decoration: underline; } h1,h2,h3,h4,h5,h6{ margin-bottom: 1.3em; line-height: 1.4; font-weight: 400; } h1{ font-size: 32px; } h2{ font-size: 28px; } h6{ font-weight: 700; } p{ margin: 0 0 2em 0; } ul, ol{ margin: 0 0 1.5em 0; } blockquote{ margin: 3em 0 3em 0; padding: 0; border: none; background: none; font-style: normal; line-height: 1.7; color: #777; } blockquote p{ margin-bottom: 1em; font-size: 24px; font-weight: 300; font-style: normal; line-height: 1.6; } blockquote footer{ font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; } dl dt{ margin-bottom: 5px; } dl dd{ margin-bottom: 15px; } pre{ background-color: #f9f9f9; border-color: #ddd; } hr{ background-color: rgba(255,255,255, .08); } hr.white{ border-color: rgba(255,255,255, .35); background: rgba(255,255,255, .35); } hr.black{ border-color:rgba(0,0,0, .85); background: rgba(0,0,0, .85); } .uppercase{ text-transform: uppercase; letter-spacing: 1px; } .font-alt{ font-family: "Open Sans", arial, sans-serif; } .serif{ font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: normal; } .normal{ font-weight: normal; } .strong{ font-weight: 700 !important; } .lead{ margin: 1em 0 2em 0; font-size: 140%; line-height: 1.6; } .text{ font-size: 16px; font-weight: 300; color: #5f5f5f; line-height: 1.8; } .text h1, .text h2, .text h3, .text h4, .text h5, .text h6{ color: #111; } .dropcap{ float: left; font-size: 3em; line-height: 1; padding: 2px 8px 2px 0; } .big-icon{ display: block; width: 90px; height: 90px; margin: 0 auto 20px; border: 3px solid #fff; text-align: center; line-height: 88px; font-size: 32px; color: rgba(255,255,255, .97); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .big-icon .fa-play{ position: relative; left: 4px; } .big-icon.big-icon-rs{ border: none; width: auto; height: auto; font-size: 96px; } .big-icon-link{ display: inline-block; text-decoration: none; } .big-icon-link:hover{ border-color: transparent !important; } .big-icon-link:hover .big-icon{ border-color: #fff; color: #fff; -webkit-transition: 0 none !important; -moz-transition: 0 none !important; -ms-transition: 0 none !important; -o-transition: 0 none !important; transition:0 none !important; } .big-icon-link:active .big-icon{ -webkit-transform: scale(0.99); -moz-transform: scale(0.99); -o-transform: scale(0.99); -ms-transform: scale(0.99); transform: scale(0.99); } .wide-heading{ display: block; margin-bottom: 10px; font-size: 48px; font-weight: 400; letter-spacing: 0.4em; text-align: center; text-transform: uppercase; opacity: .9; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .big-icon-link:hover, .big-icon-link:hover .wide-heading{ color: #fff; text-decoration: none; } .sub-heading{ font-size: 16px; font-style: italic; text-align: center; line-height: 1.3; color: rgba(255,255,255, .75); } .big-icon.black{ color: #000; border-color: rgba(0,0,0, .75); } .big-icon-link:hover .big-icon.black{ color: #000; border-color: #000; } .wide-heading.black{ color: rgba(0,0,0, .87); } .big-icon-link.black:hover, .big-icon-link:hover .wide-heading.black{ color: #000; text-decoration: none; } .sub-heading.black{ color: rgba(0,0,0, .75); } /* ============================== Home sections ============================== */ /* * Header common styles */ .home-section{ width: 100%; display: block; position: relative; overflow: hidden; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .home-content{ display: table; width: 100%; height: 100%; text-align: center; } /* Home content */ .home-content{ position: relative; } .home-text{ display: table-cell; height: 100%; vertical-align: middle; } /* Scroll down icon */ @-webkit-keyframes scroll-down-anim { 0%{ bottom: 2px; } 50%{ bottom: 7px; } 100%{ bottom: 2px; } } @-moz-keyframes scroll-down-anim { 0%{ bottom: 2px; } 50%{ bottom: 7px; } 100%{ bottom: 2px; } } @-o-keyframes scroll-down-anim { 0%{ bottom: 2px; } 50%{ bottom: 7px; } 100%{ bottom: 2px; } } @keyframes scroll-down-anim { 0%{ bottom: 2px; } 50%{ bottom: 7px; } 100%{ bottom: 2px; } } .scroll-down{ width: 40px; height: 40px; margin-left: -20px; position: absolute; bottom: 20px; left: 50%; text-align: center; text-decoration: none; -webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); -moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); -o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); } .scroll-down:before{ display: block; content: ""; width: 20px; height: 20px; margin: 0 0 0 -10px; position: absolute; bottom: 0; left: 50%; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); -moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); -o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index: 1; } .scroll-down:hover:before{ opacity: .6; } .scroll-down-icon{ display: block; width: 10px; height: 10px; margin-left: -5px; position: absolute; left: 50%; bottom: 4px; color: #111; font-size: 15px; -webkit-animation: scroll-down-anim 1s infinite; -moz-animation: scroll-down-anim 1s infinite; -o-animation: scroll-down-anim 1s infinite; animation: scroll-down-anim 1s infinite; z-index: 2; } /* * HTML5 BG VIdeo */ .bg-video-wrapper{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .bg-video-overlay{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .bg-video-wrapper video{ max-width: inherit; height: inherit; z-index: 0; } a.bg-video-button-muted{ display:block; width: 1em; height: 1em; position: absolute; bottom: 15px; left: 15px; font-size: 28px; line-height: 1; color: #fff; opacity: .75; z-index: 1000; } /* * Headings styles */ .hs-wrap{ max-width: 570px; margin: 0 auto; padding: 47px 30px 53px; position: relative; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(255,255,255, .5); } .hs-wrap-1{ max-width: 350px; margin: 0 auto; position: relative; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .hs-line-1{ margin-top: 0; position: relative; /*text-transform: uppercase;*/ font-size: 25px; font-weight: 400; letter-spacing: 5px; color: #fff; opacity: .9; } .hs-line-2{ margin-top: 0; position: relative; font-size: 72px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.085em; line-height: 1.3; color: rgba(255,255,255, .85); } .hs-line-3{ margin-top: 0; position: relative; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255, .7); } .hs-line-4{ margin-top: 0; position: relative; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255, .85); } .hs-line-5{ margin-top: 0; position: relative; font-size: 62px; font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.32em; opacity: .85; } .hs-line-6{ margin-top: 10px; position: relative; font-size: 20px; font-weight: 400; line-height: 1.2; opacity: .9; } .hs-line-6.no-transp{ opacity: 1; } .hs-line-7{ margin-top: 0; position: relative; font-size: 64px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; letter-spacing: 5px; } .hs-line-8{ margin-top: 0; position: relative; font-size: 16px; font-weight: 400; letter-spacing: 0.3em; line-height: 1.2; opacity: .75; } .hs-line-8.no-transp{ opacity: 1; } .hs-line-9{ margin-top: 0; position: relative; font-size: 96px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; } .hs-line-10{ margin-top: 0; display: inline-block; position: relative; padding: 15px 24px; background: rgba(0,0,0, .75); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255, .85); } .hs-line-10 > span{ margin: 0 10px; } .hs-line-10.highlight{ background: #e41919; opacity: .65; } .hs-line-10.transparent{ background: none; color: #aaa; padding: 0; } .hs-line-11{ margin-top: 0; position: relative; font-size: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5em; line-height: 1.8; opacity: .9; } .hs-line-12{ margin-top: 0; position: relative; font-size: 80px; font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.4em; } .hs-line-13{ margin-top: 0; position: relative; font-size: 96px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.3em; } .hs-line-14{ margin-top: 0; position: relative; font-size: 48px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.7em; } .hs-line-15{ margin-top: 0; position: relative; font-size: 36px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.3; } .no-transp{ opacity: 1 !important; } .fullwidth-galley-content{ position: absolute; top: 0; left: 0; width: 100%; z-index: 25; } /* ============================== Top bar ============================== */ .top-bar{ min-height: 40px; background: #fbfbfb; border-bottom: 1px solid rgba(0,0,0, .05); font-size: 11px; letter-spacing: 1px; } /* * Top links */ .top-links{ list-style: none; margin: 0; padding: 0; text-transform: uppercase; } .top-links li{ float: left; border-left: 1px solid rgba(0,0,0, .05); } .top-links li:last-child{ border-right: 1px solid rgba(0,0,0, .05); } .top-links li .fa{ font-size: 14px; position: relative; top: 1px; } .top-links li .tooltip{ text-transform: none; letter-spacing: normal; z-index: 2003; } .top-links li a{ display: block; min-width: 40px; height: 40px; line-height: 40px; padding: 0 10px; text-decoration: none; text-align: center; color: #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .top-links li a:hover{ color: #555; background-color: rgba(0,0,0, .02); } /* * Top bar dark */ .top-bar.dark{ background-color: #333; border-bottom: none; } .top-bar.dark .top-links li, .top-bar.dark .top-links li:last-child{ border-color: rgba(255,255,255, .07); } .top-bar.dark .top-links li a{ color: #aaa; } .top-bar.dark .top-links li a:hover{ color: #ccc; background-color: rgba(255,255,255, .05); } /* ============================== Classic menu bar ============================== */ /* Logo (in navigation panel)*/ .nav-logo-wrap{ float: left; margin-right: 20px; } .nav-logo-wrap .logo{ display: table-cell; vertical-align: middle; max-width: 118px; height: 75px; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .nav-logo-wrap .logo img{ max-height: 100%; } .nav-logo-wrap .logo:before, .nav-logo-wrap .logo:after{ display: none; } .logo, a.logo:hover{ font-family: Dosis, arial, sans-serif; font-size: 18px; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; color: rgba(0,0,0, .9); } /* * Desktop nav */ .main-nav{ width: 100%; height: 75px !important; position: relative; top: 0; left: 0; text-align: left; background: rgba(255,255,255, .97); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05); -moz-box-shadow: 0 1px 0 rgba(0,0,0,.05); box-shadow: 0 1px 0 rgba(0,0,0,.05); z-index: 1030; -webkit-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .small-height{ height: 55px !important; } .small-height .inner-nav ul li a{ height: 55px !important; line-height: 55px !important; } .inner-nav{ display: inline-block; position: relative; float: right; } .inner-nav ul{ float: right; margin: auto; font-size: 11px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; text-align: center; line-height: 1.3; } .inner-nav ul li { float: left; margin-left: 30px; position: relative; } .inner-nav ul li a{ color: #777; letter-spacing: 2px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .inner-nav ul > li:first-child > a{ } .inner-nav ul li a:hover, .inner-nav ul li a.active{ color: #000; text-decoration: none; } /* Menu sub */ .mn-sub{ display: none; width: 200px; position: absolute; top: 100%; left: 0; padding: 0; background: rgba(30,30,30, .97); } .mn-sub li{ display: block; width: 100%; margin: 0 !important; } .inner-nav ul li .mn-sub li a{ display: block; width: 100%; height: auto !important; line-height: 1.3 !important; position: relative; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 11px 15px; font-size: 13px; text-align: left; text-transform: none; border-left: none; border-right: none; letter-spacing: 0; color: #b0b0b0 !important; cursor: pointer; } .mobile-on .mn-has-multi > li:last-child > a{ border-bottom: 1px solid rgba(255,255,255, .065) !important; } .mn-sub li a:hover, .inner-nav ul li .mn-sub li a:hover, .mn-sub li a.active{ background: rgba(255,255,255, .09); color: #f5f5f5 !important; } .mn-sub li ul{ left: 100%; right: auto; top: 0; border-left: 1px solid rgba(255,255,255, .07); } .inner-nav > ul > li:last-child .mn-sub, .inner-nav li .mn-sub.to-left{ left: auto; right: 0; } .inner-nav li:last-child .mn-sub li ul, .inner-nav li .mn-sub li ul.to-left{ left: auto; right: 100%; top: 0; border-left: none; border-right: 1px solid rgba(255,255,255, .07); } .mobile-on .inner-nav li:last-child .mn-sub li ul{ left: auto; right: auto; top: 0; } .mn-wrap{ padding: 8px; } /* Menu sub multi */ .mn-has-multi{ width: auto !important; padding: 15px; text-align: left; white-space: nowrap; } .mn-sub-multi{ width: 190px !important; overflow: hidden; white-space: normal; float: none !important; display: inline-block !important; vertical-align: top; } .mn-sub-multi > ul{ width: auto; margin: 0; padding: 0; float: none; } .mn-group-title{ font-weight: 700; text-transform: uppercase; color: #fff !important; } .mn-group-title:hover{ background: none !important; } .mobile-on .mn-sub-multi > ul{ left: auto; right: auto; border: none; } .mobile-on .mn-sub-multi{ display: block; width: 100% !important; } .mobile-on .mn-sub-multi > ul > li:last-child > a{ border: none !important; } .mobile-on .mn-sub > li:last-child > a{ border: none !important; } .mobile-on .mn-sub-multi:last-child > ul{ border-bottom: none !important; } /* * Mobile nav */ .mobile-on .desktop-nav{ display: none; width: 100%; position: absolute; top: 100%; left: 0; padding: 0 15px; z-index: 100; } .mobile-on .full-wrapper .desktop-nav{ padding: 0; } .mobile-on .desktop-nav ul{ width: 100%; float: none; background: rgba(18,18,18, .97); position: relative; overflow-x: hidden; } .mobile-on .desktop-nav > ul{ overflow-y: auto; } .mobile-on .desktop-nav ul li{ display: block; float: none !important; overflow: hidden; } .mobile-on .desktop-nav ul li ul{ padding: 0; border-bottom: 1px solid rgba(255,255,255, .1); } .mobile-on .desktop-nav ul li a{ display: block; width: 100%; height: 38px !important; line-height: 38px !important; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; text-align: left; border-left: none; border-right: none; border-bottom: 1px solid rgba(255,255,255, .065); color: #999; letter-spacing: 1px; cursor: pointer; } .mobile-on .desktop-nav ul li a:hover, .mobile-on .desktop-nav ul li a.active{ background: rgba(255,255,255, .03); color: #ddd; } /* Menu sub */ .mobile-on .mn-has-sub > .fa{ display: block; width: 18px; height: 18px; font-size: 14px; line-height: 16px; position: absolute; top: 50%; right: 10px; margin-top: -8px; text-align: center; border: 1px solid rgba(255,255,255, .1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .mobile-on .js-opened > .mn-has-sub > .fa{ border-color: rgba(255,255,255, .4); line-height: 14px; } .mobile-on .inner-nav li{ margin: 0 !important; } .mobile-on .mn-sub{ display: none; opacity: 0; position: relative; left: 0 !important; right: 0; top: 0; bottom: 0; border-left: none !important; border-right: none !important; border-top: none ; z-index: 10; } .mobile-on .mn-sub li{ padding-left: 10px; } .inner-nav li.js-opened .mn-sub{ opacity: 1; } .mobile-nav{ display: none; float: right; vertical-align: middle; font-size: 11px; font-weight: 400; text-transform: uppercase; border-left: 1px solid rgba(0,0,0, .05); border-right: 1px solid rgba(0,0,0, .05); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -webkit-transition-property: background, color; -moz-transition-property: background, color; -o-transition-property: background, color; transition-property: background, color; } .mobile-nav:hover, .mobile-nav.active{ background: #fff; color: #777; } .mobile-nav:active{ -webkit-box-shadow: 0 0 35px rgba(0,0,0,.05) inset; -moz-box-shadow: 0 0 35px rgba(0,0,0,.05) inset; box-shadow: 0 0 35px rgba(0,0,0,.05) inset; } .no-js .mobile-nav{ width: 55px; height: 55px; } .mobile-on .mobile-nav{ display: table; } .mobile-nav .fa{ height: 100%; display: table-cell; vertical-align: middle; text-align: center; font-size: 21px; } /* Menu sub multi */ .mobile-on .mn-has-multi{ width: auto; padding: 0; text-align: left; white-space: normal; } .mobile-on .mn-sub{ width: 100%; float: none; position: relative; overflow-x: hidden; } /* * Dark panel style */ .main-nav.dark{ background-color: rgba(10,10,10, .95); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .main-nav.dark .inner-nav ul > li > a{ color: rgba(255,255,255, .7); } .main-nav.dark .inner-nav ul > li > a:hover, .main-nav.dark .inner-nav ul > li > a.active{ color: #fff; } .main-nav.dark .mobile-nav{ background-color: transparent; border-color: transparent; color: rgba(255,255,255, .9); } .main-nav.dark .mobile-nav:hover, .main-nav.dark .mobile-nav.active{ color: #fff; } .main-nav.mobile-on.dark .inner-nav{ border-top: 1px solid rgba(100,100,100, .4); } .main-nav.dark .logo, .main-nav.dark a.logo:hover{ font-size: 18px; font-weight: 800; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255, .9); } .main-nav.dark .mn-sub{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .main-nav.dark .mn-soc-link{ border: 1px solid rgba(255,255,255, .2); } .main-nav.dark .mn-soc-link:hover{ border: 1px solid rgba(255,255,255, .3); } /* * Transparent panel style */ .main-nav.transparent{ background: transparent !important; } .main-nav.js-transparent{ -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } /* * Centered menu */ .mn-centered{ text-align: center; } .mn-centered .inner-nav{ float: none; } .mn-centered .inner-nav > ul{ float: none; display: inline-block; margin-left: auto; margin-right: auto; } .mn-centered .inner-nav > ul > li:first-child{ margin-left: 0; } .mn-centered .mobile-nav{ float: none; margin-left: auto; margin-right: auto; } /* * Aligned left menu */ .mn-align-left{ } .mn-align-left .inner-nav{ float: none; width: 100%; } .mn-align-left .inner-nav > ul{ float: none; margin-left: auto; margin-right: auto; } .mn-align-left .inner-nav > ul > li:first-child{ margin-left: 0; } .mn-align-left .mobile-nav{ float: none; margin-left: auto; margin-right: auto; } /* * Menu social links */ .mn-soc-link{ width: 34px; height: 34px; line-height: 33px; text-align: center; font-size: 12px; display: inline-block; border: 1px solid rgba(0,0,0, .1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .mn-soc-link:hover{ border: 1px solid rgba(0,0,0, .25); } .main-nav .tooltip{ font-size: 12x; text-transform: none; letter-spacing: 0; } /* ============================== Fullscreen menu ============================== */ .fm-logo-wrap{ position: absolute; top: 30px; left: 30px; height: 54px; z-index: 1030; } .fm-logo-wrap .logo{ display: block; max-width: 200px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .fm-button{ display: block; position: fixed; top: 30px; right: 30px; width: 54px; height: 54px; background: #111; opacity: .85; text-indent: -12345px; z-index: 1030; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .fm-button:hover{ opacity: 1; } .fm-button span{ display: block; width: 22px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -11px; -webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .fm-button span:before, .fm-button span:after{ content: ""; display: block; width: 100%; height: 2px; background: #fff; position: absolute; top: -6px; left: 0; -webkit-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -webkit-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s; -moz-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -moz-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s; -o-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -o-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s; -ms-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -ms-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s; transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s; } .fm-button span:after{ top: auto; bottom: -6px; } /* Active menu button */ .fm-button.active{ background: #222; z-index: 2001; } .fm-button.active span{ background: transparent; } .fm-button.active span:before{ top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .fm-button.active span:after{ bottom: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Menu wrapper */ .fm-wrapper{ display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; padding: 50px 30px; overflow-x: hidden; overflow-y: auto; background: rgba(10,10,10, .97); z-index: 2000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .fm-wrapper-sub{ display: table; width: 100%; height: 100%; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .fm-wrapper-sub.js-active{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .fm-wrapper-sub-sub{ display: table-cell; text-align: center; vertical-align: middle; } .fm-menu-links, .fm-menu-links ul{ margin: 0; padding: 10px 0; line-height: 1.3; text-align: center; } .fm-menu-links ul.fm-sub{ padding: 0; } .fm-menu-links a{ display: block; position: relative; margin: 0; padding: 15px 20px; color: #999; font-size: 17px; letter-spacing: 2px; font-weight: 400; text-transform: uppercase; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: rgba(255,255,255, .1); -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); z-index: 11; } .no-touch .fm-menu-links a:hover, .fm-menu-links a:active, .fm-menu-links li.js-opened > a{ color: #d5d5d5; text-decoration: none; } .fm-menu-links li{ margin: 0; padding: 0; position: relative; } .fm-menu-links li > a:active, .fm-menu-links li.active > a, .fm-menu-links li a.active{ color: #f5f5f5; } .fm-menu-links li.js-opened:before{ display: none; } .no-touch .fm-menu-links li.js-opened > a:hover, .fm-menu-links li.js-opened > a:active{ color: #fff; } .fm-has-sub{ } .fm-has-sub .fa{ font-size: 14px; } .js-opened > .fm-has-sub > .fa{ color: #fff; } .fm-sub{ display: none; opacity: 0; position: relative; } .fm-sub > li > a{ padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; font-weight: 400; } .fm-menu-links li.js-opened .fm-sub{ opacity: 1; } .fm-search{ width: 320px; } .fm-search input.search-field{ background: transparent; color: #555; text-align: center; border: none; border-bottom: 1px solid rgba(255,255,255, .2); } .fm-search input.search-field:hover{ border: none; border-bottom: 1px solid rgba(255,255,255, .4); } .fm-search input.search-field:focus{ color: #999; border-color: rgba(255,255,255, .7); } .fm-search .search-button:hover{ color: #fff; } /* Social links */ .fm-social-links{ padding: 10px; font-size: 14px; text-align: center; } .fm-social-links > a{ display: inline-block; margin: 0 2px; width: 34px; height: 34px; line-height: 34px; border: 1px solid rgba(255,255,255, .15); text-align: center; text-decoration: none; color: #555; -webkir-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .fm-social-links > a:hover{ border-color: rgba(255,255,255, .3); color: #999; } /* ============================== Sections styles ============================== */ /* * Common */ .page-section, .small-section{ width: 100%; display: block; position: relative; overflow: hidden; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 140px 0; } .small-section{ padding: 70px 0; } .small-title{ padding: 0; margin: 0 0 30px 0; text-transform: uppercase; font-size: 18px; font-weight: 300; letter-spacing: 0.3em; } .section-icon{ margin-bottom: 7px; text-align: center; font-size: 32px; } .small-title .serif{ text-transform: none; font-weight: 400; } .small-title.white{ color: #fff; } .bg-scroll{ background-attachment: scroll !important; } .bg-pattern{ background-repeat: repeat; background-size: auto; } .bg-pattern-over:before, .bg-pattern-over .YTPOverlay:after{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: repeat; background-size: auto; background-image: url(../images/pattern-bg-2.png); } .bg-gray{ background-color: #f4f4f4; } .bg-gray-lighter{ background-color: #f8f8f8; } .bg-dark, .bg-dark-lighter, .bg-dark-alfa-30, .bg-dark-alfa-50, .bg-dark-alfa-70, .bg-dark-alfa-90, .bg-dark-alfa, .bg-color, .bg-color-lighter, .bg-color-alfa-30, .bg-color-alfa-50, .bg-color-alfa-70, .bg-color-alfa-90, .bg-color-alfa{ color: #fff; } .bg-dark a, .bg-dark-lighter a, .bg-dark-alfa-30 a, .bg-dark-alfa-50 a, .bg-dark-alfa-70 a, .bg-dark-alfa-90 a, .bg-dark-alfa a, .bg-color a, .bg-colorlighter a, .bg-color-alfa-30 a, .bg-color-alfa-50 a, .bg-color-alfa-70 a, .bg-color-alfa-90 a, .bg-color-alfa a{ color: rgba(255,255,255, .8); padding-bottom: 3px; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .bg-dark a:hover, .bg-dark-lighter a:hover, .bg-dark-alfa-30 a:hover, .bg-dark-alfa-50 a:hover, .bg-dark-alfa-70 a:hover, .bg-dark-alfa-90 a:hover, .bg-dark-alfa a:hover, .bg-color a:hover, .bg-color-lighter a:hover, .bg-color-alfa-30 a:hover, .bg-color-alfa-50 a:hover, .bg-color-alfa-70 a:hover, .bg-color-alfa-90 a:hover, .bg-color-alfa a:hover{ color: rgba(255,255,255, 1); text-decoration: none; } .bg-color .text, .bg-color-lighter .text, .bg-color-alfa-30 .text, .bg-color-alfa-50 .text, .bg-color-alfa-70 .text, .bg-color-alfa-90 .text, .bg-color-alfa .text, .bg-color .section-text, .bg-color-lighter .section-text, .bg-color-alfa-30 .section-text, .bg-color-alfa-50 .section-text, .bg-color-alfa-70 .section-text, .bg-color-alfa-90 .section-text, .bg-color-alfa .section-text{ color: rgba(255,255,255, .75); } .bg-color .white, .bg-color-lighter .white, .bg-color-alfa-30 .white, .bg-color-alfa-50 .white, .bg-color-alfa-70 .white, .bg-color-alfa-90 .white, .bg-color-alfa .white{ color: #fff; } .bg-dark{ background-color: #111; } .bg-dark-lighter{ background-color: #252525; } .bg-dark-alfa:before, .bg-dark-alfa .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(17,17,17, .97); } .bg-dark-alfa-30:before, .bg-dark-alfa-30 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(34,34,34, .3); } .bg-dark-alfa-50:before, .bg-dark-alfa-50 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(34,34,34, .5); } .bg-dark-alfa-70:before, .bg-dark-alfa-70 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(17,17,17, .7); } .bg-dark-alfa-90:before, .bg-dark-alfa-90 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(3,3,3, .9); } .bg-light-alfa:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .97); } .bg-light-alfa-30:before, .bg-light-alfa-30 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .30); } .bg-light-alfa-50:before, .bg-light-alfa-50 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .50); } .bg-light-alfa-70:before, .bg-light-alfa-70 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .7); } .bg-light-alfa-90:before, .bg-light-alfa-90 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(252,252,252, .9); } .bg-color{ background-color: #e41919; } .bg-color-alfa:before, .bg-color-alfa .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e41919; opacity: .97; } .bg-color-alfa-30:before, .bg-color-alfa-30 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e41919; opacity: .3; } .bg-color-alfa-50:before, .bg-color-alfa-50 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e41919; opacity: .5; } .bg-color-alfa-70:before, .bg-color-alfa-70 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e41919; opacity: .7; } .bg-color-alfa-90:before, .bg-color-alfa-90 .YTPOverlay:before{ content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e41919; opacity: .9; } .bg-orange{ background-color: #f47631 !important; } .bg-yellow{ background-color: #ffce02 !important; } .bg-cyan{ background-color: #27c5c3 !important; } .bg-green{ background-color: #58bf44 !important; } .bg-blue{ background-color: #43a5de !important; } .bg-purple{ background-color: #375acc !important; } .bg-red{ background-color: #e13939 !important; } .section-title { margin-bottom: 15px; font-size: 18px; font-weight: 400; text-transform: uppercase; text-align: center; letter-spacing: 0.5em; line-height: 1.4; } .section-more{ margin-top: 7px; color: #999; font-size: 11px; font-weight: 400; letter-spacing: 0.4em; text-decoration: none; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .section-more:hover{ text-decoration: none; color: #000; } .section-more .fa{ font-size: 12px; } .section-heading { margin-bottom: 15px; font-size: 24px; font-weight: 400; text-transform: uppercase; text-align: center; letter-spacing: 0.5em; line-height: 1.3; } .section-line{ width: 55px; height: 1px; margin: 30px auto; background: #111; } .section-text{ font-size: 15px; font-weight: 300; color: #777; line-height: 1.7; } .section-text blockquote{ margin-top: -5px; } .section-bot-image{ margin: 140px 0 -140px; text-align: center; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } .image-fullwidth img{ width: 100%; } /* Breadcrumbs */ .mod-breadcrumbs{ margin-top: -5px; font-size: 11px; font-weight: 400; letter-spacing: 0.4em; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .mod-breadcrumbs span{ opacity: .65; } .mod-breadcrumbs a{ text-decoration: none; } .mod-breadcrumbs a:hover{ text-decoration: none; } .mod-breadcrumbs .fa{ font-size: 12px; } .mod-breadcrumbs-mini{ text-align: left; } .home-bot-image{ width: 100%; position: absolute; bottom:0; left: 0; text-align: center; } .fixed-height-large, .fixed-height-medium, .fixed-height-small{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fixed-height-large{ min-height: 800px; } .fixed-height-medium{ min-height: 700px; } .fixed-height-small{ min-height: 600px; } /* * Split section */ .split-section{ width: 100%; display: block; position: relative; overflow: hidden; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .split-section-headings{ width: 50%; position: relative; overflow: hidden; text-align: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .ssh-table{ width: 100%; min-height: 500px; display: table; } .ssh-cell{ display: table-cell; padding-left: 10px; padding-right: 10px; vertical-align: middle; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .split-section-content{ width: 50%; position: relative; overflow: hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .split-section-wrapper{ padding: 0 80px; } /* ============================== Alternative services ============================== */ .alt-service-grid{ margin-top: -60px; } .alt-services-image{ text-align: center; } .alt-services-image > img{ display: block; width: 100%; } .alt-service-item{ margin: 60px 0 0 0; position: relative; padding-left: 55px; padding-top: 3px; font-size: 13px; font-weight: 300; color: #999; -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .alt-service-icon{ width: 40px; height: 40px; position: absolute; top: 0; left: 0; line-height: 40px; text-align: center; font-size: 28px; color: #111; -webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .alt-services-title{ margin: 0 0 10px 0; padding: 0; font-size: 15px; font-weight: 400; color: #111; } /* ============================== Team ============================== */ .team-grid{ } .team-item{ } .team-item-image{ position: relative; overflow: hidden; } .team-item-image img{ width: 100%; } .team-item-image:after{ content: " "; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent; z-index: 1; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .team-item-detail{ opacity: 0; width: 100%; position: absolute; top: 50%; left: 0; padding: 20px 23px 55px; font-size: 14px; font-weight: 300; color: #777; text-align: center; z-index: 2; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .team-item-detail a{ text-decoration: none; } .team-item-descr{ margin-top:10px; color: #777; text-align:center; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .ppara { font-size: 18px !important; font-weight:500; } .team-item-name { margin-top: 23px; font-size: 18px; text-transform: uppercase; letter-spacing: 0.4em; /*font-weight:600;*/ } .team-item-role{ margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4em; color: #aaa; } .team-social-links{ font-size: 14px; cursor: pointer; } .team-social-links a{ display: inline-block; padding: 3px 7px; color: rgba(0,0,0, .4); -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } /* Hover state */ .no-mobile .team-item:hover .team-item-image:after{ background: rgba(255,255,255, .93); } .no-mobile .team-item:hover .team-item-detail{ opacity: 1; } .no-mobile .team-item:hover .team-item-descr{ color: #111; } .no-mobile .team-social-links a:hover{ color: rgba(0,0,0, .75); } /* Mobile touch */ .team-item.js-active .team-item-image:after{ background: rgba(255,255,255, .93); } .team-item.js-active .team-item-detail{ opacity: 1; } .team-item.js-active .team-item-descr{ color: #111; } .team-item.js-active .team-social-links a:hover{ color: rgba(0,0,0, .75); } /* ============================== Bootstrap multicolumn grid ============================== */ /* clear the first in row for any block that has the class "multi-columns-row" */ .multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; } .multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; } .multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; } .multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; } .multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; } @media (min-width: 768px) { /* reset previous grid */ .multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: none; } .multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: none; } .multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: none; } .multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: none; } .multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: none; } /* clear first in row for small columns */ .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; } .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; } .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; } .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; } .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; } } @media (min-width: 992px) { /* reset previous grid */ .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; } .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; } .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; } .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; } .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; } /* clear first in row for medium columns */ .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; } .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; } .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; } .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; } .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; } } @media (min-width: 1200px) { /* reset previous grid */ .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: none; } .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: none; } .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: none; } .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: none; } .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: none; } /* clear first in row for large columns */ .multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; } .multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; } .multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; } .multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; } .multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; } }