@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Molengo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nobile:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');




* { box-sizing: border-box }
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 7px;
	background-color: #00021f;
}

::-webkit-scrollbar-thumb
{
	background-color: #607D8B;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}





* { box-sizing: border-box }

.wrapper1 {
  position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 50px;
}

.word {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 101px;
 font-family: 'Nanum Gothic', sans-serif;
  font-size: 25px;
  font-weight: 400;
}
.newani
{
	left: 654px !important;
    top: 90%!important;
    -webkit-transform: translateY(-50%);
    transform: translateY(41%);
}


.newani .moving-square-frame {
	border: 1px solid #f1c40f;
    opacity: .8;
}

.newani .moving-square-frame {
border: 1px solid #f1c40f;
    opacity: .8;
}
.newani .ani-moving-square {
background: #673AB7;
}	
.square, .tall, .wide {
  position: absolute;
  border: 2px solid #000;
}

.square {
  width: 85%;
  height: 85%;
  margin: 7.5%;
  animation: morph 2s infinite ease-in-out;
}

.tall {
  height: 100%;
  width: 70%;
  margin: 0 15%;
  animation: morph 3s infinite ease-in-out;
}

.wide {
  height: 70%;
  width: 100%;
  margin: 15% 0;
  animation: morph 4s infinite ease-in-out;
}

@keyframes morph {
  0%, 100%    {transform: scale(1.02);}
  50%         {transform: scale(0.98);}
}

.wrapper2 {
  width: 800px;
  margin: 0 auto;
}
.devices {
  position: relative;
  height: 800px;
  overflow: hidden;
}
.phone {
  position: absolute;
  top: 120px;
}
.desktop {
  position: absolute;
}
.desktop-iframe-container {
  width: 800px;
  height: 665px;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/121761/iMac-Flat-Mockup_1000px.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 800px;
  position: absolute;
  float: left;
  z-index: 100;
}
#iframe-desktop {
  position: absolute;
  width: 734px;
  height: 414px;
  top: 50px;
  left: 33px;
  background: #fff;
  z-index: 100;
}
.phone-iframe-container {
  width: 300px;
  height: 594px;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/121761/Nexus_5_Mockup_300px.png');
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 999;
  position: absolute;
  transform: scale(0.6);
}
#iframe-phone {
  position: relative;
  width: 269px;
  height: 480px;
  top: 50px;
  left: 14px;
  background: #fff;
  z-index: 999;
}

@media (max-width:900px){
  .wrapper2 {
    transform: scale(0.8, 0.8);
  }
}
@media (max-width:700px){
  .wrapper2 {
    transform: scale(0.6, 0.6);
  }
}
@media (max-width:500px){
  .wrapper2 {
    transform: scale(0.4, 0.4);
  }
}


.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32vh;
}

.base {
  position: relative;
  display: block;
  width: 100px;
  height: 20px;
  background: linear-gradient(to right, #b87d44 0%, #bb8148 51%, #c78f58 52%, #b1753b 100%);
  border-radius: 0px;
  border: 3px solid #c78f58;
  box-shadow: 0 3px 0 #fff;
  perspective: 100px;
  transform-style: preserve-3d;
  background: #C78F58;
  -webkit-transform: perspective(200px) rotateX(-45deg);
  transform: perspective(200px) rotateX(-45deg);
}
.base:before {
  content: " ";
  position: absolute;
  left: 7px;
  top: 17px;
  height: 40px;
  width: 80px;
  border-radius: 10px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #f9c15a 51%, #fac25b 100%);
  border: 3px solid #fac25b;
  transform-origin: 50% 0;
  transform: rotateX(25deg);
  background: #C78F58;
  /* -webkit-transform: perspective(200px) rotateX(-45deg); */
  transform: perspective(21px) rotateX(14deg);
}

.blade {
  position: absolute;
  bottom: 8px;
  overflow: hidden;
  transform-origin: 50% 100%;
  z-index: -1;
}
.blade:before, .blade:after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 0;
  border-radius: 50%;
}

.blade-left-s {
  height: 60px;
  width: 50px;
  left: -20px;
  animation: wave 3s infinite ease-in-out;
}
.blade-left-s:before {
  right: 0;
  height: 120px;
  width: 90px;
  border-right: 20px solid #6ad26a;
}
.blade-left-s:after {
  top: 1px;
  right: 6px;
  height: 120px;
  width: 90px;
  transform: rotateZ(15deg);
  border-right: 18px solid #fff;
}

.blade-left-l {
  height: 100px;
  width: 80px;
  left: -35px;
  animation: wave2 4s infinite ease-in-out;
}
.blade-left-l:before {
  right: 2px;
  height: 190px;
  width: 160px;
  border-right: 25px solid #6ad26a;
  transform: rotateZ(20deg);
}
.blade-left-l:after {
  right: 7px;
  height: 190px;
  width: 160px;
  border-right: 18px solid #fff;
  transform: rotateZ(25deg);
}

.blade-right-s {
  height: 50px;
  width: 80px;
  right: -40px;
  animation: wave2 3.2s -0.5s infinite ease-in-out;
}
.blade-right-s:before {
  left: 0;
  height: 190px;
  width: 100px;
  border-left: 22px solid #6ad26a;
}
.blade-right-s:after {
  left: 15px;
  height: 190px;
  width: 100px;
  border-left: 13px solid #fff;
  transform: rotateZ(-10deg);
}

.blade-right-l {
  height: 75px;
  width: 80px;
  right: -27px;
  animation: wave 3.2s -1s infinite ease-in-out;
}
.blade-right-l:before {
  left: 0;
  height: 190px;
  width: 160px;
  border-left: 26px solid #6ad26a;
}
.blade-right-l:after {
  left: 6px;
  height: 190px;
  width: 160px;
  border-left: 20px solid #fff;
  transform: rotateZ(-10deg);
}

.blade-center {
  height: 120px;
  width: 90px;
  left: -20px;
  animation: wave 3s -1.2s infinite ease-in-out;
}
.blade-center:before {
  right: 10px;
  height: 240px;
  width: 140px;
  border-right: 28px solid #6ad26a;
  transform: rotateZ(15deg);
}
.blade-center:after {
  right: 15px;
  height: 240px;
  width: 140px;
  border-right: 17px solid #fff;
  transform: rotateZ(15deg);
}

@keyframes wave {
  0% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
  25% {
    transform: rotateZ(-4deg) translateZ(-1px);
  }
  50% {
    transform: rotateZ(2deg) translateZ(-1px);
  }
  75% {
    transform: rotateZ(-6deg) translateZ(-1px);
  }
  100% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
}
@keyframes wave2 {
  0% {
    transform: rotateZ(0deg) translateZ(-1px);
  }
  25% {
    transform: rotateZ(-3deg) translateZ(-1px);
  }
  50% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
  75% {
    transform: rotateZ(-1deg) translateZ(-1px);
  }
  100% {
    transform: rotateZ(0deg) translateZ(-1px);
  }
}

body {
  
}

.stack {
  position: relative;
}

