/* Homepage special links */
@media screen and (min-width: 768px) {

#homepage #nav-art .topnav,#homepage #nav-design .topnav,#homepage #nav-blog .topnav {
	position: fixed;
	top: 100px;
	right: 0;
	font-size: 5em;
	font-weight: bold;
	font-style: italic;
	color: #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	background: transparent;
	width: 25%;
	min-width: 300px;
	text-align: left;
	padding: 0px 20px;
	text-shadow: 0 0 2px #000;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;

	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;

	-webkit-animation: delay 0.5s, enterstageright 0.5s 0.5s;
	-moz-animation: delay 0.5s, enterstageright 0.5s 0.5s;
	-ms-animation: delay 0.5s, enterstageright 0.5s 0.5s;
	animation: delay 0.5s, enterstageright 0.5s 0.5s;
}

#homepage #nav-design .topnav {
	top: 175px;
	right: 10px;

	-webkit-animation: delay 0.6s, enterstageright 0.5s 0.6s;
	-moz-animation: delay 0.6s, enterstageright 0.5s 0.6s;
	-ms-animation: delay 0.6s, enterstageright 0.5s 0.6s;
	animation: delay 0.6s, enterstageright 0.5s 0.6s;
}

#homepage #nav-blog .topnav {
	top: 250px;
	right: 20px;

	-webkit-animation: delay 0.7s, enterstageright 0.5s 0.7s;
	-moz-animation: delay 0.7s, enterstageright 0.5s 0.7s;
	-ms-animation: delay 0.7s, enterstageright 0.5s 0.7s;
	animation: delay 0.7s, enterstageright 0.5s 0.7s;
}

#homepage #nav-art .topnav::before,#homepage #nav-design .topnav::before,#homepage #nav-blog .topnav::before {
	content: "";
	background: url('../images/home-nav.png') no-repeat left top;

	-webkit-background-size: 50%;
	-moz-background-size: 50%;
	background-size: 50%;
	width: 25px;
	height: 45px;
	position: absolute;
	left: -20px;
	top: 15px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
}

#homepage #nav-art:hover .topnav::before,#homepage #nav-design:hover .topnav:before,#homepage #nav-blog:hover .topnav::before {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

#homepage #nav-art:hover .topnav,#homepage #nav-design:hover .topnav,#homepage #nav-blog:hover .topnav {
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	transform: scale(1.4);
}


}


/* IE8 menu fix */
@media screen and (max-width: 1130px) {
.lt-ie9 header,
.lt-ie9 #content-wrapper {width: 300px;}
}




/* Mobile */
@media screen and (max-width: 767px) {
header {
	position: absolute;
	width: 100%;
	height: 60px;
}
.lt-ie9 header,
.lt-ie9 #content-wrapper {width: 100%;}

a .topnav {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
	top: -7px;
	font-size: 0.8em;
	background: none;

	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;
}

#nav-home .topnav,
/*#wrapper.reveal nav,*/
.reveal .illustration-title::before,
.reveal .illustration-title::after,
#content-wrapper::after,
#options-wrapper::after {
	display: none;
}

/*=== Temporary Fix ===*/
.reveal .illustration-expand { display:none; }
/*=== Eww ===*/

#wrapper nav {z-index: 9;}

#content-wrapper,#options-wrapper {
	position: relative;
	width: 100%;
	background: #fff;
	min-width: none;
	padding: 40px 30px 10px 30px;
	margin-bottom: 50px;
}

.illustration-title {position: relative;}

header::after,.illustration-title::after,.illustration-expand::after,#options-wrapper::after {
	display: none;
}

.reveal-content {
	position: absolute;
	top: auto;
	bottom: 0;
	width: 100%;
	margin-left: -40px;
}

.reveal .reveal-content {
	position: absolute;
	top: auto;
	bottom: 0;
	width: 100%;
}

.reveal #nav-art-next {
	right: 30px;
}

