/*--------------------------------------------------------------------------------- Master Stylesheet Template: Asso - One Page HTML5 Website Template Author: Themetorium URL: http://themetorium.net/ ---------------------------------------------------------------------------------*/ html, body { padding: 0; margin: 0; } body { background-color: #F2F4F5; /* for boxed layout */ font-family: 'Roboto Mono', Helvetica, Arial; -webkit-font-smoothing: antialiased; line-height: 26px; font-size: 16px; font-weight: 300; color: #545A5F; overflow-x: hidden; } a { color: #f7465b; } a:hover, a:focus { color: #f7465b; text-decoration: underline; } a, a:focus, a:hover, a:active { outline: none !important; } img { max-width: 100%; } ::selection { color: #fff; text-shadow: none; background: #f7465b; } ::-moz-selection { color: #fff; text-shadow: none; background: #f7465b; /* Firefox */ } ::-webkit-selection { color: #fff; text-shadow: none; background: #f7465b; /* Safari */ } #body-content { background-color: #FFF; /* for full width layout */ overflow: hidden; } /* Element cover */ .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(5, 16, 21, 0.4); } /* Lead */ .lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 28px; } @media (min-width: 768px) { .lead { font-size: 19px; } } /* Boxed layout (add class="boxed" in "" tag to enable boxed layout. Example: ) */ @media (min-width : 1200px) { body.boxed #body-content { max-width: 1220px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08); } body.boxed #header .header-container { width: 100%; max-width: 1250px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } body.boxed #header.transparent .header-container { width: 100%; max-width: 1170px; } body.boxed #header.transparent.header-filled .header-container { width: 100%; max-width: 1250px; } } /* ------------------------------------------------------------- * * Page preloader (display loading animation while page loads) /* ------------------------------------------------------------- */ #preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #070F13; z-index: 99999; } #preloader .pulse { position: absolute; display: inline-block; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #f7465b; -webkit-animation: scaleout 1.0s infinite ease; animation: scaleout 1.0s infinite ease; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } } /* ------------------------------------------------------------- * * Top slidingbar /* ------------------------------------------------------------- */ #top-slidingbar-wrapper { position: absolute; top: 0; left: 0; width: 100%; padding: 0; z-index: 99998; overflow: visible; } #top-slidingbar { display: none; height: auto; color: #A4AAAD; background-color: #070F13; background-color: rgba(0, 13, 19, 0.95); overflow: hidden; position: relative; padding: 30px 0; } .top-slidingbar-heading { margin-top: 0; font-size: 16px; } @media (max-width: 991px) { #top-slidingbar { max-height: 440px; overflow-y: auto; } #top-slidingbar .col { margin-bottom: 30px; } #top-slidingbar .col:last-child { margin-bottom: 0; } } /* top-slidingbar trigger*/ #top-slidingbar-wrapper .top-slidingbar-trigger-wrapper { position: absolute; right: 0; z-index: 9; border-top: 35px solid #f7465b; border-left: 35px solid transparent; } #top-slidingbar-wrapper .top-slidingbar-trigger { position: absolute; width: 22px; height: 22px; line-height: 18px; bottom: 13px; right: 0px; text-align: center; font-size: 16px; font-weight: 600; color: #FFF; cursor: pointer; } /* top-slidingbar fixed */ #top-slidingbar-wrapper.slidingbar-fixed { position: fixed; } /* ------------------------------------------------------------- * * Header /* ------------------------------------------------------------- */ #header-wrap { } #header { position: relative; top: 0; left: 0; width: 100%; min-height: 68px; background-color: #FFF; z-index: 99997; -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header .header-container { position: relative; } /* Dark header */ #header.header-dark { background-color: #070F13; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Header custom background color */ #header.header-color { background-color: #f7465b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Fluid header */ #header.header-fluid > .container { width: 100%; } /* If boxed layout enabled */ body.boxed #header.header-fluid .container { max-width: 1260px; } /* Fixed header */ #header.fixed-top, #header.fixed-top.transparent, #header.fixed-top.semi-transparent { position: fixed; } /* Hide header/menu on scroll down and show on scroll up */ .show-hide-on-scroll { position: fixed !important; } .show-hide-on-scroll.fly-up { margin-top: -150px !important; } .show-hide-on-scroll.no-move.fly-up { /* header no move if full screen menu is open */ margin-top: 0 !important; } @media (max-width: 768px) { /* header no move on small devices */ .show-hide-on-scroll { position: absolute !important; } .show-hide-on-scroll.fly-up { margin-top: 0 !important; } } /* Transparent header */ #header.transparent, #header.transparent.fly-up.header-filled { position: absolute; background-color: transparent; box-shadow: none; } /* Transparent header + bottom border */ #header.transparent.transparent-border { border-bottom: 1px solid rgba(255,255,255,0.28); } #header.transparent.transparent-border.header-filled { border: none; } /* Semi transparent header */ #header.semi-transparent { position: absolute; background-color: rgba(255, 255, 255, 0.92); } #header.header-dark.semi-transparent { background-color: rgba(0, 0, 0, 0.85); } #header.header-color.semi-transparent { background-color: rgba(247, 70, 91, 0.9); } /* Header filled */ #header.transparent.header-filled { background-color: #FFF; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); } #header.header-dark.transparent.header-filled { background-color: #070F13; } #header.header-color.transparent.header-filled { background-color: #f7465b; } #header.transparent.header-filled .container, #header.transparent.header-filled .container-fluid { margin-top: 0; margin-bottom: 0; } /* Header shadow */ #header.header-shadow:after { position: absolute; display: block; content: ""; left: 0; bottom: -10px; width: 100%; height: 10px; background-image: url(../img/header-shadow.png); background-repeat: no-repeat; background-position: top center; } #header.transparent.header-shadow:after { /* if header is transparent */ display: none; } #header.transparent.header-filled.header-shadow:after { /* if header is filled */ display: block; } /* Header sizes */ @media (min-width: 992px) { /* Header */ #header.header-md { min-height: 80px; } #header.header-lg { min-height: 100px; } #header.header-xlg { min-height: 120px; } /* Header logo */ #header.header-md .logo h1 { line-height: 80px; } #header.header-lg .logo h1 { font-size: 34px; line-height: 100px; } #header.header-xlg .logo h1 { font-size: 36px; line-height: 120px; } /* Header navbar links */ #header.header-md .navbar-nav > li > a, #header.header-md .navbar-nav .nav-link-separator { padding-top: 30px; padding-bottom: 30px; } #header.header-lg .navbar-nav > li > a, #header.header-lg .navbar-nav .nav-link-separator { padding-top: 40px; padding-bottom: 40px; } #header.header-xlg .navbar-nav > li > a, #header.header-xlg .navbar-nav .nav-link-separator { padding-top: 50px; padding-bottom: 50px; } /* Header navbar links (nav-pills) */ #header.header-md .navbar-nav.nav-pills > li > a { margin-top: 24px; margin-bottom: 24px; } #header.header-lg .navbar-nav.nav-pills > li > a { margin-top: 34px; margin-bottom: 34px; } #header.header-xlg .navbar-nav.nav-pills > li > a { margin-top: 44px; margin-bottom: 44px; } /* Header menu hamburger button */ #header.header-md .fullscreen-menu .menu-button { top: 14px; } #header.header-lg .fullscreen-menu .menu-button { top: 24px; } #header.header-xlg .fullscreen-menu .menu-button { top: 34px; } /* Header size if header is filled */ #header.header-filled { min-height: 65px; } #header.header-filled .logo h1 { line-height: 65px; font-size: 26px; } #header.header-filled .navbar-nav > li > a, #header.header-filled .navbar-nav .nav-link-separator { padding-top: 24px !important; padding-bottom: 24px !important; } #header.header-filled .navbar-nav.nav-pills > li > a { margin-top: 18px; margin-bottom: 18px; padding-top: 3px !important; padding-bottom: 3px !important; } #header.header-filled .fullscreen-menu .menu-button { top: 7px; } } /* ------------------------------------------------------------- * * Logo /* ------------------------------------------------------------- */ .logo { position: relative; float: left; z-index: 9; } #header.header-fluid .logo { left: 30px; } @media (max-width: 992px) { #header.header-fluid .logo { left: 20px; } } .logo a { text-decoration: none; } .logo h1 { margin: 0; text-transform: uppercase; font-weight: 500; font-size: 32px; color: #545A5F; line-height: 68px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 992px) { #header .logo h1 { font-size: 26px; } } .logo:hover h1 { letter-spacing: 2px; } /* If header is transparent */ #header.transparent .logo h1 { color: #FFF; } /* If header is filled */ #header.header-filled .logo h1 { color: #545A5F; } /* If header is dark or custom background color used */ #header.header-dark .logo h1, #header.header-dark.transparent .logo h1, #header.header-dark.semi-transparent .logo h1, #header.header-color .logo h1, #header.header-color.transparent .logo h1, #header.header-color.semi-transparent .logo h1 { color: #FFF; } /* ------------------------------------------------------------- * * Menu/Navbar (Bootstrap default) /* ------------------------------------------------------------- */ .navbar { position: static; background-color: transparent; min-height: auto; margin-bottom: 0; border: none; border-radius: 0 !important; } .navbar-nav { font-size: 0; } .navbar-nav > li { float: none; display: inline-block; } .navbar-nav > li > a { margin: 0 8px; padding: 24px 0; line-height: 21px; font-size: 13px; font-weight: 500; color: #545A5F; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .navbar-nav > li:first-child > a { margin-left: 0; } .navbar-nav > li:last-child > a { margin-right: 0; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: transparent; border-color: transparent; } .nav > li > a:focus, .nav > li > a:hover, .nav > .open > a, .nav > .open > a:focus, .nav > .open > a:hover, .nav > .active > a, .nav > .active > a:focus, .nav > .active > a:hover { background-color: transparent; border-color: transparent; color: #f7465b !important; } /* Caret */ .caret { /* bootstrap default */ margin-left: 3px; } .caret-2 { margin-left: 3px; } /* Navbar links separator */ .navbar-nav .nav-link-separator { display: none; padding: 21px 0; font-size: 12px; font-weight: 400; color: #D8D8D8; line-height: 21px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nav-separator .navbar-nav .nav-link-separator { display: block; } /* If navbar uppercase letters are allowed */ .nav-uppercase .navbar-nav > li > a { text-transform: uppercase; font-size: 13px; } /* Navbar align */ .navbar-left { float: left !important; margin-left: -15px; } .navbar-right { float: right !important; margin-right: -15px; } @media (min-width : 1200px) { #header.header-fluid .navbar-right { margin-right: 20px; } } .navbar-center { float: none !important; text-align: center; } /* If header is filled */ #header.header-filled .navbar-nav > li > a, #header.header-filled.transparent .navbar-nav > li > a { color: #545A5F; } #header.header-dark.header-filled .navbar-nav > .active > a, #header.header-dark.header-filled .navbar-nav > li > a:hover { color: #f7465b; } /* if header is dark */ #header.header-dark .navbar-nav > li > a, #header.header-dark.header-filled .navbar-nav > li > a { color: #BBB; } #header.header-dark .nav > li > a:focus, #header.header-dark .nav > li > a:hover, #header.header-dark .nav > .open > a, #header.header-dark .nav > .open > a:focus, #header.header-dark .nav > .open > a:hover, #header.header-dark .nav > .open > a, #header.header-dark .nav > .open > a:focus, #header.header-dark .nav > .open > a:hover, #header.header-dark .nav > .active > a, #header.header-dark .nav > .active > a:focus, #header.header-dark .nav > .active > a:hover { color: #f7465b; } #header.header-dark .navbar-nav .nav-link-separator { color: #ABABAB; } /* if header is colored */ #header.header-color .navbar-nav > li > a, #header.header-color.header-filled .navbar-nav > li > a { color: #FFF; } #header.header-color .navbar-nav > li > a:hover, #header.header-color .navbar-nav > li.active > a, #header.header-color .navbar-nav > li.active > a:focus, #header.header-color .navbar-nav > li.active > a:hover, #header.header-color .navbar-nav > li > a:focus, #header.header-color .navbar-nav > .open > a, #header.header-color .navbar-nav > .open > a:focus { color: #000 !important; } #header.header-color.header-filled .navbar-nav > li > a:hover, #header.header-color.header-filled .navbar-nav > li.active > a, #header.header-color.header-filled .navbar-nav > li.active > a:focus, #header.header-color.header-filled .navbar-nav > li.active > a:hover, #header.header-color.header-filled .navbar-nav > li > a:focus, #header.header-color.header-filled .navbar-nav > .open > a, #header.header-color.header-filled .navbar-nav > .open > a:focus { color: #000 !important; } #header.header-color.transparent .navbar-nav > li > a:hover, #header.header-color.transparent .navbar-nav > li.active > a, #header.header-color.transparent .navbar-nav > li.active > a:focus, #header.header-color.transparent .navbar-nav > li.active > a:hover, #header.header-color.transparent .navbar-nav > li > a:focus, #header.header-color.transparent .navbar-nav > .open > a, #header.header-color.transparent .navbar-nav > .open > a:focus { color: #f7465b !important; } #header.header-color.transparent.header-filled .navbar-nav > li > a:hover, #header.header-color.transparent.header-filled .navbar-nav > li.active > a, #header.header-color.transparent.header-filled .navbar-nav > li.active > a:focus, #header.header-color.transparent.header-filled .navbar-nav > li.active > a:hover, #header.header-color.transparent.header-filled .navbar-nav > li > a:focus, #header.header-color.transparent.header-filled .navbar-nav > .open > a, #header.header-color.transparent.header-filled .navbar-nav > .open > a:focus { color: #000 !important; } #header.header-color .navbar-nav .nav-link-separator { color: #FFF; } /* if header is transparent */ #header.transparent .navbar-nav > li > a { color: #FFF; } /* Navbar nav pills ===================== */ .navbar-nav.nav-pills > li + li { margin-left: 0; } .navbar-nav.nav-pills > li > a { background-color: rgba(134, 134, 134, 0.13) !important; margin: 17px 3px; padding: 3px 8px !important; font-size: 13px; color: #545A5F; border: 1px solid rgba(195, 195, 195, 0.06); border-radius: 0px; } .navbar-nav.nav-pills > li > a:hover { background-color: #f7465b !important; text-decoration: inherit; color: #fff !important; border-color: #f7465b; } .navbar-nav.nav-pills > li > a:focus, .navbar-nav.nav-pills > .open > a, .navbar-nav.nav-pills > .open > a:focus { background-color: #f7465b !important; text-decoration: inherit; color: #fff !important; border-color: #f7465b; } .navbar-nav.nav-pills > li.active > a, .navbar-nav.nav-pills > li.active > a:focus, .navbar-nav.nav-pills > li.active > a:hover { background-color: #f7465b !important; font-weight: 500; color: #FFF !important; cursor: pointer; border-color: #f7465b !important; } /* if header is dark */ #header.header-dark.header-filled .navbar-nav.nav-pills > li.active > a, #header.header-dark.header-filled .navbar-nav.nav-pills > li.active > a:focus, #header.header-dark.header-filled .navbar-nav.nav-pills > li.active > a:hover, #header.header-dark.header-filled .navbar-nav.nav-pills > li > a:hover, #header.header-dark.header-filled .navbar-nav.nav-pills > li > a:focus, #header.header-dark.header-filled .navbar-nav.nav-pills > .open > a, #header.header-dark.header-filled .navbar-nav.nav-pills > .open > a:focus { background-color: #f7465b !important; color: #FFF !important; border-color: #f7465b; } /* if header is colored */ #header.header-color .navbar-nav.nav-pills > li > a:hover, #header.header-color .navbar-nav.nav-pills > li.active > a, #header.header-color .navbar-nav.nav-pills > li.active > a:focus, #header.header-color .navbar-nav.nav-pills > li.active > a:hover, #header.header-color .navbar-nav.nav-pills > li > a:focus, #header.header-color .navbar-nav.nav-pills > .open > a, #header.header-color .navbar-nav.nav-pills > .open > a:focus { background-color: #FFF !important; color: #000 !important; border-color: rgba(0, 0, 0, 0) !important; } #header.header-color.header-filled .navbar-nav.nav-pills > li > a:hover, #header.header-color.header-filled .navbar-nav.nav-pills > li.active > a, #header.header-color.header-filled .navbar-nav.nav-pills > li.active > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills > li.active > a:hover, #header.header-color.header-filled .navbar-nav.nav-pills > li > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills > .open > a, #header.header-color.header-filled .navbar-nav.nav-pills > .open > a:focus { background-color: #FFF !important; color: #000 !important; border-color: rgba(0, 0, 0, 0) !important; } #header.header-color.transparent .navbar-nav.nav-pills > li > a:hover, #header.header-color.transparent .navbar-nav.nav-pills > li.active > a, #header.header-color.transparent .navbar-nav.nav-pills > li.active > a:focus, #header.header-color.transparent .navbar-nav.nav-pills > li.active > a:hover, #header.header-color.transparent .navbar-nav.nav-pills > li > a:focus, #header.header-color.transparent .navbar-nav.nav-pills > .open > a, #header.header-color.transparent .navbar-nav.nav-pills > .open > a:focus { background-color: #f7465b !important; color: #FFF !important; border-color: rgba(0, 0, 0, 0) !important; } #header.header-color.transparent.header-filled .navbar-nav.nav-pills > li > a:hover, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > li.active > a, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > li.active > a:focus, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > li.active > a:hover, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > li > a:focus, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > .open > a, #header.header-color.transparent.header-filled .navbar-nav.nav-pills > .open > a:focus { background-color: #FFF !important; color: #000 !important; border-color: rgba(0, 0, 0, 0) !important; } /* Navbar nav border bottom ============================= */ .navbar-nav.nav-border-bottom > li + li { margin-left: 0; } .navbar-nav.nav-pills.nav-border-bottom > li > a { padding-left: 0px !important; padding-right: 0px !important; box-shadow: inset 0 -2px transparent !important; } .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, .navbar-nav.nav-pills.nav-border-bottom > li.active > a, .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover { cursor: inherit; border-color: transparent !important; box-shadow: inset 0 -2px #f7465b !important; } .navbar-nav.nav-tabs.nav-border-bottom > li > a:focus, .navbar-nav.nav-tabs.nav-border-bottom > .open > a, .navbar-nav.nav-tabs.nav-border-bottom > .open > a:focus, .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, .navbar-nav.nav-pills.nav-border-bottom > .open > a, .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -2px #f7465b !important; } /* if header is transparent */ #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -2px #f7465b !important; } #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -2px #f7465b !important; } /* if header is dark */ #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-dark.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -2px #f7465b !important; } /* if header is colored */ #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #FFF !important; box-shadow: inset 0 -2px #FFF !important; } #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #FFF !important; box-shadow: inset 0 -2px #FFF !important; } #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-color.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -2px #f7465b !important; } #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { background-color: transparent !important; color: #FFF !important; box-shadow: inset 0 -2px #FFF !important; } /* Make navigation toggle on desktop hover (use class: dropdown-hover). Note: Depend on bootstrap menu breakpoint. ====================================================================================================================*/ @media (min-width : 992px) { .dropdown-hover > .dropdown-menu { display: block; visibility: hidden; opacity: 0; } .dropdown-hover:hover > .dropdown-menu { visibility: visible; opacity: 1; } } /* Mobile menu (shange bootstrap menu breakpoint "768px", "992px", "1200px") ============================================================================== */ @media (max-width : 992px) { /* Header */ #header .header-container { width: 100%; } #header.fixed-top, .show-hide-on-scroll { /* position: absolute !important; */ } #header.show-hide-on-scroll.fly-up { margin-top: 0 !important; } /* Navbar */ .navbar { float: none !important; } /* Navbar toggle buttom */ .navbar-header { float: none; } .navbar-toggle { position: relative; display: block; float: right; padding: 9px 10px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; background-image: none; border-radius: 0; border: none; } .navbar-toggle:focus, .navbar-toggle:hover { background-color: transparent; } .navbar-toggle .icon-bar, .navbar-default .navbar-toggle .icon-bar { width: 26px; height: 4px; background-color: #545A5F; border-radius: 5px; } #header.header-filled .navbar-toggle .icon-bar, /* If header is filled */ #header.header-filled .navbar-default .navbar-toggle .icon-bar { background-color: #545A5F; } #header.header-dark .navbar-toggle .icon-bar, /* If header is transparent, dark or custom background color used */ #header.transparent .navbar-toggle .icon-bar, #header.header-dark.transparent .navbar-toggle .icon-bar, #header.header-dark.semi-transparent .navbar-toggle .icon-bar, #header.header-color .navbar-toggle .icon-bar, #header.header-color.transparent .navbar-toggle .icon-bar, #header.header-color.semi-transparent .navbar-toggle .icon-bar { background-color: #FFF; } /* Navbar nav */ .navbar-nav { float: none !important; margin: 7.5px -15px; } .navbar-nav > li { float: none; display: block !important; text-align: left !important; } .navbar-nav .nav-link-separator { display: none !important; } /* Navbar collapse */ .navbar-collapse { max-height: 85vh; background-color: #FFF; margin-left: -15px; margin-right: -15px; border-top: 1px solid rgba(115, 115, 115, 0.13); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); } .navbar-collapse.collapse { display: none!important; } .collapse.in { display: block !important; overflow-y: auto !important; } .navbar-collapse .navbar-nav > li > a { margin: 0 !important; padding: 12px 20px !important; color: #545A5F !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13); } .navbar-collapse .navbar-nav li > a:hover { background-color: transparent !important; text-decoration: none !important; border-color: rgba(115, 115, 115, 0.13); } .navbar-collapse .navbar-nav > li > a:focus, .navbar-collapse .navbar-nav > li > a:hover, .navbar-collapse .navbar-nav .open > a, .navbar-collapse .navbar-nav .open > a:focus, .navbar-collapse .navbar-nav .open > a:hover, .navbar-collapse .navbar-nav > .open > a, .navbar-collapse .navbar-nav > .open > a:focus, .navbar-collapse .navbar-nav > .open > a:hover, .navbar-collapse .navbar-nav > .active > a, .navbar-collapse .navbar-nav > .active > a:focus, .navbar-collapse .navbar-nav > .active > a:hover { background-color: transparent !important; text-decoration: none !important; border-color: rgba(115, 115, 115, 0.13); } .navbar-collapse .navbar-nav > li:last-child > a { border-bottom: none !important; } .navbar-collapse .navbar-nav li a .caret { margin-left: 10px; } .dropdown-header { color: #8E969C !important; } /* Navbar collapse nav pills */ .navbar-collapse .navbar-nav.nav-pills > li > a { background: none; background-color: transparent !important; margin: 0; border: none; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; color: #545A5F !important; } .navbar-collapse .navbar-nav.nav-pills > li.active > a, .navbar-collapse .navbar-nav.nav-pills > li.active > a:focus, .navbar-collapse .navbar-nav.nav-pills > li.active > a:hover, .navbar-collapse .navbar-nav.nav-pills.nav-border-bottom > li.active > a, .navbar-collapse .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, .navbar-collapse .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover { background-color: transparent !important; border: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; box-shadow: none !important; } .navbar-collapse .navbar-nav.nav-pills > li > a:focus, .navbar-collapse .navbar-nav.nav-pills > .open > a, .navbar-collapse .navbar-nav.nav-pills > .open > a:focus { background-color: transparent !important; text-decoration: none; border: none; color: #545A5F !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; } /* Navbar collapse border bottom */ .navbar-nav.nav-tabs.nav-border-bottom > li + li, .navbar-nav.nav-pills.nav-border-bottom > li + li { margin-left: 0 !important; } .navbar-nav.nav-pills.nav-border-bottom > li > a { padding-left: 20px !important; padding-right: 20px !important; box-shadow: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; } .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, .navbar-nav.nav-pills.nav-border-bottom > li.active > a, .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, .navbar-nav.nav-tabs.nav-border-bottom > li > a:focus, .navbar-nav.nav-tabs.nav-border-bottom > .open > a, .navbar-nav.nav-tabs.nav-border-bottom > .open > a:focus, .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, .navbar-nav.nav-pills.nav-border-bottom > .open > a, .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { color: #545A5F !important; box-shadow: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; } /* Navbar collapse dropdown */ .navbar-collapse .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin: 0 !important; padding: 5px 0 ; background-color: rgba(0,0,0,0.05); text-align: left; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-collapse .dropdown-submenu .caret { position: static; top: 19px; border-top: 4px dashed; border-left: 4px solid transparent; border-right: 4px solid transparent; } .navbar-collapse .navbar-nav .open .dropdown-menu li, .navbar-collapse .navbar-default .navbar-nav .open .dropdown-menu li { padding-left: 20px; } .navbar-collapse .navbar-nav .open .dropdown-menu li > a, .navbar-collapse .navbar-default .navbar-nav .open .dropdown-menu li > a { padding: 12px 10px 12px 10px; color: #8E969C; } .navbar-collapse .navbar-nav .open .dropdown-menu li:last-child > a, .navbar-collapse .navbar-default .navbar-nav .open .dropdown-menu li:last-child > a { border-bottom: none; } /* If navbar collapse is dark */ .navbar-collapse.mob-navbar-collapse-dark { background-color: #161616; } .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li > a { color: #DDD !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; } .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li > a:hover, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li.active > a, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li.active > a:focus, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li.active > a:hover, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li > a:focus, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav > .open > a, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav > .open > a:focus, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav li > a:focus, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav > .open > a, .navbar-collapse.mob-navbar-collapse-dark .navbar-nav > .open > a:focus { background-color: transparent !important; color: #DDD !important; border: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; box-shadow: none !important; } .navbar-collapse.mob-navbar-collapse-dark .navbar-nav .open .dropdown-menu { background-color: rgba(255, 255, 255, 0.05); } .navbar-collapse.mob-navbar-collapse-dark .dropdown-menu-color > .dropdown-header { font-weight: 400; color: #A7A7A7; } .navbar-collapse.mob-navbar-collapse-dark .navbar-nav .open .dropdown-menu li > a { color: #A7A7A7 !important; } .navbar-collapse.mob-navbar-collapse-dark .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.11); } .navbar-collapse.mob-navbar-collapse-dark .dropdown-header { color: #CACACA !important; } /* Navbar collapse links align */ .navbar-collapse.mob-navbar-align-center .navbar-nav li, .navbar-collapse.mob-navbar-align-center .navbar-nav .open .dropdown-menu li { padding: 0; text-align: center !important; } /* If header is dark */ #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { box-shadow: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; color: #545A5F !important; } /* If header is colored */ #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-color .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { box-shadow: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; color: #545A5F !important; } /* If header is transparent */ #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { box-shadow: none !important; border-bottom: 1px solid rgba(115, 115, 115, 0.13) !important; color: #545A5F !important; } /* If header is dark + mob-navbar-collapse-dark */ #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-dark .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { color: #DDD !important; box-shadow: none !important; } /* If header is colored + mob-navbar-collapse-dark */ #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.header-color .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { color: #DDD !important; box-shadow: none !important; } /* If header is transparent + mob-navbar-collapse-dark */ #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent.header-color.header-filled .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:hover, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li.active > a:hover, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > li > a:focus, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a, #header.transparent .mob-navbar-collapse-dark .navbar-nav.nav-pills.nav-border-bottom > .open > a:focus { color: #DDD !important; box-shadow: none !important; } } /* --------------------------------------------------------------------------------------------------------- * * Fullscreen overlay menu * More info: (http://www.jqueryscript.net/menu/Responsive-Fullscreen-Navigation-Menu-with-jQuery-CSS3.html /* --------------------------------------------------------------------------------------------------------- */ /* No scroll if menu is open */ body.no-scroll { overflow: hidden !important; } /* Style the navigation menu */ .fullscreen-menu .menu-nav { font-family: inherit; top: 0; left: 0; z-index: 99998; display: none; position: fixed; width: 100%; height: 100%; background: #070F13; overflow-y: auto; } .fullscreen-menu .menu-nav ul { max-width: 600px; margin: 80px auto 40px auto; padding: 0; } .fullscreen-menu .menu-nav li { list-style-type: none; text-align: center; } .fullscreen-menu .menu-nav li a { display: block; font-size: 200%; text-align: center; color: #fff; font-weight: 500; padding: 20px; } .fullscreen-menu .nav-uppercase.menu-nav li a { /* if uppercase letters are allowed */ text-transform: uppercase; } .fullscreen-menu .menu-nav li a:hover { color: #f7465b; } .fullscreen-menu .menu-nav li.active a { color: #f7465b; } @media (max-width: 768px) { .fullscreen-menu .menu-nav li a { font-size: 150%; padding: 10px; } } /* Style & animate the menu-button */ .fullscreen-menu .menu-button { position: absolute; z-index: 99999; display: block; height: 50px; width: 50px; top: 8px; right: 15px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #header.header-fluid .fullscreen-menu .menu-button { /* if header is fluid */ right: 40px; } .fullscreen-menu .hamburger { position: relative; background-color: transparent; width: 50px; height: 50px; } .fullscreen-menu .hamburger .menui { position: absolute; background-color: #545A5F; margin: 10px 0 0 12px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); } .fullscreen-menu .hamburger .top-menu { top: 5px; width: 25px; height: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .fullscreen-menu .hamburger .mid-menu { top: 13px; width: 25px; height: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .fullscreen-menu .hamburger .bottom-menu { top: 21px; width: 25px; height: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .fullscreen-menu .hamburger .top-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .fullscreen-menu .hamburger .mid-animate { opacity: 0; } .fullscreen-menu .hamburger .bottom-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } @media (max-width: 768px) { #header.header-fluid .fullscreen-menu .menu-button { right: 20px; } } /* If header is transparent */ #header.transparent .fullscreen-menu .hamburger .menui { background-color: #FFF; } /* If header is dark or custom background color used */ #header.header-dark .fullscreen-menu .hamburger .menui, #header.header-dark.transparent .fullscreen-menu .hamburger .menui, #header.header-dark.semi-transparent .fullscreen-menu .hamburger .menui, #header.header-color .fullscreen-menu .hamburger .menui, #header.header-color.transparent .fullscreen-menu .hamburger .menui, #header.header-color.semi-transparent .fullscreen-menu .hamburger .menui { background-color: #FFF !important; } /* If header is filled */ #header.header-filled .fullscreen-menu .hamburger .menui { background-color: #545A5F; } /* ------------------------------------------------------------- * * Sections /* ------------------------------------------------------------- */ section { position: relative; padding: 80px 0; } @media (max-width: 768px) { section { padding: 60px 0; } } /* ------------------------------------------------------------- * * Intro section /* ------------------------------------------------------------- */ #intro { padding: 0; overflow: hidden; } #intro .intro-inner { min-height: 620px; } #intro .intro-caption { width: 100%; padding: 0 20px; z-index: 3; } #intro .intro-caption .intro-title { margin: 0; font-size: 0px; font-weight: 500; color: rgba(255, 255, 255, 0.6); line-height: 1; text-transform: uppercase; } #intro .intro-caption .intro-title span { display: inline-block; font-size: 220px; font-size: 10vw; } #intro .intro-caption .intro-description { margin: 0; font-size: 18px; font-weight: 400; } @media (max-width: 768px) { #intro .intro-caption .intro-title span { font-size: 62px; } #intro .intro-caption .intro-description { font-size: 16px; } } /* Made with love :) */ .made-with-love { position: absolute; right: 30px; bottom: 30px; font-size: 12px; font-weight: 300; z-index: 3; } /* ------------------------------------------------------------- * * Page header /* ------------------------------------------------------------- */ .page-header { width: 100%; background-color: #F2F2F2; margin: 0; padding: 43px 0; border-bottom: 1px solid #EDEDED; } .page-header-content { position: relative; } .page-header-content .heading-tescription { margin-bottom: 0; } /* If header is transparent or semi trasparent */ #header.transparent + .page-header, #header.semi-transparent + .page-header { margin-top: 0; } /* Page header sizes */ .page-header-xs { padding: 23px 0; } .page-header-sm { padding: 33px 0; } .page-header-lg { padding: 63px 0; } .page-header-xlg { padding: 83px 0; } .page-header-xxlg { padding: 220px 0; } /* If angle bottom is enabled */ .page-header.angle-left-bottom .vertical-align-center { margin-top: -20px; } .page-header.angle-right-bottom .vertical-align-center { margin-top: -40px; } .page-header.angle-left-bottom, .page-header.angle-right-bottom { padding-bottom: 100px; } .page-header-xs.angle-left-bottom, .page-header-xs.angle-right-bottom { padding-bottom: 90px; } .page-header-lg.angle-left-bottom, .page-header-lg.angle-right-bottom { padding-bottom: 120px; } .page-header-xlg.angle-left-bottom, .page-header-xlg.angle-right-bottom { padding-bottom: 150px; } .page-header-xxlg.angle-left-bottom, .page-header-xxlg.angle-right-bottom { padding-bottom: 300px; } /* Page header heading */ .page-header .heading { margin: 0; } .page-header .heading .heading-tescription { margin-top: 5px; } .page-header .heading.heading-xs .heading-title { font-size: 22px; font-weight: 500; } @media (max-width: 768px) { .page-header .heading .heading-title { font-size: 28px; } .page-header .heading .heading-title-ghost { font-size: 38px; } } /* Breadcrumbs */ .breadcrumb { position: relative; margin: 10px 0 0 0; padding: 0; list-style: none; background-color: transparent; font-size: 13px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; z-index: 2; } .breadcrumb a { color: #545A5F; } .breadcrumb > .active { color: #A4AAAD; } .breadcrumb > li + li:before { /* disable bootstrap default breadcrumb separators */ display: none; } .breadcrumb .br-separator { font-size: 13px; color: #A4AAAD; } @media (max-width: 992px) { .page-header-content .col-middle .breadcrumb { margin-top: 20px !important; text-align: left; } } /* ------------------------------------------------------------- * * Dividers /* ------------------------------------------------------------- */ hr { position: relative; margin-top: 20px; margin-bottom: 20px; margin-left: 0; border: 0; border-top: 1px solid rgba(162, 162, 162, 0.3); text-align: left; } /* Divider styles */ hr.hr-dotted { border-style: dotted; } hr.hr-dashed { border-style: dashed; } hr.hr-double { border-style: double; border-top-width: 3px; } /* Divider sizes */ hr.hr-2x { border-top-width: 2px; } hr.hr-3x { border-top-width: 3px; } hr.hr-4x { border-top-width: 4px; } hr.hr-5x { border-top-width: 5px; } hr.hr-double.hr-2x { border-top-width: 6px; } hr.hr-double.hr-3x { border-top-width: 8px; } hr.hr-double.hr-4x { border-top-width: 11px; } hr.hr-double.hr-5x { border-top-width: 14px; } /* Divider widths */ hr.hr-width-1 { max-width: 50px; } hr.hr-width-2 { max-width: 100px; } hr.hr-width-3 { max-width: 200px; } hr.hr-width-4 { max-width: 300px; } hr.hr-width-5 { max-width: 400px; } hr.hr-width-6 { max-width: 500px; } hr.hr-width-7 { max-width: 600px; } hr.hr-width-8 { max-width: 700px; } hr.hr-width-9 { max-width: 800px; } hr.hr-width-10 { max-width: 900px; } /* ------------------------------------------------------------- * * Headings /* ------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; } .h1, .h2, .h3, h1, h2, h3 { margin-top: 20px; margin-bottom: 20px; } /* heading */ .heading { position: relative; margin-top: 30px; margin-bottom: 40px; z-index: 2; } .heading .heading-title { position: relative; margin: 0; font-size: 36px; font-weight: 500; z-index: 2; } .heading.heading-uppercase .heading-title, /* if uppercase letters are allowed */ .heading.heading-uppercase .heading-title-ghost { text-transform: uppercase; } .heading .heading-title-ghost { position: absolute; top: -24px; left: 0; width: 100%; font-size: 48px; font-weight: 500; line-height: 50px; z-index: 1; color: rgba(170, 173, 177, 0.22); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .heading.heading-hover:hover .heading-title-ghost, .page-header:hover .heading.heading-hover .heading-title-ghost { -moz-transform: translateY(5px); -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); } /* heading divider */ .heading hr { margin-top: 15px; margin-bottom: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .heading.heading-hover:hover .hr-width-1, .page-header:hover .heading.heading-hover .hr-width-1 { max-width: 60px; } .heading.heading-hover:hover .hr-width-2, .page-header:hover .heading.heading-hover .hr-width-2 { max-width: 110px; } .heading.heading-hover:hover .hr-width-3, .page-header:hover .heading.heading-hover .hr-width-3 { max-width: 210px; } .heading.heading-hover:hover .hr-width-4, .page-header:hover .heading.heading-hover .hr-width-4 { max-width: 310px; } .heading.heading-hover:hover .hr-width-5, .page-header:hover .heading.heading-hover .hr-width-5 { max-width: 410px; } .heading.heading-hover:hover .hr-width-6, .page-header:hover .heading.heading-hover .hr-width-6 { max-width: 510px; } .heading.heading-hover:hover .hr-width-7, .page-header:hover .heading.heading-hover .hr-width-7 { max-width: 610px; } .heading.heading-hover:hover .hr-width-8, .page-header:hover .heading.heading-hover .hr-width-8 { max-width: 710px; } .heading.heading-hover:hover .hr-width-9, .page-header:hover .heading.heading-hover .hr-width-9 { max-width: 810px; } .heading.heading-hover:hover .hr-width-10, .page-header:hover .heading.heading-hover .hr-width-10 { max-width: 910px; } /* heading tescription */ .heading-tescription { margin-top: 10px; } /* heading sizes */ .heading-xs .heading-title { font-size: 24px; font-weight: 600; } .heading-xs .heading-title-ghost { top: -22px; font-size: 32px; font-weight: 600; line-height: 42px; } .heading-xs .heading-title + hr { margin-top: 15px; margin-bottom: 30px; } .heading-sm .heading-title { font-size: 30px; font-weight: 500; } .heading-sm .heading-title-ghost { top: -24px; font-size: 40px; font-weight: 500; line-height: 52px; } .heading-sm .heading-title + hr { margin-top: 15px; margin-bottom: 30px; } .heading-md .heading-title { font-size: 38px; font-weight: 500; } .heading-md .heading-title-ghost { top: -38px; font-size: 50px; font-weight: 500; line-height: 76px; } .heading-md .heading-title + hr { margin-top: 15px; margin-bottom: 30px; } .heading-lg .heading-title { font-size: 52px; font-weight: 500; } .heading-lg .heading-title-ghost { top: -41px; font-size: 68px; font-weight: 500; line-height: 90px; } .heading-lg .heading-title + hr { margin-top: 20px; margin-bottom: 30px; } .heading-xlg .heading-title { font-size: 68px; font-weight: 500; } .heading-xlg .heading-title-ghost { top: -54px; font-size: 88px; font-weight: 500; line-height: 115px; } .heading-xlg .heading-title + hr { margin-top: 15px; margin-bottom: 30px; } /* heading aligns */ .heading-center { text-align: center; } .heading-center hr { margin-left: auto; margin-right: auto; } .heading-right { text-align: right; } .heading-right hr { margin-left: auto; margin-right: 0; } @media (max-width: 768px) { .heading { margin-bottom: 40px; } .heading-md .heading-title, .heading-lg .heading-title, .heading-xlg .heading-title { font-size: 38px; } .heading-md .heading-title-ghost, .heading-lg .heading-title-ghost, .heading-xlg .heading-title-ghost { top: -26px; font-size: 48px; line-height: 54px; } } /* ------------------------------------------------------------- * * Info boxes /* ------------------------------------------------------------- */ .info-box { position: relative; overflow: hidden; margin-top: 30px; margin-bottom: 30px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .info-box a { color: #545A5F; } .info-box .info-box-icon { position: relative; display: inline-block; margin-bottom: 20px; text-align: center; font-size: 48px; color: #545A5F; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Hover animation (CSS Animation Generator: https://coveloping.com/tools/css-animation-generator) */ .info-box:hover .info-box-icon { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-2px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(2px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-2px);} 20%, 40%, 60%, 80% {transform: translateX(2px);} } .info-box-info { } .info-box-title { margin-top: 5px; margin-bottom: 20px; font-size: 18px; } .info-box-text { color: #8E969C; } /* info-box-white (if backgrondi is dark use class "info-box-white") */ .info-box-white, .info-box-white a, .info-box-white .info-box-icon, .info-box-white .info-box-text { color: #EEE; } /* Info box-1 styles */ /* square-icon */ .info-box .square-icon { width: 60px; height: 60px; line-height: 60px; background-color: #545A5F; font-size: 24px; color: #FFF; } .info-box.info-box-white .square-icon { /* if backgrondi is dark use class "info-box-white" */ background-color: #EEE; color: #545A5F; } .info-box .square-icon:before { position: absolute; content: ''; width: 50%; height: 100%; left: 0px; top: 0px; display: inline-block; background-color: rgba(255, 255, 255, 0.11); } .info-box.info-box-white .square-icon:before { /* if backgrondi is dark use class "info-box-white" */ background-color: rgba(0, 0, 0, 0.04); } /* square-border-icon */ .info-box .square-border-icon { width: 60px; height: 60px; line-height: 54px; background-color: transparent; font-size: 24px; color: #545A5F; border: 3px solid #545A5F; } .info-box.info-box-white .square-border-icon { /* if backgrondi is dark use class "info-box-white" */ border-color: #EEE; color: #EEE; } /* half-square-icon */ .info-box .half-square-icon { width: 60px; height: 60px; line-height: 60px; background-color: #545A5F; font-size: 24px; color: #FFF; -webkit-border-radius: 3px 18px 3px 18px; -moz-border-radius: 3px 18px 3px 18px; border-radius: 3px 18px 3px 18px; } .info-box.info-box-white .half-square-icon { /* if backgrondi is dark use class "info-box-white" */ background-color: #EEE; color: #545A5F; } .info-box .half-square-icon:before { position: absolute; content: ''; width: 50%; height: 100%; left: 0px; top: 0px; display: inline-block; background-color: rgba(255, 255, 255, 0.11); } .info-box.info-box-white .half-square-icon:before { /* if backgrondi is dark use class "info-box-white" */ background-color: rgba(0, 0, 0, 0.04); } /* square-border-icon */ .info-box .half-square-border-icon { width: 60px; height: 60px; line-height: 54px; background-color: transparent; font-size: 24px; color: #545A5F; border: 3px solid #545A5F; -webkit-border-radius: 3px 18px 3px 18px; -moz-border-radius: 3px 18px 3px 18px; border-radius: 3px 18px 3px 18px; } .info-box.info-box-white .half-square-border-icon { /* if backgrondi is dark use class "info-box-white" */ border-color: #EEE; color: #EEE; } /* rounded-icon */ .info-box .rounded-icon { width: 60px; height: 60px; line-height: 60px; background-color: #545A5F; font-size: 24px; color: #FFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .info-box.info-box-white .rounded-icon { /* if backgrondi is dark use class "info-box-white" */ background-color: #EEE; color: #545A5F; } .info-box .rounded-icon:before { position: absolute; content: ''; width: 50%; height: 100%; left: 0px; top: 0px; display: inline-block; background-color: rgba(255, 255, 255, 0.1); } .info-box.info-box-white .rounded-icon:before { /* if backgrondi is dark use class "info-box-white" */ background-color: rgba(0, 0, 0, 0.04); } /* rounded-border-icon */ .info-box .rounded-border-icon { width: 60px; height: 60px; line-height: 54px; background-color: transparent; font-size: 24px; color: #545A5F; border: 3px solid #545A5F; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .info-box.info-box-white .rounded-border-icon { /* if backgrondi is dark use class "info-box-white" */ border-color: #EEE; color: #EEE; } /* info box types */ /* info box-1 */ .info-box-1 { } /* info box-2 */ .info-box-2 { margin-top: 15px; margin-bottom: 15px; padding: 30px; } /* info box-3 */ .info-box-3 { margin-top: 15px; margin-bottom: 15px; padding: 30px; border: 3px solid #545A5F; } .info-box-3.info-box-white { /* if backgrondi is dark use class "info-box-white" */ border-color: #EEE; } /* info box-4 */ .info-box-4 { padding-left: 3px; text-align: left; } .info-box-4 .info-box-icon { float: left; margin-right: 20px; margin-bottom: 0; font-size: 34px; } .info-box-4 .rounded-icon { width: 60px; height: 60px; line-height: 60px; font-size: 20px; } .info-box-4 .rounded-border-icon { width: 55px; height: 55px; line-height: 49px; font-size: 20px; } .info-box-4 .square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; } .info-box-4 .square-border-icon { width: 50px; height: 50px; line-height: 44px; font-size: 20px; } .info-box-4 .half-square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; -webkit-border-radius: 2px 18px 2px 18px; -moz-border-radius: 2px 18px 2px 18px; border-radius: 2px 18px 2px 18px; } .info-box-4 .half-square-border-icon { width: 50px; height: 50px; line-height: 42px; font-size: 20px; -webkit-border-radius: 2px 18px 2px 18px; -moz-border-radius: 2px 18px 2px 18px; border-radius: 2px 18px 2px 18px; } .info-box-4 .info-box-title { margin-top: 0; margin-bottom: 12px; font-size: 20px; font-weight: 400; } .info-box-4 .info-box-info { display: table; } /* info box-5 */ .info-box-5 { margin-top: 15px; margin-bottom: 15px; padding: 15px; text-align: left; } .info-box-5 .info-box-icon { float: left; margin-right: 20px; margin-bottom: 0; font-size: 34px; } .info-box-5 .rounded-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; } .info-box-5 .rounded-border-icon { width: 50px; height: 50px; line-height: 44px; font-size: 20px; } .info-box-5 .square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; } .info-box-5 .square-border-icon { width: 50px; height: 50px; line-height: 43px; font-size: 22px; } .info-box-5 .half-square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; -webkit-border-radius: 3px 10px 3px 10px; -moz-border-radius: 3px 10px 3px 10px; border-radius: 3px 10px 3px 10px; } .info-box-5 .half-square-border-icon { width: 50px; height: 50px; line-height: 43px; font-size: 22px; -webkit-border-radius: 3px 10px 3px 10px; -moz-border-radius: 3px 10px 3px 10px; border-radius: 3px 10px 3px 10px; } .info-box-5 .info-box-title { margin-top: 0; margin-bottom: 12px; font-size: 18px; } .info-box-5 .info-box-info { display: table; } /* info box-6 */ .info-box-6 { margin-top: 15px; margin-bottom: 15px; padding: 15px; text-align: left; border: 3px solid #545A5F; } .info-box-6.info-box-white { /* if backgrondi is dark use class "info-box-white" */ border-color: #EEE; } .info-box-6 .info-box-icon { float: left; margin-right: 20px; margin-bottom: 0; font-size: 38px; } .info-box-6 .rounded-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; } .info-box-6 .rounded-border-icon { width: 50px; height: 50px; line-height: 43px; font-size: 22px; } .info-box-6 .square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; } .info-box-6 .square-border-icon { width: 50px; height: 50px; line-height: 43px; font-size: 22px; } .info-box-6 .half-square-icon { width: 50px; height: 50px; line-height: 50px; font-size: 20px; -webkit-border-radius: 3px 10px 3px 10px; -moz-border-radius: 3px 10px 3px 10px; border-radius: 3px 10px 3px 10px; } .info-box-6 .half-square-border-icon { width: 50px; height: 50px; line-height: 43px; font-size: 22px; -webkit-border-radius: 3px 10px 3px 10px; -moz-border-radius: 3px 10px 3px 10px; border-radius: 3px 10px 3px 10px; } .info-box-6 .info-box-title { margin-top: 0; margin-bottom: 12px; font-size: 18px; } .info-box-6 .info-box-info { display: table; } /* --------------------------------------------------- * * Isotope (more info: http://isotope.metafizzy.co/) /* --------------------------------------------------- */ .isotope { overflow: hidden; margin-top: 80px; } /* isotope filter */ .isotope-filter { margin-bottom: 60px; } @media (max-width : 767px) { .filter-heading { display: none; } } /* isotope filter toggle button */ .isotope-filter .filter-toggle-btn { position: relative; width: 100%; background-color: #070F13 !important; margin: 0 0 5px 0; padding: 10px 30px; font-size: 14px; font-weight: 500; color: #FFF; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .isotope-filter .filter-toggle-btn > i { margin-left: 5px; font-size: 16px; } .isotope-filter .navbar-collapse { border-top: none !important; -webkit-box-shadow: none; box-shadow: none; } /* isotope filter links */ .isotope-filter-links { font-size: 0; } .isotope-filter-links > a { position: relative; display: inline-block; padding: 6px 15px; text-decoration: none; font-size: 14px; font-weight: 500; color: #070F13; border: 2px solid rgba(132, 137, 138, 0.3); border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .isotope-filter-links > a + a { margin: 0 0 0 8px; } .isotope-filter-links > a.active, .isotope-filter-links > a:hover { background-color: #f7465b; color: #FFF; border-color: #f7465b !important; } /* isotope items wrap */ .isotope-items-wrap { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } /* isotope item */ .isotope-item { float: left; width: 25%; } /* isotope gutter (add more space between isotope items) */ /* gutter-1 */ .isotope.gutter-1 .isotope-item { padding: 0 0 6px 6px; } .isotope.gutter-1 { margin-left: -6px; } .isotope.gutter-1 .isotope-filter { margin-left: 6px; } /* gutter-2 */ .isotope.gutter-2 .isotope-item { padding: 0 0 25px 25px; } .isotope.gutter-2 { margin-left: -25px; } .isotope.gutter-2 .isotope-filter { margin-left: 25px; } /* gutter-3 */ .isotope.gutter-3 .isotope-item { padding: 0 0 40px 40px; } .isotope.gutter-3 { margin-left: -40px; } .isotope.gutter-3 .isotope-filter { margin-left: 40px; } /* isotope columns */ .isotope.col-1 .isotope-item { width: 100%; } .isotope.col-2 .isotope-item { width: 50%; } .isotope.col-3 .isotope-item { width: 33.33333333%; } .isotope.col-4 .isotope-item { width: 25%; } .isotope.col-5 .isotope-item { width: 20%; } .isotope.col-6 .isotope-item { width: 16.66666666666667%; } /* isotope grid sizer */ .grid-sizer { height: auto; } .isotope.col-1 .grid-sizer { width: 100%; } .isotope.col-2 .grid-sizer { width: 50%; } .isotope.col-3 .grid-sizer { width: 33.33333333%; } .isotope.col-4 .grid-sizer { width: 25%; } .isotope.col-5 .grid-sizer { width: 20%; } .isotope.col-6 .grid-sizer { width: 16.66666666666667%; } /* isotope width2 item (alternative width) */ .isotope.col-3 .width2 { width: 66.66666666%; } .isotope.col-4 .width2 { width: 50%; } .isotope.col-5 .width2 { width: 40%; } .isotope.col-6 .width2 { width: 33.33333333%; } /* isotope on smaller screens =============================== */ @media (max-width: 1600px) { .isotope.col-5 .isotope-item, .isotope.col-6 .isotope-item, .isotope.col-5 .grid-sizer, .isotope.col-6 .grid-sizer { width: 25%; } .isotope.col-5 .width2, .isotope.col-6 .width2 { width: 50%; } } @media (max-width: 1200px) { .isotope.gutter-2 .isotope-filter, .isotope.gutter-3 .isotope-filter { margin-left: 15px; } .isotope.gutter-2, .isotope.gutter-3 { margin-left: -15px; } .isotope.gutter-2 .isotope-item, .isotope.gutter-3 .isotope-item { padding: 0 0 15px 15px; } .isotope.col-4 .isotope-item, .isotope.col-5 .isotope-item, .isotope.col-6 .isotope-item, .isotope.col-4 .grid-sizer, .isotope.col-5 .grid-sizer, .isotope.col-6 .grid-sizer { width: 33.33333333%; } .isotope.col-4 .width2, .isotope.col-5 .width2, .isotope.col-6 .width2 { width: 66.66666666%; } } @media (max-width: 992px) { .isotope.col-3 .isotope-item, .isotope.col-4 .isotope-item, .isotope.col-5 .isotope-item, .isotope.col-6 .isotope-item, .isotope.col-3 .grid-sizer, .isotope.col-4 .grid-sizer, .isotope.col-5 .grid-sizer, .isotope.col-6 .grid-sizer, .isotope.col-3 .width2, .isotope.col-4 .width2, .isotope.col-5 .width2, .isotope.col-6 .width2 { width: 50%; } } @media (max-width: 768px) { .isotope-filter { background-color: transparent; } .isotope-filter-links { margin: 0 2px; } .isotope-filter-links > a { display: block; margin: 3px 0 !important; text-align: center; } } @media (max-width: 480px) { .isotope.col-3 .isotope-item, .isotope.col-4 .isotope-item, .isotope.col-5 .isotope-item, .isotope.col-6 .isotope-item, .isotope.col-3 .grid-sizer, .isotope.col-4 .grid-sizer, .isotope.col-5 .grid-sizer, .isotope.col-6 .grid-sizer, .isotope.col-3 .width2, .isotope.col-4 .width2, .isotope.col-5 .width2, .isotope.col-6 .width2 { width: 100%; } } /* ------------------------------------------------------------- * * Portfolio /* ------------------------------------------------------------- */ .portfolio-section { } .portfolio-section .heading { margin-bottom: 30px; } /* Portfolio item */ .portfolio-item { position: relative; background-color: #F2F2F2; overflow: hidden; } .portfolio-item .item-link { display: block; } .portfolio-item .cover { z-index: 1; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .portfolio-item:hover .cover { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .portfolio-item .item-img { } .portfolio-item:hover .item-img { } /* Portfolio item info */ .portfolio-item .item-info { position: absolute; width: 100%; top: 50%; left: 50%; padding: 0 15px; text-align: center; z-index: 2; opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8); -moz-transform: translate(-50%, -50%) scale(0.8); -o-transform: translate(-50%, -50%) scale(0.8); -ms-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .portfolio-item:hover .item-info { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .portfolio-item .item-info-title { margin: 0 0 5px 0; font-size: 18px; font-weight: 500; line-height: 1.4; } .portfolio-item .item-info-text { margin: 0; font-size: 14px; } /* ---------------------------------------------------------------- * * Magnific Popup: http://dimsemenov.com/plugins/magnific-popup/ /* ---------------------------------------------------------------- */ .mfp-bg { background: #000; opacity: 0.9; filter: alpha(opacity=90); z-index: 99999; } .mfp-wrap { z-index: 99999; } .mfp-container { padding: 0 15px; } .mfp-figure:after { top: 80px; bottom: 80px; } img.mfp-img { padding: 80px 0 80px; } .mfp-close, .mfp-close:focus, .mfp-close:active { top: 36px; } .mfp-bottom-bar { margin-top: -75px; font-family: 'Open Sans', sans-serif; font-size: 14px; } /* left/right navigation buttons */ .mfp-custom-arrow { position: absolute; display: inline-block; top: 50%; width: 90px; height: 110px; background-color: rgba(0, 0, 0, 0); margin-top: -55px; padding: 0; z-index: 9999; border: none; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 1400px) { .mfp-custom-arrow { display: none; } } .mfp-custom-arrow:hover { opacity: .7; } .mfp-custom-arrow:focus { outline: none; } .mfp-custom-arrow-left { left: 0; } .mfp-custom-arrow-left:before { content: "\f053"; font-size: 24px; color: #8E969C; } .mfp-custom-arrow-right { right: 0; } .mfp-custom-arrow-right:before { content: "\f054"; font-size: 24px; color: #8E969C; } /* fade in navigation */ .mfp-fadein .mfp-figure { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } /* on smaller devices */ @media (max-width: 768px) { .mfp-bottom-bar { padding: 0 10px; } .mfp-counter { right: 10px; } .mfp-close, .mfp-close:focus { right: 0; } } /* Inline popup (type inline) ------------------------------- */ .inline-popup { position: relative; max-width: 1170px; height: auto; background-color: transparent; padding: 0px; margin: 70px auto; } .inline-popup-inner { } .inline-popup-image { width: 100%; height: auto; padding-bottom: 50%; } /* Close button */ .inline-popup .inline-popup-close { position: absolute; top: -50px; right: 15px; text-decoration: none; font-size: 32px; color: #545A5F; } .inline-popup .mfp-close { display: none; } /* Fade-zoom animation for first dialog */ /* start state */ .mfp-fade-zoom .inline-popup { opacity: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .mfp-fade-zoom.mfp-ready .inline-popup { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .mfp-fade-zoom.mfp-removing .inline-popup { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* Dark overlay, start state */ .mfp-fade-zoom.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .mfp-fade-zoom.mfp-ready.mfp-bg { background: #FFF; opacity: 0.99; } /* animate out */ .mfp-fade-zoom.mfp-removing.mfp-bg { opacity: 0; } /* ------------------------------------------------------------- * * Prices /* ------------------------------------------------------------- */ .prices { position: relative; margin-top: 40px; z-index: 9; } .prices .owl-carousel .owl-stage-outer { padding-top: 10px; } /* Price box */ .price-box { position: relative; top: 0; background-color: #FFF; margin: 20px 0; text-align: center; overflow: hidden; border: 1px solid #E6E6E6; -webkit-box-shadow: inset 0px 4px 0px rgba(226, 226, 226, 0.18); -moz-box-shadow: inset 0px 4px 0px rgba(226, 226, 226, 0.18); box-shadow: inset 0px 4px 0px rgba(226, 226, 226, 0.18); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .price-box:hover { top: -10px; } .price-box .pr-box { padding: 20px; } /* Price heading */ .price-box .price-heading { border-bottom: 1px solid #ededed; } .price-box .price-heading i { margin-bottom: 20px; font-size: 34px; } .price-box .price-heading .price-title { margin: 0; font-size: 22px; } .price-box .price-heading .price-heading-text { margin-top: 10px; font-size: 14px; } /* Price price box price */ .price-box .price-box-price { border-bottom: 1px solid #ededed; } .price-box .price-box-price .price { position: relative; display: inline-block; margin-top: 10px; font-size: 48px; font-weight: bold; } .price-box .price-box-price .price-currency { position: absolute; left: -15px; font-size: 19px; } .price-box .price-box-price .price-tenure { font-size: 13px; color: #8E969C; } /* Price features */ .price-box .price-features { border-bottom: 1px solid #ededed; } .price-box .price-features > ul > li { padding: 8px 0; font-size: 16px; } /* Price box featured */ .price-box-featured .price-box-price { background-color: #f7465b !important; color: #FFF !important; } .price-box-featured .price-box-price .price-tenure { color: #FFF !important; } .price-box-featured .price-box-ribbon { position: absolute; width: 150px; top: 22px; right: -35px; text-align: center; padding: 5px 20px; background-color: #f7465b; font-size: 14px; color: #FFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .price-box-featured .price-footer { -webkit-box-shadow: inset 0px -4px 0px #f7465b; -moz-box-shadow: inset 0px -4px 0px #f7465b; box-shadow: inset 0px -4px 0px #f7465b; } /* Price box styles */ .price-box-dark, .price-box-dark .price-box { background-color: transparent; border-color: transparent; } .price-box-dark .price-heading, .price-box-dark .price-features { background-color: rgba(29, 34, 37, 0.72); color: #FFF; border-bottom-color: transparent; } .price-box-dark .price-box-price, .price-box-dark .price-footer { background-color: rgba(43, 48, 51, 0.72); color: #FFF; border-bottom-color: transparent; } /* ------------------------------------------------------------- * * Team /* ------------------------------------------------------------- */ .team-section .heading { margin-bottom: 30px; } .team { margin-top: 70px; } .team .owl-carousel .owl-stage-outer { padding-top: 10px; } /* Team carousel */ .team-carousel { } /* Team box */ .team-box { position: relative; margin: 20px 0; } /* Team image */ .team-box .team-image { position: relative; overflow: hidden; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* Team box rounded image (use class "team-box-rounded" to enable rounded image) */ .team-box.team-box-rounded .team-image { border-radius: 300px; } /* Team box image hover (use class "team-box-hover" to enable hover effect) */ .team-box-hover .team-image:before { position: absolute; content: ""; width: 200%; height: 100%; left: -150px; top: 140%; background-color: rgba(255, 255, 255, 0.35); z-index: 1; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } @media (min-width: 992px) { /* Show team image hover effect on bigger devices only */ .team-box:hover.team-box-hover .team-image { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .team-box:hover.team-box-hover .team-image:before { top: -160%; } } /* Team info */ .team-box .team-info { margin-top: 30px; } .team-box .team-info .team-info-title { } .team-box .team-info .team-info-text { margin-bottom: 15px; } .team-box .team-info .btn-default:hover { background-color: #f7465b; color: #FFF; } /* ------------------------------------------------------------- * * Video promo section /* ------------------------------------------------------------- */ .video-section { position: relative; min-height: 700px; background-color: #44484C; -webkit-background-size: cover; background-size: cover; } .video-section-caption { width: 100%; } .video-section .heading { max-width: 700px; margin: 0 auto; padding: 0 15px; } /* Video button */ .video-section .video-btn { display: inline-block; width: 100px; height: 100px; line-height: 97px; background-color: rgba(255, 255, 255, 0.13); margin-top: 40px; margin-bottom: 40px; padding: 0 0 0 10px; text-align: center; font-size: 34px; color: #FFF; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .video-section .video-btn:hover { background-color: #F7465B; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* ------------------------------------------------------------- * * YTP Player: https://github.com/pupunzi/jquery.mb.YTPlayer; /* ------------------------------------------------------------- */ .youtube-bg { position: relative; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .YTPOverlay { background-color: transparent; } .YTPOverlay.raster { background: url("../vendor/ytplayer/images/raster.png"); /* "raster.png" or "raster_dot.png" */ background-color: rgba(0, 0, 0, 0.6); } .youtube-bg.YTPFullscreen .YTPOverlay, .youtube-bg.YTPFullscreen .YTPOverlay.raster, .youtube-bg.YTPFullscreen .cover { display: none; } /* Video control bar */ .mb_YTPBar, .mb_YTPBar.visible { opacity: .1; z-index: 9; } .mb_YTPBar, .mb_YTPBar .buttonBar { padding: 4px 4px 0px 4px; } .mb_YTPBar, .mb_YTPBar .mb_YTPProgress, .mb_YTPBar .mb_YTPLoaded, .mb_YTPBar .mb_YTPseekbar { height: 4px; } .mb_YTPBar .mb_YTPProgress, .mb_YTPBar .mb_YTPLoaded { cursor: pointer; } .mb_YTPBar .mb_YTPseekbar { background: #F20000; cursor: pointer; } /* Video control elements */ .mb_YTPBar span.mb_OnlyYT { left: 250px; right: auto; } @media (min-width: 480px) { .mb_YTPBar span.mb_OnlyYT { left: 330px; } } /* ------------------------------------------------------------- * * Call to action section /* ------------------------------------------------------------- */ .call-to-action-section { padding: 70px 0; } .call-to-action-title { margin-top: 0; margin-bottom: 20px; font-size: 30px; font-weight: 400; } .call-to-action-text { } @media (max-width: 992px) { .call-to-action-section .btn { margin-top: 30px; } } @media (max-width: 768px) { .call-to-action-title { font-size: 22px; } } /* If section angle used */ .call-to-action-section.angle-left-top, .call-to-action-section.angle-right-top { padding-top: 100px; } .call-to-action-section.angle-left-bottom, .call-to-action-section.angle-right-bottom { padding-bottom: 100px; } @media (max-width: 768px) { .call-to-action-section { padding: 60px 0; } .call-to-action-section.angle-left-top, .call-to-action-section.angle-right-top { padding-top: 110px; } .call-to-action-section.angle-left-bottom, .call-to-action-section.angle-right-bottom { padding-bottom: 110px; } } /* ------------------------------------------------------------- * * Blog/Articles list /* ------------------------------------------------------------- */ .blog-section { } /* Blog list */ .blog-list { } .blog-wrap { margin: 0 auto; } /* Blog item */ .bco { position: relative; padding-bottom: 60%; overflow: hidden; } .blog-list-item { } @media (max-width: 768px) { .blog-list-item{ padding: 0 15px 0 15px; } } .blog-list-item .col { overflow: hidden; } .blog-list-item:first-child { margin-top: 0; } .blog-list-item:last-child { margin-bottom: 0; } /* Blog item image */ .blog-list-image { display: block; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .blog-list-item:hover .blog-list-image { -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -o-transform: scale(1.06); -ms-transform: scale(1.06); transform: scale(1.06); } /* Blog item info */ .blog-list-info { padding: 8% 8%; } @media (max-width: 992px) { .blog-list-info { padding: 5% 0 10% 0; } } .blog-list-title { margin: 0; font-size: 26px; font-weight: 500; color: #f7465b; } @media (max-width: 768px) { .blog-list-title { font-size: 24px; } } .blog-list-title a { text-decoration: none; color: #545A5F; } .blog-list-title a:hover { color: #f7465b; } .blog-list-meta { margin: 10px 0 20px 0; font-size: 14px; color: #8E969C; } .blog-list-item .article-time { color: #8E969C; } .blog-list-item .article-author { color: #8E969C; } .blog-list-item .article-category { color: #8E969C; } .blog-list-desc { margin: 0; } /* Blog list classic */ .blog-list-classic .col { width: 100%; } .blog-list-classic .bco { min-height: auto; } .blog-list-classic .blog-list-image { padding-bottom: 50%; } .blog-list-classic .blog-list-info { padding: 5% 0 30px 0; } .blog-list-classic .col-md-push-6 { left: auto; } .blog-list-classic .col-md-pull-6 { right: auto; } .blog-list-classic .blog-list-item { margin-bottom: 60px !important; } /* ------------------------------------------------------------- * * Testimonials /* ------------------------------------------------------------- */ /* Testimonial carousel */ .testimonial-carousel { margin-top: 40px; } /* Testimonial item */ .testimonial-item { } .testimonial-item img { display: inline-block !important; float: left; max-width: 100px; margin: 0 25px 20px 0; } .tm-hide-image .testimonial-item img { /* Hiding testimonial image if class "tm-hide-image" is used. */ display: none !important; } blockquote { position: relative; overflow: hidden; padding: 0 0 0 30px; margin: 0 0 15px 0; font-size: 17.5px; font-style: italic; border-color: rgba(121, 121, 121, 0.18); } blockquote p { } blockquote .small, blockquote footer, blockquote small { margin-top: 20px; color: #8E969C; } /* Align testimonial item to center on small devices */ @media (max-width: 768px) { .testimonial-item { text-align: center !important; } .testimonial-item blockquote { padding: 0 !important; text-align: center !important; border: none !important; } .testimonial-item img { float: none !important; margin: 0 0 40px 0 !important; } } /* Testimonial align center class */ .tm-center .testimonial-item { text-align: center; } .tm-center .testimonial-item blockquote { padding: 0; text-align: center; border: none; } .tm-center .testimonial-item img { float: none; margin: 0 0 40px 0; } /* Testimonial align right class */ .blockquote-reverse, blockquote.pull-right, .tm-right .testimonial-item blockquote { padding: 0 30px 0 0; text-align: right; border-left: 0; border-right: 5px solid rgba(121, 121, 121, 0.18); } .tm-right .testimonial-item img { float: right; margin: 0 0 0 20px; } /* ------------------------------------------------------------- * * Clients /* ------------------------------------------------------------- */ .clients-carousel { padding-bottom: 30px; } .clients-carousel .client { display: block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .clients-carousel .client:hover { opacity: .8; } .clients-carousel .client img { width: auto; max-width: 100%; margin: 0 auto; } /* ------------------------------------------------------------- * * Contact Us /* ------------------------------------------------------------- */ .contact-info { margin-bottom: 30px; font-weight: 400; } /* ------------------------------------------------------------- * * Content carousel - CC (based on OWL Carousel) /* ------------------------------------------------------------- */ .owl-carousel { } .owl-carousel .owl-item { z-index: 9; overflow: hidden; } /* OWL controls */ .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { position: absolute; } /* Prev/Next buttons */ .owl-nav { margin: 0; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { top: 50%; width: 50px; height: 50px; line-height: 50px; background-color: rgba(247, 70, 91, 0.3); padding: 0; margin: 0; text-align: center; font-size: 19px; color: #FFF; opacity: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .owl-carousel:hover .owl-nav .owl-prev, .owl-carousel:hover .owl-nav .owl-next { opacity: 1; } .owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover { background-color: #f7465b; } .owl-carousel .owl-nav .owl-prev { left: 0px; } .owl-carousel .owl-nav .owl-next { right: 0px; } .owl-carousel:hover .owl-nav .owl-prev { left: 20px; } .owl-carousel:hover .owl-nav .owl-next { right: 20px; } /* Prev/Next buttons disabled (no loop) */ .owl-carousel .owl-nav .owl-prev.disabled { background-color: rgba(173, 173, 173, 0.3); } .owl-carousel .owl-nav .owl-next.disabled { background-color: rgba(173, 173, 173, 0.3); } /* Prev/Next buttons positions outside (left/right) */ .owl-carousel.nav-outside .owl-nav .owl-prev, .owl-carousel.nav-outside .owl-nav .owl-next { width: 40px; height: 40px; line-height: 40px; background-color: #f7465b; font-size: 16px; color: #FFF; opacity: 1; } .owl-carousel.nav-outside .owl-nav .owl-prev:hover, .owl-carousel.nav-outside .owl-nav .owl-next:hover { color: #FFF; } .owl-carousel.nav-outside .owl-nav .owl-prev.disabled, .owl-carousel.nav-outside .owl-nav .owl-next.disabled { background-color: rgba(162, 169, 171, 0.2); color: #A4AAAD; } .owl-carousel.nav-outside .owl-nav .owl-prev { left: -55px; } .owl-carousel.nav-outside .owl-nav .owl-next { right: -55px; } @media (max-width: 1300px) { .owl-carousel.nav-outside .owl-nav .owl-prev, .owl-carousel.nav-outside .owl-nav .owl-next { width: 40px; height: 40px; line-height: 40px; } .owl-carousel.nav-outside .owl-nav .owl-prev { left: 15px; } .owl-carousel.nav-outside .owl-nav .owl-next { right: 15px; } } /* Prev/Next buttons positions outside-top */ .nav-outside-top .owl-nav { position: absolute; top: -45px; right: 0; width: 65px; } .nav-outside-top .owl-nav .owl-prev, .nav-outside-top .owl-nav .owl-next { width: 30px; height: 30px; line-height: 30px; background-color: #f7465b; font-size: 12px; color: #FFF; opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .nav-outside-top .owl-nav .owl-prev:hover, .nav-outside-top .owl-nav .owl-next:hover { background-color: #1B282D; color: #FFF; } .nav-outside-top .owl-nav .owl-prev.disabled, .nav-outside-top .owl-nav .owl-next.disabled { background-color: rgba(162, 169, 171, 0.2); color: #A4AAAD; } .nav-outside-top:hover .owl-nav .owl-prev { left: 0; } .nav-outside-top:hover .owl-nav .owl-next { right: 0; } /* Prev/Next buttons rounded */ .nav-rounded .owl-nav .owl-prev, .nav-rounded .owl-nav .owl-next { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } /* Dots */ .owl-dots, .owl-nav.disabled + .owl-dots { position: absolute; bottom: 15px; margin-top: 0px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .owl-dots .owl-dot span { width: 20px; height: 5px; margin: 0px 3px; background-color: #D1D5D6; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background-color: #f7465b; } .owl-dots .owl-dot.active span { } /* Dots positions outside */ .dots-outside { margin-bottom: 50px; } .dots-outside .owl-dots, .dots-outside .owl-nav.disabled + .owl-dots { bottom: -40px; } .dots-left .owl-dots, .dots-left .owl-nav.disabled + .owl-dots { left: 20px; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } .dots-right .owl-dots, .dots-right .owl-nav.disabled + .owl-dots { left: inherit; right: 20px; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } /* Dots rounded */ .dots-rounded .owl-dots .owl-dot span { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* CC item */ .owl-carousel .cc-item { display: block; } /* CC caption */ .owl-carousel .cc-caption { position: absolute; width: 100%; padding: 2% 3%; } .owl-carousel .cc-title { margin: 0; font-size: 22px; } .owl-carousel .cc-caption .heading-title { font-weight: 500; } .owl-carousel .cc-description { margin: 0; font-size: 14px; } .owl-carousel .cc-caption .heading-tescription { margin: 10px 0 0 0; font-size: 14px; } @media (max-width: 768px) { .owl-carousel .cc-caption .heading-title { font-size: 22px; } } /* CC caption positions ======================== */ /* position top */ .owl-carousel .cc-caption.top-left { top: 0; text-align: left; } .owl-carousel .cc-caption.top-center { top: 0; text-align: center; } .owl-carousel .cc-caption.top-right { top: 0; text-align: right; } /* position center */ .owl-carousel .cc-caption.center-left { top: 50%; text-align: left; -moz-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } .owl-carousel .cc-caption.center { top: 50%; text-align: center; -moz-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } .owl-carousel .cc-caption.center-right { top: 50%; text-align: right; -moz-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } /* position bottom */ .owl-carousel .cc-caption.bottom-left { bottom: 0; text-align: left; } .owl-carousel .cc-caption.bottom-center { bottom: 0; text-align: center; } .owl-carousel .cc-caption.bottom-right { bottom: 0; text-align: right; } /* ------------------------------------------------------------- * * Buttons /* ------------------------------------------------------------- */ .btn { position: relative; margin: 8px 0; padding: 10px 30px; font-size: 14px; font-weight: 500; text-transform: uppercase; z-index: 9; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 2px solid rgba(0, 0, 0, 0); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .btn.active, .btn:active, .btn.focus, .btn:focus, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Button styles */ .btn-default { color: #545A5F; background-color: rgba(186, 189, 193, 0.25); border-color: transparent; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .dropdown-toggle.btn-default { color: #545A5F; background-color: #E0E3E6; border-color: transparent; } .btn-primary { color: #FFF; background-color: #f7465b; border-color: #f7465b; } .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary { color: #FFF; background-color: #DC283C; border-color: #DC283C; } .btn-success { color: #FFF; background-color: #5cb85c; border-color: #5cb85c; } .btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success { color: #FFF; background-color: #449d44; border-color: #449d44; } .btn-info { color: #FFF; background-color: #31B0D5; border-color: #31B0D5; } .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info { color: #FFF; background-color: #2398BB; border-color: #2398BB; } .btn-warning { color: #FFF; background-color: #ECC71F; border-color: #ECC71F; } .btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open > .dropdown-toggle.btn-warning { color: #FFF; background-color: #EC971F; border-color: #EC971F; } .btn-danger { color: #FFF; background-color: #EC3A35; border-color: #EC3A35; } .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open > .dropdown-toggle.btn-danger { color: #FFF; background-color: #C9302C; border-color: #C9302C; } .btn-link { padding-left: 10px !important; padding-right: 10px !important; color: #f7465b; } .btn-link:focus, .btn-link:hover { color: #f7465b; } /* Button dark */ .btn-dark { color: #FFF; background-color: #313131; border-color: #313131; } .btn-dark.active, .btn-dark.focus, .btn-dark:active, .btn-dark:focus, .btn-dark:hover, .open > .dropdown-toggle.btn-dark { color: #FFF; background-color: #070F13; border-color: #070F13; } .btn-dark-bordered { color: #545A5F; background-color: transparent; border: 2px solid #313131; -webkit-box-shadow: none; box-shadow: none; } .btn-dark-bordered.active, .btn-dark-bordered.focus, .btn-dark-bordered:active, .btn-dark-bordered:focus, .btn-dark-bordered:hover, .open > .dropdown-toggle.btn-dark-bordered { color: #FFF; background-color: #313131; border-color: #313131; } /* Button white */ .btn-white { color: #545A5F; background-color: #FFF; border-color: #FFF; } .btn-white.active, .btn-white.focus, .btn-white:active, .btn-white:focus, .btn-white:hover, .open > .dropdown-toggle.btn-white { color: #FFF !important; background-color: transparent; border-color: #FFF; } .btn-white-bordered { color: #FFF; background-color: transparent; border: 2px solid #FFF; -webkit-box-shadow: none; box-shadow: none; } .btn-white-bordered.active, .btn-white-bordered.focus, .btn-white-bordered:active, .btn-white-bordered:focus, .btn-white-bordered:hover, .open > .dropdown-toggle.btn-white-bordered { color: #545A5F; background-color: #FFF; border-color: #FFF; } /* Button with dropdown */ .btn-group > .btn + .dropdown-toggle { padding-right: 10px; padding-left: 10px; border-left: 1px solid rgba(0, 0, 0, 0.06); } /* Button social */ .btn-social { position: relative; padding-left: 55px; text-align: left; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-social > .btn-social-icon { position: absolute; left: 0; top: 0; bottom: 0; width: 42px; line-height: 40px; font-size: 1.4em; text-align: center; border-right: 1px solid rgba(0,0,0,0.12); } .btn-social > .btn-social-icon > i { position: absolute; top: 50%; left: 50%; text-align: center; padding-right: 0; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-social.btn-xs { padding-left: 55px; } .btn-social.btn-sm { padding-left: 55px; } .btn-social.btn-lg { padding-left: 60px; } .btn-social.btn-xlg { padding-left: 65px; } /* Button social min */ .btn-social-min { position: relative; width: 46px; height: 46px; line-height: 42px; padding: 0 !important; text-align: center; font-size: 18px; } .btn-social-min.btn-xs { width: 26px; height: 26px; line-height: 22px; } .btn-social-min.btn-sm { width: 35px; height: 35px; line-height: 32px; } .btn-social-min.btn-lg { width: 55px; height: 55px; line-height: 53px; font-size: 20px; } .btn-social-min.btn-xlg { width: 69px; height: 69px; line-height: 67px; font-size: 22px; } /* Button facebook */ .btn-facebook { background-color: #3b5998; color: #fff; } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook { color: #fff; background-color: #2d4373; } /* Button twitter */ .btn-twitter { background-color: #55acee; color: #fff; } .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open > .dropdown-toggle.btn-twitter { color: #fff; background-color: #2795e9; } /* Button dropbox */ .btn-dropbox { background-color: #1087dd; color: #fff; } .btn-dropbox:hover, .btn-dropbox:focus, .btn-dropbox:active, .btn-dropbox.active, .open > .dropdown-toggle.btn-dropbox { color: #fff; background-color: #0d6aad; } /* Button linkedin */ .btn-linkedin { background-color: #007bb6; color: #fff; } .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .open > .dropdown-toggle.btn-linkedin { color: #fff; background-color: #005983; } /* Button pinterest */ .btn-pinterest { background-color: #cb2027; color: #fff; } .btn-pinterest:hover, .btn-pinterest:focus, .btn-pinterest:active, .btn-pinterest.active, .open > .dropdown-toggle.btn-pinterest { color: #fff; background-color: #9f191f; } /* Button google */ .btn-google { background-color: #dd4b39; color: #fff; } .btn-google:hover, .btn-google:focus, .btn-google:active, .btn-google.active, .open > .dropdown-toggle.btn-google { color: #fff; background-color: #c23321; } /* Button instagram */ .btn-instagram { background-color: #3f729b; color: #fff; } .btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active, .btn-instagram.active, .open > .dropdown-toggle.btn-instagram { color: #fff; background-color: #305777; } /* Button tumblr */ .btn-tumblr { background-color: #2c4762; color: #fff; } .btn-tumblr:hover, .btn-tumblr:focus, .btn-tumblr:active, .btn-tumblr.active, .open > .dropdown-toggle.btn-tumblr { color: #fff; background-color: #1c2d3f; } /* Button vk */ .btn-vk { background-color: #587ea3; color: #fff; } .btn-vk:hover, .btn-vk:focus, .btn-vk:active, .btn-vk.active, .open > .dropdown-toggle.btn-vk { color: #fff; background-color: #466482; } /* Button flickr */ .btn-flickr { background-color: #ff0084; color: #fff; } .btn-flickr:hover, .btn-flickr:focus, .btn-flickr:active, .btn-flickr.active, .open > .dropdown-toggle.btn-flickr { color: #fff; background-color: #cc006a; } /* Button soundcloud */ .btn-soundcloud { background-color: #f50; color: #fff; } .btn-soundcloud:hover, .btn-soundcloud:focus, .btn-soundcloud:active, .btn-soundcloud.active, .open > .dropdown-toggle.btn-soundcloud { color: #fff; background-color: #c40; } /* Button yahoo */ .btn-yahoo { background-color: #720e9e; color: #fff; } .btn-yahoo:hover, .btn-yahoo:focus, .btn-yahoo:active, .btn-yahoo.active, .open > .dropdown-toggle.btn-yahoo { color: #fff; background-color: #500a6f; } /* Button rounded */ .btn-rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .btn-rounded-2x { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .btn-rounded-3x { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .btn-rounded-4x { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .btn-rounded-5x { -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .btn-rounded-full { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Button bordered */ .btn-default-bordered { color: #545A5F; background-color: transparent; border-color: rgba(189, 189, 189, 0.25); -webkit-box-shadow: none; box-shadow: none; } .btn-default-bordered.active, .btn-default-bordered.focus, .btn-default-bordered:active, .btn-default-bordered:focus, .btn-default-bordered:hover, .open > .dropdown-toggle.btn-default-bordered { color: #545A5F; background-color: #F1F1F1; border-color: #ECECEC; } .btn-primary-bordered { color: #f7465b; background-color: transparent; border-color: #f7465b; -webkit-box-shadow: none; box-shadow: none; } .btn-primary-bordered.active, .btn-primary-bordered.focus, .btn-primary-bordered:active, .btn-primary-bordered:focus, .btn-primary-bordered:hover, .open > .dropdown-toggle.btn-primary-bordered { color: #FFF; background-color: #f7465b; border-color: #f7465b; } .btn-success-bordered { color: #5CB85C; background-color: transparent; border-color: #5CB85C; -webkit-box-shadow: none; box-shadow: none; } .btn-success-bordered.active, .btn-success-bordered.focus, .btn-success-bordered:active, .btn-success-bordered:focus, .btn-success-bordered:hover, .open > .dropdown-toggle.btn-success-bordered { color: #FFF; background-color: #5CB85C; border-color: #5CB85C; } .btn-info-bordered { color: #5BC0DE; background-color: transparent; border-color: #5BC0DE; -webkit-box-shadow: none; box-shadow: none; } .btn-info-bordered.active, .btn-info-bordered.focus, .btn-info-bordered:active, .btn-info-bordered:focus, .btn-info-bordered:hover, .open > .dropdown-toggle.btn-info-bordered { color: #FFF; background-color: #31B0D5; border-color: #31B0D5; } .btn-warning-bordered { color: #ECC71F; background-color: transparent; border-color: #ECC71F; -webkit-box-shadow: none; box-shadow: none; } .btn-warning-bordered.active, .btn-warning-bordered.focus, .btn-warning-bordered:active, .btn-warning-bordered:focus, .btn-warning-bordered:hover, .open > .dropdown-toggle.btn-warning-bordered { color: #FFF; background-color: #ECC71F; border-color: #ECC71F; } .btn-danger-bordered { color: #EC3A35; background-color: transparent; border-color: #EC3A35; -webkit-box-shadow: none; box-shadow: none; } .btn-danger-bordered.active, .btn-danger-bordered.focus, .btn-danger-bordered:active, .btn-danger-bordered:focus, .btn-danger-bordered:hover, .open > .dropdown-toggle.btn-danger-bordered { color: #FFF; background-color: #EC3A35; border-color: #EC3A35; } /* Button sizes */ .btn-group-xs > .btn, .btn-xs { padding: 2px 15px; font-size: 12px; } .btn-group-sm > .btn, .btn-sm { padding: 5px 20px; font-size: 13px; } .btn-group-lg > .btn, .btn-lg { padding: 15px 40px; font-size: 15px; } .btn-group-xlg > .btn, .btn-xlg { /* Extra size */ padding: 20px 50px; font-size: 16px; } /* ------------------------------------------------------------- * * Social icons /* ------------------------------------------------------------- */ ul.social-icons { margin: 0; padding: 0; font-size: 0; list-style: none; } ul.social-icons > li { display: inline-block; } ul.social-icons > li + li { margin-left: 10px; } /* ------------------------------------------------------------- * * Panels /* ------------------------------------------------------------- */ .panel-group .panel { border-radius: 0px; } .panel { background-color: transparent; } /* panel default */ .panel-default { border-color: #EDEDED; } .panel-default > .panel-heading { background-color: transparent; color: #545A5F; border-color: #EDEDED; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #EDEDED; } /* ------------------------------------------------------------- * * Dropdown /* ------------------------------------------------------------- */ .dropdown-menu { background-color: #FFF; margin: 0; padding: 5px 0; border: none; border-radius: 0px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.11); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.11); } .navbar-right .dropdown-menu { left: 0; right: auto; } .dropdown-menu-right .dropdown-menu { /* align dropdown menu (use class "dropdown-menu-right"). */ right: 0; left: auto; } .dropdown-header { padding: 10px 15px; font-size: 14px; font-weight: 500; color: #545A5F; text-transform: uppercase; } .dropdown-menu .divider { background-color: rgba(115, 115, 115, 0.3); } .dropdown-menu li > a { display: block; padding: 7px 15px 7px 15px; font-size: 13px; color: #545A5F; border-bottom: 1px solid rgba(115, 115, 115, 0.13); } .dropdown-menu li:last-child > a { border-bottom: none; } .dropdown-uppercase .dropdown-menu li > a { /* if uppercase letters are allowed. */ text-transform: uppercase; font-size: 13px; } .dropdown-menu li > a:focus, .dropdown-menu li > a:hover, .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { background-color: rgba(140, 140, 140, 0.15) !important; color: #545A5F; border-bottom-color: transparent; } /* Dropdown dark */ .dropdown-menu-dark .dropdown-menu { background-color: #1A2023; border-color: #1A2023; } .dropdown-menu-dark .dropdown-menu li > a { color: #BBB; } .dropdown-menu-dark .dropdown-menu li > a:focus, .dropdown-menu-dark .dropdown-menu li > a:hover, .dropdown-menu-dark .dropdown-menu > .active > a, .dropdown-menu-dark .dropdown-menu > .active > a:focus, .dropdown-menu-dark .dropdown-menu > .active > a:hover { color: #FFF; } .dropdown-menu-dark > .dropdown-header { color: #A4AAAD; } .dropdown-menu-dark > .dropdown-menu > .divider { background-color: rgba(255, 255, 255, 0.11); } .dropdown-menu-dark > .dropdown-menu .dropdown-header { color: #CACACA; } /* Dropdown colored */ .dropdown-menu-color > .dropdown-menu { background-color: #f7465b; } .dropdown-menu-color > .dropdown-menu > li > a { color: #FFF; } .dropdown-menu-color > .dropdown-menu > li > a:hover { background-color: rgba(255, 255, 255, 0.12) !important; color: #FFF; } .dropdown-menu-color > .dropdown-header { font-weight: 400; color: #715D32; color: rgba(0, 0, 0, 0.5); } .dropdown-menu-color > .dropdown-menu > .divider { background-color: rgba(255, 255, 255, 0.11); } .dropdown-menu-color > .dropdown-menu .dropdown-header { color: #FFF; } /* Dropdown submenu */ .dropdown-submenu > .dropdown-menu { left: 100%; right: auto; margin-top: -33px !important; margin-left: 0px; } .dropdown-submenu .caret { position: absolute; right: 8px; top: 11px; border-left: 4px dashed; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* ------------------------------------------------------------- * * WOW animations (more info: http://mynameismatthieu.com/WOW/) /* ------------------------------------------------------------- */ .wow { visibility: hidden; } /* ------------------------------------------------------------- * * Nav pills /* ------------------------------------------------------------- */ .nav-pills > li { float: none; display: inline-block; } .nav-pills > li > a { background-color: #F1F1F1; padding: 10px 20px; font-size: 14px; color: #545A5F; text-decoration: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav-pills > li > a:hover { background-color: #ECECEC; text-decoration: none; color: #545A5F; } .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { background-color: #f7465b !important; cursor: default; color: #FFF; } @media (max-width: 768px) { .nav-pills > li { float: none; display: block !important; margin: 0 0 2px 0; text-align: center; } .nav-pills > li + li { margin: 0 0 2px 0; } .nav-pills > .dropdown .dropdown-menu { width: 100%; text-align: center; } } /* Nav pills rounded */ .nav-pills.pills-rounded > li > a { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .nav-pills.pills-rounded-2x > li > a { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .nav-pills.pills-rounded-3x > li > a { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .nav-pills.pills-rounded-4x > li > a { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .nav-pills.pills-rounded-5x > li > a { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* Nav pills gradient */ .nav-pills.pills-gradient > li > a { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#545A5F00000',GradientType=0 ); } /* Nav border bottom */ .nav-tabs.nav-border-bottom { border-color: transparent; } .nav-tabs.nav-border-bottom > li + li, .nav-pills.nav-border-bottom > li + li { margin-left: 5px; } .nav-tabs.nav-border-bottom > li > a, .nav-pills.nav-border-bottom > li > a { padding-left: 10px !important; padding-right: 10px !important; background-color: transparent !important; text-decoration: none !important; border-color: transparent !important; box-shadow: inset 0 -3px transparent; } .nav-tabs.nav-border-bottom > li > a:hover, .nav-pills.nav-border-bottom > li > a:hover { background-color: transparent !important; color: #f7465b !important; box-shadow: inset 0 -3px #f7465b; } .nav-tabs.nav-border-bottom > li.active > a, .nav-tabs.nav-border-bottom > li.active > a:focus, .nav-tabs.nav-border-bottom > li.active > a:hover, .nav-pills.nav-border-bottom > li.active > a, .nav-pills.nav-border-bottom > li.active > a:focus, .nav-pills.nav-border-bottom > li.active > a:hover { background-color: transparent !important; font-weight: 500; color: #f7465b !important; box-shadow: inset 0 -3px #f7465b; } /* ------------------------------------------------------------- * * Tabs /* ------------------------------------------------------------- */ .tabs-wrap { margin-bottom: 40px; } /* Tabs nav */ .tabs-wrap .nav { font-size: 0; } /* Tabs - nav tabs */ .nav-tabs { border-bottom: 1px solid #DDD; } .nav-tabs > li { float: none; display: inline-block; } .nav-tabs > li > a { margin: 0; padding: 10px 20px; font-size: 14px; color: #545A5F; border-radius: 0; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { font-weight: 400; color: #545A5F; cursor: default; background-color: #FFF; border: 1px solid #DDD; border-bottom-color: transparent; } @media (max-width: 768px) { .nav-tabs { border-bottom: none; } .nav-tabs > li { float: none; display: block !important; margin: 0 0 2px 0; text-align: center; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-bottom-color: #DDD; } .nav-tabs > .dropdown .dropdown-menu { width: 100%; text-align: center; } } /* Tabs - nav justified */ .nav-justified > li { display: table-cell; border-radius: 0 !important; } .nav-tabs.nav-justified > li > a { border-radius: 0 !important; } .nav-tabs.nav-justified > li + li > a { margin-left: -1px; } .nav-tabs .nav-justified > li > a:hover { border-bottom: 1px solid #DDD; } .tabs-wrap .nav-pills.nav-justified > li + li > a { margin-left: 2px; } .tabs-wrap .nav-pills.nav-justified > li:first-child > a { margin-left: 0; } .nav-justified > .dropdown .dropdown-menu { width: 100%; } @media (max-width: 768px) { .nav-tabs.nav-justified > li > a:hover { border-bottom: 1px solid rgba(221, 221, 221, 0); } .nav-pills.nav-justified > li + li > a { margin: 0 0 2px 0; } .nav-justified > .dropdown .dropdown-menu { width: 100%; text-align: center; } } /* Tabs - nav stacked */ .nav-tabs.nav-stacked { border-bottom: none; } .nav-stacked > li { display: block !important; } .nav-stacked > li + li { margin: 3px 0 0 0 !important; } .nav-tabs.nav-stacked > li.active > a, .nav-tabs.nav-stacked > li.active > a:focus, .nav-tabs.nav-stacked > li.active > a:hover { border-bottom-color: #DDD; } /* Tabs - nav tabs sizes */ .nav-tabs-xs > li > a { padding: 2px 10px 5px 10px; font-size: 13px; } .nav-tabs.nav-tabs-xs > li > a { bottom: -5px; } .nav-tabs-sm > li > a { padding: 5px 15px; } .nav-tabs.nav-tabs-sm > li > a { bottom: -3px; } .nav-tabs-lg > li > a { padding: 15px 25px; } .nav-tabs-xlg > li > a { padding: 20px 30px; } /* Tabs content */ .tabs-wrap .tab-content { padding-top: 30px; } /* ------------------------------------------------------------- * * Accordion /* ------------------------------------------------------------- */ .accordion-wrap { margin-bottom: 40px; } .accordion-wrap .panel-heading { padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .accordion-wrap .panel-heading a { position: relative; display: block; padding: 12px 15px; overflow: hidden; text-decoration: none; font-size: 14px; font-weight: 500; color: #545A5F; } .accordion-wrap .panel-heading a:hover, .accordion-wrap .panel-heading a:focus { color: inherit; } .accordion-wrap .panel-heading a.collapsed { color: inherit; } .accordion-wrap .panel-heading a > .acc-arrow { position: absolute; content: ""; right: 10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; line-height: 20px; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordion-wrap .panel-heading a.collapsed > .acc-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* ------------------------------------------------------------- * * Modal /* ------------------------------------------------------------- */ .modal { z-index: 99999; } @media (min-width: 768px) { .modal-dialog { margin: 40px auto; } } /* ------------------------------------------------------------- * * Thumbnail list /* ------------------------------------------------------------- */ .thumb-list { display: block; width: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; } .thumb-list > li { float: left; } /* Thumbnail list item */ .thumb-list .thumb-list-item { display: block; padding-bottom: 80%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .thumb-list .thumb-list-item:hover { opacity: .7; } /* Thumbnail list columns */ .thumb-list.col-2 > li { width: 50%; } .thumb-list.col-3 > li { width: 33.33333333%; } .thumb-list.col-4 > li { width: 25%; } .thumb-list.col-5 > li { width: 20%; } .thumb-list.col-6 > li { width: 16.66666666666667%; } /* Thumbnail list gutter (more space between items) */ .thumb-list.gutter-1 > li { padding: 1px; } .thumb-list.gutter-2 > li { padding: 2px; } .thumb-list.gutter-3 > li { padding: 3px; } .thumb-list.gutter-4 > li { padding: 4px; } .thumb-list.gutter-5 > li { padding: 5px; } /* ------------------------------------------------------------- * * Forms /* ------------------------------------------------------------- */ .form-control { display: block; width: 100%; height: 48px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: inherit; background-color: rgba(139, 145, 150, 0.12); background-image: none; border: 1px solid rgba(139, 145, 150, 0.1); border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border-color ease-in-out .15s; -o-transition: border-color ease-in-out .15s; transition: border-color ease-in-out .15s; } .form-control:focus { border-color: #f7465b; outline: 0; -webkit-box-shadow: none; box-shadow: none; } /* ------------------------------------------------------------- * * Footer /* ------------------------------------------------------------- */ #footer { padding: 30px 0; } /* If class section angle used */ #footer.angle-left-top, #footer.angle-right-top { padding-top: 90px; } #footer .copyright { color: #A4AAAD; } /* ------------------------------------------------------------- * * Scroll down arrow /* ------------------------------------------------------------- */ .scroll-down-arrow { position: absolute; bottom: 30px; left: 50%; margin-left: -15px; width: 30px; height: 30px; z-index: 3; } .scroll-down-arrow span { position: relative; font-size: 20px; } /* If section angle bottom used */ .angle-left-bottom .scroll-down-arrow, .angle-right-bottom .scroll-down-arrow { bottom: 80px; } /* ------------------------------------------------------------- * * Scroll to top button /* ------------------------------------------------------------- */ .scrolltotop { position: fixed; display: none; bottom: 30px; right: 30px; width: 34px; height: 34px; line-height: 31px; background-color: rgba(0, 0, 0, 0.5); text-align: center; font-size: 16px; color: #FFF; text-decoration: none; z-index: 9999; opacity: .7; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .scrolltotop:hover, .scrolltotop:focus { opacity: 1; color: #FFF; }