@charset "UTF-8";
/**
 * @license
 * MyFonts Webfont Build ID 4089100, 2021-05-15T18:57:37-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: BoubaRound-Black by HVD Fonts
 * URL: https://www.myfonts.com/fonts/hvdfonts/bouba-round/black/
 * Copyright: Copyright © 2020 by Hannes von Doehren. All rights reserved.
 *
 *
 *
 * © 2021 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3e650c");
@font-face {
  font-family: "BoubaRound-Black";
  src: url("webFonts/BoubaRoundBlack/font.woff2") format("woff2"), url("webFonts/BoubaRoundBlack/font.woff") format("woff"); }
* {
  box-sizing: border-box; }

html {
  scroll-behavior: unset !important; }

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

body {
  background-color: #fff;
  position: relative; }
  body .container {
    padding-right: 20px;
    padding-left: 20px; }
    body .container h2 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 60px;
      color: #200c42;
      margin-bottom: 15px; }
      body .container h2 span {
        color: #f8b827; }
    body .container h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 32px;
      color: #3f5cbf; }
    body .container p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin-bottom: 60px; }

.burger-container {
  position: fixed;
  bottom: 80px;
  right: 40px;
  background: #fff;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  box-shadow: 0px 7px 40px rgba(63, 92, 191, 0.45);
  z-index: 1000;
  overflow: hidden;
  display: none; }
  .burger-container .burger {
    display: block;
    width: 40px;
    height: 30px;
    margin: 0;
    float: none;
    left: 20px;
    top: 23px; }
  .burger-container .burger:after {
    content: "";
    display: block;
    position: absolute;
    height: 80px;
    width: 80px; }
  .burger-container .burger-lines {
    height: 7px;
    margin: 0; }
  .burger-container .burger.burger-squeeze.open .burger-lines:before,
  .burger-container .burger.burger-squeeze.open .burger-lines:after {
    left: 0.3em;
    background-color: #f8b827; }
  .burger-container .burger.burger-squeeze .burger-lines,
  .burger-container .burger.burger-squeeze .burger-lines:after,
  .burger-container .burger.burger-squeeze .burger-lines:before {
    height: 6px; }
  .burger-container .burger.burger-squeeze.open .burger-lines,
  .burger-container .burger.burger-squeeze.open .burger-lines:after,
  .burger-container .burger.burger-squeeze.open .burger-lines:before {
    width: 35px;
    height: 6px; }
  .burger-container .burger .burger-lines,
  .burger-container .burger .burger-lines:after,
  .burger-container .burger .burger-lines:before {
    background-color: #48d5e5; }
  .burger-container .burger .burger-lines:before {
    background-color: #f8b827; }
  .burger-container .burger .burger-lines:after {
    background-color: #3f5cbf; }

nav {
  height: 90px;
  position: fixed;
  width: 100%;
  max-width: 220px;
  z-index: 10000;
  top: 0;
  right: 0; }
  nav .container {
    position: relative; }
    nav .container .col-sm-6:nth-of-type(2) {
      position: relative; }
    nav .container img {
      margin-top: 30px;
      height: 30px; }
  nav ul {
    top: 40px;
    position: absolute;
    list-style: none;
    right: 30px;
    margin-bottom: 0; }
    nav ul .navIcon {
      position: absolute; }
    nav ul .navIcon1 {
      top: 16px;
      right: 19px; }
    nav ul .navIcon2 {
      top: 19px;
      right: 18px; }
    nav ul .navIcon3 {
      top: 19px;
      right: 21px; }
    nav ul .navIcon4 {
      top: 18px;
      right: 18px; }
    nav ul .hideInit {
      opacity: 0;
      transition: all 0.2s ease;
      margin-right: 62px;
      transition: all 0.2s ease;
      text-align: right;
      display: inline-block; }
    nav ul a {
      display: inline-block;
      text-align: right;
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: #fff;
      width: 100%;
      max-width: 220px;
      padding: 20px 0;
      background-color: none;
      text-decoration: none;
      border-radius: 60px;
      position: relative;
      z-index: 0;
      transition: all 0.5s ease;
      transition: background-color 0.2s ease;
      max-height: 64px;
      margin-bottom: 20px; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 64px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
    nav ul .paynesGrey::before {
      background-color: #200c42; }
    nav ul .oceanBlue::before {
      background-color: #3f5cbf; }
    nav ul .seaBreeze::before {
      background-color: #53d5e5; }
    nav ul .pinneapleYellow::before {
      background-color: #f8b827; }
    nav ul .sunsetVista::before {
      background-color: #d30c7b; }
    nav ul a:hover:before,
    nav ul a:active:before,
    nav ul a:focus:before {
      color: #fff;
      width: 180px;
      transition: all 0.2s ease; }
    nav ul a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    nav ul a:hover .hideInit {
      opacity: 1;
      transition: all 0.2s ease; }

#mainSection {
  width: 100%;
  overflow: hidden; }
  #mainSection .hexagon {
    position: absolute;
    height: 175px;
    bottom: -87.5px;
    right: -50px;
    opacity: 1; }
  #mainSection h1:first-of-type {
    color: #3f5cbf;
    font-size: 42px;
    margin: 180px 0 15px 0; }
  #mainSection .wrapper {
    position: relative;
    padding: 40px 0 180px 0;
    z-index: 0; }
  #mainSection .wrapper::before {
    content: "";
    position: absolute;
    border-bottom-left-radius: 50px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(72, 213, 229, 0.1) 0%, rgba(211, 12, 123, 0.1) 100%);
    top: 0;
    left: 60px;
    z-index: -1; }
  #mainSection .container {
    z-index: 10;
    position: relative; }
    #mainSection .container .col-sm-6 {
      align-content: center; }
  #mainSection .mainLogo {
    height: 30px; }
  #mainSection .mainIllustration {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center; }
    #mainSection .mainIllustration img {
      width: 100%;
      max-width: 100%; }
  #mainSection .typedHeight {
    height: 108px;
    margin-bottom: 30px; }
  #mainSection h1,
  #mainSection #typed {
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-size: 80px;
    color: #200c42; }
    #mainSection h1 span,
    #mainSection #typed span {
      color: #f8b827; }
  #mainSection .yellowLightning {
    display: inline-block;
    stroke: #f8b827;
    stroke-width: 1.5px;
    fill: none;
    height: 42px;
    margin-top: -18px;
    transform: rotate(0deg);
    margin-left: 8px; }
  #mainSection p {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #200c42;
    margin-bottom: 0; }
  #mainSection a {
    display: inline-block;
    text-align: center;
    margin-top: 30px;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    width: 100%;
    max-width: 220px;
    padding: 18.5px 0;
    background-color: none;
    text-decoration: none;
    border-radius: 60px;
    position: relative;
    z-index: 0;
    transition: all 0.5s ease;
    transition: background-color 0.2s ease; }
    #mainSection a::before {
      content: "";
      position: absolute;
      background-color: #f8b827;
      width: 64px;
      height: 64px;
      border-radius: 60px;
      z-index: -1;
      top: 0;
      left: 0;
      transition: all 0.5s ease; }
  #mainSection .bolt {
    opacity: 0;
    margin-left: 15px;
    transition: all 0.2s ease; }
  #mainSection .yellowDots {
    position: absolute;
    bottom: 120px;
    left: -120px; }
  #mainSection a:hover:before,
  #mainSection a:active:before,
  #mainSection a:focus:before {
    color: #fff;
    width: 220px;
    box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
    transition: all 0.2s ease; }
  #mainSection a:hover {
    color: #fff;
    transition: all 0.2s ease; }
  #mainSection a:hover {
    color: #fff;
    transition: all 0.2s ease; }
  #mainSection a:hover .bolt {
    opacity: 1;
    transition: all 0.2s ease; }

#mySkills {
  position: relative;
  overflow: hidden; }
  #mySkills .container {
    padding-top: 60px;
    padding-bottom: 60px; }
    #mySkills .container .hexagon {
      position: absolute;
      height: 175px;
      top: -87.5px;
      right: -50px;
      opacity: 0.6; }
    #mySkills .container h2 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 60px;
      color: #200c42; }
      #mySkills .container h2 span {
        color: #f8b827; }
    #mySkills .container h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 32px;
      color: #3f5cbf; }
    #mySkills .container p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 17px;
      color: #200c42;
      margin-bottom: 60px; }
    #mySkills .container .skillBox {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.15);
      text-align: center;
      margin: 0 auto;
      max-width: 363px;
      width: 100%;
      padding: 0; }
    #mySkills .container .skillDescription {
      border-top: solid 1px #e0e0e0;
      padding: 0 40px 40px 40px;
      background-color: #fff;
      border-radius: 0 0 20px 20px; }
      #mySkills .container .skillDescription p {
        font-weight: 700;
        margin-bottom: 0px;
        font-size: 16px; }
      #mySkills .container .skillDescription ul {
        list-style: none;
        display: inline; }
        #mySkills .container .skillDescription ul li {
          display: inline-block; }
        #mySkills .container .skillDescription ul li:first-of-type,
        #mySkills .container .skillDescription ul li:nth-of-type(2) {
          float: left; }
        #mySkills .container .skillDescription ul li:nth-of-type(2) {
          padding-left: 10px; }
        #mySkills .container .skillDescription ul li:last-of-type {
          float: right; }
      #mySkills .container .skillDescription .likeSaveIcons {
        margin: 40px 0 20px 0;
        position: relative; }
        #mySkills .container .skillDescription .likeSaveIcons button {
          padding: 0;
          background-color: transparent;
          border: none; }
        #mySkills .container .skillDescription .likeSaveIcons .heart {
          stroke: #f45f5f;
          fill: none;
          height: 25px;
          transition: all 0.2s ease; }
        #mySkills .container .skillDescription .likeSaveIcons .likes {
          font-family: "BoubaRound-Black", "Poppins", sans-serif;
          font-size: 17px;
          margin-left: 0px;
          color: #3f5cbf;
          left: 35px;
          opacity: 0.75; }
        #mySkills .container .skillDescription .likeSaveIcons .clickedHeart {
          fill: #f45f5f;
          transition: all 0.2s ease;
          animation: 0.5s linear burst; }
        #mySkills .container .skillDescription .likeSaveIcons .heart:target {
          fill: #f45f5f;
          animation: 0.5s linear burst; }
@keyframes burst {
  0%,
          10% {
    transform: scale(1);
    opacity: 0.5;
    color: lavender; }
  45% {
    transform: scale(0.2) rotate(30deg);
    opacity: 0.75; }
  50% {
    transform: scale(2) rotate(-37.5deg);
    opacity: 1;
    color: red;
    text-shadow: 2px 2px 6px rgba(235, 9, 9, 0.5); }
  90%,
          95% {
    transform: scale(1) rotate(10deg);
    text-shadow: none; }
  100% {
    transform: rotate(-2.5deg); } }
        #mySkills .container .skillDescription .likeSaveIcons .bookmark {
          stroke: #f8b827;
          fill: none;
          height: 25px;
          cursor: pointer;
          transition: all 0.2s ease; }
        #mySkills .container .skillDescription .likeSaveIcons .clickedBookmark {
          fill: #f8b827;
          transition: all 0.2s ease; }
    #mySkills .container .iconBox {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 36px;
      margin: 30px auto 30px auto;
      transition: transform 0.5s ease-in-out; }
      #mySkills .container .iconBox svg {
        text-align: center; }
    #mySkills .container .iconBox:hover {
      transform: scale(0.8); }
    #mySkills .container .designIcon {
      transition: all 0.7s ease; }
    #mySkills .container .devIcon {
      transition: all 0.7s ease; }
    #mySkills .container .illustrationIcon {
      transition: all 0.7s ease; }
    #mySkills .container .designIcon:hover,
    #mySkills .container .illustrationIcon:hover,
    #mySkills .container .devIcon:hover {
      box-shadow: none;
      transition: all 0.7s ease; }

#parallaxMountain .container-fluid {
  min-height: 580px;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
  background-attachment: scroll;
  z-index: -1; }
  #parallaxMountain .container-fluid .mountain {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: 672px;
    margin-left: -336px;
    width: 100%;
    z-index: 2; }
  #parallaxMountain .container-fluid .sunMountain {
    max-width: 358px;
    position: absolute;
    left: 51%;
    top: -10%;
    z-index: 1;
    margin: 0 auto; }
  #parallaxMountain .container-fluid .topBox {
    max-width: 880px;
    width: 100%;
    margin-left: -440px;
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 0; }
  #parallaxMountain .container-fluid .bottomBox {
    max-width: 880px;
    width: 100%;
    margin-left: -440px;
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 3; }

#latestWork .container {
  padding-top: 60px;
  padding-bottom: 60px; }
  #latestWork .container p {
    font-size: 17px; }
  #latestWork .container a {
    text-decoration: none;
    color: #d30c7b;
    transition: all 0.2s ease; }
  #latestWork .container a:hover {
    opacity: 0.6;
    transition: all 0.2s ease; }
  #latestWork .container .projectWrapper {
    border-radius: 20px;
    margin-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex; }
    #latestWork .container .projectWrapper h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 48px;
      color: #200c42;
      z-index: 1000; }
      #latestWork .container .projectWrapper h3 span {
        color: #f8b827; }
    #latestWork .container .projectWrapper p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #200c42;
      margin-bottom: 0px;
      margin-top: 20px;
      z-index: 1000; }
    #latestWork .container .projectWrapper .col-md-5 {
      position: relative;
      z-index: 1; }
  #latestWork .container .noBtmMargin {
    margin-bottom: 0; }
  #latestWork .container .projectPadding1,
  #latestWork .container .projectPadding2,
  #latestWork .container .projectPadding3,
  #latestWork .container .projectPadding4,
  #latestWork .container .projectPadding5,
  #latestWork .container .projectPadding6 {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1000; }
  #latestWork .container .projectPadding1::before,
  #latestWork .container .projectPadding2::before,
  #latestWork .container .projectPadding3::before,
  #latestWork .container .projectPadding4::before,
  #latestWork .container .projectPadding5::before,
  #latestWork .container .projectPadding6::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.17);
    border-radius: 20px; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding6::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #fff; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding1::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding2::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding3::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding4::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding5::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding6::after,
  #latestWork .container .projectPadding6::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg1,
  #latestWork .container .projectImg2,
  #latestWork .container .projectImg3,
  #latestWork .container .projectImg4,
  #latestWork .container .projectImg5,
  #latestWork .container .projectImg6 {
    padding: 0 60px;
    text-align: center;
    min-height: 400px;
    z-index: 1000; }
    #latestWork .container .projectImg1 img,
    #latestWork .container .projectImg2 img,
    #latestWork .container .projectImg3 img,
    #latestWork .container .projectImg4 img,
    #latestWork .container .projectImg5 img,
    #latestWork .container .projectImg6 img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-height: 400%;
      max-width: 100%;
      z-index: 1000; }
  #latestWork .container .projectImg1::before,
  #latestWork .container .projectImg2::before,
  #latestWork .container .projectImg3::before,
  #latestWork .container .projectImg4::before,
  #latestWork .container .projectImg5::before,
  #latestWork .container .projectImg6::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.17); }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg6::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%); }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg1::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg2::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg3::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg4::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg5::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg6::after,
  #latestWork .container .projectImg6::before {
    border-radius: 0 20px 20px 0; }
#latestWork .projectImg1:after {
  background: url("../img/portfolio-website-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg2:after {
  background: url("../img/podcast-logo-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg3:after {
  background: url("../img/ebook-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg4:after {
  background: url("../img/vr-movie-app-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .modal {
  padding-top: 40px;
  z-index: 10000; }
  #latestWork .modal .btn-close {
    position: absolute;
    top: 14px;
    right: 20px;
    background: none;
    padding: 0;
    margin: 0;
    transition: opacity 0.2s ease; }
    #latestWork .modal .btn-close svg {
      width: 16px;
      height: 16px;
      vertical-align: top; }
  #latestWork .modal .btn-secondary {
    background-color: #3f5cbf;
    border: none;
    border-radius: 60px;
    max-width: 140px;
    padding: 14px 0;
    width: 100%;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.5s ease; }
  #latestWork .modal .btn-secondary:hover {
    box-shadow: 0px 7px 30px rgba(63, 92, 191, 0.7);
    transition: all 0.5s ease; }
  #latestWork .modal .btn-contact {
    background-color: #d30c7b;
    color: #fff;
    border: none;
    border-radius: 60px;
    max-width: 140px;
    padding: 14px 0;
    width: 100%;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.5s ease;
    margin-bottom: 0; }
  #latestWork .modal .btn-contact:hover {
    box-shadow: 0px 7px 40px rgba(211, 12, 123, 0.7);
    transition: all 0.5s ease; }
  #latestWork .modal .modal-content {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    overflow-y: scroll;
    z-index: 1; }
    #latestWork .modal .modal-content .col-sm-12 {
      text-align: center; }
    #latestWork .modal .modal-content .modalImg img {
      width: 100%;
      max-width: 960px;
      border-radius: 20px;
      box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.27); }
  #latestWork .modal .modal-header {
    padding: 20px;
    justify-content: center;
    position: relative; }
    #latestWork .modal .modal-header .modal-title {
      text-align: center;
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 28px;
      color: #200c42; }
      #latestWork .modal .modal-header .modal-title span {
        color: #f8b827; }
  #latestWork .modal .modal-body {
    background-color: #fff;
    overflow-y: initial;
    padding: 0; }
    #latestWork .modal .modal-body .container {
      padding: 60px 0; }
      #latestWork .modal .modal-body .container p {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-size: 17px;
        color: #200c42;
        margin: 60px 0 40px 0;
        text-align: center; }
      #latestWork .modal .modal-body .container .col-sm-8 p:first-of-type {
        margin: 60px 0 30px 0; }
      #latestWork .modal .modal-body .container .col-sm-8 p:nth-of-type(2) {
        margin: 0 0 40px 0; }
    #latestWork .modal .modal-body .modal-outro p:first-of-type {
      text-align: center;
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 28px;
      color: #200c42;
      margin: 20px 0 0 0; }
    #latestWork .modal .modal-body .modal-outro p:nth-of-type(2) {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin: 10px 0 15px 0; }
    #latestWork .modal .modal-body .modal-outro p:nth-of-type(3) {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin: 0 0 30px 0; }
  #latestWork .modal .modal-footer {
    display: none;
    background-color: #fff; }
  #latestWork .modal .modal-signature {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    margin-top: 60px; }
    #latestWork .modal .modal-signature img {
      width: 60px;
      height: 60px;
      margin: 0 24px;
      border-radius: 50%; }
  #latestWork .modal .line {
    width: 100%;
    border: 1px solid #e7e7e9; }
#latestWork .btn-close:hover {
  transition: opacity 0.2s ease; }
#latestWork .btn-yellow {
  display: inline-block;
  text-align: center;
  margin-top: 30px;
  font-family: "BoubaRound-Black", Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #200c42;
  width: 100%;
  max-width: 200px;
  padding: 18.5px 0;
  background-color: none;
  text-decoration: none;
  border-radius: 60px;
  position: relative;
  z-index: 0;
  transition: all 0.5s ease;
  transition: background-color 0.2s ease;
  z-index: 1000; }
  #latestWork .btn-yellow::before {
    content: "";
    position: absolute;
    background-color: #f8b827;
    width: 64px;
    height: 64px;
    border-radius: 60px;
    z-index: -1;
    top: 0;
    left: 0;
    transition: all 0.5s ease; }
#latestWork .bolt {
  opacity: 0;
  margin-left: 15px;
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover:before,
#latestWork .btn-yellow:active:before,
#latestWork .btn-yellow:focus:before {
  color: #fff;
  width: 200px;
  box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover {
  color: #fff;
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover {
  color: #fff;
  transition: all 0.2s ease; }

#contactSection {
  padding: 60px 0;
  position: relative; }
  #contactSection h2 {
    font-family: "BoubaRound-Black", "Poppins", sans-serif;
    font-size: 60px;
    color: #200c42;
    text-align: left; }
    #contactSection h2 span {
      color: #f8b827; }
  #contactSection h3 {
    text-align: left;
    font-family: "BoubaRound-Black", "Poppins", sans-serif;
    font-size: 32px;
    color: #3f5cbf;
    margin: 0; }
  #contactSection p {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #200c42;
    margin-bottom: 0;
    text-align: left; }
  #contactSection a {
    float: left;
    display: inline-block;
    text-align: center;
    margin-top: 30px;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    width: 100%;
    max-width: 220px;
    padding: 0;
    height: 64px;
    background-color: none;
    text-decoration: none;
    border-radius: 60px;
    position: relative;
    z-index: 0;
    transition: all 0.5s ease;
    transition: background-color 0.2s ease; }
    #contactSection a::before {
      content: "";
      position: absolute;
      background-color: #d30c7b;
      width: 64px;
      height: 64px;
      border-radius: 60px;
      z-index: -1;
      top: 0;
      left: 0;
      transition: all 0.5s ease; }
  #contactSection .col-lg-6 {
    background-color: none;
    text-align: center; }
  #contactSection .contactIllustration {
    background-image: url(../img/contact-beach-bg-03.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    height: 350px;
    width: 100%;
    max-width: 100%;
    position: absolute;
    z-index: -10000;
    height: 350px;
    top: 283px;
    left: 0; }
  #contactSection input.submit {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    border: none;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    height: 64px; }
  #contactSection .bolt {
    opacity: 0;
    margin-left: 15px;
    transition: all 0.2s ease; }
  #contactSection a:hover:before,
  #contactSection a:active:before,
  #contactSection a:focus:before {
    color: #fff;
    width: 220px;
    box-shadow: 0px 7px 40px rgba(211, 12, 123, 0.7);
    transition: all 0.2s ease; }
  #contactSection a:hover * {
    color: #fff;
    transition: all 0.2s ease; }
  #contactSection a input:focus {
    padding: 0; }
  #contactSection a:hover .bolt {
    opacity: 1;
    transition: all 0.2s ease; }
  #contactSection .container .col-lg-6:first-of-type {
    background-color: none; }
  #contactSection .container .col-lg-6:nth-of-type(2) {
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.15);
    padding: 40px; }
  #contactSection .form-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center; }
    #contactSection .form-container h2 {
      font-family: "BoubaRound-Black", Poppins, sans-serif; }
  #contactSection input,
  #contactSection textarea {
    width: 100%;
    margin-top: 40px;
    padding-bottom: 10px;
    border: none;
    border-bottom: 3px solid #d4d4d4;
    outline: none;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #200c42;
    transition: all 0.5s ease;
    background-color: transparent; }
  #contactSection ::placeholder {
    color: #ccc; }
  #contactSection input:focus,
  #contactSection textarea:focus {
    border-color: #3f5cbf;
    padding-bottom: 20px;
    transition: all 0.5s ease; }

#footerSection {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%);
  background-position: right -60px; }
  #footerSection h1:first-of-type {
    color: #3f5cbf;
    font-size: 42px;
    margin: 0; }
  #footerSection .container {
    z-index: 1000; }
  #footerSection .col-sm-6 {
    display: flex;
    align-self: center; }
  #footerSection .footerLogo {
    justify-content: flex-end; }
    #footerSection .footerLogo img {
      width: 100%;
      max-width: 169px; }
  #footerSection .rightsReserved {
    justify-content: flex-start; }
  #footerSection .wrapper {
    position: relative;
    padding: 0;
    z-index: 0; }
  #footerSection .wrapper::before {
    content: "";
    position: absolute;
    border-top-right-radius: 50px;
    width: 100%;
    height: 100%;
    background: #200c42;
    top: 0;
    right: 60px;
    z-index: -1; }
  #footerSection p {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: #fff;
    margin: 0; }
  #footerSection img {
    float: right;
    margin-top: 40px;
    margin-bottom: 40px; }

#socialFooterWrap {
  position: absolute;
  width: 100%;
  bottom: 0; }

#footerSocialMedia {
  width: 100%;
  overflow: hidden;
  position: relative; }
  #footerSocialMedia .wrapper {
    position: relative;
    width: 100%;
    z-index: 0; }
  #footerSocialMedia .wrapper::before {
    content: "";
    position: absolute;
    border-top-left-radius: 50px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%);
    top: 0;
    left: 60px;
    z-index: -1; }
  #footerSocialMedia ul {
    list-style: none;
    padding: 0;
    margin: 40px 0; }
    #footerSocialMedia ul li {
      display: inline;
      margin-right: 40px;
      opacity: 0.75;
      transition: all 0.2s ease; }
    #footerSocialMedia ul li:hover {
      opacity: 0.5;
      transition: all 0.2s ease; }
    #footerSocialMedia ul li:last-of-type {
      margin-right: 0px; }
    #footerSocialMedia ul a {
      text-decoration: none; }

.display {
  display: inline-block !important; }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1020px) {
  #mainSection .wrapper::before {
    left: 20px; }

  #footerSocialMedia .wrapper::before {
    left: 20px; }

  #footerSection .wrapper::before {
    right: 20px; } }
/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 576px and down) */
@media only screen and (max-width: 575px) {
  #footerSocialMedia ul {
    text-align: center; }

  #footerSection .footerLogo {
    justify-content: center; }
    #footerSection .footerLogo img {
      float: none;
      margin-bottom: 30px; }
  #footerSection .rightsReserved {
    justify-content: center;
    text-align: center;
    margin-bottom: 40px; } }
