|
@@ -226,14 +226,18 @@ a {
|
|
|
/* animation bar */
|
|
|
#animationBar {
|
|
|
position: absolute;
|
|
|
- bottom: 100px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ bottom: 0px;
|
|
|
display: none;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
color: white;
|
|
|
font-weight: bold;
|
|
|
+ width: calc(100% - 200px);
|
|
|
+}
|
|
|
+
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
|
|
|
|
#animationBar * {
|
|
@@ -244,7 +248,7 @@ a {
|
|
|
#animationBar,
|
|
|
#dropdownContent {
|
|
|
padding: 10px;
|
|
|
- background-color: gray;
|
|
|
+ background-color: #3B789A;
|
|
|
}
|
|
|
|
|
|
#animationBar img {
|
|
@@ -282,11 +286,11 @@ a {
|
|
|
width: 100px;
|
|
|
}
|
|
|
#dropdownContent a {
|
|
|
- max-width: 710px;
|
|
|
+ max-width: 1000px;
|
|
|
transition: color 0.5s;
|
|
|
}
|
|
|
#dropdownContent a:hover {
|
|
|
- color: #444;
|
|
|
+ color: #162D3A;
|
|
|
}
|
|
|
|
|
|
#dropdownContent {
|
|
@@ -305,7 +309,7 @@ a {
|
|
|
}
|
|
|
|
|
|
#dropdownContent .active {
|
|
|
- color: black;
|
|
|
+ color: #2c5a74;
|
|
|
}
|
|
|
|
|
|
.dropdown:hover #dropdownContent {
|
|
@@ -321,7 +325,7 @@ a {
|
|
|
#slider {
|
|
|
cursor: pointer;
|
|
|
-webkit-appearance: none;
|
|
|
- width: 500px;
|
|
|
+ width: 1000px;
|
|
|
outline: none;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
@@ -333,7 +337,7 @@ a {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border: 0;
|
|
|
- background: url('Assets/circle.png') no-repeat gray;
|
|
|
+ background: url('Assets/circle.png') no-repeat #3B789A;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
#slider::-webkit-slider-runnable-track {
|
|
@@ -353,7 +357,7 @@ a {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border: 0;
|
|
|
- background: url('Assets/circle.png') no-repeat gray;
|
|
|
+ background: url('Assets/circle.png') no-repeat #3B789A;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
@@ -366,12 +370,27 @@ a {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border: 0;
|
|
|
- background: url('Assets/circle.png') no-repeat gray;
|
|
|
+ background: url('Assets/circle.png') no-repeat #3B789A;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
-/** for screen too small */
|
|
|
-@media only screen and (max-width: 750px) {
|
|
|
+@media (min-width: 0px) {
|
|
|
+ #slider,
|
|
|
+ #dropdownLabel {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownContent a {
|
|
|
+ max-width: 260px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 576px) {
|
|
|
+ #slider,
|
|
|
+ #dropdownLabel {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+
|
|
|
#slider {
|
|
|
width: 100px;
|
|
|
}
|
|
@@ -381,6 +400,63 @@ a {
|
|
|
}
|
|
|
|
|
|
#dropdownContent a {
|
|
|
- max-width: 260px;
|
|
|
+ max-width: 300px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px) {
|
|
|
+ #slider,
|
|
|
+ #dropdownLabel {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ #slider {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownLabel {
|
|
|
+ width: 75px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownContent a {
|
|
|
+ max-width: 400px;
|
|
|
}
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 992px) {
|
|
|
+ #slider,
|
|
|
+ #dropdownLabel {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ #slider {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownLabel {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownContent a {
|
|
|
+ max-width: 600px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1200px) {
|
|
|
+ #slider,
|
|
|
+ #dropdownLabel {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+
|
|
|
+ #slider {
|
|
|
+ width: 700px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownLabel {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #dropdownContent a {
|
|
|
+ max-width: 700px;
|
|
|
+ }
|
|
|
+}
|