.timing {
padding: 87px 0 147px 0;
background-image: radial-gradient(circle at 50% 50%, #153e76, #112c57 45%);
border-radius: 0 60px 0 60px;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 1300px) {
.timing {
padding-top: 80px;
padding-bottom: 110px;
}
}
@media screen and (max-width: 780px) {
.timing {
padding-top: 33px;
padding-bottom: 40px;
border-radius: 0 40px 0 40px;
}
}
.timing::before {
content: "";
display: block;
position: absolute;
width: 581px;
height: 599px;
background: url(//line-prava.com/wp-content/themes/linia-prava/img/timing-bg-icon.svg) no-repeat center/contain;
right: 0;
top: 0;
}
@media screen and (max-width: 1300px) {
.timing::before {
width: 40vw;
height: 40vw;
}
}
@media screen and (max-width: 780px) {
.timing::before {
display: none;
}
}
.timing.--no-bg {
background: transparent;
border-radius: 0;
padding: 0;
}
.timing.--no-bg::before {
display: none;
}
.timing.--no-bg .timing__title * {
color: #303030;
}
.timing.--no-bg .timing__title * b, .timing.--no-bg .timing__title * strong {
color: #f03444;
}
.timing.--no-bg .timing__col-title {
color: #ffffff;
background: #1C427F;
max-width: 280px;
}
.timing.--no-bg .timing__col-text {
color: #303030;
}
.timing.--no-bg .timing__col-text b, .timing.--no-bg .timing__col-text strong {
font-weight: inherit;
color: #1c427f;
}
.timing.--no-bg .timing__row::after {
background: #1E478B;
}
.timing.--no-bg .timing__col::before {
z-index: 2;
background: #1E478B;
}
.timing__title {
position: relative;
z-index: 2;
}
@media screen and (max-width: 780px) {
.timing__title {
margin-bottom: 35px;
}
}
.timing__title * {
color: #ffffff;
}
.timing__title b, .timing__title strong {
color: #9cc1ff;
}
.timing__row {
position: relative;
display: flex;
z-index: 2;
margin-left: -20px;
margin-right: -20px;
}
@media screen and (max-width: 1300px) {
.timing__row {
flex-wrap: wrap;
margin-bottom: -40px;
}
}
@media screen and (max-width: 780px) {
.timing__row {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
flex-direction: column;
}
.timing__row::after {
content: "";
display: block;
position: absolute;
left: 5px;
top: 15px;
width: 2px;
height: var(--timinglineheight);
border-left: 2px dashed #fff;
}
}
.timing__col {
width: calc(25% - 40px);
margin-left: 20px;
margin-right: 20px;
position: relative;
}
@media screen and (max-width: 1300px) {
.timing__col {
margin-bottom: 40px;
width: calc(33.33% - 40px);
}
}
@media screen and (max-width: 960px) {
.timing__col {
width: calc(50% - 40px);
}
}
@media screen and (max-width: 780px) {
.timing__col {
width: 100%;
margin-bottom: 30px;
padding-left: 32px;
margin-left: 0;
margin-right: 0;
}
.timing__col:last-child {
margin-bottom: 0;
}
}
.timing__col::before {
content: "";
display: block;
position: absolute;
width: 200px;
height: 2px;
border-bottom: 2px dashed #ffffff;
right: -40px;
top: 29px;
}
@media screen and (max-width: 780px) {
.timing__col::before {
width: 12px;
height: 12px;
border-radius: 50%;
right: auto;
left: 0;
top: 15px;
border-bottom: 0;
background: #fff;
}
}
.timing__col:last-child::before {
display: none;
}
@media screen and (max-width: 780px) {
.timing__col:last-child::before {
display: block;
}
}
.timing__col-title {
position: relative;
z-index: 2;
background: #85A3D4;
padding: 15px;
border-radius: 50px;
margin: 0 0 30px 0;
text-align: center;
font-size: 24px;
color: #fff;
font-weight: 700;
max-width: 250px;
transition: background 0.3s;
}
@media screen and (max-width: 1700px) {
.timing__col-title {
max-width: calc(100% - 30px);
font-size: 20px;
margin-bottom: 25px;
padding: 10px;
}
}
@media screen and (max-width: 780px) {
.timing__col-title {
margin-bottom: 20px;
font-size: 16px;
padding: 12px 15px;
max-width: 180px;
}
}
.timing__col-text {
margin: 0;
color: #ffffff;
font-size: 24px;
font-weight: 600;
}
@media screen and (max-width: 1700px) {
.timing__col-text {
font-size: 20px;
}
}
@media screen and (max-width: 780px) {
.timing__col-text {
font-size: 16px;
}
}
.timing__col:nth-child(1) .timing__col-title {
background: rgb(240, 52, 68);
}
.timing__col:nth-child(1) .timing__col-title:hover {
background: #e01122;
}
.timing__col:nth-child(2) .timing__col-title {
background: rgb(198, 99, 76);
}
.timing__col:nth-child(2) .timing__col-title:hover {
background: #bc543c;
}
.timing__col:nth-child(3) .timing__col-title {
background: rgb(166, 135, 82);
}
.timing__col:nth-child(3) .timing__col-title:hover {
background: #95794a;
}
.timing__col:nth-child(4) .timing__col-title {
background: rgb(128, 177, 89);
}
.timing__col:nth-child(4) .timing__col-title:hover {
background: #73a44d;
}
.timing__col:nth-child(5) .timing__col-title {
background: rgb(91, 218, 96);
}
.timing__col:nth-child(5) .timing__col-title:hover {
background: #31d138;
}
.timing__btn {
width: 100%;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 20px;
font-weight: 500;
padding: 20px 30px;
}
@media screen and (max-width: 560px) {
.timing__btn {
padding: 15px 20px;
font-size: 16px;
}
}
.timing__btn-wrapper {
text-align: center;
display: none;
}
@media screen and (max-width: 780px) {
.timing__btn-wrapper {
display: block;
margin-top: 30px;
}
}