.home-test-bg{
	position: relative;
	width: 100%;

}

.home-svg-pane{
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.svg-back{
	width: 100%;
	height: 100%;
}

#drawing-area{
	position: absolute;
	width: 41.7%;
	left:29.167%;
	top:27.15%;
	cursor: pointer;
	display: none;
}

.svg-back-points{
	width: 100%;
	height: 100%;
	display: none;
}

.clock-base{
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
  animation-duration: 1s;
  animation-delay: 1s;
}


#clock-hands{
  -webkit-animation-duration: 1.5s;
  -webkit-animation-delay: 1s;
  animation-duration: 1.5s;
  animation-delay: 1s;
}

#hour{ 
  stroke-width: 6px;
  fill: #ffffff;
  stroke: #ffffff;
}

#min { 
  stroke-width: 6px;
  fill: #ffffff;
  stroke: #ffffff;
}

#sec { 
  stroke-width: 2px;
  fill: #e9004b;
  stroke: #e9004b;
}

/*
@keyframes short-rotate {
  50% {
    -webkit-transform: rotate(-360deg) ;
	-moz-transform:    rotate(-360deg) ;
	-o-transform:      rotate(-360deg) ;
	-ms-transform:     rotate(-360deg) ;
	} 
}*/

#clock-heart{
 -webkit-transform-origin: 426.17px 124.39px;
  -ms-transform-origin: 426.17px 124.39px;
  transform-origin: 426.17px 124.39px;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2.7s;
  animation-duration: 1s;
  animation-delay: 2.7s;
}

.calender-group g:nth-child(1){
	-webkit-transform-origin: 1460.7px 42px;
    -ms-transform-origin: 1460.7px 42px;
    transform-origin: 1460.7px 42px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 3s;
	animation-duration: 1s;
	animation-delay: 3s;
}

.calender-group g:nth-child(2){
	-webkit-transform-origin: 1181.28px 102.5px;
    -ms-transform-origin: 1181.28px 102.5px;
    transform-origin: 1181.28px 102.5px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 3.6s;
	animation-duration: 1s;
	animation-delay: 3.6s;
}

.calender-group g:nth-child(3){
	-webkit-transform-origin: 1741.98px 102.5px;
    -ms-transform-origin: 1741.98px 102.5px;
    transform-origin: 1741.98px 102.5px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 3.6s;
	animation-duration: 1s;
	animation-delay: 3.6s;
}

.calender-group g:nth-child(4){
	-webkit-transform-origin: 1173.02px 61.24px;
    -ms-transform-origin: 1173.02px 61.24px;
    transform-origin: 1173.02px 61.24px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 4s;
	animation-duration: 1s;
	animation-delay: 4s;
}

.calender-group g:nth-child(5){
	-webkit-transform-origin: 1744.97px 61.24px;
    -ms-transform-origin: 1744.97px 61.24px;
    transform-origin: 1744.97px 61.24px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 4s;
	animation-duration: 1s;
	animation-delay: 4s;
}

.folder-group g:nth-child(1){
	-webkit-transform-origin: 126.17px 662.71px;
    -ms-transform-origin: 126.17px 662.71px;
    transform-origin: 126.17px 662.71px;
	-webkit-animation-duration: 1s;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 5s;
	animation-duration: 0.5s;
	animation-delay: 5s;
}
.folder-group g:nth-child(2){
	-webkit-transform-origin: 203.67px 662.71px;
    -ms-transform-origin: 203.67px 662.71px;
    transform-origin: 203.67px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 5.4s;
	animation-duration: 0.5s;
	animation-delay: 5.4s;
}
.folder-group g:nth-child(3){
	-webkit-transform-origin: 281.17px 662.71px;
    -ms-transform-origin: 281.17px 662.71px;
    transform-origin: 281.17px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 5.7s;
	animation-duration: 0.5s;
	animation-delay: 5.7s;
}
.folder-group g:nth-child(4){
	-webkit-transform-origin: 358.54px 662.71px;
    -ms-transform-origin: 358.54px 662.71px;
    transform-origin: 358.54px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 6s;
	animation-duration: 0.5s;
	animation-delay: 6s;
}
.folder-group g:nth-child(5){
	-webkit-transform-origin: 411.17px 662.71px;
    -ms-transform-origin: 411.17px 662.71px;
    transform-origin: 411.17px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 6.2s;
	animation-duration: 0.5s;
	animation-delay: 6.2s;
}
.folder-group g:nth-child(6){
	-webkit-transform-origin: 438.67px 662.71px;
    -ms-transform-origin: 438.67px 662.71px;
    transform-origin: 438.67px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 6.5s;
	animation-duration: 0.5s;
	animation-delay: 6.5s;
}
.folder-group g:nth-child(7){
	-webkit-transform-origin: 467.27px 662.71px;
    -ms-transform-origin: 467.27px 662.71px;
    transform-origin: 467.27px 662.71px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 6.8s;
	animation-duration: 0.5s;
	animation-delay: 6.8s;
}

