/* Header on homepage */
body.page-id-191586 #main-header,
.home.page #main-header {
    background: transparent;
    position: absolute;
    z-index: 2;
}
/* Header on homepage when viewed as admin */
body.page-id-191586.admin-bar #main-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
    body.page-id-191586.admin-bar #main-header {
      top: 46px;
    }
}

/* Big red dot in slide nav for active slide */
#fp-nav li.active span {
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}

/* Hide 'front' toggle (is always blank and if not hidden causes an issue with animation showing the 'back' when toggle is clicked) */
.dsm-content-toggle-front {
    display: none !important;
}


/* Adjust red-dot slide nav z-index as otherwise this overlays the zendesk iframe so clicking on it doesn't work*/
body #fp-nav {
	z-index: 25;
	height: auto;
}


/* Make footer go to bottom of page on final slide for desktop*/
@media screen and (min-width: 1080px) {
	.fp-section:last-of-type,
    .fp-section.section:last-of-type /* Same selector but for Webkit */ {
		background: #303030
	}
	.fp-section:last-of-type .fp-slides,
	.fp-section:last-of-type .fp-slidesContainer {
		height: 100%;
	}
	.fp-section:last-of-type .fp-slides {
		height: calc(100vh - 640px);
	}
	.fp-section.section:last-of-type .et_pb_container.clearfix[style^="height"] {
	    height: auto !important; /* Fix some js adding a fixed height to the quotes container that makes it too large */
	}
	#fullpage .fp-section:last-of-type .fp-tableCell {
		height: auto !important;
		vertical-align: middle;
	}
	.fp-section:last-of-type .et_pb_section_36 {
		position: relative !important;
	}
	.fp-section:last-of-type #main-footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	/* Hide the reviews bit above the footer on low height screens (as not enough room for both that and the footer) */
	@media screen and (max-height: 900px) {
		.fp-slide.fp-table.slide.page-13 {
			display: none;
		}
	}
}
/* Adjust last section to be grey to fit in with footer */
.section.more .entry-content, 
.section.more .entry-content .et_pb_section,
.section.more .entry-content .et_pb_section .et_pb_row{
    background-color: rgb(48,48,48) !important;
}

/* Fix everything getting pushed down when logged in as admin and admin bar is visible */
.fp-enabled body.admin-bar {
	    margin-top: -32px;
}

/* Fix two column sections */
#fullpage .center .fp-tableCell article {
    margin-left: 0;
    margin-right: 0;
}
#fullpage .section.reviews .slide.page-13 article,
#fullpage .section.more .slide.page-13 article,
#fullpage .section.models .slide.page-12 article,
#fullpage .section.foldable-and-portable .slide.page-6 article {
	width: 100%;
}

/**
 * Fix fixed slides being positioned relative to viewport in Webkit
 * Applying a transform means the children should be positioned relative to this element
 * @see spec at https://www.w3.org/TR/css-transforms-1/#transform-rendering
 */
#fullpage .fp-section {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    overflow: hidden;
}
/**
 * Fix fixed position elements being taller than the page height and overflowing their parents in Webkit
 * They still overflow but are rendered transparent if a parent has overflow:hidden, 
 * which prevents clicking on links etc. where an area is covered by an overflowing element
 */
_::-webkit-full-page-media, _:future, :root #fullpage .et_pb_row_0,
:root #fullpage .et_pb_row_1,
:root #fullpage .et_pb_row_3,
:root #fullpage .et_pb_row_4,
:root #fullpage .et_pb_row_10,
:root #fullpage .et_pb_row_11,
:root #fullpage .et_pb_row_12,
:root #fullpage .et_pb_row_13,
:root #fullpage .et_pb_row_15,
:root #fullpage .et_pb_row_16,
:root #fullpage .et_pb_section_1,
:root #fullpage .et_pb_section_3,
:root #fullpage .et_pb_section_5,
:root #fullpage .et_pb_section_7,
:root #fullpage .et_pb_section_11,
:root #fullpage .et_pb_section_13,
:root #fullpage .et_pb_section_15,
:root #fullpage .et_pb_section_17,
:root #fullpage .et_pb_section_19,
:root #fullpage .et_pb_section_20,
:root #fullpage .et_pb_section_26,
:root #fullpage .dsm_content_toggle_7,
:root #fullpage .dsm_content_toggle_8 {
    max-height: 100vh;
}

