| Current Path : /home/webyoo/www/backup/allback/partenaires-lonlay/sass/ |
| Current File : /home/webyoo/www/backup/allback/partenaires-lonlay/sass/_7.portfolio.scss |
.portfolio {
padding-bottom: 0;
}
.filters {
margin-top: 10px;
margin-bottom: 36px;
ul {
margin: 0 -25px;
padding: 0;
list-style: none;
font-size: 0;
li {
display: inline-block;
a {
position: relative;
display: block;
font-family: $pd;
font-size: 11px;
font-style: italic;
color: #555;
margin: 5px 25px;
padding: 12px 0;
&:after {
content: '//';
display: block;
position: absolute;
right: -25px; top: 50%;
@include translate(50%, -50%);
color: #555 !important;
}
&:before {
content: '';
display: block;
position: absolute;
width: 5px; height: 5px;
@include rounded(50%);
background-color: $color;
margin: auto;
left: 0; right: 0; bottom: 20px;
opacity: 0;
@include transition(all .3s ease);
}
}
&:last-child {
a {
&:after {
display: none;
}
}
}
&.select-filter {
a {
color: $color;
&:before {
bottom: 0;
opacity: 1;
}
}
}
}
}
}
.bg-parallax, .bg-static {
~ .container {
.filters {
ul {
li {
a {
color: #fff;
&:after {
color: #fff !important;
}
&:before {
background-color: $color;
}
}
&.select-filter {
a {
color: $color;
}
}
}
}
}
}
}
.bg-color {
~ .container {
.filters {
ul {
li {
a {
color: #141414;
&:after {
color: #141414 !important;
}
&:before {
background-color: #fff;
}
}
&.select-filter {
a {
color: #fff;
}
}
}
}
}
}
}
.page-desc {
font-family: $pd;
font-style: italic;
font-size: 14px;
color: #1b1b1b;
line-height: 1.9em;
letter-spacing: 0.02em;
max-width: 705px;
margin: 38px auto 40px;
}
.portfolio-container.portfolio-color {
.portfolio-item-inner {
.caption {
background-color: $color;
.item-categories {
a {
&:hover {
color: #fff;
}
}
}
.item-body {
display: none;
}
.item-footer {
.on-btn {
&:hover {
color: #fff;
&:after {
background-color: #fff;
}
}
}
}
}
&.hover-style-2 {
.caption {
background: none;
&:before,
&:after,
.tb:before,
.tb:after {
background-color: $color;
}
}
}
}
}
.portfolio-1 {
.portfolio-item {
padding: 0;
}
}
.portfolio-2 {
.portfolio-item {
margin-bottom: 30px;
.portfolio-item-inner {
.caption {
.item-footer {
margin-top: 40px;
}
}
}
}
}
.portfolio-3 {
.portfolio-item {
margin-bottom: 30px;
}
}
.portfolio-item {
.portfolio-item-inner {
position: relative;
overflow: hidden;
.image-wrap {
display: block;
@include transition(all .3s ease);
img {
width: 100%;
}
}
.caption {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(255,255,255,.95);
padding: 20px 15%;
@include transition(all .3s ease);
z-index: 9;
&.text-left {
.h5 {
&:after {
left: 0;
right: auto;
}
}
}
&.text-center {
.h5 {
&:after {
left: 0;
right: 0;
}
}
}
&.text-right {
.h5 {
&:after {
right: 0;
left: auto;
}
}
}
.tb {
height: 100%;
}
.h5 {
position: relative;
padding-bottom: 10px;
margin-top: 0;
&:after {
content: '';
display: block;
position: absolute;
width: 30px; height: 1px;
background-color: #666;
margin: auto;
left: 0;
bottom: 0;
}
a {
color: inherit;
&:hover {
color: $color;
}
}
}
.item-categories {
font-size: 0;
margin-left: -10px;
margin-right: -10px;
a {
position: relative;
display: inline-block;
font-family: $pd;
font-size: 12px;
font-style: italic;
margin: 3px 10px;
color: #3e3e3e;
&:after {
content: '//';
display: block;
position: absolute;
right: -10px; top: 50%;
@include translate(50%, -50%);
color: #3e3e3e;
}
&:last-child {
&:after {
display: none;
}
}
&:hover {
color: $color;
}
}
}
.item-body {
margin-top: 10px;
max-height: 70px;
overflow: hidden;
}
.item-footer {
margin-top: 18px;
}
}
&.hover-style-1 {
.caption {
opacity: 0;
visibility: hidden;
}
}
&.hover-style-2 {
.caption {
background: none;
visibility: hidden;
@include transition-delay(.5s);
&:before,
&:after,
.tb:before,
.tb:after {
content: '';
display: block;
position: absolute;
width: 50%; height: 50%;
background-color: rgba(255,255,255,.95);
z-index: -1;
opacity: 0;
@include scale(0.1);
@include transition(all .2s linear);
}
&:before {
top: 0; left: 0;
@include transition-delay(.3s);
}
&:after {
top: 0; right: 0;
@include transition-delay(.2s);
}
.tb:after {
bottom: 0; right: 0;
@include transition-delay(.1s);
}
.tb:before {
bottom: 0; left: 0;
@include transition-delay(0s);
}
.tb-cell {
> div {
opacity: 0;
@include translateY(-50px);
@include transition(all .3s ease);
}
}
}
}
&.hover-style-3 {
.image-wrap {
@include scale(1.1);
@include transition(all .4s linear);
}
.caption {
opacity: 0;
visibility: hidden;
@include translateX(-50px);
@include transition(all .3s ease .1s);
.tb-cell {
> div {
opacity: 0;
@include translateX(-50px);
@include transition(all .3s ease);
}
}
}
}
&.hover-style-4 {
.image-wrap {
@include translateY(0);
}
.caption {
@include translateY(100%);
.tb-cell {
> div {
opacity: 0;
@include translateY(50px);
@include transition(all .3s ease);
}
}
}
}
&.hover-style-5 {
.image-wrap {
@include transition-delay(.08s);
}
.caption {
opacity: 0;
visibility: hidden;
@include scale(0.2);
@include transition-delay(0s);
.tb-cell {
> div {
opacity: 0;
@include translateY(50px);
@include transition(all .3s ease);
}
}
}
}
&.hover-style-6 {
.image-wrap {
@include transition-delay(.08s);
@include scale(1.1);
}
.caption {
opacity: 0;
visibility: hidden;
@include scale(1.4);
@include transition-delay(0s);
}
}
&.hover-style-7 {
.image-wrap {
@include scale(1.1);
@include transition(all .4s linear);
}
.caption {
opacity: 0;
visibility: hidden;
@include translateX(100px);
@include transition(all .3s ease .1s);
.tb-cell {
> div {
opacity: 0;
@include translateX(50px);
@include transition(all .3s ease);
}
}
}
}
&.hover-style-8 {
.image-wrap {
@include scale(1.1);
@include transition(all .4s linear);
}
.caption {
opacity: 0;
visibility: hidden;
@include translateY(-50%);
@include transition(all .3s ease .1s);
.tb-cell {
> div {
opacity: 0;
@include translateY(-50px);
@include transition(all .3s ease);
}
}
}
}
&:hover {
&.hover-style-1 {
.caption {
opacity: 1;
visibility: visible;
}
}
&.hover-style-2 {
.caption {
visibility: visible;
@include transition-delay(0s);
&:before,
&:after,
.tb:before,
.tb:after {
opacity: 1;
@include scale(1);
}
&:before {
top: 0; left: 0;
@include transition-delay(0s);
}
&:after {
top: 0; right: 0;
@include transition-delay(.1s);
}
.tb:after {
bottom: 0; right: 0;
@include transition-delay(.2s);
}
.tb:before {
bottom: 0; left: 0;
@include transition-delay(.3s);
}
.tb-cell {
> div {
opacity: 1;
@include translateY(0);
&:nth-child(1) {
@include transition-delay(.5s);
}
&:nth-child(2) {
@include transition-delay(.45s);
}
&:nth-child(3) {
@include transition-delay(.4s);
}
&:nth-child(4) {
@include transition-delay(.35s);
}
}
}
}
}
&.hover-style-7,
&.hover-style-3 {
.image-wrap {
@include scale(1);
}
.caption {
opacity: 1;
visibility: visible;
@include translateX(0);
.tb-cell {
> div {
opacity: 1;
@include translateX(0);
&:nth-child(1) {
@include transition-delay(.15s);
}
&:nth-child(2) {
@include transition-delay(.2s);
}
&:nth-child(3) {
@include transition-delay(.25s);
}
&:nth-child(4) {
@include transition-delay(.3s);
}
}
}
}
}
&.hover-style-4 {
.image-wrap {
@include translateY(-100%);
}
.caption {
@include translateY(0);
.tb-cell {
> div {
opacity: 1;
@include translateY(0);
&:nth-child(1) {
@include transition-delay(.15s);
}
&:nth-child(2) {
@include transition-delay(.2s);
}
&:nth-child(3) {
@include transition-delay(.25s);
}
&:nth-child(4) {
@include transition-delay(.3s);
}
}
}
}
}
&.hover-style-5 {
.image-wrap {
@include scale(1.1);
@include transition-delay(0);
}
.caption {
opacity: 1;
visibility: visible;
@include scale(1);
@include transition-delay(.08s);
.tb-cell {
> div {
opacity: 1;
@include translateY(0);
&:nth-child(1) {
@include transition-delay(.15s);
}
&:nth-child(2) {
@include transition-delay(.2s);
}
&:nth-child(3) {
@include transition-delay(.25s);
}
&:nth-child(4) {
@include transition-delay(.3s);
}
}
}
}
}
&.hover-style-6 {
.image-wrap {
@include scale(1);
@include transition-delay(0);
}
.caption {
opacity: 1;
visibility: visible;
@include scale(1);
@include transition-delay(.08s);
}
}
&.hover-style-8 {
.image-wrap {
@include scale(1);
}
.caption {
opacity: 1;
visibility: visible;
@include translateY(0);
.tb-cell {
> div {
opacity: 1;
@include translateY(0);
&:nth-child(1) {
@include transition-delay(.3s);
}
&:nth-child(2) {
@include transition-delay(.25s);
}
&:nth-child(3) {
@include transition-delay(.2s);
}
&:nth-child(4) {
@include transition-delay(.15s);
}
}
}
}
}
}
}
}
.latest-work {
padding-bottom: 0;
}
.latest-work-slider {
margin-top: 54px;
.owl-controls {
.owl-buttons {
margin: 0;
> div {
position: absolute;
display: inline-block;
font-size: 20px;
color: #fff;
opacity: 0;
text-align: center;
width: 30px;
height: 70px;
line-height: 68px;
margin: 0;
background-color: rgba(0,0,0,.5);
top: 50%;
z-index: 9;
.icon, .fa {
border: 0 !important;
&:after {
color: #fff;
}
}
&.owl-next {
right: 0;
@include translate(0, -50%);
}
&.owl-prev {
left: 0;
@include translate(0, -50%);
}
&:hover {
background-color: $color;
}
}
}
}
}
.loading-page {
margin-top: 55px;
margin-bottom: 65px;
.icon, .fa {
font-size: 30px;
color: #1b1b1b;
}
}