.ui-inactive #wrapper nav, .ui-inactive #wrapper #content-wrapper,
#wrapper nav, #wrapper #content-wrapper {
-webkit-animation: none;
animation: none;
-moz-animation: none;
-ms-animation: none;
}

#nav-art-next .glyph,
#nav-art-prev .glyph {
	font-size: 50px;
}
#nav-art-next, #nav-art-prev, #nav-art-prev .glyph, #nav-art-next .glyph { height: 50px; }
#nav-art-latest {margin-top: 43px;}
#nav-art-all {margin-top: 83px;}

#wrapper nav a {z-index: 1;}

.illustration-expand {margin: 5px 0 0 0;}

.reveal .illustration-expand {margin: 0 0 40px 0;}

.illustration-title,
.illustration-expand,
#content-wrapper::after,
.illustration-title::before,
.illustration-title::after {
	right: 0;
	transition: 0;
}

.reveal #art-wrapper {width: 100%; padding: 4%;}
#art #art-wrapper {position: relative;}
#art #art-wrapper img, #art #art-wrapper img.fit {
	position: relative;
	margin: 0 auto !important;
	width: 100% !important;
	height: auto !important;
	top: 0;
	cursor: default;
	object-fit: unset;
}


/* Design */
#design-wrapper {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;
	position: relative;
	right: 0px;
	left: 0px;
	padding: 30px 10px 10px 10px;
	height: auto;
}

#design-wrapper li a {
	width: 100%;
	height: auto;
}

#design-wrapper li {
	margin: 0;
	width: 50%;
	padding: 10px;
}

#design-wrapper li h2 {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;
	font-size: 0.75em;
}

#design-wrapper .filter-show {
	display: inline-block;
}

#design-filter li:nth-child(1),#design-filter li:nth-child(2),#design-filter li:nth-child(3),#design-filter li:nth-child(4) {
	left: 0px;
}

#design-filter, #design-filter-all {font-size: 0.85em;}
#options-wrapper li::before {font-size: 17px;}

#design-modal {
	-webkit-transform: translate(-200%,0);
	-moz-transform: translate(-200%,0);
	-ms-transform: translate(-200%,0);
	transform: translate(-200%,0);
}

#design-details {
	position: relative;
	width: 100%;
	padding: 20px 20px 20px 60px;
	z-index: 8;
}

#design-modal-inner {
	padding: 7em 30px 30px 30px;
	position: absolute;
	top: 0;
}
.modal-close, .blog-back {top: 5px;}
#design-modal .modal-close {color: #435260 !important;}

#design-modal article {
	padding: 0 0 40px 0;
}

#design-modal-inner .comment,
#design-modal-inner .comment.down {
	width: auto;
	margin-left: 0;
}

/* blog */

.tag {display: none;}

.blog-listing ul, .article-meta {
	position: relative;
	top: 0;
	right: 0;
	margin: 10px 0 0 0;
	padding: 0;
	text-align: left;
}
.article-meta {font-size: 1em;}
#article-wrapper h1 {padding: 0;}
#featured ul { top: 0; }
#featured h2 { padding: 0; margin: 0; }
#featured article {margin: 0;}
#featured img {display: none;}

.blog-listing { padding: 30px; }
#featured, #article-wrapper {padding: 30px; }
#blog-wrapper {padding-top: 60px;}

#article-wrapper {font-size: 0.75em;}
#article-wrapper img {width: 100%; margin:  20px 0;}

#article-wrapper ul, #article-wrapper ol {padding-left: 30px;}
#article-wrapper .article-meta {padding: 0 0 20px 0;}

.blog-back {display: none;}

#blog-wrapper h2 {font-size: 1.75em;}

.pagination {padding: 0 50px;}

.pagination .next, .pagination .prev {
	font-size: 0.75em;
	top: 5px;
}

#comments {padding: 100px 30px;}
#comments .icon-arrow-right { position: relative; left: 0; top: 0; }
#comments:hover .icon-arrow-right { left: 20px; }

