/***************************************************************************************
    Solo para mòvil */
    .wk-mobile {
    display: none;
    }

/***************************************************************************************
Solo para desktop */
    .wk-desktop {
    display: inherit;
    }

/***************************************************************************************
fix */

.wk-block-item {
    display: block;
}

.wk-inline-item {
    display: inline;
}

.wk-inline-block-item {
    display: inline-block;
}
/***************************************************************************************
.wk-cols - Contenedor con columnas
           Por default todas las columnas dentro de este contenedor
           mantienen la misma proporción, a menos que se especifique otra.

    .wk-m-cols - Evita que las columnas se apilen en móvil.
                
.wk-rows - Contenedor con filas

    .wk-col - Una columna
    .wk-row - una fila

Proporción de columnas

    .wk-cols-1-2 - Contenedor con 2 columnas en proporción de 1:2
    .wk-cols-2-2 - Contenedor con 2 columnas en proporción de 2:1

    .wk-cols-1-3 - Contenedor con 2 columnas en proporción de 1:3
    .wk-cols-3-1 - Contenedor con 2 columnas en proporción de 3:1

    .wk-cols-1-3 - Contenedor con 2 columnas en proporción de 1:3
    .wk-cols-3-1 - Contenedor con 2 columnas en proporción de 3:1

    .wk-mobile - shows only on mobile
    .wk-desktop - shows only on desktop

iexplorer 9 - no-flexbox
edge - flexbox
w safari 5 - no-flexbox
firefox - flexbox
chrome - flexbox



*/

/* No flexbox Crappy ie9 safari 5*/
.no-flexbox .wk-cols, .no-flexbox .wk-rows { width: 100%; }
.no-flexbox .wk-cols > * { float: left; width: 50%; } 
.no-flexbox .wk-cols > .wk-cols { width: 100%; }
.wk-cols-1-1-1 .wk-col { width: 33.33%; }  
.wk-cols-1-2 .wk-col:first-child { width: 33.33%; }
.wk-cols-1-2 .wk-col:last-child { width: 66.6%; }
.wk-cols-2-1 .wk-col:first-child { width: 66.6%; }
.wk-cols-2-1 .wk-col:last-child { width: 33.33%; }



.wk-cols {  display: -webkit-box;  display: -ms-flexbox;  display: flex; clear: both;  }  
.wk-rows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; clear: both; }  

.wk-col { box-sizing: border-box; }
.wk-row { width: 100%; box-sizing: border-box; /*display: block;*/ }

@media all and (max-width: 756px) {
      .wk-cols:not(.wk-m-cols) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 

      /* Aplica flex también en móbiles */
      .wk-m-cols > *, .wk-rows > * { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
      
      .wk-cols-1-1-1 .wk-col { width: 100%; }  
      .wk-cols-1-2 .wk-col:first-child { width: 100%; }
      .wk-cols-1-2 .wk-col:last-child { width: 100%; }
      .wk-cols-2-1 .wk-col:first-child { width: 100%; }
      .wk-cols-2-1 .wk-col:last-child { width: 100%; }
      

      .wk-mobile { display: inherit; } 
      .wk-desktop { display: none !important; } 

      .no-flexbox .wk-col { width: 100% !important; } 
}

@media all and ( min-width: 757px ) {    
    /* Col */
    .wk-cols > *, .wk-rows > * { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

    /* 1-2 / 3*/
    .wk-cols-2-1 > .wk-col:nth-child(1) { -webkit-box-flex: 33.33%; -ms-flex: 33.33%; flex: 33.33%; } 
    .wk-cols-1-2 > .wk-col:nth-child(2) { -webkit-box-flex: 33.33%; -ms-flex: 33.33%; flex: 33.33%; } 

    /* 1-1-1-1 / 4 */
    .wk-cols-3-1 > .wk-col:nth-child(1) { -webkit-box-flex: 50%; -ms-flex: 50%; flex: 50%; } 
    .wk-cols-1-3 > .wk-col:nth-child(2) { -webkit-box-flex: 50%; -ms-flex: 50%; flex: 50%; } 
}

/***************************************************************************************
FLEX ITEMS */

      .no-flexbox .wk-flex-item {display: none;}
      .wk-flex-item { display: -webkit-box; display: -ms-flexbox; display: flex; } 
      /* Flex direction */
        .wk-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 
            .wk-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 
        .wk-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 
            .wk-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row-reveser; flex-direction: row-reveser; } 
      /* Flex align */
        .wk-flex-justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
            .wk-flex-justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
            .wk-flex-justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 
            .wk-flex-justify-around { -ms-flex-pack: distribute; justify-content: space-around; } 
            .wk-flex-justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 
            .wk-flex-justify-initial { -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; } 
        .wk-flex-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
            .wk-flex-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 
            .wk-flex-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 
            .wk-flex-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 
            .wk-flex-align-strech { -webkit-box-align: strech; -ms-flex-align: strech; align-items: strech; } 
            .wk-flex-align-initial { -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; } 
      /* Flex wrap */
        .wk-flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } 
            .wk-flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 
            .wk-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 
            .wk-flex-wrap-initial { -ms-flex-wrap: initial; flex-wrap: initial; }
      /* Flex length */
        .wk-flex-length-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } 
        .wk-flex-length-1-auto { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; } 

