/* #Desktop (Landscape)
============================================================================================================================================================== */

/* Note: Design for a width of 1024px */

@media only screen and (min-width: 960px) and (max-width: 1100px) {
    /* ==== ANIMATIONS === */
    @-webkit-keyframes fadeIn {}
    @-moz-keyframes fadeIn {}
    @keyframes fadeIn {}
    .container {
        width: 900px;
    }
    .container-two {
        width: 800px;
    }
    .vid-close-one, .vid-close-two {
        margin-left: 840px;
    }
    h1 {
        font-size: 14px;
    }
    h2 {
        font-size: 14px;
    }
    h3 {
        font-size: 20px;
        line-height: 26px;
    }
    p {
        font-size: 16px;
        line-height: 26px;
    }
    #nav {
        height: 60px;
    }
    #nav h1 {
        font-size: 30px;
        line-height: 40px;
        margin-top: 10px;
    }
    .nav {
        margin-top: 20px;
    }
    .nav li {
        margin: 0 15px;
    }
    .nav a {
        font-size: 13px;
    }
    #hero {
        height: 700px;
        background: #21232f url('../images/hero_bg.jpg') no-repeat;
        background-size: cover;
        background-position: -400px;
        position: relative;
    }
    .hero-copy {
        width: 450px;
        margin-top: 170px;
        font-size: 60px;
        line-height: 60px;
    }
    .hero-spread {
        font-size:18px;
        line-height: 40px;
    }
    .hero-nav {
        font-size: 16px;
        position: relative;
        left: -10px;
    }
    #content {
        top: 700px;
    }
    .im-cyrus {
        font-size: 38px;
    }
    .position p {
        width: 200px !important;
    }
    .caro-dots {
        width: 650px;
    }
    .caro-dots li {
        margin: 0 48px;
    }
    .caro-list {
        top: 110px;
    }
    .label-start {
        left: 155px;
    }
    .label-extreme {
        left: 265px;
    }
    .label-uoft {
        left: 428px;
    }
    .label-addictive {
        left: 514px;
    }
    .label-owl {
        left: 663px;
    }
    .label-start, .label-extreme, .label-uoft, .label-addictive, .label-owl {
        letter-spacing: 2px;
    }
    .project-img {
        height: 100px;
        width: 100px;
        border-radius: 100px;
    }
    .project-img img {
        width: 70px;
    }
    .project-content {
        width: 750px;
    }
    .project-content h1 {
        font-size: 26px;
        line-height: 30px;
    }
    .contact-right {
        width: 410px;
    }
    textarea {
        width: 390px;
    }
    .submit {
        margin-right: 0;
        -webkit-appearance: none;
        border-radius: 0px;
    }

}


/* #Tablet (Portrait)
============================================================================================================================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    /* ==== ANIMATIONS === */
    @-webkit-keyframes fadeIn {}
    @-moz-keyframes fadeIn {}
    @keyframes fadeIn {}
    .container {
        width: 700px;
    }
    .container-two {
        width: 600px;
    }
    #video-one, #video-two {
        width: 580px;
        height: 323px;
    }
    .vid-close-one, .vid-close-two {
        margin-left: 610px;
        width: 45px;
        height: 45px;
        background-size: 45px;
    }
    h1 {
        font-size: 12px;
    }
    h2 {
        font-size: 12px;
    }
    h3 {
        font-size: 16px;
        line-height: 24px;
        width: 500px;
    }
    p {
        font-size: 13px;
        line-height: 22px;
    }
    #nav {
        height: 54px;
    }
    #nav h1 {
        font-size: 26px;
        line-height: 34px;
        margin-top: 10px;
    }
    .nav {
        margin-top: 20px;
    }
    .nav li {
        margin: 0 15px;
    }
    .nav a {
        font-size: 11px;
    }
    #hero {
        height: 700px;
        background: #21232f url('../images/hero_bg.jpg') no-repeat;
        background-size: cover;
        background-position: -540px;
        position: relative;
    }
    #about .halfsies p {
        width: 300px;
    }
    .hero-copy {
        width: 450px;
        margin-top: 170px;
        font-size: 60px;
        line-height: 60px;
    }
    .hero-spread {
        font-size:18px;
        line-height: 40px;
    }
    .hero-nav {
        font-size: 12px;
        position: relative;
        left: -10px;
    }
    #content {
        top: 700px;
    }
    .position-company {
        font-size: 13px;
    }
    .im-cyrus {
        font-size: 38px;
    }
    .position p {
        width: 170px !important;
    }
    .caro-dots {
        width: 570px;
        left: 50px;
    }
    .caro-dots li {
        margin: 0 40px;
    }
    .caro-list {
        top: 90px;
    }
    .label-start, .label-extreme, .label-uoft, .label-addictive, .label-owl {
        font-size: 10px;
        top: 55px;
    }
    .label-start {
        left: 150px;
    }
    .label-extreme {
        left: 246px;
    }
    .label-uoft {
        left: 385px;
    }
    .label-addictive {
        left: 463px;
    }
    .label-owl {
        left: 588px;
    }
    .label-start, .label-extreme, .label-uoft, .label-addictive, .label-owl {
        letter-spacing: 1px;
        font-size: 9px;
    }
    .project-img {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        margin-right: 20px;
    }
    .project-img img {
        width: 70px;
    }
    .project-content {
        width: 580px;
    }
    .project-content p {
        font-size: 13px;
    }
    .project-content h1 {
        font-size: 22px;
        line-height: 28px;
    }
    .contact-left {
        width: 300px;
        float: left;
        margin-right: 30px;
    }
    .contact-right {
        width: 370px;
    }
    textarea {
        width: 350px;
        height: 248px;
    }
    .textarea-wrapper:before {
        margin-top: 228px;
    }
    .textarea-wrapper:after {
        margin-top: 212px;
    }
    input {
        width: 280px;
    }
    .submit {
        margin-right: 0;
        -webkit-appearance: none;
        border-radius: 0px;
    }
    

}

