/* CSS for The Tarot School */


body { 	margin:0 }

body.white main, body.white footer { background-color: white !important; }

a {  cursor:unset; } 

a[href] { text-decoration: underline; }
a[href]:hover { cursor:pointer; color:#F00; }


div {

	font-family: Verdana,Arial,Helvetica,sans-serif;
	color: #3D3909;
	font-size: 1em;

}

.The_Tarot_School {
	display: grid;
	grid-template-columns: 1fr 5fr 5%;
	grid-template-rows: fit-content(188px) 1fr fit-content(250px);
	width:100%;
}

.The_Tarot_School > * {  }

.right_gutter{

	grid-column: 3;
	grid-row: 1 / 4;

}


nav {
	grid-column: 1;
	grid-row: 1 / 4;
}

header {
	width:100%;
	grid-column: 2 / 3;
	grid-row: 1;
}

main {
	border:2px solid #3D3909;
	border-bottom: none;
	background-color: lightcyan;
	grid-column: 2;
	grid-row: 2;
}

main.pink_bg, main.pink_bg ~ footer {

	background-color: #ffeeff !important;

}

main.peach_bg, main.peach_bg ~ footer {

	background-color: #fff5ee !important;

}

main.green_bg, main.green_bg ~ footer {

	background-color: #ccffcc !important;

}

main.yellow_bg, main.yellow_bg ~ footer {

	background-color: #ffffdd !important;

}

main.white_bg, main.white_bg ~ footer {

	background-color: #fff !important;

}

main.tarot_tips, main.tarot_tips ~ footer {

	border:0px !important;

}

footer {
	border:2px solid #3D3909;
	border-top: none;
	background-color: lightcyan;
	grid-column: 2 / 3;
	grid-row: 3;
}

.logo {

	width:100%;

 }

.logo_img {

	width: 100%;
	object-fit: contain;
	max-height: 324px;

}

.header_the_tarot_school {


}

.header_the_tarot_school_img {

	width:100%;
	object-fit: contain;
	max-height: 324px;   

}

.header_location_nav {

	color:#660066;
	font-size: 1em;

}

.header_location_nav_loc {

	color:#660066;

}

.header_location_nav_page {

	color:#996633;

}

.header_location_nav_page > a {

	color:#996633;
	text-decoration: none;

}

.header_location_nav_page > a:hover {

	color:#000033;	

}

.header_fractal {  }

.header_fractal_img {

	width:100%;
	height:10px;

}


.leftSideBar {

}

.leftnav {

	font-family: Arial,Helvetica,sans-serif;

}

.leftnav_section {

	padding-left: 20px;

}

.leftnav_link_group {

	font-weight: bold;

}

.leftnav_section_title {

	font-weight: bold;
	color:#660066;
	padding: 4px 0px;

}

.leftnav_section:first-of-type > .leftnav_section_title {

	padding: 0px 0px 4px;

}

.leftnav_link {

	padding:1px 0px;

}

.leftnav_link a {

	font-size: .7em;
	color:#996633;
	text-decoration: none;

}

.leftnav_link a:hover {

	color:#000033;

}

.leftnav_actions {

	color:#3D3909;
	font-size:.7em;

}

.leftnav_actions > * {

	text-align:center;
	padding: 0px 15px;

}


.leftnav_actions_newsletter {



}

.leftnav_actions_newsletter_text{


}

.leftnav_actions_newsletter label {

	font-weight: bold;
	color: #666;

}


.leftnav_actions_newsletter input[type="text"] {

	margin: 4px 0px 10px 0px;
	padding: 10px 4px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width:80%;

}

.leftnav_actions_newsletter input[type="text"]:focus {

	border: 1px solid #00F;
	background-color: LightGoldenrodYellow;

}

.leftnav_actions_newsletter input[type="submit"] {

	width:80%;
	margin: 4px 0px 10px;
	padding: 10px 40px;
	border: 2px solid #000;
	border-radius: 5px;
	color: #FFF;
  background: linear-gradient(to bottom, PaleGreen, green);

}

.leftnav_actions_newsletter input[type="submit"]:hover {

  background: linear-gradient(to top, PaleGreen, green);
	border: 2px solid Lime;
	color: lime;
	cursor: pointer;

}

.leftnav_actions_social { }


.leftnav_actions_social_text {


	margin-left:7px;
	font-size: .7em;

}

.leftnav_actions_social_link {  }

.leftnav_actions_social_item {

	padding-top:20px;

}

.leftnav_actions_seals {

	padding-top:20px;

}



/* THE TAROT SCHOOL MAIN */
/* THE TAROT SCHOOL MAIN */
/* THE TAROT SCHOOL MAIN */



.section { 

	padding: 20px 40px; 
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;

	}

.section > * { box-sizing: border-box; }

.section_content { 

	width:100%;
	justify-content: center;
	box-sizing: border-box;

 }

.center {

	display:block;
	margin:0 auto;

}

.fifty {

	width:50%;

}

.section_content.center { 

	text-align: center;

}

.section_content.narrow_centered {

		display:block;
		margin:0 auto;
		width:70%;

}


.italic { 

	font-style: italic;

 }


.section_content.testimonial {

	border:medium double #606;
	background-color: white;
	width:46%;
	padding:20px;
	margin:auto;

}

.content_justify_middle {

  display: flex;
  align-items: center;
  gap: 1rem;

}

.section_tarot_image {
  display: block;
  max-width: 100%;
  height: auto;
}

.content_middle_text {

  display: flex;
  flex-direction: column;
  justify-content: center;

}

.box_of_thirds {

	padding-top:20px;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;

}

.two_thirds {

	display:block;
	flex: 0 0 60%;
	max-width: 60%;

}

.two_thirds img {

	border:2px solid black;
	width:90%;

}

.one_third {

	flex: 0 0 30%;
	max-width: 30%;

}

.big_image { 

	width:100%;

}

.section_content_leftright {

  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: flex-start;

}


.section_content_leftright_outer {

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}


.section_content_leftright_inner {

  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

}

.section_content_leftright_img {

  width: 55%;
  height: auto;
  margin-right: 20px;
  border-radius: 8px;

}

.section_content_leftright_text {

	margin-top:0px;
	text-align: left;
  width: 60%;

}

:not(.section_content_leftright_outer) > .section_content_leftright_inner {

  width: 100%;

}


.section_table td {

	padding-left:40px;

}


main.width_555 .section_content {

	max-width:555px;

}

main.green {

	color:#3d3909;

}

.section_extra_link {

	display:none;

}

.section_extra_label { 

	font-size: .7em;
	color:#00F;

}

.section_extra_label:hover { 

	color:#F00;
	cursor: pointer;

}

.section_extra_link:checked ~ div { 

	display:block;

 }


.section_content_extra_content { 

	display:none;
	font-weight: normal !important;
	font-size: .7em !important;
	border:1px double; black	;
	margin:40px;
	padding:40px;

 }

.pullup_10 {

	margin-top:-10px;

}

.pullup_50 {

	margin-top:-50px;

}

.bold {

	font-weight: bold;

}

.bold_blue {

	color:#00F;
	font-weight: bold;

}

.bold_red {

	color:#F00;
	font-weight: bold;

}

.big_image { 

	width:40em;

 }

.large_image { 

	width:33em;

 }

.venti_image {

	width: 28em;

}

.medium_image { 

	width:20em;

 }

.tweedium_image { 

	width:12em;

 }


.smedium_image { 

	width:8em;

 }

.small_image { 

	width:5em;

 }


.section_image {

	float:left;
	margin-top:0px;
	margin-right: 10%;
	max-height:342px;
	max-width:197px;
	margin-right: 40px;


}

.section_tarot_image {

	float:left;
	margin-top:20px;
	margin-right: 10%;
	margin-bottom: 20px;
	width:40%;
	height:40%;
	max-height: 342px;
	max-width:197px;
	box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.2);
	border:5px solid white;
	border-radius: 20px;
	margin-right: 40px;

 }



 .calc_card {

 	display:inline;
	box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.2);
	border:5px solid white;
	border-radius: 20px;

 }

