/* =============================================================================
   Site variables
   ========================================================================== */

@light: #FFF;
@dark: #00042A;
@accent: #7C9AC0;
@contentBg: rgb(0, 1, 39);
@contentBgAlpha: fade(@contentBg, 30%);

/* =============================================================================
   Site Styles
   ========================================================================== */
html, body { height: 100% }

body {
   
   background-image: url('../images/sfondoColoreCellcare.jpg');
   background-size: cover;
   background-color: @dark;
   background-repeat: no-repeat;
   background-attachment: fixed;
   font-family: "Lato", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   margin: 0;
    
   img {
      
      max-width: 100%;
      
   }//img
   
   .accent {
      
      color: @accent;
      
   }//fade-in
   
   .fade-in-bottom,.fade-in-top {

      opacity: 0;
      scroll-behavior: smooth;

   }//.fade-in-bottom,.fade-in-top
   
   .youtube-video-container {

      position: relative;
      overflow: hidden;
      width: 100%;

   }
   
   .youtube-video-container::after {

      display: block;
      content: "";
      padding-top: 56.25%;

   }
   
   .youtube-video-container iframe {

      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

   }
   
   #sfondoVideo {
      
      object-fit: cover;
      position: absolute;
      width: 100vw;
      height: 90vh;
      height: 90svh;
      top: 0;
      left: 0;
      z-index: 0;
  
   } //sfondoVideo

   #menu {
      
      position: fixed;
      z-index: 1;
      text-align: center;
      width: 100vw;
      //background-color: fade(@dark, 80%);
      
      .container {
         
         position: relative;
      
         a {
            
            color: @light;
            text-decoration: none;
            font-size: 1.063em;
            line-height: 4em;
            padding: 0.25em 0.5em;
            text-transform: uppercase;
            transition: all .6s;
            &:hover {
               
               background-color: @light;
               color: @dark;
               
            } //&:hover 
              
            &#logoBioair {
                  
               img {
                  
                  height: 3em;
                  width: auto;
                  margin: 0.5em 0;
                  
               }//img
               
               &:hover {
         
                  background-color: transparent;
         
               } //&:hover 
   
            }//logoBioair

         } //a 

      }//container
      
   }//menu
   
   #mobileContainer {
      
      display: none;
      z-index: 5;
      position: fixed;
      
      nav {

         height: 4.063em;
         
         #menuToggle {

            display: flex;
            flex-direction: column;
            position: relative;
            top: 0.5em;
            left: 0.5em;
            z-index: 5;
            -webkit-user-select: none;
            user-select: none;
            background-color: fade(@dark, 80%);
            padding: 0.75em 0.75em 0.45em 0.75em;
            
            input {
               display: flex;
               width: 2em;
               height: 2em;
               position: absolute;
               cursor: pointer;
               opacity: 0;
               z-index: 6;

            }//input
            
            span {

               display: flex;
               width: 1.813em;
               height: 0.188em;
               cursor: pointer;
               margin-bottom: 0.313em;
               position: relative;
               background: @light;
               border-radius: 0.188em;
               z-index: 5;
               transform-origin: 0.313em 0em;
               transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
                    
               &:first-child {
               
                  transform-origin: 0% 0%;
               
               }//&:first-child
               
               &:nth-last-child(2) {
               
                  transform-origin: 0% 100%;
               
               }//&:nth-last-child(2)
               

            }//span

            &:has(> input:checked) {
            
               background-color: fade(@dark, 0%);   
            }

            
            input:checked ~ span {
            
               opacity: 1;
               transform: rotate(45deg) translate(0, 0);
               
               &:nth-last-child(3) {
                  opacity: 0;
                  transform: rotate(0deg) scale(0.2, 0.2);
               }//:nth-last-child(3)
               
               &:nth-last-child(2) {
                  transform: rotate(-45deg) translate(0, 0);
               }
            
            }//input:checked ~ span
            
            #mobileMenu {

               position: absolute;
               top: -0.5em;
               left: -0.5em;
               width: 100vw;
               height: auto;
               //box-shadow: 0 0 10px fade(@dark, 80%);
               margin: 0;
               padding: 0;
               padding-top: 3.5em;
               padding-bottom: 1.5em;
               scroll-padding-bottom: : 1em;
               background-color: fade(@dark, 80%);
               -webkit-font-smoothing: antialiased;
               transform-origin: 0% 0%;
               transform: translate(-100vw, 0);
               transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
               list-style: none;
               
               li {

                  padding:  0;
                  transition-delay: 2s;
                  
                  a {

                     color: @light;
                     text-decoration: none;
                     font-size: 1.063em;
                     line-height: 3em;
                     padding: 0.25em 0.5em;
                     text-transform: uppercase;
                     transition: all .6s;
                     margin-left: 2em;

                     
                     
                     &#logoBioair {
                           
                        img {
                           
                           height: 3em;
                           width: auto;
                           margin: 0.5em 0;
                           
                           &:hover {
                     
                              background-color: transparent;
                     
                           } //&:hover 
                           
                        }//img
                        
                     }//logoBioair

                  } //a 

               }//li

            } //#mobileMenu
            
            input:checked ~ #mobileMenu {

               transform: none;

            }
            

         }//#menuToggle

      } //nav
      
   } //#mobileContainer

   #first {
      
      // background-image: url('../images/sfondoColoreCellcare.jpg');
      background-size: cover;
      background-origin: left top;
      background-repeat: no-repeat;
      width: 100vw;
      height: 90vh;
      height: 90svh;
      position: relative;
      
      
      #arrowDown {
         
         position: absolute;
         top: 80svh;
         text-align: center;
         width: 100%;
         
         img {
            
            max-width: auto;
            margin-left: auto;
            margin-right: auto;
            height: 2em;
            z-index: 3;

         } //img
         
      } //arrowDown
      
      
   }//first
   
   .centerHeader {
         
      height: 90vh;
      height: 90svh;
      width: 100vw;
      align-items: center;
      align-content: center;
      display: flex;
      left: 0;
      top: 0;
      position: absolute;
   
      #logoCellcare {
         
         text-align: center;
            
         h1 {
   
            display: none;
   
         }//h1
   
         h2 {
            
            font-size: 2.8em;
            font-weight: 900;
            margin: 0.2em 0;
            color: @accent;
            
         } //h2
   
         h3 {
            
            font-size: 1.238em;
            font-weight: 600;
            text-transform: uppercase;
            margin: 0.2em 0;
            color: @light;
            
         }//h3
         
      }//logoCellcare 
      
   
   }//centerHeader  

   .content {
      background-color: @contentBgAlpha;
      color: @light;
      margin: 6em 0;
      display: flex;
      align-items: center;
      position: relative;
      padding: 3.5em 0;
      
      .container {

         h2 {
            
            font-size: 2.13em;
            color: @accent;
            text-transform: uppercase;
            
         } //h2
         
         h3 {
            
            font-size: 2.13em;
            text-transform: uppercase;
            
         } //h3
         
         p {
            
            font-size: 1.2em;
            
         } //p
         
         a {
            
            color: @accent;
            text-decoration: underline;
            
            &.button {
               
               text-decoration: none;
               font-size: 1.3em;
               line-height: 3em;
               margin: 0.5em 0;
               border: 0.125em solid @light;
               border-radius: 2em;
               padding: 0.3em 1em;
               color: @light;
               transition: 0.5s;               
               &:hover {
                  
                  color: @dark;
                  background-color: @light;
                  
               }//hover
               
            }//button
            
         }//a

      }//.container 

      &#video {
         
         margin-top: 1em;
         padding-top: 1em;
         text-align: center;
         
      } //&#video
         
      &#download, &#dimensions {
         
         text-align: center;
         
         .d-flex {
            
            align-items: end;
            
         }//d-flex
         
      }//download dimensions
      
      &#dimensions {
         
         h3 {
            
            margin-right: 1em;
            
         }//h3
         
      }//dimensions
      
      &#distributor {

         h3 {

            font-size: 2em;
            text-transform: uppercase;
            color: @light;
            line-height: 1em;
            font-weight: 200;
            margin: 0;
            
            &::first-line {
               
               font-weight: 700;
               color: @accent;
               
            }//::first-line

         }//h3
         
         img {
            
            margin-bottom: 1em;
            
         } //img

      } //distributor
      
   }//.content
   
   #footer {
      
      color: @light;
      padding-top: 2em;
      padding-bottom: 2em;
      text-align: center;
      font-size: 1em;
      line-height: 1.875em;
      background-color: @dark;
      
      img {
         
         width: auto;
         //max-width: 100%;
         
      } //img
      
      a {
         
         color: @light;	
         
      }

   } // footer 

} // body

