/*

Abdul Haseeb Q.
twistyBRAT 鬼 ];)
a.haseeb199@gmail.com
https://probdone.com

Yo! Just a devious boring typical guy skilled Front End Development | Web Development & Design | HTML & CSS | SASS | Bootstrap | JavaScript | WordPress Development | Googling | Tech Enthusiast | Learning Enthusiast &  likes Anime + Manga + Comics + Gaming + Weird things and a lot of Music 🙀👽

https://www.facebook.com/twistyBRATVA
https://www.linkedin.com/in/abdul-haseeb-qamar
https://www.instagram.com/abdul_haseeb_qamar

*/

/*

 ____  ____  ____  ____  ____  ____  ____  ____
||P ||||r ||||o ||||b ||||d ||||o ||||n ||||e ||
||__||||__||||__||||__||||__||||__||||__||||__||
|/__\||/__\||/__\||/__\||/__\||/__\||/__\||/__\|


 ______   ______   ______   ______   _____    ______   ______   ______
| |  | \ | |  | \ / |  | \ | |  | \ | | \ \  / |  | \ | |  \ \ | |
| |__|_/ | |__| | | |  | | | |--| < | |  | | | |  | | | |  | | | |----
|_|      |_|  \_\ \_|__|_/ |_|__|_/ |_|_/_/  \_|__|_/ |_|  |_| |_|____


.------..------..------..------..------..------..------..------.
|P.--. ||R.--. ||O.--. ||B.--. ||D.--. ||O.--. ||N.--. ||E.--. |
| :/\: || :(): || :/\: || :(): || :/\: || :/\: || :(): || (\/) |
| (__) || ()() || :\/: || ()() || (__) || :\/: || ()() || :\/: |
| '--'P|| '--'R|| '--'O|| '--'B|| '--'D|| '--'O|| '--'N|| '--'E|
`------'`------'`------'`------'`------'`------'`------'`------'

 ______                 _          _
(_____ \               | |        | |
 _____) )  ____   ___  | | _    _ | |  ___   ____    ____
|  ____/  / ___) / _ \ | || \  / || | / _ \ |  _ \  / _  )
| |      | |    | |_| || |_) )( (_| || |_| || | | |( (/ /
|_|      |_|     \___/ |____/  \____| \___/ |_| |_| \____)

*/



.main.scenario--01--hero-banner-bg {
  background: url("/public/images/hero-banner.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 45px 120px 45px;
  margin: auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.main.scenario--01--hero-banner-bg h1 {
  font-size: 64px;
  margin: auto;
  width: 716px;
  font-weight: 300;
  line-height: 83.264px;
  color: #fff;
  padding-bottom: 30px;
  z-index: 1;
  position: relative;
}

.main.scenario--01--hero-banner-bg p {
  z-index: 1;
  position: relative;
}

.main.scenario--01--hero-banner-bg .remocan {
  display: flex;
  justify-content: center;
  gap: 150px;
}

.main.scenario--01--hero-banner-bg .remocan img {
  width: 150px;
}

.main.scenario--01--hero-banner-bg .remocan h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  padding-top: 50px;
}

.scenario--01--hero-banner-bg .biden--img {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0px;
}

.scenario--01--hero-banner-bg .biden--img:before {
  content: "";
  width: 430px;
  height: 320px;
  background: url("/public/images/US.png");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: block;
}

.inner-container .remocan {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  text-align: center;
  width: 1200px;
  margin: auto;
}

.inner-container .remocan img {
  width: 130px;
}

.inner-container .remocan h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  padding-top: 50px;
}

.scenario--01--hero-banner-bg .remocan .democrat {
  cursor: pointer;
  transform: scale(1);
  transition: 0.3s ease-in-out all;
}

.scenario--01--hero-banner-bg .remocan .democrat:hover {
  transform: scale(1.1);
  transition: 0.3s ease-in-out all;
}

.inner-container .remocan .democrat h3 {
  color: #fff;
  padding-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 31.224px;
}

.three-logos {
  padding: 0px 45px 20px 45px;
  margin-top: -70px;
}

.three-logos.container {
  background: #25559f;
  border-radius: 25px;
  padding: 120px 45px;
}

.three-logos .inner-container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  background: #25559f;
  border-radius: 25px;
  padding: 40px 45px;
  position: relative;
}

.inner-container .left-arrow {
  position: absolute;
  left: 0;
  top: 0;
}

