/*
Theme Name: Sage Chemical
Author: Subatomic
Author URI: sosubatomic.com
Description: The 2020 responsive theme supported with widgets and custom plugins.
Version: 1.0
©2020 Subatomic, LLC
*/


@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}
/********************FONTS********************/
@font-face { font-family: 'pe-icon-social'; src:url('../fonts/pe-icon-social.eot'); src:url('../fonts/pe-icon-social.eot') format('embedded-opentype'), url('../fonts/pe-icon-social.woff') format('woff'), url('../fonts/pe-icon-social.ttf') format('truetype'), url('../images/pe-icon-social.svg') format('svg'); font-weight: normal; font-style: normal; } 

/********************BRAND STYLES********************/
::selection { background: #383739; color: white; }
body { background: #ffffff; color: #000000; font-family: 'Inter', sans-serif; 
font-size: 1.2em; line-height: 1.5; width: 100%; max-width: 100%; overflow-x: hidden;}
h1,h2,.h1,.h2 { color: #659a6d; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
h3,h4,h5,h6,.h3,.h4,.h5,.h6 { color: #659a6d; font-weight: 700; margin-bottom: 0; }
h1,.h1 { font-size: 2.5em; }
h2,.h2 { font-size: 2.1875em; }
h3,.h3 { font-size: 1.66666em; }
h4,.h4 { font-size: 1.5em; }
h5,.h5 { font-size: 1.2em; }
h6,.h6 { font-size: 1.2em; }
a,button,.btn { text-decoration: none; transition: 1s; }
	a:hover { text-decoration: underline; }
a { color: #215caa; }
	a:hover { color: #383739; }
	#social a:hover { color: #ffffff; }
button, .btn, .wp-block-button__link { background-color: #215caa; border: 0; border-radius: 6px; color: white; font-size: 1.1em; font-weight: 600; margin-top: 1rem; text-transform: uppercase; padding: .75rem 3rem;
    -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
	button:focus, .btn:focus { box-shadow: 0 0 0 0.2rem rgba(33, 92, 170, .25); }
	.wp-block-button__link { background-color: #659a6d; outline: 0; }
	.wp-block-button__link:focus { box-shadow: 0 0 0 0.2rem rgba(101, 154, 10, .25); }
	button:hover, .btn:hover, .wp-block-button__link:hover { color: white; text-decoration: none; }
	button:hover:before, button:focus:before, button:active:before, .btn:hover:before, .btn:focus:before, .btn:active:before, .wp-block-button__link:hover:before, .wp-block-button__link:focus:before, .wp-block-button__link:active:before{ -webkit-transform: scaleX(1); transform: scaleX(1); }
	button:before, .btn:before, .wp-block-button__link:before { border-radius: 6px; content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #383739;
	    -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.wp-block-gallery.controls #controls #prev { border-color: transparent #555555 transparent transparent; border-width: 12px 12px 12px 0; }
.wp-block-gallery.controls #controls #next { border-color: transparent transparent transparent #555555; border-width: 12px 0 12px 12px; }
.cycle-pager span { background-color: #c9c9c9; border: #c9c9c9; }
.cycle-pager span.cycle-pager-active  { background-color: #555555; border: #555555; }
.pull-up { -webkit-transition: opacity 1.2s ease-out,-webkit-transform 1.2s ease-out; -moz-transition: opacity 1.2s ease-out,-moz-transform 1.2s ease-out; transition: opacity 1.2s ease-out,transform 1.2s ease-out; -webkit-transform: translate(0,100%); -moz-transform: translate(0,100%); -ms-transform: translate(0,100%); transform: translate(0,100%); -webkit-transform: translate3d(0,100%,0); -moz-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); opacity: 0; }
.pull-right { -webkit-transition: opacity 1.2s ease-out,-webkit-transform 1.2s ease-out; -moz-transition: opacity 1.2s ease-out,-moz-transform 1.2s ease-out; transition: opacity 1.2s ease-out,transform 1.2s ease-out; -webkit-transform: translate(-100%,0); -moz-transform: translate(-100%,0); -ms-transform: translate(-100%,0); transform: translate(-100%,0); -webkit-transform: translate3d(-100%,0,0); -moz-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); opacity: 0; }
.pull-down { -webkit-transition: opacity 1.2s ease-out,-webkit-transform 1.2s ease-out; -moz-transition: opacity 1.2s ease-out,-moz-transform 1.2s ease-out; transition: opacity 1.2s ease-out,transform 1.2s ease-out; -webkit-transform: translate(0,-100%); -moz-transform: translate(0,-100%); -ms-transform: translate(0,-100%); transform: translate(0,-100%); -webkit-transform: translate3d(0,-100%,0); -moz-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); opacity: 0; }
.pull-left { -webkit-transition: opacity 1.2s ease-out,-webkit-transform 1.2s ease-out; -moz-transition: opacity 1.2s ease-out,-moz-transform 1.2s ease-out; transition: opacity 1.2s ease-out,transform 1.2s ease-out; -webkit-transform: translate(100%,0); -moz-transform: translate(100%,0); -ms-transform: translate(100%,0); transform: translate(100%,0); -webkit-transform: translate3d(100%,0,0); -moz-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 1; 
-webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;
}
.pull-up.animate,.pull-right.animate,.pull-down.animate,.pull-left.animate { -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
hr { border-top: #215caa solid 5px; margin: 4rem auto; width: 30%; }
main h4.styled:before,main h4.styled:after { content: ''; display: inline-block; height: 5px; background-color: #215caa; width: 50px; vertical-align: middle; }
main h4.styled:before{ margin-right: .5rem; }
main h4.styled:after{ margin-left: .5rem; }
main h4 { margin-bottom: 1rem; }

/********************STRUCTURAL STYLES********************/
header { background-color: rgba(56, 55, 57,.5); position: relative; width: 100%; }
	header.has-background-color { background-color: #383739; }
	header { min-height: 100vh; display: flex; display: -ms-flexbox; display: -webkit-flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }
	header .row { min-height: 100vh; }
	@media (min-width: 991px) { 
		header .row { display: flex; display: -ms-flexbox; display: -webkit-flex; -ms-flex-align: center; align-items: center; }
	}
	header.has-cta .row { min-height: calc(100vh - 100px); }
	.site-title img { height: auto; width: 200px; }
	@media (min-width: 991px) { 
		.site-title img {  width: 330px; }
		header.has-cta .row { min-height: calc(100vh - 50px); }
	}
	.site-title h1 span { position: absolute; text-indent: -9999px; }
    .site-description { font-style: italic; font-size: 12px; line-height: 15px; padding-left: 33px; }
	.btn-menu { cursor: pointer; display: inline-block; position: absolute; right: 1.75rem; top: 1.5rem; z-index: 10001; }
	.btn-menu svg { height: 48px; width: 48px; }
	.btn-menu svg rect { fill: #659a6d; }
	header .nav-container { text-align: right; }
	header nav ul { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; list-style: none; margin: 1.5rem 0; padding: 0; text-align: center; }
	header nav ul li { -webkit-box-flex: 0; flex: 0 0 160px; max-width: 160px; margin: .5rem 0 .5rem 1.75rem; display: flex; display: -ms-flexbox; display: -webkit-flex; }
    header nav li a { background-color: #659a6d; border: 3px solid white; color: white; display: block; font-size: 1.2rem; padding: 2rem 0rem; line-height: 1.25; width: 100%; }
	header nav li a:hover { text-decoration: none; }
	header nav li a .element { font-size: 4rem; font-weight: 700; }
	header nav li a:hover .element { text-decoration: underline; }
	header h1,header h2,header h3 { color: #ffffff; margin-bottom: 3rem; text-shadow: 5px 5px 5px rgba(0,0,0,.5); }
	header.compat-object-fit { background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; margin-top: -75px; padding-top: calc(75px + 5rem); }
	header.compat-object-fit img:first-child:not(.logo) { opacity: 0; }
	.hero-image { object-fit: cover; -o-object-fit: cover; height: 100%; width: 100%; left: 50%; transform: translateX(-50%); bottom: 0; position: fixed; z-index: -1; }
	header.unfixed .hero-image { position: absolute; }
	.hero-text { display: flex; display: -ms-flexbox; display: -webkit-flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-justify-content: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: flex-start; align-items: flex-start; padding-top: 1.5rem; padding-bottom: 1.5rem; }
	.hero-text button, .hero-text .btn { margin-bottom: 0; }
	header .cta { background-color: #659a6d; color: white; font-size: 1.2em; font-weight: 600; min-height: 50px; padding-top: .5rem; padding-bottom: .5rem; text-align: center; width: 100%; }
	@media (min-width: 991px) { 
		.btn-menu { display: none; }
	}
@media (max-width: 992px) { 
	header nav { background: #585858; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; height: 100vh; min-height: 100vh; max-height: 100vh; position: fixed; -webkit-transform: translate(120%); transform: translate(120%); -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out; overflow-x: hidden; z-index: 999; padding: 4rem 1rem; }
	body.menu-open { height: 100%; height: 100vh; min-height: 100vh; max-height: 100vh; overflow: hidden; pointer-events: none; touch-action: none; }
	body.menu-open header nav { -webkit-transform: translate(0); transform: translate(0); }
	body.menu-open header nav, body.menu-open .btn-menu { pointer-events: auto; touch-action: auto; }
	#return-to-top { background: white; }
	#return-to-top:before { border-color: transparent transparent transparent #555555; border-width: 0 12px 12px 12px; }
}
main { background-color: white; position: relative; }
main, section { background-color: white; padding: 4rem 0; }
footer { background-color: #659a6d; color: white; font-size: .8em; }
	footer a { color: white; }
	footer .row { display: flex; display: -ms-flexbox; display: -webkit-flex; -ms-flex-align: center; align-items: center; }
    [class^="pe-so-"], [class*=" pe-so-"] { display: inline-block; font-family: 'pe-icon-social'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; height: 30px; text-transform: none; line-height: 1; width: 30px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	#social { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; text-align: center; }
		#social a { float: left; font-size: 20px; display: inline-block; margin-right: 8px; padding: 5px 0; text-align: center; text-decoration: none; overflow: hidden; }
		#social a:hover { text-decoration: none; }
        #social span { display: block; }
        #social a.pe-so-linkedin:hover { background: #0077b5; }
		    .pe-so-linkedin:before { content: "\e62c"; }
        #social a.pe-so-facebook:hover { background: #3b5998; }
		    .pe-so-facebook:before { content: "\e617"; }
        #social a.pe-so-twitter:hover { background: #00aced; }
		    .pe-so-twitter:before { content: "\e651"; }
        #social a.pe-so-youtube:hover { background: #bb0000; }
		    .pe-so-youtube:before { content: "\e661"; }
        #social a.pe-so-google:hover { background: #dd4b39; }
            .pe-so-google:before { content: "\e620"; }
        #social a.pe-so-instagram:hover { background: #bc2a8d; }
		    .pe-so-instagram:before { content: "\e626"; }
        #social a.pe-so-pinterest:hover { background: #e60023; }
            .pe-so-pinterest:before { content: "\e638"; }
        @media (max-width: 767px) { 
			#social a { font-size: 35px; height: 48px; padding: 6px 0; width: 48px; } 
			#social a.pe-so-facebook { font-size: 42px; } 
		}
	    footer .row { padding-top: 10px; padding-bottom: 10px; }
		footer .textwidget p:last-child { margin-bottom: 0; }
		@media (min-width: 992px) {  
			footer .row { min-height: 30px; }
			footer .footer-right { text-align: right; } 
			#social { -ms-flex-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; }
		}
		@media (max-width: 991px) { 
			footer { padding-bottom: 15px; padding-top: 15px; }
			#social { margin-top: .75rem; }
		}
		
/********************SECTION STYLES********************/
.breadcrumbs { padding: 1rem 0 0; }
.wp-block-column.highlight { background-color: #659a6d; color: white; font-size: 1.4em; padding: 3rem 2rem; }
	.wp-block-columns:last-of-type { margin-bottom: 0; }
	@media (min-width:782px){.wp-block-column:not(:first-child){margin-left:5rem}}
	@media (max-width: 991px) { .wp-block-column {flex-basis: 100%!important; } .wp-block-column:not(:first-child){margin-top: 2rem;} }
.image-block .block,.image-block .block a,.image-block .block h2 { position: relative; }
	.image-block .column { display: flex; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; }
	.image-block .block { display: flex; display: -ms-flexbox; display: -webkit-flex; min-height: 250px; -ms-flex-align: flex-end; align-items: flex-end; height: 100%; margin: .75rem 0; }
	.image-block .block.compat-object-fit { background-repeat: no-repeat; background-size: cover; background-position: center center; }
	.image-block .block.compat-object-fit img:first-child { opacity: 0; }
	.image-block .block.has-background-color { background-color: #383739; }
	.image-block .block img { -webkit-filter: brightness(50%); filter: brightness(50%); object-fit: cover; -o-object-fit: cover; height: 100%; width: 100%; left: 0; top: 0; position: absolute; }
	.image-block h2,.image-block .h2 { color: white; font-size: 1.66666em; font-weight: 700; font-style: italic; padding: .5rem 1rem; }
	.image-block a { display: flex; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: flex-end; align-items: flex-end; height: 100%; width: 100%; }
	.image-block a:hover { background-color: rgba(33, 92, 170,.85); text-decoration: none; }
.cta-container { background-color: #383739; text-align: center; }
	.cta-container h1,.cta-container h2 { color: #ffffff; }
	button:before, .btn:before, .wp-block-button__link:before { background: #659a6d; }
	@media (min-width: 992px) { .cta-container { text-align: right; } }
.carousel-container { background-color: #ebebec; text-align: center; }
	.carousel-container h1,.carousel-container h2,.carousel-container h3,.carousel-container h4,.carousel-container h5,.carousel-container h6 { color: #215caa; }

.wp-block-gallery.slider .blocks-gallery-grid { display:block; width: 100%;}
	.wp-block-gallery.slider .blocks-gallery-grid .cycle-carousel-wrap { display: flex!important; display: -ms-flexbox!important; display: -webkit-flex!important; }
	.wp-block-gallery.slider .blocks-gallery-grid, .wp-block-gallery.slider .blocks-gallery-grid .blocks-gallery-item { max-height: 50vh;     margin: 0 auto!important; width: 90%; }
	.wp-block-gallery.slider .blocks-gallery-grid .blocks-gallery-item figure { margin: 0 8px; }
	.wp-block-gallery.slider .blocks-gallery-grid .blocks-gallery-item img { object-fit: cover; -o-object-fit: cover; height: 100%; width: 100%;}
	@media (min-width: 768px) { 
	    .wp-block-gallery.slider.columns-3 .blocks-gallery-grid .blocks-gallery-item img { border: 2rem solid transparent; }
	    .wp-block-gallery.slider.columns-3 .blocks-gallery-grid .blocks-gallery-item.cycle-slide-active img { border: 0; }
	    .wp-block-gallery.slider.columns-5 .blocks-gallery-grid .blocks-gallery-item img { border-left: .5rem solid transparent; border-top: 1rem solid transparent; border-right: .5rem solid transparent; border-bottom: 1rem solid transparent; }
	    .wp-block-gallery.slider.columns-5 .blocks-gallery-grid .blocks-gallery-item.cycle-slide-active img { border-bottom: 0; border-top: 0; }
		.wp-block-gallery.slider.columns-3 .blocks-gallery-grid .blocks-gallery-item img, .wp-block-gallery.slider.columns-5 .blocks-gallery-grid .blocks-gallery-item img {
			-webkit-transition: -webkit-transform .1s ease-out; transition: -webkit-transform .1s ease-out; transition: border .1s ease-out; transition: border .1s ease-out,-webkit-transform .1s ease-out;
		}
		.wp-block-gallery.slider.columns-3 .blocks-gallery-grid .blocks-gallery-itemcycle-slide-active img, .wp-block-gallery.slider.columns-5 .blocks-gallery-grid .blocks-gallery-itemcycle-slide-active img {
			-webkit-transition: -webkit-transform .3s ease-in; transition: -webkit-transform .3s ease-in; transition: border .3s ease-in; transition: border .3s ease-in-out,-webkit-transform .3s ease-in;
		}
	}
	.wp-block-gallery.controls { position: relative; }
	.wp-block-gallery.controls #controls { position: absolute; top: 0; bottom: 0; left: 1%; width: 98%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }
	.wp-block-gallery.controls #controls a { border-style: solid; display: inline-block; height: 0; width: 0; }
	.cycle-pager { margin-top: 1rem; text-align: center; width: 100%; position: relative; }
	.cycle-pager span { border-radius: 50%; cursor: pointer; height: 8px; width: 8px; margin-right: 8px; margin-left: 8px; display: inline-block; text-indent: -8px; overflow: hidden; }
	@media (max-width: 991px) { 
		#return-to-top { border-radius: 4px; bottom: 8px; cursor: pointer; right: 8px; height: 48px; width: 48px; position: fixed; z-index: 9999; }
		#return-to-top:before { content: ''; border-style: solid; display: inline-block; height: 0; width: 0; margin: 26px 17px; transform: rotate(45deg); }
	}
.carousel { width:calc(100% - 80px); margin: 0 auto }
@media (min-width: 992px) { .carousel { width:100%; } }
	.carousel-control-next, .carousel-control-prev { display:flex; width: 30px; }
	.carousel-item.active, .carousel-item-next, .carousel-item-prev { display: flex; }
	.carousel-control-prev { left: -35px; }
	.carousel-control-next { right: -35px; }
	.carousel-control-prev-icon,.carousel-control-next-icon { display: inline-block; width: 30px; height: 30px; background: no-repeat 50% / 100% 100%;}
	.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); }
	.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); }
	@media (max-width: 991px) {  
		.carousel-desktop { display: none; }
	}
	@media (min-width: 992px) { 
		.carousel-mobile { display: none; }
	}
	
.meilong {
	width: 350px;
}
/*This file was exported by "Export WP Page to Static HTML" plugin which created by ReCorp (https://myrecorp.com) */