@font-face {
  font-family: Righteous;
  src: url(Righteous-Regular.ttf);
}

@font-face {
	font-family: WaterBrush;
	src: url(WaterBrush-Regular.ttf);
}

* {
   font-family: Righteous;
   margin: 0px;
   padding: 0px;
}

body {
    background-image: linear-gradient(to bottom right, #ccc, #a8bfe2);
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: 100% 100%;
    margin: 0px;
    padding: 0px;
}


.top {
	position: relative;
	width: 100%;
	height: 100px;
  	background-image: linear-gradient(to bottom right, #000, #ccc);
}


.header {
    width: 100%;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.footer {
    background-image: linear-gradient(to bottom right, #fff, #ccc);
    color: #3a68ad;
    font-size: 14px;
    vertical-align: center;
    position:fixed;
    bottom: 0;
    width: 100%;
}

.headlogo {
    height: 60px;
    vertical-align:middle;
}

.smallheadlogo { 
    height: 35px;
    vertical-align:middle;
}

table.header {
    height: 55px;
    vertical-align:middle;
}

.icon {
    height: 50px;
}

.icon-phone {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/phoneicon.png");
    background-size: 50px 50px;
}

.icon-phone:hover {
    background: url("https://jerseygrid.com/images/phoneiconhover.png");
    background-size: 50px 50px;
}

.icon-jerseygrid {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/jerseygridlogo.png");
    background-size: 50px 50px;
}

.icon-jerseygrid:hover {
    background: url("https://jerseygrid.com/images/jerseygridlogohover.png");
    background-size: 50px 50px;
}

.icon-email {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/emailicon.png");
    background-size: 50px 50px;
}

.icon-email:hover {
    background: url("https://jerseygrid.com/images/emailiconhover.png");
    background-size: 50px 50px;
}

.icon-email-nav{
    display: inline-block;
    height: 22px;
    width: 22px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/emailicon.png");
    background-size: 22px 22px;
}

.icon-email-nav:hover {
    background: url("https://jerseygrid.com/images/emailiconhover.png");
    background-size: 22px 22px;
}


.icon-facebook {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/facebooklogo.png");
    background-size: 50px 50px;
}

.icon-facebook:hover {
    background: url("https://jerseygrid.com/images/facebooklogohover.png");
    background-size: 50px 50px;
}


.icon-instagram {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align:middle;
    background: url("https://jerseygrid.com/images/instagramlogo.png");
    background-size: 50px 50px;
}

.icon-instagram:hover {
    background: url("https://jerseygrid.com/images/instagramlogohover.png");
    background-size: 50px 50px;
}

.nav {
    background-image: linear-gradient(to bottom right, #fff, #ccc);
    color: #3a68ad;
    font-size: 20px;
    vertical-align: center;
}

.navbutton {
    background-color: #3a68ad;
    color: #ffffff;
    font-size: 18px;
    height: 35px;
    width: 200px;
    border-radius: 25px; 
}

.navbutton:hover {
    background-color: red;
    cursor: pointer;
}


.main {
    //background-color: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
}


a.title {
    color: #ffffff;
    text-decoration: none;
}

a.title:hover {
    color: #ffffff;
     text-decoration: none;
}

a.title:active {
    color: #ffffff;
     text-decoration: none;
}


a {
    color: #3a68ad;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

a:active {
    color: navy;
    text-decoration: none;
}

.show {
    width: 900px;
}

.desc {
    font-family: Arial;
    width: 100%;
}

th.desc {
    text-align: right;
}

td.margin {
    width: 50px;
}

dl {
    font-family: Arial;
}


dt {
    font-family: Arial;
    font-weight: bold;
    text-decoration: underline;
    margin: 0;
}

.right-content {
    font-size: 20px;
    vertical-align: top;
}

dd {
    font-family: Arial;
    padding: 0 0 0 20px;
    font-weight: normal;
}

.strike {
    font-weight: normal;
    text-decoration: line-through;
}

.changingText {
  position: relative;
  //height: 50px;
  width: 100%;
  //display: block;
  margin: 20px auto;
  //background: #D45798;
  text-align: center;
}

.content {
  width: 100%;
  text-align: center;
}

.textDiv {
  position: absolute;
  //margin: 0 auto;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}

.opc {
  opacity:0;
}

h1.text1 {
    font-size: 35px;;
}

.formcol {
    text-align: right;
    vertical-align: top;
}

.formfield {
    font-family: times;
    font-size: 18px;
}


td.capcol {
    background-image: linear-gradient(red, blue);
    color: #fff;
    text-align: center;
    font-family: WaterBrush;
    font-size: 22px;
}
input.capinput {
    font-size: 18px;
}

.showcase {
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

img.showcase {
    height: 200px;
    border: 2px solid #999;
    border-radius: 12px;
    background-color: #fff;
}



/***** Slide Styling *****/

div.slide {
    box-sizing: border-box;
}


.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Caption text */
.slidetext {
  color: #999999;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.slideshade {
  background-color: #ffffff;
  background: rgba(0,0,0,0.5);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #999999;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 40px;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2.0s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/**** Jersey Edit ****/

.JerseySection {
  border: solid 1px black;
  text-align: center;
  font-size: 12px;
}


.jerseytext {
    position:absolute;
    top: 0px;
}

.input {
    width:100px;
    height:21px;
}

.numberinput {
    width:100px;
    height:21px;
}

.dropbtnLastName {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnLastName:hover, .dropbtnLastname:focus {
  background-color: blue;
  color: white;
}
.dropbtnLastNameStroke {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnLastNameStroke:hover, .dropbtnLastnameStroke:focus {
  background-color: blue;
  color: white;
}

.dropbtnNumber {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnNumber:hover, .dropbtnNumber:focus {
  background-color: blue;
  color: white;
}
.dropbtnNumberStroke {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnNumberStroke:hover, .dropbtnNumberStroke:focus {
  background-color: blue;
  color: white;
}

.dropbtn {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: blue;
  color: white;
}
.dropbtnNeck {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnNeck:hover, .dropbtnNeck:focus {
  background-color: blue;
  color: white;
}

.dropbtnShoulder {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnShoulder:hover, .dropbtnShoulder:focus {
  background-color: blue;
  color: white;
}

.dropbtnShorts {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnShorts:hover, .dropbtnShorts:focus {
  background-color: blue;
  color: white;
}

.dropbtnShortbottom {
    background-color: #cccccc;
    color: black;
    width: 100px;
    height: 25px;
    cursor: pointer;
}
.dropbtnShortbottom:hover, .dropbtnShortbottom:focus {
  background-color: blue;
  color: white;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdownNeck {
  position: relative;
  display: inline-block;
}

.dropdownShoulder {
  position: relative;
  display: inline-block;
}

.dropdownLastName {
  position: relative;
  display: inline-block;
}
.dropdownLastNameStroke {
  position: relative;
  display: inline-block;
}

.dropdownNumber {
  position: relative;
  display: inline-block;
}
.dropdownNumberStroke {
  position: relative;
  display: inline-block;
}


.dropdownShorts {
  position: relative;
  display: inline-block;
}

.dropdownShortbottom {
  position: relative;
  display: inline-block;
}

.color-topbody {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-neck {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-shoulder {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-lastname {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-lastnamestroke {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-number {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-numberstroke {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-shorts {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.color-shortbottom {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 307px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.colorbutton-black {
    background-color: black;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-charcoal {
    background-color: #36454F;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-gray {
    background-color: #808080;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-silver {
    background-color: #C0C0C0;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-platinum {
    background-color: #E5E4E2;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-bluegray {
    background-color: #7393B3;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-white {
    background-color: #ffffff;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-brown {
    background-color: brown;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-rosybrown {
    background-color: #bc8f8f;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-saddlebrown {
    background-color: #8b4513;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-chocolate {
    background-color: #d2691e;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-woodbrown {
    background-color: #c19a6b;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-almond {
    background-color: #efdecd;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-sealbrown {
    background-color: #321414;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-darkblue {
    background-color: #002244;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-midnight {
    background-color: #191970;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-navy {
    background-color: #000080;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-blue {
    background-color: blue;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-royal {
    background-color: #4169E1;
    color: #ffffff;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-babyblue {
    background-color: #89CFF0;
    color: #000000;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-powderblue {
    background-color: #B6D0E2;
    color: #000000;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-azure {
    background-color: #F0FFFF;
    color: #000000;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-darkpurple {
    background-color: #301934;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-quartz {
    background-color: #51414F;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-plum {
    background-color: #673147;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-purple {
    background-color: purple;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-violet {
    background-color: #7F00FF;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-lightpurple {
    background-color: #CBC3E3;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-lavender {
    background-color: #E6E6FA;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-rosered {
    background-color: #C21E56;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-burgundy {
    background-color: #800020;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-cherry {
    background-color: #CC0000;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-red {
    background-color: red;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-salmon {
    background-color: #FA8072;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-pink {
    background-color: #FFC0CB;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-brickred {
    background-color: #AA4A44;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-darkorange {
    background-color: #8B4000;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

.colorbutton-burntorange {
    background-color: #CC5500;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-orange {
    background-color: #FF8C00;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-pumpkin {
    background-color: #FFA500;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-neonorange {
    background-color: #FF5F1F;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-amber {
    background-color: #FFBF00;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-lightorange {
    background-color: #FFD580;
    color: black;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-bronze {
    background-color: #C9AE5D;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-goldenrod {
    background-color: #DAA520;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-gold {
    background-color: #FFD700;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-yellow {
    background-color: yellow;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-khaki {
    background-color: #F0E68C;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-beige {
    background-color: #F5F5DC;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-canary {
    background-color: #FFFF8F;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-darkgreen {
    background-color: #023020;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-huntergreen {
    background-color: #355E3B;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-green {
    background-color: green;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-limegreen {
    background-color: #32CD32;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-turquoise {
    background-color: #40E0D0;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}
.colorbutton-mintgreen {
    background-color: #98FB98;
    color: white;
    width: 40px;
    height: 25px;
    cursor: pointer;
}

/*** Jersey Tabs ***/

.tab-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 360px;
    margin: 10px auto;
    padding: 5px;
}

.tab-container input[type="radio"] {
    display: none;
}

.tab-container label {
    text-align: center;
    cursor: pointer;
    padding: 5px;
    background: #ccc;
    width: 75px;
}

.tab-container label:hover {
    background: #999;
    color: #fff;
}

.tab-container .tab-content {
    width: 100%;
    background: #fff;
    order: 1;
    padding:10px;
    display: none;
}

.tab-container input[type="radio"]:checked + label + .tab-content {
	display:block;
}


.tab-container input[type="radio"]:checked + label {
    background: #fff;
    color: #000;
}
/*** End Jersey Tabs ***/







.showradio input[type="radio"] {
    display: block;
}



/*** Last Name Styling ***/
#lastname1 {
    width:110px;
    word-break:break-all;
    word-wrap:break-word;
    color:blue;
    font-family:Arial;
    font-weight:900;
    text-align:center;					
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
}

#lastnamePos {
    position:absolute;
    top:42px;
    left:405px;
    width:112px;
    height:25px;
    font-size:21px;
}

/*** Jersey Number Styling ***/
#Jerseynumber1 {
    width:110px;
    word-break:break-all;
    word-wrap:break-word;
    color:blue;
    font-family:Arial;
    font-weight:900;
    text-align:center;					
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
}

#numberPos {
    position:absolute;
    top:42px;
    left:205px;
    width:112px;
    height:25px;
    font-size:21px;
}




.showBody {display: block;}
.showNeck {display: block;}
.showShoulder {display: block;}
.showShorts {display: block;}
.showShortbottom {display: block;}
.showLastName {display: block;}
.showLastNameStroke {display: block;}