@keyframes heartbeat {
  0% {
    border: 1.5vw solid #0e679a; }
  20% {
    border: 1.7vw solid #0e679a; }
  25% {
    border: 1.3vw solid #0e679a; }
  50% {
    border: 1.8vw solid #0e679a; }
  80% {
    border: 1vw solid #0e679a; }
  100% {
    border: 1.5vw solid #0e679a; } }
@keyframes inout {
  0% {
    transform: scale(0);
    opacity: 0; }
  60% {
    transform: scale(1);
    opacity: 0.8; }
  75% {
    transform: scale(1.5);
    opacity: 1; }
  90% {
    transform: scale(1.2);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }
@keyframes inout-check {
  0% {
    transform: scale(0);
    opacity: 0; }
  60% {
    transform: scale(1);
    opacity: 0.8; }
  75% {
    transform: scale(1.5);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes fadein-simple {
  0% {
    transform: scale(0);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes shake {
  0% {
    transform: rotate(1deg); }
  10% {
    transform: rotate(-4deg); }
  30% {
    transform: rotate(5deg); }
  50% {
    transform: rotate(10deg); }
  60% {
    transform: rotate(-2deg); }
  90% {
    transform: rotate(3deg); }
  100% {
    transform: rotate(0deg); } }
html, body {
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 1024px) {
    html, body {
      overflow: hidden; } }

body {
  background-color: #074061;
  color: #074061;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; }

section {
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  scroll-snap-align: start; }

@media only screen and (max-width: 600px) {
  .desktop {
    display: none; } }

@media only screen and (min-width: 1024px) {
  .mobile {
    display: none; } }

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0; }

h1 {
  font-size: 10vh;
  padding: 5vh; }
  @media only screen and (max-width: 600px) {
    h1 {
      font-size: 6vh;
      padding: 5vh; } }

@media only screen and (min-width: 1024px) {
  .body-container {
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll; } }

#landing {
  background-color: #FFFFFF; }
  #landing .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; }
    #landing .content .logo {
      display: block;
      width: fit-content;
      margin-bottom: 5vh; }
      #landing .content .logo img {
        width: 10vw; }
        @media only screen and (max-width: 600px) {
          #landing .content .logo img {
            width: 20vw; } }
    #landing .content .title {
      display: flex;
      width: fit-content;
      flex-direction: column;
      align-items: center; }
      #landing .content .title h2 {
        font-size: 7.5vh;
        font-weight: 700;
        text-align: center; }
        @media only screen and (max-width: 600px) {
          #landing .content .title h2 {
            font-size: 4vh; } }
      #landing .content .title h4 {
        color: #0e679a;
        font-size: 5vh;
        font-weight: 500; }
        @media only screen and (max-width: 600px) {
          #landing .content .title h4 {
            font-size: 3.5vh; } }

#keywords {
  background-color: #108bd1;
  color: #FFFFFF;
  position: relative;
  height: 100vh !important;
  overflow: hidden; }
  #keywords span {
    animation: inout 3s;
    opacity: 0;
    z-index: 1;
    transition: 4s;
    width: fit-content;
    transform-origin: top; }
  #keywords .content {
    position: relative;
    height: inherit;
    z-index: 70; }
    #keywords .content .add-word {
      display: flex;
      position: absolute;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%); }
      @media only screen and (max-width: 600px) {
        #keywords .content .add-word {
          flex-direction: column; } }
      #keywords .content .add-word input {
        background-color: #0e679a;
        border: none;
        border-radius: 0.5vw 0 0 0.5vw;
        padding: 2vh 1vw;
        font-size: 16px;
        color: #FFFFFF;
        width: 20vw;
        transition: 0.5s;
        font-family: Montserrat, sans-serif; }
        @media only screen and (max-width: 600px) {
          #keywords .content .add-word input {
            width: 60vw;
            border-radius: 3vw 3vw 0 0;
            text-align: center;
            margin: 0; } }
        #keywords .content .add-word input:focus {
          outline: none; }
      #keywords .content .add-word a {
        background-color: #074061;
        border: none;
        border-radius: 0 0.5vw 0.5vw 0;
        padding: 2vh 1vw;
        font-size: 16px;
        color: #108bd1;
        text-decoration: none;
        transition: 0.15s;
        font-weight: bold; }
        @media only screen and (max-width: 600px) {
          #keywords .content .add-word a {
            width: 60vw;
            border-radius: 0 0 3vw 3vw;
            text-align: center;
            line-height: 16px; } }
        #keywords .content .add-word a:hover {
          background-color: #0e679a; }
    #keywords .content .beating {
      width: fit-content;
      height: auto; }
      #keywords .content .beating #display-pic-border {
        display: block;
        width: 20vw;
        height: 20vw;
        background-color: #0e679a;
        border-radius: 50%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1.5vw solid #0e679a;
        transition: 0.2s;
        animation: heartbeat 1s infinite; }
        @media only screen and (max-width: 600px) {
          #keywords .content .beating #display-pic-border {
            width: 45vw;
            height: 45vw; } }
      #keywords .content .beating #display-pic {
        display: block;
        width: 20vw;
        height: 20vw;
        border-radius: 50%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-size: 100%;
        background-position: center; }
        @media only screen and (max-width: 600px) {
          #keywords .content .beating #display-pic {
            width: 43vw;
            height: 43vw; } }
      #keywords .content .beating:hover #display-pic-border {
        animation-play-state: paused; }

