.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;
}

.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;*/
}



/*Portfolio*/
.backmexico {
	background-image:url(../images/portfolio/_0002s_0000_IMG_6910.jpg);
	background-size: cover;
	background-position:center;
}
.back4040{
	background:url(../images/portfolio/_0008_IMG_8534.jpg);
	background-size: cover;
	background-position:center;
}
.backsamsung {
	background:url(../images/portfolio/_0005_samsung.jpg);
	background-size: cover;
	background-position:center;
}
.backstandard {
	background:url(../images/portfolio/_0000_standard-charter.jpg);
	background-size: cover;
	background-position:center;
}
.backblade {
	background:url(../images/portfolio/_0004s_0001_DSC01473.jpg);
	background-size: cover;
	background-position:center;
}
.backgoogle {
	background:url(../images/portfolio/rhymes.jpg);
	background-size: cover;
	background-position:center;
}
.backgossip {
	background:url(../images/portfolio/_0001_gossip-girl.jpg);
	background-size: cover;
	background-position:center;
}
.backatrium {
	background:url(../images/portfolio/_0007_conductor.jpg);
	background-size: cover;
	background-position:center;
}
.backasics {
	background:url(../images/portfolio/_0001s_0000_asics.jpg);
	background-size: cover;
	background-position:center;
}
.backswiss {
	background:url(../images/portfolio/_0002_swiss-re.jpg);
	background-size: cover;
	background-position:center;

}
.backskullcandy{
	background:url(../images/portfolio/_0003s_0003_p-12.jpg);
	background-size: cover;
	background-position:center;

}
.backdesperate {
	background:url(../images/portfolio/_0004_desperate-housewives.jpg);
	background-size: cover;
	background-position:center;

}
.backaeupfront {
	background:url(../images/portfolio/_0008_IMG_8517.jpg);
	background-size: cover;
	background-position:center;
    opacity: .85;

}
.backazul {
	background:url(../images/portfolio/_0008_IMG_8510.jpg);
	background-size: cover;
	background-position:center;

}
.backlenovo {
	background:url(../images/portfolio/_0005s_0000_Lenovo.jpg);
	background-size: cover;
	background-position:center;

}
.backmongo {
	background:url(../images/portfolio/_0006s_0001_PXL_20211216_213715000.jpg);
	background-size: cover;
	background-position:center;

}
.backgossip{
	background:url(../images/portfolio/_0001_gossip-girl.jpg);
	background-size: cover;
	background-position:center;

}
.backestee {
	background:url(../images/portfolio/_0000s_0000_DSC_6853.jpg);
	background-size: cover;
	background-position:center;
    opacity: .85;

}


/*Venue*/

.back48wall{
	background:url(../images/portfolio/_0006_48WALL.jpg);
	background-size: cover;
	background-position:center;

}
.backoperahouse{
	background:url(../images/portfolio/_0002_OPERAHOUSE.jpg);
	background-size: cover;
	background-position:center;

}
.back1912{
	background:url(../images/portfolio/_0004_1912.jpg);
	background-size: cover;
	background-position:center;

}
.backveranda{
	background:url(../images/portfolio/_0003_VERANDA.jpg);
	background-size: cover;
	background-position:center;

}
.backlofts{
	background:url(../images/portfolio/_0007_LOFTS.jpg);
	background-size: cover;
	background-position:center;

}
.backartistry{
	background:url(../images/portfolio/_0001_ARTISTRY.jpg);
	background-size: cover;
	background-position:center;

}
.backstudios{
	background:url(../images/portfolio/_0000_DAYLIGHT.jpg);
	background-size: cover;
	background-position:center;

}
.backtardis{
	background:url(../images/portfolio/_0005_TARDIS.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-front-round{
  padding-top: 100px;
}

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

}

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

a.menubutton:link, a.menubutton:visited {
  background-color: white;
    color: black;
    text-decoration: none;
    padding: 20px;
    margin-top: 15px;
}

a.menubutton:hover {
  background-color: black;
    color: white;
        text-decoration:none;
    padding: 15px;
    margin-top: 50x;
    border: 5px solid white;

}

a.menubutton:active {
  background-color: #555;
    color: white;
    text-decoration: none;
    padding: 20px;
    margin-top: 15px;

} 

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

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

.flip-card {
  height: 500px;
}

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

.flip-card-front-round{
  padding-top: 80px;
}

.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: 330px;
}

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

.flip-card-front-round{
  padding-top: 50px;
}

.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: 500px;
  float: left;
}

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

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

.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: 250px;
  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-round{
  padding: 30px 0 0 0;
}

.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;
}

.flip-card-back-button-wrapper{
  margin-top:15px;
}

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;
  margin-top:15px;
  display: inline-block;

}
    a.menubutton:link {
  background-color: White;
    text-decoration: none;
}

a.menubutton:visited {
  background-color: cyan;
        text-decoration: none;

}

a.menubutton:hover {
  background-color: lightgreen;
        text-decoration:underline;

}

a.menubutton:active {
  background-color: hotpink;
    text-decoration: none;
} 

}