@font-face {
  font-family: Josefin Slab;
  src: url("JosefinSlab-Regular.ttf");
}

html {
  overflow-x: hidden;
}

body {
  background-color: black;
  background-image: url(../tree_new.gif);
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  height: auto;
  position: absolute;
  left: 0%;
  top: 0%;
    font-family: "Josefin Slab", "Courier New", Courier, monospace;
}

.top {
  position: relative;
  width:auto;
  left:0;
  }

.top-text {
  position: absolute;
  z-index:2;
  top:0.5%;
  width:100%;
}

  .leaf1 img {
    height: auto;
    width: 35%;
    margin-top:35%;
    opacity: 0.4;
    margin-left: 10%;
    -webkit-transition: .5s all;   
    -moz-transition: .5s all;   
    -ms-transition: .5s all;   
    -o-transition: .5s all;   
    transition: .5s all;   
    transition-delay: 0.5s; 
    }

    .leaf1 img:hover {
      opacity: 1.0;
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
    }

  .leaf2 img {
    height: auto;
    width: 25%;
    margin-top:-5%;
    margin-bottom:20%;
    opacity: 0.3;
    margin-left: 10%;
    -webkit-transition: .5s all;   
    -moz-transition: .5s all;   
    -ms-transition: .5s all;   
    -o-transition: .5s all;   
    transition: .5s all;   
    transition-delay: 0.5s; 
    }

    .leaf2 img:hover {
      opacity: 1.0;
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
    }

    .leaf3 img {
      height: auto;
      width: 25%;
      margin-top:-10%;
      margin-bottom:20%;
      opacity: 0.4;
      margin-left: 40%;
      -webkit-transition: .5s all;   
      -moz-transition: .5s all;   
      -ms-transition: .5s all;   
      -o-transition: .5s all;   
      transition: .5s all;   
      transition-delay: 0.5s; 
      }
  
      .leaf3 img:hover {
        opacity: 1.0;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
      }

        .leaf4 img {
          height: auto;
          width: 25%;
          margin-top:-10%;
          margin-bottom:20%;
          opacity: 0.2;
          margin-left: 70%;
          -webkit-transition: .5s all;   
          -moz-transition: .5s all;   
          -ms-transition: .5s all;   
          -o-transition: .5s all;   
          transition: .5s all;   
          transition-delay: 0.5s; 
          }
      
          .leaf4 img:hover {
            opacity: 1.0;
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
          }

          .leaf5 img {
            height: auto;
            width: 25%;
            margin-top:-20%;
            margin-bottom:10%;
            opacity: 0.3;
            margin-left: 50%;
            -webkit-transition: .5s all;   
            -moz-transition: .5s all;   
            -ms-transition: .5s all;   
            -o-transition: .5s all;   
            transition: .5s all;   
            transition-delay: 0.5s; 
            }
        
            .leaf5 img:hover {
              opacity: 1.0;
              -webkit-transition-delay: 0s;
              -moz-transition-delay: 0s;
              -ms-transition-delay: 0s;
              -o-transition-delay: 0s;
              transition-delay: 0s;
            }


          .leaf6 img {
            height: auto;
            width: 25%;
            margin-top:-160%;
            margin-bottom:10%;
            opacity: 0.3;
            margin-left: 10%;
            -webkit-transition: .5s all;   
            -moz-transition: .5s all;   
            -ms-transition: .5s all;   
            -o-transition: .5s all;   
            transition: .5s all;   
            transition-delay: 0.5s; 
            }
        
            .leaf6 img:hover {
              opacity: 1.0;
              -webkit-transition-delay: 0s;
              -moz-transition-delay: 0s;
              -ms-transition-delay: 0s;
              -o-transition-delay: 0s;
              transition-delay: 0s;
            }

            .leaf6mob img {
              height: auto;
              width: 25%;
              margin-top:-160%;
              margin-bottom:10%;
              opacity: 0.3;
              margin-left: 10%;
              -webkit-transition: .5s all;   
              -moz-transition: .5s all;   
              -ms-transition: .5s all;   
              -o-transition: .5s all;   
              transition: .5s all;   
              transition-delay: 0.5s;
              display: none;
              }
          
              .leaf6 img:hover {
                opacity: 1.0;
                -webkit-transition-delay: 0s;
                -moz-transition-delay: 0s;
                -ms-transition-delay: 0s;
                -o-transition-delay: 0s;
                transition-delay: 0s;
              }

            .leaf7 img {
              height: auto;
              width: 25%;
              margin-top:-160%;
              margin-bottom:5%;
              opacity: 0.3;
              margin-left: 60%;
              -webkit-transition: .5s all;   
              -moz-transition: .5s all;   
              -ms-transition: .5s all;   
              -o-transition: .5s all;   
              transition: .5s all;   
              transition-delay: 0.5s; 
              }
          
              .leaf7 img:hover {
                opacity: 1.0;
                -webkit-transition-delay: 0s;
                -moz-transition-delay: 0s;
                -ms-transition-delay: 0s;
                -o-transition-delay: 0s;
                transition-delay: 0s;
              }

              .leaf8 img {
                height: auto;
                width: 20%;
                margin-top:10%;
                margin-bottom:0%;
                opacity: 0.3;
                margin-left: 20%;
                -webkit-transition: .5s all;   
                -moz-transition: .5s all;   
                -ms-transition: .5s all;   
                -o-transition: .5s all;   
                transition: .5s all;   
                transition-delay: 0.5s; 
                }
            
                .leaf8 img:hover {
                  opacity: 1.0;
                  -webkit-transition-delay: 0s;
                  -moz-transition-delay: 0s;
                  -ms-transition-delay: 0s;
                  -o-transition-delay: 0s;
                  transition-delay: 0s;
                }

                .leaf9 img {
                  height: auto;
                  width: 15%;
                  margin-top:0%;
                  margin-bottom:0%;
                  opacity: 0.3;
                  margin-left: 60%;
                  -webkit-transition: .5s all;   
                  -moz-transition: .5s all;   
                  -ms-transition: .5s all;   
                  -o-transition: .5s all;   
                  transition: .5s all;   
                  transition-delay: 0.5s; 
                  }
              
                  .leaf9 img:hover {
                    opacity: 1.0;
                    -webkit-transition-delay: 0s;
                    -moz-transition-delay: 0s;
                    -ms-transition-delay: 0s;
                    -o-transition-delay: 0s;
                    transition-delay: 0s;
                  }
