/*
	Theme Name: Tao2
	Theme URI: http://themeforest.net/user/onioneye
	Description: A Premium Portfolio Wordpress Theme.
	Author: 
	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.1.1
	
	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. Pages
  	13. Blog
  	14. Comment Styles
  	15. Comment Form Styles
  	16. Widgets
  	17. Content Styles
  	18. Plugins
  	19. Search
  	20. Footer
  	21. Media Queries
  	22. Animations
  	
*/

/*  1. Main Base Styles
    ........................................................................................................................................ */
    
    *, 
    *:before, 
    *:after { 
    	box-sizing: border-box; 
    }
    
    * {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
	}
    
    html,
	body {
		height: 100%;
		overflow: hidden;
		padding: 0;
		margin: 0;
	}
	
	body { 
		background-color: #0C0C0C;
		background-image: url("images/dark_wall.png");
		
		perspective: 2000px;
		perspective-origin: 50% 50%;
	}
	
	ol, 
	ul { 
		list-style: none inside none; 
		margin: 0; 
		padding: 0;
	}
	
	/* 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;
		}



/*	3. Images
    ........................................................................................................................................ */
	
	img { 
		max-width: 100%; 
		height: auto;
		
		border: 0; 
		
		-ms-interpolation-mode: bicubic;	
	}
	 
      
   	    
/*  4. Technical and Creative Typography
    ........................................................................................................................................ */		
    
    /*
	$fontbase = 16
	$line-height-base = 28
	*/
	
	/* maxvoltar.com/archive/-webkit-font-smoothing */
	html { 
		-webkit-font-smoothing: antialiased; 
	} 
	
	body, 
	button, 
	input, 
	textarea {
		font-family: 'Lora', Georgia, serif;
		font-size: 16px;
		line-height: 1.75; /* $line-height-base ÷ $fontbase */
		color: #2b2b2b;
	}		 
		
	b, 
	strong { 
		font-weight: 800; 
		color: #191919; 
	}
	
	p, 
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 { 
		margin: 0 0 20px 0; 
	}
	
	h1, 
	.h1 { 
		font-size: 38px;
		line-height: 40px;
	}
	h2, 
	.h2 { 
		font-size: 34px;
		line-height: 40px;
	}
	h3, 
	.h3 { 
		font-size: 30px; 
		line-height: 40px;
	}
	h4, 
	.h4 { 
		font-size: 26px; 
		line-height: 40px; 
	}
	h5, 
	.h5 { 
		font-size: 22px; 
		line-height: 40px; 
	}
	h6, 
	.h6 { 
		font-size: 18px; 
		line-height: 20px; 
	}
	
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 { 
		font-family: "Istok Web", Arial, Helvetica, sans-serif;
		font-weight: normal;
	}
	
	/* zoomable baseline grid - type size presets */
	.small { 
		font-size: 13px; 
		line-height: 20px; 
	}
	.normal { 
		font-size: 16px; 
		line-height: 20px; 
	}
	.medium {
		font-size: 20px; 
		line-height: 20px; 
	}
	.large { 
		font-size: 24px; 
		line-height: 40px; 
	}
	.huge {	
		font-size: 52px; 
		line-height: 60px; 
	}
	.massive { 
		font-size: 68px; 
		line-height: 80px; 
	}
	.gigantic {	
		font-size: 110px; 
		line-height: 120px; 
	}



/*  5. Forms
    ........................................................................................................................................ */
    
	fieldset {
		margin: 0 0 20px 0;
		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: 250px; 
		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: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
		font-size: .78em;
		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"]: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; 
	}														   
	input[type="submit"]:active, 
	button:active, 
	input[type="button"]:active { 
		position: relative; 
		top: 1px; 
	}														   												 
	
	/* style the text inputs only */
	input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]), 
	input[type="text"], 
	select, 
	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
    ........................................................................................................................................ */
    
    .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
    ........................................................................................................................................ */
    
	.contents {
		transform-origin: 50% 50%;
		transform: translateX(0) rotateY(0deg);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	
		background: #f6f6f6;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	.css3d .contents {
		transform: translateX(260px) rotateY(-30deg);
	}
		.contents .hide-overflow {
			overflow: hidden;
		}
			.contents .padding-container {
				padding: 0 40px;
			}	
				.contents .main-container { 
					max-width: 940px;
					margin: 0 auto;
				}		
				.scrollable {
					-webkit-overflow-scrolling: touch;
				}
					.scrollable > nav {
						padding-bottom: 80px;
					}



