body {

	height: 100%;

	margin: 0;

	padding: 0;

	color: #252525;

	font-family: Arial, sans-serif, Helvetica, Verdana, Geneva, Tahoma;

	font-size: 62.5%;

	text-align: center;

	background-image: url('http://jeremyreukauf.com/images/classy_fabric_@2X.png');

}



#page {

	max-width: 960px;

	margin: 1% auto; /*centers the element*/

	background-color: #FFF;

	-webkit-box-shadow: 0px 11px 45px rgba(0, 0, 0, 0.75);

	-moz-box-shadow:    0px 11px 45px rgba(0, 0, 0, 0.75);

	box-shadow:         0px 11px 45px rgba(0, 0, 0, 0.75);

	width: 100%;

	height: auto;

}



#maincontent {

	margin: 0 3.1%;

	text-align: left;

}



ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  -webkit-margin-before: 0;

}



img { 

	max-width: 100%; 

	height: auto !important;

	border-style: none;

}



.print-only {

	display: none;	

}



.clear { 

	clear: both; 

}



/****************************************************************************************/



/********************************** TOPOGRAPHY STYLES ***********************************/



p, ol, ul, blockquote, pre, code {

	font-family: "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";

	font-size: 1.2em;

	line-height: 1.5em;

	margin-bottom: 1.5em;

}



h1, h2 {

	font-family: "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";

	line-height: 1.2em;

	margin-bottom: .5em;

}



h3, h4, h5, h6 {



	font-family: "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";



	margin-bottom: .5em;



	line-height: 1.2em;



}



h1 {



	font-size: 3em;



	padding-top: 1.2em;



	margin-top: 0em;



	padding-bottom: 0em;



}



header h1 {



	font-size: 3.2em;



	text-align: left;



	padding-top: .4em;



	color: #FFF;



	display: inline-block;



	float: left;



	margin: 0;



}



header h1 span {



	color: #AAAAAA;	



}



header h1:hover {



	color: #AAAAAA;



}



header h1:hover span {



	color: #FFF;	



}



h2 {



	font-size: 2em;



}



h3 {



	font-size: 1.5em;



}



h4, h5, h6 {



	font-size: 1.2em;



}



#maincontent h1 {



	font-family: 'Francois One', "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";



}



article h1 {



	font-size: 2em;



	font-family: 'Francois One', "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";



}



article h2 {



	font-size: 1.5em;



}



article h3 {



	font-size: 1.3em;



}



a, a:visited {



  color: #555;



}



a:hover, a:focus, a:active {



  color: #767676;



}



/****************************************************************************************/



/************************************ HEADER STYLES *************************************/



/*header li:first-child {



	list-style-type:none;



}



header li {



	margin: 0 10px 10px;



	font-size: 1.5em;



	float:left;



	list-style-type:disc;



	padding-right:10px;



}*/



header {



	background-color: #373737; /* Old browsers */



	padding: 2% 3.1%;



}



header svg {



	float: left;



	padding-right: 1.5em;



}



#Layer_2 {



	fill: #AAAAAA;	



}



#Layer_1, #Layer_4 {



	fill: #FFFFFF;	



}



svg:hover #Layer_1, svg:hover #Layer_4 {fill:#AAAAAA;}



svg:hover #Layer_2 {fill:#ffffff;}



/****************************************************************************************/



/********************************** NAVIGATION STYLES ***********************************/



nav ul {



	margin: 1.9em 0;	



}



nav li {



	display: inline;



	margin: 0 .5em;



	font-size: 1.2em;



	float:none;



}



nav li a {



	color: #FFF;



	text-decoration: none;



}



nav li a:hover {



	text-decoration: underline;



}


/*#target_job_title, #performance_profile  {



	width: 48.7%;



	float: left;



	margin-left: 0;


}

#performance_profile { margin-left: 2.6%;

float: right;
    
}*/

#target_job_title { clear: both;}




/****************************************************************************************/



/*********************************** SKILLS STYLES **************************************/



#skills section {



	width: 23.05%;



	float: left;



	margin-left: 2.6%;



}



#skills #software {



	margin-left: 0%;



}



/*#skills li {



	padding:0 .5em 0 2em;	



}*/



#skills div { background:url('http://jeremyreukauf.com/images/sprite-icons.png') no-repeat scroll 0 0 transparent;display:inline-block; width:16px; margin: 0 1em 0 0;}



div#dw { background-position: -8px -8px; }



div#ai { background-position: -8px -32px; }



div#ps { background-position: -8px -56px; }



div#fl { background-position: -8px -80px; }



div#chrome { background-position: -8px -104px; }



div#firebug { background-position: -8px -128px; }



div#excel { background-position: -8px -152px; }



div#html5 { background-position: -8px -176px; }



