/*
Theme Name: Creato
Theme URI: 
Author: lemeeto
Author URI: http://lemeeto.com
Description: A theme optimized for blogs, galleries and portfolios, Creato delivers elegance, simplicity and intuition in a lightweight package. Whether you enjoy photo blogging or want to display your projects to the world, this theme comes with several customizable settings which allow you to take full control of its features, rendering it the perfect fit for almost any purpose. It features a flexible-width layout and various post-formats, allowing to be mobile friendly.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, white, light, one-column, right-sidebar, fluid-layout, custom-menu, featured-images, microformats, post-formats, sticky-post, photoblogging, responsive-layout, accessibility-ready
*/

/* 
Thanks
------
Lokesh Dhakar, for the awesome jQuery Color Thief plugin.
Felix Gnass, for giving it that extra jQuery spin.js .

For your convenience, all style elements are in alphabetical order ;)
*/

/*-------------------------------------------
	--->>> MAIN ELEMENTS
	-------------------------------------------*/
body {
	background: url(images/bg.png) #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.1em;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	overflow: hidden;
  padding: 0;
	user-select: none; }
.navbar {
	background: #1c1d1e;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	height: 60px;
	left: 0;
	padding-left: 16px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 3; }
.nav {
	background: #111111;
	bottom: 0;
	display: none;
	float: right;
	overflow-y: auto;
	padding: 60px 20px 20px 20px;
	position: fixed;
	right: 0;
	top: 0;
	width: 280px;
	z-index: 2;
	clear: both; }
.main {
	height: calc(100vh - 60px);
	margin: auto;
	margin-top: 60px;
	overflow-x: hidden;
	overflow-y: auto; }
.home .main, .archive .main {
	margin: 0;
	margin-top: 60px; }
.cover {
	background: rgba(0,0,0,.7);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1; }	
/*-------------------------------------------
	--->>> SCROLLBAR // Only seems to work in Chrome
	-------------------------------------------*/	