/* Hide fullpage by default (mobile) */
#fullpage, #fp-nav {
	display: none;
}

/* Show fullpage on desktop */
@media screen and (min-width: 1080px) {
	#fullpage {
		display: block;
	}
	#mobile-content {
		display: none;
	}
	#fp-nav {
		display: table;
	}
}

/* Adjust vertical navigation tooltip */
.material-tooltip[style*="display: block"] {
	opacity: 0.9 !important;
	font-size: 12px;
	border-radius: unset;
    padding: 8px;
    min-height: auto;
}



/**  Models section  **/

/* Fix toggle block section overlapping items to left with coloured background block */
.slide.page-12 .dsm_content_toggle_9,
.slide.page-12 .dsm_content_toggle_8 {
	background-color: transparent;
}
/* When they are displayed we need to change the toggle block section bg back to solid */
.slide.page-12 .dsm_content_toggle_9.toggled-on {
	background-color: #000;	
}
.slide.page-12 .dsm_content_toggle_8.toggled-on {
	background-color: #fff;
}

/* Fix bike images being too large on low height screens so content below gets pushed below the viewport */
.slide.page-12 .et_pb_image_wrap img {
	max-height: calc(100vh - 240px);
}

/* Coloured swatches */
.model-g4i-colors ul,
.model-g4-colors ul {
	text-align: center;
	margin-right: 10px;
}
@media screen and (min-width: 1080px) {
	.model-g4i-colors ul,
	.model-g4-colors ul {
		text-align: right;
		margin-right: 0;
	}
}
.model-g4i-colors li,
.model-g4-colors li {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	border: 2px solid #aaa;
	cursor: pointer;
}
/* G4i colours */
.model-g4i-colors li.selected {
	/* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 0 2px #fff;
}
.model-g4i-colors .g4i-white {
    background: #fff;
}
.model-g4i-colors .g4i-grey {
	background: #666;
}
.model-g4i-colors .g4i-black {
	background: #000;
}
.model-g4i-colors .g4iplus-red {
	background-image: linear-gradient(135deg, #c00a27, #323232);
}
.model-g4i-colors .g4iplus-black {
	background-image: linear-gradient(135deg, #000, #323232);
}
/* G4 colours */
.model-g4-colors li.selected {
	/* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 0 2px #000;
}
.model-g4-colors .g4-white {
    background: #fff;
}
.model-g4-colors .g4-blue {
    background: #3232e8;
}
.model-g4-colors .g4-black {
    background: #000;
}

/* Bike images hide / show when selected */
.model-g4i-image,
.model-g4-image {
	display: none;
}
.model-g4i-image.selected,
.model-g4-image.selected {
	display: block;
	text-align: center;
}
/* Fix for images flashing on swatch change in Webkit */
.model-g4i-image img,
.model-g4-image img {
	-webkit-transform:translate3d(0,0,0);
}


/* Logo and tax hide / show when selected */
.model-g4i-logo,
.model-g4-logo,
.model-g4i-tax,
.model-g4-tax {
	display: none;
}
.model-g4i-logo.selected,
.model-g4-logo.selected,
.model-g4i-tax.selected,
.model-g4-tax.selected {
	display: block;
}
/* Fix for Divi making the logo invisible */
.model-g4i-logo.et-waypoint:not(.et_pb_counters),
.model-g4-logo.et-waypoint:not(.et_pb_counters) {
	opacity: 1;
}
/* Price fix text colour */
.models-container .model-g4-price,
.models-container .model-g4-tax {
	opacity: 1;
    color: #000 !important;
}
.models-container .model-g4i-price,
.models-container .model-g4i-tax {
	opacity: 1;
    color: #fff !important;
}
/* Fix spacing around pricing and Learn more button */
.model-g4-buy.et_pb_button, .model-g4i-buy.et_pb_button {
    margin-top: 15px;
    margin-bottom: 60px;
	padding: 10px 20px !important;
}
.model-g4-price, .model-g4i-price {
    font-weight: 300;
    font-size: 20px;
    margin-top: 10px;
}
/* Fix positioning of tech specs toggle */
.g4-tech-specs-toggle, .g4i-tech-specs-toggle {
	padding-top: 10px;
    padding-right: 3%;
    padding-left: 3%;
    width: 50%;
    position: fixed !important;
    bottom: 20px;
    top: auto;
}
.g4-tech-specs-toggle {
    left: 0px;
    right: auto;
}
.g4i-tech-specs-toggle {
    right: 0px;
    left: auto;
}
.model-changer .dsm-toggle h5 {
	font-size: 12px;
}
.g4i-tech-specs-toggle .dsm-toggle h5 {
	color: #ffffff;
}
/* Fix positioning of tech specs toggle on mobile */
#mobile-content .model-changer .dsm_content_toggle {
	padding: 30px 20px;
	margin: 0;
}
#mobile-content .model-changer .et_pb_button_module_wrapper,
#mobile-content .model-changer .et_pb_button_module_wrapper .et_pb_button {
	margin-bottom: 0 !important;
}


