@media screen and (min-device-width: 1000px) {
body, main, html{
	width: 100vw;
}
input, textarea{
    outline: none;
    font-family: Arial;
}
#steel-making-background{
	opacity: 0!important;
}
#mainindex{
	width: 100vw;
	height: 508vh;
	position: relative;
	display: flex;
	padding-bottom: 5vw;
}


#mouse{
	width: 2vw;
	height: 3vw;
	border: solid 0.22vw #333333;
	border-radius: 5vw;
	position: absolute;
	left: 27vw;
	bottom: 3vh;
	opacity: 0.8;
}
#mouse::after{
	content: "";
	width: 0.3vw;
	height: 1vw;
	position: absolute;
	top: 0.2vw;
	left: 0.85vw;
	background-color: #333333;
	border-radius: 5vw;
	animation: mouse-big 2s;
	animation-iteration-count: infinite;
}


#indexintro{
	height: 100vh;
	width: 55vw;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	background-image: url(../svg/map.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#indexintro1{
	height: 25vw;
	width: 55vw;
	position: relative;
}
#indexpro{
	height: 500vh;
	width: 45vw;
	position: relative;
	transform: translate(48vw, 0);
	animation: indexpro-big 1s forwards;
	animation-delay: 0.3s;
}
#bg1 a, #bg2 a, #bg3 a, #bg4 a, #bg5 a{
	width: 45vw;
	height: 100vh;
	display: block;
}
#bg1:hover, #bg2:hover, #bg3:hover, #bg4:hover, #bg5:hover{
	transform: translate(-1vw, 0);
	z-index: -1;
}
#bg1{
	width: 45vw;
	height: 100vh;
	position: relative;	
	background-image: url(../jpg/bg1.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 2vh;
	box-shadow: 0.5vw 0vw 1.5vw #333333;
	transition: all 0.3s;
}
#bg2{
	width: 45vw;
	height: 100vh;
	position: relative;	
	background-image: url(../jpg/bg2.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 2vh;
	box-shadow: 0.5vw 0vw 1.5vw #333333;
	transition: all 0.3s;
}
#bg3{
	width: 45vw;
	height: 100vh;
	position: relative;	
	background-image: url(../jpg/bg3.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 2vh;
	box-shadow: 0.5vw 0vw 1.5vw #333333;
	transition: all 0.3s;
}
#bg4{
	width: 45vw;
	height: 100vh;
	position: relative;	
	background-image: url(../jpg/bg4.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 2vh;
	box-shadow: 0.5vw 0vw 1.5vw #333333;
	transition: all 0.3s;
}
#bg5{
	width: 45vw;
	height: 100vh;
	position: relative;	
	background-image: url(../jpg/bg5.jpg);
	background-size: cover;
	opacity: 1;
	box-shadow: 0.5vw 0vw 1.5vw #333333;
	transition: all 0.3s;
}
.bgp{
	color: white;
	font-size: 2vw;
	text-align: center;
	width: 45vw;
	position: absolute;
	top: 40vh;
	font-weight: bold;
}
.prolm{
	font-size: 1.2vw;
	position: absolute;
	top: calc(40vh + 6vw);
	font-weight: bold;
	text-align: center;
	width: 12vw;
	height: 3vw;
	color: #ffffff;
	left: 16.5vw;
	border-style: solid!important;
	border-color: #ffffff!important;
	border: 0.2vw;
	border-radius: 10vw;
	line-height: 3vw;
	opacity: 0.8;
}
#indexhr{
	position: sticky;
	height: 0.3vw;
	width: 30vw;
	border-style: none;
	margin-left: 7.5vw;
	bottom: 5vh;
}
#indexhr::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 0.3vw;
	width: 30vw;
	background-color: white;
	border-style: none;
	opacity: 0.6;
}
#hr{
	width: 6vw;
	background-color: white;
	border-style: none;
	height: 0.3vw;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
}

#whitelogo{
	position: sticky;
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	bottom: 0vh;
	margin-left: 37vw;
}
#pipeslogowhite{
	width: 3.2vw;
	margin: 1vw;
	cursor: pointer;
}
#barslogowhite{
	width: 3.2vw;
	margin: 1vw;
	margin-top: 0.5vw;
	opacity: 0.3;
	cursor: pointer;
}
#sheetslogowhite{
	width: 2.88vw;
	padding-left: 0.16vw;
	padding-right: 0.16vw;
	margin: 1vw;
	opacity: 0.3;
	cursor: pointer;
}
#coilslogowhite{
	width: 3.04vw;
	padding-left: 0.08vw;
	padding-right: 0.08vw;
	margin: 1vw;
	opacity: 0.3;
	cursor: pointer;
}
#wireslogowhite{
	width: 2.88vw;
	padding-left: 0.16vw;
	padding-right: 0.16vw;
	margin: 1vw;
	margin-top: 1.5vw;
	opacity: 0.3;
	cursor: pointer;
}



