/* 
====== 
Fonts
======
*/
@import url('https://fonts.googleapis.com/css?family=Catamaran:300,400&display=swap');
/* 
====== 
Variables 
======
*/
:root {
    --primaryColor: #2892d7;
    --mainWhite: #fff;
    --offWhite: #f7f7f7;
    --mainBlack: #222;
    --mainGrey: #ececec;
    --darkGrey: #afafaf;
    --mainTransition: all 0.3s linear;
    --mainSpacing: 0.3rem;
    --lightShadow: 2px 5px 3px 0px rgba(0, 0, 0, 0.5);
    --darkShadow: 4px 10px 5px 0px rgba(0, 0, 0, 0.5);
    --mainBorderRadius: 0.25rem;
}
/* 
====== 
Global Styles 
======
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Catamaran', sans-serif;
    color: var(--mainBlack);
    background: var(--mainGrey);
    line-height: 1.4;
    font-size: 1rem;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Catamaran', sans-serif;
    margin-bottom: 1.25rem;
    letter-spacing: var(--mainSpacing);
}
p {
    margin-bottom: 1.25rem;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    color: var(--mainBlack);
}
/* 
====== 
Buttons 
======
*/
.btn,
.btn-white,
.btn-primary {
    text-transform: uppercase;
    letter-spacing: var(--mainSpacing);
    color: var(--primaryColor);
    border: 2px solid var(--primaryColor);
    padding: 0.45rem 0.8rem;
    display: inline-block;
    transition: var(--mainTransition);
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: var(--mainBorderRadius);
    background: transparent;
}
.btn:hover {
    background: var(--primaryColor);
    color: var(--mainWhite);
}
.btn-white {
    background: transparent;
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}
.btn-white:hover {
    background: var(--mainWhite);
    color: var(--primaryColor);
}
.btn-primary {
    background: var(--primaryColor);
    color: var(--mainWhite);
    border-color: var(--primaryColor);
}
.btn-primary:hover {
    background: transparent;
    color: var(--primaryColor);
}
.btn-block {
    width: 100%;
    display: block;
    margin: 0 auto;
    box-shadow: var(--lightShadow);
    text-align: center;
}
.disabled {
    color: var(--darkGrey);
    border-color: var(--darkGrey);
}
.disabled:hover {
    background: transparent;
    color: var(--darkGrey);
    border-color: var(--darkGrey);
}