/*---------- Media Query min-width Structure ----------*/ /*---------- Media Query max-width Structure ----------*/ /*---------- Break-point min-width Structure ----------*/ /*---------- Break-point max-width Structure ----------*/ /** * Header Cover / Full Screen Search */ .main-header-bar-wrap .ast-search-box.header-cover { z-index: 7; } .ast-below-header-wrap .ast-search-box.header-cover .search-field, .ast-below-header-wrap .ast-search-box.header-cover #close { font-size: 1.8em; } .ast-below-header-wrap .ast-search-box.header-cover .search-submit { font-size: 1.5em; } .ast-search-box.header-cover, .ast-search-box.full-screen { display: none; opacity: 0; transition: opacity .3s ease-in-out,display .3s ease-in-out; width: 100%; height: 100%; /* Placeholder Color */ } .ast-search-box.header-cover .search-field, .ast-search-box.full-screen .search-field { background: 0 0; border: 0; color: #fafafa; box-shadow: none; text-align: left; padding: 0; } .ast-search-box.header-cover .search-submit, .ast-search-box.full-screen .search-submit { background: var(--ast-fs-search-submit-background, 0 0); padding: 0; border-radius: 50%; box-shadow: none; color: var(--ast-fs-search-text-color, #9E9E9E); transition: all .7s ease-In; outline: none; border: 0; vertical-align: middle; } .ast-search-box.header-cover .ast-search-wrapper, .ast-search-box.full-screen .ast-search-wrapper { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .ast-search-box.header-cover .ast-search-wrapper .search-form, .ast-search-box.full-screen .ast-search-wrapper .search-form { line-height: normal; } .ast-search-box.header-cover #close, .ast-search-box.full-screen #close { color: #fafafa; transform: rotate(0); font-size: 2em; cursor: pointer; z-index: 9; font-weight: normal; } .ast-search-box.header-cover .search-field::-webkit-input-placeholder, .ast-search-box.full-screen .search-field::-webkit-input-placeholder { color: #fafafa; } .ast-search-box.header-cover .search-field:-moz-placeholder, .ast-search-box.full-screen .search-field:-moz-placeholder { /* Firefox 18- */ color: #fafafa; } .ast-search-box.header-cover .search-field::-moz-placeholder, .ast-search-box.full-screen .search-field::-moz-placeholder { /* Firefox 19+ */ color: #fafafa; } .ast-search-box.header-cover .search-field:-ms-input-placeholder, .ast-search-box.full-screen .search-field:-ms-input-placeholder { color: #fafafa; } .ast-search-box.header-cover { position: absolute; background: rgba(25, 25, 25, 0.96); top: 0; z-index: 10; } .ast-search-box.header-cover .search-field { font-size: 2em; line-height: 2; width: 100%; } .ast-search-box.header-cover .ast-container { position: relative; } .ast-search-box.header-cover .search-text-wrap, .ast-search-box.header-cover .search-submit, .ast-search-box.header-cover .close { display: inline-block; } .ast-search-box.header-cover .search-text-wrap { width: calc( 100% - 2.5em); vertical-align: middle; } .ast-search-box.header-cover .search-submit { font-size: 1.7em; margin-right: 2em; } .ast-search-box.header-cover #close { vertical-align: middle; backface-visibility: hidden; } .ast-search-box.full-screen { position: fixed; background: rgba(25, 25, 25, 0.96); top: 0; left: 0; z-index: 999; } .ast-search-box.full-screen .ast-search-wrapper .large-search-text { text-align: center; color: #e2e2e2; font-size: 1.5em; font-weight: normal; transition-delay: 50ms; transition: all .3s ease-in-out; } .ast-search-box.full-screen .ast-search-wrapper fieldset { border: 0; padding: 2.5em 0 1em; border-bottom: 2px solid var(--ast-border-color); } .ast-search-box.full-screen .ast-search-wrapper .search-field { font-size: 2em; padding-left: 20px; line-height: 1.7; width: 92%; vertical-align: middle; } .ast-search-box.full-screen .ast-search-wrapper .search-form { width: 70%; margin: 20px auto; } .ast-search-box.full-screen .ast-search-wrapper .search-submit { font-size: var(--ast-fs-search-font-size, 1.7em); } .ast-search-box.full-screen #close { position: absolute; color: #fafafa; right: 1em; line-height: 1; cursor: pointer; z-index: 9; font-weight: normal; font-size: 2em; top: 1.5em; backface-visibility: hidden; } .ast-search-box.full-screen ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 0; } .ast-search-box.full-screen ::-moz-placeholder { /* Firefox 19+ */ opacity: 0; } .ast-search-box.full-screen :-ms-input-placeholder { /* IE 10+ */ opacity: 0; } .ast-search-box.full-screen :-moz-placeholder { /* Firefox 18- */ opacity: 0; } @media (max-width: 420px) { .ast-search-box.full-screen ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 1; } .ast-search-box.full-screen ::-moz-placeholder { /* Firefox 19+ */ opacity: 1; } .ast-search-box.full-screen :-ms-input-placeholder { /* IE 10+ */ opacity: 1; } .ast-search-box.full-screen :-moz-placeholder { /* Firefox 18- */ opacity: 1; } } .ast-hfb-header .ast-search-box.full-screen.full-screen ::-webkit-input-placeholder { opacity: 0.5; } .ast-hfb-header .ast-search-box.full-screen.full-screen ::-moz-placeholder { /* Firefox 19+ */ opacity: 0.5; } .ast-hfb-header .ast-search-box.full-screen.full-screen :-ms-input-placeholder { /* IE 10+ */ opacity: 0.5; } .ast-hfb-header .ast-search-box.full-screen.full-screen :-moz-placeholder { /* Firefox 18- */ opacity: 0.5; } .site-header .ast-inline-search.ast-search-menu-icon .search-form { padding-left: 0; padding-right: 0; } .site-header .ast-inline-search.ast-search-menu-icon .search-field { padding-left: 1em; padding-right: 2em; } .ast-inline-search.ast-search-menu-icon { position: relative; transform: none; left: 0; right: 0; } .ast-inline-search.ast-search-menu-icon .search-submit { display: block; background: none; border: none; position: absolute; height: 100%; right: 0.25em; padding: 0; top: 0; font-size: 1.3em; color: #757575; } .ast-header-break-point .ast-inline-search.ast-search-menu-icon .search-form { padding: 0; } .ast-header-break-point .site-header .ast-inline-search.ast-search-menu-icon .search-field { padding-right: 2em; } .ast-header-break-point .ast-search-box.full-screen .ast-search-wrapper .search-field { width: 80%; } .ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.full-screen, .ast-header-custom-item-inside.ast-desktop .main-header-menu .ast-search-menu-icon.header-cover { display: none; } /** * Swap Above Header */ .ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-1 .ast-search-menu-icon .search-form { right: -1em; left: auto; padding-left: 0em; padding-right: 3em; } .ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-1 .search-field { padding-right: 0px; padding-left: 1em; } .ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-2 .ast-search-menu-icon .search-form { left: -1em; right: auto; padding-right: 0em; padding-left: 3em; } .ast-header-break-point .ast-swap-above-header-sections .ast-above-header-section-2 .search-field { padding-left: 0px; padding-right: 1em; } /** Above Header - Swap + Stack */ .ast-header-break-point .ast-above-header .ast-above-header-section-1 .ast-inline-search.ast-search-menu-icon .search-field { padding-right: 0; } .ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-2 .ast-search-menu-icon .search-form { padding-left: 0px; left: auto; padding-right: 2em; } .ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-2 .ast-search-menu-icon.slide-search .search-form { left: -1em; padding-left: 2em; } .ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .ast-above-header-section-1 .search-field { padding-right: 0; } .ast-header-break-point .ast-swap-above-header-sections.ast-mobile-header-stack .ast-above-header .search-field { padding-right: 0; padding-left: 1em; } .ast-header-break-point .ast-above-header-mobile-stack .ast-above-header .ast-above-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form { right: auto; padding-right: 2em; } .ast-header-break-point .ast-swap-below-header-sections .ast-below-header .below-header-section-2 .ast-search-menu-icon.ast-inline-search .search-form { left: 0; padding-left: 0; padding-right: 2em; } /** * Swap Below Header */ .ast-header-break-point .ast-swap-below-header-sections .below-header-section-1 .ast-search-menu-icon .search-form { right: -1em; left: auto; padding-left: 0em; padding-right: 3em; } .ast-header-break-point .ast-swap-below-header-sections .below-header-section-1 .search-field { padding-right: 0px; padding-left: 1em; } .ast-header-break-point .ast-swap-below-header-sections .below-header-section-2 .ast-search-menu-icon .search-form { left: -1em; right: auto; padding-right: 0em; padding-left: 3em; } .ast-header-break-point .ast-swap-below-header-sections .below-header-section-2 .search-field { padding-left: 0px; padding-right: 1em; } /** Below Header - Swap + Stack */ .ast-header-break-point .ast-below-header .below-header-section-1 .ast-inline-search.ast-search-menu-icon .search-field { padding-right: 0; } .ast-header-break-point .ast-swap-below-header-sections.site-header .ast-below-header .ast-inline-search.ast-search-menu-icon .search-field { padding-left: 1em; padding-right: 0; } .ast-header-break-point .ast-swap-below-header-sections .ast-below-header .below-header-section-2 .ast-search-menu-icon .search-form { left: -1em; padding-left: 3em; padding-right: 1em; } .ast-below-header-mobile-stack .ast-below-header .below-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form { right: auto; padding-right: 2em; } /** * iPhone/iPad fix * * Full screen search input cursor position not looks on expected place. * So, We add the `fixed` to body when it full-screen search is open. */ .ipod.full-screen, .iphone.full-screen { position: fixed !important; } @media (max-width: 992px) { .ast-above-header-mobile-stack .ast-above-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form { left: auto; } .ast-below-header-mobile-stack .below-header-section-1 .ast-search-menu-icon.ast-inline-search .search-form { left: auto; } } @media (max-width: 544px) { .ast-search-box.full-screen .ast-search-wrapper .large-search-text { display: none; } .ast-search-box.full-screen .ast-search-wrapper .search-field, .ast-search-box.full-screen .ast-search-wrapper .search-submit { font-size: 1.6em; } }