/*------------------------------------------------------------------
    File Name: synu.css
    Template Name: Rabarbar Radziszow
    Created By: Monika Danielsson
    Version: 1.0
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
    [Table of contents]
	
	1. FONTS
	  1.1. Preloader
	  1.2. Scrollup
        2. VARIABLES
        3. GENERAL
        4. SECTION HERO
        5. SECTION TEASER
        6. SECTION FOOTER
        7. ANIMATIONS
        8. COPYRIGHT


-------------------------------------------------------------------*/

/*------------------------------------------------------------------
 FONTS
-------------------------------------------------------------------*/

@charset "utf-8";


@font-face {
font-family: 'road';
src: url(fonts/road/RoadRage-Regular.woff2) format('woff2'),       /* Modern browsers */
url(fonts/road/RoadRage-Regular.woff) format('woff'),  /* Older browsers */
url(fonts/road/RoadRage-Regular.ttf) format('truetype'); /* Fallback */
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'roboto';
src: url(fonts/roboto/roboto_condensed-light.woff2) format('woff2'),
url(fonts/roboto/roboto_condensed-light.woff) format('woff'),    
url(fonts/roboto/roboto_condensed-light.ttf) format('truetype');
font-weight: 350;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'lato';
src: url(fonts/lato/lato-regular.woff2) format('woff2'),
url(fonts/lato/lato-regular.woff) format('woff'),
url(fonts/lato/lato-regular.ttf) format('truetype');    
font-weight: 400;
font-style: normal;
font-display: swap;
} 


/* Road Rage, Lato, Roboto*/

/*
gul #ffc40c  tint -#FFDC6D shade- #997607
rod #c21a20 #d45f63  #741013
rgb(228, 216, 184);
*/


/*------------------------------------------------------------------

 VARIABLES

-------------------------------------------------------------------*/