.pot {
  /* body of pot*/
  position: relative;
  width: 66px;
  height: 88px;
  left: 0%;
  background: #C78F58;
  -webkit-transform: perspective(200px) rotateX(-45deg);
          transform: perspective(200px) rotateX(-45deg);
}
.pot:before {
  /*dirt in pot*/
  content: '';
  position: absolute;
  background: #68594E;
  height: 24px;
  width: 66px;
  bottom: 100%;
  border-radius: 50% 50% 0 0;
}
.pot:after {
  /* rim of pot*/
  content: '';
  position: absolute;
  height: 0;
  width: 72px;
  height: 28px;
  bottom: 95%;
  left: -5%;
  -webkit-transform: perspective(400px) rotateX(-45deg);
          transform: perspective(400px) rotateX(-45deg);
  background: #C78F58;
  background: -webkit-linear-gradient(top, #C78F58 85%, #b1753b 85%);
  background: linear-gradient(to bottom, #C78F58 85%, #b1753b 85%);
}



.leaf {
  -webkit-animation: leafs-sway 3s alternate infinite;
          animation: leafs-sway 3s alternate infinite;
}

.stand {
  position: relative;
  height: 500px;
  width: 110px;
  background: #fac25b;
  background: -webkit-linear-gradient(top, transparent 0%, transparent 96.6%, #fac25b 96.6%, #fac25b 97%, transparent 97%), -webkit-linear-gradient(top, #fac25b 0%, #fac25b 3.6%, transparent 3.6%, transparent 96.6%, #fac25b 96.6%), -webkit-linear-gradient(left, transparent 0%, transparent 42.5%, #fac25b 42.5%, #fac25b 57.5%, transparent 57.5%);
  background: linear-gradient(to bottom, transparent 0%, transparent 96.6%, #fac25b 96.6%, #fac25b 97%, transparent 97%), linear-gradient(to bottom, #fac25b 0%, #fac25b 3.6%, transparent 3.6%, transparent 96.6%, #fac25b 96.6%), linear-gradient(to right, transparent 0%, transparent 42.5%, #fac25b 42.5%, #fac25b 57.5%, transparent 57.5%);
  margin-top: 200px;
}
.stand:before, .stand:after {
  content: '';
  position: absolute;
  height: 18px;
  width: 120px;
  background: #fac25b;
  left: 57%;
  bottom: 25%;
  box-shadow: -68px 149px 0 5px #fac25b, -68px 147px 0 5px #fac25b;
}
.stand:after {
  width: 150px;
  bottom: 70%;
  box-shadow: -83px 385px 0 0 #fac25b, -83px 383px 0 0 #fac25b;
}

.stand .pot:first-of-type {
  /*big pot on the top*/
  top: -14%;
  left: 20%;
}
.stand .pot:nth-of-type(3) {
  /*little pot in the middle*/
  /* body of pot*/
  position: relative;
  width: 46.2px;
  height: 61.6px;
  left: 0%;
  background: #C78F58;
  -webkit-transform: perspective(200px) rotateX(-45deg);
          transform: perspective(200px) rotateX(-45deg);
  top: 0%;
  left: 110%;
}
.stand .pot:nth-of-type(3):before {
  /*dirt in pot*/
  content: '';
  position: absolute;
  background: #68594E;
  height: 16.8px;
  width: 46.2px;
  bottom: 100%;
  border-radius: 50% 50% 0 0;
}
.stand .pot:nth-of-type(3):after {
  /* rim of pot*/
  content: '';
  position: absolute;
  height: 0;
  width: 50.4px;
  height: 19.6px;
  bottom: 95%;
  left: -5%;
  -webkit-transform: perspective(400px) rotateX(-45deg);
          transform: perspective(400px) rotateX(-45deg);
  background: #C78F58;
  background: -webkit-linear-gradient(top, #C78F58 85%, #b1753b 85%);
  background: linear-gradient(to bottom, #C78F58 85%, #b1753b 85%);
}
.stand .pot:nth-of-type(5) {
  /*medium pot on the bottom*/
  /* body of pot*/
  position: relative;
  width: 59.4px;
  height: 79.2px;
  left: 0%;
  background: #C78F58;
  -webkit-transform: perspective(200px) rotateX(-45deg);
          transform: perspective(200px) rotateX(-45deg);
  top: 13%;
  left: 95%;
}
.stand .pot:nth-of-type(5):before {
  /*dirt in pot*/
  content: '';
  position: absolute;
  background: #68594E;
  height: 21.6px;
  width: 59.4px;
  bottom: 100%;
  border-radius: 50% 50% 0 0;
}
.stand .pot:nth-of-type(5):after {
  /* rim of pot*/
  content: '';
  position: absolute;
  height: 0;
  width: 64.8px;
  height: 25.2px;
  bottom: 95%;
  left: -5%;
  -webkit-transform: perspective(400px) rotateX(-45deg);
          transform: perspective(400px) rotateX(-45deg);
  background: #C78F58;
  background: -webkit-linear-gradient(top, #C78F58 85%, #b1753b 85%);
  background: linear-gradient(to bottom, #C78F58 85%, #b1753b 85%);
}

.plant-4 {
  position: relative;
  background: -webkit-radial-gradient(80% 80% at 50% 50%, #a1d4a5 50%, rgba(0, 0, 0, 0) 50%);
  background: radial-gradient(80% 80% at 50% 50%, #a1d4a5 50%, rgba(0, 0, 0, 0) 50%);
  bottom: 19%;
  left: 95%;
  height: 79.2px;
  width: 59.4px;
}
.plant-4 .leaf-2:first-of-type {
  position: absolute;
  height: 38.4px;
  width: 32px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 60%;
  left: 70%;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.plant-4 .leaf-2:nth-of-type(2) {
  position: absolute;
  height: 38.4px;
  width: 32px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 30%;
  left: 85%;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}
.plant-4 .leaf-2:nth-of-type(3) {
  position: absolute;
  height: 38.4px;
  width: 32px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 0%;
  left: 90%;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.plant-4 .leaf-2:nth-of-type(4) {
  position: absolute;
  height: 26.4px;
  width: 22px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 65%;
  left: -10%;
  -webkit-transform: rotate(85deg);
          transform: rotate(85deg);
}
.plant-4 .leaf-2:nth-of-type(5) {
  position: absolute;
  height: 26.4px;
  width: 22px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 75%;
  left: 30%;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
.plant-4 .leaf-2:nth-of-type(6) {
  position: absolute;
  height: 33.6px;
  width: 28px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 40%;
  left: -35%;
  -webkit-transform: rotate(75deg);
          transform: rotate(75deg);
}
.plant-4 .leaf-2:nth-of-type(7) {
  position: absolute;
  height: 40.8px;
  width: 34px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: 0%;
  left: -45%;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.plant-4 .leaf-2:nth-of-type(8) {
  position: absolute;
  height: 26.4px;
  width: 22px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: -10%;
  left: 0%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.plant-4 .leaf-2:nth-of-type(9) {
  position: absolute;
  height: 36px;
  width: 30px;
  background: #A1D4A5;
  border-radius: 50% 0 50% 0;
  bottom: -15%;
  left: 40%;
  -webkit-transform: rotate(160deg);
          transform: rotate(160deg);
}

.flower {
  position: relative;
  height: 40px;
  width: 40px;
  -webkit-transform-origin: 50% 60%;
          transform-origin: 50% 60%;
  background-image: -webkit-radial-gradient(25% 25% at 50% 55%, #dabd59 50%, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(50% 50% at 50% 50%, #ffffff 50%, rgba(0, 0, 0, 0) 50%), -webkit-radial-gradient(35% 35% at 51% 30%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), -webkit-radial-gradient(35% 35% at 82% 50%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), -webkit-radial-gradient(35% 35% at 70% 80%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), -webkit-radial-gradient(35% 35% at 35% 80%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), -webkit-radial-gradient(35% 35% at 20% 50%, #ffffff 52%, rgba(0, 0, 0, 0) 52%);
  background-image: radial-gradient(25% 25% at 50% 55%, #dabd59 50%, rgba(0, 0, 0, 0) 50%), radial-gradient(50% 50% at 50% 50%, #ffffff 50%, rgba(0, 0, 0, 0) 50%), radial-gradient(35% 35% at 51% 30%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), radial-gradient(35% 35% at 82% 50%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), radial-gradient(35% 35% at 70% 80%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), radial-gradient(35% 35% at 35% 80%, #ffffff 52%, rgba(0, 0, 0, 0) 52%), radial-gradient(35% 35% at 20% 50%, #ffffff 52%, rgba(0, 0, 0, 0) 52%);
}
.flower:nth-of-type(10) {
  top: 25%;
  left: -30%;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  -webkit-animation: flowers-swirl 4.5s alternate infinite;
          animation: flowers-swirl 4.5s alternate infinite;
}
.flower:nth-of-type(11) {
  top: -60%;
  left: 40%;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  -webkit-animation: flowers-swirl 4s alternate infinite;
          animation: flowers-swirl 4s alternate infinite;
}
.flower:nth-of-type(12) {
  top: -55%;
  left: 60%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation: flowers-swirl 4.3s alternate-reverse infinite;
          animation: flowers-swirl 4.3s alternate-reverse infinite;
}

.plant-3 {
  position: relative;
  bottom: 29%;
  left: 104%;
  height: 79.2px;
  width: 59.4px;
}
.plant-3 .stem {
  z-index: 1;
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 80%;
}
.plant-3 .stem:first-of-type {
  height: 70px;
  width: 12px;
  right: 44%;
  border-left: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
.plant-3 .stem:nth-of-type(2) {
  height: 70px;
  width: 12px;
  right: 31%;
  border-right: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
.plant-3 .stem:nth-of-type(3) {
  height: 100px;
  width: 16px;
  right: 18%;
  border-right: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.plant-3 .stem:nth-of-type(4) {
  height: 110px;
  width: 20px;
  right: 50%;
  border-left: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.plant-3 .stem:nth-of-type(5) {
  height: 66px;
  width: 30px;
  right: 55%;
  border-left: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.plant-3 .stem:nth-of-type(6) {
  height: 100px;
  width: 40px;
  right: 55%;
  border-left: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.plant-3 .stem:nth-of-type(7) {
  height: 20px;
  width: 40px;
  right: 55%;
  top: 75%;
  border-right: 2.5px solid #A1D4A5;
  border-top: 2.5px solid #A1D4A5;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

@-webkit-keyframes flowers-swirl {
  0% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@keyframes flowers-swirl {
  0% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes leafs-sway {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
@keyframes leafs-sway {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
#image-container1 {
  position: relative;
  padding-top: 85%;
  margin: 59px 0px;
  outline: 2px white solid;
      box-shadow: 1px 1px 4px 0px #888888;
}
a:focus, a:hover {
  
    text-decoration: none !important;
}
.image1 {
  position: absolute;
  background-color: blue;
  opacity: 0.5; opacity: 1;border: 1px solid #9c9ea16b;
    background-color: #f7f7f7;
  /* background-image: url(../images/projects/plantme/1.png); */
}

#image-01 {
  width: 44%;
  top: 10%;
  left: 50%;
  
  /* with a real image you wouldn't have to specify the height */
  height: 46%;
  background-image: url(../images/projects/plantme/1.png);
  opacity: 1;border: 1px solid #9c9ea16b;
    background-color: #f7f7f7;
}

#image-02 {
  width: 78%;
  top: 4%;
  left: 3%;
  height: 57%;
  background-image: url(../images/projects/plantme/2.png);
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #9c9ea16b;
    background-color: #f7f7f7;;
}

#image-03 {
  width: 33%;
  top: 64%;
  left: 26%;
  height: 29%;
  z-index: 1;
}

#image-04 {
  width: 17%;
  top: 49%;
  left: 72%;
  height: 37%;
}

#image-05 {
  width: 40%;
  top: 19%;
  left: 56%;
  height: 76%;
  background-image: url(../images/projects/plantme/3.png);
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container2 {
  position: relative;
}

.beer,
.bubble,
.small-bubbles,
.drip {
  position: absolute;
}

.bubble,
.small-bubbles,
.drip {
  background: #edf8ff;
}

.bubble,
.small-bubbles {
  border-radius: 100%;
}

.mug {
  position: relative;
  width: 20vmin;
  height: 32vmin;
  background: #d4d9dc;
  border-radius: 2vmin;
}
.mug:before, .mug:after {
  position: absolute;
  content: '';
}
.mug:before {
  z-index: 0;
  left: 12vmin;
  top: 6vmin;
  width: 15vmin;
  height: 17vmin;
  border-radius: 19%;
  background: #d4d9dc;
}
.mug:after {
  z-index: 0;
    width: 5.5vmin;
    height: 13vmin;
    top: 8vmin;
    left: 20vmin;
    background: #7DCFB6;
    border-radius: 19%;
}

.beer {
  top: 2vmin;
  left: 2vmin;
  width: 16vmin;
  height: 28vmin;
  background: #FFD36D;
  border-radius: 1vmin;
}
.beer:before, .beer:after {
  position: absolute;
  content: '';
  background: #ffc849;
  border-radius: 100%;
}
.beer:before {
  animation: 4s up infinite;
  width: 2vmin;
  height: 2vmin;
  bottom: 2vmin;
  left: 5vmin;
  box-shadow: 7vmin -15vmin 0 #ffc849, 4vmin -10vmin 0 #ffc849, 6vmin -3vmin 0 #ffc849;
}
.beer:after {
  animation: 4s up infinite;
  width: 1.5vmin;
  height: 1.5vmin;
  bottom: 6vmin;
  left: 7vmin;
  box-shadow: -3vmin -8vmin 0 #ffc849, 7vmin -5vmin 0 #ffc849;
}

.bubble {
  width: 10vmin;
  height: 10vmin;
  top: -5vmin;
  left: -3vmin;
}
.bubble:before, .bubble:after {
  position: absolute;
  content: '';
  background: #edf8ff;
  border-radius: 100%;
}
.bubble:before {
  width: 12vmin;
  height: 12vmin;
  left: 5vmin;
  top: -2vmin;
}
.bubble:after {
  width: 10vmin;
  height: 10vmin;
  left: 14vmin;
  top: 0vmin;
}

.small-bubbles {
  width: 5vmin;
  height: 5vmin;
  top: -7vmin;
  left: 11vmin;
}
.small-bubbles:before, .small-bubbles:after {
  position: absolute;
  content: '';
  border-radius: 100%;
  background: #edf8ff;
}
.small-bubbles:before {
  width: 3vmin;
  height: 3vmin;
  top: -6vmin;
  left: -3vmin;
}
.small-bubbles:after {
  width: 3vmin;
  height: 3vmin;
  top: -8vmin;
  left: -8vmin;
}

.drip {
  width: 5vmin;
  height: 14vmin;
  top: 1vmin;
  border-radius: 100px;
  left: -2vmin;
  box-shadow: 4vmin -6vmin 0 #edf8ff;
  animation: 6s drip infinite;
}

@keyframes up {
  0% {
    transform: translateY(0px);
  }
  99% {
    transform: translateY(-70px);
  }
  100% {
    opacity: 0;
  }
}
@keyframes drip {
  0% {
    transform: translateY(0px);
  }
  100% {
    height: 25vmin;
  }
}


.be0{fill:#083B25;}
.be1{fill:#0B4E31;}
.be2{fill:#10744A;}
.be3{fill:#169B62;}
.be4{fill:url(#SVGID_1_);}
.be5{fill:#FFFFFF;}
.be6{fill:#F72B00;}
.be7{fill:#53180B;}
.be8{fill:#7A320F;}
.be9{fill:#98582E;}
.be10{fill:#E18625;}
.be11{fill:url(#SVGID_2_);}
.be12{fill:#1C1400;}
.be13{fill:#BDE877;}
.be14{fill:#f4e095;}
.be15{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.be16{fill:none;stroke:#FFFF83;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}

.beer-1{
transform-origin: center center;
animation: cheers1 1.2s ease infinite;
}

@keyframes cheers1{
0%{
transform:translate(0, 15px) rotate(0);
}
45%{
  opacity:1;
}
50%{
transform: translate(53px, -15px) rotate(16deg);
}
51%{

opacity:0.9;
}
52%{
transform: translate(53px, -15px) rotate(16deg);
}
70%{
  opacity:1;
}
100%{
transform:translate(0, 15px) rotate(0deg);
}

}
.beer-2{
transform-origin: center center;
animation: cheers2 1.2s ease infinite;
}

@keyframes cheers2{
0%{
transform:translate(0, 15px) rotate(0);
}
45%{
  opacity:1;
}
50%{
transform: translate(-54px, -5px) rotate(-13deg);

}
51%{

opacity:0.8;
}
52%{
transform: translate(-54px, -5px) rotate(-13deg);
}
70%{
  opacity:1;
}

100%{
transform:translate(0, 15px) rotate(0deg);
}

}

.be13{
transform-origin: center center;
animation: bubble1 1.2s ease infinite;
}

@keyframes bubble1{
0%{
  transform:scale(0);
}
50%{
  transform:scale(0);
}


55%{
  transform:scale(1) translate(-5px, 15px);
  opacity(0);
}
64%{
  transform:scale(0.3) translate(0px, 8px);
  opacity(1);
}
74%{
  transform:scale(0.8) translate(-15px, -15px);
  opacity(1);
}
85%{
  transform:scale(0.4) translate(-25px,-50px);
  opacity(1);
}
100%{
  transform:scale(0.4) translate(-35px,-75px);
  opacity(0);
}
}

.be14{
transform-origin: center center;
animation: bubble2 1.2s ease infinite;
}

@keyframes bubble2{
0%{
  transform:scale(0);
}
45%{
  transform:scale(0);
}
48%{
  transform:scale(1) translate(5px, 10px);
  opacity(0);
}
60%{
  transform:scale(0.3) translate(0px, 0px);
  opacity(1);
}
77%{
  transform:scale(0.8) translate(15px, -13px);
  opacity(1);
}
85%{
  transform:scale(0.4) translate(25px,-35px);
  opacity(1);
}
100%{
  transform:scale(0.4) translate(35px,-45px);
  opacity(0);
}
}

.becircle{
  transform-origin:center center;
  animation: beer-circle 1.2s ease infinite;
}

@keyframes beer-circle{
0%{
  transform:translateY(15px) scale(0);
}
35%{
  transform:translateY(15px) scale(0);
}
51%{
  transform:translateY(15px) scale(0.8);
  opacity:1;
}
70%{
  transform:translateY(15px) scale(0.6);
  opacity:0;
}

}

.be16{

}

@keyframes movebe16{

{stroke-dashoffset:0;}
}
.box {
  width: 100%;
  background: #123;
  margin: 0px auto;
  padding: 16px;
  position: relative;
}

.box > img {
  width: 100%;
  height: 300px;
  opacity: .5;
  -o-object-fit: cover;
  object-fit: cover;
}

.box::after {
  content: '';
  display: block;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 47px;
  border: solid 1px white;
  border-bottom: 0;
}

.text1 {
  color: white;
  position: absolute;
  text-align: center;
  bottom: 40px;
  left: 40px;
  right: 40px;
  white-space: nowrap;
  overflow: hidden;
     font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text1 > div {
  width: 2000px;
  margin-left: -820px;
}

.innertext::before,
.innertext::after {
  content: '';
  display: inline-block;
  width: 600px;
  height: 4px;
  background: white;
  vertical-align: middle;
}

.innertext::before {
  margin-right: 16px;
}

.innertext::after {
  margin-left: 16px;
}

/* jagajit end*/
/*slangalore start */
/* slangalore start*/


/* images sprites
*/
.circle1 {
  cursor: pointer;
  width: 215px;
  height: 215px;
  position: absolute;
  top: 50%;
  left: 43%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mask-a,
.mask-b {
  border-radius: 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

.mask-a {
  background: #1b2d41;
  overflow: hidden;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 215px 215px;
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/mask_svg.svg);
  z-index: 10;
  margin-top: 117px;
}

.mask-b {
  background: #1b2d41;
}

/*=====================================================================================
    PEOPLE
=======================================================================================
*/
.people-1,
.people-1::before,
.person-green,
.people-2,
.people-2::before,
.people-3,
.people-3::after,
.people-3::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/people_1.svg) no-repeat;
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.person-green {
  background-position: 0px 0px;
  top: 2.5em;
  left: 50%;
  margin-left: -45px;
  width: 90px;
  height: 214px;
  z-index: 15;
  will-change: transform;
  -webkit-transform: translateY(0px) translateZ(0px);
          transform: translateY(0px) translateZ(0px);
  -webkit-transition: -webkit-transform 550ms ease;
  transition: -webkit-transform 550ms ease;
  transition: transform 550ms ease;
  transition: transform 550ms ease, -webkit-transform 550ms ease;
  -webkit-transition-delay: 650ms;
          transition-delay: 650ms;
}

.people-1 {
  background-position: -90px 0px;
  top: 4em;
  left: 0;
  width: 81px;
  height: 194px;
  z-index: 10;
  will-change: transform;
  -webkit-transform: translateY(0px) translateZ(0px);
          transform: translateY(0px) translateZ(0px);
  -webkit-transition: -webkit-transform 550ms ease;
  transition: -webkit-transform 550ms ease;
  transition: transform 550ms ease;
  transition: transform 550ms ease, -webkit-transform 550ms ease;
  -webkit-transition-delay: 650ms;
          transition-delay: 650ms;
}
.people-1::before {
  background-position: -173px 0px;
  content: "";
  top: 0;
  right: -8.5em;
  width: 81px;
  height: 194px;
}

.people-2 {
  background-position: 0px -215px;
  top: 4.8em;
  left: -1.8em;
  width: 209px;
  height: 165px;
  z-index: 5;
  will-change: transform;
  -webkit-transform: translateY(0px) translateZ(0px);
          transform: translateY(0px) translateZ(0px);
  -webkit-transition: -webkit-transform 550ms ease;
  transition: -webkit-transform 550ms ease;
  transition: transform 550ms ease;
  transition: transform 550ms ease, -webkit-transform 550ms ease;
  -webkit-transition-delay: 216.66667ms;
          transition-delay: 216.66667ms;
}
.people-2::before {
  background-position: 0px -215px;
  content: "";
  top: 0;
  right: -4em;
  width: 70px;
  height: 165px;
}

.people-3 {
  background-position: -210px -215px;
  top: 6.2em;
  left: 50%;
  margin-left: -17px;
  width: 34px;
  height: 42px;
  will-change: transform;
  -webkit-transform: translateY(0px) translateZ(0px);
          transform: translateY(0px) translateZ(0px);
  -webkit-transition: -webkit-transform 550ms ease;
  transition: -webkit-transform 550ms ease;
  transition: transform 550ms ease;
  transition: transform 550ms ease, -webkit-transform 550ms ease;
}
.people-3::after, .people-3::before {
  background-position: -210px -215px;
  content: "";
  width: 34px;
  height: 42px;
}
.people-3::after {
  top: -0.5em;
  left: -4.2em;
}
.people-3::before {
  top: -0.5em;
  right: -4.2em;
}

.circle1:hover > .mask-a > .people-1 {
  -webkit-transform: translateY(-0.8em) translateZ(0px);
          transform: translateY(-0.8em) translateZ(0px);
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  -webkit-transition-delay: 216.66667ms;
          transition-delay: 216.66667ms;
}
.circle1:hover > .mask-a > .person-green {
  -webkit-transform: translateY(1.8em) translateZ(0px);
          transform: translateY(1.8em) translateZ(0px);
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
}
.circle:hover > .mask-a > .people-2 {
  -webkit-transform: translateY(-2.4em) translateZ(0px);
          transform: translateY(-2.4em) translateZ(0px);
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  -webkit-transition-delay: 325ms;
          transition-delay: 325ms;
}
.circle:hover > .mask-a > .people-3 {
  -webkit-transform: translateY(-3.8em) translateZ(0px);
          transform: translateY(-3.8em) translateZ(0px);
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65), -webkit-transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.65);
  -webkit-transition-delay: 650ms;
          transition-delay: 650ms;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

figure {
  margin: 0;
}
.credit-design {
  color: #315277;
  font-weight: 400;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  font-size: 0.8rem;
  text-align: center;
}
.credit-design a {
  color: #395f89;
  text-decoration: none;
}
/* slagalore */

/* Weird Thing */
#isthisweird /*?*/ {
  z-index: 2;
  position: absolute;
  width: 190px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-74%, 33%);
}
  /* This is so sweet */
  .face {
    width: 185px; height: 250px;
    background: #fece04;
    border-radius: 185px;
  }
  /* Eyes man, eyes! */
  #isthisweird:before {
    width: 16px; height: 16px;
    top: 140px; left: 50%;
    margin-left: -8px;
    border-radius: 14px;
    box-shadow: 
      71px  0 0 #fff,
      -71px 0 0 #fff,
      /* and ears */
      92px  0 0 8px #fece04,
      -92px 0 0 8px #fece04;
  }
  /* Neck. */
  #isthisweird:after {
    width: 40px; height: 50px;
    top: 100%; left: 50%;
    margin: -2px 0 0 -20px;
    background: #fece04;
  }
  /* Hair */
  .hair-back,
  .hair-front {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
  }
  .hair-back {z-index: -1}
  /* Mouth */
  .mouth {
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
    .mouth:before {
      top: 0; left: 50%;
      width: 72px; height: 30px;
      background: #fece04;
      border-radius: 7px 7px 30px 30px;
      transform: translateX(-50%);
    }
    .mouth:after {
      z-index: 1;
      top: 0; left: 50%;;
      width: 100%; height: 100%;
      background: #cca503;
      transform: translateX(-50%);
    }
    .teeth {
      z-index: 2;
      position: absolute;
      top: 0; left: 50%;
      width: 28px; height: 16px;
      margin-left: -14px;
      background: #fff;
      border-radius: 0 0 16px 16px;
    }
  /* Moustache */
  .moustache {
    position: absolute;
    top: 158px; left: 50%;
    width: 74px; height: 30px;
    border-radius: 30px 30px 0 0;
    transform: translateX(-50%);
  }
  /* Beard */
  .beard {
    z-index: 1;
    position: absolute;
    bottom: -48px; left: 50%;
    width: 74px; height: 30px;
    border-radius: 30px 30px 0 0;
    transform: translateX(-50%);
  }

/* Lucy */
  .lucy#isthisweird:before {
    box-shadow: 
      71px  0 0 #fff,
      -71px 0 0 #fff;
  }
  .lucy .hair-back {
    width: 245px; height: 298px;
    background: #ff6600;
    border-radius: 90px 90px 10px 10px;
  }
  .lucy .hair-front {
    width: 245px; height: 128px;
    background: #ff6600;
    border-radius: 90px 90px 0 0;
  }
  .lucy .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .lucy .mouth:after {
        border-radius: 0 0 28px 28px;
    }

/* Chen */
  .chen#isthisweird:before {
    box-shadow: 
      71px  0 0 #fff,
      -71px 0 0 #fff;
  }
  .chen .hair-back {
    width: 245px; height: 186px;
    background: #368da1;
    border-radius: 90px 90px 10px 10px;
  }
  .chen .hair-front {
    width: 245px; height: 95px;
    background: #368da1;
    border-radius: 90px 90px 0 0;
  }
  .chen .mouth {
    top: 184px;
    width: 24px; height: 24px;
    border-radius: 100%;
  }
    .chen .mouth:after {
      border-radius: 100%;
    }
    .chen .teeth {
      opacity: 0;
    }

/* Mr. Johnson */
  .mrjohnson .hair-back {
    opacity: 0;
  }
  .mrjohnson .hair-front {
    width: 216px; height: 98px;
    margin-left: 15px;
    background: #333;
    border-radius: 90px 0 90px 0;
  }
  .mrjohnson .moustache {
    background: #333;
  }
  .mrjohnson .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .mrjohnson .mouth:after {
      width: 54px; height: 28px;
      border-radius: 0 0 28px 28px;
    }

/* Donna <3 */
  .donna#isthisweird:before {
    box-shadow: 
      71px  0 0 #fff,
      -71px 0 0 #fff;
  }
  .donna .hair-back {
    width: 245px; height: 228px;
    background: #de7b18;
    border-radius: 90px 90px 80px 80px;
  }
  .donna .hair-front {
    overflow: hidden;
    width: 245px; height: 132px;
    border-radius: 90px 90px 0 0;
  }
    .donna .hair-front:before {
      width: 70px; height: 100%;
      background: #de7b18;
      border-radius: 0 0 35px 0;
    }
    .donna .hair-front:after {
      left: 60px;
      width: 190px; height: 100%;
      background: #de7b18;
      border-radius: 0 0 0 35px;
    }
  .donna .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .donna .mouth:after {
      border-radius: 0 0 28px 28px;
    }
    .donna .teeth {
      opacity: 0;
    }

/* Jenna */
  .jenna#isthisweird:before {
    box-shadow: 
      71px  0 0 #fff,
      -71px 0 0 #fff;
  }
  .jenna .hair-back {
    width: 247px; height: 170px;
    background: #ff6600;
    border-radius: 85px 85px 80px 80px;
  }
    .jenna .hair-back:after {
      top: 128px; left: 50%;
      width: 240px; height: 46px;
      margin-left: -120px;
      background: #ff6600;
      border-radius: 22px;
    }
  .jenna .hair-front {
    overflow: hidden;
    width: 247px; height: 105px;
    border-radius: 85px 85px 0 0;
  }
    .jenna .hair-front:after {
      top: 0; left: 50%;
      width: 46px; height: 100%;
      margin-left: -23px;
      background: #ff6600;
      border-radius: 0 0 22px 22px;
      box-shadow:
        46px  0 0 #ff6600,
        92px  0 0 #ff6600,
        -46px 0 0 #ff6600,
        -92px 0 0 #ff6600;
    }
  .jenna .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .jenna .mouth:after {
      border-radius: 0 0 28px 28px;
    }

/* Akeno */
  .akeno .hair-front {
    top: 70px;
    width: 11px; height: 100px;
    border-radius: 9px;
    box-shadow: 
      88px  0 0 #368da1, 
      -88px 0 0 #368da1;
  }
    .akeno .hair-front:before {
      top: -70px; left: -110px;
      width: 130px; height: 105px;
      background: #368da1;
      border-radius: 85px 0 85px 0;
    }
    .akeno .hair-front:after {
      top: -70px; right: -110px;
      width: 130px; height: 105px;
      background: #368da1;
      border-radius: 0 85px 0 85px;
    }
  .akeno .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .akeno .mouth:after {
      border-radius: 0 0 28px 28px;
    }

/* Joshua */
  .joshua .hair-back {
    opacity: 0;
  }
  .joshua .hair-front {
    width: 216px; height: 98px;
    margin-left: 15px;
    background: #de7b18;
    border-radius: 90px 0 90px 0;
  }
    .joshua .hair-front:before {
      bottom: -80px; left: 0;
      width: 11px; height: 80px;
      background: #de7b18;
    }
    .joshua .hair-front:after {
      bottom: -80px; right: 30px;
      width: 11px; height: 150px;
      background: #de7b18;
    }
  .joshua .moustache {
    background: #de7b18;
  }
  .joshua .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .joshua .mouth:after {
      width: 50px; height: 20px;
      border-radius: 0 0 50px 50px;
    }
    .joshua .teeth {
      height: 13px;
    }
  .joshua .beard {
    width: 186px; height: 126px;
    background: #de7b18;
    border-radius: 0 0 43px 43px;
  }

/* Jackson */
  .jackson .hair-back {
    opacity: 0;
  }
  .jackson .hair-front {
    width: 216px; height: 98px;
    margin-left: 15px;
    border-radius: 90px 0 90px 0;
  }
    .jackson .hair-front:before {
      bottom: -80px; left: 0;
      width: 11px; height: 60px;
      background: #ff5819;
      border-radius: 11px;
    }
    .jackson .hair-front:after {
      bottom: -80px; right: 30px;
      width: 11px; height: 60px;
      background: #ff5819;
      border-radius: 11px;
    }
  .jackson .moustache {
    background: #ff5819;
  }
  .jackson .mouth {
    top: 184px;
    width: 54px; height: 28px;
    border-radius: 0 0 28px 28px;
  }
    .jackson .mouth:after {
      width: 50px; height: 20px;
      border-radius: 0 0 50px 50px;
    }
    .jackson .teeth {
      height: 13px;
    }
  .jackson .beard {
    width: 186px; height: 126px;
    background: #ff5819;
    border-radius: 0 0 43px 43px;
  }
/* slagalore end */
/*ifalc_*/
.school-holder {
  perspective: 500px;
  font-size: inherit;
  width: 10em;
}

.school-icon {
  text-transform: uppercase;
  display: inline-block;
  background-image: linear-gradient(-25deg, currentcolor 50%, transparent 50%), linear-gradient(25deg, currentcolor 50%, transparent 50%), linear-gradient(0deg, currentcolor, currentcolor), linear-gradient(0deg, currentcolor, currentcolor), linear-gradient(0deg, currentcolor, currentcolor), linear-gradient(0deg, currentcolor, currentcolor);
  background-size: 5em 2.5em,  5em 2.5em,  1.5em 3.9em, 1.5em 3.9em, 1.5em 3.9em, 9em 1em;
  background-position: left top,  right top,  center, 1.5em center, 7em center, center 7.5em;
  background-repeat: no-repeat;
  height: 10em;
  width: 10em;
  transform: scaleX(0.9) rotateX(23deg);
  transition: transform .3s;
  font-family: sans-serif;
  font-weight: bold;
}
.school-icon:after {
  content: attr(data-label);
  background: white;
  border: .35em solid currentcolor;
  padding: .2em;
  position: absolute;
  top: 1.2em;
  right: 50%;
  transform: translateX(50%);
}
.school-icon:hover {
  transform: scaleX(0.9) rotateX(0deg);
}
.wrapper2 {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #7ae298;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #7ae298 0%, #9af282 100%);
}

.cube {
  /* position: relative; */
  /* font-family: 'Oswald', sans-serif; */
  /* width: 250px; */
   height: 700px; 
  /* box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.1); */
  /* background-color: #fff; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

.girl {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 191px 260px 0;
  /*animation: 0.5s girl infinite;*/
  animation: girl .5s ease;
  box-shadow: 180px 0 #f3dade, 190px 0 #d98f9c, 200px 0 #e3aeb4, 50px 10px #cd9fa9, 60px 10px #b77881, 70px 10px #ede1e1, 80px 10px #f7edee, 170px 10px #faf6f5, 180px 10px #d77f8b, 190px 10px #e198ab, 200px 10px #f1d8db, 40px 20px #f7f3f4, 50px 20px #9b4756, 60px 20px #8f2634, 70px 20px #9d3c4f, 80px 20px #a54256, 90px 20px #c67a87, 100px 20px #dbb0b7, 110px 20px #f0d2d4, 170px 20px #de9ba4, 180px 20px #dc8e9b, 190px 20px #fdf3f4, 0 30px #e4d5d8, 10px 30px #f3edef, 40px 30px #fdfdfb, 50px 30px #bd8087, 60px 30px #932a38, 70px 30px #9a2a36, 80px 30px #a0303e, 90px 30px #a53241, 100px 30px #ac384d, 110px 30px #b64154, 120px 30px #d28494, 160px 30px #eeb0bb, 170px 30px #d85a72, 180px 30px #f3e7eb, 0 40px #d7bcc1, 10px 40px #cca5aa, 20px 40px #f9f9f7, 50px 40px #c5929b, 60px 40px #972e3f, 70px 40px #9c2c3c, 80px 40px #a32e40, 90px 40px #a62f42, 100px 40px #af3147, 110px 40px #b33644, 120px 40px #b6384d, 130px 40px #f4dde3, 150px 40px #f5d6db, 160px 40px #d1495f, 170px 40px #e8a6b2, 0 50px #dec6c6, 10px 50px #9c5460, 20px 50px #caa3a8, 30px 50px #f9eef2, 50px 50px #fdf9fa, 60px 50px #bc7885, 70px 50px #9f2f3f, 80px 50px #a42f41, 90px 50px #a93245, 100px 50px #b0354a, 110px 50px #b63748, 120px 50px #bf364a, 130px 50px #e0a6b2, 140px 50px #fdfbfc, 150px 50px #d56f7c, 160px 50px #db6176, 170px 50px #fcfbf9, 0 60px #f9f9f9, 10px 60px #ecdde0, 20px 60px #b88991, 30px 60px #994d5a, 40px 60px #c18a90, 50px 60px #f4ecea, 60px 60px #efdce0, 70px 60px #bd6f7c, 80px 60px #ac4151, 90px 60px #aa3547, 100px 60px #b33449, 110px 60px #b8374b, 120px 60px #c95c6f, 130px 60px #e7b8c0, 140px 60px #e6a4ae, 150px 60px #d1415c, 160px 60px #f5d0d7, 20px 70px #f6f0f2, 30px 70px #dcbfc3, 40px 70px #ac646f, 50px 70px #9d4150, 60px 70px #b86c78, 70px 70px #deb7bc, 80px 70px #e8bfc5, 90px 70px #b85162, 100px 70px #b5374d, 110px 70px #bb3e50, 120px 70px #e8b0b9, 130px 70px #edc0c7, 140px 70px #d1465b, 150px 70px #e594a3, 40px 80px #f5eced, 50px 80px #d5aeb3, 60px 80px #b16370, 70px 80px #ab4956, 80px 80px #b65463, 90px 80px #bf6173, 100px 80px #c05664, 110px 80px #b93a4d, 120px 80px #c95266, 130px 80px #ca495f, 140px 80px #d25567, 150px 80px #faf6f7, 60px 90px #f8eff0, 70px 90px #e3c0c6, 80px 90px #b95d6c, 90px 90px #ae3348, 100px 90px #b3384c, 110px 90px #b9384e, 120px 90px #bf374b, 130px 90px #c53a51, 140px 90px #de808e, 80px 100px #f9f8f6, 90px 100px #cf8691, 100px 100px #b43546, 110px 100px #b7364a, 120px 100px #c03850, 130px 100px #c63b52, 140px 100px #d45f72, 100px 110px #d08a94, 110px 110px #b6354b, 120px 110px #bc374c, 130px 110px #c23a4e, 140px 110px #cd495e, 150px 110px #faf8f9, 100px 120px #fcfbf7, 110px 120px #cf7b8a, 120px 120px #b9384a, 130px 120px #be394a, 140px 120px #c93f58, 150px 120px #f4dbdf, 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
}

@keyframes girl {
  10% {
    box-shadow: 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  20% {
    box-shadow: 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  30% {
    box-shadow: 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  40% {
    box-shadow: 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  50% {
    box-shadow: 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  60% {
    box-shadow: 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  70% {
    box-shadow: 60px 90px #f8eff0, 70px 90px #e3c0c6, 80px 90px #b95d6c, 90px 90px #ae3348, 100px 90px #b3384c, 110px 90px #b9384e, 120px 90px #bf374b, 130px 90px #c53a51, 140px 90px #de808e, 80px 100px #f9f8f6, 90px 100px #cf8691, 100px 100px #b43546, 110px 100px #b7364a, 120px 100px #c03850, 130px 100px #c63b52, 140px 100px #d45f72, 100px 110px #d08a94, 110px 110px #b6354b, 120px 110px #bc374c, 130px 110px #c23a4e, 140px 110px #cd495e, 150px 110px #faf8f9, 100px 120px #fcfbf7, 110px 120px #cf7b8a, 120px 120px #b9384a, 130px 120px #be394a, 140px 120px #c93f58, 150px 120px #f4dbdf, 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  80% {
    box-shadow: 0 60px #f9f9f9, 10px 60px #ecdde0, 20px 60px #b88991, 30px 60px #994d5a, 40px 60px #c18a90, 50px 60px #f4ecea, 60px 60px #efdce0, 70px 60px #bd6f7c, 80px 60px #ac4151, 90px 60px #aa3547, 100px 60px #b33449, 110px 60px #b8374b, 120px 60px #c95c6f, 130px 60px #e7b8c0, 140px 60px #e6a4ae, 150px 60px #d1415c, 160px 60px #f5d0d7, 20px 70px #f6f0f2, 30px 70px #dcbfc3, 40px 70px #ac646f, 50px 70px #9d4150, 60px 70px #b86c78, 70px 70px #deb7bc, 80px 70px #e8bfc5, 90px 70px #b85162, 100px 70px #b5374d, 110px 70px #bb3e50, 120px 70px #e8b0b9, 130px 70px #edc0c7, 140px 70px #d1465b, 150px 70px #e594a3, 40px 80px #f5eced, 50px 80px #d5aeb3, 60px 80px #b16370, 70px 80px #ab4956, 80px 80px #b65463, 90px 80px #bf6173, 100px 80px #c05664, 110px 80px #b93a4d, 120px 80px #c95266, 130px 80px #ca495f, 140px 80px #d25567, 150px 80px #faf6f7, 60px 90px #f8eff0, 70px 90px #e3c0c6, 80px 90px #b95d6c, 90px 90px #ae3348, 100px 90px #b3384c, 110px 90px #b9384e, 120px 90px #bf374b, 130px 90px #c53a51, 140px 90px #de808e, 80px 100px #f9f8f6, 90px 100px #cf8691, 100px 100px #b43546, 110px 100px #b7364a, 120px 100px #c03850, 130px 100px #c63b52, 140px 100px #d45f72, 100px 110px #d08a94, 110px 110px #b6354b, 120px 110px #bc374c, 130px 110px #c23a4e, 140px 110px #cd495e, 150px 110px #faf8f9, 100px 120px #fcfbf7, 110px 120px #cf7b8a, 120px 120px #b9384a, 130px 120px #be394a, 140px 120px #c93f58, 150px 120px #f4dbdf, 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  90% {
    box-shadow: 0 40px #d7bcc1, 10px 40px #cca5aa, 20px 40px #f9f9f7, 50px 40px #c5929b, 60px 40px #972e3f, 70px 40px #9c2c3c, 80px 40px #a32e40, 90px 40px #a62f42, 100px 40px #af3147, 110px 40px #b33644, 120px 40px #b6384d, 130px 40px #f4dde3, 150px 40px #f5d6db, 160px 40px #d1495f, 170px 40px #e8a6b2, 0 50px #dec6c6, 10px 50px #9c5460, 20px 50px #caa3a8, 30px 50px #f9eef2, 50px 50px #fdf9fa, 60px 50px #bc7885, 70px 50px #9f2f3f, 80px 50px #a42f41, 90px 50px #a93245, 100px 50px #b0354a, 110px 50px #b63748, 120px 50px #bf364a, 130px 50px #e0a6b2, 140px 50px #fdfbfc, 150px 50px #d56f7c, 160px 50px #db6176, 170px 50px #fcfbf9, 0 60px #f9f9f9, 10px 60px #ecdde0, 20px 60px #b88991, 30px 60px #994d5a, 40px 60px #c18a90, 50px 60px #f4ecea, 60px 60px #efdce0, 70px 60px #bd6f7c, 80px 60px #ac4151, 90px 60px #aa3547, 100px 60px #b33449, 110px 60px #b8374b, 120px 60px #c95c6f, 130px 60px #e7b8c0, 140px 60px #e6a4ae, 150px 60px #d1415c, 160px 60px #f5d0d7, 20px 70px #f6f0f2, 30px 70px #dcbfc3, 40px 70px #ac646f, 50px 70px #9d4150, 60px 70px #b86c78, 70px 70px #deb7bc, 80px 70px #e8bfc5, 90px 70px #b85162, 100px 70px #b5374d, 110px 70px #bb3e50, 120px 70px #e8b0b9, 130px 70px #edc0c7, 140px 70px #d1465b, 150px 70px #e594a3, 40px 80px #f5eced, 50px 80px #d5aeb3, 60px 80px #b16370, 70px 80px #ab4956, 80px 80px #b65463, 90px 80px #bf6173, 100px 80px #c05664, 110px 80px #b93a4d, 120px 80px #c95266, 130px 80px #ca495f, 140px 80px #d25567, 150px 80px #faf6f7, 60px 90px #f8eff0, 70px 90px #e3c0c6, 80px 90px #b95d6c, 90px 90px #ae3348, 100px 90px #b3384c, 110px 90px #b9384e, 120px 90px #bf374b, 130px 90px #c53a51, 140px 90px #de808e, 80px 100px #f9f8f6, 90px 100px #cf8691, 100px 100px #b43546, 110px 100px #b7364a, 120px 100px #c03850, 130px 100px #c63b52, 140px 100px #d45f72, 100px 110px #d08a94, 110px 110px #b6354b, 120px 110px #bc374c, 130px 110px #c23a4e, 140px 110px #cd495e, 150px 110px #faf8f9, 100px 120px #fcfbf7, 110px 120px #cf7b8a, 120px 120px #b9384a, 130px 120px #be394a, 140px 120px #c93f58, 150px 120px #f4dbdf, 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
  100% {
    box-shadow: 180px 0 #f3dade, 190px 0 #d98f9c, 200px 0 #e3aeb4, 50px 10px #cd9fa9, 60px 10px #b77881, 70px 10px #ede1e1, 80px 10px #f7edee, 170px 10px #faf6f5, 180px 10px #d77f8b, 190px 10px #e198ab, 200px 10px #f1d8db, 40px 20px #f7f3f4, 50px 20px #9b4756, 60px 20px #8f2634, 70px 20px #9d3c4f, 80px 20px #a54256, 90px 20px #c67a87, 100px 20px #dbb0b7, 110px 20px #f0d2d4, 170px 20px #de9ba4, 180px 20px #dc8e9b, 190px 20px #fdf3f4, 0 30px #e4d5d8, 10px 30px #f3edef, 40px 30px #fdfdfb, 50px 30px #bd8087, 60px 30px #932a38, 70px 30px #9a2a36, 80px 30px #a0303e, 90px 30px #a53241, 100px 30px #ac384d, 110px 30px #b64154, 120px 30px #d28494, 160px 30px #eeb0bb, 170px 30px #d85a72, 180px 30px #f3e7eb, 0 40px #d7bcc1, 10px 40px #cca5aa, 20px 40px #f9f9f7, 50px 40px #c5929b, 60px 40px #972e3f, 70px 40px #9c2c3c, 80px 40px #a32e40, 90px 40px #a62f42, 100px 40px #af3147, 110px 40px #b33644, 120px 40px #b6384d, 130px 40px #f4dde3, 150px 40px #f5d6db, 160px 40px #d1495f, 170px 40px #e8a6b2, 0 50px #dec6c6, 10px 50px #9c5460, 20px 50px #caa3a8, 30px 50px #f9eef2, 50px 50px #fdf9fa, 60px 50px #bc7885, 70px 50px #9f2f3f, 80px 50px #a42f41, 90px 50px #a93245, 100px 50px #b0354a, 110px 50px #b63748, 120px 50px #bf364a, 130px 50px #e0a6b2, 140px 50px #fdfbfc, 150px 50px #d56f7c, 160px 50px #db6176, 170px 50px #fcfbf9, 0 60px #f9f9f9, 10px 60px #ecdde0, 20px 60px #b88991, 30px 60px #994d5a, 40px 60px #c18a90, 50px 60px #f4ecea, 60px 60px #efdce0, 70px 60px #bd6f7c, 80px 60px #ac4151, 90px 60px #aa3547, 100px 60px #b33449, 110px 60px #b8374b, 120px 60px #c95c6f, 130px 60px #e7b8c0, 140px 60px #e6a4ae, 150px 60px #d1415c, 160px 60px #f5d0d7, 20px 70px #f6f0f2, 30px 70px #dcbfc3, 40px 70px #ac646f, 50px 70px #9d4150, 60px 70px #b86c78, 70px 70px #deb7bc, 80px 70px #e8bfc5, 90px 70px #b85162, 100px 70px #b5374d, 110px 70px #bb3e50, 120px 70px #e8b0b9, 130px 70px #edc0c7, 140px 70px #d1465b, 150px 70px #e594a3, 40px 80px #f5eced, 50px 80px #d5aeb3, 60px 80px #b16370, 70px 80px #ab4956, 80px 80px #b65463, 90px 80px #bf6173, 100px 80px #c05664, 110px 80px #b93a4d, 120px 80px #c95266, 130px 80px #ca495f, 140px 80px #d25567, 150px 80px #faf6f7, 60px 90px #f8eff0, 70px 90px #e3c0c6, 80px 90px #b95d6c, 90px 90px #ae3348, 100px 90px #b3384c, 110px 90px #b9384e, 120px 90px #bf374b, 130px 90px #c53a51, 140px 90px #de808e, 80px 100px #f9f8f6, 90px 100px #cf8691, 100px 100px #b43546, 110px 100px #b7364a, 120px 100px #c03850, 130px 100px #c63b52, 140px 100px #d45f72, 100px 110px #d08a94, 110px 110px #b6354b, 120px 110px #bc374c, 130px 110px #c23a4e, 140px 110px #cd495e, 150px 110px #faf8f9, 100px 120px #fcfbf7, 110px 120px #cf7b8a, 120px 120px #b9384a, 130px 120px #be394a, 140px 120px #c93f58, 150px 120px #f4dbdf, 110px 130px #f7e7e7, 120px 130px #ba4357, 130px 130px #bc374c, 140px 130px #c13951, 150px 130px #e6a8b3, 100px 140px #faf6f7, 110px 140px #dfa7b0, 120px 140px #b83a4f, 130px 140px #b9354a, 140px 140px #bc384d, 150px 140px #e19ba6, 90px 150px #dbaeb5, 100px 150px #b54e5f, 110px 150px #aa3347, 120px 150px #b13446, 130px 150px #b53649, 140px 150px #b7364a, 150px 150px #d78695, 80px 160px #ca979e, 90px 160px #9f3849, 100px 160px #9e2b3c, 110px 160px #992d3d, 120px 160px #a33244, 130px 160px #ab3646, 140px 160px #b4394d, 150px 160px #bf4e62, 160px 160px #f6eaec, 60px 170px #faf8f9, 70px 170px #ba8891, 80px 170px #963e4e, 90px 170px #983645, 100px 170px #962d3c, 110px 170px #902b39, 120px 170px #952e3f, 130px 170px #9f3446, 140px 170px #a8394a, 150px 170px #b33c50, 160px 170px #eac9d0, 50px 180px #f0e6e5, 60px 180px #ae707b, 70px 180px #903846, 80px 180px #943442, 90px 180px #91313f, 100px 180px #8c2e3c, 110px 180px #8d2d39, 120px 180px #912f3e, 130px 180px #993444, 140px 180px #a3384a, 150px 180px #ab3f4f, 160px 180px #e0abb3, 40px 190px #e2ccce, 50px 190px #9b5861, 60px 190px #84313b, 70px 190px #8b2d3d, 80px 190px #862b3a, 90px 190px #8a2c3a, 100px 190px #8f2f3b, 110px 190px #932e3c, 120px 190px #972e3d, 130px 190px #9a3140, 140px 190px #9d3242, 150px 190px #a4374a, 160px 190px #b85c69, 170px 190px #fbf9fa, 30px 200px #c0979d, 40px 200px #872d39, 50px 200px #822834, 60px 200px #822736, 70px 200px #812534, 80px 200px #812635, 90px 200px #882836, 100px 200px #8f2a38, 110px 200px #912b39, 120px 200px #952c3b, 130px 200px #982e3c, 140px 200px #992e3e, 150px 200px #9c3141, 160px 200px #9a303e, 170px 200px #f2e3e8, 30px 210px #dbc2c5, 40px 210px #99515d, 50px 210px #802232, 60px 210px #7f212f, 70px 210px #7f232e, 80px 210px #822432, 90px 210px #862634, 100px 210px #8a2837, 110px 210px #8e2937, 120px 210px #902b39, 130px 210px #922938, 140px 210px #992a3b, 150px 210px #982e3c, 160px 210px #982e3c, 170px 210px #f2e3e6, 40px 220px #f7f3f4, 50px 220px #c9a2a7, 60px 220px #802836, 70px 220px #812333, 80px 220px #802431, 90px 220px #822834, 100px 220px #872735, 110px 220px #892937, 120px 220px #8a2837, 130px 220px #8f2937, 140px 220px #922938, 150px 220px #962d3c, 160px 220px #a14353, 170px 220px #f7f6f4, 60px 230px #ebdbde, 70px 230px #d4b7bb, 80px 230px #aa6d75, 90px 230px #812733, 100px 230px #862a35, 110px 230px #832736, 120px 230px #832533, 130px 230px #8c313a, 140px 230px #953944, 150px 230px #a65a67, 160px 230px #e2c3c8, 80px 240px #b1757f, 90px 240px #832732, 100px 240px #852a3b, 110px 240px #d9c3c5, 120px 240px #eadede, 130px 240px #f0e1e4, 140px 240px #efe3e5, 150px 240px #f7eef1, 60px 250px #f4efec, 70px 250px #bd9299, 80px 250px #852f3c, 90px 250px #802431, 100px 250px #bf9299, 50px 260px #efe0e3, 60px 260px #9f5866, 70px 260px #812a33, 80px 260px #80232e, 90px 260px #974e59, 100px 260px #fef8f8, 40px 270px #fdfbfe, 50px 270px #a2606c, 60px 270px #872d39, 70px 270px #842a36, 80px 270px #802431, 90px 270px #bd8890, 40px 280px #bd9596, 50px 280px #822635, 60px 280px #ab727b, 70px 280px #9e5b64, 80px 280px #812532, 90px 280px #d4b5ba, 30px 290px #d1aeb2, 40px 290px #832533, 50px 290px #bb9195, 60px 290px #fbf6fa, 70px 290px #a4636b, 80px 290px #7f2433, 90px 290px #e9dddd, 10px 300px #f6f4f5, 20px 300px #9b5c64, 30px 300px #822434, 40px 300px #be9198, 70px 300px #9c535e, 80px 300px #812031, 90px 300px #f9f0f1, 10px 310px #cbabac, 20px 310px #812635, 30px 310px #b68791, 70px 310px #a25c66, 80px 310px #7f2330, 90px 310px #f7f1f1, 0 320px #cca9af, 10px 320px #9e5a65, 20px 320px #cca8ac, 70px 320px #aa6d75, 80px 320px #802433, 90px 320px #f8eeef, 0 330px #f0e4e6, 10px 330px #edddde, 60px 330px #fbf7f8, 70px 330px #a76e75, 80px 330px #802632, 90px 330px #f8f2f2, 60px 340px #e4d1d3, 70px 340px #ac6d76, 80px 340px #802a35, 90px 340px #f2e8e7, 60px 350px #e2d2d3, 70px 350px #aa6c7b, 80px 350px #822c37, 90px 350px #f2e8e7, 60px 360px #fafcf7, 70px 360px #e6d4d4, 80px 360px #872937, 90px 360px #9d586b;
  }
}
/*kubrasait */


.containerks{
  position:relative;
  /* width: 429px; */
  /* height:300px; */
  margin: 12px auto;
  margin-left: -130px;
}

.cara{
  position:absolute;
  width:132px;
  height:132px;
  border-radius:100%;
  background:#ffeadb;
  margin:65px 175px;
    
}

.ojos{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  border-top:9px solid black;
  margin: 65px 12px;
}
.ojos::before{
  content:"";
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:black;
  margin: -17px 80px
}
.ojos::after{
   content:"";
  display:block;
  width:6px;
  height:6px;
  border-radius:100%;
  background:white;
  margin:-17px 97px
}
.iris{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:white;
  margin:-12px 83px
}
.rubor{
  position:absolute;
  width:30px;
  height:12px;
  border-radius:100%;
  background:#fea4a4;
  margin:93px 13px
}
.rubor::before{
  content:"";
  display:block;
  width:30px;
  height:12px;
  border-radius:100%;
  background:#fea4a4;
  margin:0px 75px
}
.boca{
  position:absolute;
  width:25px;
  height:25px;
  border-radius:0 0 21px 21px;
  background:#ff6666;
  margin: 102px 55px;
  overflow:hidden;
}
.boca::before{
  content:"";
  display:block;
  width:27px;
  height:21px;
  border-radius:100%;
  background:#ff9898;
  margin:9px 0;
}
.cuello{
  position:absolute;
    border-bottom: 33px solid #ffeadb;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  height: 0;
  width: 21px;
  margin:129px 57px;
  
}
.cuello::before{
  content:"";
  display:block;
  width:117px;
  height:63px;
  border-radius:90px 90px 0 0;
  background: #e81a20;
  margin:25px -46px;
}
.cuello::after{
   content:"";
  display:block;
  width:40px;
  height:27px;
  border-radius: 30px 30px 152px 152px;
  background:white;
  margin:-90px -9px;
}
.cabello{
  position:absolute;
  width:162px;
  height:80px;
  border-radius:172px 172px 0 0;
  background:black;
  margin: 30px 162px;
 
opacity:1;
    animation: c 2s linear infinite;
    -moz-animation: c 2s linear infinite;
    -webkit-animation: c 2s linear infinite;
     -o-animation: c 2s linear infinite;
}
.cabello::before{
  content:"";
  display:block;
    border-bottom: 152px solid black;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 160px;
  margin:70px -29px;
}
.cabello::after{
  content:"";
  display:block;
  width:223px;
  height:50px;
 border-radius:100%;
  background:black;
  margin:-99px -31px;
  border-bottom:5px solid #5b95e5;
}
.flequi{
  position:absolute;
  width:160px;
  height:80px;
  border-radius:152px 152px 0 0;
  background:#121212;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  margin:35px 143px;
  animation: c 2s linear infinite;
    -moz-animation: c 2s linear infinite;
    -webkit-animation: c 2s linear infinite;
     -o-animation: c 2s linear infinite;

}

.cabello3{
  position:absolute;
  width:172px;
  height:182px;
  opacity:0;
  border-radius:100%;
  background:black;
  margin: 40px 155px;
    animation: c3 2s linear infinite;
    -moz-animation: c3 2s linear infinite;
    -webkit-animation: c3 2s linear infinite;
     -o-animation: c3 2s linear infinite;
}
.flequi3{
  position:absolute;
  width:172px;
  height:85px;
  opacity:0;
  border-radius:172px 172px 0 0;
  background:#121212;
  margin:35px 155px;
  animation: c3 2s linear infinite;
    -moz-animation: c3 2s linear infinite;
    -webkit-animation: c3 2s linear infinite;
     -o-animation: c3 2s linear infinite;
}
.flequi3::before{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 30px solid #ffeadb;;
  margin:55px 45px;
}
.cabello5{
  position:absolute;
  width:182px;
  height:80px;
  opacity:0;
  border-radius:182px 182px 0 0;
  border-top:55px solid black;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  margin:60px 172px;
    animation: c5 2s linear infinite;
    -moz-animation: c5 2s linear infinite;
    -webkit-animation: c5 2s linear infinite;
     -o-animation: c5 2s linear infinite;
}
.flequi5{
  position:absolute;
  width:165px;
  height:90px;
  opacity:0;
  border-radius:182px 182px 0 0;
  border-top:43px solid #121212;
  -webkit-transform: rotate(-73deg);
  -moz-transform: rotate(-73deg);
  -ms-transform: rotate(-73deg);
  -o-transform: rotate(-73deg);
  transform: rotate(-73deg);
  margin:60px 142px;
    animation: c5 1s linear infinite;
    -moz-animation: c5 1s linear infinite;
    -webkit-animation: c5 2s linear infinite;
     -o-animation: c5 1s linear infinite;

}
.flequi5:before{
  content:"";
  display:block;
  width:112px;
  height:55px;
  border-radius:100%;
  background:#121212;
  margin:-12px 63px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
 

}
.cabello5:before{
  content:"";
  display:block;
  width:60px;
  height:60px;
  border-radius:100px;
  background:black;
  margin:-12px -30px;
}

@-webkit-keyframes c {
 
  0% {opacity: 1; }
  25%{opacity:1;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }

@-moz-keyframes c {
 
  0% {opacity: 1; }
  25%{opacity:1;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }

@eyframes c {
 
  0% {opacity: 1; }
  25%{opacity:1;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }

@-webkit-keyframes c3{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 1; }
  70%{opacity: 1; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }

@-moz-keyframes c3{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 1; }
  70%{opacity: 1; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }

@keyframes c3{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 1; }
  70%{opacity: 1; }
  90%{opacity: 0; }
  95%{opacity: 0; }
  100% {opacity: 0; } }


@-webkit-keyframes c5{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 1; }
  95%{opacity: 1; }
  100% {opacity: 1; } }

@-moz-keyframes c5{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 1; }
  95%{opacity: 1; }
  100% {opacity: 1; } }

@-keyframes c5{
 
  0% {opacity: 0; }
  25%{opacity:0;}
  50%{opacity: 0; }
  70%{opacity: 0; }
  90%{opacity: 1; }
  95%{opacity: 1; }
  100% {opacity: 1; } }
  /*kubra sait ends */

  
  
  
  .customcolumn3
  {
	  padding:0px;
  }
  
  .contentp {
    font-size: 13px;
    color: #123;
  }
   /*network accounts- proect */
  
  #neki {
  width: 100%;
  height: auto;
  margin: 10% auto;
  text-align: center;
}

.circlen,
.circle1n,
.circle2n,
.line,
.line1, 
.line2 {
  stroke: #006cb8;
  stroke-width: 3px;
}
.circlen,
.circle1n,
.circle2n {
  stroke-linecap: round;
}

/* LINE */
.line-anim {
stroke-dasharray: 91;
animation: line 1.5s ease-in-out;
}
@keyframes line {
from { stroke-dashoffset: 91; }
to { stroke-dashoffset: 0; }
}

svg:hover .line-anim {
  animation: lineH 1.5s ease-in-out forwards;
}
@keyframes lineH {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 91; }
}

/* LINE 1 */
.line-anim1 {
stroke-dasharray: 60;
animation: line1 1.5s ease-in-out;
}
@keyframes line1 {
from { stroke-dashoffset: 60; }
to { stroke-dashoffset: 0; }
}

svg:hover .line-anim1 {
  animation: line1H 1.5s ease-in-out forwards;
}
@keyframes line1H {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 60; }
}

/* LINE 2 */
.line-anim2 {
stroke-dasharray: 35;
animation: line2 1.5s ease-in-out;
}
@keyframes line2 {
from { stroke-dashoffset: 35; }
to { stroke-dashoffset: 0; }
}

svg:hover .line-anim2 {
  animation: line2H 1.5s ease-in-out forwards;
}
@keyframes line2H {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 35; }
}


/* CIRCLE */
.circle-anim {
stroke-dasharray: 41;
animation: circle1 0.5s ease-in forwards;
}
@keyframes circlen {
from { stroke-dashoffset: 41; }
to { stroke-dashoffset: 0; }
}

svg:hover .circle-anim {
animation: circleH 0.5s ease-in forwards;
animation-delay: 1s;
}
@keyframes circleH {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 41; }
}

/* CIRCLE 1 */
.circle-anim1 {
stroke-dasharray: 27;
animation: circle1 0.5s ease-in forwards;
}
@keyframes circle1n {
from { stroke-dashoffset: 27; }
to { stroke-dashoffset: 0; }
}

svg:hover .circle-anim1 {
animation: circle1H 0.5s ease-in forwards;
animation-delay: 1s;
}
@keyframes circle1H {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 27; }
}

/* CIRCLE 2 */
.circle-anim2 {
stroke-dasharray: 15;
animation: circle2 0.5s ease-in forwards;
}
@keyframes circle2n {
from { stroke-dashoffset: 15; }
to { stroke-dashoffset: 0; }
}

svg:hover .circle-anim2 {
animation: circle2H 0.5s ease-in forwards;
animation-delay: 1s;
}
@keyframes circle2H {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 15; }
}
@keyframes example {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


.payroll svg {
  margin-left:auto;
 
  height:auto;
  width:100%;
}

#orange-gear {
  transform-origin: 50% 50%;
  animation: example 4s linear infinite;
}

#blue-gear {
  transform-origin: 50% 50%;
  animation: example 4s linear infinite reverse;
}

.payroll  {

  margin:auto;
  margin-top:32px;
  width:100%;
 
}
  /* end  */
  
  /*tattvacon project */



 
  /*tattvacon project */



@-webkit-keyframes goSmoke {
	0% {opacity: 0;}
	75% {opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(2,2) translateY(-20px) rotate(30deg);}
}

@-webkit-keyframes goWindow {
	0% {background-color: #F5F19A;}
	100% {background-color: #D3BD54;}
}

@-webkit-keyframes goWheels {
	100% {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes goPackage {
	83% {-webkit-transform: translateX(120px);}
	95% {-webkit-transform: translateX(130px) translateY(25px) rotate(90deg);}
	100% {-webkit-transform: translateX(130px) translateY(25px) rotate(90deg);}
}


#wrapert {
	width: 400px;
	height: 350px;
	margin: 0 auto;
	position: relative;
	/*border: 2px solid black;*/
}

.standt {
	width: 10px;
	height: 17px;
	position: absolute;
	background-color: #4478ae;
	top: 279px;
}

#stand1 {
	left: 162px;
}
#stand2 {
	left: 203px;
}

#band {
	width: 100px;
	height: 13px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	position: absolute;
	background-color: #75bebd;
	top: 266px;
	left: 120px;
}

.wheel {
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background-color: #75bebd;
	position: absolute;
	/*-webkit-animation: goWheels 0.5s linear infinite normal;*/
}

.wheel:after {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background-color: #F5F19A;
	position: absolute;
	top: 5px;
}


#wheel1 {
	left: 5px;
	-webkit-animation: goWheels 0.5s 0.1s linear infinite normal;
}
#wheel2 {
	left: 31px;
	-webkit-animation: goWheels 0.5s 0.2s linear infinite normal;
}
#wheel3 {
	left: 56px;
	-webkit-animation: goWheels 0.5s 0.3s linear infinite normal;
}
#wheel4 {
	left: 79px;
	-webkit-animation: goWheels 0.5s 0.4s linear infinite normal;
}

.package {
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #8dc63f;
	top: 246px;
	left: 100px;
	-webkit-animation: goPackage 2s 0.3s linear infinite normal;
}



#mainFactory {
	width: 130px;
	height: 100px;
	background-color: #e6a35c;
	position: absolute;
	top: 195px;
	left: 23px;
}

#door {
	width: 25px;
	height: 40px;
	background-color: #403F63;
	position: absolute;
	top: 255px;
	left: 76px;
}

#door:after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: #F5F19A;
	position: absolute;
	top: 21px;
	left: 15px;

}

.window{
	width: 25px;
	height: 25px;
	background-color: #fde28b;
	position: absolute;
	border: 2px solid #403F63;
	-webkit-transition: background-color 0.3s linear;
	-webkit-animation: goWindow 3s infinite alternate;
}

#window1 {
	top: 216px;
	left: 40px;
}

#window2 {
	top: 216px;
	left: 113px;
}

#roof1 {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 0 33px 48px;
	border-color: transparent transparent #403F63 transparent;
	position: absolute;
	top: 162px;
	left: 22px;
}

#roof2 {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0px 0 44px 60px;
	border-color: transparent transparent #403F63 transparent;
	position: absolute;
	top: 151px;
	left: 93px;
}

#chim1 {
	width: 25px;
	height: 80px;
	background-color: #e2c4a5;
	position: absolute;
	top: 115px;
	left: 70px;
}

#chim2 {
	width: 25px;
	height: 102px;
	background-color: #E2C4A5;
	position: absolute;
	top: 93px;
	left: 120px;
}

.stripe {
	width: 25px;
	height: 10px;
	background-color: #BE1E2D;
	position: absolute;
}

#stripe1 {
	top: 128px;
	left: 70px;
}
#stripe2 {
	top: 145px;
	left: 70px;
}
#stripe3 {
	top: 105px;
	left: 120px;
}
#stripe4 {
	top: 123px;
	left: 120px;
}

.smoke {
	width: 19px;
	height: 18px;
	position: absolute;
	opacity: 0;
}

.sCloud {
	width: 60%;
	height: 0.7em;
	background-color: #E6E7E8;
	position: absolute;
	border-radius: 18px;
}

#smoke1 {
	top: 91px;
	left: 70px;
	-webkit-transition-property: opacity,webkit-transform;
	-webkit-transition-duration: 1s,1s;
	-webkit-transition-timing-function: linear,linear;
	-webkit-animation: goSmoke 2s 0.3s infinite normal;
}

#smoke2 {
	top: 71px;
	left: 120px;
	-webkit-transition-property: opacity,webkit-transform;
	-webkit-transition-duration: 1s,1s;
	-webkit-transition-timing-function: linear,linear;
	-webkit-animation: goSmoke 2s 1.3s infinite normal;
}	

#sCloud1, #sCloud4{
	top: 2px;
}

#sCloud2, #sCloud5{
	left: 6px;
}

#sCloud3, #sCloud6{
	top: 6px;
	left: 7px;
}

#tree {
	width: 54px;
	height: 87px;
	position: absolute;
	top: 208px;
	left: 0px;
}

#branch {
	width: 9px;
	height: 37px;
	position: absolute;
	background-color: #754C29;
	top: 50px;
	left: 23px;
}

.leaves {
	width: 35px;
	height: 35px;
	background-color: #8DC63F;
	position: absolute;
	border-radius: 18px;
}

#leaves1{
	top: 20px;
}
#leaves2{
	left: 10px;
}
#leaves3{
	top: 20px;
	left: 19px;
}




.treet {
     fill: #b68000;
    height:220px;
    left: calc(50% - 23vh);
    position: relative;
    width: 300px;
}

.leaft {
  fill: #009100;
  opacity: 0;
}
/* end */

/* knynk start */

.contentk {
  width: 100%;
  margin: 0 auto 50px;
}

.contentk__inner {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  /* grid-gap: 60px; */
  justify-contentk: center;
  margin-top: 0px;
}

.icon-block {
  width: 180px;
  text-align: center;
}
.icon-block .icon {
  width: 100%;
  height: 150px;
}
.icon-block svg {
  width: 168px;
  height: 204px;
  overflow: visible;
}

.icon-block__replay {
  margin-top: 15px;
}

#painting {
      -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -moz-transform-origin: 50% -40px 0 0 50%;
    -ms-transform-origin: 50% -40px 0 0 50%;
    -webkit-transform-origin: 50% -40px 0 0 50%;
    transform-origin: 50% -40px 0 0 50%;
    position: relative;
    display: inline-block;
    background: #211309;
    width: 100%;
    height: 234px;
    border: solid 3px #211309;
    margin-top: 150px;
    margin-left: -23px;
}
#painting:before, #painting:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 25px;
}
#painting:before {
  top: 2px;
  bottom: 2px;
  border-color: transparent #bb6c39;
}
#painting:after {
  left: 2px;
  right: 2px;
  border-color: #bb6c39 transparent;
}
#painting .nail {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  background: #211309;
  top: -40px;
  left: 0;
  right: 0;
  height: 6px;
  width: 6px;
  margin: auto;
}
#painting .nail:before, #painting .nail:after {
  -moz-transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  content: " ";
  position: absolute;
  background: #211309;
  height: 50px;
  width: 2px;
  left: 2px;
  top: 2px;
}
#painting .nail:before {
  -moz-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
#painting .nail:after {
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
#painting .plaque {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  background: #ffbf22;
  font-size: 11px;
  left: 0;
  right: 0;
  bottom: 5px;
  width: 125px;
  margin: auto;
  border: solid 2px #211309;
  z-index: 10;
}
#painting .plaque:before, #painting .plaque:after {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  content: " ";
  position: absolute;
  background: #211309;
  top: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  margin: auto;
}
#painting .plaque:before {
  left: 2px;
}
#painting .plaque:after {
  right: 2px;
}
#painting .background {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  bottom: 28px;
  background: #211309;
  border-top: solid 144px #a3cacd;
  border-bottom: solid 25px #8ca1bd;
}
#painting .boat {
  -moz-border-radius-bottomleft: 12px 22px;
  -webkit-border-bottom-left-radius: 12px 22px;
  border-bottom-left-radius: 12px 22px;
  -moz-border-radius-bottomright: 12px 22px;
  -webkit-border-bottom-right-radius: 12px 22px;
  border-bottom-right-radius: 12px 22px;
  position: absolute;
  background: #c95539;
  width: 136px;
  height: 21px;
  top: 153px;
  left: 0;
  right: 0;
  border: solid 2px #211309;
  margin: auto;
}
#painting .boat:before {
  -moz-border-radius: 0 0 7px 7px;
  -webkit-border-radius: 0;
  border-radius: 0 0 7px 7px;
  content: " ";
  position: absolute;
  background: #c95539;
  width: 152px;
  height: 6px;
  top: -10px;
  left: -12px;
  border: solid 2px #211309;
}
#painting .boat:after {
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  content: " ";
  position: absolute;
  background: #c95539;
  width: 4px;
  height: 100px;
  top: -112px;
  left: 50%;
  margin-left: -4px;
  border: solid 2px #211309;
}
#painting .boat .sail-left {
  -moz-transform: rotate(22deg);
  -ms-transform: rotate(22deg);
  -webkit-transform: rotate(22deg);
  transform: rotate(22deg);
  top: -100px;
  left: 14px;
}
#painting .boat .sail-left, #painting .boat .sail-left:before {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  content: " ";
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #211309 transparent;
  border-width: 0 22px 77px 31px;
}
#painting .boat .sail-left:before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  content: " ";
  top: 4px;
  left: -28px;
  border-bottom-color: #ffffff;
  border-width: 0 19px 71px 28px;
}
#painting .boat .sail-right {
  -moz-transform: rotate(-23deg);
  -ms-transform: rotate(-23deg);
  -webkit-transform: rotate(-23deg);
  transform: rotate(-23deg);
  top: -106px;
  left: 64px;
}
#painting .boat .sail-right, #painting .boat .sail-right:before {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  content: " ";
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #211309 transparent;
  border-width: 0 26px 85px 24px;
}
#painting .boat .sail-right:before {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  content: " ";
  top: 5px;
  left: -22px;
  border-bottom-color: #ffffff;
  border-width: 0 24px 78px 22px;
}
#painting .clouds {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
  -webkit-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
  box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
  position: absolute;
  background: #ffffff;
  width: 30px;
  height: 30px;
  top: 50px;
  left: 45px;
}