/* Medium devices (landscape tablets, 767px and down) */
@media only screen and (max-width: 767px) {
  #mainSection {
    width: 100%;
    overflow: hidden; }
    #mainSection h1:first-of-type {
      color: #3f5cbf;
      font-size: 32px; }
    #mainSection h1,
    #mainSection #typed {
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-size: 60px;
      color: #200c42; }
      #mainSection h1 span,
      #mainSection #typed span {
        color: #f8b827; }
    #mainSection #typed {
      min-height: 12px; }
    #mainSection .yellowLightning {
      display: inline-block;
      stroke: #f8b827;
      stroke-width: 1.5px;
      fill: none;
      height: 42px;
      margin-top: -18px;
      transform: rotate(0deg);
      margin-left: 8px; }
    #mainSection .typedHeight {
      height: 81px;
      margin-bottom: 20px; }
    #mainSection p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin-bottom: 0; }
    #mainSection a {
      display: inline-block;
      text-align: center;
      margin-top: 30px;
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: #200c42;
      width: 100%;
      max-width: 220px;
      padding: 20px 0;
      background-color: none;
      text-decoration: none;
      border-radius: 60px;
      position: relative;
      z-index: 0;
      transition: all 0.5s ease;
      transition: background-color 0.2s ease; }
      #mainSection a::before {
        content: "";
        position: absolute;
        background-color: #f8b827;
        width: 64px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        left: 0;
        transition: all 0.5s ease; }
    #mainSection .bolt {
      opacity: 0;
      margin-left: 15px;
      transition: all 0.2s ease; }
    #mainSection a:hover:before,
    #mainSection a:active:before,
    #mainSection a:focus:before {
      color: #fff;
      width: 220px;
      box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
      transition: all 0.2s ease; }
    #mainSection a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    #mainSection a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    #mainSection a:hover .bolt {
      opacity: 1;
      transition: all 0.2s ease; }

  #mySkills .container .col-sm-8 {
    width: 100%; }

  #latestWork .container .col-sm-8 {
    width: 100%; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding1::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding2::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding3::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding4::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding5::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding6::after,
  #latestWork .container .projectPadding6::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectWrapper h3 {
    font-size: 32px; }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg1::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg2::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg3::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg4::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg5::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg6::after,
  #latestWork .container .projectImg6::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .offset-sm-2 {
    margin: 0; }
  #latestWork .modal-body .container {
    padding: 60px 20px !important; }
    #latestWork .modal-body .container .row {
      padding: 0; }

  #mainSection .wrapper::before {
    left: 0px; }

  #footerSocialMedia .wrapper::before {
    left: 0px; }

  #footerSection .wrapper::before {
    right: 0px; } }
