@charset "utf-8";

/* STANDARD */

html, body{
    width: 100%;
    padding: 0;
    margin: 0;
    color: #101010;
    scroll-behavior: smooth;
    background: #fafafa;
}

#pagewrap{
    background: #fafafa;
}

input {
    display: none;
}

#menuArea{
    position: fixed;
    z-index: 999;
    width: 100%;
}

#menuLogo{
    position: absolute;
    width: 24px;
    padding: 2vw;
    right: 0;
}

.open {
    background-color: #101010;
    width: 24px;
    height: 4px;
    display: block;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    top: 8px;
}

.open:before {
    content: "";
    background-color: #101010;
    width: 24px;
    height: 4px;
    display: block;
    border-radius: 2px;
    position: relative;
    top: -8px;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.open:after {
    content: "";
    background-color: #101010;
    width: 24px;
    height: 4px;
    display: block;
    border-radius: 2px;
    position: relative;
    top: 4px;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.menuOpen {
    width: 24px;
    height: 20px;
    display: block;
    padding: 1vw;
    margin: 1vw;
    cursor: pointer;
    float: left;
    position: absolute;
    z-index: 999;
}

.menu {
    position: fixed;
    width: 30vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(20, 20, 20, 0.9);
    transform: translateX(0%);
    transition: all 0.5s;
}

.menu label {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 20px;
    background-size: 100%;
    cursor: pointer;
    pointer-events: none;
}

.menu .menuContent {
    position: relative;
    font-size: 100px;
    padding-bottom: 20px;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    margin-top: 16vh;
}

.menu ul a{
    text-decoration: none;
    font-size: 4vw;
    color: white;
}

.menu ul a li{
    transition: 0.2s;
    font-family: Trebuchet MS;
    text-transform: uppercase;
    padding-left: 2vw;
    height: 12vh;
    line-height: 12vh;
}

.menu ul a li:hover{
    background: white;
    padding-left: 3vw;
    color: #f35050 !important;
}

#menuCurrent{
    border-left: 0.3vw solid white;
    padding-left: 2.7vw;
    color: #f35050;
}

.menuEffects {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
    transform: translateX(0%);
    transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
    opacity: 1;
    visibility: visible;
    transition: 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
    opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
    background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
    content: "";
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
    content: "";
    background-color: white;
    transform: rotate(-45deg);
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
}

#menuToggle:not(:checked) ~ .menu {
    transform: translateX(-100%);
    transition: 0.3s;
}

.menuSocials{
    width: 100%;
    bottom: 2vw;
    position: absolute;
}

.menuSocials a{
    text-decoration: none;
    color: #fafafa;
    font-family: "Roboto", sans-serif;
}

.menuSocialsicons{
    width: 28vw;
    float: left;
    margin-left: 2vw;
}
.menuSocialsicons a{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.linkedin, .instagram, .discord{
    width: 1vw;
    height: 2vh;
    float: left;
    margin-right: 0.5vw;
    margin-bottom: 0.5vw;
}
.mail{
    width: 28vw;
    margin-left: 2vw;
    font-size: 1vw;
}
.linkedin{
    background-image: url(../img/linkedinICON.png);
    background-size: cover;
}
.instagram{
    background-image: url(../img/instagramICON.png);
    background-size: cover;
}
.discord{
    background-image: url(../img/discordICON.png);
    background-size: cover;
}

.menuSocialsinfo{
    width: 28vw;
    margin-top: 1vw;
    margin-left: 2vw;
    font-weight: 300;
}
.TOS{
    display: inline-block;
    font-size: 0.7vw;
    transition: 0.3s;
}
.TOS:hover{
    color: #f35050;
}
#menuCurrentTOS{
    color: #f35050;
}
.copyright{
    display: inline-block;
    font-size: 0.7vw;
    margin-left: 4vw;
}

/*HOME*/

.homelanding{
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
}
.homelandingtitle{
    margin-top: 15%;
    position: absolute;
    width: 100%;
    z-index: 5;
}
.homelanding h2, .homelanding h1, .homelanding h3{
    width: 100%;
    text-align: center;
    margin: 0;
    font-family: "Roboto", sans-serif;
}
.homelanding h2{
    margin-bottom: -1%;
    font-weight: 300;
    font-size: 2vw;
}
.homelanding h1{
    font-weight: 500;
    font-size: 7vw;
}
.homelanding h3{
    font-weight: 300;
    font-size: 1vw;
    color: #f35050;
}

#homelandingTIM{
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 25vw;
}

#homelandingBG{
    position: absolute;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.1;
    filter: grayscale(1);
}

.homework{
    position: relative;
    display: block;
    width: 100%;
    float: left;
}

.homeworkshort{
    position: relative;
    width: 33%;
    height: 66vh;
    float: left;
    background: blue;
    overflow: hidden;
}
.homeworklong{
    position: relative;
    width: 34%;
    height: 132vh;
    float: right;
    background: yellow;
    overflow: hidden;
}

.homeworklogo{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.homeworklogo img{
    width: 40%;
    opacity: 0;
    transition: 0.3s;
}
.homeworkshort:hover .homeworklogo img, .homeworklong:hover .homeworklogo img{
    opacity: 1;
    width: 45%;
}

#homeworkBG{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.homeworkshort #homeworkBG, .homeworklong #homeworkBG{
    min-height: 100%;
    min-width: 100%;
    transition: 0.3s;
}
.homeworkshort:hover #homeworkBG, .homeworklong:hover #homeworkBG{
    filter: grayscale(0);
}

.homeworkdescription{
    position: absolute;
    bottom: 0;
    margin-bottom: 0%;
    opacity: 0;
    transition: 0.3s;
    font-family: "Roboto", sans-serif;
}
.homeworkdescription h1{
    margin: auto;
    padding: 0.3vw;
    background: #101010;
    color: #fafafa;
    font-size: 1.5vw;
}
.homeworkshort:hover .homeworkdescription, .homeworklong:hover .homeworkdescription{
    margin-bottom: 7%;
    opacity: 0.9;
}

