/*
	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;
	}
	
	ol, 
	ul { 
		list-style: none inside none; 
		margin: 0; 
		padding: 0;
	}
	
	small {
		font-size: 70%;
	}
	
	/* Remove empty paragraphs */
	p:empty { 
		display: none; 
	} 
	
	/* Highlighted text */
	::selection { 
		background: #dcdcdc; 
		
		color: #222; 
		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: #a9a9a9;
		text-decoration: none;
				
		transition: .2s all ease;
    }   
    
		.no-touch a:hover {
			color: #2e2e2e;
		}



/*	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" , Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
		font-size: 18px; 
		font-size: 1rem;
		font-weight: 300;
		line-height: 28px;
		line-height: 1.7em; /* =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: 37.897px;
		font-size: 2rem;
		line-height: 1.477em; /* = 56px */
		line-height: 1em; /* = 45px */
		letter-spacing: .1em;
		margin-bottom: 0.3em; /* =28px */
	}
	h2, 
	.h2 { 
		font-size: 28.430px;
		font-size: 1.5rem; 
		line-height: 1.969em; /* = 56px */
		line-height: 1.301em; /* = 37px */
		letter-spacing: .1em;
		margin-bottom: 0.984em;
	}
	h3, 
	.h3 { 
		font-size: 21.328px;
		font-size: 1.333rem; 
		line-height: 1.312em; /* = 28px */
		letter-spacing: .1em;
		margin-bottom: 1.312em;
	}
	h4, 
	.h4 { 
		font-size: 16px; 
		font-size: 0.9rem;
		line-height: 1.7em; /* = 28px */
		letter-spacing: .1em;
	}
	h5, 
	.h5 { 
		font-size: 16px; 
		font-size: 0.8rem;
		letter-spacing: .1em;		
		line-height: 1.5em; /* = 28px */
	}
	h6,
	.h6 { 
		font-size: 11px;
		font-size: 0.8rem; 
		line-height: 1.4em;
		letter-spacing: .1em;
	}
	
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 { 
		font-family:"Roboto" , Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-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 */	
		
		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: .8rem;
					font-family: 'Roboto', Futura, Helvetica Neue, Helvetica, sans-serif;
					font-weight: 400;
					text-transform: uppercase;
					letter-spacing: .2em;
				}
					.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%;
	}
		.portfolio-gallery .portfolio-item { 
			float: left;
			width: 100%;
		} 		
			.portfolio-gallery .project-link {
				display: block;
				
				overflow: hidden;
			}
				.portfolio-gallery .project-title {
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -130px;
					margin-top: 80px;
					width: 100%; 
					height: 100%; 					
					font-size: 0.5rem;
					text-align: right;
					letter-spacing: 0.1em;
					color: #606060;			
					}

				.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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
						font-size: 27px;
						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 0.5em; /* = 28px */
			}	
				.meta-column {
					float: left;
					margin-right: 1.25em /* = 20px */
				}
					.meta-column strong {
						font-size: 0.5rem;
					}
			


/*	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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 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: 13px;
							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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-size: 10px;
		font-size: .7rem;
		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 th, 
		.the-content td { 
			padding: 0.5em 1em; /* 9px + 22px */
			border: 1px solid #e9e9e9;
		}
		.the-content th { 
			text-transform: uppercase; 
			font-weight: normal; 
		}
		.the-content caption { 
			font-size: 16px;
			font-size: 0.9rem; 			
			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: 0 4px 5px; 
			margin: 0; 
			font-family: Georgia, "Times New Roman", Times, serif;		
		}
	
	/**
	 * 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;
	}