*, ::after, ::before { margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; text-rendering:optimizeLegibility; scroll-behavior:smooth; outline:none; }

html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }

body { font-family:'Inter', sans-serif; font-style:normal; font-weight:300; font-size:20px; line-height:1.4em; margin:0; background:#26244D; color:#FFF; scroll-behavior:smooth; }
body.modal { overflow:hidden; height:100vh; }

::selection {
	background: #364C65;
	color: #FFF;
}
::-moz-selection {
	background: #364C65;
	color: #FFF;
}


h2 { font-size:48px; font-weight:600; margin-bottom:0.4em; line-height:1.1em; }
h3 { font-size:28px; font-weight:600; margin-bottom:0.1em; margin-top:0.5em; line-height:1.1em; color:#25B1D8; }
h4 { font-size:24px; font-weight:600; margin-bottom:0.1em; margin-top:0.5em; line-height:1.1em; color:#25B1D8; }
h5 { font-size:16px; line-height:1.3em; margin-bottom:0.8em; opacity:0.9; }
p { margin-bottom:1.1em; }
small { opacity:0.5; }
a { color:inherit; text-decoration:none; cursor:pointer; }
hr { color:#4E4C71; margin:2em 0; }
strong { font-weight:600; }
ol { list-style:none; counter-reset:li; }
ol li::before {content:counter(li) ") ";; color:#25B1D8; display:inline-block; width:1.5em; margin-left:-1.5em; font-weight:600; }
ol.long li::before {content:counter(li) ") ";; color:#25B1D8; display:inline-block; width:1.9em; margin-left:-1.9em; font-weight:600; }
ol li {counter-increment:li; padding-left:33px; margin-bottom:1.1em; }
.blue { color:#25B1D8; }
img { display:inline-block; max-width:100%; }

.image-area { width:100%; max-width:400px; margin:20px auto; border:15px solid rgba(0,0,0,0.5); border-radius:15px; margin-top:35px; }
.image-area img { display:block; }

.content { width:100%; max-width:1040px; margin:auto; padding:0 20px; }
.header { /*position:sticky;*/ position:relative; top:0; left:0; width:100%; font-size:50px; line-height:1em; padding:30px 0; background:#26244D; z-index:1; }
.header .logo { font-weight:600; }


.footer { clear:both; }
.footer img { display:block; width:100%; }
.footer .credits { position:relative; margin-top:-3em; font-size:16px; font-weight:600; }
.footer .credits a { color:#25B1D8; }


/* Cards */
.cards { padding-bottom:300px; }
.card-holder { display:block; width:100%; aspect-ratio: 5 / 3; margin-bottom:50px; font-size:30px; line-height:1.1em; transform-orign:top; }
.card:first-child { box-shadow:0px 0px 30px 3px rgba(0, 0, 0, 0.05); }
.card { border-radius:60px; overflow:hidden; background:#26244D; background:linear-gradient(0deg, rgba(38,36,77,1) 0%, rgba(255,255,255,1) 100%); position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; pointer-events:none; }
.card .hero-background { height:100%; width:100%; background:transparent center center no-repeat; background-size:cover; transition:all 0.7s ease; opacity:0.8; }
.card .foreground { height:100%; display:inline-block; max-width:100%; transition:all 0.5s ease; }
.card-holder:hover .card .foreground { -webkit-filter: drop-shadow(0px 0px 10px #FFF); filter: drop-shadow(0px 0px 10px #FFF); transform:scale(1.1); }
.card .title-area { position:absolute; bottom:0; left:0; text-align:left; padding:5%; }
.card .title-area .time-to-read, .card .title-area hr { display:none; }

.card-holder.expanded .card { z-index:9; }
.card-holder.expanded .card .hero-background { height:50vh; }


/* Page overlay */
.page-overlay { background:#26244D; position:fixed; left:50%!important; display:none; transition:all 0.3s ease-in-out; border-radius:60px; overflow:hidden; /*opacity:0;*/z-index:2; transform-origin:50% 0% 0px!important; }
.page-overlay .hero-background { position:relative; height:100%; width:100%; background:purple center center no-repeat; background-size:cover; transition:all 0.7s ease; text-align:center; }
.page-overlay .hero-background .overlay { position:absolute; top:0; left:0; height:100%; width:100%; background:#26244D; background:linear-gradient(0deg, rgba(38,36,77,1) 0%, rgba(255,255,255,1) 100%); opacity:0.2; transition:opacity 0.3s ease-in-out; }
.page-overlay .hero-background .bottom-blend { position:absolute; bottom:-100px; left:0; width:100%; transition:bottom 0.3s ease-in-out; }
.page-overlay .hero-background .bottom-blend img { width:100%; display:block; }
.page-overlay .foreground { height:100%; display:inline-block; max-width:100%; }
.page-overlay .page-inner { position:absolute; top:0; left:0; width:100%; height:100%; padding-top:calc(60vh - 65px); overflow:auto; opacity:0; transition:opacity 0.4s ease; scroll-behavior:smooth; }


.page-overlay.expanded { border-radius:0px; top:0!important; left:50%!important; width:100%!important; height:100%!important; transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0) !important;/*opacity:1;*/filter:blur(0px)!important; }
.page-overlay.expanded .hero-background { height:60vh; }
.page-overlay.expanded .hero-background .overlay { opacity:0; }
.page-overlay.expanded .hero-background .bottom-blend { bottom:-50px; }
.page-overlay.expanded .page-inner { opacity:1; }

.pover .close-btn  { background:rgba(0,0,0,0.5); border-radius:50%; color:#FFF; display:block; position:absolute; top:30px; right:30px; height:40px; line-height:40px; width:40px; text-align:center; z-index:3; opacity:0; transition:opacity 0.3 ease-in-out; }
.pover .close-btn  img { width:40px; display:block; -webkit-filter: drop-shadow(0px 0px 10px #FFF); filter: drop-shadow(0px 0px 10px #FFF); pointer-events:none; }
.pover.expanded .close-btn  { opacity:1; }
.title-area hr { margin:1em 0; }




/* Content */
.time-to-read { color:#FFF; opacity:0.5; }
.time-to-read img { display:inline-block; width:20px; position:relative; top:3px; margin-right:10px; }
.lozenge { background:#1C1C36; padding:40px; border-radius:40px; box-shadow:rgba(0, 0, 0, 0.65) 0px 5px 20px; border:0.5px solid #4E4C71; margin-bottom:40px; }

/* Tab buttons */
.tab-btn { display:flex; border-top:1px solid #4E4C71; padding:15px 0; align-items:center; transition:background 0.3s ease; }
.tab-btn .img-side { width:30%; flex:0 0 30%; padding:0 10px; pointer-events:none; }
.tab-btn .img-side .circle-icon { display:block; width:100%; aspect-ratio:1 / 1; border-radius:50%; border:30px solid rgba(0,0,0,0.5); overflow:hidden; transition:border 0.3s ease; }
.tab-btn .img-side .circle-icon img { display:block; width:100%; }
.tab-btn .txt-side { padding-left:30px; pointer-events:none; }
.tab-btn .txt-side .title { display:block; font-size:28px; font-weight:600; margin-bottom:0.5em; line-height:1.1em; color:#FFFFFF; }
.tab-btn .txt-side .subtitle { display:block; margin-bottom:1em; color:#FFF; opacity:0.5; }
.tab-btn:hover { background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%); }
.tab-btn:hover .img-side .circle-icon { border:15px solid rgba(0,0,0,0.5); }
.tab-btn.last { border-bottom:1px solid #4E4C71; }







/* Page overlay second */
.page-overlay-second { position:fixed; left:0; display:block; z-index:3; top:0; width:100%; height:100%; display:none; }
.page-overlay-second .olbg { position:absolute; top:0; left:0; width:100%; height:100%; transition:opacity 0.6s ease-in-out; background:rgba(0,0,0,0.5); opacity:0; backdrop-filter:blur(10px); }
.page-overlay-second .hero-background { position:relative; height:60vh; width:100%; background:purple center center no-repeat; background-size:cover; transition:all 0.7s ease; text-align:center; border-radius:40px 40px 0 0; overflow:hidden; }
.page-overlay-second .hero-background .overlay { position:absolute; top:0; left:0; height:100%; width:100%; background:#26244D; background:linear-gradient(0deg, rgba(38,36,77,1) 0%, rgba(255,255,255,1) 100%); opacity:0.2; transition:opacity 0.3s ease-in-out; }
.page-overlay-second .hero-background .bottom-blend { position:absolute; bottom:-100px; left:0; width:100%; transition:bottom 0.3s ease-in-out; }
.page-overlay-second .hero-background .bottom-blend img { width:100%; display:block; }

.page-overlay-second .content-outer-area { position:absolute; top:100vh; left:50%; transform:translateX(-50%); width:100%; max-width:1040px; height:calc(100vh - 40px); background:#26244D; border-radius:40px; margin:20px 0; transition:top 0.6s ease-in-out, opacity 0.6s ease; opacity:0; overflow:auto; scroll-behavior:smooth; box-shadow:rgba(255, 255, 255, 0.20) 0px 0px 40px; }

.page-overlay-second.expanded { /*display:block;*/ }
.page-overlay-second.expanded .olbg { opacity:1;}
.page-overlay-second.expanded .hero-background .overlay { opacity:0; }
.page-overlay-second.expanded .hero-background .bottom-blend { bottom:-50px; }
.page-overlay-second.expanded .content-outer-area { top:0; opacity:1; }

.page-overlay-second .page-inner { position:relative; width:100%; margin-top:-100px; }




/* Media player */
.player .player-controls { position:relative; background-color:rgba(255,255,255,0.2); border-radius:15px; width:100%; max-width:425px; height:122px; padding:10px; margin:auto; }
.player .progress { background:#fff; border-radius:3px; cursor:ew-resize; width:calc(100% - 160px); height:10px; position:absolute; bottom:10px; right:10px; overflow:hidden; }
.player .progress .progress__filled { position:absolute; top:0; left:0; background:#fc8da8; width:0%; height:10px; }
.player .progress-text { position:absolute; bottom:22px; left:150px; font-size:14px; color:#FFF; display:none; font-family:'Courier New', monospace; }
.player .play { position:absolute; top:10px; right:10px; height:80px; width:80px; cursor:pointer; border:none; background-color:#233458; color:#728CBF; border-radius:15px; }
.player .play:hover, .player .play.playing { background-color:#26244D; color:#fff; }

.player .play span.pause { background-color:#FFF; position:absolute; top:23px; height:34px; width:10px; display:block; border-radius:3px; opacity:0; transition:all 0.5s ease; }

.player .play span.pause.left { left:0; }
.player .play.playing span.pause.left { left:25px; opacity:1; transition:left 0.5s ease, opacity 0.8s ease; }
.player .play span.pause.right { right:0; }
.player .play.playing span.pause.right { right:25px; opacity:1; transition:right 0.5s ease, opacity 0.8s ease; }

.player .play img { opacity:1; transition:opacity 0.5s ease; width:34px; display:inline-block; }

.player .play.playing img { opacity:0; transition:all 0.5s ease; }


.player-controls .spinner { height:130px; width:130px; position:absolute; top:-4px; left:-2px; display:flex; align-items:center; justify-content:center; }
.player-controls .spinner.spin { animation:spin 7s linear infinite; }
.player-controls .spinner .spinner__disc { height:110px; width:110px; border-radius:50%; transition:all 1s ease; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.player-controls .spinner .spinner__disc.scale { transform:scale(1.17); transition:all 1s ease; }
.player-controls .spinner .spinner__disc .center__disc { background-color:#FFF; height:25px; width:25px; border-radius:50%; }

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}


@media (max-width:768px) {
	body { font-size:18px; line-height:1.4em; }
	h2 { font-size:28px; margin-bottom:0.3em; line-height:1.1em; }
	h3 { font-size:22px; font-weight:600; margin-bottom:0.1em; margin-top:0.5em; line-height:1.1em; color:#25B1D8; }
	h4 { font-size:18px; font-weight:600; margin-bottom:0.1em; margin-top:0.5em; line-height:1.1em; color:#25B1D8; }
	h5 { font-size:16px; line-height:1.3em; margin-bottom:0.8em; opacity:0.9; }
	
	.header { font-size:30px; padding:20px 0; }
	
	/* Cards */
	.card-holder { font-size:18px; line-height:1.1em; margin-bottom:25px; }
	.card, .page-overlay { border-radius:30px; }
	
	.lozenge { padding:30px 26px; }
	
	.page-overlay.expanded .hero-background { height:60vh; max-height:100vw; }
	.page-overlay.expanded .hero-background .bottom-blend { bottom:0; width:150vw; margin-left:-25vw; }
	
	.player .player-controls { height:142px; }
	
	.tab-btn .txt-side .title { font-size:18px; }
	.tab-btn .img-side .circle-icon, .tab-btn:hover .img-side .circle-icon { border:4px solid rgba(0,0,0,0.5); }

}