@charset "utf-8";
/*
Portfolio style sheet;
Output: Screen
Author: Sergionoriega.com
March 2014
--------------------------------------*/


/* Listado
----------------------------------------------------------------------*/
#projects li:nth-child(1n+0) {
	background-color: #70b6df;
}
#projects li:nth-child(2n+0) {
	background-color: #4fb7ab;
}
#projects li:nth-child(3n+0) {
	background-color: #f291c1;
}
#projects li:nth-child(4n+0) {
	background-color: #ffcb6d;
}
#projects li:nth-child(5n+0) {
	background-color: #ea6;
}
#projects li:nth-child(6n+0) {
	background-color: #70b6df;
}
#projects li:nth-child(7n+0) {
	background-color: #4fb7ab;
}
#projects li:nth-child(8n+0) {
	background-color: #f291c1;
}
#projects li:nth-child(9n+0) {
	background-color: #ffcb6d;
}
#projects li:nth-child(10n+0) {
	background-color: #ea6;
}
#projects li:nth-child(11n+0) {
	background-color: #70b6df;
}
#projects li:nth-child(12n+0) {
	background-color: #4fb7ab;
}

#projects li a {
	background-position: center 100%;
	background-repeat: no-repeat;
	transition: background-position .3s;
	background-size: cover;
}
.no-touch #projects li a:hover {
	background-position: center 0px;
}
#projects li.current {
	background: #f5f5f5;
}
#projects li.current ul {
	display: none;
}
#projects li.current a, .no-touch #projects li.current a:hover {
	background-position: center 100%;
	cursor: default;
}
#projects li ul {
	position: absolute;
	bottom: -100%;
	width: 100%;
	text-align: left;
	transition: all .3s;
	opacity: 0;
	background: #f5f5f5;
	overflow: hidden;
}
#projects li ul.trece {
	padding-top: 24px;
}
#projects li ul:hover {
	overflow: visible;
}
#projects li a:hover ul {
	bottom: 0;
	opacity: .9;
}
#projects li li {
	width: 2em;
	text-align: center;
	display: block;
	text-indent: 0;
	padding: .375em 0;
	font: normal .6666em "Tamal";
	transition: all .3s;
	position: static;
	box-sizing: border-box;
	color: #444;
}
#projects li li:first-child {
	margin-left: .5em;
}
#projects li a li, #projects li a:hover lin {
	color: #f5f5f5;
}
#projects li a li:hover, #projects li a:hover li:hover {
	color: #f5f5f5;
	background-color: #411;
}
#projects li li span {
	position: absolute;
	bottom: 200%;
	width: 100%;
	opacity: 0;
	left: 0;
	text-align: left;
	padding: .5em .625em 0;
	box-sizing: border-box;
	font: normal 1em "Sanuk", Helvetica, Arial, sans-serif;
	letter-spacing: -1px;
	transition: all .3s;
	color: #111;
}
#projects li a:hover li span, #projects li a:active li span {
	color: #111;
}
#projects li li:hover span, #projects li li:active span {
	opacity: 1;
	bottom: 2em;
}

/* Button backgrounds
----------------------------------------------------------------------*/
#projects li#ptocarta a {
	background-image: url(../img/portfolio/tocarta.png);
}
#projects li#pwebetes a {
	background-image: url(../img/portfolio/webetes.png);
}
#projects li#pchococlack a {
	background-image: url(../img/portfolio/chococlack.png);
}
#projects li#psideburns a {
	background-image: url(../img/portfolio/sideburns.png);
}
#projects li#plladro a {
	background-image: url(../img/portfolio/lladro.png);
}
#projects li#pencrucijada a {
	background-image: url(../img/portfolio/encrucijada.png);
}
#projects li#pasja a {
	background-image: url(../img/portfolio/asja.png);
}
#projects li#proleage a {
	background-image: url(../img/portfolio/roleage.png);
}
#projects li#pcplanet a {
	background-image: url(../img/portfolio/cplanet.png);
}
#projects li#psomilar a {
	background-image: url(../img/portfolio/somilar.png);
}
#projects li#pveneto a {
	background-image: url(../img/portfolio/veneto.png);
}
#projects li#preba a {
	background-image: url(../img/portfolio/reba.png);
}
#projects li#pgalletas a {
	background-image: url(../img/portfolio/galletas.png);
}

