/*Chat Monitor Screens*/
#cluster-intro{
    background-image: url("../img/utils/monitor.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
}

#digimon-vs-pokemon {
    background-image: url("../img/utils/monitor.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
}

#pokemon-go-map-intro {
    background-image: url("../img/utils/monitor.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
}

#conclusion-sec {
    background-image: url("../img/utils/monitor.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
    margin-left: 200px;
}


/*Chat messaging styles*/
.chat-wrapper-left{
    border: 2px solid #dedede;
    background-color: #EBD58D;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    overflow: hidden;
    height: 80px;
    width: 70%;
}

.chat-wrapper-right {
    border: 2px solid #ccc;
    background-color: #dbbbbb;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    overflow: hidden;
    height: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: 0;
}

/*Chat messaging boxes*/
/*introduction*/
.slide-left-to-right1.animate {
    position: relative;
    left: -100px;
    height: 80px;
    margin: 5px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}

.slide-right-to-left1.animate {
    position: relative;
    left: 100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.slide-left-to-right2.animate {
    position: relative;
    left: -100px;
    height: 250px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}

.slide-right-to-left2.animate {
    position: relative;
    left: 100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 6s;
}

/*box office*/
.slide-left-to-right3.animate {
    position: relative;
    left: -100px;
    height: 240px;
    margin: 5px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}

.slide-right-to-left3.animate {
    position: relative;
    left: 100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.slide-left-to-right4.animate {
    position: relative;
    left: -100px;
    height: 180px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}

/*map intro*/
.slide-right-to-left4.animate {
    position: relative;
    left: 100px;
    height: 110px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}

.slide-left-to-right5.animate {
    position: relative;
    left: -100px;
    height: 140px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.slide-right-to-left5.animate {
    position: relative;
    left: 100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}

.slide-left-to-right2.animate {
    position: relative;
    left: -100px;
    height: 250px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 6s;
}

.slide-right-to-left2.animate {
    position: relative;
    left: 100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 8s;
}

/*conclusion*/
.slide-right-to-left6.animate {
    position: relative;
    left: 100px;
    height: 140px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}

.slide-left-to-right6.animate {
    position: relative;
    left: -100px;
    height: 90px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.slide-right-to-left7.animate {
    position: relative;
    left: 100px;
    height: 110px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}

.slide-left-to-right7.animate {
    position: relative;
    left: -100px;
    height: 70px;
    -webkit-animation: slide 3s forwards;
    -webkit-animation-delay: 1s;
    visibility: hidden;
    animation: 1s fadeIn, slide 3s forwards;
    animation-fill-mode: forwards;
    animation-delay: 6s;
}

/*Chat messaging styles*/
@keyframes fadeIn {
    99% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

.chat-wrapper-left::after {
    content: "";
    clear: both;
    display: table;
}

.chat-wrapper-right::after {
    content: "";
    clear: both;
    display: table;
}

.chat-wrapper-left img {
    float: left;
    max-width: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}

.chat-wrapper-right img {
    float: left;
    max-width: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}

.chat-wrapper-left img.right {
    float: right;
    margin-left: 20px;
    margin-right:0;
}

.chat-wrapper-right img.right {
    float: right;
    margin-left: 20px;
    margin-right:0;
}

.chat-wrapper-left p {
    font-family: 'DynaPuff';
}

.chat-wrapper-right p {
    font-family: 'DynaPuff';
}

.time-right {
    float: right;
    color: #aaa;
    margin-top: -20px;
}

.time-left {
    float: left;
    color: #999;
    margin-top: -20px;
}