/* Luigi's Layer */
.bb {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
#firstLayer {
	/*background:url("../img/gray1-bg.jpg");*/
	background-color: #f4f4f4;
}
.first-layer-container {
 /* background-color: #fff;*/
}
.first-layer {
  display:block;
  position:relative;
  width:100%;
  height:290px;
  overflow:hidden;
}
.first-layer-images {
  display:block;
  position:relative;
  width:25%;
/*  height:100%;*/
  float:left;
  margin-bottom: 10px;
  transition: all ease-in-out 800ms;-webkit-transition: all ease-in-out 800ms;-moz-transition: all ease-in-out 800ms;
}
.image-container {
  display:block;
  position:relative;
  width:120px;
  height:120px;
  margin:auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all ease-in-out 600ms;-webkit-transition: all ease-in-out 600ms;-moz-transition: all ease-in-out 600ms;
}
.ic1 {
  background-image: url("../img/icon-client-first.png")
}
.ic2 {
  background-image: url("../img/icon-dynamic.png")
}
.ic3 {
  background-image: url("../img/icon-excellence.png")
}
.ic4 {
  background-image: url("../img/icon-together.png")
}
.image-text {
  opacity: 1;
  padding-top:25px;
  font-size:20px;
  color:#585858;
  transition: all ease-in-out 600ms;-webkit-transition: all ease-in-out 600ms;-moz-transition: all ease-in-out 600ms;
}
.hovered-text {
	opacity: 0;
    position: absolute;
    width: 350px;
    top: 0;
    left: 65%;
    padding-left: 150px;
    transition: all ease-in-out 600ms;
    -webkit-transition: all ease-in-out 600ms;
    -moz-transition: all ease-in-out 600ms;
    text-align: left;
    padding-top: 50px;
 }
.hovered-text .image-text-hovered {
  padding-bottom:10px;
  font-size:24px;
  color: #945871;
}
.hovered-text span {
  font-size:14px;
}
/* Hover Icons */
.hover-toggle .first-layer-images {
  width:19%;
}
.hover-toggle .first-layer-images.active {
  margin-right:20%;
    border-right: 1px solid #696969 !important;
}
.hover-toggle .first-layer-images.active .image-container {
  background-repeat: no-repeat;
  background-position: left;
  width:140px;
  height:140px;
}
.hover-toggle .first-layer-images.active .ic1 {
  background-image: url("../img/icon-client-first-hovered-red.png");
}
.hover-toggle .first-layer-images.active .ic2 {
  background-image: url("../img/icon-dynamic-hovered-red.png");
}
.hover-toggle .first-layer-images.active .ic3 {
  background-image: url("../img/icon-excellence-hovered-red.png");
}
.hover-toggle .first-layer-images.active .ic4 {
  background-image: url("../img/icon-together-hovered-red.png");
}
.hover-toggle .first-layer-images.active .hovered-text {
  opacity: 1;
}
.hover-toggle .first-layer-images.active .image-text {
  opacity: 1;
}
@media (max-width:991px) {
  .first-layer-container {width:auto;}
  .first-layer {
    height:auto;
    margin:auto
  }
  .first-layer-images {width:50%;}
  .image-container {margin-left:10px;}
  .image-text {opacity:0;}
  .ic1 {
    background-image: url("../img/icon-client-first-hovered.png")
  }
  .ic2 {
    background-image: url("../img/icon-dynamic-hovered.png")
  }
  .ic3 {
    background-image: url("../img/icon-excellence-hovered.png")
  }
  .ic4 {
    background-image: url("../img/icon-together-hovered.png")
  }
  .hovered-text {opacity:1;}
  .hover-toggle .first-layer-images {
    width:50%;
  }
  .hover-toggle .first-layer-images.active {
    margin-right:0;
  }
  .hover-toggle .first-layer-images.active .image-container {
    background-repeat: no-repeat;
    width:120px;
    height:120px;
  }
  .hover-toggle .first-layer-images.active .ic1 {
    background-image: url("../img/icon-client-first-hovered.png")
  }
  .hover-toggle .first-layer-images.active .ic2 {
    background-image: url("../img/icon-dynamic-hovered.png")
  }
  .hover-toggle .first-layer-images.active .ic3 {
    background-image: url("../img/icon-excellence-hovered.png")
  }
  .hover-toggle .first-layer-images.active .ic4 {
    background-image: url("../img/icon-together-hovered.png")
  }
  .hover-toggle .first-layer-images.active .hovered-text {
    opacity: 1;
  }
  .hover-toggle .first-layer-images.active .image-text {
    opacity: 0;
  }
}
@media (max-width:767px) {
  .first-layer-images {
    width:400px;
    float:none;
    margin:auto;
  }
  .hover-toggle .first-layer-images {
    width:400px;
  }
  .hover-toggle .first-layer-images.active {
    margin:auto;
  }
  .hover-toggle .first-layer-images.active .image-container {
    background-repeat: no-repeat;
    width:120px;
    height:120px;
  }
}
@media (max-width:450px) {
  .first-layer-images {
    width:230px;
    height:150px;
    float:none;
    margin:auto;
    text-align: center;
  }
  .image-container {
    display:none;
  }
  .hovered-text {
    width:auto;
    padding:0;
    left:0;
  }
  .hover-toggle .first-layer-images {
    width:230px;
  }
}
/* Message from Minister */
.minister-container {
  display:inline-block;
  position:relative;
  width:100%;
  height:380px;
  border:1px solid #4d4d4d;
}
/* Minister Image */
.minister-img {
  display:block;
  width:24%;
  height:100%;
  float:left;
}
.minister-img img {
  display:block;
  height:100%;
  padding-right: 10px;
  margin:auto;
}
/*Minister Message */
.message-container {
  display:block;
  width:37%;
  height:100%;
  margin:0 2%;
  float:left;
  color:#4d4d4d;
}
.message-container > span:nth-child(1) {
  display:block;
  padding:30px 0 10px 0;
  font-size:18px;
}
.message-container p {
  display:block;
  font-size:15px;
}
.read-more-state {
  display: none;
}
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: 250ms ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
}
.read-more-state ~ .read-more-trigger:before {
  content: 'READ MORE';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'READ LESS';
}
.read-more-trigger {
  cursor: pointer;
  display:block;
  margin:3px 0 10px 0;
  padding:7px 13px;
  color: #4d4d4d;
  border: 1px solid #4d4d4d;
  font-size:12px;
  font-weight:bold;
  float:right;
}
.read-more-trigger:hover {
  text-decoration: none;
  border:1px solid #fff;
  background-color: #945871;
  color:#fff;
}
/* Minister Video */
.video-container {
  display:block;
  width:35%;
  height:100%;
  padding:0 20px 50px 20px;
  float:left;
}
.minister-video {
  padding-top:20px;
  border:none;
  overflow:hidden;
  width:100%;
  height:100%;
}
@media (max-width:991px) {
  .minister-container {
    height:auto;
    padding:20px;
  }
  .minister-img {display:none;}
  .message-container {width:47%;}
  .video-container {width:47%;}
  .minister-video {width:100%;height:280px;}
}
@media (max-width:711px) {
  .message-container {width:100%;margin:0;}
  .video-container {width:100%;text-align:center;}
  .minister-video {height:400px;}
}
@media (max-width:581px) {
  .minister-video {height:300px;}
}
@media (max-width:450px) {
  .minister-video {height:220px;}
}
@media (max-width:340px) {
  .message-container {text-align:center;}
  .minister-video {height:180px;}
}