@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import url('https://static.netsyms.net/fontawesome-pro/5/css/all.min.css');
@import url('https://static.netsyms.net/fonts/ubuntu/Ubuntu.css');

/*
    Atmosphere by Pixelarity
    pixelarity.com | hello@pixelarity.com
    License: pixelarity.com/license
*/


// Breakpoints.

@include breakpoints((
xlarge:   ( 1281px,  1680px ),
large:    ( 981px,   1280px ),
medium:   ( 737px,   980px  ),
small:    ( 481px,   736px  ),
xsmall:   ( 361px,   480px  ),
xxsmall:  ( null,    360px  )
));

// Mixins.

@mixin color($p) {
    @include color-typography($p);
    @include color-box($p);
    @include color-button($p);
    @include color-form($p);
    @include color-list($p);
    @include color-section($p);
    @include color-table($p);
    @include color-spotlights($p);
    @include color-timeline($p);
}

@mixin sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// Base.

@import 'base/reset';
@import 'base/page';
@import 'base/typography';

// Component.

@import 'components/row';
@import 'components/box';
@import 'components/button';
@import 'components/form';
@import 'components/icon';
@import 'components/image';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
@import 'components/section';
@import 'components/table';
@import 'components/spotlights';
@import 'components/features';
@import 'components/posts';
@import 'components/timeline';
@import 'components/wrapper';

// Layout.

@import 'layout/header';
@import 'layout/menu';
@import 'layout/banner';
@import 'layout/main';
@import 'layout/footer';

.box:empty {
    display: none;
}

.box:not(.box:empty) {
    animation: flashbox 300ms;
    animation-timing-function: linear;
    animation-iteration-count: 2;
}

.wrapper.style1 .box {
    border-color: white;
    border-width: 1px;
}

@keyframes flashbox {
    0% {
        background-color: rgba(255,255,255,0);
    }
    50% {
        background-color: rgba(255,255,255,0.5);
    }
    100% {
        background-color: rgba(255,255,255,0);
    }
}