html{font-size: 16px;}

  
@media (min-device-width: 250px){

  .sylogo{flex-grow: 1;align-self: center;display: flex;}
  .claimjump{ flex-grow: 2;align-self:center;display:flex; }
  .ham{flex-grow: 5;align-self: center;display: flex;align-items: right;}
  .claimer{padding:0.5em 0.7em;text-align:center;background:#0080ff;color: #fff;font-size: 1.8em;border-radius:6px;display:inline;position:relative;font-family:'Raleway';margin-left:10%;}

  .navy{display:flex;background: #fff;padding:15px 0;width:100%;}

  .pcmenuitem
{display:none;}

.pars{color:#fff;text-align:left;font-size:3.5em;margin:3em 0 0 40px;position:relative;font-weight:600;line-height: 1.6em;font-family: 'Raleway';}



.logoimg{margin-left:20%;height:6.5em;}


    /*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: #fff;
  border: 0;
  margin: 0 0 10px 0;
  overflow: visible;
  margin-right:15%; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 14px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -14px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 60px;
    height: 7px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.17s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: 20px; }
  .hamburger-inner::after {
    bottom: 0px; }




/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
  .hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.20s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
  .hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }

    #myLinks {
  display: none;

  position: relative;

}

.mobpanel
{  
      height: 100vh;
  text-align: center;
background-image: linear-gradient( 186.8deg,  rgba(243,245,255,1) 17.7%, rgba(239,237,255,1) 88.5% );padding: 3em 0 0 0;
margin-bottom: 0;
}

.moblinks{font-size: 4.7em;position: relative;font-family: 'Raleway';text-decoration: none;color: navy;display: block;margin-bottom: 1.75em;}

.linksys{text-decoration: none;}


.logotain{position: relative;align-self: center;flex-grow: 1;}

.onlogo{height: 7em;margin-left: 7%;}

.claimcntr{align-self: center;flex-grow: 1;display: flex;}

.claimbtn{position: relative;margin-left: 1em;display: table;background: #0080ff;font-family: 'Raleway';border-radius: 5px;padding: 0.75em 1.1em;color: #fff;font-size: 1.5em;}

.mobnav{position: relative;font-family: 'Raleway';font-size: 1.5em;align-self: center;flex-grow: 6;text-align: right;}

header{width: 100%;display: absolute;background: #fff;padding: 1em 0;}
  
}



@media (min-device-width: 576px) { 
  @keyframes animatetop{0%{top:-35vh;left: 35vw;opacity:0;height:75px;} 50%{top:45vh;left: 35vw;opacity:1;height: 260px;} 100%{top:35px;left: 35px;opacity:1;height: 200px;}}

   .pars{color:#fff;text-align:left;font-size:2em;margin:1.8em 0 0 40px;position:relative;font-weight:600;line-height: 1.6em;}


 }


@media (min-device-width: 768px) { 
  @keyframes animatetop{0%{top:-35vh;left: 35vw;opacity:0;height:75px;} 50%{top:45vh;left: 35vw;opacity:1;height: 260px;} 100%{top:35px;left: 35px;opacity:1;height: 200px;}}

   .pars{color:#fff;text-align:left;font-size:2em;position:relative;font-weight:600;line-height: 1.6em;}




 .onlogo{height: 4em;margin-left: 12%;}
 .claimbtn{position: relative;margin-left: 0em;display: table;background: #0080ff;font-family: 'Raleway';border-radius: 5px;padding: 0.75em 1.1em;color: #fff;font-size: 1em;}
 header{padding: 0.3em 0 0.2em 0;}

}


@media (min-device-width: 992px) { 
  
  @keyframes animatetop{0%{top:-35vh;left: 35vw;opacity:0;height:75px;} 50%{top:45vh;left: 35vw;opacity:1;height: 260px;} 100%{top:35px;left: 35px;opacity:1;height: 100px;}}

  .pars{color:#fff;text-align:left;font-size:2em;margin-left: 50px;position:relative;font-weight:600;}



.hamburger{display: none;}


  

}


@media (min-device-width: 1200px) { 
  
  @keyframes animatetop{0%{top:-35vh;left: 35vw;opacity:0;height:75px;} 50%{top:45vh;left: 35vw;opacity:1;height: 260px;} 100%{top:35px;left: 35px;opacity:1;height: 100px;}}

  .pars{color:#fff;text-align:left;font-size:2em;margin-left: 50px;position:relative;font-weight:600;} 

}


@media (min-device-width: 1400px) { 

  @keyframes animatetop{0%{top:-35vh;left: 35vw;opacity:0;height:75px;} 50%{top:45vh;left: 35vw;opacity:1;height: 260px;} 100%{top:35px;left: 35px;opacity:1;height: 100px;}}

  .pars{color:#fff;text-align:left;font-size:2.5em;margin-left: 50px;position:relative;font-weight:600;} 


 
}





  .reveal1{position: relative;animation: show1 0.85s forwards;animation-delay: 1.35s;opacity: 0;}
    .reveal2{position: relative;animation: show2 0.85s forwards;animation-delay: 2.65s;opacity: 0;}
    .reveal3{position: relative;animation: show3 0.85s forwards;animation-delay: 4.45s;opacity: 0;display: inline-block;}
    .reveal4{position: relative;animation: show4 0.85s forwards;animation-delay: 5.05s;opacity: 0;display: inline-block;margin-left: 3px;}
    .reveal5{position: relative;animation: show5 0.85s forwards;animation-delay: 5.65s;opacity: 0;display: inline-block;margin-left: 3px;}
    .reveal6{position: relative;animation: show6 0.85s forwards;animation-delay: 6.25s;opacity: 0;display: inline-block;margin-left: 3px;}  @keyframes show1{from{opacity: 0;} to{opacity: 1;}}
  @keyframes show2{from{opacity: 0;} to{opacity: 1;}}
  @keyframes show3{from{opacity: 0;} to{opacity: 1;}}
  @keyframes show4{from{opacity: 0;} to{opacity: 1;}}
  @keyframes show5{from{opacity: 0;} to{opacity: 1;}}
  @keyframes show6{from{opacity: 0;} to{opacity: 1;}}

html{
  margin: 0;

}
  body{
    /*
      background-image: url('/images/sycharbkg.jpg');
    background-position: fill;
    */
    background-image: linear-gradient(135deg,#001b40,#021e3e);
    margin: 0;

  
  }
  .cover{width: 100%;height: 100%;padding: 0;margin: 0;background: rgba(0,0,0,0.7);position: fixed;}

  .bolds{
    font-weight: bold;color: #86e5f4;
  }


.container
{
  padding-bottom: 100px;
}

.menu-item{color: #001c40;font-size:1.1em;font-weight: 500;padding: 0px 15px;position:relative;font-family:sans-serif;align-self: center;}






button{ -webkit-tap-highlight-color: transparent;}