/*  8. Header
    ........................................................................................................................................ */		
        
    .header {
    	position: relative; 
    }
    	.header .header-primary-content { 
    		display: table;
    		width: 100%;
    		position: relative; 
	    	padding: 40px 0;
	    	margin-bottom: 40px;
    
			border-bottom: 1px solid #e6e6e6; 
    	} 
	    	/* Border shadow */
	    	.header .header-primary-content:after { 
		    	content: " ";
		    	position: absolute;
		    	z-index: -1; 
		    	bottom: -2px;
		    	left: 0;
		    	width: 100%;
		    	height: 1px;
		    	
		    	background: rgba(255, 255, 255, .5);
	    	}
	    		.logo, .header-buttons {
		    		display: table-cell;
		    		vertical-align: middle;
	    		}
	    			
	    		/**
				 * Logo
				 */
	    		.logo {
		    		width: 70%;
	    		}
		   			.logo a {
		    			display: inline-block;
						
						color: #444652;
						text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
						font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
		   			}
			    		.no-touch .logo a:hover {
							animation: tinywiggle 220ms ease-out;
						}
			    
			    /**
				 * Search and Contact/Info Section
				 */
			    .header-buttons {
			    	width: 30%;
			    } 
				    .buttons-container {
					    display: block;
			    		position: relative;
			    		float: right;
				   		width: 68px;
				   		height: 29px;
				    }
				    .header-buttons.contact-excluded .buttons-container {
				    	width: 29px;
				    }
				    .header-buttons.contact-excluded .input-wrap {
				    	right: 5px;
				    }
				    	/* Search and Close Buttons */
				    	.search-icon, .close-search {
							display: block;
			    			position: relative;
			    			float: left;
				    		width: 29px;
				    		height: 29px;
				    						    		
				    		background: url("images/main.png") no-repeat -300px 0;
					    	
					    	cursor: pointer;	    	
					    }
						    .close-search {
					    		float: none;
								position: absolute;
								top: -1px;
								left: -1px;
								
								background-position: -350px 0;
																
								opacity: 0;
								transition: .3s opacity ease, .3s transform ease;
							}
						
							/* Main Search Form */		
						    .main-search-form .input-wrap {
						    	width: 0;
						    	margin: 0;
								position: absolute;
								right: 45px;
								height: 29px;
								
								overflow: hidden;
								transition: width .4s cubic-bezier(0.785, 0.135, 0.150, 0.860);
							}
							    .header-primary-content .header-buttons .main-search-form .input-wrap .main-search-field {
									width: 200px;
									height: 29px;
									padding: 4px 26px 4px 10px;
									
									border-radius: 50px;
									
									line-height: 1 !important;									
									opacity: 0;
									transition: opacity .4s cubic-bezier(0.785, 0.135, 0.150, 0.860);
							    }
									.header-primary-content .header-buttons .main-search-form .input-wrap .main-search-field:focus {
										border-color: #e3e5e5;
									}
						
						/* On Search Button Click/Activate */	
						.search-active + .search-icon {
							opacity: 1;
						}		
							.search-active + .search-icon .close-search {
								opacity: 1;
								transform: rotate(180deg);
							}
								.search-active .input-wrap {
									width: 200px !important;
								}
									.search-active .main-search-field {
										opacity: 1 !important;
									}
					    
				    	/* Contact Button */
			    		.contact-icon {
			    			display: block;
			    			position: relative;
			    			float: right;
				    		width: 29px;
				    		height: 29px;
				    						    		
				    		background: url("images/main.png") no-repeat left top;
				    		
				    		cursor: pointer;
			    		}
				    		.header-icon:after {
							  	content: " ";
							  	position: absolute;
							  	box-sizing: content-box;
							  	left: -3px;
							  	top: -3px;
							  	padding: 3px;
							  	width: 28px; 
							  	height: 28px;
							  	
							  	border-radius: 50px;
							  	box-shadow: 0 0 0 2px rgba(60, 60, 60, 0.7);
							  	
							  	transform: scale(1.2);
							  	transition: 0.2s 0.02s;
							  	opacity: 0;
							}
								.no-touch .header-icon:hover:after {
								  transform: scale(1);
								  opacity: 1;
								}
						
						/* Contact Information */	
						.contact-content { 
							position: absolute; 
							z-index: 20; 
							top: 20px;
							right: -1px;
							margin: 25px 0 0 0; 
							padding: 45px;
							width: 32em; 
							
							border-radius: 1px;
							box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
							
							background: #2f2e2a; 
							
							color: #ccc;
							
							/* hide by default */
							display: none;
							opacity: 0;
						}						
							/* triangle */
							.contact-content:before { 
								content: ""; 
								display: block; 
								position: absolute; 
								top: -5px; 
								right: 5px; 
								
								border-bottom: 12px solid #2a2a2a; 
								border-right: 12px solid transparent; 
								border-left: 12px solid transparent; 
							}	
								
								/**
								 * Contact/Info Section
								 */							
								.close-contact {
									position: absolute;
									top: 0px;
									right: 0;
									padding: 10px;
									
									font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
									font-size: 23px;
									font-weight: bold;
									line-height: 18px;
									color: #efeff0;
									
									opacity: .3;
									cursor: pointer;
									transition: .2s opacity ease;
								}
									.close-contact:hover {
										opacity: .6;
									}
							
								/**
								 * Mail/Telephone/Location
						    	 */		
								.contact-content li {
									position: relative;
									padding-left: 45px; 
									min-height: 33px; 
									margin: 0 0 15px 0; 
								}
									.contact-content li:last-child {
										margin-bottom: 0;
									}	
										.contact-information:before { 
											content: " "; 
											display: block; 
											position: absolute; 
											top: 5px; 
											left: 0;  
											width: 30px; 
											height: 30px; 
											
											background: url("images/main.png") no-repeat top left;
										}
										.my-mail:before { 
											background-position: -100px 0; 
										}
										.telephone:before { 
											background-position: -150px 0; 
										}
										.location:before { 
											top: 3px;
											background-position: -200px 0; 
										}
											.contact-content li a { 
												border-bottom: 1px solid transparent; 
												color: #fff; 
											}
											.no-touch .contact-content li a:hover { 
												border-bottom-color: white;
												color: white; 
											}
										
 
        /**
		* Tagline
		*/
		.header .tagline { 
			margin-bottom: 40px;  	
			
			font-size: 24px;
			line-height: 40px;
	    	font-family: 'Merriweather', Georgia, serif;
	    	font-weight: 300;
	  	}
        
        
 
