/* .main-header */
.main-header {
display: flex;
flex-flow: wrap column;
font-size: 1rem;
}
/* .main-header__left */
.main-header__left,
.main-header__right {
flex: auto;
display: flex;
flex-flow: wrap column;
justify-content: center;
align-content: center;
}
.main-header__left {
padding-top: 1.5em;
}
.main-header__title {
margin: 0;
padding: 0 1em;
border-bottom: 0;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 1.4em;
}
.main-header__slogan {
padding-top: 0.5em;
}
/* .main-header__right */
.main-header__right {
padding-bottom: 0.5em;
font-size: 0.875em;
}
.main-header__count {
padding: 1em 0 0.75em;
}
.main-header__shortcut {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* .main-header__bottom */
.main-header__bottom {
display: none;
}
.main-header__bottom a {
white-space: nowrap;
}
/* responsive */
@media (max-width: 575px) {
/* .main-header__right */
.main-header__shortcut li:nth-child(1),
.main-header__shortcut li:nth-child(3) {
display: none;
}
}
@media (min-width: 576px) {
/* .main-header */
.main-header {
background-color: #f8f9fa;
border: 1px solid #e0e0e0;
box-shadow: 0px 2px 3px #eee;
}
/* .main-header__left */
body:not(.skin-vector-search-vue) .main-header__title {
font-size: 1.55em;
}
/* .main-header__right */
.main-header__right {
padding: 0 1em 1.5em;
}
/* .main-header__bottom */
.main-header__bottom {
display: flex;
flex-flow: wrap column;
justify-content: center;
align-content: center;
width: 100%;
background-color: #fff;
border-top: 1px solid #e0e0e0;
font-size: 0.875em;
}
.main-header__article-link,
.main-header__help-link {
padding: 0.75em 2em;
text-align: center;
}
.main-header__article-link {
margin-bottom: -0.75em;
}
}
@media (min-width: 1200px) {
/* .main-header */
.main-header {
flex-direction: row;
background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b6/Wikipedia_logo_letters_banner_2.svg);
background-position: right;
background-repeat: no-repeat;
}
/* .main-header__left */
.main-header__left {
padding: 1.5em 0;
background-image: linear-gradient(to right, #f8f9fa 0%, #f8f9fa 80%, rgba(248,249,250,0) 100%);
}
/* .main-header__right */
.main-header__right {
padding-bottom: 0;
}
/* .main-header__bottom */
.main-header__bottom {
flex-direction: row;
}
.main-header__article-link,
.main-header__help-link {
flex: 1;
}
.main-header__article-link {
text-align: right;
margin-bottom: 0;
}
.main-header__help-link {
text-align: left;
}
}