/*  
  Theme Name: Clean
  Theme URI: motivara.com
  Description: grid, multi-column mid-section. 1 sidebar left, 1 right. variable width. 
  Browsers: Firefox v75, Chrome v81, Opera v68, Safari v5, Edge v81, Lunascape v6.
  Version: 1.0
  Author: Motivara Corporation (James Dunn : Development | Alyce Hoggan : Design)
  Author URI: motivara.com
  Tags: responsive, grid, multi-column, variable width, mobile-first

  Breakpoints:
    Mobile   < 500px 
    Tablet  >= 500px < 1000px
    Desktop >= 1000px

*/

  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

/* mobile first */
  .burger {
    font-size: 1.4em;
    display: block;
    right: 0;
    float: right;
    padding: 4vw 6vw 2vw 0;
  }
  body {
    font-family: Georgia, Verdana, Tahoma, Arial, sans-serif;
    font-size: 18px;
    font-size: 4.8vw;
    margin: 0;
    padding: 0;
    color: #7F715C;
  }
  span.nobreak {
    white-space: nowrap;
  }
  .main {
    background-color: #fff;
    padding: 60px;
    padding: 6vw;
  }

  .midsection3 {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   background-color: rgb(166,163,156);
   padding: .8vw 2vw;
   margin-top: 0;
   margin-bottom: 1vw;
   color: #D8D6CE;
   font-size: 3vw;
  }
  .title {
    padding-top: 32px;
    padding-top: 16vw;
    padding-bottom: .82vw;
  }
  .subtitle {
    font-size: 9.6px;
    font-size: 3vw;
    height: 2vw;
    padding-left: 0vw;
    padding-bottom: 2vw;
    color: rgb(88,86,78); /* darker for smaller devices */
    font-weight: 600;
    font-family: 'Cinzel', serif;
  }
  .lines {
    border-top: 1px dotted #A8957B;
    border-bottom: 1px dotted #A8957B;
    padding: 5px 0;
  }
  .redmark {
    width: 10px; /* Safari 5 */
    width: 2vw;
    margin-left: -35px;
    margin-left: -3.5vw;
    display: inline;
  }
  .cinzelFont {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-size: 5.4vw;
    font-weight: 600;
    color: #333;
    /*text-shadow: 0 2px 4px rgba(0,0,0, 0.1);
    text-shadow: 0 0.2vw 0.4vw rgba(0,0,0, 0.1);*/
    padding-left: 24px;
    padding-left: 1.4vw;
  }
  .cinzelFont2 {
   font-family: 'Cinzel', serif;
   font-size: 4vw;
   font-weight: 600;
   color: #000;
  }

