/**
  * @file
  * desktop.css
  *
  * @author
  * Graham Leach
  *
  * @created
  * 2025-04-01
  *
  * @description
  * This is the default layout for the website (HDTV)
  * There is NO @media clause applied
  *
  * @reference
  * www.w3schools.com/css/css_rwd_mediaqueries.asp
  *
**/


 /* row oriented classes */

  .row {
    width: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .row .row {
    width: auto;
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }

 /* column oriented classes */

  .col-one {
    width: 8.33333%;
  }
  
  .col-two,
  .col-1-6 {
    width: 16.66667%;
  }
  
  .col-three,
  .col-1-4 {
    width: 25%;
  }
  
  .col-four,
  .col-1-3 {
    width: 33.33333%;
  }
  
  .col-five {
    width: 41.66667%;
  }
  
  .col-six,
  .col-1-2 {
    width: 50%;
  }
  
  .col-seven {
    width: 58.33333%;
  }
  
  .col-eight,
  .col-2-3 {
    width: 66.66667%;
  }
  
  .col-nine,
  .col-3-4 {
    width: 75%;
  }
  
  .col-ten,
  .col-5-6 {
    width: 83.33333%;
  }
  
  .col-eleven {
    width: 91.66667%;
  }
  
  .col-twelve,
  .col-full {
    width: 100%;
  }

   html {
    font-size: 10px;
  }
 
 /* block oriented classes */

  [class*="col-"] {
    float: left;
    padding: 0 20px;
  }
  
  [class*="col-"] + [class*="col-"].end {
    float: right;
  }
  [class*="block-"]:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .block-1-6 .col-block {
    width: 16.66667%;
  }
  
  .block-1-5 .col-block {
    width: 20%;
  }
  
  .block-1-4 .col-block {
    width: 25%;
  }
  
  .block-1-3 .col-block {
    width: 33.33333%;
  }
  
  .block-1-2 .col-block {
    width: 50%;
  }
  
  .block-1-6 .col-block:nth-child(6n+1),
  .block-1-5 .col-block:nth-child(5n+1),
  .block-1-4 .col-block:nth-child(4n+1),
  .block-1-3 .col-block:nth-child(3n+1),
  .block-1-2 .col-block:nth-child(2n+1) {
    clear: both;
  }
  
  /* body section CSS overrides */
   
  body {
    background: #333333;
    font-family: "metropolis-regular", sans-serif;
    font-size: 1.7rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1.765;
    color: #757575;
    margin: 0;
    padding: 0;
  }
  
  a {
    color: #ec008c;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  
  a:hover,
  a:focus,
  a:active {
    color: #0087cc;
  }
  
  a:hover,
  a:active {
    outline: 0;
  }
  
  h1,
  h3 {
    font-family: "metropolis-semibold", sans-serif;
    color: #FFFFFF;
    font-style: normal;
    text-rendering: optimizeLegibility;
    margin-bottom: 2.1rem;
  }
  
  p.lead {
    font-family: "metropolis-light", sans-serif;
    font-size: 1.9rem;
    font-weight:  bold;
    line-height: 1.8;
    margin-bottom: 3.6rem;
  /*  color: red; */
    color: white;
  }
  
  /* Body header section CSS overrides */
  
  header {
    text-align: center;
    padding: 6.6rem 0 1.5rem; 
    /*  margin-bottom: 6.6rem; */
    position: relative;
  }
  
  header::after {
    content: "";
    width: 150px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  
  header .row {
    max-width: 880px;
  }
  
  header h1 {
    font-size: 5.2rem;
    line-height: 1.385;
    letter-spacing: -.1rem;
  }
  
  header h1 span {
    color: #ec008c;
  }

  /* Body main section CSS overrides */

  main {
    text-align: center;
    padding-bottom: 2.5rem;
  }
 
  main .col-block {
    margin-bottom: 3rem;
  }
  
  main .entry__thumb {
    position: relative;
    overflow: hidden;
  }
  
  main .entry__thumb a {
    display: block;
  }
  
  main .entry__thumb a img {
    vertical-align: bottom;
  }
  
  main .entry__thumb a::before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 1;
  }
  
  main .entry__thumb a::after {
    content: "...";
    font-family: georgia, serif;
    font-size: 2.7rem;
    z-index: 1;
    display: block;
    height: 30px;
    width: 30px;
    letter-spacing: -1px;
    line-height: 30px;
    margin-left: -15px;
    margin-top: -30px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
  
  main .entry__thumb:hover a::before {
    opacity: 1;
    visibility: visible;
  }
  
  main .entry__thumb:hover a::after {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  main .entry__title {
    padding-top: 2.7rem;
  }
  
  main .entry__title h3 {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 1.8rem;
    color: white;
  }

  main .entry__title h4 {
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 1.8rem;
    color: #ec008c;
  }


  /* Generic Text Styles for different blocks of content */

  /* summary - italics */
  main .summary {
    font-style: italic;
    padding-top: .5em;
    padding-bottom: 1em;
  }

  /* content - indented with justified content */
  main .content {
    color: white;
    max-width: 1000px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
  }
 
  /* Common Widgets CSS */

  /* SELF HOSTED VIDEO CONTAINER */
  /* =========================== */
   main .self-hosted-video-container {
    position: relative; 
    width: 780px !important;
    margin: 0 auto;
  }
 
  /* YOUTUBE CONTAINER */
  /* ================= */
  /* This may not be used in future as YouTube adds latency and leads away */
  main .youtube-container {
    position: relative; 
    width: 800px !important;
    height: 450px;
    margin: 0 auto 0 auto;
  }
  
  main .youtube-iframe {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }


  /* TRANSCRIPT */
  /* ========== */  

  /* Transcript Container */
  main .transcript-container {
    margin-top: 10px;
  }

  /* Transcript Button */
  main .transcript-button {
  }

  /* Transcript Collapsible Area */
  main .collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 15px;
    width: 800px;
    border: none;
    text-align: center;
    outline: none;
    font-size: 20px;
  }
  
  /* Change the background color of the collapsible area when hovered */
  main .collapsible:hover {
    background-color: #ccc;
  }
  
  /* Style the collapsible content. Note: hidden by default */
  main .transcript {
    padding: 0 18px;
    width: 800px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    text-align: justify;
  } 

  /* PLATFORM SELECTOR */
  /* ================= */

  main .platform-selector-container {
    width: 800px;
    margin: 0 auto;
  }

  main .platform-selector {
    margin-top: 1em;
    float: left;
    font-size: 16pt;
    font-family: "metropolis-semibold", sans-serif;
   }
  /* NEUBERCART CONTAINER */
  /* ==================== */

  main .neubercart-container {
    width: 800px;
    margin: 0 auto;
  }

  /* NEUBERCART HEADINGS */
  /* =================== */

  /* Neubercart Heading 3 (based on h3) */
  main .neubercart-heading-3 {
    margin-top: 1em;
    color: #888888;
    font-size: 16pt;
    font-family: "metropolis-semibold", sans-serif;
    font-style: normal;
    text-rendering: optimizeLegibility;
  }

  /* Neubercart Subscription Form */
  main .neubercart-subscription-form {
    border: 20px solid #888888;
    background: #888888;
  }

  /* Neubercart Product Requirements Document Container */
  main .neubercart-prd-container {
    margin: 0 auto;
  }


  /* NAVIGATION WIDGET */
  /* ================= */

  .navigation {
    margin-top: 1em;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }
  
  .previous {
    float: left;
    background-color: white;
    color: black;
    padding-top:    10px;
    padding-bottom: 10px;
    padding-left:   20px;
    padding-right:  20px;
  }
  
  .up {
    background-color: white;
    color: black;
    padding-top:    10px;
    padding-bottom: 10px;
    padding-left:   20px;
    padding-right:  20px;
  }

  .next {
    float: right;
    background-color: white;
    color: black;
    padding-top:    10px;
    padding-bottom: 10px;
    padding-left:   20px;
    padding-right:  20px;
  }
  
  .round {
    border-radius: 50%;
  }

  /* SQUARE NAV BUTTONS */

  .nav-container {
    display: flex;
    width: 100%; /* Full-width container */
    margin-bottom: 20px;
  }

  .nav-buttons a {
    flex: 1; /* Each button takes up equal width */
    max-width: 33%; /* Constrain to 33% of the container */
    height: 50px; /* Square button height */
    display: flex;
    justify-content: center; /* Center arrow horizontally */
    align-items: center; /* Center arrow vertically */
    font-size: 28px; /* Font size for arrows */
    text-decoration: none; /* Remove underline from links */
    background-color: #444444; /* Button color */
    color: white; /* Arrow color */
    border: black; /* Remove border */
    cursor: pointer;
    box-sizing: border-box; /* Include padding and borders in dimensions */
  }

  .nav-buttons a:hover {
    background-color: #ffffff; /* Darker green on hover */
    color: #000000;
  }


  /* HOME PAGE CSS Overrides **/

  main .switchboard {
    width: 800px !important;
    margin: 0 auto;
  }


  /** ABOUT Page CSS Overrides **/

  main .self-hosted-video-container {
    position: relative; 
    width: 800px !important;
    height: 450px;
    margin: 0 auto 0 auto;
  }
 
  /* ABOUT Page Contact Form */

  main .about-page-contact-form {
    width: 800px !important;
    margin: 0 auto;
  }

  main .about-page-contact-form-cta {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  /* Captcha */

  main .about-page-contact-form-captcha-heading {
    
  }

  main .about-page-contact-form-captcha-container {
    
  }

  main .about-page-contact-form-captcha-image {
    
  }

  main .about-page-contact-form-captcha {
    
  }


  /* First Name */

  main .about-page-contact-form-first-name {
    margin-top: 1.5em;
  }
  

  /* Last Name */

  main .about-page-contact-form-last-name {
    margin-top: .5em;
  }

  
  /* Email */

  main .about-page-contact-form-email {
    margin-top: .5em;
  }


  /* Categories */

  main .about-page-contact-form-categories-cta {
    margin-top: .5em;
  }
  
  main .about-page-contact-form-categories {
    margin-top: .5em;
    margin-left: 20px;    
  }


  /* Subject */

  main .about-page-contact-form-subject {
    margin-top: .5em;
  } 


  /* Message */  
  main .about-page-contact-form-message-container {
    margin-top: .5em;
    margin-bottom: 1em;
  }
  
  main #about-page-contact-form-message-textarea {
    width: 100%;
    height: 100px;
  }


  /** PRICING Page CSS Overrides **/



  /** CLIENTS Page CSS Overrides **/


  /** MODULES Page CSS Overrides **/ 

  /* Modules Available Area */
  main .modules-available-container {
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .modules-available-carousel {
    margin-top: 1em;
  }

  main .modules-available-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Modules Upgrading Area */
  main .modules-upgrading-container {
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .modules-upgrading-carousel {
    margin-top: 1em;
  }

  main .modules-upgrading-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Modules Proposed Area */
  main .modules-proposed-container {
    margin-top: 1em;
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .modules-proposed-carousel {
    margin-top: 1em;
  }

  main .modules-proposed-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }


  /* Modules Page Contact Form */
  main .modules-page-contact-form {
    width: 800px !important;
    margin: 0 auto;
  }

  main .modules-page-contact-form-cta-area {
    margin-top: 1em;
    margin-top: 1em;
  }

  main .modules-page-contact-form-first-name {
  
  }
  
  main .modules-page-contact-form-last-name {
  
  }
  
  main .modules-page-contact-form-email {
  
  }
  
  main .modules-page-contact-form-categories {
    margin-top: .5em;
    margin-left: 20px;    
  }
  
  main .modules-page-contact-form-message-container {
    margin-top: .5em;
  }
  
  main #modules-page-contact-form-message-textarea {
    width: 100%;
    height: 100px;
  }


  /** ************************************** **/
  /** MODULES SUBDIRECTORIES CSS Overrides   **/
  /** Consider moving closer to the sitelets **/
  /** ************************************** **/

  main .module-name {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }
  
  main .module-project {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }
  
  main .module-description {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }
  
  main .module-drupal {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }
  
  main .module-backdrop {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }
  
  main .module-neubercart {
    color: grey;
    font-weight: bold;
    padding-top: .5em;
  }


  /* INTEGRATIONS Page CSS Overrides */ 

  /* Integrations Available */
  main .integrations-available-container {
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .integrations-available-carousel {
    margin-top: 1em;
  }

  main .integrations-available-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Integrations Proposed */
  main .integrations-proposed-container {
    margin-top: 1em;
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .integrations-proposed-carousel {
    margin-top: 1em;
  }

  main .integrations-proposed-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Integrations Proposal Form */
  main .integration-proposal-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .integration-proposal-form-cta-area {
    margin-top: 1em;
    margin-top: 1em;    
  }
  
  main .integration-proposal-form-radio-buttons {
    margin-top: .25em;
    margin-left: 20px;
  }
  
  main .integration-proposal-form-first-name {
    margin-top: 1em;
  }
  
  main .integration-proposal-form-last-name {
    margin-top: .25em;
  }
  
  main .integration-proposal-form-email {
    margin-top: .25em;
    margin-bottom: 1em;
  }

  main .integration-proposal-form-message {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  main #integration-proposal-form-textarea {
    width: 100%;
    height: 100px;
  }
 
  main .integration-proposal-captcha {
  }

  main .integration-proposal-form-submit {
  /*  margin-top: 1em;   */
  }


  /** THEMES Page CSS Overrides **/ 

  /* Themes Available */
  main .themes-available-container {
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .themes-available-carousel {
    margin-top: 1em;
  }

  main .themes-available-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Themes Proposed */
  main .themes-proposed-container {
    margin-top: 1em;
    margin-top: 1em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .themes-proposed-carousel {
    margin-top: 1em;
  }

  main .themes-proposed-splash {
    width: 200px !important;
    height: 113px !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Themes Proposal Form */
  main .theme-proposal-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .theme-proposal-form-cta-area {    
    margin-top: 1em;
    margin-top: 1em;
  }
  
  main .theme-proposal-form-radio-buttons {
    margin-top: .25em;
    margin-left: 20px;
  }
  
  main .theme-proposal-form-first-name {
    margin-top: 1em;
  }
  
  main .theme-proposal-form-last-name {
    margin-top: .25em;
  }
  
  main .theme-proposal-form-email {
    margin-top: .25em;
    margin-bottom: 1em;
  }

  main .theme-proposal-form-message {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  main #theme-proposal-form-textarea {
    width: 100%;
    height: 100px;
  }
 
  main .theme-proposal-captcha {
  }

  main .theme-proposal-form-submit {
  /*  margin-top: 1em;   */
  }


  /** DRUPAL Page CSS Overrides **/ 

  /* Drupal Proposal Form */
  main .drupal-proposal-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .drupal-proposal-form-cta-area {    
    margin-top: 1em;
    margin-top: 1em;
  }
  
  main .drupal-proposal-form-radio-buttons {
    margin-top: .25em;
    margin-left: 20px;
  }
  
  main .drupal-proposal-form-first-name {
    margin-top: 1em;
  }
  
  main .drupal-proposal-form-last-name {
    margin-top: .25em;
  }
  
  main .drupal-proposal-form-email {
    margin-top: .25em;
    margin-bottom: 1em;
  }

  main .drupal-proposal-form-message {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  main #drupal-proposal-form-textarea {
    width: 100%;
    height: 100px;
  }
 
  main .drupal-proposal-captcha {
  }

  main .drupal-proposal-form-submit {
  /*  margin-top: 1em;   */
  }


  /** NEU Page CSS Overrides **/ 
  
  /* Neu Proposal Form */
  main .neu-proposal-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .neu-proposal-form-cta-area {    
    margin-top: 1em;
    margin-top: 1em;
  }
  
  main .neu-proposal-form-first-name {
    margin-top: 1em;
  }
  
  main .neu-proposal-form-last-name {
    margin-top: .25em;
  }
  
  main .neu-proposal-form-email {
    margin-top: .25em;
    margin-bottom: 1em;
  }

  main .neu-proposal-form-radio-buttons {
    margin-top: .25em;
    margin-left: 20px;
  }
  
/* IS THIS NEEDED?  BEGIN */
  main .neu-proposal-form-message {
    margin-top: 1em;
    margin-bottom: 1em;
  }
/* IS THIS NEEDED?  END */

  main #neu-proposal-form-textarea {
    width: 100%;
    height: 100px;
  }
 
  main .neu-proposal-captcha {
  }

  main .neu-proposal-form-submit {
  /*  margin-top: 1em;   */
  }


  /** BACKDROP Page CSS Overrides **/ 

  /* Neubercart Proposal Form */
  main .backdrop-proposal-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  main .backdrop-proposal-form-cta-area {    
    margin-top: 1em;
    margin-top: 1em;
  }
  
  main .backdrop-proposal-form-radio-buttons {
    margin-top: .25em;
    margin-left: 20px;
  }
  
  main .backdrop-proposal-form-first-name {
    margin-top: .25em;
  }
  
  main .backdrop-proposal-form-last-name {
    margin-top: .25em;
  }
  
  main .backdrop-proposal-form-email {
    margin-top: .25em;
    margin-bottom: 1em;
  }

  main .backdrop-proposal-form-message {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  main #backdrop-proposal-form-textarea {
    width: 100%;
    height: 100px;
  }
 
  main .backdrop-proposal-captcha {
  }

  main .backdrop-proposal-form-submit {
  /*  margin-top: 1em;   */
  }

  /* THANKS Page CSS Overrides */ 


  /* BACKDROP Page CSS Overrides */ 



  /* IF THERE IS A PROBLEM WITH THE FOOTER THIS CSS IS PROBABLY BROKEN! */
  /* IT'S USUALLYfd\'s]\

  /* FOOTER section CSS overrides */
  
  footer .footer-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
  }

  footer .footer-paragraph {
    color: white;
    text-align: center;
  }

  /* HIDE "admin" from view in footer */
  footer .blind-admin-link {
    text-align: center;
  }

  footer .blind-admin-link a {
    color: #333333;
  }
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
  }
  
  footer .footer-paragraph {
    color: white;
    text-align: center;
  }
  
  /* HIDE "admin" from view in footer */  
  footer .blind-admin-link {
    text-align: center;
  }
  
  footer .blind-admin-link a {
    color: #333333;
  }