#education {
  position: relative;
  background-color: #FFFFFF; }
  #education h1 {
    color: #0e679a; }
  #education h4 {
    font-weight: normal; }
  #education .content {
    color: #0e679a;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: fit-content; }
    @media only screen and (max-width: 600px) {
      #education .content {
        transform: translate(-50%, -45%); } }
  #education .school {
    display: flex;
    align-items: stretch;
    height: 7.5vw;
    margin: 5vh 0; }
    @media only screen and (max-width: 600px) {
      #education .school {
        height: auto;
        flex-direction: column;
        margin: 0; }
        #education .school:nth-child(1) {
          margin-top: 0; }
        #education .school:nth-child(2) {
          margin-top: 2.5vh; } }
    #education .school .logo {
      margin-right: 2.5vw; }
      #education .school .logo img {
        width: 7.5vw; }
        @media only screen and (max-width: 600px) {
          #education .school .logo img {
            width: 17.5vw;
            display: block;
            margin: 2vh auto; } }
    #education .school .details {
      margin-left: 5vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 50vw; }
      @media only screen and (max-width: 600px) {
        #education .school .details {
          text-align: center;
          margin: 0;
          width: 75vw; }
          #education .school .details .name, #education .school .details .degree {
            margin: 0.5vh 0; }
          #education .school .details .degree {
            font-size: 2vh; } }
    #education .school .year {
      display: block;
      line-height: 7.5vw;
      width: 10vw;
      margin-left: auto; }
      @media only screen and (max-width: 600px) {
        #education .school .year {
            width: fit-content;
          margin: 0 auto; } }

.left, .right {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  width: fit-content;
  display: block;
  font-size: 10vh;
  z-index: 99;
  transition: 0.15s;
  cursor: pointer; }
  @media only screen and (max-width: 600px) {
    .left, .right {
      top: unset;
      bottom: 15%; } }
  .left:hover, .right:hover {
    opacity: 0.7; }
    @media only screen and (max-width: 600px) {
      .left:hover, .right:hover {
        opacity: 1; } }

.left {
  left: 5vw; }
  @media only screen and (max-width: 600px) {
    .left {
      left: 35vw; } }

.right {
  right: 5vw; }
  @media only screen and (max-width: 600px) {
    .right {
      right: 35vw; } }

.slick-disabled {
  opacity: 0;
  cursor: default; }
  @media only screen and (max-width: 600px) {
    .slick-disabled {
      opacity: 0.4; } }
  .slick-disabled:hover {
    opacity: 0; }
    @media only screen and (max-width: 600px) {
      .slick-disabled:hover {
        opacity: 0.4; } }

.slider {
  width: 100vw;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%); }
  @media only screen and (max-width: 600px) {
    .slider {
      transform: translate(-50%, -50%); } }

.slide-container {
  text-align: center; }
  .slide-container h5 {
    font-weight: 200;
    font-size: 3vh;
    margin: 1vh; }
    @media only screen and (max-width: 600px) {
      .slide-container h5 {
        font-size: 2vh; } }
  .slide-container h2 {
    font-weight: 600;
    font-size: 8vh;
    margin: 1vh; }
    @media only screen and (max-width: 600px) {
      .slide-container h2 {
        font-size: 3.75vh; } }
  .slide-container h3 {
    font-weight: 500;
    font-size: 6vh;
    margin: 1vh; }
    @media only screen and (max-width: 600px) {
      .slide-container h3 {
        font-size: 3vh; } }

