/* --------  HERO CONTAINER ---------- */

.hero-animated {
	min-height: 550px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding-top: 50px;
}

@media screen and (max-width: 440px) {
  .hero-animated {
    padding-top: 0;
  }
}


/* --------  ICONS AND ANIMATIONS  ---------- */

.icon-wrapper {
	width: 76px;
	height: 76px;
	position: absolute;
	left: -10px;
	top: 10px;
}

@media screen and (max-width: 440px) {
  .icon-wrapper {
    left: 0;
  }
}

.icon-1,
.icon-2,
.icon-3,
.icon-4,
.icon-5,
.icon-6,
.icon-7,
.icon-8,
.icon-9,
.icon-10 {
 	opacity: 0;
 }

.icon-1 {
	animation: icon-animate-1 10.5s ease-in-out;
}

@keyframes icon-animate-1 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  3% {
  	opacity: 1;
  	transform: translateY(0);
  }
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  10% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-2 {
	animation: icon-animate-2 10.5s ease-in-out;
}

@keyframes icon-animate-2 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  10% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  13% {
  	opacity: 1;
  	transform: translateY(0);
  }
  17% {
  	opacity: 1;
  	transform: translateY(0);
  }
  20% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-3 {
	animation: icon-animate-3 10.5s ease-in-out;
}

@keyframes icon-animate-3 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  20% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  23% {
  	opacity: 1;
  	transform: translateY(0);
  }
  27% {
  	opacity: 1;
  	transform: translateY(0);
  }
  30% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}


.icon-4 {
	animation: icon-animate-4 10.5s ease-in-out;
}

@keyframes icon-animate-4 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  30% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  33% {
  	opacity: 1;
  	transform: translateY(0);
  }
  37% {
  	opacity: 1;
  	transform: translateY(0);
  }
  40% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-5 {
	animation: icon-animate-5 10.5s ease-in-out;
}

@keyframes icon-animate-5 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  40% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  43% {
  	opacity: 1;
  	transform: translateY(0);
  }
  47% {
  	opacity: 1;
  	transform: translateY(0);
  }
  50% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-6 {
	animation: icon-animate-6 10.5s ease-in-out;
}

@keyframes icon-animate-6 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  50% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  53% {
  	opacity: 1;
  	transform: translateY(0);
  }
  57% {
  	opacity: 1;
  	transform: translateY(0);
  }
  60% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-7 {
	animation: icon-animate-7 10.5s ease-in-out;
}

@keyframes icon-animate-7 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  60% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  63% {
  	opacity: 1;
  	transform: translateY(0);
  }
  67% {
  	opacity: 1;
  	transform: translateY(0);
  }
  70% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}


.icon-8 {
	animation: icon-animate-8 10.5s ease-in-out;
}

@keyframes icon-animate-8 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  70% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  73% {
  	opacity: 1;
  	transform: translateY(0);
  }
  77% {
  	opacity: 1;
  	transform: translateY(0);
  }
  80% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-9 {
	animation: icon-animate-9 10.5s ease-in-out;
}

@keyframes icon-animate-9 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  80% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  83% {
  	opacity: 1;
  	transform: translateY(0);
  }
  87% {
  	opacity: 1;
  	transform: translateY(0);
  }
  90% {
  	opacity: 0;
  	transform: translateY(25px);
  }
  100% {
  	opacity: 0;
  }
}

.icon-10 {
	animation: icon-animate-10 10.5s ease-in-out;
}

@keyframes icon-animate-10 {
  0% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  90% {
  	opacity: 0;
  	transform: translateY(-25px);
  }
  93% {
  	opacity: 1;
  	transform: translateY(0);
  }
  97% {
  	opacity: 1;
  	transform: translateY(0);
  }
  100% {
  	opacity: 0;
  	transform: translateY(25px);
  }

}

#icon-11_left {
  animation: icon-animate-11_left 11.95s ease-in-out;
  transform-origin: 55% 50%;
}

@keyframes icon-animate-11_left {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  93% {
    opacity: 0;
    transform: scale(0, 0);
  }
  97% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }

}

#icon-11_middle {
  animation: icon-animate-11_middle 11.75s ease-in-out;
  transform-origin: 50% 50%;
}

@keyframes icon-animate-11_middle {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  89% {
    opacity: 0;
    transform: scale(0, 0);
  }
  92% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }

}

#icon-11_right {
  animation: icon-animate-11_right 11.95s ease-in-out;
  transform-origin: 45% 50%;
}

@keyframes icon-animate-11_right {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  96% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }

}


/* --------  HEADER TEXT AND ANIMATIONS  ---------- */

.header-wrapper {
	width: 380px;
	margin: 0 auto 0 auto;
	position: relative;
	padding-bottom: 20px;
}


h1.hero-header {
	height: 100px;
	margin: 0 0 0 90px;
	position: relative;
}

.hero-text_top-line, .hero-text_bottom-line {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #231a11;
}