.right {

	float:right;
	margin-left: 20px;

	}	

.one_card_pair {

  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;

}

.one_card_pair > img {

  display: block;
  transform-origin: top left;
  margin-right: 0px;
  min-width:140px;

}

.two_card_pairs {

  display: flex;
  gap: 10px;
  position: relative;
  height: fit-content;
  margin-left: 0px;
  margin-top: -30px;
  margin-bottom: -20px;
	transform: scale(0.75);

}

.two_card_pairs > img {

  float: left;
  display: block;
  max-width: none;
  transform-origin: top left;
  margin-right: 0px;
  min-width:100px;

}

.two_card_pairs > img:nth-of-type(2) {

	margin-right:20px;

}

.two_card_pairs > img:nth-of-type(3) {

	margin-left:20px;

}

.section_image_plain {

	margin-top:0px;
	margin-right: 10%;
	max-height:342px;
	max-width:197px;
	margin-right: 40px;

}

.section_image_plain.right { 

	float:right;
	margin-left: 10%;

 }

.left { 

	float:left;
	margin-right:20px;

 }

.little,
.warning_img,
.qa_a {

	float:left;
	width:30px;
	height:30px;
	margin-top:-5px;
	padding-bottom:0px;
	padding-right:10px;

}

.diamonds_red_gold_alt li {

	list-style: none;
	padding-left: 30px;
	background-repeat: no-repeat;
	background-position: 0 5px;
	background-size: 20px 20px;
	min-height: 24px;
	line-height: 1.4;
	padding-bottom:20px;

	}

