/*
Theme Name: Tiny Beast
Theme URI: http://www.thisistinybeast.com
Author: Sel-Vin Kuik
Author URI: http://smackagency.com
Version: 1.0.0
*/


/**
 * Fonts
 */

@import url("https://use.typekit.net/xll7kvy.css");


@font-face {
	font-family: 'latolight';
	src: url('fonts/lato-lig-webfont.eot');
	src: url('fonts/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/lato-lig-webfont.woff') format('woff'),
		 url('fonts/lato-lig-webfont.ttf') format('truetype'),
		 url('fonts/lato-lig-webfont.svg#latolight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'novecento_widebook';
	/*src: url('fonts/novecentowide-book-webfont.eot');
	src: url('fonts/novecentowide-book-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/novecentowide-book-webfont.woff') format('woff'),
		 url('fonts/novecentowide-book-webfont.ttf') format('truetype'),
		 url('fonts/novecentowide-book-webfont.svg#novecento_widebook') format('svg');*/
	src: url('fonts/novecentowide-normal-webfont.eot');
	src: url('fonts/novecentowide-normal-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/novecentowide-normal-webfont.woff') format('woff'),
		 url('fonts/novecentowide-normal-webfont.ttf') format('truetype'),
		 url('fonts/novecentowide-normal-webfont.svg#novecento_widenormal') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'novecento_widebook';
	src: url('fonts/novecentowide-bold-webfont.eot');
	src: url('fonts/novecentowide-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/novecentowide-bold-webfont.woff') format('woff'),
		 url('fonts/novecentowide-bold-webfont.ttf') format('truetype'),
		 url('fonts/novecentowide-bold-webfont.svg#novecento_wide_book_bold') format('svg');
	font-weight: bold;
	font-style: bold;
}

@font-face {
	font-family: 'steelfish_rg';
	src: url('fonts/steelfish_rg-webfont.eot');
	src: url('fonts/steelfish_rg-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/steelfish_rg-webfont.woff') format('woff'),
		 url('fonts/steelfish_rg-webfont.ttf') format('truetype'),
		 url('fonts/steelfish_rg-webfont.svg#steelfish_rg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'steelfish_rg';
	src: url('fonts/steelfish_bd-webfont.eot');
	src: url('fonts/steelfish_bd-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/steelfish_bd-webfont.woff') format('woff'),
		 url('fonts/steelfish_bd-webfont.ttf') format('truetype'),
		 url('fonts/steelfish_bd-webfont.svg#steelfish_rgbold') format('svg');
	font-weight: bold;
	font-style: bold;
}


/**
 * Isotope
 */
.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-ms-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
}

.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
}

.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	-o-transition-property:	-o-transform, opacity;
	transition-property: transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s;
}

/**
 * Layout
 */
