/*
Theme Name: Natural Law
Author: Vlad Omer
Author URI: http://vladomer.com/
Version: 1
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: naturallaw
*/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: normal !important; }
a:focus, input:focus{ outline-style: none; }
textarea{ outline: none; }
*{ box-sizing: border-box; }
a{ color: inherit; text-decoration: none; }

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html{ scroll-behavior: smooth; }
body{ color: #131313; font-size: 16px; line-height: 28px;  min-height: 100vh; padding: 0; font-family: 'Lato', sans-serif; background: #FCFCFC; }

.text, .serif{ font-family: 'Merriweather', serif; }
    .text.large{ font-size: 18px; line-height: 32px; }
    .text.medium{ font-size: 16px; line-height: 24px; }
    .text.small{ font-size: 13px; line-height: 20px; }

.mt-1{ margin-top: 8px; }
.mt-2{ margin-top: 12px; }
.mt-3{ margin-top: 18px; }
.mt-4{ margin-top: 24px; }
.mt-5{ margin-top: 32px; }
.mt-6{ margin-top: 36px; }
.mt-7{ margin-top: 48px; }
.mt-8{ margin-top: 64px; }
.mt-9{ margin-top: 72px; }
.mt-10{ margin-top: 128px; }

.mb-1{ margin-bottom: 8px; }
.mb-2{ margin-bottom: 12px; }
.mb-3{ margin-bottom: 18px; }
.mb-4{ margin-bottom: 24px; }
.mb-5{ margin-bottom: 32px; }
.mb-6{ margin-bottom: 36px; }
.mb-7{ margin-bottom: 48px; }
.mb-8{ margin-bottom: 64px; }
.mb-9{ margin-bottom: 72px; }
.mb-10{ margin-bottom: 128px; }


.h1, .h2, .h3, .h4, .h5, .h6{ font-family: 'Merriweather'; font-weight: 700; line-height: 1.3 }

.h1.slim, .h2.slim, .h3.slim, .h4.slim, .h5.slim, .h6.slim{ font-weight: 300; }

.h1{ font-size: 36px; }
.h2{ font-size: 30px; }
.h3{ font-size: 28px; }
.h4{ font-size: 24px; }
.h5{ font-size: 20px; }
.h6{ font-size: 18px; line-height: 1.4; }

.centered{ text-align: center; }

.link{ color: #A74755; }
    .link:hover{ text-decoration: underline; }

header{ background: #101E3B; padding: 32px 0; }
    header .width{ display: flex; }
    header .logo img{ width: 260px; height: auto; }
    header .menu{ margin-left: auto; margin-bottom: auto; margin-top: auto; display: flex; }
        header .menu ul{ display: flex; }
        header .menu li{  margin-left: 24px; position: relative; }
        header .menu a{ color: #fff; text-transform: uppercase; font-weight: 400; font-size: 13px; letter-spacing: 1px; opacity: .8; padding-bottom: 8px; border-bottom: transparent 2px solid; }
        header .menu a:hover{ opacity: 1; }
        header .menu a.active{ border-bottom-color: #D8465C; opacity: 1; }
        header .menu li ul{ display: none; }
            header .menu li:hover ul{ position: absolute; display: block; background: #fff; z-index: 1; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 4px; padding: 12px 16px; min-width: 200px; line-height: 1; }
            header .menu li:hover ul li{ display: block; margin: 12px 0 0 0;  }
            header .menu li:hover ul li:first-child{ margin-top: 0; }
            header .menu li:hover ul a{ color: #333; font-weight: 700; margin: 0; padding: 0; }
            header .search-icon{ width: 14px; height: auto; opacity: .8; }
                header .search-icon:hover{ cursor: pointer; opacity: 1; }

.width{ max-width: 1200px; padding: 0 71px 0 71px; margin: auto; }
	.width.narrow{ max-width: 960px; }

.grid{ display: grid; grid-gap: 32px; }
    .grid-3{ grid-template-columns: repeat(3, 1fr); }
    .grid-2{ grid-template-columns: 1fr 1fr; }
    .grid-1{ grid-template-columns: 1fr; }
    .grid-3-1{ grid-template-columns: 3fr 1fr; }

.flex{ display: flex; flex-wrap: wrap; justify-content: center; margin-left: -16px; margin-right: -16px; }
    .flex-3 > div{ flex: 0 0 calc(33.33% - 32px); margin: 16px; }

.main-essay{ border: #DCDCDC 1px solid; padding: 0 71px 32px 71px; background: #fff; }

.date{ font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: #333333 }
    .date.small{ font-size: 12px; }

.homepage{ background: linear-gradient(#101E3B 200px, transparent 200px); }
    .homepage .width{ padding-top: 48px; }

.img{ display: block;}
    .img img{ width: 100%; display: block; }

.btn{ font-family: 'Lato', sans-serif; color: #fff; font-weight: 400; line-height: 1em; background: #a74755; padding: 16px 24px; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; border-radius: 3px; border: 0; cursor: pointer;}

.author{ font-size: 14px;  letter-spacing: 1px; }
    .author.small{ font-size: 12px; }
    .author em{ font-style: italic !important; }
        .author a{ text-transform: uppercase; font-weight: 700; }

.line-heading{ letter-spacing: 3px; font-size: 16px; line-height: 1em; text-align: center; font-weight: 700; position: relative;  }
    .line-heading .lines{ border-bottom: #D7D7D7 1px solid; border-top: #d7d7d7 1px solid; height: 4px; position: absolute; top: calc(50% - 2px); left: 0; width: 100%; }
    .line-heading span{ position: relative; z-index: 1; background: #FCFCFC; padding: 0 100px; }
    .line-heading.caps span{ font-size: 14px; text-transform: uppercase; padding: 0 64px; }
    .line-heading span.h3{ letter-spacing: 0; }
        .main-essay .line-heading span{ background: #fff; }

.jwinfo{ border: #C4CEE2 1px solid; border-radius: 3px; padding: 85px 64px 56px; text-align: center; margin-top: 128px; position: relative; }
    .jwinfo .h4 a{ color: #36579C; }
        .jwinfo .h4 a:hover{ text-decoration: underline; }
    .jwsymbol{ width: 128px; height: 128px; border: #C1CBDF 1px solid; border-radius: 100px; background: #FCFCFC; display: flex; align-items: center; justify-content: center; position: absolute; top: -64px; left: calc(50% - 64px); box-shadow: 0 -10px 0 24px #FCFCFC;  }
    .jwinfo .btn{position: absolute; top: calc(100% - 22px); left: calc(50% - 96px); box-shadow: 0 10px 0 24px #FCFCFC;  width: 192px; text-align: center; }

footer{ background: #F0F0F0; padding: 36px 0; margin-top: 128px; }
    footer .width{ display: flex; }
    footer .menu{ margin-left: auto; margin-top: auto; }
        footer .menu a{ margin-left: 32px; color: #36579C }
            footer .menu a:first-child{ margin-left: 0; }
        footer .menu a:hover{ text-decoration: underline; }
        footer .copy{ color: #999; font-size: 12px; line-height: 19px; }

.top-banner{ margin: -48px 0 18px 0; background: rgba(255,255,255,0.15); border-radius: 100px; font-size: 14px; color: #9DA5B7; padding: 12px 24px; line-height: 1; }
    .top-banner a{ color: #fff; }
        .top-banner a:hover{ text-decoration: underline; }

.home-grid{ grid-template-columns: 2fr 1fr; }

.podcasts{ background: #F0EFEF; border-radius: 3px; padding: 24px 0; transform: translateY(-24px); }
    .podcasts h2{ font-family: 'Merriweather', serif; letter-spacing: 3px; font-size: 16px; line-height: 1em; text-align: center; font-weight: 700; }
    .podcasts .sub{ width: 36px; height: 2px; margin: 12px auto 19px auto; background: #A74755; }

.podcast-list{ padding: 0 32px; grid-template-columns: 1fr; }

.page-wp{ background: linear-gradient(#101E3B 200px, transparent 200px); }
    .page-wp .width{ padding-top: 48px; background: #FCFCFC; }

.categories{ background: #F0EFEF; border-radius: 3px; padding: 24px 24px;  }
.categories h2{ font-family: 'Merriweather', serif; letter-spacing: 3px; font-size: 16px; line-height: 1em; font-weight: 700; }
    .categories .sub{ width: 36px; height: 2px; margin: 12px 0; background: #A74755; }

.category-list li{ list-style-type: none; }
    .category-list a{ color: #36579C; }
        .category-list a:hover{ text-decoration: underline; }

.page-img img{ width: 100%; height: auto; }

.page-wp .top{ padding: 0 103px; }
.page-content { padding-top: 36px; }
.page-content em{ font-style: italic !important; }
.page-content a{ color: #36579C; text-decoration: underline; }
    .page-content a:hover{ color:#4d73c3; }
.page-content p{ margin-top: 36px; padding: 0 103px; }
    .page-content p:first-child{ margin-top: 0; }
.page-content blockquote{ background: #F0EFEF; padding: 36px 0; margin-top: 36px; }
.page-content figure{ margin-top: 36px; }
    .page-content figure img{ max-width: 100%; display: block; }

.author-bio{ margin: 36px 103px; padding: 24px 0 0; border-top: 1px solid #ddd; color: #666; }

.essays{ display: grid; grid-template-columns: 1fr; grid-gap: 48px; }

.essays-page{ background: linear-gradient(#101E3B 200px, transparent 200px); }
    .essays-page .width{ padding-top: 48px; background: #FCFCFC; }


    .search-results .results{ display: grid; grid-template-columns: 1fr; grid-gap: 32px; margin-top: 32px; }
    .search-results article img{ display: none; }
    .search-results .results .post-edit-link{ display: none; }
    .search-results .results-inner{ padding: 0 103px; }


.popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.8); padding: 32px; }
    .popup .box{ margin: auto; background: #fff; position: relative; border-radius: 4px; padding: 24px 32px; max-width: 640px; }
    .popup .close{ position: absolute; top: 24px; right: 32px; font-size: 24px; opacity: .5; cursor: pointer; z-index: 101; }
    .popup .close:hover{ opacity: 1; }
    .popup.hidden{ display: none; }


.podcast-player{ text-align: center; margin-bottom: 48px; }
    .podcast-player iframe{ margin: auto; }
.podcast-links{ text-align: center; }
    .podcast-links > div{ display: inline-block; margin: 0 8px; }

    .popup .screen-reader-text{ display: none; }
    .popup .search-form{ display: grid; grid-template-columns: 1fr 100px; grid-gap: 24px; margin-top: 18px; }
    .popup .search-form input[type="search"]{ width: 100%; padding: 12px 24px; font-size: 16px; border-radius: 4px; border: #ddd 1px solid; }
    .popup .search-form input[type="submit"]{ background: #D8465C; color: #fff; border: none; border-radius: 4px; padding: 12px 24px; color: #fff; font-size: 16px; }

    #mc_embed_signup form{ padding: 0 !important; margin: 0 103px; }
    #mc_embed_signup .mc-field-group{ padding-bottom: 0 !important; }
    #mc_embed_signup .mc-field-group label{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
    #mc_embed_signup input.email{ margin: 0 !important; width: 100% !important; }
    #mc_embed_signup .mc-field-group{ width: 100% !important; margin-bottom: 24px !important; }
    #mc_embed_signup .indicates-required{ margin-right: 0 !important; }
    #mc_embed_signup input{ border: 0 !important; margin: 0 !important; }
    #mc_embed_signup .mc-field-group input{ border: #ddd 1px solid !important; }

.inline-post{ display: grid; grid-template-columns: 200px 1fr; grid-gap: 24px; margin-top: 32px; }
    .inline-post img{ width: 200px; height: 133px; object-position: center; object-fit: contain; }

@media (min-width: 960px){
    .mob{ display: none !important;}
}

@media (max-width: 960px){
    .desk{ display: none !important;}
        .width{ padding: 0 24px; }

    .h1{ font-size: 24px; }
    .h2{ font-size: 22px; }
    .h3{ font-size: 20px; }
    .h4{ font-size: 18px; }
    .h5{ font-size: 16px; }
    .h6{ font-size: 16px; line-height: 1.4; }

    .mt-mob-1{ margin-top: 8px; }
    .mt-mob-2{ margin-top: 12px; }
    .mt-mob-3{ margin-top: 18px; }
    .mt-mob-4{ margin-top: 24px; }
    .mt-mob-5{ margin-top: 32px; }
    .mt-mob-6{ margin-top: 36px; }
    .mt-mob-7{ margin-top: 48px; }
    .mt-mob-8{ margin-top: 64px; }
    .mt-mob-9{ margin-top: 72px; }
    .mt-mob-10{ margin-top: 128px; }

    .mb-mob-1{ margin-bottom: 8px; }
    .mb-mob-2{ margin-bottom: 12px; }
    .mb-mob-3{ margin-bottom: 18px; }
    .mb-mob-4{ margin-bottom: 24px; }
    .mb-mob-5{ margin-bottom: 32px; }
    .mb-mob-6{ margin-bottom: 36px; }
    .mb-mob-7{ margin-bottom: 48px; }
    .mb-mob-8{ margin-bottom: 64px; }
    .mb-mob-9{ margin-bottom: 72px; }
    .mb-mob-10{ margin-bottom: 128px; }

    .menu-open header .menu.desk{ display: block !important; flex-basis: 100%; }
        .menu-open header .menu a{ display: block !important; margin-left: 0; margin-top: 12px; }
        .menu-open header .menu ul{ display: block; }
        .menu-open header .menu li{ margin-left: 0; }

    .screen-reader-text{ display: none; }
    .search-form{ display: grid; grid-template-columns: 1fr 80px; grid-gap: 14px; margin-top: 18px; }
        .search-form input[type="search"]{ width: 100%; padding: 8px 12px; font-size: 14px; border: none; border-radius: 4px; }
        .search-form input[type="submit"]{ background: #D8465C; color: #fff; border: none; border-radius: 4px; padding: 8px 12px; color: #fff; }

    .line-heading{ letter-spacing: 0; }
        .line-heading span{ padding: 0 24px; }
    
    .grid.mob-break{ grid-template-columns: 1fr; grid-gap: 16px; }
    .flex.mob-break{ display: block; }

    .jwinfo{ padding: 85px 24px 56px; margin: 128px 24px; }

    .main-essay{ background: transparent; border: 0; }

    header{ padding: 12px 0; }
        header .width{ align-items: center; flex-wrap: wrap; }
        header .logo img{ width: 140px; height: auto; }
        header .menu-toggle{ width: 20px; margin-left: auto; }
            header .menu-toggle .line{ width: 100%; height: 1px; margin: 6px 0; background: #fff; opacity: .8; }

    .homepage{ background: transparent; }
        .homepage .width{ padding-top: 24px; }
        .homepage .podcasts{ transform: translateY(0) }
        .homepage .podcast-list{ padding: 0 24px; }

    .home-grid{ grid-template-columns: 1fr; }

    .top-banner{ background: #c6ccd8; border-radius: 3px; margin-top: 0; color: #666; line-height: 1.3; }
        .top-banner a{ color: #131313; }

    .page-wp .top{ padding: 0; }
    .page-content p{ padding: 0; }
    .page-content blockquote{ padding: 18px 24px; }
    .page-content figure{ margin-left: 0; margin-right: 0; }

    footer .width{ display: block; }
        footer .logo img{ width: 210px; height: auto; }
        footer .menu{ margin-top: 24px; }
            footer .menu a{ margin-left: 12px; }

    .search-results .results-inner{ padding: 0; }

    #mc_embed_signup form{ margin: 0; }


}