@media only screen and (max-width: 1367px) {
   .retained-states .countries-flags .county-flag img {
      z-index: 1;
      position: relative;
      margin: auto;
      max-width: 200px;
      width: 100%;
   }

   .vote--sec--heading--three {
      padding-bottom: 20px;
      padding-top: 80px;
   }

   .map--div--block--dem--scen--01 .container {
      max-width: 1250px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--div {
      max-width: 1250px;
      width: 100%;
      margin: auto;
   }

}

@media only screen and (max-width: 1025px) {

   .main.scenario--01--hero-banner-bg {
      padding: 80px 30px 120px 30px;
   }

   .scenario--01--hero-banner-bg .biden--img {
      top: 0;
   }

   .scenario--01--hero-banner-bg .biden--img:before {
      content: "";
      width: 350px;
      height: 450px;
   }

   .vote--sec--heading--three {
      font-size: 26px;
      padding-bottom: 20px;
      padding-top: 80px;
   }

   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 160px;
   }

   .progress--bar--div {
      max-width: 1000px;
      width: 100%;
      margin: auto;
   }

   .map--div--block--dem--scen--01 .container {
      max-width: 1000px;
      width: 100%;
      margin: auto;
   }

   .result--notice h3 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 28px;
      font-style: normal;
      font-weight: 600;
      line-height: 46.836px;
   }
}

@media only screen and (max-width: 980px) {
   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 140px;
   }

   .retained-states .countries-flags .county-flag h3 {
      font-size: 26px;
      font-weight: 300;
      text-align: center;
      padding-top: 20px;
   }

   .retained-states .countries-flags .county-flag h3 span {
      font-size: 20px;
      font-weight: 700;
   }

   .vote--sec--heading--three {
      font-size: 22px;
      padding-bottom: 20px;
      padding-top: 80px;
   }

   .map--div--block--dem--scen--01 .container {
      max-width: 800px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--block .legend-bar {
      min-height: 35px;
      width: 100% !important;
   }

   .progress--bar--block .legend-label {
      font-size: 26px;
      margin-right: 10px;
   }

   .progress--bar--div {
      max-width: 800px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--block .legend-item {
      font-size: 26px;
   }

   .progress--bar--div {
      max-width: 800px;
      width: 100%;
      margin: auto;
   }

   .result--notice h2 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 26px;
      font-weight: 300;
      line-height: 1.6em;
      padding-top: 32px;
      padding-bottom: 15px;
   }

   .result--notice h3 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 46.836px;
   }

   .btn-vote {
      border-radius: 10px;
      margin: 0;
   }

   .result--next,
   .result--next--oppo {
      border-radius: 10px;
   }

}

@media screen and (max-width: 820px) {
   .dem--scen--01 {
      display: grid;
      grid-template-columns: 100%;
   }

   .dem--scen--01 .left--block {
      order: 2;
   }

   .dem--scen--01 .advert--block {
      order: 1;
   }

   .advert--block {
      display: grid;
      grid-template-columns: 50% 50%;
   }

   .dem--scen--01 .left--block .container {
      max-width: 800px;
      width: 100%;
      margin: auto;
   }

   .dem--scen--01 .left--block--heading {
      margin: 0;
      padding-top: 30px;
   }

   .dem--scen--01 .vote--sec--heading--one {
      margin: 0;
      padding-bottom: 10px;
   }

   .dem--scen--01 .left--block .retained-states.container {
      padding-top: 15px;
      padding-bottom: 15px;
   }

   .vote--sec--heading--two {
      padding: 0;
      margin: 0;
   }

   .vote--sec--heading--three {
      font-size: 24px;
      padding-bottom: 20px;
      padding-top: 60px;
      margin: auto;
   }

   .advert--block .block--title {
      padding: 15px 10px;
   }

   .advert--block .block--title h3 {
      font-size: 26px;
      line-height: 1.4em;
      margin: 0;
   }

   .vote--sec {
      padding-top: 25px;
   }

}

@media screen and (max-width: 768px) {
   .main.scenario--01--hero-banner-bg {
      padding: 80px 15px 120px 15px;
   }

   .scenario--01--hero-banner-bg .biden--img:before {
      content: "";
      width: 270px;
      height: 450px;
   }
}

@media screen and (max-width: 550px) {
   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 100px;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):before {
      height: 30px;
      top: 28%;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):after {
      height: 30px;
      top: 28%;
   }

   .retained-states .countries-flags .county-flag h3 {
      font-size: 20px;
      padding-top: 15px;
   }

   .retained-states .countries-flags .county-flag h3 span {
      font-size: 16px;
   }

   .vote--sec--heading--three {
      font-size: 20px;
      padding-bottom: 20px;
      padding-top: 60px;
      margin: auto;
   }

   .map--div--block--dem--scen--01 .container {
      max-width: 500px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--div {
      max-width: 700px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--block .legend-item {
      font-size: 20px;
      line-height: 1.2em;
   }

   .progress--bar--block .legend-label {
      font-size: 20px;
      margin-right: 10px;
      line-height: 1.2em;
   }

   .result--notice h2 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 18px;
      font-weight: 300;
      line-height: 1.6em;
      padding-top: 32px;
      padding-bottom: 15px;
   }

   .result--notice h3 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 46.836px;
   }


   .countries-flags.voting--states.two-cols .county-flag:nth-child(2):before {
      height: 40px !important;
      top: 30%;
   }

}

