@charset "utf-8";
/* CSS Document */

:root {
 --beige:#E0DEC3;
 --sub-black:#262523;
}

*,*:focus,*:hover{
    outline:none;
}

html {
	scroll-behavior:smooth;
}

.gallery .footer {margin-top:0;}
body {
    margin: 0;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-size: 15px;
    color:var(--sub-black);
    font-weight: 300;
	padding-top: 128px;
	
	/* padding-bottom:150px; */
}

.serving {
background-color: var(--sub-black);
    color: #fff;
    width: 100%;
    text-align: center;
    font-family: "Lora", "Georgia", serif;
    text-transform: uppercase;
    top: 116px;
    position: absolute;
    font-size: 14px;
    font-weight: 100;
    padding: 20px 60px 20px 60px;
    display: grid;
    align-content: center;
    letter-spacing: 1px;
}

h1, h2, h3 {
    font-family: "Lora", "Georgia", serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #262523;
}
h2 {
    font-size: 32px;
}
h4 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 21px;
    margin-bottom: 0;
}
p {
    line-height: 32px;
    font-size: 18px;
}
.regular {
    font-weight: 400 !important;
}
.light {
    font-weight: 300 !important;
}
.logo {
    justify-self: start;
}

.gallery-div {
	display:grid;
	height:100vh;
	width:100vw;
}
.diciocio {
	background-color:#2F376C;
}
.four-seasons {background-color:#537347;}

.sheetz {
	background-color: #6D393A;
}
.convention {background-color:aquamarine;}

.header {
  padding: 0;
  display: grid;
  width: 100%;
  justify-self: center;
  margin: 0;
}
.header {
    grid-template-columns:30% 64% 6%;
    align-content: center;
    position: fixed;
    background-color: #fff;
    padding: 0 3vw;
    width: 100%;
    z-index: 1000;
    background-image: url(/images/nav-back.jpg);
    background-repeat: repeat-x;
    background-position-y: 54px;
	display:grid;
	top:0;
	
}

.mobile-menu-item img {
	margin-bottom:20px;
}


.top-level-menu {
	
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: start;
	list-style-type: none;

}

.hline {
	border: 1px solid #eeeeee;
	width: 90vw;
	
	margin: 100px auto;
}

.color-swatch {
	width: 158px;
	height: 76px;
	background-color: #262523;
	background-position: top;
	font-family: "Roboto", "Helvetica", sans-serif;
	font-weight: 300;
	color: #fff;
	font-size: 14px;
	display: grid;
	grid-template-columns: 70% 30%;
	background-size: 100%;
	background-repeat: no-repeat;
	justify-self: start;
}
.swatch-back {
	height:50px;
}

.texture-swatch .swatch-back {
	height: 229px;
}

.metallic-container {
	grid-template-columns: 50% 50%;
width: 256px;
height: 92px;	
}

.texture-swatch {
	width: 256px;
height: 270px;
}
.metallic-container span {
	font-weight:500;
}

.antique-container {
	grid-template-columns:100%;
}

.metallic-container div:nth-child(3) {
	grid-column: 1/3;
}
.sunflower {
	background-image: url("https://www.tobiasgreenwallfinishes.com/images/Sunflower-8117 1.png");
}
.swatch-title {
	text-align: left;
	align-self: end;
	justify-self: start;
	padding: 5px;
}
.swatch-number {
	text-align: right;
	align-self: end;
	justify-self: end;
	padding: 5px;
}
.swatch-container {
	
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
	grid-gap: 10px;
	
	justify-content: center;
	grid-row-gap: 17px;
	margin: 0 auto;	
	}



.colors-intro {
width: 60%;
margin: 0 auto 50px auto;
padding: 0 10px;
color: #262523;
text-align: center;
}

.brochure {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	justify-content: center;
	justify-items: center;
	margin:0 auto;
	width:90vw;

}

.brochure p {
	text-align: center;
}

.brochure-pic {
	width:100%;

}

.brochure-pic img {
width:100%;
max-width:642px;}

.application-videos {
	
	width:90vw;
	margin:0 auto;
	grid-template-columns: 100%;
	grid-gap:10px;
}
.application-videos div {
	text-align: center;
	
	margin:50px auto;
}



/*-----------------------------------------------------------Texture Swatches*/

.abbruzzi {
	background-image:url("/images/swatches/textures/Abbruzzi.jpg");
}
.lucca {
	background-image:url("/images/swatches/textures/Lucca.jpg");
}
.milano {
	background-image:url("/images/swatches/textures/Milano.jpg");
}
.multi-varese {
	background-image:url("/images/swatches/textures/Multi-Varese.jpg");
}
.palermo {
	background-image:url("/images/swatches/textures/Palermo.jpg");
}
.ravenna {
	background-image:url("/images/swatches/textures/Ravina.jpg");
}
.roman {
	background-image:url("/images/swatches/textures/Roman.jpg");
}
.san-marino {
	background-image:url("/images/swatches/textures/San-Marino.jpg");
}
.travertino {
	background-image:url("/images/swatches/textures/Traventino.jpg");
}
.umbria {
	background-image:url("/images/swatches/textures/Umbria.jpg");
}
.umbria-smooth {
	background-image:url("/images/swatches/textures/Umbria-Smooth.jpg");
}
.varese {
	background-image:url("/images/swatches/textures/VareseWax.jpg");
}
.venetian {
	background-image:url("/images/swatches/textures/Venetian.jpg");
}
.veneto {
	background-image:url("/images/swatches/textures/Veneto.jpg");
}
.verona {
	background-image:url("/images/swatches/textures/Verona.jpg");
}
.venetiano {
	
	background-image:url("/images/swatches/textures/Venetiano.jpg");
}

/*-----------------------------------------------------------Antiquue Stains*/
.terra-cotta-antique {
	background-image:url("/images/swatches/terra-cotta-antique.jpg");
}.red-antique {
	background-image:url("/images/swatches/red-antique.jpg");
}.yellow-antique {
	background-image:url("/images/swatches/yellow-antique.jpg");
}.grey-antique {
	background-image:url("/images/swatches/grey-antique.jpg");
}.brown-antique {
	background-image:url("/images/swatches/brown-antique.jpg");
}


/*-----------------------------------------------------------Metalic Stains*/


.shimmer-gold-moka {
	background-image:url("/images/swatches/ShimmerGoldMoka.jpg");
}
.shimmer-gold-terra {
	background-image:url("/images/swatches/ShimmerGoldTerra.jpg");
}


.red-sea{
	background-image:url("/images/swatches/RedMetRedSea.jpg");
}
.red-sunflower {
	background-image:url("/images/swatches/RedMetSunflower.jpg");
}
.medici-cinnamon {
	background-image:url("/images/swatches/MediciGoldCinnamon.jpg");
}
.medici-roma {
	background-image:url("/images/swatches/MediciGoldRoma.jpg");
}
.bronze-sedona {
	background-image:url("/images/swatches/BronzeSedona.jpg");
}
.bronze-roma {
	background-image:url("/images/swatches/BronzeRoma2.jpg");
}

.copper-cinnamon {
	background-image:url("/images/swatches/CopperCinnamon.jpg");
}

.copper-roma {
	background-image:url("/images/swatches/CopperRoma.jpg");
}
.silver-aubergine {
	background-image:url("/images/swatches/SilverAubergine.jpg");
}
.silver-dusk {
	background-image:url("/images/swatches/SilverDusk.jpg");
}
/*-----------------------------------------------------------Color Swatches*/

.sunflower {
	background-image: url("/images/swatches/Sunflower-8117.jpg");
}
.villa {
	background-image: url("/images/swatches/Villa-8110.jpg");
}
.darkVilla {
	background-image: url("/images/swatches/DarkVilla8221.jpg");
}
.saffron {
	background-image: url("/images/swatches/Saffron-8109.jpg");
}
.straw {
	background-image: url("/images/swatches/Straw-8108.jpg");
}
.honey {
	background-image: url("/images/swatches/Honey8219-Umbria.jpg");
}
.pumpkin {
	background-image: url("/images/swatches/Pumpkin-912.jpg");
}
.terra {
	background-image: url("/images/swatches/Terra-908.jpg");
}
.sedona {
	background-image: url("/images/swatches/Sedona8113.jpg");
}
.beach {
	background-image: url("/images/swatches/Beach-8106.jpg");
}
.fawn {
	background-image: url("/images/swatches/Fawn-8111.jpg");
}
.cinnamon {
	background-image: url("/images/swatches/Cinnamon_8212.jpg");
}
.fleece {
	background-image: url("/images/swatches/Fleece-8107.jpg");
}
.lightMoka {
	background-image: url("/images/swatches/Light-Moka-6410.jpg");
}
.moka {
	background-image: url("/images/swatches/Moka-6510.jpg");
}
.sierra {
	background-image: url("/images/swatches/Sierra_8209.jpg");
}
.dune {
	background-image: url("/images/swatches/Dune8220-Umbria.jpg");
}
.barePink {
	background-image: url("/images/swatches/BarePink8226.jpg");
}
.lucasPeach {
	background-image: url("/images/swatches/Lucas-Peach-903.jpg");
}
.buff {
	background-image: url("/images/swatches/Buff-8112.jpg");
}
.tuscanSunset {
	background-image: url("/images/swatches/Tuscan-Sunset-902.jpg");
}
.magenta {
	background-image: url("/images/swatches/Magenta-8120.jpg");
}
.redSea {
	background-image: url("/images/swatches/Red-Sea-8134.jpg");
}
.rouge {
	background-image: url("/images/swatches/Rouge_8215.jpg");
}
.paola {
	background-image: url("/images/swatches/Paola-904.jpg");
}
.pomegranate {
	background-image: url("/images/swatches/Pomegranate-8155.jpg");
}
.pompeii {
	background-image: url("/images/swatches/Pompeii-8125.jpg");
}
.alice {
	background-image: url("/images/swatches/Alice-905.jpg");
}
.fig {
	background-image: url("/images/swatches/Fig8225.jpg");
}
.dusk {
	background-image: url("/images/swatches/Dusk_8210.jpg");
}
.robinEgg {
	background-image: url("/images/swatches/Robin-Egg-8102.jpg");
}
.azul {
	background-image: url("/images/swatches/Azul-8130.jpg");
}
.sky {
	background-image: url("/images/swatches/Sky-8131.jpg");
}
.bareBlue {
	background-image: url("/images/swatches/BareBlue8227.jpg");
}
.turquoise {
	background-image: url("/images/swatches/Turquoise-8136.jpg");
}
.emerald {
	background-image: url("/images/swatches/Emerald8222-Umbria.jpg");
}
.putty {
	background-image: url("/images/swatches/Putty-906.jpg");
}
.mushroom {
	background-image: url("/images/swatches/MushroomPure8121P-Umbria.jpg");
}
.miso {
	background-image: url("/images/swatches/Miso-8122.jpg");
}
.apple {
	background-image: url("/images/swatches/Apple-8116.jpg");
}
.celadon {
	background-image: url("/images/swatches/Celadon-909.jpg");
}
.cilantro {
	background-image: url("/images/swatches/Cilantro_8208.jpg");
}
.camel {
	background-image: url("/images/swatches/CamelPure8205P-Umbria.jpg");
}
.aubergine {
	background-image: url("/images/swatches/Aubergine_916.jpg");
}
.chaparral {
	background-image: url("/images/swatches/Chaperral_8213.jpg");
}
.coffee {
	background-image: url("/images/swatches/Coffee-8114.jpg");
}
.roma {
	background-image: url("/images/swatches/Roma-907.jpg");
}
.slateGrey {
	background-image: url("/images/swatches/SlateGrey_8206.jpg");
}
.hedgeRose {
	background-image: url("/images/swatches/Hedge-Rose-8104.jpg");
}
.stoneGrey {
	background-image: url("/images/swatches/Stone-Gray-8135.jpg");
}
.limestone {
	background-image: url("/images/swatches/Lime-Stone-8103.jpg");
}
.beluga {
	background-image: url("/images/swatches/Beluga-8118.jpg");
}
.natural {
	background-image: url("/images/swatches/NaturalPure8105P-Umbria.jpg");
}
.dove {
	background-image: url("/images/swatches/DovePure8217-Umbria.jpg");
}
.sterling {
	background-image: url("/images/swatches/SterlingPure8207P-Umbria.jpg");
}
.vermont {
	background-image: url("/images/swatches/Vermont_8211.jpg");
}
.sbAqua {
	background-image: url("/images/swatches/Turquoise-8136.jpg");
}
.seafoam {
	background-image: url("/images/swatches/Seafoam_8214.jpg");
}
.silver {
	background-image: url("/images/swatches/Silver_8218.jpg");
}
.pewter {
	background-image: url("/images/swatches/Pewter_8216.jpg");
}

#hamburger {
color:#fff;
	align-self:center;
	justify-self:center;
	font-size:28px;
}
.swatch-title {
	text-align: left;
	align-self: end;
	justify-self: start;
	padding: 2px;
}
.swatch-number {
	text-align: right;
	align-self: end;
	justify-self: end;
	padding: 2px;
}
.internal-page h2 {

	margin:0 auto 100px auto;
	text-align: center;
	font-size:27px;
}

 h2.metallic-stains,  h2.color-h2 {
	margin-bottom:30px;
}

