.jumbotron {
  background-image: url("../images/jumbo-cover.jpg");
  background-size: cover;
  min-height: 400px;

}

.jumbo-text{
color:white;

}

.media-object {
  width:200px;
}


.col {

  box-sizing: border-box;
  width:90%;
  display:inline-block;


}

.center{
  text-align: center;
}
.clearfix{
  overflow:auto;
}

.thumb-container {
  width:100%;
  height:auto;
  margin:30px auto;
  padding:20px 0px;
  transition:opacity 800ms;
}

.thumb {
  display: block;
  position:relative;
  width:25%;
  float:left;
  background-image: url("/images/work/work-full6.jpg");
  background-size: cover;
  padding-top:18%; /*18% of the width of the unit (for proportional scaling)*/
  overflow:hidden;
  cursor: pointer;
}

.thumb1 {
  background-image: url("/images/work/work-thumb1.jpg");
}
.thumb2 {
  background-image: url("/images/work/work-thumb4.jpg");
}
.thumb3 {
  background-image: url("/images/work/work-thumb2.jpg");
}
.thumb4 {
  background-image: url("/images/work/work-thumb3.jpg");
}
.thumb5 {
  background-image: url("/images/work/work-full12.jpg");
}
.thumb6 {
  background-image: url("/images/work/work-full13.jpg");
}
.thumb7 {
  background-image: url("/images/coming-soon.png");
}
.thumb8 {
  background-image: url("/images/coming-soon.png");
}

@media (max-width: 540px) {
  .thumb {
    width: 50%;
    padding-top:24%;
  }

}
.thumb-overlay {
  display:flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top:100%;
  right:0px;
  bottom:0px;
  left:0px;
  height:100%;
  text-align: center;
  transition: all .2s;
}
.thumb-overlay strong {
  display:block;
  padding:20px;
  color:white;
  font-weight: 300;
  font-size: 20px;
}


.thumb:hover .thumb-overlay {
  top:0%;
}

.img-placeholder{
  width:500px;
  height:500px;
  background-color:pink;
  margin-left:auto;
  margin-right:auto;
}

.work-slider{
  position: relative;
  left: 0%; /* animate this for transition */
  width:200%;
  overflow:hidden;
  transition: all 800ms;
}

.work-section{
  overflow-x: hidden;
  box-sizing: border-box;

}
.work-wrap, .thumb-wrap {
  width:50%;
  padding:15px;
  float: left;
  box-sizing: border-box;
}
.work-container{
  margin-left: auto;
  margin-right:auto;
  text-align: center;
  opacity:1;
  display:none;
}
.back-btn {
  width:100px;
  height:30px;
  cursor:pointer;
  border: 1px solid rgb(7, 105, 14);
  border-radius: 10px;
  position:relative;
  margin: 0px auto;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.back-btn > p{
width: 100px;
height: 30px;
padding: 3px;
}

.back-btn:hover {
  background-color: #339151;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}


#productList {
font-family: 'Lato', 'sans-serif';
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
list-style: none;

}
#productList li {
  padding: 5px;
  margin: 3px;
  border: 1px solid blue;
  border-radius: 10px;
  max-width: 500px;
}


  p.icon {
    width: 50px;
    height: 50px;
    border: 2px solid rgb(165, 167, 166);
    margin: 60px 0 10px 50%;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    /* Drop Shadow */
    -moz-box-shadow: -3px 3px rgba(11, 184, 43, 0.4);
    -webkit-box-shadow: -3px 3px rgba(11, 184, 43, 0.4);
    box-shadow: -3px 3px rgba(11, 184, 43, 0.4);
    /* rounded corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  p.icon .fa-code, p.icon .fa-video, .fa-film, .fa-eye {
    font-size: 24px;
    margin: 10px 0 0 0;
    /* Rotate */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }