/*MOBILE*/
	img {
		width: 100%;
		height:100%;
	}

.slider-container{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-all{
    position: relative;
    max-width: 1100px;
    width: 100%;
    overflow: hidden;
    border:solid 2px #ccc;
}

.slide{
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
    animation-name: autoplay;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.item-slide{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
}

.pagination{
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pagination-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid white;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 10px;
    text-align: center;
    transition: all 300ms;
}

.pagination-item:hover{
    transform: scale(2);
}

.pagination-item img{
    display: inline-block;
    max-width: none;
    height: 100%;
    transform: scale(1);
    opacity: 0;
    transition: all 300ms;
}

.pagination-item:hover img{
    opacity: 1;
    transform: scale(1);
}


input[id="1"]:checked ~ .slide{
    animation: none;
    transform: translate3d(0, 0, 0);
}

input[id="1"]:checked ~ .pagination .pagination-item[for="1"]{
    background: #fff;
}

input[id="2"]:checked ~ .slide{
    animation: none;
    transform: translate3d(calc(-100% * 1), 0, 0);
}

input[id="2"]:checked ~ .pagination .pagination-item[for="2"]{
    background: #fff;
}


input[id="3"]:checked ~ .slide{
    animation: none;
    transform: translate3d(calc(-100% * 2), 0, 0);
}

input[id="3"]:checked ~ .pagination .pagination-item[for="3"]{
    background: #fff;
}

input[id="4"]:checked ~ .slide{
    animation: none;
    transform: translate3d(calc(-100% * 3), 0, 0);
}

input[id="4"]:checked ~ .pagination .pagination-item[for="4"]{
    background: #fff;
}

input[id="5"]:checked ~ .slide{
    animation: none;
    transform: translate3d(calc(-100% * 4), 0, 0);
}

input[id="5"]:checked ~ .pagination .pagination-item[for="5"]{
    background: #fff;
}

@keyframes autoplay{
    20%{
        transform: translate3d(calc(-100% * 0), 0, 0);
    }
    
    40%{
        transform: translate3d(calc(-100% * 1), 0, 0);
    }
    
    60%{
        transform: translate3d(calc(-100% * 2), 0, 0);
    }

    80%{
        transform: translate3d(calc(-100% * 3), 0, 0);
    }

    100%{
        transform: translate3d(calc(-100% * 4), 0, 0);
    }
}

.main{
	width:100%;
	height:100%;
	margin-top:5px;
	display:flex;
	flex-direction: column;
	align-items: center;
}

.title{
	font-size: 25px;
	text-align:center;
	width:100%;
	color:#fff;
	display:block;
	font-family:montserrat; 
	text-shadow: 4px 4px #000;
	text-decoration: none;
	letter-spacing: 10px;
}

.noticia{
	width:90%;
	display:flex;
	flex-direction:column;
	margin:40px 5%;
}

.text{
	width:100%;
	height:100%;
	color:#fff;
}

.imgn{
	width:100%;
	display:flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

.img{
	width:50%;
	background-color:rgb(12, 12, 12);
	border: 2px solid #fff;
}

.titulon{
	width:100%;
	height:20%;
	display:block;
	font-size:20px;
	font-family: banger;
	font-weight:600;
	letter-spacing: 3px;
	text-decoration: underline;
}

p {
	width:100%;
	height:80%;
	display:block;
	font-family: arial;
}

p a {
	color:#fff;
}

.img video {
	width:100%;
}

/*TABLET*/
@media only screen and (min-width:500px){
	.main{
		margin-top:30px;
	}

	.title{
		font-size: 35px;
	}

	.noticia{
		margin-top:30px;
	}

	.titulon{
		font-size:25px;
	}

	p{
		font-size:20px;
	}

	.img{
		width:30%;
	}

	.imgn{
		margin-top:50px;
	}
}

/*NOTEBOOK1*/
@media only screen and (min-width:1024px){
	.main{
		margin-top:40px;
	}

	.title{
		font-size: 40px;
	}

	.noticia{
		margin-top:60px;
		flex-direction:row;
		width:55%;
	}
	
	.text{
		width:70%;
	}

	.img{
		display:block;
		width:80%;
	}

	.titulon{
		font-size:20px;
	}

	.imgn{
		width:25%;
		margin-top:0px;
	}
}

/*NOTEBOOK2*/
@media only screen and (min-width:1400px){
	.imgn{
		margin-top:20px;
	}
}

/*PC*/
@media only screen and (min-width:1890px){
	.main{
		margin-top:60px;
	}

	.title{
		font-size: 50px;
	}

	.noticia{
		width:50%;
		margin-top:60px;
	}
	
	.img{
		display:block;
		width:80%;
	}

	.titulon{
		font-size:35px;
	}

	p{
		font-size:25px;
	}
}