.three-logos .left-arrow::before {
  content: "";
  width: 550px;
  height: 174px;
  background: url(/public/images/left-arrow.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
  margin-left: 10px;
  margin-top: 5px;
}

.inner-container .right-arrow {
  position: absolute;
  right: 0;
  top: 0;
}

.three-logos .right-arrow::before {
  content: "";
  width: 550px;
  height: 174px;
  background: url(/public/images/right-arrow.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  display: block;
  margin-right: 10px;
  margin-top: 5px;
}

.retained-states h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 62.448px;
  text-align: center;
}

.retained-states .countries-flags {
  background: url(/public/images/countries-line.png);
  background-position: center 55px;
  background-repeat: no-repeat;
  background-size: 57% 40%;
  margin-right: -80px;

  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  padding-bottom: 20px;
}

.retained-states .countries-flags.two-cols {
  display: grid;
  grid-template-columns: 50% 50%;
}

.retained-states .countries-flags {
  background: url(/public/images/countries-line.png);
  background-position: center 55px;
  background-repeat: no-repeat;
  background-size: 57% 40%;

  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  padding-bottom: 20px;
}

.retained-states .countries-flags .county-flag img {
  z-index: 1;
  position: relative;
  margin: auto;
  max-width: 250px;
  width: 100%;
}

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

.retained-states .countries-flags .county-flag {
  text-align: center;
}

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

.main.scenario--01--hero-banner-bg .herp--para {
  width: 100%;
  font-size: 20px;
  line-height: 38px;
  font-weight: 300;
  margin: auto;
}

.scenarios--result h2 {
  text-align: center;
  font-family: Poppins;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 62.448px;
  color: #232323;
}

.scenarios--result .scene--list--block .title {
  display: grid;
  grid-template-columns: 25% 75%;
  padding-bottom: 29px;
  margin-top: 40px;
}

.scenarios--result .scene--list--block .title .title--1 {
  color: #232323;
  font-family: Poppins;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 54.4px;
}

.scenarios--result .scene--list--block .title .title--2 {
  font-family: Poppins;
  font-size: 26px;
  /*font-size: 36px;*/
  font-style: normal;
  font-weight: 700;
  line-height: 54.4px;
}

.scenarios--result .scene--list--block .scene--list {
  display: grid;
  grid-template-columns: 25% 75%;
  gap: 20px 0;
}

.scenarios--result .scene--list--block .scene--list .scene--list--title {
  color: #232323;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 54.4px;
}

.scenarios--result .scene--list--block .scene--list .percent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.scenarios--result .scene--list--block .scene--list .percent .progress {
  width: 100%;
  min-height: 20px;
  border-radius: 0;
  background: #808080;
}

.scenarios--result .scene--list--block .scene--list .dem.percent .progress .progress-bar {
  background: #25559F;
}

.scenarios--result .scene--list--block .scene--list .rep.percent .progress .progress-bar {
  background: #dc0b10;
}

.scenarios--result .scene--list--block .scene--list .draw.percent .progress .progress-bar {
  background: #000000;
}

.scenarios--result .scene--list--block .scene--list .percent .vote--count {
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 44.64px;
  margin-left: 10px;
  flex: 0 0 100px;
}

/* .dem--scen--01 .left--block {
  display: flex;
  align-items: center;
} */

.countries-flags.voting--states {
  background: none;
  position: relative;
}

.countries-flags.voting--states .county-flag {
  position: relative;
}

.countries-flags.voting--states .county-flag:nth-child(2):after {
  content: '';
  display: block;
  width: 210px;
  height: 40px;
  /* width: 235px;
  height: 68px; */
  background: url('/public/images/plus.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  right: -105px;
}

.countries-flags.voting--states .county-flag:nth-child(2):before {
  content: '';
  display: block;
  width: 190px;
  height: 40px;
  /* width: 235px;
  height: 68px; */
  background: url('/public/images/plus.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  left: -95px;
}

.countries-flags.voting--states.two-cols .county-flag:nth-child(2):after {
  display: none;
}

.countries-flags.voting--states.two-cols .county-flag:nth-child(2):before {
  content: '';
  display: block;
  width: 300px;
  height: 90px;
  background: url('/public/images/plus.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  left: -150px;
}

.two-cols .county-flag:nth-child(2):before {
  content: '';
  display: block;
  width: 300px;
  height: 60px !important;
  background: url(/public/images/plus.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  left: -150px;
}