@media (min-width: 500px) {
  /* tablet */
  body {
    font-size: 2.8vw;
  }
  .subtitle {
    height: 1.3vw;
    font-size: 2.43vw; /* smaller for mid */
    color: rgb(182,180,173); /* lighter for mid */
  }
  .lines {
    border-top: 0.1vw dotted #A8957B;
    border-bottom: 0.1vw dotted #A8957B;
    padding: 0.5vw 0;
  }
  .cinzelFont {
    font-size: 5vw;
  }
} /* tablet */

  a:link {
   text-decoration: none;
  }
  .redLink {
   color: #990033;
   font-weight: bold;
   font-family: Georgia, Times, serif;
   display: block;
  }
  .blkLink {
   color: #000;
  }
  .welcomeMsg {
    font-style:italic;
    font-size: 4vw;
  }
  .spacer {
   line-height: 1.1vw;
  }
  .cc {
   width: 195px;
  }

  img {
   width: 100%;
  }

  .panelA, .panelAP {
   background-color: #D8D6CE;
   padding: 40px 40px 20px 40px;
  }
  .panelB, .panelBP {
   font-style: italic;
   background-color: #D8D6CE;
   padding: 40px 40px 20px 40px;
  }
  h1 {
    padding-top: 100px;
  }
  .header{
    width: 100%;
    position: fixed;
    background-color: #fff;
    left: 0;
    top: 0;
  }
  nav {
    display: none;
  }
  .responsive {
    display: block;
    height: 100vh;
    padding-top: 3vw;
    overflow: scroll;
  }
  .responsive a {
    display: block;
    font-size: 1.7em;
    padding: 3.5vw 8vw;
    color: #7F715C;
  }  
  .hold {
    overflow: hidden;
  }
  .content h2 {
    font-family: Georgia, Trebuchet MS, sans-serif;
    font-size: 1.1em;
    padding-bottom: 0;
    color: #353535;
    margin-top:0;
    padding-top:.5vw;
    border-top: .1vw dotted #A79678;
    margin-bottom:.5vw;
  }
  .midcol3x p.head {
    padding-bottom: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    color: #990033;
  }
  .midcol3x a {
    color: #990033;
  }
  .midcol3x a:hover {
    color: #000;
  }
  .histA {
    line-height: 2em;
    width: 215px;
  }
  .midsection3 a {
    color: #D8D6CE;
  }
  .midsection3 a:hover {
    color: white;
  }
  .midcol3E2 p {
    font-family: Verdana, Helvetica, Sans-serif;
    font-size: 1em;
    width: auto;
  }
  .midcol3E2 img {
    height: 150px;
    width: auto;
  }
  .noniframe {
    border: 1px solid #6699CC;
    width: 410px;
    height: 130px;
    padding: 10px;
    margin: 0 0 20px 0;
  }
  .noniframe p {
    color: #333333;
    font-family: Arial,Helvetica,clean,sans-serif;
    font-size: 13px;
    line-height: 20px;
    padding: 0;
    width: auto;
  }
  .noniframe img {
    height: auto;
    width: 130px;
  }
  .noniframe a {
    color: #369;
    text-decoration: underline;
  }
  .noniframe h1 {
    padding-top: 0;
    font-size: 18px;
    font-family: Arial,Helvetica,clean,sans-serif;
    margin: 0;
  }
  .noniframe h1 a {
    text-decoration: none;
  }
  .cover {
    float: left;
    margin-right: 10px;
  }

  .noniframe.narrow .cover img {
    border: 1px solid #000;
    width: 65px;
  }
  .noniframe.narrow {
    height: auto;
    width: 195px;
    line-height: 20px;
  }
  .noniframe.narrow p {
    margin: 0;
  }
  .noniframe.narrow h1 {
    font-size: 18px;
    margin: 0 0 8px;
  }
  a.hvblk {
    color: #7F715C;
  }
  a.hvblk:hover {
    color: black;
  }
  a {
    color:black;
  }
  a:hover {
    color: #990033;
  }
  .post p {
    padding-bottom: 20px;
    padding-bottom: 1.2vw;
  }
  .entry ul {
    color: #7F715C;
    font-family: Georgia, Times, Serif;
    padding: 0 0 20px 14px;
    padding: 0 0 2vw 1.4vw;
    margin: 0;
  }
  .entry li {
    list-style-type: square;
    display: list-item;
  }

  .panelA ul {
    padding: 0 0 20px 14px;
    padding: 0 0 2vw 1.4vw;
    margin: 0;
  }
  .panelA li {
    list-style-type: square;
    display: list-item;
  }

  .calendar {
    line-height: 1.5em;
    font-size: 1.2em;
  }
  /* ---------------------------------------------------------------------- */
  /*-- MOBILE GRID SPECIFICATION -- */
  .burger {
    justify-self: end;
  }
  .wrapper {
    display: grid;
    grid-gap: 1vw;
  }
  .wrapperC {
    display: block;
  }
  .mainheader { 
    grid-row: 1; 
    grid-column: 1;
    padding-bottom: 0.5em;
  }

  .panelA {
    grid-row: 4;
    grid-column: 1;
  }
  .content {
    grid-row: 2;
    grid-column: 1;
  }
  .panelB {
    grid-row: 3;
    grid-column: 1;
  }

  .panelAP {
    grid-row: 2;
    grid-column: 1;
  }
  .contentP {
    grid-row: 3;
    grid-column: 1;
  }
  .panelBP {
    grid-row: 4;
    grid-column: 1;
  }
  .mainfooter {
    grid-row: 5;
    grid-column: 1;
    padding-top: 0.5em;
  }

  .wide {display: none;}
  .widei {display: none;}