/** Fix issue on 'streamlined' section on German version of mobile page where German text is too long and goes off teh edge of the page */
@media screen and (max-width: 500px) {
	.et_pb_column .dsm_image_hotspots_wrap .de-streamlined-hotspot-right {
		left: 75%;
	}
}



/**  Drive images animation  **/

/* Container with hotspots and our animation frame images */
.drive-images-container .et_pb_column.et-last-child.et_pb_column_4_4 {
	margin: 0 auto !important; /* Center */
	float: none;
	position: relative;
}
/* Container with fake image and hotspots */
.drive-images-container .dsm_image_hotspots {
	z-index: 3;
	max-height: 100vh; /* We need to limit height to stop images overflowing the viewport */
}
/* All drive images */
.drive-images-container img {
	width: 100vw;
	max-width:unset;
}
/* Main drive image only */
.drive-image-main {
	text-align: center;
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
}
/* Animation frame images only */
.drive-image {
	text-align: center;
	opacity: 0;
	position: absolute;
	z-index: 2;
	top: 0;
	max-width:unset;
	transition: opacity 0.1s;
	transition-timing-function: linear;
}
/* Animate the opacity of the frames when .show class is added */
.drive-image.show, .et_pb_module.drive-image.show {
	opacity: 1;
}
.drive-image1.show, .et_pb_module.drive-image1.show {
	transition-delay: 0s;
}
.drive-image2.show, .et_pb_module.drive-image2.show {
	transition-delay: 0.1s;
}
.drive-image3.show, .et_pb_module.drive-image3.show {
	transition-delay: 0.2s;
}
.drive-image4.show, .et_pb_module.drive-image4.show {
	transition-delay: 0.3s;
}
.drive-image5.show, .et_pb_module.drive-image5.show {
	transition-delay: 0.4s;
}
.drive-image6.show, .et_pb_module.drive-image6.show {
	transition-delay: 0.5s;
}
/* And when it is removed in reverse */
.drive-image1, .et_pb_module.drive-image1 {
	transition-delay: 0.5s;
}
.drive-image2, .et_pb_module.drive-image2 {
	transition-delay: 0.4s;
}
.drive-image3, .et_pb_module.drive-image3 {
	transition-delay: 0.3s;
}
.drive-image4, .et_pb_module.drive-image4 {
	transition-delay: 0.2s;
}
.drive-image5, .et_pb_module.drive-image5 {
	transition-delay: 0.1s;
}
.drive-image6, .et_pb_module.drive-image6 {
	transition-delay: 0s;
}
/* Hotspots */
.drive-images-container .dsm_image_hotspots .dsm_image_hotspots_child_0.dsm_image_hotspots_child {
    left: 41%;
    top: 28%;
    top: calc(0.28 * 0.700364773319437 * 100vw);
}
.drive-images-container .dsm_image_hotspots .dsm_image_hotspots_child_2.dsm_image_hotspots_child {
    left: 76.5%;
    top: 36%;
    top: calc(0.36 * 0.700364773319437 * 100vw);
}
.drive-images-container .dsm_image_hotspots .dsm_image_hotspots_child_1.dsm_image_hotspots_child {
    left: 46%;
    top: 66%;
    top: calc(0.66 * 0.700364773319437 * 100vw);
}
/* Fix issue with hotspots size on non-English pages */
body .drive-images-container .dsm_image_hotspots_child .dsm_image_hotspots_icon {
	font-size: 20px;
}
/* Fix to make G4 drive image stick to top of viewport instead of being centered */
.et_pb_row.drive-images-container {
    position: relative!important;
    top: unset;
    bottom: calc(0.4*(70vw - 100vh));;
    left: unset;
    right: auto;
    transform: none;
    max-width: none;
	width: 100vw;
}
body.logged-in.admin-bar .et_pb_row.drive-images-container {
    top: unset;
}
.the-all-new-g4drive .fp-tableCell {
	height: 100vh !important;
	display: block;
}
.the-all-new-g4drive .entry-content > div + div,
.carbon-fibre-mid-frame .entry-content > div + div {
	z-index: 2;
}
/* Fix issue with G4 drive text disappearing */
#fullpage .the-all-new-g4drive .fp-tableCell article .entry-content {
	position: relative;
}
/* Fix text not appearing locked to bottom of slide */
.the-all-new-g4drive .entry-content > .et_pb_section:first-child {
    height: 100vh;
}
/* Make Drive and Carbon frame images stick to top on taller screens */
@media screen and (min-height: 70vw) {
    .et_pb_row.drive-images-container {
        bottom: auto;
        top: 0;
    }
    .carbon-fibre-mid-frame .entry-content > div:first-child > .et_pb_row {
        top: 0;
        height: 100vh;
        transform: translateX(-50%) translateY(0);
    }
}