.book-group > g:nth-child(1){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 7.3s;
	animation-duration: 0.5s;
	animation-delay: 7.3s;
}

.book-group > g:nth-child(2){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 7.5s;
	animation-duration: 0.5s;
	animation-delay: 7.5s;
}

.book-group > g:nth-child(3){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 7.7s;
	animation-duration: 0.5s;
	animation-delay: 7.7s;
}
.book-group > g:nth-child(4){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 7.9s;
	animation-duration: 0.5s;
	animation-delay: 7.9s;
}
.book-group > g:nth-child(5){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 8.1s;
	animation-duration: 0.5s;
	animation-delay: 8.1s;
}
.book-group > g:nth-child(6){
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 8.3s;
	animation-duration: 0.5s;
	animation-delay: 8.3s;
}

.penpot-group g:nth-child(1){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 8.5s;
	animation-duration: 0.3s;
	animation-delay: 8.5s;
	
}
.penpot-group g:nth-child(2){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 8.7s;
	animation-duration: 0.3s;
	animation-delay: 8.7s;
}

.penpot-group g:nth-child(3){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 8.9s;
	animation-duration: 0.3s;
	animation-delay: 8.9s;
}

.penpot-group g:nth-child(4){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 9.1s;
	animation-duration: 0.3s;
	animation-delay: 9.1s;
}

.penpot-group g:nth-child(5){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 9.3s;
	animation-duration: 0.3s;
	animation-delay: 9.3s;
}

.penpot-group g:nth-child(6){
	-webkit-transform-origin: 1531.07px 687.47px;
    -ms-transform-origin: 1531.07px 687.47px;
    transform-origin: 1531.07px 687.47px;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-delay: 8.3s;
	animation-duration: 0.5s;
	animation-delay: 8.3s;
}

#coffee-cup{
	-webkit-transform-origin: 1822.62px 584.15px;
    -ms-transform-origin: 1822.62px 584.15px;
    transform-origin: 1822.62px 584.15px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 9.5s;
	animation-duration: 1s;
	animation-delay: 9.5s;
}

.sticky-group g:nth-child(1){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 10.5s;
	animation-duration: 0.3s;
	animation-delay: 10.5s;
}

.sticky-group g:nth-child(2){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 10.7s;
	animation-duration: 0.3s;
	animation-delay: 10.7s;
}

.sticky-group g:nth-child(3){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 10.9s;
	animation-duration: 0.3s;
	animation-delay: 10.9s;
}

.sticky-group g:nth-child(4){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 11.1s;
	animation-duration: 0.3s;
	animation-delay: 11.1s;
}

.sticky-group g:nth-child(5){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 11.3s;
	animation-duration: 0.3s;
	animation-delay: 11.3s;
}

.sticky-group g:nth-child(6){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 11.4s;
	animation-duration: 0.3s;
	animation-delay: 11.4s;
}

.sticky-group g:nth-child(7){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 11.6s;
	animation-duration: 0.3s;
	animation-delay: 11.6s;
}

.mac-group g:nth-child(1){
	-webkit-animation-duration: 0.7s;
	-webkit-animation-delay: 12s;
	animation-duration: 0.7s;
	animation-delay: 12s;
}

