@charset "UTF-8";
/* CSS Document */
/*----DEFAULTS----*/
* {
        margin: 0;
        padding: 0;
}
body {
        font-family: 'Rubik', sans-serif;
        font-size: 62.5%;
}
.clearfloat {
        clear: both;
}
.grey {
        color: #383838;
}
/*----STRUCTURE----*/
.wrapper {
        max-width: 1000px;
        margin: 0 auto;
}
.text-wrapper {
        margin: 0 auto;
        max-width: 650px;
}
.skew-white {
        background-color: #fff;
        transform: skewY(4deg);
        height: 200px;
        width: 100%;
        margin-top: -100px;
}
header {
        width: 100%;
        height: 100vh;
}
nav {
        background-color: #fff;
        position: fixed;
        width: 100%;
        top: 0;
        height: 108px;
        z-index: 10000;
}
#about {
        background-color: #D93044;
        margin: 0;
        padding: 60px 0 220px;
}
#about-logo {
        margin: 50px auto;
        width: 290px;
}
#statement {
        margin-top: 80px;
        position: relative;
}
#red-shape {
        background-image: url("../img/red-shape.svg");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 1100px;
        padding: 260px 0 80px 0;
}
#blue-shape {
        background-image: url("../img/blue-shape.svg");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 1100px;
        padding: 140px 0 50px 0;
        margin-top: 50px;
}
footer {
        background-color: #383838;
        width: 100%;
        height: 210px;
        padding: 70px 0;
}
footer img {
        width: 130px;
        margin: 0 auto;
        display: block;
}
#footer-container {
        display: flex;
        justify-content: space-between;
        max-width: 1640px;
        flex-wrap: wrap;
        margin: 0 auto;
}
#footer-presented-by img {
        float: left;
        width: 50px;
        margin: 10px;
}
#footer-supported-by img {
        float: left;
        width: 80px;
        margin: 10px;
}
#social-icons {
        display: flex;
        justify-content: center;
}
#social-icons img {
        width: 40px;
}
#social-icons a:link, #social-icons a:visited {
        margin: 15px;
}
#social-icons a:hover, #social-icons a:focus, #social-icons a:active {}
video {
	width: 100%;
	border: none;
	background-color: #fff;
}
/*---HEADER VIDEO----*/
header video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #55B1D1;
}
.overlay {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        color: #000;
}
/*----CLOUD ANIMATION----*/
#cloud-1 {
        animation-name: clouds;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: block;
        position: fixed;
        top: 15%;
        opacity: .2;
        z-index: 9002;
}
#cloud-2 {
        animation-name: clouds;
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: block;
        position: fixed;
        top: 50%;
        opacity: .2;
        z-index: 9001;
}
#cloud-3 {
        animation-name: clouds;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: block;
        position: fixed;
        top: 40%;
        opacity: .2;
        z-index: 9000;
}
#cloud-4 {
        animation-name: clouds;
        animation-duration: 120s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: block;
        position: fixed;
        bottom: 40%;
        opacity: .2;
        z-index: 9004;
}
#cloud-5 {
        animation-name: clouds;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: block;
        position: fixed;
        bottom: 10%;
        opacity: .2;
        z-index: 9005;
}
@keyframes clouds {
        from {
                left: -20%;
        }
        to {
                left: 100%;
        }
}
/*----NAVIGATION----*/
#logo {
        float: left;
        margin: 15px 0 0 10%;
}
#logo img {
        width: 70px;
        margin-top: -200px;
        transition: all 0.3s ease-in-out;
}
nav ul {
        float: right;
        display: flex;
        width: 500px;
        justify-content: space-between;
        list-style: none;
        margin: 30px 10% 0 0;
}
nav li a:link, nav li a:visited {
        font-weight: 500;
        font-size: 3.4em;
        color: #383838;
        text-decoration: none;
        letter-spacing: -0.02em;
}
nav li a:hover, nav li a:focus, nav li a:active {
        border-bottom: 1px solid #383838;
}
nav li a:focus {
        color: #D93044;
}
#cta ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 50px 0;
        position: relative;
        z-index: 9060;
}
#cta li a:link, #cta li a:visited {
        display: block;
        -webkit-border-radius: 38px;
        -moz-border-radius: 38px;
        border-radius: 38px;
        background: #383838;
        font-weight: 500;
        font-size: 2.0em;
        color: #fff;
        padding: 15px 50px;
        text-decoration: none;
        text-transform: uppercase;
        margin: 20px;
        transition: all 0.3s ease;
}
#cta li a:hover, #cta li a:focus, #cta li a:active {
        background-color: #fff;
        color: #D93044;
}
/*----HAMBURGER MENU----*/
.hamburger-menu {
        display: none;
}
.hamburger-menu a:link, .hamburger-menu a:visited {
        text-decoration: none;
}
.hamburger {
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
        z-index: 10000;
        height: 50px;
}
#hamburger-container {
        float: right;
        width: 25px;
        margin-right: 20px;
        margin-top: 10px;
}
.bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        background-color: #D93044;
}
.nav-menu {}
.nav-item {
        text-align: right;
        padding-right: 20px;
}

