/* ==================================================================== */
/*                               ROOT                                   */
/* ==================================================================== */

  :root {
    --adjRatio: 3.492077vw; /* Replaced all as they are not working... 6 Apr 2020 */
    --madTeal: #00A4AF;
    --darkGrey: #292929;
    --footerGrey: #838383;
  }

  * {
    /* outline: 1px solid rgba(0,0,0,0.3);*/
    color: var(--darkGrey);
  }


/* ==================================================================== */
/*                              GLOBAL                                  */
/* ==================================================================== */


  /* ------------------------------ RESET ----------------------------- */

    .clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}
    #container,#header,#main,#main-fullwidth,#footer,.clearfix{display:block}

    table{margin-bottom:20px;width:100%}
    th{font-weight:bold}
    thead th{background:#c3d9ff}
    /*th,td,caption{padding:4px 10px 4px 5px}*/
    tr.even td{background:#e5ecf9}
    tfoot{font-style:italic}
    caption{background:#eee}
    li ul,li ol{ 
      margin:0; 
      padding-inline-start: 0;
      margin-block-end: 0;
      margin-block-start: 0;
    }
    ul,ol{margin:0 20px 20px 0;padding-left:40px}
    ul{list-style-type:disc}
    ol{list-style-type:decimal}
    dl{margin:0 0 20px 0}
    dl dt{font-weight:bold}
    dd{margin-left:20px}
    blockquote{margin:20px;color:#666;}
    pre{margin:20px 0;white-space:pre}
    pre,code,tt{font:13px 'andale mono','lucida console',monospace;line-height:18px}

    .widget-item-control {
      display: none !important;
      visibility: none !important;
      opacity: 0 !important;
    }


  /* ------------------------------ OTHER ----------------------------- */
  
    .mobileOnly { display: none; }
    .desktopOnly { display: block; }

    *:hover {
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
    }


    .clear { clear: both; }

    .meta {
      font-size: 0; line-height: 0; color: rgba(0,0,0,0); opacity: 0; display:none;
    }


    #bottom {background-position: bottom;}

    #top {background-position: top;}

    #left {background-position: left;}

    #right {background-position: right;}


    .margin-1200 { 
      margin: auto; 
      /*width: 1200px;*/
      max-width: 1000px;
      padding-left: 40px; /* 7 apr 20 */
      padding-right: 40px; /* 7 apr 20 */
      padding-left: calc((100vw - 1000px) / 2); /* 19 may 20 */
      padding-right: calc((100vw - 1000px) / 2); /* 19 may 20 */
      position: relative;
    }

    .noBreak { white-space: nowrap; }

    /*html, body { height: 100%; } Switching this on causes the body to be shorter than the content */

    body {
      background-color: #fff;
      background-position: top center;
      margin: 0;
      /*color: #626262;*/
      /*font-size: 12px; 7 apr 2020 */
      -webkit-font-smoothing: auto;
      -moz-font-smoothing: auto;

      width: 100vw;
      max-width: 100vw;
      /*overflow-x: hidden;*/
    }

    .thbNail {
      height: 160px;
      overflow: hidden;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .heroPost .thbNail {
      height: 300px;
      width: 45%;
      float: left;
      margin-right: 30px;
    }

    .thbNail {  
      animation: 0.8s ease-out 0.1s 1 slideInFromBottom; 
    }


/* ==================================================================== */
/*                            TEXT STYLES                               */
/* ==================================================================== */

  /* ----------------------------- HEADERS ---------------------------- */

    h1, h2 , h3 , h4 , h5 , h6 , p , a {
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
    }

    h2, h3, h4, h5, h6 { 
      font-weight: 700;
      font-family: 'Titillium Web', sans-serif;
    }

    h1, h2, h3, h4, h5, h6 { 
      padding-bottom: 1em;
      display: block;
      width: 100%;
      text-align: left;
    }

    h1 { font-size: 46px; line-height: 1.2; }
    h2 { font-size: 24px; line-height: 1.2; }
    h3 { font-size: 20px; line-height: 1.2; }
    h4 { font-size: 18px; line-height: 1.3; }
    h5 { font-size: 16px; line-height: 1.3; }
    h6 { font-size: 15px; line-height: 1.3; }

    .heroPost h4.post-title {
      font-size: 24px; 
      line-height: 1.2;
    }

    h1.h1_home {
      font-family: 'Antic Didone', serif;
      font-size: 38px;
      line-height: 45px;
      text-align: center;
      padding: 30px 0 50px 0;
      font-weight: 400;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      font-smoothing: antialiased;
    }

    h1,
    .likeOtherH1s {
      font-family: 'Antic Didone', serif;
      font-size: 46px;
      line-height: 1.2;
      font-weight: 100;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      font-smoothing: antialiased;
      padding-bottom: 6vh;
    }

    body.item h1.postTitle {
      opacity: 0;
      transition: all 0.5s;
      padding-bottom: 6vh;
    }

    .likeOtherH1s { 
      margin-top: 0px;
      width: 100%;
    }

    .likeOtherH1As { 
      font-weight: 700; 
      font-size: 16px; 
    
      :hover { 
        color: #000; 
        text-decoration:none; 
      }
    } 

    .likeOtherH1As { 
      font-size: 35px;
      float: left;
      width: 100%;
      color: #9c9494;
      margin-bottom: 0px;
      padding-bottom: 20px;
      padding-left: 0px;
      text-align:center;
    }


    h1.postTitle {
      /* don't set max-width universally - allow individual settings in posts */
    }

    h1 b { font-weight: 100; }
    b { font-weight: 400; }

    .smallText {
      font-size: 14px;
    }  

    body.home #footersec1 h3,
    .fields h3 {
      padding-bottom: 30px;
    }

    .software h3 {
      padding-bottom: 20px;
    }


    .boldQuote {
      font-size: 1.4em;
      line-height: 1.4;
      font-style: italic;
      padding: 10px 0 0 0;
      display: block;
      border-top: 1px solid;
      margin: 40px 0 0 0;
      width: 70%;
    }

    .boldSmallHead {
      color: #4a8a8e;
      font-weight: bold;
    }


    #Blog1 h2, #Blog1 h2 a { padding-right: 0; }

    h2.date-header{margin:1.5em 0 .5em;display:none;}


    body.static_page .post h2, 
    .likeOtherH2s { 
      padding: 0px;
      margin-top: 0px;
      width: 100%;
      /*height: 60px;*/
    }

    h2.location { height: initial !important; }

    body.static_page .post h2 a, 
    .likeOtherH2As { 
      font-size: 35px;
      float: left;
      width: 100%;
      color: #9c9494;
      margin-bottom: 0px;
      padding-bottom: 20px;
      padding-left: 0px;
      text-align:center;
    
      &:hover { 
        text-decoration: none; 
        color: #9c9494; 
        cursor: initial; 
      }
    }

    .likeOtherH1As:hover { 
      text-decoration: none; 
      color: #9c9494; 
      cursor: initial; 
    }

    .subTitle {
      margin-bottom: 8vh;
      max-width: 650px; /* 20 may 20 work page */
    }

    .newH1 {
      display: none;
    }



  /* ------------------------------ OTHER ----------------------------- */

    p {
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      margin-bottom: 1.5em;
    }

    body,
    input,
    p,
    .tableItem .snippet {
      font-family: 'Titillium Web', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      font-smoothing: antialiased;
      -webkit-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;

      font-size: 15px;
      line-height: 1.4;
      font-weight: 400;
    }

    p.body_small,
    .body_small {
      font-size: 14px;
      line-height: 1.3;
    }

    span.quoteMarks {
      font-size: 50px;
      color: #c3bcbc;
      line-height: 7px;
      margin: 20px 0 0 0;
      display: block;
    }

    span.quoteAuthor {
      display: block;
      margin-top: 10px;
      color: #9c9494;
    }

    .smallText {
      font-size: 80%;
    }

    .greyedOut {
      color: #292929;
      opacity: 0.3;
      pointer-events: none;
    }


    /*  p.right a {  Not in use 24 aug 2026
      float: right;
      font-size: 20px;
      border: 1px solid;
      border-radius: 50%;
      padding: 14px;
      display: inline-block;
    }*/

  /* ------------------------------ LINKS ----------------------------- */

    a:hover{ cursor:pointer; }
    a.a_noLines { border: none; outline: none; text-decoration: none; }
    a.a_noLines:hover { border: none; outline: none; text-decoration: none; }
    a.a_pointer:hover { cursor: pointer; }

    a:hover {
      text-decoration: underline;
      color: var(--madTeal);
    }

    a, a:link, a:visited{ 
      text-decoration: none; 
      outline: none; 
    }

    a,
    .btn a {
      color: var(--madTeal);
    }

    a,
    .btn, 
    .looksLikeMoreLink,
    .index .heroPost .snippet:after,
    .user.blog-author a {
      font-family: 'Arvo', sans-serif;
      font-weight: 700;
    }

    .looksLikeMoreLink,
    a.moreLink {
      border-bottom: 2px solid rgba(0,0,0,0);
      padding-bottom: 5px;
      color: #00A4AF; /* might regret this */

      &:hover {
        border-color: #00A4AF;
      }
    }

    a,
    .looksLikeMoreLink,
    body.index .heroPost .snippet:after,
    body.item #blog-pager a {
      font-size: 15px;
      line-height: 120%;
      text-decoration: none;
    }


    a.nav_link {
      font-family: 'Arvo', sans-serif;
      font-size: 14px;
      line-height: 100%;
      text-align: center;
      font-weight: 400;
    }

    a.tag {
      border-bottom: 1px solid white;
      border-right: 1px solid white;
      padding: 0 10px 5px 0;
    }

    a.tag:hover {
      border-color: inherit;
    }

  /* ----------------------------- LABELS ----------------------------- */

    .labels {
      padding-bottom: 30px;
      
      a {
        font-family: 'Titillium Web', sans-serif;
        font-size: 14px;
      }
    }



/* ==================================================================== */
/*                             OTHER                                 */
/* ==================================================================== */

  /* ------------ Not sure what all this is - related to comments------ */

    .datetime.secondary-text { float: right; }
    .user.blog-author a { font-size: 20px; text-decoration: none; }
    .feed-links { display:none;clear:both;line-height:2.5em; }
    #navbar-iframe { height:0;visibility:hidden;display:none; }


    #blog-pager-newer-link {
      float: right;
    }

    #blog-pager-older-link {
      float: left;
    }

    #blog-pager-newer-link img {
      margin-left: 8px;
    }

    #blog-pager-older-link img {
      margin-right: 8px;
    }

    body.index.work .post img,
    body.index.label .post img {
      width: 100%;
      height: auto;
    }

    .index .post {
      width: 240px;
      float: left;
      margin-right: 40px;
      margin-bottom: 40px; /* 20 may 20 work page */
    }

    .index .date-outer {
      position: relative;
    }

    .index .postContent {
      display: none;
    }

    .index .heroPost {
      width: 100%;
      margin-bottom: 40px;    
    }

    .snippet:after {
      /*content: '..'; */
      /* 2 dots because of the fullstop of the sentence */
    }

    /*.index .heroPost .snippet:after {
      content: ' See project';
    }*/

    #comments {
      display: none;
    }

    .video {
      max-width: 700px;
      margin-bottom: 40px;
    }


  /* ----------------------------- COOKIES ----------------------------- */
    
    #cookieChoiceInfo.cookie-choices-info {
      top:inherit !important;
      bottom: 0;
      font-family: 'Titillium Web' !important;
      font-weight: 400;
      font-style: normal;
      background
    }

  /* ----------------------------- OTHER ----------------------------- */


    body.home .brands,
    body.home #footersec1,
    .fields, 
    .software {
      margin: 60px auto; /* taking advantage of collapsing margins */

    }

    iframe {
      border: 0; 
    }

    .seoText {
      max-width: 770px;
      text-align: center;
      margin-bottom: 60px;

      a { color: #292929 !important; }
    }

    #screenSize:after {
      content: 'base width';
      position: fixed;
      z-index: 99999;
      width: 100vw;
      background: grey;
      opacity: 0.6;
    }

    #screenSize {
      display: none;
    }


    .left { float: left; } 
    .right { float: right; }
    .threeQuarters {
      width: 70%;
    }

    .threeQuarters.left {
      margin-right: 20px;
    }

    .oneQuarter {
      width: 25%;
    }

    .oneQuarter.right {
      margin-left: 20px;
    }

    .btn.oneQuarter.right {
      margin: 0 0 50px 0;
    }

    .imgDiv.img_half,
    .img_half:not(.imgDiv) {
      width: calc( 50% - 30px );
    }

    .imgDiv.img_half img {
      width: 100%;
    }

    .fourQuarters .img_quarter {
      width: calc(25% - 30px)
    }

    .fourQuarters #mS_imgs {
      display: flex;
      justify-content: space-between;
    }

    .twoHalves,
    .fourQuarters {
      display: flex;
      justify-content: space-between;
      margin-bottom: 50px;
    }

    .twoHalves > div {
      flex-grow: 1;
      max-width: calc( 50% - 20px);
    }


    .centered {
      margin-left: auto;
      margin-right: auto;
      display: block;
      width: fit-content;
      width: -moz-fit-content;
    }

    .centered .btn {
      margin: auto;
    }

    .centeredText {
      text-align: center;
    }


    .half {
      width: 49%;
    }

    .thirtyPercent {
      width: 30%;
    }

    .tableTwoColumnDisplay {
      
    }

    .slopeManager {
      width: 100%;
      overflow: hidden; /* to hide topSlope and bottomSlope */
      position: absolute;
      /* height: 200px; needs to match height of thumbnails */
      height: 100% ; /* slope manager demands it */
      top: 0;
      pointer-events: none;

      .topSlope {
        right: 0;
      }

      .bottomSlope {
        /*top: calc( 200px - 3.492077vw );  200px is height of thumbnail, minus value is to compensate for topSlope taking up space - since slopeManager, this is not necessary - 9 apr 20 */
        bottom: 0;
      }

      .topSlope, .bottomSlope {
        pointer-events: none;
      }
    }

    .bottomSlope, .topSlope { 
      height: 0;
      width: 0;
      /* bottom: 0; */
      position: absolute;
    }

    .topSlope { 
      border-top: 3.492077vw solid #fff;
      border-right: 100vw solid transparent;
    }

    .bottomSlope { 
      border-bottom: 3.492077vw solid #fff;
      border-left: 100vw solid transparent;
    }

    .smallHeader .topSlope {
      &:before { /* grey line */
        content: "";
        height: 10px;
        width: 100vw;
        position: absolute;
        z-index: -1;
        transform: rotate(-2deg);
        top: calc( (-3.492077vw / 2) - 9px );
        background: #d4d4d4;
      }

      &:after {  /* Shadow below line. Might be a bit kitsch */
        content: '';
        height: 30px;
        width: 100vw;
        background: black;
        /* border-top: 3.492077vw solid #000000; */
        /* border-right: 100vw solid transparent; */
        top: 0;
        position: absolute;
        z-index: -2;
        filter: blur(100px);
        opacity: 0.5;
      }
    }


    .tableItem, 
    body.home .post-outer { /* was .home, changed to .index, now back - still not sure which is best */
      flex-grow: 1; /* flex-shrink */
      flex-basis: 30%; /* https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg */
      /* flex: 1 30%; /*   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
      align-items: stretch;
    }

    .index:not(.home) .tableItem:not(.firstItem) {
      display: inline-grid;
      vertical-align: top;
    }

    .main .Blog { border-bottom-width:0 }

    .postcontent {
      margin: 0px 0px 28px 0px; 
      float: left; 
      width: 84%; 
      padding: 0px 20px; 
      font-size: 14px; 
    }

    .quote {
      max-width: 700px;
      padding: 40px 0;
      border-top: 1px solid #d4d4d4;
      border-bottom: 1px solid #d4d4d4;
      margin: 60px 0;
      font-weight: 400;
      line-height: 1.4;
    }

    .mpu { width: 300px; position: relative; }

    .showTellFrame {
      top: 0;
      left: 0;
      position: absolute;
      display: none;
    
      .play {
        display: block;
      }
    }

    ul.playList {
      margin: 0;
      margin-bottom: 20px;
      padding: 0;
    
      li {
        list-style: none;
      
        a {
          color: #292929;
          
          &:before {
            content: '';
            width: 27px;
            height: 27px;
            background: url(https://aneldebruyn.github.io/madnella/images/btn_play.svg);
            background-size: contain;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
            margin: 10px 15px 10px 0;
          }
        }
      }
    }
    

    #endPost {
      height: 1px;
      background: #d4d4d4;
      display: block;
    }

    .bottomMenuSlide {
      position: fixed !important;
      bottom: -100vh; 
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -ms-transition: all 0.3s;
      transition: all 0.3s;
    }

    .bottomMenuSlide.up {
      bottom: -60px;
    }


    .mobileBorder {
      display: none;
    }



/* ==================================================================== */
/*                             WRAPPERS                                 */
/* ==================================================================== */


  #outer-wrapper{
    width:960px;
    margin:0px auto 0px;
    padding:0px;
    text-align:left;
    background:#FFFFFF;
  }

  #content-wrapper { 
    /*background: #fff;*/
    /*float: left;*/
    width: 100%;
    /*margin-top: 40px;*/
    margin-top: 8vh;
    /*margin-bottom: 60px;*/
  }

  #main-wrapper { 
    margin: 0;
    /*padding: 0 50px;*/
    word-wrap: break-word;
    overflow: hidden; 
    /* removed width */
  }

  .contact #main-wrapper {
    overflow: visible; /* check this */
  }

  #rsidebar-wrapper{width:300px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;} /* overflow:hidden; commented out 18 july 2018 in order to have button shadows show */



