body {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
}

li.anim-slide:nth-of-type(1) {
    background: url("../../images/banner8.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(2) {
    background: url("../../images/banner11.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(3) {
    background: url("../../images/banner2.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(4) {
    background: url("../../images/banner3.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(5) {
    background: url("../../images/banner4.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(6) {
    background: url("../../images/banner5.jpg") 100%/cover;
}

li.anim-slide:nth-of-type(7) {
    background: url("../../images/banner6.jpg") 100%/cover;
}

@media screen and (max-width: 599px) {
    .fn_winHeight {}

    li.anim-slide:nth-of-type(1) {
        background: url("../../images/banner8.jpg") 100%/cover;
        /* background: none; */
    }

    li.anim-slide:nth-of-type(2) {
        background: url("../../images/mobile_banner1.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    li.anim-slide:nth-of-type(3) {
        background: url("../../images/mobile_banner2.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    li.anim-slide:nth-of-type(4) {
        background: url("../../images/mobile_banner3.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    li.anim-slide:nth-of-type(5) {
        background: url("../../images/mobile_banner4.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    li.anim-slide:nth-of-type(6) {
        background: url("../../images/mobile_banner5.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    li.anim-slide:nth-of-type(7) {
        /* background: url("../../images/banner6.jpg") 100%/cover;
        display: none; */
        background: url("../../images/mobile_banner3.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

.visibilty_low {
    opacity: 0 !important;
}

.anim-slide h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    z-index: 999;
}

.anim-slide h2 {
    color: #fff;
    font-size: 50px;
    font-weight: 300;
    z-index: 999;
}

.anim-slide h3 {
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    z-index: 999;
}

.anim-slide h4 {
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    z-index: 999;
}

.anim-slide h1#slider {
    padding: 6px;
    width: 100%;
    top: 1%;
}

.anim-slide h2#plugin {
    width: 100%;
    top: 10%;
}

.anim-slide h3#license {
    width: 100%;
    top: 21%;
}

.anim-slide h4#version {
    width: 100%;
    top: 31%;
}

.anim-slide h1#slider1 {
    padding: 6px;
    width: 100%;
    top: 1%;
}

.anim-slide h2#plugin1 {
    width: 100%;
    top: 10%;
}

.anim-slide h3#license1 {
    width: 100%;
    top: 21%;
}

.anim-slide h4#version1 {
    width: 100%;
    top: 31%;
}

.anim-slide h1#slider2 {
    padding: 6px;
    width: 100%;
    top: 1%;
}

.anim-slide h2#plugin2 {
    width: 100%;
    top: 10%;
}

.anim-slide h3#license2 {
    width: 100%;
    top: 21%;
}

.anim-slide h4#version2 {
    width: 100%;
    top: 31%;
}

.anim-slide h1#slider3 {
    padding: 6px;
    width: 100%;
    top: 1%;
    color: #023957;
}

.anim-slide h2#plugin3 {
    width: 100%;
    top: 9%;
    color: #023957;
    font-size: 40px;
}

.anim-slide h3#license3 {
    width: 100%;
    top: 18%;
    color: #023957;
    font-size: 50px;
}

.anim-slide h4#version3 {
    width: 100%;
    top: 31%;
    color: #023957;
}

.anim-slide h1#slider4 {
    padding: 6px;
    width: 100%;
    top: 1%;
}

.anim-slide h2#plugin4 {
    width: 100%;
    top: 10%;
}

.anim-slide h3#license4 {
    width: 100%;
    top: 21%;
}

.anim-slide h4#version4 {
    width: 100%;
    top: 32%;
}

.anim-slide h1#slider5 {
    width: 100%;
    top: 40%;
    text-align: left;
    font-size: 48px;
    text-transform: uppercase;
    left: 10%;
}

.anim-slide h2#plugin5 {
    width: auto;
    top: 50%;
    text-align: left;
    left: 10%;
    background: rgba(14, 45, 61, 0.7);
    padding: 6px;
    display: inline-block;
    font-size: 40px;
}

.anim-slide h2#plugin5 span {
    color: #dbd305;
    position: initial;
}

.anim-slide h3#license5 {
    width: 100%;
    top: 60%;
    text-align: left;
    left: 10%;
    font-size: 43px;
}

.anim-slide h4#version5 {
    width: 100%;
    top: 70%;
    text-align: left;
    left: 10%;
}

.anim-slide h3#todo {
    top: 0%;
    left: 20%;
}

.anim-slide h3#bounce {
    top: 15%;
    left: 49%;
}

.anim-slide h4#bounceUp {
    top: 15%;
    left: 60%;
}

.anim-slide h4#bounceRight {
    top: 15%;
    left: 75%;
}

.anim-slide h3#fade {
    top: 31%;
    left: 20%;
}

.anim-slide h4#fadeDown {
    top: 43%;
    left: 28%;
}

