* {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Jura', sans-serif;
}

.navbar {
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
}

#brand,
#links a {
   color: #fff;
}

#brand {
   font-size: 25px;
   text-transform: uppercase;
   font-weight: 700;
}

#links a {
   font-size: 15px;
}

#brand:hover,
#links a:hover {
   color: #f44b4b;
   background-color: rgba(255, 255, 255, 0.5);
}

.section-header {
   padding: 0 0 10px 0;
   font-weight: 700;
   letter-spacing: 2px;
}

.section-header:after {
   display: block;
   height: 3px;
   width: 150px;
   background-color: #f44b4b;
   content: " ";
   margin: 10px auto;
}

img {
   max-width: 100%;
}

section {
   padding: 30px 0 40px 0;
}

header {
   height: 100vh;
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/madrid.jpg");
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/madrid.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   padding: 20px 0 0 0;
}

.header-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
   width: 100%;
   color: #fff;
}

.name {
   font-size: 4em;
   letter-spacing: 10px;
   font-weight: 700;
   text-transform: uppercase;
}

.title {
   font-size: 2em;
   letter-spacing: 2px;
   font-weight: 700;
}


#about-me,
#projects,
#contact {
   background-color: #262626;
   color: #fff;
}

.profile-pic {
   border-radius: 100%;
   max-width: 230px;
}

.summary,
.form-control,
.submit {
   font-size: 1.5em;
   line-height: 1.3em;
}

.skills-row {
   margin: 20px 0;
}

.skills-icon {
   font-size: 5em;
   margin: 0 10px;
}

.project-row {
   padding: 0 0 20px 0;
}

.img-container {
   position: relative;

}

.textbox {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
   background: #000;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.textbox:hover {
   opacity: 0.8;
   cursor: pointer;
}

.text {
   padding: 0 17px;
   color: #fff;
}

.text h4 {
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 24px
}

.text p {
   padding: 10px 0;
   font-size: 16px;
}

.form {
   max-width: 1140px;
   width: 60%;
   margin: 0 auto;
}

.submit {
   margin: 0 auto;
   display: block;
}

.contact-header {
   text-transform: uppercase;
   letter-spacing: 2px;
}

.footer-area {
   margin: 0 0 10px 0;
}

.footer-icon {
   font-size: 2em;
   margin: 0 10px;
   outline: none;
   color: #fff;
}

.copyright {
   font-size: 12px;
}

a:visited,
a:hover,
a:link,
a:active {
   text-decoration: none;
}

/** MEDIA QUERIES **/

@media (max-width: 1200px) {
   .summary {
      font-size: 1.38em;
   }

   .profile-pic {
      display: block;
      margin: auto;
   }
}

@media (max-width: 991px) {
   .project-row .col-md-6:nth-child(odd) {
      margin: 0 0 20px 0;
   }
   
   .summary {
      margin: 20px 0 0 0;
   }

   .form {
      width: 100%;
   }
}

@media (max-width: 610px) {
   .header-content h1 {
      font-size: 3.5em;
      letter-spacing: 4px;
   }

   .header-content h2 {
      font-size: 2em;
   }

   .name:after {
      width: 150px;   
   }
   
   .text {
      padding: 0 5px;
   }

   .text h4 {
      font-size: 20px;
   }

   .text p {
      font-size: 16px;
   }
}

@media (max-width: 405px) {
   .header-content h1 {
      font-size: 2.5em;
   }

   .header-content h2 {
      font-size: 1.5em;
   }

   .icon {
      font-size: 4em !important;
      margin: 15px;
   }
}

.card-description__link-icon {
   font-size: 1.8rem;
   color: #999;
   text-decoration: none;
   bottom: 1rem;
   transform: translateX(-50%);
   transition: .2s;
}