.mac-group g:nth-child(2){
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 13s;
	animation-duration: 0.3s;
	animation-delay: 13s;
}

.cup-group g:nth-child(1){
	-webkit-animation-duration: 0.6s;
	-webkit-animation-delay: 12.7s;
	animation-duration: 0.6s;
	animation-delay: 12.7s;
}

.cup-group g:nth-child(2){
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 13s;
	animation-duration: 2s;
	animation-delay: 13s;
}

/*
*  pause screen
*/


#pause-screen{
	position: absolute;
	width: 13%;
    left: 43.5%;
    top: 35.5%;
    display: none;
}

#pause-screen circle{
	fill:black;
	-webkit-transition: all .5s;
  	transition: all .5s;
}

#pause-screen:hover circle{
	fill:#e9004b;
	-webkit-transition: all .5s;
  	transition: all .5s;
}

#pause-screen-back{
	position: absolute;
	width: 41.7%;
	left:29.167%;
	top:27.15%;
	display: none;
}


.learn-more{
	font-size: 20px;
}


/*
*  open
*/
.computer-bg{
	fill: #b3b1b1;
}

.anim-heart-beating{
    -webkit-transform-origin: center center;
    transform-origin: center center;
    animation: heart-beating 3s; 
}


@-webkit-keyframes heart-beating {
  0%,40%,80% {
    -webkit-transform: translateY(0%);  
  }
  20%,60% {
    -webkit-transform: translateY(8%);  
  } 

  80% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes heart-beating {
  0%,40%,80% {
    transform: translateY(0%);  
  }
  20%,60% {
    transform: translateY(8%);  
  } 
  80% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.anim-processing-bar{
	-webkit-transform-origin: 2000px 150px;
	transform-origin: 200px 150px;
	-webkit-transform: scale(0, 1) translate(100px, 0);
	transform: scale(0, 1) translate(100px, 0);
	-webkit-animation: moving-panel 4s; 
	animation: moving-panel 4s; 
	fill:#777779;
}

@-webkit-keyframes moving-panel {
  100% {
    -webkit-transform: scale(0.4, 1) translate(125px, 0);
    } 
}

@keyframes moving-panel {
  100% {
    transform: scale(0.4, 1) translate(125px, 0); 
  } 
}
/* 
*  brand
*/
.heart-animation{
    stroke-dasharray: 680;
    stroke-dashoffset: 680;
 	-webkit-animation: dash 3s linear forwards;
 	animation: dash 3s linear forwards;
}



.text-brand-animation{
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
 	-webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

/* 
*  Design
*/
#design-animation{
  	display: none;

}
.pencil-animation{
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

.text-design-animation{
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

/* 
*  Digital
*/
#digital-animation{
  display: none;
}
.computer-animation{
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

.text-digital-animation{
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}


@keyframes dash {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash {
  100% {
    stroke-dashoffset: 0;
  }
}

/* 
*  fill the color
*/
.anim-shape-left-right {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scale(0.35, 1);
  transform: scale(0.35, 1);
  -webkit-animation: moving-panel-left-right 4s linear; 
  animation: moving-panel-left-right 4s linear; 
  fill:#e9004b;
}

.anim-shape-from-central {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  transform: scale(0, 1);
  -webkit-animation: moving-panel-from-central 4s linear;
  animation: moving-panel-from-central 4s linear; 
  fill:#e9004b;
}

#replay-animation{
	display: none;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

#replay-animation:hover path,#replay-animation:hover polygon{
	fill:#e9004b;
	-webkit-transition: all .5s;
  	transition: all .5s;
}

@keyframes moving-panel-from-central {
  100% {
    transform: scale(0.8, 1); 
	} 
}

@-webkit-keyframes moving-panel-from-central {
  100% {
    -webkit-transform: scale(0.8, 1) ;
	} 
}

@keyframes moving-panel-left-right {
  100% {
    transform: scale(0.65, 1); 
	} 
}

@-webkit-keyframes moving-panel-left-right {
  100% {
    -webkit-transform: scale(0.65, 1);
	} 
}