@import "v5_variables.css";

*{
	margin:0px;
	padding:0px;
	/*text-align:center;*/
	box-sizing:border-box;
	font-family: 'Montserrat', 'Arial', sans-serif;
}


img{
	width: 100%;
	max-width: 100%;
	border-radius: 8px;
}
section {
	width: 100%;
	display: flex;
	justify-content: center;
}

.cuerpo-tarjeta{
	color: var(--black);
	font-size: 18px;
	width: 650px;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: gray;
	display: flex;
	flex-direction: column;
	margin: 8px;
	align-content: center;
	align-items: center;
}

.descripcion{
	padding: 12px;
	margin-bottom: 10px;

}
.efecto-img{
	width: 100%;
	height:99%;
	background: rgba(193,1,255, 5);
	background: -moz-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: -webkit-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c101ff",endColorstr="#13043c",GradientType=1);
	position: relative;
	top: -410px;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	transition: all 0.8s ease-out;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}
.cuerpo-tarjeta figure:hover a > .efecto-img{
	opacity: 2;
	visibility: visible;
	box-shadow: 0px 0px 15px #2B5F99;
}

}
@media only screen and (max-width: 414px) and (min-width: 320px){
   
   .imagen img{
	width: 100%;
	border-radius: 6px;
}
section {
	width: 100%;
	display: block;
	justify-content: center;
}

.cuerpo-tarjeta{
	color: var(--black);
	font-size: 16px;
	width: auto;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: gray;
	margin: 10px 6px 0 6px;
	align-content: center;
	align-items: center;
}

.descripcion p{
	padding: 12px;
}
.efecto-img{
	width: 100%;
	height:99%;
	background: rgba(193,1,255, 5);
	background: -moz-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: -webkit-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c101ff",endColorstr="#13043c",GradientType=1);
	position: relative;
	top: -410px;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	transition: all 0.8s ease-out;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}
.cuerpo-tarjeta figure:hover a > .efecto-img{
	opacity: 2;
	visibility: visible;
	box-shadow: 0px 0px 15px #2B5F99;
	cursor: pointer;
}
 
}

@media only screen and (max-width: 767px) and (min-width: 540px){
	.imagen img{
	width: 100%;
	border-radius: 6px;
}
section {
	width: 100%;
	display: block;
	justify-content: center;
}

.cuerpo-tarjeta{
	color: var(--black);
	font-size: 16px;
	width: auto;
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: gray;
	margin: 10px 6px 0 6px;
	align-content: center;
	align-items: center;
}

.descripcion p{
	padding: 12px;
}
.efecto-img{
	width: 100%;
	height:99%;
	background: rgba(193,1,255, 5);
	background: -moz-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: -webkit-linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	background: linear-gradient(180deg, rgba(193,1,255,0.9556197478991597) 0%, rgba(36,4,80,0.9332107843137255) 51%, rgba(19,4,60,0.9668242296918768) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c101ff",endColorstr="#13043c",GradientType=1);
	position: relative;
	top: -410px;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	transition: all 0.8s ease-out;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}
.cuerpo-tarjeta figure:hover a > .efecto-img{
	opacity: 2;
	visibility: visible;
	box-shadow: 0px 0px 15px #2B5F99;
	cursor: pointer;
}
}

@media only screen and (max-width: 1024px) and (min-width: 768px){

}

@media only screen and (max-width: 1920px) and (min-width: 1025px) {

}