/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*** MENU & HEADER AREA ***/
.jumbotron {
    background: url('../img/background-pic.jpg') no-repeat center;
    background-size:cover;
  }

.menu {
    list-style: none;
    margin:6% -12%;
}

.menu li {
    display: inline-block;
    padding:2%;
}

.menu li a {
    color:#ffffff;
    font-family:'The Girl Next Door', Cursive;
    font-size:1em;
}

.menu li a:hover {
    color:#1affb2;
}

#header-logo {
   margin-left: 6%;
   margin-top: 22%;
}

#sub-header {
    margin:2% -1%;
}

#sub-header h3 {
    color:#ffffff;
    font-family:'The Girl Next Door', Cursive;
    font-size: 1.2em;
    text-align: center;
}


/*** END OF MENU & HEADER AREA ***/

/*** ABOUT AREA ***/
    
    body {
        background-color:#f2f2f2;
    }

    .about-menu {
        list-style: none;
        margin-left:-15%;
    }

    .about-menu li {
        display:inline-block;
        padding:2%;
    }

    .about-menu li a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    .about-menu li a:hover {
        color:#1affb2;
    }
    
    #home-menu {
        margin-left:43%;
        padding-top: 1.5%;
    }

    #home-menu a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
        margin-top: 5%;
    }

    #about-subtitle h3 {
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1.25em;
        text-align: center;
        text-decoration: underline;
    }

    #francine-pic {
        border:2px solid #00b359;
        border-radius:60%;
        margin:1% 24%;
        width:50%;
    }

    #decor-1 {
        margin-left: 15%;
        margin-top:-22%;
        width:15%;
    }

    #decor-2 {
        margin-left:36%;
        margin-top: -22%;
        width:15%;
    }

    #pic-title {
        font-family: 'The Girl Next Door', Cursive;
        margin: 2% 24%;
    }

    #divider {
        margin: 2% 42%;
        width:10%;
    }

    #about-script {
        font-family:'Raleway', sans-serif;
        margin:0% 7%;
        text-align:center;
    }

    #countryside {
        border: 1px solid #00b359;
        margin:2% 22%;
        width:55%;
    }
    
/*** END OF ABOUT AREA ***/

/*** PROJECTS AREA ***/

    .projects-menu {
        list-style: none;
        margin-left: -10%;
    }

    .projects-menu li {
        display:inline-block;
        padding:2%;
    }

    .projects-menu li a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    .projects-menu li a:hover {
        color:#1affb2;
    }

    #home-menu {
        margin-left:43%;
        margin-top: -7%;
    }

    #home-menu a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    #projects-script h3{
        font-family:'The Girl Next Door', Cursive;
        font-size: 1.7em;
        margin: 0% 38%;
        text-decoration: underline;
    }

    #divider-projects {
        margin: 1% 46%;
        width:10%;
    }

    #divider-projects-2 {
        margin: 1% 44%;
        width:10%;
    }

    #projects-script {
        font-family: 'Raleway', sans-serif;
        margin:0% 4%;
        text-align: center;
        width: 90%;
    }

    #youth-pic {
        border: 2px solid #00b359;
        margin:2% 28%;
        width:41%;
    }

   #projects-content{
        width:100%;
    }

    #goals {
        font-family:'Raleway', sans-serif;
        margin:2% 2%;
    }

    #threegoals {
        width:98%;
        margin:1% 2%;
    }

    #threegoals h3 {
        font-family: 'The Girl Next Door', Cursive;
        font-size:1.3em;
        text-align:center;
    }

    #goalpic {
        border:1px solid #00b359;
        margin: 1% 30%;
        width:40%;
    }

    #threegoals p {
        font-family:'Raleway', sans-serif;
        margin:1% 6%;
        text-align: center;
    }

    #challenge {
        font-family:'Raleway', sans-serif;
        margin:1% 6%;
        text-align: center;
        width:94%;
    }

    #divider-projects-3 {
        margin: 1% 40%;
        width:10%;
    }

    #bullet-points {
        margin:0% 2%;
        text-align: left;
    }

/*** END OF PROJECTS AREA ***/