.nav-item img {
	width: 65px;
}


.nav-link {
        font-size: 4em;
	        letter-spacing: -0.02em;

        font-weight: 600;
        color: #383838;
}
.nav-link:hover {
        color: #D93044;
}
/*----STUDENT PROFILES----*/
#students {
        padding: 60px 0 200px;
}
#student-profile-container {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        max-width: 1640px;
        margin: 0 auto;
        text-align: center;
        padding: 50px 0 200px;
}
.student-profile {
        width: 536px;
        height: 536px;
        display: block;
        z-index: 9900;
        margin: 4px 0;
}
#student-profile-container a {
        text-decoration: none;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.45);
}
#student-1 a:link, #student-2 a:link, #student-3 a:link, #student-4 a:link, #student-5 a:link, #student-6 a:link, #student-7 a:link, #student-8 a:link, #student-9 a:link {
        width: 536px;
        height: 300px;
        display: block;
        font-size: 4.0em;
        font-weight: 600;
        letter-spacing: -0.02em;
        padding-top: 236px;
        background-position: -536px 0px;
        background-repeat: no-repeat;
}
#student-1 a:link, #student-1 a:visited {
        background-image: url("../img/student-profiles/ashley.jpg");
        color: #fff;
}
#student-1 a:hover, #student-1 a:focus, #student-1 a:active {
        opacity: .8;
        background-position: 0px 0px;
}
#student-2 a:link, #student-2 a:visited {
        background-image: url("../img/student-profiles/audrey.jpg");
        color: #fff;
}
#student-2 a:hover, #student-2 a:focus, #student-2 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-3 a:link, #student-3 a:visited {
        background-image: url("../img/student-profiles/carlos.jpg");
        color: #fff;
}
#student-3 a:hover, #student-3 a:focus, #student-3 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-4 a:link, #student-4 a:visited {
        background-image: url("../img/student-profiles/dawson.jpg");
        color: #fff;
}
#student-4 a:hover, #student-4 a:focus, #student-4 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-5 a:link, #student-5 a:visited {
        background-image: url("../img/student-profiles/jemi.jpg");
        color: #fff;
}
#student-5 a:hover, #student-5 a:focus, #student-5 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-6 a:link, #student-6 a:visited {
        background-image: url("../img/student-profiles/lauren.jpg");
        color: #fff;
}
#student-6 a:hover, #student-6 a:focus, #student-6 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-7 a:link, #student-7 a:visited {
        background-image: url("../img/student-profiles/mackenzie.jpg");
        color: #fff;
}
#student-7 a:hover, #student-7 a:focus, #student-7 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-8 a:link, #student-8 a:visited {
        background-image: url("../img/student-profiles/madhureeta.jpg");
        color: #fff;
}
#student-8 a:hover, #student-8 a:focus, #student-8 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
#student-9 a:link, #student-9 a:visited {
        background-image: url("../img/student-profiles/thomas.jpg");
        color: #fff;
}
#student-9 a:hover, #student-9 a:focus, #student-9 a:active {
        background-position: 0px 0px;
        opacity: .8;
}
/*----FEATURES----*/
.skew-grey {
        background-color: #383838;
        transform: skewY(4deg);
        height: 200px;
        width: 100%;
        margin-top: -100px;
}
#work {
        background-color: #383838;
        padding: 160px 0 200px;
        margin-top: -100px;
}
#work-container {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        max-width: 1640px;
        margin: 0 auto;
        text-align: center;
        padding: 50px 0;
}
.work-general {
        z-index: 9900;
        margin: 4px 0;
}
.work-general img {
        width: 100%;
}
#work-1 a:link, #work-2 a:link, #work-3 a:link, #work-4 a:link, #work-5 a:link, #work-6 a:link, #work-7 a:link, #work-8 a:link, #work-9 a:link {
        width: 812px;
        display: block;
        background-size: 100%;
        background-repeat: no-repeat;
}
#work-1 a:link, #work-1 a:visited {}
#work-1 a:hover, #work-1 a:focus, #work-1 a:active {
        opacity: .5;
}
#work-2 a:link, #work-2 a:visited {}
#work-2 a:hover, #work-2 a:focus, #work-2 a:active {
        opacity: .8;
}
#work-3 a:link, #work-3 a:visited {}
#work-3 a:hover, #work-3 a:focus, #work-3 a:active {
        opacity: .8;
}
#work-4 a:link, #work-4 a:visited {}
#work-4 a:hover, #work-4 a:focus, #work-4 a:active {
        opacity: .8;
}
#work-5 a:link, #work-5 a:visited {}
#work-5 a:hover, #work-5 a:focus, #work-5 a:active {
        opacity: .8;
}
#work-6 a:link, #work-6 a:visited {}
#work-6 a:hover, #work-6 a:focus, #work-6 a:active {
        opacity: .8;
}
#work-7 a:link, #work-7 a:visited {}
#work-7 a:hover, #work-7 a:focus, #work-7 a:active {
        opacity: .8;
}
#work-8 a:link, #work-8 a:visited {}
#work-8 a:hover, #work-8 a:focus, #work-8 a:active {
        opacity: .8;
}
#work-9 a:link, #work-9 a:visited {}
#work-9 a:hover, #work-9 a:focus, #work-9 a:active {
        opacity: .8;
}
/*----PROFILE PAGE GENERAL STYLES----*/
/*----PROFILE PAGE GENERAL STYLES----*/
/*----PROFILE PAGE GENERAL STYLES----*/
/*----PROFILE PAGE GENERAL STYLES----*/
#red-blob-1 {
        position: absolute;
        left: 0;
        top: 130px;
}
#red-blob-2 {
        position: absolute;
        right: 0;
        top: 130px;
}
#header-content {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 100px;
        max-width: 50%;
        left: 50%;
        margin-left: -25%;
        min-width: 600px;
        z-index: 9990;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
}
#vertical-rule {
        width: 2px;
        background-color: #383838;
        margin: 0 20px;
}
#header-content p {
        color: #383838;
        text-align: left;
        padding-top: 30px;
}
#header-content h1 {
        color: #383838;
        text-align: right;
        padding-top: 20px;
}
.skew-blue-1 {
        background-color: #55B1D1;
        transform: skewY(-4deg);
        height: 200px;
        width: 100%;
        margin-top: -50px;
        z-index: 9000;
}
.skew-blue-2 {
        background-color: #55B1D1;
        transform: skewY(4deg);
        height: 200px;
        width: 100%;
        margin-top: 0px;
        z-index: 9000;
}
.skew-blue-3 {
        background-color: #55B1D1;
        transform: skewY(-4deg);
        height: 200px;
        width: 100%;
        margin-top: 0px;
        z-index: 9000;
}
.project-cover {
        background-color: #55B1D1;
        margin-top: -80px;
        position: relative;
        height: 70vh;
        padding: 50px;
}
.project-cover-img img {
        max-width: 750px;
        position: absolute;
        left: 50px;
        z-index: 9900;
}
.project-text {
        background-image: url("../img/project-text-bg.svg");
        background-size: 1200px;
        background-repeat: no-repeat;
        height: 540px;
        position: absolute;
        bottom: 0;
        right: 50px;
        max-width: 1200px;
        padding: 230px 200px 25px;
        box-sizing: border-box;
        z-index: 9900;
}
.project-text h2, .project-text h3, .project-text p {
        color: #383838;
        text-align: center;
}
.project-text h2 {
        font-size: 4em;
        text-transform: uppercase;
}
.project-text h3 {
        font-size: 3.2em;
        font-weight: 100;
}
.project-container {
        max-width: 1640px;
        margin: 0 auto;
        padding: 100px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
}
.project-full-image, .project-square-image, .project-half-image {
        margin: 8px 0;
        z-index: 9900;
}
#social-bank {
        background: #383838;
        -webkit-border-top-right-radius: 27px;
        -webkit-border-bottom-right-radius: 27px;
        -moz-border-radius-topright: 27px;
        -moz-border-radius-bottomright: 27px;
        border-top-right-radius: 27px;
        border-bottom-right-radius: 27px;
        position: absolute;
        left: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 50px;
        padding: 25px;
        z-index: 9990;
        top: 30%;
}
#social-bank img {
        width: 30px;
        margin: 8px 0;
}
.project-container p {
        color: #383838;
        text-align: center;
        padding: 60px 10%
}
#project-nav {
        width: 100%;
        margin: 0 auto;
}
#left-btn, #right-btn {
        position: relative;
        z-index: 10000;
}
#left-btn a:link, #left-btn a:visited {
        background-image: url("../img/left-arrow.svg");
        background-repeat: no-repeat;
        background-size: 50px;
        width: 50%;
        height: 100px;
        background-color: #D93044;
        display: block;
        color: #fff;
        float: left;
        background-position: 10% 50%;
        padding: 37px 0 0 11%;
        font-size: 2.4em;
        line-height: 1em;
        font-weight: 100;
        box-sizing: border-box;
        text-decoration: none;
}
#left-btn a:hover, #left-btn a:focus, #left-btn a:active {
        opacity: .8;
}
#right-btn a:link, #right-btn a:visited  {
        background-image: url("../img/right-arrow.svg");
        background-repeat: no-repeat;
        background-size: 50px;
        width: 50%;
        height: 100px;
        background-color: #D93044;
        display: block;
        color: #fff;
        float: left;
        background-position: 90% 50%;
        padding: 37px 11% 0 0;
        font-size: 2.4em;
        line-height: 1em;
        font-weight: 100;
        box-sizing: border-box;
        text-decoration: none;
        text-align: right;
}
#right-btn a:hover, #right-btn a:focus, #right-btn a:active {
        opacity: .8;
}
/*----TYPE STYLES----*/
h1 {
        font-size: 6.0em;
        text-align: center;
        font-weight: 600;
        line-height: 1em;
        color: #fff;
        margin: 0;
        padding: 0;
        letter-spacing: -0.02em;
}
#about h3 {
        margin: 50px 0 0 0;
}
h3 {
        font-size: 4.0em;
        text-align: center;
        font-weight: 600;
        line-height: 1em;
        color: #fff;
        letter-spacing: -0.02em;
}
h4 {
        font-size: 4.0em;
        text-align: center;
        font-weight: 600;
        color: #fff;
        letter-spacing: -0.02em;
}
p {
        font-size: 2.5em;
        text-align: center;
        font-weight: 300;
        color: #fff;
        padding-top: 40px;
}
sup {
        font-size: .6em;
        padding-top: -30px;
}
#byline p {
        font-size: 1.2em;
        margin: 0;
        padding: 15px 0 0 0;
}
#student-blurb p {
        padding: 10px;
        opacity: .8;
}
#overlay-content h2 {
        position: absolute;
        top: 80%;
        width: 100%;
        text-align: center;
        font-weight: 600;
        color: #fff;
        font-size: 5.2em;
        line-height: 1em;
        letter-spacing: -0.02em;
}
/*------MEDIA QUERY DISPLAY NONE--------*/
#cta li#desktop-btn {
        display: inline;
}
#cta li#mobile-btn {
        display: none;
}
#mobile-scroll-location {
        position: absolute;
        height: 100px;
        opacity: 0;
}
/*------MEDIA QUERY 767px-1640--------*/
@media only screen and (max-width : 1640px) {
        #work-container {
                width: 100%;
                box-sizing: border-box;
        }
        #work-container img {}
        .work-general {
                width: 49%;
                box-sizing: border-box;
        }
        #work-1 a:link, #work-2 a:link, #work-3 a:link, #work-4 a:link, #work-5 a:link, #work-6 a:link, #work-7 a:link, #work-8 a:link, #work-9 a:link {
                width: 100%;
        }
        #student-profile-container {
                justify-content: center;
                max-width: 100%;
        }
        .student-profile {
                margin: 4px 4px;
        }
        .project-cover {
                min-height: 100vh;
                height: auto;
                box-sizing: border-box;
        }
        .project-cover-img img {
                width: 100%;
			        max-width: 500px;

                box-sizing: border-box;
                position: relative;
                left: auto;
        }
        .project-text {
                background-size: cover;
                background-position: center;
                right: 0px;
                padding: 230px 160px 25px;
        }
	.project-text h2, .project-text h3 {
                font-size: 2em;
        }
        .project-text p {
                font-size: 2em;
        }
        .project-container {
                width: 90%;
                padding: 50px 0;
                justify-content: center;
                box-sizing: border-box;
        }
        .project-full-image img, .project-square-image img, .project-half-image img {
                width: 100%;
        }
        #student-name h1 {
                font-size: 3em;
        }
        #student-blurb p {
                font-size: 2em;
        }
}
/*------MEDIA QUERY 0-767px--------*/
/*------MEDIA QUERY 0-767px--------*/
/*------MEDIA QUERY 0-767px--------*/
@media only screen and (max-width : 767px) {
        /*------LANDING PAGE --------*/
        .wrapper {
                width: 100%;
                padding: 50px 30px;
                box-sizing: border-box;
        }
        #cloud-4, #cloud-3 {
                display: none;
        }
        nav {
                display: none;
        }
        #overlay-content h2 {
                font-size: 2.4em;
        }
        h1 {
                font-size: 4.8em;
        }
        h3 {
                font-size: 2.4em;
        }
        h4 {
                font-size: 3.6em;
        }
        p {
                font-size: 2.2em;
        }
        .text-wrapper {
                width: 100%;
                padding-left: 30px;
                padding-right: 30px;
                box-sizing: border-box;
        }
        #red-shape {
                background-image: url("../img/red-shape.svg");
                background-repeat: no-repeat;
                background-position: top;
                padding: 80px 0 50px 0;
                margin-top: 30px;
        }
        /*------PROFILE PAGE --------*/
        #vertical-rule {
                display: none;
        }
        #student-blurb {
                display: none;
        }
        #header-content {
                flex-direction: column;
                min-width: 100%;
                max-width: 100%;
                left: 0;
                bottom: 0;
                margin: 0 auto;
                padding-left: 10px;
                box-sizing: border-box;
                z-index: 9990;
        }
        #header-content h1, #header-content p {
                text-align: center;
                margin: 10px 0;
                box-sizing: border-box;
                padding: 0px;
        }
        #social-bank {
                top: 10%;
        }
        .project-cover {
                height: auto;
        }
        .project-cover-img img {
                max-width: 100%;
                box-sizing: border-box;
                position: relative;
                left: auto;
        }
        .project-text {
                background-image: none;
                position: relative;
                height: auto;
                width: 100%;
                padding: 20px 0;
                right: 0;
        }
        .project-text h2, .project-text h3, .project-text p {
                color: #fff;
        }
        .project-container {
                max-width: 100%;
                padding: 50px 0;
        }
        .project-full-image img, .project-square-image img, .project-half-image img {
                width: 100%;
        }
        #left-btn a:link, #left-btn a:visited {
                background-position: 5% 50%;
                font-size: 2em;
                background-size: 40px;
                padding: 40px 0 0 12%;
        }
        #right-btn a:link, #right-btn a:visited {
                background-position: 95% 50%;
                font-size: 2em;
                background-size: 40px;
                padding: 40px 12% 0 0;
        }
        footer {
                height: auto;
        }
        #footer-container {
                flex-direction: column;
                max-width: 100%;
                justify-content: center;
        }
        #footer-presented-by {
                display: none;
        }
        #footer-supported-by {
                display: none;
        }
        #student-1 a:link, #student-2 a:link, #student-3 a:link, #student-4 a:link, #student-5 a:link, #student-6 a:link, #student-7 a:link, #student-8 a:link, #student-9 a:link {
                width: 100%;
                font-size: 3.6em;
        }
        #student-profile-container {
                max-width: 90%;
                box-sizing: border-box;
        }
        #work-1 a:link, #work-2 a:link, #work-3 a:link, #work-4 a:link, #work-5 a:link, #work-6 a:link, #work-7 a:link, #work-8 a:link, #work-9 a:link {
                width: 90%;
                height: auto;
                margin: 0 auto;
        }
        #work-container img {
                width: 100%;
        }
        .work-general {
                width: 100%;
        }
        .hamburger-menu {
                display: inline;
        }
        .nav-menu {
                position: fixed;
                left: -100%;
                top: 50px;
                flex-direction: column;
                background-color: #fff;
                width: 100%;
                transition: 0.3s;
                z-index: 10000;
                height: 100vh;
                opacity: .9;
        }
        .nav-menu.active {
                left: 0;
        }
        .nav-item {
                margin: 2.5rem 0;
        }
        .hamburger {
                display: block;
        }
        #social-bank {
                width: 35px;
                padding: 10px;
                top: 20%;
        }
        #social-bank img {
                width: 25px;
                margin: 6px 0;
        }
	#students {
        padding-top: 30px;
			padding-bottom: 100px; 
			
}
	#work {
        padding-top: 30px ;
		margin-top: -30px;

	}
	

}