/* MENSAJE NAVEGADORES ANTIGUOS*/
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-align: center; text-decoration:none; font-size:12px; color:#666;}
    #CuerpoMensaje ul li a span { display: block; margin: 0 auto; width:57px; height: 58px; }
    li#Chome span { background: url("imagenes/browser-chrome.jpg") no-repeat 0 0; }
    li#Firefox span { background: url("imagenes/browser-firefox.jpg") no-repeat 0 0;}
    li#Opera span { background: url("imagenes/browser-opera.jpg") no-repeat 0 0;}
  
/*IE 10 y menores */
html[data-useragent*='MSIE'] #Mensajes { display:block !important;}
html[data-useragent*='MSIE'] .SafeZone { display:none !important;}

/*IE 11 */
html[data-useragent*='rv:11.0'] #Mensajes { display:block !important;}
html[data-useragent*='rv:11.0'] .SafeZone { display:none !important;}

@media screen {
/*LOADER*/
/*se agrega clase off*/    
/*se anima el filete 0.5s*/    
/*se aplican animaciones de salida 2s*/
/*se oculta el loader general 0s*/
/*home*/  
     #Home #Loader {position:fixed; overflow:hidden; top:0; left:0; z-index:9999; width:100%; height:100%; display: flex; flex-wrap: wrap;
             -webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; }
             
     #Home #Loader { opacity: 1; visibility: visible;
                     -webkit-transition: opacity 0s linear 2.5s, visibility 0s linear 2.5s;
                     transition: opacity 0s linear 2.5s, visibility 0s linear 2.5s;}
     
         #LoaderIzq,
         #LoaderDer { position: relative; flex: 1; display: flex; align-items: center; background-color:#fff; border: 1px solid #fff;
                      -webkit-transition: -webkit-transform 2s ease-out 0.5s;
                      transition: transform 2s ease-out 0.5s;}

             #LoaderIzq span,
             #LoaderDer span { position: absolute; width: 300px; height: 100%; display: block; background-color: #f7f4f4;}

             #LoaderIzq img,
             #LoaderDer img {flex: 0 0 50px; width: 50px;
                             -webkit-animation: loader 2s ease-in-out infinite;
                             animation: loader 2s ease-in-out infinite;}


         #LoaderIzq { justify-content: flex-end;
                     -webkit-transform: translateX(1px) skewX(-30deg);
                     transform: translateX(1px) skewX(-30deg);}

             #LoaderIzq span { top: 0; left: -300px;}
             #LoaderIzq img {-webkit-transform: translateX(8px) skewX(30deg);
                             transform: translateX(8px) skewX(30deg);}

         #LoaderDer { justify-content: flex-start;
                      -webkit-transform: translateX(-1px) skewX(-30deg);
                      transform: translateX(-1px) skewX(-30deg);}  

            #LoaderDer span { top: 0; right: -300px;}
             #LoaderDer img {-webkit-transform: translateX(-8px) skewX(30deg);
                             transform: translateX(-8px) skewX(30deg);}

             #LoadBar { position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background-color: #80AE12;                    
                         -webkit-transform: scale(1,0);
                         transform: scale(1,0);
                         -webkit-transition: -webkit-transform 0.5s ease-in;
                         transition: transform 0.5s ease-in;}
                         
/*internas*/
.Interna #Loader {position:fixed; overflow:hidden; top:0; left:0; z-index:9999; width:100%; height:100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #fff;
             -webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; }
    
    #LoadLogo { flex: 0 0 100px; display: flex; align-items: flex-start;
                 -webkit-animation: loader 2s ease-in-out infinite;
                  animation: loader 2s ease-in-out infinite;}
            
        #LoadLogo > div { flex: 0 0 50px; display: block; height: 50px;} 
        #LoadLogo div:first-child { background: url("imagenes/v.svg") no-repeat 0 0; background-size: 100% auto;
                                    -webkit-transform: translateX(8px);
                                    transform: translateX(8px);}

        #LoadLogo div:last-child {  background: url("imagenes/a.svg") no-repeat 0 0; background-size: 100% auto;
                                    -webkit-transform: translateX(-8px);
                                    transform: translateX(-8px);}
    
/*main*/
#Home main { overflow: hidden;}

   #SlideGeneral { -webkit-transform: scale(1.2);
                    transform: scale(1.2);
                    -webkit-transition: -webkit-transform 1.3s ease-in-out;
                    transition: transform 1.3s ease-in-out;}
  
/*off*/
#Home.off main { overflow-x: auto;}

#Home.off #Loader,
.Interna.off #Loader { opacity: 0; visibility: hidden;}

.off #LoaderIzq {-webkit-transform: translateX(-250%) skewX(-30deg);
              transform: translateX(-250%) skewX(-30deg);}

.off #LoaderDer {-webkit-transform: translateX(250%) skewX(-30deg);
             transform: translateX(250%) skewX(-30deg);}

.off #LoadBar { -webkit-transform: scale(1,1);
              transform: scale(1,1);}

.off #SlideGeneral { -webkit-transform: scale(1);
                   transform:  scale(1);}

/*fix webp support*/
.fixedwebp {}
}

@-webkit-keyframes loader{
  0%   { filter: grayscale(100%);}  
  100% {filter: grayscale(0%);}
}

@keyframes loader{
  0%   { filter: grayscale(100%);}  
  100% {filter: grayscale(0%);}
}