﻿.textos
{
	font-family: Tahoma;
	font-size: 11px; 
	color:#484848;
	text-decoration:"none";
    height: 21px;
}

input{
    padding: 3px 3px 3px 3px;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    transition: 0.2s ease-out;
    font-family: 'Open Sans', sans-serif;
    color: #999;
  }
  
 textarea{
    padding: 3px 3px 3px 3px;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    transition: 0.2s ease-out;
    font-family: 'Open Sans', sans-serif;
    color: #999;
  } 
  
 input[type=text]:focus, textarea:focus
	{
		background-color: #FFFFE0;
		border: 1px solid #ccc;
	}  
 select{
    padding: 3px 3px 3px 3px;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    transition: 0.2s ease-out;
    font-family: 'Open Sans', sans-serif;
    color: #999;
  }
 select:focus
	{
		background-color: #FFFFE0;
		border: 1px solid #ccc;
	}  
	
.rows
{
	background-color: #fff;
	min-height: 18px;
	border: 1px solid #D4D4D4;
	font-size: 10px; 
}
.rowsN
{
	border:1px solid #ffffff; 
		font-size: 10px; 
		padding: 3px;
}

.Grid th
	{
		color: #fff; 
		background-color: #bf0000;
	}
.Grid, .Grid th, .Grid td
	{
		border:1px solid #D4D4D4; 
		font-size: 10px; 
		padding: 3px;
	}

.GridHD th
	{
		color: #fff; 
		background-color: #444;
		height:23px;
	}

.Grid tr:hover {
    background-color: #eeeeee;
}

input[type="button"], input[type="submit"], button
	{

		padding : 3px 3px 3px 3px;
		border: 1px solid #D4D4D4;
		border-radius: 4px;
		transition: 0.2s ease-out;
		font-family: 'Open Sans', sans-serif;
		color:#6a6a6a;
		background-color:#f3f3f3;
}​

#btnDetalleCC
{
    border-radius: 10px;
    background-color: royalblue;
    border-color: royalblue;    
}    

.FixedHeader {
    position: absolute;
    font-weight: bold;
}     

.codigo_barras
{
	 font-family: Code39-Digits;
	 font-size:40px; 
}

.textos_lavado
{
	font-family: Calibri;
	font-size: 19px; 
	color:#000000;
	text-decoration:"none";
}

.textos_blancos
{
	font-family: Arial;
	font-size: 14px; 
	color:#FFFFFF;
	text-decoration:"none";
}

.textos_cajas
{
	font-size:11px;
	color:#6a6a6a;
    font-family:Arial;
    text-align:right;
}

.textos_impresion
{
	font-size:11px;
	color:#000000;
    font-family:Times New Roman;
}

.textovertical 
{
  background:#BF0000;
  vertical-align:text-top;
   vertical-align:top;
  writing-mode:tb-rl;
  

} 

.textos_dibujo
{
font-family: Tahoma;
font-size: 11px; 
color:#6a6a6a;
text-decoration:"none";
}

.tablas {
  font-family: Tahoma;
  color: #264752;
  /*font:Univers 57 Condensed;*/
  font-size:10px;
  text-transform:lowercase;
  
}

.cumpleanos {
  color: #264752;
  font:Univers 57 Condensed;
  font-size:11px;
  text-transform:lowercase
}

.titulos_intra
{
	font-size:11px;
    font-family:Univers 57 Condensed;
}

.textos_mayusculas
{
	font-size:11px;
	/*font-weight:bold;*/
	color:#6a6a6a;
    font-family:Tahoma;
    text-transform:uppercase;
}

#message
    {
        font-family: Arial,Helvetica,sans-serif;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 105;
        text-align: center;
        font-weight: bold;
        font-size: 100%;
        color: black;
        padding: 10px 0px 10px 0px;
        background-color: #EFEFEF;
    }
    #message span
    {
        text-align: center;
        width: 95%;
        float: left;
    }
    .close-notify
    {
        white-space: nowrap;
        float: right;
        margin-right: 10px;
        color: #black;
        text-decoration: none;
        border: 2px #black solid;
        padding-left: 3px;
        padding-right: 3px;
    }
    .close-notify a
    {
        color: #fff;
    }


