@font-face {
	font-family: 'NON Sans';
	src: url('fonts/NONSans-Light.eot');
	src: url('fonts/NONSans-Light.woff2') format('woff2'),
		url('fonts/NONSans-Light.woff2') format('woff'),
		url('fonts/NONSans-Light.ttf') format('truetype'),
        url('fonts/NONSans-Light.svg#NONSans-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'NON Sans';
	src: url('fonts/NONSans-Regular.eot');
	src: url('fonts/NONSans-Regular.woff2') format('woff2'),
		url('fonts/NONSans-Regular.woff2') format('woff'),
		url('fonts/NONSans-Regular.ttf') format('truetype'),
        url('fonts/NONSans-regular.svg#NONSans-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'NON Sans';
	src: url('fonts/NONSans-Bold.eot');
	src: url('fonts/NONSans-Bold.woff2') format('woff2'),
		url('fonts/NONSans-Bold.woff2') format('woff'),
		url('fonts/NONSans-Bold.ttf') format('truetype'),
        url('fonts/NONSans-Bold.svg#NONSans-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}


/* Reset */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

html,
body {
	margin: 0;
	padding: 0;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

button:focus {
	outline:0;
}

*, *:before, *:after {
	box-sizing: border-box;
}


/* Style */

body {
	font-family: 'NON Sans', sans;
	font-weight: normal;
	font-size: 16px;
	color: #fff;
	overflow: hidden;
	background: #000;
}

.logo {
	position: fixed;
	top: 0;
	right: 10%;
	width: 200px;
}

.rxy {
	width: 60px;
	margin-bottom: 20px;
}

.info {
	border: none;
	color: #fff;
	background: #000;
	position: fixed;
	bottom: 25px;
	left: 25px;
	padding: 5px 15px;
	z-index: 2;
}

.info:hover {
	background: #fff;
	color: #000;
}

.instagram {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 25px;
	fill: #fff;
	z-index: 3;
}

.instagram:hover {
	opacity: 0.5;
}

#info {
	display: none;
	z-index: 2;
	background: #000;
	width: 25%;
	height: 100%;
	padding: 50px 50px 50px 50px;
	position: absolute;
	left: 0;
	top: 0;
}

.negativo {
	width: 75%;
	height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	background: transparent;
	border: none;
}

.cerrar {
	border: none;
	fill: #fff;
	background: none;
	position: absolute;
	top: 15px;
	right: 15px;
}

.cerrar svg {
	width: 15px;
}

.texto p {
	margin-bottom: 20px;
}

.motto {
	position: fixed;
	margin-top: 20px; 
	left: 22%;
}

.motto h4 {
	font-size: 36px;
	font-weight: 300;
}

address {
	position: fixed;
	bottom: 50px;
}

address a {
	color: #fff;
	text-decoration: none;
	display: block;
}

address a:hover {
	text-decoration: underline;
}

.direccion {
	margin-bottom: 15px;
}


/* Slideshow */

.slideshow,
.slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
}

.slideshow:after {
	content: '';
	background: transparent url(img/pattern.svg) repeat top left;
	background-size: 15px;
	opacity: 0.75;
}

.slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: 0;
	transform: translateZ(0); /* Hace pensar que hará 3D para que use GPU en lugar de CPU */
	-webkit-backface-visibility: hidden;
	-webkit-animation: slideShow 66s linear infinite 0s;
	-moz-animation: slideShow 66s linear infinite 0s;
	-o-animation: slideShow 66s linear infinite 0s;
	-ms-animation: slideShow 66s linear infinite 0s;
	animation: slideShow 66s linear infinite 0s;
}

.slideshow li:nth-child(1) span {
	background-image: url(img/01.jpg)
}

.slideshow li:nth-child(2) span {
	background-image: url(img/02.jpg);
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
	background-image: url(img/03.jpg);
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
	background-image: url(img/04.jpg);
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s;
}

.slideshow li:nth-child(5) span {
	background-image: url(img/05.jpg);
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s;
}

.slideshow li:nth-child(6) span {
	background-image: url(img/06.jpg);
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 30s;
}

.slideshow li:nth-child(7) span {
	background-image: url(img/07.jpg);
	-webkit-animation-delay: 36s;
	-moz-animation-delay: 36s;
	-o-animation-delay: 36s;
	-ms-animation-delay: 36s;
	animation-delay: 36s;
}

.slideshow li:nth-child(8) span {
	background-image: url(img/08.jpg);
	-webkit-animation-delay: 42s;
	-moz-animation-delay: 42s;
	-o-animation-delay: 42s;
	-ms-animation-delay: 42s;
	animation-delay: 42s;
}

.slideshow li:nth-child(9) span {
	background-image: url(img/09.jpg);
	-webkit-animation-delay: 48s;
	-moz-animation-delay: 48s;
	-o-animation-delay: 48s;
	-ms-animation-delay: 48s;
	animation-delay: 48s;
}

.slideshow li:nth-child(10) span {
	background-image: url(img/10.jpg);
	-webkit-animation-delay: 54s;
	-moz-animation-delay: 54s;
	-o-animation-delay: 54s;
	-ms-animation-delay: 54s;
	animation-delay: 54s;
}

.slideshow li:nth-child(11) span {
	background-image: url(img/11.jpg);
	-webkit-animation-delay: 60s;
	-moz-animation-delay: 60s;
	-o-animation-delay: 60s;
	-ms-animation-delay: 60s;
	animation-delay: 60s;
}


/* Animation */

@-webkit-keyframes slideShow {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
	}

	8% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-out;
	}

	17% {
		opacity: 1;
		-webkit-transform: scale(1.1);
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}

	100% {
		opacity: 0
	}
}