/* end */

/*bluebotfilms */


.absolute_centre{
	margin: auto;

	position: relative;
	    top: 20px; left: 0; right: 0; bottom: 0;
}


.sectionb{
	width: 100%;
	height: 128px;
	border-radius: 15px;
	background-color: #c64a57;
	box-shadow: 0 0px 0px 5px #ffffff, 0 5px 10px 7px rgba(31,32,44,1);
	z-index: 100;
}

	.recb{
		overflow: hidden;
		border-radius: 15px 15px 0 0;
		height: 35px;
		z-index: 200;
	}

		.skew{
			position: relative;
			top: 0px;
			left: 25px;

			width: 18px;
			height: 18px;
			
     -webkit-transform: skewX(35deg);
        -moz-transform: skewX(35deg);
         -ms-transform: skewX(35deg);
          -o-transform: skewX(35deg);
        
  
			box-shadow: 30px 0 0 0 #47afca, 60px 0 0 0 #47afca, 90px 0 0 0 #47afca ;
			
			background: #47afca;
			z-index: 300;

		}

		.skew:after{
			content: '';
			position: absolute;
			top: 0px;
			left: 18px;

			width: 14px;
			height: 18px;
			box-shadow: 30px 0 0 0 #fff, 60px 0 0 0 #fff, 90px 0 0 0 #fff;

			background: #fff;
			z-index: 300;

		}

		.clipping{
			position: relative;
			top: 0px;
			left: 25px;
			width: 18px;
			height: 18px;
			-webkit-transform: skewX(-35deg);
			-moz-transform: skewX(-35deg);
			-ms-transform: skewX(-35deg);
			-o-transform: skewX(-35deg);
			box-shadow: 30px 0 0 0 #7bcdea, 60px 0 0 0 #7bcdea, 90px 0 0 0 #7bcdea;
			background: #7acdea;
			z-index: 300;
		}

		.clippingb:after{
			content: '';
			position: absolute;
			top: 0px;
			left: 18px;

			width: 14px;
			height: 18px;
			box-shadow: 30px 0 0 0 #fce6ca, 60px 0 0 0 #fce6ca, 90px 0 0 0 #fce6ca;
			background: #fce6ca;

			z-index: 300;

		}

		.trap{

position: relative;

top: -61px;

left: 0px;

width: 10px;

border-top: 43px solid transparent;

border-left: 32px solid #000000;

border-bottom: 35px solid #000000;

z-index: 400;

}

		.circleb{
			position: absolute;
			width: 13px;
			height: 13px;
			top: 13px; left: 10px;
			background: white;
			border-radius: 50%;

			z-index: 500;

		}