.brochure h2 {
	margin: 0px auto 40px auto;
text-align: center;

}
.internal-page h1 {
font-size: 40px;
text-align: center;
margin-top: 100px;
margin-bottom: 40px;
}
	.navigation {
    justify-self: end;
    -ms-align-self: center;
    align-self: center;
}

.navigation i {
	display:none;
}
	  
	.top-level-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 622px;
align-self: center;
background-color: #fff;
}

.top-level-menu li {
	    font-family: "Roboto", "Helvetica", sans-serif;
    text-transform: uppercase;
    list-style: none;
    margin: 0;
    text-align: left;
	justify-self: center;
align-content: center;
grid-gap: 1px;
background-color: #fff;
color: #262523;
font-size: 11px;
padding: 6px;
cursor: pointer;
font-weight: 600;
	
}

.top-level-menu li a {
	color: var(--sub-black);
text-decoration: none;
}
	  
	  .top-level-menu .fa {
		  margin-right:10px;
	  }

.mobile-logo ,.mobile-navigation {
	display:none;
}
.reader {
	text-align: center;
	grid-column: 1/3;
	margin-top:50px;
}

.product-information-container {display:grid; grid-gap:10px;}
.product-information-container ul {
	
	width:145px;
}

.product-information-container li {
	list-style-type: none;

	
}
.product-information-container li:before {
	content:url("/images/pdf-icon.png");
	top: 7px;
position: relative;
margin-right: 8px;
}
.product-information-container h2 {
	font-size:22px;
}

