@font-face {
font-family: "Redwing";
src: url(//www.garagegymreviews.com/wp-content/plugins/p4-calculators/assets/fonts/redwing/Redwing-Bold.eot) format("embedded-opentype"),
url(//www.garagegymreviews.com/wp-content/plugins/p4-calculators/assets/fonts/redwing/Redwing-Bold.svg) format("svg"),
url(//www.garagegymreviews.com/wp-content/plugins/p4-calculators/assets/fonts/redwing/Redwing-Bold.ttf) format("truetype"),
url(//www.garagegymreviews.com/wp-content/plugins/p4-calculators/assets/fonts/redwing/Redwing-Bold.woff) format("woff"),
url(//www.garagegymreviews.com/wp-content/plugins/p4-calculators/assets/fonts/redwing/Redwing-Bold.woff2) format("woff2");
}
@font-face {
font-family: Proxima-Nova;
src: url(https://use.typekit.net/alg3nhp.css);
}
.p4-calculator__wrapper {
background-color: #252934;
border: 2px solid #252934;
display: block;
margin: 0 auto;
max-width: 51.5625rem;
text-align: left;
border-bottom-left-radius: .625rem;
border-bottom-right-radius: .625rem;
overflow: hidden;
}
.p4-calculator__header {
margin: 3rem auto;
padding: 0 .75rem;
}
.p4-calculator__logo {
display: block;
height: 12.0625rem;
margin: 0 auto 1.5rem;
width: 12.0625rem;
}
.p4-calculator__title,
.p4-calculator__description {
color: #ffffff;
font-family: "Redwing", sans-serif;
line-height: 1.25;
margin: 0 auto;
text-align: center;
}
.p4-calculator__title {
font-size: 2.375rem;
margin-bottom: .75rem;
text-align: center;
}
.p4-calculator__description {
font-size: 1.5rem;
}
.p4-calculator__form {
display: block;
margin: 3rem auto;
max-width: 23.4375rem;
padding: 0 .75rem;
width: 100%;
}
.p4_calculator__field {
display: flex;
flex-flow: column nowrap;
}
.p4-calculator__field--container {
align-items: flex-start;
display: flex;
flex-flow: row nowrap;
gap: 0;
justify-content: center;
width: 100%;
}
[class^="p4-calculator__label"] {
color: #ffffff;
column-gap: .25rem;
display: flex;
flex-flow: row nowrap;
font-family: "Redwing", sans-serif;
justify-content: flex-start;
margin: 1.5rem 0 .5rem;
text-transform: uppercase;
}
[class^="p4-calculator__label"] b {
display: none;
}
[class^="p4-calculator__label"][class*="error"] {
color: #e31c3d;
}
[class^="p4-calculator__label"][class*="error"] b {
display: block;
}
[class^="p4-calculator__input"],
[class^="p4-calculator__select"] {
border: none;
border-radius: 0;
font-family: 'Proxima-Nova', sans-serif;
font-size: 1rem;
margin: 0;
padding: 1.125rem 0 1.125rem 1rem;
text-align: left;
}
[class^="p4-calculator__field--select"] {
align-items: center;
background-color: #ffffff;
display: grid;
grid-template-areas: "select";
position: relative;
}
[class^="p4-calculator__field--select"]::after {
background-color: #161616;
clip-path: polygon(15% 25%, 0 40%, 50% 100%, 100% 40%, 85% 25%, 50% 65%);
content: "";
grid-area: select;
height: .75rem;
justify-self: end;
margin-right: 1rem;
width: 1rem;
}
[class^="p4-calculator__select"] {
appearance: none;
background-color: transparent;
grid-area: select;
position: relative;
width: 100%;
z-index: 1;
}
[class^="p4-calculator__input"] + input,
[class^="p4-calculator__input"] + [class^="p4-calculator__field--select"] {
border-left: 2px solid #252934;
}
[class*="--full"] {
width: 100%;
}
[class*="--has-units"] {
width: 60%;
}
[class*="--has-units"] + [class*="--units"] {
width: 40%;
}
[class*="--thirds"] {
width: 33%;
}
.p4-calculator__footer {
background-color: #f7f7f7;
padding: 2rem 0;
text-align: center;
}
[class^="p4-calculator__button"] {
background-color: #1974b9;
border: 2px solid #1974b9;
border-radius: 0;
color: #ffffff;
font-family: "Redwing", sans-serif;
font-size: 1.125rem;
line-height: 1.33;
margin: .75rem;
padding: 1rem 3.125rem;
text-transform: uppercase;
}
[class^="p4-calculator__button"][class*="--alternate"] {
background-color: transparent;
border: 2px solid #161616;
color: #161616;
}
[class^="p4-calculator__message"] {
font-family: Proxima-Nova, sans-serif;
font-size: 1rem;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
[class^="p4-calculator__message"][class*="--error"] {
color: #e31c3d;
}
[class^="p4-calculator__message"][class*="--results"] {
color: #1974b9;
}