body.page-node-type-blog_post h2 {
  font-size: 1.5rem;
  margin: 2.2rem 0!important;
  text-transform: capitalize!important;
}

body.page-node-type-blog_post {
  background: linear-gradient(
    rgba(0, 0, 0, 0.6), 
    rgba(0, 0, 0, 0.6)
  ), url('');
  background-size: cover;
  background-repeat: no-repeat;
}

.border-y-rounded {
  border-bottom: 1px solid grey;
  border-top: 1px solid lightgray;
  border-radius: .7rem;
  margin: 2rem
}

.blog-post-related-workshops {
  font-size: 1rem;
  line-height: 1.2;
}

.blog-post-related-workshops .card-img-top img {
  max-height: 13rem;
}

.workshop-cover-img-container {
  min-height: 10rem;
  width: 100%;
  overflow: hidden;
}

.workshop-cover-img {
  height:100%;
  width:100%;
  object-fit: cover;
}

.node--type-workshop h1.page-title {
  margin-top: 1.5rem!important;
}

.workshop-bg {
  background: url('https://www.eclectic.ca/images/squares-sm.png');
    background-repeat: no-repeat;
    background-position-x: -13%;
    background-size: contain;
  z-index: -1;
}

.workshop-skill-related-blog-posts div.card-group div.card:nth-of-type(2),
.workshop-skill-related-blog-posts div.card-group div.card:nth-of-type(3) {
  display: none;
}

.workshop-skill-related-blog-posts .card-text {
  font-size: 1.1rem;
  line-height: 1.2;
}

/* Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
}
*/

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .workshop-cover-img { max-height: 12rem; }
  .workshop-bg { background-position-x: -7%; }
  .workshop-bg2 {
    background: url('https://www.eclectic.ca/images/squares-lg.png');
      background-position-x: 161%;
      background-size: 50%;
      background-repeat: no-repeat;
    z-index: -1;
  }
  .workshop-skill-related-blog-posts div.card-group div.card:nth-of-type(2) {
    display: block;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .workshop-cover-img { max-height: 14rem; }
  .workshop-bg { background-position-x: -6%; }
  .workshop-bg2 {
    background-position-x: 130%; 
    background-size: 40%;
    background-position-y: 100%;
  }
  .workshop-skill-related-blog-posts div.card-group div.card:nth-of-type(3) {
    display: block;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .workshop-cover-img { max-height: 16rem; }
  .workshop-bg { background-position-x: -5%; }
  .workshop-bg2 {
    background-position-x: 115%;
    background-size: 30%;
    background-position-y: 100%;}
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .workshop-cover-img { max-height: 18rem; left: 15%; }
  .workshop-bg2 { 
    background-position-x: 126%;
    background-size: 35%;}
}


.card-blog-post-by-tag {
  max-width:22rem;
}

.workshop-banner {
  position: relative;
  display: flex;
  flex-direction: column;
}

.workshop-banner>img {
  max-height: 26rem;
  border-radius: 25px;
  border: 1px solid grey;
}

.block-views-blockblog-block-cont-read-blog {
  line-height: 1.4rem;
}

.block-views-blockblog-block-cont-read-blog .card {
  margin: 0 .5rem;
}

/* #block-bootstrap5-sub-content .card {
  min-width:18rem;
  margin: .5rem;
} */

.page-node-type-blog_post .field--name-field-cover-image {
  display:none;
}

.page-node-type-blog_post #block-bootstrap5-sub-content {
  background-color: #fff;
  margin-top: 11rem;
}

.page-node-type-blog_post h1.page-title {
  color:#fff;
  padding-top: 7rem;
  width: 80%;
}

.page-node-type-blog_post article {
  padding-top: 2.5rem;
}

@media only screen and (min-width: 996px) {
  .page-node-type-blog_post article {
    padding-top: 5rem;
  } 
}

@media only screen and (max-width: 576px) {
  .container {
    padding-right: .75rem;
    padding-left: .75rem;
  };
}

.page-node-type-blog_post .container-fluid,
.page-node-type-blog_post .region-content
{
  padding:0px!important;
}

main
{
  color: #252525;
  font-size: 1.4rem;
  font-weight: lighter;
  padding-top: 2rem;
}

.menu--main li.nav-item {
  font-size: 115%;
}

.carousel-indicators {
  bottom: -3rem;
}

a {
  color: #00718F!important;
  text-decoration: none!important;
}

/* main {
  padding: 1rem 0rem;
} */

.region-nav-main ul.navbar-nav > li {
  margin-right:1.5rem;
}

