/* ########## icon color ########## */
.c-icon-h-xl-w,
.c-icon-h-l-w,
.c-icon-h-m-w,
.c-icon-h-s-w,
.c-icon-h-xs-w,
.c-icon-xl-w,
.c-icon-l-w,
.c-icon-m-w,
.c-icon-s-w,
.c-icon-xs-w {
    color: white;
}

.c-icon-h-xl-b,
.c-icon-h-l-b,
.c-icon-h-m-b,
.c-icon-h-s-b,
.c-icon-h-xs-b,
.c-icon-xl-b,
.c-icon-l-b,
.c-icon-m-b,
.c-icon-s-b,
.c-icon-xs-b {
    color: #3C3C39;
}

.c-icon-h-xl-g,
.c-icon-h-l-g,
.c-icon-h-m-g,
.c-icon-h-s-g,
.c-icon-h-xs-g,
.c-icon-xl-g,
.c-icon-l-g,
.c-icon-m-g,
.c-icon-s-g,
.c-icon-xs-g {
    color: #0EFF00;
}

.c-icon-h-xl-blue,
.c-icon-h-l-blue,
.c-icon-h-m-blue,
.c-icon-h-s-blue,
.c-icon-h-xs-blue,
.c-icon-xl-blue,
.c-icon-l-blue,
.c-icon-m-blue,
.c-icon-s-blue,
.c-icon-xs-blue {
    color: #0F73EE;
}

.c-icon-h-xl-o,
.c-icon-h-l-o,
.c-icon-h-m-o,
.c-icon-h-s-o,
.c-icon-h-xs-o,
.c-icon-xl-o,
.c-icon-l-o,
.c-icon-m-o,
.c-icon-s-o,
.c-icon-xs-o {
    color: #F0CA00;
}

.c-icon-h-xl-r,
.c-icon-h-l-r,
.c-icon-h-m-r,
.c-icon-h-s-r,
.c-icon-h-xs-r,
.c-icon-xl-r,
.c-icon-l-r,
.c-icon-m-r,
.c-icon-s-r,
.c-icon-xs-r {
    color: #CA031E;
}

/* ########## icon size ########## */
.c-icon-h-xl-blue,
.c-icon-h-xl-r,
.c-icon-h-xl-o,
.c-icon-h-xl-g,
.c-icon-h-xl-w,
.c-icon-h-xl-b,
.c-icon-h-xl,
.c-icon-xl-blue,
.c-icon-xl-r,
.c-icon-xl-o,
.c-icon-xl-g,
.c-icon-xl-w,
.c-icon-xl-b,
.c-icon-xl {
    font-size: 72px;
}

.c-icon-h-l-blue,
.c-icon-h-l-r,
.c-icon-h-l-o,
.c-icon-h-l-g,
.c-icon-h-l-w,
.c-icon-h-l-b,
.c-icon-h-l,
.c-icon-l-blue,
.c-icon-l-r,
.c-icon-l-o,
.c-icon-l-g,
.c-icon-l-w,
.c-icon-l-b,
.c-icon-l {
    font-size: 36px;
}

.c-icon-h-m-blue,
.c-icon-h-m-r,
.c-icon-h-m-o,
.c-icon-h-m-g,
.c-icon-h-m-w,
.c-icon-h-m-b,
.c-icon-h-m,
.c-icon-m-blue,
.c-icon-m-r,
.c-icon-m-o,
.c-icon-m-g,
.c-icon-m-w,
.c-icon-m-b,
.c-icon-m {
    font-size: 28px;
}

.c-icon-h-s-blue,
.c-icon-h-s-r,
.c-icon-h-s-o,
.c-icon-h-s-g,
.c-icon-h-s-w,
.c-icon-h-s-b,
.c-icon-h-s,
.c-icon-s-blue,
.c-icon-s-r,
.c-icon-s-o,
.c-icon-s-g,
.c-icon-s-w,
.c-icon-s-b,
.c-icon-s {
    font-size: 24px;
}

