/*



	Theme Name: Peak



	Theme URI: http://themeforest.net/user/onioneye



	Description: A Premium Portfolio Wordpress Theme.



	Author: OnionEye



	Author URI: http://themeforest.net/user/onioneye



	License: GNU General Public License version 3.0



	License URI: http://www.gnu.org/licenses/gpl-3.0.html



	Version: 1.2.0



	



	Designed & Handcrafted by OnionEye 



	



*/







/*  Table of Contents 



    ........................................................................................................................................



	



	1. Main Base Styles



	2. Links



	3. Images



	4. Technical and Creative Typography 



    5. Forms



    6. Common and Reusable Styles



  	7. Main Content



  	8. Header



  	9. Menu



  	10. Portfolio Gallery



  	11. Single Portfolio Item



  	12. Blog



  	13. Comment Styles



  	14. Comment Form Styles



  	15. Widgets



  	16. Content Styles



  	17. Plugins



  	18. Search



  	19. Footer



  	20. Media Queries



  	21. Animations



  	



*/







/*  1. Main Base Styles



    ........................................................................................................................................ */



    



    *, 



    *:before, 



    *:after { 



    	box-sizing: border-box; 



    }



    



    * {



		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);



	}



    



    html,



	body {



		padding: 0;



		margin: 0;



		



		overflow-x: hidden;



	}



	



	html {



		overflow-y: scroll;



	}



	



	body { 		



		background-color: #fff;



		background-image: url("https://ashleylewis.design/1234/wp-content/uploads/2016/11/yellow-15px.jpg") !important;



		background-repeat: repeat-y;		



		height: 100%;



	}



	



	.link a {



		background-image: linear-gradient(to bottom, #FCD900 0px, #FCD900 100%);



    	background-position: 0 92%;



    	background-repeat: repeat-x;



    	background-size: 1px 1px;



    	border-bottom: 0 none;



    	display: inline;



    	position: relative;



    	text-decoration: none;



    	text-shadow: 3px 0 transparent, 2px 0 transparent, 1px 0 transparent, -1px 0 transparent, -2px 0 transparent, -3px 0 transparent;



	}



	



	ol, 



	ul { 



		list-style: none inside none; 



		margin: 0; 



		padding: 0;



	}



	



	small {



		font-size: 85%;



	}



	



	/* Remove empty paragraphs */



	p:empty { 



		display: none; 



	} 



	



	/* Highlighted text */



	::selection { 



		background: #191919; 



		



		color: #fff; 



		text-shadow: none; 



	}



	::-moz-selection { 



		background: #191919; 



		



		color: #fff; 



		text-shadow: none; 



	}



	



	/* Simple fluid media */



	object, 



	embed { 



		max-width: 100%; 



		height: auto; 



	}



	figure { 



		position: relative; 



	}



	figure img, 



	figure object, 



	figure embed, 



	figure video { 	



		max-width: 100%; 



		display: block; 



	}



	



		







/*  2. Links



    ........................................................................................................................................ */



    



    a { 



	    color: #000000;



		text-decoration: none;



				



		transition: .2s all ease;



    }   



    



		.no-touch a:hover {



			color: #2e2e2e;



		}







		.no-touch .logo a:hover, .logo:hover {



    		animation: none !important;



    		-webkit-animation: none !important;



}











/*	3. Images



    ........................................................................................................................................ */



	



	img { 



		max-width: 100%; 



		height: auto;



		



		border: 0; 



		



		-ms-interpolation-mode: bicubic;	



	}



	 



      



   	    



/*  4. Technical and Creative Typography



    ........................................................................................................................................ */		



    



    /* Modular Scale    ---------------------- 16px @ 1:1.333	 15px @ 1:1.333	 ----------------------*/



    /* Fontbase         ---------------------- 16px = 1em	  					 ----------------------*/



    /* Line Height Base ---------------------- 28px = 1.75em	                 ----------------------*/



    



	



	/* maxvoltar.com/archive/-webkit-font-smoothing */



	html { 



		-webkit-font-smoothing: antialiased; 



	} 



	



	body, 



	button, 



	input, 



	textarea {



		font-family: 'Roboto Slab', Georgia, serif;



		font-weight: 300;



		line-height: 28px;



		line-height: 1.75em; /* =28px */



		color: #222;



	}		 



		



	b, 



	strong { 



		font-weight: 600; 



		color: #191919; 



	}



	



	p, 



	h1, 



	h2, 



	h3, 



	h4, 



	h5, 



	h6 { 



		margin: 0 0 28px 0; 



		margin-bottom: 1.75em; /* =28px */



	}	



	



	h1, 



	.h1 {



		font-size: 43.2px;



		font-size: 2.7rem;



		line-height: 1.477em; /* = 56px */



		line-height: 1.187em; /* = 45px */



		margin-bottom: 0.5em; /* = 18.95px */



	}



	h2, 



	.h2 { 



		font-size: 28.430px;



		font-size: 1.777rem; 



		line-height: 1.969em; /* = 56px */



		line-height: 1.301em; /* = 37px */



		margin-bottom: 0.984em;



	}



	h3, 



	.h3 { 



		font-size: 21.328px;



		font-size: 1.333rem; 



		line-height: 1.312em; /* = 28px */



		margin-bottom: 1.312em;



	}



	h4, 



	.h4 { 



		font-size: 16px; 



		font-size: 1rem;



		line-height: 1.75em; /* = 28px */



	}



	h5, 



	.h5,



	h6,



	.h6 { 



		font-size: 15px;



		font-size: 0.938rem; 



		line-height: 1.866em; /* = 28px */



	}



	



	h1, 



	h2, 



	h3, 



	h4, 



	h5, 



	h6,



	.h1,



	.h2,



	.h3,



	.h4,



	.h5,



	.h6 { 



		font-family: "Roboto", Arial, Helvetica, sans-serif;



		font-weight: 300;



		color: #222;



	}



	











/*  5. Forms



    ........................................................................................................................................ */



    



	fieldset {



		margin: 0 0 1.75em 0; /* = 28px */



		padding: 0;



		



		border: none;



	}



			



	input, 



	textarea { 



		padding: 8px 10px; 



	}



	input, 



	textarea, 



	select {  



		margin: 0; /* webkit browsers add a 2px margin outside the chrome of form elements */



		



		border-radius: 2px;



		



		outline: none;



	}



	select, 



	input, 



	textarea, 



	button { 



		font-family: inherit; 



		font-size: 100%; 



		font-weight: 300; 



	}



	select { 



		max-width: 600px; 



		padding: 4px 4px 4px 0; 



		



		border: 1px solid #e3e5e5; 



		



		background: #fff; 	



	}



	label { 



		display: inline-block; 



		margin-bottom: 5px; 



	}



	label, 



	input[type=button], 



	input[type=submit], 



	button { 



		cursor: pointer; /* hand cursor on clickable input elements */



	}



	



	/* buttons */



	input[type="submit"], button, input[type="button"], .url-button, .read-more {		



		display: inline-block;



		padding: 10px 24px;



				



		border-radius: 4px;



		border: 2px solid #313233;



		



		background: none;



		



		color: #313233;		



		font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;



		font-size: .75rem;



		font-weight: 500;



		text-transform: uppercase;



		letter-spacing: .3em;



		



		cursor: pointer;



	    



	    transition: all 0.2s ease-in-out;



	}



	



	input[type="submit"]:hover, button:hover, input[type="button"]:hover, .read-btn .read-more:hover, .project-meta .url-button:hover {



	   	border-color: #bfbfbf;



	   	color: #bfbfbf;



	}



	



	input[type="submit"]:not(.main-search-submit):active, button:active, input[type="button"]:active, .read-more:active, .read-more:focus, .url-button:active, .url-button:focus {



		position: relative;



		top: 1px;



	}



	



	input[type="submit"] { 



		display: inline; 



		vertical-align: top; 



	}	



	input[type="submit"], 



	button, 



	input[type="button"] { 



		border-radius: 2px; 



	}														   												   												 



	



	/* style the text inputs only */



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 



	input[type="text"], 



	textarea { 



		width: 100%; 



		appearance: none;



		line-height: 1;



	}



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 



	textarea { 



		padding: 10px 8px; 



		max-width: 450px; 



		display: block; 



		



		border: 1px solid #ccc;



		



		background: #fff; 



	}



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 



	textarea, 



	select { 



		transition: all .2s ease-in; 



	}



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 



	textarea { 



		border-radius: 2px; 



	}



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 



	textarea:focus, 



	select:focus { 



		box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.008); 



	}



	input[type="text"]:focus, 



	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 



	textarea:focus, 



	select:focus { 



		border-color: #b4b4b4; 



	}	



	



	







