/*


Ändra så att det du kan lägga till en cta-class för ett menu-item så att det blir en knapp. se effektivitetsprogrammet.


gallery thumbnails ska fungera på samma sätt som kolumnerna med avstånd.


Lägg till kod så att även ikoner och varukorgen ändrar färg när du scrollar ner.


Fixa en class som du sätter tex på en one-half med en bild i så att det bara blir 20px bottom i mobilen istället för vanliga 40px.


Lägg till templates för search and filter


Ändra så att undermenyn skiljer sig från huvudmenyn i mobilen (typ som fox design)


https://dollarshaveclub.github.io/reframe.js/


Brytpunkter för round images klasser för tablet och desktop och mobil. Ändra så att det används .strict-square.round.background-image så att dem alltid blir runda men lägg till max-width med media queriers.

Lägg till margin-auto i utilities

Lägg till klasser för margin-bottom-40 etc i utilities

Lägg till så att alla div som ligger direkt inuti en kolumn blir flex och flex-baseline
*/

.padding-left-right-20 {
	padding-left: 20px;
	padding-right: 20px;
}

.height-700px-d {
	height: 700px;
}
.height-350px-d{
	height: 350px;
}
@media only screen and (max-width: 599px) {
	.height-400px-m {
		height: 400px;
	}
	.height-200px-m {
		height: 200px;
	}
}

.margin-top-40px {
	margin-top: 40px;
}

.margin-bottom-40px {
	margin-bottom: 40px;
}


/*****************************
    Dropdown
******************************/

.dropdown-container {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	padding-bottom: 20px;
	width: 100%;
}

.dropdown-container.outer {
	padding-top: 20px;
	border-bottom: 1px solid #000;
}

.dropdown-container .dropdown-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	width: 100%;
}

.dropdown-container .dropdown-header .left {
	width: 50px;
	height: 50px;
}

.dropdown-container .dropdown-header .middle {
	/*padding-left: 10px;*/
	padding-right: 25px;
	width: calc( 100% - 0px);
}

.dropdown-container .dropdown-header .middle h2,
.dropdown-container .dropdown-header .middle h3,
.dropdown-container .dropdown-header .middle h4 {
	margin-bottom: 0;
	width: calc( 100% - 30px);
}

.dropdown-container .dropdown-header.outer .middle h2 {
	color: #000;
	font-size: 24px !important;
}

@media only screen and (max-width: 1023px) {
	.dropdown-container .dropdown-header.outer .middle h2 {
		color: #000;
		font-size: 20px !important;
	}
}

.dropdown-container .dropdown-header.outer .middle.active h2 {
	color: #000;
}


