File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_shortcodes.scss
/***************************************************
scss file: assets/scss/theme/_shortcodes.scss
+ Override style for some default shortcodes
+ Style for our shortcodes - with prefix sns
****************************************************/
// Heading or tile shortcode
h2.wpb_heading,
h3.wpb_heading{
margin: 0 0 20px;font-size: 2.5714em; font-weight: bold; text-transform: none; color: $link-color;
}
h2.widgettitle,
h3.widgettitle{
margin: 0 0 45px;font-size: 2.5714em;font-weight: bold;text-transform: none;
@media(max-width: $screen-xs-max){ font-size: 1.8em; }
}
.wpb_revslider_element.no-margin{
margin-bottom: 0px;
}
.vc_custom_heading{
&.uppercase{
text-transform: uppercase;
}
&.extrabold-font{
font-weight: bold;
}
&.weight-normal{
font-weight: normal;
}
&.weight-bold{
font-weight: bold;
}
&.weight-extrabold{
font-weight: bold;
}
@media(max-width: $screen-xs-max){
&.single-deal-heading{
font-size: 2em !important;
}
}
&.btn-ch-link{ color: $link-color;
a{
text-transform: uppercase; font-weight: normal; font-weight: bold; position: relative; display: inline-block;
&:before{ position: absolute; content: ""; left: 0px; bottom: 0px; height: 1px; width: 100%; background: $link-color; @include transition(all 0.25s ease-out); }
&:after{ @include font-ionicons('\f10b', 16px); font-size: 16px; margin-left: 3px; text-align: right; }
&:hover{ color: $color1;
&:before{
background: $color1;
-webkit-animation: snsResetWidth 0.25s;
-ms-animation: snsResetWidth 0.25s;
-o-animation: snsResetWidth 0.25s;
animation: snsResetWidth 0.25s;
}
}
}
}
&.sns-ch-link{
a{
text-transform: uppercase; position: relative; color: $link-color; font-weight: bold; display: inline-block;
&:before{ position: absolute; content: ""; height: 1px; left: 0px; bottom: 1px; width: 100%; background: $link-color; }
&:hover{ color: $color1;
&:before{
background: $color1;
-webkit-animation: snsResetWidth 0.25s;
-ms-animation: snsResetWidth 0.25s;
-o-animation: snsResetWidth 0.25s;
animation: snsResetWidth 0.25s;
}
}
}
}
&.inline-block{
display: inline-block; position: relative; left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
&.heading-about{ display: inline-block; position: relative;
}
&.left-line{}
}
.vc_empty_space{
&.respon-col{
@media(max-width: $screen-md-max){
height: 20px !important;
}
@media(max-width: $screen-xs-max){
height: 15px !important;
}
}
}
.vc_custom_heading.have-line-border{
padding: 0 0 15px; margin: 0 0 30px; border-bottom: 1px solid $line-border-color; text-transform: uppercase;
}
.strong-color{ color: $link-color;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
.low-color{
color: $low-color;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
.white-text{ color: #fff; }
.weight-bold{ font-weight: bold; }
.style-italic{ font-style: italic; }
.wpb_text_column{
&.uppercase{
text-transform: uppercase;
}
&.white-text{
color: #FFF;
}
&.strong-color{ color: $link-color;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
&.low-color{
color: $low-color;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
&.sub-custom-heading{ text-align: center;
> * {
display: inline-block; margin: 0 auto; padding: 0 10px; color: #fff; font-size: 0.8571em; text-transform: uppercase; background: $color1; letter-spacing: 0.15em;
}
}
}
.vc_separator{
&.width-50px{
width: 50px !important;
}
&.width-40px{
width: 40px !important;
}
&.width-30px{
width: 30px !important;
}
}
body {
@media(max-width: $screen-xs-max){
.no-padding-xs{
padding: 0 0 !important;
&.wpb_column > .vc_column-inner{
padding: 0 0 !important;
}
}
.no-padding-h-xs{
padding-left: 0 !important; padding-right: 0 !important;
&.wpb_column > .vc_column-inner{
padding-left: 0 !important; padding-right: 0 !important;
}
}
.no-padding-top-xs{
padding-top: 0 !important;
&.wpb_column > .vc_column-inner{
padding-top: 0 !important;
}
}
.no-padding-bottom-xs{
padding-bottom: 0 !important;
&.wpb_column > .vc_column-inner{
padding-bottom: 0 !important;
}
}
.reset-padding-xs{
padding-left:($sns-wgutter / 2) !important; padding-right:($sns-wgutter / 2) !important;
&.wpb_column > .vc_column-inner{
padding-left:($sns-wgutter-xs / 2) !important; padding-right:($sns-wgutter-xs / 2) !important;
}
}
}
}
.align-center{
text-align: center;
}
.align-left{
text-align: left;
}
.align-right{
text-align: right;
}
@media(max-width: $screen-md-max){
.pull-left-md{
float: left !important;
}
}
@media(max-width: $screen-md-min){
.pull-left-md-min{
float: left !important;
}
.align-left-md-min{
text-align: left !important;
}
}
@media(max-width: $screen-xs-max){
.align-left-xs{
text-align: left !important;
}
}
.wpb_single_image{
&.brand-link{ @include brandlink(); }
&.banner1{ @include banner1(); }
&.banner-y{ @include banner-y(); }
&.banner2{ @include banner2(); }
&.banner3{ @include banner3(); }
&.banner4{ @include banner4(); }
&.banner5{ @include banner5(); }
&.banner6{ @include banner6(); }
&.banner7{ @include banner7(); }
&.banner8{ @include banner8(); }
&.banner9{ @include banner9(); }
&.banner10{ @include banner10(); }
&.banner11{ @include banner11(); }
&.banner12{ @include banner12(); }
&.banner13{ @include banner13(); }
&.imgcol-need-responsive{
@media(max-width: $screen-md-max) and (min-width: $screen-xs-max){ margin-bottom: 20px !important; }
@media(min-width: $screen-xs-min) and (max-width: $screen-xs-max){ margin-bottom: 15px !important; }
}
&.dbea-brand{
img{ max-width: 180px;}
}
}
.wpb_gmaps_widget{
.wpb_wrapper{ padding: 0px !important; }
}
// wpb_row & wpb_column
.wpb_row{
&.sns-fullrow-bg{
> .wpb_column{
> .vc_column-inner{
> .wpb_wrapper{
@media (min-width: $screen-xs-min) {
width: 580px; margin-left: auto; margin-right: auto;
}
@media (max-width: 1280px) {
padding-left: 30px; padding-right: 30px;
}
@media (max-width: $screen-phone ){
padding-left: 0px; padding-right: 0px;
}
}
}
}
}
@media (max-width: $screen-phone) {
&.row-spring-come{ padding-top: 90px !important; padding-bottom: 90px !important; }
}
&.row-sns-hot-deals{
> .wpb_column.vc_col-sm-12{
> .vc_column-inner{ padding: 50px; border: 3px solid $color1; @include border-radius(10px);
@media (max-width: $screen-md-max) { padding: 40px; }
@media (max-width: $screen-xs-max) { padding: 40px 30px 30px; }
}
}
.wpb_wrapper {
position: relative;
.vc_custom_heading{ position: absolute; padding: 0 20px; background: #FFF; top: -75px; left: -15px; margin: 0;
@media (max-width: $screen-md-max) { top: -65px; }
@media (max-width: $screen-xs-max) { padding: 0 15px; }
}
}
}
&.row-counter{ z-index: 1; }
&.sns-row-footer1{
@media(max-width: $screen-lg ){
padding-left: 50px !important; padding-right: 50px !important;
}
@media(max-width: $screen-xlarge - 30px ) and (min-width: 1400px ){
padding-left: 60px !important; padding-right: 60px !important;
}
@media(max-width: 1400px ) and (min-width: 1280px ){
padding-left: 10px !important; padding-right: 10px !important;
}
@media(max-width: $screen-xlarge - 30px ) and (min-width: 1279px ){
.footer1-l-lpart{ width: 40%;
.ft1-menu1,
.ft1-menu2{ width: 50%; }
.ft1-store-info{ display: none; }
}
.footer1-r-lpart{ width: 60%; }
.vc_column_container {
.col-insta-p{
> .vc_column-inner{ padding-left: 25px !important; }
}
.col-newsletter-p{
> .vc_column-inner{ padding-left: 30px !important; padding-right: 30px !important; }
}
}
}
@media(max-width: $screen-md-max ){
padding-left: 50px !important; padding-right: 50px !important;
.footer1-l-lpart{ width: 65%;
.ft1-menu1,
.ft1-menu2{ width: 50%; }
.ft1-store-info{ display: none; }
}
.footer1-r-lpart{ width: 35%;
.col-newsletter-p{
width: 100%;
}
.col-insta-p{
width: 100%; margin-left: 0px !important; display: none;
}
}
}
@media(max-width: $screen-md-min ){
padding-left: 15px !important; padding-right: 15px !important;
.footer1-l-lpart{ width: 58%; }
.footer1-r-lpart{ width: 42%; }
}
@media(max-width: $screen-xs-max ) and (min-width: $screen-phone ){
padding-left: 0px !important; padding-right: 0px !important;
.footer1-l-lpart{ width: 60%; }
.footer1-r-lpart{ width: 40%; }
}
@media(max-width: $screen-phone ){
padding-left: 0px !important; padding-right: 0px !important;
.footer1-l-lpart{ width: 100%;
}
.footer1-r-lpart{ width: 100%; }
}
.vc_column_container > .vc_column-inner{
@media(max-width: $screen-md-max){
padding-left:($sns-wgutter-md / 2) !important; padding-right:($sns-wgutter-md / 2) !important;
}
@media(max-width: $screen-xs-max){
padding-left: ($sns-wgutter-xs / 2) !important; padding-right: ($sns-wgutter-xs / 2) !important;
}
}
}
&.row-bg-norepeat{
background-position: center top !important; background-repeat: no-repeat;
}
&.row-fixed-bg{
background-attachment: fixed; background-position: center center !important; background-size: auto !important; background-repeat: no-repeat;
}
&.row-visible{
overflow: visible !important;
}
@media(min-width: 1921px){
&.max-1920{
&[data-vc-stretch-content="true"] {
max-width: 1920px !important;
left: calc(50% - 960px) !important;
}
}
}
&.vc_row:not(.vc_row-no-padding){
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
}
.wpb_column{
@media(max-width: 1920px ){
&.parallax-fit-bg{
.vc_parallax-inner{ background-position: right 0%; }
}
}
&.bg-position-tr{
> .vc_column-inner{ background-position: top right !important; }
}
@media(max-width: $screen-md-max){
> .vc_column-inner{
padding-left: ($sns-wgutter-md / 2); padding-right: ($sns-wgutter-md / 2);
}
}
@media(max-width: $screen-xs-max){
> .vc_column-inner{
padding-left: ($sns-wgutter-xs / 2); padding-right: ($sns-wgutter-xs / 2);
}
}
&.single-deal-col{
> .vc_column-inner{
@media(max-width: 1440px){
padding: 37px 45px 45px !important;
}
@media(max-width: $screen-phone){
padding: 32px 25px 40px !important;
}
}
}
&.abs-middle-counter{
position: relative;
&:before,
&:after{ position: absolute; content: ""; height: 40px; width: 1px; background: $line-border-color; top: calc(50% - 20px); left: 0px;
@media(max-width: $screen-phone){ height: 1px; width: calc(100% - 50px); left: 25px; top: 0px; background: $line-border-color; }
}
&:after{ left: auto; right: 0px;
@media(max-width: $screen-md-min){ display: none; }
@media(max-width: $screen-phone){ display: block; top: auto; bottom: 0px; right: 25px; }
}
}
&.inline-inner-block{
> .vc_column-inner{ padding-top: 0px;
> .wpb_wrapper{
> * { display: inline; float: left; margin-bottom: 0px; }
}
}
&.center{
text-align: center;
> .vc_column-inner{ width: auto !important; display: inline-block; }
}
}
&.float-right{ float: right;
> .vc_column-inner{
> .wpb_wrapper{
float: right;
@media (max-width: $screen-xs-max){ float: none;}
}
}
}
&.bg-gradient{
background: linear-gradient(#eebf99, #fff);
> .vc_column-inner{
> .wpb_wrapper{ background: #fff;
@media(min-width: $screen-xs-max){
padding-top: 30px;
}
}
}
}
&.col-phone-12{
@media (max-width: $screen-phone){
width: 100%;
}
}
&.col-phone-6{
@media (max-width: $screen-phone){
width: 50%;
}
}
&.col-phone-offset-none{
@media (max-width: $screen-phone){
margin-left: 0px;
}
}
@media (max-width: $screen-md-max){
&.normal-space-md{
.vc_column-inner{ padding-left: 20px !important; padding-right: 20px !important; }
}
}
@media (max-width: $screen-sm-max){
&.normal-space-sm{
.vc_column-inner{ padding-left: 20px !important; padding-right: 20px !important; }
}
}
@media (max-width: $screen-xs-max){
&.normal-space-xs{
.vc_column-inner{
padding-left:$sns-wgutter-xs !important; padding-right:$sns-wgutter-xs !important;
}
}
}
@media (max-width: $screen-phone){
&.normal-space-phone{
.vc_column-inner{
padding-left:$sns-wgutter-xs !important; padding-right:$sns-wgutter-xs !important;
}
}
}
}
}
.wpb_revslider_element.overflow-visible{
rs-module,
rs-slides,
rs-slide{ overflow: visible !important; }
.tp-revslider-mainul{ overflow: visible !important;
li.tp-revslider-slidesli{
overflow: visible !important;
}
}
}
.sns-main.col-md-12{
> section {
> .vc_row.row-1920.vc_row-no-padding {
&[data-vc-full-width=true]{
@media(min-width: 1921px){
width: 1920px !important;
position: relative; left: calc(50% + 15px) !important;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
}
}
}
}
// SNS Banner
.sns-banner{
&.style-1{
.inner{ position: relative; overflow: hidden; }
.banner-img{ display: block; position: relative; @include transition(all 0.25s ease-out);
&:after{ content: ""; position: absolute; height: 100%; width: 100%; background-color: transparent; @include transition(all 0.25s ease-out); left: 0px; top: 0px; }
}
img{
display: inline-block; @include transition(all 0.25s ease-out); @include opacity(0);
}
.content-text{ display: inline-flex; width: 100%; position: absolute; top: 50%; left: 0; transform: translate(0, -50%);
.inner{
display: inline-block; padding: 0 0 0 50px; @include transition(all 0.25s ease-out);
@media(max-width: $screen-md-max){ padding: 0 0 0 40px; }
@media(max-width: $screen-md-min){ padding: 0 0 0 30px; }
}
.sub-heading{
font-size: 0.8571em; line-height: 1.1; text-transform: uppercase; font-weight: normal; margin: 0 0 3px; color: $color; letter-spacing: 0.2em;
background: #fff; padding: 2.5px 6px; display: inline-block;
}
.heading{
font-size: 2.5em; line-height: 1.2; font-weight: bold; text-transform: none; margin: 0 0; color: #FFF; margin-bottom: 15px;
}
.view-link{ color: #FFF; text-transform: uppercase; font-weight: normal; font-weight: bold; position: relative; display: inline-block;
&:before{ position: absolute; content: ""; left: 0px; bottom: 0px; height: 1px; width: 100%; background: #fff; @include transition(all 0.25s ease-out); }
&:after{ @include font-ionicons('\f10b', 16px); font-size: 16px; margin-left: 3px; text-align: right; }
&:hover{ color: #FFF;
&:before{
background: #fff;
-webkit-animation: snsResetWidth 0.25s;
-ms-animation: snsResetWidth 0.25s;
-o-animation: snsResetWidth 0.25s;
animation: snsResetWidth 0.25s;
}
}
}
}
&.respon-text{
.heading{
@media(max-width: $screen-md-max){ font-size: 2em; }
@media(max-width: $screen-md-min){ font-size: 1.7142em; }
}
}
&:hover{
.banner-img{ @include scale(1.03);
&:after{ background-color: rgba(0,0,0, 0.2); }
}
img{ @include transform(scale(1.05)); }
}
}
&.style-2{
> .inner{ position: relative; overflow: hidden; }
.banner-img{ display: block; position: relative; background-size: cover; background-position: center; @include transition(all 0.25s ease-out);
&:after{ content: ""; position: absolute; height: 100%; width: 100%; background-color: transparent; @include transition(all 0.25s ease-out); left: 0px; top: 0px; }
}
img{
display: inline-block; @include transition(all 0.25s ease-out); @include opacity(0);
}
.content-text{ display: inline-flex; position: absolute; bottom: 40px; left: 50px; z-index: 1;
@media(max-width: 1440px){
bottom: 40px; left: 40px;
}
@media(max-width: $screen-md-max){ left: 40px; bottom: 40px; }
@media(max-width: $screen-md-min){ left: 30px; bottom: 30px; }
.inner{
display: inline-block; @include transition(all 0.25s ease-out);
}
.heading{
font-size: 1.8571em; line-height: 1.4; font-weight: bold; margin: 0 0; margin-bottom: 20px;
@media(max-width: $screen-md-min){ font-size: 1.4285em; }
}
.view-link{ color: $link-color; display: inline-block; position: relative; font-weight: bold;
padding: 8px 15px; line-height: 24px; @include transition(all 0.25s ease-out); text-transform: uppercase;
&:before{ position: absolute; content: ""; height: 25px; width: 25px; background: $color1; @include border-radius(100%);
left: 0px; top: 0px; z-index: -1;
}
&:after{
@include font-ionicons('\f30f', 12px); width: 12px; margin-left: 6px; font-size: 16px; text-align: right;
}
&:hover{ color: #FFF; padding: 8px 15px;
&:before{
height: 100%; width: 100%; @include border-radius(4px);
}
}
}
}
&:hover{
.banner-img{ @include scale(1.1);
&:after{ background-color: rgba(0,0,0, 0.2); }
}
img{ @include transform(scale(1.05)); }
}
&.white-text{
.content-text{
.heading{ color: #FFF; }
}
.view-link{
color: #FFF;
}
}
}
}
// Info inline
.sns-info-inline{
.vc_icon_element-icon{ margin-right: 6px;
&.fa-envelope{ position: relative; top: 1px; }
}
a:hover{ text-decoration: none; }
&.social{
margin-right: 20px;
.vc_icon_element-icon{ margin: 0;}
}
&.social_rounded{
a{ height: 40px; width: 40px; line-height: 40px; text-align: center; @include border-radius(100%); background-color: #e1e1e1; margin-right: 10px; float: left; font-size: 20px;
.vc_icon_element-icon{ margin: 0 0; line-height: 40px; }
&:hover{
background-color: $color1; color: #FFF;
}
}
}
&.have-left-border{
padding-left: 15px; margin-left: 15px; position: relative;
&:before{ position: absolute; content: ''; height: 13px; margin-top: -6px; width: 1px; left: 0px; top: 50%; background-color: #ccc;}
}
&.have-right-border{
padding-right: 15px; margin-right: 15px; position: relative;
&:before{ position: absolute; content: ''; height: 13px; margin-top: -6px; width: 1px; right: 0px; top: 50%; background-color: #ccc;}
}
}
// Popup video
.sns-popup-video{
background-position: center center; background-repeat: no-repeat; text-align: center; background-size: cover;
> * {
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
top: 50%; color: #FFF; margin: 0 auto; position: relative; display: inline-block; text-align: center;
.btn-popupvideo{ width: 120px; height: 120px; line-height: 120px; background: #FFF; @include border-radius(100%); display: inline-block; margin: 0 0;
-webkit-animation: pulse-showdown 0.8s ease-in-out infinite;
-moz-animation: pulse-showdown 0.8s ease-in-out infinite;
-o-animation: pulse-showdown 0.8s ease-in-out infinite;
animation: pulse-showdown 0.8s ease-in-out infinite;
i{ display: none; }
&:before{ @include font-ionicons('\f215', 120px); font-size: 42px; color: $color1; @include transition(all 0.25s ease-out); text-align: center; }
&:hover{ background: $color1;
&:before{ color: #fff; }
}
@media(max-width: $screen-phone){ margin-right: 15px; }
}
.title{ display: block; font-size: 3em; font-weight: bold; line-height: 1.1; margin: 0 0 40px 0 ;
display: block; color: inherit;
}
.sub-title{
span{
font-size: 35px;
line-height: 1.1;
text-align: center; color: $low-color;
}
}
}
&.big-play-button{
> * {
.btn-popupvideo{ width: 120px; height: 120px; line-height: 120px;
&:before{ @include font-ionicons('\f215', 120px); }
}
}
}
&.style-2{
text-align: left;
> * { text-align: left; max-width: 460px;
.btn-popupvideo{ width: 80px; height: 80px; line-height: 80px; background: transparent; @include border-radius(100%); border: 2px solid $link-color;
margin: 0 15px 0 0;
&:before{ @include font-ionicons('\f215', 80px); font-size: 28px; color: $link-color; @include transition(all 0.25s ease-out); text-align: center; }
&:hover{ background: $color1; border-color: $color1;
&:before{ color: #fff; }
}
@media(max-width: $screen-phone){ margin-right: 15px; }
}
}
.sub-title{
span{ background: transparent; margin: 0; padding: 0; vertical-align: super; }
}
.title{ margin: 33px 0 35px; color: $link-color; }
}
@media(max-width: $screen-md-max){
max-height: 550px;
}
@media(max-width: $screen-md-min){
max-height: 450px;
> * {
.title{ font-size: 46px; }
}
}
@media(max-width: $screen-xs-max){
max-height: 350px;
> * {
.title{ font-size: 32px; }
}
}
}
.sns-grid-items{
margin: 0 -15px; @include clearfix();
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
> * { float: left; padding: 0 15px;
@media(max-width: $screen-md-max){
padding: 0 ($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
padding: 0 ($sns-wgutter-xs / 2);
}
}
&[data-desktop='6']{
> * { width: 16.6666%; }
}
&[data-desktop='5']{
> * { width: 20%; }
}
&[data-desktop='4']{
> * { width: 25%; }
}
&[data-desktop='3']{
> * { width: 33.3333%; }
}
&[data-desktop='2']{
> * { width: 50%; }
}
&[data-desktop='1']{
> * { width: 100%; }
}
@media (max-width: $screen-md-max) {
&[data-tabletl='6']{
> * { width: 16.6666%; }
}
&[data-tabletl='5']{
> * { width: 20%; }
}
&[data-tabletl='4']{
> * { width: 25%; }
}
&[data-tabletl='3']{
> * { width: 33.3333%; }
}
&[data-tabletl='2']{
> * { width: 50%; }
}
&[data-tabletl='1']{
> * { width: 100%; }
}
}
@media (max-width: $screen-md-min) {
&[data-tabletp='6']{
> * { width: 16.6666%; }
}
&[data-tabletp='5']{
> * { width: 20%; }
}
&[data-tabletp='4']{
> * { width: 25%; }
}
&[data-tabletp='3']{
> * { width: 33.3333%; }
}
&[data-tabletp='2']{
> * { width: 50%; }
}
&[data-tabletp='1']{
> * { width: 100%; }
}
}
@media (max-width: $screen-xs-max) {
&[data-mobilel='6']{
> * { width: 16.6666%; }
}
&[data-mobilel='5']{
> * { width: 20%; }
}
&[data-mobilel='4']{
> * { width: 25%; }
}
&[data-mobilel='3']{
> * { width: 33.3333%; }
}
&[data-mobilel='2']{
> * { width: 50%; }
}
&[data-mobilel='1']{
> * { width: 100%; }
}
}
@media (max-width: $screen-phone) {
&[data-mobilep='6']{
> * { width: 16.6666%; }
}
&[data-mobilep='5']{
> * { width: 20%; }
}
&[data-mobilep='4']{
> * { width: 25%; }
}
&[data-mobilep='3']{
> * { width: 33.3333%; }
}
&[data-mobilep='2']{
> * { width: 50%; }
}
&[data-mobilep='1']{
> * { width: 100%; }
}
}
}
// SNS Counter
.sns-counter{
@include clearfix(); margin: 25px 0; padding: 10px 0; text-align: center;
.vc_icon_element-icon{
margin-right: 25px; display: inline-block; position: relative; top: 15px;
&:before{ position: absolute; content: ""; @include border-radius(100%); height: 25px; width: 25px; left: -7.5px; top: -7.5px;
z-index: -1; @include transition(all 0.15s ease-out); background: $color1;
}
}
.content-counter{ text-align: left;
.inner-content{
position: relative;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
}
.counter-value{
display: block; margin: 0 0 8px; font-weight: bold; line-height: 1.1; color: $link-color;
> span{
margin: 0 0 0 0;
}
}
.title{
margin: 0 0; display: block;
}
.inner{
display: inline-flex; margin-left: auto; margin-right: auto; padding: 0 0 0 10px;
}
&.align-center{
text-align: center;
@media(max-width: $screen-phone){
text-align: left; padding: 0 25px;
}
}
&:hover{
.vc_icon_element-icon{
&:before{
background: $color1; height: 50px; width: 50px; left: -15px; top: -15px; @include animation(bounceIn 300ms ease-out);
}
}
}
}
// SNS Time count down
.sns-time-countdown{
&.style1{
margin: 17px 0 53px; display: block; text-align: center; position: relative; padding-top: 10px;
.clock-digi{ display: inline-block;
> div { display: inline-block; float: left; padding: 0; margin: 0 7.5px; width: 95px; height: 106px; text-align: center; @include transition(all 0.25s ease-out);
text-transform: uppercase; font-size: 14px; color: $color; background: #FFF; @include border-radius(5px); position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
> div{ display: inline-block;
> div { display: block; padding: 0 0; font-weight: bold; font-size: 36px; text-transform: none; width: 95px; height: 78px; line-height: 78px;
@include transition(all 0.25s ease-out);
background: rgba($color1, 0.85); position: relative; @include border-radius(5px 5px 0 0); color: #FFF; margin-bottom: 3px;
}
}
&:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
> div { > div { background: $color1; } }
}
@media(max-width: $screen-phone){
margin: 0 5px; width: 65px; height: 76px; font-size: 12px;
> div {
> div{
font-size: 20px; width: 65px; height: 48px; line-height: 48px;
}
}
}
}
}
}
&.style2{
margin: 0 0; display: flex; text-align: center;
.clock-digi{ overflow: hidden; display: inline-block;
> div { display: inline-block; float: left; padding: 0; width: 75px; height: 100px; @include border-radius(5px); margin: 0 5px;
text-align: center; font-size: 14px; background: rgba($color1, 0.7); color: #FFF; position: relative;
> div{
> div { display: block; margin: 0 0 6px; line-height: 62px; font-weight: bold; font-size: 34px; text-transform: none; border-bottom: 1px solid rgba(#FFF, 0.4); }
}
}
}
}
}
#sb_instagram{
padding: 0 0 !important;
.sb_instagram_header{ padding-top: 0px !important; }
.sbi_photo{
position: relative;
&:before{ position: absolute; content: ""; height: 100%; width: 100%; background: rgba($color1, 0.4); @include transition(all 0.25s ease-out);
left: 0px; @include opacity(0);
}
&:after{
position: absolute; @include font-awesome5brand('\f16d', 32px); font-size: 32px; @include transition(all 0.25s ease-out); @include opacity(0);
margin: -16px 0 0 -16px; left: 50%; top: 50%; color: #FFF;
}
&:hover{
&:after,
&:before{ @include opacity(1);
}
}
}
#sbi_load .sbi_load_btn{
padding: 0 0; color: $color; font-weight: bold; background: none; font-size: 1em;
&:hover{ color: $color1; }
}
}
// Newsletter
.tnp-subscription{
.tnp-field-email{
.tnp-email{
box-shadow: none;
}
}
}
.newsletter-form-1{
form.newsletter-1{ width: 100%; position: relative; margin: 0 auto;
.tnp-email{
padding: 0 20px; height: 45px; line-height: 45px; width: calc(100% - 85px); background: none; border: none; border-bottom: 2px solid #FFF;
@include placeholder(#FFF); @include border-radius(0px);
}
.tnp-submit{ position: absolute; right: 0px; top: 0px; padding: 0; height: 45px; line-height: 45px;
background: transparent; border: none; border-bottom: 2px solid #FFF; @include border-radius(0px);
&:hover{ color: $color1; border-color: $color1;}
}
&:focus,
&:hover{
}
}
}
.h1-newsletter-wrap{
p{ font-size: 2em; line-height: 1.42857; margin-bottom: 65px;
@media (max-width: 1280px) { font-size: 1.7142em; }
}
}
.h4-newsletter-wrap{
p{ font-size: 2em; line-height: 1.42857; margin-bottom: 55px; padding: 0 150px;
@media (max-width: $screen-sm-max){ padding: 0 80px; }
@media (max-width: $screen-xs-max){ padding: 0 50px; }
@media (max-width: $screen-phone){ padding: 0 0; }
}
.newsletter-form-1{
form.newsletter-1{
.tnp-email{
border-color: $link-color;
@include placeholder($color);
}
.tnp-submit{
border-color: $link-color; color: $link-color;
&:hover{ color: $color1; border-color: $color1;}
}
}
}
}
.h3-newsletter-wrap{
.newsletter-form-1 form.newsletter-1 {
&:before{ display: none; }
.tnp-email{
width: 100%; height: 56px; line-height: 56px; padding: 0 30px; border: none;
}
.tnp-submit{
height: 44px; width: auto; font-size: 1em; background: $color; color: #FFF; @include border-radius(22px); padding: 0 20px; right: 6px; top: 6px;
font-weight: bold; text-transform: none;
&:hover{ background: $color1; }
}
}
}
// contact form
.contact_form{
h3{
font-size: 1.857em;
color: #333;
font-weight: bold;
margin-bottom: 15px;
}
input{
margin-bottom: 10px !important;
}
textarea{
height: 135px;
}
}
// Contact form 7
.wpcf7{
div.wpcf7-response-output{
margin: 15px 0 0px; padding: 0; border: none; color: $color1;
}
div.wpcf7-mail-sent-ng{
border: none;
}
div.wpcf7-validation-errors {
border: none; background:#f2dede; color: #b94a48; padding: 6px 15px;
}
div.wpcf7-mail-sent-ok{
@include alert-styles($alert-success-bg);
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
background-image: none;
}
div.wpcf7-validation-errors {
color: #a94442; background-color: #f2dede; border-color: #ebccd1;
}
span.wpcf7-not-valid-tip{
margin: 5px 0 0;
}
}
.wpcf7-form{
.wpcf7-form-control-wrap{ margin-bottom: 20px !important; display: block; }
.wpcf7-text{
max-width: 100%; width: 100%; @include placeholder($low-color); border: 1px solid $base-border-color; background: #f9f9f9;
}
.wpcf7-textarea{
max-width: 100%; width: 100%; max-height: 220px; @include placeholder($low-color); border: 1px solid $base-border-color; background: #f9f9f9;
}
span.ajax-loader{ display: none;
&.is-active{ display: inline-block; }
}
br{
display: none;
}
input[type=submit]{
display: inherit; vertical-align: middle; margin-right: auto; margin-left: auto;
}
}
.sns-contact-form{
.row{
margin: 0 -10px;
> [class^="col-"]{
padding: 0 10px;
}
}
}
// SNS Single Testimonial
.sns-single-testimonial{
&.style1{ text-align: center; position: relative;
.content{
padding: 0 0; margin: 0 0 45px; font-size: 2em; position: relative; line-height: 1.42857;
@media (max-width: 1280px) { font-size: 1.7142em; }
}
.info{ color: $link-color; text-transform:uppercase;
position: relative; display: inline-block;
.name{ display: inline;}
.position{ display: inline; position: relative;
&:before{
content: "-"; margin: 0 8px;
}
}
}
&:hover{
}
}
&.style2{ text-align: center; position: relative;
.content{
padding: 0 0; margin: 0 0 38px; font-size: 2em; line-height: 1.42857; position: relative; color: #FFF;
@media (max-width: 1280px) { font-size: 1.7142em; }
}
.item-dot{ display: inline-block;
.avatar{ border: 1px solid #FFF; @include border-radius(100%); display: inline-block; overflow: hidden; margin-right: 15px; float: left; }
.info{ display: inline-block; margin-top: 15px; text-align: left; }
.name{ font-weight: bold; text-transform: uppercase; line-height: 1.1; margin: 0 0 5px; color: #FFF; display: block; }
.position{ font-size: 0.8571em; color: #FFF;
&:before{ content: "/"; margin-right: 3px; }
}
}
}
}
// SNS Carousel
.sns-carousel{
@include owl-nav1();
@include owl-dots1();
&.have-padding{
margin-left: -15px; margin-right: -15px;
@media (max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media (max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
.owl-item{
> * { padding-left: 15px; padding-right: 15px;
@media (max-width: $screen-md-max){
padding-left: $sns-wgutter-md / 2; padding-right: $sns-wgutter-md / 2;
}
@media (max-width: $screen-xs-max){
padding-left: $sns-wgutter-xs / 2; padding-right: $sns-wgutter-xs / 2;
}
}
}
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out);
}
&:hover{
.owl-nav{ @include opacity(1); }
}
}
&.white-nav{
.owl-nav{
.owl-prev,
.owl-next{
&:before{ color: #FFF; }
&:hover{
&:before{ color: $color1; }
}
}
}
}
&.carousel-policy.have-separator{
.owl-item.active{
&:not(.first-iactive){
> * { position: relative;
&:before{
position: absolute; content: ""; height: 50px; width: 1px; background: $base-border-color; left: 0px; top: calc(50% - 25px);
@media (max-width: $screen-md-max){
display: none;
}
}
}
}
}
}
&.small-padding{
margin-left: -7.5px; margin-right: -7.5px;
.owl-item{
> * { padding-left: 7.5px; padding-right: 7.5px;
}
}
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out);
}
&:hover{
.owl-nav{ @include opacity(1); }
}
}
&.white-dot{
@include owl-dots-white();
}
&.white-text{
.sns-single-testimonial{
&.style1{
.content{ color: #FFF; }
.info{
color: #fff; text-transform: none;
.name{ display: inline; text-transform: uppercase; font-weight: bold; }
}
}
}
}
&.for-policy1{
margin: 0;
.owl-item{
> * {
padding-left: 40px; padding-right: 40px; position: relative;
&:before{ height: 42px; width: 1px; content: ""; background: transparent; position: absolute; left: 0px; top: calc(50% - 21px); }
@media (max-width: $screen-md-max){
padding-left: 15px; padding-right: 15px;
}
}
&.active{
> * {
&:before { background: $base-border-color; }
}
}
&.first-iactive{
> * {
&:before { background: transparent; }
}
}
}
}
&[data-type='h-c']{
.carousel-content{ margin: 0 -0.5px;
.sns-single-post { padding: 0 0.5px; }
}
.slick-list{
.slick-slide{ padding: 0 5px;
.post-info{ @include opacity(0); @include transition(all 0.25s ease-out 0s); }
.post-img{
a{
&:before{
background: rgba(#000, 0.3);
}
}
}
&.slick-current{
.post-info{ @include opacity(1); @include transition(all 0.25s ease-out 0.3s); }
.post-img{
a{
&:before{
background: rgba(#333, 0.1);
}
}
}
}
}
}
@include nav_slick1();
.slick-prev{ left: calc(12.5% - 45px);
@media(max-width: $screen-md-max){ left: calc(10% - 45px); }
}
.slick-next{ left: auto; right: calc(12.5% - 45px);
@media(max-width: $screen-md-max){ left: auto; right: calc(10% - 45px); }
}
}
&[data-type='h-s']{
.carousel-nav{ max-width: 315px; margin: 0 auto 0;
.slick-list{ padding: 0 0 !important; }
.slick-slide{
padding: 20px 0 0px;
div.img{
width: 70px; height: 70px; margin: 0 auto;
display: block; background: transparent; cursor: pointer; @include transition(all 0.25s ease-out 0s);
@include border-radius(100%); position: relative;
img{ @include border-radius(100%); }
}
&:hover{
div.img{
@include opacity(1);
}
}
.name{ text-align: center; font-weight: bold; color: $color1; text-transform: uppercase; line-height: 1.1; margin: 40px 0 5px; @include opacity(0); @include transition(all 0.25s ease-out 0s); }
.position{ text-align: center; color: $low-color; font-size: 0.8571em; text-transform: uppercase; @include opacity(0); @include transition(all 0.25s ease-out 0s); }
&.slick-center{
div.img{ @include transform(scale(1.5)); background: $color;
img{ padding: 4px; }
}
.name, .position{ @include opacity(1); }
}
}
}
&[data-pospaging='on-bottom']{
.carousel-nav{
.slick-slide{
&.slick-center{ position: relative;
}
}
}
}
}
}
// SNS Login and Register
.sns-login-register{
a{ margin: 0 4px;
&:last-child{ margin-right: 0px; }
}
}
// SNS Member
.sns-member{
margin-bottom: 15px; overflow: hidden; padding-top: 15px; padding-bottom: 15px;
.inner{ background: #FFF; @include transition(all 0.25s ease-out); overflow: hidden; }
.avartar{
position: relative; overflow: hidden; margin: 0 0;
img{ @include transition(all 0.25s ease-out); }
}
.member-info{
}
.name-role{
padding: 25px 0 0 30px;
font-size: 1.2857em; font-weight: bold; color: $link-color; margin: 0;
@media(max-width: $screen-xs-max){
font-size: 1.1428em;
}
}
.role{
font-weight: normal; font-size: 14px; color: $low-color; margin: 0 0 5px; padding: 0 0;
position: relative; display: block;
&:before{
position: absolute;content: "";height: 1px;width: 20px;background: $low-color;left: -30px; top: 50%;
}
}
.short_desc{
margin-bottom: 8px;
}
.social-icons{
position: relative; border: 1px solid $line-border-color; background: #f9f9f9; padding: 0 10px; height: 50px; line-height: 50px; text-align: center;
ul{
padding: 0 0; margin: 0 0; list-style: none;
li{
display: inline; margin: 0 4px; padding: 0;
a{ height: 28px; width: 28px; line-height: 28px; position: relative; display: inline-block; @include border-radius(3px);
&.facebook{
color: #4267b2;
}
&.instagram{
color: #c13584;
}
&.dribbble{
color: #ea4c89;
}
&.behance{
color: #131418;
}
&.youtube{
color: #f00;
}
&.twitter{
color: #1da1f2;
}
&.linkedin{
color: #0a66c2;
}
&.pinterest{
color: #bd081c
}
&:hover{
background: $color1; color: #fff;
}
}
i{ font-size: 1em; }
}
}
}
&:hover{
.avartar{
img{ @include scale(1.07); }
}
}
}
// SNS Vertical Menu
.sns-vertical-menu{
.wpb_heading{
color: $link-color;
display: block; padding: 0 0 10px; margin: 0;
> span{
display: inline-block; position: relative;
&:before{
position: absolute; content: ""; width: 100%; height: 1px; background: $color1; left: 0px; bottom: -11px;
}
}
}
.sns-respmenu{
padding: 20px; border: 1px solid $line-border-color; @include border-radius(0 0 5px 5px);
}
}
//SNS Instagram
.sns-instagram{
.short_desc{ font-size: 1.4285em; font-weight: 300; color: $link-color; text-transform: uppercase; margin-bottom: 40px;
strong{ font-weight: bold; }
}
.item{ position: relative; display: block;
&:before{
position: absolute; content: ""; height: 26px; width: 26px; @include border-radius(100%); background: $color1; visibility: hidden; @include opacity(0);
left: 25px; bottom: 25px; z-index: 2; @include transition(all 0.25s ease-out); overflow: hidden;
}
.item-image{ position: relative; display: block; overflow: hidden;
&:before{ position: absolute; content: ""; background: rgba(#000, 0.2); z-index: 1; width: 100%; height: 100%; @include opacity(0); @include transition(all 0.25s ease-out); }
&:after{ @include font-awesome5brand('\f16d', 26px); font-size: 15px; color: #fff; left: 20px; bottom: 20px; position: absolute;
@include transition(all 0.25s ease-out); @include opacity(0); visibility: hidden; z-index: 2;
}
img{ @include transition(all 0.25s ease-out); @include scale(1); }
}
.info{ position: absolute; display:block; min-width: calc(100% - 15px); @include translate(-50%, -50%); top: 50%; left: 50%; text-align: center; color: #FFF;
@include opacity(0); @include transition(all 0.25s ease-out);
@media(max-width: $screen-phone){ display: none; }
.like{ position: relative; padding: 0 0; margin: 0 10px; display: inline-block;
&:before{ @include font-awesome5('\f004', 24px, 900); }
}
.comment{ position: relative; padding: 0 0; margin: 0 10px; display: inline-block;
&:before{ @include font-awesome5('\f27a', 24px, 900); }
}
}
&:hover{
&:before{ @include opacity(1); visibility: visible; }
.item-image{
&:before{ @include opacity(1); }
&:after{ @include opacity(1); visibility: visible;
}
img{ @include scale(1.1); }
}
.info{ @include opacity(1); }
}
}
&.style-carousel{
@include owl-nav1();
&:not(.no-padding){
.list-items{ margin: 0 -5px;
.item{
padding: 5px;
.item-image{
}
}
}
}
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out);
.owl-prev{ left: 25px; }
.owl-next{ left: auto; right: 25px; }
}
}
&.style-grid{
.grid{
margin: 0; @include clearfix();
.item{ padding: 0; float: left;
.item-image{ @include border-radius(0px); overflow: hidden; }
}
}
&.have-tiny-padding{
.grid{ padding-top: 3px;
margin: 0 -5px 0;
.item{ padding: 5px 5px; }
}
}
&.have-small-padding{
.grid{
margin: 0 -7.5px;
.item{ padding: 7.5px 7.5px; }
}
}
&.have-padding{
.grid{
margin: 0 -15px;
.item{ padding: 15px 15px; }
@media(max-width: $screen-md-max){
margin: -($sns-wgutter-md / 2);
.item{ padding: ($sns-wgutter-md / 2); }
}
@media(max-width: $screen-xs-max){
margin: -($sns-wgutter-xs / 2);
.item{ padding: ($sns-wgutter-xs / 2); }
}
}
}
&.no-padding{
margin: 0 0;
.item{ padding: 0; }
}
.col-2{
.item{ width: 50%;
&:nth-of-type(2n+1){ clear: left; }
}
}
.col-3{
.item{ width: 33.3333%;
&:nth-of-type(3n+1){ clear: left; }
}
}
.col-4{
.item{ width: 25%;
&:nth-of-type(4n+1){ clear: left; }
}
}
.col-5{
.item{ width: 20%;
&:nth-of-type(5n+1){ clear: left; }
}
}
.col-6{
.item{ width: 16.6666%;
&:nth-of-type(6n+1){ clear: left; }
}
}
.col-7{
.item{ width: 14.2857%; }
}
.col-8{
.item{ width: 12.5%; }
}
.col-8{
.item{ width: 11.1111%; }
}
.col-10{
.item{ width: 10%; }
}
}
&.style-grid-special{
.grid{
margin: 0 -0.5px; @include clearfix();
.item-big{
width: 33.3333%; padding: 0.5px; float: left;
@media(max-width: $screen-phone){
width: 100%;
}
&:nth-child(2){ margin: 0 -0.5px;
.item{
width: 50%; padding: 0.5px; float: left;
}
}
}
}
.follow-us{
left: 50%; top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: rgba(255,255,255,0.85); padding: 18px 25px; text-align: center;line-height: 1.1; z-index: 1; text-transform: uppercase; display: inline-block; position: absolute;
@media(max-width: $screen-md-min){
padding: 15px 20px;
}
span{ display: block; font-size: 14px;
&.name{ font-size: 30px; font-weight: bold; margin-top: 6px;
@media(max-width: $screen-md-min){ font-size: 26px; }
}
}
&:hover{ background: $color1; color: #FFF; }
}
}
}
// SNS List Product
.sns-list-posts{
&.style1{
.item-post{ @include clearfix(); margin: 10px 0 0; padding: 10px 0 0;
&:first-child{ margin-top: 0px; padding-top: 7px; border-top: none; }
.post-img{ float: left; position: relative; margin: 0 15px 0 0;
@media(max-width: $screen-md-max){ display: none;}
a{
display: block; position: relative; overflow: hidden;
&:before{ position: absolute; content: ""; height: 100%; width: 100%; background: transparent; @include transition(all 0.25s ease-out); }
}
}
.post-title{ margin: 6px 0 0; font-size: 1.1428em; line-height: 1.42857; font-weight: bold;
}
.post-author{ font-size: 1em;
a{
&:hover{ color: $color1; }
}
}
.post-date{ font-size: 1em; color: $low-color;
}
.dot-more{ display: inline;
@media (max-width: $screen-md-max){ display: none; }
}
.post-cat{ font-size: 1em; color: $low-color; margin: 0 0 6px;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
&:hover{
.post-img{
a{
&:before{ background: rgba(0,0,0,0.2); }
}
}
}
}
&.have-separator{
.item-post{ border-top: 1px solid $line-border-color; margin: 15px 0 0; padding: 15px 0 0;
&:first-child{ border-top: none; margin-top: 0px; padding-top: 3px; }
.post-title{ margin-top: 0px; }
}
}
}
&.style2{
.wpb_heading{ text-align: center; }
@include owl-nav1();
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out); }
&:hover{
.owl-nav{
@include opacity(1);
}
}
.list-post{
margin: 0 -($sns-wgutter / 2);
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
.item-post{ padding: 0 ($sns-wgutter / 2);
@media (max-width: $screen-md-max) { padding-left: ($sns-wgutter-md / 2); padding-right: ($sns-wgutter-md / 2); }
@media (max-width: $screen-xs-max) { padding-left: ($sns-wgutter-xs / 2); padding-right: ($sns-wgutter-xs / 2); }
.post-img{ position: relative;
> a{
display: block;position: relative;overflow: hidden;
&:before{
content: "";display: block;height: 100%;width: 100%;position: absolute; z-index:1; @include transition(all 0.25s ease-out); background: rgba(0, 0, 0, 0.2);@include opacity(0);
}
}
.post-date{
position: absolute; height: 70px; width: 70px; background: #FFF; @include transition(all 0.25s ease-out);
left: 30px; bottom: 30px; z-index: 2; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.2); @include border-radius(4px);
span.day{
font-size: 2.5em; font-weight: bold; line-height: 46px; display: block; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: calc(100% - 20px); left: 10px; bottom: 0px; background: $low-color; }
}
span.month{
text-transform: uppercase; line-height: 22px; display: block; color: $color;
}
}
}
.post-info{
@include clearfix(); margin: 20px 0 0 0; text-align: center;
position: relative; z-index: 1; overflow: hidden; @include transition(all 0.25s ease-out);
.post-title{
margin: 0 0; font-size: 1.2857em; font-weight: bold;
}
.post-meta{ @include clearfix(); margin: 0 0 3px; color: $low-color;
> *{
margin: 0 0 0 15px; padding: 0 0 0; position: relative; display: inline-block;
&.post-cat{ margin-left: 0;}
}
a{
color: inherit; position: relative;
&:hover{ color: $color1;
}
}
}
.post-excerpt{ margin-top: 12px;
p{ margin-bottom: 15px;
&:last-child{ margin-bottom: 0px; }
}
.more-link{ font-weight: bold;
&:after{ @include font-ionicons('\f218', 10px); font-size: 10px; margin-left: 5px; position: relative; top: -1px; @include transition(all 0.25s ease-out); }
&:hover{
&:after{ @include rotate(90deg); @include transition(all 0.1s ease-out); }
}
}
}
.more-link{ color: $link-color; margin-top: 20px; display: inline-block; position: relative; font-weight: bold;
padding: 8px 15px; line-height: 24px; @include transition(all 0.25s ease-out); text-transform: uppercase;
&:before{ position: absolute; content: ""; height: 25px; width: 25px; background: $color1; @include border-radius(100%);
left: 0px; top: 0px; z-index: -1;
}
&:after{
@include font-ionicons('\f30f', 12px); width: 12px; margin-left: 6px; font-size: 16px; text-align: right;
}
&:hover{ color: #FFF; padding: 8px 15px;
&:before{
height: 100%; width: 100%; @include border-radius(4px);
}
}
}
}
&:hover{
.post-img{
> a{
&:before{ @include opacity(1); }
}
}
.post-date{
background: $color1;
span.day{
color: #FFF;
&:before{ background: #FFF; }
}
span.month{
color: #FFF;
}
}
}
}
}
&.item-style-2{
.list-post{
.item-post{
.post-img{
}
.post-info{ text-align: left; padding-left:30px; margin-top: 23px;
.post-meta{ position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 20px; background: $low-color; left: 0px; top: 50%; }
.post-cat{ padding-left: 30px; }
}
}
}
}
}
&.item-style-3{
.list-post{
.item-post{
.post-info{
padding: 25px 30px 28px; margin: 0; border: 1px solid $line-border-color; background: #f9f9f9;
@media(max-width: $screen-md-max){ padding: 20px; }
.post-meta{ margin: 0 0 10px; }
.more-link{ font-variant: bold; text-transform: uppercase; color: $color1; margin-top: 15px; display: table; position: relative;
&:before{ @include font-ionicons('\f10b', 21px); font-size: 18px; text-align: left; position: relative; top: 1px; }
&:after{ position: absolute; content: ""; height: 1px; width: 0px; background: $color1; left: 21px; bottom: 1px; @include transition(all 0.25s ease-out); }
&:hover{
&:after{ width: calc(100% - 21px); }
}
}
}
}
}
}
}
&.style3{
border: 1px solid $line-border-color;
.special-slick-syncing{ @include opacity(0); }
.list-post-info{
.slick-slide{ padding: 30px;
@media(max-width: $screen-md-max){ padding: 20px 0px 20px 20px; }
}
.post-meta{ margin-bottom: 20px;
@media(max-width: $screen-md-max){ margin-bottom: 15px; display: none; }
.post-cat{
@include border-radius(5px); border: 1px solid $line-border-color; padding: 5px 12px; text-transform: uppercase; color: $color; font-size: 12px;
&:hover{ color: #FFF; background: $color1; border-color: $color1; }
}
}
.post-title{ font-size: 2em; line-height: 1.1; margin-bottom: 20px;
@media(max-width: $screen-md-max){ font-size: 1.5em; margin-bottom: 8px; }
}
.post-excerpt{
.more-link{ margin-top: 20px;
@media(max-width: $screen-md-max){ margin-top: 0px; }
}
}
}
.list-post-thumb{
a{ position: relative; display: block;
&:after{ position: absolute; content: ""; height: 100%; width: 100%; background: rgba(0,0,0,0.15); top: 0px; left: 0px; }
}
@include nav_slick1();
.slick-arrow{
&.slick-next{ right: 14px; }
}
}
}
}
// Row
section.full-width .vc_container.section-content {
width: 100%;
padding: 0 15px;
}
#st_gdpr_iframe{ border: none; }
// Store Info
.sns-store-info{
.store-info{
> * { @include clearfix(); margin-top: 15px;
a {
&:hover{ color: $color1; }
}
&:first-child{ margin-top: 0px; }
&.store-intro{
min-height: auto;
}
span.vc_icon_element-icon{
float: left; text-align: left; width: 22px;
&.has-label{ width: auto; padding-right: 8px;
> span.label{
font-weight: normal; text-transform: uppercase; margin-right: 6px; padding: 0; float: left; line-height: inherit;
}
}
}
}
.store-intro{
margin: 0 0 20px; padding-left: 0px;
}
.store-logo{
margin: 0 0 28px; padding-left: 0px;
}
.store-maplink{
}
.store-address,
.store-time{
.inner{ display: inline-block;
width: calc(100% - 22px);
}
}
}
&.label-not-inline{
.store-info{
> * {
> span{ float: none !important; }
}
}
}
}
.sns-social-links{
.wpb_heading{ font-size: 1.1428em; text-transform: uppercase; margin-bottom: 15px; }
.follow-us{
a{
font-size: 0px; margin: 2.5px; @include square(28px); text-align:center; @include border-radius(2px); background: #ddd;
display: inline-block; @include box-shadow( 0 0 10px rgba(0,0,0,0.05));
&:first-child{ margin-left: 0; }
&:last-child{ margin-right: 0; }
&:before{ font-size: 12px; }
&.facebook{ color: #4267b2 !important;
&:before{
@include font-awesome5brand('\f09a', 28px);
}
}
&.twitter{ color: #1da1f2 !important;
&:before{
@include font-awesome5brand('\f099', 28px);
}
}
&.youtube{ color: #ff0000 !important;
&:before{
@include font-awesome5brand('\f167', 28px);
}
}
&.pinterest{ color: #bd081c !important;
&:before{
@include font-awesome5brand('\f0d2', 28px);
}
}
&.instagram{ color: #c13584 !important;
&:before{
@include font-awesome5brand('\f16d', 28px);
}
}
&.tiktok{ color: #222 !important;
&:before{
@include font-awesome5brand('\e07b', 28px);
}
}
&:hover{
background: #FFF;
&:before{
-webkit-animation: heartBeat 1s ease-in-out infinite;
-moz-animation: heartBeat 1s ease-in-out infinite;
-o-animation: heartBeat 1s ease-in-out infinite;
animation: heartBeat 1s ease-in-out infinite;
}
}
}
}
&.style-1{
.follow-us{
@include clearfix();
}
}
&.style-2{
.follow-us{
@include clearfix();
}
}
&.style-3{
.follow-us{
@include clearfix();
}
}
}
// Info box
.sns-info-box{ @include clearfix();
position: relative; @include transition(all 0.25s ease-out);
&.box-style1{
padding-top: 15px; padding-bottom: 15px; text-align: center;
.icon { margin-right: 25px; display: inline-block; position: relative; top: 4px;
&:before{ position: absolute; content: ""; @include border-radius(100%); height: 25px; width: 25px; left: -7.5px; top: -7.5px;
z-index: -1; @include transition(all 0.15s ease-out); background: $color1;
}
span.vc_icon_element-icon{
}
}
.content-info-box{ text-align: left; font-size: 1em; display: inline-block;
position: relative; max-width: calc(100% - 75px - 80px);
@media(max-width: $screen-md-max){
max-width: calc(100% - 75px - 60px);
}
.inner{ position: relative;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.sc_heading{ text-transform: uppercase; font-size: 1.1428em; font-weight: bold; margin: 0 0 10px; position: relative; }
> div{ line-height: 1.42857;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
}
@media(max-width: $screen-md-min){ text-align: center; }
.info-box-wrapper{
.inner{ margin-left: auto; margin-right: auto; }
}
&:hover{
.icon{
&:before{
background: $color1; height: 50px; width: 50px; left: -15px; top: -15px;
}
}
}
&.want-effect{
&:hover{
.icon{
&:before{
@include animation(bounceIn 300ms ease-out);
}
}
}
}
}
&.box-style2{
padding-top: 15px; padding-bottom: 15px; text-align: center;
.icon { display: inline-block; position: relative; margin-bottom: 15px;
&:before{ position: absolute; content: ""; @include border-radius(100%); height: 25px; width: 25px; left: -7.5px; top: -7.5px;
z-index: -1; @include transition(all 0.15s ease-out); background: $color1;
}
span.vc_icon_element-icon{
}
}
.content-info-box{ font-size: 1em; display: block;
position: relative;
.inner{ position: relative;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.sc_heading{ text-transform: uppercase; font-size: 1.1428em; font-weight: bold; margin: 0 0 10px; position: relative; }
> div{ line-height: 1.42857;
a{ color: inherit;
&:hover{ color: $color1; }
}
}
}
@media(max-width: $screen-md-min){ text-align: center; }
.info-box-wrapper{
.inner{ margin-left: auto; margin-right: auto; }
}
&:hover{
.icon{
&:before{
background: $color1; height: 50px; width: 50px; left: -15px; top: -15px;
}
}
}
&.want-effect{
&:hover{
.icon{
&:before{
@include animation(bounceIn 300ms ease-out);
}
}
}
}
}
&.box-style3{
padding-top: 15px; padding-bottom: 15px; text-align: center;
.icon { margin-right: 25px; display: inline-block; position: relative; top: 22px; vertical-align: top;
&:before{ position: absolute; content: ""; @include border-radius(100%); height: 25px; width: 25px; left: -7.5px; top: -7.5px;
z-index: -1; @include transition(all 0.15s ease-out); background: $color1;
}
span.vc_icon_element-icon{
}
}
.content-info-box{ text-align: left; font-size: 1em; display: inline-block;
position: relative; max-width: calc(100% - 75px - 120px);
@media(max-width: $screen-md-min){
max-width: calc(100% - 75px - 60px);
}
.inner{ position: relative;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.sc_heading{ text-transform: uppercase; font-size: 1.4285em; font-weight: bold; margin: 0 0 12px; position: relative; }
> div{
a{ color: inherit;
&:hover{ color: $color1; }
}
}
}
@media(max-width: $screen-md-min){ text-align: center; }
.info-box-wrapper{
.inner{ margin-left: auto; margin-right: auto; }
}
&:hover{
.icon{
&:before{
background: $color1; height: 50px; width: 50px; left: -15px; top: -15px;
}
}
}
&.want-effect{
&:hover{
.icon{
&:before{
@include animation(bounceIn 300ms ease-out);
}
}
}
}
}
}
// SNS Cat info
.sns-cat-info{
&.show-under-bottom{
text-align: center; padding: 0 0; overflow: hidden;
a.cat-img{ display: inline-block; padding: 0; position: relative; @include transition(all 0.25s ease-out);
@include border-radius(100%); overflow:hidden; @include box-shadow(0 0 10px rgba(0,0,0,0.2));
img{ margin: 0 auto; @include border-radius(100%); }
&:before{ position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: transparent; @include border-radius(100%);
@include transition(all 0.25s ease-out); z-index: 1; border: 10px solid #FFF;
}
}
.cat-title{ text-transform: uppercase; font-size: 1.1428em; margin: 15px 0 0;
a{
padding: 0 0; display: inline-block;
.cat-prd-num{ color: $color; font-size: 14px; font-weight: normal; text-transform: none; @include transition(all 0.25s ease-out);
display: block;
&:before{ content: "("; margin-left: 3px;}
&:after{ content: ")";}
}
&:hover{
.cat-prd-num{ color: inherit; }
}
}
}
&:hover{
a.cat-img{
&:before{ background: rgba($color1, 0.2);}
img{
@include animation(swing 500ms ease-out);
}
}
}
&.white-text{
a.cat-img{
}
.cat-title{
a {
color: #FFF;
.cat-prd-num{ color: $low-color;}
&:hover{
color: $color1;
.cat-prd-num{ color: inherit; }
}
}
}
}
}
&.show-in-center{
text-align: center; position: relative; overflow: hidden;
a.cat-img{ display: block; position: relative; @include transition(all 0.25s ease-out);
img{ margin: 0 auto; @include transition(all 0.25s ease-out); }
&:before{ position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.2); @include opacity(0); visibility: hidden; @include transition(all 0.25s ease-out); }
}
.cat-info{
position: absolute; top: 50%; left: 50%;z-index: 1; width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
.cat-title{ font-size: 1.2857em; margin: 0 0; font-weight: bold; text-transform: uppercase;
@media(max-width: $screen-md-min){ font-size: 1.1428em; }
a{
min-width: 180px; display: inline-block; background: #FFF; @include border-radius(3px);
padding: 18px 25px;
@media(max-width: $screen-md-max){
min-width: auto;
}
.cat-prd-num{ display: block; color: $low-color; font-size: 14px; font-weight: normal; text-transform: none; @include transition(all 0.25s ease-out);
&:before{ content: "("; margin-left: 3px;}
&:after{ content: ")";}
}
&:hover{
.cat-prd-num{ color: inherit; }
}
}
}
}
&:hover{
a.cat-img{ @include scale(1.1);
&:before{ @include opacity(1); visibility: visible; }
}
}
}
&.show-in-cb{
text-align: center;
.inner{ position: relative; overflow: hidden; }
a.cat-img{ display: block; position: relative; @include transition(all 0.25s ease-out);
img{ margin: 0 auto; @include transition(all 0.25s ease-out); }
&:before{ position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.1); @include opacity(0); visibility: hidden; @include transition(all 0.25s ease-out); }
}
.cat-info{
position: absolute; bottom: 30px; left: 50%;z-index: 1; width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
@media(max-width: 1440px){
bottom: 35px;
}
@media(max-width: $screen-md-max){
bottom: 15px;
}
.cat-title{ font-size: 1.1428em; margin: 0 0; font-weight: bold; text-transform: uppercase;
@media(max-width: $screen-md-max){ font-size: 1em;}
a{
min-width: calc(100% - 80px); display: inline-block; background: rgba(255,255,255,0.95); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
padding: 20px 20px; @include border-radius(4px);
@media(max-width: 1440px){ min-width: calc(100% - 70px); }
@media(max-width: $screen-md-max){ min-width: calc(100% - 30px); }
@media(max-width: $screen-md-min){ padding: 15px 15px; }
.cat-prd-num{ color: $low-color; font-size: 14px; font-weight: normal; text-transform: none; @include transition(all 0.25s ease-out);
@media(max-width: $screen-md-min){ display: block; }
&:before{ content: "("; margin-left: 3px;}
&:after{ content: ")";}
}
&:hover{
.cat-prd-num{ color: inherit; }
}
}
}
}
&:hover{
a.cat-img{ @include scale(1.1);
&:before{ @include opacity(1); visibility: visible; }
}
}
}
}
.sns-carousel.cat-carousel{ margin: 0 0.1px;
.owl-item.active{
&:not(.first-iactive){
border-left: 1px solid $line-border-color;
&:not(.last-iactive){
}
}
}
}
// SNS Products
.sns-products{
h2.wpb_heading, h3.wpb_heading{
}
.sproduct-content{ @include clearfix(); }
.action-wrap{ display: block; text-align: center;
.btn.view-all{
margin: 20px auto 0; display: inline-block;
border: 1px solid $color; color: $link-color; background: transparent; font-weight: bold;
&:hover{
border-color: $color1; background: $color1; color: #FFF;
}
}
}
&.list-mode{
.wpb_heading{
font-size: 2em; text-transform: uppercase; font-weight: bold; text-align: left; margin: 0 0 25px;
span{
&:before,&:after{ display: none; }
}
}
.prdlist-content{ margin: -15px -15px;
.product_list.list{ margin-top: 2px;
.product{
margin-top: 20px;
&:first-child{ margin-top: 3px;}
}
.list-view{
@include product-block-liststyle();
}
.item-row{ padding: 15px; }
}
}
@include owl-nav1();
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out); }
&:hover{
.owl-nav{
@include opacity(1);
}
}
&.in-left-shop{
.prdlist-content .product_list.list .list-view .item-info {
.item-title{ font-size: 1em; margin-top: 5px; }
.price{ margin-top: 2px; }
.star-rating{ margin-top: 6px; }
}
.prdlist-content .product_list.list .list-view .item-img{
margin-right: 15px;
.product-image{ max-width: 80px;}
}
}
}
&.gird-mode{
.before-title{ text-align: center; }
.wpb_heading{
text-align: center; position: relative;
}
&[data-gridstyle='4']{
.wpb_heading{ margin-bottom: 15px }
}
.after-title{ text-align: center; }
.prdlist-content{ margin-left: -15px; margin-right: -15px;
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
&.grid-style2{
margin: -15px;
@media(max-width: $screen-xs-max){ margin: -10px; }
}
}
@include owl-nav1();
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out); }
&:hover{
.owl-nav{
@include opacity(1);
}
}
}
@include owl-dots1();
.owl-dots{ margin-top: 23px; }
}
// SNS Hot Deals
.sns-hot-deals{
position: relative; @include clearfix();
.clock-digi{ display: inline-block;
> div { display: inline-block; float: left; padding: 0; margin: 0 0 0 8px; width: 60px;
text-transform: none; font-size: 14px; color: $color; position: relative;
@media(max-width: $screen-md-max){ width: 56px; margin: 0 0 0 5px; }
> div{ display: block; text-align: center; font-size: 12px; text-transform: uppercase; color: $color;
> div { display: block; padding: 0 0; font-weight: bold; font-size: 26px; text-transform: none; width: 100%; height: 100%;
line-height: 60px; @include transition(all 0.25s ease-out);
background: $color1; position: relative; color: #fff; margin-bottom: 1px; @include border-radius(5px);
@media(max-width: $screen-md-max){ font-size: 18px; line-height: 46px; }
}
}
&:first-child{ margin-left: 0px;
}
}
}
.content{ margin: 0 -15px; }
.owl-carousel{
.product{ padding: 0 15px; @include clearfix();
.item-img{ display: block; max-width: 220px; margin-right: 25px; float: left; position: relative;
@include product-block-badges();
@media(max-width: $screen-md-max) and (min-width: $screen-md-min){ max-width: 180px; }
@media(max-width: $screen-phone) { margin: 0 auto; float: none; }
.product-image{ display: block; position: relative; overflow: hidden;
&:before{
position: absolute; content: ""; height: 100%; width: 100%; left: 0px; top: 0px; background: rgba(#000, 0.06);
@include opacity(0); visibility: hidden; @include transition(all 0.25s ease-out);
}
}
.yith-wcqv-button{
font-size: 0px; padding: 0; width: 35px; height: 35px; @include border-radius(3px); display: block; vertical-align: top; border: none;
overflow: hidden; @include transition(all 0.25s ease-out); position: absolute; left: calc(50% - 17.5px); top: calc(50% - 17.5px); @include scale(0); background: #FFF;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
&:before{
position: absolute; left: 0px; top: 0px; @include font-ionicons('\f346', 35px); font-size: 16px; color: $link-color; background-color: transparent;
@include transition(all 0.25s ease-out);
}
&:hover{ background: $color1;
&:before{
color: #FFF;
}
}
.blockUI.blockOverlay{
position: absolute; top: 0px !important; left: 0px !important;
overflow: hidden; background: #fff !important; color: $link-color; opacity: 1 !important;
width: 35px !important; height: 35px !important; line-height: 35px !important; cursor: wait;
&:before, &:after{
color: #FFF; font-size: 16px; cursor: wait;
}
&:before {
@include font-ionicons('\f29c', 35px); z-index:1; color: inherit;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
}
}
&:hover{
.blockUI.blockOverlay{
background: $color1 !important; color: #fff;
}
}
}
}
.item-info{
.item-title{ font-weight: bold; margin: 20px 0 0; font-size: 1.1428em; line-height: 1.42857; }
.price{ margin-top: 2px; }
.star-rating{ margin-top: 6px; }
.time-count-down{ margin-top: 20px; }
@media(max-width: $screen-phone) { text-align: center;
.star-rating{ margin: 0 auto; }
}
}
&:hover{
.item-img{
a.product-image:before{
visibility: visible; @include opacity(1);
}
.yith-wcqv-button{ @include scale(1); }
}
}
}
@include owl-nav2();
.owl-nav{ position: absolute; right: 0px; top: -72px;
@media(max-width: $screen-md-max){ top: -62px; }
@media(max-width: $screen-phone){ display: none; }
}
}
}
// Single deal
.sns-single-deal{
.item-title{ font-size: 2.5em; margin-bottom: 33px; line-height: 1.1;
}
.price{
color: $color; font-size: 1.2857em;
del { padding: 0 5px;
.amount{
color: $low-color;
}
&:before {
content: '';display: block;width: 100%;height: 1px; background: $low-color;
position: absolute; top: calc(50% + 0.5px); left: 0; @include rotate(0deg);
}
}
ins {
}
}
.time-count-down{ @include clearfix(); margin-top: 18px; }
.clock-digi{ display: inline-block;
> div { display: inline-block; float: left; padding: 0; margin: 0 0 0 15px; width: 70px; height: 75px; box-shadow: 0 0 10px rgba(0,0,0,0.05);
text-transform: none; font-size: 12px; position: relative; background: #FFF; @include border-radius(4px);
> div{ display: block; text-align: center; font-size: 12px; text-transform: uppercase; line-height: 22px;
> div { display: block; padding: 0 0; font-weight: bold; font-size: 35px; color: $link-color; text-transform: none; width: 100%; height: 100%; line-height: 50px; height: 50px;
@include transition(all 0.25s ease-out); @include border-radius(0px);
position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: calc(100% - 20px); left: 10px; bottom: 0px; background: $low-color; }
}
}
&:first-child{ margin-left: 0px;
&:before{ display: none; }
}
}
}
.btn-readmore{ margin-top: 43px; height: 56px; line-height: 56px; }
}
// Size chart
.yith-wcpsc-product-table-wrapper{
padding: 10px 0 0;
.yith-wcpsc-product-table{
box-shadow:none; border-color: $line-border-color;
tr > td:first-child, th{
background: #f5f5f5; color: $link-color; font-weight: bold;
}
td, th{ border-color: $line-border-color; padding: 15px; height: auto; line-height: 1.5; }
}
}
// Override social sharing style
.yith-wcwl-share{ display: none; }
.ssbp-wrap,
.ssba-wrap{ font-size: 1em !important;
.ssba-share-text{
position: relative; font-weight: bold; text-transform: uppercase; margin-right: 8px; font-size: 1em; color: $link-color;
& + a{ margin-left: 0px; }
}
> div{
@media(max-width: $screen-phone){ float: left; }
}
br{
& + a{ margin-left: 0px; }
}
a{
margin: 3px;display: inline-block;
padding: 0; font-size: 1em; @include transition(all 0.25s ease-out); position: relative;
line-height:24px !important; height:24px !important; width:24px !important; @include border-radius(0px); text-align: center;
&:first-child{ margin-left: 0px; }
&:last-child{ margin-right: 0px; }
img{
padding: 0 0 !important; width: 100% !important; height: 100% !important;
}
text-align: center;
&.ssba_linkedin_share,
&.ssba_facebook_share,
&.ssba_twitter_share,
&.ssba_youtube_share,
&.ssba_pinterest_share,
&.ssba_instagram_share,
&.ssba_email_share,
&.ssba_print_share{
img{
display: none !important;
}
&:hover{
text-decoration: none;
}
}
&:before{ @include transition(all 0.25s ease-out); font-size: 14px; }
&.ssba_linkedin_share{ color: #0077b5;
&:before{ @include font-awesome5brand('\f08c', 14px); line-height: inherit; }
}
&.ssba_facebook_share{ color: #4267b2;
&:before{ @include font-awesome5brand("\f09a", 14px); line-height: inherit }
}
&.ssba_twitter_share{ color: #1da1f2;
&:before{ @include font-awesome5brand("\f099", 14px); line-height: inherit }
}
&.ssba_youtube_share{ color: #f00;
&:before{ @include font-awesome5brand("\f167", 14px); line-height: inherit }
}
&.ssba_pinterest_share{ color: #bd081c;
&:before{ @include font-awesome5brand("\f0d2", 14px); line-height: inherit }
}
&.ssba_instagram_share{ color: #c13584;
&:before{ @include font-awesome5brand("\f16d", 14px); line-height: inherit }
}
&.ssba_email_share{ color: #ea4335;
&:before{ @include font-awesome5('\f0e0', 14px, 400); line-height: inherit }
}
&.ssba_print_share{ color: $color;
&:before{ @include font-awesome5('\f02f', 14px, 900); line-height: inherit }
}
}
}
// Products Ajax Tab
.sns-products-ajaxtab{
@include clearfix();
&[data-gridstyle="2"],
&[data-gridstyle="3"],
&[data-gridstyle="4"] {
.header-tab{ margin-bottom: 20px; }
}
&.hidden-loadmore-btn{
.content-tab .sns-woo-loadmore-wrap{ display: none; }
}
&.hidden-header-tab{
.header-tab{ display: none; }
}
&.hidden-tab{
.header-tab{ display: none; }
}
.header-tab{
margin-bottom: 17px; position: relative; text-align: center; overflow-x: hidden;
@media(max-width: $screen-md-min){
height: 0px; margin-bottom: 0px; overflow-x: visible;
}
.wpb_heading{ margin: 0 0 20px; }
ul.nav-tabs {
@include ulclear(); position: relative; z-index: 1; border-bottom:none; text-align: center; display: inline-flex; padding: 0; margin: 0 0;
> li {
display: inline-block; margin: 0 0 0 15px; padding: 0 0 0 35px; float: left; position: relative;
&:before{ position: absolute; content: ""; height: 1px; width: 20px; background: $low-color; left: 0px; top: calc(50% - 1px); }
&:first-child{ padding-left: 0px; margin-left: 0px;
&:before{ display: none; }
}
&.active{
> a { color: $color1;
.cat-number{ color: inherit; }
}
}
&:hover:not(.active){
> a {
color: $color1;
}
}
> a {
@include transition(all 0.25s ease-out);font-size: 1.1428em; color: $link-color; text-transform: uppercase; background: transparent; border: none;
display: inline-block; position: relative; font-weight: bold; margin: 0; line-height: inherit;
.cat-number{ color: $low-color; position: relative;
&:before{ content: "(";}
&:after{ content: ")";}
}
}
}
}
ul.tab-drop-nav{
position: absolute; top: -40px; right: 0px; @include clearfix(); @include ulclear();
li.dropdown{ padding: 0;
.dropdown-toggle{
display: block; font-size: 26px; height: 20px; width: 20px; line-height: 20px; vertical-align: middle;
&:before{ @include font-ionicons('\f397', 20px); }
&:hover{
text-decoration: none;
}
}
ul.dropdown-menu{
padding: 0 0;
li{ @include transition(all 0.25s ease-out); padding: 0; border-top: 1px solid $line-border-color;
&:first-child{ border-top: none; }
a{ padding: 10px 20px; position: relative; font-weight: bold; text-transform: uppercase; }
&:hover{
a{ background-color: transparent; color: $color1; }
}
&.active{
a{ background-color: transparent; color: $color1; }
}
}
}
}
}
}
.content-tab{ @include clearfix();
.prdlist-content{
margin: 0 -15px; @include clearfix();
@media(max-width: $screen-md-max){
margin-left: -($sns-wgutter-md / 2); margin-right: -($sns-wgutter-md / 2);
}
@media(max-width: $screen-xs-max){
margin-left: -($sns-wgutter-xs / 2); margin-right: -($sns-wgutter-xs / 2);
}
&.grid-style2,
&.grid-style3,
&.grid-style4{
.product_list{
.product{
margin-bottom: 8px;
}
.item-row{
.product:last-child{ margin-bottom: 0px; }
}
}
}
.product_list{ @include clearfix();
&.simple-effect{
opacity: 0.4; @include transition(all 0.2s ease-in 0s);
}
.product{ margin-bottom: 8px; }
.item-row{
.product{ margin-bottom: 8px;
}
}
}
&.active{
.product_list.simple-effect{
opacity: 1;
}
}
&:not(.active){
margin-bottom: 0px !important;
}
@include owl-dots1();
.owl-dots{ margin-top: 7px; }
@include owl-nav1();
.owl-nav{ @include opacity(0); @include transition(all 0.25s ease-out); }
&:hover{
.owl-nav{
@include opacity(1);
}
}
}
.content-tab-inner{
position: relative; @include clearfix();
&.tab-loading{ min-height: 40px;
> div { @include opacity(0.4); }
&:after{
position: absolute;top: 50%;left: 50%;line-height: normal; margin: -20px 0 0 -20px; text-align: center;
color: $color; z-index: 2; @include font-ionicons('\f29c', 40px); font-size: 40px;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
}
}
}
.sns-woo-loadmore-wrap{
text-align: center; @include clearfix(); height: 60px; position: relative; margin-top: 20px;
.sns-woo-loadmore{ height: 56px; line-height: 56px; color: #FFF; position: relative;
background: $button-bg-color; padding: 0 30px; text-align: center; font-weight: bold;
&:hover{
border-color: $color1; background: $color1; color: #FFF;
}
&.loading{
border-color: $color1; background: $color1; color: #FFF;
}
&.loaded{ cursor: text;
}
}
}
}
.browser-plink-wrap{
text-align: center; margin-top: 12px; font-size: 1em;
a.browser-plink{
font-weight: bold; position: relative; text-transform: uppercase; display: inline-block;
&:before{
position: absolute; content: ""; height: 1px; width: 100%; left: 0px; bottom: 1px; background: $link-color;
}
&:hover{
&:before{ background: $color1;
-webkit-animation: snsResetWidth 0.25s;
-ms-animation: snsResetWidth 0.25s;
-o-animation: snsResetWidth 0.25s;
animation: snsResetWidth 0.25s;
}
}
}
}
&.head-tabs-upright{ position: relative;
.header-tab{ position: absolute; right: 0px; top: -38px; margin: 0;
@media (max-width: $screen-md-min) { top: 0px; }
}
}
}
// Nav class in content
#sns_content{
.nav-in-topright{
@include owl-nav1();
.owl-nav{ @include opacity(1); position: absolute; top: -95px; right: 15px; height: 45px; width: 100px;
.owl-prev{ left: 0px !important;
}
.owl-next{ left: auto !important; right: 0px !important;
}
@media(max-width: $screen-xs-max){
right: ($sns-wgutter-xs / 2); top: -80px; height: 35px; width: 80px;
}
}
}
.nav-in-topcenter{
@include owl-nav1();
.owl-nav{ @include opacity(1); position: absolute; top: -95px; left: 0px; width: 100%; height: 45px;
.owl-prev{ left: 15px;
@media (max-width: $screen-md-min) {
left: -5px !important;
}
}
.owl-next{ left: auto; right: 15px;
@media (max-width: $screen-md-min) {
left: auto !important; right: -5px !important;
}
}
}
}
}
// Override compare
table.compare-list {
tr{
&.description{
td{ text-align: left; }
}
}
}