*{
	margin: 0;
	padding: 0;
}

body{
	text-align: center;


	  margin: 0px;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */

  background-attachment: fixed;
  background-size: cover;
  	background-image: url("../images/Fundo.jpg");
	background-attachment: fixed;

	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}
header{
	height: auto;
	overflow: hidden;


}

.nome_carta_res{
	margin-top: 6%;
	margin-bottom:  5%;
	margin-left:   5%;
	margin-right:    5%;
}

.result{
text-align: center;
	opacity: 0.9;

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 168px;
	height: 36px;
	margin: 100 auto 0 auto;
	 
}

.resultcard{
text-align: center;


	position: absolute;

	width: 110px;
	height: 183px;
	margin: 100 auto 0 auto;
	 
}
.resultmsg{

	height: inherit;
	position: relative;

	margin: 0;	
	overflow: visible;
	border-radius: 10px;
	border:solid white;
	width: 350px;
	
	margin: 100 auto 0 auto;
	 
}
.resultvoltasite{
	text-align: center;
	

	position: absolute;

	width: 60px;
	height: 43px;
	margin: 100 auto 0 auto;


}

.resultnovabusca{
		text-align: center;


	position: absolute;

	width: 60px;
	height: 63px;
	margin: 100 auto 0 auto;
}
.msg_volt{
	width: 100px;
	height: 10px;
	margin-left:  -18px;


}
.msg_nova_cons{
	width: 120px;
	height: 18px;
	margin-left:  -30px;
margin-top :14%;

}

#arc{
		width: 170px;
	height: 283px;

}

#result1{
margin-top: 8%;
margin-bottom:  10%;
}
#result2{
	margin-top: 2%;
	left: 1%;

}
#result3{

top :30%;
left: -84%;
}
#result4{
top :-90%;
left: -7%;
}
#result5{

top :24%;
	left: 560%;

}

















#msg_receb{
	  width: 100vw;
         height: 100vh;
        left: 100px;
         display: flex;
         flex-direction: row;
       justify-content: center;
}

#ainfos {
position:absolute;
left:12px;
top:13px;
width:390px;
height:20px;
z-index:1;
background:white;

text-align: center;

}
h1{
	color: white;
	 font-family: "Century Gothic";
}
h3{
	font-family: "Century Gothic";
	color: white;
	 
}
p{
	font-family: "Century Gothic";
	 font-size: 14px;
	color: white;
	text-align: center;
}






/*#background{
	position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -300;*/
}
content{
	position: absolute;
	top: 10px;
	padding: 30px;
	color: red; text-shadow: #000 2px 2px 2px; font-family: Arial;
}

img,
object,
embed,
video,
iframe,{
	max-width: 100%;
	height: auto;
}

.conteudo_msg{
	margin-top: 5%;
	margin-bottom:  5%;
	margin-left:   5%;
	margin-right:    5%;
}

#btn-one{
	animation-duration: 
	animation-duration: 5s;

}

#container{

	text-align: center;
margin: 100 auto 0 auto;

	width: 1925px;
	height: 975px;
	
	position: relative;
	margin: 1px auto;
	border-radius: 10px;

		display: flex;
	justify-content: center; 


	  width: 100vw;
         height: 100vh;
        
         display: flex;
         flex-direction: row;
       justify-content: center;
 max-width:100%
	
}

.card{
	margin-top: 10%;
	margin-left: 20%;
	margin-right: : 15%;
	width: 80px;
	height: 140px;
	position: absolute;
	border-radius: 5px;
	border:solid;
	background-attachment: fixed;
		background-size: 100%;
		background-attachment: fixed;


}
.botao{
text-align: center;
	opacity: 0.9;

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 298px;
	height: 52px;
	margin: 100 auto 0 auto;
	 
}
.botao:hover{
	transform: scale(1.5);
		box-shadow: 10px #07190B;
		z-index: 10;
		perspective: 1000; 
		  transition: 1.1s;  	
  transform-style: preserve-3d
}
#botao1{
top: 140px;
}
#botao2{
top: 70px;
}
#botao3{
top: 70px;
}
#botao4{
top: 140px;
}
#botao5{
top: 210px;
}
#botao6{
top: 280px;
}

.card:hover{
	transform: scale(1.5);
		box-shadow: 10px #07190B;
		z-index: 10;
		perspective: 1000; 
		  transition: 1.1s;  	
  transform-style: preserve-3d


}	
#card1{
left: 90px;

}
#card2{
left: 180px;
}
#card3{
left: 270px;
}
#card4{
left: 360px;
}
#card5{
left: 450px;
}
#card6{
left: 540px;
}
#card7{
left: 630px;
}
#card8{
left: 720px
}
#card9{
left: 810px
}
#card10{
	
left: 900px
}
#card11{
left: 990px
}




#card12{
	top: 150px;
left: 90px

}

#card13{
		top: 150px;
left: 180px

}
#card14{
	top: 150px;
left: 270px
}
#card15{
	top: 150px;
left: 360px
}
#card16{
	top: 150px;
left: 450px
}
#card17{
	top: 150px;
left: 540px
}
#card18{
	top: 150px;
left: 630px
}
#card19{
	top: 150px;
left: 720px
}
#card20{
	top: 150px;
left: 810px
}
#card21{
	top: 150px;
left: 900px
}
#card22{
	top: 150px;
left: 990px
}

