.cbxwrap {
width: 100%;
text-align: center;
display: flex;
display-direction: row;
padding-left: 20px;
padding-right: 20px;
}

.combobox {
width: calc(100% / 3);
text-align: left;
margin-left: 20px;
margin-right: 20px;
overflow: hidden;
}

.cbxcombo {
position: relative;
z-index: 31;
overflow: hidden;
}

.cbximg {
width: 100%;
height: auto;
display: block;
filter: alpha(opacity=80);
opacity: 0.8;
}

.combobox:hover .cbximg {
filter: alpha(opacity=100);
opacity: 1;
}

.cbxcombo span.cbxhead {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
font-style: normal;
text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
color: #ffffff;
display: block;
background: rgba(2,127,202,0.7);
text-align: center;
height: 32px;
line-height: 32px;
}

.combobox:hover span.cbxhead {
background: rgba(248,54,58,0.7);
}

@media only screen and (max-width: 980px) {
.cbxwrap { padding-left: 6px; padding-right: 6px; }
.combobox { margin-left: 16px; margin-right: 16px; }
.cbxcombo span.cbxhead { font-size: 20px; height: 28px; line-height: 28px; }
}

@media only screen and (max-width: 768px) {
.cbxwrap { padding-left: 10px; padding-right: 10px; }
.combobox { margin-left: 12px; margin-right: 12px; }
.cbxcombo span.cbxhead { font-size: 16px; height: 24px; line-height: 24px; }
}

@media only screen and (max-width: 640px) {
.cbxwrap { padding-left: 8px; padding-right: 8px; }
}

@media only screen and (max-width: 580px) {
.cbxwrap { width: 100%; display: block; padding-left: 20px; padding-right: 20px; }
.combobox { width: 100%; max-width: 413px; margin: 0 auto; margin-bottom: 20px; }
.cbxcombo span.cbxhead { font-size: 24px; height: 32px; line-height: 32px; }
}

@media only screen and (max-width: 480px) {
.cbxcombo span.cbxhead { font-size: 20px; height: 28px; line-height: 28px; }
}