/* -------- MEDIA QUERIES -------- */

@media screen and (max-width: 1820px) {
	/* -------- Section One -------- */
	section.one{padding:250px 100px 125px 100px;}
	.linetop{top:260px;}
	.linebottom{top:440px;}
	.linemid{top:328px;}
	
	/* -------- Section Two -------- */
	section.two{padding:0 100px 100px 100px;}
	
	/* -------- Section Three -------- */
	section.three{padding:60px 0 100px 0;}
	
	/* -------- Section Four -------- */
	section.four{padding:0 100px 125px 100px;}
	
	/* -------- Section Five -------- */
	section.five{padding:100px 100px 0 100px;}
	
	/* -------- Section Six -------- */
	section.six{padding:125px 100px 170px 100px;}
	
	/* -------- Section Seven -------- */
	section.seven{padding:150px 100px 100px 100px;}
	.seven-right{width:60%;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:125px 100px 100px 100px;}
	
}

@media screen and (max-width: 1751px) {
	/* -------- Section Seven -------- */
	.seven-left h3{font-size:44px;line-height:52px;}
	.seven-right{width:70%;}
	
	/* -------- Section Eight -------- */
	.eight-right h3{margin:0 0 136px 0;}
}

@media screen and (max-width: 1660px) {
	/* -------- Section Three -------- */
	.txt-3-wrap{padding:0 100px}
	
	/* -------- Section Eight -------- */
	.eight-left h3, .eight-right h3{font-size:44px;line-height:52px;}
	.eight-right h3{margin:0 0 187px 0;}
	
	/* -------- Test Area -------- */
	.testing-wrap{padding:200px 20px 0 20px;}
}

@media screen and (max-width: 1500px) {
	/* -------- Section One -------- */
	section.one{padding:250px 75px 125px 75px;}
	section.one h1{font-size:200px;}
	.linebottom{top:419px;}
	.linemid{top:312px;}
	
	/* -------- Section Two -------- */
	section.two{padding:0 75px 100px 75px;}
	
	/* -------- Section Four -------- */
	section.four{padding:0 75px 175px 75px;}
	section.four .four-left{width:300px;padding:0 100px 0 0;}
	section.four .four-right{width:calc(100% - 300px);}
	section.four ul li{font-size:40px;padding:.4em 0;width:70px;height:70px;}
	.preview{font-size:320px;}
	
	/* -------- Section Five -------- */
	section.five{padding:75px 75px 0 75px;}
	
	/* -------- Section Six -------- */
	section.six{padding:125px 75px 170px 75px;}
	section.six h1{font-size:60px;margin:0 0 80px 0;line-height:80px;}
	section.six h1 span{font-size:16px;top:-50px;}
	.ofl, .ofl-title{width:100%;}
	
	/* -------- Section Seven -------- */
	section.seven{padding:125px 75px 100px 75px;}
	.seven-left h3{font-size:40px;line-height:48px;}
	.seven-right p{column-gap:40px;}
	.seven-left{width:36%;}
	.seven-right{width:64%;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:125px 75px 100px 75px;}
}

@media screen and (max-width: 1440px) {
	/* -------- Section One -------- */
	.arrow{width:150px;}
	section.one .intro{font-size:50px;line-height:58px;}
	
	/* -------- Section Three -------- */
	section.three{padding:50px 0 100px 0;}
	section.three h2{font-size:70px;}
	section.three h2 span{font-size:36px;padding:28px 0 0 0;top:-8px;width:90px;height:90px;}
	#text-slider-wrap{margin:0 0 150px 0;}
	.txt-3-wrap{margin:0 0 100px 0;}
	section.three p{font-size:42px;line-height:52px;text-indent:120px;}
	section.three p::before{top:15px;width:28px;height:28px}
	
	/* -------- Section Five -------- */
	section.five h2{font-size:70px;}
	section.five p{font-size:42px;line-height:52px;text-indent:120px;}
	section.five p::before{top:15px;width:28px;height:28px}
	
	/* -------- Section Eight -------- */
	.eight-left h3, .eight-right h3{font-size:40px;line-height:48px;}
	.eight-right h3{margin:0 0 187px 0;}
}