.jquery-notify-bar {
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:32768;
  background-color:#efefef;
  font-size:18px;
  color:#000;
  text-align:center;
  font-family: Arial, Verdana, sans-serif;
  padding:20px 0px;
  border-bottom:1px solid #bbb;
  cursor: pointer;
}
.jquery-notify-bar.error {
  color:#f00;
  background-color:#fdd;
}
.jquery-notify-bar.success {
  color:#060;
  background-color:#BBFFB6;
}
.notify-bar-close {
  position:absolute;
  left:95%;
  font-size:11px;
}

.drp_pagina
{
font-family: Tahoma; 
font-size: 12px; 
color:#6a6a6a;
text-decoration:"none";
/*text-transform:lowercase*/
}

.titulos
{
font-family: Tahoma; 
font-size: 14px; 
color:#6a6a6a;
text-decoration:"none";
font-weight:bold
/*text-transform:lowercase*/
}

 .item
{
     background: url(../imagenes/item_bg.gif);
     height:129px;
     width:170px;
}  

.titulo_mas_grande
{
font-family: Tahoma; 
font-size: 18px; 
color:#000000;
text-decoration:"none";
font-weight:bold
/*text-transform:lowercase*/
}

.textos_imp
{
font-family: Tahoma; 
font-size: 11px; 
color:#000000;
text-decoration:"none";
/*text-transform:lowercase*/
}

.textos_clausula
{
	font-size:14px;
	/*font-weight:bold;*/
	color:#000000;
    font-family:Arial;
}



.innerpage3
{
font:normal 9px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
color:#6a6a6a;
background-color:inherit;
}

.innerpage2
{
font:normal 11px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
color:#6a6a6a;
background-color:inherit;
}


.textos_arial_2
{
	font-size:11px;
	/*font-weight:bold;*/
	color:#6a6a6a;
    font-family:Arial;
    text-transform:lowercase;
}

.textos_arial
{
	font-size:11px;
	/*font-weight:bold;*/
	color:#333;
    font-family:Arial;
}

.yui .ajax__calendar_container 
{
    background-color:#eeeeee;
    border:solid 1px #cccccc;
    font-family:tahoma;
    cursor:default;
    width:205px;
    font-size:11px;
    text-align:center;
    padding:0px;
   /* filter:alpha(opacity=50);
    opacity:0.5;*/
}

.yui .ajax__calendar_body 
{
    height:139px;
    width:205px;
    position:relative;
    overflow:hidden;
}

.yui .ajax__calendar_days, .yui .ajax__calendar_months, .yui .ajax__calendar_years 
{
    top:0px; 
    left:0px;
    height:139px;
    width:195px;    
    padding:5px;
    position:absolute;
    text-align:center;
}

.yui .ajax__calendar_days table
{
    border-spacing:0;
    border-collapse:collapse;
    font:100% tahoma;
    text-align:center;    
}

.yui .ajax__calendar_header 
{
    background:url(imagenes/sprite.png) repeat-x 0 0; 
    height:22px;
    width:100%;
    font-size:10pt;
    font-weight:bold;
    text-align:center;
    padding-top:3px;
}

.yui .ajax__calendar_prev 
{
    margin-top:2px;
    margin-left:4px;
    height:15px;
    width:25px;
    cursor:pointer;
    float:left;
    background:url(imagenes/sprite.png) 0px -450px no-repeat;
}

.yui .ajax__calendar_next 
{
    margin-top:2px;
    margin-right:4px;
    height:15px;
    width:25px;    
    cursor:pointer;
    float:right;
    background:url(imagenes/sprite.png) 0px -500px no-repeat;
}

.yui .ajax__calendar_title 
{
    cursor:pointer;
    font-weight:bold;
    text-align:center;
}

.yui .ajax__calendar_footer, .yui .ajax__calendar_today 
{
    display:none;
}

.yui .ajax__calendar_dayname 
{
    padding-left:3px;
    padding-right:3px;
    margin-bottom:5px;
    margin-left:2px;
    margin-right:2px;
    text-align:center;
    font-weight:700;
    font-size:10pt;
    color:#000;
    border-bottom:solid 1px #a6a6a6;
}

