img {/* from Ozzie getting rid of W3schools style that made my mastheads jumpy */ 
vertical-align: baseline !important;
}

/*DESKTOP no media query, browser default is 100% unless you do media query*/
 /* this  body padding, margin line from Funk removes any default padding and style, might only need one of these values set.*/

* body{
margin: 0px;
padding: 0px;
}

/* INDEX PAGE */  

            /*This made bio page type run over bio image.
            * {
                box-sizing: border-box;
            }*/
            
            /* disappearing headline */ 
            .purple, .heading:hover .purple, .heading.touching .purple{
                color: #9494b8;
            }

            .maize, .heading:hover .maize, .heading.touching .maize {
                color: rgb(217,175,40);
            }

            .rose, .heading:hover .rose, .heading.touching .rose {
                background-color: rgb(166,134,157);
                border-color: rgb(166,134,157);
                color: rgb(166,134,157);
            }
      
            .magenta, .heading:hover .magenta, .heading.touching .magenta {
                color: rgb(170,96,122);
            }

            .magentamaize, .heading:hover .magentamaize, .heading.touching .magentamaize {
                color: rgb(194,136,81);
            }

            .purplemaize, .heading:hover .purplemaize, .heading.touching .purplemaize{
                color: rgb(183,162,112);
            }
      
            .tan, .heading:hover .tan, .heading.touching .tan {
                color:  #c2c2a3;
            }

            a, a:hover {
                color: inherit;
                text-decoration: underline;
            }

            .center {
                position: fixed;
                top: 65%;
                left: 30%;  
              }

            .title > span {
                background-color: inherit !important;
                color: #fff;
                font-family: "Roboto condensed", sans-serif;
                font-size: 110px;
                margin: 0;
                padding: 0;
                transition: color ease-in-out 500ms;
            }
      
            .charcoal{
                color: rgb(187,187,187);
              }

            .antique{
                color: rgb(242,221,200);
            }
      
            #copyright {
                    font: 10px gillsans, sans-serif;
                    color:rgb(102,102,153);
                    position: fixed;
                    bottom:10px;
                    left: 10px;
                }
            
            