.anim-slide h4#fadeUp {
    top: 31%;
    left: 28%;
}

.anim-slide h3#rotate {
    top: 50%;
    left: 49%;
}

.anim-slide h4#rotateRight {
    top: 50%;
    left: 61%;
}

.anim-slide h4#rotateLeft {
    top: 50%;
    left: 80%;
}

.anim-slide img#css3 {
    left: 0%;
    bottom: 0;
}

.anim-slide img#css4 {
    right: 2%;
    bottom: 0;
}

.anim-slide img#html6 {
    left: 52%;
    top: -1%;
}

.anim-slide img#jquery {
    top: 60%;
    left: 41%;
}

.anim-slide img#modernizr {
    width: 260px;
    top: 75%;
    left: 20%;
}

.anim-slide h2#animatecss {
    top: 45%;
    left: 27%;
    color: #29C4B5;
    font-size: 60px;
}

.anim-slide img#css32 {
    right: 5%;
    bottom: 0;
}

.anim-slide img#html6n {
    left: 50%;
    top: 28%;
    margin-left: -194px;
    width: 400px;
}

div#demo {
    text-align: center;
}

div#demo>a {
    display: inline-block;
    text-decoration: none;
}

div#demo>a>h4 {
    padding: 5px 8px;
    margin: 20px;
    background-color: #225A86;
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

p#credits {
    z-index: -1;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

p#credits>a {
    font-weight: bold;
    color: #999;
    text-decoration: none;
}

img#github-logo {
    z-index: -1;
    position: fixed;
    bottom: -20px;
    right: 2%;
    opacity: 0.4;
}






.text-dark {
    /* color: #000 !important; */
}

.first_slide h1 {
    left: 5%;
    top: 5%;
}

.first_slide h2 {
    left: 5%;
    top: 20%;
}

.first_slide h3 {
    left: 5%;
    top: 33%;
    font-size: 32px;
}

.first_slide .last_text {
    left: 5%;
    top: 45%;
    width: 100%;
    text-align: left;
    line-height: 23px;
}

.first_slide .last_text span {
    display: block !important;
    width: 100% !important;
    font-size: 14px;
    font-weight: 500;

}

.first_slide .last_text .h5 {

    font-size: 14px;
    font-weight: 500;
    /* margin-top: 100px; */
    width: 100%;
    text-align: left;
    line-height: 25px;

}

.first_slide .last_text .h5 .div1 {
    top: 5%;
    position: relative;
    font-size: 16px;
}

.first_slide .last_text .h5 .div2 {
    top: 15%;
    position: relative;
    font-size: 16px;
}

.first_slide .last_text .h5 .div3 {
    top: 20%;
    position: relative;
    font-size: 16px;
}

.first_slide .last_text .h5 .div4 {
    top: 25%;
    position: relative;
    font-size: 16px;
}








@media (max-width: 800px) {
    .anim-slide h1 {
        font-size: 22px;
        padding: 0 10px;
    }

    .anim-slide h2 {
        font-size: 26px;
        padding: 0 10px;
    }

    .anim-slide h3 {
        font-size: 20px;
        padding: 0 10px;
    }

    .anim-slide h4 {
        font-size: 18px;
        padding: 0 10px;
    }

    .anim-slide img#css3,
    .anim-slide img#css32,
    .anim-slide img#css4 {
        height: 200px;
    }

    .anim-slide #html5n {
        height: 60px;
        left: inherit !important;
        margin-left: 0 !important;
        position: inherit !important;
    }

    ul.anim-slider li.last {
        text-align: center;
        position: inherit;
        left: inherit;
    }

    .anim-slide h2#animatecss {
        left: 0;
        font-size: 34px;
        width: 100%;
        top: 38%;
    }

    .anim-slide h2#plugin {
        top: 14%;
    }

    .anim-slide h3#license {
        top: 27%;
    }

    .anim-slide h2#plugin1 {
        top: 14%;
    }

    .anim-slide h3#license1 {
        top: 27%;
    }

    .anim-slide h2#plugin2 {
        top: 11%;
    }

    .anim-slide h3#license2 {
        top: 24%;
    }

    .anim-slide h2#plugin3 {
        top: 9%;
        font-size: 26px;
    }

    .anim-slide h3#license3 {
        top: 17%;
        font-size: 28px;
    }

    .anim-slide h4#version3 {
        top: 28%;
        font-size: 22px;
    }

    .anim-slide h1#slider4 {
        top: 1%;
    }

    .anim-slide h2#plugin4 {
        top: 13%;
    }

    .anim-slide h3#license4 {
        top: 24%;
    }

    .anim-slide h4#version4 {
        top: 36%;
    }

    .first_slide .last_text .h5 .div1 {
        top: 5%;
        position: relative;
    }

    .first_slide .last_text .h5 .div2 {
        top: 15%;
        position: relative;
    }

    .first_slide .last_text .h5 .div3 {
        top: 20%;
        position: relative;
    }

    .first_slide .last_text .h5 .div4 {
        top: 25%;
        position: relative;
    }

    .first_slide .last_text .h5 {
        line-height: 20px;
    }
}

