first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,48 @@
|
||||
.error404-content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.error-title {
|
||||
font-size: 46px;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.searchform {
|
||||
max-width: 390px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
font-size: 13px;
|
||||
padding: 14px 26px;
|
||||
margin-top: 60px;
|
||||
|
||||
&:hover {
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.error404-content {
|
||||
.searchform {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
#respond {
|
||||
margin-bottom: 20px;
|
||||
|
||||
form {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comment-textarea,
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#comments {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
&.children {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty-closed-comments {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
@include display();
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
|
||||
img.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 30px;
|
||||
@include border-radius( 50% );
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.comment-link, .comment-meta {
|
||||
font-weight: 600;
|
||||
margin: 5px 0 8px;
|
||||
}
|
||||
|
||||
.comment-link {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 10px;
|
||||
line-height: 2.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
.comment-reply-link, .comment-edit-link {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-author .comment-meta .comment-reply-link {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.comment-author .comment-meta .comment-reply-link:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
#respond #cancel-comment-reply-link {
|
||||
font-size: 10px;
|
||||
color: $color-4;
|
||||
float: right;
|
||||
border: 2px solid $color-9;
|
||||
padding: 3px 10px;
|
||||
@include border-radius( 3px );
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
span.required {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
font-size: 10px;
|
||||
margin-left: 3px;
|
||||
color: #F00;
|
||||
}
|
||||
|
||||
.comment-body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-comments {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-navigation {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.nav-links {
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#comments ol.children {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#respond {
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.comment-body img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.comment-link,
|
||||
.comment-meta {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.hasCustomSelect {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
position: relative;
|
||||
border: 1px solid $color-10;
|
||||
color: $color-11;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
padding: 0 45px 0 15px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '\f107';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $color-4;
|
||||
border-left: 1px solid $color-10;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.post-pagination-wrap {
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50px;
|
||||
|
||||
.post-pagination {
|
||||
margin: 0;
|
||||
|
||||
li a {
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
line-height: 46px;
|
||||
font-size: 20px;
|
||||
color: $color-11;
|
||||
border: 2px solid $color-9;
|
||||
@include border-radius( 50% );
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
.page-header {
|
||||
position: relative;
|
||||
background-color: $color-16;
|
||||
padding: 34px 0;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.has-transparent-header .page-header {
|
||||
padding: 120px 0 36px 0;
|
||||
}
|
||||
|
||||
body.home .page-header-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
body.breadcrumbs-position-default .page-header-title {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
|
||||
p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.centered-page-header .page-header-title,
|
||||
.centered-minimal-page-header .page-header-title {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Centered
|
||||
*/
|
||||
.centered-page-header {
|
||||
text-align: center;
|
||||
|
||||
.page-header-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Minimal Centered
|
||||
*/
|
||||
.centered-minimal-page-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid $color-9;
|
||||
text-align: center;
|
||||
|
||||
.page-header-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Solid Color
|
||||
*/
|
||||
.solid-color-page-header .page-header-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.solid-color-page-header .site-breadcrumbs,
|
||||
.solid-color-page-header .site-breadcrumbs a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.solid-color-page-header .page-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Background Image
|
||||
*/
|
||||
.background-image-page-header {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
height: 400px;
|
||||
background-position: 50% 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.page-header-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header.background-image-page-header .page-header-title {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-weight: 400;
|
||||
max-width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.background-image-page-header-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
z-index: 1;
|
||||
@include opacity( 0.5 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumbs
|
||||
*/
|
||||
.site-breadcrumbs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
max-width: 50%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-top: -16px;
|
||||
font-size: 13px;
|
||||
color: #c6c6c6;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.breadcrumb-sep {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-home.has-text,
|
||||
.breadcrumb-home.has-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumb-title {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-breadcrumbs.position-under-title,
|
||||
.centered-page-header .site-breadcrumbs,
|
||||
.centered-minimal-page-header .site-breadcrumbs {
|
||||
position: inherit;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.oceanwp-breadcrumb .site-breadcrumbs {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.background-image-page-header .site-breadcrumbs {
|
||||
display: block;
|
||||
position: inherit;
|
||||
max-width: 100%;
|
||||
margin-top: 20px;
|
||||
top: auto;
|
||||
right: auto;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* compatibility with SEOPress */
|
||||
.site-breadcrumbs nav,
|
||||
.site-breadcrumbs ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* page title */
|
||||
body.has-breadcrumbs .page-header-title {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet Portrait
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* page header */
|
||||
.site-breadcrumbs {
|
||||
position: inherit;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/* Remove fixed background to fix the IOS bug */
|
||||
.page-header {
|
||||
background-attachment: initial !important;
|
||||
}
|
||||
|
||||
/* page header */
|
||||
.page-header-with-background .page-header-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.centered-page-header .page-header-title,
|
||||
.centered-minimal-page-header .page-header-title,
|
||||
.page-header.background-image-page-header .page-header-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.centered-page-header .page-subheading,
|
||||
.centered-minimal-page-header .page-header-subheading,
|
||||
.page-header.background-image-page-header .page-subheading {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.background-image-page-header {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* breadcrumbs */
|
||||
body.has-breadcrumbs .page-header-title {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
ul.page-numbers {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 0 0;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
clear: both;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-links {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.page-numbers a,
|
||||
.page-numbers span:not(.elementor-screen-only),
|
||||
.page-links span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 38px;
|
||||
min-width: 38px;
|
||||
line-height: 38px;
|
||||
margin: 0 8px 0 0;
|
||||
text-align: center;
|
||||
color: $color-11;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@include border-radius( 2px );
|
||||
@include transition( all .3s ease );
|
||||
@include box-sizing( content-box );
|
||||
}
|
||||
|
||||
.page-numbers a span:not(.elementor-screen-only) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-numbers a:hover,
|
||||
.page-links a:hover span,
|
||||
.page-numbers.current,
|
||||
.page-numbers.current:hover,
|
||||
.page-links > span {
|
||||
background-color: $color-8;
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
.elementor-pagination .page-numbers.current,
|
||||
.elementor-pagination .page-numbers.current:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pagination-center {
|
||||
.oceanwp-pagination,
|
||||
.woocommerce-pagination {
|
||||
ul.page-numbers,
|
||||
.page-links {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-left {
|
||||
.oceanwp-pagination,
|
||||
.woocommerce-pagination {
|
||||
ul.page-numbers,
|
||||
.page-links {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* next/prev */
|
||||
.page-jump a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* infinite scroll */
|
||||
.scroller-status,
|
||||
.infinite-scroll-last,
|
||||
.infinite-scroll-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroller-status {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loader-ellips {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
width: 3.5em;
|
||||
height: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loader-ellips__dot {
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 0.5em;
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: 1.3em;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
left: 2.6em;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-name: reveal;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
animation-name: slide;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-name: reveal;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal {
|
||||
from { transform: scale(0.001); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
to { transform: translateX(1.3em) }
|
||||
}
|
||||
|
||||
.infinite-scroll-nav {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* default breakpoint */
|
||||
body.default-breakpoint {
|
||||
#site-logo.has-responsive-logo {
|
||||
.custom-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.responsive-logo-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-logo.has-responsive-logo .sticky-logo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-sticky #site-logo.has-sticky-logo .responsive-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-header.center-header #site-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#top-bar-nav,
|
||||
#site-navigation-wrap,
|
||||
.oceanwp-social-menu,
|
||||
.after-header-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center-logo #site-logo {
|
||||
float: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
padding: 0;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#top-bar.has-no-content #top-bar-social {
|
||||
text-align: center;
|
||||
|
||||
&.top-bar-left,
|
||||
&.top-bar-right {
|
||||
position: inherit;
|
||||
left: auto;
|
||||
right: auto;
|
||||
float: none;
|
||||
height: auto;
|
||||
line-height: 1.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-header-style #outer-wrap {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#site-header.vertical-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
|
||||
.has-template > #site-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
padding: 0;
|
||||
max-width: 90%;
|
||||
|
||||
> *:not(.oceanwp-mobile-menu-icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-closed {
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-cart-overlay { display: none !important; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
.hide-tablet-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
.hide-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Visibility
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 481px) and (max-width: 767px) {
|
||||
.hide-tablet { display: none !important; }
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.search-results article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.search-entry-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
|
||||
img {
|
||||
@include border-radius( 5px );
|
||||
@include box-shadow( 0 0 5px rgba(0,0,0,0.3) );
|
||||
}
|
||||
}
|
||||
|
||||
.search-entry-title {
|
||||
font-size: 24px;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.search-entry-summary p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-entry-readmore a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.search-results article .thumbnail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
#blog-entries {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-entry.post {
|
||||
position: relative;
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
@include opacity( 0 );
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
@include opacity( 1 );
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.blog-entry-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.entry-title {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
margin-bottom: 20px;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
.thumbnail-caption {
|
||||
font-size: 13px;
|
||||
margin-top: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
.has-blog-grid {
|
||||
.blog-grid {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
height: auto!important;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry.grid-entry {
|
||||
float: left;
|
||||
|
||||
.blog-entry-inner {
|
||||
padding: 0 20px 20px;
|
||||
border: 1px solid $color-7;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-entry-header {
|
||||
margin: 20px 0 12px;
|
||||
|
||||
.entry-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
line-height: 1.6;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.blog-entry-readmore {
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: capitalize;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.blog-entry.large-entry {
|
||||
border-bottom: 1px solid $color-9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-entry-readmore {
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
border: 1px solid $color-10;
|
||||
padding: 10px 16px;
|
||||
@include border-radius( 2px );
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
ul.meta {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: $color-15;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
line-height: 1.3;
|
||||
|
||||
&:after {
|
||||
content: '-';
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-15;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
color: $color-4;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
ul.meta {
|
||||
margin-bottom: 12px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
.blog-entry.thumbnail-entry {
|
||||
border-bottom: 1px solid $color-9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.blog-entry-inner {
|
||||
@include display();
|
||||
@include flex-direction( row );
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include display();
|
||||
@include flex-direction( column );
|
||||
}
|
||||
|
||||
.center {
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include justify-content( center );
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include justify-content( flex-end );
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 45%;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link-entry {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left-position .link-entry {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right-position .link-entry {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.left-position .blog-entry-content {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.right-position .blog-entry-content {
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
.blog-entry-category {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1.2em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: $color-5;
|
||||
|
||||
&:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blog-entry-bottom {
|
||||
display: block;
|
||||
border-top: 1px solid $color-7;
|
||||
padding-top: 15px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-entry-comments,
|
||||
.blog-entry-comments a,
|
||||
.blog-entry-date {
|
||||
color: #ababab;
|
||||
}
|
||||
|
||||
.blog-entry-comments {
|
||||
float: left;
|
||||
|
||||
i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-date {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.no-featured-image {
|
||||
.blog-entry-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-position .blog-entry-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.right-position .blog-entry-content {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
.blog-entry.thumbnail-entry {
|
||||
.blog-entry-inner {
|
||||
@include flex-direction( column );
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
margin-top: 15px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Gallery Format
|
||||
*/
|
||||
.gallery-format {
|
||||
display: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
@include opacity( 0 );
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .slick-prev,
|
||||
&:hover .slick-next {
|
||||
@include opacity( 1 );
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Link Format
|
||||
*/
|
||||
.link-entry {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 22px;
|
||||
line-height: 60px;
|
||||
background-color: $color-2;
|
||||
color: $color-1;
|
||||
text-align: center;
|
||||
@include border-radius( 50% );
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail:hover i {
|
||||
background-color: $color-5;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Quote format
|
||||
*/
|
||||
.post-quote-content,
|
||||
.post-quote-author {
|
||||
position: relative;
|
||||
background-color: #13aff0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 20px 30px;
|
||||
line-height: 1.6;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.post-quote-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
font-size: 48px;
|
||||
@include opacity( 0.2 );
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.post-quote-author {
|
||||
background-color: #0b7cac;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 10px 30px;
|
||||
margin-top: 1px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.single-post .post-quote-wrap {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Single Post Author bio
|
||||
*/
|
||||
#author-bio {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
|
||||
#author-bio-inner {
|
||||
@include display();
|
||||
}
|
||||
|
||||
.author-bio-avatar,
|
||||
.author-bio-avatar img {
|
||||
@include border-radius( 50% );
|
||||
}
|
||||
|
||||
.author-bio-avatar {
|
||||
min-width: 80px;
|
||||
margin-right: 30px;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.author-bio-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.author-bio-title {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.author-bio-description p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.author #author-bio {
|
||||
margin: 0 0 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#author-bio .author-bio-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Single Post Content
|
||||
*/
|
||||
.single .entry-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dropcap {
|
||||
float: left;
|
||||
color: $color-5;
|
||||
font-size: 120px;
|
||||
line-height: 80px;
|
||||
margin-top: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.entry-footer {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Single Post Next Prev
|
||||
*/
|
||||
.single nav.post-navigation {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
.title {
|
||||
display: block;
|
||||
color: $color-5;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
padding-right: 20px;
|
||||
|
||||
i {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
padding-left: 20px;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.single nav.post-navigation .nav-links {
|
||||
.nav-previous,
|
||||
.nav-next {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* Single Post
|
||||
*/
|
||||
.single {
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 34px;
|
||||
padding: 0 0 20px;
|
||||
margin: 0 0 15px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-post.content-max-width {
|
||||
#main #content-wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.entry-header,
|
||||
ul.meta,
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4,
|
||||
.entry-content h5,
|
||||
.entry-content h6,
|
||||
.entry-content blockquote,
|
||||
.entry-content p,
|
||||
.post-tags,
|
||||
.entry-share,
|
||||
nav.post-navigation,
|
||||
#author-bio,
|
||||
#related-posts,
|
||||
.comments-area {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.entry-header,
|
||||
ul.meta,
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4,
|
||||
.entry-content h5,
|
||||
.entry-content h6,
|
||||
.entry-content blockquote,
|
||||
.entry-content p,
|
||||
.wp-block-image,
|
||||
.wp-block-gallery,
|
||||
.wp-block-video,
|
||||
.wp-block-quote,
|
||||
.wp-block-text-columns,
|
||||
.wp-block-code,
|
||||
.entry-content ul,
|
||||
.entry-content ol,
|
||||
.wp-block-cover-text,
|
||||
.post-tags,
|
||||
.comments-area {
|
||||
margin: 1.5em auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.entry-content ul,
|
||||
.entry-content ol {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-quote p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.entry-content blockquote p {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.wp-block-cover-text.alignwide,
|
||||
.wp-block-image.alignwide,
|
||||
.wp-block-gallery.alignwide,
|
||||
.wp-block-text-columns.alignwide,
|
||||
.entry-share,
|
||||
nav.post-navigation,
|
||||
#author-bio,
|
||||
#related-posts {
|
||||
margin: 1.5em auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.wp-block-cover-text.alignfull,
|
||||
.wp-block-image.alignfull,
|
||||
.wp-block-gallery.alignfull,
|
||||
.wp-block-text-columns.alignfull {
|
||||
margin: 1.5em 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-image.alignfull img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-image.alignleft,
|
||||
.wp-block-image.alignright {
|
||||
max-width: 350px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-block-image.alignleft {
|
||||
margin-left: calc( 50% - 350px);
|
||||
padding: 14px 36px 14px 0;
|
||||
}
|
||||
|
||||
.wp-block-image.alignright {
|
||||
margin-right: calc( 50% - 350px);
|
||||
padding: 14px 0 14px 36px;
|
||||
}
|
||||
|
||||
figure img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
ul.alignfull,
|
||||
ol.alignfull {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul.alignwide,
|
||||
ol.alignwide {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-cover-image,
|
||||
.wp-block-image {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-block-button a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wp-block-quote.blocks-quote-style-2 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
border-left-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-separator {
|
||||
margin: 30px auto;
|
||||
|
||||
&.is-style-wide {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.single-post.media-above-content .thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.single-post .entry-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Single Post Related posts
|
||||
*/
|
||||
#related-posts {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
.title-wrap {
|
||||
display: block;
|
||||
color: $color-2;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.span_1_of_3 {
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
.related-thumb {
|
||||
display: block;
|
||||
background-color: $color-3;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@include transition( opacity .3s );
|
||||
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.7 );
|
||||
}
|
||||
}
|
||||
|
||||
.related-post-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 12px 12px 3px 12px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
time.published {
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#related-posts {
|
||||
.col {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Single Post Tags
|
||||
*/
|
||||
.single .post-tags {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin: 30px 0 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Video/audio format
|
||||
*/
|
||||
.wp-video {
|
||||
width: 100% !important;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Footer bottom
|
||||
*/
|
||||
#footer-bottom {
|
||||
background-color: $color-12;
|
||||
padding: 15px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
|
||||
#footer-bottom-menu, #copyright {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#footer-bottom-menu {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-left: 15px;
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
&:after {
|
||||
content: '|';
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-footer-nav #copyright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* center footer bottom */
|
||||
#footer-bottom {
|
||||
#copyright,
|
||||
#footer-bottom-menu {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer-bottom-menu {
|
||||
margin-bottom: 15px;
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#footer-bottom #footer-bottom-menu li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
.site-footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footer widgets
|
||||
*/
|
||||
#footer-widgets {
|
||||
background-color: $color-3;
|
||||
padding: 30px 0;
|
||||
margin: 0;
|
||||
|
||||
.footer-box {
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
|
||||
.footer-widget {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wp-calendar caption,
|
||||
#wp-calendar th,
|
||||
#wp-calendar tbody,
|
||||
.contact-info-widget i,
|
||||
.mailchimp-widget input[type="email"],
|
||||
.posts-thumbnails-widget li,
|
||||
.social-widget li a {
|
||||
border-color: $color-11;
|
||||
}
|
||||
|
||||
.mailchimp-widget input[type="email"]:focus {
|
||||
border-color: $color-5;
|
||||
}
|
||||
|
||||
.tagcloud a {
|
||||
background-color: $color-3;
|
||||
border-color: $color-2;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-14;
|
||||
color: $color-1;
|
||||
border-color: $color-11;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parallax footer
|
||||
*/
|
||||
.parallax-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.has-parallax-footer #main {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.has-parallax-footer:not(.boxed-layout) #main {
|
||||
@include box-shadow( 0 0 40px 0 rgba(0,0,0,0.10) );
|
||||
}
|
||||
|
||||
.has-parallax-footer:not(.separate-layout) #main {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
.has-parallax-footer.separate-layout #main {
|
||||
background-color: $color-9;
|
||||
}
|
||||
|
||||
.boxed-layout .parallax-footer {
|
||||
width: 1280px;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* margin footer columns */
|
||||
#footer-widgets {
|
||||
.col {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Parallax footer */
|
||||
.has-parallax-footer #main {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.parallax-footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Responsive columns */
|
||||
@media only screen and (min-width: 481px) and (max-width: 768px) {
|
||||
#footer-widgets.tablet-1-col .footer-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-2-col .footer-box {
|
||||
width: 50% !important;
|
||||
|
||||
&:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-3-col .footer-box {
|
||||
width: 33.33% !important;
|
||||
clear: none;
|
||||
|
||||
&:nth-child(4n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-4-col .footer-box {
|
||||
width: 25% !important;
|
||||
|
||||
&:nth-child(5n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
#footer-widgets.mobile-1-col .footer-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-2-col .footer-box {
|
||||
width: 50% !important;
|
||||
|
||||
&:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-3-col .footer-box {
|
||||
width: 33.33% !important;
|
||||
clear: none;
|
||||
|
||||
&:nth-child(4n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-4-col .footer-box {
|
||||
width: 25% !important;
|
||||
|
||||
&:nth-child(5n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Scroll top
|
||||
*/
|
||||
#scroll-top {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: $color-1;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@include border-radius( 2px );
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
@include box-sizing( content-box );
|
||||
|
||||
> span {
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&.scroll-top-left {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#scroll-top {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
#site-header.center-header {
|
||||
#site-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
width: 100%;
|
||||
right: auto;
|
||||
|
||||
.navigation {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
}
|
||||
|
||||
.middle-site-logo {
|
||||
width: 24%;
|
||||
text-align: center;
|
||||
|
||||
a img {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-in-out );
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.6 );
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu,
|
||||
.right-menu {
|
||||
position: relative;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
.left-menu,
|
||||
.right-menu {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wider .left-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wider .right-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.closer .left-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.closer .right-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#searchform-header-replace.show {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
#site-navigation .middle-site-logo {
|
||||
@include transition( opacity .3s );
|
||||
}
|
||||
|
||||
#site-navigation.hide .middle-site-logo {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
#site-header.custom-header ul.oceanwp-custom-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-logo {
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-nav {
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto;
|
||||
|
||||
#site-navigation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
float: none !important;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
#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 .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 .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;
|
||||
}
|
||||
}
|
||||
|
||||
> a .nav-arrow {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
|
||||
&.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, label {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: text;
|
||||
@include opacity( .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( .2s );
|
||||
}
|
||||
|
||||
i+i+i {
|
||||
@include animation-delay( .4s );
|
||||
}
|
||||
}
|
||||
|
||||
form.search-filled label {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
#site-header.medium-header {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
.top-header-wrap {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 30px 0;
|
||||
@include transition( padding .4s ease-in-out );
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-header-inner {
|
||||
@include display();
|
||||
@include flex-direction( row );
|
||||
@include align-items( center );
|
||||
@include justify-content( center );
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-col {
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
|
||||
&.col-1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.col-2,
|
||||
&.logo-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.col-3 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
#medium-searchform {
|
||||
form {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
background-color: transparent !important;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 6px 38px 6px 12px;
|
||||
max-width: 178px;
|
||||
z-index: 2;
|
||||
|
||||
&:focus {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
label, button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
left: 12px;
|
||||
color: $color-2;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 0;
|
||||
width: 38px;
|
||||
background-color: transparent;
|
||||
color: $color-11;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $color-16;
|
||||
}
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: block;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
float: none;
|
||||
display: block;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
|
||||
.social-menu-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
ul li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
position: relative;
|
||||
background-color: #f9f9f9;
|
||||
float: none;
|
||||
position: relative;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
@include transform( none );
|
||||
z-index: 9;
|
||||
|
||||
&.left-menu #site-navigation {
|
||||
float: left;
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
&.center-menu #site-navigation {
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-menu #site-navigation {
|
||||
float: right;
|
||||
right: -22px;
|
||||
}
|
||||
|
||||
#site-navigation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
padding: 0 22px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden-menu {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 150px;
|
||||
@include transition( all .4s ease-in-out );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-header.medium-header {
|
||||
|
||||
.top-header-wrap {
|
||||
padding: 20px 0;
|
||||
|
||||
.oceanwp-social-menu .social-menu-inner {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden-menu {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 0;
|
||||
@include opacity( 0 );
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 150px;
|
||||
@include opacity( 1 );
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.medium-header .oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
background-color: #f9f9f9;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
|
||||
a {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding: 0 22px;
|
||||
line-height: 60px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.medium-header.is-transparent {
|
||||
.top-header-wrap,
|
||||
#site-navigation-wrap,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
background-color: transparent;
|
||||
@include transition( all .3s );
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* Hide social and search form in sidr for the medium header style */
|
||||
.medium-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#site-header.medium-header {
|
||||
.top-header-inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-col:not(.logo-col) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-col.logo-col {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show social and search form in sidr for the medium header style */
|
||||
.medium-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* medium header style */
|
||||
#site-header.medium-header {
|
||||
.header-top-wrap {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon a {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
#site-header.top-header {
|
||||
border-bottom: 0 !important;
|
||||
|
||||
.header-top {
|
||||
position: relative;
|
||||
background-color: $color-1;
|
||||
@include box-shadow( 0 1px 5px 0 rgba(0,0,0,0.1) );
|
||||
z-index: 100;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
|
||||
.inner {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
.left, .right {
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto !important;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
#site-navigation-wrap .dropdown-menu > li > a {
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu,
|
||||
#search-toggle {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu .social-menu-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
right: 0;
|
||||
padding: 0 10px;
|
||||
|
||||
.colored ul li a,
|
||||
.minimal ul li a,
|
||||
.dark ul li a {
|
||||
padding: 0 3px;
|
||||
|
||||
span {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle {
|
||||
border-right: 1px solid $color-9;
|
||||
border-left: 1px solid $color-9;
|
||||
padding: 0 6px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.search-overlay #search-toggle .search-overlay-toggle {
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
|
||||
&.exit > span:before {
|
||||
content: '✕';
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace input {
|
||||
color: $color-3;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#searchform-header-replace-close {
|
||||
font-size: 16px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
padding: 50px 0;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#site-description {
|
||||
padding-top: 20px;
|
||||
|
||||
h2 {
|
||||
color: $color-4;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#site-header.top-header .oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
|
||||
a {
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.top-header.has-header-media {
|
||||
#site-header-sticky-wrapper,
|
||||
.header-top {
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* Hide social and search form in sidr for the top menu header style */
|
||||
.top-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* Hide social and search in menu and show them in sidr for the top menu header style */
|
||||
#site-header.top-header {
|
||||
.right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
.left.hide,
|
||||
.right.hide {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
.header-top {
|
||||
.left,
|
||||
.right {
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
|
||||
a {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-top .right .inner {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu,
|
||||
#search-toggle {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
#site-header.transparent-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
|
||||
#site-logo.has-transparent-logo {
|
||||
.custom-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transparent-logo-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-header.transparent-header #site-logo.has-transparent-logo {
|
||||
.custom-logo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.transparent-logo-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
#site-header.vertical-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: none;
|
||||
z-index: 3000;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
&.has-scrolled {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
&.has-shadow {
|
||||
@include box-shadow( 0 0 20px 0 rgba(0,0,0,0.10) );
|
||||
}
|
||||
|
||||
.has-template > #site-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
max-width: 100%;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
|
||||
> *:not(#site-navigation-wrap) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#sidr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-left-logo #site-logo {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.vh-center-logo #site-logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.vh-right-logo #site-logo {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#site-logo,
|
||||
#site-logo #site-logo-inner {
|
||||
display: block;
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
margin: 20px 0 45px;
|
||||
}
|
||||
|
||||
.has-social #site-navigation-wrap {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
.dropdown-menu li {
|
||||
display: block;
|
||||
float: none;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
padding: 17px 30px;
|
||||
|
||||
.dropdown-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
line-height: 1;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .sub-menu {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: none;
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
@include box-shadow( none );
|
||||
}
|
||||
|
||||
.nav-arrow,
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#vertical-searchform {
|
||||
margin-top: 40px;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
border-width: 0 0 2px;
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(0, 0, 0, 0.04);
|
||||
padding: 10px 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
label, button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin: 0;
|
||||
@include transform( translateY(-50%) );
|
||||
}
|
||||
|
||||
label {
|
||||
left: 12px;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: #777;
|
||||
border: none;
|
||||
z-index: 2;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
float: none;
|
||||
display: block;
|
||||
margin-top: 40px;
|
||||
|
||||
&.simple-social {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.social-menu-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-nav #site-navigation-wrap #site-navigation {
|
||||
display: block;
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 22px;
|
||||
line-height: 34px;
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.has-vh-transparent .is-sticky #site-header.vertical-header {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
body.vertical-header-style {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
|
||||
.vertical-toggle {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
|
||||
.vertical-toggle {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-vh-transparent {
|
||||
&.left-header #outer-wrap {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.right-header #outer-wrap {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-closed {
|
||||
&.left-header #site-header.vertical-header {
|
||||
left: -266px;
|
||||
}
|
||||
|
||||
&.left-header #outer-wrap {
|
||||
margin-left: 34px;
|
||||
}
|
||||
|
||||
&.right-header #site-header.vertical-header {
|
||||
right: -266px;
|
||||
}
|
||||
|
||||
&.right-header #outer-wrap {
|
||||
margin-right: 34px;
|
||||
}
|
||||
|
||||
&.vh-opened {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header #site-navigation-wrap {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header {
|
||||
.vertical-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
padding-right: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 1280px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 1280px) {
|
||||
|
||||
body.vertical-header-style.default-collapse {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: -266px;
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: -266px;
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-opened {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header #site-navigation-wrap {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.default-collapse #site-header.vertical-header {
|
||||
.vertical-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
padding-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
#site-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: $color-1;
|
||||
border-bottom: 1px solid $color-9;
|
||||
z-index: 100;
|
||||
|
||||
&.is-transparent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
#transparent-header-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-transparent-header {
|
||||
.oceanwp-sticky-header-holder {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.is-sticky #site-header {
|
||||
background-color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-header-border #site-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: left;
|
||||
height: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#site-logo #site-logo-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 74px;
|
||||
|
||||
a {
|
||||
background-color: transparent !important;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-in-out );
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.6 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-logo a.site-logo-text {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive logo */
|
||||
#site-logo.has-responsive-logo .responsive-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Header media
|
||||
*/
|
||||
#site-header.has-header-media {
|
||||
> *:not(.overlay-header-media) {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay-header-media {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Video header
|
||||
*/
|
||||
#site-header .custom-header-media {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
}
|
||||
|
||||
video, iframe {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
max-width: 1000%;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 100vw;
|
||||
width: auto;
|
||||
top: 50%;
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
|
||||
.wp-custom-header-video-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-header-video #site-header-inner {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
.has-left-menu #site-logo {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/* logo */
|
||||
#site-logo {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,404 @@
|
||||
.effect-one #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
background-color: #13aff0;
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
visibility: hidden;
|
||||
-moz-transform: scaleX(0);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom left;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
visibility: visible;
|
||||
-moz-transform: scaleX(1);
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
visibility: visible;
|
||||
-moz-transform: scaleX(1);
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-two #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-three #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
height: 2px;
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
height: 2px;
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-four #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #13aff0;
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: 6px;
|
||||
content: '[';
|
||||
@include transform( translateX(20px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin-left: 6px;
|
||||
content: ']';
|
||||
@include transform( translateX(-20px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-five #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 130%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( scale(0.85) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
@include transform( scale(1) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
top: -30%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( scale(1) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
top: -30%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-six #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid rgba(0,0,0,0.1);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(0.2) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-width: 4px;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(0.8) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(1) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(1) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-seven #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -80%;
|
||||
left: 50%;
|
||||
color: transparent;
|
||||
content: '•';
|
||||
text-shadow: 0 0 transparent;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateX(-50%) );
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
color: #13aff0;
|
||||
text-shadow: 10px 0 #13aff0, -10px 0 #13aff0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
color: #13aff0;
|
||||
text-shadow: 10px 0 #13aff0, -10px 0 #13aff0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-eight #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
content: '';
|
||||
z-index: -1;
|
||||
@include transition( all .25s ease-out );
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform( translateY(-13px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform( translateY(15px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover > span:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-nine #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
@include transform( translateY(10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover > span:before {
|
||||
@include transform( translateY(-3px) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
@include transform( translateY(5px) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before {
|
||||
@include transform( translateY(-3px) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( translateY(5px) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-ten #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
padding: 8px;
|
||||
@include transition( box-shadow .25s ease-out );
|
||||
}
|
||||
|
||||
&:hover > span {
|
||||
@include box-shadow( 0 0 10px 4px rgba(0,0,0,0.1) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span {
|
||||
@include box-shadow( 0 0 10px 4px rgba(0,0,0,0.1) );
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
.navigation .megamenu {
|
||||
a .nav-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li > a.menu-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li ul.sub-menu {
|
||||
border-top: 1px solid $color-9;
|
||||
}
|
||||
|
||||
li a.menu-link {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
padding: 20px;
|
||||
margin-bottom: 0;
|
||||
line-height: $base-line-height;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation > ul > li > ul.megamenu.sub-menu > li {
|
||||
float: left;
|
||||
border-bottom: 0;
|
||||
border-left-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation li.megamenu-li.hide-headings > .megamenu > li > a,
|
||||
.navigation li.megamenu-li > .megamenu > li.hide-heading > a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation .megamenu .sub-menu {
|
||||
display: block !important;
|
||||
@include opacity( 1 !important );
|
||||
min-width: 100%;
|
||||
position: static;
|
||||
background: transparent;
|
||||
@include box-shadow( none );
|
||||
}
|
||||
|
||||
/**
|
||||
* Megamenu columns
|
||||
*/
|
||||
.navigation li.megamenu-li .megamenu {
|
||||
&.col-1 > li { width: 100%; }
|
||||
&.col-2 > li { width: 50%; }
|
||||
&.col-3 > li { width: 33.33333333%; }
|
||||
&.col-4 > li { width: 25%; }
|
||||
&.col-5 > li { width: 20%; }
|
||||
&.col-6 > li { width: 16.66666667%; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Megamenu auto width
|
||||
*/
|
||||
@media only screen and (min-width: 959px) {
|
||||
.navigation li.megamenu-li.auto-mega .megamenu {
|
||||
&.col-1 { width: 320px; }
|
||||
&.col-2 { width: 440px; }
|
||||
&.col-3 { width: 660px; }
|
||||
&.col-4 { width: 780px; }
|
||||
&.col-5 { width: 980px; }
|
||||
&.col-6 { width: 1080px; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Elementor Template
|
||||
*/
|
||||
.navigation > ul > li > ul.megamenu.sub-menu > li .elementor {
|
||||
white-space: normal;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* Latest Posts Categories
|
||||
*/
|
||||
.navigation li.mega-cat {
|
||||
.megamenu {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.mega-cat-title {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
background-color: #f8f8f8;
|
||||
color: $color-3;
|
||||
letter-spacing: 2px;
|
||||
margin: 0 -20px 30px;
|
||||
padding: 15px 35px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> ul > li {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li a.mega-post-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include border-radius( 3px );
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
@include opacity( 0 );
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
ul li .mega-post-title {
|
||||
display: block;
|
||||
margin: 15px 0 8px;
|
||||
white-space: initial;
|
||||
|
||||
a {
|
||||
color: $color-11;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li .mega-post-date {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: $color-13;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
font-size: 9px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation > ul > li.mega-cat > ul.megamenu.sub-menu > li.first {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet & Small Desktop Widths
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 768px) and (max-width: 1280px) {
|
||||
|
||||
/* megamenu */
|
||||
.navigation li.megamenu.auto-width.col-6 > .sub-menu {
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
#site-navigation-wrap {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: -15px;
|
||||
|
||||
.dropdown-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 74px;
|
||||
color: $color-11;
|
||||
padding: 0 15px;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
&.site-search-toggle {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
padding-left: 6px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn > a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&.btn > a > span {
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
padding: 12px 22px;
|
||||
font-weight: 600;
|
||||
@include border-radius( 4px );
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
@include transition( background-color .3s ease );
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn > a:hover > span {
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
&.btn.rounded > a > span {
|
||||
@include border-radius( 25px );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If social
|
||||
.has-social #site-navigation-wrap {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// If left menu
|
||||
.minimal-header.left-menu #site-navigation-wrap,
|
||||
.transparent-header.left-menu #site-navigation-wrap {
|
||||
float: left;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.minimal-header.left-menu #site-logo,
|
||||
.transparent-header.left-menu #site-logo {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// If center menu
|
||||
.center-menu #site-navigation-wrap {
|
||||
position: absolute;
|
||||
float: none;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
@include transform( translateX(-50%) );
|
||||
}
|
||||
|
||||
/**
|
||||
* SuperFish
|
||||
*/
|
||||
.sf-menu,
|
||||
.sf-menu * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sf-menu {
|
||||
li.menu-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
li:hover,
|
||||
li.sfHover {
|
||||
@include transition( none );
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
> li {
|
||||
float: left
|
||||
|
||||
}
|
||||
|
||||
li:hover > ul,
|
||||
li.sfHover > ul {
|
||||
display: block
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
ul.sub-menu ul {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown
|
||||
*/
|
||||
.dropdown-menu,
|
||||
.dropdown-menu * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.sub-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: $color-1;
|
||||
border-top: 3px solid $color-5;
|
||||
min-width: 180px;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
z-index: 999;
|
||||
@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
|
||||
}
|
||||
|
||||
li .sub-menu li.menu-item {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
ul .sub-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-top-border .sub-menu {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
ul li.menu-item {
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-9;
|
||||
}
|
||||
|
||||
ul li.menu-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
ul li a.menu-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: none;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: 0.6px;
|
||||
padding: 12px 15px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-8;
|
||||
color: $color-11;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
margin-top: -6.5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
.dropdown-menu li a.menu-link i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Item description
|
||||
*/
|
||||
.nav-content {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
line-height: $base-line-height;
|
||||
padding: 5px 0;
|
||||
white-space: normal;
|
||||
@include opacity( 0.7 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Menu Icons
|
||||
*/
|
||||
.navigation li a {
|
||||
i.icon, span.icon-wrap, img.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
&.icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.before,
|
||||
&.after {
|
||||
margin-top: -.265em;
|
||||
}
|
||||
|
||||
&.before {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.after {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.elusive {
|
||||
margin-top: -.3em;
|
||||
}
|
||||
}
|
||||
|
||||
span.icon-wrap {
|
||||
text-align: center;
|
||||
|
||||
i.below, img {
|
||||
display: block;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 auto 8px auto;
|
||||
}
|
||||
|
||||
span.menu-text {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
&.before {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.after {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* After header content
|
||||
*/
|
||||
.after-header-content {
|
||||
float: right;
|
||||
height: 100%;
|
||||
display: table;
|
||||
|
||||
.after-header-content-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 74px;
|
||||
|
||||
> a,
|
||||
> div > a {
|
||||
display: inline-block;
|
||||
line-height: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
.elementor {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Mobile Menu
|
||||
*------------------------------------*/
|
||||
.oceanwp-mobile-menu-icon {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
&.mobile-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.mobile-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
line-height: 74px;
|
||||
color: #555;
|
||||
padding-left: 15px;
|
||||
letter-spacing: 0.6px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
}
|
||||
|
||||
&.mobile-menu {
|
||||
.oceanwp-text,
|
||||
.oceanwp-close-text {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.oceanwp-close-text,
|
||||
&.opened .oceanwp-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened .oceanwp-close-text {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
#searchform-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: $color-1;
|
||||
border-top: 3px solid $color-5;
|
||||
top: 100%;
|
||||
padding: 15px;
|
||||
width: 260px;
|
||||
@include box-shadow( 0 2px 7px rgba(0,0,0,0.1) );
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
transition: all 0.25s ease-in-out;
|
||||
z-index: 10000;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
@include border-radius( 0 );
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-top-border #searchform-dropdown {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* display search on click */
|
||||
#searchform-dropdown.show {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
#searchform-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
z-index: 9999;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
max-width: 550px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a.search-overlay-close {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
text-align: center;
|
||||
@include border-radius( 2px );
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
background-color: $color-1;
|
||||
@include border-radius( 5px );
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -33px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
input, label {
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
padding: 18px 0;
|
||||
margin: 0;
|
||||
min-height: 50px;
|
||||
color: $color-1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $color-14;
|
||||
z-index: 2;
|
||||
@include transition( border-color .3s ease );
|
||||
|
||||
&:hover {
|
||||
border-color: $color-15;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: text;
|
||||
@include opacity( .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( .2s );
|
||||
}
|
||||
|
||||
i+i+i {
|
||||
@include animation-delay( .4s );
|
||||
}
|
||||
}
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* header > search overlay */
|
||||
#searchform-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
#site-header.header-replace {
|
||||
#site-navigation {
|
||||
.dropdown-menu {
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
}
|
||||
|
||||
&.hide .dropdown-menu {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
|
||||
form {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 94%;
|
||||
font-size: 22px;
|
||||
background-color: transparent;
|
||||
color: $color-13;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
@include border-radius( 0 );
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 26px;
|
||||
color: $color-13;
|
||||
cursor: pointer;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
}
|
||||
}
|
||||
|
||||
/* display search on click */
|
||||
#searchform-header-replace.show {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
.oceanwp-social-menu {
|
||||
float: right;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
&.simple-social {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
&.social-with-style {
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
.social-menu-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
color: $color-4;
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
letter-spacing: 0;
|
||||
|
||||
span {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b; }
|
||||
&.oceanwp-googleplus a:hover { color: #de5a49; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762; }
|
||||
&.oceanwp-github a:hover { color: #60b044; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f; }
|
||||
&.oceanwp-xing a:hover { color: #006464; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900; }
|
||||
&.oceanwp-email a:hover { color: #13aff0; }
|
||||
}
|
||||
}
|
||||
|
||||
.colored ul li {
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $color-1;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a { background-color: #46d4fe; }
|
||||
&.oceanwp-twitter a:hover { background-color: #39b4d8; }
|
||||
&.oceanwp-facebook a{ background-color: #37589b; }
|
||||
&.oceanwp-facebook a:hover{ background-color: #2d477c; }
|
||||
&.oceanwp-googleplus a{ background-color: #de5a49; }
|
||||
&.oceanwp-googleplus a:hover { background-color: #bb4c3e; }
|
||||
&.oceanwp-pinterest a { background-color: #cb2027; }
|
||||
&.oceanwp-pinterest a:hover { background-color: #a91d23; }
|
||||
&.oceanwp-dribbble a { background-color: #ea4c89; }
|
||||
&.oceanwp-dribbble a:hover { background-color: #c64174; }
|
||||
&.oceanwp-vk a { background-color: #597BA5; }
|
||||
&.oceanwp-vk a:hover { background-color: #486384; }
|
||||
&.oceanwp-instagram a { background-color: #3F729B; }
|
||||
&.oceanwp-instagram a:hover { background-color: #315a7c; }
|
||||
&.oceanwp-linkedin a{ background-color: #3399CC; }
|
||||
&.oceanwp-linkedin a:hover { background-color: #2678a1; }
|
||||
&.oceanwp-tumblr a { background-color: #2C4762; }
|
||||
&.oceanwp-tumblr a:hover { background-color: #1d3042; }
|
||||
&.oceanwp-github a { background-color: #60b044; }
|
||||
&.oceanwp-github a:hover { background-color: #4f9237; }
|
||||
&.oceanwp-flickr a { background-color: #fa4086; }
|
||||
&.oceanwp-flickr a:hover { background-color: #c63169; }
|
||||
&.oceanwp-skype a { background-color: #00AFF0; }
|
||||
&.oceanwp-skype a:hover { background-color: #0291c6; }
|
||||
&.oceanwp-youtube a { background-color: #C4302B; }
|
||||
&.oceanwp-youtube a:hover { background-color: #982420; }
|
||||
&.oceanwp-vimeo a { background-color: #1ab7ea; }
|
||||
&.oceanwp-vimeo a:hover { background-color: #1494bd; }
|
||||
&.oceanwp-vine a { background-color: #00bf8f; }
|
||||
&.oceanwp-vine a:hover { background-color: #01906c; }
|
||||
&.oceanwp-xing a { background-color: #006464; }
|
||||
&.oceanwp-xing a:hover { background-color: #014646; }
|
||||
&.oceanwp-yelp a { background-color: #C41200; }
|
||||
&.oceanwp-yelp a:hover { background-color: #940f01; }
|
||||
&.oceanwp-tripadvisor a { background-color: #589442; }
|
||||
&.oceanwp-tripadvisor a:hover { background-color: #426f32; }
|
||||
&.oceanwp-rss a { background-color: #ff7900; }
|
||||
&.oceanwp-rss a:hover { background-color: #d46603; }
|
||||
&.oceanwp-email a { background-color: #13aff0; }
|
||||
&.oceanwp-email a:hover { background-color: #0f8dc2; }
|
||||
}
|
||||
|
||||
.minimal ul li {
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
background-color: transparent;
|
||||
color: #bbb;
|
||||
border: 1px solid #ccc;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe; border-color: #46d4fe; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b; border-color: #37589b; }
|
||||
&.oceanwp-googleplus a:hover { color: #de5a49; border-color: #de5a49; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027; border-color: #cb2027; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89; border-color: #ea4c89; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5; border-color: #597BA5; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B; border-color: #3F729B; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC; border-color: #3399CC; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762; border-color: #2C4762; }
|
||||
&.oceanwp-github a:hover { color: #60b044; border-color: #60b044; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086; border-color: #fa4086; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0; border-color: #00AFF0; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B; border-color: #C4302B; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea; border-color: #1ab7ea; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f; border-color: #00bf8f; }
|
||||
&.oceanwp-xing a:hover { color: #006464; border-color: #006464; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200; border-color: #C41200; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442; border-color: #589442; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900; border-color: #ff7900; }
|
||||
&.oceanwp-email a:hover { color: #13aff0; border-color: #13aff0; }
|
||||
}
|
||||
|
||||
.dark ul li a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
background-color: $color-2;
|
||||
color: $color-1;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
#mobile-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
@include box-shadow( 0 2px 6px rgba(0,0,0,0.1) );
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.035);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 12px 40px;
|
||||
text-align: left;
|
||||
|
||||
i,
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
padding-right: 40px;
|
||||
text-align: center;
|
||||
@include transition( all 0.3s ease );
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
line-height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
border-top: 1px solid rgba(0,0,0,0.035);
|
||||
margin-left: 0;
|
||||
background-color: rgba(0,0,0,0.02);
|
||||
}
|
||||
}
|
||||
|
||||
li.woo-menu-icon,
|
||||
li.search-toggle-li,
|
||||
li.side-panel-li,
|
||||
li a .nav-arrow,
|
||||
.sidebar-box,
|
||||
.widget {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
display: block !important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
padding: 0 40px !important;
|
||||
margin: 10px 0 !important;
|
||||
|
||||
.social-menu-inner {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu-search {
|
||||
display: block;
|
||||
padding: 20px 40px;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding: 6px 45px 6px 12px !important;
|
||||
margin-top: 0 !important;
|
||||
-webkit-box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
background-color: transparent !important;
|
||||
color: #555;
|
||||
border: 0;
|
||||
@include transition( all 0.3s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-social #mobile-menu-search {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
#mobile-fullscreen {
|
||||
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: 100000;
|
||||
|
||||
#mobile-fullscreen-inner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
a.close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
|
||||
.close-icon-wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@include transition( opacity .15s linear );
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon-inner,
|
||||
.close-icon-inner::after {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.close-icon-inner {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
.close-icon-inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
@include transform( rotate(-90deg) );
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: $color-1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $color-4;
|
||||
}
|
||||
|
||||
i,
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 600;
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
|
||||
&.open-sub > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li a {
|
||||
font-size: 13px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-menu-icon,
|
||||
.search-toggle-li,
|
||||
.side-panel-li,
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-search {
|
||||
max-width: 220px;
|
||||
margin: 10px auto 0;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input, label {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: text;
|
||||
@include opacity( .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( .2s );
|
||||
}
|
||||
|
||||
i+i+i {
|
||||
@include animation-delay( .4s );
|
||||
}
|
||||
}
|
||||
|
||||
form.search-filled label {
|
||||
@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 {
|
||||
color: $color-1;
|
||||
font-size: 24px;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
background-color: transparent !important;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Fix for the tabs under the header in the edit mode */
|
||||
.fl-builder-edit #site-header,
|
||||
.fl-builder-edit.has-transparent-header #site-header,
|
||||
.elementor-editor-active #site-header { z-index: 1; }
|
||||
.fl-builder-edit #main,
|
||||
.elementor-editor-active #main { z-index: inherit !important; }
|
||||
|
||||
/* Fix the height automatically in the custom header style */
|
||||
#site-header .elementor-section-wrap {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fix image alignment with caption issue */
|
||||
.elementor-widget-image .elementor-image img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Fix carousel next/prev bug in Elementor */
|
||||
.elementor-slick-slider .slick-prev,
|
||||
.elementor-slick-slider .slick-next {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Fix background hover color on the photoswipe buttons */
|
||||
.pswp__button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Fix bug with MotoPress */
|
||||
div.motopress-bootstrap-dropdown .dropdown-menu {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Fix problem with Geolocation addon of Caldera form in the Ocean Modal Window */
|
||||
.pac-container {
|
||||
z-index: 100003;
|
||||
}
|
||||
|
||||
/* Remove the Elementor section min height if the no-height class is added */
|
||||
.no-height .elementor-column {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* WooCommerce issues with Elementor Pro */
|
||||
body .elementor-element.elementor-wc-products ul.products li.product .onsale {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
body .elementor-element.elementor-wc-products ul.products li.product.circle-sale .onsale {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 959px) {
|
||||
.elementor-element.elementor-wc-products ul.products li.product {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix parallax footer issue in the Elementor editor */
|
||||
.elementor-editor-active .parallax-footer { z-index: -1; }
|
||||
|
||||
/* Fix checkbox issue in Elementor */
|
||||
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
.mfp-bg {
|
||||
z-index: 104200;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
z-index: 104300;
|
||||
}
|
||||
|
||||
/* Zoom effect */
|
||||
.mfp-with-zoom {
|
||||
.mfp-container,
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transition( all .3s ease-out );
|
||||
}
|
||||
|
||||
&.mfp-ready {
|
||||
.mfp-container {
|
||||
opacity: 1;
|
||||
}
|
||||
&.mfp-bg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.mfp-removing {
|
||||
.mfp-container,
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur {
|
||||
& {
|
||||
cursor: -moz-default;
|
||||
cursor: -webkit-default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-close {
|
||||
width: 20px;
|
||||
cursor: -moz-pointer;
|
||||
cursor: -webkit-pointer;
|
||||
cursor: pointer;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade effect */
|
||||
.mfp-fade {
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
@include transition( all .15s ease-out );
|
||||
|
||||
&.mfp-ready {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.mfp-removing {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mfp-wrap {
|
||||
.mfp-content {
|
||||
opacity: 0;
|
||||
@include transition( all .15s ease-out );
|
||||
}
|
||||
|
||||
&.mfp-ready .mfp-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.mfp-removing .mfp-content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
#sidr-close,
|
||||
.sidebar-mobile #mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidr {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
padding-bottom: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
background-color: $color-1;
|
||||
color: $color-11;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr.right {
|
||||
left: auto;
|
||||
right: -300px;
|
||||
}
|
||||
|
||||
.sidr.left {
|
||||
left: -300px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.sidr a {
|
||||
color: $color-11;
|
||||
}
|
||||
|
||||
.sidr a:hover,
|
||||
.sidr-class-dropdown-toggle:hover,
|
||||
.sidr-class-menu-item-has-children.active > a,
|
||||
.sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.sidr-class-clr:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
a.sidr-class-toggle-sidr-close {
|
||||
display: block;
|
||||
background-color: $color-8;
|
||||
color: $color-2;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 20px;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu,
|
||||
.sidr-class-fs-dropdown-menu {
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.035);
|
||||
margin-left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.035);
|
||||
}
|
||||
|
||||
&.sidr-class-left-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> li:first-child {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.035);
|
||||
}
|
||||
|
||||
li a {
|
||||
padding: 12px 20px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li a.sidr-class-sf-with-ul {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-top-bar-menu > li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidr-class-menu-item-has-children {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu li.sidr-class-menu-item-has-children > a {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-toggle {
|
||||
font-size: 11px;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
color: $color-11;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu {
|
||||
li.active > a > .sidr-class-dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
ul a:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '\f105';
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul ul a:before {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
ul ul ul a:before {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-middle-site-logo,
|
||||
.sidr #searchform-header-replace-close,
|
||||
.sidr #sidr-id-searchform-overlay,
|
||||
.sidr .sidr-class-nav-arrow,
|
||||
.sidr-class-sidebar-box,
|
||||
.sidr-class-mega-cat .sidr-class-dropdown-toggle,
|
||||
.sidr-class-mega-cat .sidr-class-megamenu,
|
||||
.sidr-class-elementor {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu li.sidr-class-menu-item-has-children.sidr-class-mega-cat > a {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.sidr-class-dropdown-menu a i {
|
||||
font-size: inherit !important;
|
||||
vertical-align: initial !important;
|
||||
margin-right: 10px;
|
||||
|
||||
&.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* WPML img */
|
||||
.sidr-class-wpml-ls-flag {
|
||||
margin-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.oceanwp-sidr-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
#mobile-menu-search,
|
||||
.sidr-class-woo-cart-link,
|
||||
.sidr-class-search-toggle-li,
|
||||
#sidr-id-searchform-dropdown,
|
||||
#sidr-id-searchform-header-replace {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidr-class-mobile-searchform {
|
||||
position: relative;
|
||||
margin: 30px 20px 0;
|
||||
|
||||
input {
|
||||
padding: 6px 45px 6px 12px !important;
|
||||
margin-top: 0 !important;
|
||||
@include box-sizing( inherit );
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
background-color: transparent !important;
|
||||
color: $color-11;
|
||||
border: 0;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Social */
|
||||
.sidr-class-social-menu-inner ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-bar {
|
||||
#sidr,
|
||||
.oceanwp-sidr-overlay
|
||||
{
|
||||
top: 32px;
|
||||
height: -webkit-calc(100% - 32px);
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.admin-bar {
|
||||
#sidr,
|
||||
.oceanwp-sidr-overlay
|
||||
{
|
||||
top: 46px;
|
||||
height: -webkit-calc(100% - 46px);
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#wpadminbar {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 20px;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
border-radius: 0;
|
||||
z-index: 10;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.slick-prev:hover, .slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-prev {
|
||||
right: auto;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-prev span:before {
|
||||
content: '\f105';
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-next {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-next span:before {
|
||||
content: '\f104';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-dots li button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-dots li button:hover, .slick-dots li button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
|
||||
-moz-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slick-dots li button:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "•";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: "slick";
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
-moz-opacity: 0.25;
|
||||
-webkit-opacity: 0.25;
|
||||
opacity: 0.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button:before {
|
||||
color: black;
|
||||
-moz-opacity: 0.75;
|
||||
-webkit-opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.widget-area {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
margin-bottom: 40px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: $color-2;
|
||||
border-width: 0 0 0 3px;
|
||||
border-style: solid;
|
||||
border-color: $color-5;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 15px;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widgets > Borders
|
||||
*/
|
||||
.oceanwp-widget-recent-posts-li,
|
||||
.widget_categories li,
|
||||
.widget_recent_entries li,
|
||||
.widget_archive li,
|
||||
.widget_recent_comments li,
|
||||
.widget-recent-posts-icons li,
|
||||
.site-footer .widget_nav_menu li {
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid $color-7;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $color-7;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#main .widget_nav_menu li a:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Top Bar Content
|
||||
*/
|
||||
#top-bar-content {
|
||||
strong {
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-11;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
#lang_sel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 3px;
|
||||
margin-right: 10px;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar-template {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-wrap #lang_sel ul ul {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.top-bar-right .polylang-switcher-shortcode {
|
||||
float: right;
|
||||
margin: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.top-bar-left .polylang-switcher-shortcode {
|
||||
float: left;
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar-content, #top-bar-social-alt {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#top-bar #lang_sel {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body.rtl #top-bar #lang_sel {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Top Bar Menu
|
||||
*/
|
||||
.top-bar-left.has-content #top-bar-nav,
|
||||
.top-bar-right.has-content #top-bar-nav {
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#top-bar-nav,
|
||||
#top-bar-nav > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-content.top-bar-centered #top-bar-nav,
|
||||
#top-bar-content.top-bar-centered #top-bar-nav > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
#top-bar-nav > ul > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a .nav-arrow {
|
||||
margin-left: 4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar #top-bar-nav > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-nav {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* Top Bar Social
|
||||
*/
|
||||
#top-bar-social {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: $color-13;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.top-bar-left li:first-child a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.top-bar-right li:last-child a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b; }
|
||||
&.oceanwp-googleplus a:hover { color: #de5a49; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762; }
|
||||
&.oceanwp-github a:hover { color: #60b044; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f; }
|
||||
&.oceanwp-xing a:hover { color: #006464; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900; }
|
||||
&.oceanwp-email a:hover { color: #13aff0; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Right
|
||||
*/
|
||||
#top-bar-social.top-bar-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Left
|
||||
*/
|
||||
#top-bar-social.top-bar-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Centered
|
||||
*/
|
||||
#top-bar-social.top-bar-centered {
|
||||
padding-top: 15px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar-social {
|
||||
text-align: center;
|
||||
|
||||
&.top-bar-left,
|
||||
&.top-bar-right {
|
||||
position: inherit;
|
||||
left: auto;
|
||||
right: auto;
|
||||
float: none;
|
||||
height: auto;
|
||||
line-height: 1.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
#top-bar-wrap {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#top-bar-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.top-bar-centered {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar {
|
||||
padding: 20px 0;
|
||||
|
||||
> div:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
#top-bar-wrap {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user