/*  6. Common and Reusable Styles



    ........................................................................................................................................ */



    



    .caps {



    	font-size: 12.003px;



		font-size: 0.75rem;



		font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;



		font-weight: 500;



		text-transform: uppercase;



		letter-spacing: .3em;



	}



	



	.table {



		display: table;



    	width: 100%;



    	position: relative; 



    }



    



    .hide-text { 



    	text-indent: 100%; 



    	white-space: nowrap; 



    	overflow: hidden; 



    }



    	



	/* Break words that are too long to fit into its container */



	.word-break { 



		white-space: -moz-pre-wrap; /* Mozilla */ 



		white-space: -o-pre-wrap; /* Opera 7 */ 



		white-space: pre-wrap; /* CSS 2.1 */ 



		white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ 



		word-wrap: break-word; /* IE */  



	}



	



	.overflow-wrap { 



		-ms-word-break: break-all; 



		word-break: break-all; 



		word-break: break-word; 



		



		-webkit-hyphens: auto; 



		-moz-hyphens: auto; 



		-ms-hyphens:auto; 



		hyphens: auto; 



	}



	



	/* highlighting search term on search page */



	mark, 



	.search-term { 



		background: #EBE16F; 



	}



		



	/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 



	.group:before, 



	.group:after { 



		content: ""; 



		display: table; 



	}



	.group:after { 



		clear: both; 



	}



	.group { 



		zoom: 1; 



	}



	











/*  7. Main Content



    ........................................................................................................................................ */



    



    .main-container {



    	padding: 0 2.5em 0 2.5em; /* 40px + 40px = 80px */



    }



    .page-template-template-portfolio-php .main-container,



	.single-portfolio .main-container,



	.tax-portfolio_category .main-container {



		padding-right: 0;



	}



		.page-template-template-portfolio-php .header,



		.single-portfolio .header,



		.tax-portfolio_category .header,



		.single-portfolio-container {



			margin-right: 2.5em; /* = 40px */



		}	



		.page-template-template-portfolio-php .footer,



		.single-portfolio .footer,



		.tax-portfolio_category .footer {



			padding-right: 2.5em; /* = 40px */



		}			



		.main-content {



			display: table-cell;



			width: 100%;



		}



		.page-template-template-portfolio-php .main-content,



		.single-portfolio .main-content,



		.tax-portfolio_category .main-content {



			float: none;



			max-width: none;



		}



		.page-content,



		.blog-container,



		.page-container {



			max-width: 940px;



		}		 



	    .page-content { 



			margin-left: 0; 



			margin-right: 0; 



			width: 100%; 



			padding-bottom: 1.75em; 



		}	



		.page-template-template-page-with-sidebar-php .page-content { 



			width: 70%;



			float: left;



			padding-right: 1.875em; /* = 30px */



		}



		.sidebar { 



			width: 28%;



			float: right; 



		}	















/*  8. Header



    ........................................................................................................................................ */		



    



    /**



	 * Drop-down tagline and menu



	 */



    .dropdown-container { 



    	position: relative;   	



    	overflow: hidden;



    	height: 0;



    



    	background: #222 url("images/dark_wall.png");







		color: #a7abb1;    	



		text-shadow: 0 1px 0 rgba(0, 0, 0, 1);



		font-size: 21.328px; 



		font-size: 1.333rem;



    }



    	.dropdown-container .close-button {



    		position: absolute;



    		right: 1.333em; /* = 40px */



    		top: 15px;



    		width: 40px;



    		height: 40px;



    		



    		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;



    		font-size: 1.406em; /* = 30px */



    		text-align: right;



    		color: #a7abb1;    	



			text-shadow: 0 1px 0 rgba(0, 0, 0, 1);



			cursor: pointer;



			



			transition: .2s color ease;



    	}



    		.no-touch .dropdown-container .close-button:hover {



    			color: #fdfdfd;



    		}



	    .dropdown-container .dropdown-content {



	    	padding: 2.625em 1.875em; /* 56px + 40px + 56px + 40px */



	    	margin: 0 auto;



	    	max-width: 940px;



	    	



	    	text-align: center;



	    }



		    .tagline {



		    	display: none;



		    }



	    	.dropdown-content .tagline {



	    		margin-bottom: 0;



	    	}



	



	/**



	 * Logo, social icons, and search



	 */	        	



    .header {



    	position: relative; 



    	padding: 1.75em 0; /* 28px + 28px = 56px */



    } 



    	.oy-logo, 



    	.header-secondary {



		    display: table-cell;



			vertical-align: middle;



			



			line-height: 0;



	    }	



    



    	/**



		 * Logo



		 */



	    .oy-logo {



			margin: 0 auto;	



			width: 220px;



	    }



			.oy-logo a {



		    	display: inline-block;



		    	margin-right: 3.75em; /* = 60px */	



		    	vertical-align: bottom;	



		   	}



		   		.oy-logo .textual-logo {



		   			display: block;



		   			padding: 0.2em 0 0.394em;



		   			



		   			color: #222;



					font-family: 'Roboto', Georgia, "Times New Roman", Times, serif;



					font-weight: 400;



					font-size: 35.528px;		



					font-size: 2.221rem; 



					line-height: 1.182em; /* = 42px */	



		   	    }



			   		/**.no-touch .oy-logo a:hover {



						animation: tinywiggle 220ms ease-out;



					}*/



		



		/**



		 * Social links



		 */	



		.social-and-search.social-exists {



			margin-left: -3px;



		}	



		  	.social-and-search li {



				float: left;



			}	



			.social-and-search li:first-child {



				margin-left: 0;



			}



				.social-and-search a {



					display: block;



					position: relative;



					width: 45px;



					height: 56px;



					padding: 8px;	



					



					perspective: 500;											    									    		



				}



					.social-and-search a:after {



						box-sizing: content-box;



						position: absolute;



						left: -3px;



						top: 12px;



						padding: 3px;



						width: 28px;



						height: 28px;



														



						background: url("images/main.png") no-repeat left top;



								



						opacity: 1;



						content: " ";



						transition: .6s 0s;



						transform-origin: 40% 50%;



					}



						.no-touch .social-and-search a:hover:after {



							opacity: 1;



							transform: rotateY(360deg);



							transition: .6s 0.02s;



						}	



					.social-and-search .facebook-link:after {



						background-position: 0 -50px;



					}



					.social-and-search .twitter-link:after {



						background-position: -50px -50px;



					}



					.social-and-search .googleplus-link:after {



						background-position: -100px -50px;



					}



					.social-and-search .pinterest-link:after {



						background-position: -150px -50px;



					}



					.social-and-search .instagram-link:after {



						background-position: -200px -50px;



					}



					.social-and-search .youtube-link:after {



						background-position: -250px -50px;



					}



					.social-and-search .vimeo-link:after {



						background-position: -300px -50px;



					}



											



		/**



		 * Main Search Form



		 */	



		.search-item {



			margin-left: 2.5em; /* = 40em */



		}



		.mobile-search { 



			display: none; /* Hide the mobile search form by default */



		}



			.search-item .main-search-form {



				position: relative;



			}	



				.search-item .main-search-form .main-search-field {



				 	position: relative;



					float: left;



					width: 200px;



					height: 29px;



					padding: 4px 26px 4px 2px !important;



					top: 8px;



											



					border-width: 0 0 1px 0 !important; 



											



					line-height: 1 !important;									



				}



				.search-only .main-search-form .main-search-field {



					top: -4px;



				}



				.main-search-form .main-search-submit {



					display: block;



					position: absolute;



					right: 0;



					bottom: -34px;



					float: right;



					width: 20px;



					height: 19px;



					padding: 0;



					



					border: none;



									    						    		



					background: url("images/main.png") no-repeat -50px 0;



										    	



					appearance: none;



				}



				.search-only .main-search-form .main-search-submit {



					bottom: -22px;



				}



		



		/**



		 * Tagline and Menu Buttons



		 */	



		.header-buttons {



			position: absolute;



			right: 0;



			top: 15px;



			width: 72px;



			height: 56px;



			



			perspective: 500;



		}



			.header-buttons div {



				width: 32px;



				height: 32px;



				



				border-radius: 32px;



				border: 2px solid #222;







				cursor: pointer;



				transition: .2s all ease;



			}



				.header-buttons div:only-child {



					float: right;



				}



				.no-touch .header-buttons div:hover {



					animation: boing 220ms ease-out;



				}



			.header-buttons .tagline-button {



				float: right;



				



				background: url("images/main.png") no-repeat -90px 7px;



				



				font-size: 16px;



				line-height: 28px;			



				text-align: center;



				font-weight: bold;



			}



			.header-buttons .menu-button {



				visibility: hidden; /* Hide the mobile menu for desktops */



				position: relative;



				left: 40px;



				



				background: url("images/main.png") no-repeat 7px 9px;				



			}



															



        



 



