/* 
======================================================
Styling in this file only applies to 'page' templates 
======================================================
*/

/* --------------- Screensize Specific Styles ---------------------- */

/* Default: Extra-small devices such as small phones (less than 640px) */
/* styling goes here */

/* Small devices such as large phones (640px and up) */
@media only screen and (min-width: 640px) {
  /* styling goes here */
}

/* Medium devices such as tablets (768px and up) */
@media only screen and (min-width: 768px) {
  /* styling goes here */
}

/* Large devices such as laptops (1024px and up) */
@media only screen and (min-width: 1024px) {
  /* styling goes here */
}

/* Largest devices such as desktops (1280px and up) */
@media only screen and (min-width: 1280px) {
  /* styling goes here */
}


.heading_link {
  display:block;
  color: var(--color-primary) !important;
  font-weight: normal;
  text-decoration:underline !important;
  font-style:normal ;
  text-transform:none ;
  }
.widget-banner-heading-floating-img-cta-wrapper {
          padding: 0 50px !important;
          border-radius: 5px;
}
@media only screen and (max-width: 719px) {
    /* styling goes here */
  .widget-banner-img { 
    width: 70%;
    margin: auto;
    padding: 5px;
  }
}
@media only screen and (min-width: 720px) {
  .widget-banner-img {  
  margin: -15% auto;
  width:70%;
  -webkit-filter: drop-shadow(1px 2px 2px gray);
  filter: drop-shadow(1px 2px 2px gray);
  transition:all .2s ease-in-out;
  }
  .widget-banner-img:hover {  
  margin: -20% auto;
  width: 80%;
  -webkit-filter: drop-shadow(1px 2px 2px gray);
  filter: drop-shadow(10px 12px 10px gray);
  }
}
/* ---------------- Global Page Style Variables ---------------------- */

:root {
  --tile_img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.4' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
 
  --color_clarion_orange: #e57200; /* this is the actual orange color */
  --color_dark_gray: #403f2e;
  --clarion_dark_gray: #403f2e;
  --color_lite_gray: #999999;
  --color_white: #fff;

  --color_text_dark_gray: #444;

}
tr {
  transition: all .05s ease-in-out;
}
/* ---------------- Reusable Blocks ---------------------- */ 

.block_cta__dark {
  padding: 10px 20px;
  margin: 0px 10%;
  background-color: var(--color_dark_gray);
  color: var(--color_white);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;

  h3 {
    color: var(--color_white);
    text-align: center;
  }
}

/* example usage 
<div class="block_cta__dark">
    <h3>Lorem Ipsum</h3>
    <p>
        Nostrud officia enim duis commodo. Ut ex aliquip sunt Lorem laboris proident adipisicing laborum qui tempor adipisicing. Deserunt occaecat dolore culpa proident laboris.
    </p>
</div>
*/

.block_cta__lite {
  padding: 10px 20px;
  margin: 0px 10%;
  background-color: var(--color_white);
  color: var(--color_text_dark_gray);
  border-radius: 5px;
  border: 1px solid var(--color_clarion_orange);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;

  h3 {
    color: var(--color_text_dark_gray);
    text-align: center;
  }

}

.block_cta__tile_bg {
  padding: 10px 20px;
  margin: 0px 10%;
  background-image: var(--tile_img);
  background-size: cover; /* need this to display svg */
  color: var(--color_text_dark_gray);
  border-radius: 5px;
  border: 1px solid var(--color_clarion_orange);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
  background-attachment: fixed;

  h3 {
    color: var(--color_text_dark_gray);
    text-align: center;
  }

}

.block_cta__grey {
  padding: 10px 20px;
  margin: 0px 10%;
  background-color: var(--color_lite_gray);
  color: var(--color_white);
  border-radius: 5px;
  border: 1px solid var(--color_clarion_orange);
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;

  h3 {
    color: var(--color_white);
    text-align: center;
  }
}
.arrow_prefix {
  display: inline-flex;
}
h4.arrow_prefix {
  display: block;
}
.arrow_prefix:before {
  content: '→';
  padding-right: 10px;
  display: inline-block;
  color: var(--color_clarion_orange);
  margin-left: 10px;
  font-weight: normal;
  font-family: none;
}
/* example usage 
<h3 class="arrow_prefix">Lorem Ipsum</h3>
*/
.underline_co {
  font-weight: bold;
  text-decoration:underline;
  text-decoration-color:#e57200;
}

/* ---------------- Zeno Hover Image Styling ---------------------- */ 

.hover_zoom img{  
  scale:95%;
  -webkit-filter: drop-shadow(1px 2px 2px gray);
  filter: drop-shadow(1px 2px 2px gray);
  transition:all .1s ease-in-out;
}
.hover_zoom img:hover {  
  scale: 100%;
  -webkit-filter: drop-shadow(1px 2px 2px gray);
  filter: drop-shadow(5px 6px 5px gray);
}
.hover_zoom {
  margin: auto !important;
  display: flex;
  justify-content: center;
}

/* ---------------- List Styling ---------------------- */ 

.circle_prefix {
  list-style-type: circle !important;
  padding-left:40px;
  line-height: 1.5rem;
}
.circle_prefix li::marker {
  color: var(--color_clarion_orange);
}

.number_prefix {
  padding-left:40px;
  line-height: 1.5rem;
}
.number_prefix li::marker {
  color: var(--color_clarion_orange);
  font-size:110%;
  font-weight: bold;
}
li:target {
  background-color: #fff7ec;
  transition: background-color 0.3s ease;
}

