@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap");$main-green:#79dd09 !default;$main-green-rgb-015:rgba(121,221,9,.1) !default;$main-yellow:#bdbb49 !default;$main-yellow-rgb-015:rgba(189,187,73,.1) !default;$main-red:#bd150b !default;$main-red-rgb-015:rgba(189,21,11,.1) !default;$main-blue:#0076bd !default;$main-blue-rgb-015:rgba(0,118,189,.1) !default;body{text-rendering:optimizeLegibility;font-size:16px;font-weight:400;color:#fff;font-family:Baloo\ 2,cursive}.dark{background:#110f16}.light{background:#f3f5f7}a,a:hover{text-decoration:none;transition:color .3s ease-in-out}#pageHeaderTitle{font-size:2.5rem;text-transform:uppercase;text-align:center;margin:2rem 0}.postcard{overflow:hidden;flex-wrap:wrap;color:#fff;position:relative;margin:0;box-shadow:0 4px 21px -12px rgba(0,0,0,.66);border-radius:10px;display:flex;&.dark{background-color:#18151f}&.light{background-color:#e1e5ea}.t-dark{color:#18151f}a{font-weight:700;color:inherit}.h1,h1{font-weight:500;margin-bottom:.5rem;line-height:1.2}.small{font-size:80%}.postcard__title{font-size:1.75rem}.postcard__img{position:relative;max-height:180px;object-fit:cover;width:100%}.postcard__img_link{display:contents}.postcard__bar{height:10px;transition:width .2s ease;background-color:#424242;margin:10px 0;border-radius:5px;width:50px}.postcard__text{padding:1.5rem;position:relative;flex-direction:column;display:flex}.postcard__preview-txt{height:100%;overflow:hidden;text-overflow:ellipsis;text-align:justify}.postcard__tagbox{padding:0;justify-content:center;font-size:14px;margin:20px 0 0;flex-flow:row wrap;display:flex;.tag__item{padding:2.5px 10px;transition:background-color .3s;margin:0 5px 5px 0;border-radius:3px;background:rgba(83,83,83,.4);cursor:default;user-select:none;display:inline-block;&:hover{background:rgba(83,83,83,.8)}}}&:before{right:0;content:"";position:absolute;opacity:1;bottom:0;top:0;border-radius:10px;left:0;background-image:linear-gradient(-70deg,#424242,transparent 50%)}&:hover .postcard__bar{width:100px}}@media screen and (min-width:769px){.postcard{flex-wrap:inherit;.postcard__title{font-size:2rem;z-index:9999}.postcard__tagbox{justify-content:start}.postcard__img{transition:transform .3s ease;max-width:300px;max-height:100%}.postcard__text{padding:3rem;width:100%}.media.postcard__text:before{height:130%;content:"";position:absolute;top:-20%;background:#18151f;width:55px;display:block}&:hover .postcard__img{transform:scale(1.1)}&:nth-child(odd){flex-direction:row}&:nth-child(2n+0){flex-direction:row-reverse}&:nth-child(odd) .postcard__text:before{transform:rotate(10deg);left:-16px!important}&:nth-child(2n+0) .postcard__text:before{transform:rotate(-4deg);right:-12px!important}}}@media screen and (min-width:1024px){.postcard__text{padding:2rem 3.5rem}.postcard__text:before{height:130%;content:"";position:absolute;top:-20%;width:55px;display:block}.postcard.dark{.postcard__text:before{background:#18151f}}.postcard.light{.postcard__text:before{background:#e1e5ea}}}.postcard .postcard__tagbox .green.play:hover{color:#000;background:$main-green}.green .postcard__title:hover{color:$main-green}.green .postcard__bar{background-color:$main-green}.green:before{background-image:linear-gradient(-30deg,$main-green-rgb-015,transparent 50%)}.green:nth-child(2n):before{background-image:linear-gradient(30deg,$main-green-rgb-015,transparent 50%)}.postcard .postcard__tagbox .blue.play:hover{background:$main-blue}.blue .postcard__title:hover{color:$main-blue}.blue .postcard__bar{background-color:$main-blue}.blue:before{background-image:linear-gradient(-30deg,$main-blue-rgb-015,transparent 50%)}.blue:nth-child(2n):before{background-image:linear-gradient(30deg,$main-blue-rgb-015,transparent 50%)}.postcard .postcard__tagbox .red.play:hover{background:$main-red}.red .postcard__title:hover{color:$main-red}.red .postcard__bar{background-color:$main-red}.red:before{background-image:linear-gradient(-30deg,$main-red-rgb-015,transparent 50%)}.red:nth-child(2n):before{background-image:linear-gradient(30deg,$main-red-rgb-015,transparent 50%)}.postcard .postcard__tagbox .yellow.play:hover{color:#000;background:$main-yellow}.yellow .postcard__title:hover{color:$main-yellow}.yellow .postcard__bar{background-color:$main-yellow}.yellow:before{background-image:linear-gradient(-30deg,$main-yellow-rgb-015,transparent 50%)}.yellow:nth-child(2n):before{background-image:linear-gradient(30deg,$main-yellow-rgb-015,transparent 50%)}@media screen and (min-width:769px){.green:before{background-image:linear-gradient(-80deg,$main-green-rgb-015,transparent 50%)}.green:nth-child(2n):before{background-image:linear-gradient(80deg,$main-green-rgb-015,transparent 50%)}.blue:before{background-image:linear-gradient(-80deg,$main-blue-rgb-015,transparent 50%)}.blue:nth-child(2n):before{background-image:linear-gradient(80deg,$main-blue-rgb-015,transparent 50%)}.red:before{background-image:linear-gradient(-80deg,$main-red-rgb-015,transparent 50%)}.red:nth-child(2n):before{background-image:linear-gradient(80deg,$main-red-rgb-015,transparent 50%)}.yellow:before{background-image:linear-gradient(-80deg,$main-yellow-rgb-015,transparent 50%)}.yellow:nth-child(2n):before{background-image:linear-gradient(80deg,$main-yellow-rgb-015,transparent 50%)}}