/* ALL PAGES except index */ 

                /*Centers the page otherwise all screwed up upon loading*/
                #page_wrapper{
                    max-width: 1200px !important; /*must be max-width & not width otherwise mobile will be centered and not hug left side*/
                    margin: auto !important;
                }   

                #header {              
                    text-align: center;
                    margin-top: 60px;
                  }
        
                .content_center{
                    font: 18px gillsans, sans-serif;
                    color: #bfbfbf;
                    border-top: 2px rgb(200,200,200) dotted;
                    border-bottom: 2px rgb(200,200,200) dotted;
                    width: 100%;
                    padding: 5px;
                    text-align:center;
                    margin: 20px auto 0px auto;
                  } 
                  
                 .grid{
                    /*background-image: url("images/graph_home.jpg");
                    background-repeat: no-repeat;
                    background-size:cover;
                    height: 100vh; oz oput vh for monitor height*/
                    width: 100%; 
                    } 

    /* THUMBNAIL PAGES */

                    p{
                    color: #46465b;
                    font-size: .9rem;
                    font-family: "Gill Sans", sans-serif;
                    width: 50%; /*width of line in enlarged photo*/
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                }
        
         
                 h1{
                    font: 18px "Raleway", sans-serif;
                    text-align: center;
                    color:  #47476b;
                }

                h2{
                    color: #46465b;
                    font: 25px "Raleway", sans-serif;
                    margin: 15px auto 0px auto !important;
                    text-align: center;
                    border-top: 2px rgb(200,200,200) dotted;
                    border-bottom:2px rgb(200,200,200) dotted;
                    width: 25%;
                }

                h3{
                    font: .8rem "Raleway", sans-serif;
                    margin-right: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    color:  #47476b;
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                }

                h4{ 
                    font-family: "Raleway", sans-serif;
                    margin-right: 30px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    color:  #47476b;
                    text-align: center;
                }

                h5{
                    font: 18px gillsans, sans-serif;
                    margin-right: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    color:  #46465b;
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                }

                h6{
                    font-family: "Raleway", sans-serif; 
                    font-size: 1.0rem;
                    margin: 15px auto 0px auto;
                    text-align: center;
                    border-top: 3px rgb(200,200,200) dotted;
                    border-bottom:3px rgb(200,200,200) dotted;
                    color:  #666699;
                    width: 25%;
                }

                .floating_box5 {
                    margin: 20px 15px 30px 20px;
                }

                .floating_box3 {
                    float: left;/*deleted in-line block*/
                    width: 30%;
                    height: 30%;
                    margin-top: 20px;
                    margin-left:55px;
                    margin-right: 40px;
                    margin-bottom: 20px; 
                    padding: 5px;
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                }

                .container_thumbnails{
                    width: 90%;
                    margin: 0px auto;
                }

                .thumbnails{
                    border: 2px solid #dbaf0a;
                    border-radius: 10px;
                    padding-bottom: 20px;
                }

    /* BIO_CONTACT & RESUME */

                 .floating_box4 {
                    margin: 0px auto;
                    padding: 20px;
                    width: 95%;
                    font: 18px gillsans, sans-serif;
                    font-style: normal;
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                    background-color: rgba(184,184,208,.3);
                    border-radius: 20px;
                }

                .floating_box6 {
                    width: 48%;
                    margin: 60px auto 20px auto;
                    padding: 20px;
                    background-color: rgba(255,255,255,1);
                    border: 2px solid #dbaf0a;
                    border-radius: 20px;
                }

                .floating_photo {
                    display: inline-block;
                    margin: 0px auto;
                    display: inline-block;
                    float: left;
                    width: 15%;
                    padding: 25px 45px 5px 5px;
                } 
      
                .clear_float {
                  clear: right;
                }

                .clear_both{
                    clear:both;
                }

                #footer {
                    font: 16px "Roboto Condensed", sans-serif;
                    background-color: rgba(184,184,208,.5);
                    color: #9494b8;
                    border: 1px solid #dbae0a;
                    border-radius: 8px;
                    width: 12%;
                    margin:10px auto;
                    padding: 5px;
                    text-align: center;
                    text-decoration:none;
                  }

                #footer:hover{
                    background: #9494b8;
                    color: #cfbaad;
                }

                #footer a {
                    text-decoration: none;
                }
      
               #copyright_bio {
                    font: 14px gillsans, sans-serif;
                    color:#bfbfbf;
                    padding-top: 10px;
                    text-align:center;
                    margin-bottom: 10px;
                }

                p.ex5{
                    color:#E6E6FA;
                    text-align:center;
                    padding:10px;
                    margin: 0px;/*made bottom also 0 so no margin at bottom of footer*/
                }

              .center_resume{
                    display: block;
                    text-align: center;
                    margin: 20px auto;
                  }
   

                #footer_page {
                    font: 10px gillsans, sans-serif;
                    color:#bfbfbf;
                    width: 64%;
                    margin: auto;
                    text-decoration: none;
              }

/*LCS RESUME*/
                div.container{
                    width: 70%;
                    padding:10px;
                    margin: 70px auto 20px auto;
                    padding: 20px;
                    background-color: rgba(255,255,255,1);
                    border: 2px solid #dbaf0a;
                    border-radius: 20px;
                }

                div.hundred{
                    width: 100%;
                    padding: 10px;
                    font: 16px 'Gills Sans', sans-serif;
                }

                div.fifty{
                    float: left;
                    width: 56%;
                    font-family: 'Gill Sans', sans-serif;
                    color: rgba(102,102,153,.8);
                    font-size: 24px;
                    font-weight: 700;
                    text-align:right;
                    padding: 40px 0px 0px 20px;

                }
                div.fortyfive{
                    float: left;
                    width: 37%;
                    padding: 10px;
                }

                 div.twenty{
                    float: left;
                    width: 16%;
                    padding: 50px 10px 0px 0px;
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;
                    text-align:right;
                }
                div.seventy{
                    float: left;
                    width: 79%;
                    padding: 10px;
                    font: 16px 'Gills Sans', sans-serif; 
                }

                div.thirty{
                    float: left;
                    width: 28%;
                    padding: 125px 15px 0px 0px;
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;
                    text-align:right;
                }
                div.sixty{
                    float: left;
                    width: 67%;
                    padding: 5px;
                    font: 16px 'Gills Sans', sans-serif;   
                }

                 div.swirl{
                    position: relative;
                    float: right;
                    margin-top:5px;
                    margin-right: 178px;
                    height: 10px;
                }

                #lilac{
                    background-color:rgba(184,184,208,.3);
                    width: 90%;
                    border-radius: 10px;
                    padding: 30px;
                }

                .rgb{
                    position:relative;
                    right: -47px;
                    top: -45px;
                    z-index: 1;
                    height: 135px;
            }

                h7{
                    font: 18px gillsans, sans-serif;
                    margin-right: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    color:  #666699;
                }

