198 lines
4.2 KiB
CSS
198 lines
4.2 KiB
CSS
@media only screen and (min-width: 640px) {
|
|
.process .zero {
|
|
position: relative;
|
|
padding: 0 8% 0 3%;
|
|
}
|
|
|
|
.process .zero::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/1.svg");
|
|
top: 57%;
|
|
right: -6%;
|
|
width: 30%;
|
|
height: 21%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .first {
|
|
position: relative;
|
|
padding: 3% 6% 0 4%;
|
|
}
|
|
|
|
.process .first::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/2.svg");
|
|
top: 78%;
|
|
right: -9%;
|
|
width: 30%;
|
|
height: 21%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .second {
|
|
position: relative;
|
|
padding: 6% 6% 0 4.8%;
|
|
}
|
|
|
|
.process .second::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/3.svg");
|
|
top: 100%;
|
|
left: 50%;
|
|
width: 30%;
|
|
height: 48%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .third {
|
|
position: relative;
|
|
padding: 8% 9% 0 3%;
|
|
}
|
|
|
|
.process .third::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/4.svg");
|
|
top: 68%;
|
|
left: -25%;
|
|
width: 30%;
|
|
height: 15%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .fourth {
|
|
position: relative;
|
|
padding: 14% 8% 0 3%;
|
|
}
|
|
|
|
.process .fourth::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/5.svg");
|
|
top: 87%;
|
|
left: -25%;
|
|
width: 30%;
|
|
height: 15%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .fifth {
|
|
padding: 16% 10% 0 2%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 639px) {
|
|
.process .zero {
|
|
position: relative;
|
|
padding: 0 12% 0 12%;
|
|
}
|
|
|
|
.process .zero::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/1.svg");
|
|
top: 100%;
|
|
right: 11%;
|
|
width: 30%;
|
|
height: 21%;
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .first {
|
|
position: relative;
|
|
padding: 20% 7% 0 12%;
|
|
}
|
|
|
|
.process .first::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/2.svg");
|
|
top: 105%;
|
|
left: 2%;
|
|
width: 30%;
|
|
height: 21%;
|
|
-moz-transform: rotate(35deg);
|
|
-o-transform: rotate(35deg);
|
|
-webkit-transform: rotate(35deg);
|
|
transform: rotate(35deg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .second {
|
|
position: relative;
|
|
padding: 20% 7% 0 12%;
|
|
}
|
|
|
|
.process .second::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/3.svg");
|
|
top: 100%;
|
|
left: 66%;
|
|
width: 30%;
|
|
height: 48%;;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .third {
|
|
position: relative;
|
|
padding: 20% 7% 0 16%;
|
|
}
|
|
|
|
.process .third::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/4.svg");
|
|
top: 106%;
|
|
left: 5%;
|
|
width: 30%;
|
|
height: 15%;
|
|
-moz-transform: rotate(215deg) scaleY(-1);
|
|
-o-transform: rotate(215deg) scaleY(-1);
|
|
-webkit-transform: rotate(215deg) scaleY(-1);
|
|
transform: rotate(215deg) scaleY(-1);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .fourth {
|
|
position: relative;
|
|
padding: 20% 8% 0 16%;
|
|
}
|
|
|
|
.process .fourth::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/assets/monitor-assets/about/arrows/5.svg");
|
|
top: 100%;
|
|
right: 0;
|
|
width: 30%;
|
|
height: 19%;
|
|
-moz-transform: rotate(310deg);
|
|
-o-transform: rotate(310deg);
|
|
-webkit-transform: rotate(310deg);
|
|
transform: rotate(310deg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.process .fifth {
|
|
padding: 20% 7.6% 0 16%;
|
|
}
|
|
}
|