@font-face {
  font-family: 'av_b';
  src: url("Avenir-Black.ttf") format("truetype"); }
@font-face {
  font-family: 'av_l';
  src: url("Avenir-Light.ttf") format("truetype"); }
* {
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "av_l", sans-serif;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9; }

a, a:active, a:hover, a:visited {
  color: #f9f9f9; }

h1, h2, h3, h4, h5, h6, p, a, ul, li {
  margin: 0;
  padding: 0; }

@media (max-width: 399px) {
  h1 {
    font-size: 40px; } }
#s_intro h1 {
  color: #f9f9f9;
  font-family: "av_b", sans-serif;
  line-height: 0.85em; }
  @media (min-width: 300px) {
    #s_intro h1 {
      font-size: 40px; } }
  @media (min-width: 400px) {
    #s_intro h1 {
      font-size: 50px; } }
  @media (min-width: 600px) {
    #s_intro h1 {
      font-size: 65px; } }
  @media (min-width: 768px) {
    #s_intro h1 {
      font-size: 80px; } }
  @media (min-width: 992px) {
    #s_intro h1 {
      font-size: 100px; } }
  @media (min-width: 1300px) {
    #s_intro h1 {
      font-size: 100px; } }
  @media (min-width: 1500px) {
    #s_intro h1 {
      font-size: 130px; } }
  @media (min-width: 1800px) {
    #s_intro h1 {
      font-size: 156px; } }
#s_style_pre h1 {
  color: #111;
  font-family: "av_b", sans-serif;
  line-height: 0.85em; }
  @media (min-width: 300px) {
    #s_style_pre h1 {
      font-size: 50px; } }
  @media (min-width: 768px) {
    #s_style_pre h1 {
      font-size: 80px; } }
  @media (min-width: 992px) {
    #s_style_pre h1 {
      font-size: 80px; } }
#s_about_pre h1 {
  color: #111;
  font-family: "av_b", sans-serif;
  line-height: 0.85em; }
  @media (min-width: 300px) {
    #s_about_pre h1 {
      font-size: 50px; } }
  @media (min-width: 768px) {
    #s_about_pre h1 {
      font-size: 80px; } }
  @media (min-width: 992px) {
    #s_about_pre h1 {
      font-size: 80px; } }
#s_coding_pre h1 {
  color: #111;
  font-family: "av_b", sans-serif;
  line-height: 0.85em; }
  @media (min-width: 300px) {
    #s_coding_pre h1 {
      font-size: 50px; } }
  @media (min-width: 768px) {
    #s_coding_pre h1 {
      font-size: 80px; } }
  @media (min-width: 992px) {
    #s_coding_pre h1 {
      font-size: 80px; } }

h2 {
  font-family: "av_l", sans-serif;
  font-size: 30px;
  margin-bottom: 0.5em; }

h3 {
  font-family: "av_b", sans-serif;
  font-size: 25px;
  margin-bottom: 1em; }

h4 {
  font-size: 25px;
  line-height: 1.5em; }

p {
  font-size: 16px;
  line-height: 1.5em;
  color: #222;
  margin-bottom: 1.5em; }

input {
  display: inline-block;
  width: 100%;
  padding: 1em;
  color: #111;
  border: none;
  outline: none; }

input:focus {
  border: none;
  outline: none; }

label {
  font-size: 20px; }

