/* fonts */
@font-face {
	font-family: SSHeadlineRegular;
	src: url("/postcard-assets/fonts/ScaniaSansHeadline-Regular.otf") format("opentype");
}
@font-face {
	font-family: SSHeadlineBold;
	src: url("/postcard-assets/fonts/ScaniaSansHeadline-Bold.otf") format("opentype");
}
@font-face {
	font-family: SSRegular;
	src: url("/postcard-assets/fonts/ScaniaSans-Regular.otf") format("opentype");
}
@font-face {
	font-family: SSItalic;
	src: url("/postcard-assets/fonts/ScaniaSans-Italic.otf") format("opentype");
}
@font-face {
	font-family: SSBold;
	src: url("/postcard-assets/fonts/ScaniaSans-Bold.otf") format("opentype");
}
@font-face {
	font-family: SSBold;
	src: url("/postcard-assets/fonts/ScaniaSans-Bold.otf") format("opentype");
}
*{
	box-sizing: border-box;
}

html,body{
	border:0;
	margin:0;
}

a {
	text-decoration: none;
	color: inherit;
}

/* layout */
#postcardContainer{
	--primary: #000F45;
	--secondary: #041e43;
	--text-color: white;
	--headerHeight: 100px;
	--gutter: 2rem;
	color:var(--text-color);
	font-family: 'SSRegular';
	background-color: var(--primary);
	position: relative;
	display:flex;
	flex-direction: column;
	height: 100vh;
}
#postcardContainer .header{
	width: 100%;
	flex: 0 0 var(--headerHeight);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap:nowrap;
	overflow-y:hidden;
	/* makes k logo link clickable */
	position:absolute;
	z-index:1;
}
#postcardContainer .header .headerlogos{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	flex-direction: row;
	justify-content: space-between;
	padding: 1em;
	/* background-color: var(--primary); */
	/* background-color: red; */

}
#postcardContainer .header img{
	max-height: calc(var(--headerHeight) - 2em);
	/* logos not occluded by content */
	z-index: 10;
}
#postcardContainer .center{
	flex-basis: 100%;
}
#postcardContainer .footer{
	flex-basis: 30vh;
	background-image: url("/postcard-assets/images/Keltruck Cityscape.png");
}
#postcardContainer .scroll{
	order: 99;
	position:absolute;
	padding-top: var(--headerHeight);
	top:0px;
	left:0px;
	width: 100%;
	height: 100vh;
	overflow: auto;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	/* overflow-x:hidden; */
}

#postcardContainer .scroll .headerfade{
	position:fixed;
	top:0;
	width: 100%;
	padding: 1em;
	background-image: linear-gradient(to top, rgba(255,0,0,0), var(--primary));

}
#postcardContainer .scroll .section{
	min-height:calc(100vh - var(--headerHeight));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	width:100%;
}

/* animation */
@keyframes reveal {
	0% {
		opacity: 0;
	}
	10%{
		opacity: 0;
	}
	30%{
		opacity: 1;
	}
	70%{
		opacity: 1;
	}
	90%{
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes reveal-simple {
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

#postcardContainer .revealOnScroll{
	animation-name: reveal;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	/* animation-delay: calc(var(--inter) * -1s); */
}

@keyframes drawline {
	to {
	  stroke-dashoffset: 0;
	}
}
#postcardContainer .route svg{
	width: 100%;
}
#postcardContainer .route svg #route{
	animation-name: drawline;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-play-state: paused;
	/* "max" prevents line disappearing on animation complete */
	animation-delay: max(calc(var(--scroll) * -1s),-0.999999s);
}
#postcardContainer .route svg{
	max-width: 100%;
	/* filter:drop-shadow(0.3em 0.3em 1em rgba(0, 0, 0, 0.6)); */
}
#postcardContainer .route svg #marker1,
#postcardContainer .route svg #marker2,
#postcardContainer .route svg #marker3,
#postcardContainer .route svg #marker4,
#postcardContainer .route svg #marker5{
	opacity:1;
}
#postcardContainer .route svg #route{
	/* avoid flash of unstyled content */
	stroke-dasharray:1000;
	stroke-dashoffset:1000;
}

/* general */
#postcardContainer .title,
#postcardContainer .subtitle{
	font-family: 'SSHeadlineBold';
}
#postcardContainer .title.regular,
#postcardContainer .subtitle.regular{
	font-family: 'SSHeadlineRegular';
}
#postcardContainer .title.regular b,
#postcardContainer .subtitle.regular b{
	font-family: 'SSHeadlineBold';
}
#postcardContainer .title{
	font-size: 2.5rem;
}
#postcardContainer .subtitle{
	font-size: 1.5rem;
}
#postcardContainer .subtitle>p{
	margin:0 !important;
	font-family: inherit !important;
}

#postcardContainer button.btn,
#postcardContainer input.btn {
	background: var(--text-color);
	border: none;
	color: var(--primary);
	width: fit-content;
	height: 2rem;
	padding: 1rem;
	line-height: 0px;
	display: block;
	font-family: 'SSHeadlineBold';
	text-transform: uppercase;
	font-size: 19px;
	cursor: pointer;
}
#postcardContainer .scrollForMore {
	background: url("/postcard-assets/images/icons/Scroll Icon.png") no-repeat center top;
	width: 10rem;
	height: 5rem;
	align-self: center;
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
}

