/* 
    0 - 600px: Phone
    600 - 900px: Tablet portrait 
    900 - 1200px: Tablet landscape
    1200 - 1800px: Desktop
    > 1800px: Big desktop

    $breakpoint options
        - phone
        - tablet-portrait
        - tablet-landscape
        - big-desktop

    1em = 16px
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media (max-width: 37.5em) {
    html {
      font-size: 50%; } }
  @media (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  box-sizing: border-box;
  font-family: "Lato", sans-serif; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7; }

.heading-title {
  display: block;
  color: #fff;
  height: 100%; }
  .heading-title--name {
    font-size: 3rem;
    letter-spacing: .2rem;
    font-weight: 700; }
  .heading-title--msg {
    font-size: 3rem;
    letter-spacing: .2rem;
    font-weight: 400; }

.heading-primary {
  display: block;
  color: #fff;
  text-transform: uppercase;
  height: 100%; }
  .heading-primary--main {
    display: block;
    font-size: 3rem;
    letter-spacing: 1rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    text-indent: 3.5rem;
    height: 50%; }
  .heading-primary--sub {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1rem;
    text-indent: 1rem;
    height: 50%; }

.heading-secondary {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(to right bottom, rgba(14, 81, 136, 0.8), rgba(40, 180, 133, 0.8));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem; }
  @media (max-width: 37.5em) {
    .heading-secondary {
      font-size: 3rem; } }

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase; }
  .heading-tertiary--light {
    color: #fff; }
  .heading-tertiary--dark {
    color: #000; }

.paragraph {
  font-size: 1.6rem;
  word-wrap: break-word;
  margin-bottom: 2rem;
  text-align: left; }
  .paragraph--light {
    color: #eee; }
  .paragraph--dark {
    color: #000; }

.text-align {
  text-align: justify; }
  @media (max-width: 37.5em) {
    .text-align {
      text-align: center; } }

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

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

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

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

.layout {
  margin: 0rem; }

.navigation_item {
  margin: 1rem; }

.navigation_link:link, .navigation_link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 400;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 250%;
  transition: all .3s; }

.navigation_link:hover, .navigation_link:active {
  background-position: 100%;
  color: #0e5188cc;
  transform: translateX(1rem); }

.navigation_nav {
  height: 100vh;
  width: 0;
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: 1001;
  transition: all .8s; }

.navigation_background {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  position: fixed;
  top: 2.5rem;
  right: 2.5rem;
  background-image: radial-gradient(#0e5188cc, #28b485);
  z-index: 1000;
  transition: transform .8s; }

.navigation_button {
  background-color: #fff;
  height: 6rem;
  width: 6rem;
  position: fixed;
  top: 2rem;
  right: 2rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: 1002; }

.navigation_list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  width: 100%;
  text-align: center; }

.navigation_icon {
  position: relative;
  margin-top: 3rem; }
  .navigation_icon, .navigation_icon::before, .navigation_icon::after {
    width: 2rem;
    height: 2px;
    background-color: #333;
    display: inline-block; }
  .navigation_icon::before, .navigation_icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .8s; }
  .navigation_icon::before {
    top: -.8rem; }
  .navigation_icon::after {
    top: .8rem; }

.navigation_button:hover .navigation_icon::before {
  top: -1rem; }

.navigation_button:hover .navigation_icon::after {
  top: 1rem; }

.navigation_checkbox {
  display: none; }

.navigation_checkbox:checked ~ .navigation_background {
  transform: scale(80); }

.navigation_checkbox:checked ~ .navigation_nav {
  opacity: 1;
  width: 100%; }

.navigation_checkbox:checked + .navigation_button .navigation_icon {
  background-color: transparent; }

.navigation_checkbox:checked + .navigation_button .navigation_icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation_checkbox:checked + .navigation_button .navigation_icon::after {
  top: 0;
  transform: rotate(-135deg); }

.profile {
  display: block;
  width: 100%;
  height: calc(100vh);
  position: relative; }
  .profile_shape {
    width: 100%;
    height: 100vh; }
  .profile_image {
    height: 100%;
    background-image: url(/img/profile.jpg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    -ms-background-position: 50% 50%;
    background-attachment: fixed; }
  .profile_caption {
    position: absolute;
    top: 60%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px darkblue; }
    .profile_caption__small {
      font-size: 3rem; }
    .profile_caption__large {
      font-size: 6rem; }
  .profile_add {
    font-size: 3rem;
    text-decoration: none;
    display: inline-block;
    line-height: 1; }
  .profile:hover .profile__caption {
    opacity: 1;
    transform: translate(-50%, -50%); }
  .profile:hover .profile__img {
    transform: scale(1);
    filter: blur(3px) brightness(80%); }
  @media (max-width: 56.25em) {
    .profile_image {
      background-position: 65% 50%;
      -ms-background-position: 65% 50%;
      background-attachment: scroll; } }
  @media (max-width: 37.5em) {
    .profile_image {
      background-position: 80% 50%;
      -ms-background-position: 80% 50%;
      background-attachment: scroll; }
    .profile_caption {
      top: 60%;
      left: 50%; } }

.about-me {
  padding-left: 3rem;
  padding-right: 3rem; }
  .about-me_card {
    top: auto;
    width: 32%;
    display: inline-block;
    vertical-align: top;
    margin-right: 1.7rem;
    margin-bottom: 1.7rem; }
  .about-me_card:last-child {
    margin-right: 0; }
  .about-me_card--text {
    padding: 2rem; }
  @media (max-width: 37.5em) {
    .about-me {
      padding-left: 1.5rem;
      padding-right: 1.5rem; }
      .about-me_card {
        width: 100%; } }
  @media (max-width: 75em) {
    .about-me_card {
      width: 30%; } }

.journey {
  padding-left: 3rem;
  padding-right: 3rem; }
  .journey-card {
    top: auto;
    position: relative;
    width: 32%;
    display: inline-block;
    vertical-align: top;
    margin-right: 1.7rem;
    margin-bottom: 1.7rem;
    background-color: rgba(51, 51, 51, 0.8);
    border-radius: 2rem;
    padding: 3rem; }
  .journey-card_shape {
    text-align: center; }
  .journey-card_textarea {
    padding: 3rem; }
  .journey-link {
    align-content: center;
    text-align: center; }
  .journey-item {
    padding-left: 3rem;
    font-size: 1.6rem; }
    .journey-item_under-heading {
      font-size: 1rem;
      word-wrap: break-word;
      color: #eee; }
    .journey-item_under-heading-pop {
      color: #55c57a; }
  .journey-card:last-child {
    margin-right: 0; }
  .journey-card--text {
    padding: 2rem; }
  @media (max-width: 37.5em) {
    .journey {
      padding-left: 1.5rem;
      padding-right: 1.5rem; }
      .journey-card {
        width: 100%; }
      .journey-card_textarea {
        padding: 1.5rem; } }

.project {
  padding-left: 3rem;
  padding-right: 3rem; }
  .project-card {
    top: auto;
    position: relative;
    width: 32%;
    display: inline-block;
    vertical-align: top;
    margin-right: 1.7rem;
    margin-bottom: 1.7rem;
    background-color: rgba(51, 51, 51, 0.8);
    border-radius: 2rem;
    padding: 3rem; }
  .project-link {
    text-align: center; }
  .project-card_area {
    padding: 3rem; }
  .project-under-heading {
    font-size: 1.3rem;
    word-wrap: break-word; }
    .project-under-heading__general {
      color: #eee; }
    .project-under-heading__problem {
      color: #a94442; }
    .project-under-heading__solution {
      color: #28b485; }
    .project-under-heading__technology {
      color: #ffb900; }
    .project-under-heading__roadmap {
      color: #3d8ffa; }
    .project-under-heading__note {
      color: #948e90; }
  @media (max-width: 37.5em) {
    .project {
      padding-left: 1.5rem;
      padding-right: 1.5rem; }
      .project-card {
        width: 100%; }
      .project-card_area {
        padding: 1.5rem; } }

.learning {
  padding-left: 3rem;
  padding-right: 3rem; }
  @media (max-width: 37.5em) {
    .learning {
      padding-left: 1.5rem;
      padding-right: 1.5rem; } }

.footer {
  padding: 5rem 0;
  background-color: #000; }
  .footer-text {
    font-size: 1.4rem;
    color: #f7f7f7;
    text-align: center; }
  .footer-quote {
    font-style: italic; }
  .footer-bi {
    vertical-align: -.125em;
    fill: currentColor; }

.feature-box {
  padding-top: 2.5rem;
  text-align: center;
  transition: transform .3s; }
  .feature-box_icon {
    font-size: 6rem;
    margin-bottom: .5rem;
    display: inline-block;
    background-image: linear-gradient(to right bottom, rgba(14, 81, 136, 0.8), rgba(40, 180, 133, 0.8));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent; }
  .feature-box:hover {
    transform: translateY(-1.5rem) scale(1.03); }
  .feature-box_link:link, .feature-box_link:visited {
    color: #ccc5c5;
    background-color: #333;
    padding: 1rem;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    font-size: 1.6rem; }
  .feature-box_link:hover, .feature-box_link:active {
    color: #28b485;
    text-transform: uppercase;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
    transform: rotate(1deg) scale(1.3); }

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: -1; }
  .background-video_content {
    height: 100%;
    width: 100%;
    object-fit: cover; }

.skill-card {
  top: auto;
  position: relative;
  width: 32%;
  display: inline-block;
  vertical-align: top;
  margin-right: 1.7rem;
  margin-bottom: 1.7rem;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 3px;
  padding: 3rem; }

.skill-card_area {
  padding-left: 3rem;
  padding-right: 3rem; }

.skill-item {
  font-size: 1.6rem; }
  .skill-item_shape {
    width: 5rem; }
  .skill-item_img {
    width: 5rem;
    height: 5rem; }

.skill-heading {
  font-size: 2.5rem;
  word-wrap: break-word;
  color: #55c57a; }

.skill-level {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #ff7730;
  text-align: right; }

.skill-date {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #999; }

.skill-under-heading {
  font-size: 1.3rem;
  word-wrap: break-word; }
  .skill-under-heading__general {
    color: #eee; }

.skill-meter {
  width: 100%;
  height: 2rem; }

@media (max-width: 37.5em) {
  .skill {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
    .skill-card {
      width: 100%; }
    .skill-card_area {
      padding: 1.5rem; } }

.education-card {
  top: auto;
  position: relative;
  width: 32%;
  display: inline-block;
  vertical-align: top;
  margin-right: 1.7rem;
  margin-bottom: 1.7rem;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 3px;
  padding: 3rem; }

.education-card_area {
  padding-left: 3rem;
  padding-right: 3rem; }

.education-item {
  font-size: 1.6rem; }
  .education-item_shape {
    width: 5rem; }
  .education-item_img {
    width: 5rem;
    height: 5rem; }

.education-heading {
  font-size: 2.5rem;
  word-wrap: break-word;
  color: #55c57a; }

.education-level {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #ff7730;
  text-align: right; }

.education-date {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #999; }

.education-under-heading {
  font-size: 1.3rem;
  word-wrap: break-word; }
  .education-under-heading__general {
    color: #eee; }

.education-meter {
  width: 100%;
  height: 2rem; }

@media (max-width: 37.5em) {
  .education {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
    .education-card {
      width: 100%; }
    .education-card_area {
      padding: 1.5rem; } }

.course-card {
  top: auto;
  position: relative;
  width: 32%;
  display: inline-block;
  vertical-align: top;
  margin-right: 1.7rem;
  margin-bottom: 1.7rem;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 3px;
  padding: 3rem; }

.course-card_area {
  padding-left: 3rem;
  padding-right: 3rem; }

.course-item {
  font-size: 1.6rem; }

.course-heading {
  font-size: 2.5rem;
  word-wrap: break-word;
  color: #55c57a; }

.course-resourse {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #ff7730;
  text-align: right; }

.course-date {
  font-size: 1.2rem;
  word-wrap: break-word;
  color: #999; }

.course-link {
  text-align: end; }

@media (max-width: 37.5em) {
  .course {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
    .course-card {
      width: 100%; }
    .course-card_area {
      padding: 1.5rem; }
    .course-heading {
      font-size: 2rem; } }

p.bubble {
  position: relative;
  width: 100%;
  line-height: 1.4em;
  margin: 4rem auto;
  background-color: #000;
  border: 8px solid #333;
  border-radius: 3rem;
  padding: 2rem;
  color: #fff;
  font-size: 1.6rem; }

p.thought {
  width: 30rem;
  border-radius: 20rem;
  padding: 3rem; }

p.bubble:before,
p.bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0; }

p.speech:before {
  left: 3rem;
  bottom: -5rem;
  border: 2.5rem solid;
  border-color: #333 transparent transparent #333; }

p.speech:after {
  left: 3.8rem;
  bottom: -3rem;
  border: 1.5rem solid;
  border-color: #000 transparent transparent #000; }

p.thought:before,
p.thought:after {
  left: 1rem;
  bottom: -3rem;
  width: 4rem;
  height: 4rem;
  background-color: #000;
  border: 8px solid #333;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  border-radius: 3rem; }

p.thought:after {
  width: 2rem;
  height: 2rem;
  left: 5px;
  bottom: -4rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  border-radius: 2rem; }

.blog {
  padding-left: 3rem;
  padding-right: 3rem; }
  .blog-card {
    top: auto;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 1.7rem;
    margin-bottom: 1.7rem;
    background-color: rgba(51, 51, 51, 0.8);
    border-radius: 2rem;
    padding: 3rem; }
  .blog-img-fluid {
    max-width: 100%;
    height: auto; }
  .blog-card_area {
    padding-left: 3rem;
    padding-right: 3rem; }
  .blog-item {
    font-size: 1.6rem; }
    .blog-item_shape {
      width: 5rem; }
    .blog-item_img {
      width: 5rem;
      height: 5rem; }
  .blog-heading {
    font-size: 2.5rem;
    word-wrap: break-word;
    color: #55c57a; }
  .blog-level {
    font-size: 2rem;
    word-wrap: break-word;
    color: #ff7730; }
  .blog-date {
    font-size: 1.2rem;
    word-wrap: break-word;
    color: #999; }
  .blog-link_centre {
    text-align: center; }
  .blog-link:link, .blog-link:visited {
    color: #ccc5c5;
    background-color: #333;
    padding: 1rem;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    font-size: 1.6rem; }
  .blog-link:hover, .blog-link:active {
    color: #28b485;
    text-transform: uppercase;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
    transform: rotate(1deg) scale(1.3); }
  .blog-under-heading {
    font-size: 1.3rem;
    word-wrap: break-word; }
    .blog-under-heading__general {
      color: #eee; }
  .blog-meter {
    width: 100%;
    height: 2rem; }
  @media (max-width: 37.5em) {
    .blog {
      padding-left: 1.5rem;
      padding-right: 1.5rem; }
      .blog-card {
        width: 100%; }
      .blog-card_area {
        padding: 1.5rem; } }

.section-profile {
  padding-top: 0rem; }

.section-about-me {
  padding-top: 5rem;
  background-color: #000; }

.section-featured-blog {
  padding-top: 0rem;
  background-color: #000; }

.section-journey {
  padding-top: 5rem;
  background-color: #000; }

.section-learning {
  padding-top: 5rem;
  background-color: #000; }

.section-projects {
  padding-top: 5rem;
  background-color: #000; }

.section-blog {
  padding-top: 5rem;
  background-color: #000; }