:root {
  --color1: #3498DB;
  --color1_mix: 102, 190, 221;
  --color1_orb: 0, 239, 255;
  --color2: #76a9cb;
  --color3: #41799f;
  --color4: #c3c3c3;
  --color5: #FFFfff;
  --color6: #e97b7a;
  --color4_mix: 195, 195, 195;
}
body .blob,
body .drop{
  background: var(--color6)
}
body .orb{
   background-color: rgba(var(--color1_orb), 0.5);
 }
body .menu-main-menu-container #menu-main-menu li a,
body .site-header a.full-menu-item,
body .site-footer a.contact.btn.link{
   background-color: rgba(var(--color1_mix), 0.5);
 }
.color-Selector input{
  color: var(--color1)
}
polygon.color1{
  fill: var(--color1)
}
polygon.color2{
  fill: var(--color2)
}
body .hex-container{
  background-color: var(--color3)
}
polygon.color3{
  fill: var(--color3)
}
.site-header .full-menu-item svg path{

    fill: var(--color5)

}
polygon.color4{
  fill: var(--color4)
}
body .menu-main-menu-container #menu-main-menu li a,
.site-header a.full-menu-item,
.site-footer a.contact.btn.link{
  border-color: var(--color5)
}
.site-header .full-menu-item svg ,
.site-header h2,
.site-header .header-right,
body .menu-main-menu-container #menu-main-menu li a,
.site-header a.full-menu-item,
.site-footer a.contact.btn.link{
  color: var(--color5)
}
line.color5{
  stroke: var(--color5)
}

body .hexagon{
  background-color: rgba(var(--color4_mix), 0.5);
}
body .hexagon:before{
  border-color: rgba(var(--color4_mix), 0.5);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
body .hexagon:after{
  border-color: rgba(var(--color4_mix), 0.5);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
body .hexagon.small{
    background-color: var(--color1)
}
body .hexagon.small:before{
  border-color: var(--color1);
  border-left: 31px solid transparent;
  border-right: 31px solid transparent;
}
body .hexagon.small:after{
  border-color: var(--color1);
  border-left: 31px solid transparent;
  border-right: 31px solid transparent;
}


/*======================Hex Fibo=========================*/


.hexFibo .hex-container,
#hexFibo .hex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  padding: 10px;
  padding: 0px 10px;
  top: -100px;
  position: relative;
  left: -60px;
  height: initial;
  overflow: visible;
  z-index: auto;
  background-color: var(--color3)
}
.hexFibo .hex-container.mid,
#hexFibo .hex-container.mid{
  margin-left: -50px;
}
.hexFibo .honeycomb-container{
  height: 200px;
    overflow: hidden;
    display: block;
    padding-top: 80px;
    width: 100%;
    left: 0;
    position: absolute;
    height: 135px;
    z-index: -5;
}
.hexFibo .honeycomb-container svg {
  max-width: 100%;
    max-height: 100%;
}
#hexFibo .honeycomb-container{
  height: 200px;
  overflow: hidden;
  display: block;
  position: relative;
  padding-top: 80px;


}


/*original*/
 .hex.prime{
  margin: -5px 5px !important;
  position: relative;
  padding: .2%;
  top: 0;
  left: 0;
}
 .hex {
  width: 89px;
  height: 89px;

  position: relative;
  margin: auto;
  top: 15%;
  left: 8%;
  padding: 2%;
}
.hex>svg.small{
  margin: auto;
  position: absolute;
  padding: 0;
  margin-left: 6px;
  margin-top: 3px;
}
 .hex>svg.smaller{
  margin: auto;
  position: absolute;
  padding: 0;
  margin-left: 12px;
  margin-top: 6px;
}

polygon.hexColor1,
.hex.hexColor1{
  /* background-color: #ffe97e;
  color: #ffe97e; */
  fill: var(--color5)
}
polygon.hexColor2,
.hex.hexColor2{
  /* background-color: #FFEFD5;
  color: #FFEFD5; */
  fill: var(--color2);
}

