/*
 * 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
 */

/* Presets */
* {box-sizing: border-box;}
img {max-width: 100%;vertical-align: middle;height: auto;}

/* Grid */
.grid {display: grid;grid-gap: 30px;}

/**Generic Hero**/
.generic-hero-breadcrumbs{background:#3a42b4;color:#ffffff;padding:.75rem 0;font-size:1.5rem !important}
.generic-hero-breadcrumbs a{transition:all .25s;}
.generic-hero-breadcrumbs a:hover{color:#ECFEAA}
.generic-hero{padding:5rem 0;background:#4D55CC;color:#ffffff;}
.generic-hero h1{font-size:4.5rem;}

/**Section Title**/
.section-title-area{text-align:center;margin-bottom:5rem;}
.section-title-area .section-title{font-size:4rem}

/* Container */
.container {width: 100%;max-width: 1170px;margin: 0 auto;padding: 0 20px;position: relative;}

/**Checklist**/
.checklist ul{list-style-type:none;padding:0;font-size:1.75rem;}
.checklist ul li{position:relative;padding-left:2.5rem;line-height:1;padding-bottom:1rem;}
.checklist ul li:before{content:'';width:15px;height:15px;display:inline-block;position:absolute;left:0;top:0;background-image:url('/wp-content/themes/toast/assets/images/checkbox.svg');background-size:cover;}
.checklist.white ul li:before{background-image:url('/wp-content/themes/toast/assets/images/checkbox-white.svg');}

/**Course listings**/
.course-listings{grid-template-columns:1fr 1fr 1fr 1fr;}
.course-listings .course-listing{text-align:center;position: relative;}
.course-listings .course-listing .course-listing-link{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.course-listings .course-listing .course-listing-image{position: relative;}
.course-listings .course-listing .course-listing-image > img{border-radius:10px;}
.course-listings .course-listing .course-listing-image .course-author-image{position:absolute;bottom:0;left:50%;transform:translate(-50%, 50%);max-width:70px;}
.course-listings .course-listing .course-listing-image .course-author-image img{border-radius:10px;border:2px solid #ffffff;}
.course-listings .course-listing .course-listing-content{padding-top:45px;}
.course-listings .course-listing .course-author{font-size:1.5rem;}
.course-listings .course-listing .course-listing-title{font-size:1.75rem;margin-bottom:1rem;margin-top:1rem;color:#4D55CC;font-weight:400;line-height:1.2;}

/**Blockquote**/
blockquote{padding:2rem;background:#4D55CC;color:#ffffff;font-style:italic;margin:2rem 0;border-radius:10px;}
blockquote strong{margin-top:2rem;font-style:normal;display:block;font-size:1.5rem;}

/**Pagination**/
.pagination{text-align:center;margin-top:3rem;}
.pagination a, .pagination span{padding:1rem;background:#4D55CC;display:inline-block;color:#ffffff;line-height:1;border-radius:7px;margin:0 .25rem}
.pagination .dots{background:transparent;color:inherit;padding:0;}

/**Post Listings**/
.post-listings{grid-template-columns:1fr 1fr 1fr;grid-gap:20px;}
.post-listings .post-listing{border:1px solid #efefef !important;border-radius:10px;overflow:hidden;transition:all .25s;}
.post-listings .post-listing:hover{box-shadow: 5px 10px 50px 0 rgba(140,79,251,.1),10px 5px 70px 0 rgba(26,14,71,.1)}
.post-listings .post-listing .post-listing-content{padding:2rem;}
.post-listings .post-listing .post-listing-content .post-listing-title{font-size:2.5rem;}

/**Fix appearance of buttons iphone**/
input[type=text], input[type=button] { -webkit-appearance: none; -webkit-border-radius: 0; }

@media(max-width:768px){
    /**Section Title**/
    .section-title-area .section-title{font-size:3rem}

    /**Course listings**/
    .course-listings{grid-template-columns:1fr 1fr;}
}

@media(max-width:400px){
    /**Course listings**/
    .course-listings{grid-template-columns:1fr;}
}