html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#overall a { color: #000 !important; text-decoration: underline; }

/* The Masonry Container */
.masonry {
  margin: 1.5em auto;
  
  column-gap: 1.5em;
  column-rule: 1px solid #eee;
}

/* The Masonry Brick */
.item {
  background: #fff;
  padding: 3em 1.5em 1.5em 1.5em;
  margin: 0 0 1.5em;
  border-bottom: 1px solid #eee;
  font-size:0.875rem;
}

.quote { color:#505050; font-style:italic; font-size: 1.25rem; font-weight:bold; }
.quote-mark { background: #FFFFFF url(/pictures/web/b/u/w/quote_965763.png); width:40px; height:28px; margin-bottom:15px; }

/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
}

.star-container {
  position: relative;
}

.service-factor-table { width: 100%; }
.service-factor-table > tbody > tr > td > h4 { margin-bottom:0; font-size:1rem; font-weight: 400; }
.service-factor-table > tbody > tr > td { padding-bottom:0; }

.webvision { display:none; }
table { background-color:transparent; }
table td { border-bottom: 1px solid #000; font-size: 1.1rem; }
/* Sliding boxes */
	.slider-container {
	  width: 90%;
	  max-width: 1200px;
	  margin: 0 auto;
	  position:absolute;
	}

	.slides, .slides-platform {
	  position: relative;
	}
	.slides .slide {
	  position: absolute;
	  top: 0;
	  width: calc(17% - 1em);
	  max-height: 3.5em;
	  margin: 0.5em;
	  padding: 1em;
	  background: #ececec;
	  float: left;
	  overflow: hidden;
	  transition: max-height 0.25s ease-in-out, width 0.25s 0.25s ease-in-out, left 0.25s 0.5s ease-in-out, top 0.25s 0.75s ease-in-out;
	}
	
	.slides-platform .slide {
	  position: absolute;
	  top: 0;
	  width: calc(20% - 1em);
	  max-height: 3.5em;
	  margin: 0.5em;
	  padding: 1em;
	  background: #ececec;
	  float: left;
	  overflow: hidden;
	  transition: max-height 0.25s ease-in-out, width 0.25s 0.25s ease-in-out, left 0.25s 0.5s ease-in-out, top 0.25s 0.75s ease-in-out;		
	}
	
	.slides .slide:nth-child(1) {
	  left: 0%;
	}
	.slides .slide:nth-child(2) {
	  left: 17%;
	}
	.slides .slide:nth-child(3) {
	  left: 33.9%;
	}
	.slides .slide:nth-child(4) {
	  left: 50.8%;
	}
	.slides .slide:nth-child(5) {
	  left: 67.7%;
	}
	.slides .slide:nth-child(6) {
	  left: 84.5%;
	}
	
	.slides-platform .slide:nth-child(1) {
	  left: 0%;
	}
	.slides-platform .slide:nth-child(2) {
	  left: 20%;
	}
	.slides-platform .slide:nth-child(3) {
	  left: 40%;
	}
	.slides-platform .slide:nth-child(4) {
	  left: 60%;
	}
	.slides-platform .slide:nth-child(5) {
	  left: 80%;
	}
	.slides .slide > a, .slides-platform .slide > a {
	  display: block;
	  padding-bottom: 1em;
	  padding-top: 0.28em;
	  font-family: 'Source Sans Pro', sans-serif;
	  text-transform: uppercase;
	  text-decoration: none;
	  transition: color 2s;
		font-weight: bold;
	}
	.slides .slide.active, .slides-platform .slide.active {
	  position: absolute;
	  top: 4.5em;
	  left: 0;
	  width: 100%;
	  max-height: 100em;
	  float: none;
	  transition: top 0.25s 1s ease-in-out, left 0.25s 1.25s ease-in-out, width 0.25s 1.5s ease-in-out, max-height 0.25s 1.75s ease-in-out;
	}
	.slides .slide.active a, .slides-platform .slide.active a {
	  color: #000;
	}
	
	/**
	 * For modern browsers
	 * 1. The space content is one way to avoid an Opera bug when the
	 *    contenteditable attribute is included anywhere else in the document.
	 *    Otherwise it causes space to appear at the top and bottom of elements
	 *    that are clearfixed.
	 * 2. The use of `table` rather than `block` is only necessary if using
	 *    `:before` to contain the top-margins of child elements.
	 */
	.cf:before, .slides:before,
	.cf:after,
	.slides:after {
	  content: " ";
	  /* 1 */
	  display: table;
	  /* 2 */
	}
	
	.cf:after, .slides:after {
	  clear: both;
	}
	
	/**
	 * For IE 6/7 only
	 * Include this rule to trigger hasLayout and contain floats.
	 */
	.cf, .slides {
	  *zoom: 1;
	}
	
	.static-table { margin: 0.5em; padding: 1em; background: #ececec; color: #000; }
	
	.up-by { left: 3px; display: inline-block; width: 0; height: 0; border: solid 5px transparent; margin: 4px 4px 2px 3px; background: transparent; border-bottom: solid 7px #9db243; border-top-width: 0; }
	.down-by { left: 3px; display: inline-block; width: 0; height: 0; border: solid 5px transparent; margin: 4px 4px 0 3px; background: transparent; border-top: solid 7px #ee3523; border-bottom-width: 0; }
	
	.picture { width:85%; }
	
	
	@media screen and (max-width: 400px) {
		table td, table th {
			padding: 10px 4px;
			font-size: 0.875em;
		}
		
		h1 { line-height: 3rem; }
		
		.slides .slide {
		  width: 100%;
		  padding: 1em 0.5em;
		}
		.slides .slide:nth-child(1) {
		  left: 0%;
		}
		.slides .slide:nth-child(2) {
		  left: 0%;
			margin-top: 26%;
		}
		.slides .slide:nth-child(3) {
		  left: 0%;
		  margin-top: 49%;
		}
		.slides .slide:nth-child(4) {
		  left: 0%;
		  margin-top: 72%;
		}
		.slides .slide:nth-child(5) {
		  left: 0%;
		  margin-top: 90%;
		}
		.slides .slide:nth-child(6) {
		  left: 0%;
		  margin-top: 95%;
		}
		.slides .slide.active:nth-child(1) {
			top: 24.5em;
		}
		.slides .slide.active:nth-child(2) {
			top: 19.4em;
		}
		.slides .slide.active:nth-child(3) {
			top: 14.5em;
		}
		.slides .slide.active:nth-child(4) {
			top: 9.8em;
		}
		.slides .slide.active:nth-child(5) {
			top: 5em;
		}
		.slides .slide.active:nth-child(6) {
			top: 0em;
		}
		
		.static-table { 
			padding: 0.5em;
			margin:0;
		}
		
		.item {
			padding: 1em;
		}
		
		.picture {  width: 100%; }
		.footer .bottomNav { margin-top: 65em; }
		#broker-segment img { width: 34%; }
	}

</style>