@font-face {
  font-family: "Ionicons";
  src: url("../fonts/ionicons/fonts/ionicons.eot?v=2.0.0");
  src: url("../fonts/ionicons/fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons/fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons/fonts/ionicons.woff?v=2.0.0") format("woff"), url("../fonts/ionicons/fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome/fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("../fonts/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

html {
  overflow-x: hidden;
  font-size: 1em;
  margin: 2rem; }
  @media screen and (max-width: 1003px) {
    html {
      margin: 1rem; } }

body {
  font-family: "Work Sans", Arial, sans-serif;
  background: #F4F9F4;
  margin-left: calc(50% + 5rem);
  margin-right: 8rem;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.75); }
  @media screen and (max-width: 1431px) {
    body {
      margin-left: calc(50% + 40px);
      margin-right: 5rem; } }
  @media screen and (max-width: 1003px) {
    body {
      margin-left: 0;
      margin-right: 0rem; } }

input, textarea, p {
  font-weight: 300; }

::-moz-selection {
  background: #000;
  color: #fff; }

::selection {
  background: #000;
  color: #fff; }

::-moz-selection {
  background: #000;
  color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300 !important; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }

.probootstrap-logo {
  position: fixed;
  right: 0;
  height: 100vh;
  width: 5rem;
  background: #b2d5b2;
  top: 0;
  text-align: center;
  -webkit-transition: 0s all;
  -o-transition: 0s all;
  transition: 0s all; }
  @media screen and (max-width: 1003px) {
    .probootstrap-logo {
      position: relative;
      height: inherit;
      background: #b2d5b2;
      width: 100%;
      display: block;
      padding: 20px; } }
  .probootstrap-logo h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    letter-spacing: .3em;
    -webkit-transform: translate(10px, -100%) rotate(90deg);
    -ms-transform: translate(10px, -100%) rotate(90deg);
    transform: translate(10px, -100%) rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff; }
    @media screen and (max-width: 1003px) {
      .probootstrap-logo h1 {
        position: relative;
        height: inherit;
        left: inherit;
        top: inherit;
        -webkit-transform: translate(0%, 0%) rotate(0deg);
        -ms-transform: translate(0%, 0%) rotate(0deg);
        transform: translate(0%, 0%) rotate(0deg); } }
  .probootstrap-logo:hover {
    background: #91c391; }

.probootsrap-nav {
  padding-top: .5em;
  margin-top: 0rem;
  margin-bottom: 4rem; }
  @media screen and (max-width: 1003px) {
    .probootsrap-nav {
      text-align: center; } }
  .probootsrap-nav ul {
    margin: 0;
    padding: 0; }
    .probootsrap-nav ul li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block; }
      @media screen and (max-width: 480px) {
        .probootsrap-nav ul li {
          display: block; } }
      .probootsrap-nav ul li a {
        padding: .5rem 0rem;
        margin: 0 .5rem;
        display: block;
        color: rgba(0, 0, 0, 0.4);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .2em;
        border-bottom: 2px solid transparent; }
        @media screen and (max-width: 1431px) {
          .probootsrap-nav ul li a {
            margin: 0 .2rem; } }
        @media screen and (max-width: 480px) {
          .probootsrap-nav ul li a {
            border-bottom: 2px solid transparent;
            padding: .5rem 0rem; } }
        .probootsrap-nav ul li a:hover {
          color: rgba(0, 0, 0, 0.7); }
      .probootsrap-nav ul li:first-child a {
        margin-left: 0; }
      .probootsrap-nav ul li.active a {
        color: rgba(0, 0, 0, 0.7);
        border-bottom: 2px solid #F96D00; }
        @media screen and (max-width: 480px) {
          .probootsrap-nav ul li.active a {
            border-bottom: 2px solid transparent; } }

.probootstrap-main {
  min-height: calc(100vh - 25rem); }

.probootstrap-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: calc(50% - 5rem);
  height: 100vh;
  top: 0;
  left: 5rem;
  position: fixed; }
  @media screen and (max-width: 1003px) {
    .probootstrap-bg {
      position: relative;
      left: 0;
      width: 100%;
      height: 30vh;
      margin-bottom: 30px; } }

footer {
  margin-top: 3rem; }

.probootstrap-animate {
  opacity: 0;
  visibility: hidden; }