/* CSS Document */
/* Leon Quinn - Team 23 */

body {
    width:100%;
    height:auto;
    background:#fff;
    color:#dd1021;
    font-family: "acumin-pro","Arial",sans-serif;
    font-size:1em;
    
}
a:link, a:active, a:visited {
	color: #dd1021;
	text-decoration:none;
    font-weight:bold;
}
a:hover {
    color:#ffc300;
}
#main_content {
    width: 67%;
    min-width: 320px;
    margin-left:auto;
    margin-right:auto;
}
header {
    width:100%;
    height:auto;
}
#logo {
    margin:-5px 0 0 0;
    width:180px;
    float:left;
}
nav {
    margin:-8px 0 0 178px;
}
nav li+li { 
    border-left: 1px solid #dd1021;
}
/* Responsive Menu Script from http://www.w3schools.com/howto/howto_js_topnav.asp */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin:0;
    padding: 0;
    overflow: hidden;
    background-color: #ffc300;
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #dd1021;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
    background-color: #dd1021;
    color: #ffc300;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}
/* End Responsive Nav */

/* Leon's Original Nav */
/* nav {
    background:#ffc300;
    margin:-20px 0 0 178px;
    height:auto;
}
nav ul li {
	display:inline-block;
	padding:20px;
}
nav li+li { 
    border-left: 1px solid #dd1021;
}
nav li a {
	text-decoration:none;
	color:#dd1021;
    font-weight:bold;
    font-size:1em;
}
nav li a:hover {
    padding:20px;
    margin-left:-24px;
    margin-right:-24px;
    background:#dd1021;
    color:#ffc300;
} */

section {
    width:100%;
    height:auto;
    padding:0;
    margin:0;
}
aside {
    width:20%;
    height:auto;
    min-width: 200px;
    float:left;
    margin:140px 25px 0 -180px;
    padding:0;
}
aside h2 {
    font-size:0.9em;
}
article {
    width:auto;
    height:auto;
    padding:0;
    text-align:justify;
    overflow: hidden;
}
article h1 {
    font-size:3em;
    margin:40px 0 40px 0;
}
article p {
    color:#333;
    font-family:"Arial",sans-serif;
    line-height:1.35em;
}
#slider {
    width:100%;
    height:auto;
    margin-bottom:10px;
    text-align: center;
}
#slider h1 {
	vertical-align:bottom;
	text-align:right;
    margin-top:-30px;
}

/*  4 Call to Actions Section evenly spaced  */
/* Provided by http://www.responsivegridsystem.com/calculator/ */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
/*  4 Column Setup  */
.col {
    display: block;
	float:left;
	margin: 1% 0 1% 1.5%;
    /* border:1px solid #dd1021; */
}
.col:first-child { 
    margin-left: 0; 
}
/*  Column Grouping  */
.group:before, .group:after { 
    content:""; display:table; 
}
.group:after { 
    clear:both;
}
.group { 
    zoom:1; /* For IE 6/7 */ 
}
/*  Grid of 4  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.62%;
}
.span_2_of_4 {
	width: 49.25%;
}
.span_1_of_4 {
	width: 23.87%;
}
/* End 4 Column Code */

.section h2 {
    text-align:center;
    background:#dd1021;
    color:#fff;
    font-weight:200;
    font-size:1.2em;
	padding:0;
	margin:0;
}
.section a:hover {
    background:#ffc300;;
}
#map {
    width:100%;
    margin-bottom:10px;
    margin-top:10px;
}
#map h3 {
    text-align:center;
}
hr {
   border:1px solid #dd1021; 
}
#social {
    float:left;
    font-size:1.4em;
    margin-left:-40px;
    margin-top:-20px;
}
#social li {
    display:inline-block;
}
#social li a {
    text-decoration:none;
	color:#dd1021;
    font-weight:normal;
}
#social li a:hover {
    text-decoration:none;
	color:#ffc300;
    font-weight:normal;
}
#social li a:active a:visited {
    text-decoration:none;
	color:#dd1021;
    font-weight:normal;
}
#credits {
    float:right;
    font-size:0.8em;
}

/*  Show Call to Action Sections full width under 835px */
/* Provided by http://www.responsivegridsystem.com/calculator/ */
@media only screen and (max-width: 835px) {
.col {  
    margin: 1% 0 1% 0%; 
}
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { 
    width: 100%; 
}
}

/* Responsive Menu Script from http://www.w3schools.com/howto/howto_js_topnav.asp */
/* When the screen is less than 835 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:835px) {
ul.topnav li:not(:first-child) {
    display: none;
    }
ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:835px) {
ul.topnav.responsive {
    position: relative;
    }
ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
ul.topnav.responsive li {
    float: none;
    display: inline;
  }
ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}