/*CSS rules to specify families
font-family: 'Italiana', serif;
font-family: 'Roboto', sans-serif;
*/


html {margin: 0; padding: 0;}
body {margin: 0; padding: 0;}

/* TOP OF EVERY PAGE */

header{
  border:none; 
  background-color: #EEEEEE; 
  text-align:left; 
  position:fixed; 
  width: 100%; 
  top:0; 
  margin-top:0 auto;
  margin-left:0 auto;
overflow:hidden;
  height:125px;
}
            
.logo {
float: left; 
float: top; 
padding: 18px 0;
margin-right: 50px;
margin-left: 10px;
}


.main-nav{
  text-align: right;
  background-color: #EEEEEE;
  margin-left: 400px;
  margin-right:180px;
}

.main-nav ul {
margin:0 auto;
}

.main-nav li {
display: inline-block;
padding: .5em;
}

.main-nav a:link {
color: #666666;
}

.main-nav a:visited {
color: #666666;
}

.main-nav a {
text-decoration: none;
display: inline-block;
margin-top: 45px;
padding: 1.7em;
font-family: 'Italiana', serif;
font-size: 1.5em;
letter-spacing: .09em;}

.main-nav a:hover {
text-decoration: underline;
color: #CC6600;
}

/* LINKS IN CONTENT OF EVERY PAGE */
                     
.content {
  border: none; 
  background-color: white; 
  text-align: left;
  width: 80%; 
  margin-top: 100px; 
  padding-left: 10px;
  padding-right: 10px;
  margin: auto;
}   

.content a:hover {
text-decoration: underline;
color: #CC6600;
}

.content a:link {
color: #666666;
}

.content a:visited {
color: #666666;
}

.content a:hover {
text-decoration: underline;
color: #CC6600;
}

/* HEADER2 */


.header2 {
  border: none; 
  background-color: white; 
  text-align: left;
  width: 100%; 
  margin-top: 175px; 
  padding-left: 50px;
  padding-right: 50px;
}   

/* HEADER3 */

.header3 {
  border: none; 
  background-color: white; 
  text-align: center;
  width: 100%; 
  margin-top: 175px; 
  padding-left: 50px;
  padding-right: 50px;
}  

.header3 h3 {
color: #2E3192;
font-family: 'Italiana', serif;
font-size: 2em;
width: 80ch;
line-height:1.5em;
letter-spacing: .02em;
font-weight: lighter;
text-align: center;
}



/* FOOTER - BOTTOM OF EVERY PAGE */

footer {
position: bottom;
left: 0; 
bottom: 15px;
margin-bottom:0;
width: 100%; 
background-color: white; 
color: #66666;
font-weight: lighter;
text-align:center; 
} 

footer p{
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: .8em;
letter-spacing: .03em;
font-weight: lighter;
}


/* CAPTIONS UNDER PHOTOS*/

aside2 p4{
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: .8em;
line-height: 1.2em;
letter-spacing: .05em;
font-weight: lighter;
text-align: left;
margin-bottom: 25px;
margin-left: 45px;
}

aside2 p3{
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: .8em;
line-height: 1.2em;
letter-spacing: .05em;
font-weight: lighter;
text-align: left;
margin-left: 45px;
margin-bottom: 25px;
}
  
  
/* ON INDEX.HTML */

/* header2 FONTS */

.header2 p {
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: 1.3em;
max-width: 55ch;
margin-right: 10%;
margin-top: .9em; 
margin-left: 15px;
line-height: 1.3em;
letter-spacing: .03em;
font-weight: lighter;
}

.header2 h2 {
color: #2E3192;
font-family: 'Italiana', serif;
font-size: 2.2em;
width: 250ch;
line-height:1.5em;
letter-spacing: .02em;
margin-bottom: 0px;
font-weight: lighter;
}

.header2 h3 {
color: #2E3192;
font-family: 'Italiana', serif;
font-size: 1.75em;
width: 80ch;
line-height:1.5em;
letter-spacing: .02em;
font-weight: lighter;
}




/* content fonts */

/*ABOUT CONTENT*/

.content p {
color: #222222;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
max-width: 55ch;
margin-right: 10%;
margin-top: 25px; 
margin-left: 15px;
line-height: 1.3em;
letter-spacing: .03em;
font-weight: lighter;
}

.content p2 {
color: #222222;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
max-width: 55ch;
margin-right: 10%;
margin-top: .9em; 
margin-left: 0px;
line-height: 1.3em;
letter-spacing: .03em;
font-weight: lighter;
}

.content h1 {
color: #2E3192;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
width: 75ch;
font-size:2em;
text-align: left;
}

.content h3 {
color: #2E3192;
font-family: 'Italiana', serif;
font-size: 1.5em;
width: 50ch;
line-height:1.3em;
letter-spacing: .02em;
font-weight: lighter;
margin-bottom: .8em;
margin-left: 15px;
}

.content h4 {
color: #2E3192;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
width: 40ch;
font-size:1.2em;
text-indent: 15px;
text-decoration: none;
}

.content h5 {
color: #666666;
text-decoration: none; 
font-family: 'Roboto', sans-serif;
font-weight: lighter;
width: 40ch;
font-size:1.4em;
text-align: left;
margin-top: 1em;
margin-bottom: .3em;
}

.content h6 {
color: #666666;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
width: 40ch;
font-size:1.3em;
}

        
/* Lists in content area */

.content li {
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
width: 55ch;
line-height:1.4em;
margin-top: 0em; 
margin-left: 25px;
font-weight: lighter;
letter-spacing: .06em;
text-align: left;
}



/*LINKS in Content*/



.content a:hover {
text-decoration: underline;
color: #CC6600;
}

/* ASIDES */
     
aside{
  width: 40%;
  margin-left: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  display: block;
}


aside2{
  width: 40%;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: right;
  display: block;
}


/* HORIZONTAL LINE */

.hr {
border: none; 
border-top: 2px solid;
color: #DDDDDD;
margin-bottom: 10px;
}

/*VERTICAL LINE */
.vl {
border: none; 
border-left: 2px solid;
color: #DDDDDD;
height: 300px;
margin-bottom: 10px;
}

/* ROW OF TWO PHOTOS*/

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.column2 {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, 
make the three columns stack on top of each other instead of 
next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/*HOVER OVER IMAGE*/

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}