/* Slide 1*/
.b11 {
    animation-name: b11;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b11 {
    0% {transform: translate(0, 0)}

    15% {transform:translate(153px, 153px) rotate(90deg);}
    30% {transform:translate(153px, 153px) rotate(90deg);}

    45% {transform:translate(0, 306px) rotate(0deg);}
    55% {transform:translate(0, 306px) rotate(0deg);}   

    70% {transform:translate(153px, 306px);}
    80% {transform:translate(153px, 306px);}

    90% {transform:translate(0, 0);}
    100% {transform: translate(0, 0);}
  }
  .b12 {
    animation-name: b12;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b12 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(-153px, 153px)}
    30% {transform: translate(-153px, 153px)}

    45% {transform: translate(0, 153px)}
    55% {transform: translate(0, 153px)}   

    70% {transform:translate(-153px, 306px) rotate(90deg);}
    80% {transform:translate(-153px, 306px) rotate(90deg);}

    90% {transform:translate(0, 0);}
    100% {transform:translate(0, 0);}
  }
  .b13 {
    animation-name: b13;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b13 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(0, 306px)}
    30% {transform: translate(0, 306px)}

    45% {transform: translate(0, 0)}
    55% {transform: translate(0, 0)}   

    70% {transform:translate(-153px, 0);}
    80% {transform:translate(-153px, 0);}

    90% {transform:translate(0, 0);}
    100% {transform:translate(0, 0);}
  }
  .b21b22 {
    animation-name: b21b22;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b21b22 {
    0% {transform: translate(0, 0); background-image: url('/projects/portal/images/mainslider/b21b22.webp');}

    15% {transform: translate(0, -153px); background-image: url('/projects/portal/images/mainslider/b21b22.webp');}
    30% {transform: translate(0, -153px); background-image: url('/projects/portal/images/mainslider/b21b22_2.webp');}

    45% {transform: translate(0, 306px); background-image: url('/projects/portal/images/mainslider/b21b22_2.webp');}
    55% {transform: translate(0, 306px); background-image: url('/projects/portal/images/mainslider/b21b22_2.webp');}  

    70% {transform:translate(153px, 306px); background-image: url('/projects/portal/images/mainslider/b21b22_3.webp');}
    80% {transform:translate(153px, 306px); background-image: url('/projects/portal/images/mainslider/b21b22_3.webp');}

    90% {transform:translate(0, 0); background-image: url('/projects/portal/images/mainslider/b21b22_3.webp');}
    100% {transform:translate(0, 0); background-image: url('/projects/portal/images/mainslider/b21b22_3.webp');}
  }
  .b23 {
    animation-name: b23;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b23 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(0, 306px)}
    30% {transform: translate(0, 306px)}

    45% {transform: translate(0, 0)}
    55% {transform: translate(0, 0)}   

    70% {transform:translate(-306px, 306px) rotate(90deg);}
    80% {transform:translate(-306px, 306px) rotate(90deg);}

    90% {transform:translate(0, 0) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(0deg);}
  }
  .b31 {
    animation-name: b31;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes b31 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(0, 0)}
    30% {transform: translate(0, 0)}

    45% {transform: translate(306px, 153px)}
    55% {transform: translate(306px, 153px)}  

    70% {transform:translate(306px, 0)}
    80% {transform:translate(306px, 0)}

    90% {transform:translate(0, 0)}
    100% {transform:translate(0, 0)}
  }
  .b32 {
    animation-name: b32;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes b32 {
    0% {transform: translate(0, 0)}
    55% {transform:translate(0, 0)}

    70% {transform:translate(0, -153px)}  
    80% {transform:translate(0, -153px)}

    90% {transform:translate(0, 0)}
    100% {transform:translate(0, 0)}
  }
  .b33 {
    animation-name: b33;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes b33 {
    0% {transform: translate(0, 0); background-image: url('/projects/portal/images/mainslider/b13.webp');}

    15% {transform: translate(0, -306px); background-image: url('/projects/portal/images/mainslider/b13_3.webp');}
    30% {transform: translate(0, -306px); background-image: url('/projects/portal/images/mainslider/b13_3.webp');}

    45% {transform: translate(0, 0); background-image: url('/projects/portal/images/mainslider/b13_2.webp');}
    55% {transform: translate(0, 0); background-image: url('/projects/portal/images/mainslider/b13_2.webp');}

    70% {transform:translate(-306px, -153px); background-image: url('/projects/portal/images/mainslider/b13_3.webp');}
    80% {transform:translate(-306px, -153px); background-image: url('/projects/portal/images/mainslider/b13_3.webp');}

    90% {transform:translate(0, 0); background-image: url('/projects/portal/images/mainslider/b13.webp');}
    100% {transform:translate(0, 0); background-image: url('/projects/portal/images/mainslider/b13.webp');}
  }
  .b41 {
    animation-name: b41;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes b41 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(153px, 0); background-image: url('/projects/portal/images/mainslider/b42_2.webp');}
    30% {transform: translate(153px, 0); background-image: url('/projects/portal/images/mainslider/b42_2.webp');}

    45% {transform: translate(0, -306px); background-image: url('/projects/portal/images/mainslider/b42_2.webp');}
    55% {transform: translate(0, -306px); background-image: url('/projects/portal/images/mainslider/b42_2.webp');}

    70% {transform:translate(0, -457px); background-image: url('/projects/portal/images/mainslider/b42_3.webp');}
    80% {transform:translate(0, -457px); background-image: url('/projects/portal/images/mainslider/b42_3.webp');}

    90% {transform:translate(0, 0)}
    100% {transform:translate(0, 0)}
  }
  .b42 {
    animation-name: b42;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes b42 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(-153px, 0)}
    30% {transform: translate(-153px, 0)}

    45% {transform: translate(0, -457px)}
    55% {transform: translate(0, -457px)}

    70% {transform:translate(153px, -457px)}
    80% {transform:translate(153px, -457px)}

    90% {transform:translate(0, 0)}
    100% {transform:translate(0, 0)}
  }
  .b43 {
    animation-name: b43;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes b43 {
    0% {transform: translate(0, 0)}

    15% {transform: translate(0, -306px)}
    30% {transform: translate(0, -306px)}

    45% {transform: translate(-306px, -457px)}
    55% {transform: translate(-306px, -457px)}

    70% {transform:translate(0, -306px) rotate(-180deg)}
    80% {transform:translate(0, -306px) rotate(-180deg)}

    90% {transform:translate(0, 0)}
    100% {transform:translate(0, 0)}
  }
  .cross {
    animation-name: cross;
    animation-duration: 8000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes cross {
    0% {transform: rotate(0deg)}

    15% {transform: rotate(-90deg)}
    30% {transform: rotate(-90deg)}

    45% {transform: rotate(0deg)}
    55% {transform: rotate(0deg)}

    70% {transform: rotate(-180deg)}
    80% {transform: rotate(-180deg)}
    
    90% {transform: rotate(0deg)}
    100% {transform: rotate(0deg)}
  }

  /* Slide 2*/
  .c12 {
    animation-name: c12;
    animation-duration: 10000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes c12 {
    0% {transform: translate(0, 0)}

    10% {width: 57px; height: 57px; transform: translate(-5px, 40px);}
    15% {width: 57px; height: 57px; transform: translate(-5px, 40px);}

    20% {width: 87px; height: 87px; transform: translate(40px, -40px);}
    25% {width: 87px; height: 87px; transform: translate(40px, -40px);} 

    35% {width: 75px; height: 75px; transform: translate(-280px, -20px);}
    40% {width: 75px; height: 75px; transform: translate(-280px, -20px);}

    55% {width: 25px; height: 25px; transform: translate(-225px, 270px);}
    60% {width: 25px; height: 25px; transform: translate(-225px, 270px);}

    75% {width: 12px; height: 12px; transform: translate(-240px, 275px);}
    80% {width: 12px; height: 12px; transform: translate(-240px, 275px);}

    95% {width: 97px; height: 97px; transform: translate(0, 0);}
    100% {width: 97px; height: 97px; transform: translate(0, 0);}
  }
  .c21 {
    animation-name: c21;
    animation-duration: 10000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes c21 {
    0% {transform: rotate(0deg);}

    10% {transform: rotate(90deg);}
    15% {transform: rotate(90deg);}

    20% {transform: rotate(180deg);}
    25% {transform: rotate(180deg);}

    35% {transform: rotate(270deg);}
    40% {transform: rotate(270deg);}

    55% {transform: rotate(270deg);}
    60% {transform: rotate(270deg);}

    75% {transform: rotate(270deg);}
    80% {transform: rotate(270deg);}
    
    95% {transform: rotate(0);}
    100% {transform: rotate(0);}
  }

  .c22 {
    animation-name: c22;
    animation-duration: 10000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes c22 {
    0% {background-image: url('/projects/portal/images/mainslider/c22_1.webp')}

    10% {background-image: url('/projects/portal/images/mainslider/c22_2.webp')}
    15% {background-image: url('/projects/portal/images/mainslider/c22_2.webp')}

    20% {background-image: url('/projects/portal/images/mainslider/c22_3.webp');}
    25% {background-image: url('/projects/portal/images/mainslider/c22_3.webp');}

    35% {background-image: url('/projects/portal/images/mainslider/c22_4.webp'); height:502px; top:0; right:0; width:215px;}
    40% {background-image: url('/projects/portal/images/mainslider/c22_4.webp'); height:502px; top:0; right:0; width:215px;}

    55% {background-image: url('/projects/portal/images/mainslider/c22_5.webp');}
    60% {background-image: url('/projects/portal/images/mainslider/c22_5.webp');}

    75% {background-image: url('/projects/portal/images/mainslider/c22_6.webp')}
    80% {background-image: url('/projects/portal/images/mainslider/c22_6.webp')}
    
    95% {background-image: url('/projects/portal/images/mainslider/c22_1.webp')}
    100% {background-image: url('/projects/portal/images/mainslider/c22_1.webp')}
  }
  .cross2 {
    animation-name: cross2;
    animation-duration: 10000ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    z-index:1;
  }

  @keyframes cross2 {
    0% {transform: rotate(0deg);}

    10% {transform: rotate(-45deg);}
    15% {transform: rotate(-45deg);}

    20% {transform: rotate(-90deg);}
    25% {transform: rotate(-90deg);}  

    35% {transform: rotate(-180deg);}
    40% {transform: rotate(-180deg);}

    55% {transform: rotate(-180deg);}
    60% {transform: rotate(-180deg);}

    75% {transform: rotate(-90deg);}
    80% {transform: rotate(-90deg);} 
    
    95% {transform: rotate(0);}
    100% {transform: rotate(0);}
  }

  /* Slide 3*/
  .d11 {
    animation-name: d11;
    animation-duration: 9000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes d11 {
    0% {transform: rotate(0deg); height: 120px; width: 120px;}

    5% {transform: rotate(0deg); height: 120px; width: 120px;}
    25% {transform: rotate(0deg); height: 120px; width: 120px;}

    30% {transform: rotate(0deg); height: 120px; width: 120px;}
    35% {transform: rotate(0deg); height: 120px; width: 120px;} 

    50% {transform: rotate(0deg); height: 120px; width: 120px;}
    55% {transform: rotate(0deg); height: 120px; width: 120px;}

    70% {transform: rotate(0deg); height: 85px; width: 85px;}
    75% {transform: rotate(0deg); height: 85px; width: 85px;}

    90% {transform: rotate(0deg); height: 120px; width: 120px;}
    100% {transform: rotate(0deg); height: 120px; width: 120px;}
  }

  .d12 {
    animation-name: d12;
    animation-duration: 9000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes d12 {
    0% {transform: rotate(0deg);}

    5% {transform: rotate(90deg);}
    25% {transform: rotate(90deg);}

    30% {transform: rotate(0deg);}
    35% {transform: rotate(0deg);} 

    50% {transform: rotate(0deg);}
    55% {transform: rotate(0deg);}

    70% {transform: rotate(0deg);}
    75% {transform: rotate(0deg);}

    90% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
  }

  .d21 {
    animation-name: d21;
    animation-duration: 9000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }

  @keyframes d21 {
    0% {transform: rotate(0deg);}

    5% {height: 97px; width: 97px;transform: rotate(180deg);}
    25% {height: 97px; width: 97px;transform: rotate(180deg);}

    30% {height: 97px; width: 97px;transform: rotate(270deg);}
    35% {height: 97px; width: 97px;transform: rotate(270deg);} 

    50% {height: 70px; width: 70px;transform: rotate(360deg);}
    55% {height: 70px; width: 70px;transform: rotate(360deg);}

    70% {transform: rotate(0deg);}
    75% {transform: rotate(0deg);}

    90% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
  }

  .d22 {
    animation-name: d22;
    animation-duration: 9000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes d22 {
    0% {background-image: url('/projects/portal/images/mainslider/d21_1.webp')}

    5% {background-image: url('/projects/portal/images/mainslider/d21_2.webp')}
    25% {background-image: url('/projects/portal/images/mainslider/d21_2.webp')}

    30% {background-image: url('/projects/portal/images/mainslider/d21_3.webp')}
    35% {background-image: url('/projects/portal/images/mainslider/d21_3.webp')}

    50% {background-image: url('/projects/portal/images/mainslider/d21_4.webp')}
    55% {background-image: url('/projects/portal/images/mainslider/d21_4.webp')}

    70% {background-image: url('/projects/portal/images/mainslider/d21_6.webp')}
    75% {background-image: url('/projects/portal/images/mainslider/d21_6.webp')}

    90% {background-image: url('/projects/portal/images/mainslider/d21_3.webp')}
    100% {background-image: url('/projects/portal/images/mainslider/d21_3.webp')}
  }

  .d23 {
    animation-name: d23;
    animation-duration: 9000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index:1;
  }
  @keyframes d23{
    0% {background-image: url('/projects/portal/images/mainslider/c22_1.webp')}

    5% {background-image: url('/projects/portal/images/mainslider/c22_2.webp')}
    25% {background-image: url('/projects/portal/images/mainslider/c22_2.webp')}

    30% {background-image: url('/projects/portal/images/mainslider/c22_3.webp')}
    35% {background-image: url('/projects/portal/images/mainslider/c22_3.webp')}

    50% {background-image: url('/projects/portal/images/mainslider/c22_4.webp')}
    55% {background-image: url('/projects/portal/images/mainslider/c22_4.webp')}

    70% {background-image: url('/projects/portal/images/mainslider/c22_5.webp')}
    75% {background-image: url('/projects/portal/images/mainslider/c22_5.webp')}

    90% {background-image: url('/projects/portal/images/mainslider/c22_3.webp')}
    100% {background-image: url('/projects/portal/images/mainslider/c22_3.webp')}
  }