@charset "UTF-8";



/* ==========================================================================
 animations - common settings
 ========================================================================== */

.image.animate-image .img-wrapper:after { 
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.02);
  width: 100%;
  height: 100%;
  content: " ";
  z-index: 0;	
  opacity: 1;
}

.section-audience .image.animate-image .img-wrapper:after { 
  background-color: transparent;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}



/* ==========================================================================
   animations - wide screens ( generally not stacked )
   ========================================================================== */


@media only screen and (min-width: 951px) {
  
 /* grid items */
    
  .animate-grid-item {
    opacity: 0;
    transform: translateY(150px);
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s, opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0s;
  }
    
  .animated.animate-grid-item { 
    opacity: 1;
    transform: translateY(0);	
  }
    
  .animate-grid-item:nth-child(1) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(2) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(3) { transition-delay: 0.6s; }
  .animate-grid-item:nth-child(4) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(5) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(6) { transition-delay: 0.6s; }
  .animate-grid-item:nth-child(7) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(8) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(9) { transition-delay: 0.6s; }

}

 
@media only screen and (min-width: 771px) {
    
  /* animate columns & timeline */
  
  .animate-columns.animate-timeline.columns-timeline:before { 
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease-in 0s;  
  }
  
  .animated.animate-columns.animate-timeline.columns-timeline:before { 
    transform: scaleY(1);
  }
  
  
  .animate-columns.animate-timeline.columns-timeline .image:before {
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.2, 0.6, 0.3, 1) 1.7s;
  }
  
  .animated.animate-timeline.columns-timeline .image:before {
    transform: scaleX(1);
  }
  
  .animate-columns .animate-text {
    opacity: 0;
    transform: translateY(150px);
    transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  
  .animate-columns.animate-timeline .animate-text { transition-delay: 0.5s; }
  
  .animated.animate-columns .animate-text {
    opacity: 1;
    transform: translateY(0);
  }
  
  .animate-timeline.columns.columns-timeline .title strong {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s;
  }
  
  .animated.animate-timeline.columns.columns-timeline .title strong {
    opacity: 1;
  }  
  
  .animate-columns .image.animate-image .img-wrapper {
    opacity: 0;
    transform: translateY(150px);
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s, opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s;
  }
  
  .animate-columns.animate-timeline .image.animate-image .img-wrapper  { transition-delay: 1s; }
  
  .animate-columns.animated .image.animate-image .img-wrapper { 
    opacity: 1;
    transform: translateY(0);	
  }
    
  .animate-columns .image.animate-image .img-wrapper .img img {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) 1.1s;
  }
  
  .animate-columns.animate-timeline .image.animate-image .img-wrapper .img img { transition-delay: 1.6s; }
  
  .animate-columns.animated .image.animate-image .img-wrapper .img img {
    opacity: 1;
  }
  
  .animate-columns .image.animate-image.image-branded .img-wrapper:before {
    opacity: 0;
    transition: opacity 1s ease-out 1.6s;    
  }
  
  .animate-columns.animate-timeline .image.animate-image.image-branded .img-wrapper:before { transition-delay: 2.3s; }

  
  .animate-columns.animated .image.animate-image.image-branded .img-wrapper:before {
    opacity: 1;
  }
  
}


/* animate job & process */

.animate-doubles .animate-text {
  opacity: 0;
  transform: translateY(150px);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
}
  
.animated.animate-doubles .animate-text {
  opacity: 1;
  transform: translateY(0);
}

