.base-font-size {
font-size: 1.25rem;
line-height: 2rem;
}
.base-font-small {
font-size: 1rem;
line-height: 1.5rem;
}
.glyph-data {
font-family: "icomoon" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}  *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
font-size: 100%;
line-height: 1;
color: #000;
background: #fff;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
border: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
blockquote, q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
@font-face {
font-family: "Switzer-Variable";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Variable.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Variable.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Variable.ttf) format("truetype");
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-VariableItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-VariableItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-VariableItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-VariableItalic.ttf) format("truetype");
font-weight: 100 900;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Thin";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Thin.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Thin.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-Thin.ttf) format("truetype");
font-weight: 100;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-ThinItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-ThinItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-ThinItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/fonts/Switzer-ThinItalic.ttf) format("truetype");
font-weight: 100;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Extralight";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extralight.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extralight.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extralight.ttf) format("truetype");
font-weight: 200;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-ExtralightItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtralightItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtralightItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtralightItalic.ttf) format("truetype");
font-weight: 200;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Light";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Light.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Light.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Light.ttf) format("truetype");
font-weight: 300;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-LightItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-LightItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-LightItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-LightItalic.ttf) format("truetype");
font-weight: 300;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Regular";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Regular.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Regular.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Regular.ttf) format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-Italic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Italic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Italic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Italic.ttf) format("truetype");
font-weight: 400;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Medium";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Medium.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Medium.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Medium.ttf) format("truetype");
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-MediumItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-MediumItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-MediumItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-MediumItalic.ttf) format("truetype");
font-weight: 500;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Semibold";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Semibold.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Semibold.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Semibold.ttf) format("truetype");
font-weight: 600;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-SemiboldItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-SemiboldItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-SemiboldItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Bold";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Bold.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Bold.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Bold.ttf) format("truetype");
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-BoldItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BoldItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BoldItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Extrabold";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extrabold.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extrabold.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Extrabold.ttf) format("truetype");
font-weight: 800;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-ExtraboldItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtraboldItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtraboldItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-ExtraboldItalic.ttf) format("truetype");
font-weight: 800;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: "Switzer-Black";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Black.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Black.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-Black.ttf) format("truetype");
font-weight: 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Switzer-BlackItalic";
src: url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BlackItalic.woff2) format("woff2"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BlackItalic.woff) format("woff"), url(//tracklightingworld.com/wp-content/themes/ledworld/fonts/Switzer-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-display: swap;
font-style: italic;
}
@keyframes moveLine {
0% {
transform: translateX(0);
}
50% {
transform: translateX(calc(80vw + 100%)); }
100% {
transform: translateX(0);
}
}
@media all and (max-width: 1465px) {
@keyframes moveLine {
0% {
transform: translateX(0);
}
50% {
transform: translateX(calc(95vw + 100%)); }
100% {
transform: translateX(0);
}
}
}
@media all and (max-width: 580px) {
@keyframes moveLine {
0% {
transform: translateX(0);
}
50% {
transform: translateX(calc(80vw + 100%)); }
100% {
transform: translateX(0);
}
}
}
@keyframes fadeBackgrounds {
0% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/track-lights2.png);
opacity: 1;
}
33% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/track-lights3.png);
opacity: 1;
}
66% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/track-lights44.png);
opacity: 1;
}
100% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/track-lights2.png);
opacity: 1;
}
}
@keyframes zoomInOut {
0%, 100% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeBackgroundsTracks {
0% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/1.png);
opacity: 1;
}
25% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/2.png);
opacity: 1;
}
50% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/3.png);
opacity: 1;
}
58% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/4.png);
opacity: 1;
}
75% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/1.png);
opacity: 1;
}
83% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/2.png);
opacity: 1;
}
100% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/3.png);
opacity: 1;
}
}
@keyframes fadeBackgroundsTracksRotate {
0% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate1.jpg);
opacity: 1;
}
25% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate2.jpg);
opacity: 1;
}
50% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate3.jpg);
opacity: 1;
}
58% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate4.jpg);
opacity: 1;
}
75% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate5.jpg);
opacity: 1;
}
100% {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/rotate6.jpg);
opacity: 1;
}
}
h1 {
font-size: 3rem;
font-family: "MADE Mirage";
color: #121212;
font-weight: 500;
line-height: 125%;
}
@media all and (max-width: 768px) {
h1 {
font-size: 2rem;
}
}
.cta-light-btn {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/btn-cycle.png);
display: inline-block;
width: 180px;
height: 137px;
background-size: contain;
background-repeat: no-repeat;
}
@media all and (max-width: 768px) {
.cta-light-btn {
width: 130px;
height: 100px;
}
}
.cta {
background: #121212;
color: #ffffff;
text-transform: uppercase;
font-weight: 400;
font-size: 1rem;
padding: 15px 20px 15px 70px;
display: inline-block;
margin-top: 2rem;
}
.cta.cta-arrow {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/icon-arrow.svg);
background-repeat: no-repeat;
background-position: 15px center;
}
.lp_main_cta {
text-transform: uppercase;
color: #ffffff;
background: #121212;
border-radius: 4px;
padding: 18px 20px;
border: 1px solid #121212;
transition: all 0.35s ease;
display: inline-block;
margin-top: 44px;
}
.lp_main_cta:hover {
background-color: #ffffff;
border-color: #121212;
color: #121212;
}
.lp_main_cta.cta_white {
margin-top: 0;
background-color: #121212;
border: 1px solid;
color: #ffffff;
}
.lp_main_cta.cta_white:hover {
background-color: #ffffff;
color: #121212;
border-color: #121212;
}
@media all and (max-width: 768px) {
.lp_main_cta {
margin-top: 10px;
}
}
.calculator {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/src/images/home-calculator-bg-with-overlay.jpg);
padding-top: 3.563rem;
padding-bottom: 3.563rem;
}
.calculator .container .section-title h2 {
font-size: 3.125rem;
font-family: "MADE Mirage";
line-height: 135%;
color: #ffffff;
font-weight: 400;
margin-bottom: 0.75rem;
margin-top: 0;
}
.calculator .container .section-title p {
margin-top: 0;
font-size: 1rem;
line-height: 150%;
font-weight: 300;
margin-bottom: 40px;
color: #ffffff;
font-family: "Switzer-Variable";
}
@media all and (max-width: 768px) {
.calculator .container .section-title p {
font-size: 14px;
}
}
.calculator-container {
background-color: #f4f4f4;
}
.calculator-container .calc-header {
border-bottom: 1px solid #121212;
padding-left: 2.5rem;
padding: 1.5rem 0 0.5rem 2.5rem;
margin-bottom: 2rem;
}
.calculator-container .calc-header span {
text-transform: uppercase;
font-size: 0.688rem;
letter-spacing: 0.055rem;
color: #121212;
}
.calculator-container .calculator-data,
.calculator-container .calculator-results {
display: flex;
height: 600px;
}
@media all and (max-width: 768px) {
.calculator-container .calculator-data,
.calculator-container .calculator-results {
flex-direction: column;
min-height: 600px;
height: auto;
}
}
.calculator-container .results-inner-container {
padding-left: 40px;
padding-right: 40px;
}
.calculator-container .calculator-results {
flex-direction: column;
display: none;
}
.calculator-container .calculator-results .results-buttons {
margin-top: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
@media all and (max-width: 768px) {
.calculator-container .calculator-results .results-buttons {
padding-bottom: 1rem;
}
}
.calculator-container .calculator-results #calculator-preloader {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.calculator-container .calculator-results #calculator-preloader > p {
font-size: 1.875rem;
font-style: normal;
font-weight: 600;
margin-bottom: 0;
margin-top: 2rem;
}
.calculator-container .calculator-results #calculator-preloader > span {
color: #121212;
}
.calculator-container .calculator-results .calc-product-results {
padding-left: 40px;
padding-right: 40px;
display: flex;
gap: 3.5rem;
list-style: none;
margin-top: 1rem;
}
@media all and (max-width: 768px) {
.calculator-container .calculator-results .calc-product-results {
flex-direction: column;
gap: 1.5rem;
}
}
.calculator-container .calculator-results .calc-product-results li {
width: 33.3333333%;
position: relative;
}
@media all and (max-width: 768px) {
.calculator-container .calculator-results .calc-product-results li {
width: 100%;
}
}
.calculator-container .calculator-results .calc-product-results li:not(:last-child):after {
width: 1.5rem;
height: 1.5rem;
content: "+";
display: block;
border-radius: 50%;
top: 50%;
transform: translate(100%, -50%);
right: -1rem;
background: #fff;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
@media all and (max-width: 768px) {
.calculator-container .calculator-results .calc-product-results li:not(:last-child):after {
transform: none;
position: relative;
margin: 10px auto 0;
right: 0;
}
}
.calculator-container .calculator-results .calc-product-results li img {
width: 100%;
aspect-ratio: 10/6;
}
.calculator-container .calculator-results .calc-product-results li img.border {
border: 1px solid #ddd;
border-radius: 4px;
}
.calculator-container .calculator-results .calc-product-results li > div {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.25rem;
}
.calculator-container .calculator-results .calc-product-results li > div span:first-child {
font-size: 1.375rem;
font-weight: 400;
line-height: 130%;
font-family: "Switzer-Variable";
color: #121212;
}
.calculator-container .calculator-results .calc-product-results li > div span.details {
white-space: nowrap;
background-color: #FFDB00;
border-radius: 78px;
font-size: 1rem;
padding: 5px 14px;
align-self: flex-start;
}
.calculator-container .left-side {
border-radius: 0.25rem 0 0 0.25rem;
width: 75%;
padding-right: 1rem;
background-color: #121212;
}
@media all and (max-width: 768px) {
.calculator-container .left-side {
width: 100%;
order: 2;
border-radius: 0 0 0.25rem 0.25rem;
}
}
.calculator-container .left-side .calc-content {
position: relative;
display: flex;
padding-left: 2.5rem;
justify-content: space-between;
}
.calculator-container .left-side .calc-content .choose-length {
display: flex;
position: relative;
margin-top: 2rem;
}
@media all and (max-width: 768px) {
.calculator-container .left-side .calc-content .choose-length .calc-inner-content {
margin-top: 2rem;
}
.calculator-container .left-side .calc-content .choose-length .lw-calculator-title {
position: absolute;
top: -2rem;
}
.calculator-container .left-side .calc-content .choose-length .calc-illustration {
background: none;
}
.calculator-container .left-side .calc-content .choose-length .calc-illustration .track-length-mock {
margin-bottom: 0px !important;
}
}
@media only screen and (min-width: 769px) {
.calculator-container .left-side .calc-content {
height: 424px;
overflow-y: scroll;
}
}
@media all and (max-width: 768px) {
.calculator-container .left-side .calc-content {
flex-direction: column;
padding-left: 1rem;
}
.calculator-container .left-side .calc-content .lght-count {
font-weight: 700;
font-size: 18px;
}
.calculator-container .left-side .calc-content .hide-mobile {
display: none;
}
}
.calculator-container .left-side .calc-content .main-calculator {
width: 62%;
}
@media all and (max-width: 768px) {
.calculator-container .left-side .calc-content .main-calculator {
width: 100%;
}
}
.calculator-container .left-side .calc-content .main-calculator .calc-question {
font-size: 1.875rem;
font-weight: 500;
line-height: 140%;
font-family: "Switzer-Variable";
}
@media all and (max-width: 768px) {
.calculator-container .left-side .calc-content .main-calculator .calc-question {
font-size: 1.125rem;
}
}
.calculator-container .left-side .calc-content .main-calculator p {
opacity: 0.7;
}
.calculator-container .right-side {
padding: 1.5rem;
width: 25%;
border-radius: 0 0.25rem 0.25rem 0;
background-color: #ffffff;
position: relative;
position: relative;
}
@media all and (max-width: 768px) {
.calculator-container .right-side {
width: 100%;
order: 1;
border-radius: 0.25rem 0.25rem 0 0;
}
}
.calculator-container .right-side .author-message {
background-color: #121212;
padding: 1rem;
border-radius: 1rem;
position: relative;
}
.calculator-container .right-side .author-message p {
font-size: 1rem;
font-weight: 300;
line-height: 150%;
margin: 0;
}
.calculator-container .right-side .author-message:before {
content: "";
position: absolute;
top: -9px;
left: 23px;
border-color: #121212;
border-style: solid;
border-width: 20px 20px 0 0;
rotate: 45deg;
}
.calculator-container .right-side .author-info {
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 1rem;
}
.calculator-container .right-side .author-info .avatar-container {
margin-right: 11px;
}
.calculator-container .right-side .author-info h4 {
margin: 0;
font-size: 1rem;
font-weight: 500;
line-height: 135%;
}
.calculator-container .right-side .author-info span {
text-transform: uppercase;
font-size: 0.688rem;
letter-spacing: 0.88px;
}
.calculator-container .right-side:after {
content: "";
display: block;
position: absolute;
width: 8px;
height: 8px;
top: 24px;
right: 24px;
background-color: #FFDB00;
}
.calculator-container .right-side #back-to-start {
position: absolute;
bottom: 10px;
}
@media all and (max-width: 768px) {
.calculator-container .right-side #back-to-start {
display: none !important;
}
}
.calculator-container .calc-footer {
position: relative;
padding-left: 2.5rem;
padding-bottom: 2rem;
}
@media all and (max-width: 768px) {
.calculator-container .calc-footer {
padding-left: 1rem;
margin-top: 2rem;
}
}
.calculator-container .calc-footer .footer-bottom {
width: 100%;
justify-content: space-between;
}
.calculator-container .calc-footer #progressBarContainer {
flex: 1 1 auto;
max-width: 70%;
background-color: #ddd; height: 0.25rem; border-radius: 0.25rem;
}
.calculator-container .calc-footer #progressBar {
width: 0%;
height: 100%;
background-color: #121212;
transition: width 0.4s ease;
border-radius: 0.25rem;
}
.calculator-container .calc-footer span {
text-transform: uppercase;
display: inline-block;
margin-bottom: 9px;
letter-spacing: 0.88px;
}
@media all and (max-width: 768px) {
.calculator-container .calc-footer span {
font-size: 0.75rem;
}
}
.calculator-container .calc-footer .button-container {
align-self: flex-end;
right: 0;
display: flex;
gap: 1rem;
margin-left: 2.1875rem;
}
.calculator-container .already-know {
text-align: center;
}
.calculator-container .already-know h2 {
font-size: 1.5rem;
font-weight: 500;
}
.calculator-container input[type=submit] {
padding: 11px 55px 11px 19px;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1.12px;
text-align: center;
border: none;
cursor: pointer;
border-radius: 4px;
position: relative;
background-repeat: no-repeat;
line-height: normal;
border: 1px solid #121212;
width: 110px;
}
.calculator-container input[type=submit].next-btn {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/src/images/icon-arrow-right-white.svg);
background-position: 62px center;
background-color: #121212;
color: #ffffff;
}
.calculator-container input[type=submit].prev-btn {
visibility: hidden;
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/src/images/icon-arrow-left-black.svg);
padding-left: 54px;
background-position: 19px center;
}
.btn-arrow {
border: none;
outline: none;
cursor: pointer;
padding: 0.625rem 1.25rem;
display: flex;
align-items: center;
color: #121212;
text-transform: uppercase;
}
.btn-arrow:hover, .btn-arrow:focus {
background-color: transparent;
}
.btn-arrow.btn-contained {
color: #ffffff;
}
.btn-arrow.btn-contained.btn-black {
background-color: #121212;
}
.btn-arrow.btn-next.icon-before:after {
display: none;
}
.btn-arrow.btn-next.icon-before:before {
content: "";
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/src/images/icon-pagination-arrow.svg);
background-repeat: no-repeat;
background-position: center center;
margin-right: 0.5rem;
display: inline-block;
display: inline-block;
height: 29px;
width: 46px;
}
.lw-dropdown {
min-width: 142px;
position: relative;
display: inline-block;
}
.lw-dropdown .dropdown-button {
width: 100%;
background-color: #f4f4f4;
border: 1px solid rgba(18, 18, 18, 0.3);
border-radius: 4px;
font-size: 16px;
padding: 0;
color: #121212;
display: flex;
cursor: pointer;
}
.lw-dropdown .dropdown-button.dropdown-open {
background-color: #ffffff;
border-radius: 4px 4px 0px 0px;
}
.lw-dropdown .dropdown-button.dropdown-open > span.selected-value .select-arrow::after {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 1.8072289157px;
border-width: 0 3px 5.196px 3px;
border-color: transparent transparent #121212 transparent;
}
.lw-dropdown .dropdown-button > span {
display: inline-block;
}
.lw-dropdown .dropdown-button > span.selected-value {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 5px 8px 12px;
}
.lw-dropdown .dropdown-button > span.selected-value .select-arrow {
width: 20px;
height: 20px;
position: relative;
}
.lw-dropdown .dropdown-button > span.selected-value .select-arrow::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 1.8072289157px;
border-width: 5.196px 3px 0 3px;
border-color: #121212 transparent transparent transparent;
}
.lw-dropdown .dropdown-button > span.measurement-unit {
padding: 8px 12px;
border-left: 1px solid rgba(18, 18, 18, 0.3);
}
.lw-dropdown .dropdown-menu {
display: none;
}
.calc-inner-content {
max-width: 616px;
}
.lw-calculator-title {
font-size: 1.875rem;
line-height: 1.4;
margin-bottom: 1.1875;
}
@media all and (max-width: 768px) {
.lw-calculator-title {
font-size: 1.2rem;
font-weight: 500;
}
}
ul.tracks-lengths-select-list {
list-style: none;
display: inline-flex;
flex-direction: column;
gap: 22px;
}
ul.tracks-lengths-select-list li {
display: flex;
flex-direction: column;
}
.calc-suspend-tracks-step,
.calc-choose-color-step {
width: 100%;
}
.lw-form-helper-text {
font-size: 0.75rem;
padding: 0;
color: red;
margin: 0;
}
.calc-illustration {
max-width: 320px;
width: 100%;
border-radius: 4px;
background: #a0aced;
padding: 0.5rem;
margin-left: 1rem;
height: fit-content;
}
@media all and (max-width: 768px) {
.calc-illustration {
max-width: 100%;
margin-left: 0;
}
}
.calc-illustration .inner {
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 2rem 1rem 2.125rem 1rem;
}
.calc-illustration .inner .white-board {
background-color: #fff;
border-radius: 10px;
padding: 2rem 1.625rem 0.75rem 0.9375rem;
}
.calc-illustration .inner .white-board.tracks-count-illustration {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 1.6875rem;
padding-bottom: 2.875rem;
padding-top: 1.6875rem;
}
.calc-illustration .inner .white-board.tracks-count-illustration img {
display: block;
max-width: 100%;
}
.calc-illustration .lengths-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.calc-illustration .lengths-list li {
border-radius: 10px;
background: #fff;
padding: 1rem 1rem 1rem 1.1875rem;
display: flex;
}
.calc-illustration .lengths-list li .track-length-mock {
background-color: #121212;
border-bottom: 2px solid #413e3e;
height: 8px;
margin-bottom: 1rem;
position: relative;
transition: width 0.4s ease;
width: 0;
}
.calc-illustration .lengths-list li .track-length-mock::after {
content: "";
left: 0;
width: 100%;
display: block;
position: absolute;
bottom: -5px;
border-bottom: 2px solid #413e3e;
}
.calc-illustration .lengths-list li .track-length-value {
min-width: 17px;
text-align: center;
align-self: flex-end;
margin-right: 6px;
flex: 1 1 auto;
white-space: nowrap;
}
.calc-tracks-count-step {
display: flex;
justify-content: space-between;
}
@media all and (max-width: 768px) {
.calc-tracks-count-step {
flex-direction: column;
}
}
.calc-tracks-count-step .calc-illustration .inner {
min-width: 290px;
min-height: 390px;
position: relative;
padding-top: 5.3125rem;
padding-bottom: 8.6875rem;
}
.calc-tracks-count-step .calc-illustration .inner .person-illustration {
position: absolute;
bottom: 0.5rem;
right: 0;
}
.lw-helper-text {
color: rgba(18, 18, 18, 0.7);
font-weight: 400;
line-height: 1.5;
}
.calc-radio-select {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.calc-radio-select label {
width: 50%;
}
.calc-radio-select label .radio-container {
display: flex;
align-items: center;
margin-bottom: 0.8125rem;
width: 100%;
}
.calc-radio-select label img {
border: 1px solid transparent;
border-radius: 4px;
}
.calc-radio-select label.checked img {
display: block;
border: 1px solid #FFDB00;
}
.calc-suspend-tracks-step .lw-helper-text {
margin-top: 0.75rem;
}
.bubble-text {
border-radius: 20px;
background-color: #f4f4f4;
padding: 0.75rem 0.625rem;
margin-bottom: 1.5rem;
}
.person-container {
display: flex;
justify-content: flex-end;
}
.calc-total-light-count-step .lw-calculator-title {
margin-bottom: 1.5rem;
}
.calc-total-light-count-step button {
appearance: none;
color: #fff;
background: #121212;
text-transform: uppercase;
padding: 0.6875rem 2rem;
border: none;
outline: none;
border-radius: 4px;
margin-top: 3.5rem;
margin-bottom: 1.8125rem;
}
@media all and (max-width: 768px) {
.calc-total-light-count-step button {
margin-top: 1.5rem;
width: 100%;
}
}
.calc-total-light-count-step .insert-lights-count input {
max-width: 42px;
outline: none;
border-radius: 4px;
text-align: center;
padding: 0.5rem 0rem;
border: 1px solid rgba(18, 18, 18, 0.3);
}
.calc-total-light-count-step .insert-lights-count span {
font-weight: 500;
}
.calc-choose-color-step .color-options {
display: flex;
width: 100%;
}
body.has-dropdown-overlay {
position: relative;
}
.dropdown-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.dropdown-overlay .dropdown-menu {
position: absolute;
display: block;
position: absolute;
background-color: #ffffff;
padding: 0;
z-index: 1;
border-left: 1px solid rgba(18, 18, 18, 0.3);
border-bottom: 1px solid rgba(18, 18, 18, 0.3);
border-right: 1px solid rgba(18, 18, 18, 0.3);
max-height: 200px;
overflow-y: auto;
}
.dropdown-overlay .dropdown-menu li {
list-style: none;
padding: 4px 12px;
cursor: pointer;
}
.dropdown-overlay .dropdown-menu li:hover, .dropdown-overlay .dropdown-menu li:focus {
background-color: #f4f4f4;
}
#calculator-email-form {
display: none;
height: 100%;
}
@media all and (max-width: 768px) {
#calculator-email-form {
flex-direction: column;
}
}
.lw-form-row {
margin-bottom: 1.125rem;
min-height: 84px;
}
@media all and (max-width: 768px) {
.lw-form-row {
margin-bottom: 0;
}
}
.lw-form-row .lw-form-helper-text {
padding-top: 4px;
}
.lw-form-row:last-of-type {
margin-bottom: 0;
}
.lw-form-row label {
display: block;
color: #121212;
font-size: 0.6875rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.lw-form-row input[type=text],
.lw-form-row input[type=email],
.lw-form-row textarea {
background: transparent;
max-width: 100%;
width: 320px;
font-size: 1rem;
padding: 0.5rem 0.75rem;
border-radius: 4px;
border: 1px solid rgba(18, 18, 18, 0.3);
outline: none;
}
@media all and (max-width: 768px) {
.lw-form-row input[type=text],
.lw-form-row input[type=email],
.lw-form-row textarea {
width: 100%;
}
}
.lw-form-row input[type=text]:focus, .lw-form-row input[type=text]:active,
.lw-form-row input[type=email]:focus,
.lw-form-row input[type=email]:active,
.lw-form-row textarea:focus,
.lw-form-row textarea:active {
border-color: #121212;
}
.lw-form-row input[type=text]::placeholder,
.lw-form-row input[type=email]::placeholder,
.lw-form-row textarea::placeholder {
color: rgba(18, 18, 18, 0.2);
}
.lw-form-row textarea {
resize: none;
height: 100px;
}
@media all and (max-width: 768px) {
.lw-form-row textarea {
margin-bottom: 15px;
}
}
.calculator-container #calculator-email-form .right-side #back-to-start {
bottom: 28px;
}
#calculator-email-form .total-cost {
margin-top: 90px;
}
@media all and (max-width: 768px) {
#calculator-email-form .total-cost {
margin-top: 30px;
}
}
#calculator-email-form .total-cost ul {
list-style: none;
padding: 0;
}
#calculator-email-form .total-cost ul li {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
align-items: center;
}
#calculator-email-form .total-cost ul li:last-of-type {
margin-bottom: 0;
}
#calculator-email-form .total-cost ul li .dots {
flex: 1 1 auto;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-bottom: 1px dotted rgba(18, 18, 18, 0.6);
}
#calculator-email-form .total-cost ul li > span {
color: rgba(18, 18, 18, 0.6);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
font-size: 0.75rem;
}
#calculator-email-form .total-cost ul li > span:last-of-type {
line-height: 1.5;
font-size: 1rem;
color: #131313;
font-weight: 600;
}
#calculator-email-form .total-cost ul li .tax-info {
font-size: 11px;
color: rgba(18, 18, 18, 0.7);
font-weight: 400;
top: 100%;
position: absolute;
}
#calculator-preloader-container {
height: 100%;
display: flex;
flex-direction: column;
}
.left-side.calc-step-form-container {
display: flex;
flex-direction: column;
}
@media all and (max-width: 768px) {
.left-side.calc-step-form-container {
padding-left: 1rem;
}
}
.left-side.calc-step-form-container #calculator-form {
margin-top: 1.5rem;
}
.left-side.calc-step-form-container .calc-email-step {
display: flex;
flex-direction: column;
padding-left: 2.5rem;
flex: 1 1 auto;
padding-bottom: 2rem;
}
@media all and (max-width: 768px) {
.left-side.calc-step-form-container .calc-email-step {
padding-left: 0;
}
}
.left-side.calc-step-form-container .email-form-actions {
margin-top: auto;
display: flex;
justify-content: flex-end;
gap: 1.25rem;
min-width: 167px;
}
#email-success .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#email-success .content .envelope-illustration {
margin-top: 2.5rem;
position: relative;
}
#email-success .content .envelope-illustration img.envelope {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-bottom: 2rem;
}
#email-success .content h3 {
font-size: 1.875rem;
font-weight: 500;
}
#email-success .content .btn-primary {
margin-top: 2.5rem;
text-decoration: none;
}
#email-success .content p {
text-align: center;
}
.single-application .calculator .already-know {
text-align: center;
color: #ffffff;
margin-top: 50px;
}
.single-application .calculator .already-know h2 {
margin-bottom: 0;
font-family: "MADE Mirage";
font-weight: 500;
}
.single-application .calculator .already-know p {
margin-top: 0;
font-weight: normal;
}
.single-application .calculator .already-know p a {
text-decoration: underline;
color: #FFDB00;
font-weight: 300;
}
.woocommerce-thankyou-order-received {
font-size: 2rem;
margin-top: 0;
}
.woocommerce-thankyou-order-details li {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.order_details .woocommerce-table__product-name a {
color: #121212;
text-decoration: none;
font-weight: 700;
}
.woocommerce-order {
border: 1px solid #121212;
padding: 1rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Switzer-Variable";
content: "";
display: table;
clear: both;
border-bottom: 11px solid #FFDB00;
width: 100%;
}
.container {
max-width: 1440px;
margin: 0px auto;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.container-small {
max-width: 1000px;
margin: 0px auto;
width: 100%;
}
section {
margin-top: 100px;
margin-bottom: 100px;
}
@media all and (max-width: 768px) {
section {
margin-top: 30px;
margin-bottom: 30px;
}
}
.content-commercial {
max-width: 1230px;
margin: 0px auto;
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/banner-tracks.png);
background-repeat: no-repeat;
background-position: right top;
}
@media all and (max-width: 1230px) {
.content-commercial {
background-position: 80% top;
background-size: 389px;
}
}
@media all and (max-width: 768px) {
.content-commercial {
background-position: 88% top;
background-size: 300px;
}
}
.content-commercial .title-section {
padding-top: 60px;
text-align: left;
text-align: center;
max-width: 830px;
padding-bottom: 44px;
}
.content-commercial .title-section h1 {
font-size: 64px;
}
@media all and (max-width: 1230px) {
.content-commercial .title-section h1 {
font-size: 48px;
}
}
@media all and (max-width: 1230px) {
.content-commercial .title-section h1 {
font-size: 35px;
}
}
.content-commercial .title-section p {
font-size: 1.5rem;
margin-top: 15px;
}
@media all and (max-width: 768px) {
.content-commercial .title-section p {
font-size: 1.25rem;
}
}
@media all and (max-width: 1230px) {
.content-commercial .title-section {
padding-left: 30px;
text-align: left;
}
}
@media all and (max-width: 768px) {
.content-commercial .title-section {
background-color: rgba(255, 255, 255, 0.4);
}
}
.user-category {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 50px;
}
@media all and (max-width: 1030px) {
.user-category {
padding-left: 15px;
padding-right: 15px;
max-width: 960px;
}
}
@media all and (max-width: 960px) {
.user-category {
max-width: 860px;
}
}
@media all and (max-width: 850px) {
.user-category {
max-width: 760px;
}
}
@media all and (max-width: 755px) {
.user-category {
justify-content: space-around;
margin-top: 30px;
}
}
.user-category .category-select {
position: relative;
background-color: #121212;
}
@media all and (max-width: 1030px) {
.user-category .category-select {
margin-bottom: 15px;
max-width: 450px;
}
}
@media all and (max-width: 960px) {
.user-category .category-select {
max-width: 400px;
}
}
@media all and (max-width: 850px) {
.user-category .category-select {
max-width: 350px;
}
}
@media all and (max-width: 755px) {
.user-category .category-select {
max-width: 100%;
overflow: hidden;
}
.user-category .category-select a {
height: 231px;
display: block;
}
.user-category .category-select img {
opacity: 1 !important;
}
}
.user-category .category-select h2 {
position: absolute;
bottom: 0;
border-radius: 0 0 4px 4px;
background-color: rgba(0, 0, 0, 0.7);
color: #B8B8B8;
text-transform: uppercase;
font-size: 2.25rem;
width: 100%;
font-weight: 400;
text-align: left;
padding: 35px 0 35px 90px;
}
.user-category .category-select h2:before, .user-category .category-select h2:after {
content: "";
position: absolute;
transition: all 0.3s ease;
}
.user-category .category-select h2:before {
width: 47px;
height: 47px;
border-radius: 50%;
border: 7px solid #ffffff;
background-color: #121212;
left: 25px;
top: 28%;
}
.user-category .category-select h2:after {
width: 15px;
height: 15px;
background-color: #FFDB00;
left: 41px;
top: 42.5%;
}
@media all and (max-width: 755px) {
.user-category .category-select h2 {
padding: 20px 0 20px 90px;
font-size: 1.75rem;
text-transform: capitalize;
font-weight: 500;
color: #fff;
}
.user-category .category-select h2:before {
top: 16%;
}
.user-category .category-select h2:after {
top: 39.5%;
}
}
.user-category .category-select img {
opacity: 0.7;
}
.user-category .category-select a:hover h2 {
transition: background-color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
background-color: rgb(0, 0, 0);
color: #ffffff;
}
.user-category .category-select a:hover h2:before {
border-color: #FFDB00;
}
.user-category .category-select a:hover h2:after {
background-color: #ffffff;
}
.user-category .category-select a:hover img {
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
section.first-page .section-light-bg {
background-color: #f4f4f4;
padding-bottom: 50px;
}
section.first-page .section-light-bg .product-overview {
max-width: 1440px;
padding-top: 50px;
position: relative;
margin: 0px auto;
opacity: 1;  }
@media all and (max-width: 768px) {
section.first-page .section-light-bg .product-overview {
padding-top: 30px;
display: flex;
flex-direction: column;
}
}
section.first-page .section-light-bg .product-overview .content-area {
max-width: 580px;
text-align: center;
margin: 0px auto;
color: #121212;
}
@media all and (max-width: 768px) {
section.first-page .section-light-bg .product-overview .content-area {
max-width: 768px;
}
}
section.first-page .section-light-bg .product-overview .content-area h2 {
font-family: "MADE Mirage";
line-height: 135%;
font-size: 1.5rem;
font-weight: bold;
}
section.first-page .section-light-bg .product-overview .content-area .cta-arrow {
font-size: 1rem;
text-transform: uppercase;
font-weight: 400;
padding-left: 3.5rem;
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/icon-arrow.svg);
background-repeat: no-repeat;
background-position: left center;
}
section.first-page .section-light-bg .product-overview .content-area p {
font-size: 1rem;
font-weight: 400;
line-height: 135%;
padding: 0 45px;
margin: 12px 0 26px;
}
@media all and (max-width: 768px) {
section.first-page .section-light-bg .product-overview .content-area p {
padding: 0 0px;
}
}
@media all and (max-width: 1260px) {
section.first-page .section-light-bg .product-overview {
background-size: contain;
}
}
section.first-page .section-light-bg .track-overview {
position: absolute;
display: flex;
flex-direction: column;
height: 220px;
justify-content: space-between;
top: 0;
text-align: center;
}
section.first-page .section-light-bg .track-overview.left {
left: 0;
}
@media all and (max-width: 1260px) {
section.first-page .section-light-bg .track-overview.left {
max-width: 30%;
}
}
@media all and (max-width: 768px) {
section.first-page .section-light-bg .track-overview.left {
max-width: 49%;
}
}
section.first-page .section-light-bg .track-overview.right {
right: 0;
}
@media all and (max-width: 1260px) {
section.first-page .section-light-bg .track-overview.right {
max-width: 30%;
}
}
@media all and (max-width: 768px) {
section.first-page .section-light-bg .track-overview.right {
max-width: 49%;
}
}
@media all and (max-width: 768px) {
section.first-page .section-light-bg .track-overview {
top: 119%;
height: 170px;
}
}
section.first-page .section-light-bg .track-overview span {
color: #121212;
position: relative;
font-size: 24px;
font-weight: 300;
padding-left: 20px;
display: inline-block;
}
@media all and (max-width: 1260px) {
section.first-page .section-light-bg .track-overview span {
font-size: 16px;
}
}
section.first-page .section-light-bg .track-overview span:before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background-color: #FFDB00;
left: 23%;
top: 5px;
}
@media all and (max-width: 1260px) {
section.first-page .section-light-bg .track-overview span:before {
top: 0px;
left: 17%;
}
}
@media all and (max-width: 480px) {
section.first-page .section-light-bg .track-overview span:before {
left: 10%;
}
}
section.general-text {
padding-bottom: 50px;
max-width: 1200px;
}
section.general-text p {
text-align: center;
line-height: 135%;
font-size: 18px;
}
.content-commercial {
margin-bottom: 50px;
}
@media all and (max-width: 768px) {
.content-commercial {
margin-bottom: 25px;
}
}
.content-commercial .sub-category {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 1230px;
}
.content-commercial .sub-category .category-select {
max-width: 388px;
margin-bottom: 20px;
}
@media all and (max-width: 828px) {
.content-commercial .sub-category .category-select {
max-width: 48%;
}
}
@media all and (max-width: 580px) {
.content-commercial .sub-category .category-select {
max-width: 100%;
}
}
@media all and (max-width: 580px) {
.content-commercial .sub-category {
justify-content: center;
}
}
.content-commercial .title-section h1.has-border {
position: relative;
}
.content-commercial .title-section h1.has-border:before {
content: "";
position: absolute;
display: inline-block;
width: 193px;
height: 1px;
background-color: #121212;
left: 42%;
bottom: -33px;
}
@media all and (max-width: 768px) {
.content-commercial .title-section h1.has-border:before {
left: 25%;
bottom: -20px;
}
}
.standard-content {
margin-top: 100px;
margin-bottom: 50px;
}
@media all and (max-width: 768px) {
.standard-content {
margin-top: 50px;
}
}
.standard-content h2 {
font-size: 40px;
margin-bottom: 25px;
}
@media all and (max-width: 768px) {
.standard-content h2 {
font-size: 24px;
}
}
.standard-content p, .standard-content li {
font-size: 1rem;
line-height: 150%;
}
.standard-content ul {
margin-left: 15px;
margin-top: 25px;
margin-bottom: 25px;
}
.standard-content li {
list-style: none;
padding-left: 25px;
position: relative;
margin-bottom: 10px;
}
.standard-content li:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #121212;
border-radius: 50%;
left: 0;
top: 7px;
}
.page-sections .inner-section {
display: flex;
align-items: center;
margin-bottom: 40px;
justify-content: space-between;
margin: 100px 0;
}
@media all and (max-width: 768px) {
.page-sections .inner-section {
flex-direction: column;
margin: 30px 0;
}
}
.page-sections .inner-section.even .section-content {
order: 2;
padding-left: 55px;
}
@media all and (max-width: 768px) {
.page-sections .inner-section.even .section-content {
padding-left: 0px;
}
}
.page-sections .inner-section.even .section-image {
order: 1;
}
@media all and (max-width: 768px) {
.page-sections .inner-section.even .section-image {
order: 2;
margin-top: 15px;
}
}
.page-sections .inner-section.odd .section-content {
padding-right: 55px;
}
@media all and (max-width: 768px) {
.page-sections .inner-section.odd .section-content {
padding-right: 0px;
}
}
.page-sections .inner-section.odd .section-image {
order: 2;
}
@media all and (max-width: 768px) {
.page-sections .inner-section.odd .section-image {
margin-top: 15px;
}
}
.page-sections .inner-section .section-content {
flex: 1;
margin-top: 0;
max-width: 50%;
margin-bottom: 0;
}
@media all and (max-width: 768px) {
.page-sections .inner-section .section-content {
max-width: 100%;
}
}
.page-sections .inner-section .section-content .cta {
display: block;
background: #121212;
color: #ffffff;
text-align: center;
border-radius: 4px;
text-transform: uppercase;
padding: 15px 15px;
margin-top: 25px;
transition: all 0.3s ease;
}
.page-sections .inner-section .section-content .cta:hover {
background-color: #FFDB00;
color: #121212;
}
.page-sections .inner-section .section-image {
max-width: 50%;
}
@media all and (max-width: 768px) {
.page-sections .inner-section .section-image {
max-width: 100%;
}
} .content-residential .title-section {
text-align: center;
}
.content-residential h1 {
line-height: 135%;
}
.room-selection {
max-width: 1290px;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
@media all and (max-width: 768px) {
.room-selection {
justify-content: center;
gap: 15px;
}
}
.room-selection .single-room {
position: relative;
background-position: top center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
height: 300px;
width: 100%;
max-width: 300px;
border-left: 1px dashed;
border-right: 1px dashed;
border-bottom: 1px solid;
text-align: center;
justify-content: space-around;
}
.room-selection .single-room:before {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/tracks.svg);
content: "";
position: absolute;
top: 0;
left: 0;
right: 0px;
width: 100%;
height: 43px;
}
@media all and (max-width: 768px) {
.room-selection .single-room {
height: 81px;
overflow: hidden;
}
}
.room-selection .single-room div h2 {
font-size: 1rem;
text-transform: uppercase;
padding: 15px 5px;
border-top: 1px dashed;
margin-top: 5px;
transition: all 0.3s ease;
}
.room-selection .single-room:hover h2 {
background-color: #FFDB00;
}
.residential-section .container {
display: flex;
justify-content: space-between;
max-width: 1300px;
padding-top: 100px;
border-top: 1px solid;
position: relative;
}
@media all and (max-width: 768px) {
.residential-section .container {
flex-direction: column;
padding-top: 35px;
gap: 25px;
}
}
.residential-section .container::before {
content: "";
position: absolute;
z-index: 3;
top: -1px;
left: 0;
width: 20px; height: 8px;
background: none;
border-top: 1px solid #ffffff;
animation: moveLine 6s infinite;
}
.residential-section .container .left-side {
max-width: 490px;
}
@media all and (max-width: 768px) {
.residential-section .container .left-side {
max-width: 100%;
}
.residential-section .container .left-side img {
margin: 0px auto;
}
}
.residential-section .container .left-side h2 {
font-size: 3rem;
font-family: "MADE Mirage";
font-weight: 400;
margin-bottom: 2rem;
}
@media all and (max-width: 768px) {
.residential-section .container .left-side h2 {
font-size: 2.5rem;
}
}
.residential-section .container .left-side ul {
margin-top: 25px;
margin-left: 15px;
}
.residential-section .container .left-side ul li {
margin-bottom: 25px;
line-height: 150%;
position: relative;
padding-left: 30px;
}
.residential-section .container .left-side ul li:before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #FFDB00;
left: 0px;
top: 5px;
}
.residential-section .container .left-side p strong {
font-size: 1.25rem;
}
.residential-section .container .right-side img {
margin: 0px auto;
}
.residential-section .running-line {
margin-top: 50px;
}
@media all and (max-width: 768px) {
.residential-section .running-line {
padding-left: 15px;
padding-right: 15px;
margin-top: 25px;
}
}
.residential-section .running-line .running-container {
overflow: hidden;
}
.residential-section .running-line .running-container ul {
text-align: center;
}
.residential-section .running-line .running-container ul li {
display: inline-block;
position: relative;
padding-left: 30px;
margin-left: 10px;
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 20px;
opacity: 0;
transform: scale(0);
animation: zoomInOut 10s ease-in-out infinite;
animation-fill-mode: forwards;
}
.residential-section .running-line .running-container ul li:before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #FFDB00;
left: 0px;
top: 2px;
}
.residential-section .running-line .running-container ul li:hover {
animation-play-state: paused;
}
.residential-section .running-line .running-container ul li:nth-child(1) {
animation-delay: 0s;
}
.residential-section .running-line .running-container ul li:nth-child(2) {
animation-delay: 2s;
}
.residential-section .running-line .running-container ul li:nth-child(3) {
animation-delay: 4s;
}
@media all and (max-width: 768px) {
.residential-section .running-line .running-container ul li {
animation: none;
opacity: 1;
transform: none;
text-align: left;
font-size: 1rem;
line-height: 135%;
}
}
.cta-modified {
margin-top: 0;
}
.cta-modified .cta-container {
max-width: 760px;
}
.cta-modified .cta-container .cta-image {
max-width: 272px;
}
.cta-modified .cta-container a {
max-width: 448px;
}
.details-matter .title-section {
text-align: left;
border-bottom: 1px solid;
padding-bottom: 15px;
margin-bottom: 50px;
position: relative;
}
.details-matter .title-section::before {
content: "";
position: absolute;
z-index: 3;
bottom: -1px;
left: 0;
width: 20px; height: 1px;
background-color: white;
animation: moveLine 6s infinite;
}
.details-matter .title-section span {
text-transform: uppercase;
color: #121212;
opacity: 0.5;
font-size: 1.25rem;
}
.details-matter .flex-box {
display: flex;
justify-content: space-between;
}
@media all and (max-width: 768px) {
.details-matter .flex-box {
flex-direction: column;
}
}
.details-matter .flex-box .left-side {
width: 50%;
}
@media all and (max-width: 768px) {
.details-matter .flex-box .left-side {
width: 100%;
margin-bottom: 25px;
}
}
.details-matter .flex-box .right-side {
width: 50%;
display: flex;
justify-content: space-between;
}
.details-matter .flex-box .right-side .color-temp, .details-matter .flex-box .right-side .rotate-option {
width: 320px;
height: 320px;
background-color: #f1f1f1; background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.details-matter .flex-box .right-side .color-temp {
animation: fadeBackgroundsTracks 6s infinite;
}
.details-matter .flex-box .right-side .rotate-option {
animation: fadeBackgroundsTracksRotate 6s infinite;
}
@media all and (max-width: 768px) {
.details-matter .flex-box .right-side {
display: block;
}
}
.details-matter .flex-box .right-side span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 8%;
color: #121212;
opacity: 80%;
}
.details-matter .flex-box .right-side p {
font-size: 22px;
font-weight: 300;
margin: 5px 0 20px;
}
@media all and (max-width: 768px) {
.details-matter .flex-box .right-side {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 25px;
margin-bottom: 25px;
}
}
.details-matter .flex-box .right-side div div.prods {
max-width: 75%;
margin-bottom: 15px;
}
.details-matter .flex-box .right-side div div.prods:nth-of-type(2) {
border-top: 1px dashed;
padding-top: 15px;
}
.details-matter .flex-box .right-side div div.prods a {
display: block;
margin-top: 20px;
opacity: 60%;
text-transform: uppercase;
}
.details-matter .flex-box .right-side div div.prods a:hover {
opacity: 1;
}
@media all and (max-width: 768px) {
.details-matter .flex-box .right-side div div.prods {
margin: 15px auto;
}
}
.section-dark-bg {
background-color: #121212;
}
.benefit-blocks {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 50px;
padding-bottom: 50px;
max-width: 537px;
margin: 0px auto;
color: #ffffff;
}
@media all and (max-width: 768px) {
.benefit-blocks {
margin: 254px auto 0;
}
}
@media all and (max-width: 580px) {
.benefit-blocks {
margin: 207px auto 0;
padding: 24px 15px;
}
}
@media all and (max-width: 460px) {
.benefit-blocks {
margin: 190px auto 0;
}
}
@media all and (max-width: 460px) {
.benefit-blocks {
flex-wrap: wrap;
}
}
.benefit-blocks div {
border: 1px solid #B8B8B8;
padding: 24px 14px;
border-radius: 4px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 259px;
}
@media all and (max-width: 768px) {
.benefit-blocks div {
width: 49%;
padding: 14px 10px;
}
.benefit-blocks div span {
font-size: 1rem;
font-weight: 300;
}
}
@media all and (max-width: 420px) {
.benefit-blocks div {
width: 100%;
margin-top: 15px;
}
.benefit-blocks div span {
font-size: 14px;
}
}
.benefit-blocks div img {
max-width: 50px;
margin-bottom: 10px;
}
.gallery-section {
margin-top: 0px !important;
margin-bottom: 0px;
}
.owl-carousel {
max-width: 1440px;
margin: 0px auto 10px; }
@media all and (max-width: 1444px) {
.owl-carousel {
max-width: 1200px;
}
}
@media all and (max-width: 768px) {
.owl-carousel {
max-width: 768px;
}
}
.owl-carousel .owl-stage-outer {
max-width: 95vw !important;
}
.owl-nav {
display: none;
}
.owl-carousel img {
max-height: 185px;
max-width: 100%;
} .reviews-container {
background: #f4f4f4;
padding-bottom: 7.125rem;
margin-top: 12rem;
margin-bottom: 0;
}
@media all and (max-width: 768px) {
.reviews-container {
padding-bottom: 2.125rem;
margin-top: 0rem;
}
}
.reviews-container .container {
display: flex;
align-items: center;
}
@media all and (max-width: 768px) {
.reviews-container .container {
flex-wrap: wrap;
flex-direction: column;
}
}
.reviews-container .container .left-side {
min-width: 21rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 4.5rem;
margin-top: -5.7rem;
}
@media all and (max-width: 768px) {
.reviews-container .container .left-side {
display: none;
}
}
@media all and (max-width: 768px) {
.reviews-container .container .left-side .controls-container {
margin-bottom: 1.5rem;
}
}
.reviews-container .container .left-side h2 {
font-size: 3.125rem;
line-height: 135%;
font-family: "MADE Mirage";
font-weight: 400;
margin-top: 0;
margin-bottom: 1.5rem;
}
.reviews-container .container .right-side {
max-width: 992px;
width: 50%;
}
.reviews-container .container .right-side h2 {
font-size: 2rem;
font-family: "MADE Mirage";
font-weight: 500;
margin-top: 4rem;
line-height: 135%;
}
@media all and (max-width: 768px) {
.reviews-container .container .right-side h2 {
margin-top: 2rem;
font-size: 1.5rem;
}
}
.reviews-container .container .right-side .review-content p span {
background: #FFDB00;
padding: 3px 4px;
border-radius: 10px;
display: inline-block;
margin-top: 4px;
}
.reviews-container .container .right-side p {
margin: 15px 0;
line-height: 150%;
}
@media all and (max-width: 768px) {
.reviews-container .container .right-side {
max-width: 100%;
width: 100%;
}
}
.reviews-container .container .right-side .single-review {
padding: 1.5rem;
border-radius: 0.25rem;
border: 1px solid #121212;
margin-left: 1rem;
}
.reviews-container .container .right-side .single-review:first-child {
margin-left: 0;
}
@media all and (max-width: 768px) {
.reviews-container .container .right-side .single-review p {
font-size: 0.875rem;
}
}
.reviews-container .container .right-side .single-review .author-info {
display: flex;
align-items: center;
}
.reviews-container .container .right-side .single-review .author-info h3 {
font-size: 1.375rem;
font-weight: 300;
margin-top: 0;
line-height: 135%;
font-family: "Switzer-Variable";
margin-bottom: 0;
}
.reviews-container .container .right-side .single-review .author-info .personal-info {
margin-left: 1rem;
}
.reviews-container .container .right-side .single-review .author-info .personal-info span {
font-size: 0.688rem;
}
.reviews-container .container .right-side .single-review .author-info .personal-info span.position {
text-transform: uppercase;
letter-spacing: 0.88px;
color: #121212;
display: block;
margin-bottom: 0.25rem;
}
.reviews-container .container .right-side .single-review .platform-icon a {
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/src/images/linkedin.svg);
} footer.main-footer {
background-color: #121212;
border-top: 1px solid #3a3939;
color: #ffffff;
padding-top: 2.5rem;
}
footer.main-footer .footer-content {
display: flex;
align-items: center;
padding-bottom: 2.5rem;
}
@media all and (max-width: 768px) {
footer.main-footer .footer-content {
flex-direction: column;
}
}
footer.main-footer .footer-content p {
line-height: 150%;
}
footer.main-footer .footer-content .footer-menu {
visibility: hidden;
}
footer.main-footer .footer-content .footer-cell {
width: 22%;
color: #ffffff;
}
footer.main-footer .footer-content .footer-cell:first-child {
width: 23%;
}
footer.main-footer .footer-content .footer-cell:nth-child(2) {
width: 55%;
margin-left: 5.625rem;
}
footer.main-footer .footer-content .footer-cell ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer.main-footer .footer-content .footer-cell ul li {
flex: 0 1 calc(33.33% - 10px);
list-style: none;
margin-bottom: 1.5rem;
}
@media all and (max-width: 768px) {
footer.main-footer .footer-content .footer-cell ul li {
flex: 0 1 calc(100% - 10px);
margin-bottom: 0.5rem;
}
}
footer.main-footer .footer-content .footer-cell ul li a {
text-transform: uppercase;
letter-spacing: 1.12px;
}
footer.main-footer .footer-content .footer-cell p {
font-size: 0.875rem;
font-weight: 300;
}
@media all and (max-width: 768px) {
footer.main-footer .footer-content .footer-cell {
width: 100% !important;
padding: 0 !important;
margin-left: 0 !important;
}
}
footer.main-footer .copyright-section {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 2rem;
padding-top: 1.5rem;
}
footer.main-footer .copyright-section p {
margin: 0;
font-size: 0.688rem;
font-weight: 300;
}
footer.main-footer a {
color: #ffffff;
text-decoration: none;
font-size: 0.688rem;
}
.page-template-commercial .details-matter {
margin-top: 100px;
}
@media all and (max-width: 768px) {
.page-template-commercial .details-matter {
margin-top: 30px;
}
}
.page-template-commercial .slick-dots {
display: none;
}
.free-consultation {
padding-bottom: 4rem;
background: #121212;
margin-bottom: 0;
padding-top: 43px;
margin-top: 0;
}
@media all and (max-width: 768px) {
.free-consultation {
padding-bottom: 4rem;
}
}
.free-consultation .title-block {
position: relative;
margin-bottom: 43px;
}
.free-consultation .title-block::before {
content: "";
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 16px;
background-color: #ffffff;
top: 35%;
}
@media all and (max-width: 768px) {
.free-consultation .title-block::before {
top: 20%;
}
}
.free-consultation .title-block .text-block {
max-width: 1200px;
margin: 0px auto;
}
@media all and (max-width: 768px) {
.free-consultation .title-block .text-block {
padding: 0 15px;
}
}
.free-consultation .title-block .text-block h2 {
font-size: 3.125rem;
font-weight: 400;
color: #ffffff;
line-height: 135%;
font-family: "MADE Mirage";
margin-bottom: 1rem;
background-color: #121212;
position: relative;
display: inline;
padding: 0 40px;
margin-left: -43px;
}
@media all and (max-width: 768px) {
.free-consultation .title-block .text-block h2 {
font-size: 28px;
padding-left: 15px;
margin-left: 0;
margin-bottom: 15px;
}
}
.free-consultation .title-block .text-block p {
color: #ffffff;
}
@media all and (max-width: 768px) {
.free-consultation .title-block .text-block p {
font-size: 14px;
}
}
@media all and (max-width: 768px) {
.free-consultation .frm_dropzone.frm_single_upload, .free-consultation .frm_dropzone.dz-clickable {
min-height: 34px !important;
}
}
.free-consultation .consultation-container {
display: flex;
max-width: 1200px;
margin: 0px auto;
justify-content: space-between;
}
@media all and (max-width: 768px) {
.free-consultation .consultation-container {
flex-direction: column;
}
}
.free-consultation .consultation-container form {
margin-left: -15px;
background: #f4f4f4;
padding: 50px 20px 20px;
border-radius: 4px;
}
.free-consultation .consultation-container form .frm_error {
margin-top: 5px;
}
@media all and (max-width: 768px) {
.free-consultation .consultation-container form {
margin-left: 0px;
}
}
@media all and (max-width: 768px) {
.free-consultation .consultation-container .frm_forms {
order: 2;
margin-top: 25px;
}
}
.free-consultation .consultation-container .frm_forms fieldset {
padding-bottom: 0;
}
.free-consultation .consultation-container .frm_forms input:focus,
.free-consultation .consultation-container .frm_forms textarea:focus,
.free-consultation .consultation-container .frm_forms select:focus {
outline: none !important;
box-shadow: none !important;
border-color: #121212 !important;
border: 1px solid !important;
border-color: rgb(0, 0, 0);
}
.free-consultation .consultation-container .frm_forms input::placeholder,
.free-consultation .consultation-container .frm_forms textarea::placeholder,
.free-consultation .consultation-container .frm_forms select::placeholder {
font-weight: bold;
color: rgba(0, 0, 0, 0.8) !important;
font-weight: 300 !important;
font-size: 1rem !important;
font-family: "Switzer-Variable" !important;
}
.free-consultation .consultation-container .frm_forms input, .free-consultation .consultation-container .frm_forms select {
height: 2.5rem;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
background: none;
}
.free-consultation .consultation-container .frm_forms input:focus, .free-consultation .consultation-container .frm_forms select:focus {
outline: none !important;
box-shadow: none !important;
border: 1px solid !important;
border-color: rgb(255, 255, 255);
background: none !important;
}
.free-consultation .consultation-container .frm_forms textarea {
height: 98px;
width: 416px;
resize: none;
border-color: rgba(0, 0, 0, 0.2);
background: none;
}
.free-consultation .consultation-container .frm_forms .form-field {
margin-bottom: 1.5rem;
}
.free-consultation .consultation-container .frm_forms .form-field label {
text-transform: uppercase;
letter-spacing: 0.88px;
font-size: 0.688rem;
font-weight: normal;
margin-bottom: 0.5rem;
padding-bottom: 0;
color: #ffffff;
}
.free-consultation .consultation-container .frm_forms .form-field .frm_submit {
width: 287px;
}
@media all and (max-width: 768px) {
.free-consultation .consultation-container .frm_forms .form-field .frm_submit {
width: 100%;
}
}
.free-consultation .consultation-container .frm_forms .frm_submit {
margin-top: -2.5rem;
}
.free-consultation .consultation-container .frm_forms .frm_submit button.frm_button_submit {
margin: 0;
background-color: #121212;
color: #ffffff;
border: 1px solid;
box-shadow: none;
width: 100%;
text-transform: uppercase;
letter-spacing: 1.12px;
transition: all 0.35s ease;
padding: 0.688rem;
}
.free-consultation .consultation-container .frm_forms .frm_submit button.frm_button_submit:hover {
background-color: #ffffff;
color: #121212;
border-color: #121212;
}
.free-consultation .consultation-container .frm_forms .frm_compact label {
font-size: 0.688rem !important;
text-transform: none !important;
font-weight: 400;
letter-spacing: normal !important;
color: #121212;
}
.free-consultation .consultation-container .frm_forms .frm_dropzone {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/icon-file-upload.svg);
background-repeat: no-repeat;
padding-left: 1.5rem !important;
background-position: left 3px;
background-color: transparent;
}
.free-consultation .consultation-container .frm_forms .frm_dropzone .dz-message {
background: none !important;
color: #121212 !important;
padding-left: 0.5rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: none !important;
box-shadow: none !important;
font-size: 0.688rem !important;
line-height: normal !important;
}
.free-consultation .consultation-container .frm_forms .frm_dropzone .dz-message svg {
display: none;
}
.free-consultation .consultation-container .frm_forms .frm_dropzone .dz-progress {
height: 4px !important;
background-color: #121212 !important;
}
.free-consultation .consultation-container .frm_forms .frm_dropzone .dz-progress .dz-upload {
background-color: #121212 !important;
height: 4px;
}
@media all and (max-width: 768px) {
.free-consultation .section-image {
order: 1;
display: flex;
justify-content: center;
}
}
.free-consultation .section-image img {
border-radius: 4px;
}
input[type=file] {
border: none !important;
margin-left: 7px;
}
header {
background: #121212;
}
header .header-content {
max-width: 1230px;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
header .header-content a, header .header-content p {
color: #ffffff;
font-family: "MADE Mirage";
}
header .header-content .phone-number a {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/phone.png);
background-repeat: no-repeat;
padding: 10px 0 10px 45px;
font-size: 20px;
}
header .header-content .us-flag {
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/us-flag.jpg);
background-repeat: no-repeat;
background-position: right center;
padding: 10px 55px 10px 0px;
}
@media all and (max-width: 1230px) {
header .header-content img {
max-width: 300px;
}
}
@media all and (max-width: 768px) {
header .header-content {
flex-direction: column;
gap: 15px;
}
header .header-content .logo-container {
padding: 10px 15px;
}
header .header-content .us-flag {
padding: 5px 12px 10px 0px;
}
header .header-content .us-flag p {
font-size: 14px;
line-height: 150%;
text-align: center;
max-width: 90%;
}
}
header .attention-block {
text-align: center;
padding: 10px 0;
}
header .attention-block p {
font-weight: 500;
text-transform: uppercase;
color: #ffffff;
font-size: 1rem;
line-height: 125%;
}
header .attention-block p span {
color: #FFDB00;
}
header .attention-block p a {
text-decoration: underline;
}
@media all and (max-width: 580px) {
header .attention-block p {
font-size: 14px;
}
}
header .logo-container {
padding: 30px 15px;
}
@media all and (max-width: 580px) {
header .logo-container {
padding: 20px 15px;
}
}
header .logo-container a {
display: inline-block;
}
.main-cta-section {
background-color: #121212;
border-bottom: 11px solid #FFDB00;
padding: 35px 0;
}
.main-cta-section .cta-container {
display: flex;
justify-content: space-between;
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container {
flex-direction: column;
padding: 0 15px;
}
}
.main-cta-section .cta-container .cta-content {
color: #ffffff;
max-width: 570px;
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container .cta-content {
order: 2;
margin-top: 15px;
}
}
.main-cta-section .cta-container .cta-content h2 {
font-size: 3rem;
font-family: "MADE Mirage";
line-height: 120%;
font-weight: 400;
position: relative;
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container .cta-content h2 {
font-size: 1.5rem;
}
}
.main-cta-section .cta-container .cta-content h2::before {
content: "";
position: absolute;
width: 28px;
height: 16px;
background-color: #FFDB00;
left: -50px;
top: 18px;
}
.main-cta-section .cta-container .cta-content p {
font-size: 18px;
margin-top: 15px;
font-weight: 300;
line-height: 135%;
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container .cta-content p {
font-size: 16px;
}
}
.main-cta-section .cta-container .cta-content a {
background-color: #ffffff;
color: #121212;
text-transform: uppercase;
display: inline-block;
width: 460px;
border-radius: 4px;
text-align: center;
margin-top: 25px;
padding: 15px;
font-weight: 500;
transition: all 0.3s ease;
}
.main-cta-section .cta-container .cta-content a:hover {
background-color: #FFDB00;
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container .cta-content a {
width: 100%;
}
}
@media all and (max-width: 768px) {
.main-cta-section .cta-container .cta-image {
order: 1;
display: flex;
justify-content: center;
}
}
.main-cta-section .cta-container .cta-image img {
border-radius: 4px;
}
.light-cta {
background-color: #F4F4F4;
width: 100%;
padding: 50px 0;
}
@media all and (max-width: 768px) {
.light-cta {
padding: 25px 0;
}
}
.light-cta .container-small {
display: flex;
justify-content: space-between;
align-items: center;
}
@media all and (max-width: 768px) {
.light-cta .container-small {
flex-direction: column;
}
}
.light-cta .container-small div {
max-width: 740px;
}
.light-cta .container-small div p {
text-align: left;
font-size: 18px;
line-height: 135%;
}
@media all and (max-width: 768px) {
.light-cta .container-small div p {
font-size: 16px;
text-align: center;
margin-bottom: 25px;
}
}
@media all and (max-width: 768px) {
.light-cta {
padding-left: 15px;
padding-right: 15px;
}
}
.page-template-template-ppc .footer-ppc {
display: none;
}
.footer-ppc {
margin-top: 74px;
}
.footer-ppc .sticky-cta {
width: 100%;
text-align: center;
background: #000;
color: #fff;
position: fixed;
bottom: 0px;
border-bottom: 11px solid #FFDB00;
border-top: 1px solid #fff;
left: 0;
right: 0;
}
.footer-ppc .sticky-cta a {
display: block;
font-size: 24px;
font-weight: 500;
padding: 25px;
}
.footer-ppc .sticky-cta:hover {
background-color: #262626;
-webkit-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.main-popup {
max-width: 600px;
width: 90%;
background: #121212;
border-bottom: 11px solid #FFDB00;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
z-index: 1000; display: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
@media all and (max-width: 768px) {
.main-popup #frm_field_29_container {
display: none;
}
}
.main-popup #frm_field_48_container {
margin-bottom: 0;
}
.main-popup .popup-header {
background-repeat: no-repeat;
color: #ffffff;
text-align: center;
text-transform: uppercase;
background-position: 75px center;
padding: 30px 0px;
}
@media all and (max-width: 768px) {
.main-popup .popup-header {
padding: 10px 0px;
}
}
.main-popup .popup-header span {
color: #FFDB00;
}
.main-popup .popup-header i {
display: inline-block;
text-align: right;
width: 100%;
font-style: normal;
font-size: 27px;
font-weight: 200;
cursor: pointer;
}
.main-popup .popup-content {
padding: 0 15px;
}
.main-popup .popup-content .popup-header p {
text-align: center;
font-size: 16px;
margin-bottom: 0px;
font-weight: 400;
color: #e5c62d;
padding: 0 73px;
line-height: 125%;
}
@media all and (max-width: 768px) {
.main-popup .popup-content .popup-header p {
padding: 0px;
}
}
.main-popup .popup-content .form-headline span {
color: #fff;
text-align: center;
display: block;
margin-bottom: 20px;
font-size: 18px;
font-weight: 200;
margin-top: 20px;
}
.main-popup .popup-content .consult-banner {
max-width: 440px;
margin: 0px auto;
display: flex;
justify-content: space-around;
align-items: center;
background: #323232;
border-radius: 4px;
margin-bottom: 15px;
padding: 3px;
}
.main-popup .popup-content .consult-banner p {
color: #FFDB00;
font-size: 1rem;
}
.main-popup .popup-content .consult-banner span {
color: #ffffff;
font-size: 14px;
}
.main-popup .popup-content .consult-banner .caption {
width: 70%;
}
.main-popup .popup-content h2 {
font-size: 2rem;
color: #ffffff;
font-family: "MADE Mirage";
font-weight: 400;
text-align: center;
margin-top: 0px;
margin-bottom: 10px;
letter-spacing: 1px;
}
@media all and (max-width: 768px) {
.main-popup .popup-content h2 {
font-size: 1.5rem;
}
}
.main-popup .popup-content .frm_fields_container {
display: block;
max-width: 440px;
margin: 0px auto;
}
@media all and (max-width: 768px) {
.main-popup .popup-content .frm_fields_container .form-field {
margin-bottom: 10px !important;
}
}
.main-popup .popup-content .frm_first {
justify-content: space-between;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field input, .main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field select {
height: 40px;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field input, .main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field select, .main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field textarea {
background-color: #323232;
border: 1px solid rgba(248, 248, 248, 0.3);
color: #ffffff;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field input:focus, .main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field select:focus, .main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field textarea:focus {
background: #000 !important;
box-shadow: none !important;
border-color: #fff !important;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field textarea {
height: 52px;
min-height: 40px;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field label {
font-size: 11px;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 1px;
margin-bottom: 6px;
font-family: "Switzer-Variable";
font-weight: 300;
line-height: 125%;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field .dz-message {
width: 100%;
background: none;
border: 1px dashed;
border-color: rgba(255, 255, 255, 0.7);
box-shadow: none;
background-image: url(//tracklightingworld.com/wp-content/themes/ledworld/campaign/assets/images/file-upload.svg);
background-repeat: no-repeat;
background-position: 25px center;
padding: 25px 0;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field .dz-message svg {
display: none;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field .dz-message button {
font-size: 12px !important;
text-transform: none;
font-family: "Switzer-Variable" !important;
font-weight: 400 !important;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field .frm_submit {
width: 100%;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field button {
background-color: #ffffff;
color: #121212;
text-transform: uppercase;
width: 100%;
box-shadow: none;
border: none;
height: 50px;
}
.main-popup .popup-content .frm_style_formidable-style.with_frm_style .form-field button:hover {
box-shadow: none;
border: none;
background: #FFDB00;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; }
.overlay.active,
.main-popup.active {
display: block;
}