/*Reset file*/

/* ===== Colors ===== */
/*Design, layout*/
$green: #18bc9c;
$green-darker: darken(#11866f, 2%);
$orange: #ffa800;
$orange-light: #ffb629;
$orange-medium: darken($orange, 5%);
$orange-dark: darken($orange, 10%);

 /*Text*/
$grey: #626161;
$grey-light: lighten($grey, 10%);

/* ===== Typography ===== */
$font-sans:  'Lato', Helvetica, Arial, sans-serif;
$font-serif: 'Merriweather', 'Times New Roman', serif;
$fz-base: 16;
@mixin lowercase{ text-transform: lowercase; }
@mixin uppercase{ text-transform: uppercase; }

@mixin font-size($size: 16){
font-size: $size +px;
font-size: $size/10 +rem;
}

@mixin light{ font-weight: 300; }
@mixin regular{ font-weight: 400; }
@mixin semibold{ font-weight: 600; }
@mixin semibold-italic{ font-weight: 600; font-style: italic; }
@mixin bold{ font-weight: 700; }

/* ===== Spacing ===== */
$spacing-m: 38px;
$spacing-l: 52px;

/* ===== Animations ===== */
/*transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]*/
@mixin transition($trans: all, $sec: 0.1s, $timing: linear, $delay: 0s){
-webkit-transition: $arguments;
-moz-transition: $arguments;
-o-transition: $arguments;
transition: $arguments;
}

@mixin translateY($height: -4px){
-webkit-transform: translateY($height);
-moz-transform: translateY($height);
-ms-transform: translateY($height);
-o-transform: translateY($height);
transform: translateY($height);
}

/* ===== RESETS & BASIC PAGE SETUP =====*/
* { margin: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; font-size: 62.5%; /* set font-size to 62,5% in html to use rem */  }
body {
color: $grey;
font-family: $font-sans;
@include font-size(22);
font-weight: 400;
line-height: 140%;
}

article, aside, figure, footer, header, hgroup, menu, nav, section, button{ display: block; }
ol, ul{ list-style: none; }

/* ===== SELECTION & HIGHLIGHTS COLORS ===== */
::selection{ background: darken($orange, 2%); color: white;}
::-moz-selection{ background: darken($orange, 2%); color: white; }

/* ===== USEFUL CLASSES ===== */
.float-left{ float: left; }
.float-right{ float: right; }
.text-align-left{ text-align: left; }
.text-align-center{ text-align: center; }
.text-align-right{ text-align: right; }
.clear{ clear: both; }

.outline{ border: 1px solid black;}
.nothing{ padding: 0; margin: 0;}

.left-clear{ margin-left: 0; padding-left: 0;}
.right-clear{ margin-right: 0; }

@mixin border-radius($radius: 4px){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

/* ===== LINKS ===== */
a{ text-decoration: none; }
a:link, a:visited{ color: $orange; }
a:hover, a:active{ color: $orange-dark; }
a img { border: 0; } /*border: 0 is better then border: none, less character*/

/* ===== HEADINGS =====*/
h1, h2, h3, h4, h5, h6 {
font-family: $font-sans;
font-style: normal;
line-height: 150%;
}

h1 { @include font-size(26); font-weight: 700; }
h2 { @include font-size(32); font-weight: 700; @include uppercase; }
h3 { @include font-size(22); font-weight: 600; } 
h4 { @include font-size(20); font-weight: 400; }
h5 { @include font-size(18); font-weight: 400; }
h6 { @include font-size(16); font-weight: 400; }

hr{
border-top: 4px solid #ebeaea;
margin: 0;
}

/* ===== MEDIA QUERIES BREAKPOINTS =====*/
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;