:root {
--bgcolor: rgb(21, 21, 21);
--base-color: #e4d8b8;

--base-fontsize: clamp (0.9rem, 15px + 0.390625vw, 1.2rem);
--bg: #000000;


--links: #e4d8b8;
--links-hover: #ffa20080;
--active-color: #1f1f1f;



--icon-default: hsl(203 5 75);
--icon-accent: hsl(203 15 98);
--navigation-color: hsla(0, 0%, 3%, 0.3);



--color-red: #b01113;
--color-yellow: #eaba3e;
--rbb__white: rgb(228, 216, 184);
--rbb__gul:  #ffc40c;
--rbb__rod: #c21a20; 
--rbb__grey: #3b3939;


--shadow__grey: #212529;
--shadow__rod: #741013; 
--shadow__white: #c3ba9ecf;

--gradient__rbb: linear-gradient(106deg, rgba(227,1,15) 20%, rgba(255,204,51)50%, rgba(227,1,15) 80%);

--linear1: linear-gradient(to right, #2b2b2b, #00b9ff, #59d941, #f6001d, #ffa200, #ffe60022);
--linear2:linear-gradient(141deg, rgba(2,27,27,1) 0%, rgba(255,0,0,1) 40%, rgb(255, 195, 32) 100%);
        
          
--text-shadow1: 2px 3px 3px rgba(0, 0, 0, 0.3),
2px 2px 1px rgba(0, 0, 0, 0.686), 1px 1px 0.2px rgb(241, 199, 45);      
--text-shadow2: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
--text-shadow3: 2px 2px 0.9px rgba(0, 0, 0, 0.3),
1px 1px 0.9px rgba(99, 98, 98, 0.686), 0.5px 0.5px 7px rgba(41, 30, 30, 0.877);    

--text-shadow4: 0px 0px 1px hsl(203 15 98),
2px 2px 1px rgb(21, 21, 21);

 --text-border1:-1px 0 rgb(127, 127, 127), 0 1px rgb(102, 102, 102), 1px 0 rgb(111, 111, 111), 0 -1px rgb(118, 118, 118);

--ff: 'lato', sans-serif;
--ff-a: 'pizza';
--ff-b: 'roboto', sans-serif;
--ff-c: 'road', Verdana, sans-serif;


--apadding-text: calc(8px + 1.5625vw);
--fs-p: clamp(1rem, calc(0.813rem + 0.5vw), 1.188rem);
--fs-p2: clamp(1rem, calc(16px + 0.20vw), 24px);
--fs-lagom:1rem;
--fs-lagom: clamp(1rem, 0.9rem + 0.5vw, 1.05rem);
--fs-h2: 1.5rem;
--fs-h2: clamp(1.6rem, 1.04rem + 3.3000000000000003vw, 3rem); 
--fs-medium: 2.2rem;
--fs-medium: clamp(2.2rem, 1.8600000000000003rem + 1.6999999999999997vw, 3.9rem);        /* navlinks desktop,  zadzw, citat */
--fs-large: 1.8rem;
--fs-large: clamp(1.8rem, 0.96rem + 4.2vw, 4rem);
--fs-huge: clamp(3rem, 7vh, 4.5rem);

--nav-size: 65px;

   --new1: #F5E7C6;
   --new2: #F7EDDA;
   --new3: #FAF3E1;
   --new4: #FFECD1;
   --new5: #FFF6E5;     
         

        --hdr-gradient: linear-gradient(
          67deg in oklab,
          oklch(55% 0.45 34) 0%, 56%, oklch(95% .4 95) 100%
        );
        --sdr-gradient: linear-gradient(67deg, #f00 0%, 56%, #ffda00 100%);
      
        
        





} 

 
/*------------------------------------------------------------------

GENERAL

-------------------------------------------------------------------*/


              
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
/* font-size: 62.5%; */
border: none;
line-height: 1.5; 
-webkit-text-size-adjust: 100%; 
scroll-behavior: smooth;


}

body {
 font-family: var(--ff);
background-color: var(--bgcolor);
color: var(--base-color);
box-sizing: border-box;
margin: 0 auto;
text-align: center;
padding: 0;
width: 100vw;
height: auto;
overflow-x: hidden;
font-size: var(--base-fontsize);

}


main {
width: 100vw;
height: auto;
box-sizing: border-box;
text-align: center;
margin: 0px auto;

}


        

img {
        display: block;
        max-inline-size: 100%;
        height: auto;
     
}
    
input,
button,
textarea {
font: inherit;
}





h1, h2, h3, h4, h5 {

        text-decoration: none;
        text-align: center;
}

h1 {
        line-height: 1.2;
        padding: 10px;
        font-family: var(--ff-c);
        font-weight: 400;
        font-size: 3.5rem;
        margin: 0;
}

h1 svg {
   width: 45px;
   height: 45px;
   fill: var(--base-color);
 }
h2 {
        line-height: 1.1;
        padding: 10px;
        font-family: var(--ff-c);
        font-weight: 350;
font-size: 2.8rem;
}
h2 svg {
   width: 55px;
   height: 55px;
   fill: var(--bgcolor);
 }
h3 {

font-weight: 100;
font-size: 40px;
}

p {
font-family: var(--ff);
font-weight: 400;
font-size: var(--base-fontsize);
text-indent: 0rem;
margin: 0px;
color: var(--base-color);
text-align:justify;
hyphens: auto;
padding: var(--apadding-text);
} 

p.indent {
text-indent: 2rem;
}

p.first::first-letter {
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: 800;
   initial-letter: 3 3;
}


a {
color: var(--base-color);
text-decoration: none;

}


a:hover, a:focus-visible {

transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}

a:active {
color: var(--links);
} 

a:any-link {
color: var(--links);
}
a:-webkit-any-link {
color: var(--links);
}    


hr {

        overflow: visible;
        text-align: center;
        width: 160px;
        height: 1.5px;
        margin: 10px auto;
        border: 0;
        background-image: linear-gradient(35deg, #151515, rgb(242, 0, 0),rgb(255, 42, 0),rgb(255, 72, 11), rgb(255, 183, 0), rgb(255, 221, 0), #151515);

}

hr.hr1 {

   overflow: visible;
   text-align: center;
   width: 180px;
   height: 1.5px;
   margin: 10px auto;
   border: 0;
   background-image: linear-gradient(35deg, #e4d8b8, rgb(209, 154, 1), rgb(255, 149, 11), rgb(242, 0, 0), rgb(250, 70, 70),rgb(255, 27, 11), rgb(242, 56, 0), rgb(214, 197, 41), rgb(241, 226, 86), #e4d8b8);

}
hr.hr2 {

        overflow: visible;
        text-align: center;
        width: 180px;
        height: 2px;
        margin: 10px auto;
        margin-bottom: 15px;
        border: 0;
        background-image: radial-gradient(closest-side,#e4d8b8, rgb(224, 85, 85), rgb(255, 149, 11), #e4d8b8);

}

    



/* section div>div {
grid-column: 1/13 ;

} */


.grid {
grid-column: 1/13;
}

     .row1 {
        grid-row: 1/2;
      }
      .row2 {
        grid-row: 2/3;
      }
      .row3 {
        grid-row: 3/4;
      }
      .row4 {
        grid-row: 4/5;
      }
      .row5 {
        grid-row: 5/6;
      }
      .row6 {
         grid-row: 6/7;
       }

    .offscreen {
        position: absolute;
        left: -10000px;
    }


/*      
  
    



.figure {
display: inline-block; }

.figure-img {
margin-bottom: 0.5rem;
line-height: 1; }

.figure-caption {
font-size: 90%;
color: #6c757d; } */








.iconer__storlek {
width: 38px;
height: 38px;
color: var(--base-color);
display: inline-block;
align-self: baseline;
line-height: inherit;
fill: var(--base-color);
padding: var(--apadding-text);
box-sizing: border-box;
}







/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

INDEX.HTML

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



#home.hero {
        background-color: var(--bgcolor);
        background-image: url(pic/background.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        text-align: center;
        margin: 0px auto;
       height: 85vh;
       inline-size: 100%;
       max-inline-size: 1170px;
}

#home .hero__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, auto);
justify-content: stretch;
align-content: space-between;
align-items: stretch;
inline-size: 100%;
height: 100%;
max-inline-size: 1170px;



}



        /*
////////////RABARBAR TITLE \\\\\\\\\\\\\\\\
*/
#home .hero__container .hero__titel {
          width: clamp(80px, 100%, 75vw);
        background-color: transparent;
        opacity: 1;
      grid-column: 1/13;
      grid-row: 5/6;
       z-index: 1;
        display: grid;
        grid-template-columns: 10% 80% 10%;
        grid-template-rows: 70% 30%;
        justify-self: center;
        align-self: center;
        margin: 10px 10px;
        padding: 15px 0px;
        /* overflow: hidden; */

 }

#home .hero__container .hero__titel .titel__main {
text-align: center;
justify-self: center;
align-self: center; 

grid-column: 2/3;
grid-row: 1/2;
background-image: url(pic/r1.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: clamp(80px, 100%, 75vw);
height: 65px;
opacity: 0;


}

#home .hero__container .hero__titel .titel__pizza {
         justify-self: center;
         align-self: center; 
               /* height: calc(0.14 * (100vh - 150px)); */
         grid-row: 2/3;
         grid-column: 2/3;
      
         height: 40px;
         width: clamp(50px, 80%, 45vw);
         background-image: url(pic/title__pizza.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         opacity: 0;
                  
         }
   

.ajuhu {
   animation: juhu 5s ease-in-out 4s forwards
}
.ajuhu2col{
grid-column: 2/12;
}
.ajuhu2 {
  animation: juhu2 2s ease-in-out 9s forwards;
}
.ajuhu2a {

   animation: juhu2a 2s ease-in-out 9s forwards;
 }
/* /* ////////////RABARBAR TITLE \\\\\\\\\\\\\\\\ */

.hero__citat {
padding: 15px;
font-size: var(--fs-h2); 
font-family: var(--ff-c);   
font-style: italic;
text-align: center;
margin: 5px;
min-height: max-content;
z-index: 1;
grid-column: 1/13;
grid-row: 3/4;
}


                /* //////////////////////////////ZZZZZZZZZZZZZZZZZZZADZWON ZAMOW\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
 
.zadzwon__zamow {

justify-self: center;
align-self: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
justify-items: space-evenly;
align-items: space-evenly;
align-content: space-evenly;
font-family: var(--ff-c);
font-size: var(--fs-large);
text-shadow: var(--text-shadow2);
transition: transform 0.2s ease-in-out;
white-space: nowrap;
margin: 0 auto;
padding: 10px;
gap: 0.8rem; 
font-size: var(--fs-medium);
}

.zadzwon__zamow__tekst {
       
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
       
        flex-grow: 1;

       

}
.zadzwon__zamow__tekst1 {
        flex-grow: 1;
        transform: rotate(5deg);
}
.zadzwon__zamow__tekst2 {
        flex-grow: 1;
        transform: rotate(-5deg);
}
.zadzwon__zamow__numer, .zadzwon__zamow__numer1, .zadzwon__zamow__numer2 {
        display: flex;
        /* font-size: calc( var(--fs-large) - 20%); */
        flex-wrap: wrap;
        justify-content: center;
        justify-items: center;
        align-items: center;
        align-content: center;
}
.zadzwon__zamow__numer {
        flex-direction: column;
        flex-grow: 1;
       
}
.zadzwon__zamow__numer1, .zadzwon__zamow__numer2 {
        flex-direction: row;
        flex-grow: 1;
}

/* 
                //////////////////////////////ZZZZZZZZZZZZZZZZZZZADZWON ZAMOW\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 
 /////////////////               */
      



        
/*//////////////////////////////////////////---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//////////////////////////////////////////
//////////////////////////////////////////

SHOWTIME BY SYNU

//////////////////////////////////////////
//////////////////////////////////////////
////////////////////////*/
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


div.hero__showtime {
        grid-column: 1/13;
        grid-row: auto;
        margin: 0px 0px;
        display: flex;
        flex-flow: column;
        /* align-items: start;
        align-content: flex-start;
        white-space: nowrap;
        position: relative; */
        width: clamp(320px, 100vw, 900px);
        
        object-fit: contain;
        width: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
        border-radius: 0px;
        container-type: inline-size;
        contain: content;
        background-color: rgba(0, 0, 0, 0.193);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
                rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
                rgba(0, 0, 0, 0.15) 0px 10px 15px;
}
            
        .showtime__content {
         flex-grow: 1;
         display: flex;
  
        /* justify-content: start; */
        justify-content: space-between;
    position: relative;
        
        }


          /* .slider-control--button  */
        .btn__showtime {
        border: 0;
        background: 0;
        outline: 0;
        cursor: pointer;
        place-content: center;
        padding-inline: 3vw;
        z-index: 1;
        display: grid;
        }
            
        .showtime__icon {
        height: 1.5rem;
        width: 1.5rem;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: rgba(221, 221, 221, 0.067);
        transition: background 150ms linear;
        }
        
            
        .btn__showtime:where(:hover) {

         background-image: linear-gradient(to var(--position), #0000 0%, #0002, 80%, #0006 100%);
     

      }

            
        .btn__showtime:active {
        outline: 0em solid hsl(200, 7%, 83%);
        outline-offset: -0.5em;
        }
            
        /* .btn__showtime__prev,
        .btn__showtime__next {
        
        
        transform: translateY(-9%);  
        } */
        
         .btn__showtime__prev {
       
            --position: left;

        } 
        
        .btn__showtime__next {
       --position: right;
        }
        
        /* .showtime__display {
        position: fixed;
        inset: 0;

        } */


.showtime__display {
   /* Removed position: fixed; inset: 0; - Likely incorrect */
   position: absolute; /* Or position: absolute; if needed for inner positioning, else position: relative; */
   top: 0;
   left: 0;
   right: 0;
   width: 100%; /* Ensure it fills available width within .showtime__content */
   /* Ensure it fills available height within .showtime__content */
   overflow: hidden; /* Clip content if it exceeds display area */

}
        .showtime__display img {
         display: block; /* Remove inline spacing below image */
         width: 100%;
         min-height: 100%;
         height: auto;
        
         object-fit: contain; /* Ensure images fill the display area nicely */
     }
     



        
        .showtime__navbar {
         z-index: 10;
         display: grid;
         grid-auto-flow: column;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
         grid-auto-columns: 100%;
         gap: 1.0rem;
         padding: 0.5rem;
         place-content: center;

         background-color: transparent;
         backdrop-filter: blur(3px);


}
            
        .showtime__navbtn {
        display: grid;
        width: 100%;
        min-height: 25px;
        height: auto;
        border-radius: 0.3rem;
        overflow: hidden;
        place-content: center;
        border: 0;
        /* aspect-ratio: 16 / 9; */
    
        transition: filter 150ms linear, scale 266ms ease;
        
        }

        
        
        .showtime__thumbnail {
         display: block;
         max-width: 100%;
         
         object-fit: cover;
         height: auto;
       aspect-ratio: 16/9;
        
        }
        
        
        .showtime__navbtn[aria-selected="true"] {
        scale: 1.1;
        }
            
        .showtime__navbtn[aria-selected="true"],
        .showtime__navbtn:focus-visible {
        outline: 0.15rem solid var(--base-color);
        outline-offset: 0em;
        border-radius: 0.2rem;
        }
        
        .showtime__navbtn[aria-selected="false"] {
        filter: opacity(0.6);

        }
        
        .showtime__navbtn[aria-selected="false"]:where(:hover, :focus-visible) {
        filter: opacity(1);
        }

/* 
        @container (max-width: 660px) {
         .showtime__navbtn:not(:has(img)) {
             background-color: rgb(241, 235, 232);
         }
     
         .showtime__navbar {
             display: flex;
             justify-content: center;
             padding-block: 1.5em;
         }
     
         .showtime__navbtn {
             inline-size: 0.625rem;
             aspect-ratio: 1;
             border-radius: 50%;
         }
     
         .showtime__navbtn > .showtime__thumbnail {
             display: none;
         }
     
         .showtime__navbtn[aria-selected="true"] {
             background-color: rgb(154, 154, 154);
             scale: 1.5;
         }
     } */

 
  
  

        

@media screen and (min-width: 600px) { 

   #home.hero {
      height: 95vh;
   }

.hero__container {

   max-width: 1000px;
}

#home .hero__container .ajuhu2col {
grid-row: 5/6;
grid-column: 1/7;
}

#home .hero__container .zadzwon__zamow {
   grid-row: 5/6;
grid-column: 7/13;
}

