@charset "UTF-8";
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box;
  /*maybe big screens padding: 3rem;*/ }

body {
  font-family: "Montserrat", sans-serif; }

.heading-primary--main {
  color: white;
  font-weight: 800;
  font-size: 1.7em; }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    .heading-primary--main {
      font-size: 8rem; } }
  @media screen and (min-width: 768px) and (min-height: 500px) {
    .heading-primary--main {
      font-size: 8rem; } }
  @media screen and (min-width: 1024px) {
    .heading-primary--main {
      font-size: 9rem;
      margin-top: 3rem; } }
  @media screen and (min-width: 1024px) and (min-height: 800px) {
    .heading-primary--main {
      font-size: 10rem;
      margin-top: 10rem; } }

.heading-primary--sub {
  color: #F8ED3F;
  font-family: 'Just Another Hand', cursive;
  letter-spacing: 0.03em;
  font-size: 4rem; }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    .heading-primary--sub {
      font-size: 7rem; } }
  @media screen and (min-width: 1024px) {
    .heading-primary--sub {
      font-size: 8.5rem; } }
  @media screen and (min-width: 1024px) and (min-height: 800px) {
    .heading-primary--sub {
      font-size: 10rem; } }

.heading-primary--description {
  color: white;
  font-size: 1.6rem;
  font-weight: 500; }
  @media screen and (min-width: 360px) and (max-width: 450px) {
    .heading-primary--description {
      font-size: 1.8rem; } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    .heading-primary--description {
      font-size: 2.6rem; } }
  @media screen and (min-width: 1024px) {
    .heading-primary--description {
      font-size: 3rem; } }
  @media screen and (min-width: 1024px) and (min-height: 800px) {
    .heading-primary--description {
      font-size: 3.2rem; } }

.heading-secondary {
  font-size: 4rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase; }

.heading-tertiary {
  font-family: 'Just Another Hand', cursive;
  letter-spacing: 0.03em;
  font-size: 2.5rem; }

.text {
  font-size: 1.3rem; }

.href-link,
.href-link:focus,
.href-link:active,
.href-link:visited {
  text-decoration: none;
  color: black;
  display: inline-block;
  transition: .2s all; }

.href-link:hover {
  font-size: 1.5rem;
  transform: rotate(4deg); }

.u-center-text {
  text-align: center; }

.u-center-mobile-left-desktop {
  text-align: center; }
  @media screen and (min-width: 576px) {
    .u-center-mobile-left-desktop {
      text-align: left; } }

.u-center-mobile-right-desktop {
  text-align: center; }
  @media screen and (min-width: 576px) {
    .u-center-mobile-right-desktop {
      text-align: right; } }

.u-display-block {
  display: block; }

.u-margin-bottom-small {
  margin-bottom: 2rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.u-margin-top-small {
  margin-top: 1.5rem !important; }

.u-margin-top-medium {
  margin-top: 4rem !important; }

.u-margin-top-big {
  margin-top: 8rem !important; }

.u-margin-top-huge {
  margin-top: 10rem !important; }

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black;
  border-color: black;
  float: right;
  font-weight: 700;
  transition: .2s all; }

