*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
        font-size: 100%;
        font-family: "Source Sans Pro", sans-serif;
        color: white;
        background-color: #000033;

        /*  Note.  Have been using #000033 (blue) for the upper color. Nice.  */
        /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0C0C0), to(#101010));
        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #101010, #C0C0C0);

        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #101010, #C0C0C0);

        /* IE 10 */
        background: -ms-linear-gradient(top, #101010, #C0C0C0);

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #101010, #C0C0C0);
  }


/* 
 *  When primary navigation is visible, 
 *  this rule prevents content in the background from scrolling
 *  -----------------------------------------------------------  */
body.overflow-hidden { overflow: hidden; }


/*  ======================================================================
 *
 *      MAJOR PAGES >  HEADER & CONTENT CODE SECTION  
 *
 *  ====================================================================== */           

/*  Following rules insure that h2 goes behind h1 ---------  */
 .majorTitle h1, h2 { position: relative; }

 /* this was causing the h1 title to appear above the memu background */
 /*.majorTitle h1 { z-index: 2 }*/  

 .majorTitle h2 { z-index: 1 }
/*  /end of h1 & h2 z-index rules -------------------------  */

.majorTitle h1 {  -webkit-font-smoothing: antialiased;
                  width: 63%;
                  margin-top: 3%;
                  margin-left: 18.2%;
                  margin-bottom: 2%;
                  font-size: 5.0em;
                  font-style: normal;
                  text-decoration: none;
                  text-align: left;
                  font-weight: bold;
                  /*font-family: "Cinzel";*/
                  font-family: "Copperplate";
                  text-shadow: 5px 5px 5px rgba(16, 0, 0, 1.0);
                  letter-spacing: 0.0rem;
                  clear: both;
                  /*border-bottom: 1px solid white;*/
                  /*border: 1px solid red;*/ /* used for testing purposes only */
              }

/*
 *
 *  Following two rules stylize the link built-in to the main
 *  page title to take user back to home page.
 *
 *  --------------------------------------------------------- */
.majorTitle h1 a {  color: rgba(240, 0, 0, 0.8);
                    text-decoration: none;     }

.majorTitle h1 a:hover {  color: #66CC00; /* minty green color */    }
/*  /end of h1 link and hover styling   */



.majorTitle h2 {
      width: 63%;
      max-width: 1170px;
      font: 100 1.0em "Hoefler Text", Garamond, Times, serif;
      margin-top: -1.0%;
      margin-bottom: 8%; /* this rule will move content up or down */
      margin-left: 18.8%; 
      color: #D8D8D8;
      text-transform: uppercase;
      text-shadow: 3px 3px 3px rgba(24, 0, 0, 1.0);
      letter-spacing: 0.5em;
      padding: 0;
      /*border: 1px solid red;*/ /* used for testing purposes only */
  } 

/*
 *  Following is used for paragraph headings only
 *
 *  ------------------------------------------------------ */
h3 {    margin: 0;
        padding: 0;
        margin-top: 1em;
        margin-bottom: -0.5em;
        font-size: 1.5em;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.1em; 
      }

      
.majorContent { 
      font-size: 1.1em;
      /*font-family: "Source Sans Pro", sans-serif;*/
      font-family: "Times New Roman", serif;
      color: rgba(2, 23, 37, 0.9);
      letter-spacing: 1px;
      line-height: 1.3em;
      width: 90%;
      max-width: 900px;
      background-color: #D8D8D8;
      margin: 0 auto;

      margin-top: -4%;
      
      padding: 2% 5% 5% 5%;
      text-align: justify;
      border: 10px solid #C0C0C0;
  }  

.just-a-list {  width: 80%;
                margin-left: 5%;
                list-style-type: decimal;    }
                
/*=================  script-line    TEST    --------------------------------------- */

.italics {  font-style: italic;  }
 


/* Following spaces the p {element}s nicely */
.majorContent p {  margin: 1.0em 0;  }

/*  --------------------------------------------------
 *
 *      IN USE > by MAJOR pages
 *      used for linking to content subjects to be covered
 *      
 *  -------------------------------------------------- */
.will-be-covering a  {  text-decoration: none; color: red;   }

.will-be-covering a:hover  { background-color: blue;  color: white; }

.will-be-covering li {  list-style-type: none; margin-left: 5%;  } 
  /*  /end of hand planes tool page linke styling   ---------  */

/*
 *  The following two rules are used to style links to external sources
 *  --------------------------------------------------------------------- */
a.external-link {  color: red;  text-decoration: none;  text-transform: capitalize;  }
a.external-link:hover { color: red; }

/*  /end of .majorContent class code ---------------------  */







/*      #  1
 *  --------------------------------------------------------------   
    a   This keeps the icon on the page when menu is opened
    b   also keeps the text and icon in correct positon
 *  --------------------------------------------------------------   */

.nav-bar {  
    position: absolute;
    top: 0;
    left: 0;
    7background: rgba(2, 23, 37, 0.95);
    height: 50px;
    width: 100%;
    z-index: 3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.nav-trigger {  position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 50px;
                /*background-color: #03263d;*/ /* not certain what this does */
          }

/*
 *  Following is nav button TEXT color BEFORE clicking 
 *  ----------------------------------------------------- */
.nav-trigger .menu-text { color: white;
                          text-transform: uppercase;
                          font-weight: 700;
                          /* hide the text on small devices */
                          /* how does this work w/0 a media query?????  ------------------ ?????????????????  */
                          /*  Ok! w/o this the text appears ABOVE the three lines, but not sure yet 
                              what triggers this nor how it works?? 
                          */
                          display: none;
                  }

/*
 *      Following rule used to change font color 
 *      of nav text 'MENU' on hover 
 *  ------------------------------------------- */
.nav-trigger .menu-text:hover {  color: red; }


.nav-trigger .menu-icon:hover {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: white;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
}


.nav-trigger .menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: white;  
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/*
 *  following rule styles the upper and lower lines in the menu icon 
 *  --------------------------------------------------------------- */
.nav-trigger .menu-icon::before, 
.nav-trigger .menu-icon:after {  content: '';
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                background-color: white;
                                right: 0;
                                -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
                                -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
                                transition: transform .3s, top .3s, background-color 0s;
                        }


.nav-trigger .menu-icon::before {  top: -5px;  }


.nav-trigger .menu-icon::after {  top: 5px;  }

/*
 *    The following makes the nav button an 'X' when clicked
 *  --------------------------------------------------------- */
.nav-trigger .menu-icon.is-clicked {  background-color: rgba(255, 255, 255, 0); }

.nav-trigger .menu-icon.is-clicked::before, 
.nav-trigger .menu-icon.is-clicked::after {  background-color: white;  }


.nav-trigger .menu-icon.is-clicked::before { top: 0;
                                            -webkit-transform: rotate(135deg);
                                            -moz-transform: rotate(135deg);
                                            -ms-transform: rotate(135deg);
                                            -o-transform: rotate(135deg);
                                            transform: rotate(135deg);
                                   }

.nav-trigger .menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}


 /* =
  *
  *   By default we nest the nav bar out of view above the viewport  
  *
  *   ================================================================  */
.primary-nav {
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: rgba(20, 20, 20, 0.9);
      z-index: 2;
      text-align: center;
      padding: 50px 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      overflow: auto;
      /*  Following fixes the buggy scrolling on webkit browsers - mobile devices only - 
       *  when overflow property is applied 
       *  --------------------------------------------------------------------------- */
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform;
      -webkit-transition-duration: 0.4s;
      -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;
  }

/*  ==============================================================================
 *
 *    FOLLOWING RULE :
 *    MAKES THE MENU ITEMS DROP DOWN ( VISIBLE ) AFTER CLICKING THE NAV MENU ICON 
 *
 *  ============================================================================== */
.primary-nav.is-visible {  -webkit-transform: translateY(0);
                          -moz-transform: translateY(0);
                          -ms-transform: translateY(0);
                          -o-transform: translateY(0);
                          transform: translateY(0);
                        }

.primary-nav li {
      font-size: 22px;
      font-size: 1.4rem;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      margin: .2em 0;
  }

.primary-nav a {
      display: inline-block;
      padding: .4em 1em;
      border-radius: 0.25em;
      -webkit-transition: background 0.2s;
      -moz-transition: background 0.2s;
      transition: background 0.2s;

      color: #FFFFFF; 
      text-decoration: none; 
      text-transform: capitalize; 
      /* Note the follow - 700 - is less bold than 'bold'.  Nice!! =========== */
      font-weight: 500; 
  }

/*
 *  Following makes a border appear around menu item on hover
 *  Note. This border not appearing on iPhone/iPad  ????????
 *  -------------------------------------------------------------- */
/*.no-touch .primary-nav a:hover {  border: 1px solid #00FF00;  }*/

.primary-nav a:hover {  border: 1px solid #00FF00;  }


/*  HOME MENU ITEM NAV STYLING   
 *  Following affects the color of the HOME menu item in PRE-HOVER state
 */
.primary-nav .home { color: #00FF00;  }


/*  -----------------------------------------------------------------
 *
 *  Footer styles follow next 
 *
 *  ----------------------------------------------------------------- */
footer {
      position: fixed;
      bottom: 0;  
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 1440px;
      background-color: rgba(20, 20, 20, 0.6); /* same background color as the menu drop down */
      color: white;
      /*border: 1px solid red;*/ /* used for tesing purposes only */
  }

footer .copyright {
      text-transform: capitalize; 
      font-family: Titillium, Arial, sans-serif;
      font-size: 0.9em;   /*  my code  */
      font-weight: 100; /* orig was 700 */
      /*color: white;*/
      text-align: center;
  }
/*  /end of footer code ------------------------------------------ 
-------------------------------------------------------------------  */




/*  ----------------------------------------------------------------
 *
 *
 *  MEDIA QUERY SECTION FOLLOWS
 *
 *
 *  ---------------------------------------------------------------- */

 /*      # 2
 *  --------------------------------------------------------------
    a   I think we can do without this
 *  --------------------------------------------------------------   */
@media only screen and (min-width: 768px) { 
.nav-bar {  
      height: 80px;
      background: transparent;
      box-shadow: none; 
  }
} 


@media only screen and (min-width: 1170px) {
.nav-bar {  
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        transition: background-color 0.3s;
        /* Force Hardware Acceleration in WebKit */
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }

  } 


@media only screen and (min-width: 768px) {
  .nav-trigger {
        width: 100px;
        padding-left: 1em;
        background-color: transparent;
        height: 30px;
        line-height: 30px;
        right: 2.2em;
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

  .nav-trigger .menu-text {
        display: inline-block;
    }

  .nav-trigger .menu-icon {
        left: auto;
        right: 1em;
        -webkit-transform: translateX(0) translateY(-50%);
        -moz-transform: translateX(0) translateY(-50%);
        -ms-transform: translateX(0) translateY(-50%);
        -o-transform: translateX(0) translateY(-50%);
        transform: translateX(0) translateY(-50%);
      }
} 


@media only screen and (min-width: 768px) {
  .primary-nav {
    padding: 80px 0;
  }
} 


/*
 *  Following is the FONT SIZE of the main nav menu items ==============================
 */
@media only screen and (min-width: 1170px) {
  .primary-nav li {
    font-size: 30px; 
    font-size: 1.4rem;
  }
  .primary-nav .label {
    font-size: 16px;
    font-size: 1rem;
  }
} 

/*  =====   iPad and iPhome viewport MEDIA QUERIES   ================================================ */
/*    iPad horizontal-orientation width       */

@media only screen and (max-width: 1024px) {
  .majorContent { 
      margin-top: 23%;
      font-size: 1em;
      }

  .majorTitle h2 {
      display: none;
      }
}

/*    iPad vertical-orientation width       */

@media only screen and (max-width: 768px) {
  .majorContent { 
      margin-top: 23%;
      font-size: 1em;
      }

.majorTitle h2 {
      display: none;
      }
}

/*    iPhone vertical-orientation width       */

@media only screen and (max-width: 320px) {
  .primary-nav li {
      font-size: 22px;
      font-size: 1.0rem;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      margin: .2em 0;
      text-transform: uppercase;
    }

  .majorContent { 
      margin-top: 27%;
      font-size: 1em;
    }

.majorTitle h1 {
      font-size: 1.8em;
      margin-left: 12%;
    }

.majorTitle h2 {
      display: none;
    }

footer { 
      background-color: rgba(20, 20, 20, 0.0); 
    } 

footer .copyright { 
      opacity: 0; 
    }
}