/* FONTS */

@font-face {
  font-family: 'TTRounds';
  src: url('TTRounds-Regular.eot');
  src: url('TTRounds-Regular.eot?#iefix') format('embedded-opentype'),
    url('TTRounds-Regular.woff') format('woff'),
    url('TTRounds-Regular.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTRounds';
  src: url('TTRounds-Bold.eot');
  src: url('TTRounds-Bold.eot?#iefix') format('embedded-opentype'),
    url('TTRounds-Bold.woff') format('woff'),
    url('TTRounds-Bold.ttf')  format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'TTRounds-Regular';
  src: url('TTRounds-Regular.eot?#iefix') format('embedded-opentype'),  url('TTRounds-Regular.otf')  format('opentype'),
  url('TTRounds-Regular.woff') format('woff'), url('TTRounds-Regular.ttf')  format('truetype'), url('TTRounds-Regular.svg#TTRounds-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TTRounds-Bold';
  src: url('TTRounds-Bold.eot?#iefix') format('embedded-opentype'),  url('TTRounds-Bold.otf')  format('opentype'),
  url('TTRounds-Bold.woff') format('woff'), url('TTRounds-Bold.ttf')  format('truetype'), url('TTRounds-Bold.svg#TTRounds-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

*:focus {outline:0;}
* { font-family: 'TTRounds', sans-serif; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body { font-size: 16px; }

@media only screen and (max-width: 400px) {
  body { font-size: 13px; }
}

/* UTILITY CLASSES */

.hidden { display: none; }
.no-scroll { overflow-y: hidden; }
.full-width { width:100%; }
.smaller { font-size: 0.8em; }
.small { font-size: 0.5em; }
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.floatLeft {
  float:left;
  margin:0;
}

/* NAV */

nav#header {
  background-color: rgb(255,255,255);
  height:17vh;
  text-align:center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav#header label { color:#8C8080; margin:0px 10px; }


.logo {
  min-height: 6em;
  height: 15vh;
  vertical-align: middle;
  position: relative;
}

/* HAMBURGER ICON */

.hamburger {
  display: inline-block; 
  cursor: pointer;
}

nav div.hamburger { 
  z-index: 2000000001;
  position: relative;
  top: 4vh;
}

@media only screen and (max-width: 405px) {
  body.overlay-open nav div.hamburger {
    position: absolute;
    top: 5px;
    right: 0px;
  }
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #8C8080;
  margin: 6px 0;
  transition: 0.4s;
}

.opened-menu .bar1, .opened-menu .bar2, .opened-menu .bar3 {
  background-color: white;
}

.opened-menu .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.opened-menu .bar2 {opacity: 0;}

.opened-menu .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/* OVERLAY MENU */

.gradient {
  background: rgb(187,223,198);
  background: linear-gradient(130deg, rgba(187,223,198,1) 0%, rgba(127,211,183,1) 100%);
}

div.overlay {
  width: 100vw;
  height: 100vh;
  z-index: 2000000000;
  position: fixed;
  top: 0;
}

#overlay-menu nav, #overlay-menu a { 
  color:white; 
  text-decoration: none; 
}

#overlay-menu a:hover { color:#ffffc4; }

#overlay-menu nav {
  width: 65vw;
  margin: 0 auto;
  height: 90vh;
  display: block;
  top: 24vh;
  position: relative;
}

#overlay-menu nav ul {
  list-style-type: none;
  font-size: 3em;
  width: 41%;
  margin: 0 4%;
  float: left;
  padding: 0;
}

#overlay-menu nav ul li { margin-bottom: 2vh; }
#overlay-menu nav ul li.smaller { padding-left:2px; }

/* FOOTER */
div.content-wrapper { 
  min-height:95%;
  position:relative;
}

div.footer {
  bottom: 0px;
  background-color: #333;
  width: 100%;
  padding: 1vh 0vh;
  color: white;
}

div.footer a { color:white; text-decoration: none; }
div.footer a:hover { color: wheat; }
/* SIMPLE GRID */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

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

.hidden-sm {
  display: none;
}

.hidden-lg {
  display: block;
}


@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 405px) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }

  .hidden-lg {
    display: none;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 90%;
  }
}