*, *:before, *:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

@media only screen and (min-width: 1261px) {
  html {
    font-size: 62.5%;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  html {
    font-size: 56.25%;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  html {
    font-size: 50%;
  }
}

@media only screen and (max-width: 480px) {
  html {
    font-size: 43.75%;
  }
}

body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 3rem;
}

@media only screen and (min-width: 1261px) {
  body {
    padding: 3rem;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  body {
    padding: 2rem;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  body {
    padding: 1rem;
  }
}

@media only screen and (max-width: 480px) {
  body {
    padding: 0;
  }
}

.heading-primary {
  color: #FFF;
  text-transform: uppercase;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  margin-bottom: 1.6rem;
}

.heading-primary--main {
  visibility: hidden;
  display: block;
  font-size: 6rem;
  font-weight: 100;
  letter-spacing: 4.5rem;
  -webkit-animation: fade-in-top 1s ease-out forwards;
          animation: fade-in-top 1s ease-out forwards;
}

@media only screen and (min-width: 1261px) {
  .heading-primary--main {
    font-size: 6rem;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  .heading-primary--main {
    font-size: 5rem;
    letter-spacing: 4.2rem;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  .heading-primary--main {
    font-size: 4.2rem;
    letter-spacing: 4rem;
  }
}

.heading-primary--sub {
  visibility: hidden;
  display: block;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 1.75rem;
  -webkit-animation: fade-in-right 1s ease-out forwards;
          animation: fade-in-right 1s ease-out forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

@media only screen and (min-width: 1261px) {
  .heading-primary--sub {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  .heading-primary--sub {
    font-size: 2.6rem;
    letter-spacing: 1.6rem;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  .heading-primary--sub {
    font-size: 2.2rem;
    letter-spacing: 1.5rem;
  }
}

.heading-secondary {
  font-size: 5.5rem;
  text-transform: uppercase;
  font-weight: 300;
  display: inline-block;
  margin-bottom: 2rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#03a9f4), to(#007ac1));
  background-image: linear-gradient(to right, #03a9f4, #007ac1);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem;
}

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.paragraph {
  font-size: 1.6rem;
}

.paragraph:not(:last-child) {
  margin-bottom: 3rem;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fade-in-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes fade-in-bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes fade-in-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes fade-in-top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes fade-in-top-absolute {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -100px);
            transform: translate(-50%, -100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@keyframes fade-in-top-absolute {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -100px);
            transform: translate(-50%, -100px);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@-webkit-keyframes fade-in-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

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

.u-margin-bottom-small {
  margin-bottom: 1.5rem;
}

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

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

.info-box {
  width: 100%;
  padding: 2rem;
  text-align: center;
  border: 2px solid #777;
  border-radius: 3px;
  -webkit-box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.15);
}

.skill-box {
  width: 100%;
  margin: 1rem;
  border-radius: 3px;
  -webkit-box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.15);
  display: inline-block;
}

.skill-box__header {
  padding: 1rem 2rem;
  font-size: 2rem;
  color: #FFF;
  text-transform: uppercase;
}

.skill-box__header--obj {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#5c8dbc), to(#1a4674));
  background-image: linear-gradient(to right bottom, #5c8dbc, #1a4674);
}

.skill-box__header--fe {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#764abc), to(#563d7c));
  background-image: linear-gradient(to right bottom, #764abc, #563d7c);
}

.skill-box__header--be {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#63b448), to(#41883e));
  background-image: linear-gradient(to right bottom, #63b448, #41883e);
}

.skill-box__header--to {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#f1652a), to(#de4c36));
  background-image: linear-gradient(to right bottom, #f1652a, #de4c36);
}

.skill-box__list {
  list-style: none;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.skill-box__list-item {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.skill-box__list-item--cpp {
  width: 5.8rem;
}

.skill-box__list-item--py {
  width: 6rem;
}

.skill-box__list-item--java {
  width: 5.2rem;
}

.skill-box__list-item--javascr {
  width: 5rem;
}

.skill-box__list-item--html {
  width: 5rem;
}

.skill-box__list-item--css {
  width: 5rem;
}

.skill-box__list-item--react {
  width: 6.6rem;
}

.skill-box__list-item--redux {
  width: 5.8rem;
}

.skill-box__list-item--node {
  width: 7.6rem;
}

.skill-box__list-item--mongo {
  width: 11rem;
}

.skill-box__list-item--express {
  width: 10rem;
}

.skill-box__list-item--boot {
  width: 5rem;
}

.skill-box__list-item--sass {
  width: 7.6rem;
}

.skill-box__list-item--git {
  width: 8rem;
}

.skill-box__list-item img {
  width: 100%;
}

.portfolio-card {
  -webkit-perspective: 150rem;
          perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 50rem;
}

.portfolio-card__side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 50rem;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}

.portfolio-card__side--front {
  background-color: #FFF;
}

.portfolio-card__side--back {
  background-color: #FFF;
  padding: 0.5rem 1rem;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.portfolio-card:hover .portfolio-card__side--front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.portfolio-card:hover .portfolio-card__side--back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.portfolio-card__picture {
  background-size: cover;
  height: 20rem;
  background-blend-mode: screen;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-clip-path: ellipse(100% 100% at 5% 0%);
  clip-path: ellipse(100% 100% at 5% 0%);
}

.portfolio-card__picture--1 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#bb162733), to(#90080e33)), url("../imgs/jpg/bomond_still-jpg.jpg");
  background-image: linear-gradient(to right bottom, #bb162733, #90080e33), url("../imgs/jpg/bomond_still-jpg.jpg");
}

.portfolio-card__picture--2 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#cd92d7), to(#ab47bc33)), url("../imgs/jpg/algoviz_still-jpg.jpg");
  background-image: linear-gradient(to right bottom, #cd92d7, #ab47bc33), url("../imgs/jpg/algoviz_still-jpg.jpg");
}

.portfolio-card__picture--3 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(84, 116, 188, 0.85)), to(rgba(48, 71, 122, 0.85))), url("../imgs/jpg/csibridge_still-jpg.jpg");
  background-image: linear-gradient(to right bottom, rgba(84, 116, 188, 0.85), rgba(48, 71, 122, 0.85)), url("../imgs/jpg/csibridge_still-jpg.jpg");
}

.portfolio-card__picture--4 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(191, 212, 223, 0.5)), to(rgba(123, 166, 189, 0.5))), url("../imgs/jpg/msbot_still-jpg.jpg");
  background-image: linear-gradient(to right bottom, rgba(191, 212, 223, 0.5), rgba(123, 166, 189, 0.5)), url("../imgs/jpg/msbot_still-jpg.jpg");
}

.portfolio-card__back-picture {
  background-size: cover;
  height: 20rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.portfolio-card__back-picture--1 {
  background-image: url("../imgs/jpg/bomond-render-jpg.jpg");
}

.portfolio-card__back-picture--2 {
  background-image: url("../imgs/jpg/algoviz-render-jpg.jpg");
}

.portfolio-card__back-picture--3 {
  background-image: url("../imgs/jpg/csibridge-render-jpg.jpg");
}

.portfolio-card__back-picture--4 {
  background-image: url("../imgs/jpg/minesweeper-render-jpg.jpg");
}

.portfolio-card__back-details {
  width: 100%;
  margin: auto 0;
}

.portfolio-card__heading {
  font-size: 2.8rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: right;
  color: #FFF;
  position: absolute;
  top: 15rem;
  right: 1rem;
}

.portfolio-card__heading-span {
  padding: 1rem 3rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  outline: 3px solid #FFF;
}

.portfolio-card__heading-span--1 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(187, 22, 39, 0.8)), to(rgba(144, 8, 14, 0.95)));
  background-image: linear-gradient(to right bottom, rgba(187, 22, 39, 0.8), rgba(144, 8, 14, 0.95));
}

.portfolio-card__heading-span--2 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#bc6cca), to(#ab47bc));
  background-image: linear-gradient(to right bottom, #bc6cca, #ab47bc);
}

.portfolio-card__heading-span--3 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(84, 116, 188, 0.95)), to(rgba(48, 71, 122, 0.95)));
  background-image: linear-gradient(to right bottom, rgba(84, 116, 188, 0.95), rgba(48, 71, 122, 0.95));
}

.portfolio-card__heading-span--4 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(191, 212, 223, 0.95)), to(rgba(89, 143, 172, 0.95)));
  background-image: linear-gradient(to right bottom, rgba(191, 212, 223, 0.95), rgba(89, 143, 172, 0.95));
}

.portfolio-card__details {
  margin: auto 0;
}

.portfolio-card__details ul {
  list-style: none;
  width: 80%;
  margin: 0 auto;
}

.portfolio-card__details ul li {
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}

.portfolio-card__details ul li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.portfolio-card__details ul li .fa-react {
  color: #00d8ff;
}

.portfolio-card__details ul li .fa-node-js {
  color: #539e43;
}

.portfolio-card__details ul li .fa-js {
  color: #f7df1e;
}

.portfolio-card__details ul li .fa-html5 {
  color: #f16529;
}

.portfolio-card__details ul li .fa-css3-alt {
  color: #2965f1;
}

.portfolio-card__details ul li .fa-bootstrap {
  color: #563d7c;
}

.portfolio-card__details ul li .fa-sass {
  color: #cf649a;
}

.portfolio-btn:link, .portfolio-btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.6rem;
  color: #FFF;
  padding: .5rem 2rem;
  margin: 0.6rem;
  display: inline-block;
  border-radius: 10rem;
  -webkit-transition: all 200ms;
  transition: all 200ms;
  position: relative;
}

