/* -------------------------------------------------- */
/*	OVERRIDES
/* -------------------------------------------------- */

article {
	text-align: center;
}

section.color article,
section.background article {
	max-width: 400px;
	margin: auto;
}

section#projects h2 {
	margin: 0 auto;
}

section#projects {
	padding: 15px 0px 15px calc(var(--menu-width)) !important;
}

/* Desktop */
@media screen and (max-width: 920px) {
	section#projects.carousel button.prev {
		left: calc(15px + var(--menu-width));
	}

	section#projects.carousel button.next {
		right: 15px;
	}
}

/* Mobile */
@media screen and (min-width: 920px) {

	section#projects.carousel button.prev {
		left: calc(135px + var(--menu-width));
	}

	section#projects.carousel button.next {
		right: 135px;
	}
}

/* -------------------------------------------------- */
/*	BACKGROUND
/* -------------------------------------------------- */

/*
section#model.background {
	background-image: url("/content/background/model");
	background-repeat: no-repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	    -ms-background-size: cover;
	        background-size: cover;
}
*/

section#posts.background {
	background-image: url("/content/background/code");
	background-repeat: no-repeat;

	-webkit-background-position: 67% 50%;
	   -moz-background-position: 67% 50%;
	     -o-background-position: 67% 50%;
	    -ms-background-position: 67% 50%;
	        background-position: 67% 50%;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	    -ms-background-size: cover;
	        background-size: cover;
}

section#demo.background {
	background-image: url("/content/background/demo");
	background-repeat: repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: contain;
	   -moz-background-size: contain;
	     -o-background-size: contain;
	    -ms-background-size: contain;
	        background-size: contain;
}

/* -------------------------------------------------- */
/*	PROJECTS
/* -------------------------------------------------- */

section#projects .list > * > * {
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
}

section#projects .thumb:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url("/content/svg/lock");
	background-repeat: no-repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: 15%;
	   -moz-background-size: 15%;
	     -o-background-size: 15%;
	    -ms-background-size: 15%;
	        background-size: 15%;

	filter:
		invert(44%)
		sepia(11%)
		saturate(2757%)
		hue-rotate(238deg)
		brightness(93%)
		contrast(90%);
}

section#projects .thumb .icon {
	position: absolute;
	top: 0;
	left: 0;

	width: calc(100% - 64px);
	height: calc(100% - 64px);

	margin: 32px;

	background-repeat: no-repeat;

	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	    -ms-background-position: center;
	        background-position: center;

	-webkit-background-size: contain;
	   -moz-background-size: contain;
	     -o-background-size: contain;
	    -ms-background-size: contain;
	        background-size: contain;
}