/*************************************************
GENERAL
*************************************************/

/* custom google font for text within body element*/
body {
font-family: Helvitica, Arial, sans-serif; /*'Cuprum', sans-serif;*/
font-size: 1em;
line-height: 1.3;
}

/* wrapper div margin, color and width settings*/
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}

/* remove underline under anchor links*/
a {
text-decoration:none;
}

/* set image widths to 100% of their parent container */
img {
max-width: 100%;
}

* {
box-sizing: border-box;
}



/*************************************************
HEADING
*************************************************/

header {
float: left;
margin: 0 auto;
padding: 0;
width: 100%;
}

/* styling to center logo text*/
#logo {
text-align: center;
margin: 0;

}

/* h1 headline styling */
h1 {
margin: 15px 0;
font-size: 1rem;
color: #fff;
}

h1:hover {
color: rgba(255,255,255,.5);
}

/* h2 headline styling */
h2 {
font-size: 0.25rem;
margin: -5px 0 0;
font-weight: normal;
}





/*************************************************
NAVIGATION
*************************************************/

/* navigation element text, padding, and margin styling */
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
}

nav a {
font-weight: 800;
font-size: 0.7em;
padding: 15px 6px;
}


/*************************************************
CONTENT
*************************************************/

#scores ul {
display:inline-block;
background-color: #ccc;
}

#scores {
width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
display:inline-block;
}

#scores li {
float: left;
width: 16.6667%;
margin: 0 auto;
background-color: #ccc;
color: #000;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, .6);
min-width: 45px;
}

#scores li table {
font-size: 0.6em;
}

#group:after {
content: "";
display: table;
clear: both;
}



/*************************************************
FOOTER
*************************************************/

/* footer styling */
footer {
font-size: 0.75 em;
text-align: center;
line-height: 1.6;
clear: both;
width: 100%;
padding: 1% 0 1% 0;
background-color: #999999;
border-color: rgba(255,255,255,.5);
color: rgba(255,255,255,.5);
}

footer ul {
list-style-type: none;
margin: 0;
color: #fff;
padding: 5px;
text-align: center;
}

footer li {
display: block;
padding: 0px 6px;
font-size: 0.7em;
}

.social-icon {
width: 50px;
height: 50px;
margin: 2px;
padding: 0 8px;

}

.footer-content {
width: 100%;
margin: 0 auto;
padding: 0 5%;
}

.footer-content h2 {
font-weight: bold;
color: black;
margin-bottom: 0;
}

.footer-left, .footer-right {
width: 15%;
margin: 1%;
padding:0;
}

.footer-middle {
width: 55%;
margin: 5% 0 1% 0;
padding:0;
}

.footer-left ul, .footer-right ul {
font-weight: 800;
text-align: left;
font-size: 0.8em;
}


.footer-middle ul {
text-align: center;
}

.footer-middle p {
margin: 0 0 2px 0;
font-size: 0.65em;
text-align: center;
}

.footer-left, .footer-right {
float: left;
}

.footer-middle {
float: right;
}

.footer-middle ul li {
display: inline-block;
}

.group:after {
content: "";
display: table;
clear: both;
}

/*************************************************
PAGE PORTFOLIO
*************************************************/

#gallery {
margin: 0 auto;
padding: 0;
list-style: none;
}

#gallery li {
float: left;
width: 90%;
margin: 5%;
background-color: #ededed;
color: #000;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .4);
}

#gallery li a p {
font-weight: 800;
margin: 0 20%;
padding: 5%;
font-size: 0.85em;
font-family: arial;
color: #333;
text-align: center;
}

#gallery li a p:hover {
text-shadow: 8px 4px 3px rgba(0,0,0,.4);
}

.gallery-icon {
width: 135px;
height: 135px;
margin: 2% 25%;
width: 50%;
height: 50%;
}


/*************************************************
COLORS
*************************************************/

/*site body*/
body {
background: linear-gradient(#fff, transparent 90%), 
            linear-gradient(0deg, #fff, transparent),
            #fff url(images/backgroundKDRucker.png) no-repeat center;

background: cover;

color: #000;
}

/* gray background*/
header {
background: #333333;
}


/* gray headline text*/
h2 {
color: #fff;
}

/* navigation background on mobile devices*/
nav {
background: #ededed;
}

/* blue anchor links*/
a {
color: #006699;
}

/* header navigation anchor default link and links visited color */
nav  a, nav a.visited {
color: #000;
}

/* header navigation anchor default selected and hover link color*/
nav a.selected {
color: #fff;
}