<style>
* {
  box-sizing: border-box;
}
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #cce6ff;
  overflow-y: scroll;
}
/* Style menu */
.mobile-container {
  max-width: 300px;
  margin: auto;
  background-color: #cce6ff;
  color: #b23850;  
  font-size: 20px;
  float: left;
  margin: 20px;

}

.topnav {
  overflow: hidden;
  position: fixed;
}

.topnav #hiddenmenu {
  display: none;
}
/* Style tab links */
.tablink {
  background-color: #9fbbdf;
  color: #0000ff;
  float: left;
  border: 0px solid #cce6ff;
  border-radius: 20px 20px 0px 0px;  
  outline: none;
  cursor: pointer;
  padding: 7px 5px; /*top right bottom left */
  font-size: 1.25em;
  width: 20%;
  min-width: 20%; /* min width */
}

.tablink:hover {
  opacity: 1;  
  font-weight: bold;  
}
.tablink:active {
  background-color: #ffffff;
  font-weight: bold;  
  opacity: 1;  
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 7px 5px;
  height: 100%;
  min-width: 20%; /* min width */  
}
/* #Sports {background-color: #3b8beb; } */
#Image_Front {background-color: #3b8beb; display:block; }
#Category {background-color: #3b8beb; display:block; }
#Year {background-color: #3b8beb; display:block; }
#Search {background-color: #3b8beb; display:block; }


/* Style the header */
.header {
  background-color: #3b8beb;
  padding: 0px; 
  text-align: center;
  font-size: 2em;
  color: #e7e3d4;
  text-decoration: underline;
  text-decoration-color: #b23850;
}

p {
  font-size: 25px;
  font-weight: bold;
  color: #b23850;
  text-transform: capitalize;
}


input, textarea {
  border: none;
  font-family:inherit;
  font-size:inherit;
/*  text-transform: capitalize;*/
}
textarea {
  vertical-align: top;
}
/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  margin: 5px;

}
/* Left column */
.column.left {  width: 0;  position: fixed;  z-index: 1;  top: 0;  left: 0;  color: #b23850;  font-size: 20px;/*  height: 100%; */  overflow-x: hidden;/*  transition: 0.5s; *//*  padding-top: 60px; */}

.column.left .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;/*  margin-left: 50px; */
}
/* middle column */
.column.middle {
  width: 300px;
  color: #b23850;
  font-size: 25px;
  height: 100%;
  display: inline;
}
/* right column */
.column.right {
  width: 100%;
  color: #b23850;
  font-size: 20px;
  height: 100%;
  display: table-cell;
  text-align:right;
  background: #cce6ff;
  background-color: #cce6ff;   

}
/* last column */
.column.last {
  width: 45%;
  background-color: #cce6ff;
  font-size: 25px;
  height: 100%;
  display: table-cell;

}

/* form */
.form {

  color: #b23850;  
  padding: 0px;
}
input[type=text]{
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  text-transform: lowercase;
}
input, textarea {
  border: none;
  font-family:inherit;
  font-size:inherit;
  text-transform: lowercase;
}
table {
  border-collapse: collapse;
  width: auto;
  float: center;
  font-family: monospace;
  font-size: 25px;
  display: block;
  margin: 0 auto;
  max-width:calc(90% - 40px);

}
table.center {
  width:auto;
  margin-right: auto;
  margin-left: auto;

  }
