/*
Theme Name: Time Project
*/

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; }

@font-face { font-family: 'clarika'; src: url(fonts/ClarikaProGrot-Rg.woff) format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-bold'; src: url(fonts/ClarikaProGeo-Bd.woff) format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-geo'; src: url(fonts/ClarikaProGeo-Rg.woff) format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-light'; src: url(fonts/ClarikaProGeo-Lt.woff) format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'clarika-dm'; src: url(fonts/ClarikaProGrot-Dm.woff) format('woff'); font-weight: normal; font-style: normal; }

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

body{ font-family: 'PT Serif', sans-serif; padding: 0; background: #FCFCFC; color: #303030; }

.width{ max-width: 1200px; margin: auto; padding-left: 32px; padding-right: 32px; }

.top-menu{ background: #FCFCFC; z-index: 2; font-family: 'clarika'; display: flex; border-bottom: #D2D5D9 1px solid; padding: 24px 0; align-items: baseline; }
.top-menu .logo{ font-family: 'clarika-geo'; font-size: 24px; }
  .top-menu .logo span{ color: #E72121; }
  .top-menu .logo a{ color: inherit; text-decoration: none; }
  .top-menu .nav{ margin-left: auto; }
    .top-menu .nav a{ text-transform: uppercase; font-family: 'clarika-bold'; font-size: 13px; letter-spacing: 1px; text-decoration: none; margin-left: 32px; color: #626466; }
    .top-menu .nav a:hover{ color: #000; }

.posts{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 48px; padding: 64px 0; }
    .posts .entry-title{ font-family: 'clarika-dm', sans-serif; font-size: 30px; line-height: 1.2; margin-top: 10px; }
        .posts .entry-title a:hover{ color: #000; }
    .posts .date{ color: #E72121; font-family: 'clarika-dm'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
    .posts .entry-summary{ color: #303030; font-size: 16px; line-height: 26px; margin-top: 16px; }
    .posts .post-edit-link{ display: inline-block; margin-top: 8px; color: #3569b9; }
        .posts .post-edit-link:hover{ text-decoration: underline; }
    .posts .post{ border-top: 1px solid #D2D5D9; padding-top: 48px; }
    .posts .post:first-child, .posts .post:nth-child(2){ border-top: 0; padding-top: 0; }


.single-wp{ padding: 48px 204px; }
    .single-wp .entry-title{ font-family: 'clarika-dm', sans-serif; font-size: 36px; line-height: 1.2; margin-top: 10px; }
        .posts .entry-title a:hover{ color: #000; }
    .single-wp .date{ color: #E72121; font-family: 'clarika-dm'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
    .single-wp .entry-content{ color: #303030; font-size: 16px; line-height: 26px; margin-top: 16px; margin-top: 32px; }
        .single-wp .entry-content > *{ margin-top: 32px; }
    .single-wp .post-edit-link{ display: inline-block; margin-top: 8px; color: #3569b9; }
        .single-wp .post-edit-link:hover{ text-decoration: underline; }
    .sub{ background: #E72121; width: 64px; height: 2px; margin-top: 18px; }

    .single-wp .entry-content i, .single-wp .entry-content em{ font-style: italic !important; }
    .single-wp .entry-content b, .single-wp .entry-content strong{ font-style: italic !important; font-weight: 700; }

.footer{ background: #F0F0F0; padding: 32px 0; font-family: 'clarika', sans-serif; font-size: 14px; }
    .footer .width{ display: flex; }
    .footer .nav{ margin-left: auto; }
    .footer .nav a{ color: #707a8a; text-decoration: none; margin-left: 32px; }
        .footer .nav a:hover{ color: #000; }

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

@media (max-width: 960px){
    .width{ width: 100%; padding-left: 24px; padding-right: 24px; }
    .single-wp{ padding: 32px 0; }
    .desk{ display: none; }
    .top-menu{ position: relative; padding: 16px 0; }
        .top-menu .mob-toggle{ position: absolute; right: 0; top: 22px; width: 18px; }
        .top-menu .mob-toggle > div{ width: 100%; height: 2px; background: #343434; margin: 4px 0; }
    .top-menu .nav{ display: none; }
        .menu-open .top-menu .nav{ display: block; position: absolute; top: 56px; left: 0; width: 100%; z-index: 100; background: #fff; width: 100%; padding: 12px 0; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2); }
        .menu-open .top-menu .nav a{ display: block; padding: 8px 24px; text-transform: none; letter-spacing: 0; line-height: 1; margin: 0; font-size: 18px; }
        .menu-open .top-menu .copy{ margin-top: 32px; font-size: 14px; padding-left: 24px; font-family: 'clarika-geo'; }
    .top-menu .width{ height: 48px; align-items: center; justify-content: center; padding: 0; }

    .posts{ grid-template-columns: 1fr; grid-gap: 48px; padding: 64px 0; }
        .posts .post:nth-child(2){ border-top: 1px solid #D2D5D9; padding-top: 48px; }
    .footer .width{ flex-direction: column-reverse; }
    .footer .nav{ margin-top: 18px; margin-left: 0; margin-bottom: 18px;  }
    .footer .nav a{ margin-right: 32px; margin-left: 0; }
}