.accordion {
 width: 310px;
    margin: 0px auto;
	 background-color:var(--sub-black);
}
.accordion .ui-accordion-content {
  width: 100%;
   background-color:var(--sub-black);
  color: #fff;
  font-size: 10pt;
  line-height: 16pt;
}
.accordion .ui-accordion-content > * {
margin: 0;
    padding: 0 40px;
    background-color:var(--sub-black);
    margin-top: 20px;
}
.accordion .ui-accordion-header {
  background-color: #F4EFEC;
  margin: 0px;
	padding:10px;
}
.accordion .ui-accordion-header a {
  color: #fff;
  line-height: 42px;
  display: block;
  font-size: 12pt;
  width: 100%;
  text-indent: 10px;
}

.accordion h3 {
	font-family:"Roboto", sans-serif;
font-size: 16px;
font-weight: 500;
}
  .ui-icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
.ui-icon-triangle-1-s::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f102"; color:#000; margin-right:10px;}
.ui-icon-circle-arrow-e::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f103"; color:#000;margin-right:10px;}

.button {
  color:var(--sub-black);
	border:3px solid;
  border-color:var(--sub-black);
 padding:0;
  text-align: center;
  margin: 10px auto 0 auto;
  width: 80px;
  text-transform: uppercase;
  font-size: 12px;
  height: 33px;
  font-family: "roboto", sans-serif;
	display:grid;
	align-content: center;
	grid-template-columns:90% 10%;
	
}