polygon.hexColor3,
.hex.hexColor3{
  /* background-color: #FFD700;
  color: #FFD700; */
  fill: var(--color4);
}
polygon.hexColor4,
.hex.hexColor4{
  /* background-color: #FFC300;
  color: #FFC300; */
  fill: var(--color1);
}
polygon.hexColor5,
.hex.hexColor5{
  /* background-color: #FFCFA8;
  color: #FFCFA8; */
  fill: var(--color6);
}

.hex>span{
  position: absolute;
}
.hex>svg{
  position: absolute;
}







/*======================orb=========================*/
body .orb {

  background-color: rgb(0 239 255 / 40%);
  animation: moveOrbColor 120s linear infinite;

  box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
}

@keyframes moveOrbColor {
  0% {
    transform:  translateX(0%) translateY(0%);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);
  }
  10% {
    transform:  translateX(-75vw) translateY(25px) ;
    box-shadow: 0 0 25px 25px rgba(var(--color1_orb) , 20%);
    background-color: rgba(var(--color1_orb) , 20%);
  }
  20% {
    transform:  translateX(25vw) translateY(50px);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);

  }
  30% {
    transform:  translateX(-50vw) translateY(75px);
    box-shadow: 0 0 25px 25px rgba(var(--color1_orb) , 20%);
    background-color: rgba(var(--color1_orb) , 20%);
  }
  40% {
    transform: translateX(75vw) translateY(0px);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);

  }
  50% {
    transform: translateX(-75vw) translateY(-25px);
    box-shadow: 0 0 25px 25px rgba(var(--color1_orb) , 20%);
    background-color: rgba(var(--color1_orb) , 20%);

  }
  60% {
    transform:  translateX(45vw) translateY(-50px);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);

  }
  70% {
    transform:  translateX(-60vw) translateY(-75px);
    box-shadow: 0 0 25px 25px rgba(var(--color1_orb) , 20%);
    background-color: rgba(var(--color1_orb) , 20%);
  }
  80% {
    transform:  translateX(33vw) translateY(-100px);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);
  }
  90% {
    transform:  translateX(-50vw) translateY(-25px);
    box-shadow: 0 0 25px 25px rgba(var(--color1_orb) , 20%);
    background-color: rgba(var(--color1_orb) , 20%);
  }
  100% {
    transform:  translateX(0vw) translateY(0px);
    box-shadow: 0 0 50px 50px rgba(var(--color1_orb) , 40%);
    background-color: rgba(var(--color1_orb) , 40%);
  }
}

/*======================Headers=========================*/
.headerObject{
    width: 500px;
    overflow: hidden;
    position: relative;
    margin: 15px;
    height: 175px;
}
.headerObject .hex-container{
    height: 200px;
}
#movHoneyComb.headerObject .header{
    right: 500px;
    position: relative;
    width: 1000px;
}
/*==============
======================Tree=========================
================*/
.tree{
  position: absolute;
}
.tree .background{
  position: absolute;
    width: 200px;
    left: -35px;
    top: -10px;
}
.tree .color1{
  fill: #715102;
  stroke: #563d02;
}
.tree .color2{
  fill: #31a360;
  stroke: #17e217;
}
.tree .color3{
  fill: #c38c05;
  stroke: #c38c05;
}



