.ova-portfolio .portfolio-filter-button-wrapper {
list-style-type: none;
margin: 0 0 55px;
padding: 0;
text-align: center;
}
.ova-portfolio .portfolio-filter-button-wrapper li.portfolio-filter-button {
transition: all 0.3s ease;
position: relative;
cursor: pointer;
display: inline-block;
padding: 8px 24px;
margin: 8px;
border: 1px solid transparent;
border-radius: 30px;
}
.ova-portfolio .portfolio-filter-button-wrapper li.portfolio-filter-button:before {
transition: all 0.3s ease;
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 3px;
background-color: var(--primary);
opacity: 0;
}
.ova-portfolio .portfolio-filter-button-wrapper li.portfolio-filter-button.active-category {
transition: all 0.3s ease;
color: var(--heading);
border: 1px solid #E9E9E9;
}
.ova-portfolio .portfolio-filter-button-wrapper li.portfolio-filter-button.active-category:before {
transition: all 0.3s ease;
bottom: 0;
opacity: 1;
}
.ova-portfolio .content-por.masonry-portfolio-2.three_column .ovapor-item:nth-child(4) {
width: 66%;
}
@media (max-width: 991px) {
.ova-portfolio .content-por.masonry-portfolio-2.three_column .ovapor-item:nth-child(4) {
width: calc( 50% - 15px );
}
}
@media (max-width: 767px) {
.ova-portfolio .content-por.masonry-portfolio-2.three_column .ovapor-item:nth-child(4) {
width: 100%;
}
}
.ova-portfolio .content-por .ovapor-item {
margin-bottom: 30px;
}
.ova-portfolio .content-por.two_column .ovapor-item {
width: calc( 50% - 15px );
}
@media (max-width: 767px) {
.ova-portfolio .content-por.two_column .ovapor-item {
width: 100%;
}
}
.ova-portfolio .content-por.three_column .ovapor-item {
width: calc( 33.33% - 20px );
}
@media (max-width: 991px) {
.ova-portfolio .content-por.three_column .ovapor-item {
width: calc( 50% - 15px );
}
}
@media (max-width: 767px) {
.ova-portfolio .content-por.three_column .ovapor-item {
width: 100%;
}
}
.ova-portfolio .content-por.four_column .ovapor-item {
width: calc( 25% - 25px );
}
@media (max-width: 1024px) {
.ova-portfolio .content-por.four_column .ovapor-item {
width: calc( 33.33% - 20px );
}
}
@media (max-width: 991px) {
.ova-portfolio .content-por.four_column .ovapor-item {
width: calc( 50% - 15px );
}
}
@media (max-width: 767px) {
.ova-portfolio .content-por.four_column .ovapor-item {
width: 100%;
}
}
.ova-portfolio .ova_more_por {
text-align: center;
}
.ova-portfolio .ova_more_por .ova-load-more-por {
height: 60px;
line-height: 1.2;
padding: 18px 40px;
font-size: 16px;
color: var(--heading);
border: 1px solid var(--light);
border-radius: 100px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
display: inline-block;
font-weight: 600;
letter-spacing: 0.1px;
margin: 35px 0 110px 0;
}
.ova-portfolio .ova_more_por .ova-load-more-por:hover {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #fff;
border: 1px solid var(--primary);
background: var(--primary);
}
.ova-portfolio .ova_more_por .ova-load-more-por:hover .ova-loader {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #fff;
}
.ova-portfolio .ova_more_por .ova-load-more-por .ova-loader {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: var(--text);
font-size: 20px;
margin-right: 8px;
line-height: 1;
vertical-align: text-bottom;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ova-portfolio .ova-nodata {
display: none;
height: 60px;
line-height: 1.2;
padding: 18px 40px;
font-size: 16px;
color: var(--heading);
border: 1px solid var(--light);
border-radius: 100px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.1px;
margin: 35px 0 110px 0;
}
.ova-portfolio .ova-nodata:hover {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #fff;
border: 1px solid var(--primary);
background: var(--primary);
}
.ova-portfolio .ova-nodata:hover .ova-loader {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #fff;
}
.ova_portfolio_single {
margin-bottom: 120px;
}
@media (max-width: 1024px) {
.ova_portfolio_single {
margin-bottom: 80px;
}
}
.ova_portfolio_single .portfolio-title {
text-align: center;
font-size: 48px;
line-height: 1.4em;
margin: 0 0 12px 0;
}
.ova_portfolio_single .portfolio-category {
text-align: center;
text-transform: uppercase;
font-weight: 600;
opacity: 0.8;
color: var(--primary);
margin-bottom: 33px;
}
.ova_portfolio_single .share-social-icons {
display: flex;
justify-content: center;
list-style: none;
margin: 0 0 40px 0;
padding: 0;
}
.ova_portfolio_single .share-social-icons li {
display: inline-block;
}
.ova_portfolio_single .share-social-icons li:not(:last-child) {
margin-right: 8px;
}
.ova_portfolio_single .share-social-icons li a {
width: 40px;
height: 40px;
border: 1px solid #E9E9E9;
background-color: #fff;
border-radius: 50%;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.ova_portfolio_single .share-social-icons li a.ico-twitter {
color: #2A9AEE;
}
.ova_portfolio_single .share-social-icons li a.ico-facebook {
color: #36518C;
}
.ova_portfolio_single .share-social-icons li a.ico-pinterest {
color: #FE4037;
}
.ova_portfolio_single .share-social-icons li a i {
font-size: 14px;
}
.ova_portfolio_single .share-social-icons li a:hover {
border: 1px solid transparent;
background-color: var(--primary);
color: #fff;
}
.ova_portfolio_single .ova_portfolio_single_info {
margin: 0 auto;
margin-bottom: 40px;
padding: 30px 44px;
max-width: 920px;
background-color: #fff;
box-shadow: 0px 1px 45px rgba(0, 0, 0, 0.07);
border-radius: 20px;
display: flex;
flex-wrap: wrap;
row-gap: 30px;
justify-content: space-between;
}
.ova_portfolio_single .ova_portfolio_single_info .info-item {
display: flex;
justify-content: center;
align-items: center;
}
.ova_portfolio_single .ova_portfolio_single_info .info-item i {
display: inline-flex;
margin-right: 15px;
color: var(--primary);
font-size: 24px;
}
.ova_portfolio_single .ova_portfolio_single_info .info-item .title {
margin: 0;
font-weight: 600;
font-size: 16px;
}
.ova_portfolio_single .portfolio-video {
margin: 0 auto;
max-width: 1160px;
padding-bottom: 16px;
}
.ova_portfolio_single .portfolio-video img {
object-fit: cover;
max-height: 540px;
min-height: 200px;
border-radius: 20px;
}
.ova_portfolio_single .portfolio-video .ova-video-container {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
}
.ova_portfolio_single .portfolio-video .ova-video-container:hover .video-content {
width: 120px;
height: 120px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.ova_portfolio_single .portfolio-video .ova-video-container img {
width: 100%;
}
.ova_portfolio_single .portfolio-video .ova-video-container .video-content {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: transparent;
border: 2px solid var(--primary);
border-radius: 50%;
z-index: 1;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.ova_portfolio_single .portfolio-video .ova-video-container .video-content i {
color: var(--primary);
font-size: 80px;
vertical-align: middle;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.ova_portfolio_single .portfolio-video .ova-video-container .video-content.video-image {
position: absolute;
}
.ova_portfolio_single .portfolio-video .portfolio-modal-container {
display: none;
background-color: rgba(0, 0, 0, 0.2);
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 10;
}
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 900px;
height: 500px;
position: relative;
}
@media screen and (max-width: 900px) {
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 768px;
height: 450px;
}
}
@media screen and (max-width: 788px) {
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 600px;
height: 350px;
}
}
@media screen and (max-width: 620px) {
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 400px;
height: 250px;
}
}
@media screen and (max-width: 420px) {
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 320px;
height: 200px;
}
}
@media screen and (max-width: 330px) {
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal {
width: 300px;
height: 180px;
}
}
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal i {
position: absolute;
right: -10px;
top: -35px;
padding: 10px;
cursor: pointer;
font-size: 12px;
color: #fff;
font-weight: 600;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal i:hover {
color: #000;
}
.ova_portfolio_single .portfolio-video .portfolio-modal-container .modal .modal-video {
width: 100%;
height: 100%;
border: none;
}
.ova_portfolio_single .ova_portfolio_single_main_content {
max-width: 920px;
margin: 0 auto;
}
.ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h1, .ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h2, .ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h3, .ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h4, .ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h5, .ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description h6 {
margin: 30px 0 25px 0;
line-height: 1.2;
}
.ova_portfolio_single .ova_portfolio_single_main_content .ova_portfolio_single_description p {
margin: 0 0 20px;
}
.item-portfolio1 {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.item-portfolio1:hover .img-portfolio img {
-webkit-transition: 0.6s;
transition: 0.6s;
transform: scale(1.05);
}
.item-portfolio1:hover .img-portfolio .mask {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform: perspective(400px) rotateX(0deg) scale(1);
transform: perspective(400px) rotateX(0deg) scale(1);
opacity: 0.6;
}
.item-portfolio1:hover .info {
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.item-portfolio1:hover .icon {
-webkit-transition: 0.7s;
transition: 0.7s;
-webkit-transform: scale(1);
transform: scale(1);
}
.item-portfolio1 .img-portfolio img {
-webkit-transition: 0.6s;
transition: 0.6s;
vertical-align: middle;
width: 100%;
min-height: 330px;
object-fit: cover;
transform: scale(1);
}
.item-portfolio1 .img-portfolio .mask {
-webkit-transition: 0.6s;
transition: 0.6s;
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background: var(--heading);
mix-blend-mode: normal;
opacity: 0;
-webkit-transform: perspective(400px) rotateX(-90deg) scale(0.2);
transform: perspective(400px) rotateX(-90deg) scale(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
.item-portfolio1 .info {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding: 32px;
background-color: var(--primary);
opacity: 0;
-webkit-transform: translateY(120px);
transform: translateY(120px);
-webkit-transform-origin: bottom top;
transform-origin: bottom top;
}
@media (max-width: 420px) {
.item-portfolio1 .info {
padding: 24px;
}
}
.item-portfolio1 .info .portfolio-category {
opacity: 0.8;
color: #fff;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
}
.item-portfolio1 .info .portfolio-category a {
color: #fff;
}
.item-portfolio1 .info .name {
font-size: 24px;
margin: 0;
color: #fff;
}
.item-portfolio1 .icon {
-webkit-transition: 0.7s;
transition: 0.7s;
position: absolute;
right: 32px;
bottom: 24px;
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
-webkit-transform: scale(0);
transform: scale(0);
}
.item-portfolio1 .icon:hover i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
transform: rotate(-90deg);
}
.item-portfolio1 .icon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
font-size: 24px;
display: inline-flex;
color: var(--primary);
}
.item-portfolio2:hover .img-portfolio {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
.item-portfolio2:hover .img-portfolio .mask {
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 0.6;
}
.item-portfolio2:hover .img-portfolio .icon {
-webkit-transition: 0.5s;
transition: 0.5s;
top: 50%;
opacity: 1;
}
.item-portfolio2 .img-portfolio {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position: relative;
border-radius: 20px;
overflow: hidden;
-webkit-transform: scale(1);
transform: scale(1);
}
.item-portfolio2 .img-portfolio img {
vertical-align: middle;
width: 100%;
min-height: 330px;
object-fit: cover;
}
.item-portfolio2 .img-portfolio .mask {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background: var(--secondary);
mix-blend-mode: normal;
opacity: 0;
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
-webkit-transform-origin: top;
transform-origin: top;
}
.item-portfolio2 .img-portfolio .icon {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--primary);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
z-index: 2;
}
.item-portfolio2 .img-portfolio .icon i {
font-size: 24px;
display: inline-flex;
color: #fff;
}
.item-portfolio2 .info {
padding: 20px 30px;
}
.item-portfolio2 .info .portfolio-category {
opacity: 0.8;
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
}
.item-portfolio2 .info .portfolio-category a {
color: var(--primary);
}
.item-portfolio2 .info .name {
font-size: 24px;
margin: 0;
color: var(--heading);
}
.item-portfolio3:hover .img-portfolio {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.item-portfolio3:hover .img-portfolio .mask {
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.6;
}
.item-portfolio3:hover .img-portfolio .info {
-webkit-transition: 0.5s;
transition: 0.5s;
top: 50%;
opacity: 1;
}
.item-portfolio3 .img-portfolio {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.item-portfolio3 .img-portfolio img {
vertical-align: middle;
width: 100%;
min-height: 330px;
object-fit: cover;
}
.item-portfolio3 .img-portfolio .mask {
-webkit-transition: 0.5s;
transition: 0.5s;
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 20px;
background: var(--secondary-hover);
mix-blend-mode: normal;
opacity: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-transform-origin: center;
transform-origin: center;
}
.item-portfolio3 .img-portfolio .info {
-webkit-transition: 0.5s;
transition: 0.5s;
text-transform: center;
position: absolute;
top: 60%;
left: 50%;
z-index: 2;
opacity: 0;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.item-portfolio3 .img-portfolio .info .icon {
margin: 0 auto 35px;
background-color: var(--primary);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.item-portfolio3 .img-portfolio .info .icon i {
font-size: 24px;
display: inline-flex;
color: #fff;
}
.item-portfolio3 .img-portfolio .info .portfolio-category {
opacity: 0.8;
color: #fff;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
}
.item-portfolio3 .img-portfolio .info .portfolio-category a {
color: #fff;
}
.item-portfolio3 .img-portfolio .info .name {
font-size: 24px;
margin: 0;
color: #fff;
}