/* ------- NEW ADDED BEGIN ------- */

#tarotonline_result #tarot table tbody tr td {
vertical-align: middle;
padding: 4px 4px;
}

#tarotonline_result #tarot > div:nth-child(2) > table:nth-child(5) p {
margin: 0 0 1.7em 1.7em;  /* margin in second table (interpretation of cards) - without card of the day  */
}

#tarotonline_result #tarot > div:nth-child(2) > table:nth-child(5) td {
vertical-align: top;
}

#tarotonline_result #tarot .spread3 .positions p, #tarotonline_result #tarot .spread3 .positions1 p {
margin: 0 0 1.7em 1.7em;   /* margin in second table (interpretation of cards) - card of the day only (x2) */
}

#tarotonline_result p,  #tarotonline_result .positions,  #tarotonline_result .positions1 {
font-size: 1rem;
line-height: 1.7;
text-align: left;
-webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
 user-select: none; /* Standard syntax */
}

#tarotonline_result {
position: relative;
padding: 35px 0;
}

#tarotonline_result .calcinfo p {
line-height: 1.7em;
margin: 1.7em 0;
}

#tarotonline_result .spread-wrapper { /* for celtic cross */
position: relative;
display: flex;
width: 100%;
height: 729px;
align-items: start;
justify-content: center;
}

#tarotonline_result .spread-wrapper2 { /* for other spreads */
 display: flex;
width: 100%;
align-items: start;
justify-content: center;
}

#tarotonline_result .spread4 table, #tarotonline_result .spread7 table, #tarotonline_result .spread8 table, #tarotonline_result .spread9 table {
margin-bottom: 0;
}

#tarotonline_result #tarot .spread3 table tbody tr td {
vertical-align: top;
}

/* ------- NEW ADDED END ------- */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-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;
animation-fill-mode:forwards;
 
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
animation-duration:2s;
    
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.fade-in.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
 
.fade-in.two {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
 
.fade-in.three {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}

.fade-in.four {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}

.fade-in.five {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}

.fade-in.six {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}

.fade-in.seven {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}

.fade-in.eight {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}

.fade-in.nine {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
animation-delay: 9s;
}

.fade-in.desc {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}

.crossing_card {
position: absolute; 
top: 38.5%; 
left: 26%; 
z-index: 1;
border-radius: 10px;
border: 5px solid #fff; 
webkit-transform: rotate(90deg); 
moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg);
pointer-events: none;
}

.positions p {
font-weight: bold;
color: #bd1550;
font-family: "Lora", serif;
}

/*----------- different wrappers for spreads * spread - celticcross absolute * spread4 - 3 cards 350px in a row, no smaller version * spread7 - 4 cards 470px in a row, smaller version exists  * spread8 = 5 cards in a row * spread9 = 6 cards in a row ------------*/

.spread {
position: absolute; 
z-index: 2;
}

.spread4, .spread7, .spread8, .spread9 {
z-index: 2;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
		
.tooltip-wrap {
position: relative;
}

.tooltip-wrap:active {
z-index: 2;
}

.tooltip-wrap2 {
position: relative;
}

/**** tooltip opis srodek *****/

.tooltip-wrap .tooltip-content {
  display: block;
  color: #000;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  border-radius: 10px;
  opacity: 0.0;
  padding: 3.5px;
  width: 100px;
  height: 154px;
  z-index: 10;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tooltip-wrap:active .tooltip-content {
opacity: 0.95;
}

#tarotonline_result .tooltip-wrap .tooltip-content .cardtitle p, #tarotonline_result .tooltip-wrap .tooltip-content2 .cardtitle p, #tarotonline_result .tooltip-wrap .tooltip-content3 .cardtitle p {
font-weight: bold;
font-style: normal;
font-size: 10px;
font-family: "Lora", serif;
text-align: left;
color: #bd1550;
}

.tooltip-content span.whatsaboutcard {
color: #c00000;
}

#tarotonline_result .tooltip-wrap .tooltip-content p {
margin: 5px 0;
font-style: oblique;
font-weight: normal;
text-align: left;
font-size: 9px;
line-height: 1.3;
padding: 0 5px;
}

.tooltip-wrap .tooltip-content p::after {
content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 1.4em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 98%);
  }
 
/**** tooltip opis karta 90deg *****/

