body {
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.5;
  background: url("../images/bg-cubes.png");
}

p {
  margin: 0 0 10px 0;
}

 

.clip-svg {
  width: 0;
  height: 0;
}

.clip-caption {
  width: 100%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.clip-each {
  display: block;
  position: absolute;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  -webkit-clip-path: url("#hexagon-clip");
  clip-path: url("#hexagon-clip");
 
  margin: 0 auto;
}

 

.clip-solid {
  width: 200px;
  height: 200px;
  /* background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo-img.jpg"); */
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #ad6996;
  background-blend-mode: hard-light;
 top : 110px;
 left : 40px;
}

.clip-solid2 {
  width: 150px;
  height: 150px;
  
  left: 78px;
  top: -26px;
}


 

.clip-gradient1 {
  background: #d9f0ef;
  width: 100px;
  height: 100px;
  top: 240px;
    left: -21px;
}

.clip-gradient2 {
  background: #9f9f9c;
  width: 140px;
  height: 140px;
  top: 48px;
  left: 193px;
}

.clip-gradient3 {
  background: #97d6d3;
  width: 40px;
    height: 40px;
    top: 10px;
    left: 221px;
}


.clip-border {
  background: -webkit-linear-gradient(300deg, #aebcbf 0%, #6e7774 50%, #333 61%, #333 100%);  
  background: linear-gradient(150deg, #aebcbf 0%,#6e7774 50%,#333 61%,#333 100%);
  width: 160px;
  height: 160px;
  margin-top: 7px;
  color: #222;
}

.clip-border::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 4%;
  right: 4%;
  bottom: 4%;
  margin: 0 auto;
  background: url("http://karenmenezes.com/shapes-polygon/bg-cubes.png");
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  -webkit-clip-path: url("#hexagon-clip");
  clip-path: url("#hexagon-clip");
  z-index: -1;
}

.clip-tagline {
  display: block;
  color: #758C9B;
  text-decoration: none;
  text-align: center;
}

@media only screen and (min-width: 550px) {
  .wrap {
   
    position: relative;
    height: 350px;
    transform: rotateY(180deg);
  }

  .clip-block {
    /* display: table-cell; */
	position : absolute;
    vertical-align: middle;
  }

  .clip-border {
    margin-top: 20px;
  }
}


#slideshowHolder2
{
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}

#slideshowHolder2 img{
  position: absolute;
  width: 100%;
  height: 100%;
}

#mimg1
{
  animation:fade 8s infinite;
  -webkit-animation:fade 8s infinite;
}
#mimg2
{
  animation:fade2 8s infinite;
  -webkit-animation:fade2 8s infinite;
}
#mimg3
{
  animation:fade 8s infinite;
  -webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}