/home/marynathaconsult/public_html/assets/scss/_portfolio.scss
/*============ portfolio_area ==============*/
.portfolio_area {
padding-left: 160px;
padding-right: 160px;
background: #212028;
}
.portfolio_slider {
margin-left: -7px;
margin-right: -7px;
.item {
padding: 0px 7px;
}
}
.p_slider_inner {
position: relative;
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
line-height: 58px;
border: 1px solid #fff;
border-radius: 50%;
text-align: center;
color: #fff;
transition: all 0.2s linear;
font-size: 18px;
&:hover {
background: #fff;
color: $title;
}
}
.prev {
left: -100px;
}
.next {
right: -100px;
}
}
.pr_slider_item {
cursor: pointer;
img {
max-width: 100%;
transition: all 0.2s linear;
z-index: -1;
position: relative;
}
.item_content {
background: #fff;
text-align: center;
padding: 27px 10px 18px;
h4 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.3px;
margin-bottom: 7px;
transition: color 0.2s linear;
&:hover {
color: #8781bd;
}
}
p {
font-size: 18px;
color: #505050;
font-style: italic;
margin-bottom: 0;
}
}
&:hover {
.img {
img {
transform: scale(1.1) rotate(4deg);
}
&:before {
opacity: 0.9;
}
.icon {
transform: scale(1);
}
}
}
}
.img_hover {
position: relative;
overflow: hidden;
z-index: 1;
&:before {
content: "";
top: 0;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: #8781bd;
opacity: 0;
transition: opacity 0.2s linear;
}
img {
transition: all 0.2s linear;
position: relative;
z-index: -1;
}
.icon {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
background: #212028;
color: #fff;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
transform: scale(0);
transition: all 0.3s linear;
&:hover {
background: #fff;
color: $purple;
}
}
}
/*============ portfolio_area ==============*/
/*============ portfolio_area_two ==============*/
.portfolio_area_two {
.row {
margin-bottom: -30px;
}
}
.portfolio_item {
position: relative;
z-index: 1;
cursor: pointer;
margin-bottom: 30px;
.hover_content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
h5 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.9px;
margin-bottom: 5px;
transition: all 0.2s linear;
}
p {
font-size: 18px;
font-style: italic;
transition: all 0.3s linear;
}
h5,
p {
color: #fff;
transform: translateY(15px);
opacity: 0;
}
.icon {
position: relative;
top: 0;
left: 0;
margin-top: 8px;
margin-left: 0;
display: inline-block;
border: 1px solid #d5d5d5;
background: transparent;
&:hover {
background: #212028;
border-color: #212028;
}
}
}
&:hover {
img {
transform: scale(1.06);
}
&:before {
opacity: 0.9;
}
h5,
p {
transform: translateY(0);
opacity: 1;
}
.icon {
transform: scale(1);
}
}
}
.portfolio_inner_four {
.pr_slider_item {
margin-bottom: 30px;
.item_content {
background: #f3f2f9;
}
}
}
/*============ portfolio_area_two ==============*/
/*============ demos_area ==============*/
.demos_area {
.row {
margin-bottom: -70px;
}
}
.demo_item {
display: inline-block;
margin-bottom: 70px;
img {
max-width: 100%;
border-radius: 4px;
}
h5 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.9px;
transition: color 0.2s linear;
margin-top: 35px;
margin-bottom: 0;
}
&:hover {
h5 {
color: $purple;
}
}
}
/*============ demos_area ==============*/
/*============ portfolio_area_three ==============*/
.p_filter_info {
align-items: center;
flex-wrap: wrap;
margin-bottom: 60px;
h5 {
font-size: 20px;
font-family: $crim;
font-weight: 600;
color: $title;
margin-bottom: 0;
}
.portfolio_filter {
.work_portfolio_item {
display: inline-block;
font-size: 20px;
font-family: $crim;
font-weight: 400;
color: #8b8b8b;
cursor: pointer;
&.active {
color: $purple;
}
margin-left: 40px;
}
}
}
.portfolio_gallery {
.pr_slider_item {
margin-top: 30px;
.item_content {
border: 1px solid #f3f2f9;
}
}
.p_title {
font-size: 36px;
font-weight: 400;
}
}
/*============ portfolio_area_three ==============*/
/*============ portfolio_details_area ==============*/
.details_content {
display: flex;
flex-wrap: wrap;
padding-top: 20px;
.details_text {
width: 73%;
padding-right: 60px;
border-right: 1px solid #e6e6e6;
h2 {
font-size: 36px;
font-weight: 400;
margin-bottom: 32px;
}
p {
margin-bottom: 0;
}
}
.p_details_info {
width: 27%;
padding-left: 70px;
.item {
font-family: $pop;
font-size: 18px;
font-weight: 500;
color: $title;
p {
font-family: $crim;
font-style: italic;
color: #505050;
font-size: 18px;
margin-bottom: 0;
a {
color: #505050;
}
}
& + .item {
padding-top: 25px;
}
}
}
}
.p_social_icon {
display: flex;
flex-wrap: wrap;
align-items: center;
h5 {
margin-bottom: 0;
font-size: 18px;
font-weight: 500;
color: #505050;
}
a {
width: 30px;
height: 30px;
font-size: 14px;
line-height: 28px;
color: #bababa;
text-align: center;
border-radius: 50%;
border: 1px solid #bababa;
&:hover {
background: $purple;
border-color: $purple;
color: #fff;
}
margin-left: 15px;
}
}
.portfolio_details_area {
.portfolio_detail_img {
margin-bottom: 30px;
}
.portfolio_gallery {
margin-top: 90px;
}
}
/*============ portfolio_details_area ==============*/