/*
 Theme Name:     OTW
 Theme URI:      https://www.tommyfalk.com
 Description:    Divi Child Theme for OTW, Created & Maintained by Tommy Falk 2024 - Contact me +46 707 50 35 17 or hello@tommyfalk.com
 Author:         Tommy Falk
 Author URI:     https://www.tommyfalk.com
 Template:       Divi
 Version:        1.0.0
*/

/*************************************************** Font Styles ***/

@font-face {
	font-family: apercu-black;
	src: url('fonts/apercu-black-pro.woff');
}

@font-face {
	font-family: apercu-bold;
	src: url('fonts/apercu-bold-pro.woff');
}

@font-face {
	font-family: apercu-regular;
	src: url('fonts/apercu-regular-pro.woff');
}

@font-face {
	font-family: apercu-light;
	src: url('fonts/apercu-light-pro.woff');
}

@font-face {
	font-family: apercu-italic;
	src: url('fonts/apercu-italic-pro.woff');
}

/*** Colors ***/

:root {
	--dark: #04404F;
	--light: #fbfbfb;
	--otw-dawn: #04404F;
	--otw-blue: #0095AB;
	--otw-ocean: #7FD7E0;
	--otw-sky: #D8F8F7;
	--otw-raspberry: #EE7F8A;
	--otw-sun: #FEAD28;
	--otw-lemon: #FFF1AB;
	--otw-grass: #6AC58E;
	--otw-links: #00819D;
}

/*** General Styles ***/

h1 {
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	line-height: 1em;
	margin-bottom: 0.8rem;
}

h2 {
	font-size: clamp(1.4rem, 3vw, 3rem);
	line-height: 1.2em;
}

h3 {
	font-size: clamp(1rem, 2.4vw, 2.4rem);
	line-height: 1.2em;
}

h4 {
	font-size: clamp(0.9rem, 1.8vw, 1.8rem);
	line-height: 1em;
}

h5 {
	font-size: clamp(0.7rem, 1.4vw, 1.4rem);
	text-transform: uppercase;
	letter-spacing: 2px;
}

h6 {
	font-family: apercu-regular;
	font-size: clamp(0.9rem, 1.8vw, 1.8rem);
	line-height: 1.2em;
}

p {
	font-family: apercu-light;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.3em;
}

p intro {
	font-size: clamp(1.1rem, 1.4vw, 1.4rem);
	line-height: 1.2em;
}

/* p frontpage {
  font-size: 14px;
  letter-spacing: 2px
} */

ul li {
	font-family: apercu-light;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.2em;
	margin-bottom: 10px;

}

h1 {
	font-family: apercu-bold;
	text-wrap: balance;
}

h2,
h3,
h4,
h5 {
	font-family: apercu-bold;
	text-wrap: balance;
}

strong {
	font-family: apercu-bold;
}

/* p:last-of-type {
	margin-bottom: 1.5rem;
} */


/*** Dark Styles ***/
.dark,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark p {
	color: var(--dark);
}

.dark p a {
	text-decoration: underline;
	color: var(--otw-links);
	transition: color .2s linear 0.1s;
}

.dark p a:hover {
	text-decoration: underline;
	color: var(--otw-blue);
}


/*** Light Styles ***/
.light,
.light h1,
.light h2,
.light h3,
.light h4,
.light p {
	color: var(--light);
}

.light p a {
	text-decoration: none;
	color: var(--light);
	transition: color .2s linear 0.1s;
}

.light p a:hover {
	text-decoration: none;
	color: var(--otw-ocean);
}

.otw-footer .light {
	color: var(--otw-lemon);
	font-size: clamp(0.8rem, 1vw, 1rem) !important;
}

.et_pb_number_counter .percent p {
	font-family: apercu-bold;
}

.custom-bullet {
	list-style-type: none;
	padding-left: 0;
}

.custom-bullet li {
	position: relative;
	padding-left: 18px;
	margin-left: -10px;
}

.custom-bullet li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 10px;
	height: 10px;
	background-image: url('img/otw-bullet@2x.png');
	background-size: contain;
	background-repeat: no-repeat;

}

.client {
	font-size: 14px;
	letter-spacing: 2px;
}