/* ALL PAGES style end */ 



/* NAV BAR */
                .nav{ 
                    padding-top:20px;
                    text-align:center;
                    /* overflow: hidden; */
                    /* list-style-type: none;needed? */
                }

                .nav a{
                    font-family: 'Roboto Condensed', sans-serif;
                    text-decoration:none; 
                    font-size: 1.0rem;
                    padding:0px 30px; /* variable width */
                    color: #cfbaad;
                    position: relative;
                }
            
                /* Hide link open/close nav_page on mobile */
                .nav .icon {
                    display: none;
                }
               
                .nav li{
                    display:inline;/* centers it vs. float: left */
                }
                  
                /* unvisited link */
                a.nav:link {
                    color: rgb(219,175,10);
                    text-decoration: none;
                }


                /* mouse over link */
                    .nav a:hover {
                    /*a.nav:hover*/ 
                    color: #9494b8;
                }

                /* selected link */
                    .nav a:active{ 
                    /*a.nav:active*/ 
                    color:rgb(219,175,10);
                }

                
    

/* TABLETS */
@media screen and (min-width: 601px) and (max-width: 1130px) { /*did tablet size so fits resume nicely*/
    
*{
box-sizing: border-box;
}

                div.container{
                    width: 80%;
                    padding:10px;
                    background-color: rgba(255,255,255,1);
                    border: 2px solid #dbaf0a;
                    border-radius: 20px;
                }
    
                .floating_box4 {
                    width: 100%;
                    font: 16px gillsans, sans-serif;
                    font-style: normal;
                    text-align: justify;
                    text-justify: inter-word;
                }
    
                .floating_photo{
                    width: 100%;
                    padding: 20px;
                    margin: 0px auto;
                }
    
                .center_resume{
                    width: 20%;
                  }
   
                 #lilac{
                    background-color:rgba(184,184,208,.3);
                    width: 100%;
                    border-radius: 10px;
                    padding: 30px;
                }
                
                 div.twenty{
                    float: left;
                    width: 16%;
                    padding: 50px 10px 0px 0px;
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;
                    text-align:right;
                }

                 #header {              
                    text-align: center; /*keep cuz W3 doesn't center it Oz*/
                    padding-left: 15px;
                    width:150%;
                    right: 25%;
                    top:0%;
                    position: relative;
                  }
                  
                .content_center{
                    font: 18px gillsans, sans-serif;
                    width: 99%;
                    padding: 15px;
                    text-align:center;
                    margin: 0px auto 0px auto;
                }
    
                /* hides all links when screen less than desktop size except for first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
              .nav a:not(:first-child) {
                  display: none;
                }*/  
             /*   .navthumbnail a,
                .nav a  {
                  display: none;
                }*/
              /*  .navthumbnail a.icon,          
                .nav a.icon {
                  float: right;
                  display: block;
                }   
              /* "responsive" class added to topnav w/JavaScript when user clicks on the icon on mobile (display links vertically instead of horizontally) */
      /*          .navthumbnail.responsive,          
                .nav.responsive {
                  position: relative;
                }
                .navthumbnail.responsive a.icon,
                .nav.responsive a.icon  {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                .navthumbnail.responsive a,
                .nav.responsive a  {
                    float: none;
                    display: block;
                    text-align: left;
                }                               
                .navthumbnail,
                .nav {
                    background-color: #f1f1f2;
                    border: 3px solid rgb(242,221,200);
                    width: 100%;
                    margin-top: 10px;
                    padding: 20px 10px 25px 10px;
                    line-height: 1.8rem;
                }                                   */
                .navthumbnail a, 
                .nav a{
                      padding:0px 10px; /* variable width */
                    
                }
         
}
    