.diamonds_red_gold_alt li:nth-child(odd) {

	background-image: url('/images/DiamondGold.gif');

}

.diamonds_red_gold_alt li:nth-child(even) {

	background-image: url('/images/DiamondRed.gif');

}


.section_image_header_center {

	text-align:center;
	width:70%;
	height:70%;
	max-height: 149px;
	max-width:750px;
	display:block;

}

.section_text { 

	width:100%;

}

.section_text.center {

	text-align: center;
	width:100%;

}

.indent {

	margin-left:20px;

}

.ear_listen_image {

	float:left;
	vertical-align: middle;
	height:66px;
	width:66px;
	margin-right:20px;

}

.audio_player {

	display:;

}


.section_intro { 

	font-size: 1.3em;
	font-weight: bold;

}

.section_tarot_name {

	font-size: 1.3em;
	font-weight: bold;

 }

.section_we_recommend_list {

	list-style: none;
	padding-left: 0px;

}

.section_we_recommend_list,
.section_list_green_gem,
.section_list_blue_gem,
.section_list_amber_gem,
.section_list_red_gem {

	left:20px;
	margin-bottom:1em;
	position:relative;

}

.section_we_recommend_list > li,
.section_list_green_gem > li,
.section_list_blue_gem > li,
.section_list_amber_gem > li,
.section_list_red_gem > li {

	padding-bottom:1em;

}

.section_list > ul > ul > li:last-of-type  {

	padding-bottom:0 !important;
}

.section_list > ul.pairs li:nth-child(even) {

    padding-bottom: 2em;

}

.section_list > ul.triplets li:nth-child(3n) {

    padding-bottom: 2em;

}


.section_list_green_gem {

    list-style-image: url('/images/GemGreen.gif');
    padding-left: 20px;

}

.section_list_blue_gem {

    list-style-image: url('/images/GemBlue.gif');
    padding-left: 20px;

}

.section_list_amber_gem {

    list-style-image: url('/images/GemAmber.gif');
    padding-left: 20px;

}

.section_list_red_gem {

    list-style-image: url('/images/GemRed.gif');
    padding-left: 20px;

}


