@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: #cc6633 url(images/ethernetoriginal.jpg) no-repeat center bottom; position: relative; }

/* header a.logo { 
    z-index: 1;
    position: absolute; 
    display: block; width: 160px; height: 66px;
    background: url(../images/logo.svg) no-repeat 0 0; background-size: contain; 
    top: 15px; left: 20px; }

    #2f6eec 

header a.logo span {display: none}*/

header div.hero { position: absolute; width: 56%; top: 70px; left: 35%; }
header div.hero h1 { line-height: 1em; width:52%; margin: 0 0 30px 0; color: #fff; border: 1px solid #fff; background-color:#cc6633; } 
header div.hero h3 { line-height: 1em; margin: 0 76px 30px 0px; color: #fff; }

header a.btn { background-color:#65b1ff; } 

/* Section - All  */

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


/* Section - Main (professional summary and core strengths */


section.main { margin-top: 10px; margin-bottom: 30px; 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: 70px; }

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

section.main aside .content.summary {background-image: url(images/icon_star.svg); }
section.main aside .content.skills {background-image: url(images/icon_star.svg); }

/* Section - Details (Career Highlights) */

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

/*Section - Certs */

section.certs { margin-top: 20px; margin-bottom: 10px; margin-left: 30px; padding: 20; }

section.certs aside {width: 16%; float: left; text-align: center; }

section.certs .content { margin: 15px; background: no-repeat center top; background-size: 50px 50px; padding-top: 10px; }

section.content aside { margin-top: 15px; margin-bottom: 20px; padding: 0; }

/* Navigation 

nav {
    background-color: rgba(0, 0, 0, .65); 
    position: absolute;
    top: 0px; left: 0px; 
    padding: 10px 0 0 0;
    width: 65%; 

}

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: #999; }

footer .content {display: inline; }

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

/* Media Queries */

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

    h1 { font-size: 2.4em; }

    /* Header */
    header div.hero { left: 35%; top: 70px; }
    header div.hero h1 { width: 85%; }

 
    header div.hero h1 { line-height: 1em; width: 54%; margin: 0 0 30px 0px; color: #fff; border: 1px solid #fff; } 
    header div.hero h3 {line-height: 1em; margin: 0 50px 30px 0; color: #fff; }

    /* Section-Atmosphere or details */
    section.details content {padding-left: 400px; background-size: 375px 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; }
}

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

    h1 { font-size: 2.2em; }

    /*Header*/ 

    header { height: 300px; background-image: url(images/ethernetoriginal_825.jpg); }
    header div.hero { top: 50px; left: 35%; }
    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; }
    a.btn { font-size: 1em; }

     /*Header*/ 

    header div.hero { top: 55px; left: 35% }
    
    /*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 - 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: 80px; 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; }

}

@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/ethernetoriginal_625.jpg); background-position: left top; }

    /*Header logo 
    header a.logo {
        width: 100%; height: 66px; 
        left: 0px; top: 0px; 
        background-color: rgba(0, 0, 0, .65); 
        background-size: 112px 46px; 
        background-position: 20px center; 
    }
        */

    header div.hero { width: 400px; top: 20px; left: 100px; }
    header div.hero h1 { font-size: 2em; margin-bottom: 10px; }
    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 {position: static; width: auto; padding: 20px 15px; background-color: #4b0a0c; } */

    /*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: 50px; padding: 0 10px 0 325px; background-size: 300px auto; }
    section.certs aside h5 { font-size: .6em; margin-top: 20px; margin-bottom: 30px; float: right; padding-left: 325px; background-size: 300px auto; }

}


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

  /*Header*/
  header { height: 150px; background-image: url(images/ethernetoriginal_425.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: 65px;}
  header div.hero h3 { font-size: .9em; margin-bottom: 10px; }
  header div.hero a.btn { padding: 2px 10px; font-size: .8em; margin-right: 75px; }

  /*Section - How-to or Certs */
  section.certs aside { width: 18%; float: left; margin: 10px; position: relative; padding: 0 10px 0 5px; }
  section.certs aside div.content.certs { width: auto; height: 80px; }
  section.certs aside h5 { font-size: .6em; text-align: center; width: 25%; }
  section.certs::after { padding: 0 50px 20px 10px; }


  /*Section - Additional*/
   section.additional div.content h2 { padding: 50px 10px 0 0}

   /*Footer */

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

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

   }

}