blockquote::before, blockquote::after, pre::before, pre::after {content: none;}

blockquote, pre {
	margin: 0 -30px 20px -30px;
	padding: 2em 30px;
}


/* About */
#about-wrapper {
	-webkit-transform: translate(200%,0);
	-moz-transform: translate(200%,0);
	-ms-transform: translate(200%,0);
	transform: translate(200%,0);
	z-index: 9;
}

#about-wrapper img {
	display: none;
}

.about-text {
	left: 0;
	width: 100%;
}

#about-content ul {
	font-size: 1.2em;
}

#show-faq, #hide-faq {
	top: -45px;
	left: auto;
	right: 0;
	text-align: right;
}

#show-faq .glyph, #hide-faq .glyph {
	font-size: 0.75em;
	top: 5px;
	position: static;
	display: inline;
}

.faq-text, #hide-faq .faq-text {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;
	top: 0;
	position: static;
	display: inline;
}

#fack-yous .col {
	float: none;
	width: 100%;
	height: auto;
	padding: 0;
	overflow: visible;
	padding-bottom: 40px;
}

#faq-wrap {
	overflow-y: scroll;
	height: 100%;
	margin: -20px;
	padding: 20px;
}

#fack-yous h2 {
	margin: 0 0 20px 0;
}


/* Error page */

#countdown::after {content: none;}
#countdown {
	position: absolute;
	top: 0;
	right: -70px;
	width: 2em;
	min-width: 0;
	font-size: 3em;
}


}

/* End of mobile */
/* Gallery all listing */
@media screen and (min-width: 0px) {
	#gallery-all li {width: 16.666%;}
}

@media screen and (max-width: 1600px) {
	#gallery-all li {width: 20%;}
}

@media screen and (max-width: 1200px) {
	#gallery-all li {width: 25%;}
	#design-modal-inner h3 { font-size: 5em; }
	#design-modal-inner p { font-size: 1.3em; }
}

@media screen and (max-width: 1000px) {
	#gallery-all li {width: 33.333%;}
	#design-modal-inner h3 { font-size: 4em; }
	#design-modal-inner p { font-size: 1.15em; }
}

@media screen and (max-width: 800px) {
	#gallery-all li {width: 50%;}
	#design-modal-inner h3 { font-size: 3em; }
	#design-modal-inner p { font-size: 1em; }
}

@media screen and (max-width: 600px) {
	#gallery-all li {width: 100%;}
	#design-modal-inner h3 { font-size: 2em; }
	#design-modal-inner p { font-size: 0.85em; }
}

@media screen and (min-width: 1200px) {
	.reveal #nav-art-next {right: 25%; margin-right: 100px;}
	#design-wrapper { right: 25%; }
}



/* 404 */

@media screen and (max-width: 1000px) {
#error h1 {font-size: 5em;}
#error #wrapper {width: 28em;}
#error p {font-size: 1em;}
}

@media screen and (max-width: 850px) {
#error h1 {font-size: 3em;}
#error #wrapper {width: 17em;}

}


/* For bigger screens */

@media screen and (min-width: 1200px) {
.illustration-expand {font-size: 1.2em;}
#article-wrapper article {font-size: 1.5em;}
}

@media screen and (min-width: 1600px) {
.illustration-expand {font-size: 1.3em;}
#article-wrapper article {font-size: 1.6em;}
}


/* For Retina screens */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    header nav li.new::before {
    background: url('../images/starx2.png') 50% 50% no-repeat, -webkit-linear-gradient(top, #809fba, #435260);
    background: url('../images/starx2.png') 50% 50% no-repeat, -moz-linear-gradient(top, #809fba, #435260);
    background: url('../images/starx2.png') 50% 50% no-repeat, -ms-linear-gradient(top, #809fba, #435260);
    background: url('../images/starx2.png') 50% 50% no-repeat, linear-gradient(top, #809fba, #435260);
    
    background-size: 50% 50%, 100% 100%;
    }
}