/*---------------------------------------------------------------------- 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); */ /* eg: @include visibility-backface(hidden); */ /*------------------------------------------------------------------ [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 { position: relative; 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; right: -15px; width: 9px; height: 2px; background: #f78166; 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: #f78166; text-shadow: none; } ::-webkit-selection { color: #fff; background: #f78166; text-shadow: none; } ::-moz-selection { color: #fff; background: #f78166; 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; left: 0; right: 0; bottom: 0; display: block; z-index: 3; text-decoration: none; } /*------------------------------------------------------------------ [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-icon { position: relative; top: 1px; margin-right: 10px; } .btn-white-bg { color: #515769; background: #fff; border-color: transparent; border-width: 0; } .btn-white-bg:hover, .btn-white-bg:focus, .btn-white-bg.focus { color: #fff; background: #f78166; border-color: transparent; } .btn-white-brd { color: #fff; background: transparent; border-color: #fff; border-width: 2px; } .btn-white-brd:hover, .btn-white-brd:focus, .btn-white-brd.focus { color: #515769; background: #fff; border-color: #fff; } .btn-default-bg { color: #515769; background: #f3f4f5; border-color: transparent; border-width: 0; } .btn-default-bg:hover, .btn-default-bg:focus, .btn-default-bg.focus { color: #fff; background: #f78166; border-color: transparent; } .btn-theme-sm { font-size: 13px; font-weight: 600; padding: 15px 40px; } .btn-theme-md { font-size: 15px; font-weight: 600; padding: 20px 30px; } /*------------------------------------------------------------------ [Progress Bar] ------------------------------------------------------------------*/ .progress-box .progress { box-shadow: none; height: 3px; } .progress-box .progress-bar { transition-duration: 2000ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Social Icons] ------------------------------------------------------------------*/ .social-icons { display: inline-block; width: 40px; height: 40px; font-size: 16px; color: #fff; text-align: center; border-radius: 50%; vertical-align: middle; padding: 11px; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .social-icons:hover { color: #515769; background: #fff; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Promo Block] ------------------------------------------------------------------*/ .promo-block { padding: 220px 0 130px; } .promo-block .promo-block-title { font-size: 70px; color: #fff; line-height: 1; } @media (max-width: 480px) { .promo-block .promo-block-title { font-size: 50px; } } .promo-block .promo-block-text { font-size: 25px; color: #fff; } .promo-block .promo-block-divider { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 20px; margin-bottom: 35px; } /*------------------------------------------------------------------ [Service] ------------------------------------------------------------------*/ .service { background: #fff; padding: 30px; } .service .service-element, .service .service-info { -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); } .service .service-icon { display: block; font-size: 30px; color: #999caa; margin-bottom: 30px; } .service:hover .service-element { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .service:hover .service-info { -webkit-transform: translate3d(0, -30%, 0); -moz-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /*------------------------------------------------------------------ [Work] ------------------------------------------------------------------*/ /* Overlay */ .work { position: relative; display: block; } .work .work-overlay { position: relative; cursor: pointer; } .work .work-overlay:before { position: absolute; top: 0; left: 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: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); } /* Popup */ .work .work-popup-overlay { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 99999; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow-x: hidden; background: rgba(81, 87, 105, 0.4); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work .work-popup-overlay-show { opacity: 1; visibility: visible; -webkit-backface-visibility: visible; backface-visibility: visible; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work .work-popup-content { position: absolute; top: 50%; left: 0; right: 0; width: 730px; height: auto; display: block; background: #fff; padding: 30px; margin: 0 auto; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .work .work-popup-content-divider { border-right: 1px solid #cdcecf; } @media (max-width: 768px) { .work .work-popup-content { width: 95%; } .work .work-popup-content-divider { border-right: none; border-bottom: 1px solid #cdcecf; } } .work .work-popup-close { float: right; font-size: 13px; font-weight: 700; color: #c5c6cb; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .work .work-popup-close:hover { color: #aaacb3; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* Tag */ .work .work-popup-tag { margin: 0; } .work .work-popup-tag-item { padding: 0 2px; } .work .work-popup-tag-link { font-size: 13px; } /*------------------------------------------------------------------ [Footer] ------------------------------------------------------------------*/ .footer .footer-logo { width: 64px; height: auto; } /*------------------------------------------------------------------ [Header] ------------------------------------------------------------------*/ /* Fixed Top */ .navbar-fixed-top .navbar-collapse { max-height: 100%; } /* Navbar */ .header .navbar { margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* 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; left: 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: #f78166; 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: #f78166; 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 .logo { width: 100px; height: 100px; float: left; max-height: 95px; line-height: 65px; } .header .logo-wrap { display: inline-block; padding: 15px 0; } .header .logo-wrap:focus, .header .logo-wrap:hover { text-decoration: none; } .header .logo-img { display: inline-block; width: 127px; height: auto; max-width: 100%; max-height: 100%; vertical-align: middle; } .header .logo-img-main { display: inline-block; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .logo-img-active { display: none; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* Navbar */ .header .navbar-nav { padding-left: 0; margin-bottom: 0; list-style: none; } /* Nav */ .header .nav-item { position: relative; display: block; } .header .nav-item:last-child .nav-item-child { padding-right: 0; } .header .nav-item.active .nav-item-hover:after { opacity: 1; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .nav-item:hover .nav-item-hover:after { opacity: 1; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .nav-item-child { position: relative; display: block; font-size: 13px; font-weight: 600; font-family: Hind, sans-serif; color: #fff; text-transform: uppercase; line-height: 55px; padding: 20px; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .header .nav-item-child:hover, .header .nav-item-child:focus { background: inherit; } .header .nav-item-hover { position: relative; } .header .nav-item-hover:after { position: absolute; top: 45px; left: 0; width: 9px; height: 2px; background: #f78166; opacity: 0; content: " "; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* 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 { background: #fff; } .header .navbar-toggle { display: block; } .header .navbar-collapse.collapse { display: none !important; } .header .navbar-collapse.collapse.in { display: block !important; } .header .nav-collapse { padding-left: 0; padding-right: 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; } /* Logo */ .header .logo .logo-img-main { display: none; } .header .logo .logo-img-active { display: inline-block; } /* Navbar Nav */ .header .nav-item-child { color: #515769; line-height: 1.4; padding: 12px 12px 12px 15px; } .header .nav-item-hover:after { position: absolute; top: 19px; } } /* Media Queries below 767px */ @media (max-width: 767px) { /* Menu Container */ .header .menu-container { padding-left: 15px; padding-right: 15px; margin-left: 0; margin-right: 0; } .header .navbar > .container { width: auto; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .header .navbar > .container > .nav-collapse { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } } /* Media Queries above 992px */ @media (min-width: 992px) { /* Navbar */ .header .navbar-nav-right { float: right; } } /* Page On Scroll */ @media (min-width: 992px) { .page-on-scroll .header .navbar { background: #fff; border-bottom-color: #f0f0f0; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .page-on-scroll .header .logo-img-main { display: none; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .page-on-scroll .header .logo-img-active { display: inline-block; transition-duration: 400ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .page-on-scroll .header .nav-item-child { color: #515769; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } } /*-------------------------------------------------- [Back To Top Theme Button] ----------------------------------------------------*/ .back-to-top { position: fixed; right: 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-left: 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; } /*------------------------------------------------------------------ [Text Colors] ------------------------------------------------------------------*/ .color-base { color: #f78166 !important; } .color-white { color: #fff !important; } .color-heading { color: #515769 !important; } .color-subtitle { color: #a6a7aa !important; } .color-link { color: #81848f !important; } .color-link-hover { color: #999caa !important; } .color-sky-light { color: #fafafa !important; } /*------------------------------------------------------------------ [Background Colors] ------------------------------------------------------------------*/ .bg-color-base { background: #f78166 !important; } .bg-color-white { background: #fff !important; } .bg-color-heading { background: #515769 !important; } .bg-color-subtitle { background: #a6a7aa !important; } .bg-color-link { background: #81848f !important; } .bg-color-link-hover { background: #999caa !important; } .bg-color-sky-light { background: #fafafa !important; } /*------------------------------------------------------------------ [Row] ------------------------------------------------------------------*/ .row-space-2 { margin-right: -2px; margin-left: -2px; } .row-space-2 > [class*="col-"] { padding-left: 2px; padding-right: 2px; } /*-------------------------------------------------- [Container Full Width] ----------------------------------------------------*/ .container-full-width { margin-right: auto; margin-left: auto; } .container-full-width:before, .container-full-width:after { content: " "; display: table; } .container-full-width:after { clear: both; } /*-------------------------------------------------- [Container Small] ----------------------------------------------------*/ .container-sm { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .container-sm:before, .container-sm:after { content: " "; display: table; } .container-sm:after { clear: both; } /* Media Queries below 768px */ @media (min-width: 768px) { .container-sm { width: 750px; } } /* Media Queries below 1200px */ @media (min-width: 1200px) { .container-sm { width: 970px; } } /*------------------------------------------------------------------ [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; } /*------------------------------------------------------------------ [Full Width] ------------------------------------------------------------------*/ .full-width { width: 100%; height: auto; } /*-------------------------------------------------- [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-left: 0 !important; } .margin-l-5 { margin-left: 5px !important; } .margin-l-10 { margin-left: 10px !important; } .margin-l-20 { margin-left: 20px !important; } /*------------------------------------------------------------------ [Right margin] ------------------------------------------------------------------*/ .margin-r-0 { margin-right: 0 !important; } .margin-r-5 { margin-right: 5px !important; } .margin-r-10 { margin-right: 10px !important; } .margin-r-20 { margin-right: 20px !important; } /*------------------------------------------------------------------ [Top margin] ------------------------------------------------------------------*/ .margin-t-0 { margin-top: 0 !important; } .margin-t-5 { margin-top: 5px !important; } .margin-t-10 { margin-top: 10px !important; } .margin-t-20 { margin-top: 20px !important; } .margin-t-30 { margin-top: 30px !important; } .margin-t-40 { margin-top: 40px !important; } .margin-t-50 { margin-top: 50px !important; } .margin-t-60 { margin-top: 60px !important; } /*------------------------------------------------------------------ [Bottom margin] ------------------------------------------------------------------*/ .margin-b-0 { margin-bottom: 0 !important; } .margin-b-4 { margin-bottom: 4px !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-4 { margin-bottom: 4px !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-4 { margin-bottom: 4px !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-4 { margin-bottom: 4px !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; } .height-400 { height: 400px !important; } .height-500 { height: 500px !important; } /*------------------------------------------------------------------ [Top margin below 992px] ------------------------------------------------------------------*/ @media (max-width: 992px) { .md-text-center { text-align: center; } .md-text-left { text-align: left; } .md-text-right { text-align: right; } } /*------------------------------------------------------------------ [Top margin below 768px] ------------------------------------------------------------------*/ @media (max-width: 768px) { .sm-text-center { text-align: center; } .sm-text-left { text-align: left; } .sm-text-right { text-align: right; } } /*------------------------------------------------------------------ [Top margin below 480px] ------------------------------------------------------------------*/ @media (max-width: 480px) { .xs-text-center { text-align: center; } .xs-text-left { text-align: left; } .xs-text-right { text-align: right; } }