@import "nullstyle.css";
@import "variables.css";

body {
  background-color: var(--light-gray);
}
.white {
  background-color: white;
  box-shadow: 12px 0 15px -4px rgba(190, 197, 206, 0.8),
    -12px 0 8px -4px rgba(190, 197, 206, 0.8);
}
/*=============== WELCOME ===============*/
.welcome {
  background-color: var(--main-color);
  background-position: center;
  background-size: cover;
}

.first {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  margin-top: 4.5rem;
}

.name {
  /*width: 35%;*/
  font-size: calc(2rem + 0.390625vw);
  color: var(--body-color);
  line-height: 3rem;
  font-weight: 600;
}

/*=============== TABS SUBTITLE ===============*/
.tabs {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: -3rem;
  background-color: var(--light-color);
  border-bottom: 0.1rem solid var(--light-gray);
}

.tab__subtitle {
  width: 100%;
  padding: 1rem 5rem;
  margin: 0 3rem;
}

.tab__subtitle:hover,
.active {
  border-bottom: 0.2rem solid var(--main-color);
}

.content {
  width: 88%;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: justify;
}
.contentt {
  padding: 3rem;
  background-color: var(--light-color);
  /* display: flex;
  justify-content: space-between; */
}

.pzh {
  display: block;
}

.unvisible {
  display: none;
}

.subTabs {
  width: 30%;
  padding: 3rem;
}

.subTab {
  padding: 1rem;
}

.subTab-active {
  border-left: 0.2rem solid var(--main-color);
  color: var(--main-color);
}

.subContents {
  width: 70%;
  padding: 3rem;
}

.gs-speaker-bg {
  position: relative;
  text-align: center;

}

.gs-speaker-wrapper {
  position: absolute;
  top: 0%;
  left: 6%;
  right: 8%;
  transform: translateY(-50%);
  height: 125px;
}

.gs-speaker {
  height: 80px;
  width: 80px;
}