.c-icon-h-xs-blue,
.c-icon-h-xs-r,
.c-icon-h-xs-o,
.c-icon-h-xs-g,
.c-icon-h-xs-w,
.c-icon-h-xs-b,
.c-icon-h-xs,
.c-icon-xs-blue,
.c-icon-xs-r,
.c-icon-xs-o,
.c-icon-xs-g,
.c-icon-xs-w,
.c-icon-xs-b,
.c-icon-xs {
    font-size: 18px;
}

/* ########## icon hover ########## */
.c-icon-h-xl-blue,
.c-icon-h-xl-r,
.c-icon-h-xl-o,
.c-icon-h-xl-g,
.c-icon-h-xl-w,
.c-icon-h-xl-b,
.c-icon-h-xl,
.c-icon-h-l-blue,
.c-icon-h-l-r,
.c-icon-h-l-o,
.c-icon-h-l-g,
.c-icon-h-l-w,
.c-icon-h-l-b,
.c-icon-h-l,
.c-icon-h-m-blue,
.c-icon-h-m-r,
.c-icon-h-m-o,
.c-icon-h-m-g,
.c-icon-h-m-w,
.c-icon-h-m-b,
.c-icon-h-m,
.c-icon-h-s-blue,
.c-icon-h-s-r,
.c-icon-h-s-o,
.c-icon-h-s-g,
.c-icon-h-s-w,
.c-icon-h-s-b,
.c-icon-h-s,
.c-icon-h-xs-blue,
.c-icon-h-xs-r,
.c-icon-h-xs-o,
.c-icon-h-xs-g,
.c-icon-h-xs-w,
.c-icon-h-xs-b,
.c-icon-h-xs {
    opacity: 0.7;
    cursor: pointer;
}

.c-icon-h-xl-blue:hover,
.c-icon-h-xl-r:hover,
.c-icon-h-xl-o:hover,
.c-icon-h-xl-g:hover,
.c-icon-h-xl-w:hover,
.c-icon-h-xl-b:hover,
.c-icon-h-xl:hover,
.c-icon-h-l-blue:hover,
.c-icon-h-l-r:hover,
.c-icon-h-l-o:hover,
.c-icon-h-l-g:hover,
.c-icon-h-l-w:hover,
.c-icon-h-l-b:hover,
.c-icon-h-l:hover,
.c-icon-h-m-blue:hover,
.c-icon-h-m-r:hover,
.c-icon-h-m-o:hover,
.c-icon-h-m-g:hover,
.c-icon-h-m-w:hover,
.c-icon-h-m-b:hover,
.c-icon-h-m:hover,
.c-icon-h-s-blue:hover,
.c-icon-h-s-r:hover,
.c-icon-h-s-o:hover,
.c-icon-h-s-g:hover,
.c-icon-h-s-w:hover,
.c-icon-h-s-b:hover,
.c-icon-h-s:hover,
.c-icon-h-xs-blue:hover,
.c-icon-h-xs-r:hover,
.c-icon-h-xs-o:hover,
.c-icon-h-xs-g:hover,
.c-icon-h-xs-w:hover,
.c-icon-h-xs-b:hover,
.c-icon-h-xs:hover {
    opacity: 1;
}

.c-icon-square-normal:hover .c-icon-l-g {
    color: #44D23C;
}

.c-icon-square-normal:hover .c-icon-l-o {
    color: #F7BA0B;
}

.c-icon-square-normal:hover .c-icon-l-r {
    color: #960014;
}

.c-icon-square-normal:hover .c-icon-l-blue {
    color: #0C5CBE;
}

/* ########## icon layout ########## */
.c-icon-square-normal {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 80px;
    text-align: center;
    cursor: pointer;
}

button.c-icon-square-normal {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    overflow: hidden;
    outline:none;
}

.c-icon-square-normal span {
    display: block;
    line-height: 15px;
    font-weight: bold;
}

.c-icon-square {
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.9;
    width: 80px;
    text-align: center;
    cursor: pointer;
}

.c-icon-square:hover {
    opacity: 1;
}

.c-icon-square span {
    display: block;
    line-height: 15px;
    font-weight: bold;
}