sgi/navidad/css/tarjeta.css

/* 
    Created on : 19/11/2020, 10:42:56 AM
    Author     : Alejandro
    https://codemyui.com/open-close-christmas-card/
*/

.tarjeta {
	/*margin: 0;*/
	/*background-color: #4CAF50;*/
  /*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%)*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tarjeta-view{min-height: 620px;perspective: 1400px;transform-style: preserve-3d;}
.tarjeta-new{min-height: 600px}
.tarjeta img {max-width: 100%;}
*, *:after, *:before {box-sizing: border-box;}
.tarjeta h2 { font-size: 35px;}
.tarjeta h4 { color: #000;}
.wrap {width: 680px; height: calc(680px * 3 / 4);/*calc(600px * 9 / 16);*/ position: relative; transform: rotateX(15deg); transform-style: preserve-3d; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3); }
.wrap-new {width: 680px; height: calc(680px * 3 / 4);/*calc(600px * 9 / 16);*/ box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3); }
.wrap-new textarea{font-size: 140%;}
.card {height: 100%; width: 100%; background-color: #fff; border-radius: 2px; position: relative; border: 8px solid #d21034; text-align: center; }
.card--front {
        /*font-family: 'Dancing Script', serif;*/
	display: flex; align-items: center; justify-content: center; transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center left; position: absolute; top: 0; left: 0; z-index: 2; backface-visibility: hidden; -webkit-backface-visibility: hidden;
        background-image: url(../img/fondo1.jpg);background-repeat: none;background-size: cover; cursor: pointer;
}
.card--front.open { transform: rotateY(-180deg); }
.card--front.back { z-index: 0; backface-visibility: visible; -webkit-backface-visibility: visible; }
.card--inner { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 35px 45px;
        font-size: 30px;background-image: url(../img/fondo2.jpg);background-repeat: none;background-size: cover;
}
.card--inner h2 { font-size: 32px; }
.card--inner img { max-width: 60%; margin-top: 1.5em; }
.card--inner.open:before { transform: translateX(-155%); opacity: .1; }
.card--inner:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; opacity: 1; transition: all 1s ease-in-out;}

.card--button { -webkit-appearance: none; background: #E53935; border: 5px solid #9f1815; border-width: 0 0 5px; padding: 10px 20px; width: 150px; text-align: center; display: block; transform: rotateX(25deg); margin-top: 20px; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);}
.card--button:active { border-bottom-width: 2px; margin-top: 23px; outline: none; }
.card--button:focus { outline: none; }
.float-bottom{ position: absolute; bottom:10px; right:50px;}

@media (max-width: 800px) {
    .wrap {width: 100%; height: calc(100vw * 3 / 4);}
    .wrap-new textarea{font-size: 100%;}
    .tarjeta h2 { font-size: 26px; }
    .tarjeta h4{font-size: 20px;}
    .card--inner {font-size: 20px;}
}