#projects li#ptocarta.current a {
	background-image: url(../img/portfolio/h-tocarta.png);
}
#projects li#pwebetes.current a {
	background-image: url(../img/portfolio/h-webetes.png);
}
#projects li#pchococlack.current a {
	background-image: url(../img/portfolio/h-chococlack.png);
}
#projects li#psideburns.current a {
	background-image: url(../img/portfolio/h-sideburns.png);
}
#projects li#plladro.current a {
	background-image: url(../img/portfolio/h-lladro.png);
}
#projects li#pencrucijada.current a {
	background-image: url(../img/portfolio/h-encrucijada.png);
}
#projects li#pasja.current a {
	background-image: url(../img/portfolio/h-asja.png);
}
#projects li#proleage.current a {
	background-image: url(../img/portfolio/h-roleage.png);
}
#projects li#pcplanet.current a {
	background-image: url(../img/portfolio/h-cplanet.png);
}
#projects li#psomilar.current a {
	background-image: url(../img/portfolio/h-somilar.png);
}
#projects li#pveneto.current a {
	background-image: url(../img/portfolio/h-veneto.png);
}
#projects li#preba.current a {
	background-image: url(../img/portfolio/h-reba.png);
}
#projects li#pgalletas.current a {
	background-image: url(../img/portfolio/h-galletas.png);
}

/* Zurron
----------------------------------------------------------------------*/
.cover {
	position: relative;
	height: 24em;
}
.cover, #projects li {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Heading Images */
#asja .cover {
	background-image :url(../../zurron/asja/01.jpg);
}
#chococlack .cover {
	background-image :url(../../zurron/chococlack/01.jpg);
}
#cplanet .cover {
	background-image :url(../../zurron/clean-planet/01.jpg);
}
#encrucijada .cover {
	background-image :url(../../zurron/encrucijada/01.jpg);
}
#lladro .cover {
	background-image :url(../../zurron/lladro/01.jpg);
}
#reba .cover {
	background-image :url(../../zurron/reba/01.jpg);
}
#roleage .cover {
	background-image :url(../../zurron/roleage/01.jpg);
}
#sideburns .cover {
	background-image :url(../../zurron/sideburns/01.jpg);
	background-position: center top;
}
#somilar .cover {
	background-image :url(../../zurron/somilar/01.jpg);
}
#tocarta .cover {
	background-image :url(../../zurron/tocarta/01.jpg);
}
#veneto .cover {
	background-image :url(../../zurron/veneto/01.jpg);
}
#galletas .cover {
	background-image :url(../../zurron/galletas/01.jpg);
}
#webetes .cover {
	background: #ef3f3e url(../../zurron/webetes/01.png) center 15px no-repeat;
	background-size: contain;
}

@media screen and (max-width: 380px) {
#projects li:nth-child(4n) {
    background-color: #f0bc5d;
}
#projects li a, .no-touch #projects li a:hover {
	background-position: center 0px;
}
#projects li li span {
	left: .3125em;
}
#projects li li:first-child {
    margin-left: .85em;
}
#projects li ul {
	bottom: 0;
	opacity: 1;
}
#projects li li {
	margin-top: 0;
}

/* Button backgrounds Mobile
----------------------------------------------------------------------*/
#projects li#ptocarta a, #projects li#ptocarta.current a {
	background-image: url(../img/portfolio/mobile/tocarta.jpg);
}
#projects li#pwebetes a, #projects li#pwebetes.current a {
	background-image: url(../img/portfolio/mobile/webetes.jpg);
}
#projects li#pchococlack a, #projects li#pchococlack.current a {
	background-image: url(../img/portfolio/mobile/chococlack.jpg);
}
#projects li#psideburns a, #projects li#psideburns.current a {
	background-image: url(../img/portfolio/mobile/sideburns.jpg);
}
#projects li#plladro a, #projects li#plladro.current a {
	background-image: url(../img/portfolio/mobile/lladro.jpg);
}
#projects li#pencrucijada a, #projects li#pencrucijada.current a {
	background-image: url(../img/portfolio/mobile/encrucijada.jpg);
}
#projects li#pasja a, #projects li#pasja.current a {
	background-image: url(../img/portfolio/mobile/asja.jpg);
}
#projects li#proleage a, #projects li#proleage.current a {
	background-image: url(../img/portfolio/mobile/roleage.jpg);
}
#projects li#pcplanet a, #projects li#pcplanet.current a {
	background-image: url(../img/portfolio/mobile/cplanet.jpg);
}
#projects li#psomilar a, #projects li#psomilar.current a {
	background-image: url(../img/portfolio/mobile/somilar.jpg);
}
#projects li#pveneto a, #projects li#pveneto.current a {
	background-image: url(../img/portfolio/mobile/veneto.jpg);
}
#projects li#preba a, #projects li#preba.current a {
	background-image: url(../img/portfolio/mobile/reba.jpg);
}
#projects li#pgalletas a, #projects li#pgalletas.current a {
	background-image: url(../img/portfolio/mobile/galletas.jpg);
}
#projects li.current {
	display: none;
}
}