.hero-text_top-line {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.hero-text_anmiated {
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #231a11;
	position: absolute;
	top: 30px;
	left: 0;
	margin: 0;
}

.hero-text_bottom-line {
	position: absolute;
	top: 60px;
	left: 0;
	margin: 0;
}

@media screen and (max-width: 440px) {
  .header-wrapper {
  	width: 296px;
  }
  h1.hero-header {
    font-size: 30px !important;
  }
  #hero-text_anmiated-5 {
  	letter-spacing: -2px;
  }
}

#hero-text_anmiated-1,
#hero-text_anmiated-2,
#hero-text_anmiated-3,
#hero-text_anmiated-4,
#hero-text_anmiated-5,
#hero-text_anmiated-6,
#hero-text_anmiated-7,
#hero-text_anmiated-8,
#hero-text_anmiated-9,
#hero-text_anmiated-10 {
	opacity: 0;
}

#hero-text_anmiated-1 {
	animation: text-animate-1 10.5s ease-in-out;
}

@keyframes text-animate-1 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  3% {
  	opacity: 1;
  	transform: translateX(0);
  }
  7% {
    opacity: 1;
    transform: scale(1.0);
  }
  10% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-2 {
	animation: text-animate-2 10.5s ease-in-out;
}

@keyframes text-animate-2 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  10% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  13% {
  	opacity: 1;
  	transform: translateX(0);
  }
  17% {
  	opacity: 1;
  	transform: translateX(0);
  }
  20% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-3 {
	animation: text-animate-3 10.5s ease-in-out;
}

@keyframes text-animate-3 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  20% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  23% {
  	opacity: 1;
  	transform: translateX(0);
  }
  27% {
  	opacity: 1;
  	transform: translateX(0);
  }
  30% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}


#hero-text_anmiated-4 {
	animation: text-animate-4 10.5s ease-in-out;
}

@keyframes text-animate-4 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  30% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  33% {
  	opacity: 1;
  	transform: translateX(0);
  }
  37% {
  	opacity: 1;
  	transform: translateX(0);
  }
  40% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-5 {
	animation: text-animate-5 10.5s ease-in-out;
}

@keyframes text-animate-5 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  40% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  43% {
  	opacity: 1;
  	transform: translateX(0);
  }
  47% {
  	opacity: 1;
  	transform: translateX(0);
  }
  50% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-6 {
	animation: text-animate-6 10.5s ease-in-out;
}

@keyframes text-animate-6 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  50% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  53% {
  	opacity: 1;
  	transform: translateX(0);
  }
  57% {
  	opacity: 1;
  	transform: translateX(0);
  }
  60% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-7 {
	animation: text-animate-7 10.5s ease-in-out;
}

@keyframes text-animate-7 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  60% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  63% {
  	opacity: 1;
  	transform: translateX(0);
  }
  67% {
  	opacity: 1;
  	transform: translateX(0);
  }
  70% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}


#hero-text_anmiated-8 {
	animation: text-animate-8 10.5s ease-in-out;
}

@keyframes text-animate-8 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  70% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  73% {
  	opacity: 1;
  	transform: translateX(0);
  }
  77% {
  	opacity: 1;
  	transform: translateX(0);
  }
  80% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-9 {
	animation: text-animate-9 10.5s ease-in-out;
}

@keyframes text-animate-9 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  80% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  83% {
  	opacity: 1;
  	transform: translateX(0);
  }
  87% {
  	opacity: 1;
  	transform: translateX(0);
  }
  90% {
  	opacity: 0;
  	transform: scale(0.9);
  }
  100% {
  	opacity: 0;
  }
}

#hero-text_anmiated-10 {
	animation: text-animate-10 10.5s ease-in-out;
}

@keyframes text-animate-10 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  90% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  93% {
  	opacity: 1;
  	transform: translateX(0);
  }
  97% {
  	opacity: 1;
  	transform: translateX(0);
  }
  100% {
  	opacity: 0;
  	transform: scale(0.9);
  }

}

#hero-text_anmiated-11 {
	animation: text-animate-11 10.8s ease-in-out;
	display: inline-block;
}

@keyframes text-animate-11 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  98% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  100% {
  	opacity: 1;
  	transform: translateX(0);
  }
}

#hero-text_anmiated-12 {
	animation: text-animate-12 11.8s ease-in-out;
	display: inline-block;
	margin-left: 6px;
}

@keyframes text-animate-12 {
  0% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  98% {
  	opacity: 0;
  	transform: translateX(25px);
  }
  100% {
  	opacity: 1;
  	transform: translateX(0);
  }
}

.process-end{
  animation: process-end 11.1s ease-in;
  opacity: 0;
}

@keyframes process-end {
  0% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }

}


/* --------  CTA's  ---------- */

.cta-wrapper {
	width: 300px;
	margin: 0 auto;
	margin-top: 30px;
}