/*  #Mobile (Portrait)
============================================================================================================================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container {
        width: 300px;
    }
    .container-two {
        width: 270px;
    }
    #video-one, #video-two {
        width: 250px;
        height: 170px;
    }
    .vid-close-one, .vid-close-two {
        margin-left: 265px;
        width: 25px;
        height: 25px;
        background-size: 25px;
    }
    #video-slideout-one, #video-slideout-two {
        padding-bottom: 50px;
    }
    h1 {
        font-size: 12px;
    }
    h2 {
        font-size: 10px;
    }
    h3, #contact h3 {
        font-size: 13px;
        line-height: 18px;
        width: 100%;
    }
    p {
        font-size: 13px;
        line-height: 22px;
    }
    #nav {
        height: 54px;
        display: none !important;
    }
    #nav h1 {
        font-size: 26px;
        line-height: 34px;
        margin-top: 10px;
    }
    .nav {
        margin-top: 20px;
    }
    .nav li {
        margin: 0 15px;
    }
    .nav a {
        font-size: 11px;
    }
    a:hover, .project-content p a:hover {
        border-bottom: none !important;
    }
    #hero {
        height: 500px;
        background: #21232f url('../images/hero_bg.jpg') no-repeat;
        background-size: cover;
        background-position: -540px;
        position: relative;
    }
    .halfsies {
        width: 94%;
        padding: 0 2%;
    }
    .about-halfone {
        margin-bottom: 20px;
    }
    .moveright {
        margin-left: 0;
    }
    #about .halfsies p {
        width: 300px;
    }
    .hero-copy {
        width: 300px;
        margin-top: 100px;
        font-size: 42px;
        line-height: 44px;
        text-align: center;
    }
    .hero-spread {
        font-size: 12px;
        line-height: 34px;
    }
    .hero-nav {
        font-size: 12px;
        position: relative;
        left: 0;
    }
    .hero-nav li {
        display: block;
        margin: 0 5px;
    }
    .hero-nav li a {
        font-size: 16px;
        font-weight: 600px;
        line-height: 34px;
    }
    #content {
        top: 500px;
    }
    #about, #bio, #projects, #contact, #footer {
        padding: 80px 0;
    }
    #philosiphy {
        padding: 50px 0 20px 0;
    }
    .position p {
        font-size: 12px;
        width: auto !important;
    }
    .position-company {
        font-size: 11px;
    }
    .im-cyrus {
        font-size: 38px;
    }
   .caro-dots {
        width: 300px;
        left: 0;
    }
    .caro-dots li {
        margin: 0 12px;
    }
    .caro-list {
        top: 70px;
    }
    .label-timeline, .label-start, .label-extreme, .label-uoft, .label-addictive, .label-owl {
        display: none !important;
    }
    .project-box {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .project-img {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        margin-left: 100px;
        margin-bottom: 10px;
    }
    .project-img img {
        width: 70px;
    }
    .project-content {
        width: 100%;
    }
    .project-content p {
        font-size: 13px;
        line-height: 22px;
    }
    .project-content h1 {
        font-size: 16px;
        line-height: 19px;
        margin-bottom: 10px;
    }
    .contact-left {
        width: 300px;
        float: left;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .contact-right {
        width: 300px;
    }
    .phi-videos .halfsies {
        width: 100%;
    }
    textarea {
        width: 280px;
        height: 248px;
        background: #f5f5f5;
        border-radius: 0;
    }
    .textarea-wrapper:before {
        margin-top: 228px;
    }
    .textarea-wrapper:after {
        margin-top: 212px;
    }
    input {
        width: 280px;
        background: #f5f5f5;
        border-radius: 0;
    }
    .input-wrapper {
        margin-bottom: 15px;
    }
    .submit {
        margin-right: 70px;
        -webkit-appearance: none;
        border-radius: 0px;
        font-size: 18px;
        width: 160px;
        height: 45px;
    }
    .one-third {
        width: 96%;
        margin-bottom: 10px;
        padding: 0 2%;
    }

    
}

/* #Mobile (Landscape)
================================================================================================================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

    /* ==== ANIMATIONS === */
    .container {
        width: 460px;
    }
    .container-two {
        width: 400px;
    }
    #video-one, #video-two {
        width: 350px;
        height: 188px;
    }
    .vid-close-one, .vid-close-two {
        margin-left: 390px;
        width: 35px;
        height: 35px;
        background-size: 35px;
    }
    #video-slideout-one, #video-slideout-two {
        padding-bottom: 50px;
    }
    h1 {
        font-size: 12px;
    }
    h2 {
        font-size: 13px;
    }
    h3, #contact h3 {
        font-size: 12px;
        line-height: 18px;
        width: 100%;
    }
    p, .project-content p {
        font-size: 10px;
        line-height: 16px;
    }
    #nav {
        height: 54px;
        display: none !important;
    }
    #nav h1 {
        font-size: 26px;
        line-height: 34px;
        margin-top: 10px;
    }
    .nav {
        margin-top: 20px;
    }
    .nav li {
        margin: 0 15px;
    }
    .nav a {
        font-size: 11px;
    }
    a:hover, .project-content p a:hover {
        border-bottom: none !important;
    }
    #hero {
        height: 500px;
        background: #21232f url('../images/hero_bg.jpg') no-repeat;
        background-size: cover;
        background-position: -400px;
        position: relative;
    }
    .halfsies {
        width: 94%;
        padding: 0 2%;
    }
    .about-halfone {
        margin-bottom: 20px;
    }
    .moveright {
        margin-left: 0;
    }
    #about .halfsies p {
        width: 460px;
    }
    .hero-copy {
        width: 460px;
        margin-top: 100px;
        font-size: 42px;
        line-height: 44px;
        text-align: center;
    }
    .hero-spread {
        font-size: 12px;
        line-height: 34px;
    }
    .hero-nav {
        font-size: 12px;
        position: relative;
        left: 0;
    }
    .hero-nav li {
        display: block;
        margin: 0 5px;
    }
    .hero-nav li a {
        font-size: 16px;
        font-weight: 600px;
        line-height: 34px;
    }
    #content {
        top: 500px;
    }
    #about, #bio, #projects, #contact, #footer {
        padding: 80px 0;
    }
    #philosiphy {
        padding: 50px 0 20px 0;
    }
    .position p {
        font-size: 16px;
        width: auto !important;
    }
    .position-company {
        font-size: 13px;
    }
    .im-cyrus {
        font-size: 38px;
    }
   .caro-dots {
        width: 460px;
        left: 0;
    }
    .caro-dots li {
        margin: 0 30px;
    }
    .caro-list {
        top: 70px;
    }
    .label-timeline, .label-start, .label-extreme, .label-uoft, .label-addictive, .label-owl {
        display: none !important;
    }
    .project-box {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .project-img {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        margin-left: 180px;
        margin-bottom: 10px;
    }
    .project-img img {
        width: 70px;
    }
    .project-content {
        width: 100%;
    }
    .project-content h1 {
        font-size: 16px;
        line-height: 19px;
        margin-bottom: 10px;
    }
    .contact-left {
        width: 460px;
        float: left;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .contact-right {
        width: 460px;
    }
    .phi-videos .halfsies {
        width: 100%;
    }
    textarea {
        width: 440px;
        height: 248px;
        background: #f5f5f5;
    }
    .textarea-wrapper:before {
        margin-top: 228px;
    }
    .textarea-wrapper:after {
        margin-top: 212px;
    }
    input {
        width: 440px;
        background: #f5f5f5;
    }
    .input-wrapper {
        margin-bottom: 15px;
    }
    .submit {
        margin-right: 150px;
        -webkit-appearance: none;
        border-radius: 0px;
        font-size: 18px;
        width: 160px;
        height: 45px;
    }
    .one-third {
        width: 96%;
        margin-bottom: 10px;
        padding: 0 2%;
    }


    
}