.region-nav-main ul.navbar-nav > li:last-child {
  margin-right:0rem;
}

h1.page-title {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

body header nav.navbar {
  border-bottom: 2px #e8e8e8 solid;
  background-color: #fff!important;
}

body header nav.navbar:nth-of-type(1) {
  border-bottom: 1px #e8e8e8 solid;
  background-color: #F8F9FA!important;
}

/* for extra spacing between main menu items */
body header nav.navbar:nth-of-type(1)>li {
  padding-left: 1rem;
}

/* gives the cart icon a bit more space before showing number of items in cart */
span.cart-block--summary__icon img {
  padding-right: .4rem;
  padding-left: .9rem;
}

.block h1,
.block h2
{
  text-transform: uppercase !important;
  margin-bottom: 3rem !important;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  color: #00718F;
}

.page-node-type-blog-post .block h1,
.page-node-type-blog-post .block h2
{
  color: #fff;
  width: 80%;
  margin: auto;
}

/* moves up 'number of items' count ink just a bit to align perfectly with user menu items */
/* span.cart-block--summary__count {
  padding-bottom: .1rem;
} */

/* added to remove padding: 20px from checkout's login / continue-as-guest page */
.form-wrapper__login-option {
  padding: 0;
}

.page-item.active .page-link,
.media-library-view--widget .view-header a.page-item.is-active .page-link,
.dropdown-item.active,
.media-library-view--widget .view-header a.dropdown-item.is-active,
.dropdown-item:active {
  color: rgb(233, 255, 254)!important;
  background-color: #00718F!important;
}

.page-item.active .page-link,
.media-library-view--widget .view-header a.page-item.is-active .page-link {
  border-color: #004153;
}

.path-resources caption {
  font-size: 250%;
  padding-left: .7rem;
  padding-top: 2.3rem;
}

.path-resources .view-content a {
  font-size: 1.2rem;
}

.path-resources td {
  color: #808080!important;
}

/* HIDE ASKING FOR USER PROFILE PICTURE AFTER PURCHASE, ON 'CREATE ACCOUNT' PAGE */
#edit-completion-register-user-picture-wrapper {
  display:none;
}

.commerce-checkout-completion-register label {
  font-weight: bold;
}

.password-strength__title {
  font-size: .8rem;
}

.password-strength {
  margin-bottom: 2.5rem;
}

.region-nav-usermenu>nav ul {
  margin:auto;
  width:100%;
}

/* .region-nav-username>nav ul li {
  flex: 1;
  padding-right: 5rem;
} */

.commerce-checkout-completion-register {
  border: 1px #1c7988 solid;
  border-radius: 17px;
  padding: 2rem;
  max-width: 50%;
}

.product-overview caption {
  font-size:2.2rem;
  text-align: center;
  margin: 1.5rem;
}

.product-overview td {
  vertical-align: middle!important;
  padding: 0!important;
  margin: 0!important;
}

.product-overview td.views-field-title {
  padding-left: .5rem!important;
}

/* introducted for tip-sheet longflow block 123 */
.line-height-low {
  line-height: 1.2rem;
}

#after-content-w100-block {
  border-top: 1px solid #a0a0a0;
  background: #d7d7d7;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

#after-content-w100-block form .js-form-item {
  display: none;
}

.title-box {
  min-height: 3.8rem;
  line-height: 1.7rem;
}

#ec-checkout-order-summary .field--name-title {
  display: none;
}

#ec-checkout-order-summary {
  font-size: 1rem!important;
}

#block-checkoutprogress {
  margin: 4rem 0;
  text-align: center;
}

/* space out checkout 'bread-crumbs' */
.checkout-progress--step {
  padding-right: 3em;
}

/* extra space around checkout and update cart buttons on checkout's cart page */
.path-cart #edit-actions {
  padding-top: 1rem;
  padding-bottom: 4rem;
}

/* adds space to pager on tipsheet page's "similar items" section */
#after-content-w100-block .pagination {
  padding-top: 3.4rem;
}

/* extra spacing on user menu items */
#block-useraccountmenu ul li {
  padding-left: 1rem;
}

.btn-primary {
  color: #fff;
  background-color: darkslateblue;
  border-color: rgb(33, 34, 34);
}

.btn-primary:hover,
.btn-primary:focus
{
  color: #fff;
  background-color: #24847b;
  border-color: rgb(33, 34, 34);
}

/* right align price column in table cells */
td.views-field-total-price__number,
th.views-field-total-price__number
{
  text-align: right;
}

