:root{
    /* PRIMARY */
    --primary1: #263841; /*Dark Blue Grey*/
    --primary2: #007A8F; /*Peacock Blue*/
    --primary3: #D0992B; /*Muted Yellow*/
    --primary4: #D15D33; /*Muted Orange*/
    --primary5: #80973D; /*Lime*/
    --primary6: #008EA6; /*Peacock Blue 0% Black*/

    /* CORPORATE */
    --corp1: #003F78; /*Blue 294C*/
        --corp1_75: #426094; 
        --corp1_50: #7F8DB5; 
        --corp1_25: #BCC2D9; 
    --corp2: #B1B2B4; /*Cool Grey*/
        --corp2_75: #C4C5C7; 
        --corp2_50: #D5D5D6; 
        --corp2_25: #EAEAEA; 
    --corp2: #575756; /*Dark Grey*/ 

    /* FULL*/
    --full1: #263841; /*Dark Blue Grey*/
    --full2: #007A8F; /*Peacock Blue*/
    --full3: #008EA6; /*Peacock 0% Black*/
    --full4: #33B8CE; /*Muted Turqouise*/
    --full5: #0086B7; /*Sky Blue*/
    --full6: #4877BA; /*Cornflower Blue*/
    --full7: #7D72A0; /*Lavender Blue*/
    --full8: #66528E; /*Purple*/
    --full9: #854B72; /*Mauve*/
    --full10: #C2689C; /*Dusty Pink*/
    --full11: #AE3273; /*Berry Pink*/
    --full12: #D24132; /*Muted Red*/
    --full13: #D15D33; /*Muted Orange*/
    --full14: #D57E37; /*Pale Orange*/
    --full15: #D0992B; /*Muted Yellow*/
    --full16: #80973D; /*Lime*/
    --full17: #4AA96C; /*Muted Green*/
    --full18: #478F8B; /*Muted Teal*/

    /* ALIASES */
    --OK: #4AA96C;      /*full17*/
    --WARN: #D0992B;    /*primary3*/
    --BAD: #D24132;     /*full12*/
}

.hexagon-shape {
    overflow: hidden;
    background: transparent;
    /* add slash at the end of line to see the rhombus *
    outline: solid 1px red;/**/
    transform: rotate(-60deg) skewX(30deg) scaleY(.866);
}
.hexagon-shape:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: var(--primary1);
    content: '';
}   

.hexagon-shape-15{
    overflow: hidden;
    background: transparent;
    transform: rotate(-45deg) skewX(30deg) scaleY(.866);
}

.hexagon-shape-15:before{
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: var(--primary1);
    content: '';
}