/*
* If you need to make a quick fix, you can do it here.
* Later when you have the time, you can move the fix into the correct place in the structure
*/

.t-shifted {}

.t-shifted__image {
	display: none;

	@include mq($bp-header-2){
		display: block;
		position: fixed;
		z-index: 0;
		top: 0;
		right: calc((100% / 14) * 10);
		height: 100%;
		margin: 0 auto;
	}

	@include mq($bp-max){
		right: calc(100% - ((100% - #{$site-max-width}px)/2) - (#{$site-column-size}px * 3));
		width: calc(((100% - #{$site-max-width}px)/2) + (#{$site-column-size}px * 3));
	}
}


.t-shifted__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;

	.ie & {
		height: auto;
		align-self: center;
	}
}

.t-shifted__bg--shopping-cart {
	object-position: 50% 78%;
}

.t-shifted__bg--checkout-end {
	object-position: 50% 52%;
}

.t-shifted__bg--checkout-data {
	object-position: 50% 84%;
}

.t-shifted__bg--checkout-summary {
	object-position: 50% 5%;
}

.t-shifted__logo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 0;
	width: percentage(2/3);
	padding-top: percentage(1/3);
	color: palette(primary);
	background-color: palette(neutral, 0);
	//clip-path: ellipse(50% 99% at 50% 0);
	border-radius: 0 0 500px 500px;

	@include mq($bp-max) {
		width: 286px;
		padding-top: 144px;
	}

	& svg {
		position: absolute;
		top: 12%;
		left: 50%;
		right: 0;
		width: 100%;
		height: 56.25%;
		transform: translateX(-53%);
	}
}


.t-shifted__content {
	@include mq($max: $bp-header-2) {
		padding-left: $site-gutter-width;
		padding-right: $site-gutter-width;
	}

	@include mq($bp-header-2){
		margin-left: calc((100% / 14) * 4);
		padding-right: calc((100% / 14) * 1);
		padding-left: calc((100% / 14) * 1);
	}

	@include mq($bp-max){
		margin-left: calc(100% - ((100% - #{$site-max-width}px)/2) - (#{$site-column-size}px * 9));
		padding-right: calc((100% - #{$site-max-width}px)/2);
		padding-left: calc(#{$site-column-size}px * 1);
	}
}

// ----------------------------
// Nothing here yet, Good job!!