/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */


.panel {
	margin: 0 auto;
	/*height: 300px; */
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	max-width:550px;	
	height: 277px;
	margin-bottom: 33px;
}

.panel .front,
.panel .back {
	text-align: center;
	width:100%;
	max-width:550px;
}
	
.panel .front {
	display: table;
	width:100%;
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.panel .back {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
	display: table;

}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
	/*background-color: #000!important;*/
	cursor:pointer;
	display: table-cell;
  vertical-align: middle;
	background-color: rgba(0,0,0,0.1);
	width: 100%;
	max-width:550px;
	/*height: 300px;*/
	height: 277px;
	margin: 0 auto;
	padding: 0px;
	background-position-x: 50% !important;
	-ms-background-size: cover !important;
	-o-background-size: cover !important;
	-moz-background-size: cover !important;
	-webkit-background-size: cover !important;
	background-size: cover !important;
	border: 0.02em solid rgba(0, 0, 0, 0.1);
}

.box1 h2{
	background:rgba(0,0,0,0.6);
	color: #fff;
  padding: 30px 10px;
}
.box2{
	display: table-cell;
  vertical-align: middle;
	background-color: rgba(0,0,0,0.85);
	width: 100%;
	max-width:550px;
	height: 277px;
	margin: 0 auto;
	padding: 10px;
	color:#ffffff !important;
/*	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;*/
	font-size:17px;

}
.box2 p{
	color:rgba(255,255,255,.7);
	text-indent: 0;
	margin-top:10px;
	text-indent:0 !important;
	line-height:17px;
}
.box2 a{
	color: #ffffff;
}

.box2 a:hover, .box2 a:active, .box2 a:visited{
	color: rgba(255,255,255,.7);
}

@media (max-width: 991px) {
	.panel{
		margin-bottom:20px;
	}
}

@media (max-width: 767px) {
	.box2 p,
	.box2 .direccion,
	.box2 span{
		font-size: 14px!important;
		line-height:14px!important;
	}
	
	.panel,
	.panel .front,
	.panel .back,
	.box1, 
	.box2{
		max-width:100%;
	}
	.panel, .box1, .box2 {
		height: calc(100vw/1.5);
	}
	
	/*.box1{
		padding:20% 5%;
	}*/
	.box2{
	/*	font-size:18px;*/
	}
	.box2 ul{
		padding:5px;
	}
	/*.panel .front,
	.panel .back {
		width:300px;
	}*/
}