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


/* ******************
    TARJETA CERRADA
********************* */
.tarjeta {
    margin: 10px auto;
    width: 330px;
    background-color: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    transition: height ease-in-out 500ms;
    cursor: pointer;	
	position:relative
}
.paquetes-disponibles .modulo-para-tarjeta {
	margin: 0 20px;
	position:relative;
	width: 100%;
}

.cerrada:hover{
	transform: scale(1.035);
	transition: all ease-in-out 200ms;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
}
.cerrada{
	transition: all ease-in-out 250ms;
	transform: scale(1);
}
.cerrada:hover .header-h3{
	background-color: linear-gradient( 0deg, rgba(21, 101, 142, 0.8) 0%, rgba(21, 101, 142, 0.7) 50%, rgba(21, 101, 142, 0) 99% ) !important;
}
.tarjeta .foto {
	height: 150px;
	background: linear-gradient(to top,rgba(0, 26, 39, 1) 10%,rgba(22, 42, 53, 0.5) 50%,rgba(22, 42, 53, 0) 70% );
}
.tarjeta.abierta .foto {
	background: linear-gradient(0deg,rgba(0, 26, 39, 1) 10%,rgba(22, 42, 53, 0.5) 50%, rgba(22, 42, 53, 0.1) 80% )
}

.cerrada .tarjeta-header {
	position: relative;
	background-size: cover;
    background-position-y: bottom;
	transition: all ease 750ms;
}
.flecha {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 0;
	border-radius: 100%;
	background-color: var(--colorPrimario);
	align-self: flex-end;
	margin: 0.5em;
	transition: all ease 750ms;
	z-index: 999;
}
.arrow-css {
	display: inline-block;
	width: 40%;
	margin: 25%;
	height: 40%;
	border-radius: 2px;
	transform: rotate(45deg);
	border: 3px solid white;
	border-left: none;
	border-top: none;
}
.header-h6 {
	font-size: 15px;
	text-transform: uppercase;
	margin: 0;
}

.headers {
	position:absolute;
	bottom:0;
	padding:0 0 1em;
}
.header-h6,
.header-h3 {
	animation: fadeIn 750ms ease-in-out alternate;
	color: white;
	transition: display ease 1000ms;
	padding: 5px 0 0 16px;
}
.header-h3 {
	width: 100%;
	text-align: left;
	margin: 0;
	font-size: 25px;
	transition: height ease 750ms;
}
.texto-promo{
	position: absolute;
	color: white;
    background-color: var(--colorSecundario);
    padding: 6px 20px;
    text-transform: uppercase;
    font-size: 15px;
	z-index: 3;
    margin:10px;
	-webkit-transition: all ease 500ms;
	-moz-transition: all ease 500ms;
	-ms-transition: all ease 500ms;
	-o-transition: all ease 500ms;
	transition: all ease 500ms;
}
.abierta .texto-promo{
	margin:0;
	bottom: -17px;
	right: -15px;
}
.abierta .texto-promo::before{
	content: ' ';
    position: absolute;
    right: 0;
    bottom: -14px;
    width: 0;
	border: 7px solid transparent;
	border-color: var(--colorSecundarioOscuro);
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-transition: right ease 500ms;
    -moz-transition: right ease 500ms;
    -ms-transition: right ease 500ms;
    -o-transition: right ease 500ms;
    transition: right ease 500ms;
}
.abierta:hover .texto-promo {
	right: 0;
}
.abierta .texto-promo::before{
	-webkit-transition: all 500ms ease 150ms;
	-moz-transition: all 500ms ease 150ms;
	-ms-transition: all 500ms ease 150ms;
	-o-transition: all 500ms ease 150ms;
	transition: all 500ms ease 150ms;
}
.abierta:hover .texto-promo::before {
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transition: border ease 150ms;
	-moz-transition: border ease 150ms;
	-ms-transition: border ease 150ms;
	-o-transition: border ease 150ms;
	transition: border ease 150ms;
}
.cerrada .texto-promo{
	
	transition: all ease 500ms;
}
.cerrada .tarjeta-header .header-h3,
.cerrada .tarjeta-header .header-h6 {
	transition: height ease-out 200ms;
}
.cerrada .tarjeta-header .header-h3 {
	padding-top: 45px;
}
.cerrada .foto-filtro {
	height: 150px;
}

