//// colors
$darkBlue: #00008F;
$primaryColor: #E1BCB5;
$accentColor: #A99C95;
$cornflowerBlue: #4976BA;
$irisBlue: #00ADC6;
$orange: #F07662;
$borderColor: #DFDFDF;
$invalidColor: #F02849;
$textColor: #333333;
$mutedColor: #CCCCCC;
$lightgray: #F2F2F2;

// fonts
$accentFont: 'Source Sans Pro';
$primaryFont: 'Source Sans Pro';

$sidebarWidth: 180px;

// breakpoint
$desktop: 1200px;
$laptop: 990px;
$tablet: 768px;
$mobile: 576px;

/// mixins
@mixin clearfix() {
    &::after {
        display: block;
        content: "";
        clear: both;
    }
}

@mixin trans($trans: .2s) {
    -webkit-transition: all $trans ease-in-out;
    -moz-transition: all $trans ease-in-out;
    transition: all $trans ease-in-out;
}

@mixin mqx($canvas) {
    @if $canvas == m { @media (max-width: $mobile) {@content;}}
    @else if $canvas == t { @media (max-width: $tablet) {@content;}}
    @else if $canvas == l { @media (max-width: $laptop) {@content;}}
    @else if $canvas == d { @media (max-width: $desktop) {@content;}}
}

@mixin mqn($canvas) {
    @if $canvas == m { @media (min-width: $mobile) {@content;}}
    @else if $canvas == t { @media (min-width: $tablet) {@content;}}
    @else if $canvas == l { @media (min-width: $laptop) {@content;}}
    @else if $canvas == d { @media (min-width: $desktop) {@content;}}
}