html, body, div, span,
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
.application {
font-family: Arial, Helvetica, sans-serif;
}
.application-block {
padding: 50px 0;
}
.application-block--gray {
background: rgba(245, 245, 245, .58);
}
.application-block--with-border {
border-top: 1px solid #eee;
}
.application-block__row {
max-width: 1200px;
min-width: 320px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto;
}
.application-block__column-10 {
flex: 0 0 10%;
}
.application-block__column-16 {
flex: 0 0 16%;
}
.application-block__column-25 {
flex: 0 0 25%;
}
.application-block__column-33 {
flex: 0 0 33%;
}
.application-block__column-40 {
flex: 0 0 40%;
}
.application-block__column-50 {
flex: 0 0 50%;
}
.application-block__column-90 {
flex: 0 0 90%;
}
.application-block__image {
max-width: 100%;
height: auto;
}
.application-block__breadcrumbs-container {
display: flex;
justify-content: space-between;
}
.application-block__breadcrumbs {
font-size: 18px;
color: #292929;
text-decoration: none;
}
.application-block__breadcrumbs--large {
font-size: 24px;
color: #f77061;
}
.application-block__title {
font-size: 48px;
color: #292929;
}
.application-block__title--small {
font-size: 40px;
}
.application-block__subtitle {
margin-top: 30px;
margin-bottom: 60px;
font-size: 22px;
color: #292929;
}
.application-block__desc {
margin-top: 70px;
margin-bottom: 28px;
}
.application-block__text {
font-size: 14px;
color: rgb(109, 109, 109);
}
.application-block__text a {
color: rgb(109, 109, 109);
text-decoration: none;
}
.application-block__text a:hover {
text-decoration: underline;
}
.application-block__links {
margin-top: 40px;
}
.application-block__links--right {
text-align: right;
}
.application-block__link {
display: inline-block;
height: 40px;
}
.application-block__link-ios {
background: url("img/ban_mobile_ios.svg") no-repeat;
width: 125px;
}
.application-block__link-android {
background: url("img/ban_mobile_android.svg") no-repeat;
width: 140px;
}
.application-block__list {
color: #292929;
font-size: 18px;
padding-left: 20px;
}
.application-block__list li {
padding: 12px 0;
}
.timeline {
position: relative;
display: block;
height: 2px;
background: rgb(247, 112, 97);
width: 100%;
margin-top: 50px;
margin-bottom: 28px;
}
.timeline__item {
position: relative;
display: inline-block;
float: left;
width: 33.33%;
font: bold 14px arial;
height: 50px;
}
.timeline__point {
top: -6px;
left: 0;
display: block;
width: 14px;
height: 14px;
background: rgb(247, 112, 97);
position: absolute;
border-radius: 50%;
}
.timeline__point:before {
content: '';
background: rgba(247, 112, 97, .2);
border-radius: 50%;
width: 30px;
height: 30px;
display: block;
position: absolute;
top: -8px;
left: -8px;
}
.application-instruction__title {
font-size: 24px;
padding: 24px 0;
}
.application-instruction__text {
font-size: 18px;
}
.application-actions__title {
font-size: 24px;
font-weight: bold;
color: #292a2c;
margin-top: 40px;
margin-bottom: 20px;
}
.application-actions__desc {
font-size: 18px;
color: #292a2c;
}
.application-actions__image {
display: block;
}
.application-link {
color: #f77061;
}
@media (min-width: 320px) and (max-width: 767px) {
.application-block {
padding: 50px 20px;
}
div[class*=application-block__column] {
flex: 0 0 100%;
}
}