/*
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;    
      }