.showtime__content button>svg {
   width: 60px;
   height: 60px;
}  



}





















         
         

























        

/*------------------------------------------------------------------

SECTION TEASER


SECTION TEASER


SECTION TEASER


SECTION TEASER

-------------------------------------------------------------------*/



.section__teaser {
   background-color: var(--bgcolor);
   overflow: hidden;
   text-align: center;
   margin: 0px auto;
   min-block-size: 80vh;

   max-inline-size: 1170px;
   inline-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

      





.teaser__container {
/* display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(5, auto); */
height: 100%;
align-content: center;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
inline-size: 100%;
background-color: var(--bgcolor);

}



.teaser__omoss {
/* 
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
  align-items: center;
  justify-content: center;
   overflow: hidden;
   align-self: center; */
display: block;
   margin: 0; 
   padding: var(--apadding-text);
  
   box-sizing: border-box;
   clip-path: polygon(0 0,100% 0,100% calc(100% - 30px),50% 100%,0 calc(100% - 30px));
 width: 100%;
height: 100%;
}

.teaser__omoss__text {
   width: 100%;
   text-align: center;
   font: bold var(--fs-lagom) var(--ff);
   text-shadow: var(--shadow__grey);
   max-width: 600px;
   align-items: center;
   color: var(--base-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;
   margin: 0px auto;
   padding: 0px var(--apadding-text);
   box-sizing: border-box;
}

.teaser__omoss__text p, .omoss__text p {
padding: var(--apadding-text) var(--apadding-text);
padding-bottom:0px;

}

.teaser__omoss__text__hej {
font-size: calc(var(--fs-lagom) + .2rem);
font-weight: 800;
}

 




.p__right {
   margin-left: auto;
   margin-right: 0;
   display: block;
   font-family: var(--ff);
font-style: italic;
}


 .p__mer {
  font-style: italic;
  text-decoration:underline solid rgb(255, 254, 254) 1px; 
cursor: pointer;
text-align: right;
 padding-bottom: 20px; 
 margin-bottom: 20px;

}

            


   .teaser__bild {
    
     width: 95%;
     height: auto;
    text-align: center;
    margin: 20px auto;
    padding-bottom: 20px;
    box-sizing: border-box;
    max-width: 500px;

}
   
   


.teaser__oppetider__container {
   display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
   text-align: center;
   overflow: hidden;
   align-self: center;
   margin: 0; 
   padding: var(--apadding-text);
   width: 100%;
   height: 100%;
   box-sizing: border-box;
  background-color: transparent;
  color: var(--bgcolor);

  



}

        
.teaser__oppetider {
  grid-column: 1;
grid-row: 1/2;
 
   text-align: center;
   overflow: hidden;
   margin: 0; 
   padding: var(--apadding-text);
   padding-bottom: 20px;
   padding-top: 40px;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
  background-color: var(--base-color);
  color: var(--bgcolor);
    clip-path: polygon(0 0,50% 30px,100% 0,100% 100%,0 100%);

}





  
      /* 
                //////////////////////////////STATUS OPEN CLOSE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 */

  .tider__p {
      font-weight: bold;
      font-family: var(--ff);
    
      text-align: center;
      font-size: var(--fs-p2);
      margin: 1px auto;
      text-indent: 0px;
      width: 100%;
      text-transform: capitalize;
      color: #fffad0;
        text-shadow: var(--text-shadow3);
        word-spacing: 5px;
        font-variant: small-caps;
               
    }

     
   #veckoapp-status{
      width: 100%;
      align-items: center;
      margin: 0 auto;
      text-align: center;


       

      
      }

      
      #current-date, #current-time, #current-weekday{
        /* Styles for the current status message */
        background-color: transparent;
        width: 100%;
        min-height: 10px;
        margin: auto;
        padding: 0px;
        /* font-weight: bold; */
     
          }
    
          #veckoapp-status1{
       
            text-shadow: var(--text-shadow1);
Font-weight: bold;
color: transparent;
background: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5);

          }
          #veckoapp-status2{

            padding: 0px;
          }

          /* 
 
 
 
          //////////////////////////////STATUS OPEN CLOSE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 

*/
 
.tider__table__container {
grid-column: 1;
grid-row: 2/3;
   margin: 0; 
   padding: 0px var(--apadding-text);
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: 30px;
   padding-bottom: 35px;
   clip-path: polygon(0 0,100% 0,100% calc(100% - 30px),50% 100%,0 calc(100% - 30px));
   background-color: var(--base-color);

}

.tider {
   letter-spacing: 1.5px;
   width: 100%;
   min-height: 9vh;
   max-width: 500px ;
border-spacing: 0px;
table-layout: auto;
font-family: var(--ff);
font-weight: 400;
font-size: 1rem;
padding-bottom: 5px;
padding-top: 45px;
display: table;

white-space: nowrap; 
text-align: center;
margin: 0 auto;
} 
         tbody {
     
      width: 100%;
      max-width: 500px;
      
   }
 

   .tider tr:first-child, .tider tr:nth-child(3), .tider tr:nth-child(5), .tider tr:nth-child(7){

   background-color: var(--base-color);
   color: #131313;
  
   }
   .tider tr:nth-child(2), .tider tr:nth-child(4), .tider tr:nth-child(6){
   background-color: var(--bgcolor);
   color: var(--base-color);


}

   .tider td{
   /* text-align: justify; */
   display: table-cell;
   padding: 2%;
   

   }



   .tider td:first-child{
   /* text-align:end; */

   margin: auto auto;

   font-weight: bold;
   }



    
    

   .teaser__danie__dnia {

      
      
      background-color: var(--bgcolor);
      color: var(--base-color); 
      margin: 0; 
      padding: var(--apadding-text);
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: center;
      place-items: center;
      clip-path: polygon(0 0,50% 30px,100% 0,100% 100%,0 100%);
      margin-top: -30px;
    }
   

    .danie__dnia__link {
      width: 100%;
      max-width: 400px;
padding-top: var(--apadding-text);

    }
.danie__dnia__link a:hover {
   transform: scale(1.03);
}



.danie__dnia__text {
   width: 100%;
    text-align: center;
    font: bold var(--fs-lagom) var(--ff-a) ;
    text-shadow: var(--shadow__grey);
    max-width: 600px;
    align-items: center;
   color: var(--base-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;
   margin: 0px auto;
   padding: var(--apadding-text);
   box-sizing: border-box;
   }
   .danie__dnia__text p:nth-of-type(1)::first-letter  {
      text-transform: uppercase;
      font-size: 1.3rem;
      font-weight: 800;
      text-indent: 0rem;
      initial-letter: 3 3;
    }

   .danie__dnia__text :nth-child(4){
align-self: flex-end;
   }

.menu__danie__dnia {    
   background-color: var(--bgcolor);
   color: var(--base-color); 
   margin: 0; 
   padding: 8vmin 8vw;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   align-content: center;
   place-items: center;
   grid-row: 2/3;
   grid-column: 1/13;

   margin-top: -30px;
 }
 
.menu__danie__dnia > * {    
   color: var(--base-color);
}











    




















@media screen and (min-width: 700px) { 

 

.teaser__container {
align-content: center;
max-width: 1000px;
}

.teaser__omoss, .teaser__danie__dnia {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   grid-template-rows: 1fr;
justify-content: center;
align-items: start;
align-content: center;

   }

   .teaser__danie__dnia {
padding-bottom: 70px;
   }
 
   .teaser__bild {
padding-top: 20px;
aspect-ratio: 4/6;

   }


   .teaser__oppetider__container {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr ;
align-content: center;
align-items: center;
justify-content: center;

   }

.teaser__oppetider {
grid-column: 1/2;
grid-row: 1;
clip-path: polygon(0 0,100% 15px,100% 0,100% 100%,0 100%);
}
.tider__table__container {
   grid-column: 2/3;
   grid-row: 1;
   clip-path: polygon(0 0,0% 15px,100% 0,100% 100%,0 100%);
   }
.tider{
padding-bottom: 45px;

}
}







/* — każdy dzień to nowa kulinarna przygoda! 
Smak, który zostaje w pamięci.





*/


































          /* zzzzzzzzzzzzzzzzzzzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz     MENU SIDAN .html
    zzzzzzzzz
    zzzzzzzzz  MENU SIDAN 
    zzzzzzzzz

      MENU SIDAN 
    zzzzzzzzz
      MENU SIDAN 
    zzzzzzzzz
    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz  */

    

  
      
      
      .hero__titel2{
      position: relative;
      width:100%;
      max-width: 300px;
      grid-column: 1 / 13;
      grid-row: 1 / 2;
      margin: 5% auto;
      height: 100%;
      }
      
#menuhtml {
   margin: 0 auto;
   text-align: center;
   padding: 0;
   width: 100%;
background: var(--bgcolor);
box-sizing: border-box;
}

