/*** DEFAULTS ***/

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

html, body, h1, h2, h3, h4, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

body {
    font-family: 'Oxygen', sans-serif;
    color: #131114;
    font-size: 62.5%;
    line-height: 1.2;
    overflow-x: hidden;
    background: #f8f8f8;
}

h1, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

h1 {
    font-size: 3.3vw;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-left: 150px;
}

h2 {
    font-size: 2rem;
    color: #131114;
    font-family: 'Cuprum', sans-serif;
    text-transform: uppercase;
    border-bottom: 4px dotted #e3e3e3;
    padding-bottom: 10px;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin: .5em 0;
    font-size: 1rem;
}

a {
    color: inherit;
}

ul {
    list-style-type: none;
    overflow: hidden;
}

hr {
    border-top: .5em solid #c5c5c5;
}

/*** BUTTONS ***/

.btn {
    padding: 5px 10px;
    margin: 2px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
}

.project-button {
    border: 2px solid;
    background: transparent;
    color: #FFF9F6;
    display: inline-block
}

.project-button:hover {
    border: 2px solid;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    background: transparent;
    color: #72BEB6;
}


/*** HEADER ***/

header {
    border-top: 1.5em solid #312B30;
}

.background {
    background: url(/portfolio/images/gray-background-top.png);
    background-size: cover;
    background-position: bottom;
}

/*** NAV ***/

#menu li a {
    color: inherit;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
}

#menu li a:hover {
    text-decoration: underline;
}


/*** INTRO ***/

#intro {
    height: 80vh;
}

.name {
    font-family: 'Cuprum', sans-serif;
    font-size: 8vw;
    letter-spacing: initial;
    line-height: 1;
}

.sub-heading {
    line-height: 2;
    position: relative;
}

.sub-heading:before, .skills-box .line:after {
    content: "";
    background-color: rgba(52, 173, 161, 0.25);
    height: 0.8rem;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    z-index: -1;
}


/*** PROJECTS ***/

#projects {
    padding: 5em 0;
}

.project-card {
    position: relative;
    width: 50%;
    /**width: 275px;**/
    height: 350px;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-box-shadow: 0 0 3px #9999;
            box-shadow: 0 0 3px #9999;
    border-radius: 5px;
}

.flip-card {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    z-index: 1;
}

.one {
    background: url(/portfolio/images/pwc-website.png), #eee;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.front {
    z-index: 2;
    height: calc(100% - 60px) !important;
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: inherit;
}

.back {
    background-color: #464145;
    color: #FFF9F6;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.text {
    font-size: 1rem;
    height: 100%;
}

.text h4 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: .5em;
}

.text p {
    margin: 0 0 1em;

}

.tools-project li {
    background-color: #72BEB6;
    font-weight: 600;
    color: #464145;
    float: left;
    padding: .25em .5em;
    margin: .15em;
}

.links-project {
    position: absolute;
    bottom: 1em;
}

.site-info {
    width: inherit;
    position: absolute;
    bottom: -60px;
    background: #464145;
    color: #FFF9F6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

.site-info h3 {
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.site-info p {
    font-size: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: #312B30;
    border-radius: inherit;
    margin: 0;
}


/*** RIBBON ***/

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    border-radius: 4px;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.1);
            box-shadow: 0 5px 10px rgba(0,0,0,.1);
    font: 700 18px/1 'Lato', sans-serif;
    color: #FFF9F6;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}

/*** RIGHT SIDE RIBBON ***/

.ribbon-top-right {
    top: -10px;
    right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon-top-right::before {
    top: 0;
    left: 0;
}
.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}
.ribbon-top-right span {
    left: -25px;
    top: 30px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/*** RIBBON COLORS ***/

.blue::before,
.blue::after {
    border-color: #2F6886;
}

.blue span {
    background-color: #0A4260;
}

.purple::before,
.purple::after {
    border-color: #8C2CAE;
}

.purple span {
    background-color: #4C0964;
}

.orange::before,
.orange::after {
    border-color: #B6571E;
}

.orange span {
    background-color: #973D08;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid;
}


/*** SKILLS ***/

#skills {
    padding: 5em 0 10em;
    background: url(/portfolio/images/smudge.png);
    background-size: 100% 90%;
    background-repeat: no-repeat;
}

.skills-box {
    border: 3px dashed #C6C6C6;
    height: 200px;
    width: 275px;
}

.skills-box ul {
    -webkit-column-count: 2;
            column-count: 2;
    font-size: 1rem;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.skills-box ul, .skills-box li {
    padding: 5px 0;
}

.box-three ul{
    -webkit-column-count: 1;
            column-count: 1;
}

.skills-box h3 {
    font-size: 1.3rem;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

.skills-box .line {
    position: relative;
    padding: 0 10px;
}

/*** CONTACT ***/

#contact {
    background: url(/portfolio/images/gray-background.png);
    background-size: cover;
    background-position: center;
    padding-bottom: 5em;
}

#contact h2, #contact p {
    text-align: center;
    margin: 1rem;
}

#contact p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.highlight {
    background-color: rgba(52, 173, 161, 0.25);
    padding: 0 .5rem;
    text-decoration: none;
    white-space: nowrap;
}