.sectionb h1{

font-family: 'Condiment', cursive;

font-size: 30px;

font-weight: 400;

letter-spacing: 0em;

text-shadow: 0 1px 5px #1c1e47;

text-shadow: 0 1px 5px rgba(0,0,0,.7);

color: #ffffff;

position: absolute;

top: 65px;

left: 12px;

-webkit-transform: rotate(-7deg);

-moz-transform: rotate(-7deg);

-ms-transform: rotate(-7deg);

-o-transform: rotate(-7deg);
}

.lineb{
	position: absolute;
	width: 60px;
	height: 2px;
	top: 92px; left: 51px;
	background: #f6fcfc;
	border-radius: 200px / 10px;

	-webkit-transform: rotate(-8deg);
     -moz-transform: rotate(-8deg);
      -ms-transform: rotate(-8deg);
       -o-transform: rotate(-8deg);
  
  
  
	box-shadow: 0 1px 5px rgba(0,0,0,.7);
  
	z-index: 500;
}


.bluebotfilms svg {
  height: 50vh;
  max-width: 100%;
  display: block;
  margin: 2vh auto;
  padding-right:15px;
}

.bluebotfilms .hide {
  opacity: 0;
}

@-webkit-keyframes rotate-c {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate-c {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-cc {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes rotate-cc {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.sml-video-film {
  -webkit-transform-origin: 53% 50%;
          transform-origin: 53% 50%;
  -webkit-animation: rotate-cc 5s infinite linear;
          animation: rotate-cc 5s infinite linear;
}

.lrg-video-film {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: rotate-c 10s infinite linear;
          animation: rotate-c 10s infinite linear;
}

@-moz-document url-prefix() {
  .sml-video-film {
    transform-origin: default;
    animation: none;
  }

  .lrg-video-film {
    transform-origin: default;
    animation: none;
  }
}
/*end */

/* gulmohar events */
#hand-2 {
  height: 225px;
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 310px;
  margin-left: -81px;
}

g#XMLID_5_ {
  animation-name: rotate;
  animation-duration: 2.3s;
  animation-iteration-count: infinite;
}

g#XMLID_1987_ {
  animation-name: move;
  animation-duration: 2.3s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}


@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: translate3d(0, -30px, 0);
  }
}
#moneybankg
{
  width: 230px;
  margin:0 auto;
  position:relative;
}
#piggymoneybankg
{
  width: 230px;
  margin:0 auto;
  position:relative;
  margin-top: 100px;
}
#pigbodyg
{
  width: 230px;
  background:#eb5546;
  height: 140px;
  border-radius:150px;
  margin:0 auto;
  position:relative;
}
#pigbodyg:before
{
 display:block;
 content:"";
 width:35px;
 height: 57px;
 position:absolute;
 background:#eb5546;
 top: 57px;
 left: -11px;
}
#pigbodyg:after
{
 display: block;
 content: "";
 width: 30px;
 height: 30px;
 position: absolute;
 background: transparent;
 border: 14px solid #eb5546;
 top: 48px;
 right: -19px;
 border-radius: 100%;
 z-index: 1;
border-bottom: 15px solid #ffffff;
    -webkit-transform: rotate(320deg);
    -moz-transform: rotate(320deg);
    transform: rotate(324deg);
}