#menuhtml>section {

   width: 100%;
   text-align: center;
   margin: 0 auto;
   max-width: 1170px;
height: 100%;
}


.section__menu {
     background: var(--bgcolor);
    
      min-height: max-content;
      width: 100%;
      max-width: 1170px;
      text-align: center;
      margin: 0 auto;
      }          
      
      .menu__container {
         background-image: url(pic/portrait.jpg);
         background-position: top;
         background-size:auto;
         background-repeat: no-repeat;
         border-radius: 15px;
         
         min-height: max-content;
         width: 100%;
         max-width: 1170px;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 2%;
         margin: 0 auto;
         box-sizing: border-box;
         
         }          
              
      
.menu__gallery {
         
            grid-row: 2 / 3;
            position: relative;
            padding: 5%;
            text-align: center;
            grid-column: 2 / 12;
            display: flex;
                  justify-content: center;
                  flex-wrap: wrap;
                  
                  max-width: 800px;
            
            box-sizing: border-box;
            
}
      
      
      .gallery__thumbs {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        font: bold normal var(--fs-lagom) var(--ff-a);
        overflow-x: hidden;
        height: auto;
      }
      .gallery__thumbs > a {
         min-width: 140px;
         max-width: 400px;
         height: auto;
         margin: 10px;
         overflow: hidden;
       border-radius: 10px;
           /* box-shadow: 0 0 0 3px white, 0 5px 8px 3px rgba(0, 0, 0, 0.6); */
      
      }
      .gallery__thumbs > a img {
        transform: scale(1);
        transition: transform 0.7s ease-in-out;
        filter: grayscale(0%);
        min-width: 100%;
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 3/4;
      }
      .gallery__thumbs > a:hover img {
        transform: scale(1.05);
        filter: grayscale(0%);
        
      }
      
         
      
      .gallery__lightbox {
        z-index: 2;
        position: fixed;
        background: rgba(100, 100, 100, 0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        height: 100%;
        width: 100%;
        left: 0;
        top: var(--nav-size);
        transform: translateY(-100%);
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        align-items: center;
      }
      
      .gallery__lightbox:has(div:target) {
        transform: translateY(0%);
        opacity: 1;
      }
      .gallery__lightbox a.nav {
        text-decoration: none;
        color: rgb(209, 10, 10);
        font-size: 40px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
        opacity: 0.5;
        font-weight: 200;
        z-index: 3;
      }
      .gallery__lightbox a.nav:hover {
        opacity: .7;
      }
      .gallery__lightbox .target {
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        
        transform: scale(0);
        align-items: center;
        justify-content: space-evenly;
        z-index: 1;
        
      }
      .gallery__lightbox .target *:first-child, .gallery__lightbox .target *:last-child {
          flex: 0 0 45px; 
        text-align: center;
      }
      
       
        
      
      .gallery__lightbox .target .content1 {
        transform: scale(1);
        opacity: 0;
        flex: 1;
      justify-content: center;
      align-content: center;
      align-items: center;
        align-self: center;
        max-height: 100vh;
        min-height: 0;
        min-width: 0;
        border-radius: 3px;
        overflow: hidden;
        transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
        height: 100%;
        width: 100%;
        
      }
      .gallery__lightbox .target .content1 img {
        min-width: 0%;
        min-height: 0%;
        max-width: 100%;
        aspect-ratio: 3/5;
        display: flex;
        margin: auto;
       z-index: 1000;
      max-height: 100vh;
      
      }
      .gallery__lightbox .target:target {
        transform: scale(1);
      }
      .gallery__lightbox .target:target .content1 {
        transform: scale(1);
        opacity: 1;
      }
      .gallery__lightbox .close {
        position: absolute;
        right: 15px;
        top: 15px;
      }
      
      
      
      
      
      
      
























      .img__xl {
         display: none;   
         }
         .img__s {
            display: inline-block;
            max-width: 70%;
               }
         @media screen and (min-width: 700px) {
            .img__xl {
         display: inline-block;
            }
            .img__s {
         display: none;   
            } 

         .gallery__thumbs > a {
            min-width: 240px;
            max-width: 350px;
            height: auto;
         }
      }
.img__rfloat {
float: right;
margin-left: 10px;
/* margin-bottom: 10px;
max-width: 50% */
}

.img__lfloat {
   float: left;
   margin-right: 10px;
 
}
.ikonka {
   text-align: center;
   margin: 0 auto;
   padding: 0;
   
   display: block;
   align-self: center;
   line-height: inherit;
   }
   
    .iconer__storlek2 {
      width: 35px;
      height: 35px;
      fill: var(--base-color);
      display: inline-block;
      align-self: center;
      line-height: inherit;
      }
   

      .flex__to__center   {
         display: flex;
         justify-content: center;
         align-items: center;
         }
      
      











































/*------------------------------------------------------------------

SECTION omoss.html
SECTION 
SECTION 


SECTION 

-------------------------------------------------------------------*/



.omoss__hero, .omoss__info, .omoss__whyus, .omoss__other {

   padding-bottom: 4rem;

}



.omoss__witaj h1 {
margin-top: 15px;
backdrop-filter: blur(14px) saturate(162%);
-webkit-backdrop-filter: blur(14px) saturate(162%);
background-color: rgba(0, 0, 0, 0.41);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
border-radius: 40px 10px 40px 10px;
}
.omoss__witaj h1 svg {
   animation: witaj 1s ease-in-out 3s infinite normal none;
}
/* Copy this code after the above code */
@keyframes witaj {
   0%,
   100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
   }
 
   25% {
    transform: translateX(-7px) rotate(-5deg);
   }
 
  50% {
    transform: translateX(7px) rotate(2.4deg);
   }
 
   75% {
    transform: translateX(-10px) rotate(-3.6deg);
   }
 
 
 

 }
 



.omoss__hero {
   background-color: var(--bgcolor);
   background-image: url(pic/portrait.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
   text-align: center;
   margin: 0px auto;
  height: 65vh;
  inline-size: 100vw;
  max-inline-size: 1170px;
}



.omoss__herocontainer {
   display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto 5%;
justify-content: space-around;
align-content: space-around;
align-items: space-around;
inline-size: 100%;
height: 100%;
max-inline-size: 1170px;
}

.omoss__witaj {
   grid-column: 2/12;
   grid-row: 1/2;

}
.omoss__witaj h1{

font-size: 2.5rem;

}
.omoss__rabarbar__titel {
   grid-column: 3/11;
   grid-row: 2/3;
   opacity: 1;
   width: clamp(80px, 90%, 75vw);
   background-color: transparent;
   z-index: 1;
   display: grid;
   grid-template-columns: 10% 80% 10%;
   grid-template-rows: repeat(3, auto);
height: min-content;
 align-self: center;
 justify-self: center;
   /* overflow: hidden; */

}

.titel__main__omoss {
   text-align: center;
   justify-self: center;
   align-self: center; 
   grid-column: 2/3;
   grid-row: 1/2;
   background-image: url(pic/r1.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   width: clamp(80px, 100%, 75vw);
   height: 65px;
   opacity:1;

   
 
   }
   
   .titel__pizza__omoss {
           justify-self: center;
           align-self: center; 
                   /* height: calc(0.14 * (100vh - 150px)); */
           grid-row: 3/4;
           grid-column: 2/3;
          
           height: 40px;
           width: clamp(50px, 80%, 45vw);
           background-image: url(pic/title__pizza.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
           opacity:1;
                     
           }





#omoss-info, #omoss-whyus, #omoss-other {


 
   overflow: hidden;
   text-align: center;
   margin: 0 auto;
   inline-size: 100vw;
   max-inline-size: 1170px;
   min-height: 60vh;
   height: auto;

}


#omoss-info .omoss__container {
   display: flex;
   align-items: center;
   justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
/* background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='123' height='123' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(160)'%3E%3Crect width='100%25' height='100%25' fill='rgba(21, 21, 21,1)'/%3E%3Cpath d='M-0.5 20h1v1h-1zM19.5 20h1v1h-1zM39.5 20h1v1h-1zM59.5 20h1v1h-1z' fill='rgba(228, 216, 184,1)'/%3E%3Cpath d='M9.75 20h0.5v1h-0.5zM29.75 20h0.5v1h-0.5zM49.75 20h0.5v1h-0.5zM69.75 20h0.5v1h-0.5z' fill='rgba(246, 173, 85,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ") */


}
/* .background--custom {
   background: linear-gradient(290deg, #151515, #0000002d, #534e4e64, #0000002d, #151515);
   background-size: 300% 300%;
   animation: gradient 9s alternate infinite;
 
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
 }
 @keyframes gradient {
   0% {
     background-position: 0%;
   }
   100% {
     background-position: 100%;
   }
 } */
#omoss-info .omoss__text {
   width: 100%;
   text-align: center;
   font: bold var(--fs-lagom) var(--ff);
   text-shadow: var(--shadow__grey);
   max-width: 700px;
   align-items: center;
   color: var(--base-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-content: center;



   height: 100%;
align-content: center;
align-items: center;
justify-content: center;
text-align: center;

inline-size: 100%;
background-color: var(--bgcolor);
   margin: 0px auto;
   padding: var(--apadding-text);
   box-sizing: border-box;
   transition: all 0.5s ease-in-out;
   
}
/* #omoss-info .omoss__text:hover {
   box-shadow: 0 12px 11px 0 rgba(0, 0, 0, 0.653), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
   transition: box-shadow 0.4s; */

#omoss-info .omoss__text p {
   padding: var(--apadding-text);

}
#omoss-info #omoss-text .omoss__text p:nth-of-type(1)::first-letter  {
   text-transform: uppercase;
   font-size: 1.3rem;
   font-weight: 800;
   initial-letter: 3 3;
 }

