/* Master Stles*/
body {
    margin: 0px;
    font-family: 'Noto Sans', sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
}


/* Navbar Styles*/
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    position: sticky;
    top: 0px;
    z-index: 1030;
    background-color: white;
}

.left-side {
    display: flex;
}

.nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9em;
    text-transform: uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    border-bottom: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a {
    color: black !important
}

.brand {
    font-weight: 600;
}

/* Social Media Menu Styles*/
.nav-wrapper-media {
    list-style: none;
    display: flex;
    position: absolute;
    z-index: 1030;
    top: 30px;
    right: 250px;
}

.fix-this {
    position: fixed;
    display: flex;
}

.social-media-icon {
    margin-right: 20px;
    margin-top: 20px;
}

.fa {
    padding: 15px;
    text-decoration: none;
    border-radius: 50%;
}
.fa:hover {
    filter: brightness(70%);
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-twitter {
    background: #55ACEE;
    color: white;
}

.fa-instagram {
    background: #007bb5;
    color: white;
}

.fa-github {
    background: #55ACEE;
    color: white;
}


/* Portfolio Styles*/
.portfolio-items-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-wrapper {
    position: relative;
}

.portfolio-img-background {
    height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
}

.project-header {
    color: white;
    font-size: 53px;
    width: 100%;
    margin-bottom: 20px
}

.text-wrapper .subtitle {
    transition: 1s;
    font-weight: 600;
    color: transparent;
}

.text-wrapper:hover .subtitle {
    font-weight: 600;
    color: dodgerblue;
}

.img-darken {
    transition: 1s;
    filter: brightness(10%);
}

.text-wrapper .project-link a{
    transition: 1s;
    font-weight: 600;
    color: transparent;
    text-decoration: none;
}

.text-wrapper:hover .project-link a {
    font-weight: 600;
    color: dodgerblue;
    border-bottom: 1px solid dodgerblue;
}

/* About Page Styles*/
.two-column-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.profile-image-wrapper img {
    width: 100%;
}

.profile-content-wrapper {
    padding: 30px;
}

.profile-content-wrapper h1 {
    color: dodgerblue;
}

.profile-content-wrapper p {
    font-size: large;
}

.profile-content-wrapper p a {
    text-decoration: none;
    color: dodgerblue;
    border-bottom: 1px solid dodgerblue;
}

/* Resume Styles*/
.resume-wrapper {
    text-align: center;
}

/* Project 1 Styles*/
.project1-img-background {
    width: 1900px; 
    height: 1000px; 
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

.project1-img-background:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('project1/laptop1.png');
    pointer-events: none;
    z-index: 10;
}

.project1-img-background iframe {
    position: absolute;
    top: 350px; 
    left: 570px; 
    z-index: 9;
}

.project1-body h1 {
    color: dodgerblue;
    text-align: center;
}

.project1-body h1 span {
    border-bottom: 3px solid dodgerblue;
}

.project1-column {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin: 100px 400px 100px 400px;
}

.project1-column-reverse {
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin: 100px 400px 100px 400px;
    padding-left: 84px;
}

.project1-icon {
    display: flex;
    text-align: center;
    align-items: center;
    margin: 50;
}

.project1-body h2 {
    text-align: left;
    color: dodgerblue;
}

.project1-list {
    list-style: none;
}

.project1-list li::before {
    content: "\2022"; /* unicode for bullet, can change to something else if want*/
    color: dodgerblue;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.project1-list li {
    font-size: x-large;
}

/* Project 2 Styles*/
.project2-body h1 {
    color: dodgerblue;
    text-align: center;
}

.project2-body h1 span {
    border-bottom: 3px solid dodgerblue;
}

.project2-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0px 200px 0px 200px;
}
.project2-pic {
    padding: 20px 50px 0px 50px;
    text-align: center;
}

.project2-award-info {
    padding: 0px 50px 0px 50px;
}

.project2-award-info h2 span {
    color: dodgerblue;
    border-bottom: 2px solid dodgerblue;
}

.project2-tech-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.project2-synopsis-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 0px 200px 0px 200px;
}

.project2-group-pic {
    text-align: center;
}

.project2-group-pic-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 50px 0 50px;
}