.homeworktypes{
    position: absolute;
    bottom: 0;
    padding: 0.3vw;
    color: #f35050;
    font-family: "Roboto", sans-serif;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    margin-bottom: -5%;
    font-size: 1vw;
}
.homeworkshort:hover .homeworktypes, .homeworklong:hover .homeworktypes{
    margin-bottom: 0%;
    opacity: 0.9;
}

.homeworkmore{
    display: block;
    position: relative;
    float: left;
    width: 100%;
}
.homeworkmore h1{
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 2vw;
    margin: 0;
    margin-top: 3vw;
}

.homeworkmorelink{
    width: 100%;
    display: flex;
    justify-content: center;
}

.homeworkmorelink a{
    float: left;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    color: #f35050; 
    padding: 0.5vw;
    font-weight: 300;
    font-size: 2vw;
    transition: 0.3s;
    margin-bottom: 3vw;
}
.homeworkmorelink a:hover{
    font-weight: 700;
}

.homecontact{
    width: 100%;
    float: left;
    margin-bottom: 3vw;
    font-family: "Roboto", sans-serif;
}
.homecontact h1{
    margin: 0;
    font-size: 3vw;
    font-weight: 800;
    margin-left: 10%;
    margin-bottom: 2vw;
}
.homecontact h2{
    margin: 0;
    font-size: 1vw;
    font-weight: 500;
}

.homecontact hr{
    border-top: solid 0.1vw #f35050;
    width: 60%;
    margin: 0;
    margin-top: 0.3vw;
    margin-bottom: 0.6vw;
}

.homecontactmail{
    width: 40%;
    margin-left: 10%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
}

.homecontactsocials{
    width: 40%;
    margin-right: 10%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
}
.homecontactsocials a{
    text-decoration: none;
    color: #101010;
    margin-right: 1vw;
    transition: 0.3s;
}
.homecontactsocials a:hover{
    color: #f35050;
    font-weight: 600;
}

/*ABOUT*/

.aboutlanding{
    position: relative;
    width: 100%;
    height: 95vh;
}

.aboutlanding img{
    width: 20%;
    margin-top: 5%;
    margin-left: 30%;
    float: left;
}

.aboutlandingtext{
    margin-top: 5%;
    float: left;
    width: 20%;
    margin-left: 2%;
    font-family: "Roboto", sans-serif;
}

.aboutlandingtext h1, .aboutlandingtext h2, .aboutlandingtext h3{
    margin: 0;
}
.aboutlandingtext h2{
    font-size: 0.75vw;
    font-weight: 300;
}
.aboutlandingtext h1{
    margin-top: 5%;
    font-size: 5vw;
    font-weight: 800;
}
.aboutlandingtext h3{
    margin-top: 5%;
    font-size: 2vw;
    font-weight: 500;
}
.aboutlandingtext h3 b{
    color: #f35050;
}
.aboutlandingtext p{
    font-size: 1vw;
    font-weight: 300;
}

.aboutinfo{
    position: relative;
    width: 80%;
    margin-left: 10%;
    font-family: "Roboto", sans-serif;
    overflow: auto;
}
.aboutinfo p{
    margin: 0;
    float: left;
    width: 33%;
    text-align: center;
    line-height: 5vh;
    font-size: 1.5vw;
    font-weight: 300;
    transition: 0.3s;
}
.aboutinfo p:hover{
    font-size: 1.2vw;
}

.aboutinfomobile{
    display: none;
}

.abouths{
    width: 100%;
    overflow: auto;
    margin-top: 5%;
}
.abouths hr{
    width: 50%;
    margin: 0;
    margin-left: 25%;
    border: solid 0.1vw #f35050;
    margin-bottom: 2%;
}

.abouthobbies{
    overflow: auto;
    width: 40%;
    margin-left: 5%;
    margin-right: 5%;
    font-family: "Roboto", sans-serif;
    float: left;
}
.abouthobbies h1{
    margin: 0;
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
    margin-bottom: 1%;
}
.abouthobbies p{
    margin: 0;
    width: 33.33%;
    float: left;
    text-align: center;
    line-height: 5vh;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
}
.abouthobbies p:hover{
    background: #101010;
    color: #fafafa;
    font-size: 1.2vw;
}

.aboutskills{
    overflow: auto;
    width: 40%;
    font-family: "Roboto", sans-serif;
    margin-left: 5%;
    margin-right: 5%;
    float: left;
}
.aboutskills h1{
    margin: 0;
    font-size: 2vw;
    text-align: center;
    font-weight: 600;
    margin-bottom: 1%;
}
.aboutskills p{
    width: 33.33%;
    float: left;
    text-align: center;
    font-size: 1vw;
    margin: 0;
    font-weight: 300;
    line-height: 5vh;
    transition: 0.3s;
}
.aboutskills p:hover{
    background: #101010;
    color: #fafafa;
    font-size: 1.2vw;
}

.aboutquote{
    width: 100%;
    overflow: auto;
    margin-top: 5%;
    font-size: 1.5vw;
    font-weight: 400;
    text-align: center;font-family: "Roboto", sans-serif;
    color: #fafafa;
    background: #101010;
}
.aboutquote b{
    color: #f35050;
}

.aboutart{
    width: 100%;
    overflow: auto;
    font-family: "Roboto", sans-serif;
    margin-top: 8%;
}
.aboutart h1{
    margin: 0;
    text-align: center;
    margin-bottom: 2%;
    font-size: 2vw;
}
.aboutart h1 b{
    color: #f35050;
}

