/*------------------------------------* $FULL SCREEN HEADER *------------------------------------*/ #site-header.full_screen-header #site-header-inner { overflow: visible !important; } #site-header.full_screen-header #site-navigation-wrap { right: 0; } #site-header.full_screen-header #site-logo.has-full-screen-logo { position: relative; z-index: 101; } #site-header.full_screen-header #site-logo.has-full-screen-logo .full-screen-logo-link { display: none; } #site-header.full_screen-header #site-logo.has-full-screen-logo.opened .custom-logo-link { display: none; } #site-header.full_screen-header #site-logo.has-full-screen-logo.opened .full-screen-logo-link { display: block; } #site-header.full_screen-header .menu-bar-wrap { float: right; height: 100%; display: table; } #site-header.full_screen-header .menu-bar-inner { display: table-cell; vertical-align: middle; position: relative; height: 74px; } #site-header.full_screen-header .menu-bar { display: inline-block; position: relative; margin-left: 10px; min-width: 38px; height: 33px; text-align: center; z-index: 101; } #site-header.full_screen-header .menu-bar .ham { display: inline-block; width: 23px; height: 2px; position: relative; top: 2px; background-color: #333; vertical-align: middle; white-space: nowrap; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } #site-header.full_screen-header .menu-bar .ham:before, #site-header.full_screen-header .menu-bar .ham:after { position: absolute; content: ''; display: inline-block; width: 23px; height: 2px; left: 0; background-color: #333; outline: 1px solid transparent; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } #site-header.full_screen-header .menu-bar .ham:before { top: -8px; } #site-header.full_screen-header .menu-bar .ham:after { top: 8px; } #site-header.full_screen-header .menu-bar.exit .ham { background-color: transparent !important; } #site-header.full_screen-header .menu-bar.exit .ham:before, #site-header.full_screen-header .menu-bar.exit .ham:after { background-color: #fff; } #site-header.full_screen-header .menu-bar.exit .ham:before { -webkit-transform: translateY(8px) rotateZ(-45deg); -moz-transform: translateY(8px) rotateZ(-45deg); -ms-transform: translateY(8px) rotateZ(-45deg); -o-transform: translateY(8px) rotateZ(-45deg); transform: translateY(8px) rotateZ(-45deg); } #site-header.full_screen-header .menu-bar.exit .ham:after { -webkit-transform: translateY(-8px) rotateZ(45deg); -moz-transform: translateY(-8px) rotateZ(45deg); -ms-transform: translateY(-8px) rotateZ(45deg); -o-transform: translateY(-8px) rotateZ(45deg); transform: translateY(-8px) rotateZ(45deg); } #site-header.full_screen-header #full-screen-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow-y: scroll; z-index: 100; } #site-header.full_screen-header #full-screen-menu #full-screen-menu-inner { display: table; width: 100%; height: 100%; padding: 0 40px; } #site-header.full_screen-header #full-screen-menu #site-navigation { display: table-cell; vertical-align: middle; padding: 100px 0; text-align: center; } #site-header.full_screen-header .fs-dropdown-menu { list-style: none; margin: 0; } #site-header.full_screen-header .fs-dropdown-menu li a { display: block; color: #fff; letter-spacing: 2px; text-transform: uppercase; } #site-header.full_screen-header .fs-dropdown-menu li a:hover { color: #929292; } #site-header.full_screen-header .fs-dropdown-menu li > a .nav-arrow { padding-left: 5px; } #site-header.full_screen-header .fs-dropdown-menu li > a .nav-arrow:before { content: '+'; } #site-header.full_screen-header .fs-dropdown-menu li.open-sub > a .nav-arrow:before { content: '-'; } #site-header.full_screen-header .fs-dropdown-menu ul.sub-menu { display: none; list-style: none; margin: 0; padding: 0; } #site-header.full_screen-header .fs-dropdown-menu ul.sub-menu li a { font-size: 16px; padding: 6px 0; } #site-header.full_screen-header .fs-dropdown-menu > li { display: block; } #site-header.full_screen-header .fs-dropdown-menu > li > a { font-size: 24px; line-height: 1.2; padding: 12px 0; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li { max-width: 220px; margin: 10px auto 0; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li form { position: relative; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input, #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label { font-size: 20px; padding: 4px 0; color: #fff; margin: 0; text-align: center; text-transform: uppercase; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input { position: relative; border: 0; background-color: transparent; border-bottom: 1px solid #666; border-radius: 0; z-index: 2; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input:hover, #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li input:focus { border-color: #fff; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: text; opacity: .5; z-index: 1; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i { display: inline-block; background-color: #fff; width: 3px; height: 3px; margin-left: 3px; -webkit-animation: blink 1s linear infinite; -moz-animation: blink 1s linear infinite; -o-animation: blink 1s linear infinite; animation: blink 1s linear infinite; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i + i { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -o-animation-delay: .2s; animation-delay: .2s; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li label i + i + i { -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; } #site-header.full_screen-header .fs-dropdown-menu > li.search-toggle-li form.search-filled label { opacity: 0; -webkit-transition-duration: 150ms; -moz-transition-duration: 150ms; -o-transition-duration: 150ms; transition-duration: 150ms; } #site-header.full_screen-header #oceanwp-social-menu { display: block; float: none; margin-top: 30px; text-align: center; right: auto; } #site-header.full_screen-header #oceanwp-social-menu .social-menu-inner { display: block; height: auto !important; } #site-header.full_screen-header #oceanwp-social-menu ul li { float: none; display: inline-block; } #site-header.full_screen-header #oceanwp-social-menu.simple-social ul li a { color: #fff; font-size: 24px; padding: 0 16px; } #site-header.full_screen-header #oceanwp-social-menu.simple-social ul li a:hover { color: #929292; } #site-header.full_screen-header #oceanwp-social-menu .colored ul li a, #site-header.full_screen-header #oceanwp-social-menu .minimal ul li a, #site-header.full_screen-header #oceanwp-social-menu .dark ul li a { padding: 0 4px; } #site-header.full_screen-header #oceanwp-social-menu .colored ul li a span, #site-header.full_screen-header #oceanwp-social-menu .minimal ul li a span, #site-header.full_screen-header #oceanwp-social-menu .dark ul li a span { font-size: 16px; width: 60px; height: 60px; line-height: 60px; } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /*------------------------------------* All Devices under 960px *------------------------------------*/ @media only screen and (max-width: 959px) { /* header > logo */ #site-header.full_screen-header #site-logo.has-full-screen-logo.opened .custom-logo-link { display: block; } #site-header.full_screen-header #site-logo.has-full-screen-logo.opened .full-screen-logo-link { display: none; } }