#work {
  background-color: #0e679a;
  color: #FFFFFF;
  position: relative; }

#projects {
  background-color: #FFFFFF;
  color: #074061;
  position: relative; }

.required {
  background-color: #9a0e0e !important; }

#contact {
  background-color: #074061;
  color: #FFFFFF;
  position: relative; }
  #contact .content {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%); }
    #contact .content #sent-confirm {
      font-size: 10vh;
      animation: inout-check 1.5s;
      margin: 2.5vh auto;
      display: block;
      width: fit-content; }
    #contact .content #sent-message {
      animation: fadein-simple 1s; }
    #contact .content .inputs {
      transition: 0.5s; }
    #contact .content .shake {
      animation: shake 0.5s; }
    #contact .content .input-form {
      display: flex;
      margin: 3.5vh 0; }
      @media only screen and (max-width: 600px) {
        #contact .content .input-form {
          flex-direction: column;
          margin: 3vh 0; }
          #contact .content .input-form:nth-child(1) {
            margin: 0 0 3vh 0; } }
      #contact .content .input-form input, #contact .content .input-form textarea {
        background-color: #0e679a;
        border: none;
        border-radius: 0 0.5vw 0.5vw 0;
        padding: 2vh 1vw;
        font-size: 16px;
        color: #FFFFFF;
        width: 25vw;
        transition: 0.5s;
        font-family: Montserrat, sans-serif; }
        @media only screen and (max-width: 600px) {
          #contact .content .input-form input, #contact .content .input-form textarea {
            border-radius: 0 0 3vw 3vw;
            width: 80vw;
            text-align: center;
            margin: 0; } }
        #contact .content .input-form input:focus, #contact .content .input-form textarea:focus {
          outline: none; }
      #contact .content .input-form span {
        background-color: #108bd1;
        border: none;
        border-radius: 0.5vw 0 0 0.5vw;
        padding: 2vh 1vw;
        font-size: 16px;
        width: 5vw;
        text-align: center;
        color: #074061;
        text-decoration: none;
        transition: 0.15s;
        font-weight: bold; }
        @media only screen and (max-width: 600px) {
          #contact .content .input-form span {
            border-radius: 3vw 3vw 0 0;
            width: 80vw; } }
      #contact .content .input-form a {
        display: block;
        width: 34vw;
        height: calc(5vh + 17px);
        background-color: #108bd1;
        text-align: center;
        line-height: calc(5vh + 17px);
        color: #074061;
        border-radius: 0.5vw;
        font-weight: bold;
        transition: 0.15s;
        text-decoration: none; }
        @media only screen and (max-width: 600px) {
          #contact .content .input-form a {
            width: 82vw;
            border-radius: 3vw; } }
        #contact .content .input-form a:hover {
          background-color: #0e679a; }
    #contact .content .message {
      flex-direction: column; }
      #contact .content .message textarea {
        width: 32vw;
        height: 15vh;
        border-radius: 0 0 0.5vw 0.5vw; }
        @media only screen and (max-width: 600px) {
          #contact .content .message textarea {
            border-radius: 0 0 3vw 3vw;
            width: 74vw;
            height: 8vh;
            padding: 2vh 4vw;
            text-align: left; } }
      #contact .content .message span {
        width: 32vw;
        border-radius: 0.5vw 0.5vw 0 0; }
        @media only screen and (max-width: 600px) {
          #contact .content .message span {
            border-radius: 3vw 3vw 0 0;
            width: 80vw; } }
    @media only screen and (max-width: 600px) {
      #contact .content .cv {
        flex-direction: row; } }
    #contact .content .cv a {
      display: block;
      width: calc(5vh + 17px);
      height: calc(5vh + 17px);
      background-color: #0e679a;
      text-align: center;
      line-height: calc(5vh + 17px);
      color: white;
      border-radius: 0 0.5vw 0.5vw 0;
      transition: 0.15s; }
      @media only screen and (max-width: 600px) {
        #contact .content .cv a {
          border-radius: 0 3vw 3vw 0; } }
      #contact .content .cv a #check {
        opacity: 0;
        transition: 0.15s; }
    #contact .content .cv span {
      width: calc(32vw - 5vh - 17px); }
      @media only screen and (max-width: 600px) {
        #contact .content .cv span {
          width: calc(80vw - 5vh - 17px);
          border-radius: 3vw 0 0 3vw; } }

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