/* Content slide */
*{margin: 0; padding: 0;}
html,body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.slidewrapper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.slides {height: 100%;}
.slides ul {
    height: 100%;
    position: relative;
}
.slides ul li {
    list-style: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 0.4s;
    opacity: 0;
}
.slides ul li.active {
    opacity: 1;
}
.slides ul li .aslide {
    position: relative;
}

.aslide {
    height: 100%;
    width: 100%;
    position: absolute;
}
.aslide .img {
    width: 100%;
    height: 100%;
    background-size: cover;
} 
.aslide .bottom1,
.aslide .bottom2,
.aslide .top,
.aslide .content {
    position: absolute;
    z-index: 1;
    top: 0;
    opacity: 0;
}
.aslide .bottom1 {
    opacity: 0;
    top: -55%;
}
ul li.active .aslide .bottom1 {
    animation: moveout1 1s forwards;
}
@-webkit-keyframes moveout1 {
    from {transform: translateX(-100%) translateY(100%); opacity: 0;}
    to {transform: translateX(0) translateY(0); opacity: 0.4;}
}
.aslide .bottom2 {
    opacity: 0;
    top: -20%;
}
ul li.active .aslide .bottom2 {
    animation: moveout2 1.5s forwards;
}
@-webkit-keyframes moveout2 {
    from {transform: translateX(-100%) translateY(100%); opacity: 0;}
    to {transform: translateX(0) translateY(0); opacity: 0.8;}
}
.aslide .top {
    opacity: 0;   
    right: -10%;
}
ul li.active .aslide .top {
    animation: moveout3 1s forwards;
}
@-webkit-keyframes moveout3 {
    from {transform: translateX(100%) translateY(-100%); opacity: 0;}
    to {transform: translateX(0) translateY(0); opacity: 0.4;}
}
.aslide .content {
    width: 16%; 
    left: 5%;
    top: 20%;
    z-index: 3;
    opacity: 1;
    color: white;
}

.content h2 {
    font-size: 80px;
    font-weight: normal;
    font-family: segoe ui light;
    opacity: 0;
}
.content small {
    font-size: 33px;
    font-weight: bold;
    font-family: segoe ui;
    padding: 10px 0 10px 0;
    display: block;
    opacity: 0;
}
.content .line {
    height: 2px;
    width: 30%;
    background: white;
    margin: 1px 0 20px 0;
    opacity: 0;
}
.content p {
    font-size: 12px;
    line-height: 20px;
    color: #dacfcf;
    opacity: 0;
}
.content .button {
    text-decoration: none;
    color: white;
    border: 1px solid;
    padding: 11px 32px;
    margin: 14px 0 0 0;
    display: inline-block;
    opacity: 0;
}
.slides ul li.active .content h2,
.slides ul li.active .content small,
.slides ul li.active .content .line,
.slides ul li.active .content p,
.slides ul li.active .content .button {
    animation: moveout4 1s forwards;
}
@-webkit-keyframes moveout4 {
    from {transform: translateX(-100px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}
.slides ul li.active .content h2 {animation-delay: 0.8s;}
.slides ul li.active .content small {animation-delay: 1.2s;}
.slides ul li.active .content .line {animation-delay: 1.6s;}
.slides ul li.active .content p {animation-delay: 2s;}
.slides ul li.active .content .button {animation-delay: 2.2s;}

.chuyenslide {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;  
    transform: translateX(-50%);
    z-index: 9;
}
.chuyenslide ul {
    display: inline;
}
.chuyenslide ul li {
    display: inline-block;
    border: 1px solid #42d6b8;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 20px 12px;
    transition: 0.4s;
    cursor: pointer;
}
.chuyenslide ul li.active,
.chuyenslide ul li:hover {
    border: 2px solid blue;
    background: white;
    transition: 0.4s;
}