/*  9. Menu
    ........................................................................................................................................ */	
    
    /**
	* Mobile Menu Icon
	*/
    .alt-menu-pos {
		position: relative; 
		float: left; 
		left: -40px; 
		
		cursor: pointer;
	}
	    .alt-menu-trigger {
			display: block;
			position: absolute;
			z-index: 9999;
			top: 10px;
			left: 15px;
			width: 40px;
			height: 30px;
			
			background: url('images/main.png') no-repeat -50px 0;	
			
			opacity: 0;
			
			transition: 0.4s all ease;					
		}
		.alt-menu-trigger:after {
			content: "";
			position: absolute;
			margin: 2px 0 0 35px;
			width: 0; 
			height: 0; 
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
			
			border-left: 7px solid #2e2e2e;
			
			opacity: 0;
	    }
    
    /**
	* Off page menu container
	*/
	.menu-container {
		width: 260px;
		height: 100%;
		position: fixed;
		display: block;
		opacity: 0;
		z-index: 1;
		transform-origin: 0% 50%;
		transform: translateX(-260px) rotateY(-30deg);
		transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	
		padding: 20px;
		overflow: auto;
		
		background-color: #0C0C0C;
		background-image: url("images/dark_wall.png");
		
		color: #eee;
		z-index: 100 !important; /* override the z-index declaration given in the meny script */		
	}
		.css3d .menu-container {
			transform: translateX(0px) rotateY(0deg);
		}
	
		/**
		 * Secondary Logo
		 */
		.secondary-logo-container {
	    	padding-bottom: 20px;
			margin-bottom: 25px;
					
			border-bottom: 1px solid #383838;
		}
			.secondary-logo-link { 
				display: inline-block;
				position: relative;
				padding: 10px 0 0;
			 
				font: normal 400 36px/40px 'Merriweather', Georgia, "Times New Roman", Times, serif; 
				color: #CECECE;
				text-shadow: 1px 1px #000, 0px 0px #ccc, 2px 3px 1px #000; 
			}
				.no-touch .secondary-logo-link:hover { 
					color: white; 
					text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); 		
					
					animation: wiggle 220ms ease-out;
				}	
					.secondary-logo-link img {
						transition: opacity .2s;
					}
						
		/**
		 * Main Menu
		 */
		.menu {		
			margin-bottom: 20px; 
				
			font-family: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
			font-size: .78em;
			font-weight: 500;
			text-transform: uppercase;			
			letter-spacing: .3em;
		}
			.menu li {
				list-style: none;
			}
				.menu a {
					display: block;
					position: relative;
					padding: 8px 0 7px 0;
					 
					color: #a7abb1;
					
					transition: background 0.32s, padding-left 0.25s, transform 0.3s;
				}
				.menu a, .menu a:after { 
					text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
				}
					.no-touch .menu a:hover { 
						color: #fff;
						background: rgba(0, 0, 0, 0.5);
						box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);	
						padding-left: 10px;
					}
				
				/**
				 * Menu link arrows
				 */
				.menu a:after {
					position: absolute;
					display: block;
					right: 5px;
					bottom: 7px;
					
					content: '\2192';
					opacity: 0;
					
					font-family: 'Merriweather', Georgia, serif;
					
					transform: translateX(-20px);
					transition: transform 0.3s, opacity 0.2s;
				}
				
					.no-touch .menu a:hover:after,
					.no-touch .menu a:focus:after {
						opacity: 1;
						
						transform: translateX(0px);
					}	
					
						/**
						 * Sub Menu
						 */
						 .menu .sub-menu {
						 	text-indent: 10px;
						 }

	
	/**
	 * Hint graphic that appears while menu is inactive
	 */
	.menu-indicator {
		position: fixed;
		height: 100%;
		width: 50px;
		z-index: 10;
			
		background: #dfdfdf;
		
		transition: opacity 0.4s ease 0.4s;
	}
	.ie9 .menu-indicator {
		z-index: 100;
	}
		.menu-indicator span {
			display: block;
			position: absolute;
			top: 50%;
			bottom: 50%;
			left: 50%;
			right: 50%;
			margin-top: -10px;
			margin-left: -13px;
			width: 27px;
			height: 17px;
				
			background: url("images/main.png") no-repeat -54px 0;
		}
		.meny-active .menu-indicator {
			opacity: 0;
		
			transition: opacity 0.2s ease;
		}
					


