/* CUSTOMIZE THE CAROUSEL */ .topbanana { background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-color:#2b66bb ; border-top: 1rem solid #f1c443; border-bottom: 0.5rem solid #f1c443; box-shadow: inset 0 -.4rem 0 0 #f1c443; width:100%; margin-bottom: 1rem;} .carousel {margin-bottom: 20px; width:100%; border-bottom: 0.4rem solid #f1c443; height:490px;} .carousel-caption {bottom: 2rem; z-index: 10;} .carousel-caption h2 {max-width:500px; margin:auto; text-align:left;} .carousel-caption h2 span {background-color:rgba(0, 0, 0, 0.7); padding:0.1em 1em 0.1em 3px} .carousel-caption p {max-width:500px; margin:auto; text-align:left; padding:3px; margin-top:3px;} .carousel-caption p span {box-shadow: 0 0 0 3px #000; background-color: #000; line-height: 1.85;} .innerbanana {z-index:700; height:490px; top:5px; background-size:cover; background-position: center;} .fs_header {margin-top:-518px; height:510px; overflow:hidden;} .carousel-item {height: 510px; background-color: #000; background-size: cover; background-position: center;} .carousel-control-prev {margin-top:350px; z-index:800000;} .carousel-control-next {margin-top:350px; z-index:800000;} /* Fleet Service specific -------------------------------------------------- general colour pallette: 2b66bb ff9000 b1afc3 ffd399 general colour pallette 25/04: ffd662 f1c443 2b66bb 0040a1 --------------------------------------------------*/ body {overflow-x: hidden; padding-top:3.9rem; background-color: #fff;} p,table {max-width: 50rem;} /* limit line length for readability */ header h1 {position: absolute; z-index:500; left:0rem; right:0rem; text-align:center; } header h1 img {position: relative; width:100%; top:2.8rem; } h2 {font-family: 'Roboto SLab', sans-serif; } h3 {font-family: 'Roboto SLab', sans-serif; } header {display:block; overflow: hidden;} header .col-md-4 {border:1px solid #fff;} .fig_gallery {display:inline-block; vertical-align:top; min-height:20rem;} .figure {padding:3rem;} .figure-caption {} .lead {text-align:left; margin:auto; padding:3rem 0rem 2rem; min-height:15rem; display:table-cell; vertical-align:middle; color:#fff; text-shadow: 1px 1px 15px #003;} .lead a {color:#ff3; text-decoration:underline;} .navbar {border-bottom: 0.4rem solid #f1c443;} .navbar ul {border-right:1px solid #666;} .nav-item {border-left:1px solid #666;} .nav-item a {font-size:120%; font-weight:bold; } .fs_search {display:block; position:fixed; top:0.7rem; right:0.7rem; z-index:3000;} .fs_selected a {color:#333 !important;} .fs_selected {background: #f1c443; color:#333 !important;} .fs_pagetop {background-color:#2b66bb; height:8rem;} .fs_pagetop h1 {top:2rem;} .fs_width {width:100%; max-width:1300px; margin:auto;} .fs_homeheight {min-height:400px; margin-right:0px; margin-left:0px;} .fs_headheight {min-height:300px;} .fs_productbg {display:block; margin:auto; max-width:1300px; background: no-repeat center center; background-size: cover; } .fs_producttop {background-color:#2b66bb;} .fs_producttop h1 {width:100%;} .fs_producttop h1 img {margin:auto;} .fs_prodlogo {padding-top:1.3rem;} .fs_productheader {display:block; margin:auto; height:300px; margin-bottom:-300px; width:1300px; background:url("/application/themes/fleetservice/img/gradient.png") repeat-y center center; } .fs_homeheader {display:block; margin:auto; height:400px; margin-bottom:-400px; width:100%; background:url("/application/themes/fleetservice/img/gradient.png") repeat-y center center; } .fs_homeicons {display:block; height:100%;} .fs_homeicons ul ul { display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */ display: flex; -webkit-flex-flow: wrap column; /* Safari 6.1+ */ flex-flow: wrap column; max-height: 150px; /* Limit height to whatever you need */ } .fs_homeicons li {display:inline-block; width:18%; padding:2%; height:90%; position: relative; min-width:6.2rem; background:url("/application/themes/fleetservice/img/icon.png") no-repeat center center; background-size: contain; } .fs_homeicons li a {display:table; height:100%; vertical-align:middle; text-align:center; color:#fff;} .fs_homeicons figure {width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .fs_homeicons img {width:100%; padding-top:1.3em;} .fs_homeicons figcaption {display:block; text-align:center; width:100%; height:100%} .fs_tagline {position:absolute; right:0px; bottom:-60px; z-index:70000} .fs_entry ul {margin:0px; padding:0px; list-style-type: none;} .fs_entry li ul {margin:0px 5rem 0px 2rem;} .fs_entry li ul li {background-color: #666; margin:1px; padding:0px; color:#fff; width:300px;} .fs_entry li ul li label {display:inline-block; width:90%;} .fs_entry li ul li input {display:inline-block; width:5%;} .fs_entry img {height:1rem; padding:0 2rem;} .fs_entry input,textarea {display:block; width:100%; margin-bottom:1rem; color:#000;} .fs_entry iframe {width:100%; margin-top:2rem; border:0px; overflow:auto;} .fs_entry button {margin:2rem 0rem 0px 2rem;} .fs_edit input,textarea {display:block; width:100%; color:#000;} .fs_edit img {float:right;} .fs_edit label {width:100%; margin-top:1rem;} .fs_edit img {padding:3rem;} .fs_little label {margin:0; width:4rem; display:inline-block; text-align:right;} .fs_little input {margin:0; width:1rem; display:inline-block;} .fs_icons {text-align:right;} .fs_icons img {height:2.1em; padding-left:0.5em; opacity:.7; } .fs_pagetitle {background-color:#f1c443; margin-bottom:1.5rem; margin-top:-1.7rem; padding:0.7rem; box-shadow: 0px 2px 14px rgba(50, 50, 50, 0.75); z-index:10;} .fs_pagetitle h2 {color:#1c437a; max-width:1300px; margin:auto; padding-left:0.5rem;} .fs_main {max-width:1300px; margin:auto; min-height:25em; padding:1.2rem; margin-top:2rem;} .fs_maintext {margin-top:2rem;} .fs_footer {background:#f1c443; width:100%; margin-top:6rem; padding:2rem;} .fs_footpad img {margin:10px 15px 20px; border:10px solid #fff; max-width:100%;} .fs_footer P {width:100%; text-align:center; margin:auto;} .fs_footer a {color:#1c437a;} .fs_saleitem {padding:1.5rem; border-bottom:1px solid #2b66bb;} .fs_news h3 {margin-top:-10px; padding-top:-5px; font-size:120%; } .fs_gallery {text-align:left; margin-top:-1.2rem; max-width:500px;} /* .fs_gallery .img-thumbnail {margin:0 .3rem .6rem; width:11.2rem;}*/ .fs_gallery .img-thumbnail {margin:0 .3rem .6rem;} .fancybox-caption {font-size:1.2rem !important; max-width:900px; margin:auto;} .fs_bigproductimage {text-align:center;} .fs_bigproductimage img {margin:auto; border:6px solid #999;} .fs_full_bg {background: transparent url("/application/themes/fleetservice/img/navbg.png") repeat-y; background-size:25% 100%;} .fs_full {background: transparent url("/application/themes/fleetservice/img/navbg.png") repeat-y; background-size:25% 100%; margin-top:-1.5rem; margin-bottom:-6rem; padding-top:2rem; padding-bottom:2rem; box-shadow: inset 0px 7px 14px -10px #000;} .fsmain figure {width:100%; text-align:center;} .fs_dropdown {text-align:right;} .dropdown {display:block; width:100%;} .dropdown button {display:block; width:100%; text-align:right; background-repeat: no-repeat; height:2.5rem; background-size: contain; background-position:.7rem; padding:.5rem .8rem; margin:.3rem; border:0px; border-bottom:1px solid #fff; border-radius:0px; background-color:transparent; font-size:120%;} .dropdown button :active {border-bottom:1px solid #fff;} .dropdown button :hover {border-bottom:1px solid #fff;} .dropdown-menu {margin-top:0.4rem;} .fs_colour_0 {background-color:#E91E63} .fs_colour_1 {background-color:#ff3d00} .fs_colour_2 {background-color:#7C4DFF} .fs_colour_3 {background-color:#03A9F4} .fs_colour_4 {background-color:#8BC34A} .fs_colour_5 {background-color:#9C27B0} .fs_colour_6 {background-color:#00BCD4} .fs_colour_7 {background-color:#536DFE} .fs_colour_8 {background-color:#FF5722} .fs_colour_9 {background-color:#009688} .fs_filter { position: relative; border-radius: 10px; } .fs_filter::before { content: ""; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; /* screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity */ mix-blend-mode: color-dodge; opacity: 0.8; background-image:url('/application/themes/fleetservice/img/colour_gradient.png'); border-radius: 10px; } .fs_pagelist {padding:1.2rem; margin-top:2rem; padding-right:260px; background-position:right center; background-repeat:repeat-y; border-radius: 10px;} .fs_pagelist h3 {margin-top:-0.4rem;} .fs_pagelist h4 {margin-top:-0.4rem;} .fs_pagelist h4 .fs_icons {display:block; text-align:left; margin-top:-0.4rem} .fs_pagelist h4 img {height:1.0rem;} .fs_rounded {border-radius: 10px;} .fs_pagelist p a {color:#003;} .fs_box_van {background-image:url('/application/themes/fleetservice/img/box_van_icon.png')} .fs_building {background-image:url('/application/themes/fleetservice/img/building_icon.png')} .fs_car {background-image:url('/application/themes/fleetservice/img/car_icon.png')} .fs_panel_van {background-image:url('/application/themes/fleetservice/img/panel_van_icon.png')} .fs_motor_home {background-image:url('/application/themes/fleetservice/img/motor_home_icon.png')} .fs_truck {background-image:url('/application/themes/fleetservice/img/truck_icon.png');} .fs_device {background-image:url('/application/themes/fleetservice/img/device_icon.png')} .fs_component {background-image:url('/application/themes/fleetservice/img/component_icon.png');} .fs_fleet_users {background-image:url('/application/themes/fleetservice/img/fleet_users_icon.png');} .fs_equipment {background-image:url('/application/themes/fleetservice/img/equipment_icon.png');} .fs_vehicles {background-image:url('/application/themes/fleetservice/img/vehicles_icon.png');} .fs_centrebox {display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display:table; } .fs_homepage {width:100%;} .fs_pdfdownload {width:100%; background-color:#eee; padding:0.2rem; margin-bottom:4rem; border:1px solid #999;} .fs_pdfdownload img {height:3.5rem; float:left; margin:0.3rem;} .fs_pdfdownload p {padding:0.6rem 3rem 0px 0px;} .fs_greytable {width: 100%; background-color:#e5e5e5; border-collapse:collapse; z-index:5000;} .fs_greytable img {max-width:100px; } .fs_greytable td {font-size:70%; border: 1px solid #333; } .fs_greytable th {border: 1px solid #333; text-align:center; background-color:#fec;} /* last minute fixes, Bootstrap breakpoints */ .btn {word-wrap: break-word; white-space:normal; text-align:left;} @media (max-width: 576px) { .carousel {visibility: hidden; display:none;} .fs_full {background-image:none;} .fs_producttop {width:calc(100vw - 1.5rem);} header h1 {position: static;} header h1 img {position: static; width:80%;} .fs_news img {float:right; max-height:200px; max-width:200px; border:4px solid white;} .fs_news h3 {margin-top:0px; } .fs_prodlogo {width:80%;} .fs_homeheight {width:100%;} .fs_homeheader {min-height:100%;} .fs_productbg {padding:0px;} .col-md-1 {display:none; visibility:hidden;} .col-md-3 {display:none; visibility:hidden;} .col-md-4 {width:100%; margin:auto; padding:0px; text-align:center; height:auto;} .col-md-6 {width:100%; margin:auto; padding:0px; text-align:center;} .col-md-8 {width:100%; margin:auto; padding:0px;} .lead {padding:2rem;} .fs_maintext {padding:1.4rem; text-align:left;} .fs_pagetitle {padding:0.6rem; width:100%; margin-top:-1.7rem;} .fs_pagetitle h2 {font-size:160%;} .fs_icons img {height:1.2em; padding-left:0.5em; opacity:1;} .row {width:100%; margin:auto; padding:0px;} .fs_search {display:block; position:fixed; top:0.1rem; right:0.5rem; z-index:3000; width: calc(100% - 6rem);} .fs_search button {display:none;} .fs_centrebox {background-color:#003; color:#fff; height:auto;} ul.fs_homeicons {padding-left:0px; margin-top:1rem;} .fs_homeicons li {display:block; width:80%; margin:auto; background-image:none;} .fs_homeicons li a {display:block; background-color:#003; border:1px solid #000; height:2rem;} .fs_homeicons li a:hover {background-color:#011e46} .fs_homeicons li a:active {background-color:#61a3ff} .fs_homeicons figure img {display:none;} .fs_homeicons figcaption {display:inline;} .fs_homepage {margin-top:-4rem;} .fs_homeheader {height:550px; margin-bottom:-550px;} .fs_rounded {border-radius: 0px; margin-top:-2rem;} .fs_rounded p {max-width:320px; margin:auto; text-align:left;} .fs_filter {border-radius: 0px;} .text-bottom {position:absolute; bottom:0px; width:calc(100vw - 2.4rem); padding-bottom:3rem;} .fs_pagelist {padding:0.8rem; margin-top:0rem; background-image:none !important; border-radius:0px;} .fs_dropdown {display:none; visibility:hidden;} .fs_full_bg {background-image:none;} div.col-md-8.align-self-top p {padding:0.5rem;} } /* @media (min-width: 768px) { */ @media (min-width: 577px) { body {margin-top:-4rem;} .fs_producttop {width:calc(100vw - 1.5rem);} header h1 {top:7rem; background-size: cover; } header h1 img {position: relative; top:0px; width:100%; max-width:781px; display: inline-block;} header h1 span {display: inline-block;} .fs_hometop {border-bottom: 0.4rem solid #f1c443; margin-top:-2rem; border-top: 3rem solid #f1c443;} .fs_homeheight {box-shadow: inset 0 -.4rem 0 0 #f1c443; width:100%; } .fs_hometop h1 {padding-top:70px; } .fs_producttop h1 {padding-top:70px; } p {margin-left:2rem;} h3 {margin-top:3rem; margin-bottom:1.5rem;} .fs_download {max-width:10rem; border: 1px solid #ccc; } .fs_conversions .col-md-6 {padding:2rem;} .fs_conversions .col-md-4 {padding:2rem 1rem;} } @media (min-width: 577px) and (max-width: 767px) { .col-md-1 {display:none; visibility:hidden;} .col-md-3 {display:none; visibility:hidden;} .col-md-4 {width:33%} .col-md-8 {width:67%} .lead {padding-top:4rem; font-size:130%; font-weight:400;} h1 img {width:120%} .fs_search {display:block; position:fixed; top:0.1rem; right:0.5rem;} p {margin:0px;} .fs_first {width:100%;} .fs_colour_1 {height: auto;} div.col-md-12.fs_main.fs_rounded.fs_colour_1.p {height: auto;} .fs_second {width:50%;} .fs_third {width:50%;} .fs_fullmain {width:100%;} .fs_full {background-image:none;} .fs_full_bg {background-image:none;} .fs_dropdown {display:none; visibility:hidden;} } @media (min-width: 577px) and (max-width: 880px) { div.col-md-8.fs_homeheight.text-center {padding:0px; padding-top:2rem; margin-left:0rem; text-align:right; } div.col-md-8.fs_homeheight.text-center ul {position:relative; left:calc(50vw - 18rem); width:24.6rem; padding:0px; margin:0px; } .fs_homeicons li {height:40%; min-width:8rem;} } @media (min-width: 768px) and (max-width: 1100px){ h1 img {width:120%} .lead {padding:4rem 1rem 0rem 1rem; font-size:135%; font-weight:500;} .fs_search {top:4.6rem;} .fs_search .btn {background:#1c437a; color:#ff9000;} p {margin:0px;} .fs_box_van {background-image:none} .fs_building {background-image:none} .fs_car {background-image:none} .fs_panel_van {background-image:none} .fs_motor_home {background-image:none} .fs_truck {background-image:none} .fs_device {background-image:none} .fs_component {background-image:none} .fs_fleet_users {background-image:none} .fs_fullmain {position:relative; left:-4vw;} } @media (min-width: 1100px) { .lead {padding:0rem 2rem 0rem 2rem; font-size:150%; font-weight:600;} #searchbox {width:10rem !important;} .fs_fullmain {position:relative; left:-4vw;} } /* -------------------------------------------------- Fixes for Safari -------------------------------------------------- */ .row {padding-bottom:1rem;} figure {background-image: url("/application/themes/fleetservice/img/icon.png"); background-repeat:no-repeat; background-position: center top; background-size: 100%; display:inline-block; max-width:10rem; text-align:center; margin-top:.1rem; margin-bottom:-5rem; } figure img {width:100%;} figcaption {min-height:3rem; color:#fff;} /* .topbanana { background-repeat: no-repeat, no-repeat; background-size: cover, cover; background-position: center center, center center; background-color:#2b66bb ; border-top: 1rem solid #f1c443; border-bottom: 0.4rem solid #f1c443; box-shadow: inset 0 -.4rem 0 0 #f1c443; width:100%; margin-bottom: 1rem; } */ .topbanana .col-md-8 {height:25rem; display:table;} .bananafloat {height:15rem; display:table-cell; vertical-align:middle;} .innerbanana {text-align:center; position:relative;} h1 {padding:4rem 0rem 6rem;} .bananafloat span {display:inline-block;} @media (min-width: 577px) and (max-width: 820px) { h1 img {width:80%;} figure {max-width:6.5rem; vertical-align: text-top; margin-bottom:-10px;} figure a {line-height:100%;} .fs_tagline {width:300px;} } @media (max-width: 576px) { h1 {padding:0rem;} .topbanana {height:590px;} .fs_tagline {display:none; visibility:hidden;} .innerbanana {display: flex; flex-wrap: wrap; display: -webkit-flex; -webkit-flex-wrap: wrap; } .innerbanana .col-md-8 {height:auto; display:block; clear:both; width:100vw;} .banana .col-md-4 {height:auto; display:block; clear:both; width:100vw;} .bananafloat {width:100vw; height:auto; z-index:70000; padding:0px;} .bananafloat span {display:block; width:100vw; padding:0px;} .bananafloat span figure {display:block; width:100vw; margin:0px; background-image:none; -webkit-margin-before:0px; -webkit-margin-after:0px;; -webkit-margin-start: 0px;-webkit-margin-end: 0px;} .bananafloat span figure a img {display:none; visibility:hidden;} .bananafloat span figure a {display:block; width:80vw; background-color:#003; border:1px solid #000; height:2rem; margin-left:10vw; margin-bottom:.5rem;} .bananafloat span figure a:hover {background-color:#011e46;} .bananafloat span figure a:active {background-color:#61a3ff;} .bananafloat span figure figcaption {display:block;} .lead {font-size:100%; padding:vw} .fs_first {margin-top:60px;} } /* Cludge to fit seven buttons on front page */ @media (min-width: 820px) and (max-width: 1050px) { .bananafloat {position:absolute; right:-50px; top:50px; width:800px;} } /* Concrete5 styles -------------------------------------------------- */ /* for autonav*/ .nav {display:block; text-align:center;} .nav li {display:inline-block; font-size:120%; background-color:#ccc; padding:0.2rem 0.6rem; margin:0.2rem; } /* Concrete5 & bootstrap4 compatibility hack? -------------------------------------------------- */ #ccm-account-menu {position: relative; float: right;} div.ccm-panel-content ul.nav, div.ccm-panel-content menu {display:block;} /* element debugging -------------------------------------------------- div {border:1px solid #c66;} * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue }[/cc] */