/*  9. Menu



    ........................................................................................................................................ */	



        



	.menu-container {



	    min-width: 220px;



	    display: table-cell;



		min-height: 100%;



		margin-bottom: 3.5em; /* = 56px */



		padding-right: 1.125em; /* = 40px */	



		padding-left: 1.15em;



		vertical-align: top;				



	}



		/**



		 * Main Menu



		 */



		.menu {		



			margin-bottom: 1.75em; /* = 28px */



		}



			.menu li {



				list-style: none;



			}



				.menu a, 



				.portfolio-filter a,



				.filter-title {



					display: block;



					position: relative;



					 					



					transition: background 0.32s, padding-left 0.25s, transform 0.3s;



					



					font-size: 12.003px;



					font-size: .75rem;



					font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;



					font-weight: 500;



					text-transform: uppercase;



					letter-spacing: .3em;



				}



					.no-touch .menu a:hover,



					.no-touch .portfolio-filter a:hover { 	



						padding-left: 10px;



					}



				.current-menu-item a {



					color: #222;



				}



					.current-menu-item a:before,



					.portfolio-filter .active a:before {



						display: block;



						position: absolute;



						top: 0;



						left: -19px;



						



						font-weight: 400;



						font-size: 14px;



						content: "×";



				    }



		



						/**



						 * Sub Menu



						 */



						.menu .sub-menu {



							padding-left: 1.25em; /* = 16px */



						}



		



		/**



		 * Filter



		 */	



		.portfolio-filter {



			position: relative;



	    }



	    	nav + .portfolio-filter {



	    		padding-top: 1.75em; /* = 28px */



	    	}



				nav + .portfolio-filter:before {



					display: block;



					position: absolute;



					top: 0;



					left: 0;



					width: 30px;



					height: 1px;



					background: #808080;



					



					content: " ";



				}	



					nav + .portfolio-filter .filter-title {



				    	margin: 1.166em 0; /* 14px + 14px = 28px */



				    }



					.filter-title {



						margin: 0 0 1.166em; /* 14px */



						color: #acacac;



				    }



						.portfolio-filter .active a {



							position: relative;



							color: #222;



					    }



	



	/**



     * Drop-down mobile menu



	 */				    



	.mobile-menu {



		display: none;



	    max-width: 220px;



	    margin: 0 auto;



	}



		.mobile-menu .menu {



	    	margin-bottom: 0;



	    }



	    .mobile-menu .filter-title {



			margin: 1.166em 0; /* 14px + 14px = 28px */



			



			color: #6b6b6b;



			text-shadow: none;



		}



	    	.mobile-menu .menu a,



	    	.mobile-menu .portfolio-filter a {



		   		color: #a7abb1;    	



				text-shadow: 0 1px 0 rgba(0, 0, 0, 1);



				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);



					



				transition: background 0.32s, box-shadow 0.3s;



		    }



		    .mobile-menu .portfolio-filter .active a,



			.mobile-menu .current-menu-item a {



				position: relative;



				



				color: #a7abb1;



			}



				.no-touch .mobile-menu .menu a:hover,



			    .no-touch .mobile-menu .portfolio-filter a:hover {



			    	padding-left: 0;



			    	



			    	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);



			    	background: rgba(0, 0, 0, 0.5);	 



			    	



			   		color: #fff;  



			    }



			    .mobile-menu .current-menu-item a:before,



				.mobile-menu .portfolio-filter .active a:before,



				.mobile-menu nav + .portfolio-filter:before {



					display: none;



				}



					/**



					 * Sub Menu



					 */



					.mobile-menu .menu .sub-menu {



						padding-left: 0; 



					}



						.mobile-menu .menu .sub-menu a {



							text-transform: none;



							letter-spacing: normal;



						}



					











/*  10. Portfolio Gallery



    ........................................................................................................................................ */	



	



	.portfolio-gallery { 



		width: 100%;



		margin-bottom: 1.75em; /* = 28px */



	}



		.portfolio-gallery .portfolio-item { 



			float: left;



			width: 100%;



			padding: 0 10px 10px 0; /* 20px + 20px = 40px */



		} 		



			.portfolio-gallery .project-link {



				display: block;



				



				overflow: hidden;



			}



				.portfolio-gallery .project-title {



					margin-bottom: 15px;



					margin-top: 8px;		



					font-size: 12.003px;



					font-size: .75rem;



					line-height: 1.6em; /* =19.2px */



					text-align: center;



					color: #808080;



				}



				.project-link .thumb-container {



					position: relative;



					



					perspective: 2000;



				}



					.project-link .preview-img {



						transition: .4s all ease;



					}



						.no-touch .project-link:hover .preview-img {



							opacity: .1;



						}



					.view-button { 



						position: absolute;



						left: 50%;



						top: 50%;



						margin-left: -20px;



						margin-top: -20px;



						width: 40px; 



						height: 40px; 



						padding-top: 1px;



							



						border-radius: 65px;



						border: 2px solid #2e2e2e;



							



						background: rgba(255, 255, 255, 0.2) url("images/main.png") -140px 10px;



						



						opacity: 0;



						text-indent: 100%; 



				    	white-space: nowrap; 



				    	overflow: hidden; 



							



						font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;



						font-size: 27px;



						font-weight: 300;



						text-align: center; 



						color: #222; 



							



						transform: rotateY(220deg);



						transition: all .4s ease;



					}



						.no-touch .project-link:hover .view-button {



							transform: rotateY(0deg);



							opacity: 1;



						}



	



	/**



	 * Isotope Filtering



	 */	



	.isotope, 



	.isotope .isotope-item { /* change duration value to whatever you like */ 



		transition-duration: 0.65s; 



	}



	.isotope { 



		transition-property: height, width; 



	}



		.isotope .isotope-item { 



			transition-property: transform, opacity; 



		}



		.isotope-item { 



			z-index: 100; 



		}



		.isotope-hidden.isotope-item { 



			pointer-events: none; 



			z-index: 1; 



		}



		/* disabling Isotope CSS3 transitions */



		.isotope.no-transition, 



		.isotope.no-transition .isotope-item, 



		.isotope .isotope-item.no-transition { 



			transition-duration: 0s; 



		}	



		