/*  10. Portfolio Gallery
    ........................................................................................................................................ */		
	
	.portfolio-gallery { 
		margin-bottom: 20px;
	}
		.portfolio-gallery .portfolio-item { 
			float: left;
			margin: 0 20px 20px 0;
			width: 220px;
		} 		
		.portfolio-gallery .portfolio-item:nth-child(4n-7) {  /* Select Every Fourth, Starting At The First */
	    	clear: both; /* make sure the columns are properly aligned, by clearing floats */
		}
		.portfolio-gallery .portfolio-item:nth-child(4n+4) {
			margin-right: 0; /* disable the margin on the last portfolio item in the row */
		}
			.portfolio-gallery .project-link {
				display: block;
			}
				.portfolio-gallery .project-title {
					padding: 10px 0 0;
					margin-bottom: 0;
					
					line-height: 20px;
					font-size: .78em;
					font-family: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
					font-weight: 500;
					text-transform: uppercase;
					letter-spacing: .3em;
					text-align: center;
				}
				.thumb-container { 
					position: relative;
					display: block;
					width: 220px;
					height: 220px;
					
					perspective: 500px;		
				} 
					.segment {
					  float: left;
					  width: 110px; 
					  height: 220px;  
					  
					  background-repeat: no-repeat;
					  background-size: 200% 100%;
					}
					.first-segment {
					  background-position: left top; 
					}
					.second-segment { 
					  background-position: right top;
					  
					  transform-origin: left center;
					}
						.second-segment,
						.second-segment:after { 
						  transition: .5s transform .02s cubic-bezier(0.785, 0.135, 0.150, 0.860), .5s opacity .02s cubic-bezier(0.785, 0.135, 0.150, 0.860), .5s box-shadow .02s cubic-bezier(0.785, 0.135, 0.150, 0.860); 
						} 
						.second-segment:after { 
						  	content: " ";
							display: inline-block;
							width: 100%;
							height: 100%;
						  
							background: linear-gradient(to right, rgba(63, 63, 63, 0.30) 0%, rgba(0, 0, 0, 0) 100%);
						  
							opacity: 0; 
						}
						.no-touch .thumb-container:hover .second-segment { 
							transform: rotateY(-65deg); 
							box-shadow: 10px 0 20px rgba(0, 0, 0, 0.05);
						} 
						.no-touch .thumb-container:hover .second-segment:after { 
						  	opacity: 1; 
						} 
					
					/**
					 * Arrow shown on hover 
					 */	
					.thumb-arrow { 
						position: absolute;
						top: 98px; /* 1/2 thumb height - 1/2 arrow height */
						left: 200px; 
						width: 24px;
						height: 24px;
							
						background: url('images/main.png') no-repeat -250px 0;
							
						opacity: 0;
						transform: translateX(-25px);
						transition: .5s ease transform, .5s ease opacity;
					}		
						.no-touch .thumb-container:hover .thumb-arrow {
							opacity: 1;
							transform: translateX(0);
							transition-delay: .2s, .2s;
						}



/*  11. Single Portfolio Item
    ........................................................................................................................................ */
	
	.item-title {
		margin: 40px 0 80px 0;
		text-align: center;
	}
	.single-portfolio .item-title {
		margin: 40px 0 40px 0;
    }
	
	/**
	 * Meta Post Info (Client, Skills...) 
	 */
	.project-meta {
		padding: 80px 0;
	}	
		.meta-column {
			float: left;
			width: 100%;
			
			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;
				
				font-size: .78em;
				font-family: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: .3em;
			}
			.meta-column p {
				margin: 0 auto 20px auto;
				line-height: 150%;
			}
			
	/**
	 * Next/Prev Links 
	 */
	.pager {
		padding: 20px 0 20px;
		
		font-family: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
		font-size: .78em;
		font-weight: 500;
		text-transform: uppercase;			
		letter-spacing: .3em;
	}
		.prev-page {
			float: left;
		}
		.next-page {
			float: right;
		}
			.pager-link, .pager a {
				display: block;
				margin-bottom: 5px;
			}	
			.no-link {
				position: relative;
				display: block;
				margin-bottom: 5px;
				
				color: #515151;
			}
				.no-link:after {
					content: "";
					position: absolute;
					display: block;
					left: 0;
					top: 10px;
					width: 100%;
					height: 1px;
					
					background: #515151;	
				}	
					.arrows {
						font-family: 'Merriweather', Georgia, serif;
						position: relative;
						top: -1px;
					}