.aboutartwide{
    position: relative;
    width: 50%;
    height: 60vh;
    float: left;
    overflow: hidden;
}
.aboutartwide img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: 0.3s;
}
.aboutartwide:hover img{
    filter: grayscale(0);
}
.aboutartwide h1{
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0.5vw;
    text-align: center;
    color: #fafafa;
    bottom: 0;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    font-size: 2vw;
}
.aboutartwide:hover h1{
    opacity: 0.9;
}

.aboutarthigh{
    position: relative;
    width: 33%;
    height: 100vh;
    float: left;
}
.aboutarthigh img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: 0.3s;
}
.aboutarthigh:hover img{
    filter: grayscale(0);
}
.aboutarthigh h1{
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0.5vw;
    text-align: center;
    color: #fafafa;
    bottom: 0;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    font-size: 2vw;
}
.aboutarthigh:hover h1{
    opacity: 0.9;
}

/*PORTFOLIO*/


.portfoliowork{
    position: relative;
    width: 90%;
    overflow: auto;
    padding-top: 5%;
    margin-left: 5%;
    padding-bottom: 5%;
}

.portfoliotab{
    position: relative;
    width: 33.33%;
    height: 30vw;
    float: left;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
}
.portfoliotab h1{
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0.5vw;
    text-align: center;
    color: #fafafa;
    bottom: 0;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    font-size: 2vw;
}
.portfoliotab:hover h1{
    opacity: 0.9;
    margin-bottom: 7%;
}
.portfoliotab img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: 0.3s;
}
.portfoliotab:hover img{
    filter: grayscale(0);
}

.portfoliotablarge{
    position: relative;
    width: 99.99%;
    height: 30vw;
    float: left;
    background: blue;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
}
.portfoliotablarge h1{
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0.5vw;
    text-align: center;
    color: #fafafa;
    bottom: 0;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    font-size: 2vw;
}
.portfoliotablarge:hover h1{
    opacity: 0.9;
}
.portfoliotablarge img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: 0.3s;
}
.portfoliotablarge:hover img{
    filter: grayscale(0);
}

.portfoliotypes{
    position: absolute;
    bottom: 0;
    padding: 0.3vw;
    color: #f35050;
    font-family: "Roboto", sans-serif;
    background: #101010;
    opacity: 0;
    transition: 0.3s;
    margin-bottom: -5%;
    font-size: 1vw;
    z-index: 10;
}
.portfoliotab:hover .portfoliotypes{
    margin-bottom: 0%;
    opacity: 0.9;
}

/*CONTACT*/

.contactlanding{
    position: relative;
    width: 100%;
    height: 100vh;
    font-family: "Roboto", sans-serif;
    overflow: hidden;
}
.contactlanding img{
    width: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.1;
    margin-top: -15%;
}

.contacttext{
    position: absolute;
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
    z-index: 1;
}
.contacttext h1{
    margin: 0;
    font-size: 3vw;
    font-weight: 600;
}
.contacttext h2{
    margin: 0;
    color: #f35050;
    font-size: 1.5vw;
}
.contacttext h2 b{
    color: #101010;
}

.contactmail{
    width: 30%;
    margin-top: 5%;
    font-size: 1vw;
    font-weight: 300;
    float: left;
}
.contactmail h3{
    margin: 0;
    font-size: 1vw;
    font-weight: 600;
}
.contactmail hr{
    border: solid 0.05vw #f35050;
    margin-top: 5%;
    margin-bottom: 10%;
}

.contactsocials{
    width: 30%;
    float: left;
    margin-left: 20%;
    margin-top: 5%;
    font-size: 1vw;
    font-weight: 300;
}
.contactsocials h3{
    margin: 0;
    font-size: 1vw;
    font-weight: 600;
}
.contactsocials hr{
    border: solid 0.05vw #f35050;
    margin-top: 5%;
    margin-bottom: 10%;
}
.contactsocials a{
    text-decoration: none;
    color: #101010;
    margin-right: 5%;
    transition: 0.3s;
}
.contactsocials a:hover{
    font-weight: 600;
    color: #f35050;
}

/*CLIENTS PAGES*/

/*maa*/

.maalanding{
    width: 100%;
    height: 80vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.maatitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.maatitletext{
    float: left;
    width: 50%;
}
.maatitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.maatitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4vw;
    font-weight: 600;
}
.maatitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.maatitle a:hover{
    font-weight: 600;
}
.maatitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.maatitle span:hover{
    background: #101010;
    color: #fafafa;
}

.maatitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.maatitlelogo img{
    width: 10vw;
}

.maainfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.maainfoimg{
    width: 80%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
    overflow: hidden;
    display: inline-block;
    justify-content: center;
}
.maainfoimg img{
    width: 20%;
}

.maainfoimgcenter{
    width: 100%;
    display: flex;
    justify-content: center;
}

.maainfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}

.maainfooverview{
    width: 60%;
    float: left;
}
.maainfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.maainfooverview p{
    margin: 0;
    font-size: 1vw;
}

.maainfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.maainfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.maainfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
}
.maainfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

/*bwmbwm*/

.bwmbwmlanding{
    width: 100%;
    height: 80vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.bwmbwmtitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.bwmbwmtitletext{
    float: left;
    width: 50%;
}
.bwmbwmtitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.bwmbwmtitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4.5vw;
    font-weight: 600;
}
.bwmbwmtitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.bwmbwmtitle a:hover{
    font-weight: 600;
}
.bwmbwmtitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.bwmbwmtitle span:hover{
    background: #101010;
    color: #fafafa;
}

.bwmbwmtitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bwmbwmtitlelogo img{
    width: 10vw;
}

.bwmbwminfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.bwmbwminfovid{
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.bwmbwminfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}

.bwmbwminfooverview{
    width: 60%;
    float: left;
}
.bwmbwminfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.bwmbwminfooverview p{
    margin: 0;
    font-size: 1vw;
}

.bwmbwminfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.bwmbwminfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.bwmbwminfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
}
.bwmbwminfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

