html {
  user-select: none;
		box-sizing: border-box; !IMPORTANT
  }
		
body {
 	font-family: 'Roboto condensed', sans-serif;
 	text-align: center; 
 	background-color: black;
  margin: 0; 
		margin-bottom: 30px;
}	
  
#app {
  user-select: none;
		width: 320mm;
		-width: 160mm;
  margin: 0 auto;
		background-color: black;
}

#loading {
	 position: fixed; 
		left: 0; 
		right: 0; 
		top: 0; 
		bottom: 0; 
		background-color: rgba(0,0,0,0.8); 
		-opacity: 0.8;
}		

#loading div {
  margin: 20% 40%; 
		padding: 4mm; 
		padding-top: 10mm;
}	

#loading p {
	 color: white; 
		font-size: 5mm;
}

#capsalera {
    height: 18.5mm;
				z-index: 1;
    background-color: #2b3034;
}

.flex {
 	display: flex;
}

#banner img {
	 border: 20px white solid; 
		background-color: white; 
}	

#menu ul {
 	height: 40%; 
		display: flex; 
		justify-content: center;
 	list-style:none;
 	margin: 1mm;
		padding: 3mm auto;
 	color: #0ccfd5;
 	font-size: 5mm;
		padding-inline-start: 2mm;
}

#menu ul:nth-child(2) {
	color: white; 
	font-size: 4.2mm;
}

#menu li {
		padding: 1mm 1.2mm;
  cursor: pointer;
}

#menu li:hover {
  color: gold;
}

#p li:hover {
  color: gold;
}

#menu .boto {
  display: none;
  float: right;
  height: 46px;
}

#menu .boto img {
  height: 46px;
}

#menu a:hover {
 	width: 		auto;
 	display:	block;
  color: gold !important;
  background-color: #1b1c1d !important;
  -background-color: white;
}

.logo {
  background-color: #acb5ba !important;
  -background-image: url(../img/logo_fraile.png);
  background-size: auto;
  background-repeat: no-repeat;
  width: 70mm;
  height: 100%;
}

#logofacebook {
  width: 10mm; 
		margin: 4mm 1mm;
}

#indicacions {
  color: white;
  font-size: 5mm; 
  text-align: left;
}

#instruccions {
   background-color: #048696;
   padding: 2mm 4mm 2mm 4mm;
			display: flex;
}
	
#pasa {
   color: #a8c7cb; 
   padding: 0 3mm;
			min-width: 25mm;
}  

#instruccio {
  font-style: normal !important;
}

.global {
		font-family: 'Roboto condensed', sans-serif; 
		padding-top: 10mm; 
    margin: 4mm auto;
    width: 80%;

}

#horario {
  background-color: #313236; 
		color: white; 
		border-top: 5mm #313236 solid; 
		border-bottom: 10mm #313236 solid
}		 

.titol, .casella {
  min-width: 146px; 
		font-size: 4.6mm; 
		height: 10mm
}

.hora {
	 vertical-align: top; 
		padding: 3px; 
		font-size: 3.9mm
}

.casella {
	vertical-align: bottom; 
	-padding: 0.5mm; 
	text-align: left; 
	-max-width: 110px; 
	color: #3c3a3a
}
.festiu{
    background-color: plum;
    font-family: 'open sans', sans-serif;
    vertical-align: middle;
    font-size: 21px;
    padding: 3px;
    text-align:center;
    color:black;
font-style:bold;
}
.fila {
	 height: 45px
}

.casella img {
	 width: 100%; 
		margin: 0; 
		padding: 6px 0; 
		background-color: #1b1c1d
}

.pagina {
	 background-color: #313236; 
		min-height: 500px;
	padding-bottom: 10mm;	
}		

.pestanyes {
		background-color: black; 
}
.pestanyes button {
	 font-family: 'Roboto condensed', sans-serif; 
		font-size: 4.1mm; 
		border: 0px; 
		padding: 1mm; 
		background-color: black;
		color: #0ccfd5; 
		margin: 0px; 
		outline: none;
		text-transform: uppercase
}

.pestanyes button:hover {
	 icon: default; 
		color: gold; 
		cursor: pointer
}
  
.pestanyes .actual {
	background-color: #313236; 
	icon: default; 
	color: white
}
  
