html { 
    background: url("../images/fondoweb.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.blue {
    background-color: #3883d8;  
}

.turqoise {
    background-color: #1283d8;  
}


.img_cerrojo{
    margin: 0;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hojas_vertical_L{
    position: absolute;
    left: 0%;
    margin: 0;
    height: 100%;
    width: 60%;
    z-index: 2;
}
.hojas_vertical_R{
    position: absolute;
    right: 0%;
    margin: 0;
    height: 100%;
    width: 60%;
    z-index: 2;
}
.hojas_horizontal_U{
    position: absolute;
    top: 0%;
    margin: 0;
    width: 100%;
    height: 55%;
    z-index: 2;
}
.hojas_horizontal_D{
    position: absolute;
    bottom: 0%;
    margin: 0;
    width: 100%;
    height: 55%;
    z-index: 2;
}

.web{ display: block; }
.mobile{ display: none; }

.entry_text{
    position: absolute;
    z-index: 3;
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.exit-leaf-up{ animation: exit-up 1s forwards; }
.exit-leaf-bottom{ animation: exit-bottom 1.5s forwards; }
.exit-leaf-left{ animation: exit-left 2s forwards; }
.exit-leaf-right{ animation: exit-right 2.5s forwards; }

.click_text{
    color: white;
    font-size: 60px;
    text-align: center;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@media (max-width: 1023px){
    html { 
        background: url("../images/FondoVerdeMovil.jpg") no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .img_cerrojo{
        width: 90%;
    }

    .web{ display: none; }
    .mobile{ display: block; }

    .click_text{
        font-size: 130px;
    }
}

/*Animaciones*/
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes exit-up {
    0% {top: 0%; opacity: 1;}
    100% { top: -100%; display: none; opacity: 0;}
}

@keyframes exit-bottom {
    0% { bottom: 0%; opacity: 1;}
    100% { bottom: -100%; display: none; opacity: 0;}
}

@keyframes exit-left {
    0% { left: 0%; opacity: 1;}
    100% { left: -100%; display: none; opacity: 0;}
}

@keyframes exit-right {
    0% { right: 0%; opacity: 1;}
    100% { right: -100%; display: none; opacity: 0;}
}

/*magic scroll*/
	#pinContainer {
		width: 100%;
		height: 100%;
		overflow: hidden;
		-webkit-perspective: 1000;
		        perspective: 1000;
	}
	#slideContainer {
		width: 400%; /* to contain 4 panels, each with 100% of window width */
		height: 100%;
	}
	.panel {
		height: 100%;
		width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
		float: left;
	}