/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "PT Sans", sans-serif;
  color: #fe0064;
  background: linear-gradient(135deg, #ef2f33 1%,#82181a 17%,#000000 47%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;
}

    
.noise {
  position: relative;
}

.noise::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.3'/%3E%3C/svg%3E");
    pointer-events: none;
}


/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
#cd-btn {
  position:absolute; bottom:10%; left:50%; margin-left:-20px;
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      cursor: pointer;
      opacity:0.5; webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}
#cd-btn:hover {
  position:absolute; bottom:8.5%; left:50%; margin-left:-30px;
      width: 60px;
      height: 60px;
      background: white;
      border-radius: 50%;
      cursor: pointer;
      opacity:0.8; webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}

#close-btn {
  position:absolute; bottom:8%; left:50%; margin-left:-20px;
      width: 40px;
      height: 40px;
      background: #4db5da;
      border-radius: 50%;
      cursor: pointer;
       z-index:99;
      opacity:1; webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}
#close-btn:hover {
  position:absolute; bottom:8%; left:50%; margin-left:-30px;
      width: 60px;
      height: 60px;
      background: #0b8d8f;
      border-radius: 50%;
      cursor: pointer;
      z-index:99;
      opacity:1; webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;
}



    #circle {
      position:absolute; bottom:10%; left:50%; margin-left:-30px;
      width: 60px;
      height: 60px;
      background: white;
      border-radius: 50%
    }
  

/* -------------------------------- 


Main Content

-------------------------------- */
.cd-main-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: table;
  background-color: none;
}
.cd-main-content .center {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.
.rev-block7 {position: inherit;}
 
.rev-block7 span {opacity: 0; animation: appear-text 0.0001s linear forwards; animation-delay: 0.8s;}
 
.rev-block7:after {content: ''; top:0; left:0; position:absolute; width:0%; height:100%; background:#fff; animation:rev-block 1.5s cubic-bezier(0.0, 0.0, 0.2, 1) forwards; animation-delay:0.2s;padding-bottom:5px; padding-top:5px;}
 
 
/* REVEAL KEYFRAMES */
@keyframes rev-block {
 
     0% {
          left: 0;
          width: 0%;
     }
     50% {
          left: 0;
          width: 100%;
     }
     100% {
          left: 100%;
          width: 0%;
     }
 
}
 
@keyframes appear-text {
 
     0% {
          opacity: 0;
     }
     100% {
          opacity: 1;
     }
 
}
/* END REVEAL KEYFRAMES */



/* -------------------------------- 

Modal window 

-------------------------------- */

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; 
  margin-top:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-bottom:0px;}


.container:after,
.brow:after,
.u-cf {
  content: "";
  display: table;
  clear: both; 
  margin-top:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-bottom:0px;
height:100%;}



.center {margin-left:0 auto;margin-right:0 auto; display:block;}

.awkward {position:relative; top:0px; left:50%; margin-left:-124.5px; width:245px; height:200px; background-image:url(../img/mscott.gif); background-repeat:no-repeat; background-size:cover; background-position:center center;}

#mainnav {position:absolute; visibility:hidden; opacity:0.0; top:105%; height:auto; width:80%; left:10%; z-index:9; webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;}
#mainnav.whoop {position:absolute; visibility:visible; opacity:1.0; top:12%; height:auto; width:80%; left:10%; z-index:9; webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;}
.item1 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item2 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item3 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item4 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item5 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item6 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item7 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}
.item8 {position:relative; z-index:9; top:18px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer; display:block;}