.casella .icono {
	 width: 4.5mm; 
		float: right; 
		margin: 0 mm; 
		background-color: aliceblue; 
		padding: 1px 2px;
}

.telegym {
	 font-family: 'Roboto condensed', sans-serif; 
		vertical-align: middle; 
		font-size: 3mm; 
		padding: 0;
}

.clase {
	 padding: 2px; 
		color: #1b1c1d; 
		font-size: 25px
}

.ocult {
	  display: none
}

.libre {
	  background-color: green
}

.telegym.red {
  background-color: red
}

#horario span {
		font-family: 'Roboto condensed', sans-serif;
		background-color: #4d4e4f;res:#1e636c;
		color: white;
		height: 5mm;
		display: inline-block;
    width: 98%;
    font-size: 3.8mm;
    padding: 2px 2px;
		text-align: center;
}

span.transmessa {
	 color: gold;#916817; 
		font-weight: bolder; 
		font-size: 12px; 
		clear: right; 
		padding: 0px; 
		height: 13px; 
		vertical-align: top; 
		background-color: #434d5b;
}

span.monitor1 {
		font-size: 10px; 
		width: 50%; 
		padding-bottom: 2px; 
		height: 12px; 
		background-color: #434d5b; 
		border: none; 
		color: white;
}
  
span.monitor2 {
	 font-size: 10px; 
		width: 50%; 
		padding-bottom: 2px; 
		height: 12px; 
		background-color: #434d5b; 
		border: none; 
		color: white
}

#botoImprimir {
		z-order: 9999; 
		position: relative; 
		right: 0px; 
		top: -20px; 
		cursor: pointer
}

.imprimir {
		-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
		-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
		box-shadow:inset 0px 1px 0px 0px #54a3f7;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
		background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
		background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
		background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
		background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
		background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
		background-color:#007dc1;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border-radius:4px;
		border:1px solid #124d77;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family: 'Roboto condensed', sans-serif;
		font-size:13px;
		padding:4px 3px;
		text-decoration:none;
		text-shadow:0px 1px 0px #154682;
  position: absolute;
  margin-top: 4px;
  margin-left: 3px;
  font-family: font-family: 'Roboto condensed', sans-serif; font-size: 18px; color: white
}

.imprimir:hover {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
		background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
		background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
		background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
		background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
		background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
		background-color:#0061a7;
}

.imprimir:active {
		position:absolute;
		margin-top: 5x;
		margin-left: 6px;
}

@media print {
  body {
			 zoom: 60%
		}
  .global {
	 	 background-color: white; 
				color: #1b1c1d
		}
  .hora {
		  background-color: white; 
				color: #1b1c1d
		}
  .casella {
			 background-color: LightGray; 
				color: #1b1c1d
		}
  .titol {
			 background-color: white; 
				color: #1b1c1d
		}
  span {
			 background-color: white; 
				color: #1b1c1d;
				border-bottom: 1px white solid
  }
  .hora {
			 border: none
		}
  #botoImprimir {
			 display: none
		}
  .actual {
			 font-size: 200% font-weight: bold; 
				color: red; 
				margin-bottom: 3px;
		}
  -webkit-print-color-adjust: exact;
  span.transmessa {
			 color: orange
		}
}

.seccio {
	font-size: 7mm;
	height: 50px;
}
.reduida {
	height: 0;
}
.reduida .hora {
	padding: 6px 10px;
}

.casella > img {
  border-radius: 0.3mm 0.3mm 0 0;
}
.casella > span {
  border-radius: 0 0 0.3mm 0.3mm;
  margin-right: 2px;
}
.casella .icono {
  border-radius: 1mm;
  height: 18px;
}
#horario span {
  padding: 0;
  border: 2px #4d4e4f solid;
}

