a,a:hover,a:focus,a:visited,a:active {text-decoration:none;}
nav.navbar {
	background-color: #00b099;
	border-radius: unset;
	border: 0;
	margin: 0;
}
nav.navbar .navbar-brand,.navbar-default .navbar-nav>li>a {
	color: white !important;
}
.navbar-default .navbar-nav>li>a:hover {
	background-color: hsl(172 100% 32% / 1);
}
.navbar-default .navbar-nav>li>a.selected {
	background-color:hsl(172 100% 25% / 1);
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background-color:hsl(172 100% 25% / 1) !important;}
#link-sitio:hover,#link-rutina:hover,#link-usuario:hover,
#link-sitio:active,#link-rutina:active,#link-usuario:active,
#link-sitio:focus,#link-rutina:focus,#link-usuario:focus,
#link-sitio:visited,#link-rutina:visited,#link-usuario:visited {
	background-color:hsl(172 100% 25% / 1);
}
nav.navbar .navbar-brand i {
	font-size:60%;
	position:relative;
	top:-1px;
}

#login {
	position: relative;
	margin: 100px auto 0;
	width:600px;
}
#login button {
	background-color: #00b099;
	border:0;
	color:white;
}
#login button:hover {
	background-color: hsl(172 100% 28% / 1);
}
#datos {
	position: relative;
	margin: 100px auto 0;
	width:600px;
}
h2 {
	font-weight: bold;
	color: #00b099;
}
#ejercicio h3 {
	text-align:center;
}
h4 {
    /* font-weight: bold; */
    margin: 20px 0 20px;
    text-align: center;
}
video {
	width: 100%;
	max-height: 65vh;
	/*background: linear-gradient(0deg, #ccc, #eee);*/
	background-color: #ddd;
}
video::-webkit-media-controls-panel {background-image: none !important;filter: brightness(0.4);}
video::-webkit-media-controls-timeline {background-color: #444;}
video::-webkit-media-controls-play-button {background-color: transparent;}
video::-webkit-media-controls-current-time-display {background-color: transparent;}
video::-webkit-media-controls-time-remaining-display  {background-color: transparent;}
video::-webkit-media-controls {}
video::-webkit-media-controls-enclosure {}
video::-webkit-media-controls-volume-slider-container {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-full-page-media::-webkit-media-controls-panel {}
video::-webkit-media-controls-timeline-container {}
video::-webkit-media-controls-seek-back-button {}
video::-webkit-media-controls-seek-forward-button {}
video::-webkit-media-controls-fullscreen-button {}
video::-webkit-media-controls-rewind-button {}
video::-webkit-media-controls-return-to-realtime-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}

#ej-nav {text-align: center;margin: 30px 0;position: relative;/* padding-top: 50px; */}
.ej-link {
    display: inline-block;
    /* padding: 5px 8px; */
    vertical-align: middle;
    position: relative;
    aspect-ratio: 1/1;
    height: 40px;
    /* padding: 20px 0; */
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.2rem;
}
.ej-link.on {background-color: #333;color: white;}
.ej-link:hover {background-color: #ddd;/* color:white; */}
.ej-link:active {background-color: #ccc;/* color:white; */}
.ej-link span {position:absolute;top:50%;left:50%;display: block;transform:translate(-50%,-50%);font-size: 120%;line-height: 1;font-family: sans-serif;}
.ej-anterior {margin: 0 1em 0 0;display: inline-block;vertical-align: middle;background: #333;color: white;padding: 13px 1em;font-size: 14px;line-height: 14px;border: 0;border-radius: 0.2rem;}
.ej-siguiente {margin: 0 0 0 1em;display: inline-block;vertical-align: middle;background: #333;color: white;padding: 13px 1em;font-size: 14px;line-height: 14px;border: 0;border-radius: 0.2rem;}
.rutina-linkDia {
	position: relative;
	display: inline-block;
	width: 29%;
	margin: 2% 2% 2% 0;
	background-color: #00b099;
	border-radius: 10px;
	font-weight: bold;
	color:white;
	padding: 20px;
	font-size: 24px;
	vertical-align: top;
	text-transform: uppercase;
}
.rutina-linkDia:hover {
	background-color: hsl(172 100% 28% / 1);
	color: white;
}
.rutina-linkDia > span {
	display:block;
	font-weight:normal;
	max-height: 100px;
	height:auto;
	overflow: hidden;
	opacity: 0.5;
	margin: 10px 0 0;
	font-size: 14px;
}
.rutina-linkDia:after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height: 30%;
	border-radius:0 0 10px 10px;
	background: rgb(0,176,153);
	background: linear-gradient(0deg, rgba(0,176,153,1) 0%, rgba(0,176,153,0) 100%);
	z-index:2;
}
#detalle-completo table td {
	border: 1px solid #ccc;
	padding: 0.5em;
}
#ejercicio {
	/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */
	padding: 20px 30px;
	border-radius: 5px;
	margin: 0 0 30px;
	background-color: #f0f0f0;
	transition: 0.3s;
}
#footer {
	width: 100%;
	margin: 90px 0 0;
	padding: 40px 0;
	text-align: center;
	background-color: #00b099;
}
#footer .tercio {
	display: inline-block;
	width: 32%;
	vertical-align: top;
	text-align: left;
}
#footer * {color:white;}
#footer #logo {
	width: 60px;
}
#subir {
	position: fixed;
	bottom: 30px;
	right: 30px;
	font-size: 36px;
	color: #777;
	cursor: pointer;
	visibility:hidden;
	opacity:0;
}
#subir:hover {
	color:#444;
}
#subir.on {
	visibility:visible;
	opacity:1;
	transition: 0.2s;
}
#boton-wsp {position: fixed;}


@media screen and (max-width: 768px) {
	.navbar-toggle {border:2px solid white;}
	.navbar-default .navbar-toggle .icon-bar {background-color: white;}
	.navbar-default .navbar-toggle {}
	.navbar-default .navbar-toggle:hover {
		border:2px solid hsl(172 100% 20% / 1);
		background-color:hsl(172 100% 25% / 1);
	}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: white;}
	#ejercicio {padding: 10px 0 20px;margin: 0 0 20px;}
	#ejercicio h3 {margin: 10px 0;font-size: 20px;}
	video {width: 100%;max-height: 50vh;}
	#ej-nav {margin-top: 1em;}
	.ej-anterior {margin: 0 0.5em 2em 0;display: inline-block;}
    .ej-siguiente.visible-xs {margin: 0 0 2em 0.5em;display: inline-block !important;0 0.5em 1emFONT-VARIANT: JIS04;}
	.ej-link {aspect-ratio: 3/2;margin: 0 0.2em 0.4em;background-color: #ddd;}
	#footer .tercio {
		display: block;
		width: 100%;
		text-align: center;
		margin:0 0 10px;
	}
	#datos {width:90%;}
	#login {width: 100%;}
}
