/*
font-family: 'Fredericka the Great', serif;
font-family: 'Indie Flower', cursive;
*/

/* tipografía general */
body {
    font-family: 'Indie Flower', cursive;
    /* Quito el reborde blanco del body */
    margin: 0px;
}

/* tipografía títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fredericka the Great', serif;
}

h2 {
    /* Extra */
    font-size: 40px;
    font-weight: 300;
}


.galeria {
    background-color: #cccccc;
    /* Creo un espacio de seguridad */
    padding: 50px 10%;

}


.galeria h2 {
    text-align: center;
}


/* POLAROID */
.polaroid {
    background-color: #ffffff;
    /* Para que el figure no ocupe todo el ancho,
    lo convierto a bloque en línea */
    display: inline-block;
    /* Reborde blanco de la polaroid */
    padding: 20px;

    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);


}


.polaroid img {
    width: 300px;
    height: 200px;
}

.polaroid figcaption {
    text-align: center;
    color: blue;
    font-size: 22px;
    font-weight: 600;
}

/* ROTACIONES DE LAS POLAROID */
.rot-a {
    transform: rotate(4deg);

    /* Eje Z */
    z-index: 1;

    /* Reposiciono o recoloco */
    left: 70px;
    top: 150px;

    /* para que la transición se realice a la entrada
     y salida */
    transition: 1s;
}

.rot-b {
    transform: rotate(-2deg);

    /* Eje Z */
    z-index: 2;

    /* Reposiciono o recoloco */
    right: 80px;
    top: 40px;

    /* para que la transición se realice a la entrada
     y salida */
    transition: 0.5s;
}

.rot-c {
    transform: rotate(1deg);

    /* Eje Z */
    z-index: 3;

    /* Reposiciono o recoloco */
    left: 20px;
    bottom: 40px;

    /* para que la transición se realice a la entrada
     y salida */
    transition: 1.2s;
}

.rot-d {
    transform: rotate(-3deg);

    /* Reposiciono o recoloco */
    right: 60px;
    bottom: 100px;
    
    /* para que la transición se realice a la entrada
     y salida */
     transition: 0.7s;

}

.rot-e {
    transform: rotate(3deg);

    /* Reposiciono o recoloco */
    left: 35%;
    top: 30%;

    /* para que la transición se realice a la entrada
     y salida */
     transition: 1.5s;
}


/* Posicion Absoluta */
.absoluta {
    position: absolute;
}

/* la caja que quiero que sirva de referencia para 
recolocar las polaroid tiene que tener position relative */
.relativa {
    position: relative;
    height: 800px;
}

/* Movimiento al hacer hover sobre el título */
h2:hover+.relativa .rot-a {
    transform: rotate(40deg);

    /* Reposiciono o recoloco */
    left: 200px;
    top: 50px;
}

h2:hover+.relativa .rot-b {
    transform: rotate(-120deg);

    /* Reposiciono o recoloco */
    right: -80px;
    top: 130px;
}

h2:hover+.relativa .rot-c {
    transform: rotate(120deg);

    /* Reposiciono o recoloco */
    left: 220px;
    bottom: 140px;
}

h2:hover+.relativa .rot-d {
    transform: rotate(-270deg);

    /* Reposiciono o recoloco */
    right: 20px;
    bottom: 200px;
}

h2:hover+.relativa .rot-e {
    transform: rotate(180deg);

    /* Reposiciono o recoloco */
    left: 25%;
    top: 40%;
}