body, html {
	height: 100%;
	margin: 0;
	font-size: 2vmax;
	margin: 0px;
	color: #1C0E43;
	font-family: Roboto;
}
a:visited, a:link{
	color: #1C0E43;
	text-decoration: none;
}
.piFinanceLogo{
    width: 55%; 
    position: relative; 
    bottom: -10px;
}
.CityImage{
	background-image: url(/img/MainImg.png);
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	font-weight: 600;
	font-size: 4vmax;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	z-index: 0;
}
.CityImage span{
	border-left-color: #b40155;
	border-left-style: solid;
	border-width: 5px;
	padding-left: 1%;
	color: black;
	margin-left: 5%;
}
h1{
	text-align: center;
	width: 100%;
	color: #B40155;
	font-size: 5vmax;
	font-weight: 500;
}
.otherText{
	text-align: center;
	width: 100%;
	font-size: 1.9vmax;
	margin-top: 4%;
}
.Block{
	display: flex;
	margin: 5% 5%;
	flex-direction: column;
}
.DivImg{
	width: 100%;
	height: 50%;
	background-image: url(/img/sign.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.TextInBlockWithBGImgContainer{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.TextInBlockWithBGImg{
	width: 90%;
	padding: 6%;
	margin: 1%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 1vmax;
	font-size: 3vmax;
	cursor: default;
	color: #ffffff;
}
.TextInBlockWithBGImg:hover {
  //color: #1C0E43;
}
.OurOffersAllContainer{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	flex-grow: 0;
	margin-top: 4%;
}
.OurOffersData{
	padding: 0px 15px;
}
.OurOffersContainer{
	width: 100%;
	margin: 2% 2%;
	background-color: #F5F5F5;
}
.OurOffersContainerHeader{
	display: flex;
	align-items: center;
	background-color: #D3D3D3;
	width: 100%;
	height: 70px;
	text-align: center;
	justify-content: center;
	border-bottom: 1px solid #1C0E43;
	padding: 7% 0%;
	color: #B40155;
	font-size: 2vmax;
	font-weight: 600;
	margin-bottom: 15px;
}
.OurOffersDataChild{
	display: flex;
	margin: 0px 10px;
	font-size: 1.8vmax;
}
.OurOffersDataChild:hover{
	cursor: pointer;
	color: #B40155;
}
hr{
	border: none;
	background-color: #B40155;
	color: red;
	height: 1px;
	margin: 4% 0%;
}
.spanD{
	color: #B40155;
	margin-right: 10px;
}
.ContactData{
	margin-top: 4%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 1.9vmax;
}
.ContactDataText{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ContactDataMap{
	width: 100%;
}
.map{
	width: 100%;
	height: 400px;
}
.address{
	overflow-wrap: anywhere;
	margin-bottom: 15%;
	width: 100%;
	margin-left: 1%;
	margin-right: 1%;
}
.addressSelected{
	font-weight: 600;
	cursor: pointer;
}
#Contacts ~{
	background-color: red;
}
ol {
  list-style: none;
  counter-reset: li;
  display: flex;
  flex-wrap: wrap;
}
li::before {
  content: counter(li) ".";
  color: #B40155;
  font-size: 4vmax;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  position: relative;
  top: -30%;
  left: 20%;
}
li:nth-child(even) {
  padding-top: 10%;
}
li:nth-child(odd) {
  padding-bottom: 10%;
}
li{
  margin-bottom: 15%;
  margin-right: 5%;
  width: 45%;
  font-size: 2vmax;
  counter-increment: li;
  opacity: 0;
  position: relative;
  top: 300px;
}
.SmallBlock{
  display: flex;
  width: 100%;
  margin: auto;
}
.SmallBlockText{
  text-align: left;
	width: 100%;
	font-size: 2vmax;
	margin: 2%;
}
.SmallBlockLeft{
  margin-left: 3%;
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.SmallBlockRight{
  margin-right: 3%;
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.dotsBlock{
  float: left;
  width: 15%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-right: 30px;
  margin-left: 15px;
  margin-top: 2%;
}
.dots{
  width: 15px;
  height: 15px;
  background: #b40155;
  border-radius: 50%;
  align-items: center;
}
@media (orientation: landscape){
    .piFinanceLogo{
        width: 27%;
    }
	.ContactDataText{
		flex-direction: row;
		width: 70%;
	}
	.address{
		text-align: center;
		width: 100%;
		font-size: 2vmax;
	}
	.OurOffersContainer{
		width: 45%;
	}
	li::before {
	  top: -50%;
	  left: 11%;
	}
	.SmallBlockText{
    text-align: justify;
  }
	li:nth-child(even) {
	  position: relative;
	  padding-top: 5%;
	}
	li:nth-child(odd) {
	  position: relative;
	  padding-bottom: 5%;
	}
	li{
	  margin-bottom: 1%;
	}
	.TextInBlockWithBGImgContainer div{
		width: 36%;
		font-size: 2vmax;
	}
	.TextInBlockWithBGImgContainer div:first-child{
		width: 100%;
	}

}
@media (orientation: landscape) and (min-width: 1200px){
	.SmallBlockText, .BenefitsColumnDown{
		font-size: 1.5vmax;
	}
	.SmallBlock{
		width: 100%;
	}
	.SmallBlockLeft{
		margin-right: 5%;
		width: 15%;
	}
	.SmallBlockRight{
		margin-left: 5%;
		width: 15%;
	}
	.dots{
		width: 20px;
		height: 20px;
	}
	.OurOffersContainer{
		width: 20%;
	}
	.OurOffersContainerHeader{
		height: 200px;
		font-size: 1.5vmax;
	}
	.OurOffersContainer:hover{
		transition-duration:  200ms;
		transform: scale(1.02);
	}
	.Title{
		font-size: 4vmax;
	}
	.otherText{
		font-size: 1.5vmax;
	}
	.OurOffersDataChild{
		font-size: 1.3vmax;
	}
	.ContactData{
		flex-direction: row;
		font-size: 1.5vmax;
	}
	.TextInBlockWithBGImg:hover {
	  animation: shake 0.5s;
	  transform: rotate3d(0, 0, 0, 0deg);
	}

	@keyframes shake {
	  10%, 40%, 50%, 80%, 90% {
		transform: rotate3d(0, 0, 1, .1deg);
	  }
	  20%, 30%, 60%, 70% {
		transform: rotate3d(0, 0, 1, -.1deg);
	  }
	}
}