//COMMON IMPORTS
@import "../config/imports";
//CONFIG
$font-secondary: "PT Sans", sans-serif;
$custom-font-size-1: 1.8em;
$custom-font-size-2: 3em;
//DEMO BASE
@import "demo-photography-base";
/*
* Demo Photography 3
*/
html.photography-demo-3 {
&.safari .body {
overflow: inherit;
}
&.side-header .main .container,
&.side-header #footer .container {
@media(min-width: 992px) {
max-width: 1140px;
}
}
&.side-header #main {
position: relative;
z-index: 999;
}
@media(min-width: 992px) and (max-width: 1200px) {
// Sticky Wrapper
.sticky-wrapper {
z-index: 1000 !important;
}
&.side-header {
#header.side-header {
z-index: 1000 !important;
}
}
}
// Headings
h1, h2, h3, h4, h5, h6, a, p, span {
font-family: $font-secondary;
}
// IE
@media(min-width: 992px) {
&.ie {
#header {
z-index: 998;
}
}
}
#main {
@media(min-width: 992px) {
height: 100vh;
min-height: 100vh;
}
transition: ease opacity 300ms;
&.no-height {
height: auto;
}
&.calc-height {
height: calc(100vh - 86px);
min-height: 0;
@media (max-width: 991px) {
height: auto !important;
}
}
}
@media(max-width: 767px) {
#main {
height: calc(100vh - 80px);
min-height: calc(100vh - 80px);
}
}
// Slider
.tp-caption-photo-label {
font-size: 18px !important;
text-transform: uppercase !important;
padding-bottom: 0;
text-shadow: none;
}
.tp-caption-main-custom {
text-transform: uppercase !important;
font-size: $custom-font-size-2 !important;
}
.tp-caption-sub-custom {
text-transform: uppercase !important;
font-size: 22px !important;
margin-top: -30px !important;
opacity: 0.5 !important;
}
// Rev Slider Arrows
.tparrows {
&:hover {
background: #FFF !important;
}
}
// List
.list {
&.list-icons {
&.list-icons-style-2 {
li {
&, a:first-child {
> .fa:first-child,
> .icons:first-child {
border-color: transparent;
background: transparent;
}
}
}
}
}
}
// Demo 3 Owl Carousel Arrows
.owl-carousel {
.owl-nav {
button.owl-prev, button.owl-next {
height: 55px !important;
line-height: 25px !important;
opacity: 0.7;
&:before {
font-weight: bold;
}
&:hover {
background-color: #FFF !important;
color: #000 !important;
opacity: 1;
}
}
}
}
// Demo 3 Custom Portfolio Arrows
.custom-portfolio-navigation {
.prev, .next {
height: 55px !important;
line-height: 25px !important;
opacity: 0.7;
&:before {
top: 16px !important;
font-weight: bold !important;
font-size: 11px;
left: 10px !important;
}
&:hover {
background-color: #FFF !important;
color: #000 !important;
opacity: 1;
}
}
}
// Stripes - Demo 3
.portfolio-stripes.portfolio-stripes-style-3 {
.owl-stage {
&:hover {
.thumb-info {
.thumb-info-wrapper {
&:after {
opacity: 1;
}
}
}
}
}
.owl-item {
.portfolio-item {
.thumb-info {
&:hover {
.thumb-info-wrapper {
&:after {
opacity: 0;
}
.thumb-info-title {
bottom: 0;
left: 0;
right: 0;
transform: translateY(0);
}
}
}
.thumb-info-wrapper {
height: 100vh;
&:before {
content: none;
}
.thumb-info-title {
width: 100%;
max-width: 100%;
left: 0;
right: 0;
background: #FFF;
bottom: 0;
font-size: 19px;
padding: 20px;
letter-spacing: 0;
line-height: 1.3;
text-shadow: none;
text-transform: uppercase;
transform: translateY(100%);
transition: ease transform 300ms;
.thumb-info-subtitle {
display: block;
text-transform: none;
font-size: 13px;
color: #9C9C9C;
}
}
}
}
}
}
}
// Custom Demo 3 Thumb Info
.portfolio-vertical-item, .horizontal-scroll-item, .portfolio-detail-image-item, .portfolio-grid-item {
&:hover {
box-shadow: none !important;
}
.thumb-info {
&:hover {
.thumb-info-wrapper {
&:after {
opacity: 0 !important;
}
&:before {
bottom: -41px;
}
.thumb-info-title {
bottom: 0;
left: 0;
}
}
}
.thumb-info-wrapper {
&:after {
opacity: 0;
}
.thumb-info-plus {
display: none;
}
.thumb-info-title {
font-size: 19px;
color: #1e1e1e;
background: #FFF;
left: 0;
bottom: -50%;
letter-spacing: 0;
line-height: 1.3;
text-align: $left !important;
text-shadow: none;
padding: 20px;
text-transform: uppercase;
width: 100%;
max-width: none;
opacity: 1;
font-weight: 700 !important;
transform: none;
.thumb-info-sub-title {
display: block;
opacity: 1;
color: #9C9C9C;
font-size: 13px;
text-transform: none;
transform: none;
}
}
}
}
}
// Thumb Info Items Hover Effect
#portfolioVertical, #horizontalScrollBox .content, .portfolio-list, #portfolioGrid {
&:hover {
li {
.thumb-info-wrapper {
&:after {
opacity: 1;
}
}
}
}
}
// Custom Demo 3 Portfolio Detail item
.portfolio-detail-item {
box-shadow: none !important;
&:hover {
.item-image-wrapper {
&:after {
opacity: 0 !important;
}
}
}
.item-image-wrapper {
position: relative;
min-height: 283px;
max-width: 360px;
overflow: hidden;
box-shadow: none;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(36, 46, 57, 0.5);
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
transition: ease opacity 300ms;
}
}
.sub-item-description {
background: #fff none repeat scroll 0 0;
bottom: -100%;
height: auto;
padding: 25px 0 0;
text-align: left;
top: auto;
&:before {
content: none;
}
h5 {
bottom: 0;
color: #1e1e1e;
font-size: 14px;
font-weight: 700 !important;
letter-spacing: 0;
position: relative;
}
}
&:hover {
.sub-item-description {
bottom: 0;
}
}
}
.thumb-info-icons.position-style-2 {
z-index: 4;
}
// Portfolio Detail Items Hover Effect
#portfolioDetailLoadMoreWrapper {
&:hover {
li {
.item-image-wrapper {
&:after {
opacity: 1;
}
}
}
}
}
// Custom Portfolio Parallax Demo 3
.portfolio-parallax-demo-3 {
overflow: hidden;
&:hover {
&:before {
opacity: 0 !important;
}
.thumb-info-title {
bottom: 0;
left: 0;
right: 0;
}
}
&:before {
opacity: 0;
background: rgba(10, 12, 36, 0.5);
}
.thumb-info-title {
font-size: 19px;
color: #1e1e1e;
background: #FFF;
left: 0;
right: 0;
bottom: -80%;
letter-spacing: 0;
line-height: 1.3;
text-align: $left !important;
text-shadow: none;
padding: 20px;
text-transform: uppercase;
width: 100%;
max-width: none;
opacity: 1;
transform: none;
transition: ease bottom 300ms;
.thumb-info-sub-title {
display: block;
opacity: 1;
color: #9C9C9C;
font-size: 13px;
text-transform: none;
transform: none;
}
}
}
// Parallax item Hover Effect
#main {
&:hover {
.portfolio-parallax-demo-3 {
&:before {
opacity: 1;
}
}
}
}
// Horizontal Scroll Box Demo 3
#horizontalScrollBox {
height: calc(100vh - 100px);
.custom-portfolio-navigation {
width: calc(100vw - 255px);
}
.content {
li {
.horizontal-scroll-item {
.thumb-info {
.thumb-info-wrapper {
img {
height: calc(100vh - 146px);
@media (max-width: 991px) {
height: auto !important;
}
}
}
}
}
}
}
}
// Section Title
.section-title {
h1 {
text-transform: uppercase !important;
}
}
// Forms
.form {
.form-control {
font-size: 13px;
height: 40px;
}
textarea.form-control {
height: auto;
}
input[type="submit"] {
border-radius: 25px;
border-width: 0;
font-size: 13px;
padding: 10px 20px;
}
}
// Blog
.blog-bg {
background: #FFF;
}
.our-blog-item:hover:not(.blog-post) {
box-shadow: none;
}
}