:root {
      --cc-aqua-primary: #88b6b0;
      --cc-aqua-ext-light: #e0ebe9;
      --cc-gray-medium: #4d5d67;
      --aqua-light-text: #bbd6d0;
      --cc-yellow: #fecb00;
      --cc-blue-dk: #004153;
    }
    

  @font-face {
    font-family: "AgfaRotisSansSerif";
    src: url("/css/fonts/agfarotissansserifregular.ttf") format("truetype"), 
      url("/css/fonts/agfarotissansserifregular.woff") format("woff"), 
      url("/css/fonts/agfarotissansserifregular.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "AgfaRotisSansSerifBold";
    src: url("/css/fonts/agfarotissansserifbold.ttf") format("truetype"), 
      url("/css/fonts/agfarotissansserifbold.woff") format("woff"), 
      url("/css/fonts/agfarotissansserifbold.woff2") format("woff2"); 
    font-weight: 800;
    font-style: normal;
  }
  
  @font-face {
    font-family: "AgfaRotisSansSerifItalic";
    src: url("/css/fonts/agfarotissansserifitalic.ttf") format("trueype"), 
      url("/css/fonts/agfarotissansserifitalic.woff") format("woff"), 
      url("/css/fonts/agfarotissansserifitalic.woff2") format("woff2"); 
    font-weight: normal;
    font-style: italic;
  }

   @font-face {
    font-family: "Montserrat";
    src: url("/css/fonts/Montserrat-Medium.ttf") format("truetype"), 
      url("/css/fonts/Montserrat-Medium.woff") format("woff"); 
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "MontserratBold";
    src: url("/css/fonts/Montserrat-Bold.ttf") format("truetype"), 
      url("/css/fonts/Montserrat-Bold.woff") format("woff"); 
    font-weight: 800;
    font-style: normal;
  }
  
  @font-face {
    font-family: "MontserratLight";
    src: url("/css/fonts/Montserrat-Light.ttf") format("trueype"), 
      url("/css/fonts/Montserrat-Light.woff") format("woff"); 
    font-weight: normal;
    font-style: normal;
  }

  article {
    font-family: "Montserrat", "Open Sans", "Helvetica", "Arial", sans-serif;
  }
  
  #content > h1 {
      display:none;
    }

    #continuous-copper-nav-container {
      background-color: #ccd9dd;
      padding-left:20vw;
      padding-right: 20vw;
    }

    #hero-container {
      min-height: 52vh;
      background-image: url('images/ccle-hero-background.png');
      background-size: cover;
      background-position: right;
      background-repeat: no-repeat;
      padding: 2rem;
    }

      #hero-logo {
        background-image: url('images/cycle-title-background.png');
        background-size: contain;
        background-repeat: no-repeat;
      }

      #cc-title {
        font-size: 2.8rem;
        color: var(--cc-gray-medium);
        font-family: "AgfaRotisSansSerif", "Open Sans", "Helvetica", "Arial", sans-serif;
      }

    #welcome-container, #campaign-container {
      background-color: var(--cc-aqua-ext-light);
      color: var(--cc-gray-medium);
      text-align: center;
      font-size: 1.5rem;
      font-weight: 100;
    }

    #primary-welcome {
      color: var(--cc-gray-medium);
      padding: 1rem 8rem 4rem 8rem;
      font-family: "MontserratLight", "Open Sans", "Helvetica", "Arial", sans-serif;
    }

    #primary-content-tab-nav {
      margin: 1.15rem 1vw  !important;
      list-style-type: none !important;
      padding-left: 0 !important;
      font-size: 0.8rem;
    }
    
      #primary-content-tab-nav li {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }

        #primary-content-tab-nav a {
          display: grid;
          place-items: center;
          font-weight: 700;
          background-color: #ffffff;
          border-radius: 0.45rem;
          text-decoration: none;
          color: #004153;
        }
          #primary-content-tab-nav a.active {
            background-color: #004153;
            color: #fecb00;
          }

          .continuous-coppers-text-header {
            color: var(--cc-gray-medium) !important;
            font-size: 2.4rem;
            margin:0 !important;
            padding-bottom: 0 !important;
            letter-spacing: 0.05vw;
            font-weight: 100;
          }

          #welcome-conteont-buckets {
            background: url('copper_backfground.jpg') no-repeat center center;
            background-size: cover;
            padding:0;
          }

          .welcome-inner-container {
            background-color: #004153;
            padding: 2rem;
            color: #ffffff;
          }
            
            .continuous-coppers-welcome-content-header {
              color: #ffffff;
              font-weight: 500;
              font-size: 1.5rem;
              padding-bottom: 0;
              margin-bottom: 0;
            }
            .continuous-coppers-welcome-content-subheader {
              color: #fecb00;
              font-size: 1.5rem;
              margin-top: 0.5rem;
            }
            
            .welcome-inner-container-img {
              /* width: 100%; */
              position: absolute;
              margin-top: 3rem;
            }

            .welcome-container-list {
              color: #fecb00;
            }

        #conversation-container {
          background-color: #ccd9dd;
          border-bottom: 2rem solid #004153;
        }

        #continuous-container, #matters-container, #afterword-container {
          background-color: var(--cc-gray-medium);
          padding: 2rem;
        }

        .critical-header, .matters-header {
          color: var(--cc-aqua-primary) !important;
          font-size: 1.5rem;
          font-weight: 100;
          padding: 0;
          margin: 0 0 .65rem 0;
          letter-spacing: 0.005rem;
        }

        .critical-subheader {
          color: #ffffff;
          font-size: 1.4rem;
          padding: 0;
          margin: 0 0 .65rem 0;
        }

        .critical-content {
          color: var(--cc-aqua-primary);
        }

        .critical-content-list {
          padding-left: 1.5rem !important;
          color: #ffffff;
        }

        #cycle-container {
          padding: 2rem;
          color: var(--cc-gray-medium);
        }

        .cycle-header, .join-header {
          font-family: "MontserratLight", "Open Sans", "Helvetica", "Arial", sans-serif;
          font-size: 1.8rem;
          color: #ffffff !important;
          text-align:center;
          padding: 0;
          margin:0;
        }

        .cycle-subheader {
          color: var(--cc-gray-medium);
        }

        h3.cycle-title-header {
          font-family: "MontserratLight", "Open Sans", "Helvetica", "Arial", sans-serif;
          color: var(--cc-gray-medium);
        }

        .campaign-coverage-details {
          padding: 0 1rem;
        }

        .matters-content {
          color: var(--cc-aqua-primary);
        }

        #process-content-deck {
          font-size: 0.9rem;
        }

        hr.continuous-border-divider {
          background-color: var(--cc-yellow);
          color: var(--cc-yellow);
          border: 0.15rem solid var(--cc-yellow);
          width: 7vw;
          margin: 1rem 0;
          opacity: 1;
        }

        .img-border-continuous {
          border: 2px solid var(--cc-aqua-primary);
        }

        #cycle-container, #join-container {
          background-color: var(--cc-aqua-primary);
        }

        #join-container {
          padding: 2rem;
        }

        .cc-afterword-header {
          font-size: 1.6rem;
          font-family: "MontserratLight", "Open Sans", "Helvetica", "Arial", sans-serif !important;
          color: #ffffff !important;
          margin: 0;
          padding: 0;
        }

          .conversations-header {
            font-size: 1.8rem;
            font-family: "AgfaRotisSansSerif", "Open Sans", sans-serif;
            color: #004153;
          }

          .conversations-subheader {
            font-size: 1.8rem;
            font-weight: 800;
            color: #004153;
          }

        .conversations-card .card-header {
          background: url(tl_v2.jpg);
          background-size: contain;
          padding: 21rem 2rem 0 2rem;
          background-repeat: no-repeat;
          background-color: #004153;
        }
        
          .conversations-card .card-header h3 {
            font-size: 1.5rem;
            font-family: "AgfaRotisSansSerif", "Open Sans", sans-serif;
            color: #ffffff;
            font-weight: 500;
            padding: 0;
          }

          .conversations-supply-heaader-link {
            font-size: 2rem;
            font-family: "AgfaRotisSansSerif", "Open Sans", sans-serif;
            color: #fecb00;
          }

            .conversations-supply-heaader-link:hover {
              color: #ffffff;
            }

          .conversations-card .card-footer {
            color: #000000;
            padding: 2rem;
          }

          .conversations-read-more-link {
            color: #004153;
            text-decoration: none !important;
            font-size: 0.9rem;
            font-weight: 800;
          }

      #media {
          background-color: #ccd9dd;
          padding: 4rem;
          border-bottom: 2rem solid #004153;
        }

        @media only screen and (max-device-width:1024px) {

          #hero-container {
            background-position: left;
          }
          
          #primary-welcome {
            padding-left: 2rem;
            padding-right: 2rem;
          }

          .continuous-coppers-text-header {
            font-size: 1.8rem;
          }
        }