/*-------------------Felles PC --------------------------------*/      
      @media only screen
              and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

	  .arrowSkive{
	      display:inline-block;
	      position:relative;
	      height:20px;
	      width:20px;
	      /*border:1px solid black;
                border-radius: 10px;	   	 
                background-color:yellow;*/ 	 
	  }
	  .arrow {
	      position:absolute;
	      border: solid grey;
	      border-width: 0 4px 4px 0;
	      display: inline-block;
	      padding: 5px;
	      top: 3px;
	      left:3px;
	      transform: rotate(-45deg);
	      transition: transform 500ms;
	      /*background-color:grey;*/
	  }

	  
      }




     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 


	 .arrowSkive{
	     display:inline-block;
	     position:relative;
	     height:20px;
	     width:20px;
	     /*border:1px solid black;
               border-radius: 30px;	  
               background-color:yellow;*/	
	 }
	 .arrow {
	     position:absolute;
	     border: solid grey;
	     border-width: 0 3px 3px 0;
	     display: inline-block;
	     padding: 5px;
	     top: 3px;
	     left:3px;
	     transform: rotate(-45deg);
	     transition: transform 500ms;
	     /*background-color:grey;*/
	 }

 }


     .arrowSkive2{
	 display:inline-block;
	 position:relative;
	 top:-2px;
	 height:10px;
	 width:10px;
	 /*border:1px solid black;
           border-radius: 10px;	   	 
                background-color:yellow;*/

     }
     .arrow2 {
	 position:absolute;
	 border: solid grey;
	 border-width: 0 1px 1px 0;
	 display: inline-block;
	 padding: 3px;
	 top: 3px;
	 left:3px;
	 transform: rotate(-45deg);
	 transition: transform 500ms;
	 /*background-color:grey;*/
     }
     



/*
.topNav .arrowSkive{
display:inline-block;
position:relative;
height:15px;
width:15px;*/
/*border:1px solid black;
border-radius: 10px;
background-color:yellow;*/
/*
}
.topNav .arrow {
position:absolute;
border: solid grey;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
top: 4px;
left:4px;
transform: rotate(-45deg);
transition: transform 500ms;*/
/*background-color:blue;*/
/*}

*/



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
    .headFreightTxt{
	  left: calc(43% - 80px);
     }
    .headCont{
	top: 0px;
	height:90px;
    }
    .head{
	height:60px;
    }
    .headSearchCont{
	position:relative;
        top:13px;
	left:50px;
    }
    .headSearchWord{
	height:30px;
	font-size:20px;
	width:500px;
	padding: 0px 40px 0px 10px;
	background-position: 470px 5px;
    }
    .headIconSearchCont{
	display:inline-block;
    }
    .headPicCont{
	top:0px;
	left: 40%;
	height:50px;
	width:340px;	
	background-color:#001e3a;;
    }
   .headPic{
       height:50px;
       width:340px;
       background-color:#001e3a;;
    }
   .headBarGold{
       display:block;
   }
   .headGoldTable{
       left:15%;
	width: 75%;
    }
}

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

    .headFreightTxt{
	  left: calc(48% - 150px);
     }
    .headCont{
	top: 0px;
	height:90px;
    }
    .head{
	height:60px;
    }
    .headSearchCont{
        top:13px;
	left:50px;
    }
    .headSearchWord{
	height:30px;
	width:350px;
	font-size:20px;
	padding: 0px 40px 0px 10px;
	background-position: 370px 5px;
    }
    .headIconSearchCont{
	display:inline-block;
    }
      .headPicCont{
	top:0px;
	left: 40%;
	height:50px;
	width:340px;
	background-color:#001e3a;;
    }
   .headPic{
       height:50px;
       width:340px;
       background-color:#001e3a;;
    }
   .headBarGold{
       display:block;
   }
   .headGoldTable{
       left:15%;
       width: 80%;
   }

 }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .headFreightTxt{
	  left:20px;
      }
    .headCont{
	top: -50px;
	height:110px;
    }
    .head{
	height:110px;
    }
    .headSearchCont{
        top:60px;
	left:50px;
	width:calc(100% - 250px);
    }
    .headSearchWord{
	height:30px;
	width:calc(100% - 150px);
	font-size:20px;
	padding: 0px 40px 0px 10px;
    }
    .headPicCont{
	top:0px;
	left: 20px;
	height:50px;
	width:340px;
	background-color:#001e3a;;
    }
    .headIconSearchCont{
	display:inline-block;
    }
   .headPic{
       height:50px;
       width:340px;
       background-color:#001e3a;;
    }
   .headBarGold{
       display:none;
   }	  

 }
      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

    .headFreightTxt{
	  left:20px;
     }
    .headCont{
	top:-50px;
	height:110px;
    }
    .head{
	height:110px;
    }
    .headSearchCont{
        top:60px;
	left:50px;
	width:calc(100% - 170px);
    }
    .headSearchWord{
	height:30px;
	width:90%;
	font-size:20px;
	padding: 0px 0px 0px 10px;
    }
    .headIconSearchCont{
	display:none;
    }
    .headPicCont{
	top:0px;
	left: 20px;
	height:50px;
	width:340px;
	max-width:65%;
	background-color:#001e3a;;
    }
   .headPic{
       height:50px;
       width:100%;
       background-color:#001e3a;;
    }
   .headBarGold{
       display:none;
   }	  


   }

 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

	  
      .headFreight{
           font-size: 16px;
	   line-height:30px;
	   height:30px;
      }


  }


 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/

    .pkgAltGroup{
       grid-column: 1 / span 1;
     }

	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .pkgAltGroup{
       grid-column: 1 / span 2;
     }
      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

   .headFreight{
       font-size: 16Px;
       Line-height:30px;
       height:30px;
   }
   .headFreightTxt{
       left:20px;
    }
   .headGiftcard{
       top:0px;
       right:20px;
       width:80px;
       height:26px;
       line-height:26px;
   }
   .headCont{
       top:-50px;
       height:100px;
   }
    .head{
	height:100px;
    }
    .headSearchCont{
	top:60px;
	left:50px;
	width:calc(100% - 150px);
    }
    
    .headSearchWord{
	height:30px;
	width:90%; /*80%; */
	font-size:16px;
	padding: 0px 0px 0px 10px;
    }
    .headIconSearchCont{
	display:none;
    }

    .headPicCont{
	top:0px;
	left: 20px;
	height:50px;
	width:340px;
	max-width:65%;
	/*background-color:#001e3a;*/
    }
    .headPic{
	width:100%;
	height:100%;
        object-fit: contain;       
   }

   .headBarGold{
       display:none;
   }
	 
 }
     
/*------------------------------- FELLLES ---------------------------*/




  .headCurtain{
    display:none;
    position:fixed;
    top:130px;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(19, 40, 68, 0.7);/*background-color: rgba(0, 0, 0, 0.2);*/
    z-index:9000;
 }


 .headFreight{
    position:relative;
    width:100%;
    font-family:Abel;
    text-align:center;
    color:white;
    background-color:#225397; 
    z-index:100100;
}
.headFreightTxt{
    position:absolute;
}

.headCont{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    left:0px;
    width:100%;
    z-index:10000;
    background-color:#001e3a; /*rgba(233, 20,124, 1);*/
}
.head{
    position: relative;
    left:0px;
    top:0px;
    width:100%;
    color:white;    
    background-color:#001e3a;/*gammel logo farge:#132844;*/
    z-index:10000;
}
.headSearchCont{
    position:absolute;
}
.headSearchWord{
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom: 3px solid #225397;
    color: white;
    font-family:Arial;
    font-weight:200;
    outline: none;
    background-color:#001e3a;
       background-repeat: no-repeat;
    /*
    border: none transparent;*/
}

.headIconSearchCont{
    position:relative;
    top:5px;
    left:-20px;
}
.headIconSearch{
    width:20px;
    height:20px;
    cursor:pointer;
}
.headPicCont{
    position:absolute;
    top:0px;
}
.headPic{
}

.headBarGold{
   position:relative;
   width:100%;
   height:30px;
   /*z-index:9900;*/
}


.headMeny{
   display:none;
   position:absolute;
   left:10%;
   width:80%;
   z-index:10001;
   background-color:white;
}
.headGoldLine{
   position:relative;
   font-familie:Abel;
   font-size:20px;
   line-height:30px;
   height:30px;
   width:100%;
   color:white;
   background-color:#001e3a;
}

.headGoldTable{
 position:absolute;
 background-color:#001e3a;
 color:white;
 border-collapse: collapse;
 padding:0px;
 margin: auto;
 border:collapse;
}
.headGoldButton{
  max-width: 130px;
  height:20px;
  line-height:20px;
  font-family:Abel;
  font-size: 16px;
  padding:0px;
  margin:0px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  with-space:nowrap;
}
.headGoldButton:hover{
cursor:pointer;
}
.headGoldUnderCont{
    height:4px;
}
.headGoldUnderLine{
 width:30px;
 height:4px;
 margin:auto;
 background-color:#001e3a;
}
.headGoldSpace{
 width:30px;
 height:3px;
}

.headGiftcard{
    position:absolute;
    top:5px;
    right:20px;
    width:80px;
    font-family:Oswald;
    font-size:14px;
    line-height:20px;
    height:20px;
    cursor:pointer;
    color:black;
    background-color:#bbffbb;
    border-radius:15px;
}

.headGiftcard:hover{
    background-color: #44cc44;
}

.headGift{
    display:block;
    position:absolute;
    background-color: #001e3a;
    z-index:10200;
    cursor:pointer;
}

.headLoginPosCont{
    position:absolute;
    left:30px;
    top:0px;
    cursor:pointer;
    background-color: orange;
    background-color: #225397;
}
.headLoginPosCont:hover{
    background-color: #001e3a;
}
.headDropdown{
  position:absolute;
  left:120px;
  top:0px;
  cursor:pointer;
}
.headDropdownVerkstedet{
  left:210px;
}
.headDropdownOrder{
  left:320px;
}
.headDropdownButton{
  color: white;
  height: 30px;
  line-height:30px;
  font-family:Abel;
  font-size: 16px;
  border: none;
  padding: 0px 20px; 
  cursor: pointer;
  background-color: #225397;
}
.headDropdownButton:hover {
  background-color: #001e3a;
}
.headDropdownCont{
  display: none;
  position: absolute;
  color:white;
  background-color: #225397; /*#f9f9f9;*/
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
  border-radius: 0px 0px 10px 10px;
}
.headDropdownCont a{
  color: white;
  font-family:Abel;
  font-size: 16px;
  font-weight:700;
  padding: 5px 20px;
  text-align:left;
  text-decoration: none;
  display: block;
}
.headDropdownCont a:hover {
  background-color: #001e3a;
}
.headDropdown:hover .headDropdownCont {
  display: block;
}
.headDropdown:hover .headDropdownButton {
  background-color: #001e3a;
}

  



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
    .navClose{
	 top:10px;
	 left:5px;
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:40px;	      
     }
     .navSliderGold{
	 top:90px;
	 width:12%;
     }
     .navSliderMeny{
	 top:90px;
	 left:12%;
	 height: calc(100vh - 100px); 
     }     
     .navMeny{
	 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }  

      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

     .navClose{
	 top:10px;
	 left:5px;
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:40px;
     }
     .navSliderGold{
	 top:90px;
	 width:15%;
     }
     .navSliderMeny{
	 top:90px;
	 left:15%;
	 height: calc(100vh - 100px); 
     }     
     .navMeny{
	 grid-template-columns: 1fr 1fr 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }  

      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .navClose{
	 top:55px;
	 left:5px;
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:40px;
     }
     .navSliderGold{
	 top:110px;
	 width:20%;
     }
     .navSliderMeny{
	 top:110px;
	 left:20%;
	 height: calc(100vh - 110px); 
     }     
     .navMeny{
	 grid-template-columns: 1fr 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }  

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

     .navClose{
	 top:55px;
	 left:5px;
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:40px;
     }
     .navSliderGold{
	 top:110px;
	 width:40%;
     } 
     .navSliderMeny{
	 top:110px;
	 left:0%;
	 height: calc(100vh - 110px);
     }     
     .navMeny{
	 grid-template-columns: 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }    
	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

      .kundesenterGrid{
	  grid-template-columns: 49% 49%;
      }

  }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/



	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) {

     .navSliderGold{
	 top:100px;
	 width:40%;
     }
     .navSliderMeny{
	 top:100px;
	 left:0%;
	 height: calc(100vh - 100px);
     }     
    .navMeny{
	 grid-template-columns: 50% 50%;
	 grid-gap:0px;
	 padding:0px;
     }  

    .kundesenterGrid{
	 grid-template-columns: 98%;
     }

 }
     
/*------------------------------- FELLLES ---------------------------*/







/* Style the navigation menu */
     .navCurtain{
	 display:none;
	 position:fixed;
	 top:0px;
	 left:0px;
	 width:100%;
	 height:100%;
	 background-color:rgba(19, 40, 68, 0.7);/*background-color: rgba(0, 0, 0, 0.2);*/
	 z-index:9000;	 
     }

     .navClose{
	 display:block;
	 position:absolute;
	 background-color: #001e3a;
	 text-align:center;
	 color:white;
         z-index:10200;
	 cursor:pointer;
	/* box-shadow: -5px 5px 20px 5px #888888;
	 transition: all 1000ms;
	 border-radius: 20px 0px 0px 0px;*/
     }


     .navGold{
	 display:none;
	 position: absolute;
	 top:60px;
	 left:0px;
	 width: 100%;	 
	 z-index:10001;
     }     
     .navBarGold{
	 display:none;
	 position: absolute;
	 top:60px;
	 left:0px;
	 width: 100%;
	 height:30px;
	 font-family:Abel;
	 font-size:16px;
	 color:white;
	 background-color: #001e3a; /*orange;*/
	 z-index:10001;
     }
     .navSliderGold{
	 display:none;
	 position: absolute;
	 left:0px;
	 font-family:Abel;
	 background-color:#001e3a;
     }

     .navGoldTop{
	 width:100%;
	 height:49px;
	 color: white;
         font-size:30px;
	 line-height:49px;
	 font-family:Abel;
	 text-align:center;
	 background-color: #132844;
	 text-align:center;
	 border-bottom: 1px solid white; /*blir overskrevet av elementet nedenfor*/
	 overflow-x:hidden;
	 z-index:10000;
     }     

     .navGoldTable{
	 display:block;
	 height: calc(100vh - 50px);
	 font-family:Abel;
	 width:100%;
	 overflow:scroll;
	 
     }
     .navGoldTable::-webkit-scrollbar{
	 display: none;
     }
     .navGoldSpace{
	 width:100%;
	 height:18px;
     }
     .navGoldLine{
	 width:100%;
	 font-size: 16px;
	 line-height:16px;
	 color:white;
     }
     .navGoldSpaceX{
	 display:inline-block;
	 width:5%;
     }
     .navGoldName{
	 display:inline-block;
	 max-width:calc(95%);
	 overflow: hidden; /*tar ikke effekt for menyvalg*/
	 white-space:nowrap;
	 text-overflow:ellipsis;
	 /*background-color:orange;*/
     }
     .navGoldName:hover{
	 cursor: pointer;
     }
     .navGoldUnderbar{
	 width:30px;
	 height:4px;
	 margin:auto;
	 background-color:#001e3a;
     }
.navSliderMeny{
    display:block;
    position: absolute;
    width:0px;
    overflow: scroll;
    overflow-x:hidden;
    background-color: white;
    font-family:Abel;
    z-index:10001;
    transition: width 1000ms;
}
.navMenyTop{
    width:100%;
    font-family:Abel;
    text-align:center;
    color: #001e3a;
    height:54px;
    font-family:Abel;
    font-size:30px;
    line-height:48px;
    background-color: white;
    text-align:center;
    border-bottom: 1px solid #001e3a; /*blir overskrevet av elementet nedenfor*/
    overflow-x:hidden;
    z-index:10000;
    cursor:pointer;
}
.navMenyTop:hover{
    text-decoration: underline;
    text-decoration-thickness:3px;
    text-decoration-style:solid;    
   /* color:white;
    background-color: #001e3a;     */
}
.navMenyTopTxt{
    font-size:12px;
}
.navMeny{
    width:100%;
    display:grid;	 
    background-color:white; 
    font-family:Abel;
    color:#1b4786;
}  
.navMenyTitle{
    width:100%;
    min-width:0;
    font-size: 24px;
    /*
  height: 40px;
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
*/
}
.navMenyTitleInner {
}
.navMenyTitleInner:hover {
    text-decoration: underline;
    cursor: pointer;
}

