.submitGopher {
	color: black;
	font-weight: bold;
	border-width: 2px;
	border-style: solid;
	border-color: orange;
	border-radius: 10px;
	font-weight:bold;
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,.6);
	background-size: 400% 400%;
	/* silver */
	/*
	background-image: linear-gradient(
		-90deg, 
		rgba(208,206,206,1) 0%, 
		rgba(242,242,242,1) 33%,
		rgba(208,206,206,1) 66%
	);
	*/
	/* GOLD */
	background-image: linear-gradient(
		-90deg, 
		rgba(184,166,14,1) 0%, 
		rgba(241,219,33,1) 15%,
		rgba(198,179,18,1) 85%
	);
	animation: AnimateBackTitle 6s ease infinite;
	padding:3px;
	text-align:center;
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,.6);
}

.submitGopher:hover {
	background: orange;
	border: 2px solid black;
}

.gopherWrap {
	background: transparent;
	min-height:635px;
	width: 100%;
	min-width:340px;
	max-width: 1200px;
	display: inline-block;
	padding: 0px;
	padding-top: 0px;
	position:relative;
	margin:0px;
	z-index:999;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 335px;
  height: 560px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: 0px auto 0px auto;
  padding: 0px;
  z-index:999;
  position: relative;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  /*display:block;*/
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  background:transparent;
  margin:0px;
  padding:0px;
  z-index:999;
}

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card.hover .flip-card-inner, .flip-card-float.hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 325px;
  height: 550px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 10px;
  border: 2px solid orange;
  /*box-shadow: 0px 0px 5px rgba(245,135,209,1);*/
  box-shadow: 1px 1px 10px rgba(0,0,0,1);
  z-index:999;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	background-color: transparent;
	color: black;
	background-image: linear-gradient(
		-90deg,
		/*
		rgba(139,246,134,.5) 0%, 
		rgba(245,135,209,.5) 33%, 
		rgba(245,63,185,.5) 66%
		*/
		/*
		rgba(139,246,134,.7) 0%, 
		rgba(121,159,211,.8) 20%,
		rgba(58,80,134,.9) 90%
		*/
		rgba(139,246,134,.8) 0%, 
		rgba(245,135,209,.8) 33%,
		rgba(58,80,134,.8) 90%
	);

	background-size: 600% 600%;

	-webkit-animation: AnimateBG1 6s ease infinite;
	-moz-animation: AnimateBG1 6s ease infinite;
	-o-animation: AnimateBG1 6s ease infinite;
	animation: AnimateBG1 6s ease infinite;
	transform: rotateX(0deg);
}


/* Style the back side */
.flip-card-back {
	background-color: transparent;
	color: black;
	transform: rotateY(180deg);
	/*background-image: linear-gradient(
		-90deg, 
		rgba(245,63,185,.5) 0%, 
		rgba(245,135,209,.5) 33%, 
		rgba(245,63,185,.5) 66%
	);
	*/
	background-image: linear-gradient(
		-90deg, 
		/*
		rgba(139,246,134,.5) 0%, 
		rgba(245,135,209,.5) 33%, 
		rgba(245
		/*
		rgba(139,246,134,.7) 0%, 
		rgba(121,159,211,.8) 20%,
		rgba(58,80,134,.9) 90%
		*/
		rgba(139,246,134,.5) 0%, 
		rgba(245,135,209,.5) 33%,
		rgba(58,80,134,.5) 90%
	);
	
    background-size: 600% 600%;

    -webkit-animation: AnimateBG1 6s ease infinite;
    -moz-animation: AnimateBG1 6s ease infinite;
    -o-animation: AnimateBG1 6s ease infinite;
    animation: AnimateBG1 6s ease infinite;

}
@-webkit-keyframes AnimateBG1 {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}

	
	/*
	10% {box-shadow: 0px 0px 7px rgba(139,246,134,1);}
	50% {box-shadow: 0px 0px 7px rgba(245,135,209,1);}
	*/
}
@-moz-keyframes AnimateBG1 {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}

	
	/*
	10% {box-shadow: 0px 0px 7px rgba(139,246,134,1);}
	50% {box-shadow: 0px 0px 7px rgba(245,135,209,1);}
	*/
}
@-o-keyframes AnimateBG1 {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}

	
	/*
	10% {box-shadow: 0px 0px 7px rgba(139,246,134,1);}
	50% {box-shadow: 0px 0px 7px rgba(245,135,209,1);}
	*/
}
@keyframes AnimateBG1 {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}

	
	/*
	10% {box-shadow: 0px 0px 7px rgba(139,246,134,1);}
	50% {box-shadow: 0px 0px 7px rgba(245,135,209,1);}
	*/
}

.gopherimg {
	width: 305px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #000;
	margin-top: 5px;
	border: 1px solid black;
	background: orange;
}
.gopherimg_sm {
	width: 140px;
	border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: 0px 0px 7px black;
	background: orange;
}

