h1 {
  font-weight: 100;
  font-size: 43px;
  font-family: 'mfont-bold'
}

@font-face {
    font-family: 'mfont-normal'; /*a name to be used later*/
    src: url('../fonts/mfont-normal.otf'); /*URL to font*/
}

@font-face {
    font-family: 'mfont-bold'; /*a name to be used later*/
    src: url('../fonts/mfont-bold.otf'); /*URL to font*/
}

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #444;
  font-size: 20px;
  font-family: 'mfont-normal';
}

/* unvisited link */
a:link {
    color: #000;
}

/* visited link */
a:visited {
    color: rgba(211, 84, 0, 1);
}

/* mouse over link */
a:hover {
    color: rgba(243, 156, 18, 1);
}

/* selected link */
a:active {
    color: #000;
}

.footer {
  padding: 4px 8px;
  text-align: right;
  background-color: rgba(0, 0, 0, 0.6)
}

.logo {
  margin: 120px auto 30px;
  max-width: 300px;
}

.header {
  max-width: 800px;
  margin: 80px auto 0px auto;
  padding: 0 8px;
}

.services {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 4px auto 14px auto;
  padding: 0 8px;
}

.service-type {
  margin-right: 8px;
  font-size: 14px;
  padding: 0.5em 1em;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.3);
  text-transform: uppercase;
  /*text-align: center;*/
}

.desc-container {
  margin: 20px auto;
  max-width: 800px;
  padding: 0 8px;
}

.cta-container {
  max-width: 800px;
  margin: 40px auto 200px auto;
  padding: 0 8px;
}

/*formspree*/

#formview textarea {
  height: 10.3em; 
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  border-radius: 0.25em;
 }

button,
input {
  line-height: normal;
 }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

  input, textarea {
  color: #444;
  font-size: 0.8em;
  font-family: 'mfont-normal', sans-serif;
  border: 1px solid #ddd;
  background: #FFF;
  padding: 0.9em;
  transition: all 0.3s ease-in-out;
  width: 100%; 
}
  input.code, textarea.code {
    font-family: "source-code-pro", monospace; 
  }
  input:focus, textarea:focus {
    border-color: #000;
    outline: none;
  }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 6px; }

form input, form textarea {
  margin-bottom: 0.5em; }

button, a.button {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 2px solid #d8d8d8;
  color: #444;
  background: #FFF;
  line-height: 1em;
  padding: 0.6em 0.9em;
  transition: all 0.3s ease-in-out; }
  button:hover, a.button:hover {
    border-color: #000;
    color: #000; }
    button:hover.emphasis, a.button:hover.emphasis {
      color: 000;
      background-color: #FFFFFF; }
  button[disabled], button[disabled]:hover, a.button[disabled], a.button[disabled]:hover {
    color: #a8a8a8;
    border-color: #a8a8a8; }

.animate {
  -moz-animation-iteration-count: once;
  -moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -moz-animation-duration: 0.4s;
  -webkit-animation-iteration-count: once;
  -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -webkit-animation-duration: 0.4s; }
  .animate.dropIn {
    -moz-animation-name: dropIn;
    -webkit-animation-name: dropIn; }

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    opacity: 0; }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-webkit-keyframes dropIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -150px, 0);
    -moz-transform: translate3d(0, -150px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0); } }

@-webkit-keyframes dropInLong {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -450px, 0);
    -moz-transform: translate3d(0, -450px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0); } }

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg); } }

@-webkit-keyframes rotateBack {
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); } }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -10000px;
  left: -10000px;
  opacity: 0;
  transition: opacity 0.4s linear;
  background: rgba(255, 255, 255, 0.96); }

body.showOverlay {
  overflow: hidden; }
  body.showOverlay .overlay {
    top: 0;
    left: 0;
    opacity: 1; }
    body.showOverlay .overlay iframe {
      -webkit-animation-iteration-count: once;
      -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
      -webkit-animation-duration: 0.4s;
      -moz-animation-name: dropInLong;
      -webkit-animation-name: dropInLong; }

.toggleOverlay {
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 2.2em;
  font-weight: 600;
  -moz-animation-iteration-count: once;
  -moz-animation-fill-mode: forwards;
  -moz-animation-timing-function: linear;
  -moz-animation-duration: 0.2s;
  -webkit-animation-iteration-count: once;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 0.2s; }

body.showOverlay .toggleOverlay {
  -moz-animation-name: rotate;
  -webkit-animation-name: rotate; }

#toast-container {
  right: 30%;
  left: 30%;
  width: 40%; }


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #a8a8a8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #a8a8a8;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #a8a8a8;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #a8a8a8;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #a8a8a8;
}