#logo3{
	width: 10vw;
	left: 10vw;
	position: relative;
	top: 0vw;
}
#logowhite1{
	font-size: 4.5vw;
	color: #333333;
	position: absolute;
	top: 0.2vw;
	margin: 0;
	font-weight: bold;
	left: 20.5vw;
}
#slogan{
	font-size: 3.1vw;
	color: #333333;
	position: absolute;
	top: 5.6vw;
	margin: 0;
	font-weight: bold;
	left: 9vw;	
}
#sloganartical{
	font-size: 1vw;
	position: absolute;
	top: 10.5vw;
	left: 5vw;	
	text-align: center;
	width: 45vw;
}





#contactbutton{
	background-color: #e83719;
	border-radius: 25vw;
	-moz-border-radius: 25vw;
	width: 20vw;
	height: 3.5vw;
	position: absolute;
	top: 21vw;
	left: 7vw;
	box-shadow: 0.8vw 0.8vw 2vw #333333;
	-moz-box-shadow: 0.8vw 0.8vw 2vw #333333;
	cursor: pointer;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transform: translate(0, 0);
	opacity: 1;
}
#contactbutton:hover{
	transform: translate(0, -0.5vw);
}
#contactbutton img{
	width: 3vw;
	position: absolute;
	top: 0.3vw;
	left: 2.8vw;
}
#contactbutton p{
	position: absolute;
	font-weight: bold;
	font-size: 1.2vw;
	color: #F1F3EC;
	top: 1.75vw;
	left: 6.3vw;
	display: block;
	width: 20vw;
	line-height: 0;
}

#ssproducts{
	font-size: 1.2vw;
	position: absolute;
	top: 21.1vw;
	font-weight: bold;
	text-align: center;
	width: 18vw;
	height: 3vw;
	color: #666666;
	left: 29vw;
	border-style: solid!important;
	border-color: #666666!important;
	border: 0.2vw;
	border-radius: 10vw;
	line-height: 3vw;
}
#ssproducts:hover{
	color: #333333;
	border-color: #333333!important;
}


.smalltag{
	width: 15vw;
	height: 5vw;
	background-color: #e83719;
	position: absolute;
	top: calc(5vw + 5vh);
	box-shadow: -0.2vw 0.5vw 1.5vw #333333;
	left: -3vw;
}
.smalltag p{
	width: 10vw;
	line-height: 1.1vw;
	color: white;
	font-size: 2vw;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 3vw;
	margin: 1.8vw 0;

}
.smalltag::before{
	content: "";
	width: 0vw;
	height: 0vw;
	border-left: 2.5vw solid #e83719;
	border-top: 2.5vw solid #e83719;
	border-bottom: 2.5vw solid #e83719;
	border-right: 2.5vw solid transparent;
	position: absolute;
	left: 15vw;
	top: 0;
}
.smalltag::after{
	content: "";
	width: 0vw;
	height: 0vw;
	border-left: 2.11vw solid #e83719;
	border-top: 2.11vw solid transparent;
	border-bottom: 2.11vw solid transparent;
	border-right: 2.11vw solid transparent;
	position: absolute;
	left: 0.9vw;
	top: 2.87vw;
	transform: rotate(-45deg);
	z-index: -1;	
	box-shadow: -0.2vw 0.5vw 1.5vw #333333;
}





#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: 1vw;
	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: 8vw;
	padding-bottom: 8vw;
	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;
}





#pricepage{
	height: 52vw;
	display: flex;
}
#price-table{
	width: 50vw;
}
#price-table > div{
	width: 42vw;
	display: flex;
	align-items: flex-end;
	margin-left: 5vw;
	margin-top: 10vw;
	height: 25vw;
	border-bottom: solid 0.3vw #333333;
	position: absolute;
}
.price{
	width: 3vw;
	margin: 0 1.1vw;
	position: relative;
	border-radius: 0.5vw 0.5vw 0vw 0vw;
	cursor: pointer;
	transition: all 0.3s;
}
.current-price{
	position: absolute;
	top: -2vw;
	font-weight: bold;
	font-size: 1vw;
	color: #333333;
	transition: all 0.3s;
	width: 4vw;
	text-align: center;
	left: -0.5vw;
}
.current-date{
	position: absolute;
	bottom: -2vw;
	font-weight: bold;
	font-size: 1vw;
	color: #333333;
	display: block;
	left: -0.5vw;
}
#G304-2B-price > .price{	
	background-color: #476c9b;
}
#G304-2B-price{
	opacity: 1;
	transition: all 0.3s;
	pointer-events: inherit;
}
#G304-No1-price > .price{	
	background-color: #3B8EA5;
}
#G304-No1-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G316-2B-price > .price{	
	background-color: #B7C8B5;
}
#G316-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G316-No1-price > .price{	
	background-color: #566E4F;
}
#G316-No1-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G430-2B-price > .price{	
	background-color: #edae49;
}
#G430-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G201-2B-price > .price{	
	background-color: #e4572e;
}
#G201-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
.price:hover .current-price{
	transform: scale(1.5, 1.5);
}
#price-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 30vw;
	text-align: center;
	margin-right: 5vw;
	align-items: flex-end;
	padding-bottom: 5vw;
}
#price-content > h2{
	font-size: 3vw;
	position: relative;
	color: #333333;	
	line-height: 3vw;	
	margin: 0 0 5vw 0;
	width: 21.6vw;
}
.price-button{
	width: 20vw;
	text-align: center;
	margin: 0.5vw 0;
	padding: 0.8vw;
	border-radius: 5vw;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.1vw;
	transition: all 0.3s;
}
#G304-2B-price-button{
	background-color: #476c9b;
	color: white;
}
#G304-No1-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G316-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G316-No1-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G430-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G201-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}