/* ---------------- HR Styling ---------------------- */ 

/*.orange_fade {
  border-image: linear-gradient(to right, #e57200 0%, #e5720000 100%) 1 !important;
}*/
.body-page hr,
.body-blog-post hr,
.body-category hr  {
  opacity: unset;
  border-image: linear-gradient(to right, var(--color-primary) 15%, #e5720000 100%) 1 !important;
  background: unset;
}
.category-page-hr {
  padding: 0px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;  
}
/* ---------------- Button Styling ---------------------- */ 

.btn--primary {
  color: #ffffff !important;
  transition: all .2s ease-in-out;
  text-transform: unset !important;
  padding: .5rem 1rem !important;
  text-decoration: none !important;
}

.btn--primary:hover {
  background: var(--color-primary-light) !important;
  padding: .5rem 1.5rem !important;
}

/* ---------------- Table Styling ---------------------- */ 
table {
  overflow: hidden;
}

.tbl_highlight {
  border-collapse: collapse;
  width: 100%;
  table-layout: unset !important;
}

.tbl_highlight td, #tbl_highlight th {
  border: 1px solid #ddd;
  padding: 8px;
}

.tbl_highlight tr:nth-child(even){background-color: #f2f2f2;}

.tbl_highlight tr:hover {background-color: #e5720026;color:#fff;}

.tbl_highlight td:hover {background-color: #e5720026;
  color:#fff;}
  
.tbl_highlight td:hover::after {
    content: "";
    position: absolute;
    background-color: #e5720026;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

.tbl_highlight td:focus {background-color: #e5720080;
  color:#fff;}

.tbl_highlight th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #dfa570;
  color: white;
}

.tbl_highlight th h1, .tbl_highlight th h2, .tbl_highlight th h3 {
  color: white;
  text-align:center;
}

.table_div_left {
  display:inline-block;
  margin-right:14px;
  vertical-align: middle;
  width:10%;

}
.table_div_right {
  display:inline-block;
  margin-right:10px;
  vertical-align: middle;
  width:75%;
  padding: 0px 5px;
}

.checkmark {
 /* width:34px;
  margin:auto;
  padding:3px;
  border-radius:100px;
  border: 2px solid green;
  color:green;
  font-weight:bold;
  text-align:center;
*/

  width: 34px;
  height: 34px;
  margin: auto !important;
  border-radius: 100px;
  border: 2px solid green;
  color: green;
  font-weight: bold;
  text-align: center;
  line-height: 31px;
}
.x_mark {
  width:34px;
  height: 34px;
  margin: auto !important;
  border-radius:100px;
  border: 2px solid red;
  color:red;
  font-weight:bold;
  text-align:center;
  line-height: 31px;
}

/* ---------------- Image Styling ---------------------- */ 

.img_main_content {
  border-radius:5px;
  vertical-align: middle;
  max-width: 1000px;
}

/* ---------------- Accordion Styling ---------------------- */ 

.custom-accordion-wrapper {
  max-width: 900px;
  margin: 0 auto 32px auto;
  border-bottom: 1px solid var(--color-primary);
}
.custom-accordion-button,
.custom-accordion-body {
  border: 1px solid var(--color-primary);
  padding: 16px;
  width: 100%;
  background-color: #fff;
  text-align: left;
}
.custom-accordion-button,
.custom-accordion-body h3{
  font-weight: 700 !important;
  font-size: 22px;
  color: #444;
}
.custom-accordion-button:focus {
  outline: none;
  box-shadow: none;
}
.custom-accordion-button.collapsed {
  background-color: #fff;
}
.custom-accordion-button::after {
  content: "";
  float: right;
  margin-left: auto;
  transition: transform 0.2s;
}
.custom-accordion-header {
  margin-bottom: 0px;
}
.custom-accordion-button {
  margin-bottom: 0px;
  border-bottom: none;
}
.custom-accordion-body {
  border-bottom: none;
}
.custom-accordion-button[aria-expanded="true"]::after {
  content: "+";
  color: var(--color-primary);
  font-weight: 600;
}
.custom-accordion-button[aria-expanded="false"]::after {
  content: "-";
  color: var(--color-primary);
  font-weight: 600;
}
.custom-accordion-button:hover {
  letter-spacing: .2px;
  transition: 0.2s;
}
.custom-accordion-button:focus {
  border: 0px solid var(--color-primary);
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 0px !important;
  border-radius: 2px;
  letter-spacing: .2px;
  transition: 0.2s;
}
.custom-accordion-header:target .custom-accordion-button {
  background-color: #fff7ec;
  border-color: #cc5200;
  box-shadow: 0 0 2px 2px #e5720080 inset;
}
/* ---------------- Category Page General Styling ---------------------- */ 

.category_description h2,
.category_description h3 {
  font-weight: 700 !important;
  color: #444;
}
.category_description h2 {
  font-weight: 700 !important;
  font-size: 25px;
  color: #444;
}
.category_description h3 {
  font-weight: 700 !important;
  font-size: 22px;
  color: #444;
}
/* ---------------- Bootstrap Bypass ---------------------- */ 

/* Hidden by default */
.collapse {
  display: none;
}

/* Shown state */
.collapse.show {
  display: block;
}

/* Transitional state */
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}