:root {
	--primary: #B10000;
	--secondary: #680000;
	--select: #FFD3D3;
	--lime: #AAD536;
}
html, body, header, figure {margin: 0;} html, body {font-family: Poppins, 'Lato', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.4}
.container {margin: 0 auto; max-width: 1800px; padding: 0 40px} ::selection {background-color: #FBE500}
.centered {text-align: center;} .hidden {display: none;}


.btn {display: inline-block; text-decoration: none; font-size: 14px; font-weight: 600;}
.btn-outline {color: var(--primary); border: solid 2px var(--primary); padding: 2px 15px; padding-bottom: 4px; border-radius: 8px;}
.btn-outline:hover {background-color: #FFD3D3  }

.site-header {} 
.site-header .top {padding-top: 30px; display: flex; align-items: center; margin-bottom: 70px;}
.site-header .top .brand {line-height: 1.3; flex-grow: 2;}
.site-header .top .brand .logo--not {display: inline-block; color: white; line-height: 45px; padding: 0 20px; background-image: linear-gradient(to bottom, var(--primary) 80%, var(--secondary) 100%); border-radius: 10px; text-shadow: 1px 1px 1px black; float: left; margin-right: 8px; font-size: 22px;}  
.site-header .top .brand .logo {display: inline-block; color: white; line-height: 45px; padding: 12px 20px; background-color: var(--primary); background-image--: linear-gradient(to bottom, var(--primary) 80%, var(--secondary) 100%); border-radius: 10px;  text-shadow: 1px 1px 1px black; float: left; margin-right: 8px; font-size: 22px; display: flex;}  
.site-header .top .brand :is(.title, .subtitle) {margin: 0; padding: 0;}
.site-header .top .brand .title {font-size: 20px;}
.site-header .top .brand .title strong { font-weight: 400; }
.site-header .top .brand .subtitle {font-weight: 300; font-size: 16px;}
.site-header .top .buttons {flex-basis: 150px; text-align: right;}
@media (max-width: 640px) {
	.container {padding: 0 20px;}
	.site-header .top {padding-top: 10px;}
}

.section-search {text-align: center;}
.section-search input {}

.site-main {}
.site-main .ranks {display: flex; align-items: flex-start; justify-content: flex-start; column-gap: 40px; flex-wrap: wrap; align-content--: flex-start}
.site-main .ranks .rank {flex-basis: 190px; flex-grow--: 2; flex-shrink--: 1;}
.site-main .ranks .rank h3 {font-size: 14px; font-weight: 400; color: var(--primary-no, black); background-color--: #fafafa; padding: 5px 5px; padding-top: 10px; margin: 0; border-top--: 4px solid var(--primary);}
.site-main .ranks .rank h3 strong {display: inline-block; padding: 1px 5px; border-radius: 3px; background-color: var(--primary); color: white;}
.site-main .ranks .rank ol {margin: 0; margin-bottom: 20px; padding-left: 5px; line-height: 1.5; list-style-type: none;}
.site-main .ranks .rank ol li {margin: 0; padding: 0; font-size: 15px;}
.site-main .ranks .rank ol li a {text-decoration: none; display: block; color: black;}
.site-main .ranks .rank ol li a:hover {text-decoration: underline;}
.site-main .ranks .rank ol li a--:visited {color: var(--secondary); font-weight: 600}
@media (max-width: 640px) {
	.site-main .ranks {column-gap: 20px;}
	.site-main .ranks .rank {flex-basis: 140px;}
}

.section-search {margin-bottom: 50px;}
.section-search input {border-radius: 20px; border: solid 2px #e0e0e0; font-size: 13px; padding: 6px 14px; font-weight: 400;}
.section-search input:focus-visible {outline:none; border-color: var(--primary)}
.section-search .radio-container {font-size: 12px; margin-top: 10px;}
.section-search .radio-container label {text-transform: uppercase;}
.section-search .radio-container input {font-size: 12px; height: 10px; filter: hue-rotate(169deg) brightness(0.85); }

.prestobar {background-color: #f1f1f1; padding: 20px 0px;}
.prestobar .container {display: flex; align-items: flex-start; align-content: stretch; column-gap: 40px; flex-wrap: wrap; max-width--: 1800px;}
.prestobar section {margin-bottom--: 30px; flex-grow: 1; flex-shrink: 0; flex-basis: 700px;}
.prestobar h3 {margin: 0; font-size: 16px; font-weight: 400; margin-bottom: 8px}
.prestobar p {text-align: justify; font-size: 13px; line-height: 1.4}
@media (max-width: 800px) {
	.prestobar section {flex-basis: unset; flex-shrink: 1;}
}