165 lines
3.9 KiB
CSS
Executable File
165 lines
3.9 KiB
CSS
Executable File
#site-header {
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #f1f1f1;
|
|
z-index: 10;
|
|
}
|
|
|
|
.no-header-border #site-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.is-sticky #site-header.transparent-header {
|
|
background-color: #fff;
|
|
}
|
|
|
|
#site-header-inner {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
#site-logo {
|
|
float: left;
|
|
height: 100%;
|
|
display: table;
|
|
}
|
|
|
|
#site-logo.has-transparent-logo .transparent-logo-link {
|
|
display: none;
|
|
}
|
|
|
|
#site-logo #site-logo-inner {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
height: 74px;
|
|
}
|
|
|
|
#site-logo #site-logo-inner a {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#site-logo #site-logo-inner a img {
|
|
width: auto;
|
|
vertical-align: middle;
|
|
-webkit-transition: opacity .3s ease-out;
|
|
-moz-transition: opacity .3s ease-out;
|
|
-o-transition: opacity .3s ease-out;
|
|
transition: opacity .3s ease-out;
|
|
}
|
|
|
|
#site-logo #site-logo-inner a:hover img {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#site-logo a.site-logo-text {
|
|
font-size: 24px;
|
|
margin: 0;
|
|
}
|
|
|
|
#site-logo-fa-icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#site-logo-fa-icon.fa-oceanwp-hidden {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/**
|
|
* Video header
|
|
*/
|
|
#site-header .custom-header-media {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
#site-header .custom-header-media:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: block;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background: -moz-linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
|
background: -webkit-linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0);
|
|
}
|
|
|
|
#site-header .custom-header-media video, #site-header .custom-header-media iframe {
|
|
position: absolute;
|
|
height: auto;
|
|
left: 50%;
|
|
max-width: 1000%;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
min-width: 100vw;
|
|
width: auto;
|
|
top: 50%;
|
|
-ms-transform: translateX(-50%) translateY(-50%);
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
#site-header .custom-header-media .wp-custom-header-video-button {
|
|
display: none;
|
|
}
|
|
|
|
.has-header-video #site-header-inner {
|
|
z-index: 10;
|
|
}
|
|
|
|
/*------------------------------------*
|
|
Mobile Menu
|
|
*------------------------------------*/
|
|
#site-logo .retina-logo-link,
|
|
#site-logo .transparent-retina-logo-link {
|
|
display: none;
|
|
}
|
|
|
|
/*------------------------------------*
|
|
Retina Logo
|
|
*------------------------------------*/
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
/* logo */
|
|
#site-logo.has-retina-logo .custom-logo-link {
|
|
display: none;
|
|
}
|
|
#site-logo.has-retina-logo .retina-logo-link {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/*------------------------------------*
|
|
All Devices under 960px
|
|
*------------------------------------*/
|
|
@media only screen and (max-width: 959px) {
|
|
/* header > logo */
|
|
.has-left-menu #site-logo {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
/*------------------------------------*
|
|
Phone Portrait and Landscape
|
|
*------------------------------------*/
|
|
@media only screen and (max-width: 767px) {
|
|
#site-logo {
|
|
margin-top: 0px !important;
|
|
margin-bottom: 0px !important;
|
|
}
|
|
#site-logo.has-retina-logo .custom-logo-link {
|
|
display: none;
|
|
}
|
|
#site-logo.has-retina-logo .retina-logo-link {
|
|
display: block;
|
|
}
|
|
} |