html, body { overflow-x: hidden; font-family: 'Roboto', sans-serif; }

a { text-decoration: none; }

.title { display: none; justify-content: space-between; align-items: center; font-family: 'Roboto', sans-serif; font-weight: 800; letter-spacing: 0; color: #ff5a00; }

/** Perfect Scrollbar */
.ps > .ps__rail-y, .ps > .ps__rail-y:hover, .ps > .ps__rail-y.ps--clicking { position: absolute; width: 14px; right: 6px; margin-bottom: 5px; border-radius: 7px; background-color: #FCCBAD; opacity: 0.6; }

.ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y.ps--clicking > .ps__thumb-y { position: absolute; width: 20px; right: -3px; border-radius: 100%; background-color: white; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); transition: unset; }

.ps__rail-y.ps--clicking > .ps__thumb-y { background-color: #e6e6e6; }

/** MagicGrid posts */
.post, .post a { display: block; position: relative; width: 250px; }

.post { padding: 10px; border-style: solid; border-radius: 5px; background-color: white; border-color: #e6e6e6; border-width: 1px; }

.post .thumbnail, .post .mfp-image img { width: 100%; }

.post .video-platform { position: absolute; top: 10px; left: 10px; width: 52px; height: 52px; }

.post .fa-play { position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24pt; color: #eeeeeeee; }

.post p { font-family: 'Roboto', sans-serif; font-size: 12pt; font-weight: 300; text-align: justify; }

body { position: relative; width: 100vw; height: 100vh; }

#back-btn { position: fixed; top: 0; left: 0; z-index: 1; margin: 3vw 0 0 3vw; }

#back-btn img { width: auto; height: 7vh; }

#description { position: absolute; left: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 25vw; height: 100vh; background-color: #dddddd; }

#name { font-weight: 800; font-size: 2.5vw; }

#details { width: 75%; height: 50%; margin-left: 30px; padding-top: 30px; text-align: center; line-height: 1.5; font-size: 12pt; }

/* @media screen and (min-width: 320px) { #details { font-size: calc(8px + 8 * ((100vw - 320px) / 1280)); } } @media screen and (min-width: 1600px) { #details { font-size: 16px; } } */
#details-container { position: relative; width: 100%; height: 100%; }

#details-fade-in { position: absolute; z-index: 1; top: 0; width: calc(100% - 23px); height: 30px; pointer-events: none; background: linear-gradient(#ddddddff 0%, #dddddd00 100%); }

#details-fade-out { position: absolute; z-index: 1; bottom: 0; width: calc(100% - 23px); height: 30px; pointer-events: none; background: linear-gradient(#dddddd00 0%, #ddddddff 100%); }

#details-scroller { position: relative; z-index: 0; display: flex; justify-content: center; width: 100%; height: 100%; overflow-y: visible; }

#details-scroller span { display: table; padding: 20px 40px 20px 0px; }

.ps > .ps__rail-y, .ps > .ps__rail-y:hover, .ps > .ps__rail-y.ps--clicking { width: 14px; right: 6px; margin-bottom: 5px; border-radius: 7px; background-color: #9dadbc; opacity: 0.6; }

.ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y.ps--clicking > .ps__thumb-y { width: 20px; right: -3px; border-radius: 100%; background-color: white; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); transition: unset; }

.ps__rail-y.ps--clicking > .ps__thumb-y { background-color: #dddddd; }

#content { display: flex; justify-content: center; align-items: center; position: absolute; right: 0; width: 75vw; height: 100vh; background-color: #fafafa; }

#content-container { position: relative; width: 90%; height: 90%; }

#content-fade-in { position: absolute; top: 0; z-index: 1; width: calc(100% - 23px); height: 30px; pointer-events: none; background: linear-gradient(#fafafaff 0%, #fafafa00 100%); }

#content-fade-out { position: absolute; bottom: 0; z-index: 1; width: calc(100% - 23px); height: 30px; pointer-events: none; background: linear-gradient(#fafafa00 0%, #fafafaff 100%); }

#content-scroller { position: relative; z-index: 0; width: 100%; height: 100%; overflow-y: hidden; }

#posts { display: none; height: 90%; padding: 20px 30px 20px 0; }

/*# sourceMappingURL=style.css.map */