.project2-group-pic h2 span {
    color: dodgerblue;
}
.project2-paragraph {
    font-size: large;
    padding-left: 100px;
}

.project2-resources-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.project2-resources {
    text-align: center;
    padding: 10px;
}

.project2-resources h2 a {
    color: dodgerblue;
    border-bottom: 2px solid dodgerblue;
    text-decoration: none;
}

/* Project 3 Styles*/
#backgroundVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.project3-body h1{
    color: white;
    text-align: center;
}

.project3-body h1 span {
    border-bottom: 3px solid white;
}

.project3-software-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 0px 40px 0px 0px;
}

.project3-pic {
    text-align: center;
}

.project3-library-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0px 20px 0px 0px;
}

.project3-project-column {
    display: flex;
    background-color: transparent;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-left: 19.15%;
    padding-right: 19.15%;
}
.project3-project-box {
    margin: 20px;
    height: 360px;
    width: 550px;
    text-align: center;
    text-decoration: none;
}

.project3-project-title {
    display: block;
    color: black;
    background-color: white;
    padding: 20px 0px 20px 0px;
    font-size: 26pt;
    opacity: 70%;
    margin-top: 273px;
}

/* Project 3 inner Projects Styles*/
.project3-inner-paragraph {
    text-align: left;
    background-color: #eee;
    border-radius: 20px;
    color: black;
    font-size: large;
    margin: 0 500px 0 500px;
    padding: 8px 15px;
}

.project3-inner-paragraph a {
    text-decoration: none;
    color: dodgerblue;
    border-bottom: 1px solid dodgerblue;
}

.project3-project-inner-column {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin: 0px 200px 0px 200px;
}
.project3-project-inner-icon {
    text-align: center;
    padding-bottom: 100px;
}

.project3-project-inner-content h2 {
    color: black;
}

.project3-project-inner-content h2 span {
    border-bottom: 3px solid black;
    background-color: #eee;
    border-radius: 20px;
    padding: 8px 15px;
}

.project3-inner-content-paragraph {
    font-size: large;
    color: black;
}

.project3-inner-content-paragraph a {
    text-decoration: none;
    color: dodgerblue;
    border-bottom: 1px solid dodgerblue;
}

.project3-inner-content-paragraph p {
    background-color: #eee;
    border-radius: 20px;
    padding: 8px 15px;
}

/* AIChE Styles*/
.aiche-banner {
    text-align: center;
}

.aiche-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 80%;
    height: auto;
    max-width: 800px;
    margin: 0 auto;
}

.aiche-timeline ul {
    list-style: none;
}

.aiche-timeline ul li {
    padding: 15px;
    background-color: royalblue;
    color: white;
    border-radius: 10px;
}

.aiche-timeline ul li:hover {
    background-color: gold;
    color: dodgerblue;
    transition: background-color 0.5s;
}

.aiche-timeline ul li:last-child {
    margin-bottom: 0;
}

.aiche-timeline-date {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
}

.aiche-timeline-content h1{
    font-size: 25px;
    font-weight: 500;
    line-height: 10px;
    margin-bottom: 15px;
}

.aiche-timeline-content p {
    font-size: 16px;
    font-weight: 300;
}

@media only screen and (min-width: 768px) {
    .aiche-timeline::before {
        content: '';
        position: absolute;
        height: 1120px;
        width: 3px;
        left: 50%;
        transform: translateX(-50%);
        background-color: royalblue;
    }
    .aiche-timeline ul li {
        width: 50%;
        margin-bottom: 50px;
        position: relative;
    }

    .aiche-timeline ul li:nth-child(odd) {
        float: left;
        clear: right;
        transform: translateX(-50px);
    }

    .aiche-timeline ul li:nth-child(even) {
        float: right;
        clear: left;
        transform: translateX(10px);
    }

    .aiche-timeline ul li::after {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        background-color: royalblue;
        border-radius: 50%;
        top: -10px;
    }

    .aiche-timeline ul li:nth-child(odd)::after {
        transform: translate(50%, 50%);
        right: -30px;
    }

    .aiche-timeline ul li:nth-child(even)::after {
        transform: translate(50%, 50%);
        left: -50px;
    }

    .aiche-timeline ul li:hover:after {
        background-color: #FFBF00;
        transition: background-color 0.5s;
    }
    .aiche-timeline-content .aiche-timeline-date {
        position: absolute;
        top: -30px;
        color: royalblue;
    }
}

