:root {
    --white: #fff;
    --black: #000;
    --yellow: #f0e303;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Poppins', Arial; font-size: 16px; color: var(--black); line-height: 2; background-color: #f7f6f6; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
p { margin-bottom: 20px; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h2 { margin-bottom: 20px; font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }

/* global */
.centered { padding-right: calc((100% - 820px)/ 2); padding-left: calc((100% - 820px)/ 2); }

/* wrapper */
.wrapper { width: 100%; position: relative; overflow: hidden; }

/* header */
.header { padding: 20px 20px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; justify-content: center; align-items: center; } 
.header .logo { width: 120px; height: 31px; display: block; }
.header .logo svg { width: 120px; height: 31px; }

/* hero */
.hero { padding-top: 80px; margin-bottom: 20px; width: 100%; display: flex; justify-content: space-between; overflow: hidden; position: relative; min-height: 720px; z-index: 1; }
.hero.centered { padding-right: calc((100% - 1000px)/ 2); padding-left: calc((100% - 1000px)/ 2); }
.hero .text { width: calc(100% - 350px); position: relative; z-index: 1; }
.hero .title { padding-left: 150px; margin: -30px 0 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; line-height: 1.2; }
.hero .byline { text-align: center; width: 100%; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.6; }
.hero .evm { padding-top: 20px; width: 348px; position: relative; z-index: 1; }
.hero .chunav { width: 60%; }
.hero .matgadna { text-align: right; }
.hero .evmImg { position: relative; z-index: 1; width: 100%; }
.hero .evmImg:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ''; width: calc(100% + 80px); height: calc(100% + 80px); z-index: -1; background: url(../images/evm-shadow.png) no-repeat; background-size: contain; }
.hero .hand { position: absolute; right: -9px; top: 20%; z-index: 1; width: 150px; animation: aniHand 1s ease 500ms backwards; }
.hero .hand:before { position: absolute; left: -14px; top: 24%; width: 7px; height: 7px; border-radius: 50%; content: ''; background-color: #0ac200; animation: aniDot 0.5s ease 1.4s backwards; }
.hero .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero .top { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; height: 72%; }
.hero .top img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero .pollingBox { position: absolute; right: 0; top: 0; width: 580px; transition-delay: 2s; }

@keyframes aniHand {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes aniDot {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* text */
.textSec { margin-bottom: 40px; width: 100%; } 
.textSec .byline { margin-bottom: 20px; text-align: center; width: 100%; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.6; }
.textSec .textBlock { margin-bottom: 40px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.textSec .icon { width: 50px; }
.textSec .content { width: calc(100% - 70px); }
.textSec .content h3 { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd; }
.textSec .list { margin-bottom: 20px; width: 100%; }
.textSec .list:last-child { margin-bottom: 0; }
.textSec .list li { padding-left: 25px; position: relative; }
.textSec .list li:before { position: absolute; left: 0; top: 11px; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--black); }
.textSec .list li a { color: #0000ff; position: relative; }
.textSec .list li a:before { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); transition: var(--transition); content: ''; height: 2px; width: 100%; background-color: var(--black); }
.textSec .list li a:hover:before { width: 0; }
.textSec h4 { margin-bottom: 10px; }
.textSec .image { margin-bottom: 20px; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
.textSec .image img { height: auto; }
.textSec .caption { margin-top: 10px; width: 100%; text-align: center; display: block; font-size: 12px; line-height: 1.6; }
.textSec .iconBlock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }
.textSec .bigIcon { width: 100px; }
.textSec .iconBlock .list { width: calc(100% - 130px); }

/* footer top */
.footerTop {width: 100%; height: 250px; }
.footerTop img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.4; }

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }

/* copyright */
.copyright { padding-top: 15px; padding-bottom: 15px; font-size: 14px; text-align: center; color: var(--white); width: 100%; background-color: var(--black); }

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); opacity: 0; visibility: hidden; }
.share-btn.show { opacity: 1; visibility: visible; }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); }

@media screen and (max-width: 1040px)  {
  .hero.centered { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 860px)  {
  .centered { padding-left: 20px; padding-right: 20px; }
  .hero { min-height: 600px; }
  .hero .top { height: 80%; }
  .hero .text { width: calc(100% - 330px); }
  .hero .title { padding-left: 92px; margin-top: -20px; font-size: 22px; }
  .hero .evm { padding-top: 19px; width: 323px; }
  .hero .pollingBox { width: 450px; }
}

@media screen and (max-width: 767px)  {
  h2 { font-size: 20px; }
  h3 { font-size: 18px; line-height: 1.6; }

  .hero { padding-top: 70px; min-height: 600px; display: block; }
  .hero .subtitle { font-size: 18px; }
  .hero .text { padding-top: 0; margin-bottom: 40px; width: 100%; }
  .hero .title { padding-left: 70px; margin-top: -10px; font-size: 18px; font-weight: 500; }
  .hero .chunav { max-width: 200px; width: 100%; }
  .hero .matgadna img { margin-left: auto; max-width: 400px; width: 100%; }
  .hero .evm { padding-top: 0; margin: 0 auto; width: 300px; }
  .hero .hand { top: 30.2%; right: -20px; }
  .hero .hand:before { top: 20%; }
  .hero .pollingBox { top: 40%; width: 360px; }

  .textSec .icon { width: 32px; }
  .textSec .content { width: calc(100% - 50px); }

  .footerTop { height: 150px; }
}