/* 1. Include reset at the very beginning */
@import url('reset.css');

/* 2. Define your base styles immediately after */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* 3. Set consistent heading hierarchy */
h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 2rem; font-weight: 600; margin-bottom: 0.875rem; }
h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; }

/* 4. Define paragraph and text spacing */
p { margin-bottom: 1rem; }

/* 5. Style lists appropriately */
ul, ol { 
  margin-bottom: 1rem; 
  padding-left: 1.25rem;
}

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* -------------------------------------------------------- */
/* @group =BASE STYLES (#) */
/* -------------------------------------------------------- */

body {
margin:0 auto;
font-size: 2vh;
font-family: proxima-nova, sans-serif;
}

.wrap {
max-width: 1200px;
margin: 0 auto;
padding: 1em;
}

@media screen and (max-width: 768px) {

  body { font-size: 1.5vh; color:#111111; }
  main h2 { font-size: 2.8vh; }
  ol { margin:0; padding:0; }
  .icons>li { display: block; width:100%; }
  li { margin: 0; }
  footer p { font-size: 1.4vh; }
  #branding { padding: 0; }
  #branding > h1 { font-size: 3.2vh; }
  #branding > h2 { font-size: 2.4vh; }

}

section {
margin: 2em auto;
width: 100%;
}

section>h2 {
margin:0;
}

/* -------------------------------------------------------- */
/* @group =HEADINGS (#) */
/* -------------------------------------------------------- */

h1,
h2,
h3 {
letter-spacing: 0.1em;
font-family: alegreya, serif;
}

h1,
.h1,
.alpha,
h2,
.h2,
.beta,
h3,
.h3,
.gamma {
margin: 0;
letter-spacing: 0;
}

h1,
.h1,
.alpha,
h2,
.h2,
.beta,
h3,
.h3,
.gamma {
font-weight: 700;
font-style: normal;
}

h1,
.h1,
.alpha {
font-size: 36px;
font-size: 3.6rem;
line-height: 1.2;
}

h2,
.h2,
.beta {
font-size: 28px;
font-size: 2.8rem;
line-height: 1.2;
margin-bottom: 0.75em;
}

h3,
.h3,
.gamma {
font-size: 21px;
font-size: 2.1rem;
line-height: 1.3;
margin-bottom: 1em;
}

/* @end */

/* -------------------------------------------------------- */
/* @group =LINKS (#) */
/* -------------------------------------------------------- */

a {
  display: inline-block;
  position: relative;
  color: #343434;
  text-decoration: none;
  padding: 0 6px;
}
a:before, a:after {
  will-change: transform;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
a:before {
  transition: 100ms ease-out 50ms;
  transform-origin: 0 24px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #E6EBFF;
}
a:after {
  transition: 50ms ease-out;
  transform: scaleX(0);
  transform-origin: left center;
  bottom: 2px;
  right: -12px;
}
a:hover:before {
  transition: 100ms ease-out;
  height: 100%;
  background: #CCD6FF;
}
a:hover:after {
  transition: 50ms ease-out 100ms;
  transform: none;
}
a:active:before {
  transition: 100ms ease-in;
  background: #B3C2FF;
}
a:active:after {
  transition: 100ms ease-in;
  border-left-color: #B3C2FF;
}

/* @end */

/* -------------------------------------------------------- */
/* @group =HEADER (#) */
/* -------------------------------------------------------- */

#branding { 
padding: 2vh 0;
}

#branding > h1, 
#branding > h2 {
margin: 0;
text-align: center;
color:#343434;
line-height: 1.625em;
}

/* @end */

/* -------------------------------------------------------- */
/* @group =MISCELLANEOUS (#) */
/* -------------------------------------------------------- */

abbr[title] { 
border-bottom:none; 
}

p, 
ul,
ol { 
color:#343434; 
}

li {
margin: 0 0 0.1vh;
list-style-position: inside;
}

ul {
list-style-type: none;
padding: 0;
}

ul>li {
display: inline;
padding-left: 1.3em;
padding-right: 1em;
}

/* https://codepen.io/jordacheb */
.icons li:before {
content: "\f00c";
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
color: #0033ff;
}
.icons li:nth-child(1):before {
content: "\f043";
}
.icons li:nth-child(2):before {
content: "\f8d9";
}
.icons li:nth-child(3):before {
content: "\f276";
}

/* ===== FOOTER ===== */

footer {
margin: 0;
font-size: 16px;
font-size: 1.6rem; /* =16px */
font-weight: 300;
}

footer {
height:100px;
width:100%;
color:#343434;
text-align:center;
}


/* @end */

/* -------------------------------------------------------- */
/* @group =GLOBAL OBJECTS (#) */
/* -------------------------------------------------------- */

* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
margin-top: 25px;
}

* + address,
* + blockquote,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
margin-top: 15px;
}

.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}

/* http://sonspring.com/journal/clearing-floats */

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* @end */

/* -------------------------------------------------------- */
/* @group =GENERAL TAGS (#) */
/* -------------------------------------------------------- */

/* ===== CODE DIRECTION FOR EMAIL ===== */
span.codedirection {
unicode-bidi: bidi-override;
direction: rtl;
}

/* @end */

/* -------------------------------------------------------- */
/* @group =HELPERS (#) */
/* -------------------------------------------------------- */

/* @end */

/* -------------------------------------------------------- */
/* @group =FORM ELEMENTS (#) */
/* -------------------------------------------------------- */

/* @end */

/* -------------------------------------------------------- */
/* @group =TABLES (#) */
/* -------------------------------------------------------- */

/* @end */

/* -------------------------------------------------------- */
/* @group =FIGURES & IMAGES (#) */
/* -------------------------------------------------------- */

img,
embed,
object,
video {
height: auto;
max-width: 100%;
}

img {
max-width: 100%;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}

/* -------------------------------------------------------- */
/* @group =PRINT (#) */
/* -------------------------------------------------------- */

/* h5bp.com/r  */

@media print {
* {
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
background: transparent !important;
}

html {
background-color: #fff;
}

/* Hide navigation */
nav {
display: none;
}

/* Show link destinations in brackets after the link text */
a[href]:after {
content: " (" attr(href) ") ";
}
a[href] {
font-weight: bold;
text-decoration: underline;
color: #06c;
border: none;
}
/* Don't show link destinations for JavaScript or internal links */
a[href^="javascript:"]:after,
a[href^="javascript:void(0)"]:after {
content: "";
}

/* Show abbr title value in brackets after the text */
abbr[title]:after {
content: " (" attr(title) ")";
}

figure {
margin-bottom: 1em;
overflow: hidden;
}

figure img {
border: 1px solid #000;
}
}

/* @end */