*,
html,
body {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
}

div#custom_design {
	display: block;
	position: relative !important;
	margin: 0 auto;
	max-width: 1280px;
}

.titulo {
	position: absolute;
	left: 10%;
	top: 28.5%;
	font-size: 2.1rem;
	color: #632637;
}

.proyecto {
	position: absolute;
	left: 55%;
	top: 28%;
	font-size: 1.5em;
	color: #fff;
	font-weight: 500;
	line-height: 1em;
}

.torre {
	position: absolute;
	left: 55%;
	top: 32%;
	font-size: 1rem;
	color: #fff;
	font-weight: 400;
	line-height: 1em;
}



.vendido {
	position: absolute;
	top: 27.5%;
	right: 14.5%;
	font-size: 1.2em;
	color: #000;
	font-weight: bolder;
}

.reservado {
	position: absolute;
	top: 31.4%;
	right: 12.5%;
	font-size: 1.2em;
	color: #000;
	font-weight: bolder;
}

.puntos {
	position: absolute;
	background: #ffffff80;
	width: 440px;
	height: 340px;
	top: 39%;
	left: 9.5%;
}

.apartamentos {
	position: absolute;
	background: #cccccc80;
	width: 490px;
	height: 340px;
	top: 39%;
	right: 10.5%;
	overflow-y: scroll;
	max-height: 340px;
}

.thc-hotspot {
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
}

/*
clarito #E6CC9D
oscurito #BC9222
grids #BCBCBC
*/

span.cual {
	font-weight: bold;
}

/*
table#reserva thead th {
	position: sticky;
	top: 0;
}
*/

.has-background-reservado {
	background-color: #E6CC9D !important;
}

.has-background-vendido {
	background-color: #737F30 !important;
}

.has-background-normal {
	background-color: #f5f5f5 !important;
}

.mobile-hs {
	display: none;
	overflow: hidden;
}


@media only screen and (min-width: 280px) {
	div#custom_design {
		background: transparent url(../img/640.png) no-repeat top center;
		background-size: contain;
		width: 300px !important;
		height: 684px !important;
	}

	.titulo {
		position: absolute;
    left: 16%;
    top: 14%;
    font-size: 98%;
    color: #632637;
	}

	.proyecto {
		position: absolute;
		left: 23%;
		top: 48.1%;
		font-size: 0.6rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.torre {
		position: absolute;
		left: 23%;
    	top: 49.1%;

		color: #fff;
		font-weight: 400;
		line-height: .9em;
	}

	.vendido {
		position: absolute;
		top: 47.8%;
		right: 22.5%;
		font-size: .5rem;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 49.75%;
		right: 18.5%;
		font-size: .4rem;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 69%;
		height: 23%;
		top: 24%;
		left: 15%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 69%;
		height: 254px;
		top: 54%;
		right: 15%;
		overflow-y: scroll;
		max-height: 254px;
	}



	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 8px;
		line-height: 12px !important;
	}

	.blackpoint {
		font-size: 6px;
	}



}

@media only screen and (min-width: 480px) {
	div#custom_design {
		background: transparent url(../img/640.png) no-repeat top center;
		background-size: contain;
		width: 500px !important;
		height: 1141px !important;
	}

	.titulo {
		position: absolute;
		left: 15%;
		top: 14%;
		font-size: 163%;
		color: #632637;
	}

	.proyecto {
		position: absolute;
		left: 24%;
		top: 48%;
		font-size: 1.1rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.torre {
		    position: absolute;
    left: 24%;
    top: 49.8%;
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    line-height: 1em;
	}

	.vendido {
		position: absolute;
		top: 47.8%;
		right: 22.6%;
		font-size: .9em;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 49.8%;
		right: 18.6%;
		font-size: .9em;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 352px;
		height: 270px;
		top: 19.5%;
		left: 14.5%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 348px;
		height: 425px;
		top: 53.5%;
		right: 15.5%;
		overflow-y: scroll;
		max-height: 425px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 11px;
		line-height: 17px !important;
	}

	.blackpoint {
		font-size: 11px;
	}

}