#omoss-info .omoss__text .spanspace {
   display: inline-block;
   text-indent: 2rem;
}

#omoss-info  .omoss__container div:nth-child(3) {
   background-image: url(pic/pic5.png);

   width: 80%;
   height: auto;
   background: url('pic/pic5.png');
   background-position: center center;
   background-size: cover;
   aspect-ratio: 1.15/1;
}
#omoss-info  .omoss__container div:nth-child(5) {
   background-image: url(pic/pizza/p21__mini.png);

   width: 75%;
   height: auto;
   background: url('pic/pic1.png');
   background-position: center center;
   background-size: cover;
   aspect-ratio: 3/2;
}













@media screen and (min-width: 700px) {
   #omoss-info .omoss__container {
    
     margin: 20px auto;
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
     justify-content: center;
     align-items: center;
     text-align: center;
     position: relative;
     
   }

   /* #omoss-info .omoss__container:hover {
      box-shadow: 15px 15px 30px rgb(35, 35, 35),
             -15px -15px 30px rgb(60, 60, 60);
             border-radius: 30px;
      transition: box-shadow 0.5s;


   } */

   /* #omoss-info  .omoss__container div:nth-child(1) {
      flex: 100%;
      max-width: 520px;
      height: max-content;   
         }    */

   #omoss-info  .omoss__container div:nth-child(1) {
grid-column: 1/3;
grid-row: 1/2;
max-width: 580px ; 
width: 100%;  
height: max-content;   

padding: 0;
   }

   #omoss-info  .omoss__container div:nth-child(2) {
      background-image: url(pic/omoss__1.png);
      object-fit: contain;
      aspect-ratio: 3/4.2;
      grid-column: 3/5;
      grid-row: 1/2;
     height: auto;
       background-position: center center;
       background-size: cover;
       margin: 0 var(--apadding-text);
       justify-self: center;
       align-self: center;
   max-width: 500px;   
   width: 100%;
  box-sizing: border-box;

}



#omoss-info  .omoss__container div:nth-child(3) {
   background-image: url(pic/omoss__2.png);
object-fit: contain;
aspect-ratio: 3/4.2;
   grid-column: 1/3;
   grid-row: 2/3;
   justify-self: center;
   align-self: center;
   max-width: 500px;   
   width: 100%;
   margin: 0 var(--apadding-text);
box-sizing: border-box;

   }
   
   #omoss-info .omoss__container div:nth-child(4) {
padding: 0;
      grid-column: 3/5;
      grid-row: 2/3;
max-width: 580px;  
height: max-content; 

}

}

/* zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz  */


 

 #omoss-whyus ul  {
   margin: 20px auto;
   padding: 20px 0px;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   list-style: none;

 }

 #omoss-whyus ul li {
   padding: 0px;
   width: clamp(300px, 340px, 30%);
   box-sizing: border-box;
   transition: box-shadow 0.5s;
   color: var(--base-color);
   /* background-image: linear-gradient(45deg, rgb(152, 0, 10) 15%, rgb(220, 9, 9)25%,rgb(255, 157, 0)40%, rgb(255, 191, 54) 100%);
   background-image: linear-gradient(45deg, rgb(152, 0, 10) 15%, rgb(220, 9, 9)25%,rgb(255, 157, 0)40%, rgb(255, 191, 54) 100%); */
border: #9e9a9a 0px solid;
margin: 15px;
border-radius: 150px 20px 20px 20px;
background-image: transparent;
box-shadow: 12px 12px 20px 3px rgba(0, 0, 0, 0.714), 0 17px 50px 6px rgba(77, 76, 76, 0.19);

 }
 #omoss-whyus ul li:nth-child(1)  {
   background-color: rgba(255, 255, 255, 0.025);
   backdrop-filter: blur(15px);

 }
 #omoss-whyus ul li:nth-child(2) {
   background-image:rgba(253, 199, 3, 0.988);
   background-image: linear-gradient(210deg, rgba(176, 176, 176, 0.468) 0%, rgba(21, 21, 21, 0.532) 50%,  rgba(45, 41, 41, 0.726)  100%);
 }
 #omoss-whyus ul li:nth-child(3) {
   background-image:rgba(253, 199, 3, 0.988);
   background-image: linear-gradient(210deg, rgba(176, 176, 176, 0.468) 0%, rgba(21, 21, 21, 0.532) 50%,  rgba(45, 41, 41, 0.726)  100%);
 }
 #omoss-whyus ul li:hover {
   box-shadow: 0 12px 15px 0 rgba(124, 124, 124, 0.714), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
   transition: box-shadow 0.4s;
 }
 #omoss-whyus ul li:hover span {
   color: var(--base-color);
 }
 #omoss-whyus ul li:hover p {
   color: #ffffff;
 }
 #omoss-whyus ul li:hover h2>span {
   color: #ffa200;
   text-shadow: var(--text-shadow1);

 }
 #omoss-whyus ul li:hover h2 {
   color: var(--rbb__rod);
   text-shadow: var(--text-shadow1);

 }
 #omoss-whyus ul li:hover h2::after  {    
   width: 30px;
 }
 #omoss-whyus ul li span:nth-child(1), #omoss-whyus ul li span:nth-child(2),  #omoss-whyus ul li span:nth-child(3) { 
   font-size: 3.2rem;
   display: block;
   transition: color 0.3s;
   color: var(--rbb__rod);
 }
 #omoss-whyus ul li span::before, #omoss-whyus ul li span::after { 
   position: static;
 }


 #omoss-whyus ul li h2{
color: var(--bgcolor); 
   background-color: var(--base-color);
   margin: 0px;
   padding: var(--apadding-text);
   font-size: 2rem;
   font-weight: 300;
   transition: color 0.3s;
   border-radius:150px 20px 0px 0px;
   border: 1px;
   min-width: 100%;
   box-shadow: 20px 23px 15px 20px rgba(21, 21, 21, 0.128), 0 17px 50px 0 rgba(0, 0, 0, 0.19);

 }
 #omoss-whyus ul li h2::after {
   content: "";
   position: relative;
   left: 50%;
   top:5px;
   transform: translateX(-50%);
   display: block;
   width: 50px;
   height: 1px;
   background: var(--bgcolor);
   transition: width 0.3s;
 }
 
 #omoss-whyus ul li h2.omoss__whyus__h2a::after {
   content: "";
 }
 #omoss-whyus ul li h2.omoss__whyus__h2b::after {
   content: "";
 }
 #omoss-whyus ul li h2.omoss__whyus__h2c::after {
   content: "";
 }
 #omoss-whyus ul li p, #omoss-info ul li p {
color: var(--base-color);
text-align: justify;
transition: color 0.3s;
padding: 20px var(--apadding-text);
hyphens: auto;


      
 }



 .whyus__pic {

   overflow: hidden;
   float: left;

   margin-right: 1rem;
   box-sizing: border-box;
   max-width: 55%;
   

}

.whyus__pic:hover {
   transform: scale(1.5); 
   
      transition: transform 0.5s;
}

.whyus__pic img{
   display: block;
   max-width: 100%;   
   height: auto;
}
 
 .whyus__li2 {
   display: inline-block;
background: url(pic/pic5.png);
background-image: url(pic/pic5.png);
object-fit: cover;
width: 80%;
height: 100px;

margin-right: 5px; 

}
   





#omoss-open {

/*    
}
.omoss__open__container{ */

   display: flex;
   align-items: center;
   justify-content: center;
   padding: 45px 0px;
  
}

