/* Historic Cattle Trails site styles */
/* fonts and colors and tweaks */


body { font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; font-weight: normal; font-weight: 400; font-style: normal; color: #000000; }
em, i { font-style: italic; }
strong, b { font-weight: 700; }

.msg, .message, .message-box, .msginline, .msgstatic  {  color: #B3001B; }

header { background: transparent; border-bottom: 1px solid transparent; z-index: 8;}
header.contrast { background: white; border-bottom: 1px solid white;}

#header-content { width: 90%; }
#logo1 {  font-family: TwilightScript; font-size: 1.7em; z-index: 5; position: absolute; top: 10;  }
#logo-image { background: transparent url("/_assets/hct_longhorn_120x105.png") no-repeat fixed top left; height: 120px; width: 105px; }
#logo1 a, #logo1 a:link, #logo1 a:visited, #logo1 a:hover, #logo1 a:active  {  color: #000000; }

#header-menu-link a { margin-right: 0; margin-top: 3px; background: transparent url('/_assets/transparent_mobile_menu_link_black.png') no-repeat; display: block; height: 42px; width: 34px;  }
#header-menu-link.contrast a { background: transparent url('/_assets/transparent_mobile_menu_link_black.png') no-repeat; }
#header-content a, #header-content a:link, #header-content a:visited, #header-content a:hover, #header-content a:active { color: #000000; text-decoration: none; }
#header-content .logo1-b a, #header-content .logo1-b a:link, #header-content .logo1-b a:visited, #header-content .logo1-b a:hover, #header-content .logo1-b a:active { color: #e88a24; text-decoration: none; }

#menu1 li a { padding: 0.8em 0.8em; color: #000000; }
#menu1 li a:hover { background: transparent;  }
#menu1 ul li.selected a { background: transparent;  }
#menu1.contrast li a { color: #000000; }

#menu2 { z-index: 9; width: 300px; height: 100%; position: fixed; top: 0; right: 0; }
#menu2 li.menu-link {  text-align: right;   } 
#menu2 li a { background: #000000; }
#menu2 li a:hover { background: #200A00;  }
#menu2 ul li.selected a { background: #200A00;  }
 
/* #c-pagephoto { position: absolute; top: 0; min-height: 400px; background-position: 50%; background-size: cover; transition: background-image 0.2s ease-in-out; }  */

.l-wrap { max-width: 1240px; }

h1,h2,h3,h4 { font-weight: 700; color: #0A1128;}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }

input[type='submit'], input[type='button'].u-btn-std, button { background-color: #001F54; border: 1px solid #001F54; }

.c-sitefooter2_fineprint { font-size: .8em; }

/* checkout form overrides */
.f-radio-toolbar label {   background-color: #001F54; }
.f-radio-toolbar label:hover { background: #0A6871;  }
.f-radio-toolbar input[type='radio']:checked + label { background-color: #0A6871; box-shadow: 0 0 5px rgb(15 187 204); border: 2px solid rgba(15, 187, 204, 1); }

.radio-slideswitch label:hover { background: #0A6871; }
.radio-slideswitch input[type=radio]:checked + label { background-color: #0A6871;  }

ul.shop-listchooser li { background: #3A001E; }
ul.shop-listchooser li.tag-selected { background: #0A6871; box-shadow: 0 0 5px rgb(15 187 204); border: 2px solid rgba(15, 187, 204, 1); }

ul.country-options li { background-color: #0A6871; }
ul.country-options li.disabled { background-color: #3A001E;  }

ul#country-list li { background: #3A001E; }
ul#country-list li.tag-selected { background: #0A6871;  }

ul.u-listtextbuttons li { background-color: #001F54; border: 1px solid #001F54; }
ul.u-listtextbuttons li.selected { background-color: #0A6871; box-shadow: 0 0 5px rgb(15 187 204); border: 2px solid rgba(15, 187, 204, 1);  }

/* news */
.l-grid1  { margin-bottom: 2.5em; } 
.l-grid1 article { background-color: #FFFFFF; padding: 0; }
.l-grid1 article img { min-height: 300px; z-index: 1; }
.l-grid1 article div.grid-text { background-color: #02336b; padding: 2em 1.5em; margin-top: -1em; z-index: 9; min-height: 130px; }
.l-grid1 article div.grid-text h3 { font-weight: 700; text-align: left; color: #FFFFFF; }
.l-grid1 article div.grid-text h3 a, .l-grid1 article div.grid-text h3 a:link, .l-grid1 article div.grid-text h3 a:visited, .l-grid1 article div.grid-text h3 a:hover,
    .l-grid1 article div.grid-text h3 a:active {  color: #FFFFFF; text-decoration: none; }
.l-grid1 article div.grid-text h3 a:hover { text-decoration: underline; }

/* partners */
.l-grid2 { margin-top: 2em; display: grid; grid-template-columns: 1fr; grid-gap: 1em;  }
.l-grid2 article { max-width: 70%; margin: 0 auto; }
@media only screen and (min-width: 840px), print { 
  .l-grid2 { grid-template-columns: 1fr 1fr 1fr; }
  .l-grid2 article { max-width: 100%; }
  }

/* about page */
.l-grid3 { display: grid; grid-template-columns: 1fr; grid-gap: .5em;  }
.l-grid3 article {  padding: .1em;  }
.l-grid3 article img.person-photo { position: relative; border-radius: 100%;  }
.l-grid3 article .person-overlay-1 { border-radius: 100%; color: #fafafa; display: flex; flex: 0 0 200px; height: 250px; justify-content: center; overflow: hidden; position: relative; width: 250px; }
.l-grid3 article .person-overlay-1 img {  height: 100%; }
.l-grid3 article .person-info { align-items: center; position: absolute; top: -30px; left: -30px; justify-content: center; opacity: 0; padding: 5em; border-radius: 100%; transition: opacity .5s ease; 
  z-index: 1; }
.l-grid3 article .person-info:hover { background-color: rgba(0, 0, 0, 0.5); opacity: 1; }
.l-grid3 article .person-name { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 1rem; }
.l-grid3 article .person-title { text-align: center;  margin-bottom: 1em; }
.l-grid3 article .person-contact { text-align: center;  font-size: 10px; margin-bottom: 1.6em; }
@media only screen and (min-width: 540px) { .l-grid3 { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 800px), print { .l-grid3 { grid-template-columns: 1fr 1fr 1fr; } }
@media only screen and (min-width: 1150px), print { .l-grid3 { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media only screen and (min-width: 1500px), print { .l-grid3 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

@media (hover: none) and (pointer: coarse) {
     .l-grid3 { row-gap: 2em;  margin-bottom: 4em; }
     .l-grid3 article  { display: flex;  flex-direction: column; margin-bottom: 1em; }
     .l-grid3 article:nth-child(8) { margin-bottom: 4em;  } 
     .l-grid3 article:not(:first-child) { margin-top: 4em;  } 
     .l-grid3 article:last-child { margin-bottom: 4em;  } 
     .l-grid3 article .person-overlay-1  {  height: auto; min-height: 250px;  overflow: visible; }
     .l-grid3 article .person-info {   order: 1;   opacity: 1;  color: #000000;  }
     .l-grid3 article .person-name  { margin-top: 203px; margin-bottom: 0; } 
     .l-grid3 article .person-title {  margin-bottom: 0; }
}

/* product info boxes */
.l-grid4 { margin-top: 2em; display: grid; grid-template-columns: 1fr; grid-gap: 1em;  }
@media only screen and (min-width: 550px) { .l-grid4 { grid-template-columns: 1fr 1fr; } }
@media only screen and (min-width: 840px), print { .l-grid4 { grid-template-columns: 1fr 1fr 1fr; } }
@media only screen and (min-width: 1100px), print { .l-grid4 { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* left-right page sections on product pages */
.l-grid5 {  margin-top: 1em; display: grid; grid-template-columns: 1fr; column-gap: 1em; row-gap: 0; }

/* contact page  */
.l-grid6  {  margin-top: 1em; display: grid; grid-template-columns: 1fr; grid-gap: 1em;  font-size: 1em;  color: #545454; }
.l-grid6 p  { font-size: 1em; }

@media (min-width: 60em) { 
.l-grid6 { grid-template-columns: 1fr 1fr; row-gap: 1em; }
.l-grid6 section { padding-right: 1em; }
.l-grid6 section:nth-of-type(1) { padding-left: 1em; }
.l-grid6 section:nth-of-type(2) { padding: 0; }
} 

/* footer sections */
.l-grid7 {  margin-top: 1em; display: grid; grid-template-columns: 1fr; column-gap: 1em; row-gap: 0; }

@media (min-width: 40em) { 
.l-grid7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 1em; }
section#g7-1 { grid-column: 1 / 3; }
section#g7-2 {  grid-column: 3 / 6; }
section#g7-3 {   }
section#g7-4 {  grid-column: 7 / 10; }
section#g7-5 {  grid-column: 10 / 11; }
}

/* top of front page */
.l-grid8 {  display: grid; grid-template-columns: 1fr; column-gap: 1em; row-gap: 0; }

@media (min-width: 40em) { 
.l-grid8 { grid-template-columns: 1fr 1fr; row-gap: 1em; }
} 

/* basic three-column plus customer types front page */
.l-grid9 {  display: grid; grid-template-columns: 1fr; column-gap: 1em; margin-bottom: .7em; }

@media (min-width: 40em) { 
.l-grid9 { grid-template-columns: 1fr 1fr 1fr; row-gap: 1em;  }
}

/* featured products front page */
.l-grid10 {  display: grid; grid-template-columns: 1fr; column-gap: 1em; row-gap: 1em;  margin-bottom: 1.5em; }
section#g10-2 { border: 3px solid #08408C; border-radius: 10px;  margin: 0 1em; }

@media (min-width: 40em) { 
.l-grid10 { grid-template-columns: 1fr 1fr 1fr 1fr; }
section#g10-2 {  grid-column: 2 / 4;  grid-row: 1; }
section#g10-3 {  grid-column: 4 / 5;   }
} 

/* centered section for form or text */
.l-grid111{  display: grid; grid-template-columns: 1fr; column-gap: 0; row-gap: 0;  margin-bottom: 1.5em; }
@media (min-width: 40em) { 
.l-grid111 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;  column-gap: 1em; row-gap: 1em;}
section#g111-2 {  grid-column: 2 /6;  grid-row: 1; }
} 

.contact-header { font-weight: 700; }
.material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; color: #FFFFFF; margin-right: 1em; margin-top: .5em; }

.section-divider { margin: 1.5em 0; background-color: #08408C;  height: .2em; } 

div.video-responsive { padding: 56.25% 0 0 0; position:relative; margin: 1em 1em; }
@media (min-width: 60em) {  
div.video-responsive { margin: 1em 15%;  }
}

.u-liststd-pt {  list-style-type: none;  }
.u-liststd-pt li { list-style: none; position: relative; margin-bottom: .5em; padding-left: 2em; }
.u-liststd-pt li::before { content: '' ''; position: absolute; width: 2em; height: 100%; top: 0; left: 0; 
    background-image: url(/_assets/2023/bullet_40x40.png); background-size: 1em 1em; background-repeat: no-repeat; background-position: center; }
	
.u-liststd-pt-right { direction: rtl;  }
.u-liststd-pt-right { list-style-type: none; }
.u-liststd-pt-right li { list-style: none; position: relative; margin-bottom: 0.5em; padding-right: 2em; }
.u-liststd-pt-right li::before { content: '' ''; position: absolute; width: 2em; height: 100%; top: 0; right: 0; 
    background-image: url(https://owdev23.com/_assets/2023/bullet_40x40.png); background-size: 1em 1em; background-repeat: no-repeat; background-position: center; }
	
.cust-type { padding: 1em; font-size: 1.2rem; line-height: 1.2; text-align: center; border: 3px solid #08408C; border-radius: 10px; }
.cust-type-name { font-weight: 700; font-size: 1.4em;  color: #08408C; margin-bottom: 1em; }

.validator { text-align: center; }
.validator-header { font-weight: 700; font-size: 1.4em; }	

/* featured products front page */
.prod-name { font-weight: 700; color: #333333; font-size: 1.2em;  margin: 1em 0 0 0;  }
.prod-name a, .prod-name a:link, .prod-name a:visited, .prod-name a:hover, .prod-name a:active { color: #333333; }
.prod-desc  { font-size: 1.2em;  margin: 1em 0 .7em 0; }
.prod-learn-more { display: inline-block; margin-left: 2em; }
.prod-imglink  {  }
#prod-img { min-height: 400px; background-position: 50%; background-size: cover; transition: background-image 0.2s ease-in-out; background-image: url(/_assets/2023/cobalt_controller_on_white_20230620.png);  }
#prod-img-textblock { background: #02336b; padding: 1em; color: #FFFFFF;  min-height: 4em; }
#prod-img-textblock .prod-name { color: #FFFFFF; }
.prod-img-data { display: none; }
	
.product-section-image { height: 100%; min-height: 350px; background-position: 50%; background-size: cover; transition: background-image 0.2s ease-in-out; }

.c-products-list { text-align: center; }
.c-products-list ul { margin: 0 auto; display: inline-block; }
.c-products-list ul li { display: inline-block; margin: 1rem;
  padding: 1em;  font-size: 1.2rem; line-height: 1.2;  text-align: center;
  border: 2px solid #747474;; border-radius: 10px; }
.c-products-list ul li:nth-of-type(odd) { border-color: #08408C; }
.c-products-list ul li a, .c-products-list ul li a:link, .c-products-list ul li a:visited, .c-products-list ul li a:hover, .c-products-list ul li a:active {  text-decoration: none;  color: #08408C;  border-bottom: 2px solid transparent; transition: all ease-in-out 300ms;}
.c-products-list ul li a:hover { border-color: #08408C; }
	
.product-data { width: 200px; background: #02336b;  color: #FFFFFF; text-align: center;  padding: 1.5em; border-radius: 10px; }
.prod-info-name  { font-weight: 700; }
.prod-info-question { margin-top: 1em;  }
.prod-info-link a, .prod-info-link a:link, .prod-info-link a:visited, .prod-info-link a:hover, .prod-info-link a:active { color: #FFFFFF; }
.prod-info-button {  margin-top: .5em; padding: .5em 1em; background-color: #C2C2C2;  border-radius: 5px; }
.prod-info-button a, .prod-info-button a:link, .prod-info-button a:visited, .prod-info-button a:hover, .prod-info-button a:active { color: #02336b;  font-weight: 700; text-decoration: none; }
.prod-info-button a:hover { text-decoration: underline; }

.news-image  { max-width: 800px; }

/* read more link do not declare unless standard blue clashes with design */
.op-ar-rmlink { /* color: #0000C8; */    }
.op-ar-rmlink a, .op-ar-rmlink a:link, .op-ar-rmlink a:visited, .op-ar-rmlink a:hover, .op-ar-rmlink a:active { /* color: #0000C8; */ }


/* FOOTER */
.c-sitefooter1 { font-size: 1rem;  background-color: #200A00; color: #FFFFFF; padding: 1.5em 0 1.1em 0; }
.c-sitefooter1 .c-sitefooter1_header { color: #FFFFFF; font-weight: bold; }
.c-sitefooter1 ul { margin: 0 0 0 3em; }
.c-sitefooter1 li { list-style: none; margin: 0 1.5rem; line-height: 1.5rem;		}
.c-sitefooter1 li a {  color: #FFFFFF; text-decoration: none; transition: all ease-in-out 300ms; }
.c-sitefooter1 li a:hover { font-weight: bold; }
.c-sitefooter1 ul.c-nav2 li.selected a { color: #FFFFFF; }

.c-sitefooter2 { background-color: #000000; color: #FFFFFF; padding: 1.5rem 0 1.5rem 0; }
.c-sitefooter2 .c-sitefooter2_header { color: #FFFFFF; font-weight: bold; }
.c-sitefooter2 ul { margin: .5rem auto; }
.c-sitefooter2 li { list-style: none; margin: 1rem 0; line-height: 1.5rem; }
.c-sitefooter2 li a {  color: #FFFFFF; font-size: 1em; text-decoration: none; transition: all ease-in-out 300ms; }
.c-sitefooter2 a:link, .c-sitefooter2 a:visited, .c-sitefooter2 a:hover, .c-sitefooter2 a:active { color: #FFFFFF; text-decoration: none; }
.c-sitefooter2 li a:hover, li.selected a { font-weight: bold; }
.c-sitefooter2 ul.footer-sub-nav li { margin-left: 3em; }

.c-sitefooter2 #logo2 {  font-family: Hillstone; min-width: 30%; } 
.c-sitefooter2 .logo2-a {  font-size: 4em; z-index: 5; color: #FFFFFF; }
.c-sitefooter2 .logo2-b {  font-family: HillstoneSwash; font-size: 4em; position: relative; top: .1em;  }
.c-sitefooter2 .logo2-c {  font-size: 2em; margin-top: -1em; color: #FFFFFF; }
.c-sitefooter2 #logo2 a, .c-sitefooter2 #logo2 a:link, .c-sitefooter2 #logo2 a:visited, .c-sitefooter2 #logo2 a:hover, .c-sitefooter2 #logo2 a:active { color: #FFFFFF; text-decoration: none; }
.c-sitefooter2 #logo2 .logo2-b a, .c-sitefooter2 #logo2 .logo2-b a:link, .c-sitefooter2 #logo2 .logo2-b a:visited, .c-sitefooter2 #logo2 .logo2-b a:hover, .c-sitefooter2 #logo2 .logo2-b a:active { color: #e88a24; text-decoration: none; }
	
.c-sitefooter2 .c-sitefooter2_fineprint { text-align: center; margin-top: 2.5em; }
.c-sitefooter2 .c-sitefooter2_fineprinttext { padding: .5rem 0 .5rem 0; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span { display: inline-block; margin: .5rem 0 0; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span.c_sf2_fpt_b:after { content: "|"; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span#cryear:after { content: ""; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span:last-of-type:after { content: ""; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span a { color: #FFFFFF; text-decoration: none; transition: all ease-in-out 300ms; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span a:hover { color: #000000; }
.c-sitefooter2 .c-sitefooter2_fineprinttext span.c_sf2_fpt_b a { padding: 1rem; }

.c-sitefooter2 .l-alt1  { text-align: left; }
.c-sitefooter2 .l-alt2 {display: none; }
.c-sitefooter2 .c-sitefooter2_sidebar { margin-top: 1.5rem; padding: 1.5rem;  background-color: $midnightblue; border-radius: 10px;
		text-align: center; }
.c-sitefooter2 .c-sitefooter2_sidebar h4 { font-size: 1.4rem;}
.c-sitefooter2 .c-sitefooter2_sidebar p {font-size: 1.2rem; margin: 0; padding: 0; text-align: center;}
.c-sitefooter2 .c-sitefooter2_sidebar a { color: #FFFFFF; text-decoration: none; border-bottom: 2px solid transparent; transition: all ease-in-out 300ms;}
.c-sitefooter2 .c-sitefooter2_sidebar a:hover { border-color: #FFFFFF; }

.l-alt1, .l-alt2 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 400px), print {  
	#logo1 a {  } 
	#header-menu-link { margin: 5px 1em 0 0;
}


@media (min-width: 40em) { 
.l-grid5 { grid-template-columns: 1fr 1fr; row-gap: 1em; }
.l-grid5 section { padding-right: 1em; }
.l-grid5 section:nth-of-type(1) { padding-left: 1em; }
.l-grid5 section:nth-of-type(2) { padding: 0; }
} 

@media (min-width: 600px) {
  .l-alt1 {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
    margin-bottom: 1.69492%;
  }
.l-alt2 {
    width: 49.15254%;
    float: right;
    margin-right: 0;
    margin-bottom: 1.69492%;
}
}

@media only screen and (min-width: 700px), print {
.l-grid1 article img { max-height: 300px;  }
input.xs { display: inline-block; width: 5em; text-align: left; }
input.sm { display: inline-block; width: 10em; text-align: left; }
input.md { display: inline-block; width: 38%; text-align: left; }
  .u-level2 { margin-left: 3em; }
  .u-level3 {  margin-left: 6em; }
  .u-level4 {  margin-left: 9em; }
  .u-showrow.u-level2 { margin-left: 3em; }
  .u-showrow.u-level3 { margin-left: 6em; }

}

@media only screen and (min-width: 1240px), print {
	#menu1 { display: block; }
	#header-content { text-align: right; }
    .logo1-b { text-align: left; }
	#header-menu-link { display: none; }
	#menu2 { display: none; }
	header, #menu2 { margin: 0 auto; }
	.c-sitefooter2 .l-alt2 {display: block; }
}


@media only screen and (min-width: 1300px), print {	
	#header-content, #maincontent, #menu2-content, .footer-content { width: 1240px; }
	#contentwrapper, .footer-content  { width: 1210px; margin: 0 auto; }
	#header-content, #menu2-content { margin: 0 auto; }
}