div#help_Slide{
    position: absolute;
    z-index: 15;
    height: 50px;
    width: auto;
    max-width: 50%;
    bottom: 5px;
    right: 4%;
    float: right;
}


.dot{
    cursor:pointer;
    display: inline-block;
    position: relative;
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px;
    width: 30px;
    margin: 0 6px;
    z-index: 16;
    border-radius: 50%;
    background-color: black;
    opacity: 0.5;
}

#left_arrow, #right_arrow{
    display: block;
    height: 100%;
    position: absolute;
    z-index: 17;
    width: 3%;
    background-color: gray;
    opacity: 0;
}

#left_arrow{
    left: 0;
    top: 0;
    float: left;
}

#left_arrow:hover{
    opacity: 0.4;
}

#right_arrow{
    right: 0;
    top: 0;
    float: right;
}

#right_arrow:hover{
    opacity: 0.4;
}

span.active, .dot:hover{
    background-color: green;
    box-shadow: 0 0 4px lightgreen;
    opacity: 0.7;
}


div.slides {
    width: 100%;
    height: 87vh;
}
div.anim > img {
    animation: right_move 1s ;
}

div.anim2 > img {
    animation: right_out 1s;
}

@keyframes right_out {
    from{opacity: 0.6;transform: translateX(0);}
    to{opacity: 0.1;transform: translateX(100%);}
}

@keyframes right_move{
    from{opacity: 0.1;transform: translateX(-120%);}
    to{opacity: 0.6;transform: translateX(0);}
}

span.anim {
    animation-name: up;
    animation-duration: 2s;
    animation-delay: 0s;

}

span.anim_new {
    animation-name: down;
    animation-duration: 1s;
    animation-delay: 0s;
}

@keyframes up {
    from{opacity: 0;transform: translateY(40vh);}
    to{opacity: 1;transform: translateY(0);}
    50%{
        opacity: 0;
    }
    
}

@keyframes down {
    from{opacity: 1;}
    to{opacity: 0;}
    60%{
        opacity: 0;
    }
}


span.Text_Slide > h2{
    margin-left: 8px;
    color: green;
    font-size: 250%;
    font-weight:600;
    text-shadow: 2px 1px 1px lightgreen;
}

span.Text_Slide > a {
    font-family: Arial, Helvetica, sans-serif;
    color: green;
    font-weight: 900 !important;
    text-decoration: none;
    border: 5px solid green;
    border-radius: 5px;
    box-shadow: 1px 1px 10px darkgreen;
    padding: 10px 5%;
    z-index: 12;
    margin: 10px 0;
    position: absolute;
    left: 50%;
    text-align: right;
    font-size: 120%;
    font-weight: bold;
}

span.Text_Slide > a:hover{
    transform: translateX(-5px) translateY(-10px);
    transition: transform 60ms ease-in-out;
}



span.Text_Slide{
    display: none;
    width: 50%;

    padding: 5px 15px;
    z-index: 10;
    position: absolute;
    top: 5%;
    left: 5%;
    float: left;

}

span.Text_Slide > p{
    font-family: monospace;
    font-size: 200%;
    font-style: italic;
    padding: 5px 15px;
    border-left: 4px solid green;
}



div.Slides > img{
    display: none;
    width: 90%;
    height: 87vh;
    padding: auto;
    margin-left: 10%;
    opacity: 0.6;
}

@media screen and (max-width: 420px), screen and (max-width: 1080px) {

    @keyframes right_move{
        from{opacity: 0.1;transform: translateX(-120%);}
        to{opacity: 0.3;transform: translateX(0);}
    }

    span.Text_Slide > a {
        padding: 2vh 5%;
        margin: 4% 0;
    }

    #right_arrow, #left_arrow{
        display: none;
    }

    div#help_Slide{
        max-width: 100%;
        bottom: 5%;
        height: 15px;
    }

    .dot{
        width: 8vw;
        min-width: 15px !important;
        height: 8vw;
        min-height: 15px !important;
        margin: 0 2px;
    }

    div.Slides > img{
        width: 200%;
        margin-left: -50%;
        opacity: .3;
    }

    span.Text_Slide{
        width: 90%;
        top: 2%;
        left: 2%;
    }

    span.Text_Slide > p{
        font-size: 160%;
        color: darkgreen;

    }

    span.Text_Slide > h2{
        text-align: center;
        font-size: 180%;
    }
}
@media screen and (max-width: 1080px) and (orientation: landscape){

    span.Text_Slide > a {
        padding: 1vh 5%;
        margin: 1% 0;
    }

    .dot{
        width: 8vh;
        height: 8vh;
        margin: 0 2px;
    }

    span.Text_Slide{
        width: 50%;
    }

    span.Text_Slide > p{
        font-size: 110%;

    }

    span.Text_Slide > h2{
        font-size: 140%;
    }

    div#help_Slide{
        max-width: 100%;
        bottom: 5%;
        height: 15px;
    }

}

@media screen and (max-width: 300px) {

    span.Text_Slide > p{
        font-size: 110%;
    }
    
    span.Text_Slide > h2{
        font-size: 140%;
    }

    span.Text_Slide > a {
        font-size: 100%;
    }
}