/* Blob */
.falling-leaves .blobs {
	 filter: url('#goo');
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
   width: 600PX;

   /* transform: scale(0.34) translate(-200px, -200px) */
}
 @keyframes blob-left-top-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(-50%, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(50%, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-right-top-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 35% {
		 transform: scale(0.5) translate(0, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 85% {
		 transform: scale(0.5) translate(0, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-left-bottom-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(-50%, 0);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(50%, 0);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-right-bottom-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(50%, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(-50%, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 .falling-leaves .blob {
	 position: absolute;
	 background: #47b17252;
	 left: 50%;
	 top: 50%;
	 width: 200px;
	 height: 200px;
	 line-height: 1;
	 text-align: center;
	 color: white;
	 font-size: 40px;
	 border-radius: 100%;
	 margin-top: -50px;
	 margin-left: -50px;
	 animation: blob-left-top-anim cubic-bezier(0.77, 0, 0.175, 1) 3s infinite;
   animation-delay: 1.65s;
}
 .falling-leaves .blob:nth-child(2) {
	 animation-name: blob-right-top-anim;
   animation-delay: 0s;
}
.falling-leaves .blob:nth-child(3) {
	 animation-name: blob-left-bottom-anim;
	 animation-delay: 1.5s;
}
.falling-leaves .blob:nth-child(4) {
	 animation-name: blob-right-bottom-anim;
	 animation-delay: 0.2s;
}
.falling-leaves .blob:nth-child(5) {
	 animation: none;
	 font-size: 26px;
	 position: relative;
}
 /* .blob:nth-child(5) { */
	 /* content: 'Content goes here';
	 display: block;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -65%); */

   /* ====================leaf list======================== */
   .falling-leaves .rain-drop[alt="0"] {
     left: 20px
   }
   .falling-leaves .rain-drop[alt="1"] {
     left: 40px
   }
   .falling-leaves .rain-drop[alt="1"] .drop{
     -moz-animation-delay: 0.5s;
     -webkit-animation-delay: 0.5s;
     animation-delay: 0.5s;
   }
   /* .rain-drop[alt="1"] .wave,
   .rain-drop[alt="1"] .wave::after{
     -moz-animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
     animation-delay: 2.5s;
   } */

   .falling-leaves .rain-drop[alt="2"] {
     left: 60px
   }
   .falling-leaves .rain-drop[alt="2"] .drop{
     -moz-animation-delay: 1.75s;
     -webkit-animation-delay: 1.75s;
     animation-delay: 1.75s;
   }
   /* .rain-drop[alt="2"] .wave,
   .rain-drop[alt="2"] .wave::after{
     -moz-animation-delay: 3.5s;
     -webkit-animation-delay: 3.5s;
     animation-delay: 3.5s;
   } */


   .falling-leaves .rain-drop[alt="3"] {
     left: 80px
   }
   .falling-leaves .rain-drop[alt="3"] .drop{
     -moz-animation-delay: 3.1s;
     -webkit-animation-delay: 3.1s;
     animation-delay: 3.1s;
   }
   /* .rain-drop[alt="3"] .wave,
   .rain-drop[alt="3"] .wave::after{
     -moz-animation-delay: 3.1s;
     -webkit-animation-delay: 3.1s;
     animation-delay: 3.1s;
   } */

   .falling-leaves .rain-drop[alt="4"] {
     left: 100px
   }
   .falling-leaves .rain-drop[alt="4"] .drop{
     -moz-animation-delay: 2.75s;
     -webkit-animation-delay: 2.75s;
     animation-delay: 2.75s;
   }
   /* .rain-drop[alt="4"] .wave,
   .rain-drop[alt="4"] .wave::after{
     -moz-animation-delay: 2.75s;
     -webkit-animation-delay: 2.75s;
     animation-delay: 2.75s;
   } */
   /* ====================leaf======================== */
   .site-header .falling-leaves .drop-position{
       top: 150px;
   }
   .falling-leaves .drop-position{
     top: 275px;
     position: relative;
   }

   .site-header.falling-leaves .background-squiggle .drop svg,
   .falling-leaves .drop svg{
     width: 65px;
     height: auto;
     fill: #17e217;
     stroke: #d2f7b1;
   }
   .falling-leaves .drop {
     position: relative;
     width: 20px;
     height: 20px;
     top: -30px;
     margin: 0 auto;
     background: transparent;
     -moz-border-radius: 20px;
     -webkit-border-radius: 20px;
     border-radius: 20px;
     /* -moz-animation-name: drip;
     -webkit-animation-name: drip;
     animation-name: drip;
     -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
     -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
     animation-timing-function: cubic-bezier(1,0,.91,.19); */
     animation: fallingLeaf 5s linear infinite;
     -moz-animation-duration: 5s;
     -webkit-animation-duration: 5s;
     animation-duration: 5s;
     -moz-animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
   }
   .falling-leaves .drop::before{
     border: none;
     top: 0;
   }
   @keyframes fallingLeaf {
       /* 0%,10%,40%,100% {
         transform: translateX(0)
       }
       20%,50% {
         transform: translateX(20px);
       }
       30%,60%,90% {
         transform: translateX(-20px);
       } */
       0%{
         transform: translateX(0);
         top: 0px;
       }
       5%{
         top: 10px;
       }
       10%{
         transform: translateX(20px);
         top: 8px;
       }
       15%{
         top: 20px;
       }
       20%{
         transform: translateX(-20px);
           top: 18px;
       }
       25%{
         top: 30px;
       }
       30%{
         transform: translateX(0);
           top: 28px;
       }
       35%{
         top: 40px;
       }
       40%{
         transform: translateX(20px);
           top: 38px;
       }
       45%{
         top: 50px;
       }
       50%{
         transform: translateX(-20px);
           top: 48px;
       }
       55%{
         top: 60px;
       }
       60%{
         transform: translateX(0);
           top: 58px;
       }
       65%{
         top: 70px;
       }
       70%{
         transform: translateX(20px);
           top: 68px;
       }
       75%{
         top: 80px;
       }
       80%{
         transform: translateX(-20px);
           top: 78px;
       }
       85%{
         top: 90px;
       }
       90%{
         transform: translateX(0);
           top: 98px;
       }

       100%{
         transform: translateX(0);
           top: 110px;
       }
     }





/*===============
======================drip drop=========================
==================*/
.site-header.falling-leaves,
.site-header.dripDrop{
  background: white;
  background-color: #3c3c3c;
  background-size: cover;
  height: 135px;
}
.site-header.falling-leaves .background-squiggle .corner.diagnal svg,
.site-header.dripDrop .background-squiggle .corner.diagnal svg{
  width: 100%;
}
.site-header.falling-leaves .background-squiggle svg,
.site-header.dripDrop .background-squiggle svg{
  width: initial;
    max-width: initial;
    max-height: initial;
    margin: 0;
}

.drop-container{
  transform: scale(0.34) translate(-500px, -150px);
  position: absolute;
  top: 0;
  left: 0;
}
.rain-drop{
  position: absolute;
  top: 215px;
  width: 600px;
  height: 300px;
}
/* ====================background======================== */
.background-squiggle{
  height: 200px;
  width: 100%;
  position: absolute;
  background-color: var(--color1);
    overflow: hidden;
}
.corner.left{
  transform: rotateX(180deg) rotateZ(90deg);
}
.corner.right {
  right: 0
}
.corner.right polygon, .corner.right path,
.corner.left polygon, .corner.left path {
    fill: var(--color3);
    stroke: var(--color3);
}
.corner.diagnal{
  right: 0;
  width: 100%;

}
.corner.diagnal svg {
  width: 100%;
    height: 200px;
}
.corner.diagnal path{
  fill: var(--color2);
}
.corner{
  position: absolute;
  width: 200px;
  height: 200px;
}
/* ====================drop list======================== */
.rain-drop[alt="0"] {
  left: 20px
}
.rain-drop[alt="1"] {
  left: 40px
}
.rain-drop[alt="1"] .drop{
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.rain-drop[alt="1"] .wave,
.rain-drop[alt="1"] .wave::after{
  -moz-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.rain-drop[alt="2"] {
  left: 60px
}
.rain-drop[alt="2"] .drop{
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.rain-drop[alt="2"] .wave,
.rain-drop[alt="2"] .wave::after{
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}


.rain-drop[alt="3"] {
  left: 80px
}
.rain-drop[alt="3"] .drop{
  -moz-animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
.rain-drop[alt="3"] .wave,
.rain-drop[alt="3"] .wave::after{
  -moz-animation-delay: 3.1s;
  -webkit-animation-delay: 3.1s;
  animation-delay: 3.1s;
}

.rain-drop[alt="4"] {
  left: 100px
}
.rain-drop[alt="4"] .drop{
  -moz-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.rain-drop[alt="4"] .wave,
.rain-drop[alt="4"] .wave::after{
  -moz-animation-delay: 2.75s;
  -webkit-animation-delay: 2.75s;
  animation-delay: 2.75s;
}
/* ====================drop======================== */
.site-header .drop-position{
    top: 150px;
}
.drop-position{
  top: 275px;
  position: relative;
}
.drop {
  position: relative;
  width: 20px;
  height: 20px;
  top: -30px;
  margin: 0 auto;
  background: #e97b7a;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-animation-name: drip;
  -webkit-animation-name: drip;
  animation-name: drip;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.drop:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 30px solid var(--color6);
  top: -22px;
}

.wave {
  margin: auto;
  position: relative;
  opacity: 0;
  right: 0;
  /* top: 215px;
  left: 0; */
  width: 2px;
  height: 1px;
  border: var(--color5) 7px solid;
  -moz-border-radius: 300px / 150px;
  -webkit-border-radius: 300px / 150px;
  border-radius: 300px / 150px;
  -moz-animation-name: ripple;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.wave:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: -5px;
  left: -5px;
  width: 2px;
  height: 1px;
  border: var(--color5) 5px solid;
  -moz-border-radius: 300px / 150px;
  -webkit-border-radius: 300px / 150px;
  border-radius: 300px / 150px;
  -moz-animation-name: ripple-2;
  -webkit-animation-name: ripple-2;
  animation-name: ripple-2;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes ripple {
    from {
      opacity: 1;
      top: 0
    }
    to {
      width: 600px;
      height: 300px;
      border-width: 1px;
      top: -75px;
      opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  100% {
    width: 200px;
    height: 100px;
    border-width: 1px;
    top: 75px;
    left: 200px;
  }
}

@keyframes drip {
    to {
      top: 190px;
    }
}




/* Blob */
 .blobs {
	 filter: url('#goo');
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
   width: 600PX;

   /* transform: scale(0.34) translate(-200px, -200px) */
}
 @keyframes blob-left-top-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(-50%, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(50%, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-right-top-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 35% {
		 transform: scale(0.5) translate(0, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 85% {
		 transform: scale(0.5) translate(0, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-left-bottom-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(-50%, 0);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(50%, 0);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 @keyframes blob-right-bottom-anim {
	 0% {
		 transform: scale(1) translate(0, 0);
	}
	 25% {
		 transform: scale(0.5) translate(50%, -50%);
	}
	 50% {
		 transform: scale(1) translate(0, 0);
	}
	 75% {
		 transform: scale(0.5) translate(-50%, 50%);
	}
	 100% {
		 transform: scale(1) translate(0, 0);
	}
}
 .blob {
	 position: absolute;
	 background: #e97b7a;
	 left: 50%;
	 top: 50%;
	 width: 200px;
	 height: 200px;
	 line-height: 1;
	 text-align: center;
	 color: white;
	 font-size: 40px;
	 border-radius: 100%;
	 margin-top: -50px;
	 margin-left: -50px;
	 animation: blob-left-top-anim cubic-bezier(0.77, 0, 0.175, 1) 3s infinite;
}

body .headerObject .blob, body .headerObject .drop {
    animation-play-state: paused;
}


 .blob:nth-child(2) {
	 animation-name: blob-right-top-anim;
}
 .blob:nth-child(3) {
	 animation-name: blob-left-bottom-anim;
	 animation-delay: 0.2s;
}
 .blob:nth-child(4) {
	 animation-name: blob-right-bottom-anim;
	 animation-delay: 0.4s;
}
 .blob:nth-child(5) {
	 animation: none;
	 font-size: 26px;
	 position: relative;
}
 /* .blob:nth-child(5) { */
	 /* content: 'Content goes here';
	 display: block;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -65%); */
.blob .child{
   --c1: #d6d6d6;
	--c2: #8f8f8f;
	--c3: #353535;
	--c4: #e97b7a;
	height: 550px;
  width: 550px;
	background:
		/*corners bot*/
		conic-gradient(from 117deg at calc(50% + 128px) calc(50% + 179px), var(--color6) 72deg, #fff0 0 100%),
  	conic-gradient(from 117deg at calc(50% + 15px) calc(50% + 230px), var(--color6) 72deg, #fff0 0 100%),
		conic-gradient(from 191deg at calc(50% - 107px) calc(50% + 181px), var(--color6) 50deg, #fff0 0 100%),
		conic-gradient(from 194deg at calc(50% - 207px) calc(50% + 140px), var(--color6) 55deg, #fff0 0 100%),
		/*corners top*/
		conic-gradient(from 9deg at calc(50% + 154px) calc(50% + 18px), var(--color6) 90deg, #fff0 0 100%),
		conic-gradient(from 10deg at calc(50% + 72px) calc(50% - 95px), var(--color6) 81deg, #fff0 0 100%),
		conic-gradient(from -45deg at calc(50% - 50px) calc(50% - 105px), var(--color6) 56deg, #fff0 0 100%),
		conic-gradient(from -46deg at calc(50% - 198px) calc(50% + 100px), var(--color6) 59deg, #fff0 0 100%),
		/*bg*/
		conic-gradient(from 145deg at 50% calc(50% - 240px), #fff0 70deg, var(--color6) 0 100%),
		linear-gradient(-25deg, var(--color6) calc(50% - 240px), #fff0 0),
		linear-gradient(25deg, var(--color6) calc(50% - 240px), #fff0 0),
		/*grain*/
		repeating-conic-gradient(#0004 0%, transparent .00003%, transparent .0005%,  transparent .00095%),
		repeating-conic-gradient(#fff2 0%, transparent .00005%, transparent .00015%, transparent .0009%),
		/*holes*/
		linear-gradient(99deg, #fff0 calc(50% + 155px), var(--color2) calc(50% + 156px) calc(50% + 185px), #fff0 calc(50% + 186px)),
		linear-gradient(100deg, #fff0 calc(50% + 55px), var(--color2) calc(50% + 56px) calc(50% + 85px), #fff0 calc(50% + 86px)),
		linear-gradient(101deg, #fff0 calc(50% - 100px), var(--color2) calc(50% - 99px) calc(50% - 70px), #fff0 calc(50% - 69px)),
		linear-gradient(103deg, #fff0 calc(50% - 200px), var(--color2) calc(50% - 199px) calc(50% - 170px), #fff0 calc(50% - 169px)),
		/*faces*/
		linear-gradient(90deg, var(--color1) 50%, var(--color3) 50%);

	  transform: scale(0.3);
    border-radius: 100%;
    left: -87%;
    top: -92%;
    position: relative;
    z-index: 100
}


/*========================Moving HoneyComb=====================*/
body .header-row  .header .honeycomb-container .cylinder{
  animation-play-state: paused;
}

body .header .honeycomb-container .cylinder {
  margin: -443px -2px;
  transform: rotate(30deg);
  transform-style: preserve-3d;
  transform-origin: bottom;
  width: 135px;
  position: relative;
  animation-name: moveHex;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  max-width: 135px;
  max-height: initial;



}
.site-header .header{
  height: 135px;
}
.header{
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: absolute;
  z-index: -10;
}
.layer polygon {
  fill: #3498db;
}
.honeycomb-container {
  display: flex;
  flex-wrap: wrap;
  left: -25%;
  width: 3150px;
  max-width: 3150px;
  position: relative;

}


@keyframes moveHex {
  from {
    top: 0px;
    right: 0px;
  }
  to {
    top:50px;
    right: 30px;
  }
}
@keyframes rotateHex {
  from {
    transform: rotateZ(90deg);
  }
  to {
    transform: rotateZ(-90deg);
  }
}