#metalsciencepage{
    position: relative;
	top: 0px;
	left: 0px;
	background-image: url(../jpg/metalsciencepic.jpg);
	background-size: cover;
	background-attachment: fixed;
	height: 52vw;
	width: 100vw;
}
#metalsciencepage>div{
	position: relative;
}
#metalsciencepage h2{
	font-size: 2.5vw;
	padding: 8vw 0 2vw 0;
	width: 100%;
	color: white;
	text-align: center;
	text-shadow: 0.3vw 0.3vw 1vw #333333;
	margin: 0;
}
#metalscience1{
	display: flex;
	justify-content: center;
	position: relative;
	top: 8vw;
}
#metalscience1::before{
	content: "";
	width: 80vw;
	height: 29vw;
	background-color: #333333;
	position: absolute;
	left: 10vw;
	top: -4.5vw;
	opacity: 0.6;
	border-radius: 1vw;
}
#metalscience1>div{
	width: 18vw;
}
.catalogueimg{
	height: 18vw;
	position: relative;
	left: 2.25vw;
	border-radius: 0.1vw;
}
.cataloguea{
	width: 18vw;
	text-align: center;
	display: block;
	color: white;
	position: relative;
	top: 1vw;
}
.cataloguea:hover{
	opacity: 0.5;
	transition: all 0.5s;
}















#newspage{
	position: relative;
	width: 100vw;
	display: flex;
}
#newspage1>h2{
	font-size: 3vw;
	margin: 3vw 0 4vw 0;
	text-align: center;
	position: relative;
	color: #333333;
	width: 50vw;
}
#newspage1>p{
	font-size: 1.3vw;
	margin: 0 0 5vw 0;
	text-align: left;
	position: relative;
	color: #666666;
	width: 30vw;
	line-height: 2vw;
}


#newspage1{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 55vw;
	height: 100vh;
	position: sticky;
	top: 0;
	align-items: center;
}
#newspage2{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 5vw;
	width: 45vw;
	padding-bottom: 10vw;
}

.bg{
	height: 13vw;
	position: absolute;
}
.ic1{
	width: 5vw;
	position: absolute;
	left: 10.5vw;
	top: 14vw;
	transition: all 1s;
	transform: translate(0, -0vw);
}
.ic0{
	width: 5vw;
	position: absolute;
	left: 10.5vw;
	top: 14vw;
	transition: all 1s;
	transform: rotateY(0deg);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
}
.clsh{
	position: absolute;
	color: white;
	font-size: 1.5vw;
	top: 18vw;
	width: 26vw;
	transition: all 1s;
	text-align: center;
}
.clsp{
	position: absolute;
	color: white;
	font-size: 1vw;
	left: 3vw;
	top: 23vw;
	width: 20vw;
	transition: all 1s;
	opacity:0;
	text-align: center;
}
#bg11{
	transition: all 1s;
	background-image: url(../jpg/steel-knowledge.jpg);
	background-size: cover;
	height: 36vw;
	width: 26vw;
}
#bg22{
	transition: all 1s;
	background-image: url(../jpg/applications.jpg);
	background-size: cover;
	height: 36vw;
	width: 26vw;
}
#bg33{
	transition: all 1s;
	background-image: url(../jpg/metal-technology.jpg);
	background-size: cover;
	height: 36vw;
	width: 26vw;
}
#bg44{
	transition: all 1s;
	background-image: url(../jpg/element.jpg);
	background-size: cover;
	height: 36vw;
	width: 26vw;
}
#bg55{
	transition: all 1s;
	background-image: url(../jpg/newsletter.jpg);
	background-size: cover;
	height: 36vw;
	width: 26vw;
}
#bg66{
	transition: all 1s;
	background-image: url(../jpg/leads.jpg);
	background-size: cover;
	background-position: center;
	height: 36vw;
	width: 26vw;
}
.sk5{
	transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective: 1000;
	-o-perspective: 1000;
	-moz-perspective: 1000;
	-webkit-perspective: 1000;
	perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	-webkit-perspective-origin: 50% 50%;
	transform: perspective(1000vw) rotateY(0deg);
	-o-transform: perspective(1000vw) rotateY(0deg);
	-moz-transform: perspective(1000vw) rotateY(0deg);
	-webkit-transform: perspective(1000vw) rotateY(0deg);
	position: absolute;
	top: 0;
}

#steel-knowledge{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#steel-knowledge h2{
	left: 0vw;
	margin: 1vw 0;
}
#steel-knowledge>a{
	opacity: 1;
}
#steel-knowledge>a:hover{
	opacity: 1;
}
#steel-knowledge:hover .ic0{
	animation: sk 1.5s;
	animation-iteration-count: infinite;
	transform: rotateY(0deg);
	top: 11vw;
}
#steel-knowledge:hover #bg11{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#steel-knowledge:hover .clsh{
	transform: translate(0, -3vw);
}
#steel-knowledge:hover .clsp{	
	transform: translate(0, -3.5vw);
	opacity: 1;
}
#steel-knowledge:hover .ic1{
	transform: translate(0, -3vw);
}