textarea {
  width: 100%;
  height: 100px;
  padding: 1em;
  border: none;
  outline: none;
  color: #111; }

textarea:focus {
  border: none;
  outline: none; }

nav {
  position: fixed;
  letter-spacing: .1em;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #111;
  font-family: "av_b", sans-serif;
  padding: 10px;
  z-index: 10;
  transition: 0.5s ease all;
  height: 100px; }
  nav a:hover {
    text-decoration: line-through;
    color: #f9f9f9; }
  nav a:link {
    color: #f9f9f9; }
  nav a:active {
    color: #f9f9f9;
    text-decoration: line-through; }
  nav a:visited {
    text-decoration: none;
    color: #f9f9f9; }
  nav a.active {
    text-decoration: line-through; }
  nav .logo {
    position: absolute;
    color: #f9f9f9;
    padding: 40px;
    font-size: 20px;
    top: 0;
    left: 0;
    z-index: 10000; }
  nav .menu {
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.5s ease all; }
    @media (max-width: 600px) {
      nav .menu {
        top: -100vh;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: #111; }
        nav .menu ul {
          position: absolute;
          top: 50%;
          width: 100%;
          transform: translateY(-50%); }
        nav .menu li a {
          display: block;
          text-align: center;
          font-size: 40px; }
        nav .menu li {
          float: none; }
        nav .menu.activeMenu {
          top: 0; } }
  nav .nav_icon {
    margin: 40px;
    padding: 5px;
    padding-top: 0px;
    position: absolute;
    right: 0;
    top: 0; }
    @media (min-width: 600px) {
      nav .nav_icon {
        display: none; } }
  nav .nav_icon span {
    position: relative;
    height: 4px;
    left: 0;
    width: 100%;
    display: block;
    background-color: #f9f9f9;
    transition: .6s ease all; }
  nav .nav_icon span:nth-child(1) {
    top: 7px; }
  nav .nav_icon span:nth-child(2) {
    top: 15px; }
  nav ul {
    list-style-type: none;
    padding: 30px; }
  nav li {
    float: left; }
  nav li a {
    display: inline-block;
    padding: 10px;
    font-size: 20px;
    color: #f9f9f9; }

section > div {
  padding: 100px; }
  @media (min-width: 300px) {
    section > div {
      padding: 40px;
      padding-left: 40px !important;
      padding-right: 40px !important;
      padding-bottom: 40px; } }
  @media (min-width: 768px) {
    section > div {
      padding: 80px;
      padding-left: 80px !important;
      padding-right: 80px !important;
      padding-bottom: 80px; } }
  @media (min-width: 996px) {
    section > div {
      padding: 100px;
      padding-left: 100px !important;
      padding-right: 100px !important;
      padding-bottom: 100px; } }

div[id*='pre'] {
  padding-bottom: 0px !important; }

section[id*='pre'] {
  padding-top: 50px; }
  section[id*='pre'] > div {
    padding-bottom: 0px !important; }
  @media (min-width: 600px) {
    section[id*='pre'] {
      padding-top: 50px; } }

.mouse {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f9f9f9;
  transition: 0.3s ease all; }
  .mouse .mouseElement {
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f9f9f9; }
    @media (min-width: 600px) {
      .mouse .mouseElement {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #f9f9f9; } }

#s_intro {
  background-color: #111;
  align-items: center; }

#s_prlude {
  background-color: #0760fe;
  text-align: center;
  color: #f9f9f9; }

#s_style_pre {
  background-color: #f9f9f9; }

#s_style {
  background-color: #f9f9f9;
  color: #111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  #s_style p {
    color: #111 !important; }

#s_coding_pre {
  background-color: #f9f9f9; }

#s_coding {
  background-color: #f9f9f9;
  color: #111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  #s_coding p {
    color: #111 !important; }
  #s_coding img {
    width: 80%;
    height: 80%;
    padding: 10%;
    padding-top: 20%; }

#s_about_pre {
  color: #111; }

#s_about {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

#s_languages {
  background-color: #222; }
  #s_languages img {
    width: 80%;
    height: 80%;
    padding: 5%; }

#s_contact {
  background-color: #222;
  color: #f9f9f9; }
  #s_contact a {
    color: #f9f9f9;
    text-decoration: underline; }

#s_how {
  background-color: #222;
  color: #f9f9f9; }

.no-padding {
  padding: 0 !important; }

.form-padding {
  padding-bottom: 10px !important;
  padding-top: 10px !important; }

.svgs {
  width: 50%;
  height: auto;
  padding: 20px; }

.center {
  text-align: center; }

.container-wrapper {
  width: 100%; }
  .container-wrapper .row:nth-child(n+2) {
    padding-top: 20px; }
    @media (min-width: 600px) {
      .container-wrapper .row:nth-child(n+2) {
        padding-top: 50px; } }

.flex {
  display: flex; }

.full {
  min-height: 100%; }

.col {
  flex: 1; }
  .col.oneOfThree {
    flex: 0 0 33.222%; }

#s_projects_intro {
  background-color: #0760fe;
  align-items: center; }

#s_projects_intro:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: 100% auto; }

#s_projects_intro h1 {
  color: #f9f9f9;
  font-family: "av_b", sans-serif;
  line-height: 0.85em; }
  @media (min-width: 300px) {
    #s_projects_intro h1 {
      font-size: 40px; } }
  @media (min-width: 400px) {
    #s_projects_intro h1 {
      font-size: 50px; } }
  @media (min-width: 768px) {
    #s_projects_intro h1 {
      font-size: 80px; } }
  @media (min-width: 992px) {
    #s_projects_intro h1 {
      font-size: 80px; } }
  @media (min-width: 1300px) {
    #s_projects_intro h1 {
      font-size: 80px; } }

#s_projects_to {
  background-color: #white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  align-items: center; }
  #s_projects_to h6 {
    margin-bottom: 30px;
    font-size: 30px;
    font-family: "av_l", sans-serif;
    color: #111; }
  #s_projects_to h1 {
    font-size: 80px;
    line-height: 68px;
    padding-top: 50px;
    font-family: "av_b", sans-serif;
    color: #111;
    margin-bottom: 0px; }
    @media (min-width: 300px) {
      #s_projects_to h1 {
        font-size: 50px; } }
    @media (min-width: 768px) {
      #s_projects_to h1 {
        font-size: 80px; } }
    @media (min-width: 992px) {
      #s_projects_to h1 {
        font-size: 80px; } }
  #s_projects_to p {
    color: #111; }
  #s_projects_to button {
    border: none; }
  #s_projects_to .row div[class*='col'] img {
    width: 100%;
    transition: 0.5s ease all; }