/*	12. Pages 
    ........................................................................................................................................ */	
	
	.page-content { 
		margin-left: 0; 
		margin-right: 0; 
		width: 100%; 
		padding-bottom: 20px; 
	}		
	.page-template-template-page-with-sidebar-php .page-content { 
		width: 70%;
		float: left;
		padding-right: 30px;
	}
	.sidebar { 
		width: 28%;
		float: right; 
	}	



/*	13. Blog
    ........................................................................................................................................ */	
		
	.blog-with-sidebar {
		float: left;
		width: 70%;
		padding-right: 30px;
	}
		.post {
			margin-bottom: 80px;
		}
			.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;
					
					background: #2e2e2e; 
				
					overflow: hidden; 
					
					text-transform: lowercase; 
					font-variant: small-caps; 
					text-align: center; 
					color: #edefee; 
					
					transition: all .3s ease-in-out;
				}
				.date-circle:hover .post-time { 
					color: #fff; 
				}
					.post-time .day { 
						display: block;
						margin-bottom: 10px; 
						
						font-size: 57px;  
						line-height: 40px; 
					}
					.post-time .month-and-year { 
						font-size: 14px; 
					}

			/**
			 * Post Content
			 */
			.post-title-link { 		
				color: #2e2e2e;
			}
			.featured-img-link { display: block; }
				.featured-img-link img {
					margin: 0 0 30px 0;
					display: block;
				}
			.post .additional-post-meta { 
				list-style-type: none; 
				margin-bottom: 20px; 
			}
			.post .additional-post-meta li { 
				float: left; 
			}
			.read-btn {
				display: block;
				margin-top: 20px;
			}
				.post-content .read-more, 
				.blog-post .read-more { 
					margin-top: 15px; 
				}
		
	/**
	 * Single Post
	 */
	.single-post-content {
		margin-bottom: 80px;
	}
		
	/* WordPress built-in class for handling sticky posts */
	.sticky { }		
	.bypostauthor { }	
	


/*	14. Comment Styles
    ........................................................................................................................................ */	

	/* h3 comment title */
	#comments { 
		text-transform: none; 
	} 
		/* number of comments span */
		#comments span { 
			font-weight: 600; 
		} 
		
	.commentlist { 
		margin: 0 25px 40px 0; 
	}
		.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: 30px; 
						margin-top: 0; 
						padding-bottom: 0; 
					}
				.commentlist li:last-child { 
					margin-bottom: 0; 
				}
				
				.commentlist .comment-body { 
					margin-bottom: 20px; 
					padding: 15px 15px 0 10px; 
					
					border: 1px solid #eee; 
					
					background: #fff; 
				}
				.commentlist .comment-author + .help { 
					margin: 0; 
					margin-left: 70px; 
				}
				
				.commentlist .vcard { 
					margin-left: 70px; 
					margin-bottom: 15px; 
				}
					.commentlist .vcard cite.fn { 
						display: inline-block;  
						margin-top: -4px; 
						
						font-style: normal;
					}
						.commentlist .vcard time a { 
							color: #999; 
							text-decoration: none; 
						}
							.commentlist .vcard time a:hover { 
								text-decoration: underline; 
							}
					.commentlist .vcard .avatar { 
						position: absolute; 
						left: 20px; 
						margin-top: 2px; 
						padding: 2px; 
						
						border: 1px solid #EDEFEE; 
						
						background: #fff; 
					}
					.commentlist .comment-meta { 
						font-size: 12px; 
					} 
				.commentlist li .comment_content { 
					margin-left: 70px; 
				}
					.commentlist li .comment_content p { 
						font-size: 1em; 
					}
					.commentlist li ul { 
						margin: 0; 
					}		
					.commentlist .comment-reply-link { 
						text-decoration: none; 
					}
		
				
				
/*	15. Comment Form Styles
    ........................................................................................................................................ */	
    
    #respond { 
    	padding: 0 25px 20px 0; 
    }
    .post-content + #respond { 
    	margin-top: 15px; 
    }	
    .comment-body + #respond { 
    	padding: 0; 
    }
    	#reply-title { 
    		margin-bottom: 10px;
    		
    		text-transform: none; 
    		font-size: 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; 
		}			
	
	

