/* main: ../main.scss*/
/* -----------------------------------------------------------------------------*/
/* This file contains all css for card animation.*/
/* -----------------------------------------------------------------------------*/
/* Hide top background layer*/

:root{
  --vh: 1vh;
}

.bg_black {
  display: inherit;
  opacity: 1;
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed; }

.div-tree{
  padding: 10vh 0 5vh;
}

.div-tree .tree_animated svg {
  width: 100%;
  height: 75vh;
  height: calc(var(--vh, 1vh) * 75);
}

.div-logo .logo_animated svg {
  height: 5vh;
  height: calc(var(--vh, 1vh) * 5);
}


@keyframes show {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes hide {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes changeBgColor {
  from {
    background-color: #000; }
  to {
    background-color: #fff; } }

#logo_gray,
.cls-4,
.cls-2,
.cls-1 {
  opacity: 0; }

#el_1 {
  animation: show 1s 2.1s normal forwards ease-in-out; }

#el_2 {
  animation: show 1s 2.2s normal forwards ease-in-out; }

#el_3 {
  animation: show 1s 2.3s normal forwards ease-in-out; }

#el_4 {
  animation: show 1s 2.4s normal forwards ease-in-out; }

#el_5 {
  animation: show 1s 2.5s normal forwards ease-in-out; }

#el_6 {
  animation: show 1s 2.6s normal forwards ease-in-out; }

#el_7 {
  animation: show 1s 2.7s normal forwards ease-in-out; }

#el_8 {
  animation: show 1s 2.8s normal forwards ease-in-out; }

#el_9 {
  animation: show 1s 2.9s normal forwards ease-in-out; }

#el_10 {
  animation: show 1s 3s normal forwards ease-in-out; }

#el_11 {
  animation: show 1s 3.1s normal forwards ease-in-out; }

#el_12 {
  animation: show 1s 3.2s normal forwards ease-in-out; }

#el_13 {
  animation: show 1s 3.3s normal forwards ease-in-out; }

#el_14 {
  animation: show 1s 3.4s normal forwards ease-in-out; }

#el_15 {
  animation: show 1s 3.5s normal forwards ease-in-out; }

#el_16 {
  animation: show 1s 3.6s normal forwards ease-in-out; }

#el_17 {
  animation: show 1s 3.7s normal forwards ease-in-out; }

#el_18 {
  animation: show 1s 3.8s normal forwards ease-in-out; }

#el_19 {
  animation: show 1s 3.9s normal forwards ease-in-out; }

#el_20 {
  animation: show 1s 4s normal forwards ease-in-out; }

#el_21 {
  animation: show 1s 4.1s normal forwards ease-in-out; }

#el_22 {
  animation: show 1s 4.2s normal forwards ease-in-out; }

#el_23 {
  animation: show 1s 4.3s normal forwards ease-in-out; }

#el_24 {
  animation: show 1s 4.4s normal forwards ease-in-out; }

#el_25 {
  animation: show 1s 4.5s normal forwards ease-in-out; }

#el_26 {
  animation: show 1s 4.6s normal forwards ease-in-out; }

#el_27 {
  animation: show 1s 4.7s normal forwards ease-in-out; }

#el_28 {
  animation: show 1s 4.8s normal forwards ease-in-out; }

#el_29 {
  animation: show 1s 4.9s normal forwards ease-in-out; }

#el_30 {
  animation: show 1s 5s normal forwards ease-in-out; }

#el_31 {
  animation: show 1s 5.1s normal forwards ease-in-out; }

#el_32 {
  animation: show 1s 5.2s normal forwards ease-in-out; }

#el_33 {
  animation: show 1s 5.3s normal forwards ease-in-out; }

#el_34 {
  animation: show 0.5s 6.3s normal forwards ease-in-out; }

#el_35 {
  animation: show 0.5s 6.5s normal forwards ease-in-out; }

#el_36 {
  animation: show 0.5s 6.7s normal forwards ease-in-out; }

#el_37 {
  animation: show 0.5s 6.9s normal forwards ease-in-out; }

#el_38 {
  animation: show 0.5s 7.1s normal forwards ease-in-out; }

#el_39 {
  animation: show 0.5s 7.3s normal forwards ease-in-out; }

#el_40 {
  animation: show 0.5s 7.5s normal forwards ease-in-out; }

#el_41 {
  animation: show 0.5s 7.7s normal forwards ease-in-out; }

#el_42 {
  animation: show 0.5s 7.9s normal forwards ease-in-out; }

#el_43 {
  animation: show 0.5s 8.1s normal forwards ease-in-out; }

#el_44 {
  animation: show 0.5s 8.3s normal forwards ease-in-out; }

 .bg_black{
 animation: changeBgColor 0.5s 10s normal forwards ease-in-out,
            hide 1s 13s normal forwards ease-in-out;}

#el_45 {
  animation: show 1s 10s normal forwards ease-in-out; }

#logo_white {
  animation: hide 1s 10s normal forwards ease-in-out; }

#logo_gray {
  animation: show 1s 10s normal forwards ease-in-out; }

#Layer_1{
  animation: hide 1s 13s normal forwards ease-in-out;}

.close_card{
  animation: hide 1.5s 1s normal forwards ease-in-out !important;}
  
@media screen and (orientation: landscape) {
	.tree_centered .tree_animated {
		position: absolute;
		bottom: 19%;
		left: 50%;
		max-width: 29%;
		width: 22%;
		min-width: 120px;
		transform: translate(-50%, 0);
	}
	.logo_bottom .logo_animated {
		position: absolute;
		bottom: 15px;
		left: 50%;
		width: 100px;
		margin-top: -10px;
		margin-left: -50px; 
	}
}