.boton {
    margin: 5px; /*margen del boton*/
    display: block;/*los botones se mantienen en un bloque no chocan entre si*/
    text-decoration: none; /*para eliminar sobrayado*/
    padding: 0.5em 1em;
    float: right;
    margin-right: 5%;
    font-size: 1.4em;
    /*
    padding 2 valores
    padding: 0.5 1em
    0.5 arriba y abajo
    1em izquierda y derecha
    
    padding 4 valores
    paddong: 1em 2em 3em 4em;
    arriba derecha abajo izquierda
    */
    background-color: #fff; /*color de fondo*/
    color: black; /*color de texto*/
    border-bottom: 0.3em solid #d2d1d1; /*borde inferior*/
 
    /*Estilos CSS3*/
    border-radius: 0.3em; /*Darle Forma al Boton u Objeto*/
    box-shadow: 0px 0px 4px 0 #364891; ; /* x y blur spread color  -> para dar sombra*/
   /* text-shadow:1px -2px 0 #364891;*/ /*x y blue color*/
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
    /*propiedad, tiempo , funcion*/
 /* transform: rotate(180deg);/*sirve para girar la imagen*/
   /*  transform: rotate3d(300,200, 100, 45deg); /*sirve para girar la imagen*/
   /*  transform: scale(1); /*para aumentar el tamano del elemento*/
 /* transform: translateX(10px) translateY(40px) translateZ(50px);  /*mueve de x y y el elemento*/
   */
}

/*
:link -> estado natural
:hover -> mouse sobre el elemento
:active -> mientras el click esta activo
:visited -> cuando el enlace esta historial
*/

.boton:hover {
    background-color: #6780e6;
     border-bottom: 0.3em solid #364891; 
    color: white;
 /*transform: rotate(360deg); para efecto de giro*/
}
.botona {
    margin: 5px; /*margen del boton*/
    display:block;/*los botones se mantienen en un bloque no chocan entre si*/
    text-decoration: none; /*para eliminar sobrayado*/
    padding: 0.5em 1em;
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 200px;
    text-align: center;
     margin-top: 40px;
    /*
    padding 2 valores
    padding: 0.5 1em
    0.5 arriba y abajo
    1em izquierda y derecha
    
    padding 4 valores
    paddong: 1em 2em 3em 4em;
    arriba derecha abajo izquierda
    */
    background-color: #006da8; /*color de fondo*/
    color: white; /*color de texto*/
    border-bottom: 0.3em solid #024e77; /*borde inferior*/
    
    /*Estilos CSS3*/
    border-radius: 0.3em; /*Darle Forma al Boton u Objeto*/
    box-shadow: 0px 0px 4px 0 #364891; ; /* x y blur spread color  -> para dar sombra*/
   /* text-shadow:1px -2px 0 #364891;*/ /*x y blue color*/
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
    /*propiedad, tiempo , funcion*/
 /* transform: rotate(180deg);/*sirve para girar la imagen*/
   /*  transform: rotate3d(300,200, 100, 45deg); /*sirve para girar la imagen*/
   /*  transform: scale(1); /*para aumentar el tamano del elemento*/
 /* transform: translateX(10px) translateY(40px) translateZ(50px);  /*mueve de x y y el elemento*/
   */
}

/*
:link -> estado natural
:hover -> mouse sobre el elemento
:active -> mientras el click esta activo
:visited -> cuando el enlace esta historial
*/

.botona:hover {
    background-color: #3389b7;
     border-bottom: 0.3em solid #364891; 
    color: white;
 /*transform: rotate(360deg); para efecto de giro*/
}

.boton:active {
    background-color: #9fade8;
    border-bottom: 0.3em solid transparent;
    position: relative;
    top: 0.1em;
}
/*.boton:visited {
    background-color: black;
   
}*/

.boton-img {
    background-image: url(img/botones.png);
    display: inline-block;/*para que la imagen soporte enlace*/
    width: 60px;
    height: 60px;
}
.boton-img:hover {
    /*background-position: x y para mover la imagen*/
   background-position: 0 60px;
}
/*oocss
clase base (.boton)
cambios necesario para el boton base

.boton.boton-extension {

}
*/

.boton.boton-verde {
    background-color: #1abc9c;
    border-bottom: 0.3em solid #199078;
}
.boton.boton-verde:hover {
    background-color: #37d3b4;
  
   
}
.boton.boton-rojo {
   float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color:  #f94646;
    border-bottom: 0.3em solid #a53a2f;
    color: white;
    text-align: center;
    display:block;
    width: 200px;
    text-align: center;
     margin-top: 40px;
}
.boton.boton-rojo:hover {
    background-color:  #f08479;
    
}
.boton.boton-naranja {
   float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background-color:  #ff9c2b;
    border-bottom: 0.3em solid #e27902;
    color: white;
    text-align: center;
    display:block;
    width: 200px;
    text-align: center;
     margin-top: 40px;
}
.boton.boton-naranja:hover {
    background-color:  #f6ac58;
    
}
.boton.boton-amarillo {
    float: none;
    margin-left: auto;
    margin-right: auto;
     margin-top: 20px;
    background-color:  #ff9d00;
    border-bottom: 0.3em solid #d9b41f;
    color: white;
    text-align: center;
    display:block;
     width: 200px;
    text-align: center;
    margin-top: 40px;
}
.boton.boton-amarillo:hover {
    background-color:  #fcd021;
    
}
.boton.boton-oscuro {
    background-color: #2c3e50;
    border-bottom: 0.3em solid #1c2936;
}
.boton.boton-oscuro:hover {
    background-color: #34495d;
}

/*tamano*/

.boton.boton-mini {
  font-size: 0.7em;
}
.boton.boton-medium {
  font-size: 1.2em;  
    
}
.boton.boton-large {
  font-size: 1.6em;  
    
}
.boton.boton-block {
    display: block;
   /* width: 100%;*/
    text-align: center;
}
.icono-80 { /*clase para aumentar tamano del icono*/
    font-size: 80px
}

/*CLASES PARA LOS ICONOS DENTRO DE LOS BOTONES*/
.boton.boton-con-icon {
   position: relative; 
    padding-left: 2.5em;
}
.boton.boton-con-icon .boton-inner-icon {
    position: absolute;
    top: 0.22em;
    left: 0.4em;
    font-size: 1.5em;
   /* color: black ; Se puede colocar color al icono por que es un fuente*/
}
.boton.boton-con-icon .boton-inner-icon:after {
    display: block;
    content: "";
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    height: 1.5em;
    position: absolute;
    top: -0.2em;
    right: -0.2em;
    
}
.boton.boton-con-icon .boton-inner-text {
    
}
.boton.boton-con-icon.boton-con-icon-right {
    padding-right: 2.7em;
    padding-left: 1em;
}
.boton.boton-con-icon.boton-con-icon-right .boton-inner-icon {
    right: 0.4em;
    left: auto;
}

.boton.boton-con-icon.boton-con-icon-right .boton-inner-icon:after {
 
    right: auto;
    left: -0.2em;  
}
@media only screen and (max-width: 840px) {
    
    .boton {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 250px;
        overflow: auto;
        margin-top: 15px;
    }
    
}