.pulse {

  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-image: radial-gradient(
    circle closest-side,
    #003c83,
    transparent
  );
  border: solid 1px solid rgba(255, 255, 255, 0.8);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gs-speaker-left {
  position: absolute;
  top: 73%;
  left: 54%;
  transform: translate(-50%, -50%);
}

.speaker {
  width: 25%;
}

.vyplata {
  font-size: var(--normal-font-size);
  color: var(--text-gray-color);
  padding: 0.7rem 1rem;
}
.vyplataLii {
  font-size: var(--normal-font-size);
  color: var(--text-gray-color);
  padding: 0.7rem 0rem 0.2rem 1rem;
}
.vyplataIn {
  font-size: var(--normal-font-size);
  color: var(--text-gray-color);
  padding: 0.2rem 1rem;
  margin-left: 1.5rem;
}

.italic{
  font-style: italic;
}
.bigger {
  font-size: var(--bigger-font-size);
  color: var(--main-color);
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  padding-right: 1rem;
    line-height: 1.4rem;
}

.vyplataBig {
  text-align: center;
  font-size: var(--bigger-font-size);
  color: var(--main-color);
  padding-top: 1.5rem;
  padding-bottom: 0.7rem;
}

.content li {
  text-align: justify;
  list-style-position: inside;
  font-size: var(--normal-font-size);
  padding: 0.3rem 1rem;
    line-height: 1.4rem;
  color: var(--text-gray-color);
}

.table-overflow-wrapper {
  width: 100%;
  overflow-x: auto;
  text-align: center;
}
table {
  border-collapse: collapse;
  width: 100%;
    color: black;

}
.table-default th {
  color:var(--main-color);
  font-size: 14px;
  border: 1px solid solid var(--main-color);
  padding: 10px;
  text-align: center;
  border: 2px solid;
}
.table-default td {
  border: 2px solid var(--main-color);
  text-align: center;
  /* color: #003c83; */
}

.border {
  margin: 0 1rem;
  border: 2px solid var(--main-color);
  border-radius: 1rem;
}

.vazhno {
  display: flex;
  padding: 1rem 1rem;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.blue {
  padding: 1rem 1rem;
  background-color: #003c83;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.blue p {
  font-size: var(--bigger-font-size);
  color: white;
  padding: 0.5rem;
}

.rest {
  padding: 1rem 1rem;
  background-color: #eeebeb;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.rest p {
  font-size: var(--bigger-font-size);
  color: var(--text-gray-color);
}

.main1 {
  display: flex;
  padding: 1rem 1rem;
}
.main2 {
  width: 25%;
  display: flex;
  padding-right: 1rem;
  flex-direction: column;
   justify-content: center;
}

.main3{
  width: 70%;
}

.main3 a{
  color: #003c83;
}
.red {
  text-align: center;
}
.red p {
  color: var(--main-color);
    text-align: center;
    line-height: 1.4;
}
.ikonka {
  padding-top: 1rem;
  margin: 1rem auto;
}

.arrow{
  margin: 1rem auto;
  width: 15%;
  animation: pulse 2.5s linear infinite;
}



@-webkit-keyframes pulse {
0% {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
 -webkit-transform: scale(1);
transform: scale(1);
}
}


.vyplataCenter {
    font-size: var(--normal-font-size);
    color: var(--text-gray-color);
    padding: 0.7rem 1rem;
    line-height: 1.4rem;
    text-align: center;
}


@import url('https://fonts.googleapis.com/css?family=Poppins');

 .calendar {
	 width: 4rem;
	 height: 4rem;
	 animation: swing ease-in-out 1s infinite alternate;
	 transform-origin: center -20px;
	 box-shadow: 0 14px 14px -10px rgba(0, 0, 0, 0.25);
}
.calendar1 {
    width: 4rem;
    height: 4rem;
    transform-origin: center -20px;
    box-shadow: 0 14px 14px -10px rgba(0, 0, 0, 0.25);
}
 .calendar:before {
	 position: absolute;
	 content: '';
	 top: -20px;
	 left: 50%;
	 transform: translateX(-50%);
	 width: 5px;
	 height: 5px;
	 background-color: black;
	 border-radius: 50%;
}
 .calendar:after {
	 position: absolute;
	 top: -10px;
	 left: 50%;
	 margin-left: -20px;
	 content: '';
	 width: 40px;
	 height: 40px;
	 border: 1px solid black;
	 transform: rotate(45deg);
	 z-index: -1;
}
 .calendar__month {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 height: 30%;
	 background-color: var(--main-color);
	 color: white;
	 font-size: 14px;
}
 .calendar__day {
  border: 1px solid solid var(--main-color);
	 position: relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100%;
	 height: 70%;
	 background-color: rgb(255, 255, 255);
	 font-size: 15px;
}
 @keyframes swing {
	 0% {
		 transform: rotate(3deg);
	}
	 100% {
		 transform: rotate(-3deg);
	}
}


.down{
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.bank{
  width: 20%;
  margin: 1rem auto;
}

.comp{
  width: 25%;
  margin: 1rem auto;
}

.enpf{
  width: 35%;
  margin: 0.8rem auto;
}

.warning{
  width: 45%;
  margin: 0 auto;
  animation: pulse 2.5s linear infinite;
}

.warn{

  font-size: var(--bigger-font-size);
  color: var(--main-red);
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  padding-right: 1rem;
}



.refunds-resume {
    background-color: #eff2f4;
    padding: 1rem;
    margin: 2rem 0;
}

.square {
  width: 58vw;
  height: 1px ;
  background: var(--main-color);
  border-radius: 1px ;
}
.square-animation {
  animation: wipe-enter 2s 1
}
@keyframes wipe-enter {
  0% {
    transform: scale(0, .025)
  }
  50% {
    transform: scale(1, .025)
  }
}

.wrap {
  display: flex;
}
.stage {
  position: relative;
  margin-top: 1rem;
}
.stage, .stage-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}



.orarrow{
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  margin: auto 0;
}

.etap{
  display: flex;
  margin-left: 1rem;
}

.banki{
  display: flex;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.bank1{
  width: 30%;
text-align: center;
}

.bankImg{
  width: 50%;
  height: 60%;
margin-bottom: 1rem;
}


#slide {
  position: absolute;
  left: 100px; /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
  width: 100px;
  height: 100px;
  background: blue;
  transition: 1s;
}
.wrapper{
  width: 100px;
  height: 100px;
}
.main1:hover #slide {
  cursor: pointer;
  transition: 1s;
  left: 450px; /* SET THE SLIDER TO BE 0 */
}




section .text-container {
  display: flex;
}
section .text-container .text-box {
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3 {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  section h1 {
    font-size: 2rem;
    text-align: center;
  }
  section .text-container {
    flex-direction: column;
  }
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
  border: none;

}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


.zametka{
  margin-top: 1rem;
}

.doc{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  margin: 1rem;
  width: 50%;
  border: 0.1rem solid var(--main-color);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}


.ikon2{
  width: 5%;
  margin: 1rem;
}
.ikon2 img{
  width: 80%;
}


.txt{
margin: auto 0;
}






[class^="hvr-"] {
/*display: inline-block;*/
/*vertical-align: middle;*/
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}



.hvr-sink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;}

  .doc:hover, .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);}






@media (max-width: 991.98px){
.container {
    max-width: calc(100vw - 20%);
}



}


.borderDash{
  border-bottom: dashed;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.biggerTable{
  text-align: center;
  font-size: var(--bigger-font-size);
  color: var(--main-color);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}