/*Tao default theme styles*/ :root { /*Fonts*/ --header: "Playfair Display", serif; --subheader: "Inter Tight", sans-serif, system-ui; --bodytext: "Inter", sans-serif, system-ui; /*Colors*/ --primary:#003e7e; --highlight:#00853f; --special:#ffc107; --dark: #032d5f; --text:#1c2730; --mute:#303e49; --gray:#dfebee; --light:#efefef; --offwhite:#FAF9F6; --white: #FFFFFF; --error:#ea1000; /*Utilities*/ --sliderHeight:600px; @keyframes spinner-border{100% transform: rotate(360deg);} } body.noScroll{ overflow:hidden;} body::-webkit-scrollbar-track {background-color: #fff;} body::-webkit-scrollbar { width: 8px; background-color: #fff;} body::-webkit-scrollbar-thumb { background-color: var(--highlight);} body::-webkit-scrollbar-thumb:hover { background-color: var(--primary);} /* 1. Reset/Normalize */ html{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-family:sans-serif; scroll-behavior:smooth;} body{color:var(--text); display:flex; flex-direction:column; font-family:var(--bodytext); font-size: .97rem;font-weight: 400;line-height: 1.5; margin:0; position:relative; text-align:left; size-adjust: 105%; ascent-override: 92%; descent-override: 28%; line-gap-override: 0%;} button, input, optgroup {margin: 0; font: inherit; color: inherit; border: 1px solid var(--gray); } button {overflow: visible; -webkit-appearance: button;} .button, input[type="button"], input[type="reset"], input[type="submit"] {display: inline-block; line-height: 1; width:auto; background-color: var(--primary); color: var(--white); fill: var(--white); text-align: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 1.2em; font-weight: 400; border-radius: 5px; padding: 15px 30px; &:hover {background:var(--dark); color: var(--white); } &:active {background: var(--gray); } } input {line-height: normal; &[type="checkbox"], &[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0 3px; } &[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button {height: auto; } &[type="email"], &[type="password"], &[type="tel"], &[type="file"], &[type="text"], &[type="number"] {width: 100%;min-height: 40px;background-color: color-mix(in srgb, var(--light) 50%, transparent);border: 1px solid var(--light);padding: 10px;text-align: left;color: var(--text);border-radius: 5px; &::-webkit-input-placeholder {font-family: "Inter", sans-serif;color: var(--dark); } &::-moz-placeholder {font-family: "Inter", sans-serif; color: var(--dark); } &:-ms-input-placeholder {font-family: "Inter", sans-serif; color: var(--dark); } &:-moz-placeholder {font-family: "Inter", sans-serif; color: var(--dark); } &:focus::-webkit-input-placeholder, &:focus::-moz-placeholder, &:focus:-moz-placeholder, &:focus:-ms-input-placeholder {color: transparent; } } } select, textarea { width:100%; background-color: color-mix(in srgb, var(--light) 50%, transparent); border: 1px solid var(--light); padding: 10px; text-align: left; color: var(--text); border-radius: 5px; &:: -ms-expand {display: none; } &:: -moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;} &:: -webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder {color: var(--dark); } &: focus::-webkit-input-placeholder, &:focus::-moz-placeholder, &:focus:-moz-placeholder, &:focus:-ms-input-placeholder {color: transparent; } ; } /* 2. Global Styles */ #layout{background:var(--white);display:flex;flex-direction:column;left:0;min-height:100vh;min-width:100%;position:relative;top:0;width:100%;overflow: hidden;} #wrapper{flex:1 0 auto;height:auto;margin:0 auto;position:relative;width:100%;} body.noScroll{overflow: hidden;!I;!;} /*Layout */ /* Custom Container sizes */ @media (min-width: 1440px) {.container{max-width:1360px!important;} } @media (min-width: 1640px) {.container{max-width:1440px!important;} } @media (min-width: 1840px) {.container{max-width:1640px!important;} } @media (min-width: 2040px) {.container{max-width:1840px!important;} } /* 3. Base Elements */ h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 0.5rem; font-family:var(--header); font-weight: 500; text-align:left; text-rendering:optimizelegibility; line-height: 1.2; color:var(--primary); a { color:inherit;} } .h1, h1 {font-size: calc(1.375rem + 1.5vw); @media (min-width: 1200px) {font-size: 2.5rem; } } .h2, h2 {font-size: calc(1.3rem + 0.6vw); @media (min-width: 1200px) {font-size: 1.75rem; } } .h3, h3 {font-size: calc(1.25625rem + 0.075vw); @media (min-width: 1200px) {font-size: 1.3125rem; } } .h4, h4 {font-size: 1.125rem; } .h5, h5 {font-size: 1rem; } .h6, h6 {font-size: 0.875rem; } img {border:0;max-width: 100%;height: auto;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;} strong, b {font-weight:bold;} p{line-height:1.7em; margin:.5em 0;} a{-moz-transition:all .4s ease; -o-transition:all .4s ease; -webkit-transition:all .4s ease; color:var(--primary); text-decoration:none; transition:all .4s ease; &:hover, &:focus{color:var(--highlight); text-decoration:none;} } /*Buttons*/ .button {-o-transition: all 0.3s; -webkit-transition: all 0.3s; background-color: var(--primary); border-radius: 5px; color: var(--white); display: inline-block; fill: var(--white); font-size: 1.2em; font-weight: 400; line-height: 1; padding: 10px 30px; text-align: center; transition: all 0.3s; &.button-lg {font-size: 1.5em; padding: 20px 30px; } &.button-sm {border-radius:0.25rem; padding:0.5rem .85rem; font-size: 0.9rem;} &.button-primary {background: var(--primary); border: 1px solid transparent; color: var(--white); &:hover {background: var(--highlight); } &.button-lines { border-color: var(--primary); color: var(--primary); } &.button-lines:hover {background: var(--primary); color: var(--white); } } &.button-highlight {background: var(--highlight); border: 1px solid transparent; color: var(--white); &:hover {background: var(--primary); } &.button-lines { border-color: var(--highlight); color: var(--highlight); } &.button-lines:hover {background: var(--highlight); color: var(--white); } } &.button-white {background: var(--white); border: 1px solid transparent; color: var(--dark); &:hover {background: var(--dark); color:var(--white);} &.button-lines { border-color: var(--white); color: var(--white); } &.button-lines:hover {background: var(--dadrk); color: var(--white); } } &.button-dark {background: var(--dark); border: 1px solid transparent; color: var(--white); &:hover {background: var(--white); color:var(--dark);} &.button-lines { border-color: var(--dark); color: var(--dark); } &.button-lines:hover {background: var(--dark); color: var(--white); } } &.button-lines {background: transparent; border-width: .11em; } &.button-arrow { &:after {content: ""; display: inline-block; font-family:bootstrap-icons!important; font-size: 40px; line-height: 30px; padding: 0 0 0 4px; vertical-align: middle; } &.right:after {content:"\f135"; } &.left:after {content:"\f12c"; } &.down:after {content:"\f124"; } &.up:after {content:"\f145"; } &.button-sm:after {font-size:26px;line-height: 0;} } } /*Skip button*/ .skip-to-main-content-link {display: block;position: absolute;left: -999px;top: -999px; &:focus{left: 0;top: 0;z-index: 9999;padding: 3px;background: var(--dark);border:1px solid var(--primary); color:var(--white);} } :focus,:focus-visible{outline:1px dashed var(--primary);} /*Go to Top button*/ .cd-top {position: fixed; bottom: 0; right: 40px; width: 40px; height: 32px; z-index: 10; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--dark) 70%, var(--offwhite)); opacity: 0; visibility: hidden; overflow: hidden; display: block; transition: opacity .3s, visibility .3s; i {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; line-height: 35px; text-align: center; font-size: 1.4em; color: var(--white); text-indent: 0; } &.cd-is-visible, &.cd-fade-out, .no-touch &:hover {opacity: 1; visibility: visible; transition: opacity .3s, visibility .3s; } &.cd-fade-out {opacity: .75; } &:hover, .no-touch &:hover {background: var(--highlight); border-color: var(--white); } &:hover i {color: var(--white); } } /*Login*/ form#changepass, .general_login, #sendinstructions {border: 1px solid var(--gray); margin: 0 auto; max-width: 360px; padding: 15px; text-align: left; h2, .logintitle {background: transparent; color: var(--dark); font-size: 18px; font-weight: 400; line-height: 25px; } .loginmessage {font-style: italic; margin-bottom: 20px; } .row {display: flex; flex-direction: column; margin: 10px 0; text-align: left; label, .label {min-width: 100px; text-align: left; } label {display: block; font-weight: 400; margin-bottom: 0; } span, .formw {display: inline-block; vertical-align: middle; } span {display: block; input {max-width: 100%; } .pwdlevel {font-size: .8em; font-style: italic; } } &:last-child {text-align: center; label {display: none;} } } .loginbtn {flex-direction: inherit; justify-content: center; text-align: center; input {width: auto; } } .forgotpassword, .errmsg {text-align: center; &.errmsg {color:var(--primary); font-size: .84em; overflow: hidden; padding: 0; } } .remember {flex-direction: row; span{width:auto;} } } #filter {display: none; } /*Search form*/ form#sitesearch {display: flex; margin-bottom: 15px; input {margin: 0; &[type="text"] {border-bottom-left-radius: 5px; border-radius: 0; border-top-left-radius: 5px; } &[type="submit"] {border-bottom-right-radius: 5px; border-radius: 0; border-top-right-radius: 5px; } } } /*Search Results*/ #searchresults {padding: 15px 0; & .search_url {border-bottom: 1px dashed var(--gray); margin-bottom: 10px; padding-bottom: 10px; } dt{ padding:5px 0px; font-size:12px;} } /*Calendar Table*/ #calendar {background: transparent; border-collapse: collapse; color: var(--primary); margin: 0 auto; width: 90%; tr { th, td {border: 1px solid var(--gray);height: 75px;width: 14.28%;vertical-align: top;padding: 5px;} th {background: var(--gray); color: var(--primary); font-family: "Inter", sans-serif; font-size: 18px; line-height: 20px; text-align: center; vertical-align: middle; } td.caption {background: var(--primary); color: var(--white); font-size: 24px; font-weight: 500; height: 50px; line-height: 50px; text-align: center; text-transform: uppercase; a.nav {color: var(--white); display: inline-block !important; font-size: 34px; height: 55px; line-height: 50px; padding: 0 20px; vertical-align: middle; } } } ul {display: block; list-style: none; margin: 0; padding: 0; li {background: var(--primary); border-bottom: 1px solid var(--white); color: var(--white); font-size: 11px; line-height: 16px; padding: 2px; a {color: var(--white); } } } } /*Default paging styles*/ #form_paging_links, #calendar_paging_links, #paging_links, #newschannel_paging_links, .gallery_paging_links {clear: both; float: none; margin: 10px 0; margin-top: 50px; text-align: center; display:flex; justify-content:center; &:after {clear: both; content: ''; display: table; } span {display: inline-block; text-align: center; a, &.gallery_next_link_inactive, &.gallery_prev_link_inactive{font-weight:300;font-size:.9em;text-transform:uppercase;background:var(--light);color: var(--text);display: block;padding: 5px 10px;display:flex;align-items:center;margin: 0 5px; &:hover{background: var(--primary); color: var(--white); text-decoration: none;} } &.gallery_next_link_inactive, &.gallery_prev_link_inactive{color:color-mix(in srgb, var(--mute) 50%, transparent); &:hover{background:color-mix(in srgb, var(--gray) 85%, transparent); color:color-mix(in srgb, var(--mute) 50%, transparent)} } &.gallery_prev_link a:before, &.gallery_next_link a:after, &.gallery_next_link_inactive:after, &.gallery_prev_link_inactive:before{content:""; font-family:bootstrap-icons!important; display:inline-block; vertical-align:middle; line-height: 1;} &.gallery_prev_link a:before, &.gallery_prev_link_inactive:before{content:"\f22d";} &.gallery_next_link a:after, &.gallery_next_link_inactive:after{content:"\f231";} .currentpage {background: var(--highlight); color: var(--white); &.gallery_prev_link_inactive, &.gallery_next_link_inactive {display: none; } } } } #paging_links { span { &.next_link {width: auto; } &.prev_link_inactive, &.next_link_inactive {display: none; } } } /* Gallery */ .imageGallery{display:flex; flex-wrap: wrap; & .ligBox {cursor:pointer;max-width:25%; position:relative; margin:2px; border:1px solid var(--gray); &:after{content:''; display:block; position:absolute; z-index:3; width:100%; height:100%; top:0; left:0;} &:hover:after{background-color: rgba(0, 0, 0, .3);} img{object-fit:cover; height:100%; width:100%; position:relative;} & .gContent{display:none;} } @media all and (min-width: 0px) and (max-width: 579px) { justify-content:center; & .ligBox {max-width: 45%;} } } /*Gallery Lists*/ .galleryLists {display:flex; flex-wrap:wrap; justify-content:start; .gallerylist {max-width:40%;flex: 0 0 auto; border: 1px solid var(--gray); text-align:center;margin:15px ;padding: 5px; h3 {margin:10px 0; text-align: center; font-size: 1.1em; font-weight:400;} p {display: none;} @media (min-width: 0px) and (max-width: 579px) { width:80%;max-width:none;flex: 0 0 auto; } } } /*Breadcrumbs*/ .breadcrumbWrapper {color: var(--text);line-height: 0;background: var(--light);transition: all .5s ease;padding: 5px 0; & .container {/* display: flex; */align-items: center;} a {color: var(--text);font-size: 12px;line-height: 1;padding: 3px 5px 3px 0;font-weight: 400;display: inline-block;} } /* ==================== Social Menu ==================== ================================================== */ #social{margin:0; position:relative; width:100%; z-index:99; margin-bottom: 30px; padding:15px 0; background:transparent; & ul{align-items:center; display:flex; justify-content:center; margin:0; padding:0; text-align:left; & li {display:inline-block; float:none; margin:0; vertical-align:middle;} & li a {color:var(--gray); display:block; padding:0!important; text-align:left; margin-right: 15px; font-size:0; border-radius:3px; overflow:hidden;} & li a span{color:var(--highlight); display:none; font-family:"Inter",sans-serif; font-size:1.2rem; font-weight:500; text-transform:capitalize; } & li a:before{color:var(--white); content:''; display:inline-block; font-family:bootstrap-icons!important; font-size:1.25rem;text-align:center; vertical-align:middle; width:34px; height:34px; line-height:34px;} & li.facebook a:before{content:"\f344";} & li.twitter a:before{content:"\f8db";} & li.instagram a:before{content:"\f437";} & li.linkedin a:before{content:"\f0e1";} & li.youtube a:before{content:"\f62b";} & li.rss a:before{content:"\f521";} & li.email a:before, & li.email a:before{content:"\f32c";} & li:hover a{background:var(--highlight); color:var(--white); transition:all .3s ease;} & li a:hover:before {color:var(--white); background:var(--highlight);} } } /* ==================== Footer ==================== */ footer {clear: both;background: var(--offwhite);color: var(--gray);z-index: 1;width: 100%;line-height: 1.6em;font-size: 14px;text-align: left;position: relative;border-top: 1px solid var(--light);margin-top: 20px; & .footerCredentials {padding-top: 20px;background:var(--primary); margin-top: 20px; & .msgLink {text-align:center;margin: 15px; a{display:inline-block;font-size: 1.3em;padding: 7px 10px;background: var(--highlight);color:var(--white);text-align:center;font-weight: 500;text-transform: uppercase;border-radius: 5px;border: 1px solid var(--highlight);} } } & .address * { color:var(--white);} & .address{display:inline-block; text-align: left; p{padding-left: 25px; word-break: break-all; i{display:inline-block;margin-left: -25px;vertical-align:middle; width: 25px; } } } & .footlogo img {max-width:200px; margin-bottom: 5px; } h4 {font-size: 1.1em; margin-top: 25px; } p span {font-size: 0.8em; display: none; } & #footnav, & .copyright { ul {margin: 0;padding: 0;list-style: none; li {display: block; a {color: var(--white);font-size: 1em;display: inline-block; &:hover {color: var(--highlight); } } & > ul {padding: 1px 0; li {font-size: 1em;font-weight: 400;} } } } } #footnav > ul {display: flex;padding: 0;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;width: 100%; li { &.head {padding-top: 10px; color: var(--text); flex: 0 0 25%; > a {color: var(--highlight);font-size: 1.2em;font-family: var(--header);font-weight: 500;padding: 0;} ul {padding-bottom: 5px; li {padding-left: 5px; font-weight: normal; text-transform: capitalize; &.head > a{ color:var(--highlight); font-family:var(--bodytext); font-weight: 500;font-size: 1em;} a {color: var(--text);font-size: 0.95em;line-height: 2em;font-weight: 400; &:hover {// Add hover color if needed } } } } } } @media all and (min-width: 0px) and (max-width: 991px) { li.head {flex: 0 0 50%;} } @media all and (min-width: 0px) and (max-width: 991px) { li.head {flex: 0 0 100%;} } } .copyright {font-size: 0.8rem;padding:10px 0 ;text-align: left; background: var(--dark); & .subfooter-nav { ul { display:flex; li {display: inline-block; vertical-align: middle; a {padding: 0 10px 0 0; &:hover {background: none !important; } } } } } span {display: block;text-align: right;color: var(--white);font-size: 12px;} @media all and (min-width: 0px) and (max-width: 991px) { & .subfooter-nav {justify-content:center;} span {text-align:center;} } } } /*Sidebar navigation*/ .Sidebar { & .Sidebar_backdrop{background: rgb(0 0 0 / 50%);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999;display:none;} & .Sidebar_body{-webkit-overflow-scrolling:touch;-webkit-transition:right .3s ease-in-out;background-color:var(--dark);bottom:0;overflow-y:auto;position:fixed;left:-320px;top:0;transition: all .3s ease-in-out;width:320px;z-index:10000;background: var(--text); & .sidebar_Close {text-align:right; button {color:var(--white); i{font-size:30px;background: var(--special);color:var(--white);display: block;} &:hover i{background:var(--dark);} } } } &.show{ & .Sidebar_body{left: 0;transition: all .3s ease-in-out;} & .Sidebar_backdrop{display:block;} } .SidebarMenu{padding: 30px 0; ul{list-style:none; margin:0; padding:0; li{ a{font-weight: 400;font-size: 15px;color: var(--white);text-decoration: none;display: block;padding: 10px 15px;text-transform: uppercase;text-align: left;cursor: pointer;} ul li{padding:0;} ul li a{text-transform:none;font-size:.96em;font-weight: 400;padding: 5px 30px;} &.hasSub{ position:relative; ul{ display:none;} span.submenu{position:absolute;top:0;right:0;width: 40px;height: 40px;color: var(--white);text-align: center;line-height: 40px;cursor: pointer; &:after{content:"\f285";font-family:bootstrap-icons!important;} } &.openSubmenu { ul{ display:block;} span.submenu:after{content:"\f282";} } &:hover span.submenu{ color:var(--special);} } } a:hover{background:var(--primary); color:var(--light);} } } } .searchBlock-collapse { & .searchBlock_backdrop{background: rgb(0 0 0 / 50%);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999;display:none;} & .searchBlock{width: 70%;margin:0 auto;padding: 65px 0;align-items: center;height: 100%;} & .searchBlock_body {-webkit-overflow-scrolling:touch;-webkit-transition:right .3s ease-in-out;bottom:0;overflow-y:auto;position:fixed;left: 0;top: 0%;transition: all .3s ease-in-out;transform: translateY(0%);width: 100%;height: 250px;z-index:10000;opacity: 0; label{ display:none;} & .fieldsRow {display: flex;width: 100%;padding: 15px;background: var(--white);border-radius: 15px;-webkit-box-shadow: 0px 0px 30px 0px rgb(66 66 66);-moz-box-shadow: 0px 0px 30px 0px rgb(66 66 66);box-shadow: 0px 0px 30px 0px rgb(66 66 66); #textfield {background: var(--white);border: 1px solid var(--gray);width:100%;bor;border-radius: 0;border-bottom-left-radius: 5px;border-top-left-radius: 5px;font-size: 1.5em;margin: 0;padding: 15px 10px;} button[type="submit"] {background:var(--primary);border-radius: 0;border-bottom-right-radius: 5px;border-top-right-radius: 5px;color: var(--white);height: 58px;width: 80px;} i {font-size:28px;} } } &.show{ & .searchBlock_backdrop{ display:block;} & .searchBlock_body {top: 50%;transform: translateY(-50%);opacity: 1;} } @media all and (min-width: 0px) and (max-width: 992px) { & .searchBlock{width: 100%;} } } /*Layout*/ body.subpage .Header .sidebar__Close i , .Header.headBg .sidebar__Close i {color: var(--white);} body.noPageHeader .Header, .Header.headBg {transition: top 0.5s ease, background 0.3s ease;box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.6);background: var(--white);transition: all .3s ease;} /* ====================header ==================== ================================================== */ .Header {position: relative; width: 100%; z-index: 999; padding: 0; top: 0; left: 0; background: var(--white); transition: all 0.3s ease; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.6); border-top: 2px solid var(--highlight); h1 {display: none; } .logo {position: relative;z-index: 999;left: 0;top: 0;margin: 0;padding: 0;display: flex;justify-content: space-between; button{ display:none;} img {position: relative;display: block;vertical-align: middle;max-width: 230px;margin: 3px 0;transition: all .3s ease;} } /*user Nav*/ .userNav{display:none;padding: 6px 0; ul{display:flex;list-style:none;margin:0;padding: 0;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: flex-end; li{min-width: 12%;padding: 0 10px;text-align: center;border-right: 1px solid var(--gray); &:last-child{border:0;} a{font-size:.8em;font-weight: 600;text-transform:uppercase;color:var(--primary);} } } &.not_logged_in li.memberarea, &.logged_in li.login{ display:none;} } .mainMenu {padding:0;background: var(--primary);border-top: 4px solid var(--highlight); .navbar{padding:0;width: 100%;display: block !important;} /*First level*/ ul.nav.navbar-nav {display: -webkit-box;display: -ms-flexbox;display: flex;list-style: none;margin: 0;padding: 0;justify-content: flex-start;align-content: space-between;align-items: center;flex-wrap: wrap;flex-direction: row; & > li {position: relative; text-align: center; transition: all 0.3s ease; & > a {color: var(--white);display: block;font-family: var(--bodytext);font-size: 1rem;font-weight: 500;padding: 12px 10px;} &:hover{ background-color: var(--highlight); & > a{background-color:var(--highlight);color:var(--white);} & > ul {display: block; } } /*second level*/ ul {display: none;left: 0;list-style: none;margin: 0;margin-top: 0;min-width: 260px;padding: 0;position: absolute;top: 100%; li {display: block; text-align: left; position: relative;} } &.no-list ul li a{display:block;padding: 12px 12px;background:var(--highlight);color:var(--white); &:hover{ background:var(--primary);} } /*third level*/ ul li ul {left: auto; right: 100%; position: absolute; top: 0; li { a{background: color: var(--white); } } } } & li.full{position:static; > ul{width:100%;top:100%;display:none;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: flex-start;background: var(--primary); li{min-width:50%; a {color:var(--white);padding:7px 15px;display:block;font-size: 1.2em;font-weight: 500;} ul{display:block;position:relative;left:0;top:0;padding-bottom: 10px; li{ a{padding-left:25px;font-size:1em;font-weight: 400; &:hover{ text-decoration:underline;} } ul li a{padding-left:30px; font-size:.9em;} } } } } &:hover > ul{ display:flex;} } } } @media all and (min-width: 0px) and (max-width: 992px) { .logo img{ max-width:200px;} .logo button {display:block;font-size: 46px;color: var(--primary);} .mainMenu {display:none;} } & #social{margin:0;padding: 10px 0; ul{ justify-content:end; & li a:before {color:var(--primary);} & li a:hover:before {color:var(--white); background:var(--highlight);} } } .NavButtons {position: relative;margin: 5px 0;display: flex;align-content: center;justify-content: flex-end;align-items: center; ul {list-style:none; margin:0; padding:0; display:flex; justify-content:flex-end; li{ a {position: relative;z-index: 2;right: 0;top: 0;margin: 0 0 0 10px;border: 0;background: var(--primary);height: 46px;padding: 5px 10px;color: var(--white);border-radius: 3px;display: flex;align-items: center;} span {font-size:0;line-height: normal;} &.member a:before{content:attr(data);} &.MHSA a{ width:175px; display:block; background:url(/image/cache/988-Suicide-Crisis-Lifeline.jpg) no-repeat center; background-size:contain;} &.Search a, &.faq a{ width:40px;} &.Search a:before{content:"\f52a";font-family:bootstrap-icons!important;font-size: 20px;} &.faq a:before{content:"\f64e";font-family:bootstrap-icons!important;font-size: 20px;} &:not(.MHSA) a:hover{ background:var(--highlight);} &.jobs a span{font-size: inherit;} } } @media all and (min-width: 0px) and (max-width: 992px) { justify-content:center; } @media all and (min-width: 0px) and (max-width: 579px) { ul { li a{height: 34px;font-size:.9em;padding: 5px;} & .MHSA a{width: 50px !important;background-size: 125px !important;background-position: -3px center !important;} & .Search a, & .faq a{ width:30px !important;} } } } &.logged_in{ & .NavButtons { & li.member a span{font-size: inherit;} & li.member a:before{content:''; display:none;} } } } .sbpgbanner{ position:relative;padding:0;overflow:hidden;background-color:#EEE;border-bottom:1px solid #DDD; } .sbpgbanner .adminArea {font-size: 3em;font-weight: 600; display: block;height: 80px;line-height: 80px;text-align: right;padding: 20px 0;color: #999;text-transform: uppercase;} /* ==================== Icons Bar ==================== */ .iconsBarWrapper {background: var(--light);text-align: center;padding: 0 !important;!i;!; & .iconsBlock.collapse {display:block;padding: 30px 0;} p{display: none;} ul {width: 100%;padding: 0;margin: 0;list-style: none;display: flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap; li {padding: 0;display: block;/* flex: 0 0 10%; */width: 8%; /* flex: 0 0 5%; max-width: 5%; */ a {display: flex; flex-direction: column; align-items: center; color: var(--primary); span.img {display:block;border: 1px solid var(--primary);border-radius:50%;} img {background: var(--white);width: 60px;padding: 5px;clip-path: circle(50% at 50% 50%);} } span {font-size: 0.9em; font-weight: 400; text-align: center; display: block; } &.menuIcon {text-align: center;justify-content: center;align-items: center;width: 4%; a.NavbarToggle {color: var(--primary); font-size: 0; padding: 15px 5px; &:after {content: "\f479"; font-family: bootstrap-icons!important; display: block; line-height: 1; color: var(--primary); font-size: 40px; } } } } } @media all and (min-width: 0px) and (max-width: 1199px) { ul{justify-content: center;} ul li{margin:10px;-ms-flex: 0 0 20%;flex: 0 0 12%;max-width: 12%;} } @media all and (min-width: 0px) and (max-width: 991px) { ul{justify-content: center;} ul li{margin:10px; -ms-flex: 0 0 30%;flex: 0 0 30%;max-width: 30%;} & .iconsBlock.collapse { display:none;} & .iconsBlock.collapse.show{ display:block;} } @media all and (min-width: 0px) and (max-width: 768px) { ul{justify-content: space-around;} ul li{-ms-flex: 0 0 25%;flex: 0 0 20%;max-width: 20%;} } @media all and (min-width: 0px) and (max-width: 576px) { ul li{-ms-flex: 0 0 25%;flex: 0 0 27%;max-width: 27%;} } } .iconsBarWrapper a.arrow {position:relative;display: block;margin: 0px auto;width: 36px;height: 50px;background: var(--light);outline: none;} .iconsBarWrapper a.arrow span {position: absolute;font-size: 0;top: 12px;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 3px solid var(--primary);border-bottom: 3px solid var(--primary);box-sizing: border-box;-webkit-transform: rotate(135deg);transform: rotate(135deg);transition: all .5s ease;} .iconsBarWrapper a.arrow span:before {content:'';display:block;width: 15px;height: 15px;border-bottom: 2px solid var(--primary);border-right: 2px solid var(--primary);transform: rotate(90deg);left: 4px;position: relative;right: 0;margin: auto;} .iconsBarWrapper a.arrow.collapsed span {top: 12px;-webkit-transform: rotate(315deg);transform: rotate(315deg);} @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } /* ==================== Back Button ==================== */ .backbutton {display:none;position: absolute; left: 0; top: 0; height: 113px; z-index: 2; transition: all 0.3s ease; span {width: 0; font-size: 0; display: none; } a {display: block; height: 100%; position: relative; background: var(--gray); padding: 0 2px; color: var(--primary); cursor: pointer; font-size: 0; transition: all 0.3s ease; i {position: relative; top: 50%; transform: translateY(-50%); font-size: 10px; &:before {font-size: 10px; } } &:hover {width: auto; padding: 0 10px; background: var(--highlight); i {color: var(--white); } } } } /* ==================== Navigation ==================== */ .Header{ .mobileTop, .subSiteNav { ul {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-end; li {margin-left: 15px; a {margin: 0; padding: 8px 10px; background: var(--highlight); color: var(--white); border: 1px solid var(--highlight); border-radius: 5px; font-size: 0.9em; font-weight: 600; text-transform: uppercase; display: inline-block; min-width: 100px; text-align: center; } } } } &.logged_in li.login { display:none;} } /*Side Navigation*/ section.pageContent{position:relative;} a#flyOut{ display:none;} .sideMenu { ul {list-style: none; margin: 0; padding: 0; margin-bottom:30px; background: var(--primary); padding-bottom: 15px; li {position: relative; &:hover > ul {display: block; } a, span {color: var(--white);display: block;font-weight: 700;padding: 10px;} a:hover {background: var(--highlight);color: var(--white);} } li ul {display: block;left: 0%;position: relative;top: 0;width: 100%;padding: 0;margin: 0; li { a {padding: 7px 15px;padding-left: 15px;border-bottom:0;font-size: .95em;font-weight: 600; &:hover {background: var(--gray); color: var(--primary); } &:hover:before {visibility:hidden;} } ul li a{padding-left:25px;font-size:.90em;font-weight: 400;} } } } } /*Side content Bar*/ .pageSideContent {background: var(--light); > h2{ color:var(--primary); padding:5px 10px; font-size:1.5em; border-bottom:1px solid var(--highlight);} &.events, &.news { .eventRow, .newsRow {padding: 5px 10px;padding-bottom: 5px;margin-bottom: 10px;border-bottom: 1px solid color-mix(in srgb, var(--mute) 20%, transparent); p{margin:0;color: var(--mute);} a{color: var(--primary);} strong{ font-weight:500;} } } } /*----------------------------------------- SlideShow------------------------------------------------------*/ /* ==================== Message Slider ==================== */ .messageSlider {position:relative; &.tao-stage, & .tao-item, & .tao-item .item{height:100%;} & .messageBlock {height: 100%;border-width: 1px;padding: 3px 0; & .container {text-align:center;display:flex;flex-direction: row;height: 100%;flex-wrap: wrap;justify-content: center;align-content: center;} } .tao-theme { .tao-dots {position: relative; flex: 0 0 25px; max-width: 25px; background: var(--gray); margin: 0 !important; display: none; // Initially hidden flex-direction: column; justify-content: flex-start; counter-reset: dots; .tao-dot {background: transparent; &:before {counter-increment: dots; content: counter(dots); display: block; width: 100%; height: 25px; padding: 4px; margin: 0 0 1px 0; border-radius: 0; background: var(--white); color: var(--primary); font-size: 10px; } &.active:before {background: var(--primary); color: var(--white); } span {display: none; } } } } .tao-carousel {button.tao-dot {background: transparent; } } } /* ==================== Subpage Header Block ==================== */ .subpageHeader-block {min-height: 100px; text-align: justify; background: var(--gray); position: relative; z-index: 2; overflow: hidden; &.no-pageHeader {height: 0; min-height: 0; } } /* ==================== Full-Width Page Header ==================== */ .flwdth.pageheader {position: relative; width: 100%; height: 100%; background-blend-mode: screen; background-clip: border-box; background-origin: padding-box; background-size: cover; background-repeat: no-repeat; background-position: top center; background-color: rgba(0, 0, 0, 0); top: 0; &:after {content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; width: 0; height: 0; border-left: 160px solid var(--special); border-top: 260px solid transparent; border-bottom: 160px solid transparent; } .image {position: relative; top: 0; left: 0; } .pageHeaderCaption {width: 100%; height: 100%; position: absolute; } .overlay.Back_ {display: none; } .Back_Black, .Back_White, .Back_Smooth.Black, .Back_Smooth.White {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: 0.7; &.Black {/* Black Gradient */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.65) 100% ); } &.White {/* White Gradient */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.65) 100% ); } } .Back_None {display: none; } .container {height: 100%; position: relative; } } /* ==================== webform post form styles ==================== ================================================== */ /*Div post template*/ .errmsg {color:var(--error);} .group_nogroup_label,.group_nogroup_tr{ display:none; } .fieldgroup{clear:both;margin-bottom: 30px; & .fieldgroup_label {border-bottom: 1px solid var(--primary);color: var(--primary);display:block;font-size: 1.3em;line-height: 1;font-weight: 500;padding-left: 5px;padding-bottom: 5px;} & .fieldgroup_desc, & .field_desc{font-weight:inherit;margin-bottom:15px; color: var(--mute); font-size: .87em; font-style: italic; } & .fieldrow{display:block;text-align:left;padding: 10px 0; & .fieldlabel{display:block;font-weight: 500; sup{font-size: .95em;color:var(--error);} } & .fieldval{display:block;width:100%; input, input[type=text], input[type=tel], input[type=email], select{width:100%;} input[type=button], input[type=reset], input[type=submit], .button{width:auto;} textarea{min-height:100px; width:100%;} input[type=file]{border:1px solid var(--gray);} input[type=radio], input[type=checkbox]{width:auto;} } } } .newPostTemplate.webform .fieldrow .fieldlabel, .newPostTemplate.webform .fieldrow .fieldval{width:auto;display:block;margin: 0 5px;} .newPostTemplate.webform .fieldrow .fieldval input[type=number], .newPostTemplate.webform .fieldrow .fieldval input[type=text], .newPostTemplate.webform .fieldrow .fieldval input[type=tel], .newPostTemplate.webform .fieldrow .fieldval input[type=email], .newPostTemplate.webform .fieldrow .fieldval select, .newPostTemplate.webform .fieldrow .fieldval textarea { width:100%;} .newPostTemplate.webform .fieldrow .fieldval input[name*='date'], .newPostTemplate.webform .fieldrow .fieldval input[name*='date'], .webform .fieldrow .fieldval input[name*='date'], .webform .fieldrow .fieldval input[name*='date']{width: calc(100% - 30px);} #date_of_birth_input{width:100%;} .webform .fieldrow .fieldval div[class*='_radio'] input[name*='date'] {width:auto;} .newPostTemplate.webform .fieldrow .fieldval input[type='checkbox']{width:auto; } .newPostTemplate.webform .fieldrow .desc{ font-size:.84em; color:var(--mute);} .newPostTemplate.webform .fieldrow .fieldlabel label{font-family: 'Lato', sans-serif;font-weight: 400;display: block;font-size: 15px;margin: 0;} .newPostTemplate.webform .fieldrow .fieldlabel label{ display:inline;} .newPostTemplate.webform .fieldrow .fieldval label{font-family:'Lato', sans-serif;font-weight: 400;font-size: 15px;margin: 0;display: inline-block;} .newPostTemplate.webform .fieldrow .fieldval div[class*="_radio"]{display:inline-block;} .newPostTemplate.webform .fieldrow .fieldval div[class*="_radio"] input, .newPostTemplate.webform .fieldrow .fieldval div[class*="_radio"] label{ display:inline-block; verticle-align:middle; width:auto;} /*modal*/ .modalData{/* display:none; */} .modal.show .close{position:absolute;right: -25px;top: -25px;background: red;z-index: 100;text-shadow: none;color: var(--white);line-height: 25px;width: 25px;font-size: 24px;padding:0;} .modalData_img img{max-height: 500px;display: block;margin: 0 auto;} .modalData_lnk{ text-align:center;} .modalData_lnk a{margin: 5px;} .modal.show .modal-body{position:relative; padding:0;} .modal.show .modal-body iframe{ border:0; width:100%;} .modal.show .modal-content{border:0;box-shadow:none;border-radius: 0;background: transparent;} /*Meeting Materials*/ .mMaterialRow{padding-bottom:5px;margin-bottom: 3px;} .mMaterialRow p{ margin:0;} .mMaterialRow a[data=''], .mMaterialRow a[data='#']{ display:none;} .fieldval .q1_radio{display:inline-block;} .fieldval .q1_radio label, .fieldval .q1_radio input{display:inline-block;width: auto;vertical-align: middle;line-height: normal;margin: 10px 3px;float: none;} .OrientationRows .vidThumb iframe{width:100%;height:100%;min-height: 300px;} /*Cart Styles*/ .ProductBlock{ display:flex;flex-direction: column;justify-content: space-between;align-items: center;height: 100%;text-align: center;border: 1px solid var(--gray);} .ProductBlock .image{ display:flex; height:100%; align-items:center;} .ProductBlock .image img{max-height: 200px;margin: 2px;display: block;} .ProductBlock .info { padding:10px;} .ProductBlock .info h4{ font-size:1.2em;} .productIndividual .details{/* padding: 10px 0; *//* border-bottom: 1px solid var(--gray); */} .productIndividual .details h3{ margin:0;} .productIndividual .details ul {padding:0;margin: 10px 0;list-style:none;} .productIndividual .details ul li {display:inline-block;min-width: 35%;color:var(--gray);font-size:.96em;} .productIndividual .details ul li.hide{ display:none;} .productIndividual .details ul li span{ color:var(--text);} .productIndividual .details .options, .productIndividual .details .promotions{/* margin-bottom:10px; */} .productIndividual .details .P_Q_C_Block {height: 100%;} .productIndividual .productDescription ul, .productIndividual .productDescription ol { margin:0; padding:0; padding-left: 15px;} .productIndividual .details .price span, .productIndividual .details .options label, .productIndividual .details .quantity span{display:block;font-size: 14px;font-weight:400;color: var(--gray);margin: 0;} .productIndividual .details .price span + span {color:var(--text);font-size: 1.5em;font-weight:bold;line-height: normal;margin-top: 5px;} .productIndividual .details .price.is_not_onsale span[id*="taoInitialPrice"], .productIndividual .details .price.is_onsale span[id*="taoInitialPrice"]{/* display:none; */} .productIndividual .details .price span[id*="taoFinalPrice"] {display:inline-block;vertical-align: middle;} .productIndividual .details .price span[id*="taoSavings"]{font-size: 1em; display:inline-block;vertical-align: middle;font-weight: normal;color: var(--gray);padding: 0 5px;line-height: normal;} .productIndividual .details .price span[id*="taoSavings"]:before{content:"(-)";} .productIndividual .details .quantity{color:var(--gray);} .productIndividual .details .quantity span{ display:block;} .productIndividual .details .quantity input{width: 50px;background:none;padding: 10px;color: var(--text);margin: 5px 0;} .productIndividual .details .cartBtn input{padding: 15px;background: color: var(--highlight);;color: var(--text);} .cartButtons {text-align:center;display: flex;flex-direction: row;align-items: center;justify-content: space-evenly;margin-top: 20px;} .cartButtons input[type="submit"] { padding: 8px 12px;} #skip_to_cart{ margin: 5px 0;font-weight: bol;} #skip_to_cart a{ border: 1px solid color: var(--highlight);; display:inline-block; padding: 0px 5px;color: var(--gray);} #skip_to_cart a:hover{ background: color: var(--highlight);; color:var(--text);} /* my orders */ .vieworders, .mydownloads { width: 100%; margin: 0; } .vieworders td, .vieworders th, .mydownloads td, .mydownloads th { border: 1px solid #c19759; border-left: 0; border-right: 0; padding: 3px 8px; text-align: center; } .vieworders th, .mydownloads th { background: #f6f6f6; line-height: 30px; } .mydownloads td { padding: 8px 5px; } /* cart universal */ .carticon { position: absolute; top: 50px; right: 10px; } .carticon ul { margin: 0; padding: 0; list-style: none; } .carticon ul li { float: left; line-height: 1em; padding: 0px 8px; border-right: 1px solid var(--gray); } .carticon ul li:last-child { border: 0px; } .carticon a { color: var(--text); } #cartbuttons ul {list-style: none;padding: 0px;margin: 0px;text-align: right;} #cartbuttons ul li {display: inline-block;margin: 3px 2px;} #cartleft #cartbuttons ul li { float: none; display: inline-block; } input.cancel {background: color: var(--gray);;border: 1px solid color: var(--light);;color: var(--text);/* display: none; */} #cartbuttons ul li .empty_cart, #cartbuttons ul li .update_cart, #returntocart {/* display:none; */} .errmsg, .taoCMSerror, .taoCMSerror .msgcontent { color:red;} /* checkout Login */ .checkout_login {width: 40%;float: left;padding: 2%;margin: 2% !important;display: block;} .checkout_loginmsg { display: none; } .logintitle {font-size: 1.3em;} .checkout_login p { font-weight: bold; font-size: 12px; } .checkout_login div { margin: 5px 0px; } .checkout_registration, .noaccount { text-align: center; } .checkout_registration, .noaccount {width: 350px;float: left;/* background: var(--white)ACD; */} .checkout_registration {display:block;margin:2%;padding:15px;height: 320px;font-size: 1.6em;} .billinginfoinput, .shippinginfoinput {max-width: 450px;margin: 10px 15px;} .billinginfoinput table, .shippinginfoinput table{ margin: 0 auto;width: 100%;} .billinginfoinput table tr td, .shippinginfoinput table tr td {/* min-width: 200px; */} .billinginfoinput table tr td input, .billinginfoinput table tr td select, .shippinginfoinput table tr td input, .shippinginfoinput table tr td select{ margin:2px;} #billingis_exemptinput{margin: 0 3px;margin-bottom: 25px;margin-top: 7px;/* height: 30px; */} .catalog_additionaloptions tr td:nth-child(1) {width: 220px;} .catalog_additionaloptions tr td:nth-child(3){text-align:left;} /* bliiing */ #billtable, #shiptable {width: 45%;margin: 15px 0;float: left;padding: 0;min-height: 150px;} #paymentinvoice h3,#billtable h3, #shiptable h3, {font-size: 1.5em;margin: 0;color: var(--text);font-weight: 600;} h3.productdiscountheading{font-size: 0.9em;margin: 0;color: var(--text);font-weight: 500;} .shippingchoice label{ display:inline-block;} #additionaltable {float:none;width:100%;clear:both;margin: 10px 0;margin-bottom: 20px;} #additionaltable .additionalfields { width:100%;} .billingaddress { margin-bottom: 20px; } .billingaddress .name, .shippingaddress .name{ font-weight: bold; } #paymentcharge { float:none; width:100%; clear:both;} .paymenttitle {margin-top: 15px;font-family:var(--subheader);font-size: 1.3em;} #paymentdiv {padding: 0;} .paymentmodule{display: block;vertical-align:top;min-width: 300px;max-width: 600px;padding: 2px 0;} .paymentchoice{font-weight: bold;font-size: 1.1em;margin-bottom: 5px;} #mail_payment_details .instructions, #paymentinstructions{margin:10px 0; background:var(--special); padding:15px; border:1px solid var(--special);} #plugnpay_details span {display: block;vertical-align: top;} #plugnpay_details .nameoncardlabel, #plugnpay_details .nameoncardinput {width: 100%;display: block;} .cardnumber-block {width: 60%;float: left;margin-right: 8px;} .codeoncard-block{width: 38%;float: left;} #plugnpay_details .cardnumber-block span, #plugnpay_details .codeoncard-block span{ display:block; } .expireoncard-block { clear:both;} .expireoncardlabel, .expireoncardinput{width:100%;} .expireoncardinput select{ width:49%;} #changeinfo {margin-top: 42px;} #changeinfo:after{ content:''; display:table; clear:both; } #changeinfo ul {margin: 0;padding: 0;list-style: none;color: var(--primary);} #changeinfo ul li { float: left; margin-right: 20px; } #changeinfo ul li:first-child{/* display:none; */} #cartbuttons{/* float: right; */margin: 15px 0;order: 4;padding: 15px 0;} #returntocart a:before, #changeinfo ul li:before {content:"\f12c";font-family:bootstrap-icons!important;display:inline-block;font-size: 16px;margin-right:5px;} #changeinfo ul li:nth-child(3):before { content:"\f38b"; font-family:bootstrap-icons!important; display:inline-block; margin-right:5px; } #changeinfo{/* display:none; */float: left;} #changeinfo ul li a {color: var(--text);font-size: 15px;} #paymentinvoice:after{content:''; display:table; clear:both; } #payment_totalamount{float:none;clear:both;width:100%;margin: 10px 0;font-size: 1.3em;font-weight: 700;text-transform: uppercase;} #giftcertificateamount{float:none;clear:both;width:100%;margin: 10px 0;font-size: 1.1em;font-weight: 600;text-transform: uppercase;} #paymentbuttons input{ margin-bottom:5px;} /*Coupon codes*/ #cartcodes {margin: 25px 0;padding: 8px;background: rgba(0, 0, 0, 0.03);} #cartcodes .errmsg{ color:var(--special); } .promocodes {padding: 0;} .orderdiscountheading{font-size: 0.94em;margin: 0;} ul.discount{padding:0;margin:0;text-align: left;list-style: none;} ul.discount li {font-size: 1.2em;font-weight: bold;} ul.discount li:before{content:"\f26a";font-family:bootstrap-icons!important;color:var(--highlight);display: inline-block;margin-right: 3px;} .catalog.code span{display:inline-block; vertical-align:middle;} .catalog.code .codevalue {display:inline-block;margin: 0;text-align: center;border: none;color: var(--highlight);text-decoration: none;background: none;border: 1px solid var(--highlight);padding: 7px 14px;display: inline-block;text-transform: uppercase;margin-right: 10px;} .catalog.code .codevalue:before{content:"\f26a"; font-family:bootstrap-icons!important; color:var(--highlight); display:inline-block; margin-right:5px;} .catalog.code .removebutton{height:42px;width: 42px;font-size:0;padding: 0;min-width: 42px;text-align:center;position: relative;overflow: hidden;margin-left: 15px;} .catalog.code .removebutton:before{content:"\f622";font-family:bootstrap-icons!important;font-size: 36px;color: var(--gray);display: block;position: absolute;width: 100%;height: 42px;top: 0;bottom: 0;margin: auto;line-height: 42px;/* background: color: var(--gray);; */} .catalog.code .removebutton input{font-size:0;height:100%;background: transparent;} .catalog.code~.catalog.codeinput{display:none;} .catalog.codeheader {font-weight:bold;font-size: 1.1em;margin-bottom: 5px;} .catalog.codeinput{/* padding:5px; */} .catalog.codeinput label{margin-right:10px;display: none;padding: 6px 0;line-height: 1;font-size: 0;} .catalog.codeinput input[type="text"], .catalog.codeinput input[type="submit"]{display:inline-block;width: 30%;margin: 0;margin-right:5px;} .catalog.codeinput input[type="submit"] {width:auto;padding: 14px 8px;font-size: 12px;width: 170px;} /* cart */ .catalogcart {width: 100%;margin: 0;border: 0;border-spacing: 0;border-collapse: collapse;} .catalogcart td, .catalogcart th {border: 1px solid var(--gray);padding: 3px 8px;text-align: center;} .cartheadings { background: var(--white); line-height: 30px; } .cartheadings th.partno, .cartitemrow td.partno{font-size:0;line-height: 0;color: var(--white);width: 0;padding: 0;border-right: 0;} .catalogcart td.qty, .catalogcart th.qty, .catalogcart td.remove, .catalogcart th.remove {/* visibility: hidden; *//* width: 0px; *//* padding: 0; *//* font-size: 0; *//* border: 0; *//* line-height: 0; */} .catalogcart td.qty span{/* border-right: 1px solid var(--gray); *//* visibility: visible; *//* display: none; */} .catalogcart td.unitprice{/* border-left:0; */} .catalogcart td.qty input, .catalogcart td.remove input{/* display:none; */} .catalogcart .itemname {padding-top: 5px;color: var(--text);text-align: left;padding-left: 25px;/* border-left: 0; *//* border-right: 0; */} .cartitemrow label{ display:inline-block;} #activecart.catalogcart .itemname{border-right: 0;} #activecart.catalogcart td.qty, #activecart.catalogcart td.remove, #activecart.catalogcart th.qty, #activecart.catalogcart th.remove{/* border:0; */} #activecart.catalogcart td.unitprice, #activecart.catalogcart th.unitprice { border-left:1px solid var(--gray);} #completeordercart.catalogcart .itemname{border-left: 0;/* border-right: 0; */} #completeordercart.cartheadings th.partno, #completeordercart.cartitemrow td.partno{font-size:0;line-height: 0;color: var(--white);width: 0;padding: 0;border-right: 0;} #completeordercart.catalogcart td.namespan{border-right: 0;} #completeordercart.catalogcart tr.totals th{border-left:0;width: 240px;} #completeordercart.catalogcart tr.totals th #completeordercart.catalogcart td.qty, #completeordercart.catalogcart th.qty{border:0;border-right:0;border-left: 1px solid var(--gray);border-spacing: 0px;} .grandtotalsavings { display:none;} .catalogcart .itemname .attributes { color: var(--text); clear: both } .catalogcart .itemname .attributes .label { width: 120px; float: left; display: block; } .catalogcart .itemname .attributes .value { margin-left: 125px; display: block; } .catalogcart p { padding: 0px; margin-top: 0px; } .catalogcart p.name{ font-weight:bold;} .catalogcart .price {color: var(--text);font-weight:bold;/* width: 100px; */border-left: 0;} .catalogcart .totalprice { /* width: 120px; */} .catalogcart .oddrow { background: var(--white); } .catalogcart .evenrow { background: var(--white); } .carttotals { line-height: 30px; } .multipleshippingchoices { margin-top: 20px; } #cart_suggested_products { margin-top: 40px;margin-bottom: 30px;} #cart_suggested_products h2{text-align:center;} #cart_suggested_products >div{ align-items: flex-start;flex-direction: row;flex-wrap: nowrap;display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap;justify-content: center;} #cart_suggested_products .ProductBlock h4 {font-size: 1.0em;} #cart_suggested_products .ProductBlock .info a.shopButton {font-size: .8em;padding: 3px 8px;} #orderinfo { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap;min-width: 100%;justify-content: center;} #orderinfo div.billinginfoinput, #orderinfo div.shippinginfoinput, #orderinfo #cartbuttons, #orderinfo #returntocart { -ms-flex: 0 0 50%; flex: 0 0 50%;max-width: 50%;margin: 0;padding: 15px;} #orderinfo div.errmsg, #orderinfo div.additionalinfoinput {-ms-flex: 0 0 100%; flex: 0 0 100%;max-width: 100%;text-align: center;padding: 15px;} h2.billinginfoheading, h2.shippinginfoheading {font-size: 1.6em;} .catalog_additionaloptions {width: 100%; } #orderinfo #cartbuttons, #orderinfo #returntocart {padding:15px 0;} /* End Talk Form Styles */ #formtable_31, #formtable_37, #formtable_38, #formtable_39, #formtable_149 {width: 100% ; border-collapse:collapse;} #formtable_8 {visibility: hidden;} #formtable_31 .view_link {display: none;} .myforms tr th { background:var(--gray); border:1px solid color: var(--gray);; padding:3px; } .myforms tr td {border:1px solid color: var(--gray);;padding: 3px 5px;} .myforms tr td .make_former, .myforms tr td .edit_link {display: inline;margin: 0 9px;font-size:.84em;} #surveyComplete .myforms { max-width:600px;} #surveyComplete.finished .myforms tr td.actions,#surveyComplete.finished .myforms tr th.actions{display:none;} /* forum */ #forum{ border:1px solid var(--gray);border-collapse:collapse; } #forum td{ padding:5px 10px;border:1px solid var(--gray); } #forum-header{ background:var(--gray);font-weight:bold; } #forum-highlight{ background:var(--gray); } #content-background{ font-size:0.82em; } /* event */ #editevent{/* background:var(--gray); */padding:20px;} #editevent label{ display:inline-block;} #editevent input{ margin-left:5px;display: inline-block;} #editevent input[name*="date"] {width: calc(100% - 40px);} #editevent select {width:auto;} #editevent #durationinput {width: auto;} #editevent table{ border:0px;margin:0px;width: 100%;} #editevent table td{ padding:3px 0px; } #editevent table td{ font-weight:bold; } #editevent textarea{width: 100%;height:100px;} #editevent table td div.field{ padding:3px 0px; } #editevent table td div.field span{ display:inline-block;width:80px; } #editevent table .currentimage{ display:none; } #editevent table.date_and_time tr:nth-child(5) {display: none;} /* ====================small size grid style declarations==================== ================================================== */ @media (min-width: 580px) { } /* ====================mobile css ==================== ================================================== */ @media (min-width: 460px) { } @media (min-width: 580px) { } @media (min-width: 640px) { } @media (min-width: 780px) { .subpage-content-block.page-content-block { margin: 20px 0; } .modal-dialog{ max-width:65%;} } @media (min-width: 991px) {} @media (min-width: 1200px) { } @media all and (min-width: 0px) and (max-width: 1199px) { } @media all and (min-width: 0px) and (max-width: 1080px) { #socail > span { display: block; line-height: normal; } #socail li a:after { line-height: normal; font-size: 25px; margin: 0 2px; } } @media all and (min-width: 0px) and (max-width: 992px) { .Navigation .navbar-collapse { display: none; } } @media all and (min-width: 0px) and (max-width: 991px) { .mobileTop {display:flex;width: 100%;flex-direction: row;justify-content: space-between;align-items: center;align-content: center;flex-wrap: nowrap;padding: 3px 0;} .Header.headBg{ border-bottom:3px solid var(--highlight);} .Header.headBg .logo img {/* max-width: 140px; */} .Header .backbutton {height: 152px;transition: all .3s ease;} .Header.headBg .backbutton {height: 118px;transition: all .3s ease;} .HeaderMenu>ul>li { padding: 0 7px; } .Navigation .navbar-collapse { display: none; } .subpageHeader-block.no-pageHeader {margin-top:140px;} /* ==================== Member Sidebar ==================== */ .SideMenuBar {position: absolute;z-index: 999;left: 0;top: -2px;width: 250px;display: flex;flex-direction: column;border: 1px solid var(--gray);transform: translateX(calc(-100% - 0px));transition: all 0.3s ease; /* Flyout Button */ #flyOut {display: block;background: var(--primary);width: 30px;height: 30px;position: absolute;top: 0;right: -30px;border-left: 0;border-top-right-radius: 5px;border-bottom-right-radius: 5px;outline: none; i {font-size: 21px;color: var(--white);font-weight: bold;line-height: 30px;text-align: center;display: block;} } /* Sidebar Content */ .memberBar {position: relative; background: var(--white); } ul {display: block;position: relative;width: 100%;margin-bottom: 0; li { ul {margin-bottom: 0; border: 0; } a {display: block;padding: 12px 15px;font-size: 1em;text-align: left; &:last-child {border: 0; /* Uncomment if needed */ } } } } /* Active Sidebar State */ &.menuFlyOut {transform: translateX(0);transition: all 0.3s ease;display: block;top: 0; & #flyOut { background:var(--highlight); i:before {content: "\f27f";} } .sideMenu{overflow-y: scroll;max-height: 100vh;} } } } @media all and (min-width: 0px) and (max-width: 880px) { } @media all and (min-width: 0px) and (max-width: 779px) { .searchBlock input[type=text] {width: 100%;} .Header .backbutton{height: 124px;} .Header.headBg .backbutton{ height:120px;} .subpageHeader-block.no-pageHeader { margin-top:120px;} .page-content-block { margin-top: 20px; padding-top: 0px; } .logo img {max-width: 100%;/* max-height: 100px; */} /* header */ .nav-top { margin-top: 0; } .nav-top li a { padding: 8px 6px !important; } .header { padding: 0px 0; border: 0; } .header > .container { width: 98%; } .Header.headBg{padding: 0;} .Header.headBg .logo{margin: 0;} .Navigation .NavbarToggle {z-index: 1;display: block;float: right;margin: 0;height: auto;} .NavbarToggle i {padding:10px 0px;} /* navigation */ .nav-top ul { margin: 0 !important; } #main-navigation { position: fixed; overflow-y: auto; width: 0; height: 100%; margin-bottom: 0; z-index: 1; left: 0; top: 0; background: var(--dark); display: none; } #main-navigation.navbar-block { display: block; } /* ====================nav bar==================== ================================================== */ footer .footer-bg { background-position: center bottom; } .footer-nav > ul > li { vertical-align: top; } .footer-nav-block { clear: both; } .footer-logo, .newsletter { width: 100%; float: none; } .Competition .display-1{ font-size:4em;} .Header.headBg .logo, .logo{} .demoImage img{ max-height:400px;} .footlogo {text-align:center;} footer .address { text-align:center;} footer .address img {/* display:block; *//* margin:0 auto; */} #gimage, #gcontent {float:none;width:100%;height: auto;margin: 0 auto;} #gcontent{margin:15px auto;width: 85%;} #gimage img {margin:auto !important;margin-top: 45px !important;width: auto !important;height: auto !important;max-width: calc(100% - 10px);} .reasons .reason span {height:auto;line-height: normal;} } @media all and (min-width: 0px) and (max-width: 639px) { .nav-top {/* display: none; */} .top-phone { float: right; } .feature-bg-block h2 { font-size: 8vw; } } @media all and (min-width: 0px) and (max-width: 579px) { .logo img, .Header.headBg .logo img {} .nav-icon a, .nav-icon { line-height: 74px; } .home-content-block, .page-content-block.news-block, .feature-blocks { padding: 30px 0; } .subpage-content-block.page-content-block { margin-top: 129px; } footer .footerMenu, footer .contact { float: none; } .footer-nav { margin-bottom: 0; text-align: center; } .footer-nav > ul { display: block; width: 100%; } .footer-nav > ul > li, .footer-nav ul li a { display: block; text-align: center; } footer .address p { text-align: center !important; margin-top: 20px; } .subfooter-nav ul,.copyright span { display: block; text-align: center; float: none; } .subfooter-nav ul { margin: 0 auto; display: block; } .subfooter-nav ul li { float: none; display: inline-block; } #socail li { margin: 0 2px; } } @media (max-width: 460px) and (min-width: 0px) { .nav-top { position: relative; text-align: right; } .Header .topNav ul li a{padding: 3px;} .searchBlock input[type=text] {width: 160px;} #socail > span { display: inline-block; vertical-align: middle; font-size: 11px; } #socail li a:after { font-size: 20px; margin: 2px; } .Competition .block-text { font-size:2em;} .Competition .display-1{ font-size:3em;} .subpageHeader-block {margin-top: 0;height: 320px;} } @media all and (min-width: 0px) and (max-width: 380px) { .Header .backbutton {height: 148px;} .Header.headBg .backbutton {height: 143px;} .Header .topNav ul {text-align:center;} .Header .topNav ul li a { padding:0 3px;} .mobileTop { display:block;} .footer-nav > ul > li { display: block; width: auto; } .Header.headBg .logo, .logo{} .logoBlock span{font-size: 2.2em;} .NavbarToggle{height: 54px;} } @media all and (orientation: landscape) and (min-height: 100px) and (max-height: 540px) { #gimage img {margin:0 !important;padding: 0;} }