.big-client {
	font-size: 22px;
	line-height: 1.2em;
	font-family: apercu-bold;
	letter-spacing: 0px;
}

.frontpage p {
	font-family: apercu-light;
	font-size: clamp(0.8rem, 1vw, 1rem);
}

.fun-numbers {
	font-size: 1.4em;
	line-height: 1.1em;
	font-family: apercu-bold;
}

/*************************************************** Design Elements ***/

.background-columnfix {
	background-size: cover !important;
	background-position: center center;
	background-repeat: no-repeat;
	display: block !important;
	height: 300px;
	/* Standardhöjd på desktop */
}

/* Anpassad höjd för tablets */
@media (max-width: 980px) {
	.background-columnfix {
		height: 200px;
	}
}

/* Anpassad höjd för mobil */
@media (max-width: 768px) {
	.background-columnfix {
		height: 100px;
	}
}


/* .custom-8-columns .et_pb_column {
	display: grid;
	column-gap: 20px;
	row-gap: 10px;
	grid-template-columns: repeat(8, 1fr);
} */

.custom-8-columns .et_pb_column {
	display: grid;
	column-gap: 20px;
	row-gap: 10px;
	grid-template-columns: repeat(8, 1fr);
	/* Standardlayout med 8 kolumner (för större skärmar) */
}

/* För tabletter: 4 kolumner */
@media (max-width: 1024px) {
	.custom-8-columns .et_pb_column {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 10px;
		row-gap: 4px;
		/* 4 kolumner på tablets */
	}
}

/* För mobiler: 2 kolumner */
@media (max-width: 768px) {
	.custom-8-columns .et_pb_column {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 4px;
		row-gap: 4px;
		/* 2 kolumner på mobiler */
	}
}

.table {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(10, 1fr);
}

/* Tablet: 8 kolumner */
@media (max-width: 1024px) {
	.table {
		grid-template-columns: repeat(8, 1fr);
	}
}

