@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap'); /*------------------------------------------- ---------------- MEDIA QUERIES -------------- -------------------------------------------*/ @media screen and (max-width: 1920px) and (min-width: 1380px) { #wrapper .container-fluid { position: relative; top: -10vh; width: 100%; } #opac-main-search { position: absolute; top: 0; left: 0; width: 100%; } } @media screen and (max-width: 1380px) and (min-width: 1050px) { #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 4vmin; } .container-fluid #opac-main-search { height: 5vmin; } #wrapper #header-region { top: 0; } .top-options { width: 100%; } .top-options .top-link-item { font-size: 3vmin; } #wrapper .container-fluid { top: 40vh; width: 75%; } } @media screen and (max-width: 1050px) and (min-width: 992px) { .top-options { width: 100%; padding-left: 0; justify-content: center; } .top-navbar-menu { width: 100%; } .top-options .top-link-item { font-size: 3vmin; } .top-options { width: 90%; } .top-options .top-link-item { font-size: 3vmin; } #wrapper #header-region .container-fluid .banner-title-container { width: 100%; display: flex; flex-direction: column; align-items: center; } #wrapper .container-fluid #opac-main-search { height: 5vmin; width: 100%; margin: 0 2%; } #translControl1 { width: 50%; } #wrapper .container-fluid { top: 40vh; width: 70%; } #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 5vmin; } } @media (max-width: 992px) and (min-width: 360px) { #wrapper #header-region .container-fluid .banner-title-container { font-size: 5vmin; display: flex; flex-direction: column; align-items: center; } .container-fluid #opac-main-search { top: -5vh; } #wrapper #header-region .container-fluid .banner-title-container .orgao { font-size: 5vmin; } .top-options { width: 90%; } .top-options .top-link-item { font-size: 3vmin; } #wrapper > .container-fluid { position: absolute; width: 80%; padding: 0; top: -30vh; } #opac-main-search #searchform .form-row > div #masthead_search { width: 100%; } #opac-main-search #searchform .form-row div:nth-child(2) { order: 1; } .container-fluid:has("#opac-main-search") { height: 20%; } } /*** Media query for mobile device size (approximate resolution: 360x740) ***/ @media (min-width: 360px) { #opac-main-search { position: absolute; width: 100%; margin: 0 auto; } .top-options { width: 90%; } .top-options .top-link-item { font-size: 3vmin; } #opac-main-search { height: 100%; } #wrapper div:nth-child(2) .row .col #opac-main- { height: 70%; } } /*------------------------------------------- -------------- GENERAL STYLES --------------- -------------------------------------------*/ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Afacad Flux', Sans-serif; } #wrapper { display: flex; flex-direction: column; align-items: center; position: relative; background-color: #FFF; width: 100%; margin: 0; padding: 0; background-color: #FFF; }