@media only screen and (min-width: 600px) {
	div#custom_design {
		background: transparent url(../img/1280.png) no-repeat top center;
		background-size: contain;
		width: 640px !important;
		height: 1463px !important;
	}

	.titulo {
		position: absolute;
		left: 20%;
		top: 8.5%;
		font-size: 188%;
		color: #632637;
	}

	.proyecto {
		position: absolute;
		left: 26%;
		top: 37%;
		font-size: 1.2rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.torre {
		position: absolute;
		left: 26%;
		top: 38.6%;
		font-size: 1rem;
		color: #fff;
		font-weight: 400;
		line-height: 1em;
	}

	.vendido {
		position: absolute;
		top: 36.8%;
		right: 23.5%;
		font-size: 1.1em;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 38.5%;
		right: 19.8%;
		font-size: 1.1em;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 397px;
		height: 305px;
		top: 13%;
		left: 19%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 397px;
		height: 337px;
		top: 41.5%;
		right: 18.5%;
		overflow-y: scroll;
		max-height: 337px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 11px;
		line-height: 17px !important;
	}

	.blackpoint {
		font-size: 13px;
	}
}

@media only screen and (min-width: 800px) {
	div#custom_design {
		background: transparent url(../img/1280.png) no-repeat top center;
		background-size: contain;
		width: 720px !important;
		height: 1645px !important;
	}

	.titulo {
		position: absolute;
		left: 20%;
		top: 8.5%;
		font-size: 2.1rem;
		color: #632637;
	}

	.proyecto {
		position: absolute;
		left: 26%;
		top: 37%;
		font-size: 1.4rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.torre {
		position: absolute;
		left: 26%;
		top: 38.8%;
		font-size: 1rem;
		color: #fff;
		font-weight: 400;
		line-height: 1em;
	}

	.vendido {
		position: absolute;
		top: 36.8%;
		right: 24.5%;
		font-size: 1.2em;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 38.5%;
		right: 20.5%;
		font-size: 1.2em;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 445px;
		height: 342px;
		top: 13%;
		left: 19.5%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 449px;
		height: 375px;
		top: 41.5%;
		right: 18.5%;
		overflow-y: scroll;
		max-height: 375px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 11px;
		line-height: 17px !important;
	}

	.blackpoint {
		font-size: 13px;
	}

}

@media only screen and (min-width: 1000px) {
	div#custom_design {
		background: transparent url(../img/1600.png) no-repeat top center;
		background-size: contain;
		width: 960px !important;
		height: 600px !important;
	}

	.proyecto {
		position: absolute;
		left: 17%;
		top: 25.5%;
		font-size: 1rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.titulo {
		position: absolute;
		left: 15%;
		top: 18%;
		font-size: 1.4rem;
		color: #632637;
	}

	.torre {
		position: absolute;
		left: 17%;
		top: 29.3%;
		font-size: 2px;
		color: #fff;
		font-weight: 400;
		line-height: 1em;
	}

	.vendido {
		position: absolute;
		top: 25.2%;
		right: 58%;
		font-size: .9rem;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 28%;
		right: 56%;
		font-size: .9rem;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 301px;
		height: 231px;
		top: 34%;
		left: 14.3%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 335px;
		height: 481px;
		top: 6%;
		right: 11.5%;
		overflow-y: scroll;
		max-height: 543px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 9px;
		line-height: 12px !important;
	}

	.blackpoint {
		font-size: 10px;
	}

}