@media screen and (max-width: 1280px) {
	/* -------- Section One -------- */
	section.one{padding:250px 50px 125px 50px;}
	section.one h1{font-size:170px;margin-top: -10px;}
	.linetop{top:258px;}
	.linebottom{top:393px;}
	.linemid{top:303px;}
	section.one .intro{font-size:40px;line-height:48px;}
	.arrow p{margin:10px 0 0 0;}
	.patreon{right:75px;}
	.arrow img{animation: arrowloop 2.8s;animation-iteration-count:infinite;height:70px;}
	@keyframes arrowloop {
	  from {top: 70px;}
	  50%{top: 110px;}
	  to {top: 70px;}
	}
	
	/* -------- Section Two -------- */
	section.two{padding:0 50px 100px 50px;}
	
	/* -------- Section Three -------- */
	.txt-3-wrap{padding:0 50px}
	section.three p{font-size:38px;line-height:48px;text-indent:100px;}
	section.three p::before{top:15px;width:28px;height:28px}
	
	/* -------- Section Four -------- */
	section.four{padding:0 50px 250px 50px;}
	
	/* -------- Section Five -------- */
	section.five{padding:75px 50px 0 50px;}
	section.five p{font-size:38px;line-height:48px;text-indent:100px;}
	section.five p::before{top:15px;width:28px;height:28px}
	
	/* -------- Section Six -------- */
	section.six{padding:100px 50px 125px 50px;}
	.rewarditem {padding:60px 0 20px 0;}
	.rewarditem h2{font-size:60px;margin:0 0 12px 60px;}
	.rewarditem h2 small{font-size:18px;top:-43px;}
	.rewarditem p{margin:0 0 0 60px;font-size:18px;line-height:22px;}
	.reward-desc::before{position:relative;top:10px;}
	
	/* -------- Section Seven -------- */
	section.seven{padding:150px 50px 75px 50px;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:100px 50px 75px 50px;}
	.eight-left{padding:0 50px 0 0;}
	.eight-right{padding:0 0 0 50px;}
	.eight-left h3, .eight-right h3{font-size:36px;line-height:44px;}
	.eight-right h3{margin:0 0 91px 0;}
	
	/* -------- Test Area -------- */
	.testing-wrap{padding:100px 20px 0 20px;}
	.test-area .cnt{padding:80px 0;}
	input[type="range"]{width:100px;}
	.fontstyle{max-width:150px;}
	.testing-filter select option{min-width:100px;max-width:150px;}
	.testing-filter .custom-select-sml {min-width:100px;max-width:150px;}
}

@media screen and (max-width: 1024px) {
	/* -------- Header -------- */
	header.main{height:70px;padding:15px 15px 0 10px;}
	header.main .logo a{width:140px;height:47px;}
	nav.menu a{width:100px;height:40px;border-radius:20px;font-size:14px;padding:12px 0 0 0;}
	nav.menu .close{width:40px;background-size:20px;}
	.whitebtn:hover,.pinkbtn:hover{width:100px;}
	
	/* -------- Section One -------- */
	section.one{padding:200px 50px 100px 50px;}
	section.one h1{font-size:130px;}
	.linetop{top:206px;}
	.linebottom{top:309px;}
	.linemid{top:241px;}
	section.one .intro{font-size:36px;line-height:44px;}
	.patreon{right:50px;top:1px;}
	.arrow{width:34px;height:87px;}
	.arrow p{display:none;}
	@keyframes arrowloop {
	  from {top: 20px;}
	  50%{top: 60px;}
	  to {top: 20px;}
	}
	
	/* -------- Section Two -------- */
	section.two{padding:0 50px 75px 50px;}
	
	/* -------- Section Three -------- */
	section.three h2{font-size:60px;}
	section.three h2 span{font-size:34px;padding:26px 0 0 0;top:-6px;width:85px;height:85px;}
	section.three p{font-size:34px;line-height:44px;}
	section.three p::before{top:10px;width:24px;height:24px}
	
	/* -------- Section Four -------- */
	section.four .four-left{width:200px;padding:0 20px 0 0;}
	section.four .four-left h3{font-size:20px;}
	section.four .four-right{width:calc(100% - 200px);}
	section.four ul li{font-size:40px;padding:.4em 0;width:70px;height:70px;}
	.preview{font-size:220px;}
	
	/* -------- Section Five -------- */
	section.five h2{font-size:60px;}
	section.five p{font-size:34px;line-height:44px;}
	section.five p::before{top:10px;width:24px;height:24px}
	
	/* -------- Section Seven -------- */
	.seven-left h3{font-size:36px;line-height:44px;margin:0 0 50px 0;padding:0;}
	.seven-right p{column-gap:50px;}
	.seven-left{width:100%;}
	.seven-right{width:100%;}
	.seven .flex{flex-wrap:wrap;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:75px 50px 50px 50px;}
	section.eight .flex{flex-wrap:wrap;}
	.eight-left{border-right:none;border-bottom:1px solid var(--white);padding:0;}
	.eight-right{padding:50px 0 0 0;}
	.eight-left, .eight-right{width:100%;}
	.eight-left h3, .eight-right h3{font-size:32px;line-height:40px;}
	.eight-left h3{margin:0 0 50px 0;}
	.eight-right h3{margin:0 0 50px 0;}
	.eight-left p, .eight-right p{margin:0 0 50px 0;}
}