/*** STAFF AREA ***/
    .staff-menu {
        list-style: none;
        margin-left: -12%;    
    }

    .staff-menu li {
        display:inline-block;
        padding:2%;
    }

    .staff-menu li a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    .staff-menu li a:hover {
        color:#1affb2;
    }

    #home-menu {
        margin-left:45%;
        margin-top: -7%;
    }

    #home-menu a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    #staff-script {
        font-family: 'The Girl Next Door', Cursive;
        margin-top:2%;
        text-align: center;
    }

/*** END OF STAFF AREA ***/

/*** BLOG AREA ***/
    .blog-menu {
        list-style: none;
        margin-left:-18%; 
    }

    .blog-menu li {
        display:inline-block;
        padding:2%;
    }

    .blog-menu li a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    .blog-menu li a:hover {
        color:#1affb2;
    }

    #home-menu {
        margin-left: 40%;
    }

    #blog-script {
        font-family: 'The Girl Next Door', Cursive;
        margin-top:2%;
        text-align: center;
    }



/*** END OF BLOG AREA ***/

/*** CONTACT AREA ***/
    .contact-menu {
        list-style: none;
        margin-left:-10%;
    }

    .contact-menu li {
        display:inline-block;
        padding: 2%;
    }

    .contact-menu li a {
        color:#000000;
        font-family: 'The Girl Next Door', Cursive;
        font-size: 1em;
    }

    .contact-menu li a:hover {
         color:#1affb2;
    }

    #home-menu {
        margin-left:42%;
    }

    #contact-script {
        font-family: 'The Girl Next Door', Cursive;
        text-align: center;
    }

    #social-media {
        margin-left: 2%;
        margin-top: 1%;
    }

    #social-media li{
        display: inline;
        list-style: none;
        padding:2%;
    }

    #media-icon {
        border: 1px solid #1affb2;
        width:15%;
    }

    #contact-form {
        background-color: #1affb2;
        margin:0% 5%;
        width:90%;
    }

    #input-name, #input-email, #input-message {
        border:1px solid #000000;
        font-family: 'The Girl Next Door', Cursive;
        margin: 5%;
        padding: 1em;
        width:90%;
    }

    #input-submit {
        background-color: #cccccc;
        font-family: 'The Girl Next Door', Cursive;
        margin:1% 32%;
        width:30%;
    }

    #bottom-script {
        font-family: 'The Girl Next Door', Cursive;
        font-size: .80em;
        margin-top: 3%;
        text-align: center;
    }

/*** END OF CONTACT AREA ***/






/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/*** Medium Mobile Devices ***/
@media only screen and (min-width:350px) and (max-width:380px) {

    /* HEADER AREA */

      .jumbotron {
        background-size: cover;
      }

      .menu {
        margin: 6% -5%;
      }

    /* END OF HEADER AREA */

    /* ABOUT AREA */
        .about-menu {
            margin-left:-7%;
        }

        #home-menu {
            margin-left: 43.70%;
            padding-top: 2.5%;
        }

         #pic-title {
            margin:2% 26%;
         }


    /* END OF ABOUT AREA */

    /* PROJECTS AREA */
        .projects-menu {
            margin-left: -5%;
         }

         #home-menu {
            margin-left:42%;
        }

        #divider-projects-1{
            margin: 1% 44%;
        }

        #challenge {
            width:92%;
        }


    /* END OF PROJECTS AREA */

    /* STAFF AREA */

        .staff-menu {
            margin-left: -5%;
        }

        #home-menu {
            margin-left: 46%;
        }

    /*** END OF STAFF AREA ***/

    /* BLOG AREA */
        .blog-menu {
            margin-left: -8%;
        }

        #home-menu {
            margin-left:43%;
        }
    /*END OF BLOG AREA */

    /* CONTACT AREA */
        .contact-menu {
            margin-left: -4%;
        }

    /*END OF CONTACT AREA */



}