.yui .ajax__calendar_day, .yui .ajax__calendar_month, .yui .ajax__calendar_year
{
    padding:0px;
    color:#000;
    text-align:center;  
    padding:0pt 2px;
}

.yui .ajax__calendar_hover .ajax__calendar_day, .yui .ajax__calendar_hover .ajax__calendar_month, .yui .ajax__calendar_hover .ajax__calendar_year, .yui .ajax__calendar_hover .ajax__calendar_title
{
    color:#0066cc;
}

.yui .ajax__calendar_other .ajax__calendar_day, .yui .ajax__calendar_other .ajax__calendar_year
{
    color:#a6a6a6;   
}

.yui .ajax__calendar_active .ajax__calendar_day
{
    color:red;
    font-weight:bold;   
}


.avisos
  {
  font-weight:bold;
  font-size:50px;
  font-style:italic;
  }
  
.hdr { height:36px; background: transparent url("../imagenes/header_bg.png");padding-left:5px; color:#FFFFFF }

.ListSearchExtenderPrompt
    {
        font-style:italic;
        color:Red;
        background-color:white;
        height:25;
        font-size:14px;
        background-color:Black;
        color:White;
    }

.negrita
  {
  font-weight:bold;
  }
  
  .textoArial
  {
  font-family:Arial, Helvetica, sans-serif;   
  }
  .barra2
    {
     background: url(../imagenes/head_bg4.jpg) repeat-x 0px 0px;
    }
    
     .barra8
    {
     background: url(../imagenes/back_topbar.jpg) repeat-x 0px 0px;
    }
    
     .barra9
    {
     background: url(../imagenes/back_navbar.jpg) repeat-x 0px 0px;
    }
    
  .letracapital:first-letter {
    font-size: 200%;
    font-weight: bold;
    font-family: Tahoma; 
    font-size: 11px; 
    color:#ff0000;
    text-decoration:"none";
    text-transform:lowercase;
    }
  
    body {
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
	}

img {border: none;}
h1 {
	font-size: 1.2em;
	padding: 5px 10px;
	color: #ccc;
	width: 940px;
	margin: 0 auto;
}
h1 a {	color: #fff; }
h1 span {font-weight: normal;}

     #footpanel {
	position: fixed;
	bottom: 0; left: 0;
	z-index: 9999; /*--Keeps the panel on top of all other elements--*/
	background: #e3e2e2;
	border: 1px solid #c3c3c3;
	border-bottom: none;
	width: 94%;
	margin: 0 3%;
	/*filter:alpha(opacity=50);*/
}
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
	margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
	position: absolute;
	top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#footpanel ul {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	list-style: none;
	border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
	font-size: 1.1em;
}
#footpanel ul li{
	padding: 0; margin: 0;
	float: left;
}
#footpanel ul li a{
	padding: 5px;
	float: left;
	text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
	height: 16px; width: 16px;
	text-decoration: none;
	color: #333;
	position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
	background-color: #fff;
	height: 17px;
	margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
	border: 1px solid #555;
	border-top: none;
	z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
	position: relative;
}

