@import url("fonts/fonts.css");

@media screen and (min-width: 1600px) and (max-width: 2000px) and (orientation: landscape) {}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    #hotoffthepress .press-thumb .description h1 {
        font-size: 2rem;
    }

    #hotoffthepress .press-thumb .description h2 {
        font-size: 3rem;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #thisisus h1 {
        font-size: 10.5rem;
        padding-left: 3.5rem
    }

    #thisisus h2 {
        font-size: 6rem
    }
}

@media (min-width: 800px) and (max-width: 1024px) {

    #concept .concept-loop {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding-left: 0;
    }

    .misc {
        top: 25%;
        left: 10%;
        height: 400px;
    }

    #clients h1 {
        padding-left: 0;
        text-align: center;
    }

    .playpause .client h1 {
        font-size: 2.75rem;
    }

    .playpause .description h2 {
        font-size: 2.75rem;
    }

    .playpause .description h3 {
        font-size: 2.75rem;
    }

    #bythenetwork .by-the-network-logo {
        max-width: 70%;
        margin: 0 auto;
    }

    #bythenetwork h1 {
        font-size: 4.5rem;
        text-align: center
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    #hotoffthepress .press-thumb .description h1 {
        font-size: 1.5rem;
    }

    #hotoffthepress .press-thumb .description h2 {
        font-size: 2.5rem;
    }

    #hotoffthepress .press-thumb .description {
        bottom: -500px;
    }

    #hotoffthepress .press-thumb .thumb-shadow {
        bottom: -500px;
    }

    #thisisus h1 {
        font-size: 7.5rem;
        padding-left: 3.5rem
    }

    #thisisus h2 {
        font-size: 5rem
    }

    #bythenetwork h1 {
        font-size: 5rem;
        padding-left: 3.5rem
    }

    #hotoffthepress h1 {
        font-size: 7.5rem;
        padding-left: 3.5rem
    }

    #hotoffthepress h1 span {
        font-size: 2rem;
        left: 6.5rem;
        top: 3.6rem
    }

    #staff .carousel-staff h1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #staff .carousel-staff h2 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #staff .linkedin-profile {
        margin-left: 1rem;
    }
}

@media screen and (max-width: 1100px) {
    #stats {
        background-attachment: scroll;
    }

    #hotoffthepress .bg {
        background-attachment: scroll;
        background-position: center bottom;
        background-size: cover;
    }

    #thisisus {
        background-attachment: scroll;
    }

    #concept {
        background-attachment: scroll;
    }
}

