.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.flipcontainer {
	width: 100%;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 25%;
  height: 400px;
  float: left;
  box-sizing: border-box;
  border-right: 3px solid #fff;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  box-sizing: border-box;
  
}

.flip-card.noborder {
    border: 0px;
  }

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  /*border-right: 0px solid #fff;
  border-left: 1px solid #fff;*/
}

.backcorporate {
	background:url(../img/corporate-back.jpg);
	background-size: cover;
	background-position:center;
}

.backsocial {
	background:url(../img/social-back.jpg);
	background-size: cover;
	background-position:center;
}

.backfandb {
	background:url(../img/fandb-back.jpg);
	background-size: cover;
	background-position:center;
}

.backexmarketing {
  background:url(../img/exmarketing-back.jpg);
  background-size: cover;
  background-position:center;
}

.backproduction {
  background:url(../img/event-prod-flip.jpg);
  background-size: cover;
  background-position:center;
}

.backfabrication {
  background:url(../img/custom-fab-flip.jpg);
  background-size: cover;
  background-position:center;
}


.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  padding: 140px 10px 0 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 42px;
  line-height: 46px;
  font-family: 'Montserrat', sans-serif;
}

.flip-card-front span {
	display: block;
	font-size: 20px;
	margin-top: 20px;
	color: #d9d9d9;
	}

  .flip-card-front span.socialtag {
  display: block;
  font-size: 20px;
  line-height: 20px;
  margin-top: 0px;
  color: #d9d9d9;
  }

.flip-card-back {
  box-sizing: border-box;
  background-color: #555;
  transform: rotateY(180deg);
  padding: 35px 20px;
}

.flip-card-back p {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 20px;
}

/* Media Queries ---------------------------------------- */

@media screen and (max-width:1375px) {

.flip-card {
  height: 300px;
}

.flip-card-front {
  padding: 100px 10px 0 10px;
  font-size: 32px;
  line-height: 36px;
}

.flip-card-back {
  padding: 25px 15px;
}

.flip-card-back p {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 15px;
}

}

@media screen and (max-width:1120px) {

.flip-card {
  height: 230px;
}

.flip-card-front {
  padding: 75px 10px 0 10px;
  font-size: 22px;
  line-height: 26px;
}

.flip-card-back {
  padding: 15px 10px;
}

.flip-card-back p {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 8px;
}

}

@media screen and (max-width:1055px) {

.flip-card {
  width: 50%;
  height: 400px;
  float: left;
  border: 2px solid #fff;
}

.flip-card.noborder {
    border: 2px solid #fff;
  }

.flip-card-front {
  padding: 140px 10px 0 10px;
  font-size: 42px;
  line-height: 46px;
}

.flip-card-back {
  padding: 35px 20px;
}

.flip-card-back p {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 20px;
}

}

@media screen and (max-width:700px) {


.backcorporate {
  background:url(../img/corporate-back-mobile.jpg);
  background-size: cover;
  background-position:top;
}

.flip-card {
  width: 100%;
  height: 150px;
  float: none;
  border-top: 2px solid #fff;
  border-right: 0px solid #fff;
  border-left: 0px solid #fff;
  border-bottom: 0px solid #fff;
}

.flip-card.noborder {
    border-top: 2px solid #fff;
  border-right: 0px solid #fff;
  border-left: 0px solid #fff;
  border-bottom: 0px solid #fff;
  }

.flip-card-front {
  padding: 30px 10px 0 10px;
  font-size: 38px;
  line-height: 42px;
}

.flip-card-front span {
  font-size: 14px;
  line-height: 14px;
  margin-top: 5px;
  }

.flip-card-back {
  padding: 10px;
}

.flip-card-back p {
  font-size: 13px;
  line-height: 15px;
  margin-bottom: 5px;
}

a.menubutton {
  padding: 5px;
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 5px 5px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  line-height: 14px;
}

}