/*#estragaste { background-image: url('../images/bussiness_card_1.png')}*/
#contacto { background-image: url('../images/bussiness_card_2.png')}
#logotipo { background-image: url('../images/bussiness_card_3.png')}
#assinatura { background-image: url('../images/bussiness_card_4.png')}

/*Shadow Animation*/
@-webkit-keyframes shadowFade-out { from { opacity:1 } to { opacity:0 } }
   @-moz-keyframes shadowFade-out { from { opacity:1 } to { opacity:0 } }
     @-o-keyframes shadowFade-out { from { opacity:1 } to { opacity:0 } }
        @keyframes shadowFade-out { from { opacity:1 } to { opacity:0 } }

@-webkit-keyframes shadowFade-in { from { opacity:0 } to { opacity:1 } }
   @-moz-keyframes shadowFade-in { from { opacity:0 } to { opacity:1 } }
     @-o-keyframes shadowFade-in { from { opacity:0 } to { opacity:1 } }
        @keyframes shadowFade-in { from { opacity:0 } to { opacity:1 } }

.dropShadow {
	-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35);
	   -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35);
		 -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35);
			box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35);
	}

.sombra {background-color: rgba(0, 0, 0, 0.6);}

.sombra2 {
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: rgba(0, 0, 0, 0.6);
	}

.brilho {background-color: rgba(255, 255, 255, 0.4);}

.brilho2 {
	width: 362px;
	height: 228px;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.4);
	}

.contacto {
	right: 0px;
	position: absolute;
	width: 250px;
	height: 228px;
	}

.estragaste {
	left: 0px;
	position: absolute;
	width: 250px;
	height: 228px;
	}

.esconde{
	opacity:1;
	
	-webkit-animation: shadowFade-out ease-out;
	   -moz-animation: shadowFade-out ease-out;
	     -o-animation: shadowFade-out ease-out;
		   -animation: shadowFade-out ease-out;

	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
	     -o-animation-fill-mode: forwards;
		   -animation-fill-mode: forwards;
	
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
		   -animation-duration: 1s;

	}
	
.mostra{
	opacity:0;
	
	-webkit-animation: shadowFade-in ease-out;
	   -moz-animation: shadowFade-in ease-out;
	     -o-animation: shadowFade-in ease-out;
		   -animation: shadowFade-in ease-out;

	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
	     -o-animation-fill-mode: forwards;
		   -animation-fill-mode: forwards;
	
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
		   -animation-duration: 1s;

	}
	
.mostra2{
	opacity:0;
	
	-webkit-animation: shadowFade-in ease-out;
	   -moz-animation: shadowFade-in ease-out;
	     -o-animation: shadowFade-in ease-out;
		   -animation: shadowFade-in ease-out;

	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
	     -o-animation-fill-mode: forwards;
		   -animation-fill-mode: forwards;
	
	-webkit-animation-duration: .3s;
	   -moz-animation-duration: .3s;
	     -o-animation-duration: .3s;
		   -animation-duration: .3s;
	}
	
.button {
	cursor: pointer;
	position: absolute;
	/*opacity: .5;
	background-color: pink;*/
	}
	
.btnAbrir{
	width: 362px;
	height: 228px;
	left:0;
	cursor: pointer;
	background-image: url('../images/bussiness_card_1.png');
	}
.btnAbrir:hover {
	background-position-y: -228px;
	}
.btnEmail {
	width: 128px;
	height: 22px;
	right: 14px;
	bottom: 14px;
	}
.btnAbrirGaleria{
	width: 263px;
	height: 93px;
	left: 92px;
	top: 67px;
	}
.btnVerAssinatura{
	width: 32px;
	height: 228px;
	right: 0;
	top: 0;
	}
.btnVoltar{
	width: 100%;
	height: 100%;
	right: 0;
	top: 0;
	}	
.btnFechar{
	width: 32px;
	height: 100%;
	left: 112px;
	top: 0;
	}