@-moz-keyframes slideShow {
	0% {
		opacity: 0;
		-moz-animation-timing-function: ease-in;
	}

	8% {
		opacity: 1;
		-moz-transform: scale(1.05);
		-moz-animation-timing-function: ease-out;
	}

	17% {
		opacity: 1;
		-moz-transform: scale(1.1);
	}

	25% {
		opacity: 0;
		-moz-transform: scale(1.1);
	}

	100% {
		opacity: 0
	}
}

@-o-keyframes slideShow {
	0% {
		opacity: 0;
		-o-animation-timing-function: ease-in;
	}

	8% {
		opacity: 1;
		-o-transform: scale(1.05);
		-o-animation-timing-function: ease-out;
	}

	17% {
		opacity: 1;
		-o-transform: scale(1.1);
	}

	25% {
		opacity: 0;
		-o-transform: scale(1.1);
	}

	100% {
		opacity: 0
	}
}

@-ms-keyframes slideShow {
	0% {
		opacity: 0;
		-ms-animation-timing-function: ease-in;
	}

	8% {
		opacity: 1;
		-ms-transform: scale(1.05);
		-ms-animation-timing-function: ease-out;
	}

	17% {
		opacity: 1;
		-ms-transform: scale(1.1);
	}

	25% {
		opacity: 0;
		-ms-transform: scale(1.1);
	}

	100% {
		opacity: 0
	}
}

@keyframes slideShow {
	0% {
		opacity: 0;
		animation-timing-function: ease-in;
	}

	8% {
		opacity: 1;
		transform: scale(1.05);
		animation-timing-function: ease-out;
	}

	17% {
		opacity: 1;
		transform: scale(1.1);
	}

	25% {
		opacity: 0;
		transform: scale(1.1);
	}

	100% {
		opacity: 0
	}
}


/* Mobile */

@media screen and (max-width: 767px) {
	#info {
		width: 100%;
		padding: 50px 25px 25px 25px;
	}

	.negativo {
		display: none;
	}

	.motto {
		display: none; 
	}

	address {
		position: absolute;
		bottom: 25px;
	}
}