@import url('buttons.css');
body {
	padding: 0px !important;
	margin: 0;
	min-height: 100vh;
	position: relative;
	height: auto !important;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}

img {
	max-width: 100%;
}

.button {
	transition: all 0.4s;
}

.button:hover {
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: all 0.4s;
}

.desktop {
	display: block !important;
}
.mobile {
	display: none !important;
}

.oswald{
	font-family: 'Oswald', sans-serif;
}
.mont{
	font-family: 'Montserrat', sans-serif;
}

/*	banner*/
.section1{
	position: relative;
	height: 64vw;
}
.banner img{
	position: absolute;
	width: 100vw;
}

/*section2*/
.section2{
	position: relative;
	height: 57.5vw;
}
.banner img{
	position: absolute;
	width: 100vw;
}
.section2 .title{
	position: absolute;
	width: 40vw;
	left: 51vw;
	top: 19vw;
}
.section2 .image{
	position: absolute;
	width: 42vw;
	left: 10vw;
	top: 18vw;
}
.section2 .button{
	position: absolute;
    width: 20vw;
    left: 51vw;
    top: 50vw;
}
.section2 .desc{
	position: absolute;
    width: 35vw;
    left: 52vw;
    top: 31vw;
    font-size: 1vw;
    font-weight: 600;
}



/*section2*/

/*section3*/
.section3{
	position: relative;
	height: 48.2vw;
}
.banner img{
	position: absolute;
	width: 100vw;
}
.section3 .title{
	position: absolute;
    width: 40vw;
    left: 9vw;
    top: 7vw;
}
.section3 .image{
	position: absolute;
    width: 42vw;
    left: 50vw;
    top: 3vw;
}
.section3 .button{
	position: absolute;
    width: 20vw;
    left: 9vw;
    top: 27vw;
}
.section3 .desc{
	position: absolute;
    width: 35vw;
    left: 10vw;
    top: 15vw;
    font-size: 1vw;
    font-weight: 600;
}

/*section4*/
.section4{
	position: relative;
	height: 47.7vw;
}
.banner img{
	position: absolute;
	width: 100vw;
}
.section4 .title{
	position: absolute;
	width: 40vw;
	left: 51vw;
	top: 3vw;
}
.section4 .image{
	position: absolute;
	width: 42vw;
	left: 10vw;
	top: 3vw;
}
.section4 .button{
    position: absolute;
    width: 25vw;
    left: 51vw;
    top: 30vw;
}
.section4 .desc{
	position: absolute;
    width: 35vw;
    left: 52vw;
    top: 16vw;
    font-size: 1vw;
    font-weight: 600;
}

/*section5*/
.section5{
    height: 90vw;
	position: relative;
	/* height: auto; */
}
.banner img{
	position: absolute;
	width: 100vw;
}
.section5 .title{
	position: absolute;
	width: 40vw;
	top: 5vw;
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
}
.icon{
	position: absolute;
	width: 25vw;
}
.icon.dance{
	left: 8vw;
	top: 16vw;
}
.icon.music{
	left: 38vw;
	top: 16vw;
}
.icon.art{
	left: 66vw;
	top: 16vw;
}
.icon.fashion{
	left: 20vw;
	top: 50vw;
}
.icon.game{
	left: 55vw;
	top: 50vw;
}


/*mobile*/
@media only screen and (max-width: 1000px){
	.mobile {
    	display: block !important;
	}
	.desktop {
    	display: none !important;
	}

	.section1{
		height: 222vw;
	}

	.section2{
		height: 212vw;
	}
	.section2 .title{
	    width: 84vw;
	    left: 8vw;
	    top: 13vw;
	}
	.section2 .image{
	    width: 96vw;
	    left: 2vw;
	    top: 40vw;
	}
	.section2 .button{
		transition: transform .2s;
	    width: 70vw;
	    left: 15vw;
	    top: 190vw;
	}
	.section2 .desc{
	    width: 76vw;
	    left: 12vw;
	    top: 122vw;
	    font-size: 3vw;
	    font-weight: 600;
	    text-align: center;
	}

	.section3{
		height: 203vw;
	}
	.section3 .title{
	    width: 84vw;
	    left: 8vw;
	    top: 25vw;
	}
	.section3 .image{
	    width: 96vw;
	    left: 2vw;
	    top: 40vw;
	}
	.section3 .button{
		transition: transform .2s;
	    width: 70vw;
	    left: 15vw;
	    top: 175vw;
	}
	.section3 .desc{
	    width: 76vw;
	    left: 12vw;
	    top: 122vw;
	    font-size: 3vw;
	    font-weight: 600;
	    text-align: center;
	}

	.section4{
		height: 202vw;
	}
	.section4 .title{
	    width: 84vw;
	    left: 8vw;
	    top: 13vw;
	}
	.section4 .image{
	    width: 96vw;
	    left: 2vw;
	    top: 40vw;
	}
	.section4 .button{
		transition: transform .2s;
	    width: 70vw;
	    left: 15vw;
	    top: 170vw;
	}
	.section4 .desc{
	    width: 76vw;
	    left: 12vw;
	    top: 122vw;
	    font-size: 3vw;
	    font-weight: 600;
	    text-align: center;
	}

    .section5{
        position: relative;
		height: 543vw;
	}

	.section5 .title{
		width: 84vw;
		top: 22vw;
	}
	.icon{
	    width: 60vw;
	    margin-left: auto;
	    margin-right: auto;
	    left: 0 !important;
	    right: 0 !important;
	}
	.icon.dance{
		top: 60vw
	}
	.icon.music{
		top: 150vw;
	}
	.icon.art{
		top: 240vw;
	}
	.icon.fashion{
		top: 330vw;
	}
	.icon.game{
		top: 420vw;
	}
}