@import url(https://fonts.googleapis.com/css?family=Lato);

$lato: "Lato";
$black: #000;
$white: #fff;

/* CENTERING */

.centered {
  position: fixed;
 width: 100%;
height: auto;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
	display:flex;
	
}

@mixin vertical-align($position: relative) {
  position: $position;
  top: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* THE FRONT */

.front{
    background-image:url("../images/frontcard.jpg");
   background-size:100%;
   background-repeat: no-repeat;
 width: 100%;
	height: auto;
}

/* THE BACK */

.back{
   background-image:url("../images/frontcardwood.jpg");
   background-size:100%;
   background-repeat: no-repeat;
}

/* THE FLIP EFFECT */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
      cursor: pointer;
	}

@media (max-width : 700px ) {
	.flip-container, .front, .back  {
   height: 185px;
   width: 100%;
}}

@media (min-width : 700px ) {
@media (max-width : 950px ) {
	.flip-container, .front, .back  {
   height: 195px;
   width: 100%;
}}}

@media (min-width : 950px ) {
@media (max-width : 1200px ) {
	.flip-container, .front, .back  {
   height: 245px;
   width: 100%;
}}}


@media (min-width : 1200px ) {
@media (max-width : 1600px ) {
	.flip-container, .front, .back  {
   height: 325px;
   width: 100%;
}}}

@media (min-width : 1600px ) {
@media (max-width : 2550px ) {
	.flip-container, .front, .back  {
   height: 450px;
   width: 100%;
	}}}

@media (min-width : 2550px ) {
@media (max-width : 3800px ) {
	.flip-container, .front, .back  {
   height:375px ;
   width: 650px;
	}}}

@media (min-width : 3800px ) {
.flip-container, .front, .back  {
   height: 750px;
   width: 1300px;
	}}

.flipper {
	transition: 0.5s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	
}

.front {
	z-index: 2;
	/* firefox 31 */
	transform: rotateY(0deg);
}

.back{
   background-color: $black;
}

.back {
	transform: rotateY(180deg);
}

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 400x; 
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}