/*PARALLAX**********************************************/

.parallax {
    position: relative;
    height: 100%;
    width: 100%;
}

.parallax section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

#fixedCharacter {
    position: fixed;
    bottom: 40px;
    left: 45%;
    z-index: 4;
    height: 75vh;
}

#platform {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 50px;
    background: #48484a;
}

.parallaxHello img {
    position: absolute;
    top: 20%;
    left: 5%;
    z-index: 2;
    width: 40%;
}

#scroll {
    z-index: 2;
}

#scroll img {
    position: absolute;
    left: 5%;
    bottom: 60px;
    width: 6%;
    max-width: 30px;
}

.parallaxNavAbout a {
    padding:0;
    position: absolute;
    top: 20%;
    z-index: 2;
    height: 25.5vw;
    width: 40vw;
    max-width:310px;
    max-height:200px;
    background: url(../img/group2_.png) 0 0;
    background-size:200%;
    background-repeat: no-repeat;
}


.parallaxNavAbout a:hover {
    background: url(../img/group2_.png) 100% 0;
    background-size:200%;
    background-repeat: no-repeat;
}

.parallaxNavWork a {
    position: absolute;
    top: 20%;
    z-index: 2;
    height: 35vw;
    width: 40vw;
    max-height: 265px;
    max-width: 300px;
    background: url(../img/group3_.png) 0 0;
    background-repeat: no-repeat;
    background-size: 200%;
}

.parallaxNavWork a:hover {
    background: url(../img/group3_.png) 100% 0;
    background-size: 200%;
    background-repeat: no-repeat;
}

/*.parallaxNavBlog a {
    position: absolute;
    top: 20%;
    z-index: 2;
    height: 23vw;
    width: 40vw;
    max-height: 175px;
    max-width: 300px;
    background: url(../img/group4_.svg) 0 0;
    background-repeat: no-repeat;
    background-size: 200%;
    
}

.parallaxNavBlog a:hover {
    background: url(../img/group4_.svg) 100% 0;
    background-size: 200%;
    background-repeat: no-repeat;
}*/

.parallaxNavResume a {
    position: absolute;
    top: 20%;
    z-index: 2;
    height: 19vw;
    width: 47vw;
    max-height: 145px;
    max-width: 350px;
    background: url(../img/group5_.png) 0 0;
    background-repeat: no-repeat;
    background-size: 200%;
}

.parallaxNavResume a:hover {
    background: url(../img/group5_.png) 100% 0;
    background-size: 200%;
    background-repeat: no-repeat;
}

.parallaxNavSocialMedia {
    position: absolute;
    top: 20%;
    z-index: 2;
    background-image: url(../img/group6_.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 20vw;
    height: 70vw;
    max-height: 505px;
    max-width: 150px;
    padding-top: 4.5vw
}

.parallaxNavSocialMedia li a {
    display: block;
    width: 14vw;
    height: 14vw;
    max-width: 110px;
    max-height: 110px;
    margin: 1.5vw 2vw;
}

.parallaxNavSocialMedia li.instagram a {
    background: url(../img/group6_instagram.png) 0 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.instagram a:hover {
    background: url(../img/group6_instagram.png) 100% 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.behance a {
    background: url(../img/group6_behance.png) 0 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.behance a:hover {
    background: url(../img/group6_behance.png) 100% 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.linkedIn a {
    background: url(../img/group6_linkedIn.svg) 0 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.linkedIn a:hover {
    background: url(../img/group6_linkedIn.svg) 100% 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.twitter a {
    background: url(../img/group6_twitter.svg) 0 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavSocialMedia li.twitter a:hover {
    background: url(../img/group6_twitter.svg) 100% 0;
    background-repeat: no-repeat;
    background-size:200%;
}

.parallaxNavContact a {
    position: absolute;
    top: 20%;
    left:10px;
    z-index: 2;
    height: 43vw;
    width: 23vw;
    max-height: 320px;
    max-width: 175px;
    background: url(../img/group7_.png);
    background-repeat: no-repeat;
    background-size: 200%;
}

.parallaxNavContact a:hover {
    background: url(../img/group7_.png) 100% 0;
    background-size: 200%;
    background-repeat: no-repeat;
}

.artwork {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.artwork img {
    display: block;
    margin: 0 auto;
}

.parallax section div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.group1 {
    background-image: url(../img/group1_deep.svg);
}

.group1Back {
    background-image: url(../img/group1_back.svg);
    background-repeat: no-repeat;
}

.group1Base {
    background-image: url(../img/group1_base.svg);
    background-repeat: no-repeat;
}

.group2 {
    background-image: url(../img/group2_deep.svg);
}

.group2Back {
    background-image: url(../img/group2_back.svg);
    background-repeat: no-repeat;
}

.group2Base {
    background-image: url(../img/group2_base.svg);
    background-repeat: no-repeat;
}

.group2Fore {
    background-image: url(../img/group2_fore.svg);
    background-repeat: no-repeat;
}

.group3 {
    background-image: url(../img/group3_deep.svg);
}

.group3Back {
    background-image: url(../img/group3_back.svg);
    background-repeat: no-repeat;
}

.group3Base {
    background-image: url(../img/group3_base.svg);
    background-repeat: no-repeat;
}

.group3Fore {
    background-image: url(../img/group3_fore.svg);
    background-repeat: no-repeat;
}

/*.group4 {
    background-image: url(../img/group4_deep.svg);
}

.group4Base {
    background-image: url(../img/group4_base.svg);
    background-repeat: no-repeat;
}

.group4Fore {
    background-image: url(../img/group4_fore.svg);
    background-repeat: no-repeat;
}*/

.group5 {
    background-image: url(../img/group5_deep.svg);
}

.group5Back {
    background-image: url(../img/group5_back.svg);
    background-repeat: no-repeat;
}

.group5Base {
    background-image: url(../img/group5_base.svg);
    background-repeat: no-repeat;
}

.group6 {
    background-image: url(../img/group6_deep.svg);
}

.group6Back {
    background-image: url(../img/group6_back.svg);
    background-repeat: no-repeat;
}

.group6Fore {
    background-image: url(../img/group6_fore.svg);
    background-repeat: no-repeat;
}

.group7 {
    background-image: url(../img/group7_deep.svg);
}

.group7Back {
    background-image: url(../img/group7_back.svg);
    background-repeat: no-repeat;
}

/*END OF PARALLAX**********************************************/

/* RESPONSIVE */

@media only screen and (max-height: 420px) {}

@media only screen and (min-width: 500px) {}

@media only screen and (min-width: 750px) {
    .parallaxNavSocialMedia {
        padding-top: 40px;
    }
    .parallaxNavSocialMedia li a {
        display: block;
        margin: 10px 0 0 20px;
    }
}

@media only screen and (min-width: 1000px) {}

@media only screen and (min-width: 1100px) {}

@media only screen and (min-width: 1350px) {}

@media only screen and (min-width: 1600px) {}

@media only screen and (min-width: 1950px) {}

/* RESPONSIVE END */