.portfolio-btn:hover {
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
  -webkit-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
}

.portfolio-btn:hover::after {
  -webkit-transform: scaleX(1.4) scaleY(1.6);
          transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

.portfolio-btn:active {
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.333);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.333);
}

.portfolio-btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.portfolio-btn--bomond {
  background-color: #a22027;
}

.portfolio-btn--algoviz {
  background-color: #ae4dbe;
}

.portfolio-btn--csibridge {
  background-color: #40578b;
}

.portfolio-btn--msbot {
  background-color: #6c9cb6;
}

.contact-btn:link, .contact-btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 2rem;
  color: #03a9f4;
  padding: .5rem 2rem;
  margin: 1rem;
  display: inline-block;
  border-radius: 3px;
  border-bottom: 1px solid #67daff;
  -webkit-transition: all 200ms;
  transition: all 200ms;
  position: relative;
}

.contact-btn:hover {
  background-color: #67daff;
  color: #FFF;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.contact-btn:active {
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.333);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.333);
}

.contact-btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.footer {
  min-height: 20rem;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 122, 193, 0.8)), to(rgba(3, 169, 244, 0.8)));
  background-image: linear-gradient(to right bottom, rgba(0, 122, 193, 0.8), rgba(3, 169, 244, 0.8));
  position: relative;
}