.btn-primary:hover {
  background-color: #24A349;
  border-color: #24A349;
  font-size: 1.5rem;
  transform: rotate(-4deg);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.form-control {
  border-color: rgba(36, 163, 72, 0.301);
  margin: 0 auto;
  width: 90%; }

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:visited {
  float: none !important;
  margin: 0 auto;
  display: block; }
  @media screen and (min-width: 576px) {
    .btn-primary,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:hover,
    .btn-primary:visited {
      float: right !important; } }

.ul-list {
  counter-reset: section;
  list-style: none; }

.list-item {
  margin: 0 0 10px 0;
  line-height: 3rem; }

.list-item:before {
  content: counter(section);
  counter-increment: section;
  margin: 0 1rem 0 0; }

.list-item:not(:last-child):after {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  /* This will put the pseudo element on its own line. */
  margin: 0 auto;
  /* This will center the border. */
  width: 20%;
  /* Change this to whatever width you want. */
  padding-top: 15px;
  /* This creates some space between the element and the border. */
  border-bottom: 2px solid #24A349;
  /* This creates the border. Replace black with whatever color you want. */
  border-end-start-radius: 100%;
  border-end-end-radius: 100%; }

@media screen and (min-width: 576px) {
  .list-item:not(:last-child):after {
    display: none; }
  .list-item:before {
    content: counter(section);
    counter-increment: section;
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin: 0 1rem 0 0;
    border-radius: 100%;
    text-align: center;
    background-color: #24A349;
    color: white;
    font-weight: 700;
    font-size: 1.5rem; } }

.modal-title {
  padding-left: 1rem; }

.modal-image {
  width: 100%; }

.footer {
  background-color: #EAE8D7;
  bottom: 0;
  height: 5vh;
  display: flex; }
  .footer__copy {
    text-align: center;
    margin: auto; }

.header {
  width: 100vw;
  text-align: center;
  padding-top: 5rem;
  background-color: black; }
  @media screen and (min-width: 360px) {
    .header {
      padding-top: 10rem; } }
  @media screen and (min-width: 576px) {
    .header {
      padding-top: 8rem;
      min-height: calc(100vh - 52px); } }
  .header img {
    height: auto;
    width: 100%; }
  @media screen and (min-width: 450px) and (max-width: 600px) {
    .header-text {
      max-width: 60%;
      padding-left: 2rem;
      margin-top: -5rem; } }
  @media screen and (orientation: portrait) {
    .header-text {
      width: 100%; } }
  @media screen and (min-width: 450px) and (max-width: 725px) {
    .header-pic {
      width: 40%; } }
  @media screen and (orientation: portrait) {
    .header-pic {
      width: 100%; } }

@media screen and (orientation: landscape) {
  .heading-primary,
  .heading-primary--description {
    text-align: left; } }

@media screen and (orientation: landscape) {
  .heading-primary--sub {
    padding-left: 4.2px; } }

.hr {
  /*top right bottom left;*/
  margin: .9rem auto 1.1rem auto;
  border-top: none;
  border: 3px solid #24A349;
  width: 25%;
  border-radius: 3px; }
  @media screen and (orientation: landscape) {
    .hr {
      margin: .9rem 1rem 1.1rem .05rem; } }

@media screen and (min-width: 768px) and (orientation: portrait) {
  #home .row .header-text,
  #home .row .header-pic {
    min-width: 100%; } }

.nav-item {
  margin: auto; }

i {
  font-size: 3rem; }

.navbar-nav-icons {
  margin-top: 1rem; }
  @media screen and (min-width: 576px) {
    .navbar-nav-icons {
      margin-top: 0; } }

.navbar-toggler {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  text-transform: uppercase; }

.navbar-nav {
  display: flex;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 1.5px; }

