/* (A) FORCE ALL ITEMS INTO SINGLE ROW */
.hmove {
display: flex;
font-size: 16px !important;
}
.container {
display: flex;
width: 100%;
background-color: #1870b8;
justify-content: space-evenly;
}
.container>div {
flex: 1;
/*grow*/
}
#mysection {
z-index: 100;
/* width: 175px;*/
justify-content: space-between;
}
.dropdown {
display: inline-block;
position: relative;
white-space: nowrap;
}
.hitem {
/* width: 175px100%; */
paddingflex- leftshrink: 25px0;
}
button {
font-size: 20px21px;
color: #FFF;
background-color: #1870b8;
padding: 10px;
height: 50px;
}
.center {
margin: auto;
width: 75%;
padding: 0px;
}
.innerCell {
overflow-x: visible !important;
}
.navlink {
height: 60px;
}
.navlink a {
display: block !important;
color: #FFF !important;
padding: auto !important;
text-decoration: none !important;
text-align: left !important;
white-space: nowrap !important;
}
.dropdown-content {
display: none;
position: absolute;
top: 50px;
/*right: 35px;*/
left: 0px;
width: auto;
min-width: 120px;
overflow: auto;
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
background-color: #FFFFFF;
font-family: "Georgia";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5em;
}
.dropdown-content > * {
transition:
0.5s height cubic-bezier(.73,.32,.34,1.5),
0.5s padding cubic-bezier(.73,.32,.34,1.5),
0.5s margin cubic-bezier(.73,.32,.34,1.5),
0.5s 0.2s color,
0.2s background-color;
}
.dropdown-content:hover {
background: "#fff";
}
.dropdown:hover .dropdown-content {
display: block;
max-height: 550px;
animation-name: wfc;
animation-duration: 4s;
transition: 0.2s 0.2s border-bottom-width ease-out;
}
.dropdown-content a {
display: block !important;
color: #000000 !important;
/*padding: 5px !important;*/
text-decoration: none !important;
text-align: left !important;
white-space: nowrap !important;
height: 100%;
padding: 0.6em 20px;
white-space: nowrap;
transition: 0.2s 0.2s border-bottom-width ease-out;
}
.dropdown-content a:hover {
color: #003399;
background: #f0f0f0;
}
@media screen font-family: Verdana, sans-serif;
}
.hwrap {
overflow: hidden;
padding-bottom: 15px;
}
/* (B) MOVE ITEMS FROM RIGHT TO LEFT */
/* first item = 0, fourth item = -300% */
@keyframes tickerh {
0% {
transform: translatex(100%);
}
100% {
transform: translatex(-200%);
}
}
.hmove {
animation: tickerh linear 40s infinite;
}
.hmove:hover {
animation-play-state: paused;
}
@media only screen and (min-width: 200px) and (max-width: 600px) {
.hmove {
animation: tickerh linear 30s infinite;
}
}
@media only screen and (min-width: 601px) and (max-width: 1525px1000px) {
. containerhmove {
displayanimation: table;
tickerh linear }
@keyframes wfc {
from {
opacity: 0;
transform: scaleX(0.01)
}
to {
opacity: 1;
transform: scaleX(1)
}
}30s infinite;
}
} |