/*-------------------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: 1fr 1fr;
	 grid-gap:10px;
	 padding:30px;
     }  

    .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{
	 font-family:Abel;
	 width:100%;
     }
     .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: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:100%;
    min-width:0;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navMenyLink {
    width:100%;
    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;
}