/* SoccerPlayer.Cards */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,100;1,300;1,700&display=block');

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');



 
body 
	{
	font-family: "Roboto";
	font-size: 2.5vw;
	color: white;
	margin: 0;
	padding: 0;
	xbackground-image: linear-gradient(135deg, red 0%, #000044 50%, #0000bb 100%);
	background-image:url(images/backgrounds/screen_background.jpg);
	background-size: 100vw;
	}


/****************************************************************************************\
  Change this information if you want to move the logo around on the large header screen 
\****************************************************************************************/
.header_large_logo 
	{
	position: absolute;
	top: 5vw;
	left: 33vw;
	max-width: 33vw;
	height: auto;	
	z-index: 99;
	filter: drop-shadow(0px 0px 3px white);
	}
/*****************************************************************************************/

	
.header_small_logo
	{
	filter: drop-shadow(0px 0px 1px white);
	}


.3vw
	{
	font-size:3vw;
	}
	
	
.error_msg
	{
	color: red;
	text-align:center;
	filter: drop-shadow(1px 1px 0px white);
	font-size: 3.5vw;
	font-weight:bold; 
	}
	

.menu_icon
	{
	font-family:LigatureSymbols;
	font-size:15vw;
	color: white;
	filter: drop-shadow(2px 2px 2px white);
	line-height:80%;
	background: -webkit-linear-gradient(#f00,#fbb,#f00);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
		
	}
	
.gradient_gold
	{ 
	background: -webkit-linear-gradient(gold,white,gold);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	}

.gradient_green
	{ 
	background: -webkit-linear-gradient(lime,white,lime);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent; 
	}

.gradient_grey
	{ 
	background: -webkit-linear-gradient(grey,white,grey);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	}
	

.gradient_blue
	{ 
	background: -webkit-linear-gradient(cyan,white,cyan);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	}


td
	{
	font-family: 'Roboto';
	padding: 1vw;
	margin: 0;
	}
	
p
	{
	font-size:2.5vw;
	text-align:justify;
	color: #ddd;
	padding: 0;
	margin: 0;
	padding-bottom: 2vw;
	line-height: 125%;
	}
	

	

li
	{
	font-size:2.5vw;
	text-align:justify;
	margin:0 0 10px 0;  
	}


.30
	{
	color: #444;
	font-family: Roboto;
	font-weight: normal;
	font-size: 30px;
	padding: 0px;
	margin: 0;
	}	
	
a
	{
	text-decoration:none;
	color: inherit;
	}	
	



.link:hover
	{
	text-decoration:underline;
	text-decoration-color:grey;
	text-decoration-style:solid;
	}

	
	
img
	{
	max-width: 100vw;
	}	

.w50
	{
	width: 75vw;
	}

h1
	{
	font-family: 'Alfa Slab One', cursive;;
	color: red;

	background: -webkit-linear-gradient(red,white,red,white,red,white,red,white,red,white,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px black;

	font-weight: normal;
	filter: drop-shadow(2px 2px 3px white);
	font-size: 7vw;
	line-height: 110%;
	text-align: center;
	margin-left:5vw;
	margin-right:5vw;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 1vw;
	padding-top: 1vw;
	}

h2
	{
	font-family: 'Alfa Slab One', cursive;;
	color: yellow;
 
	background: -webkit-linear-gradient(red,white,red,white,red,white,red,white,red,white,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue,darkblue);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px black;
 
	font-weight: normal;
	filter: drop-shadow(2px 2px 1px white);
	font-size: 4vw;
	line-height: 110%;
	text-align: center;
	margin-left:3vw;
	margin-right:3vw;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 1vw;
	padding-top: 1vw;
	}

h3 
	{ 
	text-align: center;
	}

.menu
	{
	width:100vw;
	height:auto;
	padding: 0;
	padding-right: 2.5vw;
	padding-left: 2.5vw;
	padding-top: .3vw;
	padding-bottom: .3vw;
	margin: 0;
	overflow: hidden;
	background:black;
	color: white;
	Xposition:fixed;
	}

.header
	{
	background: black;
	color: white;
	}

.div_wide
	{
	width:85vw;
	max-width:1000px; 
	padding: 0;
	padding-right: 2.5vw;
	padding-left: 2.5vw;
	padding-top: 0;
	margin: 0;
	overflow: hidden;
	}

.div_wide>p:hover
	{
	color:#FFFF99;
	}

.eee
	{
	background:#444444;
	}

.ccc
	{
	background:#666666;
	}

.drop 
	{
	filter: drop-shadow(2px 2px 2px white);
	}	

.drop_white 
	{
	filter: drop-shadow(2px 2px 2px white);
	}	
	
.drop_black
	{
	filter: drop-shadow(2px 2px 2px black);
	}	

.menu_div
	{
	width: 100vw;
	height: auto;
	background: black; 
	color: white;
	display: none;
	}

.ribbon_text
	{
	position: relative;
	top: -8.5vw;
	left: -2.5vw;
	margin:0;
	padding: 0;
	color: white;
	text-weight: bold;
	transform: rotate(-45deg);
	background: none;
	text-align: center;
	width: 10vw;
	height: 2.1vw;
	font-size: 2vw;
	z-index: 99;
	filter: drop-shadow(2px 2px 0px black);
	}

.ribbon_overlay
	{
	position: relative;
	top: -0.45vw;
	left: -0.45vw;
	z-index: 98;
	width:10vw;
	height: 10vw;
	filter: drop-shadow(0px 0px 1px black);
	}
	




button
	{
	background:#CCFF33;
	height:4vw;
	border-radius: 5px;
	cursor:pointer;
	font-size:2.5vw;
	}

.buy_button
	{
	color:#CCFF33;
	height:5vw;
	border-radius: 5px;
	cursor:pointer;
	font-size:4.0vw;
	font-weight: bold;
	border:2px lime solid;
	padding-left: 1vw;
	padding-right: 1vw;
	}
		
.center
	{
	text-align:center;
	}
	

.small
	{
	font-size: 66%;
	}

.header_unlogged_in
	{
	position:static;
	top:0;
	left:0;
	width: 100vw;
	height: 46.7vw;
	background: black;
	background-position: top center; 
	background-size: 100%; 
	background-repeat: no-repeat; 
	background-attachment:scroll;
	text-align: center;
	display:block;
	}

.header_logged_in
	{
	padding: .5vw;
	width: 100vw;
	height: 12vw;
	background: black;
	color: white; 
	}




.table_collapsed
	{
	border-collapse:collapse; 
	_width:100vw;
	table-layout:auto;
	word-wrap:break-word;
	overflow:hidden;
	}
	
.login_box
	{
	width: 85vw;
	height: auto;
	color:#eee;
	background:#00CC33;
	border:none;
	font-size: 5vw;
	margin-left: auto;
	margin-right: auto;
	padding: 1vw;
	border-radius:1vw;
	background-image: linear-gradient(135deg, #003300 0%, #008800 50%, #003300 100%);
	}

.login_box_button
	{
	background:#CCFF33;
	height:auto;
	cursor:pointer;
	font-size:4.5vw;
	margin-top:1vw;
	border-radius:1vw;
	}

.login_input
	{
	font-size: 4vw;
	}
	
.dropdown_menu
	{
	font-size: 3vw;
	}	
	
.required_field
	{
	background: #FFFFCC;
	}
	
.login_button
	{
	position:fixed;
	z-index:999;
	top: .1vw;
	right:.1vw;
	width:auto;
	height:auto;
	border: 1px black solid;
	font-size:3vw;
	padding:.5vw;
	background:yellow;
	border-radius: 5px;
	cursor:pointer;
	}

.signup_button
	{
	position:fixed;
	z-index:999;
	top: 5.5vw;
	right:.1vw;
	width:auto;
	height:auto;
	background:#CCFF99;
	border: 1px black solid;
	font-size:2.5vw;
	padding:.5vw;
	border-radius: 5px;
	cursor:pointer;
	}
	
.back_button
	{
	position:fixed;
	z-index:999;
	top: .1vw;
	left:.1vw;
	width:auto;
	height:4vw;
	background:#CCFF99;
	border: 1px black solid;
	font-size:2.5vw;
	padding:.5vw;
	border-radius: 5px;
	cursor:pointer;
	}
	
#header table
		{ 
		border-spacing: 0;
		margin: 0;
		padding: 0;
		border-collapse: collapse;
		margin-left: auto;
		margin-right: auto;
		}
	
#header td
		{
		font-size: 2.5vw;
		border-collapse: collapse;
		}
	

.cart_item_div
	{
	height:15vw;
	width:75vw;

	background: #000;
	background-image: linear-gradient(135deg, #004 0%, #008 50%, #004 100%);
	padding: 1vw;
	margin:0;
	border:1px white solid;
	border-radius: 5px;
	filter: drop-shadow(2px 2px 2px white);
	}


#notification_line
	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 3vw;
	text-align: center;
	font-size: 1.5vw;
	}
	
/* Big radio Button for Create Card section */	
.big_radio
	{
	width: 2vw;
	height:2vw;
	}
	

.header_large_logo 
	{
	position: absolute;
	top: 5vw;
	left: 33vw;
	max-width: 33vw;
	height: auto;	
	z-index: 99;
	}