/* CSS HEX
    --cultured: #f3f3f3;
    --old-lace: #f5f1e3;
    --light-sky-blue: #83d3ff;
    --blue-green: #4291b4;
    --lapis-lazuli: #366489;
    --ruby: #d81159;
    --spanish-orange: #ec6a00;

    CSS HSL
    --cultured: hsla(0, 0%, 95%, 1);
    --old-lace: hsla(47, 47%, 93%, 1);
    --light-sky-blue: hsla(201, 100%, 76%, 1);
    --blue-green: hsla(198, 46%, 48%, 1);
    --lapis-lazuli: hsla(207, 43%, 37%, 1);
    --ruby: hsla(338, 85%, 46%, 1);
    --spanish-orange: hsla(27, 100%, 46%, 1);

    SCSS RGB
    $cultured: rgba(243, 243, 243, 1);
    $old-lace: rgba(245, 241, 227, 1);
    $light-sky-blue: rgba(131, 211, 255, 1);
    $blue-green: rgba(66, 145, 180, 1);
    $lapis-lazuli: rgba(54, 100, 137, 1);
    $ruby: rgba(216, 17, 89, 1);
    $spanish-orange: rgba(236, 106, 0, 1);

    */
    .image-container {
        position: relative;
        padding: 0;
        min-height: 27rem;
    }
    .image-container .smoothSlideContainer{
        position:absolute;
        height:100%;
        width:100%;
        overflow:hidden;
    }

    .image-container #person img{
        position:absolute;
        height:100%;
        right:-100%;
        bottom: 0;
        transform: translateX(50%);
        z-index:1;
    }
    .image-container #person .img_animation_active{
        -webkit-animation: personslideIN 6s ease-in-out ;
        animation: personslideIN 6s ease-in-out ;
        right: 50%;
    }
    .image-container #person2 img{
        position:absolute;
        height:100%;
        left:-100%;
        bottom: 0;
        transform: translateX(-50%);
        z-index:1;
    }
    .image-container #person2 .img_animation_active{
        -webkit-animation: personslideINleft 6s ease-in-out;
        animation: personslideINleft 6s ease-in-out;
        left:50%;

    }
    .image-container .smoothSlideContainer2{
        position:absolute;
        height:100%;
        width:100%;
        overflow:hidden;
    }


    .image-container .bar{
        background-color:#333;
        z-index:0;
    }

    .image-container .bar2{
        background-color:#333;
        z-index:2;
    }

    /* ANIMATION BAR IMAGE 1 */

    .image-container #bar1{
        background-color: #003057;
        position:absolute;
        z-index: 1;
        right:0;
        top:20%;
        height:5%;
        width:70%;
        -webkit-animation: bar1slide 6s ease-in-out infinite;
        animation: bar1slide 6s ease-in-out infinite;
    }

    .image-container #bar2{
        background-color: #f3f3f3;
        position:absolute;
        right:0;
        top:35%;
        height:8%;
        width:60%;
        -webkit-animation: bar2slide 6s ease-in-out infinite;
        animation: bar2slide 6s ease-in-out infinite;
    }

    .image-container #bar3{
        background-color: #003057;
        position:absolute;
        right:0;
        top:50%;
        height:12%;
        width:60%;
        -webkit-animation: bar3slide 6s ease-in-out infinite;
        animation: bar3slide 6s ease-in-out infinite;
    }

    .image-container #bar4{
        background-color: #003057;
        position:absolute;
        right:0;
        top:6%;
        height:2%;
        width:50%;
        -webkit-animation: bar4slide 6s ease-in-out infinite;
        animation: bar4slide 6s ease-in-out infinite;
    }

    .image-container #bar5{
        background-color: #003057;
        position:absolute;
        z-index: 0;
        left:0;
        top:90%;
        height:8%;
        width:90%;
        -webkit-animation: bar8slide 6s ease-in-out infinite;
        animation: bar8slide 6s ease-in-out infinite;
    }

    .image-container #bar6{
        background-color: #83d3ff;
        position:absolute;
        left:0;
        top:13%;
        height:10%;
        width:100%;
        -webkit-animation: bar8slide 6s ease-in-out infinite;
        animation: bar8slide 6s ease-in-out infinite;
    }

    .image-container #bar7{
        background-color: #4291b4;
        position:absolute;
        right:0;
        top:60%;
        height:10%;
        width:35%;
        -webkit-animation: bar7slide 6s ease-in-out infinite;
        animation: bar7slide 6s ease-in-out infinite;
    }

    .image-container #bar8{
        background-color: #f3f3f3;
        position:absolute;
        left:0%;
        top:85%;
        height:2%;
        width:85%;
        -webkit-animation: bar8slide 6s ease-in-out infinite;
        animation: bar8slide 6s ease-in-out infinite;
    }
    .image-container #bar9{
        background-color: #f3f3f3;
        position:absolute;
        right:0%;
        top:95%;
        height:2%;
        width:65%;
        -webkit-animation: bar9slide 6s ease-in-out infinite;
        animation: bar9slide 6s ease-in-out infinite;
    }

    /* ANIMATION BAR IMAGE 2 */

    .image-container #bar11{
        background-color: #003057;
        position:absolute;
        z-index: 1;
        left:0;
        top:20%;
        height:5%;
        width:70%;
        -webkit-animation: bar11slide 6s ease-in-out infinite;
        animation: bar11slide 6s ease-in-out infinite;
    }

    .image-container #bar12{
        background-color: #f3f3f3;
        position:absolute;
        left:0;
        top:35%;
        height:8%;
        width:80%;
        -webkit-animation: bar12slide 6s ease-in-out infinite;
        animation: bar12slide 6s ease-in-out infinite;
    }

    .image-container #bar13{
        background-color: #003057;
        position:absolute;
        left:0;
        top:50%;
        height:12%;
        width:60%;
        -webkit-animation: bar13slide 6s ease-in-out infinite;
        animation: bar13slide 6s ease-in-out infinite;
    }

    .image-container #bar14{
        background-color: #003057;
        position:absolute;
        left:0;
        top:6%;
        height:2%;
        width:50%;
        -webkit-animation: bar14slide 6s ease-in-out infinite;
        animation: bar14slide 6s ease-in-out infinite;
    }

    .image-container #bar15{
        background-color: #003057;
        position:absolute;
        z-index: 0;
        right:0;
        top:90%;
        height:8%;
        width:90%;
        -webkit-animation: bar15slide 6s ease-in-out infinite;
        animation: bar15slide 6s ease-in-out infinite;
    }

    .image-container #bar16{
        background-color: #83d3ff;
        position:absolute;
        right:0;
        top:13%;
        height:10%;
        width:100%;
        -webkit-animation: bar16slide 6s ease-in-out infinite;
        animation: bar16slide 6s ease-in-out infinite;
    }

    .image-container #bar17{
        background-color: #4291b4;
        position:absolute;
        left:0;
        top:60%;
        height:10%;
        width:35%;
        -webkit-animation: bar17slide 6s ease-in-out infinite;
        animation: bar17slide 6s ease-in-out infinite;
    }

    .image-container #bar18{
        background-color: #f3f3f3;
        position:absolute;
        right:0%;
        top:85%;
        height:2%;
        width:85%;
        -webkit-animation: bar18slide 6s ease-in-out infinite;
        animation: bar18slide 6s ease-in-out infinite;
    }
    .image-container #bar19{
        background-color: #f3f3f3;
        position:absolute;
        left:0%;
        top:95%;
        height:2%;
        width:65%;
        -webkit-animation: bar19slide 6s ease-in-out infinite;
        animation: bar19slide 6s ease-in-out infinite;
    }

    /* KEYFRAME ANIMATION BAR IMAGE 1 */

    @-webkit-keyframes bar1slide{
        0%{
            right:-100%;
        }
        20%{
            right:-2%;
        }
        40%{
            right:0;
        }
        70%{
            right:-50%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar1slide{
        0%{
            right:-100%;
        }
        20%{
            right:-2%;
        }
        40%{
            right:0;
        }
        70%{
            right:-50%;
        }
        100%{
            right:-100%;
        }
    }

    @-webkit-keyframes bar2slide{
        0%{
            right:-100%;
        }
        30%{
            right:-2%;
        }
        50%{
            right:0;
        }
        80%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar2slide{
        0%{
            right:-100%;
        }
        30%{
            right:-2%;
        }
        50%{
            right:0;
        }
        80%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }

    @-webkit-keyframes bar3slide{
        0%{
            right:-100%;
        }
        60%{
            right:-2%;
        }
        50%{
            right:0;
        }
        80%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar3slide{
        0%{
            right:-100%;
        }
        60%{
            right:-2%;
        }
        50%{
            right:0;
        }
        80%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }

    @-webkit-keyframes bar4slide{
        0%{
            right:-100%;
        }
        30%{
            right:-2%;
        }
        50%{
            right:0;
        }
        90%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar4slide{
        0%{
            right:-100%;
        }
        30%{
            right:-2%;
        }
        50%{
            right:0;
        }
        90%{
            right:-100%;
        }
        100%{
            right:-100%;
        }
    }
    @-webkit-keyframes bar5slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar5slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @-webkit-keyframes bar6slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar6slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }
    @-webkit-keyframes bar7slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar7slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }
    @-webkit-keyframes bar8slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar8slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }
    @-webkit-keyframes bar9slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar9slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }
    @-webkit-keyframes personslideout{
        0%{
            right:-100%;
        }
        25%{
            right:0%;
        }
        50%{
            right:1%;
        }
        100%{
            right:1%;
        }
    }

    @keyframes personslideout{
        0%{
            right:-100%;
        }
        25%{
            right:0%;
        }
        50%{
            right:1%;
        }
        100%{
            right:1%;
        }
    }


    /* KEYFRAME ANIMATION BAR IMAGE 2 */

    @-webkit-keyframes bar11slide{
        0%{
            left:-100%;
        }
        20%{
            left:-2%;
        }
        40%{
            left:0;
        }
        70%{
            left:-50%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar11slide{
        0%{
            left:-100%;
        }
        20%{
            left:-2%;
        }
        40%{
            left:0;
        }
        70%{
            left:-50%;
        }
        100%{
            left:-100%;
        }
    }

    @-webkit-keyframes bar12slide{
        0%{
            left:-100%;
        }
        30%{
            left:-2%;
        }
        50%{
            left:0;
        }
        80%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar12slide{
        0%{
            left:-100%;
        }
        30%{
            left:-2%;
        }
        50%{
            left:0;
        }
        80%{
            left:-100%;
        }
        100%{
            left:-70%;
        }
    }

    @-webkit-keyframes bar13slide{
        0%{
            left:-70%;
        }
        60%{
            left:-2%;
        }
        50%{
            left:0;
        }
        80%{
            left:-70%;
        }
        100%{
            left:-70%;
        }
    }

    @keyframes bar13slide{
        0%{
            left:-70%;
        }
        60%{
            left:-2%;
        }
        50%{
            left:0;
        }
        80%{
            left:-70%;
        }
        100%{
            left:-70%;
        }
    }

    @-webkit-keyframes bar14slide{
        0%{
            left:-70%;
        }
        30%{
            left:-2%;
        }
        50%{
            left:0;
        }
        90%{
            left:-70%;
        }
        100%{
            left:-70%;
        }
    }

    @keyframes bar14slide{
        0%{
            left:-70%;
        }
        30%{
            left:-2%;
        }
        50%{
            left:0;
        }
        90%{
            left:-70%;
        }
        100%{
            left:-70%;
        }
    }
    @-webkit-keyframes bar15slide{
        0%{
            right:-100%;
        }
        35%{
            right:-2%;
        }
        50%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }
    @keyframes bar15slide{
        0%{
            right:-100%;
        }
        35%{
            right:-2%;
        }
        50%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }

    @-webkit-keyframes bar16slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar16slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }
    @-webkit-keyframes bar17slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar17slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }
    @-webkit-keyframes bar18slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }

    @keyframes bar18slide{
        0%{
            right:-100%;
        }
        45%{
            right:-2%;
        }
        60%{
            right:0;
        }
        70%{
            right:-70%;
        }
        100%{
            right:-100%;
        }
    }
    @-webkit-keyframes bar19slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }

    @keyframes bar19slide{
        0%{
            left:-100%;
        }
        45%{
            left:-2%;
        }
        60%{
            left:0;
        }
        70%{
            left:-70%;
        }
        100%{
            left:-100%;
        }
    }
    @-webkit-keyframes personslideout{
        0%{
            right:-100%;
        }
        25%{
            right:0%;
        }
        50%{
            right:1%;
        }
        100%{
            right:1%;
        }
    }

    @keyframes personslideout{
        0%{
            right:-100%;
        }
        25%{
            right:0%;
        }
        50%{
            right:1%;
        }
        100%{
            right:1%;
        }
    }


@-webkit-keyframes personslideIN{
  0%{
    right:-100%;
  }
  25%{
    right:48%;
  }
  /* 50%{
    right:25%;
  } */
  100%{
    right:50%;
  }
  /*100%{
    right:-100%;
  }*/
}

@keyframes personslideIN{
  0%{
    right:-100%;
  }
  25%{
    right:48%;
  }
  /* 50%{
    right:25%;
  } */
  100%{
    right:50%;
  }
  /*100%{
    right:-100%;
  }*/
}
@-webkit-keyframes personslideINleft{
  0%{
    left:-100%;
  }
  25%{
    left:48%;
  }
  /* 50%{
    left:25%;
  } */
  100%{
    left:50%;
  }
  /*100%{
    left:-100%;
  }*/
}

@keyframes personslideINleft{
  0%{
    left:-100%;
  }
  25%{
    left:48%;
  }
  /* 50%{
    left:25%;
  } */
  100%{
    left:50%;
  }
  /*100%{
    left:-100%;
  }*/
}