/****************
* Reset
****************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,
address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; text-decoration: none;}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:500}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
input, textarea, select, a { outline: none;}

*, *:before, *:after {
  box-sizing: border-box; 
}
body {
  background-color: #F0F0EC;
  color: #252525;
  text-align: center;
} 
main { 
  overflow-x: visible; 
  overflow-y: hidden; 
  text-align: left;
}
main, header nav, header.front picture {
  display: block;
  margin: 0 auto;
  padding: 0 17px;
  max-width: 1200px;
  width: 100%;
}
section{ margin-bottom: 34px; position: relative;}
img{ width: 100%; max-width: 100%; height: auto;  }

/*Typografi*/
* { font-family: 'Work Sans' }
p { line-height: 1.3;  }
h1, h2, h3, h6{ text-align: center;}
h1 { font-size: 2.375em; font-weight: 500;}
h6{ font-size: 0.75em; text-transform: uppercase; letter-spacing: .1em; line-height: 2.83333333em; }
h5, h6{ font-weight: 400; color: #A49F9B; }
nav h2 span{ border-color: #9D0A62; }

/* Butikkvelger */
* { border-color: white}
.butikkvelger {background-color: #F9F9F5; width: 100%; overflow: hidden;}
.butikkvelger nav {width: 100%; padding: 20px 15px 25px; position: relative;  font-size: 0.625em; }
.butikkvelger nav.kategorier { background-color: #fff; float: left;  display: none; padding: 2em 2.5em;}
.butikkvelger nav.butikker { float: right;}
.butikkvelger.front nav.kategorier:before{
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  position: absolute;
  right: -14px;
  top: 50%;
  z-index: 0;
  background-color: #fff;
  -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: translateY(-50%) rotate(45deg);
}
.butikkvelger button{
  float: left;
  
}

.butikkvelger h2 {font-size: 1.8em; font-weight: 400; margin: 0 0 33px;}
.butikkvelger .kategorier h2{ margin-bottom: 24px; }

.butikker ul li{ font-size: 1.45em; line-height: 1.25; width: 50%; float: left; }
.butikker ul a{ padding: 4px 12px; display: block; color: #373533; font-weight: 500; text-overflow: ellipsis;    white-space: nowrap; overflow: hidden;}
.butikker ul.pre-filtered a{ color:  #65615D}
.butikker li.hover a { font-weight: 700; color: #373533;}

.butikker ul.filtered a{ color: #DCD7D4; pointer-events: none;}
.butikker li.active a { color: #9D0A62; font-weight: 500; pointer-events: all;}
.butikker li a:hover { font-weight: 700; color: #9D0A62;  transition: all .1s ease-out;}
.butikker svg{max-height: 230px;}

.butikkvelger li {text-align: center;}

#shop_list.filteredList > li{ display: none; }
#shop_list.filteredList > li.activeList{ display: block; }
/*Butikkliste*/
#shop_list {margin:0 -17px;}
#shop_list li { width: 100%; float: left; padding: 0 17px 34px; } 
#shop_list li a{ height: auto; display: block; position: relative;  padding: 34px 8px 17px; overflow: hidden; background-color: #F9F9F5; transition: background-color .3s ease-out, transform .2s ease-in-out} #shop_list li a:hover{ background-color: #fff;  transform: scale(1.015);}
#shop_list h2 {font-size: 1.125em; font-weight: 400; margin: 0 0 33px; color: #252526; } #shop_list h2 span{ border-color: #9D0A62; }
#shop_list .inner li {width: 50%; padding: 0 12px 18px; color: #252526;}
#shop_list .inner li:nth-child(3n+4) { clear: none; }
#shop_list .inner li:nth-child(2n+3) { clear: both; }
#shop_list .inner li p{text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}




/* Buttons */
button {
  position: relative; display: block;
  width: 100%; height: 34px;
  z-index: 1;
  overflow: hidden;
  border-width: 0; outline: none;
  font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 1em;
  color: #373533; background-color: transparent;
  transition: all .2s ease-in-out; 
  cursor: pointer;
  font-size: 0.75em;
}
button > * {
  position: relative;
}
button span{
  display: block;
  padding: 2px 4px 2px;
  z-index: 1;
  transition: all 0.2s ease-out;   

}

button:hover span{    
  color: #9D0A62;
  transform: scale(1.05);
}


button:after {
  content: "";
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  display: block;
  width: 0;
  height: 0;
    
  border-radius: 100%;
  
  background-color: #9D0A62;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

button:before {
  content: "";
  
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 400px;
  height: 400px;
  padding-top: 0;
    
  border-radius: 100%;
  border: 40px solid #F2F2E9;
  
  background-color: #F7F7F3;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  transition: width .15s ease-out, height .15s ease-out, padding-top .15s ease-out, background-color .15s ease-out;

}
button:hover:before{
  width: 240px; height: 240px; border-width: 100px; background-color: #fafaf6;
}


button.focus span{
  color: #fff;
}
button.focus:after{
	animation: buttonactive .2s 1 forwards;
  -webkit-animation: buttonactive .2s 1 forwards;
}

@keyframes buttonactive{
	from {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #9D0A62;
  position: absolute;
  display: block;
  top:50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}
	
  to {
  width: 300px;
  height: 300px;
  }
}

/*Header*/

header[role=banner] {width: 100%; background-image: radial-gradient(circle farthest-corner at 30% 35%, #A72372 0%, #A72372 5%, #A72372 5%, #A72372 10%, #9D0A62 10%, #9D0A62 15%, #A72372 15%, #A72372 20%, #9D0A62 20%, #9D0A62 25%, #A72372 25%, #A72372 30%, #9D0A62 30%, #9D0A62 35%, #A72372 35%, #A72372 40%, #9D0A62 40%, #9D0A62 45%, #A72372 45%, #A72372 50%, #9D0A62 50%, #9D0A62 55%, #A72372 55%, #A72372 60%, #9D0A62 60%, #9D0A62 65%, #A72372 65%, #A72372 70%, #9D0A62 70%, #9D0A62 75%, #A72372 75%, #A72372 80%, #9D0A62 80%, #9D0A62 85%, #A72372 85%, #A72372 90%, #9D0A62 90%, #9D0A62 95%, #A72372 95%, #A72372 100%, #9D0A62 100% );
  min-height: 136px;}
.home header { height: auto; margin-bottom: -121px; padding-bottom: 118px; overflow: hidden;}
.front header picture{ display: none; }
header h1{ color: #373533; display: inline-block; border-bottom: 2px solid #9D0A62; padding-bottom: 11px;}


  /*Nav header*/
  header nav{  padding-top: 34px;  position: relative;}
  header nav .left, header nav .right { height: 68px; display: block;	position: relative; float: left;} 
  header nav .left{ width: 60%; } header nav .right{ width: 40%; }

  header nav a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
  }
  header nav svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  header nav path, header nav rect{ fill: #F9F9F5; }
  header nav li path, header nav li rect{ fill: #F9F9F5; }
  header nav a, header nav time{ color: #F9F9F5; border-color: #F9F9F5;}
  header time{ width: 68px; height: 68px; display: block; float: right; padding: 9px 4px 0; margin-left: 17px; border: 3px solid; font-size: 1.125em; text-align: center; line-height: 1.25em;
                font-family: 'Oswald', sans-serif;  }

  header nav .menu{ width: 100%; margin: 0 auto; text-align: center; padding-top: 88px; padding-bottom: 17px;}
  .menu li, .some li{font-size: 1em; display: inline-block; padding: 5px 17px; }
  .some li{float: right;}
  header nav li {transition: transform .25s ease-in-out;}
  header nav li:hover{ transform: scale(1.05); }
  .some { display: none; }


  ul.some li a svg{ position: relative; float: right; height: 30px; width: 30px;}

/*Artikkel*/
article{ width:  100%; position: relative;}
main header {  background-image: none; padding: 22px 0 17px 0; text-align: center;}
article header img{ padding: 51px 0 34px 0 }
article section{width: 100%; float: left; padding: 0 0 34px 0}
article section > *{ margin-bottom: 17px; }
article section img{ margin-bottom: 34px; }
article p:first-of-type{font-size: 1.5em;}
article li{ padding: 7px 0;}
article ul{ list-style: inside; }

/*kontakt*/

#kontakt li { font-size: 1.125em; width: 100%; text-align: center; display: block; float: left; padding: 0 17px 34px; }
#kontakt li:last-child{margin-bottom: 68px;}
#kontakt ul { margin: 34px -17px 0; }
#kontakt a{ border-bottom: 2px solid #A72372; color: #252525; transition: all .3s}
#kontakt a:hover { color: #000; border-color: #000; letter-spacing: .025em; }
#map{ width: 100%; height: 600px; margin: 68px 0 }

/*default content*/
article.default-content h1 {
    display: block;
}

article.default-content section {
    text-align: left;
    width: 100%;
    max-width: 800px;
    line-height: 1.4;
    margin: 3em auto 0;
    padding: 0;
    float: none;
}

/*Sidebar*/
aside{ width: 100%; float: right; position: relative; display: block;}
aside .card-1 { width: 100%; }
aside li{ margin-top: 34px; } aside li:first-of-type{margin-top: unset;} aside h2{ font-size: 1.75em; font-weight: 400; text-align: left; } aside .card h2{text-align: center;} aside h6{ margin: 68px 0 17px;} aside p, aside h5{ font-size: 1.125em; } .page-template-page-about aside h5{ margin-top: 34px; margin-bottom: 16px;}
aside h5 time{ color: #373533; }
.sidebar-info a{ border-bottom: 2px solid #A72372; color: #252525; transition: all .3s}
.sidebar-info a:hover { color: #000; border-color: #000; letter-spacing: .025em; }

/*Cards*/
#innlegg li{ font-size: 1rem; }
#innlegg { 
  margin: 0 -17px; 
  overflow: hidden;
}
.card {
   text-align: center;
   float:left;
   padding: 0 17px 34px;
}
.card-1{width: 100%; }
.card-2{width: 100%; }
.card-3{width: 100%; }
.card-4{width: 100%; }

    /*Small button*/
  .card button{ font-size: 1em; width: 107px; height: 40px; position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); cursor: pointer;}
  .card button:hover:before{
    width: 160px; height: 160px;
    border-width: 67px; }
  .card .half button:before{border-color: #F0F0EC; background-color: #fff;}

.card p{padding: 1em; position: relative;}
.card h2 { 
  font-family: 'Oswald', sans-serif;
  position: relative; 
  display: inline-block;
  padding-bottom: 8px; 
  border-bottom: 2px solid;
  font-size: 1.5em;
}

.card-1 h2{ font-size: 1.625em;}
.card-2 h2{ font-size: 3.375em; line-height: 0.75;}
.card-3 h2, .card-4 h2{ font-size: 1.8em; line-height: 0.75;}



.card a{  display: block; color: #373533; background-color: #F9F9F5; position: relative; padding-top: 34px; overflow: hidden;}
.card img { left: 0; top: 0; min-height: 100%;
    min-width: 100%;}

.card .light h2 span, .card .half h2 span{ border-color: #9D0A62 }

.card .purple{ color: #F7F7F3; background-color: #9D0A62 }
.card .purple img{ display: none; }

.card .dark{ color: #F7F7F3;}

.half div{ height: 133px; padding-top: 17px; position: relative; top: 99px; background: #F9F9F5;}
.card .half{ background-size: contain; }
.card .half h2{ font-size:1.625em ;}
  .card a{ min-height: 266px;}

.card-content{
      height: 100%;

}
.card-3 .card-content{
  width: 100%;
  position: relative;
  float: none;
  height: 100%;
      padding: 2em;
    min-height: 190px;
}
.card-3 img {
    height: auto;
    max-width: none;
    width: 100%;
    min-width: 0;
    position: relative;
    min-height: 0;
}
.card-1 .card-content{
    padding: 2em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

.card a{ padding-top: 0; }
.card p.light{color: #fff;}

.card-3 .purple .card-content{width: 100%}

@media (min-width: 768px){
  .card-3 img {
    height: 100%;
    max-width: none;
    width: auto;
    min-width: 0;
    position: absolute;
    min-height: 0;
  }
  .card-3 .card-content{
        width: 56%;
    position: absolute;
    float: right;
    height: 100%;
    right: 0;
  }
  .card-3 h2, .card-4 h2{ font-size: 3em; line-height: 0.75; padding-bottom: 22px;}
  
 

}
/*footer*/
footer{	width: 100%; padding: 34px 17px; margin-top: 68px; background-color: #A49F9B; color: #FFFFFF; text-align: center;
}

footer a {
    color: #FFFFFF;
}

footer a:hover {
    text-decoration: underline;
}

@media (min-width: 768px){
   #shop_list .inner li {padding: 0 17px 26px;}
	/*Header*/
	.home header { height: 544px; margin-bottom: -102px; }
	header picture{ display: block; }


	header nav .left{ width: 25%; } header nav .right{ width: 75%; }
	header nav .menu { position: absolute; right: 100px; top: 84px; width: auto; padding-top: 0px;}
	header nav .menu a{padding: 4px;}

	.menu li{ width: auto; text-align: left; font-size: 1em; float: right;}
	.some { display: block; }

  	
  .card-1{width: 50%; }
	.card-2{width: 100%; }
	.card-3{width: 100%; }
	.card-4{width: 100%; }

	/* Butikkvelger */
* { border-color: white}
.butikkvelger {background-color: #F9F9F5; width: 100%; overflow: hidden;}
.butikkvelger nav {width: 50%; padding: 20px 33px 25px; position: relative; }
.butikkvelger nav.kategorier { display: block;  }
.butikkvelger nav.butikker { float: right;}
.butikkvelger.front nav.kategorier:before{
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  position: absolute;
  right: -14px;
  top: 50%;
  z-index: 0;
  background-color: #fff;
  -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: translateY(-50%) rotate(45deg);
}

.butikkvelger nav.kategorier { 
   
}
.kategorier ul {
  overflow: hidden;
  margin: 0 -1.25em;
}
.kategorier li {
  float: left;
  padding: 1.25em;
  width: 50%;
}
.kategorier ul li:nth-child(2n+3) { clear: both; }

.kategorier button {
  display: block;
  height: auto;
  font-size: 1.45em;
  min-height: 57px;
  padding: 0.625em;
  width: 100%;
}
button span {  }

.butikker ul li{ width: 50%; float: left;}
.butikker ul a{ color: #373533; font-weight: 500; }
.butikker ul.pre-filtered a{ color:  #65615D}
.butikker li.hover a { font-weight: 700; color: #373533;}

.butikker ul.filtered a{ color: #DCD7D4; pointer-events: none;}
.butikker li.active a { color: #9D0A62; font-weight: 500; pointer-events: all;}
.butikker li a:hover { font-weight: 700; color: #9D0A62;  transition: all .1s ease-out;}


.butikkvelger li {text-align: center;}

/*Butikkliste*/
#shop_list li { width: 50%; float: left; padding: 0 17px 34px; }


article section{width: 66.66667%; float: left; padding: 0 34px 34px 0}
aside{ width: 33.33334%; }

/*kontakt*/
#kontakt li { font-size: 1.125em; width: 50%; text-align: left; display: block; float: left; padding: 0 17px 34px; }

}

@media (min-width: 1160px){
	.home header { height: 716px; margin-bottom: -163px; }

  .kategorier li { width: 33.33333%; }
  .kategorier ul li:nth-child(2n+3) { clear: none; }
  .kategorier ul li:nth-child(3n+4) { clear: both; }


  .butikker ul li { width: 33.33334%; float: left;}

  .card-1{width: 25%; }
  .card-2{width: 50%; }
  .card-3{width: 75%; }
  .card-4{width: 100%; }

  button {width: 155px}
  article section{width: 77.18696397941681%; padding: 0 102px 34px 0}
  aside{ width: 22.81303602058319%;}

  #kontakt li { font-size: 1.125em; width: 33.33334%; text-align: left; display: block; float: left; padding: 0 17px 34px; }

  /*Butikkliste*/
  #shop_list li { width: 33.333334%; float: left; padding: 0 17px 34px; }


}

/* arrangement */

article.campaign section {
  width:70%;
}

.factBox { 
  width: 30%;
  padding:40px;
  padding:31px 46px 31px 46px; 
}

.factBox,
.factBox h2,
.factBox div.content,
.factBox div.content li {
  color:#fff;
}

.factBox div.content ul {
  list-style:disc;
  list-style-position: inside;
}

.factBox div.content li {
  margin:0;
  padding-bottom:10px;
}

article.campaign section h2,
.factBox h2,
.campaignRelated h2 { 
  text-align:left;
  font-size:30px;
  line-height:36px;
  font-weight: 300;
 }

 .factBox h2 {
   padding-bottom:27px;
 }

 article.campaign p:first-of-type,
 article.campaign p {
   font-size: 20px;
 }


 .campaignRelated {
   background: #dcddde;
   padding: 50px 0px 50px 0px;
 }

 .campaignRelated .inner {
   max-width:1200px;
   margin:auto;
 }

 .campaignRelated h2 {
   text-align:center;
 }

 .article-items {
   display:flex;
   justify-content: space-between;
   flex-wrap:wrap;
   margin-top: 40px;
 }

 .article-items .single-item {
   width:350px;
 }

 .article-items .single-item h3 {
   font-size:16px;
   line-height:19px;
   font-weight:normal;
   padding-top:15px;
 }

 .article-items .single-item a {
   color:#000;
 }
 
 .article-items .single-item figure {
   height:295px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .article-items .single-item figure img {
   max-width:100%;
 }

 @media(max-width:1265px){

  

    .article-items .single-item {
      width: 300px;
    }

    .article-items .single-item figure {
      height:245px;
    }
 }

 @media(max-width:950px){
  .article-items .single-item {
    width: 250px;
  }

  .article-items .single-item figure {
    height:195px;
  }
 }

 @media(max-width:767px){
  article.campaign section {
    width:100%;
  }

  .factBox {
    width:100%;
    margin-bottom:50px;
  }
  
  .article-items {
    justify-content: center;
  }

  .article-items .single-item {
    margin-bottom:50px;
  }

  .article-items .single-item {
    width: 300px;
    margin-left:50px;
    margin-right:50px;
  }

  .article-items .single-item figure {
    height:245px;
  }

 }

/* Pre-footer area on frontpage (Instagram) */

 #prefooter {
   margin:0 -17px;
 }

 #prefooter h2 {
   font-size:1.625em;
 }

 #prefooter #sb_instagram #sbi_load .sbi_load_btn,
 #prefooter #sb_instagram .sbi_follow_btn a {
   border-radius:0 !important;
   width:100% !important;
 }
 
 #sb_instagram #sbi_load { 
   overflow: hidden;
   padding:0 10px 0 10px;
  }