@media screen and (max-width: 440px) {
  .cta-wrapper {
    margin-top: 10px;
    padding-bottom: 40px;
  }
}

.btn {
	padding-top: 7px;
	padding-bottom: 7px;
	text-decoration: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn-lg {
	padding: 10px 16px;
	font-size: 18px;
	border-radius: 6px;
}

.btn-primary {
	background: #f26336;
	border: #f26336;
	color: #fff;
}

.btn-orange-bordered {
	background: transparent;
	border: solid 1px #f26336;
	color: #f26336;
}


/* --------  MAIN DESK SVG AND ANIMATIONS  ---------- */

#hero-bottom_wrapper {
	overflow: hidden;
	width: 100%;
	border-bottom: 2px solid #231a11;
}

#svg-office_wrapper {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

#arm {
	animation: arm-animate 10.5s ease-in-out;
	transform-origin: 50% 50%;
}

@keyframes arm-animate {
  0% {
  	transform: rotate(0deg);
  }
  3% {
  	transform: rotate(0deg);
  }
  8% {
  	transform: rotate(3deg);
  }
  13% {
    transform: rotate(0deg);
  }
  21% {
    transform: rotate(0deg);
  }
  26% {
  	transform: rotate(3deg);
  }
  32% {
  	transform: rotate(0deg);
  }
  40% {
  	transform: rotate(0deg);
  }
  50% {
  	transform: rotate(0deg);
  }
  58% {
  	transform: rotate(3deg);
  }
  64% {
  	transform: rotate(0deg);
  }
  100% {
  	transform: rotate(0deg);
  }
}

#screen-1,
#screen-2,
#screen-3,
#screen-4,
#screen-5,
#screen-6,
#screen-7,
#screen-8,
#screen-9,
#screen-10 {
	opacity: 0;
}

#screen-1 {
	animation: screen-animate-1 10.5s ease-in-out;
}

@keyframes screen-animate-1 {
  0% {
  	opacity: 0;
  }
  3% {
  	opacity: 1;
  }
  7% {
    opacity: 1;
  }
  10% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-2 {
	animation: screen-animate-2 10.5s ease-in-out;
}

@keyframes screen-animate-2 {
  0% {
  	opacity: 0;
  }
  10% {
 	opacity: 0;
  }
  13% {
  	opacity: 1;
  }
  17% {
    opacity: 1;
  }
  20% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-3 {
	animation: screen-animate-3 10.5s ease-in-out;
}

@keyframes screen-animate-3 {
  0% {
  	opacity: 0;
  }
  20% {
  	opacity: 0;
  }
  23% {
  	opacity: 1;
  }
  27% {
    opacity: 1;
  }
  30% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-4 {
	animation: screen-animate-4 10.5s ease-in-out;
}

@keyframes screen-animate-4 {
  0% {
  	opacity: 0;
  }
  30% {	opacity: 0;

  }
  33% {
  	opacity: 1;
  }
  37% {
    opacity: 1;
  }
  40% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-5 {
	animation: screen-animate-5 10.5s ease-in-out;
}

@keyframes screen-animate-5 {
  0% {
  	opacity: 0;
  }
  40% {
  	opacity: 0;
  }
  43% {
  	opacity: 1;
  }
  47% {
    opacity: 1;
  }
  50% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-6 {
	animation: screen-animate-6 10.5s ease-in-out;
}

@keyframes screen-animate-6 {
  0% {
  	opacity: 0;
  }
  50% {
 	opacity: 0;
  }
  53% {
  	opacity: 1;
  }
  57% {
    opacity: 1;
  }
  60% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-7 {
	animation: screen-animate-7 10.5s ease-in-out;
}

@keyframes screen-animate-7 {
  0% {
  	opacity: 0;
  }
  60% {
  	opacity: 0;
  }
  63% {
  	opacity: 1;
  }
  67% {
    opacity: 1;
  }
  70% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-8 {
	animation: screen-animate-8 10.5s ease-in-out;
}

@keyframes screen-animate-8 {
  0% {
  	opacity: 0;
  }
  70% {
  	opacity: 0;
  }
  73% {
  	opacity: 1;
  }
  77% {
    opacity: 1;
  }
  80% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-9 {
	animation: screen-animate-9 10.5s ease-in-out;
}

@keyframes screen-animate-9 {
  0% {
  	opacity: 0;
  }
  80% {
  	opacity: 0;
  }
  83% {
  	opacity: 1;
  }
  87% {
    opacity: 1;
  }
  90% {
  	opacity: 0;
  }
  100% {
  	opacity: 0;
  }
}

#screen-10 {
	animation: screen-animate-10 10.5s ease-in-out;
}

@keyframes screen-animate-10 {
  0% {
  	opacity: 0;
  }
  90% {
  	opacity: 0;
  }
  93% {
  	opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
  	opacity: 0;
  }
}

#screen-11 {
  animation: screen-animate-11 11.5s ease-in-out;
  opacity: 1;
}

@keyframes screen-animate-11 {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}