* {box-sizing: border-box;}

html {width: 100%; height: 100%; padding: 0; margin: 0; scroll-behavior: smooth;}
body {width: 100%; height: 100%; padding: 0; margin: 0; background: #fafafa; font-family: 'Roboto', sans-serif;}

/* Page Backgrounds */
.home-banner {position: relative; width:100%; height: 100%;}

.home-banner-content-row {position: absolute; z-index: 10; top: 35%; right: 0; width: 100%; background: url(../images/home/text-icon-shadow1.png) repeat-x center center; text-align: left; border:0px solid red;}
.home-banner-text-icon-row {display: flex1; border:0px solid red; align-items: center; justify-content: flex-start; padding: 2% 15%;}

.home-banner-title {font-weight: 500; font-size: 36px;}
.home-vbanners-title {font-weight: 500; font-size: 28px;}


/*.top-banner-title-bg {width:100%; height: 100vh; display: flex; justify-content: center; align-items: flex-end; background: url(../images/bg-fade.png) repeat-x center bottom;}*/


.top-banner-title-bg {width:100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; background: url(../images/bg-fade.png) repeat-x center bottom;}

.top-banner-title-bottom {padding-bottom: 10%; text-align: center;}
.top-banner-title-bottom h1 {margin: 0;}
.mini-title {color: #fff; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; margin-top: 10px; display: block;}

.page-index .top-banner {background: url(../images/bg-test.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-about .top-banner {background: url(../images/bg-test.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-home .top-banner {background: url(../images/home/bg-home.jpg) no-repeat center center; background-size: cover;}

.page-ideas .top-banner {background: url(../images/backgrounds/tban-ideas.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
/*.page-team .top-banner {background: url(../images/backgrounds/tban-team-vs.jpg) no-repeat center center; background-size: cover; width:100%; height: 50vh;}*/
.page-team .top-banner {width:100%; height: 50vh; padding-top: 78px;}


.page-products .top-banner { /*background: url(../images/backgrounds/tban-products.jpg) no-repeat center center;*/ background-size: cover; width:100%; height: 100vh;}
.page-products-blank .top-banner {background: url(../images/backgrounds/tban-products-blank.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-colors .top-banner {background: url(../images/backgrounds/3d/1_Velaria_Systems_Ceiling_Colors_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-graphics .top-banner {background: url(../images/backgrounds/3d/3_Velaria_Systems_Ceiling_Graphics_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-3dforms .top-banner {background: url(../images/backgrounds/3d/4_Velaria_Systems_Ceiling_3Dforms_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-illumination .top-banner {background: url(../images/backgrounds/3d/6_Velaria_Systems_Ceiling_Illumination_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-patterns .top-banner {background: url(../images/backgrounds/3d/2_Velaria_Systems_Ceiling_Pattern_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-acoustics .top-banner {background: url(../images/backgrounds/3d/5_Velaria_Systems_Ceiling_Acoustic_final_icon.jpg) no-repeat center top; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-mirrors .top-banner {background: url(../images/backgrounds/3d/7_Velaria_Systems_Ceiling_Mirrors_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-3dforms .top-banner {background: url(../images/backgrounds/3d/11_Velaria_Systems_Walls_3DForms_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-graphics .top-banner {background: url(../images/backgrounds/3d/10_Velaria_Systems_Walls_Graphics_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-backlighting .top-banner {background: url(../images/backgrounds/3d/13_Velaria_Systems_Walls_Backlighting_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-textures .top-banner {background: url(../images/backgrounds/3d/14_Velaria_Systems_Walls_Textures_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-specialty-anti-microbial .top-banner {background: url(../images/backgrounds/tban-products-specialty-antimicrobial.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-specialty-natatoriums .top-banner {background: url(../images/backgrounds/tban-products-specialty-swimmingpool.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-acoustics .top-banner {background: url(../images/backgrounds/3d/12_Velaria_Systems_Walls_Acoustic_final_icon.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-patterns .top-banner {background: url(../images/backgrounds/3d/9_Velaria_Systems_Walls_Patterns_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-colors .top-banner {background: url(../images/backgrounds/3d/8_Velaria_Systems_Walls_Colors_final.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-acoustics-performance .top-banner {background: url(../images/backgrounds/3d/5_Velaria_Systems_Ceiling_Acoustic_final_icon.jpg) no-repeat center top; background-size: cover; width:100%; height: 100vh;}
.page-products-lighting-sup-lighting .top-banner {background: url(../images/backgrounds/tban-products-lighting-sup-lighting.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-magnetic-panels .top-banner {background: url(../images/backgrounds/tban-products-walls-magnetic-panels-v1.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-3d-felt .top-banner {background: url(../images/backgrounds/tban-products-3d-felt.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-room-dividers .top-banner {background: url(../images/backgrounds/tban-products-room-dividers.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-acoustic-luminaires .top-banner {background: url(../images/backgrounds/tban-products-acoustic-luminaires.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-acoustic-soft-surfaces .top-banner {background: url(../images/backgrounds/tban-products-soft-surfaces.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-mirror-panels .top-banner {background: url(../images/backgrounds/tban-products-ceilings-mirror-panels.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-membranes .top-banner {background: url(../images/backgrounds/tban-products-membranes.jpeg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-acoustic-solid-panels .top-banner {background: url(../images/statera/acoustic-solid-panels/tban-acoustic-solid-panels.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-acoustic-wood-slat-panels .top-banner {background: url(../images/statera/acoustic-wood-slat-panels/tban-acoustic-wood-slat-panels.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-ceilings-perforated-metal .top-banner {background: url(../images/perforated-metal/ceilings/tban-perforated-metal-ceilings.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-perforated-metal .top-banner {background: url(../images/perforated-metal/walls/tban-perforated-metal-walls.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}
.page-products-walls-architectual-textiles .top-banner {background: url(../images/architectural-textiles/walls/tban-architectural-textiles-walls.jpg) no-repeat center center; background-size: cover; width:100%; height: 100vh;}

.page-dark {background: url(../images/bg-dark.jpg) no-repeat center center; background-size: cover; width:100%; height: 100%;}

/* Page Active */

.page-about .but-about {font-weight: bold;}
.page-inspiration .but-projects {font-weight: bold;}
.page-resources .but-resources {font-weight: bold;}
.page-contact .but-contact {font-weight: bold;}

.page-team .but-team {font-weight: bold;}  
.page-products .but-products {font-weight: bold;}  
.page-ideas .but-ideas {font-weight: bold;}

.page-products-ceilings-colors .but-ceilings-colors {font-weight: bold;}
.page-products-ceilings-patterns .but-ceilings-patterns {font-weight: bold;}
.page-products-ceilings-graphics .but-ceilings-graphics {font-weight: bold;}
.page-products-ceilings-3dforms .but-ceilings-3dforms {font-weight: bold;}
.page-products-ceilings-acoustics .but-ceilings-acoustics {font-weight: bold;}
.page-products-ceilings-illumination .but-ceilings-illumination {font-weight: bold;}

.page-products-walls-colors .but-walls-colors {font-weight: bold;}
.page-products-walls-patterns .but-walls-patterns {font-weight: bold;}
.page-products-walls-graphics .but-walls-graphics {font-weight: bold;}
.page-products-walls-3dforms .but-walls-3dforms {font-weight: bold;}
.page-products-walls-acoustics .but-walls-acoustics {font-weight: bold;}
.page-products-walls-backlighting .but-walls-backlighting {font-weight: bold;}
.page-products-walls-textures .but-walls-textures {font-weight: bold;}

.page-products-specialty-anti-microbial .but-anti-microbial {font-weight: bold;}
.page-products-specialty-natatoriums .but-natatoriums {font-weight: bold;}
.page-products-acoustics-performance .but-performance {font-weight: bold;}

.page-products-lighting-sup-lighting .but-lighting-sup-lighting {font-weight: bold;}

/* Header & Menu */
header {position: fixed; width: 100%; z-index: 3;}
nav {display: flex; background: transparent; padding: 13px 0px; align-items: center; position: relative; z-index: 3;}

.logo {width: 175px; height: 52px; margin-top: 0px; margin-left: 50px; position: relative; z-index: 4; background: url(../images/logo-velaria-white-1.svg) no-repeat; background-size: contain;}
.logo img {width:100%;}
.logo a {display: block; height: 100%;}

.social-logos {display: flex; margin-right: 25px; margin-left: 0; padding-top: 8px;}
.social-logos img {width: 22px;}
.social-logos div {margin: 0px 0px;}

.filter-white{filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(321deg) brightness(106%) contrast(101%);}

/* menu with multi-level dropdown */

#velaria-menu {display:flex; flex-grow: 1; justify-content: flex-end; align-items: center;}

.nav-dark .filter-white {filter: invert(0%) sepia(6%) saturate(7476%) hue-rotate(345deg) brightness(103%) contrast(106%);}
.nav-dark .logo {width: 175px; height: 52px; margin-top: 0px; margin-left: 50px; position: relative; z-index: 100; background: url(../images/logo-velaria-black-1.svg) no-repeat; background-size: contain;}

/* menu on scroll down */

.nav-grey {background-color: #f5f5f5;}
.nav-grey .filter-white {filter: invert(0%) sepia(6%) saturate(7476%) hue-rotate(345deg) brightness(103%) contrast(106%);}
.nav-grey .logo {width: 175px; height: 52px; margin-top: 0px; margin-left: 50px; position: relative; z-index: 100; background: url(../images/logo-velaria-black-1.svg) no-repeat; background-size: contain;}

/* font styles & buttons */

h1 {font-weight: 300; color: #fff; font-size: 38px;}
h2 {font-weight: 300; font-size: 24px; line-height: 40px; color: #545454;}
h3 {font-weight: 300; font-size: 24px; color: #515151; line-height: 32px;}
h4 {font-weight: 300; font-size: 36px; color: #515151; line-height: 40px;}
h5 {font-weight: 500; font-size: 22px; color: #515151; line-height: 40px;}


/*.banner-image-h2 h2 {font-size: 24px;}*/
.bold700-txt {
	color: #444;    
    font-size: 20px;    
    font-weight: 700;    
}

p,li {font-weight: 300; font-size: 20px; color: #515151; line-height: 32px;}
a {font-weight: 300; font-size: 20px; color: #515151; line-height: 32px; text-decoration: none;}
a.blue {color: #0b5090; font-weight: bold;}
a.blue:hover {text-decoration: underline;}
a:hover {font-weight: bold;}
.stellarnav a {font-weight: normal;}

.blue {color: #0b5090; font-weight: bold;}
sup {vertical-align: super; font-size: 0.5em;}

.resources-sub-category-header {margin-left: 20px;}
.resources-sub-category-header h5 {margin: 5px 0 15px 0; font-weight: 500;}
.resources a {display: block;}
/*.resources-links a {background: #f1f1f1; display: block; padding: 8px 15px;}  */
.resources-links p {margin: 0; line-height: 24px;}
.resources-links a {background: #f1f1f1; display: block; padding: 10px 20px;}  
.resources-links a:hover {background: #d9d9d9;}

.resources-flex-row {display: flex; flex-wrap: wrap;}
.resources-col {width: 100%; margin-right: 0%; margin-bottom: 10px;}
.resources-flex-button-div {display: flex; align-items: center;}
.resources-button-col-1 {flex-grow: 1;}
.resources-button-col-1 p {font-weight: 400;}
.resources-button-col-2 {background: #145ba1; padding: 10px;}
.resources-file-text {color: #fff; font-size: 16px;}

.txt-white a,
.txt-white p,
.txt-white li,
.txt-white h3,
.txt-white h2 {color: #fff;}

.txt-white {color: #fff;}

.txt-black a,
.txt-black p,
.txt-black li,
.txt-black h2 {color: #000;}

.button-bar {display: flex; align-items: center; padding: 5px 10px; cursor: pointer;}

.button-bar-color-blue {background: #145ba1; color: #fff; font-family: 'Roboto', sans-serif;
	
}
.button-bar-color-light-blue {background: #e0e5ee; color: #000;}
.button-bar-col-left {flex-grow: 1;}

.button-black {background: #3a3a3a; border: 0; color: #fff; padding: 10px 20px; font-size: 15px;}
.button-blue {background: #0b5090; border: 0; color: #fff; padding: 10px 20px; font-size: 15px;}
.button-grey-outline {border: 2px solid #a3a2a3; color: #515151; padding: 2px 10px; font-size: 15px; border-radius: 4px; margin-top: 5px; display: inline-block; text-align: center;}

/* "blue-select" sınıfına stil ekliyoruz */
.blue-select {
    width: 100%; /* Genişliği %100 yapar */
	line-height: 2.2em;
    padding-right: 20px; /* Sağ taraf için iç boşluk */
    box-sizing: border-box; /* Padding genişliği taşırmaz */
    background-position: calc(100% - 10px) center; /* Aşağı ok simgesini ayarlar */
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8"%3E%3Cpath fill="white" d="M0 0l6 8 6-8z"/%3E%3C/svg%3E'); /* Aşağı ok simgesi */
    appearance: none; /* Varsayılan tarayıcı stilini kaldırır */
    -moz-appearance: none;
    -webkit-appearance: none;
	outline: none;
}
.blue-select.alert {
    animation: blink-border 1s infinite;
	outline: 2px dashed #82a6c6;

	outline-offset: 2px;
}
@keyframes blink-border {
    0% {
        outline-color: transparent;
    }
    50% {
        outline-color: #82a6c6;
    }
    100% {
        outline-color: transparent;
    }
}

/* Select'in çevresiyle uyum için stil */
.blue-select:focus {
    /* outline: 2px solid #007BFF;
    outline-offset: 2px; */
}
.blue-select:disabled {
	background: #CEDBE8;
	opacity: 1;
}


.panel-flex {display: flex; align-items: center;}
.panel-img {}
.panel-img img {width: 100%; display: block;}
.panel-flex-box-1 {padding: 50px; width: 50%;}
.panel ul {margin: 0; padding: 0;}
.panel li {margin: 0; padding: 0; font-weight: 300; font-size: 20px; color: #515151; line-height: 28px;}

/* Accordian Dropdown */

.panel-row {padding: 0px;}
.panel-col-a {float: left; width: 50%;}
.panel-col-b {float: left; width: 45%; padding: 0 5%; margin-top: 50px;}
.panel-clear {clear: both;}

/* rows */

.center {text-align: center;}

.master-row {max-width: 1550px; margin: 0 auto;}

.type-a {margin-left: 46%; padding-right: 5%; margin-top: 75px; margin-bottom: 75px; display: flex; justify-content: flex-start;}
.type-a-nogeo {margin-left: 46%; padding-right: 5%; padding-top: 25px; padding-bottom: 25px;}
.type-a-nohero {margin-left: 46%; padding-right: 5%; padding-top: 200px; margin-bottom: 75px; display: flex; justify-content: flex-start;}

/* type b flex row*/
.type-b {display: flex; flex-wrap: wrap; }

/* type c padding left right for text content */
.type-c {padding-left: 6%; padding-right: 6%; margin-top: 50px; margin-bottom: 50px;}
.type-c-nomargin-tb {padding-left: 6%; padding-right: 6%;}
.type-d {width: 100%;}

.type-inspiration-slider {position: relative; /*height: 65vh;*/ margin-bottom: 50px;}

.geo-shape {margin-right: 20px;}
.shape-home {}

 .padding-tb-bg-img {padding-top: 125px; padding-bottom: 125px;}
.padding-tb-bg-50 {padding-top: 50px; padding-bottom: 50px;}
.padding-tb-bg-75 {padding-top: 75px; padding-bottom: 75px;}

 .section-margin-tb {margin-top: 75px; margin-bottom: 75px;}
 .section-padding-tb {padding-top: 75px; padding-bottom: 75px;}
 .section-padding-tb25 {padding-top: 25px; padding-bottom: 25px;}
 .section-padding-tb50 {padding-top: 50px; padding-bottom: 50px;}
 .row-margin-tb {margin-top: 75px; margin-bottom: 75px;}

 .padding-special-lr {padding-left: 6%; padding-right: 6%;}

 .flex-vertical-center {display: flex; align-items: center;}
 .flex-vertical-top {display: flex; align-items: flex-start;}
 .box-text-padding-lr {padding-left: 25px; padding-right: 25px;}
  
.box-20 {width: 20%;}
.box-25 {width: 25%;}
.box-33 {width: 33.333333%;}
.box-50 {width: 50%;}
.box-50-special {width: 48.67%; margin-left: 1.33%;}
.box-100 {width: 100%;} 

.box-65 {width: 65%;}
.box-35 {width: 35%;}

.box-fal-row {background-color: #eaeaea; justify-content: center; align-items: center; padding-left: 10%; padding-right: 10%;}
.box-fal-icon {}
.box-fal-plus {margin: 0 30px;}
.box-fal-plus p {font-size: 40px;}

.crosssec-box {padding: 0 0px; text-align: center;}
.crosssec-box img {max-width:592px; width:100%;}

.img-stretch-membrane-text img {width: 100%; max-width: 594px;}
.img-velarium-diagram img {width: 100%; max-width: 543px;}


/* spacing around thumbnails */
.box-spacing-inspiration .box-25 {margin: 0 1% 45px 1%; width: 23%;}
.box-spacing-inspiration .box-50 {margin: 0 1% 45px 1%; width: 48%;}

.box-spacing .box-20 {margin-bottom: 25px;}
.box-spacing .box-20:nth-child(4n-4) {width: 18%; margin-right: 1%;} 
.box-spacing .box-20:nth-child(4n-3) {width: 18%; margin-right: 1%; margin-left: 1%;} 
.box-spacing .box-20:nth-child(4n-2) {width: 18%; margin-right: 1%; margin-left: 1%;} 
.box-spacing .box-20:nth-child(4n-1) {width: 18%; margin-right: 1%; margin-left: 1%;} 
.box-spacing .box-20:nth-child(4n+0) {width: 18%; margin-right: 0%; margin-left: 1%;} 

.box-spacing .box-25 {margin-bottom: 25px;}
.box-spacing .box-25:nth-child(4n-3) {width: 23%; margin-right: 1.33%;} 
.box-spacing .box-25:nth-child(4n-2) {width: 23%; margin-right: 1.33%; margin-left: 1.33%;} 
.box-spacing .box-25:nth-child(4n-1) {width: 23%; margin-right: 1.33%; margin-left: 1.33%;} 
.box-spacing .box-25:nth-child(4n+0) {width: 23%; margin-right: 0%; margin-left: 1.33%;} 

.box-spacing .box-50 {margin-bottom: 25px;}
.box-spacing .box-50:nth-child(2n-1) {width: 46%; margin-right: 2.66%;} 
.box-spacing .box-50:nth-child(2n-0) {width: 46%; margin-right: 2.66%; margin-left: 2.66%;} 

.special-box50-div {margin-left: 2.67%; width:47.33%;}

.box-spacing .box-33 {margin-bottom: 25px;}
.box-spacing .box-33:nth-child(3n-2) {width: 31.56%; margin-right: 1.33%;} 
.box-spacing .box-33:nth-child(3n-1) {width: 31.56%; margin-right: 1.33%; margin-left: 1.33%;} 
.box-spacing .box-33:nth-child(3n-0) {width: 31.56%; margin-left: 1.33%;}

.row-with-col {display: flex; flex-wrap: wrap;}
.col-25 {width: 25%;}
.col-33 {width: 33%;}
.col-50 {width: 48%;}
.col-padding-right {padding-right: 2%;}

 /** above **/

.row-100 {width: 100%;}
.row-max-width {max-width: 1550px; margin: 0 auto;}

.row-2-col {display: flex;}

.col-50-center {width: 50%; text-align: center;}
.col-100-center {width: 100%; text-align: center;}

.middle-line {border-right: 3px dashed #7a7a7a;}

.row-3-col {display: flex;}
.col-3-1 {width: 31.3333333%; text-align: center; margin: 0 1%;}

.row-4-col {display: flex; flex-wrap: wrap;}
.col-4-1 {width: 22%; margin: 0 0 50px 0;}

.row-5-col {display: flex; flex-wrap: wrap;}
.col-5-1 {width: 18%; margin: 0 1% 50px 1%;}


.row-2-col {display: flex; flex-wrap: wrap;}
.col-2-1 {width: 48%; margin: 0 1% 50px 1%;}

.inspiration-thumb img {width:100%;}
.inspiration-thumb-details {margin-top: 10px;}
.inspiration-thumb-details p {margin: 0; font-weight: 400;}

.inspiration-thumb-description {background: #f5f5f5; padding: 5px 15px 0px 0px; margin-top: 10px;}
.inspiration-thumb-description p {margin: 0; font-size: 19px; line-height: 24px;}

.inspiration-special-caption {margin: 0px 0; text-align: center;}
.inspiration-special-caption p {margin: 0; font-size: 14px;}

.category {color: #aaa;}


.container-contact-partner {margin-bottom: 75px;}
.box-contact-partner p {line-height: 25px;}
.partner-small-text {font-size: 16px; color: #145ba1; font-weight: bold;}

.container-contact-partner .box-33 {width: 30.3333333%; margin-right: 3%; border-bottom: 12px solid #ddd; padding-bottom: 50px; padding-top: 50px;}

.container-contact-partner .box-33 {
    width: 30.3333333%;
    margin-right: 3%;
    border-bottom: 0px solid #ececec;
    padding-bottom: 50px;
    padding-top: 0px;
    background: #f6f5f6;
    margin-bottom: 25px;
    padding: 10px;
}

@media screen and (max-width: 600px) {
.container-contact-partner .box-33 {
    width: 97%;
    margin-right: 3%;
    border-bottom: 0px solid #ddd;
    padding-bottom: 0px;
    padding-top: 0px;
}
}

.contact-rep-col-a {width: 28%; margin-right: 2%;}
.contact-rep-col-b {width: 70%;}

.contact-rep-box {background: #f6f5f6; display: flex; padding: 10px 35px; margin-bottom: 15px; flex-wrap: wrap;}
.contact-rep-box-left {width: 65%;}
.contact-rep-box-right {width: 35%;}

@media screen and (max-width: 1000px) {
.contact-rep-box-left {width: 100%;}
.contact-rep-box-right {width: 100%;}
  }

.rep-dropdown-content-box {background: #f6f5f6;}
.rep-dropdown-content-box ul {list-style-type: none; margin: 0; padding: 0;} 
.rep-dropdown-content-box li {font-size: 18px; font-weight: 400; padding: 10px; margin: 0;}
.rep-dropdown-content-box li:hover {background: #fafafa; text-decoration: underline;}

#country-dropdown, #state-dropdown, #territory-dropdown {display: none;}
#state-dropdown {max-height: 500px; overflow-y: scroll;}

.col-right-align {margin-left: 46%; padding-right: 5%;}
.shape-icon-flex {display: flex; justify-content: flex-start;}

.padding-lr-screen-gutter {padding-left: 50px; padding-right: 50px;}

.padding-lr-text {padding-left: 150px; padding-right: 150px;}

.padding-tb-toprow-a {padding-top: 100px; padding-bottom: 25px;}


.padding-tb-text {padding-top: 75px; padding-bottom: 75px;}
.padding-tb-text-a {padding-top: 25px; padding-bottom: 25px;}

.margin-tb {margin-top: 50px; margin-bottom: 50px;}

.no-padding-lr {padding-left: 0px; padding-right: 0px;}

.about-text-icon-right {display: flex; justify-content: flex-end; align-items: center; padding-right: 5%; padding-top: 25px; padding-bottom: 25px;}
.about-text-icon-left {display: flex; justify-content: flex-start; align-items: center; padding-left: 5%; padding-top: 25px; padding-bottom: 25px;}

.about-text-icon-right img {vertical-align: middle;}

.about-text-icon-maxwidth {max-width: 410px; margin-right: 20px;}
.about-text-icon-maxwidth h3 {margin: 0;}

.blue-box-row {display: inline-block; border: 0px solid red;}
.blue-box {background: #0b5090; display: inline; padding: 10px;}

.bg-grey {background: #f5f5f5;}
.bg-mid-grey {background: #e9eaeb;}
.bg-dark-grey {background: #292825;}
.bg-dark-grey h3 {color: #fff;}

/* table styles */

table {width: 90%; margin: 0 auto;}    
.tcol-1 {max-width: 144px; width: 14%;}
.tcol-2 {max-width: 365px; width: 34%;}
.tcol-3 {max-width: 120px; width: 11%;}
.tcol-4 {max-width: 130px; width: 12%;}
.tcol-5 {max-width: 150px; width: 14%;}
.tcol-6 {max-width: 155px; width: 15%;}

.tcol-a {padding-top: 20px; padding-bottom: 20px;}


table p {font-size: 18px; text-align: left; line-height: 24px; color: #000;}
.td-p-center p {text-align: center;}

.bg-table-top-row p {color: #000; font-weight: 400;}

.bg-table-grey {background: #737272;}
.bg-table-grey p {color:#fff;}

.table-design-3cols {width:100%;}
.table-design-3cols td {padding: 0px 15px;}
/*.table-design-3cols td:nth-child(2) {width: 65%;}*/

.table-design-3cols td {border-right: 3px solid #c7c7c7;}
.table-design-3cols td:last-child {border-right: 0px solid #c7c7c7;}           



/*
.table-design-3cols td:nth-child(-n+2) {
    border-right: 2px solid #c7c7c7;       
}*/

.text-align-center {text-align: center;}

.tcol-2-a {width: 30%; padding: 10px 15px;}
.tcol-2-b {width: 70%; padding: 10px 15px;}

/* table graph content */

.tgc-container {padding: 50px; text-align: center;}
.tgc-row-crosssection {margin-top: 35px;}
.tgc-row-table {margin-top: 25px;}
.tgc-row-graph {width: 100%; background: #f8f8f8; padding: 50px 30px; margin: 25px auto 0px auto;}
.tgc-row-graph img {max-width: 716px; width: 100%;}

.tgc-col-500px-max {max-width: 500px; min-width: 400px; margin: 75px auto;}


/* Additional Options Row */
.row-options {display: flex;}
.col-options {max-width: 370px; margin-right: 6%; margin-bottom: 20px;}
.row-options-button {margin-top: 15px;}
.row-options h3 {margin: 20px 0 10px 0;}
.row-options p {margin: 0;}

.options-img img {width: 100%;}
.options-content {padding-right: 20%;}

/*.col-a {flex-grow: 1; position: relative; border:1px solid yellow;}
.col-b {}*/


.row {width: 100%; text-align: center;}

.img-block {display: block;}

.ideas-row-img-txt {padding-top: 50px; padding-bottom: 50px;}


/* Footer */

.footer-row-a {display: flex; padding: 50px;}
.footer-row-a .footer-col-a {margin-right: 100px;}
.footer-row-a .footer-col-b {flex-grow: 1;}
.footer-row-a .footer-col-c {text-align: right; display: flex;}

.footer-col-a img {width: 140px;}

.footer-margin {margin-top: 135px;}

footer {background: #f5f5f5;}
footer input[type=text] {border: 0; height: 35px; width: 300px;}
footer p {font-size:17px; line-height: 25px; font-weight: 400; margin: 0; padding: 0;}

.footer-row-b {margin-top: 25px; padding-bottom: 75px; padding-left: 25px; padding-right: 25px;}
.footer-row-b p {color: #949494; font-size: 15px;}

.footer-row-material-bank {text-align: left; margin-right: 15px; padding-right: 15px; padding-top: 5px;}
.footer-row-material-bank img {width: 100%; max-width: 125px;}
.footer-row-material-bank a {font-size: 17px; font-weight: 400;}



.footer-row-signup-button {margin-top: 10px;}

/* Color Options */

.row-color {height: 80vh; max-height: 900px;}
.row-color .col-a {width: 74%; margin-right: 1%;}
.row-color .col-b {width: 25%;}

.row-color .col-a1 {width: 64%; margin-right: 1%;}
.row-color .col-b1 {width: 35%;}


/*
.color-code-fire-class {text-align: center; padding: 3px 50px; display: flex; align-items: center; justify-content: center; background: #2f3030; position: absolute; bottom: 0; width: 100%;}
.color-code-fire-class p {color: #fff;}
*/

.color-code-fire-class-v2 {padding: 0px 0px; width: 100%; margin-bottom: 30px; margin-top: 12px;}
.color-code-fire-class-v2 p {color: #000; font-size: 18px; line-height: 24px; margin: 0;}
p.small-text {font-size: 16px; margin: 0;}


.color-code-title {}
.color-code-row {display: flex; align-items: center; justify-content: flex-start;}
.fireclass-title {margin-top: 12px;}
.fireclass-row {}

.color-circle {margin-left: 15px; width: 30px; height: 30px; border-radius: 15px; display: inline-block;}

#color-code,
#color-code-satin,
#color-code-matte
{font-weight: bold;}

.color-options {display:flex; margin: 0 auto; flex-wrap: wrap;}
.color-options-box {width: 25%; height: 2.75vh;}

.color-options-box img {object-fit: cover; height: 50px;}

.with-larger-height .color-options-box {height: auto; max-width: 100px;}

.color-5059 {background: #fdfccd;}
.color-b {background: green;}
.color-c {background: blue;}

.color-options-box {transition: width 2s;}
.color-options-box:hover {transform: scale(1.15);}
.color-active {transform: scale(1.15);}

.color-bg {background: #88cbe4;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
transition: background 0.25s linear;
}

.color-bg-satin {background: #e3dfdc;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
transition: background 0.25s linear;
}

.color-bg-matte {background: #eaeaea;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
transition: background 0.25s linear;
}

.color-bg-metallic {background: #eaeaea;
-webkit-transition: background 0.25s linear;
-moz-transition: background 0.25s linear;
-ms-transition: background 0.25s linear;
-o-transition: background 0.25s linear;
transition: background 0.25s linear;
}

.color-bg-img {object-fit: cover; height: 80vh; display: block; max-height: 900px;}


/* Biopruf Colors */
.color-m-4044b-polar-biopruf {background: #fff; border:1px solid #ddd;}
.color-t-5240b-cristal-moon-biopruf {background: #f9e9cd;}

.color-t-5077-cristal-white {background: #fff; border:1px solid #ddd;}

/* glossy colors*/
.color-l-5059-alabaster {background: #fdfccd;}
.color-l-5063-opal {background: #fafa9c;}
.color-l-5024-lemon {background: #fcf961;}
.color-l-5022-pirythe {background: #fbd770;}
.color-l-5049-fluorite {background: #fedb37;}
.color-l-5021-amber {background: #fda03f;}
.color-l-5020-sphalerite {background: #fc5a12;}
.color-l-5014-cinnabar {background: #ec2f11;}
.color-l-5062-calcite {background: #fbdee3;}
.color-l-5016-rodonite {background: #fbb3d9;}
.color-l-5018-aragonite {background: #f39d9a;}
.color-l-5015-amethyst {background: #d9447d;}
.color-l-5017-moonrock {background: #d2715d;}
.color-l-5013-rubis {background: #951b1a;}
.color-l-5012-kernole {background: #6a1005;}
.color-l-5011-bordeaux {background: #3d0303;}
.color-l-5039-porphire {background: #5c4634;}
.color-l-5041-vanadynite {background: #3d2b10;}
.color-l-5089-uranofan {background: #342a1c;}
.color-l-5040-magnetite {background: #342a1c;}

.color-l-5054-ivory {background: #fbfde1;}
.color-l-5057-wulfenit {background: #fdeed3;}
.color-l-5058-anhydrite {background: #f4e8d7;}
.color-l-5090-sand {background: #b6ac9d;}
.color-l-5019-orthoclase {background: #feebc9;}
.color-l-5056-desert-dune {background: #eed19f;}
.color-l-5055-barit {background: #d5caa3;}
.color-l-5053-analezyt {background: #e6c6a1;}
.color-l-5091-andaluzyte {background: #a77645;}
.color-l-5078-bizmot {background: #b4e4fe;}
.color-l-5033-blue-diamond {background: #88cbe4;}
.color-l-5031-turquoise {background: #227c90;}
.color-l-5036-malachite {background: #025a74;}
.color-l-5025-cairo-night {background: #00063b;}
.color-l-5070-cyanite {background: #cef7ff;}
.color-l-5097-cramen {background: #afcea8;}
.color-l-5050-olivine {background: #abdd73;}
.color-l-5038-tourmaline {background: #64cb3c;}
.color-l-5048-vivanite {background: #219749;}
.color-l-5035-chalcosite {background: #002e28;}

.color-l-5565-laque-white {background: #ffffff;}
.color-l-5095-snow-pearl {background: #f9f3f4;}
.color-l-5065-pearl {background: #fbfce7;}
.color-l-5080-quartz {background: #dee2dd;}
.color-l-5064-katapleit {background: #f3fefb;}
.color-l-5061-agate {background: #ccd9e2;}
.color-l-5085-dyskrazyt {background: #bfc7c7;}
.color-l-5047-augitee58 {background: #8b9193;}
.color-l-5083-arsen {background: #808898;}
.color-l-5042-onyx {background: #4d5f6f;}
.color-l-5060-celestyne {background: #cadafd;}
.color-l-5043-erythrine {background: #a272a7;}
.color-l-5044-violetta {background: #171a72;}
.color-l-5052-galenit {background: #a6ccfd;}
.color-l-5075-landsbergit {background: #61a7fc;}
.color-l-5029-lirakonit {background: #4a93f7;}
.color-l-5030-apatite {background: #4476d6;}
.color-l-5028-safir {background: #1270f7;}
.color-l-5046-ksenot {background: #0b41c7;}
.color-l-5045-aquamarine {background: #012597;}
.color-l-5023-korund {background: #011873;}

/* satin colors*/

.color-s-8005-lilywhite {background: #fefefe;}
.color-s-8003-iris-snow {background: #fcf8ef;}
.color-s-8002-iris {background: #fff3f4;}
.color-s-8021-narcissus {background: #fffbcd;}
.color-s-8020-jonquil {background: #fcedd0;}
.color-s-8015-oleander {background: #e9e4d4;}
.color-s-8010-aster {background: #e9e5de;}
.color-s-8011-rose {background: #fcd7bc;}
.color-s-8027-cyprys {background: #ffd6dc;}
.color-s-8025-magnolia {background: #e6d5d3;}
.color-s-8004-pea {background: #f5fee7;}
.color-s-8006-crocus {background: #cefbfd;}
.color-s-8018-green-tulip {background: #c7eafc;}
.color-s-8026-azalea {background: #fcc894;}
.color-s-8008-petunia {background: #ffbe7d;}
.color-s-8024-begonia {background: #dd6451;}
.color-s-8030-chestnut {background: #4d392b;}
.color-s-8009-dalia {background: #515c64;}
.color-s-8000-black-tulip {background: #000000;}
.color-s-8019-black-rose {background: #111619;}
.color-s-8500-satine-white-xlarge {background: #ffffff;}
.color-s-8007-cyclamen {background: #d8edeb;}
.color-s-8001-mallow {background: #c7dfd9;}
.color-s-8017-daisy-grey {background: #d0d1cb;}
.color-s-8048-chaber {background: #b2d6f6;}
.color-s-8012-corn-flower {background: #84bbf9;}
.color-s-8014-ocean-flower {background: #265ccb;}
.color-s-8028-navy-flower {background: #253070;}
.color-s-8050-vasabi {background: #89a34d;}

/* matte colors */

.color-m-4500-mat-white-xlarge {background: #ffffff;}
.color-m-4004-pasque-flower {background: #ffffff;}
.color-m-4010-jasmine {background: #f8f2db;}
.color-m-4006-cherry-blossom {background: #f9f6e8;}
.color-m-4005-gerbera {background: #eadccc;}
.color-m-4000-black-lily {background: #111619;}
.color-m-4001-black-iris {background: #0b0e18;}
.color-m-4002-edelweiss {background: #d9d9d9;}
.color-m-4044b-polar-biopruf {background: #ffffff;}
.color-f-1010-super-mat {background: #fffdec;}
.color-m-4003-classic-white {background: #ffffff;}
.color-m-4012-black-knight {background: #111619;}

/* metallic finishes */

.color-c-6042-silver {background: #7f858d;}
.color-c-6065-gold {background: #927611;}
.color-c-6041-hematite {background: #131613;}

/* magnetic panel finishes */

.color-mpf-cb-rest-assured {background: #9bbfc9;}
.color-mpf-cb-bluebird-feather {background: #6e9db4;}
.color-mpf-cb-manitou-blue {background: #5993a2;}
.color-mpf-cb-inky-blue {background: #4d7386;}
.color-mpf-cb-smoky-azurite {background: #708d9a;}
.color-mpf-cb-loyal-blue {background: #01475d;}
.color-mpf-cb-blue-chip {background: #016ea7;}
.color-mpf-cb-in-the-navy {background: #263848;}
.color-mpf-cb-morning-fog {background: #016ea7;}
.color-mpf-cb-repose-gray {background: #cbcbbf;}
.color-mpf-cb-evening-shadow {background: #c9cbcd;}
.color-mpf-cb-imagine {background: #c2b7b8;}
.color-mpf-cb-perfect-greige {background: #b7ab9f;}
.color-mpf-cb-serious-gray {background: #7d858e;}
.color-mpf-cb-gibraltar {background: #616972;}
.color-mpf-cb-familiar-beige {background: #c7b4a4;}
.color-mpf-cb-sensational-sand {background: #c1a28c;}
.color-mpf-cb-tony-taupe {background: #b2a190;}
.color-mpf-cb-toasty {background: #957258;}
.color-mpf-cb-brainstorm-bronze {background: #756858;}
.color-mpf-cb-sable {background: #5f4b3f;}

.color-mpf-cb-rustic-white {background: #eddac3;}
.color-mpf-cb-white-flour {background: #f4efe5;}
.color-mpf-cb-classic-yellow {background: #eec487;}
.color-mpf-cb-daffodil {background: #fad97a;}
.color-mpf-cb-forsythia {background: #ffc800;}
.color-mpf-cb-honeycomb {background: #d59758;}
.color-mpf-cb-saffron-thread {background: #e09e4b;}

.color-mpf-cb-jalapeno {background: #b1533c;}
.color-mpf-cb-emberglow {background: #d67c58;}
.color-mpf-cb-ritas-rouge {background: #ba7376;}
.color-mpf-cb-stop {background: #c33a36;}
.color-mpf-cb-cool-avocado {background: #c4b47d;}
.color-mpf-cb-recycled-glass {background: #bcbfa0;}
.color-mpf-cb-rookwood-jade {background: #979f7f;}

.color-mpf-cb-rural-green {background: #8e824d;}
.color-mpf-cb-saguaro {background: #645f2c;}
.color-mpf-cb-kale-green {background: #506a55;}
.color-mpf-cb-peacock-plume {background: #739694;}
.color-mpf-cb-holiday-turquoise {background: #8ac6bd;}
.color-mpf-cb-blue-nile {background: #02707d;}
.color-mpf-cb-mature-grape {background: #624053;}

.color-mpf-cb-tricorn-black {background: #2e2e30;}


/* tooltip */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  line-height: 17px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* lightbox */

/* text-based popup styling */
.white-popup {
  position: relative;
  background: #f6f5f6;
  padding: 50px;
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 500px;
}

.popup-blue-bar {background: #03a8cc; width: 100%; height: 50px; margin-top: 25px;}
.popup-blue-bar-inside {background: #145ba1; width: 30%; height: 50px;}

/* 

====== Zoom effect ======

*/
.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 

/******* Ceilings Illumination Sampler **********/

.row-illumination {display: flex;}
.row-illumination p,.row-illumination td {color: #fff;}

.slider-img-controls {min-width: 300px; background: #3d3d3d; padding: 30px;}
.slider-img-controls button {font-size: 19px;}

.slider-img-box img {object-fit: cover; height: 743px; display: block;}

#slider
{
width: 2px;
height: 180px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.5em;
    height: 0.5em !important;
    cursor: pointer;
    -ms-touch-action: none;
    touch-action: none;
    background: #fff;
    text-shadow: none;
    border: 0;
    border-radius: 0;
    margin-left: -10px;
}

.ui-slider-vertical {
    width: 5px !important;
    height: 100px;
    background: #fff;
}

.img-5700k,
.img-4000k,
.img-3500k,
.img-3000k,
.img-2700k
{display: none;}

.slider-img-flex {display: flex; align-items: center;}

.slider-img-col-a {}
.slider-img-col-a img {width: 100%; max-width: 59px;}

.slider-img-col-b {padding-top: 175px;}
.slider-img-but4000k {padding-top: 45px;}

.slider-img-td-a {width:100px; vertical-align: top;}
.slider-img-td-b {width:100px;}



.ceilings-illumination-sampler .slider-img-box
{
background: url(../images/product/ceilings/illumination/ceiling-warm-2700k.jpg) no-repeat center center; background-size: cover;
background-color: #ff0000;
margin-left: 0px;
object-fit: cover; height: 743px;
flex-grow: 1;
position: relative;             
}

.walls-backlighting-sampler .slider-img-box
{
background: url(../images/product/walls/backlighting/backlights-warm-2700k-1.jpg) no-repeat center center; background-size: cover;
background-color: #ff0000;
margin-left: 0px;
object-fit: cover; height: 743px;
flex-grow: 1;    
position: relative;         
}

.temp-box {position: absolute; top: 20px; right: 20px;}

/* Accordion */

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 30px 30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  font-weight: 700;
  font-family: 'Roboto';
}

.accordian-style-outline {
	background-color: transparent;
	border: 2px solid #646464;
	margin-bottom: 15px;	

}

.accordion-nobutton {
/*background-color: #eee;*/
  color: #444;
  /*cursor: pointer;*/
  padding: 30px 30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  font-weight: 700;
  font-family: 'Roboto';	
}

.accordion:hover {
  background-color: #ccc;
}

.accordion.active {background-color: #595959; color: #fff;}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "\2212";
}

.panel {
  padding: 0px 0px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom: 15px;
}

.bg-transparent {background: transparent;}

/* Inspiration Filter */

.filterDiv {
  display: none;
}

.show {
  display: block;
}

.btn {cursor: pointer;}

.btn.active {
  background-color: red;
  color: white;
}

.dropbtn {
  background-color: #232323;
  color: white;
  padding: 16px;
  font-size: 18px;
  border: none;
  min-width: 10rem;
  text-align: left;
}

.dropbtn .expand {
  float: right;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;  
  min-width: 350px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background-color: #232323;
}

.dropdown-content a {
  color: black;
  padding: 8px 12px;
  font-size: 18px;
  text-decoration: none;
  display: block;
  color: #fff;
}

.dropdown-content a:hover {background-color: #ddd; color: #000;}

/*.dropdown:hover .dropdown-content {display: block;}*/

.dropdown:hover .dropbtn {background-color: #145ba1;}

/* Video Container 100% Width */

.container-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.scrollbox {
  overflow: auto;
  /*max-width: 400px;
  max-height: 200px;
  margin: 50px auto;*/
 background:
    /* Shadow covers */
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    
    /* Shadows */
    radial-gradient(farthest-side at 0 50%, rgba(150,150,150,0.9), rgba(150,150,150,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(150,150,150,0.9), rgba(150,150,150,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.scrollbox ul {
  max-width: 200%;
}
.scrollbox li {
  background-color: red;
  display: table-cell;
  padding: 1em;
  border: 1px solid #bebebe;
}