/*********** - FONTS - ***********/
/* Fuentes primarias  */
@font-face {
    font-family: "LabGrotesque-400";
    src: url(../fonts/LabGrotesque/LabGrotesque-Bold.ttf);
}

@font-face {
    font-family: "LabGrotesque-300";
    src: url(../fonts/LabGrotesque/LabGrotesque-Medium.ttf);
}

@font-face {
    font-family: "LabGrotesque-200";
    src: url(../fonts/LabGrotesque/LabGrotesque-Regular.ttf);
}

@font-face {
    font-family: "LabGrotesque-100";
    src: url(../fonts/LabGrotesque/LabGrotesque-Light.ttf);
}

/* Fuentes secundarias */
@font-face {
    font-family: "LabGrotesque-italic-400";
    src: url(../fonts/LabGrotesque/LabGrotesque-BoldItalic.ttf);
}

@font-face {
    font-family: "LabGrotesque-italic-300";
    src: url(../fonts/LabGrotesque/LabGrotesque-MediumItalic.ttf);
}

@font-face {
    font-family: "LabGrotesque-italic-200";
    src: url(../fonts/LabGrotesque/LabGrotesque-Italic.ttf);
}

@font-face {
    font-family: "LabGrotesque-italic-100";
    src: url(../fonts/LabGrotesque/LabGrotesque-LightItalic.ttf);
}

/*********** - STYLE RESETS - ***********/
html, *{
    padding: 0;
    margin: 0;
}

body {
    background: #fff;
}

div, section, article, aside, header, footer,
h1, h2, h3, h4, h5, h6, p, b, span,
a, button, input, textarea{
    font-family: "LabGrotesque-100";
}

button{
    outline: none !important;
    border: none;
    cursor: pointer;
}

/*********** START / COMPONENTES TEMPLETE - ***********/
/* Componente input, select, textarea v.1 */
.tmp-form-group {
    position: relative;
    padding: 30px 0 0;
}

.tmp-form-control {
    background: #f9f9f9;
    border: none;
    padding: 8px 14px 8px;
    border-radius: 5px;
    width: 100%;
    font-size: 15px;
    outline: none;
    resize: none;
    transition: .25s all ease;
}

.tmp-form-control:focus {
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .06);
}

/* Componente input, select, textarea v.2 */
.tmp-form-control-b {
    background: #fff;
    border: 2px solid #f1f1f1;
    padding: 8px 14px 8px;
    border-radius: 5px;
    width: 100%;
    font-size: 15px;
    outline: none;
    resize: none;
    transition: .25s all ease;
}

.tmp-form-control-b:focus {
    background: #fff;
    border: 2px solid #5461ff;
}

.tmp-title-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: .25s all ease;
}

.tmp-form-control:focus ~ .tmp-title-control,
.tmp-form-control-b:focus ~ .tmp-title-control {
    color: #5461ff;
}

/* Componente table */
.tmp-responsive-table {
    width: 100%;
    overflow-x: auto;
}

.tmp-table, 
.tmp-table th, 
.tmp-table td {
    border: 1px solid #ececec;
    text-align: center;
}

.tmp-table {
    width: 100%;
}

.tmp-table th{
    padding: 15px 10px 15px;
    border: none;
}

.tmp-table td {
    padding: 10px;
}


/*********** END / COMPONENTES TEMPLETE - ***********/

/*********** START / HELP CLASSES - ***********/
/* Width / Porcents */
.tmp-w-auto{
    width: auto;
}

.tmp-w-5{
    width: 5%;
}

.tmp-w-10{
    width: 10%;
}
.tmp-w-15{
    width: 15%;
}
.tmp-w-20{
    width: 20%;
}
.tmp-w-25{
    width: 25%;
}
.tmp-w-30{
    width: 30%;
}

.tmp-w-35{
    width: 35%;
}
.tmp-w-40{
    width: 40%;
}

.tmp-w-45{
    width: 45%;
}