/* Make hotspot images stretch to screen width */
.dsm_image_hotspots_img_wrap img {
	width: 100vw;
}
/* Fade in hotspots on slide load */
.fp-section .dsm_image_hotspots_child {
	opacity: 0;
    transition: opacity 0s;
}
.fp-section.active .dsm_image_hotspots_child{
	transition-delay: 2s;
    opacity: 1;
}
/* Hotspots section fit to top of section on mobile */
@media screen and (max-width: 1079px) {
	.et_pb_module.dsm_image_hotspots {
		top: 0;
	}
}

/* Fix hotspot images not being centred in Safari */
_::-webkit-full-page-media, _:future, :root .dsm_image_hotspots {
	bottom: calc(0.4*(70vw - 100vh));
}
_::-webkit-full-page-media, _:future, :root .drive-images-container .dsm_image_hotspots {
	bottom: auto;
}
/* Fix slide 4 (Carbon Fibre mid-frame) not stretching to full screen */
_::-webkit-full-page-media, _:future, :root .carbon-fibre-mid-frame .fp-tableCell {
	display: block;
}
_::-webkit-full-page-media, _:future, :root .carbon-fibre-mid-frame .entry-content > div:first-child > .et_pb_row {
	position: relative !important;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	transform: none;
	max-width: none;
	width: 100vw;
}
_::-webkit-full-page-media, _:future, :root .carbon-fibre-mid-frame .dsm_image_hotspots_img_wrap img {
	max-width: none;
}


/* Buy button text colour in accessories section (hidden under toggle) */
.integrated-accessories .dsm-content-toggle-back a.et_pb_button.accessories-buy-button,
#integrated-accessories .dsm-content-toggle-back a.et_pb_button.accessories-buy-button {
	color: #a6071e !important
}

/* Fix for tall footer on homepage */
.more.fp-section .et_pb_slide .et_pb_container
.reviews.fp-section .et_pb_slide .et_pb_container {
	height: auto !important;
}
/* Fix for squashed scrollup button */
/*#scrollup-master.scrollup-button {
    padding: 10px 8px;
    line-height: 20px;
}*/
/* Fix for header background on homepage */
body.et_header_style_centered.home header#main-header .logo_container {
    background: transparent;
}

/* Fix for carbon-fibre-mid-frame text slide not showing in Safari */
.section.carbon-fibre-mid-frame .entry-content {
	position: relative
}
#fullpage .section.carbon-fibre-mid-frame .slide.page-4 article {
	width: 100vw;
}