#modalCard1{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 10;
}
#arcanoDois{
	
	margin-top: 5px;
	margin-left: 90%;
	margin-right: 20%;
	width: 200px;
	height: 340px;
}
#msg_card{
	margin-top: 5px;
	width: 300px;
	height: 140px;
	margin-left: 90%;
	border-radius: 10px;

}
#nv_consult{

	margin-top: 15px;
	width: 40px;
	height: 40px;



}
#volta_site{

	margin-top: 15px;
	width: 60px;
	height: 60px;



}


#logo{

		margin-top: 7px;
		margin-left: -2%;
	width: 240px;
	height: 74px;
	border-radius: 10px;





}
.texto_tarot{
	margin-top: 600px;
	
}
.botao_nova_consulta{


position: absolute;
	position: fixed;
	border-radius: 0px;
	left: 58%;
top:330px;
	width: 42px;
	height: 42px;
}
.carta{
	text-align: center;
	opacity: 0.9;

	position: absolute;
	border-radius: 10px;
display: flex;
top:100px;
	width: 68px;
	height: 52px;


      
        left: 37%;
        position: fixed;
       
}
.voltasite{
	text-align: center;
	
display: flex;
	position: absolute;
	border-radius: 10px;
	position: fixed;
	left: 34%;
	
top:320px;
	width: 98px;
	height: 62px;
}






#volta_site_home{
		margin-top: 25px;
	width: 90px;
	height: 90px;
	border-radius: 0px;
	
}
.mensagem_carta{
	text-align: center;
	opacity: 0.9;
	top:200px;

	

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 478px;
	height: 172px;
}
.arcanonome{
	text-align: center;

	top:30px;
	left: 40%;

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 228px;
	height: 42px;
}


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



    body {
  	text-align: center;


	  margin: 0px;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */

  background-attachment: fixed;
  background-size: cover;
  background-image: url("../images/Mobile-Fundo.png");
	background-attachment: fixed;

	width: 100%;
	height: 100%;
	background-repeat: no-repeat;

         }


.conteudo_msg{
	margin-top: 5%;
	margin-bottom:  5%;
	margin-left:   5%;
	margin-right:    5%;
}

.nome_carta_res{
	margin-top: 6%;
	margin-bottom:  5%;
	margin-left:   5%;
	margin-right:    5%;
}

.msg_volt{
	width: 200px;
	height: 10px;
	margin-left:  -49px;


}
.msg_nova_cons{
	width: 200px;
	height: 18px;
	margin-left:  -30px;
margin-top :14%;

}
#logo{

		margin-top: 20px;
		margin-left: -2%;
	width: 300px;
	height: 96px;
	border-radius: 10px;





}
#volta_site{

	margin-top: 15px;
	width: 100px;
	height: 100px;



}

#nv_consult{

	margin-top: 15px;
	width: 70px;
	height: 70px;


}


.result{
text-align: center;
	

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 325px;
	height: 80px;
	margin: 100 auto 0 auto;
	 
}

.resultcard{
text-align: center;


	position: absolute;

	width: 170px;
	height: 283px;
	margin: 100 auto 0 auto;
	 
}
.resultmsg{

height: inherit;
	position: relative;

	margin: 0;	
	overflow: visible;
	border-radius: 10px;
	border:solid white;
	width: 750px;
	
	margin: 100 auto 0 auto;
	 
}
.resultvoltasite{
	
	text-align: center;

	position: absolute;
	width: 150px;
	height: 153px;

	margin: 100 auto 0 auto;


}

.resultnovabusca{
		text-align: center;


	position: absolute;

	width: 90px;
	height: 93px;
	margin: 100 auto 0 auto;
}
#arc{
		width: 300px;
	height: 483px;

}

#result1{
margin-top: 15%;

}
#result2{
	margin-top: 10%;
	left: 5%;

}
#result3{

top :20%;
left: -130%;
}
#result4{
top :-55%;
left: 1%;
}
#result5{
top :10%;
	left: 680%;

}









        #container{
        
 	text-align: center;
margin:  auto;

	width: 980px;
	height: 1675px;
	
	position: relative;
	margin: 1px auto;
	border-radius: 10px;
	
		display: flex;
	justify-content: center; 
	
}

header{
	height: auto;
	overflow: hidden;

}



#background{
	position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}
content{
	position: absolute;
	top: 10px;
	padding: 30px;
	
}
.texto_tarot{
	margin-top: 1040px;
	
}

.botao{
text-align: center;
	opacity: 0.9;
	font-size: 100%;

	position: absolute;
	border-radius: 10px;
	border:solid white;
	width: 508px;
	height: 152px;
}
.botao:hover{
	transform: scale(1.5);
		box-shadow: 10px #07190B;
		z-index: 10;
		perspective: 1000; 
		  transition: 1.1s;  	
  transform-style: preserve-3d;
   background-repeat: no-repeat;
}

h1{
font-family: "Century Gothic";
}
h2{
	font-family: "Century Gothic";
}
h3{
	font-family: "Century Gothic";
}
h4{
	font-family: "Century Gothic";
}
p{
	 font-size: 26px;
	 font-weight:bold;
	 font-weight: 1000px;
	color: white;
	text-align: center;
	font-weight: 900;
	font-family: "Century Gothic";
		text-align: center

}

#botao1{
top: 160px;



}
#botao2{
top: 200px;

}
#botao3{
top: 200px;


}
#botao4{
top: 400px;

}
#botao5{
top: 600px;

}
#botao6{
top: 800px;


}

#bt{
	
	

	 



}










}