@media only screen and (min-width: 1200px) {
	div#custom_design {
		background: transparent url(../img/2048.png) no-repeat top center;
		background-size: contain;
		width: 1080px !important;
		height: 675px !important;
	}


	.proyecto {
		position: absolute;
		left: 18%;
		top: 25.5%;
		font-size: 1rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.titulo {
		position: absolute;
		left: 15%;
		top: 18%;
		font-size: 1.55rem;
		color: #632637;
	}

	.vendido {
		position: absolute;
		top: 25.2%;
		right: 58%;
		font-size: 1em;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 28%;
		right: 56%;
		font-size: 1em;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 339px;
		height: 260px;
		top: 34%;
		left: 14.3%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 377px;
		height: 543px;
		top: 6%;
		right: 11.5%;
		overflow-y: scroll;
		max-height: 543px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 9px;
		line-height: 12px !important;
	}

	.blackpoint {
		font-size: 10px;
	}


}

@media only screen and (min-width: 1400px) {
	div#custom_design {
		background: transparent url(../img/2048.png) no-repeat top center;
		background-size: contain;
		width: 1280px !important;
		height: 800px !important;
	}

	.proyecto {
		position: absolute;
		left: 18%;
		top: 25.5%;
		font-size: 1.2rem;
		color: #fff;
		font-weight: 500;
		line-height: 1em;
	}

	.titulo {
		position: absolute;
		left: 15%;
		top: 18%;
		font-size: 1.85rem;
		color: #632637;
	}

	.vendido {
		position: absolute;
		top: 25.2%;
		right: 58.5%;
		font-size: 1em;
		color: #000;
		font-weight: bolder;
	}

	.reservado {
		position: absolute;
		top: 28%;
		right: 56.6%;
		font-size: 1em;
		color: #000;
		font-weight: bolder;
	}

	.puntos {
		position: absolute;
		background: #ffffff80;
		width: 398px;
		height: 306px;
		top: 34.2%;
		left: 14.5%;
	}

	.apartamentos {
		position: absolute;
		background: #cccccc80;
		width: 444px;
		height: 640px;
		top: 6%;
		right: 11.5%;
		overflow-y: scroll;
		max-height: 640px;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 10px;
		line-height: 15px !important;
	}

	.blackpoint {
		font-size: 12px;
	}

}

@media only screen and (max-width: 479px) {

	.desktop-hs {
		display: none;
		overflow: hidden;
	}

	.mobile-hs {
		display: inline-block;

	}


	.floatThead-container {
		width: 198px !important
	}

	table#reserva {
		width: 100% !important;
		max-width: 198px !important
	}

	.tdw {
		padding: 1% !important;
		height: 20px;
	}

	.tdw .button {
		background-color: #fff;
		border-color: #dbdbdb;
		border-width: 0;
		color: #363636;
		cursor: pointer;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
		width: 100%;
		padding: .5rem;
		height: 20px;
	}

	table#reserva * {
		font-size: 12px;
		line-height: 20px;
	}

	.fixthead * {
		font-size: 12px;
		line-height: 20px;
	}


	.swal2-html-container .table td,
	.swal2-html-container .table th {
		border: 1px solid #dbdbdb;
		border-width: 0 0 1px;
		padding: .5em .75em;
		vertical-align: top;
		display: inline-block;
		width: 49%;
		font-size: 12px !important;
	}

	.is-size-6 {
		font-size: 12px !important;
	}

	.swal2-html-container .table td *,
	.swal2-html-container .table th * {
		font-size: 12px;
	}

	.swal2-container {}

	.swal2-popup {
		padding: 1% !important;
		width: 78% !important;
	}

	.swal2-content {
		z-index: 1;
		justify-content: center;
		margin: 0;
		padding: 0 .6em !important;
		color: #545454;
		font-size: 1.125em;
		font-weight: 400;
		line-height: normal;
		text-align: center;
		word-wrap: break-word;
	}

	.thc-hotspot {
		font-family: 'Roboto', sans-serif;
		font-size: 9px;
		line-height: 19px !important;
		font-weight: bolder;
		color: #fff;
	}

	.torre span {
		font-size: 0.6rem;
	}

}