OwlCyberSecurity - MANAGER

Edit File: _header-fullscreen.scss

#site-header.full_screen-header {
    z-index: 9999;

#site-header-inner {
        overflow: visible !important;
    }

#site-navigation-wrap {
        right: 0;
    }

#site-logo.has-full-screen-logo {
        position: relative;
        z-index: 101;

.full-screen-logo-link {
            display: none;
        }

&.opened .custom-logo-link,
        &.opened .retina-logo-link {
            display: none;
        }

&.opened .full-screen-logo-link {
            display: block;
        }
    }

.menu-bar-wrap {
        float: right;
        height: 100%;
        display: table;
    }

.menu-bar-inner {
        display: table-cell;
        vertical-align: middle;
        position: relative;
        height: 74px;
    }

.menu-bar {
        display: inline-block;
        position: relative;
        margin-left: 10px;
        min-width: 38px;
        height: 33px;
        text-align: center;
        z-index: 101;

.ham {
            display: inline-block;
            width: 23px;
            height: 2px;
            position: relative;
            top: 2px;
            background-color: $color-2;
            vertical-align: middle;
            white-space: nowrap;
            @include transition(all ease 0.3s);

&:before,
            &:after {
                position: absolute;
                content: "";
                display: inline-block;
                width: 23px;
                height: 2px;
                left: 0;
                background-color: $color-2;
                outline: 1px solid transparent;
                @include transition(all ease 0.3s);
            }

&:before {
                top: -8px;
            }

&:after {
                top: 8px;
            }
        }

&.exit .ham {
            background-color: transparent !important;

&:before,
            &:after {
                background-color: $color-1;
            }

&:before {
                @include transform(translateY(8px) rotateZ(-45deg));
            }

&:after {
                @include transform(translateY(-8px) rotateZ(45deg));
            }
        }
    }

&.nav-open {
        @include transform(none !important);
    }

#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;

#full-screen-menu-inner {
            display: table;
            width: 100%;
            height: 100%;
            padding: 0 40px;
        }

#site-navigation {
            display: table-cell;
            vertical-align: middle;
            padding: 100px 0;
            text-align: center;
        }
    }

.fs-dropdown-menu {
        list-style: none;
        margin: 0;

li {
            a {
                display: block;
                color: $color-1;
                letter-spacing: 2px;
                text-transform: uppercase;

&:hover {
                    color: $color-4;
                }

&:focus {
                    outline: 1px dashed rgba($color: #fff, $alpha: 0.3);
                }
            }

> a .nav-arrow {
                display: inline-block;
                width: 26px;
                padding-left: 5px;
                text-align: center;

&:before {
                    content: "+";
                }

&:focus {
                    outline: 1px dashed rgba($color: #fff, $alpha: 0.3);
                }
            }

&.open-sub > a .nav-arrow:before {
                content: "-";
            }

.sidebar-box {
                display: none;
            }
        }

ul.sub-menu {
            display: none;
            list-style: none;
            margin: 0;
            padding: 0;

li a {
                font-size: 16px;
                padding: 6px 0;
            }
        }

> li {
            display: block;

> a {
                font-size: 24px;
                line-height: 1.2;
                padding: 12px 0;
            }
        }

> li.search-toggle-li {
            max-width: 220px;
            margin: 10px auto 0;

form {
                position: relative;
            }

input,
            .search-text {
                font-size: 20px;
                padding: 4px 0;
                color: $color-1;
                margin: 0;
                text-align: center;
                text-transform: uppercase;
            }

input {
                position: relative;
                border: 0;
                background-color: transparent;
                border-bottom: 1px solid $color-17;
                @include border-radius(0);
                z-index: 2;

&:hover,
                &:focus {
                    border-color: $color-1;
                }
            }

.search-text {
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                cursor: text;
                @include opacity(0.5);
                z-index: 1;

i {
                    display: inline-block;
                    background-color: $color-1;
                    width: 3px;
                    height: 3px;
                    margin-left: 3px;
                    @include animation(blink 1s linear infinite);
                }

i + i {
                    @include animation-delay(0.2s);
                }

i + i + i {
                    @include animation-delay(0.4s);
                }
            }

form.search-filled .search-text {
                @include opacity(0);
                @include transition-duration(150ms);
            }
        }
    }

.oceanwp-social-menu {
        display: block;
        float: none;
        margin-top: 30px;
        text-align: center;
        right: auto;

.social-menu-inner {
            display: block;
            height: auto !important;
        }

ul li {
            float: none;
            display: inline-block;
        }

&.simple-social ul li a {
            background-color: transparent !important;
            color: $color-1;
            font-size: 24px;
            padding: 0 16px;
            margin: 0;

&:hover {
                color: $color-4;
            }
        }

.colored ul li a,
        .minimal ul li a,
        .dark ul li a {
            padding: 0 4px;
        }

.colored ul li a span,
        .minimal ul li a span,
        .dark ul li a span {
            font-size: 16px;
            width: 60px;
            height: 60px;
            line-height: 60px;
        }
    }
}

@-webkit-keyframes blink {
    0% {
        -webkit-opacity: 1;
    }
    50% {
        -webkit-opacity: 0;
    }
    100% {
        -webkit-opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        -moz-opacity: 1;
    }
    50% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 1;
    }
}

@-o-keyframes blink {
    0% {
        -o-opacity: 1;
    }
    50% {
        -o-opacity: 0;
    }
    100% {
        -o-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;
        }

.full-screen-logo-link {
            display: none;
        }
    }
}