/*	16. Widgets
    ........................................................................................................................................ */	

	.widget { 
		padding: 0 0; 
		margin: 0 0 2.2em; 
		
		zoom: 1;		
	}
		.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: 0.95em; 
						
						font-size: .78em;
						font-family: 'Istok Web', Futura, Helvetica Neue, Helvetica, sans-serif;
						font-weight: 500;
						text-transform: uppercase;
						letter-spacing: .3em;
					}
			
		.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; 
		}
		
		/* 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; 
						}
		
		/* pPopular 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; 
					}
					.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; 
		}
		#wp-calendar th, 
		#wp-calendar tbody td { 	
			padding: 3px 6px; 
			text-align: center; 
		}
		#wp-calendar tfoot td { 
			padding-top: 3px; 
		}
		#wp-calendar caption { 
			margin-bottom: 15px;
			
			font-size: 1.3em; 
			font-weight: bold; 
			text-align: center; 
		}
		
		/* Twitter widget */
		.contents .widget .tp_recent_tweets {
			float: none;
			clear: none;
		}
			.contents .widget .tp_recent_tweets li {
				background-image: url('images/main.png');
				background-repeat: no-repeat;	
				background-position: -348px -41px;
				padding-left: 25px;
				padding-bottom: 20px;
				float: none;
				clear: none;
				line-height: 1.75;
				
				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 */  
			}
				.contents .widget .tp_recent_tweets li a {
					font-weight: normal;	
				}
				.contents .widget .tp_recent_tweets .twitter_time {
					color: #999;
					font-size: 12px;
					font-style: italic;	
					font-weight: normal;
				}

				

/*	17. Content Styles
    ........................................................................................................................................ */	
	
	.the-content img, .post-content img {
		margin-bottom: 20px;
	}
	
	.the-content ul, 
	.the-content ol, 
	.the-content table, 
	.the-content dl { 
		margin: 1.5em 0; 
	}
	.the-content ul, 
	.the-content ol { 
		margin-right: 2.2em;
		line-height: 1.5; 
		list-style-position: outside; 
	}
	.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: 28px; 
		}

	.the-content blockquote { 
		margin: 0;
		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; 
			margin-top: -.4em; 
			
			font-family: Georgia, serif; 
			font-size: 2.75em;  
			
			opacity: 0.8; 
			content: "“"; 
		} 
			
	.the-content dl { 
		margin: 1.75em 0 1.75em; 
	}
		.the-content dt { 
			margin-top: 1.25em; 
			font-weight: 700; 
		}
		.the-content dd { 
			margin-top: 0.5em;
			font-style: italic; 
			line-height: 1.6em; 
		}
						
	/* 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: 9px 22px; 
			border: 1px solid #e9e9e9;
		}
		.the-content th { 
			text-transform: uppercase; 
			font-weight: normal; 
		}
		.the-content caption { 
			font-size: 1.2em; 
			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 40px; 
			padding: 18px 0; 
			display: block;
			 
			color: #443325; 
			line-height: 1.6em;  
		}
				
	.the-content video {
		display: block; 
		margin: 1.5em 0; 
		max-width: 100%;
	}
	.the-content object { 
		display: block; 
		margin: 1.5em 0; 
		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 { 
		max-width: 100% !important;
		margin-bottom: 20px;
						
		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: 20px; 
	}
		.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);
								}



/*  18. 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: #e0e0e0;
			box-shadow: none;
	    }   
	    
	    .metaslider .flex-control-paging li a.flex-active { 
	    	background: #2e2e2e; 
		}	
	
	/**
	 * Cyclone Slider Plugin
	 */
	.cycloneslider.cycloneslider-template-standard {
		margin-bottom: 40px;
	}
		.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-bottom: 20px !important;
	}
		.mapp-map-links {
			background-color: none !important;
			border: none !important;
		}
	
	/**
	 * Contact Form 7 Plugin
	 */
	.wpcf7 p {
		margin-bottom: 25px;
	}
	.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;		
	}



/*  19. Search
    ........................................................................................................................................ */
		    
	.search-post-title { 
		text-align: center;
		margin: 0;
	}
		.search-post-title a { 
			display: block;
			padding: 20px 0;
			border-bottom: 1px solid #e6e6e6;
		}
			.search-results .search-post-title:first-child a { 
				border-top: 1px solid #e6e6e6;
			}
			.search-results .search-post-title:last-child a { 
				border-bottom: none;
			}
				.search-post-title a:hover {
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
					background: #fff;
				}
			
				.search h2, 
				.search p, 
				.error404 p { 
					text-align: center; 
				}
				.search .contents .search-field, 
				.error404 .contents .search-field { 
					margin: 0 auto; 
					width: 400px; 
				}
				.search-results .search-form, 
				.error404 .search-form {
					margin-bottom: 80px;
				}	
										
		
					