#postcardContainer .scroll img{
	box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.6);
}


/* contact form  */
#postcardContainer .contactform{
	display: flex;
	flex-direction: column;
}
#postcardContainer .contactform .wpcf7{
	align-self: center;
	border: 3px solid white;
	max-width: 45rem;
	width: 100%;
	padding: 1rem;
	background-color: var(--primary);
}
#postcardContainer .contactform .wpcf7 p{
	margin:0 !important;
	font-family: inherit !important;
}
#postcardContainer form input[type="text"],
#postcardContainer form input[type="tel"],
#postcardContainer form input[type="email"] {
	display: block;
}
#postcardContainer form .btn {
	margin-top: 1rem;
}
#postcardContainer input:not([type="checkbox"]) {
	height: 1.5rem;
}

/* textbreaks */
#postcardContainer .textbreak .title{
	font-size: 3em;
	text-align:center;
}

/* banners / values */
#postcardContainer .banner {
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0rem 5rem;
	background-size: contain;
	background-repeat: no-repeat;
	min-height:5rem;
	width: calc(100% + (var(--gutter) * 2));
}
#postcardContainer .banner .title {
	flex-basis: 100%; /* force wrap after title */
}
#postcardContainer .banner .text {
	flex-basis: 70%;
	font-size: 24px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	text-align: justify;
}
#postcardContainer .banner .text a{
	align-self:flex-start;
}
#postcardContainer .value .banner{
	justify-content: center;
}
#postcardContainer .colorbanner.right .banner{
	justify-content: flex-end;
}
#postcardContainer .colorbanner.right .title{
	text-align: right;
}
#postcardContainer .colorbanner.right .text,
#postcardContainer .value.right .text{
	order: -1;
}
#postcardContainer .colorbanner.right .text a {
	align-self: flex-end;
}
#postcardContainer .icon {
	width: 17rem;
	height: 16rem;
	background-size: contain;
	background-repeat: no-repeat;
}

/* photowall */

#postcardContainer .photowall{
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-around;
}
#postcardContainer .photowall>*{
	flex: 0 1 30%;
}
#postcardContainer .photowall>*>img{
	max-width: 100%;
}
#postcardContainer .photowall.layout-1>*:nth-child(1){
	flex-basis: 25%;
	z-index:3;
}
#postcardContainer .photowall.layout-1>*:nth-child(2){
	flex-basis: 30%;
	margin-bottom: 30%;
	z-index:2;
}
#postcardContainer .photowall.layout-1>*:nth-child(3){
	flex-basis: 30%;
	z-index:1;
}
#postcardContainer .photowall.layout-1>*:nth-child(3)>img{
	max-width:130%;
	margin-left: -30%;
}


/* map */
.autoscroll {
	height: 100px;
	overflow: hidden;
}
.autoscroll>* {
	/* height: 100%; */
	/* transform: translateY(100%); */
	animation: autoscroll calc(var(--duration) * 1s) linear infinite;
	/* animation: autoscroll 10s linear infinite; */
}

@keyframes autoscroll {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(calc(var(--scrollmax) * -1px));
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-4px);
	}
	60% {
		transform: translateY(-2px);
	}
}

#postcardContainer .map .mapimage svg .marker{
	transition: all .2s ease-in-out;
	/* animation-duration: 1s; */
	/* animation-fill-mode: both; */
	/* animation-timing-function: ease-in-out; */
	/* animation-iteration-count: infinite; */
}
#postcardContainer .map .mapimage svg .marker.blue{
	fill: var(--primary) !important;
}
#postcardContainer .map .mapimage svg .marker:hover {
	cursor: pointer;
	/* animation-name: bounce; */
	fill: var(--primary) !important;
	/* transform: scale(1.1);  */
}

#postcardContainer .map{
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	gap: 1rem;

}
#postcardContainer .map .mapimage svg{
	filter: drop-shadow(0.3em 0.3em 1em rgba(0, 0, 0, 0.6));
}
#postcardContainer .map .mapimage{
	flex: 0 1 50%;
}

#postcardContainer .map .locations{
	flex: 0 1 30%;
}
#postcardContainer .map .locations .location{
	border: 3px solid white;
	background-color: var(--secondary);
	padding: 1rem;
	font-size: 1em;
}
#postcardContainer .map .locations .location.hidden{
	display:none;
}
#postcardContainer .map .locations .location.extra{
	border: none;
	background-color: transparent;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
}
#postcardContainer .map .locations .location.extra img{
	box-shadow: 0 0 0 transparent;
}
#postcardContainer .map .locations .location.extra.hidden{
	display:none;
}

