/***********************************************************************************************************/
                                                /* FUENTES */
/***********************************************************************************************************/
/* BEGIN Thin */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Thin/RobotoDraft-Thin.woff2?v=1.0.0") format("woff2"), url("./fonts/Thin/RobotoDraft-Thin.woff?v=1.0.0") format("woff"), url("./fonts/Thin/RobotoDraft-Thin.ttf?v=1.0.0") format("truetype");
  font-weight: 100;
  font-style: normal; }

/* END Thin */
/* BEGIN Light */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Light/RobotoDraft-Light.woff2?v=1.0.0") format("woff2"), url("./fonts/Light/RobotoDraft-Light.woff?v=1.0.0") format("woff"), url("./fonts/Light/RobotoDraft-Light.ttf?v=1.0.0") format("truetype");
  font-weight: 300;
  font-style: normal; }

/* END Light */
/* BEGIN Regular */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Regular/RobotoDraft-Regular.woff2?v=1.0.0") format("woff2"), url("./fonts/Regular/RobotoDraft-Regular.woff?v=1.0.0") format("woff"), url("./fonts/Regular/RobotoDraft-Regular.ttf?v=1.0.0") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Regular/RobotoDraft-Regular.woff2?v=1.0.0") format("woff2"), url("./fonts/Regular/RobotoDraft-Regular.woff?v=1.0.0") format("woff"), url("./fonts/Regular/RobotoDraft-Regular.ttf?v=1.0.0") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* END Regular */
/* BEGIN Italic */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Italic/RobotoDraft-Italic.woff2?v=1.0.0") format("woff2"), url("./fonts/Italic/RobotoDraft-Italic.woff?v=1.0.0") format("woff"), url("./fonts/Italic/RobotoDraft-Italic.ttf?v=1.0.0") format("truetype");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Italic/RobotoDraft-Italic.woff2?v=1.0.0") format("woff2"), url("./fonts/Italic/RobotoDraft-Italic.woff?v=1.0.0") format("woff"), url("./fonts/Italic/RobotoDraft-Italic.ttf?v=1.0.0") format("truetype");
  font-weight: normal;
  font-style: italic; }

/* END Italic */
/* BEGIN Medium */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Medium/RobotoDraft-Medium.woff2?v=1.0.0") format("woff2"), url("./fonts/Medium/RobotoDraft-Medium.woff?v=1.0.0") format("woff"), url("./fonts/Medium/RobotoDraft-Medium.ttf?v=1.0.0") format("truetype");
  font-weight: 500;
  font-style: normal; }

/* END Medium */
/* BEGIN Bold */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Bold/RobotoDraft-Bold.woff2?v=1.0.0") format("woff2"), url("./fonts/Bold/RobotoDraft-Bold.woff?v=1.0.0") format("woff"), url("./fonts/Bold/RobotoDraft-Bold.ttf?v=1.0.0") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Bold/RobotoDraft-Bold.woff2?v=1.0.0") format("woff2"), url("./fonts/Bold/RobotoDraft-Bold.woff?v=1.0.0") format("woff"), url("./fonts/Bold/RobotoDraft-Bold.ttf?v=1.0.0") format("truetype");
  font-weight: bold;
  font-style: normal; }

/* END Bold */
/* BEGIN Bold Italic */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/BoldItalic/RobotoDraft-BoldItalic.woff2?v=1.0.0") format("woff2"), url("./fonts/BoldItalic/RobotoDraft-BoldItalic.woff?v=1.0.0") format("woff"), url("./fonts/BoldItalic/RobotoDraft-BoldItalic.ttf?v=1.0.0") format("truetype");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/BoldItalic/RobotoDraft-BoldItalic.woff2?v=1.0.0") format("woff2"), url("./fonts/BoldItalic/RobotoDraft-BoldItalic.woff?v=1.0.0") format("woff"), url("./fonts/BoldItalic/RobotoDraft-BoldItalic.ttf?v=1.0.0") format("truetype");
  font-weight: bold;
  font-style: italic; }