@media (min-width: 1000px) {
 
/* ---------------------------------------------------------------------- */
  /*-- DESKTOP -- */

  .wide {display: block;}
  .widei {display: inline;}
  .narrow {display: none;}

  .header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    position: fixed;
    background-color: #fff;
  }
  .title {
   padding-top: 6vw;
  }
  .redmark{
    width: 1.1vw;
    margin-left: .2vw;
  }
  .subtitle {
    /*color: rgb(88,86,78); use with 400wt */
    color: rgb(182,180,173);
    padding-left: 3.15vw;
    height: 1.3vw;
    padding-bottom: 1vw;
    font-size: 1.43vw;
  }
  nav {
    justify-self: end;
  }
  .mainNav {
    overflow: hidden;
    background-color: #fff;
    height: 3vw;
    font-size: 1vw;
    font-weight: bold;
    z-index: 1000;
    padding-right: 5vw;
    padding-top: 2vw;
  }
  nav {
    display: block;
  }
  body {
    font-size: 1.23vw;
    line-height: 1.7vw;
  }
  p {
   margin: 0em;
  }
  .burger {
    display: none;
  }
  .cc {
   width: 13.3vw;
  }
  .welcomeMsg {
    font-size: 1.15vw;
  }
  .infoPanel {
    padding-top: 1vw;
    display: grid;
    grid-template-columns: .8fr 1fr 1fr 1fr;
    grid-template-rows: .8fr 2fr;
    grid-auto-flow: column;
    font-family: Arial, Helvetica;
    font-size: 1.1vw;
    line-height: 1.6vw;
  }
  .main {
   padding: 2vw;
  }
  .wrapper, .wrapperC {
    display: grid;
    grid-template-columns: 1fr 2.65fr 1fr;
    grid-gap: 1vw;
    margin: 0;
    padding: 0 3vw;
  }
  .midsection3 {
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 1vw;
   background-color: rgb(166,163,156);
   padding: .8vw 2vw;
   margin-top: 0;
   margin-bottom: 1vw;
   color: #D8D6CE;
  }
  .mainheader {
   grid-column: 1 / 4;
   grid-row: 1;
   padding-bottom: 0;
  }

  .panelA, .panelAP {
   grid-column: 1 / 2;
   grid-row: 2;
   padding: 2vw 2vw 1vw 2vw;
  }

  .content, .contentP {
   grid-column: 2 / 3; 
   grid-row: 2;
   padding: 1vw;
   padding-top: 0;
   border-left: 0.1vw dotted #A8957B;
   border-right: 0.1vw dotted #A8957B;
  }
  .panelB, .panelBP {
   font-size: 1.15vw;
   grid-column: 3 / 4;
   grid-row: 2;
   padding: 2vw 2vw 1vw 2vw;
  }
  .panelB p, .panelBP p {
    padding-bottom: 1vw;
  }
  .mainfooter {
   grid-column: 1 / 4;
   grid-row: 3;
   font-family: verdana, arial, helvetica;
   padding: 0;
   color: #7F715C;
   font-size: 1vw;
   line-height: 1vw;
  }
  .cinzelFont {
    font-size: 2.85vw;
    padding-left: 1.7vw;
  }
  .cinzelFont2 {
   font-size: 1.8vw;
  }
  .multi2 {
    padding-top: 1vw;
    columns: 2;
    margin-top: 0.5vw;
    border-top: 0.1vw dotted #A8957B;
  }
  .multi3 {
    padding-top: 1vw;
    columns: 3;
    margin-top: 0.5vw;
    border-top: 0.1vw dotted #A8957B;
  }
  .mainNav a {
    padding-left: .5vw;
    margin-right: .4vw;
    text-decoration: none;
    color: #8E7C69;
    border-left: 1px solid #A8957B;
  }
  .mainNav a:hover {
    color: #990033;
  }
  .midcol p {
    font-size: 1.1vw;
    line-height: 1.4vw;
    padding-bottom: 1.4vw;
  }
  .midcol p.borderTop {
    border-top: .1vw dotted #A8957B;
    padding-top: .5vw;
  }
  .ss1 {
    line-height: 2vw;
  }
  .ss2 {
    line-height: 1.8vw;
    font-size: 1.1vw;
  }
  .fnorm {
    font-style: normal;
  }
  .ppad p {
    padding-bottom: 1vw;
  }
  .depad {
    padding: 0 1vw;
  }
  .midcol3x p {
    font-family: Verdana, Helvetica, Sans-serif;
    font-size: 9px;
    font-size: .9vw;
    line-height: 11px;
    line-height: 1.1vw;
    width: 140px;
    width: 14vw;
  }
  .midcol3x ul {
    color: #7F715C;
    font-family: Verdana, Helvetica, Sans-serif;
    font-size: 9px;
    font-size: .9vw;
    line-height: 11px;
    line-height: 1.1vw;
    padding: 0;
    margin: 0 13px;
  }
  .midcol3x li {
    color: #7F715C;
    font-family: Verdana, Helvetica, Sans-serif;
    font-size: 9px;
    font-size: .9vw;
    line-height: 11px;
    line-height: 1.1vw;
    /*padding: 0;*/
    margin-left: 6px;
    list-style-type: square;
   display: list-item;
  }

  .entry {
    font-size: 14px;
    font-size: 1.5vw;
    line-height: 1.5em;
    line-height: 2.1vw;
  }
  .post h2 {
    font-family: Georgia, Trebuchet MS, Sans-serif;
    font-size: 14px;
    font-size: 1.5vw;
    border-top: .1vw dotted #A79678;
    padding-bottom: 20px;
    padding-bottom: 1vw;
    padding-top: 5px;
    padding-top: .5vw;
    color: #353535;
  }
  .midcol3x p.head {
    padding-bottom: 1vw;
    font-size: 1.1vw;
  }
  .midcol3E2 {height:26vw;}
  .midcol3E2 p {
    font-size: 1vw;
    line-height: 1.1vw;
  }
  .midcol3E2 p#one {
    width: 11.5vw;
  }
  .midcol3E2 p#two {
    width: 12.5vw;
  }
  .midcol3E2 p#three {
    width: 13vw;
  }
  .midcol3E2 img {
    height: 15vw;
    width: auto;
  }
  .histA {
    line-height: 2vw;
    width: 10.2vw;
  }
} /* --- END OF DESKTOP STYLES -- */