/* #ffec00 - yellow swapped to #b57ab4 - purple */ /********************************* OVERALL STYLING ************************************/ html{ font-family: 'Open Sans', sans-serif; color:#000; font-size:18px; } *{ outline: none; } .margin-auto{ margin: 0 auto; } body.home #main-wrapper { position: fixed !important; } .desktop-device p a:hover{ color: #BCCF02; } ul li{ font-size: 0.9rem; font-weight: 400; width: calc(100% - 20px); } iframe{ max-width: 100%; } /********************************* SITE COLOURS ************************************/ .font-white{color:#ffffff!important;} .desktop-device .font-white-hover:hover{color:#ffffff!important;} .bg-white{background-color:#ffffff!important;} .desktop-device .bg-white-hover:hover{background-color:#ffffff!important;} .font-dark-grey{color:#232323!important;} .desktop-device .font-dark-grey-hover:hover{color:#232323!important;} .bg-dark-grey{background-color:#232323!important;} .desktop-device .bg-dark-grey-hover:hover{background-color:#232323!important;} .font-green{color:#BCCF02;} .desktop-device .font-green-hover:hover{color:#BCCF02;} .bg-green{background-color:#BCCF02;} .desktop-device .bg-green-hover:hover{background-color:#BCCF02;} .font-yellow{color:#b57ab4;} .desktop-device .font-yellow-hover:hover{color:#b57ab4;} .bg-yellow{background-color:#b57ab4;} .desktop-device .bg-yellow-hover:hover{background-color:#b57ab4;} .font-purple{color:#9370b1;} .desktop-device .font-purple-hover:hover{color:#9370b1;} .bg-purple{background-color:#9370b1;} .desktop-device .bg-purple-hover:hover{background-color:#9370b1;} .font-blue{color:#0098d5;} .desktop-device .font-blue-hover:hover{color:#0098d5;} .bg-blue{background-color:#0098d5;} .desktop-device .bg-blue-hover:hover{background-color:#0098d5;} .font-green-darker{color:#22D2A7;} .desktop-device .font-green-darker-hover:hover{color:#22D2A7;} .bg-green-darker{background-color:#22D2A7;} .desktop-device .bg-green-darker:hover{background-color:#22D2A7;} .font-blue-dark{color:#11293D;} .desktop-device .font-blue-dark-hover:hover{color:#11293D;} .bg-blue-dark{background-color:#11293D;} .desktop-device .bg-blue-dark-hover:hover{background-color:#11293D;} .site-colour-Green .color-sitecolour{ color: #BCCF02; } .site-colour-Yellow .color-sitecolour{ color: #b57ab4; } .site-colour-Purple .color-sitecolour{ color: #9370b1; } .site-colour-Blue .color-sitecolour{ color: #0098d5; } .site-colour-Green .bg-color-sitecolour{ background-color: #BCCF02; } .site-colour-Yellow .bg-color-sitecolour{ background-color: #b57ab4; } .site-colour-Purple .bg-color-sitecolour{ background-color: #9370b1; } .site-colour-Blue .bg-color-sitecolour{ background-color: #0098d5; } .site-colour-Green .border-color-sitecolour{ border-color: #BCCF02; } .site-colour-Yellow .border-color-sitecolour{ border-color: #b57ab4; } .site-colour-Purple .border-color-sitecolour{ border-color: #9370b1; } .site-colour-Blue .border-color-sitecolour{ border-color: #0098d5; } .desktop-device.site-colour-Green .hover-color-sitecolour:hover{ color: #BCCF02!important; } .desktop-device.site-colour-Yellow .hover-color-sitecolour:hover{ color: #b57ab4!important; } .desktop-device.site-colour-Purple .hover-color-sitecolour:hover{ color: #9370b1!important; } .desktop-device.site-colour-Blue .hover-color-sitecolour:hover{ color: #0098d5!important; } .desktop-device.site-colour-Green .hover-bg-color-sitecolour:hover{ background-color: #BCCF02!important; } .desktop-device.site-colour-Yellow .hover-bg-color-sitecolour:hover{ background-color: #b57ab4!important; } .desktop-device.site-colour-Purple .hover-bg-color-sitecolour:hover{ background-color: #9370b1!important; } .desktop-device.site-colour-Blue .hover-bg-color-sitecolour:hover{ background-color: #0098d5!important; } .desktop-device.site-colour-Green .hover-border-color-sitecolour:hover{ border-color: #BCCF02!important; } .desktop-device.site-colour-Yellow .hover-border-color-sitecolour:hover{ border-color: #b57ab4!important; } .desktop-device.site-colour-Purple .hover-border-color-sitecolour:hover{ border-color: #9370b1!important; } .desktop-device.site-colour-Blue .hover-border-color-sitecolour:hover{ border-color: #0098d5!important; } /*********************** GENERAL STYLES FOR THIS WEBSITE ***********************/ /***** FONTS *****/ p{ font-size:0.9rem; font-weight:400; } a{ color:#000; } /***** FORMS *****/ .form-field{ padding-right:20px; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="password"], input[type="search"], textarea, select{ border:1px solid #67A8C5; font-size:0.9rem; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { border-color:#0FB3F0; outline: none; } form .required-field, form .sensitive-data{ font-size:0.85rem; } .wpcf7-form p{ width: 50%; font-size: 0.75rem; clear: left; margin-bottom: 10px; } .submit-form-button{ float:right; } .wpcf7-form input[type="submit"]{ float: right; margin: 0; padding:5px 10px; background-color: #fff; font-size: 1.1rem; } .form-relative{ width: 100%; float: left; position: relative; } .form-row span.wpcf7-form-control-wrap{ width: 100% !important; } .form-relative .form-row, .form-relative .form-row-textarea, .form-relative .form-row-checkbox, #commentform .form-row{ float: left; position: relative; width: 100%; /*overflow:hidden;*/ padding-bottom: 15px; } .form-relative .form-row .form-row-label, #commentform .form-row .form-row-label{ width: auto; position: absolute; top:10px; left:0px; color:#000; font-size:0.9rem; transition: top 0.5s, color 0.5s, font-size 0.5s; } .form-relative .active-row .form-row-label, #commentform .active-row .form-row-label{ top:-15px; color:#BCCF02; font-size:0.8rem; transition: top 0.5s, color 0.5s, font-size 0.5s; } .product-hero-right .form-relative .active-row .form-row-label, .product-hero-right #commentform .active-row .form-row-label{ color:#ffffff; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="password"], input[type="search"], textarea, select{ background-color: transparent; padding:9px 0px !important; border: none; } .wpcf7-form input[type="submit"]{ background-image: url('/wp-content/uploads/carbon/themes/bn/img/icons/cog-point.png'); margin: 0; float: right; height: 35px; padding: 0; padding-left: 40px; background-color: transparent; background-repeat: no-repeat; background-size: 27px; background-position: 0% 50%; overflow: hidden;} .wpcf7-form input[type="submit"]:focus{ outline:0; } .form-row label{ color: #000; font-size: 0.9rem; } .form-row .where-hear{ padding-top: 15px; } .form-row .where-hear span{ font-size: 0.9rem; } .form-row .where-hear .first{ margin-left: 0; } .form-line{ position: absolute; width: 100%; height: 1px; bottom: 35px; transition: width 1s; } .form-line-dull{ left: 0; background-color: #999; } .form-line-full{ width: 0%; background-color: #BCCF02; left: 0; z-index: 5000; } .active-row .form-line-full{ width: 100%; } .wpcf7-form .quote-explain{ width: 100%; margin-bottom: 50px; font-size: 0.9rem; } /*- NEWSLETTER FORM -*/ .newsletter-form{ width: 90%; } .form-relative .newsletter-row{ width: 40%; margin: -7px 3% 0; } .newsletter-signup-right p.newsletter-submit{ float: left; width: 30px; margin-top: 7px; clear: none; } @media screen and (max-width:768px){ .padding-vertical-100{ padding-top: 50px; padding-bottom: 50px; } #product-section-quote{ padding: 0 12.5%; margin: 50px 0px; } #newsletter-signup{ padding-left: 12.5%; padding-right: 12.5%; } .newsletter-form{ width: 100%; } .form-relative .newsletter-row{ width: 100%; } .newsletter-signup-right p.newsletter-submit{ margin-left: 15px; } } @media screen and (max-width:480px){ .newsletter-signup-left{ width: 100% !important; text-align: center; } .newsletter-signup-right{ width: 100% !important; padding-bottom: 40px; } } /*********************** FORMATTING STYLES FOR THIS WEBSITE ***********************/ .hero-heading, .section-heading, .sub-heading{ float:left; width:100%; } .hero-heading{ margin-bottom:30px; font-size:4rem; color:#fff; line-height:110%; font-weight: 600; } .section-heading{ margin-bottom:40px; font-size:2.25rem; line-height:120%; font-weight:300; width: 100%; } .sub-heading{ margin-bottom:20px; font-size:1.1rem; font-weight:400; line-height:120%; color: #BCCF02; } .highlighted-text-large{ font-weight: 600; font-size: 0.95rem; } .highlighted-text-small{ font-size:0.8rem; font-weight: 400; } .body-text-large{ font-size:1rem; } .body-text-small{ font-size:0.8rem; } .button-standard{ float:left; padding:8px 50px; font-size: 0.9rem; background-color:#BCCF02; border:none; color:#fff; -webkit-transition:background-color .5s; -moz-transition:background-color .5s; -o-transition:background-color .5s; transition:background-color .5s; } .desktop-device .button-standard:hover { background-color:#0FB3F0; } .span-green{ color: #BCCF02; } @media screen and (max-height:767px){ .hero-heading{ font-size:2.5rem; } .section-heading{ font-size:2.5rem; } .sub-heading{ font-size:1.2rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:1023px){ .hero-heading{ font-size:2.5rem; } .section-heading{ font-size:2.5rem; } .sub-heading{ } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:768px){ .hero-heading{ margin-bottom: 20px; font-size:2rem; } .section-heading{ font-size:2rem; } .sub-heading{font-size:1.1rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:479px){ .hero-heading{ margin-bottom: 0; font-size:1.5rem; } .section-heading{ font-size:1.4rem; } .sub-heading{ font-size:1rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } /*********** SOCIAL *************/ .header-social-icon{ color:#000; } /****************************** HEADER SECTION ****************************/ /***** STRUCTURE FOR RESIZING HEADER ON SCROLL DOWN FROM TOP *****/ /* Top - large screen */ #site-header{ position:fixed; top:0; height:93px; z-index: 502; /*B*/opacity: 0.975;/*B*/ } #sticky-header{ height:93px; /*border-bottom:1px solid #ddd;*/ } #site-logo{ min-height: 75px; } #site-logo img{ height:50px; margin-top: 0px; width: 225px; } .home #site-logo img{ height: 90px; margin-top: -22px; margin-left: -15px; width: 80px; } .main-navigation{ /*width:calc( 100% - 130px ); height:50px;*/ height: 95px; margin-top: -20px; } /* Inner Pages Nav Bar and Content */ .page-header{ position: absolute; /* top: 20%; */ left: 20vw; width: 65%; height: 100%; top: 0; display: flex; align-items: center; z-index: 100; } .scrolled-down .page-header{ width: 50%; } .page-header h1 .hero-heading{ color: #fff; font-size: 0; opacity: 0; font-weight: 400; transition: all 0.3s; } .large-nav .page-header h1 .hero-heading{ font-size: 4rem; opacity: 1; } #site-header.inner-navbar.large-nav{ height: 400px; } #site-header.inner-navbar #sticky-header{ position: relative; height: 100%; background-color: rgba(0,0,0,0.7); transition: all 0.5s; } .inner-page-content{ margin-top: 250px; transition: all 1s; } .content-large-nav{ margin-top: 400px; transition: all 0.5s; } #site-header.inner-navbar.product-header #sticky-header{ background-color: rgba(255,255,255,1); } #site-header.inner-navbar.quote-header #sticky-header{ background-color: rgba(0,0,0,0.9); } #site-header.inner-navbar.product-header.large-nav{ height:93px; } #site-header.inner-navbar.quote-header.large-nav{ height:93px; } .page-template-template-product .content-large-nav{ margin-top: 250px; transition: all 0.5s; } /*.inner-navbar .main-navigation{ width: calc( 100% - 215px ); }*/ /* Scrolled down - large screen .scrolled-down #site-header{ height:50px; } .scrolled-down #sticky-header{ height:50px; padding-top:10px; padding-bottom:10px; } .scrolled-down #site-logo img{ height:30px; } .scrolled-down .main-navigation{ height:30px; } */ @media screen and (max-width:1023px){ /* Top - small screen */ #site-header{ height:70px; } #sticky-header{ height:70px; padding-top:15px; padding-bottom:15px; } #site-logo img{ height:40px; } .main-navigation{ height:40px; } /* Scrolled down - small screen */ .scrolled-down #site-header{ height:80px; } .scrolled-down #sticky-header{ height:80px; padding-top:10px; padding-bottom:10px; } .scrolled-down #site-logo img{ } /* .scrolled-down .main-navigation{ height:30px; } */ } @media screen and (max-width:1220px){ #site-logo img{ height: 50px; margin-top: 0px; } /*#site-header.inner-navbar{ height: 150px; }*/ .inner-navbar .main-navigation{ width: 100vw; } #site-header.inner-navbar.large-nav{ height: auto; } .page-header{ top: 0; left: 0; position: relative; float: left; width: 100%; display: flex; justify-content: center; margin-bottom: 1rem; } .page-header h1{ width: auto; } .large-nav .page-header h1 .hero-heading{ font-size: 1.5rem; margin: 0; padding: 0; } .content-large-nav{ margin-top: 150px; } .inner-page-content{ margin-top: 150px; } /********** TO ACCOUNT FOR MENU Z-INDEXING ON SMALLER DEVICES WHEN SCROLLED DOWN ************/ .scrolled-down .main-navigation { height:100vh !important; padding: 20px; } } /***** LOGO *****/ #siteLogo{ } #siteLogo p{ margin:0; } /** New Nav **/ /*#sticky-header .fa-bars{ color: #fff; font-size: 2.25rem; float: right; margin-top: 5px; } #sticky-header .fa-bars:hover{ cursor: pointer; }*/ /***** MAIN NAV *****/ .main-navigation { } .menu-main-container{ overflow: hidden; } #main-menu{ width: 100%; transition: all 1s; float: right; margin: 0 5px -10px; -ms-transform: translateX(100%) translateX(-55px); /* transform: translateX(calc(100% - 55px )); */ transform: translateX(100%); } .menu-active{ transform: translateX(0%) !important; } #main-menu > li:first-of-type{ border-right: 1px solid #fff; } #main-menu > li{ padding-bottom: 10px; box-sizing: border-box; } #main-menu > li > a { padding: 0 15px; color:#FFF; font-size:0.8rem; letter-spacing:1px; } .desktop-device #main-menu > li > a:hover{ color: #BCCF02; } #main-menu > .current_page_item > a{ color: #BCCF02; } .desktop-device #main-menu > li:first-of-type > a:hover{ color: #fff; cursor: default; } /* Toggle button */ .menu-toggle{ width:40px; height:40px; display: block; position: relative; float: right; margin-top: 8px; } .menu-toggle-line{ height:1px; width:80%; background-color:#fff; } #menu-toggle-line-1{ top:30%; left:10%; width:80%; } #menu-toggle-line-2{ top:50%; left:15%; width:70%; } #menu-toggle-line-3{ top:70%; left:10%; width:80%; } .menu-toggle.active{ } .menu-toggle.active, .menu-toggle.inactive{ /*animation-name:menuToggle;*/ animation-duration:1s; animation-iteration-count:1; } .menu-toggle.active #menu-toggle-line-1{ top:50%; transform:rotate(45deg); } .menu-toggle.active #menu-toggle-line-2{ opacity:0; } .menu-toggle.active #menu-toggle-line-3{ top:50%; transform:rotate(-45deg); } /* Maybe make the lines zoom off to the right and come back in? */ @keyframes menuToggle{ 0%{ filter:blur(0); -webkit-filter:blur(0); } 50%{ filter:blur(5px); -webkit-filter:blur(5px); } 100%{ filter:blur(0); -webkit-filter:blur(0); } } /* .scrolled-down .menu-toggle{ width:30px; height:30px; } */ .mobile-menu-active .menu-toggle{ } .new-nav-button{ text-indent: 0; width: auto; margin-left: 20px; padding: 4px 20px 5px; border-radius: 50px; z-index: 200; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .menu-button{ background-color: #BCCF02; border: 2px solid #BCCF02; color: #232323; font-weight: 800; padding: 3px 22px 7px; } .desktop-device .menu-button:hover{ background: transparent; color: #BCCF02; } .get-a-quote-button{ display: block; position: relative; float: right; margin-top: 8px; background: transparent; color: #232323; border: 2px solid #232323; } .desktop-device .get-a-quote-button:hover{ background-color: #232323; color: #ffffff; border: 2px solid #232323; } .home-get-a-quote-button{ background: transparent; color: #ffffff; border: 2px solid #ffffff;} .desktop-device .home-get-a-quote-button:hover { background-color: #ffffff; color: #232323; border: 2px solid #ffffff;} .menu-button-title{ } /*Inner pages menu out*/ @media screen and (min-width:768px){ .inner-pages-nav .menu-toggle{ display: none; } .inner-pages-nav .menu-main-container #main-menu{ transform: none; padding-top: 2px; } .inner-pages-nav .menu-main-container #main-menu > li:first-of-type{ display: none; } } @media screen and (max-width:490px){ .get-a-quote-button{ display: none; } } /* POINT WHERE MENU CHANGES TO BURGER */ /*@media screen and (max-width:1023px) { .menu-toggle { display: block; } #main-menu{ display:none; } }*/ @media screen and (max-width:1139px){ #main-menu > li > a{ padding:0 13px; } } @media screen and (max-width:1220px){ /* .menu-toggle{ position: fixed; z-index: 2001; right: 4.2%; margin-top: 0; } */ .main-navigation{ height: 100vh; top: 0; margin-top: 0; position: fixed; width: 100vw; left: 100vw; background-color: rgba(0,0,0,0.95); transition: left 0.5s; display: block; } .main-navigation.active{ left: 0; } .main-navigation .right-content{ width: 100%; } #main-menu{ transition: all 0.5s; } #main-menu > li:first-of-type{ display: none; } #main-menu > li{ width: 100%; } #main-menu > li > a{ font-size: 1.1rem; } .inner-pages-nav .menu-toggle{ display: block; } } /***** SOCIAL *****/ [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa, .header-social-link .fab{ font-size:1.4rem; } @media screen and (max-width:1139px){ .header-social{ margin-left:20px; } [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa, .header-social-link .fab{ font-size:1.2rem; } } @media screen and (max-width:1023px){ [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa, .header-social-link .fab{ font-size:1rem; } } @media screen and (max-width:939px){ .header-social{ margin:0 100px 0 0; } } /****************Floated Right Nav**********************/ .floated-right-nav{ position: fixed; top: 37vh; right: 4%; z-index: 20; max-width: 110px; } .floated-right-nav ul{ list-style: none; margin: 0; } .floated-right-nav ul li{ padding: 10px 15px 10px 0; margin-bottom: 5px; border-right: 2px solid #464908; text-align: right; width: 100%; -webkit-transition: border-color .7s; -moz-transition: border-color .7s; -o-transition: border-color .7s; transition: border-color .7s; } .floated-right-nav ul li a{ color: #fff; font-size: 0.8rem; font-weight: 500; } .floated-right-nav ul li.active { border-right: 2px solid #BCCF02; } @media screen and (max-height:600px){ .floated-right-nav{ top: 25vh; } } @media screen and (max-width:1180px){ .floated-right-nav ul li{ padding: 10px 10px 10px 0; } .floated-right-nav ul li a{ font-size: 0.7rem; } } @media screen and (max-width:930px){ .floated-right-nav ul li{ padding: 30px 10px 10px 0; } .floated-right-nav ul li a span{ display: none; } } /****************************** GLOBAL NAV **********************************/ .global-nav{ display: none; position: fixed; z-index: 1000; width: 100%; max-height: calc(100vh - 93px); top: 93px; background-color: #fff; border-bottom: 2px solid #BCCF02; border-top: 2px solid #BCCF02; box-shadow: 1px 5px 15px 0px rgba(0, 0, 0, 0.1); padding: 50px 4.2%; overflow-y: scroll; } .scrolled-down .global-nav{ top: 80px; max-height: calc(100vh - 80px); } .global-nav.active{ display: block; } .global-nav .global-nav-section{ position: relative; float: left; } .global-nav .global-nav-section .section-heading{ margin-bottom: 20px; font-size: 1.2rem; font-weight: 400; } .global-nav .global-nav-column{ position: relative; float: left; } .global-nav #global-section-1{ width: 15%; } .global-nav #global-section-2{ width: 30%; margin: 0 5%; } .global-nav #global-section-3{ width: 25%; } .global-nav #global-section-4{ width: 20%; } .global-nav #global-section-4 .global-nav-text{ width: 100%; } .global-nav #global-section-4 .global-nav-text p{ padding: 0px; font-size: 0.8rem; letter-spacing: 1px; } .global-nav #global-section-2 .global-nav-column{ width: 50%; padding: 0 15px; } .global-nav #global-section-2 .global-nav-column:first-of-type{ padding: 0 15px 0 0; } .global-nav #global-section-3 .global-nav-column{ width: 100%; } .global-nav .global-nav-column ul li{ padding: 1px 0; } .global-nav .global-nav-column ul li a{ padding: 0px; font-size: 0.8rem; letter-spacing: 1px; } .desktop-device.global-nav .global-nav-column ul li a:hover{ color: #BCCF02; } @media screen and (max-width:950px){ .global-nav #global-section-1{ width: 22%; } .global-nav #global-section-2{ width: 36%; } .global-nav #global-section-3{ width: 32%; } .global-nav #global-section-4{ display: none; } } @media screen and (max-width:600px){ .global-nav #global-section-1, .global-nav .content-width #global-section-1{ width: 100%; } .global-nav #global-section-2, .global-nav .content-width #global-section-2{ width: 100%; margin: 0 0 30px 0; } .global-nav #global-section-3, .global-nav .content-width #global-section-3{ width: 100%; } .global-nav #global-section-4, .global-nav .content-width #global-section-4{ display: block; width: 100%; } .global-nav .global-nav-section, .global-nav .content-width .global-nav-section{ margin-bottom: 30px; } } /****************************************** MOBILE MENU **************************************/ #mobile-menu-social{ width:150px; margin:0 auto; } /****************************** HERO **********************************/ #hero-wrapper{ max-height:600px; overflow:hidden; } @media screen and (max-height:767px){ #hero-wrapper{ max-height:400px; } } @media screen and (max-width:1023px){ #hero-wrapper{ max-height:400px; } } @media screen and (max-width:768px){ #hero-wrapper{ max-height:300px; } } @media screen and (max-width:479px){ #hero-wrapper{ max-height:none; } } /****************************************** FOOTER **************************************/ footer{ background-color: #F6F6F6; } #footer-content-wrapper, #legal-content-wrapper{ max-width: 1200px; } #footer-column-logo img{ max-width: 200px; margin-bottom: 20px; } .footer-column{ float: left; width: 23%; } .footer-column p, .footer-column a{ font-size: 0.85rem; } .footer-column a{ float: none; } .footer-column ul{ } .footer-column ul li{ padding-bottom: 10px; } .footer-column ul li a{ font-size: 0.75rem; font-weight: 600; } .desktop-device .footer-column ul li a:hover{ color: #BCCF02; } .footer-column ul li ul li{ padding-bottom: 0; } .footer-column ul li ul li a{ font-weight: 400; } #footer-column-logo{ margin-right: 5%; width: 26%; border-right: solid 1px #999; } .footer-logo{ max-width: 125px; margin-bottom: 25px; } #footer-column-social{ width: 15%; } #footer-column-social p .fab, #footer-column-social p .fa{ font-size: 1rem; padding: 5px 5px; } .social-wrapper .fab, .social-wrapper .fa{ font-size: 1.5rem; padding: 10px; } .social-wrapper .fab.fa-linkedin-in, .social-wrapper .fa.fa-linkedin{ padding-left: 0px; } .desktop-device .social-wrapper .fab:hover, .desktop-device .social-wrapper .fa:hover{ color: #BCCF02; } .desktop-device.site-colour-Green .social-wrapper .fab:hover, .desktop-device.site-colour-Green .social-wrapper .fa:hover{ color: #BCCF02; } .desktop-device.site-colour-Yellow .social-wrapper .fab:hover, .desktop-device.site-colour-Yellow .social-wrapper .fa:hover{ color: #b57ab4; } .desktop-device.site-colour-Purple .social-wrapper .fab:hover, .desktop-device.site-colour-Purple .social-wrapper .fa:hover{ color: #9370b1; } .desktop-device.site-colour-Blue .social-wrapper .fab:hover, .desktop-device.site-colour-Blue .social-wrapper .fa:hover{ color: #0098d5; } #footer-column-social #menu-footer-1 li a{ font-size: 0.8rem; padding-left: 9px; } .footer-menu-column ul{ margin-left:0; padding-right:20px; } .footer-menu-column a{ margin-bottom:5px; font-size:0.9rem; } #footer-legal a{ float: none; } #site-legal{ background-color: #E0E0E0; padding: 20px 0; } #site-legal p{ font-size: 0.65rem; text-align: center; margin-bottom: 5px; } @media screen and (max-width:915px){ .footer-column p, .footer-column a{ text-align: center; } .social-wrapper{ width: 73px; display: table; float: none; margin: 0 auto 20px; } .social-wrapper .fab.fa-twitter{ padding: 10px 0 10px 10px; } #footer-column-logo{ width: 100%; border-right: none; } #footer-column-logo img{ margin: 0 auto 30px; } #footer-column-social, #footer-legal{ width: 100%; } #footer-legal p{ text-align: center; } .footer-column ul li{ padding-bottom: 9px; width: 100%; } .footer-column ul li a{ float: none; display: table; margin: 0 auto; } .footer-column ul li ul{ margin-bottom: 20px; margin-top: 11px; } .footer-column ul li ul li{ padding-bottom: 9px; width: 33.33%; } #footer-column-address{ width: 100%; } #footer-column-address p{ text-align: center; } /*#footer-column-social{ width: 90px; float: none; margin: 0 auto; overflow: hidden; }*/ } @media screen and (max-width:580px){ .footer-column ul li ul li{ width: 50%; } } @media screen and (max-width:480px){ #footer-legal p, #footer-column-address p{ padding: 0; } } @media screen and (max-width:430px){ .footer-column ul li ul li{ width: 100%; } } /***************************** TEASERS ***************************/ .teaser-wrapper:nth-of-time(3n + 1){ clear:left; } .teaser-wrapper > .left-content{ max-width:350px; } .teaser-wrapper > .left-content .sub-heading{ margin-bottom:0; } .desktop-device .teaser-wrapper > .left-content:hover .background-blue-light-hover{background-color:#C8EBF2;} @media screen and (max-width:768px){ .teaser-wrapper > .left-content{ float:none; display:block; margin:0 auto; } } /***************************** RE USABLE ON PAGES ******************************/ .page-section-left{ width: 50%; float: left; position: relative; } .page-section-right{ width: 50%; float: right; position: relative; } .half-half-text-image .page-section-right .section-heading{ width: 75%; } .half-half-text-image.float-image-right .page-section-left{ float: right; } .half-half-text-image.float-image-right .page-section-right p{ width: 85%; } .page-section-left img{ max-height: 320px; } .rel-content-holder{ position: relative; } .text-link-holder{ float: left; width: 100%; } .text-link-holder a{ padding-left: 40px; background-image: url('/wp-content/uploads/carbon/themes/bn/img/icons/cog-point.png'); background-size: contain; background-repeat: no-repeat; } @media screen and (max-width:768px){ .page-section-left{ width: 75%; margin: 0 12.5%; margin-bottom: 50px; } .page-section-right{ width: 75%; margin: 0 12.5%; text-align: center; } .page-section-right ul{ text-align: left; } .page-section-left img{ max-height: 250px; margin: 0 auto; } .half-half-text-image .page-section-right .section-heading{ width: 100%; } .half-half-text-image.float-image-right .page-section-right p{ width: 100%; } .page-image-break{ margin-top: 50px; margin-bottom: 50px; } } /***************************** SLIDERS ******************************/ /******Testimonial Slider*****/ .testimonials-section{ background-image: url('/wp-content/uploads/carbon/themes/bn/img/hero/tester-testimonial.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; } .testimonial-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.55); } .overall-testimonials-carousel{ overflow: hidden; } .overall-testimonials-carousel-withdots{ overflow: hidden; } .testimonial-item{ position: relative; float: left; } .testimonial-item:focus{ outline: 0; } button.slick-arrow{ position: absolute; top: 50px; background: transparent; border: none; } button.slick-prev{ left: -75px; } button.slick-next{ right: -75px; } button.slick-arrow .fab, button.slick-arrow .fa{ color: #fff; font-size: 2rem; } .slick-dots{ list-style: none; width: auto; margin: auto; display: table !important; float: none; padding-top: 20px; } .slick-dots li button{ width: 14px; height: 14px; border: 2px solid #f4f4f4; background-color: #bcbcbc; float: left; text-indent: -50000px; border-radius: 16px; } .slick-dots li { float: left; width: auto; padding: 5px; } .slick-dots li.slick-active button{ background-color: #ffffff; border: 2px solid #000000; } .testimonial-quote p{ color: #fff; font-size: 1rem; font-weight: 300; line-height: 150%; text-align: center; } .testimonial_author, .testimonial_company{ color: #fff; font-size: 1.1rem; font-weight: 400; text-align: center;} @media screen and (max-width:1200px){ button.slick-arrow{ display: none !important; } } @media screen and (max-width:768px){ /*.testimonial-item{ padding: 0 12.5%; }*/ .testimonial-quote p{ padding: 0 12.5%; font-size: 1rem; } } /******Twitter Slider*****/ .twitter-section{ background-image: url('/wp-content/uploads/carbon/themes/bn/img/hero/tester-testimonial.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; } .twitter-container{ position: relative; overflow: hidden; } .twitter-container .tweet{ position: relative; float: left; padding: 0 25px; } .twitter-container .tweet .fab, .twitter-container .tweet .fa{ color: #fff; font-size: 2rem; text-align: center; width: 100%; margin-bottom: 30px; } .twitter-container .tweet .tweet-text{ color: #fff; font-size: 0.85rem; text-align: center; } .twitter-container .tweet .tweet-text a{ color: #BCCF02; } .twitter-container .tweet .tweet-time{ color: #fff; font-size: 0.8rem; text-align: center; margin-top: 30px; } .more-twitter{ float: left; width: 100%; margin-top: 50px; text-align: center; } .more-twitter a{ background-image: url('/wp-content/uploads/carbon/themes/bn/img/icons/white-cog-point.png'); background-size: 27px; background-repeat: no-repeat; padding-left: 40px; color: #fff; display: table; margin: 0 auto; } /***************************** TEAM MEMBERS ******************************/ .team-section h2, #main-category-section h2{ text-align: center; } .team-item{ width: 100%; float: left; padding: 75px 0; } .team-item .team-item-left{ width: 50%; float: left; } .team-item .team-item-right{ width: 50%; float: left; } .team-item .team-item-left img{ margin: 0 auto; } /*category, blog too*/ .team-item .team-item-right .section-heading, .product-teaser-wrapper .section-heading, .latest-3-blogs-indiv-holder .section-heading, .latest-4-featured-indiv-holder .section-heading, #blog-category-section ul li .section-heading{ margin-bottom: 10px; font-size: 1.5rem; } .team-item:nth-of-type(2n) .team-item-left{ float: right; } @media screen and (max-width:768px){ .team-item{ padding: 30px 12.5%; } .team-item .team-item-left{ width: 25%; } .team-item .team-item-right{ width: 75%; padding-left: 40px; } .team-item:nth-of-type(2n) .team-item-right{ padding-left: 0px; padding-right: 40px; } .team-item .team-item-right .section-heading, .product-teaser-wrapper .section-heading, .latest-3-blogs-indiv-holder .section-heading, .latest-4-featured-indiv-holder .section-heading, #blog-category-section ul li .section-heading { margin-bottom: 10px; font-size: 1rem; } } @media screen and (max-width:480px){ .team-item .team-item-left{ width: 140px; margin: 0 auto 30px; overflow: hidden; float: none; } .team-item .team-item-right{ width: 100%; padding-left: 0px; } .team-item:nth-of-type(2n) .team-item-left{ float: none; } } /***************************** NEWSLETTER ******************************/ .newsletter-signup-left{ float: left; width: 30%; } .newsletter-signup-right{ float: left; width: 70%; } .newsletter-signup-right form label{ display: block; float: left; width: auto; font-weight: 300; } .newsletter-signup-right form span.wpcf7-form-control-wrap{ width: 35%; margin: 0px 10px;} .newsletter-signup-right form input[type="text"], .newsletter-signup-right form input[type="email"]{ border: none; border-bottom: 1px solid #999; padding: 0 0 5px 5px; transition: all 0.2s; } .newsletter-signup-right form input[type="text"]:focus, .newsletter-signup-right form input[type="email"]:focus{ border-bottom: 1px solid #BCCF02; } .newsletter-signup-right form .newsletter-form-80{ width: 80%; } .newsletter-signup-right form .newsletter-form-20{ width: 20%; } .newsletter-signup-right form input[type="submit"]{ background-image: url('/wp-content/uploads/carbon/themes/bn/img/icons/cog-point.png'); margin: 0; float: left; height: 27px; padding: 0; padding-left: 27px; background-color: transparent; background-repeat: no-repeat; text-indent: -9000px; background-size: 27px; overflow: hidden; transition: transform 10s; } .desktop-device .newsletter-signup-right form input[type="submit"]:hover{ transform: rotate(360deg); } /***************************** FRONT PAGE ******************************/ .home-slides-wrapper{ } .home-slide{ height: 100vh; position: relative; overflow: hidden; } .home-slide-image{ width: 100%; height: 100%; z-index: 1; } .home-slide-image-mobile{ width: 100%; height: 100%; z-index: 1; } .home-slide-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } /* .home-slide-content h2 span{ width: 100%; text-align: center; margin-bottom: 50px; font-size: 4.75rem; } */ .home-slide-content h1 span, .home-slide-content h2 span{ width: 80%; text-align: center; margin: 0 0 50px 10%; font-size: 3.5rem; line-height: 3.5rem; } .cta-container{ position: relative; float: left; } .mobile-cta-container{ position: relative; overflow: hidden; width: 100%; } .home-slide-content-inner .mobile-cta-container a { margin: 0 auto; float: none; margin-bottom: 30px; position: relative; overflow: hidden; display: table; } .add-blur{ transition: all 0.5s; filter: blur(5px); -webkit-transform: translate3d(0, 0, 0); transform: scale(1.02); } .home-slide-image-mask{ position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.6); } /* .home-slide-logo{ float: none; margin: 0px auto 60px; width: 200px; } */ .home-slide-logo{ float: none; margin: 0px auto 60px; width: 290px; } /* .home-slide-content-inner p{ font-size: 1.5rem; color: #fff; text-align: center; margin-bottom: 40px; } */ .home-slide-content-inner p{ font-size: 1rem; color: #fff; text-align: center; margin-bottom: 60px; line-height: 1rem; } .home-slide-content-inner a{ position: relative; float: left; background-color: #BCCF02; border: 1px solid #BCCF02; padding: 6px 20px; border-radius: 25px; text-transform: uppercase; font-size: 1.5rem; font-weight: 600; transition: all 0.5s; color: #ffffff; } .desktop-device .home-slide-content-inner a.hover-color-sitecolour:hover{ background-color: transparent; color: #BCCF02; } @media screen and (max-width:1400px){ .home-slide-content h1 span, .home-slide-content h2 span{ width: 80%; margin: 0 10% 50px; font-size: 4rem; line-height: 4rem; } .home-slide-content-inner p{ font-size: 1.25rem; line-height: 1.25rem; margin: 0 10% 60px; width: 80%; } } @media screen and (max-width:1180px){ #site-logo img{ width: 155px; } .home-slide-content h1 span, .home-slide-content h2 span{ font-size: 3rem; margin-bottom: 30px; } .home-slide-content-inner p{ margin: 0 20% 60px; width: 60%; } } @media screen and (max-width:768px), screen and (max-height: 700px){ .home-slide-logo{ width: 230px; margin-bottom: 40px; } .home-slide-content h1 span, .home-slide-content h2 span{ font-size: 2.5rem; line-height: 2.5rem; } .home-slide-content-inner p{ margin-bottom: 40px; font-size: 1.1rem; line-height: 1.1rem; } } @media screen and (max-width:480px), screen and (max-height: 600px){ #site-logo img{ height: 45px; } .home #site-logo img{ height: 80px; margin-top: -15px; } .home-slide-logo{ width: 150px; margin: 0px auto 30px; } .home-slide-content h1 span, .home-slide-content h2 span{ font-size: 1.8rem; line-height: 1.8rem; width: 80%; margin: 0 10% 30px; } .home-slide-content-inner p{ font-size: 1rem; line-height: 1rem; margin: 0 15% 30px; width: 70%; } .home-slide-content-inner .mobile-cta-container a{ margin-bottom: 20px; font-size: 1.2rem; } .home-slide-content-inner .mobile-cta-container a:last-of-type{ margin-bottom: 0; } .home-slide-content-inner .mobile-cta-container .phone-icon{ padding: 0.8rem; } .home-slide-content-inner .mobile-cta-container .phone-icon i{ left: calc(50% - 0.4rem); top: calc(50% - 0.45rem); font-size: 0.8rem; } .home-slide-content-inner .mobile-cta-container .phone-text{ font-size: 1.2rem; margin: -2px 0.5rem 0 0.5rem; } } @media screen and (max-width:380px), screen and (max-height: 600px){ .home-slide-content h1 span, .home-slide-content h2 span{ margin-bottom: 20px; font-size: 1.5rem; line-height: 1.5rem; } .home-slide-content-inner p{ width: 88%; margin: 0 6% 30px; font-size: 0.9rem; line-height: 0.9rem; } } @media screen and (max-height: 400px){ .home-slide-logo{ width: 120px; margin: 0px auto 15px; } .home-slide-content h1 span, .home-slide-content h2 span{ margin-bottom: 10px; font-size: 1.3rem; line-height: 1.3rem; } .home-slide-content-inner p{ width: 92%; margin: 0 4% 20px; font-size: 0.8rem; line-height: 0.8rem; } .home-slide-content-inner .mobile-cta-container a{ margin-bottom: 10px; font-size: 0.9rem; } .home-slide-content-inner .mobile-cta-container .phone-icon{ padding: 0.6rem; } .home-slide-content-inner .mobile-cta-container .phone-icon i{ font-size: 0.65rem; left: calc(50% - 0.3rem); top: calc(50% - 0.35rem); } .home-slide-content-inner .mobile-cta-container .phone-text{ font-size: 0.9rem; } } /***************************** ABOUT PAGE ******************************/ /***************************** CATEGORY PAGE ******************************/ .product-teaser-wrapper{ float: left; width: 50%; padding: 0 50px; } .product-teaser-wrapper:nth-of-type(2n){ padding-top: 30px; } .product-teaser-wrapper:nth-of-type(2n+1){ clear:left; } .product-teaser-wrapper img{ width: 100%; margin-bottom: 30px; } @media screen and (max-width:768px){ .product-teaser-wrapper{ width: 75%; padding: 0; margin: 0 12.5%; } } /***************************** PRODUCT PAGE ******************************/ /* NAV MENU */ #product-menu{ padding-right:20px; } /* RIGHT SIDEBAR */ #product-sidebar-right{ } #product-sidebar-right li{ } #product-sidebar-right li img{ width:50px; margin-right:20px; } #product-sidebar-right li p{ width:calc(100% - 70px); margin:10px 0 0; } .social-media-holder{ position: fixed; bottom: 30px; right: 4.5%; z-index: 10; } .social-media-holder .fab, .social-media-holder .fa{ color: #fff; font-size: 1.4rem; } .social-media-holder .fa-twitter, .social-media-holder .fa-youtube, .social-media-holder .fa-phone, .social-media-holder .fa-google-plus, .social-media-holder .fa-facebook-f{ padding-left: 15px; } .desktop-device.site-colour-Green .social-media-holder .fa:hover, .desktop-device .social-media-holder .fa:hover, .desktop-device .social-media-holder .fab:hover{ color: #BCCF02; } .desktop-device.site-colour-Yellow .social-media-holder .fa:hover, .desktop-device.site-colour-Yellow .social-media-holder .fab:hover{ color: #b57ab4; } .desktop-device.site-colour-Blue .social-media-holder .fa:hover, .desktop-device.site-colour-Blue .social-media-holder .fab:hover{ color: #0098d5; } .desktop-device.site-colour-Purple .social-media-holder .fa:hover, .desktop-device.site-colour-Purple .social-media-holder .fab:hover{ color: #9370b1; } /***************************** PRODUCT PAGE REDESIGN ******************************/ #site-header.inner-navbar.product-header #sticky-header{ background-color: rgba(255,255,255,1); } #site-header.inner-navbar.product-header.large-nav, #site-header.inner-navbar.quote-header.large-nav{ height:93px; } .page-template-template-product .content-large-nav, .page-template-template-quote .content-large-nav{ margin-top: 100px; transition: all 0.5s; } .page-template-template-product #main-menu > li > a { color:#000000; } .page-template-template-product #main-menu > li:first-of-type { border-right: 1px solid #000; } .page-template-template-product .menu-toggle-line { height: 1px; width: 80%; background-color: #000; } .desktop-device.page-template-template-product #main-menu > li:first-of-type > a:hover { color: #000000; } .product-inner-page-content{ margin-top: 100px; transition: all 1s; } .page-template-template-product .content-large-nav{ margin-top: 250px; transition: all 0.5s; } #product-hero-section{ } .product-hero-image-container{ position: absolute; width: 100%; height: 1000px; } .quote-hero-bg{ position: absolute; width: 100%; height: 1000px; top:0; background-color: rgba(0,0,0,0.3); } .quote-hero-image-container{ position: absolute; width: 100%; height: 1000px; top:0; } .product-hero-image-overlay{ background-color: #000000; opacity: 0.7; width: 100%; height: 100%; } .product-hero-text-container{ position: relative; overflow: hidden; padding-top: 100px; padding-bottom: 100px; display: table;} .product-hero-text-container h1{ color: #ffffff; font-size: 4rem; line-height: 3.5rem; padding-bottom: 2rem; } .product-hero-left{ display: table-cell; width: 50%; vertical-align: middle; } .product-hero-left p{ color: #ffffff; margin-bottom: 2rem; } .product-hero-heading{ color: #BCCF02; } .site-colour-Green .product-hero-heading{ color: #BCCF02; } .site-colour-Yellow .product-hero-heading{ color: #b57ab4; } .site-colour-Purple .product-hero-heading{ color: #9370b1; } .site-colour-Blue .product-hero-heading{ color: #0098d5; } .product-hero-right{ display: table-cell; /*width: 50%;*/ width: 46%; vertical-align: middle; background-color: #BCCF02; border-radius: 15px; } .site-colour-Green .product-hero-right{ background-color: #BCCF02; } .site-colour-Yellow .product-hero-right{ background-color: #b57ab4; } .site-colour-Purple .product-hero-right{ background-color: #9370b1; } .site-colour-Blue .product-hero-right{ background-color: #0098d5; } @media screen and (max-width: 1240px){ .product-hero-left .rel-content-holder{ padding: 0 10px 0 20px; } } @media screen and (max-width: 800px){ .product-hero-image-container{ width: 100%; } .product-hero-left .rel-content-holder{ padding: 0 30px; } .product-hero-left, .product-hero-right{ display: table-row; } .quote-hero-text-container{ padding: 100px 0 0; } .product-hero-text-container{ padding: 100px 0 0; } } .home-slide-content-inner .phone-container{ background-color: #ffffff; padding: 9px 9px 8px; border-radius: 1000px; position: relative; float: left; display: table; transition: all 0.3s; border: none; margin-right: 50px; } .product-phone-container{ background-color: #ffffff; padding: 7px 9px 5px; border-radius: 1000px; position: relative; float: left; display: table; transition: all 0.3s; } .phone-icon{ padding: 1rem; border-radius: 25px; background-color: #232323; position: relative; float: left; display: table-cell; vertical-align: middle; transition: all 0.3s; } .product-phone-icon{ padding: 25px; } .phone-icon i{ position: absolute; left: calc(50% - 0.5rem); top: calc(50% - 0.5rem); font-size: 1rem; transform: scaleX(-1); color: #BCCF02; } .product-phone-icon i{ left: calc(50% - 9px); top: calc(50% - 10px); font-size: 1rem; } .site-colour-Green .product-phone-icon i, .site-colour-Green .phone-icon i{ color: #BCCF02; } .site-colour-Yellow .product-phone-icon i, .site-colour-Yellow .phone-icon i{ color: #b57ab4; } .site-colour-Purple .product-phone-icon i, .site-colour-Purple .phone-icon i{ color: #9370b1; } .site-colour-Blue .product-phone-icon i, .site-colour-Blue .phone-icon i{ color: #0098d5; } .phone-text{ position: relative; float: left; display: table-cell; vertical-align: middle; font-size: 1.5rem; margin: -2px 1rem 0 1rem; font-weight: 700; transition: all 0.3s; color: #232323; } .product-phone-text{ font-size: 2rem; margin: -2px 1.5rem 0 1.5rem; } /* HERE'S A BUNCH OF TOTALLY REDUNDANT STYLING FOR AN INACTIVE DESKTOP PHONE CTA CONTAINER .desktop-device .phone-container:hover{ background-color: #232323; } .desktop-device .product-phone-container:hover{ padding: 7px 19px 5px; } .desktop-device .home-slide-content-inner .phone-container:hover{ background-color: #232323; } .desktop-device .phone-container:hover .phone-icon{ background-color: #ffffff; } .desktop-device .phone-container:hover .product-phone-icon{ margin-left: -10px; } .desktop-device .home-slide-content-inner .phone-container:hover .phone-icon{ background-color: #ffffff; } .desktop-device .phone-container:hover .phone-text{ color: #ffffff; } .desktop-device .phone-container:hover .product-phone-text{ margin: -2px 2rem 0 2rem; } .desktop-device .home-slide-content-inner .phone-container:hover .phone-text{ color: #ffffff; } */ .product-form-container{ padding: 50px; position: relative; overflow: hidden; } .product-form-container .section-heading{ margin-bottom: 20px; font-weight: 600; } .product-form-container .quote-explain{ /*color: #ffffff;*/ margin-bottom: 20px; } .site-colour-Yellow .product-hero-right p{ color: #232323; } .product-form-container .form{ position: relative; overflow: hidden; float: left; } @media screen and (min-width:600px){ .product-footer-form-container .form-relative .form-row, .product-form-container .form-relative .form-row { width: 48%; margin-right: 2%; padding-bottom: 0; } } @media screen and (max-width:800px){ .product-phone-container{ margin-bottom: 50px; } .product-form-container{ padding: 20px; } } @media screen and (max-width:520px){ .product-hero-text-container h1{ font-size: 2.5rem; line-height: 2.5rem; } } @media screen and (max-width:450px){ .product-phone-icon{ padding: 15px; } .product-phone-icon i{ left: calc(50% - 6px); top: calc(50% - 5px); font-size: 0.7rem; } .product-phone-text{ font-size: 1.2rem; margin: -1px 1rem 0 1rem; } } .product-footer-form-container .form-relative .form-row-textarea, .product-form-container .form-relative .form-row-textarea, .product-footer-form-container .form-relative .form-row-checkbox, .product-form-container .form-relative .form-row-checkbox { width: 100%!important; } .product-form-container .form-row-checkbox .quote-cover_required { margin-top: -28px; margin-bottom: 28px; } .product-form-container .form-line-dull { background-color: #ffffff; } .product-footer-form-container .form-line, .product-form-container .form-line { bottom: 20px; } .product-form-container .wpcf7-form input[type="submit"] { background-image: none; padding: 10px 40px; background-color: #1d1d1b; color: #ffffff; height: auto; border-radius: 40px; text-transform: uppercase; font-size: 1rem; } .desktop-device .product-form-container .wpcf7-form input[type="submit"]:hover { background-color: #ffffff; color: #1d1d1b; padding: 10px 50px; } #product-content-section{ max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; padding: 100px 0; display: table; } .product-main-section{ position: relative; overflow: hidden; float: left; width: 65%; } .product-main-content-sections-container{ position: relative; overflow: hidden; float: left; width: 100%; } .product-main-content-section{ position: relative; float: left; margin-bottom: 30px; } .product-main-content-section-style1{ border-left: 10px solid #BCCF02; padding-left: 20px; } .site-colour-Green .product-main-content-section-style1{ border-left: 10px solid #BCCF02; } .site-colour-Yellow .product-main-content-section-style1{ border-left: 10px solid #b57ab4; } .site-colour-Purple .product-main-content-section-style1{ border-left: 10px solid #9370b1; } .site-colour-Blue .product-main-content-section-style1{ border-left: 10px solid #0098d5; } .product-main-content-section-style1 .title{ font-size: 2rem; line-height: 2rem; font-weight: 700; margin: 15px 0 20px; } .product-main-content-section-style1 .content{ position: relative; overflow: hidden; } .product-main-content-section-style2{ border: 5px solid #BCCF02; border-radius: 20px; padding: 20px 50px; } .site-colour-Green .product-main-content-section-style2{ border: 5px solid #BCCF02; } .site-colour-Yellow .product-main-content-section-style2{ border: 5px solid #b57ab4; } .site-colour-Purple .product-main-content-section-style2{ border: 5px solid #9370b1; } .site-colour-Blue .product-main-content-section-style2{ border: 5px solid #0098d5; } .product-main-content-section-style2 .title{ font-weight: 700; line-height: 1.3rem; margin: 15px 0 20px; width: 100%; } .product-main-content-section-style2 .content{ width: 100%; } .product-main-content-section-style2 .content-half{ position: relative; overflow: hidden; width: 50%; float: left;} .product-main-content-section-style2 .content-left{ padding-right: 30px; } .product-main-content-section-style2 .content-right{ } .product-main-content-section-style3{ background-color: #BCCF02; border-radius: 10px; padding: 50px; } .site-colour-Green .product-main-content-section-style3{ background-color: #BCCF02; } /*.site-colour-Yellow .product-main-content-section-style3{ background-color: #b57ab4; }*/ .page-template-template-product .site-colour-Yellow .product-main-content-section-style3{ background-color: #b57ab4; } .site-colour-Purple .product-main-content-section-style3{ background-color: #9370b1; } .site-colour-Blue .product-main-content-section-style3{ background-color: #0098d5; } .product-main-content-section-style3 .content-left{ position: relative; overflow: hidden; width: 60%; float: left; } .product-main-content-section-style3 .full-width{ position: relative; overflow: hidden; width: 100%; float: left; } .product-main-content-section-style3 .full-width .title, .product-main-content-section-style3 .content-left .title{ font-size: 2rem; line-height: 2rem; font-weight: 700; margin: 15px 0 20px; } .product-main-content-section-style3 .full-width .content, .product-main-content-section-style3 .content-left .content{ position: relative; overflow: hidden; float: left; padding-right: 1.5rem; } .product-main-content-section-style3 .content-right { position: relative; overflow: hidden; float: left; width: 40%; } .product-main-content-section-style3 .content-right .product-image{ display: block; } @media screen and (max-width: 600px){ .product-main-content-section-style2{ padding: 20px 20px; } .product-main-content-section-style2 .content-half{ width: 100%; margin: 0; } .product-main-content-section-style2 .content-half ul{ margin: 0 1.25em 0 1.25em; } .product-main-content-section-style2 .content-half:last-of-type{ margin: 0 0 50px; } .product-main-content-section-style3 .content-left{ width: 100%; } .product-main-content-section-style3 .content-right { width: 100%; } } .product-testimonials-section-container{ position: relative; overflow: hidden; float: left; width: 100%; margin-top: 50px; } .product-testimonials-section-bg1{ position: absolute; border-radius: 10px; top: 40px; left: 0; width: 100%; background-color: #1d1d1b; } .product-testimonials-section-bg2{ position: absolute; border-radius: 10px; top: 20px; left: 20px; width: calc(100% - 40px); background-color: #BCCF02; } .site-colour-Green .product-testimonials-section-bg2{ background-color: #BCCF02; } .site-colour-Yellow .product-testimonials-section-bg2{ background-color: #b57ab4; } .site-colour-Purple .product-testimonials-section-bg2{ background-color: #9370b1; } .site-colour-Blue .product-testimonials-section-bg2{ background-color: #0098d5; } .product-testimonials-section-bg3{ position: absolute; border-radius: 10px; top: 0; left: 40px; width: calc(100% - 80px); background-color: #f4f4f4; } .product-testimonials-section-wrapper{ position: relative; overflow: hidden; float: left; width: 100%; max-width: 775px; padding: 30px 40px 50px; } .product-testimonials-section-wrapper .testimonial-quote{ position: relative; overflow: hidden; padding: 0 40px; } .product-testimonials-section-wrapper .testimonial-quote p{ color: #1d1d1b; font-size: 1.2rem; font-weight: 300; line-height: 150%; text-align: center; } .product-testimonials-section-wrapper .testimonial_author, .product-testimonials-section-wrapper .testimonial_company{ color: #1d1d1b; font-size: 1.1rem; font-weight: 700; text-align: center; padding: 0 40px; } .product-contact-section-container{ position: relative; overflow: hidden; float: left; width: 100%; /*margin-top: 30px;*/ } .product-contact-section-container-style1{ border-left: 10px solid #BCCF02; padding-left: 20px; } .site-colour-Green .product-contact-section-container-style1{ border-left: 10px solid #BCCF02; } .site-colour-Yellow .product-contact-section-container-style1{ border-left: 10px solid #b57ab4; } .site-colour-Purple .product-contact-section-container-style1{ border-left: 10px solid #9370b1; } .site-colour-Blue .product-contact-section-container-style1{ border-left: 10px solid #0098d5; } .product-contact-section-container-style2{ background-color: #ffffff; border: 5px solid #BCCF02; border-radius: 20px; padding: 20px 50px; } .site-colour-Green .product-contact-section-container-style2{ border: 5px solid #BCCF02; } .site-colour-Yellow .product-contact-section-container-style2{ border: 5px solid #b57ab4; } .site-colour-Purple .product-contact-section-container-style2{ border: 5px solid #9370b1; } .site-colour-Blue .product-contact-section-container-style2{ border: 5px solid #0098d5; } .product-contact-section-container-style3{ background-color: #BCCF02; border-radius: 10px; padding: 50px; } .site-colour-Green .product-contact-section-container-style3{ background-color: #BCCF02; } .site-colour-Yellow .product-contact-section-container-style3{ background-color: #b57ab4; } .site-colour-Purple .product-contact-section-container-style3{ background-color: #9370b1; } .site-colour-Blue .product-contact-section-container-style3{ background-color: #0098d5; } .product-sidebar-section{ position: relative; overflow: hidden; float: left; width: 35%; padding-left: 30px; } .product-contact-container{ background-color: #1d1d1b; color: #ffffff; padding: 40px 40px 50px 40px; border-radius: 10px; margin-bottom: 40px; } .product-contact-container p{ } .product-contact-button{ background-color: #BCCF02; color: #1d1d1b; padding: 7px 40px 8px; border-radius: 1000px; text-transform: uppercase; font-weight: 700; font-size: 0.8rem; transition: all 0.3s; } .site-colour-Green .product-contact-button{ background-color: #BCCF02; } .site-colour-Yellow .product-contact-button{ background-color: #b57ab4; } .site-colour-Purple .product-contact-button{ background-color: #9370b1; } .site-colour-Blue .product-contact-button{ background-color: #0098d5; } .desktop-device .product-contact-button:hover{ background-color: #ffffff; padding: 7px 50px 8px; } .product-contact-heading{ font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem; } .product-related-items-container{ position: relative; overflow: hidden; border: 2px solid #e5e5e5; border-radius: 10px; padding: 40px; } .related-items-title{ font-weight: 700; } .related-item-container{ position: relative; overflow: hidden; float: left; width: 100%; margin-top: 30px; } .related-item-container .image{ position: relative; overflow: hidden; float: right; width: 100%; height: 150px; } .related-item-container .image-view-overlay{ position: absolute; background-color: #BCCF02; color: #1d1d1b; border-radius: 0 0 0 100px; right: 0; padding: 5px 10px 6px 22px; text-transform: uppercase; font-size: 0.8rem; font-weight: 700; transition: all 0.3s; } .site-colour-Green .related-item-container .image-view-overlay{ background-color: #BCCF02; } .site-colour-Yellow .related-item-container .image-view-overlay{ background-color: #b57ab4; } .site-colour-Purple .related-item-container .image-view-overlay{ background-color: #9370b1; } .site-colour-Blue .related-item-container .image-view-overlay{ background-color: #0098d5; } .desktop-device .related-item-container .image:hover .image-view-overlay{ padding: 10px 21px 11px 33px; } .related-item-container .title{ position: relative; overflow: hidden; float: left; margin-top: 10px; font-size: 1rem; line-height: 1.3rem; } .desktop-device .related-item-container .title:hover{ color: #BCCF02; } .desktop-device.site-colour-Green .related-item-container .title:hover{ color: #BCCF02; } .desktop-device.site-colour-Yellow .related-item-container .title:hover{ color: #b57ab4; } .desktop-device.site-colour-Purple .related-item-container .title:hover{ color: #9370b1; } .desktop-device.site-colour-Blue .related-item-container .title:hover{ color: #0098d5; } @media screen and (max-width: 1200px){ #product-content-section{ padding: 100px 20px; } } @media screen and (max-width: 800px){ .product-testimonials-section-wrapper { max-width: 700px; } .product-testimonials-section-wrapper .testimonial-quote p { padding: 0; } .product-testimonials-section-wrapper .testimonial-quote { padding: 0 20px; } } /*@media screen and (max-width: 750px){*/ @media screen and (max-width: 1023px){ #product-content-section{ padding: 100px 0; } .product-main-section{ width: 100%; padding: 0 30px 50px 30px;} .product-sidebar-section{ width: 100%; padding: 0 30px 0 30px; } .product-testimonials-section-wrapper { max-width: calc(100vw - 60px); } .product-contact-section-container-style2{ padding: 20px; } .product-related-items-container{ margin-bottom: 200px; } .product-testimonial-section-wrapper{ max-width: none; } .product-related-products-container{ clear: both; } }@media screen and (max-width: 450px){ .product-main-section{ width: 100%; padding: 0 10px 50px 10px;} .product-sidebar-section{ width: 100%; padding: 0 10px 0 10px; } .product-testimonials-section-wrapper { max-width: calc(100vw - 20px); } } .footer-cog-container{ position: absolute; right: 0; z-index: -1; } .footer-cog{ position: relative; width: 600px; height: 300px; } .footer-cog-image{ position: absolute; bottom: 300px; } .footer-column .current_page_item a, .page-template-template-product .footer-column ul li.current_page_item a { color: #BCCF02; } .site-colour-Green .footer-column .current_page_item a, .site-colour-Green .footer-column ul li.current_page_item a { color: #BCCF02; } .site-colour-Yellow .footer-column .current_page_item a, .site-colour-Yellow .footer-column ul li.current_page_item a { color: #b57ab4; } .site-colour-Purple .footer-column .current_page_item a, .site-colour-Purple .footer-column ul li.current_page_item a { color: #9370b1; } .site-colour-Blue .footer-column .current_page_item a, .site-colour-Blue .footer-column ul li.current_page_item a { color: #0098d5; } .page-template-template-product .ui-datepicker { z-index: 1000!important; } .page-template-template-product footer { background-color: #1d1d1b; color: #ffffff; } .page-template-template-product #footer-column-logo { border: none; } .page-template-template-product .footer-column a { color: #ffffff; } .desktop-device.page-template-template-product .footer-column a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-product .footer-column a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-product .footer-column a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-product .footer-column a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-product .footer-column a:hover { color: #0098d5; } .page-template-template-product .footer-column .menu-item-has-children a{ color: #BCCF02; } .site-colour-Green.page-template-template-product .footer-column .menu-item-has-children a{ color: #BCCF02; } .site-colour-Yellow.page-template-template-product .footer-column .menu-item-has-children a{ color: #b57ab4; } .site-colour-Purple.page-template-template-product .footer-column .menu-item-has-children a{ color: #9370b1; } .site-colour-Blue.page-template-template-product .footer-column .menu-item-has-children a{ color: #0098d5; } .desktop-device.page-template-template-product .footer-column .menu-item-has-children a:hover { color: #ffffff; } .page-template-template-product .footer-column .menu-item-has-children ul li a, .site-colour-Green.page-template-template-product .footer-column .menu-item-has-children ul li a, .site-colour-Yellow.page-template-template-product .footer-column .menu-item-has-children ul li a, .site-colour-Purple.page-template-template-product .footer-column .menu-item-has-children ul li a, .site-colour-Blue.page-template-template-product .footer-column .menu-item-has-children ul li a{ color: #ffffff; } .desktop-device.page-template-template-product .footer-column .menu-item-has-children ul li a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-product .footer-column .menu-item-has-children ul li a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-product .footer-column .menu-item-has-children ul li a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-product .footer-column .menu-item-has-children ul li a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-product .footer-column .menu-item-has-children ul li a:hover { color: #0098d5; } .page-template-template-product .footer-column .current_page_item a, .page-template-template-product .footer-column ul li.current_page_item a { color: #BCCF02; } .site-colour-Green.page-template-template-product .footer-column .current_page_item a, .site-colour-Green.page-template-template-product .footer-column ul li.current_page_item a { color: #BCCF02; } .site-colour-Yellow.page-template-template-product .footer-column .current_page_item a, .site-colour-Yellow.page-template-template-product .footer-column ul li.current_page_item a { color: #b57ab4; } .site-colour-Purple.page-template-template-product .footer-column .current_page_item a, .site-colour-Purple.page-template-template-product .footer-column ul li.current_page_item a { color: #9370b1; } .site-colour-Blue.page-template-template-product .footer-column .current_page_item a, .site-colour-Blue.page-template-template-product .footer-column ul li.current_page_item a { color: #0098d5; } .page-template-template-product #site-legal { background-color: #1d1d1b; float: left; color: #7c7c7c; } .page-template-template-product #site-legal p{ text-align: left; } .page-template-template-product #site-legal a{ color: #ffffff; } .desktop-device.page-template-template-product #site-legal a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-product #site-legal a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-product #site-legal a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-product #site-legal a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-product #site-legal a:hover { color: #0098d5; } /***************************** CONTACT PAGE ******************************/ /* GOOGLE MAP */ #hero-wrapper iframe{ height:400px; width:100%; } @media screen and (max-height:767px){ #hero-wrapper iframe{ height:300px; } } @media screen and (max-width:768px){ #hero-wrapper iframe{ height:300px; } } @media screen and (max-width:479px){ #hero-wrapper iframe{ height:200px; } } /* FONT AWESOME ICONS VIA VISUAL COMPOSER */ .icon-library-icon.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner{ width:16px; height:16px; margin-right:15px; } .icon-library-icon.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner .vc_icon_element-icon{ top:0; left:0; transform:translate(0, 0); } /***************************** GET A QUOTE PAGE ******************************/ #site-header.inner-navbar.quote-header #sticky-header{ background-color: rgba(0,0,0,0.75); } #site-header.inner-navbar.quote-header.large-nav{ height:93px; } .quote-header .get-a-quote-button { display: none; } .quote-hero-image-container{ position: absolute; width: 100%; height: 1000px; top:0; } .quote-form-overlay{ position: absolute; width: 100%; height: 100px; background-color: #232323; top:0; z-index: 100; border-radius: 9px 9px 0 0; left: 0; } .page-template-template-quote .product-hero-right{ border: 6px solid #ffffff; } .quote-form-container{ position: relative; overflow: hidden; z-index: 101; } .quote-form-container .form-relative { margin-top: 40px; } .quote-form-container .section-heading{ color: #ffffff; } .quote-footer{ /* margin-top: -50px; */ } .page-template-template-quote.site-colour-Yellow .product-hero-left p{ } .page-template-template-quote.site-colour-Yellow .product-hero-right .quote-explain{ color: #ffffff; } .page-template-template-quote.site-colour-Yellow .wpcf7-form p{ color: #232323; } .page-template-template-quote .ui-datepicker { z-index: 1000!important; } .page-template-template-quote footer { background-color: #1d1d1b; color: #ffffff; } .page-template-template-quote #footer-column-logo { border: none; } .page-template-template-quote .footer-column a { color: #ffffff; } .desktop-device.page-template-template-quote .footer-column a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-quote .footer-column a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-quote .footer-column a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-quote .footer-column a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-quote .footer-column a:hover { color: #0098d5; } .page-template-template-quote .footer-column .menu-item-has-children a{ color: #BCCF02; } .site-colour-Green.page-template-template-quote .footer-column .menu-item-has-children a{ color: #BCCF02; } .site-colour-Yellow.page-template-template-quote .footer-column .menu-item-has-children a{ color: #b57ab4; } .site-colour-Purple.page-template-template-quote .footer-column .menu-item-has-children a{ color: #9370b1; } .site-colour-Blue.page-template-template-quote .footer-column .menu-item-has-children a{ color: #0098d5; } .desktop-device.page-template-template-quote .footer-column .menu-item-has-children a:hover { color: #ffffff; } .page-template-template-quote .footer-column .menu-item-has-children ul li a, .site-colour-Green.page-template-template-quote .footer-column .menu-item-has-children ul li a, .site-colour-Yellow.page-template-template-quote .footer-column .menu-item-has-children ul li a, .site-colour-Purple.page-template-template-quote .footer-column .menu-item-has-children ul li a, .site-colour-Blue.page-template-template-quote .footer-column .menu-item-has-children ul li a{ color: #ffffff; } .desktop-device.page-template-template-quote .footer-column .menu-item-has-children ul li a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-quote .footer-column .menu-item-has-children ul li a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-quote .footer-column .menu-item-has-children ul li a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-quote .footer-column .menu-item-has-children ul li a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-quote .footer-column .menu-item-has-children ul li a:hover { color: #0098d5; } .page-template-template-quote #site-legal { background-color: #1d1d1b; float: left; color: #7c7c7c; } .page-template-template-quote #site-legal p{ text-align: left; } .page-template-template-quote #site-legal a{ color: #ffffff; } .desktop-device.page-template-template-quote #site-legal a:hover { color: #BCCF02; } .desktop-device.site-colour-Green.page-template-template-quote #site-legal a:hover { color: #BCCF02; } .desktop-device.site-colour-Yellow.page-template-template-quote #site-legal a:hover { color: #b57ab4; } .desktop-device.site-colour-Purple.page-template-template-quote #site-legal a:hover { color: #9370b1; } .desktop-device.site-colour-Blue.page-template-template-quote #site-legal a:hover { color: #0098d5; } @media screen and (max-width: 800px){ .quote-form-overlay{ border-radius: 0; } /* .quote-footer{ margin-top: -42px; } */ } /***************************** BLOG PAGES ******************************/ .blog-teaser-image{ width: 100%; margin: 0; position: absolute; top: 0; left: 0; min-height: 233px; background-size: cover; background-repeat: no-repeat; background-position: center; } .responsive-blog-teaser-image{ width: 100%; padding: 0 1rem 0 0; } .latest-3-blogs-indiv-holder{ float: left; width: 30%; } .latest-3-blogs-indiv-holder:nth-of-type(2){ margin: 0 5%; } .latest-3-top, .latest-3-bottom{ float: left; width: 100%; overflow:hidden; } .latest-3-top{ position: relative; margin-bottom: 30px; height: 180px; } .latest-3-top .blog-teaser-image{ min-height: 180px; } .latest-4-featured-indiv-holder{ float: left; width: 40%; margin-bottom: 35px; } .latest-4-featured-indiv-holder:nth-of-type(2n-1){ margin-right: 5%; } .latest-4-featured-indiv-holder:nth-of-type(2n){ margin-left: 5%; } .featured-stories-left{ float: left; width: 60%; padding-right: 30px; } .popular-stories-right{ float: left; width: 40%; padding-left: 30px; } .featured-single{ text-align: center; color: #fff; } .featured-single .section-heading{ width: 50%; color: #fff; margin: 0 25% 40px; } .featured-single .text-link-holder a{ color: #fff; } .most-popular-indiv-holder{ float: left; width: 100%; margin-top: 30px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #999; } .most-popular-indiv-holder:first-of-type{ margin-top: 0; } .most-popular-indiv-holder:last-of-type{ border-bottom: none; } .most-popular-indiv-holder .latest-3-top{ float: left; width: 40%; height: auto; } .most-popular-indiv-holder .latest-3-bottom{ width: 60%; padding-left: 20px;} .most-popular-indiv-holder .latest-3-bottom .section-heading{ font-size: 1rem; margin-bottom: 15px; } .most-popular-indiv-holder .latest-3-bottom .text-link-holder a{ padding-left: 28px; background-size: 20px; font-size: 0.8rem; } .blog-by-category ul{ margin: 0; list-style: none; } .blog-by-category ul li{ float: left; width: 30%; text-align: center; margin-bottom: 35px; } .blog-by-category ul li:nth-of-type(3n+2){ margin: 0 5%; } .blog-by-category ul li img{ margin-bottom: 30px; } .blog-by-category ul li a{ position: relative; float: left; height: 3rem; text-align: center; width: 100%; } .blog-by-category ul li .text-link-holder a{ height: auto; width: auto; } /*- SINGLE BLOG ENTRY -*/ .single-blog-left{ float: left; width: 65%; padding-right: 30px } .single-blog-right{ float: left; width: 35%; padding-left: 30px } .single-blog-image img{ float: none; margin: 0 auto 50px; } .archives{ margin:0; padding-right:20px; list-style:none; } .archives li{ } .archives li a{ float:left; margin-bottom:5px; } .page-numbers, .nav-links a{ background-color:#e2f4f8; color:#00abc5; } .page-numbers.current{ background-color:#00abc5; color:#e2f4f8; } .desktop-device .pagination a:hover{ background-color:#c8ebf2; } @media screen and (max-width:768px){ .page-section-left{ min-height: 100px; } .blog-teaser-image{ min-height: 200px; } #latest-3-articles-section{ padding-left: 12.5%; padding-right: 12.5%; } .latest-3-blogs-indiv-holder .section-heading{ font-size: 1rem; } .latest-3-bottom p{ display: none; } .featured-single{ width: 75%; margin: 0 12.5%; } .featured-single .section-heading{ width: 80%; margin: 0 10% 40px; } .featured-stories-left{ width: 85%; padding-right: 0; margin: 0 7.5% 50px; } .latest-4-featured-indiv-holder{ width: 45%; } .latest-4-featured-indiv-holder .latest-3-top { height: 135px; } .popular-stories-right{ width: 75%; padding-left: 0; margin: 0 12.5%; } #blog-category-section{ width: 75%; margin: 0 12.5%; } .single-blog-left, .single-blog-right{ width: 75%; padding-right: 0px; padding-left: 0px; margin: 0 12.5%; } .single-blog-left{ margin-bottom: 50px; } #latest-3-articles-section .text-link-holder a{ padding-left: 32px; background-size: 24px; font-size: 1rem; } } @media screen and (max-width:600px){ .blog-by-category ul li{ width: 45%; } .blog-by-category ul li:nth-of-type(3n+2){ margin: 0; margin-bottom: 35px; } .blog-by-category ul li:nth-of-type(2n){ /* margin-left: 10%; */ } .latest-3-blogs-indiv-holder{ width: 100%; margin: 0px 0px 30px; } .latest-3-blogs-indiv-holder:nth-of-type(2){ margin: 0px 0px 30px; } .latest-4-featured-indiv-holder{ width: 100%; margin: 0 0 35px; } .latest-4-featured-indiv-holder:nth-of-type(2n-1){ margin-right: 0; } .latest-4-featured-indiv-holder:nth-of-type(2n){ margin-left: 0; } .latest-4-featured-indiv-holder .latest-3-top { height: 180px; } } @media screen and (max-width:420px){ .latest-3-top { height: 145px; } } @media screen and (max-width: 360px) { .latest-3-top { height: 115px; } .latest-4-featured-indiv-holder .latest-3-top { height: 135px; } } .wpcf7-checkbox .wpcf7-list-item{ padding-top: 10px; } /* hack to fix checkbox positioning on TSP. Fancy sibling selector :o */ .quote-cover_required ~ .form-line{ bottom: 0; } body.privacy #main *{ } body.privacy #main p{ } body.privacy #main a{ } body.privacy #main li{ line-height:160%; } body.privacy #main table{ width:100%; } body.privacy #main table{ margin-bottom:20px; border-collapse:collapse; } body.privacy #main table tr{ } body.privacy #main table th{ padding:5px 10px; border:#333 solid 1px; background: #666; color:#fff !important; } body.privacy #main table th p{ color:#fff !important; } body.privacy #main table td{ padding:5px 10px; border:#333 solid 1px; vertical-align: top; } body.privacy #main table p{ padding:0; margin:0; line-height: 160%; } .grecaptcha-badge { display: none !important; } /* product page redesign - 22/11/19 */ .site-colour-Yellow .product-form-container, .site-colour-Green .product-form-container, .site-colour-Purple .product-form-container, .site-colour-Blue .product-form-container { border: 5px black solid; border-radius: 14px; } .site-colour-Yellow .product-contact-heading{ font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem; color: #b57ab4; text-align: center; } .site-colour-Green .product-contact-heading{ font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem; color: #BCCF02; text-align: center; } .site-colour-Purple .product-contact-heading{ font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem; color: #9370b1; text-align: center; } .site-colour-Blue .product-contact-heading{ font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 1rem; color: #0098d5; text-align: center; } .product-related-products-container{ position: relative; overflow: hidden; border: 2px solid #e5e5e5; border-radius: 10px; padding: 40px; margin-bottom: 40px; } .related-product-title{ font-weight: 700; } .related-product-container{ position: relative; overflow: hidden; float: left; width: 100%; margin-top: 30px; } .related-product-container .image{ position: relative; overflow: hidden; float: right; width: 100%; height: 150px; } .related-product-container .image-view-overlay{ position: absolute; background-color: #BCCF02; color: #1d1d1b; border-radius: 0 0 0 100px; right: 0; padding: 5px 10px 6px 22px; text-transform: uppercase; font-size: 0.8rem; font-weight: 700; transition: all 0.3s; } .site-colour-Green .related-product-container .image-view-overlay{ background-color: #BCCF02; } .site-colour-Yellow .related-product-container .image-view-overlay{ background-color: #b57ab4; } .site-colour-Purple .related-product-container .image-view-overlay{ background-color: #9370b1; } .site-colour-Blue .related-product-container .image-view-overlay{ background-color: #0098d5; } .desktop-device .related-product-container .image:hover .image-view-overlay{ padding: 10px 21px 11px 33px; } .product-team-members-container{ position: relative; overflow: hidden; color: white; border: none; background-color: #1d1d1b; border-radius: 10px; padding: 40px; margin-bottom: 40px; } .team-members-container:nth-child(odd) .image { float: left; margin-right: 20px; } .team-members-container:nth-child(even) .image { margin-left: 20px; } .site-colour-Yellow .team-member-title{ font-weight: 700; text-align: center; color: #b57ab4; } .site-colour-Green .team-member-title{ font-weight: 700; text-align: center; color: #BCCF02; } .site-colour-Purple .team-member-title{ font-weight: 700; text-align: center; color: #9370b1; } .site-colour-Blue .team-member-title{ font-weight: 700; text-align: center; color: #0098d5; } .site-colour-Yellow .team-members-title{ font-weight: 700; color: #b57ab4; text-align: center; margin-top: 40px; } .site-colour-Green .team-members-title{ font-weight: 700; color: #BCCF02; text-align: center; margin-top: 40px; } .site-colour-Purple .team-members-title{ font-weight: 700; color: #9370b1; text-align: center; margin-top: 40px; } .site-colour-Blue .team-members-title{ font-weight: 700; color: #0098d5; text-align: center; margin-top: 40px; } .team-members-content{ color: white; text-align: center; } .team-members-container{ position: relative; overflow: hidden; float: left; width: 100%; margin-top: 30px; } .team-members-container .image:before{ background: none; border: 2px solid black; content: ""; display: block; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; border-radius: 250px; pointer-events: none; } .team-members-container .image{ position: relative; overflow: hidden; float: right; width: 150px; height: 150px; border-radius: 250px; border: 2px grey solid; margin-top: 5px; } .team-members-container .image-view-overlay{ position: absolute; background-color: #BCCF02; color: #1d1d1b; border-radius: 0 0 0 100px; right: 0; padding: 5px 10px 6px 22px; text-transform: uppercase; font-size: 0.8rem; font-weight: 700; transition: all 0.3s; } .site-colour-Green .team-members-container .image-view-overlay{ background-color: #BCCF02; } .site-colour-Yellow .team-members-container .image-view-overlay{ background-color: #b57ab4; } .site-colour-Purple .team-members-container .image-view-overlay{ background-color: #9370b1; } .site-colour-Blue .team-members-container .image-view-overlay{ background-color: #0098d5; } .desktop-device .team-members-container .image:hover .image-view-overlay{ padding: 10px 21px 11px 33px; } @media screen and (max-width:1199px){ .team-members-container .image { float: none; margin-left: auto; margin-right: auto; } .team-members-container:nth-child(even) .image { margin-left: auto; } .team-members-container:nth-child(odd) .image { float: none; margin-right: auto; } .hero-bottom-text { display: none; } } @media screen and (max-width:750px) and (-ms-high-contrast: none), (-ms-high-contrast: active) { #product-content-section{ max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; padding: 100px 20px !important; display: flex !important; flex-direction: column; } } @media screen and (max-width:750px){ .product-related-products-container { width: 100%; } } .product-testimonial-section-wrapper { position: relative; overflow: hidden; float: left; width: 100%; max-width: 420px; background-color: #1d1d1b; } @media screen and (max-width: 1023px){ .product-testimonial-section-wrapper{ max-width: calc(100vw - 60px); } } .charity-testimonal-heading { padding: 20px 40px; font-weight: 700; } .product-testimonials-section-wrapper .testimonial-quote p { text-align: left; } .charity-image { width: 100%; height: 150px; } .hero-bottom-text { background-color: black; opacity: 0.8; width: 100%; margin-top: -90px; height: 90px; color: white; padding-top: 8px; padding-left: 8px; } .hero-bottom-tick li { list-style: none; font-size: 25px } @media screen and (max-width:1400px){ .hero-bottom-tick li { font-size: 20px } } @media screen and (max-width:1300px){ .hero-bottom-tick li { font-size: 18px } } .hero-bottom-tick li:before { content: "\2713"; color: white; font-weight: 800; display: inline-block; width: 1.5em; height: 1.5em; /*margin-left: -2.5em;*/ background-color: transparent; border: 2px white solid; border-radius: 50px; padding: 0px 15px; font-size: 50px; margin-right: 20px; /*margin-top: 8px;*/ vertical-align: middle; } .product-testimonial-section-wrapper:before, .product-team-members-container:before { background: none; border: 4px solid grey; content: ""; display: block; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 10px; pointer-events: none; } .testimonial-quote p { margin-bottom: 30px; } .team-members-description { color: white; } .page-template-template-product .section-heading { margin-top: 20px; } .site-colour-Yellow .product-testimonials-section-container { margin-top: 0px; margin-bottom: 30px; } .site-colour-Yellow .product-contact-section-container { margin-bottom: 30px; } .product-hero-left { width: 53%; padding-right: 20px; } .page-template-template-product .product-testimonials-section-wrapper .testimonial-quote p { font-size: 1rem; } /* THANK YOU NHS BANNER .home #sticky-header, .page-template-template-product #sticky-header { background-color: #005EB8 !important; } .page-template-template-product #site-header.inner-navbar.product-header.large-nav { height: 120px !important; } .home #site-logo img, .page-template-template-product #site-logo img, .page-template-template-product .logo, .page-template-template-product .scrolled-down-logo { display: none !important; } .home #sticky-header .left-content:before, .page-template-template-product #sticky-header .left-content:before { content: "THANK YOU "; font-size: 46px; letter-spacing: 10px; color: white; font-weight: 700; } .home #sticky-header .left-content:after, .page-template-template-product #sticky-header .left-content:after { background-image: url('/wp-content/uploads/carbon/themes/bn/img/nhs-logo.jpg'); background-size: contain; background-repeat: no-repeat; width: 100px; font-size: 46px; content: " "; color: transparent; } @media screen and (max-width:1024px){ .home #sticky-header .left-content:before, .home #sticky-header .left-content:after, .page-template-template-product #sticky-header .left-content:before, .page-template-template-product #sticky-header .left-content:after { font-size: 36px; } } @media screen and (max-width:500px){ .home #sticky-header .left-content:before, .home #sticky-header .left-content:after, .page-template-template-product #sticky-header .left-content:before, .page-template-template-product #sticky-header .left-content:after { font-size: 15px; letter-spacing: 5px; } } */ /************************************************************************************ COPIED FROM THE TSP CHILD SITE 26-8-2020 *************************************************************************************/ /*********************** CHARITY SEMINAR LANDING PAGE *************************/ body.page-id-2021 #main-wrapper{ z-index:501; } body.page-id-2021.scrolled-down #main-wrapper{ z-index:499; } .landing-page-seminar-content-section-width{ width: 70%; } .landing-page-seminar-content-section-padding{ padding: 70px 5vw; } .landing-page-seminar-section-wrapper{ } .landing-page-seminar-section{ transition:all .3s; } .landing-page-seminar-section-content{ } .seminar-landing-page-split-section-large-left{ padding-right:5%; } @media screen and (max-width:767px){ .seminar-landing-page-split-section-large-left{ padding-right:0; } } .seminar-landing-page-split-section-heading-large{ float:left; font-size: 2rem; font-weight: 500; margin-bottom: 30px; line-height: 130%; } .seminar-landing-page-split-section-body-text{ font-size: 0.85rem; } #landing-page-seminar-section-1-wrapper{ } #landing-page-seminar-section-1{ margin-top:-100px; } #landing-page-seminar-section-1-content{ background-color:#fff; border-bottom:2px solid #999; } body.scrolled-down #landing-page-seminar-section-1{ transform:translateY(0); } #landing-page-seminar-section-2-wrapper{ padding-bottom:50px; } #landing-page-seminar-section-2{ } #seminar-landing-page-details-body-copy{ } #seminar-landing-page-details-body-copy h4{ margin-bottom: 10px; } #seminar-landing-page-details-body-copy p{ margin-bottom: 30px; } #seminar-details-date{ margin-bottom:20px; color:#a6d000; font-size: 3rem; font-weight: 600; line-height: 130%; } #seminar-details-address{ max-width:250px; margin-bottom:40px; } #seminar-details-image-wrapper{ padding-right: 20px; } #seminar-details-image{ float:left; max-width:100%; } #landing-page-seminar-section-3-wrapper{ } #landing-page-seminar-section-3{ overflow:hidden; background-color:#505050; } #landing-page-seminar-section-3 *{ color:#fff; } #seminar-landing-page-social{ } #seminar-landing-page-social-links{ display: block; margin: 0 auto 20px; width: 160px; overflow: hidden; } #seminar-landing-page-social-links > a{ float: left; margin: 0 5px; width: 30px; height: 30px; text-align: center; } #seminar-landing-page-social-links > a > i{ font-size: 1.2rem; transition:color .3s; } .desktop-device #seminar-landing-page-social-links > a:hover > i{ color:#a6d000; } #seminar-landing-page-form-heading{ color:#a6d000; font-weight:300; } #seminar-landing-page-form-outro p{ font-size: 0.75rem; } #seminar-landing-page-form{ } #seminar-landing-page-form .seminar-form-field{ } #seminar-landing-page-form .seminar-form-field:nth-of-type(2n){ padding-right:10px; } #seminar-landing-page-form .seminar-form-field:nth-of-type(2n-1){ padding-left:10px; } #seminar-landing-page-form .seminar-form-field input[type=text], #seminar-landing-page-form .seminar-form-field input[type=email]{ float:left; width:100%; padding: 9px 5% !important; background-color:#fff; border-radius:2px; color:#505050; } #seminar-landing-page-form input[type=submit], #seminar-landing-page-form button[type=submit]{ background: #a6d000; color: #505050; text-align: center; padding: 5px 30px; height: auto; border-radius:2px; } #seminar-landing-page-form .additional-info-wrapper p{ margin:0; } #seminar-landing-page-form .wpcf7-recaptcha{ float:right; } #landing-page-seminar-section-4-wrapper{ } #landing-page-seminar-section-4{ } #landing-page-seminar-section-5-wrapper{ background-color:#e3e3e3; } #landing-page-seminar-section-5{ } .seminar-landing-page-partner-logo-link img{ margin:auto; } @media screen and (max-width:1220px){ #landing-page-seminar-section-1{ margin-top:0; } } @media screen and (max-width:1023px){ .landing-page-seminar-content-section-width { width: 80%; } .seminar-landing-page-split-section-heading-large{ font-size: 1.6rem; } } @media screen and (max-height:767px){ } @media screen and (max-width:767px){ .landing-page-seminar-content-section-width { width: 100%; } #landing-page-seminar-section-2 { margin: 0; width: 100%; } .seminar-landing-page-split-section-heading-large { font-size: 1.3rem; } #landing-page-seminar-section-2{ margin-bottom:50px; } #seminar-details-date{ font-size:2rem; } #seminar-details-address{ float:right; max-width: none; width: 50%; } #seminar-details-image-wrapper { width: 50%; } #seminar-landing-page-details-body-copy{ width:80%; margin: 0 10%; } } @media screen and (max-width:479px){ #seminar-landing-page-form .seminar-form-field, #seminar-landing-page-form .seminar-form-field:nth-of-type(2n), #seminar-landing-page-form .seminar-form-field:nth-of-type(2n-1){ padding-left:30px; padding-right:10px; } } /********************** PRODUCT LANDING PAGE - OCTOBER 2019 **********************/ /***** COLOURS *****/ .landing-page-product .product-hero-right{ background-color:#ff3333; border: 8px solid #000; } .landing-page-product .product-hero-heading{ color:#fff; } .landing-page-product .product-form-container .section-heading{ font-weight: 500; } .landing-page-product .product-phone-icon i, .landing-page-quote .product-phone-icon i{ color:#ff3333; } .landing-page-product .product-main-content-section{ border-color:#ff3333; } .desktop-device.landing-page-product .product-main-content-section a:hover{ color:#ff3333; } .landing-page-product .product-contact-button{ background-color:#ff3333; } .landing-page-product #site-legal, .landing-page-quote #site-legal{ background-color:#000; color:#999; } .landing-page-product #site-legal *, .landing-page-quote #site-legal *{ text-align:left; } .landing-page-product #site-legal a, .landing-page-quote #site-legal a{ color:#fff; } .desktop-device.landing-page-product #site-legal a:hover, .landing-page-quote #site-legal a:hover{ color:#ff3333; } .landing-page-product .form-line-full, .landing-page-quote .form-line-full{ background-color:#000; } .site-colour-Yellow .landing-page-product .bg-color-sitecolour{ background-color: #ff3333; } /***** ELEMENTS *****/ .hero-additional-text-box{ background: #fff; border: 7px solid #000; border-radius: 20px; max-width: 75%; margin-bottom: 30px; padding: 10px 15px; } .hero-additional-text-box p{ color: #000; font-size: 0.8rem; margin-bottom: 15px; } .product-sidebar-image{ margin-top:50px; border-radius: 10px; } /********************** QUOTE LANDING PAGE - OCTOBER 2019 **********************/ .landing-page-quote .quote-form-container .section-heading{ font-weight: 500; } .quote-hero-image-container{ min-height:100vh; } .landing-page-logo-right{ max-height: 75px; margin-top: -11px; } .landing-page-quote .product-inner-page-content{ min-height: calc(100vh - 230px); } .landing-page-quote .product-hero-heading{ color:#ff3333; } .landing-page-quote .product-hero-right{ background-color:#ff3333; border: 8px solid #fff; } .landing-page-quote .product-form-container, .landing-page-product .product-form-container{ border:none; border-radius: 0; } .landing-page-quote .product-form-container .quote-explain, .page-template-template-quote .product-form-container .quote-explain{ color: #fff; } /*.landing-page-quote .product-form-container .quote-explain,*/ .landing-page-product .product-form-container .quote-explain{ color:#000; } #site-legal{ position:relative; } @media screen and (max-width:1023px){ .landing-page-logo-right{ margin-top: -6px; } } .landing-page-product .product-main-section { width: 100%; } /********************* QUOTE/REQUOTE PAGES - ADDED TO FIX 90% ZOOM ISSUE JAN 2020 *****************/ .page-template-template-quote .product-inner-page-content{ margin-top:0; } .page-template-template-quote .product-hero-text-container{ padding-top: 200px; } .page-template-template-quote #product-hero-section{ position: relative; overflow: hidden; } /**************** FIX FOR RESPONSIVE VERSION OF TESTIMONIALS ON PRODUCT PAGE FEB 2020 ***************/ @media screen and (max-width:750px){ .product-testimonial-section-wrapper{ max-width: calc(100vw - 60px); } } @media screen and (max-width:450px){ .product-testimonial-section-wrapper{ max-width: calc(100vw - 20px); } } /*#site-logo img { width: 125px !important; height: 125px !important; }*/ /*********** HIDING SECTIONS OF THE PRODUCT PAGES ON SMALL SCREENS - ADDED 17-4-2020 *************/ @media screen and (max-width:700px){ /* FIX FOR CONTENT GOING OFF RIGHT OF SCREEN */ .product-main-content-section-style3 .full-width .title, .product-main-content-section-style3 .content-left .title{ font-size: 1.3rem; } /* HIDE SECTIONS */ .product-related-items-container, .product-related-products-container, .product-team-members-container{ display:none; } } @media screen and (max-width:479px){ /* FIX FOR CONTENT GOING OFF RIGHT OF SCREEN */ .product-main-content-section-style3 .full-width .title, .product-main-content-section-style3 .content-left .title{ font-size: 1.2rem; } } /* removing cog */ .site-colour-Yellow .more-twitter a{ background-image: url('/wp-content/uploads/carbon/themes/bn/css/img/icons/small_ribbon.jpg'); background-size: 27px; background-repeat: no-repeat; padding-left: 40px; color: #fff; display: table; margin: 0 auto; } .site-colour-Yellow #site-header { opacity: 1; } .site-colour-Yellow #site-header.inner-navbar.product-header.large-nav { height: 160px; } .logo { width: 125px; height: 125px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .scrolled-down-logo { display: none; } .scrolled-down .scrolled-down-logo { display: block; width: 60px; height: 60px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .scrolled-down .logo { display: none; } /***************************************************************************** ADDITIONAL STYLING TO ADJUST THE ABOVE FOR NC ******************************************************************************/ /*body.landing-page-product #site-header.inner-navbar.product-header #sticky-header{ background-color: #000; }*/ body.page-template-templatestemplate-product-landing-page-php .product-inner-page-content{ margin-top: 93px; } .product-testimonials-section-container{ margin-bottom: 30px; } body.contact #product-section-1 .page-section-left { width: 33.33%; } body.contact #product-section-1 .page-section-right{ width: 60%; } @media screen and (max-width:768px){ body.contact #product-section-1 .page-section-left { width: 100%; margin-left: 0; } body.contact #product-section-1 .page-section-right{ width: 100%; margin-right: 0; } } /****************** COVID POPUP RESPONSIVE FIX *********************/ @media screen and (max-width: 1024px){ #pum-7597 #popmake-7597 { max-height: 80vh !important; height: auto !important; } } /*********************** PRODUCT PAGE TESTIMONIALS ************************/ .overall-testimonials-carousel-with-arrows{ position: relative; overflow: hidden; padding-bottom: 40px; } .overall-testimonials-carousel-with-arrows .slick-arrow{ background: none; top: auto; bottom: 0; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .testimonials-light-bg.overall-testimonials-carousel-with-arrows .slick-arrow{ bottom: -5px; } .overall-testimonials-carousel-with-arrows .slick-prev{ left: 0; } .overall-testimonials-carousel-with-arrows .slick-next{ right: 0; } .testimonials-light-bg.overall-testimonials-carousel-with-arrows .slick-prev{ left: 35px; } .testimonials-light-bg.overall-testimonials-carousel-with-arrows .slick-next{ right: 35px; } .overall-testimonials-carousel-with-arrows .slick-arrow .fa, .overall-testimonials-carousel-with-arrows .slick-arrow .fab{ color: #fff; font-size: 1.5rem; height: 34px; padding-top: 3px; width: 32px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .overall-testimonials-carousel-with-arrows.testimonials-light-bg .slick-arrow .fa, .overall-testimonials-carousel-with-arrows.testimonials-light-bg .slick-arrow .fab{ color: #000; } .desktop-device .product-testimonial-section-wrapper .slick-arrow .fa:hover, .desktop-device .product-testimonial-section-wrapper .slick-arrow .fab:hover, .overall-testimonials-carousel-with-arrows.testimonials-light-bg .slick-arrow .fa:hover, .overall-testimonials-carousel-with-arrows.testimonials-light-bg .slick-arrow .fab:hover{ color: #BCCF02; } /*********************** PRODUCT PAGE FIX FOR TOP FORM NOTIFICATION OUTPUT ************************/ .product-hero-text-container .product-form-container .wpcf7 .wpcf7-response-output{ position: absolute; bottom: -48px; left: -7px; max-width: calc(100% - 140px); font-size: 0.7rem; } .quote-form-container{ overflow: visible; }