/*  20. Footer
    ........................................................................................................................................ */
	
	.footer { 
		position: relative;
		padding: 40px 0;
		
		border-top: 1px solid #e6e6e6;  
	}
		/* Border shadow */
	    .footer:before { 
			content: " ";
		    position: absolute; 
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 1px;
		    	
		    background: rgba(255, 255, 255, .5);
	    } 	
			.footer .social-networks { 
				float: left;
			}
			.footer p {
				float: left;
			}
			.footer.multi-columned p {
				float: right;
				margin-top: -2px;
			}
				.social-networks li {
					float: left;
					margin-right: 8px;
				}	
					.social-networks a {
						display: block;
						position: relative;
						width: 29px;
						height: 29px;
						padding: 4px;
												    		
						background: url("images/main.png") no-repeat left top;
							    		
						cursor: pointer;
					}
					.social-networks .facebook-link {
						background-position: 0 -50px;
					}
					.social-networks .twitter-link {
						background-position: -50px -50px;
					}
					.social-networks .googleplus-link {
						background-position: -100px -50px;
					}
					.social-networks .pinterest-link {
						background-position: -150px -50px;
					}
					.social-networks .instagram-link {
						background-position: -200px -50px;
					}
					.social-networks .youtube-link {
						background-position: -250px -50px;
					}
					.social-networks .vimeo-link {
						background-position: -300px -50px;
					}
						.social-networks a:after {
							box-sizing: content-box;
							position: absolute;
							left: -3px;
							top: -3px;
							padding: 3px;
							width: 28px;
							height: 28px;
										
							border-radius: 50px;
							box-shadow: 0 0 0 2px rgba(60, 60, 60, 0.7);
							
							opacity: 0;
							content: " ";
							transform: scale(1.2);
							transition: 0.17s 0s;
						}
							.no-touch .social-networks a:hover:after {
								opacity: 1;
								transform: scale(1);
								transition: 0.2s 0.02s;
							}	
						
						
								