/*  11. Single Portfolio Item



    ........................................................................................................................................ */



    



    .single-portfolio-container {



    	position: relative;



    	max-width: 940px;



    	margin-bottom: 5.25em; /* = 84px */



    	padding-bottom: 3.5em; /* = 56px */



    }



		.single-portfolio-container:after {



			position: absolute;



			bottom: 0;



			left: 50%;



			width: 140px;



			margin-left: -70px;



			height: 2px;



					



			background: #222;



					



			content: " ";



		}		



    	



			/**



			 * Meta Post Info (Client, Skills...) 



			 */



			.project-meta {



				padding: 0 0 1.75em; /* = 28px */



			}	



				.meta-column {



					float: left;



					margin-right: 1.25em /* = 20px */



				}



					.meta-column strong {				



						font-weight: 500;



					}



			











/*	12. Blog



    ........................................................................................................................................ */	



		



	.blog-with-sidebar {



		float: left;



		width: 70%;



		padding-right: 1.875em; /* = 30px */



	}



		.post {



			margin-bottom: 5.25em; /* = 84px */



		}



			.blog-with-sidebar .post .post-time {



				display: none;



		    } 



		    .blog-with-sidebar .post-content {



		    	float: left;



		    	width: 100%;



		    }



			.post-content {



				float: right;



				width: 75%;



			}



			



			/**



			 * Post Date



			 */



			.date-circle {



				float: left;



				width: 25%;



			}



				.post .post-time { 



					display: block; 



					float: left;



					padding-top: 20px;



					margin-right: 20px; 



					margin-bottom: 20px;



					width: 115px; 



					height: 115px; 



					



					border-radius: 65px;



					



					border: 2px solid #2e2e2e;



				



					overflow: hidden; 



					



					font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;



					text-transform: uppercase; 



					text-align: center; 



					color: #222; 



					



					transition: all .3s ease-in-out;



				}



					.no-touch .date-circle:hover .post-time { 



						animation: boing 220ms ease-out; 



					}



						.post-time .day { 



							display: block;



							margin-bottom: 7px; 



							



							font-size: 57px;  



							line-height: 40px; 



						}



						.post-time .month-and-year { 



							font-size: 12px;



							font-weight: 500; 



						}







			/**



			 * Post Content



			 */



			.post-title-link { 		



				color: #2e2e2e;



			}



			.featured-img-link { display: block; }



				.featured-img-link img {



					margin: 0 0 1.75em 0;



					display: block;



				}



			.post .additional-post-meta { 



				list-style-type: none; 



				margin-bottom: 1.25em; /* = 20px */ 



			}



				.post .additional-post-meta li { 



					float: left; 



				}



				.read-btn {



					display: block;



					margin-top: 1.25em; /* = 20px */ 



				}



					.post-content .read-more, 



					.blog-post .read-more { 



						margin-top: 0.9375em; /* = 15px */ 



					}



				



	/**



	 * Next/Prev Links 



	 */



	.pager {



		padding: 0 0 2.333em; /* 28px */



		



		font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;



		font-size: 12px;



		font-size: .75rem;



		font-weight: 500;



		text-transform: uppercase;			



		letter-spacing: .3em;



	}



		.prev-page {



			float: left;



		}



		.next-page {



			float: right;



		}



			.pager-link, .pager a {



				display: block;



			}	



				.arrows {



					font-family: 'Merriweather', Georgia, serif;



					position: relative;



					top: -1px;



				}



		



	/**



	 * Single Post



	 */



	.single-post-content {



		margin-bottom: 5.25em; /* = 84px */



	}



		



	/* WordPress built-in class for handling sticky posts */



	.sticky { }		



	.bypostauthor { }	



	











/*	13. Comment Styles



    ........................................................................................................................................ */	







	/* h3 comment title */



	#comments { 



		text-transform: none; 



	} 



		/* number of comments span */



		#comments span { 



			font-weight: 600; 



		} 



		



	.commentlist { 



		margin: 0 0 3.5em 0; /* = 56px */



	}



		.commentlist li { 



			position: relative; 



			list-style-type: none;



			



			clear: both;



		}



			.commentlist li[class*=depth-] { 



				margin-top: 1.1em; 



			}



				.commentlist li.depth-1 { 



					margin-left: 0; 



					margin-top: 0; 



				}



					.commentlist li:not(.depth-1) { 



						margin-left: 1.875em; /* = 30px */ 



						margin-top: 0; 



						padding-bottom: 0; 



					}



				.commentlist li:last-child { 



					margin-bottom: 0; 



				}



				



				.commentlist .comment-body { 



					margin-bottom: 1.75em; /* = 28px */ 



					padding: 0.937em 0.937em 0 0.625em; /* 15px + 15px + 10px */ 



					



					border: 1px solid #eee; 



					



					background: #fff; 



				}



				.commentlist .comment-author + .help { 



					margin: 0; 



					margin-left: 4.375em; /* = 70px */ 



				}



				



				.commentlist .vcard { 



					margin-left: 4.375em; /* = 70px */ 



					margin-bottom: 0.937em; /* = 15px */



				}



					.commentlist .vcard cite.fn { 



						display: inline-block;  



						margin-top: -4px; 



						



						font-style: normal;



					}



						.commentlist .vcard time a { 



							color: #999; 



							text-decoration: none; 



						}



							.no-touch .commentlist .vcard time a:hover { 



								text-decoration: underline; 



							}



					.commentlist .vcard .avatar { 



						position: absolute; 



						left: 1.25em; /* = 20px */ 



						margin-top: 5px; 



						padding: 2px; 



						



						border: 1px solid #EDEFEE; 



						



						background: #fff; 



					}



					.commentlist .comment-meta { 



						font-size: 12px; 



					} 



				.commentlist li .comment_content { 



					margin-left: 4.375em; /* = 70px */ 



				}



					.commentlist li .comment_content p { 



						font-size: 1em; 



					}



					.commentlist li ul { 



						margin: 0; 



					}		



					.commentlist .comment-reply-link { 



						text-decoration: none; 



					}



		



				



				



/*	14. Comment Form Styles



    ........................................................................................................................................ */	



    



    #respond { 



    	padding: 0 1.562em 1.25em 0; /* 25px + 20px */



    }



    .post-content + #respond { 



    	margin-top: 0.937em; /* = 15px */



    }	



    .comment-body + #respond { 



    	padding: 0; 



    }



    	#reply-title { 



    		margin-bottom: 0.4em; /* = 10px */



    		



    		text-transform: none; 



    		font-size: 1.562rem; /* = 25px */



    	}



    	#reply-title #cancel-comment-reply-link { 



    		display: block; 



    	}		



		#respond form[method=post] label, #respond form[method=post] .required { 



			display: none; 



		}



		#respond input[type=text], #respond input[type=email], #respond input[type=url], #respond textarea { 



			padding: 8px 10px; 



		}



		#respond #comment { 



			width: 100%; 



			max-width: 600px; 



			height: 180px; 



		}



		#respond input[type=text], #respond input[type=email], #respond input[type=url] { 



			max-width: 300px; 



		}			



	



	