@media screen and (min-width: 800px) and (max-width: 1024px) {
    /* .misc {
        height: 400px;
        top: 40%;
        left: 10%;
        z-index: 99;
    } */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #stats h1 {
        font-size: 6.5rem;
        padding-left: 3.5rem;
    }

    #thisisus h1 {
        font-size: 7.5rem;
        padding-left: 3.5rem;
    }

    #thisisus h2 {
        font-size: 5rem;
    }

    #bythenetwork h1 {
        font-size: 5rem;
        padding-left: 3.5rem;
    }

    #hotoffthepress h1 {
        font-size: 7.5rem;
        padding-left: 3.5rem;
    }

    #hotoffthepress h1 span {
        font-size: 2rem;
        left: 6.5rem;
        top: 3.6rem;
    }

    #clients h1 {
        font-size: 4rem;
        padding-left: 2.5rem;
        line-height: 1;
        text-align: center;
    }

    #staff .carousel-staff h1 {
        font-size: 1.5rem;
        padding-left: 1rem;
    }

    #staff .carousel-staff h2 {
        font-size: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #staff .linkedin-profile {
        margin-left: 1rem;
    }

    #hotoffthepress .press-thumb .description h1 {
        font-size: 1rem;
        padding-right: 1rem;
    }

    #hotoffthepress .press-thumb .description h2 {
        font-size: 1.75rem;
        padding-right: 1rem;
    }

    #hotoffthepress .press-thumb .description {
        bottom: 0;
    }

    #hotoffthepress .press-thumb .thumb-shadow {
        bottom: 0;
    }

    footer a {
        font-size: 2.5rem;
    }

    footer a span.arrow {
        perspective: 1px;
        position: relative;
        left: 0;
        height: 75px;
        width: 106px;
    }
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
    #animationWindow {
        width: 95%;
    }

    .playpause .client h1 {
        font-size: 2.5rem;
    }

    .playpause .description h2 {
        font-size: 2.5rem;
        padding-top: 8rem;
    }

    .playpause .description h3 {
        font-size: 2rem;
    }

    #thisisus h1 {
        font-size: 6.5rem;
        padding-left: 2.5rem;
        line-height: 1;
        margin: 4rem 0 0 0;
    }

    #thisisus h2 {
        font-size: 3.5rem;
        line-height: 1;
    }

    #thisisus {
        background-image: url(../img/bg-craft-wh.jpg);
        background-size: cover;
        height: 100%;
        min-height: 550px;
        padding-bottom: 2rem;
        overflow-y: hidden;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #stats {
        padding: 4rem 0 0 0;
    }

    #stats h1 {
        font-size: 6.5rem;
        padding-left: 2.5rem;
        line-height: 1;
    }

    #clients {
        padding: 4rem 0;
    }

    #clients h1 {
        /* font-size: 6.5rem; */
        padding-left: 0;
        line-height: 1;
        text-align: center
    }

    .misc {
        height: 400px !important;
        top: 40%;
        left: 10%;
        z-index: 99;
    }

    #bythenetwork h1 {
        font-size: 4.5rem;
        padding-left: 0;
        text-align: center;
        line-height: 1;
    }

    #bythenetwork .by-the-network-logo {
        max-width: 70%;
        margin: 0 auto;
    }

    #hotoffthepress h1 {
        font-size: 6.5rem;
        padding-left: 2.5rem;
    }

    #hotoffthepress h1 span {
        font-size: 1.5rem;
        left: 5.25rem;
        top: 3.6rem;
    }

    #hotoffthepress .press-thumb .description h1 {
        font-size: 1rem;
    }

    #hotoffthepress .press-thumb .description h2 {
        font-size: 1.75rem;
    }

    #hotoffthepress .press-thumb .description {
        bottom: 0;
    }

    #hotoffthepress .press-thumb .thumb-shadow {
        bottom: 0;
    }

    footer span {
        text-align: center;
        display: inherit;
    }

    footer a.cta {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .sm-content h2 {
        text-align: center;
        padding: 5px 0 0 0;
    }

    .sm-container {
        flex-direction: column;
    }

    .sm-share:first-child {
        margin-right: 0;
    }

    .sm-icons {
        justify-content: center;
    }

    #contact button {
        font-size: 1.75rem;
        background: url(../img/send-xs.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #contact button:hover {
        background: url(../img/send-xs-hv.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #contact h1 {
        font-size: 6.5rem;
    }

    #contact h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    #becomeafounder button {
        font-size: 1.75rem;
        background: url(../img/send-xs.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #becomeafounder button:hover {
        background: url(../img/send-xs-hv.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #becomeafounder h1 {
        font-size: 6.5rem;
    }

    #becomeafounder h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    #staff .carousel-staff h1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #staff .carousel-staff h2 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #staff .linkedin-profile {
        margin-left: 1rem;
    }
}

@media only screen and (max-width: 600px) {

    /* wrappers logos home*/
    #founders-logo-scroll {
        width: 90%;
    }

    #founders-logo-intro {
        width: 90%;
    }

    .misc {
        height: 300px;
        top: 30%;
        left: 10%;
    }

    .overlay nav {
        font-size: 3.5rem;
    }

    #animationWindow {
        width: 95%;
    }

    .top-home-wrapper .contiene-video {
        position: relative;
        width: 100%;
        min-height: 650px;
        overflow: hidden;
    }

    #work .work-title {
        font-size: 9rem;
        letter-spacing: -5px;
    }

    #work .title {
        padding: 1rem 0;
    }

    .playpause .client h1 {
        font-size: 1.75rem;
    }

    .playpause .description h2 {
        font-size: 1.75rem;
    }

    .playpause .description h3 {
        font-size: 1.75rem;
    }

    #concept {
        min-height: 600px;
    }

    #concept .concept-loop {
        padding-left: 0rem;
    }

    #thisisus h1 {
        font-size: 6.5rem;
        padding-left: 2.5rem;
        line-height: 1;
        margin: 4rem 0 0 0;
    }

    #thisisus h2 {
        font-size: 2.5rem;
        line-height: 1;
    }

    #hotoffthepress .press-thumb .description h1 {
        font-size: 1rem;
    }

    #hotoffthepress .press-thumb .description h2 {
        font-size: 1.75rem;
    }

    #hotoffthepress .press-thumb .description {
        bottom: 0;
        left: 0;
        padding-left: 1rem;
    }

    #hotoffthepress .press-thumb .thumb-shadow {
        bottom: 0;
        height: 60%;
    }

    #stats {
        padding: 4rem 0 0 0;
    }

    #stats h1 {
        font-size: 3.5rem;
        padding-left: 2.5rem;
        padding-top: 0rem;
        padding-bottom: 1rem;
        line-height: 1;
    }

    #stats .misc {
        top: 60%;
    }

    .stats-wrapper {
        position: relative;
        width: 100%;
        min-height: 250px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .stats-map {
        background: url(../img/map-world.gif) center bottom no-repeat;
        background-size: 100%;

        min-height: 250px;
    }

    #clients {
        padding: 4rem 0;
    }

    #clients h1 {
        font-size: 4rem;
        padding-left: 0;
        line-height: 1;
        text-align: center
    }

    #bythenetwork h1 {
        font-size: 4.5rem;
        padding-left: 0;
        text-align: center;
        line-height: 1;
    }

    #bythenetwork .by-the-network-logo {
        max-width: 70%;
        margin: 0 auto;
    }

    #hotoffthepress h1 {
        font-size: 6.5rem;
        padding-left: 2.5rem;
    }

    #hotoffthepress h1 span {
        font-size: 1.5rem;
        left: 5.25rem;
        top: 3rem;
    }

    footer span {
        text-align: center;
        display: inherit;
    }

    footer a.cta {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .sm-content h2 {
        text-align: center;
        padding: 5px 0 0 0;
    }

    .sm-container {
        flex-direction: column;
    }

    .sm-share:first-child {
        margin-right: 0;
    }

    .sm-icons {
        justify-content: center;
    }

    #contact button {
        font-size: 1.75rem;
        background: url(../img/send-xs.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #contact button:hover {
        background: url(../img/send-xs-hv.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #contact h1 {
        font-size: 6.5rem;
    }

    #contact h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    #becomeafounder button {
        font-size: 1.75rem;
        background: url(../img/send-xs.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #becomeafounder button:hover {
        background: url(../img/send-xs-hv.svg) top left no-repeat;
        background-size: 260px 100px;
        padding: 25px 100px 25px 100px;
    }

    #becomeafounder h1 {
        font-size: 6.5rem;
    }

    #becomeafounder h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    #staff .carousel-staff h1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #staff .carousel-staff h2 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #staff .linkedin-profile {
        margin-left: 1rem;
    }

    .container-banner-agencie {
        height: 205px;
      }

    .img-header-wrapper {
        height: 65vh;
    }
}

@media only screen and (min-width: 300px) and (max-width: 400px) {
    .misc {
        height: 300px;
        top: 30%;
        left: 10%;
    }

    #hotoffthepress h1 span {
        font-size: 1.5rem;
        left: 5.25rem;
        top: 3rem;
    }

    #clients h1 {
        font-size: 5.5rem;
    }

    #staff .carousel-staff h1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #staff .carousel-staff h2 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #staff .linkedin-profile {
        margin-left: 1rem;
    }
}