/* END Bold Italic */
/* BEGIN Black */
@font-face {
  font-family: RobotoDraft;
  src: url("./fonts/Black/RobotoDraft-Black.woff2?v=1.0.0") format("woff2"), url("./fonts/Black/RobotoDraft-Black.woff?v=1.0.0") format("woff"), url("./fonts/Black/RobotoDraft-Black.ttf?v=1.0.0") format("truetype");
  font-weight: 900;
  font-style: normal; }

/* END Black */
/***********************************************************************************************************/
                                                /*Loader*/
/***********************************************************************************************************/
#barCont{ /* position:absolute; top:0; left:0; */ height: 70px; display: none; margin: 0 auto; text-align:center; width:100%;}
.barRecuadro{margin: 0 auto; height: 65px; /* opacity: .5; */}
.bar {color: #424242;font-size: 15px; width: 150px;height: 40px;margin: 5px auto 5px; /*background: rgba(255,255,255,1);*/
      position: relative;
      z-index: 999;
      /*
      box-shadow:
        0 0 0 .05em rgba(100,100,100,0.075), /* Subtle border * /
        0 0 0 .1em rgba(0,0,0,0.1),           /* Outter border * /
        inset 0 .0em .05em rgba(0,0,0,0.1),   /* Inset shadow * /
        0 .05em rgba(255,255,255,0.7);     /* Slight reflection * /
    */
}
.barMje: .barMje { font-size: 15px; margin-bottom: 20px;}
 .bar:after {text-align:center;font-family: 'Carrois Gothic', sans-serif;font-size: 1em;color: #fff;text-shadow: 0 .05em rgba(255,255,255,0.7);}
.sphere {/*display: block;*/width: 40px;height: 40px;margin-bottom:10px;position: relative; left: -10px;
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3), /* Top light */
        inset 0 -.1em .15em rgba(0,0,0,0.15),      /* Bottom shadow */
        0 0 .25em rgba(0,0,0,0.3);             /* Outter shadow */ 
    /* Animation */
    /*
    animation: move 1.75s ease-in-out infinite alternate;
    -webkit-animation: move 1.75s ease-in-out infinite alternate; 
    */
}
.izC1,.izC2,.izC3,.izC4,.izC5,.izC6{height:10px; width: 10px; position:absolute;}
.izC1{background-color:#B2B200}
.izC2{background-color:#FFC400}
.izC3{background-color:#DB0028}
.izC4{background-color:#000}
.izC5{background-color:#7593C7}
.izC6{background-color:#7C787D}
#izC1{top:0px; left:0px;}
#izC2{top:0px; left:10px;}
#izC3{top:0px; left:20px;}
#izC4{top:0px; left:30px;}
#izC5{top:10px; left:0px;}
#izC6{top:10px; left:10px;}
#izC7{top:10px; left:20px;}
#izC8{top:10px; left:30px;}
#izC9{top:20px; left:0px;}
#izC10{top:20px; left:10px;}
#izC11{top:20px; left:20px;}
#izC12{top:20px; left:30px;}
#izC13{top:30px; left:0px;}
#izC14{top:30px; left:10px;}
#izC15{top:30px; left:20px;}
#izC16{top:30px; left:30px;}

@keyframes move {
    to { margin-left: 87%; }
}
@-webkit-keyframes move {
    to { margin-left: 87%; }
}

.barContainer {
    float: left;
    width: 100%;
}

/***********************************************************************************************************/
                                                /* Fin Loader */
/***********************************************************************************************************/

/***********************************************************************************************************/
                                                /* GENERAL */
/***********************************************************************************************************/

* {
  font-family: "RobotoDraft","Roboto","Helvetica Neue", "Segoe UI", sans-serif; }

html {
    width: 100%;
    height: 100%;
}

body {
    background: url('../adapt/images/fondo.png');
    font-family:Arial, Helvetica, sans-serif; color:#333333;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center; 
    /* background-color: black; */
    overflow: hidden;
    /* background-size: 100% 100%; */
}

body.blanco {
    background: url('../adapt/images/fondo-blanco.png');
    background-repeat: no-repeat;
    background-position: center; 
    background-color: white;
    /* background-size: 100% 100%; */
}

body.blanco-transparente {
    background: url('../adapt/images/fondo-blanco-transparente.png');
    background-repeat: no-repeat;
    background-position: center; 
    background-color: white;
    /* background-size: 100% 100%; */
}

button {
    border-radius: initial !important;
    background: inherit !important;
    background-color: black !important;
    color: white !important;
    margin: 0 !important;
    border: 0 !important;
    width: calc(100% + 2px) !important; /* Se añaden 2px por los bordes de los inputs */
}

button span {
    padding: 0 !important;
}

.ui-corner-all,#popup_container,#popup_container #popup_title{
    -moz-border-radius-bottomright: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
    -khtml-border-bottom-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -moz-border-radius-bottomleft: 0 !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -khtml-border-bottom-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    -moz-border-radius-topright: 0 !important;
    -webkit-border-top-right-radius: 0 !important;
    -khtml-border-top-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    -moz-border-radius-topleft: 0 !important;
    -webkit-border-top-left-radius: 0 !important;
    -khtml-border-top-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.ui-draggable .ui-dialog-titlebar {
    font-size: 18px;
}

.boton-imagen {
    float: right;
    margin-right: 5px;
    margin-top: 45px;
    width: 32px;
    height: 32px;
}

#cabecera {
    border-bottom: 1px solid black;
    margin-bottom: 5px;
}

/***********************************************************************************************************/
                                                /* LOGIN */
/***********************************************************************************************************/

#contenedor, #divContent {
    height: 100%;
    width: 100%;
    min-height: 210px;
}

#principal {
    position: absolute;
    height: 250px;
    width: 500px;
    margin: calc(50vh - 125px) 0 0 calc(49vw - 250px);
}

#form,#menuwebrun {
    height: calc(100% - 4em); /* Se le quita al tamaño de la cabecera */
}

#form1,#form2 {
    height: 100%;
}

#divHeader {
    /* background-color: #FFFFFF; */
    padding: 2em 2em;
    /* opacity: 0.5; */
}

