@media screen and (min-width: 900px) {
	h1, h2, h3, h4, a, p{
		color: #333333;
	}
	p{
		text-align: justify;
	}
	main{
		letter-spacing: 0;
	}
	body{
		overflow: hidden;
		position: relative;
	}



	table{
		border-collapse: collapse;
	}
	th{
		text-align: center;
	}
	td{
		text-align: center;
	}
	.gr{
		width: 150px;
	}

	#background-thing{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		opacity: 1;
		pointer-events: none;
		display: block;
	}
	.background-logo-1{
		border: solid 3vw #aaaaaa;
		width: 10vw;
		height: 10vw;
		border-radius: 15vw;
		opacity: .1;
		position: absolute;
		top: 20vw;
		left: 40vw;
	}
	.background-logo-2{
		border: solid 1.5vw #aaaaaa;
		width: 10vw;
		height: 10vw;
		border-radius: 1.5vw;
		opacity: .1;
		position: absolute;
		top: 10vw;
		left: 10vw;
	}
	.background-logo-3{
		border: solid 5vw #aaaaaa;
		border-bottom: solid 5vw transparent;
		width: 9vw;
		height: 9vw;
		border-radius: 15vw;
		opacity: 0.1;
		position: absolute;
		top: 5vw;
		left: 80vw;
		transform: rotate(45deg);
	}
	.background-logo-3::before{
		content: "";
		width: 5vw;
		height: 5vw;
		background-color: #aaaaaa;
		border-radius: 5vw;
		position: absolute;
		top: 7vw;
		left: -2.9vw;
	}
	.background-logo-3::after{
		content: "";
		width: 5vw;
		height: 5vw;
		background-color: #aaaaaa;
		border-radius: 5vw;
		position: absolute;
		top: 7vw;
		right: -2.9vw;
	}
	.background-logo-4{
		border: solid 1vw #aaaaaa;
		width: 2.5vw;
		height: 2.5vw;
		border-radius: 45vw;
		opacity: .1;
		position: absolute;
		top: 40vw;
		right: 20vw;
	}
	.background-logo-5{
		border: solid 6vw #aaaaaa;
		width: 6vw;
		height: 6vw;
		border-radius: 45vw;
		opacity: .1;
		position: absolute;
		top: 35vw;
		left: 5vw;
	}
	.background-logo-6{
		border: solid 2vw #aaaaaa;
		width: 12vw;
		height: 12vw;
		border-radius: 15vw;
		opacity: 0.1;
		position: absolute;
		top: 50vw;
		left: 35vw;
	}
	.background-logo-7{
		border: solid 1.5vw #aaaaaa;
		width: 6vw;
		height: 17vw;
		border-radius: 1.5vw;
		opacity: 0.1;
		position: absolute;
		top: 50vw;
		left: 90vw;
	}
	.background-logo-8{
		border: solid 2vw #aaaaaa;
		width: 10vw;
		height: 15vw;
		border-radius: 11vw / 15vw;
		opacity: 0.1;
		position: absolute;
		top: -5vw;
		left: 50vw;
	}
	.background-logo-9{
		border-top: solid 7.5vw #aaa!important;
		border: solid 7.5vw transparent;
		width: 20vw;
		height: 20vw;
		border-radius: 25vw;
		opacity: 0.1;
		position: absolute;
		top: 20vw;
		left: 40vw;
	}
	.background-logo-10{
		width: 18vw;
		height: 18vw;
		border-radius: 10vw;
		opacity: 0.1;
		position: absolute;
		top: 10vw;
		left: 10vw;
		transform: rotate(15deg);
		background: #aaa;
	}
	.background-logo-10::after{
		content: "";
		width: 8vw;
		height: 8vw;
		border-radius: 10vw;
		position: absolute;
		background: #fff;
		top: 5vw;
		left: 5vw;
		box-shadow: 6.5vw 0 0 -2.5vw #fff,
					-6.5vw 0 0 -2.5vw #fff,
					0 6.5vw 0 -2.5vw #fff,
					0 -6.5vw 0 -2.5vw #fff;
	}
	.background-logo-11{
		border-top: solid 12.5vw #aaa!important;
		border: solid 7.5vw transparent;
		width: 7.5vw;
		height: 20vw;
		border-radius: 1vw;
		opacity: 0.1;
		position: absolute;
		top: 45vw;
		right: 15vw;
	}
	.background-logo-12{
		width: 20vw;
		height: 7.5vw;
		opacity: 0.1;
		position: absolute;
		top: 7vw;
		right: -2.9vw;
		background: #aaa;
		border-radius: 1vw;
	}
	.background-logo-12::before{
		content: "";
		width: 7.5vw;
		height: 15vw;
		position: absolute;
		top: 0;
		left: 6.25vw;
		background: #aaa;
		border-radius: 1vw;
	}
	.background-logo-13{
		border-top: solid 2.5vw #aaa;
		width: 15vw;
		height: 10vw;
		opacity: 0.1;
		position: absolute;
		top: 40vw;
		left: 10vw;
		transform: scale(1.5, 1);
		background: #aaa;
		border-radius: 25vw 25vw 0 0;
	}
	.background-logo-14{
		width: 15vw;
		height: 15vw;
		opacity: 0.1;
		position: absolute;
		top: 20vw;
		left: 40vw;
		background-color: #aaaaaa;
		border-radius: 15vw;
	}
	.background-logo-15{
		width: 15vw;
		height: 3.5vw;
		background-color: #aaaaaa;
		border-radius: 1.5vw;
		opacity: 0.1;
		position: absolute;
		top: 10vw;
		left: 10vw;
		transform: rotate(45deg);
	}
	.background-logo-15::before{
		content: "";
		width: 3.5vw;
		height: 15vw;
		background-color: #aaaaaa;
		border-radius: 2.5vw;
		position: absolute;
		top: 0vw;
		left: 0vw;
	}
	.background-logo-16{
		width: 15vw;
		height: 2.5vw;
		background-color: #aaaaaa;
		border-radius: 1.5vw;
		opacity: 0.1;
		position: absolute;
		top: 15vw;
		left: 80vw;
	}
	.background-logo-16::before{
		content: "";
		width: 2.5vw;
		height: 10vw;
		background-color: #aaaaaa;
		border-radius: 2.5vw;
		position: absolute;
		top: -7.5vw;
		left: 0vw;
	}
	.background-logo-16::after{
		content: "";
		width: 2.5vw;
		height: 10vw;
		background-color: #aaaaaa;
		border-radius: 2.5vw;
		position: absolute;
		top: -7.5vw;
		left: 12.5vw;
	}
	.background-logo-17{
		width: 20vw;
		height: 5vw;
		opacity: 0.1;
		position: absolute;
		top: 40vw;
		right: 5vw;
		background-color: #aaaaaa;
		border-radius: 1.5vw;
	}
	.background-logo-18{
		width: 14.435vw;
		height: 8.335vw;
		opacity: 0.1;
		position: absolute;
		top: 35vw;
		left: 5vw;
		transform: rotate(90deg);
		background-color: #aaaaaa;
		border-radius: .25vw;
	}
	.background-logo-18::before{
		content: "";
		width: 14.435vw;
		height: 8.335vw;
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(60deg);
		background-color: #aaaaaa;
		border-radius: .25vw;
	}
	.background-logo-18::after{
		content: "";
		width: 14.435vw;
		height: 8.335vw;
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(-60deg);
		background-color: #aaaaaa;
		border-radius: .25vw;
	}
	.background-logo-19{
		width: 15vw;
		height: 15vw;
		opacity: 0.1;
		position: absolute;
		top: 50vw;
		left: 45vw;
		background-color: #aaaaaa;
		border-radius: 1.5vw;
	}
	.background-logo-20{
		border: solid 1vw #aaaaaa;
		width: 15vw;
		height: 17vw;
		border-radius: 1.5vw;
		opacity: .1;
		position: fixed;
		top: 30vw;
		left: 20vw;
	}
	.background-logo-21{
		border: solid 1vw #aaaaaa;
		width: 30vw;
		height: 2.5vw;
		border-radius: 5vw;
		opacity: .1;
		position: fixed;
		top: 10vw;
		left: 10vw;
		background-color: #aaaaaa;
	}
	.background-logo-22{
		border: solid 2vw #aaaaaa;
		width: 15vw;
		height: 15vw;
		border-radius: 15vw;
		opacity: 0.1;
		position: fixed;
		top: 5vw;
		left: 80vw;
	}
	.background-logo-22::before{
		content: "";
		border: solid 2vw #aaaaaa;
		width: 8vw;
		height: 8vw;
		border-radius: 15vw;
		position: absolute;
		top: 1.5vw;
		left: 1.5vw;
	}
	.background-logo-22::after{
		content: "";
		border: solid 2vw #aaaaaa;
		width: 1vw;
		height: 1vw;
		border-radius: 15vw;
		position: absolute;
		top: 5vw;
		left: 5vw;
		background-color: #aaaaaa;
	}
	.background-logo-23{
		border: solid 1vw #aaaaaa;
		width: 15vw;
		height: 15vw;
		border-radius: 15vw;
		opacity: .1;
		position: fixed;
		top: 40vw;
		right: 20vw;
	}
	.background-logo-23::before{
		content: "";
		border: solid 1vw #aaaaaa;
		width: 11.5vw;
		height: 11.5vw;
		border-radius: 30vw;
		position: absolute;
		top: 0.75vw;
		left: 0.75vw;
	}
	.background-logo-23::after{
		content: "";
		border: solid 1vw #aaaaaa;
		width: 8vw;
		height: 8vw;
		border-radius: 30vw;
		position: absolute;
		top: 2.5vw;
		left: 2.5vw;
	}
	.background-logo-24{
		width: 25vw;
		height: .5vw;
		border-radius: 2.5vw;
		opacity: .1;
		position: fixed;
		top: 50vw;
		left: 20vw;
		background: #aaa;
	}
	.background-logo-25{
		width: 25vw;
		height: .5vw;
		border-radius: 2.5vw;
		opacity: .1;
		position: fixed;
		top: 20vw;
		left: 80vw;
		background: #aaa;
	}
	.background-logo-26{
		width: 7.5vw;
		height: 7.5vw;
		opacity: 0.1;
		border-radius: 7.5vw;
		position: absolute;
		transform: rotate(90deg);
		background-color: #aaaaaa;
		box-shadow: 7.5vw 0 0 -.5vw #aaaaaa, -7.5vw 0 0 -.5vw #aaaaaa, 3.75vw 6.5vw 0 -.5vw #aaaaaa, -3.75vw -6.5vw 0 -.5vw #aaaaaa, -3.75vw 6.5vw 0 -.5vw #aaaaaa, 3.75vw -6.5vw 0 -.5vw #aaaaaa;
		position: fixed;
		top: 15vw;
		left: 20vw;
	}
	.background-logo-27{
		width: 20vw;
		height: 20vw;
		opacity: 0.1;
		position: fixed;
		top: 35vw;
		left: 65vw;
	}
	.background-logo-27::before{
		content: "";
		border: solid 2vw #aaaaaa;
		border-top: solid 2vw transparent;
		border-left: solid 2vw transparent;
		width: 12vw;
		height: 12vw;
		border-radius: 30vw;
		position: absolute;
		top: 5vw;
		left: 3vw;
		transform: rotate(45deg);
	}
	.background-logo-27::after{
		content: "";
		border: solid 2vw #aaaaaa;
		border-bottom: solid 2vw transparent;
		border-right: solid 2vw transparent;
		width: 12vw;
		height: 12vw;
		border-radius: 30vw;
		position: absolute;
		top: 3vw;
		left: 3vw;
		transform: rotate(45deg);
	}


	#mainpage{
		width: 100vw;
		padding: 4.5vw 0 0 0;
		z-index: 5;
	}

	#contactbutton{
		background: linear-gradient(150deg, #e83719 0%, #FBA971 100%);
		border-radius: 25vw;
		width: 25vw;
		height: 3.8vw;
		box-shadow: 0.8vw 0.8vw 2vw #333333;
		cursor: pointer;
		transition: all 0.5s;
		transform: translate(0, 0);
		opacity: 1;
		animation: opacity 1s backwards;
		animation-delay: .2s;
		margin: 1vw 37.5vw;
	}
	#contactbutton:hover{
		transform: translate(0, -0.5vw);
	}
	#contactbutton img{
		width: 3.5vw;
		position: absolute;
		top: 0.1vw;
		left: 2.2vw;
	}
	#contactbutton p{
		position: absolute;
		font-weight: bold;
		font-size: 1.5vw;
		color: #F1F3EC;
		top: 1.9vw;
		left: 6.1vw;
		display: block;
		width: 20vw;
		line-height: 0;
	}

	#title-page{
		margin: 12vh 0 0 0vw;
		transform: translate(0, 0);
		opacity: 1;
		animation: opacity 1s backwards;
	}
	#title-page > h2{
		font-size: 3.5vw;
		text-align: center;
	}
	#title-page > p{
		font-size: 1.2vw;
		line-height: 2vw;
		text-align: center;
		text-justify: newspaper;
		width: 50vw;
		margin: 3vw 25vw;
	}

	#specification-page{
		position: relative;
		width: 96vw;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		padding: 3vw 2vw;
	}
	.box{
		position: relative;
		border-radius: 1vw;
		transition: all 0.3s;
		width: 22vw;
		height: 38vw;
		box-shadow: 1vw 1vw 2vw #666;
		margin: 1vw;
		overflow: hidden;
		background: #fff;
	}
	.box:hover{
		transform: translate(0, -.5vw);
	}
	.box > a{
		width: 22vw;
		height: 38vw;
		position: absolute;
		left: 0;
		top: 0;
	}
	.choose-photo{
		position: relative;
		width: 22vw;
		filter: brightness(1);
		transition: filter 0.6s;
	}
	.choose-specification-1{
		width: 47vw;
		position: absolute;
		left: 0vw;
		top: 0vw;
	}
	.choose-specification-2{
		width: 31vw;
		position: absolute;
		left: 0vw;
		top: 0vw;
	}
	.box:nth-child(1){	
		animation: fall 1.2s backwards;
		animation-delay: 0.4s;
	}
	.box:nth-child(2){	
		animation: fall 1.2s backwards;
		animation-delay: 0.6s;
	}
	.box:nth-child(3){	
		animation: fall 1.2s backwards;
		animation-delay: 0.1s;
	}
	.box:nth-child(4){	
		animation: fall 1.2s backwards;
		animation-delay: 0.3s;
	}
	.box:nth-child(5){	
		animation: fall 1.2s backwards;
		animation-delay: 0.7s;
	}
	.box:nth-child(6){	
		animation: fall 1.2s backwards;
		animation-delay: 0.2s;
	}
	.box:nth-child(7){	
		animation: fall 1.2s backwards;
		animation-delay: 0.5s;
	}
	.box:nth-child(8){	
		animation: fall 1.2s backwards;
		animation-delay: 0.8s;
	}
	.choose-logo{
		width: 3vw;
		position: absolute;
		left: 1vw;
		top: 1vw;
		background-color: #333;
		border-radius: 1vw;
	}
	.gradeproword{
		font-weight: bold;
		margin: .6vw 0;
		font-size: 1.8vw;
		text-align: center;
		line-height: 2.2vw;
		width: 22vw;
		color: #333;
		text-decoration: none;
	}
	.gradeproword > span{
		font-size: 1.5vw;
		color: #666;
	}

	.learn-more{
		width: 14vw;
		height: 2.5vw;
		margin: 1vw 3.8vw;
		border: solid .2vw #333;
		border-radius: 5vw;
		line-height: 2.5vw;
		text-align: center;
		font-size: 1.3vw;
		font-weight: bold;
	}
	.quote{
		width: 14.4vw;
		height: 3vw;
		border-radius: 5vw;
		transform: translate(0, 0);
		line-height: 3vw;
		text-align: center;
		font-size: 1.3vw;
		font-weight: bold;
		overflow: hidden;
		box-shadow: 0.3vw 0.3vw 1.5vw #333333;
		z-index: 1;
		cursor: pointer;
		transition: all .3s;
		position: absolute;
		top: 32.5vw;
		left: 3.8vw;
	}	
	.quote:hover{
		transform: translate(0, -.3vw);
	}
	.quote::before{
		content: "Get A Quote Now";
		width: 14.4vw;
		height: 3vw; 
		line-height: 3vw;
		color: #fff;
		border-radius: 50vw;
		background: linear-gradient(150deg, #e83719 0%, #FBA971 100%);
		position: absolute;
		left: 0vw;
		top: 0vw;
	}
	.spec-ul{
		width: 22vw;
		color: #666;
	}
	.spec-ul > li{
		width: 22vw;
		text-align: center;
		font-size: 1vw;
		line-height: 1.8vw;
	}







    #breadol{
        width: 100vw;
        display: flex;
        justify-content: center;
        align-content: center;
        list-style: none;
        padding: 1vw 0 0 0;
        margin: 1vw .2vw;
        z-index: 1;
        animation: down backwards 1s;
        animation-delay: .2s;
    }
    #breadol li{
        font-size: 1vw;
        color: #333;
        line-height: 1vw;
    }
    #breadol li a{
        display: block;
        color: #333;
        height: 1vw;
        padding-right: 1.5vw;
        margin-right: 1vw;
        font-weight: bold;
        position: relative;
    }
    #breadol li a::before{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: solid .5vw transparent;
        border-left: solid .5vw #333;
        margin: 0;
        position: absolute;
        right: -.5vw; 
        transform: scale(1, 0.7);
        top: 0;
    }











	#gradespage{
		position: relative;
	    left: 50%;
	    transform: translate(-50%, 0);
	    transition: all 0.5s;
		height: 75vw;
		width: 100vw;
	}
	#gradespage1{
		height: 100vh;
		width: 45vw;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	#gradespage1 div{
		height: 23vw;
		width: 45vw;
		position: relative;
		top: 50vh;
		transform: translate(0, -50%);
	}
	#gradespage1 h2{
		font-size: 3vw;
		left: 13vw;
		position: relative;
		color: #333333;	
		line-height: 3vw;
		margin: 0;
		padding: 0 0 2.5vw 0;
	}
	#gradespage1 ul{
		font-size: 1.2vw;
		left: 13vw;
		position: relative;
		color: #333333;	
		line-height: 0.8vw;
		font-weight: bold;
		top: 2vw;
		width: 25vw;
	}
	#gradespage1 li:hover .grhr{
		width: 2vw;
	}
	#gradespage1 li:hover .grp{
		transform: translate(3vw, -1.6vw);
	}
	#gradespage1 a{
		color: #333333;	
	}
	.grhr{
		width: 1vw;
		display: block;
		height: 0.2vw;
		background-color: #333333;
		border-style: none;
		margin: 0;
		border-radius: 5vw;
		transition: all 0.5s;
		text-align: left;
	}
	.grp{
		transform: translate(2vw, -1.6vw);
		transition: all 0.5s;
		padding: 1vw 0;
	}


	#sspage{
		width: 100%;
		position: absolute;
		left: 0vw;
		top: 0;
		overflow-x: hidden;
	}
	#rightbutton1{
		position: absolute;
		height: 59vw;
		top: 10vw;
		width: 7vw;
		left: 93vw;
		z-index: 3;
		cursor: pointer;
	}
	#leftbutton1{
		position: absolute;
		height: 59vw;
		top: 10vw;
		width: 7vw;
		z-index: 3;
		cursor: pointer;
	}
	#gradeframe-1{
		display: flex;
		position: relative;
	    transition: all 0.5s;
	    width: 500vw;
	    overflow: hidden;
		margin: 2vw 0;
		padding-top: 5vw;
		padding-bottom: 5vw;
		left: 41vw;
		z-index: 2;
	}
	#gradeframe1{
		width: 41vw;	
	}
	#gradeframe11{
		width: 82vw;	
	}
	#gradeframe22{
		width: 82vw;	
	}
	.gradeframe1{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #eeeeee;
		margin: 0 1vw;
		padding: 3vw 0 1vw 0;
		border-radius: 2vw;
		position: relative;
	    left: 8vw;
	    transition: all 0.5s;
	    align-items: center;
		box-shadow: 1vw 1vw 2vw 0.1vw #666666;
		height: 55vw;
	}
	.chemeicalp{
		width: 100%;
		text-align: center;
		font-size: 0.9vw;
		line-height: 0;
		color: white;
		padding-top: 0.7vw;
		margin: 0;
	}

	.gradebar{
		width: 36.9vw;
		margin: 2% 1%;
		transition: all 0.3s;
	}
	.gradename{
		display: block;
		font-size: 1.6vw;
		font-weight: bold;
		width: 6vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -1vw;
	}
	.gradename2{
		display: block;
		font-size: 1.4vw;
		font-weight: bold;
		width: 6vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -1vw;
	}
	.gradename3{
		display: block;
		font-size: 1.15vw;
		font-weight: bold;
		width: 6vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -1vw;
	}
	.chemical{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		width: 30vw;
		height: 1.3vw;
		top: -0.7vw;
		left: 6vw;
		background: linear-gradient(90deg, #999999, #aaaaaa, transparent);
		padding: 0;
		margin: 0;
	}
	.chemical div{
		border-style: none;
		height: 1.3vw;
		padding: 0;
		margin: 0;
	}
	.chemical2{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		width: 30vw;
		height: 2.6vw;
		top: -0.7vw;
		left: 6vw;
		background: linear-gradient(90deg, #999999, #aaaaaa, transparent);
		padding: 0;
		margin: 0;
	}
	.chemical2 div{
		border-style: none;
		height: 1.3vw;
		padding: 0;
		margin: 0;
	}
	.chemical::after{
		content: "";
		position: absolute;
		top: 1vw;
		left: -6.8vw;
		background-color: #dddddd;
		border-radius: 2vw;
		padding: 0.5vw;
		width: 5vw;
		height: 0.5vw;
		font-size: 0.9vw;
		text-align: center;
		line-height: 0.6vw;
		color: #666666;
	}
	.chemical2::after{
		content: "";
		position: absolute;
		top: 1vw;
		left: -6.8vw;
		background-color: #dddddd;
		border-radius: 2vw;
		padding: 0.5vw;
		width: 5vw;
		height: 0.5vw;
		font-size: 0.9vw;
		text-align: center;
		line-height: 0.6vw;
		color: #666666;
	}



	#productspage{
		width: 100vw;
		padding: 0 0 5vw 0;
	}
	#productswords{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: 60vw;
		height: 20vw;
		margin: 1vw 20vw;
		border-radius: 2vw;
		justify-content: center;
		align-content: center;
	}
	#productswords > div{
		width: 6vw;
		margin: 0 1vw;
	}
	#productswords > div > a{
		width: 6vw;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		transform: translate(0, 0);
		transition: transform .5s;
	}
	#productswords > div > a:hover{
		transform: translate(0, -.5vw);
	}
	#productswords h2{
		font-size: 3vw;
		width: 100%;
		color: #333333;
		text-align: center;
		height: 6vw;
	}
	.more-logo{
		width: 3.5vw;
	}
	.logosword{
		text-align: center;
		font-size: 1.2vw;
		line-height: 1.5vw;
		font-weight: bold;
		width: 6vw;
		padding: 0.4vw 0;
	}


	.fold1{
	    max-height: 45vw;
	    transition: max-height 1s;
	}
	.fold2{
	    max-height: 500vw;
	}
	.table-container2{
		background-color: rgba(255, 255, 255, 0.9);
		width: 95vw;
		margin: 2vw 2.5vw;
		padding: 5vw 0;
		border-radius: 2vw;
	}
	#schpage{
		background-color: #333333;
		background-image: url(/image/products/technical-sheet.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		overflow: hidden;
		position: relative;
		padding: 6vw 0;
	}
	#schpage h2{
		width: 80vw;
		font-size: 3vw;
		text-align: center;
		color: white;
		margin: 0;
		padding: 4vw 0 2vw 0;
		margin: 0 10vw;
		line-height: 5vw;
	}
	#schpage caption{
		width: 80vw;
		font-size: 1.5vw;
		text-align: center;
		color: #333;
		margin: 0;
		padding: 0 0 2vw 0;
		font-weight: bold;
	}
	#schpage th{
		font-size: 1.1vw;
		padding: 1vw 0;
		border: none;
		border-top: solid .1vw #333;
		border-bottom: solid .1vw #333;
		text-align: center;
		margin: 0;
		position: relative;
		z-index: 1;
	}
	#schpage td{
		font-size: 1vw;
		padding: 1vw 0;
		border: none;
		text-align: center;
		margin: 0;
		position: relative;
		z-index: 1;
	}
	#schpage tr{
		border: none;
		margin: 0;
		padding: 0;
		margin: 0;
		position: relative;
		height: 3vw;
	}
	#schpage tr::before{
		content: "";
		position: absolute;
		left: 0;
		top: .3vw;
		width: 90vw;
		height: 2.5vw;
		background-color: #ddd;
		border-radius: 1vw;
		z-index: 0;
		opacity: 0;
		transition: opacity .1s;
	}
	#schpage tr:hover::before{
		opacity: 1;
	}
	.head-tr:hover::before{
		opacity: 0!important;
	}
	#schtable{
		color: #333;
		border: none;
		border-top: solid .15vw #333;
		border-bottom: solid .15vw #333;
		width: 90vw;
		position: relative;
		left: 2.5vw;
	}

	#fold{
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.95) 90%, rgba(255, 255, 255, 1) 100%);
		height: 20vw;
		width: 100vw;
		cursor: pointer;
		font-size: 1.5vw;
		text-align: center;
		color: #eeeeee;
		font-weight: bold;
		transition: all 5s;
		z-index: 2;
	}
	#fold div{
		position: absolute;
		width: 10vw;
		height: 3vw;
		background: #333333;
		border-radius: 2vw;
		line-height: 2.9vw;
		left: 45vw;
		top: 11vw;
	}
	#fold2{
		display: none;
	}


}














