/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */

h1 {
  font-size: 18px;
  text-align: center;
}

.content-slider {
  width: 100%;
  height: 36px;
}

.slider {
  height: 24px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 48px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 680px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 40px;
  font-style: italic;
}

.slider .source {
  font-size: 20px;
  text-align: right;
}

.slider li.anim1 {
  animation: cycle 15s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 15s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}


/* aquí termina la animación de cambio de texto de alto riesgo */

.colorAR {
  	color:red;
  	background:#C0C0C0;
}

.colorPC {
  	color:orange;
  	background:white;
  	font-weight:bold;
}

.temaAR {
  	font-size:18px;
  	color:#CFB53B;
 	font-family: arial, helvetica, sans-serif;
  	font-weight:bold;
}

.semana {
  	font-size:18px;
  	font-weight:bold;
  	color:gold;
  	background:black;
}

.ntema {
  	font-size:18px;
  	font-weight:bold;
  	color:white;
  	background:black;
}

.ageneral {
  	font-size:18px;
  	font-weight:bold;
  	color:purple;
  	background:white;
}

.subtitulo {
  	font-size:22px;
  	color:#CFB53B;
 	font-family: arial, helvetica, sans-serif;
  	text-align:center;
  	display:block;
  	margin:auto;
  	font-weight:bold;
  	!important;
}

.actualizado {
  	background:orange;
    color:white;
}

.anadido {
  	background:green;
    color:white;
}

.modificado {
  	background:blue;
    color:white;
}

.eliminado {
  	background:red;
    color:white;
}

.creado {
  	background:purple;
    color:white;
}

.movido {
  	background:gray;
    color:white;
}

.ecfr {
  	background:white;
  	color:orange;
  	font-weight:bold;
}

a:hover {
	background:white;
  	color:crimson;
    !important;
}

img.vinculo {
	box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.3);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	-webkit-filter: grayscale(1);
  	filter: grayscale(1);
  	opacity: 1;
  	transition: transform .2s
  	!important;
}

img.vinculo:hover {
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.4);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	filter: saturate(1.5);
  	opacity: 1;
  	transform: scale(0.98);
  	!important;
}

img.sepia {
	box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.3);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	-webkit-filter: sepia(0.5);
  	filter: sepia(0.5);
  	transition: transform .2s
  	!important;
}

img.sepia:hover {
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.4);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	filter: saturate(2);
  	transform: scale(0.98);
  	!important;
}

img.examen {
	box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.3);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	filter: invert(1);
  	filter: brightness(1.1);
  	filter: saturate(2);
  	transition: transform .2s
  	!important;
}

img.examen:hover {
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.4);
  	border-radius: 8px;
  	display:block;
  	margin:auto;
  	filter: saturate(4);
  	transform: scale(0.98);
  	!important;
}

img.centrar {
	display:block;
  	margin:auto;
}

h3 {
  	font-size:22px;
  	color:#808080;
 	font-family: arial, helvetica, sans-serif;
  	text-align:center;
  	!important;
}

h5 {
  	font-size:18px;
  	color:#CFB53B;
 	font-family: arial, helvetica, sans-serif;
  	text-align:center;
    !important;
}

h6 {
  	font-size:14px;
  	color:#000000;
 	font-family: arial, helvetica, sans-serif;
  	text-align:center;
    !important;
}

img.fotovinculo {
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  	border-radius: 2px;
  	display:inline-block;
  	margin:auto;
  	-webkit-filter: grayscale(1);
  	filter: grayscale(1);
  	opacity: 1;
  	transition: transform .2s
  	!important;
}

img.fotovinculo:hover {
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
  	border-radius: 2px;
  	display:inline-block;
  	margin:auto;
  	filter: saturate(1.5);
  	opacity: 1;
  	transform: scale(0.98);
  	!important;
}

img.fotosepia {
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  	border-radius: 2px;
  	display:inline-block;
  	margin:auto;
  	-webkit-filter: sepia(0.5);
  	filter: sepia(0.5);
  	transition: transform .2s
  	!important;
}

img.fotosepia:hover {
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
  	border-radius: 2px;
  	display:inline-block;
  	margin:auto;
  	filter: saturate(2);
  	transform: scale(0.98);
  	!important;
}

.boton {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  display: inline-block;
  background-color: deepskyblue;
  color: white;
  padding: 16px 32px;
  text-align: center;
}

.boton:hover {
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  display: inline-block;
  background-color: deepskyblue;
  color: white;
  padding: 16px 32px;
  text-align: center;
  filter: saturate(1.5);
  transform: scale(0.98);
  !important;
}

.titulo {
		font-size: 24px;
}

.titulog {
		font-size: 32px;
}

.tpurple {
		color: purple;
}

.tgreen {
		color: green;
}

.tred {
		color: red;
}

.resaltado {
		background-color: lightgoldenrodyellow;
}

.boton {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  display: inline-block;
  background-color: deepskyblue;
  color: white;
  padding: 16px 32px;
  text-align: center;
}

.boton:hover {
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  display: inline-block;
  background-color: deepskyblue;
  color: white;
  padding: 16px 32px;
  text-align: center;
  filter: saturate(1.5);
  transform: scale(0.98);
  !important;
}

#animaciontitulo {
	animation-name: animar;
  	animation-duration: 2.5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: ease-in-out;
  	text-align: center;
  	font-size: 24px;
  	font-weight: bolder;
}

@keyframes animar{
  0% {
    color:red;
    transform: scale(1);
  }
  25% {
    color: orange;
  }
  50% {
    color: green;
    transform: scale(1.25);
  }
  75%{
    color: blue;
  }
  100% {
    color:red;
  }
}

#animacionexamen {
	animation-name: animarexamen;
  	animation-duration: 1.5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: ease-in-out;
 }

@keyframes animarexamen{
  0% {
    transform: scale(0.95);
  }
  50% {
  transform: scale(1.05);
  }
  100% {
    transform: scale(0.95);
  }
}