/* INDEX.HTML SPECIFIC STYLES */

/* Base styles */

.leedz_text a {
  color:var(--LEEDZ_EMERALD);
}

.leedz_text span {
  margin:20px auto;
  width:94%;
  line-height: 1.3em !important;
  font-size: 1.65em !important;
  letter-spacing: 0.06em;
  display: block;
}

.intro {
    line-height:1.2em;
    color:var(--LEEDZ_LIGHTGREEN);
    border: 3px solid var(--LEEDZ_DARKGREEN);
}

.intro span {
  margin: 20px auto;
}

.intro table {
  width: 100%;
  border-collapse: collapse;
}



.intro ul {
  line-height:1.3em;
}

.intro .step_label {
  color:dodgerblue;
}

.menu_column {
  width: 30%;
  padding-right:30px;
}

.menu_column img {
  min-width:160px;
  width:100%;
  max-width:500px;
}

.workflow {
   color:var(--LEEDZ_LIGHTGREEN);
    background-color:darkslategrey;
    border: 3px solid var(--LEEDZ_GREEN);
}

.workflow span {
 margin: 20px auto;
}

#leedz_workflow {
  min-width:200px;
  max-width:800px;
  width:100%;
  margin: 0 auto;
}

.step_number {
  color:var(--LEEDZ_BKG);
  display:inline-block;
  vertical-align: middle;
  margin-right:10px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:4em;
  font-weight:600;
  line-height: 120%;
  letter-spacing:0.08em;
}

.step_label {
  color:cornflowerblue;
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.75em !important;
  font-weight:600;
  line-height:1.5em;
  vertical-align:middle;
  display:inline-block;
  letter-spacing:0.015em;
}

.free_label {
  color:var(--LEEDZ_EMERALD);
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.6em;
  font-weight:600;
  display:inline-block;
  letter-spacing:0.015em;
  margin:20px 10px 10px 10px;
}

.free_label a {
  color:var(--LEEDZ_EMERALD);
  text-decoration: none;
}

.demo_link {
  text-decoration: none;
  font-size: large;
}

.download_ext,
.download_server,
.download_mcp {
  border-radius:50px;
}

.download_ext td,
.download_server td,
.download_mcp td {
  vertical-align: top;
}

.download_ext td:nth-child(2),
.download_server td:nth-child(2),
.download_mcp td:nth-child(2) {
  text-align: center;
  width:40%;
}

.download_ext {
  background-color:lightgreen;
  color:black;
  border: 3px solid white;
}

.download_ext a {
  color:var(--LEEDZ_EMERALD);
  font-weight:600;
}

.download_ext ul {
  padding:10px;
  margin-left:5vw;
  font-size:90%;
}

.download_server {
  background-color:skyblue;
  color:black;
  border: 3px solid white;
}

.download_server a {
  color:var(--LEEDZ_EMERALD);
  font-weight:600;
}

.download_mcp {
  background-color:orange;
  color:black;
  border: 3px solid yellow;
}

.download_mcp a {
  color:dodgerblue;
  font-weight:600;
}

.download_mcp ul {
  padding:10px;
  margin-left:5vw;
  font-size:90%;
}

#ext_ex,
#server_ex,
#mcp_ex {
  width: 250px;
  max-width: 400px;
  margin: 10px auto;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#premium_btn {
  width:100%;
  max-width:230px;
  border-radius:15px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin:15px auto;
}

.mobile_only {
    line-height:1.2em;
    color:var(--LEEDZ_LIGHTGREEN);
    border: 3px solid var(--LEEDZ_DARKGREEN);
    background-color:var(--LEEDZ_BKG_DARK);
}

.about {
   color:white;
    background-color:dodgerblue;
    border: 3px solid white;
    letter-spacing: 0.08em;
}

.about a {
  text-decoration:none;
  color:var(--LEEDZ_GREEN);
  font-weight:600;
}

.contact {
   color:var(--LEEDZ_LIGHTGREEN);
    background-color:var(--LEEDZ_EMERALD);
    border: 3px solid white;
}

.contact a {
  text-decoration: none;
}

.gallery {
    color:var(--LEEDZ_LIGHTGREEN);
    background-color:darkslategrey;
    border: 3px solid var(--LEEDZ_GREEN);
}

.gallery span {
 margin: 20px auto;
}

.gallery_table {
  width: 100%;
}

.gallery td {
  text-align: center;
  vertical-align: top;
  padding:10px;
}

.gallery img {
  height:40%;
  max-width:200px;
  margin:0 auto;
  border-radius:10%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 15px;
}

#linkedin_img {
  width: 200px;
  max-width: 250px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px auto;
}

/* RESPONSIVE STYLES FOR INDEX.HTML */

/*
 * SMALL SCREENS
 */

@media screen and (max-width: 599px) {



    html {
      font-size: 13px; /* Small screens - smaller text */
      line-height: 1.2;
      font-family: var(--FONT_3);
      --screen_size: S;
    }

    .step_number {
      font-size:2em;
      color:violet;
    }

    .step_label {
      font-size:1.3em !important;
      color:var(--LEEDZ_GREEN);
    }


    .intro .step_label {
      font-size: 18pt !important;
      line-height:1.25em;
    }


    /* hide downloads */
    .a_download, .download_ext, .download_server, .download_mcp {

      display:none;
    }


    .mobile_only {
      display:block;
    }

    /* Reduce spacing from BR tags between sections */
    br {
      line-height: 0.5em;
    }

    /* Reduce container bottom margin on small screens */
    .container {
      margin-bottom: 10px;
    }

    .menu_column {
      display:none;
    }




.gallery_table {
   margin-top:10px;
  width: 100%;
  table-layout: fixed;
}


.gallery td {
  text-align: center;
  vertical-align: top;
  padding: 10px;
  width: 33.33%;
}


    .gallery img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }


    #linkedin_img {
      max-width:130px;
    }
  }


/*
 * MEDIUM SCREENS
 */

@media screen and (min-width: 600px) and (max-width: 999px) {

  html {
    width:100vw;
    max-height:900px;
    font-size: 14px; /* Medium screens - medium text */
    line-height: 1.2;
    font-family: var(--FONT_3);
    --screen_size: M;
  }

  .step_number {
    font-size:2.5em;
    color:var(--LEEDZ_BKG_LIGHT);
  }

  .step_label {
      font-size:1.5em !important;
      color:dodgerblue;
  }



    /* show downloads */
    .download_a, .download_ext, .download_server, .download_mcp {

       display:block;
    }

    .mobile_only {
      display:none;
    }

    .menu_column {
      display:block;
    }

    /* Gallery images - fit within container */
    .gallery_table {
      margin-top:10px;
      width: 100%;
      table-layout: fixed;
    }

    .gallery td {
      text-align: center;
      vertical-align: top;
      padding: 15px;
      width: 33%;
    }

    .gallery img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }

    #linkedin_img {
      max-width:150px;
    }
}

/*
 * LARGE SCREENS
 */

@media screen and (min-width: 1000px) {


  html {
    width:100%;
    font-size: 16px; /* Large screens - bigger text */
    line-height: 1.2;
    font-family: var(--FONT_3);
    --screen_size: L;
  }


  .step_number {

    font-size:4em;
    }


  .step_label {
      font-size:1.75em !important;
    }

  .intro .step_label {
      font-size: 22pt !important;
  }


        /* show downloads */
    .download_a, .download_ext, .download_server, .download_mcp {
       display:block;
    }

    .mobile_only {
      display:none;
    }

    .menu_column {

      padding:10px;
      display:block;
    }



}