/** Large Mobile Devices ***/
@media only screen and (min-width: 381px) and (max-width:500px) {
   
    /* HEADER AREA */
        .jumbotron {
            background-size: cover;
        }

        .menu {
           margin: 6% -2%;
        }

        .menu li a {
            font-size: 1.2em;
        }

        #sub-header h3 {
           font-size: 1.4em; 
        }

    /* END OF HEADER AREA */

    
    /* ABOUT AREA */
        .about-menu {
            margin-left:-1%;
        }

        .about-menu li {
            padding:2%;
        }

        #home-menu {
            margin-left: 44%;
            padding-top: 3.5%;
        }

        #pic-title {
            margin:2% 28%;
         }

    /* END OF ABOUT AREA */

    /* PROJECTS AREA */

        .projects-menu {
            margin-left: 2%;
        }

        #divider-projects-1 {
            margin: 1% 44%;
        }

        #challenge {
            width:90%;
        }

    /* END OF PROJECTS AREA */

    /* STAFF AREA */
         .staff-menu {
            margin-left: -1%;
         }

    /*END OF STAFF AREA */

    /* BLOG AREA */

     .blog-menu {
        margin-left: -2%;
        }

    /* END OF BLOG AREA */

    /* CONTACT AREA */
        .contact-menu {
            margin-left: 2%;
        }

    /* END OF CONTACT AREA */


}


/** Small Tablet Devices **/
@media only screen and (min-width: 501px) and (max-width: 767px) {
  
    /* HEADER AREA */
        
        .jumbotron {
            background-size: cover;
        }

        .menu {
           margin: 5% 5%;
        }

        .menu li a {
            font-size: 1.4em;
        }

        #header-logo {
            margin-left: 14%; 
            margin-top: 18%;
            width:85%;
        }

        #sub-header h3 {
            font-size: 1.4em;
        }
   
    /* END OF HEADER AREA */

    /* ABOUT AREA */
        .about-menu {
            margin-left: 12%;
        }

        #home-menu {
            margin-left:45%;
            margin-top: -2%; 
        }

        #pic-title {
            margin-left: 34%;
        }
        
     /* END OF ABOUT AREA */

     /* PROJECTS AREA */

        .projects-menu {
            margin-left: 20%;
        }

        #home-menu {
            margin-left: 48%;
        }

     /* END OF PROJECTS AREA */


     /* STAFF AREA */
        .staff-menu {
            margin-left: 6%;
        }

        #home-menu {
            margin-left: 40%;
        }

    /* END OF STAFF AREA */

    /* BLOG AREA */

     .blog-menu {
            margin-left: 6%;
        }

    /* END OF BLOG AREA */

    /*** CONTACT AREA ***/

        .contact-menu {
            margin-left: 10%;
        }

        #social-media {
            margin-left: 24%;
        }

        #media-icon {
            width:7%;
        }


    /*** END OF CONTACT AREA ***/




}

/** Tablet Devices **/
@media only screen and (min-width: 768px ) and (max-width: 920px) {
    /* HEADER AREA */
        
        .jumbotron {
            background-size:cover;
            margin-top: -1%;
        }

        .menu {
            margin-left: 2%;
        }

        .menu li {
            padding: 3%;
        }

        .menu li a {
            font-size:2em;
        }

        #header-logo {
            margin-left:22%;
            margin-bottom: 30%;
            margin-top: 15%;
        }

        #sub-header {
            margin-top: -12%;
        }

        #sub-header h3 {
            font-size: 2.5em;
            text-align:center;
        }
        
     /* END OF HEADER AREA */

    /* ABOUT AREA */
        .about-menu {
            margin-left: 3%;
        }

        .about-menu li {
            font-size: 2em;
            padding: 3%;
        }

        #section-icon {
            width:120%;
        }

        #home-menu {
            font-size:2em;
            margin-left: 46%;
            margin-top:-4%;
        }

        #about-subtitle {
            font-size: 2em;
        }

        #francine-pic {
            margin:2% 30%;
            width:40%;
        }

        #decor-1 {
            margin-left:26%;
            width:7%;
        }

        #decor-2 {
            margin-left:32%;
            width:7%;
        }

        #pic-title {
            font-size: 1.6em;
            margin: 0% 34%;
        }

        #divider {
            margin: 1% 44%;
        }

        #about-script {
            font-size:1.5em;
        }

        #countryside {
            margin:1% 26%;
            width:45%;
        }

    /* END OF ABOUT AREA */

    /* PROJECTS AREA */
        .projects-menu {
            margin-left: 3%;
            margin-top: 3%;
        }

        .projects-menu li {
            padding: 4%;
        }

        .projects-menu li a {
            font-size:2em;
        }

        #projects-script h3 {
            font-size: 2.3em;
            margin:1% 84%;
        }

        #divider-projects {
            margin:1% 89%;
            width:16%;
        }

        #youth-pic {
            width:70%;
        }

        #projects-script {
            margin-top: 4%;
            width: 50%;
        }

        #projects-script p {
            font-size: 1.1em;
            margin:0% 1%;
        }

        #projects-content {
            margin-top: 4%;
            width: 40%;
        }

        #goals {
            font-size: 1.2em;
        }

        #divider-projects-2 {
            margin: 1% 43%;
            width:8%;
        }

        #threegoals {
            width: 94%;
        }

        #threegoals p {
            font-size: 1.1em;
        }

        #challenge {
            font-size: 1.1em;
            width: 88%;
        }

        #divider-projects-3 {
            margin: 1% 36%;
            width:8%;
        }

    /* END OF PROJECTS AREA */

    /* STAFF AREA */
        .staff-menu {
            margin-left: 1%;
            margin-top: 2%;
        }

        .staff-menu li {
            padding:4%;
        }

        .staff-menu  li a{
            font-size: 2em;
        }
     /* END OF STAFF AREA */

     /*BLOG AREA */
        .blog-menu {
            margin-left:-1%;
        }

        .blog-menu li {
            padding:4%;
        }

        .blog-menu li a {
            font-size: 2em;
        }

    /* END OF BLOG AREA */

    /*** CONTACT AREA ***/
        
        .contact-menu {
            margin-left: 2%; 
        }

        .contact-menu li {
            padding: 4%;
        }

        .contact-menu li a {
            font-size: 2em;
        }

        #social-media {
            margin-left: 28%;
        }

        #media-icon {
            width:7%;
        }


    /*** END OF CONTACT AREA ***/



}