.omoss__tid__box {  
   position: relative;
   border-radius: 10px;
   min-width: 300px;
   min-height: 450px;
   background-color: var(--bgcolor);
   -webkit-box-shadow: 1px 1px 12px #000;
   box-shadow: 1px 1px 12px #8d8671;
   -webkit-transform: preserve-3d;
   -ms-transform: preserve-3d;
   transform: preserve-3d;
   -webkit-perspective: 2000px;
   perspective: 2000px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   color: var(--bgcolor);
   padding: 0px;
   margin: 10%;
   align-self: center;
   box-sizing: border-box;
   width: clamp(300px, 85vw, 550px);
   max-width: 700px;

   overflow: hidden;
 }
 
 .omoss__tid__box2 {  
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   flex-direction: column;
   flex-wrap: nowrap;
   min-width: 100%;
   width: 100%;
   max-width: 650px;
   height: 100%;
margin: 2%;
padding: 0%;
background-color: var(--bgcolor);
color: var(--base-color);
min-height: max-content;

max-height: 600px;
 }
 .omoss__tid__cover {
   top: 0;
   position: absolute;
   backdrop-filter: blur(3px) saturate(162%);
-webkit-backdrop-filter: blur(50px) saturate(162%);
background-color: #ffffff5d;
   /* background-color: transparent; */
   width: 100%;
   height: 100%;
   border-bottom-right-radius: 78px;
   cursor: pointer;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   -webkit-transform-origin: 0;
   -ms-transform-origin: 0;
   transform-origin: 0;
   -webkit-box-shadow: 1px 1px 12px #1c1c1c;
   box-shadow: 1px 1px 12px #8d8d8d3e;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   overflow: hidden;
   flex-flow: column nowrap;
   padding: 2%;
   box-sizing: border-box;
   margin: 0%;
   padding-bottom: 5px;

 }




 .omoss__tid__box:hover .omoss__tid__cover {
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   -webkit-transform: rotatey(-90deg);
   -ms-transform: rotatey(-90deg);
   transform: rotatey(-90deg);
 }
 #omoss__open img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }
    



   .omoss__tid { 

   margin: 0px; 
   padding: 0%;
   width: 100%;
   height: 80%;
   box-sizing: border-box;
   

   background-color: var(--bgcolor);
   letter-spacing: 1.5px;
   min-height: 9vh;
   max-width: 500px ;
   border-spacing: 0px;
   table-layout: auto;
   font-family: var(--ff);
   font-weight: 400;
   font-size: 1rem;
   display: table;
  white-space: nowrap; 
   text-align: center;
   margin: 0 auto;
   border: 3px solid var(--bgcolor);
   border-radius: 10px;
   overflow: hidden;
   } 
            tbody {
        
         width: 100%;
         max-width: 500px;
         
      }
    
   
      .omoss__tid tr:first-child, .omoss__tid tr:nth-child(3), .omoss__tid tr:nth-child(5), .omoss__tid tr:nth-child(7){
         color: var(--base-color);
      
      text-align: left;
     
      }
      .omoss__tid tr:nth-child(2), .omoss__tid tr:nth-child(4), .omoss__tid tr:nth-child(6){
      background-color: var(--bgcolor);
      color: var(--base-color);
      text-align: left;
   
   
   }
   
      .omoss__tid td{
      /* text-align: justify; */
      display: table-cell;
      padding: 2%;
      
   
      }
   
   
   
      .omoss__tid td:first-child{
      /* text-align:end; */
   
      margin: auto auto;
   
      font-weight: bold;
      }
   
   

.textt {
display: block;
position: relative;
color: var(--bgcolor);
line-height: 50px;
font-size: var(--fs-lagom);
width: 100%;

}

.textt p {
   color: var(--bgcolor);
   font-weight: 600;
   font-size: larger;
   float: right;
margin-right: 50px;
}
.omoss__tid__cover .textt span {
position: absolute;
bottom: 0px;
right: 20px; 

}


.omoss__oppetider .tider__p {
 padding: 5px;
 box-sizing: border-box;
 margin: 2px;
 color: var(--bgcolor);
 font-size: var(--fs-lagom);
 
}

.omoss__tid__cover #veckoapp-status1{
text-shadow: var(--text-shadow1);
  Font-weight: bold;
  color: transparent;
  font-size: var(--fs-h2);
  background: #a7a4a4;
    background-clip: border-box;
  background: #000000b8;
    background-clip: border-box;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  text-shadow: 1px 4px 7px rgba(255, 255, 255, 0.334);
}
@media screen and (min-width: 700px) {
 
   .omoss__tid__box:hover .omoss__tid__cover {
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transform: rotatey(-90deg);
      -ms-transform: rotatey(-90deg);
      transform: rotatey(-90deg);
    }

}








































@-webkit-keyframes jackInTheBox {
   from {
     opacity: 0;
     -webkit-transform: scale(0.1) rotate(30deg);
     transform: scale(0.1) rotate(30deg);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
   }
 
   50% {
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
   }
 
   70% {
     -webkit-transform: rotate(3deg);
     transform: rotate(3deg);
   }
 
   to {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
   }
 }
 
 @keyframes jackInTheBox {
   from {
     opacity: 0;
     -webkit-transform: scale(0.1) rotate(30deg);
     transform: scale(0.1) rotate(30deg);
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
   }
 
   50% {
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
   }
 
   70% {
     -webkit-transform: rotate(3deg);
     transform: rotate(3deg);
   }
 
   to {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
   }
 }
 
 .jackInTheBox {
   -webkit-animation-name: jackInTheBox;
   animation-name: jackInTheBox;
 }
 
 .animated {
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
































/*------------------------------------------------------------------

SIDA KONTAKT

SIDA KONTAKT.html
SIDA KONTAKT 
SIDA KONTAKT
SIDA KONTAKT

SIDA KONTAKT

-------------------------------------------------------------------*/

.kontakt__zadzwon__zamow{
   grid-column: 2/12;
   grid-row: 4/5;
   justify-self: center;
   align-self: center;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-evenly;
   justify-items: space-evenly;
   align-items: space-evenly;
   align-content: space-evenly;
   font-family: var(--ff-c);
   font-size: var(--fs-large);
   text-shadow: var(--text-shadow2);
   transition: transform 0.2s ease-in-out;
   white-space: nowrap;
   margin: 0 auto;
   padding: 10px;
   gap: 0.8rem;
   font-size: var(--fs-medium);
}

#kontakt-info {


 
   overflow: hidden;
   text-align: center;
   margin: 0 auto;
   inline-size: 100vw;
   max-inline-size: 1170px;
   min-height: 60vh;
   height: auto;

}





.kontakt__container {

display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;

}

.kontakt__text{
width: 100%;
max-width: 450px;
height: 100%;
padding:0px 25px 25px 25px;
box-sizing: border-box;
align-items: center;
justify-content: center;
}

.kontakt__text p{
   font-size: larger;


}

.kontakt__adres{

list-style: none;
margin: 0;
padding: 2%;
font-size: 1.2rem;
font-family: var(--ff);
line-height: normal;

}
.kontakt__adres li:first-child {
   font-size: 1.5rem;
   font-family: var(--ff);
  text-decoration: underline;
   text-decoration-color: var(--base-color);
   text-decoration-thickness: 2px;
   text-underline-offset: 5px;
   text-transform: uppercase;
   Font-weight: 600;
   line-height: 1.8;
 
   



}
.kontakt__map {
   padding: 5px;
   box-sizing: border-box;
   background-color: #fafcb87c;
   width: 100%;
   max-width: 650px;
   height: 100%;
   min-height: 300px;
   max-height: 500px;
   overflow: hidden;
   border-radius: 10px;


   }








































/*------------------------------------------------------------------
   	Scrollup
-------------------------------------------------------------------*/

#scroll__btn__phone {
        position: fixed;
        left: 10px;
        bottom: 10px;
        margin: 0;
        z-index: 10000;
        opacity: 0;
        visibility: hidden
      }

      #scroll__btn__phone.off {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .15s ease,visibility 0s .15s;
        -o-transition: opacity .15s ease,visibility 0s .15s;
        transition: opacity .15s ease,visibility 0s .15s
      }
      
      #scroll__btn__phone.on {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity .3s ease;
        -o-transition: opacity .3s ease;
        transition: opacity .3s ease
      }
      
      
      #scroll__btn__phone>span {
        -o-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
        transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out
      }
      
      #scroll__btn__phone>span {
        position: relative;
        display: block;
        inline-size: 48px;
        block-size: 48px;
        line-height: 58px;
        text-align: center;
        background-color: var(--rbb__white);
        opacity: 0.8;
        border: 1px solid var(--rbb__grey);
        overflow: hidden;
        border-radius: 50%;
        -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
        transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out
      }
      
      #scroll__btn__phone>span svg:first-child {
        position: absolute;
        top: 25%;
        left: 25%;
        -webkit-transform: translateX(-50%) translateY(0) rotate(90deg);
        -ms-transform: translateX(-50%) translateY(0) rotate(90deg);
        transform: translateX(-50%) translateY(0) rotate(90deg);
        -webkit-transform-origin: right top;
        -ms-transform-origin: right top;
        transform-origin: right top;
        opacity: 0
      }
      
      #scroll__btn__phone>span svg:last-child {
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
        opacity: 1
      }
      
      #scroll__btn__phone:hover>span svg:first-child {
        -webkit-animation: qodefSliceIn .3s forwards;
        animation: qodefSliceIn .3s forwards
      }
      
      #scroll__btn__phone:hover>span svg:last-child {
        -webkit-animation: qodefSliceOut .3s forwards;
        animation: qodefSliceOut .3s forwards
      }
      
      #scroll__btn__phone span span {
        display: block;
        line-height: inherit
      }
      
      

      #btn__pizza__slice {
        position: fixed;
        right: 10px;
        bottom: 10px;
        margin: 0;
        z-index: 10000;
        opacity: 0;
        visibility: hidden
      }
      
      #btn__pizza__slice.off {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .15s ease,visibility 0s .15s;
        -o-transition: opacity .15s ease,visibility 0s .15s;
        transition: opacity .15s ease,visibility 0s .15s;
      }
      
      #btn__pizza__slice.on {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity .3s ease;
        -o-transition: opacity .3s ease;
        transition: opacity .3s ease;
      }
      
      #btn__pizza__slice>span{
        -o-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
        transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
      }
      
      #btn__pizza__slice>span {
        position: relative;
        display: block;