/* Toggle in G4 drive section - make the section bg go to solid white when toggle is expanded */
.the-all-new-g4drive .entry-content > div + div {
    transition: background 1s;
    background: transparent !important;
}
.the-all-new-g4drive .entry-content > div + div .dsm-content-toggle-back {
	background-color: transparent;
}
.the-all-new-g4drive .entry-content > div + div.toggle-on {
    background: #fff !important;
}
.the-all-new-g4drive .entry-content > div + div.toggle-on img {
    animation: g4driveToggleFadeIn 3s;
}
/* Can't seem to get opacity of image working with transition, so use animation instead */
@keyframes g4driveToggleFadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}


/* Quotes section - make quote centered vertically in the section */
#fullpage .section.more .slide.page-13 article,
#fullpage .section.more .slide.page-13 article div.inner-slide {
    height: 100%;
}
#fullpage .section.more .slide.page-13 article div.inner-slide .entry-content {
    height: 100%;
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#fullpage .section.more .slide.page-13 article div.inner-slide .entry-content > .et_pb_section {
    position: relative !important;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
}


/* Buy link below hamburger menu and cart */
.jumbo-buy-wrapper {
	clear: both;
	text-align: center;
}
.jumbo-buy-wrapper a{
	display: block;
	background: #7f7f7f;
	color: #fff;
	text-transform: uppercase;
	font-size: 10pt;
	font-weight: 600;
	padding: 2px;
}


/* Fix various issues you only get on language versions when viewing cached page after Theme & Plugins update 2023-01-15 */
/* Carbon frame fix */
.carbon-fibre-mid-frame .entry-content > div:first-child > .et_pb_row {
    width: 100%;
    max-width: 2560px;
    position: fixed!important;
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-height: 70vw) {
    .carbon-fibre-mid-frame .entry-content > div:first-child > .et_pb_row {
        top: 0;
        height: 100vh;
        transform: translateX(-50%) translateY(0);
    }
}
/* Hotspots on a few sections */
.carbon-fibre-mid-frame .dsm_image_hotspots_icon span,
.slide.page-9 .dsm_image_hotspots_icon span {
  font-size: 20px;
}
.slide.page-6 .dsm_image_hotspots_icon{
  font-size: 20px;
  line-height: 20px;
}
#mobile-content .dsm_image_hotspots_icon{
  font-size: 15px;
  line-height: 15px;
}
/* Hotspot popup fix white text on white bg */
.tippy-popper p,
.tippy-popper div {
    color : #000;
}
/* Hotspot fix popup bg colour */
.home.page .tippy-tooltip,
.home.page .dsm_image_hotspots_2 .dsm_image_hotspot_tooltip_wrapper.tippy-tooltip,
.home.page .dsm_image_hotspots_7 .dsm_image_hotspot_tooltip_wrapper.tippy-tooltip {
	background-color: rgba(255,255,255,0.9);
}
/* Bottom text bit fix bg colour for a couple of sections */
.carbon-fibre-mid-frame .entry-content > .et_pb_section:nth-child(2),
.slide.page-11 .entry-content > .et_pb_section{
  background: transparent;
}
/* Animation to fade-in buy button on models seems a bit unreliable, so make the button visible */
.model-changer .et_pb_button {
	opacity: 1;
}

/* Fix issue with bottom info sections having extra padding added to them */
.inner-slide .entry-content > .et_pb_section > .et_pb_row {
	padding: 0;
}

@media (min-width: 981px) {
    .et_pb_section.klarna-banner, 
    .et_pb_section.klarna-banner > .et_pb_row,
    body .et_pb_section.trending-products,
    body .et_pb_section.webstore-home-accessories,
    body .et_pb_section.reviews-text {
        padding: 0;
    }
    .et_pb_section.webstore-home-accessories .et_pb_divider {
        height: 3px;
    }
}


/** Fix for 'while it is loading' white screen sometimes not disappearing **/
body > #display {
	animation: xgwc_fade 1s 5s, xgwc_hide 600s 6s infinite;
}
@keyframes xgwc_fade {
  0%   {opacity: 1}
  100% {opacity: 0;}
}
@keyframes xgwc_hide {
	0% {display: none;}
	100% {display: none;}
}