/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, body {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height:100%;
    background: #4BA1D2;
  
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.heightBG{
    height: calc(100% + 1820px);
    width: 100%;
    position: absolute;
    left:0px;
    top:0px;
}
.heightBox{
    height: 100%;
    width:100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index:39;
    overflow:scroll;
}


.square1{
    background: #4BA1D2;
    height: 100%;
    width:100%;
    z-index:1;
    position: absolute;
    left:0;
    top:0;
    /* filter: drop-shadow(8px 8px 0px #111);*/
}
.square2{
    background: #EDB428;
    /*height: calc(100% - 120px);
    width: calc(100% - 120px);*/
    width:90%;
    height:88%;
    color:white;
    z-index:2;
    position: absolute;
    left: calc(5% - 5px);
    top: calc(6% - 5px);
    border:6px #111 solid;

}
.square3{
    background: #6E1219;
    /*height: calc(100% - 240px);
    width: calc(100% - 240px);*/
    width:80%;
    height:76%;
    color:white;
    z-index:3;
    position: absolute;
     left: calc(10% - 5px);
    top: calc(12% - 5px);
    border:6px #111 solid;
    /* filter: drop-shadow(8px -8px 0px #111);*/

}
.square4{
    background: #B1663F;
    /*height: calc(100% - 360px);
    width: calc(100% - 360px);*/
    width:70%;
    height:64%;
    color:white;
    z-index:4;
    position: absolute;
     left: calc(15% - 5px);
    top: calc(18% - 5px);
    border:6px #111 solid;
    /* filter: drop-shadow(8px 8px 0px #111);*/

}
.square5{
    background: #48307C;
    /*height: calc(100% - 480px);
    width: calc(100% - 480px);*/
    width:60%;
    height:52%;
    color:white;
    z-index:6;
    position: absolute;
    left: calc(20% - 5px);
    top: calc(24% - 5px);
    border:6px #111 solid;
    /* filter: drop-shadow(-8px 8px 0px #111);*/
}
.square6{
    background: #237C42;
    /*height: calc(100% - 600px);
    width: calc(100% - 600px);*/
    width:50%;
    height:40%;
    color:white;
    z-index:7;
    position: absolute;
     left: calc(25% - 5px);
    top: calc(30% - 5px);
    border:6px #111 solid;
    /* filter: drop-shadow(8px -8px 0px #111);*/

}
.square7{
    background: #4BA1D2;
    /*height: calc(100% - 720px);
    width: calc(100% - 720px);*/
    width:40%;
    height:28%;
    color:white;
    z-index:8;
    position: absolute;
     left: calc(30% - 5px);
    top: calc(36% - 5px);
    border:6px #111 solid;
    /* filter: drop-shadow(-8px 8px 0px #111);*/

}
.dates{
    color: #fff;
    position: absolute;
    top: 35%;
    z-index:20;
  left: 50%;
  transform: translate(-50%, 0);
    text-align: center;
    
}
.dates h4{
    font-family: 'Asap', sans-serif;
    font-size:28px;
    color: #fff;
    letter-spacing: 1.5px;
    width: 100%;
    line-height: 1.4;   
    margin: 0;
    padding: 0;

}
.logo{
    color: #fff;
    position: absolute;
    top: 6%;
    z-index:21;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center; 
    width: 540px;
    height: auto;
    opacity: 1 ;
}
.logo img{
    height: 100%;
    width: 100%;
}

.mullygrubs{
    background: #DBDBDB;
    height: calc(88% - 9px);
    width: calc(90% - 9px);
    color:white;
    z-index:9;
    position: absolute;
    left: calc(5% - 5px);
    top: calc(6% - 5px);
    border-left:14px #111 solid;
    border-top:14px #111 solid;
    border-bottom:6px #111 solid;
    border-right:6px #111 solid;
    overflow: hidden;
}
.mullygrubs img{
    height:180%;
    width:auto;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    
}

.buylink{
    background:rgba(255,255,255);
    /*height: calc(100% - 840px);
    width: calc(100% - 1240px);*/
    height:12%;
    width:30%;
    color:white;
    z-index:40;
    position: absolute;
    left: calc(35% - 5px);
    top: calc(44% - 5px);
    border:6px #111 solid;
    color: #111;
    text-align: center;
    line-height: 100%;
    filter: drop-shadow(8px 8px 0px #111);
    

}
a:hover {
    
    left: calc(35%);
    top: calc(44    %);
    filter: drop-shadow(0px 0px 0px #111);
}

.buylink h2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Asap', sans-serif;
  font-size:26px;
    color: #111;
    letter-spacing: 1px;
    width: 100%;
    line-height: 1.4    ;   
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 600px) {
  /* Style adjustments for viewports that meet the condition */
    .mullygrubs img{
    height:100%;
    width:auto;
    
}
    .logo{
    top: 5%;
    width: 80%;
    }
    .buylink h2{
    font-size:14px;
    }
    .square2, .square3, .square4, .square5, .square6, .square7, .buylink{
        border:3px #111 solid; 
    }
    .mullygrubs{
       
    border-left:12px #111 solid;
    border-top:12px #111 solid;
    border-bottom:3px #111 solid;
    border-right:3px #111 solid; 
    }
    
    .buylink{
    filter: drop-shadow(6px 6px 0px #111);
    }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}