/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    right: 30px;
    bottom: 30px;
    max-width: 375px;
	background-color: @contentBgAlpha;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.25);
    margin-left: 30px;
    font-family: system-ui;
    z-index: 100;

	h4 {
		
		margin-top: 0;
		color: @accent;
	    font-size: 18px;
	    font-weight: 700;
	    margin-bottom: 5px;
	    text-transform: uppercase
	}
	
	h5 {

         color: @accent;
         font-size: 15px;
         font-weight: 500;
         margin-bottom: 10px;

   }
	p, ul {
		
	    color: @light;
		font-size: 15px;
		line-height: 1.5em;
		
	}
	p:last-child {
		
    	margin-bottom: 0;
		text-align: right;
		
	}
	li {
		
    	width: 49%;
		display: inline-block;
		
	}
	a {

         text-decoration: none;
         color: @accent;
         font-size: 15px;
         padding-bottom: 2px;
         transition: all 0.3s ease-in;
         
         &:hover {
         
            color: @light;
            transition: all 0.3s ease-in;
         
         }
         
	}	

	button,
	button#ihavecookiesBtn {

      border: none;
      font-weight: 700;
      color: @dark;
      text-decoration: none;
      background-color: @accent;
      border: 3px solid @accent;
      font-size: 1em;
      padding: 7px;
      border-radius: 10px;
      margin-left: 15px;
      margin-bottom: 15px;
      cursor: pointer;
      transition: all 0.3s ease-in;

	}
	button:hover {

	    background: transparent;
		color: @accent;
	    transition: all 0.3s ease-in;

	}
	button#gdpr-cookie-advanced {

      background: transparent;
      border: 3px solid @accent;
      color: @accent;

	}
	button:disabled {

	    opacity: 0.3;

	}
	input[type="checkbox"] {

	    float: none;
	    margin-top: 0;
	    margin-right: 5px;

	}
}

@media (max-width: 1200px) {
   
   body {
      
      #menu {
         
         font-size: 0.9em;
         
      } // #menu
      
   } // body
   
}

@media (max-width: 992px) {

   body {
      
      font-size: 15px;

      
   } // body

}

@media (max-width: 768px) {

   body {

     font-size: 13px;
      
      #menu {
         
         display: none;
         font-size: 1.5em;
         
      } // #menu
      
      #mobileContainer {
         
         font-size: 1.5em;
         display: inherit;
         
      } //#mobileContainer

      #first {
         

         #logoCellcare {
            
            .centerHeader {
   
               .logoMargin {
                  
                  margin: 0 1.5em;
                  
      
               }//logoMargin
               
            }//centerHeader
            
         }//logoCellcare
         #logoBioair {

            top: 70vh;
            
         }
      } // #first
      
   } // body

}


@media (max-width: 576px) {

   body {

   

   } // body
}