/*
 * These styles are outputted both of the frontend and backend of the site
 * Please note any changes you do make may also make changes to the WP backend default styles.
 * Edit with caution
 */


/* Breadcrumbs **/
.breadcrumbs .breadcrumb_last{color: var(--brand-4);}

/** Section **/
section{z-index: 1; position: relative;}

/**Section title**/
.section-title-area{margin-bottom:5rem;}
.section-title-area .section-title.h3{font-size: 4.5rem; color: var(--brand-1);}

/* Buttons in cols */
.col.has-btn .button-block { /*position: absolute; bottom: 2rem; left: 2rem; right: 2rem;*/ text-align: left; }
.tac.has-btn .button-block { text-align: center; }
.col.has-btn { position: relative; padding-bottom: 8rem;}

/**Contact Form**/
.bas-contact-form {overflow: hidden; z-index: 1; position: relative;}
.bas-contact-form .grid{grid-template-columns: 1fr 1fr;}
.bas-contact-form .title-area .background{position: absolute; top: 0; left: 0; background-color: var(--brand-4); border-top-right-radius: 5rem; mix-blend-mode: multiply; width: 100%; height: 100%; z-index: -1; margin-top: 0rem;}
.bas-contact-form .title-area .col{padding: 5rem 5rem 40rem 0rem; position: relative;} 
.bas-contact-form .title-area .col::before{content: ''; position: absolute; right: 100%; top: 0; width: 20vw; height: 100%; background-color: var(--brand-4);}
.bas-contact-form .title-area h3{font-size: 8rem; margin: 0; color: var(--brand-1);}
.bas-contact-form .bas-form{position: relative; margin-top: -35rem; padding: 5rem 0 5rem 5rem; color: #fff;}
.bas-contact-form .bas-form h5{font-weight: normal; color: #fff;}
.bas-contact-form .bas-form::after{content: ''; position: absolute; left: 100%; width: 20vw; height: 100%; top: 0; background-color: var(--brand-1); mix-blend-mode: multiply; z-index: -1;}
.bas-contact-form .bas-form .background{ border-radius: 1rem 0 0 1rem; background-color: var(--brand-1); mix-blend-mode: multiply; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;}
.bas-contact-form .bas-form input, .bas-contact-form .bas-form textarea, .bas-contact-form .bas-form select{border: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
.bas-contact-form .bas-form input::placeholder, .bas-contact-form .bas-form textarea::placeholder, .bas-contact-form .bas-form select::placeholder{color: var(--brand-2);}

@media(max-width: 768px){
    .bas-contact-form .bas-form{padding: 2rem 0 2rem 2rem;}
}

/**Related Articles**/
.related-articles { position: relative; }
.related-articles  .container{position: relative;}
.related-articles  .featured-section { background: linear-gradient(90deg, rgba(73,68,85,1) 0%, rgba(73,68,85,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); padding-bottom: 20rem; position: relative;}
.related-articles  .featured-section::before{content: ''; position: absolute; clip-path: polygon(0 0, 75% 0, 0 100%); height: 100%; width: 35%; background-color: #494455; mix-blend-mode: multiply;}
.related-articles  .featured-section h3 {font-size: 9rem;line-height: 1;margin: 5rem 0 0 0;color: #fff;}
.related-articles  .loop-related-articles { margin-top: -35rem;}
.related-articles  .loop-related-articles .grid{grid-template-columns: 1fr 1fr 1fr;}
.related-articles  .loop-related-articles .grid .col{background-color: #fff; border-radius: 1rem; overflow: hidden; position: relative;}
.related-articles  .loop-related-articles .grid .col .content{padding-bottom: 8rem;}
.related-articles  .loop-related-articles .grid .col .content h3{margin-bottom: 2rem}
.related-articles  .loop-related-articles .grid .col .button{position: absolute; bottom: 2rem; left: 2rem; }
.related-articles  .loop-related-articles .grid .col img{max-height: 250px; width: 100%; height: 100%; object-fit: cover; object-position: center;}

@media(max-width: 1024px){
    .related-articles .featured-section{background: #494455; padding-bottom: 5rem; color: #fff;}
    .related-articles .featured-section .grid{grid-template-columns: 1fr !important;}
    .related-articles .featured-section .col.pb20{padding-bottom: 2rem !important;}
    .related-articles .featured-section .col.p5{padding: 0 !important;}

    .related-articles .loop-related-articles { margin-top: 5rem; }
}

@media(max-width: 768px){
    .related-articles .featured-section h3{font-size: 5rem;}
	.related-articles  .loop-related-articles .grid .col img{max-height: 500px; height: auto;}
	.related-articles  .loop-related-articles .grid .col .content{padding-bottom: 10rem;}
}

/**Logo Slider**/
.logo-slider ul.slick-dots {list-style: none; text-align: center; margin-top: 2rem; padding-left: 0;}
.logo-slider ul.slick-dots li {display: inline;}
.logo-slider ul.slick-dots li button:before {display: block; content: ""; width: 1rem; height: 1rem; border-radius: 1rem; background: var(--brand-2);}
.logo-slider ul.slick-dots li.slick-active button:before {background: var(--brand-1);}
.logo-slider .slick-dots li button {font-size: 0; background: #fff; border: 0; cursor: pointer;}

/**Post listings**/
.post-listings{grid-template-columns:1fr 1fr 1fr;}
.post-listing{position: relative;box-shadow: 0 10px 10px var(--shadow);border-radius: 10px;overflow:hidden;}
.post-listing .post-listing-link{position:absolute;top:0;left:0;width:100%;height:100%;}
.post-listing .post-listing-content{padding:2rem;}
.post-listing .post-listing-content h3{font-size: 3rem;line-height: 1.1;}

.post-listing .post-listing-image{height: 300px;}
.post-listing .post-listing-image img{width: 100%;height: 100%;object-fit: cover;}

/**Pagination**/
.page-navigation { margin-top: 2rem;text-align:center;}

/* WYSIWYG Formats */
ul.boxed-list{ background: var(--shadow); padding: 4rem 4rem 3.5rem 4rem; list-style: inside; }
p.alert-paragraph { display: flex; align-items: center; background: var(--brand-1); color: #fff; padding: 2rem; border-radius: 2rem; margin: 4rem 0; position: relative; }
p.alert-paragraph:before { content:""; display: block; background: transparent url('/wp-content/themes/toast/assets/images/warning.svg') center center no-repeat; background-size: contain; height: 10rem; width: 16rem; margin-right: 2rem; }
section blockquote { padding: 0 0 0 6rem; border-left: 3rem solid var(--brand-1); margin: 0; margin: 3rem 0 4rem; }
section blockquote p { font-size: 4rem; line-height: 1.1; }
section blockquote p:last-of-type { margin-bottom: 0; }

/* Captions */
p.wp-caption-text { background: var(--brand-2); padding: 1rem 2rem; box-sizing: border-box; display: inline-block; color: #fff; width: 100%; border-radius: 0 0 2rem 2rem; }
div[id^="attachment_"] { max-width: 100% !important; width: 100% !important; }
div[id^="attachment_"] img { width: 100%; }
.alignleft .wp-caption-text, .alignright .wp-caption-text{margin-bottom:0 !important;}

section.swoosh { background-image: url('/wp-content/themes/toast/assets/images/swoosh.png');background-position: left 15%; background-repeat: no-repeat; background-size: contain;}
section.swoosh.light{background-color: rgba(255,255,255,0.65); background-blend-mode: lighten;}

/**NEVER REMOVE**/
.wp-block{font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;}