h1  {
  position: absolute;
  letter-spacing: 8px;
    font-size: 3em; 
    color: rgb(27, 3, 17);
    font-family: Josefin Slab;
    font-weight:100;
    text-shadow: 3px 3px 1px rgba(114, 9, 79, 0.308);
    margin-left: 2%;
    z-index:1;
    }

 h2  {
    font-size: 2.25em;
    letter-spacing: 6px; 
    color: rgb(83, 77, 80);
    font-family: Josefin Slab;
    font-weight:100;
    text-shadow: 3px 3px 0.5px rgba(0, 0, 0, 0.315);
    margin-top:10vh;
    margin-left:80px;
    }

    .text1 {
    margin-left:65%;
    margin-top:0%;
    margin-bottom:0%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 40px 25px rgba(255, 255, 255, 1);
  }

  .text2 {
    margin-left:5%;
    margin-top:0%;
    margin-bottom:0%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 40px 25px rgba(255, 255, 255, 1);
  }

  .text3 {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 40px 25px rgba(255, 255, 255, 1);
    display: none;
  }

  .text4 {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 40px 25px rgba(255, 255, 255, 1);
    display: none;
  }

    h3  {
      font-size: 1.5em; 
      color: rgb(0, 0, 0);
      font-family: Josefin Slab;
      font-weight:100;
      text-align: justify;
      }

      h4  {
        font-size: 1.5em; 
        color: rgb(0, 0, 0);
        font-family: Josefin Slab;
        font-weight:100;
        text-align: justify;
        }

