// Breakpoints. 
$breakpoints: (
	xs: 512px,
	sm: 768px,
	md: 896px,
	lg: 1152px,
	xl: 1280px
);

// Colors.
$dark:   #393E4B;
$accent: #006cff;
$gray:   #adb5bd;
$outline:#e3e4e6;
$border: #f0f1f2;
$light:  #f6f7f8;
$white:  #ffffff;

// Typography.
$font-heading: 'Playfair Display', Helvetica, Arial, sans-serif;
$font-body:    'Roboto', Helvetica, Arial, sans-serif;
$normal:  	   300;
$bolder:  	   400;
$bold:    	   500;

// Site.
$site-radius: 5px;
$site-border: 1px solid $border;

// Columns.
$margin:        2.564102564102564%;
$one-half:      48.71794871794871%;
$one-third:     31.62393162393162%;
$one-fifth:     17.94871794871794%;
$one-fourth:    23.07692307692307%;
$one-sixth:     14.52991452991453%;
$one-seventh:   12.08791208791208%;
$one-eighth:    10.25641025641025%;
$one-ninth:     8.831908831908832%;
$two-thirds:    65.81196581196582%;
$two-fourths:   48.71794871794871%;
$two-fifths:    38.46153846153846%;
$two-sixths:    31.62393162393162%;
$three-fourths: 74.35897435897436%;
$three-fifths:  58.97435897435897%;
$three-sixths:  48.71794871794871%;
$four-fifths:   79.48717948717948%;
$four-sixths:   65.81196581196582%;
$five-sixths:   82.90598290598291%;

// Media Queries.
@mixin breakpoint( $breakpoint ) {

    @if map-has-key( $breakpoints, $breakpoint ) {

        @media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
            @content;
        }

    } @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {

        @media (min-width: $breakpoint ) {
            @content;
        }

    } @else {

        @warn "No value could be retrieved from `#{$breakpoint}`. "
              + "Please make sure it is defined in `$breakpoints` map, or it is a valid number with supported unit of px, em or rem.";
    }
}

// Clearfix.
@mixin clearfix {
	clear: both;

	&:before,
	&:after {
		clear: both;
		display: block;
		content: '';
	}
}

// Transitions.
@mixin transition {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}


@mixin gradient {
    background: rgba(0,108,255,1);
	background: radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
    background: -o-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
    background: -ms-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
    background: -moz-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
	background: -webkit-radial-gradient(left top,circle cover,rgba(100,66,255,0.9) 15%,rgba(0,108,255,0.9) 50%,rgba(12,180,206,0.9) 85%);
}

@mixin overlay {
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		@include gradient;
	}
}