/* STYLE SHEET FOR MICHAEL C. RYAN | TIME EQUALS NOTHING PORTFOLIO SITE */

/* 
This was my first attempt at using a stylesheet template.
This particular one I used is from http://onepcssgrid.mattimling.com/
 */




/* ******************************************************************************************
 * MAIN CONTAINER
 */
.onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; 
}

.onepcssgrid-1200 {
	max-width: 1220px;
}


.onerow {
	clear: both;
	padding: 0 10px;
	
}





/* ******************************************************************************************
 * LAYOUT
 */


.col2, col24, col25, col26, .col8{
	float: left;
	margin: 0 1% 0 0;
	
}

.col8{
	padding:2%;
}

.col23 {
	margin: 10% 0;
	
	
}
 .col23 header h1{
 	width:55%;
 	text-align:right;
 	margin: 0 9% 0 38%;
 	font-weight:200;
 }
 
 .col23 header{
 	padding: 0 ;
 }

.col22 {
	float: left;
	margin: 3% 0 0 5%;

}




.col2 { width: 32%; } 
.col22 { width: 44%; }	/* image links (29% for 3x3) */
.col23 { width: 100%;}	/* header */
.col24 { width: 100%;}  /* logo */
.col25 { width: 100%;}	/* main menu nav buttons  */
.col25about { width: 100%;}
.col25contact { width: 100%;}
.col25portfolio { width: 100%;}
.col26 { width: 200px;}   /* social links */
.col27 { width: 100%;}   /* footer */

.col8 { width: 65%;}




.col2 img, col24, col25,.col8 img {
	width: 100%;
	height: auto;
	display: block;
}

.col27 img {
	width:50%;
	display:inline;
	margin-bottom: 40px;
}





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

body {
			margin-top: 20px;
			font-family: 'Raleway', sans serif;
			font-weight: 300;
			color: #808080;
		}
		
		

		.col2, .col8 {
			
			margin-bottom: 20px;
			text-align: center;
			padding: 20px 0;
			
		}
		
		
		
		.col2 {
			padding-bottom:0;
			box-shadow:2px 2px 6px #808080 inset; 
		}
		
		.col22 {
			box-shadow:1px 1px 2px #808080; 
		}
		
		
		
		.col22 figure{
			margin:1% 0 0 0;
			
			

		}
		
		.col22 img{
			
			margin:0 auto;
		}
		
		.col22 p{
			
			margin:0;
			float:none;
		}
		
		.col22  figure p{
			
			padding:1%;
			background-color:indigo;
			opacity: 0;
			-webkit-opacity: 0;
			transition-property: opacity;
			visibility:hidden;
			transition-duration: 1s;
			color: #FFFFFF;
			
		}
		
		.col22  a:link{
			text-decoration: none;
			opacity:1;
			transition-property: opacity;
			transition-duration: 1s;		
			
		}
		
		.col22 a:visited{
			text-decoration:none;
		}
		
		.col22  a:hover {
			text-decoration: none;
			
						
		}
		
		.col22  a:active{
			text-decoration: none;
		}
		

    
		
		.col22  a:link img{
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    		filter: grayscale(100%);
   			-moz-filter: grayscale(100%);
    		-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: gray; /* IE6-9 */
			-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
			transition-property: filter;
			transition-duration: 1s;
			text-decoration: none;
		}
		
		.col22 a:hover img{
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
			filter: grayscale(0%);
   			-moz-filter: grayscale(0%);
    		-ms-filter: grayscale(0%);
			-o-filter: grayscale(0%);
			filter: none; /* IE6-9 */
			-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
			transition-property: filter;
			transition-duration: 1s;
			text-decoration: none;
				
			
		}
		.col22  a:hover  p{
			
			opacity: 0.8;
			-webkit-opacity: 0.8;
			visibility:visible;
			text-decoration: none;
			
		}
		
		.col22  a:active{
			text-decoration: none;
		}
		
		.col23 hr{
			border-color:#99FF00;
			color:#99FF00;

		}
		
		#copyright p{
			margin:0 5%;
			padding:20px;
			text-align:right;
			font-size:0.7em;
		}
		
		
		.col24 figure{
			margin:0;
		}
		.col25 {
			margin-top: 30%;
			color:white;		
			
		}
		
		#about{
			display:block;
			font-size:1em;
			padding:0.1em 2.5em 0 2.5em;
			text-align:left;
			list-style-type:circle;
		}
		
		#about ul{
			list-style-type:circle;
		}
		
		#about li{
			padding: 0.2em 0;
		}
		
		#portfolio{
			display:block;
		}
		#accordion {
			display:none;
			
		}
		
		.col25portfolio{
			background-color:silver;
			box-shadow:2px 2px 6px #808080 inset;
			margin-bottom:1px;
		}
		
		
		.col25about{
			background-color:silver;
			box-shadow:2px 2px 6px #808080 inset;
			margin-bottom:1px;
			
			
		}
		.col25contact{
			background-color:silver;
			box-shadow:2px 2px 6px #808080 inset;
			margin-bottom:1px;
			
		}
		
		.col25 a:link{
			color:white;
			padding:4px 0;
			text-decoration: none;
			display:block;
			opacity: 1;
			transition: background .5s ease-in-out;
			-moz-transition: background .5s ease-in-out;
		   	-webkit-transition: background .5s ease-in-out;
		   	box-shadow:2px 2px 6px #808080 inset;
		}
		
		.col25 a:visited{
			color:white;
			display:block;
			text-decoration: none;
		}
		
		.col25 a:hover{
			color:white;
			display:block;
			text-shadow:1px 1px 1px black;
			text-decoration: none;
			background-color:#97e40b;
			box-shadow:2px 2px 6px #808080 inset;
		}
		
		.col25 a:active{
			color:white;
			display:block;
			text-decoration: none;
		}
		
		
		
		#socialMobile{
			display:none;
		}
		
		.col26 {
			
			
			height: 35px;
			margin: auto;
			padding: 10% 0;
		}
		
		.col26 ul {
			list-style: none;
			display: inline;
			padding:0;
			min-width:200px;
		}
		
		.col26 li {
			float:left;
			margin-left:5%;
			width:90$;
			
		}
		
		
		.col26 figure {
			margin:0;
		}
		
		.col26 li img {
			height:auto;
			width: auto;
			margin:0;
		}
		
		
		
		footer {
		
			color: grey;
			margin-top:20%;
			
		}
		.col27 figure {
			margin-bottom:30%;
		}
		
		.col27 h3 {
			padding: 40px 0 0;
			text-align:center;
			
		
		}
		
		.col27 h4{
			
			text-align:right;
			padding-right:70px;
			margin:0;
			
		
		}
		
		.col27 p {
			padding: 10px 16px 0 16px;
			
		}
		.clientPageLayout > p{
			padding-left:0.5em;
			text-align:left;
			font-size: 1.2em;
}
		.clientPageLayout ul{
			color:#8337C4;
			list-style-type:circle;
		}
		.clientPageLayout li{
			text-align:left;
		}
		
		
		.clientPageLayout a:link{
			color:silver;
			text-decoration:none;
			padding:1%;
			transition: background .5s ease-in-out;
			-moz-transition: background .5s ease-in-out;
		   	-webkit-transition: background .5s ease-in-out;
			
		}
		.clientPageLayout a:visited{
			text-decoration:none;
			color:silver;
			
		}
		.clientPageLayout a:hover{
			text-decoration:none;
			color:white;
			padding:1%;
			background-color:#97e40b;
			text-shadow:1px 1px 1px black;
			
		}
		.clientPageLayout a:active{
			text-decoration:none;
			color:white;
			
		}
		
		.clientPageLayout  li  a:link{
			color:#8337C4;
			padding:0;
			transition:none;
		}
		
		.clientPageLayout  li  a:visited{
			color:#8337C4;
			padding:none;
		}
		
		.clientPageLayout  li  a:hover{
			color:#8337C4;
			text-decoration:underline;
			transition:none;
			background-color:white;
			padding:none;
			text-shadow:none;
		}
		
		.clientPageLayout  li  a:active{
			color:#8337C4;
		}
		a img {

			border: none;

		}
		
		


