/***** BEGIN RESET *****/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; } ol, ul { list-style: none; } table { border-collapse: collapse; width: 100%; } td { vertical-align: top; }
/* Make HTML 5 elements display block-level for consistent styling */ header, nav, article, footer, address { display: block; } 
/***** END RESET *****/
::-moz-selection { background: #000;  color: #fff; text-shadow: none; } 
::selection { background: #000; color: #fff; text-shadow: none; }
/* Clearfix */
.cf { *zoom: 1; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } 

/*-------- BODY STYLES --------*/
html { scroll-behavior: smooth; }
body {}

a:link, a:visited, a:active, a:hover { text-decoration: none; }
hr { border: #000 1px solid; }
header, footer, section, main, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, i, ol, ul, li, form, :before, :after { box-sizing: border-box; }

/*--- HEADER STYLES ---------------------*/
header {}

.aria-skip { position: relative; width: 0px; height: 0px; display: flex; font-size: 0px; opacity: 0; }

.cts-header, header.cts-header { position: relative; z-index: 1004; width: 100%; margin-bottom: -1px; }

.header-top { position: relative; z-index: 1; width: 100%; background: var(--dark-gray); display: flex; justify-content: space-between; align-items: stretch; box-shadow: 0 0 12px rgba(0, 0, 0, .15); padding-left: max(8px, calc(50vw - 1000px)); }

.cts-logo { display: flex; flex-direction: row; justify-content: center; align-items: center; column-gap: 8px; row-gap: 16px; }
.cts-logo img { object-fit: contain; object-position: center; }
.company-name { font-family: var(--font-family2, 'sol-pro', sans-serif); font-weight: 900; line-height: 1.1; letter-spacing: .5px; font-style: italic; font-variant-caps: small-caps; color: #fff; text-shadow: 0 1px 4px #000, 0 1px 10px #000; }

.cts-header .cts-logo { justify-content: flex-start; padding: 6px 12px; }
.cts-header .cts-logo img { width: 150px; }
.cts-header .cts-logo .company-name { font-size: 30px; text-align: left; }

.headertop-right { position: relative; display: flex; justify-content: flex-end; align-items: stretch; filter: drop-shadow(-1px 0 8px rgba(0, 0, 0, .5)); color: #fff; }

.headertop-right-left, .headertop-right-right { display: flex; align-items: center; }

.headertop-right-left { padding-right: 32px; }

.headertop-right-right { background: var(--primary); padding-left: 72px; padding-right: max(24px, calc(50vw - 1000px)); clip-path: polygon(42px 0%, 100% 0%, 100% 100%, 0 100%); gap: 20px; }
.headertop-right-right .text2 { font-size: 20px; }
.headertop-right-right a.text2 { padding: 0 16px; min-height: 42px; }

.nav-div { position: absolute; z-index: 3; top: calc(100% + 16px); right: max(24px, calc(50vw - 1000px)); background: #000; border-radius: var(--bora, 20px); display: flex; flex-direction: row; align-items: stretch; height: 56px; padding: 0 16px; }

/*---BODY--------------------------------*/
/* Text / Titles / Paragraphs / <h1><h2><h3><h4> / <p> */
.paragraph, .p, .p-sm, .p-lg, .ctspage, label { width: 100%; font-family: var(--font-family, 'kranto-display', sans-serif); font-size: 16px; font-weight: 400; line-height: 1.6; }
.p-sm { font-size: 14px; }
.p-lg { font-size: 20px; }

.text2 { font-family: var(--font-family, 'kranto-display', sans-serif); font-size: 20px; font-weight: 600; line-height: 1.6; }

a { display: inline; color: inherit; text-decoration: none; transition: .25s ease all; }
a:hover { color: var(--primary); }
.bg-red a:hover, a.red:hover, .headertop-right-right a.text2:hover { color: var(--mgray); }
p a:hover, .title1 a:hover, .title2 a:hover, .title3 a:hover, .title4 a:hover { text-decoration: underline; }

.title1, .title2, .title3, .title4 { font-family: var(--font-family2, 'sol-pro', sans-serif); line-height: 1.25; letter-spacing: .5px; width: 100%; }
.title1 { font-weight: 900; }
.title2, .title3, .title4, label { font-weight: 700; }

.title1 { font-size: 60px; text-transform: uppercase; font-style: italic; }
.title2 { font-size: 40px; }
.title3 { font-size: 32px; }
.title4 { font-size: 24px; }

/* buttons / links / <a> / ctas */
.btnclass, .arrow-btn, .btn2, .btn3, .icon-link, a.text2 { position: relative; min-width: 50px; min-height: 50px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: .25s ease all; }

.btnclass, .arrow-btn, .btn2, .btn3 { padding: 8px 16px; column-gap: 16px; justify-content: center; text-align: center; font-family: var(--font-family, 'kranto-display', sans-serif); font-size: 17px; font-weight: 900; letter-spacing: .25px; text-transform: uppercase; text-shadow: none!important; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }

.btnclass { background: var(--primary); color: #fff; }
.btnclass:hover { background: #000; color: #fff; text-shadow: none!important; }

.btn2, .btnclass.btn2 { background: var(--mgray); color: #000; }
.btn2:hover, .btnclass.btn2:hover { background: #000; color: #fff; }

.btn3, .btnclass.btn3 { background: #fff; color: #000; }
.btn3:hover, .btnclass.btn3:hover { background: #000; color: #fff; }

.btn4, .btnclass.btn4 { background: #000; color: #fff; }
.btn4:hover, .btnclass.btn4:hover { background: var(--primary); color: #fff; }

.arrow-btn, .btnclass.arrow-btn { flex-grow: 1; justify-content: space-between; text-align: left; column-gap: 24px; }
.arrow-btn:after, .btnclass.arrow-btn:after { position: relative; content: "\f30b"; font-family: 'Font Awesome 7 Free', icon; font-weight: 900; text-align: right; }

.xl-btn { min-height: 100px; padding: 24px max(3.5%, 24px); font-size: 24px; }

.icon-link { justify-content: center; }
.icon-link i { font-size: 20px; text-align: center; }

/* sections */
.fw-content { position: relative; width: 100%; padding: 50px max(3.5%, calc(50% - 800px)); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fw-content > .xl-btn { width: 100%; max-width: min(100%, 1200px); }
.fw-content p { width: 100%; max-width: 700px;}

.btns-holder { position: relative; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 16px; }
.xl-btns-holder { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; }
.xl-btns-holder .xl-btn { min-width: calc(50% - 12px); flex-grow: 1; }
.contact-cols { position: relative; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 16px; }

.content-sect { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 16px; }

.mission { position: relative; width: 100%; display: flex; justify-content: center; align-items: stretch; column-gap: 50px; row-gap: 40px; }
.mission > .content-sect { width: 50%; padding: 40px 0; }
.mission .missionimg { position: relative; width: 50%; min-height: 320px; display: flex; justify-content: center; align-items: center; }

/*.missionimg img, .hero > img, .subhero > img, .bg-img > img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }*/
img.img-contain { object-fit: contain; }
/*.mission .missionimg img.img-contain { position: relative; width: 100%; height: auto; max-height: 600px; object-fit: contain; }*/

.map-div { display: flex; align-items: stretch; }
.map-div iframe { width: 100%; min-height: 450px; background: var(--lgray); border-radius: var(--bora, 20px); }

/* Homepage - default.htm */
#homepage, .subpage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
#homepage {}

main { width: 100%; }

.hero, .subhero, .bottom-cut { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 80px), 50% 100%, 0% calc(100% - 80px)); padding-top: 50px; padding-bottom: 130px; }

.top-cut { clip-path: polygon(0% 0%, 50% 80px, 100% 0%, 100% calc(100% + 1px), 0% calc(100% + 1px)); padding-top: 130px; padding-bottom: 50px; }
.both-cut { clip-path: polygon(0% 0%, 50% 80px, 100% 0%, 100% calc(100% - 80px), 50% 100%, 0% calc(100% - 80px)); padding-top: 130px; padding-bottom: 130px; }

.hero, .subhero { position: relative; z-index: 5; padding: 130px max(3.5%, calc(50% - 800px)) 140px; display: flex; justify-content: space-between; align-items: center; gap: 50px; background-image: url('/siteart/hero1.jpg'); background-size: cover; background-position: 78% 75%; background-repeat: no-repeat; }
.hero:before, .subhero:before { position: absolute; z-index: 3; content: ""; top: 0; left: 0; width: 100%; height: 280px; background-image: linear-gradient(180deg, rgba(85, 85, 85, .8) 0%, rgba(85, 85, 85, 0) 100%); }

.hero { min-height: 500px; background-color: var(--notblack); }

.bg-img, .bg-img-fixed { position: relative; }
.bg-img-fixed { background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }

.bg-img > *:not(.bgimg) { position: relative; z-index: 3; }
.bgimg, .missionimg img:not(.img-contain) { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.missionimg img.img-contain { position: relative; width: 100%; height: auto; object-fit: contain; object-position: center; }

.hero-overlay { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
.hero-overlay .title1 { margin-bottom: 12px; }
.hero-overlay .title1 + .title3 { margin-top: -16px; margin-bottom: 12px; }
.hero-overlay .arrow-btn { flex-grow: 0; }

.ctas-sect { position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.is-cta, .is-cta-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 24px; text-align: left; }
.is-cta, .is-cta:before, .is-cta .bgimg { border-radius: var(--bora, 20px);  }
.is-cta { width: calc(33.333333% - 10.7px); padding: 24px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.is-cta > *:not(.bgimg) { position: relative; z-index: 3; }
.is-cta-content { flex-grow: 100; }
.is-cta p { margin-bottom: auto; font-size: 14px; font-weight: 300; line-height: 1.85; letter-spacing: .3px; }
.is-cta .btnclass { /*margin-top: 8px;*/ }
.cta-dgray { color: #fff; background: var(--mgray2); }
.cta-lgray { color: #000; background: var(--lgray); }
.cta-red { color: #fff; background: var(--primary); }
.cta-white { color: #000; background: #fff; }
.cta-blur { /*color: #000;*/ background: rgba(0, 0, 0, .3); }
.cta-blur:before { position: absolute; z-index: -1; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; background: rgba(90, 90, 90, .25); backdrop-filter: blur(10px); }

.cta-lgicon { font-size: 66px; }

.cta-50 { width: calc(50% - 8px); }

.contact-cols { position: relative; }
.contact-col { position: relative; width: max(calc(50% - 8px), min(200px, 100%)); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }

/* subpages */
.subpage {}

.subhero { background-color: var(--mgray2, #626262); padding-top: 110px; padding-bottom: 120px; }

.subhero + .top-cut { margin-top: -80px; }

/* about-us.htm */
#aboutpage {}

.arrowdown-div { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 40px 0; }
.has-arrowdown {}
.is-arrowdown { position: relative; margin: -28px auto; width: 56px; height: 56px; border-radius: 28px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 24px; background: var(--red); color: #fff; transition: .25s ease all; }
.is-arrowdown:hover { background: var(--dgray); color: var(--lgray); }

.smt-40 { scroll-margin-top: 24px; }

/* blog.htm */


.indiblogpage .subhero, .subhero.xs-subhero { padding-bottom: 50px; }
.indiblogpage .subhero:before, .subhero.xs-subhero:before { background-image: linear-gradient(180deg, rgba(85, 85, 85, .9) 0%, rgba(35, 35, 35, .6) 100%); height: 100%; }
.indiblogpage .subhero .hero-overlay, .subhero.xs-subhero .hero-overlay { align-items: center; /* text-align: center; */ }
.indiblogpage .subhero .hero-overlay .btns-holder, .subhero.xs-subhero .hero-overlay .btns-holder { justify-content: center; }
.indiblogpage .subhero .title1, .subhero.xs-subhero .title1 { font-size: 40px; }
.indiblogpage .subhero .title3, .subhero.xs-subhero .title3 { font-size: 22px; }

.feat-intro { font-size: 18px; }

.bullet-list { list-style-type: none; letter-spacing: .25px; }
.bullet-list li { transition: .15s ease all; background: rgba(255, 255, 255, 0); padding: 5px 16px 5px 14px; }
.bullet-list li:before { content: "\f105"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: relative; margin-right: 8px; color: var(--red);}
.bullet-list li:hover { background: rgba(187, 187, 187, .25); }

.number-list { list-style-type: none; letter-spacing: .25px; }
.number-list li { transition: .15s ease all; background: rgba(255, 255, 255, 0); padding: 5px 16px 5px 14px; }
.number-list li .count {margin-right: 8px; color: var(--red); font-weight: 600;}
.number-list li:hover { background: rgba(187, 187, 187, .25); }

.blog-sm-list .is-cta { padding: 16px 20px; }

/* contact-us.htm */
#contactpage {}

#contactpage .ctas-sect .is-cta p { color: var(--red); font-size: 22px; font-weight: 700; }

#contactpage .map-div { width: 100%; }
#contactpage .map-div iframe { height: 350px!important; min-height: 350px!important; }

/* parts.htm */
#partspage {}

.team-cards .is-cta { row-gap: 12px; text-align: center; max-width: 400px; }
.team-cards .is-cta .jobtitle { color: var(--red); letter-spacing: .5px; margin-top: -10px; }

.grid-list { position: relative; list-style-type: none; column-count: 4; }
.grid-list li { break-inside: avoid; padding: 0 16px 4px 16px; transition: .15s ease all; background: #fff; }
.grid-list li:before { content: "\2713"; color: var(--red); margin-right: 8px; font-size: 24px; }
.grid-list li:hover { background: #f0f0f0; }

.grid-list-2 { position: relative; list-style-type: none; column-count: 2; }
.grid-list-2 li { break-inside: avoid; padding: 0 16px 4px 16px; transition: .15s ease all;}
.grid-list-2 li:before { content: "\2713"; color: unset; margin-right: 8px; font-size: 24px; }
.grid-list-2 li:hover { background: #f0f0f0; }

/* thank-you.htm */
#thankyoupage {}

/* recommended styles */
.ta-c, .ta-c .title, .ta-c p, .title.ta-c/*, p.ta-c*/ { text-align: center; }
p.ta-c {text-align: left;}
.ta-r, .ta-r .title, .ta-r p, .title.ta-r, p.ta-r { text-align: right; }
.ta-l, .ta-l .title, .ta-l p, .title.ta-l, p.ta-l { text-align: left; }

.tt-u { text-transform: uppercase; }

.txt-white, .txt-white span, .txt-white h1, .txt-white h2, .txt-white h3, .txt-white h4, .txt-white p, 
.darkmode, .darkmode .title, .darkmode .subtitle, .darkmode p, 
.shadowed, .shadowed .title, .shadowed .subtitle, .shadowed p { color: #fff; }

.shadowed { text-shadow: 1px 1px 0 #000, 0 1px 12px rgba(0, 0, 0, .8); }

.dropshadow { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); }
.dropshadow .btnclass { box-shadow: none; }

hr { position: relative; border: 0; margin: 0 auto; width: min(100%, 92vw); height: 3px; background-color: var(--lgray); }

.txt-black { color: #000; }

.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }

.f-row { display: flex; flex-direction: row; }
.f-col { display: flex; flex-direction: column; align-items: flex-start; }
.f-wrap, .fw-w { flex-wrap: wrap; }

.jc-c { justify-content: center; }
.jc-fs { justify-content: flex-start; }
.jc-sb { justify-content: space-between; }

.ai-c { align-items: center; }
.ai-fe { align-items: flex-end; }
.ai-fs { align-items: flex-start; }
.ai-s { align-items: stretch; }

.ac-c { align-content: center; }

.width33, .mission > .content-sect.width33, .mission .missionimg.width33 { width: 33.333333%; }
.width40, .mission > .content-sect.width40, .mission .missionimg.width40 { width: 40%; }
.width50 { width: 50%; }
.width60, .mission > .content-sect.width60, .mission .missionimg.width60 { width: 60%; }
.width66, .mission > .content-sect.width66, .mission .missionimg.width66 { width: 66.666667%; }
.width100 { width: 100%; }

.padtb-20 { padding-top: 20px; padding-bottom: 20px; }
.padtb-24 { padding-top: 24px; padding-bottom: 24px; }
.padtb-40 { padding-top: 40px; padding-bottom: 40px; }
.padtb-50 { padding-top: 50px; padding-bottom: 50px; }
.padtb-80 { padding-top: 80px; padding-bottom: 80px; }

.padt-24 { padding-top: 24px; }
.padt-32 { padding-top: 32px; }
.padt-50 { padding-top: 50px; }
.padt-130 { padding-top: 130px; }

.padb-24 { padding-bottom: 24px; }
.padb-32 { padding-bottom: 32px; }
.padb-50 { padding-bottom: 50px; }
.padb-130 { padding-bottom: 130px; }

.padlr-norm, .pad1, .foot-bottom { padding-left: max(3.5%, calc(50vw - 900px)); padding-right: max(3.5%, calc(50vw - 900px)); }

.foot-top, .pad2 { padding-left: max(9%, calc(50% - 800px)); padding-right: max(9%, calc(50% - 800px)); }

.padlr-pad2helper { padding-left: max(5.5%, calc(50% - 800px)); padding-right: max(5.5%, calc(50% - 800px)); }

.margtb-20 { margin-top: 20px; margin-bottom: 20px; }
.margtb-40 { margin-top: 40px; margin-bottom: 40px; }

.margt-16 { margin-top: 16px; }
.margt-20 { margin-top: 20px; }
.margt-40 { margin-top: 40px; }
.margt-60 { margin-top: 60px; }

.margb-neg40 { margin-bottom: -40px; }
.margb-neg10 { margin-bottom: -10px; }
.margb-neg8 { margin-bottom: -8px; }
.margb-8 { margin-bottom: 8px; }
.margb-16 { margin-bottom: 16px; }
.margb-20 { margin-bottom: 20px; }
.margb-80 { margin-bottom: 80px; }

.marglr-auto { margin-left: auto; margin-right: auto; }

.margl-auto { margin-left: auto; }

.margr-auto { margin-right: auto; }

.gap20 { gap: 20px; }

.colgap-24 { column-gap: 24px; }
.colgap-60 { column-gap: 60px; }
.colgap-lg { column-gap: min(200px, 10vw); }

.rowgap-24 { row-gap: 24px; }
.rowgap-24 { row-gap: 24px; }
.rowgap-32 { row-gap: 32px; }
.rowgap-40 { row-gap: 40px; }
.rowgap-50 { row-gap: 50px; }

.z3 { position: relative; z-index: 3; }

/* forced styles */
.txt-bold, strong { font-weight: 900!important; }

.force-padtb-0 { padding-top: 0!important; padding-bottom: 0!important; }
.force-padt-0 { padding-top: 0!important; }
.force-padb-0 { padding-bottom: 0!important; }

.force-padlr-0 { padding-left: 0!important; padding-right: 0!important; }
.force-padl-0 { padding-left: 0!important; }
.force-padr-0 { padding-right: 0!important; }

.force-bora-0 { border-radius: 0!important; }

.force-colgap-0 { column-gap: 0!important; }
.force-rowgap-0 { row-gap: 0!important; }

/*-------- FORM STYLES now located in formstyles.css --------------------*/

/*-------- FOOTER STYLES ----------------*/
footer {}
footer .red {background: linear-gradient(rgba(0,0,0,0));}

.cts-footer, footer.cts-footer { background: var(--dark-gray); position: relative; width: 100%; display: flex; flex-direction: column; }

.foot-top, .foot-bottom { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; }

.foot-top { color: #fff; /*padding: 80px max(9%, calc(50% - 800px));*/ padding-top: 70px; padding-bottom: 70px; row-gap: 50px; }

.foot-top a { min-height: 50px; display: flex; align-items: center; }

.foot-nav, .foot-copyright, .foot-logo-col, .foot-soc, .foot-contact, .foot-association { position: relative; display: flex; flex-direction: column; justify-content: center; }

.foot-nav, .foot-contact { width: calc(50% - 200px); }
.foot-copyright, .foot-association { width: calc(50% - 100px); }

.foot-nav, .foot-copyright { align-items: flex-start; }

.foot-nav {}

.foot-nav a { min-height: 36px; }

.footDpdown1-a { cursor: pointer; }
.foot-dpdown { background: var(--notblack); border-radius: 6px; padding: 4px 12px; margin: 0 -12px; transition: border-radius .2s ease; }
.foot-dpdown a { color: var(--lgray); }
.foot-dpdown a:hover { color: var(--primary); }
.foot-dpdown.is-open { border-radius: var(--bora); }

.foot-logo-col, .foot-soc { align-items: center; }

.foot-logo-col {}

.cts-footer .cts-logo { flex-direction: column; margin-bottom: 24px; }
.cts-footer .cts-logo img { width: 150px; }
.cts-footer .cts-logo .company-name { font-size: 20px; text-align: center; }

.foot-contact, .foot-association { text-align: right; }

.foot-contact { align-items: flex-end; row-gap: 20px; }

.foot-bottom { background: var(--notblack); color: var(--lgray); /*padding: 50px max(3.5%, calc(50% - 900px));*/ padding-top: 32px; padding-bottom: 32px; }

.foot-copyright {}

.foot-soc, .foot-association { flex-direction: row; gap: 8px; }

.foot-soc {}

.foot-association { justify-content: flex-end; }

.underline {position: relative; display: flex; justify-content: flex-end;}
.underline::after {content: ''; position: absolute; bottom: -1px; height: 1px; width: 100%; max-width: 300px; background: var(--white); right: 0;}

/*-------- Variable STYLES ----------------*/
:root {
	/* Site Colors: */
	--primary: #e31a30; 	/* var(--primary, #e31a30); 	rgba(227, 26, 48, 1); 	*/
		--red: var(--primary); 
	
	--lgray: #ccc; 			/* var(--lgray, #ccc); 			rgba(187, 187, 187, 1); */
		--light-gray: var(--lgray); 
    
    --white: #fff;
	
	--mgray: #bbb; 			/* var(--mgray, #bbb); 			rgba(187, 187, 187, 1); */
		--medium-gray: var(--mgray); 
	
	--mgray2: #626262; 		/* var(--mgray2, #626262); 		rgba(98, 98, 98, 1); */
		--medium-gray: var(--mgray2); 
	
	--dgray: #222; 			/* var(--dgray, #222); 			rgba(34, 34, 34, 1); 	*/
		--dark-gray: var(--dgray);
	
	--notblack: #1b1b1b; 	/* var(--notblack, #1b1b1b); 	rgba(27, 27, 27, 1); 	*/
		--not-black: var(--notblack);
	
	--bora: 20px; 	/* var(--bora, 20px); */
	
	--bora-sm: 8px; /* var(--bora-sm, 8px); */
	
	--font-family: 'kranto-display', sans-serif; 	/* var(--font-family, 'kranto-display', sans-serif); */
		--paragraph: var(--font-family); 
	
	--font-family2: 'sol-pro', sans-serif; 			/* var(--font-family2, 'sol-pro', sans-serif); */
		--title: var(--font-family2); 
}

.red, .primary { color: var(--red, #e31a30); }
.bg-red, .bg-primary { background-color: var(--red, #e31a30); }

.lgray, .light-gray { color: var(--lgray, #ccc); }
.bg-lgray, .bg-light-gray { background-color: var(--lgray, #ccc); }

.bg-lgray .red, .bg-light-gray .red { background: linear-gradient(rgba(255,255,255,0)); }

.mgray, .medium-gray { color: var(--mgray, #bbb); }
.bg-mgray, .bg-medium-gray { background-color: var(--mgray, #bbb); }

.mgray2, .medium-gray2 { color: var(--mgray2, #626262); }
.bg-mgray2, .bg-medium-gray2 { background-color: var(--mgray2, #626262); }

.dgray, .dark-gray { color: var(--dgray, #222); }
.bg-dgray, .bg-dark-gray { background-color: var(--dark-gray, #222); }

.notblack { color: var(--notblack, #1b1b1b); }
.bg-notblack { background-color: var(--notblack, #1b1b1b); }

.black {color: var(--notblack);}

.bg-red .grid-list li {background: transparent;}
.bg-red .grid-list li::before {color: var(--white);}

.bora { border-radius: var(--bora, 20px); }

.bora-sm { border-radius: var(--bora-sm, 8px); }

/* fonts */
.font-family { font-family: var(--font-family, 'kranto-display', sans-serif); }
.font-family2 { font-family: var(--font-family2, 'sol-pro', sans-serif); }

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inv-foot-spacer { display: flex; width: 100%; height: 80px; background: var(--notblack); }

/* AT styles */
.list.listing { display: flex!important; }

/*---------- RESPONSIVE STYLES ----------*/

/* min-width media queries go smallest px value to largest, so the largers are lower down so the styles take / so the styles aren't overridden */
@media only screen and (min-width: 2101px) {	/* MIND THE MIN-WIDTH */
	.hero, .subhero, .bottom-cut { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 120px), 50% 100%, 0% calc(100% - 120px)); padding-bottom: 170px; }
	.top-cut { clip-path: polygon(0% 0%, 50% 80px, 100% 0%, 100% 100%, 0% 100%); padding-top: 170px; }
	.both-cut { clip-path: polygon(0% 0%, 50% 120px, 100% 0%, 100% calc(100% - 120px), 50% 100%, 0% calc(100% - 120px)); padding-top: 170px; padding-bottom: 170px; }
	.hero { padding-top: 140px; padding-bottom: 180px; }
	.subhero { padding-top: 130px; padding-bottom: 160px; }
}

@media only screen and (min-width: 2501px) {	/* MIND THE MIN-WIDTH */
	.hero, .subhero, .bottom-cut { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 180px), 50% 100%, 0% calc(100% - 180px)); padding-bottom: 200px; }
	.top-cut { clip-path: polygon(0% 0%, 50% 80px, 100% 0%, 100% 100%, 0% 100%); padding-top: 200px; }
	.both-cut { clip-path: polygon(0% 0%, 50% 180px, 100% 0%, 100% calc(100% - 180px), 50% 100%, 0% calc(100% - 180px)); padding-top: 200px; padding-bottom: 200px; }
	.hero { padding-top: 150px; padding-bottom: 240px; }
	.subhero { padding-top: 140px; padding-bottom: 220px; }
}

/* end min-width (only) media queries. start max-width media queries */

@media only screen and (max-width: 1500px) {
	.title1 { font-size: 48px; }
	.title2 { font-size: 36px; }
	.title3 { font-size: 28px; }
	.title4 { font-size: 22px; }
	
	.cts-header .cts-logo img { width: 134px; }
	.cts-header .cts-logo .company-name { font-size: 26px; }
	.headertop-right-left { padding-right: 24px; }
	.headertop-right-right { padding-left: 60px; padding-right: 16px; gap: 16px; }
	
	.foot-top { padding-top: 50px; padding-bottom: 50px; }
}

@media only screen and (max-width: 1400px) {
	.grid-list { column-count: 3; }
}

@media only screen and (max-width: 1320px) {
	.title1 { font-size: 44px; }
	.title2 { font-size: 32px; }
	.title3 { font-size: 25px; }
	.title4 { font-size: 22px; }
	
	.cts-header .cts-logo img { width: 124px; }
	.cts-header .cts-logo .company-name { font-size: 24px; }
	.headertop-right-left { padding-right: 16px; }
	.headertop-right-right { padding-left: 50px; padding-right: 12px; gap: 8px; clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 0 100%); }
	.nav-div { top: calc(100% + 12px); right: 12px; }
	
	.padlr-norm, .pad1, .foot-bottom { padding-left: 2.5%; padding-right: 2.5%; }
	.foot-top, .pad2 { padding-left: 5%; padding-right: 5%; }
	.padlr-pad2helper { padding-left: 2.5%; padding-right: 2.5%; }
	
	.foot-top, .pad2 { padding-left: 5%; padding-right: 5%; }
	.foot-top { padding-top: 40px; padding-bottom: 40px; }
}

@media only screen and (max-width: 1200px) {
	.header-top { padding-left: 0; }
	
	.team-cards .is-cta, .does50s .is-cta { width: calc(50% - 8px); }
	
	.indiblogpage .subhero .title1, .subhero.xs-subhero .title1 { font-size: 32px; }
	.indiblogpage .subhero .title3, .subhero.xs-subhero .title3 { font-size: 20px; }
}

@media only screen and (max-width: 1160px) {
	.is-cta { width: min(100%, 1000px); padding: max(3.5%, 20px) max(3.75%, 12px); }
	.cta-lgicon { font-size: 40px; }
	
	.blog-sm-list .is-cta { padding: 20px; }
}

@media only screen and (max-width: 1120px) {
	.hide1120 { display: none!important; }
	
	.foot-top { flex-wrap: wrap; }
	.foot-top a { justify-content: center; }
	.foot-logo-col { order: 1; width: 100%; }
	.foot-nav, .foot-contact { width: calc(50% - 12px); align-items: center; text-align: center; }
	.foot-nav { order: 2; }
	.foot-contact { order: 3; }
}

@media only screen and (max-width: 1080px) {
	.hide1080 { display: none!important; }
	
	.mission .hide1080 + .content-sect { width: 100%; }
}

@media only screen and (max-width: 1000px) {
	.xl-btn { min-height: 80px; }
	
	.hero, .subhero, .bottom-cut { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 40px), 50% 100%, 0% calc(100% - 40px)); padding-bottom: 100px; }
	.top-cut { clip-path: polygon(0% 0%, 50% 40px, 100% 0%, 100% 100%, 0% 100%); padding-top: 120px; }
	.both-cut { clip-path: polygon(0% 0%, 50% 40px, 100% 0%, 100% calc(100% - 40px), 50% 100%, 0% calc(100% - 40px)); padding-top: 120px; padding-bottom: 120px; }
	.hero { padding-top: 140px; padding-bottom: 110px; min-height: unset; }
	.subhero { padding-top: 100px; padding-bottom: 70px; }
	
	.mission { flex-direction: column; align-items: center; }
	.mission.mission-cr { flex-direction: column-reverse; }
	.mission > .content-sect { width: 100%; padding: 0; }
	.mission .missionimg { width: 90%; max-height: 400px; }
	.mission .missionimg img { max-height: 400px; }
	.mission .missionimg img.img-contain { width: auto; max-width: 100%; }
	
	.grid-list { column-count: 2; }
	
	.foot-bottom { padding-bottom: 80px; }
}

@media only screen and (max-width: 880px) {
	.header-top { padding-top: 50px; justify-content: center; }
	.cts-header .cts-logo { justify-content: center; }
	.headertop-right { position: absolute; top: 0; left: 0; width: 100%; height: 50px; }
	.headertop-right-right { width: 100%; height: 50px; clip-path: none; justify-content: center; gap: 22px; padding: 0 0 0 16px; }
	.headertop-right-right .f-col { flex-direction: row; }
	.headertop-right-right a.text2 { height: 50px; }
	.nav-div { right: 50%; transform: translateX(50%); min-width: min(700px, 98%); justify-content: center; padding: 0; height: 50px; }
}

@media only screen and (max-width: 810px) {
	.team-cards .is-cta { width: 100%; }
}

@media only screen and (max-width: 800px) {
	.title1 { font-size: 32px; }
	.title2 { font-size: 24px; }
	.title3 { font-size: 22px; }
	.title4 { font-size: 20px; }
	
	.hero, .subhero, .hero-overlay, .hero-overlay .btns-holder { justify-content: center; align-items: center; text-align: center; }
	
	.hero { padding-top: 110px; padding-bottom: 90px; }
	.subhero { padding-top: 90px; padding-bottom: 50px; }
	
	.indiblogpage .subhero .title1, .subhero.xs-subhero .title1 { font-size: 26px; }
	.indiblogpage .subhero .title3, .subhero.xs-subhero .title3 { font-size: 18px; }
	
	.foot-nav, .foot-contact { width: 100%; }
	.foot-contact { order: 2; }
	.foot-nav { order: 3; }
	
	.foot-bottom { flex-direction: column; padding-bottom: 100px; }
	.foot-copyright, .foot-association { width: 100%; align-items: center; justify-content: center; text-align: center; }
}

/* switch to mobile nav */
@media only screen and (max-width: 720px) {
	.cts-header .cts-logo { padding-top: 2px; padding-bottom: 2px; }
	.cts-header .cts-logo img { width: 116px; }
	.cts-header .cts-logo .company-name { font-size: 22px; }
	.nav-div { min-width: min(122px, 98%); }
	
	.mission .missionimg { width: 100%; }
	
	.does50s .is-cta { width: 100%; }
	.blog-sm-list .is-cta { box-shadow: none; padding: 12px 0; }
}

@media only screen and (max-width: 650px) {
	.padlr-pad2helper { padding-left: 0; padding-right: 0; }
}

@media only screen and (max-width: 550px) {
	.title1 { font-size: 28px; }
	
	.header-top { padding-top: 94px; }
	.headertop-right { height: 94px; }
	.headertop-right-right { height: 94px; gap: 0; padding: 0; flex-direction: column; justify-content: flex-end; }
}

@media only screen and (max-width: 480px) {
	.hide480 { display: none!important; }
	
	.cts-header .cts-logo { column-gap: 2px; }
	.cts-header .cts-logo img { width: 110px; }
	.cts-header .cts-logo .company-name { font-size: 20px; }
}

@media only screen and (max-width: 450px) {
	.btnclass { width: 100%; margin-left: auto; margin-right: auto; }
}

@media only screen and (max-width: 420px) {
	.cts-header .cts-logo { flex-direction: column; padding-bottom: 12px; row-gap: 0; }
	.cts-header .cts-logo .company-name { text-align: center; }
}

@media only screen and (max-width: 380px) {
	.header-top { padding-top: 144px; }
	.headertop-right { height: 144px; }
	.headertop-right-right { height: 144px; }
	.headertop-right-right .f-col { flex-direction: column; width: 100%; }
	.headertop-right-right a, .headertop-right-right .text2 { width: 100%; justify-content: center; text-align: center; }
	
	.btnclass { padding-left: 8px; padding-right: 8px; }
}