/* @import url('http:%20//example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/

/*****************************************/
/* HEADER STUFF */
/*****************************************/

#blog_header { background-color: white; border-bottom: 1px solid #CCC; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; }
#blog_header .dimensions_logo { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; }
#blog_header .dimensions_logo img { max-height: 100%; height: 100%; width: 100%: }
#blog_header .header__container { border-top: 1px solid #CCC; }
#blog_header .header__container .custom-menu-primary .hs-menu-wrapper>ul>li>a { color: #000; }
#blog_header_nav { border-top: 1px solid #CCC; }
#blog_header_nav .inner-wrapper { max-width: 1200px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 1fr 200px; grid-gap: 10px; width: 100%; padding: 0 10px; }
#blog_header_nav .header_search { order: 2; display: flex; align-items: center; }
#blog_header_nav .header_nav { display: flex; flex-direction: row; align-items: center; justify-content: space-around; }
#blog_header_nav .header_nav a { padding: 5px 10px; box-sizing: border-box; font-size: 0.9em; color: #333; text-transform: uppercase; letter-spacing: 0.5px; }
#blog_header_nav .header_nav a: active,
#blog_header_nav .header_nav a.active,
#blog_header_nav .header_nav a:hover { border-bottom: 4px solid #00ABEE; }
#blog_menu_toggle { display: none; }

@media (max-width: 1000px) { 
 #blog_header .dimensions_logo { width: calc(100% - 70px); height: 70px; justify-content: left; margin: 0 0 0 10%; }
 #blog_menu_toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 60px; height: 70px; }
 #blog_header_nav { display: none; } 
 #blog_header_nav.visible { display: block; }
 #blog_header_nav .inner-wrapper { padding: 10px 0 20px; box-shadow: inset 0 5px 10px rgb(0 0 0 / 10%); grid-template-columns: auto; grid-template-rows: 1fr; width: 100%; }
 #blog_header_nav .header_nav { flex-direction: column; }
 #blog_header_nav .header_nav a { padding: 15px 10px; min-width: 100px; text-align: center; }
 #blog_header_nav .header_search { margin: 10px auto 0; padding-bottom: 10px; height: 50px; width: 100%; order: -1; }
 #blog_header_nav .header_search * { margin: 10px auto 10px; text-align: center; width: 90%; }
}



/*****************************************/
/* CONTENT STUFF */
/*****************************************/


#dimensions-home { background-color: #D9D8D6; }
#dimensions-home .content-wrapper { padding-top: 90px; width: 100%; max-width: 1400px; margin: 0 auto; }
.main-content { display: grid; grid-template-columns: 1fr; grid-gap: 10px; padding: 20px; }

.dimensions-pagination { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: row; margin-bottom: 0; padding-bottom: 40px; }

