@media screen and (max-width: 1279px){
	.container{max-width: 768px; padding: 0 30px;}

	header img{position: relative; top: -15px}

	#promo .flex{justify-content: center;}
	#promo .image{width: 100%; left: 0;}
	#promo .image img{margin: 0 auto;}
	#promo .image.image1{order: 0;}
	#promo .image.image2{width: 310px;}


	#get h2{display: none;}
	#get .data{width: 100%;}
	#get .data ul{margin-left: 80px; margin-top: 160px}
	#get .data ul li{font-size: 42px}
	#get .data .image{max-width: 150px}


	#products{padding: 50px 30px 1px;}
	#products h2{display: block; text-align: center; color: #F2FF00; font-size: 32px; font-family: 'Joyride STD'; text-transform: uppercase; margin-bottom: 10px;}
	#products h2 span{display: block; font-size: 52px; color: #EF28C1; font-family: 'Early Man';}
	#products .item .title{font-size: 26px;}
	#products .item li{font-size: 20px}


	#cali__made{padding: 40px 0 140px;}
	#cali__made .data .image{width: 220px; left: -120px; top: -30px;}
	#cali__made .data:after{display: none;}
	#cali__made .data{padding: 5px 15px 5px 88px; border-width: 3px; border-radius: 25px; justify-content: flex-end; max-width: 300px; margin: 0 auto;}
	#cali__made .data .text h2{font-size: 80px;}
	#cali__made .data .text h2 span{font-size: 46px; margin-top: -5px}
	#cali__made .data .right{position: absolute; bottom: -100px; left: -30px; margin: 0; max-width: 1000%; width: 500%; left: calc(-250% + 150px)}
	#cali__made .data .right h3{text-align: center; font-size: 30px; padding: 5px; line-height: normal; background: #0971CE}
	#cali__made .data .right h3 span{display: inline; font-size: 30px; padding: 5px; line-height: normal;}
	#cali__made .data .right h3 br{display: none;}


	.grid{grid-template-columns: repeat(2, 1fr); gap: 17px}


	#products__all{padding: 70px 0 0;}


	#advantages h2{margin: 0 auto 30px; font-size: 60px; max-width: 800px}


	#quality{padding: 15px 0 30px;}
	#quality h2{font-size: 50px; padding-top: 15px}
	#quality .flex{gap: 50px}
	#quality .flex img{max-height: 70px}


	.crystalimage1{top: -40px; left: -30px;}
	.crystalimage2{top: -40px; right: 20px}
	.crystalimage3{top: 130px; left: 30px}
	.crystalimage4{top: 510px; right: 60px}
	.crystalimage5{top: 610px; right: 40px}
	.crystalimage6{left: -40px}
	.crystalimage14{width: 300px; top: 0;}
	.crystalimage7{left: 400px;}
	.crystalimage10{display: none;}
	.crystalimage18{display: none;}
	.crystalimage19{width: 80px; top: -40px; left: calc(50% - 100px)}
	.crystalimage20{width: 70px; top: -40px; left: calc(50% + 10px)}
	.crystalimage21{width: 100px; top: 130px; left: calc(50% - 130px)}
	.crystalimage22{top: 125px; left: calc(50% + 10px)}
	.crystalimage25{right: -20px}
	.crystalimage26{right: 100px}
	.crystalimage27{top: 730px; left: calc(50% - 130px); width: 170px}


	#advantages h2{margin-bottom: 100px; position: relative; top: 20px;}

	#promo .image.image2 img{max-width: 100%;}
}