@media screen and (max-width: 900px) {
	h2{
		text-align: left;
		font-size: 20px;
		color: #333333;
		font-weight: bold;
	}
	h3{
		font-size: 1.1rem;
		color: #333333;
	}

	a{
		color: #333333;
	}
	main p{
		color: #333333;
		text-align: justify;
	}
	main ul{
		text-align: justify;
	}

	h4{
		font-size: 17px;
		color: #333333;
	}


	table{
	  border-collapse: collapse;
	  border-style: solid;
	}
	th{
		text-align: center;
	}
	td{
		text-align: center;
		border-style: solid;
	}
	tr{
		border-style: solid;
	}



	#mainpage{
		width: 100vw;
		background-color: white;
		padding: 4.5vw 0 0 0;
		z-index: 5;
	}

	#contactbutton{
		background: linear-gradient(150deg, #e83719 0%, #FBA971 100%);
		border-radius: 75vw;
		width: 75vw;
		height: 11.4vw;
		box-shadow: 2.4vw 2.4vw 6vw #333333;
		cursor: pointer;
		transition: all 0.5s;
		transform: translate(0, 0);
		opacity: 1;
		animation: opacity 1s backwards;
		animation-delay: .2s;
		margin: 6vw 12.5vw;
	}
	#contactbutton:hover{
		transform: translate(0, -0.5vw);
	}
	#contactbutton img{
		width: 10.5vw;
		position: absolute;
		top: 0.3vw;
		left: 6.6vw;
	}
	#contactbutton p{
		position: absolute;
		font-weight: bold;
		font-size: 4.5vw;
		color: #F1F3EC;
		top: 1.2vw;
		left: 18.3vw;
		display: block;
		width: 60vw;
		line-height: 0;
	}

	#title-page{
		margin: 12vh 0 0 0vw;
		transform: translate(0, 0);
		opacity: 1;
		animation: opacity 1s backwards;
	}
	#title-page > h2{
		width: 80vw;
		font-size: 10vw;
		text-align: center;
		margin: 5vw 10vw;
	}
	#title-page > p{
		font-size: 3.8vw;
		line-height: 6vw;
		text-align: center;
		text-justify: newspaper;
		width: 80vw;
		margin: 10vw 10vw;
	}
    #breadol{
        width: 100vw;
        display: flex;
        justify-content: center;
        align-content: center;
        list-style: none;
        position: relative;
        padding: 1vw 0;
        margin: 0;
        z-index: 1;
    }
    #breadol li{
        font-size: 3vw;
        color: #333;
        line-height: 3vw;
    }
    #breadol li a{
        display: block;
        color: #333;
        height: 3vw;
        padding-right: 4.5vw;
        margin-right: 3vw;
        font-weight: bold;
        position: relative;
    }
    #breadol li a::before{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: solid 1.5vw transparent;
        border-left: solid 1.5vw #333;
        margin: 0;
        position: absolute;
        right: -1.5vw; 
        transform: scale(1, 0.7);
        top: 0;
    }

	#specification-page{
		position: relative;
		width: 100vw;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		padding: 5vw 0;
	}
	.box{
		position: relative;
		border-radius: 3vw;
		transition: all 0.3s;
		width: 44vw;
		box-shadow: 2vw 2vw 4vw #666;
		margin: 2vw;
		overflow: hidden;
		background: #fff;
	}
	.box > a{
		width: 44vw;
		position: relative;
		display: block;
		padding-bottom: 3vw;
	}
	.choose-photo{
		position: relative;
		width: 44vw;
		filter: brightness(1);
		transition: filter 0.6s;
	}
	.box:nth-child(1){	
		animation: fall 1.2s backwards;
		animation-delay: 0.4s;
	}
	.box:nth-child(2){	
		animation: fall 1.2s backwards;
		animation-delay: 0.6s;
	}
	.box:nth-child(3){	
		animation: fall 1.2s backwards;
		animation-delay: 0.1s;
	}
	.box:nth-child(4){	
		animation: fall 1.2s backwards;
		animation-delay: 0.3s;
	}
	.box:nth-child(5){	
		animation: fall 1.2s backwards;
		animation-delay: 0.7s;
	}
	.box:nth-child(6){	
		animation: fall 1.2s backwards;
		animation-delay: 0.2s;
	}
	.box:nth-child(7){	
		animation: fall 1.2s backwards;
		animation-delay: 0.5s;
	}
	.box:nth-child(8){	
		animation: fall 1.2s backwards;
		animation-delay: 0.8s;
	}
	.choose-logo{
		width: 9vw;
		position: absolute;
		left: 3vw;
		top: 3vw;
		background-color: #333;
		border-radius: 3vw;
	}
	.gradeproword{
		font-weight: bold;
		margin: 3vw 2vw;
		font-size: 5.4vw;
		text-align: center;
		line-height: 6.6vw;
		width: 40vw;
		color: #333;
		text-decoration: none;
	}
	.gradeproword > span{
		font-size: 4.5vw;
		color: #666;
	}

	.learn-more{
		width: 34vw;
		height: 6vw;
		margin: 2vw 5vw;
		border: solid .6vw #333;
		border-radius: 10vw;
		line-height: 6vw;
		text-align: center;
		font-size: 3.6vw;
		font-weight: bold;
	}
	.quote{
		display: none;
	}	
	.spec-ul{
		display: none;
	}


	#pagepicture{
		padding: 5vw 0;
	}

	#catalogue{
		top: 5vw;
		position: relative;
	}
	#catalogueimg{
		width: 50vw;
		left: 25vw;
		top: 0vw;
		position: relative;
		box-shadow: 3vw 3vw 6vw #333333;
		border-radius: 1vw;
	}
	#cataloguea{
		width: 60vw;
		left: 20vw;
		position: relative;
		text-align: center;
		color: #333333;
		display: block;
		border-radius: 0vw;
		font-size: 3.5vw;
		padding: 5vw 0;
		font-weight: bold;
		line-height: 4.5vw;
		text-decoration: underline;
	}
	#overview{
		position: relative;
		width: 100%;
		left: 0%;
		padding-top: 10vw;
	}
	#overview h2{
		width: 80vw;
		position: relative;
		left: 10vw;
		color: #333333;
		font-size: 8vw;
	}
	#overview p{
		width: 80vw;
		position: relative;
		left: 10vw;
		color: #333333;
		font-size: 4vw;
		text-align: justify;
	}
	#overview a{
		color: #333333;
		text-decoration: underline;
	}
	#moredetail{
		padding: 0;
		margin: 0;
		position: relative;
		top: -19vw;
		left: 50%;
		opacity: 0.8;
		cursor: pointer;
	}
	#moredetail img{
		position: absolute;
		top: -2.55vw;
		left: 12vw;
		width: 2.7vw;
		transform: rotate(-90deg);
		padding: 0;
		margin: 0;
	}
	#moredetail p{
		line-height: 0;
		display: block;
		color: white;
		font-size: 3.6vw;
		font-weight: bold;
		position: absolute;
		left: -12vw;	
		margin: 0;
		padding: 0;
	}






	#productspage{
		width: 100vw;
		padding: 15vw 0;
	}
	#productswords{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		margin: 5vw 0;
		border-radius: 2vw;
		justify-content: center;
		align-content: center;
	}
	#productswords h2{
		font-size: 8vw;
		width: 100%;
		color: #333333;
		text-align: center;
		height: 12vw;
		margin: 5vw 0;
	}
	#productswords > div{
		width: 15vw;
		margin: 0 1.5vw;
	}
	#productswords > div > a{
		width: 15vw;
		display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		transform: translate(0, 0);
		transition: transform .5s;
	}
	.more-logo{
		width: 12vw;
	}
	.logosword{
		text-align: center;
		font-size: 3.8vw;
		line-height: 5vw;
		font-weight: bold;
		width: 15vw;
		padding: 1.5vw 0;
		margin: 0;
	}






















	#gradespage{
		position: relative;
	  transition: all 0.5s;
		width: 100%;
		padding: 10vw 0;
	}
	#gradespage1{
		height: 90vw;
		width: 100vw;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 1;
	}
	#gradespage1 div{
		height: 100vw;
		width: 100vw;
		position: relative;
		top: 5vw;
	}
	#gradespage1 h2{
		font-size: 8vw;
		position: relative;
		color: #333333;	
		line-height: 9vw;
		margin: 0;
		width: 80vw;
		top: 6vw;
		margin-left: 10vw;
	}
	#gradespage1 ul{
		font-size: 3.8vw;
		margin-left: 5vw;
		position: relative;
		color: #333333;	
		line-height: 5vw;
		font-weight: bold;
		top: 16vw;
		width: 90vw;
	}
	#gradespage1 a{
		color: #333333;	
	}
	.grhr{
		display: none;
	}
	.grp{
		transform: translate(6vw, -4.8vw);
		transition: all 0.5s;
	}

	#sspage{
		width: 100%;
		position: relative;
		z-index: 1;
		overflow-x: hidden;
	}
	.gradetype{
		font-weight: bold;
		top: 0;
		height: 18vw;
		background-color: #dddddd;
		width: 100%;
		text-align: center;
		border-radius: 20px 20px 0 0;
		margin-bottom: 7.5vw;
	}
	.gradetype h2, .gradetype span{
		display: block;
		width: 70%;
		position: absolute;
		left: 15%;
		top: 4.5vw;
		text-align: center;
		font-size: 4vw;
		line-height: 5vw;
		padding: 0;
		margin: 0;
	}
	#rightbutton1{
		display: none;
	}
	#leftbutton1{
		display: none;
	}
	#rightbutton2{
		position: absolute;
		height: 73vw;
		width: 7vw;
		left: 93vw;
		z-index: 1;
		cursor: pointer;
	}
	#leftbutton2{
		position: absolute;
		height: 73vw;
		width: 7vw;
		left: 0vw;
		z-index: 1;
		cursor: pointer;
	}
	#gradeframe-1-1{
		position: relative;
		width: 100vw;
		overflow-x: scroll;
		padding: 0;
		margin: 0;
		-webkit-overflow-scrolling: touch;
	}
	#gradeframe-1-1::-webkit-scrollbar{
		display: none;
	}
	#gradeframe-1{
		display: flex;
		position: relative;
	    transition: all 0.5s;
	    width: 460vw;
	    overflow-x: scroll;
	    overflow: scroll;
		-webkit-overflow-scrolling: touch;
		margin: 2vw 0;
	}
	#gradeframe1{
		width: 82vw;
	}
	#gradeframe11{
		width: 180vw;
	}
	#gradeframe22{
		width: 180vw;
	}
	.gradeframe1{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #eeeeee;
		margin: 0 1vw;
		padding-bottom: 2vw;
		border-radius: 20px;
		position: relative;
	    left: 8vw;
	    transition: all 0.5s;
		padding-top: 10vw;
	}
	.chemeicalp{
		width: 100%;
		text-align: center;
		font-size: 2.5vw;
		line-height: 0;
		color: white;
		padding-top: 2.1vw;
		margin: 0;
	}

	.gradebar{
		width: 74vw;
		margin: 2% 1%;
		transition: all 0.3s;
		height: 8vw;
	}
	.gradename{
		display: block;
		font-size: 3.7vw;
		font-weight: bold;
		width: 8vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -2vw;
	}
	.gradename2{
		display: block;
		font-size: 3vw;
		font-weight: bold;
		width: 15vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -1vw;
	}
	.gradename3{
		display: block;
		font-size: 2.3vw;
		font-weight: bold;
		width: 15vw;
		padding: 0;
		margin: 0;
		line-height: 0;
		position: relative;
		top: -1vw;
	}
	.chemical{
		display: flex;
		position: relative;
		width: 60vw;
		height: 3.9vw;
		top: -2.1vw;
		left: 14vw;
		background: linear-gradient(90deg, #999999, #aaaaaa, transparent);
		padding: 0;
		margin: 0;
	}
	.chemical div{
		border-style: none;
		height: 3.9vw;
		padding: 0;
		margin: 0;
	}
	.chemical2{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		width: 60vw;
		height: 7.8vw;
		top: -2.1vw;
		left: 14vw;
		background: linear-gradient(90deg, #999999, #aaaaaa, transparent);
		padding: 0;
		margin: 0;
	}
	.chemical2 div{
		border-style: none;
		height: 3.9vw;
		padding: 0;
		margin: 0;
	}

	.chemical2::after{
		content: "";
		position: absolute;
		top: 3vw;
		left: -14.8vw;
		background-color: #dddddd;
		border-radius: 6vw;
		padding: 1vw;
		width: 10vw;
		height: 1vw;
		font-size: 2vw;
		text-align: center;
		line-height: 1.2vw;
		color: #666666;
	}

	.chemical::after{
		content: "";
		position: absolute;
		top: 3vw;
		left: -14.8vw;
		background-color: #dddddd;
		border-radius: 6vw;
		padding: 1vw;
		width: 10vw;
		height: 1vw;
		font-size: 2vw;
		text-align: center;
		line-height: 1.2vw;
		color: #666666;
	}
	table{
	  	border-collapse: collapse;
	  	border: none;
		border-top: solid .45vw #333;
		border-bottom: solid .45vw #333;
	}
	th{
		text-align: center;
		color: #333;
	  	border: none;
		border-top: solid .3vw #333;
		border-bottom: solid .3vw #333;
	}
	td{
		text-align: center;
		border-style: none;
		color: #333;
		padding: 0 5vw;
	}
	tr{
		border: none;
	}
	.fold1{
	    max-height: 180vw;
	    transition: max-height 1s;
	}
	.fold2{
	    max-height: 1200vw;
	}
	#schpage{
		background-color: #333333;
		background-image: url(/image/products/technical-sheet.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		overflow: hidden;
		position: relative;
		overflow: hidden;
	  transition: all 1s;
	  padding-bottom: 10vw;
	}
	#schpage h2{
		width: 90vw;
		font-size: 8vw;
		line-height: 11vw;
		text-align: center;
		color: #fff;
		margin: 0 5vw;
		padding: 20vw 0 6vw 0;
		position: relative;
	}
	#schpage > div{
		padding-bottom: 6vw;
	}
	#schpage > div > h3{
		width: 100vw;
		font-size: 8.4vw;
		text-align: center;
		color: #333;
		margin: 0;
		padding-top: 10.5vw;
	}
	#schpage caption{
		width: 90vw;
		font-size: 5.4vw;
		text-align: center;
		color: #333;
		margin: 0;
		padding: 4vw 0;
		font-weight: bold;
	}
	#schpage th{
		font-size: 4vw;
		padding: 1.5vw 0;
	}
	#schpage td{
		font-size: 3.8vw;
		padding: 1.5vw 0;
	}
	.table-container2{
		width: 90vw;
		overflow: scroll;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 10vw 0;
		margin: 5vw;
		border-radius: 4vw;
		-webkit-overflow-scrolling: touch;
	}
	.table-container2::-webkit-scrollbar{
		display: none;
	}
	#schtable{
		color: white;
		width: 360vw;
		position: relative;
		margin: 0 5vw;
		padding: 0 5vw;
	}
	#delivery-table{
		color: white;
		width: 80vw;
		position: relative;
		left: 5vw;
	}
	.delivery-table{
		color: white;
		width: 80vw;
		position: relative;
		left: 5vw;
	}
	#delivery-state{
		padding-bottom: 10vw!important;
	}
	#dnote{
		height: 10vw;
	}

	#fold{
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.95) 90%, rgba(255, 255, 255, 1) 100%);
		height: 60vw;
		width: 100vw;
		cursor: pointer;
		font-size: 4.5vw;
		text-align: center;
		color: #eeeeee;
		font-weight: bold;
		transition: all 5s;
	}
	#fold div{
		position: absolute;
		width: 30vw;
		height: 9vw;
		background: linear-gradient(105deg, #535aea 0%, #5385ea 50%, #4fabde 100%);
		border-radius: 6vw;
		line-height: 8.7vw;
		left: 35vw;
		top: 45vw;
	}
	#fold2{
		display: none;
	}

}






@keyframes box{
	0%{opacity: 0; transform: translate(0, 5vw);}
	100%{opacity: 1; transform: translate(0, 0);}
}
@keyframes opacity{
	0%{opacity: 0; transform: translate(5vw, 0);}
	100%{opacity: 1; transform: translate(0, 0);}
}
@keyframes fall{
	0%{transform: scale(1.2, 1.2); opacity: 0;}
	100%{transform: scale(1, 1); opacity: 1;}
}