@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

.mainlight {font-family: 'Lato', sans-serif; font-weight:  300; }
.main {font-family: 'Lato', sans-serif; font-weight:  400; }
.mainheavy {font-family: 'Lato', sans-serif; font-weight:  700; }

    html, body {
      margin: 0;
      padding: 0;
      font-family:  'Lato';
      }
    A {text-decoration: none;}
    A:visited {   color:  black; }
    A:hover {   color:    #4d79ff; }
    .link {color:  blue; }
    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 0px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      
    }


    /* .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    } */


     

  <!-- Custom styles for the arrows -->
 
    .slider{
      position: relative;
    }
    .slick-next{
      position: absolute;
      right: 10px; z-index: 100;
      height:  90%;
      width:  10%;
      background:  url('https://plasticcards.zone/cards/img/arrow-right.png') right center no-repeat;      
      opacity: 0.4;
      border:  0px solid red;
    }

    .slick-prev{
      position: absolute;
      left: 10px; z-index: 100;
      right: 10px;
      height:  90%;
      width:  10%;
      background:  url('https://plasticcards.zone/cards/img/arrow-left.png') left center no-repeat;      
      opacity: 0.4;
    }
  

 




 
 
body { background-color: white; }

@media all and (min-width: 780px) and (max-width: 8979px) {

.title { font-size: 3.3em;    color: #6254DE;    line-height: 1em; }
.upper  { font-size: 1.2em;   color: #6254DE;     font-weight:  300;    line-height: 1.5em;  
text-transform: uppercase; letter-spacing: 3px; }
.subtitle {   font-size: 1.3em; }
.headline {   font-size: 1.20em; }
.headlineplus {   font-size: 1.6em; }
}


@media all and (min-width: 500px) and (max-width: 779px) {
    
.title { font-size: 3em;    color: #6254DE;    line-height: 1em; }
.upper  { font-size: 1.1em;   color: #6254DE;     font-weight:  300;    line-height: 1.3em;  
text-transform: uppercase; letter-spacing: 2px;  }
.subtitle {   font-size: 1.25em; }
.headline {   font-size: 1.15em; }
.headlineplus {   font-size: 1.6em; }
}

@media all and (min-width: 100px) and (max-width: 500px) {
    
.title { font-size: 2.2em;    color: #6254DE;    line-height: 1em; }
.upper  { font-size: 1.0em;   color: #6254DE;     font-weight:  300;    line-height: 1.0em;  
text-transform: uppercase; letter-spacing: 2px; }
.subtitle {   font-size: 1.2em; }
.headline {   font-size: 1.15em; }
.headlineplus {   font-size: 1.55em; }
}




.topslidemobile  {display:  none; }
.topslidepc  {display:  block; }

.tekst { font-size:  1.15em;    color: black;   line-height: 1.5em; }
TD.tdtekst { font-size:  1.0em;    color: black;   line-height: 1.5em; }




@media all and (min-width: 200px) and (max-width: 499px) {

.topslidepc  {display:  none; }
.topslidemobile  {display:  block; }
}

a.bluish  {color: blue; cursor: pointer; } 

@media all and (min-width: 640px)   {
	.pcidcard  { display: block; }
	.mobileidcard  { display: none; }
TD.mobilemenu { display: none; }
TD.pcmenu  { display: block; }
.mobilecontact { display: none; }
TD.pccontact { display: block; }
}

@media all and (max-width: 640px)   {
	.pcidcard  { display: none; }
	.mobileidcard  { display: block; }
  .nlpcbreak { display: none; }
TD.mobilemenu { display: block; }
TD.pcmenu  { display: none; }
TD.pccontact { display: none; }
TD.pccontactone { text-align: center; }
.mobilecontact { display: block; text-align: center; }
}

@media screen and (max-width: 900px) {
.menufont { font-size:  2.9vw; }
 .pctxtmenu {padding-top:  1.4em;  margin: 0 auto; text-align: center; }
}
@media screen and (min-width: 900px) {
  .menufont {   font-size: 1.7em;  }
  .pctxtmenu {padding-top:  1.2em;  margin: 0 auto; text-align: center; }
}


.quote { width:  200px;  height:  40px;  border-radius: 14px;  background-color:   #ff4da6;  border: 0px solid black; color: white; font-size: 1.1em; padding: 0.6em;    display: table-cell;  text-align: center;  vertical-align: middle;  margin: 0 auto; }
LI.specs {   list-style-type: circle;  margin-left: 1em;   font-size:  1em; padding-bottom:  0em;}
UL.spec { line-height: 0px; margin-bottom:  0em;}

 




        /*  css for swiper based gallery  */
        /* Add a height to the swiper-container to make it visible */
        .swiper-container {
            width: 100%;
            max-width: 900px;
            height: 320px; /* Adjust height as needed */
            position: relative; /* Relative position to contain absolutely positioned elements */
              overflow: hidden; 
              margin: 0 auto;
        }

        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            background: white; /* Background color for each slide */
             border-radius: 7px; 
        }

        .swiper-slide img {
          width: 100%; 
            display: block;
             border-radius: 7px; 
        }

        /* Style for arrows (navigation buttons) */
        .swiper-button-next,
        .swiper-button-prev {
            color: #fff; /* Arrow color */
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
            border-radius: 50%; /* Make arrows circular */
            width: 50px; /* Width of the arrow button */
            height: 50px; /* Height of the arrow button */
            display: flex; /* Flex display for centering the arrow icon */
            align-items: center; /* Center arrow icon vertically */
            justify-content: center; /* Center arrow icon horizontally */
            position: absolute; /* Position absolutely to center vertically */
            top: 60%; /* Center vertically */
            transform: translateY(-60%); /* Adjust for perfect centering */
            z-index: 10; /* Ensure arrows are on top of images */
        }

        /* Positioning for specific arrows */
        .swiper-button-next {
            right: 10px; /* Distance from right */
        }

        .swiper-button-prev {
            left: 10px; /* Distance from left */
        }

        /* Hide pagination dots */
        .swiper-pagination {
            display: none; /* Hide pagination dots */
        }