div#css3 { background-position: -8px -200px; }



div#jquery { background-position: -8px -224px; }



div#mysql { background-position: -8px -248px; }



div#php { background-position: -8px -272px; }



div#ou { background-position: -8px -296px; }



div#blox { background-position: -8px -320px; }



div#wp { background-position: -8px -344px; }



div#joomla { background-position: -8px -368px; }



div#adobe { background-position: -8px -392px; }



div#google { background-position: -8px -416px; }







/*#skills li { background:url('http://jeremyreukauf.com/test/images/sprite-icons.png') no-repeat scroll 0 0 transparent;  }



#skills li#dw { background-position: -8px -8px;}



#skills li:after { background-color:#FFF}



#skills li#dw:before {



    background-position: -8px -8px;



    width:##px;



    height:##px;



    display:block;



    position:absolute;



    content: " ";



    top:##px;



    left:##px;



}*/







/****************************************************************************************/



/********************************** EDUCATION STYLES ************************************/



#education {



	clear: both;



}



#education section {



	width: 23.05%;



	float: left;



	margin-left: 2.6%;



}



#education #osu {



	margin-left: 0%;



}



#education h2 {



	padding: 0 .5em 0 0;



}



/*If padding is needed between columns apply it to the chilren of this section and not to the columns*/



/****************************************************************************************/



/********************************** THREE COLUMN STYLES ************************************/



/*#education {



	clear: both;



}



#education section {



	width: 31.6%;



	float: left;



	margin-left: 2.6%;



}



#education #cwi {



	margin-left: 0%;



}



#education h2 {



	padding: 0 .5em 0 0;



}*/



/*If padding is needed between columns apply it to the chilren of this section and not to the columns*/



/****************************************************************************************/



/********************************* CERTIFICATION STYLES ************************************/



#certifications {



	clear: both;



}



#certifications section {



	width: 48.7%;



	float: left;



	margin-left: 2.6%;



	display: inline-table;



}



#certifications #html_cert {



	margin-left: 0%;



}



#certifications div {



	clear: both;



}



#certifications img {



	width: 70px;



	float: left;



	margin-right: 1em;
	margin-bottom: 1em;



}



/****************************************************************************************/



/********************************* EMPLOYMENT STYLES ************************************/



#employment {



	clear: both;



}



#employment section {



	width: 48.7%;



	float: left;



	margin-left: 2.6%;



}



#employment #osu, #employment #mt {



	margin-left: 0%;



}



#employment div {



	clear: both;



}



/****************************************************************************************/



/*********************************** FOOTER STYLES **************************************/



footer {

	clear: both;



}

/****************************************************************************************/



/********************************** PORTFOLIO STYLES ************************************/

#portfolio {

	padding-bottom: 13em;

}
#intro ol { 
	list-style: none; 
	text-align: center; 
	align-items: center;
    display: flex;
    justify-content: center;
	margin: 0 0 1em;
	}

#filters {

    list-style-type: none;

    margin: 0;

    padding: 0;

    text-align: center;

}

#filters li {

    background: none repeat scroll 0 0 #aaaaaa;

	color: #252525;

    border-radius: 3px;

    cursor: pointer;

    float: left;

    font-size: 1.2em;

    margin: 0.2em 0.4em 0.2em 0;

    padding: 0.4em 0.2em;

    transition: all 0.15s ease-out 0s;

}

#filters li:hover {

    background: none repeat scroll 0 0 #c0c0c0;

}

#filters li.active {

    background: none repeat scroll 0 0 #373737;

    color: #ffffff;

}

#tiles {

    list-style-type: none;

    margin: 0;

    position: relative;

}

#tiles li.inactive {

    opacity: 0;

}

#grid ul {

	list-style-type: none;

    list-style-position:inside;

	list-style: none;

	padding-left: 0;

	margin-left: 0;

}

#tiles li {

    background-color: #ffffff;

    border: 1px solid #aaaaaa;

    border-radius: 2px;

    cursor: pointer;

    display: none;

    padding: 4px;

    transition: all 0.3s ease-out 0s;

    width: 200px;

}

#tiles li img, #employment img {

    display: block;

}

#tiles li p {

    color: #252525;

    font-size: 1.2em;

    margin: 0.7em 0 0 0.7em;

	text-align:left;

}

.clearfix:after {

    clear: both;

    font-size: 0;

    height: 0;

    visibility: hidden;

}

.clearfix:before, .clearfix:after {

    content: "";

    display: table;

}

#tiles ali:nth-child(3n) {

    height: 17.5em;

}

#tiles ali:nth-child(4n-3) {

    padding-bottom: 3em;

}

#tiles ali:nth-child(5n) {

    height: 25em;

}

.fancybox-custom .fancybox-skin {

  box-shadow: 0 0 50px #222;

}