@media screen and (max-width: 440px) {
   .dem--scen--01 .left--block--heading {
      margin: 0;
      padding-top: 15px;
      font-size: 24px;
   }

   .dem--scen--01 .vote--sec--heading--one {
      margin: 0;
      padding-bottom: 10px;
      font-size: 22px;
   }

   .dem--scen--01 .left--block .container {
      max-width: 400px;
      width: 100%;
      margin: auto;
   }

   .retained-states .countries-flags {
      grid-template-columns: 33% 33% 33%;
      margin-right: 0;
      padding: 0;
   }

   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 80px;
   }

   .retained-states .countries-flags .county-flag h3 {
      font-size: 18px;
      padding-top: 15px;
   }

   .retained-states .countries-flags .county-flag h3 span {
      font-size: 14px;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):before {
      height: 20px;
      top: 28%;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):after {
      height: 20px;
      top: 28%;
   }

   .vote--sec--heading--two {
      padding: 0;
      margin: 0;
      font-size: 24px;
   }

   .vote--sec--heading--three {
      font-size: 14px;
      padding-bottom: 20px;
      padding-top: 30px;
      margin: auto;
   }

   .map--div--block--dem--scen--01 .container {
      max-width: 300px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--div {
      max-width: 300px;
      width: 100%;
      margin: auto;
   }

   .progress--bar--block .legend-bar {
      min-height: 15px;
      width: 100% !important;
   }

   .progress--bar--block .legend-item {
      font-size: 12px;
      line-height: 1.2em;
   }

   .progress--bar--block .legend-label {
      font-size: 14px;
      margin-right: 5px;
      line-height: 1.2em;
   }

   .result--notice h2 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 10px;
      font-weight: 700;
   }

   .btn-vote {
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 10px;
      margin-left: 0;
   }

   .result--notice h3 {
      color: #232323;
      text-align: center;
      font-family: Poppins;
      font-size: 15px;
      font-style: normal;
      font-weight: 600;
      line-height: 2.4em;
   }

   .result--next, .result--next--oppo {
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 10px;
   }

   .result--notice.pb-120 {
      padding-bottom: 15px;
   }

   .scenario--01--hero-banner-bg .biden--img:before {
      width: 160px;
      height: 360px;
   }

   .advert--block .block--title h3 {
      font-size: 16px;
      line-height: 1em;
      margin: 0;
   }

   .advert--block .block--title {
      padding: 10px 5px px;
   }

   .progress--bar--block.toss--up--state #legend-container .legend-item:nth-child(2), .progress--bar--block.toss--up--state #legend-container .legend-item:nth-child(2) .legend-label {
      color: #808080;
      text-align: center;
      font-size: 10px;
   }


}

@media screen and (max-width: 321px) {

   .advert--block .advert--1 img, .advert--block .advert--2 img {
      width: 100%;
      height: 100px;
   }

   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 60px;
   }

   .retained-states .countries-flags .county-flag h3 {
      font-size: 14px;
      padding-top: 15px;
   }

   .retained-states .countries-flags .county-flag h3 span {
      font-size: 10px;
   }

   .vote--sec--heading--three {
      font-size: 10px;
      padding-bottom: 10px;
      padding-top: 15px;
      margin: auto;
   }

   .progress--bar--block .legend-label {
      font-size: 12px;
      margin-right: 5px;
      line-height: 1.2em;
   }

}

@media screen and (max-width: 281px) {
   .main.scenario--01--hero-banner-bg h1 {
      font-size: 24px;
   }

   .scenario--01--hero-banner-bg .biden--img:before {
      width: 140px;
      height: 320px;
   }

   .dem--scen--01 .left--block--heading {
      margin: 0;
      padding-top: 15px;
      font-size: 18px;
   }

   .dem--scen--01 .vote--sec--heading--one {
      margin: 0;
      padding-bottom: 10px;
      font-size: 18px;
   }

   .vote--sec--heading--two {
      padding: 0;
      margin: 0;
      font-size: 18px;
   }

   .dem--scen--01 .left--block .vote--sec .retained-states.container .countries-flags.voting--states .county-flag img {
      max-width: 50px;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):before {
      height: 15px;
      top: 23%;
   }

   .countries-flags.voting--states .county-flag:nth-child(2):after {
      height: 15px;
      top: 23%;
   }

   .retained-states .countries-flags .county-flag h3 {
      font-size: 12px;
      padding-top: 15px;
   }

   .retained-states .countries-flags .county-flag h3 span {
      font-size: 8px;
   }

   .countries-flags.voting--states.two-cols .county-flag:nth-child(2):before {
      height: 15px !important;
      top: 27%;
   }


}