@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Lato:300,400,700,700i,900,900i&display=swap');

/******************************************************************************\
    TOP LEVEL OVER-RIDES
\******************************************************************************/
/*

body {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #3C3C3B;
    font-weight: 400;
    font-size: 14px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

p {
    margin: 0;
}

*/
/******************************************************************************\
    SCROLL BAR
\******************************************************************************/

.scroll-overlay_horizontal {
    position: relative;
}

.scroll-overlay_horizontal::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 10px; /* to compensate for scroll bar */
    right: 0;
    width: 250px;
    pointer-events: none;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.scroll-overlay_vertical {
    position: relative;
}

.scroll-overlay_vertical::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 10px; /* to compensate for scroll bar */
    height: 140px;
    pointer-events: none;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 14%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.14) 14%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.14) 14%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );    
}

/******************************************************************************\
    HELPERS
\******************************************************************************/

/*= HIDDEN ====================================================================*/

.hidden {
    display: none;
}

.hidden--show {
    display: unset;
}

/*= FLEX =====================================================================*/

.i-flex {
    display: inline-flex;
    align-items: center;
}

.flex {
    display: flex;
    align-items: center;
}

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.flex-grow { flex-grow: 1; }

.flex-sa { justify-content: space-around; }
.flex-sb { justify-content: space-between; }

/*= MOUSE ====================================================================*/

.pointer { cursor: pointer; }

/*= SVG ======================================================================*/

.svg-cc * {
    fill: currentColor;
}

/*= SCROLL BAR ===============================================================*/

.scrollbar::-webkit-scrollbar {
    width: 4px;
    border-radius: 20px;
    background-color: #F1F1F1;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 20px;
}

/*= ALIGNMENT ================================================================*/

.ra {
    text-align: right;
}

.la {
    text-align: left;
}

/*= FORMATTING ===============================================================*/

.b {
    font-weight: 900;
}

.i {
    font-style: italic;
}

.h1 i,
.h2 i,
.h3 i,
.h4 i {
    margin-right: 16px;
}

i.icon-button {
    font-size: 30px;
    color: #000;
    transition-duration: 0.3s;
    transition-property: all;
}

i.icon-button:hover {
    color: #7347FE;
}

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

/*= IMAGE  ===================================================================*/

.img_rotate {
    animation: img_rotate 5s infinite linear;
}

@keyframes img_rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}