/**************************************************************************************
FLEXX ITEMS Móvil */


      @media all and (max-width: 756px) {
      
              .wk-m-flex-item { display: -webkit-box; display: -ms-flexbox; display: flex; } 
              /* Flex direction */
                  .wk-m-flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 
                      .wk-m-flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 
                  .wk-m-flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 
                      .wk-m-flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row-reveser; flex-direction: row-reveser; } 
              /* Flex align */
                  .wk-m-flex-justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
                      .wk-m-flex-justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
                      .wk-m-flex-justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } 
                      .wk-m-flex-justify-around { -ms-flex-pack: distribute; justify-content: space-around; } 
                      .wk-m-flex-justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 
                      .wk-m-flex-justify-initial { -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; } 
                  .wk-m-flex-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
                      .wk-m-flex-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } 
                      .wk-m-flex-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } 
                      .wk-m-flex-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } 
                      .wk-m-flex-align-strech { -webkit-box-align: strech; -ms-flex-align: strech; align-items: strech; } 
                      .wk-m-flex-align-initial { -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; } 
              /* Flex wrap */
                  .wk-m-flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } 
                      .wk-m-flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } 
                      .wk-m-flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } 
                      .wk-m-flex-wrap-initial { -ms-flex-wrap: initial; flex-wrap: initial; }
              /* Flex length */
                  .wk-m-flex-length-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } 
                  .wk-m-flex-length-1-auto { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; } 
            
      }

/**************************************************************************************
Text align */

      .wk-text-right {
      text-align: right;
      }

      .wk-text-left {
      text-align: left;
      }

      .wk-text-center {
      text-align: center;
      }



/**************************************************************************************
Sidebar*/

      @media all and (min-width: 757px) {
            
            .wk-sidebar {
            max-width: 256px;
            }
      }

/**************************************************************************************
Imágenes */
      
      .wk-img-responsive {
      width: 100%;
      height: auto;
      }

/***************************************************************************************
Botones */
    button, input[type="submit"], .wk-button, .wk-button-o {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        text-decoration: inherit;
        padding: 6px 12px;
        margin: 12px 6px;
        background-color: gainsboro;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
        border: 0;
        border-radius: 3px;
        cursor: pointer;
        -webkit-transition: all .25s linear;
        transition: all .25s linear;
    }
    
         input[type="submit"].wk-button-o,
        .wk-button-o {
            background-color: initial;
            border: 1px solid gainsboro;
            box-shadow: initial;
        }

    button:hover, 
    input[type="submit"]:hover,
    .wk-button:hover,
    .wk-button-o:hover {
        color: white;
        background-color: dodgerblue;
    }
    
        input[type="submit"].wk-button-o:hover,
        .wk-button-o:hover {
            color: inherit;
            background-color: initial;
            border: 1px solid gray;
            box-shadow: initial;
        }

            button .icon, 
            input[type="submit"] .icon, 
            .wk-button .icon, 
            .wk-button-o .icon, 
            .button .icon {
            font-size: 12px; 
            line-height: 2;
            opacity: .5;
            }

/***************************************************************************************
Inputs */

        input[type="text"],
        input[type="text"],
        input[type="number"],
        input[type="password"] {
            height: 24px;
        }
        input[type="text"],
        input[type="number"],
        input[type="password"],
        textarea {
            padding: 0px 6px;
            margin: 12px 0;
            border-color: gainsboro;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px;
        }

      textarea {
      display: block;
      }

/**********************************/
.wk-checkbox,
.wk-radio {
    display: none;
}

.wk-checkbox-label,
.wk-radio-label {
    background-color: transparent;
    border-color: gainsboro;
    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 0px 2px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-transition: .25s linear;
    transition: .25s linear;
}

.wk-checkbox-label {
    width: 32px;
    height: 16px;    
}

.wk-radio-label {
    width: 14px;
    height: 16px;    
}

.wk-checkbox + label i,
.wk-radio + label i {
    background-color: #adadad;
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 12px;
    -webkit-transition: .25s linear;
    transition: .25s linear;
}

.wk-checkbox:checked + label i,
.wk-radio:checked + label i {
    background-color: dodgerblue;
    width: 14px;
    height: 14px;
}

.wk-checkbox:checked + label i {
    -webkit-transform: translateX(18px);
            transform: translateX(18px);
}

/***************************************************************************************
Tabs */
.tab-content-top,
.tab-content-bottom,
.tab-content-right,
.tab-content-left {
      clear: both;
}
      /* Left align*/
    .tab-content-left .wk-tabs {
    float: left;
    width: 120px;
    }

    .tab-content-left .wk-tabgroup {
    float: right;
    width: calc(100% - 120px);
    }

  /* Right align*/
    .tab-content-right .wk-tabs {
    float: right;
    width: 120px;
    }

    .tab-content-right .wk-tabgroup {
    float: left;
    width: calc(100% - 120px);
    }

  /* Top align */
    .tab-content-top .wk-tabs li {
    display: inline-block;
    }

      .wk-tabs {
  margin: 0;
  background: #ddd;
  }

  .wk-tabgroup {
  min-height: 300px;
  }

  .wk-tabs li {
  margin: 0;
  }

  .wk-tabs li a {
  display: block;
  padding: 12px;
  color: #888;
  text-decoration: none;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
  }

  .wk-tabs li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .wk-tabs li a.active {
  background: white;
  }

  .wk-tabs li a:focus {
  box-shadow: none;
  }