/* =======================================================================
 * COLORS VARIABLES
 * -----------------------------------------------------------------------
 * Define all the colors used in the website. You can use
 * http://chir.ag/projects/name-that-color/ to generate human readable
 * names for each color.
 * ===================================================================== */
@font-face {
    font-family: 'Messina Bold';
    src: url("../fonts/MessinaSans-Bold.woff2") format("woff2"), url("../fonts/MessinaSans-Bold.woff") format("woff");
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Messina Regular';
    src: url("../fonts/MessinaSans-Regular.woff2") format("woff2"), url("../fonts/MessinaSans-Regular.woff") format("woff");
    font-style: normal;
    font-stretch: normal;
}

/* =======================================================================
 * BREAKPOINTS
 * -----------------------------------------------------------------------
 * Breakpoints are used for responsive design. You can define here
 * the breakpoints required for the design.
 * ===================================================================== */
/* =======================================================================
 * BASE VARIABLES
 * -----------------------------------------------------------------------
 *
 * ===================================================================== */
.projects {
    display: flex;
    align-items: flex-end;
}

.projects .slider {
    width: 100%;
    position: relative;
    display: none;
}

.projects .slider.active {
    display: block;
}

.projects .slider.fake-slider .slider-wrapper {
    overflow: auto;
    width: auto;
}

.projects .slider.fake-slider .slider-wrapper .items {
    width: auto;
    float: right;
}

.projects .slider .slider-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.projects .slider .items {
    position: relative;
    *zoom: 1;
    width: 9999px;
}

.projects .slider .items:before, .projects .slider .items:after {
    content: " ";
    display: table;
    line-height: 0;
}

.projects .slider .items:after {
    clear: both;
}

.projects .slider .items .item {
    display: block;
    width: 69px;
    height: 69px;
    float: left;
    margin-right: 8px;
}

.projects .slider .items .item img {
    height: 100%;
    width: 100%;
}

.projects .slider .arrow a {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.projects .slider .arrow a.active {
    display: block;
}

.projects .slider .arrow a.previous {
    right: auto;
    left: 0;
    transform: rotate(180deg);
}

.projects .slider .arrow a img {
    width: 69px;
    height: 69px;
}

/*# sourceMappingURL=module.slider.project.css.map */