.hero_section {
  height: calc(100vh - 50px);
  width: 100%;
  display: table;
  background-color: rgba(0, 0, 0, 0.3); }
  .hero_section .sub-header {
    font-size: 32px; }
  .hero_section .hero_title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
    vertical-align: middle; }
    .hero_section .hero_title .hero_text {
      color: white;
      font-weight: 300; }

p, h1, h2, span {
  font-family: 'Roboto', sans-serif;
  font-weight: 300; }

.mdl-layout__drawer-button > i {
  color: white; }

.section {
  margin-right: auto;
  margin-left: auto;
  padding: 60px 15px; }

.section .title {
  font-weight: 300;
  text-align: center;
  color: #2296F3; }
.section .sub-header {
  text-align: center; }

.typed {
  color: white;
  font-weight: 300;
  min-height: 40px; }

.contact-section .wrapper {
  background-color: #2296F3; }
.contact-section .title, .contact-section .sub-header {
  color: white; }
.contact-section .contact {
  display: inline-block;
  color: white;
  margin-bottom: 15px; }
  .contact-section .contact .content-wrapper {
    text-align: center; }
  .contact-section .contact a {
    color: white;
    text-decoration: none; }
  .contact-section .contact i {
    font-size: 48px;
    color: white; }

.footer {
  height: 20px; }
  .footer i {
    font-size: 18px;
    float: left; }
  .footer .text {
    float: left;
    display: inline-block;
    margin-left: 5px; }

.summary-section {
  background-color: white; }

.skills-section {
  background-color: #2296F3; }
  .skills-section .title, .skills-section .sub-header {
    color: white; }
  .skills-section .arrows {
    color: #2296F3;
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 30px; }
    .skills-section .arrows button {
      background-color: transparent;
      border: none; }
      .skills-section .arrows button:focus {
        outline: none; }
    .skills-section .arrows .next-button {
      float: right; }
    .skills-section .arrows .next-button i,
    .skills-section .arrows .prev-button i {
      font-size: 48px;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      color: #2296F3;
      background-color: white; }
  .skills-section .skill {
    margin: 0 5px;
    width: 75px; }
    .skills-section .skill:focus {
      outline: none; }
    .skills-section .skill .skill-level {
      max-height: 200px;
      background-color: white;
      display: block;
      width: 30px;
      margin-left: auto;
      margin-right: auto; }
    .skills-section .skill .skill-name {
      text-align: center;
      margin-bottom: 5px;
      color: white; }

.social {
  background-image: url("/img/network.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }
  .social .title {
    color: white; }
  .social .social-wrapper {
    background-color: rgba(0, 0, 0, 0.2); }
  .social .social-icon {
    text-align: center;
    color: white; }
  @media (max-width: 839px) {
    .social .mdl-cell {
      width: 33%;
      margin: 0; } }

.works-section {
  background-color: white; }
  .works-section .mdl-card__title, .works-section .mdl-card__supporting-text {
    color: white; }
    .works-section .mdl-card__title p, .works-section .mdl-card__supporting-text p {
      font-size: 16px; }
  .works-section .card-inner {
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 180px; }
  .works-section .card-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }

@media screen and (min-width: 1024px) {
  .mdl-layout__drawer-button {
    opacity: 0;
    display: none; } }

html, body {
  height: 100%; }

div {
  display: block; }

.row:after,
.section:after {
  clear: both; }

.row:before,
.row:after,
.section:after,
.section:before {
  content: "";
  display: table; }

@media (min-width: 768px) {
  .section {
    width: 750px; } }
@media (min-width: 992px) {
  .section {
    width: 970px; } }
@media (min-width: 1200px) {
  .section {
    width: 1170px; } }
.content, .sub-header {
  font-size: 16px; }