.footer__list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 20rem;
}

.footer__list-item {
  display: inline-block;
  font-size: 2rem;
  padding: 1rem;
  text-transform: uppercase;
}

@media only screen and (min-width: 1261px) {
  .footer__list-item {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  .footer__list-item {
    font-size: 1.7rem;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  .footer__list-item {
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 480px) {
  .footer__list-item {
    font-size: 1.1rem;
  }
}

.footer__list-item a {
  color: #FFF;
  text-decoration: none;
}

.footer__signature {
  font-size: 3.4rem;
  font-weight: 100;
  color: #FFF;
  position: absolute;
  right: 0%;
  bottom: 10%;
  -webkit-transform: translate(-10%, 50%);
          transform: translate(-10%, 50%);
}

.header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 95vh;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right bottom, from(#007ac1), to(#03a9f4));
  background-image: linear-gradient(to right bottom, #007ac1, #03a9f4);
  -webkit-clip-path: ellipse(110% 110% at 100% -15%);
  clip-path: ellipse(110% 110% at 100% -15%);
}

@media only screen and (min-width: 1261px) {
  .header {
    height: 95vh;
  }
}

@media only screen and (max-width: 1260px) and (min-width: 961px) {
  .header {
    height: 75vh;
  }
}

@media only screen and (max-width: 960px) and (min-width: 481px) {
  .header {
    height: 65vh;
  }
}

@media only screen and (max-width: 480px) {
  .header {
    height: 55vh;
  }
}

.header__name {
  text-align: center;
  width: 66%;
  margin-top: 5%;
}

@media only screen and (max-width: 480px) {
  .header__name {
    width: 100%;
  }
}

.header__name .heading-tertiary {
  visibility: hidden;
  display: block;
  padding: 1rem 5.8rem 1rem 0;
  background-color: #FFF;
  -webkit-animation: fade-in-bottom 1s ease-out forwards;
          animation: fade-in-bottom 1s ease-out forwards;
}

.header__picture {
  border: 2rem solid #FFF;
  border-radius: 6px;
  max-width: 40rem;
  width: 36%;
  margin-top: 3%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media only screen and (max-width: 480px) {
  .header__picture {
    max-width: 10rem;
    display: none;
  }
}

.header__picture--img {
  max-width: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.section-about {
  background-color: #f7f7f7;
  padding: 80vh 0 15rem 0;
  margin-top: -70vh;
}

.section-about .info-box {
  background-color: #FFF;
}

.section-skills {
  padding: 15rem 0;
}

.section-portfolio {
  background-color: #f7f7f7;
  padding: 15rem 0;
}

.section-contact {
  padding: 15rem 0;
}
/*# sourceMappingURL=styles.css.map */