#divHeaderContent,#divContent,#menu {
    position: relative;
    z-index: 999;
}

#titulo {
    float: left;
    font-size: 25px;
    margin: 0.2em 0 0 0;
    color: black;
}

#logoWebLogin {
    float: right;
    margin: .9em .5em 0 0;
}

#logoWebLogin img {
    max-width: 32px;
    max-height: 32px;
}

#divLogin,#divMenu,.barRecuadro {
    background-color: black;
    opacity: 0.7;
    height: 100%;
    min-height: 210px;
}

#divLogin,#divMenu {
    min-height: 210px;
}

.barRecuadro{
    min-height: 50px;
}

#divContent,#menu {
    float: left;
}

#divflags {
    float: right;
    margin: 1em 1em 0 0;
}

#divflags a,#menu #submenuwebrun li a {
    text-transform:uppercase;
    color: white;
    text-decoration: none;
    font-size: 13px;
}

#divflags a:not(:last-child) {
    border-right: 1px solid white;
    margin-right: 5px;
    padding-right: 5px;
}

#divflags-contenido > a > img {
    position: relative;
    top: 3px;
}

#divflags-contenido > a.transparent {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=50);
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

#ulLogin li {
    margin: 0 0 1em 2em;
    text-align: right;
}

#ulLogin {
    width: 60%;
    margin-top: 3.5em;
}

#ulLogin * {
    width: 100%
}

#ulLogin input {
    font-size: 18px;
    height: 2em;
    border: 0;
    height: 36px;
    border: 1px solid #d9d9d9;
}

#ulLogin button {
    font-size: 18px;
    height: 36px;
}

