/* CSS Document */
/* Documento creado por Adumbro */
/* https://www.adumbro.es */

/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Bold.woff2') format('woff2'),
        url('font/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Italic.woff2') format('woff2'),
        url('font/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.woff2') format('woff2'),
        url('font/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noteworthy';
    src: url('font/Noteworthy-Bold.woff2') format('woff2'),
        url('font/Noteworthy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
	display: block;
	font-family: 'Montserrat', sans-serif, monospace; color: #333;
    font-size: calc(.5em + 1vw); min-height: 0vw;
	background-color: #fff;
    color: #333; 
}
body {
	display: block;
    
	background: #7fbfdf url("img/fnd_pagina.png") repeat-y top center;
}
div#continente {display: block; background: transparent url("img/fnd_copos.png") repeat top left;}
.contenido {display: block; width: 100%; height: auto; padding: 0 2vw;}

a {color: #2887bf;}
a.link {
	color: #2887bf;
	text-decoration: underline;
}
a.link:hover {
	color: #970353;
	text-decoration: none;
}
img {border: 0px;}
.clear {
	display: block;
	clear: both;
}
.loader {background: transparent url("img/loader.gif") no-repeat center center; background-size: 3rem auto;}

/* formularios */
div.formulario textarea, div.formulario input[type="text"] {display: block; color: #2887bf; overflow: hidden; border: none; background-color: transparent; font-family: 'Montserrat', sans-serif, monospace;}
/* botones */
button {
    display: inline-block; padding: .1rem 1rem; outline: none; cursor: pointer; 
    border: .2rem solid #970353; background-color: #d80576; color: #fff; border-radius: .5rem;
    font-family: 'Montserrat'; font-weight: bold; font-style: normal; text-transform: uppercase; font-size: 1rem;
    box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5);
}
button:not(.blue):hover {background-color: #970353;}
button:active {transform: scale(.9); box-shadow: none;}
button.blue {border: .2rem solid #1d6189; background-color: #2887bf;}
button.blue:hover {background-color: #1d6189;}

/* ventana modal*/
div#modal {
	display: none;
	background: transparent url("img/fnd_modal.png") repeat;
	width: 100%; height: 100%;
	position: fixed; z-index: 100;
	top: 0; left: 0;
	cursor: default;
}
div#modal div#mensaje {display: none; width: 50%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1rem; background-color: #fff; border: 1vw solid #72acc9;}
div#modal div#mensaje h2 {display: block; margin-bottom: 1rem; font-size: 1.5rem; color: #1d6189; font-weight: bold; text-align: center; padding-bottom: 6px; border-bottom: .2rem dotted #72acc9;}
div#modal div#mensaje div.texto {display: block; margin-bottom: 20px; font-size: 1.1rem; color: #000; text-align: center;}
div#modal div#mensaje div.texto p {padding-bottom: 1rem;}
div#modal div#mensaje div.texto p.mini {font-size: .9rem;}
div#modal div#mensaje div.botones {text-align: center;}
div#modal div#cargando {display: none; width: 60%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1rem; border: 1vw solid #72acc9; background-color: #fff; text-align: center;}
div#modal div#cargando p {display: block; font-size: 1.5rem; color: #1d6189; padding-bottom: 2rem; background: transparent url("img/loader_2.gif") no-repeat bottom center; background-size: auto 1rem;}
@media (max-width: 800px) {
    div#modal div#mensaje {width: 80%;}
}

/* BLOQUE CABECERA *****************/
header {padding-top: 1em;}
header h1 a span {display: none;}
header h1 {
	display: block;
	background: transparent url("img/logo_adumbro.svg") no-repeat top center; background-size: contain;
	width: 10em; height: 3.5em;
	margin: 0 auto;
}
header h1 a {display: block; width: 100%; height: 100%;}
header p {display: block; text-align: center; font-size: 2rem; color: #1d6189; padding: 1rem 0;}
header p em {font-family: 'Noteworthy';}

/* BLOQUE CUERPO *****************/
div.cuerpo {display: block; height: auto;}

div.cuerpo div.seleccion {display: block; background-color: transparent;}
div.cuerpo div.seleccion p.resaltar {display: block; text-align: center; font-size: 1em; color: #1d6189; padding-bottom: 2rem;}
div.cuerpo div.seleccion div.felicitaciones {display: block; overflow: hidden; height: auto; width: 100%;}
div.cuerpo div.seleccion div.felicitaciones ul {
    display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start;
    width: 100%; height: auto; list-style: none;
}
div.cuerpo div.seleccion div.felicitaciones ul li {
    display: block; width: 32%; height: auto; margin-bottom: 2vw;
}
div.cuerpo div.seleccion div.felicitaciones ul li img {display: block; visibility: hidden; width: 100%; height: auto; position: relative;}
div.cuerpo div.seleccion div.felicitaciones ul li a {display: block; width: 100%; height: 100%; position: relative;}
div.cuerpo div.seleccion div.felicitaciones ul li a div {
    display: block; width: 90%; height: 90%; position: absolute;
    background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: contain;
    transition: transform .3s ease; box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5);
}
div.cuerpo div.seleccion div.felicitaciones ul li a.r1 div {position: absolute; top: 2%; left: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r2 div {position: absolute; top: 2%; left: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r3 div {position: absolute; top: 2%; right: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r4 div {position: absolute; top: 2%; right: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r5 div {position: absolute; bottom: 2%; right: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r6 div {position: absolute; bottom: 2%; right: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r7 div {position: absolute; bottom: 2%; left: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r8 div {position: absolute; bottom: 2%; left: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r1:hover div {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r2:hover div {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r3:hover div {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r4:hover div {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r5:hover div {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r6:hover div {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r7:hover div {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r8:hover div {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a::before {
    display: block; content: ""; width: 90%; height: 90%;
    background: transparent url('/ecards/navidad/sobre.jpg') no-repeat center center; background-size: contain;
    transition: transform .3s ease; box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5); 
}
div.cuerpo div.seleccion div.felicitaciones ul li a.r1::before {position: absolute; bottom: 2%; right: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r2::before {position: absolute; bottom: 2%; right: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r3::before {position: absolute; bottom: 2%; left: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r4::before {position: absolute; bottom: 2%; left: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r5::before {position: absolute; top: 2%; left: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r6::before {position: absolute; top: 2%; left: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r7::before {position: absolute; top: 2%; right: 2%; transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r8::before {position: absolute; top: 2%; right: 2%; transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r1:hover::before {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r2:hover::before {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r3:hover::before {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r4:hover::before {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r5:hover::before {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r6:hover::before {transform: rotate(-2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r7:hover::before {transform: rotate(2deg);}
div.cuerpo div.seleccion div.felicitaciones ul li a.r8:hover::before {transform: rotate(-2deg);}
@media (max-width: 900px) {
    div.cuerpo div.seleccion div.felicitaciones ul li {width: 49%;}
}
@media (max-width: 400px) {
    div.cuerpo div.seleccion div.felicitaciones ul li {width: 98%;}
}

div.cuerpo div.felicitacion {display: none; width: 60%; height: auto; margin: 0 auto; position: relative;}
div.cuerpo div.felicitacion label.txt {display: none;}
div.cuerpo div.felicitacion div.sobre {display: none; width: 95%; height: auto; position: relative; top: 2rem; left: 0px; margin-bottom: 4rem; background: transparent url("../ecards/navidad/sobre.jpg") no-repeat center center; background-size: contain; z-index: 10; box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5);}
div.cuerpo div.felicitacion div.sobre > figure img {display: block; width: 100%; height: auto; visibility: hidden;}
div.cuerpo div.felicitacion div.sobre div.remitente {display: block; position: absolute; top: 14.5%; left: 11%; width: 46%; height: 40%; padding-left: 1.8rem; background: transparent url('img/ico_user.svg')no-repeat top left; background-size: 1.5rem auto;}
div.cuerpo div.felicitacion div.sobre div.remitente input[type="text"] {display: block; width: 88.5%; height: 13%; padding: 1%; margin-bottom: 3%; font-size: 90%; position: relative; border-radius: .3rem; background-color: #d1e3ef; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
div.cuerpo div.felicitacion div.sobre div.remitente label:not(.txt) {display: block; margin-bottom: 3%; font-size: .9rem; color: #1d6189; cursor: pointer; position: relative;}
div.cuerpo div.felicitacion div.sobre div.remitente label:not(.txt)::before {display: inline-block; content: ""; width: 1rem; height: 1rem; vertical-align: middle; margin-right: .3rem; border-radius: .3rem; background-color: #d1e3ef;}
div.cuerpo div.felicitacion div.sobre div.remitente input[type="checkbox"] {display: none;}
div.cuerpo div.felicitacion div.sobre div.remitente input[type="checkbox"]:checked + label:not(.txt)::after {display: block;content: ""; width: .8rem; height: .3em; position: absolute; top: .1rem; left: .1rem; transform: rotate(-45deg); border-bottom: .3rem solid #e2057c; border-left: .3rem solid #e2057c;}
div.cuerpo div.felicitacion div.sobre div.destinatarios {display: block; position: absolute; bottom: 20%; right: 8.5%; width: 38.5%; height: 20%; padding-left: 1.8rem; background: transparent url('img/ico_envelope.svg')no-repeat top left; background-size: 1.5rem auto;}
div.cuerpo div.felicitacion div.sobre div.destinatarios textarea {width: 100%; height: 100%; font-size: .9rem; padding: 1%; border-radius: .3rem; background-color: #d1e3ef; outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
div.cuerpo div.felicitacion div.sobre div.botones {display: inline-block; position: absolute; bottom: 10%; right: 8%; width: auto; height: auto; background-color: transparent;}
div.cuerpo div.felicitacion div.tarjeta {display: none; width: 95%; height: auto; position: absolute; top: 0; right: 0; z-index: 20; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; box-shadow: 0px .2rem .5rem 0px rgba(0,0,0,0.5);}
div.cuerpo div.felicitacion div.tarjeta > figure img {display: block; width: 100%; height: auto; visibility: hidden;}
div.cuerpo div.felicitacion div.tarjeta div.formulario {
    display: block; position: absolute; top: 7.5%; right: 4%; width: 32%; height: 85%;
    background: transparent url("img/fnd_msg.svg") no-repeat center center; background-size: contain;
}
div.cuerpo div.felicitacion div.tarjeta div.formulario textarea {
    display: block; width: 90%; height: 79%; text-align: center; font-weight: bold;
    resize: none; box-sizing: border-box; margin: 18% 0 0 5%;
    font-size: 1rem; font-family: Arial, Helvetica, sans-serif; color: #2887bf;
    outline: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
div.cuerpo div.felicitacion div.navegacion {display: none; text-align: right; background-color: transparent; width: 100%; height: auto; position: relative; top: 0; left: 0px; z-index: 30;}
div.cuerpo div.felicitacion div.navegacion button {margin: 0 2vw;}
@media (max-width: 1200px) {
    div.cuerpo div.felicitacion {width: 80%;}
}
@media (max-width: 900px) {
    div.cuerpo div.felicitacion {width: 100%;}
}
@media (max-width: 700px) {
    div.cuerpo div.felicitacion div.sobre div.destinatarios {height: 30%;}
}

/* BLOQUE PIE *****************/
footer {display: block; width: 100%; height: auto; padding-top: 30vh; background: transparent url('img/fnd_footer.svg') no-repeat left -10vh top 5px; background-size: auto 30vh;}
footer div.contenido {background-color: #fff;}
footer div.contenido p {display: block; font-size: .8rem; text-align: center; color: #2887bf; padding: 2vw;}