/*
  [CSS Index]
  
  ---
  
  Template Name: Nextex - One Page Photography Portfolio Template
  Author:  ex-nihilo
  Version: 1.0
*/

 
/* 
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
	1.2. about IMG BACKGROUND
    1.3. team IMG BACKGROUND
    1.4. services IMG BACKGROUND
    1.5. works IMG BACKGROUND
    1.6. works more IMG BACKGROUND
	1.7. works even more IMG BACKGROUND
    1.8. news IMG BACKGROUND
	1.9. slick fullscreen slideshow - ZOOM/FADE - ken burns slideshow - IMG BACKGROUND
  2. reset
  3. layout
    3.1. upper page
  4. welcome message
  5. borders
  6. home credits, home contact
  7. to top arrow
  8. preloader
  9. hero
  10. videos
    10.1. YouTube video
    10.2. Vimeo video
    10.3. HTML5 video
  11. main navigation
  12. home title wrapper
  13. section txt
  14. section heading
  15. link underline
  16. works
  17. IMG carousel
  18. post box
  19. news
  20. halves
  21. background color
  22. intro
  23. button
  24. services
  25. post
  26. ken burns slideshow
  27. contact
    27.1. social icons
  28. Slick Slider CUSTOM
  29. Owl Carousel CUSTOM
  30. Magnific Popup CUSTOM
  31. Lity CUSTOM
  32. PhotoSwipe CUSTOM
  33. headers
  34. divider
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. single IMG BACKGROUND */
.bg-img-SINGLE {
background-image: url(../img/background/SINGLE-bg.jpg);
}


/* 1.2. about IMG BACKGROUND */
.works-list .works-list-bg.about-list-bg {
background-image: url(../img/about/1.jpg);
}


/* 1.3. team IMG BACKGROUND */
.carousel-item-team-01 {
background-image: url(../img/team/1.jpg);
}

.carousel-item-team-02 {
background-image: url(../img/team/2.jpg);
}

.carousel-item-team-03 {
background-image: url(../img/team/3.jpg);
}

.carousel-item-team-04 {
background-image: url(../img/team/4.jpg);
}


/* 1.4. services IMG BACKGROUND */


.services-item {
    position: relative;
    overflow: hidden;
}

.services-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0; /* behind the content */
}

.services-item .services-content {
    position: relative;
    z-index: 1; /* keep content above bg */
}



.works-list .works-list-bg.services-list-bg {
background-image: url(../img/services/1.jpg);
}


/* 1.5. works IMG BACKGROUND */
.works-list .works-list-bg.works-list-bg-1 {
background-image: url(../img/works/1.gif);
}

.works-list .works-list-bg.works-list-bg-2 {
background-image: url(../img/works/2.jpg);
}

.works-list .works-list-bg.works-list-bg-3 {
background-image: url(../img/works/3.gif);
}

.works-list .works-list-bg.works-list-bg-4 {
background-image: url(../img/works/4.jpg);
}


/* 1.6. works more IMG BACKGROUND */
.works-list .works-list-bg.works-list-bg-1-1 {
background-image: url(../img/works/more/3.jpg);
}

.works-list .works-list-bg.works-list-bg-2-1 {
background-image: url(../img/works/more/4.jpg);
}

.works-list .works-list-bg.works-list-bg-3-1 {
background-image: url(../img/works/more/5.jpg);
}

.works-list .works-list-bg.works-list-bg-4-1 {
background-image: url(../img/works/more/6.jpg);
}


/* 1.7. works even more IMG BACKGROUND */
.carousel-item-works-even-more-01 {
background-image: url(../img/works/even-more/1.jpg);
}

.carousel-item-works-even-more-02 {
background-image: url(../img/works/even-more/2.jpg);
}

.carousel-item-works-even-more-03 {
background-image: url(../img/works/even-more/3.jpg);
}

.carousel-item-works-even-more-04 {
background-image: url(../img/works/even-more/4.jpg);
}


/* 1.8. news IMG BACKGROUND */
.news-bg-1 {
background-image: url(../img/news/1.jpg);
}

.news-bg-2 {
background-image: url(../img/news/2.jpg);
}

.news-bg-3 {
background-image: url(../img/news/3.jpg);
}

.news-bg-4 {
background-image: url(../img/news/4.jpg);
}


/* 1.9. slick fullscreen slideshow - ZOOM/FADE - ken burns slideshow - IMG BACKGROUND */
.bg-img-1,
.kenburns-slide-1 {
background-image: url(../img/background/1.jpg);
}

.bg-img-2,
.kenburns-slide-2 {
background-image: url(../img/background/2.jpg);
}

.bg-img-3,
.kenburns-slide-3 {
background-image: url(../img/background/3.jpg);
}

.bg-img-4,
.kenburns-slide-4 {
background-image: url(../img/background/4.jpg);
}


/* 2. reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}

html, body {
height: 100%;
line-height: 170%;
}

body {
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*:focus {  
outline: none;
}

/* remove dotted outline from links,
button and input element */
a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}

/* IE10 scrollbar FIX */
html {
-ms-overflow-style: scrollbar;
}


/* 3. layout */
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
text-align: center;
color: #5f5f5f;
background: #fff;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
line-height: 1.5;
}