.section_callout { 

	text-align: center;
	width:100%;
	font-size: 1.3em;
	line-height: 2.5em;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 8px;

}


.section_anchor { }

.section_divider { 

	border: 0px;
	height:30px;

}

.section_divider.black { 

	border:1px solid black;
	height:0px;
	margin-left:40px;
	margin-right:40px;

 }

.section_content .calc_label {

	padding-left:20px;
	padding-right:10px;
}

.top_link { padding: 40px; }


.section_diamond { }

.section_we_recommend { }

.section_we_recommend_text { }

.section_we_recommend_list { }

.section_we_recommend_list_item { }

.section_we_recommend_gem { }

.section_we_recommend_link { }


.footer { }

.footer_sitelinks {

	padding:0 10%;
	width:100%;
	text-align: center;
	box-sizing: border-box;

}

.footer_sitelinks_text {

	left:40px;
	position: relative;
	font-weight: bold;
	margin-bottom:50px;

}

.footer_sitelinks_list {

	list-style: none;
	padding: 0;
	margin: 0;

}

.footer_sitelinks_list > li {

	display: inline-block;
	margin-right: 10px;

}

.footer_sitelinks_list_link {  }

.footer_copyright {

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;

}

.footer_copyright > * {

	padding-top:0px;
	width:77%;
	font-style: italic;

}

.footer_copyright_usgames { 

	padding-top:30px;
	font-size:.9em;

}

.footer_copyright_tarotschool { 

	font-size:1.1em;

}




/* PAGE STYLES */


/* index.html */

.section_welcome {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	width: 100%;

}

.section_welcome_intro {

	width: 70%;
	font-style: italic;
	text-align:center;

	}

.section_welcome_hero_text {

	width: 70%;
	font-size: 1.6em;
	text-align:center;
	font-weight:bold;
	color: #660066 !important;
 }

.section_welcome_subheader {

	width: 60%;
	font-size: 1.2em;
	text-align:center;
	font-weight:bold;

}

.section_welcome_hero_img {

	box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.2);
	border-radius: 5% 10%;

}

/* TOFU BURGER MENU */

#tofu_burger_checkbox,
.tofu_burger_checkbox_label { 

	display:none; 

}

.footer_actions {

	display:none;

}



/* MOBILE && NARROW SCREEN STYLES  */
/* MOBILE && NARROW SCREEN STYLES  */
/* MOBILE && NARROW SCREEN STYLES  */