#resetpassword {
    color: white;
    font-size: 13px;
    text-decoration: none;
}

/***********************************************************************************************************/
                                                /* LISTA APLICACIONES */
/***********************************************************************************************************/

#menu #submenuwebrun li {
    width: 24%;
    /* 
    height: 49%;
    */
    float: left;
    margin-top: 1.3%;
    text-align: center;
    display: table;
    font-size: 11px;
    font-weight: bold;
}

#menu #submenuwebrun li:not(.vacio) {
    cursor: pointer;
}

#menu #submenuwebrun li a {
    color: white;
    min-height: 120px;
}
#menu #submenuwebrun li a:focus {
    outline: none;
}

#menu #submenuwebrun li div.fondo-boton {
    background-color: black;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    min-height: 120px; /* Para Firefox que no hace caso a la Altura */
    max-height: 120px;
}

#menu #submenuwebrun li.vacio div.fondo-boton {
    opacity: 0.4;
}

#menu #submenuwebrun li div.boton {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 999;
    float: left;
}
/*
#menu #submenuwebrun li.selected div.fondo-boton {
    opacity: 1 !important;
}
#menu #submenuwebrun li.selected div.boton a {
    color: black;
}
*/

#menu #submenuwebrun li div.fondo-boton:hover,#menu #submenuwebrun li:not(.vacio) div.boton:hover ~ div.fondo-boton {
    opacity: 0.8;
}

#menu #submenuwebrun li:not(:nth-child(4n)) {
    margin-right: 6.5px; 
}

#menu, #submenuwebrun, #menu #submenuwebrun li div.boton {
    height: 100%;
    width: 100%;
    min-height: 120px; /* Para Firefox que no hace caso a la Altura */
    max-height: 120px;
}

#principal.aplicaciones #menu, #principal.aplicaciones #submenuwebrun {
    min-height: 380px;
    max-height: 380px;
    overflow-y: auto;
}


/***********************************************************************************************************/
                                                /* VENTANAS */
/***********************************************************************************************************/

ul.ulwindow input {
    font-size: 18px;
    height: 2em;
    border: 0;
    height: 36px;
    border: 1px solid #d9d9d9;
    width: 100%
}
ul.ulwindow li,.div-buttons {
    margin-top: .8em;
}
ul.ulwindow li a {
    text-decoration: none;
}

div.div-buttons button {
    font-size: 18px;
    height: 36px;
}

div.div-buttons button span {
    font-size: 18px;
}

div.ui-dialog {
    min-width: 450px;
}

div.ui-dialog-titlebar,h1#popup_title {
    border: none;
    background: none;
    color: #000;
}

div.ui-dialog-title {
    color: #fff;
}

/***********************************************************************************************************/
                                                /* POPUPS */
/***********************************************************************************************************/

#popup_container input {
    font-size: 18px;
    height: 36px;
}
#popup_container #popup_panel{
    margin-top: 3em;
}
#popup_container input {
    background: inherit !important;
    background-color: black !important;
    color: white !important;
    margin: 0 !important;
    border: 0 !important;
    width: calc(100% + 2px) !important; /* Se añaden 2px por los bordes de los inputs */
}


/***********************************************************************************************************/
                                                /* ANIMACIÓN ESPERA */
/***********************************************************************************************************/
/*
	colores:
	verde - #b2b200
	naranja - #ffc400
	rojo - #db0028
	negro - #000000
	azul - #7593c7
	gris - #7c787d

	16.6
	33.3
	50
	66.6
	83.3
	100
*/
.colored {
  margin-top: 8px;
  margin-bottom: 5px;
  height: 50px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
  background-image: -moz-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
  background-image: -o-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
  background-image: linear-gradient(to right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);

  -webkit-animation: colored 2s infinite;
  -moz-animation: colored 1s infinite;
  -o-animation: colored 1s infinite;
  animation: colored 1s infinite;
}