a {
color: #5f5f5f;
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

a:hover,
a:visited,
a:active,
a:focus {
color: #5f5f5f;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

p {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.05em;
color: #5f5f5f;
line-height: 2;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

p a,
p a:hover {
color: #5f5f5f;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

p.light {
color: #fff;
}

strong {
font-weight: bold;
}

::-moz-selection {
background: #ccc;
color: #fff;
}

::selection {
background: #ccc;
color: #fff;
}

.nopadding {
padding: 0!important;
margin: 0!important;
}


/* 3.1. upper page */
.upper-page {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
margin: 0;
}


/* 4. welcome message */


/* 5. borders */
.border-top,
.border-top.top-position,
.border-bottom,
.border-bottom.bottom-position,
.border-bottom.bottom-position-primary,
.border-bottom-2,
.border-left,
.border-left.left-position,
.border-left.left-position-primary,
.border-right,
.border-right.right-position,
.border-right.right-position-primary {
position: fixed;
background: #fff;
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
z-index: 100;
}

.border-top {
width: 100%;
height: 110px;
left: 0;
top: 0;
}

@media only screen and (max-width: 768px) {
  .border-top {
    height: 70px;
  }
}

.border-top.top-position {
-webkit-transform: translateY(-110px);
   -moz-transform: translateY(-110px);
    -ms-transform: translateY(-110px);
     -o-transform: translateY(-110px);
        transform: translateY(-110px);
}

@media only screen and (max-width: 768px) {
  .border-top.top-position {
    -webkit-transform: translateY(-70px);
       -moz-transform: translateY(-70px);
        -ms-transform: translateY(-70px);
         -o-transform: translateY(-70px);
            transform: translateY(-70px);
  }
}

.border-bottom {
width: 100%;
height: 190px;
left: 0;
bottom: 0;
}

@media all and (min-width: 1920px) {
  .border-bottom {
    height: 240px;
  }
}

@media only screen and (max-width: 768px) {
  .border-bottom {
    height: 160px;
  }
}

.border-bottom.bottom-position {
-webkit-transform: translateY(240px);
   -moz-transform: translateY(240px);
    -ms-transform: translateY(240px);
     -o-transform: translateY(240px);
        transform: translateY(240px);
}

@media only screen and (max-width: 768px) {
  .border-bottom.bottom-position {
    -webkit-transform: translateY(160px);
       -moz-transform: translateY(160px);
        -ms-transform: translateY(160px);
         -o-transform: translateY(160px);
            transform: translateY(160px);
  }
}

.border-bottom.bottom-position-primary {
-webkit-transform: translateY(240px);
   -moz-transform: translateY(240px);
    -ms-transform: translateY(240px);
     -o-transform: translateY(240px);
        transform: translateY(240px);
}

@media only screen and (max-width: 768px) {
  .border-bottom.bottom-position-primary {
    -webkit-transform: translateY(160px);
       -moz-transform: translateY(160px);
        -ms-transform: translateY(160px);
         -o-transform: translateY(160px);
            transform: translateY(160px);
  }
}

.border-bottom-2 {
width: 100%;
height: 110px;
left: 0;
bottom: 0;
-webkit-transform: translateY(110px);
   -moz-transform: translateY(110px);
    -ms-transform: translateY(110px);
     -o-transform: translateY(110px);
        transform: translateY(110px);
}

@media only screen and (max-width: 768px) {
 .border-bottom-2 {
   height: 70px;
  }
}

.border-bottom-2.show {
-webkit-transform: translateY(0);
   -moz-transform: translateY(0);
    -ms-transform: translateY(0);
     -o-transform: translateY(0);
        transform: translateY(0);
}

.border-left {
width: 110px;
height: 100%;
left: 0;
top: 0;
}

@media only screen and (max-width: 768px) {
  .border-left {
    width: 50px;
  }
}

.border-left.left-position {
-webkit-transform: translateX(-110px);
   -moz-transform: translateX(-110px);
    -ms-transform: translateX(-110px);
     -o-transform: translateX(-110px);
        transform: translateX(-110px);
}

@media only screen and (max-width: 768px) {
  .border-left.left-position {
    -webkit-transform: translateX(-50px);
       -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
         -o-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}

.border-left.left-position-primary {
-webkit-transform: translateX(-60px);
   -moz-transform: translateX(-60px);
    -ms-transform: translateX(-60px);
     -o-transform: translateX(-60px);
        transform: translateX(-60px);
}

@media only screen and (max-width: 768px) {
  .border-left.left-position-primary {
    -webkit-transform: translateX(-20px);
       -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
         -o-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}

.border-right {
width: 110px;
height: 100%;
right: 0;
top: 0;
}

@media only screen and (max-width: 768px) {
  .border-right {
    width: 50px;
  }
}

.border-right.right-position {
-webkit-transform: translateX(110px);
   -moz-transform: translateX(110px);
    -ms-transform: translateX(110px);
     -o-transform: translateX(110px);
        transform: translateX(110px);
}

@media only screen and (max-width: 768px) {
  .border-right.right-position {
    -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
        -ms-transform: translateX(50px);
         -o-transform: translateX(50px);
            transform: translateX(50px);
  }
}

.border-right.right-position-primary {
-webkit-transform: translateX(60px);
   -moz-transform: translateX(60px);
    -ms-transform: translateX(60px);
     -o-transform: translateX(60px);
        transform: translateX(60px);
}

@media only screen and (max-width: 768px) {
  .border-right.right-position-primary {
    -webkit-transform: translateX(20px);
       -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
         -o-transform: translateX(20px);
            transform: translateX(20px);
  }
}


/* 6. home credits, home contact */


/* 7. to top arrow */
.to-top-arrow {
position: fixed;
width: 50px!important;
max-width: 50px;
height: 50px;
line-height: 50px;
left: 0; 
right: 0;
bottom: -10px;
margin-left: auto; 
margin-right: auto; 
margin: 0 auto;
overflow: hidden;
font-size: 16px;
text-align: center;
color: #fff;
background: #111;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateY(40px);
   -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
     -o-transform: translateY(40px);
        transform: translateY(40px);
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
cursor: pointer;
z-index: 115;
}

.to-top-arrow.show {
bottom: 10px;
-webkit-transform: translateY(-20px);
   -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
     -o-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media only screen and (max-width: 768px) {
  .to-top-arrow.show {
    bottom: -10px;
  }
}

.to-top-arrow:hover {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


/* 8. preloader */
.preloader-bg,
#preloader {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader {
display: table;
table-layout: fixed;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: auto;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(0, 0, 0, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(0, 0, 0, .75);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* 9. hero */
.hero-fullscreen {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}

.hero-bg {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.hero-fullscreen-FIX {
width: 100%;
height: 100%;
}

.hero-center-container {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
z-index: 1;
}

.hero-center-block {
display: table-cell;
vertical-align: middle;
}


/* 10. videos */
/* 10.1. YouTube video */
.YT-bg {
display: none;
}

@media only screen and (max-width: 995px) {
  .YT-bg {
    position: relative;
    height: 100%;
    background-image: url(../img/background/YT-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
			/* uncomment the following to show an image for mobile devices */
            /* display: block; */
  }
}

#videoContainment {
position: absolute;
display: block;
width: 100%!important;
height: 100%!important;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 0;
}


/* 10.2. Vimeo video */
.vimeo-bg {
display: none;
}

@media only screen and (max-width: 995px) {
  .vimeo-bg {
    position: relative;
    height: 100%;
    background-image: url(../img/background/vimeo-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
			/* uncomment the following to show an image for mobile devices */
            /* display: block; */
  }
  
  #vimeo-videoContainment {
    display: none;
  }
}

#vimeo-videoContainment {
position: absolute;
display: block;
width: 100%!important;
height: 100%!important;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 0;
}

#vimeo-videoContainment iframe,
#vimeo-videoContainment object,
#vimeo-videoContainment embed {
border: none;
}


/* 10.3. HTML5 video */
.html5-bg {
display: none;
}

@media only screen and (max-width: 995px) {
  .html5-bg {
    position: relative;
    height: 100%;
	background-image: url(../img/background/html5-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
			/* uncomment the following to show an image for mobile devices */
            /* display: block; */
  }
}

.html5-videoContainment {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
background: #000;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
z-index: 0;
}


/* 11. main navigation */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: none;
z-index: 1001;
}

.logo-desktop .logo-desktop-dark,
.main-navigation-bg .logo-desktop .logo-desktop-dark {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
height: auto;
margin-top: -8px;
}

@media only screen and (max-width: 768px) {
  .logo-mobile {
    margin-top: 2px;
	/* margin-left: -12px; */
	margin-left: 0;
  }
}

.navbar-bg-switch {
position: fixed;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
z-index: 999;
}

.main-navigation {
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
}

.main-navigation.top-position {
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
     -o-transform: translateY(-200px);
        transform: translateY(-200px);
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
}

.main-navigation .navbar-nav li a {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
color: #111;
padding: 46px 15px 0 15px;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav li a {
    padding: 10px 15px;
  }
}

.main-navigation .navbar-nav li a:hover {
color: #111;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
}

.nav li a:focus,
.nav li a:hover {
color: #111;
background: none;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
}

.main-navigation-bg {
height: 70px;
background: none;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
}

@media only screen and (max-width: 768px) {
  .main-navigation-bg {
    height: auto;
	min-height: 70px;
    background: rgba(255, 255, 255, 1);
  }
}

.main-navigation-bg .main-navigation .navbar-nav li a {
color: #111;
padding: 26px 15px 0 15px;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
}

@media only screen and (max-width: 768px) {
  .main-navigation-bg .main-navigation .navbar-nav li a {
    padding: 10px 15px;
  }
}

.main-navigation-bg .main-navigation .navbar-nav li a:hover {
color: #111;
}

@media only screen and (max-width: 768px) {
  .navbar-toggle .icon-bar {
    background: #111;
	margin-top: 63px;
	/* margin-right: 2px; */
	margin-right: 14px;
  }
  
  .main-navigation-bg .navbar-toggle .icon-bar {
    background: #111;
  }
  
  .navbar-toggle {
    margin-top: -45px;
    margin-right: -10px;
    -webkit-transition: all .4s ease-out;
       -moz-transition: all .4s ease-out;
        -ms-transition: all .4s ease-out;
         -o-transition: all .4s ease-out;
            transition: all .4s ease-out;
  }
	
  .main-navigation-bg .navbar-toggle {
    margin-top: -45px;
    margin-right: -10px;
    -webkit-transition: all .4s ease-out;
       -moz-transition: all .4s ease-out;
        -ms-transition: all .4s ease-out;
         -o-transition: all .4s ease-out;
            transition: all .4s ease-out;
  }
  
  .navbar-collapse {
    background: rgba(255, 255, 255, 1);
	margin-left: -15px;
	margin-right: -15px;
  }
}

.navbar-nav li.active,
.navbar-nav > .active > a {
color: #111!important;
text-decoration: none;
}

.navbar-nav > .active > a {
background: none;
}

.main-navigation-bg .navbar-nav li.active,
.main-navigation-bg .navbar-nav > .active > a {
color: #111!important;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  
  .navbar-nav > li a {
    vertical-align: middle;
  } 
}


/* 12. home title wrapper */
.home-title-wrapper * {
-webkit-box-sizing: padding-box;
   -moz-box-sizing: padding-box;
    -ms-box-sizing: padding-box;
     -o-box-sizing: padding-box;
        box-sizing: padding-box;
}

.home-title-wrapper h1,
.home-title-wrapper h4 {
line-height: 1;
}

.home-title-wrapper h1 {
position: relative;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 60px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
text-align: center;
letter-spacing: -0.08em;
color: #111;
z-index: 1;
}

.home-title-wrapper h4 {
position: relative;
display: inline-block;
width: auto;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #111;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
position: relative;
margin: 0 auto;
padding: 0 10px;
z-index: 10;
}

.home-title-wrapper h4:before,
.home-title-wrapper h4:after {
content: "";
position: absolute;
width: 35px;
height: 1px;
top: 50%;
background: #111;
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h4:before,
  .home-title-wrapper h4:after {
    width: 25px;
  } 
}

.home-title-wrapper h4:before {
left: -35px;
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h4:before {
    left: -25px;
  } 
}

.home-title-wrapper h4:after {
right: -35px;
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h4:after {
    right: -25px;
  } 
}


/* 13. section txt */
.section-txt p {
margin: -17px auto 0 auto;
text-align: center;
}

.section-txt a,
.section-txt a:hover {
text-decoration: none;
font-weight: 600;
}


/* 14. section heading */
h2.section-heading {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #5f5f5f;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
padding: 0;   
z-index: 10;
}

h2.section-heading.section-heading-light {
color: #fff;
}

h2.section-heading span {
position: relative;
display: inline-block;
padding-right: 90px;
margin-right: 30px;
line-height: 1;
}

@media all and (min-width: 1920px) {
  h2.section-heading span {
    padding-right: 105px;
    margin-right: 35px;
  }
}

@media only screen and (max-width: 995px) {
  h2.section-heading span {
    padding-right: 75px;
    margin-right: 25px;
  }
}

@media only screen and (max-width: 768px) {
  h2.section-heading span {
    padding-right: 60px;
    margin-right: 20px;
  } 
}

h2.section-heading span:before {
content: "";
position: absolute;
display: block;
top: 50%;
right: 0;
width: 60px;
height: 0;
margin-top: -1px;
}

@media all and (min-width: 1920px) {
  h2.section-heading span:before {
    width: 70px;
  }
}

@media only screen and (max-width: 995px) {
  h2.section-heading span:before {
    width: 50px;
  }
}

@media only screen and (max-width: 768px) {
  h2.section-heading span:before {
    width: 40px;
  } 
}

h2.section-heading span:before {
border-top: 1px solid #5f5f5f;
}

h2.section-heading-light span:before {
border-top: 1px solid #fff;
}

h2.section-heading.section-heading-all {
padding: 0;
}


/* 15. link underline */


/* 16. works */
.works-list .works-list-wrapper {
margin: -40px 0 0 0;
padding: 0 0 150px 0;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-wrapper {
    margin: -130px 0 0 0;
    padding: 0 0 60px 0;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-wrapper {
    margin: -60px 0 0 0;
    padding: 0;
  }
}

.works-list .works-list-item {
position: relative;
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }
}

.works-list .works-list-item:not(:first-of-type) {
margin-top: 460px;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-item:not(:first-of-type) {
    margin-top: 200px;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-item:not(:first-of-type) {
    margin-top: 0;
  }
}

.works-list .works-list-item:nth-of-type(odd) .works-list-bg {
left: 0;
}

.works-list .works-list-item:nth-of-type(odd) .works-list-bg.works-list-bg-all {
left: auto;
right: 0;
}

.works-list .works-list-item:nth-of-type(even) .works-list-bg {
right: 0;
}

.works-list .works-list-item-container {
max-width: 100%;
-webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
}

.works-list .works-list-row {
position: relative;
z-index: 2;
}

.works-list .works-list-content {
padding: 150px 150px;
background: #fff;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-content {
    padding: 55px 55px;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-content {
    padding: 0;
	margin: 0 auto;
  }
}

@media only screen and (max-width: 768px) {
  .works-list .works-list-content {
    padding: 0 15px;
  }
}

.works-list .works-list-bg {
position: absolute;
width: 72%;
height: calc(100% + 300px);
top: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
z-index: 1;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-bg {
    height: calc(100% + 120px)
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-bg {
    position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 580px;
    -webkit-transform: none;
            transform: none;
    padding-top: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
  }
}

.works-list-content-wrapper {
padding-top: 190px;
margin-top: -1px;
}

@media only screen and (max-width: 995px) {
  .works-list-content-wrapper {
    padding-top: 60px
  }
}

.container-custom {
width: 100%;
padding-left: 0;
padding-right: 0;
margin-right: auto;
margin-left: auto
}

@media only screen and (max-width: 995px) {
  .container-custom {
	padding: 0;
  }
}

.col-md-6-custom {
position: relative;
width: 100%;
min-height: 1px;
padding-left: 0;
padding-right: 0;
}

@media only screen and (max-width: 995px) {
  .col-md-6-custom {
    padding-right: 15px;
    padding-left: 15px;
  }
}









/* 17. IMG carousel */
.carousel-item-img-wrapper {
position: relative;
/* width: 100vw; */
height: auto;
margin: 0;
padding: 0;
overflow: hidden;
cursor: grab;
}

@media only screen and (max-width: 995px) {
  .carousel-item-img-wrapper {
    width: 100%;
  }
}

.carousel-item-img-wrapper.carousel-item-img-wrapper-all {
height: auto;
}

.carousel-item-all {
position: relative;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.carousel-item-all {
height: 70vh;
}


/* 18. post box */
.post-box-inner {
margin: 0;
}

.post-box-title {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
padding: 0;
text-align: left;
letter-spacing: 0.05em;
color: #ff264a;
margin: -6px 0 -7px 0;
}

.post-spacing {
padding: 0 15px;
}

@media only screen and (max-width: 768px) {
  .post-spacing {
    padding: 0 30px;
  }
}


/* 19. news */
.news-txt {
margin: 0 auto;
padding: 0 150px;
}

@media all and (min-width: 1920px) {
  .news-txt {
	padding: 0 150px;
  }
}

@media only screen and (max-width: 1200px) {
  .news-txt {
    padding: 0 30px;
  }
}

@media only screen and (max-width: 995px) {
  .news-txt {
    padding: 0;
	margin: 0 -15px;
  }
}

@media only screen and (max-width: 768px) {
  .news-txt {
    padding: 0 15px;
  }
}

.news-bg-all {
width: 100%;
height: auto;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
-webkit-filter: grayscale(100%);
        filter: grayscale(100%);
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
}

@media only screen and (max-width: 995px) {
  .news-bg-all {
    margin-top: -30px;
  }
}

@media only screen and (max-width: 880px) {
  .news-bg-all {
    margin-top: -30px;
  }
}

@media only screen and (max-width: 768px) {
  .news-bg-all {
    margin-top: -20px;
  }
}

@media only screen and (max-width: 640px) {
  .news-bg-all {
    margin-top: 0;
  }
}

.halves:hover .news-bg-all {
-webkit-filter: none;
        filter: none;
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
}


/* 20. halves */
.halves {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}

@media only screen and (max-width: 995px) {
  .halves {
    -webkit-box-orient: vertical;
            box-orient: vertical;
	-webkit-box-direction: normal;
	        box-direction: normal;
	-webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.halves .half {
min-height: 350px;
-webkit-box-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
}

@media all and (min-width: 1920px) {
  .halves .half {
	min-height: 580px;
  }
}

@media only screen and (max-width: 995px) {
  .halves .half {
    min-height: 580px;
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
  }
}

.halves-services {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}

@media only screen and (max-width: 768px) {
  .halves-services {
    -webkit-box-orient: vertical;
            box-orient: vertical;
	-webkit-box-direction: normal;
	        box-direction: normal;
	-webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.halves-services .half {
min-height: 350px;
-webkit-box-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
}

@media all and (min-width: 1920px) {
  .halves-services .half {
	min-height: 350px;
  }
}

@media only screen and (max-width: 768px) {
  .halves-services .half {
    min-height: 350px;
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
  }
}


/* 21. background color */
.bg-light {
background: #fff;
}

.bg-dark {
background: #111;
}

.bg-dark-reverse {
background: #111;
}

@media only screen and (max-width: 995px) {
  .bg-dark-reverse {
    background: #fff;
  }
}


/* 22. intro */
.intro {
position: relative;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 60px;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
text-align: center;
letter-spacing: -0.08em;
color: #111;
margin: 0 0 20px 0;
padding: 0;
z-index: 1;
}

.intro span {
font-size: 120px;
}

.intro.intro-light {
color: #fff;
}


/* 23. button */
.more-wraper {
position: relative;
width: 120px!important;
max-width: 120px;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
margin: 19px auto 0 auto;
overflow: hidden;
text-align: center;
}

.more-button .more-button-wrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
width: 120px;
max-width: 100%;
-webkit-box-align: center;
   -ms-flex-align: center;
      align-items: center;
}

.more-button .more-button-wrapper:active svg,
.more-button .more-button-wrapper:focus svg,
.more-button .more-button-wrapper:hover svg {
}

.more-button .more-button-wrapper:active svg path,
.more-button .more-button-wrapper:focus svg path,
.more-button .more-button-wrapper:hover svg path {
stroke: #111;
}

.more-button .more-button-wrapper:active span,
.more-button .more-button-wrapper:focus span,
.more-button .more-button-wrapper:hover span {
right: -10%;
color: #111;
}

.more-button svg {
-webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
        transition: all .4s cubic-bezier(.165, .84, .44, 1);
-webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
        transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.more-button svg path {
fill: none;
stroke: #111;
stroke-miterlimit: 10;
-webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
        transition: all .4s cubic-bezier(.165, .84, .44, 1);
-webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
        transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.more-button span {
position: absolute;
top: 50%;
width: 120px!important;
max-width: 120px;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto;
overflow: hidden;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: normal;
color: #111;
-webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
        transition: all .4s cubic-bezier(.165, .84, .44, 1);
-webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
        transition-timing-function: cubic-bezier(.165, .84, .44, 1);
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
}


/* 24. services */
.services-item {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
z-index: 10;
}

.services-item.services-item-1 {
background: #f2f2f2;
}

.services-item.services-item-1:hover {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
background: #f2f2f2;
}

.services-item.services-item-2 {
background: #fff;
}

.services-item.services-item-2:hover {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
background: #fff;
}

.services-item:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
z-index: 2;
}

.services-item .services-content {
position: relative;
z-index: 3;
}

.services-item .services-content .services-sub-header {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
}

.services-item .services-content .services-sub-header {
color: #5f5f5f;
}

.services-item:hover .services-sub-header {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
color: #111;
}

.services-sub-header {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
color: #5f5f5f;
position: relative;
margin: -6px 0 -6px 0;
padding: 0;   
z-index: 10;
}

.services-sub-header-all-lead {
position: relative;
display: block;
color: #111;
}

.services-item:hover .services-sub-header-all-lead::after {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
background: #111;
}

.services-item .services-content .post-title {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
}

.services-item:hover .services-content .post-title {
-webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
color: #5f5f5f;
}

.services-item .services-content .post-title {
position: relative;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 40px;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
text-align: center;
letter-spacing: -0.08em;
color: #111;
margin: -10px 0 -4px 0;
padding: 0;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
z-index: 1;
}


/* 25. post */
.post-title {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #5f5f5f;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
margin: -10px 0 0 0;
padding: 0;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
z-index: 10;
}


/*  26. ken burns slideshow */
.kenburns-slide-wrapper {
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}

.kenburns-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-animation: KenBurnsSlideShow 24s linear infinite 0s;
   -moz-animation: KenBurnsSlideShow 24s linear infinite 0s;
    -ms-animation: KenBurnsSlideShow 24s linear infinite 0s;
     -o-animation: KenBurnsSlideShow 24s linear infinite 0s;
        animation: KenBurnsSlideShow 24s linear infinite 0s;
}

.kenburns-slide-1,
.kenburns-slide-2,
.kenburns-slide-3,
.kenburns-slide-4 {
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.kenburns-slide-1 {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.kenburns-slide-2 {
-webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
     -o-animation-delay: 6s;
        animation-delay: 6s;
}

.kenburns-slide-3 {
-webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
    -ms-animation-delay: 12s;
     -o-animation-delay: 12s;
        animation-delay: 12s;
}

.kenburns-slide-4 {
-webkit-animation-delay: 18s;
   -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
     -o-animation-delay: 18s;
        animation-delay: 18s;
}

@-webkit-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
 5% {
    opacity: 1
  }
 25% {
    opacity: 1;
  }
 30% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
 100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}

@-moz-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
  }
 5% {
    opacity: 1
  }
 25% {
    opacity: 1;
  }
 30% {
    opacity: 0;
    -moz-transform: scale(1.1);
  }
 100% {
    opacity: 0;
    -moz-transform: scale(1);
  }
}

@-o-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
  }
 5% {
    opacity: 1
  }
 25% {
    opacity: 1;
  }
 30% {
    opacity: 0;
    -o-transform: scale(1.1);
  }
 100% {
    opacity: 0;
    -o-transform: scale(1);
  }
}

@keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
	    transform: scale(1);
    -ms-transform: scale(1);
  }
 5% {
    opacity: 1
  }
 25% {
    opacity: 1;
  }
 30% {
    opacity: 0;
	    transform: scale(1.1);
    -ms-transform: scale(1.1);
  }
 100% {
    opacity: 0;
	    transform: scale(1);
    -ms-transform: scale(1);
  }
}


/* 27. contact */
#contact-form {
width: 100%;
margin: -10px auto 0 auto;
padding: 0;
}

form {
margin: 0;
padding: 0;
}

#form input {
position: relative;
width: 100%;
height: 40px;
border-bottom: 1px solid #111;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 10px 0 10px 0;
font-family: 'Raleway', sans-serif;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: 600;
text-align: center;
color: #111;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

textarea {
position: relative;
width: 100%;
height: 100px;
border-bottom: 1px solid #111;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 5px;
font-family: 'Raleway', sans-serif;
font-size: 13px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: 600;
text-align: center;
color: #111;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form textarea {
margin: 15px 0 10px 0;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form input:hover,
#form textarea:hover {
border-color: #ff264a;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form input:focus,
#form textarea:focus {
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.success {
font-family: 'Raleway', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: #111;
margin: 0;
padding: 25px 0 0 15px;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

#form .error {
position: absolute;
display: block;
width: 200px!important;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #ff264a;
letter-spacing: 0.15em;
font-weight: 600;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.make-space {
margin-left: 15px;
margin-right: 15px;
}

::-webkit-input-placeholder { font-size: 13px; color: #111; }
     :-ms-input-placeholder { font-size: 13px; color: #111; }
         ::-moz-placeholder { font-size: 13px; color: #111; }
     input:-moz-placeholder { font-size: 13px; color: #111; }

input:focus::-webkit-input-placeholder { color: transparent; }
     input:focus:-ms-input-placeholder { color: transparent; }
         input:focus::-moz-placeholder { color: transparent; }
          input:focus:-moz-placeholder { color: transparent; }

textarea:focus::-webkit-input-placeholder { color: transparent; }
     textarea:focus:-ms-input-placeholder { color: transparent; }
         textarea:focus::-moz-placeholder { color: transparent; }
          textarea:focus:-moz-placeholder { color: transparent; }

button {
border: none;
background: none;
outline: none;
}

button.more-button-wrapper {
margin: 5px auto 0 auto;
}


/* 27.1. social icons */
.social-icons {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
font-style: normal;
text-transform: uppercase;
text-align: center;
color: #5f5f5f;
margin: 10px auto 0 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
}

.social-icons a,
.social-icons a:hover {
outline: none;
text-decoration: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.social-icons li a:hover,
.social-icons li a:visited,
.social-icons li a:active,
.social-icons li a:focus {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
font-style: normal;
text-transform: uppercase;
}

.social-icons li {
display: inline;
padding: 0;
}

.social-icons li span {
color: #5f5f5f;
padding: 0 10px;
}


/* 28. Slick Slider CUSTOM */
.slick-slide {
height: 100vh;
background: none;
}
		
.slick-slider {
margin-bottom: 0;
margin-top: 0;
cursor: auto;
}

.slick-track,
.slick-list {
-webkit-perspective: 2000;
        perspective: 2000;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.slick-fullscreen-img-fill {
position: relative;
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}

.slick-fullscreen-img-fill img {
position: relative;
display: inline-block;
min-width: 100%;
max-width: none;
min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill {
height: 100vh;
background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img {
position: relative;
width: auto;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slick-fullscreen,
.slick-fullscreen-slideshow,
.slick-fullscreen-slideshow-zoom-fade {
background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-slideshow .slick-slide,
.slick-fullscreen-slideshow-zoom-fade .slick-slide {
display: none;
float: left;
height: 100%;
}

.slick-initialized .slick-slide {
display: block;
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .bg-img {
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
   -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
     -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
        transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: scale(1.3);
   -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
     -o-transform: scale(1.3);
        transform: scale(1.3);
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item.slick-active .bg-img {
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
}


/* 29. Owl Carousel CUSTOM */
.owl-carousel {
cursor: grab;
}

.owl-nav-custom-team,
.owl-nav-custom-works,
.owl-nav-custom-works-even-more,
.owl-nav-custom-news {
position: relative;
width: 115px!important;
max-width: 115px;
height: 50px;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
margin: 19px auto 0 auto;
overflow: hidden;
text-align: center;
}

.owl-buttons {
position: static;
}

.owl-prev,
.owl-next {
position: absolute;
display: block;
text-align: center;
}

.owl-prev {
left: 0;
}

.owl-next {
left: 60px;
}

.owl-prev,
.owl-next {
width: 50px;
height: 50px;
line-height: 50px;
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
font-size: 12px;
color: #fff;
background: #111;
cursor: pointer;
z-index: 10;	
}

.owl-prev:hover,
.owl-next:hover {
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
background: #111;
}

.owl-nav-custom-works .owl-prev,
.owl-nav-custom-works .owl-next {
color: #111;
background: #fff;
}

@media only screen and (max-width: 995px) {
  .owl-nav-custom-works .owl-prev,
  .owl-nav-custom-works .owl-next {
    color: #fff;
    background: #111;
  }
}

.owl-nav-custom-works .owl-prev:hover,
.owl-nav-custom-works .owl-next:hover {
background: #fff;
}

@media only screen and (max-width: 995px) {
  .owl-nav-custom-works .owl-prev:hover,
  .owl-nav-custom-works .owl-next:hover {
    background: #111;
  }
}


/* 30. Magnific Popup CUSTOM */
.mfp-bg {
background: rgba(0, 0, 0, .7);
}

.mfp-arrow-left:after {
font-family: "Ionicons";
content: "\f124";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-arrow-right:after {
font-family: "Ionicons";
content: "\f125";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: crosshair;
}

.mfp-arrow-left:after,
.mfp-arrow-left:before {
border-right: none;
}

.mfp-arrow-right:after,
.mfp-arrow-right:before {
border-left: none;
}

.mfp-title,
.mfp-counter {
font-family: 'Raleway', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 600;
letter-spacing: 0.05em;
}

.mfp-close {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 1200px) {
  .mfp-close {
	display: block;
	visibility: visible;
  }
}

.mfp-bg {
z-index: 99996;
}

.mfp-wrap {
z-index: 99997;
}

.mfp-content {
z-index: 99998;
}


/* 31. Lity CUSTOM */
.lity {
z-index: 99999;
cursor: crosshair;
background: rgba(0, 0, 0, .55);
}

.lity-close {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 995px) {
  .lity-close {
    top: 37px;
    left: 40px;
	display: block;
	visibility: visible;
  }
}

@media only screen and (max-width: 995px) {
  .lity-close:active {
    top: 37px;
    left: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .lity-close {
    top: 17px;
    left: 20px;
  }
}

@media only screen and (max-width: 768px) {
  .lity-close:active {
    top: 17px;
    left: 20px;
  }
}


/* 32. PhotoSwipe CUSTOM */
.item-folio__caption {
display: none;
font-family: 'Raleway', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 600;
letter-spacing: 0.05em;
}


/* 33. headers */
.home-title-wrapper h1 {
font-size: 60px;
margin: -10px auto 0 auto;
}

@media all and (min-width: 1920px) { 
  .home-title-wrapper h1 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h1 {
    font-size: 40px;
	margin: -5px auto 0 auto;
  }
}

.home-title-wrapper h4 {
font-size: 14px;
}

.intro {
font-size: 40px;
margin: 0 auto -1px auto;
}

@media all and (min-width: 1920px) { 
  .intro {
    font-size: 60px;
  }
}

@media only screen and (max-width: 995px) {
  .intro {
    font-size: 30px;
  }
}

@media only screen and (max-width: 768px) {
  .intro {
    font-size: 20px;
  }
}

.intro.intro-large-end {
margin: 0 auto -7px auto;
}

@media only screen and (max-width: 768px) {
  .intro.intro-large-end {
    margin: 0 auto -2px auto;
  }
}

.intro span {
font-size: 80px;
}

@media all and (min-width: 1920px) {
  .intro span {
    font-size: 100px;
  }
}

@media only screen and (max-width: 995px) {
  .intro span {
    font-size: 60px;
  }
}

@media only screen and (max-width: 768px) {
  .intro span {
    font-size: 40px;
  }
}

.intro.intro-all {
font-size: 30px;
margin: 0 auto -2px auto;
}

@media all and (min-width: 1920px) {
  .intro.intro-all {
    font-size: 50px;
  }
}

.services-item .services-content .post-title {
font-size: 40px;
}

@media all and (min-width: 1920px) {
  .services-item .services-content .post-title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 995px) {
  .services-item .services-content .post-title {
    font-size: 30px;
	top: 1px;
  }
}

@media only screen and (max-width: 768px) {
  .services-item .services-content .post-title {
    font-size: 20px;
  }
}

.more-wraper {
margin: 3px auto;
}

.more-wraper.more-wraper-form {
margin: 19px auto 0 auto;
}

h2.section-heading {
margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  h2.section-heading {
    font-size: 12px;
  }
}

.section-txt p {
margin: 0 auto;
}

@media only screen and (max-width: 995px) {
  .section-txt p {
    padding: 0 15px;
  }
}

.post-title {
margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  .post-title {
    font-size: 12px;
  }
}

.owl-nav-custom-team,
.owl-nav-custom-works,
.owl-nav-custom-works-even-more,
.owl-nav-custom-news {
margin: 3px auto;
}

.services-sub-header {
margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  .services-sub-header {
    font-size: 12px;
  }
}

.services-item .services-content .post-title {
margin: 0 auto 0 auto;
}


/* 34. divider */
.inner-divider,
.inner-divider-half,
.inner-divider-ultra-half,
.inner-divider-50,
.inner-divider-last {
position: relative;
width: 100%;
margin: 0 auto;
background: none;
z-index: -1;
}

.inner-divider {
height: 150px;
}

@media only screen and (max-width: 995px) {
  .inner-divider {
    height: 150px;
  }
}

.inner-divider-half {
height: 75px;
}

@media only screen and (max-width: 995px) {
  .inner-divider-half {
    height: 75px;
  }
}

.inner-divider-ultra-half {
height: 50px;
}

@media all and (min-width: 1920px) {
  .inner-divider-ultra-half {
    height: 75px;
  }
}

@media only screen and (max-width: 768px) {
  .inner-divider-ultra-half {
    height: 50px;
  }
}

.inner-divider-50 {
height: 50px;
}

@media only screen and (max-width: 768px) {
  .inner-divider-50 {
    height: 30px;
  }
}

.inner-divider-last {
height: 260px;
}

.mobile-visible {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 995px) {
  .mobile-visible {
    display: block;
    visibility: visible;
  }
  
  .mobile-hidden {
    display: none;
    visibility: hidden;
  }
}

.extra-margin-all,
.extra-margin-owl {
position: relative;
height: auto;
min-height: inherit;
overflow: hidden;
margin-left: 50px;
margin-right: 50px;
background: none;
}

@media only screen and (max-width: 768px) {
  .extra-margin-all,
  .extra-margin-owl {
    margin-left: 30px;
    margin-right: 30px;
  }
}

/* === Shrink "What we do best" / News carousel height === */

/* Reduce the forced minimum slide height */
#owl-carousel-news .halves .half{
  min-height: 240px; /* try 200–320 */
}

/* The BIG reason it's tall: internal spacer divs */
#owl-carousel-news .inner-divider{
  height: 30px; /* was 150px */
}

#owl-carousel-news .inner-divider-half{
  height: 25px; /* was 75px */
}

/* Responsive: keep it reasonable on smaller screens */
@media (max-width: 995px){
  #owl-carousel-news .halves .half{ min-height: 320px; }
  #owl-carousel-news .inner-divider{ height: 25px; }
  #owl-carousel-news .inner-divider-half{ height: 20px; }
}

@media (max-width: 768px){
  #owl-carousel-news .halves .half{ min-height: 300px; }
  #owl-carousel-news .inner-divider{ height: 20px; }
  #owl-carousel-news .inner-divider-half{ height: 18px; }
}






/* === NEWS ("What we do best") carousel: arrows on left/right edges === */

/* make the wrapper a positioning reference */
.extra-margin-owl { 
  position: relative; 
}

/* stretch the custom nav across the whole carousel area */
.extra-margin-owl .owl-nav-custom-news{
  position: absolute !important;
  top: 50%;
  left: 0;
  width: 100% !important;
  max-width: none !important;
  height: 50px;
  transform: translateY(-50%);
  margin: 0 !important;
  overflow: visible !important;
  z-index: 999;
}

/* override template positioning that puts both arrows on the left */
.extra-margin-owl .owl-nav-custom-news .owl-prev{
  left: 20px !important;
  right: auto !important;
}

.extra-margin-owl .owl-nav-custom-news .owl-next{
  right: 20px !important;
  left: auto !important;
}



/* === Translucent arrows (NEWS carousel) === */

.extra-margin-owl .owl-nav-custom-news .owl-prev,
.extra-margin-owl .owl-nav-custom-news .owl-next{
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* On hover: clearer + slightly more confident */
.extra-margin-owl:hover .owl-nav-custom-news .owl-prev,
.extra-margin-owl:hover .owl-nav-custom-news .owl-next{
  opacity: 0.85;
}

/* Optional: tiny hover feedback */
.extra-margin-owl .owl-nav-custom-news .owl-prev:hover,
.extra-margin-owl .owl-nav-custom-news .owl-next:hover{
  transform: scale(1.08);
}










/* Tighten whitespace around the "See More" above "What we do best" */

/* 1) Reduce the big spacer ABOVE the button (only in that section) */
#about .inner-divider{
  height: 40px !important;   /* was 150px */
}

/* 2) Reduce extra margin on the button wrapper itself */
#about .more-wraper{
  margin: 5px auto 10px auto !important; /* was 19px auto 0 auto */
}

/* 3) Reduce the big spacer at the TOP of the first carousel slide */
#owl-carousel-news .inner-divider.mobile-hidden{
  height: 30px !important;   /* adjust 15–50 */
}


/* ===== Vimeo Modal ===== */
#vimeo-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.vimeo-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}

.vimeo-content{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  background: #000;
}

.vimeo-content iframe{
  width: 100%;
  height: 100%;
}

.vimeo-close{
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}


/* === Reduce height of each WORKS block === */

/* 1) Reduce padding inside the text/content area */
.works-list .works-list-content{
  padding: 60px 60px !important;   /* was 150px */
}

/* Tablet */
@media (max-width: 1200px){
  .works-list .works-list-content{
    padding: 50px 50px !important;
  }
}

/* Mobile */
@media (max-width: 995px){
  .works-list .works-list-content{
    padding: 30px 15px !important;
  }
}

/* 2) Reduce huge vertical gap between works */
.works-list .works-list-item:not(:first-of-type){
  margin-top: 120px !important;  /* was 460px */
}

/* Tablet */
@media (max-width: 1200px){
  .works-list .works-list-item:not(:first-of-type){
    margin-top: 120px !important;
  }
}

/* Mobile */
@media (max-width: 995px){
  .works-list .works-list-item:not(:first-of-type){
    margin-top: 40px !important;
  }
}

/* 3) Reduce background image overshoot */
.works-list .works-list-bg{
  height: calc(100% + 120px) !important; /* was +300px */
}


/* === Works overlap: make separators clean after height reduction === */

/* Reduce overshoot so images don't bleed awkwardly */
.works-list .works-list-bg{
  height: calc(100% + 80px) !important;  /* try 60–120 */
}

/* Reduce the "floating" offset of the whole works list */
.works-list .works-list-wrapper{
  margin-top: 0 !important;              /* was negative */
  padding-bottom: 60px !important;       /* was 150px */
}

/* Make the spacing between items consistent with the new overlap */
.works-list .works-list-item:not(:first-of-type){
  margin-top: 120px !important;          /* try 80–160 */
}








/* === Video Portfolio (thumbnails + categories) === */

#video-portfolio{
  padding: 35px 0;
}

/* Filters */
.vp-filters{
  width: 92vw;
  max-width: 1100px;
  margin: 22px auto 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.vp-filter{
  border: 1px solid rgba(17,17,17,0.18);
  background: transparent;
  color: #111;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}

.vp-filter:hover{
  transform: translateY(-1px);
  opacity: 0.85;
}

.vp-filter.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Grid */

.vp-grid{
  width: 92vw;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 995px){
  .vp-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .vp-grid{ grid-template-columns: 1fr; }
}



/* Thumbnail card (clean, borderless, hover overlay, pop) */
.vp-card{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  border: 0;
  outline: 0;
  filter: grayscale(100%);
  cursor: pointer;

  transform: translateZ(0);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* translucent overlay on hover */
.vp-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  opacity: 0;
  transition: opacity .25s ease;
}

.vp-card:hover{
  filter: none;
  transform: scale(1.02);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.vp-card:hover::after{
  opacity: 1;
}

/* remove the corner arrow */
.vp-play{
  display: none !important;
}



/* Load more button */
.vp-loadmore-wrap{
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}

.vp-loadmore{
  width: 56px;
  height: 56px;
  border-radius: 999px;
   border: 0 !important;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}



.vp-loadmore{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  background-image: url("images/more.jpg"); /* 👈 your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}





/* WORKS – full-bleed images, clean spacing */
.works-list .works-list-bg{
  width: calc(100% + 100px);
  left: -50px;
  right: auto;
}

.works-list .works-list-content{
  position: relative;
  z-index: 2;
}



/* WORKS – smaller white boxes + consistent alignment (odd vs even) */
.works-list .works-list-content{
  max-width: 620px;          /* adjust: 520 / 580 / 620 */
  padding: 60px 60px;        /* adjust padding to taste */
  width: 100%;
}

/* Work 1 & 3: box hugs the image (image is left, box is right half) */
.works-list .works-list-item:nth-of-type(odd) .works-list-content{
  margin-left: 0;
  margin-right: auto;
}

/* Work 2 & 4: box hugs the image (image is right, box is left half) */
.works-list .works-list-item:nth-of-type(even) .works-list-content{
  margin-left: auto;
  margin-right: 0;
}

/* Mobile: keep it centered */
@media (max-width: 995px){
  .works-list .works-list-content{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 0 15px;
  }
}



/* WORKS – tighter, translucent content boxes */
.works-list .works-list-content{
  max-width: 460px;                 /* tighter box */
  padding: 40px 40px;               /* less air */
  background: rgba(255,255,255,0.88); /* soft translucency */
  backdrop-filter: blur(6px);       /* subtle glass effect */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}


.works-list .works-list-content{
  max-width: 420px;
  padding: 34px 34px;
  background: rgba(255,255,255,0.85);
}


.works-list .works-list-content p{
  font-size: 15px;
  line-height: 1.6;
}

.works-list .works-list-content{
  border-left: 1px solid rgba(0,0,0,0.05);
}


/* WORKS – anchor white boxes to image edges (not centered) */
.works-list .works-list-content{
  top: auto !important;
  transform: none !important;

  padding: 40px;              /* top = bottom = left = right */
  max-width: 460px;

  bottom: 40px;               /* same as padding */
}


.works-list-item:nth-of-type(even) .works-list-content{
  right: 100px !important;   /* push to right edge */
  left: auto !important;
}

.works-list-item:nth-of-type(odd) .works-list-content{
  right: -100px !important;     /* SAME as padding */
  left: auto !important;
}