/*


Ä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.


Riktlinjer för att namnge acf fält

Toppbild (rubrik)

Sidrubrik

Ingress

Sektion 1 (knapplänk 1)

Sektion 4 (text 2)




*/

.button::after,
.alt-button::after {
  /*content: '\f178';*/
  content: "\f105";
  font-family: "FontAwesome";
  margin-left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/*h4 {
	font-size: 52px;
	font-weight: bold;
}*/

/*.width-100 {
	width: 100%;
	display: block;
}

.section.hero {
	padding-top: 40px;
}

.child-menu.first {
	padding-top: 100px;
}

.hero.first {
	padding-top: 80px;
}

@media only screen and (min-width: 1024px) {
	
	.child-menu {
		padding: 40px;
	}

	.child-menu.first {
		padding-top: 140px;
	}

	.hero.first {
		padding-top: 120px;
	}
}*/

.overflow-visible {
  overflow: visible;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.referens-image-container {
  margin-bottom: 20px;
  padding-top: 20px;
}

.archive .referens-image-container {
  border-bottom: 4px solid #ec685b;
  overflow: hidden;
}

@media only screen and (max-width: 1023px) {
  .referens-image-container {
    overflow: hidden;
    border-bottom: 2px solid #ec685b;
  }
}

.referens-image {
  max-width: 60%;
  box-shadow: 0 8px 80px rgba(0, 0, 0, 0.1);
  /*border-top-left-radius: 4%;
	border-top-right-radius: 4%;*/
  margin: auto;
  margin-top: 20px;
  margin-bottom: 0 !important;
}

@media only screen and (min-width: 1024px) {
  .referens-image {
    /*position: absolute;*/
    margin-top: 40px;
    max-width: 80%;
    /*margin: auto;*/
    margin-bottom: -100px !important;
  }
}

@media only screen and (min-width: 1920px) {
  /*.referens-image {*/
  /*		position: absolute;
            top: 0;
            max-width: 60%;
            border-radius: 30px;
        }	*/
}

.lightblue {
  background-color: #ecf6fb;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.z-index-3 {
  z-index: 3;
}

.scale-105 {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.no-padding-top {
  padding-top: 0 !important;
}

@media only screen and (max-width: 599px) {
  h1 {
    text-align: left !important;
  }

  .page-template-template-omoss h1,
  .page-template-template-medarbetare h1,
  .page-template-template-hallbarhet h1 {
    text-align: center !important;
  }
}

.overflow-hidden {
  overflow: hidden;
}

@media only screen and (min-width: 1024px) {
  .desktop-flip-order:nth-child(odd) .desktop-flip-order-child:nth-child(odd) {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .desktop-flip-order:nth-child(odd) .desktop-flip-order-child:nth-child(even) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .desktop-flip-order:nth-child(even) .desktop-flip-order-child:nth-child(odd) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .desktop-flip-order:nth-child(even)
    .desktop-flip-order-child:nth-child(even) {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
}

#gform_browse_button_2_6 {
  padding: 10px 20px;
  width: auto;
  margin-left: 5px;
  font-size: 18px !important;
}

/*@media only screen and (min-width: 600px) {
	#gform_browse_button_2_6 {
		margin-left: 10px;
	}
}*/

#field_2_6 .validation_message {
  display: none !important;
}

.post img {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

svg:not(:root) {
  overflow: visible;
}

.svg-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.svg-static {
  bottom: 10px;
}

.svg-water {
  bottom: -20px;
  -webkit-animation: water 2s linear infinite;
  animation: water 2s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-sun {
  top: 10%;
  left: 10%;
}

@media only screen and (min-width: 600px) {
  .svg-sun {
    top: 20%;
    left: 20%;
  }
}

.svg-sun svg {
  -webkit-animation: rotating 12s linear infinite;
  animation: rotating 12s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-bus {
  bottom: 38px;
}

.svg-bus svg {
  -webkit-animation: bus 8.5s linear infinite;
  animation: bus 8.5s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 1024px) {
  .svg-bus svg {
    -webkit-animation: bus 16s linear infinite;
    animation: bus 16s linear infinite;
  }
}

.svg-santa {
  bottom: 38px;
}

.svg-santa svg {
  -webkit-animation: bus 8.5s linear infinite;
  animation: bus 8.5s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 1024px) {
  .svg-santa svg {
    -webkit-animation: bus 16s linear infinite;
    animation: bus 16s linear infinite;
  }
}

.svg-clouds1 {
  top: 20%;
  -webkit-animation: clouds1 20s linear infinite;
  animation: clouds1 20s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-clouds2 {
  top: 25%;
  -webkit-animation: clouds2 24s linear infinite;
  animation: clouds2 24s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-clouds3 {
  top: 20%;
  -webkit-animation: clouds3 30s linear infinite;
  animation: clouds3 30s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-globen {
  left: 10%;
  bottom: 20px;
  width: auto;
  pointer-events: auto;
}

@media only screen and (min-width: 1366px) {
  .svg-globen {
    left: 24%;
  }
}

.svg-globen.hover {
  -webkit-animation: globen 4s linear;
  animation: globen 4s linear;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.svg-globen svg {
  position: relative;
}

@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes water {
  0% {
    left: -10%;
  }
  50% {
    left: -15%;
  }
  100% {
    left: -10%;
  }
}

@keyframes water {
  0% {
    left: -10%;
  }
  50% {
    left: -15%;
  }
  100% {
    left: -10%;
  }
}

@media only screen and (min-width: 1024px) {
  @-webkit-keyframes water {
    0% {
      left: -5%;
    }
    50% {
      left: -7%;
    }
    100% {
      left: -5%;
    }
  }
  @keyframes water {
    0% {
      left: -5%;
    }
    50% {
      left: -7%;
    }
    100% {
      left: -5%;
    }
  }
}

@-webkit-keyframes bus {
	0% {
		left: -20%;
	}
	100% {
		left: 160%;
	}
}

@keyframes bus {
  0% {
    left: -20%;
  }
  100% {
    left: 160%;
  }
}

@-webkit-keyframes clouds1 {
  0% {
    left: -5%;
  }
  50% {
    left: -15%;
  }
  100% {
    left: -5%;
  }
}

@keyframes clouds1 {
  0% {
    left: -5%;
  }
  50% {
    left: -15%;
  }
  100% {
    left: -5%;
  }
}

@-webkit-keyframes clouds2 {
  0% {
    left: 50%;
  }
  50% {
    left: 25%;
  }
  100% {
    left: 50%;
  }
}

@keyframes clouds2 {
  0% {
    left: 50%;
  }
  50% {
    left: 25%;
  }
  100% {
    left: 50%;
  }
}

@-webkit-keyframes clouds3 {
  0% {
    right: 25%;
  }
  50% {
    right: -40%;
  }
  100% {
    right: 25%;
  }
}

@keyframes clouds3 {
  0% {
    right: 25%;
  }
  50% {
    right: -40%;
  }
  100% {
    right: 25%;
  }
}

@keyframes clouds3 {
  0% {
    right: 25%;
  }
  50% {
    right: -40%;
  }
  100% {
    right: 25%;
  }
}

/* @-webkit-keyframes globen {
  0% {
    left: 15%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    left: 12%;
    bottom: 100px;
  }
  70% {
    left: 10%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
    bottom: 200px;
  }
  100% {
    left: 120%;
    -webkit-transform: rotate(2000deg);
    transform: rotate(2000deg);
    opacity: 0.5;
    bottom: 400px;
  }
}

@keyframes globen {
  0% {
    left: 10%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  70% {
    left: 5%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    left: 120%;
    -webkit-transform: rotate(2000deg);
    transform: rotate(2000deg);
    opacity: 0.5;
  }
}

@media only screen and (min-width: 1366px) {
  @keyframes globen {
    0% {
      left: 24%;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    40% {
      left: 15%;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 1;
    }
    60% {
      left: 120%;
      -webkit-transform: rotate(2000deg);
      transform: rotate(2000deg);
      opacity: 0.5;
    }
    100% {
      left: 25%;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 1;
    }
  }
} */

@-webkit-keyframes globen {
  0% {
    left: 15%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    left: 12%;
    bottom: 100px;
  }
  70% {
    left: 10%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
    bottom: 200px;
  }
  100% {
    left: 120%;
    -webkit-transform: rotate(2000deg);
    transform: rotate(2000deg);
    opacity: 0.5;
    bottom: 400px;
  }
}

@keyframes globen {
  0% {
    left: 10%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    left: 5%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
  }
  60% {
    left: 120%;
    -webkit-transform: rotate(2000deg);
    transform: rotate(2000deg);
    opacity: 0.5;
  }
  100% {
    left: 10%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
}

@media only screen and (min-width: 1366px) {
  @keyframes globen {
    0% {
      left: 18%;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    20% {
      left: 8%;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 1;
    }
    60% {
      left: 120%;
      -webkit-transform: rotate(2000deg);
      transform: rotate(2000deg);
      opacity: 0.5;
    }
    100% {
      left: 18%;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      opacity: 1;
    }
  }
}

.margin-bottom-10-percent {
  margin-bottom: 10%;
}

.max-width-480 {
  max-width: 480px;
}

.special-lists li:before {
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url(/wp-content/uploads/checkmark.svg);
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
}

.one-half-desktop.list ul {
  list-style-type: circle;
  margin-left: 20px;
  margin-bottom: 20px;
}

.svg-bus {
  z-index: 1;
}

.svg-santa {
  z-index: 3;
}

.page2.button {
  min-width: 250px;
}

/* Hide empty pixel */
.home img:last-of-type {
  display: none;
}

.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}

.pp-priset-container {
  width: 100px;
  height: 100px;
  display: inline-flex;
  position: absolute;
  bottom: 100px;
  right: 100px;
  z-index: 999999;
}

.pp-priset img,
.pp-priset {
  width: 100%;
  height: auto;
  display: inline-flex !important;
}

.svg-globen {
  height: 200px;
  width: 200px;
  /*background-image: url('/wp-content/uploads/nom19sve_svart-vit.png');*/
  background-image: url('https://www.gstatic.com/partners/badge/images/PartnerBadge.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  bottom: 40px;
  z-index: 1;
}

@media only screen and (min-width: 1366px) {
  .svg-globen {
    left: 18%;
  }
}

.font-size-16px {
	font-size: 16px !important;
}

@media only screen and (min-width: 1200px) {
	.font-size-50px-l {
		font-size: 50px !important;
	}

	.font-size-70px-l {
		font-size: 70px !important;
	}
}

.font-weight-500 {
	font-weight: 500 !important;
}

.min-height-400px {
	min-height: 400px !important;
}

.width-50px {
	width: 50px !important;
}

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

.width-100-minus-70px {
	width: calc( 100% - 70px ) !important;
}

.margin-right-20px {
	margin-right: 20px !important;
}

.background-color-transparent {
	background-color: transparent !important;
}

.border-bottom-grey  {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

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

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

.width-200px {
	width: 200px !important;
}

.background-contain {
	background-size: contain !important;
}

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