|
|
@@ -150,35 +150,44 @@ body {
|
|
|
}
|
|
|
|
|
|
/* Media queries - Responsive timeline on screens less than 600px wide */
|
|
|
-@media screen and (max-width: 600px) {
|
|
|
+@media screen and (max-width: 1200px) {
|
|
|
/* Place the timelime to the left */
|
|
|
.timeline::after {
|
|
|
- left: 31px;
|
|
|
+ left: 45px;
|
|
|
}
|
|
|
|
|
|
/* Full-width containers */
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
- padding-left: 70px;
|
|
|
+ padding-left: 88px;
|
|
|
padding-right: 25px;
|
|
|
}
|
|
|
|
|
|
/* Make sure that all arrows are pointing leftwards */
|
|
|
.container::before {
|
|
|
- left: 60px;
|
|
|
- border: medium solid white;
|
|
|
+ left: 80px;
|
|
|
+ border: medium solid #aac5f5;
|
|
|
border-width: 10px 10px 10px 0;
|
|
|
- border-color: transparent white transparent transparent;
|
|
|
+ border-color: transparent #aac5f5 transparent transparent;
|
|
|
}
|
|
|
|
|
|
/* Make sure all circles are at the same spot */
|
|
|
.left::after, .right::after {
|
|
|
+ left: -8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left, .right{
|
|
|
+ top: 45px;
|
|
|
left: 15px;
|
|
|
}
|
|
|
+ .text-left{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-/* Make all right containers behave like the left ones */
|
|
|
- .right {
|
|
|
- left: 0%;
|
|
|
+@media screen and (max-width: 580px) {
|
|
|
+ h2{
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|