#contact .highlight:hover {
    color: inherit;
}

#contact a:hover {
    color: #72BEB6;
}

/*** FORM ***/

form {
    width: 100%;
    padding: 30px;
    background: url(/portfolio/images/paper.png), #464145;
    -webkit-box-shadow:
    0 1px 1px rgba(0,0,0,0.15),
    0 10px 0 -5px #eee,
    0 10px 1px -4px rgba(0,0,0,0.15),
    0 20px 0 -10px #eee,
    0 20px 1px -9px rgba(0,0,0,0.15);
            box-shadow:
    0 1px 1px rgba(0,0,0,0.15),
    0 10px 0 -5px #eee,
    0 10px 1px -4px rgba(0,0,0,0.15),
    0 20px 0 -10px #eee,
    0 20px 1px -9px rgba(0,0,0,0.15);
}

#contact form h3 {
    color: #FFF9F6;
    text-align: center;
    font-size: 35px;
    font-family: 'Euphoria Script', cursive;
}

form input, form textarea, form button {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border-style: none;
    outline: none;
    background: #fff;
}

textarea {
    height: 100px;
    resize: none;
}

form .submit-form {
    margin-top: 20px;
    cursor: pointer;
}

form .submit-form:hover {
    background: #72BEB6;
}

/*** FOOTER ***/

footer {
    background: #312B30;
    color: #FFF9F6;
}

footer p {
    font-size: inherit;
}

footer .fab {
    margin: 0 5px;
    font-size: 20px;
    color: #312B30;
    background: #72BEB6;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    vertical-align: middle;
}

footer .fab:first-child {
    margin-left: 0;
    }

footer .fab:hover {
    background-color: #2DA296;
}

/*** JS ***/

section {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px); 
  -webkit-transition: all 2s; 
  transition: all 2s;
}

section.visible {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

/*** MEDIA QUERIES ***/

@media (min-width: 768px) {
  #toggle {
      display: none;
  }  
}

@media (max-width: 767px) {

  .name {
      font-size: 15vw;
  }

  h1 {
      font-size:8vw;
      margin: auto;
  }

  #menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    position: fixed;
    top: 0;
    left: -250px;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 100%;
    background-color: #F8F8F8;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,.05,1.0);
    transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #menu li:first-of-type {
    border-bottom: 4px dotted #e3e3e3;
    width: 100%;
    padding: 1em 0 2em;
    text-align: center;
    margin: 0 0 2em;
  }

  #menu li{
      padding: 2em;
      width: 100%;
  }

  #toggle span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: #333;
    border-radius: 3px;
    z-index: 2;
    -webkit-transform-origin: 5px 0;
            transform-origin: 5px 0;
    -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease,
                -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #toggle {
      cursor: pointer;
      padding: 10px;
      margin: 10px 0;
      z-index: 1;
      float: right;
  }
  
  .open {
    -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: translate(100%,0);
            transform: translate(100%,0);
  }

  #skills, #projects {
      padding: 2.5em 0;
  }

  .skills-box ul, .skills-box li {
      padding: 5px 15px;
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
  }

  .skills-box ul {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
  }

  .skills-box, .project-card {
      width: 100%;
  }

  #contact h3 {
      font-size: 1.4rem;
  }
  
  .social, footer p {
      width: 100%;
      text-align: center;
      margin: 10px;
  }
}

@media (max-width: 400px) {
  .skills-box h3 {
      font-size: 1.2rem;
  }
}