.lista{
    width: 100%;
    height: 700px;
    overflow: auto; padding: 50px;
    box-shadow: 0px 7px 46px 0px rgba(0, 0, 0, 0.3);
    background: #1c2e4a; border-radius: 8px;
    background-image: linear-gradient(147deg, #2e3a59 0%, #1a2b46 74%);
}


/*----------------------------------------*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	*background: indigo;
    background: #2e3a59;
}

.logo{
	width: 100%;
	height: 300px;
	border-radius: 20px;

}

.menu{
	background: lightyellow;
	*padding-bottom: 20px;
	border-radius: 40px;

}

.menu__container{

}

.menu__links{
	font-family: 20px;

}
.menu__item{
	list-style: none;


}

.menu__item > a{
	text-decoration: none;
	font-size: 40px;
	padding-top: 10px;


}


/*.container{
	height: 400px;
	overflow-x: hidden;
}*/

.container{
    width: 100%;
    height: 400px;
    overflow: auto; padding: 0px;
    box-shadow: 0px 7px 46px 0px rgba(0, 0, 0, 0.3);
    background: #1c2e4a; border-radius: 8px;
    background-image: linear-gradient(147deg, #2e3a59 0%, #1a2b46 74%);
}





.cuerpo{
	background: rgb(14, 56, 90);
	padding-top: 20px;
	border-radius: 40px;

}

.tipo{
    
}

.texto0{
	background: white;
	margin: 0px 400px 0px 400px;
	border-radius: 5px;


}

.color{
	background: white;
	margin: 0px 400px 0px 400px;
	border-radius: 10px;

}

.texto1{
	text-transform: uppercase;

}


/*cuadro*/

/* Ocultar botón radio */
input[id^="spoiler"]{
display: none;
}
/* Estilo botón clicable */
input[id^="spoiler"] + label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: ivory;
cursor: pointer;
border-radius: 20px;
}
/* Estilo botón cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
/* Estilo caja SPOILER (inicialmente oculto) */
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
/* Estilo caja SPOILER cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}

.mac{
	width: 400px;
	border-radius: 20px;
}

/*responsive*/

@media screen and (max-width: 1220px){
.logo{
	width: 100%;
	*height: 300px;
	border-radius: 20px;

}

.menu{
	background: lightyellow;
	*padding-bottom: 20px;
	border-radius: 40px;

}

.menu__container{

}

.menu__links{
	font-family: 20px;

}
.menu__item{
	list-style: none;


}

.menu__item > a{
	text-decoration: none;
	font-size: 40px;
	padding-top: 10px;


}

.cuerpo{
	background: rgb(14, 56, 90);
	padding-top: 20px;
	border-radius: 40px;

}

.tipo{

}

.texto0{
	background: white;
	margin: 0px 400px 0px 400px;
	border-radius: 5px;


}

.color{
	background: white;
	margin: 0px 400px 0px 400px;
	border-radius: 10px;

}

.texto1{
	text-transform: uppercase;

}


/*cuadro*/

/* Ocultar botón radio */
input[id^="spoiler"]{
display: none;
}
/* Estilo botón clicable */
input[id^="spoiler"] + label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: ivory;
cursor: pointer;
border-radius: 20px;
}
/* Estilo botón cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
/* Estilo caja SPOILER (inicialmente oculto) */
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
/* Estilo caja SPOILER cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}

.mac{
	width: 200px;
	border-radius: 20px;
}

}
















@media screen and (max-width: 420px){
    .logo{
        width: 100%;
        height: 225px;
        border-radius: 20px;
    
    }
    
    .menu{
        background: lightyellow;
        *padding-bottom: 20px;
        border-radius: 40px;
    
    }
    
    .menu__container{
    
    }
    
    .menu__links{
        font-family: 20px;
    
    }
    .menu__item{
        list-style: none;
    
    
    }
    
    .menu__item > a{
        text-decoration: none;
        font-size: 40px;
        padding-top: 10px;
    
    
    }
    
    .cuerpo{
        background: rgb(14, 56, 90);
        padding-top: 20px;
        border-radius: 40px;
    
    }
    
    .tipo{
    
    }
    
    .texto0{
        background: white;
        margin: 0px 50px 0px 50px;
        border-radius: 5px;
    
    
    }
    
    .color{
        background: white;
        margin: 0px 25px 0px 25px;
        border-radius: 10px;
    
    }
    
    .texto1{
        text-transform: uppercase;
    
    }
    
    
    /*cuadro*/
    
    /* Ocultar botón radio */
    input[id^="spoiler"]{
    display: none;
    }
    /* Estilo botón clicable */
    input[id^="spoiler"] + label {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 5px 20px;
    background: ivory;
    cursor: pointer;
    border-radius: 20px;
    }
    /* Estilo botón cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label {
    color: #333;
    background: #ccc;
    }
    /* Estilo caja SPOILER (inicialmente oculto) */
    input[id^="spoiler"] ~ .spoiler {
    width: 90%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 10px auto 0;
    }
    /* Estilo caja SPOILER cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label + .spoiler{
    height: auto;
    opacity: 1;
    }
    
    .mac{
        width: 200px;
        border-radius: 20px;
    }
    
    }
    
    
    @media screen and (max-width: 380px){
    .logo{
        width: 100%;
        height: 225px;
        border-radius: 20px;
    
    }
    
    .menu{
        background: lightyellow;
        *padding-bottom: 20px;
        border-radius: 40px;
    
    }
    
    .menu__container{
    
    }
    
    .menu__links{
        font-family: 20px;
    
    }
    .menu__item{
        list-style: none;
    
    
    }
    
    .menu__item > a{
        text-decoration: none;
        font-size: 40px;
        padding-top: 10px;
    
    
    }
    
    .cuerpo{
        background: rgb(14, 56, 90);
        padding-top: 20px;
        border-radius: 40px;
    
    }
    
    .tipo{
    
    }
    
    .texto0{
        background: white;
        margin: 0px 50px 0px 50px;
        border-radius: 5px;
    
    
    }
    
    .color{
        background: white;
        margin: 0px 25px 0px 25px;
        border-radius: 10px;
    
    }
    
    .texto1{
        text-transform: uppercase;
    
    }
    
    
    /*cuadro*/
    
    /* Ocultar botón radio */
    input[id^="spoiler"]{
    display: none;
    }
    /* Estilo botón clicable */
    input[id^="spoiler"] + label {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 5px 20px;
    background: ivory;
    cursor: pointer;
    border-radius: 20px;
    }
    /* Estilo botón cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label {
    color: #333;
    background: #ccc;
    }
    /* Estilo caja SPOILER (inicialmente oculto) */
    input[id^="spoiler"] ~ .spoiler {
    width: 90%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 10px auto 0;
    }
    /* Estilo caja SPOILER cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label + .spoiler{
    height: auto;
    opacity: 1;
    }
    
    .mac{
        width: 200px;
        border-radius: 20px;
    }
    
    }
    
    
    
    @media screen and (max-width: 340px){
    .logo{
        width: 100%;
        height: 200px;
        border-radius: 20px;
    
    }
    
    .menu{
        background: lightyellow;
        *padding-bottom: 20px;
        border-radius: 40px;
    
    }
    
    .menu__container{
    
    }
    
    .menu__links{
        font-family: 20px;
    
    }
    .menu__item{
        list-style: none;
    
    
    }
    
    .menu__item > a{
        text-decoration: none;
        font-size: 40px;
        padding-top: 10px;
    
    
    }
    
    .cuerpo{
        background: rgb(14, 56, 90);
        padding-top: 20px;
        border-radius: 40px;
    
    }
    
    .tipo{
    
    }
    
    .texto0{
        background: white;
        margin: 0px 50px 0px 50px;
        border-radius: 5px;
    
    
    }
    
    .color{
        background: white;
        margin: 0px 25px 0px 25px;
        border-radius: 10px;
    
    }
    
    .texto1{
        text-transform: uppercase;
    
    }
    
    
    /*cuadro*/
    
    /* Ocultar botón radio */
    input[id^="spoiler"]{
    display: none;
    }
    /* Estilo botón clicable */
    input[id^="spoiler"] + label {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 5px 20px;
    background: ivory;
    cursor: pointer;
    border-radius: 20px;
    }
    /* Estilo botón cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label {
    color: #333;
    background: #ccc;
    }
    /* Estilo caja SPOILER (inicialmente oculto) */
    input[id^="spoiler"] ~ .spoiler {
    width: 90%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 10px auto 0;
    }
    /* Estilo caja SPOILER cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label + .spoiler{
    height: auto;
    opacity: 1;
    }
    
    .mac{
        width: 200px;
        border-radius: 20px;
    }
    
    }
    
    
    @media screen and (max-width: 320px){
    .logo{
        width: 100%;
        height: 200px;
        border-radius: 20px;
    
    }
    
    .menu{
        background: lightyellow;
        *padding-bottom: 20px;
        border-radius: 40px;
    
    }
    
    .menu__container{
    
    }
    
    .menu__links{
        font-family: 20px;
    
    }
    .menu__item{
        list-style: none;
    
    
    }
    
    .menu__item > a{
        text-decoration: none;
        font-size: 40px;
        padding-top: 10px;
    
    
    }
    
    .cuerpo{
        background: rgb(14, 56, 90);
        padding-top: 20px;
        border-radius: 40px;
    
    }
    
    .tipo{
    
    }
    
    .texto0{
        background: white;
        margin: 0px 100px 0px 100px;
        border-radius: 5px;
    
    
    }
    
    .color{
        background: white;
        margin: 0px 50px 0px 50px;
        border-radius: 10px;
    
    }
    
    .texto1{
        text-transform: uppercase;
    
    }
    
    
    /*cuadro*/
    
    /* Ocultar botón radio */
    input[id^="spoiler"]{
    display: none;
    }
    /* Estilo botón clicable */
    input[id^="spoiler"] + label {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 5px 20px;
    background: ivory;
    cursor: pointer;
    border-radius: 20px;
    }
    /* Estilo botón cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label {
    color: #333;
    background: #ccc;
    }
    /* Estilo caja SPOILER (inicialmente oculto) */
    input[id^="spoiler"] ~ .spoiler {
    width: 90%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 10px auto 0;
    }
    /* Estilo caja SPOILER cuando su INPUT está seleccionado */
    input[id^="spoiler"]:checked + label + .spoiler{
    height: auto;
    opacity: 1;
    }
    
    a{
        
        text-decoration-line: none;
    }
    
    
    
    
    .mac{
        width: 200px;
        border-radius: 20px;
        *margin-bottom: 15px;
    }
    
    }