@keyframes sk{
	0%{transform: rotateY(0deg);}
	100%{transform: rotateY(-180deg);}
}





.ic2{
	width: 6.5vw;
	position: absolute;
	left: 9.8vw;
	top: 10.8vw;
	transition: all 1s;
}
#applications{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#applications h2{
	left: 0vw;
	margin: 1vw 0;
}
#applications>a{
	opacity: 1;
}
#applications>a:hover{
	opacity: 1;
}
#applications:hover #bg22{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#applications:hover .clsh{
	transform: translate(0, -3vw);
}
#applications:hover .clsp{
	transform: translate(0, -3.5vw);
	opacity: 1;
}
#applications:hover .ic2{
	transform: translate(0, -3vw);
}
#applications:hover #app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
@keyframes app{
	0%{opacity: 1; transform: translateY(0px); }
	100%{opacity: 0; transform: translateY(-5vw);}
}




#metal-technology{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#metal-technology h2{
	left: 0vw;
	margin: 1vw 0;
}
#metal-technology>a{
	opacity: 1;
}
#metal-technology>a:hover{
	opacity: 1;
}
#metal-technology:hover #bg33{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#metal-technology:hover .clsh{
	transform: translate(0, -2vw);
}
#metal-technology:hover .clsp{
	transform: translate(0, -2.5vw);
	opacity: 1;
}
#metal-technology:hover .ic1{
	top: 12vw;
	animation: rotate 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
#metal-technology:hover #app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
#metal-technology-logo{
	position: absolute;
	width: 4.5vw;
	height: auto;
	margin-top: -0.4vw;
	margin-left: 0.3vw;
}
@keyframes rotate{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}





#element{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#element h2{
	left: 0vw;
	margin: 1vw 0;
}
#element>a{
	opacity: 1;
}
#element>a:hover{
	opacity: 1;
}
#element:hover #bg44{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#element:hover .clsh{
	transform: translate(0, -2vw);
}
#element:hover .clsp{
	transform: translate(0, -2.5vw);
	opacity: 1;
}
#element:hover .ic2{
	transform: translate(0, -2vw);
}
#element:hover #app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
#element-logo{
	position: absolute;
	width: 5vw;
	height: auto;
	margin-top: 2.3vw;
	margin-left: 0.6vw;
}
#element:hover .element-2{
	animation: rotate 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 115px 115px;
}
#element:hover .element-1{
	animation: rotate 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 115px 115px;
	animation-direction: reverse;
}




#newsletter{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#newsletter h2{
	left: 0vw;
	margin: 1vw 0;
}
#newsletter>a{
	opacity: 1;
}
#newsletter>a:hover{
	opacity: 1;
}
#newsletter:hover #bg55{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#newsletter:hover .clsh{
	transform: translate(0, -2vw);
}
#newsletter:hover .clsp{
	transform: translate(0, -2.5vw);
	opacity: 1;
}
#newsletter:hover .ic1{
	top: 12vw;
	animation: newsletter 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#newsletter:hover #app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
#newsletter-logo{
	position: absolute;
	width: 3.5vw;
	height: auto;
	margin-top: -2vw;
	margin-left: 0.54vw;
}


@keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-0.7vw);}
	100% {transform: translateY(0);}
}
@-o-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-0.7vw);}
	100% {transform: translateY(0);}
}
@-webkit-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-0.7vw);}
	100% {transform: translateY(0);}
}
@-moz-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-0.7vw);}
	100% {transform: translateY(0);}
}





#leads{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 36vw;
	width: 26vw;
	box-shadow: 1vw 1vw 2vw 0.1vw #666666;
	background-color: #333333;
	margin: 6vw 3vw;
	border-radius: 1vw;
	transform: scale(1.2, 1.2);
}
#leads h2{
	left: 0vw;
	margin: 1vw 0;
}
#leads>a{
	opacity: 1;
}
#leads>a:hover{
	opacity: 1;
}
#leads:hover #bg66{
	filter: blur(1vw) brightness(80%);
	transform: scale(1.1);
}
#leads:hover .clsh{
	transform: translate(0, -2vw);
}
#leads:hover .clsp{
	transform: translate(0, -2.5vw);
	opacity: 1;
}
#leads:hover .ic2{
	transform: translate(0, -2vw);
}
#leads:hover #app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
#leads-logo{
	position: absolute;
	width: 4vw;
	height: auto;
	margin-top: 3vw;
	margin-left: 1.5vw;
}
#leads:hover .leads-1{
	animation: scalea 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
#leads:hover .leads-2{
	animation: scaleb 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
#leads:hover .leads-3{
	animation: scalec 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
#leads:hover .leads-4{
	animation: scaled 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
@keyframes scalea{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 0.5);}
	100%{transform: scale(1, 1);}
}
@keyframes scaleb{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.3);}
	100%{transform: scale(1, 1);}
}
@keyframes scalec{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.7);}
	100%{transform: scale(1, 1);}
}
@keyframes scaled{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.4);}
	100%{transform: scale(1, 1);}
}