.piglegfront
{
  width: 18px;
  height: 25px;
  border-radius:0px 0px 15px 20px;
  background:#eb5546;
  transform:skew(50deg,110deg);
  -webkit-transform:skew(155deg,180deg);
  -moz-transform:skew(155deg,180deg);
}

.piglegback
{
 width: 18px;
 height: 25px;
 border-radius:0px 0px 15px 20px;
 background:#bc4438;
 transform:skew(50deg,110deg);
 -webkit-transform:skew(155deg,180deg);
 -moz-transform:skew(155deg,180deg);
}

.legoneg
{position:absolute;bottom: -23px;left: 153px;}
.legtwog
{position:absolute;bottom: -25px;right: 140px;}
.legthreeg
{position:absolute;bottom: -24px;right: 161px;z-index: 0;}
.legfourg
{position:absolute;bottom: -25px;left: 132px;z-index: 0;}

#pigeyeg
{width: 15px;height: 15px;background:#fff;border-radius:100%;position:absolute;top: 40px;left: 17px;}

.pigearsg
{width:35px;height:40px;border-radius:0px 20px 0px 0px;position:absolute;}

.earoneg
{
  top: -14px;
  left: 75px;
  -webkit-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  transform:rotate(-30deg);
  background:#bc4438;
  z-index:-1;
}
.earoneg
{top: -27px;
  left: 108px;
  background:#eb5546;
}

#moneydoorg
{
  width: 108px;
  height: 18px;
  background:#bc4438;
  position:absolute;
  top:20px;
  left: 63px;
}
#moneydoorgoverlapg
{
  width:125px;
  height:90px;
  background:#eb5546;
  position:absolute;
  top: 38px;
  left: 50px;
  z-index:125;
}

#coing{
  width: 40px;
  height: 40px;
  border-radius:100%;
  background:#f8b500;
  position:absolute;
  top:-200px;
  left: 96px;
  z-index:99;
  -webkit-animation:insertcoing 1s infinite;
  -moz-animation:insertcoing 1s infinite;
  animation:insertcoing 1s infinite;
}

#moneybankg h1{color: #ffffff;font-size: 18px;font-weight: 300;
text-align: center;padding-top: 39px;position: absolute;z-index: 126;
left: 47px;
    top: 34px;
    text-shadow: 0px 0px 5px #ab3024;
    font-family: 'Nanum Gothic', sans-serif;
}

@-webkit-keyframes insertcoing
{
0%{top:-200px;}
100%{top:48px;}
}

@-moz-keyframes insertcoing
{
0%{top:-200px;}
100%{top:48px;}
}  

@keyframes insertcoing
{
0%{top:-125px;}
100%{top:48px;}
}
/* end */