.aiche-officer-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.aiche-officer-board h2 {
    color: royalblue;
    text-align: center;
}


.aiche-officer-pic {
    background-color: #FFBF00;
}

.aiche-officer-board-paragraph {
    background-color: #FFBF00;
    padding-top: 15%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 15%;
}

.aiche-officer-board-paragraph h2 {
    text-align: justify;
    padding-bottom: 20px;
}

.aiche-officer-board-paragraph h3 {
    color: royalblue;
    text-align: justify;
    font-size: x-large;
    font-weight: 500;
}

.aiche-officer-board-pic {
    text-align: center;
}

.aiche-officer-board-pic-title {
    display: block;
    color: royalblue;
    background-color: #FFBF00;
    padding: 10px 0px 10px 0px;
    opacity: 70%;
}

.aiche-problems-container {
    margin-bottom: 30px;
}

.aiche-problems {
    box-sizing: border-box;
}

/* AIChE Card Styles*/
.card {
    border: 0px;
}

.problem-header {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 2px;
    color: royalblue;
    text-align: center;
}

.card-group {
    margin: 0 200px 0 200px;

}

.card-group .card-primary {
    margin: 0 50px 100px 50px;
}

.card-group .card-primary:hover {
    box-shadow: 0px 40px 60px -20px rgba(34, 167, 240, .6);
    z-index: 100;
    transition: 1s;
}

.card-group .card-primary .card-img-top {
    width: 100px;
    height: 100px;
    margin: 80px auto 32px;
}

.card-group .card-primary .card-body > .badge {
    margin-bottom: 24px;
}

.card-group .card-primary .card-body {
    padding: 0 32px;
}

.card-group .card-primary .card-text {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.card-group .card-primary .card-footer {
    padding: 48px 0 56px;
    background: transparent;
    border: 0;
}

.card-group .card-primary .card-footer .btn:hover{
    background-color: royalblue;
    transition: 0.5s;
}

/* AIChE Carousel Styles*/
.carousel-cell {
    height: 600px;
    width: 100%;
    margin-right: 10px;
    margin-top: 50px;
}

.carousel-column {
    display: flex;
}

.carousel-info {
    height: 600px;
    width: 400px;
    text-align: center;
    margin-left: 50px;
    padding-top: 100px;
}

.carousel-paragraph {
    margin: 50px;
    font-weight: 600;
}

.sol3-banner {
    text-align: center;
    margin-top: 50px;
}

#Events {
    width: 400px;
    height: 500px;
    margin-left: 100px;

}

#Budget {
    width: 400px;
    height:500px;
    margin-left: 100px;
}

.aiche-solution-contain {
    display: flex;
}

.aiche-solution-body {
    margin-left: 100px;
    margin-top: 100px;
    z-index: 10;
}

.aiche-solution-paragraph li {
    font-weight: 600;
    list-style: none;
}

.aiche-solution-paragraph li:before {
    content: "\2022"; /* unicode for bullet, can change to something else if want*/
    color: royalblue;
    font-size: x-large;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Work1 (OSIsoft) Styles*/
.work1-header {
    display: flex;
    text-align: center;
    align-items: center;
    margin: 0 470px 50px 470px;
    padding: 30px 0 30px 50px;
    background-image: url(osisoft/banner.jpg);
    background-size: cover;
}

.work1-title {
    padding-left: 70px;
}

.work1-title h1{
    color: white;
}

.work1-title h1 span {
    border-bottom: 3px solid white;
}

.work1-title h2 {
    color: white;
}

.work1-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-right: 100px;
    align-items: center;
}

.work1-overview-paragraph {
    margin: 20px 50px 20px 50px;
    padding: 20px 20px 20px 20px;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
    box-shadow: 20px 20px 0 0 dodgerblue;
}

.work1-overview-paragraph h2 {
    color: dodgerblue;
}

.work1-overview-paragraph p {
    font-size: large;
    font-weight: 600;
    text-align: justify;
}