#informationpage{
    display: flex;
    width: 100vw;
    flex-wrap: wrap;
    justify-content: center;
}
#informationpage h2{
	width: 100vw;
	text-align: center;
	font-size: 2.5vw;
	padding-top: 10vw;
	line-height: 2.5vw;
	margin: 0;
	height: 2.5vw;
	position: relative;
}
#information-head{
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 5vw;
    height: 35vw
}
#information-head > div{
    margin: 1vw 0;
}
#information-head h3{
    font-weight: lighter;
    font-size: 1vw;
    line-height: 0.8vw;
    display: block;
    margin: 1vw 0;
    border-left: solid 0.15vw #333333;
    padding-left: 0.5vw;
    color: #333333;
}
#information-head p{
    display: inline;
    width: 40vw;
    font-weight: bolder;
    font-size: 2vw;
    line-height: 2.5vw;
    padding: 0;
    margin: 1vw;
    color: #333333;
}
#form-head{
    height: 40vw;
    position: relative;
    margin: 0vw;
    width: 30vw;
}
#contactform{
    width: 45vw;
}
#contactform1{
    width: 45vw;
    position: relative;
    margin: 5vw 0 4vw 0;
}
.contactlabel{
    display: block;
    width: 40vw;
    font-weight: bolder;
    font-size: 2vw;
    line-height: 2.5vw;
    padding: 0;
    margin: 1vw 0;
    color: #333333;
}
#subjectform{
    width: 30vw;
    font-size: 1.2vw;
    line-height: 1.2vw;
    border: solid 0.2vw #333333;
    border-bottom-width: 0.12vw;
    border-top-width: 0vw;
    border-left-width: 0vw;
    border-right-width: 0vw;
}
#subjectform:focus{
    border-color: #e83719;  
}
#contentform{
    width: 30vw;
    height: 10vw;
    font-size: 1.2vw;
    line-height: 1.2vw;
    border: solid 0.2vw #333333;
    border-bottom-width: 0.12vw;
    border-top-width: 0vw;
    border-left-width: 0vw;
    border-right-width: 0vw;
}
#contentform:focus{
    border-color: #e83719;  
}
#contactsubmit{
    width: 18vw;
    height: 3vw;
    border-radius: 5vw;
    border: solid 0.2vw #e83719; 
    margin: 1vw 0;
    cursor: pointer;
    background-color: white;
    font-size: 1.2vw;
    font-weight: bold;
    color: #333333;
    transition: all 0.3s;
}
#contactsubmit:active{
    background-color: #e83719;
    color: white;
}
}

















































@media screen and (max-device-width: 800px) {






#steel-making-background{
	opacity: 0!important;
	display: none;
}
#mainindex{
	width: 100vw;
	height: 350vh;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}


#mouse{
	width: 6vw;
	height: 6vw;
	border: solid 3vw #888888;
	background-color: #555555;
	border-radius: 10vw;
	position: absolute;
	left: 44vw;
	bottom: 15vh;
	opacity: 0.8;
	animation: mouse 2s;
	animation-iteration-count: infinite;
	opacity: 0.2;
}
@keyframes mouse{
	0%{transform: translate(0, 0); opacity: 0.2;}
	100%{transform: translate(0, -6vw); opacity: 0;}
}


#indexintro{
	height: 100vh;
	width: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: url(../svg/map.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
	background-color: white;
}
#indexintro1{
	height: 140vw;
	width: 100vw;
	position: relative;
}
#indexpro{
	height: 500vh;
	width: 100vw;
	position: relative;
	transform: translate(48vw, 0);
	animation: indexpro 1s forwards;
	animation-delay: 0.3s;
}
@keyframes indexpro{
	0%{transform: translate(48vw, 0);}
	100%{transform: translate(0vw, 0);}
}
#bg1{
	width: 100vw;
	height: 50vh;
	position: relative;	
	background-image: url(../jpg/bg1.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 1vh;
}
#bg1 a, #bg2 a, #bg3 a, #bg4 a, #bg5 a{
	width: 100vw;
	height: 50vh;
	display: block;
}
#bg2{
	width: 100vw;
	height: 50vh;
	position: relative;	
	background-image: url(../jpg/bg2.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 1vh;
}
#bg3{
	width: 100vw;
	height: 50vh;
	position: relative;	
	background-image: url(../jpg/bg3.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 1vh;
}
#bg4{
	width: 100vw;
	height: 50vh;
	position: relative;	
	background-image: url(../jpg/bg4.jpg);
	background-size: cover;
	opacity: 1;
	margin-bottom: 1vh;
}
#bg5{
	width: 100vw;
	height: 50vh;
	position: relative;	
	background-image: url(../jpg/bg5.jpg);
	background-size: cover;
	opacity: 1;
}
.bgp{
	color: white;
	font-size: 6vw;
	text-align: center;
	width: 100vw;
	position: absolute;
	top: 16vh;
	font-weight: bold;
}
.prolm{
	font-size: 3.6vw;
	position: absolute;
	top: calc(16vh + 18vw);
	font-weight: bold;
	text-align: center;
	width: 36vw;
	height: 9vw;
	color: #ffffff;
	left: 32vw;
	border-style: solid!important;
	border-color: #ffffff!important;
	border: 0.6vw;
	border-radius: 30vw;
	line-height: 9vw;
	opacity: 0.8;
}
#indexhr{
	position: sticky;
	height: 0.3vw;
	width: 30vw;
	border-style: none;
	margin-left: 7.5vw;
	bottom: 5vh;
}
#indexhr::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 0.3vw;
	width: 30vw;
	background-color: white;
	border-style: none;
	opacity: 0.6;
}
#hr{
	width: 6vw;
	background-color: white;
	border-style: none;
	height: 0.3vw;
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
}

