@charset "UTF-8";
/* CSS Document */

   :root {
        --edge-position: 15%;
        --proj-width: 5.5%;     
        --proj-margin: calc((100% - calc(12*(var(--proj-width))))/11);    
    }
    /* 
    * { box-sizing: border-box; }
    */

    #products-container {
        width: 100%;
        height: 8vw;
        max-height: 500px;
        //border: 1px solid green;
        position: relative;
        overflow: hidden;
        margin: 60px 0 0 0;
    }          
    .center {
        position: absolute;
        top: var(--edge-position);
        left: 50%;
        -webkit-transform: translate(-50%,0);
        -moz-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        -o-transform: translate(-50%,0);
        transform: translate(-50%,0);
        //border: 1px solid orange;
        display: block;
        width: 100%;
        min-width: 420px;
    }  

    .product {
        position: relative;
        padding: 0;
        width: var(--proj-width);
        min-width:20px;
        max-width:100px;
        display: inline-block;
        //border: 1px solid red;
        margin: 0 0 0 var(--proj-margin); 
        float: left;        
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease; 
        transition: all .3s ease;
    } 
    .product:first-of-type {
        margin: 0 0 0 calc(2.1*var(--proj-margin));
    } 
    .circle-crop {
        border-radius: 50%;
        width: 100%;   
    }
     .product img, #banner img {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease; 
        transition: all .3s ease;
      } 
      .product:hover img {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);        
        transform: scale(1.2);
      }  
        
    .product:last-of-type {
        margin: 0 0 0 calc(-1.78*var(--proj-margin));
        //margin: 0 0 0 calc(-1.66*var(--proj-margin));
    }
    .banner-crop {
        width: auto;
        //border: 1px solid magenta;
        }
    #logo { 
        //left: -70vw;
        left: -60vw;
        z-index: 10;
        //border: 3px solid magenta;
    }
.slide {
        animation: mymove 2s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-delay: 1s;
        animation-fill-mode: both;
    }

    #banner {
        z-index: 11;
        opacity: 0;
   }
.fadebanner {
        animation: fadein 2s;
        animation-timing-function: ease-out;
        animation-delay: 3s;
        animation-fill-mode: both;
}

      #logo:hover img {
          transform: scale(1.0);

      } 
    #banner:hover img {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);     
        transform: scale(1.05);
      }

    @-webkit-keyframes mymove {
      from {left: -60vw;}
      to {left: 0;}
    }

    @-webkit-keyframes fadein{
      from {opacity: 0;}
      to {opacity: 1;}
    }
     @keyframes mymove {
      from {left: -60vw;}
      to {left: 0;}
    }

    @keyframes fadein{
      from {opacity: 0;}
      to {opacity: 1;}
    }