/* added for shopping cart columns - might have to be narrowed, but */
.view-commerce-cart-form th {
  text-transform: uppercase;
  color: seagreen;
}

.comment-wrapper {
  max-width: 45rem;
}

/* login screen wrap to prevent full width form */
form.user-login-form {
/* body.path-user .region-content { */
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* removes pretty useless field descriptions on login page, increasing clutter */
body.path-user .region-content #edit-name--description,
body.path-user .region-content #edit-pass--description
{
  display: none;
}

/* centers login (other?) button on user login page */
body.path-user .region-content #edit-actions {
  text-align: center !important;
  margin: 2rem 0;
}

/* admin side: delete confirmation prompt */
#profile-customer-delete-form {
  text-align: center;
}

/* changes font colour on delete button, to make it visible */
a#edit-delete {
  color: #fff!important;
}


/* login and password reset pages is where the following were introduced */
.bytech-sessions {
  max-width: 42rem;
  text-align: center;
}

.bytech-sessions .navbar {
  display: none;
}

.bytech-sessions label {
  margin: 0.4rem 0 !important;
}

.bytech-sessions p,
.bytech-sessions label
{
  text-align: center !important;
}

.bytech-sessions p {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.bytech-sessions .tabs-primary {
  display: none;
}

.bytech-sessions .login-logo {
  max-width: 18rem;
  margin: 4rem 0;
}

/* Added to include workshop-interest class for https://drupal.eclectic.ca/contact/workshop_interest */
.workshop-interest .form-control {
  width: auto;
}

#edit-field-anticipated-num-of-people-0-value { width: 8rem; }
#edit-field-phone-number-0-value { width: 12rem; }

.bytech-dark-bg {
  background-color: #007995;
}


/* Tames Bootstrap's container-fluid class */
/* .container-bytech .region-content, */
#block-bootstrap5-sub-local-actions
{
  max-width: 1300px;
  margin-right: auto !important;
  margin-left: auto !important;
}

.card-group {
  justify-content: center !important;
}

.workshop .card .img-fluid {
  max-height: 16rem;
}

/* workshop directories */
.uniform-dir-cards .card {
  min-height: 28rem;
  max-width: 23rem;
}

.uniform-dir-cards .card-title {
  margin: 0;
  min-height: 5rem;
  max-height: 5rem;
  color: #00718F;
}

.uniform-dir-cards .card-img-top {
  max-height: 12rem;
  min-height: 12rem;
}

.uniform-dir-cards .card-body {
  font-size: 1.1rem;
  line-height: 1.3rem;
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: thin;
}




/* blog directories */
.uniform-dir-cards-blog .card {
  min-height: 21rem;
  max-width: 23rem;
}

.uniform-dir-cards-blog .card-title {
  margin: 0;
  color: #00718F;
}

.card-img-top-container {
  max-height: 8rem;
  min-height: 8rem;
  overflow: hidden;
}

.uniform-dir-cards-blog .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uniform-dir-cards-blog .card-body {
  font-size: 1.1rem;
  line-height: 1.3rem;
  max-height: 13rem;
  overflow-y: auto;
  scrollbar-width: thin;
}





h1.page-title {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* prevents use menu items stacking in column */
#block-useraccountmenu .navbar-nav {
  flex-direction: initial;
}

#block-sitewidecontactform {
  background-color: cadetblue;
  padding-top: 3.5rem;
}

#block-sitewidecontactform div
{
  color: #fff;
  font-size: 1.1rem;
}

#block-sitewidecontactform h2
{
  color: #fff;
  font-size: 2.3rem;
}

#block-sitewidecontactform label
{
  font-size: 1.2rem;
  padding-bottom: .25rem;
  padding-left: .1rem;
  color: #000;
}

#block-sitewidecontactform #edit-actions
{
  padding-top:2.5rem;
  padding-bottom: 4rem;
}

#block-sitewidecontactform input,
#block-sitewidecontactform textarea
{
  border: 1px solid #057a9d;
}

.form-text-box {
  background:#23887e;
  border-radius: .5rem;
}

.alert {
  max-width: 1300px;
  margin-top: 3rem;
  margin-right: auto !important;
  margin-left: auto !important;
}

.case-study-h
{
  font-weight: bold;
  font-style: italic;
  color: #057a9d;
}

.branded-bullet-list {
  list-style-image: url('/sites/default/files/images/icons/check-eclectic-logo.svg');
}

/* this works, but there appears to be no way to control size of the image */
/* .ec::before {
  content: url('/sites/default/files/images/icons/check-eclectic-logo.svg');
} */

