@import 'https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800'; /** * CSS @imports must be at the top of the file. * Add them above this section. */ /*//////////////////////////////////// /////////// Hubl Variables//////////// ////////////////////////////////////*/ /** * Colors */ /* Brand colors */ /** * Scaffolding */ /* Background color for '' */ /* Global text color for '' */ /* Global textual link color */ /* Link hover color set via `darken()` function */ /* Link hover decoration */ /** * Typography */ /* Font weights */ /* By default, this inherits from the '' */ /** * Media Queries */ /* Custom, iPhone Retina */ /* Extra Small Devices, Phones */ /* Small Devices, Tablets */ /* Medium Devices, Desktops */ /* Large Devices, Wide Screens */ /* Large Devices, Wide Screens */ /*//////////////////////////////////// /////////// Resets and Base/////////// ////////////////////////////////////*/ /* Ensure no horizontal scroll */ html, body{ overflow-x: hidden; } /* Smoother fonts */ body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-family: Raleway, sans-serif; color: #333333; font-size: 16px; line-height: 24px; letter-spacing: 0.050em; font-weight: 400; } /** * Heading styles */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-family: ; font-style: normal; font-weight: 600; line-height: normal; color: #163565; text-transform: none; letter-spacing: normal; margin: 0; } h1{ font-size: 48px; } h2{ font-size: 40px; } h3{ font-size: 32px; } h4{ font-size: 24px; } h5{ font-size: 18px; } h6{ font-size: 16px; } /* Links */ a, a:hover, a:focus{ color: #2d83e9; text-decoration: ; outline: 0; } /* Colors */ .corn{ color: #e7b000; } .pirategold{ color: #b98d00; } .oldgold{ color: #d6ba43; } /* Font sizes */ .font-small{ font-size: 12px; } .font-normal{ font-size: 16px; } .font-medium{ font-size: 20px; } .font-large{ font-size: 24px; } /* Fix font */ .numeral{ font-family: Nunito, Raleway, sans-serif; } /*///////////////////////////// /////////// Buttons//////////// /////////////////////////////*/ /** * Button styles */ .btn{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: Raleway, sans-serif; font-weight: 400; line-height: normal; letter-spacing: normal; text-transform: uppercase; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; margin-bottom: 5px; margin-right: 5px; } .btn.active .btn:active, .btn:focus, .btn:hover{ outline: 0; } .btn-primary{ color: #ffffff; background: #2d83e9; border-color: #2d83e9; } .btn-primary.active .btn-primary:active, .btn-primary:focus, .btn-primary:hover{ color: #ffffff; background: transparent; border: 1px solid #ffffff; } .btn-gold{ color: #ffffff; background: #e7b000; border: #e7b000; } .btn-gold.active, .btn-gold:active, .btn-gold:focus, .btn-gold:hover{ color: #ffffff; background: #e7b000; border: #e7b000; } /*//////////////////////////// /////////// Header//////////// ////////////////////////////*/ .site-header .navbar{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0 solid transparent; min-height: 50px; margin-bottom: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .site-header .navbar.navbar-default{ background: #ffffff; } .site-header .navbar.sticky .site-header-nav{ -webkit-box-shadow: -10px 3px 6px rgba(0, 0, 0, .1); -moz-box-shadow: -10px 3px 6px rgba(0, 0, 0, .1); box-shadow: -10px 3px 6px rgba(0, 0, 0, .1); } .site-header .navbar.sticky .site-header-nav-top{ /*display: none;*/ } /* site-header-nav-top - Top Navigation */ .site-header-nav-top{ display: none; transition: all .6s ease; } .site-header-nav-top .navbar-nav{ margin: 0; font-size: 0; } .site-header-nav-top .navbar-nav li{ border-left-width: 1px; border-left-style: solid; border-left-color: #e2e6ea; float: none; display: inline-block; } .site-header-nav-top .navbar-nav li a{ color: #163565; font-size: 13px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; background: transparent; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; } .site-header-nav-top .navbar-nav li a:active, .site-header-nav-top .navbar-nav li a:focus, .site-header-nav-top .navbar-nav li a:hover{ color: #2d83e9; background: transparent; border: 0; } .site-header-nav-top .navbar-nav li.phone a{ color: #e7b000; font-weight: 700; } .site-header-nav-top .navbar-nav li.phone a:active, .site-header-nav-top .navbar-nav li.phone a:focus, .site-header-nav-top .navbar-nav li.phone a:hover{ color: #b98d00; } .site-header-nav-top .navbar-nav li.open-account a{ color: #ffffff; background: #e7b000; } .site-header-nav-top .navbar-nav li.open-account a:active, .site-header-nav-top .navbar-nav li.open-account a:focus, .site-header-nav-top .navbar-nav li.open-account a:hover{ color: #ffffff; background: #b98d00; } .site-header-nav-top .navbar-nav .dropdown-menu{ left: auto; right: -1px; } /* site-header-nav - Main Navigation - Main Menu */ .site-header-nav{ padding-top: 10px; padding-right: 0; padding-bottom: 10px; padding-left: 0; } .site-header-nav .navbar-header{ padding: 0; } .site-header-nav .navbar-header .navbar-brand{ height: auto; width: 225px; padding-top: 5px; padding-right: 0; padding-bottom: 0; padding-left: 5px; } .site-header-nav .navbar-nav{ margin: 0; } .site-header-nav .navbar-nav li a{ color: #163565; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: uppercase; background: transparent; } .site-header-nav .navbar-nav li a:active, .site-header-nav .navbar-nav li a:focus, .site-header-nav .navbar-nav li a:hover{ color: #163565; background: transparent; text-decoration: underline; } .site-header-nav .navbar-nav li.active a{ background: transparent; text-decoration: underline; } .site-header-nav .navbar-nav li.active a:active, .site-header-nav .navbar-nav li.active a:focus, .site-header-nav .navbar-nav li.active a:hover{ background: transparent; text-decoration: underline; } .site-header-nav .navbar-nav li.dropdown.open a.dropdown-toggle{ color: #163565; } .site-header-nav .navbar-nav li.dropdown a.dropdown-toggle{ background: transparent; } .site-header-nav .navbar-nav .dropdown-menu{ display: none; left: inherit; right: inherit; } .site-header-nav .navbar-nav .dropdown-menu.shown{ display: block; } .site-header-nav .navbar-nav .dropdown-menu li a{ color: #163565; font-size: 14px; letter-spacing: .05em; text-transform: none; padding: 3px 20px; } .site-header-nav .navbar-nav .dropdown-menu li a:active, .site-header-nav .navbar-nav .dropdown-menu li a:focus, .site-header-nav .navbar-nav .dropdown-menu li a:hover{ color: #163565; text-decoration: none; background-color: #f5f5f5; } .site-header-nav .navbar-nav .dropdown-menu li.active a{ color: #ffffff; background-color: #163565; } .site-header-nav .navbar-nav .dropdown-menu li.active a:active, .site-header-nav .navbar-nav .dropdown-menu li.active a:focus, .site-header-nav .navbar-nav .dropdown-menu li.active a:hover{ color: #ffffff; background-color: #163565; } .site-header-nav .navbar-toggle{ border-color: #163565; background: transparent; } .site-header-nav .navbar-toggle .icon-bar{ background-color: #163565; } /*/////////////////////////////////// /////////// Header Banner//////////// ///////////////////////////////////*/ .site-header-banner{ background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; position: relative; min-height: 300px; padding-top: 70px; } .site-header-banner .text-col{ text-align: left; padding-top: 32px; padding-right: 0; padding-bottom: 32px; padding-left: 15px; margin-top: 64px; margin-bottom: 64px; } .site-header-banner h1{ color: #ffffff; font-family: Raleway, sans-serif; font-size: 48px; font-weight: 800; letter-spacing: 0.050em; text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.16); margin-bottom: 32px; position: relative; } .site-header-banner h3{ color: #ffffff; font-family: Raleway, sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 0.050em; line-height: 48px; } /*//////////////////////////////// /////////// Inner Page//////////// ////////////////////////////////*/ .site-content{ padding-top: 96px; padding-bottom: 96px; } .post-listing.col-md-6:nth-child(2n+1){ clear: left; } .post-item{ background: #ffffff; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.08); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.08); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.08); margin-bottom: 32px; min-height: 450px; } .post-item .featured-image img{ width: 100%; margin: auto; display: block; object-fit: cover; } .post-item .post-body{ padding-top: 18px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px; } .post-item .post-title h6{ color: #5A5757; font-size: 13px; font-weight: 400; margin-bottom: 10px; } .post-item .post-title h5{ margin-bottom: 18px; } .post-item .post-title h5 a{ color: #030303; font-weight: 600; line-height: 28px; letter-spacing: 0.050em; } .post-item .post-title h5 a:hover{ text-decoration: none; color: #2d83e9; } .post-item .post-content{ margin-bottom: 18px; } .recent-posts{ margin-bottom: 32px; } .recent-posts h3{ font-size: 24px; font-weight: 600; margin-bottom: 18px; } .recent-posts ul{ padding: 0; margin: 0; list-style: none; } .recent-posts ul li{ margin-bottom: 5px; } .recent-posts ul li a{ color: #030303; font-weight: 600; line-height: 28px; letter-spacing: 0.050em; } .recent-posts ul li a:hover{ text-decoration: none; color: #2d83e9; } .categories{ margin-bottom: 32px; } .categories h3{ font-size: 24px; font-weight: 600; margin-bottom: 18px; } .categories ul{ padding: 0; margin: 0; list-style: none; } .categories ul li:before{ content: '\f111'; color: #030303; font-family: "Font Awesome 5 Free"; font-weight: 400; } .categories ul li a{ color: #030303; font-weight: 600; line-height: 28px; letter-spacing: 0.050em; } .categories ul li a:hover{ text-decoration: none; color: #2d83e9; } .categories ul li .filter-link-count{ display: none; } .blog-pagination{ margin-top: 32px; margin-bottom: 32px; } .section.post-header{ margin-bottom: 32px; } .section.post-body h1{ color: #030303; font-size: 32px; margin-bottom: 32px; } .section.post-body h6{ color: #5A5757; font-size: 16px; font-weight: 400; margin-bottom: 10px; } .section.post-footer{ margin-top: 32px; } .marketing-offer-banner{ margin-top: 32px; } .marketing-form{ font-size: 12px; background: #f8f8f9; padding-top: 32px; padding-right: 15px; padding-bottom: 32px; padding-left: 15px; } .marketing-form h3{ font-size: 24px; font-weight: 600; margin-bottom: 32px; } .marketing-form .hs-form-field{ margin-bottom: 5px; } .marketing-form input[type=text], .marketing-form input[type=email], .marketing-form input[type=tel], .marketing-form textarea{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #BEBEBE; background: #ffffff; box-shadow: none; box-sizing: border-box; padding-left: 15px; height: 30px; width: 100%; } .marketing-form input[type="checkbox"], .marketing-form input[type="radio"]{ margin-top: 0; margin-right: 10px; margin-bottom: 0; margin-left: 0; } .marketing-form textarea{ height: 100px; padding-top: 18px; width: 100%; resize: none; } .marketing-form label{ font-size: 12px; font-weight: 700; line-height: 16px; margin-bottom: 0; } .marketing-form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #BEBEBE; opacity: 1; /* Firefox */ } .marketing-form :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #BEBEBE; } .marketing-form ::-ms-input-placeholder { /* Microsoft Edge */ color: #BEBEBE; } .marketing-form .inputs-list{ padding: 0; margin: 0; list-style: none; } .marketing-form .inputs-list li{ margin-bottom: 0; } .marketing-form fieldset{ margin-bottom: 18px; max-width: none; } .marketing-form .hs-richtext{ margin-bottom: 18px; font-size: 12px; line-height: 16px; } .marketing-form .hs-form-required{ color: red; } .marketing-form .hs-error-msgs{ padding: 0; margin: 0; list-style: none; } .marketing-form .hs-error-msgs li{ color: red; font-size: 12px; } .marketing-form .hs-error-msgs li label{ display: block !important; text-align: left; } .marketing-form .hs-recaptcha{ margin-bottom: 18px; } .marketing-form .legal-consent-container label{ display: block !important; } .marketing-form .hs-submit{ margin-top: 18px; } .marketing-form .hs-button{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #ffffff; background: #e7b000; border: 1px solid #e7b000; font-family: Raleway, sans-serif; font-size: 16px; font-weight: 600; line-height: normal; letter-spacing: normal; text-transform: uppercase; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; margin-bottom: 0; margin-right: 0; } .marketing-form .hs-button:active, .marketing-form .hs-button:focus, .marketing-form .hs-button:hover{ outline: 0; color: #ffffff; background: #b98d00; border: 1px solid #b98d00; } /*//////////////////////////// /////////// Footer//////////// ////////////////////////////*/ .site-footer{ background-image: url("https://cdn2.hubspot.net/hubfs/3107949/section-footer.png"); background-repeat: no-repeat; background-size: cover; } .site-footer .site-footer-info{ color: #ffffff; font-size: 16px; } .site-footer .site-footer-info .footer-column1{ min-height: 300px; padding-top: 32px; padding-bottom: 32px; } .site-footer .site-footer-info .footer-column1 .logo{ margin-bottom: 32px; } .site-footer .site-footer-info .footer-column1 .logo img{ margin: auto; display: block; } .site-footer .site-footer-info .footer-column1 ul{ padding: 0; list-style: none; } .site-footer .site-footer-info .footer-column1 ul li{ text-align: center; padding-left: 0; margin-bottom: 18px; } .site-footer .site-footer-info .footer-column1 ul li a{ color: #ffffff; } .site-footer .site-footer-info .footer-column1 ul li a.numeral{ font-size: 15px; } .site-footer .site-footer-info .footer-column1 ul li a:active, .site-footer .site-footer-info .footer-column1 ul li a:focus, .site-footer .site-footer-info .footer-column1 ul li a:hover{ color: #e7b000; background: transparent; border: 0; } .site-footer .site-footer-info .footer-column1 ul li.email a:focus, .site-footer .site-footer-info .footer-column1 ul li.email a:hover{ text-decoration: underline; } .site-footer .site-footer-info .footer-column2 .footer-nav{ padding-left: 0; margin-bottom: 32px; list-style: none; } .site-footer .site-footer-info .footer-column2 .footer-nav li{ text-align: center; margin-bottom: 18px; } .site-footer .site-footer-info .footer-column2 .footer-nav li a{ color: #ffffff; font-size: 12px; font-weight: 700; text-transform: uppercase; background: transparent; padding: 0; } .site-footer .site-footer-info .footer-column2 .footer-nav li a:active, .site-footer .site-footer-info .footer-column2 .footer-nav li a:focus, .site-footer .site-footer-info .footer-column2 .footer-nav li a:hover{ color: #e7b000; background: transparent; } .site-footer .site-footer-info .footer-column2 .privacy, .site-footer .site-footer-info .footer-column2 .copyright, .site-footer .site-footer-info .footer-column2 .disclaimer{ text-align: center; } .site-footer .site-footer-info .footer-column2 .privacy a{ color: #ffffff; font-weight: 700; text-decoration: underline; } .site-footer .site-footer-info .footer-column2 .privacy a:active, .site-footer .site-footer-info .footer-column2 .privacy a:focus, .site-footer .site-footer-info .footer-column2 .privacy a:hover{ color: #ffffff; } .site-footer .site-footer-info .footer-column2 .social-links{ margin-top: 32px; text-align: center; } .site-footer .site-footer-info .footer-column2 .social-links ul{ display: inline-block; padding: 0; margin: 0; list-style: none; } .site-footer .site-footer-info .footer-column2 .social-links ul li{ display: inline; float: left; } .site-footer .site-footer-info .footer-column2 .social-links ul li a{ color: #ffffff; text-align: center; float: left; width: 36px; height: 36px; border: 1px solid #ffffff; border-radius: 100%; margin-right: 30px; margin-bottom: 15px; } .site-footer .site-footer-info .footer-column2 .social-links ul li a:focus, .site-footer .site-footer-info .footer-column2 .social-links ul li a:hover{ border-color: #e7b000; } .site-footer .site-footer-info .footer-column2 .social-links ul li a i{ font-size: 18px; line-height: 35px; color: #ffffff; } .site-footer .site-footer-info .footer-column2 .social-links ul li a:focus i, .site-footer .site-footer-info .footer-column2 .social-links ul li a:hover i{ color: #e7b000; } .site-footer .site-footer-info .footer-column2 .social-links ul li:last-child a{ margin-right: 0; } .site-footer .site-footer-bottom{ background-color: rgb(22, 53, 101,0.9); color: #ffffff; font-size: 16px; padding-top: 15px; padding-bottom: 15px; } .site-footer .site-footer-bottom p{ margin: 0; } .site-footer .site-footer-bottom .footer-bottom-nav{ list-style: none; padding-left: 0; margin-bottom: 0; } .site-footer .site-footer-bottom .footer-bottom-nav li{ text-align: center; margin-bottom: 18px; } .site-footer .site-footer-bottom .footer-bottom-nav li a{ color: #ffffff; font-size: 12px; font-weight: 700; text-transform: uppercase; background: transparent; padding: 0; } .site-footer .site-footer-bottom .footer-bottom-nav li a:active, .site-footer .site-footer-bottom .footer-bottom-nav li a:focus, .site-footer .site-footer-bottom .footer-bottom-nav li a:hover{ color: #e7b000; background: transparent; } /*======= Bootstrap 3 Media Queries =======*/ /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ /* min-width : 320px */ @media only screen and (min-width : 320px){ .navbar.sticky{ transform: translateY(0px); } .navbar.sticky .site-header-nav-top{ transform: translateY(-400%); } } /* Extra Small Devices, Phones */ /* min-width : 480px */ @media only screen and (min-width : 480px){ } /* Small Devices, Tablets */ /* min-width : 768px */ @media only screen and (min-width : 768px){ .navbar.sticky{ transform: translateY(-41px); } .site-header-nav-top{ display: inherit; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e2e6ea; } .site-header-nav .navbar-header .navbar-brand{ width: 300px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .site-header-nav .navbar-nav li a{ padding-top: 10px; padding-bottom: 10px; } .site-header-banner{ padding-top: 113px; } } /* Medium Devices, Desktops */ /* min-width : 992px */ @media only screen and (min-width : 992px){ .navbar.sticky .site-header-nav-top{ transform: translateY(-400%); } .site-header-nav .navbar-nav{ margin-top: 5px; margin-right: 0; margin-bottom: 5px; margin-left: 0; } .post-item .featured-image img{ height: 139px; max-height: 139px; } .site-footer .site-footer-info .footer-column1{ background: rgba(22, 53, 101, 0.9); padding-bottom: 64px; } .site-footer .site-footer-info .footer-column1 ul li{ text-align: left; padding-left: 42px; } .site-footer .site-footer-info .footer-column1 ul li.address{ background-image: url("https://cdn2.hubspot.net/hubfs/3107949/map-24x24.svg"); background-repeat: no-repeat; background-position: 0 5px; } .site-footer .site-footer-info .footer-column1 ul li.telephone{ background-image: url("https://cdn2.hubspot.net/hubfs/3107949/phone-24x24.svg"); background-repeat: no-repeat; background-position: 0 5px; } .site-footer .site-footer-info .footer-column1 ul li.email{ background-image: url("https://cdn2.hubspot.net/hubfs/3107949/mail-24x24.svg"); background-repeat: no-repeat; background-position: 0 0; } .site-footer .site-footer-info .footer-column2 .footer-nav{ display: inline-block; margin-top: 96px; } .site-footer .site-footer-info .footer-column2 .footer-nav li{ float: left; text-align: left; margin-right: 15px; margin-bottom: 0; } .site-footer .site-footer-info .footer-column2 .privacy, .site-footer .site-footer-info .footer-column2 .copyright, .site-footer .site-footer-info .footer-column2 .disclaimer{ text-align: left; } .site-footer .site-footer-info .footer-column2 .social-links{ text-align: left; } .site-footer .site-footer-bottom .footer-bottom-nav{ display: inline-block; float: right !important; } .site-footer .site-footer-bottom .footer-bottom-nav li{ float: left; text-align: left; margin-right: 15px; margin-bottom: 0; } } /* Large Devices, Wide Screens */ /* min-width : 1200px */ @media only screen and (min-width : 1200px){ .site-header-nav-top .navbar-nav li a{ padding-top: 10px; padding-right: 25px; padding-bottom: 10px; padding-left: 25px; } .post-item .featured-image img{ height: 172px; max-height: 172px; } } @media only screen and (min-width : 1200px){ .site-header-nav .navbar-nav li.open-account{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; color: #ffffff; background: #e7b000; border: #e7b000; font-family: Raleway, sans-serif; font-weight: 700; line-height: normal; letter-spacing: normal; text-transform: uppercase; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; margin-right: 0; margin-bottom: 0; } .site-header-nav .navbar-nav li.open-account:focus, .site-header-nav .navbar-nav li.open-account:hover{ background: #b98d00; } .site-header-nav .navbar-nav li.open-account a{ color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; padding: 0; } .site-header-nav .navbar-nav li.open-account a:focus, .site-header-nav .navbar-nav li.open-account a:hover{ color: #ffffff; text-decoration: none; } } @media screen and (max-width : 1200px){ .navbar-header{ float: none; } .navbar-toggle{ display: block; } .navbar-collapse{ border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top{ top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse{ display: none !important; } .navbar-nav{ float: none !important; margin-top: 7.5px; } .navbar-nav>li{ float: none; } .navbar-nav>li>a{ padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display: block !important; } } @media (max-width: 1200px){ .offcanvas-stop-scrolling{ height: 1%; overflow: visible; } .navbar-default .navbar-offcanvas{ background-color: #ffffff; } .navbar-offcanvas{ position: fixed; width: 100%; max-width: 300px; height: 100%; left: -300px; top: 0; padding-top: 20px; z-index: 9999; overflow: scroll; -webkit-overflow-scrolling: touch; transition: all 0.15s ease-in; } .navbar-offcanvas.in{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .navbar-offcanvas.navbar-offcanvas-fade{ opacity: 0; } .navbar-offcanvas.navbar-offcanvas-fade.in{ opacity: 1; } .navbar-offcanvas.offcanvas-transform.in{ -webkit-transform: translateX(300px); transform: translateX(300px); } .navbar-offcanvas.offcanvas-position.in{ left: 0; } .navbar-offcanvas.navbar-offcanvas-right{ left: auto; right: -300px; } .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in{ -webkit-transform: translateX(-300px); transform: translateX(-300px); } .navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in{ left: auto; right: 0; } .navbar-offcanvas .dropdown.open .caret{ border-top: 0; border-bottom: 4px solid; } .navbar-offcanvas .dropdown-menu{ position: relative; width: 100%; border: inherit; box-shadow: none; transition: height 0.15s ease-in; } .navbar-offcanvas .dropdown-menu.shown{ display: block; margin-bottom: 10px; } }