/* FUENTES */
@font-face {
	font-family: "GingerBread";
	src: url(../res/fonts/Gingerbread-House.ttf);
}
@font-face {
	font-family: "Kiddo";
	src: url(../res/fonts/Kiddo-soup.ttf);
}

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

/* FONDO */
body {	
	background: url(../res/img/fondo-negro.jpg) repeat center center;
    background-size: cover;
	overflow-x: hidden;
}

/* TITULO */
header {
	text-align: center;
	position: relative;
}
#titulo {
	color: white;
	font-family: GingerBread;
	font-size: 5em;
	word-spacing: 0.5em;
	letter-spacing: 0.2em;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
header img {
	width: 20em;
	margin-top: 3em;
	margin-bottom: 3em;
}
h2, h3 {
	text-align: center;
	text-transform: uppercase;
	color: white;
	font-family: Kiddo;
}
h2 {
	letter-spacing: 0.25em;
	font-size: 2em;
}
h3 {
	letter-spacing: 0.1em;
	font-size: 1.5em;
}
a {
	color: white;
	font-family: Kiddo;	
}
a.grande {
	text-align: center;
	font-size: 1.5em;
	display: block;
}

/* IDIOMA */
menu {
	color: white;
	font-family: Kiddo;	
	position: absolute;
	z-index: 999;
}
menu .idioma {
	cursor: pointer;
}
menu .idioma.selected {
	font-weight: bold;	
	text-decoration: underline;
}

/* CIRCULOS */
.row {
	display: flex;
	justify-content: center;
}
.row > div {	
	width: 13em;
	height: 13em;
	margin: 0.4em 2em;
}
.row .logo {
	width: 8em;
	height: 8em;
	transform: translateY(4em);
}
.row > div.subir {
	transform: translateY(-2em);
}
.row > div > .circulo-img {
	width: 100%;
	height: 100%;	
}
.row .circulo > .circulo-img {
	border-radius: 100%;
	position: absolute;
}
.row .circulo {
	background: url(../res/img/textura.jpg) fixed;
	border-radius: 100%;
	cursor: pointer;
	box-shadow: inset black 0 0 0.25em 0.25em;
	position: relative;
}
.row .circulo .icono {
	width: 50%;
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}
.row .circulo:hover {
	transform: scale(1.05);
}
.row .circulo.subir:hover {
	transform: scale(1.05) translateY(-2em);
}
.circulo .texto {
	font-family: Kiddo;
	color: white;
	position: absolute;
	font-size: 2em;
	width: 100%;
	height: 100%;
}
#verano .icono, #otros .icono {
	width: 70%;
}

/* TEXTOS */
.circulo .texto div {
	top: -1.5em;
}
#portafolio .texto div, #instaTienda .texto div {
	top: unset;
	bottom: -6.5em;
}

/* CRYBABY */
#crybaby {
	position: fixed;	
	bottom: 0;
	right: 0;
}
#crybaby img {
	width: 15em;
	height: auto;
}

p.texto {
	color: white;
	font-family: Kiddo;
	font-size: 2em;
	padding: 0 5em;
}
p.texto.centrado {
	text-align: center;
}


/* RESPONSIVE */
@media only screen 
and (max-device-width : 480px) {

body {
	background: url(../res/img/fondo-negro.jpg) repeat center center fixed;
}

#titulo {
	font-size: 7em;
}

header img {
	width: 40em;
	margin-top: 3em;
	margin-bottom: 3em;
}

.row > div {
	width: 18em;
	height: 18em;
	margin: 0 2em;
}

.row > div.subir {
	transform: translateY(-3em);	
}

.row .logo {
	width: 10em;
	height: 10em;
	transform: translateY(5em);
}

.circulo .texto {
	font-size: 2.5em;
}

#portafolio .texto div, #instaTienda .texto div {
	bottom: -7.25em;
}

h2, h3 {
	margin-bottom: 2em;
}
a.grande {
	text-align: center;
	font-size: 2.5em;
	display: block;
}

menu {
	color: white;
	font-family: Kiddo;	
	font-size: 1.5em;
}
menu .idioma {
	cursor: pointer;
}
menu .idioma.selected {
	font-weight: bold;	
	text-decoration: underline;
}

}

@media only screen 
and (max-device-height : 600px) {
	
#crybaby {
	width: 100%;
    transform: scale(0.75);
    bottom: -3em;
}
#crybaby img {
	margin: auto;
}

menu {
	color: white;
	font-family: Kiddo;	
	font-size: 1.5em;
}
menu .idioma {
	cursor: pointer;
}
menu .idioma.selected {
	font-weight: bold;	
	text-decoration: underline;
}


}