@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'; /** * CSS @imports must be at the top of the file. * Add them above this section. */ /*//////////////////////////////////// /////////// Hubl Variables//////////// ////////////////////////////////////*/ /** * 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 */ /*//////////////////////////////////// /////////// 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: Open Sans, sans-serif; color: #403f3f; font-size: 16px; font-weight: 300; } /** * Heading styles */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-family: Open Sans, sans-serif; font-style: normal; font-weight: 700; line-height: 1.1; color: #403f3f; text-transform: none; letter-spacing: normal; margin: 0; } h1{ font-size: 58px; font-weight: 800; letter-spacing: 0.05em; line-height: 70px; } h2{ font-size: 32px; font-weight: 400; color: #a00025; line-height: 42px; } h3{ font-size: 22px; font-weight: 300; line-height: 30px; } h3.cherry{ color: #9b002d; } h4{ font-size: 20px; font-weight: 300; letter-spacing: 0.05em; line-height: 27px; } h5{ font-size: 18px; font-weight: 400; letter-spacing: 0.025em; line-height: 22px; color: #515151; } h6{ font-size: 14px; font-weight: 600; line-height: 20px; color: #5b5b5b; } /* Links */ a{ color: #fcb037; text-decoration: none; outline: 0; } a:hover{ color: #ffe269; outline: 0 !important; text-decoration: none !important; } a:visited, a:focus, a:active { text-decoration: none !important; outline: 0 !important; } img{ max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: bottom; } /* Font sizes */ .font-small{ font-size: 12px; } .font-normal{ font-size: 16px; } .font-medium{ font-size: 20px; } .font-large{ font-size: 24px; } /*///////////////////////////// /////////// Buttons//////////// /////////////////////////////*/ .btn{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Open Sans, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 5px; margin-right: 5px; transition: 0.3s ease all; position: relative; } .btn:active, .btn:focus{ outline: 0; } .btn-cherry{ color: #ffffff; background: #9b002d; font-size: 20px; line-height: 27px; padding-top: 15px; padding-right: 44px; padding-bottom: 15px; padding-left: 20px; } .btn-cherry:hover{ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); background: darken($color: #9b002d, $amount: 10.3); color: #ffffff; } .btn-cherry::before{ position: absolute; content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 800; font-style: normal; display: inline-block; right: 18px; color: #ffffff; } .btn-gold{ color: #ffffff; background: #fcb037; font-size: 20px; line-height: 27px; padding-top: 15px; padding-right: 20px; padding-bottom: 15px; padding-left: 20px; } .btn-gold:hover{ color: #fcb037; background: #ffffff; box-shadow: 0px 3px 6px rgba(0,0,0, 0.16); } /*//////////////////////////// /////////// Header//////////// ////////////////////////////*/ .site-header .navbar-default{ background: #ffffff; } .site-header .navbar{ min-height: 50px; border: 0 solid transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: 0; transition: 0.3s ease all; } .site-header .navbar.sticky .site-header-nav-top{ transform: translateY(-100%); } .site-header .navbar.sticky .site-header-nav .navbar-brand{ max-width: 280px; } .site-header .navbar.sticky .site-header-nav .navbar-nav{ margin-top: 17px; } .site-header .navbar.sticky{ box-shadow: 0px 3px 6px rgba(0,0,0,0.16); } /* Top Navbar Header */ .site-header-nav-top{ background: #ffffff; padding-top: 8px; padding-right: 0; padding-bottom: 8px; padding-left: 0; transition: 0.3s ease all; } .site-header-nav-top .navbar-nav li{ padding-left: 5px; border-right: 1px solid #f04141; } .site-header-nav-top .navbar-nav li a{ color: #9b002d; line-height: 15px; font-weight: 600; padding-top: 8px; padding-right: 30px; padding-bottom: 8px; padding-left: 30px; } .site-header-nav-top .navbar-nav li a.active, .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: #5b5b5b; background-color: none; text-decoration: none !important; } .site-header-nav-top .navbar-nav li:last-of-type{ border-right: none; } .site-header-nav-top .navbar-nav li:first-of-type>a{ font-weight: 400; padding-left: 22px; } .site-header-nav-top .navbar-nav li:first-of-type>a:before{ position: absolute; content: '\f095'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; display: inline-block; left: 0; transform: rotateY(-180deg); color: #9b002d; } .site-header-nav-top .navbar-nav li:first-of-type a.active, .site-header-nav-top .navbar-nav li:first-of-type a:active, .site-header-nav-top .navbar-nav li:first-of-type a:focus, .site-header-nav-top .navbar-nav li:first-of-type a:hover{ color: #5b5b5b; background-color: transparent; } /* Main Navigation Header */ .site-header-nav{ transition: 0.3s ease all; border-top: 2px solid #d8d8d8; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); } .site-header-nav .navbar-brand{ height: auto; padding-top: 20px; padding-right: 0; padding-bottom: 20px; padding-left: 0; max-width: 280px; transition: 0.3s ease all; } .site-header-nav .navbar-nav{ margin-top: 30px; transition: 0.3s ease all; } .site-header-nav .navbar-nav li a{ color: #333333; line-height: 24px; font-size: 16px; font-weight: 400; padding-top: 0; padding-right: 0; padding-bottom: 2px; padding-left: 0; cursor: pointer; } .site-header-nav .navbar-nav li a.active, .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: #9b002d; border-bottom: 1px solid #9b002d; } .site-header-nav .navbar-nav li.open a, .site-header-nav .navbar-nav li.open a:hover{ color: #9b002d; background: none; } .site-header-nav .navbar-nav li.dropdown.open a.dropdown-toggle{ color: #9b002d; border-bottom: 1px solid #9b002d; background: none; } .site-header-nav .navbar-nav li.active a{ color: #9b002d; border-bottom: 1px solid #9b002d; background: none; } .site-header-nav .navbar-nav li.active a.active, .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{ color: #9b002d; } .site-header-nav .navbar-nav .dropdown-menu{ left: 8px; border: 0; background: #ffffff; } .site-header-nav .navbar-nav .dropdown-menu li a{ color: #333333; font-size: 16px; font-weight: 400; line-height: 22px; } .site-header-nav .navbar-nav .dropdown-menu li a.active, .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: #9b002d; border: 0; background-color: #ffffff; } .site-header-nav .navbar-nav .dropdown-menu li.active a{ color: #9b002d; background: transparent; } .site-header-nav .navbar-nav .dropdown-menu li.active a.active, .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: #9b002d; background-color: none; } .site-header-nav .navbar-toggle{ background-color: none; margin-top: 18px; border: 0; } .site-header-nav .navbar-toggle .icon-bar{ background-color: #00153c; width: 28px; height: 5px; } /*/////////////////////////////////// /////////// 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: 400px; } .site-header-banner .text-col{ text-align: left; padding-top: 95px; padding-left: 0px; padding-bottom: 95px; } .site-header-banner h1{ color: #ffffff; font-size: 58px; margin-bottom: 16px; } .site-header-banner h3{ color: #ffffff; font-size: 22px; } .site-header-banner .text-col .banner-hr { width: 100%; max-width: 260px; height: 1px; background: #ffffff; margin: 16px 0 48px; } .site-header .site-header-nav .navbar-nav .dropdown-menu>li>a{ font-size: 16px; line-height: 22px; } .site-header .site-header-nav .navbar-nav .dropdown-menu>li>a:hover{ color: #9b002d; } /*//////////////////////////////// /////////// Inner Page//////////// ////////////////////////////////*/ .site-content{ padding-top: 96px; } .site-content .site-main{ background: #ffffff; background: -moz-linear-gradient(top, #fff 0%, #E9ECF4 100%); background: -webkit-linear-gradient(top, #fff 0%, #E9ECF4 100%); background: linear-gradient(to bottom, #fff 0%, #E9ECF4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); padding-bottom: 96px; } .site-content .section-marketing-main .left-col h2{ margin-bottom: 16px; font-weight:400; } .site-content .section-marketing-main .left-col h4{ font-weight:400; } .site-content .section-marketing-main .left-col h4 .fas{ color:#9b002d; } .site-content .section-marketing-main .left-col h3{ margin-bottom: 32px; } .site-content .section-marketing-main .right-col .marketing-form{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #afb5ba; background-color: #ffffff; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; } .site-content .section-marketing-main .right-col .marketing-form h3{ margin-bottom: 32px; } .marketing-form .hs-form-field{ margin-bottom: 18px; } .marketing-form input, .marketing-form textarea{ box-shadow: none; border: 1px solid #bbbbbb; } .marketing-form .hs-button{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; background: ; border: 1px solid ; font-family: Open Sans, sans-serif; font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: normal; text-transform: none; padding-top: 15px; padding-right: 20px; padding-bottom: 15px; padding-left: 20px; margin-top: 0; margin-right: 5px; margin-bottom: 5px; margin-left: 0; } .marketing-form .hs-button.active .marketing-form .hs-button:active, .marketing-form .hs-button:focus, .marketing-form .hs-button:hover{ outline: 0; color: #ffffff; background: ; border: 1px solid ; } /*//////////////////////////// /////////// Blog////////////// ////////////////////////////*/ .content-area-blog .post-item{ float: left; margin-bottom: 64px; } .content-area-blog .post-item .featured-image{ background-size: contain; background-repeat: no-repeat; min-height: 121px; } .content-area-blog .post-item .entry-header .entry-title{ font-size: 20px; font-weight: 400; letter-spacing: 0.05em; line-height: 27px; } .content-area-blog .post-item .entry-header .entry-title a{ color: #403f3f; } .content-area-blog .post-item .entry-header .entry-title a:hover{ color: #9b002d; } .content-area-blog .post-item .entry-header .entry-meta{ color: #9b002d; font-weight: 300; text-transform: uppercase; margin-top: 6px; margin-bottom: 24px; } .content-area-blog .post-item .entry-header .entry-meta a{ color: #9b002d; } .content-area-blog .post-item .entry-content .more-link{ color: #00153c; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; } .content-area-blog .post-item .entry-content .more-link:hover{ color: #5b5b5b; } .content-area-blog .post-item .post-footer{ margin-top: 54px; } .content-area-blog .post-item .backto-blog{ color: #00153c; font-size: 14px; font-weight: 700; text-transform: uppercase; } .content-area-blog .post-item .backto-blog:hover{ color: #9b002d; } .content-area-blog .post-item .post-author{ margin-top: 64px; } .content-area-blog .post-item .post-author h3{ margin-bottom: 24px; } .content-area-blog .post-item .post-author h3 a{ color: #9b002d; text-decoration: underline; } .content-area-blog .post-item .post-author h3 a:hover{ color: #403f3f; } .content-area-blog .post-item.featured{ background-size: cover; background-repeat: no-repeat; position: relative; margin-top: 0; margin-right: 15px; margin-bottom: 97px; margin-left: 15px; position: relative; } .content-area-blog .post-item.featured .featured-image::before{ position: absolute; content: ''; width: 100%; height: 100%; left: 0; background: rgba(155, 0, 45, 0.65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(155, 0, 45, 0.65) 0%, rgba(249, 171, 55, 0.65) 65%, rgba(252, 176, 55, 0.58) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(155, 0, 45, 0.65) 0%,rgba(249, 171, 55, 0.65) 65%,rgba(252, 176, 55, 0.58) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(155, 0, 45, 0.65) 0%,rgba(249, 171, 55, 0.65) 65%,rgba(252, 176, 55, 0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b002d', endColorstr='#fcb037',GradientType=1 ); /* IE6-9 */ } .content-area-blog .post-item.featured .featured-image{ background-size: cover !important; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; } .content-area-blog .post-item.featured h3 { color: #fff; margin-top: 32px; margin-bottom: 32px; } .content-area-blog .post-item.featured .post-text{ padding-left: 32px; padding-right: 32px; } .content-area-blog .post-item.featured .post-text h4 a{ color: #ffffff; font-size: 32px; font-weight: 400; line-height: 42px; } .content-area-blog .post-item.featured .post-text h4 a:hover{ color: #ffffff; } .content-area-blog .post-item.featured .entry-meta{ color: #ffffff; margin-top: 8px; margin-bottom: 24px; } .content-area-blog .post-item.featured .entry-meta a{ color: #ffffff; } .content-area-blog .post-item.featured .entry-content{ color: #ffffff; } .content-area-blog .post-item.featured .entry-content .more-link{ color: #ffffff; text-transform: uppercase; margin-top: 32px; margin-bottom: 32px; display: block; } .content-area-blog .post-item.featured .entry-content .more-link:hover{ color: #FCB037; } /* widget */ .widget-get-quote{ color: #ffffff; background: url("https://cdn2.hubspot.net/hubfs/4316965/riskfree-bg.jpg"); background-repeat: no-repeat; background-size: cover; text-align: center; padding-top: 28px; padding-right: 40px; padding-bottom: 39px; padding-left: 40px; margin-top: 64px; } .widget-get-quote h2{ color: #ffffff; font-weight: 400; text-transform: uppercase; margin-bottom: 16px; } .widget-get-quote .btn-gold{ margin-top: 16px; margin-right: 0; margin-bottom: 0; margin-left: 0; } .categories{ border-left: 1px solid #707070; padding-left: 17px; } .categories h3{ text-transform: uppercase; padding-top: 32px; padding-bottom: 32px; } .categories .widget-module ul{ padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 30px; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; list-style: none; } .categories .widget-module ul li{ padding-bottom: 32px; position: relative; } .categories .widget-module ul li .filter-link-count{ display: none; } .categories .widget-module ul li::before{ content: '\f105'; color: #9b002d; font-family: 'Font Awesome 5 Free'; font-size: 20px; font-weight: 800; position: absolute; left: -30px; } .categories .widget-module ul li a{ color: #9b002d; font-size: 20px; font-weight: 400; } .categories .widget-module ul li a:hover{ color: #403f3f; } .recent-posts{ border-left: 1px solid #707070; padding-left: 17px; } .recent-posts h3{ text-transform: uppercase; padding-top: 32px; padding-bottom: 32px; } .recent-posts .widget-module ul{ padding: 0; margin: 0; list-style: none; } .recent-posts .widget-module ul li{ padding-bottom: 32px; } .recent-posts .widget-module ul li a{ color: #403f3f; } .recent-posts .widget-module ul li a:hover{ color: #9b002d; } /*//////////////////////////// /////////// Footer//////////// ////////////////////////////*/ .site-footer{ background: #333333; padding-top: 64px; } .site-footer .site-footer-info{ color: #ffffff; font-size: 14px;; } .site-footer .site-footer-info address p { color: #ffffff; font-size: 14px; line-height: 22px; letter-spacing: 0.075em; } .site-footer .site-footer-info h5{ color: #ffffff; font-weight: 600; text-transform: uppercase; } .site-footer .site-footer-info .column1 ul{ padding: 0; margin: 0; } .site-footer .site-footer-info .column1 ul li{ list-style: none; letter-spacing: 0.075em; margin-bottom:8px; } .site-footer .site-footer-info .column1 ul li a{ color: #fcb037; } .site-footer .site-footer-info .column1 ul li a:hover{ text-decoration: underline; } .site-footer .site-footer-info .column2 ul{ padding: 0; margin: 0; } .site-footer .site-footer-info .column2 ul li{ list-style: none; display: inline-block; margin-right: 30px; margin-bottom: 18px; } .site-footer .site-footer-info .column2 ul li.last{ margin-right: 0; } .site-footer .site-footer-info .column2 ul li a{ color: #ffffff; } .site-footer .site-footer-info .column2 ul li a:hover{ color: #fcb037; } .site-footer .site-footer-info .column3 ul{ padding: 0; margin: 0; } .site-footer .site-footer-info .column3 ul li{ list-style: none; margin-bottom: 8px; } .site-footer .site-footer-info .column3 ul li a{ color: #ffffff; font-size: 14px; letter-spacing: 0.075em; } .site-footer .site-footer-info .column3 ul li a:hover{ color: #fcb037; text-decoration: none; } .site-footer .site-footer-info .column4 ul{ padding: 0; margin: 0; } .site-footer .site-footer-info .column4 ul li{ list-style: none; padding-right: 30px; margin-bottom: 8px; max-width: 226px; width: 100%; position: relative; } .site-footer .site-footer-info .column4 ul li a{ color: #ffffff; font-size: 18px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; } .site-footer .site-footer-info .column4 ul li a:hover{ color: #fcb037; text-decoration: none; } .site-footer .site-footer-info .column4 ul li a:after{ position: absolute; content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; display: inline-block; right: 0px; color: #ffffff; } .site-footer .site-footer-info h5{ margin-bottom: 16px; } .site-footer .site-footer-disclaimer{ color: #ffffff; font-size: 14px; padding-top: 32px; padding-bottom: 15px; } .site-footer .site-footer-disclaimer .border-top{ border-top: 1px solid #ffffff; padding-top: 8px; padding-bottom:32px; } .site-footer .site-footer-disclaimer ul{ padding: 0; margin: 0; } .site-footer .site-footer-disclaimer ul li{ list-style: none; display: inline-block; } /* .site-footer .site-footer-disclaimer ul li:after{ content: ' |'; } */ .site-footer .site-footer-disclaimer ul li:first-of-type { border-right: 1px solid #ffffff; } .site-footer .site-footer-disclaimer img { float: left; padding: 15px 0px; font-size: 18px; line-height: 20px; } .site-footer .site-footer-disclaimer ul li a{ color: #ffffff; padding: 0 8px; font-size: 14px; letter-spacing: 0.075em; line-height: 19px; } /*======= Bootstrap 3 Media Queries =======*/ /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ /* min-width : 320px */ @media only screen and (min-width : 320px){ .site-header-banner .site-header-text{ padding-top: 82px; } .site-header-nav-top{ display: none; } .site-header .site-header-banner { margin-top: 0px; background-position: top center; } .site-footer .site-footer-disclaimer ul li { display: inline-block; } } /* 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){ .site-footer .site-footer-disclaimer ul{ text-align:right; } } /* Medium Devices, Desktops */ /* min-width : 992px */ @media only screen and (min-width : 992px){ } /* Large Devices, Wide Screens */ /* min-width : 1200px */ @media only screen and (min-width : 1200px){ .navbar.sticky{ transform: translateY(-47px); } .dropdown:hover .dropdown-menu{ display: block; margin-top: 0; /* remove the gap so it doesn't close */ } .dropdown-menu{ box-shadow: 0px 5px 6px rgba(0,0,0,0.19); } .site-header-nav-top{ display: block; } .site-header-nav .navbar-header{ max-width: 24vw; } .site-header-nav .navbar-nav{ margin-top: 18px; } .site-header-nav .navbar-nav li{ padding: 10px 0.7vw; } .site-header-nav .navbar-nav li:last-child{ padding-right: 30px; } .site-header-banner .site-header-text{ padding-top: 153px; } .site-footer .site-footer-info .column4 ul li{ text-align:right; } } @media screen and (min-width: 1600px){ .site-header-nav .navbar-brand{ max-width: 100%; } .site-header-nav .navbar-nav { margin-top: 28px; } .site-header-nav .navbar-nav li{ padding: 10px 25px; } .site-header .site-header-nav .navbar-nav .dropdown-menu { left: 25px; } } /*======= Bootstrap 3 Media Queries =======*/ /*======== Non-Mobile First Method ========*/ @media only screen and (max-width : 767px){ .site-header-nav .navbar-header .navbar-brand{ max-width: 220px !important; padding-left: 15px; } .site-header .site-header-banner .text-col h1 { font-size: 35px; line-height: 50px; } } @media only screen and (max-width : 1200px){ .navbar-offcanvas .navbar-nav{ margin-left: 0; margin-right: 0; } .navbar-offcanvas .navbar-nav li{ margin-bottom: 16px; } .navbar-offcanvas .navbar-nav li.open a{ text-decoration: none; background: none; border-bottom: 0; background-color: transparent !important; } .navbar-offcanvas .navbar-nav li.open a:hover{ text-decoration: none; background: none; border-bottom: 0; } .navbar-offcanvas .navbar-nav li.open .dropdown-menu li{ margin-bottom: 0px; } .navbar-offcanvas .navbar-nav li.open .dropdown-menu li a{ font-size: 14px; } .navbar-offcanvas .navbar-nav li.active a{ border-bottom: 0px; } .navbar-offcanvas .navbar-nav li a{ font-size: 16px; line-height: 22px; } .navbar-offcanvas .navbar-nav li a:hover{ border: 0; } .navbar-offcanvas .mobile-separator{ width: 100%; height: 1px; background: #333333; } .navbar-offcanvas .mobile-top-nav{ margin-top: 22px; } .navbar-offcanvas .mobile-top-nav li a{ color: #9b002d; font-weight: 600; } .navbar-offcanvas .mobile-top-nav li a:hover{ color: #5b5b5b; text-decoration: none; border: 0px; } .navbar-offcanvas .mobile-top-nav li:first-of-type a{ font-weight: 400; position: relative; padding-left: 22px; } .navbar-offcanvas .mobile-top-nav li:first-of-type a:before{ position: absolute; content: '\f095'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-style: normal; display: inline-block; left: 0; transform: rotateY(-180deg); color: #9b002d; } .navbar-offcanvas .mobile-top-nav li:first-of-type a:hover{ color: #5b5b5b; text-decoration: none; border: 0; } .navbar-offcanvas .mobile-top-nav li:first-of-type a:hover:before{ color: #5b5b5b; } } @media only 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; } .offcanvas-stop-scrolling{ height: 1%; overflow: visible; } .navbar-default .navbar-offcanvas{ background-color: #ffffff; } .navbar-offcanvas{ position: fixed; width: 100%; max-width: 335px; height: 100%; left: -300px; top: 0; padding-top: 0; padding-left: 15px; padding-right: 15px; z-index: 999; overflow: none; -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(335px); transform: translateX(335px); } .navbar-offcanvas.offcanvas-position.in{ left: 0; } .navbar-offcanvas.navbar-offcanvas-right{ left: auto; right: -335px; } .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in{ -webkit-transform: translateX(-335px); transform: translateX(-335px); } .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; } }