.bwmbwmwork{
    position: relative;
    margin-top: 5%;
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.bwmbwmwork h1{
    display: inline-block;
    margin: 0;
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
    font-size: 2vw;
    font-weight: 600;
}

.bwmbwmlogo{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
}
.bwmbwmlogo img{
    margin: 1%;
    width: 10%;
}

.bwmbwmbanner{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
}
.bwmbwmbanner img{
    width: 100%;
    object-fit: cover;
}

.bwmbwmscenes{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
}
.bwmbwmscenes img{
    width: 100%;
    object-fit: cover;
}

.bwmbwmcam{
    width: 40%;
    margin-top: 5%;
    margin-left: 10%;
    float: left;
    display: flex;
    justify-content: center;
}
.bwmbwmcam img{
    width: 96%;
    margin: 2%;
    object-fit: cover; 
}

.bwmbwmcamdark{
    width: 40%;
    margin-top: 5%;
    margin-right: 10%;
    float: left;
    display: flex;
    justify-content: center;
    background: #101010;
}
.bwmbwmcamdark img{
    width: 96%;
    margin: 2%;
    object-fit: cover; 
}

.bwmbwmfeed{
    display: inline-block;
    overflow: auto;
    float: left;
    width: 40%;
    margin-top: 5%;
    margin-left: 10%;
}
.bwmbwmfeed img{
    float: left;
    width: 46%;
    margin: 2%;
}

.bwmbwmfeeddark{
    display: inline-block;
    overflow: auto;
    float: left;
    width: 40%;
    margin-top: 5%;
    margin-right: 10%;
    background: #101010;
}
.bwmbwmfeeddark img{
    float: left;
    width: 46%;
    margin: 2%;
}

/*avocadoisguac*/

.avolanding{
    width: 100%;
    height: 80vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.avotitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.avotitletext{
    float: left;
    width: 50%;
}
.avotitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.avotitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4.5vw;
    font-weight: 600;
}
.avotitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.avotitle a:hover{
    font-weight: 600;
}
.avotitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.avotitle span:hover{
    background: #101010;
    color: #fafafa;
}

.avotitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.avotitlelogo img{
    width: 10vw;
}

.avoinfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.avoinfovid{
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.avoinfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}

.avoinfooverview{
    width: 60%;
    float: left;
}
.avoinfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.avoinfooverview p{
    margin: 0;
    font-size: 1vw;
}

.avoinfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.avoinfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.avoinfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
}
.avoinfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

.avowork{
    position: relative;
    margin-top: 5%;
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.avowork h1{
    float: left;
    margin: 0;
    width: 100%;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
    font-size: 2vw;
    font-weight: 600;
}

.avologo{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
}
.avologo img{
    margin: 1%;
    width: 10%;
}

.avoscenes{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
}
.avoscenes img{
    width: 100%;
    object-fit: cover;
}
.avoscenevid{
    width: 100%;
    display: flex;
    justify-content: center;
}

.avofeed{
    display: inline-block;
    overflow: auto;
    float: left;
    width: 40%;
    margin-top: 5%;
    margin-left: 10%;
}
.avofeed img{
    float: left;
    width: 46%;
    margin: 2%;
}

.avofeeddark{
    display: inline-block;
    overflow: auto;
    float: left;
    width: 40%;
    margin-top: 5%;
    margin-right: 10%;
    background: #101010;
}
.avofeeddark img{
    float: left;
    width: 46%;
    margin: 2%;
}

/*timryuuu*/

.timryuuulanding{
    width: 100%;
    height: 80vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.timryuuutitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.timryuuutitletext{
    float: left;
    width: 50%;
}
.timryuuutitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.timryuuutitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4.5vw;
    font-weight: 600;
}
.timryuuutitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.timryuuutitle a:hover{
    font-weight: 600;
}
.timryuuutitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.timryuuutitle span:hover{
    background: #101010;
    color: #fafafa;
}

.timryuuutitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timryuuutitlelogo img{
    width: 10vw;
}

.timryuuuinfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.timryuuuinfovid{
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.timryuuuinfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}

.timryuuuinfooverview{
    width: 60%;
    float: left;
}
.timryuuuinfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.timryuuuinfooverview p{
    margin: 0;
    font-size: 1vw;
}

.timryuuuinfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.timryuuuinfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.timryuuuinfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
}
.timryuuuinfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

.timryuuuwork{
    position: relative;
    margin-top: 5%;
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.timryuuuwork h1{
    margin: 0;
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
    font-size: 2vw;
    font-weight: 600;
}

.timryuuulogo{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
}
.timryuuulogo img{
    margin: 1%;
    width: 10%;
}

.timryuuuscenes{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
}
.timryuuuscenes img{
    width: 100%;
    object-fit: cover;
}
.timryuuuscenevid{
    width: 100%;
    display: flex;
    justify-content: center;
}

/*nurds*/

.nurdslanding{
    width: 100%;
    height: 80vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.nurdstitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.nurdstitletext{
    float: left;
    width: 50%;
}
.nurdstitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.nurdstitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4.5vw;
    font-weight: 600;
}
.nurdstitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.nurdstitle a:hover{
    font-weight: 600;
}
.nurdstitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.nurdstitle span:hover{
    background: #101010;
    color: #fafafa;
}

.nurdstitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nurdstitlelogo img{
    width: 10vw;
}

.nurdsinfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.nurdsinfovid{
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.nurdsinfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}

.nurdsinfooverview{
    width: 60%;
    float: left;
}
.nurdsinfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.nurdsinfooverview p{
    margin: 0;
    font-size: 1vw;
}
.nurdsinfooverview a{
    text-decoration: none;
    color: #f35050;
    transition: 0.3s;
}
.nurdsinfooverview a:hover{
    font-weight: 600;
}

.nurdsinfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.nurdsinfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.nurdsinfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
    cursor: pointer;
}
.nurdsinfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