/* Medium devices (landscape tablets, 991px and down) */
@media only screen and (max-width: 991px) {
  #mainSection h1:first-of-type {
    margin-top: 80px; }
  #mainSection .mainIllustration img {
    max-width: 560px;
    width: 75%; }
  #mainSection a {
    margin-bottom: 60px; }
  #mainSection .yellowDots {
    bottom: -100px; }

  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; }

  #mySkills .container .col-sm-8:first-of-type {
    width: 100%; }
  #mySkills .container h2 {
    font-size: 52px; }
  #mySkills .container .skillBox {
    margin-bottom: 60px; }
  #mySkills .container .skillBox:last-of-type {
    margin-bottom: 0; }

  #parallaxMountain .container-fluid {
    min-height: 380px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 460px;
      margin-left: -230px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 220px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 600px;
      width: 100%;
      margin-left: -300px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 600px;
      width: 100%;
      margin-left: -300px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; }

  #latestWork .container .col-sm-8:first-of-type {
    width: 100%; }
  #latestWork .container h2 {
    font-size: 52px; }

  #contactSection .container h2 {
    font-size: 52px; }
  #contactSection .container .col-lg-6:nth-of-type(2) {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    margin: 60px auto 0 auto;
    max-width: 90%; }
  #contactSection .container input {
    margin-top: 35px; }
  #contactSection .container input.submit {
    margin-top: 0; }
  #contactSection .container textarea#message {
    max-height: 160px; }
  #contactSection .contactIllustration {
    top: 334px; } }