@media (max-width: 480px) {
    .anim-slide h1 {
        font-size: 18px;
        padding: 0 10px;
    }

    .anim-slide h2 {
        font-size: 22px;
        padding: 0 10px;
    }

    .anim-slide h3 {
        font-size: 16px;
        padding: 0 10px;
    }

    .anim-slide h4 {
        font-size: 14px;
        padding: 0 10px;
    }

    .anim-slide img#css3,
    .anim-slide img#css32,
    .anim-slide img#css4 {
        height: 150px;
    }

    .anim-slide #html5n {
        height: 60px;
        left: inherit !important;
        margin-left: 0 !important;
        position: inherit !important;
    }

    ul.anim-slider li.last {
        text-align: center;
        position: inherit;
        left: inherit;
    }

    .anim-slide h2#animatecss {
        left: 0;
        font-size: 30px;
        width: 100%;
        top: 38%;
    }

    .anim-slide h2#plugin {
        top: 14%;
    }

    .anim-slide h3#license {
        top: 28%;
    }

    .anim-slide h2#plugin1 {
        top: 14%;
    }

    .anim-slide h3#license1 {
        top: 28%;
    }

    .anim-slide h2#plugin2 {
        top: 11%;
    }

    .anim-slide h3#license2 {
        top: 24%;
    }

    .anim-slide h2#plugin3 {
        top: 9%;
        font-size: 22px;
    }

    .anim-slide h3#license3 {
        top: 17%;
        font-size: 24px;
    }

    .anim-slide h4#version3 {
        top: 26%;
        font-size: 18px;
    }

    .anim-slide h1#slider4 {
        top: 1%;
    }

    .anim-slide h2#plugin4 {
        top: 13%;
    }

    .anim-slide h3#license4 {
        top: 26%;
    }

    .anim-slide h4#version4 {
        top: 38%;
    }

    .first_slide .last_text .h5 .div1 {
        top: 5%;
        position: relative;
    }

    .first_slide .last_text .h5 .div2 {
        top: 15%;
        position: relative;
    }

    .first_slide .last_text .h5 .div3 {
        top: 20%;
        position: relative;
    }

    .first_slide .last_text .h5 .div4 {
        top: 25%;
        position: relative;
    }

    .first_slide .last_text .h5 {
        line-height: 20px;
    }
}

@media (max-width: 320px) {
    .anim-slide h1 {
        font-size: 16px;
        padding: 0 10px;
    }

    .anim-slide h2 {
        font-size: 20px;
        padding: 0 10px;
    }

    .anim-slide h3 {
        font-size: 14px;
        padding: 0 10px;
    }

    .anim-slide h4 {
        font-size: 12px;
        padding: 0 10px;
    }

    .anim-slide img#css3,
    .anim-slide img#css32,
    .anim-slide img#css4 {
        height: 150px;
    }

    .anim-slide #html5n {
        height: 60px;
        left: inherit !important;
        margin-left: 0 !important;
        position: inherit !important;
    }

    ul.anim-slider li.last {
        text-align: center;
        position: inherit;
        left: inherit;
    }

    .anim-slide h2#animatecss {
        left: 0;
        top: 40%;
        font-size: 26px;
        width: 100%;
    }

    .anim-slide h2#plugin {
        top: 14%;
    }

    .anim-slide h3#license {
        top: 28%;
    }

    .anim-slide h2#plugin1 {
        top: 14%;
    }

    .anim-slide h3#license1 {
        top: 28%;
    }

    .anim-slide h2#plugin2 {
        top: 11%;
    }

    .anim-slide h3#license2 {
        top: 26%;
    }

    .anim-slide h2#plugin3 {
        top: 9%;
        font-size: 20px;
    }

    .anim-slide h3#license3 {
        top: 15%;
        font-size: 22px;
    }

    .anim-slide h4#version3 {
        top: 26%;
        font-size: 16px;
    }

    .anim-slide h1#slider4 {
        top: 1%;
    }

    .anim-slide h2#plugin4 {
        top: 13%;
    }

    .anim-slide h3#license4 {
        top: 26%;
    }

    .anim-slide h4#version4 {
        top: 38%;
    }

    .first_slide .last_text .h5 {
        line-height: 20px;
    }

    .first_slide .last_text .h5 .div1 {
        top: 5%;
        position: relative;
    }

    .first_slide .last_text .h5 .div2 {
        top: 15%;
        position: relative;
    }

    .first_slide .last_text .h5 .div3 {
        top: 20%;
        position: relative;
    }

    .first_slide .last_text .h5 .div4 {
        top: 25%;
        position: relative;
    }
}