.cd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #000; 
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-modal .modal-close {
  /* 'X' icon */
  position: absolute;
  z-index: 999;
  top: 10%;
  left: 10%;
  height: 30px;
  width: 30px;
  background: url(../img/x-red.png) no-repeat center center; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal .modal-close:hover {
   background: url(../img/x.png) no-repeat center center; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s;
}
.cd-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.7s, visibility 0s;
  -moz-transition: opacity 0.7s, visibility 0s;
  transition: opacity 0.7s, visibility 0s;
}
.cd-modal.visible .modal-content {
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media only screen and (min-width: 1100px) {
  .cd-modal .modal-content {
    padding: 6em 5%;
  }
  .cd-modal .modal-close {
    height: 60px;
    width: 60px;
  }
  .cd-modal p {
    font-size: 2rem;
  }
}


/* -------------------------------- 

Transition Layer 

-------------------------------- */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
  -moz-transform: translateY(-50%) translateX(-2%);
  -ms-transform: translateY(-50%) translateX(-2%);
  -o-transform: translateY(-50%) translateX(-2%);
  transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(../img/splash.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.cd-transition-layer.visible {
  opacity: 1.0;
  visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24);
  -moz-animation: cd-sequence 0.8s steps(24);
  animation: cd-sequence 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence-reverse 0.8s steps(24);
  -moz-animation: cd-sequence-reverse 0.8s steps(24);
  animation: cd-sequence-reverse 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}

@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
}
@-moz-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -moz-transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -moz-transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
  }
}
@-moz-keyframes cd-sequence-reverse {
  0% {
    -moz-transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -moz-transform: translateY(-50%) translateX(-2%);
  }
}
@keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
    -moz-transform: translateY(-50%) translateX(-98%);
    -ms-transform: translateY(-50%) translateX(-98%);
    -o-transform: translateY(-50%) translateX(-98%);
    transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
  }
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#wrap {position: absolute;width: 100%;top:100%;left:0;height:auto;z-index:9 !important;background:#fff;}
#wrap2 {position: absolute;width: 100%;top:100%;left:0;height:auto;z-index:9 !important;background:#fff;}




  #wrap.bumpdown { }