@media only screen and (max-width: 428px) {
  #parallaxMountain .container-fluid {
    min-height: 240px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 300px;
      margin-left: -150px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 140px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 320px;
      width: 100%;
      margin-left: -160px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 320px;
      width: 100%;
      margin-left: -160px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; } }
@media only screen and (min-width: 429px) and (max-width: 620px) {
  #parallaxMountain .container-fluid {
    min-height: 300px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 380px;
      margin-left: -190px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 180px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 420px;
      width: 100%;
      margin-left: -210px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 420px;
      width: 100%;
      margin-left: -210px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; } }
@media only screen and (max-width: 1199px) {
  #mainSection .yellowDots {
    bottom: -100px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #contactSection .contactIllustration {
    top: 309px; } }
@media only screen and (max-width: 768px) {
  #contactSection .contactIllustration {
    top: 360px; } }
@media only screen and (max-width: 437px) {
  #contactSection .contactIllustration {
    top: 385px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #mySkills .skillBox:last-of-type {
    margin-top: 60px; } }
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #mainSection .yellowDots {
    bottom: 0; } }
@media only screen and (min-width: 1020px) and (max-width: 1450px) {
  #mainSection .wrapper::before {
    left: 25px; }

  #footerSocialMedia .wrapper::before {
    left: 25px; }

  #footerSection .wrapper::before {
    right: 25px; } }
