@font-face {
    font-family: "Product Sans";
    src: url("../fonts/Product");
    src: url("../fonts/ProductSans-Regular.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/ProductSans-Regular.woff") format("woff"),
      url("../fonts/ProductSans-Regular.ttf") format("truetype"),
      url("../fonts/ProductSans-Regular.otf"),
      url("../fonts/ProductSans-Regular.svg?#webfont") format("svg");
      font-weight: normal;


    font-family: "Product Sans";
    src: url("../fonts/Product\ Sans\ Thin\ 250.eot");
    src: url("../fonts/Product\ Sans\ Thin\ 250.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Product\ Sans\ Thin\ 250.woff") format("woff"),
      url("../fonts/Product\ Sans\ Thin\ 250.ttf") format("truetype"),
      url("../fonts/Product\ Sans\ Thin\ 250.otf"),
      url("../fonts/Product\ Sans\ Thin\ 250.svg?#webfont") format("svg");
    font-weight: thin;


    font-family: "Product Sans";
    src: url("../fonts/Product\ Sans\ Light\ 300.eot");
    src: url("../fonts/Product\ Sans\ Light\ 300.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Product\ Sans\ Light\ 300.woff") format("woff"),
      url("../fonts/Product\ Sans\ Light\ 300.ttf") format("truetype"),
      url("../fonts/Product\ Sans\ Light\ 300.otf"),
      url("../fonts/Product\ Sans\ Light\ 300.svg?#webfont") format("svg");
    font-weight: lighter; 



    font-family: "Product Sans";
    src: url("../fonts/Product\ Sans\ Black\ 900.eot");
    src: url("../fonts/Product\ Sans\ Black\ 900.eot?#iefix")
        format("embedded-opentype"),
      url("../fonts/Product\ Sans\ Black\ 900.woff") format("woff"),
      url("../fonts/Product\ Sans\ Black\ 900.ttf") format("truetype"),
      url("../fonts/Product\ Sans\ Black\ 900.otf"),
      url("../fonts/Product\ Sans\ Black\ 900.svg?#webfont") format("svg");
      font-weight: bold;  
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.eot");
    src: url("../fonts/Montserrat-Regular.eot?#iefix")
          format("embedded-opentype"),
        url("../fonts/Montserrat-Regular.woff") format("woff"),
        url("../fonts/Montserrat-Regular.ttf") format("truetype"),
        url("../fonts/Montserrat-Regular.otf"),
        url("../fonts/Montserrat-Regular.svg?#webfont") format("svg");
        font-weight: normal; 

    font-family: "Montserrat";
        src: url("../fonts/Montserrat-Bold.eot");
        src: url("../fonts/Montserrat-Bold.eot?#iefix")
            format("embedded-opentype"),
          url("../fonts/Montserrat-Bold.woff") format("woff"),
          url("../fonts/Montserrat-Bold.ttf") format("truetype"),
          url("../fonts/Montserrat-Bold.otf"),
          url("../fonts/Montserrat-Bold.svg?#webfont") format("svg");
        font-weight: bold; 
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

h2{
    font-size: 2.8rem;
    line-height: 3rem;
    font-family: "Montserrat";
    font-weight: bold;
}

.mainContainer {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 26% 74%;
}


.leftPanel{
    padding-top: 4.2rem;
    padding-right: 4.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logoContainer{
    text-align: right;
}

.logoContainer > P{
    font-size: 2rem;
    line-height: 2.7rem;
    color: #007EFF;
    padding:0;
    margin-top: 1.65rem;
    font-family: "Montserrat";
    font-weight: bold;
}

.contactInfo{
    text-align: right;
    margin-bottom: 3.66rem;
    color: #0178F1;
    font-size:1.4rem;
    line-height: 2rem;
}


.contactInfo > p {
    font-family: "Product Sans";
    font-weight: bold;
}


.contactInfo > p > a {
    text-decoration: none;
    color: #0178F1;
}
.contactInfo > p > a:hover {
    text-decoration: underline;
}

.rightPanel{
    background-color: #007EFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    bottom: 0;
}




.imgContainer{
    height: 65%; 
    display: grid;
    grid-template-columns: 30% 70%;
}

.imgContainer img{
    width: 90%;
    height: 100%;
    margin: auto;
    object-fit: contain;
}

.textUnderImage {
    margin-left: 5.9rem;
    color: white;
    padding-bottom: 11.5rem;
}


.behance{
    display: table;   
    margin-top: 4.7rem;
    border: 1px solid white;
}

.behance a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.34rem 3.4rem 1.34rem 3.4rem;
    text-decoration: none;
    color: white;
}

.behance h3 {
    font-size: 1.4rem;
    line-height: 1.9rem;
    font-family: "Product Sans";
    font-weight: bold;
}

.behance:hover {
    background-color: white;
}

.behance:hover > a{
    color: #0178F1;
}

.contactInfoMob{
    display: none;
}



@media (max-width: 900px){
    html{
        font-size: 57%;
    }
}


@media (max-width: 768px){
    html{
        font-size: 62.5%;
    }

    .mainContainer{
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .rightPanel{
        flex-direction: column-reverse;
        height: fit-content;
        height: -moz-fit-content;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .leftPanel{
        padding-top: 0;
        padding-bottom: 3rem;
        padding-top: 2.1rem;
        padding-left: 3rem;
    }

    .logoContainer{
        text-align: left;
    }

    .textUnderImage{
        margin-top: 4.6rem;
        padding-bottom: 0;
        margin-left: 0;
    }

    .textUnderImage > h2:first-of-type{
        margin-bottom: 2.2rem;
    }

    .behance{
        margin-top: 3.7rem;
    }
    .imgContainer {
        height: 23rem;
        display: block;
    }

    .imgContainer img {
        width: 120%;
        height: 120%;
        object-fit: contain;
        position: relative;
        bottom: -8%;
        right: -40%;     
    }
    .contactInfo{
        display: none;
    }

    .contactInfoMob{
        display: block;
        margin-top: 3rem;
        margin-left: 3rem;
        margin-bottom: 3.96rem;
        color: #0178F1;
        font-size:1.4rem;
        line-height: 2rem;
        font-family: "Product Sans";
        font-weight: bold;
    }
}


@media (max-width: 768px) and (max-height: 823px) {
    html{
        font-size: 60.5%;
    }
}

@media (max-width: 768px) and (max-height: 790px) {
    html{
        font-size: 58.5%;
    }
}

@media (max-width: 768px) and (max-height: 760px) {
    html{
        font-size: 57.5%;
    }
}

@media (max-width: 768px) and (max-height: 750px) {
    html{
        font-size: 56.5%;
    }
}


@media (max-width: 768px) and (max-height: 736px) {
    html{
        font-size: 55.5%;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    html{
        font-size: 53.5%;
    }
}

@media (max-width: 768px) and (max-height: 710px) {
    html{
        font-size: 52.5%;
    }
}

@media (max-width: 768px) and (max-height: 690px) {
    html{
        font-size: 51.5%;
    }
}

@media (max-width: 768px) and (max-height: 675px) {
    html{
        font-size: 50.5%;
    }
}

@media (max-width: 768px) and (max-height: 667px) {
    html{
        font-size: 49.5%;
    }
}

@media (max-width: 768px) and (max-height: 650px) {
    html{
        font-size: 48.5%;
    }
}

@media (max-width: 768px) and (max-height: 640px) {
    html{
        font-size: 47.5%;
    }
}


@media (max-width: 768px) and (max-height: 630px) {
    html{
        font-size: 46.5%;
    }
}


@media (max-width: 768px) and (max-height: 620px) {
    html{
        font-size: 45.5%;
    }
}

@media (max-width: 768px) and (max-height: 600px) {
    html{
        font-size: 44.5%;
    }
}

@media (max-width: 768px) and (max-height: 590px) {
    html{
        font-size: 43.5%;
    }
}

@media (max-width: 768px) and (max-height: 575px) {
    html{
        font-size: 42.5%;
    }
}


@media (max-width: 768px) and (max-height: 568px) {
    html{
        font-size: 42%;
    }
}

@media (max-width: 768px) and (max-height: 560px) {
    html{
        font-size: 41.5%;
    }
}

@media (max-width: 768px) and (max-height: 550px) {
    html{
        font-size: 41%;
    }
}

@media (max-width: 768px) and (max-height: 540px) {
    html{
        font-size: 40%;
    }
}

@media (max-width: 768px) and (max-height: 530px) {
    html{
        font-size: 39%;
    }
}

@media (max-width: 768px) and (max-height: 520px) {
    html{
        font-size: 38%;
    }
}

@media (max-width: 768px) and (max-height: 510px) {
    html{
        font-size: 37%;
    }
}

@media (max-width: 768px) and (max-height: 500px) {
    html{
        font-size: 1.2vh;
    }
}

@media (max-width: 768px) and (max-height: 370px) {
    html{
        font-size: 1.1vh;
    }
}

@media (max-width: 768px) and (max-height: 260px) {
    html{
        font-size: 1vh;
    }
}