/**
 * Shadow 
 *
*/
.shadow {
     position: absolute;
     top: 26px;
     left: -8px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: radial-gradient(var(--paper-shadow), 10%, rgba(201, 191, 141, 0));
}


/**
 * Ribbon
 * 
*/
.ribbon {
     --f: 0.5em;
     font-size: 28px;
     color:#FFF;
     position: absolute;
     top: 0;
     left: 0;
     line-height: 1.8;
     padding-inline: 1lh;
     padding-bottom: var(--f);
     padding-top: 0.15em;
     padding-bottom: 0.5em;
     border-image: conic-gradient(#0008 0 0) 51% / var(--f);
     clip-path: polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)),0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
     transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
     transform-origin: 100% 100%;
     background-color: #a25e10;
}


/**
 * Pin Graphic 
 * 
*/
.pin-wrapper {
     position: relative;
     width: 100%;
}
.pin {
     position: absolute;
     top: -3.5em;
     right: 40%;
     width: 70px;
}


/**
 * Letter Graphic Drawing
 * 
*/
.letter {
     background: #e6bb20;
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     margin: 26px auto 0;
     padding: 24px;
     position: relative;
     width: 90%;
}
.letter:before, 
.letter:after {
     content: "";
     height: 98%;
     position: absolute;
     width: 100%;
     z-index: -1;
}
.letter:before {
     background: #6f8b46;
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
     left: -5px;
     top: 4px;
     transform: rotate(-2.5deg);
}
.letter:after {
     background: #faf3f0;
     box-shadow: 0 0 3px rgba(0,0,0,0.2);
     right: -3px;
     top: 1px;
     transform: rotate(1.4deg);
}
.kb-row-layout-wrap.letter:before, 
.kb-row-layout-wrap.letter:after {
     z-index: 10; 
}
.letter > .kt-row-column-wrap {
     background-color: #fff !important;
     margin: 1em 1em;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     padding: 2.5em 2em;
}
.kb-row-layout-wrap.letter {
     background: #e6bb20 !important; 
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     margin: 26px auto 0;
     padding: 24px;
     position: relative;
     width: 100%; 
     z-index: 0; 
}
.kb-row-layout-wrap.letter:before,
.kb-row-layout-wrap.letter:after {
     content: "";
     height: 98%;
     position: absolute;
     width: 100%;
     z-index: 0; 
} 
.kb-row-layout-wrap.letter:before {
     background: #6f8b46;
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
     left: -5px;
     top: 4px;
     transform: rotate(-2.5deg);
}
.kb-row-layout-wrap.letter:after {
     background: #faf3f0;
     box-shadow: 0 0 3px rgba(0,0,0,0.2);
     right: -3px;
     top: 1px;
     transform: rotate(1.4deg);
}


/**
 * Letter Graphic Drawing Resonsive
 * 
*/
@media screen and (max-width: 782px) {
     .letter:before {
          display:none
     }
     .letter:after {
          display:none;
     }
     .letter {
     background: #e6bb2000;
     padding: 0px;
     width: 98%;
     box-shadow: none;
     }
}