/* fancy nav button !!!
(I used a tutorial by Sara Soueidan - she is amazing)
http://sarasoueidan.com/blog/navicon-transformicons/
*/
#mobileNav {
  display: none; }

a {
  color: white;
  text-decoration: none; }

a:hover {
  color: inherit; }

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px 30px;
  background-color: rgba(0, 0, 0, 0.5); }

.buttons-container {
  margin: 100px auto;
  text-align: center; }

button {
  display: inline-block;
  margin: 0 1em;
  border: none;
  background: none; }

button span {
  display: block; }

.grid-button {
  padding: 1.5rem;
  cursor: pointer;
  user-select: none; }

.grid-button .grid {
  width: .75rem;
  height: .75rem;
  background: #ecf0f1;
  color: #ecf0f1;
  /* Not in use when the colors are specified below */
  transition: 0.3s; }

.grid-button.close .grid {
  -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
  transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8); }

.grid-button.rearrange .grid {
  box-shadow: -.9375rem -.9375rem, 0 -.9375rem, 0.9375rem -.9375rem, -.9375rem 0, 0.9375rem 0, -.9375rem 0.9375rem, 0 0.9375rem, 0.9375rem 0.9375rem; }

.grid-button.rearrange.close .grid {
  box-shadow: 0 -0.75rem, 0 -1.75rem, 0.75rem 0, -0.75 0.75rem 0, 1.5rem 0, -0.75rem 0, 0 1.5rem, 0 0.75rem; }

.grid-button.collapse .grid {
  box-shadow: -.9375rem 0, -.9375rem 0.9375rem, 0.9375rem 0, 0.9375rem -.9375rem, 0 -.9375rem, -.9375rem -.9375rem, 0 0.9375rem, 0.9375rem 0.9375rem; }

.grid-button.collapse.close .grid {
  box-shadow: -.75rem 0, 0 0 transparent, .75rem 0, 0 0 transparent, 0 -.75rem, 0 0 transparent, 0 .75rem, 0 0 transparent; }

@media (min-width: 78em) {
  /* We increase the header font size even more */
  .splash-head,
  .splash-headNoPop {
    font-size: 300%; } }
@media (max-width: 766px) {
  #mobileNav {
    display: inline-block;
    position: absolute;
    z-index: 1000;
    right: 0px;
    top: -4px;
    opacity: .8; }

  .white {
    padding: 1px 0%; }

  #responsiveIframe iframe {
    min-height: 400px; }

  .content-wrappter {
    top: 75%; }

  .underLine {
    margin: 0 10%; }

  #glovesOn {
    display: none; }

  #team #glovesOn {
    display: inline-block;
    background-position: bottom;
    background-size: 100%; }
  #team .splash {
    display: none; }

  .header ul {
    overflow: hidden;
    max-height: 0px;
    -webkit-transition: max-height 1s;
    -o-transition: max-height 1s;
    transition: max-height 1s; }

  ul.open {
    max-height: 200px; }

  li {
    width: 100%; }

  .splash {
    margin-top: 40%; }
    .splash h1 {
      font-size: 200%;
      padding: 4%; }
    .splash p {
      font-size: 100%; }

  .splash-head {
    font-size: 200%;
    padding: 4%;
    margin: 0 5%; }

  #carousel li {
    left: 20%; }

  #carousel li:nth-child(2) {
    left: 0%; }

  #carousel li:nth-child(3) {
    left: 20%; }

  #carousel li:nth-child(4) {
    left: 0%; }

  #indexContact {
    min-height: 280px; } }

/*# sourceMappingURL=responsive.css.map */