*,
*:after,
*:before {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

body {
	font-family: "canada-type-gibson";
	font-weight: 400;
}

.section {
	margin: 0 auto;
	max-width: 1380px;
	width: 79.5%;
}

.nodisplay {
	display: none;
}


.content p {
	font-family: "urw-din";
	line-height: 26px;
	margin-top: 1em;
	font-weight: 300;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

/**
 * Header
 */
.header-wrapper {
	border-bottom: 7px solid #231f20;
}

.header {
	/*background-color: #231f20;*/
	background: url('img/tinybeastbg.png') no-repeat center top;
	border-bottom: 7px solid #fff;
	color: #fff;
	padding: 140px 0;
}

.header .logo {
	display: inline;
	text-align: center;
	max-width: 30%;
	margin: auto;
}

.header .logo img {
	width: 30%;
	margin-bottom: 40px;
}

.header .h2 {
	font-family: "din-condensed";
	margin-top: 5px;
	text-transform: uppercase;
	font-weight: 400;
}

.header a {
	color: #fff;
	text-decoration: none;
}

.header .span_2_of_3 {
	text-align: right;
}

.h1 {
	font-family: "din-condensed";
	font-size: 34px;
	font-weight: 400;
}

.h3 {
	font-family: "canada-type-gibson";
	font-size: 22px;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 34px;

}

.email {
	font-family: "canada-type-gibson";
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 34px;
	text-align:center;

}

.line {
	width: 50%;
	text-align:center; 
	margin: 30px auto;
}

/**
 * Header: Menu
 */
.header ul li {
	display: inline-block;
	font-family: "din-condensed";
	font-size: 24px;
	list-style-type: none;
	padding-top: 10px;
	margin: 0 6%;
	text-transform: uppercase;
}

.header ul li:last-child {
	margin-right: 0;
}

.header ul li.current-menu-item,
.header ul li:hover,
.category .header ul li:first-child,
.single-post .header ul li:first-child {
	background: url('img/chevrons/menu.png') no-repeat center top;
	background-size: 37px 4px;
}

/**
 * Header: Content
 */
.header table {
	height: 240px;
	width: 100%;
}

.header table tr td {
	vertical-align: bottom;
}

/**
 * Categories
 */
.categories {
	margin: 40px auto 25px;
	text-align: center;
}

.categories ul li {
	background-color: #cecdcd;
	display: inline-block;
	font-family: "din-condensed";
	font-weight: 400;
	font-size: 18px;
	list-style-type: none;
	margin: 0 0 8px 8px;
	text-transform: uppercase;

	transition: background-color .2s;
	-webkit-transition: background-color .2s;
}

.categories ul li.active,
.categories ul li:hover {
	background-color: #231f20;
}

.categories a {
	display: inline-block;
	color: #fff;
	padding: 4px 8px 2px;
	text-decoration: none;
}

/**
 * Isotope: Overrides & Customisations
 */
.isotope {
	max-width: 1440px;
	width: 79.5%;
}

.isotope-item {
	color: #fff;
	float: left;
	margin: 5px; /* .71%; */
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 32.1%;
}

.isotope-item img {
	width: 100%;
}

.isotope-item .overlay-wrapper {
	display: table;
	background-color: transparent;
	background-color: rgba(0, 0, 0, .85);
	opacity: 0;
	position: absolute;
	visibility: hidden;
	z-index: 1;

	transition: opacity .2s;
	-webkit-transition: opacity .2s;
}

.isotope-item:hover .overlay-wrapper {
	opacity: 1;
	visibility: visible;
}

.isotope-item .overlay {
	display: table-cell;
	padding: 0 20px;
	vertical-align: middle;
}

.isotope-item .title {
	background: url('img/chevrons/overlay.png') no-repeat center 6px;
	display: inline-block;
	font-family: "din-condensed";
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0px;
	padding: 25px 40px 10px 40px;
	margin-bottom: 10px;
}

.isotope-item .tag {
	display: block;
	font-size: 13px;
	margin: 4px 0;
	letter-spacing: 2px;
}

/**
 * Single
 */
.single h1 {
	background: url('img/chevronsblack.png') no-repeat center 12px;
	background-size: 71px 11px;
	color: #231f20;
	font-family: "din-condensed";
	margin: 20px auto 40px;
	max-width: 960px;
	padding: 30px 0 8px;
	text-align: center;
	text-transform: uppercase;
	width: 80%;
	font-size: 50px;
	font-weight: 400;
}

.single .client {
	border-bottom: 1px solid #231f20;
	border-top: 5px solid #231f20;
	font-family: "canada-type-gibson";
	padding: 20px 0;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 200;
}

.single .client span {
	background: url('img/arrow.png') no-repeat right center;
	background-size: 15px 12px;
	margin-right: 2px;
	padding-right: 20px;
	font-weight: 600;
}

.single .client h2 {
	display: inline;
	font-weight: normal;
}

.single .categories {
	margin: 40px 0 10px;
	text-align: left;
}

.single .categories ul li {
	background-color: #231f20;
	display: inline-block;
	color: #fff;
	margin: 0 8px 8px 0;
	padding: 4px 8px 2px;
}

.single .img-col img {
	margin-bottom: 10px;
	width: 100%;
}

.span_1_of_3 {
	width: 32.26%;
	padding-right: 40px;
}

/**
 * Single: Quote
 */
.single .quote {
	/* background-color: #e1e1e1; */
	/* padding: 20px; */
	/* text-transform: uppercase; */
	font-family: "URW-din";
	font-size: 26px;
	font-weight: 300;
	line-height: 38px;
	margin-top: 100px;
	padding-right: 40px;
}

.single .quote .quote-end {
	display: none;
	text-align: right;
}

.single .quote img {
	zoom: 50%;
}

.single .quote-name {
	font-family: "canada-type-gibson";
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 10px;
	letter-spacing: 3px;
}

.single .quote-position {
	font-family: "canada-type-gibson";
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 3px;
	margin-bottom: 20px;
	margin-top: 4px;
}

/**
 * Single: Navigation
 */
.single .controls {
	margin-top: 20px;
}

.single .controls .back a,
.single .controls .previous a,
.single .controls .next a {
	border: 2px solid #010101;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	display: inline-block;
}

.single .controls .back span,
.single .controls .previous span,
.single .controls .next span {
	background-color: #231f20;
	border: 2px solid #fff;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	font-family: "din-condensed";
	font-size: 20px;
	padding: 4px 10px 1px;
	text-decoration: none;
	text-transform: uppercase;
}

.single .controls .back span {
	background: #231f20 url('img/previous.png') no-repeat 10px center;
	padding-left: 20px;
}

/**
 * Page
 */
.page .header table {
	font: 13px 'latolight';
}

.page .header table a {
	text-decoration: underline;
}

/**
 * Page: About
 */
.about .isotope {
	margin-top: 40px;
}

/**
 * Footer
 */
.footer {
	background: url('img/chevronsblack.png') no-repeat center top;
	background-size: 78px 11px;
	font-size: 16px;
	margin: 100px auto 40px;
	padding-top: 24px;
	text-align: center;
	font-family: "din-condensed";
	text-transform: uppercase;
}

.h2 {	
	font-family: "din-condensed";
	font-size: 28px;
	font-weight: 400;
}

.h5 {
	font-family: "canada-type-gibson";
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 30px;
	padding-bottom: 50px;
}	

a {	
	color: #231f20;
	text-decoration: none;

}


/**
 * Tablet: Portrait
 */
@media only screen and (max-width: 1024px) {
	/**
	 * Isotope: Overrides & Customisations
	 */
	.isotope-item {
		width: 31.7%;
	}
}

/**
 * Mobile: Landscape
 */
@media only screen and (max-width: 568px) {
	/**
	 * Isotope: Overrides & Customisations
	 */
	.isotope-item {
		width: 31.5%;
	}

	/**
	 * Layout
	 */
	.section {
		width: 90%;
	}

	/**
	 * Header: Content
	 */
	.header table {
		height: 222px;
	}

	/**
	 * Single
	 */
	.single h1 {
		width: 90%;
	}
}

/**
 * Mobile: Portrait
 */
@media only screen and (max-width: 480px) {
	/**
	 * Layout
	 */
	.header .section {
		max-width: 100%;
	}

	/**
	 * Header
	 */
	.header-wrapper {
		border-bottom: 5px solid #231f20;
	}

	.header {
		padding: 70px 0 40px;
	}

	.header .logo {
		display: block;
		margin-bottom: 6px;
		padding-bottom: 15px;
		max-width: 80%;
	}

	.header .logo img {
		width: auto;
		zoom: 50%;
	}

	.header .h2 {
		font-size: 13px;
	}

	.h1 {
		font-size: 28px;
	}

	.h3 {
		font-size: 16px;
	   	 line-height: 28px;
	}
	
	.email {
		font-size: 12px;
	}


	/**
	 * Header: Menu
	 */
	.header .span_2_of_3 {
		text-align: center;
	}

	.header ul li {
		font-size: 22px;
	}

	.header ul li:last-child {
		margin: 0 6%;
	}

	/**
	 * Header: Content
	 */
	.single-post .header table,
	.home .header table {
		display: none;
	}

	/**
	 * Page: About
	 */
	.about .header table {
		text-align: left;
	}

	.about .header table .content {
		margin: 0 auto;
		width: 90%;
	}

	.about .isotope {
		margin-top: 20px;
	}

	/**
	 * Isotope: Overrides & Customisations
	 */
	.isotope-item {
		width: 100%;
	}

	.span_1_of_3 {
   		 width: 100%;
		padding-right:0;
	}
	
	.single h1 {
		margin-bottom: 10px;
	}

	.single .quote {
		margin:20px 0px;
	}

	.single .quote-position {
		margin-bottom: 50px;
	}

	/**
	 * categories
	 */
	.categories {
		margin: 20px auto 5px;
	}

	.categories ul li {
		font-size: 16px;
	}
}

/**
 * Wordpress: Core
 */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #FFF;
	border: 1px solid #F0F0F0;
	max-width: 96%;
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption .wp-caption-text,
.gallery-caption {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}