section {
background: #e5e5e5;
}
.hide-for-large {
display: none;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: auto;
margin-bottom: 15px;
}
.col {
flex-basis: 100%;
padding: 0 15px 15px;
}
.large-2 {
flex-basis: 16.666666666%;
}
.large-3 {
flex-basis: 25%;
}
.large-5 {
flex-basis: 41.666666666%;
}
.large-9 {
flex-basis: 75%;
}
.large-10 {
flex-basis: 83.333333333%;
}
.loading{
opacity: .6;
pointer-events: none;
}
.loader {
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0, .3);
height: 100%;
}
.loader:not(.loading) {
display: none;
}
.loader-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #ffffff;
opacity: 1 !important
} .catalog-header {
background: #d60c00;
padding: 15px 0 0;
box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
margin-bottom: 30px;
}
.catalog-header h2 {
color: #fff;
margin: 0;
line-height: 1;
vertical-align: middle;
padding: 0;
font-weight: bold;
text-transform: none;
}
.input-container{
position: relative;
}
.catalogSearch-icon {
content: '';
height: 21px;
width: 21px;
display: inline-block;
background-image: url(//www.hidrosistemas.ind.br/wp-content/plugins/vv-catalogos-hidrosistemas/assets/icon-lupa.png);
color: #333333;
position: absolute;
top: calc(50% - 10.5px);
right: 4%;
opacity: .8;
background-position: center;
background-size: cover;
}
.icon-border {
display: block;
position: relative;
height: 30px;
width: 30px;
background: #ddd8d7;
text-align: center;
margin: auto;
cursor: pointer;
}
.icon-border > .catalogSearch-icon {
top: calc(50% - 7.5px);
right: 0;
left: 0;
margin: auto;
width: 15px;
height: 15px;
}
.dark-select {
width: 100%;
background: #545454;
color: #fff;
font-size: 1.5rem;
line-height: 1;
height: auto;
padding: 15px 5px;
border: none;
cursor: pointer;
}
.dark-select option {
background: #fff;
color: #545454;
}
#catalogResponse {
position: relative;
}
#catalogResponse .response {
max-height: 500px;
overflow: auto;
padding-right: 15px;
}
.single-catalog {
background-color: #d9d9d9;
padding: 20px 5px 5px;
}
.single-catalog h4,
.single-catalog p {
margin-bottom: 6px;
}
.single-catalog img {
display: block;
margin: auto;
opacity: .4;
}
.btn-catalog {
background-color: #d60c00;
color: #fff;
font-weight: normal;
text-transform: none;
cursor: pointer;
padding: 5px 22px;
}
.btn-catalog:hover {
color: #ffffff;
background-color: #b30a00;
}
@media screen and (max-width: 48em) {
.small-2 {
flex-basis: 16.666666666%;
}
.small-10 {
flex-basis: 83.333333333%;
}
.small-12{
flex-basis: 100%;
}
.hide-for-large {
display: block;
}
.hide-for-small {
display: none;
}
#searchForm.open {
position: fixed;
display: block;
top: calc(50% - 60px);
left: 0;
width: 100%;
z-index: 9;
padding: 30px;
}
#searchForm.open .overlay {
position: absolute;
top: -42vh;
left: 0;
background: rgba(0,0,0,.4);
width: 100%;
height: 115vh;
content: '';
}
}