.tooltip-wrap .tooltip-content2 {
display: block;
color: #000;
position: absolute;
left: -30%;
top: 100%;
background-color: #fff;
border-radius: 10px;
opacity: 0.0;
padding: 3.5px;
width: 154px;
height: 100px;
border: dotted 5px #ccc;
z-index: 10;
text-overflow: ellipsis;
overflow: hidden;
}

.tooltip-wrap:active .tooltip-content2 {
opacity: 0.95;
}

.tooltip-content2 span.whatsaboutcard {
color: #c00000;
}

#tarotonline_result .tooltip-wrap .tooltip-content2 p {
margin: 5px 0;
font-style: oblique;
font-weight: normal;
text-align: left;
font-size: 9px;
line-height: 1.3;
padding: 0 5px;
}

/**** partnerski wynik i korzen ****/

.tooltip-wrap .tooltip-content3 {
display: block;
color: #000;
position: absolute;
left: 60px;
top: 0;
background-color: #fff;
border-radius: 10px;
opacity: 0.0;
padding: 3.5px;
width: 100px;
height: 154px;
z-index: 10;
text-overflow: ellipsis;
overflow: hidden;
}

.tooltip-wrap:active .tooltip-content3 {
 opacity: 0.95;
}

.tooltip-wrap .tooltip-content3 .cardtitle p {
font-weight: bold;
font-style: normal;
font-size: 10px;
font-family: "Lora", serif;
text-align: left;
}

.tooltip-content3 span.whatsaboutcard {
color: #c00000;
}

#tarotonline_result .tooltip-wrap .tooltip-content3 p {
margin: 5px 0;
font-style: oblique;
font-weight: normal;
text-align: left;
font-weight: normal;
font-size: 9px;
line-height: 1.3;
padding: 0 5px;
}

/*--------------------------------*/

#tarotonline_result table tbody tr td img.tarotsmall {
border: 5px solid #fff; 
border-radius:10px; 
width: 100px; 
height: 152px !important;
max-width: none;
-webkit-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
}
	
#tarotonline_result #tarot .tarotsmall2 {
width: 100px; 
height: 152px;
margin-bottom: -3px;
}
	
.diffshadow {
-webkit-box-shadow: 5px -5px 2px 0px rgba(76,76,76,0.5) !important;
-moz-box-shadow: 5px -5px 2px 0px rgba(76,76,76,0.5) !important;
box-shadow: 5px -5px 2px 0px rgba(76,76,76,0.5) !important;
}
	
#tarotonline_result table tbody tr td img.tarotbig {
max-width: none;
width: 250px;
height: 380px !important;
border: 12px solid #fff; 
border-radius:10px;
-webkit-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
}

.positions1 a {
color: #000066;
text-decoration: none;
}

.positions1 a:hover {
text-decoration: underline;
}

#tarotonline_result .readerslink p {
text-align: center;
margin-bottom: 1.7em;
padding-left: 0;
}

.starscut {
width: auto;
}

.starscut img {
width:13px;
height: 13px;
}

.readerslink .ahabutton {
margin-top: 1.7em;
}
		
.spread7 h3, .spread8 h3, .spread9 h3 {
color: #bd1550;
font-family: "Lora",serif;
font-size: 15px;
font-weight: bold;
}

#tarotonline_result .spread9 h3 {
margin-bottom: 0;
margin-top: 0.4em;
}

#tarotonline_result .spread7 h3 {
margin-top: 0;
margin-bottom: 0;
}

#tarotonline_result .spread8 h3 {
margin-top: 0;
}

.spread strong {
color: #000066;
}

body #tarot {
width: 100%;
}

.readerslink {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

body #tarot  table {
width: 100%;
}

/*----------- 3 cards -------------------*/

	
.spread2 {
margin-top: 35px;
width: 100%;
}

.spread2 hr {
border: medium none;
height: 1px;
background: #e6e6e6 none repeat scroll 0 0;
}

/*----------- Card of the day -------------------*/

.spread3 {
margin-top: -35px;
}

.spread3 hr {
border: medium none;
height: 1px;
background: #e6e6e6 none repeat scroll 0 0;
}

/*----------- Celtic cross -------------------*/

.spread1 hr {
border: medium none; height: 1px;
background: #e6e6e6 none repeat scroll 0 0;
}

/*----------- Decision -------------------*/

.spread5 {
margin-top: 35px;
}

.spread5 hr {
border: medium none; height: 1px;
background: #e6e6e6 none repeat scroll 0 0;
}

/*----------- Relationship -------------------*/
	
.spread6 {
margin-top: 35px;
}

