#sortBox{ display:flex; flex:1; justify-content: center; align-items: flex-start; } #sortTxt{ color:white; font-size: 2vw; font-family:'Wellfleet',cursive; margin-right:1vw; } #selectAndOrder{ display: flex; flex-direction: column; align-items: center; } #sortOrder{ color: white; font-family:'Wellfleet',cursive; font-size: 1.2vw; cursor: pointer; } #sortOrder:hover { animation: rotate180 2s forwards022314015174 } .letter { animation: rotate180 2s forwards; } @keyframes rotate180 { 0% {} 100% { transform: rotate3d(0,1,0, 180deg)} } #selectBlock{ background:#057B26; margin-left:1vw; border-radius: 1.8vw; } #selectBox{ background: url("../../img/arrow_select.png") no-repeat; background-size: 2.5vw; background-position-y: center; background-position-x: 16vw; } #unwoundMenu{ background: url("../../img/arrow_select_up.png") no-repeat; background-size: 2.5vw; background-position-y: center; background-position-x: 16vw; } #sortSelect{ background: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; color:white; font-family:'Wellfleet',cursive; font-size:1.5vw; cursor: pointer; padding:0.3vw 3vw 0.3vw 1vw; border: 0.2vw solid black; border-radius: 1.8vw; } #sortSelect:focus{ background: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline:none; color:white; font-family:'Wellfleet',cursive; font-size:1.5vw; cursor: pointer; padding:0.3vw 3vw 0.3vw 1vw; border: 0.2vw solid black; border-radius: 1.8vw; } .optionSort{ background:#057B26 ; }