* {
  box-sizing: border-box;
}


.envelope-background{
	background: rgba(0, 0, 0, .5);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: fixed;
	z-index: 999;
	overflow-x: hidden;
	overflow-y: hidden;
	display: none;
}


.envelope {
  width: 43.75rem;
  height: 21.875rem;
  background: #A01616;
  position: fixed;
  
  margin: 0 auto;
  
  
  display: block;
  
  
	left: 50%;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	
	position: fixed;
	
	

	
	z-index: 9999;
}



.envelope-overfolow-hidden{
	overflow: hidden;
}

.magictime {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
          

.spaceInUp {
  -webkit-animation-name: spaceInUp;
  animation-name: spaceInUp; }


@-webkit-keyframes spaceInUp {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    
    -webkit-transform: scale(0.2) translate(-50%, -200%);
    transform: scale(0.2) translate(-50%, -200%);
  
  }
  
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1.1) translate(-50%, 0%);
    transform: scale(1.1) translate(-50%, 0%); 

	} 
}





.envelope__check {
  height: 100%;
  width: 100%;
  z-index: 10;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
  display: none;
}



.envelope__check:checked ~ .envelope__flap {
  transition: z-index 0s 0.25s, -webkit-transform 0.25s 0s;
  transition: transform 0.25s 0s, z-index 0s 0.25s;
  transition: transform 0.25s 0s, z-index 0s 0.25s, -webkit-transform 0.25s 0s;
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  z-index: 0;
  
  
}
.envelope__check:checked ~ .envelope__letter {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
  transition: z-index 0s 0.5s, -webkit-transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s, z-index 0s 0.5s;
  transition: transform 0.25s 0.25s, z-index 0s 0.5s, -webkit-transform 0.25s 0.25s;
  z-index: 5;
  
  
}




.envelope__check:checked ~ .envelope__letter .letter__content:nth-child(2),
.envelope__check:checked ~ .envelope__letter .letter__content:nth-child(3) {
  transition: -webkit-transform 0.25s 0.5s;
  transition: transform 0.25s 0.5s;
  transition: transform 0.25s 0.5s, -webkit-transform 0.25s 0.5s;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          
          
}




.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 75%;
  transition: z-index 0s 0.5s, -webkit-transform 0.25s 0.5s;
  transition: transform 0.25s 0.5s, z-index 0s 0.5s;
  transition: transform 0.25s 0.5s, z-index 0s 0.5s, -webkit-transform 0.25s 0.5s;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
/*   background: repeating-linear-gradient(-45deg, #B27700, #B27700 10px, #db2d24 10px, #db2d24 20px, #B27700 20px, #B27700 30px, #14676b 30px, #14676b 40px) 0 0/100% 5px no-repeat, #B27700; */

	background: repeating-linear-gradient(-45deg, #B27700, #B27700 10px, #B27700 10px, #B27700 20px, #B27700 20px, #B27700 30px, #B27700 30px, #B27700 40px) 0 0/100% 5px no-repeat, #B27700;

  z-index: 4;
  
  -webkit-clip-path: polygon(5% 40%, 50% 100%, 95% 40%, 100% 0, 0 0);
          clip-path: polygon(5% 40%, 50% 100%, 95% 40%, 100% 0, 0 0);
          
          
          
          
          
}
.envelope__flap--inside {
  background: #A01616;
  
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
          


}
.envelope__back {
  height: 100%;
  width: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;

/*   background: repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #db2d24 10px, #db2d24 20px, #DB9304 20px, #DB9304 30px, #14676b 30px, #14676b 40px) 0 100%/100% 5px no-repeat, repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #db2d24 10px, #db2d24 20px, #DB9304 20px, #DB9304 30px, #14676b 30px, #14676b 40px) 0 100%/5px 100% no-repeat, repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #db2d24 10px, #db2d24 20px, #DB9304 20px, #DB9304 30px, #14676b 30px, #14676b 40px) 100% 100%/5px 100% no-repeat, #DB9304; */


  background: repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #B27700 10px, #B27700 20px, #DB9304 20px, #DB9304 30px, #B27700 30px, #B27700 40px) 0 100%/100% 5px no-repeat, repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #DB9304 10px, #DB9304 20px, #DB9304 20px, #DB9304 30px, #DB9304 30px, #DB9304 40px) 0 100%/5px 100% no-repeat, repeating-linear-gradient(-45deg, #DB9304, #DB9304 10px, #DB9304 10px, #DB9304 20px, #DB9304 20px, #DB9304 30px, #DB9304 30px, #DB9304 40px) 100% 100%/5px 100% no-repeat, #DB9304;

  -webkit-clip-path: polygon(80% 40%, 100% 0, 100% 100%, 0 100%, 0 0, 20% 40%);
          clip-path: polygon(80% 40%, 100% 0, 100% 100%, 0 100%, 0 0, 20% 40%);
          
          
}
.envelope__back:after {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(-45deg, #BF8000, #BF8000 10px, #BF8000 10px, #BF8000 20px, #BF8000 20px, #BF8000 30px, #BF8000 30px, #BF8000 40px) 0 100%/100% 5px no-repeat, #BF8000;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(70% 10%, 100% 100%, 0 100%, 30% 10%);
          clip-path: polygon(70% 10%, 100% 100%, 0 100%, 30% 10%);
          
          
}
.envelope__letter {
  height: 90%;
  width: 90%;
  z-index: 1;
  position: absolute;
  left: 5%;
  top: 5%;
  transition: z-index 0s 0.25s, 
  
  -webkit-transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s, z-index 0s 0.25s;
  transition: transform 0.25s 0.25s, z-index 0s 0.25s, 
  
  -webkit-transform 0.25s 0.25s;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  

}
.letter__content {
  height: 100%;
  width: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  position: absolute;
  padding: 14px;
  text-align: justify;
  
  
  transition: height 0.4s ease-in;
  transition: height 0.4s ease-out;
  
  padding: 0.8rem;
  padding-top: 3.5rem;
}



.letter__content:nth-child(2),
.letter__content:nth-child(3) {
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
  top: 100%;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  z-index: 2;
  border-top: 1px solid #eee;
  
}
.letter__content:nth-child(3) {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}



.sign-off {
  position: absolute;
  bottom: 6.25rem;
  right: 1.875rem;
  font-size: 20px;
  font-family: cursive;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
   
   display: none;
}

.scroll-content{
	overflow: hidden;
	height: 80%;
	overflow-y: scroll;
	padding: 1rem;
}




.letter-buttons-top{
	position: absolute;
	white-space: 100%;
	top: 0;
	width: 100%;
	
}

.nume-copil{
	width: 100%;
	position: relative;
	text-align: center;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 3.5rem;
	
	color: #BF7F00;
}

.close-letter{
	position: absolute;
	right: 0;
	top: 0;
	padding: 0.5rem;
	font-size: 1.5rem;
	color: #AA1917;
	cursor: pointer;
}


.letter-buttons-footer{
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	background: #fff;
	padding-bottom: 2rem;
}


.aplica-pt-scrisoare-random{
	
	
	font-size: 1.25rem;
	color: #fff;
	cursor: pointer;
	width: 50%;
	text-align: center;
	background: #0A7734;
	font-weight: bold;
	margin: 0 auto;
	height: 3.25rem;
	line-height: 3.25rem;
	
}

.doresc-alta-scrisoare{
	color: #A01616;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	
	font-size: 1.125rem;
	padding-top: 0.7rem;
	cursor: pointer;
}