/*	15. Widgets



    ........................................................................................................................................ */	







	.widget { 



		padding: 0 0; 



		margin: 0 0 3.5em; /* = 56px */		



	}



		.widget:before, 



		.widget:after { 



			content: " "; 



			display: table; 



		}



		.widget:after { 



			clear: both; 



		}



			.widget li { margin-bottom: 0.75em; }



				.widget li ul { margin-top: 0.75em; padding-left: 1em; /* indented children lists */ }



					.widgettitle { 



						margin-bottom: 1.4em; /* = 28px */



						



						font-size: 19.995px;



						font-size: 1.25rem;



						line-height: 1.400em; /* = 28px */



					}



			



		.widget_archive li a, 



		.widget_categories li a, 



		.widget_nav_menu li a, 



		.widget_links li a, 



		.widget_pages li a, 



		.widget_recent_entries li a, 



		.widget_recent_comments li a, 



		.widget_rss li a, 



		.widget_meta li a { 



			display: block; 



		}



		



		/* Search widget */



		.widget_search .search-form .field { 



			width: 100%; 



		}







		/* Menu widget */



		.widget .menu > li { 



			padding: 0; 



		}



		



		/* Fast Flickr */



		.widget_fastflickrwidget .flickr_photo {



			transition: 0.4s transform ease, 0.4s opacity ease; 



			opacity: 0.8;



			position: relative;



		}



		.widget_fastflickrwidget .flickr_photo:hover {



			opacity: 1;



			transform: scale(1.1); 



			z-index: 10;



		}



		



		/* Flickr widget */



		.Simple_Flickr_Photos a { 



			display: block; 



			



			border-bottom: none; 



		}



			.no-touch .Simple_Flickr_Photos a:hover { 



				background: none; 



			}



				.Simple_Flickr_Photos #flickr .flickr_badge_image { 



					float: left; 



				}



					.Simple_Flickr_Photos #flickr img { 



						display: block; 



						width: 65px; 



						height: 65px; 



						margin: 0; 



						padding: 0 7px 7px 0;



						



						border: none;  



					}



					.opacity .Simple_Flickr_Photos img { 



						position: relative; 



						



						opacity: 0.8; 



						transition: 0.4s transform ease, 0.4s opacity ease; 



					}



						.no-touch.opacity #flickr img:hover { 



							opacity: 1; 



						}



						.no-touch.csstransforms #flickr img:hover { 



							transform: scale(1.4); 



							z-index: 10; 



						}



		



		/* Popular posts widget */



		.widget.popular-posts ul { 



			clear: both; 



		}



			.widget.popular-posts ul:before, .widget.popular-posts ul:after { 



				content: "\0020"; 



				display: block; 



				height: 0; 



				



				visibility: hidden; 



			} 



			.widget.popular-posts ul:after { 



				clear: both; 



			}



				.popular-posts ul li { 



					position: relative; 



					clear: both; 



				}



					.popular-posts .wpp-post-title { 



						display: block; 



						



						text-transform: uppercase; 



						font-size: 11px; 



						letter-spacing: 0.05em; 



					}



					.popular-posts .wpp-thumbnail { 



						float: left; 



						margin: 2px 7px 0 0; 



						padding: 6px 7px 6px 6px; 



						



						background: url('images/border-img.png') repeat left top; 



					}



					.no-touch .popular-posts a:hover .wpp-thumbnail { 



						background-color: #0a0a0a; 



					} 



					.popular-posts .post-stats {



						display: block;



						 



						font-size: 0.92em; 



						font-weight: normal; 



					}



					.popular-posts .wpp-author { 



						font-style: normal; 



					}



	



		/* Calendar widget */



		#wp-calendar thead { 



			border-bottom: 1px solid #222; 



		}



		#wp-calendar th, 



		#wp-calendar tbody td { 	



			padding: 3px 6px; 



			text-align: center; 



		}



		#wp-calendar th {



			font-weight: 400;



		}



		#wp-calendar tfoot td { 



			padding-top: 3px; 



		}



		#wp-calendar caption { 



			margin-bottom: 0.750em; /* = 15px */



			



			font-size: 19.995px;



			font-size: 1.25rem; 



			font-weight: 400; 



			text-align: center; 



		}



		



		/* Twitter widget */



		.main-content .widget .tp_recent_tweets {



			float: none;



			clear: none;



		}



			.main-content .widget .tp_recent_tweets li {



				background-image: url('images/main.png');



				background-repeat: no-repeat;	



				background-position: -348px -41px;



				padding-left: 1.562em; /* = 25px */



				padding-bottom: 1.25em; /* = 20px */



				float: none;



				clear: none;



				line-height: 1.75em; /* = 28px */



				



				white-space: -moz-pre-wrap; /* Mozilla */ 



				white-space: -o-pre-wrap; /* Opera 7 */ 



				white-space: pre-wrap; /* CSS 2.1 */ 



				white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ 



				word-wrap: break-word; /* IE */  



			}



			.main-content .widget .tp_recent_tweets ul li:last-child {



				padding-bottom: 0;



			}



				.main-content .widget .tp_recent_tweets li a {



					font-weight: normal;	



				}



				.main-content .widget .tp_recent_tweets .twitter_time {



					color: #999;



					font-size: 12.003px;



					font-size: 0.75rem;



					font-style: italic;	



					font-weight: normal;



				}







				