@media screen and (max-width: 790px) {
	/* -------- Section One -------- */
	section.one{overflow:visible;}
	section.one h1{font-size:100px;margin:-5px 0 25px 0;}
	.linetop{top:205px;}
	.linebottom{top:284px;}
	.linemid{top:232px;}
	section.one .intro{font-size:30px;line-height:38px;}
	.arrow{width:25px;height:75px;}
	.arrow img{width:25px;}
	@keyframes arrowloop {
	  from {top: 10px;}
	  50%{top: 50px;}
	  to {top: 10px;}
	}
	.kick-text{font-size:12.5px;letter-spacing:3px;}
	.icon{width:45px;height:44px;}
	.icon img{margin-left:0;}
	.patreon{top:20px;right:40px;}
	
	/* -------- Section Two -------- */
	section.two{padding:0 50px 50px 50px;}
	
	/* -------- Section Three -------- */
	section.three h2{font-size:50px;}
	section.three h2 span{font-size:32px;padding:20px 0 0 0;top:-4px;width:75px;height:75px;}
	.txt-3-wrap{margin:0 0 75px 0;}
	section.three p{font-size:30px;line-height:40px;}
	section.three p::before{width:20px;height:20px}
	
	/* -------- Section Four -------- */
	section.four{padding:0 50px 150px 50px;}
	section.four .four-left, section.four .four-right{width:100%;padding:0;}
	section.four .four-left h3{margin:0 0 30px 0;}
	section.four ul{display:flex;flex-grow: 1;flex-wrap:wrap;}
	section.four ul li{min-width:70px;max-width:140px;flex:1;}
	.preview{display:none;}
	ection.four .flex, section.four .flex{flex-wrap:wrap;}
	section.four .flex .four-left, section.four .flex .four-right{flex-direction:row;}
	
	/* -------- Section Five -------- */
	section.five h2{font-size:50px;}
	section.five p{font-size:30px;line-height:40px;}
	section.five p::before{width:20px;height:20px}
	
	/* -------- Section Six -------- */
	.rewarditem h2{font-size:50px;margin:0 0 10px 50px;line-height:50px;}
	.rewarditem h2 small{font-size:16px;top:-15px;}
	.rewarditem p{margin:0 0 0 50px;font-size:16px;line-height:20px;}
	.reward-desc::before{top:10px;font-size:16px;}
	
	section.six h1{font-size:50px;margin:0 0 70px 0;line-height:60px;}
	section.six h1 span{font-size:16px;top:-15px;}
	
	/* -------- Test Area -------- */
	.textalign, .texttracking, .textleading{display:none;}
	.test-area .cnt{padding:60px 0;}
	
}

@media screen and (max-width: 640px) {
	/* -------- Section One -------- */
	section.one{padding:150px 50px 60px 50px;}
	section.one h1{font-size:80px;}
	section.one .intro{font-size:24px;line-height:32px;}
	.linetop{top:154px;}
	.linebottom{top:217px;}
	.linemid{top:175px;}
	@keyframes arrowloop {
	  from {top: 0;}
	  50%{top: 40px;}
	  to {top: 0;}
	}
	.patreon{top:0;}
	.arrow{display:none;}
	
	/* -------- Section Two -------- */
	section.two{padding:0 50px 25px 50px;}
	
	/* -------- Section Three -------- */
	section.three h2{font-size:44px;}
	section.three h2 span{font-size:30px;width:70px;height:70px;}
	#text-slider-wrap{margin:0 0 100px 0;}
	section.three p{font-size:26px;line-height:36px;text-indent:75px;}
	section.three p::before{top:9px;width:18px;height:18px}
	
	/* -------- Section Five -------- */
	section.five h2{font-size:44px;}
	section.five p{font-size:26px;line-height:36px;text-indent:75px;}
	section.five p::before{top:9px;width:18px;height:18px}
	
	/* -------- Section Seven -------- */
	.seven-left h3{font-size:32px;line-height:40px;margin:0 0 30px 0;}
	.seven-right p{column-count:1;}
	
	/* -------- Section Six -------- */
	.rewarditem img.swipeimage{width:420px;height:219px;}
	.reward-desc{padding:0 10px 0 0;}
	.reward-desc::after{display:none;}
	
	/* -------- Section Eight -------- */
	.eight-left h3, .eight-right h3{font-size:28px;line-height:36px;}
}