/* Extra large devices (large laptops and desktops, 1200px and up) */
/* iPad Pro 12.9) */
@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; } }
@media only screen and (max-width: 1024px) {
  #mainSection a {
    color: #fff; }
  #mainSection a::before {
    width: 220px; }
  #mainSection .bolt {
    opacity: 1;
    display: none; }
    #mainSection .bolt svg {
      stroke-width: 1.5px;
      fill: #fff; }
  #mainSection .yellowDots {
    bottom: -120px; }

  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; }

  #latestWork .btn-yellow {
    color: #fff; }
  #latestWork .btn-yellow::before {
    width: 200px; }

  #contactSection input.submit {
    color: #fff; }
  #contactSection a::before {
    width: 220px; } }
@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  #mainSection a {
    color: #fff; }
  #mainSection a::before {
    width: 220px; }
  #mainSection .bolt {
    opacity: 1;
    display: none; }
    #mainSection .bolt svg {
      stroke-width: 1.5px;
      fill: #fff; }
  #mainSection .yellowDots {
    bottom: -120px; }

  #latestWork .btn-yellow {
    color: #fff; }
  #latestWork .btn-yellow::before {
    width: 200px; }

  #contactSection input.submit {
    color: #fff; }
  #contactSection a::before {
    width: 220px; } }

/*# sourceMappingURL=style.css.map */