/*	16. Content Styles



    ........................................................................................................................................ */	



	



	.the-content img, .post-content img {



		margin-bottom: 1.75em; /* = 28px */



	}



	.the-content p a:last-child img,



	.post-content p a:last-child img {



		margin-bottom: 0;



	}



	



	.the-content ul, 



	.the-content ol, 



	.the-content table, 



	.the-content dl { 



		margin: 1.75em 0; /* = 28px */



	}



	.the-content ul, 



	.the-content ol { 



		margin-right: 2.2em;



	}



	.the-content ul { 



		list-style-type: square; 



	} 



	.the-content ol { 



		list-style-type: decimal; 



	}



		.the-content li { 



			margin-bottom: 0.75em; 



		}



		.the-content ol ol, 



		.the-content ul ul { 



			margin-left: 1.75em; 



		}







	.the-content blockquote { 



		margin: 0;



		margin-left: 28px;



		font-style: italic;



		font-family: Georgia, "Times New Roman", Times, serif;



	}



		/* this adds the quote before the blockquote */



		.the-content blockquote:before { 



			float: left;



			margin-left: -.7em; 



			padding: 0 5px 0 0; 



			



			font-family: Georgia, serif; 



			font-size: 2.75em;  



			



			opacity: 0.8; 



			content: "“"; 



		} 



			



	.the-content dl { 



		margin: 1.75em 0 1.75em; /* 28px + 28px */



	}



		.the-content dt { 



			margin-top: 1.25em; 



			font-weight: 500; 



		}



		.the-content dd { 



			margin-top: 0.5em;



			font-style: italic; 



		}



						



	/* table */



	.the-content table { 



		border: 1px solid #e9e9e9; 



		border-collapse: collapse; 



		



		background: #fff; 



		



		text-shadow: none; 



	}



		.the-content tr:nth-of-type(odd) { 



			background-color: #eff3f4;; /* zebra style table */



		} 



		.the-content th, 



		.the-content td { 



			padding: 0.562em 1.375em; /* 9px + 22px */



			border: 1px solid #e9e9e9;



		}



		.the-content th { 



			text-transform: uppercase; 



			font-weight: normal; 



		}



		.the-content caption { 



			font-size: 19.995px;



			font-size: 1.25rem; 			



			font-weight: bold; 



		}



			



	.the-content b, 



	.the-content strong { 



		font-weight: bold; 



	}



			



	/* pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } */



	.the-content pre {



		overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */



		white-space: pre-wrap; /* css-3 */



		white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */



		white-space: -pre-wrap; /* Opera 4-6 */



		white-space: -o-pre-wrap; /* Opera */



		width: 99%;



		word-wrap: break-word; /* IE */ 



	}



	.the-content pre { 



		overflow: auto; 



		overflow-y: hidden;  /* Hides vertical scroll created by IE */ 



		



		border-left: 6px solid #F5D995; 



		border-top-left-radius: 2px; 



		border-bottom-left-radius: 2px;  



		



		background: #fff url('images/pre-code-bg.png') repeat left top;



		



		text-shadow: none; 



	}



		.the-content pre code {



			margin: 0 0 0 2.5em; /* = 40px */



			padding: 1.125em 0; /* = 18px */



			display: block;



			 



			color: #443325; 



		}



				



	.the-content video {



		display: block; 



		margin: 1.75em 0; /* = 28px */



		max-width: 100%;



	}



	.the-content object { 



		display: block; 



		margin: 1.75em 0; /* = 28px */



		max-width: 100%; 



	}



								



	/**



	 * WordPress built-in image-related classes



	 */



	img.alignright, 



	.wp-caption.alignright { 



		float: right; 



		margin: 0 0 1em 1em; 



	}



	img.alignleft, 



	.wp-caption.alignleft { 



		float: left; 



		margin: 0 1em 1em 0; 



	}



	img.aligncenter, 



	.wp-caption.aligncenter { 



		display: block; 



		margin-left: auto; 



		margin-right: auto; 



	}



	a img.alignright { 



		float: right; 



		margin: 0 0 1em 1em; 



	}



	a img.alignleft { 



		float: left; 



		margin: 0 1em 1em 0; 



	}



	a img.aligncenter { 



		display: block; 



		margin-left: auto; 



		margin-right: auto; 



	}



			



	.wp-caption { 



		width: auto !important;



		max-width: 100% !important;



		margin-bottom: 1.75em; /* = 28px */



						



		text-shadow: none;



		text-align: center; 



		font-style: italic; 



	 }



		.wp-caption img, 



		.wp-caption img a { 



			margin: 0 !important; 



			padding: 0; 



			



			border: 0 none; 



		}



		.wp-caption .wp-caption-text { 



			padding: 1px 4px; 



			margin: 0; 



			font-size: 0.9rem;



			font-family: "Roboto Slab",Georgia,serif;	



			line-height: 1.5em;



		}



	



	/**



	 * Default WordPress Gallery



	 */



	.gallery {



		float: left;



		margin-bottom: 1.75em !important; /* = 28px */ 



	}



		.gallery br {



			display: none;



		}



		.gallery .gallery-item {



			margin: 0 !important;



			width: 100%;



			float: left;



			position: relative; 



			overflow: hidden;



		}	



		.gallery-columns-2 .gallery-item { 



			width: 50% !important; 



		}



		.gallery-columns-3 .gallery-item { 



			width: 33.3% !important; 



		}	



		.gallery-columns-4 .gallery-item { 



			width: 25% !important;



		}



		.gallery-columns-5 .gallery-item { 



			width: 20% !important;



		}



		.gallery-columns-6 .gallery-item { 



			width: 16.666% !important;



		}



		.gallery-columns-7 .gallery-item { 



			width: 14.285% !important;



		}



		.gallery-columns-8 .gallery-item { 



			width: 12.5% !important;



		}



		.gallery-columns-9 .gallery-item { 



			width: 11.111% !important;



		}



			.gallery-icon {



				margin-top: 0 !important;



				width: 100%;



				position: relative; 



				overflow: hidden;



			}



			.gallery .gallery-caption {



				width: 100%;



				position: absolute;



				bottom: 0;



				background: #000;



				background: rgba(0,0,0,0.5); 



				padding: 3px 5px; 



				color: #fff;



			}



				.gallery-item a { 



					display: block;



					border: none; 



					margin: 0; 



					padding: 0; 



				}



					.gallery-item a:after { 



						position: absolute;



						display: block;



						width: 100%;



						height: 100%;



						left: 0;



						top: 0;



						



						background: rgba(255, 255, 255, .5);



						



						opacity: 0;



						content: "";



						



						transition: 0.3s all ease;



					}



						.no-touch .gallery-item a:hover:after {



							opacity: 1;



							padding: 0;



						}



							.gallery-item img { 



								margin: 0 !important; 



								padding: 0; 



								



								transition: 0.3s all ease;



							}



							.gallery .gallery-icon img {



								display: block;



								border: none !important;



							}



								.no-touch .gallery-item a:hover img {



									transform: scale(1.1) rotate(-3deg);



								}



	



	/**



	 * Text meant only for screen readers



	 */



	.screen-reader-text {



	  	clip: rect(1px, 1px, 1px, 1px);



	  	position: absolute !important;



	  	height: 1px;



	  	width: 1px;



	  	overflow: hidden;



	}



	.screen-reader-text:focus {



	  	background-color: #f1f1f1;



	  	border-radius: 3px;



	  	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);



	  	clip: auto !important;



	  	color: #21759b;



	  	display: block;



	  	font-size: 0.875em;



	  	font-weight: bold;



	  	height: auto;



	  	left: 5px;



	  	line-height: normal;



	  	padding: 15px 23px 14px;



	  	text-decoration: none;



	  	top: 5px;



	  	width: auto;



	  	z-index: 100000;



	  	/* Above WP toolbar. */



	}							















