@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);

* body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #555;
    margin: 0;
    padding: 0;
}

#page { max-width: 1200px; margin: 0 auto; position: relative; }

/* Text */

h1 {
    margin: 0 0 1em 0;
    font-size: 2.8em;
    font-weight: 800;
}

h2 {
    margin: 0 0 .5em 0;
    font-size: 1.6em;
    font-weight: 800;
    line-height: 1.1em;
}

h3 {
    margin: 0 0 .5em 0;
    font-size: 1.3em;
    font-weight: 800
}

h4 {
    margin: 0 0 1.5em 0;
    font-size: 1em;
    font-weight: 800;
}

p {
    margin: 0 0 1em 0;
}

a {
    color: #007eef;
}

a:visited {
    color: #65b1ff;
}

a.btn { font-size: 1em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .5s; } 

a.btn:hover { background-color: rgba(0, 0, 0, .3); } 

/*Header*/

header {height: 330px; background: #2cbdb5 url(images/TFsample.jpg) center bottom; position: relative; }

header div.hero { position: absolute; width: 56%; top: 150%; left: 35%;  }
header div.hero h1 { line-height: 1em; width:55%; margin:-380px 30px 50px 250px; color: #fff;} 


/* Section - All  */

section { padding: 0 30px; }
section::after { content:""; display: block; clear: both; }

/* Section - Details (Personal Brand Statement) */

section.details {background-color: #2cbdb5; padding-top: 30px; padding-bottom: 30px; color: #fff; }

/* Section - Main (statements) */


section.main { margin-top: 0px; margin-bottom: 10px; padding: 0; }

section.main aside {width: 50%; float: left; text-align: center; }

section.main .content { margin: 35px; background: no-repeat center top; background-size: 75px 75px; padding-top: 90px; }

section.main aside h3 { color: #000; text-decoration: none; }

section.main aside .content {background-image: url(images/Laptop-Charging--Streamline-Core-Gradient.svg); }


/*Section - Narrative */

section.narrative {background-color: #2cbdb5; padding-top: 30px; padding-bottom: 30px; color: #fff; }

/* Section - RBAC Photo */

section.photo { background: no-repeat center top; background-size: 75px 75px; padding-top: 90px; margin-left: 30px; }

/* Section - Executive Bio */

section.bio { background-color: #2cbdb5; margin-top: 0px; padding-top: 10px; padding-bottom: 30px; color: #fff; }

/*Section - Community */

section.community { background-color: #d2e6e5; padding-top: 30px; padding-bottom: 30px; color: #000}


/* Navigation */

nav {
    background-color: rgba(0, 0, 0, 0.65); 
    position: absolute;
    top: 285px; left: 0px; 
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

nav::after { content:''; display: block; clear: both; }

nav ul { list-style: none; margin: 0; padding: 0px; }

nav ul li:hover { background-color: #2b0306}
nav ul li:hover > ul { display: block; }

nav ul li a {
    display: inline-block; 
    color: #fff;
    padding: 10px 20px; 
    text-decoration: none;
    width: 125px; 
    position: relative; 
}

nav ul li a:visited { color: #fff; }

nav ul li a:hover { background-color: #cc6633; }

nav ul ul { position: absolute; top: 100%; background-color: #2b0306; display: none; }

nav ul ul li { position: relative; }

nav ul ul ul ul { left: 100%; top: 0px; } 


/*top-level*/

nav > ul { padding-left: 200px; }

nav > ul > li { float: left; }

nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px }



/* Footer */

footer { font-size: .8em; margin: 40px; color: #fff; }

footer .content {display: inline; }

footer a { margin-left: 30px; color: #fff; }
footer a:visited { color:#fff; }
footer a:hover { color: #000; }

/* Media Queries */

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

    h1 { font-size: 2.4em; }

header {height: 330px; background: #2cbdb5 url(images/TFsample.jpg) center bottom; position: relative; }

header div.hero { position: absolute; width: 56%; top: 150%; left: 35%;  }
header div.hero h1 { line-height: 1em; width:55%; margin:-380px 30px 50px 250px; color: #fff;} 

}

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

    h1 { font-size: 2.2em; }

    /*Header*/ 

    header { height: 330px; background-image: url(images/TFsample.jpg); }
    header div.hero { position: absolute; width: 56%; top: 150%; left: 35%;  }
    header div.hero h1 { line-height: 1em; width:55%; margin:-380px 30px 50px 250px; color: #fff;} 
    header img { height: 300px; }

    /*Section - Atmosphere or details */

    section.details content { padding-left: 325px; background-size: 300px auto; }


    /*Section - How-to or Certs */

    section.certs aside div.content.certs { margin-top: 20px; margin-bottom: 10px; float: right; padding-left: 325px; background-size: 300px auto; }
    section.certs aside div.content.certs img { height: 100px; padding-left: 325px; background-size: 300px auto; }
    section.certs aside h5 { margin-top: 20px; margin-bottom: 30px; float: right; padding-left: 325px; background-size: 300px auto; }

    section.certs blockquote h5.disclaimer { font-size: 1.1em; line-height: 1.2em; }
    section.certs blockquote h5.disclaimer { font-size: .85em; }

}

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

    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.1em; }

     /*Header*/ 

      header div.hero { position: absolute; width: 56%; top: 150%; left: 25%;  }
    
    /*Section - Main (professional summary and core strengths)*/

    section.main { margin-top: 10px; margin-bottom: 10px; }
    section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }

     section.main aside { width: 100%; float: none; text-align: left; }
     section.main aside div.content {
         margin: 8px 20px 8px 0;
         padding: 5px 0px 10px 85px;
         background-size: 50px 50px; 
         background-position: 20px 5px; }

    /*Section - Nav*/

    nav {
    background-color: rgba(0, 0, 0, 0.65); 
    position: absolute;
    top: 285px; left: 0px; 
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

    nav ul li a {
    display: inline-block; 
    color: #fff;
    padding: 0px 0px; 
    text-decoration: none;
    width: 150px; 
    position: relative; 
}

}

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

    h1 { font-size: 1em; }
    h3 { margin-bottom: 0px; }
    a.btn { font-size: .9em; }
    /*Header*/

    header { height: 200px; background-image: url(images/TFsample.jpg); background-position: left top; }


    header div.hero { width: 400px; top: 20px; left: 100px; }
    header div.hero h1 { font-size: 1.8em; margin:30px 30px 50px 250px;}
    header img { height: 200px; }

    /*Section - Main*/ 

    section.main aside { width: 100%; float: none; text-align: left; }
    section.main aside div.content {
        margin: 8px 20px 8px 0;
        padding: 5px 0px 10px 85px;
        background-size: 50px 50px; 
        background-position: 20px 5px; 
    }


    /*Navigation */ 

    nav {
    background-color: rgba(0, 0, 0, 0.65); 
    position: absolute;
    top: 160px; left: 0px; 
    padding: 0;
    width: 100%;
    box-sizing: content-box;
}

    nav ul li a {
    display: inline-block; 
    color: #fff;
    padding: 0px 0px; 
    text-decoration: none;
    width: 100px; 
    position: relative; 
}
}


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

  /*Header*/
  header { height: 150px; background-image: url(images/TFsample.jpg); }

  header div.hero { width: 100%; left: 10px; top: 20px; text-align: center; }
  header div.hero h1 { font-size: 1.2em; margin-bottom: 10px; margin-left: 150px;}
    header img { height: 150px; }

  /*Section - Nav*/
  
   /*Footer */

   footer::after {content:''; display: block; clear: both; }

   footer div.content a {
        margin: 0 0 10px 0;
        float: right; 
        clear: both; 

   }

}