/**

 * 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;
}

}