::-webkit-scrollbar-track
{
	background-color: #111111; }
::-webkit-scrollbar
{
	background-color: #111111;
	border-left: 1px solid #070707;
	width: 5px; }
::-webkit-scrollbar-thumb
{
	background-color: #3F3F3F; }	
/*-------------------------------------------
	--->>> MENUS
	-------------------------------------------*/
.navicon {
	background-color: #111111;
	background-image: url('images/icon_menu.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	color: #FFF;
	cursor: pointer;
	float: right;
	font-size: 40px;
	height: 60px;
	-moz-transition: opacity 0.1s ease-in;
	-ms-transition: opacity 0.1s ease-in;
	-o-transition: opacity 0.1s ease-in;
	-webkit-transition: opacity 0.1s ease-in;		
	width: 60px; }
.next-page, .previous-page {
	background-color: #111111;
	color: #353535;
	cursor: pointer;
	float: right;
	font-size: 30px;
	font-weight: 700;
	height: 60px;
	line-height: 60px;
	margin-right: 1px;
	-moz-transition: opacity 0.1s ease-in;
	-ms-transition: opacity 0.1s ease-in;
	-o-transition: opacity 0.1s ease-in;
	-webkit-transition: opacity 0.1s ease-in;
	text-align: center;
	width: 60px; }		
.navicon:hover, .next-page:hover, .previous-page:hover {
	background-color: #070707;
	color: #424242; }
/* SEARCH */
.search-wrap input[type="text"] {
	background: #141414;
	border: 0;
	border-bottom: 1px solid #1C1C1C;
	color: #878787;
	font-size: 1em;
	font-weight: 400;
	height: 38px;
	margin: 22px 0 14px 0;
	padding: 0 14px;
	width: 240px; }
/* NAVIGATION */
.nav ul {
	list-style-type: none;
	padding: 0; }
.nav li {
	border-top: 1px solid #161616; }
.nav .menu-item-has-children {
	border: none;
	padding: 0; }
.nav li a, .nav-wrap li a:active	{
	color: #AFAFAF;
	display: block;
	font-size: 0.85em;
	font-weight: 500;
	padding: 6px 0 8px 0; }
.nav li a:hover {
	color: #FFF; }
.nav ul ul li a, .nav-wrap ul ul li a:active {
	padding-left: 14px; }
.nav ul ul ul li a, .nav-wrap ul ul ul li a:active {
	padding-left: 28px; }
/*-------------------------------------------
	--->>> LINKS
	-------------------------------------------*/
a {
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;		
	color: #444;
	text-decoration: none; }	
a:hover {
	color: #647C84; }
.logo {
	background-position: center left; 
	background-repeat: no-repeat;
	background-size: contain;	
	cursor: pointer;
	float: left;
	position: absolute;
	height: 26px;
	top: 17px;
	width: 200px; }
/*-------------------------------------------
	--->>> BUTTONS
	-------------------------------------------*/	
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
	-moz-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
	background: #647C84;
	border: 0;
	border-bottom: 1px solid transparent;
	color: #FFF;
	cursor: pointer;
	font-size: 0.8em;
	font-weight: 400;
	padding: 7px 10px 7px 10px; }
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="file"]::-webkit-file-upload-button:hover,
button:hover {
	border-bottom: 1px solid #DDD;
	background: #FFF;
	color: #647C84; }	
input[type="text"], textarea {
	background: #FFF;
	border: 1px solid #E1E1E1;
	color: #444;
	font-size: 0.85em;
	max-width: calc(100% - 16px);
	padding: 8px; }	
.scroll-top {
	-moz-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;		
	background: rgba(0,0,0,.3);
	bottom: 0;
	color: #FFF;
	cursor: pointer;
	display: none;
	font-size: 20px;
	font-weight: 700;
	height: 28px;
	left: 50%;
	margin-left: -30px;
	padding-top: 8px;
	position: fixed; 
	text-align: center;
	width: 60px; }
.scroll-top:hover {
	color: #666;
	background: #D4D5D6; }
.reply {
	background: #FFF;
	border-bottom: 1px solid #DDD;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	padding: 5px 9px 6px 9px; }
.reply:hover {
	background: transparent; }
/*-------------------------------------------
	--->>> CONTENT
	-------------------------------------------*/
.breadcrumbs {
	color: #FFF;
	float: right;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 60px;
	margin-right: 22px; }
/* TEXT */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif; }
h1 {
	font-size: 1.9em;
	font-weight: 700; }	
h2 {
	font-size: 1.4em;
	font-weight: 700; }
h3 {
	font-size: 1.1em;
	font-weight: 900; }
h4 {
	font-size: 1.1em;
	font-weight: 700; }
h4 {
	font-size: 1.0em;
	font-weight: 700; }	
.content {
	color: #444;
	font-weight: 400;
	margin: auto;
	max-width: 860px;
	overflow-x: hidden;
	padding: 4px 16px; }
.content img {
	max-width: 100%; }
.tags a {
	background: #F8F8F8;
	border-bottom: 1px solid #E1E1E1;
	color: #8E8E8E;
	font-size: 0.8em;
	font-weight: 600;
	margin-right: 3px;
	padding: 2px 6px 4px 6px; }
.tags a:hover {
	background: #FFF;
	color: #666; }
.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; }
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%; /* Image does not overflow the content area */
    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 p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px; }
.gallery-caption {}
.bypostauthor {}
.sticky {}
/* DASHBOARD */
.item {
	background-color: #FFF;
	background-size: 140% auto;
	background-position: center center;	
	background-repeat: no-repeat;		
	cursor: pointer;
	float: left;
	min-height: 180px;
	position: relative; }
.item:hover {
	-moz-transition: background-size .3s linear;
	-ms-transition: background-size .3s linear;
	-o-transition: background-size .3s linear;
	-webkit-transition: background-size .3s linear;
	transition: background-size .3s linear;
	background-size: 146% auto; }
.new-item {
	background-image: url(images/new_post.png);
	background-position: center center;
	background-repeat: no-repeat;
	height: 72px;
	left: 0;
	margin: -3px 0 0 -3px;
	position: absolute;
	top: 0;
	width: 72px; }	
.item-details {
	background: rgba(13,14,15,0.85);
	display: none;
	height: 100%;
	position: relative; }
.item-title {
	position: absolute;
	text-align: center;
	top: 45%;
	width: 100%; 	 }
.item-title h2 {
	-moz-transition: color .1s linear;
	-ms-transition: color .1s linear;
	-o-transition: color .1s linear;
	-webkit-transition: color .1s linear;
	transition: color .1s linear;	
	color: #FFF;
	display: inline;
	word-wrap: break-word; }
.item-content {
	color: #444;
	height: 78%;
	overflow: hidden;
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 8%;
	position: absolute; }
.item-fade {
	background-image: url(images/fade.png);
	background-position: left bottom;
	background-repeat: repeat-x;
	height: calc(100% + 1px);	
	position: absolute;
	width: 100%;	}
.info {
	margin: auto;
	max-width: 860px;
	padding: 0 16px; }
.info, .info-info a {
	color: #5B5B5B;
	font-size: 14px;
	font-weight: 600; }	
.info a:hover {
	color: #647C84; }
.info-icon {
	height: 16px;
	margin: -4px 3px 0 0;
	opacity: .8;
	vertical-align: middle; }
/* SINGLE */
.single .post, .page .page {
	background: #FFF;
	border-bottom: 1px solid #DDD; }
.image-container {
	background-position: center center;	
	background-repeat: no-repeat;	
	background-size: cover;
	font-size: 0;
	left: 0;
	max-width: 100%;
	overflow: hidden;
	position: fixed;
	right: 0;
	text-align: center;
	top: 60px;
	z-index: -1; }
.image-cover {
	background: #101111;
	background: rgba(232,235,237,.4); }
.image {
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	cursor: pointer;
	margin: auto;
	max-height: 68vh;
	max-width: 100%; }
.image-push {
	font-size: 0;
	max-height: 68vh;
	max-width: 100%;
	visibility: hidden; }	
.info-container {
	background: #F8F8F8;
	border-bottom: 1px solid #E1E1E1;
	height: 54px;
	line-height: 55px; }
/* COMMENTS */
.comments {
	margin-top: 2em; }
.comment-form-comment label {
	display: none; }
.comment-list {
	-webkit-padding-start: 0;
	margin: 16px 0 20px 0; }
.comment-list ol,
.comment-list li {
	list-style-type: none; }
.comment-body {
	background: #F9F9F9;
	border-top: 1px solid #DDD;
	margin: 4px 0;
	padding: 16px; }
.children .comment-body {
	background: #F8F8F8;
	list-style-type: none;
	margin-left: 28px; }
.vcard {
	display: inline-block;
	line-height: 56px;
	margin-bottom: 1em; }
.vcard .avatar {
	float: left;
	margin-right: 14px; }
.vcard .fn {
	font-style: normal;
	font-weight: 600; }
.vcard .fn a, .vcard .says {
	display: inline; }
.comment-meta {
	display: inline-block;
	float: right;
	font-size: 0.9em;
	line-height: 55px;	
	vertical-align: top; }
.comment-meta a, .comment-reply-link {
	color: #888; }
.nocomments {
	font-style: italic; }
/* VARIOUS */
canvas {
	display: none; } 
/*-------------------------------------------
	--->>> ADJUSTING TO SCREEN SIZE
	-------------------------------------------*/
/* WINDOW HEIGHT */
@media screen and (min-height: 0px) and (max-height: 300px) {
.item {
	height: 100%; }	
}
@media screen and (min-height: 300px) and (max-height: 500px) {
.item {
	height: 50%; }	
}
@media screen and (min-height: 500px) and (max-height: 9999px) {	
.item {
	height: calc(100%/3); }
	@media screen and (min-width: 800px) and (max-width: 9999px) {
	#main article:first-child.item {
		height: calc(1.999 * 100%/3); }	
	}
}	
/* WINDOW WIDTH */
@media screen and (min-width: 0px) and (max-width: 400px) {
.info-date {
	display: none; }	
}
@media screen and (min-width: 0px) and (max-width: 800px) {
.item {
	margin-bottom: 1px;
	width: 100%; }
.comment-meta {
	display: none; }	
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
.item {
	width: calc(100%/2); }
#main article:first-child.item {
	width: calc(100%/1); }
}
@media screen and (min-width: 1200px) and (max-width: 9999px) {
.item {
	width: calc(100%/4); }
#main article:first-child.item {
	width: calc(100%/2); }		
}