@font-face{
    font-family: adamLight;
    src: url(../Fonts/Adam-Light.ttf);
}


@font-face{
    font-family: adamMedium;
    src: url(../Fonts/Adam-Medium.ttf);
}

@font-face{
    font-family: adamBold;
    src: url(../Fonts/Adam-Bold.ttf);
}



@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeInLate {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInLateLate {
  0% {opacity: 0;}
  30% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInLateLateLate {
  0% {opacity: 0;}
  40% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes backgroundFadeIn {
  from {opacity: 0;}
  to {opacity: 0.3;}
}

@keyframes background{
    0% {background-size: 200%;}
    100%{background-size: 140%;}
}

@keyframes backgroundDesk{
    0% {background-size: 150vw;}
    100%{background-size: 100vw;}
}

@keyframes down{
    0% {transform: translateY(-500px);}
    100% {transform: translateY(0);}
}

@keyframes righttoleft{
    0% {transform: translateX(1000px);}
    100% {transform: translateX(0px);}
}

@keyframes lefttoright{
    0% {transform: translateX(-1000px);}
    100% {transform: translateX(0px);}
}

@keyframes djsetanimation{
    from {margin-left: 50vw;}
    to {}
}

@keyframes djsetcontainer{
    from {transform: translateX(500vw);}
    to {transform: translateX(0vw);}
}

@keyframes down{
    0% {transform: translateY(-10vh);}
    100% {transform: translateY(0);}
}

body{
    position: relative;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    margin: 0px;
    background-color: rgba(34,34,34,1);
}

a{
    text-decoration: none;
    outline: none;
}

.backgroundIMGBlock{
    animation: backgroundFadeIn 2s;
    position: absolute;
    display: block;
    z-index: -100;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    background-image: url(../IMG/decks.jpg);
    background-size: cover;
    background-position: center center;
    opacity: 0.2;
}



.header{
    z-index: 10;
    width: 100vw;
}

.headerLogo{
    margin-left: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 8vh;
}

.headerIMG{
    height: 8vh;
}

.instaLogo{
    visibility: hidden;
    text-align: right;
    height: 4vh;
}

.headerTitleBox{
    z-index: 11;
    animation: fadeInLate 2s;
    position: fixed;
    /*margin-top: -2.5vh;*/
    background-color: rgba(255,255,255,0.8);
    height: 8vh;
    width: 100vw;
    /*transform: skewY(-5deg);*/
    display: flex;
    align-items: center;
}

.returnbutton{
    font-family: adamMedium;
    font-size: 5vh;
    margin-left: 2vw;
    margin-top: 2vh;
    color: rgba(34,34,34,1);
    text-decoration: none;
}

.headerTitle{
    font-family: adamMedium;
    font-size: 5vh;
    margin-left: 2vw;
    margin-top: 6vh;
    color: rgba(34,34,34,1);
    text-decoration: none;
    position: absolute;
    right: 2vw;
    letter-spacing: 1vw;
}
















.djSetContentBlock{
    animation: fadeInLate 3s;
    margin-left: 0px;
    margin-top: 0vh;
    padding-top: 10vh;
    width: 100vw;
    height: 50vh;
}

.djSetContentTitle{
    animation: fadeIn 1s;
    margin-left: 2vw;
    margin-top: 0px;
    font-family: futuraBook;
    font-size: 5vh;
    color: white;
}


.djSetSeries {
    animation: fadeInLate 2s;
    margin-left: 2vw;
    font-family: adamMedium;
    letter-spacing: 0.5vh;
    color: white;
    font-size: 3vh;
}


.djSet{
    animation: djsetanimation 5s;
    width: 28.44vh;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-bottom: 0.1vh;
}

.djSetDetails{
    animation: fadeInLate 5s;
    text-align: center;
    width: 100%;
    font-family: adamMedium;
    font-size: 1.5vh;
    margin-top: 0.5vh;
    color: white;
}

.djSetContainer{
    animation: djsetcontainer 2s, fadeIn 2s;
    padding-left: 5vw;
    position: relative;
    display: flex;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    overflow: auto;
}

.djSetContainer::-webkit-scrollbar{
    display: none;
}

.djSetContent{
    border: 0.2vh solid rgba(255, 255, 255, 1);
    width: 28.44vh;
    height: 16vh;
}



.playlistSeries {
    margin-top: 4vh;
    animation: fadeInLate 2s;
    margin-left: 2vw;
    font-family: adamMedium;
    letter-spacing: 0.5vh;
    color: white;
    font-size: 3vh;
}


.playlist{
    animation: djsetanimation 5s;
    width: 16vh;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-bottom: 0.1vh;
}

.playlistImg{
    width: 16vh;
    height: 16vh;
    border: 0.2vh solid rgba(255, 255, 255, 1);
}



.wantMoreBlock{

    width: 100vw;
    margin-top: 17vh;
    text-align: center;
}

.wantMoreTitle{
    animation: fadeInLateLate 6s;
    font-size: 2vh;
    letter-spacing: 0.5vh;
    color: white;
    font-family: adamBold;
}

.platformLinks{
    display: flex;
    text-decoration: none;
}

.platformLogo{
    animation: fadeInLateLateLate 6s, down 5s;
    margin-top: 0px;
    height: 4vh;
    margin-left: 1.5vh;
    margin-right: 1.5vh;
    transition: height 1s, margin-right 1s, margin-left 1s, margin-top 1s;
}

.platformLogo:hover{
    height: 5vh;
    margin-left: 1vh;
    margin-right: 1vh;
    margin-top: -1vh;
}

















.copyrightDiv{
    position: absolute;
    bottom: 1vh;
    width: 100vw;
    text-align: center;
}

.copyrightTitle{
    margin-bottom: 0px;
    letter-spacing: 0.5vh;
    color: white;
    font-family: adamBold;
    font-size: 1vh;
}

.devBy{
    margin-top: 2px;
    color: white;
    font-family: adamLight;
    font-size: 1vh;
}