/*  21. 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) {
		  
		.contact-icon,
		.menu-indicator span,
		.contact-information:before,
		.social-networks a,
		.thumb-arrow,
		.search-icon,
		.close-search,
		.alt-menu-trigger, 
		.contents .widget .tp_recent_tweets li {
			/* Reference the @2x Sprite */
			background-image: url("images/main_@2x.png");
			/* Translate the @2x sprite's dimensions back to 1x */
			background-size: 600px 600px; 
		}
		
		body,
		.menu-container { 
			background-image: url("images/dark_wall_@2X.png");
			background-size: 300px;
		}
		
		a { 
		    color: #8d8d8d;
	    }   
		
		.menu-indicator {
			background: #eaeaea;
		}
		
		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; 
		}	 
	}
	
	@media only screen and (max-width: 1100px) {
		.contents .main-container { 
			max-width: 844px;
		}
		
		/**
		* Four portfolio items per row
		*/
		.portfolio-gallery .portfolio-item {
			width: 196px;
		}
			.thumb-container { 
				width: 196px;
				height: 196px;
			} 
				.segment {
					width: 98px; 
					height: 196px;  
				}					
					.thumb-arrow { 
						top: 86px; /* 1/2 thumb height - 1/2 arrow height (12) */
						left: 178px; 
					}
	}
	
	
	@media only screen and (max-width: 1000px) {
		.contents .main-container { 
			max-width: 622px;
		}
		
		/**
		* Tagline
		*/
		.header .tagline { 
			font-size: 22px;
	  	}
	  	
	  	/**
		* Three items per row
		*/
			.portfolio-gallery .portfolio-item {
				width: 194px;
			}
			.portfolio-gallery .portfolio-item:nth-child(4n+4) {
				margin-right: 20px; /* reset the margin for every fourth item because we now have three items per row */
			}
			.portfolio-gallery .portfolio-item:nth-child(3n+3) {
				margin-right: 0; /* disable the margin on the last portfolio item in the row */
			}
			.portfolio-gallery .portfolio-item:nth-child(4n-7) { /* Disable the clearing of floats */
				clear: none; 
			}
			.portfolio-gallery .portfolio-item:nth-child(3n-8) {  /* Select Every Fourth, Starting At The First */
		    	clear: both; /* make sure the columns are properly aligned, by clearing floats */
			}
				.thumb-container { 
					width: 194px;
					height: 194px;
				} 
					.segment {
					  width: 97px; 
					  height: 194px;  
					}					
						.thumb-arrow { 
							top: 85px; /* 1/2 thumb height - 1/2 arrow height */
							left: 178px; 
						}
	}	
	
	
	@media only screen and (max-width: 760px) {	
		.alt-menu-trigger,
		.alt-menu-trigger:after {
			opacity: 1;
		}
		
		.main-container {
	    	padding: 40px 0 40px;
	    }
		
		.menu-indicator {
			position: fixed;
			height: 100%;
			width: 6px;		
							
			background: #2e2e2e;
		
			transition: opacity 0.4s ease 0.05s;
		}
			.menu-indicator span {
				display: none;
			}
			.meny-active .menu-arrow {
				opacity: 0;
		
				transition: opacity 0.2s ease;
			}		
	}
	
	
	@media only screen and (max-width: 710px) {
		.footer .social-networks { 
			list-style: none; 
			position: relative; 
			float: left; 
			display: block; 
			left: 50%; 
			margin-bottom: 20px; 
		}
			.footer .social-networks li { 
				position: relative; 
				float: left; 
				display: block; 
				right: 50%; 
			}
		
		.footer.multi-columned p {
			clear: both;
			float: none;
		}
			.footer p small {
				display: block;
				text-align: center;
			}

		.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; 
		}	
	
		.page-template-template-portfolio-php .contents .main-container { 
			max-width: 300px;
			margin: 0 auto;
		}
		
		.contact-content {
			width: 300px;
		}
		
		/**
		* One item per row
		*/
		.portfolio-gallery .portfolio-item {
			width: 300px;
		}
			.thumb-container { 
				width: 300px;
				height: 300px;
			} 
				.segment {
					width: 150px; 
					height: 300px;  
				}					
					.thumb-arrow { 
						top: 138px; /* 1/2 thumb height - 1/2 arrow height */
						left: 285px; 
					}
	}
	
	
	@media only screen and (max-width: 600px) {	
		.post-content {
			float: none;
			width: 100%;
		}
		.date-circle {
			display: none;
		}
		
		.menu a {
			padding: 11px 0 10px 0;
		}
			.menu a:after {
				bottom: 9px;
			}
	}
	
	
	@media only screen and (max-width: 580px) {
		.item-title {
			font-size: 45px;
			line-height: 60px;
			margin: 20px 0 40px;
		}	
		.single-portfolio .item-title {
			margin: 20px 0 20px;
	    }
		
		.project-meta {
			padding: 40px 0;
		}
			.project-meta .meta-column {
				width: 100% !important;
			}		
	}
	
	@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;
			}
			.pager .no-link {
				display: none;
			}
	}
	
	@media only screen and (max-width: 350px) {
		.gallery .gallery-item {
			margin: 0 0 20px 0 !important;
			width: 100% !important;
			float: none;
		}		
	}		
	
	@media only screen and (max-width: 340px) {
		.contact-content {
			width: 240px;
		}
		
		.page-template-template-portfolio-php .contents .main-container { 
			max-width: 240px;
			margin: 0 auto;
		}
				
		/**
		* One item per row
		*/
		.portfolio-gallery .portfolio-item {
			width: 240px;
		}
			.thumb-container { 
				width: 240px;
				height: 240px;
			} 
				.segment {
					width: 120px; 
					height: 240px;  
				}					
					.thumb-arrow { 
						top: 108px; /* 1/2 thumb height - 1/2 arrow height */
						left: 225px; 
					}
	}	
	
	
	
/*  22. Animations
    ........................................................................................................................................ */
    .cssanimations .logo, 
    .cssanimations .contact-icon,
    .cssanimations .search-icon,
    .cssanimations .tagline,
    .cssanimations .post-title,
    .cssanimations .animated-el
    {
		opacity: 0;
		transform: translateY(-20px);
		animation: fadein .6s .5s 1 forwards ease-in-out;
	}
		
	.cssanimations .logo {
		animation-delay: .8s;
	}
	
	.cssanimations .search-icon {
		animation: rotatefadein .6s .9s 1 forwards ease-in-out;
	}
		
	.cssanimations .contact-icon {
		animation: rotatefadein .6s 1s 1 forwards ease-in-out;
	}
		
	.cssanimations .menu-indicator {
		transform: translateX(-50px);
		animation: slidein .6s .2s 1 forwards ease-in-out;
	}
	
	@keyframes fadein {
		0%{
	    	transform: translateY(-20px);
			opacity: 0;
		}
		100%{
	    	transform: translateY(0);
			opacity: 1;
		}
	}
	
	@keyframes rotatefadein {
	  	0%{
	    	transform: translateY(-20px) rotate(0);
			opacity: 0;
		}
		100%{
	    	transform: translateY(0) rotate(360deg);
			opacity: 1;
	    }
	}
	
	@keyframes rotate {
	  	0%{
	    	transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	
	@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) }
    	20%{ transform:scale(2) }
    	40%{ transform:scale(0.9) }
    	60%{ transform:scale(1.3) }
    	80%{ 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;
	}