/* ============================================================== SETTINGS . TLC 3.0 ============================================================== */ @media (min-width: 1400px) /* navbar-expand-xxl */ {} @media (max-width: 1400px) /* navbar-expand-xl */ {} @media (min-width: 1200px) /* navbar-expand-xl */ {} @media (max-width: 1200px) /* navbar-expand-lg */ {} @media (min-width: 992px) /* navbar-expand-lg */ {} @media (max-width: 992px) /* navbar-expand-md */ {} @media (min-width: 768px) /* navbar-expand-md */ {} @media (max-width: 768px) /* navbar-expand-sm */ {} @media (min-width: 576px) /* navbar-expand-sm */ {} @media (max-width: 576px) /* navbar-expand-xs */ {} /* =============================== COLORS =============================== */ /* Black-White */ .black {color: black !important; background-color: transparent !important;} .black1 color: var(--black1) !important; .black2 {color: var(--black2) !important;} .black3 {color: var(--black3) !important;}, .black4 {color: var(--black4) !important;} .black5 {color: var(--black5) !important;} .black6 {color: var(--black6) !important;} .black7 {color: var(--black7) !important;} .black8 {color: var(--black8) !important;} .black9 {color: var(--black9) !important;} .bg-black {background-color: black !important;} .bg-black1 {background-color: rgba(0,0,0,.1) !important;} .bg-black2 {background-color: rgba(0,0,0,.2) !important;} .bg-black3 {background-color: rgba(0,0,0,.3) !important;} .bg-black4 {background-color: rgba(0,0,0,.4) !important;} .bg-black5 {background-color: rgba(0,0,0,.5) !important;} .bg-black6 {background-color: rgba(0,0,0,.6) !important;} .bg-black7 {background-color: rgba(0,0,0,.7) !important;} .bg-black8 {background-color: rgba(0,0,0,.8) !important;} .bg-black9 {background-color: rgba(0,0,0,.9) !important;} .bg-dark {background-color: rgba(0,0,0,1) !important;} .bg-dark-f {background-color: rgba(0,0,0,.7) !important;} .border-dark {border: 1px solid rgba(0,0,0,.2) !important;} .white,.colorWhite {color: white !important; background-color: transparent !important;} .color-white {color: white !important;} .white1 {color: var(--white1) !important;} .white2 {color: var(--white2) !important;} .white3 {color: var(--white3) !important;} .white4 {color: var(--white4) !important;} .white5 {color: var(--white5) !important;} .white6 {color: var(--white6) !important;} .white7 {color: var(--white7) !important;} .white8 {color: var(--white8) !important;} .white9 {color: var(--white9) !important;} .bg-white {background-color: white !important;} .bg-white-f {background-color: rgba(255,255,255,.15) !important;} .bg-white1 {background-color: rgba(255,255,255,.1) !important;} .bg-white2 {background-color: rgba(255,255,255,.2) !important;} .bg-white3 {background-color: rgba(255,255,255,.3) !important;} .bg-white4 {background-color: rgba(255,255,255,.4) !important;} .bg-white5 {background-color: rgba(255,255,255,.5) !important;} .bg-white6 {background-color: rgba(255,255,255,.6) !important;} .bg-white7 {background-color: rgba(255,255,255,.7) !important;} .bg-white8 {background-color: rgba(255,255,255,.8) !important;} .bg-white9 {background-color: rgba(255,255,255,.9) !important;} .border-white {border: 1px solid rgba(255,255,255,.2) !important;} .gray {color: gray !important; background-color: transparent !important;} .gray1 {color: var(--gray1) !important;} .gray2 {color: var(--gray2) !important;} .gray3 {color: var(--gray3) !important;} .gray4 {color: var(--gray4) !important;} .gray5 {color: var(--gray5) !important;} .gray6 {color: var(--gray6) !important;} .gray7 {color: var(--gray7) !important;} .gray8 {color: var(--gray8) !important;} .gray9 {color: var(--gray9) !important;} .bg-light {background-color: #bbbbbb !important;} .bg-light1 {background-color: #fafafa !important;} .bg-light2 {background-color: #f8f8f8 !important;} .bg-light3 {background-color: #f6f6f6 !important;} .bg-light4 {background-color: #f4f4f4 !important;} .bg-light5 {background-color: #f2f2f2 !important;} .bg-light6 {background-color: #f0f0f0 !important;} .bg-light7 {background-color: #ededed !important;} .bg-light8 {background-color: #eaeaea !important;} .bg-light9 {background-color: #e9e9e9 !important;} .bg-gray1 {background-color: rgb(248,248,248) !important; } .bg-gray2 {background-color: rgb(241,241,241) !important; } .bg-gray3 {background-color: rgb(233,233,233) !important; } .bg-gray4 {background-color: rgb(225,225,225) !important; } .bg-gray5 {background-color: rgb(218,218,218) !important; } .bg-gray6 {background-color: rgb(210,210,210) !important; } .bg-gray7 {background-color: rgb(200,200,200) !important; } .bg-gray8 {background-color: rgb(190,190,190) !important; } .bg-gray9 {background-color: rgb(180,180,180) !important; } .bg-light-f {background-color: rgba(200,200,200,.2) !important;} .border-light {border: 1px solid rgba(200,200,200,.2) !important;} .fade1 {color: var(--fade1) !important;} .fade2 {color: var(--fade2) !important;} .fade3 {color: var(--fade3) !important;} .fade4 {color: var(--fade4) !important;} .fade5, .fade {color: var(--fade5) !important;} .fade6 {color: var(--fade6) !important;} .fade7 {color: var(--fade7) !important;} .fade8 {color: var(--fade8) !important;} .fade9 {color: var(--fade9) !important;} .fade10 {color: var(--fade10) !important;} /* PRIMARY COLOR =================================== */ /* Color 1 */ .color1 {color: var(--color1) !important;} .color1l {color: var(--color1l) !important;} /* brighter(1) */ .color1xl, .color1h {color: var(--color1xl) !important;} /* brightest(2) - highlight */ .color1d {color: var(--color1d) !important;} /* dark(1) -- SELECTED */ .color1xd {color: var(--color1xd) !important;} /* darker(2) */ .color1xxd {color: var(--color1xxd) !important;} /* darkest(3) */ .color1rgb {color: var(--color1rgb);} .color1raw {color: var(--color1raw);} .color1f1 {color: var(--color1f1) !important;} .color1f2 {color: var(--color1f2) !important;} .color1f3 {color: var(--color1f3) !important;} .color1f4 {color: var(--color1f4) !important;} .color1f5 {color: var(--color1f5) !important;} .color1f6 {color: var(--color1f6) !important;} .color1f7 {color: var(--color1f7) !important;} .color1f8 {color: var(--color1f8) !important;} .color1f9 {color: var(--color1f9) !important;} .bg-color1, .bg-primary {background-color: var(--color1) !important;} .bg-color1-f {background-color: rgba(var(--flexcolor1raw),.1) !important;} .bg-color1l {background-color: var(--color1l) !important;} .bg-color1xl {background-color: var(--color1xl) !important;} .bg-color1d {background-color: var(--color1d) !important;} .bg-color1xd {background-color: var(--color1xd) !important;} .border-color1 {border: 1px solid rgba(var(--flexcolor1raw),.2) !important;} /* SECONDARY COLOR =================================== */ /* Color 2 */ .color2 {color: var(--color2) !important;} .color2l {color: var(--color2l) !important;} .color2xl, .color2h {color: var(--color2xl) !important;} .color2d {color: var(--color2d) !important;} .color2xd {color: var(--color2xd) !important;} .color2xxd {color: var(--color2xxd) !important;} .color2rgb {color: var(--color2rgb);} .color2raw {color: var(--color2raw);} .color2f1 {color: var(--color2f1) !important;} .color2f2 {color: var(--color2f2) !important;} .color2f3 {color: var(--color2f3) !important;} .color2f4 {color: var(--color2f4) !important;} .color2f5 {color: var(--color2f5) !important;} .color2f6 {color: var(--color2f6) !important;} .color2f7 {color: var(--color2f7) !important;} .color2f8 {color: var(--color2f8) !important;} .color2f9 {color: var(--color2f9) !important;} .bg-color2, .bg-secondary {background-color: var(--color2) !important;} .bg-color2-f {background-color: rgba(var(--flexcolor2raw),.1) !important;} .border-color2 {border: 1px solid rgba(var(--flexcolor2raw),.2) !important;} /* COMPLIMENTARY COLORS ===================================*/ /* Color 3 */ .color3 {color: var(--color3) !important;} .color3l {color: var(--color3l) !important;} .color3xl, .color3h {color: var(--color3xl) !important;} .color3d {color: var(--color3d) !important;} .color3xd {color: var(--color3xd) !important;} .color3xxd {color: var(--color3xxd) !important;} .color3rgb {color: var(--color3rgb);} .color3raw {color: var(--color3raw);} .color3f1 {color: var(--color3f1) !important;} .color3f2 {color: var(--color3f2) !important;} .color3f3 {color: var(--color3f3) !important;} .color3f4 {color: var(--color3f4) !important;} .color3f5 {color: var(--color3f5) !important;} .color3f6 {color: var(--color3f6) !important;} .color3f7 {color: var(--color3f7) !important;} .color3f8 {color: var(--color3f8) !important;} .color3f9 {color: var(--color3f9) !important;} .bg-color3 {background-color: var(--color3) !important;} .bg-color3d {background-color: var(--color3d) !important;} .bg-color3xd {background-color: var(--color3xd) !important;} .bg-color3-f {background-color: rgba(var(--flexcolor3raw),.1) !important;} .border-color3 {border: 1px solid rgba(var(--flexcolor3raw),.2) !important;} /* Color 4 */ .color4 {color: var(--color4) !important;} .color4l {color: var(--color4l) !important;} .color4xl, .color4h {color: var(--color4xl) !important;} .color4d {color: var(--color4d) !important;} .color4xd {color: var(--color4xd) !important;} .color4xxd {color: var(--color4xxd) !important;} .color4rgb {color: var(--color4rgb);} .color4raw {color: var(--color4raw);} .bg-color4 {background-color: var(--color4) !important;} /* Color 5 */ .color5 {color: var(--color5) !important;} .color5l {color: var(--color5l) !important;} /* brighter(1) */ .color5xl, .color5h {color: var(--color5xl) !important;} /* brightest(2) - highlight */ .color5d {color: var(--color5d) !important;} /* darker(1) -- SELECTED */ .color5xd {color: var(--color5xd) !important;} /* darkest(2) */ .color5xxd {color: var(--color5xxd) !important;} /* darkest(2) */ .color5rgb {color: var(--color5rgb);} .color5raw {color: var(--color5raw);} .bg-color5 {background-color: var(--color5) !important;} /* STANDARD COLORS ===================================*/ /* color 6 - DODGERBLUE */ .color6, .blue {color: #1E90FF !important; background-color: transparent !important;} .color6h, .blue-h {color: #1E90FF !important;} .bg-blue {background-color: rgba(30, 144, 255,1) !important;} .bg-blue-f {background-color: rgba(30, 144, 255,.1) !important;} .border-blue {border: 1px solid rgba(30, 144, 255,.2) !important;} /* color 61 - DODGERBLUE */ .color61, .blue1 {color: #0F52BA !important; background-color: transparent !important;} .color61h, .blue1-h {color: #0F52BA !important;} .bg-blue1 {background-color: rgba(15,82,186,1) !important;} .bg-blue1-f {background-color: rgba(15,82,186,.1) !important;} .border-blue1 {border: 1px solid rgba(15,82,186,.2) !important;} /* color 62 - TLCBLUE */ .color62, .blue2 {color: #00AEEF !important; background-color: transparent !important;} .color62h, .blue2-h {color: #00AEEF !important;} .bg-blue2 {background-color: rgba(0,174,239,1) !important;} .bg-blue2-f {background-color: rgba(0,174,239,.1) !important;} .border-blue2 {border: 1px solid rgba(0,174,239,.2) !important;} /* color 63 - DODGERBLUE */ .color63, .blue3 {color: #00AEEF !important; background-color: transparent !important;} .color63h, .blue3-h {color: #00AEEF !important;} .bg-blue3 {background-color: rgba(0,174,239,1) !important;} .bg-blue3-f {background-color: rgba(0,174,239,.1) !important;} .border-blue3 {border: 1px solid rgba(0,174,239,.2) !important;} .royalblue {color: royalblue !important;} .zaffre {color: #0818A8 !important;} .ultramarine {color: #0437F2 !important;} /* color 7 - YELLOW */ .color7, .yellow {color: rgb(255,255,0) !important; background-color: transparent !important;} .color7h, .yellow-h {color: #FFEE00 !important;} .bg-yellow {background-color: rgba(255,255,0,1) !important;} .bg-yellow-f {background-color: rgba(255,255,0,.1) !important;} .border-yellow {border: 1px solid rgba(255,255,0,.2) !important;} /* color 8 - GREEN */ .color8, .green {color: #039303 !important; background-color: transparent !important;} .color8h, .green-h {color: #00C400 !important;} .color8d, .green-d {color: #024d02 !important;} .bg-green {background-color: rgba(3,147,3,1) !important;} .bg-green-f {background-color: rgba(3,147,3,.1) !important;} .bg-green-f2 {background-color: rgba(4,209,88,.07) !important;} .border-green {border: 1px solid rgba(3,147,3,.2) !important;} /* color 9 - RED */ .color9, .red {color: #F00F00 !important; background-color: transparent !important;} .color9h, .red-h {color: #FF0000 !important;} .color9d, .red-d {color: #a20a00 !important;} .bg-red {background-color: rgba(240,15,0,1) !important;} .bg-red-f {background-color: rgba(240,15,0,.1) !important;} .border-red {border: 1px solid rgba(240,15,0,.2) !important;} /* color 10 - ORANGE */ .color10, .orange, .orange2 {color: #ff7800 !important; background-color: transparent !important;} .color10h, .orange-h, .orange2-h {color: #ff9c00 !important;} .color10d, .orange-d, .orange2-d {color: #ff6600 !important;} .bg-orange, .bg-orange2 {background-color: rgba(255,120,0,1) !important;} .bg-orange-f, .bg-orange2-f {background-color: rgba(255,120,0,.1) !important;} .border-orange, .border-orange2 {border: 1px solid rgba(255,120,0,.2) !important;} /* color 11 - PURPLE */ .color11, .purple {color: #4b0082 !important; background-color: transparent !important;} .color11h, .purple-h {color: #6f00c1 !important;} .color11d, .purple-d {color: #330058 !important;} .bg-purple {background-color: rgba(75,0,130,1) !important;} .bg-purple-f {background-color: rgba(75,0,130,.1) !important;} .border-purple {border: 1px solid rgba(75,0,130,.2) !important;} /* color 7 - YELLOW */ .color12, .gold {color: #ffd700 !important; background-color: transparent !important;} .color12h, .gold-h {color: #ffe44d !important;} .bg-gold {background-color: rgba(255,215,0,1) !important;} .bg-gold-f {background-color: rgba(255,215,0,.1) !important;} .border-gold {border: 1px solid rgba(255,215,0,.2) !important;} .bg-black {background-color: black !important;} .bg-white {background-color: white !important;} .bg-gray {background-color: gray !important;} .bg-gray-f, .bg-black-f, .bg-gray-xL {background-color: var(--gray1) !important;} .highlight {color: rgb(255,255,166) !important;} .highlight0 {color: rgba(255,255,166,1) !important;} .highlight5 {color: rgba(255,255,166,0.5) !important;} .highlight7 {color: rgb(255,255,166,0.7) !important;} .bg-highlight {background-color: rgb(255,255,166) !important;} .bg-highlight0 {background-color: rgb(255,255,166,1) !important;} .bg-highlight5 {background-color: rgba(255,255,166,0.5) !important;} .bg-highlight7 {background-color: rgba(255,255,166,0.7) !important;} .bg-highlight-f {background-color: rgba(255,255,0,.2) !important;} .tlc, .ecl { border-right: #FFFF00 8px solid; padding-right: 2px; } .tlc {border-color: rgba(255,255,50,0.3) !important;} .ecl {border-color: navajowhite !important;} /* color - ATTENTION */ .color-attention {color: var(--attention) !important; } .bg-attention {background-color: var(--attention) !important;} /* LOCATION COLORS ===================================*/ .item1 {color: steelblue;} .item2 {color: gray;} .item3 {color: green;} .item4 {color: darkviolet;} .item5 {color: lightcoral;} .item6 {color: dodgerblue;} .brand-attention, .brand-attention a { display: block; color: var(--attention) !important; } /* =============================== H1H6 =============================== */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin: 0; text-align: var(--BrandAlign); } h1, .h1, .head1 { font-family: var(--h1font); margin-top: 0px; margin-bottom: 1.1rem; font-style: normal; text-transform: var(--h1TextTransform); line-height: 110%; font-size: calc (3.5rem * var(--HeaderFontSize) ); } h2, .h2, .head2 { font-family: var(--h2font); margin-bottom: 1.1rem; font-size: 3rem; line-height: 115%; text-transform: var(--h2TextTransform); } h3, .h3, .head3 { font-family: var(--h3font); margin-top: 0px; margin-bottom: 0px; font-size: 2.25rem; line-height: 125%; text-transform: var(--h3TextTransform); } h4, .h4, .head4 { font-family: var(--h4font); margin-bottom: 0px; font-size: 2rem; line-height: 130%; text-transform: var(--h4TextTransform); } h5, .h5, .head5 { font-family: var(--h5font); margin-bottom: 4px; font-size: 1.8rem; line-height: 130%; text-transform: var(--h5TextTransform); } h6, .h6, .head6 { font-family: var(--h6font); text-transform: var(--h6TextTransform); font-size: 1.5rem !important; line-height: 85%; /* margin: -50px; */ /* padding: 50px; */ margin-bottom: 2px; position: relative; overflow: visible; } h1.text-start, .h1.text-start, .text-start > h1, .text-start > .h1 h2.text-start, .h2.text-start, .text-start > h2, .text-start > .h2 h3.text-start, .h3.text-start, .text-start > h3, .text-start > .h3 h4.text-start, .h4.text-start, .text-start > h4, .text-start > .h4 h5.text-start, .h5.text-start, .text-start > h5, .text-start > .h5 h6.text-start, .h6.text-start, .text-start > h6, .text-start > .h6 h1.left, .h1.left, h2.left, .h2.left, h3.left, .h3.left, h4.left, .h4.left, h5.left, .h5.left, h6.left, .h6.left { text-align: left !important; } h1.text-end, .h1.text-end, .text-end > h1, .text-end > .h1 h2.text-end, .h2.text-end, .text-end > h2, .text-end > .h2 h3.text-end, .h3.text-end, .text-end > h3, .text-end > .h3 h4.text-end, .h4.text-end, .text-end > h4, .text-end > .h4 h5.text-end, .h5.text-end, .text-end > h5, .text-end > .h5 h6.text-end, .h6.text-end, .text-end > h6, .text-end > .h6 h1.right, .h1.right, h2.right, .h2.right, h3.right, .h3.right, h4.right, .h4.right, h5.right, .h5.right, h6.right, .h6.right { text-align: right !important; } /* up .2 , drop .5-.7 */ h1.xxxl, .h1.xxxl, .head4.xxxl {font-size:5.5rem;} h1.xxl, .h1.xxl, .head4.xxl {font-size:5.3rem;} h1.xl, .h1.xl, .head4.xl {font-size:5.1rem;} h1.lg, .h1.lg, .head4.lg {font-size:4.9rem;} h1.sm, .h1.sm, .head4.sm {font-size:4.4rem;} h1.xs, .h1.xs, .head4.xs {font-size:4rem;} h1.xxs, .h1.xxs, .head4.xxs {font-size:3.75rem;} h1.xxxs, .h1.xxxs, .head4.xxxs {font-size:3.5rem;} h2.xxxl, .h2.xxxl, .head4.xxxl {font-size:4.6rem;} h2.xxl, .h2.xxl, .head4.xxl {font-size:4.4rem;} h2.xl, .h2.xl, .head4.xl {font-size:4.2rem;} h2.lg, .h2.lg, .head4.lg {font-size:4rem;} h2.sm, .h2.sm, .head4.sm {font-size:3.5rem;} h2.xs, .h2.xs, .head4.xs {font-size:3rem;} h2.xxs, .h2.xxs, .head4.xxs {font-size:2.5rem;} h2.xxxs, .h2.xxxs, .head4.xxxs {font-size:2rem;} h3.xxxl, .h3.xxxl, .head4.xxxl {font-size:3.05rem;} h3.xxl, .h3.xxl, .head4.xxl {font-size:2.85rem;} h3.xl, .h3.xl, .head4.xl {font-size:2.65rem;} h3.lg, .h3.lg, .head4.lg {font-size:2.45rem;} h3.sm, .h3.sm, .head4.sm {font-size:2.1rem;} h3.xs, .h3.xs, .head4.xs {font-size:1.95rem;} h3.xxs, .h3.xxs, .head4.xxs {font-size:1.8rem;} h3.xxxs, .h3.xxxs, .head4.xxxs {font-size:1.65rem;} h4.xxxl, .h4.xxxl, .head4.xxxl {font-size:3.05rem;} h4.xxl, .h4.xxl, .head4.xxl {font-size:2.75rem;} h4.xl, .h4.xl, .head4.xl {font-size:2.55rem;} h4.lg, .h4.lg, .head4.lg {font-size:2.25rem;} h4.sm, .h4.sm, .head4.sm {font-size:2rem;} h4.xs, .h4.xs, .head4.xs {font-size:1.9rem;} h4.xxs, .h4.xxs, .head4.xxs {font-size:1.8rem;} h4.xxxs, .h4.xxxs, .head4.xxxs {font-size:1.65rem;} h5.xxxl, .h5.xxxl, .head4.xxxl {font-size:2.2rem;} h5.xxl, .h5.xxl, .head4.xxl {font-size:2rem;} h5.xl, .h5.xl, .head4.xl {font-size:1.8rem;} h5.lg, .h5.lg, .head4.lg {font-size:1.6rem;} h5.sm, .h5.sm, .head4.sm {font-size:1.3rem;} h5.xs, .h5.xs, .head4.xs {font-size:1.1rem;} h5.xxs, .h5.xxs, .head4.xxs {font-size:0.9rem;} h5.xxxs, .h5.xxxs, .head4.xxxs {font-size:0.7rem;} h6.xxxl, .h6.xxxl, .head4.xxxl {font-size:9rem;} h6.xxl, .h6.xxl, .head4.xxl {font-size:8.5rem;} h6.xl, .h6.xl, .head4.xl {font-size:8rem;} h6.lg, .h6.lg, .head4.lg {font-size:7.5rem;} h6.sm, .h6.sm, .head4.sm {font-size:6rem;} h6.xs, .h6.xs, .head4.xs {font-size:5rem;} h6.xxs, .h6.xxs, .head4.xxs {font-size:4rem;} h6.xxxs, .h6.xxxs, .head4.xxxs {font-size:3rem;} @media (max-width: 992px) /* navbar-expand-md */ { h1, .h1, .head1 { font-size: 3.5rem; letter-spacing: -1px; } /* up .2 - drop .2 */ h1.xxxl, .h1.xxxl, .head4.xxxl {font-size:4.65rem;} h1.xxl, .h1.xxl, .head4.xxl {font-size:4.45rem;} h1.xl, .h1.xl, .head4.xl {font-size:4.25rem;} h1.lg, .h1.lg, .head4.lg {font-size:4.05rem;} h1.sm, .h1.sm, .head4.sm {font-size:3.85rem;} h1.xs, .h1.xs, .head4.xs {font-size:3.65rem;} h1.xxs, .h1.xxs, .head4.xxs {font-size:3.45rem;} h1.xxxs, .h1.xxxs, .head4.xxxs {font-size:3.25rem;} h2, .h2, .head2 { font-size: 2.7rem; } h2.xxxl, .h2.xxxl, .head4.xxxl {font-size:3.3rem;} h2.xxl, .h2.xxl, .head4.xxl {font-size:3.15rem;} h2.xl, .h2.xl, .head4.xl {font-size:3rem;} h2.lg, .h2.lg, .head4.lg {font-size:2.85rem;} h2.sm, .h2.sm, .head4.sm {font-size:2.5rem;} h2.xs, .h2.xs, .head4.xs {font-size:2.3rem;} h2.xxs, .h2.xxs, .head4.xxs {font-size:2.1rem;} h2.xxxs, .h2.xxxs, .head4.xxxs {font-size:1.9rem;} h3, .h3, .head3 { font-size: 2.2rem; letter-spacing: -1px; } h3.xxxl, .h3.xxxl, .head4.xxxl {font-size:2.8rem;} h3.xxl, .h3.xxl, .head4.xxl {font-size:2.65rem;} h3.xl, .h3.xl, .head4.xl {font-size:2.5rem;} h3.lg, .h3.lg, .head4.lg {font-size:2.35rem;} h3.sm, .h3.sm, .head4.sm {font-size:2.05rem;} h3.xs, .h3.xs, .head4.xs {font-size:1.9rem;} h3.xxs, .h3.xxs, .head4.xxs {font-size:1.75rem;} h3.xxxs, .h3.xxxs, .head4.xxxs {font-size:1.6rem;} h4, .h4, .head4 { font-size: 2rem; } h4.xxxl, .h4.xxxl, .head4.xxxl {font-size:2.8rem;} h4.xxl, .h4.xxl, .head4.xxl {font-size:2.55rem;} h4.xl, .h4.xl, .head4.xl {font-size:2.35rem;} h4.lg, .h4.lg, .head4.lg {font-size:2.15rem;} h4.sm, .h4.sm, .head4.sm {font-size:2rem;} h4.xs, .h4.xs, .head4.xs {font-size:1.9rem;} h4.xxs, .h4.xxs, .head4.xxs {font-size:1.75rem;} h4.xxxs, .h4.xxxs, .head4.xxxs {font-size:1.6rem;} h5, .h5, .head5 { font-size: 1.3rem; letter-spacing: -1px; } h5.xxxl, .h5.xxxl, .head4.xxxl {font-size:1.9rem;} h5.xxl, .h5.xxl, .head4.xxl {font-size:1.75rem;} h5.xl, .h5.xl, .head4.xl {font-size:1.6rem;} h5.lg, .h5.lg, .head4.lg {font-size:1.45rem;} h5.sm, .h5.sm, .head4.sm {font-size:1.2rem;} h5.xs, .h5.xs, .head4.xs {font-size:1.1rem;} h5.xxs, .h5.xxs, .head4.xxs {font-size:1rem;} h5.xxxs, .h5.xxxs, .head4.xxxs {font-size:0.9rem;} h6, .h6, .head6 { font-size: 2.5rem; } h6.xxxl, .h6.xxxl, .head4.xxxl {font-size:9rem;} h6.xxl, .h6.xxl, .head4.xxl {font-size:8.5rem;} h6.xl, .h6.xl, .head4.xl {font-size:8rem;} h6.lg, .h6.lg, .head4.lg {font-size:7.5rem;} h6.sm, .h6.sm, .head4.sm {font-size:6rem;} h6.xs, .h6.xs, .head4.xs {font-size:5rem;} h6.xxs, .h6.xxs, .head4.xxs {font-size:4rem;} h6.xxxs, .h6.xxxs, .head4.xxxs {font-size:3rem;} } @media (max-width: 768px) /* navbar-expand-sm */ { h1, .h1, .head1 { font-size: 3rem; letter-spacing: -.5px; } /* up .1 - drop .15 */ h1.xxxl, .h1.xxxl, .head4.xxxl {font-size:4.4rem;} h1.xxl, .h1.xxl, .head4.xxl {font-size:4.2rem;} h1.xl, .h1.xl, .head4.xl {font-size:4rem;} h1.lg, .h1.lg, .head4.lg {font-size:3.8rem;} h1.sm, .h1.sm, .head4.sm {font-size:3.6rem;} h1.xs, .h1.xs, .head4.xs {font-size:3.4rem;} h1.xxs, .h1.xxs, .head4.xxs {font-size:3.2rem;} h1.xxxs, .h1.xxxs, .head4.xxxs {font-size:3rem;} h2, .h2, .head2 { font-size: 2.6rem; } h2.xxxl, .h2.xxxl, .head4.xxxl {font-size:2rem;} h2.xxl, .h2.xxl, .head4.xxl {font-size:2.7rem;} h2.xl, .h2.xl, .head4.xl {font-size:2.6rem;} h2.lg, .h2.lg, .head4.lg {font-size:2.5rem;} h2.sm, .h2.sm, .head4.sm {font-size:2.3rem;} h2.xs, .h2.xs, .head4.xs {font-size:2.15rem;} h2.xxs, .h2.xxs, .head4.xxs {font-size:1.95rem;} h2.xxxs, .h2.xxxs, .head4.xxxs {font-size:1.8rem;} h3, .h3, .head3 { font-size: 2.1rem; letter-spacing: -.5px; } h3.xxxl, .h3.xxxl, .head4.xxxl {font-size:2.6rem;} h3.xxl, .h3.xxl, .head4.xxl {font-size:2.4rem;} h3.xl, .h3.xl, .head4.xl {font-size:2.3rem;} h3.lg, .h3.lg, .head4.lg {font-size:2.2rem;} h3.sm, .h3.sm, .head4.sm {font-size:1.95rem;} h3.xs, .h3.xs, .head4.xs {font-size:1.8rem;} h3.xxs, .h3.xxs, .head4.xxs {font-size:1.65rem;} h3.xxxs, .h3.xxxs, .head4.xxxs {font-size:1.5rem;} h4, .h4, .head4 { font-size: 1.9rem; } h4.xxxl, .h4.xxxl, .head4.xxxl {font-size:2.6rem;} h4.xxl, .h4.xxl, .head4.xxl {font-size:2.4rem;} h4.xl, .h4.xl, .head4.xl {font-size:2.25rem;} h4.lg, .h4.lg, .head4.lg {font-size:2.05rem;} h4.sm, .h4.sm, .head4.sm {font-size:1.85rem;} h4.xs, .h4.xs, .head4.xs {font-size:1.7rem;} h4.xxs, .h4.xxs, .head4.xxs {font-size:1.65rem;} h4.xxxs, .h4.xxxs, .head4.xxxs {font-size:1.5rem;} h5, .h5, .head5 { font-size: 1.5rem; letter-spacing: -.5px; } h5.xxxl, .h5.xxxl, .head4.xxxl {font-size:1.6rem;} h5.xxl, .h5.xxl, .head4.xxl {font-size:1.5rem;} h5.xl, .h5.xl, .head4.xl {font-size:1.4rem;} h5.lg, .h5.lg, .head4.lg {font-size:1.3rem;} h5.sm, .h5.sm, .head4.sm {font-size:1.15rem;} h5.xs, .h5.xs, .head4.xs {font-size:1.1rem;} h5.xxs, .h5.xxs, .head4.xxs {font-size:1.05rem;} h5.xxxs, .h5.xxxs, .head4.xxxs {font-size:1rem;} h6, .h6, .head6 { font-size: 2.2rem; } span + h1 { margin-top: 3px; margin-bottom: 0px; } span + h1 + h4 + span { margin-top: 30px; margin-bottom: 50px; } } .display-1 { font-weight: 600; line-height: 1.2; } .display-2 { font-weight: 600; line-height: 1.2; } .display-3 { font-weight: 600; line-height: 1.2; } .display-4 { font-weight: 600; line-height: 1.2; } .display-1 { font-size: 6rem; } .display-2 { font-size: 5.5rem; } .display-3 { font-size: 4.5rem; } .display-4 { font-size: 3.5rem; } } /* .display-1, h1 { font-size: 10vmin; } */ @media (max-width: 768px) { .display-1, h1 { font-size: 10vmin; } } hr { margin-top: 40px; margin-bottom: 40px; } p { margin-top: 0px;} p + p { margin-top: 0px;} .clearFoo + h1 { margin-top: 40px;} p + h1 { margin-top: 45px;} p + h2 { margin-top: 20px;} p + h3 { margin-top: 10px;} p + h4 { margin-top: 10px;} p + h5 { margin-top: 10px;} p + h6 { margin-top: 10px;} ul + h1, ul + h2, ul + h3 { margin-top: 20px; } /* HEADER SPACING ---- /* combines with existing */ h1 + h3 { margin-top: 10px;} h1 + h4 { margin-top: 10px;} h1 + h5 { margin-top: 15px;} h1 + h1 { margin-top: 0px;} h1 + h1 small { margin-top: 0px;} p + h1, div + h1 { margin-top: 40px;} h2 + h4 { margin-top: 0px;} h2 + h5 { margin-top: 0px;} h2 + h2 { margin-top: 0px;} p + h2, div + h2 { margin-top: 40px;} h3 + h5 { margin-top: 0px;} h3 + h6 { margin-top: 0px;} h3 + h3 { margin-top: 0px;} p + h3, div + h3 { margin-top: 35px;} h4 + h5 { margin-top: 10px;} h4 + h6 { margin-top: 5px;} h4 + h4 { margin-top: 0px;} p + h4, div + h4 { margin-top: 0px;} h5 + h5 { margin-top: 0px;} p + h5, div + h5 { margin-top: 30px;} h6 + h6 { margin-top: 0px;} p + h6, div + h6 { margin-top: 20px;} ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 { margin-top: 25px;} span + h1 { margin-top: 0px; margin-bottom: -5px; } h1 + span { margin-top: 20px; margin-bottom: 12px !important; } /* span + h1 + h4 + span { margin-top: 30px; margin-bottom: 50px; } */ .sectionHeader + h1, .sectionHeader + h2, .sectionHeader + h3, .sectionHeader + h4, .preHeader + h1, .preHeader + h2, .preHeader + h3, .preHeader + h4, .preHeader + h5, .preHeader + h6, div.preHeadClass + h1, div.preHeadClass + h2, div.preHeadClass + h3, div.preHeadClass + h4, div.preHeadClass + h5, div.preHeadClass + h6 { margin-top: 0px; } h1 + .postHeader, h2 + .postHeader, h3 + .postHeader, h4 + .postHeader, h5 + .postHeader, h6 + .postHeader { margin-top: 0px; margin-bottom: 40px; } .clearFoo + h1, .clearfix + h1 { margin-top: 0px; } .btn.inline + .btn.inline { /*margin-block-start: 70px;*/ /*margin-inline-start: 40px;*/ } /* HIDE h1 (replace with graphic) */ #wdn-text-hidden { font-size: 0; width: 1px; height: 1px; display: inline-block; overflow: hidden; position: absolute!important; border: 0!important; padding: 0!important; margin: 0!important; clip: rect(1px,1px,1px,1px); } /* =============================== SUB / TAGS =============================== */ .sub-xxxs,.sub-xxs,.sub-xs,.sub-sm,.sub-md, .sub,.sub-lg,.sub-xl,.sub-xxl,.sub-xxxl, .sub1-xxxs,.sub1-xxs,.sub1-xs,.sub1-sm,.sub1-md,.sub1,.sub1-lg,.sub1-xl,.sub1-xxl,.sub1-xxxl, .sub2-xxxs,.sub2-xxs,.sub2-xs,.sub2-sm,.sub2-md,.sub2,.sub2-lg,.sub2-xl,.sub2-xxl,.sub2-xxxl { font-family:var(--MainNavSubFont); text-transform: none; line-height: 120%; font-size: 150%; font-weight: normal; vertical-align: top; /*vertical-align: baseline;*/ } .sub-xxxs, .sub1-xxxs, .sub2-xxxs {font-size: 110%;} .sub-xxs, .sub1-xxs, .sub2-xxs {font-size: 120%;} .sub-xs, .sub1-xs, .sub2-xs {font-size: 130%;} .sub-sm, .sub1-sm, .sub2-sm {font-size: 140%;} .sub-lg, .sub1-lg, .sub2-lg {font-size: 165%;} .sub-xl, .sub1-xl, .sub2-xl {font-size: 190%;} .sub-xxl, .sub1-xxl, .sub2-xxl {font-size: 220%;} .sub-xxxl, .sub1-xxxl, .sub2-xxxl {font-size: 250%;} /*.sub1-xxxs,.sub1-xxs,.sub1-xs,.sub1-sm,.sub1-md,.sub1,.sub1-lg,.sub1-xl,.sub1-xxl,.sub1-xxxl { color: var(--color1, #424242); } .sub2-xxxs,.sub2-xxs,.sub2-xs,.sub2-sm,.sub2-md,.sub2,.sub2-lg,.sub2-xl,.sub2-xxl,.sub2-xxxl { color: #666666; } */ /* =============================== TAG / LABELS =============================== */ /* label, see "label" in modules */ .tag-xxxs,.tag-xxs,.tag-xs,.tag-sm,.tag-md,.tag,.tag-lg,.tag-xl,.tag-xxl,.tag-xxxl, .tag1-xxxs,.tag1-xxs,.tag1-xs,.tag1-sm,.tag1-md,.tag1,.tag1-lg,.tag1-xl,.tag1-xxl,.tag1-xxxl, .tag2-xxxs,.tag2-xxs,.tag2-xs,.tag2-sm,.tag2-md,.tag2,.tag2-lg,.tag2-xl,.tag2-xxl,.tag2-xxxl { font-family: var(--labelTagfont) !important; color: var(--ContentTagColor); text-transform: var(--tagTextTransform); font-size: 0.8rem; font-weight: normal; align-self: baseline; display: block; margin: 0px; vertical-align: baseline; text-align: start; /*vertical-align: baseline; if "line-height" is set, then vertical-align is applied */ } .tag-xxxs, .tag1-xxxs, .tag2-xxxs {font-size: 0.6rem;} .tag-xxs, .tag1-xxs, .tag2-xxs {font-size: 0.65rem;} .tag-xs, .tag1-xs, .tag2-xs {font-size: 0.7rem;} .tag-sm, .tag1-sm, .tag2-sm {font-size: 0.75rem;} .tag-lg, .tag1-lg, .tag2-lg {font-size: 0.8rem;} .tag-xl, .tag1-xl, .tag2-xl {font-size: 0.9rem;} .tag-xxl, .tag1-xxl, .tag2-xxl {font-size: 1rem;} .tag-xxxl, .tag1-xxxl, .tag2-xxxl {font-size: 1.1rem;} /*.tag1-xxxs,.tag1-xxs,.tag1-xs,.tag1-sm,.tag1-md,.tag1,.tag1-lg,.tag1-xl,.tag1-xxl,.tag1-xxxl { color: var(--color1, #424242); } .tag2-xxxs,.tag2-xxs,.tag2-xs,.tag2-sm,.tag2-md,.tag2,.tag2-lg,.tag2-xl,.tag2-xxl,.tag2-xxxl { color: #636363; }*/ /* =============================== DESCRIPTION =============================== */ .desc-xxxs,.desc-xxs,.desc-xs,.desc-sm,.desc-md, .desc,.desc-lg,.desc-xl,.desc-xxl,.desc-xxxl, .desc1-xxxs,.desc1-xxs,.desc1-xs,.desc1-sm,.desc1-md,.desc1,.desc1-lg,.desc1-xl,.desc1-xxl,.desc1-xxxl, .desc2-xxxs,.desc2-xxs,.desc2-xs,.desc2-sm,.desc2-md,.desc2,.desc2-lg,.desc2-xl,.desc2-xxl,.desc2-xxxl { font-family: var(--LabelTagFont); text-transform: none; align-self: baseline; font-size: 0.95rem; font-weight: normal; vertical-align: baseline; /*vertical-align: baseline;*/ } .desc-xxxs, .desc1-xxxs, .desc2-xxxs {font-size: 0.6rem;} .desc-xxs, .desc1-xxs, .desc2-xxs {font-size: 0.7rem;} .desc-xs, .desc1-xs, .desc2-xs {font-size: 0.8rem;} .desc-sm, .desc1-sm, .desc2-sm {font-size: 0.9rem;} .desc-lg, .desc1-lg, .desc2-lg {font-size: 1rem;} .desc-xl, .desc1-xl, .desc2-xl {font-size: 1.05rem;} .desc-xxl, .desc1-xxl, .desc2-xxl {font-size: 1.1rem;} .desc-xxxl, .desc1-xxxl, .desc2-xxxl {font-size: 1.2rem;} /* =============================== CAPTION =============================== */ .caption-xxxs, .caption-xxs, .caption-xs, .caption-sm, .caption-md, .caption, .caption-lg, .caption-xl, .caption-xxl, .caption-xxxl, .caption1-xxxs, .caption1-xxs, .caption1-xs, .caption1-sm, .caption1-md, .caption1, .caption1-lg, .caption1-xl, .caption1-xxl, .caption1-xxxl, .caption2-xxxs, .caption2-xxs, .caption2-xs, .caption2-sm, .caption2-md, .caption2, .caption2-lg, .caption2-xl, .caption2-xxl, .caption2-xxxl { /* font-family: var(--font2); */ font-size: 0.8rem; /* font-weight: normal; */ /* vertical-align: baseline; */ font-style: italic; vertical-align: baseline; } .caption-xxxs, .caption1-xxxs, .caption2-xxxs {font-size: 0.6rem;} .caption-xxs, .caption1-xxs, .caption2-xxs {font-size: 0.65rem;} .caption-xs, .caption1-xs, .caption2-xs {font-size: 0.7rem;} .caption-sm, .caption1-sm, .caption2-sm {font-size: 0.75rem;} .caption-lg, .caption1-lg, .caption2-lg {font-size: 0.85rem;} .caption-xl, .caption1-xl, .caption2-xl {font-size: 0.9rem;} .caption-xxl, .caption1-xxl, .caption2-xxl {font-size: 0.95rem;} .caption-xxxl, .caption1-xxxl, .caption2-xxxl {font-size: 1rem;} a:link, a {color: var(--LinkColor); cursor: pointer !important;} a:visited {color: var(--LinkVisitedColor);} a:hover {color: var(--LinkHoverColor); text-decoration: var(--LinkHoverDecoration);} a:active {color: var(--LinkActiveColor);} .btn-primary { background-color: var(--PrimaryButtonColor); color: var(--PrimaryButtonTextColor);} .btn-secondary { background-color: var(--SecondaryButtonColor); color: var(--SecondaryButtonTextColor);} .sectionHeader {color: var(--SectionTagColor);} .tag {color: var(--ContentTagColor);} .billboardHeader {color: var(--BillboardHeaderColor);} /* =============================== DEFAULT STYlES . COlOR =============================== */ .onLt,.onLt div,.onLt span,.onLt p {color: var(--onLt_color3);} .onLt a:link,.onLt a {color: var(--onLt_color2l);} .onLt a:visited {color: var(--onLt_color2l);} .onLt a:hover {color: var(--onLt_color2xl); text-decoration: var(--onLtBglinkHoverdecoration);} .onLt a:active {color: var(--onLt_color2d);} .onLt h1,.onLt .h1,.onLt .head1 {color: var(--onLt_color1);} .onLt h2,.onLt .h2,.onLt .head2 {color: var(--onLt_color2);} .onLt h3,.onLt .h3,.onLt .head3 {color: var(--onLt_color1);} .onLt h4,.onLt .h4,.onLt .head4 {color: var(--onLt_color2);} .onLt h5,.onLt .h5,.onLt .head5 {color: var(--onLt_color1);} .onLt h6,.onLt .h6,.onLt .head6 {color: var(--onLt_color2);} .onLt a h1, .onLt a:link h1, .onLt a:visited h1, .onLt a:.onLt active h1 {color: var(--onLt_H1Color);} .onLt a:hover h1 {color: var(--onLt_color1xl);} .onLt a h2, .onLt a:link h2, .onLt a:visited h2, .onLt a:.onLt active h2 {color: var(--onLt_H2Color);} .onLt a:hover h2 {color: var(--onLt_color2xl);} .onLt a h3, .onLt a:link h3, .onLt a:visited h3, .onLt a:.onLt active h3 {color: var(--onLt_H3Color);} .onLt a:hover h3 {color: var(--onLt_color1xl);} .onLt a h4, .onLt a:link h4, .onLt a:visited h4, .onLt a:.onLt active h4 {color: var(--onLt_H4Color);} .onLt a:hover h4 {color: var(--onLt_color2xl);} .onLt a h5, .onLt a:link h5, .onLt a:visited h5, .onLt a:.onLt active h5 {color: var(--onLt_H5Color);} .onLt a:hover h5 {color: var(--onLt_color1xl);} .onLt a h6, .onLt a:link h6, .onLt a:visited h6, .onLt a:.onLt active h6 {color: var(--onLt_H6Color);} .onLt a:hover h6 {color: var(--onLt_color2xl);} .onLt .btn-primary {background-color: var(--onLt_color2); color: white;} .onLt .btn-secondary {background-color: var(--onLt_color1); color: white;} .onLt .sectionHeader {color: var(--onLt_color3);} .onLt .tag {color: var(--onLt_color2);} .onLt .billboardHeader {color: var(--onLt_color2);} .onDrk,.onDrk div,.onDrk span,.onDrk p {color: var(--onDrk_flexcolor3);} .onDrk a:link,.onDrk a {color: var(--onDrk_flexcolor2l);} .onDrk a:visited {color: var(--onDrk_flexcolor2l);} .onDrk a:hover {color: var(--onDrk_flexcolor2xl); text-decoration: var(--onDrkBglinkHoverdecoration);} .onDrk a:active {color: var(--onDrk_flexcolor2d);} .onDrk h1,.onDrk .h1,.onDrk .head1, .onDrk a h1, .onDrk a:link h1, .onDrk a:visited h1, .onDrk a:.onDrk active h1 {color: var(--onDrk_flexcolor1);} .onDrk a:hover h1 {color: var(--onDrk_flexcolor1xl);} .onDrk h2,.onDrk .h2,.onDrk .head2, .onDrk a h2, .onDrk a:link h2, .onDrk a:visited h2, .onDrk a:.onDrk active h2 {color: var(--onDrk_flexcolor2);} .onDrk a:hover h2 {color: var(--onDrk_flexcolor2xl);} .onDrk h3,.onDrk .h3,.onDrk .head3, .onDrk a h3, .onDrk a:link h3, .onDrk a:visited h3, .onDrk a:.onDrk active h3 {color: var(--onDrk_flexcolor1);} .onDrk a:hover h3 {color: var(--onDrk_flexcolor1xl);} .onDrk h4,.onDrk .h4,.onDrk .head4, .onDrk a h4, .onDrk a:link h4, .onDrk a:visited h4, .onDrk a:.onDrk active h4 {color: var(--onDrk_flexcolor2);} .onDrk a:hover h4 {color: var(--onDrk_flexcolor2xl);} .onDrk h5,.onDrk .h5,.onDrk .head5, .onDrk a h5, .onDrk a:link h5, .onDrk a:visited h5, .onDrk a:.onDrk active h5 {color: var(--onDrk_flexcolor1);} .onDrk a:hover h5 {color: var(--onDrk_flexcolor1xl);} .onDrk h6,.onDrk .h6,.onDrk .head6, .onDrk a h6, .onDrk a:link h6, .onDrk a:visited h6, .onDrk a:.onDrk active h6 {color: var(--onDrk_flexcolor2);} .onDrk a:hover h6 {color: var(--onDrk_flexcolor2xl);} .onDrk .btn-primary {background-color: var(--onDrk_flexcolor2); color: white;} .onDrk .btn-secondary {background-color: var(--onDrk_flexcolor1); color: white;} .onDrk .sectionHeader {color: var(--onDrk_flexcolor3);} .onDrk .tag {color: var(--onDrk_flexcolor2);} .onDrk .billboardHeader {color: var(--onDrk_flexcolor2);} .onC1,.onC1 div,.onC1 span,.onC1 p {color: var(--onC1_flexcolor3);} .onC1 a:link,.onC1 a {color: var(--onC1_flexcolor2l);} .onC1 a:visited {color: var(--onC1_flexcolor2l);} .onC1 a:hover {color: var(--onC1_flexcolor2xl); text-decoration: var(--onC1BglinkHoverdecoration);} .onC1 a:active {color: var(--onC1_flexcolor2d);} .onC1 h1,.onC1 .h1,.onC1 .head1 {color: var(--onC1_flexcolor1);} .onC1 h2,.onC1 .h2,.onC1 .head2 {color: var(--onC1_flexcolor2);} .onC1 h3,.onC1 .h3,.onC1 .head3 {color: var(--onC1_flexcolor1);} .onC1 h4,.onC1 .h4,.onC1 .head4 {color: var(--onC1_flexcolor2);} .onC1 h5,.onC1 .h5,.onC1 .head5 {color: var(--onC1_flexcolor1);} .onC1 h6,.onC1 .h6,.onC1 .head6 {color: var(--onC1_flexcolor2);} .onC1 a h1, .onC1 a:link h1, .onC1 a:visited h1, .onC1 a:.onC1 active h1 {color: var(--onC1_H1Color);} .onC1 a:hover h1 {color: var(--onC1_flexcolor1xl);} .onC1 a h2, .onC1 a:link h2, .onC1 a:visited h2, .onC1 a:.onC1 active h2 {color: var(--onC1_H2Color);} .onC1 a:hover h2 {color: var(--onC1_flexcolor2xl);} .onC1 a h3, .onC1 a:link h3, .onC1 a:visited h3, .onC1 a:.onC1 active h3 {color: var(--onC1_H3Color);} .onC1 a:hover h3 {color: var(--onC1_flexcolor1xl);} .onC1 a h4, .onC1 a:link h4, .onC1 a:visited h4, .onC1 a:.onC1 active h4 {color: var(--onC1_H4Color);} .onC1 a:hover h4 {color: var(--onC1_flexcolor2xl);} .onC1 a h5, .onC1 a:link h5, .onC1 a:visited h5, .onC1 a:.onC1 active h5 {color: var(--onC1_H5Color);} .onC1 a:hover h5 {color: var(--onC1_flexcolor1xl);} .onC1 a h6, .onC1 a:link h6, .onC1 a:visited h6, .onC1 a:.onC1 active h6 {color: var(--onC1_H6Color);} .onC1 a:hover h6 {color: var(--onC1_flexcolor2xl);} .onC1 .btn-primary {background-color: var(--onC1_flexcolor2); color: white;} .onC1 .btn-secondary {background-color: var(--onC1_flexcolor1); color: white;} .onC1 .sectionHeader {color: var(--onC1_flexcolor3);} .onC1 .tag {color: var(--onC1_flexcolor2);} .onC1 .billboardHeader {color: var(--onC1_flexcolor2);} .onC2,.onC2 div,.onC2 span,.onC2 p {color: var(--onC2_flexcolor3);} .onC2 a:link,.onC2 a {color: var(--onC2_flexcolor2l);} .onC2 a:visited {color: var(--onC2_flexcolor2l);} .onC2 a:hover {color: var(--onC2_flexcolor2xl); text-decoration: var(--onC2BglinkHoverdecoration);} .onC2 a:active {color: var(--onC2_flexcolor2d);} .onC2 h1,.onC2 .h1,.onC2 .head1 {color: var(--onC2_flexcolor1);} .onC2 h2,.onC2 .h2,.onC2 .head2 {color: var(--onC2_flexcolor2);} .onC2 h3,.onC2 .h3,.onC2 .head3 {color: var(--onC2_flexcolor1);} .onC2 h4,.onC2 .h4,.onC2 .head4 {color: var(--onC2_flexcolor2);} .onC2 h5,.onC2 .h5,.onC2 .head5 {color: var(--onC2_flexcolor1);} .onC2 h6,.onC2 .h6,.onC2 .head6 {color: var(--onC2_flexcolor2);} .onC2 a h1, .onC2 a:link h1, .onC2 a:visited h1, .onC2 a:.onC2 active h1 {color: var(--onC2_H1Color);} .onC2 a:hover h1 {color: var(--onC2_flexcolor1xl);} .onC2 a h2, .onC2 a:link h2, .onC2 a:visited h2, .onC2 a:.onC2 active h2 {color: var(--onC2_H2Color);} .onC2 a:hover h2 {color: var(--onC2_flexcolor2xl);} .onC2 a h3, .onC2 a:link h3, .onC2 a:visited h3, .onC2 a:.onC2 active h3 {color: var(--onC2_H3Color);} .onC2 a:hover h3 {color: var(--onC2_flexcolor1xl);} .onC2 a h4, .onC2 a:link h4, .onC2 a:visited h4, .onC2 a:.onC2 active h4 {color: var(--onC2_H4Color);} .onC2 a:hover h4 {color: var(--onC2_flexcolor2xl);} .onC2 a h5, .onC2 a:link h5, .onC2 a:visited h5, .onC2 a:.onC2 active h5 {color: var(--onC2_H5Color);} .onC2 a:hover h5 {color: var(--onC2_flexcolor1xl);} .onC2 a h6, .onC2 a:link h6, .onC2 a:visited h6, .onC2 a:.onC2 active h6 {color: var(--onC2_H6Color);} .onC2 a:hover h6 {color: var(--onC2_flexcolor2xl);} .onC2 .btn-primary {background-color: var(--onC2_flexcolor2); color: white;} .onC2 .btn-secondary {background-color: var(--onC2_flexcolor1); color: white;} .onC2 .sectionHeader {color: var(--onC2_flexcolor3);} .onC2 .tag {color: var(--onC2_flexcolor2);} .onC2 .billboardHeader {color: var(--onC2_flexcolor2);} .onC3,.onC3 div,.onC3 span,.onC3 p {color: var(--onC3_flexcolor3);} .onC3 a:link,.onC3 a {color: var(--onC3_flexcolor2l);} .onC3 a:visited {color: var(--onC3_flexcolor2l);} .onC3 a:hover {color: var(--onC3_flexcolor2xl); text-decoration: var(--onC3BglinkHoverdecoration);} .onC3 a:active {color: var(--onC3_flexcolor2d);} .onC3 h1,.onC3 .h1,.onC3 .head1 {color: var(--onC3_flexcolor1);} .onC3 h2,.onC3 .h2,.onC3 .head2 {color: var(--onC3_flexcolor2);} .onC3 h3,.onC3 .h3,.onC3 .head3 {color: var(--onC3_flexcolor1);} .onC3 h4,.onC3 .h4,.onC3 .head4 {color: var(--onC3_flexcolor2);} .onC3 h5,.onC3 .h5,.onC3 .head5 {color: var(--onC3_flexcolor1);} .onC3 h6,.onC3 .h6,.onC3 .head6 {color: var(--onC3_flexcolor2);} .onC3 a h1, .onC3 a:link h1, .onC3 a:visited h1, .onC3 a:.onC3 active h1 {color: var(--onC3_H1Color);} .onC3 a:hover h1 {color: var(--onC3_flexcolor1xl);} .onC3 a h2, .onC3 a:link h2, .onC3 a:visited h2, .onC3 a:.onC3 active h2 {color: var(--onC3_H2Color);} .onC3 a:hover h2 {color: var(--onC3_flexcolor2xl);} .onC3 a h3, .onC3 a:link h3, .onC3 a:visited h3, .onC3 a:.onC3 active h3 {color: var(--onC3_H3Color);} .onC3 a:hover h3 {color: var(--onC3_flexcolor1xl);} .onC3 a h4, .onC3 a:link h4, .onC3 a:visited h4, .onC3 a:.onC3 active h4 {color: var(--onC3_H4Color);} .onC3 a:hover h4 {color: var(--onC3_flexcolor2xl);} .onC3 a h5, .onC3 a:link h5, .onC3 a:visited h5, .onC3 a:.onC3 active h5 {color: var(--onC3_H5Color);} .onC3 a:hover h5 {color: var(--onC3_flexcolor1xl);} .onC3 a h6, .onC3 a:link h6, .onC3 a:visited h6, .onC3 a:.onC3 active h6 {color: var(--onC3_H6Color);} .onC3 a:hover h6 {color: var(--onC3_flexcolor2xl);} .onC3 .btn-primary {background-color: var(--onC3_flexcolor2); color: white;} .onC3 .btn-secondary {background-color: var(--onC3_flexcolor1); color: white;} .onC3 .sectionHeader {color: var(--onC3_flexcolor3);} .onC3 .tag {color: var(--onC3_flexcolor2);} .onC3 .billboardHeader {color: var(--onC3_flexcolor2);} .onC4,.onC4 div,.onC4 span,.onC4 p {color: var(--onC4_flexcolor3);} .onC4 a:link,.onC4 a {color: var(--onC4_flexcolor2l);} .onC4 a:visited {color: var(--onC4_flexcolor2l);} .onC4 a:hover {color: var(--onC4_flexcolor2xl); text-decoration: var(--onC4BglinkHoverdecoration);} .onC4 a:active {color: var(--onC4_flexcolor2d);} .onC4 h1,.onC4 .h1,.onC4 .head1 {color: var(--onC4_flexcolor1);} .onC4 h2,.onC4 .h2,.onC4 .head2 {color: var(--onC4_flexcolor2);} .onC4 h3,.onC4 .h3,.onC4 .head3 {color: var(--onC4_flexcolor1);} .onC4 h4,.onC4 .h4,.onC4 .head4 {color: var(--onC4_flexcolor2);} .onC4 h5,.onC4 .h5,.onC4 .head5 {color: var(--onC4_flexcolor1);} .onC4 h6,.onC4 .h6,.onC4 .head6 {color: var(--onC4_flexcolor2);} .onC4 a h1, .onC4 a:link h1, .onC4 a:visited h1, .onC4 a:.onC4 active h1 {color: var(--onC4_H1Color);} .onC4 a:hover h1 {color: var(--onC4_flexcolor1xl);} .onC4 a h2, .onC4 a:link h2, .onC4 a:visited h2, .onC4 a:.onC4 active h2 {color: var(--onC4_H2Color);} .onC4 a:hover h2 {color: var(--onC4_flexcolor2xl);} .onC4 a h3, .onC4 a:link h3, .onC4 a:visited h3, .onC4 a:.onC4 active h3 {color: var(--onC4_H3Color);} .onC4 a:hover h3 {color: var(--onC4_flexcolor1xl);} .onC4 a h4, .onC4 a:link h4, .onC4 a:visited h4, .onC4 a:.onC4 active h4 {color: var(--onC4_H4Color);} .onC4 a:hover h4 {color: var(--onC4_flexcolor2xl);} .onC4 a h5, .onC4 a:link h5, .onC4 a:visited h5, .onC4 a:.onC4 active h5 {color: var(--onC4_H5Color);} .onC4 a:hover h5 {color: var(--onC4_flexcolor1xl);} .onC4 a h6, .onC4 a:link h6, .onC4 a:visited h6, .onC4 a:.onC4 active h6 {color: var(--onC4_H6Color);} .onC4 a:hover h6 {color: var(--onC4_flexcolor2xl);} .onC4 .btn-primary {background-color: var(--onC4_flexcolor2); color: white;} .onC4 .btn-secondary {background-color: var(--onC4_flexcolor1); color: white;} .onC4 .sectionHeader {color: var(--onC4_flexcolor3);} .onC4 .tag {color: var(--onC4_flexcolor2);} .onC4 .billboardHeader {color: var(--onC4_flexcolor2);} .onC5,.onC5 div,.onC5 span,.onC5 p {color: var(--onC5_flexcolor3);} .onC5 a:link,.onC5 a {color: var(--onC5_flexcolor2l);} .onC5 a:visited {color: var(--onC5_flexcolor2l);} .onC5 a:hover {color: var(--onC5_flexcolor2xl); text-decoration: var(--onC5BglinkHoverdecoration);} .onC5 a:active {color: var(--onC5_flexcolor2d);} .onC5 h1,.onC5 .h1,.onC5 .head1 {color: var(--onC5_flexcolor1);} .onC5 h2,.onC5 .h2,.onC5 .head2 {color: var(--onC5_flexcolor2);} .onC5 h3,.onC5 .h3,.onC5 .head3 {color: var(--onC5_flexcolor1);} .onC5 h4,.onC5 .h4,.onC5 .head4 {color: var(--onC5_flexcolor2);} .onC5 h5,.onC5 .h5,.onC5 .head5 {color: var(--onC5_flexcolor1);} .onC5 h6,.onC5 .h6,.onC5 .head6 {color: var(--onC5_flexcolor2);} .onC5 a h1, .onC5 a:link h1, .onC5 a:visited h1, .onC5 a:.onC5 active h1 {color: var(--onC5_H1Color);} .onC5 a:hover h1 {color: var(--onC5_flexcolor1xl);} .onC5 a h2, .onC5 a:link h2, .onC5 a:visited h2, .onC5 a:.onC5 active h2 {color: var(--onC5_H2Color);} .onC5 a:hover h2 {color: var(--onC5_flexcolor2xl);} .onC5 a h3, .onC5 a:link h3, .onC5 a:visited h3, .onC5 a:.onC5 active h3 {color: var(--onC5_H3Color);} .onC5 a:hover h3 {color: var(--onC5_flexcolor1xl);} .onC5 a h4, .onC5 a:link h4, .onC5 a:visited h4, .onC5 a:.onC5 active h4 {color: var(--onC5_H4Color);} .onC5 a:hover h4 {color: var(--onC5_flexcolor2xl);} .onC5 a h5, .onC5 a:link h5, .onC5 a:visited h5, .onC5 a:.onC5 active h5 {color: var(--onC5_H5Color);} .onC5 a:hover h5 {color: var(--onC5_flexcolor1xl);} .onC5 a h6, .onC5 a:link h6, .onC5 a:visited h6, .onC5 a:.onC5 active h6 {color: var(--onC5_H6Color);} .onC5 a:hover h6 {color: var(--onC5_flexcolor2xl);} .onC5 .btn-primary {background-color: var(--onC5_flexcolor2); color: white;} .onC5 .btn-secondary {background-color: var(--onC5_flexcolor1); color: white;} .onC5 .sectionHeader {color: var(--onC5_flexcolor3);} .onC5 .tag {color: var(--onC5_flexcolor2);} .onC5 .billboardHeader {color: var(--onC5_flexcolor2);} .onMix,.onMix div,.onMix span,.onMix p {color: flexwhite ;} .onMix a:link,.onMix a {color: var(--onMix_flexcolor2l);} .onMix a:visited {color: var(--onMix_flexcolor2l);} .onMix a:hover {color: var(--onMix_flexcolor2xl); text-decoration: var(--onMixBglinkHoverdecoration);} .onMix a:active {color: var(--onMix_flexcolor2d);} .onMix h1,.onMix .h1,.onMix .head1 {color: flexwhite;} .onMix h2,.onMix .h2,.onMix .head2 {color: flexwhite;} .onMix h3,.onMix .h3,.onMix .head3 {color: flexwhite;} .onMix h4,.onMix .h4,.onMix .head4 {color: flexwhite;} .onMix h5,.onMix .h5,.onMix .head5 {color: flexwhite;} .onMix h6,.onMix .h6,.onMix .head6 {color: flexwhite;} .onMix .btn-primary {background-color: flexwhite; color: var(--color2);} .onMix .btn-secondary {background-color: flexwhite; color: var(--color1);} .onMix .sectionHeader {color: flexwhite;} .onMix .tag {color: flexwhite;} .onMix .billboardHeader {color: flexwhite;} /* =============================== FLEX COLOR =============================== */ .flexcolor1, .flex1, .fc1 {color: var(--flexcolor1) !important;} .flexcolor1l, .flex1l, .fc1l {color: var(--flexcolor1l) !important;} .flexcolor1xl, .flex1xl, .fc1xl {color: var(--flexcolor1xl) !important;} .flexcolor1d, .flex1d, .fc1d {color: var(--flexcolor1d) !important;} .flexcolor1xd, .flex1xd, .fc1xd {color: var(--flexcolor1xd) !important;} .flexcolor1xxd, .flex1xxd, .fc1xxd {color: var(--flexcolor1xxd) !important;} .flexcolor1rgb, .flex1rgb, .fc1rgb {color: var(--flexcolor1rgb) !important;} .flexcolor1raw, .flex1raw, .fc1raw {color: var(--flexcolor1raw) !important;} .flexcolor1f1, .fc1f1 {color: var(--flexcolor1f1) !important;} .flexcolor1f2, .fc1f2 {color: var(--flexcolor1f2) !important;} .flexcolor1f3, .fc1f3 {color: var(--flexcolor1f3) !important;} .flexcolor1f4, .fc1f4 {color: var(--flexcolor1f4) !important;} .flexcolor1f5, .fc1f5 {color: var(--flexcolor1f5) !important;} .flexcolor1f6, .fc1f6 {color: var(--flexcolor1f6) !important;} .flexcolor1f7, .fc1f7 {color: var(--flexcolor1f7) !important;} .flexcolor1f8, .fc1f8 {color: var(--flexcolor1f8) !important;} .flexcolor1f9, .fc1f9 {color: var(--flexcolor1f9) !important;} .bg-flexcolor1, .bg-fc1 {background-color: var(--flexcolor1) !important;} .reverse1, .rc1 {color: var(--reverse1) !important;} .flexcolor2, .flex2, .fc2 {color: var(--flexcolor2) !important;} .flexcolor2l, .flex2l, .fc2l {color: var(--flexcolor2l) !important;} .flexcolor2xl, .flex2xl, .fc2xl {color: var(--flexcolor2xl) !important;} .flexcolor2d, .flex2d, .fc2d {color: var(--flexcolor2d) !important;} .flexcolor2xd, .flex2xd, .fc2xd {color: var(--flexcolor2xd) !important;} .flexcolor2xxd, .flex2xxd, .fc2xxd {color: var(--flexcolor2xxd) !important;} .flexcolor2rgb, .flex2rgb, .fc2rgb {color: var(--flexcolor2rgb) !important;} .flexcolor2raw, .flex2raw, .fc2raw {color: var(--flexcolor2raw) !important;} .flexcolor2f1, .fc2f1 {color: var(--flexcolor2f1) !important;} .flexcolor2f2, .fc2f2 {color: var(--flexcolor2f2) !important;} .flexcolor2f3, .fc2f3 {color: var(--flexcolor2f3) !important;} .flexcolor2f4, .fc2f4 {color: var(--flexcolor2f4) !important;} .flexcolor2f5, .fc2f5 {color: var(--flexcolor2f5) !important;} .flexcolor2f6, .fc2f6 {color: var(--flexcolor2f6) !important;} .flexcolor2f7, .fc2f7 {color: var(--flexcolor2f7) !important;} .flexcolor2f8, .fc2f8 {color: var(--flexcolor2f8) !important;} .flexcolor2f9, .fc2f9 {color: var(--flexcolor2f9) !important;} .bg-flexcolor2, .bg-fc2 {background-color: var(--flexcolor2) !important;} .reverse2, .rc2 {color: var(--reverse2) !important;} .flexcolor3, .flex3, .fc3 {color: var(--flexcolor3) !important;} .flexcolor3l, .flex3l, .fc3l {color: var(--flexcolor3l) !important;} .flexcolor3xl, .flex3xl, .fc3xl {color: var(--flexcolor3xl) !important;} .flexcolor3d, .flex3d, .fc3d {color: var(--flexcolor3d) !important;} .flexcolor3xd, .flex3xd, .fc3xd {color: var(--flexcolor3xd) !important;} .flexcolor3xxd, .flex3xxd, .fc3xxd {color: var(--flexcolor3xxd) !important;} .flexcolor3rgb, .flex3rgb, .fc3rgb {color: var(--flexcolor3rgb) !important;} .flexcolor3raw, .flex3raw, .fc3raw {color: var(--flexcolor3raw) !important;} .flexcolor3f1, .fc3f1 {color: var(--flexcolor3f1) !important;} .flexcolor3f2, .fc3f2 {color: var(--flexcolor3f2) !important;} .flexcolor3f3, .fc3f3 {color: var(--flexcolor3f3) !important;} .flexcolor3f4, .fc3f4 {color: var(--flexcolor3f4) !important;} .flexcolor3f5, .fc3f5 {color: var(--flexcolor3f5) !important;} .flexcolor3f6, .fc3f6 {color: var(--flexcolor3f6) !important;} .flexcolor3f7, .fc3f7 {color: var(--flexcolor3f7) !important;} .flexcolor3f8, .fc3f8 {color: var(--flexcolor3f8) !important;} .flexcolor3f9, .fc3f9 {color: var(--flexcolor3f9) !important;} .bg-flexcolor3, .bg-fc3 {background-color: var(--flexcolor3) !important;} .reverse3, .rc3 {color: var(--reverse3) !important;} .flexcolor4, .flex4, .fc4 {color: var(--flexcolor4) !important;} .flexcolor4l, .flex4l, .fc4l {color: var(--flexcolor4l) !important;} .flexcolor4xl, .flex4xl, .fc4xl {color: var(--flexcolor4xl) !important;} .flexcolor4d, .flex4d, .fc4d {color: var(--flexcolor4d) !important;} .flexcolor4xd, .flex4xd, .fc4xd {color: var(--flexcolor4xd) !important;} .flexcolor4xxd, .flex4xxd, .fc4xxd {color: var(--flexcolor4xxd) !important;} .flexcolor4rgb, .flex4rgb, .fc4rgb {color: var(--flexcolor4rgb) !important;} .flexcolor4raw, .flex4raw, .fc4raw {color: var(--flexcolor4raw) !important;} .bg-flexcolor4, .bg-fc4 {background-color: var(--flexcolor4) !important;} .reverse4, .rc4 {color: var(--reverse4) !important;} .flexcolor5, .flex5, .fc5 {color: var(--flexcolor5) !important;} .flexcolor5l, .flex5l, .fc5l {color: var(--flexcolor5l) !important;} .flexcolor5xl, .flex5xl, .fc5xl {color: var(--flexcolor5xl) !important;} .flexcolor5d, .flex5d, .fc5d {color: var(--flexcolor5d) !important;} .flexcolor5xd, .flex5xd, .fc5xd {color: var(--flexcolor5xd) !important;} .flexcolor5xxd, .flex5xxd, .fc5xxd {color: var(--flexcolor5xxd) !important;} .flexcolor5rgb, .flex5rgb, .fc5rgb {color: var(--flexcolor5rgb) !important;} .flexcolor5raw, .flex5raw, .fc5raw {color: var(--flexcolor5raw) !important;} .bg-flexcolor5, .bg-fc5 {background-color: var(--flexcolor5) !important;} .reverse5, .rc5 {color: var(--reverse5) !important;} .flexwhite, .flexblack, .fbw {color: var(--flexwhite) !important;} .flexwhitel, .flexblackl, .fbwl {color: var(--flexwhitel) !important;} .flexwhitexl, .flexblackxl, .fbwxl {color: var(--flexwhitexl) !important;} .flexwhited, .flexblackd, .fbwd {color: var(--flexwhited) !important;} .flexwhitexd, .flexblackxd, .fbwxd {color: var(--flexwhitexd) !important;} .flexwhitexxd, .flexblackxxd, .fbwxxd {color: var(--flexwhitexxd) !important;} .flexwhitergb, .flexblackrgb, .fbwrgb {color: var(--flexwhitergb) !important;} .flexwhiteraw, .flexblackraw, .fbwraw {color: var(--flexwhiteraw) !important;} .flexwhite01, .flexblack01 {color: var(--flexwhite01) !important;} .flexwhite02, .flexblack02 {color: var(--flexwhite02) !important;} .flexwhite03, .flexblack03 {color: var(--flexwhite03) !important;} .flexwhite04, .flexblack04 {color: var(--flexwhite04) !important;} .flexwhite05, .flexblack05 {color: var(--flexwhite05) !important;} .flexwhite06, .flexblack06 {color: var(--flexwhite06) !important;} .flexwhite07, .flexblack07 {color: var(--flexwhite07) !important;} .flexwhite08, .flexblack08 {color: var(--flexwhite08) !important;} .flexwhite09, .flexblack09 {color: var(--flexwhite09) !important;} .flexwhite1, .flexblack11 {color: var(--flexwhite11) !important;} .flexwhite1, .flexblack12 {color: var(--flexwhite12) !important;} .flexwhite1, .flexblack13 {color: var(--flexwhite13) !important;} .flexwhite1, .flexblack14 {color: var(--flexwhite14) !important;} .flexwhite1, .flexblack15 {color: var(--flexwhite15) !important;} .flexwhite1, .fw1, .flexblack1 {color: var(--flexwhite1) !important;} .flexwhite2, .fw2, .flexblack2 {color: var(--flexwhite2) !important;} .flexwhite3, .fw3, .flexblack3 {color: var(--flexwhite3) !important;} .flexwhite4, .fw4, .flexblack4 {color: var(--flexwhite4) !important;} .flexwhite5, .fw5, .flexblack5 {color: var(--flexwhite5) !important;} .flexwhite6, .fw6, .flexblack6 {color: var(--flexwhite6) !important;} .flexwhite7, .fw7, .flexblack7 {color: var(--flexwhite7) !important;} .flexwhite8, .fw8, .flexblack8 {color: var(--flexwhite8) !important;} .flexwhite9, .fw9, .flexblack9 {color: var(--flexwhite9) !important;} .bg-flexwhite, .bg-flexblack {background-color: var(--flexwhite) !important;} .bg-flexwhite01, .bg-flexblack01 {background-color: var(--flexwhite01) !important;} .bg-flexwhite02, .bg-flexblack02 {background-color: var(--flexwhite02) !important;} .bg-flexwhite03, .bg-flexblack03 {background-color: var(--flexwhite03) !important;} .bg-flexwhite04, .bg-flexblack04 {background-color: var(--flexwhite04) !important;} .bg-flexwhite05, .bg-flexblack05 {background-color: var(--flexwhite05) !important;} .bg-flexwhite06, .bg-flexblack06 {background-color: var(--flexwhite06) !important;} .bg-flexwhite07, .bg-flexblack07 {background-color: var(--flexwhite07) !important;} .bg-flexwhite08, .bg-flexblack08 {background-color: var(--flexwhite08) !important;} .bg-flexwhite09, .bg-flexblack09 {background-color: var(--flexwhite09) !important;} .bg-flexwhite11, .bg-flexblack11 {background-color: var(--flexwhite11) !important;} .bg-flexwhite12, .bg-flexblack12 {background-color: var(--flexwhite12) !important;} .bg-flexwhite13, .bg-flexblack13 {background-color: var(--flexwhite13) !important;} .bg-flexwhite14, .bg-flexblack14 {background-color: var(--flexwhite14) !important;} .bg-flexwhite15, .bg-flexblack15 {background-color: var(--flexwhite15) !important;} .bg-flexwhite1, .bg-flexblack1 {background-color: var(--flexwhite1) !important;} .bg-flexwhite2, .bg-flexblack2 {background-color: var(--flexwhite2) !important;} .bg-flexwhite3, .bg-flexblack3 {background-color: var(--flexwhite3) !important;} .bg-flexwhite4, .bg-flexblack4 {background-color: var(--flexwhite4) !important;} .bg-flexwhite5, .bg-flexblack5 {background-color: var(--flexwhite5) !important;} .bg-flexwhite6, .bg-flexblack6 {background-color: var(--flexwhite6) !important;} .bg-flexwhite7, .bg-flexblack7 {background-color: var(--flexwhite7) !important;} .bg-flexwhite8, .bg-flexblack8 {background-color: var(--flexwhite8) !important;} .bg-flexwhite9, .bg-flexblack9 {background-color: var(--flexwhite9) !important;} .fade1 {color: var(--fade1) !important;} .fade2 {color: var(--fade2) !important;} .fade3 {color: var(--fade3) !important;} .fade4 {color: var(--fade4) !important;} .fade5, .fade {color: var(--fade5) !important;} .fade6 {color: var(--fade6) !important;} .fade7 {color: var(--fade7) !important;} .fade8 {color: var(--fade8) !important;} .fade9 {color: var(--fade9) !important;} .fade10 {color: var(--fade10) !important;} /* =============================== FLEX COLOR on BACKGROUND =============================== */ /* =============================== ALT COLOR =============================== */ .altcolor1, .alt1, .ac1 {color: var(--altcolor1) !important;} .altcolor1l, .alt1l, .ac1l {color: var(--altcolor1l) !important;} .altcolor1xl, .alt1xl, .ac1xl {color: var(--altcolor1xl) !important;} .altcolor1d, .alt1d, .ac1d {color: var(--altcolor1d) !important;} .altcolor1xd, .alt1xd, .ac1xd {color: var(--altcolor1xd) !important;} .altcolor1xxd, .alt1xxd, .ac1xxd {color: var(--altcolor1xxd) !important;} .altcolor1rgb, .alt1rgb, .ac1rgb {color: var(--altcolor1rgb) !important;} .altcolor1raw, .alt1raw, .ac1raw {color: var(--altcolor1raw) !important;} .altcolor1f1, .ac1f1 {color: var(--altcolor1f1) !important;} .altcolor1f2, .ac1f2 {color: var(--altcolor1f2) !important;} .altcolor1f3, .ac1f3 {color: var(--altcolor1f3) !important;} .altcolor1f4, .ac1f4 {color: var(--altcolor1f4) !important;} .altcolor1f5, .ac1f5 {color: var(--altcolor1f5) !important;} .altcolor1f6, .ac1f6 {color: var(--altcolor1f6) !important;} .altcolor1f7, .ac1f7 {color: var(--altcolor1f7) !important;} .altcolor1f8, .ac1f8 {color: var(--altcolor1f8) !important;} .altcolor1f9, .ac1f9 {color: var(--altcolor1f9) !important;} .bg-altcolor1, .bg-ac1 {background-color: var(--altcolor1) !important;} .altcolor2, .alt2, .ac2 {color: var(--altcolor2) !important;} .altcolor2l, .alt2l, .ac2l {color: var(--altcolor2l) !important;} .altcolor2xl, .alt2xl, .ac2xl {color: var(--altcolor2xl) !important;} .altcolor2d, .alt2d, .ac2d {color: var(--altcolor2d) !important;} .altcolor2xd, .alt2xd, .ac2xd {color: var(--altcolor2xd) !important;} .altcolor2xxd, .alt2xxd, .ac2xxd {color: var(--altcolor2xxd) !important;} .altcolor2rgb, .alt2rgb, .ac2rgb {color: var(--altcolor2rgb) !important;} .altcolor2raw, .alt2raw, .ac2raw {color: var(--altcolor2raw) !important;} .altcolor2f1, .ac2f1 {color: var(--altcolor2f1) !important;} .altcolor2f2, .ac2f2 {color: var(--altcolor2f2) !important;} .altcolor2f3, .ac2f3 {color: var(--altcolor2f3) !important;} .altcolor2f4, .ac2f4 {color: var(--altcolor2f4) !important;} .altcolor2f5, .ac2f5 {color: var(--altcolor2f5) !important;} .altcolor2f6, .ac2f6 {color: var(--altcolor2f6) !important;} .altcolor2f7, .ac2f7 {color: var(--altcolor2f7) !important;} .altcolor2f8, .ac2f8 {color: var(--altcolor2f8) !important;} .altcolor2f9, .ac2f9 {color: var(--altcolor2f9) !important;} .bg-altcolor2, .bg-ac2 {background-color: var(--altcolor2) !important;} .altcolor3, .alt3, .ac3 {color: var(--altcolor3) !important;} .altcolor3l, .alt3l, .ac3l {color: var(--altcolor3l) !important;} .altcolor3xl, .alt3xl, .ac3xl {color: var(--altcolor3xl) !important;} .altcolor3d, .alt3d, .ac3d {color: var(--altcolor3d) !important;} .altcolor3xd, .alt3xd, .ac3xd {color: var(--altcolor3xd) !important;} .altcolor3xxd, .alt3xxd, .ac3xxd {color: var(--altcolor3xxd) !important;} .altcolor3rgb, .alt3rgb, .ac3rgb {color: var(--altcolor3rgb) !important;} .altcolor3raw, .alt3raw, .ac3raw {color: var(--altcolor3raw) !important;} .altcolor3f1, .ac3f1 {color: var(--altcolor3f1) !important;} .altcolor3f2, .ac3f2 {color: var(--altcolor3f2) !important;} .altcolor3f3, .ac3f3 {color: var(--altcolor3f3) !important;} .altcolor3f4, .ac3f4 {color: var(--altcolor3f4) !important;} .altcolor3f5, .ac3f5 {color: var(--altcolor3f5) !important;} .altcolor3f6, .ac3f6 {color: var(--altcolor3f6) !important;} .altcolor3f7, .ac3f7 {color: var(--altcolor3f7) !important;} .altcolor3f8, .ac3f8 {color: var(--altcolor3f8) !important;} .altcolor3f9, .ac3f9 {color: var(--altcolor3f9) !important;} .bg-altcolor3, .bg-ac3 {background-color: var(--altcolor3) !important;} .altcolor4, .alt4, .ac4 {color: var(--altcolor4) !important;} .altcolor4l, .alt4l, .ac4l {color: var(--altcolor4l) !important;} .altcolor4xl, .alt4xl, .ac4xl {color: var(--altcolor4xl) !important;} .altcolor4d, .alt4d, .ac4d {color: var(--altcolor4d) !important;} .altcolor4xd, .alt4xd, .ac4xd {color: var(--altcolor4xd) !important;} .altcolor4xxd, .alt4xxd, .ac4xxd {color: var(--altcolor4xxd) !important;} .altcolor4rgb, .alt4rgb, .ac4rgb {color: var(--altcolor4rgb) !important;} .altcolor4raw, .alt4raw, .ac4raw {color: var(--altcolor4raw) !important;} .bg-altcolor4, .bg-ac4 {background-color: var(--altcolor4) !important;} .altcolor5, .alt5, .ac5 {color: var(--altcolor5) !important;} .altcolor5l, .alt5l, .ac5l {color: var(--altcolor5l) !important;} .altcolor5xl, .alt5xl, .ac5xl {color: var(--altcolor5xl) !important;} .altcolor5d, .alt5d, .ac5d {color: var(--altcolor5d) !important;} .altcolor5xd, .alt5xd, .ac5xd {color: var(--altcolor5xd) !important;} .altcolor5xxd, .alt5xxd, .ac5xxd {color: var(--altcolor5xxd) !important;} .altcolor5rgb, .alt5rgb, .ac5rgb {color: var(--altcolor5rgb) !important;} .altcolor5raw, .alt5raw, .ac5raw {color: var(--altcolor5raw) !important;} .bg-altcolor5, .bg-ac5 {background-color: var(--altcolor5) !important;} /* ============================================================== STANDARDS . TLC 3.0 ============================================================== */ a, a:link, a:visited, a:hover, a:focus, button { border:none; background-color:transperant; outline:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; /* Touch iOs remove gray bg */ /* -webkit-tap-highlight-color: red; -webkit-tap-highlight-color: transparent; /* for removing the highlight */ } #mdb-preloader.loaded { opacity: 0; transition: .3s ease-in 1s; } .load-center { /* text-align: center !important; */ margin-top: 0 auto; position: fixed; top: 47.4%; left: 47.7%; /* transform: translate(-50%, -50%); */ text-align: center; z-index: 20 !important; } .load-bg { background-color: var(--color3xd) !important; opacity: 0.75 !important; margin-top: 0 auto; position: fixed; top: 0; left: 0; z-index: 0.7 !important; width: 100% !important; height: 100% !important; } /*HELPERS*/ .heightauto { height: auto !Important; } .clearfix, clearFoo {float:none;clear:both;} img, a img, img a { border: 0px; border-image-width: 0px; /* nobody likes default border around images */ transition: all 200ms ease-in-out; margin: 0 auto; } ol ol, ol ul, ul ol, ul ul {margin: 0; padding: 0;} .clear {display: inline-block;} .clearFoo {clear:both; width:100%;} .end {clear:both; width:100%; margin-bottom: 40px;} object, embed { outline: 0;} input::-moz-focus-inner {border: 0;} button:focus, input {outline:0 !important;} svg {max-height: 100% !important;} .offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; } .ono {overflow: hidden !important;} .oyo {overflow: visible !important;} .hide, .hidden {display: none;} .no-gutters.all > .col, .no-gutters.all > [class*=col-] { padding-bottom: 0 !important; } /* HEADER STRETCH */ h1.center-stretch { font-size: 1.25rem !important; font-family: var(--font3) !important; } h1.center-stretch .text { letter-spacing: 0.5rem !important; text-transform: uppercase !important; } @media (max-width: 768px) { h1.center-stretch .text { letter-spacing: 0.3rem !important; text-transform: uppercase !important; font-size: 0.9rem !important; } } /* Separator - top of Testimonial, home page, etc */ .separator { display: flex; align-items: baseline; text-align: center; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--flexwhite3) !important; } .separator::after { margin-left: 1.25rem; margin-top: -1rem; } .separator .text { font-size: 80%; /*margin: 0;*/ padding: 0px 4px 7px 5px; } .separator::before { margin-right: 1.25rem; margin-top: -1rem; } /* =============================== IMAGE . CONTAIN =============================== */ /* Background image div */ .background-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('your-image-url.jpg'); background-size: cover; background-position: center; z-index: -1; /* Place it behind the content */ } /* Content div */ .content { position: relative; /* Keeps content above the background */ z-index: 1; /* Optional styling */ color: #fff; /* Ensure content is readable on background */ } .overflowH, .cover, .contain, .cover.Left, .cover.Right, .cover.Top, .cover.Bottom, .cover.Left-Top, .cover.Left-Bottom, .cover.Right-Top, .cover.Right-Bottom { overflow: hidden; } .cover > img, .cover.Left img, .cover.Right img, .cover.Top img, .cover.Bottom img, .cover.Left-Top img, .cover.Left-Bottom img, .cover.Right-Top img, .cover.Right-Bottom img { object-fit: cover; object-position: center center; height: inherit; min-width: 100%; position: relative; } .cover {background-size: cover;} .contain { background-size: contain; background-repeat: no-repeat; } .contain > img { object-fit: contain; } .contain.Center img, .cover.Center img {object-position: center center;} .contain.Left img, .cover.Left img {object-position: left center;} .contain.Right img, .cover.Right img {object-position: right center;} .contain.Top img, .cover.Top img {object-position: center top;} .contain.Bottom img, .cover.Bottom img {object-position: center bottom;} .contain.Left-Top img, .cover.Left-Top img {object-position: left top;} .contain.Left-Bottom img, .cover.Left-Bottom img {object-position: left bottom;} .contain.Right-Top img, .cover.Right-Top img {object-position: right top;} .contain.Right-Bottom img, .cover.Right-Bottom img {object-position: right bottom;} .contain.Center {background-position: center center;} .contain.Left {background-position: left center;} .contain.Right {background-position: right center;} .contain.Top {background-position: center top;} .contain.Bottom {background-position: center bottom;} .contain.Left-Top {background-position: left top;} .contain.Left-Bottom {background-position: left bottom;} .contain.Right-Top {background-position: right top;} .contain.Right-Bottom {background-position: right bottom;} /* IMG */ a img, a:link img, a .nolink img, a .nolink a:link img { transition: all 300ms ease-out; transform: scale3d(1, 1, 1); } /* IMG HOVER */ a:hover img, a img:hover { transform: scale3d(1.1, 1.1, 1); } /* SVG */ .list-hit a svg, .list-hit a:link svg, .list-hit a .nolink svg, .list-hit a .nolink a:link svg { transition: all 300ms ease-out; transform: scale3d(1, 1, 1); } /* SVG HOVER */ .list-hit a:hover svg, .list-hit a svg:hover { transition: all 300ms ease-out; transform: scale3d(1.15, 1.15, 1.15); } .nolink:hover img, .nolink a:hover img, .nolink:hover svg, .nolink a:hover svg { transform: none !important; } .flash { -webkit-transition: background 0.5s ease-in; -moz-transition: background 0.5s ease-in; -o-transition: background 0.5s ease-in; -ms-transition: background 0.5s ease-in; transition: background 0.5s ease-in; } .gap {clear:both; width:100%; margin-bottom: 25px;} /*All images RESPONSIVE*/ img { display: block; height: auto; /* makes responsive */ /*max-width: 100%; makes responsive */ border: 0px !important; /* removes default border around images */ -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; border-image-width: 0px !important; } /* =============================== HIDE-SHOW =============================== */ /* Block --- see Player Debut (original Rockette)*/ .show-0, .show-false, .hide-1, .hide-true, li.show-0 {display:none;} .show-1, .show-true, .hide-0, .hide-false, li.show-1 {display:block;} /* Inline --- see Player Debut (original Rockette)*/ .show-inline-0, .show-inline-false, .hide-inline-1, .hide-inline-true {display:none;} .show-inline-1, .show-inline-true, .hide-inline-0, .hide-inline-false {display:inline-block !important;} /*REMOVE DOTTED LINE on LINKS*/ object, embed {outline: 0;} input::-moz-focus-inner {border: 0;} /* =============================== TEXT =============================== */ /*TEXT STYLE*/ .caps, .uppercase {text-transform: uppercase !important;} .capitalize {text-transform: capitalize !important;} .initial, .sentence {text-transform: initial !important;} .lower {text-transform: lowercase !important;} .textNone {text-transform: none !important;} .bold {font-weight: bold !important;} .italic {font-style: italic !important;} .inline {display: inline-block !important;} .block {display: block !important;} .nowrap { display: inline-block !important; white-space: nowrap !important; } .wrap { display: inline-block !important; white-space: normal !important; } /*FONT SIZE*/ .font10 {font-size: 10% !important; line-height: 140%;} .font20 {font-size: 20% !important; line-height: 140%;} .font30 {font-size: 30% !important; line-height: 140%;} .font40 {font-size: 40% !important; line-height: 140%;} .font50 {font-size: 50% !important; line-height: 140%;} .font55 {font-size: 55% !important; line-height: 140%;} .font60 {font-size: 60% !important; line-height: 140%;} .font65 {font-size: 65% !important; line-height: 140%;} .font70 {font-size: 70% !important; line-height: 140%;} .font75 {font-size: 75% !important; line-height: 140%;} .font80 {font-size: 80% !important; line-height: 140%;} .font85 {font-size: 85% !important; line-height: 140%;} .font90 {font-size: 90% !important; line-height: 140%;} .font95 {font-size: 95% !important; line-height: 140%;} .font100 {font-size: 100% !important;} .font105 {font-size: 105% !important;} .font110 {font-size: 110% !important;} .font115 {font-size: 115% !important;} .font120 {font-size: 120% !important;} .font125 {font-size: 125% !important;} .font130 {font-size: 130% !important;} .font135 {font-size: 135% !important;} .font140 {font-size: 140% !important;} .font145 {font-size: 145% !important;} .font150 {font-size: 150% !important;} .font155 {font-size: 155% !important;} .font160 {font-size: 160% !important;} .font165 {font-size: 165% !important;} .font170 {font-size: 170% !important;} .font175 {font-size: 175% !important;} .font180 {font-size: 180% !important;} .font185 {font-size: 185% !important;} .font190 {font-size: 190% !important;} .font195 {font-size: 195% !important;} .font200 {font-size: 200% !important;} .font210 {font-size: 210% !important;} .font220 {font-size: 220% !important;} .font230 {font-size: 230% !important;} .font240 {font-size: 240% !important;} .font250 {font-size: 250% !important;} .font260 {font-size: 260% !important;} .font270 {font-size: 270% !important;} .font280 {font-size: 280% !important;} .font290 {font-size: 290% !important;} .font300 {font-size: 300% !important;} .font310 {font-size: 310% !important;} .font320 {font-size: 320% !important;} .font330 {font-size: 330% !important;} .font340 {font-size: 340% !important;} .font350 {font-size: 350% !important;} .font360 {font-size: 360% !important;} .font370 {font-size: 370% !important;} .font380 {font-size: 380% !important;} .font390 {font-size: 390% !important;} .font400 {font-size: 400% !important;} .font425 {font-size: 425% !important;} .font450 {font-size: 450% !important;} .font475 {font-size: 475% !important;} .font500 {font-size: 500% !important;} .font550 {font-size: 550% !important;} .font600 {font-size: 600% !important;} .line80 {line-height: 80% !Important; } .line90 {line-height: 90% !Important; } .line100 {line-height: 100% !Important; } .line110 {line-height: 110% !Important; } .line120 {line-height: 120% !Important; } .line125 {line-height: 125% !Important; } .line130 {line-height: 130% !Important; } .line140 {line-height: 140% !Important; } .line150 {line-height: 150% !Important; } .line160 {line-height: 160% !Important; } .line170 {line-height: 170% !Important; } .line175 {line-height: 175% !Important; } .line180 {line-height: 180% !Important; } .line190 {line-height: 190% !Important; } .line200 {line-height: 200% !Important; } .space0 {letter-spacing: 0rem !important;} .space1 {letter-spacing: 0.1rem !important;} .space2 {letter-spacing: 0.2rem !important;} .space3 {letter-spacing: 0.3rem !important;} .space4 {letter-spacing: 0.4rem !important;} .space5 {letter-spacing: 0.5rem !important;}7575 .space6 {letter-spacing: 0.6rem !important;} .space7 {letter-spacing: 0.7rem !important;} .space8 {letter-spacing: 0.8rem !important;} .space9 {letter-spacing: 0.9rem !important;} .space10 {letter-spacing: 1.0rem !important;} /* =============================== ALIGNMENT =============================== */ .align {text-align: var(--BrandAlignBody) !important;} .match {text-align: var(--BrandAlign) !important; } .justify {justify-content: var(--justify) !important;} .floatL {float: left;} .floatR {float: right;} .L, .L-C, .L-R, .L-C-hide, .L-R-hide, .L-hide, .alignL {text-align: left;} .C, .C-L, .C-R, .C-L-hide, .C-R-hide, .C-hide, .alignC {text-align: center;} .R, .R-C, .R-L, .R-C-hide, .R-L-hide, .R-hide, .alignR {text-align: right;} .J, .alignJ {text-align: justified;} .brand-align { text-align: var(--BrandAlign); } .brand-align-desc { text-align: var(--BrandAlignDesc); } .brand-align-body { text-align: var(--BrandAlignBody); } .left {text-align: left !important; margin-left: 0;} .center {text-align: center !important; margin: 0 auto;} .right {text-align: right !important; margin-left: auto; margin-right: 0;} .v-auto {vertical-align: auto;} .v-top {vertical-align: top;} .v-mid {vertical-align: middle;} .v-base {vertical-align: baseline !important;} .v-bottom {vertical-align: bottom !important;} .v-texttop {vertical-align: text-top;} .v-textbottom {vertical-align: text-bottom;} .v-sub {vertical-align: sub;} .v-super {vertical-align: super;} .photoL { margin: 0px 12px 12px 0px; float: left; border: 0px solid #CCCCCC; overflow: hidden; } .photoR { margin: 0px 0px 12px 12px; float: right; border: 0px solid #CCCCCC; overflow: hidden; } .photoC { margin: 0px auto 12px auto; border: 0px solid #CCCCCC; overflow: hidden; } /* =============================== DISPLAY =============================== */ .border, .border0, .border00, .border1, .border2, .border3, .border4, .border5, .border-brand, .border-none { position: relative; z-index: 1 !important; border-style: solid; border-width: 1px; border-color: var(--flexwhite2) !important; border-radius: 0px; } .border-brand { border-color: var(--BorderBrandColor) !important; border-width: var(--BorderBrandWidth) !important; border-radius: var(--RadiusBrand) !important; } .border0 {border-color: #000000 !important;} .border00 {border-color: #FFFFFF !important;} .border1 {border-color: var(--color1) !important;} .border2 {border-color: var(--color2) !important;} .border3 {border-color: var(--color3) !important;} .border4 {border-color: var(--color4) !important;} .border5 {border-color: var(--color5) !important;} .border-top {border-width: 1px 0px 0px 0px;} .border-bottom {border-width: 0px 0px 1px 0px;} .border-left {border-width: 0px 0px 0px 1px;} .border-right {border-width: 0px 1px 0px 0px;} .border-size2 {border-width: 2px;} .border-size3 {border-width: 3px;} .border-size4 {border-width: 4px;} .border-size5 {border-width: 5px;} .border-size6 {border-width: 6px;} .border-size7 {border-width: 7px;} .border-size8 {border-width: 8px;} .border-size9 {border-width: 9px;} .border-size10 {border-width: 10px;} .border-sizeThick {border-width: thick;} .border-none { border: 0px solid var(--flexwhite01) !important; } .radius0 { border-radius: 0 !important; /* Rounded Corners 0 = no */ -webkit-border-radius: 0; -moz-border-radius: 0; } .radius2 { border-radius: 2px !important; -webkit-border-radius: 2; -moz-border-radius: 2; } .radius3 { border-radius: 3px !important; -webkit-border-radius: 3; -moz-border-radius: 3; } .radius4 { border-radius: 4px !important; -webkit-border-radius: 4; -moz-border-radius: 4; } .radius5 { border-radius: 5px !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .radius10 { border-radius: 10px !important; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .radius15 { border-radius: 15px !important; -webkit-border-radius: 15px; -moz-border-radius: 15px; } .radius20 { border-radius: 20px !important; -webkit-border-radius: 20px; -moz-border-radius: 20px; } .radius25 { border-radius: 25px !important; -webkit-border-radius: 25px; -moz-border-radius: 25px; } .radius30 { border-radius: 30px !important; -webkit-border-radius: 30px; -moz-border-radius: 30px; } .radius35 { border-radius: 35px !important; -webkit-border-radius: 35px; -moz-border-radius: 35px; } .radius40 { border-radius: 40px !important; -webkit-border-radius: 40px; -moz-border-radius: 40px; } .radius45 { border-radius: 45px !important; -webkit-border-radius: 45px; -moz-border-radius: 45px; } .radius50 { border-radius: 50% !important; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .radius-brand { border-top-left-radius: var(--RadiusBrand); border-top-right-radius: var(--RadiusBrand); border-bottom-right-radius: var(--RadiusBrand); border-bottom-left-radius: var(--RadiusBrand); } .opacity10 { opacity: 0.1; filter: alpha(opacity=10); } .opacity20 { opacity: 0.2; filter: alpha(opacity=20); } .opacity30 { opacity: 0.3; filter: alpha(opacity=30); } .opacity40 { opacity: 0.4; filter: alpha(opacity=40); } .opacity50 { opacity: 0.5; filter: alpha(opacity=50); } .opacity60 { opacity: 0.6; filter: alpha(opacity=60); } .opacity70 { opacity: 0.7; filter: alpha(opacity=70); } .opacity80 { opacity: 0.8; filter: alpha(opacity=80); } .opacity90 { opacity: 0.9; filter: alpha(opacity=90); } /*=============================================== * Shadow * ===============================================*/ .shadow { -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.35); -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.35); box-shadow: 3px 3px 5px rgba(0,0,0,0.35); border: solid 1px #4800A0; } /*=============================================== * Fade Effects * ===============================================*/ /*ANIMATION*/ .fadein { animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ -o-animation: fadein 2s; /* Opera */ } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } /*=============================================== * Sizing * ===============================================*/ .w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%;} .width10 { width: 10px !important;} .width20 { width: 20px !important;} .width30 { width: 30px !important;} .width40 { width: 40px !important;} .width50 { width: 50px !important;} .width60 { width: 60px !important;} .width70 { width: 70px !important;} .width80 { width: 80px !important;} .width90 { width: 90px !important;} .width100 { width: 100px !important;} .width101 { width: 101px !important;} .width105 { width: 105px !important;} .width110 { width: 110px !important;} .width120 { width: 120px !important;} .width130 { width: 130px !important;} .width140 { width: 140px !important;} .width150 { width: 150px !important;} .width160 { width: 160px !important;} .width170 { width: 170px !important;} .width180 { width: 180px !important;} .width190 { width: 190px !important;} .width200 { width: 200px !important;} .width210 { width: 210px !important;} .width220 { width: 220px !important;} .width230 { width: 230px !important;} .width240 { width: 240px !important;} .width250 { width: 250px !important;} .width260 { width: 260px !important;} .width270 { width: 270px !important;} .width280 { width: 280px !important;} .width290 { width: 290px !important;} .width300 { width: 300px !important;} .width310 { width: 310px !important;} .width320 { width: 320px !important;} .width330 { width: 330px !important;} .width340 { width: 340px !important;} .width350 { width: 350px !important;} .width360 { width: 360px !important;} .width370 { width: 370px !important;} .width380 { width: 380px !important;} .width390 { width: 390px !important;} .width400 { width: 400px !important;} .width410 { width: 410px !important;} .width420 { width: 420px !important;} .width430 { width: 430px !important;} .width440 { width: 440px !important;} .width450 { width: 450px !important;} .width460 { width: 460px !important;} .width470 { width: 470px !important;} .width480 { width: 480px !important;} .width490 { width: 490px !important;} .width500 { width: 500px !important;} .width510 { width: 510px !important;} .width520 { width: 520px !important;} .width530 { width: 530px !important;} .width540 { width: 540px !important;} .width550 { width: 550px !important;} .width560 { width: 560px !important;} .width570 { width: 570px !important;} .width580 { width: 580px !important;} .width590 { width: 590px !important;} .width600 { width: 600px !important;} .min-w-10 { min-width: 10%; } .min-w-20 { min-width: 20%; } .min-w-30 { min-width: 30%; } .min-w-40 { min-width: 40%; } .min-w-50 { min-width: 50%; } .min-w-60 { min-width: 60%; } .min-w-70 { min-width: 70%; } .min-w-80 { min-width: 80%; } .min-w-90 { min-width: 90%; } .min-w-100 { min-width: 100%;} .min-width10 { min-width: 10px !important;} .min-width20 { min-width: 20px !important;} .min-width30 { min-width: 30px !important;} .min-width40 { min-width: 40px !important;} .min-width50 { min-width: 50px !important;} .min-width60 { min-width: 60px !important;} .min-width70 { min-width: 70px !important;} .min-width80 { min-width: 80px !important;} .min-width90 { min-width: 90px !important;} .min-width100 { min-width: 100px !important;} .min-width110 { min-width: 110px !important;} .min-width120 { min-width: 120px !important;} .min-width130 { min-width: 130px !important;} .min-width140 { min-width: 140px !important;} .min-width150 { min-width: 150px !important;} .min-width160 { min-width: 160px !important;} .min-width170 { min-width: 170px !important;} .min-width180 { min-width: 180px !important;} .min-width190 { min-width: 190px !important;} .min-width200 { min-width: 200px !important;} .min-width210 { min-width: 210px !important;} .min-width220 { min-width: 220px !important;} .min-width230 { min-width: 230px !important;} .min-width240 { min-width: 240px !important;} .min-width250 { min-width: 250px !important;} .min-width260 { min-width: 260px !important;} .min-width270 { min-width: 270px !important;} .min-width280 { min-width: 280px !important;} .min-width290 { min-width: 290px !important;} .min-width300 { min-width: 300px !important;} .min-width310 { min-width: 310px !important;} .min-width320 { min-width: 320px !important;} .min-width330 { min-width: 330px !important;} .min-width340 { min-width: 340px !important;} .min-width350 { min-width: 350px !important;} .min-width360 { min-width: 360px !important;} .min-width370 { min-width: 370px !important;} .min-width380 { min-width: 380px !important;} .min-width390 { min-width: 390px !important;} .min-width400 { min-width: 400px !important;} .min-width410 { min-width: 410px !important;} .min-width420 { min-width: 420px !important;} .min-width430 { min-width: 430px !important;} .min-width440 { min-width: 440px !important;} .min-width450 { min-width: 450px !important;} .min-width460 { min-width: 460px !important;} .min-width470 { min-width: 470px !important;} .min-width480 { min-width: 480px !important;} .min-width490 { min-width: 490px !important;} .min-width500 { min-width: 500px !important;} .min-width510 { min-width: 510px !important;} .min-width520 { min-width: 520px !important;} .min-width530 { min-width: 530px !important;} .min-width540 { min-width: 540px !important;} .min-width550 { min-width: 550px !important;} .min-width560 { min-width: 560px !important;} .min-width570 { min-width: 570px !important;} .min-width580 { min-width: 580px !important;} .min-width590 { min-width: 590px !important;} .min-width600 { min-width: 600px !important;} .mw-10 { max-width: 10% !important;} .mw-20 { max-width: 20% !important;} .mw-30 { max-width: 30% !important;} .mw-40 { max-width: 40% !important;} .mw-50 { max-width: 50% !important;} .mw-60 { max-width: 60% !important;} .mw-70 { max-width: 70% !important;} .mw-80 { max-width: 80% !important;} .mw-90 { max-width: 90% !important;} .mw-100 { max-width: 100% !important;} @media (min-width: 576px) /* navbar-expand-sm */ { .mw-sm-10 { max-width: 10% !important;} .mw-sm-20 { max-width: 20% !important;} .mw-sm-30 { max-width: 30% !important;} .mw-sm-40 { max-width: 40% !important;} .mw-sm-50 { max-width: 50% !important;} .mw-sm-60 { max-width: 60% !important;} .mw-sm-70 { max-width: 70% !important;} .mw-sm-80 { max-width: 80% !important;} .mw-sm-90 { max-width: 90% !important;} .mw-sm-100 { max-width: 100% !important;} } @media (min-width: 768px) /* navbar-expand-md */ { .mw-md-10 { max-width: 10% !important;} .mw-md-20 { max-width: 20% !important;} .mw-md-30 { max-width: 30% !important;} .mw-md-40 { max-width: 40% !important;} .mw-md-50 { max-width: 50% !important;} .mw-md-60 { max-width: 60% !important;} .mw-md-70 { max-width: 70% !important;} .mw-md-80 { max-width: 80% !important;} .mw-md-90 { max-width: 90% !important;} .mw-md-100 { max-width: 100% !important;} } @media (min-width: 992px) /* navbar-expand-lg */ { .mw-lg-10 { max-width: 10% !important;} .mw-lg-20 { max-width: 20% !important;} .mw-lg-30 { max-width: 30% !important;} .mw-lg-40 { max-width: 40% !important;} .mw-lg-50 { max-width: 50% !important;} .mw-lg-60 { max-width: 60% !important;} .mw-lg-70 { max-width: 70% !important;} .mw-lg-80 { max-width: 80% !important;} .mw-lg-90 { max-width: 90% !important;} .mw-lg-100 { max-width: 100% !important;} } @media (min-width: 1200px) /* navbar-expand-xl */ { .mw-xl-10 { max-width: 10% !important;} .mw-xl-20 { max-width: 20% !important;} .mw-xl-30 { max-width: 30% !important;} .mw-xl-40 { max-width: 40% !important;} .mw-xl-50 { max-width: 50% !important;} .mw-xl-60 { max-width: 60% !important;} .mw-xl-70 { max-width: 70% !important;} .mw-xl-80 { max-width: 80% !important;} .mw-xl-90 { max-width: 90% !important;} .mw-xl-100 { max-width: 100% !important;} } .max-width10 { max-width: 10px !important;} .max-width20 { max-width: 20px !important;} .max-width30 { max-width: 30px !important;} .max-width40 { max-width: 40px !important;} .max-width50 { max-width: 50px !important;} .max-width60 { max-width: 60px !important;} .max-width70 { max-width: 70px !important;} .max-width80 { max-width: 80px !important;} .max-width90 { max-width: 90px !important;} .max-width100 { max-width: 100px !important;} .max-width110 { max-width: 110px !important;} .max-width120 { max-width: 120px !important;} .max-width130 { max-width: 130px !important;} .max-width140 { max-width: 140px !important;} .max-width150 { max-width: 150px !important;} .max-width160 { max-width: 160px !important;} .max-width170 { max-width: 170px !important;} .max-width180 { max-width: 180px !important;} .max-width190 { max-width: 190px !important;} .max-width200 { max-width: 200px !important;} .max-width210 { max-width: 210px !important;} .max-width220 { max-width: 220px !important;} .max-width230 { max-width: 230px !important;} .max-width240 { max-width: 240px !important;} .max-width250 { max-width: 250px !important;} .max-width260 { max-width: 260px !important;} .max-width270 { max-width: 270px !important;} .max-width280 { max-width: 280px !important;} .max-width290 { max-width: 290px !important;} .max-width300 { max-width: 300px !important;} .max-width310 { max-width: 310px !important;} .max-width320 { max-width: 320px !important;} .max-width330 { max-width: 330px !important;} .max-width340 { max-width: 340px !important;} .max-width350 { max-width: 350px !important;} .max-width360 { max-width: 360px !important;} .max-width370 { max-width: 370px !important;} .max-width380 { max-width: 380px !important;} .max-width390 { max-width: 390px !important;} .max-width400 { max-width: 400px !important;} .max-width410 { max-width: 410px !important;} .max-width420 { max-width: 420px !important;} .max-width430 { max-width: 430px !important;} .max-width440 { max-width: 440px !important;} .max-width450 { max-width: 450px !important;} .max-width460 { max-width: 460px !important;} .max-width470 { max-width: 470px !important;} .max-width480 { max-width: 480px !important;} .max-width490 { max-width: 490px !important;} .max-width500 { max-width: 500px !important;} .max-width510 { max-width: 510px !important;} .max-width520 { max-width: 520px !important;} .max-width530 { max-width: 530px !important;} .max-width540 { max-width: 540px !important;} .max-width550 { max-width: 550px !important;} .max-width560 { max-width: 560px !important;} .max-width570 { max-width: 570px !important;} .max-width580 { max-width: 580px !important;} .max-width590 { max-width: 590px !important;} .max-width600 { max-width: 600px !important;} .h-10 {height: 10%; } .h-20 {height: 20%; } .h-25 {height: 25%; } .h-30 {height: 30%; } .h-40 {height: 40%; } .h-50 {height: 50%; } .h-60 {height: 60%; } .h-70 {height: 70%; } .h-75 {height: 75%; } .h-80 {height: 80%; } .h-85 {height: 85%; } .h-90 {height: 90%; } .h-95 {height: 95%; } .h-100 {height: 100%; } .height10 { height: 10px !important;} .height15 { height: 15px !important;} .height20 { height: 20px !important;} .height25 { height: 25px !important;} .height30 { height: 30px !important;} .height35 { height: 35px !important;} .height40 { height: 40px !important;} .height45 { height: 45px !important;} .height50 { height: 50px !important;} .height60 { height: 60px !important;} .height70 { height: 70px !important;} .height75 { height: 75px !important;} .height80 { height: 80px !important;} .height90 { height: 90px !important;} .height100 { height: 100px !important;} .height110 { height: 110px !important;} .height120 { height: 120px !important;} .height125 { height: 125px !important;} .height130 { height: 130px !important;} .height140 { height: 140px !important;} .height150 { height: 150px !important;} .height160 { height: 160px !important;} .height170 { height: 170px !important;} .height175 { height: 175px !important;} .height180 { height: 180px !important;} .height190 { height: 190px !important;} .height200 { height: 200px !important;} .height210 { height: 210px !important;} .height220 { height: 220px !important;} .height225 { height: 225px !important;} .height230 { height: 230px !important;} .height240 { height: 240px !important;} .height250 { height: 250px !important;} .height260 { height: 260px !important;} .height270 { height: 270px !important;} .height275 { height: 275px !important;} .height280 { height: 280px !important;} .height290 { height: 290px !important;} .height300 { height: 300px !important;} .height310 { height: 310px !important;} .height320 { height: 320px !important;} .height325 { height: 325px !important;} .height330 { height: 330px !important;} .height340 { height: 340px !important;} .height350 { height: 350px !important;} .height360 { height: 360px !important;} .height370 { height: 370px !important;} .height375 { height: 375px !important;} .height380 { height: 380px !important;} .height390 { height: 390px !important;} .height400 { height: 400px !important;} .height410 { height: 410px !important;} .height420 { height: 420px !important;} .height425 { height: 425px !important;} .height430 { height: 430px !important;} .height440 { height: 440px !important;} .height450 { height: 450px !important;} .height460 { height: 460px !important;} .height470 { height: 470px !important;} .height475 { height: 475px !important;} .height480 { height: 480px !important;} .height490 { height: 490px !important;} .height500 { height: 500px !important;} .height510 { height: 510px !important;} .height520 { height: 520px !important;} .height525 { height: 525px !important;} .height530 { height: 530px !important;} .height540 { height: 540px !important;} .height550 { height: 550px !important;} .height560 { height: 560px !important;} .height570 { height: 570px !important;} .height575 { height: 575px !important;} .height580 { height: 580px !important;} .height590 { height: 590px !important;} .height600 { height: 600px !important;} .min-h-10 {min-height: 10%; } .min-h-20 {min-height: 20%; } .min-h-30 {min-height: 30%; } .min-h-40 {min-height: 40%; } .min-h-50 {min-height: 50%; } .min-h-60 {min-height: 60%; } .min-h-70 {min-height: 70%; } .min-h-80 {min-height: 80%; } .min-h-90 {min-height: 90%; } .min-h-100 {min-height: 100%; } .min-height10 { min-height: 10px !important;} .min-height20 { min-height: 20px !important;} .min-height25 { min-height: 25px !important;} .min-height30 { min-height: 30px !important;} .min-height40 { min-height: 40px !important;} .min-height50 { min-height: 50px !important;} .min-height60 { min-height: 60px !important;} .min-height70 { min-height: 70px !important;} .min-height75 { min-height: 75px !important;} .min-height80 { min-height: 80px !important;} .min-height90 { min-height: 90px !important;} .min-height100 { min-height: 100px !important;} .min-height101 { min-height: 101px !important;} .min-height110 { min-height: 110px !important;} .min-height120 { min-height: 120px !important;} .min-height130 { min-height: 130px !important;} .min-height140 { min-height: 140px !important;} .min-height150 { min-height: 150px !important;} .min-height160 { min-height: 160px !important;} .min-height170 { min-height: 170px !important;} .min-height180 { min-height: 180px !important;} .min-height190 { min-height: 190px !important;} .min-height200 { min-height: 200px !important;} .min-height210 { min-height: 210px !important;} .min-height220 { min-height: 220px !important;} .min-height225 { min-height: 225px !important;} .min-height230 { min-height: 230px !important;} .min-height240 { min-height: 240px !important;} .min-height250 { min-height: 250px !important;} .min-height260 { min-height: 260px !important;} .min-height270 { min-height: 270px !important;} .min-height275 { min-height: 275px !important;} .min-height280 { min-height: 280px !important;} .min-height290 { min-height: 290px !important;} .min-height300 { min-height: 300px !important;} .min-height310 { min-height: 310px !important;} .min-height320 { min-height: 320px !important;} .min-height325 { min-height: 325px !important;} .min-height330 { min-height: 330px !important;} .min-height340 { min-height: 340px !important;} .min-height350 { min-height: 350px !important;} .min-height360 { min-height: 360px !important;} .min-height370 { min-height: 370px !important;} .min-height375 { min-height: 375px !important;} .min-height380 { min-height: 380px !important;} .min-height390 { min-height: 390px !important;} .min-height400 { min-height: 400px !important;} .min-height410 { min-height: 410px !important;} .min-height420 { min-height: 420px !important;} .min-height425 { min-height: 425px !important;} .min-height430 { min-height: 430px !important;} .min-height440 { min-height: 440px !important;} .min-height450 { min-height: 450px !important;} .min-height460 { min-height: 460px !important;} .min-height470 { min-height: 470px !important;} .min-height475 { min-height: 475px !important;} .min-height480 { min-height: 480px !important;} .min-height490 { min-height: 490px !important;} .min-height500 { min-height: 500px !important;} .min-height510 { min-height: 510px !important;} .min-height520 { min-height: 520px !important;} .min-height525 { min-height: 525px !important;} .min-height530 { min-height: 530px !important;} .min-height540 { min-height: 540px !important;} .min-height550 { min-height: 550px !important;} .min-height560 { min-height: 560px !important;} .min-height570 { min-height: 570px !important;} .min-height575 { min-height: 575px !important;} .min-height580 { min-height: 580px !important;} .min-height590 { min-height: 590px !important;} .min-height600 { min-height: 600px !important;} .mh-10 { max-height: 10%; } .mh-20 { max-height: 20%; } .mh-30 { max-height: 30%; } .mh-40 { max-height: 40%; } .mh-50 { max-height: 50%; } .mh-60 { max-height: 60%; } .mh-70 { max-height: 70%; } .mh-80 { max-height: 80%; } .mh-90 { max-height: 90%; } .mh-100 { max-height: 100%; } .max-height10 { max-height: 10px !important;} .max-height20 { max-height: 20px !important;} .max-height25 { max-height: 25px !important;} .max-height30 { max-height: 30px !important;} .max-height40 { max-height: 40px !important;} .max-height50 { max-height: 50px !important;} .max-height60 { max-height: 60px !important;} .max-height70 { max-height: 70px !important;} .max-height75 { max-height: 75px !important;} .max-height80 { max-height: 80px !important;} .max-height90 { max-height: 90px !important;} .max-height100 { max-height: 100px !important;} .max-height100 { max-height: 100px !important;} .max-height110 { max-height: 110px !important;} .max-height120 { max-height: 120px !important;} .max-height130 { max-height: 130px !important;} .max-height140 { max-height: 140px !important;} .max-height150 { max-height: 150px !important;} .max-height160 { max-height: 160px !important;} .max-height170 { max-height: 170px !important;} .max-height180 { max-height: 180px !important;} .max-height190 { max-height: 190px !important;} .max-height200 { max-height: 200px !important;} .max-height210 { max-height: 210px !important;} .max-height220 { max-height: 220px !important;} .max-height225 { max-height: 225px !important;} .max-height230 { max-height: 230px !important;} .max-height240 { max-height: 240px !important;} .max-height250 { max-height: 250px !important;} .max-height260 { max-height: 260px !important;} .max-height270 { max-height: 270px !important;} .max-height275 { max-height: 275px !important;} .max-height280 { max-height: 280px !important;} .max-height290 { max-height: 290px !important;} .max-height300 { max-height: 300px !important;} .max-height310 { max-height: 310px !important;} .max-height320 { max-height: 320px !important;} .max-height325 { max-height: 325px !important;} .max-height330 { max-height: 330px !important;} .max-height340 { max-height: 340px !important;} .max-height350 { max-height: 350px !important;} .max-height360 { max-height: 360px !important;} .max-height370 { max-height: 370px !important;} .max-height375 { max-height: 375px !important;} .max-height380 { max-height: 380px !important;} .max-height390 { max-height: 390px !important;} .max-height400 { max-height: 400px !important;} .max-height410 { max-height: 410px !important;} .max-height420 { max-height: 420px !important;} .max-height425 { max-height: 425px !important;} .max-height430 { max-height: 430px !important;} .max-height440 { max-height: 440px !important;} .max-height450 { max-height: 450px !important;} .max-height460 { max-height: 460px !important;} .max-height470 { max-height: 470px !important;} .max-height475 { max-height: 475px !important;} .max-height480 { max-height: 480px !important;} .max-height490 { max-height: 490px !important;} .max-height500 { max-height: 500px !important;} .max-height510 { max-height: 510px !important;} .max-height520 { max-height: 520px !important;} .max-height525 { max-height: 525px !important;} .max-height530 { max-height: 530px !important;} .max-height540 { max-height: 540px !important;} .max-height550 { max-height: 550px !important;} .max-height560 { max-height: 560px !important;} .max-height570 { max-height: 570px !important;} .max-height575 { max-height: 575px !important;} .max-height580 { max-height: 580px !important;} .max-height590 { max-height: 590px !important;} .max-height600 { max-height: 600px !important;} /*=============================================== * Spacing * ===============================================*/ .bottom0 { margin-bottom: 0px !important; } .bottom1 { margin-bottom: 1px !Important; } .bottom2 { margin-bottom: 2px !Important; } .bottom3 { margin-bottom: 3px !Important; } .bottom4 { margin-bottom: 4px !Important; } .bottom5 { margin-bottom: 5px !Important; } .bottom6 { margin-bottom: 6px !Important; } .bottom7 { margin-bottom: 7px !Important; } .bottom8 { margin-bottom: 8px !Important; } .bottom9 { margin-bottom: 9px !Important; } .bottom10 { margin-bottom: 10px !Important; } .bottom11 { margin-bottom: 11px !Important; } .bottom12 { margin-bottom: 12px !Important; } .bottom13 { margin-bottom: 13px !Important; } .bottom14 { margin-bottom: 14px !Important; } .bottom15 { margin-bottom: 15px; } .bottom20 { margin-bottom: 20px; } .bottom25 { margin-bottom: 25px; } .bottom30 { margin-bottom: 30px; } .bottom35 { margin-bottom: 35px; } .bottom40 { margin-bottom: 40px; } .bottom45 { margin-bottom: 45px; } .bottom50 { margin-bottom: 50px; } .bottom60 { margin-bottom: 60px; } .bottom70 { margin-bottom: 70px; } .bottom75 { margin-bottom: 75px; } .bottom80 { margin-bottom: 80px; } .bottom90 { margin-bottom: 90px; } .bottom100 { margin-bottom: 100px; } .bottom150 { margin-bottom: 150px; } .bottom200 { margin-bottom: 200px; } .bottom-1 { margin-bottom: -1px !Important; } .bottom-2 { margin-bottom: -2px !Important; } .bottom-3 { margin-bottom: -3px !Important; } .bottom-4 { margin-bottom: -4px !Important; } .bottom-5 { margin-bottom: -5px !Important; } .bottom-6 { margin-bottom: -6px !Important; } .bottom-7 { margin-bottom: -7px !Important; } .bottom-8 { margin-bottom: -8px !Important; } .bottom-9 { margin-bottom: -9px !Important; } .bottom-10 { margin-bottom: -10px !Important; } .bottom-15 { margin-bottom: -15px !Important; } .bottom-20 { margin-bottom: -20px !Important; } .bottom-25 { margin-bottom: -25px !Important; } .bottom-30 { margin-bottom: -30px !Important; } .bottom-35 { margin-bottom: -35px !Important; } .bottom-40 { margin-bottom: -40px !Important; } .bottom-45 { margin-bottom: -45px !Important; } .bottom-50 { margin-bottom: -50px !Important; } .bottom-55 { margin-bottom: -55px !Important; } .bottom-60 { margin-bottom: -60px !Important; } .bottom-65 { margin-bottom: -65px !Important; } .bottom-70 { margin-bottom: -70px !Important; } .bottom-75 { margin-bottom: -75px !Important; } .bottom-80 { margin-bottom: -80px !Important; } .bottom-85 { margin-bottom: -85px !Important; } .bottom-90 { margin-bottom: -90px !Important; } .bottom-95 { margin-bottom: -95px !Important; } .bottom-100 { margin-bottom: -100px !Important; } .bottom-125 { margin-bottom: -125px !Important; } .bottom-150 { margin-bottom: -150px !Important; } .bottom-175 { margin-bottom: -175px !Important; } .bottom-200 { margin-bottom: -200px !Important; } .top0 { margin-top: 0px !important; } .top1 { margin-top: 1px !Important; } .top2 { margin-top: 2px !Important; } .top3 { margin-top: 3px !Important; } .top4 { margin-top: 4px !Important; } .top5 { margin-top: 5px !Important; } .top6 { margin-top: 6px !Important; } .top7 { margin-top: 7px !Important; } .top8 { margin-top: 8px !Important; } .top9 { margin-top: 9px !Important; } .top10 { margin-top: 10px !Important; } .top15 { margin-top: 15px; } .top20 { margin-top: 20px; } .top25 { margin-top: 25px; } .top30 { margin-top: 30px; } .top35 { margin-top: 35px; } .top40 { margin-top: 40px; } .top45 { margin-top: 45px; } .top50 { margin-top: 50px; } .top60 { margin-top: 60px; } .top70 { margin-top: 70px; } .top75 { margin-top: 75px; } .top80 { margin-top: 80px; } .top90 { margin-top: 90px; } .top100 { margin-top: 100px; } .top150 { margin-top: 150px; } .top200 { margin-top: 200px; } .top-1 { margin-top: -1px !Important; } .top-2 { margin-top: -2px !Important; } .top-3 { margin-top: -3px !Important; } .top-4 { margin-top: -4px !Important; } .top-5 { margin-top: -5px !Important; } .top-6 { margin-top: -6px !Important; } .top-7 { margin-top: -7px !Important; } .top-8 { margin-top: -8px !Important; } .top-9 { margin-top: -9px !Important; } .top-10 { margin-top: -10px !Important; } .top-15 { margin-top: -15px !Important; } .top-20 { margin-top: -20px !Important; } .top-25 { margin-top: -25px !Important; } .top-30 { margin-top: -30px !Important; } .top-35 { margin-top: -35px !Important; } .top-40 { margin-top: -40px !Important; } .top-45 { margin-top: -45px !Important; } .top-50 { margin-top: -50px !Important; } .top-55 { margin-top: -55px !Important; } .top-60 { margin-top: -60px !Important; } .top-65 { margin-top: -65px !Important; } .top-70 { margin-top: -70px !Important; } .top-75 { margin-top: -75px !Important; } .top-80 { margin-top: -80px !Important; } .top-85 { margin-top: -85px !Important; } .top-90 { margin-top: -90px !Important; } .top-95 { margin-top: -95px !Important; } .top-100 { margin-top: -100px !Important; } .top-110 { margin-top: -110px !Important; } .top-120 { margin-top: -120px !Important; } .top-130 { margin-top: -130px !Important; } .top-140 { margin-top: -140px !Important; } .top-150 { margin-top: -150px !Important; } .top-160 { margin-top: -160px !Important; } .top-170 { margin-top: -170px !Important; } .top-180 { margin-top: -180px !Important; } .top-190 { margin-top: -190px !Important; } .top-200 { margin-top: -200px !Important; } .left0 { margin-left: 0px !Important; } .left1 { margin-left: 1px !Important; } .left2 { margin-left: 2px !Important; } .left3 { margin-left: 3px !Important; } .left4 { margin-left: 4px !Important; } .left5 { margin-left: 5px !Important; } .left10 { margin-left: 10px !Important; } .left15 { margin-left: 15px !Important; } .left20 { margin-left: 20px !Important; } .left25 { margin-left: 25px !Important; } .left30 { margin-left: 30px !Important; } .left35 { margin-left: 35px !Important; } .left40 { margin-left: 40px !Important; } .left45 { margin-left: 45px !Important; } .left50 { margin-left: 50px !Important; } .left-1 { margin-left: -1px !Important; } .left-2 { margin-left: -2px !Important; } .left-3 { margin-left: -3px !Important; } .left-4 { margin-left: -4px !Important; } .left-5 { margin-left: -5px !Important; } .left-6 { margin-left: -6px !Important; } .left-7 { margin-left: -7px !Important; } .left-8 { margin-left: -8px !Important; } .left-9 { margin-left: -9px !Important; } .left-10 { margin-left: -10px !Important; } .left-15 { margin-left: -15px !Important; } .left-20 { margin-left: -20px !Important; } .left-25 { margin-left: -25px !Important; } .left-30 { margin-left: -30px !Important; } .left-35 { margin-left: -35px !Important; } .left-40 { margin-left: -40px !Important; } .left-45 { margin-left: -45px !Important; } .left-50 { margin-left: -50px !Important; } .left-55 { margin-left: -55px !Important; } .left-60 { margin-left: -60px !Important; } .left-65 { margin-left: -65px !Important; } .left-70 { margin-left: -70px !Important; } .left-75 { margin-left: -75px !Important; } .left-80 { margin-left: -80px !Important; } .left-85 { margin-left: -85px !Important; } .left-90 { margin-left: -90px !Important; } .left-95 { margin-left: -95px !Important; } .left-100 { margin-left: -100px !Important; } .right0 { margin-right: 0px !Important; } .right1 { margin-right: 1px !Important; } .right2 { margin-right: 2px !Important; } .right3 { margin-right: 3px !Important; } .right4 { margin-right: 4px !Important; } .right5 { margin-right: 5px !Important; } .right10 { margin-right: 10px !Important; } .right15 { margin-right: 15px !Important; } .right20 { margin-right: 20px !Important; } .right25 { margin-right: 25px !Important; } .right30 { margin-right: 30px !Important; } .right35 { margin-right: 35px !Important; } .right40 { margin-right: 40px !Important; } .right45 { margin-right: 45px !Important; } .right50 { margin-right: 50px !Important; } .right-1 { margin-right: -1px !Important; } .right-2 { margin-right: -2px !Important; } .right-3 { margin-right: -3px !Important; } .right-4 { margin-right: -4px !Important; } .right-5 { margin-right: -5px !Important; } .right-6 { margin-right: -6px !Important; } .right-7 { margin-right: -7px !Important; } .right-8 { margin-right: -8px !Important; } .right-9 { margin-right: -9px !Important; } .right-10 { margin-right: -10px !Important; } .right-15 { margin-right: -15px !Important; } .right-20 { margin-right: -20px !Important; } .right-25 { margin-right: -25px !Important; } .right-30 { margin-right: -30px !Important; } /* MARGIN */ .margin0 { margin: 0px; } .margin5 { margin: 5px; } .margin10 { margin: 10px; } .margin15 { margin: 15px; } .margin20 { margin: 20px; } .margin25 { margin: 25px; } .margin30 { margin: 30px; } .margin35 { margin: 45px; } .margin40 { margin: 40px; } .margin45 { margin: 45px; } .margin50 { margin: 50px; } .margin60 { margin: 60px; } .margin70 { margin: 70px; } .margin80 { margin: 80px; } .margin90 { margin: 90px; } .margin100 { margin: 100px; } .margin-5 { margin: -5px; } .margin-10 { margin: -10px; } .margin-15 { margin: -15px; } .margin-20 { margin: -20px; } /* PADDING */ .pad0 { padding: 0px; } .pad1 { padding: 1px; } .pad2 { padding: 2px; } .pad3 { padding: 3px; } .pad4 { padding: 4px; } .pad5 { padding: 5px; } .pad6 { padding: 6px; } .pad7 { padding: 7px; } .pad8 { padding: 8px; } .pad9 { padding: 9px; } .pad10 { padding: 10px; } .pad15 { padding: 15px; } .pad20 { padding: 20px; } .pad25 { padding: 25px; } .pad30 { padding: 30px; } .pad35 { padding: 45px; } .pad40 { padding: 40px; } .pad45 { padding: 45px; } .pad50 { padding: 50px; } .pad60 { padding: 60px; } .pad70 { padding: 70px; } .pad80 { padding: 80px; } .pad90 { padding: 90px; } .pad100 { padding: 100px; } .pad-1 { padding: -1px; } .pad-2 { padding: -2px; } .pad-3 { padding: -3px; } .pad-4 { padding: -4px; } .pad-5 { padding: -5px; } .pad-6 { padding: -6px; } .pad-7 { padding: -7px; } .pad-8 { padding: -8px; } .pad-9 { padding: -9px; } .pad-10 { padding: -10px; } .pad-15 { padding: -15px; } .pad-20 { padding: -20px; } .top0pad { padding-top: 0px; } .top1pad { padding-top: 1px; } .top2pad { padding-top: 2px; } .top3pad { padding-top: 3px; } .top4pad { padding-top: 4px; } .top5pad { padding-top: 5px; } .top6pad { padding-top: 6px; } .top7pad { padding-top: 7px; } .top8pad { padding-top: 8px; } .top9pad { padding-top: 9px; } .top10pad { padding-top: 10px; } .top15pad { padding-top: 15px; } .top20pad { padding-top: 20px; } .top30pad { padding-top: 30px; } .top40pad { padding-top: 40px; } .top50pad { padding-top: 50px; } .top60pad { padding-top: 60px; } .top70pad { padding-top: 70px; } .top80pad { padding-top: 80px; } .top90pad { padding-top: 90px; } .top100pad { padding-top: 100px; } .top110pad { padding-top: 110px; } .top120pad { padding-top: 120px; } .top130pad { padding-top: 130px; } .top140pad { padding-top: 140px; } .top150pad { padding-top: 150px; } .top200pad { padding-top: 200px; } .top250pad { padding-top: 250px; } .top-10pad { padding-top: -10px; } .top-15pad { padding-top: -15px; } .top-20pad { padding-top: -20px; } .top-30pad { padding-top: -30px; } .top-40pad { padding-top: -40px; } .top-50pad { padding-top: -50px; } .bottom0pad { padding-bottom: 0px; } .bottom1pad { padding-bottom: 1px; } .bottom2pad { padding-bottom: 2px; } .bottom3pad { padding-bottom: 3px; } .bottom4pad { padding-bottom: 4px; } .bottom5pad { padding-bottom: 5px; } .bottom6pad { padding-bottom: 6px; } .bottom7pad { padding-bottom: 7px; } .bottom8pad { padding-bottom: 8px; } .bottom9pad { padding-bottom: 9px; } .bottom10pad { padding-bottom: 10px; } .bottom15pad { padding-bottom: 15px; } .bottom20pad { padding-bottom: 20px; } .bottom30pad { padding-bottom: 30px; } .bottom40pad { padding-bottom: 40px; } .bottom50pad { padding-bottom: 50px; } .bottom60pad { padding-bottom: 60px; } .bottom70pad { padding-bottom: 70px; } .bottom80pad { padding-bottom: 80px; } .bottom90pad { padding-bottom: 90px; } .bottom100pad { padding-bottom: 100px; } .bottom110pad { padding-bottom: 110px; } .bottom120pad { padding-bottom: 120px; } .bottom130pad { padding-bottom: 130px; } .bottom140pad { padding-bottom: 140px; } .bottom150pad { padding-bottom: 150px; } .bottom160pad { padding-bottom: 160px; } .bottom170pad { padding-bottom: 170px; } .bottom180pad { padding-bottom: 180px; } .bottom190pad { padding-bottom: 190px; } .bottom200pad { padding-bottom: 200px; } .left0pad { padding-left: 0px; } .left1pad { padding-left: 1px; } .left2pad { padding-left: 2px; } .left3pad { padding-left: 3px; } .left4pad { padding-left: 4px; } .left5pad { padding-left: 5px; } .left6pad { padding-left: 6px; } .left7pad { padding-left: 7px; } .left8pad { padding-left: 8px; } .left9pad { padding-left: 9px; } .left10pad { padding-left: 10px; } .left15pad { padding-left: 15px; } .left20pad { padding-left: 20px; } .left25pad { padding-left: 25px; } .left30pad { padding-left: 30px; } .left40pad { padding-left: 40px; } .left50pad { padding-left: 50px; } .left60pad { padding-left: 60px; } .left70pad { padding-left: 70px; } .left75pad { padding-left: 75px; } .left80pad { padding-left: 80px; } .left90pad { padding-left: 90px; } .left100pad { padding-left: 100px; } .left-5pad { padding-left: -5px !Important; } .left-10pad { padding-left: -10px !Important; } .left-15pad { padding-left: -15px !Important; } .left-20pad { padding-left: -20px !Important; } .left-25pad { padding-left: -25px !Important; } .left-30pad { padding-left: -30px !Important; } .right0pad { padding-right: 0px; } .right1pad { padding-right: 1px; } .right2pad { padding-right: 2px; } .right3pad { padding-right: 3px; } .right4pad { padding-right: 4px; } .right5pad { padding-right: 5px; } .right6pad { padding-right: 6px; } .right7pad { padding-right: 7px; } .right8pad { padding-right: 8px; } .right9pad { padding-right: 9px; } .right10pad { padding-right: 10px; } .right15pad { padding-right: 15px; } .right20pad { padding-right: 20px; } .right25pad { padding-right: 25px; } .right30pad { padding-right: 30px; } .right40pad { padding-right: 40px; } .right50pad { padding-right: 50px; } .right60pad { padding-right: 60px; } .right70pad { padding-right: 70px; } .right75pad { padding-right: 75px; } .right80pad { padding-right: 80px; } .right90pad { padding-right: 90px; } .right100pad { padding-right: 100px; } .right-5pad { padding-right: -5px !Important; } .right-10pad { padding-right: -10px !Important; } .right-15pad { padding-right: -15px !Important; } .right-20pad { padding-right: -20px !Important; } .right-25pad { padding-right: -25px !Important; } .right-30pad { padding-right: -30px !Important; } /* =============================== TABLE =============================== */ .dt { line-height: 105%; padding-top: 8px; font-size: 85%; } .onLt dt { color: var(--LabelTagColor); color: var(--flexcolor1) !important; } .onDrk dt { color: white !important; } dd { font-size: 140%; } /*TABLE*/ table-wrap { display: block; } table-wrapper { width: 100%; overflow: auto; } .table-responsive { border: 0px; width: 100%; } .table-responsive th { font-family:var(--font1); font-size: 95%; color: var(--flexcolor1); text-transform: uppercase; } table td { vertical-align: text-top; } @-moz-document url-prefix() { fieldset {display: table-cell;}} /* TABLE ALL */ table {border-collapse: collapse;} td {padding: 2px 2px;} /* TABLE INFO */ table.info th { background: #CCCCCC; padding: 10px 5px; text-transform: uppercase; font-size: 90%; font-weight: normal; } table.info td {padding: 2px 2px;} table.info tr:nth-child(even) {background: #EFEFEF;} table.info tr:nth-child(odd) {background: #FAFAFA;} /* =============================== FORMS =============================== */ .required { color: var(--RequiredColor) !important; } label { display: inline-block; font-size: 85%; color: var(--LabelTagColor); font: var(--labelTagfont); transform: var(--tagTextTransform); } *, ::after, ::before {box-sizing: border-box;} user agent stylesheet label {cursor: default;} input[type='text'], input[type='tel'], input[type='url'], input[type='email'], input[type='search'], input[type='password'], input[type='number'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input.datalist, input[type="text"]:not(.browser-default), select.form-select, .form-floating > .form-select, input[type="text"].quicksearch, .dataTables_wrapper .dataTables_filter input { font-size: 1.5rem !important; height: 4.5rem !important; line-height: 4.5rem !important; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; } input[type='text'], input[type='tel'], input[type='url'], input[type='email'], input[type='search'], input[type='password'], input[type='number'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input.datalist, input[type="text"]:not(.browser-default), input[type="text"].quicksearch, .dataTables_wrapper .dataTables_filter input { margin-bottom: 1.25rem; display: block; padding: 13px; color: var(--InputColor); background-color: var(--InputBgColor); border-style: solid; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); padding-left: 10px; } input[type='text'].lg, input[type='text'].xl { font-size: 200% !important; height: 100px !important; line-height: 90px; min-width: 250px; padding: 5px 0px 0px 15px !important; margin: 4px 1px 20px 0px !important; } input[type='text'].xl { font-size: 340% !important; height: 120px !important; line-height: 100px; } label.lg, label.xl { margin: -5px 0 4px 5px !important; padding-top: 0px !important; display: flex !important; align-items: center !important; } /* Form Label (minimized) */ .form-floating>.form-control:focus~label.lg, .form-floating>.form-control:not(:placeholder-shown)~label.lg, .form-floating>.form-select~label.lg, .form-floating label.lg::placeholder, .form-floating>.form-control:focus~label.xl, .form-floating>.form-control:not(:placeholder-shown)~label.xl, .form-floating>.form-select~label.xl, .form-floating label.xl::placeholder { margin: -8px 0 4px 0 !important; } /* ––––––––––––––––––––––––––––––– TEXT AREA ––––––––––––––––––––––––––––––– */ textarea, textarea.form-control { min-height: 260px !important; /* starting height, but allows for resize */ font-size: 1.4rem !important; line-height: 2.1rem !important; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; margin-bottom: 1.25rem; display: block; padding: 13px; resize: vertical !important; color: var(--InputColor); background-color: var(--InputBgColor); border-style: solid; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); padding-left: 10px; } input[type="text"].quicksearch, .dataTables_wrapper .dataTables_filter input { font-size: 1.25rem !important; height: 3.1rem !important; line-height: 3.1rem !important; margin-top: 0rem; background-color: #FAFAFA !important; border-color: var(--flexwhite3); padding: 1px 2px 0px 10px; } .dataTables_wrapper .dataTables_filter { float: left; text-align: left; } input[type="text"].quicksearch:hover, .dataTables_wrapper .dataTables_filter input:hover { background-color: var(--InputBgColorHover) !important; } input[type="text"].quicksearch:focus, .dataTables_wrapper .dataTables_filter input:focus { background-color: #F4F4F4 !important; } input[type="text"].quicksearch:active, .dataTables_wrapper .dataTables_filter input:active { background-color: #FEFEFE !important; } .datepicker-input input[type='date'], .datepicker-input input[type='datetime'], .datepicker-input input[type='datetime-local'] { line-height: 2.45rem !important; margin-bottom: 1.25rem; } input::-webkit-datetime-edit-text { color: var(--flexwhite2) !important } /* input::-webkit-datetime-edit-year-field, input::-webkit-datetime-edit-month-field, input::-webkit-datetime-edit-day-field, input::-webkit-datetime-edit-hour-field, input::-webkit-datetime-edit-minute-field, input::-webkit-datetime-edit-second-field, input::-webkit-datetime-edit-millisecond-field, input::-webkit-datetime-edit-meridiem-field { } .form-group .datepicker-input input[type='datetime-local']::placeholder { color: red !important; background-color: highlight !important; } */ .cartQty input[type='number'] { margin-bottom: 0.25rem; display: block; padding: 0px; } /* Highlight onHover */ input[type='text']:hover, input[type='tel']:hover, input[type='email']:hover, input[type='search']:hover, input[type='password']:hover, input[type='number']:hover, input[type='date']:hover, input[type='datetime']:hover, input[type='datetime-local']:hover, input[type='file']:hover, input.datalist:hover, textarea:hover, select.form-select:hover, .form-control:hover, CartQty:hover, .system_form input[type='text']:hover, .tlc_ecomm input[type='text']:hover, .system_form input[type='tel']:hover, .tlc_ecomm input[type='tel']:hover, .system_form input[type='email']:hover, .tlc_ecomm input[type='email']:hover, .system_form input[type='search']:hover, .tlc_ecomm input[type='search']:hover, .system_form input[type='password']:hover, .tlc_ecomm input[type='password']:hover, .system_form input[type='number']:hover, .tlc_ecomm input[type='number']:hover, .system_form textarea:hover, .tlc_ecomm textarea:hover, .system_form select:hover, .tlc_ecomm select:hover { color: var(--InputColorHover); background-color: var(--InputBgColorHover) !important; border-color: var(--InputBorderColorHover); } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.925rem; } /* Remove Default on Focus */ .form-control:focus, .form-select:focus { background-color: transparent; outline: 0; box-shadow: none; } /* Highlight on Focus */ input[type='text']:focus, input[type='tel']:focus, input[type='email']:focus, input[type='search']:focus, input[type='password']:focus, input[type='number']:focus, input[type='datetime-local']:focus, input.datalist:focus, textarea:focus, select.form-select:focus, .form-select:focus, .form-control:focus, CartQty:focus, .system_form input[type='text']:focus, .tlc_ecomm input[type='text']:focus, .system_form input[type='tel']:focus, .tlc_ecomm input[type='tel']:focus, .system_form input[type='email']:focus, .tlc_ecomm input[type='email']:focus, .system_form input[type='search']:focus, .tlc_ecomm input[type='search']:focus, .system_form input[type='password']:focus, .tlc_ecomm input[type='password']:focus, .system_form input[type='number']:focus, .tlc_ecomm input[type='number']:focus, .system_form textarea:focus, .tlc_ecomm textarea:focus, .system_form select:focus, .tlc_ecomm select:focus { color: var(--InputColorFocus) !important; background-color: var(--InputBgColorFocus) !important; border: 0px solid var(--InputBorderColorFocus) !important; border-width: var(--InputBorderWidth) !important; /* TRANSITION TO*/ -webkit-transition: background-color 200ms ease-in; -ms-transition: background-color 200ms ease-in; -moz-transition: background-color 200ms ease-in; transition: background-color 200ms ease-in; } input::-webkit-date-and-time-value{ text-align:left; } /* ––––––––––––––––––––––––––––––– SELECT ––––––––––––––––––––––––––––––– */ /* SELECT . BS5 Form Floating */ select.form-select, .form-floating > .form-select { line-height: 1.95rem !important; padding-top: 1.325rem !important; padding-bottom: .625rem !important; margin-bottom: 1.25rem; color: var(--InputColor); background-color: var(--InputBgColor); border-style: solid; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); padding-left: 10px; } .form-floating > .form-select.xs { padding-right: 2rem !important; margin-right: 2.5rem !important; } .form-floating > .form-select.sm { padding-right: 3rem !important; margin-right: 3.5rem !important; } .form-floating > .form-select.md { padding-right: 3.5rem !important; margin-right: 4rem !important; } .form-floating > .form-select.lg { padding-right: 4rem !important; margin-right: 4.5rem !important; } .form-floating > .form-select.xl { padding-right: 4.5rem !important; margin-right: 5rem !important; } select:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgb(0,0,0), rgba(70, 90, 126, 0.4)) !important; color: fieldtext !important; } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: .75rem; background-image: none; height: auto !important; min-height: 200px; overflow-y: auto; padding-top: 1.75rem !important; } select[multiple].form-select:hover, select[multiple].form-select:focus { color: black !important; background-color: white !important; } /* ––––––––––––––––––––––––––––––– CHECKBOX ––––––––––––––––––––––––––––––– */ input[type="checkbox"]:not(:checked)+label, .form-check-input[type="checkbox"]:checked+label, label.btn input[type="checkbox"]:not(:checked)+label, label.btn input[type="checkbox"]:checked+label { position: relative; display: block; height: auto; padding-left: 35px; cursor: pointer; -webkit-user-select: radio; -moz-user-select: radio; -ms-user-select: radio; user-select: radio; -webkit-transition: 0.28s ease; transition: 0.28s ease; } input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: relative; pointer-events: auto; opacity: 1; display: inline-block; margin: 10px 10px 10px 0px; padding: 5px 0; } .form-check, .form-check-inline { padding-left: 0.25rem; min-height: 2rem; } .form-group > div, .form-group-inline > div, .form-check > div, .form-check-inline > div { color: var(--InputLabelColor); margin-bottom: 0px; } .form-check > label, .form-check-inline > label { color: var(--RadioLabelColor) !important; margin-bottom: 1rem; padding-right: 10px; } .form-check > label:hover, .form-check-inline > label:hover { background-color: var(--InputBgColorHover) !important; } .form-check > label:focus, .form-check-inline > label:focus, .form-check > label:active, .form-check-inline > label:active { background-color: var(--InputBgColorFocus) !important; } .form-check input[type="checkbox"]:not(:checked), .form-check input[type="checkbox"]:checked, .form-check-inline input[type="checkbox"]:not(:checked), .form-check-inline input[type="checkbox"]:checked { display: none !important; margin: 0px; } .form-check input[type="checkbox"], .form-check-inline input[type="checkbox"] { padding: 1rem 0; } input[type="checkbox"] + input[type="checkbox"], input[type="checkbox"]:checked + input[type="checkbox"]:not(:checked), input[type="checkbox"]:not(:checked) + input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked) + input[type="checkbox"]:not(:checked) { margin: 0px 5px 10px 20px; } input[type="checkbox"]:checked + label { display: block !important; padding-left: 0; padding: 9px 0 0 0; } input[type="checkbox"]:not(:checked) + label { display: block !important; padding-left: 0; padding: 5px 0 0 0 ; } .form-inline input[type="checkbox"]:not(:checked) + label, .form-inline input[type="checkbox"]:checked + label{ padding-top:3px; } .form-check input[type="checkbox"]:checked + label, .form-check input[type="checkbox"]:not(:checked) + label, .form-check-inline input[type="checkbox"]:checked + label, .form-check-inline input[type="checkbox"]:not(:checked) + label { display: block !important; margin: 0px; padding-left: 35px !important; padding: 0px; text-transform: initial !important; } input[type="checkbox"] + script + label, input[type="radio"] + script + label { margin-top: 20px; } /* Checkbox */ .form-check-input[type="checkbox"] + label, label.btn input[type="checkbox"] + label { -webkit-transition: 0.7s ease; transition: 0.7s ease; font-size: 1.25rem; height: auto; padding-left: 0px; padding-right: 20px; margin: 0px 0px !important; padding: 0.4rem 0 !important; padding-left: 0px; } /* Checkbox */ label.btn input[type="checkbox"] + label:before, label.btn input[type="checkbox"]:not(.filled-in) + label:after, .form-check-input[type="checkbox"] + label:before, .form-check-input[type="checkbox"]:not(.filled-in) + label:after, label.btn input[type="checkbox"] + label:before, label.btn input[type="checkbox"]:not(.filled-in) + label:after, .form-check-input[type="checkbox"]:checked + label:before, label.btn input[type="checkbox"]:checked + label:before { top: 1px; left: 0; width: 22px; height: 22px; content: ""; border: 1.5px solid var(--gray5); background-color: transparent; background-color: var(--InputBgColor); border: 1px solid var(--InputLabelColor); border-radius: 1px; -webkit-transition: .7s; transition: .7s; margin: 0.4rem 0px !important; } /* Highlight onHover */ .form-check-input[type='checkbox']:not(:checked):hover + label:before, .form-check-input[type="checkbox"]:not(:checked):hover + label:after { background-color: var(--color1f2) !important; border: 1px solid var(--InputLabelColor); } /* Checkbox Solid Fill Style */ .form-check-input[type="checkbox"]:checked + label:before, label.btn input[type="checkbox"]:checked + label:before { border: 1.5px solid var(--PrimaryButtonHoverColor); background-color: var(--PrimaryButtonColor) !important; -webkit-transform: none; transform: none; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Checkmark Style .form-check-input[type="checkbox"]:checked+label:before, label.btn input[type="checkbox"]:checked+label:before { top: -7px; left: -6px; width: 17px; height: 30px; border-top: 3px solid transparent; border-right: 3px solid var(--color2); border-bottom: 3px solid var(--color2); border-left: 3px solid transparent; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } */ @media (max-width: 768px) /* navbar-expand-md */ { .form-check-input[type="checkbox"] + label, label.btn input[type="checkbox"] + label { padding: 0.6rem 0 !important; } label.btn input[type="checkbox"] + label:before, label.btn input[type="checkbox"]:not(.filled-in) + label:after, .form-check-input[type="checkbox"] + label:before, .form-check-input[type="checkbox"]:not(.filled-in) + label:after, label.btn input[type="checkbox"] + label:before, label.btn input[type="checkbox"]:not(.filled-in) + label:after { margin: 0.6rem 0px !important; } /* Checkblock Solid Fill Style */ .form-check-input[type="checkbox"]:checked + label:before, label.btn input[type="checkbox"]:checked + label:before { margin: 0.6rem 0px !important; } /* Checkmark Style .form-check-input[type="checkbox"]:checked+label:before, label.btn input[type="checkbox"]:checked+label:before { margin: 0.6rem 0px !important; } */ } /* ––––––––––––––––––––––––––––––– RADIO ––––––––––––––––––––––––––––––– */ input[type="radio"] + label { display: block !important; margin: 0px 0px 0px 0px !important; padding: 0.4rem 0 !important; } .form-check-input[type="radio"]:not(:checked) + label:before, .form-check-input[type="radio"]:not(:checked) + label:after, label.btn input[type="radio"]:not(:checked) + label:before, label.btn input[type="radio"]:not(:checked) + label:after { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 50%; border: 1px solid var(--InputLabelColor); box-shadow: none !important; background-color: var(--InputBgColor); } /* Highlight onHover */ .form-check-input[type='radio']:not(:checked):hover + label:before, .form-check-input[type="radio"]:not(:checked):hover + label:after { background-color: var(--color1f1) !important; border: 1px solid var(--InputLabelColor); } .form-check-input[type="radio"]:not(:checked) + label:after, label.btn input[type="radio"]:not(:checked) + label:after { -webkit-transform: scale(1); transform: scale(1); } .form-check-input[type="radio"] + label:before, .form-check-input[type="radio"] + label:after, label.btn input[type="radio"] + label:before, label.btn input[type="radio"] + label:after { width: 24px; height: 24px; margin: 0px; margin: 0.4rem 0px !important; } .form-check-input[type="radio"]:not(:checked) + label, .form-check-input[type="radio"]:checked + label, label.btn input[type="radio"]:not(:checked) + label, label.btn input[type="radio"]:checked + label { -webkit-transition: 0.7s ease; transition: 0.7s ease; font-size: 1.25rem; height: auto; padding-left: 0px; padding-right: 20px; /*margin: 0.4rem 0px !important;*/ text-transform: initial !important; } .form-check-input[type="radio"]:checked + label:after, label.btn input[type="radio"]:checked + label:after { -webkit-transform: scale(1.02); transform: scale(1.02); } .form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:after { border: 1.5px solid var(--LabelTagColor); background-color: var(--PrimaryButtonColor) !important; } .form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:before, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:before, label.btn input[type="radio"].with-gap:checked + label:after { border: 1.5px solid var(--PrimaryButtonHoverColor); background-color: var(--PrimaryButtonColor) !important; } @media (max-width: 768px) /* navbar-expand-md */ { input[type="radio"] + label { padding: 0.6rem 0 !important; } .form-check-input[type="radio"]:not(:checked) + label:before, .form-check-input[type="radio"]:not(:checked) + label:after, label.btn input[type="radio"]:not(:checked) + label:before, label.btn input[type="radio"]:not(:checked) + label:after { margin: 0.6rem 0px !important; } .form-check-input[type="radio"] + label:before, .form-check-input[type="radio"] + label:after, label.btn input[type="radio"] + label:before, label.btn input[type="radio"] + label:after { margin: 0.6rem 0px !important; } } input[type="radio"] + input[type="radio"] { margin: 0px; } input[type="radio"]:not(:checked)+label, .form-check-input[type="radio"]:checked+label, label.btn input[type="radio"]:not(:checked)+label, label.btn input[type="radio"]:checked+label { position: relative; display: inline-block; padding-left: 35px; cursor: pointer; -webkit-user-select: radio; -moz-user-select: radio; -ms-user-select: radio; user-select: radio; -webkit-transition: 0.28s ease; transition: 0.28s ease; } input[type="radio"]:not(:checked), input[type="radio"]:checked { position: relative; pointer-events: auto; opacity: 1; display: inline-block; margin: 0px 0px 0px 0px !important; padding: 0.4rem 0 !important; } .form-check input[type="radio"]:not(:checked), .form-check input[type="radio"]:checked { display: none; margin: 0px; position: absolute; pointer-events: auto; opacity: 0; } input[type="radio"]:checked + label { display: block !important; margin: 0px 0px 0px 0px !important; padding-left: 0 !important; padding: 0px 0 0 0; } input[type="radio"]:not(:checked) + label { display: block !important; margin: 0px 0px 0px 0px !important; padding-left: 0 !important; padding: 0px 0 0 0; } .form-check input[type="radio"]:checked + label, .form-check input[type="radio"]:not(:checked) + label { display: block !important; margin: 0px; padding-left: 35px !important; padding: 0px ; } input[type="radio"] { display: inline; visibility: visible; opacity: 0; } .select-wrapper span.caret { top: 1.5rem; right: 1.25rem; font-size: 0.85rem; color: var(--color1); z-index: 3; cursor: pointer; pointer-events: none; } .md-form label { margin-top: -1rem; } .md-form { margin-top: 0rem; margin-bottom: 0rem; } .form-group.checkbox, .form-group.radio, .form-group.select { margin-bottom: 1.5rem; } .form-group.select { margin-bottom: 0px; } .dropdown-content li>a, .dropdown-content li>span { font-size: 1.15rem; color: var(--color3); min-height: 50px; padding: 15px 5px 15px 15px; } .select-wrapper.md-form > ul li label { top: 0; font-size: .9rem; color: var(--color3xl); -webkit-transform: none; transform: none; } /* ––––––––––––––––––––––––––––––– FORM . PORTAL ––––––––––––––––––––––––––––––– #form.portal input[type='text'], #form.portal input[type='tel'], #form.portal input[type='url'], #form.portal input[type='email'], #form.portal input[type='search'], #form.portal input[type='password'], #form.portal input[type='number'], #form.portal input[type='date'], #form.portal input[type='datetime'], #form.portal input[type='datetime-local'], #form.portal input.datalist, #form.portal input[type="text"]:not(.browser-default), .form-control.default input[type='text'], .form-control.default input[type='tel'], .form-control.default input[type='url'], .form-control.default input[type='email'], .form-control.default input[type='search'], .form-control.default input[type='password'], .form-control.default input[type='number'], .form-control.default input[type='date'], .form-control.default input[type='datetime'], .form-control.default input[type='datetime-local'], .form-control.default input.datalist, .form-control.default input[type="text"]:not(.browser-default){ color: var(--InputColor); background-color: rgba(0,121,193,0.07); border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); } #form.portal textarea, #form.portal textarea.form-control, .form-control.default textarea, textarea.form-control.default { color: var(--InputColor); background-color: white; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); } */ /* Highlight on Focus #form.portal input[type='text']:focus, #form.portal input[type='tel']:focus, #form.portal input[type='email']:focus, #form.portal input[type='search']:focus, #form.portal input[type='password']:focus, #form.portal input[type='number']:focus, #form.portal input[type='datetime-local']:focus, #form.portal input.datalist:focus, #form.portal textarea:focus, #form.portal select.form-select:focus, #form.portal .form-select:focus, #form.portal .form-control:focus, .form-control.default input[type='text']:focus, .form-control.default input[type='tel']:focus, .form-control.default input[type='email']:focus, .form-control.default input[type='search']:focus, .form-control.default input[type='password']:focus, .form-control.default input[type='number']:focus, .form-control.default input[type='datetime-local']:focus, .form-control.default input.datalist:focus, textarea.form-control.default:focus, .form-control.default select.form-select:focus, .form-control.default .form-select:focus, .form-control.default .form-control:focus{ color: var(--InputColorFocus) !important; background-color: var(--white8) !important; border-bottom: 1px solid var(--InputBorderColorFocus) !important; } */ /* Highlight on Hover #form.portal input[type='text']:hover, #form.portal input[type='tel']:hover, #form.portal input[type='email']:hover, #form.portal input[type='search']:hover, #form.portal input[type='password']:hover, #form.portal input[type='number']:hover, #form.portal input[type='datetime-local']:hover, #form.portal input.datalist:hover, #form.portal textarea:hover, #form.portal select.form-select:hover, #form.portal .form-select:hover, #form.portal .form-control:hover, .form-control.default input[type='text']:hover, .form-control.default input[type='tel']:hover, .form-control.default input[type='email']:hover, .form-control.default input[type='search']:hover, .form-control.default input[type='password']:hover, .form-control.default input[type='number']:hover, .form-control.default input[type='datetime-local']:hover, .form-control.default input.datalist:hover, textarea.form-control.default:hover, .form-control.default select.form-select:hover, .form-control.default .form-select:hover, .form-control.default .form-control:hover{ color: var(--InputColorHover) !important; background-color: var(--white8) !important; border-bottom: 1px solid var(--InputBorderColorHover) !important; } #form.portal select.form-select, #form.portal .form-floating > .form-select, select.form-select.default, .form-control.default .form-floating > .form-select { color: var(--InputColor); background-color: white; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); } #form.portal input[type="checkbox"]:not(:checked), .form-control.default input[type="checkbox"]:not(:checked) { color: var(--InputColor); background-color: white; border-width: var(--InputBorderWidth); border-color: var(--InputBorderColor); border-radius: var(--InputBorderRadius); } #form.portal .form-check-input[type="radio"]:not(:checked) + label:before, #form.portal .form-check-input[type="radio"]:not(:checked) + label:after, #form.portal label.btn input[type="radio"]:not(:checked) + label:before, #form.portal label.btn input[type="radio"]:not(:checked) + label:after, .form-control.default .form-check-input[type="radio"]:not(:checked) + label:before, .form-control.default .form-check-input[type="radio"]:not(:checked) + label:after, .form-control.default label.btn input[type="radio"]:not(:checked) + label:before, .form-control.default label.btn input[type="radio"]:not(:checked) + label:after { border: 1px solid var(--InputLabelColor); background-color: white !important; } */ /* ––––––––––––––––––––––––––––––– PASSWORD ––––––––––––––––––––––––––––––– */ .form-group.position-relative input { padding-right: 32px; } .form-password-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: 0px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; height: 70px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; right: 70px; width: 0; z-index: 10; /* background-color: red !important; */ padding: 10px 24px; margin: 0px -6%; font-size: 125%; color: var(--PasswordIconColor); } .form-password-icon:hover{ color: var(--PasswordIconColorHover); } .form-text~.form-password-icon { bottom: calc(1rem + 18px); } .form-password-icon .material-icons { font-size: 16px; font-weight: 500; } .input-group-append, .input-group-prepend { display: flex; position: absolute; right: 0; top: 0; height: calc(4rem + 6px); z-index: 10000; } .bootstrap-datetimepicker-widget.dropdown-menu { background-color: #FAFAFA !important; border-color: #2b3135; width: 100%; } .bootstrap-datetimepicker-widget.dropdown-menu:after, .bootstrap-datetimepicker-widget.dropdown-menu:before { display: none !important; } .bootstrap-datetimepicker-widget.dropdown-menu .arrow { display: none !important; } .bootstrap-datetimepicker-widget.dropdown-menu .arrow:after, .bootstrap-datetimepicker-widget.dropdown-menu .arrow:before { display: none !important; } .bootstrap-datetimepicker-widget.dropdown-menu a span:hover, .bootstrap-datetimepicker-widget.dropdown-menu a span:focus { background-color: gold !important; color: #fff !important; } .input-group-text { font-size: 1.25rem; line-height: 1.5; color: white; white-space: nowrap; background-color: var(--color1) !important; border: 0px solid #ced4da; border-radius: 0.25rem; } #Payment_Amount[disabled], #Payment_Amount2[disabled] { border: 0px solid #ced4da; padding: 0 !important; padding-left: 0.2rem; margin-top: -13px !important; font-size: 3.5rem; height: 80px; line-height: 80px; padding: 24px 4px 24px 5px; } .stripe_payment_wrapper { margin-bottom: 20px; margin-top: 0px; background-color: rgb(250, 255, 189) !important; padding: 5px; width: calc(100% + 10px); min-width: 100%; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; padding: 24px 4px 24px 9px; } /* =============================== FILE UPLOAD =============================== */ input[type='file'] { display: block; width: 100%; font-size: 1.25rem; font-weight: 400; line-height: 1.7; color: #495057; background-clip: padding-box; border: 1px solid #ced4da !important; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; margin: 10px 0 20px 0; background-color: #fafafa !important; } input[type="file"]::-webkit-file-upload-button { padding: 15px 50px; } .file-upload-wrapper .card.card-body .file-upload-preview { background-color: var(--flexwhite08) ; } .file-upload { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; overflow: hidden; width: 100%; max-width: 100%; height: 200px; padding: 5px 10px; font-size: 1rem; text-align: center; color: #ccc; background-color: #fafafa !important; } .file-field.medium .file-path-wrapper { height: 3rem; } .file-field.medium .file-path-wrapper .file-path { height: 2.8rem; } .file-field.big-2 .file-path-wrapper { height: 3.7rem; } .file-field.big-2 .file-path-wrapper .file-path { height: 3.5rem; } .file-upload-wrapper { margin: 20px 0 50px 0; } .stickyButtons, .stickyButtons.estimate { position: fixed; left: 0; bottom: 0; width: 100%; background-color: var(--color1xd); color: white; text-align: left; padding: 10px 0px 15px 0px; z-index: 5001 !important; } .stickyButtons.estimate { background-color: rgba(255,120,0,0.9); } .file-upload-wrapper .card.card-body .file-upload-message { position: relative; top: initial; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* ––––––––––––––––––––––––––––––– FORM GROUP ––––––––––––––––––––––––––––––– */ .form-group + .form-floating, .form-floating + .form-group { margin-top: 20px; } h1 + .form-floating, h2 + .form-floating, h3 + .form-floating, h4 + .form-floating, h5 + .form-floating, h6 + .form-floating { margin-top: 30px; } .form-floating + h1, .form-floating + h2, .form-floating + h3, .form-floating + h4, .form-floating + h5, .form-floating + h6 { margin-top: 45px; } h1 + .form-group, h2 + .form-group, h3 + .form-group, h4 + .form-group, h5 + .form-group, h6 + .form-group { margin-top: 30px; } .form-group + h1, .form-group + h2, .form-group + h3, .form-group + h4, .form-group + h5, .form-group + h6 { margin-top: 45px; } h1 + .form-floating, h2 + .form-floating, h3 + .form-floating, h4 + .form-floating, h5 + .form-floating, h6 + .form-floating { margin-top: 20px; } .form-floating + h1, .form-floating + h2, .form-floating + h3, .form-floating + h4, .form-floating + h5, .form-floating + h6 { margin-top: 35px; } h1 + .form-group, h2 + .form-group, h3 + .form-group, h4 + .form-group, h5 + .form-group, h6 + .form-group { margin-top: 20px; } .form-group + h1, .form-group + h2, .form-group + h3, .form-group + h4, .form-group + h5, .form-group + h6 { margin-top: 35px; } .form-group { margin: 0px 0px !important; } .form-group.radio, .form-group.checkbox { margin-top: 0.1rem !important; margin-bottom: 1.3rem !important; } .form-floating.area { margin-top: 2rem !important; margin-bottom: 3rem !important; } .form-group > label, .item > label { color: var(--gray5); margin: 0px 0 5px 2px !important; } .form-group > label > .label-hidden { margin-top: -17px !important; } .form-check > label { padding-left: 0.25rem; } .mb {margin-bottom: 1.25rem !important;} /* Form Label - Placeholder (was FORM FOCUS LABEL) */ .form-floating label { display: inline-block; font-size: 1.05rem !important; margin: 0.7rem 0 0 0; padding: 0.7rem 0 0 15px !important; color: var(--InputPlaceholderColor); text-transform: uppercase; } /* Form Label (minimized) */ .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label, .form-floating label::placeholder { opacity: 1.0; transform: scale(.6) translateY(-0.8rem) translateX(0.35rem); color: var(--InputLabelColor); margin-left: 0px; } /* Placeholder - OLD Form - form-control overwrites */ input[type='text']::placeholder, input[type='tel']::placeholder, input[type='email']::placeholder, input[type='search']::placeholder, input[type='password']::placeholder, input[type='number']::placeholder, input[type='datetime-local']::placeholder, input[type='file']::placeholder, textarea::placeholder, .form-control::placeholder { opacity: 0.4; font-weight: 300; color: transparent; } /* =============================== SAFARI FIX . webkit =============================== */ /* SAFARI auto fill background . same as input*/ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--PageBgColor) inset; -webkit-text-fill-color: var(--flexwhite); } /* same as onHover (above) */ input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px var(--InputBgColorHover) inset; -webkit-text-fill-color: var(--InputColorHover); } /* same as onFocus (above) */ input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--InputBgColorFocus) inset; -webkit-text-fill-color: var(--InputColorFocus); } input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button { background-color: var(--PasswordIconColor); } input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button:hover { background-color: var(--PasswordIconColorHover); } /* ============================================================== LINKS . TLC 3.0 . 12/27/22 . v6.9.0 ============================================================== */ @media (min-width: 1200px) /* navbar-expand-xl */ {} @media (max-width: 1200px) /* navbar-expand-lg */ {} @media (min-width: 992px) /* navbar-expand-lg */ {} @media (max-width: 992px) /* navbar-expand-md */ {} @media (min-width: 768px) /* navbar-expand-md */ {} @media (max-width: 768px) /* navbar-expand-sm */ {} @media (min-width: 576px) /* navbar-expand-sm */ {} @media (max-width: 576px) /* navbar-expand-xs */ {} /* =============================== DEFAULT =============================== Universal - HAS to be listed 1st above ALL other links) */ a, a:link, a:visited, a.white, .white a, a.black, .black a, a.color1, .color1 a, a .color1, a.color2, .color2 a, a .color2, a.color3, .color3 a, a .color3, a.link2, .link2 a, a .link2 { /*font-family: var(--linkFont);*/ color: var(--LinkColor); /* text-transform: var(--LinkTextTransform); */ /* : none|capitalize|uppercase|lowercase|initial|inherit; */ text-decoration: inherit; /* line(underline,overline,line-through) color style(solid,wavy,dashed) : none|initial|inherit; */ font-weight: normal; /* : normal|bold|bolder|lighter|number|initial|inherit; */ font-style: normal; /* : normal|italic|oblique|initial|inherit; */ font-stretch: normal; /* : ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit; */ outline: 0; margin: 0 0px; } a:visited, a.white:visited, a.black:visited, a.color1:visited, a.color2:visited, a.color3:visited { color: var(--LinkColor); } a:hover, a:active, a:focus, a.white:hover, .white a:hover, a.black:hover, .black a:hover, a.color1:hover, .color1 a:hover, a.color2:hover, .color2 a:hover, a.color3:hover, .color3 a:hover { color: var(--LinkHoverColor); text-decoration: var(--LinkHoverDecoration); } a:active, a.white:active, a.black:active, a.color1:active, a.color2:active, a.color3:active { color: var(--LinkActiveColor); } a.white, .white a {color: white !important;} /*a.white:hover, .white a:hover {color: var(--color1xl, #787878) !important;}*/ a.black, .black a {color: black !important;} /*a.black:hover, .black a:hover {color: var(--color1, #424242) !important;}*/ a.color1, .color1 a {color: var(--flexcolor1) !important;} a.color1:hover, .color1 a:hover {color: var(--flexcolor1xl) !important;} a.color2, .color2 a {color: var(--flexcolor2) !important;} a.color2:hover, .color2 a:hover {color: var(--flexcolor2xl) !important;} a.color3, .color3 a {color: var(--flexcolor3) !important;} a.color3:hover, .color3 a:hover {color: var(--flexcolor3xl)!important;} /* Link 2 ::::::::::::::::::::::::::::::::::::::::::::::::::::: */ a.link2, .link2 a, a .link2 a.link2:visited, .link2 a:visited, a:visited .link2 { color: var(--Link2Color); } a.link2:hover, a.link2:active, a.link2:focus { color: var(--Link2HoverColor); text-decoration: var(--Link2HoverDecoration); } a.link2:active { color: var(--LinkActiveColor); } /* =============================== HIT AREA =============================== HIT AREA - all items(img, text, arrow) - Highlights All a.link(s) within!!! */ .list-hit { position: relative; } .list-hit a { cursor: pointer; cursor: hand; } .list-hit a:hover, .list-hit a:hover *, .list-hit *:hover { cursor: pointer; cursor: hand; } .list-nohit a:hover, .list-nohit a:hover * { cursor: default !important; } /* prevent color on hover */ .list-hit a p, .list-hit a div, .list-nohit a p, .list-nohit a div { color: var(--FontColor); cursor: pointer !important; } .list-hit a:hover p, .list-hit a:hover div, .list-nohit a:hover p, .list-nohit a:hover div { color: var(--FontColor); } .list-hit a h1, .list-hit div.h1 a, .list-hit a h2, .list-hit div.h2 a, .list-hit a h3, .list-hit div.h3 a, .list-hit a h4, .list-hit div.h4 a, .list-nohit a h1, .list-nohit div.h1 a, .list-nohit a h2, .list-nohit div.h2 a, .list-nohit a h3, .list-nohit div.h3 a, .list-nohit a h4, .list-nohit div.h4 a { /* TRANSITION */ transition: color 300ms ease-out; } .list-hit a:hover h1, .list-hit div.h1 a:hover, .list-hit a:hover h2, .list-hit div.h2 a:hover, .list-hit a:hover h3, .list-hit div.h3 a:hover, .list-hit a:hover h4, .list-hit div.h4 a:hover, .list-nohit a:hover h1, .list-nohit div.h1 a:hover, .list-nohit a:hover h2, .list-nohit div.h2 a:hover, .list-nohit a:hover h3, .list-nohit div.h3 a:hover, .list-nohit a:hover h4, .list-nohit div.h4 a:hover { /* TRANSITION */ transition: color 300ms ease-out; } a.divLink { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } /* =============================== H1-H6 LINKS =============================== */ h1, .h1, .head1, h1 a:link, h1 a:visited, a h1:link, a h1:visited, .h1 a:link, .h1 a:visited, a .h1:link, a .h1:visited, h2, .h2, .head2, h2 a:link, h2 a:visited, a h2:link, a h2:visited, .h2 a:link, .h2 a:visited, a .h2:link, a .h2:visited, h3, .h3, .head3, h3 a:link, h3 a:visited, a h3:link, a h3:visited, .h3 a:link, .h3 a:visited, a .h3:link, a .h3:visited, h4, .h4, .head4, h4 a:link, h4 a:visited, a h4:link, a h4:visited, .h4 a:link, .h4 a:visited, a .h4:link, a .h4:visited, h5, .h5, .head5, h5 a:link, h5 a:visited, a h5:link, a h5:visited, .h5 a:link, .h5 a:visited, a .h5:link, a .h5:visited, h6, .h6, .head6, h6 a:link, h6 a:visited, a h6:link, a h6:visited, .h6 a:link, .h6 a:visited, a .h6:link, a .h6:visited, h1 a:active, a h1:active, .h1 a:active, a .h1:active, h2 a:active, a h2:active, .h2 a:active, a .h2:active, h3 a:active, a h3:active, .h3 a:active, a .h3:active, h4 a:active, a h4:active, .h4 a:active, a .h4:active, h5 a:active, a h5:active, .h5 a:active, a .h5:active, h6 a:active, a h6:active, .h6 a:active, a .h6:active{ transition: all 200ms ease-in-out; } h1 a:hover, a h1:hover, .h1 a:hover, a .h1:hover, h2 a:hover, a h2:hover, .h2 a:hover, a .h2:hover, h3 a:hover, a h3:hover, .h3 a:hover, a .h3:hover, h4 a:hover, a h4:hover, .h4 a:hover, a .h4:hover, h5 a:hover, a h5:hover, .h5 a:hover, a .h5:hover, h6 a:hover, a h6:hover, .h6 a:hover, a .h6:hover { transition: all 200ms ease-in-out; } h1, h1 a:link, h1 a:visited, h1 a:active, a h1:link, a h1:visited, a h1:active, .h1, .h1 a:link, .h1 a:visited, .h1 a:active, a .h1:link, a .h1:visited, a .h1:active .head1, .head1 a:link, .head1 a:visited, a .head1:link, a .head1:visited, a .head1:active { color: var(--H1Color); } h1 a:hover, a h1:hover, a:hover h1, a:hover .h1, .h1 a:hover, a .h1:hover, .head1 a:hover, a .head1:hover { color: var(--H1ColorHover); } h2, h2 a:link, h2 a:visited, h2 a:active, a h2:link, a h2:visited, a h2:active, .h2, .h2 a:link, .h2 a:visited, .h2 a:active, a .h2:link, a .h2:visited, a .h2:active .head2, .head2 a:link, .head2 a:visited, a .head2:link, a .head2:visited, a .head2:active { color: var(--H2Color); } h2 a:hover, a h2:hover, a:hover h2, a:hover .h2, .h2 a:hover, a .h2:hover, .head2 a:hover, a .head2:hover { color: var(--H2ColorHover); } h3, h3 a:link, h3 a:visited, h3 a:active, a h3:link, a h3:visited, a h3:active, .h3, .h3 a:link, .h3 a:visited, .h3 a:active, a .h3:link, a .h3:visited, a .h3:active .head3, .head3 a:link, .head3 a:visited, a .head3:link, a .head3:visited, a .head3:active { color: var(--H3Color); } h3 a:hover, a h3:hover, a:hover h3, a:hover .h3, .h3 a:hover, a .h3:hover, .head3 a:hover, a .head3:hover { color: var(--H3ColorHover); } h4, h4 a:link, h4 a:visited, h4 a:active, a h4:link, a h4:visited, a h4:active, .h4, .h4 a:link, .h4 a:visited, .h4 a:active, a .h4:link, a .h4:visited, a .h4:active .head4, .head4 a:link, .head4 a:visited, a .head4:link, a .head4:visited, a .head4:active { color: var(--H4Color); } h4 a:hover, a h4:hover, a:hover h4, a:hover .h4, .h4 a:hover, a .h4:hover, .head4 a:hover, a .head4:hover { color: var(--H4ColorHover); } h5,.h5,.head5, a h5, a:link h5, a:visited h5, a:active h5 {color: var(--H5Color);} a:hover h5 {color: var(--H5ColorHover); } h6,.h6,.head6, a h6, a:link h6, a:visited h6, a:active h6 {color: var(--H6Color);} a:hover h6 {color: var(--H6ColorHover); } h1.link a:link, h1.link a:visited, a h1.link:link, a h1.link:visited, .h1.link a:link, .h1.link a:visited, a .h1.link:link, a .h1.link:visited, h2.link a:link, h2.link a:visited, a h2.link:link, a h2.link:visited, .h2.link a:link, .h2.link a:visited, a .h2.link:link, a .h2.link:visited, h3.link a:link, h3.link a:visited, a h3.link:link, a h3.link:visited, .h3.link a:link, .h3.link a:visited, a .h3.link:link, a .h3.link:visited, h4.link a:link, h4.link a:visited, a h4.link:link, a h4.link:visited, .h4.link a:link, .h4.link a:visited, a .h4.link:link, a .h4.link:visited, h5.link a:link, h5.link a:visited, a h5.link:link, a h5.link:visited, .h5.link a:link, .h5.link a:visited, a .h5.link:link, a .h5.link:visited, h6.link a:link, h6.link a:visited, a h6.link:link, a h6.link:visited, .h6.link a:link, .h6.link a:visited, a .h6.link:link, a .h6.link:visited, h1.link a:active, a h1.link:active, .h1.link a:active, a .h1.link:active, h2.link a:active, a h2.link:active, .h2.link a:active, a .h2.link:active, h3.link a:active, a h3.link:active, .h3.link a:active, a .h3.link:active, h4.link a:active, a h4.link:active, .h4.link a:active, a .h4.link:active, h5.link a:active, a h5.link:active, .h5.link a:active, a .h5.link:active, h6.link a:active, a h6.link:active, .h6.link a:active, a .h6.link:active { color: var(--LinkColor) !important; } h1.link a:hover, a h1.link:hover, a:hover h1.link, a:hover .h1.link, .h1.link a:hover, a .h1.link:hover, .head1.link a:hover, a .head1.link:hover, h2.link a:hover, a h2.link:hover, a:hover h2.link, a:hover .h2.link, .h2.link a:hover, a .h2.link:hover, .head2.link a:hover, a .head2.link:hover, h3.link a:hover, a h3.link:hover, a:hover h3.link, a:hover .h3.link, .h3.link a:hover, a .h3.link:hover, .head3.link a:hover, a .head3.link:hover, h4.link a:hover, a h4.link:hover, a:hover h4.link, a:hover .h4.link, .h4.link a:hover, a .h4.link:hover, .head4.link a:hover, a .head4.link:hover, h5.link a:hover, a h5.link:hover, a:hover h5.link, a:hover .h5.link, .h5.link a:hover, a .h5.link:hover, .head5.link a:hover, a .head5.link:hover, h6.link a:hover, a h6.link:hover, a:hover h6.link, a:hover .h6.link, .h6.link a:hover, a .h6.link:hover, .head6.link a:hover, a .head6.link:hover { color: var(--LinkHoverColor) !important; } h1.nolink a:hover, h1.nohover a:hover {color: var(--H1Color);} h2.nolink a:hover, h2.nohover a:hover {color: var(--H2Color);} h3.nolink a:hover, h3.nohover a:hover {color: var(--H3Color);} h4.nolink a:hover, h4.nohover a:hover {color: var(--H4Color);} h5.nolink a:hover, h5.nohover a:hover {color: var(--H5Color);} h6.nolink a:hover, h6.nohover a:hover {color: var(--H6Color);} .tag-link, a.tag-link { color: var(--LabelTagColor); } .tag-link:hover, a:hover .tag-link{ color: var(--LinkHover); } a:hover div.color1 { color: var(--flexcolor1xl) !important; transition: color 300ms ease-out; } a:hover div.color2 { color: var(--flexcolor2xl) !important; transition: color 300ms ease-out; } a:hover div.color3 { color: var(--flexcolor1) !important; transition: color 300ms ease-out; } a:hover div.green { color: var(--mdb-success) !important; transition: color 300ms ease-out; } a:hover div.orange, a:hover div.orange2 { color: var(--flexcolor5xl) !important; transition: color 300ms ease-out; } /* =============================== HVR Hover CSS =============================== */ .hoverContainer { height: 100%; overflow: hidden; } .list-hit.hoverBorder.border:hover { border-color: var(--color1) !important; } .list-hit.hoverBorder.border-brand:hover { border-color: var(--color1xl) !important; } .list-hit.color1.hoverBorder.border-brand:hover { border-color: var(--color1xl) !important; } .list-hit.orange.hoverBorder.border-brand:hover, .list-hit.orange2.hoverBorder.border-brand:hover { border-color: var(--bs-orange) !important; } .list-hit.green.hoverBorder.border-brand:hover { border-color: green !important; } .list-hit.flexwhite2.hoverBorder.border-brand:hover, .list-hit.flexwhite3.hoverBorder.border-brand:hover, .list-hit.flexwhite4.hoverBorder.border-brand:hover, .list-hit.flexwhite5.hoverBorder.border-brand:hover { border-color: var(--flexwhite3) !important; } .list-hit.hoverBorder.border-brand:hover .Request { border-color: var(--bs-orange) !important; } .social .hvr-grow:active, .social .hvr-grow:focus, .social .hvr-grow:hover { -webkit-transform: scale(1.45); transform: scale(1.45); } .hoverBgImg { -webkit-transition: 300ms ease-out; -moz-transition: 300ms ease-out; -o-transition: 300ms ease-out; -ms-transition: 300ms ease-out; transition: 300ms ease-out; } .list-hit a .hoverContainer .hoverBgImg { -webkit-transform: scale(1); transform: scale(1); /* TRANSITION */     -webkit-transition: all 300ms ease-in-out;     -ms-transition: all 300ms ease-in-out;     -moz-transition: all 300ms ease-in-out;     transition: all 300ms ease-in-out; } .list-hit a:hover .hoverContainer .hoverBgImg { -webkit-transform: scale(1.1); transform: scale(1.1); } .nolink .hoverBgImg { -webkit-transform: scale(1); transform: scale(1); } .hvr-push i:active { -webkit-animation-name: hvr-push; animation-name: hvr-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* =============================== GO BACK =============================== */ /*LINK*/ .goBack { margin: 5px 0px; text-transform: uppercase; color: var(--flexcolor2) !important; } .goBack a, .goBack a:link, .goBack a:visited { /*color: var(--color3lf3) !important;*/ font-size: 80%; padding: 0px; margin: 0 25px 0 0px; /*background-color: yellow;*/ /* TRANSITION */     -webkit-transition: all 200ms ease-in;     -ms-transition: all 200ms ease-in;     -moz-transition: all 200ms ease-in;     transition: all 200ms ease-in; } /*LINK - hover, focus*/ .goBack a:focus, .goBack a:hover { color: var(--flexcolor1) !important; /* TRANSITION TO*/ -webkit-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; transition: all 200ms ease-in; } /* =============================== BREADCRUMBS =============================== */ .breadcrumb { font-size: 80%; color: var(--gray5); padding-bottom: 20px; } .breadcrumb a { color: var(--LinkColor); } .breadcrumb a:hover { color: var(--LinkHoverColor); } .breadcrumb > li + li:before { color: #ccc; content: "/ "; padding: 0 5px; } /* IF GoBack inside breadcrumbs .breadcrumb > li:first-child + li:before { color: #ccc; content: ""; padding: 0 5px; } */ /* Default */ ul.breadcrumb, .breadcrumb { background-color: transparent !important; padding: 0 0 0 0px !important; margin-bottom: 70px !important; border-radius: 0; display: inline-block !important; } ul.breadcrumb li a { text-transform: uppercase; color: var(--LinkColor); } .roCrumbs { color: var(--gray5); text-transform: uppercase; } .roCrumbs.Back { margin-right: 20px; } /* =============================== SECTION NAV (section_menu . Menu Layouts) =============================== */ .section_menu { /*background-color: #FEFEFE !important;*/ position: relative; margin: 0 0px 0 0; padding: 10px 0; } .section_menu ul li div ul { display: flex !important; /*background-color: green;*/ flex-flow: row wrap; margin: 0px; flex: 1; min-width: 0; margin-left: 20px; } /* Section Header */ .section_menu > ul > li { display: flex !important; text-transform: uppercase; font-size: 72%; align-content: start; /* GROUP vertical within container */ justify-content: start; /* horizontal */ align-items: start; /* vertical */ /*align-self: start; INDIVIDUAL vertical */ text-align: left; white-space: nowrap; padding: 5px 0px; /*flex-flow: column wrap; to wrap Header*/ } /* Section Links */ .section_menu ul li div ul li { display: flex !important; margin: 0; line-height: inherit; text-transform: uppercase; align-content: start; /* GROUP vertical within container */ justify-content: start; /* horizontal */ align-items: start; /* vertical */ /*align-self: start; INDIVIDUAL vertical */ /*min-width: 0;*/ text-align: center; /*background-color: rgba(0,0,0,.025);*/ /*flex-flow: column wrap;*/ flex: 1; /*flex: grow shrink basis */ } .section_menu ul li div ul li a { /*background-color: rgba(255,255,255,.4);*/ white-space: nowrap; padding-bottom: 10px; padding: 7px 0 !important; margin: -7px 0 0 0; } .section_menu ul li div ul li a .brand-attention { margin-top: -9; } .section_menu ul li div ul li:after { color: var(--flexcolor3f5); content: "|"; padding: 0 12px; } .section_menu ul li div ul li:last-child:after { color: blue; content: ""; padding: 0 10px; } .flexgrow0 /*.section_menu ul li div ul li.flexgrow0*/ { flex: 0 !important; /*flex: grow shrink basis */ } .flexgrow1 /*.section_menu ul li div ul li.flexgrow0*/ { flex: 1 !important; /*flex: grow shrink basis */ } @media (max-width: 576px) /* navbar-expand-xs */ { .section_menu ul li div ul li { align-content: start; justify-content: start; align-items: start; /* min-width: 0; */ text-align: left; flex: 0 !important; } /* Section Links */ .section_menu > ul > li { flex-flow: column wrap; } .section_menu ul li div ul { margin: 10px 0 0 0; } .section_menu ul li div ul li:after { color: none; content: ""; padding: 0px; } .section_menu ul li div ul li a { /*background-color: rgba(255,255,255,.4);*/ white-space: wrap; padding: 0 20px 10px 0 !important; } } .flexLink-container, .flex-container { display: flex; flex-flow: row wrap; } .flexLink, ul.flexLink, .flexitem { display: flex; flex-flow: row; /* border: 1px solid; */ margin: 0; flex: 1; min-width: 0; flex-wrap: nowrap; } ul.flexLink a { display: flex; flex-grow: 1; flex: 1; } .flexLink-child, ul.flexLink li, ul.flexLink a li, ul.flexLink.color2 li, ul.flexLink.color2 a li { display: flex; flex-flow: column nowrap; align-items: center; flex: 1; min-width: 0; justify-content: center; text-align: center; /* border: 1px solid dodgerblue; */ margin: 0 3px 3px 0; background-color: var(--color1) !important; padding: 10px; } ul.flexLink.color2 li, ul.flexLink.color2 a li { background-color: var(--color2) !important; } ul.flexLink a:hover li { background-color: var(--color1xl) !important; } ul.flexLink.color2 a:hover li { background-color: var(--color2xl) !important; } .child-title { white-space: wrap; } /* =============================== BUTTONS =============================== */ .centerMe { grid-area: a; align-self: center; justify-self: center; } .btn, .btn-2x, .btn-1x, .btn-2x-wrap, .btn-1x-wrap, .btn-wrap, .btn-xxl-2x, .btn-xxl, .btn-xxl-2x-wrap, .btn-xxl-wrap, .btn-xl-2x, .btn-xl, .btn-xl-2x-wrap, .btn-xl-wrap, .btn-lg-2x, .btn-lg, .btn-lg-2x-wrap, .btn-lg-wrap, .btn-md-2x, .btn-md-1x, .btn-md, .btn-md-2x-wrap, .btn-md-1x-wrap, .btn-md-wrap, /* DEFAULT */ .btn-sm-2x, .btn-sm, .btn-sm-2x-wrap, .btn-sm-wrap, .btn-xs, .btn-xs-wrap, .btn-xxs, .btn-xxs-wrap, .btn-xxxs, .btn-xxxs-wrap, .btn-clear, .submit-button, .checkout > .system_button { margin: 0px; font-family: var(--buttonFont) !important; text-transform: var(--buttonTextTransform); text-align: center; vertical-align: middle; white-space: normal; -moz-user-select: none; background-image: none; border: 0px; font-weight: normal; padding: 1.5rem 2.25rem 1.5rem 2rem; font-size: 1.25rem; /*line-height: 1.25rem;*/ margin-bottom: 0.75rem; border-radius: 0.25rem; /* Rounded Corners 0 = no */ -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem; -webkit-font-smoothing: subpixel-antialiased !important; /* fixes font flicker in Safari */ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-text-stroke: 0.20px !important; /* fixes font flicker in Safari - for FOOTER ONLY */ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: 0px solid; outline: 0px auto -webkit-focus-ring-color; outline-offset: -2px; } @keyframes short-press { 0% {transform: scale(1);} 50% { transform: scale(.9); } 100% { transform: scale(1); } } .submit-button:hover, .submit-button:focus { box-shadow: 0 5px 15px rgba(black,.1); } .submit-button.animated { animation: .75s short-press cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards; } .submit-button > span { display: block; color: white; text-align: center; } .submit-button > span.pre-state-msg { transition: all .7s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-delay: .75s; } .submit-button > span.state-1 .pre-state-msg { margin-top: -38px; } .submit-button > span.state-2 .pre-state-msg { margin-top: -76px; } .btn:hover, .system_button:hover { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; position: relative; z-index: 499 !important; } /* AFTER ICON (within Button) */ .btn svg { margin-right: 3px !important; } /* XXL - XXL Button ..................................... */ .btn-xxl, .btn-xxl-2x { font-size: 2.5rem !important; padding: 2.75rem 15% 2.75rem 15%; min-width: 40%; line-height: 2.6rem; margin: .15rem !important; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* XL - X-Large Button..................................... */ .btn.btn-xl, .btn-xl, .btn-xl-2x { font-size: 2.25rem !important; padding: 2.5rem 10% 2.55rem 10%; min-width: 40%; line-height: 2.15rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* LG - Large Button..................................... */ .btn.btn-lg, .btn-lg, .btn-lg-2x, .checkout > .system_button { font-size: 1.8rem !important; padding: 2.25rem 10% 2.3rem 10%; min-width: 25%; line-height: 1.65rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* MD - Medium Button..................................... */ .btn.btn-md, .btn-md, .btn-md-2x { font-size: 1.45rem !important; padding: 2rem 8% 2.1rem 8%; min-width: 20%; line-height: 1.4rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* SM - Small Button..................................... */ .btn.btn-sm, .btn-sm, .btn-sm-2x { font-size: 1.2rem; padding: 1.75rem 7% 1.9rem 7%; min-width: 15%; line-height: 1.15rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* XS - X-Small Button..................................... */ .btn.btn-xs, .btn-xs, .btn-xs-2x { font-size: 0.95rem !important; padding: 1.25rem 6% 1.35rem 6%; line-height: 1.05rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; } /* XXS - XX-Small Button..................................... */ .btn.btn-xxs, .btn-xxs, .btn-xxs-2x { font-size: 0.8rem !important; padding: 0.9rem 6% 0.95rem 6%; line-height: 0.95rem; margin: .15rem; border-radius: 0.4rem; /* Rounded Corners 0 = no */ -webkit-border-radius: 0.4rem; -moz-border-radius: 0.4rem; } /* XXXS - XXX-Small Button..................................... */ .btn.btn-xxxs, .btn-xxxs, .btn-xxxs-2x { font-size: 0.65rem !important; padding: 0.5rem 5% 0.55rem 5%; line-height: 0.8rem; margin: .15rem; border-radius: 0.3rem; /* Rounded Corners 0 = no */ -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; } /* Clear Date Button..................................... */ .btn.btn-clear, .btn-clear, .btn-clear-2x { font-size: 0.6rem !important; padding: 0.2rem 10px 0.2rem 10px; line-height: 0.8rem; margin: 0px 0px 3px 10px; border-radius: 0.3rem; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; display: inline-block; background-color: red !important; } nav .btn-xxl, nav .btn-xl, nav .btn-lg, nav .btn-md, nav .btn-sm, nav .btn-xs, nav .btn-xxs, nav .btn-xxxs { margin: 0.2rem .1rem !important; } /* XXL - XXL Button ..................................... */ nav .btn-xxl, nav .btn-xxl-2x { font-size: 2rem !important; padding: 2.5rem 3.5rem 2.6rem 3.5rem; min-width: 400px; line-height: 2.15rem; } /* XL - X-Large Button..................................... */ nav .btn.btn-xl, nav .btn-xl, nav .btn-xl-2x { font-size: 1.5rem !important; padding: 2rem 2.75rem 2.15rem 2.75rem; min-width: 350px; line-height: 1.65rem; } /* LG - Large Button..................................... */ nav .btn.btn-lg, nav .btn-lg, nav .btn-lg-2x { font-size: 1.25rem !important; padding: 1.65rem 2.25rem 1.7rem 2.25rem; min-width: 275px; line-height: 1.4rem; } /* MD - Medium Button..................................... */ nav .btn.btn-md, nav .btn-md, nav .btn-md-2x { font-size: 1.05rem !important; padding: 1.25rem 2rem 1.25rem 2rem; min-width: 275px; line-height: 1.15rem; } /* SM - Small Button..................................... */ nav .btn.btn-sm, nav .btn-sm, nav .btn-sm-2x { font-size: 0.9rem !important; padding: 0.85rem 1.45rem 0.9rem 1.45rem; min-width: 50px; line-height: 1.05rem; } /* XS - X-Small Button..................................... */ nav .btn.btn-xs, nav .btn-xs, nav .btn-xs-2x { font-size: 0.8rem !important; padding: 0.7rem 1.3rem 0.8rem 1.3rem; line-height: 0.95rem; } /* XXS - XX-Small Button..................................... */ nav .btn.btn-xxs, nav .btn-xxs, nav .btn-xxs-2x { font-size: 0.7rem !important; padding: 0.5rem 1rem 0.55rem 1rem; line-height: 0.85rem; } /* ALL Buttons */ .btn-default, .btn-primary, .btn-secondary, .btn-footer, .btn-color1, .btn-color2, .btn-color3, .btn-color4, .btn-color5, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-light, .btn-light2, .btn-orange, .btn-blue, .btn-green, .btn-red, .btn-yellow, .btn-admin,.btn-admin2, .system_button, .btn-outline-default,.btn-outline-primary,.btn-outline-secondary, .btn-outline-color1, .btn-outline-color2, .btn-outline-color3, .btn-outline-color4, .btn-outline-color5 .btn-outline-info,.btn-outline-success,.btn-outline-warning,.btn-outline-danger,.btn-outline-light,.btn-outline-light2, .btn-clear { text-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;outline: 0 !important;background-image: none !important; } .btn-default:active, .btn-primary:active, .btn-secondary:active, .btn-footer:active, .btn-color1:active, .btn-color2:active, .btn-color3:active, .btn-color4:active, .btn-color5:active, .btn-info:active, .btn-success:active, .btn-warning:active, .btn-danger:active, .btn-light:active, .btn-light2:active, .btn-orange:active, .btn-blue:active, .btn-green:active, .btn-red:active, .btn-yellow:active, .system_button:active, .btn-admin,.btn-admin2, .btn-outline-default:active,.btn-outline-primary:active, .btn-outline-color1:active, .btn-outline-color2:active, .btn-outline-color3:active, .btn-outline-color4:active, .btn-outline-color5 .btn-outline-info:active,.btn-outline-success:active,.btn-outline-warning:active,.btn-outline-danger:active,.btn-outline-light:active,.btn-outline-light2:active, .btn-default.active, .btn-primary.active, .btn-secondary.active, .btn-footer.active, .btn-color1.active, .btn-color2.active, .btn-color3.active, .btn-color4.active, .btn-color5.active, .btn-info.active, .btn-success.active, .btn-warning.active, .btn-danger.active, .btn-light.active, .btn-light2.active, .btn-orange.active, .btn-blue.active, .btn-green.active, .btn-red.active, .btn-yellow.active, .system_button.active, .btn-outline-default.active,.btn-outline-primary.active, .btn-outline-color1.active, .btn-outline-color2.active, .btn-outline-color3.active, .btn-outline-color4.active, .btn-outline-color5 .btn-outline-info.active,.btn-outline-success.active,.btn-outline-warning.active,.btn-outline-danger.active,.btn-outline-light.active,.btn-outline-light2.active, .btn-clear.active { -webkit-box-shadow: none !important; box-shadow: none !important; } .btn:active,.btn.active {background-image: none;} /* ALL Buttons */ .btn-default, .btn-primary, .btn-secondary, .btn-footer, .btn-admin,.btn-admin2, .btn-color1, .btn-color2, .btn-color3, .btn-color4, .btn-color5, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-light, .btn-light2, .btn-orange, .btn-blue, .btn-green, .btn-red, .btn-yellow, .system_button, .btn-clear { text-shadow: none; background-image: none; background-repeat: repeat-x; border-color: transparent; filter: none; color: #FFFFFF; background-color: var(--PrimaryButtonColor); display: inline-block; } .btn.disabled, .btn:disabled { opacity: 0.7; } /* Button LINK */ .btn-default a:link, a.btn-default, a.btn-info:default, .btn-default a, .btn-primary a:link, a.btn-primary, a.btn-primary:link, .btn-primary a, .btn-secondary a:link, a.btn-secondary, a.btn-secondary:link, .btn-secondary a, .btn-color1 a:link, a.btn-color1, a.btn-color1:link, .btn-color1 a, .btn-color2 a:link, a.btn-color2, a.btn-color2:link, .btn-color2 a, .btn-color3 a:link, a.btn-color3, a.btn-color3:link, .btn-color3 a, .btn-color4 a:link, a.btn-color4, a.btn-color4:link, .btn-color4 a, .btn-color5 a:link, a.btn-color5, a.btn-color5:link, .btn-color5 a, .btn-orange a:link, a.btn-orange, a.btn-orange:link, .btn-orange a, .btn-blue a:link, a.btn-blue, a.btn-blue:link, .btn-blue a, .btn-green a:link, a.btn-green, a.btn-green:link, .btn-green a, .btn-red a:link, a.btn-red, a.btn-red:link, .btn-red a, .btn-yellow a:link, a.btn-yellow, a.btn-yellow:link, .btn-yellow a, .btn-info a:link, a.btn-info, a.btn-info:link, .btn-info a, .btn-success a:link, a.btn-success, a.btn-success:link, .btn-success a, .btn-warning a:link, a.btn-warning, a.btn-warning:link, .btn-warning a, .btn-danger a:link, a.btn-danger, a.btn-danger:link, .btn-danger a, .btn-footer a:link, a.btn-footer, a.btn-footer:link, .btn-footer a, .btn-clear a:link, a.btn-clear, a.btn-clear:link, .btn-clear a, .btn-admin a:link, a.btn-admin, a.btn-admin:link, .btn-admin a, .btn-admin2 a:link, a.btn-admin2, a.btn-admin2:link, .btn-admin2 a { color: #FFFFFF !important; } .btn-light a:link, a.btn-light, a.btn-light:link, .btn-light a, .btn-light2 a:link, a.btn-light2, a.btn-light2:link, .btn-light2 a { color: var(--PrimaryButtonColor) !important; } /* Info Button . dodgerblue ===================*/ .btn-info, .btn-info:not([disabled]), .btn.btn-info, .btn-info.focus { color: #FFFFFF; background-color: #38c0f2 !important; } .btn-info.focus {background-color: #4da6ff !important;} /* Info ACTIVE */ .btn-info:active, .btn-info a:active, a.btn-info:active, .btn.btn-info:active, .btn-info:not([disabled]):not(.disabled):active, .btn-info:not([disabled]):not(.disabled).active, .show>.btn-info.dropdown-toggle, .btn-info.active.focus { background-color: #40a1ff !important; } /* Info HOVER */ .btn-info:hover, .btn-info a:hover, a.btn-info:hover, .btn.btn-info:hover, .btn-info:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-info:hover, .show>.btn-info.dropdown-toggle { background-color: deepskyblue !important; } /* Success Button . green ===================*/ .btn-success, .btn-success:not([disabled]), .btn.btn-success, .btn-success.focus, .submit-button,.system_button { color: #FFFFFF; background-color: green !important; } .btn-success.focus {background-color: #039303 !important;} /* Success ACTIVE */ .btn-success:active, .btn-success a:active, a.btn-success:active, .btn.btn-success:active, .btn-success:not([disabled]):not(.disabled):active, .btn-success:not([disabled]):not(.disabled).active, .show>.btn-success.dropdown-toggle.active, .btn-success.active.focus { background-color: #039303 !important; } /* Success HOVER */ .btn-success:hover, .btn-success a:hover, a.btn-success:hover, .btn.btn-success:hover, .btn-success:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-success:hover, .show>.btn-success.dropdown-toggle .submit-button:hover, .system_button:hover { background-color: #00C400 !important; } /* Warning Button . gold ===================*/ .btn-warning, .btn-warning:not([disabled]), .show>.btn-warning.dropdown-toggle, .btn.btn-warning, .btn-warning.focus { color: #FFFFFF; background-color: gold !important; } .btn-warning.focus {background-color: #ccad00 !important;} /* Warning ACTIVE */ .btn-warning:active, .btn-warning a:active, a.btn-warning:active, .btn.btn-warning:active, .btn-warning:not([disabled]):not(.disabled):active, .btn-warning:not([disabled]):not(.disabled).active, .show>.btn-warning.dropdown-toggle.active, .btn-warning.active.focus { background-color: #ccad00 !important; } /* Warning HOVER */ .btn-warning:hover, .btn-warning a:hover, a.btn-warning:hover, .btn.btn-warning:hover, .btn-warning:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-warning:hover, .show>.btn-warning.dropdown-toggle { background-color: #ffed00 !important; } /* Danger Button . red ===================*/ .btn-danger, .btn-danger:not([disabled]), .show>.btn-danger.dropdown-toggle, .btn.btn-danger, .btn-danger.focus { color: #FFFFFF; background-color: #e60000 !important; } .btn-danger.focus {background-color: red !important;} /* Danger ACTIVE */ .btn-danger:active, .btn-danger a:active, a.btn-danger:active, .btn.btn-danger:active, .btn-danger:not([disabled]):not(.disabled):active, .btn-danger:not([disabled]):not(.disabled).active, .show>.btn-danger.dropdown-toggle.active, .btn-danger.active.focus { background-color: red !important; } /* Danger HOVER */ .btn-danger:hover, .btn-danger a:hover, a.btn-danger:hover, .btn.btn-danger:hover, .btn-danger:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-danger:hover, .show>.btn-danger.dropdown-toggle { background-color: red !important; } /* clear Button . color1 ===================*/ .btn-clear, .btn-clear:not([disabled]), .btn.btn-clear, .btn-clear.focus { border: 1px solid var(--color1); color: var(--color1); background-color: white !important; } .btn-clear.focus {background-color: var(--color1) !important;} /* clear ACTIVE */ .btn-clear:active, .btn-clear a:active, a.btn-clear:active, .btn.btn-clear:active, .btn-clear:not([disabled]):not(.disabled):active, .btn-clear:not([disabled]):not(.disabled).active, .show>.btn-clear.dropdown-toggle, .btn-clear.active.focus { color: white; background-color: var(--color1) !important; } /* clear HOVER */ .btn-clear:hover, .btn-clear a:hover, a.btn-clear:hover, .btn.btn-clear:hover, .btn-clear:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-clear:hover, .show>.btn-clear.dropdown-toggle { color: white; background-color: var(--color1) !important; } /* Admin Button . ===================*/ .btn-admin, .btn-admin:not([disabled]), .btn.btn-admin, .btn-admin.focus { color: var(--color1) !important; background-color: var(--color1f1) !important; border: 1px solid var(--color1) !important; } .btn-admin.focus {background-color: #9ec3df !important;} /* admin ACTIVE */ .btn-admin:active, .btn-admin a:active, a.btn-admin:active, .btn.btn-admin:active, .btn-admin:not([disabled]):not(.disabled):active, .btn-admin:not([disabled]):not(.disabled).active, .show>.btn-admin.dropdown-toggle, .btn-admin.active.focus { background-color: var(--color1f1) !important; border: 1px solid var(--color1)!important; } /* admin HOVER */ .btn-admin:hover, .btn-admin a:hover, a.btn-admin:hover, .btn.btn-admin:hover, .btn-admin:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-admin:hover, .show>.btn-admin.dropdown-toggle { background-color: var(--color1f1) !important; border: 1px solid var(--color1) !important; } /* Admin2 Button . ===================*/ .btn-admin2, .btn-admin2:not([disabled]), .btn.btn-admin2, .btn-admin2.focus { color: #0029ff !important; background-color: white !important; border: 1px solid #0029ff !important; } .btn-admin2.focus {background-color: #b2cadd !important;} /* admin2 ACTIVE */ .btn-admin2:active, .btn-admin2 a:active, a.btn-admin2:active, .btn.btn-admin2:active, .btn-admin2:not([disabled]):not(.disabled):active, .btn-admin2:not([disabled]):not(.disabled).active, .show>.btn-admin2.dropdown-toggle, .btn-admin2.active.focus { background-color: white !important; border: 1px solid #0029ff !important; } /* admin2 HOVER */ .btn-admin2:hover, .btn-admin2 a:hover, a.btn-admin2:hover, .btn.btn-admin2:hover, .btn-admin2:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-admin2:hover, .show>.btn-admin2.dropdown-toggle { background-color: white !important; border: 1px solid #0029ff !important; } /* Orange Button ===================*/ .btn-orange, .btn-orange:not([disabled]), .show>.btn-orange.dropdown-toggle, .btn.btn-orange, .btn-orange.focus { color: #FFFFFF; background-color: #ff7200 !important; } .btn-orange.focus {background-color: #ff7200 !important;} /* orange ACTIVE */ .btn-orange:active, .btn-orange a:active, a.btn-orange:active, .btn.btn-orange:active, .btn-orange:not([disabled]):not(.disabled):active, .btn-orange:not([disabled]):not(.disabled).active, .show>.btn-orange.dropdown-toggle.active, .btn-orange.active.focus { background-color: #ff7200 !important; } /* orange HOVER */ .btn-orange:hover, .btn-orange a:hover, a.btn-orange:hover, .btn.btn-orange:hover, .btn-orange:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-orange:hover, .show>.btn-orange.dropdown-toggle { background-color: #ff9600 !important; } /* blue Button ===================*/ .btn-blue, .btn-blue:not([disabled]), .show>.btn-blue.dropdown-toggle, .btn.btn-blue, .btn-blue.focus { color: #FFFFFF; background-color: #0000FF !important; } .btn-blue.focus {background-color: #ff7200 !important;} /* blue ACTIVE */ .btn-blue:active, .btn-blue a:active, a.btn-blue:active, .btn.btn-blue:active, .btn-blue:not([disabled]):not(.disabled):active, .btn-blue:not([disabled]):not(.disabled).active, .show>.btn-blue.dropdown-toggle.active, .btn-blue.active.focus { background-color: #ff7200 !important; } /* blue HOVER */ .btn-blue:hover, .btn-blue a:hover, a.btn-blue:hover, .btn.btn-blue:hover, .btn-blue:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-blue:hover, .show>.btn-blue.dropdown-toggle { background-color: #0054ff !important; } /* red Button ===================*/ .btn-red, .btn-red:not([disabled]), .show>.btn-red.dropdown-toggle, .btn.btn-red, .btn-red.focus { color: #FFFFFF; background-color: #0000FF !important; } .btn-red.focus {background-color: #ff7200 !important;} /* red ACTIVE */ .btn-red:active, .btn-red a:active, a.btn-red:active, .btn.btn-red:active, .btn-red:not([disabled]):not(.disabled):active, .btn-red:not([disabled]):not(.disabled).active, .show>.btn-red.dropdown-toggle.active, .btn-red.active.focus { background-color: #ff7200 !important; } /* red HOVER */ .btn-red:hover, .btn-red a:hover, a.btn-red:hover, .btn.btn-red:hover, .btn-red:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-red:hover, .show>.btn-red.dropdown-toggle { background-color: #0054ff !important; } /* green Button ===================*/ .btn-green, .btn-green:not([disabled]), .show>.btn-green.dropdown-toggle, .btn.btn-green, .btn-green.focus { color: #FFFFFF; background-color: #00b52b !important; } .btn-green.focus {background-color: #00b52b !important;} /* green ACTIVE */ .btn-green:active, .btn-green a:active, a.btn-green:active, .btn.btn-green:active, .btn-green:not([disabled]):not(.disabled):active, .btn-green:not([disabled]):not(.disabled).active, .show>.btn-green.dropdown-toggle.active, .btn-green.active.focus { background-color: #00b52b !important; } /* green HOVER */ .btn-green:hover, .btn-green a:hover, a.btn-green:hover, .btn.btn-green:hover, .btn-green:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-green:hover, .show>.btn-green.dropdown-toggle { background-color: #00b52b !important; } /* yellow Button ===================*/ .btn-yellow, .btn-yellow:not([disabled]), .show>.btn-yellow.dropdown-toggle, .btn.btn-yellow, .btn-yellow.focus { color: #FFFFFF; background-color: #0000FF !important; } .btn-yellow.focus {background-color: #ff7200 !important;} /* yellow ACTIVE */ .btn-yellow:active, .btn-yellow a:active, a.btn-yellow:active, .btn.btn-yellow:active, .btn-yellow:not([disabled]):not(.disabled):active, .btn-yellow:not([disabled]):not(.disabled).active, .show>.btn-yellow.dropdown-toggle.active, .btn-yellow.active.focus { background-color: #ff7200 !important; } /* yellow HOVER */ .btn-yellow:hover, .btn-yellow a:hover, a.btn-yellow:hover, .btn.btn-yellow:hover, .btn-yellow:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-yellow:hover, .show>.btn-yellow.dropdown-toggle { background-color: #0054ff !important; } /* Light Button . reverse white ===================*/ .btn-light, .btn-light:not([disabled]), .show>.btn-light.dropdown-toggle, .btn.btn-light, .btn-light.focus { color: var(--color1) !important; background-color: white !important; } .btn-light.focus {background-color: white !important;color: var(--color1l) !important;} /* Light ACTIVE */ .btn-light:active, .btn-light a:active, a.btn-light:active, .btn.btn-light:active, .btn-light:not([disabled]):not(.disabled):active, .btn-light:not([disabled]):not(.disabled).active, .show>.btn-light.dropdown-toggle.active, .btn-light.active.focus { color: white !important; background-color: var(--color1) !important; } /* Light HOVER */ .btn-light:hover, .btn-light a:hover, a.btn-light:hover, .btn.btn-light:hover, .btn-light:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-light:hover, .show>.btn-light.dropdown-toggle { color: var(--color1xl) !important; background-color: white !important; } /* Light Button Color2 . reverse white ===================*/ .btn-light2, .btn-light2:not([disabled]), .show>.btn-light2.dropdown-toggle, .btn.btn-light2, .btn-light2.focus { color: var(--color2) !important; background-color: white !important; } .btn-light2.focus {background-color: white !important;color: var(--color2l) !important;} /* Light2 ACTIVE */ .btn-light2:active, .btn-light2 a:active, a.btn-light2:active, .btn.btn-light2:active, .btn-light2:not([disabled]):not(.disabled):active, .btn-light2:not([disabled]):not(.disabled).active, .show>.btn-light2.dropdown-toggle.active, .btn-light2.active.focus { color: white !important; background-color: var(--color2) !important; } /* Light2 HOVER */ .btn-light2:hover, .btn-light2 a:hover, a.btn-light2:hover, .btn.btn-light2:hover, .btn-light2:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-light2:hover, .show>.btn-light2.dropdown-toggle { color: var(--color2xl) !important; background-color: white !important; } /* PRIMARY (default) Button . color1 ===================*/ .btn-primary, .btn-primary:not([disabled]), .show>.btn-primary.dropdown-toggle, .btn.btn-primary, .btn-primary.focus, .btn-default, .btn-color1, .btn-color1:not([disabled]), .show>.btn-color1.dropdown-toggle, .btn.btn-color1, .btn-color1.focus, .btn-default, .btn-default:not([disabled]), .show>.btn-default.dropdown-toggle, .btn.btn-default, .btn-default.focus { color: var(--PrimaryButtonTextColor) !important; background-color: var(--PrimaryButtonColor) !important; } .btn-primary.focus, .btn-default.focus { background-color: var(--PrimaryButtonColor) !important;} /* Primary VISITED */ .btn-primary:visited, .btn-primary a:visited, a.btn-primary:visited, .btn.btn-primary:visited, .btn-primary:not([disabled]):not(.disabled):visited, .btn-primary:not([disabled]):not(.disabled).visited, .show>.btn-primary.dropdown-toggle.visited, .btn-primary.visited.focus, .btn-color1:visited, .btn-color1 a:visited, a.btn-color1:visited, .btn.btn-color1:visited, .btn-color1:not([disabled]):not(.disabled):visited, .btn-color1:not([disabled]):not(.disabled).visited, .show>.btn-color1.dropdown-toggle.visited, .btn-color1.visited.focus, .btn-default:visited, .btn-default a:visited, a.btn-default:visited, .btn.btn-default:visited, .btn-default:not([disabled]):not(.disabled):visited, .btn-default:not([disabled]):not(.disabled).visited, .show>.btn-default.dropdown-toggle.visited, .btn-default.visited.focus { color: var(--PrimaryButtonTextColor) !important; background-color: var(--PrimaryButtonVisitedColor) !important; } /* Primary ACTIVE */ .btn-primary:active, .btn-primary a:active, a.btn-primary:active, .btn.btn-primary:active, .btn-primary:not([disabled]):not(.disabled):active, .btn-primary.active, .btn-primary a.active, a.btn-primary.active, .btn.btn-primary.active, .btn-primary:not([disabled]):not(.disabled).active, .show>.btn-primary.dropdown-toggle.active, .btn-primary.active.focus, .btn-color1:active, .btn-color1 a:active, a.btn-color1:active, .btn.btn-color1:active, .btn-color1:not([disabled]):not(.disabled):active, .btn-color1.active, .btn-color1 a.active, a.btn-color1.active, .btn.btn-color1.active, .btn-color1:not([disabled]):not(.disabled).active, .show>.btn-color1.dropdown-toggle.active, .btn-color1.active.focus, .btn-default:active, .btn-default a:active, a.btn-default:active, .btn.btn-default:active, .btn-default:not([disabled]):not(.disabled):active, .btn-default:not([disabled]):not(.disabled).active, .show>.btn-default.dropdown-toggle.active, .btn-default.active.focus { color: var(--PrimaryButtonTextActiveColor) !important; background-color: var(--PrimaryButtonActiveColor) !important; } .btn-primary.disabled.active, .btn-color1.disabled.active { color: var(--PrimaryButtonTextActiveColor) !important; background-color: var(--PrimaryButtonDisabledColor) !important; opacity: 1.0; } /* Primary HOVER */ .btn-primary:hover, .btn-primary a:hover, a.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-primary:hover, .show>.btn-primary.dropdown-toggle, .btn-color1:hover, .btn-color1 a:hover, a.btn-color1:hover, .btn.btn-color1:hover, .btn-color1:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-color1:hover, .show>.btn-color1.dropdown-toggle, .btn-default:hover, .btn-default a:hover, a.btn-default:hover, .btn.btn-default:hover, .btn-default:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-default:hover, .show>.btn-default.dropdown-toggle { color: var(--PrimaryButtonTextHoverColor) !important; background-color: var(--PrimaryButtonHoverColor) !important; } /* SECONDARY Button . color2 ===================*/ .btn-secondary, .btn-secondary:not([disabled]), .show>.btn-secondary.dropdown-toggle, .btn.btn-secondary, .btn-secondary.focus { color: var(--SecondaryButtonTextColor) !important; background-color: var(--SecondaryButtonColor) !important; } .btn-color2, .btn-color2:not([disabled]), .show>.btn-color2.dropdown-toggle, .btn.btn-color2, .btn-color2.focus { color: white !important; background-color: var(--color2) !important; } .btn-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* Secondary VISITED */ .btn-secondary:visited, .btn-secondary a:visited, a.btn-secondary:visited, .btn.btn-secondary:visited, .btn-secondary:not([disabled]):not(.disabled):visited, .btn-secondary:not([disabled]):not(.disabled).visited, .show>.btn-secondary.dropdown-toggle.visited, .btn-secondary.visited.focus { color: var(--SecondaryButtonTextColor) !important; background-color: var(--SecondaryButtonVisitedColor) !important; } .btn-color2:visited, .btn-color2 a:visited, a.btn-color2:visited, .btn.btn-color2:visited, .btn-color2:not([disabled]):not(.disabled):visited, .btn-color2:not([disabled]):not(.disabled).visited, .show>.btn-color2.dropdown-toggle.visited, .btn-color2.visited.focus { color: white !important; background-color: var(--color2) !important; } /* Secondary ACTIVE */ .btn-secondary:active, .btn-secondary a:active, a.btn-secondary:active, .btn.btn-secondary:active, .btn-secondary:not([disabled]):not(.disabled):active, .btn-secondary.active, .btn-secondary a.active, a.btn-secondary.active, .btn.btn-secondary.active, .btn-secondary:not([disabled]):not(.disabled).active, .show>.btn-secondary.dropdown-toggle.active, .btn-secondary.active.focus { color: var(--SecondaryButtonTextActiveColor) !important; background-color: var(--SecondaryButtonActiveColor) !important; } .btn-secondary.disabled.active { color: var(--SecondaryButtonTextActiveColor) !important; background-color: var(--SecondaryButtonDisabledColor) !important; opacity: 1.0; } .btn-color2:active, .btn-color2 a:active, a.btn-color2:active, .btn.btn-color2:active, .btn-color2:not([disabled]):not(.disabled):active, .btn-color2 a.active, a.btn-color2.active, .btn.btn-color2.active, .btn-color2:not([disabled]):not(.disabled).active, .show>.btn-color2.dropdown-toggle.active, .btn-color2.active.focus { color: white !important; background-color: var(--color2xl) !important; } .btn-color2.disabled.active { color: var(--SecondaryButtonTextActiveColor) !important; background-color: var(--color2d) !important; opacity: 1.0; } /* Secondary HOVER */ .btn-secondary:hover, .btn-secondary a:hover, a.btn-secondary:hover, .btn.btn-secondary:hover, .btn-secondary:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-secondary:hover, .show>.btn-secondary.dropdown-toggle { color: var(--SecondaryButtonTextHoverColor) !important; background-color: var(--SecondaryButtonHoverColor) !important; } .btn-color2:hover, .btn-color2 a:hover, a.btn-color2:hover, .btn.btn-color2:hover, .btn-color2:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-color2:hover, .show>.btn-color2.dropdown-toggle { color: white !important; background-color: var(--color2xl) !important; } /* ADDITIONAL Button . color3 ===================*/ .btn-color3, .btn-color3:not([disabled]), .show>.btn-color3.dropdown-toggle, .btn.btn-color3, .btn-color3.focus { color: white !important; background-color: var(--color3) !important; } .btn-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color3 VISITED */ .btn-color3:visited, .btn-color3 a:visited, a.btn-color3:visited, .btn.btn-color3:visited, .btn-color3:not([disabled]):not(.disabled):visited, .btn-color3:not([disabled]):not(.disabled).visited, .show>.btn-color3.dropdown-toggle.visited, .btn-color3.visited.focus { color: white !important; background-color: var(--color3) !important; } /* color3 ACTIVE */ .btn-color3:active, .btn-color3 a:active, a.btn-color3:active, .btn.btn-color3:active, .btn-color3:not([disabled]):not(.disabled):active, .btn-color3:not([disabled]):not(.disabled).active, .show>.btn-color3.dropdown-toggle.active, .btn-color3.active.focus { color: white !important; background-color: var(--color3xl) !important; } /* color3 HOVER */ .btn-color3:hover, .btn-color3 a:hover, a.btn-color3:hover, .btn.btn-color3:hover, .btn-color3:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-color3:hover, .show>.btn-color3.dropdown-toggle { color: white !important; background-color: var(--color3xl) !important; } /* ADDITIONAL Button . color4 ===================*/ .btn-color4, .btn-color4:not([disabled]), .show>.btn-color4.dropdown-toggle, .btn.btn-color4, .btn-color4.focus { color: white !important; background-color: var(--color4) !important; } .btn-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color4 VISITED */ .btn-color4:visited, .btn-color4 a:visited, a.btn-color4:visited, .btn.btn-color4:visited, .btn-color4:not([disabled]):not(.disabled):visited, .btn-color4:not([disabled]):not(.disabled).visited, .show>.btn-color4.dropdown-toggle.visited, .btn-color4.visited.focus { color: white !important; background-color: var(--color4) !important; } /* color4 ACTIVE */ .btn-color4:active, .btn-color4 a:active, a.btn-color4:active, .btn.btn-color4:active, .btn-color4:not([disabled]):not(.disabled):active, .btn-color4:not([disabled]):not(.disabled).active, .show>.btn-color4.dropdown-toggle.active, .btn-color4.active.focus { color: white !important; background-color: var(--color4xl) !important; } /* color4 HOVER */ .btn-color4:hover, .btn-color4 a:hover, a.btn-color4:hover, .btn.btn-color4:hover, .btn-color4:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-color4:hover, .show>.btn-color4.dropdown-toggle { color: white !important; background-color: var(--color4xl) !important; } /* ADDITIONAL Button . color5 ===================*/ .btn-color5, .btn-color5:not([disabled]), .show>.btn-color5.dropdown-toggle, .btn.btn-color5, .btn-color5.focus { color: white !important; background-color: var(--color5) !important; } .btn-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color5 VISITED */ .btn-color5:visited, .btn-color5 a:visited, a.btn-color5:visited, .btn.btn-color5:visited, .btn-color5:not([disabled]):not(.disabled):visited, .btn-color5:not([disabled]):not(.disabled).visited, .show>.btn-color5.dropdown-toggle.visited, .btn-color5.visited.focus { color: white !important; background-color: var(--color5) !important; } /* color5 ACTIVE */ .btn-color5:active, .btn-color5 a:active, a.btn-color5:active, .btn.btn-color5:active, .btn-color5:not([disabled]):not(.disabled):active, .btn-color5:not([disabled]):not(.disabled).active, .show>.btn-color5.dropdown-toggle.active, .btn-color5.active.focus { color: white !important; background-color: var(--color5xl) !important; } /* color5 HOVER */ .btn-color5:hover, .btn-color5 a:hover, a.btn-color5:hover, .btn.btn-color5:hover, .btn-color5:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-color5:hover, .show>.btn-color5.dropdown-toggle { color: white !important; background-color: var(--color5xl) !important; } /* ALL Outline Buttons */ .btn-outline-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-footer, .btn-outline-color1, .btn-outline-color2, .btn-outline-color3, .btn-outline-color4, .btn-outline-color5, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-light, .btn-outline-light2 { text-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;outline: 0 !important;background-image: none !important; } .btn-outline-default:active, .btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-footer:active, .btn-outline-color1:active, .btn-outline-color2:active, .btn-outline-color3:active, .btn-outline-color4:active, .btn-outline-color5:active, .btn-outline-info:active, .btn-outline-success:active, .btn-outline-warning:active, .btn-outline-danger:active, .btn-outline-light:active, .btn-outline-light2:active { -webkit-box-shadow: none !important;box-shadow: none !important; } /* ALL Outline Buttons */ .btn-outline-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-footer, .btn-outline-color1, .btn-outline-color2, .btn-outline-color3, .btn-outline-color4, .btn-outline-color5, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-light, .btn-outline-light2 { text-shadow: none; background-image: none; background-repeat: repeat-x; border-color: transparent; filter: none; color: var(--PrimaryButtonColor) !important; background-color: white !important; border: 2px solid var(--PrimaryButtonColor) !important; } .btn-outline-light, .btn-outline-light2 { text-shadow: none; background-image: none; background-repeat: repeat-x; border-color: transparent; filter: none; color: white !important; background-color: transparent !important; border: 2px solid white !important; } /* Button Outline LINK */ .btn-outline-default a:link, a.btn-outline-default, a.btn-outline-info:default, .btn-outline-default a, .btn-outline-primary a:link, a.btn-outline-primary, a.btn-outline-primary:link, .btn-outline-primary a, .btn-outline-secondary a:link, a.btn-outline-secondary, a.btn-outline-secondary:link, .btn-outline-secondary a, .btn-outline-color1 a:link, a.btn-outline-color1, a.btn-outline-color1:link, .btn-outline-color1 a, .btn-outline-color2 a:link, a.btn-outline-color2, a.btn-outline-color2:link, .btn-outline-color2 a, .btn-outline-color3 a:link, a.btn-outline-color3, a.btn-outline-color3:link, .btn-outline-color3 a, .btn-outline-color4 a:link, a.btn-outline-color4, a.btn-outline-color4:link, .btn-outline-color4 a, .btn-outline-color5 a:link, a.btn-outline-color5, a.btn-outline-color5:link, .btn-outline-color5 a, .btn-outline-info a:link, a.btn-outline-info, a.btn-outline-info:link, .btn-outline-info a, .btn-outline-success a:link, a.btn-outline-success, a.btn-outline-success:link, .btn-outline-success a, .btn-outline-warning a:link, a.btn-outline-warning, a.btn-outline-warning:link, .btn-outline-warning a, .btn-outline-danger a:link, a.btn-outline-danger, a.btn-outline-danger:link, .btn-outline-danger a, .btn-outline-footer a:link, a.btn-outline-footer, a.btn-outline-footer:link, .btn-outline-footer a { color: var(--PrimaryButtonColor) ; } .btn-outline-light a:link, a.btn-outline-light, a.btn-outline-light:link, .btn-outline-light a, .btn-outline-light2 a:link, a.btn-outline-light2, a.btn-outline-light2:link, .btn-outline-light2 a { color: white; } /* Info Outline Button . dodgerblue ===================*/ .btn-outline-info, .btn-outline-info:not([disabled]), .btn.btn-outline-info, .btn-outline-info.focus { color: dodgerblue !important; background-color: white !important; border: 2px solid dodgerblue !important; } .btn-outline-info.focus {background-color: #4da6ff !important;} /* Info Outline ACTIVE */ .btn-outline-info:active, .btn-outline-info a:active, a.btn-outline-info:active, .btn.btn-outline-info:active, .btn-outline-info:not([disabled]):not(.disabled):active, .btn-outline-info:not([disabled]):not(.disabled).active, .show>.btn-outline-info.dropdown-toggle, .btn-outline-info.active.focus { color: #40a1ff !important; background-color: white !important; border: 2px solid #40a1ff !important; } /* Info Outline HOVER */ .btn-outline-info:hover, .btn-outline-info a:hover, a.btn-outline-info:hover, .btn.btn-outline-info:hover, .btn-outline-info:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-info:hover, .show>.btn-outline-info.dropdown-toggle { color: white !important; background-color: dodgerblue !important; border: 2px solid dodgerblue !important; } /* Success Outline Button . green ===================*/ .btn-outline-success, .btn-outline-success:not([disabled]), .btn.btn-outline-success, .btn-outline-success.focus { color: green !important; background-color: white !important; border: 2px solid green !important; } .btn-outline-success.focus {background-color: #039303 !important;} /* Success Outline ACTIVE */ .btn-outline-success:active, .btn-outline-success a:active, a.btn-outline-success:active, .btn.btn-outline-success:active, .btn-outline-success:not([disabled]):not(.disabled):active, .btn-outline-success:not([disabled]):not(.disabled).active, .show>.btn-outline-success.dropdown-toggle.active, .btn-outline-success.active.focus { color: #039303 !important; background-color: white !important; border: 2px solid #039303 !important; } /* Success Outline HOVER */ .btn-outline-success:hover, .btn-outline-success a:hover, a.btn-outline-success:hover, .btn.btn-outline-success:hover, .btn-outline-success:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-success:hover, .show>.btn-outline-success.dropdown-toggle { color: white !important; background-color: green !important; border: 2px solid green !important; } /* Warning Outline Button . gold ===================*/ .btn-outline-warning, .btn-outline-warning:not([disabled]), .show>.btn-outline-warning.dropdown-toggle, .btn.btn-outline-warning, .btn-outline-warning.focus { color: gold !important; background-color: white !important; border: 2px solid gold !important; } .btn-outline-warning.focus {background-color: #ccad00 !important;} /* Warning Outline ACTIVE */ .btn-outline-warning:active, .btn-outline-warning a:active, a.btn-outline-warning:active, .btn.btn-outline-warning:active, .btn-outline-warning:not([disabled]):not(.disabled):active, .btn-outline-warning:not([disabled]):not(.disabled).active, .show>.btn-outline-warning.dropdown-toggle.active, .btn-outline-warning.active.focus { color: #ccad00 !important; background-color: white !important; border: 2px solid #ccad00 !important; } /* Warning Outline HOVER */ .btn-outline-warning:hover, .btn-outline-warning a:hover, a.btn-outline-warning:hover, .btn.btn-outline-warning:hover, .btn-outline-warning:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-warning:hover, .show>.btn-outline-warning.dropdown-toggle { color: white !important; background-color: gold !important; border: 2px solid gold !important; } /* Danger Outline Button . red ===================*/ .btn-outline-danger, .btn-outline-danger:not([disabled]), .show>.btn-outline-danger.dropdown-toggle, .btn.btn-outline-danger, .btn-outline-danger.focus { color: #e60000 !important; background-color: white !important; border: 2px solid #e60000 !important; } .btn-outline-danger.focus {background-color: red !important;} /* Danger Outline ACTIVE */ .btn-outline-danger:active, .btn-outline-danger a:active, a.btn-outline-danger:active, .btn.btn-outline-danger:active, .btn-outline-danger:not([disabled]):not(.disabled):active, .btn-outline-danger:not([disabled]):not(.disabled).active, .show>.btn-outline-danger.dropdown-toggle.active, .btn-outline-danger.active.focus { color: red !important; background-color: white !important; border: 2px solid red !important; } /* Danger Outline HOVER */ .btn-outline-danger:hover, .btn-outline-danger a:hover, a.btn-outline-danger:hover, .btn.btn-outline-danger:hover, .btn-outline-danger:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-danger:hover, .show>.btn-outline-danger.dropdown-toggle { color: white !important; background-color: red !important; border: 2px solid red !important; } /* Light Outline Button . reverse white ===================*/ .btn-outline-light, .btn-outline-light:not([disabled]), .show>.btn-outline-light.dropdown-toggle, .btn.btn-outline-light, .btn-outline-light.focus { color: white !important; background-color: transparent !important; border: 2px solid white !important; } .btn-outline-light.focus {background-color: white !important;color: var(--color1l);} /* Light Outline ACTIVE */ .btn-outline-light:active, .btn-outline-light a:active, a.btn-outline-light:active, .btn.btn-outline-light:active, .btn-outline-light:not([disabled]):not(.disabled):active, .btn-outline-light:not([disabled]):not(.disabled).active, .show>.btn-outline-light.dropdown-toggle.active, .btn-outline-light.active.focus { color: white !important; background-color: var(--color1xl) !important; border: 2px solid white !important; } /* Light Outline HOVER */ .btn-outline-light:hover, .btn-outline-light a:hover, a.btn-outline-light:hover, .btn.btn-outline-light:hover, .btn-outline-light:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-light:hover, .show>.btn-outline-light.dropdown-toggle { color: white !important; background-color: var(--color1) !important; border: 2px solid white !important; } /* Light Button Color2 . reverse white ===================*/ .btn-outline-light2, .btn-outline-light2:not([disabled]), .show>.btn-outline-light2.dropdown-toggle, .btn.btn-outline-light2, .btn-outline-light2.focus { color: white !important; background-color: transparent !important; border: 2px solid white !important; } .btn-outline-light2.focus {background-color: white !important;color: var(--color2l);} /* Light2 Outline ACTIVE */ .btn-outline-light2:active, .btn-outline-light2 a:active, a.btn-outline-light2:active, .btn.btn-outline-light2:active, .btn-outline-light2:not([disabled]):not(.disabled):active, .btn-outline-light2:not([disabled]):not(.disabled).active, .show>.btn-outline-light2.dropdown-toggle.active, .btn-outline-light2.active.focus { color: white !important; background-color: transparent !important; border: 2px solid white !important; } /* Light2 HOVER */ .btn-outline-light2:hover, .btn-outline-light2 a:hover, a.btn-outline-light2:hover, .btn.btn-outline-light2:hover, .btn-outline-light2:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-light2:hover, .show>.btn-outline-light2.dropdown-toggle { color: white !important; background-color: var(--color2) !important; border: 2px solid white !important; } /* PRIMARY (default) Button . color1 ===================*/ .btn-outline-primary, .btn-outline-primary:not([disabled]), .show>.btn-outline-primary.dropdown-toggle, .btn.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-default, .btn-outline-color1, .btn-outline-color1:not([disabled]), .show>.btn-outline-color1.dropdown-toggle, .btn.btn-outline-color1, .btn-outline-color1.focus, .btn-outline-default, .btn-outline-default:not([disabled]), .show>.btn-outline-default.dropdown-toggle, .btn.btn-outline-default, .btn-outline-default.focus { color: var(--PrimaryButtonColor) !important; background-color: white !important; border: 2px solid var(--PrimaryButtonColor) !important; } /* Primary Outline VISITED */ .btn-outline-primary:visited, .btn-outline-primary a:visited, a.btn-outline-primary:visited, .btn.btn-outline-primary:visited, .btn-outline-primary:not([disabled]):not(.disabled):visited, .btn-outline-primary:not([disabled]):not(.disabled).visited, .show>.btn-outline-primary.dropdown-toggle.visited, .btn-outline-primary.visited.focus, .btn-outline-color1:visited, .btn-outline-color1 a:visited, a.btn-outline-color1:visited, .btn.btn-outline-color1:visited, .btn-outline-color1:not([disabled]):not(.disabled):visited, .btn-outline-color1:not([disabled]):not(.disabled).visited, .show>.btn-outline-color1.dropdown-toggle.visited, .btn-outline-color1.visited.focus, .btn-outline-default:visited, .btn-outline-default a:visited, a.btn-outline-default:visited, .btn.btn-outline-default:visited, .btn-outline-default:not([disabled]):not(.disabled):visited, .btn-outline-default:not([disabled]):not(.disabled).visited, .show>.btn-outline-default.dropdown-toggle.visited, .btn-outline-default.visited.focus { color: var(--PrimaryButtonVisitedColor) !important; background-color: white !important; border: 2px solid var(--PrimaryButtonVisitedColor) !important; } /* Primary Outline ACTIVE */ .btn-outline-primary:active, .btn-outline-primary a:active, a.btn-outline-primary:active, .btn.btn-outline-primary:active, .btn-outline-primary:not([disabled]):not(.disabled):active, .btn-outline-primary:not([disabled]):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle.active, .btn-outline-primary.active.focus, .btn-outline-color1:active, .btn-outline-color1 a:active, a.btn-outline-color1:active, .btn.btn-outline-color1:active, .btn-outline-color1:not([disabled]):not(.disabled):active, .btn-outline-color1:not([disabled]):not(.disabled).active, .show>.btn-outline-color1.dropdown-toggle.active, .btn-outline-color1.active.focus, .btn-outline-default:active, .btn-outline-default a:active, a.btn-outline-default:active, .btn.btn-outline-default:active, .btn-outline-default:not([disabled]):not(.disabled):active, .btn-outline-default:not([disabled]):not(.disabled).active, .show>.btn-outline-default.dropdown-toggle.active, .btn-outline-default.active.focus { color: var(--PrimaryButtonActiveColor) !important; background-color: white !important; border: 2px solid var(--PrimaryButtonActiveColor) !important; } /* Primary Outline HOVER */ .btn-outline-primary:hover, .btn-outline-primary a:hover, a.btn-outline-primary:hover, .btn.btn-outline-primary:hover, .btn-outline-primary:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-primary:hover, .show>.btn-outline-primary.dropdown-toggle, .btn-outline-color1:hover, .btn-outline-color1 a:hover, a.btn-outline-color1:hover, .btn.btn-outline-color1:hover, .btn-outline-color1:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-color1:hover, .show>.btn-outline-color1.dropdown-toggle, .btn-outline-default:hover, .btn-outline-default a:hover, a.btn-outline-default:hover, .btn.btn-outline-default:hover, .btn-outline-default:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-default:hover, .show>.btn-outline-default.dropdown-toggle { color: white !important; background-color: var(--PrimaryButtonColor) !important; border: 2px solid var(--PrimaryButtonColor) !important; } /* SECONDARY Outline Button . color2 ===================*/ .btn-outline-secondary, .btn-outline-secondary:not([disabled]), .show>.btn-outline-secondary.dropdown-toggle, .btn.btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-color2, .btn-outline-color2:not([disabled]), .show>.btn-outline-color2.dropdown-toggle, .btn.btn-outline-color2, .btn-outline-color2.focus { color: var(--SecondaryButtonColor) !important; background-color: white !important; border: 2px solid var(--SecondaryButtonColor) !important; } .btn-outline-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* Secondary Outline VISITED */ .btn-outline-secondary:visited, .btn-outline-secondary a:visited, a.btn-outline-secondary:visited, .btn.btn-outline-secondary:visited, .btn-outline-secondary:not([disabled]):not(.disabled):visited, .btn-outline-secondary:not([disabled]):not(.disabled).visited, .show>.btn-outline-secondary.dropdown-toggle.visited, .btn-outline-secondary.visited.focus, .btn-outline-color2:visited, .btn-outline-color2 a:visited, a.btn-outline-color2:visited, .btn.btn-outline-color2:visited, .btn-outline-color2:not([disabled]):not(.disabled):visited, .btn-outline-color2:not([disabled]):not(.disabled).visited, .show>.btn-outline-color2.dropdown-toggle.visited, .btn-outline-color2.visited.focus { color: var(--SecondaryButtonVisitedColor) !important; background-color: white !important; border: 2px solid var(--SecondaryButtonVisitedColor) !important; } /* Secondary Outline ACTIVE */ .btn-outline-secondary:active, .btn-outline-secondary a:active, a.btn-outline-secondary:active, .btn.btn-outline-secondary:active, .btn-outline-secondary:not([disabled]):not(.disabled):active, .btn-outline-secondary:not([disabled]):not(.disabled).active, .show>.btn-outline-secondary.dropdown-toggle.active, .btn-outline-secondary.active.focus, .btn-outline-color2:active, .btn-outline-color2 a:active, a.btn-outline-color2:active, .btn.btn-outline-color2:active, .btn-outline-color2:not([disabled]):not(.disabled):active, .btn-outline-color2:not([disabled]):not(.disabled).active, .show>.btn-outline-color2.dropdown-toggle.active, .btn-outline-color2.active.focus { color: var(--SecondaryButtonActiveColor) !important; background-color: white !important; border: 2px solid var(--SecondaryButtonActiveColor) !important; } /* Secondary Outline HOVER */ .btn-outline-secondary:hover, .btn-outline-secondary a:hover, a.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover, .btn-outline-secondary:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-secondary:hover, .show>.btn-outline-secondary.dropdown-toggle, .btn-outline-color2:hover, .btn-outline-color2 a:hover, a.btn-outline-color2:hover, .btn.btn-outline-color2:hover, .btn-outline-color2:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-color2:hover, .show>.btn-outline-color2.dropdown-toggle { color: white !important; background-color: var(--SecondaryButtonColor) !important; border: 2px solid var(--SecondaryButtonColor) !important; } /* ADDITIONAL Outline Button . color3 ===================*/ .btn-outline-color3, .btn-outline-color3:not([disabled]), .show>.btn-outline-color3.dropdown-toggle, .btn.btn-outline-color3, .btn-outline-color3.focus { color: var(--color3) !important; background-color: white !important; border: 2px solid var(--color3) !important; } .btn-outline-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color3 Outline VISITED */ .btn-outline-color3:visited, .btn-outline-color3 a:visited, a.btn-outline-color3:visited, .btn.btn-outline-color3:visited, .btn-outline-color3:not([disabled]):not(.disabled):visited, .btn-outline-color3:not([disabled]):not(.disabled).visited, .show>.btn-outline-color3.dropdown-toggle.visited, .btn-outline-color3.visited.focus { color: var(--color3) !important; background-color: white !important; border: 2px solid var(--color3) !important; } /* color3 Outline ACTIVE */ .btn-outline-color3:active, .btn-outline-color3 a:active, a.btn-outline-color3:active, .btn.btn-outline-color3:active, .btn-outline-color3:not([disabled]):not(.disabled):active, .btn-outline-color3:not([disabled]):not(.disabled).active, .show>.btn-outline-color3.dropdown-toggle.active, .btn-outline-color3.active.focus { color: var(--color3xl) !important; background-color: white !important; border: 2px solid var(--color3xl) !important; } /* color3 Outline HOVER */ .btn-outline-color3:hover, .btn-outline-color3 a:hover, a.btn-outline-color3:hover, .btn.btn-outline-color3:hover, .btn-outline-color3:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-color3:hover, .show>.btn-outline-color3.dropdown-toggle { color: white !important; background-color: var(--color3) !important; border: 2px solid var(--color3) !important; } /* ADDITIONAL Outline Button . color4 ===================*/ .btn-outline-color4, .btn-outline-color4:not([disabled]), .show>.btn-outline-color4.dropdown-toggle, .btn.btn-outline-color4, .btn-outline-color4.focus { color: var(--color4) !important; background-color: white !important; border: 2px solid var(--color4) !important; } .btn-outline-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color4 Outline VISITED */ .btn-outline-color4:visited, .btn-outline-color4 a:visited, a.btn-outline-color4:visited, .btn.btn-outline-color4:visited, .btn-outline-color4:not([disabled]):not(.disabled):visited, .btn-outline-color4:not([disabled]):not(.disabled).visited, .show>.btn-outline-color4.dropdown-toggle.visited, .btn-outline-color4.visited.focus { color: var(--color4) !important; background-color: white !important; border: 2px solid var(--color4) !important; } /* color4 Outline ACTIVE */ .btn-outline-color4:active, .btn-outline-color4 a:active, a.btn-outline-color4:active, .btn.btn-outline-color4:active, .btn-outline-color4:not([disabled]):not(.disabled):active, .btn-outline-color4:not([disabled]):not(.disabled).active, .show>.btn-outline-color4.dropdown-toggle.active, .btn-outline-color4.active.focus { color: var(--color4xl) !important; background-color: white !important; border: 2px solid var(--color4xl) !important; } /* color4 Outline HOVER */ .btn-outline-color4:hover, .btn-outline-color4 a:hover, a.btn-outline-color4:hover, .btn.btn-outline-color4:hover, .btn-outline-color4:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-color4:hover, .show>.btn-outline-color4.dropdown-toggle { color: white !important; background-color: var(--color4) !important; border: 2px solid var(--color4) !important; } /* ADDITIONAL Outline Button . color5 ===================*/ .btn-outline-color5, .btn-outline-color5:not([disabled]), .show>.btn-outline-color5.dropdown-toggle, .btn.btn-outline-color5, .btn-outline-color5.focus { color: var(--color5) !important; background-color: white !important; border: 2px solid var(--color5) !important; } .btn-outline-secondary.focus { background-color: var(--SecondaryButtonColor) !important;} /* color5 Outline VISITED */ .btn-outline-color5:visited, .btn-outline-color5 a:visited, a.btn-outline-color5:visited, .btn.btn-outline-color5:visited, .btn-outline-color5:not([disabled]):not(.disabled):visited, .btn-outline-color5:not([disabled]):not(.disabled).visited, .show>.btn-outline-color5.dropdown-toggle.visited, .btn-outline-color5.visited.focus { color: var(--color5) !important; background-color: white !important; border: 2px solid var(--color5) !important; } /* color5 Outline ACTIVE */ .btn-outline-color5:active, .btn-outline-color5 a:active, a.btn-outline-color5:active, .btn.btn-outline-color5:active, .btn-outline-color5:not([disabled]):not(.disabled):active, .btn-outline-color5:not([disabled]):not(.disabled).active, .show>.btn-outline-color5.dropdown-toggle.active, .btn-outline-color5.active.focus { color: var(--color5xl) !important; background-color: white !important; border: 2px solid var(--color5xl) !important; } /* color5 Outline HOVER */ .btn-outline-color5:hover, .btn-outline-color5 a:hover, a.btn-outline-color5:hover, .btn.btn-outline-color5:hover, .btn-outline-color5:not([disabled]):not(.disabled):hover, .open>.dropdown-toggle.btn-outline-color5:hover, .show>.btn-outline-color5.dropdown-toggle { color: white !important; background-color: var(--color5) !important; border: 2px solid var(--color5) !important; } /* =============================== BUTTON GROUP =============================== */ .btn-group, .btn-group-vertical { box-shadow: none !important; } .d-md-inline-table { display: inline-table !important; } .btn-group button, .btn-group .btn { margin: 0; margin: 0px -5px 5px 0px !important; min-width: min-content; } .btn-group button.btn-xs { font-size: 75% !important; padding: 10px 15px; margin: 0px -5px 5px 0px !important; } #filters.btn-group, #sorts.btn-group, .menuPage .btn-individual, #filters.btn-individual, #sorts.btn-individual { font-size: 90% !important; margin-right: 10px; } #filters.btn-group>.btn:not(:first-child), #filters.btn-group>.btn-group:not(:first-child) { margin-left: -.375rem; } .btn-group button.btn-xl, .btn-group button.btn-lg, .btn-group button.btn-md, .btn-group button.btn-sm, .btn-group button.btn-xs { margin: 0; margin: 0px -5px 5px 0px !important; } .btn-individual button.btn-xs, .btn-individual button.btn-sm, .btn-individual button.btn-md, .btn-individual button.btn-lg, .btn-individual button.btn-xl, .btn-individual .btn-xs, .btn-individual .btn-sm, .btn-individual .btn-md, .btn-individual .btn-lg, .btn-individual .btn-xl{ margin: 0 1px 0 0 !important; } /* XS */ #filters .btn.btn-xs, #filters .btn-xs, #filters .btn-xs-2x, #sorts .btn.btn-xs, #sorts .btn-xs, #sorts .btn-xs-2x, .btn-individual button.btn-xs, .btn-individual .btn-xs, .btn-group button.btn-xs { font-size: 80% !important; padding: 10px 18px !important; } /* SM */ #filters .btn.btn-sm, #filters .btn-sm, #filters .btn-sm-2x, #sorts .btn.btn-sm, #sorts .btn-sm, #sorts .btn-sm-2x, .btn-individual button.btn-sm, .btn-individual .btn-sm, .btn-group button.btn-sm { font-size: 85% !important; padding: 10px 22px !important; } /* MD */ #filters .btn.btn-md, #filters .btn-md, #filters .btn-md-2x, #sorts .btn.btn-md, #sorts .btn-md, #sorts .btn-md-2x, .btn-individual button.btn-md, .btn-individual .btn-md, .btn-group button.btn-md { min-width: 10px; width: inherit; max-width: inherit; font-size: 90% !important; padding: 10px 26px !important; } /* LG */ #filters .btn.btn-lg, #filters .btn-lg, #filters .btn-lg-2x, #sorts .btn.btn-lg, #sorts .btn-lg, #sorts .btn-lg-2x, .btn-individual button.btn-lg, .btn-individual .btn-lg, .btn-group button.btn-lg { min-width: 10px; width: inherit; max-width: inherit; font-size: 100% !important; padding: 10px 30px !important; } /* XL */ #filters .btn.btn-xl, #filters .btn-xl, #filters .btn-xl-2x, #sorts .btn.btn-xl, #sorts .btn-xl, #sorts .btn-xl-2x, .btn-individual button.btn-xl, .btn-individual .btn-xl, .btn-group button.btn-xl { min-width: 10px; width: inherit; max-width: inherit; font-size: 110% !important; padding: 10px 30px !important; } @media (max-width: 768px) /* navbar-expand-sm */ { /* XS */ #filters .btn.btn-xs, #filters .btn-xs, #filters .btn-xs-2x, #sorts .btn.btn-xs, #sorts .btn-xs, #sorts .btn-xs-2x, .btn-individual button.btn-xs, .btn-individual .btn-xs, .btn-group button.btn-xs { font-size: 70% !important; padding: 12px 8px !important; } /* SM */ #filters .btn.btn-sm, #filters .btn-sm, #filters .btn-sm-2x, #sorts .btn.btn-sm, #sorts .btn-sm, #sorts .btn-sm-2x, .btn-individual button.btn-sm, .btn-individual .btn-sm, .btn-group button.btn-sm { font-size: 80% !important; padding: 14px 8px !important; } /* MD */ #filters .btn.btn-md, #filters .btn-md, #filters .btn-md-2x, #sorts .btn.btn-md, #sorts .btn-md, #sorts .btn-md-2x, .btn-individual button.btn-md, .btn-individual .btn-md, .btn-group button.btn-md { min-width: 10px; width: inherit; max-width: inherit; font-size: 85% !important; padding: 14px 10px!important; } /* LG */ #filters .btn.btn-lg, #filters .btn-lg, #filters .btn-lg-2x, #sorts .btn.btn-lg, #sorts .btn-lg, #sorts .btn-lg-2x, .btn-individual button.btn-lg, .btn-individual .btn-lg, .btn-group button.btn-lg { min-width: 10px; width: inherit; max-width: inherit; font-size: 90% !important; padding: 14px 12px !important; } /* XL */ #filters .btn.btn-xl, #filters .btn-xl, #filters .btn-xl-2x, #sorts .btn.btn-xl, #sorts .btn-xl, #sorts .btn-xl-2x, .btn-individual button.btn-xl, .btn-individual .btn-xl, .btn-group button.btn-xl { min-width: 10px; width: inherit; max-width: inherit; font-size: 100% !important; padding: 14px 14px !important; } } /* =============================== LIST =============================== */ .overlayImg { position: sticky; bottom: 0; left: 0; right: 0; height: 100%; /*width: 100%;*/ transition: .5s ease; z-index: 10 !important; } /* =============================== CAROUSEL =============================== */ .carousel-control-next-icon:after { content: ""; } .carousel-control-prev-icon:after { content: ""; } /* =============================== CARDS =============================== */ /* 3rd Party */ .team-slider .card-title { font-size: 110%; text-transform: uppercase; } /*::::::::: Adjustments::::::::::::*/ @media (max-width: 768px) /* navbar-expand-sm */ { .xs .cardList h5, .xs .cardList .h5 {} .xs .cardList h4, .xs .cardList .h4 {} } /*::::::::: cardBlock ::::::::::::*/ .cardBlock { display: block; /* -moz-animation-name: fadeIn; -webkit-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; animation-timing-function: ease-in-out; */ /* background-color: lightyellow !important; */ -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .xlr .cardBlock-item, .xll .cardBlock-item { /*background-color: lightblue !important;*/ padding: 15px 40px 20px 40px; } .xlr .cardBlock-content, .xll .cardBlock-content { /*background-color: lightpink !important;*/ width: 80%; } .xl .cardBlock-item { /* padding: 0px; */ } @media (max-width: 768px) /* navbar-expand-sm */ { .xlr .cardBlock-item, .xll .cardBlock-item { /* padding: 30px 0px; */ padding: 15px 30px 20px 30px; } .xlr .cardBlock-content, .xll .cardBlock-content { width: 85%; } .xl .cardBlock-item { padding: 30px 20px; } } /*CONTENT*/ .cardBlock.xl .cardBlock-content { width: 80%; } .cardBlock.lg .cardBlock-content, .cardBlock.md .cardBlock-content { width: 90%; } .cardBlock.xs .cardBlock-content, .cardBlock.sm .cardBlock-content { width: 100%; } .cardBlock.xl.v .cardBlock-content, .cardBlock.lg.v .cardBlock-content, .cardBlock.md.v .cardBlock-content, .cardBlock.sm.v .cardBlock-content, .cardBlock.xs.v .cardBlock-content { width: 100%; padding: 5px 0px; } .cardBlock.xl.v .cardBlock-content, .cardBlock.lg.v .cardBlock-content { padding: 30px 0px; } @media (max-width: 768px) /* navbar-expand-sm */ { .cardBlock.xl .cardBlock-content { width: 90%; } .cardBlock.lg .cardBlock-content, .cardBlock.md .cardBlock-content { width: 95%; } .cardBlock.sm .cardBlock-content, .cardBlock.xs .cardBlock-content { width: 100%; } } @media (max-width: 576px) /* navbar-expand-xs */ { .cardBlock.xl .cardBlock-content { width: 90%; } .cardBlock.lg .cardBlock-content, .cardBlock.md .cardBlock-content { width: 95%; } .cardBlock.sm .cardBlock-content, .cardBlock.xs .cardBlock-content { width: 100%; } } @media (min-width: 1200px) /* navbar-expand-xs */ { /*CONTENT*/ .xl.cardBlock .cardBlock-content .h1, .xll .cardBlock .cardBlock-content .h1, .xlr .cardBlock .cardBlock-content .h1 { font-size: 375%; } .xl.cardBlock .cardBlock-content .h3, .xll .cardBlock .cardBlock-content .h3, .xlr .cardBlock .cardBlock-content .h3 { font-size: 190%; } .cardBlock.xl .cardBlock-content h1, .cardBlock.xl .cardBlock-content .h1 { font-size: 400%; } } @media (min-width: 769px) /* navbar-expand-xs */ { /*CONTENT*/ .cardBlock.xl .cardBlock-content h1 { font-size: 360%; } .xl.cardBlock .cardBlock-content .h1, .xll .cardBlock .cardBlock-content .h1, .xlr .cardBlock .cardBlock-content .h1 { font-size: 325%; } .xl.cardBlock .cardBlock-content .h3, .xll .cardBlock .cardBlock-content .h3, .xlr .cardBlock .cardBlock-content .h3 { font-size: 175%; } } @media (max-width: 768px) /* navbar-expand-xs */ { /*CONTENT*/ .cardBlock.xl .cardBlock-content h1, .cardBlock.xl .cardBlock-content .h1, .xl.cardBlock .cardBlock-content .h1, .xll .cardBlock .cardBlock-content .h1, .xlr .cardBlock .cardBlock-content .h1 { font-size: 250%; } .cardBlock.xl .cardBlock-content .h3, .xl.cardBlock .cardBlock-content .h3, .xll .cardBlock .cardBlock-content .h3, .xlr .cardBlock .cardBlock-content .h3 { font-size: 160%; } .cardBlock.xl .cardBlock-content .head2 { font-size: 175%; } .cardBlock.xl .cardBlock-content .head3 { font-size: 150%; } .cardBlock.xl .cardBlock-content .head4 { font-size: 120%; } .cardBlock.xl .cardBlock-content .head5 { font-size: 110%; } .cardBlock.xl .cardBlock-content .head6 { font-size: 105%; } .cardBlock.lg .cardBlock-content .h2 { font-size: 260%; } .cardBlock.lg .cardBlock-content .h4 { font-size: 160%; } .cardBlock.md .cardBlock-content .h3 { font-size: 230%; } .cardBlock.md .cardBlock-content .h5 { font-size: 130%; } .cardBlock.sm .cardBlock-content .h4 { font-size: 210%; } .cardBlock.sm .cardBlock-content .h6 { font-size: 120%; } .cardBlock.xs .cardBlock-content .h6 { font-size: 130%; } } .cardBlock-wrapper { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: 0; border: 0px solid #fff; background: transparent; overflow: hidden; } .cardBlock-viewport, .cardBlock-wrapper { position: relative; width: 100%; top: 0; left: 0; } .cardBlock-wrapper .cardBlock-viewport { border: none !important; /*background-color: black !important;*/ } .cardBlock .bgHolder.parallax { /* background-attachment: fixed !important; /* sticky bg, parallax */ } .cover.Center { background-position: center center; } .cover.Left { background-position: left center; } .cover.Right { background-position: right center; } .cover.Top { background-position: center top; } .cover.Bottom { background-position: center bottom; } .cover.Left-Top { background-position: left top; } .cover.Left-Bottom { background-position: left bottom; } .cover.Right-Top { background-position: right top; } .cover.Right-Bottom { background-position: right bottom; } /* COVER (image) */ .cardBlock .cover.bgHolder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; -webkit-transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* CONTAIN (logo) */ .cardBlock .contain.bgHolder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; -webkit-background-size: contain !important; -moz-background-size: contain !important; -o-background-size: contain !important; background-size: contain !important; max-width: 100%; } /* Ken Burns simulate */ .cardBlock .cover.bgHolder.kenburns, .cardBlock .contain.bgHolder.kenburns { -webkit-transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .cardBlock:hover .cover.bgHolder.kenburns, .cardBlock:hover .contain.bgHolder.kenburns { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } /*.cardBlock .cardItem img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-transition: -webkit-transform 10s; transition: transform 10s; }*/ .cardBlock-item { padding: 30px 30px; overflow: hidden; display: block; position: relative; } .cardBlock-item:hover .overlay { opacity: .5 !important; } .cardBlock-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0.25; transition: .5s ease; background-color: black; } .cardContain { position: relative; width: 100%; } .list-hit a .overlay, .overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0.3; transition: .5s ease; background-color: black !important; } .list-hit a:hover .overlay /*a:hover .overlay*/ { opacity: 0.5; } .cardContain:hover .overlay { opacity: .65; height: 100%; bottom: 0; left: 0; right: 0; } .cardText-inner { color: white; font-size: 120%; position: absolute; bottom: 5%; left: 5%; text-align: left; } .cardText-inner:hover { opacity: 1; } .imgLabel { font-size: 80%; line-height: 105%; margin-top: 0px; text-transform: var(--tagTextTransform) !important; background-color: rgb(255, 255, 255, 0.4); padding: 12px 5px 10px 5px; margin: 0px; text-align: center; position: absolute; width: 100%; min-height: 35px; transition: background-color 300ms ease-out; z-index: 5; } .label-sale, .label-sold { font-size: 120%; background-color: rgb(0,128,0,.6) !important; padding: 5px 10px 6px 10px; min-height: 40px; color: white !important; } .imgLabel.Label-top {top: 0;} .imgLabel.Label-bottom {bottom: 0;} .label-sold { background-color: rgb(0,0,0,.6) !important; background-color: rgb(var(--color1raw),.6) !important; } .label-sale, .label-production, .label-available, .label-sold { bottom: 0; color: white; font-size: 80%; line-height: 105%; margin-top: 0px; text-transform: var(--tagTextTransform) !important; background-color: rgb(255, 255, 255, 0.4); padding: 14px 5px 12px 5px; margin: 0px; text-align: center; position: absolute; width: 100%; min-height: 60px; /* TRANSITION */ transition: background-color 300ms ease-out; z-index: 5; } .label-sale, .label-sold { font-size: 120%; background-color: rgba(0,128,0,.6) !important; padding: 5px 10px 6px 10px; min-height: 50px; color: white !important; } .imgLabel.Label-top {top: 0;} .imgLabel.Label-bottom {bottom: 0;} .Label-bottom.lg {min-height: 100px !important; } /* RED */ .label-sold { background-color: rgba(220,0,21,.6) !important; } /* GREEN */ .label-available, .label-sale { background-color: rgba(0,128,0,.6) !important; z-index: 100; } /* INFO */ .label-production { background-color: rgba(0,191,229,.6) !important; background-color: rgba(115,88,36,.6) !important; } /* RED */ .label-sold { background-color: rgba(220,0,21,.6) !important; } /* RED */ .label-sold { background-color: rgba(220,0,21,.6) !important; } .imgLabel.Label-light { color: #424242; background-color: rgb(255, 255, 255, 0.7); } a:hover .imgLabel.Label-light { color: #424242; background-color: rgb(255, 255, 255, 0.9); transition: background-color 300ms ease; } .imgLabel.Label-dark { color: #EEEEEE; background-color: rgb(0, 0, 0, 0.35); } a:hover .imgLabel.Label-dark { color: #EEEEEE; background-color: rgb(0, 0, 0, 0.65); transition: background-color 300ms ease; } .imgLabel.Label-color1 { color: #FFFFFF; background-color: var(--color1f9); } a:hover .imgLabel.Label-color1 { color: #FFFFFF; background-color: var(--color1); transition: background-color 300ms ease; } .imgLabel.Label-color2 { color: #FFFFFF; background-color: var(--color2f9); } a:hover .imgLabel.Label-color2 { color: #FFFFFF; background-color: var(--color2); transition: background-color 300ms ease; } .imgLabel.Label-color3 { color: #FFFFFF; background-color: var(--color3f8); } a:hover .imgLabel.Label-color3 { color: #FFFFFF; background-color: var(--color3); transition: background-color 300ms ease; } /* EXTRA SMALL devices (iPhone Horizontal and smaller) */ @media (max-width: 568px) { /*.imgLabel { font-size: 70%; } */ } .iconFA { /*transform: scale3d(1.1, 1.1, 1); */ } /* IMG HOVER a:hover img, a img:hover { transform: scale3d(1.1, 1.1, 1); } */ /* i */ .list-hit a i, .list-hit a:link i, .list-hit a .nolink i, .list-hit a .nolink a:link i, .list-hit a svg, .list-hit a:link svg, .list-hit a .nolink svg, .list-hit a .nolink a:link svg .list-hit a .nolink { transition: all 300ms ease-out; transform: scale3d(1, 1, 1); } /* i HOVER */ .list-hit a:hover i, .list-hit a i:hover, .list-hit a:hover svg, .list-hit a svg:hover, .list-hit a:hover, .list-nohit a:hover i, .list-nohit a i:hover, .list-nohit a:hover svg, .list-nohit a svg:hover, .list-hnohitit a:hover{ transition: all 300ms ease-out; transform: scale3d(1.15, 1.15, 1.15); } .list-hit .d-flex a:hover i, .list-hit .d-flex a i:hover, .list-hit .d-flex a:hover svg, .list-hit .d-flex a svg:hover, .list-hit .d-flex a:hover, .list-nohit .d-flex a:hover i, .list-nohit .d-flex a i:hover, .list-nohit .d-flex a:hover svg, .list-nohit .d-flex a svg:hover, .list-nohit .d-flex a:hover{ transform: scale3d(1, 1, 1); } .list-hit a .nolink, .list-nohit a .nolink { transition: all 300ms ease-out; transform: none !important; color: inherit; } /* IMG HOVER */ a:hover img, a img:hover { transform: scale3d(1.1, 1.1, 1); } /* IMG HOVER - MIN */ a:hover img.hover-min, a img.hover-min:hover, a:hover i.hover-min, a i.hover-min:hover, a:hover svg.hover-min, a svg.hover-min:hover { transform: scale3d(1.025, 1.025, 1); } /* IMG HOVER - NO */ a:hover img.hover-no, a img.hover-no:hover, a:hover i.hover-no, a i.hover-no:hover, a:hover svg.hover-no, a svg.hover-no:hover{ transform: none !important; color: inherit; } /* IMG CIRCLE */ a img.circle, img.circle { position: absolute; overflow: hidden; top: 50%; left: 50%; transform: scale3d(1.05,1.05,1.05) translate(-47%, -47%) !important; margin: 0; height: 100% !important; } a:hover img.circle { transform: scale3d(1.15,1.15,1.15) translate(-43%, -43%) !important; } a img.circle-logo, img.circle-logo{ position: absolute; overflow: hidden; top: 50%; left: 50%; transform: scale3d(1,1,1) translate(-50%, calc(-50% - 1px)) !important; margin: 0; height: 100% !important; } a:hover img.circle-logo { transform: scale3d(1.1,1.1,1.1) translate(-46%, calc(-46% - 1px)) !important; } a i.iconFA, a svg.iconFA, i.iconFA, svg.iconFA { position: absolute; top: 50%; left: 50%; transform: scale3d(1,1,1) translate(-50%, -50%) !important; margin: 0; /*height: 100% !important; */ } a:hover i.iconFA, a:hover svg.iconFA { transform: scale3d(1.1,1.1,1.1) translate(-46%, -46%) !important; } h4.FilterSort { font-size: 105%; margin-bottom: 5px; } h4.FilterSortSub { font-size: 80%; } h5.FilterSortDate { font-size: 120%; line-height: 120%; margin-top: 15px; } /* =============================== ICON . FONTAWESOME =============================== */ .number-circle { position: relative; display: inline-block; width: 110px; /* Adjust size as needed */ height: 120px; /* Adjust size as needed */ line-height: 110px; /* Center the number vertically */ text-align: center; /* Center the number horizontally */ } .number-circle .faIcon { font-size: 110px; /* Adjust circle size */ } .number-circle .faIconAdj { font-size: 110px; /* Adjust circle size */ } .number-circle .font5 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:65px; /* Adjust number size */ color: white; /* Number color */ } .number-circle-sm { position: relative; display: inline-block; width: 50px; /* Adjust size as needed */ height: 55px; /* Adjust size as needed */ line-height: 50px; /* Center the number vertically */ text-align: center; /* Center the number horizontally */ color: var(--color1); } .number-circle-sm .faIcon { font-size: 50px; /* Adjust circle size */ } .number-circle-sm .faIconAdj { font-size: 50px; /* Adjust circle size */ } .number-circle-sm .font5 { position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); font-size:35px; /* Adjust number size */ color: white; /* Number color */ } /* ============================================================== STYLES . TLC 3.0 ============================================================== */ /* =============================== MEDIA SETTINGS =============================== */ /* iPad */ @media screen and (max-device-aspect-ratio: 3/4) and (orientation:portrait) { body:before {height: calc(100vw * 1.333 + 150px );} } @media screen and (max-device-aspect-ratio: 3/4) and (orientation:landscape) { body:before {height: calc(100vw * 0.65 + 150px );} } @media screen and (max-aspect-ratio: 2/3) { body:before {height: calc(100vw * 1.5 + 150px );} } @media screen and (max-aspect-ratio: 10/16) { body:before {height: calc(100vw * 1.6 + 150px );} } @media screen and (max-aspect-ratio: 9/16) { body:before {height: calc(100vw * 1.778 + 150px );} } /* =============================== BODY / HTML STYLES =============================== background:fixed and background:cover don't play nice together on iOS. So background is fixed only on desktops. ADD : body:after to load bg img correctly on iOS */ body, html { /* adding "html" helps reduce white flash when page loads */ font-family: var(--font1); font-size: var(--FontSize); color: var(--FontColor); font-weight: none; line-height: var(--LineHeight); text-align: left; background-color: transparent; height: 100% !important; /* overflow: hidden !important; with 'html overflow: auto, avoids double scrollbar */ } #sticky.bg-Footer { position: sticky !important; top: 100vh !important; z-index: 4001 !important; } #content { min-height: 450px; } #wrapper { overflow: hidden; } section { margin: 0; float:none; clear:both; width:100%; position: relative; padding: 35px 0; } section.xxl {padding: 175px 0;} section.xl {padding: 100px 0;} section.lg {padding: 65px 0;} section, section.md {padding: 35px 0;} section.sm {padding: 20px 0;} section.xs {padding: 10px 0;} section.xxs {padding: 5px 0;} @media (max-width: 768px) /* navbar-expand-sm */ { .section:first-of-type { padding: 0px 0 0 0; } section.xxl {padding: 80px 0;} section.xl {padding: 65px 0;} section.lg {padding: 40px 0;} section, section.md {padding: 25px 0;} section.sm {padding: 20px 0;} section.xs {padding: 15px 0;} section.xxs {padding: 5px 0;} } @media (min-width: 992px) { /*.section {padding: 75px 0 0 0;}*/ } #main { /* min-height: 500px; */ /* background-color: var(--PageBgColor); */ } /* =============================== BACKGROUND =============================== background:fixed and background:cover don't play nice together on iOS. So background is fixed only on desktops. ADD : body:before to load bg img correctly on iOS */ /* BACKGROUND IMAGE 2020*** */ body:before { background-color: var(--PageBgColor); background-image: var(--BgImageAll); background-position: var(--BgImagePositionH, center) var(--BgImagePositionV, center); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: visible; content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -3; } @media (max-width: 576px) /* navbar-expand-xs */ { body:before { background-image: var(--BgImageSm); } } /* =============================== OVERLAY (background, header) =============================== */ /*LINK*/ /* BACKGROUND OVERLAY 2020*** */ .bgOverlay { background-color: var(--BgOverlayColor) !important; opacity: var(--BgOverlayOpacity) !important; position: fixed; width: 100%; height: 100%; z-index: -2 !important; } /* BACKGROUND OVERLAY 2020*** */ .thumbBgOverlay { position: absolute; width: 100%; height: 100%; z-index: -2 !important; } .thumbBgOverlay { transition: opacity 0.3s ease; /* Smooth transition for hover effect */ } .thumbBgOverlay:hover { opacity: green; /* Opacity on hover from Liquid variable */ } /* HEADER OVERLAY (GRADIENT) */ .headerOverlay { position: fixed; width: 100%; height: 0px; z-index: 1990; top: -20px; box-shadow: 0 0px 125px 125px rgba(14,19,22,0.9); box-shadow: 0 -40px 120px 145px rgba(14,19,22,1); } .headerOverlay.scrolled { box-shadow: 0 60px 25px 60px rgba(14,19,22,0.4); } /* GRADIENT creator - https://cssgradient.io background-image: -webkit-linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0)); background-image: -o-linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0)); background-image: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0)); background: rgb(14,19,22); background: linear-gradient(180deg, rgba(14,19,22,.9) 0%, rgba(14,19,22,.6) 55%, rgba(14,19,22,0) 99%); */ /*BACKGROUND IMAGE 2020*** . no scroll iPad */ .header { /*background-color: var(--PageBgColor); */ background-image: var(--BgImageAll); background-position: var(--BgImagePositionH, center) var(--BgImagePositionV, center); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: visible; content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -3; } /* =============================== STRUCTURE =============================== */ /* X-SMALL */ @media (max-width: 576px) /* navbar-expand-xs */ { .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-right: var(--bs-gutter-x,1rem); padding-left: var(--bs-gutter-x,1.25rem); } } /* SMALL */ @media (max-width: 768px) /* navbar-expand-sm */ { } @media (min-width: 576px) /* navbar-expand-sm */ { .container, .container-lg, .container-md, .container-sm, .container-xl, .navbar .container { max-width: 768px; width: 90%; } .navbar .container { max-width: 768px; width: 100%; } } /* MEDIUM */ @media (max-width: 992px) /* navbar-expand-md */ { } @media (min-width: 768px) /* navbar-expand-md */ { .container, .container-lg, .container-md, .container-sm, .container-xl, .navbar .container { max-width: 992px; width: 90%; } } /* LARGE */ @media (max-width: 1200px) /* navbar-expand-lg */ { } @media (min-width: 992px) /* navbar-expand-lg */ { .container, .container-lg, .container-md, .container-sm, .container-xl, .navbar .container { max-width: 1200px; width: 85%; } } /* X-LARGE */ @media (min-width: 1200px) /* navbar-expand-xl */ { .container, .container-lg, .container-md, .container-sm, .container-xl, .navbar .container { max-width: 1350px; width: 80%; } } .mainDrop { padding-right: 25px; /* width: 90% !important; */ } /* Container - Overflow: No * ----- TRYING TO KEEP iphone window from sliding around ------ */ .container-ono {overflow: hidden;} /* BOXED CONTENT - prevents edge-to-edge */ .site-container-Boxed, .content-Edge { margin: 0px auto; max-width: 100%; width: 1200px !important; position: relative; overflow: visible; padding: 0px; /*background-color: green;*/ } /* EDGE-TO-EDGE CONTENT - prevents boxed */ .site-container-Edge { margin: 0px auto; max-width: 100%; position: relative; overflow: visible; padding: 0px; } .footer .content-Boxed { padding: 0px 35px; } .header-container, .footer-container { margin: 0px; padding: 10px 0; /*background-color: orange;*/ } .header-content { position: relative; overflow: hidden; } .site-content, .billboard-content { position: relative; -moz-box-shadow: 0 0 14px rgba(0,0,0,0.25); -webkit-box-shadow: 0 0 14px rgba(0,0,0,0.25); box-shadow: 0 0 14px rgba(0,0,0,0.25); background-color: transparent; /*border-top: 8px solid var(--flexcolor1);*/ overflow: visible; margin-top: 0px; } #content-main.container { padding-top: 100px; min-height: 550px; } /* overflow only works with width = px */ .promo-content-bg-img { background-color: transparent; background-position: initial; position: absolute !important; height: -webkit-fill-available; width: 1350px; margin-top: 0; margin-left: -2%; background-repeat: no-repeat; } /* overflow only works with width = px */ .content-bg-img { background-color: transparent; background-position: initial; position: absolute !important; height: -webkit-fill-available; background-repeat: no-repeat; z-index: 0 !important; width: 1350px; height: 300px; margin-top: 20px; margin-left: 0; } .portal-header-bg { background-color: transparent; /* background-color: red; */ background-position: right center; position: absolute !important; height: -webkit-fill-available; background-repeat: no-repeat; z-index: -10; width: auto; height: 350px; /* margin-bottom: -50px; */ right: -10% !important; margin-left: 0 !important; bottom: 0px !important; padding-bottom: 30px !important; /* top: -130px; */ opacity: 40%; } @media (max-width: 576px) /* navbar-expand-xs */ { .portal-header-bg { opacity: 5%; } } /* =============================== BILLBOARD =============================== */ /* BILLBOARD */ #billboard-slider { margin: -40px 0 100px 0; display: block; margin-bottom: 110px; } .billboard { overflow: hidden; } .billboard-container { margin-bottom: 80px; } .billboard > .img-contain { height: 440px; /* adj media MED SM */ height: 400px; width: 100%; overflow: hidden; } .billboard img { width:100%; } .site-content, .billboard-content { position: relative; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: none; border-top: 0px solid #CCCCCC; overflow: visible; margin-top: 0px; } .billboardHeader { font-family: var(--BillboardHeaderFont) !important; text-transform: var(--BillboardHeaderTransform) !important; position: absolute; left: 20px; top: 400px; z-index: 301; } .billboardHeader h1, .billboardHeader h2, .billboardHeader h3, .billboardHeader h4, .billboardHeader h5 { font-size: 7rem; opacity: 1; } @media (min-width: 768px) /* navbar-expand-md */ { .billboardHeader h1, .billboardHeader h2, .billboardHeader h3, .billboardHeader h4, .billboardHeader h5 { font-size: 14rem; } .billboardHeader { top: 300px; } } /* =============================== SECTION HEADERS =============================== */ .sectionHeader, .contentHeader { font-family: var(--sectionTagfont) !important; color: var(--SectionTagColor); text-transform: var(--tagTextTransform); font-weight: normal; line-height: 130%; font-size: 70%; display: block; } .contentHeader { color: var(--ContentTagColor); } .sectionSubHeader { text-transform: var(--sectionSubHeaderTransform); display: block; } .shortDescription { display: block; font-family: var(--font2); /* margin-top: 35px; */ /* margin-bottom: 80px; */ font-size: 1.8rem; line-height: 160%; } @media (max-width: 992px) /* navbar-expand-md */ { .sectionHeader {font-size: 75%; line-height: 140%;} .shortDescription {font-size: 1.5rem;} } @media (max-width: 768px) /* navbar-expand-md */ { .sectionHeader {font-size: 65%; line-height: 150%;} .shortDescription {font-size: 1.3rem;} } .sidebar h3 { font-size: 115%; white-space: nowrap; text-transform: uppercase; color: var(--color1d, #282828); } .sidebar h3:hover { color: var(--color1xd, #181818); } .preHeader, .postHeader { font-family: var(--sectionTagfont) !important; color: var(--flexcolor3f7); text-transform: none; font-weight: normal; line-height: 130%; font-size: 70%; display: block; text-align: var(--BrandAlign); } .postHeader { text-transform: uppercase; } .projectHeader { margin-top: 20px; margin-bottom: 6px; font-size: 0.9rem; color: var(--gray9) !important; } /* =============================== PRE HEADER SETTINGS preHeader =============================== */ .preHeader.minimal { font-family: var(--sectionTagfont) !important; color: var(--SectionTagColor); text-transform: var(--preHeaderTextTransform); font-weight: normal; line-height: 150%; font-size: 70%; display: block; text-align: var(--BrandAlign); padding-bottom: 4px; } .preHeader.heavy { /* font-family: var(--font2) !important; thin */ /* text-transform: lowercase; lowercase */ font-family: var(--font5) !important; color: var(--color2) !important; text-transform: uppercase; font-weight: 900; line-height: 100% !important; font-size: 200%; display: block; text-align: var(--BrandAlign); padding-bottom: 20px; background-color: transparent !important; } .preHeader.styled { /* font-family: var(--font2) !important; thin */ /* text-transform: lowercase; lowercase */ font-family: var(--font4) !important; color: var(--color2) !important; text-transform: uppercase; font-weight: 900; line-height: 100% !important; font-size: 200%; display: block; text-align: var(--BrandAlign); padding-bottom: 20px; background-color: transparent !important; } .preHeader.oversized { font-family: var(--font2) !important; color: var(--color2xl) !important; text-transform: lowercase; font-weight: normal; line-height: 80% !important; font-size: 600%; display: block; text-align: var(--BrandAlign); padding-bottom: 20px; margin-left: 0%; background-color: transparent !important; z-index: 0; } .preHeader.oversized.bold { /* font-family: var(--font2) !important; thin */ /* text-transform: lowercase; lowercase */ font-family: var(--font5) !important; color: var(--color2) !important; text-transform: uppercase; font-weight: 900; line-height: 100% !important; font-size: 350%; display: block; text-align: var(--BrandAlign); padding-bottom: 20px; background-color: transparent !important; } .preHeader.offsetFade { /* font-family: var(--font2) !important; thin */ /* text-transform: lowercase; lowercase */ font-family: var(--font5) !important; color: var(--color2f3) !important; text-transform: uppercase; font-weight: 900; line-height: 80% !important; font-size: 500%; display: block; text-align: var(--BrandAlign); padding-bottom: 10px; margin-left: -4%; background-color: transparent !important; z-index: 0; } /* =============================== LIST =============================== */ .date, .releaseDate { font-family: var(--labelTagfont) !important; color: var(--flexcolor3f7); text-transform: var(--tagtexttransform); font-weight: normal; line-height: 130%; font-size: 70%; display: inline-block; text-align: var(--BrandAlign); } .date { font-family: var(--font1) !important; font-size: 150%; color: var(--flexcolor3); text-transform: none; display: block; text-align: var(--BrandAlign); } /* =============================== LINE DISPLAY / DATE DISPLAY =============================== */ ul.dateDisplayStack { font-family: var(--labelTagfont) !important; font-size: 75%; font-weight: normal; line-height: 150%; display: inline-block; margin: 0px 0 20px 0; } ul.dateDisplay, ul.lineDisplay { font-family: var(--labelTagfont) !important; text-transform: var(--tagTextTransform); display: inline-block; margin: 0px 0 20px 0; margin: 0px 0 0px 0; } ul.lineDisplay { text-transform: none; } .displayLineContainer { margin: 20px 0 40px 0; font-size: 75%; font-weight: normal; line-height: 150%; } .displayGoBack { margin: -35px 0 10px 0; } @media (max-width: 992px) /* navbar-expand-md */ { .displayLineContainer {margin: 15px 0 30px 0 !important;} } ul.dateDisplay li, ul.lineDisplay li, ul.dateDisplay a li, ul.lineDisplay a li { display: inline-block !important; white-space: normal; } ul.dateDisplayStack li, ul.dateDisplayStack a li { display: block !important; white-space: normal; } ul.dateDisplay li:after, ul.lineDisplay li:after, ul.dateDisplay a li:after, ul.lineDisplay a li:after { color: var(--flexwhite3); content: " | "; padding: 0 15px; } ul.dateDisplay li:after, ul.dateDisplay a li:after { padding: 0 5px; } ul.dateDisplay li:last-child:after, ul.lineDisplay li:last-child:after, ul.dateDisplay a li:last-child:after, ul.lineDisplay a li:last-child:after { content: " "; padding: 0px; } .dateRelease, .dateUpdated, .authorName { color: var(--flexcolor3); } .dateRelease.nolink, .dateUpdated.nolink, .authorName.nolink { color: var(--color3) !important; } .lineItem { color: var(--flexcolor3); } a li.dateRelease, a li.dateUpdated, a li.authorName { color: var(--linkcolor); } a li.lineItem { color: var(--linkcolor); } a:hover li.dateRelease, a:hover li.dateUpdated, a:hover li.authorName { color: var(--linkhovercolor); } a:hover li.lineItem { color: var(--linkhovercolor); } .dateRelease > .dateLabel, .dateUpdated > .dateLabel, .authorName > .dateLabel, .dateRelease > .dateLabel.nolink, .dateUpdated > .dateLabel.nolink, .authorName > .dateLabel.nolink, .lineItem > .lineLabel { color: var(--ContentTagColor) !important; padding: 0 5px 0 0; display: inline-block !important; } a:hover li.dateRelease .nolink, a:hover li.dateUpdated .nolink, a:hover li.authorName .nolink { color: var(--ContentTagColor) !important; } .lineItem > .lineLabel { color: gray4; } .dateRelease > .dateLabelSub, .dateUpdated > .dateLabelSub, .authorName > .dateLabelSub, .lineItem > .lineLabelSub { color: gray4; padding: 0 5px 0 0; display: inline-block !important; } .lineItem > .lineLabelSub { color: gray3; } .BlogPostArchive { margin: 10px 0; font-size: 80%; } .BlogPostArchive ul li a { line-height: 140%; } /* =============================== CALLOUTS =============================== */ .lead, .lead-md, .lead-sm, .lead-xs, .lead-xxs, .lead-lg, .lead-xl, .lead-xxl { font-family: var(--font2, sans-serif); font-size: 2.25rem; margin: 0px 0; text-align: var(--BrandAlign); line-height: 140%; } .lead-xxs {font-size: 140%;} .lead-xs {font-size: 170%;} .lead-sm {font-size: 200%;} .lead-lg {font-size: 250%;} .lead-xl {font-size: 275%;} .lead-xxl {font-size: 300%;} @media (max-width: 768px) /* navbar-expand-sm */ { .lead, .lead-md, .lead-sm, .lead-xs, .lead-xxs, .lead-lg, .lead-xl, .lead-xxl { font-size: 200%; line-height: 130%; } .lead-xxs {font-size: 150%;} .lead-xs {font-size: 170%;} .lead-sm {font-size: 190%;} .lead-lg {font-size: 220%;} .lead-xl {font-size: 240%;} .lead-xxl {font-size: 270%;} } /* TESTIMONIAL */ .testimonial-block { } .anchor { padding-top: 50px; margin-top: -50px; position: relative; top: -200px; } .anchor2 { padding-top: 40px; margin-top: -40px; position: relative; top: 10px; } .testimonial-quote { font-family: var(--font4) !important; font-size: 3.25rem; line-height: 100%; display: inline-block; margin-bottom: 0; } a h2.testimonial-quote { /*color: var(--flexcolor1);*/ } div.testimonial-single a h2 { /*color: var(--LinkColor); color: var(--flexcolor1);*/ /*background-color: lightblue !important;*/ margin: -40px; padding: 40px; } a h2.testimonial-quote:hover { /*color: var(--flexcolor4);*/ } div.testimonial-single a:hover h2 { /*color: var(--LinkHoverColor); color: var(--flexcolor4);*/ /* background-color: lightgreen !important;*/ } /* Quote */ .quote-left, .quote-right{ font-size: 4rem; /*color: var(--fade1); color: var(--flexcolor2);*/ padding-right: 0 5px 0 0; display: inline-block; white-space: nowrap; } .quote-right { padding: 0 0 0 5px; } /* Short Testimonial */ .testimonial { font-size: 1.4rem; line-height: 160%; } .quote { font-size: 1.65rem; line-height: 175%; } sh /* Author */ .author { font-family: var(--font1) !important; font-size: 2.8rem; margin-bottom: 0; } .organization { font-size: 1.95rem; } .city { font-size: .9rem; } .testimonial-list .testimonial-quote {font-size: 3rem;} .testimonial-list .quote-left, .testimonial-list .quote-right{font-size: 2.75rem;} .testimonial-list .testimonial {font-size: 1.25rem;} .testimonial-list .author {font-size: 2rem;} .testimonial-list .organization {font-size: 1.5rem;} .testimonial-list .city {font-size: .8rem;} h2 + .quote-right { line-height: inherit; } /* navbar-expand-sm */ @media (max-width: 768px) { .testimonial-quote {font-size: 4rem;} .quote-left,.quote-right{font-size: 2.75rem;} .testimonial {font-size: 1.35rem;} .author {font-size: 2rem;} .organization {font-size: 1.5rem;} .city {font-size: .8rem;} } .testimonial-single a:hover +span+ i, /* when link is hovered select i */ .testimonial-single a + span:hover+ i, /* when space after link is hovered select i */ .testimonial-single a + span + i:hover { /* when icon is hovered select i */ visibility: visible; } .testimonial-single a +span+ i { /* in all other case hide it */ visibility: hidden; } /* STAT */ .stat, .stat-md, .stat-sm, .stat-xs, .stat-xxs, .stat-lg, .stat-xl, .stat-xxl { font-family: var(--font2, sans-serif); font-size: 300%; color: var(--flexcolor1); margin: 10px 0; text-align: left; line-height: 130%; } .stat-xxs {font-size: 240%;} .stat-xs {font-size: 260%;} .stat-sm {font-size: 280%;} .stat-lg {font-size: 320%;} .stat-xl {font-size: 340%;} .stat-xxl {font-size: 360%;} /* STAT */ .counters h1 { font-size: 4rem; letter-spacing: -0.3rem; text-transform: none; } .counters h3 { font-size: 3rem; letter-spacing: -0.1rem; text-transform: none; } .counters span { color: var(--CounterColor); } span.value.counter { letter-spacing: -0.225rem !important; } .textCopyright { font-size: .75rem; line-height: 1rem; } /* =============================== BULLETS =============================== */ /* flex-box DIV */ ul.bullets { display: flex!important; flex-direction: column; padding: 0; } ul.bullets li { display: flex!important; line-height: 135%; padding: 0 0 5px 0; } ul.bullets li:before { content: "• "; color: var(--flexcolor1); padding: 0 5px 0 0; } /* flex-box DIV */ .flexCol > div { display: flex !important; flex-wrap: nowrap !important; flex: 1 1 100%; margin-bottom: 4px !important; } ul { list-style:none outside none; margin: 0px; padding: 0px; } li { line-height: initial;} ol { margin-left: -20px; } ol.bullets { list-style: none; padding: 0px; margin: 0px; } ol.bullets li { padding-left: 10px; text-indent: -10px; } ol.bullets li:before { content: "• "; color: var(--flexcolor1); } ul:not([class]) li { list-style-type: none; position: relative; padding-left: 0rem; margin: 0px !important; padding: 0px !important; line-height: 115%; } @media (min-width: 1200px) /* navbar-expand-xl */ {} @media (max-width: 1200px) /* navbar-expand-lg */ {} @media (min-width: 992px) /* navbar-expand-lg */ {} @media (max-width: 992px) /* navbar-expand-md */ {} @media (min-width: 768px) /* navbar-expand-md */ {} @media (max-width: 768px) /* navbar-expand-sm */ {} @media (min-width: 576px) /* navbar-expand-sm */ {} @media (max-width: 576px) /* navbar-expand-xs */ {} @media screen and (min-width: 576px) { #main { flex-direction: row; } #main > nav, #main > aside { flex: 0 0 20vw; } } /* =============================== CONTACT =============================== */ .description, .phone, .phone2, .address, .contact { var(--flexcolor1); } .description { font-size: 115%; line-height: 135%; } .phone { font-size: 150%; line-height: 125%; } .phone2 { font-size: 125%; line-height: 145%; margin: 5px 0px; } .address { font-size: 95%; line-height: 115%; } .contact { font-size: 130%; line-height: 135%; } /* =============================== BLOCK QUOTE =============================== */ .blockquote { margin-bottom: 1rem; font-size: 1.75rem; line-height: 1.75rem; } .blockquote-footer { display: block; font-size: 80%; color: #2d2d2d; } .blockquote-footer::before { content: "\2014\00A0"; } .blockquote-footer { margin: 12px 10px; font-size: 1.375rem; color: var(--color2); } .blockquote-footer cite { font-style: normal; } /* =============================== SOCIAL MEDIA =============================== */ /* ICON LINKS */ ul.social-icons li { } .social-block-R ul.social-icons li { } .social-block ul.social-icons li { } ul.social-icons li i, ul.social-icons li em { } ul.social-icons li a, ul.social-icons li a i, ul.social-icons li a em, .social ul.list-inline.social-icons .list-inline-item a, .social ul.list-inline.social-icons .list-inline-item a svg { /*TRANSFORM -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1); -ms-transition: all 200ms ease-in; -ms-transform: scale(1); -moz-transition: all 200ms ease-in; -moz-transform: scale(1); transition: all 200ms ease-in; transform: scale(1); */ z-index: 5; } ul.social-icons .facebook {color: #42539c;} ul.social-icons .twitter {color: #28aae1;} ul.social-icons .google {color: #e04324;} ul.social-icons .pinterest {color: #ca1325;} ul.social-icons .linkedin {color: #007bb6;} ul.social-icons .youtube {color: #d1261c;} ul.social-icons .instagram {color: #466b92;} /* ICON - HOVER social media */ ul.social-icons li > a:hover, ul.social-icons li > a > i:hover, ul.social-icons li > a > em:hover, .social ul.list-inline.social-icons .list-inline-item a:hover, .social ul.list-inline.social-icons .list-inline-item a svg:hover { /*background-color: var(--color2, #a1a1a1);*/ /*TRANSFORM -webkit-transition: all 200ms ease-in; -webkit-transform: scale(3.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(3.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(3.5); transition: all 200ms ease-in; transform: scale(3.5); */ z-index: 100; } .social-icons .svg-inline--fa { vertical-align: -0.1rem !important; } .bg-Minor.scrolled .social-icons .svg-inline--fa { vertical-align: -0.3rem !important; } @media (max-width: 768px) /* navbar-expand-sm */ { .social-icons .svg-inline--fa { vertical-align: -0.2rem !important; } .bg-Minor.scrolled .social-icons .svg-inline--fa { vertical-align: -0.4rem !important; } } /* =============================== TO TOP =============================== */ /* SCROLL TOP - Arrow - - - - - - - - - -*/ .move-up { position: fixed; bottom: 90px; right: 1px; display: none; z-index: 10000; } .move-up button { background:transparent; border:none; } .move-up button:active:hover { /*padding-right:4px !important; margin-right:2px;*/ } .move-up i, .move-up svg { font-size:60px; opacity:0.5; color: var(--ToTopButtonColor); cursor: pointer; } .move-up i:hover, .move-up svg:hover { font-size:60px; opacity:1; color: var(--ToTopButtonColor); cursor: pointer; } .move-up i:active, .move-up svg:active { -webkit-animation-name: hvr-push; animation-name: hvr-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* =============================== CREDIT CARDS =============================== */ .creditcard svg { font-size: 2rem; padding: 0px 2px; color: var(--FooterColor); } #Payment_Amount, #Payment_Amount2 { display: block; width: 100%; height: calc(2em + 1rem + 2px); padding: 1.075rem 1.05rem; font-size: 1.5rem; font-weight: 400; line-height: 1.7; color: #039303 !important; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; } .paymentAmountDisplay { display: block; background-color: transparent !important; color: red !important; width: 100%; height: calc(2em + 1rem + 2px); padding: 1.075rem 1.05rem; font-size: 1.1rem; font-weight: 400; line-height: 1.7; background-clip: padding-box; border: 0px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; } /* label.active { padding-top: 0px; } */ .CardField-child { background-color: gold !important; } /* =============================== STORE . ONLINE SHOP =============================== */ .cms_cart_widget { box-shadow: none !important; padding: inherit !important; vertical-align: inherit !important; margin-bottom: inherit !important; text-align: inherit !important; width: inherit !important; margin-left: inherit !important; display: inline-block; } .priceDetail { margin: 5px 0 5px 0; color: var(--bs-green); font-family: var(--font1) !important; } .priceRetail { font-size: 150%; margin: 0px 0 10px 0; color: var(--gray4); font-family: var(--font1) !important; text-decoration: line-through; } .cartQty .btn-md { font-size: 1.45rem !important; padding: 1.45rem 8%; min-width: 20%; line-height: 1.4rem; margin: .15rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; margin-bottom: 4px; } .image-zoom { font-size: 160%; margin: 25px 20px; position: absolute; min-height: 60px; z-index: 5000; top: 0; right: 0; color: var(--flexcolor3f2); z-index: 10; } .disclaimer { color: var(--flexcolor3f7); font-size: 70% !important; font-style: italic !important; margin: 15px 0; } /* =============================== SHOPPING CART =============================== */ .system_page, .tlc_ecomm { padding: 0px; min-width: 100%; margin: 0 auto; font-size: inherit; /* font-family: initial; */ } .tlc_ecomm .tlc_ecomm_products { margin-bottom: 0px; } .tlc_ecomm .tlc_ecomm_products th { padding: 25px 5px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--color3lf2, #ececec); color: #AAAAAA; position: relative; text-transform: none; background-color: #F2F2F2; transition: all 300ms ease 0s; -webkit-transition: background 300ms ease 0s; margin: 0; text-align: center; text-transform: uppercase; border-top: 1px solid var(--flexcolor3f2); border-bottom: 1px solid var(--flexcolor2f8); } .tlc_ecomm .tlc_ecomm_products td { padding: 70px 10px 30px 10px; vertical-align: top; } .tlc_ecomm .tlc_ecomm_products th, .tlc_ecomm .tlc_ecomm_products td { text-align: center; } .tlc_ecomm .tlc_ecomm_products td > span.data-cms_cart_item_total_price { padding: 60px 0px 0px 0px; background-color: red !important; } .tlc_ecomm .tlc_ecomm_products a:hover { text-decoration: none; } @media (max-width: 768px) { .tlc_ecomm .tlc_ecomm_products td { display: inline-block; padding: 10px 10px 10px 10px; vertical-align: top; white-space: normal; text-align: left !important; } .tlc_ecomm .tlc_ecomm_products td:before { margin-left: 0px; } td.CartThumb { padding: 0px !important; } td.CartThumb div { overflow: hidden; position: relative; display: inline-block !important; height: 150px; width: 150px; margin: 0; } .tlc_ecomm .tlc_ecomm_products thead { display: block; } .tlc_ecomm .tlc_ecomm_products span { white-space: normal } .tlc_ecomm .tlc_ecomm_products td { display: block; padding: 10px 10px 10px 10px; vertical-align: top; white-space: normal; } .tlc_ecomm .tlc_ecomm_products td:before { content: attr(data-th) "LIST "; display: none; vertical-align: top; width: 90px; margin-left: -90px; margin-top: 3px; text-transform:uppercase } } .shopCart .rowHeader { position: relative; margin: 70px 0 0 0; padding: 25px 5px; border-bottom: 1px solid var(--color3lf2); color: #AAAAAA; background-color: #F2F2F2; border-top: 1px solid var(--flexcolor2f8); border-bottom: 1px solid var(--flexcolor3f2); font-size: 75%; text-align: center; transition: all 300ms ease 0s; -webkit-transition: background 300ms ease 0s; text-transform: uppercase; } .shopCart .rowFooter { position: relative; margin: 0 0 70px 0; padding: 25px 5px; border-bottom: 1px solid var(--color3lf2); color: #AAAAAA; background-color: #F2F2F2; border-bottom: 1px solid var(--flexcolor2f8); font-size: 75%; text-align: center; transition: all 300ms ease 0s; -webkit-transition: background 300ms ease 0s; text-transform: uppercase; } .shopCart .rowItems { padding: 30px 0px 0px 0px; border-bottom: 1px solid var(--flexcolor3f2); text-align: center; width: 100%; margin: auto; } .shopCart .CartThumb { padding: 0px 15px 30px 0px !important; text-align: right !important; } .shopCart .CartThumb div { text-align: right !important; overflow: hidden; position: relative; display: inline-block !important; height: 120px; max-width: 120px; width: 100%; margin: 0; } .CartProductDesc, .CartTax, .CartQty, .CartTotal, .CartDelete { padding: 20px 10px 20px 0px !important; } .CartProductDesc { text-align: left !important; } .CartTax{ color: var(--bs-green); font-size: 90%; } /* QTY */ .CartQty { padding: 20px 2px 20px 0px !important; } .CartQty input[type="number"], .tlc_ecomm .tlc_ecomm_products input[type="number"] { -webkit-appearance: none; -webkit-border-radius: 0; box-sizing: border-box; border: 1px solid #cbcbcb; padding: 20px 2px 20px 10px; width: 70px; min-width: 60px; margin: -21px 0 0 0; text-align: center; font-size: 120%; border-top-left-radius: calc(var(--RadiusBrand) /2); border-top-right-radius: calc(var(--RadiusBrand) /2); border-bottom-right-radius: calc(var(--RadiusBrand) /2); border-bottom-left-radius: calc(var(--RadiusBrand) /2); } .CartTotal { color: var(--bs-green); } .CartDelete { } /* DELETE */ svg.delete { font-size: 270% !important; margin: -12px 0 0 0; padding: 10px; color: var(--flexcolor3f4); } svg.delete:hover { color: red; /* TRANSITION TO*/ -webkit-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; transition: all 200ms ease-in; } @media (max-width: 1200px) /* navbar-expand-lg */ { .shopCart .CartThumb { padding: 0px 15px 30px 0px !important; } } @media (max-width: 992px) /* navbar-expand-md */ { .shopCart .CartThumb { padding: 0px 10px 30px 0px !important; } } @media (min-width: 992px) /* navbar-expand-md */ { .shopCart .CartThumb div { height: 160px; max-width: 160px; width: 100%; margin: 0; } } @media (max-width: 768px) /* navbar-expand-sm */ { .CartProductDesc { padding: 0px 10px 0px 0px !important; } .CartLockup{ padding: 0px 0px 10px 0px; } .shopCart .rowItems { padding: 70px 0px 50px 0px; } } .price { font-size: 120% !important; } /* =============================== INVOICE PAYMENTS =============================== */ input.invoicePrice { font-size: 300% !important; color: #039303 !important; height: 90px !important; line-height: 90px; padding: 3px 0px 3px 40px !important; margin: 0px !important; } label.invoicePrice::before { content: '' attr(data-currency); position: relative; top: 36px; left: 10px; font-size: 270%; color: #039303; display: block; } input.estimatePrice { padding: 3px 0px 3px 30px !important; margin: 0px !important; } label.estimatePrice::before { content: '' attr(data-currency); position: relative; top: 28px; left: 10px; display: block; font-size: 1.25rem; } input.invoiceRate { font-size: 220% !important; color: #039303 !important; height: 90px !important; line-height: 90px; padding: 3px 0px 3px 10px !important; margin: 0px !important; width: 70% !important; min-width: 150px !important; } input.invoiceDiscount { font-size: 220% !important; color: #039303 !important; height: 90px !important; line-height: 90px; padding: 3px 0px 3px 10px !important; margin: 0px !important; } input.input-amount-total[disabled] { font-size: 400% !important; margin: 3px 0px 3px 60px !important; } label.input-amount-total::before { content: '' attr(data-currency-total); position: relative; top: 35px; left: 0px; font-size: 400%; /*color: #039303 !important; */ color: #CCCCCC !important; display: block; } #Payment_Amount[disabled], #Payment_Amount2[disabled] { /*color: #0F4000 !important;*/ color: #CCCCCC !important; } /* =============================== PAYMENTS / DONATIONS =============================== */ input[type='text'].input-amount { font-size: 340% !important; color: #039303 !important; height: 100px !important; line-height: 100px; width: 100% !important; min-width: 325px; padding: 0px 0px 0px 60px !important; margin: 4px 1px 4px 0px !important; } input[type='text'].input-amount.w-100 { font-size: 300% !important; color: #039303 !important; height: 95px !important; line-height: 95px; width: 100% !important; min-width: 100%; padding: 0px 0px 0px 40px !important; margin: 4px 0px 4px 0px !important; } input[type='text'].input-amount.small { font-size: 220% !important; color: #333333 !important; height: 70px !important; line-height: 40px; width: 49% !important; min-width: 250px; padding: 0px 0px 0px 30px !important; margin: 4px 1px 4px 0px !important; } label.input-amount::before { content: '' attr(data-currency); position: relative; top: 67px; left: 10px; font-size: 280%; color: #039303; display: block; } label.input-amount.small::before { content: '' attr(data-currency); position: relative; top: 50px; left: 13px; font-size: 200%; color: #333333; display: block; } #Payment_Amount2[disabled] .input-amount-total, input.input-amount-total[disabled] { font-size: 400% !important; margin: 3px 0px 3px 20px !important; background-color: transparent !important; border: 0px solid transparent; color: #CCCCCC !important; } label.input-amount-total::before { content: '' attr(data-currency-total); position: relative; top: 51px; left: 0px; font-size: 320%; /* color: #039303 !important; */ color: #CCCCCC !important; display: block; } #Payment_Amount[disabled], #Payment_Amount2[disabled] { /*color: #0F4000 !important;*/ color: #CCCCCC !important; } #Payment_Amount[disabled], #Payment_Amount2[disabled] { border: 0px solid #ced4da; padding: 0 !important; padding-left: 0.9rem !important; font-size: 340% !important; height: 70px !important; /* line-height: 80px; */ padding: 24px 4px 24px 5px; } /* =============================== CARD =============================== */ .card { border: 0; /* -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); */ /* box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); */ -webkit-box-shadow: none; box-shadow: none; } .notification { position: relative; padding: 0; margin: 10px 0 20px 0; border: 0px solid transparent; border-radius: 0; flex-wrap: wrap; display: flex; } .notification.horz { flex-wrap: nowrap; } .notification.vert { flex-wrap: wrap; } .project .notification { margin: 0px 0 100px 0; } @media (max-width: 576px) /* navbar-expand-xs */ { .notification.horz {flex-wrap: wrap;} } div.notification + div.notification { margin-block-start: -70px; } /* TITLE */ .notification .title-box { background-color: #bbbbbb; padding: 15px 15px 15px 15px !important; /* display: table; */ flex: auto; justify-content: center; margin: 0; } .notification .text-box { background-color: #f2f2f2; padding: 20px 15px 20px 20px !important; flex: auto; flex-grow: 25; border: 1px solid rgba(0,0,0,.1); } .notification.vert .title-box { width: -webkit-fill-available; } /* TEXT */ .notification .notice-text-header, .notification .notice-text-number { margin: 2px 0 8px 0; } .notification .notice-text { flex-grow: 1; font-size: 115%; color: var(--flexcolor3f9); line-height: 120%; } /* =============================== GROUP HEADING =============================== */ .group-heading-container { display: flex; } .group-heading-container .title, .group-heading-container .title-number { padding: 10px 0; background-color: #ddd; font-size: 18px; } .group-heading-container .title-number { min-width: 64px; max-width: 64px; } .group-heading-container .title { min-width: 100px; /*max-width: 64px;*/ } .group-heading-container .title-label { flex-grow: 1; } .group-heading-container .title-label { background-color: #f2f2f2; padding: 10px 0 10px 15px; font-size: 18px; } /* =============================== ACCORDION / FAQ =============================== */ #accordian {} .accordion,.toggle {} .accordion .card .card-header { padding: 0px; background: transparent; } .accordion a > h1, .accordion a > h2, .accordion a > h3, .accordion a > h4, .accordion a > h5, .accordion a > h6 { padding: 26px 13px; } .accordion a h1, .accordion a h2, .accordion a h3, .accordion a h4, .accordion a h5, .accordion a h6 { color: var(--LinkColor); } .accordion a:hover h1, .accordion a:hover h2, .accordion a:hover h3, .accordion a:hover h4, .accordion a:hover h5, .accordion a:hover h6 { color: var(--H1ColorHover); } .accordion a[aria-expanded="true"] h1, .accordion a[aria-expanded="true"] h2, .accordion a[aria-expanded="true"] h3, .accordion a[aria-expanded="true"] h4, .accordion a[aria-expanded="true"] h5, .accordion a[aria-expanded="true"] h6 { color: var(--H1ColorHover); } .accordion .card-header { /* padding: 0.15rem 0.15rem; */ margin: 0; background-color: var(--flexwhite07) !important; border: 1px solid var(--flexwhite1) !important; } .accordion a > h3, .toggle a > h3 { padding: 26px 13px; font-size: 110%; line-height: 130%; color: var(--flexcolor1); cursor: pointer; position: relative; text-transform: none; /* background-color: var(--flexwhite1); */ transition: all 300ms ease 0s; -webkit-transition: background 300ms ease 0s; margin: 0; text-align: left; text-transform: uppercase; border: 0px solid var(--flexwhite3); /* border-bottom: 1px solid var(--flexcolor2f7); */ } .accordion .card-body { } a[aria-expanded="true"] > h3 { /*background-color: var(--flexcolor2l);*/ color: var(--flexcolor1) !important; border-top: 0px solid var(--flexwhite3); border-bottom: 0px solid var(--flexwhite3); } /* HOVER */ .accordion a > h3:hover, .accordion a > h3:hover span { background-color: var(--flexcolor1xl); color: #FFFFFF !important; } /* ACTIVE */ .accordion a > h3:active, .accordion a > h3:active span { background-color: var(--flexcolor1l); color: #FFFFFF !important; } /* Expanded */ .accordion a[aria-expanded="true"] > h3, .accordion a[aria-expanded="true"] > h3 span { background-color: var(--flexcolor1); color: #FFFFFF !important; } /* Expanded . HOVER */ .accordion a[aria-expanded="true"] > h3:hover, .accordion a[aria-expanded="true"] > h3:hover span { background-color: var(--flexcolor1d); color: var(--white8) !important; } /* Expanded . HOVER */ .accordion a[aria-expanded="true"] > h3:active, .accordion a[aria-expanded="true"] > h3:active span { background-color: var(--flexcolor1xd); color: var(--white7) !important; } /* .accordion a[aria-expanded="true"] h1, .accordion a[aria-expanded="true"] h2, .accordion a[aria-expanded="true"] h3, .accordion a[aria-expanded="true"] h4, .accordion a[aria-expanded="true"] h5, .accordion a[aria-expanded="true"] h6 { color: var(--H1ColorHover); } */ .accordion .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 30px 10px !important; font-size: 100%; font-weight: normal; line-height: 150% !important; color: var(--flexwhite8); background-color: #ececec !important; padding: 0px 55px 0 25px; border-top: 0px solid var(--flexwhite1) !important; } .accordion .card-body li { line-height: 180% !important;form } .accordion .card-body h1,U .accordion .card-body h2 { color: var(--color2); font-size: 140%; } .accordion .card-body h3, .accordion .card-body h4, .accordion .card-body h5, .accordion .card-body h6 { color: var(--color2); font-size: 120%; } .faq .accordion .card-body { padding-top: 0px !important; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--flexwhite1); background-color: transparent; background-clip: border-box; border-radius: .5rem; } .md-accordion .card { overflow: visible; /*border-bottom: 0px solid var(--flexwhite3);*/ border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .md-accordion .card .card-body { font-size: 1rem; font-weight: normal; line-height: 135%; color: var(--FontColor) !important; padding: 0px 55px 0 25px; border: 0px solid var(--flexwhite2); } .md-accordion .card:first-of-type, .md-accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px solid var(--color3lf2); } .xs-accordion .card-header { /* padding: 0.15rem 0.15rem; */ margin: 0; border-radius: 0 !important; color: white !important; background-color: #a8a8ad !important; border: 0px solid var(--flexwhite3) !important; } .xs-accordion a > h3 { padding: 10px 13px; font-size: 90%; line-height: 120%; color: white !important; cursor: pointer; position: relative; text-transform: none; /* background-color: var(--flexwhite1); */ transition: all 300ms ease 0s; -webkit-transition: background 300ms ease 0s; margin: 0; text-align: left; text-transform: uppercase; border: 0px solid var(--flexwhite3); /* border-bottom: 1px solid var(--flexcolor2f7); */ } .xs-accordion .card { overflow: visible; /*border-bottom: 0px solid var(--flexwhite3);*/ border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .xs-accordion .card .card-body { font-size: 1rem; font-weight: normal; line-height: 125%; color: var(--FontColor) !important; padding: 0px 55px 0 25px; border: 0px solid var(--flexwhite2); } .xs-accordion .card:first-of-type, .md-accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px solid var(--color3lf2); } /* =============================== PROGRESS BAR =============================== */ .progress-bar { background-color: transparent; } /* =============================== INVOICE =============================== */ .invoice-head { background-color: var(--color1l) !important; } .estimate-head, .estimate-head.boxTotal { background-color: #ff9c00 !important; } .invoice-head .boxTitle, .estimate-head .boxTitle { } .estTotals { margin-left: 0; } .boxTitle { padding-right: 28px; padding-left: 30px; height: 100%; display: inline-flex !important; align-items: center !important; justify-content: center !important; letter-spacing: 0.3rem !important; font-size: 120% !important; } .boxTotal, .paymentTotal { padding-right: 110px; padding-left: 110px; height: 100%; display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--color1l) !important; min-width: 300px; font-size: 200% !important; } .estimate-head.boxTotal { padding-right: 80px; padding-left: 80px; min-width: 320px; } .paymentTotal { background-color: #00C400 !important; } .projTotal { padding-right: 80px; padding-left: 80px; height: 100%; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 330px !important; font-size: 160% !important; color: #039303; /*background-color: red !2216 important;*/ min-width: 330px; } .boxLeft { } .invSummary {min-width: 320px;} .invSummaryHeader .h2 { font-size: 260%; } @media (max-width: 1200px) /* navbar-expand-lg */ { .projTotal { min-width: 160px !important; max-width: 180px; padding-right: 60px; padding-left: 60px; font-size: 180% !important; } .boxLeft { } .invSummary {min-width: 280px;} .invSummaryHeader .h2 { font-size: 230%; } } @media (max-width: 992px) /* navbar-expand-md */ { .boxTitle { letter-spacing: 0.25rem !important; font-size: 110% !important; padding-right: 20px; padding-left: 23px; } .boxTotal, .paymentTotal { font-size: 220% !important; padding-right: 50px; padding-left: 50px; min-width: auto; } .priceBlock { } .invSummary {min-width: 260px;} .invSummaryHeader .h2 { font-size: 220%; } } @media (max-width: 768px) /* navbar-expand-sm */ { .invoice-head, .estimate-head { background-color: transparent !important; } .boxTitle { letter-spacing: 0.2rem !important; font-size: 100% !important; padding-right: 15px; padding-left: 15px; } .boxTotal, .paymentTotal { font-size: 170% !important; padding-right: 35px; padding-left: 35px; } .estimate-head.boxTotal { padding-right: 50px; padding-left: 50px; min-width: 240px; } .projTotal { color: #039303; min-width: initial !important; } .estTotals { margin-left: 10px; } .boxLeft { } .invSummary {min-width: 230px;} .invSummaryHeader .h2 { font-size: 200%; } } @media (max-width: 576px) /* navbar-expand-xs */ { .boxTotal, .paymentTotal { font-size: 170% !important; padding-right: 30px; padding-left: 30px; } .projTotal { padding-right: 0px; padding-left: 115px; height: 100%; display: inline-flex !important; align-items: left !important; justify-content: left !important; min-width: auto !important; font-size: 160% !important; color: #039303; } .boxLeft { } .invSummary {min-width: 220px;} .invSummaryHeader .h2 { font-size: 190%; } } .IconsProj { position: relative; text-align: center; } .IconsProj .group1 { position: relative; } .IconsProj .group2 { padding-left: 10px; border-left: 1px solid #CCCCCC; position: relative; } .AliasGroup { z-index: 100; position: relative; } .AliasGroup:hover > div { display: block; } .AliasHover { cursor: pointer; cursor: hand; } .AliasShow { display:none; position: absolute; left: 0px; bottom: -25px; text-align: left; } .AliasHover:hover ~ .AliasShow { display: block; } .datepicker-input{ position:relative; } .datepicker-input input{ margin:0; padding-right:45px; } .datepicker-input input{ margin:0; /*padding-right:45px;*/ padding-right: 0px; } .datepicker-input__icon{ font-size: 1.25rem; line-height: 1.5; color: white; white-space: nowrap; background-color: var(--color1) !important; border: 0px solid #ced4da; position:absolute; right:0; top:0; bottom:0; width:45px; border-radius: 0 0.25rem 0.25rem 0; pointer-events: none; } .datepicker-input__icon svg{ position:absolute; top:50%; transform: translate(-50%, -50%); left:50%; } .ui-datepicker-title{ display:flex; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{ width: 45%; height: 30px; line-height: 1.8; padding: 0 5px; margin: 0 10px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:3px;} .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 2px; } /* =============================== PAGINATION . TREEPL DEFAULT =============================== */ .pagination { display: flex; padding-left: 0; list-style: none; width: 100% !important; margin: 60px 0 60px -5px !important; } .cms_ecommerce .cms_list, .system_form .cms_list, .system_galleries, .system_pagination ul { margin: 0; padding: 0; list-style: none; padding: 10px 0px 70px 12px; } .cms_ecommerce .cms_col_10:after, .cms_ecommerce .cms_col_11:after, .cms_ecommerce .cms_col_12:after, .cms_ecommerce .cms_col_1:after, .cms_ecommerce .cms_col_2:after, .cms_ecommerce .cms_col_3:after, .cms_ecommerce .cms_col_4:after, .cms_ecommerce .cms_col_5:after, .cms_ecommerce .cms_col_6:after, .cms_ecommerce .cms_col_7:after, .cms_ecommerce .cms_col_8:after, .cms_ecommerce .cms_col_9:after { content: ""; display: block; clear: both } .system_pagination, .system_pagination * { box-sizing: border-box } .system_pagination ul { display: flex; flex-wrap: wrap; line-height: 1; margin-bottom: 30px; } .system_pagination li { min-width: 40px } .system_pagination li:last-child a { border-right-width: 1px } .system_pagination li .dots, .system_pagination li a { border: none; border-width: 0px; display: block; padding: 10px 15px; margin: 0px 1px; background-color: #EDEDED; } .system_pagination li.active a { pointer-events: none; color: white; background-color: var(--Link2ActiveColor); } .system_pagination li .dots { color: var(--FontColor); } .system_pagination li a { color: var(--PrimaryButtonColor); text-decoration: none; text-align: center; } .system_pagination li a:focus, .system_pagination li a:hover { color: #FFFFFF; background-color: var(--PrimaryButtonHoverColor); } .system_pagination .next, .system_pagination .prev { font-size: 0; line-height: 18px; } .iCover { overflow: hidden; } @media (min-width: 1200px) /* navbar-expand-xl */ { .iHorz.row-cols-xl-2 .iCover { height: 100% !important; } } @media (max-width: 1200px) /* navbar-expand-lg */ {} @media (min-width: 992px) /* navbar-expand-lg */ { .iHorz.row-cols-lg-2 .iCover { height: 100% !important; } } @media (max-width: 992px) /* navbar-expand-md */ {} @media (min-width: 768px) /* navbar-expand-md */ { .iHorz.row-cols-md-2 .iCover { height: 100% !important; } } @media (max-width: 768px) /* navbar-expand-sm */ { .iHorz.row-cols-md-2 .iCover { height: 100% !important; } } @media (min-width: 576px) /* navbar-expand-sm */ { .iHorz.row-cols-md-2 .iCover { height: 100% !important; } } @media (max-width: 576px) /* navbar-expand-xs */ { .iHorz.row-cols-md-2 .iCover { height: 100% !important; } } @media print { .hidePrint { display: none; } } /* =============================== BOOTSTRAP FLEX-BOX =============================== */ .minCol-10 {min-width: 10px;} .minCol-20 {min-width: 20px;} .minCol-30 {min-width: 30px;} .minCol-40 {min-width: 40px;} .minCol-50 {min-width: 50px;} .minCol-60 {min-width: 60px;} .minCol-70 {min-width: 70px;} .minCol-80 {min-width: 80px;} .minCol-90 {min-width: 90px;} .minCol-100 {min-width: 100px;} @media (max-width: 992px) /* navbar-expand-md */ { .minCol-10,.minCol-20,.minCol-30,.minCol-40,.minCol-50,.minCol-60,.minCol-70,.minCol-80,.minCol-90,.minCol-100 { min-width: auto !important; } .flex-wrap div { line-height: normal !important; } } /* =============================== DATA COUNT =============================== */ .AliasCount { position: relative; } /* on ex2 if you include bootstrap v3 css the number is a rounded circle with the .has-badge class */ .AliasCount.datacount[data-count]:after{ position: absolute; left: -3px; top: -19px; content: attr(data-count); font-size: 52%; padding: 0.3em 0; border-radius: 999px; line-height: 0.7em; color: red; background-color: white; border: 1px solid red; text-align: center; min-width: 2em; font-weight: 700; } .AliasCount.color1.datacount[data-count]:after { color: var(--color1); border: 1px solid var(--color1); } .AliasCount.orange.datacount[data-count]:after { color: var(--bs-orange); border: 1px solid var(--bs-orange); } .AliasCount.green.datacount[data-count]:after { color: green; border: 1px solid green; } .AliasCount.green.datacount[data-count]:after { color: red; border: 1px solid red; } .spinner { animation: spin-pause 6s linear infinite; } @keyframes spin-pause { 0% { transform: rotate(0deg); } 50% { transform: rotate(360deg); /* Complete one spin */ } 83.33% { transform: rotate(360deg); /* Freeze after spin */ } 100% { transform: rotate(360deg); /* Continue freezing */ } } /* =============================== COPY =============================== */ #buttonViewContactInfo.hide { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* Prevents interaction when hidden */ } #buttonViewContactInfo.show { opacity: 1; transition: opacity 0.3s ease; } /* =============================== FA-STACK =============================== */ .fa-stack span { }