/*-------------------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) {

      .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;
      }
      .bucketProdFrom{
      font-size: 10px;
      }
      .bucketProdMember{
      font-size: 16px;
      color:red;
      }
      .bucketProdPercent{
      font-size: 14px;
      }

	  
      }



 /* ----------- 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) { 

      .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;
      }
      .bucketProdFrom{
      font-size: 8px;
      }
      .bucketProdMember{
      font-size: 10px;
      }
      .bucketProdPercent{
      font-size: 12px;
      }

     }

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

     .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%;*/
        padding:5px;
        border: 2px solid white;
      }
      .bucketProd:hover{
	width:100%;
        cursor:pointer;
        border: 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;
      }
      .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 {
	  width:100%;
	  font-family:Abel;
	  font-size: 16px;
	  text-align:center;
      }
      .bucketBreadcrumbCont {	  
	  position:relative;
	  width:100%;
	  margin:0px 0px 0px 5px;
      }
      ul.bucketBreadcrumb {
	  margin:0px;
	  text-align:center;
	  padding: 5px 16px;
	  list-style: none;
      }
      ul.bucketBreadcrumb li {
	  display: inline;
	  font-family:Abel;
	  font-size: 24px;
      }
      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;
	  font-size: 24px;
      }
      .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;
      }