.sala1{
	display: table;
	clear: both;
	width: 100%;
	max-width: 350px;
	position: relative;
	margin: 30px auto 60px;
	min-height: 300px;
	position: relative;
}
.sala1 .be{
	display: table;
    clear: both;
    width: 100%;
    max-width: 400px;
    position: relative;
    margin: 0 auto;
    min-height: 400px;
}
.sala1 .cy{
	position: absolute;
	border: 1px solid #3d3d3d;
	color: #3b3b3a;
	border-radius: 12px;
	width: 36px;
	height: 55px;
	text-align: center;
	cursor: pointer;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala1 .cy:hover{
	background: #ffb718;
	border: 1px solid #ffb718;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala1 .cy.active{
	background: #ffb718;
	border: 1px solid #ffb718;
}
.sala1 .cy.reservada{
	background: #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
}
.sala1 .cy.bloqueada{
	background: url(../img/bloqueo.png) center center no-repeat #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
	background-size: 20px;
}

.sala1 .cy1{ top: 0; right: 18%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy2{ top: 12%; right: 18%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy3{ top: 24%; right: 18%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy4{ top: 0; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy5{ top: 12%; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy6{ top: 24%; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala1 .cy7{ top: 0%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala1 .cy8{ top: 12%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala1 .cy9{ top: 24%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }

.sala1 .cy10{ bottom: 40%; right: 1%; }
.sala1 .cy11{ bottom: 40%; right: 14%; }
.sala1 .cy12{ bottom: 40%; right: 27%; }
.sala1 .cy13{ bottom: 40%; right: 40%; }
.sala1 .cy14{ bottom: 40%; right: 53%; }
.sala1 .cy15{ bottom: 40%; right: 66%; }
.sala1 .cy16{ bottom: 40%; right: 79%; }

.sala1 .cy17{ bottom: 20%; right: 1%; }
.sala1 .cy18{ bottom: 20%; right: 14%; }
.sala1 .cy19{ bottom: 20%; right: 27%; }
.sala1 .cy20{ bottom: 20%; right: 40%; }
.sala1 .cy21{ bottom: 20%; right: 53%; }
.sala1 .cy22{ bottom: 20%; right: 66%; }
.sala1 .cy23{ bottom: 20%; right: 79%; }

.sala1 .cy24{ bottom: 0%; right: 1%; }
.sala1 .cy25{ bottom: 0%; right: 14%; }
.sala1 .cy26{ bottom: 0%; right: 27%; }
.sala1 .cy27{ bottom: 0%; right: 40%; }
.sala1 .cy28{ bottom: 0%; right: 53%; }
.sala1 .cy29{ bottom: 0%; right: 66%; }
.sala1 .cy30{ bottom: 0%; right: 79%; }

.sala1 .spin{
	position: absolute;
	width: 22px;
	height: 21px;
	background: url('../img/spin.png') center center no-repeat;
}
.sala1 .s1{ top: 2%; left: -8%; }
.sala1 .s2{ top: 70%; left: -8%; }
.sala1 .s3{ bottom: -10%; left: 25%; }
.sala1 .s4{ bottom: -10%; right: 25%; }
.sala1 .s5{ top: 2%; right: -8%; }
.sala1 .s6{ top: 70%; right: -8%; }


@media only screen and ( min-width:320px ) and (max-width:719px){

	.sala1 .be{
		width: 85%;
	}
	.sala1 .cy{ width: 30px; height: 45px; }
	.sala1 .cy1{ width: 45px; height: 30px; }
	.sala1 .cy2{ width: 45px; height: 30px; }
	.sala1 .cy3{ width: 45px; height: 30px; }
	.sala1 .cy4{ width: 45px; height: 30px; }
	.sala1 .cy5{ width: 45px; height: 30px; }
	.sala1 .cy6{ width: 45px; height: 30px; }
	.sala1 .cy7{ width: 45px; height: 30px; }
	.sala1 .cy8{ width: 45px; height: 30px; }
	.sala1 .cy9{ width: 45px; height: 30px; }

	.sala1 .be{
		min-height: 275px;
	}

	.sala1 .s1{ top: 2%; left: 0; }
	.sala1 .s2{ top: 70%; left: 0; }
	.sala1 .s3{ bottom: 0%; left: 25%; }
	.sala1 .s4{ bottom: 0%; right: 25%; }
	.sala1 .s5{ top: 2%; right: 0; }
	.sala1 .s6{ top: 70%; right: 0; }
}

.clase-estudio .instructor.i2{
	width: 100px;
	height: 100px;
	top: 0px;
    left: calc(50% - 80px);
}

.sala2{
	display: table;
	clear: both;
	width: 100%;
	max-width: 600px;
	position: relative;
	margin: 30px auto 60px;
	min-height: 300px;
	position: relative;
}
.sala2 .be{
	display: table;
    clear: both;
    width: 100%;
/*    max-width: 400px;*/
    position: relative;
    margin: 0 auto;
    min-height: 400px;
}
.sala2 .cy{
	position: absolute;
	border: 1px solid #3d3d3d;
	color: #3b3b3a;
	border-radius: 12px;
	width: 36px;
	height: 55px;
	text-align: center;
	cursor: pointer;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala2 .cy:hover{
	background: #ffb718;
	border: 1px solid #ffb718;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala2 .cy.active{
	background: #ffb718;
	border: 1px solid #ffb718;
}
.sala2 .cy.reservada{
	background: #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
}
.sala2 .cy.bloqueada{
	background: url(../img/bloqueo.png) center center no-repeat #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
	background-size: 20px;
}

.sala2 .cy1{ top: 23%; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy2{ top: 12%; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy3{ top: 0%; right: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy4{ top: 18%; right: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy5{ top: 6%; right: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy6{ top: 23%; right: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy7{ top: 12%; right: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy8{ top: 0%; right: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy9{ top: 23%; right: 33%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy10{ top: 12%; right: 33%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy11{ top: 0%; right: 33%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy12{ top: 36%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy13{ top: 23%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy14{ top: 12%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy15{ top: 0%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy16{ top: 36%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy17{ top: 23%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy18{ top: 12%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy19{ top: 0%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala2 .cy20{ top: 36%; left: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy21{ top: 23%; left: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy22{ top: 12%; left: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala2 .cy23{ top: 0%; left: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }


.sala2 .cy24{ bottom: 36%; right: 5%; }
.sala2 .cy25{ bottom: 36%; right: 12%; }
.sala2 .cy26{ bottom: 36%; right: 19%; }
.sala2 .cy27{ bottom: 36%; right: 26%; }
.sala2 .cy28{ bottom: 36%; right: 33%; }
.sala2 .cy29{ bottom: 36%; right: 40%; }
.sala2 .cy30{ bottom: 36%; right: 47%; }
.sala2 .cy31{ bottom: 36%; right: 54%; }

.sala2 .cy32{ bottom: 20%; right: 5%; }
.sala2 .cy33{ bottom: 20%; right: 12%; }
.sala2 .cy34{ bottom: 20%; right: 19%; }
.sala2 .cy35{ bottom: 20%; right: 26%; }
.sala2 .cy36{ bottom: 20%; right: 33%; }
.sala2 .cy37{ bottom: 20%; right: 40%; }
.sala2 .cy38{ bottom: 20%; right: 47%; }
.sala2 .cy39{ bottom: 20%; right: 54%; }


.sala2 .cy40{ bottom: 32%; left: 28%; }
.sala2 .cy41{ bottom: 32%; left: 21%; }
.sala2 .cy42{ bottom: 32%; left: 14%; }
.sala2 .cy43{ bottom: 32%; left: 7%;  }
.sala2 .cy44{ bottom: 32%; left: 0%;  }

.sala2 .cy45{ bottom: 16%; left: 28%; }
.sala2 .cy46{ bottom: 16%; left: 21%; }
.sala2 .cy47{ bottom: 16%; left: 14%; }
.sala2 .cy48{ bottom: 16%; left: 7%;  }
.sala2 .cy49{ bottom: 16%; left: 0%;  }

.sala2 .cy50{ bottom: 0%; left: 28%; }
.sala2 .cy51{ bottom: 0%; left: 21%; }
.sala2 .cy52{ bottom: 0%; left: 14%; }
.sala2 .cy53{ bottom: 0%; left: 7%; }
.sala2 .cy54{ bottom: 0%; left: 0%; }

.sala2 .spin{
	position: absolute;
	width: 22px;
	height: 21px;
	background: url('../img/spin.png') center center no-repeat;
	display: none;
}
.sala2 .s1{ top: 2%; left: -8%; }
.sala2 .s2{ top: 70%; left: -8%; }
.sala2 .s3{ bottom: -10%; left: 25%; }
.sala2 .s4{ bottom: -10%; right: 25%; }
.sala2 .s5{ top: 2%; right: -8%; }
.sala2 .s6{ top: 70%; right: -8%; }


@media only screen and ( min-width:320px ) and (max-width:719px){

	.sala2 .be{
		width: 85%;
	}

	.clase-estudio .instructor.i2{
		width: 80px;
		height: 80px;
		left: calc(50% - 55px);
	}

	.sala2 .cy{ 
		width: 25px;
		height: 20px;
		border-radius: 8px; 
	    font-size: 11px;
    	padding: 4px;
	}

	.sala2 .cy1{  }
	.sala2 .cy2{  }
	.sala2 .cy3{  }

	.sala2 .cy4{}
	.sala2 .cy5{}

	.sala2 .cy6{  }
	.sala2 .cy7{  }
	.sala2 .cy8{  }

	.sala2 .cy9{  }
	.sala2 .cy10{  }
	.sala2 .cy11{  }

	.sala2 .cy12{  }
	.sala2 .cy13{  }
	.sala2 .cy14{  }
	.sala2 .cy15{  }

	.sala2 .cy16{  }
	.sala2 .cy17{  }
	.sala2 .cy18{  }
	.sala2 .cy19{  }

	.sala2 .cy20{  }
	.sala2 .cy21{  }
	.sala2 .cy22{  }
	.sala2 .cy23{  }

	.sala2 .cy24{ right: 0; }
	.sala2 .cy25{ right: 8%;  }
	.sala2 .cy26{ right: 16%; }
	.sala2 .cy27{ right: 24%; }
	.sala2 .cy28{ right: 32%; }
	.sala2 .cy29{ right: 40%; }
	.sala2 .cy30{ right: 48%; }
	.sala2 .cy31{ right: 56%; }

	.sala2 .cy32{ right: 0; }
	.sala2 .cy33{ right: 8%; }
	.sala2 .cy34{ right: 16%; }
	.sala2 .cy35{ right: 24%; }
	.sala2 .cy36{ right: 32%; }
	.sala2 .cy37{ right: 40%; }
	.sala2 .cy38{ right: 48%; }
	.sala2 .cy39{ right: 56%; }

	.sala2 .cy40{  }
	.sala2 .cy41{  }
	.sala2 .cy42{  }
	.sala2 .cy43{  }
	.sala2 .cy44{  }

	.sala2 .cy45{  }
	.sala2 .cy46{  }
	.sala2 .cy47{  }
	.sala2 .cy48{  }
	.sala2 .cy49{  }

	.sala2 .cy50{  }
	.sala2 .cy51{  }
	.sala2 .cy52{  }
	.sala2 .cy53{  }
	.sala2 .cy54{  }

	.sala2 .be{
		min-height: 275px;
	}

	.sala2 .s1{ top: 2%; left: 0; }
	.sala2 .s2{ top: 70%; left: 0; }
	.sala2 .s3{ bottom: 0%; left: 25%; }
	.sala2 .s4{ bottom: 0%; right: 25%; }
	.sala2 .s5{ top: 2%; right: 0; }
	.sala2 .s6{ top: 70%; right: 0; }
}

.clase-estudio .instructor.i3{
	width: 100px;
	height: 100px;
	top: 0;
    right: 0;
    left: auto;
}

.sala3{
	display: table;
	clear: both;
	width: 100%;
	max-width: 500px;
	position: relative;
	margin: 30px auto 60px;
	min-height: 550px;
	position: relative;
}
.sala3 .be{
	display: table;
    clear: both;
    width: 100%;
/*    max-width: 400px;*/
    position: relative;
    margin: 0 auto;
    min-height: 500px;
}
.sala3 .cy{
	position: absolute;
	border: 1px solid #3d3d3d;
	color: #3b3b3a;
	border-radius: 12px;
	width: 36px;
	height: 55px;
	text-align: center;
	cursor: pointer;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala3 .cy:hover{
	background: #ffb718;
	border: 1px solid #ffb718;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala3 .cy.active{
	background: #ffb718;
	border: 1px solid #ffb718;
}
.sala3 .cy.reservada{
	background: #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
}
.sala3 .cy.bloqueada{
	background: url(../img/bloqueo.png) center center no-repeat #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
	background-size: 20px;
}

.sala3 .cy1{ left: 0%; top: 30%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy2{ left: 0%; top: 10%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy3{ left: 8%; top: 20%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy4{ left: 8%; top: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy5{ left: 16%; top: 30%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy6{ left: 16%; top: 10%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy7{ left: 24%; top: 20%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy8{ left: 24%; top: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy9{ left: 32%; top: 30%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy10{ left: 32%; top: 10%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy11{ left: 40%; top: 20%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy12{ left: 40%; top: 0%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy13{ left: 48%; top: 30%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala3 .cy14{ left: 48%; top: 10%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy15{ left: 54%; top: 20%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }

.sala3 .cy16{ right: 20%; bottom: 56%; }
.sala3 .cy17{ right: 10%; bottom: 56%; }
.sala3 .cy18{ right: 0%; bottom: 56%; }

.sala3 .cy19{ right: 25%; bottom: 42%; }
.sala3 .cy20{ right: 15%; bottom: 42%; }
.sala3 .cy21{ right: 5%; bottom: 42%; }

.sala3 .cy22{ right: 20%; bottom: 28%; }
.sala3 .cy23{ right: 10%; bottom: 28%; }
.sala3 .cy24{ right: 0%; bottom: 28%; }

.sala3 .cy25{ right: 25%; bottom: 14%; }
.sala3 .cy26{ right: 15%; bottom: 14%; }
.sala3 .cy27{ right: 5%; bottom: 14%; }

.sala3 .cy28{ right: 20%; bottom: 0%; }
.sala3 .cy29{ right: 10%; bottom: 0%; }
.sala3 .cy30{ right: 0%; bottom: 0%; }


.sala3 .spin{
	position: absolute;
	width: 22px;
	height: 21px;
	background: url('../img/spin.png') center center no-repeat;
	display: none;
}
.sala3 .s1{ top: 2%; left: -8%; }
.sala3 .s2{ top: 70%; left: -8%; }
.sala3 .s3{ bottom: -10%; left: 25%; }
.sala3 .s4{ bottom: -10%; right: 25%; }
.sala3 .s5{ top: 2%; right: -8%; }
.sala3 .s6{ top: 70%; right: -8%; }


.sala3 .names{
	font-size: 20px;
}
.sala3 .names .name1{
	position: absolute;
	top: 36%;
	left: 25%;
}
.sala3 .names .name2{
	position: absolute;
	bottom: 3%;
    right: 5%;
}

@media only screen and ( min-width:320px ) and (max-width:719px){

	.sala3{
		min-height: 320px;
	}

	.sala3 .be{
		width: 85%;
	}

	.clase-estudio .instructor.i3{
		width: 80px;
		height: 80px;
		left: calc(100% - 110px);
	}

	.sala3 .cy{ 
		width: 25px;
		height: 20px;
		border-radius: 8px; 
	    font-size: 11px;
    	padding: 4px;
	}

	.sala3 .names{
		font-size: 14px;
	}
	.sala3 .names .name2{
		bottom: 5%;
    	right: 10%;
	}



	.sala3 .be{
		min-height: 275px;
	}

	.sala3 .s1{ top: 2%; left: 0; }
	.sala3 .s2{ top: 70%; left: 0; }
	.sala3 .s3{ bottom: 0%; left: 25%; }
	.sala3 .s4{ bottom: 0%; right: 25%; }
	.sala3 .s5{ top: 2%; right: 0; }
	.sala3 .s6{ top: 70%; right: 0; }
}







.sala4{
	display: table;
	clear: both;
	width: 100%;
	max-width: 700px;
	position: relative;
	margin: 30px auto 60px;
	min-height: 300px;
	position: relative;
}
.sala4 .be{
	display: table;
    clear: both;
    width: 100%;
/*    max-width: 400px;*/
    position: relative;
    margin: 0 auto;
    min-height: 400px;
}
.sala4 .cy{
	position: absolute;
	border: 1px solid #3d3d3d;
	color: #3b3b3a;
	border-radius: 12px;
	width: 36px;
	height: 55px;
	text-align: center;
	cursor: pointer;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala4 .cy:hover{
	background: #ffb718;
	border: 1px solid #ffb718;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala4 .cy.active{
	background: #ffb718;
	border: 1px solid #ffb718;
}
.sala4 .cy.reservada{
	background: #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
}
.sala4 .cy.bloqueada{
	background: url(../img/bloqueo.png) center center no-repeat #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
	background-size: 20px;
}


.sala4 .cy8{ top: 0%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala4 .cy5{ top: 0%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala4 .cy9{ top: 12%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala4 .cy6{ top: 12%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala4 .cy10{ top: 23%; left: 11%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }
.sala4 .cy7{ top: 23%; left: 22%; width: 55px; height: 36px; text-align: left; padding-left: 10px; }


.sala4 .cy33{ bottom: 48%; left: 30%; }
.sala4 .cy34{ bottom: 48%; left: 24%; }
.sala4 .cy35{ bottom: 48%; left: 18%; }
.sala4 .cy36{ bottom: 48%; left: 12%; }
.sala4 .cy37{ bottom: 48%; left: 6%;  }
.sala4 .cy38{ bottom: 48%; left: 0%;  }

.sala4 .cy39{ bottom: 32%; left: 30%; }
.sala4 .cy40{ bottom: 32%; left: 24%; }
.sala4 .cy41{ bottom: 32%; left: 18%; }
.sala4 .cy42{ bottom: 32%; left: 12%; }
.sala4 .cy43{ bottom: 32%; left: 6%; }
.sala4 .cy44{ bottom: 32%; left: 0%; }

.sala4 .cy45{ bottom: 16%; left: 30%; }
.sala4 .cy46{ bottom: 16%; left: 24%; }
.sala4 .cy47{ bottom: 16%; left: 18%; }
.sala4 .cy48{ bottom: 16%; left: 12%; }
.sala4 .cy49{ bottom: 16%; left: 6%; }
.sala4 .cy50{ bottom: 16%; left: 0%; }


.sala4 .cy1{ bottom: 64%; right: 0%; }
.sala4 .cy2{ bottom: 64%; right: 6%; }
.sala4 .cy3{ bottom: 64%; right: 12%; }
.sala4 .cy4{ bottom: 64%; right: 18%; }


.sala4 .cy11{ bottom: 48%; right: 0%; }
.sala4 .cy12{ bottom: 48%; right: 6%; }
.sala4 .cy13{ bottom: 48%; right: 12%; }
.sala4 .cy14{ bottom: 48%; right: 18%; }
.sala4 .cy15{ bottom: 48%; right: 24%; }
.sala4 .cy16{ bottom: 48%; right: 30%; }
.sala4 .cy17{ bottom: 48%; right: 36%; }


.sala4 .cy18{ bottom: 32%; right: 0%; }
.sala4 .cy19{ bottom: 32%; right: 6%; }
.sala4 .cy20{ bottom: 32%; right: 12%; }
.sala4 .cy21{ bottom: 32%; right: 18%; }
.sala4 .cy22{ bottom: 32%; right: 24%; }
.sala4 .cy23{ bottom: 32%; right: 30%; }


.sala4 .cy24{ bottom: 16%; right: 0%; }
.sala4 .cy25{ bottom: 16%; right: 6%; }
.sala4 .cy26{ bottom: 16%; right: 12%; }
.sala4 .cy27{ bottom: 16%; right: 18%; }
.sala4 .cy28{ bottom: 16%; right: 24%; }
.sala4 .cy29{ bottom: 16%; right: 30%; }
.sala4 .cy30{ bottom: 16%; right: 36%; }
.sala4 .cy31{ bottom: 16%; right: 42%; }
.sala4 .cy32{ bottom: 16%; right: 48%; }




.sala4 .spin{position: absolute; width: 22px; height: 21px; background: url('../img/spin.png') center center no-repeat; display: none; }
.sala4 .s1{ top: 2%; left: -8%; }
.sala4 .s2{ top: 70%; left: -8%; }
.sala4 .s3{ bottom: -10%; left: 25%; }
.sala4 .s4{ bottom: -10%; right: 25%; }
.sala4 .s5{ top: 2%; right: -8%; }
.sala4 .s6{ top: 70%; right: -8%; }


@media only screen and ( min-width:320px ) and (max-width:719px){

	.sala4 .be{
		width: 85%;
	}

	.clase-estudio .instructor.i2{
		width: 80px;
		height: 80px;
		left: calc(50% - 55px);
	}

	.sala4 .cy{ 
		width: 25px;
		height: 35px;
		border-radius: 8px; 
	    font-size: 11px;
    	padding: 4px;
	}

	
    .sala4 .cy9, 
    .sala4 .cy6, 
    .sala4 .cy10,
    .sala4 .cy7,
    .sala4 .cy5,
    .sala4 .cy8{ width: 35px; height: 25px;}

	
	.sala4 .be{
		min-height: 275px;
	}

	/*.sala4 .s1{ top: 2%; left: 0; }
	.sala4 .s2{ top: 70%; left: 0; }*/
	.sala4 .s3{ bottom: 0%; left: 25%; }
	.sala4 .s4{ bottom: 0%; right: 25%; }
	.sala4 .s5{ top: 2%; right: 0; }
	.sala4 .s6{ top: 70%; right: 0; }
}
















.sala5{
	display: table;
	clear: both;
	width: 100%;
	max-width: 600px;
	position: relative;
	margin: 30px auto 60px;
	min-height: 300px;
	position: relative;
}
.sala5 .be{
	display: table;
    clear: both;
    width: 100%;
    max-width: 600px;
    position: relative;
    margin: 0 auto;
    min-height: 400px;
}
.sala5 .cy{
	position: absolute;
	border: 1px solid #3d3d3d;
	color: #3b3b3a;
	border-radius: 12px;
	width: 36px;
	height: 55px;
	text-align: center;
	cursor: pointer;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala5 .cy:hover{
	background: #ffb718;
	border: 1px solid #ffb718;
	transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
}
.sala5 .cy.active{
	background: #ffb718;
	border: 1px solid #ffb718;
}
.sala5 .cy.reservada{
	background: #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
}
.sala5 .cy.bloqueada{
	background: url(../img/bloqueo.png) center center no-repeat #ebebeb;
	border: 1px solid #ebebeb;
	color: #b6b6b6;
	cursor: no-drop;
	background-size: 20px;
}


.sala5 .cy13{ top: 0%; left: 12%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy14{ top: 0%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }

.sala5 .cy15{ top: 12%; left: 18%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy16{ top: 12%; left: 6%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }

.sala5 .cy19{ top: 24%; left: 12%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy18{ top: 24%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy17{ top: 24%; left: 24%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }

.sala5 .cy20{ top: 36%; left: 18%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy21{ top: 36%; left: 6%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }


.sala5 .cy23{ top: 48%; left: 12%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy24{ top: 48%; left: 0%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }
.sala5 .cy22{ top: 48%; left: 24%; width: 55px; height: 36px; text-align: right; padding-right: 10px; }


.sala5 .cy4{ top: 4%; right: 16%; }
.sala5 .cy5{ top: 4%; right: 8%; }
.sala5 .cy6{ top: 4%; right: 0%; }

.sala5 .cy3{ top: 12%; right: 24%; }
.sala5 .cy2{ top: 12%; right: 32%; }
.sala5 .cy1{ top: 12%; right: 40%; }

.sala5 .cy7{ top: 28%; right: 36%; }
.sala5 .cy8{ top: 28%; right: 28%; }
.sala5 .cy9{ top: 28%; right: 20%; }
.sala5 .cy10{ top: 28%; right: 12%; }

.sala5 .cy12{ top: 44%; right: 32%; }
.sala5 .cy11{ top: 44%; right: 40%; }

.sala5 .spin{
	position: absolute;
	width: 22px;
	height: 21px;
	background: url('../img/spin.png') center center no-repeat;
}
.sala5 .s1{ top: 2%; left: -8%; }
.sala5 .s2{ top: 44%; left: -8%; }
.sala5 .s3{ bottom: 22%; left: 25%; }
.sala5 .s4{ bottom: 22%; right: 25%; }
.sala5 .s5{ top: 2%; right: -8%; }
.sala5 .s6{ top: 44%; right: -8%; }


@media only screen and ( min-width:320px ) and (max-width:719px){

	.sala5 .be{
		width: 85%;
	}
	.sala5 .cy{ width: 45px; height: 30px; }
	 .sala5 .cy1{ height: 45px; width: 30px; }
	 .sala5 .cy2{ height: 45px; width: 30px; }
	 .sala5 .cy3{ height: 45px; width: 30px; }
	 .sala5 .cy4{ height: 45px; width: 30px; }
	 .sala5 .cy5{ height: 45px; width: 30px; }
	 .sala5 .cy6{ height: 45px; width: 30px; }
	 .sala5 .cy7{ height: 45px; width: 30px; }
	 .sala5 .cy8{ height: 45px; width: 30px; }
	 .sala5 .cy9{ height: 45px; width: 30px; }
    .sala5 .cy10{ height: 45px; width: 30px; }
    .sala5 .cy11{ height: 45px; width: 30px; }
    .sala5 .cy12{ height: 45px; width: 30px; }

	.sala5 .be{
		min-height: 275px;
	}

	.sala5 .s1{ top: 2%; left: 0; }
	.sala5 .s2{ top: 70%; left: 0; }
	.sala5 .s3{ bottom: 0%; left: 25%; }
	.sala5 .s4{ bottom: 0%; right: 25%; }
	.sala5 .s5{ top: 2%; right: 0; }
	.sala5 .s6{ top: 70%; right: 0; }
}