/* MOBILE*/
@media screen and (max-width: 600px){

                *{
                   box-sizing: border-box;
                }
                
                /*so LCS logo is big*/
                #header{ 
                    text-align: center;
                    width:250%;
                    right: 75%;
                    top:0%;
                    position: relative;
                }
    
                h2{/*made wider so gray dotted spans type width*/
                    width: 50%;
                }
                
                /* resume mobile*/
                div.twenty{ /*"now"*/
                    width: 100%;
                    padding: 50px 10px 0px 0px;
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;
                }
    
                div.thirty{ /*"then"*/
                    width: 100%;
                    padding: 125px 15px 0px 0px;
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;
                }
    
                div.container{
                    width: 100%;
                    padding:10px;
                    background-color: rgba(255,255,255,1);
                    border: 2px solid #dbaf0a;
                    border-radius: 20px;
                }
    
                div.fifty{ /*linda s s*/
                    width: 56%;
                    font-family: 'Gill Sans', sans-serif;
                    color: rgba(102,102,153,.8);
                    font-size: 24px;
                    font-weight: 700;
                    padding: 40px 0px 0px 20px;
                }
    
                div.fortyfive{ /*rgb image*/
                    width: 37%;
                    padding: 10px;
                }
          
                div.seventy{
                    width: 100%;
                    padding: 10px;
                    font: 16px 'Gills Sans', sans-serif; 
                }

                div.thirty{/*pink type*/
                    width: 100%;
                    padding: 15px 15px 0px 0px;/*SO WEIRD AFFECTS SPACING BETWEEN  TOP PARAGRAPHS!! WHY????*/
                    font: 40px 'Gills Sans', sans-serif;
                    font-weight: 900;
                    color: #fcbb21;           
                }
    
                div.sixty{
                    width: 100%;
                    padding: 5px;
                    font: 16px 'Gills Sans', sans-serif;   
                }
                
                 #lilac{
                    background-color:rgba(184,184,208,.3);
                    width: 100%;
                    border-radius: 10px;
                    padding: 30px;
                }
   
 
 /* hides all links when screen less than desktop size except for first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
              .nav a:not(:first-child) {
                  display: none;
                }*/  

                
                .nav a  {
                  display: none;
                }
                         
                .nav a.icon {
                  float: right;
                  display: block;
                }
              /* "responsive" class added to topnav w/JavaScript when user clicks on the icon on mobile (display links vertically instead of horizontally) */
                        
                .nav.responsive {
                  position: relative;
                    height: 250px;
                    padding: 10px;
                }
               
                .nav.responsive a.icon  {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
             
                .nav.responsive a  {
                    float: none;
                    display: block;
                    text-align: left;
                }
             
                .nav {
                    background-color: #f1f1f2;
                    border: 3px solid rgb(242,221,200);
                    width: 100%;
                    margin-top: 10px;
                    height: 50px;
                    line-height: 2.0rem;/*spaces out headings vertically*/
                    padding: 0px !important;

                }
              
                .nav a{
                    color: #666699;
                }
           
                .nav li:active a { 
                    color:#f2ddc8;
                }

                #footer {
                    font: 14px gillsans, sans-serif;
                    background-color: rgba(102,102,153,.6);
                    color: #fff;
                    width: 30%;
                    margin:10px auto 0px auto;
                    padding: 5px;
                    text-align: center;
                    text-decoration:none;  
                  }
    
                .floating_box4 {
                    font: 16px gillsans, sans-serif;
                    font-style: normal;
                    text-align: justify; 
                    text-justify: inter-word;
                }
    
                .floating_photo{
                    width: 100%;
                    padding: 20px;
                }
    
                .floating_box5 {
                    float: none;
                    width: 90%;
                    height: 30%;
                    margin-top: 20px;
                    margin-left:20px;
                    margin-right: 0px;
                    margin-bottom: 20px; 
                    padding: 5px;
                    text-align: justify; /*justifies type*/
                    text-justify: inter-word;
                }
    
                #footer_page {
                    font: 10px gillsans, sans-serif;
                    color:rgb(102,102,153);    
                }
    
                .floating_box3 {
                    /*deleted float:left,margin,etc.*/
                    width: 85%;
                    color: #E6E6FA;        
                }
    
                .title  {
                    display: none;
                }


    }