@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'); 
/* Variables */
:root {
    /*  Text Colors */
    --clr-text-100: hsla(0, 0%, 100%, 1);
    /* Shelby White Text */
    --clr-text-200: hsla(0, 0%, 80%, 1);
    /* Shelby Light Grey */
    --clr-text-300: hsla(0, 0%, 60%, 1);
    /* Shelby Medium Grey */
    --clr-text-400: hsla(0, 0%, 45%, 1);
    /* Shelby Dark Grey */
    --clr-text-450: hsla(0, 0%, 20%, 1);
    /* Shelby Darkest Grey */
    --clr-text-500: hsla(0, 80%, 45%, 1);
    /* Shelby Red */
    --clr-text-600: hsla(206, 88%, 30%, 1);
    /* Shelby Blue */
    --clr-text-700: hsla(205, 81%, 29%, 1);
    /* Shelby Dark Blue */
    --clr-text-800: hsla();
    /*  */
    --clr-text-900: hsla(0, 0%, 0%, 1);
    /* Shelby t Black Text */

    /* Background Colors */
    --clr-bg-100: hsla(0, 0%, 100%, 1);
    /* shelby white bg */
    --clr-bg-125: hsla(0, 0%, 100%, 0.25);
    /* shelby white bg 25% opacity */
    --clr-bg-150: hsla(0, 0%, 100%, 0.5);
    /* shelby white bg 50% opacity */
    --clr-bg-175: hsla(0, 0%, 100%, 0.75);
    /* shelby white bg 75% opacity */
    --clr-bg-200: hsla(0, 0%, 90%, 1);
    /* shelby light grey */
    --clr-bg-300: hsla(0, 0%, 70%, 1);
    /* shelby medium grey */
    --clr-bg-400: hsla(0, 0%, 35%, 1);
    /* shelby dark grey */
    --clr-bg-450: hsla(0, 0%, 7%, 1);
    /* shelby dark grey */
    --clr-bg-500: hsla(0, 80%, 45%, 1);
    /* shelby red */
    --clr-bg-525: hsla(0, 80%, 45%, 0.25);
    /* shelby red 25% opacity */
    --clr-bg-550: hsla(0, 80%, 45%, 0.5);
    /* shelby red 50% opacity */
    --clr-bg-575: hsla(0, 80%, 45%, 0.75);
    /* shelby red 75% opacity */
    --clr-bg-600: hsla(206, 88%, 30%, 1);
    /* shelby blue 100% opacity */
    --clr-bg-625: hsla(206, 88%, 30%, .25);
    /* shelby blue 25% opacity */
    --clr-bg-650: hsla(206, 88%, 30%, .5);
    /* shelby blue 50% opacity */
    --clr-bg-675: hsla(206, 88%, 30%, .75);
    /* shelby blue 75% opacity */
    --clr-bg-610: hsla(206, 88%, 40%, 1);
    /* shelby blue hover */
    --clr-bg-700: hsla(214, 66%, 18%, 1);
    /* dark shelby blue 100% opacity */
    --clr-bg-725: hsla(214, 66%, 18%, .25);
    /* dark shelby blue 25% opacity */
    --clr-bg-750: hsla(214, 66%, 18%, .5);
    /* dark shelby blue 50% opacity */
    --clr-bg-775: hsla(214, 66%, 18%, .75);
    /* dark shelby blue 75% opacity */
    --clr-bg-800: hsla(0, 51%, 43%, 1);
    /* TS signup red */
    --clr-bg-900: hsla(0, 0%, 0%, 1);
    /* shelby black bg */
    --clr-bg-925: hsla(0, 0%, 0%, 0.25);
    /* shelby black bg 25% opacity */
    --clr-bg-950: hsla(0, 0%, 0%, 0.5);
    /* shelby black bg 50% opacity */
    --clr-bg-975: hsla(0, 0%, 0%, 0.75);
    /* shelby black bg 75% opacity */
    --clr-bg-1000: hsla(46, 78%, 48%, 1);
    /* Amazon yellow */
    --clr-bg-1010: hsla(40, 100%, 46%, 1);
    /* Amazon dark yellow */
    --clr-bg-1100: hsla(57, 100%, 50%, 1);
    /* Top Alert Banner Yellow */

    /* Font Sizing */
    --fs-050: 0.75rem;
    /* 12px */
    --fs-100: 0.875rem;
    /* 14px */
    --fs-200: 1.0rem;
    /* 16px */
    --fs-250: 1.065rem;
    /* 16px */
    --fs-300: 1.125rem;
    /* 18px */
    --fs-400: 1.25rem;
    /* 20px */
    --fs-500: 1.375rem;
    /* 22px */
    --fs-550: 1.4rem;
    /* 23px */
    --fs-600: 1.5rem;
    /* 24px */
    --fs-650: 1.563rem;
    /* 25px */
    --fs-700: 1.625rem;
    /* 26px */
    --fs-800: 1.75rem;
    /* 28px */
    --fs-900: 1.875rem;
    /* 30px */
    --fs-1000: 2.0rem;
    /* 32px */
    --fs-1050: 2.125rem;
    /* 34px */
    --fs-1100: 2.25rem;
    /* 36px */
    --fs-1150: 2.375rem;
    /* 38px */
    --fs-1200: 2.5rem;
    /* 40px */

    /* Font Weight */
    --fw-100: 100;
    --fw-300: 300;
    --fw-400: 500;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /* Padding and Margins */
    --spc-025: 0.313em;
    --spc-050: 0.375em;
    --spc-075: 0.438em;
    --spc-100: 0.500em;

}

