@charset "UTF-8";
/* CSS Document ---------------------------flex ---------------------------------------- */
body {
	color: #fff;
	padding: 0;
	font-family: helvetica, sans-serif;
	display: flex;
	min-height: 100vh;
	margin: 0;
}

 .container {
      width: 500px;
      height: 324px;
      position: relative;
      margin: auto;
	  font-size: .8em;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }
	.container_frame{
	  border: 1px solid rgba(183,182,182,0.50);
	}

  #card {
	  display:none;
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 0.7s;
         -moz-transition: -moz-transform 0.7s;
           -o-transition: -o-transform 0.7s;
              transition: transform 0.7s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: right center;
         -moz-transform-origin: right center;
           -o-transform-origin: right center;
              transform-origin: right center;
    }
	

  #card.flipped {
      -webkit-transform: translateX( -100% ) rotateY( -180deg );
         -moz-transform: translateX( -100% ) rotateY( -180deg );
           -o-transform: translateX( -100% ) rotateY( -180deg );
              transform: translateX( -100% ) rotateY( -180deg );
    }

    #card .front, #card .back {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #card .front {
      width: 100%;
      height: 100%;
      background: red;
	  background: url(business-card_web_small_innerworks2.jpg) #FFF no-repeat;
	  border: 1px solid #ccc;
	  text-align: center;
	  box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    }

    #card .back {
      width: 100%;
      height: 100%;
      background: blue;
	  background: url(business-card_web_small_webdesign.jpg) #FFF no-repeat;
	  border: 1px solid #ccc;
	  box-shadow: 0 15px 50px rgba(0,0,0,0.1);
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }


.turn_btn {
	display:none;
	width: 486px;
	height: 20px;
}

.front_btn {
	display: block;
	padding: 3px;
	margin-left:20px;
	background: #999;
	text-align: right;
	font-size: .8em;
	position: absolute;
	cursor: pointer;
	opacity: .6;
}
.front_btn:hover {
	opacity: 1;
}

.back_btn {
	display: block;
	padding: 3px;
	background: #999;
	text-align: right;
	font-size: .8em;
	opacity: 0.6;
	position: absolute;
	cursor: pointer;
}
.back_btn:hover {
	opacity: 1;
}

/* hit areas */

.map_front {
      width: 100%;
      height: 300px;
	position: relative;/*border:#F00 1px solid;*/
}
#innerworks_link {
	position: absolute;
	display: block;
	top: 11px;
	left: 8px;
	width: 486px;
	height: 163px;
	background-color: transparent;/*border: 1px solid yellow;*/
}
#email_link {
	position: absolute;
	display: block;
	top: 271px;
	left: 208px;
	width: 289px;
	height: 22px;
	background-color: transparent;/*border: 1px solid blue;*/
}
#innerworks_link_2 {
	position: absolute;
	display: block;
	top: 239px;
	left: 146px;
	width: 350px;
	height: 19px;
	background-color: transparent;/*border: 1px solid black;*/
}

#retreat_link{
	position: absolute;
	display: block;
	top: 200px;
	left: 1px;
	width: 80px;
	height:98px;
	background-color: transparent;/*border: 1px solid black;*/
}

.map_back {
 width: 100%;
 height: 300px;
 position:relative;
}

#photo_link {
    position: absolute;
    display: block;
    top: 140px;
    left: 8px;
    width: 486px;
    height: 91px;
    background-color: transparent;
}

#art_link {
    position: absolute;
    display: block;
    top: 75px;
    left: 1px;
    width: 300px;
    height: 60px;
    background-color: transparent;
}

#blog_link {
    position: absolute;
    display: block;
    top: 75px;
    left: 311px;
    width: 190px;
    height: 60px;
    background-color: transparent;
}

#webdesign_link {
    position: absolute;
    display: block;
    top: 0px;
    left: 8px;
    width: 488px;
    height: 70px;
    background-color: transparent;
}
#crisrieder_web_link {
    position: absolute;
    display: block;
    top: 235px;
    left: 8px;
    width: 189px;
    height: 65px;
    background-color: transparent;
}

#email_back_link {
	position: absolute;
	display: block;
	top: 235px;
	left: 211px;
	width: 283px;
	height: 65px;
	background-color: transparent;/*border: 1px solid black;*/
}


.arrow {
    position: absolute;
    width: 64px;
    height: 46px;
    top: 0px;
    left: -70px;
    border: none;
    outline: none;
    background: url(arrow_web.png) no-repeat bottom right;
    display: none; 
}
.arrow_txt {
    position: absolute;
    top: 40px;
    left: -109px;
    color: #E40000;
    text-align: left;
    font-weight: bold;
    border: none;
    outline: none;
    padding: 5px;
    display: none; 
}

.txt {
	width:100%;
	font-size: 20px;
	display:none;
	color:black;
	text-align:center;
}