#whitelogo{
	position: sticky;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20vh;
	bottom: 0vh;
	width: 100vw;
}
#pipeslogowhite{
	width: 9.6vw;
	margin: 3vw;
	cursor: pointer;
}
#barslogowhite{
	width: 9.6vw;
	margin: 3vw;
	opacity: 0.3;
	cursor: pointer;
}
#sheetslogowhite{
	width: 8.64vw;
	padding-left: 0.48vw;
	padding-right: 0.48vw;
	margin: 3vw;
	opacity: 0.3;
	cursor: pointer;
}
#coilslogowhite{
	width: 9.12vw;
	padding-left: 0.24vw;
	padding-right: 0.24vw;
	margin: 3vw;
	opacity: 0.3;
	cursor: pointer;
}
#wireslogowhite{
	width: 8.64vw;
	padding-left: 0.48vw;
	padding-right: 0.48vw;
	margin: 3vw;
	opacity: 0.3;
	cursor: pointer;
}



#logo3{
	width: 25vw;
	left: 9vw;
	position: relative;
	top: 0vw;
}
#logowhite1{
	font-size: 11.25vw;
	color: #333333;
	position: absolute;
	top: 0.2vw;
	margin: 0;
	font-weight: bold;
	left: 35vw;
}
#slogan{
	font-size: 7vw;
	color: #333333;
	position: absolute;
	top: 13vw;
	margin: 0;
	font-weight: bold;
	left: 9vw;	
}
#sloganartical{
	font-size: 3.6vw;
	position: absolute;
	top: 24vw;
	left: 5vw;	
	text-align: center;
	width: 90vw;
}





#contactbutton{
	background-color: #e83719;
	border-radius: 25vw;
	-moz-border-radius: 25vw;
	width: 60vw;
	height: 12vw;
	position: absolute;
	top: 90vw;
	left: 20vw;
	box-shadow: 2.4vw 2.4vw 6vw #333333;
	-moz-box-shadow: 2.4vw 2.4vw 6vw #333333;
	cursor: pointer;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transform: translate(0, 0);
	opacity: 1;
}
#contactbutton img{
	width: 12vw;
	position: absolute;
	top: 0vw;
	left: 4.5vw;
}
#contactbutton p{
	position: absolute;
	font-weight: bold;
	font-size: 4.2vw;
	color: #F1F3EC;
	top: 1.8vw;
	left: 18vw;
	display: block;
	width: 60vw;
	line-height: 0;
}

#ssproducts{
	font-size: 3.6vw;
	position: absolute;
	top: 74vw;
	font-weight: bold;
	text-align: center;
	width: 58.8vw;
	height: 11vw;
	color: #666666;
	left: 20vw;
	border-style: solid!important;
	border-color: #666666!important;
	border: 0.6vw;
	border-radius: 30vw;
	line-height: 11vw;
}
#ssproducts:hover{
	color: #333333;
	border-color: #333333!important;
}


.smalltag{
	width: 30vw;
	height: 10vw;
	background-color:  #e83719;
	position: absolute;
	top: 6vh;
	box-shadow: -0.4vw 1vw 3vw #333333;
	left: 0vw;
}
.smalltag p{
	width: 20vw;
	line-height: 3.3vw;
	color: white;
	font-size: 4vw;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 4vw;

}
.smalltag::before{
	content: "";
	width: 0vw;
	height: 0vw;
	border-left: 5vw solid #e83719;
	border-top: 5vw solid #e83719;
	border-bottom: 5vw solid #e83719;
	border-right: 5vw solid transparent;
	position: absolute;
	left: 30vw;
	top: 0;
}



#gradespage{
	position: relative;
    transition: all 0.5s;
	width: 100%;
	padding: 10vw 0;
}
#gradespage1{
	height: 55vh;
	width: 100vw;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 1;
}
#gradespage1 div{
	height: 100vw;
	width: 100vw;
	position: relative;
	top: 20vw;
}
#gradespage1 h2{
	font-size: 9vw;
	position: relative;
	color: #333333;	
	line-height: 9vw;
	margin: 0;
	width: 80vw;
	top: 6vw;
	margin-left: 10vw;
}
#gradespage1 ul{
	font-size: 3.2vw;
	margin-left: 5vw;
	position: relative;
	color: #333333;	
	line-height: 3.3vw;
	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{
	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;
}