inline-size: 48px;
        block-size: 48px;
        line-height: 58px;
        text-align: center;
        background-color: var(--base-color);
        opacity: 0.8;
        border: 1px solid var(--rbb__grey);
        overflow: hidden;
        border-radius: 50%;
        -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
        transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
      }
      
      #btn__pizza__slice>span svg:first-child {
        position: absolute;
        top: 15%;
        left:15%;
        -webkit-transform: translateX(-50%) translateY(0) rotate(90deg);
        -ms-transform: translateX(-50%) translateY(0) rotate(90deg);
        transform: translateX(-50%) translateY(0) rotate(90deg);
        -webkit-transform-origin: right top;
        -ms-transform-origin: right top;
        transform-origin: right top;
        opacity: 0;
      }
      
      #btn__pizza__slice>span svg:last-child {
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top;
        opacity: 1;
      }
      
      #btn__pizza__slice:hover>span svg:first-child {
        -webkit-animation: qodefSliceIn .3s forwards;
        animation: qodefSliceIn .3s forwards;
      }
      
      #btn__pizza__slice:hover>span svg:last-child {
        -webkit-animation: qodefSliceOut .3s forwards;
        animation: qodefSliceOut .3s forwards
      }
      
      #btn__pizza__slice span span {
        display: block;
        line-height: inherit;
      }





          /* zzzzzzzzzzzzzzzzzzzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz
    zzzzzzzzz     NAVI KNAPPAR 
    zzzzzzzzz
    zzzzzzzzz     NAVI KNAPPAR 
    zzzzzzzzz
    zzzzzzzzz     NAVI KNAPPAR 
    zzzzzzzzz
    zzzzzzzzz
    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz  */

    
.highlight {
        border-bottom: 4px solid rgba(64, 62, 62, 0.664);
      }
      

.navbar{      
background: #131313;
height: var(--nav-size);
display: flex;
justify-content:center;
align-items: baseline;
align-content: center;
margin: 0;
width: 100vw;
position: sticky;
top: 0;
z-index: 999;


}
    
.navbar__container {
z-index: 1;
background-color: var(--bgcolor);
height: var(--nav-size);
width: 100%;
max-width: 1170px;
padding: 0;
/* text-align: center; */
margin: 0 auto;
display: inline-grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--nav-size);


}      
   

    .navbar__logo {
    
    background-color: transparent;
    grid-column: 1 / 5;
    grid-row: 1/2;
    display: flex;
    }
    

     .navbar__logo img{
    background-color: transparent;
    cursor: pointer;
    text-decoration: none; 
    filter:drop-shadow(5px 2px 2px rgb(0, 0, 0));
    transform: scale(1);
    transition: 0.7 ease-in-out;
  
      }

.navbar__logo img:hover{

        transform: scale(1.1);   

}
    
      .navbar__mobile{
    height: var(--nav-size);
    grid-column: 8 / 13;
    grid-row: 1/2;
    justify-content: flex-end;
    align-items: center;
      align-content:center;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      background-color: transparent;
      padding-right: 5px;
      /* position: absolute;
      top: 0px;
      right: 20px; */
     
    }
    
    
    .navbar__tider {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        background-color: transparent;
    max-width: 100%;
    z-index: 1;
    fill: var(--base-color);
    padding: 0;
    margin:auto 0;
    text-align: center;
    background-color: transparent;
    /* writing-mode: vertical-rl;
    text-orientation: upright; */
    height: var(--nav-size);
    
    align-items: center;

      white-space: nowrap;
      }

      .navbar__tider>div{

height: calc(var(--nav-size) / 2);
padding: 0;
margin: auto 0;
font-family: var(--ff);
text-shadow: var(--text-shadow2);
font-size: var(--fs-p);

block-size: fit-content;
/* inline-size: 30px; */
      }

#veckoapp-idag {
font-family: var(--ff);
text-shadow: var(--text-shadow2);


}





















     .navbar__hamburger {
        background-color: transparent;
        margin: 0;
        text-align: center;
        min-width: var(--nav-size);
        max-width: var(--nav-size);
        cursor: pointer;
        text-decoration: none;
        z-index: 1;
    
     }
      .navbar__toggle {
    text-align: center;
    margin: auto 0;
    padding: 5px 0px;
    width: var(--nav-size);
    height: var(--nav-size);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    z-index: 1;    
    justify-content: center;
    box-sizing: border-box;
  
     }
    
    
     .navbar__toggle.is-active {
        transition: transform 0.5s ease-in-out;
        transform: rotate(-45deg);
      
      }
    
    
    
    .navbar__menu__line {
    background-color: var(--base-color);
    background-size: cover;
    width: 70%;
    height: 5px;
    transform: skew(5deg);
    transition: all .275s;
    
    padding:0px;
    margin: auto 0px;
    border-radius: 7px;
    box-sizing: border-box;
    
    }
    
    .navbar__menu__line.upp {
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
        transform-origin: right;
       
       
        
        
    
    }
    
    .is-active .navbar__menu__line.upp {
        transform: rotate(-90deg) translateX(5px) translateY(2500px);
        transition: 0.55s 0.5s;
    background-color: var(--bgcolor);
    
    }
    
    .is-active .navbar__menu__line {
    background-color: var(--rbb__gul);
    
    }
    .navbar__menu__line.down {
    
        transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57); 
        transform-origin: left bottom;
       
        
    
    
    }
    
    .is-active .navbar__menu__line.down {
        transform: rotate(-90deg) translateX(12px) translateY(25px);
        translate: 2px 17px;
        background-color: var(--rbb__rod);
    }
    
    .navbar__menu {
    
        display: none;
    
    }
    .navbar__menu.active {
        display: grid;
        grid-template-columns: auto;
        background: var(--bgcolor);
        position: absolute;
        top: 100%;
        animation: kommerin 1s ease-in;
        opacity: 0.9;
        z-index: 99;
        height: 80vh;
        width: 90%;
        font-size: 1.5rem;
        text-align: center;
        border-radius: 50px;
        margin: 0 5%;
       align-content: stretch;
       justify-content: stretch;
       align-items: center;
        
    
    
       
        
      }

     
    
    .navbar__item {
    
        font-size: var(--fs-lagom);
        font-family: var(--ff-c);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        
        width: 100%;
        height: 100%;
       
      
      }
      
.navbar__links {

display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
height: 65%;
width: 65%;
outline: none;
background: var(--bgcolor);
border-radius: 15px;
transition: transform 0.3s ease, color 0.3s ease;
color: var(--tint__grey);
text-shadow: 3px 3px var(--shadow__grey);
background-image:
        url(pic/nav__btn.jpg);
background-size: cover;
font-size: var(--fs-large);
font-family: var(--ff-c);


}
      
.navbar__links:hover{
opacity: 1;
font-size: calc(var(--fs-large) + 0.30vw);
/* animation:  fade 0.3s; */

}
    
.navbar__phone {
margin: auto;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
height: 50px;
} 
        
