/*-------------------PC 1600 + --------------------------------*/     
      @media  (min-width: 1601px) {
      .navClose{
	 top:5px;
	 left:5px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }
     .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:5px;
	 left:5px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }
     .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:50px;
	 left:5px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }
     .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:50px;
	 left:5px;
	 width:50px;
	 height:50px;
	 font-size:30px;
	 line-height:50px;
     }
     .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) {


      .navGoldLine{
	  font-size: 16px;
	  line-height:16px;
      }
      .navGoldSpace{
	 height:30px;
	 /*background-color:lightgrey;*/
      }
      .navGoldUnderbar{
	  width:30px;
	  height:4px;
      }
      .navMenyTitle{
	  font-size: 24px;
	  height: 40px;
      }
      .navMenySubTitle{
	  font-size: 18px;
      }
      .navMenyLink {
	  font-size: 16px;
	  line-height: 24px;
      }      
      .navMenyTop{
	  height:54px;
	  font-family:Abel;
	  font-size:30px;
	  line-height:48px;
      }
      .navMenyTop:hover{
	  text-decoration-thickness:3px;
      }
      .navMenyTopTxt{
	  font-size:12px;
      }
      .navMenyTopTxt:hover{
	  text-decoration-thickness:3px;
      }


    
      .kundesenterCont{
	  padding:20px 30px 30px 30px;
	  font-size:16px;
      }
      .kundesenterHead{
	  font-size:24px;
      }
      .kundesenterElBody{
	  font-size:16px;
      }
     .kundesenterLi{
	  font-size:16px;
     }
      .kundesenterGrid{
	  grid-template-columns: 49% 49%;
	  grid-column-gap: 30px;
	  grid-row-gap: 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;}*/



	 
     }

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

     .navClose{
	 top:100px;
	 left:-2px;
	 width:100px;
	 height:100px;
	 font-size:60px;
	 line-height:100px;
     }
     .navSliderGold{
	 top:200px;
	 width:400px;
     }
     .navGoldLine{
	 font-size: 40px;
	 line-height:40px;
     }
     .navGoldSpace{
	 height:60px;
	 /*background-color:lightgrey;*/
     }
     .navGoldUnderbar{
	 width:60px;
	 height:8px;
     }
     .navSliderMeny{
	 top:200px;
	 left:0%;
	 height: calc(100vh - 200px);
     }     
     .navMeny{
	 grid-template-columns: 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }  
     .navMenyTitle{
	 font-size: 60px;
	 height: 100px;
     }
     .navMenySubTitle{
	 font-size: 50px;
     }
     .navMenyLink {
	 font-size: 40px;
	 line-height: 60px;
     }

      .navMenyTop{
	  height:100px;
	  font-family:Abel;
	  font-size:60px;
	  line-height:100px;
      }
      .navMenyTop:hover{
	  text-decoration-thickness:6px;
      }
      .navMenyTopTxt{
	  font-size:24px;
      }



     .kundesenterCont{
	 padding:20px 30px 30px 30px;
	 font-size:32px;
     }
     .kundesenterHead{
	 font-size:50px;
     }
     .kundesenterElBody{
	  font-size:32px;
     }
     .kundesenterLi{
	  font-size:40px;
     }
     .kundesenterGrid{
	 grid-template-columns: 98%;
	 grid-column-gap: 30px;
	 grid-row-gap: 30px;
     }

 }
     
/*------------------------------- 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;
	 background-color:orange;
     }     
     .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;
	 background-color: #001e3a; /*orange;*/
	 font-family:Abel;
     }

     .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{
	 font-family:Abel;
	 width:100%;
     }
     .navGoldSpace{
	 width:100%;
	 /*background-color:lightgrey;*/
     }
     .navGoldLine{
	 width:100%;
	 color:white;
     }
     .navGoldSpaceX{
	 display:inline-block;
	 width:5%;
     }
     .navGoldName{
	 display:inline-block;
	 max-width:95%;
	 overflow: hidden; /*tar ikke effekt for menyvalg*/
	 white-space:nowrap;
	 text-overflow:ellipsis;
	 /*background-color:orange;*/
     }
     .navGoldName:hover{
	 cursor: pointer;
     }
     .navGoldUnderbar{
	 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;       
    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{
}
.navMeny{
    width:100%;
    display:grid;	 
    background-color:white; 
    font-family:Abel;
    color:#1b4786;
}  
.navMenyTitle{
    width:100%;
    min-width:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenySubTitle{    
    width:100%;
    min-width:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenyLink {
    width:100%;
    min-width:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenyLink:hover {
    text-decoration: underline;
    cursor: pointer;
}

.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;
}
.kundesenterHead{
}
.kundesenterGrid{
    display:grid;
    width:100%;
}
.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%;
    padding:10px 5% 10px 5%;
}
.kundesenterLi{
}
.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;
}