#pricepage{
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
	position: relative;
	padding: 15vw 0;
}
#price-table{
	width: 42vw;
	height: 80vw;
}
#price-table > div{
	width: 42vw;
	display: flex;
	align-items: flex-end;
	margin-left: 5vw;
	height: 25vw;
	border-bottom: solid 0.3vw #333333;
	position: absolute;
	transform: scale(2.14, 2.14);
	transform-origin: 0 0;
}
.price{
	width: 3vw;
	margin: 0 1.1vw;
	position: relative;
	border-radius: 0.5vw 0.5vw 0vw 0vw;
	cursor: pointer;
	transition: all 0.3s;
}
.current-price{
	position: absolute;
	top: -2vw;
	font-weight: bold;
	font-size: 1vw;
	color: #333333;
	transition: all 0.3s;
	width: 4vw;
	text-align: center;
	left: -0.5vw;
}
.price:nth-child(2n - 1) .current-date{
	position: absolute;
	bottom: -2.5vw;
	font-weight: bold;
	font-size: 1vw;
	color: #333333;
	display: block;
	left: -1.5vw;
}
.price:nth-child(2n) .current-date{
	position: absolute;
	bottom: -4vw;
	font-weight: bold;
	font-size: 1vw;
	color: #333333;
	display: block;
	left: -1.5vw;
}
#G304-2B-price > .price{	
	background-color: #476c9b;
}
#G304-2B-price{
	opacity: 1;
	transition: all 0.3s;
	pointer-events: inherit;
}
#G304-No1-price > .price{	
	background-color: #3B8EA5;
}
#G304-No1-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G316-2B-price > .price{	
	background-color: #B7C8B5;
}
#G316-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G316-No1-price > .price{	
	background-color: #566E4F;
}
#G316-No1-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G430-2B-price > .price{	
	background-color: #edae49;
}
#G430-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
#G201-2B-price > .price{	
	background-color: #e4572e;
}
#G201-2B-price{
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
.price:hover .current-price{
	transform: scale(1.5, 1.5);
}
#price-content{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 90vw;
	margin-left: 5vw;
	z-index: 1;
}
#price-content > h2{
	font-size: 9vw;
	position: relative;
	color: #333333;	
	line-height: 9vw;	
	margin: 0 0 15vw 0;
	width: 90vw;
	text-align: center;
}
.price-button{
	width: 90vw;
	text-align: center;
	margin: 1.5vw 0;
	padding: 2vw;
	border-radius: 15vw;
	cursor: pointer;
	font-weight: bold;
	transition: all 0.3s;
	font-size: 4vw;
}
#G304-2B-price-button{
	background-color: #476c9b;
	color: white;
}
#G304-No1-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G316-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G316-No1-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G430-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}
#G201-2B-price-button{
	background-color: #eeeeee;
	color: #333333;
}





#metalsciencepage{
    position: relative;
	top: 0px;
	left: 0px;
	height: 470vw;
	width: 100vw;
}
#metalsciencepage::before{
	content: "";
	background-image: url(../jpg/metalsciencepic2.jpg);
	background-size: cover;
	position: sticky;
	position: -webkit-sticky;
	width: 100vw;
	height: 100vh;
	background-color: #333333;
	top: 0;
	display: block;
}
#metalsciencepage>div{
	position: relative;
	transform: translate(0, -100vh);
}
#metalsciencepage h2{
	font-size: 7vw;
	padding-top: 24vw;
	width: 100%;
	color: white;
	text-align: center;
	text-shadow: 0.9vw 0.9vw 3vw #333333;
	margin: 0;
}
#metalscience1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	top: 24vw;
}
#metalscience1::before{
	content: "";
	width: 80vw;
	height: 390vw;
	background-color: #333333;
	position: absolute;
	left: 10vw;
	top: -4.5vw;
	opacity: 0.6;
	border-radius: 3vw;
}
#metalscience1>div{
	width: 80vw;
	height: 75vw;
	margin-top: 15vw;
}
.catalogueimg{
	width: 50vw;
	position: relative;
	left: 15vw;
	border-radius: 0.3vw;
}
.cataloguea{
	width: 80vw;
	text-align: center;
	display: block;
	color: white;
	position: relative;
	font-size: 5vw;
	top: 2vw;
}
.cataloguea:hover{
	opacity: 0.5;
	transition: all 0.5s;
}















#newspage{
	position: relative;
	padding-bottom: 15vw;
}
#newspage1>h2{
	font-size: 7.5vw;
	margin: 0;
	text-align: center;
	position: relative;
	color: #333333;
}

#newspage1>p{
	font-size: 3.5vw;
	margin: 0 0 5vw 0;
	text-align: center;
	position: relative;
	color: #666666;
	width: 90vw;
	left: 5vw;
	line-height: 5vw;
	margin: 8vw 0;
}
#newspage2{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 5vw;
}
.ic1{
	width: 15vw;
	position: absolute;
	left: 37.5vw;
	top: 25vw;
	transition: all 1s;
	transform: translate(0, -0vw);
}
.ic0{
	width: 15vw;
	position: absolute;
	left: 37.5vw;
	top: 25vw;
	transition: all 1s;
	transform: rotateY(0deg);
	transform-origin: 0% 50%;
	-webkit-transform-origin: 50% 50%;
	-o-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	animation: sk 1.5s;
	animation-iteration-count: infinite;
}
.clsh{
	position: absolute;
	color: white;
	font-size: 5vw;
	top: 37vw;
	width: 90vw;
	transition: all 1s;
	text-align: center;
}
.clsp{
	position: absolute;
	color: white;
	font-size: 3.6vw;
	left: 5vw;
	top: 52vw;
	width: 80vw;
	transition: all 1s;
	text-align: center;
}
#bg11{
	transition: all 1s;
	background-image: url(../jpg/steel-knowledge.jpg);
	background-size: cover;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