.tmp-w-50{
    width: 50%;
}
.tmp-w-55{
    width: 55%;
}
.tmp-w-60{
    width: 60%;
}
.tmp-w-65{
    width: 65%;
}

.tmp-w-70{
    width: 70%;
}
.tmp-w-75{
    width: 75%;
}
.tmp-w-80{
    width: 80%;
}
.tmp-w-85{
    width: 85%;
}
.tmp-w-90{
    width: 90%;
}
.tmp-w-95{
    width: 95%;
}

.tmp-w-100{
    width: 100%;
}

/* Width / Pexels */
.tmp-w-50p {
    width: 50px;
}

.tmp-w-100p{
    width: 100px;
}
.tmp-w-150p {
    width: 150px;
}
.tmp-w-200p {
    width: 200px;
}

.tmp-w-300p {
    width: 300px;
}

.tmp-w-400p {
    width: 400px;
}

.tmp-w-500p {
    width: 500px;
}

.tmp-w-600p {
    width: 600px;
}

.tmp-w-700p {
    width: 700px;
}

.tmp-w-800p {
    width: 800px;
}

.tmp-w-900p {
    width: 900px;
}

.tmp-w-1000p{
    width: 1000px;
}

/* Height */
.tmp-h-100 {
    height: 100%;
}

/* Z-Index */
.tmp-z-index-0 {
    z-index: 0;
}

.tmp-z-index-1{
    z-index: 1;
}

.tmp-z-index-2 {
    z-index: 2;
}

.tmp-z-index-3 {
    z-index: 3;
}


.tmp-z-index-4 {
    z-index: 4;
}

.tmp-z-index-5 {
    z-index: 5;
}

.tmp-z-index-10 {
    z-index: 10;
}

.tmp-z-index-20 {
    z-index: 20;
}

.tmp-z-index-30 {
    z-index: 30;
}

.tmp-z-index-40 {
    z-index: 40;
}

.tmp-z-index-50 {
    z-index: 50;
}

/* Positions */
.tmp-p-relative{
    position: relative;
}

.tmp-p-absolute {
    position: absolute;
}

.tmp-p-fixed {
    position: fixed;
}

/* Top */
.tmp-top-auto {
    top: auto;
}

.tmp-top-0 {
    top: 0px;
}

.tmp-top-5 {
    top: 5px;
}

.tmp-top-10 {
    top: 10px;
}

.tmp-top-15 {
    top: 15px;
}

.tmp-top-20 {
    top: 20px;
}

.tmp-top-25 {
    top: 25px;
}

/* Bottom */
.tmp-bottom-auto {
    bottom: auto;
}

.tmp-bottom-0 {
    bottom: 0px;
}

.tmp-bottom-5 {
    bottom: 5px;
}

.tmp-bottom-10 {
    bottom: 10px;
}

.tmp-bottom-15 {
    bottom: 15px;
}

.tmp-bottom-20 {
    bottom: 20px;
}

.tmp-bottom-25 {
    bottom: 25px;
}

/* Left */
.tmp-left-auto {
    left: auto;
}

.tmp-left-0 {
    left: 0px;
}

.tmp-left-5 {
    left: 5px;
}

.tmp-left-10 {
    left: 10px;
}

.tmp-left-15 {
    left: 15px;
}

.tmp-left-20 {
    left: 20px;
}

.tmp-left-25 {
    left: 25px;
}

/* Right */
.tmp-right-auto {
    right: auto;
}

.tmp-right-0 {
    right: 0;
}

.tmp-right-5 {
    right: 5px;
}

.tmp-right-10 {
    right: 10px;
}

.tmp-right-15 {
    right: 15px;
}

.tmp-right-20 {
    right: 20px;
}

.tmp-right-25 {
    right: 25px;
}

/* Backgrounds */
.tmp-bg-transparent {
    background: transparent;
}

.tmp-bg-white {
    background: #fff;
}