.dimensions-posts { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px 30px; }
.categories a: link { color: #00ABEE; font-style: italic; text-decoration: none; }
.image { z-index: 3; border-radius: 2px; width: 100%; padding-top: 56.25%; background-color: white; overflow: hidden; position: relative; }
.image img { transform-origin: center; transform: scale(1.0); transition: transform 1s; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0 ; bottom: 0; right: 0; }

.actions,
.socials { display: inline-block; }

.actions a img,
.socials a img { width: 30px; height: 30px; border-radius: 100%; opacity: 0.5; }

.actions a:hover img,
.socials a:hover img { opacity: 1; }
.socials a { padding: 2px; }



.featured-dimensions-post { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0; margin: 10px 20px; background-color: white; border-radius: 2px; }
.featured-dimensions-post h2, 
.featured-dimensions-post h2 a { color: #000; margin-bottom: 0; font-size: 1.25em}
.featured-dimensions-post .content { display: grid; grid-template-rows: 1fr 50px; align-items: center; padding: 30px 40px 10px 30px; border-left: 1px solid #CCC; } 
.featured-dimensions-post .exerpt { margin-bottom: 1.5em; }
.featured-dimensions-post p { margin-bottom: 0; }
.featured-dimensions-post .actions-bar { border-top: 1px solid #CCC; display: flex; justify-content: space-between; align-items: center; height: 50px; }

.dimensions-post { width: 100%; min-height: 300px; display: block; border-radius: 2px; }
.dimensions-post h2, 
.dimensions-post h2 a { color: #000; margin-bottom: 0; font-size: 1.25em}
.dimensions-post .body { z-index: 2; color: #999; border-radius: 2px; position: relative; display: block; width: auto; background-color: white;border-top: 1px solid #CCC; padding: 2em 2em 2.5em; }
.dimensions-post .exerpt { margin-bottom: 1.5em; }
.dimensions-post p { margin-bottom: 0; }
.dimensions-post .actions-bar { z-index: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #EEE; height: 50px; width: 98%; margin: 0 1%; padding: 0 10px 0; position: relative; transform-origin: top; transform: translateY(-50px); border-radius: 3px; opacity: 0; }

.trending { margin: 0; padding: 0; }
.trending-block { margin: 0 0 0 10px; background-color: white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); border-radius: 3px; height: auto; padding-bottom: 5px; }
.trending h3 { font-family: 'Lato'; color: #999; padding-top: 15px; position: relative; display: block; text-transform: uppercase; letter-spacing: 0.5; text-align: center; }
.trending-post { margin: 10px 10px 15px; text-align: center; margin-bottom: 10px; }
.trending-post: last-child { border-bottom: none; }
.trending-post .image { margin-bottom: 5px; height: 140px; border-radius: 2px; }
.trending-post .categories a { font-size: 0.9em; }
.trending-post h2 { margin-top: -5px; margin-bottom: 30px; font-size: 1.25em; color: #555}
.trending-post:hover h2 { color: #000; }

.featured-dimensions-post { 
/* box-shadow: 0 0 10px rgb(0 0 0 / 50%); */
 box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; 
 border-radius: 3px; 
  
}

.dimensions-post .image,
.dimensions-post .body,
.dimensions-post .actions-bar { 
 /*	box-shadow: 0 0 6px rgba(0, 0, 0, 0); */
/* box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; */
 box-shadow: rgba(0, 0, 0, 0.0) 0 0 0; 
 transition: box-shadow 0.3s, height 0.2s; 
}

.featured-dimensions-post:hover .image,
.dimensions-post:hover .image,
.trending-post:hover .image,
.dimensions-post:hover .body,
.dimensions-post:hover .actions-bar { 
 /*	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); */
 box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px; 
 transition: box-shadow 0.3s, height 0.2s, transform 0.2s; 
}

.featured-dimensions-post:hover .image { box-shadow: 0 0 10px rgb(0 0 0 / 50%); border-radius: 3px; transform: scale(1.01)}
.dimensions-post:hover .image { box-shadow: 0 0 10px rgb(0 0 0 / 50%); border-radius: 3px; transform: scale(1.01)}
.dimensions-post:hover .exerpt { color: #000; }
.dimensions-post:hover .actions-bar { 
 opacity: 1; 
 transform: translateY(0); 
 transition: transform 0.5s, opacity 0.25s; 
}


.featured-dimensions-post:hover .image img,
.dimensions-post:hover .image img,
.trending-post:hover .image img { 
 transform: scale(1.1); 
 transition: transform 1s
}


@media(max-width: 1000px) { 
 .dimensions-posts { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 700px) { 
 .dimensions-posts { grid-template-columns: 1fr; }
}
@media(max-width: 500px) { 
.featured-dimensions-post { width: 90.5%; min-height: 200px; display: block; border-radius: 2px;}
.featured-dimensions-post h2, 
.featured-dimensions-post h2 a { color: #000; margin-bottom: 0; font-size: 1.25em}
.featured-dimensions-post:hover .body { z-index: 2; color: #999; border-radius: 2px; position: relative; display: block; width: auto; background-color: white; }
.featured-dimensions-post: hover .exerpt { margin-bottom: .25em; }
  .feature-dimensions-post:hover .actions-bar {  opacity: 1; 
 transform: translateY(0); 
 transition: transform 0.5s, opacity 0.25s; 
 /*	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); */
 box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px; 
}
.dimensions-posts { grid-gap: 50px; }
.main-content { grid-template-columns: 1fr; grid-gap: 20px; }
}
 

/*****************************************/
/* FOOTER STUFF */
/*****************************************/

#blog_footer { background-color: #5B6771; color: white; border-top: 1px solid #CCC; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; margin: 0 auto; padding: 0; }
#blog_footer .inner-wrapper { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-around; padding: 20px; }
#blog_footer .blurb { display: flex; flex-direction: row; align-items: center; }
#blog_footer .blurb .avatar img { max-width: 100px; max-height: 100px; background-color: #000; border-radius: 100px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; }
#blog_footer .blurb p { max-width: 280px; width: 100%; padding-left: 20px; text-align: left; font-size: 0.9em; }
#blog_footer .socials { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 10px; }
#blog_footer .socials > div { margin: 0 5px; }
#blog_footer .socials * { width: 30px; height: 30px; }
#blog_footer .lauft_logo { text-align: left; padding-bottom: 25px; }
#blog_footer .lauft_logo > span { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; color: #FFF; opacity: 0.5; display: block; margin-bottom: 10px; }
#blog_footer .super-footer { background-color: #000; color: #CCC; text-align: center; margin: 0; padding: 10px; text-align: center; }

@media (max-width: 800px) { 
 #blog_footer .inner-wrapper { flex-direction: column; padding-bottom: 0; }
 #blog_footer .inner-wrapper > div { margin: 10px auto; border-bottom: 1px solid rgba(255,255,255,0.25); }
 #blog_footer .blurb { padding-bottom: 20px; }
 #blog_footer .socials { padding-bottom: 20px; order: 3; border-bottom: none!important; }
 #blog_footer .lauft_logo > span { text-align: center; }
}