.animate-doubles-item {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.animated.animate-doubles-item {
  opacity: 1;
}


@media only screen and (min-width: 850px) {
    
  .animate-doubles .animate-doubles-item:nth-child(1) { transition-delay: 0.0s; }
  .animate-doubles .animate-doubles-item:nth-child(2) { transition-delay: 0.3s; }
  .animate-doubles .animate-doubles-item:nth-child(3) { transition-delay: 0.0s; }
  .animate-doubles .animate-doubles-item:nth-child(4) { transition-delay: 0.3s; }
  .animate-doubles .animate-doubles-item:nth-child(5) { transition-delay: 0.0s; }
  .animate-doubles .animate-doubles-item:nth-child(6) { transition-delay: 0.3s; }
  .animate-doubles .animate-doubles-item:nth-child(7) { transition-delay: 0.0s; }
  .animate-doubles .animate-doubles-item:nth-child(8) { transition-delay: 0.3s; }
  .animate-doubles .animate-doubles-item:nth-child(9) { transition-delay: 0.0s; }
  .animate-doubles .animate-doubles-item:nth-child(10) { transition-delay: 0.3s; }
}



@media only screen and (max-width: 950px) {
  
  /* grid items */
  
  .animate-grid-item {
    opacity: 0;
    transform: translateY(120px);
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0s, opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0s;
  }
  
  .animated.animate-grid-item { 
    opacity: 1;
    transform: translateY(0);	
  }  
  
  /* grid-items in 2 columns */
  .animate-grid-item:nth-child(1) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(2) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(3) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(4) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(5) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(6) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(7) { transition-delay: 0.0s; }
  .animate-grid-item:nth-child(8) { transition-delay: 0.3s; }
  .animate-grid-item:nth-child(9) { transition-delay: 0.0s; }

}

@media only screen and (max-width: 520px) {
    
  /* grid-items in 1 column */
  .animate-grid-item:nth-child(1), .animate-grid-item:nth-child(2), .animate-grid-item:nth-child(3), 
  .animate-grid-item:nth-child(4), .animate-grid-item:nth-child(5), .animate-grid-item:nth-child(6), 
  .animate-grid-item:nth-child(7), .animate-grid-item:nth-child(8), .animate-grid-item:nth-child(9) { transition-delay: 0.0s; }

}


/* ==========================================================================
   animations - small screens ( generally stacked )
   ========================================================================== */

 
@media only screen and (max-width: 770px) {
    
  /* animate columns & timeline */
  
  .animate-columns.animate-timeline.columns-timeline:before { 
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s ease-in 0s;  
  }
  
  .animated.animate-columns.animate-timeline.columns-timeline:before { 
    transform: scaleY(1);
  }
  
  .animate-columns.animate-timeline.columns-timeline .image:before {
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s;
  }
  
  .animated.animate-timeline.columns-timeline .image:before {
    transform: scaleX(1);
  }
  
  
  .animate-columns .animate-text {
    opacity: 0;
    transform: translateY(120px);
    transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  
  /*
  .animate-columns.animate-timeline .animate-text { transition-delay: 0.5s; }
  */
  
  .animate-columns .animated.animate-text {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  .animate-timeline.columns.columns-timeline .title strong {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0.8s;
  }
  
  .animate-timeline.columns.columns-timeline .animated .title strong {
    opacity: 1;
  } 
  
  .animate-columns .image.animate-image .img-wrapper {
    opacity: 0;
    transform: translateY(150px);
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 0.8s cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  
  /*
  .animate-columns.animate-timeline .image.animate-image .img-wrapper  { transition-delay: 1s; }
  */
  .animate-columns .image.animate-image.animated .img-wrapper { 
    opacity: 1;
    transform: translateY(0);	
  }
    
  .animate-columns .image.animate-image .img-wrapper .img img {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) 0.6s;
  }
  
  /*
  .animate-columns.animate-timeline .image.animate-image .img-wrapper .img img { transition-delay: 1.6s; }
  */
  .animate-columns .image.animate-image.animated .img-wrapper .img img {
    opacity: 1;
  }
  
  .animate-columns .image.animate-image.image-branded .img-wrapper:before {
    opacity: 0;
    transition: opacity 1s ease-out 1.1s;    
  }
  /*
  .animate-columns.animate-timeline .image.animate-image.image-branded .img-wrapper:before { transition-delay: 2.3s; }
  */
  
  .animate-columns .image.animate-image.image-branded.animated .img-wrapper:before {
    opacity: 1;
  }  

}


/* ==========================================================================
 animations - all screen sizes combines with some adjustments
 ========================================================================== */


/* header */

header {
  opacity: 0;
  transform: translateY(-150px);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.loaded header {
  opacity: 1;
  transform: translateY(0);
}


/* common section animation & hero */
.animate-section .animate-text, .animate-hero .animate-text, .animate-intro .animate-text {
  opacity: 0;
  transform: translateY(150px);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.animate-hero .animate-text { transition-delay: 1s; }

.animated.animate-section .animate-text, .animated.image-loaded.animate-hero .animate-text, .animated.animate-intro .animate-text {
  opacity: 1;
  transform: translateY(0);
}

/* hero */
.animate-hero .background {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) 0.1s;   
}

.animated.animate-hero.image-loaded .background { 
  opacity: 1;
}

/* footer & hero */

.animate-section .auto-scroll-up, .animate-hero .auto-scroll-down {
  opacity: 0;
  transition: opacity 1s ease-out 1.2s;
}

.animate-hero .auto-scroll-down { transition-delay: 1.8s; }

.animated.animate-section .auto-scroll-up, .animated.animate-hero .auto-scroll-down {
  opacity: 1;
  animation: bounce 1s 5;
  animation-delay: 1s;
}  


/* intro */
.animate-intro .animate-numbers li {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1s ease 0s, opacity 1s ease 0s;  
}
 
.animate-intro .animate-numbers li:nth-child(1) { transition-delay: 1s; }
.animate-intro .animate-numbers li:nth-child(2) { transition-delay: 2s; }

@media only screen and (min-width: 701px) {
  .animated.animate-intro .animate-numbers li { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 700px) {
  .animated.animate-numbers li { opacity: 1; transform: translateY(0); }
}



/* mapbox */

.animate-section #mapbox {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.3, 1) 0.2s;
}

.animate-section.loaded.animated #mapbox {
  opacity: 1;
}

.animate-section .animate-logo {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s, opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s;
}

.animate-section.loaded.animated .animate-logo {
  opacity: 1;
  transform: translateY(0);
}



/* outro */

.animate-outro .background {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) 0s;   
}

.animated.animate-outro .background { 
  opacity: 1;
}

.animate-outro .animate-text .title, .animate-outro .animate-text .content, .animate-outro .animate-text .button {
  opacity: 0;
  transform: translateY(150px);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s, opacity 1s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s;
}

.animate-outro .animate-text .content { transition-delay: 1s;  } 
.animate-outro .animate-text .button { transition-delay: 1.5s;  }

.animated.animate-outro .animate-text .title, .animated.animate-outro .animate-text .content, .animated.animate-outro .animate-text .button {
  opacity: 1;
  transform: translateY(0);
}