/** Laptop Devices **/
@media only screen and (min-width:921px) and (max-width:1200px) {
    /* HEADER AREA */
        
        .jumbotron {
            background-size: cover;
            margin-top: -5%;
        }

        .menu {
            margin-left:12%;
        }

        .menu li a{
            font-size:2em;
        }

        #header-logo {
            margin-left: 26%;
            margin-top: 8%;
        }

         #sub-header {
            margin-left: -4%;
        }
        
        #sub-header h3 {
           font-size: 2.75em; 
        }

    /* END OF HEADER AREA */

    /* ABOUT AREA */
        .about-menu {
            margin-left: 6%;
        }

        .about-menu li {
            font-size: 2em;
            padding: 4%;
        }

        #section-icon {
            width:120%;
        }

        #home-menu {
            font-size:2em;
            margin-left: 46%;
            margin-top:-4%;
        }

        #about-subtitle {
            font-size:2em;
            margin-left:1%;
        }

        #francine-pic {
            margin: 3% 36%;
            width:30%;
        }

        #decor-1 {
            margin-left:31%;
            width:7%;
        }

        #decor-2 {
            margin-left:25%;
            width:7%;
        }

        #pic-title {
            font-size: 1.5em;
            margin-left:40%;
            margin-top: -1%;
        }

        #divider {
            margin-left:45%;
        }

        #about-script {
            font-size:1.5em;
            margin-left: 8%;
        }

        #countryside {
            margin:1% 28%;
            width:45%;
        }

    /* END OF ABOUT AREA */


    /* PROJECTS AREA */
        .projects-menu {
            margin-left:10%; 
            margin-top:3%;
        }

        .projects-menu li {
            padding:4%;
        }

        .projects-menu li a {
            font-size: 2em;
        }

        #projects-script h3 {
            font-size:2.75em;
            margin:3% 91%;
        }

        #divider-projects {
            margin: 2% 93%;
            width:22%;
        }

        #projects-content {
            width:40%;
        }

        #youth-pic {
            width:65%;
        }

        #projects-script {
            width:45%;
        }

        #projects-script p {
            font-size:1.25em;
        }

        #goals p {
            font-size: 1.35em;
            font-weight: bold;
            margin-left:4%;
        }

        #threegoals {
            width:28%;
        }

        #goalpic {
            margin:0% 20%;
            width:65%;
        }

        #threegoals p {
            font-size: 1.1em;
        }

        #divider-projects-3 {
            margin:1% 20%;
            width:12%;
        }

        #challenge {
            font-size: 1.25em;
            width:90%;
        }
        
    /* END OF PROJECTS AREA */


    /* STAFF AREA */
         .staff-menu {
            margin-left: 6%;
            margin-top: 2%;
        }

        .staff-menu li {
            padding:4%;
        }

        .staff-menu  li a{
            font-size: 2em;
        }

    /* END OF STAFF AREA */

    /* BLOG AREA */
        .blog-menu {
            margin-left: 5%;
            margin-top: 1%;
        }

        .blog-menu li {
            padding:4%;
        }

        .blog-menu li a {
            font-size: 2em;
        }
    /* END OF BLOG AREA */

    /*** CONTACT AREA ***/

        .contact-menu {
            margin-left: 10%;
            margin-top: 1%; 
        }

        .contact-menu li {
            padding: 4%;
        }

        .contact-menu li a {
            font-size: 2em;
        }

        #social-media {
            margin-left: 30%;
        }

        #contact-form {
            margin-left: 20%;
            width:60%;
        }

        #media-icon {
            width:7%;
        }

        #input-submit {
            margin-left: 34%;
        }


    /*** END OF CONTACT AREA ***/


}

