header {
width: 100%;
max-width: 1440px;
min-width: 752px;
margin: 0 auto;
padding-bottom: 20px;
}
#header_disclaimer {
text-align: center;
width: 100%;
height: 36px;
padding-top: 8px;
}
#header_disclaimer p {
font-family: 'Source Sans 3';
color: #fff;
font-size: 12px;
}
#header_disclaimer a {
font-weight: 700;
padding-left: 2px;
letter-spacing: -0.2px;
}
#header_disclaimer a#header_disclaimer_close {
color: #333;
font-size: 24px;
width: 100%;
display: block;
text-align: right;
cursor: pointer;
}
#disclaimer_more {
display: none;
background: #fff;
color: #333;
font-weight: 400;
letter-spacing: 0.2px;
width: 610px;
margin: auto;
margin-top: 6px;
border-radius: 6px;
border: 1px solid #444;
padding: 5px 20px 25px 20px;
z-index: 9;
position: relative;
}
#header_top {
width: 90%;
max-width: 1440px;
min-width: 752px;
margin: 0 auto;
height: 75px;
}
#header_top p.logo {
position: relative;
width: 200px;
height: 38px;
top: 30px;
left: 40px;
background-size: 100%;
}
p.logo a {
width: 100%;
display: block;
height: 100%;
}
#mainmenu {
float: right;
position: relative;
right: 46px;
top: 18px;
width: 18px;
height: 11px;
}
#mainmenu_links {
display: none;
background: #fff;
width: max-content;
position: absolute;
top: 30px;
right: 0px;
border: 1px solid var(--color-purple-lighter);
z-index: 999999;
opacity: 0.98;
padding: 20px 50px;
margin: 12px 30px 0 30px;
border-radius: 5px;
max-width: calc(100vw - 160px);
overflow: auto;
}
#mainmenu_columns {
column-count: 3;
}
#mainmenu_links p {
font-size: 16px;
}
#mainmenu_links li {
color: var(--color-purple-dark);
padding: 8px 20px;
width: 100%;
margin: auto;
font-size: 16px;
line-height: 16px;
font-weight: 400;
}
#mainmenu_links li a {
color: var(--color-purple-dark);
}
#mainmenu_links li a:hover {
text-decoration: underline;
}
.select_arrow_purple {
position: absolute;
top: 16px;
left: 21px;
width: 13px;
height: 13px;
border: solid var(--color-purple);
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#header {
width: 752px;
margin: 0 auto;
}
#header p, header h1, header h2 {
text-align: center;
}
#header h1 {
font-size: 52px;
font-weight: 800;
line-height: 55px;
letter-spacing: -0.5px;
height: 160px;
text-align: center;
display: table;
width: 100%;
padding-left: 25px;
padding-right: 25px;
}
#header h1 span {
display: table-cell;
vertical-align: middle;
}
#header h2 {
font-size: 16px;
font-weight: 500;
padding-top: 8px;
line-height: 27px;
width: 730px;
margin: auto;
}
#header h2 a {
font-weight: 700;
text-decoration: underline;
}
#header p.updated_at {
width: 226px;
height: 32px;
font-weight: 600;
font-size: 15px;
padding: 3px 6px;
border-radius: 38px;
margin: 0px auto 10px auto;
}
#header p.updated_at span.hour {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.2px;
}
#header_bottom {
width: 708px;
height: 52px;
padding-top: 6px;
border-top: 2px solid #5F5F61;
border-bottom: 2px solid #5F5F61;
margin: auto;
margin-top: 20px;
}
#header_bottom p {
font-size: 18px;
font-weight: 600;
display: inline-block;
width: 250px;
height: 36px;
padding-top: 4px;
padding-right: 90px;
margin-left: 98px;
}
#header_bottom p.check {
border-right: 2px solid #5F5F61;
background: url(../imgs/ico_check.svg) no-repeat;
background-position-y: 7px;
background-size: 21px;
}
header::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
article {
margin: 0 auto;
width: 740px;
position: relative;
min-height: 100px;
}
article::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#comparison_list {
display: flex;
flex-direction: column;
}
.company_box {
width: 740px;
background: #fff;
border-radius: 10px;
padding: 15px 17px;
border: 2px solid var(--color-lighter-gray);
margin: 5px auto;
}
.box_collapsed {
height: 105px;
animation: box_collapse 0.4s;
}
@keyframes box_collapse {
0% { height: 235px; }
95% { height: 100px; }
100% { height: 105px; }
}
.box_expanded {
height: 310px;
animation: box_expand 0.4s;
}
@keyframes box_expand {
0% { height: 90px; }
95% { height: 315px; }
100% { height: 310px; }
}
.box_expanded .phone, .box_expanded .apply {
position: relative;
top: 215px;
animation: cta_box_expand 0.4s;
}
@keyframes cta_box_expand {
0% { top: 0px; }
100% { top: 215px; }
}
.block_toggle {
float: left;
height: 75px;
width: 390px;
z-index: 2;
position: relative;
}
.company_logo {
float: left;
width: 76px;
height: 76px;
margin-right: 10px;
}
.company_logo p {
display: flex;
align-items: center;
height: 100%;
}
.company_logo p img {
width: 100%;
height: auto;
}
.company_name {
float: left;
width: 300px;
height: 46px;
padding-top: 8px;
}
.company_name p {
font-size: 27px;
font-weight: 800;
letter-spacing: -0.6px;
line-height: 29px;
}
.company_arrow img {
display: inline;
}
.company_rating {
float: left;
width: 270px;
height: 20px;
}
.company_rating p {
letter-spacing: -3px;
}
.company_rating p img {
display: inline;
}
.company_rating span {
font-size: 15px;
font-weight: 400;
line-height: 19px;
letter-spacing: -0.2px;
padding-right: 4px;
position: relative;
top: 2px;
left: 5px;
}
.company_rating span.score {
font-weight: 600;
}
.phone_div {
float: left;
height: 48px;
width: 155px;
margin-right: 12px;
margin-top: 10px;
}
.phone {
float: left;
height: 48px;
width: 155px;
border-radius: 8px;
padding: 11px 0 0 30px;
background: var(--color-lighter-gray) url(../imgs/phone.svg) no-repeat;
background-size: 20px;
background-position: 10px 13px;
border: 2px solid #D7D7F5;
}
.phone p {
font-size: 17px;
font-weight: 800;
text-align: center;
color: var(--color-purple-light);
letter-spacing: -0.5px;
}
.apply {
float: left;
height: 48px;
width: 144px;
border-radius: 8px;
padding-top: 13px;
padding-right: 3px;
margin-top: 10px;
position: relative;
letter-spacing: -0.3px;
line-height: 22px;
text-align: center;
white-space: nowrap;
font-size: 20px;
font-weight: 800;
}
.apply_subtitle {
float: right;
width: 144px;
text-align: center;
font-size: 13px;
color: #777;
margin-top: 2px;
}
#component4 .phone-link p {
background: #fff !important;
border: 1px solid #000 !important;
font-weight: normal !important;
}
#component4 .phone-link p a {
color: #000 !important;
}
@media (max-width: 889px) {
#header_top p.logo { left: 10px; }
#mainmenu_links { max-width: 80vw; }
#mainmenu_columns { column-count: 2; }
}
@media (max-width: 480px) {
header { min-width: 360px; width: 100%; background: none; }
#header_disclaimer { padding-top: 10px; }
#header_disclaimer p { font-size: 11px; }
#disclaimer_more { width: 90%; }
#header_top { min-width: 360px; max-width: 448px; width: 100%; height: 56px; border-bottom: 1px solid var(--color-light-gray); }
#header_top p.logo { background-size: 100%; width: 150px; margin: auto; top: 14px; left: 0; }
#mainmenu { position: absolute; right: 16px; top: 20px; }
#mainmenu.mainmenu_disclaimer { top: 57px; }
#mainmenu_links { position: absolute; top: 16px; right: -5px; margin: 10px 0; padding: 20px 15px; width: 95vw; max-width: 95vw; }
#mainmenu_links p, #mainmenu_links li { font-size: 17px; }
#mainmenu_links li { width: 100%; margin: auto; padding: 5px 10px; }
#mainmenu_columns { column-count: 1; }
#header { width: 100%; }
#header p, header h1, #header h2 { color: #000; }
#header h1 { padding-top: 6px; font-size: 38px; line-height: 40px; height: 130px; }
#header h2 { width: 95%; letter-spacing: -0.3px; font-size: 16px; font-weight: 400; line-height: 17px; }
#header h2 span.purple { font-size: 18px; color: var(--color-purple-dark); font-weight: 800; }
#header p.updated_at { margin: 5px auto; }
#header_bottom { min-width: 340px; max-width: 414px; width: 90%; border-color: var(--color-light-gray); }
#header_bottom p { width: 152px; padding-right: 10px; margin-left: 14px; font-weight: 700; }
#header_bottom p.check { padding-left: 20px; border-color: var(--color-light-gray); color: var(--color-darker-gray); }
article { min-width: 340px; max-width: 414px; width: 100%; }
.company_logo { width: 56px; height: 40px; margin-right: 8px; }
.box_collapsed { height: 135px; animation: box_collapse_mobile 0.4s; }
@keyframes box_collapse_mobile {
0% { height: 285px; }
95% { height: 130px; }
100% { height: 135px; }
}
.box_expanded { height: 285px; animation: box_expand_mobile 0.4s; }
@keyframes box_expand_mobile {
0% { height: 135px; }
95% { height: 290px; }
100% { height: 285px; }
}
.block_toggle { width: 100%; height: 50px; }
.company_box { width: 90%; margin: 5px auto; padding: 9px 12px; }
.company_name { width: 76%; height: 22px; padding-top: 0px; }
.company_rating { width: 190px; }
.company_name p { font-size: 20px; line-height: 20px; }
.company_name span.company_arrow { float: right; }
.phone_blank { display: none; }
.phone_div { height: 64px; width: 40vw; padding: 0; margin: 0; margin-top: 4px; }
.phone { background-position: 8px 13px; padding: 9px 0 0 31px; width: 41vw; }
.phone p { font-size: 18px; font-weight: 700; color: var(--color-purple-dark); text-align: center; }
.apply { float: right; width: 38vw; height: 46px; padding-top: 12px; background-color: var(--color-purple-dark); text-align: center; margin-top: 4px; font-size: 18px; font-weight: 800; margin-left: 3px; margin-bottom: 17px; }
.apply_subtitle { width: 38vw; }
.apply_phone_blank { width: 100%; }
.apply::before { filter: brightness(10); opacity: 0.7; top: 0; left: 0; background-size: 17px; background-image: url(../imgs/lightning.svg); background-position: 12px 13px; }
.box_expanded .phone, .box_expanded .apply { top: 150px; animation: cta_box_expand_mobile 0.4s; }
@keyframes cta_box_expand_mobile {
0% { top: 0px; }
100% { top: 150px; }
}
.box_expanded .spec_blocks { position: relative; top: -70px; }
}
@media (max-width: 430px) {
header { max-width: 430px; }
#header_top { max-width: 430px; }
}
@media (max-width: 359px) {
header { min-width: 320px; }
#header_top { min-width: 320px; }
#header h1 { font-size: 32px; line-height: 38px; }
.phone { width: 42vw; }
.apply { width: 40vw; letter-spacing: -0.5px; font-size: 16px; }
.apply_subtitle { width: 40vw; }
.apply_phone_blank { width: 100%; letter-spacing: 0px; }
.apply::before { background-position: 6px 13px; }
.phone p { font-size: 16px; font-weight: 600; letter-spacing: -0.5px; }
#header_bottom { min-width: 300px; }
#header_bottom p { width: 142px; padding-right: 5px; margin-left: 5px; }
article { min-width: 300px; }
.company_name { width: 72%; }
.company_name p { font-size: 17px; }
}
@media (max-width: 319px) {
header { min-width: auto; width: 100%; }
#header_top { min-width: auto; width: 100%; }
#header { width: 100%; }
#header_disclaimer { padding-top: 5px; }
#header h1 { font-size: 24px; line-height: 30px; }
#header h2 { width: 100%; }
#header_bottom { min-width: auto; width: 100%; padding: 0 5px; }
#header_bottom p { width: auto; padding-right: 3px; margin-left: 3px; }
#mainmenu { right: 6px; }
#mainmenu.mainmenu_disclaimer { top: 43px; }
article { min-width: auto; width: 100%; }
.company_box { width: 100%; }
.phone { width: 48vw; }
.apply { width: 48vw; font-size: 14px; }
.apply_subtitle { width: 48vw; }
}