#desktopvideo {  
  box-shadow: 0px 0px 400px 220px rgba(255, 255, 255, 0.938);
  z-index: 1;
  margin-top:28vh;
  width: 100%;
  display: grid;
  -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 8s; /* Firefox < 16 */
   -ms-animation: fadein 8s; /* Internet Explorer */
    -o-animation: fadein 8s; /* Opera < 12.1 */
}

#mobilevideo {  
  box-shadow: 0px 0px 400px 420px rgba(255, 255, 255, 0.938);
  z-index: 1;
  top:28vh;
  width: 100%;
  display: none;
  -webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 8s; /* Firefox < 16 */
   -ms-animation: fadein 8s; /* Internet Explorer */
    -o-animation: fadein 8s; /* Opera < 12.1 */
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

.plastic1 img{
  height: auto;
  width: 30%;
  margin-left:30%;
  z-index: 5;
  opacity: 0.3;
  margin-bottom: 10%;
  margin-top: 60%;
  }

  .plastic1 img:hover {
    opacity: 0.99;
     }
 
     .plastic2 img{
      height: auto;
      width: 20%;
      left:40%;
      z-index: 6;
      position: absolute;
      opacity: 0.3;
      margin-bottom: 10%;
      margin-top: 0%;
      }
    
      .plastic2 img:hover {
        opacity: 0.99;
         }

         .plastic3 img{
          height: auto;
          width: 20%;
          right:20%;
          z-index: 6;
          position: absolute;
          opacity: 0.3;
          margin-right: 40%;
          margin-bottom: 40%;
          margin-top: -65%;
          }
        
          .plastic3 img:hover {
            opacity: 0.99;
             }

             .plastic4 img{
              height: auto;
              width: 20%;
              right:20%;
              z-index: 6;
              position: absolute;
              opacity: 0.3;
              margin-right: -10%;
              margin-bottom: 10%;
              margin-top: -10%;
              }
            
              .plastic4 img:hover {
                opacity: 0.99;
                 }
                 
                 .plastic5 img{
                  height: auto;
                  width: 20%;
                  left:20%;
                  z-index: 6;
                  position: absolute;
                  opacity: 0.3;
                  margin-bottom: 10%;
                  margin-top: 10%;
                  }
                
                  .plastic5 img:hover {
                    opacity: 0.99;
                     }
                     
     .logos img{
      height: auto;
      width: 20%;
      margin-left:10%;
      z-index: 5;
      opacity: 0.99;
      margin-top: 60%;
      }

      .eulogo img{
        height: auto;
        width: 20%;
        margin-left:40%;
        z-index: 5;
        opacity: 0.99;
        margin-top: 10%;
        margin-bottom:25%;
        }

        h5  {
          font-size: 1em; 
          color: rgb(255, 255, 255);
          font-family: Josefin Slab;
          font-weight:100;
          text-align: justify;
          width: 50%;
          margin-top: 5%;
          margin-left: 25%;
          margin-bottom: 5%;
          }


          @media screen and (max-width:1200px) {

            h3  {
              font-size: 1.15em; 
              }
  
              h4  {
                font-size: 1.15em; 
                }
            } 

          @media screen and (max-width:1024px) {


            h1  {
              margin-top:15%;
              }
            
            h2  {
              margin-top:20%;
              }

          .leaf1 img {
            margin-top:5%;
            margin-bottom:0%;
            }

          .leaf2 img {
            margin-top:0%;
            margin-bottom:0%;
            }
      
            .leaf3 img {
              margin-top:0%;
              margin-bottom:0%;
              }
      
              .leaf4 img {
                margin-top:0%;
                margin-bottom:0%;
                }
      
                .leaf5 img {
                  margin-top:0%;
                  margin-bottom:0%;
                  }
      
                  .leaf6 img {
                    margin-top:0%;
                    margin-bottom:0%;
                    }
      
                    .leaf7 img {
                      margin-top:0%;
                      margin-bottom:0%;
                      }
      
                      .leaf8 img {
                        margin-top:0%;
                        margin-bottom:0%;
                        }
      
                        .leaf9 img {
                          margin-top:0%;
                          margin-bottom:0%;
                          }

          h3  {
            font-size: 1.25em; 
            }

            h4  {
              font-size: 1.25em; 
              }
          } 
          
          
          @media screen and (max-width:991px) {   
                  
          body {
            background-image: url(../tree_mobile_new.gif);
          }

  .leaf1 img {
    margin-top:120%;
    margin-bottom:0%;
    }
  
    .leaf2 img {
      margin-bottom:5%;
      }

      .leaf3 img {
        margin-bottom:5%;
        }

        .leaf4 img {
          margin-bottom:5%;
          }

          .leaf5 img {
            margin-bottom:5%;
            }

            .leaf6 img {
              margin-bottom:5%;
              display: none;
              }

              .leaf6mob img {
                margin-top: 0%;
                margin-bottom:5%;
                display: unset;
                }

              .leaf7 img {
                margin-bottom:5%;
                }

                .leaf8 img {
                  margin-bottom:5%;
                  }

                  .leaf9 img {
                    margin-bottom:5%;
                    }

h1  {
  font-size: 2em; 
  margin-top:5%;
  margin-left: 2%;
  }

h2  {
  font-size: 1.5em; 
  margin-top:15%;
  margin-left:2%;
  }

  .text1 {
    display: none;
  }

  .text2 {
    display: none;
  }


.text3 {
  margin-left:5%;
  width: 90%;
  margin-top:20%;
  margin-bottom:10%;
  display: inherit;
  }

  h3  {
    font-size: 1.5em; 
    }

      .text4 {
        width: 90%;
        margin-left:5%;
        margin-top:20%;
        margin-bottom:10%;
        display: inherit;
        }

    h4  {
      font-size: 1.5em; 
      }

      h5  {
        font-size: 0.6em; 
        width: 90%;
        margin-top: 10%;
        margin-left: 5%;
        margin-bottom: 5%;
        }
}

