@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap');


body {
    font-family: "Source Sans Pro", sans-serif;
    background-color: #f1f5f7;
    width: 100%;
    min-width: 1020px;
    margin: 0 auto;
    padding-top: 20px;
    color: #024059;
   }

/* Logo, Sitename, Tagline, Headings */

#page-container{
    position: relative; /*added to keep footer at bottom*/
    min-height: 100vh;

}

#content-wrap{
    padding-bottom: 7rem; /*footer height*/
    
}

.center{
    max-width: 1020px;
    margin: auto;
}
.logo{
    /*position: absolute;*/
    text-align: right;
        
}
h1,h2,h3,h4,h5,h6{
	font-family: "Source Sans Pro", sans-serif;
}

h1{
	font-size: 3.5em;
}

h2{
    font-size: 2.5em;
}

h3{
    font-size: 2em;
    font-weight: 300;
}

h4{
    font-size: 1.5em;
    color: #5b98a6;
    margin: 0;
    font-weight: 400;
}

h5{
    font-size: 1em;
}

h6{
    font-size: .75em;
}

#sitename{
    font-size: 3.5em;
    font-weight: 900;
    color: #36768e;
    text-align: left;
    position: absolute;
    top: -32px;
    /*play w/top bottom, right and left*/

}

#tagline{
    font-size: 2.0em;
    font-weight: 800;
    color: #36768e;
    text-align: left;
    position: absolute;
    top: 50px;
    
}

/* Top Navigation Bar */

nav { 
    background-color: #36768e;
    color: #e5ecef;
    line-height: 4em;
    border-top: 3px solid #024059;
    border-bottom: 3px solid #024059;
            
}

nav ul{
    text-align: left;
    padding: 0;
}

nav li{
    display: inline;
    
}
 
nav a:link{
    text-decoration: none;
    text-transform: capitalize;
    padding: 0px 40px 0px 0px;
    font-size: 1.5em;
	color: #e5ecef;
	font-weight: bold;
	letter-spacing: .1em;

}

nav a:visited{
	color: #024059;
    
}

nav a:hover{
	color: #f1f5f7;
	
}

nav a:active{
	color: #c9d1d9;
	
}

/* Main Body Area between nav and footer */

.main{
    padding-top: 50px;
    padding-bottom: 75px;
   
    
}

#main-photo{
    line-height: 0px;/*takes off the 3px white line between pic and bottom border*/
    
}

.figure{
    margin-left: 0;
    position: absolute;
    /*padding: 25px;*/
    border: 3px solid #024059;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    
}

/*.figcaption{
    position: relative;
    top: 571px; /*work on top, bottom, left right*/
    /*left: 9px;
    text-align: left;*/
 /*https://css-tricks.com/text-blocks-over-image/
https://www.designlabthemes.com/text-over-image-with-css/   
}*/ 

.home-quote{
    width: 410px;
    height: 490px;
    padding: 25px;
    font-size: 2.5em;
    font-weight: 100;
    color: #024059;
    text-align: center;
    border: 3px solid #024059;
    position: relative;
    right: -547px;
    top: 17px;
    margin-left: -11px;/*work on top bottom left right*/
    /*max-width: 500px;*/
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    
}

.author{
    font-size: .5em;
    
}

/* These are non-navigational links */

a:link{
	color: #36768e;
	font-weight: 400;
	font-size: 1em;
	text-decoration: none;
	

}
a:visited{
    color: #9bb9bf;
}
a:hover{
    color: #c0d1d9;
	
}
a:active{
	color: #c0d1d9;

}


/* Styling for the "TechTips" page */

.instruction{
    width: 460px;
    height: 450px;
    padding: 25px;
    /*margin: auto;/*was 75px*/
    font-size: 1.25em;
    text-align: left;
    border: 3px solid #024059;
    position: relative;
    right: -512px;
    top: 17px;
    margin-left: -11px;
    margin-bottom: 50px;/*work on top bottom left right*/
    /*max-width: 500px;*/
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    overflow-y: scroll;
}


/* This is the section for the "Contact" page */

/* Code borrowed from https://codepen.io/colorlib/pen/KVoZyv  and https://www.w3schools.com/howto/howto_css_contact_section.asp */

.container {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-top: -20px;
    
}

#field-names{
    margin-top: -5px;
    margin-bottom: 5px;
    
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea,
#contact button[type="submit"] {
    font: 400 14px/18px "Source Sans Pro", sans-serif;
    
}

#contact {
    background: #e5ecef;
    color: #36768e;
    padding: 25px;
    margin: 50px 0;
    border: 3px solid #024059;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    
}

#contact h3 {
    display: block;
    font-size: 30px;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -2px;
    
}

#contact h4 {
    color: #024059;
    margin: 5px 0 15px;
    display: block;
    font-size: 13px;
    font-weight: 400;
    
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
    
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    width: 93%;
    border: 1px solid #024059;
    background: #e5ecef;
    margin: 0 0 5px;
    padding: 10px;
    
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact textarea:hover {
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #024059;
    
}

#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
    
}

#contact button[type="submit"] {
    cursor: pointer;
    width: 7%;
    border: 1px solid #024059;
    background: #024059;
    color: #e5ecef;
    margin: 0 0 5px;
    padding: 10px;
    font-size: 15px;
    text-align: left;
    
}

#contact button[type="submit"]:hover {
    background: #fdfefe;
    color: #024059;
    transition: background-color 0.3s ease-in-out;
    
}

#contact button[type="submit"]:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    
}

.copyright {
    text-align: left;
    padding-left: 10px;
    
}

#contact input:focus,
#contact textarea:focus {
    outline: 0;
    border: 1px solid #024059;
    
} 

/* Styling for "About" Page */

.info-about{
    margin-bottom: -150px;
    margin-top: -20px;
    
}

.about-photo{
    line-height: 0px;/*takes off the 3px white line between pic and bottom border*/
    position: absolute; /*was relative*/
    top: 348px;
    
}

#info-bg-title{
    position: relative;
    left: 210px;
    top: 1px;
    padding-bottom: 5px;
    max-width: 715px;
}


.info-paragraph1{
    position: relative;
    left: 210px;
    width: 370px;
    font-weight: 400;
    font-size: 18px;
    
}

.info-paragraph2{
    position: relative;
    top: -496px;
    left: 635px;
    width: 370px;
    font-weight: 400;
    font-size: 18px;
}

/* Styling for Footer Area */

footer{
    background-color: #36768e;
    color: #e5ecef;
    padding-bottom: 10px;
    border-top: 3px solid #024059;
    
    
}

/* Footer Navigation */

#footer{
    position: absolute; /*added to make footer stay at bottom*/
    bottom: 0;
    width: 100%;
    height: 7rem;        /*added to make footer stay at bottom*/
    
}

footer ul{
    text-align: left;
    padding: 0px;
    /*padding: 15px 0px ;*/
}

footer li{
    display: inline;
            
}

footer a:link{
	color: #e5ecef;
    text-decoration: none;
    padding: 10px 20px 10px 0px;
	text-transform: capitalize;
	font-weight: normal;
	letter-spacing: .1em;
	font-size: 1.25em;

}

footer a:visited{
	color: #024059;

}

footer a:hover{
	color: #f1f5f7;
	
}

footer a:active{
	color: #c0d1d9;
	
}

#copyright{
    text-align: left;
    font-size: 18px;
    font-weight: 100;
    line-height: .1em;
    
}

#cc-license{
    text-align: left;
    font-size: 16px;
    font-weight: 100;
    line-height: .1em;
}