/* The rules that appear in here will be applied when the max width is less or equal. */

/* Special for PC - 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1600px){
    
    .hero-landing-box {
        width: 100%;
        padding: 0 13%;
    }

    .row { padding: 0 2%; } 

    .work-box:first-of-type {
        margin-left: 18.2%;
    }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 50%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 25%;

        font-size: 110%;
    }

}

/* Big tablet - 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px){
    
    .hero-landing-box {
        width: 100%;
        padding: 0 6%;
    }

    .row { padding: 0 2%; } 

    .work-row .col {
        width: 100%;
    }

    .work-box:first-of-type {
        margin-left: auto;
    }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 60%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 20%;

        font-size: 100%;
    }

}


/* Small tablet to big tablet - 768-1023px */
@media only screen and (max-width: 1023px){
    
    /* body { font-size: 18px; } */
    section { padding: 60px 0; }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 80%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 10%;
    }

    .col { width: 100%; }

    .work-row .col {
        width: 100%;
    }
    /* Main Nav */
    nav .main-nav{
        margin-top: 0px;
    }

    nav:not(.sticky) .main-nav
    {
        margin-top: 20px;
    }
    
    .main-nav li {
        width: 14%;
    }

    footer {
        padding: 60px 0;
    }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 70%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 15%;

        font-size: 100%;
    }

    .long-copy span {
        padding-top: 20px;
        font-size: 70%;
    }

    /* Work Rows */

    .work-row:last-child .span-1-of-3:last-child .work-box {
        margin-bottom: 0px !important;
    }

    .about-block p:last-child {
        padding-bottom: 24px;
    }

    .work-box:first-of-type {
        margin-left: 33.33%;
    }

    /* About me blocks */
    .icon-big {
        width: 100%;
    }

    .aboutme-box{
        margin-bottom: 20px;
    }

    .span-1-of-4:last-child .aboutme-box {
        margin-bottom: 60px;
    }

    .aboutme-box h3,
    .aboutme-box p {
        text-align: center;
    }

    /* SkillBars */
    .skillbar-parent {
        width: 66%;
    }

    header {
        background-attachment: scroll;
    }

    .section-contact {
        background-attachment: scroll;
    }

}

/* Small phones to small tablets - 481-767px */
@media only screen and (max-width: 767px){

    .hero-landing-box,
    .row {
        padding: 0 4%;
    }

    .col { width: 100%; }

    .work-row .col {
        width: 100%;
    }

    h1 { font-size: 180%; }
    h2 { font-size: 150%; }

    footer {
        padding: 60px 0;
    }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 90%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 5%;

        font-size: 100%;
    }

    .long-copy span {
        padding-top: 20px;
        font-size: 70%;
    }

    /* Work Rows */

    .work-row:last-child .span-1-of-3:last-child .work-box {
        margin-bottom: 0px !important;
    }

    .about-block p:last-child {
        padding-bottom: 24px;
    }

    /* About me blocks */
    .icon-big {
        width: 100%;
    }

    .aboutme-box{
        margin-bottom: 20px;
    }

    .span-1-of-4:last-child .aboutme-box {
        margin-bottom: 60px;
    }

    .aboutme-box h3,
    .aboutme-box p {
        text-align: center;
    }

    
    /* SkillBars */
    .skillbar-parent {
        width: 90%;
        /*margin-left: 2%;
        margin-right: auto;*/
    }

    /* Main Nav */
    .main-nav li {
        width: 20%;
    }

    header {
        background-attachment: scroll;
    }

    .section-contact {
        background-attachment: scroll;
    }

}

/* Small phones - 0-480px */
@media only screen and (max-width: 480px){

    h1 {
        font-size: 180%;
    }

    /* Main Nav */
    nav .main-nav{
        margin-top: 6px;
        margin-bottom: 6px;
    }

    nav:not(.sticky) .main-nav
    {
        margin-top: 20px;
    }

    .main-nav li {
        width: 30%;
    }

    footer {
        padding: 60px 0;
    }

    .long-copy {
        /* We dont want all the text to use a lot of screen width space, so we set a less than 100% value here. */
        width: 90%;
    
        /* And to center it, we need to adjust the margin, depending on the remaining width of the container (30% remaining, then it is 15% per side) */
        margin-left: 5%;

        font-size: 100%;
    }

    .long-copy span {
        padding-top: 20px;
        font-size: 70%;
    }

    /* Work Rows */

    .work-row:last-child .span-1-of-3:last-child .work-box {
        margin-bottom: 0px !important;
    }

    .about-block p:last-child {
        padding-bottom: 24px;
    }

    .work-box:first-of-type {
        margin-left: 20%;
    }

    /* About me blocks */
    .icon-big {
        width: 100%;
    }

    .aboutme-box{
        margin-bottom: 20px;
    }

    .span-1-of-4:last-child .aboutme-box {
        margin-bottom: 60px;
    }

    .aboutme-box h3,
    .aboutme-box p {
        text-align: center;
    }

    /* WEIRD FIST WORK ICON FIX */
    .col:first-child {
        margin-left: 0%;
    }

    /* SkillBars */
    .skillbar-parent {
        width: 90%;
        /*margin-left: 2%;
        margin-right: auto;*/
    }

    header {
        background-attachment: scroll;
    }

    .section-contact {
        background-attachment: scroll;
    }
}

@media only screen and (max-width: 386px){
    #fix-contact-button {
        transform: translate(0,12px);
    }
 }