@media screen and (max-width:900px){
  
  h1  {
    font-size: 2em; 
    margin-top:5%;
    margin-left: 2%;
    }
  
  h2  {
    font-size: 1.5em; 
    margin-left:2%;
    margin-top:15%;
    }

    .leaf1 img {
      margin-top:160%;
      }

      #desktopvideo {  
        display: none;
      }

      #mobilevideo {  
        display: inherit;
      }
    }

  @media screen and (max-width:750px) {  

    h1  {
      font-size: 1.25em; 
      margin-left: 2%;
      }
    
    h2  {
      font-size: 1.25em; 
      margin-top:10%;
      margin-left:2%;
      }

                h3  {
                  font-size: 0.8em; 
                  }
              
                  h4  {
                    font-size: 0.8em; 
                    }
      } 
    


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

    h1  {
      margin-top:1%;
      font-size: 1.5em; 
      margin-left: 2%;
      }
    
    h2  {
      font-size: 1.25em; 
      margin-top:15%;
      margin-left:2%;
      }

      .leaf1 img {
        margin-top:100%;
        }

        .leaf2 img {
          margin-top:10%;
          }

                h3  {
                  font-size: 0.8em; 
                  }
              
                  h4  {
                    font-size: 0.8em; 
                    }
      } 

    @media screen and (max-height:450px) {
      .top-text  {
        margin-top:0%;
        }   
     
      h1  {
        margin-top:0%;
        }
      h2  {
        margin-top:5%;
        }
        .leaf1 img {
          margin-top:120%;
          }
  
          .leaf2 img {
            margin-top:20%;
            }
      
            .leaf3 img {
              margin-top:20%;
              }
      
              .leaf4 img {
                margin-top:20%;
                }
      
                .leaf5 img {
                  margin-top:20%;
                  }
      }