@media (max-width: 699px) {

	header {

		background-color: white;

	}

	body {

		background-color: lightcyan;

	}

	.tofu {

		z-index: 99;
		display: block;
		position:fixed;
		top: 25px;
		left: 5px;
		width:50px;
		height:50px;

	}

	.tofu label {

		display: block;
		position: absolute;
		font-size: 2em;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 5px;
		padding:0px;
		margin:0px;
		height:50px;
		width:30px;
		border:2px solid indigo;

	}

	#tofu_burger_checkbox {

		display:none;

	}

	input[id='tofu_burger_checkbox']:not(:checked)+ label ~ .tofu_burger {

	    left: -700px;

	}

	input[id='tofu_burger_checkbox']:checked + label {

	    color: #CCC;

	}

	.tofu_burger {

		left:-5px;
		top:63px;
		border-right:2px solid indigo;
		border-top:2px solid indigo;
		border-bottom:2px solid indigo;
		position:absolute;
		background-color: white;
		opacity:.9;
		text-align: left;
		width: calc(100vw);
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		box-sizing: border-box;
		flex-wrap: wrap;
  	transition: left 1s 500ms;

	}

	.tofu_burger > div {

		display: block;
		position:relative;
		width: 136px;
		padding:2px;

	}

	.tofu_burger > div:nth-of-type(3) {

		order:1;

	}

	.leftnav_section_title{

		margin-left: 10px;
		font-size:.7em;

	}

	.leftnav_link_group {

		margin-left: 20px;
		line-height: 1.2em;

	}


	.The_Tarot_School {

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: fit-content(188px) 1fr fit-content(250px);
		width:100%;

	}

	.logo {

		display:none;

	}

	.right_gutter{

		display:none;

	}


	.header_location_nav {

		padding-left:10px;

	}


	main {

		border: none;
		background-color: transparent !important;
		position:relative;
		background-size: 195px 324px;
		background-position: top 0px center;
		
	}

	.section_tarot_name {

		width: 100%;
		left:-10px;
		position: relative;

	}


	.top_link {

		margin-top:-40px;
		position:absolute;
		right:20px;

	}


	.section_content > .section_tarot_name > .section_anchor::after {

		content: " ";
		display:inline-block;
		position:relative;
		left:10px;
		height:13px;
		width:14px;
		background-image:		
			url('/images/purplediamond2.gif');

	}

	section.section:nth-of-type(2) > .section_content > .section_intro > .section_anchor::after,
	section.section:nth-of-type(3) > .section_content > .section_intro > .section_anchor::after {

		background-image: none;

	}

	.section_intro {

		width:100%;
		padding:10px;

	}

	.section_content {

		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.section_tarot_image {

			float:none !important;

	}

	.section_tarot_image:not(.right) {

		float:right;
		margin-left: 10%;

	}

	.section_content {

		width:100%;
		margin:0 2.5%;
		text-align: center;

	}

	.section_table td {
	
		text-align: left !important;

	}	

	.section_text {

		font-size:1.4em;

	}

	.section_we_recommend_list,
	.section_list_green_gem,
	.section_list_blue_gem,
	.section_list_amber_gem,
	.section_list_red_gem {

		left:0px !important;
		margin-bottom:1em;
		list-style-position: inside;

	}

	.one_third {
		
		max-width: 100% !important;
		border:1px solid blue;
		width:100% !important;

	}

  .section_content_leftright_outer {

    display: flex;
    justify-content: center;
    align-items: center;

  }

  .section_content_leftright_inner {

    width: 90%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .section_content_leftright {

    flex-direction: column;
    align-items: center;

  }

  .section_content_leftright_img {

		width:55%;
    margin-right: 0;
    margin-bottom: 10px;

  }

  .section_content_leftright_text {
    width: 100%;
    text-align: center !important;
  }


.two_card_pairs {

		display: flex;
		gap: 10px;
		position: relative;
		height: fit-content;
		margin-left: 0px;
		margin-top: -30px;
		margin-bottom: -20px;
		transform: scale(0.75);

	}

	.two_card_pairs > img {

	  float: left;
	  display: block;
	  max-width: none;
	  transform-origin: top left;
	  margin-right: 0px;
	  min-width:100px;
		margin-left: 0 !important;

	}

	.two_card_pairs > img:nth-of-type(2) {

		margin-right:20px;

	}

	.two_card_pairs > img:nth-of-type(3) {

		margin-left:20px;

	}

	.section_content.testimonial {

		width:90%;

	}

	.section_we_recommend_list_item {

		left: 0px !important;

	}

	.register { 

		display:block;
		margin-left: auto;
		margin-right: auto;

 	}

	.footer_sitelinks {

		padding:0px 10px;

	}

	footer {

		padding-top:30px;
		border-left: 0px;
		border-right: 0px;
		border-bottom: 0px;
		border-top:2px solid black;
		background-color: lavenderblush;

	}

	.section_callout { 

		text-align: center;
		width:100%;
		font-size: 1.3em;
		line-height: 1.5em;
		font-weight: bold;
		text-decoration: none;
		text-underline-offset: unset;

	}

	.section_content_special {

		padding-top:20px;	
		float:none !important;
		margin-left:0px !important;
		text-align: center !important;

	}

	.leftnav_actions {

		display:none;

	}

	.footer_actions {

		text-align: center;
		position:relative;
		display:block !important;

	}

	.footer_actions .leftnav_actions_newsletter {

		padding:0px 10%;		

	}

}