.tmp-bg-dark-black{
    background: #222;
}

.tmp-bg-light-black {
    background: #676767;
}

.tmp-bg-dark-silver {
    background: #989898;
}

.tmp-bg-light-silver {
    background: #f9f9f9;
}

.tmp-bg-dark-red {
    background: #ef4d4d;
}

.tmp-bg-light-red {
    background: #ffdcdc;
}

.tmp-bg-dark-green {
    background: #08d274;
}

.tmp-bg-light-green {
    background: #deffdb;
}

.tmp-bg-dark-blue-navy {
    background: #6677ff;
}

.tmp-bg-light-blue-navy {
    background: #e5e7ff;
}

.tmp-bg-dark-orange{
    background: #ffc150;
}

.tmp-bg-light-orange{
    background: #fff6e7;
}

.tmp-bg-dark-yellow{
    background: #fff70c
}

.tmp-bg-light-yellow{
    background: #fffdba;
}

/* Box-Shadow */
.tmp-b-shadow-none {
    box-shadow: none;
}

.tmp-b-shadow-5 {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-10 {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-15 {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-20 {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-25 {
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-30 {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-35 {
    box-shadow: 0 0 35px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-40 {
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-45 {
    box-shadow: 0 0 45px 0 rgba(0, 0, 0, .075);
}

.tmp-b-shadow-50 {
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .075);
}

/* Paddings */
.tmp-padding-0 {
    padding: 0;
}

.tmp-padding-3 {
    padding: 3px;
}

.tmp-padding-5{
    padding: 5px;
}

.tmp-padding-10 {
    padding: 10px;
}

.tmp-padding-15 {
    padding: 15px;
}

.tmp-padding-20 {
    padding: 20px;
}

.tmp-padding-25 {
    padding: 25px;
}

.tmp-padding-30 {
    padding: 30px;
}

.tmp-padding-35 {
    padding: 35px;
}

.tmp-padding-40 {
    padding: 40px;
}

.tmp-padding-45 {
    padding: 45px;
}

.tmp-padding-50 {
    padding: 50px;
}

/* Paddings / Top */
.tmp-padding-t-0 {
    padding-top: 0;
}

.tmp-padding-t-5 {
    padding-top: 5px;
}

.tmp-padding-t-10 {
    padding-top: 10px;
}

.tmp-padding-t-15 {
    padding-top: 15px;
}

.tmp-padding-t-20 {
    padding-top: 20px;
}

/* Paddings / Bottom */
.tmp-padding-b-0 {
    padding-bottom: 0;
}

.tmp-padding-b-5 {
    padding-bottom: 5px;
}

.tmp-padding-b-10 {
    padding-bottom: 10px;
}

.tmp-padding-b-15 {
    padding-bottom: 15px;
}

.tmp-padding-b-20 {
    padding-bottom: 20px;
}

/* Paddings / Left */
.tmp-padding-l-0{
    padding-left: 0;
}

.tmp-padding-l-5 {
    padding-left: 5px;
}

.tmp-padding-l-10 {
    padding-left: 10px;
}

.tmp-padding-l-15 {
    padding-left: 15px;
}

.tmp-padding-l-20 {
    padding-left: 20px;
}


/* Paddings / Right */
.tmp-padding-r-0 {
    padding-right: 0;
}

.tmp-padding-r-5 {
    padding-right: 5px;
}

.tmp-padding-r-10 {
    padding-right: 10px;
}

.tmp-padding-r-15 {
    padding-right: 15px;
}

.tmp-padding-r-20 {
    padding-right: 20px;
}

/* Margins */
.tmp-margin-0-auto{
    margin: 0 auto;
}

.tmp-margin-0 {
    margin: 0;
}

.tmp-margin-t-5 {
    margin-top: 5px;
}

.tmp-margin-t-10 {
    margin-top: 10px;
}

.tmp-margin-t-15 {
    margin-top: 15px;
}

.tmp-margin-t-20 {
    margin-top: 20px;
}

.tmp-margin-t-25 {
    margin-top: 25px;
}

.tmp-margin-t-30 {
    margin-top: 30px;
}

.tmp-margin-t-35 {
    margin-top: 35px;
}

.tmp-margin-t-40 {
    margin-top: 40px;
}

.tmp-margin-t-45 {
    margin-top: 45px;
}

.tmp-margin-t-50 {
    margin-top: 50px;
}

.tmp-margin-t-55 {
    margin-top: 55px;
}

.tmp-margin-t-60 {
    margin-top: 60px;
}

.tmp-margin-t-65 {
    margin-top: 50px;
}

.tmp-margin-t-70 {
    margin-top: 70px;
}

.tmp-margin-t-75 {
    margin-top: 75px;
}

.tmp-margin-t-80 {
    margin-top: 80px;
}

.tmp-margin-b-5 {
    margin-bottom: 5px;
}

.tmp-margin-b-10 {
    margin-bottom: 10px;
}

.tmp-margin-b-15 {
    margin-bottom: 15px;
}

.tmp-margin-b-20 {
    margin-bottom: 20px;
}

.tmp-margin-b-25 {
    margin-bottom: 25px;
}

.tmp-margin-b-30 {
    margin-bottom: 30px;
}

.tmp-margin-b-35 {
    margin-bottom: 35px;
}

.tmp-margin-b-40 {
    margin-bottom: 40px;
}

.tmp-margin-b-45 {
    margin-bottom: 45px;
}

.tmp-margin-b-50 {
    margin-bottom: 50px;
}

.tmp-margin-l-5 {
    margin-left: 5px;
}

.tmp-margin-l-10 {
    margin-left: 10px;
}

.tmp-margin-l-15 {
    margin-left: 15px;
}

.tmp-margin-l-20 {
    margin-left: 20px;
}

.tmp-margin-l-25 {
    margin-left: 25px;
}

.tmp-margin-l-30 {
    margin-left: 30px;
}

.tmp-margin-l-35 {
    margin-left: 35px;
}

.tmp-margin-l-40 {
    margin-left: 40px;
}

.tmp-margin-l-45 {
    margin-left: 45px;
}

.tmp-margin-l-50 {
    margin-left: 50px;
}

.tmp-margin-r-5 {
    margin-right: 5px;
}

.tmp-margin-r-10 {
    margin-right: 10px;
}

.tmp-margin-r-15 {
    margin-right: 15px;
}

.tmp-margin-r-20 {
    margin-right: 20px;
}

.tmp-margin-r-25 {
    margin-right: 25px;
}

.tmp-margin-r-30 {
    margin-right: 30px;
}

.tmp-margin-r-35 {
    margin-right: 35px;
}

.tmp-margin-r-40 {
    margin-right: 40px;
}

.tmp-margin-r-45 {
    margin-right: 45px;
}

.tmp-margin-r-50 {
    margin-right: 50px;
}

/* Border / Top - Button - Left - Right */
.tmp-b-none {
    border: none;
}

.tmp-b-top-1 {
    border-top: 1px solid silver;
}

.tmp-b-top-2 {
    border-top: 2px solid silver;
}

.tmp-b-top-3 {
    border-top: 3px solid silver;
}

.tmp-b-top-4 {
    border-top: 4px solid silver;
}

.tmp-b-top-5 {
    border-top: 5px solid silver;
}

.tmp-b-bottom-1 {
    border-bottom: 1px solid silver;
}

.tmp-b-bottom-2 {
    border-bottom: 2px solid silver;
}

.tmp-b-bottom-3 {
    border-bottom: 3px solid silver;
}

.tmp-b-bottom-4 {
    border-bottom: 4px solid silver;
}

.tmp-b-bottom-5 {
    border-bottom: 5px solid silver;
}

.tmp-b-left-1 {
    border-left: 1px solid silver;
}

.tmp-b-left-2 {
    border-left: 2px solid silver;
}

.tmp-b-left-3 {
    border-left: 3px solid silver;
}

.tmp-b-left-4 {
    border-left: 4px solid silver;
}

.tmp-b-left-5 {
    border-left: 5px solid silver;
}

.tmp-b-right-1 {
    border-right: 1px solid silver;
}

.tmp-b-right-2 {
    border-right: 2px solid silver;
}

.tmp-b-right-3 {
    border-right: 3px solid silver;
}

.tmp-b-right-4 {
    border-right: 4px solid silver;
}

.tmp-b-right-5 {
    border-right: 5px solid silver;
}

/* Border / Colors */
.tmp-b-color-transparent{
    border-color: transparent;
}

.tmp-b-color-black {
    border-color: #222;
}

.tmp-b-color-white {
    border-color: #fff;
}

.tmp-b-color-dark-silver {
    border-color: #989898;
}

.tmp-b-color-light-silver {
    border-color: #eee;
}

.tmp-b-color-dark-blue-navy {
    border-color: #6677ff;
}

.tmp-b-color-light-blue-navy {
    border-color: #e5e7ff;
}

.tmp-b-color-dark-orange{
    border-color: #ffc150;
}

.tmp-b-color-light-orange{
    border-color: #fff6e7;
}

.tmp-b-color-dark-yellow{
    border-color: #fff70c
}

.tmp-b-color-light-yellow{
    border-color: #fffdba;
}


/* Border / Radius */
.tmp-b-radius-0 {
    border-radius: 0px;
}

.tmp-b-radius-3 {
    border-radius: 3px;
}

.tmp-b-radius-5 {
    border-radius: 5px;
}

.tmp-b-radius-10 {
    border-radius: 10px;
}

.tmp-b-radius-15 {
    border-radius: 15px;
}

.tmp-b-radius-20 {
    border-radius: 20px;
}

.tmp-b-radius-25 {
    border-radius: 25px;
}

.tmp-b-radius-50 {
    border-radius: 50px;
}

.tmp-b-radius-100 {
    border-radius: 100px;
}

.tmp-b-radius-circle {
    border-radius: 50%;
}

/* Font / Size */
.tmp-f-size-xsmall{
    font-size: 10px;
}

.tmp-f-size-small {
    font-size: 13px;
}

.tmp-f-size-normal {
    font-size: 16px;
}

.tmp-f-size-big {
    font-size: 20px;
}

.tmp-f-size-xbig {
    font-size: 25px;
}

/* Font / Weight */
.tmp-f-weight-100 {
    font-family: "LabGrotesque-100";
}

.tmp-f-weight-200 {
    font-family: "LabGrotesque-200";
}

.tmp-f-weight-300 {
    font-family: "LabGrotesque-300";
}

.tmp-f-weight-400 {
    font-family: "LabGrotesque-400";
}


/* Colors */
.tmp-color-white {
    color: #fff;
}

.tmp-color-dark-black {
    color: #222;
}

.tmp-color-light-black {
    color: #676767;
}

.tmp-color-dark-silver {
    color: #989898;
}

.tmp-color-light-silver {
    color: #f9f9f9;
}

.tmp-color-dark-red {
    color: #ef4d4d;
}

.tmp-color-light-red {
    color: #ffdcdc;
}

.tmp-color-dark-green {
    color: #08d274;
}

.tmp-color-light-green {
    color: #deffdb;
}

.tmp-color-dark-blue-navy {
    color: #6677ff;
}

.tmp-color-light-blue-navy {
    color: #e5e7ff;
}

.tmp-color-dark-orange{
    color: #ffc150;
}

.tmp-color-light-orange{
    color: #fff6e7;
}

.tmp-color-dark-yellow{
    color: #fff70c
}

.tmp-color-light-yellow{
    color: #fffdba;
}

/* Distribucion Flexbox */
.tmp-flex-start {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.tmp-flex-end{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.tmp-flex-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.tmp-space-around{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

.tmp-space-between{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Overflow */
.tmp-ovflow-hidden{
    overflow: hidden;
}

.tmp-ovflow-x {
    overflow-x: auto;
}

.tmp-ovflow-y {
    overflow-y: auto;
}

.tmp-ovflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Min Width Contentes */
.tmp-min-width-600 {
    min-width: 600px;
}

.tmp-min-width-800 {
    min-width: 800px;
}

.tmp-min-width-1000 {
    min-width: 1000px;
}

.tmp-min-width-1200 {
    min-width: 1200px;
}

.tmp-min-width-1400 {
    min-width: 1400px;
}

.tmp-min-width-1600 {
    min-width: 1600px;
}

.tmp-min-width-1800 {
    min-width: 1800px;
}

.tmp-min-width-2000 {
    min-width: 2000px;
}

.tmp-min-width-2200 {
    min-width: 2200px;
}

.tmp-min-width-2400 {
    min-width: 2400px;
}

.tmp-min-width-2600 {
    min-width: 2600px;
}

.tmp-min-width-2800 {
    min-width: 2800px;
}

.tmp-min-width-3000 {
    min-width: 3000px;
}

/* Max Width Contentes */
.tmp-max-width-100 {
    max-width: 100px;
}

/* Max Height Contentes */
.tmp-max-height-100 {
    max-height: 100px;
}

.tmp-max-height-200 {
    max-height: 200px;
}

.tmp-max-height-300 {
    max-height: 300px;
}

.tmp-max-height-400 {
    max-height: 400px;
}

.tmp-max-height-500 {
    max-height: 500px;
}

.tmp-max-height-600 {
    max-height: 600px;
}

.tmp-max-height-700 {
    max-height: 700px;
}

.tmp-max-height-800 {
    max-height: 800px;
}

.tmp-max-height-900 {
    max-height: 900px;
}

.tmp-max-height-1000 {
    max-height: 1000px;
}

/* Vertical Align */
.tmp-v-align-top{
    vertical-align: top;
}

.tmp-v-align-middle {
    vertical-align: middle;
}

.tmp-v-align-bottom {
    vertical-align: bottom;
}

/* Text Align */
.tmp-t-align-left {
    text-align: left;
}

.tmp-t-align-right{
    text-align: right;
}

.tmp-t-align-center {
    text-align: center;
}

/* Opacity */
.tmp-opacity-0 {
    opacity: 0;
}

.tmp-opacity-01 {
    opacity: .1;
}

.tmp-opacity-02 {
    opacity: .2;
}

.tmp-opacity-03 {
    opacity: .3;
}

.tmp-opacity-04 {
    opacity: .4;
}
.tmp-opacity-05 {
    opacity: .5;
}

.tmp-opacity-06 {
    opacity: .6;
}

.tmp-opacity-07 {
    opacity: .7;
}

.tmp-opacity-08 {
    opacity: .8;
}

.tmp-opacity-09 {
    opacity: .9;
}

.tmp-opacity-1 {
    opacity: 1;
}

/* Cursor */
.tmp-cursor-crosshair {
    cursor: crosshair;
}

.tmp-cursor-default {
    cursor: default;
}

.tmp-cursor-grab {
    cursor: grab;
}

.tmp-cursor-grabbing {
    cursor: grabbing;
}

.tmp-cursor-move {
    cursor: move;
}

.tmp-cursor-no-drop {
    cursor: no-drop;
}

.tmp-cursor-none {
    cursor: none;
}

.tmp-cursor-not-allowed {
    cursor: not-allowed;
}

.tmp-cursor-pointer {
    cursor: pointer;
}

/* Pointer Events */
.tmp-pointer-ev-none{
    pointer-events: none;
}

.tmp-pointer-ev-auto {
    pointer-events: auto;
}
/*********** END - HELP CLASSES - ***********/