/*---------------------------------------------------------------------- MASTER STYLESHEET Project: Metronic "Acidus" Frontend Freebie - Responsive HTML Template Based On Twitter Bootstrap 3.3.4 Version: 1.0 Author: KeenThemes Primary use: Corporate, Business Themes. Email: support@keenthemes.com Follow: http://www.twitter.com/keenthemes Like: http://www.facebook.com/keenthemes Website: http://www.keenthemes.com Premium: Premium Metronic Admin Theme: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes -----------------------------------------------------------------------*/ /* eg: @include user-select(none); */ /* eg: @include rotate(45deg); */ /* eg: @include translate3d(0,0,0); */ /* eg: @include border-radius(3px); */ /*------------------------------------------------------------------ [The "base.scss" contains basic default element styles (colors, typography, margins & padding).] ------------------------------------------------------------------*/ html { overflow-x: hidden; } html, html a, body { -webkit-font-smoothing: antialiased; } body { font-family: Hind, sans-serif; } p { font-size: 15px; font-weight: 400; font-family: Hind, sans-serif; color: #a6a7aa; line-height: 1.4; margin-bottom: 15px; } em, li, li a { font-size: 16px; font-weight: 500; font-family: Hind, sans-serif; color: #515769; } a { font-family: Hind, sans-serif; color: #81848f; outline: 0; } a:focus, a:hover, a:active { outline: 0; color: #999caa; text-decoration: none; } .link { position: relative; font-size: 13px; font-weight: 600; font-family: Hind, sans-serif; text-transform: uppercase; } .link:after { position: absolute; top: 8px; left: -15px; width: 9px; height: 2px; background: #17bed2; content: " "; } span { font-size: 14px; font-weight: 400; font-family: Hind, sans-serif; color: #bfc1c7; } h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: Hind, sans-serif; color: #515769; line-height: 1.4; margin: 0 0 15px; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { color: #515769; } h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover { color: #999caa; text-decoration: none; } h1 > a:focus, h2 > a:focus, h3 > a:focus, h4 > a:focus, h5 > a:focus, h6 > a:focus { text-decoration: none; } h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 22px; } h4 { font-size: 22px; } ::selection { color: #fff; background: #17bed2; text-shadow: none; } ::-webkit-selection { color: #fff; background: #17bed2; text-shadow: none; } ::-moz-selection { color: #fff; background: #17bed2; text-shadow: none; } :active, :focus { outline: none; } /* Section Seperator */ .section-seperator { border-bottom: 1px solid #edf0f2; } /* Content Wrapper Link */ .content-wrapper-link { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; z-index: 3; text-decoration: none; } /*------------------------------------------------------------------ [Blockquote] ------------------------------------------------------------------*/ .blockquote { position: relative; font-size: 17px; font-weight: 400; font-family: Hind, sans-serif; color: #a6a7aa; line-height: 1.4; border-right: none; margin-right: 20px; } .blockquote:before { position: absolute; top: 0; right: -20px; font-size: 60px; color: #17bed2; content: open-quote; } /*------------------------------------------------------------------ [Button] ------------------------------------------------------------------*/ .btn-theme { position: relative; display: inline-block; line-height: 1.4; text-align: center; background-image: none; border-style: solid; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .btn-theme.focus, .btn-theme:active.focus, .btn-theme.active.focus { outline: none; } .btn-theme:hover { transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .btn-theme:hover, .btn-theme:focus, .btn-theme.focus { text-decoration: none; } .btn-theme:active, .btn-theme.active { background-image: none; outline: 0; } .btn-theme.disabled, .btn-theme[disabled], fieldset[disabled] .btn-theme { cursor: not-allowed; box-shadow: none; opacity: .65; pointer-events: none; } .btn-base-bg { color: #fff; background: #17bed2; border-color: transparent; border-width: 0; } .btn-base-bg:hover, .btn-base-bg:focus, .btn-base-bg.focus { color: #fff; background: #63cbd7; border-color: transparent; } .btn-theme-sm { font-size: 13px; font-weight: 600; padding: 15px 40px; } /*------------------------------------------------------------------ [Work] ------------------------------------------------------------------*/ .work .work-overlay { position: relative; } .work .work-overlay:before { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: transparent; content: " "; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work .work-content { position: absolute; right: 0; bottom: 0; opacity: 0; padding: 25px; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work:hover .work-overlay:before { background: rgba(0, 0, 0, 0.5); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work:hover .work-content { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Footer] ------------------------------------------------------------------*/ .footer .footer-logo { width: 85px; height: 21px; } .footer .footer-list { margin-bottom: 0; } .footer .footer-list-item { color: #777984; margin-bottom: 15px; } .footer .footer-list-item:last-child { margin-bottom: 0; } /*------------------------------------------------------------------ [Header] ------------------------------------------------------------------*/ /* Navbar */ .header .navbar { margin-bottom: 0; } /* Navbar Toggle */ .header .navbar-toggle { width: 25px; height: 25px; border: none; padding: 0; margin: 35px 0; } .header .navbar-toggle .toggle-icon { position: relative; width: 21px; height: 1px; display: inline-block; background: #515769; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .navbar-toggle .toggle-icon:before, .header .navbar-toggle .toggle-icon:after { position: absolute; right: 0; background: #515769; content: " "; } .header .navbar-toggle .toggle-icon:before { width: 10px; height: 1px; bottom: 10px; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .navbar-toggle .toggle-icon:after { width: 16px; height: 1px; top: -5px; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .navbar-toggle:hover .toggle-icon { background: #17bed2; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after { width: 21px; height: 1px; background: #17bed2; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .navbar-toggle:hover .toggle-icon.is-clicked { background: rgba(81, 87, 105, 0); } /* Navbar Logo */ .header .navbar-logo { width: 100px; height: 100px; float: right; max-height: 95px; line-height: 65px; } .header .navbar-logo-wrap { display: inline-block; padding: 15px 0; } .header .navbar-logo-wrap:focus, .header .navbar-logo-wrap:hover { text-decoration: none; } .header .navbar-logo-img { display: inline-block; width: 85px; height: auto; max-width: 100%; max-height: 100%; vertical-align: middle; } /* Navbar */ .header .navbar-nav { padding-right: 0; margin-bottom: 0; list-style: none; } /* Nav */ .header .nav-item { position: relative; display: block; } .header .nav-item:last-child .nav-item-child { padding-left: 0; } .header .nav-item-child { position: relative; display: block; font-size: 13px; font-weight: 600; font-family: Hind, sans-serif; text-transform: uppercase; line-height: 55px; padding: 20px; } .header .nav-item-child.active { position: relative; } .header .nav-item-child.active:after { position: absolute; top: 45px; right: 0; width: 9px; height: 2px; background: #17bed2; content: " "; } /* Media Queries below 991px */ @media (max-width: 991px) { /* Bootstrap collapse of navigation with a maximum width: 991px (Change it to any breakpoint you want to be collapsed) */ .header .navbar-toggle { display: block; } .header .navbar-collapse.collapse { display: none !important; } .header .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; } .header .nav-collapse { padding-right: 0; padding-left: 0; } .header .navbar-nav { margin: 0; float: none; } .header .navbar-nav .nav-item { float: none; } /* Menu Container */ .header .menu-container:before, .header .menu-container:after { content: " "; display: table; } .header .menu-container:after { clear: both; } /* Navbar Nav */ .header .nav-item-child { line-height: 1.4; padding: 12px 15px 12px 12px; } .header .nav-item-child.active:after { position: absolute; top: 61px; } } /* Media Queries below 767px */ @media (max-width: 767px) { /* Menu Container */ .header .menu-container { padding-right: 15px; padding-left: 15px; margin-right: 0; margin-left: 0; } .header .navbar > .container { width: auto; padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; } .header .navbar > .container > .nav-collapse { padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; } } /* Media Queries above 992px */ @media (min-width: 992px) { /* Navbar */ .header .navbar-nav-right { float: left; } } /*------------------------------------------------------------------ [Contact] ------------------------------------------------------------------*/ .contact-list > li { font-size: 13px; color: #81848f; margin-bottom: 10px; } /*-------------------------------------------------- [Back To Top Theme Button] ----------------------------------------------------*/ .back-to-top { position: fixed; left: 10px; bottom: 10px; display: inline-block; z-index: 9; width: 40px; height: 40px; font-size: 11px; font-weight: 400; color: #fff; text-align: center; line-height: 3; letter-spacing: 1px; text-transform: uppercase; background: #515769; border-radius: 3px; visibility: hidden; opacity: 0; padding: 5px; -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .back-to-top:hover { color: #fff; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .back-to-top:focus, .back-to-top:hover { text-decoration: none; } /* The Button Becomes Visible */ .back-to-top.back-to-top-is-visible { visibility: visible; opacity: .6; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .back-to-top.back-to-top-is-visible:hover { opacity: 1; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* If the user keeps scrolling down, the button is out of focus and becomes less visible */ .back-to-top.back-to-top-fade-out { opacity: .4; } .back-to-top.back-to-top-fade-out:hover { opacity: 1; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Form Control] ------------------------------------------------------------------*/ .form-control { height: 50px; font-size: 14px; font-weight: 400; color: #a6a7aa; background: #fafafa; border: none; box-shadow: none; border-radius: 0; padding-right: 15px; } .form-control::-moz-placeholder { color: #a6a7aa; } .form-control:-ms-input-placeholder { color: #a6a7aa; } .form-control::-webkit-input-placeholder { color: #a6a7aa; } .form-control:focus { color: #515769; box-shadow: none; } .form-control:focus::-moz-placeholder { color: #515769; } .form-control:focus:-ms-input-placeholder { color: #515769; } .form-control:focus::-webkit-input-placeholder { color: #515769; } /*-------------------------------------------------- [Masonry Grid] ----------------------------------------------------*/ .masonry-grid { margin: 0 -2px; } .masonry-grid:before, .masonry-grid:after { content: " "; display: table; } .masonry-grid:after { clear: both; } .masonry-grid .masonry-grid-item { display: block; width: 19.99%; float: right; vertical-align: top; padding: 0 2px; margin-bottom: 4px; } .masonry-grid .masonry-grid-item.col-12 { width: 100%; } .masonry-grid .masonry-grid-item.col-11 { width: 91.66666667%; } .masonry-grid .masonry-grid-item.col-10 { width: 83.33333333%; } .masonry-grid .masonry-grid-item.col-9 { width: 75%; } .masonry-grid .masonry-grid-item.col-8 { width: 66.66666667%; } .masonry-grid .masonry-grid-item.col-7 { width: 58.33333333%; } .masonry-grid .masonry-grid-item.col-6 { width: 50%; } .masonry-grid .masonry-grid-item.col-5 { width: 41.66666667%; } .masonry-grid .masonry-grid-item.col-4 { width: 33.33333333%; } .masonry-grid .masonry-grid-item.col-3 { width: 25%; } .masonry-grid .masonry-grid-item.col-2 { width: 16.66666667%; } .masonry-grid .masonry-grid-item.col-1 { width: 8.33333333%; } /* Media Queries below 768px */ @media (max-width: 768px) { .masonry-grid .masonry-grid-item { width: 50%; } .masonry-grid .masonry-grid-item.col-12, .masonry-grid .masonry-grid-item.col-11, .masonry-grid .masonry-grid-item.col-10, .masonry-grid .masonry-grid-item.col-9, .masonry-grid .masonry-grid-item.col-8, .masonry-grid .masonry-grid-item.col-7, .masonry-grid .masonry-grid-item.col-6, .masonry-grid .masonry-grid-item.col-5, .masonry-grid .masonry-grid-item.col-4, .masonry-grid .masonry-grid-item.col-3, .masonry-grid .masonry-grid-item.col-2, .masonry-grid .masonry-grid-item.col-1 { width: 50%; } } /* Media Queries below 600px */ @media (max-width: 600px) { .masonry-grid .masonry-grid-item { width: 100%; } .masonry-grid .masonry-grid-item.col-12, .masonry-grid .masonry-grid-item.col-11, .masonry-grid .masonry-grid-item.col-10, .masonry-grid .masonry-grid-item.col-9, .masonry-grid .masonry-grid-item.col-8, .masonry-grid .masonry-grid-item.col-7, .masonry-grid .masonry-grid-item.col-6, .masonry-grid .masonry-grid-item.col-5, .masonry-grid .masonry-grid-item.col-4, .masonry-grid .masonry-grid-item.col-3, .masonry-grid .masonry-grid-item.col-2, .masonry-grid .masonry-grid-item.col-1 { width: 100%; } } /*------------------------------------------------------------------ [Swiper Slider] ------------------------------------------------------------------*/ .swiper-slider { position: relative; width: 100%; height: 100%; overflow: hidden; } .swiper-clients-img { display: block; width: 190px; height: auto; margin: 0 auto; opacity: 1; cursor: pointer; transition-duration: 200ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .swiper-clients-img:hover { opacity: .8; transition-duration: 200ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Text Colors] ------------------------------------------------------------------*/ .color-base { color: #17bed2; } .color-white { color: #fff; } .color-heading { color: #515769; } .color-subtitle { color: #a6a7aa; } .color-link { color: #81848f; } .color-link-hover { color: #999caa; } .color-sky-light { color: #fafafa; } /*------------------------------------------------------------------ [Background Colors] ------------------------------------------------------------------*/ .bg-color-base { background: #17bed2; } .bg-color-white { background: #fff; } .bg-color-heading { background: #515769; } .bg-color-subtitle { background: #a6a7aa; } .bg-color-link { background: #81848f; } .bg-color-link-hover { background: #999caa; } .bg-color-sky-light { background: #fafafa; } /*------------------------------------------------------------------ [Content] ------------------------------------------------------------------*/ .content { padding-top: 40px; padding-bottom: 40px; } .content-sm { padding-top: 60px; padding-bottom: 60px; } .content-md { padding-top: 80px; padding-bottom: 80px; } .content-lg { padding-top: 100px; padding-bottom: 100px; } /*------------------------------------------------------------------ [Overflow] ------------------------------------------------------------------*/ .overflow-h { overflow: hidden; } /*-------------------------------------------------- [Font Weight] ----------------------------------------------------*/ .fweight-300 { font-weight: 300 !important; } .fweight-400 { font-weight: 400 !important; } .fweight-500 { font-weight: 500 !important; } .fweight-600 { font-weight: 600 !important; } .fweight-700 { font-weight: 700 !important; } /*------------------------------------------------------------------ [Left margin] ------------------------------------------------------------------*/ .margin-l-0 { margin-right: 0 !important; } .margin-l-5 { margin-right: 5px !important; } .margin-l-10 { margin-right: 10px !important; } .margin-l-20 { margin-right: 20px !important; } /*------------------------------------------------------------------ [Right margin] ------------------------------------------------------------------*/ .margin-r-0 { margin-left: 0 !important; } .margin-r-5 { margin-left: 5px !important; } .margin-r-10 { margin-left: 10px !important; } .margin-r-20 { margin-left: 20px !important; } /*------------------------------------------------------------------ [Bottom margin] ------------------------------------------------------------------*/ .margin-b-0 { margin-bottom: 0 !important; } .margin-b-5 { margin-bottom: 5px !important; } .margin-b-10 { margin-bottom: 10px !important; } .margin-b-20 { margin-bottom: 20px !important; } .margin-b-30 { margin-bottom: 30px !important; } .margin-b-40 { margin-bottom: 40px !important; } .margin-b-50 { margin-bottom: 50px !important; } .margin-b-60 { margin-bottom: 60px !important; } .margin-b-70 { margin-bottom: 70px !important; } .margin-b-80 { margin-bottom: 80px !important; } .margin-b-90 { margin-bottom: 90px !important; } .margin-b-100 { margin-bottom: 100px !important; } /*------------------------------------------------------------------ [Top margin below 992px] ------------------------------------------------------------------*/ @media (max-width: 992px) { .md-margin-b-0 { margin-bottom: 0 !important; } .md-margin-b-5 { margin-bottom: 5px !important; } .md-margin-b-10 { margin-bottom: 10px !important; } .md-margin-b-20 { margin-bottom: 20px !important; } .md-margin-b-30 { margin-bottom: 30px !important; } .md-margin-b-40 { margin-bottom: 40px !important; } .md-margin-b-50 { margin-bottom: 50px !important; } .md-margin-b-60 { margin-bottom: 60px !important; } .md-margin-b-70 { margin-bottom: 70px !important; } .md-margin-b-80 { margin-bottom: 80px !important; } .md-margin-b-90 { margin-bottom: 90px !important; } .md-margin-b-100 { margin-bottom: 100px !important; } } /*------------------------------------------------------------------ [Top margin below 768px] ------------------------------------------------------------------*/ @media (max-width: 768px) { .sm-margin-b-0 { margin-bottom: 0 !important; } .sm-margin-b-5 { margin-bottom: 5px !important; } .sm-margin-b-10 { margin-bottom: 10px !important; } .sm-margin-b-20 { margin-bottom: 20px !important; } .sm-margin-b-30 { margin-bottom: 30px !important; } .sm-margin-b-40 { margin-bottom: 40px !important; } .sm-margin-b-50 { margin-bottom: 50px !important; } .sm-margin-b-60 { margin-bottom: 60px !important; } .sm-margin-b-70 { margin-bottom: 70px !important; } .sm-margin-b-80 { margin-bottom: 80px !important; } .sm-margin-b-90 { margin-bottom: 90px !important; } .sm-margin-b-100 { margin-bottom: 100px !important; } } /*------------------------------------------------------------------ [Top margin below 480px] ------------------------------------------------------------------*/ @media (max-width: 480px) { .xs-margin-b-0 { margin-bottom: 0 !important; } .xs-margin-b-5 { margin-bottom: 5px !important; } .xs-margin-b-10 { margin-bottom: 10px !important; } .xs-margin-b-20 { margin-bottom: 20px !important; } .xs-margin-b-30 { margin-bottom: 30px !important; } .xs-margin-b-40 { margin-bottom: 40px !important; } .xs-margin-b-50 { margin-bottom: 50px !important; } .xs-margin-b-60 { margin-bottom: 60px !important; } .xs-margin-b-70 { margin-bottom: 70px !important; } .xs-margin-b-80 { margin-bottom: 80px !important; } .xs-margin-b-90 { margin-bottom: 90px !important; } .xs-margin-b-100 { margin-bottom: 100px !important; } } /*-------------------------------------------------- [Height] ----------------------------------------------------*/ .height-100 { height: 100px !important; } .height-200 { height: 200px !important; } .height-300 { height: 300px !important; }