#footpanel a.tienda{
	background: url(../imagenes/tienda.gif) no-repeat 15px center;
	width: 46px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.home{
	background: url(../imagenes/home.gif) no-repeat 15px center;
	width: 36px;
	padding-left: 36px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.cumple{
	background: url(../imagenes/cumple.gif) no-repeat 15px center;
	width: 60px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.indi{
	background: url(../imagenes/indi3.gif) no-repeat 10px center;
	width: 58px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.help{
	background: url(../imagenes/help.gif) no-repeat 15px center;
	width: 40px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.online{
	background: url(../imagenes/online.gif) no-repeat 15px center;
	width: 36px;
	padding-left: 36px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.audio{
	background: url(../imagenes/audio.gif) no-repeat 15px center;
	width: 40px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.bol{
	background: url(../imagenes/bol.gif) no-repeat 15px center;
	width: 40px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}

#footpanel a.video{
	background: url(../imagenes/video.gif) no-repeat 15px center;
	width: 40px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.portal{
	background: url(../imagenes/portal.gif) no-repeat 15px center;
	width: 88px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.portal_{
	background: url(../imagenes/portal.gif) no-repeat 15px center;
	width: 70px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.giros{
	background: url(../imagenes/giros.gif) no-repeat 15px center;
	width: 50px;
	padding-left: 40px;
	border-right: 1px solid #bbb;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}


a.indi_old{ background: url(../imagenes/indi.gif) no-repeat center center;  }

#footpanel a.chat{
	background: url(balloon.png) no-repeat 15px center;
	width: 126px;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	padding-left: 40px;
	text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  /*--Right align the chat and alert panels--*/
#footpanel a small {
	text-align: center;
	width: 70px;
	background: url(../imagenes/pop_arrow.gif) no-repeat center bottom;
	padding: 5px 5px 11px;
	display: none; /*--Hide by default--*/
	color: #fff;
	font-size: 1em;
	text-indent: 0;
 
}
#footpanel a:hover small{
	display: block; /*--Show on hover--*/
	position: absolute;
	top: -35px; /*--Position tooltip 35px above the list item--*/
	left: 50%;
	margin-left: -40px; /*--Center the tooltip--*/
	z-index: 9999;
}


/*******************************************************************************/
.boton
{ background-color:#7F8085;
  color:#EEEEEE;
  font-family:Tahoma;
  font-size: 11px; 
  border-style:solid;
  border-width:1px
 }
.barra
{
     background: url(../imagenes/barra3.jpg) repeat-x 0px 0px;
    }
.menu
{
    border-left: 1px dotted # 000;
    border-bottom: 1px dotted # 000;
    float: right;
    width: 250px;
    background-color: #FF99CC;
    margin: 0px 0px 20px 20px;
}
.textos_pequeños
{
font-family: Tahoma; 
font-size: 11px; 
color:#6a6a6a;
text-decoration:"none";
text-transform:lowercase
}
.panel
{
 scrollbar-face-color:#CCCCCC;
 scrollbar-arrow-color:#FFFFFF;
 scrollbar-track-color:#E8E8E8;
 scrollbar-shadow-color:'';
 scrollbar-highlight-color:'';
 scrollbar-3dlight-color:'';
 scrollbar-darkshadow-Color:'';
  
}

.textos_reportes
{
font-family: Tahoma; 
font-size: 10px; 
color:#6a6a6a;
/*text-transform:lowercase;*/
}
.minusculas
{
  text-transform:lowercase;
  font-size: 11px;  
 }
.titulo_grande
{
font-family: Tahoma; 
font-size: 12px; 
color:#6a6a6a;
text-decoration:"none";
font-weight:bold
/*text-transform:lowercase*/
}
.textoError
{   
font-family: Arial, Sans-Serif; 
background-color:#D4340C; 
color:White; 
border-color:White; 
padding:2px; 
font-size:11px
}
.textos_seleccionados
{
font-family: Tahoma; 
font-size: 11px; 
color:#FFFFFF;
text-decoration:"none";
/*text-transform:lowercase*/
}

.textos_barra
{
font-family: Tahoma; 
font-size: 11px; 
color:#6a6a6a;
text-decoration:"none";
/*text-transform:lowercase*/
}
.titulos
{
font-family: Tahoma; 
font-size: 14px; 
color:#6a6a6a;
text-decoration:"none";
font-weight:bold
/*text-transform:lowercase*/
}

.separacion
{
   padding:5px;   
 }
 
 .titulos_grilla
{
    background: url(../imagenes/barra3_foo.jpg);
    border-color: #e0e0e0 #e0e0e0 #e0e0e0 #e0e0e0;
    border-style: solid solid  solid  solid;
    border-width: 1px 1px 1px 1px;
    color: #000;
    padding: 4px 5px 4px 10px;
    vertical-align: bottom;
    font-size: 20px;
    font-family: Univers 57 Condensed; 
    font-size: 11px; 
    color:#E8E8E8;
    vertical-align:middle;
    text-align:center;
} 
 
.titulos_menu
{
    background: url(../imagenes/sprite.png) repeat-x 0px 0px;
    border-color: #e0e0e0 #e0e0e0 #e0e0e0 #e0e0e0;
    border-style: solid solid  solid  solid;
    border-width: 1px 1px 1px 1px;
    color: #000;
    padding: 4px 5px 4px 10px;
    vertical-align: bottom;
    text-align:left;
    font-size: 20px;
    font-family: Univers 57 Condensed; 
    font-size: 11px; 
    color:#6a6a6a;
    vertical-align:middle;
} 


/* Accordion */
.accordionHeader
{
/*background: url(../imagenes/barra.jpg) repeat-x 0px 0px;*/
background-color: #EEEEEE;

border: 1px solid #CCCCCC;
color:#6a6a6a;
font-family: Tahoma;
font-size: 11px;
padding: 4px;
margin-top: 5px;
cursor: pointer;
height:24px;
/* text-transform:uppercase;*/
}

.accordionHeaderSelected
{
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
color: #BF0000;
font-family: Tahoma;
font-size: 11px;
padding: 5px;
margin-top: 5px;
cursor: pointer;
/*text-transform:uppercase;*/
} 

#master_content .accordionHeader a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeader a:hover
{
      background: none;
      text-decoration: underline;
}

#master_content .accordionHeaderSelected a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionContent
{
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
    font: 11px Tahoma;
    font-size: 11px;
    color:#6a6a6a;
}

.modalpopup
{
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
}
    .modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
} 

.CajaDialogo

{
   background-color:#EFEFEF;
   border-width: 1px;
   border-style: outset;
   border-color: #CCCCCC;
   padding: 2px;
   width: 500px;
   font-family: Tahoma; 
   font-size: 11px; 
}

.FondoAplicacion
{
background-color:Black;
filter:alpha(opacity=50);
opacity:0.5;
}

.ImageCategoriesNavBar
{
  padding: 3px; 
}

.Item
{
  color: #666666;   
  font-family: verdana; 
  font-size: 12px; 
  border: solid 1px #f3f3f3; 
  cursor: pointer;
}

.ItemHover
{
  background-color: #E3E3E3; 
  color: #666666; 
  font-family: verdana; 
  font-size: 12px; 
  border: solid 1px white; 
  border-right-color: #CCCCCC; 
  border-bottom-color: #CCCCCC; 
  cursor:pointer;
}

.ItemSelected
{
  background-color: #E3E3E3; 
  color: #666666; 
  font-family: verdana; 
  font-size: 12px; 
  border: solid 1px white; 
  border-left-color: #CCCCCC; 
  border-top-color: #CCCCCC; 
  cursor: default;
}


/*tabs*/
.Thumbnail
{
  border: 1px solid #DDDDDD;
  cursor: pointer;
}

.ThumbnailHover
{
  border: 1px solid #AAAAAA;
  cursor: pointer;
}

.ThumbnailSelected
{
  border: 1px solid #DD3409;
  cursor: pointer;
}

.ScrollItem
{
  color:black;
  border: 1px solid #919B9C;
  font-family:MS Sans Serif, Verdana;
  font-size:10px;
  cursor:pointer;
  height:71px;
}

.ScrollItemHover
{
  color:black;
  border: 1px solid #919B9C;
  background-color: #E3E3E3;
  font-family:MS Sans Serif, Verdana;
  font-size:10px;
  cursor:pointer;
  height:71px;
}

.ScrollItemActive
{
  color:black;
  background-color: #E3E3E3;
  border: 1px solid #DD3409;
  font-family:MS Sans Serif, Verdana;
  font-size:10px;
  cursor:pointer;
  height:71px;
}


fieldset {
	color: #6a6a6a;
	background-color: #f3f3f3;
	padding: 2px;
	border: solid 1px #d3d3d3;
	width: 98%;
	}
legend {
	color: #fff;
	font-weight: bold;
	font-size:11px;
	background-color: #BF0000;
	padding: 2px 6px;
	margin-bottom: 12px;
	border: solid 1px #d3d3d3;
}

grvRV tr.rowHover:hover

   {
       background-color: Yellow;
       font-family: Arial;
   }
/* SCROLL */
   ::-webkit-scrollbar {
     width: 7px;
     height: 7px;
   }

   ::-webkit-scrollbar-track {
     background: #e6e6e6;
     /* border-radius: 10px; */
   }
   ::-webkit-scrollbar-thumb {
   background: #D4001B;
   border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb:HOVER {
   background: #D4001B;
   }
   
   
.preloader {
  width: 20px;
  height: 20px;
  border: 10px solid #eee;
  border-top: 10px solid #666;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}  

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 