@charset "utf-8";
body {
	font-family: 'Open Sans', sans-serif; font-weight: 300; 
    }

h1 {
	font-size: 2.6em;
	color: #000000;
	margin: -5px 10px 25px 0px;
    text-transform: uppercase;
    font-weight: 300;
	}

h2 {
	font-size: 1.4em;
	color: #000000;
	margin-bottom: 10px;
    font-weight: 600;
	}
	
h4 {
	font-size: 1em;
	color: #000000;
	margin-bottom: 10px;
    font-weight: 550;
	border-bottom: 1px solid rgb(200, 200, 200);
	}

p {
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-top: 5px;
    }
	

    
/* class -> . for multiple things */
/* id -> # for single things */
    
.container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 100px;
}

a   { 
    color: #3C64A0;
    text-decoration: none;
    }


a:link { color: #3C64A0; }
a:visited { color: #3C64A0; }

a:hover {
    color: white; 
    background-color: #3C64A0;
}

h1 a:hover {color: #3C64A0}
    
#title {
    float: left;
}   

#title a:hover {background-color: white;}

#navigation a {
    display: block;
    padding: 20px 20px;
    float:right;
    text-transform:uppercase;
    color: #a9a9a9; 
}

#navigation ul { list-style-type: none }
#navigation li { float:right; }

#navigation a:hover {
    color: white; 
    background-color: #a9a9a9;
}

.subcontainer {
    clear: both;
}  



*, *:after, *:before {
  box-sizing: border-box;
}

[class*='col-'] {
  float: left;
}

.col-1   { width: 100%; padding-bottom:10px;}
.col-2-3 { width: 65%; margin-right:10px;}
.col-1-3 { width: 33%; padding-bottom:40px; }
.col-1-2 { width: 50%; padding-bottom:40px; }
.col-1-4 { width: 25%; padding-bottom:40px; }

[class*='col-'] {
  padding-right: 10px;
}

[class*='col-']:last-of-type {
  padding-right: 10px;
}


#footer {
    clear: both;
    text-align: center;
    margin: 50px 0px 0px 0px;
}
    
    
.image { 
   position: relative; 
}

.image img {
   width: 100%;
}