@keyframes colored {
  0% {
    background-image: -webkit-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: -moz-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: -o-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: linear-gradient(to right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
  }
  16% {
    background-image: -webkit-linear-gradient(right, #ffc400, #ffc400 19.1%, #db0028 19.1%, #db0028 36.55%, #000000 36.55%, #000000 46.75%, #7593c7 46.75%, #7593c7 61.6%, #7c787d 61.6%, #7c787d 88.3%, #b2b200 88.3%, #b2b200 100%);
    background-image: -moz-linear-gradient(right, #ffc400, #ffc400 19.1%, #db0028 19.1%, #db0028 36.55%, #000000 36.55%, #000000 46.75%, #7593c7 46.75%, #7593c7 61.6%, #7c787d 61.6%, #7c787d 88.3%, #b2b200 88.3%, #b2b200 100%);
    background-image: -o-linear-gradient(right, #ffc400, #ffc400 19.1%, #db0028 19.1%, #db0028 36.55%, #000000 36.55%, #000000 46.75%, #7593c7 46.75%, #7593c7 61.6%, #7c787d 61.6%, #7c787d 88.3%, #b2b200 88.3%, #b2b200 100%);
    background-image: linear-gradient(to right, #ffc400, #ffc400 19.1%, #db0028 19.1%, #db0028 36.55%, #000000 36.55%, #000000 46.75%, #7593c7 46.75%, #7593c7 61.6%, #7c787d 61.6%, #7c787d 88.3%, #b2b200 88.3%, #b2b200 100%);
  }
  33% {
    background-image: -webkit-linear-gradient(right, #db0028, #db0028 19.85%, #000000 19.85%, #000000 31.05%, #7593c7 31.05%, #7593c7 45%, #7c787d 45%, #7c787d 71.6%, #b2b200 71.6%, #b2b200 80.8%, #ffc400 80.8%, #ffc400 100%);
    background-image: -moz-linear-gradient(right, #db0028, #db0028 19.85%, #000000 19.85%, #000000 31.05%, #7593c7 31.05%, #7593c7 45%, #7c787d 45%, #7c787d 71.6%, #b2b200 71.6%, #b2b200 80.8%, #ffc400 80.8%, #ffc400 100%);
    background-image: -o-linear-gradient(right, #db0028, #db0028 19.85%, #000000 19.85%, #000000 31.05%, #7593c7 31.05%, #7593c7 45%, #7c787d 45%, #7c787d 71.6%, #b2b200 71.6%, #b2b200 80.8%, #ffc400 80.8%, #ffc400 100%);
    background-image: linear-gradient(to right, #db0028, #db0028 19.85%, #000000 19.85%, #000000 31.05%, #7593c7 31.05%, #7593c7 45%, #7c787d 45%, #7c787d 71.6%, #b2b200 71.6%, #b2b200 80.8%, #ffc400 80.8%, #ffc400 100%);
  }
  50% {
    background-image: -webkit-linear-gradient(right, #000000, #000000 13.35%, #7593c7 13.35%, #7593c7 28.3%, #7c787d 28.3%, #7c787d 55%, #b2b200 55%, #b2b200 64.1%, #ffc400 64.1%, #ffc400 82.55%, #db0028 82.55%, #db0028 100%);
    background-image: -moz-linear-gradient(right, #000000, #000000 13.35%, #7593c7 13.35%, #7593c7 28.3%, #7c787d 28.3%, #7c787d 55%, #b2b200 55%, #b2b200 64.1%, #ffc400 64.1%, #ffc400 82.55%, #db0028 82.55%, #db0028 100%);
    background-image: -o-linear-gradient(right, #000000, #000000 13.35%, #7593c7 13.35%, #7593c7 28.3%, #7c787d 28.3%, #7c787d 55%, #b2b200 55%, #b2b200 64.1%, #ffc400 64.1%, #ffc400 82.55%, #db0028 82.55%, #db0028 100%);
    background-image: linear-gradient(to right, #000000, #000000 13.35%, #7593c7 13.35%, #7593c7 28.3%, #7c787d 28.3%, #7c787d 55%, #b2b200 55%, #b2b200 64.1%, #ffc400 64.1%, #ffc400 82.55%, #db0028 82.55%, #db0028 100%);
  }
  66% {
    background-image: -webkit-linear-gradient(right, #7593c7, #7593c7 11.6%, #7c787d 11.6%, #7c787d 38.3%, #b2b200 38.3%, #b2b200 47.5%, #ffc400 47.5%, #ffc400 69.1%, #db0028 69.1%, #db0028 86.55%, #000000 86.55%, #000000 100%);
    background-image: -moz-linear-gradient(right, #7593c7, #7593c7 11.6%, #7c787d 11.6%, #7c787d 38.3%, #b2b200 38.3%, #b2b200 47.5%, #ffc400 47.5%, #ffc400 69.1%, #db0028 69.1%, #db0028 86.55%, #000000 86.55%, #000000 100%);
    background-image: -o-linear-gradient(right, #7593c7, #7593c7 11.6%, #7c787d 11.6%, #7c787d 38.3%, #b2b200 38.3%, #b2b200 47.5%, #ffc400 47.5%, #ffc400 69.1%, #db0028 69.1%, #db0028 86.55%, #000000 86.55%, #000000 100%);
    background-image: linear-gradient(to right, #7593c7, #7593c7 11.6%, #7c787d 11.6%, #7c787d 38.3%, #b2b200 38.3%, #b2b200 47.5%, #ffc400 47.5%, #ffc400 69.1%, #db0028 69.1%, #db0028 86.55%, #000000 86.55%, #000000 100%);
  }
  83% {
    background-image: -webkit-linear-gradient(right, #7c787d, #7c787d 21.6%, #b2b200 21.6%, #b2b200 30.8%, #ffc400 30.8%, #ffc400 52.5%, #db0028 52.5%, #db0028 69.85%, #000000 69.85%, #000000 80.05%, #7593c7 80.5%, #7593c7 100%);
    background-image: -moz-linear-gradient(right, #7c787d, #7c787d 21.6%, #b2b200 21.6%, #b2b200 30.8%, #ffc400 30.8%, #ffc400 52.5%, #db0028 52.5%, #db0028 69.85%, #000000 69.85%, #000000 80.05%, #7593c7 80.5%, #7593c7 100%);
    background-image: -o-linear-gradient(right, #7c787d, #7c787d 21.6%, #b2b200 21.6%, #b2b200 30.8%, #ffc400 30.8%, #ffc400 52.5%, #db0028 52.5%, #db0028 69.85%, #000000 69.85%, #000000 80.05%, #7593c7 80.5%, #7593c7 100%);
    background-image: linear-gradient(to right, #7c787d, #7c787d 21.6%, #b2b200 21.6%, #b2b200 30.8%, #ffc400 30.8%, #ffc400 52.5%, #db0028 52.5%, #db0028 69.85%, #000000 69.85%, #000000 80.05%, #7593c7 80.5%, #7593c7 100%);
  }
  100% {
    background-image: -webkit-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: -moz-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: -o-linear-gradient(right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    background-image: linear-gradient(to right, #b2b200, #b2b200 14.1%, #ffc400 14.1%, #ffc400 35.8%, #db0028 35.8%, #db0028 53.25%, #000000 53.25%, #000000 63.35%, #7593c7 63.35%, #7593c7 78.3%, #7c787d 78.3%, #7c787d 100%);
    top: 50px;
    right: 50px;
   }  
}

/*
En Safari no funciona la inimación cuando se pone una imagen de fondo.
@-webkit-keyframes colored {
  0% {
    background: #b2b200;
  }
  16% {
    background: #ffc400;
  }
  33% {
    background: #db0028;
  }
  50% {
    background: #000000;
  }
  66% {
    background: #7593c7;
  }
  83% {
    background: #7c787d;
  }
  100% {
    background: #b2b200;
  }  
}
*/