#wrap.wraptop {top:0px;}

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  z-index:10; }
.column,
.columns {
  width: 100%;
  left:0px;
  float: left;
  box-sizing: border-box; 
  margin-bottom:-7px; margin-top:0px; padding-top:0px; padding-bottom:0px;}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 0px; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 25%;            }
  .four.columns                   { width: 33.3333333333%; margin-bottom:-7px;}
  .five.columns                   { width: 40%; }
  .six.columns                    { width: 47%;}
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 12%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 30%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 26%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
  
  .offset-top.columns     { margin-top: 18%; }
  .offset-top2.columns     { margin-top: 25%; }
  .offset-topmin.columns     { margin-top: 10%; }
  .offset-bottom.columns     { margin-bottom: 18%; }
  .offset-topless.columns     { padding-top: 10%; }

}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 700; }
h1 {font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 6.0rem; line-height: 5.35rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}
h2 { font-family:'Playfair Display', serif; font-weight:700; font-size: 2.4rem; line-height: 2.5rem;  color:#03498a; letter-spacing: normal; text-underline-position: under;}
h3 {font-family:'Roboto', sans-serif; font-weight:500; font-size: 1.2rem; line-height: 1.0;  color:#fff; letter-spacing: 1.0rem;}
h4 {font-family:'Roboto', sans-serif; font-weight:700; font-size: 1.2rem; line-height: 1.0;  color:#03498a; letter-spacing: 1.0rem;}
h5 {font-family:'Playfair Display', serif; color:#03498a; font-weight:700; font-size: 6.0rem; line-height: 5.35rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}
h6 { font-family:'Playfair Display', serif; color:#03498a; font-weight:300; font-size: 1.5rem; line-height: 2.5rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s  }


a{font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 4.0rem; line-height: 6.0rem;  text-decoration:none; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a:hover {font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 4.0rem; line-height: 6.0rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
p {font-family:'Playfair Display', serif; color:#03498a; font-weight:300; font-size: 1.5rem; line-height: 2.5rem; letter-spacing: normal; }
p2 {font-family:'Playfair Display', serif; color:#fff; font-weight:300; font-size: 1.5rem; line-height: 2.5rem; letter-spacing: normal; }

a.dark{font-family:'Playfair Display', serif; color:#03498a; font-weight:300; font-size: 1.5rem; line-height: 2.5rem;  letter-spacing: normal; text-decoration:none; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a.dark:hover {font-family:'Playfair Display', serif; color:#03498a; font-weight:300; font-size: 1.5rem; line-height: 2.5rem; letter-spacing: 0.2rem; text-decoration:none; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}


.underline--magical {
  background-image: linear-gradient(120deg, #4db5da 0%, #4db5da 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.0em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 10% 88%;
  }
}

.underline--magical:hover {
  background-image: linear-gradient(120deg, #4db5da 0%, #4db5da 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.7em;
  background-position: 0 100%;
  transition: background-size 0.25s ease-in;
  padding-left:40px; padding-right:40px;
  &:hover {
    background-size: 100% 88%;
  }
}


  h1 { font-size: 6.0rem; line-height:5.35rem; font-weight:700; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; }
  h2 { font-size: 2.4rem; }
  h3 { font-size: 1.2rem;}
  h4 { font-size: 1.2rem;}
  h5 { font-size: 6.0rem; line-height:5.35rem; font-weight:700; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
  h6 { font-size: 1.5rem; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
  
.wavy {

  text-decoration: underline;
  -webkit-text-decoration-color: #16c1c4;
  text-decoration-color: #16c1c4;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}





#box {position:fixed; height:22px; width:50px; left:8%; top:12%; z-index:99999999; cursor:pointer; text-decoration: none; -webkit-transition: top 0.8s; -moz-transition: top 0.8s; -ms-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; -webkit-transform: translateZ(0);}
.bun1 {position:absolute; width:100%; height:3px; left:0px; top:0px; background:#000; cursor:pointer; text-decoration: none; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; -webkit-transform: translateZ(0);}
.bun1.shrink {width:78%; -webkit-transition: all 0.8s; cursor:pointer; text-decoration: none; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; -webkit-transform: translateZ(0);}
.meat {position:absolute; width:100%; height:3px; left:0px; top:9px; background:#000; cursor:pointer; text-decoration: none; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateZ(0);}
.meat.shrink {width:78%; cursor:pointer; text-decoration: none; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateZ(0);}
.bun2 {position:absolute; cursor:pointer; text-decoration: none; width:70%; height:3px; left:0px; top:18px; background:#000;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateZ(0);}
.bun2.grow {width:100%; cursor:pointer; text-decoration: none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateZ(0);}

.lightblue{background: #fff; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; -webkit-transform: translateZ(0);}
.lightblue.blank{background: #9ce5ff; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; -webkit-transform: translateZ(0);}


#blackwood {position:absolute; top:45%; left:5%; z-index:2; height:auto; width:90%; background:transparent;}

.blobs{
  font-family: "Tilt Warp", sans-serif;
  position:absolute;
  width:70%;
  height:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:transparent;
  margin:auto;
  display:flex;
  justify-content:center;
  filter:blur(0) contrast(1);
  animation:blur1 1s linear;
  
  &:hover {
    animation:blur2 1s linear;
    cursor:pointer;
  }
  
  &>.blob:nth-of-type(1) {
    opacity:0.5;
    transform: rotate(180deg);

  }
   &>.blob:nth-of-type(2) {
    opacity:0;
     
  }
  
   &:hover>.blob:nth-of-type(1) {
    opacity:0;
  }
   &:hover>.blob:nth-of-type(2) {
    opacity:1;

  }
}

.blobs2{
  position:absolute;
  width:auto;
  height:auto;
  background:transparent;
  margin:auto;
  display:flex;
  justify-content:center;
  filter:blur(0) contrast(4);
  animation:blur1 1s linear;
  
  &:hover {
    animation:blur2 1s linear;
    cursor:pointer;
  }
  
  &>.blob:nth-of-type(1) {
    opacity:0.5;
    transform: rotate(180deg);

  }
   &>.blob:nth-of-type(2) {
    opacity:0;
     
  }
  
   &:hover>.blob:nth-of-type(1) {
    opacity:0;
  }
   &:hover>.blob:nth-of-type(2) {
    opacity:1;

  }
}

@keyframes blur1{
  0% {
    filter:blur(0) contrast(1);
  }
  50% {
    filter:blur(5px) contrast(30);
  }
  100% {
    filter:blur(0) contrast(1);
  }
}

@keyframes blur2{
  0% {
    filter:blur(0) contrast(30);
  }
  50% {
    filter:blur(8px) contrast(30);
  }
  100% {
    filter:blur(0) contrast(30);
    
  }
}

.blob{
  font-size:5rem;
  letter-spacing:0.0em;
  font-weight:600;
  position:absolute;
  transition:opacity 1s linear;
}




/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

@media (max-width: 550px) {
	#higuys {position:absolute; top:50%; left:10%; z-index:2; height:auto; width:80%;}
	#cd-btn {position:absolute; bottom:14%; left:50%; margin-left:-20px;}
#cd-btn:hover {position:absolute; bottom:13%; left:50%; margin-left:-30px;}
#close-btn {position:absolute; bottom:17%; left:50%; margin-left:-20px;}
#close-btn:hover {position:absolute; bottom:16%; left:50%; margin-left:-30px;}
.modal-close { bottom: 14% !important;}
#lizdoug {display:none; position:fixed; top:5%; left:8%; z-index:9999999; height:auto; width:auto; -webkit-transition: top 0.8s; -moz-transition: top 0.8s; -ms-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; -webkit-transform: translateZ(0);}
#lizdoug.out {display:none; position:fixed; top:-7%; left:8%; z-index:9999999; height:auto; width:auto; -webkit-transition: top 0.8s; -moz-transition: top 0.8s; -ms-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; -webkit-transform: translateZ(0);}
#introtext {position:absolute; top:39%; left:8%; z-index:2; height:auto; width:84%;}

h5 {font-family:'Playfair Display', serif; color:#03498a; font-weight:700; font-size: 5.0rem; line-height: 4.5rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}
h1 {font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 5.0rem; line-height: 4.5rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s}

#box {display:none; position:fixed; height:22px; width:40px; left:82%; top:6%; z-index:99999999; cursor:pointer; text-decoration: none; -webkit-transition: top 0.8s; -moz-transition: top 0.8s; -ms-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; -webkit-transform: translateZ(0);}
#boxmobile {background:#fff; opacity:0.0; position:fixed; height:110px; width:26%; left:74%; top:0; z-index:99999999999; cursor:pointer; text-decoration: none; -webkit-transition: top 0.8s; -moz-transition: top 0.8s; -ms-transition: top 0.8s; -o-transition: top 0.8s; transition: top 0.8s; -webkit-transform: translateZ(0);}
#second {position:absolute; top:40%; right:50%; margin-right:-200px; width:400px; height:auto; opacity:1.0;}
#third {position:absolute; top:38%; right:50%; margin-right:-200px; width:400px; height:auto; opacity:1.0;}
.intro2 {position:relative;top:0px; left:0px; width:auto; height:auto; margin-top:-10px;}
#rsvp {position:absolute; top:48%; left:10%; z-index:2; height:auto; width:80%;}
#upboxfake {position:fixed; bottom:5%; right:8%;}
#upboxfake.done {position:fixed; bottom:5%; right:8%; }
#upbox {position:fixed; bottom:5%; right:8%;  }
#upbox.bottomshow {border-radius: 50%; opacity:1.0; bottom:10%;}
#upbox.bottomshow:hover {visibility:visible; opacity:1.0; bottom:10%;  }
h2 { font-family:'Playfair Display', serif; font-weight:700; font-size: 2.4rem; line-height: 3.2rem;  color:#03498a; letter-spacing: normal; text-underline-position: under;}
#mainnav.whoop {position:absolute; visibility:visible; opacity:1.0; top:5%; height:auto; width:80%; left:10%; z-index:99; webkit-transition: all 1.8s; -moz-transition: all 1.8s; -ms-transition: all 1.8s; -o-transition: all 1.8s; transition: all 1.8s;}
.item1 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item2 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item3 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item4 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item5 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item6 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item7 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
.item8 {position:relative; z-index:999; top:10px; left:0px; width:auto; height:auto; webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; cursor:pointer;}
a{font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 4.5rem; line-height: 5.8rem;  text-decoration:none; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a:hover {font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 4.5rem; line-height: 5.8rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
#divetext {position:absolute; top:15%; left:6%; height:auto; width:84%;}
.snork2 {background-color: none; background-image:url(../img/snorkmobile2.jpg); background-repeat:no-repeat; background-size:cover; background-position:center top left; display:flex; top:0; width: 100%; height: 100%;}
.offset-topmin.columns     { margin-top: 20%; }
#sidebar {display:none; }
#levi {display:none;}
#levi.higuys {display:none;}
.offset-by-four.columns { margin-left: 6%; width:88%;}
.offset-top.columns { margin-top: 31%; }
 .offset-top2.columns     { margin-top: 35%; }
 .typeform-widget {width:100% !important; height:400px !important; }
 .offset-bottom.columns     { margin-bottom: 25%; }
a{font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 3.5rem; line-height: 5.6rem;  text-decoration:none; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
a:hover {font-family:'Playfair Display', serif; color:#fff; font-weight:700; font-size: 3.5rem; line-height: 5.6rem; letter-spacing: normal; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}


.underline--magical {
  background-image: linear-gradient(120deg, #4db5da 0%, #4db5da 100%);
  background-repeat: no-repeat;
  background-size: 0% 0.0em;
  background-position: 0 0%;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 10% 88%;
  }
}

.underline--magical:hover {
  background-image: linear-gradient(120deg, #4db5da 0%, #4db5da 100%);
  background-repeat: no-repeat;
  background-size: 0% 0.0em;
  background-position: 0 0%;
  transition: background-size 0.25s ease-in;
  padding-left:0px; padding-right:0px;
  &:hover {
    background-size: 100% 88%;
  }
}
}