.spread6 hr {
border: medium none; height: 1px;
background: #e6e6e6 none repeat scroll 0 0;
}

/*----------- Daily horoscope -------------------*/

.horoscope-text { 
font-weight: bold;
color: #bd1550;
font-family: "Lora", serif;
text-align: left;
}

hr.spread3-alt-hr {
margin: 1.7em 0;
}

/*----------- Runes online -------------------*/

.yesnotext { 
	font-weight: bold;
	color: #bd1550;
	font-family: "Lora", serif;
	text-align: center;
	margin-top: 0;
	}
	
.revcard {
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
-ms-transform: rotate(180deg); 
transform: rotate(180deg);
margin-top: -7px;
}

.revcard2 {
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
-ms-transform: rotate(180deg); 
transform: rotate(180deg);
}

.shadownormal { 
-webkit-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
box-shadow: 5px 5px 2px 0px rgba(76,76,76,0.5);
}

.shadowrev {
-webkit-box-shadow: -5px -5px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: -5px -5px 2px 0px rgba(76,76,76,0.5);
box-shadow: -5px -5px 2px 0px rgba(76,76,76,0.5);
}

.runessmall {
border: 5px solid #fff; 
border-radius:10px; 
width: 100px; 
height: 152px;
}
		
#tarotonline_result table tbody tr td img.runesbig {
max-width: none;
width: 250px;
height: 380px;
border: 12px solid #fff; 
border-radius:10px;
}
	
/*----------- How to -------------------*/

/*----------- Numerology - calc -------------------*/

.calc {
width: 100%;
border: none;
border-collapse: collapse;
line-height: 1.4;
margin-bottom: 1.7em;
}

#tarotonline_result #tarot table.calc tbody tr td {
padding:1em 0.5em;
text-align: center;
vertical-align: middle;
}

.calc caption {
font-weight:700;
text-align:left;
}

.calc .numdesc {
font-size: 11px;
font-style: oblique;
}

/*----------- Wrozby online Lenormand -------------------*/

/*----------- Different resolutions -------------------*/

@media screen and (max-width: 960px) {
	
body{
-webkit-text-size-adjust: none;
}

#form-left {
display: none;
}

}

@media screen and (max-width: 820px) {
	
 .linksall {
text-align: center;
}
	
/*
body {
background-color: lightblue;        
}
*/

}

@media screen and (max-width: 640px) {
	
#tarotonline_result table tbody tr td img.tarotbig {
width: 100px; 
height: 152px !important; 
border: 5px solid #fff; 
}
	
#tarotonline_result table tbody tr td img.runesbig {
width: 100px; 
height: 152px; 
border: 5px solid #fff; 
}

.positions1 { 
padding-bottom: 0;
}
	
.linksall {
width: 50%; 
}
	
#tarotonline_result .spread8 .tarotsmall, #tarotonline_result .spread9 .tarotsmall  {
border: 2px solid #fff; 
border-radius: 5px; 
width: 50px; 
height: 76px !important;
-webkit-box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
}

#tarotonline_result #tarot > div:nth-child(2) > table:nth-child(5) {
margin-top: -1em; /* second table in spreads (except card of day) up to get equal margin (when the cards get smaller) */
margin-bottom: -1em;
}

#tarotonline_result #tarot table.release-padding tbody tr td {
padding: 1em 1px;
}

/*
body {
background-color: lightgoldenrodyellow;
}
*/

}

@media screen and (max-width: 480px) {
	
#tarotonline_result .spread7 .tarotsmall, #tarotonline_result .spread .tarotsmall  {
border: 2px solid #fff; 
border-radius: 5px; 
width: 50px; 
height: 76px !important;
-webkit-box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
-moz-box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
box-shadow: 2px 2px 2px 0px rgba(76,76,76,0.5);
}
	
#tarotonline_result #tarot .tarotsmall2 {
width: 50px; 
height: 76px;
margin-bottom: -3px;
}
	
.diffshadow {
box-shadow: 2px -2px 2px 0 rgba(76, 76, 76, 0.5) !important
}
	
.crossing_card {
border: 2px solid #fff;
border-radius: 5px;
top: 39%;
}

.tooltip-wrap .tooltip-content2 {
left: -50%;
}

.tooltip-wrap .tooltip-content3 {
left: 29px;
}
	
#tarotonline_result .spread-wrapper {
height: 401px;
}

/*
body {
background-color: lightgreen;
}
*/
	
}