/*-------------------------------------------------------------- 3.0 - Columns --------------------------------------------------------------*/ .dtportfolio-column { margin:0px 0px 0px 2%; float:left; min-height:1px; position:relative; } .dtportfolio-column.first { margin-left:0px; clear:both; } .dtportfolio-full-width, .dtportfolio-one-column { width:100%; } .dtportfolio-column.dt-sc-full-width, .dtportfolio-column.dt-sc-one-column { margin-left:0px; } .dtportfolio-one-half { width:49%; } .dtportfolio-one-third { width:32%; } .dtportfolio-two-third { width:66%; } .dtportfolio-one-fourth { width:23.5%; } .dtportfolio-three-fourth { width:74.5%; } .dtportfolio-one-fifth { width:18.4%; } .dtportfolio-two-fifth { width:38.8%; } .dtportfolio-three-fifth { width:59.2%; } .dtportfolio-four-fifth { width:79.6%; } .dtportfolio-one-sixth { width:15%; } .dtportfolio-two-sixth { width:32%; } .dtportfolio-three-sixth { width:49%; } .dtportfolio-four-sixth { width:66%; } .dtportfolio-five-sixth { width:83%; } .wpb_column.dtportfolio-one-fifth { width: 20%; } .wpb_column.dtportfolio-two-fifth { width: 40%; } .wpb_column.dtportfolio-three-fifth { width: 60%; } .wpb_column.dtportfolio-four-fifth { width: 80%; } .dtportfolio-one-half iframe, .dtportfolio-one-third iframe, .dtportfolio-one-fourth iframe, .dtportfolio-three-fourth iframe, .dtportfolio-two-third iframe, iframe { max-width:100%; } embed, iframe, object, video { max-width:100%; } .dtportfolio-column.no-space { margin-left:0px; margin-right:0px; } .dtportfolio-column.no-space.dtportfolio-one-fourth { width:24.982%; } .dtportfolio-column.no-space.dtportfolio-one-third { width:33.333333%; } .dtportfolio-column.no-space.dtportfolio-one-half { width:50%; } .dtportfolio-column.no-space.dtportfolio-one-fifth, .wpb_column.no-space.dtportfolio-one-fifth { width:20%; } .dtportfolio-column.no-space.dtportfolio-one-sixth { width:16.666%; } .dtportfolio-column.no-space.dtportfolio-three-fourth { width:75%; } .dtportfolio-column.no-space.dtportfolio-two-third { width:66.666666%; } .dtportfolio-column.no-space.dtportfolio-four-fifth, .wpb_column.no-space.dtportfolio-four-fifth { width:80%; } .dtportfolio-column.no-space.dtportfolio-three-fifth, .wpb_column.no-space.dtportfolio-three-fifth { width:60%; } .dtportfolio-column.no-space.dtportfolio-two-fifth, .wpb_column.no-space.dtportfolio-two-fifth { width:40%; } .dtportfolio-column.no-space.dtportfolio-two-sixth { width:33.2%; } .dtportfolio-column.no-space.dtportfolio-three-sixth { width:49.98%; } .dtportfolio-column.no-space.dtportfolio-four-sixth { width:66.4%; } .dtportfolio-column.no-space.dtportfolio-five-sixth { width:83%; } /* custom */ .dtportfolio-single { padding:0px; } .single.single-dt_portfolios #primary { padding-bottom: 0px; } .dtportfolio-fullwidth-wrapper { position: relative; overflow: hidden; } /** Single Portfolio Fullpage **/ .dtportfolio-single-slider-wrapper .dtportfolio-single-details { position:absolute; bottom:0; width:35%; padding:60px 20px 90px; background-color: rgba(0, 0, 0, 0.8); z-index:9; color:#fff; } .dtportfolio-single-slider-wrapper .post-nav-container { position: absolute; left: 5px; bottom: 30px; display: inline-block; width: auto; margin: 0; z-index:9; } .dtportfolio-single-slider-wrapper .project-details li { border-bottom:0; } .dtportfolio-single-slider-wrapper .project-details { margin-top:20px; } .dtportfolio-single-slider-wrapper .post-nav-container:before { display:none; } .dtportfolio-single-slider-wrapper .post-nav-container .post-prev-link a { margin-right:10px; } .dtportfolio-single-slider-wrapper .post-nav-container a { padding:7px 15px 5px; background:none; } .dtportfolio-single-slider-wrapper .dtportfolio-single { padding:0; } .dtportfolio-single-slider-wrapper .dtportfolio-single-details h2, .dtportfolio-single-slider-wrapper .dtportfolio-single-details .dtportfolio-categories a, .dtportfolio-single-slider-wrapper .dtportfolio-single-details .dtportfolio-categories i, .dtportfolio-single-slider-wrapper .post-nav-container .post-archive-link-wrapper a { color:#fff; } .dtportfolio-single-slider-wrapper .dtportfolio-single-details > p { border-bottom:1px solid; padding-bottom:30px; } .dtportfolio-fixed-content { top:0; background-position:center; background-repeat:no-repeat; background-size: cover; z-index:8; } .dtportfolio-single > .dtportfolio-two-third { margin-right: 0; } .gallery-list .dtportfolio-fixed-content { position: fixed; } .dtportfolio-single-mediaontop-item { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } #portfolio-featured-video { right: 0; bottom: 0; top: 0; right: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; background-position: center center; background-size: contain; object-fit: inherit; z-index: 3; display: block; float: left; } .dtportfolio-fixed-items-page .main-title-section-wrapper, .dtportfolio-fixed-items-page.home #header-wrapper, .dtportfolio-fixed-items-page #header-wrapper { margin:0; } .header-on-slider.no-breadcrumb.dtportfolio-fixed-items-page #main { margin-top:0; } /* Single portfolio slider */ .dtportfolio-single-slider-container .dtportfolio-single-image-holder { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-pagination-wrapper:empty { display: none; } .dtportfolio-single-slider-container, .dtportfolio-single-slider-container .dtportfolio-single-swiper-holder .dtportfolio, .dtportfolio-single-slider-container .dtportfolio-single-swiper-holder .dtportfolio-item figure, .dtportfolio-single-slider-container .dtportfolio-item.dtportfolio-framed .dtportfolio-framed-holder { height:100%; } .dtportfolio-single-slider-container .swiper-arrow-click { font-size: 30px; line-height: 40px; font-weight: 400; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; opacity: 0; visibility: hidden; color: #fff; width: 32px; height: 32px; transition: opacity 0.3s ease, visibility 0.3s ease; } .dtportfolio-single-slider-container .swiper-arrow-click.left { left: 50px; } .dtportfolio-single-slider-container .swiper-arrow-click.right { right: 50px; } .dtportfolio-single-slider-container .swiper-arrow-click.right .arrow { left: auto; right: 60px; } .dtportfolio-single-slider-container .swiper-arrow-click.right .number { right: 0; left: auto; } .dtportfolio-single-slider-container .swiper-arrow-click.right.disabled, .dtportfolio-single-slider-container .swiper-arrow-click.left.disabled { opacity: 0; } .dtportfolio-single-slider-container .swiper-arrow-click .arrow { width: 22px; height: 22px; position: absolute; left: 60px; top: 50%; font-family: "Awesome 5 Free"; font-style:normal; font-weight:900; } .dtportfolio-single-slider-container .swiper-arrow-click.left .arrow:before { content:"\f177"; } .dtportfolio-single-slider-container .swiper-arrow-click.right .arrow:before { content:"\f178"; } .dtportfolio-single-slider-container .swiper-arrow-click.middle .arrow:before { content:"\f07e"; } .dtportfolio-single-slider-container .dtportfolio-item.dtportfolio-framed:hover { -webkit-transform: inherit; -moz-transform: inherit; transform: inherit; } .dtportfolio-single-slider-container { position:relative; width:100%; float:left; overflow:hidden; } .swiper-container-multirow .dtportfolio-container { height: 100%; } .dtportfolio-single-slider-wrapper { position:relative; } .dtportfolio-image-gallery-thumb-container, .dtportfolio-swiper-thumbnail-container { height: 20%; padding: 10px 0; position: absolute; bottom: 10px; z-index: 9; width: 100%; left: 0; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } .dtportfolio-single-slider-wrapper:hover .dtportfolio-image-gallery-thumb-container, .dtportfolio-swiper-thumbnail-container { opacity: 1; } .dtportfolio-image-gallery-thumb-container .swiper-slide, .dtportfolio-swiper-thumbnail-container .swiper-slide { width: 25%; height: 100%; opacity: 0.3; cursor:pointer; border:2px solid #fff; background-position: center; background-size: cover; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } .dtportfolio-image-gallery-thumb-container .swiper-slide-active, .dtportfolio-image-gallery-thumb-container .swiper-slide:hover, .dtportfolio-swiper-thumbnail-container .swiper-slide:hover, .dtportfolio-swiper-thumbnail-container .swiper-slide-active { opacity: 1; } .header-on-slider.page-with-slider .sticky-wrapper { height: auto !important; } .dtportfolio-image-gallery-thumb-container .swiper-slide .dtportfolio-single-image-holder { width: 100%; height: 100%; background-position: center; background-size: cover; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-scrollbar { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; z-index: 9; background: rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-scrollbar-drag { background: rgba(0, 0, 0, 0.9); } /**********************************/ /**********************************/ /**********************************/ /* Table of Content ================================================== 1.0 - Transition 2.0 - Portfolio 3.0 - Portfolio Single 4.0 - Infinite Portfolio Scroll 5.0 - Default Color 6.0 - Browser Fix */ /*-------------------------------------------------------------- 1.0 - Transition --------------------------------------------------------------*/ .dtportfolio-sorting.type6 a:before, .dtportfolio-item.dtportfolio-hover-extended figure:after, .dtportfolio-item.dtportfolio-hover-centered-box figure:after, .dtportfolio-fullpage-carousel .slider-nav .slick-slide:after, .dtportfolio-onepage-navigation-title-holder > li > a > span, .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2:after, .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link span, .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li, .dtportfolio-categories-list .total-items-count span, .dtportfolio-categories-list .details-holder, .dtportfolio-categories-list .image-holder img, .dtportfolio-multiscroll.dtportfolio-hover-grayscale .dtportfolio-image-holder, .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul li, .dtportfolio-fullpage-carousel .slider-nav .slick-slide img, .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay:after, .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay-details h2:before, .dtportfolio-item.dtportfolio-hover-girly.details-below-image .details-holder h2 { -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } .dtportfolio-item .dtportfolio-image-overlay .links a:first-child, .dtportfolio-item .dtportfolio-image-overlay-details, .dtportfolio-team.hide-social-show-on-hover .dtportfolio-team-social, .dtportfolio-item .dtportfolio-image-overlay .links { -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease; } .dtportfolio-item .dtportfolio-image-overlay .links a:last-child, .dtportfolio-item figure img, .dtportfolio-image-caption .dtportfolio-image-wrapper img, .dtportfolio-menu figure img { -webkit-transition:all 0.9s ease; -moz-transition:all 0.9s ease; -o-transition:all 0.9s ease; -ms-transition:all 0.9s ease; transition:all 0.9s ease; } .dtportfolio-item .dtportfolio-image-overlay .links:after { -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; -o-transition:all 0.4s ease-out; -ms-transition:all 0.4s ease-out; transition:all 0.4s ease-out; } .dtportfolio-item figure img { -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease; -o-transition:all 1.5s ease; -ms-transition:all 1.5s ease; transition:all 1.5s ease; } /*-------------------------------------------------------------- 2.0 - Portfolio --------------------------------------------------------------*/ .dtportfolio-sorting { border-bottom: 1px solid #dddddd; float:left; clear:both; width:100%; margin:0px 0px 60px; padding:0px 0 20px 0; text-align:left; } .dtportfolio-sorting a { font-size:20px; font-weight:600; padding:8px 15px 6px; text-transform:capitalize; letter-spacing:1px; margin:0px 10px 10px; display:inline-block; position:relative; } .dtportfolio-sorting.default a { margin: 0 10px 0px 0; padding: 0px 15px 0; } .dtportfolio-sorting.default.type1 a { margin:0px 15px 20px; border: 1px solid; padding: 10px 15px; } .dtportfolio-sorting.default.type1 a:before, .dtportfolio-sorting.type1 a:after { content:""; position:absolute; top:0px; bottom:0px; margin:auto; } .dtportfolio-sorting.default.type1 a:before { width:15px; height:1px; left:-18px; } .dtportfolio-sorting.default.type1 a:after { width:1px; height:15px; left:-3px; } .dtportfolio-container { clear: both; margin: 0; padding: 0; width: auto; } .dtportfolio-container-wrapper { position:relative; display:block; overflow: hidden; clear: both; } .dtportfolio-sorting.default.type2 a, .dtportfolio-sorting.type2 a:hover, .dtportfolio-sorting.type2 a.active-sort { margin:0px 10px 10px 0; } .dtportfolio-sorting.default.type2 a { padding:5px 10px; display:inline-block; border: 1px solid; } .dtportfolio-sorting.default.type2 a.active-sort, .dtportfolio-sorting.type2 a:hover { background-color: #000; color: #bbb; } .fixed-left-header .dtportfolio-sorting.type2 { width: 19%; right: 0; left: auto; } .dtportfolio-sorting.default.type3 { margin:0 0 40px; text-align:left; } .dtportfolio-sorting.default.type3 a { margin:0 5px 10px 0; padding: 5px 15px; } .dtportfolio-sorting.default.type3 a.active-sort, .dtportfolio-sorting.type3 a:hover { background-color:#000; color:#fff; } .dtportfolio-item figure { position:relative; overflow:hidden; } .dtportfolio-item figure img { display: block; } .dtportfolio-item:hover figure img, .dtportfolio-item.hover-state figure img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .dtportfolio-item .dtportfolio-image-overlay { position:absolute; opacity:0; display:block; bottom:0; left:0; right:0; width:100%; height:100%; overflow:hidden; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } .dtportfolio-item.hover-none .dtportfolio-image-overlay { display:none; } .dtportfolio-item .dtportfolio-image-overlay .links { position:absolute; left:0px; top:0px; width:100%; height:100%; } .dtportfolio-item .dtportfolio-image-overlay .links a { display:inline-block; height:45px; width:45px; font-size:16px; line-height:47px; border:1px solid; border-radius:50%; margin:30px 0px 0px 30px; position:relative; bottom:100%; z-index: 1; text-align:center; } .dtportfolio-item .dtportfolio-image-overlay .links a:last-child { margin-left:5px; } .dtportfolio-item .dtportfolio-image-overlay .links a span { line-height:45px; } .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay .links a:hover { border: 0; background: none; color:#fff; } .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay { background:rgba(0, 0, 0, 0.8); } .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay h2 { font-size:16px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px; } .dtportfolio-item .dtportfolio-image-overlay .links { width:100%; height:100%; } .dtportfolio-item .dtportfolio-image-overlay .links:after { content:''; position:absolute; z-index:-1; } .dtportfolio-item .dtportfolio-image-overlay .links:before { left:auto; left:10px; z-index:2; } .dtportfolio-item:hover .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-fullpage-splitted-section.active .dtportfolio-image-overlay .links a { bottom:0px; } .dtportfolio-item .dtportfolio-image-overlay-details { position:absolute; right:30px; bottom:-100%; text-align:right; padding:0px 20px; } .dtportfolio-item .dtportfolio-image-overlay > a { display:none; } .dtportfolio-item .dtportfolio-image-overlay-details .categories { margin-bottom:0px; } .dtportfolio-item .dtportfolio-image-overlay-details .categories a { letter-spacing:0.5px; } .dtportfolio-item .dtportfolio-image-overlay h2 { font-weight:300; margin-bottom:0px; padding:0px; overflow: hidden; font-size: 20px; } .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay-details { right: 0; max-width: 100%; padding: 0px 40px; } .dtportfolio-item:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-splitted-section.active .dtportfolio-image-overlay-details { bottom:30px; } .dtportfolio-item:hover .dtportfolio-image-overlay { opacity:1; } .dtportfolio-item.cursor-hover-style1:hover .dtportfolio-image-overlay { cursor:url(../images/plus_icon.png), auto; } .dtportfolio-item.cursor-hover-style1:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/plus_icon_dark.png), auto; } .dtportfolio-item.cursor-hover-style2:hover .dtportfolio-image-overlay { cursor:url(../images/hover-icon.png), auto; } .dtportfolio-item.cursor-hover-style2:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/hover-icon-dark.png), auto; } .dtportfolio-item.cursor-hover-style3:hover .dtportfolio-image-overlay { cursor:url(../images/eye_icon.png), auto; } .dtportfolio-item.cursor-hover-style3:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/eye_icon_dark.png), auto; } .dtportfolio-item.cursor-hover-style4:hover .dtportfolio-image-overlay { cursor:url(../images/search_icon.png), auto; } .dtportfolio-item.cursor-hover-style4:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/search_icon_dark.png), auto; } .dtportfolio-item.cursor-hover-style5:hover .dtportfolio-image-overlay { cursor:url(../images/expand_icon.png), auto; } .dtportfolio-item.cursor-hover-style5:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/expand_icon_dark.png), auto; } .dtportfolio-item.cursor-hover-style6:hover .dtportfolio-image-overlay { cursor:url(../images/border_icon.png), auto; } .dtportfolio-item.cursor-hover-style6:hover .dtportfolio-image-overlay.hover-content-color-dark { cursor:url(../images/border_icon_dark.png), auto; } .isotope-hidden, .hidden { display:none !important; } .dtportfolio-item, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .dtportfolio-item{ -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } .dtportfolio-infinite-load-more { float:left; width:100%; text-align:center; margin-bottom:50px; } /*----*****---- << Hover Title Icons Overlay >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay { background-color:rgba(0, 0, 0, 0.7); left:0; right:0; top:0; bottom:0; height:100%; margin:auto; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay:hover .dtportfolio-image-overlay { height:100%; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay-details { left:0px; bottom:0; top:0; right:0; text-align:center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); width:100%; padding:20px 20px 15px; border:0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay h2 { font-size:18px; text-transform:uppercase; font-weight:600; } .dtportfolio-container-fullpage.fullpage-splitted-section .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay h2 { font-size:35px; margin-bottom:20px; } .dtportfolio-container-fullpage.fullpage-splitted-section .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay-details .categories { font-size:16px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-title-icons-overlay.hover-state .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-title-icons-overlay.active .dtportfolio-image-overlay .dtportfolio-image-overlay-details { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links { left:inherit; left:100%; width:100%; height:auto; bottom:57px; top:inherit; display:none; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links a { background:#000000; border-radius:0px; border:none; top:auto; bottom:auto; right:0px; float:right; width:60px; height:60px; margin:0px 0px 1px 1px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links a span { font-size:28px; line-height:60px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links a:hover { color:#ffffff; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay:hover .dtportfolio-image-overlay .links { left:0px; } /*----*****---- << Hover Title Overlay >> ----*****----*/ .dtportfolio-container .dtportfolio-item.dtportfolio-hover-title-overlay { padding:2px; } .dtportfolio-column .dtportfolio-item.dtportfolio-hover-title-overlay { position:relative; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay { background:rgba(0, 0, 0, 0.6); left:10px; top:10px; width:auto; height:auto; right:10px; bottom:10px; } .dtportfolio-item.dtportfolio-hover-title-overlay:hover:before { opacity:1; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay-details { border:0; padding:0; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay h2 { font-size:19px; } .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay .links a:last-child { background:url(../images/plus_icon.png) no-repeat; width:50px; height:50px; content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:0; border-radius: 0; } @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari */ ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-two-fifth .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay, ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-two-third .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay { width:94.5%; height:89.5%; } ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-two-fifth .dtportfolio-item.dtportfolio-hover-title-overlay:before, ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-two-third .dtportfolio-item.dtportfolio-hover-title-overlay:before { width:96.7%; height:94%; } ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-one-fifth #dt_portfolios-153.dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay { height:94.6%; } ::i-block-chrome,.dtportfolio-single-grid .dtportfolio-one-fifth #dt_portfolios-153.dtportfolio-item.dtportfolio-hover-title-overlay:before { height:96.8%; } } /*----*****---- << Hover Icons Only >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links a { margin:0px 5px; border:0px; border-radius:0px; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links a:hover { background:none; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay-details { bottom: auto; right:0; border:0; position:relative; height:auto; text-align:center; padding:0 10px; z-index:1; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay h2 { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); z-index:9; font-size:20px; -wekbit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; margin-bottom:10px; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay-details .categories { -wekbit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .dtportfolio-item.dtportfolio-hover-icons-only:hover .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-hover-icons-only.hover-state .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-icons-only.active .dtportfolio-image-overlay h2 { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay { transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; background: rgba(0, 0, 0, 0.8); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links { width:100%; height:auto; text-align:center; position:relative; z-index:2; margin-bottom:20px; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links a { -webkit-transform: translateY(-60px);-moz-transform: translateY(-60px); -o-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); -wekbit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .dtportfolio-item.dtportfolio-hover-icons-only:hover .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-icons-only:hover .dtportfolio-image-overlay-details .categories, .dtportfolio-item.dtportfolio-hover-icons-only.hover-state .dtportfolio-image-overlay-details .categories, .dtportfolio-item.dtportfolio-hover-icons-only.hover-state .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-icons-only.active .dtportfolio-image-overlay-details .categories, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-icons-only.active .dtportfolio-image-overlay .links a { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links a:last-child { -webkit-transition: all 0.9s; -moz-transition: all 0.9s; -o-transition: all 0.9s; transition: all 0.9s; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay-details { display:none; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay .links { height:50px; } /*----*****---- << Hover Classic >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay-details { left:0px; bottom:auto; right:inherit; width:100%; text-align:center; padding:0 5px; border:0px; position:relative; overflow:hidden; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay { background:none; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-classic.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-splitted-section.dtportfolio-hover-classic.active .dtportfolio-image-overlay-details { bottom:0px; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay h2 { font-size:18px; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links { left:0px; right:0px; top:0px; bottom:0px; margin:auto; width:120px; height:45px; display:none; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links a { margin:0px 5px; bottom:100%; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links a:first-child { right:100%; bottom:0px; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay .links a:first-child { right:0px; bottom:90%; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links a:last-child { left:100%; bottom:0px; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay .links a:last-child { left:0px; bottom:90%; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay .links a:last-child { -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease; } /*----*****---- << Hover Minimal Icons >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-minimal-icons figure img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay { background:none; opacity:1; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before, .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:after, .dtportfolio-item.dtportfolio-hover-minimal-icons figure:before, .dtportfolio-item.dtportfolio-hover-minimal-icons figure:after { content: ''; position: absolute; background: #000; transition: transform 0.2s; -webkit-transition: transform 0.2s; -moz-transition: transform 0.2s; -o-transition: transform 0.2s; -ms-transition: transform 0.2s; z-index: 100; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before, .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:after { left: 0; width: 100%; height: 10px; transform: scale3d(0, 1, 1); -webkit-transform: scale3d(0, 1, 1); -moz-transform: scale3d(0, 1, 1); -o-transform: scale3d(0, 1, 1); -ms-transform: scale3d(0, 1, 1); } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before { top: 0; transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; -ms-transform-origin: 100% 50%; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:after { bottom: 0; transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; } .dtportfolio-item.dtportfolio-hover-minimal-icons:hover .dtportfolio-image-overlay:before, .dtportfolio-item.dtportfolio-hover-minimal-icons:hover .dtportfolio-image-overlay:after, .dtportfolio-item.dtportfolio-hover-minimal-icons:hover figure:before, .dtportfolio-item.dtportfolio-hover-minimal-icons:hover figure:after, .dtportfolio-item.dtportfolio-hover-minimal-icons.hover-state .dtportfolio-image-overlay:before, .dtportfolio-item.dtportfolio-hover-minimal-icons.hover-state .dtportfolio-image-overlay:after, .dtportfolio-item.dtportfolio-hover-minimal-icons.hover-state figure:before, .dtportfolio-item.dtportfolio-hover-minimal-icons.hover-state figure:after { transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -ms-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.4s; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; } .dtportfolio-item.dtportfolio-hover-minimal-icons figure:before, .dtportfolio-item.dtportfolio-hover-minimal-icons figure:after { top: 0; width: 10px; height: 100%; transform: scale3d(1, 0, 1); } .dtportfolio-item.dtportfolio-hover-minimal-icons figure:before { left: 0; transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; } .dtportfolio-item.dtportfolio-hover-minimal-icons figure:after { right: 0; transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay h2, .dtportfolio-item.details-below-image.dtportfolio-hover-minimal-icons .details-holder h2 { font-size: 14px; text-transform: uppercase; background-color: #000; padding: 8px 13px; font-weight: 400; display:inline-block; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links a { background:#000000; border:none; border-radius:0px; position:absolute; width:60px; height:60px; display:inline-block; line-height:66px; font-size:24px; margin:0px; z-index:1; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links a span { line-height:60px; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links a:last-child { margin-left:60px; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links { bottom:0px; left:0px; display:none; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links a { bottom:-100%; left:0px; } .dtportfolio-item.dtportfolio-hover-minimal-icons:hover .dtportfolio-image-overlay .links a { bottom:0px; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay .links a:hover { color:#ffffff; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay-details { border:0; padding:0; top: 25px; right: 20px; bottom: auto; } .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay-details .categories { display:none; } .isotope .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay { width:100%; height:100%; left:0px; bottom:0px; } .isotope .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before { left:0px; bottom:0px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay h2 { font-size: 20px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay-details { right: 15px; } /*----*****---- << Hover Presentation >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details { width:100%; text-align:center; border:none; right:0; transition: all 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85); -moz-transition: all 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85); -o-transition: all 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85); -webkit-transition: all 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85); bottom:-30px; padding:20px; text-align:center; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay h2 { font-size:18px; text-transform:uppercase; letter-spacing: 1.5px; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details .categories { margin-bottom:10px; display:none; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details .categories a { position:relative; padding:0px 15px 0px 17px; font-size:12px; text-transform:uppercase; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details .categories a:before { content:""; position:absolute; width:8px; height:8px; left:0px; top:4px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details .categories a.nonveg:before { background:#bb0605; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details .categories a.veg:before { background:#328500; } .dtportfolio-item.dtportfolio-hover-presentation:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-presentation.hover-state .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details { bottom:0px; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay-details h2 { -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); -moz-transition: all 1s cubic-bezier(0.37, 0.31, 0.2, 0.85); -o-transition: all 1s cubic-bezier(0.37, 0.31, 0.2, 0.85); -webkit-transition: all 1s cubic-bezier(0.37, 0.31, 0.2, 0.85); transition: all 1s cubic-bezier(0.37, 0.31, 0.2, 0.85); } .dtportfolio-item.dtportfolio-hover-presentation:hover .dtportfolio-image-overlay-details h2, .dtportfolio-item.dtportfolio-hover-presentation.hover-state .dtportfolio-image-overlay-details h2, .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details h2 { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay { background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0,0)), color-stop(100%,rgba(0, 0, 0, 0.8))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.8) 100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.8) 100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.8) 100%); /* IE10+ */ background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.8) 100%); /* W3C */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a:last-child { width:30px; height:30px; content:""; position:absolute; right:10px; top:10px; border-width:2px; color: #000; border-radius: 5px; background-color:#fff; font-size:13px; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: scale(.9); transform: scale(.9); line-height: 25px; margin:0; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a:hover { background:none; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a span { line-height: 25px; font-family: Font Awesome\ 5 Free; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a span:before { content:"\f31e"; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a:last-child:hover { color:#fff; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-presentation:hover .dtportfolio-image-overlay .links a { bottom:0px; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links a:first-child { display:none; } .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay .links { bottom:-100%; } .dtportfolio-item.dtportfolio-hover-presentation:hover .dtportfolio-image-overlay .links { bottom:0px; } .dtportfolio-item.dtportfolio-hover-presentation:hover .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-presentation.hover-state .dtportfolio-image-overlay .links a { -webkit-transform: scale(1); transform: scale(1); } /*----*****---- << Hover Girly >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-girly { overflow: hidden; } .dtportfolio-item.dtportfolio-hover-girly:hover figure img, .dtportfolio-item.dtportfolio-hover-girly.hover-state figure img { transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -webkit-transition: transform 1s ease-out; -moz-transition: transform 1s ease-out; transition: transform 1s ease-out; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay h2 { font-size:24px; font-weight: 500; padding-bottom:30px; position:relative; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay-details .categories { font-size:14px; position:relative; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay-details { border:0px; text-align:center; width:100%; position:relative; right:0; bottom:0; padding:20px; display:none; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay-details h2:before { content:""; position:absolute; width:40px; height:2px; background:#ffffff; left:0px; right:0px; bottom:13px; margin:auto; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay-details h2:hover:before { width: 60px; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay a { color:#ffffff; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay { top:0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .dtportfolio-item.dtportfolio-hover-girly:hover .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-girly.hover-state .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-girly.dtportfolio-fullpage-default.active .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-girly.dtportfolio-fullpage-splitted-section.active .dtportfolio-image-overlay { height:100%; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay .links { text-align:center; bottom:0px; height:45px; left:0; right:0; top:0; width:118px; margin:auto; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay .links a { border:0px; margin:0px 2px; border-radius: 0px; background-color: #ffffff; -webkit-transition: transform 0.5s, background-color 0.5s; -moz-transition: transform 0.5s, background-color 0.5s; transition: transform 0.5s, background-color 0.5s; bottom:auto; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay .links a:hover { color: #ffffff; } .dtportfolio-item.dtportfolio-hover-girly:hover .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-girly.hover-state .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-girly.active .dtportfolio-image-overlay .links a { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .details-holder { text-align: center; position: relative; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .details-holder h2 { bottom: 0; font-size: 20px; font-weight: 500; left: 0; margin: 0; padding: 15px; position: absolute; right: 0; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image:hover .details-holder h2 { bottom: -100px; opacity: 0; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .details-holder h2 a { color: #ffffff; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .details-holder p { display: none; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .dtportfolio-image-overlay { bottom: 0; display: flex; flex-direction: column-reverse; height: 0; left: 0; opacity: 0; position: absolute; right: 0; width: 100%; justify-content: center; align-items: center; align-content: center; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image:hover .dtportfolio-image-overlay { height: 100%; opacity: 1; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .dtportfolio-image-overlay .links { bottom: 0; left: 0; margin: 0; position: relative; right: 0; text-align: center; top: 0; width: 100%; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .dtportfolio-image-overlay-details { display: inline-block; padding: 0; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .dtportfolio-image-overlay h2 { font-size: 24px; font-weight: 500; padding-bottom: 30px; position: relative; margin-bottom: 10px; } .dtportfolio-item.dtportfolio-hover-girly.details-below-image .dtportfolio-image-overlay-details .categories { display: none; } .dtportfolio-sorting.type8 a { background:#f7f7f7; border:none; border-radius:15px 0px; padding:10px 20px 10px; } /*----*****---- << Hover Art >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay { border-radius:0; left:0; top:0; width:auto; height:auto; right:0; bottom:0; background-color: rgba(0, 0, 0, 0.85); transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; } .dtportfolio-item.dtportfolio-hover-art figure img { transition: filter 0.4s, transform 0.4s; -o-transition: -o-filter 0.4s, -o-transform 0.4s; -ms-transition: -ms-filter 0.4s, -ms-transform 0.4s; -moz-transition: -moz-filter 0.4s, -moz-transform 0.4s; -webkit-transition: -webkit-filter 0.4s, -webkit-transform 0.4s; } .dtportfolio-item.dtportfolio-hover-art:hover figure img, .dtportfolio-item.dtportfolio-hover-art.hover-state figure img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); filter: gray; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a:first-child { background:url(../images/plus_icon.png) no-repeat; width:50px; height:50px; content:""; border:0; border-radius: 0; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay.hover-content-color-dark .links a:first-child { background:url(../images/plus_icon_dark.png) no-repeat; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a:first-child > span, .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a:last-child { display:none; } .dtportfolio-item.dtportfolio-hover-art:hover .dtportfolio-image-overlay .links a:first-child { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links:after { background:none; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links { text-align:center; width:100%; height:100%; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a { border:none; font-size:40px; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a:first-child { margin-left:0px; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a { left:0px; right:0px; top:0px; bottom:0px; margin:auto; height:44px; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay .links a:hover { color:#6e4d27; } .dtportfolio-item.dtportfolio-hover-art .dtportfolio-image-overlay-details { display:none; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay .dtportfolio-image-overlay-details { display:none; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay { background-color:rgba(0, 0, 0, 0.85); } /*----*****---- << Hover with Gallery Thumb >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul { display:block; width:50%; position:absolute; padding-left:20px; bottom:0; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul li { display:inline-block; width:32%; margin:0 1% 0 0; padding:0; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb:hover figure img, .dtportfolio-item.dtportfolio-hover-with-gallery-thumb.hover-state figure img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details { width:49%; right:0; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details h2 { text-transform:uppercase; margin-bottom:3px; font-weight:500; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details .categories { font-style:italic; } .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay { background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(bottom,rgb(0, 0, 0),rgb(0, 0, 0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(bottom,rgb(0, 0, 0),rgb(0, 0, 0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(bottom,rgb(0, 0, 0),rgb(0, 0, 0,0)); /*Fx 3.6-15*/ } .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul, .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul, .with-both-sidebar .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul { display:none; } .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details, .with-both-sidebar .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details { width:100%; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-thumb:hover .dtportfolio-image-overlay-details { bottom:10px; } .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details h2 { font-size:20px; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details h2, .page-with-sidebar .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details h2 { font-size:18px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay-details { right:0; } /*----*****---- << Hover with Gallery Thumb >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay { background:rgba(0, 0, 0, 0.8); } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-details { position: static; bottom: auto; height: auto; margin-bottom: 20px; text-align:left; padding:0; display:inline-block; width:100%; } .dtportfolio-item.dtportfolio-hover-with-gallery-list:hover figure img, .dtportfolio-item.dtportfolio-hover-with-gallery-list.hover-state figure img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul { display:block; margin: 35px 0 0; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li { display:inline-block; width:32%; margin:0 1% 0 0; padding:0; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link { display:inline-block; text-decoration:underline; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link span { margin-left:5px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link:hover span { margin-left:5px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link:hover { letter-spacing:1.2px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container { width: 50%; padding: 0 1%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; margin:0 auto; font-size:14px; letter-spacing:1px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2 { font-weight:500; text-transform:uppercase; margin-bottom:3px; position:relative; display:inline-block; padding-bottom:3px; width: 100%; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-details .categories { font-style:italic; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > p { margin:0 0 20px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2:after { width: 35%; content: ""; position: absolute; left: 0; bottom: 2px; background: #fff; height: 1px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2:hover:after { width: 100%; height: 2px; } .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li:hover, .dtportfolio-item.dtportfolio-hover-with-gallery-thumb .dtportfolio-image-overlay ul li:hover { opacity: 0.8; cursor: pointer; } .dtportfolio-multiscroll-container .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container { width:70%; } .left-header .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > p { display:none; } .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul, .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul, .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > p, .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > p { display:none; } .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2 { font-size:18px; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2 { font-size:16px; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-details { margin-bottom:10px; } .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container { width:70%; } .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > p { display:none; } .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay h2 { font-size:17px; } .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li:nth-child(4), .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li:nth-child(5), .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul li:nth-child(6) { display: none; } .page-with-sidebar .dtportfolio-item.dtportfolio-one-half.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container > ul { margin:25px 0 0; } /*----*****---- << Hover Grayscale >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay-details .categories { display:none; } .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay { background:none; } .dtportfolio-item.dtportfolio-hover-grayscale figure img, .dtportfolio-multiscroll.dtportfolio-hover-grayscale .dtportfolio-image-holder { filter:gray; /* IE6-9 */ -webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ -moz-filter: grayscale(100%); -o-filter: grayscale(100%); } .dtportfolio-item.dtportfolio-hover-grayscale:hover figure img, .dtportfolio-item.dtportfolio-hover-grayscale.hover-state figure img, .dtportfolio-multiscroll.dtportfolio-hover-grayscale:hover .dtportfolio-image-holder, .dtportfolio-multiscroll.dtportfolio-hover-grayscale.hover-state .dtportfolio-image-holder { filter:gray; /* IE6-9 */ -webkit-filter:grayscale(0); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ -moz-filter: grayscale(0); -o-filter: grayscale(0); } .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay-details { background-color: #000; padding:10px 20px; bottom: 30px; right: -100%; } .dtportfolio-item.dtportfolio-hover-grayscale:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-grayscale.hover-state .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-grayscale.active .dtportfolio-image-overlay-details { right:30px; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-grayscale:hover .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-grayscale.hover-state .dtportfolio-image-overlay-details { right:0; } .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay-details h2 { font-size:17px; } .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay .links { display:none; } /*----*****---- << Hover Highlighter >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-highlighter .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-highlighter .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-highlighter .dtportfolio-image-overlay { background: rgba(0, 0, 0, 0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .dtportfolio-item.dtportfolio-hover-highlighter:hover figure img, .dtportfolio-item.dtportfolio-hover-highlighter.hover-state figure img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } /*----*****---- << Hover Bottom >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay-details { position:relative; right:auto; bottom:auto; text-align:center; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay .links { left:auto; height:auto; position:relative; top:auto; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay { text-align:center; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay .links a:first-child, .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay-details .categories { display:none; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay .links a:last-child { border:0; margin:0 0 15px; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay .links a:hover { background-color:inherit; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; text-align: center; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay { background-color: rgba(0, 0, 0, 0.85); } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay:after { content:""; position:absolute; width:0; height:12px; left:0; right:0; margin:auto; bottom:0; background-color:#353535; } .dtportfolio-item.dtportfolio-hover-bottom-border:hover .dtportfolio-image-overlay:after, .dtportfolio-item.dtportfolio-hover-bottom-border.hover-state .dtportfolio-image-overlay:after { width:100%; } .dtportfolio-item.dtportfolio-hover-bottom-border:hover figure img, .dtportfolio-item.dtportfolio-hover-bottom-border:hover-state figure img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } .dtportfolio-item.dtportfolio-hover-bottom-border .dtportfolio-image-overlay h2 { font-size:20px; } .dtportfolio-item.dtportfolio-hover-bottom-border.hover-state .dtportfolio-image-overlay-details { bottom:auto; } /*----*****---- << Portfolio Categories List >> ----*****----*/ .dtportfolio-categories-list > .dtportfolio-column { margin-bottom:25px; } .dtportfolio-categories-list .image-holder { float:left; width:100%; position:relative; overflow:hidden; } .dtportfolio-categories-list .image-holder:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .dtportfolio-categories-list .image-holder:hover .details-holder { background-color:rgba(0, 0, 0, 0.3); } .dtportfolio-categories-list .details-holder { width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; } .dtportfolio-categories-list .details-holder h2 { font-size:17px; display:inline-block; font-weight:normal; position:absolute; left:0; bottom:0; padding-left: 15px; margin-bottom: 15px; color:#fff; } .dtportfolio-categories-list .details-holder:after { background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),color-stop(56%,rgba(0,0,0,0.1)),color-stop(93%,rgba(0,0,0,0.6)),to(rgba(0,0,0,0.69))); background-image: -webkit-linear-gradient(transparent 0%,transparent 50%,rgba(0,0,0,0.1) 56%,rgba(0,0,0,0.6) 93%,rgba(0,0,0,0.69) 100%); background-image: linear-gradient(transparent 0%,transparent 50%,rgba(0,0,0,0.1) 56%,rgba(0,0,0,0.6) 93%,rgba(0,0,0,0.69) 100%); content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .dtportfolio-categories-list .details-holder h2 a { color:#fff; } .dtportfolio-categories-list .total-items-count { display:inline-block; position: absolute; bottom: 10px; right: 10px; color: #fff; cursor: pointer; } .dtportfolio-categories-list .total-items-count span { background-color: #000; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; font-size: 12px; display: inline-block; position: absolute; text-align: center; right: 0; bottom: 0; } .dtportfolio-categories-list .total-items-count span:first-child { z-index:1; } .dtportfolio-categories-list .total-items-count span:last-child { transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } .dtportfolio-categories-list .total-items-count:hover span:first-child { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); } .dtportfolio-categories-list .total-items-count:hover span:last-child { z-index: 9; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .dtportfolio-categories-list .with-gallery-view .image-holder:hover img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } /*----*****---- << Hover Highlighter >> ----*****----*/ .dtportfolio-item.dtportfolio-hover-with-intro .dtportfolio-image-overlay { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; background:#000; padding:40px; } .dtportfolio-item.dtportfolio-hover-with-intro .dtportfolio-image-overlay-details { position:static; text-align:left; font-size: 16px; line-height: 28px; padding:0; margin: 0; } .dtportfolio-item.dtportfolio-hover-with-intro .dtportfolio-image-overlay-details h2 { line-height:40px; } /*----*****---- << Details Below Image >> ----*****----*/ .dtportfolio-item.details-below-image .details-holder { display:block; float:left; width:100%; } .dtportfolio-container.dtportfolio-container-framed { padding: 10px 0 0; } .dtportfolio-item.no-space.details-below-image .details-holder, .dtportfolio-swiper-container .dtportfolio-fullpage.dtportfolio-item.dtportfolio-one-column.no-space.dtportfolio-hover-with-details.details-below-image .details-holder { padding-left:10px; } .dtportfolio-fullpage.dtportfolio-item.dtportfolio-one-column.no-space.details-below-image .details-holder { padding-left: 0; } .dtportfolio-item.details-below-image .details-holder h2 { font-size:19px; margin:15px 0 0; font-weight:400; letter-spacing: 0; } .dtportfolio-item.details-below-image .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-minimal-icons.details-below-image .details-holder .categories, .dtportfolio-item.dtportfolio-hover-extended.details-below-image .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-boxed.details-below-image .dtportfolio-image-overlay { display:none; } .dtportfolio-item.details-below-image.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container { width: 100%; } .dtportfolio-item.details-below-image.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container .dtportfolio-gallery-link { text-align: center; } .dtportfolio-item.dtportfolio-hover-minimal-icons.details-below-image .details-holder h2 a { color:#fff; } .dtportfolio-item.dtportfolio-hover-minimal-icons.details-below-image .details-holder h2 { font-size:14px; margin-bottom:20px; } .dtportfolio-item.dtportfolio-framed .dtportfolio-framed-holder { display: block; padding: 20px; background-color: #f5f5f5; float: left; width: 100%; position:relative; } .dtportfolio-item.dtportfolio-framed.dtportfolio-hover-minimal-icons.details-below-image .dtportfolio-framed-holder h2 { margin-bottom:0; } .dtportfolio-item.dtportfolio-framed { -webkit-transition: all .6s cubic-bezier(.18,.89,.32,.85); -moz-transition: all .6s cubic-bezier(.18,.89,.32,.85); transition: all .6s cubic-bezier(.18,.89,.32,.85); } .dtportfolio-item.dtportfolio-framed .dtportfolio-framed-holder:after { content: " "; position: absolute; width: 80%; display: block; bottom: 17px; left: 10%; height: 50%; box-shadow: 0 17px 48px 0 rgba(0, 0, 0, .09); z-index: -1; } .dtportfolio-item.dtportfolio-framed:hover { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } .dtportfolio-item.dtportfolio-hover-centered-box.details-below-image .dtportfolio-image-overlay { display:none; } /*----*****---- << Fixed Portfolio >> ----*****----*/ .dtportfolio-item.dtportfolio-fixed .dtportfolio-image-holder { min-height: 400px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; position: relative; } .dtportfolio-one-column.dtportfolio-fixed .dtportfolio-image-holder { min-height: 100vh; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay-details .categories { margin-bottom:15px; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link { background-color: #000; padding:7px 15px; display:inline-block; margin-top:10px; position:relative; z-index:9; border:1px solid #000; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:after, .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:before { position: absolute; content: ""; width: auto; height: auto; border: 3px solid #fff; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:before { border-width: 0 0 1px 1px; bottom: 0; left: 0; right: 0; top: 0; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:after { border-width: 1px 1px 0 0; bottom: 0; left: 0; right: 0; top: 0; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:hover:before { right: 100%; top: 100%; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:hover:after { bottom: 100%; left: 100%; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link .fa { margin-left:10px; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay-details { width:330px; right:10px; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-gallery-link:hover { background-color:inherit; border-color: #fff; } .dtportfolio-without-fullwidth-wrapper .dtportfolio-one-fourth.dtportfolio-hover-with-details .dtportfolio-image-overlay-details .categories, .dtportfolio-without-fullwidth-wrapper .dtportfolio-one-fourth.dtportfolio-hover-with-details .dtportfolio-image-overlay-details p, .dtportfolio-without-fullwidth-wrapper .dtportfolio-one-third.dtportfolio-hover-with-details .dtportfolio-image-overlay-details .categories, .dtportfolio-without-fullwidth-wrapper .dtportfolio-one-third.dtportfolio-hover-with-details .dtportfolio-image-overlay-details p { display: none; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-details .dtportfolio-image-overlay-details, .dtportfolio-one-third.dtportfolio-hover-with-details .dtportfolio-image-overlay-details { width: auto; right: 0; } .dtportfolio-item.dtportfolio-one-fourth.dtportfolio-hover-with-details .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-one-third.dtportfolio-hover-with-details .dtportfolio-image-overlay h2 { font-size: 19px; } .dtportfolio-without-fullwidth-wrapper .dtportfolio-one-fourth.dtportfolio-hover-with-details .dtportfolio-gallery-link { font-size: 14px; padding: 5px 10px; } .dtportfolio-without-fullwidth-wrapper .dtportfolio-item.dtportfolio-fixed .dtportfolio-image-holder { min-height: 300px; } /*----*****---- << Portfolio Columns >> ----*****----*/ .dtportfolio-container .dtportfolio-item { margin-left:0px; margin-right:0px; clear:none; } .dtportfolio-container.with-space .dtportfolio-item { padding:0 15px 30px; } .dtportfolio-container.with-space { margin:0px -10px; } .portfolio-fullwidth-container { float:left; width:100%; } .dtportfolio-container, .dtportfolio-container-striped { height:2000px; } .dtportfolio-container.swiper-wrapper, .dtportfolio-container-striped { height:auto; } .dtportfolio-container.swiper-wrapper.with-space { margin:0; } .dtportfolio-container.dtportfolio-single-container, .dtportfolio-container.remove-default-height, .dtportfolio-container.dtportfolio-infinite-portfolio-container, .dtportfolio-container.portfolio-container-carousel { height:auto; } .related-portfolios .dtportfolio-container, .related-portfolios .dtportfolio-container-striped { min-height:inherit; } .dtportfolio-container .dtportfolio-one-fourth, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth { width: 25%; } .dtportfolio-container .dtportfolio-one-third, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third { width: 33.333333%; } .dtportfolio-container .dtportfolio-one-fifth, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth { width:20%; } .dtportfolio-container .dtportfolio-one-sixth, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth { width:16.666%; } .dtportfolio-container .dtportfolio-one-seventh, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh { width:14.28%; } .dtportfolio-container .dtportfolio-one-eight, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight { width:12.5%; } .dtportfolio-container .dtportfolio-one-nineth, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth { width:11.11%; } .dtportfolio-container .dtportfolio-one-tenth, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth { width:10%; } .dtportfolio-container .dtportfolio-one-half, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half { width: 50%; } .page-with-sidebar .dtportfolio-container .dtportfolio-one-sixth, .page-with-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth, .page-with-sidebar .dtportfolio-container .dtportfolio-one-seventh, .page-with-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh, .page-with-sidebar .dtportfolio-container .dtportfolio-one-eight, .page-with-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight, .page-with-sidebar .dtportfolio-container .dtportfolio-one-nineth, .page-with-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth, .page-with-sidebar .dtportfolio-container .dtportfolio-one-tenth, .page-with-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth { width: 20%; } .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-one-half, .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-column.no-space.dtportfolio-one-half, .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-column.no-space.dtportfolio-one-third, .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-column.no-space.dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-column.dtportfolio-one-third, .with-both-sidebar .dtportfolio-container-wrapper .dtportfolio-column.dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-container .dtportfolio-one-half, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-container .dtportfolio-column.dtportfolio-one-third, .with-both-sidebar .dtportfolio-container .dtportfolio-column.dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-container .dtportfolio-one-fifth, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth, .with-both-sidebar .dtportfolio-container .dtportfolio-one-sixth, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth, .with-both-sidebar .dtportfolio-container .dtportfolio-one-seventh, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh, .with-both-sidebar .dtportfolio-container .dtportfolio-one-eight, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight, .with-both-sidebar .dtportfolio-container .dtportfolio-one-nineth, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth, .with-both-sidebar .dtportfolio-container .dtportfolio-one-tenth, .with-both-sidebar .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth, .page-with-sidebar.with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-third, .with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-half { width: 100%; } .page-with-sidebar.with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-fourth, .with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-third, .page-with-sidebar.with-both-sidebar .dtportfolio-categories-list .dtportfolio-one-half { margin:0 0 20px; } .page-with-sidebar .dtportfolio-container .dtportfolio-one-third.dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay-details, .page-with-sidebar .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay-details { display:none; } /*----*****---- << Type1 >> ----*****----*/ .with-both-sidebar .dtportfolio-sorting.type2 { width:100%; } .with-both-sidebar .dtportfolio-sorting.type2 a { font-size:10px; padding:15px 9px 14px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links a, .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-third .dtportfolio-image-overlay .links a, .page-template-tpl-portfolio .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links a { width:50px; height:50px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links a span, .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-third .dtportfolio-image-overlay .links a span, .page-template-tpl-portfolio .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links a span { line-height:50px; font-size:20px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay .links, .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-third .dtportfolio-image-overlay .links, .page-template-tpl-portfolio .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links { bottom:50px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay h2 { font-size:16px; margin-bottom:5px; letter-spacing:1.5px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay-details .categories { font-size:14px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links { bottom:65px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay h2 { font-size:11px; } .page-with-sidebar.with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-icons-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links { bottom:49px; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay .links a { font-size:12px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-overlay.dtportfolio-one-third .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-title-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links a { font-size:13px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-title-overlay.dtportfolio-one-fourth .dtportfolio-image-overlay .links a { font-size:12px; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-one-fourth .dtportfolio-image-overlay-details .categories { display:none; } .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-one-fourth .dtportfolio-image-overlay-details .categories { display:none; } .with-both-sidebar .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-one-fourth .dtportfolio-image-overlay-details .categories { display:block; } .page-with-sidebar .dtportfolio-item.dtportfolio-hover-presentation.dtportfolio-one-fourth:hover .dtportfolio-image-overlay-details { bottom:60px; } /*----*****---- << Multiscroll >> ----*****----*/ .dtportfolio-multiscroll-container { float: left; width: 100%; position:relative; } .dtportfolio-multiscroll .dtportfolio-image-holder { background-position: center; background-size: cover; } .multiscroll-button.down:before { content: '\f107'; } .multiscroll-button.up:before { content: '\f106'; } .multiscroll-button:before { position: absolute; color: #131313; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-family: Font Awesome\ 5 Free; font-style:normal; font-weight:900; font-size: 16px; line-height: 40px; display: block; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease;} .multiscroll-button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 40px; cursor: pointer; background-color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; z-index: 9; } .multiscroll-button.down { right:50.08%; } .multiscroll-button.up { left:49.95%; } .multiscroll-button.up:hover { -webkit-transform: translateY(-70%); -ms-transform: translateY(-70%); transform: translateY(-70%); } .multiscroll-button.down:hover { -webkit-transform: translateY(-20%); -ms-transform: translateY(-20%); transform: translateY(-20%); } .multiscroll-button:hover { background-color:#fff; } .dtportfolio-multiscroll-container { float: left; width: 100%; height: 100%; } .dtportfolio-multiscroll .dtportfolio-image-holder, .dtportfolio-multiscroll figure, .inner-wrapper, .wrapper { height: 100%; } /*----*****---- << Carousel >> ----*****----*/ .dtportfolio-swiper-container .dtportfolio-image-holder { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-pagination-wrapper:empty { display: none; } .dtportfolio-swiper-container, .dtportfolio-swiper-container .dtportfolio-container .portfolio, .dtportfolio-swiper-container .dtportfolio-container .dtportfolio-item figure, .dtportfolio-swiper-container .dtportfolio-item.dtportfolio-framed .dtportfolio-framed-holder { height:100%; } .dtportfolio-swiper-arrow-left, .dtportfolio-swiper-arrow-right { position: absolute; top: 0; height: 100%; width: 30%; z-index: 15; overflow: hidden; cursor: none; } .dtportfolio-swiper-arrow-middle { position: absolute; top: 0; left: 0; height: 100%; width: 40%; z-index: 15; overflow: hidden; cursor: none; right: 0; margin: 0 auto; } .dtportfolio-swiper-arrow-middle:hover .dtportfolio-swiper-arrow-click.middle { opacity: 1; visibility: visible; } .dtportfolio-swiper-arrow-left { left: 0; } .dtportfolio-swiper-arrow-left:hover .dtportfolio-swiper-arrow-click.left { opacity: 1; visibility: visible; } .dtportfolio-swiper-arrow-right { right: 0; } .dtportfolio-swiper-arrow-right:hover .dtportfolio-swiper-arrow-click.right { opacity: 1; visibility: visible; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click { font-size: 30px; line-height: 40px; font-weight: 400; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; opacity: 0; visibility: hidden; color: #fff; width: 32px; height: 32px; transition: opacity 0.3s ease, visibility 0.3s ease; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.left { left: 50px; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.right { right: 50px; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.right .dtportfolio-swiper-arrow { left: auto; right: 60px; background:url(../images/right-arrow.png) no-repeat center; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.left .dtportfolio-swiper-arrow { background:url(../images/left-arrow.png) no-repeat center; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.right .dtportfolio-swiper-number { right: 0; left: auto; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.right.disabled, .dtportfolio-swiper-container .swiper-arrow-click.left.disabled { opacity: 0; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click .dtportfolio-swiper-arrow { width: 42px; height: 22px; position: absolute; left: 60px; top: 50%; font-family: Font Awesome\ 5 Free; font-style:normal; font-weight:900; } .dtportfolio-swiper-container .dtportfolio-swiper-arrow-click.middle .dtportfolio-swiper-arrow { background:url(../images/middle-arrow.png) no-repeat center; width:60px; } .dtportfolio-swiper-container .dark .dtportfolio-swiper-arrow-click.right .dtportfolio-swiper-arrow { background:url(../images/right-arrow-dark.png) no-repeat center; } .dtportfolio-swiper-container .dark .dtportfolio-swiper-arrow-click.left .dtportfolio-swiper-arrow { background:url(../images/left-arrow-dark.png) no-repeat center; } .dtportfolio-swiper-container .dark .dtportfolio-swiper-arrow-click.middle .dtportfolio-swiper-arrow { background:url(../images/middle-arrow-dark.png) no-repeat center; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-progress-pagination { position:absolute; width:12%; left:0; right:0; margin:auto; bottom:30px; background: rgba(255, 255, 255, 0.22); z-index:9; height:5px; } .dtportfolio-swiper-pagination-holder .swiper-pagination-progressbar-fill { background: rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder .swiper-scrollbar-drag { border-radius: 0; } .swiper-container-vertical .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-progress-pagination { height: 12%; width: 5px; right: 20px; left: auto; top: 0; bottom: 0; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-progress-pagination { background: rgba(0, 0, 0, 0.22); } .dtportfolio-swiper-pagination-holder.dark .swiper-pagination-progressbar-fill { background: rgba(0, 0, 0, 0.7); } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-scrollbar { background: rgba(0, 0, 0, 0.55); } .dtportfolio-swiper-pagination-holder.dark .swiper-scrollbar-drag { background: #ffffff; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-pagination-wrapper { position: absolute; right: 50px; width: 64px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 100; background: rgba(255, 255, 255, 0.7); padding-top: 20px; padding-bottom: 15px; transition: background-color 0.7s; -moz-transition: background-color 0.7s; -webkit-transition: background-color 0.7s; -o-transition: background-color 0.7s; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-fraction-pagination, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination { position:static; height:auto; display:block; color:#000; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { transform: rotate(55deg); -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -o-transform: rotate(55deg); -ms-transform: rotate(55deg); background-color: #000; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-fraction-pagination .total { top: -15px; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-fraction-pagination .current { top: 9px; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-arrow-pagination { position:static; padding: 10px 0; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a { width:auto; height:auto; float:none; display:block; margin:0; background-color:transparent; color:#000; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-arrow-pagination a:before { font-size:19px; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a:before { font-size:16px; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-arrow-pagination a:hover, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a:hover { color:#fff; background:none; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-playpause, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-playpause { position:static; display:block; padding:10px 0; width:auto; height:auto; background-color:transparent; color:rgba(0, 0, 0, 0.8); z-index: 99; } .dtportfolio-swiper-pagination-holder.type2 .dtportfolio-swiper-playpause:hover, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-playpause:hover { color:#fff; } .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-pagination-wrapper { background: rgba(0, 0, 0, 0.4); } .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-playpause { background:none; color:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-arrow-pagination a:hover, .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-playpause:hover { color:#fff; background:none; } .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-fraction-pagination { color:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.type2.dark .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { background-color:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.type2.dark .swiper-pagination .swiper-pagination-bullet { background:#fff; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-pagination-wrapper { background:#fff; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom:70px; height:auto; position:absolute; z-index:9; border-radius: 3px; z-index: 99; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination { position:static; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-pagination-wrapper > div, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-playpause, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination > span { display:inline-block; float: left; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-playpause { padding: 0 15px; line-height: 32px; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { background:#000; transform: rotate(21deg); -webki-transform: rotate(21deg); -moz-transform: rotate(21deg); -o-transform: rotate(21deg); -ms-transform: rotate(21deg); top:5px; margin: 0 5px 0 5px; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination .total { top: 0; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a { margin:0 15px; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-playpause:hover, .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a:hover { color:#000; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-arrow-pagination a { color: rgba(0, 0, 0, 0.8); } .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-playpause, .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-arrow-pagination a:hover { background:none; } .dtportfolio-swiper-pagination-holder.type3 .dtportfolio-swiper-fraction-pagination .swiper-pagination-total { top: 0; } .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-pagination-wrapper { background:#000; } .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-fraction-pagination, .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-playpause { color:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { background:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.type3.dark .dtportfolio-swiper-arrow-pagination a:hover { color:#fff; } .swiper-wrapper.horizontal-mousepointer { cursor:e-resize; } .swiper-wrapper.vertical-mousepointer { cursor:s-resize; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a { background:none; position:absolute; left:15px; top:0; bottom:0; margin:auto; z-index:9; width:50px; height:50px; color: rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a:hover { color:#fff; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a:before { line-height:50px; font-size:40px; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 { position:static; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a.dtportfolio-swiper-arrow-next { right:15px; left:auto; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a:hover { background:none; } .swiper-wrapper .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay-details { width: 28%; } .dtportfolio-swiper-container .fullpage-splitted-section .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay-container { width:80%; } .vc_row.swiper-single-item .swiper-pagination.swiper-pagination-bullets, .vc_row.swiper-single-item .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-playpause { bottom: -70px; } .vc_row.swiper-single-item .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-playpause { z-index: 99; left:0; } .vc_row.swiper-single-item .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a { left: -7%; } .vc_row.swiper-single-item .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a.swiper-simple-arrow-next { right: -7%; left:auto; } .vc_row.swiper-single-item .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination.type2 a:before { font-size: 80px; } .dtportfolio-swiper-container .dtportfolio-item.dtportfolio-framed:hover { -webkit-transform: inherit; -moz-transform: inherit; transform: inherit; } .dtportfolio-content-over-slider { position: absolute; width: 40%; left: 0; margin: auto; bottom: 10px; z-index: 9; padding: 30px 20px; color: #fff; } .dtportfolio-content-over-slider h3, .dtportfolio-content-over-slider h5 { color:#fff; } .dtportfolio-content-over-slider h5 { margin-bottom:10px; } .swiper-container-fade .dtportfolio-item.details-below-image .details-holder { background:#fff; } .dtportfolio-pagination { float: left; width: 100%; margin: 20px 0; clear: both; } .dtportfolio-pagination ul.page-numbers li a, .dtportfolio-pagination ul.page-numbers li span { color: #000; font-size: 13px; font-weight: 600; padding: 6px 15px 5px; text-transform: uppercase; border: 1px solid #000; margin: 0 10px 0 0; line-height: 24px; display: inline-block; position: relative; border-radius: 0; background: none; } .dtportfolio-pagination ul li { float: left; display: inline; margin: 0; padding: 0; } /*.prev.page-numbers:focus, .prev.page-numbers:hover, .next.page-numbers:focus, .next.page-numbers:hover,*/ .dtportfolio-pagination ul.page-numbers li a:hover, .dtportfolio-pagination ul.page-numbers li span.current, .dtportfolio-pagination ul li a:not(.prev):not(.next):hover { background-color: #767676; color: #fff; border-color: #767676; } .dtportfolio-pagination ul.page-numbers li a.next i { margin-left: 5px; } .dtportfolio-pagination ul.page-numbers li a.prev i { margin-right: 5px; } .dtportfolio-pagination ul.page-numbers { float: left; width: 100%; margin: 0; padding: 0; } /*-------------------------------------------------------------- 3.0 - Portfolio Single --------------------------------------------------------------*/ .dtportfolio-single { width:100%; margin:0px; padding:0; float:left; clear:both; position:relative; } .dtportfolio-single:before { content:""; position:absolute; bottom:0px; left:0px; width:100%; height:6px; } .dtportfolio-single-details { padding:40px 0px 0px; display:block; clear:both; float:left; width:100%; } .dtportfolio-single-details h3 { font-weight:bold; } .dtportfolio-one-third .dtportfolio-single-details { padding-top:0; } .dtportfolio-one-third .dtportfolio-single-details .dtportfolio-three-fourth, .dtportfolio-one-third .dtportfolio-single-details .dtportfolio-one-fourth { width:100%; margin:0px; } .dtportfolio-one-third .dtportfolio-single-details .dtportfolio-three-fourth { padding-bottom:40px; } .dtportfolio-one-third .dtportfolio-single-details .dtportfolio-three-fourth { padding-right:0px; } .dtportfolio-single > .dtportfolio-two-third { margin-right:2%; margin-left:0px; } .dtportfolio-single > .dtportfolio-one-third { margin-left:0px; margin-right:0px; } .dtportfolio-single .dtportfolio-two-third.right-gallery { float:right; margin-left:2%; margin-right:0px; } .dtportfolio-single-slider-wrapper, .dtportfolio-single-slider { float:left; clear:both; margin:0px; padding:0px; width:100%; line-height:0px; } .dtportfolio-single-slider li { display:block; margin:0px 1px 0px 0px; padding:0px; } .dtportfolio-single-slider li img { max-width:100%; height:auto; } .dtportfolio-single-slider-wrapper .bx-wrapper { position:relative; } .portfolio-single-slick-slider .slick-slide { margin:0 10px; } .dtportfolio-single-details .dtportfolio-three-fourth { padding-right:40px; } .dtportfolio-categories, .dtportfolio-tags { float:left; clear:both; width:100%; margin:15px 0px 0px; padding:0px; } .dtportfolio-categories a, .dtportfolio-tags a { color:#000000; font-size:13px; } .dtportfolio-categories i, .dtportfolio-tags i { font-size:15px; color:#000000; margin:0px 4px 0px 0px; position:relative; top:2px; } .with-right-portfolio .dtportfolio-categories, .with-left-portfolio .dtportfolio-categories, .with-right-portfolio .dtportfolio-tags, .with-left-portfolio .dtportfolio-tags { margin:0 0 5px; text-transform:uppercase; letter-spacing:1px; } .dtportfolio-project-details { margin:0px; float:left; clear:both; width:100%; } .dtportfolio-project-details li { float:left; display:block; margin:0px; padding:10px 0px; font-size:16px; border-bottom:1px solid rgba(0, 0, 0, 0.1); width:100%; } .dtportfolio-project-details li:last-child { padding-bottom:10px; } .dtportfolio-project-details li span { font-weight:bold; width:85px; display:inline-block; color:#000000; } .dtportfolio-project-details li a { color:#808080; } .dtportfolio-single-details .dtportfolio-project-details:empty { margin:0; } .dt-sc-dark-bg .dtportfolio-project-details li span { color:#fff; } .dt-sc-dark-bg .dtportfolio-project-details.type2 li span { border-bottom-color: rgba(255, 255, 255, 0.45); } .dtportfolio-project-details.type2 { display:block; width:auto; float:none; margin:0 auto; } .dtportfolio-project-details.type2 li { display: inline-block; width: auto; float: none; border-bottom: 0; padding: 0 4% 20px 0; text-align:left; } .dtportfolio-project-details.type2 li span { text-align:left; display:block; width: auto; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 5px; margin-bottom: 10px; min-width:200px; } .dtportfolio-project-details.type2 li:last-child { margin-right:0; padding:0; } .dtportfolio-project-details.type3 li { border-bottom:0; } .dtportfolio-project-details.type3 li span { display:block; width:auto; } .post-nav-container { float:left; width:100%; margin:20px 0px; padding:0px; display:block; clear:both; position:relative; text-align:center; line-height:24px; } .post-nav-container .post-next-link a, .post-nav-container .post-prev-link a { color:rgba(0, 0, 0, 0); font-size:16px; font-weight:500; padding:0 15px; text-transform:uppercase; letter-spacing:0.5px; margin:0px; display:inline-block; position:relative; overflow: hidden; } .post-nav-container .post-prev-link, .post-nav-container .post-next-link { display:inline-block; } .post-nav-container .post-prev-link a { text-shadow: 170px 0 0 #000, 0 0 0 #000; } .post-nav-container .post-next-link a { text-shadow: 0 0 0 #000, -170px 0 0 #000; } .post-nav-container .post-next-link a:hover { text-shadow: 170px 0 0 #fff, 0 0 0 #000; background: none; } .post-nav-container .post-prev-link a:hover { text-shadow: 0 0 0 #000, -170px 0 0 #fff; background: none; } .dt-sc-dark-bg .post-nav-container .post-prev-link a, .fullpage-portfolio .post-nav-container .post-prev-link a { text-shadow: 170px 0 0 #000, 0 0 0 #fff; } .dt-sc-dark-bg .post-nav-container .post-next-link a, .fullpage-portfolio .post-nav-container .post-next-link a { text-shadow: 0 0 0 #fff, -170px 0 0 #000; } .dt-sc-dark-bg .post-nav-container .post-next-link a:hover, .fullpage-portfolio .post-nav-container .post-next-link a:hover { text-shadow: 170px 0 0 #fff, 0 0 0 #fff; } .dt-sc-dark-bg .post-nav-container .post-prev-link a:hover, .fullpage-portfolio .post-nav-container .post-prev-link a:hover { text-shadow: 0 0 0 #fff, -170px 0 0 #fff; } .post-nav-container .post-next-link a i { margin-left:10px; float:right; } .post-nav-container .post-prev-link a i { margin-right:10px; float:left; } .post-nav-container .post-next-link a i, .post-nav-container .post-prev-link a i { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .post-nav-container a i { position:relative; font-size:24px; } .post-nav-container .post-next-link a { margin-right:0px; } .post-nav-container.type3 { margin:0; padding:30px 10px; } .post-nav-container.type3 a { display:block; padding:0; text-shadow: none; color:#000; } .post-nav-container.type3 a:hover, .fullpage-portfolio .post-nav-container.type3 a:hover, .fullpage-portfolio .post-nav-container.type3 a { text-shadow: none; } .post-nav-container.type3 .post-next-link { float: right; padding: 0 50px 0 0; text-align: right; } .post-nav-container.type3 .post-prev-link { float: left; padding: 0 0 0 50px; text-align: left; } .post-nav-container.type3 .post-next-link, .post-nav-container.type3 .post-prev-link { width:45%; position:relative; min-height:1px; } .post-nav-container.type3 i { position: absolute; left: 10px; z-index: 6; margin: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); top: 50%; font-size: 24px; } .post-nav-container.type3 .post-next-link i { right:10px; left:auto; } .post-nav-container.type3 .post-archive-link-wrapper a:before { margin-top:12px; } .post-nav-container.type3 .post-archive-link-wrapper { float:left; width:6%; margin:0 2%; } .dt-sc-dark-bg .post-nav-container.type3 a { color: #fff; } .dt-sc-dark-bg .post-nav-container.type3 a:hover, .dt-sc-dark-bg .post-nav-container.type3 a { text-shadow: none; } .dtportfolio-navigation-links-holder { display: inline-block; width: 100%; position: relative; margin: 0; } .post-nav-container.type4 { height: 50px; margin: 0; text-align: left; } .post-nav-container.type4:before { border-top: 1px solid; border-top-color: #e5e5e5; content: ''; height: 1px; left: 0; position: absolute; top: 50%; transform: translateY(100%); width: 100%; -moz-transform: translateY(100%); -webkit-transform: translateY(100%); } .post-nav-container.type4 .post-prev-link, .post-nav-container.type4 .post-next-link { line-height: normal; margin: 0; position: absolute; left:0; } .post-nav-container.type4 a { background: #fff; border: 1px solid #000; color: #000; line-height: normal; padding: 15px; text-shadow: none; } .post-nav-container.type4 .post-next-link { right: 0; left: auto; } .post-nav-container.type4 a:hover, .dt-sc-dark-bg .post-nav-container.type4 a { text-shadow: none; } .post-nav-container.type4 a i { font-size: 14px; margin-top: 6px; } .post-nav-container.type4 a:empty { display: none; } .dt-sc-dark-bg .post-nav-container.type4 a, .post-nav-container.type4 a:hover { color:#fff; } .with-fixed-footer .post-nav-container.type4 a { background: #fff; } .dtportfolio-onepage-navigation-title-holder { display: inline-block; position: fixed; left: 0; top: 50%; margin: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index:99; } .dtportfolio-onepage-navigation-title-holder li { display:block; padding-bottom: 10px; } .dtportfolio-onepage-navigation-title-holder.default { left:20px; } .dtportfolio-onepage-navigation-title-holder.boxed > li > a, .dtportfolio-onepage-navigation-title-holder.default > li > a { background-color: #000; padding: 2px 10px; color:#fff; } .dtportfolio-onepage-navigation-title-holder.default > li > a { border-radius: 8px; -webkit-border-radius: 8px; } .dtportfolio-onepage-navigation-title-holder.boxed > li > a > span:last-child, .dtportfolio-onepage-navigation-title-holder.default > li > a > span:last-child { display:none; padding:0 3px 0 5px; } .dtportfolio-onepage-navigation-title-holder > li > a, .dtportfolio-onepage-navigation-title-holder.boxed > li > a:hover > span:last-child, .dtportfolio-onepage-navigation-title-holder.default > li > a:hover > span:last-child, .dtportfolio-onepage-navigation-title-holder.boxed > li > a.active > span:last-child, .dtportfolio-onepage-navigation-title-holder.default > li > a.active > span:last-child { display:inline-block; } .dtportfolio-onepage-navigation-title-holder.rounded > li > a > span:first-child { margin:2px 0 0 10px; color: #000; background: #fff; padding: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; font-size: 13px; background: #ffffff; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); line-height:8px; float:right; text-align:center; } .dtportfolio-onepage-navigation-title-holder.rounded > li { display: block; margin: 5px; background: rgba(0, 0, 0, 0.7); text-align: right; padding: 5px 10px; -webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .dtportfolio-onepage-navigation-title-holder.rounded > li:hover { -webkit-transform: translate(60px, 0); -moz-transform: translate(60px, 0); -ms-transform: translate(60px, 0); -o-transform: translate(60px, 0); transform: translate(60px, 0); background: rgba(0, 0, 0, 0.95); } .dtportfolio-onepage-navigation-title-holder.rounded > li:hover > a > span:first-child { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .dtportfolio-onepage-navigation-title-holder.rounded { padding: 0px; -webkit-transform: translate(-85px, -50%); -moz-transform: translate(-85px, -50%); -ms-transform: translate(-85px, -50%); -o-transform: translate(-85px, -50%); transform: translate(-85px, -50%); } .dtportfolio-onepage-navigation-title-holder.rounded > li > a { color:#fff; } /*----*****---- << Portfolio Comment Entries >> ----*****----*/ .commententries .comments-area:empty, .commententries:empty { display: none; } .commententries .comments-area { margin:40px 0 0; } .commententries h3 { font-size:20px; } .dtportfolio-comments-area ul.commentlist { float:left; margin:20px 0px 20px 0px; padding:0px 0px 20px 0px; list-style:none; border-top:0px; } .dtportfolio-comments-area ul.commentlist li.comment { display:block; float:none; list-style:none; border:none; margin:0px 0px 30px; padding:0px 0px 0px 80px; position:relative; clear:both; } .dtportfolio-comments-area ul.commentlist li.pingback { padding-left:0; } .dtportfolio-comments-area ul.commentlist li.pingback > p > a { margin-left:5px; } .dtportfolio-comments-area ul.commentlist li ul.children { margin:10px 0px 10px; padding:0px; float:left; border:none; clear:both; width:100%; } .dtportfolio-comments-area ul.commentlist li .respond { margin-left:69px; } .dtportfolio-comments-area ul.commentlist li .comment-details { position:relative; padding:0px 0px 10px; margin:10px 0px 10px; } .dtportfolio-comments-area ul.commentlist li .comment-details:before { bottom:0px; content:''; left:0px; position:absolute; width:100%; } .dtportfolio-comments-area ul.commentlist li .comment-body { margin:10px 0px 0px; } .dtportfolio-comments-area ul.commentlist li .comment-body p { line-height:28px; } .dtportfolio-comments-area ul.commentlist li .comment-author { left:0px; top:0px; position:absolute; } .dtportfolio-comments-area ul.commentlist li .comment-author img { max-width:80px; max-height:80px; float:left; margin:0px; border-radius:80px; position: static; } .dtportfolio-comments-area ul.commentlist li .author-name > a { font-size:18px; color:#000000; } .dtportfolio-comments-area ul.commentlist li .author-name span { font-size:14px; color:#aaaaaa; } .dtportfolio-comments-area ul.commentlist li.bypostauthor .author-name { border-bottom: 1px solid #aaaaaa; } .dtportfolio-comments-area ul.commentlist li .comment-details { display:block; } .dtportfolio-comments-area ul.commentlist li .author-name .reply { margin:0px; float:right; } .dtportfolio-comments-area ul.commentlist li .reply a { clear:both; display:inline-block; background-color: #222; margin:10px 0px 0px; padding:6px 13px; color:#fff; } .dtportfolio-comments-area ul.commentlist li .reply a:hover { background-color:#767676; } .dtportfolio-comments-area ul.commentlist li #respond { padding-bottom:20px; } .comment-respond form { float: left; margin-bottom: 20px; width: 100%; } #respond { clear:both; } #respond h3#reply-title small { font-size:12px; text-transform:none; } #respond h3#reply-title { margin-bottom:20px; font-size:20px; } #respond .dt-sc-one-half p span { width:10%; } #respond .dt-sc-one-half textarea { height:123px; } #respond p { margin-bottom:15px; display:inline-block; width:100%; } .dtportfolio-comment-form-holder input { margin-bottom: 20px; } .dtportfolio-comment-form-holder textarea { margin-bottom: 15px; } /*----*****---- << Portfolio Single Layout >> ----*****----*/ .with-both-sidebar .dtportfolio-single-details .dtportfolio-column { width:100%; margin:0px; padding:0px; } .with-both-sidebar .dtportfolio-single-details .dtportfolio-one-fourth { margin-top:40px; } .with-both-sidebar .dtportfolio-single .dtportfolio-two-third, .with-both-sidebar .dtportfolio-single .dtportfolio-one-third { margin:0px; width:100%; } .with-both-sidebar .dtportfolio-single-details { margin:30px 0px 0px; } /*----*****---- << Related Portfolio >> ----*****----*/ .related-portfolios { float:left; margin:60px 0px 50px; padding:0px; width:100%; clear:both; } .related-portfolios h3 { font-weight:bold; margin-bottom:30px; } /*-------------------------------------------------------------- 4.0 - Infinite Portfolio Scroll --------------------------------------------------------------*/ .dtportfolio-infinite-portfolio-container .portfolio, .dtportfolio-infinite-portfolio-load-more, .dtportfolio-infinite-portfolio-container .dtportfolio-item img, .disable, .message { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } .dtportfolio-masonry-portfolio-container { clear: both; display: block; margin: 0 -1px; padding: 0; width: auto; text-align: center; } .dtportfolio-masonry-portfolio-container .ms-portfolio { float: left; padding: 0 15px; box-sizing: border-box; margin: 0; } .dtportfolio-infinite-portfolio-wrapper { position: relative; margin-bottom: 50px; text-align: center; float:left; width:100%; } .dtportfolio-infinite-portfolio-wrapper .message { font-size: 19px; display: inline-block; top:100%; left: 0; margin: 50px auto 0; padding: 10px 0; position: absolute; right: 0; z-index: 99; } .dtportfolio-infinite-portfolio-load-more { padding: 10px 25px; float: none; display: table; margin:0 auto; z-index: 9; font-size: 16px; position:relative; color:#000; } .dtportfolio-infinite-portfolio-load-more.disable { font-size: 0; visibility: hidden; } .dtportfolio-infinite-portfolio-load-more i.fa { margin-right: 10px; } .dtportfolio-infinite-portfolio-load-more.load-more { border:1px solid; margin-bottom:30px; clear:both; margin-left:auto; margin-right:auto; color:#000; } .dtportfolio-infinite-portfolio-load-more.load-more:before { display:none; } .dtportfolio-infinite-portfolio-load-more:hover { background-color: #767676; color: #fff; border-color: #767676; } .dtportfolio-infinite-portfolio-load-more:hover span { color: #fff; } .dtportfolio-infinite-portfolio-container .dtportfolio-item:before { background-image: url(../images/loading_icon.gif); background-position: center; content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); right:0; left: 0; margin: 0 auto; width: 60px; height: 60px; z-index: -1; } .message { transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); } .message.hidden { display: block !important; transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); } /** Portfolio Hover State **/ .dtportfolio-item.hover-state .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-overlay.hover-state .dtportfolio-image-overlay { opacity: 1; } .dtportfolio-item.hover-state .dtportfolio-image-overlay .links a, .dtportfolio-item.dtportfolio-hover-title-icons-overlay.hover-state .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-classic.hover-state .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-presentation.hover-state .dtportfolio-image-overlay .links, .dtportfolio-item.hover-state.dtportfolio-hover-icons-only .dtportfolio-image-overlay-details { bottom:0; } .dtportfolio-item.hover-state .dtportfolio-image-overlay-details { bottom:30px; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay.hover-state .dtportfolio-image-overlay .links { left: 0; } .dtportfolio-item.dtportfolio-hover-icons-only.hover-state .dtportfolio-image-overlay .links a:last-child { left: 0; bottom: 0; } .dtportfolio-item.dtportfolio-hover-icons-only.hover-state .dtportfolio-image-overlay .links a:first-child { right: 0; bottom: 0; } .dtportfolio-item.dtportfolio-hover-classic.hover-state .dtportfolio-image-overlay .links a:first-child { right: 0; bottom: 90%; } .dtportfolio-item.dtportfolio-hover-classic.hover-state .dtportfolio-image-overlay .links a:last-child { left: 0; bottom: 90%; } .dtportfolio-item.dtportfolio-hover-minimal-icons.hover-state figure img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); filter: grayscale(0%); -webkit-filter: grayscale(0); filter: none; } /** Portfolio Fullpage **/ .dtportfolio-item.dtportfolio-fullpage { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .dtportfolio-item.dtportfolio-hover-extended:hover figure:after, .dtportfolio-item.dtportfolio-hover-centered-box:hover figure:after { opacity: 1; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay { background: rgba(255,255,255,0); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(241,111,92,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(0%, rgba(241,111,92,0)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(241,111,92,0) 0%, rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(241,111,92,0) 0%, rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(241,111,92,0) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(241,111,92,0) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 ); padding: 30px 15px 18px 20px; bottom:0; text-align:left; z-index:1; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay h2 { letter-spacing:1.5px; text-transform:uppercase; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay-details { display: inline-block; right: auto; border: 0; float:left; padding:0; text-align:left; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay > a { display: inline-block; float:right; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-extended .dtportfolio-image-overlay .links a span, .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay .links a span { line-height: normal; } .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-one-column .dtportfolio-image-overlay { padding-left:50px; } .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-one-third .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-one-fourth .dtportfolio-image-overlay h2, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-one-column .dtportfolio-image-overlay h2 { font-size:18px; } .dtportfolio-fullpage-default { background-size: cover; background-position: center; } .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay { width:450px; height:auto; background: rgba(0, 0, 0, 0.7); right:auto; text-align:center; display:inline-block; padding: 30px 20px; } .dtportfolio-item.dtportfolio-hover-boxed figure:after { display:none; } .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay-details h2 { margin-bottom:10px; } .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay > a { display:inline-block; margin-top:15px; } .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay-details { display: inline-block; position: relative; right: auto; bottom: auto; border: 0; float:left; padding:0; text-align:left; } .dtportfolio-item.dtportfolio-fullpage-default figure { vertical-align:bottom; height:100%; } .dtportfolio-item.dtportfolio-fullpage-default .fp-tableCell { vertical-align:bottom; } .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-extended.dtportfolio-fullpage:hover .dtportfolio-image-overlay-details { bottom: 30px; } .dtportfolio-item.dtportfolio-fullpage.dtportfolio-hover-modern-title .dtportfolio-image-overlay .links { bottom:0; top:auto; } .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-modern-title.active .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-fullpage.dtportfolio-hover-modern-title:hover .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-fullpage.dtportfolio-hover-modern-title.hover-state .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-fullpage-splitted-section.dtportfolio-hover-modern-title.active .dtportfolio-image-overlay .links, .dtportfolio-item.dtportfolio-fullpage-splitted-section.dtportfolio-hover-modern-title.hover-state .dtportfolio-image-overlay .links { height:auto; bottom:30px; top:auto; } .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-icons-only.active .dtportfolio-image-overlay-details { bottom:auto; } .swiper-container-coverflow .dtportfolio-item.dtportfolio-hover-boxed .dtportfolio-image-overlay { width:100%; } .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-third .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-fourth .dtportfolio-image-overlay, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-column .dtportfolio-image-overlay { width:100%; } .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-third .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-fourth .dtportfolio-image-overlay h2, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-one-column .dtportfolio-image-overlay h2 { font-size:19px; } .dtportfolio-swiper-container .dtportfolio-item.dtportfolio-one-column.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay-details { top:auto; bottom:30px; } /** Portfolio Stripped **/ .dtportfolio-container-striped-wrapper { float: left; position: relative; width: 100%; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; text-align: center; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; background:rgba(0, 0, 0, 0.8); } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay h2 { -ms-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transform: translateY(100%); transition: transform .4s cubic-bezier(.79,.14,.15,.86, opacity .8s ease); -webkit-transition: transform .4s cubic-bezier(.79,.14,.15,.86), opacity .8s ease; margin-bottom:10px; font-weight:600; opacity: 0; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay p { font-family: Marck Script,cursive; font-size:17px; -ms-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transform: translateY(-100%); -webkit-transition: -webkit-transform .4s cubic-bezier(.79,.14,.15,.86), opacity .8s ease; transition: transform .4s cubic-bezier(.79,.14,.15,.86), opacity .8s ease; opacity: 0; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay p, .dtportfolio-item.dtportfolio-hover-classic.hover-state .dtportfolio-image-overlay p, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-classic.active .dtportfolio-image-overlay p { -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateY(0); -webkit-transition-delay: .15s; transition-delay: .15s; opacity: 1; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-hover-classic.hover-state .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-fullpage-default.dtportfolio-hover-classic.active .dtportfolio-image-overlay h2 { -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; } .dtportfolio-item.dtportfolio-hover-classic .dtportfolio-image-overlay > a { -ms-transform: translateY(4px); -moz-transform: translateY(4px); -o-transform: translateY(4px); transform: translateY(4px); -webkit-transform: translateY(4px); transition: all .4s ease-out; -webkit-transition: all .4s ease-out; margin:10px auto 0; display:inline-block; } .dtportfolio-item.dtportfolio-hover-classic:hover .dtportfolio-image-overlay > a { -ms-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); } .dtportfolio-item.dtportfolio-hover-classic:hover figure img, .dtportfolio-item.dtportfolio-hover-classic.hover-state figure img { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; transform: inherit; } /** Portfolio Parallax **/ .dtportfolio-item.dtportfolio-hover-centered-box figure { float:left; width:100%; height:100%; display:block; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay h2 { margin-bottom:10px; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay > a { margin-top:15px; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay { padding:10px 15px 30px; } .dtportfolio-item.dtportfolio-hover-centered-box figure:after { display:none; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay { padding: 30px; display: inline-block; margin: auto; background: rgba(0, 0, 0, 0.7); height:auto; width:360px; top:50%; bottom:auto; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); text-align:center; z-index:1; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay .links { display:none; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay-details { position: relative; bottom: auto; right: auto; border: 0; text-align: center; padding:0; z-index:9; } .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-fullpage-default.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-boxed.dtportfolio-fullpage-splitted-section.active .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-fullpage-splitted-section.active .dtportfolio-image-overlay-details { bottom:auto; } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay > a { display: inline-block; } .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-third .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-fourth .dtportfolio-image-overlay, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-column .dtportfolio-image-overlay { width:100%; height:100%; } .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-third .dtportfolio-image-overlay h2, .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-fourth .dtportfolio-image-overlay h2, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-column .dtportfolio-image-overlay h2 { font-size:18px; } .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-third .dtportfolio-image-overlay-details, .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-fourth .dtportfolio-image-overlay-details, .vc_col-sm-4 .dtportfolio-item.dtportfolio-hover-centered-box.dtportfolio-one-column .dtportfolio-image-overlay-details { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay:after { content: ""; position: absolute; border: 2px solid rgba(255, 255, 255, 0.7); left: 5px; top: 5px; right: 5px; bottom: 5px; z-index:-1; } .dtportfolio-parallax { height:450px; background-size: cover; background-position: center; } .dtportfolio-parallax-type2 { height:800px; } .dtportfolio-item.dtportfolio-parallax figure { width:100%; height:100%; } /** Portfolio Fullpage Splitted **/ .dtportfolio-fullpage-splitted-section figure > .dtportfolio-one-half { height:100%; overflow:hidden; } .dtportfolio-fullpage-splitted-section .dtportfolio-image-holder { left: 0; top: 0; height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; overflow:hidden; } .dtportfolio-fullpage-splitted-section .dtportfolio-image-overlay { opacity: 1; } .dtportfolio-fullpage-splitted-section figure { float:left; width:100%; height:100%; display:block; } .dtportfolio-container-fullpage.disable-fullpage-jquery.fullpage-splitted-section figure { display:table; } .dtportfolio-swiper-container .dtportfolio-container-fullpage.disable-fullpage-jquery.fullpage-splitted-section figure { display:block; } #portfolio-featured-video { right: 0; bottom: 0; top:0; right:0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; background-position: center center; background-size: contain; object-fit: inherit; z-index:3; display: block; float:left; } .dtportfolio-container-fullpage-carousel #portfolio-featured-video { position:absolute; height:auto; } /** Portfolio Carousel **/ .dtportfolio-swiper-container { position:relative; width:100%; float:left; overflow:hidden; } .dtportfolio-swiper-bullet-pagination { position: absolute; text-align: center; } .dtportfolio-swiper-fraction-pagination { display: inline-block; position: absolute; right: 30px; height: 90px; top: 0; bottom: 0; margin: auto; z-index: 9; text-align: center; color:#fff; left: auto; width: auto; } .dtportfolio-swiper-fraction-pagination > span { display: block; position: relative; } .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { width: 1px; height: 20px; display: inline-block; content: ""; background-color: #fff; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); -ms-transform: rotate(35deg); margin: 0 1px 0 3px; } .dtportfolio-swiper-fraction-pagination .swiper-pagination-total { top: -5px; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-fraction-pagination { color:#000; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-fraction-pagination .dtportfolio-separator { background-color:#000; } .dtportfolio-swiper-bullet-pagination.swiper-pagination-bullets { top: auto; bottom: 40px; left: 0; right: 0; z-index: 9; } .dtportfolio-swiper-pagination-holder .swiper-pagination-bullet { margin:0 3px; background:#fff; border-radius: 0; height: 3px; width: 10px; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-playpause { position: absolute; left: 20px; bottom: 20px; display: inline-block; color: #000; z-index: 9; width: 30px; height: 30px; background-color: #f0f0f0; text-align: center; line-height: 30px; font-size:10px; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-playpause:hover { color:#948d8d; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination { position: absolute; right: 20px; bottom: 20px; z-index: 9; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination a { width:32px; height:32px; float:left; text-align:center; margin-left:10px; position:relative; background-color:#f0f0f0; color:#000; font-size: 0; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination a:before { width:100%; height:100%; text-align:center; font-size:14px; line-height:32px; vertical-align:middle; font-family: "Font Awesome 5 free"; font-weight: 900; font-style:normal; text-decoration:inherit; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination a:hover { color:#000; background-color: rgba(255, 255, 255, 0.85); } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination a.dtportfolio-swiper-arrow-prev:before { content:"\f053"; } .dtportfolio-swiper-pagination-holder .dtportfolio-swiper-arrow-pagination a.dtportfolio-swiper-arrow-next:before { content:"\f054"; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-playpause, .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-arrow-pagination a, .dtportfolio-swiper-pagination-holder.dark .swiper-pagination-bullet { background:#000; color:#fff; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-playpause:hover, .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-arrow-pagination a:hover { color:rgba(255, 255, 255, 0.7); } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-arrow-pagination a:hover { background:rgba(0, 0, 0, 0.85); } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-arrow-pagination.type2 a { background:none; color: #000; } .dtportfolio-swiper-pagination-holder.dark .dtportfolio-swiper-arrow-pagination.type2 a:hover { color:rgba(0, 0, 0, 0.7); } .dtportfolio-image-gallery-container { float: left; width: 100%; position: relative; } .dtportfolio-single-layout-container.fixed-gallery .dtportfolio-image-gallery-container .swiper-slide, .dtportfolio-single-layout-container.fixed-gallery .dtportfolio-image-gallery-holder, .dtportfolio-single-layout-container.fixed-gallery .dtportfolio-image-gallery-container { height: 100%; } .dtportfolio-single-layout-container.fixed-gallery .dtportfolio-single-image-holder { width: 100%; height: 100%; background-size: cover; background-position: center; } .dtportfolio-image-gallery, .dtportfolio-swiper-container .dtportfolio-container { cursor: -webkit-grab; } /** Typer **/ .dtportfolio-typer:after { content:""; display: inline-block; vertical-align: middle; width:1px; height:1em; background: #000; animation: caretPulsate 1s linear infinite; -webkit-animation: caretPulsate 1s linear infinite; } @keyframes caretPulsate { 0% {opacity:1;} 50% {opacity:1;} 60% {opacity:0;} 100% {opacity:0;} } @-webkit-keyframes caretPulsate { 0% {opacity:1;} 50% {opacity:1;} 60% {opacity:0;} 100% {opacity:0;} } /** Masonry Grid **/ .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-2 { width: 100%; } .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-1 { width: 66.65%; } .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-2 { width: 100%; } .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-1 { width: 50%; } .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-2 { width: 75%; } .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-3 { width: 100%; } .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-1 { width: 40%; } .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-2 { width: 60%; } .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-3 { width: 80%; } .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-4 { width: 100%; } .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-1 { width: 33.33%; } .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-2 { width: 50%; } .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-3 { width: 66.66%; } .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-4 { width: 100%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-1 { width: 28.6%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-2 { width: 42.85%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-3 { width: 57.14%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-4 { width: 71.4%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-5 { width: 85.68%; } .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-6 { width: 100%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-1 { width: 25%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-2 { width: 37.5%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-3 { width: 50%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-4 { width: 62.5%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-5 { width: 75%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-6 { width: 87.5%; } .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-7 { width: 100%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-1 { width: 22.22%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-2 { width: 33.33%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-3 { width: 44.44%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-4 { width: 55.55%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-5 { width: 66.66%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-6 { width: 77.77%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-7 { width: 88.88%; } .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-nineth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-nineth.dtportfolio-grid-sizer-9 { width: 100%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-1, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-1 { width: 20%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-2, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-2 { width: 30%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-3 { width: 40%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-4 { width: 50%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-5 { width: 60%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-6 { width: 70%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-7 { width: 80%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-8 { width: 90%; } .dtportfolio-container .dtportfolio-one-tenth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-tenth.dtportfolio-grid-sizer-9 { width: 100%; } .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-half.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-half.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-3, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-third.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-third.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-4, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-fourth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fourth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-fifth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-fifth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-5, .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-6, .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-sixth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-sixth.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-7, .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-seventh.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-seventh.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-8, .dtportfolio-container .dtportfolio-one-eight.dtportfolio-grid-sizer-9, .dtportfolio-container .dtportfolio-column.no-space.dtportfolio-one-eight.dtportfolio-grid-sizer-9 { width: 100%; } /** Fixed Images **/ .fixed-feature-image .dtportfolio-single > .dtportfolio-two-third { margin-right:0; } .dtportfolio-fixed-content, .dtportfolio-details { height:100%; } .dtportfolio-details { padding: 0 15px; } .dtportfolio-fixed-content { position:fixed; left:0; top:0; width:33.33%; background-position:center; background-repeat:no-repeat; background-size: cover; z-index:8; } .dtportfolio-details .dtportfolio-single-details { text-align:center; padding:40px 15px 60px; display:inline-block; float:none; width:100%; } .dtportfolio-details .dtportfolio-single-details h2 { font-weight:bold; } .dtportfolio-details .dtportfolio-categories, .dtportfolio-details .dtportfolio-tags { margin:15px 0px 30px; } .dtportfolio-details .portfolio-separator { width: 50px; background-color: #000; height: 2px; display: block; clear: both; text-align: center; margin: 20px auto; } .dtportfolio-details .project-details li { border:0; } .fixed-feature-image .dtportfolio-details .dtportfolio-single-details, .gallery-list .dtportfolio-details .dtportfolio-single-details, .fixed-gallery .dtportfolio-details .dtportfolio-single-details { padding:40px 15px 20px 60px; text-align:left; } .dtportfolio-single-layout-container.fixed-gallery .dtportfolio-categories i { font-size:17px; } .fixed-feature-image .dtportfolio-details .dtportfolio-single-details { margin-bottom: 30px; } .fixed-feature-image .dtportfolio-details .dtportfolio-single-details .dtportfolio-categories i { display:none; } .fixed-feature-image .dtportfolio-details .dtportfolio-single-details .dtportfolio-categories { margin:0 0 5px; text-transform:uppercase; letter-spacing:1px; } .gallery-list .dtportfolio-details .dtportfolio-categories, .fixed-gallery .dtportfolio-details .dtportfolio-categories { margin: 10px 0px; text-transform:uppercase; letter-spacing:1px; } .gallery-list .dtportfolio-details .dtportfolio-categories i, .fixed-gallery .dtportfolio-details .dtportfolio-categories i { display:none; } .gallery-list .dtportfolio-details .related-portfolios h3, .fixed-gallery .dtportfolio-details .related-portfolios h3 { padding-left:60px; text-align:left; } .dtportfolio-single-layout-container.right .dtportfolio-fixed-content { right: 0; left: auto; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay { position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; background-color: rgba(0, 0, 0, 0.7); transition: opacity .5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: opacity .5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: opacity .5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: opacity .5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: opacity .5s cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 0; } .dtportfolio-item.dtportfolio-hover-overlay:hover .dtportfolio-image-overlay, .dtportfolio-item.dtportfolio-hover-overlay.hover-state .dtportfolio-image-overlay { opacity: 1; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay a { color:#fff; border:0; margin:0; width:45px; height:45px; line-height: 45px; font-size:17px; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay .links a:hover { background:none; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay .links { height: 45px; left: 0; right: 0; bottom: 0; margin: auto; } .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay > ul, .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay-container > ul, .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay a.dtportfolio-gallery-link, .dtportfolio-item.dtportfolio-hover-overlay .dtportfolio-image-overlay-container > p { display:none; } .dtportfolio-details .related-portfolios h3 { text-align:center; font-size: 24px; font-weight: normal; } .dtportfolio-details .comment-respond form { width:70%; margin:0 auto 20px; float:none; } .dtportfolio-details #respond h3#reply-title { text-align:center; margin-bottom:35px; font-size:24px; } .dtportfolio-details #respond p { text-align:center; } .dtportfolio-details #respond input[type="submit"] { float:none; margin-top:20px; } /** Fixed Gallery Images **/ .fixed-gallery .dtportfolio-fixed-content { width:50%; } .fixed-gallery .dtportfolio-details .post-nav-container { margin:0; } .post-nav-container .post-archive-link-wrapper { display: inline-block; float: none; margin: 0 10px; } .post-nav-container .post-archive-link-wrapper a { display:inline-block; color:#000; } .post-nav-container .post-archive-link-wrapper a:hover:before, .post-nav-container .post-archive-link-wrapper a:hover { text-shadow:none; } .post-nav-container .post-archive-link-wrapper a:before { content: "\f009"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 24px; float: left; } .post-nav-container .post-archive-link-wrapper a:hover:before { animation: zoomIn 0.3s linear; -webkit-animation: zoomIn 0.3s linear; -moz-animation: zoomIn 0.3s linear; -o-animation: zoomIn 0.3s linear; } .dt-sc-dark-bg .post-nav-container .post-archive-link-wrapper a { color:#fff; } /** Fixed Gallery List **/ .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content { width:50%; top:0; max-height:100%; overflow-y: scroll; } .dtportfolio-single-layout-container.gallery-list .with-content-left .dtportfolio-fixed-content { padding: 0; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content > .vc_row { width: auto !important; margin: 0; left: 0 !important; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content::-webkit-scrollbar { display:none; } .dtportfolio-gallery-list-wrapper, .dtportfolio-gallery-list { float:left; width:100%; margin:0; } .dtportfolio-gallery-list-wrapper { z-index:999; position:relative; } .dtportfolio-gallery-list li { display:block; padding:0; float:left; width:100%; } .dtportfolio-single-layout-container.gallery-list .with-content-right .dtportfolio-fixed-content { right:0; left:auto; } .dtportfolio-single-layout-container.gallery-list .with-content-left .dtportfolio-fixed-content { left: 0; right: auto; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-single { padding:0; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-item figure img { display: block; } .dtportfolio-details.dtportfolio-fixed-content #footer .aligncenter .menu-links li.uiToTop { width: 45px; height: 45px; } /* Portfolio Details - Fixed Content */ .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content h2 { font-size: 40px; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content p { font-size: 16px; line-height: 30px; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content .vc_col-sm-6 h2 { font-size: 24px; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer { position: fixed; bottom: 0; width: 50%; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .container { width: 100%; padding: 15px 25px; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .dtportfolio-sociable li {float: left; margin: 5px 15px 0 0; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .dtportfolio-sociable li a { width: auto; height: auto; text-align: center; line-height: normal; font-size: 14px; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .wpb_button, .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .wpb_content_element, .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer ul.wpb_thumbnails-fluid > li { margin-bottom: 0; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .wpb_text_column.wpb_content_element { text-align: right; } .dtportfolio-single-layout-container.gallery-list .dtportfolio-fixed-content #footer .wpb_text_column.wpb_content_element p { font-size: 14px; } /** Single Portfolio Media **/ .dtportfolio-single-portfolio-top-banner, .single-portfolio-mediaontop-video-holder, .single-portfolio-mediaontop-video-holder video, .single-portfolio-mediaontop-video-holder video source { float:left; width:100%; position:relative; height:100%; } .dtportfolio-single-mediaontop-section { width: 100%; height: 100%; } .dtportfolio-single-mediaontop-section-holder { position: relative; margin-bottom: 25px; z-index: -1; } .dtportfolio-single-mediaontop-section video, .dtportfolio-single-mediaontop-section video source { width: 100%; height: 100%; object-fit: initial; } .dtportfolio-single-mediaontop-item { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .fullpage-static-items { position:fixed; left:0; bottom:0; } #sb_instagram #sbi_load { padding-top:0 !important; } /*-------------------------------------------------------------- 5.0 - Default Color --------------------------------------------------------------*/ .dtportfolio-sorting a { color:#616263; } .dtportfolio-item .dtportfolio-image-overlay .links a, .dtportfolio-item .dtportfolio-image-overlay h2, .dtportfolio-item .dtportfolio-image-overlay a, .dtportfolio-item .dtportfolio-image-overlay, .dtportfolio-fullpage-carousel .dtportfolio-fullpage-carousel-content a, .dtportfolio-fullpage-carousel .dtportfolio-fullpage-carousel-content { color:#ffffff; } .dtportfolio-item .dtportfolio-image-overlay .links a:hover { background:#ffffff; } .dtportfolio-sorting.type1 a:before, .dtportfolio-sorting.type1 a:after { background:#000000; } .dtportfolio-item .dtportfolio-image-overlay .links:after, .domain-search-form label, .domain-tld-list { background:rgba(0, 0, 0, 0.1); } .dtportfolio-sorting a, .dtportfolio-sorting.type1 a { border-color:#000000; } .dtportfolio-item .dtportfolio-image-overlay .links a { border-color:#ffffff; } .dtportfolio-sorting.type1 a.active-sort, .dtportfolio-sorting.type1 a:hover { color: #c5c5c5; background-color: #000; } .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light .links a, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light h2, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light a, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light, .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay.hover-content-color-dark a.dtportfolio-gallery-link, .dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay.hover-content-color-dark a { color:#ffffff; } .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light .links a { border-color:#ffffff; } .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-light .dtportfolio-image-overlay-details { border-right-color:#ffffff; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay.hover-content-color-light:after { border-color:rgba(255, 255, 255, 0.25); } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay.hover-content-color-light:after { border-color:rgba(255, 255, 255, 0.5); } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay.hover-content-color-light a.dtportfolio-gallery-link { background-color:#fff; border-color:#fff; color:#000; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay.hover-content-color-light a.dtportfolio-gallery-link:hover { color:#fff; background-color:inherit; } .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay.hover-content-color-dark .links a, .dtportfolio-item.dtportfolio-hover-modern-title .dtportfolio-image-overlay.hover-content-color-dark .links a:hover, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-dark .links a, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-dark h2, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-dark a, .dtportfolio-item .dtportfolio-image-overlay.hover-content-color-dark, .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay.hover-content-color-light a, .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay.hover-content-color-dark a.dtportfolio-gallery-link:hover, .dtportfolio-item.dtportfolio-hover-presentation .dtportfolio-image-overlay.hover-content-color-dark .links a:last-child:hover { color:#000; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay.hover-content-color-dark .links a { background-color: rgba(0, 0, 0, 0.8); color:#fff; } .dtportfolio-item.dtportfolio-hover-girly .dtportfolio-image-overlay.hover-content-color-dark .links a:hover, .dtportfolio-item.dtportfolio-hover-with-gallery-list .dtportfolio-image-overlay.hover-content-color-dark h2:after { background-color:#000; } .dtportfolio-item .hover-content-color-dark .dtportfolio-image-overlay-details { border-right-color: #000; } .dtportfolio-item.dtportfolio-hover-with-details .dtportfolio-image-overlay.hover-content-color-dark a.dtportfolio-gallery-link:hover, .dtportfolio-item.dtportfolio-hover-with-details .hover-content-color-dark .dtportfolio-gallery-link:after, .dtportfolio-item.dtportfolio-hover-with-details .hover-content-color-dark .dtportfolio-gallery-link:before { border-color:#000; } .dtportfolio-item.dtportfolio-hover-title-icons-overlay .dtportfolio-image-overlay.hover-content-color-dark .links a, .dtportfolio-item.dtportfolio-hover-grayscale .dtportfolio-image-overlay.hover-content-color-dark .dtportfolio-image-overlay-details { background:#fff; } .dtportfolio-item.dtportfolio-hover-icons-only .dtportfolio-image-overlay.hover-content-color-dark:after { border-color:rgba(0, 0, 0, 0.25); } .dtportfolio-item.dtportfolio-hover-centered-box .dtportfolio-image-overlay.hover-content-color-dark:after { border-color:rgba(0, 0, 0, 0.5); } .swiper-container-cube .swiper-slide-prev.dtportfolio-item.dtportfolio-hover-minimal-icons figure:before, .swiper-container-cube .swiper-slide-prev.dtportfolio-item.dtportfolio-hover-minimal-icons figure:after, .swiper-container-cube .swiper-slide-prev.dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before, .swiper-container-cube .swiper-slide-prev.dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:after, .swiper-container-cube .swiper-slide-next.dtportfolio-item.dtportfolio-hover-minimal-icons figure:before, .swiper-container-cube .swiper-slide-next.dtportfolio-item.dtportfolio-hover-minimal-icons figure:after, .swiper-container-cube .swiper-slide-next.dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:before, .swiper-container-cube .swiper-slide-next.dtportfolio-item.dtportfolio-hover-minimal-icons .dtportfolio-image-overlay:after { display:none; } /** ilightbox Fix **/ .ilightbox-thumbnails.dark .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-video { background-color: #f0f0f0; display: inline-block; height: 60px; position: relative; } /*-------------------------------------------------------------- 6.0 - Browser Fix --------------------------------------------------------------*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .dtportfolio-container .dtportfolio-item { overflow: hidden; } .dtportfolio-container .dtportfolio-item.details-below-image { overflow: visible; } ::i-block-chrome, .dtportfolio-item.dtportfolio-hover-title-overlay:before, .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay { height: auto; width: auto; } ::i-block-chrome, .dtportfolio-item.dtportfolio-hover-title-overlay:befo re { bottom: 12px; right: 12px; } ::i-block-chrome, .dtportfolio-item.dtportfolio-hover-title-overlay .dtportfolio-image-overlay { bottom: 20px; right: 20px; } }