:root{
    --rotate : 5 deg;
    --rotatereverse : 5deg;
    --radius: 17em;
}

#hexGrid {
    display: inline-flex;
    display: -ms-inline-grid; /* For the hexs to show up around SS sign in IE */
    flex-wrap: wrap;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    position: relative;
    list-style-type: none;
}

.hex {
    position: absolute;
    min-width: 18%;
    width: 25%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#ss{
    width: 100%;
}

.noDisplay { display: none;}

.SimpsonSign{ 
    width: 27%;
    display: -webkit-inline-box;
}

.hex img { width: 100%; height: auto; position: absolute;}

/*.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    /*border: 3px white solid;
}*/

/*** HEX CONTENT **********************************************************************/

/*.hex h1, .hex p {
  width: 100%;
  padding: 9%;
  box-sizing:border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top:35%;
  font-size: 1.3em;
  z-index: 1;
    color: white;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);

}
.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
}
.hex p {
    font-size: 1em;
  top: 45%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}*/


/*** HOVER EFFECT  **********************************************************************/
/*.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}*/


@keyframes myMove {
    0%   {/*transform: rotate( var(--rotate) )  translate(16.5 em)  rotate( var(--rotatereverse) )*/  opacity: 0.7; }
    50%{transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.5); opacity: 0.5; transition: step-end}
    75% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.2); opacity: 0.3}
    100% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0); opacity: 0 }
}

@-webkit-keyframes myMove {
    0%   {/*transform: rotate( var(--rotate) )  translate(16.5 em)  rotate( var(--rotatereverse) )*/  opacity: 0.7; }
    50%{transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.5); opacity: 0.5; transition: step-end}
    75% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.2); opacity: 0.3}
    100% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0); opacity: 0 }
}

@-moz-keyframes myMove {
    0%   {/*transform: rotate( var(--rotate) )  translate(16.5 em)  rotate( var(--rotatereverse) )*/  opacity: 0.7; }
    50%{transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.5); opacity: 0.5; transition: step-end}
    75% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.2); opacity: 0.3}
    100% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0); opacity: 0 }
}

@-o-keyframes myMove {
    0%   {/*transform: rotate( var(--rotate) )  translate(16.5 em)  rotate( var(--rotatereverse) )*/  opacity: 0.7; }
    50%{transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.5); opacity: 0.5; transition: step-end}
    75% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0.2); opacity: 0.3}
    100% {transform: rotate(var(--rotate))  translate(var(--radius))  rotate(var(--rotatereverse))  scale(0); opacity: 0 }
}

/* -- WIDTH RESPONSIVENESS -- */

@media only screen and (max-width: 600px) {
    #hexGrid {
        font-size: 12px;
        left: 30%;
        padding-bottom: 21%;
    }
    .hex{width: 28%;}
    .SimpsonSign{ margin: 5% 0 2%; }
}

@media only screen and (min-width: 600px) {
    #hexGrid { padding: 0 0 28%; left: 167px;}
    /*.SimpsonSign{ width: 20%; }*/
    .hex{width: 25%}
}


@media screen and (min-width: 992px){
   #hexGrid{ padding: 0 0 25% ;left: 28%; }
   .SimpsonSign {  width: 25%; }
   .hex { width: 35%; }
}

@media screen and (min-width: 1245px) {
}

@media screen and (min-width: 1536px) {
    .hex { width: 36%; }
    #hexGrid{ padding: 0 0 30%; left: 29%;}
     .SimpsonSign { width: 100%; }
}

@media screen and (min-width:2064px ) {
    .hex h1 { padding-top: 41%; }
    .SimpsonSign{ margin: 6% 0 8% 0% }
    .hex{ width: 28%; }
    #hexGrid{ padding: 0 0 19%; left: 33%; }
}

/* -- HEIGHT RESPONSIVENESS -- */
@media screen and (max-height: 680px) {
}

@media screen and (min-height: 680px){
}

@media screen and (min-height: 724px){
}

@media screen and (min-height: 810px){
}

@media screen and (min-height: 937px){      
}

@media screen and (min-height: 1024px) {
}