.graph-mb   {display: none}


@media (max-width: 1470px) {
    
    .article-hero   {height: 675px; min-height: unset; max-height: unset}
    #tvn-content .article-hero-text h1  {margin-bottom: 0.5em; font-size: 6.5vw; line-height: 7vw;}   
    
    #lottie2 {right: 50%; margin-right: -800px;}
    
    .section-five   {min-height: unset; max-height: unset; height: 53vw}
    
}


@media (max-width: 1350px) {
    
    .article-hero           {align-items: center; padding-left: 50px;}
    .intro-text-inner       {background-color: #ffffff; padding: 15px; display: inline-block}
    .article-hero-text      {padding-bottom: 0}
    .article-hero-text p    {font-size: 22px;}
    
}

@media (max-width: 1210px) {
    
    #lottie5    {right: auto; margin-right: 0; left: 50%; margin-left: -560px;}
    
}

@media (max-width: 1100px) {
    
    .chopsticks             {display: none}
    
    .intro-text-container   {padding-left: 0}
    .intro-text-container .dots {display: none}
    
    #lottie1        {width: 550px; margin-left: -80px;}
    .section-two    {height: 540px;}
    .convenience-store-text p   {font-size: 17px;}
    .convenience-store-text p.serif {font-size: 47px;}
    .convenience-store-text         {margin-right: -430px;}
}

@media (max-width: 1000px) {
    
    #lottie4,
    #lottie5   {display: none}
    
}

@media (max-width: 980px) {
    
    #lottie1                {width: 640px; margin-left: -320px; left: 50%; margin-bottom: -60px;}
    #lottie2                {position: relative; margin: 0; margin-left: -390px; left: 50%; right: auto; z-index: 20}
    .section-two            {height: auto;}   
    .section-two .inner     {display: flex; flex-direction: column}
    .convenience-store-text {position: relative; margin: auto; top: auto; right: auto; position: relative; z-index: 5}
    .path                   {bottom: 81px;}
}

@media (max-width: 900px) {
    
    .article-hero       {height: auto; padding: 0; flex-direction: column; align-items: flex-start; margin-bottom: -20px;}
    .article-hero-text  {width: 100%; padding: 0 30px; transform: translateY(-60px);}
    .article-hero-image {background-size: cover; position: relative; height: 95vw;}
    .top-shape          {display: none;}
    .intro-text-container       {width: 550px; max-width: 100%; padding: 0}
    .intro-text-container p     {width: 100%;}
    .intro-text-inner           {padding: 0 0 0 10px}
    
    #tvn-content .article-hero-text h1 {margin-bottom: 0.5em; font-size: 8.5vw; line-height: 9vw;}
    
    article {padding-top: 0}
    
    blockquote  {width: 560px;}
    .quotemark  {left: 50%; margin-left: -250px;}
}

@media (max-width: 800px) {
    
    .graph-mb      {display: block; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto}
    #lottie3       {display: none}
    
}

@media (max-width: 700px) {
    
    #lottie1    {width: 100%; margin-left: -55%;}
    #lottie2    {width: 800px; margin-left: -335px;}
}
    
    
@media (max-width: 640px) {
    
    #tvn-content h2 {font-size: 35px;}
    
    .first-character                {margin: 0 15px -20px 0; display: inline-block; font-size: 84px; line-height: 83px;}
    #tvn-content .article-inner p   {font-size: 16px;}
    
    .section-three  {padding-top: 50px;}
    
    .section-five   {margin: 40px 0}
    
    blockquote      {width: 430px;}
    blockquote p    {width: 360px; font-size: 35px;}
    .quotemark      {margin-left: -180px; width: 50px; height: 42px; background-size: cover;}
    
}

@media (max-width: 500px) {
    
    .article-hero                       {margin-bottom: -30px;}
    .article-hero-text                  {padding-left: 15px; padding-right: 15px;}
    #tvn-content .article-hero-text h1  {font-size: 40px; line-height: 44px; letter-spacing: 1px}
    .article-hero-text p                {font-size: 20px;}

    #lottie2    {width: 600px; margin-left: -250px;}

    .convenience-store-text p.serif           {font-size: 40px;}
    .convenience-store-text p:nth-child(2)  {margin-left: 15px;}
    .convenience-store-text p:nth-child(3)  {margin-left: 30px;}
    .convenience-store-text p:nth-child(4)  {margin-left: 45px;}

    blockquote      {width: 320px;}
    blockquote p    {width: 280px; font-size: 25px; letter-spacing: 0}
    .quotemark      {margin-left: -140px;}
    
    .blockquote-container {margin: 110px 0 50px 0;}
    
    .section-seven  {padding-top: 20px;}

    .btn-text-text      {width: auto}
    .btn-text-text span {font-size: 30px; height: 78px;}
    .cta-container      {padding: 50px 0; margin-top: 40px;}
}

@media (max-width: 400px) {

    .convenience-store-text p.serif         {font-size: 30px;}
    .convenience-store-text p:nth-child(2)  {margin-left: 0;}
    .convenience-store-text p:nth-child(3)  {margin-left: 0;}
    .convenience-store-text p:nth-child(4)  {margin-left: 0 ;}
    .convenience-store-text p           {font-size: 13px;}           
}