/** DESKTOPS**/
@media only screen and (min-width:1201px) and (max-width:1600px ){
    /* HEADER AREA */  
        
        .jumbotron {
            background-size: cover;
        }

        .menu {
           margin-left: 18%;
           margin-top: -1%;  
        }

        .menu li a{
           font-size:2em; 
         }

        #header-logo {
            margin-left: 32%;
            margin-top: 5%;
        }

        #sub-header h3 {
            font-size:2.75em;
         }

    /* END OF HEADER AREA */

    /* ABOUT AREA */
        .about-menu {
            margin-left: 6%;
        }

        .about-menu li {
            font-size: 2em;
            padding: 5%;
        }

        #section-icon {
            width:120%;
        }

        #home-menu {
            font-size:2em;
            margin-left: 47%;
            margin-top:-4%;
        }

        #about-subtitle {
            font-size:2em;
            margin-left:0%;
        }

        #francine-pic {
            margin: 3% 35%;
            width:30%;
        }

        #decor-1 {
            margin-left:29%;
            width:7%;
        }

        #decor-2 {
            margin-left:27%;
            width:7%;
        }

        #pic-title {
            font-size: 1.5em;
            margin-left:41%;
            margin-top: -2%;
        }

        #divider {
            margin-left:45%;
        }

        #about-script {
            font-size:1.5em;
            margin-left: 8%;
        }

        #countryside {
            margin:1% 28%;
            width:45%;
        }
     /* END OF ABOUT AREA */

     /* PROJECTS AREA */

        .projects-menu {
            margin-left: 9%;
            margin-top: 1%; 
        }

        .projects-menu li {
            padding: 5%;
        }

        .projects-menu li a {
            font-size: 2em;
        }

        #projects-script h3 {
            font-size:2.75em;
            margin:4% 94%;
        }

        #divider-projects {
            margin: 3% 93%;
            width:22%;
        }

        #projects-content {
            width:40%;
        }

        #youth-pic {
            width:60%;
        }

        #projects-script {
            width:45%;
        }

        #projects-script p {
            font-size:1.35em;
            margin:2% 2%;
        }

        #goals p {
            font-size: 1.2em;
            font-weight:bold;
            margin-left: 6%;
        }

        #threegoals {
            width:28%;
        }

        #goalpic {
            margin:0% 20%;
            width:65%;
        }

        #threegoals p {
            font-size: 1.1em;
        }

        #divider-projects-3 {
            margin:1% 20%;
            width:12%;
        }

        #challenge {
            font-size: 1.25em;
            width:90%;
        }
        

     /* END OF PROJECTS AREA */

     /*STAFF AREA */

        .staff-menu {
            margin-left: 6%;
            margin-top: 1%;
        }

        .staff-menu li {
            padding:5%;
        }

        .staff-menu  li a{
            font-size: 2em;
        }


    /* END OF STAFF AREA */

    /* BLOG AREA */

    .blog-menu {
            margin-left: 12%;
            margin-top: 1%;
        }

        .blog-menu li {
            padding:4%;
        }

        .blog-menu li a {
            font-size: 2em;
        }

    /* END OF BLOG AREA */

    /* CONTACT AREA */

        .contact-menu {
            margin-left: 14%;
            margin-top: 1%; 
        }

        .contact-menu li {
            padding: 4%;
        }

        .contact-menu li a {
            font-size: 2em;
        }

         #social-media {
            margin-left: 32%;
        }

        #contact-form {
            margin-left: 20%;
            width:60%;
        }

        #media-icon {
            width:7%;
        }

        #input-submit {
            margin-left: 36%;
        }

    /*END OF CONTACT AREA */


}

