@charset "utf-8";
/* CSS Document */

#container{ width:100%; height:100%; background-color:#222;}

span.cap {
	display:none;
}
ul.slider {
    margin:0 auto;
	padding:0;
	width:100%;
    height:100%;
    list-style:none;
    position:relative;
}
ul.slider li {
    float:left;
}
ul.slider li.slides {
	height:100%;
    width:100%;
    overflow:hidden;
    position:relative;
    z-index:10;
}
ul.slider li.slides img {
    display:block;
	transition: opacity 2s linear 0.5s;
	opacity:0; 
    position:absolute;
}
ul.slider li.track {
    clear:left;
	margin-top:-80px;
	width:100%;
    position:relative;
    text-align:center;
    z-index:20;
	-moz-transform:translateY(-100%);
     -o-transform:translateY(-100%);
     -webkit-transform:translateY(-100%);
	transform:translateY(-100%);
}
ul.slider li.track a {
    background-color:#e9b500;
    display:inline-block;
    height:18px;
    margin:10px;
    width:18px;
	border-radius:9px;
    -moz-box-shadow:inset 0 0 4px #000;
    -webkit-box-shadow:inset 0 0 4px #000;
    box-shadow:inset 0 0 4px #000;
}
ul.slider li.track>div{
	overflow:hidden;
	height:0;
	transition:opacity 2s linear 0.5s;
	opacity:0;
	width:100%;
}
ul.slider li.track a:hover .trackOver{
	height:8px;
    width:8px;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box;
	padding:5px;
    border-radius:9px;
    background-color:#fff;
}
/* * Muestra el slide que haya indicado en la url * */
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5 {
	transition: opacity 2s linear 0.5s;
	opacity:1;
}
/* * Muestra el slide 0 al cargar * */
ul.slider li.slides .g0 {
    opacity:1;

}
/* * Oculta la imágen del slide 0 * */
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0 {
	transition: opacity 2s linear 0s
    opacity:0;

}
/* * pone el marcado en el track * */
span#slide1:target ~ ul.slider li.track .tr1 .trackOver, 
span#slide2:target ~ ul.slider li.track .tr2 .trackOver, 
span#slide3:target ~ ul.slider li.track .tr3 .trackOver, 
span#slide4:target ~ ul.slider li.track .tr4 .trackOver, 
span#slide5:target ~ ul.slider li.track .tr5 .trackOver{
	height:8px;
    width:8px;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box;
	padding:5px;
    border-radius:9px;
    background-color:#fff;
}
/* * Muestra el texto del track activo * */
span#slide1:target ~ ul.slider li.track .descViaje1, 
span#slide2:target ~ ul.slider li.track .descViaje2, 
span#slide3:target ~ ul.slider li.track .descViaje3, 
span#slide4:target ~ ul.slider li.track .descViaje4, 
span#slide5:target ~ ul.slider li.track .descViaje5{
	height:auto;
	transition:opacity 2s linear 0.5s;
	opacity:1;
}

ul.slider li.slides img {
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
}

/* @media screen and (min-aspect-ratio:3/2){
	ul.slider li.slides img {width:100%; height:auto;}
}
@media screen and (max-aspect-ratio:3/2){
	ul.slider li.slides img {width:auto; height:100%;}
}
@media screen and (max-width:590px){
	ul.slider li.track {margin-top:-80px;}
} */