.navMenySubTitle{    
    width:calc(95%);
    min-width:0;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenyLink {
    width:calc(95%);
    min-width:0;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenyLink:hover {
    text-decoration: underline;
    cursor: pointer;
}

.navBrandSearchCont{
    display:flex;
    width:100%;
    justify-content:space-around;
}
.navBrandSearch{
    width: 300px;
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style`: groove;
    color: grey;
    font-family:Abel;
    font-size: 20px;
}
.navBrandSearch:focus {
    outline: none;
}

.navBrandCont{
    position:relative;
    width:100%;
    padding-top:50%;
    font-family:Abel;
    border:1px solid lightgrey;
    cursor:pointer;
}
.navBrandPic{
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:80%;
    object-fit:contain;
}
.navBrandName{
    position:absolute;
    top:-12%;
    font-size:16px;
    color:lightgrey;
    text-align:center;
    width:100%;
}
.navBrandHead{
    width:100%;
    grid-column:1 / -1;
    border-top:3px solid lightgrey;
    font-size:40px;
    color:lightgrey;
}


/*Kundesenter*/

.kundesenterCont{
    color:#001e3a;
    font-family:Abel;
    padding:20px 30px 30px 30px;
    font-size:16px;
}
.kundesenterHead{
    font-size:24px;
}
.kundesenterGrid{
    display:grid;
    width:100%;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}
.kundesenterEl{
    border: 1px solid lightgrey;
    box-shadow: 5px 5px 5px 2px lightgrey;
}
.kundesenterElHead{
    width:90%;
    padding:10px 5% 10px 5%;
    color:white;
    background-color:#001e3a;
}
.kundesenterElBody{
    width:90%;
    font-size:16px;
    padding:10px 5% 10px 5%;
}
.kundesenterLi{
    font-size:16px;
}
.kundesenterElTop{
    width:90%;
    padding:10px 5% 10px 5%;
    color:white;
    font-family:Oswald;
    font-size: 30px;
    text-align:left;
    background-color:#001e3a;
}
.kundesenterElBottom{
    position:relative;
    margin-top: auto;
    width:90%;
    padding:10px 5% 10px 5%;
    color:white;
    font-family:Oswald;
    font-size: 30px;
    text-align:right;
    background-color:#001e3a;
}
.kundesenterAstrix{
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    top:10px;
    right:20px;
    color:white;
    font-size:30px;
}
.kundesenterElButton{
    width:90%;
    padding:10px 5% 10px 5%;
    font-size:24px;
    text-align:center;
    color:white;
    background-color:#001e3a;
    cursor:pointer
}
.kundesenterElButton:hover{
    background-color:#1b4786;
}
.kundesenterBold{
    font-family:Oswald;
    font-weight:400;
}



/*
ratio: https://web.dev/aspect-ratio/
*/
  .prodMainHead{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
      padding:30px;
      }
   
 .pSlideGallery {
      position: relative;
      width:100%;
      background-color:white;
      border:0px;
 }
 .pSlideContCont{
 
 }
 .pSlideCont{
      display: none;
      position: relative;
      width:100%;
      padding-top: 67%;  /* Triks for ratio 56.25%; 16:9 Aspect Ratio */
      /*aspect-ratio:4/5; fungerer ikke eldre browsere*/
      border:1px solid lightgrey;
      }
 .pSlidePic{
      position: absolute;
      top: 0;
      width:100%; /*maa vaere her*/
      height:100%; /*maa vaere her*/
      object-fit: contain;
      }
      .pSlideNumber {
      color: black;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
      }
      .pSlidePrev,
      .pSlideNext {
      cursor: pointer;
      position: absolute;
      width: auto;
      padding: 16px;
      top: 40%; /*forholder seg til hoyden paa pSlideCont*/
      color: black;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 10px 10px 0;
      user-select: none;
      }
      
      /* Position the "next button" to the right */
      .pSlideNext {
      right: 0px; 
      border-radius: 10px 0 0 10px;
      }
      
      /* On hover, add a black background color with a little bit see-through */
      .pSlidePrev:hover,
      .pSlideNext:hover {
      background-color: rgba(0, 0, 0, 0.8);
      color:white;
      }


      /* Six columns side by side */
 .pSlideDemoCont {
      position: relative;
      width:15%;
      padding-top: 10%;  /* Triks for ratio 56.25%; 16:9 Aspect Ratio */
      /*aspect-ratio:4/5; fungerer ikke eldre browsere, bruk javascript*/
       margin: 5px;
      float: left;       
      }

      /* Add a transparency effect for thumnbail images */
      .pSlideDemo {
      position: absolute;
      top: 0;
      width:100%; /*maa vaere her*/
      height:100%; /*maa vaere her*/
      opacity: 0.6;
      border: 2px solid lightgrey;
      object-fit: contain;
      cursor: pointer;
      }

      .pSlideDemoActive,
      .pSlideDemo:hover {
      opacity: 1;
      border: 1px solid black;    
      }




 
    .cSlideRow {
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 30px;
      }
   .cSlideColor {
     font-family: PT Sans Narrow;
      font-size:12px;
      color:black;
      border: 1px solid white;
      cursor: pointer;
    }
   .cSlideCont {
      position: relative; 
      width:100%;
      padding-top: 67%;  
      /*aspect-ratio:4/5; fungerer ikke eldre browsere, bruk javascript*/
       margin: 0px;
       float: left;
       6;*/
      }

    .cSlide {
      position: absolute;
      top: 0;
      width:100%; /*maa vaere her*/
      height:100%; /*maa vaere her*/
      opacity: 1;
      object-fit: contain;
      }

      .cSlideColorActive,
      .cSlideColor:hover {
      /*opacity: 1;*/
      border: 1px solid black;    
      }
     .cSlideText{
     text-align:center;
     }
     .cSlideColorDot{
      display:inline-block;
      height:14px;
      width:14px;
      border-radius:10px;
      border: 1px solid lightgrey;
      margin:4px;
      } 



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/

   
	  
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/


	  
   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
              and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

         .ddsLabelHead{
            height:50px;
            font-size:25px;
            padding: 0px 10px 0px 10px;
            line-height: 50px;
         }
	 .sUI{
	     width:170px;
	     padding:4px;
	     font-size:18px;
	 }
	 .ddsFieldColor{
	     width:30px;
	     height:30px;
	     border-radius: 20px;
      }

      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/

	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 


     .ddsLabelHead{
         font-size:20px;
         padding: 10px 0px;
     }
     .ddsFieldColor{
	     width:15px;
	     height:15px;
	     border-radius: 20px;
      }
     .sUI{
      width:150px;
      padding:4px;
      font-size:18px;
     }

 }
     
/*------------------------------- FELLLES ---------------------------*/
      .ddsColor{
      position:relative;
      display:none;
      }
      .ddsLabelHead{
      color:#132844;/*green;*/
      font-family: Oswald;
      font-weight:100;
      text-align:center;
      cursor:pointer;
      border: 1px solid lightgrey;
      background-color:white;
      }
      .ddsLabelHeadHead{
      }
      .ddsLabel{
      display:inline-block;/*flex; problemer med aa sta paa linje og width% fungerer, table-cell tar ikke width*/
      width:75%;
      font-family:Abel;
      text-align:left;
      text-align:center;
     /* background-color:orange;*/
      }
      .ddsLabelColor{
      display:inline-flex;/*;block  problemer med aa sta paa linje og width% fungerer, table-cell tar ikke width*/
      height:0px;
      width:10%;
      padding: 5px;
      /*background-color:green;*/
      }
      .ddsLabelArrow{
      display:inline-block;/*flex  problemer med aa sta paa linje og width% fungerer, table-cell tar ikke width*/
      height:0px;
      width:10%;
      padding: 0px;
      /*background-color:red;*/
      }
      .ddsSizeCont{
      display:flex;
      position:absolute;
      width:99.5%;
      display:none;
      border: 1px solid lightgrey;
      background-color:white;
      z-index:4;
      }
      .ddsSize{
      width:98%;
      cursor:pointer;
      padding:10px;
      }
      .ddsLine{
      }
      .ddsLineInvers{
	  background-color:#132844;
	  color:white;
      } 
      
   /*   .ddsLine:hover{
         background-color:#F8F8F8;
      }*/
      .ddsField{
      display:inline-block;
      width:50%;
      }
      .ddsFieldColor{
      display:inline-block;
      border:1px solid lightgrey;
      margin:auto;
      }

      .slideUserInfoSpace{
	  width:100%;
	  height:2px;
	  background-color:#132844;
      }
      .sUI{
      font-family:Abel;
      }
    </style>



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/

   
	  
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/


	  
   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/


	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

      .bodyBar{
       height:50px;
       }
      .bodyButton{
       width:150px;
       height:40px;
       font-size:20px;
       line-height:40px;
       padding:5px;
       margin:0;
      }
      .bodyBody{
      padding:20px;
      font-size: 16px;
      }
      
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/

	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

     .bodyBar{
       height:40px;
     }
     .bodyButton{
        width:140px;
        height:40px;
	font-size:16px;
	line-height:40px;
        padding:k5px;
     }
     .bodyBody{
      padding:18px;
      font-size: 18px;
     }

 }
     
/*------------------------------- FELLLES ---------------------------*/

      @media (max-width: 40000px) {
      .bodyCompCont{
      grid-template-columns: 1fr 1fr 1fr 1fr;
      }
      .bodyFrameCont{
      grid-template-columns: 1fr 1fr;
      }
      }
      @media (max-width: 1200px) {
      .bodyCompCont{
      grid-template-columns: 1fr 1fr 1fr;
      }
      .bodyFrameCont{
      grid-template-columns: 1fr;
      }
      }
      @media (max-width: 900px) {
      .bodyCompCont{
      grid-template-columns: 1fr 1fr;
      }
      }
      @media (max-width: 600px) {
      .bodyCompCont{
      grid-template-columns: 1fr;
      }
      }



      .bodyBar{
      font-family: Oswald;
      font-weight: 700;
      background-color:#132844;
      color:white;
      padding:0px;
      }
      .bodyButton{
      display:inline-block;
      font-family: Abel;
      text-align: left;
      cursor:pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      }
      .bodyBody{
      font-family: Abel;
      display:none;
      color: white;
      background-color:#225397;
      }
      .bodyDescCont{
      /*overflow: scroll;
      overflow-x:hidden;*/
      padding:10px;
      /*color: #225397;
      background-color:white;*/
      }
      .bodyCompCont{
      display:grid;
      grid-gap: 10px;
      padding:10px;
      background-color:#225397; /*white;*/
      }
      .bodyCompKey{
      padding:2px;
      background-color:#225397;
      border: 2px solid #225397;
      }
      .bodyCompValue{
      padding:2px;
      color: #225397;
      background-color:white;
      border: 2px solid #225397;
      }
      .bodyFrameCont{
      display:grid;
      grid-gap: 10px;
      }
      .bodyFrameTable{
      }
      .bodyFrameTr{
      color: #225397;
      background-color:white;      
      }
      .bodyFrameTrInvers{
      color:white;
      background-color:#132844;
      }
      .bodyFrameTd{
      padding:10px;
      }
      .bodyFrameTdSpace{
      width:10px;
      background-color:#225397;
      }
      .bodyFramePicCont{
      width:100%;
      background-color:white; /*#225397;*/
      }
      .bodyFramePic{
      width:100%;
      object-fit:contain;
      }

      .toolBodyDebug{
      display:none;
      height:300px; /*100%*/;
      width:100%;
      background-color:#ffffcc;
      color:black;
      padding:4px;'
      }




      @media  (min-width: 1901px) {
      .prodMainGridAdmin{
       grid-template-columns: 1fr 1fr;
      }
      }
      @media  (min-width: 1601px) and (max-width: 1900px)  {
      .prodMainGridAdmin{
       grid-template-columns: 1fr;
      }
      }


/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/
      .prodMainGrid{
       grid-template-columns: 3fr 1fr;
      }
      .prodSectionGallery{
	  grid-row:1/3;
      }
      .prodSectionHeader{
	  padding:50px 0% 30px 0%;
      }
      .prodSectionBody{
          padding:50px 5% 30px 5%;
      }
     .prodMobileCloseBar{
      display:none;
     }	  
     .ppCont{      
      position:relative;
      top:150px;
      width:80%;
      background-color:orange;
      margin: 0px 10% 300px 10%;      
      z-index:8;
      border-radius:10px;
      }
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/
      .prodMainGrid{
       grid-template-columns: 2fr 1fr;
      }
      .prodMainGridAdmin{
       grid-template-columns: 1fr;
      }
      .prodSectionHeader{
	  padding:50px 0% 30px 0%;
      }
      .prodSectionBody{
          padding:50px 5% 30px 5%;
      }
     .prodMobileCloseBar{
      display:none;
     }
     .ppCont{      
      position:relative;
      top:150px;
      width:80%;
      background-color:blue;
      margin: 0px 10% 300px 10%;      
      z-index:8;
      border-radius:10px;
      }
   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/
      .prodMainGrid{
       grid-template-columns: 1fr;
      }
      .prodMainGridAdmin{
       grid-template-columns: 1fr;
      }
      .prodSectionHeader{
	  padding:50px 0% 30px 0%;
      }
      .prodSectionBody{
      padding:50px 5% 30px 5%;
      }
     .prodMobileCloseBar{
      display:none;
     }
     .ppCont{      
      position:relative;
      top:150px;
      width:80%;
      background-color:green;
      margin: 0px 10% 300px 10%;      
      z-index:8;
      border-radius:10px;
      }
     
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

      .prodMainGrid{
       grid-template-columns: 1fr;
      }
      .prodSectionHeader{
	  padding:20px 0% 0% 0%;
      }
      .prodSectionBody{
      width:90%;
      padding:0% 5% 30px 5%;
      }
     .prodMobileCloseBar{
      display:block;
      height:50px;
      font-size: 25px;
      line-height:50px;
     }
     .prodTopbarX{
	  display:none;
     }
     .ppCont{      
      position:relative;
      top:150px;
      width:95%;      
      margin: 0px 0px 300px 0px;      
      background-color:red;
      z-index:8;
      border-radius:10px;
      }
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen 
              and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

      .prodMain{
	  width:100%;         
	  border-left:10px solid #132844; /*#225397;*/
	  border-right:10px solid #132844; /*#225397;*/
	  border-bottom:10px solid #132844; /*#225397;*/
	  border-radius:10px;
      }

      .prodBrandName{
      height:10px;
      font-size:16px;
      padding:0% 0% 20px 0%;
      }
      .prodBrandLogo{
      width:300px;
      height:50px;
      }      
      .prodName{
	  font-size:30px;
	  padding:20px 5% 20px 5%;
      }
      .prodIngress{
	  font-size:24px;
      }
      .prodPriceCont{
	  font-size:24px;
      }
      .prodSrp{
	  font-size: 24px;
	  line-height: 24px;
      }      
      .prodSrpTxt{
	  font-size: 24px;
      }
      .prodLpCont{
	  font-size: 16px;
      }
      .prodLp{
	  font-size: 16px;
	  line-height: 16px;
      }      
      .prodLpTxt{
	  font-size: 16px;
      }
      .prodSrpSingel{
	  font-size: 40px;
	  line-height: 40px;
      }
      .prodMp{
	  font-size: 40px;
	  line-height: 40px;
      }
      .prodMpTxt{
	  font-size: 24px;
      }
      .prodSrpCont{
	  padding-top:10px;
      }
      .prodMainBuy{      
      height:50px;
      font-size: 30px;
      line-height:50px;
      }
      .prodStockStatus{      
      height:16px;
      font-size: 16px;      
      line-height:16px;
      }
    
      
      
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/
     .prodMainGrid{
       grid-template-columns: 1fr;
     }
      .prodSectionHeader{
	  padding:10px 0% 0% 0%;
      }
      .prodSectionBody{
          padding:0% 5% 40px 5%;
      }
	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .prodMainGrid{
       grid-template-columns: 1fr 1fr;
     }
      .prodSectionHeader{
	  padding:40px 0% 40px 0%;
      }
      .prodSectionBody{
          padding: 40px 5% 40px 5%;
      }
      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

      .prodMain{
	  width:calc(100%-8px);    
	  border-left:4px solid #132844; /*#225397;*/
	  border-right:4px solid #132844; /*#225397;*/
	  border-bottom:4px solid #132844; /*#225397;*/
	  border-radius:0px;
      }

     .prodMobileCloseBar{
      display:block;
      height:40px;
      font-size: 24px;
      line-height:40px;
     }
     .prodMobileCloseBar:hover{
       cursor:pointer;
     }
     .prodTopbarX{
	  display:none;
     }
     .prodBrandName{
      height:10px;
      font-size:16px;
      padding:0% 0% 10px 0%;
     }
      .prodBrandLogo{
      width:300px;
      height:50px;
      }      
      .prodIngress{
	font-size:20px;
      }
      .prodName{
	  font-size:24px;
	  padding:15px 2% 10px 2%;
      }
      .prodPriceCont{
	  font-size:24px;
      }
      .prodSrp{
	  font-size: 24px;
	  line-height: 24px;
      }
      .prodSrpTxt{
	  font-size: 18px;
      }
      .prodLpCont{
	  font-size: 12px;
      }	    
      .prodLp{
	  font-size: 12px;
	  line-height: 12px;
      }
      .prodLpTxt{
	  font-size: 12px;
      }
      .prodSrpSingle{
	  font-size: 40px;
	  line-height: 40px;
      }
      .prodMp{
	  font-size: 40px;
	  line-height: 40px;
      }
      .prodMpTxt{
	  font-size: 18px;
      }
      .prodSrpCont{
	  padding-top:10px;
      }
      .prodMainBuy{      
      height:50px;
      font-size: 20px;
      line-height:50px;
      }
      .prodStockStatus{      
      height:50px;
      font-size: 20px;      
      line-height:50px;
      }
      .ppCont{      
      postion:relative;
      width:100%;
      top:150px;
      margin: 0px 0px 500px 0px;      
      background-color:white;
      z-index:8;
      border-radius:0px;
      }

     }

/*------------------------------- FELLLES ---------------------------*/


      .pSlideContCont{
      cursor:default;      
      }      
      .ppCont{
      }
      .prodMain{
      display:block;/*none;
      position:absolute;
      position:relative:
      top:130px;*/	  
      background-color:white;
      }
      .prodMobileCloseBar{
      background-color:#132844;
      font-family: Oswald;
      font-weight:700;
      color:white;
      text-align:center;
      cursor:pointer;
      }
      .prodTopbar{
      position:relative;
      height:10px;
      background-color:#132844;
      font-family: Oswald;
      font-size:20px;
      color:white;
      font-weight: 700;
      }
      /*old topbar
      .prodTopbarButton{
      width:86%;
      display:inline-block;
      cursor:pointer;
      }
      .prodTopbarButton:hover{
      background-color:#225397;;
      }
      .prodTopbarArrow{
      display:inline-block;
      padding:0px 10px 5px 10px;
      }
      .prodTopbarTxt{
       display:inline-block;
       width:86%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       padding:0px 0px 0px 0px;
      }
      .prodTopbarX{
      display:inline-block;
      float:right;
      color:white;
      font-family:Arial, Helvetica, sans-serif;
      font-size:25px;
      padding:0px 10px 0px 10px;
      cursor:pointer;
      }
      */
      .prodTopbarX{
      position:absolute;
      top:-10px;
      right:-21px;
      color:white;
      background-color:#132844;
      border-radius:20px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:25px;
      padding:0px 8px 0px 8px;
      cursor:pointer;
      }
      .prodTopbarX:hover{
      background-color:white;
      color:#132844;
      /*color: #132844;*/
      }
      .prodMainGrid{
      width:100%;
      display: grid;
      grid-gap: 20px;
      }
      .prodMainGridAdmin{
      width:100%;
      display: grid;
      grid-gap: 20px;
      }
      .prodSectionGallery{
      padding-top:10px;
      padding-left:10px;
      padding-right:10px; 
      }
      .prodSectionHeader{
      min-width:0;
      width:100%;
      color:#132844;
      }
      .prodCSlideCont{
      width:90%;
      padding:0% 5% 0% 5%;
      }
      .prodDdsCont{
      width:90%;
      padding:0% 5% 0% 5%;
      }
      .prodBrandName{
      width:100%;
      font-family: Abel;
      color:cornflowerblue;
      text-align:center;
      }
      .prodBrandNameLink{
      cursor:pointer;
      }
      .prodBrandNameLink:hover{
      text-decoration:underline;
      }
      .prodBrandLogo{
      margin:auto;
      display:block;
      object-fit:contain;
      cursor:pointer;
      }
      .prodName{
      min-width:0;
      width:90%;
      font-family: Oswald;
      font-weight:700;
      text-align:center;
      /*white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;*/      
      }
      .prodIngress{
       width:90%;
      font-family: Abel;
      text-align:center;
      padding:0% 5% 0% 5%;
      }
      .prodPriceCont{
	  margin:auto;
	  text-align:center;
	  /*background-color:grey;*/
      }
      .prodSrpTxt{
	  font-family:Abel;
	  font-weight: 400;
      }
      .prodSrpCont{
	  text-align:center;
      }
      .prodSrp{
	  font-family:Abel;
	  /*background-color:orange;*/
      }
      .prodLpCont{
	  text-align:center;
	  font-family:Abel;
	  /*background-color:orange;*/
      }
      .prodLpTxt{
	  font-family:Abel;
	  font-weight: 400;
      }
      .prodLp{
	  font-family:Abel;
	  /*background-color:orange;*/
      }
      .prodSrpSingel{
	  font-family:Abel;
	  color:black;
	  /*background-color:orange;*/
      }
      .prodMpTxt{
	  font-family:Abel;
	  font-weight: 400;
	  text-decoration:underline;
	  color:red;
	  /*background-color:pink;*/
      }
      .prodMpCont{
	  text-align:center;
      }
      .prodMp{
	  font-family: Oswald;
	  font-weight: 700;
	  color:red;
	  /*background-color:yellow;*/
      }

      .prodMainBuyCont{
      display:block;
      position:relative;
      width:90%;
      padding:0 5% 5px 5%;
      }      
      .prodMainBuy{
      width:100%;  
      background-color:#132844; /*green;*/
      text-align:center;
      font-family: Abel;
      color:white;
      cursor:pointer;
      }
      .prodMainBuyWarning{
      position:relative;
      width:100%;
      background-color:red; /*green;*/
      text-align:center;
      font-family: Oswald;
      font-weight: 700;
      font-size:20px;
      line-height:50px;
      color:white;
      cursor:default;
      }
      .prodMainBuyWarningClose{
      display:block;
      position:absolute;
      top:10px;
      right:10px;
      width:20px;
      height:20px;
      background-color:white; /*green;*/
      color:red;
      text-align:center;
      font-family: Abel;
      font-size:14px;
      line-height:20px;
      border-radius:10px;
      cursor:pointer;
      }
      .prodMainBuyAdminText{
	font-size: 20px;  
      }
      .prodMainBuyAdmin{
      display:table-cell;
      width:47%;
      height:40px;
      background-color:#132844; /*green;*/
      line-height:40px;
      text-align:center;
      font-family: Oswald;
      font-size: 20px;
      font-weight: 700;
      color:white;
      cursor:pointer;
      border-top:3px solid white;
      }     
      .prodSectionBody{
      width:90%;
      }
      .prodStockStatus{      
	  text-align:center;
          font-family:Abel;
	  color: #132844;
	  background-color:white;
      }





/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      .bucket{
      grid-template-columns: 1fr 1fr 1fr 1fr;
      }
      .bucketProdSpan{
      grid-column:span 4;
      }
      .bucketAdmin{
      grid-template-columns: 1fr 1fr 1fr;
      }
      .bucketProdSpanAdmin{
      grid-column:span 3;
      }
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      .bucket{
      grid-template-columns: 1fr 1fr 1fr;
      }
      .bucketProdSpan{
      grid-column:span 3;
      }
      .bucketAdmin{
      grid-template-columns: 1fr 1fr;
      }
      .bucketProdSpanAdmin{
      grid-column:span 2;
      }
      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      .bucket{
	  grid-template-columns: 1fr 1fr;
      }
      .bucketProdSpan{
      grid-column:span 2;
      }

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      .bucket{
	  grid-template-columns: 1fr;
      }
      .bucketProdSpan{
      grid-column:span 1;
      }
      }
 

 /*-------------------PC --------------------------------*/      
      @media only screen 
              and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {
      .bucketCont{
      padding:20px;
      }
      .bucketProdColor{
      /*background-color:lightgrey;*/  
      height: 40px;
      }
      .bucketProdColorDot{
      height:30px;
      width:30px;
      border-radius:20px;
      border: 1px solid black;
      margin: 3px;
      }
      .bucketProdColorDotSpace{
      width:10px;
      }

      .bucketProdBrand{
      font-size: 18px;
      }
      .bucketProdName{
      font-size: 18px;
      }
      .bucketProdPrice{
      font-size: 28px;
      }
      .bucketProdLp{
      font-size: 14px;
      }
      .bucketProdFrom{
      font-size: 10px;
      }
      .bucketProdMember{
      font-size: 16px;
      color:red;
      }
      .bucketProdPercent{
      font-size: 14px;
      }

      ul.bucketBreadcrumb li {
	  font-size: 20px;
      }
	  
      ul.bucketBreadcrumb2 li {
	  font-size: 20px;
      }

      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 250px)
            and (-webkit-min-device-pixel-ratio: 2) {
     .bucket{
	 grid-template-columns: 1fr;
     }
     .bucketProdSpan{
      grid-column:span 1;
     }
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 250px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     .bucket{
	 grid-template-columns: 1fr 1fr;
     }
     .bucketProdSpan{
      grid-column:span 2;
      }
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{
	 grid-template-columns: 1fr 1fr 1fr;
     }
      .bucketProdSpan{
      grid-column:span 3;
      }
     }
*/
     
/* ----------- Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
      .bucketCont{
      padding:0px;
      }
      .bucketProdColor{
      /*background-color:lightgrey;*/  
      height: 40px;
      }
      .bucketProdColorDot{
      height:20px;
      width:20px;
      border-radius:20px;
      border: 2px solid black;
      margin: 3px;
      }
      .bucketProdColorDotSpace{
      width:10px;
      }

      .bucketProdBrand{
      font-size: 16px;
      }
      .bucketProdName{
      font-size: 16px;
      }
      .bucketProdPrice{
      font-size: 20px;
      }
      .bucketProdLp{
      font-size: 10px;
      }
      .bucketProdFrom{
      font-size: 8px;
      }
      .bucketProdMember{
      font-size: 10px;
      }
      .bucketProdPercent{
      font-size: 12px;
      }

      ul.bucketBreadcrumb li {
	  font-size: 16px;
      }
      ul.bucketBreadcrumb2 li {
	  font-size: 16px;
      }

     }

/*------------------------------- FELLLES ---------------------------*/

     .bucketCont{
     }
     .bucket{
        display: grid;
        grid-gap: 10px;
      }
      .bucketCurtain{
        position:fixed;
	display:none;
	width:100%; 
	height:100%; 
        /*background-color:rgba(100, 100, 100, 0.7);*/
	background-color:rgba(19, 40, 68, 0.7);
	overflow: scroll;
	overflow-x:hidden;
	z-index:7;	  
      }
     .bucketAdminCont{
	 background-color:white;
      }
     .bucketAdminMain{
	 display:absolute;
	 top:0px;
	 left:0px;
	 width:40%;
	 padding:20px;
     }
     .bucketAdmin{
        display: grid;
        grid-gap: 10px;
      }
      .bucketProd{
      min-width:0;
	width:100%;
	/*height:100%;*/
        outline: 2px solid white;
      }
      .bucketProd:hover{
	width:100%;
        cursor:pointer;
        outline: 2px solid lightgrey;
      }
      .bucketProd:hover .bucketProdInfo{
	filter:brightness(1);
      }
      .bucketProd:hover .bucketProdPicCont{
	filter:brightness(1);
      }
      .bucketProdSpanAdmin{
      }
      .bucketProdSpan{
      }
      .bucketProdSpanOne{
      grid-column:span 1;
      }
      .bucketProdPicCont{
        position: relative;
        width:100%;
	padding-top:100%;
        background-color:white;
	filter:brightness(0.97);
      }
/*      .bucketProdPicContFrontpage{
          position: absolute;
	  top:0;
	  left:0;
          width:100%;
	  padding-top:100%;
	  background-color:white;
	  filter:brightness(0.97);
      }*/
      .bucketProdPic{
	  position:absolute;
	  top: 0;
	  width:100%;
	  height:100%;
	  object-fit: contain;
	  z-index:2;
      }
      .bucketProdHeart{
	  position: absolute;
	  width:30px;
	  height:30px;
	  top: 10px;
	  left: 10px; 
	  color: black;
	  font-size: 24px;
	  font-weight: bold;
	  z-index:3;
      }
      .bucketPkgChosen{
	  position: absolute;
	  display:none;
	  width:70px;
	  height:30px;
	  top: 10px;
	  left: 10px; 
	  color: white;
	  background-color:#132844;
	  text-align:center;
	  font-family: Abel;
	  font-size: 24px;
	  z-index:3;
      }
      .bucketProdNB{
	  position: absolute;
	  bottom: 5%; /*85%*/
	  right: 5%; 
	  color: white;
	  text-align:center;
	  font-family: Abel;
	  font-size: 14px;
	  font-weight: bold;
	  padding:2px 10px 2px 10px;
	  z-index:2;
      }
      .bucketProdVisibleAdmin{
	  display:block;
	  position: absolute;
	  width:100px;
	  height:30px;
	  top: 0px;
	  right: 5px;
	  text-align:right;
	  color: black;
	  font-size: 24px;
	  font-weight: bold;
	  cursor:text;
	  z-index:3;
      }
      .bucketProdIdAdmin{
	  position: absolute;
	  bottom: 0px; /*85%*/
	  left: 0px; 
	  color: white;
	  text-align:center;
	  font-family: Abel;
	  font-size: 14px;
	  font-weight: bold;
	  padding:8px 20px 8px 20px;
	  background-color:white;
	  color:black;
	  cursor:text;
	  z-index:2;
      }
      .bucketProdPercent{
	  position: absolute;
	  top: 10%; /*85%*/
	  right: 0%; 
	  color: white;
	  text-align:center;
	  font-family: Abel;
	  z-index:2;
	  background-color:red;
	  padding:2px 10px 2px 10px;
      }

      .bucketProdTd{
      min-width:0;
      width:100%;
      text-align:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;      
      /*color: #006699;*/
      color:#132844;
      font-family: Abel;
      padding:0px;
      margin:0px;
      border:0px;
      }
      .bucketProdColor{
     /* background-color:lightgrey;*/  
      }
      .bucketProdColorCenter{
      /*background-color:red;*/
      white-space:nowrap;
      text-overflow:ellipsis;
      text-align:center;      
      width:100%;
      }
      .bucketProdColorDot{      
      display:inline-block;
      }
      .bucketProdColorDotSpace{
      display:inline-block;
      }
      .bucketProdInfo{
      background-color:white;
      filter:brightness(0.97);
      }
      .bucketProdBrand{
      font-family:Oswald;
      font-weight: 700;
      }
      .bucketProdName{
      font-weight: 400;
      }
      .bucketProdPrice{
      font-family:Abel;
      }
      .bucketProdLp{
	  font-family:Abel;
      }
      .bucketProdFrom{
      font-weight: 400;
      }
      .bucketProdSRP{
	  display:inline-block;
	  vertical-align: middle;
	  text-align:right;
      }
      .bucketProdMember{
	  display:inline-block;
	  vertical-align: middle;
	  height:28px;
	  line-height:28px;
	  text-align:center;
	  color:red;
      }
      .bucketProdMP{
	  display:inline-block;
	  vertical-align: middle;
	  text-align:left;
	  color:red;
      }
      
      .bucketProdMoreTxt{
	  margin:auto;
	  width:200px;
	  font-family:Abel;
	  font-size: 16px;	  
	  text-align:center;
	  color:#225397;
      }
      .bucketProdMoreButton{
	  margin:auto;
	  width:200px;
	  height:50px;
	  font-family: Oswald;
	  font-size: 18px;
	  line-height:50px;
	  text-align:center;
	  color:white;
	  background-color:#225397;
	  border-radius:25px;
	  cursor:pointer;
      }
      .bucketProdMoreButton:hover{
	  background-color:#132844;
      }
      .bucketProdMoreButtonCont{
	  padding:100px 0px 100px 0px;
      }


      
      .bucketFilterButton{
	  display: block;
	  margin:auto;
	  /*margin: 0px 30px; 0px; 50px;*/
	  width:300px;
	  height:30px;
	  text-align:center;
	  font-family:Abel;
	  font-size:16px;
	  line-height:30px;
	  border-radius: 15px;
	  color:white;
	  background-color:#225397;
	  cursor:pointer;
      }
      .bucketFilterButton:hover{
	  background-color:#132844;
      }

 /*------------------------------- BREADCRUMB ---------------------------*/
      .bucketBreadcrumbTxt {
	  font-family:Abel;
	  font-size: 16px;
	  text-align:center;
      }
      .bucketBreadcrumbCont {	  
	  position:relative;
	  width:100%;
	  margin:0px 0px 0px 0px;
      }
      ul.bucketBreadcrumb {
	  margin:0px;
	  text-align:center;
	  padding: 5px 16px;
	  list-style: none;
      }
      ul.bucketBreadcrumb li {
	  display: inline;
	  font-family:Abel;
      }
      ul.bucketBreadcrumb li+li:before {
	  padding: 8px;
	  color: black;
	  content: "|";
      }
      ul.bucketBreadcrumb li a {
	  color: #0275d8;
	  text-decoration: none;
      }
      ul.bucketBreadcrumb li a:hover {
	  color: #01447e;
	  text-decoration: underline;
	  cursor:pointer;	  
      }

      ul.bucketBreadcrumb2 {
	  margin:0px;
	  text-align:center;
	  padding: 5px 16px;
	  list-style: none;
      }
      ul.bucketBreadcrumb2 li {
	  display: inline;
	  font-family:Abel;
      }
      .bucketBreadcrumb2Sign {
	  padding: 8px;
	  color: red;
	  font-family:Oswald;
	  font-size: 30px;
      }
      ul.bucketBreadcrumb2 li a {
	  color: #0275d8;
	  text-decoration: none;
      }
      ul.bucketBreadcrumb2 li a:hover {
	  color: #01447e;
	  text-decoration: underline;
	  cursor:pointer;
      }





      .detailScrollFrame{
       margin: 0;
       padding: 0;
      height: 400px;
      width:1250px;
      display: block;
      border:solid #000 1px;

      }
      .detailScrollCont{
      height:100%;
      width:100%;

      }
      .detailTable{
      width:1200px; /*1200*/
      background-color:lightgrey;
      font-family:PT Sans Narrow;
      font-size:18px;
      border:1px solid grey;
      }
      .detailColorPicCont{
      width:120px;
      height:120px;
      padding:10px;
      background-color:white;
      cursor:pointer;
      }
      .detailColorPic {
      width:100%; /*maa vaere her*/
      height:100%; /*maa vaere her*/
      object-fit: contain;
      background-color:white;
      }
      .detailPicPicker {
      display:none;      
      position: absolute;
      grid-template-columns: 1fr 1fr;
      width: 400px; 
      height:400px; 
      overflow: scroll;
      overflow-x:hidden;
      background-color:white;
      z-index:2;
      top: 100px;
      left: 200px;
      padding:10px;
      }      
      .detailPicPickerCont{
      width:180px;
      height:180px;
      padding:0px;
      border: 1px solid lightgrey;
      cursor:pointer
      }
      .detailSelectColor{
      width:80px;
      }
      .detailColorRGB{
      width:100px;
      }
      .detailColorName{
      width:200px;
      }
      .detailSizeNumber{
      width:50px;
      text-align:right;
      }    
      .detailSizeNumberCont{
	  position:relative;
	  text-align:right;
	  white-space:nowrap;
	  max-width:100px;
	  border:1px solid black;
	  cursor:pointer;
      }
      .detailSizeRangeCont{
	  position:relative;
	  text-align:right;
	  white-space:nowrap;
	  text-align:right;
	  cursor:pointer;
	  border:1px solid gray;
      }
      .detailSizeGTIN{
	  display:none;
	  position:absolute;
	  top:0px;
	  width:150px;
	  height:20px;
	  font-family:Abel;
	  font-size:16px;		      
	  border-radius:5px;
	  padding:2px 5px 2px 5px;
	  z-index:2;
	  background-color:yellow;
      }
      .toolTableSB{
      width:100%;
      border:1px solid lightgrey;
      font-size:18px;
      }

      .detailAddLine{
      width:60px;
      border:2px solid black;
      font-size:40px;
      font-weight:bold;
      padding:5px 0px 5px 35px;
      border-radius: 20px;
      cursor:pointer;
      background-color:white;
      }
      .detailAddLine:hover{
      background-color:green;
      color: white;
      }
      .detailSizeTypeCont{
      display:inline-block;
      }
      .detailSizeTypeSelect{
      background-color:green;
      color: white;
      font-family:PT Sans Narrow;
      font-size:24px;
      font weight: bold;
      padding:10px;
      border-radius: 20px 20px 0 0;
      }

      .detailError{
      display:none;
      background-color:red;
      color: white;
      font-family:PT Sans Narrow;
      font-size:14px;
      padding:5px;
      }

      .detailColorDimension{
      display:inline-block;
      padding:0px 8px 0px 8px;
      border:2px solid green;
      font-family:PT Sans Narrow;
      font-size:14px;
      font-weight:bold;
      border-radius: 20px;
      background-color:white;
      color:green;
      cursor:pointer;      
      }
      .detailColorDimension:hover{
      background-color:green;
      color:white;
      }
      .detailColorRemove{
      display:inline-block;
      padding:0px 5px 0px 5px;
      border:2px solid red;
      font-family:PT Sans Narrow;
      font-size:14px;
      font-weight:bold;
      border-radius: 20px;
      background-color:white;
      color:red;
      cursor:pointer;      
      }
      .detailColorRemove:hover{
      background-color:red;
      color:white;
      }
      .detailColorDisplay{
	  position:relative;
	  top:5px;
	  width:20px;
	  height:20px;
      }
      .detailDebugKnapp{
      display:inline-block;
      padding:5px 5px 5px 5px;
      border:2px solid black;
      font-size:40px;
      font-weight:bold;
      border-radius: 20px;
      cursor:pointer;
      }
      .detail2D{
	  text-align:right;
      }


      /************** GTIN **********/
      .sizeGTIN{
	  display:inline-block;
	  width:16px;
	  height:16px;
	  border-radius:16px;
	  background-color:red;
      }



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/

   
	  
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/


	  
   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/


	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

       .addonBox{
	    margin: 50px 50px 50px 40px;
       }

      .addonTitle{
         font-size:30px;
         line-height:60px;
      }

      
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 329px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{ grid-template-columns: 1fr;}*/
     
     }

 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 330px) 
            and (max-device-width: 749px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
     
     }


/* ----------- Pad  ----------- */
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     /*.bucket{ grid-template-columns: 1fr 1fr fr;}*/

     }

     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

	 .addonBox{
	     margin: 20px 20px 20px 10px;
	 }

	 .addonTitle{
        font-size:24px;
        line-height:40px;
    }


 }
     
/*------------------------------- FELLLES ---------------------------*/

.addonBox{
}
.addonHr{
  background-color:#132844;
  height:20px;
  width:100%;
}
.addonTitle{
    width:100%;
    font-family:Abel;
    text-align:center;
}









/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
     .pkgPpCont{      
	 width:70%;
	 top:200px;
	 margin: 0px 15% 400px 15%;      	
     }
     
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

      .pkgPpCont{      
	  width:70%;
	  top:200px;
	  margin: 0px 15% 400px 15%;      	
      }

      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/


     .pkgPpCont{      
	 width:70%;
	 top:250px;
	 margin: 0px 15% 400px 15%;      	      	
     }

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/


     .pkgPpCont{      
	width:82%;
	top:300px;
        margin: 0px 10% 500px 10%;      	      	
     }

	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

      .pkgTitle{
         font-size:30px;
         line-height:60px;
      }

      
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/


	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
    .pkgTitle{
        font-size:20px;
        line-height:20px;
    }
    .pkgPpCont{      
	width:82%;
	top:300px;
	margin: 0px 10% 500px 10%;      	
    }


 }
     
/*------------------------------- FELLLES ---------------------------*/

.pkgCurtain{
    position:fixed;
    display:none;
    width:100%; 
    height:100%; 
    /*background-color:rgba(100, 100, 100, 0.7);*/
    background-color:rgba(19, 40, 68, 0.7);
    overflow: scroll;
    overflow-x:hidden;
    z-index:17;	  
}
.pkgPpCont{      
    position:relative;
    background-color:orange;
    z-index:18;
    border-radius:10px;
}

.pkgBox{
  margin: 50px 50px 50px 40px;
}
.pkgAltGroup{
}
.pkgHr{
  grid-column: 1 / -1;
  background-color:rgba(19, 40, 68, 0.7);
  /*background-color:#132844;*/
  height:5px;
  width:100%;
}
.pkgTitle{
    grid-column: 1 / -1;
    width:100%;
    font-family:Abel;
    text-align:center;
}














/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/
     .cartClose{
	 top:7px;
	 right:20px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }
     .cartSliderCont{
	 top:90px;
     }
     .cartCheckoutCont{
	top: 50px;
	width: 50%;
    }

      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/
     .cartClose{
	 top:7px;
	 right:20px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }
     .cartSliderCont{
	 top:90px;
     }
     .cartCheckoutCont{
	display: none;	
        color:blue;
	top: 50px;
	width: 60%;
    }

   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
     .cartClose{
	 top:50px;
	 right:20px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }
      .cartSliderCont{
	  top:110px;
      }
    .cartCheckoutCont{
	top: 50px;
	width: 80%;
    }
	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
     /*.bucket{grid-template-columns: 1fr;}*/
    .cartClose{
	 top:50px;
	 right:5px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }	  
     .cartSliderCont{
	 top:110px;
     }

    .cartCheckoutCont{
	top: 50px;
	width: 90%;
    }

      }


 /*------------------- Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

      .cartSliderMarginTop{
	      font-size:30px;	 
      } 
     .cartCloseUnder{
	 left:6px;
     }
     .cartClose:hover .cartCloseUnder{
	 background-color:white;
     }
     .loginOpen:hover .cartCloseUnder{
	 background-color:white;
     }

     .cartProdTxtQty {
          right:0px;
	  padding:8px;
      }
     .cartProdTxtQtyBorder {
	padding: 0px 12px 0px 12px ;
      } 	  
     
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 329px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{ grid-template-columns: 1fr;}*/
     
     }

 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 330px) 
            and (max-device-width: 749px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
     
     }


/* ----------- Pad  ----------- */
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     /*.bucket{ grid-template-columns: 1fr 1fr 1fr;}*/

     }

     
/* ----------- Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

     .cartClose{
	 top:50px;
	 right:5px;
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }
     .cartCloseUnder{
	 left:10px;
     }
     .cartSliderCont{
	 top:100px;	 
     }


    .cartCheckoutCont{
	top: 50px;
	width: 90%;
    }
    .cartSliderMarginTop{
	 font-size:24px;	 
    }

    .cartProdTxtQty {
        right:-10px;
	padding:8px 0px 8px 0px;
	z-index:2;
     }
    .cartProdTxtQtyBorder {
	padding: 0px 3px 0px 3px ;
     }
    }
 

/* ----------- Felles  ----------- */

     
     .cartCurtain{
	 display:none;
	 position:fixed;
	 top:0px;
	 left:0px;
	 width:100%;
	 height:100%;
	 background-color:rgba(19, 40, 68, 0.7);/*background-color: rgba(0, 0, 0, 0.2);*/
	 z-index:9001;
     }

     .cartSliderCont{
	 display:block;
	 position:absolute;
	 right:0px;
	 width:0px;
	 height:calc(100vh - 100px);    /*100%*/;
	 overflow: scroll;
	 overflow-x:hidden;
	 background-color: white;// rgba(255, 0, 0, 0.8);
	 color: #132844;
	 font-family:Abel;
	 z-index:10001;
	 transition: width 1000ms;
	 background-color: white;
	 /*background-color: yellow; yellow;*/
     }
     .cartSliderCurtain{
	 display:none;
	 position:absolute;
	 width:80%;
	 height:calc(100vh - 250px);
	 padding: 50px 10% 100px 10%;
	 background-color:  rgba(19, 40, 68, 0.7);
	 z-index:100;
     }
     .cartSliderCurtainCont{
	 display:block;
	 width:80%;
	 height:90%;
	 padding: 5% 10% 5% 10%;
	 background-color:  white;
	 overflow:scroll
     }     
     .cartSliderMarginTop{
	 position:relative; 
	 color: #132844;
	 background-color: white; //green;
	 padding: 10px 0px 10px 0px;
	 text-align:center;
	 border-bottom-style:solid;
	 border-color:#225397;
     }
     .cartSliderMarginTopCancel {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size:28px;
	line-height:28px;
	padding: 2px 5px 2px 5px;
	border-radius: 28px;
	opacity: 1;
	font-family:Abel;
	color: white;
	text-align:center;
	background-color:#225397;
	border: 1px solid #225397;
	cursor:pointer;
	z-index:1;
    }
    .cartSliderMarginTopCancel:hover {
      color: white;
      background-color:#132844;
    }    
     .cartSliderGtinInput{
	height:30px;
	font-size:20px;
	width:80%;
	margin:auto;
	/*background-image: url('searchicon2.png');
	  background-position: 470px 5px;	*/
	padding: 0px 40px 0px 10px;
	border:0px;
	outline: none;
     }
     .cartSliderGtinInput:focus{
	 /*background-color:yellow;*/
     }
     .cartSliderMarginTopButton{
	 font-size:12px;
	 padding: 2px 8px 2px 8px;
	 border-radius: 10px;
	 text-align:center;
	 color:white;	 
	 background-color:#225397;
	 cursor: pointer;
     }
     .cartSliderMarginTopButton:hover{
	 background-color: #132844;
     }
     .cartSliderMarginTopWish{
     	 position:absolute;
	 top:20px;
	 right:5px;
     }
     .cartSliderMarginTopCod{
     	 position:absolute;
	 top:20px;
	 left:70px;
     }
     .cartSlider{
	 font-size:24px;
	 margin: auto;	 
	 width:90%;
	 background-color: white; //yellow;
	 font-family:Abel;
	 color:#132844;
     }
     .cartClose{
	 /*position: -webkit-sticky; 
	 position: sticky;
	 float:right;*/
	 display:block;
	 position:absolute;
	 background-color: #001e3a;
	 text-align:center;
	 color:white;
         z-index:10200;
	 cursor:pointer;
	/* box-shadow: -5px 5px 20px 5px #888888;
	 border-radius: 0px 0px 00px 20px;
	 transition: all 1000ms;*/
     }
     .cartCloseUnder{
	 display:block;
	 position:absolute;
	 top:40px;
	 background-color: #001e3a;
	 width:30px;
	 height:4px;
     }
     .cartTotal{
	 display:block;
	 position:fixed;
	 bottom:0px;
	 right:0px;
	 width:0px;
	 height:80px;
	 font-size:30px;
	 background-color: white; //orange;
	 font-family:Ariel;
	 color:white;
	 transition: all 1000ms;
         z-index:10100;
	 box-shadow: -5px -5px 20px 0px #888888;
     }
     .cartTotalCont{
	 position:relative;
	 font-size:20px;
	 height:80px;
	 line-height:80px;
	 font-family:Oswald;
     }
     .cartTotalSum{
	display:inline-block; 
	width:25%;
	height:80px;
	color:#132844;
     }
     .cartTotalSumKr{
	display:inline-block;
	text-align:right;
	width:25%;
	height:80px;
	color:#132844;
     }
     .cartTotalButton{
	 float:right;
	 width:50%;
	 height:80px;
	 line-height:80px;
	 font-size:20px;
	 text-align:center;
	 background-color: #225397;
	 font-family:Oswald;
	 color:white;
	 cursor:pointer;
     }
     .cartTotalButton:hover{
	 background-color: #132844;
     }
     .cartProdPicCont{
	 display:inline-block;
	 position:relative;
	 padding-top:200px;  /* 67%; Triks for ratio 56.25%; 16:9 Aspect Ratio */
	 width:30%;
	 background-color:white;
	 cursor:pointer;
     }
      .cartProdPic{
      position: absolute;
      top: 0;
      width:100%; /*maa vaere her*/
      height:100%; /*maa vaere her*/
      object-fit: contain;
     }
     .cartProdTxtCont{
	 display:inline-block;
	 position:relative;
	 width:50%;
	 padding-top:200px;
	 background-color:white;
     }
     .cartProdTxtQty {
      position: absolute;
      top: 0px;
      font-size:15px;
      line-height:15px;
      font-family:Arial;
      font-weight:700;
      color:green;
    }
    .cartProdTxtQtyButton {
	 display:inline-block;
	 /*position:relative;*/
	 padding: 0px 3px 0px 3px ;
	 border-radius:10px;
	 border: 1px solid green;
	 font-weight:700;
    }
    .cartProdTxtQtyButton:hover {
	background-color:green;
	color:white;
    }
    .cartProdTxtQtyBorder {
	 display:inline-block;
	 /*position:relative;
	 border: 1px solid green;*/
	 font-weight:700;
	 pointer:default;
    }
    .cartProdTxtWish {
	position: absolute;
	left: 0px;
	top:6px;
	background-color:green;
    }
     .cartProdTxtBox {
      position: absolute;
      width:96%;
      bottom: 0px;
      left: 0px;
      padding:3px;
      color: #132844; 
      background-color:white;
      cursor:pointer;
    }
     .cartProdTxtLine{
	 width:100%;
 	 font-family:Abel;
	 font-size:15px;
	 white-space:nowrap;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 background-color:white;
     }
    .cartProdBrand{
 	font-family:Oswald;
	font-size:20px;
	font-weight:700;
     }
    .cartProdHeader{
	font-size:15px;
	line-height:15px;
	height:35px;
	background-color:green;	 
 	font-family:Abel;
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	background-color:white;
    }
    .cartProdHeaderMPCont{
	position:relative;
	height:20px;
	font-size:20px;
 	font-family:Abel;
	font-weight:400;
	color:red;
	background-color:white;
    }
    .cartProdHeaderMP{
	position:absolute;
	bottom:0px;
	left:0p;
    }
    .cartProdPriceCont{
	font-family:Abel;
	 display:inline-block;
	 position:relative;
	 width:20%;
	 padding-top:200px;
	 background-color:white;//
	 text-align:right;
     }
    .cartProdPriceBox {
      position: absolute;
      width:100%;
      bottom: 0px;
      right: 0px;
      font-size:20px;
      padding: 3px;
      text-align:right;
      background-color:white;
    }
    .cartProdPriceMP{
	color:red;
    }
    .cartProdPriceSRP{
	color:#132844;
    }
    .cartProdDelete {
	position: absolute;
	top: 3px;
	left: 0px;
	font-size:18px;
	padding: 3px 5px 0px 5px;
	border-radius: 20px;
	opacity: 1;
	font-family:Abel;
	color: #132844;
	text-align:center;
	background-color:white;
	border: 1px solid #132844;
	cursor:pointer;
	z-index:1;
    }
    .cartProdDelete:hover {
      color: white;
      background-color:#132844;
    }    
    .cartProdDelete:hover .cartIconTrash{
	fill:white;
    }
    .cartIconTrash{
	display:inline-block;
	width:16px;
	height:16px;	
    }
    .cartProdHr{
 	width:100%;
	height:2px;
	background-color:#225397;	 
    }
    .cartProdTotal{
	display:inline-block;
	width:50%;
	font-size:25px;
 	font-family:Oswald;
	font-weight:700px;
    }
    .cartProdTotalSum{
	display:inline-block;
	width:50%;
	font-size:25px;
	font-family:Oswald;
	font-weight:700px;
	text-align:right;
     }    
    .cartProdSpace{
 	width:100%;
	height:10px;
	background-color:white;	 
     }
    .cartProdTotalDiscount{
 	 font-family:Abel;
	 font-size:25px;
	 font-weight:400px;
	 color:red
    }
    .cartProdTotalTxt{
	font-family:Abel;
	font-size:16px
    }
   .cartProdSpaceBottom1{
 	width:100%;
	height:50px;
	background-color:white;	 
     }
    .cartProdSpaceBottom2{
 	width:100%;
	height:400px;
	background-color:white;	 
     }
    .cartCheckoutCont{
	display: none;	
        color:#132844;
	position: relative;
	margin: 0 auto;
	border: none;
	background-color:white;

    }
    .cartCheckoutIF{
        color:green;
	margin: 0 auto;
	width: 700px;
	height: 700px;
	border: none;
	background-color:orange;

    }

    .cartFreightHead{
	width:100%;
	height: 30px;
	font-size: 24px;
	color: #132844;
    }

    .cartFreightCont{
	width:100%;
	height: 50px;
    }
    .cartFreight{
	display:inline-block;
	position:relative;
	width: 75%;
	font-size: 15px;
	height:30px;
    	font-family: Abel;
	color: #132844;
    }
    .cartFreightBox{
	position:absolute;
	top:2px;
	left:2px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border: 1px solid  #132844;
	border-radius: 10px;

	text-align: center;
	color: white;
	background-color: white;
	cursor:pointer;
    }	
    .cartFreightBox:hover{
	background-color:#132844;
    }
    .cartFreightBoxActive{
	background-color:#132844;
    }
    .cartFreightTxt{
	position: absolute;
	top:5px;
	left:25px;
    }

     .cartProdFreightPriceCont{
	 display:inline-block;
	 position:relative;
	 width:25%;
	 height:40px;
	 text-align:right;
     }
    
    .cartCommentCont{
	width: 100%;
	height: 110px;
	border: none;
	color:green;
	background-color:white;
    	font-family: Abel;
	color: #132844;
    }

    .cartCheckoutComment{
	width: 100%;
	height: 80px;		
	font-family: Abel;
	font-size: 18px;
	border-radius:10px 10px 10px 10px ;
    }

    .cartCheckoutCommentButton{
	width: 100%;
	height: 24px;
	color:white;
	font-family: Abel;
	font-size: 20px;
	line-height:24px;
	text-align:center;
	background-color:#132844;
	border-radius:0 0 10px 10px;
	cursor:pointer;
    }

    .cartPosButtonCont{
	display:inline-block;
    }
    .cartPosButton{
	margin:auto;
	width:70%;
	height:80px;
	line-height:80px;
	font-family:Oswald;
	font-size:30px;
	text-align:center;
	background-color:#132844;
	color:white;
	border-radius:20px;
	cursor:pointer	       
    }
    .cartPosButton:hover{
	background-color:#225397;
    }
     
    .cartPosDiscountRecordButton{
	position:relative;
	top:8px;
	height:43px;
	width:96%;
	family:Oswald;
	font-size: 35px;
	line-height:39px;
	text-align:center;
	color: white;
	border-radius:10px;
	background-color:green;
	cursor:pointer;
    }
    .cartPosProdTotalSum{
 	width:100%;
	font-family:Oswald;
	font-size:25px;
	font-weight:700px;
	color:#132844;
	background-color:yellow;
	text-align:right
    }



/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      .loginOpen{
	 top:7px;
	 right:90px;
	 width:35px;
	 height:40px;
	 font-size:30px;
        line-height:50px;
     }

      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

     .loginOpen{
	 top:7px;
	 right:90px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }

      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/

     .loginOpen{
	 top:50px;
	 right: 90px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/

     .loginOpen{
	 top:7px;
	 right:7px;
	 width:35px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }
	  
      }
 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {
	  
	.loginUserDataCont{
	      top: 50px;
       }
       .loginLogoutButton{
	   right:20px;
	   top:20px;
	   width:100px;
	   height:30px;
	   line-height:30px;
       }
       .loginUserCont{
	  position:relative;
	  padding:40px 40px 40px 40px;
       }

      .loginButtonCont{	      
	  padding:5px 5px 20px 0px;
      }

      .loginUserBoxSubject{
	  height:50px;	  
	  line-height:50px;
	  color: #132844;
      }
      .loginCodeNew{
	  width: 150px;
	  font-size:16px;
	  padding: 5px 10px 5px 10px;
      }
      .loginGroupCode{
	  top:30px;	    
      }


      .loginDropdownCont{
	  position: absolute;
	  width:200px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
	  border-radius:20px;
      }
      .loginDropdownCont span{  
	  font-size: 16px;
	  padding: 12px 16px;
      }
      .loginDropdownCont .loginStroke{
	  width:30px;
	  height:4px;
      }

   }


 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/



	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
	 
	 .loginOpen{
	 top:3px;  /*50px*/
	 right:5px; /*50px*/
	 width:50px;
	 height:40px;
	 font-size:30px;
	 line-height:50px;
     }

	 .loginUserDataCont{
	     top: 20px;
	 }

	 .loginLogoutButton{
	     right:5px;
	     top:15px;
	     width:70px;
	     height:25px;
	     line-height:25px;
	 }
	 .loginUserCont{
	     padding:10px 10px 10px 10px;
	 }
	 .loginButtonCont{
	     padding:0px 0px 0px 0px;
	 }
	 .loginUserBoxSubject{
	     height:30px;
	     line-height:30px;
	 }
	 .loginCodeNew{
	     width: 100px;
	     font-size:16px;
	     padding: 2px 5px 2px 5px;
	 }
	 .loginGroupCode{
	     top:10px;	    
	 }

	 
	 .loginDropdownCont{
	     position: absolute;
	     width:160px;
	     box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.4);
	     border-radius:10px;
	 }
	 .loginDropdownCont span{  
	     font-size: 14px;
	     padding: 10px 10px;
	 }
	 .loginDropdownCont .loginStroke{
	     width:15px;
	     height:8px;
	 }


     }
     
/*------------------------------- FELLLES ---------------------------*/



 .loginPic{
     height:40px;
     widht:40px;
}

 .loginOpen{
         /*
   position: -webkit-sticky; 
    position: sticky;
    float:right;
    top:0px;
*/
     display:block;
         position:absolute;
         background-color: #001e3a;
         text-align:center;
         color:white;
         z-index:10200;
         cursor:pointer;
        /* box-shadow: -5px 5px 20px 5px #888888;                                                                                                     
         transition: all 1000ms;                                                                                                                      
         border-radius: 20px 0px 0px 0px;*/
}

.loginUserCont{
    position:relative;
}
.loginUserBoxSubject{
    font-size: 24px;
    font-family:Abel;
    color: #132844;
}
.loginSec{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px;
    width:100%;
    white-space: nowrap;
}
.loginUserTxt{
    position:relative;
    top:8px;
    left:10px;
    height:14px;
    width:80px;
    font-family:Abel;
    font-size: 14px;
    line-height:16px;
    color: #132844;
}
.loginUserInput{
    height:40px;
    width: 300px;
    font-family:Abel;
    font-size: 16px;
    color: #132844;
    border-radius:10px;
    padding:2px 5px 2px 10px;
}
.loginUserWarning{
    visibility: hidden; /*visible;*/
    font-family:Abel;
    font-size: 12px;
    color: red;
}
.loginSendLinkWarning{
    display:none;
    position:absolute;
    top: 45px;
    font-family:Abel;
    font-size: 12px;
    color: red;
}

.loginButtonCont{
    position:relative;
}
.loginButton{
    grid-column:span 2;
    width:100%;
    height:40px;
    font-size:20px;
    line-height:40px;
    border-radius:30px;
    font-family: Abel;
    text-align:center;
    color:white;    
    cursor:pointer;
    background-color:#225397;
}
.loginButtonSave{
    position:absolute;
    right:50px;
}
.loginButton:hover{
    background-color:  #132844;
}

.loginBoxNew{ /*ytre rammen rundt section, setter position slik at absolut virker, brukes bare i login.js ny bruker*/
    position:relative;
    font-size:24px;
    background-color:#225397;  /*  #e6f7ff border-color:#0088cc;*/
    padding: 30px;
    color:white;
}



.loginOnTimeCode{
    display:inline-block;
    font-size:16px;
    width:50%;
    height:80px;
    color:#132844;
    cursor:pointer;    
}
.loginOnTimeCode:hover{
    text-decoration:underline;
}
.loginSpaceStart{
    display:inline-block;
    width:50px;
}
.loginUserDataCont{
    display: none;
    width: 90%;
    background-color: white; /*cornflowerblue; yellow;*/
    position: relative;
    margin: 0 auto;
    border: none;
}


.loginTermCont{
    width:100%;
    box-shadow: 10px 10px 20px grey;
    background-color:white;
}
.loginTermBack{
    width:100%;
    height:60px;
    color:white;
    background-color:#132844;
    font-family: Abel;
    font-size:30px;
    line-height: 60px;
    text-align:center;    
}
.loginTermBody{
    width:100%;
    height:100%;
    color:#132844;
    background-color:white;
    font-family: Abel;
    font-size:16px;
    overflow: scroll;
}


.loginDropdown{
  position:relative;
  cursor:pointer;    
}
.loginDropdownCont{
    position: absolute;
    display:block;
    height:0px;
    top:0px;
    left: 0px;
    border-right: 1px solid #132844;
    /*min-width: 160px;*/
    z-index: 2;
    overflow:hidden;
    background-color: #132844;
    color: white;
    transition: height 300ms ease-out;
}
.loginDropdownCont span{  
    display: inline-block;
    font-family:Arial;
    font-weight:700;
}
.loginDropdownCont span:hover .loginStroke{
   background-color:white;
}
.loginDropdown:hover{
    background-color:#132844; /*#001e3a;*/
}
.loginDropdownCont .loginStroke{
    background-color:#132844;/*#001e3a;*/
    margin:auto;
}


.loginUserBoxContCont{
    height: 0px;
    overflow:hidden;
    transition: height 500ms ease-out;
}
.loginUserBoxCont{
    position:relative;
    padding:20px 10px 10px 10px;
    background-color:#225397;
}
.loginUserBox{
    position:relative;
    width:98%;
    padding:10px 1% 10px 1%;
    border-radius: 20px;
    background-color:white;
}
.loginUserBoxContDel{    
    position: absolute;
    color:white;
    padding: 0px 10px 0px 10px;
    font-size:30px;
    line-height:30px;
    text-align:center;
    font-family:Oswald;
    font-weight:700;
    right:0px;
    top: 7px;
    background-color:#001e3a;
    cursor:pointer;
}
/*
.loginInstruction{
    width:98%;
    max-height:0px;
    font-family:Abel;
    font-size:16px;
    color:white;
    padding:0px 1% 0px 1%;
    overflow: hidden;
    transition: max-height 1000ms ease-out;
      }
       */
.loginInstruction{
    /*display:none;*/
    width:98%;
    height:0px;
    font-family:Abel;
    font-size:16px;
    color:white;
    overflow: hidden;
    transition: height 500ms ease-out;
}


.loginButtonCircle{
    position: absolute;
    height:30px;
    width:30px;
    top: 10px;
    right: 5px;
    font-size:18px;
    border-radius: 20px;
    border: 1px solid black;
    line-height:30px;
    font-family:PT Sans Narrow;
    color: black;
    text-align:center;    
    background-color:white;
    cursor:pointer;
}
.loginButtonCircleDelRed{
    color: red;
    right:245px;
    border: 1px solid red;
}
.loginButtonCircleDelRed:hover{
    color: white;
    background-color:red;
    border: 1px solid red;
}
.loginButtonCircleStatusGreen{
    right:350px;
    background-color:green;
    border: 1px solid green;
}
/*.loginButtonCircleStatusGreen:hover{
    background-color:red;
    border: 1px solid red;
}*/
.loginButtonCircleStatusRed{
    right:350px;
    background-color:red;
    border: 1px solid red;
}
/*.loginButtonCircleStatusRed:hover{
    background-color:green;
    border: 1px solid green;
}*/
.loginButtonCircleTxt{
    position: absolute;
    width:40px;
    top: 43px;
    font-size:11px;
    text-align:center;
    font-family:Abel;
    color:#001e3a;
    z-index:5;
}
.loginButtonCircleTxtDel{
    right:240px;
}
.loginButtonCircleTxtStatus{
    right:345px;
}
.loginButtonCircleTxtCustomer{
    color:white;
}

.loginElementSaveCont{
    position:absolute;
    right: 80px;
    width:100px;
}
.loginElementSave{
    height:40px;
    font-size:20px;
    line-height:40px;
    border-radius:30px;
    font-family: Abel;
    text-align:center;
    color:white;    
    cursor:pointer;
    background-color: #225397;
}
.loginElementSave:hover{
   background-color: #001e3a;    
}
.loginElementSaveWarningCont{
    width:300px;
    position:relative;
    float:right;
}
.loginElementSaveWarning{
    position:absolute;
    right:50px;
    top: 50px;
}


.loginUserNewCont{
    background-color: white;
    padding:30px;
    border-radius:20px;
}

.loginLogoutButton{
    position:absolute;
    font-size:16px;
    border-radius:10px;
    font-family:Abel;
    text-align:center;
    color:white;
    background-color: #225397;
    cursor:pointer;
}
.loginLogoutButton:hover{
    background-color: #001e3a;
}
.loginCloseButton{
    right: 20px;
    background-color: green;
}
.loginHeading{
    font-size:24px;
    font-familie:Abel;
    color: #132844;
}
.loginHeadingNew{
    font-size:24px;
}
.loginTxt{
    font-size:16px;
    font-familie:Abel;
    color: #132844;
}
.loginTxtNew{
    font-size:16px;
}
.loginGroupTxt{
    font-size: 16px;
    margin-top:0px;
    margin-buttom:0px;
    font-family: Abel;
    color:white;
}
.loginGroupCode{
    position:absolute;
    right: 10px;    
    font-family: Abel;
    font-size: 16px;
}

.loginCodeNew{
    position:relative;
    font-size:16px;
    border-radius:10px;
    font-family: Abel;
}
.loginCodeNewButton{
    width: 100px;
    height: 30px;
    font-size:16px;
    line-height:30px;
    border-radius:15px;
    border: 2px solid white;
    font-family: Abel;
    color:white;
    text-align:center;
    cursor:pointer;
}
.loginCodeNewButton:hover{
    border: 2px solid #132844;
    background-color: #132844;
}
.loginCodeNewW{
    font-size:16px;
    font-family: Abel;
    color:yellow;
}


    





/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/
     .footerNav{	      
	 grid-template-columns: 1fr 1fr 1fr;
	 width: 70%;
     }
   
      
      .footerCurtainCookie{
	  bottom:0px;
	  width:60%;
	  left: calc(100%/2 - 60%/2);
	  height:200px;
	  border-radius:8px;
      }
      
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/
     .footerNav{
	 grid-template-columns: 1fr 1fr 1fr;
	 width:80%;
     }

           .footerCurtainCookie{
	  bottom:0px;
	  width:60%;
	  left: calc(100%/2 - 60%/2);
	  height:200px;
	  border-radius:8px;
      }

   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
      .footerNav{
	  grid-template-columns: 1fr 1fr;
	  width:90%
      }

            .footerCurtainCookie{
	  bottom:0px;
	  width:80%;
	  left: calc(100%/2 - 80%/2);
	  height:200px;
	  border-radius:8px;
      }

	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/
    .footerNav{
	grid-template-columns: 1fr;
	width: 100%;
      }

          .footerCurtainCookie{
	  bottom:0px;
	  width:100%;
	  left: 0px;
	  height:200px;
	  border-radius:8px;
      }

      }


 /*------------------- Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {
    .footerCont{
	
     }
    .footerNav{
    }
     .footerHead{
     }
    .footerTxt{
    }

    .footerIcon{
    }

      .footerKlarna{

     }



      .footerCurtainCookieContMore{
	  	 height: 540px;
     }     

     .footerButton{
     }
     .footerButtonFixCont{
     }
     .footerButtonFix{
     }


      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 329px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{ grid-template-columns: 1fr;}*/
     
     }

 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 330px) 
            and (max-device-width: 749px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
     
     }


/* ----------- Pad  ----------- */
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     /*.bucket{ grid-template-columns: 1fr 1fr 1fr;}*/

     }

     
/* ----------- Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

    .footerCont{
     }
	      
    .footerNav{
	grid-template-columns: 1fr;
	width:100%;
    }
     .footerHead{
     }
    .footerTxt{
    }
     .footerIcon{
     }
      .footerKlarna{
     }


      .footerCurtainCookie{
	  bottom:4px;
	  width:80%;
	  height:320px;
	  border-radius:8px;
	  left: calc(100%/2 - 80%/2);
      }
     .footerCurtainCookieContMore{
	 height: 1080px;
     }     
     .footerButton{
     }
     .footerButtonFixCont{
     }
      .footerButtonFix{
      }

     }
 

/* ----------- Felles  ----------- */


     .footerCont{
	 background-color:#001e3a;
	 width:100%;
	 padding: 100px 0px 200px 0px;
     }
     .footerCol{
	 background-color:#001e3a;
     }
     .footerNav{
	 display:grid;
	 background-color:#001e3a;
	 width: 70%;
	 font-size:15px;
	 line-height:20px;
	 grid-gap:40px;
	 margin:auto;
	 color:white;
	 font-family:Abel;
     }
     .footerHead{
	 font-family:Abel;
	 font-size:25px;
	 line-height:35px;
     }
     .footerHeadBold{
	 font-family:Oswald;
	 font-weight:700;
     }
     .footerTxt{
	 font-family:Abel;
	 font-size:15px;
	 line-height:20px;
     }
     .footerInline{
	 display:inline;
     }
     .footerR{
	 float:right;
     }
     .footerLink{
	 color:#a1c8e1;
	 text-decoration:none;
	 cursor:pointer;
     }
     .footerLink:hover{
	 text-decoration:underline;
     }
     .footerIcon{
	 width:40px;
	 height:40px;
     }
     .footerKlarna{
	 width:70px;
	 height:28px;
     }
     .footerButton{
	 width: 70%;
	 font-familie:Abel;
	 text-align:center;
	 color:#132844;
	 background-color:#bfb;
	 border-radius:20px;
     	 cursor:pointer;
     }
     .footerButton:hover{
	 background-color: #4c4;
     }
     .footerCurtain{
	 display:none;
	 position:fixed;
	 width:500px;
	 height:350px;
	 top:0px;
	 left:0px;
	 /*background-color:rgba(19, 40, 68, 0.5);*//*background-color: rgba(0, 0, 0, 0.2);*/
     }
     .footerCurtainCookie{
	 display:none;
	 position:fixed;
	 margin:auto;
	 background-color:white;
	 z-index:90000;
	 border:1px solid grey;
     }
     .footerCurtainCookieCont{
	 padding: 2%;
     }
     .footerCurtainCookieContMore{
	 position: relative;
	 padding: 2%;
	 height: 540px;
	 overflow:scroll;
     }     
     .footerButtonFixCont{
	 position:absolute;
	 width:96%;
	 text-align:center;
	 bottom: 20px;
	 bakground-color:white;
     }
     .footerButtonFix{
	 display:inline-block;
	 font-size:18px;
	 line-height:30px;
	 height: 30px;
	 border-radius:20px;
	 width: 230px;
	 font-family:Oswald;
	 text-align:center;
	 color:white;
	 background-color: #225397;
	 cursor:pointer
     }
     .footerButtonFix:hover{
	 color:white;
	 background-color: #132844;
     }
     .footerButtonFixGrey{
	 color: #132844;
	 background-color:lightgrey;
     }
     .footerButtonFixBig{
	 width: 460px;
     }
     .footerCookieSL{
	 width:50px;
	 height:50px;
     }
     .footerCookieHead{
	 display:inline-block;
	 font-family:Abel;
	 width: calc(100% - 80px);
	 font-size:20px;
	 text-align:center;
     }
     .footerHeadBold{
	 font-family:Oswald;
	 font-weight:700;
     }
     .footerCookieLink{
	 display:inline-block;
	 width:150px;
	 height:17px;
	 cursor:pointer;
     }
     .footerCookieLink:hover{
	 cursor:pointer;
	 text-decoration:underline;
     }
	 
     



/*-------------------PC 2100 + --------------------------------*/     
      @media  (min-width: 2801px) {
    	  .recordSec-1{ /*section med article elementer*/
	      grid-template-columns: repeat(12,1fr);	      
	  }
      }
	  
/*-------------------PC 2100 + --------------------------------*/     
      @media  (max-width: 2800px) and (min-width: 2101px) {

	  .recordSec-1{ /*section med article elementer*/
	      grid-template-columns: repeat(10,1fr);	      
	  }


      }

/*-------------------PC 1600 + --------------------------------*/     
      @media  (max-width: 2100px) and (min-width: 1601px) {

	  .recordSec-1{ /*section med article elementer*/
	      /*grid-template-columns: 200px 200px 200px 200px 200px 200px;*/
	      grid-template-columns: repeat(8,1fr);
	  }


      }
/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

	  .recordSec-1{ /*section med article elementer*/
	      grid-template-columns: repeat(6,1fr);
	  }

      }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {

	  .recordSec-1{ /*section med article elementer*/
	      grid-template-columns: repeat(4,1fr);
	  }
	  
      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {

	  .recordSec-1{ /*section med article elementer*/
	      grid-template-columns: repeat(2,1fr);
	  }
      }
 

 /*-------------------PC FELLES --------------------------------*/      
      @media only screen 
              and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

	  .recordBoksHead{
	     font-size: 18px;
	     padding:25px 1% 25px 1%;	     
	 }

	  .recordSec-1{ /*section med article elementer*/
	      grid-gap: 10px;
	  }
	  .recordArt-2NB{ 
	      /*background-color:#cceeff;*/
	      left:10px;
	      height:8px; /*teksten kommer paa nedsiden og utsiden ved behov*/
	      width:50px;
	      font-size: 14px;
	      line-height:16px;
	  }
	  .recordArt-2NB-inline{
	      border-radius:5px;
	  }
	  .recordArt-1{
	      min-height:28px;
	      font-size: 16px;
	      padding:8px 5px 0px 10px;
	  }
	  .recordArt-1S{
	      padding:8px 5px 0px 20px;
	      font-size: 16px;	     
	  }
	  .recordArt-1E{
	      width:85%;
	      height:32px;
	      font-size: 16px;
	      border:2px solid #132844;
	      border-radius:10px;
	      padding:2px 5% 2px 5%;
	  }



	  .recordArt-1ED{ /*dropdown*/
	      border-radius:10px;
	  }
	  .recordArt-1ER label {
	      font-size: 16px;
	      padding: 3px 20px;
	      margin: 0px 20px 0px 0px;
	      border-radius: 10px;
	      border: 2px solid #444;
	  }
	  .recordArt-1ERR{ /*radio*/
	      font-size:32px;
	  }
	  .recordArt-1ER{ /*radio*/
	      min-height:32px;
	  }
	  

	  .recordArt-1EC{/*checkbox*/
	      min-height:32px;
	      border-radius:10px;
	  }
	  .recordArt-1ECLabel label {
	      padding: 3px 20px;
	      font-size: 16px;
	      border-radius: 10px;
	      margin: 0px 20px 0px 0px;
	  }
	  
	  .recordWarning{
	      font-size: 12px;	     
	      padding:0px 0px 0px 10px;
	      border-radius:5px;
	      white-space: normal;
	  }

      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 250px)
            and (-webkit-min-device-pixel-ratio: 2) {

     }	 
 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 250px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {

	 .recordSec-1{ /*section med article elementer*/
	     grid-template-columns: repeat(4,1fr);
	  }

     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{
	 grid-template-columns: 1fr 1fr 1fr;
     }
      .bucketProdSpan{
      grid-column:span 3;
      }
     }
*/
     
/* ----------- Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 


	 .recordSec-1{ /*section med article elementer*/
	     grid-template-columns: repeat(2,1fr);
	     grid-gap: 4px;
	 }

	 .recordBoksHead{
	     font-size: 16px;
	     padding:5px 1% 5px 1%;	     
	 }

	  .recordArt-2NB{ 
	      /*background-color:#cceeff;*/
	      left:10px;
	      height:6px; /*teksten kommer paa nedsiden og utsiden ved behov*/
	      width:60px;
	      font-size: 11px;
	      line-height:10px;
	  }
	  .recordArt-2NB-inline{
	      border-radius:3px;
	  }
	  .recordArt-1{
	      height:26px;
	      font-size: 14px;
	      padding:6px 3px 0px 10px;
	  }
	  .recordArt-1S{
	      padding:4px 2px 0px 10px;
	      font-size: 14px;	     
	  }

	  .recordArt-1E{
	      width:85%;
	      height:24px;
	      font-size: 14px;
	      border:1px solid #132844;
	      border-radius:4px;
	      padding:1px 5% 1px 5%;
	  }

	  .recordArt-1ER{ /*radio*/
	      min-height:20px;
	  }
	  .recordArt-1ED{ /*dropdown*/
	      border-radius:8px;
	  }
	  .recordArt-1ER label {
	      font-size: 14px;
	      padding: 2px 20px;
	      margin: 0px 20px 0px 0px;
	      border-radius: 8px;
	      border: 2px solid #444;
	  }
	  .recordArt-1ERR{ /*radio*/
	      font-size:16px;
	  }


	  .recordArt-1EC{/*checkbox*/
	      min-height:24px;
	      border-radius:8px;
	  }
	  .recordArt-1ECLabel label {
	      padding: 2px 10px;
	      font-size: 14px;
	      border-radius: 8px;
	      margin: 0px 10px 0px 0px;
	  }

	  
	  .recordWarning{
	      font-size: 8px;	     
	      padding:0px 0px 0px 6px;
	      border-radius:4px;
	      white-space: normal;
	  }

     }

/*------------------------------- FELLLES ---------------------------*/

.recordSec-2{ /*ytre rammen rundt section, setter position slik at absolut virker, brukes bare i login.js ny bruker*/
    position:relative;
    background-color:#225397;  /*  #e6f7ff border-color:#0088cc;*/			      
    padding:30px;
    font-size: 18px;
    color:white;
}

.recordSec-1{ /*section med article elementer*/    
    display: grid;
    white-space: nowrap;
}


.sec-1E{
    display:none;
    z-index=1;
}





/*Felles boks*/
.recordBoks{
    /*border-radius:8px;*/
    font-family:Abel;
    font-size: 16px;
    color:#132844; /* #006699; */
}
.recordBoksHead{
    position:relative;
  /*  height: 35px;*/    
    width: 98%;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    text-align:center;
    color:white;
    background-color:#225397;
}
.recordBoksHeadL{
    text-align:left;
}
.recordBoksHeadToggle{
    cursor:pointer;
}
.recordBoksHeadToggle:hover{
    background-color:#001e3a;
}
.recordBoksCont{
    display:Block;
    width:100%;
}
.recordBoksHr{
    position: relative;
    /*top:-15px;*/
}



.recordCol-1{ grid-column: span 1; }
.recordCol-2{ grid-column: span 2; }
.recordCol-3{ grid-column: span 3; }
.recordCol-4{ grid-column: span 4; }
.recordCol-5{ grid-column: span 5; }
.recordCol-6{ grid-column: span 6; }
.recordCol-7{ grid-column: span 7; }
.recordCol-8{ grid-column: span 8; }

.art-2{
    padding:5px;
    /*background-color:#cceeff;*/
}
.recordArt-2NB{ 
    /*background-color:#cceeff;*/
    position:relative;
    top:0px;
    font-family:Abel;
    color: #132844;
   /* background-color:orange;*/
}
.recordArt-2NB-inline{
    display:inline-block;
    background-color:white;
    white-space:nowrap;
}
.recordArt-1{
    font-family:Abel;
    color: #132844;
    white-space: nowrap;
    overflow: hidden;
}
.recordArt-1E{
    family:Abel;
    color: blue;
    background-color:white;
}
.recordArt-1-noneBorder{
    border:0px solid black;
}
.recordArt-1-whiteColor{
    color:white;
}
.recordArt-1ER{ /*radio*/
}
.recordArt-1ED{ /*dropdown*/
    border-radius:10px;
}
.recordArt-1ER input[type="radio"] {
  opacity: 0;
  position: absolute;
  width: 0px;
}
.recordArt-1ER label {
    display: inline-block;
    font-family: Abel;
    background-color: #eee;
    cursor:pointer;
}
.recordArt-1ER input[type="radio"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
.recordArt-1ER input[type="radio"]:focus + label {
    border: 2px dashed #444;
}
.recordArt-1ER label:hover {
  background-color: #dfd;
}

.recordArt-1ERR{ /*radio*/
}
.recordArt-1S{
}
.recordArt-1ES{/*select*/
    color:blue;
}
.recordArt-1EC{/*checkbox*/
    border:2px solid #132844;
    background-color:white;
    color: #132844;
}

.recordArt-1ECLabel {
    display: block;
    position:relative;
    font-family: sans-serif, Arial;
}
.recordArt-1ECLabel input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0px;
}
.recordArt-1ECLabel label {
    display: inline-block;
    background-color: #eee;
    font-family: Abel;
    border: 2px solid #444;
    cursor:pointer;
}
.recordArt-1ECLabel input[type="checkbox"]:checked + label {
    background-color:#bfb;
    border-color: #4c4;
}
.recordArt-1ECLabel input[type="checkbox"]:focus + label {
    border: 2px dashed #444;
}
.recordArt-1ELabel:hover {
  background-color: #dfd;
}


.recordWarning{
    display:inline-block;
    visibility: hidden; /*visible;*/
    font-family:Abel;
    color: red;
    /*overflow: hidden; Ved nowrap vil default lengde paa warning setter min bredde paa kolonnen
    white-space: nowrap;*/
    background:white; /**/
    white-space: normal;
}


/*
$color1: #f4f4f4;
$color2: #3197EE;

.recordRadio {
  margin: 0.5rem;
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    + .radio-label {
      &:before {
        content: '';
        background: red;
        border-radius: 100%;
        border: 1px solid darken(#f4f4f4;, 25%);
        display: inline-block;
        width: 10.4em;
        height: 3.4em;
        position: relative;
        top: -0.2em;
        margin-right: 1em; 
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
      }
    }
    &:checked {
      + .radio-label {
        &:before {
            background-color: green;
          box-shadow: inset 0 0 0 4px $color1;
        }
      }
    }
    &:focus {
      + .radio-label {
        &:before {
          outline: none;
          border-color: $color2;
        }
      }
    }
    &:disabled {
      + .radio-label {
        &:before {
          box-shadow: inset 0 0 0 4px $color1;
          border-color: darken($color1, 25%);
          background: darken($color1, 25%);
        }
      }
    }
    + .recordArt-1SR {
      &:empty {
        &:before {
          margin-right: 0;
        }
      }
    }
  }
}
*/


.recordRadioTerm{
}
.recordRadioTerm:Hover{
    text-decoration:underline;
    cursor:pointer;
}
    
.recordButtonCont{
    position:relative;
    width:calc(100%-20px);
    height:40px;
    padding:10px 20px 10px 5px;
    background-color:gold;
}
.recordButton{
    float:right;
    right:100px;
    align:right;
    width:100px;
    height:40px;
    font-family: Abel;
    font-size:20px;
    line-height:40px;
    text-align:center;
    color:white;    
    cursor:pointer;
    border-radius:30px;
    background-color: #132844;
}
.recordButton:hover{
    background-color:#225397;
}




.recordGdprHeading{
    font-familie:Abel;
    font-size:24px;
    color: #132844;
}
.recordGdprTxt{
    font-familie:Abel;
    font-size:16px;
    color: #132844;
}






/*
.art-1-area{
      font-family:Arial, Helvetica, sans-serif;
      font-size: 18px;
      white-space: normal;
      overflow: visible;
      }
      .art-1-areaE{
      font-size: 18px;      
      }
      .art-1-submitE{
      border: solid 1px #0088cc;
      padding: 20px 0;
      text-align:center;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      }
      .art-1-submitE:hover{
      cursor: pointer;
      }
      .art-1-linkE{
      text-decoration:none;
      font-size: 12px;      
      color:#006699;
      white-space: nowrap;
      overflow: hidden;
      }


      .error{
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
      color:red;
      display:none;
      }
      .errorD{
      display:inline;
      }

*/
      /*
      .button{
      display:inline-block;
      text-align:center;
      font-size: 20px;
      width:115px;
      }
      .buttonEdit{ 
      position:absolute;
      bottom: 10px;
      right:200px;
      z-index:1;
      }      
      .buttonSave{ 
      visibility: hidden; 
      position:absolute;
      bottom: 10px;
      right:50px;
      z-index:1;
      }      
      .buttonDelete{ 
      visibility: hidden; 
      position:absolute;
      bottom: 10px;
      left:20px;
      z-index:1;
      }      
      .button:hover{
      cursor: pointer;
      }


      .warningWindow{
      background-color:white;
      width:400px;
      height:500px;
      display:none;
      position:fixed;
      left:20px;
      top;40p;
      white-space: normal;
      overflow: auto;
      padding:20px;
      z-index:5;
      }
      .warningButton{
      margin:auto;
      width:250px;
      }
*/




 .frontpageSlidesCont{
      display: block;
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      opacity: 0;
      transition: opacity 1000ms;
      /*border:1px solid red;*/
      }

.frontpageSlidesDotCont{
     position:absolute;
     width:100%;
     height:40px;
     bottom: 0px;
     text-align:center;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
     opacity: 1.0;
     overflow:hidden;
 }
 .frontpageSlidesDotBorder{
     display: inline-block;
     border-radius: 20px;
     border: 10px solid rgba(255,0,0,0);
     cursor:pointer;
 }
 .frontpageSlidesDot{
     padding:5px;
     border-radius: 5px;
     background-color:white;
     cursor:pointer;
 }





/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 2001px) {
	  .forsideMainPadding{
	      /*background-color:yellow;*/
	      padding: 0 20% 0 20%;
	  }

      }

/*-------------------PC 1600 + --------------------------------*/     
      @media  (max-width: 2000px) and (min-width: 1601px) {
	  .forsideMainPadding{
	      /*background-color:orange;*/
	      padding: 0 13% 0 13%;
	  }

      }


      /*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
	  .forsideMainPadding{
	      /*background-color:red;*/
	      padding: 0 7% 0 7%;
	  }

      }


      /*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
	  .forsideMainPadding{
	      /*background-color:green;*/
	      padding: 0 1% 0 1%;
	  }


      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
	  .forsideMainPadding{
	      /*background-color:brown;*/
	      padding: 0 0% 0 0%;
	  }

      }

      
/*-------------------PC liten --------------------------------*/            
@media only screen  and ( min-width: 950px ) , (-webkit-device-pixel-ratio: 1) {
    .forsideContBildeHeading{
	grid-column:span 4;
    }
    .forsideContBildeLandscape{
	grid-column: span 2;
    }	  
    .forsideContBildeLandscapeBig{
	grid-column: span 4;
    }
    .forsideContBildePortrait{
	grid-column:span 2;
    }
    .forsideContBildePortraitBig{
	grid-column:span 2;
    }
}
 /*-------------------PC --------------------------------*/      
@media only screen and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

   .frontpageScrollButton{
    width: 50px;
    heigh: 50px;
    font-size: 30px;
    line-height:50px;
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
   }
}

@media only screen and (max-device-width: 950px) and (-webkit-min-device-pixel-ratio: 2) { 
    .forsideMainPadding{
	/*background-color:brown;*/
	padding: 0 0 0 0;
    }
    .forsideContBildeHeading{
	grid-column:span 4;
    }
    .forsideContBildeLandscape{
	grid-column:span 4;
    }	  
    .forsideContBildeLandscapeBig{
	grid-column:span 4;
    }
    .forsideContBildePortrait{
	grid-column:span 4;
    }
    .forsideContBildePortraitBig{
	grid-column:span 4;
    }
   .frontpageScrollButton{
    width: 40px;
    heigh: 40px;
    font-size: 24px;
    line-height:40px;
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
   }
}

.forsideMainPadding{
}
.forsideMain{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width:100%;
    grid-column-gap:0px;
    grid-row-gap:0px;
}

.forsideContBildeHeading{
}	   
.forsideContBildeLandscape{
}
.forsideContBildeLandscapeBig{
}
.forsideContBildePortrait{
}
.forsideContBildePortraitBig{
}

.forsideBilde{
    width:100%; 
    object-fit: contain;
}

.frontpageScrollButton{
    position:absolute;
    top: 40%;
    background-color:white;
    color:black;
    opacity: 0.8;
    /*font-family:oswald;*/
    font-weight:700;
    text-align:center;
    z-index:1;
    cursor:pointer;
}
.frontpageScrollButtonRight{
    right: 1px;
}
.frontpageScrollButtonLeft{
    left: 1px;
    transform:rotate(180deg);
}
.frontpageScrollButton:hover{
   /* color:white;
    background-color:green;*/
}



.frontpageImageMapOverlayer{
   /* transform: scale(0,0);
    transition: 1s;*/
}


/* Admin */
/*
body{
    \*overflow:hidden;*\
    width:100%;
    background-color:green;
}
*/



@media only screen  and ( min-width: 2000px ) {
   .forsideContPx-4-50{
       grid-column:span 4;
       height:75px;
   }	   
   .forsideContPx-4-100{
       grid-column:span 4;
       height:150px;
   }	   
   .forsideContPx-4-150{
       grid-column:span 4;
       height:225px;
   }	   
   .forsideContPx-4-200{
       grid-column:span 4;
       height:300px;
   }	   
   .forsideContPx-4-250{
       grid-column:span 4;
       height:375px;
   }	   
   .forsideContPx-4-300{
       grid-column:span 4;
       height:450px;
   }	   
   .forsideContPx-4-350{
       grid-column:span 4;
       height:510px;
   }	   
   .forsideContPx-4-400{
       grid-column:span 4;
       height:600px;
   }	   
   .forsideContPx-4-500{
       grid-column:span 4;
       height:750px;
   }	   
   .forsideContPx-4-600{
       grid-column:span 4;
       height:900px;
   }	   
   .forsideContPx-4-700{
       grid-column:span 4;
       height:1000px;
   }	   
   .forsideContPx-4-800{
       grid-column:span 4;
       height:1200px;
   }	   
    
}
@media only screen  and ( min-width: 1250px ) and  (max-width: 2000px) {
   .forsideContPx-4-50{
       grid-column:span 4;
       height:50px;
   }	   
   .forsideContPx-4-100{
       grid-column:span 4;
       height:100px;
   }	   
   .forsideContPx-4-150{
       grid-column:span 4;
       height:150px;
   }	   
   .forsideContPx-4-200{
       grid-column:span 4;
       height:200px;
   }	   
   .forsideContPx-4-250{
       grid-column:span 4;
       height:250px;
   }	   
   .forsideContPx-4-300{
       grid-column:span 4;
       height:300px;
   }	   
   .forsideContPx-4-350{
       grid-column:span 4;
       height:350px;
   }	   
   .forsideContPx-4-400{
       grid-column:span 4;
       height:400px;
   }	   
   .forsideContPx-4-500{
       grid-column:span 4;
       height:500px;
   }	   
   .forsideContPx-4-600{
       grid-column:span 4;
       height:600px;
   }	   
   .forsideContPx-4-700{
       grid-column:span 4;
       height:700px;
   }	   
   .forsideContPx-4-800{
       grid-column:span 4;
       height:800px;
   }	       
}
@media only screen  and ( min-width: 950px ) and  (max-width: 1250px)  {
   .forsideContPx-4-50{
       grid-column:span 4;
       height:40px;
   }	   
   .forsideContPx-4-100{
       grid-column:span 4;
       height:75px;
   }	   
   .forsideContPx-4-150{
       grid-column:span 4;
       height:100px;
   }	   
   .forsideContPx-4-200{
       grid-column:span 4;
       height:130px;
   }	   
   .forsideContPx-4-250{
       grid-column:span 4;
       height:160px;
   }	   
   .forsideContPx-4-300{
       grid-column:span 4;
       height:200px;
   }	   
   .forsideContPx-4-350{
       grid-column:span 4;
       height:230px;
   }	   
   .forsideContPx-4-400{
       grid-column:span 4;
       height:270px;
   }	   
   .forsideContPx-4-500{
       grid-column:span 4;
       height:330px;
   }	   
   .forsideContPx-4-600{
       grid-column:span 4;
       height:400px;
   }	   
   .forsideContPx-4-700{
       grid-column:span 4;
       height:460px;
   }	   
   .forsideContPx-4-800{
       grid-column:span 4;
       height:540px;
   }	   
}
@media only screen  and ( min-width: 700px ) and  (max-width: 950px)  {
  .forsideContPx-4-50{
       grid-column:span 4;
       height:25px;
   }	   
   .forsideContPx-4-100{
       grid-column:span 4;
       height:50px;
   }	   
   .forsideContPx-4-150{
       grid-column:span 4;
       height:75px;
   }	   
   .forsideContPx-4-200{
       grid-column:span 4;
       height:100px;
   }	   
   .forsideContPx-4-250{
       grid-column:span 4;
       height:125px;
   }	   
   .forsideContPx-4-300{
       grid-column:span 4;
       height:150px;
   }	   
   .forsideContPx-4-350{
       grid-column:span 4;
       height:175px;
   }	   
   .forsideContPx-4-400{
       grid-column:span 4;
       height:200px;
   }	   
   .forsideContPx-4-500{
       grid-column:span 4;
       height:225px;
   }	   
   .forsideContPx-4-600{
       grid-column:span 4;
       height:300px;
   }	   
   .forsideContPx-4-700{
       grid-column:span 4;
       height:350px;
   }	   
   .forsideContPx-4-800{
       grid-column:span 4;
       height:400px;
   }	   
}

@media only screen  and ( max-width: 700px )  {
  .forsideContPx-4-50{
       grid-column:span 4;
       height:20px;
   }	   
   .forsideContPx-4-100{
       grid-column:span 4;
       height:35px;
   }	   
   .forsideContPx-4-150{
       grid-column:span 4;
       height:50px;
   }	   
   .forsideContPx-4-200{
       grid-column:span 4;
       height:65px;
   }	   
   .forsideContPx-4-250{
       grid-column:span 4;
       height:80px;
   }	   
   .forsideContPx-4-300{
       grid-column:span 4;
       height:100px;
   }	   
   .forsideContPx-4-350{
       grid-column:span 4;
       height:120px;
   }	   
   .forsideContPx-4-400{
       grid-column:span 4;
       height:140px;
   }	   
   .forsideContPx-4-500{
       grid-column:span 4;
       height:170px;
   }	   
   .forsideContPx-4-600{
       grid-column:span 4;
       height:200px;
   }	   
   .forsideContPx-4-700{
       grid-column:span 4;
       height:240px;
   }	   
   .forsideContPx-4-800{
       grid-column:span 4;
       height:270px;
   }	   
}



@media only screen  and ( min-width: 950px )  {
    .forsideContHeading-1{
	grid-column:span 1;
    }
    .forsideContHeading-2{
	grid-column:span 2;
    }
   .forsideContHeading-4{
	grid-column:span 4;
    }
   .forsideContProd-1{
       grid-column:span 1;
       padding-top:148%;
   }
   .forsideContProd-2{
       grid-column:span 2;
       padding-top:148%;
   }
   
   .forsideContBilde-1-10{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-20{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-30{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-40{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-50{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-60{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-70{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-80{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-90{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-100{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-150{
       grid-column:span 1;
   }	   
   .forsideContBilde-1-200{
       grid-column:span 1;
   }	   

   .forsideContBilde-2-10{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-20{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-30{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-40{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-50{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-60{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-70{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-80{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-90{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-100{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-150{
       grid-column:span 2;
   }	   
   .forsideContBilde-2-200{
       grid-column:span 2;
   }	   


   .forsideContBilde-4-10{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-20{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-25{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-30{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-40{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-50{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-60{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-70{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-80{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-90{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-100{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-150{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-200{
       grid-column:span 4;
   }	   



    .forsideContBildeHeading{
	grid-column:span 4;
    }
    .forsideContBildeLandscape{
	grid-column: span 2;
    }	  
    .forsideContBildeLandscapeBig{
	grid-column: span 4;
    }
   .forsideContBildePortrait{
       grid-column:span 2;
   }
   .forsideContBildePortraitBig{
	grid-column:span 2;
   }

   
   .forsideContBlock-2-50{
       grid-column:span 2;
       width:100%;
       padding-top:50%;
   }	   
   .forsideContBlock-2-74{
       grid-column:span 2;
       width:100%;
       padding-top:74%;
   }
   .forsideContBlock-4-25{
       grid-column:span 4;
       width:100%;
       padding-top:25%;
   }	   
   .forsideContBlock-4-37{
       grid-column:span 4;
       width:100%;
       padding-top:37%;
   }
   
}




@media  (max-width: 950px) , ( max-device-width: 950px ) and ( -webkit-min-device-pixel-ratio: 2 )   {   
    /**/
    .forsideContHeading-1{
	grid-column:span 2;
    }
    .forsideContHeading-2{
	grid-column:span 4;
    }
    .forsideContHeading-4{
	grid-column:span 4;
    }
   .forsideContProd-1{
       grid-column:span 2;
       padding-top:158%;
   }
   .forsideContProd-2{
       grid-column:span 4;
       padding-top:158%;
   }


   .forsideContBilde-1-10{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-20{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-25{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-30{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-40{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-50{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-60{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-70{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-80{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-90{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-100{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-150{
       grid-column:span 2;
   }	   
   .forsideContBilde-1-200{
       grid-column:span 2;
   }	   

   .forsideContBilde-2-10{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-20{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-30{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-40{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-50{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-60{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-70{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-80{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-90{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-100{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-150{
       grid-column:span 4;
   }	   
   .forsideContBilde-2-200{
       grid-column:span 4;
   }	   


   .forsideContBilde-4-10{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-20{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-25{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-30{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-40{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-50{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-60{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-70{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-80{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-90{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-100{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-150{
       grid-column:span 4;
   }	   
   .forsideContBilde-4-200{
       grid-column:span 4;
   }	   


    .forsideContBildeHeading{
	grid-column:span 4;
    }
    .forsideContBildeLandscape{
	grid-column:span 4;
    }	  
    .forsideContBildeLandscapeBig{
	grid-column:span 4;
    }
    .forsideContBildePortrait{
	grid-column:span 4;
    }
   .forsideContBildePortraitBig{
	grid-column:span 4;
    }

   .forsideContBlock-2-50{
       grid-column:span 4;
       width:100%;
       padding-top:50%;
   }	   
   .forsideContBlock-2-74{
       grid-column:span 4;
       width:100%;
       padding-top:74%;
   }	   
   .forsideContBlock-4-25{
       grid-column:span 4;
       width:100%;
       padding-top:51%;
   }	   
   .forsideContBlock-4-37{
       grid-column:span 4;
       width:100%;
       padding-top:76%;
   }	   

}



/************************* FELLES ALLE ********************************/

.forsideMain{
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    width:100%;
    grid-column-gap:0px;
    grid-row-gap:0px;
}

.forsideContHeading-1{
    width:100%;
    min-height:10px;
}
.forsideContHeading-2{
    width:100%;
    min-height:10px;
}
.forsideContHeading-4{
    width:100%;
    min-height:10px;
}

.forsideContProd-1{
    width:96%;
    margin:2%;
}
.forsideContProd-2{
    width:96%;
    margin:2%;
}
.forsideContPx-4-50{
    width:100%;
}	   
.forsideContPx-4-100{
    width:100%;
}	   
.forsideContPx-4-150{
    width:100%;
}	   
.forsideContPx-4-200{
    width:100%;
}	   
.forsideContPx-4-250{
    width:100%;
}	   
.forsideContPx-4-300{
    width:100%;
}	   
.forsideContPx-4-350{
    width:100%;
}	   
.forsideContPx-4-400{
    width:100%;
}	   
.forsideContPx-4-500{
    width:100%;
}	   
.forsideContPx-4-600{
    width:100%;
}	   
.forsideContPx-4-700{
    width:100%;
}	   
.forsideContPx-4-800{
    width:100%;
}	   



.forsideContBilde-1-10{
    width:100%;
    padding-top:10%;
}	   
.forsideContBilde-1-20{
    width:100%;
    padding-top:20%;
}	   
.forsideContBilde-1-30{
    width:100%;
    padding-top:30%;
}	   
.forsideContBilde-1-40{
    width:100%;
    padding-top:40%;
}	   
.forsideContBilde-1-50{
    width:100%;
    padding-top:50%;
}	   
.forsideContBilde-1-60{
    width:100%;
    padding-top:60%;
}	   
.forsideContBilde-1-70{
    width:100%;
    padding-top:70%;
}	   
.forsideContBilde-1-80{
    width:100%;
    padding-top:80%;
}	   
.forsideContBilde-1-90{
    width:100%;
    padding-top:90%;
}	   
.forsideContBilde-1-100{
    width:100%;
    padding-top:100%;
}	   
.forsideContBilde-1-150{
    width:100%;
    padding-top:150%;
}	   
.forsideContBilde-1-200{
    width:100%;
    padding-top:200%;
}	   


.forsideContBilde-2-10{
    width:100%;
    padding-top:10%;
}	   
.forsideContBilde-2-20{
    width:100%;
    padding-top:20%;
}	   
.forsideContBilde-2-30{
    width:100%;
    padding-top:30%;
}	   
.forsideContBilde-2-40{
    width:100%;
    padding-top:40%;
}	   
.forsideContBilde-2-50{
    width:100%;
    padding-top:50%;
}	   
.forsideContBilde-2-60{
    width:100%;
    padding-top:60%;
}	   
.forsideContBilde-2-70{
    width:100%;
    padding-top:70%;
}	   
.forsideContBilde-2-80{
    width:100%;
    padding-top:80%;
}	   
.forsideContBilde-2-90{
    width:100%;
    padding-top:90%;
}	   
.forsideContBilde-2-100{
    width:100%;
    padding-top:100%;
}	   
.forsideContBilde-2-150{
    width:100%;
    padding-top:150%;
}	   
.forsideContBilde-2-200{
    width:100%;
    padding-top:200%;
}	   



.forsideContBilde-4-10{
    width:100%;
    padding-top:10%;
}	   
.forsideContBilde-4-20{
    width:100%;
    padding-top:20%;
}	   
.forsideContBilde-4-25{
    width:100%;
    padding-top:25%;
}	   
.forsideContBilde-4-30{
    width:100%;
    padding-top:30%;
}	   
.forsideContBilde-4-40{
    width:100%;
    padding-top:40%;
}	   
.forsideContBilde-4-50{
    width:100%;
    padding-top:50%;
}	   
.forsideContBilde-4-60{
    width:100%;
    padding-top:60%;
}	   
.forsideContBilde-4-70{
    width:100%;
    padding-top:70%;
}	   
.forsideContBilde-4-80{
    width:100%;
    padding-top:80%;
}	   
.forsideContBilde-4-90{
    width:100%;
    padding-top:90%;
}	   
.forsideContBilde-4-100{
    width:100%;
    padding-top:100%;
}	   
.forsideContBilde-4-150{
    width:100%;
    padding-top:150%;
}	   
.forsideContBilde-4-200{
    width:100%;
    padding-top:200%;
}	   




.forsideContBildeHeading{
    width:100%;
    padding-top:10%;
}	   
.forsideContBildeLandscape{
    width:100%;
    padding-top:50%;
}
.forsideContBildeLandscapeBig{
    width:100%;
    padding-top:50%;
}
.forsideContBildePortraitBig{
    width:100%;
    padding-top:100%;
}
.forsideContBildePortrait{
    width:100%;
    padding-top:100%;
}


.forsideContBlock-2-50{
}
.forsideContBlock-2-74{
}
.forsideContBlock-4-25{
}
.forsideContBlock-4-37{
}



.forsideBilde{
    width:100%; 
    object-fit: contain;
}
.frontpagePic{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%; 
    object-fit: contain;
}
.frontpagePicCover{
    width:100%;
    height:100%; 
    object-fit: Cover;
}
.frontpagePicNone{
    width:100%;
    height:100%; 
    object-fit: none;
}



.frontpageChatCont{
    font-family:Abel;
    width:80%;
    padding:15px 20px 15px 20px;
    border-radius:20px;
}
.frontpageChatContC{
    margin:auto;
}
.frontpageChatContR{
    margin-left: auto; 
    margin-right: 0;
}
.frontpageChatContL{
    margin-left: 0; 
    margin-right:auto;
}


/************************** Admin **************************/

body{
    \*overflow:hidden;*\
    width:100%;
    background-color:white;
}
.frontpageMain{
    display:inline-block;
    position:relative;
    top:30px;
    width:50%;
}
.frontpageSlide{
    display:inline-block;
    position:fixed;
    top:30px;
    right:0px;
    height:calc(100vh - 30px);
    width:50%;
    background-color:yellow;
    z-index:1;
    overflow:scroll;
}
.frontpageElMove{
    display:none;
    position:absolute;
    background-color:orange;
    z-index:10;
}



.frontpageSlideCtrl{
    postion:absolute;
    top:0px;
    width:100%;
    height:220px;
    background-color:lightgrey;
}


.frontpageCtrlCopy{
    position:absolute;
    top:5px;
    right:10px;
    width:100px;
    height:40px;
    font-family:Abel;
    font-size:20px;
    text-align:center;
    line-height:40px;
    color: green;
    background-color:white;
    border:1px solid green;
    border-radius: 10px;
    cursor:pointer;
}
.frontpageCtrlCopy:hover{
    color: white;
    background-color:green;
}
.frontpageCtrlPublish{
    right:200px;
}
.frontpageCtrlDelete{
    top:60px;
}

.frontpageCtrlHeadTxt{
    position:absolute;
    left: 10px;
    width:100px;
    height:30px;
    font-family:Abel;
    font-size:20px;
}
.frontpageCtrlHeadIdKey{
    top:10px;
    left: 10px;
}
.frontpageCtrlHeadIdValue{
    top:10px;
    left: 110px;
}
.frontpageCtrlHeadNameKey{
    top:45px;
    left: 10px;
}
.frontpageCtrlHeadNameValue{
    position:absolute;
    top:42px;
    left: 110px;
    width:220px;
    height:30px;
    font-family:Abel;
    font-size:20px;
    cursor:pointer;
}
.frontpageCtrlHeadColorKey{
    top:80px;
    left: 10px;
}
.frontpageCtrlHeadColorValue{
    position:absolute;
    top:78px;
    left: 110px;
    width:220px;
    height:30px;
    font-family:Abel;
    font-size:20px;
    cursor:pointer;
}
.frontpageCtrlHeadActiveFromKey{
    top:120px;
    left: 10px;
}
.frontpageCtrlHeadActiveFromValue{
    position:absolute;
    top:118px;
    left: 110px;
    width:220px;
    height:30px;
    font-family:Abel;
    font-size:20px;
    cursor:pointer;
}


.frontpageCtrlBody{
    position:absolute;
    top:160px;
    width:60px;
    height:60px;
    background-color:grey;
    border-radius: 10px 10px 0px 0px;
    font-family:Abel;
    font-size:16px;
    text-align:center;
    line-height:60px;
    cursor:pointer;
}

.frontpageCtrlPic{
    left: 10px;
}
.frontpageCtrlTxt{
    left: 80px;
}
.frontpageCtrlSlides{
    left: 150px;
}
.frontpageCtrlMov{
    left: 220px;
}
.frontpageCtrlProd{
    left: 290px;
}
.frontpageCtrlSpace{
    left: 360px;
}
.frontpageCtrlPara{
    left: 430px;
}
.frontpageCtrlChat{
    left: 500px;
}
.frontpageCtrlBlock{
    left: 570px;
}

.frontpageSlideElCont{
    position:absolute;
    top:220px;
    width:100%;
    height:calc(100vh - 250px); 
    background-color:pink;
}
.frontpageSlideElLine{    
    height:40px;    
    width:80%;
    padding: 0px 10% 0px 10px;
    background-color:cornblue;
}
.frontpageSlideElKey{
    display:inline-block;
    height:30px;    
    width:20%;
    font-family:Abel;
    font-size: 20px;
    line-height: 30px;
    
}
.frontpageSlideElValueCont{
    display:inline-block;
    height:30px;
    width:80%;
    font-family:Abel;
    font-size: 20px;
    line-height: 30px;
}
.frontpageSlideElValue{
    width:100%;
    font-family:Abel;
    font-size: 20px;
    line-height: 30px;
}
.frontpageSlideElValueCol{
    width:20%;
    height:30px;
    font-family:Abel;
    font-size: 20px;
    line-height: 30px;
}
.frontpageSlideElValueScroll{
    display:inline-block;
    position:relative;
    width: 180px;
}
.frontpageSlideElValueScroll label{
    display:inline-block;
    margin:5px;
    width: 150px;
    text-align:center;
    color:green;
    background-color:white;
    border: 1px solid green;
    border-radius: 10px;
    cursor:pointer;
}
.frontpageSlideElValueScroll input[type="radio"]:checked + label {
    color:white;
    background-color:green;
}
.frontpageSlideElValueScroll input[type="radio"]:focus + label {
    border: 1px dashed #1b4786;;
}
.frontpageSlideElValueScroll input[type="radio"] {
    position:absolute;
    top:4px;
    width:0px;
    opacity: 0;
}
.frontpageSlideElValueScroll label:hover{
    color:white;
    background-color:green;
}

.frontpageSlideElToolButton{
    width:200px;
    height:30px;
    font-family:Abel;
    font-size: 20px;
    line-height: 30px;
    text-align:center;
    white-space:nowrap;
    border-radius:5px;
    border: 2px solid green;
    color:green;
    background-color:white;
    cursor:pointer;
}
.frontpageSlideElToolButton:hover{
    color:white;
    background-color:green;    
}
.frontpageSlideSave{
    position: fixed;
    bottom: 0px;
    right: 0px;
    width:50%;
    height:60px;
    text-align:center;
    line-height:60px;
    font-family:oswald;
    font-size:30px;
    color:green;
    background-color:white;
    cursor:pointer;
    z-index:9;
    box-shadow: -5px -5px 20px 5px #888888;
}
.frontpageSlideSave:hover{
    color:white;
    background-color:green;    
}

.brikke{
    position:block;    
    border:2px solid black;
    font-size:30px;
    color:black;
}
.frontpageEl{
    position:relative;
    /*width:100%;
    height:100%;
    border:4 solid black;*/
    cursor: pointer;
}

.frontpageElTxt{
    width:100%;
    margin: auto;
    font-family:Oswald;
    text-align:center;
}
.frontpageElSpace{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    margin: 0;
    font-family:Oswald;
    text-align:center;
}
.frontpageElBlock{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin:0;
    width:100%;
    text-align:center;
    font-family:Oswald;
    font-size:20;
    color:white;
}
.frontpageElBlockMember{
    height:100%;
    outline: 4px solid white;
    outline-offset: -4px;
}

    
 
/*   margin:auto;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
*/


.frontpageElMenu{
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%; /*58px;*/
    background:lightgrey;
    opacity:0.3;
    z-index:3;
}
.frontpageElMenuButton{
    position: absolute;
    width:46px;
    height:46px;
    text-align:center;
    line-height:40px;
    font-family:oswald;
    font-size:60px;
    border: 2px solid black;
    color:black;
    background-color:white;
    cursor:pointer;
}
.frontpageElMenuDel{
    top: 3px;
    left: 3px;
    font-size:46px;
    color:red;
    cursor:pointer;
}
.frontpageElMenuDel:hover{
    background-color:red;
    color:white;
}
.frontpageElMenuMove{
    /*top: calc(50% - 20px);*/
    top: 3px;
    left: 3px; /*calc(50% - 20px);*/
    color:green;
    cursor:move;
}
.frontpageElMenuMove:hover{
    background-color:green;
    color:white;
}

.frontpageElMenuAdd{
    top: 3px;
    right: 3px;
    cursor:copy;
    color:green;
}
.frontpageElMenuAdd:hover{
    background-color:green;
    color:white;
}



.frontpageSearchHeading{
    margin:40px 40px 40px 450px;
    font-family: Oswald;
    font-size: 24px;
    color:green;
}
.frontpageSearchTable{
    margin:0px 50px 50px 100px;

}
.frontpageSearchTr{
    cursor:pointer
}
.frontpageSearchTd{    
    width:200px;
    padding:5px;
    font-family: Abel;
    font-size:16px;
    text-align:right;
    border:1 solid white;
    color: white;
    background-color:green;
}
.frontpageSearchTdPreview{
    background-color:#225397;
}

/*---------- topp bar --------------*/
.frontpageCat{
    position:fixed;
    width:100%;
    height:30px;
    top: 0px;
    background-color:#225397;
    z-index:10;
}

/*---------- meny 1 --------------*/
.frontpageDropdown{
  position:absolute;
  left:120px;
  top:0px;
  cursor:pointer;
  z-index:10000;
}
.frontpageDropdownFrontpage{
  left:40px;
}
.frontpageDropdownButton{
  color: white;
  height: 30px;
  line-height:30px;
  font-family:Abel;
  font-size: 16px;
  border: none;
  padding: 0px 20px; 
  cursor: pointer;
  background-color: #225397;
}
.frontpageDropdownButton:hover {
  background-color: #001e3a;
}
.frontpageDropdownCont{
  display: none;
  position: absolute;
  color:white;
  background-color: #225397; /*#f9f9f9;*/
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
  border-radius: 0px 0px 10px 10px;
}
.frontpageDropdownCont a{
  color: white;
  font-family:Abel;
  font-size: 16px;
  font-weight:700;
  padding: 5px 20px;
  text-align:left;
  text-decoration: none;
  display: block;
}
.frontpageDropdownCont a:hover {
  background-color: #001e3a;
}
.frontpageDropdown:hover .frontpageDropdownCont {
  display: block;
}
.frontpageDropdown:hover .frontpageDropdownButton {
  background-color: #001e3a;
}

/*---------- meny 2 --------------*/
.frontpageDropdownFrontpage2{
  left:200px;
}

/*---------- meny 3 --------------*/
.frontpageDropdownFrontpage3{
  left:360px;
}

.frontpageAdminBox{
    display:none;
    position:fixed;
    height: 0px;
    width: 0px;
}
.frontpageAdminBoxCont{
    position:fixed;
    top:50px;
    left: 300px;
    width: 400px;
    height: 200px;
    border: 10px solid #225397;
    border-radius:20px;
    padding:10px;
    font-family: Abel;
    font-size: 16px;
    text-align: center;
    background-color:white;
    z-index:100000;
}
.facemapAdminBoxContClose{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:-8px;
    right:-8px;
    width:30px;
    height:30px;
    border: 2px solid #225397;
    border-radius:30px;
    background-color:white;
    color: red;
    cursor:pointer;    
}
.facemapAdminBoxContClose:hover{
    color: white;
    background-color:red;
    border: 2px solid red;
}
.facemapAdminBoxContHead{
    position:absolute;
    top:40px;
    width: 400px;
    font-size: 24px;
    text-align:center;
}
.facemapAdminBoxButtonCont{
    position:absolute;
    display:flex;
    flow-direction: row;
    justify-content:center;
    top: 100px;
    width:400px;
    height:100px;

}
.frontpageAdminBoxButton{
    width: 250;
    height: 50px;
    line-height:50px;
    font-size: 24px;
    text-align:center;
    color:#225397;
    background-color:#bfb;
    border: 2px solid #225397;
    border-radius:20px;
    cursor:pointer;
}
.frontpageAdminBoxButton:hover{
    color:white;
    background-color:#4c4;
}
.frontpageAdminBoxContResult{
    font-size: 24px;
}
    




/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr 1fr;}*/

	  .filterSlider{
	      top:90px;
	      height:calc(100vh - 90px);    /*100%*/;
	  }
	  .filterSymbolButton{
	      top:15px;
	      right:150px;
	  }
      }

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {
      /*.bucket{grid-template-columns: 1fr 1fr 1fr;}*/

	  .filterSlider{
	      top:90px;
	      height:calc(100vh - 90px);    /*100%*/;
	  }

	  .filterSymbolButton{
	      top:15px;
	      right:150px;
	  }

   }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

	  .filterSlider{
	      top:110px;
	      height:calc(100vh - 110px);    /*100%*/;
	  }
	  .filterSymbolButton{
	      top:60px;
	      right:150px;
	  }

      }

      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/
	  .filterSlider{
	      top:110px;
	      height:calc(100vh - 110px);    /*100%*/;
	  }
	  .filterSymbolButton{
	      top:60px;
	      right:70px;
	  }


      }


 /*------------------- Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {

     .filterSymbolButton:hover .filterSymbolUnder{
	 background-color:white;
     }

	  
      }



 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 329px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{ grid-template-columns: 1fr;}*/
     
     }

 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 330px) 
            and (max-device-width: 749px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/
     
     }


/* ----------- Pad  ----------- */
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     /*.bucket{ grid-template-columns: 1fr 1fr 1fr;}*/

     }

     
/* ----------- Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

	 .filterSlider{
	     top:100px;	 
	     height:calc(100vh - 100px);    /*100%*/;
	 }

	 .filterSymbolButton{
	      top:60px;
	      right:70px;
	  }

     }
 

/* ----------- Felles  ----------- */



     .filterCurtain{
	 display:none;
	 position:fixed;
	 top:0px;
	 left:0px;
	 width:100%;
	 height:100%;
	 background-color:rgba(19, 40, 68, 0.7);/*background-color: rgba(0, 0, 0, 0.2);*/
	 z-index:9000; 
     }



     .filterSlider{
	 display:block;
	 position:absolute;
	 left:0px;
	 width:0px;
	 overflow: scroll;
	 background-color: white;// rgba(255, 0, 0, 0.8);
	 color: #132844;
	 font-family:Abel;
	 z-index:10001;
	 transition: width 1000ms;
	 background-color: white;
	 z-index:101001; 
	 /*background-color: yellow; yellow;*/
     }


     .filterTop{
	 position:relative;
	 width:calc(100%-40px);
	 height:40px;
	 font-family:Oswald;
	 font-size:18px;
	 font-weight:700px;
	 line-height:40px;
	 padding: 10px 20px 10px 20px;
     }
     .filterTopTxt{
	 position:absolute;
	 width: 130px;
	 height:20px;
	 top:28px;
	 left:20px;
	 font-family:Oswald;
	 font-size:10px;
	 font-weight:400px;
     }

     .filterTopFilterCont{
	 width:calc(100%-40);
	 font-family:Abel;
	 font-size:16px;
	 padding: 10px 20px 10px 20px;
	 border-bottom: solid 2px #225397;
     }

     
     .filterTopButtonClear{
	 position:absolute;
	 width: 80px;
	 height:30px;
	 top:15px;
	 right:70px;    
	 line-height:30px;
	 font-family:Abel;
	 font-size: 16px;
	 text-align:center;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 with-space:nowrap;
	 color: white;
	 background-color: #225397;
	 border: 1px solid #225397; 
	 border-radius: 15px;
	 cursor:pointer;
     }
     .filterTopButtonClear:hover{
	 background-color: #132844;
	 border: 1px solid #132844;;
     }
     .filterTopButtonClose{
	 position:absolute;
	 width: 30px;
	 height:30px;
	 top:15px;
	 right:10px;    
	 line-height:30px;
	 font-family:Abel;
	 font-size: 24px;
	 text-align:center;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 with-space:nowrap;
	 color: white;
	 background-color: #225397; 
	 border: 1px solid #225397;
	 border-radius: 15px;
	 cursor:pointer;
     }
     .filterTopButtonClose:hover{
	 background-color: #132844;
	 border: 1px solid  #132844;
     }
     .filterHeading1{
	 width:calc(100%-40px);;
	 height:40px;
	 font-family:Oswald;
	 font-size:18px;
	 font-weight:700px;
	 line-height:40px;
	 padding: 0px 20px 0px 20px;
	 cursor:pointer;
	 /*background-color:orange;*/
     }
     .filterHeading2{
	 width:calc(100%-40px);
	 height:30px;
	 font-family:Abel;
	 font-size:16px;
	 line-height:30px;
	 padding: 0px 20px 0px 20px;
	 /*background-color:pink;*/
     }
     .filterHeadingZ{
	 width:calc(100%-40px);
	 height:30px;
	 font-family:Abel;
	 font-size:16px;
	 line-height:30px;
	 padding: 0px 20px 0px 20px;
	 /*background-color:yellow;*/
     }
     .filterValueCont{
	 width:calc(100%-40px);
	 height:29px;
	 font-family:Abel;
	 font-size:16px;
	 line-height:35px;
	 padding: 2px 20px 2px 20px;
	 /*background-color:orange;*/
     }	

     .filterButtonLabel{
	 display:inline-block;
     }
     .filterButtonLabel label{
	 cursor:pointer;
     }
     .filterButtonLabelCheck{
	 display:inline-block;
	 width:25px;
	 height:25px;
	 font-family:Abel;
	 white-space: nowrap;
	 overflow: hidden;
	 font-family:Abel;
	 color:white; /*#1b4786;*/
	 font-size:16px;
	 line-height: 25px;
	 text-align:center;
	 border: 1px solid #225397;
	 border-radius:15px;
	 cursor:pointer;
	 background-color:white;
     }

     .filterButtonLabel input[type="radio"] {
	 opacity: 0;
	 position: absolute;
	 width: 0px;
     }
     .filterButtonLabel input[type="checkbox"] {
	 opacity: 0;
	 position: absolute;
	 width: 0px;
     }
     .filterButtonLabel input[type="checkbox"]:checked + label >div {
	 background-color:#225397;
     }
     /*
     .filterButtonLabel input[type="checkbox"]:focus + label {
	 border: 1px dashed #1b4786;;
     }
     .filterButtonLabel input[type="radio"]:focus + label {
	 border: 1px dashed #1b4786;;
     }
 
     .filterButtonLabel label:hover {
	 background-color: #132844; //#dfd;
	 border: 1px dashed #1b4786;
     }
     */
      
     .filterInputText{
	 width:40%;
	 padding: 5px 15px; 5px; 15px;
	 font-family:Abel;
	 font-size:16px;
	 border-radius:15px;
	 margin: 5px 20px 5px 30px;
     }


     .filterMenyCont{
	 width:100%;
	 /*(background-color:blue;*/
     }
     .filterSecTrY{
	 width:calc(100%-30px);
	 margin: 0px 0px 0px 30px;  
	 /*background-color:red;*/
     }
     .filterBucketTrZ{
	 margin: 0px 0px 0px 30px;  
	 /*background-color:green;*/
	 
     }

     .filterSymbolButton{
	 position:absolute;
	 width:28px;
	 height:28px;
	 background-color: #001e3a;
	 cursor:pointer;
     }
     .filterSymbolUnder{
	 display:block;
	 position:absolute;
	 top:31px;
	 left:-2px;
	 background-color: #001e3a;
	 width:30px;
	 height:4px;
     }
  

     .filterFilterButton{
	 display:inline-block;
	 position:relative;
         padding: 2px 30px 2px 10px;
	 line-height:18px;
	 font-family:Abel;
	 font-size: 18px;
	 text-align:left;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 with-space:nowrap;
	 color: white;
	 background-color: #225397;
	 border-radius: 15px;
	 margin: 2px 10px 2px 10px;
	 cursor:pointer;
     }

     .filterFilterButtonDel{
	 position:absolute;
	 width:17px;
	 height:17px;
	 top:2px;
	 right:3px;
	 font-family:Abel;
	 white-space: nowrap;
	 overflow: hidden;
	 font-family:Abel;
	 color:white;
	 font-size:16px;
	 line-height: 18px;
	 text-align:center;
	 border-radius:15px;
	 cursor:pointer;
	 
     }

     .filterFilterButton:hover{
	 background-color: #132844;
     }

 /************** Filter Symbol ***************************/
     .filterSymbolCont{display:inline-block;
	 position:relative;
	 top:5px;
	 width: 21px;
	 height: 21px;
	 color:white;
     }
     .filterSymbolLineH{
	 display:flex;
	 widht:100%;
	 height:3px;
	 padding:0px 0px 0px 0px;
     }
     .filterSymbolLineL{
	 display:flex;
	 widht:100%;
	 height:1px;
	 padding:0px 0px 0px 0px;
     }
     .filterSymbolTd-long{
	 width:60%;
	 height:100%;
     } 
     .filterSymbolTd-short{
	 width:22%;
	 height:100%;
	 
     }
     .filterSymbolTd-space{
	 width:14%;
	 height:100%;
     } 
     .filterSymbolTd-stroke{
	 width:4%;
	 height:100%;
     } 
     .filterSymbolTd-medium{
	 width:41%;
	 height:100%;
     } 
     .filterSymbolTdInv{
	 background-color:white;
     }




.chatMain{
    max-width:800px;
    margin:auto;
}
.chatCont{
    position:relative;
    font-family:Abel;
    width:80%;
    padding:25px 20px 25px 20px;
    border-radius:20px;    
}
.chatContC{
    margin:auto;
    background-color:lightgrey;
}
.chatContR{
    margin-left: auto; 
    margin-right: 0;
    background-color:CornflowerBlue;
}
.chatContL{
    margin-left: 0; 
    margin-right:auto;
    background-color:PaleGreen;
}

.chatAuthor{
    display:inline-block;
    position:absolute;
    top:2px;
    left:20px;
    font-family:Abel;
    font-size:14px;    
    color:white;
}
.chatButton{
    display:inline-block;
    position:absolute;
    bottom:0px;
    font-family:Abel;
    font-size:16px;
    color:white;
    padding:2px 8px 2px 8px;
    background-color:#225397;
    border-radius:20px;
    cursor:pointer;
    z-index:1;
}
.chatButtonReply{
    right:0px;
}
.chatButtonReply:hover{
  background-color:#001e3a;  
}
.chatButtonPublish{
    left:0px;
    background-color:orange;
}
.chatButtonPublish:hover{
  background-color:#001e3a;  
}
.chatButtonDelete{
    left:45%;
    background-color:red;
}
.chatButtonDelete:hover{
  background-color:#001e3a;  
}
.chatButtonSend{
    padding:4px 12px 4px 12px;
    right:0px;
}
.chatButtonSend:hover{
  background-color:#001e3a;  
}
.chatButtonNotUser{
    background-color:grey;  
    right:0px;
}


.chatCommentEdit{
    width:100%;
    height:100px;
    border:0px;    
}
.chatCommentEdit{
    outline:0px;
}

.chatLogout{
    width: 200px;
    padding:10px 30px 10px 30px;
    margin: auto;
    font-family:Abel;
    font-size: 16px;
    text-align:center;
    color:white;
    background-color:#225397;
    border-radius: 20px;
    cursor:pointer;
}
.chatLogout:hover{
    background-color:#001e3a;
}
	    




/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
    .suggestionCont{
	font-size:20px;
	width:500px;
    }
}

/*-------------------PC 1250 + --------------------------------*/      
      @media (max-width: 1600px) and (min-width: 1250px) {

    .suggestionCont{
	width:350px;
	font-size:20px;
    }
 }

/*-------------------PC 700 + vga--------------------------------*/      
      @media (max-width: 1250px) and (min-width: 701px) {
      /*.bucket{grid-template-columns: 1fr 1fr;}*/
	.suggestionCont{
	width:calc(100% - 150px);
	font-size:20px;
    }
 }
      
/*-------------------PC liten --------------------------------*/      
      @media (max-width: 700px) {
      /*.bucket{grid-template-columns: 1fr;}*/
    .suggestionCont{
	width:90%;
	font-size:20px;
    }
   }

 

 /*-------------------Felles PC --------------------------------*/      
      @media only screen
      and ( min-device-width: 950px ) , (-webkit-device-pixel-ratio: 1) {


  }


 /* ----------- Mobile  ----------- */     
     @media only screen 
            and (min-device-width: 100px) 
            and (max-device-width: 500px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr;}*/

	 
     }

 /* ----------- Mobile, liten pad ----------- */     
     @media only screen 
            and (min-device-width: 500px) 
            and (max-device-width: 950px)
            and (-webkit-min-device-pixel-ratio: 2) {
     /*.bucket{grid-template-columns: 1fr 1fr;}*/

      
     }


/* ----------- Pad  ----------- 
     @media only screen 
            and (min-device-width: 750px)
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 
     .bucket{grid-template-columns: 1fr 1fr 1fr;}


     }
*/
     
/* ----------- Felles Mobil og Pad med  ratio 2 og mer  ----------- */
     @media only screen
            and (max-device-width: 950px) 
            and (-webkit-min-device-pixel-ratio: 2) { 

    .suggestionCont{
	width:90%; /*80%; */
	font-size:16px;
    }
	 
 }
     
/*------------------------------- FELLLES ---------------------------*/


.suggestionCont{
    display:none;
    position:absolute;
    top:35px;
    color:grey;
    background-color:white;
    border:1px solid lightgrey;
    box-shadow: 4px 4px 5px grey;
    border-radius:10px;
    z-index:1000000;
}
.suggestionPanel{
    position:relative;
    margin:20px;
    width:calc(100% - 40px);
    height:calc(100% - 40px);
    color:grey;    
}