/*Animation intro*/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes translateIn { from { -webkit-transform: translateX( 200% ) translateY( 200% ) rotate( -180deg ); } to { -webkit-transform: translateX( 0% ) translateY( 0% ) rotate( 0deg ); } }
   @-moz-keyframes translateIn { from { -moz-transform: translateX( 200% ) translateY( 200% ) rotate( -180deg ); } to { -moz-transform: translateX( 0% ) translateY( 0% ) rotate( 0deg ); } }
     @-o-keyframes translateIn { from { -o-transform: translateX( 200% ) translateY( 200% ) rotate( -180deg ); } to { -o-transform: translateX( 0% ) translateY( 0% ) rotate( 0deg ); } }
        @keyframes translateIn { from { transform: translateX( 200% ) translateY( 200% ) rotate( -180deg ); } to { -o-transform: translateX( 0% ) translateY( 0% ) rotate( 0deg );} }
 
.intro {
	width: 362px;
	height: 228px;
	margin: auto;

	-webkit-transform: translateX( 200% ) rotate( 0deg ); /* make things behave upon start */
	   -moz-transform: translateX( 200% ) rotate( 0deg );
		 -o-transform: translateX( 200% ) rotate( 0deg );
			transform: translateX( 200% ) rotate( 0deg );
			
	-webkit-animation: translateIn ease-out;
	   -moz-animation: translateIn ease-out;
		 -o-animation: translateIn ease-out;
			animation: translateIn ease-out;
	 
	-webkit-animation-fill-mode: forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	   -moz-animation-fill-mode: forwards;
		 -o-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	 
	-webkit-animation-duration: .5s;
	   -moz-animation-duration: .5s;
		 -o-animation-duration: .5s;
			animation-duration: .5s;
	}

.container {
	width: 360px;
	height: 228px;
	position:relative;
	margin: auto;

	-webkit-perspective: 1200px;
	   -moz-perspective: 1200px;
		 -o-perspective: 1200px;
			perspective: 1200px;
				  
	-webkit-transition: -webkit-transform .5s;
	   -moz-transition: -moz-transform .5s;
		 -o-transition: -o-transform .5s;
			transition: transform .5s;

	-webkit-transform: translateX( 0% );
	   -moz-transform: translateX( 0% );
		 -o-transform: translateX( 0% );
			transform: translateX( 0% );
	}

.card {
	-webkit-transition: -webkit-transform .7s;
	   -moz-transition: -moz-transform .7s;
		 -o-transition: -o-transform .7s;
			transition: transform .7s;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
		 -o-transform-style: preserve-3d;
			transform-style: preserve-3d;

	-webkit-transform-origin: left center;
	   -moz-transform-origin: left center;
		 -o-transform-origin: left center;
			transform-origin: left center;
	}

.card figure {
	width: 362px;
	height: 228px;
	margin: 0;
	position: absolute;
	}
	
/*.card:hover  {
	-webkit-transform: rotateY(-5deg);
	   -moz-transform: rotateY(-5deg);
	     -o-transform: rotateY(-5deg);
	        transform: rotateY(-5deg);
	}*/

.card.flipped {
	-webkit-transform: rotateY( -180deg );
	   -moz-transform: rotateY( -180deg );
		 -o-transform: rotateY( -180deg );
			transform: rotateY( -180deg );
	}
	
/*.card.flipped:hover {
	-webkit-transform: rotateY(-175deg);
	   -moz-transform: rotateY(-175deg);
	     -o-transform: rotateY(-175deg);
	        transform: rotateY(-175deg);
    }*/
	
.translate-right {
      -webkit-transform: translateX( 30% );
         -moz-transform: translateX( 30% );
           -o-transform: translateX( 30% );
              transform: translateX( 30% );
    }
	
.front, .back {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
		  
    -webkit-transform: rotateY( 0deg );
       -moz-transform: rotateY( 0deg );
         -o-transform: rotateY( 0deg );
            transform: rotateY( 0deg );
	}

.back {
    -webkit-transform: rotateY( 180deg );
       -moz-transform: rotateY( 180deg );
         -o-transform: rotateY( 180deg );
            transform: rotateY( 180deg );
    }