/* Big tablets to 1200px, which is the 1140px row 768 */
@media only screen and (max-width: 1200px) {

}

/* Small tablet to big tablet 768 - 1023px */
@media only screen and (max-width:1023px) {

    .project-box {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .project-box img {
        max-width: 100%;
        height: auto;
        flex: 0 1 auto;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 200%;
    }


}

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

    h1 {
        font-size: 140%;
        line-height: 40px;
    }

    .header-text {
        top: 52%;
        left: 50%;
    }

    .section-about img {
        width: 30%;
        margin: 0% 35% 3% 35%;
    }

    .contact-list {
        margin: 0 20%;
    }

    
    p {
        font-size: 90%;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        padding: 10px;

    }

    #my-journey-container {
        flex-direction: column;
    }

    #my-journey-container2 {
        flex-direction: column;
    }

    #my-journey-container p {
        margin-left: 0;
        margin-right: 0;
    }

    #my-journey-container2 p {
        margin-left: 0;
        margin-right: 0;
    }

    #myjourney-movable-1-1 {
        display: none;
    }   

    #myjourney-movable-1-2 {
        display: block;
    }

    #myjourney-movable-2-1 {
        display: none;
    }   

    #myjourney-movable-2-2 {
        display: block;
    }


    #my-journey-image {
        max-width: 100%;
        margin: 10px 0;
    }

    .logo {
        max-width: 350px;
    }

}

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

    


    h1 {
        font-size: 86%;
        font-weight: 300;
    }

    h2 {
        font-size: 130%;
    }

    h3 {
        font-size: 110%;
    }

    .header-text {
        left: 43%;
        top:56.5%;
    }

    .project-box {
        width: 100%;
    }

    .contact-list {
        margin: 0 15%;
    }

    .section-about img {
        width: 40%;
        margin: 0% 30% 3% 30%;
    }

    p {
        font-size: 83%;
        margin: 0 10%;
    }

    .main-nav {
        float:right;
        list-style: none;
        text-align: right;
        padding-top: 25px;
        padding-bottom: 10px;
        width: 100%;
        top: 0%;
        right: 0%;
        margin-right: 0px;
    }

    .main-nav li {
        display: inline-block;
        margin-right: 0%;
        font-weight: 300;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 70%;
        padding: 5px;
        border-bottom: 3px solid transparent;
        -webkit-transition: border-bottom 0.2s;
        transition: border-bottom 0.2s;
    }

    .main-nav li a:hover,
    .main-nav li a:active {
        border-bottom: 2px solid #FFCC00;
    }

    .contact-list {
        margin: 0 4%;
    }

    .sticky-nav .row {
        text-align: center;
    }

    .main-nav .row {
        text-align: center;
    }

    .sticky-nav li {
        margin: 0;
    }

    .sticky-nav li a:link,
    .sticky-nav li a:visited {
        font-size: 70%;
        padding:  5px;
    }

    .logo {
        max-width: 250px;
    }

}}