@font-face {
    font-family: 'trend_sans_oneregular';
    src: url('fonts/TrendSans-One-webfont.eot');
    src: url('fonts/TrendSans-One-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/TrendSans-One-webfont.woff') format('woff'),
         url('fonts/TrendSans-One-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family : "GalaxiePolaris-Book";
	=src: url('fonts/GalaxiePolaris-Book.eot');
    src: url('fonts/GalaxiePolaris-Book.eot?#iefix') format('embedded-opentype'),
         url('fonts/GalaxiePolaris-Book.ttf') format('truetype'),
         url('fonts/GalaxiePolaris-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family : "GalaxiePolaris-Medium";
	src: url('fonts/GalaxiePolaris-Medium.eot');
    src: url('fonts/GalaxiePolaris-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/GalaxiePolaris-Medium.ttf') format('truetype'),
         url('fonts/GalaxiePolaris-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {margin: 0; padding: 0; outline: 0; border:0; box-sizing: border-box;}		  
article, aside, figure, footer, header, hgroup, nav, section, img {display:block;}
ul, ol {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
h1,h2,h3,h4,h5,h6 {text-rendering: optimizeLegibility; }
html {-webkit-text-size-adjust: 100%; overflow-y:scroll; overflow-x: hidden;}
a, button{text-decoration: none; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);}
a {color:#ffffff; transition: all .3s ease}
a:hover, a:active {text-decoration: none;}
img {box-shadow: #ffffff 0 0 0 0; opacity: 1.0; transition: all .25s ease; width:100%; height:auto;}
a img, a:active img{opacity: 1.0; box-shadow:0px 0px 0px rgba(0,0,0,0); }
body{font-size:14px; width:100%; -webkit-text-size-adjust: none; overflow-x: clip;}

/* Basic Styles*/
p{margin: 0 0 20px 0; font-size: 18px; line-height: 24px; padding-top: 10px;}
ol{font-size:18px; padding:10px 0px 10px 50px;  counter-reset: item;}
ol li { counter-increment: item; position: relative; padding-left: 1.7em; padding-bottom:25px;}
ol li::before {content: counter(item) "."; position: absolute;left: 0; color: #FFCD00;}

iframe {width:100%;}
h1, h2, h3, h4, h5, h7,.product-title,#sanccusmenu,.item-title,.item-title2,.confirm {font-family:trend_sans_oneregular, GalaxiePolaris-medium, arial, calibri; font-weight:normal; font-style:normal; text-transform: uppercase;}
p a,b,strong, ol li::before, #submit-button,.reqbutton,.clbutton,#search-submit,#search-submit2,.result-item span,.grid-item::after, .gelbutton, .number {font-family:GalaxiePolaris-medium, arial, calibri; font-weight:normal; font-style:normal; }
h6, .confirm, body, input, textarea {font-family:GalaxiePolaris-book, arial, calibri; font-weight:normal; font-style:normal; }
p a, ol li::before, b {font-weight:600;}
h1{font-size: 80px; line-height:80px; color:#ffffff;}
h2{font-size: 28px; color:#ffffff; margin:20px auto 10px auto; text-align:center;}
h3{font-size: 28px; color:#ffffff; margin:0 auto 50px auto; text-align:center;}
h4{font-size: 20px; color:#FFCD00;}
h5{font-size: 17px; color:#ffffff; line-height:18px;}
h6{font-size: 25px; line-height:30px; color:#ffffff;}
h7{font-size: 16px; color:#FFCD00;}
.fade-out {opacity: 0 !important;pointer-events: none;}
#loading{position: fixed; inset: 0; background: #000000; display: flex; justify-content: center;align-items: center;z-index: 9800;opacity: 1;transition: opacity 0.6s ease;}

/*Menu*/
#menus {position:fixed; top:0; width:100%; z-index:9900;}
#logo-white{z-index:9999;opacity:1; width:75px; height:auto; text-align:left; position:absolute; top: 13px; left: 19px; transition: all .25s ease;}
#header.scroll #logo-white {opacity:0; width:50px; top: 9px; left: 11px;}
#logo{z-index:9999; opacity:0; width:75px; height:auto; text-align:left; display:block; position:absolute; top: 13px; left: 19px; transition: all .25s ease;}
#header.scroll #logo{opacity:1; width:50px; top:9px; left:11px;}
#sanccusmenu {font-size:13.4px; width:100%; position: fixed; right: 0; transition: top .25s ease, opacity .10s ease, height .25s ease;}
#menucontents{width:100%; position:relative; float:left;}
#header{width:100%; background-color:transparent; box-shadow:0px 0px 0px rgba(0,0,0,0);  position: relative; float: left; clear:both; transition: all .25s ease;}
#header.scroll{background-color:rgba(255,255,255,0.93);box-shadow:0px 1px 3px rgba(0,0,0,0.2); height:62px;}

/*Hero Top*/
#hero{position: relative; height: 100vh; width: 100%; overflow: hidden; transition: height .4s ease;}
@supports (height: 100dvh){#hero{height: 100dvh;}}
#hero.case {height: 50vh; max-height:560px;}
#hero.homepage  {position: fixed;}
.hero-content h1{perspective:1000px;}
.hero-content h1 span span {transform-style:preserve-3d; display:inline-block; opacity:0; transform:rotateY(90deg); transform-origin:top center; transition:all 1s cubic-bezier(0.19, 1, 0.22, 1)}
.hero-content h1 span {display:inline-block;}
#hero.intro .hero-content h1 span span {opacity:1; transform:rotateY(0deg);}
.hero-content h1 span span:nth-child(1){transition-delay:.525s}.hero-content h1 span span:nth-child(2){transition-delay:.55s}.hero-content h1 span span:nth-child(3){transition-delay:.575s}.hero-content h1 span span:nth-child(4){transition-delay:.6s}.hero-content h1 span span:nth-child(5){transition-delay:.625s}.hero-content h1 span span:nth-child(6){transition-delay:.65s}.hero-content h1 span span:nth-child(7){transition-delay:.675s}.hero-content h1 span span:nth-child(8){transition-delay:.7s}.hero-content h1 span span:nth-child(9){transition-delay:.725s}.hero-content h1 span span:nth-child(10){transition-delay:.75s}.hero-content h1 span span:nth-child(11){transition-delay:.775s}.hero-content h1 span span:nth-child(12){transition-delay:.8s}.hero-content h1 span span:nth-child(13){transition-delay:.825s}.hero-content h1 span span:nth-child(14){transition-delay:.85s}.hero-content h1 span span:nth-child(15){transition-delay:.875s}.hero-content h1 span span:nth-child(16){transition-delay:.9s}.hero-content h1 span span:nth-child(17){transition-delay:.925s}.hero-content h1 span span:nth-child(18){transition-delay:.95s}.hero-content h1 span span:nth-child(19){transition-delay:.975s}.hero-content h1 span span:nth-child(20){transition-delay:1s}.hero-content h1 span span:nth-child(21){transition-delay:1.025s}.hero-content h1 span span:nth-child(22){transition-delay:1.05s}.hero-content h1 span span:nth-child(23){transition-delay:1.075s}.hero-content h1 span span:nth-child(24){transition-delay:1.1s}.hero-content h1 span span:nth-child(25){transition-delay:1.125s}.hero-content h1 span span:nth-child(26){transition-delay:1.15s}.hero-content h1 span span:nth-child(27){transition-delay:1.175s}.hero-content h1 span span:nth-child(28){transition-delay:1.2s}.hero-content h1 span span:nth-child(29){transition-delay:1.225s}.hero-content h1 span span:nth-child(30){transition-delay:1.25s}.hero-content h1 span span:nth-child(31){transition-delay:1.275s}.hero-content h1 span span:nth-child(32){transition-delay:1.3s}.hero-content h1 span span:nth-child(33){transition-delay:1.325s}.hero-content h1 span span:nth-child(34){transition-delay:1.35s}.hero-content h1 span span:nth-child(35){transition-delay:1.375s}.hero-content h1 span span:nth-child(36){transition-delay:1.4s}.hero-content h1 span span:nth-child(37){transition-delay:1.425s}.hero-content h1 span span:nth-child(38){transition-delay:1.45s}.hero-content h1 span span:nth-child(39){transition-delay:1.475s}.hero-content h1 span span:nth-child(40){transition-delay:1.5s}.hero-content h1 span span:nth-child(41){transition-delay:1.525s}.hero-content h1 span span:nth-child(42){transition-delay:1.55s}.hero-content h1 span span:nth-child(43){transition-delay:1.575s}.hero-content h1 span span:nth-child(44){transition-delay:1.6s}.hero-content h1 span span:nth-child(45){transition-delay:1.625s}.hero-content h1 span span:nth-child(46){transition-delay:1.65s}.hero-content h1 span span:nth-child(47){transition-delay:1.675s}.hero-content h1 span span:nth-child(48){transition-delay:1.7s}.hero-content h1 span span:nth-child(49){transition-delay:1.725s}.hero-content h1 span span:nth-child(50){transition-delay:1.75s}
.hero-content h6 {opacity:0; transform:translate3d(0px, 40px, 0px); transition:all 0.5s ease; transition-delay:.55s}
#hero.intro .hero-content h6{opacity:1; transform:translate3d(0px, 10px, 0px);}
#image_mask{position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.6)); opacity:1; transition:opacity 0.5s ease;}
.case #image_mask{opacity:0.5;}
.hero-image {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.hero-content {position: relative;z-index: 2; width: 90%;  margin: 30px auto 0px auto; height: 100%;display: flex; flex-direction: column;align-items: center; justify-content: center; color: #fff; text-align: center; transition: opacity 0.5s ease;}
#hero.std.scroll {height: 65vh;}
#hero.scroll #image_mask, #hero.scroll .hero-content {opacity: 0;}
.title-line {width: 200px;  height: 6px; margin:20px 0;transform: scaleX(0); transform-origin: center; transition:transform 1s  ease; transition-delay:0.6s; }
#hero.intro .title-line{transform: scaleX(1);}

/*Homepage*/
svg{width:100%; height:auto;}
.homepage:after{content: "";position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 1;}
.homepage #image_mask{opacity: 0; backdrop-filter: blur(7px); background:rgba(255,255,255,0); transition:all 0.5s ease; }
#hero.homepage.scroll #image_mask {opacity: 1; background:rgba(8, 9, 9, 0.65);}
.homepage .hero-content {width: 45%;}
path{fill:rgba(255,255,255,0); stroke:#ffffff; stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition: fill 0.3s ease-in-out, filter 0.3s ease-in-out;}
@keyframes draw {to {stroke-dashoffset: 0;}}
@keyframes fillFade {0% {fill:rgba(255,255,255,0);} 50% {fill:rgba(255,255,255,0.9);} 100% {fill:rgba(255,255,255,0.35);}}
@keyframes fillFade2 {0% {fill:rgba(255,255,255,0);} 40% {fill:rgba(255,255,255,0.5);} 100% {fill:rgba(255,255,255, 0.9);}}
@keyframes glowFade {0% {filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));}50% {filter:drop-shadow(0 0 4px white) drop-shadow(0 0 8px white);}100% {filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));}}
#products {position: relative;  margin-top: 100vh; transition:margin-top 0.5s ease;}
#products.scroll {margin-top: 70vh;}
.title {position: relative; width: 45%;  margin: 0px auto; display:flex; flex-direction: column; align-items: center;}
.range {position: relative; width:90%; margin:120px 1% 140px 9%;}
.range p {padding-top: 2px; color: #fff;}
.range img {max-width:320px; border-radius: 50%; object-fit: cover; border: 5px solid white; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); background:#ffffff;}
.range > div {display: flex; align-items: flex-end; gap:20px; flex-direction: row; text-align: left;}
.range > div > div:first-child {flex: 45%;}
.range > div > div:last-child {flex: 55%; margin:0 20px -30px 0px;}
.range h2 {font-size:21px; text-align:left;}
.range h2::after {content: ""; display: block; width: 59px; height: 4px; background: black; margin: 10px 0;}
.range .animitem:nth-child(1) h2::after {background: #8CC63F;}
.range .animitem:nth-child(2) h2::after {background: #898E90;}
.range .animitem:nth-child(3) h2::after {background: #e83b3c;}
.range .animitem:nth-child(4) h2::after {background: #11D5C1;}
.range .animitem:nth-child(5) h2::after {background: #41a6cb;}
.range .animitem:nth-child(6) h2::after {background: #FFA227;}
.range .animitem:nth-child(1), .range .animitem:nth-child(4), .grid3 .animitem:nth-child(2) {transition-delay: 0.2s;}
.range .animitem:nth-child(2), .range .animitem:nth-child(5), .grid3 .animitem:nth-child(3) {transition-delay: 0.4s;}
.range .animitem:nth-child(3), .range .animitem:nth-child(6) {transition-delay: 0.6s;}
.parallax-section{height: 400vh; position: relative; }
.parallax-sticky{position: sticky;top: 0; height: 100vh; overflow: hidden; background: linear-gradient(to bottom, #cccccc, #bcbcbc);}
.layer{position:relative; width:100%; transform: translateZ(0);  will-change: transform;}
.layer:nth-child(1){position:absolute; top: 0; margin-top:20px;}
.layer:nth-child(2),.layer:nth-child(3){position:absolute; top:30vh; opacity:0.5; filter: blur(4px);}
.slow {position:relative; height: calc(100vh - 62px);  margin-top:62px;}
@supports (height: 100dvh){.slow {height: calc(100dvh - 62px);}}
.slow img {position:absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);}
.rotating-text {width:92%; max-width:750px; transform: translateZ(0);  transform-origin: center;  will-change: transform, opacity;}
.slow img:nth-of-type(2){width:77%; max-width:600px; box-shadow: -5px -10px 15px rgba(255,255,255,0.7); border-radius: 50%;}
.layer.mid {height:320vh;}
.layer.mid div {position:absolute;}
.layer.mid > div {width:500px;}
.layer.mid > div:nth-child(1) {top:15vh; right:18%; z-index:1;}
.layer.mid > div:nth-child(2) {top:65vh;left: 15%; z-index:5;}
.layer.mid > div:nth-child(3) {top:115vh;left: 40%; z-index:10;}
.circle {width: 300px;height: 300px; border-radius: 50%; border: 6px solid white; z-index:3; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
.layer.mid > div .circle:nth-of-type(1) {padding: 40px; display: flex; align-items: center;justify-content: center;text-align: center; background: url("../image/fact-1-bg.svg?v2") center / 63% no-repeat, #FFBF05; }
.layer.mid > div .circle:nth-of-type(2) {width: 280px; height: 280px; z-index:2; left:230px; top:140px;background:#ffffff;}
.circle img {width: 100%; height: 100%; object-fit: cover;}
.circle p {font-size:20px; line-height:30px; color:#ffffff; margin:0; }
.layer.mid > div .number {top: -120px; left: 200px; font-size: 170px; color:#ffffff; z-index:1; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);}
.layer.mid > div:nth-child(2) .circle:nth-of-type(1) {right:0; background: url("../image/fact-2-bg.svg") center / 80% no-repeat, #E3000F;}
.layer.mid > div:nth-child(2) .circle:nth-of-type(2) {left:0;}
.layer.mid > div:nth-child(2) .number {left:30px;}
.layer.mid > div:nth-child(3) .circle:nth-of-type(1) {background: url("../image/fact-3-bg.svg") center / 53% no-repeat, #00A19C;}
.split-wrapper{position:fixed;inset:0;z-index:90;pointer-events:none;}
.split-reveal{position:relative;width:100%;height:100%;clip-path: inset(50.01% 0 50.01% 0); -webkit-clip-path: inset(50.01% 0 50.01% 0); -webkit-transform: translateZ(0); transform: translateZ(0); will-change: clip-path, transform;}
.split-bg{position:absolute;inset:0;background-image:url("../image/sancus.webp?v2");background-size:cover;background-position:center;}
.split-light{position:absolute;inset:0;background:black;opacity:1;z-index:2;transition:opacity 0.05s ease;}
.split-content{position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width:50%; margin:0 6%; max-width:500px; color: #ECECEC;}
#trust{margin:25px 0;}

/*Diagonal Layout*/
.se-container{display: block; width: 100%; overflow: hidden;}
.se-slope{z-index:300; position:relative; width:100%; float:left;} 
.se-content{margin: 0 auto; position:relative;}
.middle-content .mainarticle{width: 70%; margin:0 auto; max-width: 850px; position:relative; clear:both;}
.middle-content .mainarticle2{width: 100%; margin:0 auto; max-width: 1200px; position:relative; margin-bottom:60px;}
.middle-content{float:left; position:relative;  width:100%;}
.diagonal-bg-top8, .diagonal-bg-top9, .diagonal-bg-home, .diagonal-bg-btm, .diagonal-bg-btm2 {width:100%; position:relative; float:left; line-height:0px;}
.diagonal-bg-top8, .diagonal-bg-top9{height:159px;  margin-top:-90px; z-index:210;}
.diagonal-bg-top8{background: url(../image/diagonal-top8.png) 0 0 no-repeat;}
.diagonal-bg-top9{background: url(../image/diagonal-top9.png) 0 0 no-repeat;}
.diagonal-bg-home {height:159px; background: url(../image/diagonal-bg-home2.webp) 50% 50% no-repeat;}
.se-slope:nth-child(2n+1) .diagonal-bg-btm {height:148px; background: url(../image/diagonal-bg2.png) 50% 50% #ffffff no-repeat;}
.se-slope:nth-child(2n) .diagonal-bg-btm{height:159px; background: url(../image/diagonal-bg.png) 50% 50% no-repeat;}
.diagonal-bg-btm2 {height:159px; background: url(../image/diagonal-bg2-btm.png) 50% 50% #cccccc no-repeat;}
.se-slope:nth-child(2n+1) .middle-content {background: #022a3a; color: #ffffff; padding:40px 0px 20px 0px;}
.se-slope:nth-child(2n) .middle-content{background: #ffffff; color: #666666; padding:30px 0px 20px 0px;}
.se-slope:nth-child(2n) .middle-content p a:hover {opacity:0.6}
.se-slope:nth-child(2n+1) .middle-content p a:hover {filter: brightness(1.3)}
.se-slope:last-child .middle-content{padding:0px 0px 10px 0;}
.se-slope:nth-child(2) h3 {margin:30px auto 50px auto;}

/*Standard Pages*/
.pic-half,.pic-half2,.pic-half3,.pic-half4 {width:40%; position:relative; float:left;}
.pic-half3,.pic-half4 {width:45%;}
.pic-half2,.pic-half4 {float:right;}
.case-history{padding:40px 0; width:100%; float:left; clear:both; border-top: dotted 1px; border-color:#cecece; }
.case-history:nth-child(2) {border:0;}
.text-half,.text-half2{width:55%; margin-left: 5%; position:relative; float:left;}
.text-half3,.text-half4{width:50%; margin-left: 5%; position:relative; float:left;}
.text-half2,.text-half4{margin-left: 0%; margin-right: 5%;}
.item-title{padding: 0 20px 15px 0px; color:#c2e6f3; width:25%;}
.item-title2{padding: 0 20px 15px 0px; color:#dcbfe1; width:25%;}
.item-text{padding-bottom:25px;}
.item-table {width:100%; margin-top:39px;}
.gels:nth-of-type(1) {margin-bottom:50px;}

/*Grid*/
.grid,.grid2,.grid3,.grid4,.grid5, .threetiles,.twotiles, .fourtiles,.fivetiles, .range {gap: 10px 40px; display: grid;}
.grid, .fivetiles {grid-template-columns: repeat(5, 1fr);}
.grid2 {grid-template-columns: repeat(6, 1fr);}
.grid3, .threetiles , .range {grid-template-columns: repeat(3, 1fr);}
.grid4, .fourtiles {gap: 10px 20px; grid-template-columns: repeat(4, 1fr);}
.grid5, .twotiles {gap: 10px 90px; grid-template-columns: repeat(2, 1fr);}
.range {gap:120px 0;}
.grid-item {position:relative; pointer:cursor; background-color:rgba(255, 255, 255, 0.0); padding:15px; transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1.5), box-shadow 0.35s ease, background-color 0.35s ease ;}
.infog{position:relative; cursor:pointer; text-align: center;}
.infog img {margin:50px 0 20px 0; max-width:150px; display:inline;}
.grid img, .grid2 img {margin:50px 0 15px 0; max-width:120px;}
.grid3 .infog{cursor:none;}
.grid5 .grid-item {padding:45px;}
.grid5 > a:hover > .grid-item{transform: scale(1.05); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); background-color:rgba(255, 255, 255, 0.15);}
a .grid-item p {color:#ffffff; margin:0;}
.infog a > img, .range a > img, .gels a > img, #listbody .infog img {transform: scale(1); transition:all 0.25s cubic-bezier(0.2, 1, 0.3, 1.5);}
.infog a:hover >img, .range a:hover >img, .gels a:hover >img,  #listbody .infog:hover img {transform: scale(1.1);}

/*App-page*/
#applications-top{width:100%;height:560px; z-index:95; -webkit-background-size: 1920px 560px; background-size: 1920px 560px; position:relative;display:block; z-index:20; clear:both; line-height:0px; background: 50% 0px #ffffff no-repeat}
.app-icon-top {width:120px; margin:-80px auto 20px auto; position:relative; z-index:250;}
.app-title{margin:0 auto 50px auto;  text-align:center; font-size:37px; line-height:39px;}
#listbody img{box-shadow: 0px 1px 3px rgba(0,0,0,0.4);}
.app-content a {color: #FFCD00;}

/*Bottom Menu*/
#bottom{width: 92%; margin: 0 auto; color:#ffffff;}
#btmleft {width:45%; margin-right: 5%;margin-top:6px; font-size:16px; position: relative; float: left;}
#btmright{width:50%; margin-top:6px; font-size:14px; position: relative; float: left;}
#btmcert {width:30%; position: relative; float: right; text-align:right;}
#btmcopy{width: 70%; position: relative; font-size:11px; margin-top:80px; float: left; color:#939393;}
#btmcopy a{color:#939393;} 
#bottom a:hover, #bottom a:active, #btmcopy a:hover, #btmcopy a:active, .contact a:hover, .contact a:active{color:#FFCD00;}
#certificate img{width:165px; position: relative; float: right;}
#bottom ul {width:50%; position:relative; float:left;}
#bottom ul li{padding-bottom:12px;}
.ctable {display:table; height:35px;}
.cell{display:table-cell; vertical-align:middle;}
.shikiri{border:0; border-top: dotted 1px; width:100%; border-color:#cecece; margin:10px 0 20px 0;}
.contact{width:48%; margin-right:2%; position:relative; float:left;}
.socials div {position: relative; float: left; max-width:35px; margin-right:10px; }
.socials {position: relative; float: right; width:100%; margin-top: 20px;}
.socials div img {z-index:80; transform: scale(1); transition:all 0.25s cubic-bezier(0.2, 1, 0.3, 1.5);}
.socials div img:hover {-webkit-transform: scale(1.3);transform: scale(1.3);}
#header.scroll a:hover.pipelinesmenu, #bottom a:hover.pipelinesmenu{color:#8CC63F;}
#header.scroll a:hover.decommenu, #bottom a:hover.decommenu{color:#aaaaaa;}
#header.scroll a:hover.cleaningmenu, #bottom a:hover.cleaningmenu{color:#e83b3c;}
#header.scroll a:hover.cementingmenu, #bottom a:hover.cementingmenu{color:#41a6cb;}
#header.scroll a:hover.carbonmenu, #bottom a:hover.carbonmenu{color:#11D5C1;}
#header.scroll a:hover.stimulationmenu, #bottom a:hover.stimulationmenu{color:#a694b4;}
#header.scroll a:hover.servicesmenu, #bottom a:hover.servicesmenu{color:#FFA227;}
#header.scroll a:hover.contactmenu, #bottom a:hover.contactmenu{color:#FFCD00;}

/*google map*/
#map_wrapper {position: relative;}
#map_canvas a:hover{color:  #FFCD00; text-decoration:none; transition: color .2s ease;}
#map_canvas a {color: #666666;  font-weight:300; text-decoration:none; transition: color .2s ease;}
#map_canvas a:visited {color: #666666;  font-weight:300; text-decoration:none;}
#map_canvas {height: 350px; overflow: hidden; position: relative;}
#map_canvas > div {background-color:#9c9c9c !important; }
.gm-style-iw button[aria-label="Close"] span,
.gm-style-iw-c button span {background-color: #000 !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 20px !important;  height: 20px !important;}
.info_content {padding: 5px; overflow:hidden; color:#666666; min-width:180px;}
.popup{width:100%; margin:5px 0;}
a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span, .gm-style-cc {display:none;}
.gmnoprint div {background:none !important;}
.info_content {margin: 25px 25px 10px 10px; overflow:hidden;}
.gm-style-iw-chr {width:24px; height:24px; position: absolute;   right: 15px; top: -7px;}
.gm-style-iw-d {max-height:200px !important; min-width:210px !important;}
/*Contact Form*/
#submit-button,.reqbutton,.clbutton, .gelbutton{border-radius:44px; font-size:15px;position: relative; display: block; padding: 11px 24px 13px 24px;margin: 40px auto 10px auto; min-width: 160px; vertical-align: middle; color: #ffffff;line-height: 20px;text-align: center; letter-spacing: 0.5px;cursor: pointer;opacity:1;transition: all .25s ease;}
#submit-button:hover:enabled, .gelbutton:hover {opacity:0.7;}
.gelbutton {display:inline-block; background-color:#8CC63F; color:#ffffff !important; margin: 0px auto 0 0;}
.gelbutton.yellow {background-color:#FFCD00; }
.gelbutton.yellow:hover {opacity:1; filter: brightness(1.15);}
.Contact-page #submit-button:hover:enabled ,.applications-page #submit-button:hover:enabled,#search-submit:hover {opacity:0.5;}
#search-submit2:hover {filter: brightness(1.15);}
#submit-button:disabled,.reqbutton:disabled{cursor:wait;}
#errormsg{width:100%; font-size: 18px; position:relative; display:block; float:left; clear:both; text-align:center; color:#ef848e;}
#contactf{width:100%; position:relative; min-height:400px;}
#contactf p{text-align:center;}
.confirm2{position:fixed; opacity:0.9; background-color: #12110c; vertical-align:middle; display:none; text-align: center;  z-index: 99999; width: 100%; height: 100%; }
.confirm{display:none; font-size:85px; display:table-cell; vertical-align:middle; text-align: center; }
.confirm  div{font-size:25px; width:100%; position:relative; float:left; margin-top:20px;}
hgroup {text-align:center; margin-top: 2em;}
.group {position: relative; margin-bottom: 45px;}
input, textarea{font-size: 18px;padding: 10px;-webkit-appearance: none;display: block;color: #636363;width: 100%;border: none;border-radius: 0;border-bottom: 1px solid #757575;}
input:focus, textarea:focus {outline: none;}
input, textarea{color: #666666;border-bottom: 1px dotted #666666;}
label {color: #999; font-size: 18px;font-weight: normal;position: absolute;pointer-events: none;left: 5px;top: 10px; transition: all 0.2s ease;transform-origin: top left;}
input:focus ~ label, input.used ~ label, textarea:focus ~ label, textarea.used ~ label{top: -20px;-webkit-transform: scale(.85);transform: scale(.85);left: -1px; color:#FFCD00}
.bar {position: relative; display: block; width: 100%;}
.bar:before, .bar:after {content: '';height: 2px; width: 0;bottom: 0px; position: absolute;background: #FFCD00; transition: all 0.2s ease;}
.Pipelines-page .bar:before, .Pipelines-page .bar:after {background:#8CC63F;}
.Cleaning-page .bar:before, .Cleaning-page .bar:after {background:#e83b3c;}
.Cementing-page .bar:before, .Cementing-page .bar:after  {background: #41a6cb;}
.Stimulation-page .bar:before, .Stimulation-page .bar:after  {background: #a694b4;}
.Decommissioning-page .bar:before, .Decommissioning-page .bar:after  {background: #898E90;}
.CCS-page .bar:before, .CCS-page .bar:after  {background: #11D5C1;}
.Services-page .bar:before, .Services-page .bar:after  {background: #FFA227;}
.Pipelines-page input:focus ~ label, .Pipelines-page input.used ~ label, .Pipelines-page textarea:focus ~ label, .Pipelines-page textarea.used ~ label, .cgreen, ol.green li::before {color:#8CC63F;}
.Cleaning-page input:focus ~ label, .Cleaning-page input.used ~ label, .Cleaning-page textarea:focus ~ label, .Cleaning-page textarea.used ~ label, .cred {color:#e83b3c;}
.Cementing-page input:focus ~ label, .Cementing-page input.used ~ label, .Cementing-page textarea:focus ~ label, .Cementing-page textarea.used ~ label, .cblue {color:#41a6cb;}
.Decommissioning-page input:focus ~ label, .Decommissioning-page input.used ~ label, .Decommissioning-page textarea:focus ~ label, .Decommissioning-page textarea.used ~ label, .cgrey{color:#898E90;}
.Stimulation-page input:focus ~ label, .Stimulation-page input.used ~ label, .Stimulation-page textarea:focus ~ label, .Stimulation-page textarea.used ~ label{color:#a694b4;}
.CCS-page input:focus ~ label, .CCS-page input.used ~ label, .CCS-page textarea:focus ~ label, .CCS-page textarea.used ~ label, .ctur{color:#11D5C1;}
.Services-page input:focus ~ label, .Services-page input.used ~ label, .Services-page textarea:focus ~ label, .Services-page textarea.used ~ label, .corange{color:#FFA227;}
.cyellow {color:#FFCD00;}
.bar:before {left: 50%;}
.bar:after {right: 50%;}
input:focus ~ .bar:before, input:focus ~ .bar:after, textarea:focus ~ .bar:before, textarea:focus ~ .bar:after  {width: 50%;}
textarea{height:48px; overflow-y:auto;}
.success-icon{width:120px;height:120px;display:block; margin:0 auto 25px auto; }
.circle,.tick{stroke:#3EAD31;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.circle{
  stroke-dasharray:264;stroke-dashoffset:264;
  fill:#ffffff;
  animation:drawCircle .9s cubic-bezier(.65,0,.35,1) forwards,
           fillCircle .9s ease forwards;
  animation-delay:0s,1.1s;
}
.tick{
  stroke-dasharray:70;stroke-dashoffset:70;transform-origin:50% 50%;
  animation:drawTick .6s cubic-bezier(.65,0,.35,1) forwards,
           tickToWhite .9s ease forwards;
  animation-delay:.85s,1.1s;
}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawTick{to{stroke-dashoffset:0}}
@keyframes fillCircle{to{fill:#3EAD31}}
@keyframes tickToWhite{to{stroke:white}}

/*Scroll Animations*/
.animitem{opacity: 0; transform: translate3d(0px, 90px, 0px); transition: transform 0.7s ease, opacity 0.7s ease; transition-delay: 0.1s; }
.animitem.case-history{transform: translate3d(0px, 0px, 0px);}
.split-content .trustp, .split-content .reqbutton {opacity: 0; transition: opacity 1.5s ease; transition-delay: 0.5s; }
.split-content .reqbutton {border: 2px solid white; transition-delay: 1s; max-width:300px;}
.in-view, .split-content.show .trustp {opacity: 1;}
.in-view {transform: translate3d(0px, 0px, 0px);}
.split-content.show .reqbutton {opacity: 1;  animation: pulseColor 6s infinite; pointer-events: auto;}
@keyframes pulseColor { 0% { background-color: rgba(255, 255, 255, 0.2);} 40% {background-color: rgba(255, 205, 0, 0.95);} 70% {background-color: rgba(255, 255, 255, 0.2);} 100% {background-color: rgba(255, 255, 255, 0.2);}}


/*Search*/
#search-submit, #search-submit2{border-radius:41px; background-color:#FFCD00; width:110px; color:#ffffff; font-size:15px; cursor:pointer; transition: all .25s ease;}
#search-input {position: absolute; top:9px; right:200px; width:70%; background:transparent; border:0;}
#search-submit{position: absolute; top:9px; right:75px; border:0; padding:9px 10px 11px 10px;}
#search-input2{padding: 10px;position: relative; width:88%; margin-right:2%; float:left; border:0;}
#search-submit2{position: relative; width:10%; float:right;padding:11px 10px 13px 10px; border:0; }
.result-item span{font-size:18px;}
.result-item p{color:#acacac;font-size:15px;}
.result-item p  > span {color:#ffffff;font-size:15px;}
.result-item{position: relative; width:100%; float:left; margin-top:40px;}
.top-spacer{position: relative; width:100%; float:left; margin-top:90px;}
.result-item div {position: relative; width:100%; float:left; margin-top:10px;}

/*Media Query*/

@media screen and (max-height: 800px) {
.rotating-text{max-width:630px;}
.slow img:nth-of-type(2){max-width:520px;}
}
@media screen and (max-height: 700px) {
.rotating-text{max-width:590px;}
.slow img:nth-of-type(2){max-width:490px;}
}

@media screen and (min-width: 1921px) {
.se-slope:nth-child(2n) .diagonal-bg-btm, .diagonal-bg-btm2, .diagonal-bg-top8,.diagonal-bg-top9, .diagonal-bg-home {background-size: 100% 159px; }
.se-slope:nth-child(2n+1) .diagonal-bg-btm {background-size: 100% 148px;}
#applications-top{background-position: 50% 25%; background-size: 101% auto;}
.pagetitle-bg-app{top:105px;margin-top:-50px;}
}

@media screen and (min-width: 1250px) {
a:hover.pipelinesmenu{color:#CDED88;}
a:hover.decommenu{color:#aaaaaa;}
a:hover.cleaningmenu{color:#ef848e;}
a:hover.cementingmenu {color:#c2e6f3;}
a:hover.carbonmenu{color:#11D5C1;}
a:hover.stimulationmenu {color:#ad9fbc;}
a:hover.servicesmenu {color:#F4A54E;}
a:hover.contactmenu{color:#F9DF6E;}
#sanccusmenu  {top:83px;}
#header.scroll a.pipelinesmenu, #header.scroll a.decommenu,#header.scroll a.cleaningmenu,#header.scroll a.cementingmenu,#header.scroll a.stimulationmenu,#header.scroll a.servicesmenu,#header.scroll a.contactmenu,#header.scroll a.carbonmenu   {color:#5f636a;}
#header.scroll #sanccusmenu{top:24px;}
#sanccusmenu li > ul > li {opacity:0;}
#header.scroll #sanccusmenu ul ul {background:rgba(8, 9, 9, 0.9);}
.top-spacer{margin-top:150px;}
}

@media screen and (min-width: 700px) {
.slow {min-height:600px;}
}

@media screen and (max-width: 1450px) {
#applications-top {background-size: 1611px 470px; height:495px; background-position:50% 25px;}
.se-slope:nth-child(2n) .diagonal-bg-btm {background-position:52% 50%;}
.diagonal-bg-top8,.diagonal-bg-top9{background-position:51% 50%;}
.app-icon-top {margin:-50px auto 15px auto;}
.middle-content .mainarticle2{width: 90%;}
.homepage .hero-content, .title {width: 55%;}
#trust{width:80%; margin:50px 10% 20px 10%;}
h2{font-size:24px;}
.range {width:95%;  margin:100px 1% 100px 4%;}
.layer.mid > div:nth-child(1) {right:6%;}
.layer.mid > div:nth-child(2){left: 6%;}
h1{font-size: 70px;}
.info_content {margin: 20px 15px 10px 10px;}
}

@media screen and (max-width: 1250px) {
.se-slope:nth-child(2n+1) .middle-content{padding:20px 0px 20px 0px;}
.se-slope:nth-child(2n) .middle-content{padding:20px 0px 0px 0px;}
.middle-content .mainarticle2 {margin-bottom:20px;}
#applications-top{height:480px; background-position:48% -15px;}
.diagonal-bg-top8,.diagonal-bg-top9{margin-top:-115px;}
.page-content .hero-content {width: 55%;}
path{stroke-width:3;}
.grid2 img{max-width:90px;}
.homepage .hero-content, .title {width: 60%;}
.range {width:90%;  margin:80px 2% 100px 8%;}
.range {grid-template-columns: repeat(2, 1fr);}
.range .animitem:nth-child(3), .range .animitem:nth-child(5) {transition-delay: 0.2s;}
.range .animitem:nth-child(4), .range .animitem:nth-child(6) {transition-delay: 0.4s;}
.grid5 {gap: 10px 60px;}
.grid5 .grid-item {padding:25px;}
#products.scroll {margin-top: 95vh;}
}

@media screen and (max-width: 1000px) {
#btmleft {width:96%; margin:2%;}
#btmright{width:96%; margin:30px 2% 0 2%;}
.middle-content .mainarticle{width: 85%;}
.diagonal-bg-top1,.diagonal-bg-top2,.diagonal-bg-top3,.diagonal-bg-top4,.diagonal-bg-top5,.diagonal-bg-top6, .diagonal-bg-top7{background-position:-100px 0px; margin-top:-70px;}
h1{font-size: 60px;}
.grid img {max-width:90px;}
.grid {gap: 10px 20px;}
.app-icon-top {width:95px;}
.app-title{font-size:30px; line-height:33px;margin:0 auto 30px auto;}
.confirm{font-size:60px;}
.confirm  div{font-size:20px; margin-top:10px; }
#search-input{width:60%;}
.pic-half3,.pic-half4{width:50%;}
.text-half3,.text-half4{width:45%;}
.hero-content {margin: 10px auto 0px auto;}
.page-content .hero-content {width: 65%;}
.title.ab {width: 68%;}
.grid2{grid-template-columns: repeat(3, 1fr);}
.grid2 img{max-width:120px;}
.split-content{width:68%; left: 27%;}
#trust{width:70%; margin:50px 15% 10px 15%;}
.homepage .hero-content, .title {width: 65%;}
.rotating-text{max-width:550px;}
.slow img:nth-of-type(2){max-width:450px;}
.layer.mid > div {width:410px;}
.layer.mid > div:nth-child(1) {right:4%;}
.layer.mid > div:nth-child(2){left: 4%;}
.circle {width: 250px;height: 250px; }
.layer.mid > div .circle:nth-of-type(1) {padding: 20px;}
.layer.mid > div .circle:nth-of-type(2) {width: 220px; height: 220px; z-index:2; left:190px; top:120px;}
.circle p {font-size:18px; line-height:28px;}
.layer.mid > div .number {top: -90px; left: 180px; font-size: 130px;}
}

@media screen and (max-width: 850px) {
.fourtiles, .fivetiles{grid-template-columns: repeat(3, 1fr);}
#btmcert {width:100%; margin-top:30px;}
#btmcopy{width: 100%; margin-top:10px;}
.two{height:120px;}
#applications-top{height:410px; background-position:49% 10px; background-size: 1371px 400px;}
.se-slope:nth-child(2n) .diagonal-bg-btm, .diagonal-bg-top8, .diagonal-bg-top9{background-position:54% 50%;}
.diagonal-bg-top8, .diagonal-bg-top9{margin-top:-88px;}
.pic-half3,.pic-half4{width:55%;}
.text-half3,.text-half4{width:40%;}
.homepage .hero-content, .title {width: 70%;}
.title.ab {width: 80%;}
.range {grid-template-columns: repeat(1, 1fr); width:80%;  margin:90px auto 100px auto; gap:20px 0;}
.range > div > div:first-child {flex: 40%;}
.range > div > div:last-child {flex: 60%; margin:0;}
.range > div {align-items: center; gap:30px; }
.range .animitem:nth-child(n) {transition-delay: 0.2s;}
.animitem{transform: translate3d(0px, 50px, 0px);}
.in-view{transform: translate3d(0px, 0px, 0px);}
.range > div:nth-child(2n) {text-align:right; flex-direction: row-reverse;} 
.range > div:nth-child(2n) h2 {text-align:right; }
.range > div:nth-child(2n) h2::after {margin: 10px 0 0 auto;}
.split-content{width:80%; left: 40%; margin:0 10%; }
.split-bg {filter: brightness(0.3)}
}

@media screen and (max-width: 800px){
.grid{grid-template-columns: repeat(2, 1fr);}
.grid img{margin:50px 0 12px 0; max-width:120px;}
#search-input2{ width:83%;}
#search-submit2{width:15%;}
.page-content .hero-content {width: 70%;}
h3 {margin:0px auto 25px auto;}
h2{font-size:22px;}
.se-slope:nth-child(2) h3 {margin:20px auto 25px auto;}
h6{font-size: 21px; line-height:25px;}
.gels:nth-of-type(1) {margin-bottom:30px;}
.title.ab {width: 80%;}
h1{font-size: 55px; line-height:60px;}
.title-line {margin:30px 0 20px 0;}
}

@media screen and (max-width: 700px) {
.pic-half,.pic-half2{width:50%; margin:0 25% 10px 25%;}
.gels .pic-half, .gels .pic-half2{width:70%; margin:0 15% 10px 15%;}
.text-half,.text-half2{width:100%; margin:10px 0%;}
.gelbutton {padding:7px;padding: 7px 10px 10px 10px; border:0; min-width:140px;}
#applications-top{height:350px; background-position:50% 50px; background-size: 1029px 300px;}
.app-icon-top {width:80px;margin:-40px auto 15px auto;}
#search-input{width:50%;font-size:15px; right:175px;}
#search-submit{width:90px;}
.grid5 {grid-template-columns: repeat(1, 1fr);}
.grid5 a {display: inline-block; max-width:420px; margin:10px auto;}
.split-bg{background-position:60% center;}
.layer.mid > div:nth-child(3) {left: 30%;}
}

@media screen and (max-width: 600px) {
.confirm{font-size:50px;}
.grid2, .fourtiles, .threetiles, .fivetiles {gap: 10px 20px; grid-template-columns: repeat(2, 1fr);}
.twotiles {gap: 10px 20px;}
.two{display:none;}
#applications-top{height:325px; background-position:50% 25px;}
#applications-top.debris-bg{background-position:50% 50px;  background-size: 857px 250px;}
#logo-white, #logo {left:11px;top:10px;}
#logo-white, #logo{width:55px;}
#header.scroll #logo-white,#header.scroll  #logo {left:8px;}
#header{height:90px;}
.grid3 img {max-width:100px;}
.grid3 {gap: 10px 15px;}
.grid img, .grid2 img {max-width:100px;}
.contact{width:100%; margin-right:0%;}
#btmcert {width:100%;}
#certificate img{float:left; width:100px;}
p,ol{font-size: 17px;}
h1{font-size: 50px; line-height:52px;}
.title-line {margin:25px 0 15px 0;}
.pic-half3,.pic-half4{width:90%; margin:0 5% 10px 5%;}
.text-half3,.text-half4{width:100%; margin:10px 0%;}
.homepage .hero-content, .title {width: 85%;}
.title.ab {width: 100%;}
path{stroke-width:4;}
.range {width:90%;margin:50px auto 70px auto; gap:40px 0;}
.range > div > div:first-child, .range > div > div:last-child  {flex: 50%;}
.layer.mid > div {width:350px;}
.circle {width: 220px;height: 220px;}
.layer.mid > div .circle:nth-of-type(1) {padding: 10px;}
.layer.mid > div .circle:nth-of-type(2) {width: 195px; height: 195px; z-index:2; left:170px; top:100px;}
.circle p {font-size:16px; line-height:20px;}
.layer.mid > div .number {top: -60px; left: 150px; font-size: 107px;}
.layer.mid > div:nth-child(3) {left: 20%;}
}

@media screen and (max-width: 480px) {
#search-input{width:45%;right:140px; font-size:14px;}
#search-submit{width:75px; padding:7px 8px 9px 8px; top:12px; right:65px;}
#applications-top{height:275px; background-size: 857px 250px;}
#applications-top.debris-bg{background-position:50% 50px;  background-size: 686px 200px;}
h1{font-size: 48px;}
}

@media screen and (max-width: 400px) {
.middle-content .mainarticle{width: 90%;}
#search-input{width:37%;}
.grid3 img {max-width:120px;}
.grid3 {grid-template-columns: repeat(1, 1fr);}
.grid3 .animitem:nth-child(n) {transition-delay: 0;}
.layer.mid > div:nth-child(3) {left: 8%;}
.layer.mid > div:nth-child(2){left: 3%;}
h1{font-size: 43px;}
}

@media (min-height: 650px) and (max-width: 500px) {
.rotating-text {width:128%; max-width:800px;}
.slow img:nth-of-type(2){width:106%; max-width:700px;}
}
@media (max-height: 500px){
.slow img {top: 70%;}
.split-content .reqbutton {margin-top:5px;}
.slow img:nth-of-type(2){max-width:600px;}
.rotating-text {max-width:750px;}
}

@media (max-height: 300px) and (max-width: 600px){
.slow img {top: 100%;}
}