.container { max-width: 950px; } /* * Custom translucent site header */ .container-fluid { background-color: rgba(0, 0, 255, 0.1); } .container_footer { max-width: 900px; } .navbar-nav { margin: 0 auto; table-layout: fixed; float: left; } .site-header a:hover { color: #fff; text-decoration: none; } .job-cover .inner { position: relative; margin-bottom: 10px; } .job-cover .category { padding: 10px 0; margin-bottom: 90px; font-size: 1.1875rem; font-style: italic; border-bottom: 1px solid #fff; } .job-cover .title h2 { font-size: 2.25rem; line-height: 1.2; letter-spacing: .05em; } .job-cover .title-panel { position: absolute; top: 50px; left: 0; width: 540px; padding: 11px 45px; color: #fff; text-align: left; background: rgba(0, 65, 110, .8); } .job-cover .category .name { margin-right: 13px; font-weight: 700; letter-spacing: .05em; } .job-cover .inner .photo { text-align: right; } .job-cover .category .desc { font-size: .625rem; } .job-cover .category { margin-bottom: 80px; } .job-cover .title { margin-bottom: 82px; } .job-cover .category .desc { display: block; } .listbox { margin-bottom: 40px; } .listbox h2 { color: #7acbf4; font-size: 1.625rem; border-bottom: solid 1px #7acbf4; padding-bottom: 10px; margin-bottom: 20px; } .listbox ul { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .listbox ul li { width: 30%; } @media screen and (max-width:52.5em) { .job-cover .title-panel { position: relative; top: -7px; left: 10px; display: inline-block; width: calc(100% - 20px); padding: 10px 20px; } .job-cover .category { font-size: .875rem; padding: 5px 0; margin-bottom: 20px; } .job-cover .title { margin-bottom: 8px; } .job-cover .title h2 { font-size: 1.6875rem; letter-spacing: 0; } .job-cover .photo img { width: 100%; } } @media screen and (max-width:52.5em) { .job-cover .inner .photo { text-align: center; } .listbox ul li { width: 45%; } } @media screen and (max-width:40em) { .job-cover .title-panel { position: relative; top: -7px; left: 10px; display: inline-block; width: calc(100% - 20px); padding: 10px 20px; } .job-cover .title-panel { left: 10px; } .job-cover .category { margin-bottom: 20px; } .job-cover .title { margin-bottom: 20px; } .listbox { padding: 20px; } #box01 ul li { width: 45%; } .listbox ul li { width: 100%; } }