/* Stylesheet for Rapid Ridge Plus */
@font-face {
    font-family: 'Corbel';
    src: url('/fonts/Corbel.woff2') format('woff2'),
        url('/fonts/Corbel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Corbel';
    src: url('/fonts/Corbel-Bold.woff2') format('woff2'),
        url('/fonts/Corbel-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Franklin Gothic Medium and Corbel */
html { font-size: 1vw; } /* For Safari calc resize bug */
body { background-color: #072446; min-height: 1vw; min-width: 300px; }
h1, h2 { font-family: 'Libre Franklin', sans-serif; text-transform: uppercase; }
a { text-decoration: none; }
h2 { font-style: italic; white-space: nowrap; }
p, li, h3, h4, h5, h6 { font-family: 'Corbel','Noto Sans', sans-serif; }
sup { vertical-align: super; font-size: 60%; line-height: 1; }

span.chart_icon { background-image: url(/images/icon_chart.png); }

.container { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); font-size: 16px; }
.header { position: relative; background-color: #538ED0; /* #85add2; */ margin-top: 40px; }
.toolbar_container { position: fixed; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 5; height: 180px; transition: height 0.6s; }
.toolbar { position: relative; height: 60px; background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #eaebef 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#eaebef 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#eaebef 100%);
    box-shadow: 0 0 12px rgba(0,0,0,0.5); transition: height 0.6s;
    z-index:2; filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
.toolbar:before {
    content: ""; width: 580px; height: 95px; background: #eaebef;
    background: -moz-linear-gradient(top,  #eaebef 0%, #9f9f9f 100%);
    background: -webkit-linear-gradient(top,  #eaebef 0%,#9f9f9f 100%);
    background: linear-gradient(to bottom,  #eaebef 0%,#9f9f9f 100%);
    position: absolute; top: 60px;
    transition: transform 0.6s; transform: scaleY(1) translate(0,0); transform-origin: top;
    box-shadow: 5px 12px 12px -5px rgba(0,0,0,0.5);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
.toolbar_container.scroll { height: 60px; }
.toolbar_container.scroll .toolbar:before { transform: skew(-20deg) scaleY(0); }

.toolbar_container.color { position: relative; height: 150px; background-color: #d5dbde; }
.toolbar_container.color h3 { padding-left: 580px; display: flex; justify-content: center; align-items: center; position: absolute; top: 60px; height: 90px; background-color: #2B486A; text-align: right; color: #fff; width: 100%; right: 0; font-size: 32px; }
.toolbar_container.color h3 span.chart_icon { display: block; width: 36px; height: 36px; background-size: contain; transform: rotate(30deg); margin-right: 16px; }

.toolbar nav { position: absolute; top: 0; right: 12px; height: 100%; display: flex; align-items: center; }
.toolbar nav ul { text-align: right; }
.toolbar nav ul li { display: inline; font-size: 18px; white-space: nowrap; }
.toolbar nav ul li a { font-family: 'Libre Franklin', sans-serif; font-weight: 600; color: #000; }
.toolbar nav ul li a:hover { color: #99b2cb; }
.toolbar nav ul li:not(:last-child)::after { content: "|"; padding: 0 12px; position: relative; top: -2px; }
.toolbar nav a.chart_btn { font-size: 16px; background: #395576;
    background: -moz-linear-gradient(top,  #395576 0%, #294566 100%);
    background: -webkit-linear-gradient(top,  #395576 0%,#294566 100%);
    background: linear-gradient(to bottom,  #395576 0%,#294566 100%);
    font-family: 'Libre Franklin', sans-serif; font-weight: 600; 
    border-radius: 8px; margin-left: 24px; padding: 8px 16px; color: #fff;
    display: flex; align-items: flex-end;
}
.toolbar nav a.chart_btn::after { content: "Color Compatibility Chart"; }
.toolbar nav a.chart_btn:hover { background: #597596; }
.toolbar nav a.chart_btn span { display: inline-block; width: 18px; height: 18px; margin-right: 4px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.toolbar nav a.toolbar_mobile_menu { overflow: hidden; width: 0; height: 40px; display: block; transition: width 0.6s; }
.toolbar nav a .hamburger { width: 40px; height: 40px; margin-left: 12px; display: block; background-image: url(/images/menu.png); background-size: contain; }
        
.toolbar .hgroup { position: absolute; top: 15px; left: 24px; }
.toolbar h1 { background-size: 100% auto; background-image: url(/images/rrp_logo.png); width: 537px; height: 101px; transition: transform 0.6s, width 0.6s, height 0.6s; transform-origin: top left; transform: scale(1) translate(0,0); }
.toolbar h1 span { display: none; }
.toolbar h1 a { display: block; width: 100%; height: 100%; }
.toolbar h2 { font-size: 32px; transform: scale(0.68,0.9) translate(3px,0); transform-origin: top left; opacity: 1; transition: transform 0.6s, opacity 0.6s; }
.toolbar h2 span { text-decoration: underline; }

body.scrolled .toolbar .hgroup { top: 9px; left: 9px; }
body.scrolled .toolbar_container { height: 60px; }
body.scrolled .toolbar_container .toolbar:before { transform: scaleY(0) translate(0,-10px) !important; }
/* body.scrolled .toolbar h1 { width: 537px !important; height: 101px !important; transform: scale(0.42) translate(-24px,-14px) !important; } */
body.scrolled .toolbar h1 { transform: scale(0.6); width: 374px; height: 72px; }
body.scrolled .toolbar h2 { transform: scale(0.17,0.22) translate(3px,-70px); opacity: 0; }


.hero { position: relative; max-height: 640px; overflow: hidden; }
.hero_video { position: absolute; z-index: 1; top: 0; left: 0; }
.hero_video video { width: 100%; max-width: 1280px; }
.hero_image { position: relative; padding-top: 50px; z-index: 2; }
.hero_image img { width: 100%; height: auto; max-width: 1280px; }
.hero_feature { background-color: rgba(255,48,48,0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 3; width: 360px; height: 220px; bottom: -50px; right: -12px; transform: rotate(8deg) scale(1); transition: transform 0.6s; transform-origin: bottom right; }
.hero_feature p { cursor: pointer; position: relative; z-index: 2; margin: 0; color: #fff; font-family: 'Libre Franklin', sans-serif; font-size: 24px; text-align: center; text-transform: uppercase; margin-bottom: 0.5em; }
.hero_feature a { z-index: 3;  display: block;  width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.hero_feature:hover { transform: rotate(8deg) scale(1.1); }

#rrp_video { opacity: 0; transition: opacity 1.5s; }
#rrp_video.ready { opacity: 1; }
        
.banner { position: relative; z-index: 2; padding: 1.7em 1.3em; background: #395576;
    background: -moz-linear-gradient(top,  #395576 0%, #294566 100%);
    background: -webkit-linear-gradient(top,  #395576 0%,#294566 100%);
    background: linear-gradient(to bottom,  #395576 0%,#294566 100%);
    box-shadow: 0 10px 8px rgba(0,0,0,0.3);
}
.banner.red { background: #703738;
    background: -moz-linear-gradient(top,  #703738 0%, #632829 100%);
    background: -webkit-linear-gradient(top,  #703738 0%,#632829 100%);
    background: linear-gradient(to bottom,  #703738 0%,#632829 100%);
}
.banner h3 { font-size: 36px; color: #fff; text-align: center; max-width: 700px; margin: 0 auto; line-height: 110%; }
.banner.red h3 { max-width: 800px; }
.banner.red h3 a { color: #84a0c0; }
.banner.gray { text-align: center; background: #b0b4b6;
    background: -moz-linear-gradient(top,  #b0b4b6 0%, #919596 100%);
    background: -webkit-linear-gradient(top,  #b0b4b6 0%,#919596 100%);
    background: linear-gradient(to bottom,  #b0b4b6 0%,#919596 100%);
}
.banner.gray h3 { color: #000; font-size: 24px; text-align: center; margin-bottom: 0.25em; }
.banner.first { margin-top: -10px; }
.section { display: flex; flex-wrap: wrap; }
.section div { flex: 1 0 50%; }
.section.sixty_forty div:nth-child(n) { flex: 1 0 60%; }
.section.sixty_forty div:nth-child(2n) { flex: 1 0 40%; }
    
.section_content { background-color: #d5dbde; display: flex; flex-direction: column; justify-content: center; padding: 3em 4em; }
.section_content:nth-child(n+3) { padding-top: 0; }
.section_content.top { justify-content: flex-start; }
.section_content h3 { font-size: 32px; font-weight: bold; margin-bottom: 1em; }
.section_content h4 { font-size: 32px; font-weight: bold; margin-bottom: 1em; }
.section_content p { font-size: 26px; margin-bottom: 1em; line-height: 140%; }
.section_content p:last-child { margin-bottom: 0; }
.section_content ul { margin-left: 1.5em; list-style-type: disc; }
.section_content ol { margin-left: 3em; margin-bottom: 1.5em; list-style-type: revert-layer; }
.section_content ol ol { margin-bottom: 0; }
.section_content li { font-size: 26px; line-height: 140%; }
.section .section_support { background-color: #d5dbde; position: relative; flex: 1 1 45%; }
.section_support.padding { padding: 0 3em 3em 0; overflow: visible; }
.section_support img { object-fit: cover; height: 100%; width: 100%; display: block; }
.section_support .ds { position: static; height: auto; -webkit-filter: drop-shadow(0px 0px 12px #222); filter: drop-shadow(0 0 12px #222); will-change: filter; margin: 0 auto; }
        
.section_content.downloads { padding: 32px 48px; }
.section .download { display: flex; flex: 1 1 50%; max-width: 600px; margin: 0 auto 32px; }
.section .download:last-child { margin-bottom: 0; }
.section .download_thumb { flex: 1 0 25%; display: flex; justify-content: center; }
.section .download_desc { flex: 1 0 75%; }
.section .download_desc p { font-size: 21px; line-height: 115%; margin-bottom: 0.5em; }
.section .download_desc a { 
    position: relative; font-size: 16px; color: #fff; display: inline-block;
    min-width: 225px; border-radius: 8px; padding: 10px 12px 10px 36px; background: #636c74;
    background: -moz-linear-gradient(top,  #636c74 0%, #4f5a65 100%);
    background: -webkit-linear-gradient(top,  #636c74 0%,#4f5a65 100%);
    background: linear-gradient(to bottom,  #636c74 0%,#4f5a65 100%);
    font-family: 'Libre Franklin', sans-serif; letter-spacing: 0.02em; box-shadow: 3px 3px 6px #666;
}
.section .download_desc a:before { content: ''; position: absolute; background: url(/images/icon_download.png) no-repeat center; background-size: 12px; top: 0; left: 10px; width: 16px; height: 100%; }
.section .download_desc a .size { font-size: 12px; color: #eee; }
.download_thumb { padding: 0; }
.download_thumb img { max-width: 96px; -webkit-filter: drop-shadow(0px 0px 12px #222); filter: drop-shadow(0 0 12px #222); margin-right: 2em; object-fit: contain; }
        
.contact { display: flex; flex-wrap: wrap; background: url(/images/roof_bg.jpg) no-repeat top center; background-size: cover; padding: 0 5em; }
.contact > div { flex: 1 0 50%; }
.contact_section { padding: 3em 4em; }
.contact_section h4 { font-size: 32px; font-weight: bold; margin-bottom: 1em; }
.contact_section h4.loc { font-family: 'Libre Franklin', sans-serif; font-size: 26px; }
.contact_section h5 { font-family: 'Libre Franklin', sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 1em; }
.contact_section p { font-size: 26px; margin-bottom: 1em; line-height: 120%; }
.contact_section p:last-child { margin-bottom: 0; }
.contact_section .contact_items > div { display: flex; align-items: center; margin-bottom: 2em; }
.contact_section .contact_location { margin-bottom: 2em; }
.contact_section .contact_location p { font-size: 17px; line-height: 120%; }
.contact_section .contact_mail a { color: #244464; }
.contact_section a:hover { text-decoration: underline; }
.contact_section div > p { font-family: 'Libre Franklin', sans-serif; font-size: 20px; line-height: 120%; }
.contact_section div > span { display: inline-block; width: 72px; height: 72px; margin-right: 24px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.contact_section .address_icon { background-image: url(/images/icon_factory.png); }
.contact_section .phone_icon { background-image: url(/images/icon_phone.png); }
.contact_section .email_icon { background-image: url(/images/icon_email.png); }
.contact_section .contact_items .contact_shipping { display: block; margin-top: 3em; }
.contact_section .contact_items .contact_shipping h4 { margin-bottom: 0.2em; }
.contact_section .ph { display: inline-block; margin-bottom: 2px; color: #244464; border-bottom: 1px dashed; line-height: 90%; }

.hours { color: #254464; }
        
.footer { background-color: #274466; padding: 4em 6em; display: flex; flex-direction: row-reverse; }
.footer > div { flex: 1 0 50%; }
.footer p { margin-bottom: 0.25em; color: #99b2cb; font-size: 17px; line-height: 120%; }
.footer p:first-child { margin-bottom: 1em; color: #fff; font-size: 18px; }
        
.footer_content { margin-right: 2em; }
        
.footer_nav { display: flex; justify-content: space-evenly; }
.footer_nav li { color: #fff; font-size: 18px; margin-bottom: 0.5em; }
.footer_nav a { color: #fff; }
.footer_nav a:hover { color: #99b2cb; }
        
.mobile_nav_container { position: absolute; max-width: 240px; transform: translateY(-110%); right: 0; box-shadow: 0 0 12px #333; transition: transform 0.6s; background-color: #ddd; border-radius: 0 0 0 8px; display: flex; flex-direction: column; justify-content: space-between; }
.mobile_nav_container.active { transform: translateY(-110%); }
.mobile_nav_container ul li {  border-bottom: 1px solid #aaa; text-align: center; }
.mobile_nav_container ul li:first-child { display: none; background: #395576;
    background: -moz-linear-gradient(top,  #395576 0%, #294566 100%);
    background: -webkit-linear-gradient(top,  #395576 0%,#294566 100%);
    background: linear-gradient(to bottom,  #395576 0%,#294566 100%);
}
.mobile_nav_container ul li:first-child a { color: #fff; }
.mobile_nav_container ul li:first-child span { display: inline-block; width: 18px; height: 18px; margin-right: 8px; margin-top: -2px; background-size: contain; background-position: center; background-repeat: no-repeat; }

.mobile_nav_container ul li:last-child { border-bottom: 0; }
.mobile_nav_container ul li a { display: inline-block; padding: 16px 32px; font-family: 'Libre Franklin', sans-serif; font-size: 18px; font-weight: 600; color: #000; }
.mobile_nav_container ul li a:hover { color: #99b2cb; }
.mobile_nav_container a.chart_btn { font-size: 16px; background: #395576;
    background: -moz-linear-gradient(top,  #395576 0%, #294566 100%);
    background: -webkit-linear-gradient(top,  #395576 0%,#294566 100%);
    background: linear-gradient(to bottom,  #395576 0%,#294566 100%);
    font-family: 'Libre Franklin', sans-serif; font-weight: 600; 
    border-radius: 8px; margin-left: 24px; padding: 8px 16px; color: #fff;
    display: flex; align-items: flex-end;
}
.mobile_nav_container a.chart_btn::after { content: "Color Compatibility Chart"; }
.mobile_nav_container a.chart_btn:hover { background: #597596; }
.mobile_nav_container a.chart_btn span { display: inline-block; width: 18px; height: 18px; margin-right: 4px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.mobile_nav_container p { display: none; padding: 24px 48px; font-size: 16px; color: #666; text-align: center; }

#form { background-color: #fff; padding: 32px; }
.form_row { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 1.8em 1.2em; }
.form_row.center { text-align: center; margin-bottom: 1em; justify-content: center; }
#form form { width: 100%; max-width: 780px; margin: 0 auto; text-align: center; }
#form .buttons { position: relative; height: 72px; }
#form button { cursor: pointer; position: relative; border: 1px solid; border-radius: 6px; padding: 8px; min-width: 160px; font-family: 'Libre Franklin', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 0.5em; } 
#form button.select_all,
#form button.clear_all { 
    /*margin: 0 16px 12px; border: 0; background-color: #eee6e6; padding: 7px 8px 6px 48px; color: #700; box-shadow: inset 2px 2px 3px #e67a73; font-weight: 400; */
    box-shadow:inset 0 39px 0 -24px #e67a73;
	background-color:#e4685d;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	padding:6px 15px 6px 30px;
	text-decoration:none;
	text-shadow: 0 1px 0 #b23e35;
    border-radius: 6px;
    margin: 0 8px 12px;
}
#form button.select_all:hover,
#form button.clear_all:hover { background-color: #f4786d; box-shadow:inset 0 39px 0 -24px #f68a83; }
#form button::before { content: ""; width: 18px; height: 18px; position: absolute; top: 6px; left: 12px; background-size: contain; filter: brightness(0) invert(1); }
#form button.select_all::before { background-image: url(/images/select_all.png); }
#form button.clear_all::before { background-image: url(/images/clear_all.png); }
#form .manufacturer { position: absolute; left: -9999px; }
#form .manufacturer_label { display: flex; justify-content: center; align-items: center; min-width: 240px; text-transform: uppercase; cursor: pointer; color: #2B486A; position: relative; border: 1px solid #2B486A; background-color: #D5DEE3; border-radius: 32px; padding: 14px 8px 12px 48px; font-family: 'Libre Franklin', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 0; opacity: 0.7; box-shadow: inset 1px 1px 2px #666, 2px 2px 3px 1px #666; }
#form .manufacturer_label .smaller { font-size: 84%; }
#form .manufacturer_label::before { content: ""; position: absolute; top: 8px; left: 8px; border-radius: 18px; display: block; border: 1px solid #2B486A; width: 36px; height: 36px; background-color: #fff;  }
#form .manufacturer:checked + .manufacturer_label { background-color: #2B486A; color: #fff; opacity: 1; box-shadow: inset 1px 1px 2px #eee, 2px 2px 3px 1px #000; }
#form .manufacturer:checked + .manufacturer_label::after { content: "\2713"; position: absolute; top: 11px; left: 13px; font-size: 32px; color: #2B486A; }
#form hr { margin-bottom: 2em; margin-top: 2em; background-color: #ccc; color: #ccc; border: 0; height: 1px; }
#form button.download,
#form button.view {
    box-shadow:inset 0 1px 0 0 #bCcDd7, 2px 2px 4px 0 #999;
	background:linear-gradient(to bottom, #9CADB7 5%, #5C6D77 100%);
	background-color:#9CADB7;
	border-radius:16px;
	border:1px solid #6C8D97;
	display:inline-flex;
	cursor:pointer;
	color:#ffffff;
	font-size:32px;
	padding:12px 24px;
	text-decoration:none;
	text-shadow:0 1px 0 #5C6D77;
    position: relative;
    min-width: 300px;
    justify-content: center;
    line-height: 100%;
    flex: 1 0 auto;
}
html.mobile #form button.download { display: none; }

#form button.download::before,
#form button.view::before { content: ""; filter: none;  background-repeat: no-repeat; width: 32px; height: 28px; position: static; margin-right: 4px; background-position: center; }
#form button.download::before { background-image: url(/images/icon_download.png); }
#form button.view::before { background-image: url(/images/icon_view.png); }

#form button.download::after { content: "DOWNLOAD"; }
#form button.view::after { content: "VIEW"; }
#form button.download:hover, #form button.view:hover { background:linear-gradient(to bottom, #BCCDD7 5%, #7C8D97 100%); }

#form .generating button, #form .generating input, #form .generating label { cursor: not-allowed; }
#form .generating .buttons button { visibility: hidden; }

#form .status { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #345678; border-radius: 16px; }
#form .generating .status { display: flex; align-items: center; justify-content: center; }
#form .message { color: #fff; display: flex; flex-direction: column; font-size: 32px; justify-content: center; align-items: center; height: 100%; padding-left: 50px; padding-right: 16px; text-transform: uppercase; }
#form .message em { font-size: 20px; }
/*
#form .generating button.active.download, #form .generating button.active.view { cursor: not-allowed; background:linear-gradient(to bottom, #BCCDD7 5%, #7C8D97 100%); }
#form .generating button.active.download::before, #form .generating button.active.view::before { display: none; }
#form .generating button.active.download::after, #form .generating button.active.view::after { content: "Generating...\Aplease wait"; white-space: pre; }
*/

@media (max-width: 1279px) {
    .toolbar_container { height: 17vw; }
    .toolbar:before { width: 45.4vw; height: 7.4vw; }
    .toolbar .hgroup { top: calc(8px + 0.55vw); left: calc(8px + 1.25vw); }
    .toolbar h1 { width: calc(134px + 31.5vw); height: calc(25px + 6vw); }
    .toolbar h2 { font-size: calc(8px + 1.88vw); }
    .toolbar_container.color { height: 13vw; }
    .toolbar_container.color h3 { padding-left: calc(120px + 34vw); height: calc(18px + 5.5vw); font-size: 2.6vw; }
    .toolbar_container.color h3 span.chart_icon { width: 2.8vw; height: 2.8vw; }
    .hero_image { padding-top: calc(12px + 3vw); }
    .hero_feature { width: 28vw; height: 17vw; }
    .hero_feature p { font-size: 1.85vw; }
    .section_content { padding: 6.4vw 5.2vw; }
    .contact { padding: 0 5vw; }
    .contact > div:first-child { flex: 1 0 55%; }
    .contact > div:last-child { flex: 1 0 45%; }
    .contact_section { padding: 4vw 5vw; }
}
        
@media (max-width: 1180px) {
    .toolbar nav ul { display: none; }
    .toolbar nav a.toolbar_mobile_menu { width: 50px; }
    .mobile_nav_container.active { transform: translateY(0); }
}
        
@media (max-width: 980px) {
    .section_content h4 { font-size: 30px; }
    .section_content p { font-size: 24px; line-height: 130%; }
    .section_content li { font-size: 24px; line-height: 130%; }
    .section .download_desc p { font-size: 20px; }
    .section .download_desc a { font-size: 15px; }
            
    .banner { padding: 2em 1.3em; }
    .banner.red { padding: 3em; }
    .banner h3 { font-size: 32px; max-width: 640px; }
    .contact { display: block; }
    .contact_section { padding: 4vw 2vw; }
    .contact_section:last-child { padding-top: 0; }
    .contact_items { display: flex; flex-wrap: wrap; }
    .contact_items > div { flex: 1 0 50%; }
    .contact_items > div:nth-child(1),
    .contact_items > div:nth-child(3) { flex: 1 1 55%; }
    .contact_items > div:nth-child(2),
    .contact_items > div:nth-child(4) { flex: 1 1 40%; }
    /*
    .contact_items > div { flex: 1 0 60%; }
    .contact_items > div:nth-child(2) { flex: 1 0 40%; }
    .contact_items > div:nth-child(3) { order: 4; flex: 1 0 40%; justify-content: flex-end; }
    .contact_items > div:nth-child(4) { order: 3; flex: 1 0 32%; }
    */
    .contact_section .contact_items .contact_shipping { margin-top: 0.5em; }
    .contact_section .contact_items .contact_shipping h4 { font-size: 3vw; }
    .contact_section .contact_items .contact_shipping h5 { margin-bottom: 0; }
    .contact_section .contact_items .contact_shipping span { white-space: nowrap; }
    .footer { display: block; padding: 4vw 6vw; }
    .footer_content { margin-right: 0; }
    .footer_nav { margin: 0 auto 2em; max-width: 640px; }
    .footer_content p:first-child { text-align: center; }
    .contact_location { display: flex; flex-wrap: wrap; }
    .contact_location > p { flex: 1 0 48%; }
            
}
        
@media (max-width: 900px) {
    .hero_feature { bottom: -5vw; }
    .section_content.downloads { padding: 32px; }
    .download_thumb img { margin-right: 1.5em; }
    .section .download_desc { flex: 1 0 70%; }
    .section .download_desc p { font-size: 18px; }
    .contact_section div > span { width: 64px; height: 64px; margin-right: 20px; }
    .contact_section div > p { font-size: 18px; }
    .contact_items > div { flex: 1 1 50%; }
    .contact_items > div { width: 360px; margin: 0 auto 2em; }
    .contact_items > div:nth-child(2) { justify-content: flex-start; }
    #form .buttons { height: auto; }
    #form .message { padding-left: 100px; }
}
        
@media (max-width: 760px) {
    
    .toolbar { height: 60px; box-shadow: 0 0 12px rgba(0,0,0,0.5); }
    .toolbar_container { height: 60px; overflow: visible; }
    .toolbar_container .toolbar:before { transform: scaleY(0); }
    .toolbar_container.color { height: 120px; }
    .toolbar_container.color h3 { padding: 0; height: 60px; font-size: 24px; }
    .toolbar_container.color h3 span.chart_icon { width: 28px; height: 28px; }
    .toolbar .hgroup { top: 9px; left: 9px; width: 240px; height: 48px; }
    .toolbar h1 { transform: scale(0.6); width: 374px; height: 72px; }
    .toolbar h2 { opacity: 0; transform: scale(0) translate(3px,-100px); }
            
    .banner { padding: 2.5em 1.3em; }
    .banner h3 { font-size: 28px; max-width: 600px; }
    .hero_feature { bottom: -4vw; right: -1.2vw; }
    .contact_items { flex-direction: column; }
    .section_content h4 { font-size: 28px; }
    .section_content p { font-size: 22px; line-height: 125%; }
    .section_content li { font-size: 22px; line-height: 125%; }
    .section .download_desc { display: flex; flex-direction: column; justify-content: center; }
    .section .download_desc p { font-size: 18px; }
    .section .download_desc a { font-size: 14px; max-width: 280px; }
    .contact_section p { font-size: 24px; }
    .contact_section h4,
    .contact_section .contact_items .contact_shipping h4 { font-size: 24px; }
    .contact_section h4.loc { font-size: 22px; }
    .contact_section div > p { font-size: 18px; }
            
    .section { display: block; }
    .section.sixty_forty .section_content { padding-bottom: 1vw; }
    .section_content:nth-child(n+3) { padding-top: 6.4vw; }
    .section_support.padding { padding: 9vw 6vw; }
    .section_content.downloads { padding: 3.5vw 5vw; }
    
    .form_row { gap: 18px; }
    #form hr { margin-top: 18px; margin-bottom: 18px; }
            
    .contact_location { flex-direction: column; }
    .contact_location > p { flex: 1 0 auto; width: 300px; margin: 0 auto 2em; }
}
        
@media (max-width: 600px) {
    .toolbar nav a.chart_btn::after { content: "Color Chart"; }
}
        
@media (max-width: 480px) {
    
    .mobile_nav_container { position: fixed; width: 100%; height: calc(100% - 60px); max-width: 100%; }
    .mobile_nav_container ul li a { display: inline-flex; align-items: center; padding: 24px 32px; }
    .mobile_nav_container ul li:first-child { display: block; margin-top: 1px; }
    .mobile_nav_container ul li:last-child { border-bottom: 1px solid; }
    .mobile_nav_container p { display: block; }
    
    .toolbar_container.color h3 { text-align: center; }
    .toolbar_container.color h3 span.chart_icon { display: none; }
    .toolbar nav a.chart_btn { padding: 8px; margin: 0; }
    .toolbar nav a.chart_btn span { margin: 0; }
    .toolbar nav a.chart_btn::after { content: ""; }
    .header { width: 120%; margin-left: -16.66%;  }
    .hero_image { padding-top: 32px; }
    
    .hero_feature { top: 8vw; left: 12vw; transform: rotate(-8deg); width: 50vw; height: 20vw; transform-origin: top left; }
    .hero_feature p { font-size: 3.2vw; margin: 0; }
    .hero_feature:hover { transform: rotate(-8deg) scale(1.1); }
        
    .section div,
    .section.sixty_forty div:nth-child(n),
    .section.sixty_forty div:nth-child(2n) { flex: 1 0 100%; }
    .section_content,
    .section_content:nth-child(n+3) { padding-top: 9vw; }
    .sub .section_content { padding-top: 6.4vw; }
    
    .banner, .banner.red { padding: 5vw 4vw; }
    .banner h3 { font-size: 6.4vw; }
    .banner.gray h3 { font-size: 5.8vw; }
    .banner.gray img { width: 90%; margin: 0 auto; }
    .section_content h4 { font-size: 6.6vw; }
    .section_content p, .section_content li { font-size: 6vw; }
    .section_content ul { margin-left: 24px; }
            
    .section_content.downloads { display: block; padding: 9vw 6vw; }
    .section .download, .section .view { flex: 1 0 auto; }
    .section .view { margin-bottom: 0 !important; }
    .section .download { margin: 0 0 32px 0; }
    .section .download_thumb { margin-bottom: 16px; text-align: center; align-items: flex-start; }
    .section .download_thumb img { max-width: 90px; }
    .section .download_desc { display: block; flex: 1 0 66%; }
    .section .download_desc p { margin-bottom: 0.6em; font-size: 18px; text-align: left; }
    .section .download_desc a { margin: 0; font-size: 16px; max-width: 200px; min-width: 0; }
            
    .contact { padding: 6vw; }
    .contact_section p { font-size: 22px; }
    .contact_section h4 { font-size: 22px; }
    .contact_section h4.loc { font-size: 21px; }
    .contact_section h5 { font-size: 16px; }
    .contact_section .contact_items > div { margin-bottom: 2em; }
    .contact_section .contact_location { margin-bottom: 0; }
    
    #form { padding: 32px 16px; }
    #form p.form_row.center { flex-direction: column; gap: 0; max-width: 240px; }
            
    .footer { padding: 8vw 6vw; }
    .footer_nav { justify-content: space-around; }
    .footer_nav ul { flex: 1 1 50%; }
    .footer_nav li { max-height: 20px; font-size: 20px; margin-bottom: 0.8em; }
}
        
@media (max-width: 359px) {
    .toolbar nav a.chart_btn { display: none; }
    .section .download { display: block; margin-bottom: 48px; }
    .download_thumb img { margin: 0; }
    .section .download_desc { text-align: center; }
    .section .download_desc p { text-align: center; }
    .contact_items > div { width: 100%; flex-direction: column; }
    .contact_items > div span { margin-bottom: 8px; }
    #form { padding: 6vw; }
}

.loader {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 6%;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 2px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 2s ease-in-out infinite alternate;
}
.loader::after {
  border-color: #FF3D00;
  animation-direction: alternate-reverse;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}