.frontTitle {
	margin: 5px 65px 5px auto;
	background: #eee;
	border-radius: 0px 15px 15px 0px;
	box-shadow: 1px 1px 2px #000;
	background-size: 300% 300%;
	background-image: linear-gradient(
		-90deg, 
		rgba(208,206,206,1) 0%, 
		rgba(242,242,242,1) 33%,
		rgba(208,206,206,1) 66%
	);
	animation: AnimateBackTitle 8s ease infinite;
	width: 160px;
	padding: 0;
	float:right;
	font-weight: bold;
	text-align:right;
	font-size: 1.2em;
}
.frontLevel {
	margin: 5px auto 5px 0px;
	background: rgba(222,109,8,.8);
	border-radius: 0px 0px 0px 0px;
	box-shadow: 1px 1px 2px #000;
	background-size: 300% 300%;
	/*
	background-image: linear-gradient(
		-90deg, 
		rgba(208,206,206,1) 0%, 
		rgba(235,235,235,1) 33%, 
		rgba(208,206,206,1) 66%
	);
	*/
	/*
	animation: AnimateBackTitle 3s ease infinite;
	*/
	width: 100px;
	padding: 0;
	float:left;
	font-weight: bold;
	font-size: 1.2em;
	position: relative;
	z-index: 9;
}
.frontLevel:after {
	border-radius: 5px;
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: ;
	bottom: 0;
	width: var(--barlength);
	left: 0;
	background: #EBCA65;
	background-image: linear-gradient(
		-90deg,
/*		
		rgba(228,172,48,1) 0%, 
		rgba(245,223,127,1) 33%, 
		rgba(255,251,192,1) 66%
		*/
		rgba(139,246,134,.7) 0%, 
		rgba(121,159,211,.8) 20%,
		rgba(58,80,134,.9) 90%
	);
}
.frontdescription {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	padding: 5px;
	width:307px;
	height: 185px;
	background:orange;
	text-align:left;
	padding: 3px;
	border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	box-shadow: 1px 1px 5px #000;
	
}
.backLogo {
	width:100%;
	margin-bottom: 10px;
}
.backGopher {
	float:left;
	width:170px;
	border-radius: 5px;
	/*box-shadow: 1px 1px 10px #000;
	border: 1px solid orange;
	*/
	margin-bottom: 15px;
	margin-left: 10px;
}
.backTitle {
	background: #eee;
	border-radius: 15px;
	box-shadow: 1px 1px 2px #000;
	margin-top:5px;
	background-size: 300% 300%;
	background-image: linear-gradient(
		-90deg, 
		rgba(208,206,206,1) 0%, 
		rgba(242,242,242,1) 33%,
		rgba(208,206,206,1) 66%
	);
	animation: AnimateBackTitle 3s ease infinite;
	display: inline-block;
	min-width:130px;
}
.backGenInfo {
	background:#ddd;
	margin-top:3px;
	border-radius: 5px;
	border: none;
	background-image: linear-gradient(
		-180deg, 
		rgba(225,225,225,1) 0%, 
		rgba(200,200,200,1) 80%
	);
	font-size: .8em;
	box-shadow: 1px 1px 2px #000;
	display: inline-block;
}

@keyframes AnimateBackTitle { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


.backstats {
	margin-left: auto;
	margin-right: auto;
	font-size:.8em;
}

.backtraits {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	font-size:.8em;
}

.attrlabel {
	background: orange;
	border-radius: 5px;
	padding: 3.5px;
}

.attrval {
	background: white;
	border-radius: 5px;
	padding: 3.6px;
}

#gopherChkDiv {
	margin-left:15px;
	position:relative;
	display:block;
	background:lightblue;
	text-align:center;
	width:120px;
	color:black;
	text-align:center;
	padding:0px;
	border:1px solid orange;
	border-radius: 10px 10px 0px 0px;
	box-shadow:1px 1px 5px black;
	z-index:0;
}


.txhistory{
	margin-top: 15px;
	border-radius: 5px;
	margin-left:auto;
	margin-right:auto;
	/*background:rgb(255, 255, 255, .2);*/
	border-radius: 5px;
	box-shadow: 1px 1px 5px #000;
	border: 2px solid orange;
	width: 350px;
	background-image: linear-gradient(
		-45deg, 
		/*
		rgba(139,246,134,.7) 0%, 
		rgba(245,135,209,.8) 65%, 
		rgba(245,63,185,.9) 80%
		*/
		rgba(139,246,134,.7) 0%, 
		rgba(121,159,211,.8) 20%,
		rgba(58,80,134,.9) 90%
	);
}

.txhistory .txHistoryHeader {
	border:1px solid orange;
	background: rgb(255,255,255,.4);
}

.txhistory td{
	background:rgb(255,255,255, 1);
}