/* CSS reset */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 14px;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--clr-bg-100);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
body#Body {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
header,
main,
footer {
    float: left;
    width: 100%;
}
header,
footer {
    padding: 1em 0;
}
footer {
    background-color: #5d5d5d;
    margin: 10px 0 0;
}
.logo {
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    max-height: 101px;
    height: 101px;
    text-align: center;
    padding: 22px 32px 0 32px;
    max-width: 100%;
}
#Logo {
    max-width: 300px;
}
/* Top Nav */
.topnav {
    overflow: hidden;
    clear: right;
    margin-top: 5px;
    -webkit-transition: margin 0.5s linear;
    -khtml-transition: margin 0.5s linear;
    -moz-transition: margin 0.5s linear;
    -ms-transition: margin 0.5s linear;
    -o-transition: margin 0.5s linear;
    transition: margin 0.5s linear;
  }
  .topnav a {
    float: left;
    display: block;
    color: var(--clr-text-600);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: var(--clr-text-100);
    color: var(--clr-text-600);
  }
  
  .topnav a.active {
    background-color: var(--clr-text-100);
    color: var(--clr-text-600);
  }
  
  .topnav .icon {
    display: none;
  }
  @media screen and (max-width: 800px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 800px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .mainnav {
        margin-top: 100px;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  .shelbyhome {
    color:var(--clr-text-600);
    margin-top:5px;
  }
/* Top Nav end */

/* Licensing Site */
.csl-footer {
    padding: 1.563em;
  }
  .csl-footersub1 {
    margin: 0.938em 5.3125em 1.875em;
  }
  .csl-footersub2 {
    border-top: .5px solid var(--clr-bg-100);
    padding: 0.938em 1.563em 0.625em;
    margin: 0.938em 5.3125em 0;
    text-align: center;
    color: var(--clr-text-100);
  }
  .csl-footermenu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .csl-footermenu span {
    font-size: var(--fs-400);
    padding: 0 0 0.625em;
    display: block;
    color: var(--clr-text-100);
  }
  .csl-footermenu li a {
    color: var(--clr-text-100);
  }
  .csl-footerheader {
    color: var(--clr-text-100) !important;
    font-size: var(--fs-400) !important;
  }
  .csl-footertext p {
    font-size: 1.125rem;
    padding: 0 0 0.625em;
    color: var(--clr-text-100);
  }
  a.csl-footerbtn {
    background: var(--clr-bg-600);
    color: var(--clr-text-100);
    font-size: var(--fs-300);
    padding: 0.375em 7.5em;
  }
  a.csl-footerbtn:hover {
    background: var(--clr-bg-600);
    color: var(--clr-text-100);
  }
  .csl-billbaord {
    height: 450px;
    background: url(../images/licensinghomebanner.jpg) no-repeat 0 0 transparent;
    text-align: center;
  }
  .csl-billbaord p {
    font-size: var(--fs-1200);
    color: var(--clr-text-100);
    padding: 13.125em 0 0.938em;
  }
  a.csl-billbaordbtn {
    color: var(--clr-text-100);
    border: 3px solid var(--clr-text-100);
    padding: 0.5em 2.5em;
    font-size: var(--fs-800);
    text-transform: uppercase;
  }
  a.csl-billbaordbtn:hover {
    color: var(--clr-text-900);
    background-color: var(--clr-bg-100);
  }
  .csl-trypic {
    background: var(--clr-bg-700);
    margin: 0;
    padding: 0 0 1.125em;
  }
  .csl-tryptics {
    display: block;
    float: left;
    margin: 0.625em 0px;
    text-align: left;
  }
  .csl-trypticimg {
    float: left;
    padding: 1.563em 0.4375em 0;
    width: 100px;
  }
  .csl-trypticheader {
    color: var(--clr-text-100) !important;
    text-align: left;
    padding: 0.3125em 0 0.625em 5.3125em;
    font-size: var(--fs-500);
    font-weight: 600 !important;
  }
  .csl-tryptics p {
    color: var(--clr-text-100);
    padding: 0px 0.625em 1.125em 6.25em;
    font-size: var(--fs-300);
    text-align: left;
  }
  a.csl-trypicbtn {
    color: var(--clr-text-100);
    border: 1px solid var(--clr-bg-100);
    padding: 0.3125em 1.375em;
    font-size: var(--fs-300);
    text-transform: capitalize;
    margin: 0 0 0 6.25em;
  }
  a.csl-trypicbtn:hover {
    color: var(--clr-text-700);
    background-color: var(--clr-bg-100);
  }
  .csl-homebot {
    padding: 1.563em 2.5em;
    font-size: var(--fs-300);
  }
  .csl_third {
    list-style: none;
    width: 100%;
    text-align: center;
    border: 1px solid var(--clr-bg-200);
    text-transform: uppercase;
  }
  .csl_thirdtop {
    background-color: var(--clr-bg-450);
    color: var(--clr-text-100);
    font-size: var(--fs-800);
    line-height: 50px;
  }
  .csl_thirddesc {
    color: var(--clr-text-400);
    line-height: var(--fs-500);
    font-size: var(--fs-200);
    padding: 0.625em 1.875em;
  }
  .csl_thirdoptions {
    border-top: 1px solid var(--clr-bg-200);
    font-size: var(--fs-200);
    color: var(--clr-text-300);
    line-height: 40px;
  }
  .csl_thirdbutton {
    border-top: 1px solid var(--clr-bg-200);
    padding: 0.938em 0;
  }
  a.cslbtn1, 
  a.cslbtn2,
  a.cslbtn3   {
    background-color: var(--clr-bg-600);
    color: var(--clr-text-100);
    font-size: var(--fs-200);
    position: relative;
    height: 35px;
    display: block;
    margin: 0 auto;
    line-height: 35px;
    text-align: left;
    padding: 0 0 0 1.875em;
  }
  a.cslbtn1 {
    width: 78%;
  }
  a.cslbtn2 {
    width: 73%;
  }
  a.cslbtn3 {
    width: 78%;
  }
  a.cslbtn1:hover,
  a.cslbtn2:hover,
  a.cslbtn3:hover {
    background-color: var(--clr-bg-600);
    color: var(--clr-text-100);
  }
  a.cslbtn1 span,
  a.cslbtn2 span,
  a.cslbtn3 span {
    background: var(--clr-bg-600);
    position: absolute;
    right: 0;
    height: 100%;
    width: 37px;
    padding: 0px 0.625em;
  }
  .licensingboxes p {
    font-size: var(--fs-500);
  }
  .csl-logolist li {
    list-style: none;
    float: left;
    width: 350px;
    height: 240px;
  }
  .csl-centering {
    text-align: center;
    padding: 1.563rem;
  }

  /* Licensing Site end */
