.loading-screen{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0, 0, 0, 0.913);
color:#fff;
opacity:1;
visibility:visible;
transition:opacity 1s ease,visibility 1s ease;
}

.loading-screen.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loading-content{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.loading-monogram{
display:flex;
align-items:center;
justify-content:center;
font-family:var(--heading);
font-size:4.5rem;
font-weight:500;
line-height:1;
color:#fff;
animation:loadingFade 1.8s ease-in-out infinite alternate;
}

.loading-ampersand{
font-size:1.8rem;
margin:0 7px;
color:rgba(255,255,255,.75);
}

.loading-subtitle{
margin-top:18px;
font-size:.65rem;
letter-spacing:4px;
text-transform:uppercase;
color:#fff;
opacity:.8;
}

.loading-line{
width:45px;
height:1px;
margin:16px 0 12px;
background:#fff;
opacity:.6;
}

.loading-names{
font-family:var(--heading);
font-size:1.15rem;
letter-spacing:1px;
color:#fff;
}

.loading-ring{
width:30px;
height:30px;
margin-top:30px;
border:1px solid rgba(255,255,255,.25);
border-top-color:#fff;
border-radius:50%;
animation:loadingSpin 1.2s linear infinite;
}

@media (min-width:1025px){
.loading-monogram{font-size:4.5rem;}
}

@media (min-width:1200px){
.loading-monogram{font-size:5rem;}
}

@media (min-width:1600px){
.loading-monogram{font-size:5.5rem;}
}

@media (max-width:1199px){
.loading-monogram{font-size:4.3rem;}
}

@media (max-width:1024px){
.loading-monogram{font-size:4rem;}
}

@media (max-width:992px){
.loading-monogram{font-size:3.8rem;}
}

@media (max-width:768px){
.loading-monogram{font-size:3.5rem;}
.loading-subtitle{font-size:.6rem;letter-spacing:3px;}
.loading-names{font-size:1.05rem;}
}

@media (max-width:480px){
.loading-monogram{font-size:3.2rem;}
.loading-ampersand{font-size:1.5rem;}
}

@media (max-width:420px){
.loading-monogram{font-size:3rem;}
.loading-subtitle{font-size:.55rem;}
.loading-names{font-size:1rem;}
}

@media (max-width:360px){
.loading-monogram{font-size:2.8rem;}
.loading-ampersand{font-size:1.35rem;margin:0 5px;}
.loading-subtitle{font-size:.5rem;letter-spacing:2.5px;}
.loading-names{font-size:.95rem;}
.loading-ring{width:26px;height:26px;}
}

@keyframes loadingFade{
from{opacity:.55;transform:translateY(3px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes loadingSpin{
to{transform:rotate(360deg);}
}