body.page-node-type-blog-post .field--name-field-blog-tags {
  padding-top: 5rem;
  padding-bottom: 2rem;
}

body.path-taxonomy .view-content {
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.path-taxonomy .node__links {
  display: none;
}

body.path-taxonomy article {
  margin-bottom: 4rem;
}

body.path-taxonomy .field--name-description {
  font-size: 2.5rem;
  margin-bottom: 4rem;
  text-align: center !important;
}

.workshop-odality-logo {
  width: 18rem;
}

.webcourses-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.webcourses-list li {
  margin: 0;
}

.btn-eclectic {
  border: 1px solid #057a9d;
  padding: .5rem !important;
  border-radius: 5px;
  margin:0;
}

/* Bootstrap classes re-defined  */
.link-warning:hover, .link-warning:focus {
  color: #ffcd39!important;
}

.link-warning {
  color: #ffc107!important;
}

.form-control,
.form-textarea-wrapper textarea
{
  width: auto;
}

/* matches size of font to icon displayed with error message on form */
.form-item--error-message
{
  font-size: 1rem;
}

.profile-page h1.page-title {
  font-size: 2.5rem!important;
  text-transform: uppercase!important;
}

#webform-submission-contact-webform-add-form label {
  color: #00454D;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 85%;
}

/* radio and check button size tame */
#webform-submission-contact-webform-add-form .form-type-radio label.option {
  font-weight: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  color: inherit;
  text-transform: inherit;
}

div.js-form-item .form-item-how-would-you-like-to-be-contacted-radios {
  margin-top: 0;
}

.form-item-how-can-we-help-you--select {
  margin-top: 0;
}

#webform-submission-contact-webform-add-form .form-check-input {
  margin-top: .5rem;
}

/* ECLECTIC SPECIFIC */

/* Used to space centered items. e.g. blog categories at https://www.eclectic.ca/resources/blog */
.spacey { padding: 2.5rem; }

/* contact form styling */
#ctct_form_1 h2 {
  margin-bottom: .8rem !important
}

/* main menu contact button border */
#block-bootstrap5-sub-main-navigation > ul.navbar-nav > li:last-child > a {
  border: 1px solid #00718F;
  padding-right: 1.3rem;
  padding-left: 1.3rem;
  border-radius: 8px;
}

#block-bootstrap5-sub-main-navigation > ul.navbar-nav > li:last-child:hover > a {
  border: 1px solid #2e2e2e;
  color: #ffffff!important;
  background-color: #00718F;
}

footer {
  border-top: 2px solid #dde4ea;
}

.btn-outline-eclectic {
  color: #fff;
  background-color: #057a9d;
}

.btn-outline-eclectic:hover {
  color: #fff;
  background-color: #0387af;
}

#webform-submission-contact-webform-add-form label,
#webform-submission-newsletter-sign-up-add-form label
{
  color: #057a9d;
  font-weight: bold;
  font-size: 85%;
  text-transform: capitalize;
}

/* Implemented for upcoming workshops home page block */
ul.pagination {
  margin-top: 5rem;
}

/* Prevents cards from stretching to full width on md displays */
.max-card-width {
  max-width:26rem;
}

/* Blog RSS Feed icon */
.feed-icon {
  width: 35px;
  height: 35px;
  background-size: contain;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Program Options Table */
.tm:before, .tm:after {
  content: '.';
  color: #d1de79;
  line-height: .0001rem;
  display: table;
}

.tm:after {
  clear:both;
}

.header-row {
  border-bottom: dotted 2px #2c2c2c
}
.normal-row {
  border-bottom: dotted 1px #cdcdcd;
}
.col-lea {
  background-color: #d6ddda;
}
.col-per {
  background-color: #9fccd7;
}
.col-res {
  background-color: #d1de79;
}

.normal-row .col-6 {
  line-height: 1.2rem;
  font-size: 90%;
} 

.desc-col {
  font-size: 1rem!important;
}

.desc-col-header {
  padding-right: 0!important;
  padding-left: 0!important;
  font-weight: bolder;
}

@media (min-width: 768px) {
  .desc-col {
    font-size: 1.2rem!important;
  }
  .desc-col-header {
    padding-right: inherit!important;
    padding-left: inherit!important;
  }
}

@media (min-width: 992px) {
  .desc-col {
    font-size: 1.4rem!important;
  }
  .desc-col-header {
    padding-right: inherit!important;
    padding-left: inherit!important;
  }
}