File: /home/hanode/public_html/wp-content/plugins/sw_core/css/shortcodes.less
@color: #f26d7d;
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
transform: translate(@x, @y);
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
.responsive-slider.loading,.tab-content.loading{
height: 300px;
overflow: hidden;
position: relative;
&:before{
background: #fff url("../assets/img/loadingp.gif") no-repeat scroll center center;
background-size: 60px 60px;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1039;
}
}
.shortcodes{
margin-bottom: @baseLineHeight;
.carousel .item img{
width: 100%;
}
h3 {
padding-top: 30px;
}
}
/* Icon */
[class^="fa-"], [class*=" fa-"]{
margin: 5px;
}
.googlemap .map_canvas {
height: 100%;
width: 100%;
}
.shortcode-slideshow {
img{
width: 100%;
}
.carousel-control {
top:45.5%;
&:hover{
opacity:1;
background-color:@color;
}
}
}
.carousel-control {
top: 50%;
width:42px !important;
height:42px !important;
}
// Gallery
ul.thumbnails{
margin-left: -1%;
.rtl &{
margin-right: -1% !important;
margin-left: 0;
}
}
.gallery {
padding: 0;
overflow: hidden;
.rtl &{
margin-right: 0 !important;
}
li{
margin-left: 1%;
margin-right: 0;
margin-bottom: 20px;
text-align: center;
float: left;
list-style: none;
.rtl &{
float: right;
margin: 0 1% 20px 0;
}
}
.thumbnail{
display: block;
.border-radius(0);
background: #FFF;
padding: 5px;
position: relative;
.transition(all 0.3s ease);
overflow: hidden;
&:after{
position: absolute;
border-color: transparent #FFFFFF #FFFFFF transparent;
border-style: solid;
border-width: 45px;
content: "";
opacity: 0;
filter: alpha( opacity = 0 );
right: -45px;
bottom: 0;
transition: all 0.3s ease 0.2s;
z-index: 4;
}
&:before{
content: "\f0a9";
font-family: FontAwesome;
position: absolute;
bottom: 20px;
right: 0;
color: #FFF;
font-size: 20px;
opacity: 0;
filter: alpha( opacity = 0 );
transition: all 0.2s ease 0.3s;
transform: rotate(0deg);
z-index: 5;
}
&:hover{
background: @color;
border-color: #ddd;
&:after{
bottom: 0;
right: 0;
opacity: 0.3;
filter: alpha( opacity = 30 );
}
&:before{
right: 20px;
opacity: 1;
filter: alpha( opacity = 100 );
transform: rotate(360deg);
}
}
}
img{
width: 100%;
}
.caption {
overflow: hidden;
padding-top: 12px;
font-size:14px;
text-overflow: ellipsis;
white-space: nowrap;
h4{
font-size:14px;
}
}
}
//FlexGallery
.gallery-images{
float: none;
margin:0 -15px 30px;
.flex-direction-nav{
li a{
height: 30px;
width: 29px;
text-indent: -9999px;
display: block;
text-align: left;
background: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-indent: inherit !important;
&.flex-next{
&:hover{
background:@color;
border: 1px solid @color;
color: #fff;
}
&:before{
color: #ddd;
content: "\f054";
font-family: "fontawesome";
font-size: 11px;
margin: 9px 0 0 -5px;
}
}
&.flex-prev{
&:hover{
background:@color;
border: 1px solid @color;
color: #fff;
}
&:before{
color: #ddd;
content: "\f053";
font-family: "fontawesome";
font-size: 11px;
margin: 9px 0 0 -5px;
}
}
}
}
}
// Pricing table
.header,.plan{
.pricing-tab-firts &{
background:#4cbf8d;
&:before{
background:#4cbf8d;
}
}
.pricing-tab-two &{
background:#e74847;
&:before{
background:#e74847;
}
}
.pricing-tab-three &{
background:#50c1e9;
&:before{
background:#50c1e9;
}
}
}
.pricing-table {
text-align: center;
&.style1{
border-radius:5px;
border:solid 2px #d8d8d8;
margin:7px;
z-index:5;
position:relative;
padding:10px 0;
clear:both;
margin-bottom:70px;
background:#fff;
&:before{
content:'';
position:absolute;
left:-9px;
right:-9px;
bottom:-9px;
top:-9px;
display:block !important;
border-radius:10px;
border:solid 7px #f4f3f3;
}
.pricing {
background: #fff;
color: #333;
padding: 0 10px;
width: 20%; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
float: left;
position: relative;
border-left:solid 1px #ededed;
&.pricing-one-first{
border-left:none;
}
&.most-popular {
z-index: 2;
margin-top: -35px;
margin-bottom: -18px;
padding: 35px 10px;
.border-radius(5px);
position:relative;
background:#2f2f2f;
.header{
color:@color;
}
ul{
li{
border-bottom: 1px solid #3e3e3e;
&:first-child{
border-top:1px solid #3e3e3e;
}
}
}
.signup:before{
background:@color;
}
&:after{
content:'';
position:absolute;
background:url(../assets/img/ribon.png);
background-repeat:no-repeat;
display:block;
width:70px;
height:70px;
right:-5px;
top:-5px;
}
}
.header{
border:none;
font-size:24px;
font-weight:bold;
color:#686868;
box-shadow:none;
margin-bottom:20px;
text-align:center;
}
.price{
font-size:14px;
color:#9d9d9d;
font-weight:700;
}
ul {
margin: 20px 0 10px 0;
padding: 0;
list-style: none;
li{
border-bottom: 1px solid #ededed;
padding: 5px 24px;
text-align:left;
font-size:14px;
color:#888;
.rtl &{
text-align:right;
}
&:first-child{
border-top:1px solid #ededed;
}
&:before{
content: '\F111';
font-family: 'FontAwesome';
color: #909090;
display: block;
float: left;
margin-right: 10px;
margin-top: 5px;
font-size: 8px;
.rtl &{
float:right;
margin-left:10px;
margin-right:0;
}
}
}
}
.signup {
position: relative;
padding: 12px 20px;
margin: 20px 0 0 0;
color: #727272;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #ededed;
background-image: -moz-linear-gradient(#fff, #ededed);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(#fff, #ededed);
background-image: -o-linear-gradient(#fff, #ededed);
background-image: -ms-linear-gradient(#fff, #ededed);
background-image: linear-gradient(#fff, #ededed);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
.box-shadow(1px 1px #eee);
border:solid 1px #ddd;
margin-bottom:20px;
&:before{
content:'\f054';
font-family:'FontAwesome';
color:#fff;
background:#7dacda;
border-radius:50%;
width:25px;
height:25px;
line-height:27px;
text-align:center;
font-size:15px;
top:8px;
left:-12px;
position:absolute;
.rtl &{
right:-12px;
left:auto;
content:'\f053';
}
}
}
}
}
&.style2{
margin-left:18%;
.pricing {
width:25%;
float:left;
margin-right: 10px;
box-shadow: 1px 6px 15px 4px #cecece;
border-radius: 5px;
.header{
padding: 20px 0;
background: #4cbf8d;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #fff;
h3{
margin:0;
font-size:30px;
}
}
.pricing-content {
margin-bottom: 28px;
ul{
margin:0 8px;
border-bottom-left-radius: 5px;
border-bottom-right-radius:5px;
border: 1px solid #e4e4e4;
border-top:none;
list-style:none;
li{
font-size:14px;
padding:18px 0;
border-top:1px solid #e4e4e4;
background:#f2f2f2;
+ li {
border-bottom:none;
}
}
}
}
.price{
[class*="span"]{
width: 100%;
margin:0;
p {
display: inline-block;
margin: 0px;
font-size:30px;
top: -8px;
position: relative;
}
}
.span-1{
font-size:60px;
line-height:30px;
}
.span-2{
font-size:14px;
margin-bottom:20px;
}
}
.plan{
display: inline-block;
padding: 0px 57px;
background: #4CBF8D;
font-size: 20px;
font-weight: 700;
border-radius:5px;
line-height: 50px;
margin-bottom: 10px;
a {
color:#fff;
}
}
}
}
&.style3{
margin-left:10%;
.pricing {
color:#fff;
float:left;
margin-right:5%;
width: 26.3%;
background:#e74847;
border-radius:4px;
border:1px solid #d4d4d4;
.header{
font-size:18px;
border-bottom:1px solid #cb2827;
line-height:50px;
font-weight:700px;
}
.price{
display: inline-block;
padding: 10px 32px;
margin: 30px;
background: #cb2827;
border-radius: 30px;
font-size:20px;
}
.pricing-content{
ul{
list-style:none;
margin:0;
li{
line-height:50px;
color:#666666;
font-size:14px;
&:nth-child(2n+0){
background:#d4d4d4;
}
&:nth-child(2n+1){
background:#fff;
}
}
}
}
.signup{
line-height: 50px;
color: #fff;
font-size: 14px;
font-weight: 700;
}
}
}
&.basic{
.pricing{
width:8.8%;
display:inline-block;
background:#ebebeb;
padding-top: 20px;
margin-right: 2%;
&.most-popular{
position:relative;
top:8px;
padding-top:25px;
.price .span-2{
margin-bottom:36px;
}
}
.price{
[class*="span"]{
width:100%;
margin:0;
p{
display:inline-block;
font-size:24px;
margin:0;
}
}
.span-1{
font-size:36px;
}
.span-2{
font-size: 11px;
color: #909090;
margin-bottom: 25px;
}
}
.plan{
display: inline-block;
width: 100%;
padding: 11px 0;
font-size: 14px;
position: relative;
a{
color:#fff;
}
&:before{
content: "";
width: 12px;
height: 12px;
left: 50%;
margin-left:-6px;
display: block;
position: absolute;
transform:rotate(135deg);
top: -6px;
}
}
}
}
}
/* Latest News */
.sw-latestnews:before, .sw-latestnews:after {
content: "";
display: table;
line-height: 0;
}
.sw-latestnews:after {
clear: both;
}
.sw-latestnews{
margin-bottom: 0;
display: block;
text-align: center;
overflow: hidden;
text-align: left;
}
.rtl .sw-latestnews{
text-align:right;
}
.sw-latest-news h3{
margin-bottom:20px;
}
.sw-latest-news .widget-title-sidebar h3{
margin-bottom:10px;
white-space:nowrap;
}
.sw-latestnews .sw-meta{
border-bottom: 1px dashed #C8C8C8;
color: #A8A8A8;
display: inline-block;
font-size: 11px;
line-height: 30px;
width: 100%;
margin-bottom: 10px;
}
.sw-latestnews .sw-thumb a{
display: block;
}
.sw-latestnews .sw-thumb a:after{
border-color: rgba(255, 255, 255, 0.5);
border-style: solid;
border-width: 8px;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
opacity: 0;
filter:Alpha(opacity=0); /* IE8 and earlier */
z-index: 5;
transition:All 0.5s ease;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.sw-latestnews .sw-thumb:hover a:after{
opacity: 1;
filter:Alpha(opacity=1); /* IE8 and earlier */
}
.sw-latestnews .sw-meta > div{
float: left;
margin-right: 20px;
}
.rtl .sw-latestnews .sw-meta > div{
float:right;
margin-right:0;
}
.sw-latestnews .sw-content{
font-size: 12px;
a{
color: @color;
&:hover{
color: darken(@color, 10);
}
}
}
.sw-latestnews div.sw-widget-item{
display: block;
text-align: left;
margin-bottom: 40px !important;
}
.latest-blog div.sw-widget-item +div{
margin-bottom: 0;
}
.rtl .sw-latestnews .sw-widget-item{
text-align:right;
}
.sw-latestnews .sw-item-inner{
display: inline-block;
width: 100%;
}
.sw-latestnews .sw-widget-item:first-child{
margin-left: 0;
}
.sw-latestnews h4 {
margin: 0;
font-weight:normal;
color:#686868;
line-height: 15px;
}
.sw-latestnews h4 a{
color:#686868;
}
.sw-latestnews .sw-thumb{
float: left;
width: 300px;
overflow: hidden;
margin: 0 20px 0 0;
position: relative;
}
.latest-blog .sw-thumb {
margin-bottom: 15px;
}
.rtl .sw-latestnews .sw-thumb{
float:right;
margin-right:0;
margin-left: 20px;
}
.sw-latestnews .sw-caption{
overflow: hidden;
}
.sw-latestnews .sw-thumb img {
width: 100%;
position: relative;
z-index:1;
.transition(all 0.3s ease);
.scale(1);
}
.sw-latestnews .sw-thumb:hover img{
z-index:2;
.scale(1.1);
}
/* End Latest News */
.latest-blog{
padding:0;
overflow:visible;
.sw-widget-item{
margin-bottom:0
}
.carousel-indicators{
background:@white;
top:-47px;
right:0;
left: auto;
bottom: auto;
width: auto;
margin: 0;
.rtl &{
left:0;
right:auto;
}
.active{
background:@color;
}
li{
width:16px;
height:16px;
display:inline-block;
border-radius:50%;
background:#e9e9e9;
margin-left:3px;
margin-right:0px;
border: 2px solid #fff;
}
}
.carousel{
padding:0;
margin-bottom:0;
}
.sw-thumb{
width:100%;
margin-right:0;
a{
display:block;
position:relative;
&:hover{
img{
.opacity(40);
}
&:after{
top:50%;
margin-top:-20px;
.transition(all 0.4s linear);
opacity:1;
.rotate(360deg);
}
}
&:after{
content:'\f002';
font-family:'FontAwesome';
color:#fff;
background:#686868;
border:solid 7px rgba(255,255,255,0.4);
background-clip:padding-box;
border-radius:50%;
display:block;
width:40px;
height:40px;
text-align:center;
line-height: 40px;
font-size:24px;
left:50%;
margin-left:-28px;
top:10px;
position:absolute;
z-index:6;
opacity:0;
.transition(all 0.4s linear);
box-sizing: content-box;
-moz-box-sizing: content-box;
.rtl &{
left:auto;
right:50%;
margin-right:-20px;
margin-left:0;
}
}
}
}
h4{
font-weight:normal;
a{
color:#686868;
&:hover{
color:@color;
}
}
}
.sw-caption{
width:100%;
}
.sw-content{
line-height:18px;
}
}
/* tab */
.tabs-below > .nav-tabs {
border-top: 1px solid #DDDDDD;
border-bottom: none;
}
.tabs-below > .nav-tabs > li {
margin-bottom: 0;
margin-top: -1px;
}
.tabs-below > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {
border-bottom-color: rgba(0, 0, 0, 0);
border-top-color: #DDDDDD;
}
.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {
border-color: rgba(0, 0, 0, 0) #DDDDDD #DDDDDD;
}
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a {
margin-bottom: 3px;
margin-right: 0;
min-width: 74px;
}
.tabs-left > .nav-tabs {
border-right: 1px solid #DDDDDD;
float: left;
margin-right: 19px;
}
.tabs-left > .nav-tabs > li > a {
border-radius: 4px 0 0 4px;
margin-right: -1px;
}
.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {
border-color: #EEEEEE #DDDDDD #EEEEEE #EEEEEE;
}
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
border-color: #DDDDDD rgba(0, 0, 0, 0) #DDDDDD #DDDDDD;
}
.tabs-right > .nav-tabs {
border-left: 1px solid #DDDDDD;
float: right;
margin-left: 19px;
}
.tabs-right > .nav-tabs > li > a {
border-radius: 0 4px 4px 0;
margin-left: -1px;
}
.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {
border-color: #EEEEEE #EEEEEE #EEEEEE #DDDDDD;
}
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
border-color: #DDDDDD #DDDDDD #DDDDDD rgba(0, 0, 0, 0);
}
/*** Alert ***/
.alert {
border-radius:0;
}
.alert-bg-red{
background-color: #e74847;
}
.alert-bg-blue{
background-color: #3f9dd3;
}
.alert-bg-orange{
background-color:#fb9220;
}
.alert-bg-green{
background-color:#8dbe3f;
}
.alert-bg-violet{
background-color:#a44ec4;
}
.alert-none-border{
padding:15px 0;
}
/*** button ***/
.btn {
border-radius:0;
}
.btn-red-border{
border:4px solid #e74847;
color:#e74847;
&:hover{
background:#e74847;
color:#fff;
}
}
.btn-blue-border{
border:4px solid #3f9dd3;
color:#3f9dd3;
&:hover{
background:#3f9dd3;
color:#fff;
}
}
.btn-orange-border{
border:4px solid #fb9220;
color:#fb9220;
&:hover{
background:#fb9220;
color:#fff;
}
}
.btn-green-border{
border:4px solid #8dbe3f;
color:#8dbe3f;
&:hover{
background:#8dbe3f;
color:#fff;
}
}
.btn-violet-border{
border:4px solid #a44ec4;
color:#a44ec4;
&:hover{
background:#a44ec4;
color:#fff;
}
}
/*** Video ***/
iframe{
border:none;
margin-bottom:10px;
max-width:100%;
}
/** Post Slide ***/
#yt_post_slide{
.carousel-inner{
.item{
.carousel-caption{
background: rgba(0,0,0,0.5);
text-align:left;
text-shadow:none;
&.carousel-caption-bottom{
left: 0;
right:0;
bottom:0;
width:100%;
padding: 15px 20px;
}
&.carousel-caption-right{
right: 0;
width: 33.333%;
height: 100%;
left: auto;
top: 0;
padding: 30px 10px;
}
&.carousel-caption-left{
left: 0;
width: 33.333%;
height: 100%;
top: 0;
padding: 30px 10px;
}
&.carousel-caption-out{
background: none;
width: 100%;
left: 0;
bottom: 0px;
position: relative;
color:#666;
.carousel-caption-inner{
a{
color:#444;
font-size:14px;
font-weight:600;
&:hover{
color:@color;
}
}
}
}
.carousel-caption-inner{
a {
font-size:20px;
color:#fff;
&:hover{
color:@color;
}
}
.item-description{
margin-top:10px;
}
}
}
a img {
width:100%;
}
}
}
.carousel-cl{
.carousel-control{
width:42px;
height:42px;
top: 43%;
&.left{
background: url(../assets/img/short-left.png) no-repeat center -1px rgba(0,0,0,0.5);
}
&.right{
background: url(../assets/img/short-right.png) no-repeat center -1px rgba(0,0,0,0.5);
}
}
&.carousel-cl-right{
.carousel-control.right{
right:33.33%;
}
}
&.carousel-cl-left{
.carousel-control.left{
left:33.33%;
}
}
&.carousel-cl-out{
.carousel-control{
top:29%;
}
}
}
}
/*** lightbox and frames ***/
a img {
.lightbox &{
margin-bottom: 20px;
}
.lightbox-border1 &{
border:8px solid @color;
}
.lightbox-border2 &{
border:1px solid #e2e2e2;
padding:8px;
background:#fff;
}
.lightbox-border3 &{
border-radius:10px;
}
.lightbox-circle-normal &{
border-radius: 50%;
width: 210px;
height: 210px;
}
.lightbox-circle-border1 &{
border-radius: 50%;
width: 210px;
height: 210px;
border:5px solid @color;
}
.lightbox-circle-border2 &{
border-radius: 50%;
width: 210px;
height: 210px;
border:1px solid #e2e2e2;
padding:10px;
background:#fff;
}
}
/*** Heading tags ***/
.with-icon{
font-size:18px;
[class^="icon-"], [class*=" icon-"]{
margin:5px 13px 5px 0px;
}
}
.with-bg{
font-size:18px;
padding:13px 35px;
}
/*** Testimonial ***/
.testimonial-slider{
.carousel-inner{
color:#666;
.client-comment{
font-style: italic;
margin-bottom:20px;
}
.client-say-info {
.image-client {
width: 65px;
float: left;
}
.name-client {
margin-left: 78px;
padding-top: 10px;
h2 {
font-size:14px;
font-weight: 700;
margin:0;
a {
font-weight: bold;
color: #ea3a3c;
display: inline-block;
padding: 5px 0px;
}
}
}
}
.item {
padding:20px 0;
}
}
.carousel-indicators{
background-color: #eeeeee;
margin: 0px -18px 0;
padding: 5px 0px;
position: relative;
text-align: center;
left: 0;
width: auto;
bottom:0;
li{
width: 10px;
height: 10px;
margin: 0 2px;
border: 1px solid #eeeeee;
background-color: #bbbbbb;
}
.active {
background-color: #999999;
border: 1px solid #fff;
}
}
&.indicators_up {
.carousel-indicators {
background:none;
padding: 5px 0px;
margin: 0 auto;
position: relative;
text-align: center;
list-style:none;
left: inherit;
li {
width:10px;
height:10px;
margin:0 2px;
display: inline-block;
border-radius: 50%;
border:1px solid #eee;
background-color:#bbb;
}
.active {
background-color:@color;
border: 1px solid #fff;
}
}
.carousel-inner {
text-align:center;
}
}
}
.testimonial_style2{
text-align:center;
padding:42px 133px 15px;
border-top:1px solid #dedede;
border-bottom:1px solid #dedede;
}
.testimonial_bg {
text-align:center;
padding: 35px 75px 77px;
color:#fff;
max-height: 350px;
&:before{
content: '';
background: url(../assets/img/bgt.png);
top: 0;
bottom: 0;
left: -9999px;
right: -9999px;
position: absolute;
z-index: -9999;
}
img {
border-radius:50%;
width:90px;
height:90px;
padding:5px;
background:#fff;
display: inline-block;
}
.testimonial_content{
padding: 82px 22px 15px;
}
}
.testimonial_content {
padding:15px 22px;
position:relative;
font-style: italic;
.testimonial_style1 &{
padding: 15px 39px;
background: #f0f0f0;
margin-bottom: 20px;
border-radius:5px;
&:after{
content: "aaaa";
width: 27px;
top: 31px;
left: 48px;
color: rgba(0,0,0,0);
height: 17px;
position: relative;
background: url(../assets/img/arrowt.png);
}
}
.icon-quote-left,.icon-quote-right{
color:#c4c4c4;
position: absolute;
font-size: 16px;
left: 10px;
top: 7px;
}
.icon-quote-right{
right: 0px;
top: 13px;
left: auto;
}
}
.testimonial_meta{
padding: 0 30px;
img {
border-radius:50%;
width:90px;
height:90px;
padding:5px;
background:#ededed;
display: inline-block;
}
}
.testimonial_info{
.testimonial_style1 &{
vertical-align: middle;
display: inline-block;
ul{
margin-left:22px;
li:first-child{
font-size: 16px;
padding-bottom: 5px;
}
}
}
.testimonial_style2 &{
ul {
li{
color:@color;
}
}
}
ul{
list-style:none;
margin-bottom: 0;
}
}
.widget-testimonial{
.customersay{
border: 1px solid #c0c0c0;
position:relative;
.custom-title{
font-size:18px;
font-weight:bold;
top: -10px;
left: 20px;
padding: 0 20px;
background: #fff;
position:absolute;
font-weight:normal;
}
.carousel-inner{
.item{
padding: 30px 5px 20px 5px;
.item-content{
.item-desc{
line-height:22px;
color:#666;
position:relative;
padding-left:23px;
text-align: justify;
&:before{
content: "";
background: url('../assets/img/note-client.png') no-repeat;
font-size:22px;
position:absolute;
top:4px;
left:0;
width: 16px;
height: 12px;
}
}
}
.item-image {
display: none;
}
.item-info{
margin-top:10px;
h4 {
color:#999;
.author{
color:@color;
font-size: 16px;
}
}
}
}
}
.carousel-cl {
position:absolute;
top:-20px;
right:30px;
padding:0 20px;
width:100px;
height:32px;
background:#fff;
a {
display:block;
width:35px !important;
height:35px !important;
.border-radius(50%);
margin:0 10px;
border:3px solid #e4e4e4;
background:#fff;
color:#e4e4e4;
text-shadow:none;
position: absolute;
top: 0px;
opacity: 1;
font-weight: bold;
&:hover {
border-color: @color;
}
}
.left{
&:before{
content:"\f104";
font-family:FontAwesome;
line-height: 26px;
}
&:hover{
&:before{ color:@color;}
}
}
.right{
&:before{
content:"\f105";
font-family:FontAwesome;
line-height: 26px;
}
&:hover{
&:before{ color:@color;}
}
}
}
}
}
/*** Personnel ***/
.personnel_style1,.personnel_style2{
text-align:center;
position: relative;
display: inline-block;
}
.personnel_img{
position:relative;
display: inline-block;
margin-bottom: 7px;
.personnel_style2 &{
width:90px;
height:90px;
position:absolute;
left:34%;
img {
height:100%;
border-radius:50%;
padding:6px;
background:#ededed;
&:hover{
}
}
}
ul{
position:absolute;
bottom: 10px;
left: 30%;
list-style:none;
transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
li{
float:left;
padding-right:7px;
}
}
&:hover {
ul{
transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
}
}
}
.personnel_meta{
.personnel_style2 &{
display: inline-block;
margin-top: 42px;
padding-top: 57px;
padding-bottom: 10px;
background: #ededed;
float: left;
}
ul{
list-style:none;
li{
&:first-child{
font-size:16px;
color:@color;
}
&:nth-child(2){
font-weight:bold;
}
}
}
}
.social {
.personnel_style2 & {
ul {
li {
display: inline-block;
margin-right:7px;
}
}
}
}
/*** Divider ***/
.rpl-title-wrapper{
text-align:center;
h4{
background: #fff;
padding: 0 5px;
position: relative;
display: inline-block;
}
}
/*** Divider ***/
table {
text-align: center;
}
tbody {
tr {
border-bottom:1px solid #adadad;
.table-style2 & {
border:none;
&:nth-child(2n+0){
background-color:#e6e6e6;
}
&:nth-child(2n+1){
background-color:#f2f2f2;
}
}
td {
padding:15px;
font-size:14px;
}
&.th {
background-color:@color !important;
border-bottom:none;
td{
padding: 16px 54px;
font-size: 16px;
color: #fff;
}
}
}
}
/** Skillbars - 1.3 **/
.yt-skillbar{
position: relative;
display: block;
margin-bottom: 15px;
width: 50%;
background: #a1a1a1;
height: 32px;
.transition(0.4s linear);
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-ms-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
&.small{
display:inline-block;
height:12px;
}
}
.yt-skillbar-title{
position: absolute;
top: 0;
left: 0;
font-weight: bold;
font-size: 13px;
color: #fff;
span{
display: block;
padding: 0 10px;
height: 32px;
line-height: 32px;
}
&.small{
position: relative;
display: inline-block;
float: left;
margin-right: 20px;
span {
height: 12px;
line-height: 12px;
color: #666;
font-size: 14px;
font-weight: 400;
padding: 0;
}
}
}
.yt-skillbar-bar {
height: 32px;
width: 0px;
background:@color;
.small &{
height:12px;
}
}
.yt-skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 14px;
font-weight:bold;
height: 32px;
line-height: 32px;
color: #fff;
.small &{
height:12px;
height: 12px;
top: -11px;
right: -35px;
color:#666;
}
}
/**** circle skill ****/
.circliful {
position: relative;
display:inline-block;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
font-weight: bold;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
/**** quote ****/
.quote-full {
font-style:italic;
}
.quote-bg{
padding: 20px;
background: #e1e1e1;
width: 100%;
font-style: italic;
}
.quote-border{
border:1px solid #c3c3c3;
padding:20px;
}
.quote-left{
float:left;
width:50%;
}
/*** Tooltip ***/
a.tooltips {
position: relative;
color:@color666;
font-size:14px;
font-weight:bold;
p {
padding: 0 0 100px;
}
strong {
line-height: 30px;
width: 218px;
margin: -10px -10px 10px;
padding: 0px 10px 0px;
float:left;
color:#666;
}
&:hover span{
opacity: 1;
text-decoration: none;
visibility: visible;
overflow: visible;
margin-top: 50px;
display: inline;
margin-left: 10px;
&.right{
margin-left:60px;
margin-top:116px;
}
&.left {
margin-left:-36px;
margin-top:116px;
}
}
span {
background:#fff;
font-weight:400;
font-family:arial;
color:#666;
border:1px solid #bdbdbd;
width: 220px;
top:-147px;
left:60px;
padding: 10px;
margin-top: 0;
margin-left: 85px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-size: 12px;
.border-radius(3px);
-webkit-transition-property: opacity, margin-top, visibility, margin-left;
-webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-property: opacity, margin-top, visibility, margin-left;
transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
&.tooltip-style2,&.tooltip-style2 b{
background:#e0e0e0;
}
&.tooltip-style3{
strong {
border-bottom:1px solid #bdbdbd;
}
}
&.tooltip-style4{
strong{
color:#fff;
background:@color;
}
}
&.tooltip-style5,&.tooltip-style5 b{
background:@color;
color:#fff;
strong{
background:#fff;
}
}
&.right b{
margin-left: -18px;
margin-top: -30px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
&.left b{
margin-left: 201px;
margin-top: -30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
b {
width: 15px;
height: 15px;
margin-left: 85px;
margin-top: 3px;
display: block;
position: absolute;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background:#fff;
border-top: 1px solid #bdbdbd;
border-right: 1px solid #bdbdbd;
}
}
}
/*** counter box ***/
ul {
.counter-border &,.counter-bg &{
list-style:none;
float:left;
width:100%;
text-align:center;
max-width: 170px;
padding: 28px 0px 22px;
li{
&.counterbox-number{
font-size:36px;
font-weight:700;
}
}
}
.counter-border &{
border: 1px solid #bdbdbd;
li{
&.counterbox-number{
color:@color;
[class^="icon-"], [class*=" icon-"] {
color:#444;
}
}
}
}
.counter-bg &{
background:@color;
li{
&.counterbox-number,&.type{
color:#fff;
}
}
}
}
/*** socials ***/
#socials {
width: 40px;
height: 40px;
padding: 7px;
display: inline-block;
font-size: 19px;
margin-right:10px;
text-align: center;
transform: translateZ(0);
transition-duration: 0.3s;
transition-property: color, background-color;
&.socials-style1,&.socials-style3,&.socials-style5{
border: 1px solid #bdbdbd;
&:hover{
background-color: #a3a3a3;
a{
color: white;
}
}
a{
color:#a3a3a3;
}
}
&.socials-style2,&.socials-style4,&.socials-style6{
&:hover{
background:@color !important;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
}
a{
color:#fff;
}
}
&.socials-style3,&.socials-style4{
border-radius:50%;
}
&.socials-style5,&.socials-style6{
border-radius:3px;
}
}
/*** tabs ***/
.tabbable {
&.tabs-icon {
.nav.nav-tabs > li > a {
padding: 0 10px;
}
.nav.nav-tabs > li.active a:before{
margin-left: 84%;
left: 11%;
}
}
.nav{
&.nav-tabs{
background: #fff;
margin-left:0;
border-bottom:0;
> li {
margin-bottom:0px;
> a{
margin-right: 0px;
font-size:16px;
font-weight: 700;
padding: 0 20px;
&:hover{
border-color:none;
}
}
}
li{
margin-right:0px;
position:relative;
border-right:1px solid #ddd;
border-top:1px solid #ddd;
&:first-child{border-left:1px solid #ddd};
&.active {
a {
background:@color;
color:#fff;
border: 1px solid @color;
}
&:first-child{border-left:1px solid @color; border-top: 1px solid @color;};
}
a{
.border-radius(0px);
line-height:40px;
background:#fff;
}
}
}
}
}
.tabs-left {
.nav {
&.nav-tabs{
border:1px solid @color;
> li{
margin-bottom: -3px;
border-right:none;
&:first-child{
border:none;
}
&.active {
a {
&:before{
margin-left: 73%;
margin-top: 13px;
left: 22%;
}
}
}
}
}
}
}
/****** Accordion ******/
.panel-group{
display: block;
float: left;
&.collapses-style2{
.panel {
display: block;
float: left;
border-bottom:1px solid #ddd;
border-left:none;
border-right:none;
border-top:none;
background: #eee;
width:100%;
&:last-child{
border-bottom:none;
}
.collapsed .panel-default-box {
background-color: #fff;
}
.panel-default-box {
display: inline-block;
float: left;
margin: 0;
padding: 0;
background-color: #eee;
width: 100%;
}
a{
span{
background:url(../assets/img/minut.png) center center no-repeat ;
float:left;
}
.panel-heading{
background:#eee !important;
color:#444;
font-size:12px;
font-weight:700;
margin: 0;
float:left;
}
&:hover {
.panel-heading{
color:@color;
}
}
}
.panel-collapse.in{
background:#eee;
}
.panel-body{
padding: 0px 10px 10px 40px;
color:#666;
display: block
}
p{
display:none;
}
}
.panel + .panel{
margin-top: 0px;
}
}
&.collapses-style3{
.panel{
margin-bottom:30px;
a{
span{
float:left;
}
&.collapsed{
.panel-heading{
background:#f2f2f2 !important;
}
}
}
}
}
.panel{
box-shadow:none;
border-radius:0!important;
a{
span{
background: url(../assets/img/minus.png) center center no-repeat;
display: block;
float: right;
padding: 10px;
margin: 10px;
}
&.collapsed {
span{
background: url(../assets/img/plus.png) center center no-repeat;
}
.panel-heading {
color:#666;
background:#fff !important;
}
}
}
}
}
.panel-heading {
background-color:@color !important;
border-radius:0 !important;
border-color:#e7e7e7;
color:#fff;
font-size:16px;
padding: 12px 0px !important;
}
/************* slider *********/
.ya-slider{
&.carousel-style2 {
.carousel-control{
top: 59%;
}
}
&.carousel-style3{
.box-recommend-title{
position: relative;
left: 50%;
display: inline-block;
margin-left: -110px;
.carousel-control{
top:0px;
width:30px;
height:30px;
border-radius:3px;
position: relative;
display: inline-block;
padding: 0px 7px;
}
h3 {
display: inline-block;
&:after{
margin-left: 33%;
}
}
}
.testimonial_meta{
margin-bottom:30px;
}
}
&.carousel-style4{
.box-recommend-title{
position: absolute;
top: -5px;
padding: 10px;
background: @color;
color: #fff;
left: 50%;
margin-left:-85px;
z-index: 6969;
h3 {
margin-bottom:0;
&:after{
margin-top: 0px;
}
}
}
.carousel-indicators{
top: 50px;
left: 50%;
margin-left:-16px;
position:absolute;
}
}
&.carousel-style5{
.box-recommend-title{
position: absolute;
top: 155px;
left: 50%;
margin-left: -115px;
h3{
margin-bottom:0;
color:#fff;
&:after{
margin-top:0;
border:none;
}
}
}
.carousel-indicators{
position: absolute;
top: 188px;
left: 50%;
margin-left: -19px;
li{
background:#fff !important;
}
.active{
border:1px solid #fff;
background:rgba(255,255,255,0) !important;
}
}
.carousel-inner {
overflow: visible;
}
}
.carousel-control{
width:38px;
height:38px;
.border-radius(50%);
text-shadow:none;
border:1px solid #dcdcdc;
background:#fff;
opacity:1;
top:28%;
z-index:6969;
i {
&:before {
color:#dcdcdc;
}
}
&.left {
left:-18px;
padding: 4px 0px;
}
&.right{
right:-18px;
padding: 4px 11px;
}
&:hover{
background:@color;
i {
&:before {
color:#fff;
}
}
}
}
}
/*****************
fontawesome
*****************/
.icon-3x{
font-size:40px;
}
.circle-icon{
display:inline-block;
background:#333;
text-align:center;
border-radius:50%;
&.icon-3x{
width:70px;
height:70px;
line-height:70px;
}
&.icon-2x{
width:35px;
height:35px;
line-height:35px;
font-size:18px;
}
&.icon-1x{
width: 18px;
height: 18px;
line-height: 18px;
font-size: 10px;
}
}
/***********************************************************************************************************************
* Best Sale, Related product
************************************************************************************************************************/
.carousel-inner{
.sw-best-seller-product.block &,.sw-related-product.block &{
margin: 12px 0px;
}
.sw-related-product.block &{
border: 1px solid #ddd;
margin: 0;
padding: 30px 0 22px 0;
border-top: 0;
margin-bottom:30px;
}
.bs-item {
padding: 0 0 11px 0px;
border-bottom: 1px solid #ddd;
margin-bottom: 11px;
display: inline-block;
width: 100%;
.bs-item-inner {
.item-img{
width: 80px;
float: left;
border:0;
}
.item-content{
margin-left: 90px;
text-align:left;
}
}
&:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
border: none;
}
}
}
/***********************************************************************************************************************
*Nav Title Style
************************************************************************************************************************/
.block-title {
position: relative;
background: #eee;
border-bottom: 1px solid @color;
height: 40px;
strong {
line-height: 42px;
padding-left: 50px;
font-size: 116.67%;
text-transform: uppercase;
}
&.title1 {
background:none;
height:32px;
.nav-left-product {
display:none;
}
h2 span {
font-size:15px;
font-weight:700;
text-transform:uppercase;
}
}
}
/***********************************************************************************************************************
*Our Brand
************************************************************************************************************************/
.block-brand{
.view-all-brand {
display: inline-block;
float: right;
margin: 11px 11px 0px 0px;
&:after {
content: "\f0da";
font-family: FontAwesome;
font-size: 12px;
margin-left: 5px;
}
}
.brand-wrapper{
margin: 0px -19px -1px -18px;
line-height: 0px;
ul {
display: inline-block;
width: 100%;
list-style:none;
margin:0;
li {
float: left;
width: 50%;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
a img {
width: 100%;
}
}
}
}
}
.sw-partner-container-slider {
.slick-initialized .slick-slide {
padding:0;
&:hover {
border: 0px;
}
}
}
/***********************************************************************************************************************
* sw woo slider shortcode
************************************************************************************************************************/
.sw-woo-container-slider{
position:relative;
margin-bottom: 35px;
z-index: 1;
.lastest_deal3 &{border-top:0}
.img-right{
.left-child {
float: right;
}
}
.left-child {
float: left;
border-right: 0;
.cat-list{
padding: 8px 18px;
margin: 0;
list-style:none;
li.item {
padding: 2px 0px;
a:before {
content: "\f0da";
margin-right: 3px;
font-family: fontawesome;
}
}
}
.rtl & {
float:right;
border-left:0;
.cat-list li a{
&:before {display:none;}
&:after {
content: "\F0D9";
margin-left: 3px;
font-family: fontawesome;
}
}
}
}
.right-child {
float:left;
width: 79.31%;
.rtl & {
float:right;
}
.box-layout &{
width: 78.31%;
}
}
.category-wrap-cat {
display: inline-block;
float: right;
height: 33px;
border-right: 1px solid #ddd;
position: relative;
top: 4px;
padding-top: 7px;
.cat-list {
list-style:none;
li {
display: inline-block;
float: left;
margin-left: -1px;
a {
line-height: 22px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
display: inline-block;
padding: 0px 15px;
}
&:last-child{
a {
border-right: none;
}
}
}
}
}
.slider{
position: relative;
z-index: 100;
border:1px solid #ddd;
border-top: 0;
.countdown-slider&{
border: 1px solid #ddd;
}
.vpo-wrap .vp .item{
&:hover{
border:1px solid #aaa;
.item-wrap{
.item-content{
.item-bottom-grid{
.add_to_wishlist,.compare-button .compare,.add_to_cart_button,.sm_quickview_handler{
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
}
}
}
}
.item-wrap {
width: 100%;
position: relative;
background: none;
padding: 15px;
overflow: hidden;
}
}
}
&.woo-slider-child-cate-left {
border-top: 0px solid #ddd;
.resp-slider-wrapper {
border: 1px solid #ddd;
margin-top:30px;
}
.slider {
float: left;
width: 79.31%;
border:0;
margin-top:0px;
border-left:1px solid #ddd;
}
}
}
/***********************************************************************************************************************
* sw woo countdownt shortcode
************************************************************************************************************************/
.sw-countdown-product {
position: relative;
display: inline-block;
width: 100%;
margin-bottom:35px!important;
.block-title {
margin: -5px 0px 30px 0px;
}
&:hover {
button {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}
}
button{
z-index:999;
opacity:1;
border-radius: 2px;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
.transition(0.3s);
position: absolute;
top: 50%;
width: 39px;
height: 39px;
text-indent: -9999px;
&.slick-prev{
background: url(../assets/img/tab_pre.png) no-repeat center center #fff;
border: 1px solid #dbdbdb;
left: 0px;
&:hover{
background: url(../assets/img/hover_pre.png) no-repeat center center @color;
border-color: @color;
}
}
&.slick-next{
background: url(../assets/img/tab_next.png) no-repeat center center #fff;
border: 1px solid #dbdbdb;
right: 0px;
left: auto;
&:hover{
background: url(../assets/img/hover_next.png) no-repeat center center @color;
border-color: @color;
}
}
}
.item-wrap{
padding: 15px;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
&:hover{
.product-countdown{
.countdown-section{
background-color:@color;
}
}
.item-bottom-grid{
.add_to_wishlist,.compare-button .compare,.add_to_cart_button,.sm_quickview_handler{
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
}
}
.product-countdown{
.countdown-section {
width: 36px;
height: 40px;
text-align: center;
background-color: #999999;
display: inline-block;
color: #fff;
padding: 5px 0px 2px;
line-height: 15px;
.transition(0.3s);
margin-right:4px;
&:last-child{
margin-right:0;
}
.countdown-amount{
font-size: 116.67%;
font-weight: bold;
display:inline-block;
width: 100%;
}
.countdown-period{
font-size: 83.33%;
text-transform: uppercase;
width: 100%;
}
}
}
}
}
/***********************************************************************************************************************
/***********************************************************************************************************************
* Ya Post
************************************************************************************************************************/
.sw-member{
display: inline-block;
width: 100%;
margin-bottom: 30px;
.carousel{
ol.carousel-indicators{
top: 0;
bottom: inherit;
left: 0;
margin: 0;
width: 100%;
padding: 0;
position:absolute;
text-align:center;
li{
.border-radius(100%);
background-color: #d7d7d5;
width: 14px !important;
height: 14px !important;
&.active, &:hover {
background-color: @color;
}
}
}
.carousel-inner{
margin-top: 48px;
clear: both;
display: inline-block;
.item{
.item-member-wrappers{
.item-content{
.member-thumb{
position: relative;
overflow: hidden;
&:before {
position: absolute;
top: 0;
width: 100%;
height: 0;
background-color: #000;
opacity: 0.3;
content: "";
.transition(all 0.3s ease-out);
pointer-events: none;
}
&:hover {
&:before {
.transition(all 0.3s ease-out);
height: 100%
}
}
a {
img{
width:100%;
}
}
.hover-social{
.social{
display: inline-block;
width: 25px;
height: 25px;
background-position: left top;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
bottom: -30px;
margin-left: -12px;
left: 50%;
a{
display: inline-block;
width: 25px;
height: 25px;
}
}
.twitter{
background: url("../assets/img/ic_twitter.png") no-repeat;
.transition(all 0.3s ease);
margin-left: -43px;
}
.facebook{
background: url("../assets/img/ic_facebook.png") no-repeat;
.transition(all 0.5s ease);
}
.flickr{
background: url("../assets/img/ic_flickr.png") no-repeat;
.transition(all 0.7s ease);
margin: 0 18px;
}
}
&:hover{
.hover-social{
.social{
bottom: 30px;
}
}
}
}
.member-content{
display: inline-block;
width: 100%;
text-align: center;
h5{
margin-top: 13px;
a{
font-size: 16px;
color: @color;
}
}
.span{
margin-left:0;
}
}
}
}
}
}
}
}
/**
* Portfolio
**/
.portfolio-desc{
margin-bottom: 23px;
h1{
font-size: 20px;
text-transform: uppercase;
margin-bottom: 10px;
}
.p-desc{
font-size: 13px;
color: #666;
margin-bottom: 0;
}
}
.ya-portfolio {
.portfolio-tab{
ul {
margin-bottom: 27px;
display: inline-block;
overflow: hidden;
margin-left: 0;
li {
float: left;
cursor: pointer;
display: inline-block;
font-size:14px;
margin-right: 5px;
line-height: 34px;
padding: 0 16px;
border-radius: 3px;
background: #fff;
.rtl &{
float:right;
}
&.selected{
background: @color;
color: #fff;
}
}
}
}
.btn-loadmore{
padding: 0;
cursor: pointer;
text-align: center;
min-height: 40px;
margin-bottom: 30px;
.transition( all 0.3s ease-out );
&.btn-loading{
background: url(../assets/img/loadingp.gif) no-repeat center center;
border-color: transparent;
background-size: 40px 40px;
.des-load{
border: 0;
display:none;
&:before{
content: "";
}
}
}
.des-load{
font-size: 14px;
padding: 10px 20px;
display: inline-block;
line-height: normal;
background: @color;
font-weight:bold;
color: #fff;
border-radius: 3px;
margin-top: 20px;
&:hover{
opacity: 0.8;
}
}
.des-load:before{
content: attr(data-label);
}
&.btn-loaded .des-load:before{
content: attr(data-label-loaded);
}
}
.portfolio-container{
overflow: hidden;
ul.portfolio-content{
width: 100%;
margin: 0;
&:after {
content: '';
display: block;
clear: both;
}
>li{
margin-bottom: 30px;
overflow: hidden;
border-radius: 0;
position: relative;
&.grid-item{
padding: 0 15px;
float: left;
}
.portfolio-item-inner{
//position: relative;
overflow: hidden;
.portfolio-in{
position: relative;
z-index:1;
a.portfolio-img{
img{
&:hover{
opacity: 1;
}
}
}
.p-item-content{
position:absolute;
z-index:10;
top:50%;
margin-top:-10%;
width:100%;
text-align:center;
.p-item{
text-align:center;
box-shadow: 0 0 1px 1px #fff;
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
font-size: 14px;
color: #fff;
margin: 0 5px;
.opacity(0);
.transition(0.5s);
&.item-more{
right:50%;
left:auto;
//margin-right:5%;
transform: translate3d(-300px, 0, 0);
}
&.item-popup{
transform: translate3d(300px, 0, 0);
left:50%;
right:auto;
//margin-left:5%;
}
&:hover{
color: @color;
box-shadow: 0 0 1px 1px @color;
}
}
.p-item-title{
display:block;
margin-bottom:10px;
background: none;
font-size: 16px;
font-weight: bold;
transform: translate3d(0, -100px, 0);
.opacity(0);
.transition(0.3s);
color: #fff;
&:hover{
color: @color;
}
}
}
&:hover{
.p-item-content{
.p-item{
.opacity(1);
transform: translate3d(0, 0, 0);
}
.p-item-title{
.opacity(1);
transform: translate3d(0, 0, 0);
}
}
&:before{
.opacity(1);
.scale(1);
}
}
&:before{
content:'';
background:rgba(0, 0, 0, 0.5);
width:100%;
height:100%;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
.opacity(0);
.scale(0);
.transition(0.3s);
}
}
}
&.portfolio-item{
width: 33.332%;
margin: 0;
padding: 0;
border: 0;
img{
width: 100%;
}
&.p-double-width{
width: 40%;
}
:after {
height: 0;
clear: both;
content: " ";
font-size: 0;
min-height: 0;
display: block;
visibility: hidden;
}
}
}
}
}
}
/* single portfolio */
.portfolio{
.portfolio-top{
background: #f4f4f4;
padding: 20px;
margin-bottom: 30px;
h1{
font-size: 18px;
margin-bottom: 20px;
}
.portfolio-content{
.single-thumbnail{
width: 60%;
margin-right: 30px;
}
.single-portfolio-content{
overflow: hidden;
h3{
font-size: 16px;
border-bottom: 4px double #ccc;
padding-bottom: 10px;
margin-bottom: 20px;
}
.single-description{
margin-bottom: 25px;
}
.portfolio-meta{
.pmeta-item{
margin-bottom: 10px;
span{
font-family: RobotoBold;
display: inline-block;
min-width: 120px;
}
}
}
}
}
}
.comment-form{
.comment-single{
border-bottom: 0;
}
}
}
.related-portfolio{
padding: 20px;
margin-bottom: 30px;
h2.p-title{
padding: 0 15px;
font-size: 18px;
}
.related-items{
.related-item{
padding: 0 15px;
img{
margin-bottom: 15px;
}
h4{
font-size: 16px;
margin: 0;
}
}
}
}
.p-title{
font-size: 16px;
margin-bottom: 20px;
&:after{
content: "";
background: #ffbb45;
width: 40px;
height: 1px;
margin-top: 7px;
display: block;
}
}
.masonry{
.btn-loadmore{
.des-load{
margin-top: 50px;
}
}
}
@media (min-width: 1200px) {
.p-lg-1{
width: 100%;
}
.p-lg-2{
width: 50%;
}
.p-lg-3{
width: 33.3333%;
}
.p-lg-4{
width: 25%;
}
.p-lg-5{
width: 20%;
}
.p-lg-6{
width: 16.6666%;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.p-md-1{
width: 100%;
}
.p-md-2{
width: 50%;
}
.p-md-3{
width: 33.3333%;
}
.p-md-4{
width: 25%;
}
.p-md-5{
width: 20%;
}
.p-md-6{
width: 16.6666%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.p-sm-1{
width: 100%;
}
.p-sm-2{
width: 50%;
}
.p-sm-3{
width: 33.3333%;
}
.p-sm-4{
width: 25%;
}
.p-sm-5{
width: 20%;
}
.p-sm-6{
width: 16.6666%;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.p-xs-1{
width: 100%;
}
.p-xs-2{
width: 50%;
}
.p-xs-3{
width: 33.3333%;
}
.p-xs-4{
width: 25%;
}
.p-xs-5{
width: 20%;
}
.p-xs-6{
width: 16.6666%;
}
}
@media (max-width: 480px){
.grid-item{
width: 100%;
}
}