html {
    font-family:"Open Sans";    /* Find new Font */
    overflow-x: hidden;
} 

img, embed, object, video {
    max-width:100%;
}

p {
    font-size:18px;
}

/*  NAV */

.nav-bar {
    float: none;
    margin: 0 25% 0 25%;
    max-width: 800px;
    padding: 0 0 5px 0;
    width: 50%;
}

.nav-burger {
    display:none;
}

nav {
    text-align:left;
    background-color:transparent;
    opacity: 0.9;
    width:100%;
    padding: 0 0 25px 0;
    z-index:1;
}

nav ul {
    margin:0;
    padding:0;

}
.nav-title {
    margin: 50px 0 0 0;
}
.nav-title a {
    text-decoration:none;
    color:black;
    margin: 50px 0 0 0;
    font-size:20px;
    text-transform:uppercase;
}

.nav-item {
    display:inline-block;
    list-style:none;
    text-transform:uppercase;
    padding: 25px 20px 0 0;
    font-weight: bold;
}

.nav-item a {
    text-decoration:none;
    position:relative;
    color:black;
}
.nav-item a:hover {
    color: black;
  }

.nav-item a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 20px;
    left: 0;
    background-color: black;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.75s ease-in-out 0s;
}

.nav-item a:hover:before {
    visibility: visible;
    transform: scaleX(1.25);
}

.nav-responsive {
    display:none
}

/*Main Section*/

.text {
    width:50%;
    margin: 0 25% 3vh 25%; 
    text-align:justify;
}

.main-title0 {
    margin-bottom: 20vh;
    margin-top:10vh;
    font-size:46px;
}

.main-content1 {
    margin-bottom:10vh;
}

.main-pic1 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    align-content:center;

}
.main-pic2 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;

}
.main-pic3 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}

.main-link4 {
    text-decoration:none;
    color:navy;
}
.main-pic4 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}

.main-pic4 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}

.main-pic5 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}

.main-pic6 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}

.main-section8 {
    margin-top:20vh;
}
.main-pic8 > img {
    width:80%;
    margin: 0 10% 10vh 10%; 
    justify-content:center;
}
.main-pic8 {
    text-align:center;
}
/*Back to top*/
.about-totop {
    text-align: center;
    justify-content:center;
    align-content:center;
    margin: 10vh 0 10vh 0;
}

.about-totop a {
    text-decoration:none;
    color:black;
}



/* Footer */
.footer {
    font-size:12px;
    bottom:0px;
    width:100%;
    display:inline-block;
    text-align:center;
    margin:50px;
}
.footer-content {
    text-decoration:none;
    color:black;
    font-size:50px;
}
.footer-content:hover {
    color:coral;
}


/* CELL */

@media only screen and (max-width:540px) {
    /* Hide LARGE NAV */
    .nav-large {
        display:none;
    }

    /* Show Burger NAV */
    .nav-responsive,
    .nav-responsive:before,
    .nav.responsive:after {
        display:block;
        position:absolute;
        top:50px;
        left:85%;    
        font-size:25px;   
    }
    /* Photo Viewport Changes */
    .projects-photo {
        height:40vw;
        margin-bottom:-10vh;
    }
    
    /* Toggler remover */
    .nav-responsive .nav-toggler {
        position: absolute;
        top:0;
        left:0;
        z-index:2;
        cursor:pointer;
        width:25px;
        height:25px;
        opacity:0;
    }
    .nav-responsive .nav-toggler:checked + .nav-burger > div {
        transform:rotate(135deg);
    }
    

    /* Menu BURGER  Position and Lines*/
    .nav-responsive .nav-burger {
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        width: 25px;
        height:25px;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color:white;
        }
    
    .nav-responsive .nav-burger > div {
        position:absolute;
        width:100%;
        height: 2px;
        background-color:black;
        display: flex;
        align-items:center;
        justify-content: center;
        transition: all 1s ease;
    }

    .nav-responsive .nav-burger > div:before,
    .nav-responsive .nav-burger > div:after {
        content:'';
        position:absolute;
        z-index:1;
        top:-10px;
        width:100%;
        height:2px;
        background:inherit;
    }
    .nav-responsive .nav-burger > div:after {
        top:10px;
    }

    .nav-responsive .nav-toggler:checked ~ .nav-menu{
        visibility: visible;
    }
    .nav-responsive .nav-toggler:checked ~ .nav-menu > div{
        transform: scale(1);
        transition-duration:0.4s;
    }
    .nav-responsive .nav-toggler:checked ~ .nav-menu > div > div{
        opacity: 1;
        transition: opacity 0.4s ease;
    }


    .nav-menu {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        visibility: hidden;
        overflow: hidden;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .nav-menu > div {
        border-radius:50%;
        width:200vw;
        height:200vw;
        display:flex;
        flex:none;
        align-items:center;
        justify-content:center;
        margin-bottom:80vw;
        transform: scale(0);
        background:white;
    }
    .nav-menu > div > div {
        text-align:center;
        max-width:90vw;
        max-height:100vw;
        opacity:0;
        transition: opacity 0.4s ease;
    }
    .nav-menu > div > div > ul > li {
        list-style:none;
        color:black;
        font-size:1.25rem;
        padding: 1rem;
        text-transform:uppercase;
    }
    .nav-menu > div > div > ul > li > a {
        color:inherit;
        text-decoration:none;
        transition: color 0.4 ease;
    }

}


/* TABLET */
@media only screen and (max-width:768px) {
    .nav-bar {
        float: none;
        width: 84%;
        margin: 0 8% 0 8%;
        max-width: 800px;
        padding: 0 0 5px 0;
    }

    .projects-main {
        width:84%;
        margin: 10px 8% 0 8%;
        text-align:center;
    }
    
    .text {
        width:84%;
        margin: 0 8% 20px 8%;
    }
    p {
        font-size: 15px;
    }
}