@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon/icomoon.eot?srf3rx");
    src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {
    /* ***=====----- Colores Corporativos -----=====**** */
    --main: rgb(0, 152, 69);
    --main-alert: rgb(205, 235, 215);
    --main-card: rgb(156, 215, 177);
    --main-border: rgb(12, 174, 104);
    --main-dark-1: rgb(0, 121, 53);
    --main-dark-2: rgb(0, 78, 31);

    /* Color Segundario */
    --secondary: rgb(000, 000, 000);
    --secondary-alert: rgb(000, 000, 000);
    --secondary-card: rgb(000, 000, 000);
    --secondary-border: rgb(000, 000, 000);
    --secondary-dark-1: rgb(000, 000, 000);
    --secondary-dark-2: rgb(000, 000, 000);

    /* Colores humo */
       --dark-alert: rgb(217, 217, 217);
    --dark-card: rgb(179, 179, 179);
    --dark-border: rgb(128, 128, 128);
    --dark-1: rgb(26, 26, 26);
    --dark-2: rgb(17, 17, 17);

    /* Overflow */
    --overflow: rgba(0, 0, 0, 0.8);
    --overflow-white: rgba(255, 255, 255, 0.7);
    --overflow-main: rgba(30, 66, 138, 0.7);
    --overflow-secondary: rgba(64, 179, 229, 0.7);

    /* el ancho del header */
    --head: 42vh;
    --header: 60vh;
    --heading: 70vh;
}

/* ***=====----- Los Hipervínculos -----=====**** */
a {
    text-decoration: none;
    font-weight: 600;
}

a:link {
    text-decoration: none;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a:active,
a:focus,
a:hover {
    outline: 0 solid transparent;
    text-decoration: none;
    -moz-transition-duration: 500ms;
    -ms-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
}

/****=====----- Etiquetas -----=====*****/
body {
    margin: 0;
    padding: 0;
    color: #4d4d4d;
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.42857;
}

h1,
h2,
h3,
    {
    color: var(--main);
    font-family: var(--font-titles);
}

.h1,
h1 {
    color: var(--main);
    font-family: var(--font-titles);
}

.h2,
h2 {
    color: var(--main);
    font-family: var(--font-titles);
}

.h3,
h3 {
    color: var(--main);
    font-family: var(--font-titles);
}

hr{
width: 25%;
    border-top: 5px solid var(--main) !important;
}

strong{
    font-weight: bold;
    color: var(--main);
}

/* ***=====----- Clases universales -----=====**** */
*,
::after,
::before {
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-selection {
    color: #fff;
    background: var(--main);
}

::-moz-selection {
    color: #fff;
    background: var(--main);
}

::selection {
    color: #fff;
    background: var(--main);
}

/* Clases persolaizadas */
.rounded-1 {border-radius: 0.5rem;}
.rounded-2 {border-radius: 0.75rem;}
.rounded-3 {border-radius: 1rem;}

.null-block {
    margin: 0 !important;
    padding: 0 !important;
}

.word {
    background-color: var(--dark-alert);
    -webkit-box-shadow: -10px 0px 13px -7px rgba(0, 0, 0, 0.05), 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0.05);
    box-shadow: -10px 0px 13px -7px rgba(0, 0, 0, 0.05), 10px 0px 13px -7px rgba(0, 0, 0, 0.05), 5px 5px 15px 5px rgba(0, 0, 0, 0.05);
}

.shadow {
    border: 1px solid var(--main-border);
    -ms-box-shadow: 0px 10px 10px -5px var(--main);
    -webkit-box-shadow: 0px 10px 10px -5px var(--main);
    box-shadow: 0px 10px 10px -5px var(--main);
}

.shadow-inset {
    border: 1px solid var(--main-border);
    -webkit-box-shadow: inset 0px 0px 25px 2px var(--main);
    -moz-box-shadow: inset 0px 0px 25px 2px var(--main);
    box-shadow: inset 0px 0px 25px 2px var(--main);
}

.empty {
    display: block;
    background-color: cyan;
    border: 2px solid red;
}


