:root { 

--FontHead: "Libre Franklin", arial, helvetica, sans-serif;
--FontText: "Libre Franklin", arial, helvetica, sans-serif;

--FSTiny: 0.5625rem;
--FSSmall: 0.6875rem;
--FSMedium: 0.875rem;
--FSLarge: 1rem;
--FSXL: 1.125rem;
--FSXXL: 1.5rem;
--FSBig: 1.875rem;
--FSHuge: 2.125rem;
--FSGiant: 2.875rem;

--Body: #FFFFFF;
--Headline: #002053;
--Text: #2D2D30;
--Link: #3366FF;
--Label: #FF0000;

}

/* /////////////////////////////////////////////////////////////////// */

html { overflow: -moz-scrollbars-vertical;  overflow-y: scroll; }
* { -webkit-text-size-adjust: 100%; }
body {	margin: 0px; background-color: var(--Body); }
div, span { font-family: var(--FontText); font-size: var(--FSMedium); font-weight: 500; color: var(--Text); box-sizing: border-box; -webkit-font-smoothing: antialiased; }
a { color: var(--Link); text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
a:hover { text-decoration: underline; }
img { width: auto; max-width: 100%; max-height: 100%; border: none; }

/* ////////////////////////////////////////////////////////////////// */

/* SECTIONS */

.Section { display: block; padding: 20px; }
.Content  { display: block; margin: 0px auto; }

.Block { display: block; position: relative; }
.Block img { border-radius: 8px; }

.Label { 
padding: 6px 6px 4px 6px; 
border-radius: 3px;
text-align: center;
background-color: var(--Label); 
color: var(--Body); 
font-size: var(--FSTiny); 
line-height: 100%; 
font-weight: 600; 
text-transform: uppercase; 
position: absolute; 
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
}

/* ////////////////////////////////////////////////////////////////// */

/* GRID */

.Grid { display: block; margin-bottom: 16px; }
.Grid .Block { margin-bottom: 16px; }

@media (min-width: 380px) {
.Grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 16px; margin: 0px; }
}

/* ////////////////////////////////////////////////////////////////// */

/* INFORMATION */

.Info { display: block; margin-bottom: 16px; }
.Testimonial { display: block; color: var(--Headline); font-size: var(--FSXL); text-align: center; }
.TestimonialName { display: block; color: var(--Headline); font-size: var(--FSLarge); text-align: center; }

/* ////////////////////////////////////////////////////////////////// */

/* CUSTOM */

#SiteSelect .Content { padding-top: 40px; }

#SiteSelect .Grid .Headline { 
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: normal;
color: var(--Headline);
font-size: var(--FSXL); 
font-weight: 800; 
text-align: center; 
}

@media (max-width: 699.9px) {
#SiteSelect .Grid .Spacer { display: none; }
#Block4 { grid-column: span 2; }
}

@media (min-width: 380px) {
#SiteSelect .Content { max-width: 540px; margin: 0px auto; }
#SiteSelect .Grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
#SiteSelect .Grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0px; }
#SiteSelect .Grid .Block { padding: 5px; border-radius: 12px; min-height: 80px; min-width: 80px; }
#SiteSelect .Grid .Site { background-color: var(--Body); filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.25)); }
#SiteSelect .Grid .Headline { padding: 10px; font-size: var(--FSBig); }

#SiteSelect .Content { 
background-repeat: no-repeat; 
background-position: center center; 
background-size: 75%; 
background-image: url(../Images/Background-Circle.svg); 
}

#Block1 { order: 1; }
#Block2 { order: 2; }
#Block3 { order: 3; }
#Block4 { order: 4; grid-column: span 3; }
#Block5 { order: 5; }
#Block6 { order: 6; }
#Block7 { order: 7; }

}

@media (min-width: 500px) and (min-height: 640px) {
#zSiteSelect { display: flex; height: 100vh; justify-content: center; align-items: center; }
}


@media (min-width: 380px) {
#Testimonials .Content { max-width: 540px; }
}

/* /////////////////////////////////////////////////////////////////// */