/*  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
    1. GLOBAL
    ......................................  */

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

html, .pure-g [class *= "pure-u"] {
    font: 1em/1.5 'Roboto', sans-serif;
}

html {
    background: #f9f9f9;
    min-height: 100%;
    position: relative;
}

body {
    margin: 0 0 5.25rem;
}

body.wide-menu {
    margin: 0 0 1.5rem;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.mobile-check {
    position: relative;
}

img {
    max-width: 100%;
}

/*  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    1. Grid
    ......................................  */

.container {
    display: block;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

@media screen and (min-width: 35.5em) {
    .container {
        max-width: 32rem;
    }
}

@media screen and (min-width: 48em) {
    .container {
        max-width: 44rem;
    }
    .l-box {
        padding: 0 1rem;
    }
}

@media screen and (min-width: 64em) {
    .container {
        max-width: 60rem;
    } 
}

@media screen and (min-width: 80em) {
    .container {
        max-width: 76rem;
    }
    body.wide-menu header.oe,
    body.wide-menu > section.content,
    body.wide-menu footer.oe {
        padding-left: 15rem;
    }
}

/*  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    1. Helpers
    ......................................  */

.stilts {
    margin-bottom: 1.5em;
}

.barefoot {
    margin-bottom: 0;
}

.tophat {
	margin-top: 1.5em;
}

.haircut {
    margin-top: 0;
}

span.alert {
    color: #FFC107;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    1. Typography
    ......................................  */

html,
button,
input,
select,
textarea {
    color: #222;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

h2 {
    font-size: 2rem;
    font-weight: normal;
}

a {
    color: #e74c3c;
}

a:not(.pure-button):hover {
    color: #222;
}

/*  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    1. Inputs & Buttons
    ......................................  */

select,
input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + label,
input[type="radio"] + label {
    cursor: pointer;
}

.button-oe {
    background-color: #F44336;
}

/*  ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    1. Misc.
    ......................................  */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}