/** EXTRA-LARGE DESKTOPS & JUMBOTRONS ***/
@media only screen and (min-width:1601px) and (max-width:2000px ) {
    /* HEADER AREA */
        .jumbotron {
            background-size: cover;
        }

        .menu {
            margin-left: 22%;
        }

        .menu li a {
            font-size:2em;
        }

        #header-logo {
            margin-left: 38%;
            margin-top: 5%;
        }

        #sub-header h3 {
            font-size: 2.75em;
        }

     /* END OF HEADER AREA */

     /* ABOUT AREA */

        .about-menu {
            margin-left: 16%;
            margin-top: 3%;
        }

        .about-menu li {
            padding: 4%;
        }

        .about-menu li a {
            font-size: 2em;
        }

        #home-menu {
            font-size: 2em;
            margin-left:50%; 
            margin-top:-3%;
        }

        #about-subtitle {
            font-size: 2em;
            margin-left: 2%;
        }

        #francine-pic {
            margin-left: 40%;
            width:25%;
        }

        #decor-1 {
            margin-left:36%;
            margin-top:-10%;
            width:5%;
        }

        #decor-2 {
            margin-left:22%;
            margin-top:-10%;
            width:5%;
        }

        #pic-title {
            font-size:1.5em;
            margin-left: 46%;
        }

        #divider {
            margin-left:48%;
            width:7%;
        }

        #about-script {
            font-size: 1.75em;
        }

        #countryside {
            margin-left: 33%;
            width:35%;
        }

     /* END OF ABOUT AREA */

     /* PROJECTS AREA */

     .projects-menu {
            margin-left: 9%;
            margin-top: 1%; 
        }

        .projects-menu li {
            padding: 5%;
        }

        .projects-menu li a {
            font-size: 2em;
        }

        #home-menu {
            margin-left:46%;
        }

        #projects-script h3 {
            font-size:2.75em;
            margin:4% 95%;
        }

        #divider-projects {
            margin: 3% 93%;
            width:22%;
        }

        #projects-content {
            width:40%;
        }

        #youth-pic {
            width:60%;
        }

        #projects-script {
            width:45%;
        }

        #projects-script p {
            font-size:1.35em;
            margin:2% 2%;
        }

     #goals p {
            font-size: 1.2em;
            font-weight:bold;
            margin-left: 6%;
        }

        #threegoals {
            width:28%;
        }

        #goalpic {
            margin:0% 20%;
            width:65%;
        }

        #threegoals p {
            font-size: 1.1em;
        }

        #divider-projects-3 {
            margin:1% 20%;
            width:12%;
        }

        #challenge {
            font-size: 1.25em;
            width:90%;
        }

     /* END OF PROJECTS AREA */

     /* STAFF AREA */
     .staff-menu {
            margin-left: 6%;
            margin-top: 1%;
        }

        .staff-menu li {
            padding:5%;
        }

        .staff-menu  li a{
            font-size: 2em;
        }

    /* END OF STAFF AREA */

    /* BLOG AREA */
        .blog-menu {
            margin-left: 12%;
            margin-top: 1%;
        }

        .blog-menu li {
            padding:4%;
        }

        .blog-menu li a {
            font-size: 2em;
        }

    /* END OF BLOG AREA */

    /*** CONTACT AREA ***/
        .contact-menu {
            margin-left: 14%;
            margin-top: 1%; 
        }

        .contact-menu li {
            padding: 4%;
        }

        .contact-menu li a {
            font-size: 2em;
        }

         #social-media {
            margin-left: 32%;
        }

        #contact-form {
            margin-left: 20%;
            width:60%;
        }

        #media-icon {
            width:7%;
        }

        #input-submit {
            margin-left: 36%;
        }


    /*** END OF CONTACT AREA ***/




}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}