/*  17. Plugins



    ........................................................................................................................................ */



	



	/**



	 * Soliloquy Slider Plugin



	 */



	.soliloquy-container img {



		margin-bottom: 0;



	}



	



	/**



	 * Lightbox Plugin



	 */



	html #swipebox-caption, #swipebox-action { border-color: transparent !important; }



	html #swipebox-action {



		top: -50px;



		bottom: auto !important;



	}



	html #swipebox-action.visible-bars {



		top: 0;



		bottom: auto !important;



	}



	html #swipebox-action.force-visible-bars {



		top: 0 !important;



		bottom: auto !important;



	}



	html #swipebox-caption {



		bottom: -50px;



		top: auto !important;



	}



	html #swipebox-caption.visible-bars {



		bottom: 0;



		top: auto !important;



	}



	html #swipebox-caption.force-visible-bars {



		bottom: 0 !important;



		top: auto !important;



	}



	



	/**



	 * Metaslider Plugin



	 */



	.metaslider img {



		margin-bottom: 0;	



	}	



	.metaslider ol, .metaslider ul {



		margin: auto;



		line-height: 0;



	}	



		/* Prev/Next */



		.metaslider .flex-direction-nav a {



			margin: -17px 0 0;



			opacity: .4;



			border-radius: 50px;



			transition: all .3s ease;



			background: #fefefe;



		}



		.metaslider .flex-direction-nav .flex-next {



		 	background-position: 100% 0; 



		 	right: 10px; 



		}



		.metaslider .flex-direction-nav .flex-prev {



			left: 10px;



		}



			.metaslider .flexslider:hover .flex-next { 



				opacity: 0.7;



				right: 10px; 



			}



			.metaslider .flexslider:hover .flex-prev {



				opacity: 0.7; 



				left: 10px;



			}



				.metaslider .flex-direction-nav a:after {



					content: "";				



					position: absolute;



					display: block;



					top: 50%;



					left: 50%;



					margin-top: -6px;



					width: 0;



					height: 0;



				}



				.metaslider .flex-direction-nav .flex-prev:after {



					margin-left: -4px;



					border-top: 6px solid transparent;



					border-right: 6px solid #333;



					border-bottom: 6px solid transparent;



				}



				.metaslider .flex-direction-nav .flex-next:after {



					margin-left: -2px;



					border-top: 6px solid transparent;



					border-left: 6px solid #333;



					border-bottom: 6px solid transparent;



				}



				



		/* Slider pagination */



		.metaslider .flex-control-paging li a {



			background: #c5c5c5;



			box-shadow: none;



	    }   



	    



	    .metaslider .flex-control-paging li a.flex-active { 



	    	background: #2e2e2e; 



		}	



	



	/**



	 * Cyclone Slider Plugin



	 */



	.cycloneslider.cycloneslider-template-standard {



		margin-bottom: 3.5em; /* = 56px */



	}



		.cycloneslider.cycloneslider-template-standard .cycloneslider-pager {



			bottom: -30px;



		}



			.cycloneslider.cycloneslider-template-standard .cycloneslider-pager span {



				background: #e0e0e0;



				box-shadow: none;



			}	



			.cycloneslider.cycloneslider-template-standard .cycloneslider-pager span.cycle-pager-active {



				background-color: #2e2e2e;



			}



	



	/**



	 * MapPress Plugin



	 */



	.mapp-layout { 



		border: none !important;



		margin: 0 0 1.75em 0 !important; /* = 28px */



	}



		.mapp-map-links {



			background-color: none !important;



			border: none !important;



		}



	



	/**



	 * Contact Form 7 Plugin



	 */



	.wpcf7 p {



		margin-bottom: 1.75em; /* = 28px */



	}



	.wpcf7 div.wpcf7-response-output {



		margin: 2em 0 1em;



	}



	.wpcf7 span.wpcf7-not-valid-tip {



		position: absolute;



		top: 20%;



		left: 20%;



		z-index: 100;



		background: none;



		border: none;



		font-size: 9pt;



		width: 200px;



		padding: 0 0 2px;



		color: #ff0000;



	}



	



	/* Disable the default margin introduced by WordPress' admin bar */



	html[lang] {



		margin-top: 0 !important;		



	}















/*  18. Search



    ........................................................................................................................................ */



		    



	.search-post-title { 



		text-align: center;



		margin: 0;



	}



		.search-post-title a { 



			display: block;



			padding: 0.703em 0; /* 20px / 28.430px */



			border-bottom: 1px solid #e6e6e6;



			



			text-align: left;



		}



			.search-results .search-post-title:first-child a { 



				border-top: 1px solid #e6e6e6;



			}



			.search-results .search-post-title:last-child a { 



				border-bottom: none;



			}



				.no-touch .search-post-title a:hover {



					box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);



					background: #fff;



				}



													



		



					



/*  19. Footer



    ........................................................................................................................................ */



	



	.footer { 



		float: left;



		width: 100%;



		position: relative;



		padding: 1.75em 0 3.5em 220px; 	



	}



		.footer p {



			float: left;



		}



			.footer small { 



				display: block;



				border-bottom: 1px solid #ccc;



			}



				.footer p small:last-child {



					border-bottom: none;



				} 







						



								