/* Mobil: 4 kolumner */
@media (max-width: 768px) {
	.table {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cell {
	background-color: white;
	border: none;
	padding: 12px;
	text-align: center;
}

/*** Awards tabell ***/

.fp-awards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4 i rad på desktop */
	gap: 10px;
	/* Justera mellanrum mellan bilder */
}

.fp-awards .cell {
	display: flex;
	justify-content: center;
	/* Centrerar horisontellt */
	align-items: center;
	/* Centrerar vertikalt */
}

.fp-awards .cell img {
	width: 50%;
	/* Minskad till 50% av sin normala storlek på desktop */
	height: auto;
}

/* För tablet (max 1024px) */
@media (max-width: 1024px) {
	.fp-awards {
		grid-template-columns: repeat(3, 1fr);
		/* 3 i rad på tablet */
	}

	.fp-awards .cell img {
		width: 80%;
		/* Bilderna blir större på mindre skärmar */
	}
}

/* För mobil (max 768px) */
@media (max-width: 768px) {
	.fp-awards {
		grid-template-columns: repeat(3, 1fr);
		/* 3 i rad på mobil */
	}

	.fp-awards .cell img {
		width: 90%;
		/* Anpassa storlek för mobil */
	}
}

/* För tablet (max 1024px) */
@media (max-width: 1024px) {
	.fp-awards {
		grid-template-columns: repeat(3, 1fr);
		/* 3 i rad på tablet */
	}

	.fp-awards .cell img {
		width: 100%;
		/* Full bredd igen på tablet och mobil */
	}
}

/* För mobil (max 768px) */
@media (max-width: 768px) {
	.fp-awards {
		grid-template-columns: repeat(3, 1fr);
		/* 3 i rad på mobil */
	}
}

/*** Service Tabell ***/

.responsive-table {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.table-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.table-cell {
	flex: 1 1 12.5%;
	/* 8 kolumner på desktop */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
}

.table-cell img {
	width: 180px;
	height: auto;
	max-width: 100%;
}

.table-cell p {
	margin-top: 10px;
	font-size: 14px;
}

/* Anpassning för tablet */
@media (max-width: 1024px) {
	.table-cell {
		flex: 1 1 25%;
		/* 4 kolumner på tablet */
	}
}

/* Anpassning för mobil */
@media (max-width: 600px) {
	.table-cell {
		flex: 1 1 50%;
		/* 2 kolumner på mobil */
	}
}

/* .no-results-layout {
	font-family: apercu-light;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.3em;
	background-color: var(--otw-sky);
	padding: 12px;
	border-radius: 3px
} */

.dp-ddg-items .dp-ddg-item {
	border: none !important;
}

/* Media query for devices with a minimum width of 767 pixels */
@media (min-width: 767px) {

	/* Flexbox display for blurb content */
	.vertical-align-blurb .et_pb_blurb_content {
		display: flex !important;
	}

	/* Flexbox display for blurb container */
	.vertical-align-blurb .et_pb_blurb_container {
		display: flex !important;
		justify-content: center;
		/* Center align blurb container horizontally */
		flex-direction: column;
		/* Arrange blurb container content in a column */
	}

	/* Flexbox display for main blurb image */
	.et-db #et-boc .et-l .vertical-align-blurb .et_pb_main_blurb_image {
		display: flex;
		width: auto !important;
		/* Ensure blurb image width adjusts automatically */
		margin-bottom: 0px !important;
		/* Remove bottom margin for better alignment */
	}
}

.button-wrapper {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.button-wrapper {
	display: flex;
	gap: 10px;
	/* Avstånd mellan knapparna */
	flex-wrap: wrap;
	/* Om de inte får plats på en rad, bryt till nästa rad */
}

.btn {
	font-family: apercu-bold;
	font-size: 0.8em !important;
	text-decoration: none !important;
	color: #ffffff !important;
	background-color: var(--otw-blue);
	display: inline-flex;
	padding: 10px 18px;
	margin-top: 1rem;
	/* margin-bottom: 1rem; */
	border-radius: 30px;

}

.heading-img-1::after {
	background-image: url('img/otw-utropstecken@3x.png');
	background-size: 10px 40px;
	background-repeat: no-repeat;
	display: inline-block;
	width: 40px;
	height: 40px;
	content: "";
	margin-left: 6px;
}

.wave-section {
	margin: 230px 0;
	position: relative;
}

.wave-section::before,
.wave-section::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.wave-section::before {
	top: -100px;
}

.wave-section::after {
	bottom: -100px;
}

.wave-yellow::before {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-sun-top@3x-scaled.webp');
}

.wave-yellow::after {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-sun-bottom@3x-scaled.webp');
}

.wave-blue::before {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-ocean-top@3x-scaled.webp');
}

.wave-blue::after {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-ocean-bottom@3x-scaled.webp');
}

.wave-sand::after {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-bottom-border-sand-01@2x-scaled.webp');
}

.wave-sand::before {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-top-border-sand-01@2x-scaled.webp');
}

.wave-dawn::before {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-dawn-footer@3x-1-scaled.webp');
}

@media (max-width: 980px) {
	.wave-section {
		margin: 100px 0;
		position: relative;
	}

	.wave-section::before,
	.wave-section::after {
		height: 30px;
	}

	.wave-section::before {
		top: -30px;
	}

	.wave-section::after {
		bottom: -30px;
	}
}

/*************************************************** Yellow footer section ***/

.wave-section-y::before {
	top: -100px;
}

.wave-yellow-y::before {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/otw-border-sand-top-1.png');
}

@media (max-width: 980px) {
	.wave-section-y {
		margin: 100px 0;
		position: relative;
	}

	.wave-section-y::before {
		height: 30px;
	}

	.wave-section-y::before {
		top: -30px;
	}
}

/*************************************************** Responsive Design ***/

@media screen and (max-width: 980px) {
	.reverse {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* Awards Case */
@media screen and (max-width: 980px) {
	h3.dp-ddg-title {
		font-size: 12px !important;
		line-height: 1.4em;
	}
}

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
	html .et-db .two-col-mob .et_pb_column {
		width: 47.25% !important;
	}

	html .et-db .two-col-mob .et_pb_column:nth-last-child(-n+2) {
		margin-bottom: 0;
	}

	html .et-db .two-col-mob .et_pb_column:not(:nth-child(2n)) {
		margin-right: 5.5% !important;
	}
}

/*************************************************** DE Tweaks ***/

#main-content .dmach-true {
	color: var(--otw-blue) !important;
}

#main-content .dmach-false {
	color: var(--otw-raspberry) !important;
}

.grid-item-cont span.et_shop_image {
	padding-top: 60%;
	display: block;
}

.grid-item-cont .et_pb_de_mach_thumbnail img,
.grid-item-cont span.et_shop_image img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

/*** category-loop ***/

.category-loop .grid-posts {
	display: block !important;
}

.category-loop .grid-col {
	text-align: center;
	display: inline-block;
	margin: 5px 15px;
}

.category-loop p {
	position: relative;
}

.category-loop .active-category p::after,
.category-loop p:hover::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
	height: 40px;
	background-size: contain;
	background-position: center;
	background-image: url(https://dev.tommyfalk.com/otw/wp-content/uploads/menu-hover-line@2x.png);
	background-repeat: no-repeat;
	opacity: 1;
}

/*
.category-loop .active-category p {
	position: relative;
	color: #333;
	text-decoration: none;
}

.category-loop .active-category svg {
	position: absolute;
	left: 0;
	top: -50%;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	pointer-events: none;
}

.category-loop .active-category path {
	stroke-width: 1;
	stroke: #00819d;
	fill: none;
	stroke-linecap: round;
	stroke-dashoffset: 0;
}
*/

/* ammend longer width ones */

.externkommunikation-pr svg {
	height: 60px !important;
	transform: scale(6, 1) !important;
	top: -77% !important;
}

.internkommunikation svg {
	height: 60px !important;
	transform: scale(4.5, 1) !important;
	top: -77% !important;
	left: 9px !important;
}

.kampanj-koncept svg {
	transform: scale(5, 1) !important;
	top: -64% !important;
	left: 3px !important;
}

/*************************************************** MM ***/

button.dvmm_submenu_toggle {
	margin-bottom: 3px;
}

/* .otw-drawing .dvmm_menu__menu .dvmm_menu li a {
	position: relative;
	text-decoration: none;
	padding-bottom: 0px;

}

.otw-drawing .dvmm_menu__menu .dvmm_menu li a::after {
	content: '';
	position: absolute;
	left: 2px;
	bottom: 3px;
	width: 90%;
	height: 5px;
	background-size: contain;
	background-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.otw-drawing .dvmm_menu__menu .dvmm_menu li a:hover::after,
.otw-drawing .dvmm_menu__menu .dvmm_menu li a:active::after,
.otw-drawing .dvmm_menu__menu .dvmm_menu li.current-menu-item a::after {
	background-image: url('https://dev.tommyfalk.com/otw/wp-content/uploads/menu-hover-line@2x.png');
	background-repeat: no-repeat;
	opacity: 1;
} */

/*************************************************** Filter Grid ***/

.dp-dfg-skin-default .dp-dfg-filters ul {
	justify-content: left;
}

p .dp-dfg-custom-field,
.dp-dfg-cf-kund {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	padding-top: 4px;
	/* line-height: 22px; */
}

/*************************************************** SVG backgrounds ***/


/*** mobile ***/


/*************************************************** GRAVITY FORMS CUSTOM STYLES*/

body .gform_confirmation_wrapper .gform_confirmation_message {
	font-family: apercu-light;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.3em;
}

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
	display: inline-block;
	height: 3.6em !important;
	border: 1px solid #7e86aa;
	padding: 1em;
	/* font-size: 12px !important; */
	line-height: normal;
	color: #051143;
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
	border: 1px solid #0096ad !important;
	/* box-shadow: 0em 0.5em 2em 0em rgba(0,0,0,0.1) !important; */
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
	color: #0096ad;
}

/* Spacing */
.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 30px !important;
}

/* Additional styles for Gravity Forms theme */
.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	padding: 1em !important;
}

body .gform_wrapper .gform_footer input[type=submit] {
	border: none;
	padding: 16px 22px !important;
	border-radius: 30px;
	background-color: #00819d;
	color: #fff;
	font-family: apercu-black;
	font-size: 16px;
}

body .gform_wrapper .gfield_checkbox li input[type=checkbox] {
	width: 20px !important;
	height: 20px;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files {
	border: none;
	padding: 16px 22px !important;
	border-radius: 30px;
	background-color: #00819d;
	color: #fff;
	font-family: apercu-black;
	font-size: 16px;
	cursor: pointer;
}