/* ******************************************************************************************
 * TABLETS AND PHONES
 */

@media all and (max-width: 768px) {
	
	.onerow {
		margin: 0 0 100px;
	}

	.col2, .col8{
		float: none;
		width: 99%;
		box-shadow:none;
		text-align:left;
		
		
	}
	.col8{
		display:none;
	}
	
	
	.col22 {
		float: none;
		width: 100%;
		margin: 2% 0;
		box-shadow:none;
	}
	
	#copyright p{
		text-align:center;
		margin:0 auto;
	}
	
	.col24 figure{
		margin-bottom:10%;
	}
	
	.col25{
		margin:0;
		font-size:1.5em;
		
	}
	
	.col25 img{
		width:60%;
	}
	hr{
	border-color:#99FF00;
			color:#99FF00;
	}
	
	
	
	.col25about{
		display:none;
	}
	
	.col25contact{
		display:none;
	}
	
	.col25portfolio{
		display:none;
	}
	
	.col25 a:link{
		
		display:none;
	}
	
	.col25 a:visited{
		display:none;
	}
	
	.col25 a:hover{
		
		display:none;
	}
	
	.col25 a:active{
		
		
		display:none;
		
	}
	
	footer{
		margin:10% 0;
	}
	
	
	#accordion {
		display:block;
		
	}
	
	#accordion h3{
		color:white;
		font-family: 'Raleway', sans serif;
		font-weight: 400;
		font-size:1.5em;
	}
	
	#accordion p{
		font-family: 'Raleway', sans serif;
		font-weight: 300;
		color: #808080;
		font-size:1.2em;
	}
	
	
	
	#accordion .ui-corner-all{
		border-radius:0px;
	}
	#accordion .ui-accordion-icons{
		padding-left:1.6em;
	}
	#accordion .ui-accordion-header{
		position:static;
	}
	#accordion .ui-accordion-header-icon{
		display:none;
	}
	
	#accordion .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
		background:none;
		background-color:silver;
		border:0;
		
	
	} 
	#accordion .ui-widget-content{
		color:#8337C4;
		font-family: 'Raleway', sans serif;
		
	}
	#accordion .ui-widget-content a:link{
		color:#8337C4;
	}
	
	#accordion .ui-widget-content a:visited{
		color:#8337C4;
	}
	#accordion .ui-widget-content a:hover{
		color:#8337C4;
	}
	#accordion .ui-widget-content a:active{
		color:#8337C4;
	}
	
	#socialMobile{
		display:block;
		float:none;
		width:30%;
		margin-bottom:10%;
		
		}
	
	#socialNormal{
		display:none;
		
	}

	.col26{
		margin: 0 25%;
		min-width:215px;
		width:20%;
		padding:0 0 5% 0;
		
	}
	
	.col26 li{
	
		margin-left:7%;
	}
	
	.col27 {
	
		display:none;
	}
	
	.col23 {
		display:none;
	
	}
	#portfolio {
		display:none;
	}
	#about {
		display:none;
	}
	
	
}