/*  20. Media Queries



    ........................................................................................................................................ */



    



    /**



    * Target Retina Devices



	*/



    @media (min--moz-device-pixel-ratio: 1.5),



       (-o-min-device-pixel-ratio: 3/2),



       (-webkit-min-device-pixel-ratio: 1.5),



       (min-device-pixel-ratio: 1.5),



       (min-resolution: 144dpi),



       (min-resolution: 1.5dppx) {



		



		.menu-indicator span,



		.header-buttons .tagline-button,



		.contents .widget .tp_recent_tweets li,



		.social-and-search a:after,



		.main-search-form .main-search-submit,



		.header-buttons .menu-button {



			/* Reference the @2x Sprite */



			background-image: url("images/main_@2x.png");



			/* Translate the @2x sprite's dimensions back to 1x */



			background-size: 500px 200px; 



		}



		



		.dropdown-container {



			background-image: url("images/dark_wall_@2X.png");



			background-size: 300px;



		}



		



		.header-buttons .tagline-button {



			background-position: -88px 7px;



		}



		



		.view-button {								



			text-indent: 0%; 



			white-space: normal;



		}



		



		.view-button { 



			background: rgba(255, 255, 255, 0.2);



					



			opacity: 0;	



				    							



			transform: rotateY(220deg) rotate(45deg);



			transition: all .4s ease;



		}



			.no-touch .project-link:hover .view-button {



				transform: rotateY(0deg) rotate(45deg);



				opacity: 1;



			}



				



		input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 



		textarea { 



			border: 1px solid #e3e5e5;



		}



		input[type="text"]:focus, 



		input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 



		textarea:focus, 



		select:focus { 



			border-color: #cecece; 



		}



		



		.footer small {



			border-color: #e3e5e5;



		}



		



		/* Slider pagination */



		.metaslider .flex-control-paging li a {



			background: #e0e0e0;



			box-shadow: none;



	    }  



	}



	



	/**



    * The main breakpoint



	*/



	@media only screen and (max-width: 940px) {



		.header {



			padding-bottom: 5.25em; /* = 84px */



			margin-bottom: 4.375em; /* = 70px */



		}



			.header:after {



				position: absolute;



				bottom: 0;



				left: 50%;



				width: 80px;



				margin-left: -40px;



				height: 2px;



				



				background: #222;



				



				content: " ";



			}



				.oy-logo, 



		    	.header-secondary {



				    display: block;			



			    }



			    /**



				 * Logo



				 */		



			    .oy-logo {



					margin: 56px auto 28px;	



					width: auto;



			    }



					.oy-logo a {



				    	display: block;



				    	margin-right: 0; 



				   	}



				   		.oy-logo img {



				   			display: block;



				   			margin: 8px auto;



				   		}



				   		.oy-logo .textual-logo {



				   			text-align: center;



				   	    }



				    /**



					 * Social links



					 */		



					.social-and-search { 



						float: left; 



						position: relative; 



						left: 50%; 			



					}



					.social-and-search.social-exists {



						margin-left: 0;



					}



						.social-and-search li { 



							float: left; 



							position: relative; 



							right: 50%; 



						}



						.social-and-search li:first-child {



							margin-left: 23px;



						}



							.social-and-search a { 



								display: block; 					



							}



						.social-and-search .search-item {



							display: none;



						}



							.search-item .main-search-form .main-search-field {



								top: 10px;



							}



							.main-search-form .main-search-submit {



								bottom: -36px;



							}	 



					



				/**



				 * Mobile Search Field



				 */			



				.mobile-search {



					display: block;



					margin-left: 0;



				}



					.mobile-search form {



						width: 200px;



						margin: 0 auto;



					}			  	    



				 



				/**



				 * Tagline and mobile menu buttons



				 */



			    .header-buttons.menu-and-tagline .tagline-button {



					position: relative;



					right: 40px;



				}



				.header-buttons .menu-button {



					visibility: visible;



				}



				.header-buttons .menu-button:only-child {



					left: 0;



				}



		



		



		.table-wrapper {



			display: block;



		}



			.menu-container {



				display: none;



			}



			.main-content {



				display: block;



				max-width: 100% !important;



				width: auto !important;



				float: none !important;



				margin: 0 auto;



			}



				.single-portfolio-container:after {



					width: 80px;



					margin-left: -40px;



				}



				.pf-gallery-container {



					margin-right: 2.5em;



				}



					.pf-adjuster {



						position: relative;



						width: 690px;



						margin: 0 auto;



						left: 5px;



						padding-right: 0;



					}



					



						.item-title,



						.search-results p,



						.search-results a {



							text-align: center;



						}



					



						/**



						* Meta Post Info (Client, Skills...) 



						*/	



						.meta-column {



							float: left;



							width: 100%;



							margin-right: 0;



							



							text-align: center;



						}



						/* one item */



						.project-meta.oy-1-cols .meta-column {



						    width: 100%;



						}



						/* two items */



						.project-meta.oy-2-cols .meta-column {



						    width: 50%;



						    padding: 0 1%;



						}



						/* three items */



						.project-meta.oy-3-cols .meta-column {



						    width: 32%;



							margin-right: 2%;



						}	



						/* four items */



						.project-meta.oy-4-cols .meta-column {



						    width: 25%;



						    padding: 0 1%;



						}	



						.meta-column:last-child {



							margin-right: 0 !important;



							padding-right: 0 !important;



						}



							.meta-column strong {



								display: block;



							}



								.meta-column .colon {



									display: none;



								}						  		      	



		



		/**



		 * Copyright 



		 */			



		.footer {



			padding-left: 0;



		}



			.footer p {



				float: none;



				text-align: center;



			}



				.footer small {



					border-bottom: none;



				}



	}



	



	@media only screen and (max-width: 780px) {



		.pf-adjuster {



			width: 600px;



		}



	}



	



	@media only screen and (max-width: 680px) {



		.pf-adjuster {



			width: 460px;



		}	



	}



		



	@media only screen and (max-width: 710px) {



		.page-template-template-page-with-sidebar-php .page-content, .blog-with-sidebar { 



			width: 100%;



			float: none;



			padding-right: 0;



		}



		.page-template-template-page-with-sidebar-php .sidebar, .sidebar { 



			width: 100%;



			float: none; 



		}	



	}



	



	@media only screen and (max-width: 600px) {				



		.main-container {



    		padding: 0 1.875em 0 1.875em; /* 30px + 30px = 60px */



		}



		



		.page-template-template-portfolio-php .header,



		.single-portfolio .header,



		.tax-portfolio_category .header,



		.single-portfolio-container {



			margin-right: 1.875em; /* = 30px */



		}



		.page-template-template-portfolio-php .footer,



		.single-portfolio .footer,



		.tax-portfolio_category .footer {



			padding-right: 1.875em; /* = 30px */



		}



		



			.pf-gallery-container {



				margin-right: 1.875em; /* = 30px */



			}



			



			.post-content {



				float: none;



				width: 100%;



			}



			.post,



			.single-post-content {



				margin-bottom: 3.5em; /* = 56px */



			}



			.date-circle {



				display: none;



			}



	}



	



	@media only screen and (max-width: 580px) {	



		.project-meta .meta-column {



			width: 100% !important;



			padding-bottom: 0.875em !important; /* 14px */



		}



	}



	



	@media only screen and (max-width: 500px) {



		.pf-adjuster {



			width: 300px;



		}



	}



		



	@media only screen and (max-width: 470px) {	



		.pager li {



			float: none;



			display: block;



			margin: 0 auto 10px;



		}



			.pager li a {



				text-align: center;



			}



			.pager li span {



				display: block;



				text-align: center;



			}



	}



	



	@media only screen and (max-width: 400px) {



		.social-and-search li:first-child {



			margin-left: 14px;



		}



		.social-and-search a {



			width: 37px;



		}



	}



	



	@media only screen and (max-width: 380px) {



		.main-container {



    		padding: 0 1.333em 0 1.333em; /* 20px + 20px = 40px */



		}



		



		.page-template-template-portfolio-php .header,



		.single-portfolio .header,



		.tax-portfolio_category .header,



		.single-portfolio-container {



			margin-right: 1.333em; /* = 20px */



		}



		.page-template-template-portfolio-php .footer,



		.single-portfolio .footer,



		.tax-portfolio_category .footer {



			padding-right: 1.333em; /* = 20px */



		}



		



			.pf-gallery-container {



				margin-right: 1.333em; /* = 20px */



			}



				.pf-adjuster {



					width: 230px;



				}



	}







	@media only screen and (max-width: 350px) {



		.gallery .gallery-item {



			margin: 0 0 20px 0 !important;



			width: 100% !important;



			float: none;



		}	



	}		







	/*  Portfolio Grid



    	................................................................ */



		



		@media only screen and (min-width: 500px) {



			.portfolio-gallery .portfolio-item { width: 230px; }



		}



		@media only screen and (min-width: 680px) and (max-width: 780px) {



			.portfolio-gallery .portfolio-item { width: 200px; }



		}



		



	



		



/*  21. Animations



    ........................................................................................................................................ */



		



	.cssanimations .oy-logo {



		animation: bounceInLeft .7s .9s 1 both ease-in-out;



	}



	



	.cssanimations .header-buttons {



		animation: fadeInTop .6s .9s 1 both ease-in-out;



	}



				



	.cssanimations .menu-indicator {



		transform: translateX(-50px);



		animation: slideIn .6s .2s 1 both ease-in-out;



	}



	



	.cssanimations .social-and-search,



	.cssanimations .mobile-search {



		animation: fadeInTop .5s .9s 1 both ease-in-out;



	}



	



	@keyframes bounceInLeft {



		0% {



			opacity: 0;



			transform: translateX(-2000px);



		}	



		60% {



			opacity: 1;



			transform: translateX(30px);



		}



		



		80% {



			transform: translateX(-10px);



		}



		



		100% {



			transform: translateX(0);



		}



	}



	



	@keyframes fadeInTop {



		0%{



	    	transform: translateY(-20px);



			opacity: 0;



		}



		100%{



	    	transform: translateY(0);



			opacity: 1;



		}



	}



		



	@keyframes slideIn {



		0%{



	   		transform: translateX(-50px);



	    }



		100%{



	    	transform: translateX(0);



	    }



	}







	@keyframes tinywiggle {



    	25%, 50%, 75%, 100% { transform-origin: top center; }



    	25%{ transform: rotate(4deg) }



    	50%{ transform: rotate(-2deg) }



    	75%{ transform: rotate(1deg) }



    	100%{ transform: rotate(0deg)} 



    }



    



    @keyframes wiggle {



    	25%, 50%, 75%, 100% { transform-origin: top center; }



    	25%{ transform: rotate(8deg) }



    	50%{ transform: rotate(-4deg) }



    	75%{ transform: rotate(1deg) }



    	100%{ transform: rotate(0deg)} 



    }



        



    @keyframes boing {



    	0%{ transform: scale(1) }



    	35%{ transform: scale(1.15) }



    	70%{ transform: scale(0.9) }



    	100%{ transform: scale(1) }



    }







	.animated { 



		-webkit-animation-fill-mode: both;



		-moz-animation-fill-mode: both;



		-ms-animation-fill-mode: both;



		-o-animation-fill-mode: both;



		animation-fill-mode: both;



		-webkit-animation-duration: 1s;



		-moz-animation-duration: 1s;



		-ms-animation-duration: 1s;



		-o-animation-duration: 1s;



		animation-duration: 1s;



	}