/* Work2 (Chevron) Styles*/
.work2-header {
    display: flex;
    text-align: center;
    align-items: center;
    margin: 0 470px 50px 470px;
    padding: 30px 0 30px 0;
    background-image: url(chevron/backgroundbanner.jpg);
    background-size: cover;
}

.work2-title h1{
    color: white;
}

.work2-title h1 span {
    border-bottom: 3px solid white;
}

.work2-title h2 span{
    color: white;
}

.work2-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    margin-left: 100px;
    margin-right: 100px;
}

.work2-overview-image {
    text-align: center;
}

.work2-overview-paragraph {
    padding: 20px 20px 20px 20px;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
    box-shadow: 20px 20px 0 0 dodgerblue;
}

.work2-overview-paragraph h2 {
    color: dodgerblue;
}

.work2-overview-paragraph p {
    font-size: large;
    font-weight: 600;
    text-align: justify;
}

.work2-objectives h1 {
    color: dodgerblue;
    text-align: center;
    margin: 30px 0 30px 0;
}

.work2-objectives h1 span {
    border-bottom: 3px solid dodgerblue;
}

.card-group .card-primary .card-footer2 {
    padding: 25px 0 25px;
    background: transparent;
    border: 0;
}

.work2-body {
    margin: 0 400px 0 400px;
}

.work2-body h1 {
    color: dodgerblue;
    text-align: center;
    margin-bottom: 50px;
}

.work2-body h1 span {
    border-bottom: 3px solid dodgerblue;
}

.work2-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-bottom: 100px;
    align-items: center;
    align-content: center;
}
.work2-section-image {
    text-align: center;
}
.work2-tech {
    margin-top: 50px;
}

.work2-tech h1 {
    color: dodgerblue;
    text-align: center;
}

.work2-tech h1 span {
    border-bottom: 3px solid dodgerblue;
}

.work2-tech-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 50px 0 50px 0;
}

.work2-section-paragraph h2 {
    color: dodgerblue;
}

.work2-section-paragraph ul {
    list-style: none;
    font-weight: 600;
}

.work2-section-paragraph ul li:before {
    content: "\2022"; /* unicode for bullet, can change to something else if want*/
    color: royalblue;
    font-size: x-large;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Work3 (PG&E) Styles*/
.work3-header {
    display: flex;
    text-align: center;
    align-items: center;
    margin: 0 470px 50px 470px;
    padding: 30px 0 30px 50px;
    background-image: url(pge/banner.jpg);
    background-size: cover;
}

.work3-title {
    padding-left: 70px;
}

.work3-title h1{
    color: white;
}

.work3-title h1 span {
    border-bottom: 3px solid white;
}

.work3-title h2 {
    color: white;
}

.work3-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-right: 100px;
    align-items: center;
}

.work3-overview-paragraph {
    margin: 20px 50px 20px 50px;
    padding: 20px 20px 20px 20px;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
    box-shadow: 20px 20px 0 0 dodgerblue;
}

.work3-overview-paragraph h2 {
    color: dodgerblue;
}

.work3-overview-paragraph p {
    font-size: large;
    font-weight: 600;
    text-align: justify;
}

.work3-tech {
    margin-top: 0px;
}

.work3-tech h1 {
    color: dodgerblue;
    text-align: center;
}

.work3-tech h1 span {
    border-bottom: 3px solid dodgerblue;
}
.work3-tech-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 50px 0 80px 0;
}

/* ASUCD Styles*/

.coming-soon {
    font-size: 200px;
    color: dodgerblue;
    text-align: center;
    align-items: center;
}

.reason {
    font-size: 30px;
    margin: 0 100px 0 100px;
    text-align: center;
}

/* Website Blog Styles*/
.blog-wrapper {
    margin: 50px 350px 50px 350px;
}

.blog-title {
    margin: 0px 200px 50px 200px;
}

.blog-title h1 {
    font-size: 50px;
    font-weight: 600;

}

.blog-title h2 {
    font-size: 20px;
}

.blog-image {
    text-align: center;
}

.blog-body {
    margin: 50PX 200px 0px 200px;
}

.blog-body p {
    font-size: 23px;
}