.navbar-mobile {
  background-color: #D9D6B7; }

.navbar .nav-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: black; }
  .navbar .nav-link:hover, .navbar .nav-link:focus {
    color: #24A349; }

@media screen and (min-width: 576px) {
  .navbar {
    transition: all 0.15s ease;
    background-color: #242222;
    color: white; }
    .navbar .nav-link {
      color: white; }
    .navbar.before-home {
      background-color: #242222;
      color: white; }
      .navbar.before-home .nav-link {
        color: white; }
    .navbar.past-home {
      background-color: rgba(255, 255, 255, 0.65);
      text-shadow: 2px -2px 10px #FFFFFF,
 -2px 2px 10px #FFFFFF,
 -2px 2px 10px #FFFFFF,
 2px -2px 5px #FFFFFF,
 0 0 20px #FFF,
 0 0 20px #FFF,
 0 0 20px #FFF,
 0 0 20px #FFF;
      color: black; }
      .navbar.past-home .nav-link {
        color: black; } }

.nav-link:hover, .nav-link:focus {
  color: #24A349 !important; }

.section {
  padding-top: 5rem;
  min-height: calc(95vh - 39px); }
  @media screen and (min-width: 576px) {
    .section {
      padding-top: 8rem;
      min-height: calc(100vh - $footer-height - 52px); } }
  .section-about {
    margin: 0 auto;
    margin-bottom: 12rem; }
    @media screen and (min-width: 576px) {
      .section-about {
        margin-bottom: 0; } }
  .section-projects {
    background-color: #EAE8D7;
    padding-bottom: 2rem; }
    .section-projects h3 {
      margin-bottom: 2rem; }

.devicons-block {
  text-align: center;
  border: 1px solid #24A349;
  border-radius: 2px;
  padding: 1rem;
  text-align: center;
  max-width: 80vw;
  margin: 2rem auto; }
  .devicons-block__icon-image {
    margin: .6rem;
    width: auto;
    height: 2.7rem; }
    .devicons-block__icon-image--bigger-1 {
      width: auto;
      height: 3rem; }
    .devicons-block__icon-image--bigger-2 {
      width: auto;
      height: 5rem; }
  .devicons-block__and-more {
    background-color: #D9D6B7;
    position: relative;
    bottom: -20px;
    height: 4rem;
    width: 30%;
    margin: 0 auto;
    clip-path: polygon(0 4%, 100% 0, 94% 91%, 5% 100%); }
    @media screen and (min-width: 600px) {
      .devicons-block__and-more {
        width: 60%; } }

.project-img {
  cursor: pointer; }

/*!
 *  Devicons 1.8.0 made by Theodore Vorillas / http://vorillaz.com 
 */
@font-face {
  font-family: 'devicons';
  src: url("../fonts/devicons.eot?xqxft6");
  src: url("../fonts/devicons.eot?#iefixxqxft6") format("embedded-opentype"), url("../fonts/devicons.woff?xqxft6") format("woff"), url("../fonts/devicons.ttf?xqxft6") format("truetype"), url("../fonts/devicons.svg?xqxft6#devicons") format("svg");
  font-weight: normal;
  font-style: normal; }

.devicons {
  font-family: 'devicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.devicons-git:before {
  content: ""; }

.devicons-git_compare:before {
  content: ""; }

.devicons-git_branch:before {
  content: ""; }

.devicons-git_commit:before {
  content: ""; }

.devicons-git_pull_request:before {
  content: ""; }

.devicons-git_merge:before {
  content: ""; }

.devicons-bitbucket:before {
  content: ""; }

.devicons-github_alt:before {
  content: ""; }

.devicons-github_badge:before {
  content: ""; }

.devicons-github:before {
  content: ""; }

.devicons-github_full:before {
  content: ""; }

.devicons-java:before {
  content: ""; }

.devicons-scala:before {
  content: ""; }

.devicons-python:before {
  content: ""; }

.devicons-go:before {
  content: ""; }

.devicons-ruby_on_rails:before {
  content: ""; }

.devicons-django:before {
  content: ""; }

.devicons-markdown:before {
  content: ""; }

.devicons-php:before {
  content: ""; }

.devicons-mysql:before {
  content: ""; }

.devicons-streamline:before {
  content: ""; }

.devicons-database:before {
  content: ""; }

.devicons-laravel:before {
  content: ""; }

.devicons-javascript:before {
  content: ""; }

.devicons-angular:before {
  content: ""; }

.devicons-backbone:before {
  content: ""; }

.devicons-coffeescript:before {
  content: ""; }

.devicons-jquery:before {
  content: ""; }

.devicons-modernizr:before {
  content: ""; }

.devicons-jquery_ui:before {
  content: ""; }

.devicons-ember:before {
  content: ""; }

.devicons-dojo:before {
  content: ""; }

.devicons-nodejs:before {
  content: ""; }

.devicons-nodejs_small:before {
  content: ""; }

.devicons-javascript_shield:before {
  content: ""; }

.devicons-bootstrap:before {
  content: ""; }

.devicons-sass:before {
  content: ""; }

.devicons-css3_full:before {
  content: ""; }

.devicons-css3:before {
  content: ""; }

.devicons-html5:before {
  content: ""; }

.devicons-html5_multimedia:before {
  content: ""; }

.devicons-html5_device_access:before {
  content: ""; }

.devicons-html5_3d_effects:before {
  content: ""; }

.devicons-html5_connectivity:before {
  content: ""; }

.devicons-ghost_small:before {
  content: ""; }

.devicons-ghost:before {
  content: ""; }

.devicons-magento:before {
  content: ""; }

.devicons-joomla:before {
  content: ""; }

.devicons-jekyll_small:before {
  content: ""; }

.devicons-drupal:before {
  content: ""; }

.devicons-wordpress:before {
  content: ""; }

.devicons-grunt:before {
  content: ""; }

.devicons-bower:before {
  content: ""; }

.devicons-npm:before {
  content: ""; }

.devicons-yahoo_small:before {
  content: ""; }

.devicons-yahoo:before {
  content: ""; }

.devicons-bing_small:before {
  content: ""; }

.devicons-windows:before {
  content: ""; }

.devicons-linux:before {
  content: ""; }

.devicons-ubuntu:before {
  content: ""; }

.devicons-android:before {
  content: ""; }

.devicons-apple:before {
  content: ""; }

.devicons-appstore:before {
  content: ""; }

.devicons-phonegap:before {
  content: ""; }

.devicons-blackberry:before {
  content: ""; }

.devicons-stackoverflow:before {
  content: ""; }

.devicons-techcrunch:before {
  content: ""; }

.devicons-codrops:before {
  content: ""; }

.devicons-css_tricks:before {
  content: ""; }

.devicons-smashing_magazine:before {
  content: ""; }

.devicons-netmagazine:before {
  content: ""; }

.devicons-codepen:before {
  content: ""; }

.devicons-cssdeck:before {
  content: ""; }

.devicons-hackernews:before {
  content: ""; }

.devicons-dropbox:before {
  content: ""; }

.devicons-google_drive:before {
  content: ""; }

.devicons-visualstudio:before {
  content: ""; }

.devicons-unity_small:before {
  content: ""; }

.devicons-raspberry_pi:before {
  content: ""; }

.devicons-chrome:before {
  content: ""; }

.devicons-ie:before {
  content: ""; }

.devicons-firefox:before {
  content: ""; }

.devicons-opera:before {
  content: ""; }

.devicons-safari:before {
  content: ""; }

.devicons-swift:before {
  content: ""; }

.devicons-symfony:before {
  content: ""; }

.devicons-symfony_badge:before {
  content: ""; }

.devicons-less:before {
  content: ""; }

.devicons-stylus:before {
  content: ""; }

.devicons-trello:before {
  content: ""; }

.devicons-atlassian:before {
  content: ""; }

.devicons-jira:before {
  content: ""; }

.devicons-envato:before {
  content: ""; }

.devicons-snap_svg:before {
  content: ""; }

.devicons-raphael:before {
  content: ""; }

.devicons-google_analytics:before {
  content: ""; }

.devicons-compass:before {
  content: ""; }

.devicons-onedrive:before {
  content: ""; }

.devicons-gulp:before {
  content: ""; }

.devicons-atom:before {
  content: ""; }

.devicons-cisco:before {
  content: ""; }

.devicons-nancy:before {
  content: ""; }

.devicons-clojure:before {
  content: ""; }

.devicons-clojure_alt:before {
  content: ""; }

.devicons-perl:before {
  content: ""; }

.devicons-celluloid:before {
  content: ""; }

.devicons-w3c:before {
  content: ""; }

.devicons-redis:before {
  content: ""; }

.devicons-postgresql:before {
  content: ""; }

.devicons-webplatform:before {
  content: ""; }

.devicons-jenkins:before {
  content: ""; }

.devicons-requirejs:before {
  content: ""; }

.devicons-opensource:before {
  content: ""; }

.devicons-typo3:before {
  content: ""; }

.devicons-uikit:before {
  content: ""; }

.devicons-doctrine:before {
  content: ""; }

.devicons-groovy:before {
  content: ""; }

.devicons-nginx:before {
  content: ""; }

.devicons-haskell:before {
  content: ""; }

.devicons-zend:before {
  content: ""; }

.devicons-gnu:before {
  content: ""; }

.devicons-yeoman:before {
  content: ""; }

.devicons-heroku:before {
  content: ""; }

.devicons-debian:before {
  content: ""; }

.devicons-travis:before {
  content: ""; }

.devicons-dotnet:before {
  content: ""; }

.devicons-codeigniter:before {
  content: ""; }

.devicons-javascript_badge:before {
  content: ""; }

.devicons-yii:before {
  content: ""; }

.devicons-msql_server:before {
  content: ""; }

.devicons-composer:before {
  content: ""; }

.devicons-krakenjs_badge:before {
  content: ""; }

.devicons-krakenjs:before {
  content: ""; }

.devicons-mozilla:before {
  content: ""; }

.devicons-firebase:before {
  content: ""; }

.devicons-sizzlejs:before {
  content: ""; }

.devicons-creativecommons:before {
  content: ""; }

.devicons-creativecommons_badge:before {
  content: ""; }

.devicons-mitlicence:before {
  content: ""; }

.devicons-senchatouch:before {
  content: ""; }

.devicons-bugsense:before {
  content: ""; }

.devicons-extjs:before {
  content: ""; }

.devicons-mootools_badge:before {
  content: ""; }

.devicons-mootools:before {
  content: ""; }

.devicons-ruby_rough:before {
  content: ""; }

.devicons-komodo:before {
  content: ""; }

.devicons-coda:before {
  content: ""; }

.devicons-bintray:before {
  content: ""; }

.devicons-terminal_badge:before {
  content: ""; }

.devicons-code_badge:before {
  content: ""; }

.devicons-mongodb:before {
  content: ""; }