@media screen and (max-width: 767px){
	.container{max-width: 364px}

	#parallax{top: 0; height: 100%;}
	#parallax img{display: none;}
	#parallax img.mobile{display: block; width: 442px; max-width: 1000%; left: calc(50% - 221px); position: absolute; top: 66px}

	.crystals{display: none;}
	.crystals__mobile{display: block;}


	header img{position: relative; top: 0; left: 10px}
	header{padding: 28px 0 20px;}
	header .logo img{max-width: 210px;}


	#promo .flex{align-items: center;}
	#promo .image.image1 img{max-width: 296px; left: -7px; position: relative;}
	#promo .image.image1{margin-bottom: -10px}
	#promo h1{max-width: 160px; font-size: 79px;}
	#promo h1 span i{font-size: 77px}
	#promo h1 strong{font-size: 68px; margin-top: -10px; display: block; line-height: 1}
	#promo h1 strong i{font-size: 99px}
	#promo h2{font-size: 22px;}
	#promo h2 span{font-size: 33px;}
	#promo h2{max-width: 160px; display: block; margin-top: -10px}
	#promo h2:after{height: 4px; top: 4px;}
	#promo .text{top: 0;}
	#promo .image.image2{width: 180px; position: relative; top: 10px; right: 0;}


	#get{padding: 0; margin: 0; height: 330px; margin: -20px 0 0;}
	#get .data{position: relative; left: -45px}
	#get .data .image{width: 90px}
	#get .data ul{margin: 100px 0 0 55px;}
	#get .data ul li{padding: 7px 17px 7px 60px; font-size: 22px; margin-bottom: 7px;}


	#products{padding: 10px 30px 0;}
	#products .container{padding: 30px;}
	#products img{display: none;}
	#products img.mobile{display: block; margin: 0 auto 20px; position: relative; left: -10px}
	#products .item .title{font-size: 14px; margin-bottom: 9px;}
	#products .item li{font-size: 14px; margin: 0 auto 14px; max-width: 74px}
	#products br{display: block;}


	#cali__made{padding-bottom: 125px}
	#cali__made .data{max-width: 284px; left: 20px; padding: 1px 15px 1px 88px}
	#cali__made .data .right{left: calc(-250% + 120px); bottom: -80px}
	#cali__made .data .right h3{padding: 5px 5px 2px}

	.grid{grid-template-columns: repeat(1, 1fr);}


	#advantages .container{padding: 0}
	#advantages h2{font-size: 50px; margin-bottom: 90px; position: relative; top: 17px}
	#advantages h2 span{display: block; font-size: 107px; line-height: 1; margin-top: -12px}
	#advantages h2 strong{display: block; font-size: 75px; line-height: 0.8; margin-top: -8px}
	#advantages .item{padding: 12px 45px; border-radius: 24px;}
	#advantages .item:nth-child(1){padding: 12px 20px 12px 48px}
	#advantages .item .title{margin-bottom: 10px; font-size: 22px;}
	#advantages .item p{font-size: 12px; line-height: 120%;}
	#advantages .item br{display: none;}
	#advantages .item span{font-size: 60px;}
	#advantages .item:nth-child(1) span{left: 10px}
	#advantages .item:nth-child(2) span{left: calc(100% - 35px)}
	#advantages .item:nth-child(3) span{left: 10px}
	#advantages .item:nth-child(4) span{left: calc(100% - 35px)}
	#advantages .item:nth-child(2),#advantages .item:nth-child(4){text-align: right;}
	#advantages .item:nth-child(4) .title{padding-left: 15%;}


	#products__all img{display: none;}
	#products__all img.mobile{display: block; left: -10px}
	#products__all{padding-top: 45px;}


	#quality{text-align: center; padding: 15px 20px 30px;}
	#quality .container{padding: 0}
	#quality h2{display: inline-block; padding: 8px 13px 6px; font-size: 26px; line-height: 94%; margin-bottom: 13px; line-height: normal;}
	#quality .flex{gap: 0; justify-content: space-between; align-items: center;}
	#quality .flex img{max-height: 100px}
	#quality .flex img:nth-child(1){height: 55px;}
	#quality .flex img:nth-child(2){height: 37px;}
	#quality .flex img:nth-child(3){height: 39px;}
	#quality .flex img:nth-child(4){height: 41px;}
	#quality .flex img:nth-child(5){height: 39px;}
}


@media screen and (max-width: 424px){
	.container{width: 320px;}


	#promo .image.image1{margin-bottom: 0;}
	#promo .container{padding: 0}
	#promo .image.image2{width: 140px; left: 0px; position: relative;}


	#get{margin: 0; position: relative; top: 10px}
	#get .data ul{margin-top: 120px}
	#get .data ul li{padding-left: 50px; font-size: 20px}
	#get .container{left: 0}
	#get .data{left: -50px}



	#products h2{font-size: 24px}
	#products h2 span{font-size: 40px}

	#quality h2{font-size: 24px; padding-bottom: 2px}

	#cali__made .data .right{left: calc(-250% + 110px);}

	#cali__made .data .image{width: 200px; left: -105px; top: -34px}
	#cali__made .data{border-radius: 0 25px 25px 0;}
	#cali__made .data .text h2{font-size: 70px}
	#cali__made .data .text h2 span{font-size: 39px}


	#products .container{padding: 30px 15px;}


	.crystalimage_mobile8{left: calc(50% - 210px);}
}