#s_coming {
  background-color: #222;
  align-items: center; }
  #s_coming h6 {
    margin-bottom: 30px;
    font-size: 30px;
    font-family: "av_l", sans-serif;
    color: #f9f9f9; }
  #s_coming h1 {
    font-size: 80px;
    line-height: 68px;
    padding-top: 50px;
    font-family: "av_b", sans-serif;
    color: #f9f9f9;
    margin-bottom: 0px; }
    @media (min-width: 300px) {
      #s_coming h1 {
        font-size: 50px; } }
    @media (min-width: 768px) {
      #s_coming h1 {
        font-size: 80px; } }
    @media (min-width: 992px) {
      #s_coming h1 {
        font-size: 80px; } }
  #s_coming p {
    color: #f9f9f9; }
  #s_coming a {
    text-decoration: underline; }
  #s_coming button {
    border: none; }
  #s_coming .row div[class*='col'] img {
    width: 100%;
    transition: 0.5s ease all; }

button {
  border: none;
  padding: 0.4em 0.8em 0.4em 0.8em;
  font-size: 18px;
  background-color: #f9f9f9;
  color: #111; }
  button:focus {
    outline: none; }

#s_projects_fly {
  background-color: #f9f9f9;
  align-items: center; }
  #s_projects_fly a {
    color: #111;
    text-decoration: underline; }
  #s_projects_fly img {
    width: 100%; }
  #s_projects_fly h6 {
    margin-bottom: 30px;
    font-size: 30px;
    font-family: "av_l", sans-serif;
    color: #111; }
  #s_projects_fly h1 {
    font-size: 80px;
    line-height: 68px;
    margin-top: 50px;
    font-family: "av_b", sans-serif;
    color: #111;
    margin-bottom: 0px; }
    @media (min-width: 300px) {
      #s_projects_fly h1 {
        font-size: 50px; } }
    @media (min-width: 768px) {
      #s_projects_fly h1 {
        font-size: 80px; } }
    @media (min-width: 992px) {
      #s_projects_fly h1 {
        font-size: 80px; } }
  #s_projects_fly button {
    border: 1px solid #111;
    background-color: #f9f9f9;
    color: #111; }
  #s_projects_fly p {
    color: #111; }

#s_projects_icons {
  background-color: #0760fe;
  align-items: center; }
  #s_projects_icons h6 {
    margin-top: 100px;
    font-size: 100px;
    font-family: "av_b", sans-serif;
    color: #f9f9f9;
    opacity: 0.1; }
  #s_projects_icons h1 {
    font-size: 60px;
    line-height: 51px;
    margin-bottom: 30px;
    font-family: "av_b", sans-serif;
    color: #f9f9f9; }
  #s_projects_icons p {
    color: white; }
  #s_projects_icons .container {
    background-image: url("../img/08.png");
    background-size: 30% auto;
    background-repeat: no-repeat;
    background-position: right 100px; }
  #s_projects_icons .row div[class*='col'] img {
    width: 100%;
    padding-top: 100px;
    transition: 0.5s ease all; }

#s_projects_interactions {
  background-color: #111;
  align-items: center; }
  #s_projects_interactions h6 {
    margin-top: 100px;
    font-size: 100px;
    font-family: "av_b", sans-serif;
    color: #f9f9f9;
    opacity: 0.1; }
  #s_projects_interactions h1 {
    font-size: 60px;
    line-height: 51px;
    margin-bottom: 30px;
    font-family: "av_b", sans-serif;
    color: #f9f9f9; }
  #s_projects_interactions p {
    color: white; }
  #s_projects_interactions .container {
    background-image: url("../img/08.png");
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: right 100px; }
  #s_projects_interactions .row div[class*='col'] img {
    width: 100%;
    transition: 0.5s ease all; }

.no-overflow {
  overflow: hidden; }

#to {
  background-image: none;
  background-size: 100% auto;
  background-position: center top;
  transition: 0.5s ease all; }
  @media (min-width: 600px) {
    #to {
      background-image: url("../img/poster.png"); } }
  #to #content {
    position: absolute;
    color: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #0760fe;
    padding: 30px;
    opacity: 0;
    transition: .5s ease all; }
  #to img {
    opacity: 0.5; }
  #to:hover {
    background-size: 110% auto; }
    #to:hover #content {
      opacity: 0.8; }
    #to:hover img {
      opacity: 0.1; }

#fly_detail {
  transition: 1s ease all;
  overflow: hidden; }
  #fly_detail.hiding {
    padding: 0px;
    max-height: 0px; }
  #fly_detail.showing {
    max-height: 800px; }

@keyframes lineanimation {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }
span[id*='l_'] {
  margin-top: 50px;
  margin-bottom: 45px;
  height: 5px;
  width: 25px;
  display: block;
  background-color: #111;
  transition: 1s ease all; }

span[id*='l_'].animate {
  animation-name: lineanimation;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

#content {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

#footer {
  background-color: #111; }
  #footer a {
    color: #f9f9f9;
    text-decoration: none; }

.confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  overflow: hidden;
  background-color: #0760fe;
  text-align: center;
  font-size: 20px;
  color: #f9f9f9;
  z-index: 100000;
  transition: 0.5s ease all; }

p, h1, h2, h3, h4, h5, h6, a {
  opacity: 0.9; }

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