.dryn-dryn{
animation-name: dryn;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
        
        
.dryn-dryn2{
        animation-name: dryn;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        }    
  





/*------------------------------------------------------------------

SECTION FOOTER

SECTION FOOTER
SECTION FOOTER
SECTION FOOTER
-------------------------------------------------------------------*/







footer {

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-self: center;
        margin: 0%;
        padding: 0%;
        position: relative;
        width: 100vw;
        background: transparent;
        min-height: 70px;
        justify-content: space-evenly;
        align-items: stretch;
        white-space: nowrap;
        overflow: hidden;

}

.waves {
            grid-column: 1 / 13;
            grid-row: 1 / 2;
            min-height: 80px;
            max-height: 150px;
            position: relative;

}

.footer__container {
        grid-column: 1 / 13;
        grid-row: 2 / 3;
       background-color:rgb(255, 149, 0); 
         /* background-color:  rgb(228, 216, 184);*/
         display: flex;
         align-items: center;
        align-content: center;
        text-align: center;
        margin: 0;
        justify-content:center ;
        width: 100%;


         

}

.footer__container__parent {


display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
gap: 6px;
max-width: 1170px;
width: 100%;
height: max-content;

} 

.footer__box {
flex:1;
display: flex;
list-style: none;
padding: 0;
margin: 0;
font-family: var(--ff);
font-size: 2vh;
flex: 1 1 200px;
text-align: center;
align-self: center;
min-height: 70px;
background-color: transparent;
border-radius: 30px;
align-content: center;
justify-content: center;
max-width: 200px;
align-self: flex-start;

max-height: 140px;

}


.footerbox__wrap{
   display: flex;
   flex-direction: column;
   align-items:center;
   margin: 0px;
   padding: 10px;
   text-align: center;
   width: 170px;
   /* background-image: linear-gradient(225deg, #ff00007a 0%, #ff5e007a 29%, #fa72037a 67%, #ffc4007a 100%); */
    border-radius: 15px;
    box-sizing: border-box;
    height: 133px;
}


.footerbox__wrap *> span{
        text-align: center;
        letter-spacing: normal;
         color: var(--bgcolor);
         display: block;       
 

         
}

.footerbox__logo{

   display: flex;
   flex-direction: column;
   align-items:center;
   margin: 0px;
   padding: 10px;
   text-align: center;
   width: 170px;
   background: transparent;
    border-radius: 15px;
    box-sizing: border-box;
    height: 133px;
} 
    .footerbox__img{


 max-width: 200px;
 width: 80%;
 max-height: 133px;
 height: 100%;
box-sizing: border-box;
background-image: url(pic/navbar__logo2.png);
background-position: center;
background-size:contain;
background-repeat: no-repeat;
}


.footerbox__titel{
        
        font-size: 1rem;
        height: 1.3rem;

     
    }
.footerbox__text, .footer__box a {

color: var(--bgcolor);
font-family: var(--ff);
height: 1.1rem;
font-size: 0.9rem;
display: inline-block;


}
.footerbox__icon {
height: 37px;
width: 37px;
font-size: 35px;

}



.footer__last{
        color:rgb(247, 247, 247);
  font-size: 12px;
  font-family: var(--ff);
 grid-column: 1 / 13;
grid-row: 3 / 4;
text-align: center;
background-color:  rgb(255, 149, 0);
padding: 10px;
}




.footer__waves {
  position: relative;
  width: 100vw;
  text-align:center;
  background: linear-gradient(180deg, #151515 0%, rgba(235, 183, 13, 0.562) 50%, rgba(243, 179, 2, 0.411)100%);
  color:rgb(119, 99, 0);
  overflow: hidden;
  grid-column: 1 / 13;
  grid-row: 1 / 2;
}


.wavesa {
  position: relative;
  width: 100%;
  height: clamp(80px, 10vh, 130px);
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:60px;

}


/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 7s;

}
.parallax > use:nth-child(2) {
   animation-delay: -3s;
   animation-duration: 8s;
 
 }
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 11s;
}
.parallax > use:nth-child(4) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(5) {
  animation-delay: -6s;
  animation-duration: 16s;
}



/* 
@media screen and (max-width: 600px)  {
   
.footer__box{
   flex: 0 0 80%;
   max-width: 300px;

}

}  */









/*------------------------------------------------------------------

ANIMATIONS

-------------------------------------------------------------------*/

@keyframes move-forever {
        0% {
         transform: translate3d(-90px,0,0);
        }
        100% { 
          transform: translate3d(85px,0,0);
        }
      }

      @keyframes glowing {
        0% {background-position: 0 0;}
        50% {background-position: 400% 0;}
        100% {background-position: 0 0;}
      }


      
      @keyframes dryn {
        
        from {
            transform:rotate3d(0, 0, 1, 0deg);
        }
        20%, 32%, 44%, 56%, 68% {
            transform: rotate3d(0, 0, 1, 0deg);
        }
        23%, 35%, 47%, 59%, 71% {
            transform: rotate3d(0,0,1,15deg);
        }
        26%, 38%, 50%, 62%, 74% {
            transform: rotate3d(0,0,1,0deg);
        }
        29%, 41%, 53%, 65%, 77% {
            transform: rotate3d(0,0,1,-15deg);
        }
        80% {
            transform:rotate3d(0, 0, 1, 0deg);
        }
    
}



@keyframes qodefSliceIn {
0% {
        transform: translateX(-100%) translateY(0) rotate(90deg);
        opacity: 0;
}
100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
}
}
@keyframes qodefSliceOut {
0% {
        transform: scale(1);
        opacity: 1;
}
100% {
        transform: scale(0);
        opacity: 0;
}
}



                
      @keyframes juhu {
        0% {
     
                -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                -webkit-transform-origin:0% 0%;
                transform-origin:  0% 0%;
                -webkit-transform: translate(0,0%) rotate(0deg) scale(0.4);
                transform: translate(0,0%) rotate(0deg) scale(0.4);
                opacity: 1;
            }
        
            20%,60% {
                -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                -webkit-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
                -webkit-transform: translate(5%,5%) rotate(90deg) scale(1);
                transform: translate(5%,5%) rotate(90deg) scale(1);
                opacity: 1;
            }
        
            40%{
                -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                opacity: 1;
                -webkit-transform-origin: 5% 5%;
                transform-origin: 5% 5%;
                -webkit-transform:translate(2%,10%) rotate(77deg) scale(1);
                transform:translate(2%,10%) rotate(77deg) scale(1);
            }
            80%{
                -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
                opacity: 1;
                -webkit-transform-origin: 10% 5%;
                transform-origin: 10% 5%;
                -webkit-transform:translate(2%,10%) rotate(70deg) scale(1);
                transform:translate(2%,10%) rotate(70deg) scale(1);  
            }
        
            to {
                
                opacity: 0;
                -webkit-transform: translate3d(0%,95vh,0) scale(0.1);
                transform: translate3d(0%,95vh,0) scale(0.1);
            }
         
           
        }
        
@keyframes juhu2 {
        0% {
                opacity: 0;
                -webkit-transform: translate(0%,0%) rotate(0deg) scale(0.2);
                transform: translate(0%,0%) rotate(0deg) scale(0.2);
            }
        
            100% {
                -webkit-transform:translate(0%,0%) rotate(365deg) scale(1);
                transform:translate(0%,0%) rotate(365deg) scale(1);
                opacity: 1;
            }  
        

        }    
        
@keyframes juhu2a {
   0% {
           opacity: 0;
           -webkit-transform: translate(0%,0%) rotate(0deg) scale(0.2);
           transform: translate(0%,0%) rotate(0deg) scale(0.2);
       }
   
       100% {
           -webkit-transform:translate(0%,0%) rotate(-355deg) scale(1);
           transform:translate(0%,0%) rotate(-355deg) scale(1);
           opacity: 1;
       }  
   

   }    
        
        















/*------------------------------------------------------------------

COPYRIGHT

-------------------------------------------------------------------*/







         /*------------------------------------------------------------------
COOL THINGS
-------------------------------------------------------------------


.gradient__yellow__orange {
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);

}
.gradient__yellow__red {
       background-image: linear-gradient(to top, #f8d256 0%, #ffc40c 20%,  #ffa600 30%, #ff7700 45%, #ff251a 56%, #e31212 71%, rgb(255, 0, 0) 84%, #b00000 100%);
}

*/


@media screen and (min-width: 600px) {

        
        .navbar__menu {
        display: inline-flex;
        justify-content: space-evenly;
         grid-column: 4 / 13;
        grid-row: 1/2;
        align-self: center;
        align-items: space-evenly;
        align-content: space-evenly;
        text-align: center;
        white-space: nowrap;
        
        
        } 
        
            .navbar__mobile {
                 display: none;
        
        }
        
        .navbar__logo {
            grid-column: 1 / 4;
            grid-row: 1/2;
        }
         

        .navbar__item {
                flex: 1 1 auto;
        width: auto;
        height: var(--nav-size);
        outline: none;
        transition: all 0.3s ease;
        padding: 0px;
        margin: 0px 0px;
        
        }
        
         
        .navbar__links {
        
        text-align: center;
        width: auto;
        background: transparent;
        font-size: var(--fs-medium);
        font-family: var(--ff-c);
        
        }
        
        .navbar__links:hover {
            transition: transform 0.2s ease-in-out;
            transform: rotate(-4deg);
            font-size: calc(var(--fs-medium) + 0.30vw);
        }
    

/* button */
.btn {
        margin: 10px;
        padding: 15px 15px;
        border: none;
        outline: none;
        color: var(--base-color);
        text-shadow: var(--text-shadow2);
        cursor: pointer;
        position: relative;
        z-index: 0;
        border-radius: 12px;
        font-size: var(--fs-medium);
        font-family: var(--ff-c);
      }
      .btn::after {
        content: "";
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        left: 0;
        top: 0;
        border-radius: 10px;
      }
      /* glow */
      .btn::before {
        content: "";
        background: linear-gradient(
          45deg,
          #FF0000, #FF7300, #FFFB00, #48FF00,
          #00FFD5, #3349b8, #FF00C8, #FF0000
        );
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 600%;
        z-index: -1;
        width: calc(100% + 4px);
        height:  calc(100% + 4px);
        filter: blur(8px);
        animation: glowing 20s linear infinite;
        transition: opacity .3s ease-in-out;
        border-radius: 10px;
        opacity: 0;
      }
      
     
      
      /* hover */
      .btn:hover::before {
        opacity: 1;
      }
      
      .btn:active:after {
        background: transparent;
      }
      
      .btn:active {
        color: transparent;
        font-weight: bold;
      }
      
      
      
      
      
    .navbar__none {
    position: absolute;
    top:-1000px;
    right: -500px;
      }
}




#ttestpage {
        margin: 0 auto;
        padding: 0%;
        height: 100%;
        
}



      #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: red;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
      }
      
      #myBtn:hover {
        background-color: #555;
      }