@media screen and (max-width: 521px) {
	/* -------- Section One -------- */
	section.one{padding:150px 25px 200px 25px;}
	section.one h1{font-size:70px;text-align:center;}
	section.one .intro{text-align:center;width:100%;}
	.linetop{top:154px;}
	.linebottom{top:209px;}
	.linemid{top:173px;}
	.patreon{top:120px;right:50px;left:0;right:0;margin-left:auto;margin-right:auto;}
	
	
	/* -------- Section Two -------- */
	section.two{padding:0 25px 0 25px;}
	
	/* -------- Section Three -------- */
	#text-slider-wrap{margin:0 0 75px 0;}
	.txt-3-wrap{padding:0 25px;margin:0 0 50px 0;}
	
	/* -------- Section Four -------- */
	section.four{padding:0 25px 125px 25px;}
	section.four ul{display:flex;flex-grow: 1;flex-wrap:wrap;}
	section.four ul li{font-size:36px;padding:.35em 0;min-width:56px;max-width:112px;height:56px;flex:1;}
	select {appearance:none;background-color:transparent;border:none;padding:10px 1em 10px 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:18px;outline:none;color:var(--white);}
	select option{max-width:280px;}
	.custom-select {max-width:280px;}
	
	/* -------- Section Five -------- */
	section.five{padding:0 25px;}
	
	/* -------- Section Six -------- */
	section.six{padding:100px 25px 100px 25px;}
	.rewarditem h2{font-size:40px;line-height:40px;}
	.rewarditem h2 small{top:-15px;}
	.rewarditem img.swipeimage{width:380px;height:198px;}
	
	/* -------- Section Seven -------- */
	section.seven{padding:125px 25px 50px 25px;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:50px 25px 50px 25px;}
	.eight-left h3, .eight-right h3{font-size:26px;line-height:34px;}
}

@media screen and (max-width: 420px) {
	/* -------- Header -------- */
	header.main{height:120px;}
	header.main .logo{width:100%;margin-bottom:10px;float:none;}
	header.main .logo a{width:140px;margin:0 auto;}
	nav.menu{text-align:center;width:100%;}
	nav.menu a.whitebtn{margin-left:0 !important;}
	nav.menu .close{top:-42px;}
	nav.menu a{float:none;}
	.menuwrap{width:100%;}
	
	/* -------- Section One -------- */
	section.one{padding:150px 20px 200px 20px;}
	section.one h1{font-size:50px;}
	section.one .intro{font-size:20px;line-height:28px;}
	
	.linetop{top:152px;}
	.linebottom{top:191px;}
	.linemid{top:166px;}
	
	/* -------- Section Two -------- */
	section.two{padding:0 20px 0 20px;}
	
	/* -------- Section Three -------- */
	.txt-3-wrap{padding:0 20px;}
	section.three h2{font-size:34px;}
	section.three h2 span{font-size:26px;padding:16px 0 0 0;top:-4px;width:60px;height:60px;}
	section.three p{font-size:22px;line-height:32px;text-indent:50px;}
	section.three p::before{top:11px;width:15px;height:15px}
	
	/* -------- Section Four -------- */
	section.four{padding:0 20px 125px 20px;}
	
	/* -------- Section Five -------- */
	section.five{padding:0 20px;}
	section.five h2{font-size:34px;}
	section.five p{font-size:22px;line-height:32px;text-indent:50px;}
	section.five p::before{top:11px;width:15px;height:15px}
	
	/* -------- Section Six -------- */
	section.six{padding:100px 20px;}
	.rewarditem h2{font-size:32px;line-height:32px;margin:0 0 10px 30px;letter-spacing:-1px;}
	.rewarditem h2 small{top:-12px;font-size:15px;letter-spacing:0;}
	.rewarditem p{margin:0 0 0 30px;}
	.reward-desc::before{font-size:15px;}
	.rewarditem img.swipeimage{width:280px;height:146px;}
	
	/* -------- Section Seven -------- */
	section.seven{padding:125px 20px 50px 20px;}
	.seven-left h3{font-size:26px;line-height:34px;}
	
	/* -------- Section Eight -------- */
	section.eight{padding:50px 20px 20px 20px;}
	.eight-left h3, .eight-right h3{font-size:22px;line-height:30px;}
	.eight-left p, .eight-right p{font-size:15px;line-height:18px;}
	
	/* -------- Test Area -------- */
	.testing-wrap{padding:150px 20px 0 20px;}
	.fontstyle, .testing-filter select option, .testing-filter .custom-select-sml {max-width:180px;}
	.test-area .cnt{padding:40px 0;}
}