/*:root {
    --font-: rgba(22, 2, 16, 1.0);
	--nav-: rgba(161, 166, 65, 1.0);
	--nav-hover-: rgba(195, 194, 152, 1.0);
	--nav-hover-05-: rgba(195, 194, 152, .5);
	--border-: rgba(94, 43, 133, 1.00);
}*/
/* Slider */
#slider{
    width:100%;
    height:500px;
    position:relative;
    overflow:hidden;
}
.content > #slider + :not(#slider) {
      margin-top: -3.2em;
 }
@keyframes load{
    from{left:-100%;}
    to{left:0;}
}
.slides{
    width:500%;
    height:100%;
    position:relative;
    -webkit-animation: slide 30s infinite alternate;
    -moz-animation: slide 30s infinite alternate;
	-o-animation: slide 30s infinite alternate;
    animation: slide 30s infinite alternate;
	-webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}
.slider{
    width:20%;
    height:100%;
    float:left;
    position:relative;
    z-index:1;
    overflow:hidden;
}
.image{
    width:100%;
    height:100%;
}
.image img{
	position:absolute;
	top:0px;
	right: 10%;
	margin: 0px;
	padding: 0px;
    width:auto;
    height:100%;
	z-index: 2;
}

/* Legend */
.legend{
    border:500px solid transparent;
	bottom-left-radius: 100px;
    border-left:800px solid var(--nav-hover-05-);
    border-bottom:0;
    position:absolute;
	z-index: 3;
}

/* Contents */
.content-sl{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
	z-index: 4;
}
.content-txt{
    width:30vw;
    height:auto;
    float:left;
	text-align:left;
    position:absolute;
    bottom:80px;
    -webkit-animation: content-s 7.5s infinite ;
    -moz-animation: content-s 7.5s infinite ;
	-o-animation: content-s 7.5s infinite ;
    animation: content-s 7.5s infinite ;
	-webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
	z-index: 5;
}
.content-txt .h1 {
	display: block;
    text-transform:uppercase;
    font-size:24px;
	font-weight: bold;
    padding: 0px 0px 10px 30px;
}
.content-txt .h12 {
    font-weight:normal;
    font-size:14px;
    font-style:italic;
	padding: 0px 0px 10px 30px;
}

/* Switch */
.switch{
    width:120px;
    height:10px;
    position:absolute;
    bottom:55px;
    z-index:10;
    left:30px;
}
.switch > ul{
    list-style:none;
}
.switch > ul > li{
    width:10px;
    height:10px;
    border-radius:50%;
    background-color: var(--nav-);
    float:left;
    margin-right:5px;
    cursor:pointer;
}
.switch ul{
    overflow:hidden;
}
.on{
    width:100%;
    height:100%;
    border-radius:50%;
    background-color: var(--border-);
    position:relative;
    -webkit-animation:on 30s infinite alternate;
    -moz-animation:on 30s infinite alternate;
	-o-animation:on 30s infinite alternate;
    animation:on 30s infinite alternate;
	-webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}

@media screen and (max-width: 768px) {
	.legend{
        border-left:500px solid var(--nav-hover-05-);
    }
	.content-txt{
		width:80vw;
	}
	.content-txt .h1{
        font-size:20px;
		padding: 0px 0px 10px 15px;
    }
	.image img{
		top:-20%;
		right: -25%;
	}
    .content-txt .h12{
        padding: 0px 0px 10px 15px;
    }
	.switch {
        left:15px;
    }
}

@media screen and (max-width: 321px) {
	.image img{
		top:-20%;
		right: -45%;
	}
	#slider{
        height:350px;
    }
}

/* Animation */
@-webkit-keyframes slide{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:-100%;}
    35.5%{margin-left:-100%;}
    39.5%{margin-left:-200%;}
    60.5%{margin-left:-200%;}
    64.5%{margin-left:-300%;}
	85.5%{margin-left:-300%;}
	89.5%{margin-left:-400%;}
	100%{margin-left:-400%;}
}
@-moz-keyframes slide{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:-100%;}
    35.5%{margin-left:-100%;}
    39.5%{margin-left:-200%;}
    60.5%{margin-left:-200%;}
    64.5%{margin-left:-300%;}
	85.5%{margin-left:-300%;}
	89.5%{margin-left:-400%;}
	100%{margin-left:-400%;}
}
@keyframes slide{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:-100%;}
    35.5%{margin-left:-100%;}
    39.5%{margin-left:-200%;}
    60.5%{margin-left:-200%;}
    64.5%{margin-left:-300%;}
	85.5%{margin-left:-300%;}
	89.5%{margin-left:-400%;}
	100%{margin-left:-400%;}
}

@-webkit-keyframes content-s{
	0%{left:-100%;}
    10%{left:-100%;}
    18%{left:3vw;}
    20%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0px;}
    80%{left:-100%;}
    90%{left:-100%;}
    100%{left:-100%;}
}
@-moz-keyframes content-s{
    0%{left:-100%;}
    10%{left:-100%;}
    18%{left:3vw;}
    20%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0px;}
    80%{left:-100%;}
    90%{left:-100%;}
    100%{left:-100%;}
}
@keyframes content-s{
    0%{left:-100%;}
    10%{left:-100%;}
    18%{left:3vw;}
    20%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0px;}
    80%{left:-100%;}
    90%{left:-100%;}
    100%{left:-100%;}
}

@-webkit-keyframes on{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:15px;}
    35.5%{margin-left:15px;}
    39.5%{margin-left:30px;}
    60.5%{margin-left:30px;}
    64.5%{margin-left:45px;}
    85.5%{margin-left:45px;}
	89.5%{margin-left:60px;}
    100%{margin-left:60px;}
}
@-moz-keyframes on{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:15px;}
    35.5%{margin-left:15px;}
    39.5%{margin-left:30px;}
    60.5%{margin-left:30px;}
    64.5%{margin-left:45px;}
    85.5%{margin-left:45px;}
	89.5%{margin-left:60px;}
    100%{margin-left:60px;}
}
@keyframes on{
    0%{margin-left:0%;}
    10.5%{margin-left:0%;}
    14.5%{margin-left:15px;}
    35.5%{margin-left:15px;}
    39.5%{margin-left:30px;}
    60.5%{margin-left:30px;}
    64.5%{margin-left:45px;}
    85.5%{margin-left:45px;}
	89.5%{margin-left:60px;}
    100%{margin-left:60px;}
}