.dropdown-container .dropdown-header .expand {
	margin-left: -30px;
	width: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.dropdown-container .dropdown-text.outer {
	padding-top: 20px;
}

.dropdown-container .dropdown-content {
	width: 100%;
	position: relative;
	left: 0px;
	padding: 0;
	padding-left: 0px;
	padding-top: 20px;
	padding-right: 0px;
}

.dropdown-content {
	display: none;
}


.dropdown-container .expand-button {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.dropdown-content.visible {
	display: block;
}

.expand.outer > .expand-button {
	width: 20px;
	height: 20px;
	background-image: url('/wp-content/uploads/plus.svg');
}

.expand.outer > .expand-button:hover {
	background-image: url('/wp-content/uploads/plus-beige.svg');
}

.expand.outer.active > .expand-button {
	background-image: url('/wp-content/uploads/minus-svart.svg');
}

.expand.outer.active > .expand-button:hover {
	background-image: url('/wp-content/uploads/minus-beige.svg');
}

/*.dropdown-header .expand.outer > .expand-button:hover {*/
/*background-image: url('/wp-content/uploads/plus-hover.svg');*/
/*}*/


.dropdown-container.outer > div:hover {
	color: #c3b397 !important;
}

/*.dropdown-container.outer > .expand-button:hover {*/
/*background-image: url('/wp-content/uploads/plus-hover.svg') !important;*/
/*}*/

.dropdown-container.inner > div:hover {
	color: #c3b397 !important;
}

.dropdown-header:hover {
	color: #c3b397 !important;
}

.middle h2:hover {
	color: #c3b397 !important;
}

.expand.outer.mobile-special {
	display: none;
}

@media only screen and (max-width: 1023px) {
	.expand.outer.active.mobile-special {
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
}

.dropdown-container .expand.outer.active > span {
	display: none;
}

@media only screen and (min-width: 1024px) {

	.dropdown-container .dropdown-header .left {
		width: 75px;
		height: 75px;
	}

	.dropdown-container .dropdown-header .expand {
		width: 150px;
		margin-left: 0px;
	}



	.dropdown-container .dropdown-header .middle {
		width: calc( 100% - 150px);
		/*padding-left: 20px;*/
	}

	.dropdown-container .dropdown-text.outer {
		width: calc( 100% - 95px );
		margin-left: 95px;
		padding-top: 0;
		margin-top: -20px;
	}

	.dropdown-container .dropdown-content {
		width: calc( 100% - 75px);
		/*left: 75px;*/
		padding-top: 20px;
		padding-right: 20px;
		padding-bottom: 0;
		/*padding-left: 20px;*/
	}
}



.link-blue {
	color: #9ACFDB !important;
	cursor: pointer;
}

.hover-blue {
	width: auto;
	display: inline-flex;
}

.hover-blue:hover > .link-blue,
.hover-blue:hover > a {
	color: #5DA8BC !important;
}

/******************************
    FAQ dropdown
*******************************/



.dropdown-container .dropdown-header.inner {
	/*align-items: center;*/
}

.dropdown-container .dropdown-header .expand.inner {
	width: 20px;
	height: 30px;
	margin-left: 0px;
	margin-right: 10px;
}

.dropdown-content.inner {
	width: 100%;
}

.dropdown-header.inner .middle {
	width: calc(100% - 30px);
	padding-left: 0px;
	padding-right: 0px;
}

.dropdown-content.inner {
	left: 0;
	padding-left: 0;
	padding-top: 20px;
}

.dropdown-container .dropdown-header.inner .middle h3 {
	color: #9ACFDB;
	width: 100%;
}

.dropdown-container .dropdown-header.inner .expand.inner.active + .middle h3 {
	color: #366784;
}

.expand.inner > .expand-button {
	width: 20px;
	height: 20px;
	background-image: url('/wp-content/uploads/plus.svg');
}

.expand.inner.active > .expand-button {
	background-image: url('/wp-content/uploads/minus-svart.svg');
}

@media only screen and (min-width: 1024px) {


	.dropdown-header.inner .middle {
		width: calc( 100% - 20px );
		padding-right: 20px;
	}

	.dropdown-container .dropdown-header .expand.inner {
		margin-left: -30px;
		margin-right: 0;
	}

}

.dropdown-header.outer:hover > .middle h2,
.dropdown-header.outer:hover .expand.outer .expand-button,
.dropdown-header.outer:hover > .expand-button{
	color: #c3b397 !important;
}

.dropdown-header.outer:hover .expand.outer > .expand-button {
	background-image: url('/wp-content/uploads/plus-beige.svg') !important;
}

.dropdown-header.outer:hover .expand.outer.active > .expand-button {
	background-image: url('/wp-content/uploads/minus-beige.svg') !important;
}

@media only screen and (min-width: 1023px) {
	.font-size-26px-d {
		font-size: 26px;
	}
}

.icon a {
	color: #000;
}

.phone-icon {
	width: 55px;
	height: 55px;
	background-size: contain;
}

.mail-icon, .maps-icon, .linkedin-icon {
	width: 55px;
	height: 55px;
	background-size: contain;
}


.mail-icon:hover{
	background-color: transparent;
	background-position: center center;
	background-image: url('/wp-content/uploads/mail-beige.svg') !important;
}

.icon:hover .phone-icon {
	color: #3D95CE;
}

.phone-icon:hover {
	background-color: transparent;
	background-position: center center;
	background-image: url('/wp-content/uploads/phone-beige.svg') !important;
}

.maps-icon:hover {
	background-color: transparent;
	background-position: center center;
	background-image: url('/wp-content/uploads/place-beige.svg') !important;
}

.linkedin-icon:hover {
	background-color: transparent;
	background-position: center center;
	background-image: url('/wp-content/uploads/linkedin-beige.svg') !important;
}

.max-width-100px {
	max-width: 150px;
}

.margin-auto {
	margin: auto;
	margin-bottom: 30px;
}

.icon-hover {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.margin-top-20px {
	margin-top: 20px;
}

#menu-item-248.small-button {
	height: 50px !important;
	margin-bottom: 0 !important;
}

.menu-item-248.small-button {
	height: 50px !important;
	margin-bottom: 0 !important;
}

#desktop-menu.menu {
	align-items: center !important;
}

a.icon,
a.icon:visited {
	color: #000000;
}

a.icon:hover,
a.icon:active,
a.icon:focus {
	color: #c3b397
}

a.icon:hover .maps-icon {
	background-image: url('/wp-content/uploads/place-beige.svg') !important;
}

a.icon:hover .phone-icon {
	background-image: url('/wp-content/uploads/phone-beige.svg') !important;
}

a.icon:hover .linkedin-icon {
	background-image: url('/wp-content/uploads/linkedin-beige.svg') !important;
}

a.icon:hover .mail-icon {
	background-image: url('/wp-content/uploads/mail-beige.svg') !important;
}

.color-green {
	color: #c3b397 !important;
}

.color-very-light-brown {
	color: #c3b397 !important;
}

.background-color-lightgrey {
	background-color: #eee !important;
}

.min-height-100vh {
	min-height: 100vh !important;
}
co
.max-width-220px {
	max-width: 220px !important;
}

@media only screen and (min-width: 1024px) {
	.min-height-75vh-desktop {
		min-height: 75vh !important;
	}

	.height-540px{
		height: 540px !important;
	}

	.max-width-none-desktop{
		max-width: none !important;
	}

	.font-size-24px-d {
		font-size: 24px !important;
	}
}

.max-width-1100px {
	max-width: 1100px !important;
}

.max-width-155px {
	max-width: 155px !important;
}

.max-width-260px {
	max-width: 260px !important;
}

/*Waynes custom css*/

.rubrik{
	font-size: 36px!important;
	line-height: 1.56 !important;
	letter-spacing: 1.51px!important;
	font-weight: 300 !important;
}

.mellanrubrik{
	font-size: 24px !important;
	line-height: 1.42 !important;
	letter-spacing: 1px !important;
	font-weight: normal !important;
}

.minirubrik {
	font-weight: 900 !important;
	letter-spacing: 0.84px !important;
	margin-bottom: 10px !important;
}


.h2-footer{
	font-size: 24px !important;

}

.hero-container p{
	font-family: 'Lato', sans-serif !important;
	font-weight: normal !important;
	font-size: 20px !important;
	line-height: 1.6 !important;
	letter-spacing: 0.84px !important;
}

.hero-headline{
	font-weight: bold ;
	color: #ffffff ;
	line-height: 1.25 ;
	letter-spacing: 2.7px ;
	font-size: 64px !important;
}

.background-image-varerfarenhet {
	background-position: center bottom !important;
}

.background-image-referenser {
	background-position: center center !important;
}

.box-tjanster{
	margin-bottom: 60px !important;
}

.margin-bottom-10px{
	margin-bottom: 10px !important;
}

.pixel-box {
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 7px #8f8f8f;
	box-sizing: border-box;
}

.flex-thirds{
	display: flex !important;
	justify-content: space-between !important;

}

.col{
	width: 32% !important;
}

.contact-div{
	margin-bottom: 60px !important;
}

.mobile-menu-text a{
	font-family: 'Lato', sans-serif !important;
	font-weight: normal !important;
	letter-spacing: 0.67px !important;
}

@media only screen and (min-width: 1024px) {
	.hero-desktop {
		height: 540px !important;

	}
}

@media only screen and (max-width: 1023px) {
	.hero-tablet {
		height: 370px !important;

	}
}

@media only screen and (max-width: 599px) {
	.hero-mobile {
		height: 200px !important;
	}
}

@media only screen and (max-width: 599px) {
	.frontpage-title-text{
		font-size: 28px !important;
		font-weight: bold !important;
		line-height: 1.36 !important;
		letter-spacing: 1.2px !important;
	}
	.hero-container p{
		font-size: 14px !important;
		line-height: 1.43 !important;
		letter-spacing: 0.59px !important;
	}
	.hero-headline{
		font-size: 30px !important;
		margin-bottom: 0 !important;
	}
	.remove-padding-margin{
		padding: 20px 0 0 0  !important;
		margin: 0 !important;
	}

}

@media only screen and (min-width: 600px) and (max-width: 1023px){
	.frontpage-title-text{
		font-size: 44px !important;
		font-weight: bold !important;
		line-height: 1.36 !important;
		letter-spacing: 1.2px !important;
	}
	.hero-container p{
		font-size: 20px !important;
		line-height: 1.6 !important;
	}
	.hero-headline{
		font-size: 48px !important;
	}

}

@media only screen and (max-width: 1023px){
	.flex-column-reverse{
		flex-direction: column-reverse !important;
	}
}


@media only screen and (max-width: 1023px){
	.min-height-400px-under-1024 {
		min-height: 400px !important;
	}
}

.current-menu-item a{
	color: #c3b397 !important;
}


.closed, .open{
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.5px;
	font-family: 'Lato', sans-serif;
}

.wysiwyg h3{
	font-size: 24px !important;
	line-height: 1.42 !important;
	letter-spacing: 1px !important;
	color: #000000 !important;
	font-weight: normal !important;
}

@media only screen and (max-width: 599px){
	.rubrik {
		line-height: 1.56 !important;
		font-size: 28px !important;
	}
	p{
		line-height: 1.6 !important;
		font-size: 14px !important;
	}
	.mellanrubrik{
		font-size: 20px !important;
	}
	.minirubrik{
		font-size: 14px !important;
	}
	.contact-div{
		margin-bottom: 40px !important;
	}
	.contact-div .rubrik{
		margin-bottom: 15px !important;
	}
	.contact-div .minirubrik{
		font-size: 14px !important;
		margin: 40px 0px 5px !important;
	}
	.no-padding-top-mobile{
		padding-top: 0 !important;
	}
	.dropdown-container.outer {
		padding-top: 0px !important;
	}
	.expand-button{
		width: 15px !important;
	}
	.expand-button:hover{
		width: 15px !important;
		height: 15px !important;
	}
	#3{
		padding-top: 0px !important;
	}
}

.button-text{
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0.7px !important;
}

.no-padding-top{
	padding-top: 0 !important;
}
.max-width-500px{
	max-width: 500px !important;
}