body { color: #FFF; margin: 0; padding: 0; text-align: center; font-family: 'dosis', sans-serif; background: #000 url('video/Showreel2021-WebBg_01_Frame1.jpg') no-repeat center center fixed; background-size: cover;}
html { margin: 0; padding:0; }
html, body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* remove unwanted highlights */
a { -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }


.colour1 { color: #00C18D; fill: #00C18D; stroke:#00C18D; border-color:#00C18D; background-color:#00C18D; }

/* bg: # */
.colour1 { color: #ec6054; fill: #ec6054; stroke:#ec6054; border-color:#ec6054; background-color:#ec6054; }
.colour2 { color: #299d71; fill: #299d71; stroke:#299d71; border-color:#299d71; background-color:#299d71; }


iframe a:hover { color: #FFFFFF !important; }

.clearer { clear: both; }

#loadingScreen { background:rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; backface-visibility: hidden; /*will-change: transform;*/ z-index: 99999; transform: translateZ(90px); }
#loadingScreen svg { width: 20vh; height: 20vh; fill:none; fill:none !important;  background-color: transparent; stroke-width:40; stroke-linecap:round; stroke-linejoin:round; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) translateZ(0px);  animation: loadDisc 3s infinite linear; }
@keyframes loadDisc {
  0% { transform: translateX(-50%) translateY(-50%) translateZ(0px) rotateZ(0); }
  100% { transform: translateX(-50%) translateY(-50%) translateZ(0px) rotateZ(360deg); }
  }
#loadingScreen svg path { stroke-dasharray: 1500;  }
/*#vp {  position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;z-index: 100; transform: translateX(-50%) translateY(-50%); }*/

#bgVid { position: fixed; backface-visibility: hidden; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-49.99%) translateY(-49.99%) translateZ(0px); z-index: -100; /* will-change: transform*/ }

/* old
#bgVid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; opacity: 0.35; -webkit-filter:blur(5px); -moz--filter:blur(5px);- ms-filter: blur(5px); -o-filter: blur(5px); filter:blur(5px); filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='5'); }
*/

#bgDots { position: fixed; backface-visibility: hidden; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -99; transform: translateX(-49.9%) translateY(-49.9%) translateZ(0px); background-size: cover; background:url(style/dots.svg); background-size: 8px 8px;  }


.sectionTitle { width: 17%; margin-bottom: 0.66vh; background-color: transparent; transform: translateX(0) translateY(0) translateZ(3px);  }
.sectionTitle path { fill:none; stroke-width:24; stroke-linecap:round; stroke-linejoin:round; }
path.sectionTitleLine { stroke-width: 12; opacity: 0.5; }


header { background-image: linear-gradient( rgba(11, 17, 23, 0), rgba(11, 17, 23, 1) 1%, rgba(11, 17, 23, 0.67), rgba(11, 17, 23, 0) 98% ); background-repeat: no-repeat;  position: fixed; z-index: 10; width: 100%; top: 0; left: 0; transition: all 0.5s;  transform: translate3d(0px, 0px, 4px); background-size: 100% 100%; }
header h1 { display: none; }

header #logo { width: 13%; position: relative; transition: transform 0.5s; transform-origin: 50% 0%; opacity: 0; transform: translateZ(0.01); }
header #logo .ac { fill:none; stroke-width:36; stroke-linecap:round; stroke-linejoin:round;  }
header #logo .mg { fill:none; stroke:#D4D4D4; stroke-width:23; stroke-linecap:round; stroke-linejoin:round;  }
header #logo .line { fill:none; stroke-width:24; stroke-linecap:round; stroke-linejoin:round; opacity: 0.5; transition: opacity 0.5s;  }

/* Navigation */

#pageNavOuter { position: absolute; top: 0; left: 0; width: 100%; transform: scale(1,1) translateY(0) translateZ(0.01); transform-origin: 50% 0%; transition: all 0.5s; }
nav#pageNav { text-align: center;  margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); overflow-x: hidden; overflow-y: hidden; transition: all 0.5s;    }
.navBtnOuter { /*transition: all 0.5s; */  }
.navBtn { cursor: pointer;  display: block; color: #FFF; position: relative; float: left; transition: left 0.5s, right 0.5s; /*transform: scale(0.9,0.9);*/ opacity: 0; overflow: hidden; }
.navBtnIO { position: absolute; top: 0; left:  0; width: 100%; height: 100%; z-index: 100; /*background:rgba(255,0,4,0.01);*/ }
.navBtn svg { position: absolute; top: 0; left: 0; background: transparent; overflow: hidden; /*clip-path: inset(15.4%);*/ }
.navBtn .circle { fill: none;  stroke-width:3;  }
.navBtn .waveOuter { stroke-width:0;  }
.navBtn .wave {  stroke-width:0; }
.navBtn p { margin: 0; padding: 0; position: absolute;  width: 100%; height: 100%; text-align: center;  transform: translateZ(4px)  }
.navBtn clipPath {  stroke-width:0;  }

.freeze { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }


/* PLAY REEL BTN */
#playReelBtn {  position: relative; /*background: rgba(255,0,4,0.01);*/  opacity:0;  }
.playReelCircle {  position: absolute; top: 0; left: 0; fill:none !important;  background-color: transparent; stroke-miterlimit:10; stroke-linecap:round; stroke-linejoin:round; transform: translateZ(0.1px); backface-visibility: hidden; /*animation: rotationy 13s infinite linear;*/
}
@keyframes rotationy {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
#playReelBtnIO { position: absolute; width: 50%; max-width: 25vh; height: 50%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 90; cursor: pointer; /*background:rgba(255,0,4,0.01);*/
-webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.playReelBtnCircle { opacity:0.5;  }
#playReelBtnTriangle { fill: #FFFFFF; stroke: none !important; }
#playReelBtnCircle1A { stroke-width:57; stroke-width:15; }
#playReelBtnCircle2A { stroke-width:46; stroke-width:18; }
#playReelBtnCircle3A { stroke-width:36; stroke-width:23; }
#playReelBtnCircle4A { stroke-width:30; stroke-width:30; }
#playReelBtnCircle5A { stroke-width:23; stroke-width:36; }
#playReelBtnCircle6A { stroke-width:18; stroke-width:46; }
#playReelBtnCircle7A { stroke-width:15; stroke-width:57; }



/* WORK */
#work { padding-top: 5vw; background-image: linear-gradient( rgba(11, 17, 23, 0), rgba(11, 17, 23, 0.6) 30% ); transform: translate3d(0px, 0px, 2px); outline: 0; border: none; }
#work #menu { margin: 1em 0 0 0; padding: 0; padding-left: 0.33%; list-style: none; }
#work #menu li { padding: 0; margin: 0 0.33% 0.33% 0;  float: left; width: 33%;  }
#work #menu li a { display: block; cursor: pointer;  position: relative;  width: 100%; overflow: hidden;  padding-top: 56.25%; /* (img-height / img-width */ }
#work #menu li a img { position: absolute; top: 0; left:0; width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

#work #menu { padding-left: 0.25%; }
#work #menu li { width: 24.75%; margin: 0 0.25% 0.25% 0; }

#work h2 { display: none; }



/* ABOUT */
#about { padding-top: 5vw; background-image: linear-gradient( rgba(11, 17, 23, 0.6), rgba(11, 17, 23, 0) 30% );
  font-size: 1.4em; line-height: 1.5em; text-shadow: 0 1px 20px  #000000; transform: translate3d(0px, -0.5px, 2px);  }
#about h2 { display: none; }
#about p { width: 60%; margin: 0 auto 1em; }
#about h3 { margin: 6vh 0 2vh; font-size: 1.3em; background-color: transparent; text-transform: uppercase; }
#about strong { color: #00C18D; }


.lozengeBtn { cursor: pointer;  display: block; margin: 0 auto 1em auto; color: #FFF; position: relative; transition: font-size 0.5s, left 0.5s, right 0.5s, width 0.5s;
  width: 9.2em; height: 2.3em; font-size: 1.2em; border: none !important; }
.lozengeBtnIO { position: absolute; top: 0; left:  0; width: 100%; height: 100%; z-index: 100; background:rgba(255,0,4,0.01); cursor: pointer; }
.lozengeBtn svg { position: absolute; top: 0; left: 0; background: transparent; }
.lozengeBtn .lozengeOutline { fill: none;  stroke-width:3; }
.lozengeBtn .wave {   }
.lozengeBtn p { margin: 0; padding: 0; position: absolute; top:53%; left: 45%; width: 100%; transform: translateX(-50%) translateY(-63%) translateZ(1px);   }
.lozengeBtn .chevron { stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; fill: none; stroke-width:3; stroke:#FFFFFF; }

.lozengeWider { width: 12em; height: 3em; }

/* CONTACT */
#contact { padding-top: 7vh; padding-bottom: 3.5vh; background-image: linear-gradient( rgba(11, 17, 23, 0), rgba(11, 17, 23, 0.8) 100% );
  font-size: 1.4em; line-height: 1.5em; transform: translate3d(0px, 0px, 3px); }
#contact h2 { display: none; }
#contact p { width: 60%; margin: 0 auto 1em; text-shadow: 0 1px 20px  #000000; }

#contact nav { text-align: center; width: 40%;  margin: 0 auto; position: relative; overflow-x: hidden; overflow-y: hidden; }
.contactBtn { cursor: pointer;  display: block; color: #FFF; font-size: 1.5vw; position: relative; float: left;  }
.contactBtnIO { position: absolute; top: 0; left:  0; width: 100%; height: 100%; z-index: 100; /*background:rgba(255,0,4,0.01);*/ }
.contactBtn svg { position: absolute; top: 0; left: 0; background: transparent; }
.contactBtn .circle { fill: none;  stroke-width:3; }
.contactBtn .wave {   }
.contactBtn p { display: none;  transform: translateZ(-80px); }
.contactBtn img { position: absolute; border: none; outline: none; width: 90%; height: auto; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) translateZ(1px); opacity: 0.5 }



#mqbp { color: #FFF; position: fixed; left: 10px; z-index: 2000; font-size: 3em; display: none; }





@font-face {
    font-family: 'dosis';
    src: url('fonts/dosis-light-webfont.woff2') format('woff2'),
         url('fonts/dosis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dosis';
    src: url('fonts/dosis-regular-webfont.woff2') format('woff2'),
         url('fonts/dosis-regular-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}



/* ************************ MEDIA QUERIES ****************************** */
@media only screen and (min-width: 0px)
{
  #mqbp:after { content: "0px"; }
  header {  height: 45vw; background-position: 0 -10vw; }
  header #logo { width: 40vw; height: 20vw; top: 0.5vw; }
  header #logo .line { opacity: 0; }
  nav#pageNav { width: 100%; height: 30vw; top: 15vw; }
  .navBtn { width: 30%; height: 100%; margin-right: -6.67%; font-size: 5vw; }
  .navBtn p { line-height: 28vw; }

  #work, #about { padding-top: 12vw; }
  #playReelBtn {  height: 74vw;  margin: 31vw auto -20vw; transition: margin 0.5s; }

  #work #menu { padding-left: 0.55%; }
  #work #menu li { width: 99.45%; margin: 0 0.55% 0.55% 0; }
  .sectionTitle { width: 50vw; /* width x 0.629 */ height: 31.45vw; }
  #about { font-size: 1.3em; }
  #about p { width: 90%; }
  /*.lozengeBtn { height: 12vw; width: 48vw; font-size: 1.2em; }*/
  #contact { padding-bottom: 3.5vh; }
  #contact nav { width: 100%; height: 30vw; }
  .contactBtn { width: 30%; height: 100%; margin-right: -6.67%; }

  #lightbox { font-size: 1.3em; }
  #lightbox h3 { margin: 2em auto 0.5em; width: 90%; line-height: 1.1em; }

  header.scrolledDown { background-position: 0 -1px; height: 20vw; }
  header #logo.scrolledDown { transform: translateY(-20vw) }
  header #logo.scrolledDown .line { opacity: 0; }
  #pageNavOuter.scrolledDown {  transform: translateY(-24vw) }

  header.scrolledDown + section#playReelBtn {  margin: 18vw auto -7vw; }

}

@media only screen and (min-width: 500px)
{
  #mqbp:after { content: "500px"; }
  header { height: 17vw; background-position: 0 -8vw; }
  header #logo { width: 23vw; height: 11.5vw; top: 2vw; }
  header #logo .line { opacity: 1; }
  nav#pageNav { width: 100%; height: 18vw; top: -1.33vw; }
  .navBtn { width: 18vw; height: 100%;  font-size: 3vw; margin-right: 0; position: absolute; }
  .navBtn p { line-height: 17vw; }
  #navBtnReel { left: 2vw  }
  #navBtnWork { left: 16vw }
  #navBtnAbout { right: 16vw;  }
  #navBtnContact { right: 2vw; }

  #work, #about { padding-top: 7.4vw; }
  #playReelBtn {  height: 50vw; margin: 9vw auto  -12vw;  }

  #work #menu { padding-left: 0.45%; }
  #work #menu li { width: 49.55%; margin: 0 0.45% 0.45% 0; }
  .sectionTitle { width: 35vw; /* width x 0.629 */ height: 22.015vw; }
  #about { font-size: 1.5em; }
  #about p { width: 77%; }
  /*.lozengeBtn { height: 9vw; width: 36vw; font-size: 1.2em; }*/
  #contact { padding-bottom: 5vh; }
  #contact nav { width: 75%; height: 20vw; }
  .contactBtn { width: 28%; height: 100%; margin-right: -4%; }

  #lightbox { font-size: 1.45em; }
  /* wait and see how long the titles are! #lightbox h3 { margin: 2em auto 0.5em; width: 90%; line-height: 1.1em; } */
  #lightbox h3 { margin: 0.4em auto 0.9em; width: 70%; line-height: 1.7em; }

  header.scrolledDown { background-position: 0 -1px; height: 10vw; }
  header #logo.scrolledDown { transform: scale(0.76,0.76) translateY(-23%) }
  header #logo.scrolledDown .line { opacity: 0; }
  #pageNavOuter.scrolledDown {  transform: scale(0.84,0.84) translateY(-3.5vw) }
  /*
  nav#pageNav.scrolledDown #navBtnReel { transform: translateX(3vw); }
  nav#pageNav.scrolledDown #navBtnWork { transform: translateX(3vw); }
  nav#pageNav.scrolledDown #navBtnAbout { transform: translateX(-3vw);  }
  nav#pageNav.scrolledDown #navBtnContact { transform: translateX(-3vw);  }
  */
  nav#pageNav.scrolledDown #navBtnReel { left: 5vw; }
  nav#pageNav.scrolledDown #navBtnWork { left: 19vw; }
  nav#pageNav.scrolledDown #navBtnAbout { right: 19vw;  }
  nav#pageNav.scrolledDown #navBtnContact { right: 5vw;  }

  header.scrolledDown + section#playReelBtn {  margin: 7vw auto -10vw; }

}

@media only screen and (min-width: 1000px)
{
  #mqbp:after { content: "1000px"; }
  header { height: 12vw; background-position: 0 -5vw; }
  header #logo { width: 14.8vw; height: 7.4vw; /*top: 2vw;*/ top: 2vw;  }
  header #logo .line { opacity: 1; }
  nav#pageNav { width: 100%; height: 12vw; /*top: -8vw;*/ top: -0.31vw;  }
  .navBtn { width: 12vw; height: 100%;  font-size: 2vw; margin-right: 0; position: absolute; }
  .navBtn p { line-height: 11.2vw; }
  #navBtnReel { left: 8vw  }
  #navBtnWork { left: 20vw }
  #navBtnAbout { right: 20vw;  }
  #navBtnContact { right: 8vw; }

  #work, #about { padding-top: 4.9vw; }
  #playReelBtn {  height: 40vw; margin: 9vw auto  -3.8vw;  }

  #work #menu { padding-left: 0.35%; }
  #work #menu li { width: 32.98%; margin: 0 0.35% 0.35% 0; }
  .sectionTitle { width: 23vw; /* width x 0.629 */ height: 14.467vw; }
  #about { font-size: 1.6em; }
  #about p { width: 63%; }
  #contact { padding-bottom: 7vh; }
  #contact nav { width: 55%; height: 13vw; }
  .contactBtn { width: 25%; height: 100%; margin-right: 0; }

  #lightbox { font-size: 1.6em; }
  #lightbox h3 { margin: 0.4em auto 0.9em; width: 70%; line-height: 1.7em; }

  header.scrolledDown { background-position: 0 -1px; height: 7vw; }
  header #logo.scrolledDown { transform: scale(0.8,0.8) translateY(-34%) }
  header #logo.scrolledDown .line { opacity: 0; }
  #pageNavOuter.scrolledDown {  transform: scale(0.83,0.83) translateY(-2.9vw) }
  /*
  nav#pageNav.scrolledDown #navBtnReel { transform: translateX(10vw); }
  nav#pageNav.scrolledDown #navBtnWork { transform: translateX(8vw); }
  nav#pageNav.scrolledDown #navBtnAbout { transform: translateX(-8vw);  }
  nav#pageNav.scrolledDown #navBtnContact { transform: translateX(-10vw);  }
  */
  nav#pageNav.scrolledDown #navBtnReel { left: 18vw; }
  nav#pageNav.scrolledDown #navBtnWork { left: 28vw; }
  nav#pageNav.scrolledDown #navBtnAbout { right: 28vw;  }
  nav#pageNav.scrolledDown #navBtnContact { right: 18vw;  }

  header.scrolledDown + section#playReelBtn {  margin: 7vw auto -1.7vw; }

}

@media only screen and (min-width: 1700px)
{
  #mqbp:after { content: "1700px"; }
  header { height: 10vw; background-position: 0 -4vw; }
  header #logo { width: 11vw; height: 5.5vw; top: 1.4vw; }
  header #logo .line { opacity: 1; }
  nav#pageNav { width: 100%; height: 9vw; top: -0.35vw;  }
  .navBtn { width: 9vw; height: 100%;  font-size: 1.5vw; margin-right: 0; position: absolute; }
  .navBtn p { line-height: 8.5vw; }
  #navBtnReel { left: 16vw }
  #navBtnWork { left: 26vw }
  #navBtnAbout { right: 26vw;  }
  #navBtnContact { right: 16vw; }

  #work, #about { padding-top: 3.4vw; }
  #playReelBtn {  height: 30vw; margin: 7.5vw auto  -2vw;  }

  #work #menu { padding-left: 0.25%; }
  #work #menu li { width: 24.75%; margin: 0 0.25% 0.25% 0; }
  .sectionTitle { width: 17vw; /* width x 0.629 */ height: 10.693vw; }
  #about { font-size: 1.7em; }
  #about p { width: 50%; }
  #contact { padding-bottom: 9vh; }
  #contact nav { width: 40%; height: 10vw; }
  .contactBtn { width: 25%; height: 100%; margin-right: 0; }

  #lightbox { font-size: 1.75em; }
  #lightbox h3 { margin: 0.4em auto 0.9em; width: 70%; line-height: 1.7em; }

  header.scrolledDown { background-position: 0 -1px; height: 5vw; }
  header #logo.scrolledDown { transform: scale(0.7,0.7) translateY(-35%) }
  header #logo.scrolledDown .line { opacity: 0; }
  #pageNavOuter.scrolledDown {  transform: scale(0.77,0.77) translateY(-2vw) }
  /*
  nav#pageNav.scrolledDown #navBtnReel { transform: translateX(10vw); }
  nav#pageNav.scrolledDown #navBtnWork { transform: translateX(8vw); }
  nav#pageNav.scrolledDown #navBtnAbout { transform: translateX(-8vw);  }
  nav#pageNav.scrolledDown #navBtnContact { transform: translateX(-10vw);  }
  */
  nav#pageNav.scrolledDown #navBtnReel { left: 26vw; }
  nav#pageNav.scrolledDown #navBtnWork { left: 34vw; }
  nav#pageNav.scrolledDown #navBtnAbout { right: 34vw;  }
  nav#pageNav.scrolledDown #navBtnContact { right: 26vw;  }

  header.scrolledDown + section#playReelBtn {  margin: 6vw auto -0.5vw; }


}




/* LIGHTBOX */

#lightbox { background: rgba(0, 0, 0, 0.85); position: fixed; overflow-y: scroll; /*padding-right: 17px;*/ top: 0; left: 0; height: 100vh; width: 100vw; z-index: 20; transform: translate3d(0px, 0px, 4px); opacity: 0; display: none; }
#lightBoxInner { margin: 0 auto; position: relative; max-width: 1280px;  }
.lightboxContent { padding: 1em 1em 2em 1em;  display: none;  }

#lightbox h3 { background: none;  font-size: 1.7em; line-height: 1em;  font-weight: normal;  background:rgba(255,0,4,0.0);  text-shadow: 0 1px 20px  #000000;  }

#lightbox .involvement { margin-bottom: 1.5em; }
#lightbox h4 { background: none;  font-size: 1.2em; line-height: 1em;  font-weight: normal;  background:rgba(255,0,4,0.0);  text-shadow: 0 1px 20px  #000000;  margin: 1em 0 0.7em 0; }

.lightboxContent video, .lightboxContent img { max-width:100%; max-height: 66vh; height: auto; width:auto;}
.lightboxContent a { background: none !important; text-decoration: none; border-bottom: 1px dotted; padding-bottom: .05em; }
.lightboxContent a:hover { color: #FFFFFF !important; border-color: #FFFFFF !important;}

#lightbox .spacer { height: 1.5em; }
/*
.vimeo { position: relative; box-sizing: border-box; padding: 0 0 56.25% 0; max-height: 66vh; overflow: hidden; background: #CC0000; }
.vimeo iframe, .vimeo object, .vimeo embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  max-height: 66vh; }
.vimeo iframe { width: 1920px; height: 1080px; max-width:100%; max-height: 66vh; }
*/
.vimeo { /*background: #CC0000;*/ position: relative;  }
.vimeo iframe, .vimeo img {  position: absolute; top: 0; left: 50%;  transform: translate(-50%, 0); }

#lightbox p { font-size: 0.8em; }
#lightbox a { color: #ec6054;
}
#lightbox strong { background: none; }

#closeCorner { position: absolute; background: none;  top: 0; right: 0; opacity: 0.0; /*width: 11.7vw; height: 11.7vw; min-width:7.4em; min-height: 7.4em; max-width:11.4em; max-height: 11.4em;*/ width: 6em; height: 6em; }
#closeCorner polygon { stroke: none; }

#closeBtn { cursor: pointer;  display: block; color: #FFF; position: absolute;
top: 0; right: 0; width: 5em; height: 5em; }
#closeBtnIO { position: absolute; top: 0; left:  0; width: 100%; height: 100%; z-index: 200; /*background:rgba(255,0,4,0.01);*/ }
#closeBtn svg { position: absolute; top: 0; left: 0; background: transparent; }
#closeBtn .circle { fill: none;  stroke-width:4; }
#closeBtn #Cross { fill: none;  stroke:#FFFFFF; stroke-width:7; stroke-linecap:round; }
#closeBtn .wave {   }
#closeBtn p { display: none;  }