th {
  text-transform: uppercase;
  background-color: white;
  color: #b23850;
  white-space: nowrap; 
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
.titlerow {
  text-transform: uppercase;  
  background-color: white;
  border: 2px solid red;
/*  position: sticky; */
  font-family: monospace;
  font-size: 25px;
  font-weight: bold;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  width: 100%;
}

/* Remove default bullets */
ul, #SportTypes {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#SportTypes {
  padding-left:1.2em;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 25px;
  color: #b23850;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: #3b8beb;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}


/* Style the footer */
.footer {
  background-color: #3b8beb;
  padding: 10px;
  text-align: center;
  color: #e7e3d4;
/*  position: fixed; */
/*  left: 0; */
/*  bottom: 0; */
/*  width: 100%; */
}

/* Responsive layout - makes the the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.left, .column.middle, .column.right, .column.last {
    width: 100%;
  }
}

.card {
  background-color: transparent;
  width: 400px;
  height: 500px;
  perspective: 1000px;
  
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.0s;
  transform-style: preserve-3d;
}
.on {
	-webkit-transform: rotateY(-180deg);
}

.off {
	-webkit-transform: rotateY(0deg);
}
/*.card:hover .card-inner { */
/*  transform: rotateY(180deg);*/
/*} */ 
.card.flipped .card-inner { 
  transform: rotateY(180deg);
}


.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-front {
  color: black;
}

.card-back {
color: black;
  transform: rotateY(180deg);
}
.popupbutton {
  background-color: inherit;
   border: none;
/*  border-radius: 10px;*/
  color: red;
/*  padding: 15px 32px; */
  text-align: center;
  text-decoration: underline;
  display: inline-block;
  font-size: 25px;
  margin: 4px 2px;
  cursor: pointer;
}
.menubutton {
  background-color: #9fbbdf;
  color: #b23850;
  display: block;
  outline: none;
  width: 100%;
  border: 2px solid white;
  border-radius: 10px;
  text-align: left;
  padding: 15px 15px;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}
.activebtn, .menubutton:hover {
  background-color: #e7e3d4;
}
.button {
  background-color: #3b8beb;
  border: none;
  border-radius: 10px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.custom-close {
  color: #aaaaaa;
  float: right;
  font-size: 48px;
  font-weight: bold;
}

.custom-close:hover,
.custom-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/* For desktop: */
.col-1a {width: 4%;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;   text-align:right;

}
/* format column */
.col-12.format {
  width: 100%;
  color: #b23850;
  font-size: 20px;
  height: 100%;
  display: table-cell;
  text-align:right;
  background: #cce6ff;
  background-color: #cce6ff;
  padding: 15px 15px 15px 15px; /* Location of the box */
  margin: 0 auto;  
    display: flex;
  justify-content: center;
}
/* Gallery Grid and Images */ 
#gridview {
   text-align:center;
   background: #cce6ff;
   color: #b23850;
  font-size: 20px;
}

div.image {
    margin: 10px;
    display: inline-block;

}

div.image {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

div.image img:hover {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);
}

.heading{    
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
}
#grid{
    margin-bottom:30px;
}
@media screen and (min-width: 1224px) {
    div.image {
        width: 250px;
    }

}

@media screen and (min-width: 1044px) and (max-width: 1224px) {
    div.image {
        width: 290px;
    }

}

@media screen and (min-width: 845px) and (max-width: 1044px) {
    div.image {
        width: 150px;
    }
      [class*="col-"] {
    width: 100%;  }
}

@media only screen and (max-width: 768px) {
div.image {
        width: 150px;
    }

  
  [class*="col-"] {
    width: 100%;  }
}
    
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
   padding: 15px 15px 15px 15px; /* Location of the box */
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);  
  min-width: 200px; /* Full width */
  max-width:calc(100% - 80px);
  width: auto;
  min-height: 200px;
  height: auto; /* Full height */
  max-height:calc(100% - 80px);
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(248,248,255); /* Fallback color */
  background-color: rgba(248,248,255,1); /* Black w/ opacity */
  border-style: solid;
  border-width: thick;
  border-color: red;
  overflow-y: scroll;
  overflow-x: scroll;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  min-width: 150px; /* Full width */
  max-width: 600px;
  min-height: 150px;  
  overflow:auto;

  padding-top: 10px;
  border-style: solid;
  border-width: medium;
  border-color: red;
}

/* Caption of Modal Image */
.caption {
  margin: auto;
  display: block;
  min-width: 150px; /* Full width */
  max-width: 600px; /* Full width */
  width: auto;
  text-align: center;
  color: #ff0000;
  padding: 15px 0;
  font-size: 1em;
  font-weight: bold;
  /*height: 150px; */
}
.button-close-modal {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-left: auto;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 5px;
  right: 15px;
  color: #000000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.closeNavBtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  text-decoration: none;
}
.menulink {
  font-size: 30px;
  font-weight: bold;
  color: #b23850;
  text-transform: capitalize;
  cursor:pointer;
  left: 20px;
  top: 20px;
}


/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
    .modal {
  max-width:calc(100% - 80px);
  width: 50%;
    height: 100%;
    max-height:calc(100% - 80px);
  }
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
  .modal-content {
  max-width:calc(100% - 80px);
  max-height:calc(100% - 80px);   
  }
}
.overlay {
  margin: auto;
  position: absolute; 
  left: 50%;
  top: 55%;
  transform:translate(-50%,-50%);    
  background: rgb(248, 248, 255);
/*  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  min-width: 150px; /* Full width */
  max-width: 600px; /* Full width */
  width: auto;
  height: auto; /* Full height */
  max-height:calc(100vh - 85px);
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 0px 0px 0px 0px; /* Location of the box */
  text-align: center;
  border-style: solid;
  border-width: thin;
  border-color: red;
}

.modal:hover .overlay {
  opacity: 1;
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
  .overlay {
  max-width:calc(100% - 85px);
    min-width: 100px; /* Full width */
      max-height:calc(100vh - 85px);
  }
}
</style>