.button:hover {
	background-color:var(--sub-black);
	color:#fff;
}

.button a {
display: grid;
width: 100%;
height: 27px;
text-decoration: none;
color: var(--sub-black);
align-content: center;
}

.button a:hover {
	color:#fff;
	background-color:var(--sub-black);
}

.button {
	margin-top: 20px;
margin-left: 45px;
width: 108px;
align-items: center;
padding-right: 17px;
font-weight: 600;
}


.faq {
	display:grid;
	width:90vw;
	grid-template-columns: 100%;
	margin: 0 auto 0 auto;
}

@media(max-width:864px) {
	
	body {
		padding-top:88px;
	}
	.serving {
		top:72px;
	}
	
	.logo {
		display:none;	
			}
	.mobile-logo {
		display:block;
		
		align-self:center;
		margin-top: 7px;
	}
	.close-menu {
	grid-column: 1/3;
color: #fff;
font-size: 30px;
	}
	
	.close-button {
		position: absolute;
top: 18px;
right: 20px;
	}
	
	.menu-logo {
		    position: absolute;
    top: 11px;
	}
.mobile-navigation {
   
    background-color: var(--sub-black);
    height: 100vh;
    top: 0;
    position: absolute;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    align-content: center;
    justify-content: center;
    grid-gap: 50px;
    opacity: .95;
	display:none;
	align-items: end;
}
	.mobile-logo img {
		max-width:100%;
	}
	
	.mobile-menu-item img {
		width:80px;
	}
	
	.mobile-menu-item {
		text-align:center;
		color:#fff;
	}
	
	.content {
	margin-top: 62px;
	}
	
	.navigation {
    display: grid;
    justify-self: center;
    width: 100%;
    grid-column: 2/3;
	}
	
	#hamburger {
		color:var(--sub-black);
		font-size:18px;
		margin:20px 0;
		font-size:28px;
	margin-top: 20px;
    margin-right: 20px;
		justify-self:end;
	}
	
	.navigation i {
		display:grid;
	}
	
	.top-level-menu {
		display:none;
	}
	
	
	
	.header {
    padding: 0;
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-shadow: 0px -1px 24px var( --sub-black );
    box-shadow: 0px -1px 24px var( --sub-black );
    height: 72px;
		top:0;
	}
}

  @media (max-width: 599px) {
	  
	  
	  .application-videos iframe {
    width: 300px;
    height: 169px;

	
}
	  
	  .swatch-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    width: 328px;
}
.internal-page h1 {
	width: 90%;
	text-align: center;
	margin: 40px auto 50px auto;
	
}
	  
	  .internal-page h2 {
		  font-size:30px;
		  width: 90%;
		  margin:0 auto 50px auto;
		  
	  }
	  	.colors-intro {
    width: 90%;
}
	  .pds, .sds, .as {
		  grid-column:1/3;
	  }
	 .metallic {
	grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
width: 265px;
}

	  .product-information-container {
		
		  grid-template-columns:100%;
		  display:grid;
		  margin:0 auto;
		  justify-items:center;
		  width:90vw;
	  }
	  
	  .product-information-container h1 {
	margin-bottom:20px;
}
	  .product-information-container ul {
	margin: 0 auto 43px auto;
	  }
	  .product-information-container h2 {
		  font-size:27px;
	  }
	  
	  .brochure-info h2 {
margin-top:50px;
	  }
	  
	  .button {
		  margin: 50px auto 0 auto;
	  }
	  
	
	  
}


  @media (min-width: 600px) { 
	  
	  .accordion {
		      width: 544px;
	  }
	  
	  .product-information-container {
		  grid-template-columns: 50% 50%;
	  }
	  
	  .product-information-container ul {
	width: 145px;
	padding-left: 10px;
		  margin:0 auto;
}
	  	  
	  .application-videos iframe {
    width: 560px;
    height: 315px;

	
}

	  
	  
	  
	  
	  .sds {
		  grid-column:1/2;
		 
		  
	  }
	  .pds {
		  grid-column:2/3;
		  
		  
	  }
	  
	  
	  
	  .as {
		  text-align:center;
		  grid-column:1/3;
	  }
	  
	 
	  .product-information-container h1 {
		  grid-column:1/3;
		  margin-bottom: 20px;
	  }
	  
	  .product-information-container h2 {
		  font-size:27px;
		  text-align:left;
		  margin-left:10px;
		  margin-bottom: 20px;
	  }
	   .as h2, .sds h2, .pds h2 {
		  text-align:center;
	  }
	  
	  .as h2 {
		  margin-top:60px;
	  }
	  
	  .reader {
		  grid-column:1/3;
	  }
	  .ap {
		  grid-column:1/3;
	  }
	  
	  .brochure-pic {
		  margin: 0 auto 50px auto;
		  text-align:center;
	  }

	  	  .swatch-container {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 328px;
}
	   .metallic {
	grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
width: 265px;
}
	  .button {
		      margin: 50px auto 0 auto;
	  }
}


  @media (min-width: 900px) {
	  
	  .application-videos iframe {
		  width: 810px;
    height: 454px;
	  }
	  
	  .button { margin: 50px auto 0 40px;}
	  
	  .accordion {
		  width:850px;
	  }
	    .application-videos {
		  grid-template-columns: repeat(2, 1fr);
		  grid-gap:calc(100vw / 100);
	  }
	  
	  .application-videos h2 {
		  grid-column:1/3;
		  margin-bottom:100px;
	  }

	  	  .swatch-container {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;

}
	  	   .metallic {
	grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 265px;
}
	  
	  .brochure {grid-template-columns: repeat(2,1fr);}
	  
	  .brochure h1 {
		  grid-column:1/3;
	  }
	  
	  .brochure h2 {
		  text-align:left;
		  margin-left:45px;
		  margin-bottom:20px;
	  }
	  
	  .brochure p {
		  text-align:left;
		  
		width: 80%;
margin: 0 auto;
max-width: 470px;
	  }
	  .brochure-info {align-self:center; }
	  
	  .brochure h1 {
		    margin-bottom: 100px;
    margin-top: 100px;
	  }
	  
	  .brochure-pic {margin:0;}
}


  @media (min-width: 1200px) { 
	  	  .swatch-container {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
 
}
	     .metallic {
	grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
width: 265px;
}
}

  @media (min-width: 1600px) { 
	  	  .swatch-container {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    
}
	       .metallic {
	grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
width: 265px;
}
}