/*
Sitio web soluciona
desattollado por : Fernando
url: http://emposicionamientodigital.com
*/



	
@media screen {
	
	/**************************************** animacion ***********************************/
	
	#animacion .slider1 .fondo{
		background-image: url(../images/haluro64_fondo_fotos.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		width:100%;
		height: 40vh;
		background-size: cover;
	}
	#formatos .opformato figure{
		justify-self: center;
		height: 169px;
		display: flex;
    	flex-flow: column;
	}
	#planideal .plan .info .expandir{
		font-size: 22px;
		text-align: center;
		width: 100%;
		display: block;
		margin-top: 15px;
		cursor: pointer;
	}
	#planideal .plan .info .expandir::before{
		content:"- Ver Detalles -";
	}
	#planideal .plan .info .expandir.visible::before{
		content:"- Ocultar Detalles -";
	}
	#planideal .plan:nth-child(1) .detalle.visible{
		height: 1177px;
		transition: height 1s;
	}
	#planideal .plan:nth-child(2) .detalle.visible{
		height: 1530px;
		transition: height 1s;
	}
	#planideal .plan:nth-child(3) .detalle.visible{
		height: 1560px;
		transition: height 1s;
	}
	#planideal .plan .detalle .infotxt{
		border:4px solid #ffbe00;
		background-color:#f5ffff;
		color:#556060;
		padding: 0px 15px;
		margin-bottom: 16px;
	}
	#planideal .plan .detalle h4{
		font-size: 22px;
		font-weight: 600;
		text-align: center;
		margin:37px 0px;
	}
	#planideal .plan .detalle p{
		font-size: 22px;
		text-align: center;
		margin-bottom: 26px;
	}
	#planideal .plan .detalle a{
		width: 305px;
		height: auto;
		border-radius: 21px;
		background-color: #ba4eba;
		display: block;
		text-align: center;
		padding: 11px 0px;
		margin: auto;
	}
}
@media screen and (max-width: 1024px) {
	#formatos figure {
		width: 121px;
		justify-self: center;
	}
}

@media screen and (max-width: 820px) {
	#formatos figure {
		width: 193px;
		margin-bottom: 40px;
	}
	#planideal .plan:nth-child(1) .detalle.visible {
		height: 1245px;
	}
	#planideal .plan:nth-child(2) .detalle.visible {
		height: 1651px;
	}
	#planideal .plan:nth-child(3) .detalle.visible {
		height: 1742px;
	}
}

@media screen and (max-width: 570px) {
	#animacion .slider1 .fondo{
		background-size: 240%;
	}
	#formatos .opformato{
		justify-content: space-around;
	}
	#formatos figure {
		width: 160px;
		margin-bottom: 40px;
		justify-content: space-around;
	}
	#planideal .plan:nth-child(1) .detalle.visible {
		height: 1170px;
	}
	#planideal .plan:nth-child(2) .detalle.visible {
		height: 1520px;
	}
	#planideal .plan:nth-child(3) .detalle.visible {
		height: 1620px;
	}
}
@media screen and (max-width: 360px) {
	#animacion .slider1 .fondo{
		background-size: 240%;
	}
}