/* ******************
    TARJETA ABIERTA
********************* */
.tarjeta.abierta {
	width: 330px;
	position:relative;
}
.abierta:hover{
	transition: box-shadow ease-in-out 200ms;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
	
}
.abierta:hover .tarjeta-header{
	background-position-y: bottom;
	transition: background-position-y ease-in-out 400ms;
}
.abierta .tarjeta-header {
	display: flex;
	flex-direction: column-reverse;
	position: relative;
	transition: all ease 750ms;
	background-position-y: center;
	background-size: cover;
    transition: background-position-y ease-in-out 400ms;
}
.abierta .header-h3 {
	padding: 0.5em;
	z-index: 2;
}
.abierta .header-h6 {
	display: none;
}
.abierta .flecha {
	top: 0px;
	transform: rotate(540deg);
	transition: all ease 1000ms;
}
.tarjeta-contenido > ul {
	margin: 24px 16px;
	text-align: left;
	font-size: 16px;
}
.tarjeta.cerrada > .tarjeta-contenido {
	display: none;
}
.tarjeta.abierta > .tarjeta-contenido {
	display: inline-block;
	transition: all ease 500ms;
	-moz-transition: all ease 500ms;
	-ms-transition: all ease 500ms;
	-o-transition: all ease 500ms;
	-webkit-transition: all ease 500ms;
}

.item {
	list-style: none;
	margin: 12px 0;
	color: #454545;
}

.item-icon::before {
	content: "";
	width: 25px;
	height: 25px;
	background-size: 100%;
	float: left;
	margin-right: 16px;
}
.item-icon.item-avion::before {
	background-image: url(/img/card/plane.svg);   
	background-size: 111%;
    background-position: -1px -1px;
}
.item-icon.item-otro::before {
	background-image: url(/img/card/other.png);
}
.item-icon.item-bus::before {
	background-image: url(/img/card/01.png);
}
.item-icon.item-duracion::before {
	background-image: url(/img/card/calendar.svg);
    background-size: 184%;
    background-position: -11px -10px;
}
.item-icon.item-comidas::before {
	background-image: url(/img/card/03.png);
}
.item-icon.item-coordinador::before{
	background-image: url(/img/card/coordinador.svg);
    background-position: 0px -5px;
    background-size: 98%;
}
.item-icon.item-cobertura::before{
	background-image: url(/img/card/cobertura.svg);
}
.item-icon.item-regalo::before{
	background-image: url(/img/card/gift.svg);
}
.item-icon.item-transfer::before{
	background-image: url(/img/card/transfer.svg);
}
.item-icon.item-catering::before{    
	background-image: url(/img/card/catering-2.svg);
    background-size: 115%;
    background-position: -2px -2px;
}
.bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 330px;
}
.linea-decorativa {
	border-bottom: 1px solid rgba(88, 88, 88, 0.35);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	width: 50%;
}
.redes-y-precio {
	padding: 24px 0 16px 0;
	display: flex;
	flex-direction: row;
	width: 330px;
	align-items: center;
	justify-content: space-around;
	z-index: 99999;
}
.redes-y-precio > ul {
	display: flex;
	justify-content: space-around;
}
.copy-link span{
	font-size: 14px;
	    border: 2px solid black;
	    padding: 4px;
	    border-radius: 100%;
	    position: relative;
	    width: 25px !important;
	    height: 25px;
	    margin:0;
}

.copy-link .glyphicon-link:before {
	left: 4px;
	position: absolute;	
}

body.pagina_paquete .copy-link .glyphicon-link:before  {
	left: -6px;
}

.item span,
.item img{
	
	transition: all ease 300ms;
}
.item:hover span,
.item:hover img{
	transform: scale(1.25);
	transition: all ease 300ms;
}
.redes-y-precio .item {
	margin: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom img {
	width: 25px;
}
.item-share {
	border: none !important;
	background: none;
}
.precio {
	text-align: right;
	line-height: 16px;
	font-size: 20px;
}
.precio > p:first-child {
	color: #868686;
}
.precio > p:last-child {
	color: var(--colorSecundario);
	font-weight: bold;
}
.cta {
	font-size: 18px;
	color: white;
	padding: 5px 16px;
	border-radius: 4px;
	border: 1px solid transparent;
	background: var(--colorPrimario);
    border-color: var(--colorPrimario);
	transition: background-color ease 300ms;
}
.tarjeta .cta::after{
	content: " ";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.cta:hover {
    color: white !important;
	text-decoration: none;
	background-color: var(--colorPrimarioHover);
	border: 1px solid transparent;
	border-color: var(--colorPrimario);
	transition: background-color ease 300ms;
}

.carousel .draggable>.slick-track{
	height: 465px;
}

/* ******************
    KEYFRAMES
********************* */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}