.bodypump img {background-color: #f44c59}
.bodypower img {background-color: #f44c59}
.powerexpres img {background-color: #f44c59}
.pumpexpress img {background-color: #f44c59}
.pilates img {background-color: #ff99cc}
.pilatesexpr img {background-color: #ff99cc}
.spinning img {background-color: #ff6961}
.balanceexpre img {background-color: #c9ea6ac9}
.bodybalance img {background-color: #c9ea6ac9}
.bodyyoga img {background-color: #c9ea6ac9}
.bodyyogaexp img {background-color: #c9ea6ac9}
.zumba img {background-color: #f6b454}
.zumbaabs img {background-color: #f6b454}
.abdominales img {background-color: #6ba4d1}
.absgluteos img {background-color: #6ba4d1}
.absgltexpr img {background-color: #6ba4d1}
.bodycombat img {background-color: #a5b4339c}
.cardiobox img {background-color: #137d54}
.gap img {background-color: #dba2ee9c}
.combatexpres img {background-color: #608161bd}
.tonificacion img {background-color: #00aac1}
.cxworx img {background-color: #f48f4d}
.cxstretch img {background-color: #f48f4d}
.corestretch img {background-color: #f48f4d}
.core img {background-color: #f48f4d}
.step img {background-color: #48b66d}
.absstretch img {background-color: #6a7077}
.flowyoga img {background-color: #cc6699}
.abs30 img {background-color: #6a7077}
.funcional img {background-color: #9a9a9a}
.funcional30 img {background-color: #4fd84f}
.gluteos30 img {background-color: #2392ea}
.tonificexpr img {background-color: #00aac1}
.cxpumpexp img {background-color: #563907}
.musculacion img {background-color: #144474}
.bodyfitness img {background-color: #2f6dac}
.corefitness img {background-color: #f4c167;}
.embarazo img{background-color: #d2b672}
.shbam img{background-color: #ec068d}
.fitdance img{background-color: #fe0190}
.strechingexp img{background-color: #be8fff}
.bodystretch img{background-color: #9dc457}
.fitnessexpre img {background-color: #2f6dac}
.cardiotono img {background-color: #a65e00}
.steptono img {background-color: #12933e}
.latinofitnes img {background-color: #ec068d}
.yoga img {background-color: #cc6699}
.cross30 img {background-color: #123709}
.gap30 img {background-color: #9976a6}
.fitnesslatin img {background-color: #ec068d}
.corecross img {background-color: #f48f4d}
.gimnasueca img{background-color: #d0b580}
.abstrainning img {background-color: #697078}
.fitnessfunci img {background-color: #2f6dac}
.fitness img {background-color: #2f6dac}
.stretching img {background-color: #be8fff}
.boxfitness img {background-color: #0b4c33}








img.icono {
    height: 20px;
    float: left;
    padding-left: 2px;
    -border-radius: 15px;
    -background-color: #AEB6BF;
    opacity: 0.6;
}

#spinning {
	width: 250mm;
	margin: 5mm 2mm;
	margin-bottom: 10mm;
	color: #313236;
}	
#spinning tr {
	height: 9mm; 
}  
	
#spinning thead td {
  background-color: #313236;	
	color: white;
	font-size: 5mm;
}  

#spinning tbody {
	background-color: #8a8989;
	color: white;
}	

#spinning tbody td {
	font-size: 4.6mm;
	width: 25mm;
} 
 
#spinning tbody td:first-child {
	background-color: #313236;
	color: white; 
	width: 10mm;
	vertical-align: top;
	font-size: 4mm;
	border: none;
}  

#spinning .mnieves {
	background-color: #0c68ec66;
}	
#spinning .chris {
	background-color: #00800045;
}	
#spinning .manolo {
	background-color: #ffa500a6;
}	
#spinning .elena {
	background-color: #00808070;
}	

#spinning .julia {
	background-color: #c387c3a1;
}	

#spinning .yasmina {
	background-color: #a1d51b96;
}	

#spinning .merche {
	background-color: #ffeb3b7a;
}	

#spinning .divi {
	background-color: #d76767;
}	

#spinning .manuel {
	background-color: #9e9e9e80;
}	

#horarispinning {
	_display: none;
}

#horarispinning h2 {
	text-align: center;
}

@media (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2.0), 
@media (orientation: portrait) and (min-width: 900px)
{
  .logo {
    padding-left: 12mm;
  }
  .titol, .casella {
    font-size: 6mm;
  }
  .hora {
    font-size: 6mm;
  }
  #horario span {
    font-size: 5mm;
  }
  .pestanyes {
    zoom: 1.25;
  }
  .global {
    zoom: 1;
    margin-top:150px;
    padding: 0;
    padding-top: 50mm;
    width: 100%;
  }  
    
}