/* ==================================================================== */
/*                            ERROR PAGE                                */
/* ==================================================================== */


  .error_page #blog-pager { display: none; }
  .error_page .blog-posts { height: auto!important; }
  .error_page #rsidebar-wrapper {display:none;}
  .error_page #main-wrapper {width:100%;}
  .error-page h2 { text-align: center; font-size: 73px; color: #23b5ab; margin: 0px; }
  .error-page p { text-align: center; font-size: 53px; text-transform: uppercase; margin: 0px; font-weight: bold; } 
  .error-page { float: left; width: 100%; margin: 30px 0px; }

  .contact-form-error-message-with-border,
  .contact-form-success-message-with-border {
    background: #00A4AF !important;
    border: 0;
    color: #fff !important;
    font-weight: normal;

    padding: 10px 16px;
    font-size: 15px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .contact-form-error-message-with-border img.contact-form-cross {
    margin: 5px;
  }

  #errorPage {
    max-width: 900px;
    margin: auto;
    margin-bottom: 30px;
  }



/* ==================================================================== */
/*                             SEARCH PAGE                              */
/* ==================================================================== */

  #search {overflow:hidden;}

  body.label {
    .labels {
      /*padding-top: 30px;*/ /* switched off 20 may 20 */
    }

    .bottomSections {
      padding-top: 60px;
    }
  }

  body.label .heroPost .labels {
    display: none;
  }



/* ==================================================================== */
/*                              WORK PAGE                               */
/* ==================================================================== */

  body.work {
    .bottomSections {
      padding-top: 60px;
  }

  body.work #footersec1, 
  body.label #footersec1 {
    display: block;
    /*width: calc( 50% - 50px ); /* 26 may 2020 - 19:10 */
    /*float: left;*/
    max-width: 600px;
  }

  body.work .heroPost .labels {
    padding-top: 30px;
  }

  body.work .labels {
    padding-top: 30px;
  }