#bg22{
	transition: all 1s;
	background-image: url(../jpg/applications.jpg);
	background-size: cover;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
#bg33{
	transition: all 1s;
	background-image: url(../jpg/metal-technology.jpg);
	background-size: cover;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
#bg44{
	transition: all 1s;
	background-image: url(../jpg/element.jpg);
	background-size: cover;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
#bg55{
	transition: all 1s;
	background-image: url(../jpg/newsletter.jpg);
	background-size: cover;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
#bg66{
	transition: all 1s;
	background-image: url(../jpg/leads.jpg);
	background-size: cover;
	background-position: center;
	height: 50vh;
	width: 90vw;
	filter: brightness(60%);
	border-radius: 3vw;
}
.sk5{
	transform: perspective(1000vw) rotateY(0deg);
	transform-style: preserve-3d;
	perspective: 1000;
	-webkit-perspective: 1000;
	perspective-origin: 50% 50%;
	-webkit-perspective-origin: 50% 50%;
	position: absolute;
	top: 0;
}

#steel-knowledge{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#steel-knowledge h2{
	left: 0vw;
	margin: 1vw 0;
}
#steel-knowledge>a{
	opacity: 1;
}

@keyframes sk{
	0%{transform: rotateY(0deg);}
	100%{transform: rotateY(-180deg);}
}





.ic2{
	width: 19.5vw;
	position: absolute;
	left: 35.25vw;
	top: 17vw;
	transition: all 1s;
}
#applications{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#applications h2{
	left: 0vw;
	margin: 1vw 0;
}
#applications>a{
	opacity: 1;
}
#app1{
	animation: app 1.5s;
	animation-iteration-count: infinite;
}
@keyframes app{
	0%{opacity: 1; transform: translateY(0px); }
	100%{opacity: 0; transform: translateY(-5vw);}
}




#metal-technology{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#metal-technology h2{
	left: 0vw;
	margin: 1vw 0;
}
#metal-technology>a{
	opacity: 1;
}
#metal-technology-logo{
	position: absolute;
	width: 13.5vw;
	height: auto;
	margin-top: -1.2vw;
	margin-left: 0.9vw;
	animation: rotate 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes rotate{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}





#element{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#element h2{
	left: 0vw;
	margin: 1vw 0;
}
#element>a{
	opacity: 1;
}
#element-logo{
	position: absolute;
	width: 15vw;
	height: auto;
	margin-top: 4.9vw;
	margin-left: 1.8vw;
}
.element-2{
	animation: rotate 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 115px 115px;
}
.element-1{
	animation: rotate 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 115px 115px;
	animation-direction: reverse;
}




#newsletter{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#newsletter h2{
	left: 0vw;
	margin: 1vw 0;
}
#newsletter>a{
	opacity: 1;
}
#newsletter-logo{
	position: absolute;
	width: 10.5vw;
	height: auto;
	margin-top: 7vw;
	margin-left: 1.62vw;
	top: 12vw;
	animation: newsletter 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


@keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-2.1vw);}
	100% {transform: translateY(0);}
}
@-o-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-2.1vw);}
	100% {transform: translateY(0);}
}
@-webkit-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-2.1vw);}
	100% {transform: translateY(0);}
}
@-moz-keyframes newsletter{
	0% {transform: translateY(0);}
	50% {transform: translateY(-2.1vw);}
	100% {transform: translateY(0);}
}





#leads{
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 50vh;
	width: 90vw;
	background-color: #333333;
	margin: 2.5vw;
	border-radius: 3vw;
}
#leads h2{
	left: 0vw;
	margin: 1vw 0;
}
#leads>a{
	opacity: 1;
}
#leads-logo{
	position: absolute;
	width: 12vw;
	height: auto;
	margin-top: 7vw;
	margin-left: 4vw;
}
.leads-1{
	animation: scalea 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
.leads-2{
	animation: scaleb 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
.leads-3{
	animation: scalec 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
.leads-4{
	animation: scaled 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transform-origin: 100% 100%;
}
@keyframes scalea{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 0.5);}
	100%{transform: scale(1, 1);}
}
@keyframes scaleb{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.3);}
	100%{transform: scale(1, 1);}
}
@keyframes scalec{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.7);}
	100%{transform: scale(1, 1);}
}
@keyframes scaled{
	0%{transform: scale(1, 1);}
	50%{transform: scale(1, 1.4);}
	100%{transform: scale(1, 1);}
}





}








@keyframes mouse-big{
	0%{transform: translate(0, 0); opacity: 1;}
	100%{transform: translate(0, 1vw); opacity: 0;}
}
@keyframes indexpro-big{
	0%{transform: translate(48vw, 0);}
	100%{transform: translate(0vw, 0);}
}