// HM: Unstyled Drop In Blog template,container IDs with higher numbers represent other templates #dib-template-1{display:flex;flex-direction:row;flex-wrap:wrap;@include media-query($medium-up){margin-top: 1rem;}h1,h3,.dib-cat-menu{width:100%;text-align:center}.dib-post{h2{font-size:1.125rem}}.dib-post.dib-pinned{h2{font-size:1.5rem}}.dib-post{display:flex;flex-direction:column;width:100%;@include media-query($medium-down){border-bottom: 1px $gray-200 solid; .dib-post-title {padding: 0 .5rem; margin-bottom: 1rem;} .dib-post-readtime,.dib-post-date,.dib-post-content {padding: 0 1.5rem;}}.dib-post-title,.dib-post-categories{text-align:left}.dib-post-featured-image{order:-1}// HM: Reordering the markup as we dont have control over it .dib-post-title{order:2;text-transform:uppercase;width:100%;>a{text-decoration:none}}.dib-post-readtime{font-size:1.125rem;order:4;text-transform:uppercase}.dib-post-categories{font-size:1.125rem;order:1;text-transform:uppercase;margin:0;margin-top:1rem}.dib-post-categories:after{@include media-query($medium-up){content: " /";}}.dib-post-featured-image{order:3;width:100%;@include media-query($medium-up){order: -1;}}.dib-post-date{font-size:1.125rem;order:5;color:$gray-400;text-transform:uppercase}.dib-post-content{order:6;.dib-more{// HM: Force onto next line due to lack of control over markup font-size: 1.125rem;display:block;color:$gray-400;margin-top:1rem;text-decoration:none}}.dib-post-featured-image>a>img{width:100%;max-width:100%}&.dib-pinned{.dib-post-featured-image{order:-1;margin-bottom:0}@include media-query($medium-up){.dib-post-featured-image {order: 3; margin-bottom: 1rem;} width: 100%; align-items: center; .dib-post-title,.dib-post-categories {text-align: center;} .dib-post-categories,.dib-post-date,.dib-post-content,.dib-post-readtime {width: 65%;}}}@include media-query($medium-up){width: 50%; padding: 1rem; .dib-post:nth-child(even) {padding-left: 3rem;} .dib-post:nth-child(odd) {padding-right: 3rem;}}}.dib-pagination-next{padding:1rem;text-decoration:none;font-weight:500}}// HM - todo: Unfortunately DIB have structured the markup and class names exactly the same for Category post previews // and the main blog article page,need a brittle not statement to check if category template id is present .dib:not(#dib-template-1) > .dib-post{display:flex;flex-direction:column;align-items:center;// HM: No control of markup so this is used to create a false width container h1,.dib-post-content{padding:1rem;@include media-query($medium){max-width: 85%;}@include media-query($large-up){max-width: 65%;}}>p:not(.dib-post-featured-image){max-width:65%}.dib-post-title{order:3;text-transform:uppercase;font-size:2rem;text-align:center;margin:1rem 0}.dib-post-readtime{order:4}.dib-post-categories{order:2;margin:0;a{text-transform:uppercase;text-decoration:none;font-size:2rem}}.dib-post-categories:after{text-transform:uppercase;text-decoration:none;font-size:2rem;@include media-query($medium-up){content: "  /";}}.dib-post-featured-image{order:1;img{max-width:100%}}.dib-post-date{order:5}.dib-post-content{order:6;h1,h2,h3,h4,h5,h6{text-transform:uppercase}h1{font-size:3rem}h2{font-size:2rem}h3,h4,h5,h6{font-size:1.5rem}img{max-width:100%;height:auto}}// HM: Optional product inserts .dib-prod{margin:1.5rem 0;.dib-prod-img{@include media-query($widescreen){width: 350px;}@include media-query($medium-up){// HM: Some conflict with default CSS here,as it has different breakpoints the float none gets removed too early width: 250px; float: right;}@include media-query($medium-down){width: 100%;}}input[type=submit]{@extend .btn;@extend .btn-secondary;}}}.dib>p{@include media-query($medium-up){max-width: 65%; margin: 2rem auto;}}ul.dib-cat-menu{list-style:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;@include media-query($medium-down){margin: 1rem auto;}}ul.dib-cat-menu a{text-decoration:none;font-weight:500;padding:1rem}#dib-template-2{all:unset!important}.dib-post-wrap{width:1140px!important;max-width:min(calc(100vw - 30px),100%)!important;margin:35px auto 50px!important}.blog-video-container{margin-top:35px;display:flex;justify-content:center}.blog-hr{height:1px;border-width:0;color:#383838;background-color:#383838}.blog-description{width:750px;max-width:min(calc(100vw - 30px),100%);margin:35px auto;text-align:center;padding-top:20px;padding-bottom:20px;border-top:1px solid black;border-bottom:1px solid}@media screen and (max-width: 1140px){.dib iframe{max-width:min(calc(100vw - 30px),100%);width:1140px!important;height:auto!important}}
/*# sourceMappingURL=/cdn/shop/t/79/assets/blog.css.map */