.nurdswork{
    position: relative;
    margin-top: 5%;
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.nurdswork h1{
    display: inline-block;
    margin: 0;
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
    font-size: 2vw;
    font-weight: 600;
}

.nurdslogo{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
}
.nurdslogo img{
    margin: 1%;
    width: 10%;
}

.nurdsbanner{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
}
.nurdsbanner img{
    width: 100%;
    object-fit: cover;
}

.nurdscharacter{
    width: 80%;
    margin-left: 10%;
    display: inline-block;
}
.nurdscharacter div{
    width: 100%;
    display: flex;
    justify-content: center;
}
.nurdscharacter div img{
    width: 25%;
}

.nurdsintrooutro{
    width: 80%;
    margin-left: 10%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.nurdsthumbnails{
    width: 80%;
    margin-left: 10%;
    display: inline-block;
}
.nurdsthumbnails img{
    width: 50%;
    float: left;
}

/*random*/

.randomlanding{
    width: 100%;
    height: 70vh;
    position: relative;
    font-family: "Roboto", sans-serif;
}

.randomtitle{
    position: absolute;
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
}

.randomtitletext{
    float: left;
    width: 50%;
}
.randomtitle h2{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 300;
}
.randomtitle h1{
    margin: 0;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 4vw;
    font-weight: 600;
}
.randomtitle a{
    font-size: 1vw;
    font-weight: 300;
    text-decoration: none;
    color: #f35050;
    padding: 0.3vw;
    display: inline-block;
    transition: 0.3s;
}
.randomtitle a:hover{
    font-weight: 600;
}
.randomtitle span{
    position: relative;
    padding: 0.3vw;
    display: inline-block;
    border: solid 0.1vw #101010;
    margin: 0.3vw;
    font-weight: 500;
    font-size: 0.7vw;
    color: #101010;
    transition: 0.3s;
}
.randomtitle span:hover{
    background: #101010;
    color: #fafafa;
}

.randomtitlelogo{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.randomtitlelogo img{
    width: 10vw;
}

.randominfo{
    width: 100%;
    font-family: "Roboto", sans-serif;
}

.randominfotext{
    overflow: auto;
    width: 80%;
    margin-left: 10%;
}

.randominfooverview{
    width: 60%;
    float: left;
}
.randominfooverview h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.randominfooverview p{
    margin: 0;
    font-size: 1vw;
}

.randominfoservices{
    width: 30%;
    margin-left: 10%;
    float: left;
}
.randominfoservices h1{
    margin: 0;
    margin-bottom: 1%;
    font-size: 2vw;
    font-weight: 800;
}
.randominfoservices span{
    width: 46%;
    padding: 2%;
    float: left;
    font-size: 1vw;
    font-weight: 300;
    transition: 0.3s;
}
.randominfoservices span:hover{
    background: #101010;
    color: #fafafa;
}

.randomwork{
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    display: inline-block;
}

.randomworktab{
    position: relative;
    width: 50%;
    height: 30vw;
    overflow: hidden;
    float: left;
    box-sizing: border-box;
    transition: 0.3s ease;
}

.randomworktabtext{
    width: 100%;
    position: absolute;
    z-index: 10;
    font-family: "Roboto", sans-serif;
    opacity: 0;
    transition: 0.3s;
    background: #101010;
    padding: 1vw;
    bottom: 0;
    margin-bottom: -15%;
}
.randomworktab:hover .randomworktabtext{
    margin-bottom: 0;
    opacity: 0.9;
}
.randomworktabtext h1{
    margin: 0;
    font-size: 2vw;
    font-weight: 800;
    color: #fafafa;
    text-shadow: 3px 3px 3px #101010;
}
.randomworktabtext p{
    margin: 0;
    font-size: 1vw;
    font-weight: 600;
    color: #fafafa;
    text-shadow: 3px 3px 3px #101010;
}

.randomworktabimg{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.randomworktabimg img{
    width: 66%;
    transition: 0.3s;
}
.randomworktab:hover .randomworktabimg img{
    width: 70%;
}

.randomworktabbg{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: blur(0px) grayscale(0);
    transition: 0.3s;
}
.randomworktabbg img{
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.randomworktab:hover .randomworktabbg{
    filter: blur(5px) grayscale(1);
}

/* - TERMS - */

.termslanding{
    position: relative;
    width: 100%;
    font-family: "Roboto", sans-serif;
}

.termslandingtitle{
    display: inline-block;
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
}
.termslandingtitle h1{
    margin: 0;
    text-align: center;
    font-size: 4vw;
    font-weight: 800;
}
.termslandingtitle h2{
    margin: 0;
    text-align: center;
    font-size: 1vw;
    font-weight: 300;
    color: #f35050;
}

.termsrow{
    float: left;
    display: inline-block;
    width: 80%;
    margin-left: 10%;
    font-family: "Roboto", sans-serif;
}
.termstab{
    width: 40%;
    margin: 5%;
    float: left;
    margin-bottom: 0;
}
.termstabtitle{
    width 100%;
    font-size: 0.7vw;
}

.termstabtext{
    font-size: 0.9vw;
    font-weight: 300;
}
.termstabtext b{
    color: #f35050;
}

.termsfooter{
    width: 80%;
    margin-top: 5%;
    margin-left: 10%;
    margin-bottom: 5%;
    float: left;
    font-family: "Roboto", sans-serif;
}
.termsfooter a{
    font-size: 3vw;
    text-decoration: none;
    color: #101010;
    transition: 0.3s;
    font-weight: 600;
}
.termsfooter a:hover{
    color: #f35050;
    padding-left: 1%;
}

/* - LOGO - */

.logolanding{
    position: relative;
    width: 100%;
    height: 90vh;
    font-family: "Roboto", sans-serif;
    overflow: hidden;
}

.logolandingtitle{
    position: absolute;
    margin-top: 15%;
    margin-left: 15%;
}
.logolandingtitle h2{
    margin: 0;
    color: #f35050;
    font-size: 2vw;
    font-weight: 300;
}
.logolandingtitle h1{
    margin: 0;
    font-size: 6vw;
    font-weight: 800;
}

.logolanding img{
    width: 10%;
    position: absolute;
    right: 0;
    margin-top: 15%;
    margin-right: 15%;
}

.logowork{
    width: 100%;
    position: relative;
    font-family: "Roboto", sans-serif;
}
.logowork h1{
    margin: 0;
    font-size: 2vw;
    text-align: center;
}

.logoexplain{
    width: 80%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
}
.logoexplain img{
    width: 25%;
    margin: 2%;
}

.logoexplaintext{
    width: 80%;
    margin-left: 10%;
    margin-bottom: 10%;
    display: flex;
    justify-content: center;
}
.logoexplaintext span{
    width: 29%;
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
}



@media (max-width: 768px){
    
    /*STANDARD - mobile*/
    
    .menu{
        width: 100%;
    }
    
    .menuOpen{
        margin: 1vw;
        padding: 3vw;
    }
    
    #menuLogo{
        margin: 1vw;
        padding: 3vw;
    }
    
    .menuContent ul a li{
        font-size: 10vw;
        text-align: center;
    }
    
    #menuCurrent{
        margin: 0;
        padding: 0;
        border: none;
    }
    
    .menuSocialsicons, .mail{
        display: none;
    }
    
    .menuSocialsinfo{
        width: 100%;
        margin: 0;
    }
    .TOS{
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 4vw;
    }
    .copyright{
        width: 100%;
        margin: 0;
        margin-top: 3%;
        text-align: center;
        font-size: 2vw;
    }
    
    /*HOME - mobile*/
    
    .homelanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .homelandingtitle{
        margin-top: 0;
    }
    .homelandingtitle h2{
        font-size: 5vw;
    }
    .homelandingtitle h1{
        margin-top: 5%;
        font-size: 16vw;
    }
    .homelandingtitle h3{
        margin-top: 5%;
        font-size: 4vw;
        width: 80%;
        margin-left: 10%;
    }
    
    #homelandingTIM{
        display: none;
    }
    #homelandingBG{
        width: 100%;
        object-fit: cover; 
    }
    
    .homeworkshort{
        width: 100%;
        height: 50vh
    }
    .homeworkshort:hover .homeworkdescription{
        margin: 0;
    }
    .homeworkshort:hover .homeworktypes{
        display: none;
    }
    
    .homeworklogo img{
        opacity: 1;
    }
    
    #homeworkBG{
        filter: grayscale(0);
    }
    
    .homeworkdescription{
        opacity: 1;
    }
    .homeworkdescription h1{
        font-size: 5vw;
        padding: 2vw;
    }
    
    .homeworklong{
        width: 100%;
        height: 50vh;
    }
    .homeworklong:hover .homeworkdescription{
        margin: 0;
    }
    .homeworklong:hover .homeworktypes{
        display: none;
    }
    
    .homeworkmore h1{
        margin-top: 10%;
        font-size: 5vw;
    }
    
    .homeworkmorelink a{
        font-size: 10vw;
    }
    
    .homecontact{
        margin-top: 15%;
        margin-bottom: 10%;
    }
    .homecontact h1{
        width: 80%;
        margin-left: 10%;
        font-size: 8vw;
        text-align: center;
    }
    
    .homecontactmail{
        width: 80%;
        margin-left: 10%;
        margin-top: 5%;
        text-align: center;
        font-size: 5vw;
    }
    .homecontactmail h2{
        font-size: 4vw;
    }
    
    .homecontactsocials{
        width: 80%;
        margin-left: 10%;
        margin-top: 10%;
        text-align: center;
        font-size: 5vw;
    }
    .homecontactsocials h2{
        font-size: 4vw;
    }
    
    .homecontact hr{
        width: 100%;
        margin-bottom: 2%;
    }
    
    /*ABOUT - mobile*/
    
    .aboutlanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    .aboutlanding img{
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        z-index: 1;
        opacity: 0.1;
    }
    
    .aboutlandingtext{
        z-index: 5;
        position: absolute;
        margin-left: 15%;
        margin-top: 0;
        width: 70%;
    }
    .aboutlandingtext h2{
        font-size: 5vw;
        text-align: center;
    }
    .aboutlandingtext h1{
        font-size: 15vw;
        text-align: center;
    }
    .aboutlandingtext h3{
        font-size: 5vw;
        text-align: center;
    }
    .aboutlandingtext p{
        font-size: 3vw;
        margin-top: 15%;
        text-align: center;
    }
    
    .aboutinfo{
        display: none;
    }
    
    .aboutquote{
        margin: 0;
        font-size: 5vw;
    }
    .aboutquote p{
        padding: 10vw;
        margin: 0;
    }
    
    .aboutinfomobile{
        display: block;
        font-family: "Roboto", sans-serif;
    }
    .aboutinfomobile p{
        width: 50%;
        margin: 0;
        margin-left: 25%;
        margin-top: 5%;
        text-align: center;
        padding: 2vw;
        font-size: 5vw;
        border-bottom: solid 0.5vw #f35050;
    }
    
    .abouthobbies{
        width: 100%;
        margin: 0;
        margin-top: 5%;
    }
    .abouthobbies h1{
        background: #101010;
        color: #fafafa;
        padding: 2vw;
        font-size: 10vw;
        margin: 0;
        border-bottom: solid 1vw #f35050;
    }
    .abouthobbies hr{
        display: none;
    }
    .abouthobbies p{
        width: 100%;
        font-size: 4vw;
        margin-top: 5%;
        line-height: normal;
        pointer-events: none;
    }
    
    .aboutskills{
        margin: 0;
        width: 100%;
        margin-top: 5%;
    }
    .aboutskills h1{
        background: #101010;
        color: #fafafa;
        padding: 2vw;
        font-size: 10vw;
        margin: 0;
        border-bottom: solid 1vw #f35050;
    }
    .aboutskills hr{
        display: none;
    }
    .aboutskills p{
        width: 100%;
        font-size: 4vw;
        margin-top: 5%;
        line-height: normal;
        pointer-events: none;
    }
    
    .aboutart{
        margin-top: 15%;
    }
    .aboutart h1{
        background: #101010;
        color: #fafafa;
        padding: 2vw;
        font-size: 10vw;
        margin: 0;
        border-bottom: solid 1vw #f35050;
    }
    .aboutartwide h1, .aboutarthigh h1{
        border: none;
        opacity: 0.9;
        font-size: 8vw;
    }
    
    .aboutartwide{
        width: 100%;
    }
    .aboutartwide img{
        filter: grayscale(0);
    }
    
    .aboutarthigh{
        width: 100% !important;
    }
    .aboutarthigh img{
        filter: grayscale(0);
    }
    
    /*PORTFOLIO - mobile*/
    
    .portfoliowork{
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .portfoliotab{
        width: 50%;
        height: 50vw;
    }
    .portfoliotab h1, .portfoliotablarge h1{
        opacity: 0.9;
        font-size: 4vw;
        padding: 2vw;
    }
    .portfoliotab img, .portfoliotablarge img{
        filter: grayscale(0);
    }
    
    .portfoliotablarge{
        height: 50vw;
    }
    
    /*CONTACT - mobile*/
    
    .contactlanding{
        display: flex;
        align-items: center;
    }
    
    .contactlanding img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        margin: 0;
    }
    
    .contacttext{
        margin-top: 0;
        width: 80%;
        margin-left: 10%;
    }
    .contacttext h1{
        font-size: 12vw;
        text-align: center;
    }
    .contacttext h2{
        font-size: 8vw;
        text-align: center;
        margin-top: 5%;
    }
    
    .contactmail{
        width: 100%;
        text-align: center;
        font-size: 5vw;
        margin-top: 15%;
    }
    .contactmail h3{
        display: none;
    }
    .contactmail hr{
        display: none;
    }
    
    .contactsocials{
        margin: 0;
        width: 100%;
    }
    .contactsocials h3{
        display: none;
    }
    .contactsocials a{
        width: 100%;
        font-size: 5vw;
        margin: 0;
        padding: 2vw;
        float: left;
        text-align: center;
    }
    
    /* CLIENTS PAGES - mobile*/
    
    /*maa - mobile*/
    
    .maalanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .maatitle{
        margin-top: 0;
    }
    
    .maatitletext{
        width: 100%;
    }
    .maatitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .maatitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .maatitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .maatitletext a:hover{
        font-weight: 300;
    }
    .maatitletext span{
        display: none;
    }
    
    .maatitlelogo{
        width: 100%;
    }
    .maatitlelogo img{
        width: 50vw;
    }
    
    .maainfooverview{
        width: 100%;
        margin-bottom: 20%;
    }
    .maainfooverview h1{
        font-size: 8vw;
    }
    .maainfooverview p{
        font-size: 4vw;
    }
    
    .maainfoservices{
        display: none;
    }
    
    .maainfoimg{
        display: none;
    }
    
    /*bwmbwm - mobile*/
    
    .bwmbwmlanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .bwmbwmtitle{
        margin-top: 0;
    }
    
    .bwmbwmtitletext{
        width: 100%;
    }
    .bwmbwmtitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .bwmbwmtitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .bwmbwmtitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .bwmbwmtitletext a:hover{
        font-weight: 300;
    }
    .bwmbwmtitletext span{
        display: none;
    }
    
    .bwmbwmtitlelogo{
        width: 100%;
    }
    .bwmbwmtitlelogo img{
        width: 50vw;
    }
    
    .bwmbwminfovid iframe{
        height: 50vh;
    }
    
    .bwmbwminfooverview{
        width: 100%;
        margin-bottom: 20%;
        margin-top: 10%;
    }
    .bwmbwminfooverview h1{
        font-size: 8vw;
    }
    .bwmbwminfooverview p{
        font-size: 4vw;
    }
    
    .bwmbwminfoservices{
        display: none;
    }
    
    .bwmbwmwork h1{
        font-size: 5vw;
    }
    
    .bwmbwmlogo{
        display: inline-block;
    }
    .bwmbwmlogo img{
        margin: 5%;
        width: 50%;
        margin-left: 25%;
    }
    
    .bwmbwmcam{
        width: 80%;
    }
    .bwmbwmcamdark{
        width: 80%;
        margin-right: 0;
        margin-left: 10%;
    }
    
    .bwmbwmfeed{
        width: 80%;
    }
    .bwmbwmfeed img{
        width: 96%;
    }
    .bwmbwmfeeddark{
        width: 80%;
        margin-right: 0;
        margin-left: 10%;
    }
    .bwmbwmfeeddark img{
        width: 96%;
    }
    
    /*avocadoisguac - mobile*/
    
    .avolanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .avotitle{
        margin-top: 0;
    }
    
    .avotitletext{
        width: 100%;
    }
    .avotitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .avotitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .avotitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .avotitletext a:hover{
        font-weight: 300;
    }
    .avotitletext span{
        display: none;
    }
    
    .avotitlelogo{
        width: 100%;
    }
    .avotitlelogo img{
        width: 50vw;
    }
    
    .avoinfovid iframe{
        height: 50vh;
    }
    
    .avoinfooverview{
        width: 100%;
        margin-bottom: 20%;
        margin-top: 10%;
    }
    .avoinfooverview h1{
        font-size: 8vw;
    }
    .avoinfooverview p{
        font-size: 4vw;
    }
    
    .avoinfoservices{
        display: none;
    }
    
    .avowork h1{
        font-size: 5vw;
    }
    
    .avologo{
        display: inline-block;
    }
    .avologo img{
        margin: 5%;
        width: 50%;
        margin-left: 25%;
    }
    
    .avowork iframe{
        height: 50vh;
    }
    
    .avofeed{
        width: 80%;
    }
    .avofeed img{
        width: 96%;
    }
    .avofeeddark{
        width: 80%;
        margin-right: 0;
        margin-left: 10%;
    }
    .avofeeddark img{
        width: 96%;
    }
    
    /*timryuuu - mobile*/
    
    .timryuuulanding{
        height: 100vh;
        display: flex;
        align-items: center; 
    }
    
    .timryuuutitle{
        margin-top: 0;
    }
    
    .timryuuutitletext{
        width: 100%;
    }
    .timryuuutitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .timryuuutitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .timryuuutitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .timryuuutitletext a:hover{
        font-weight: 300;
    }
    .timryuuutitletext span{
        display: none;
    }
    
    .timryuuutitlelogo{
        width: 100%;
    }
    .timryuuutitlelogo img{
        width: 50vw;
    }
    
    .timryuuuinfovid iframe{
        height: 50vh;
    }
    
    .timryuuuinfooverview{
        width: 100%;
        margin-bottom: 20%;
        margin-top: 10%;
    }
    .timryuuuinfooverview h1{
        font-size: 8vw;
    }
    .timryuuuinfooverview p{
        font-size: 4vw;
    }
    
    .timryuuuinfoservices{
        display: none;
    }
    
    .timryuuuwork h1{
        font-size: 5vw;
    }
    
    .timryuuulogo{
        display: inline-block;
    }
    .timryuuulogo img{
        margin: 5%;
        width: 50%;
        margin-left: 25%;
    }
    
    .timryuuuwork iframe{
        height: 50vh;
    }
    
    /*nurds - mobile*/
    
    .nurdslanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .nurdstitle{
        margin-top: 0;
    }
    
    .nurdstitletext{
        width: 100%;
    }
    .nurdstitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .nurdstitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .nurdstitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .nurdstitletext a:hover{
        font-weight: 300;
    }
    .nurdstitletext span{
        display: none;
    }
    
    .nurdstitlelogo{
        width: 100%;
    }
    .nurdstitlelogo img{
        width: 50vw;
    }
    
    .nurdsinfovid iframe{
        height: 50vh;
    }
    
    .nurdsinfooverview{
        width: 100%;
        margin-bottom: 20%;
        margin-top: 10%;
    }
    .nurdsinfooverview h1{
        font-size: 8vw;
    }
    .nurdsinfooverview p{
        font-size: 4vw;
    }
    
    .nurdsinfoservices{
        display: none;
    }
    
    .nurdswork h1{
        font-size: 5vw;
    }
    
    .nurdslogo{
        display: inline-block;
    }
    .nurdslogo img{
        margin: 5%;
        width: 50%;
        margin-left: 25%;
    }
    
    .nurdswork iframe{
        height: 50vh;
    }
    
    .nurdscharacter div{
        display: inline-block;
    }
    .nurdscharacter div img{
        width: 100%;
    }
    
    .nurdsthumbnails img{
        width: 100%;
    }
    
    /*random - mobile*/
    
    .randomlanding{
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .randomtitle{
        margin-top: 0;
    }
    
    .randomtitletext{
        width: 100%;
    }
    .randomtitletext h2{
        text-align: center;
        font-size: 5vw;
    }
    .randomtitletext h1{
        font-size: 10vw;
        text-align: center;
    }
    .randomtitletext a{
        width: 30%;
        padding: 5%;
        margin-left: 30%;
        text-align: center;
        font-size: 5vw;
    }
    .randomtitletext a:hover{
        font-weight: 300;
    }
    .randomtitletext span{
        display: none;
    }
    
    .randomtitlelogo{
        width: 100%;
        margin-top: 10%;
    }
    .randomtitlelogo img{
        width: 50vw;
    }
    
    .randominfovid iframe{
        height: 50vh;
    }
    
    .randominfooverview{
        width: 100%;
        margin-bottom: 20%;
        margin-top: 10%;
    }
    .randominfooverview h1{
        font-size: 8vw;
    }
    .randominfooverview p{
        font-size: 4vw;
    }
    
    .randominfoservices{
        display: none;
    }
    
    .randomworktab{
        width: 100%;
        height: 50vh;
        pointer-events: none;
    }
    .randomworktabimg img{
        opacity: 1;
    }
    .randomworktabbg{
        filter: blur(3px);
    }
    
    /* - TERMS - mobile*/
    
    .termslanding{
        height: 50vh;
        display: flex;
        align-items: center;
    }
    
    .termslandingtitle h1{
        font-size: 9vw;
    }
    .termslandingtitle h2{
        font-size: 3vw;
    }
    
    .termstab{
        width: 100%;
        margin: 0;
        margin-bottom: 5%;
    }
    
    .termstabtitle{
        font-size: 3vw;
    }
    
    .termstabtext{
        font-size: 3vw;
    }
    
    .termsfooter{
        text-align: center;
    }
    .termsfooter a{
        font-size: 6vw;
    }
    
    /* - LOGO - mobile*/
    
    .logolanding{
        height: 100vh;
    }
    .logolandingimg{
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 20%;
    }
    .logolandingimg img{
        position: relative;
        margin: 0;
        width: 30%;
    }
    
    .logolandingtitle{
        width: 80%;
        margin-left: 10%;
        margin-top: 25%;
    }
    .logolandingtitle h2{
        font-size: 5vw;
        text-align: center;
    }
    .logolandingtitle h1{
        font-size: 15vw;
        text-align: center;
        margin-top: 5%;
    }
    
    .logoexplain{
        display: inline-block;
    }
    
    .logoexplain img{
        width: 96%;
    }
    
    .logoexplaintext{
        margin-top: 10%;
    }
    .logoexplaintext span{
        font-size: 10vw;
    }
    
}