#postcardContainer .map .locations .location .title{
	font-size: 1.2em;
}
#postcardContainer .map .locations .location ul{
	margin:0;
}
#postcardContainer .map .locations .location .title:not(:first-child){
	margin-top:1rem;
}
#postcardContainer .map .locations .location .address,
#postcardContainer .map .locations .location .email,
#postcardContainer .map .locations .location .phone{
	display:flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
}
#postcardContainer .map .locations .location .address::before,
#postcardContainer .map .locations .location .email::before,
#postcardContainer .map .locations .location .phone::before{
	content: " ";
	/* display:inline-block; */
	height: 1.5em;
	width: 1.5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#postcardContainer .map .locations .location .address::before{
	background-image: url('/postcard-assets/images/icons/Map Pin.png');
}

#postcardContainer .map .locations .location .email::before{
	background-image: url('/postcard-assets/images/icons/Email Icon.png');
}

#postcardContainer .map .locations .location .phone::before{
	background-image: url('/postcard-assets/images/icons/Phone Icon.png');
}

/* Testimonials */
#postcardContainer .testimonial{
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
}
#postcardContainer .testimonial .image{
	flex: 0 0 30%;
	padding: 0 2em;
}
#postcardContainer .testimonial .image img{
	max-width: 100%;
}
#postcardContainer .testimonial .quote{
	text-align:center;
	flex: 0 1 30%;
}
#postcardContainer .testimonial.right .quote{
	order: -1;
}
#postcardContainer .testimonial .quote .btn{
	display:inline;
}
#postcardContainer .testimonial .text{
	font-size: 1.5em;
	line-height: 3rem;
}
#postcardContainer .testimonial .quote a{
	align-self:flex-start;
}

/* Social */
#postcardContainer .social{
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 1.5em;
}
#postcardContainer .social .logo{
	max-width: 20rem;
}
#postcardContainer .social .logo img{
	max-width: 100%;
}
#postcardContainer .social .title{
	font-size: 1.5em;
}
#postcardContainer .social .text{
	font-size: 1.5em;
}

/* wp style fixes */
html{
	margin: 0 !important;
}
#main{
	padding:0 !important;
}

#postcardContainer .contactform .wpcf7 .wpcf7-form-control.wpcf7-text {
	width: 100%;
}

.routeContainer.mobile{
	display:none;
}
/* mobile responsivity */

@media only screen and (max-width: 576px) {
	/* photo walls */
	#postcardContainer .photowall {
		flex-direction: column;
	}

	.routeContainer.mobile{
		display:block;
	}
	.routeContainer:not(.mobile){
		display:none;
	}
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
	#postcardContainer .photowall {
		gap: 0.4rem;
		flex-wrap: wrap;
	}

	#postcardContainer .photowall.layout-1>*:nth-child(1),
	#postcardContainer .photowall.layout-1>*:nth-child(2) {
		flex-basis: 50%;
	}
}


@media only screen and (max-width: 992px) {
	#postcardContainer {
		--headerHeight: 80px;
	}

	#postcardContainer .title {
		font-size: 1.5rem;
	}

	/* contact form */
	#postcardContainer .colorbanner .title,
	#postcardContainer .colorbanner.right .title {
		text-align: center;
	}
	#postcardContainer .colorbanner.right .banner {
		justify-content: center;
	}
	#postcardContainer .subtitle {
		font-size: 0.8rem;
	}
	#postcardContainer .contactform .wpcf7 .wpcf7-form-control.wpcf7-checkbox,
	#postcardContainer .contactform .wpcf7 .wpcf7-form-control.wpcf7-acceptance {
		font-size: 0.8rem;
	}
	#postcardContainer .contactform .wpcf7-form {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	/* banners */
	#postcardContainer .banner {
		justify-content: center;
		gap: 1rem 5rem;
		margin-top: 1rem;
		background-size: cover;
	}
	#postcardContainer .colorbanner.right .text {
		order: 1;
	}
	#postcardContainer .banner .text {
		font-size: 20px;
		text-align: center;
		flex-basis: 100%;
	}
	#postcardContainer .icon {
		width: 12rem;
		height: 12rem;
		background-position: center;
	}
	#postcardContainer .banner .text a {
		align-self: center;
	}

	/* titles */
	#postcardContainer .textbreak .title {
		font-size: 2.4em;
	}

	/* map */
	#postcardContainer .map {
		flex-wrap: wrap;
	}
	#postcardContainer .map .mapimage {
		flex: 1 1 50%;
	}
	#postcardContainer .map .locations {
		flex: 1;
		width: 100%;
	}
	#postcardContainer .map .locations img.extra {
		width: 100%;
	}
	#postcardContainer .mapSection.revealOnScroll {
		animation: none;
	}

	/* photo walls */
	#postcardContainer .photowall > div,
	#postcardContainer .photowall > div img {
		margin: 0 !important;
		width: 100%;
	}

	/* testimonials */
	#postcardContainer .testimonial {
		flex-direction: column;
	}

	/* socials */
	.social .text {
		text-align: center;
	}
	.social .sociallogos {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media only screen and (max-width: 1235px) {
	#postcardContainer .colorbanner.right .text,
	#postcardContainer .value.right .text,
	#postcardContainer .testimonial.right .quote{
		order: inherit;
	}
}