/*
  [CSS Index]
  
  ---
  
  Template Name: Exinc - Creative Personal Portfolio Template
  Author:  ex-nihilo
  Version: 1.0
*/


/* 
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
    1.2. about testimonials IMG BACKGROUND
    1.3. facts parallax IMG BACKGROUND
	1.4. slick fullscreen slideshow IMG BACKGROUND, ken burns slideshow IMG BACKGROUND
  2. reset
  3. layout
    3.1. upper page
    3.2. lower page
  4. borders
  5. social icons
  6. line left
  7. line right
  8. line buttons
  9. home credits
  10. clearfix
  11. hero
    11.1 hero overlay
    11.2 hero container
    11.3 hero bg
    11.4 hero fullscreen FIX
    11.5 hero center container
	11.6. hero home page title
  12. main navigation
    12.1. main navigation link underline
  13. section
  14. about
    14.1. about intro years
    14.2. about vertical spacer line
	14.3. about fullwidth IMG
	14.4. about testimonials
    14.5. about skills
    14.6. about skills bar
  15. works
    15.1. works primary nav
    15.2. works secondary nav
    15.3. works col and row
    15.4. works center col and row
    15.5. works box description - left side
    15.6. works box description - right side
    15.7. works photo
    15.8. works lightbox
    15.9. works slideshow
    15.10. works hover effect
  16. services
  17. facts
    17.1. facts counter
    17.2. facts parallax
  18. contact
    18.1. contact modal launcher
	18.2. contact modal center container
    18.3. contact modal inner
    18.4. contact modal form
  19. footer
    19.1. footer logo
    19.2. footer social icons
    19.3. footer newsletter form
  20. preloader
  21. center container
  22. divider
  23. buttons
  24. link underline
  25. button effect
  26. to top arrow
  27. Slick v1.6.0 CUSTOM
    27.1. slick slide
    27.2. slick slide flickering FIX
    27.3. slick fullscreen slideshow
    27.4. slick navigation
  28. videos
    28.1. YouTube video
	  28.1.1. jquery.mb.YTPlayer v3.1.13 CUSTOM
	28.2. Vimeo video
  29. elements home call
    29.1. main navigation logo home call
    29.2. main navigation home call
    29.3. home credits home call
    29.4. social icons home call
  30. ken burns slideshow
  31. news
    31.1. news modal
    31.2. news modal video
  32. vertical spacer
  33. the button
  34. Owl Carousel v2.2.0 CUSTOM
  35. divider
*/


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


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


/* 1.3. facts parallax IMG BACKGROUND */
.parallax-facts {
  background-image: url(../img/background/parallax-facts-bg.jpg);
}


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

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

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

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

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

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

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

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

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

.bg-img-10,
.kenburns-slide-6 {
  background-image: url(../img/bkgrnd/10.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: 15px;
  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%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

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-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;
}

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;
}

p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

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;
}

strong {
  font-weight: bold;
}

::-moz-selection {
  background: #5f5f5f;
  color: #fff;
}

::selection {
  background: #5f5f5f;
  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;
}


/* 3.2. lower page */
#about,
#about-testimonials,
#about-skills,
#works,
#services,
#facts,
#news,
#contact,
#credits {
  position: relative;
  height: auto;
  min-height: inherit;
  overflow: hidden;
  margin-left: 50px;
  margin-right: 50px;
  background: none;
}

#news {
  margin-left: 10px;
  margin-right: 10px;
}

@media only screen and (max-width: 640px) {

  #about,
  #about-testimonials,
  #about-skills,
  #works,
  #services,
  #facts,
  #news,
  #contact,
  #credits {
    margin-left: 0;
    margin-right: 0;
  }
}


.portfolio-item {
  position: relative;
  height: 100%;
  min-height: 700px;
  overflow: hidden;
  margin-left: 50px;
  margin-right: 50px;
  background: none;
}

@media only screen and (max-width: 995px) {
  .portfolio-item {
    height: auto;
    min-height: inherit;
  }
}

@media only screen and (max-width: 640px) {
  .portfolio-item {
    height: auto;
    min-height: inherit;
    margin-left: 0;
    margin-right: 0;
  }
}

#credits {
  margin-bottom: 50px;
}

@media only screen and (max-width: 640px) {
  #credits {
    margin-bottom: 0;
  }
}


/* 4. borders */
.border-top,
.border-top.top-position,
.border-top.top-position-primary,
.border-bottom,
.border-bottom.bottom-position,
.border-bottom.bottom-position-primary,
.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.top-position-primary,
.border-bottom.bottom-position-primary,
.border-left.left-position-primary,
.border-right.right-position-primary {
  background: #f5f5f5;
}

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

@media only screen and (max-width: 995px) {
  .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: 995px) {
  .border-top.top-position {
    -webkit-transform: translateY(-70px);
    -moz-transform: translateY(-70px);
    -ms-transform: translateY(-70px);
    -o-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

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

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

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

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

.border-bottom.bottom-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: 995px) {
  .border-bottom.bottom-position {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
  }
}

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

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

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

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

@media only screen and (max-width: 995px) {
  .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: 995px) {
  .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(-0px);
  -moz-transform: translateX(-0px);
  -ms-transform: translateX(-0px);
  -o-transform: translateX(-0px);
  transform: translateX(-0px);
}

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

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

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

@media only screen and (max-width: 995px) {
  .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: 995px) {
  .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(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}

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

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


/* 5. social icons */
.social-icons-wrapper-share {
  position: fixed;
  display: block;
  visibility: visible;
  right: 20px;
  bottom: 11px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
  z-index: 1002;
}

@media only screen and (max-width: 640px) {
  .social-icons-wrapper-share {
    display: none;
    visibility: hidden;
  }
}

.social-icons-wrapper-share.bottom-position {
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.social-widgets-wrap {
  position: relative;
  right: 14px;
  top: 0;
  float: right;
  display: none;
}

.social-widgets {
  float: right;
}

.social-widgets a {
  display: block;
}

.social-widgets ul {
  list-style-type: none;
}

.social-widgets ul li {
  display: inline-block;
  text-align: right;
}

.social-widgets ul li {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 3px;
  text-align: center;
  float: right;
}

.social-widgets ul li:first-child {
  margin-left: 0;
}

.social-toggle-wrap {
  float: right;
}

.social-toggle-wrap:hover {
  cursor: pointer;
}

.social-toggle {
  float: right;
}

.social-toggle i {
  font-size: 20px;
  color: #111;
}

.social-icon a {
  padding: 0;
  color: #111;
  text-decoration: none;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -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;
}

.social-icon a:hover {
  padding: 0;
  color: #111;
  text-decoration: none;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  -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;
}


/* 6. line left */
.line-left {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  left: 15px;
  top: 50%;
  margin-top: 100px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
  z-index: 1001;
  display: none;
  visibility: hidden;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .line-left {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 640px) {
  .line-left {
    display: none;
    visibility: hidden;
  }
}

.line-left.left-position,
.line-left.line-left-position-primary {
  -webkit-transform: translateX(-200px) rotate(-90deg);
  -moz-transform: translateX(-200px) rotate(-90deg);
  -ms-transform: translateX(-200px) rotate(-90deg);
  -o-transform: translateX(-200px) rotate(-90deg);
  transform: translateX(-200px) rotate(-90deg);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}


/* 7. line right */
.line-right {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  right: 35px;
  top: 50%;
  margin-top: -225px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
  z-index: 1006;
  display: none;
  visibility: hidden;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .line-right {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 640px) {
  .line-right {
    display: none;
    visibility: hidden;
  }
}

.line-right.right-position,
.line-right.line-right-position-primary {
  -webkit-transform: translateX(200px) rotate(-90deg);
  -moz-transform: translateX(200px) rotate(-90deg);
  -ms-transform: translateX(200px) rotate(-90deg);
  -o-transform: translateX(200px) rotate(-90deg);
  transform: translateX(200px) rotate(-90deg);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}


/* 8. line buttons */
.button-discover-wrap {
  position: fixed;
  bottom: -35px;
  right: 115px;
  width: 170px;
  height: 50px;
  background: none;
  color: #fff;
  line-height: 50px;
}

.button-subscribe-wrap {
  position: fixed;
  bottom: -35px;
  right: 115px;
  width: 170px;
  height: 50px;
  background: none;
  color: #fff;
  line-height: 50px;
}

.button-discover {
  position: relative;
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  display: inline-block;
  outline: none;
  margin: 10px auto 0 auto;
  width: 170px;
  height: 50px;
  bottom: 10px;
  padding: 1px 0 0 0;
  border: none;
  color: #fff;
  background: #111;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.button-discover::before {
  position: absolute;
  content: "";
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  right: -100%;
  bottom: 0%;
  width: 200%;
  height: 200%;
  color: #fff;
  background: #999;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: skewX(-60deg);
  -moz-transform: skewX(-60deg);
  -ms-transform: skewX(-60deg);
  -o-transform: skewX(-60deg);
  transform: skewX(-60deg);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}

.button-discover::before {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.button-discover:hover {
  color: #fff;
  background: #111;
}

.button-discover:hover::before {
  bottom: -100%;
  right: -200%;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.button-subscribe {
  position: relative;
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  display: inline-block;
  outline: none;
  margin: 10px auto 0 auto;
  width: 170px;
  height: 50px;
  bottom: 10px;
  padding: 1px 0 0 0;
  border: none;
  color: #fff;
  background: #111;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.button-subscribe::before {
  position: absolute;
  content: "";
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  right: -100%;
  bottom: 0%;
  width: 200%;
  height: 200%;
  color: #fff;
  background: #999;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: skewX(-60deg);
  -moz-transform: skewX(-60deg);
  -ms-transform: skewX(-60deg);
  -o-transform: skewX(-60deg);
  transform: skewX(-60deg);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}

.button-subscribe::before {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.button-subscribe:hover {
  color: #fff;
  background: #111;
}

.button-subscribe:hover::before {
  bottom: -100%;
  right: -200%;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* 9. home credits */
.bottom-credits {
  position: fixed;
  display: block;
  visibility: visible;
  width: auto;
  height: 50px;
  left: 50%;
  /* Move to center */
  bottom: -14px;
  /* Keep existing bottom position */
  transform: translateX(-50%);
  /* Adjust for perfect centering */
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  /* Ensures text is centered */
  letter-spacing: 0.05em;
  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-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
  z-index: 1002;
}


.bottom-credits.bottom-position {
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.bottom-credits a,
.bottom-credits a:hover {
  color: #5f5f5f;
  text-decoration: none;
}


/* 10. clearfix */
.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}


/* 11. hero */
/* 11.1 hero overlay */
.overlay:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.overlay-dark-60:before {
  background: rgba(0, 0, 0, .6);
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

.overlay-dark-60-video:before,
.overlay-dark-60-video-mobile:before {
  background: rgba(0, 0, 0, .6);
  -webkit-pointer-events: auto;
  -moz-pointer-events: auto;
  pointer-events: auto;
}

.overlay-dark-60-video-mobile:before {
  display: none;
}

@media only screen and (max-width: 995px) {
  .overlay-dark-60-video-mobile:before {
    display: block;
  }
}

.overlay-dark-40:before {
  background: rgba(0, 0, 0, .4);
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

.overlay-dark-40-video:before,
.overlay-dark-40-video-mobile:before {
  background: rgba(0, 0, 0, .4);
  -webkit-pointer-events: auto;
  -moz-pointer-events: auto;
  pointer-events: auto;
}

.overlay-dark-40-video-mobile:before {
  display: none;
}

@media only screen and (max-width: 995px) {
  .overlay-dark-40-video-mobile:before {
    display: block;
  }
}


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


/* 11.3. hero bg */
.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;
}


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


/* 11.5. hero center container */
.hero-center-container {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

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


/* 11.6. hero home page title */
h1.home-page-title {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 2px #111;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  line-height: 1.5;
  margin: 0 auto;
  padding: 0 55px;
  z-index: 1;
}

@media only screen and (max-width: 995px) {
  h1.home-page-title {
    font-size: 70px;
    font-weight: 700;
    letter-spacing: -0.04em;
  }
}

@media only screen and (max-width: 640px) {
  h1.home-page-title {
    font-size: 50px;
  }
}

h1.home-page-title-hide,
h1.home-page-title-show {
  -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;
}

h1.home-page-title-hide {
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  letter-spacing: 0.40em;
}

@media only screen and (max-width: 995px) {
  h1.home-page-title-hide {
    letter-spacing: 0.20em;
  }
}

h1.home-page-title-show {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  letter-spacing: 0.20em;
}

@media only screen and (max-width: 995px) {
  h1.home-page-title-show {
    letter-spacing: -0.04em;
  }
}


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

.logo {
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;

}

.logo.top-position {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

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

.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 .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.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 .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
}

.main-navigation .navbar-nav li a {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #5f5f5f;
  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;
  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: #5f5f5f;
  -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: #5f5f5f;
  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-bg-position-primary {
    background: #f5f5f5;
  }
}

.main-navigation-bg .main-navigation .navbar-nav li a {
  color: #5f5f5f;
  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: #5f5f5f;
}

@media only screen and (max-width: 768px) {
  .navbar-toggle .icon-bar {
    background: #111;
    margin-top: 10px;
  }

  .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);
  }

  .navbar-collapse.navbar-collapse-position-primary {
    background: #f5f5f5;
  }
}

.main-navigation-bg .link-underline-menu:before {
  bottom: -5px;
  background: #111;
}

.navbar-nav li.active {
  color: #ccc !important;
  text-decoration: none;
}

.navbar-nav>.active>a {
  color: #ccc !important;
  background: none;
  text-decoration: none;
}


/* 12.1. main navigation link underline */
.link-underline-menu {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.link-underline-menu:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -5px;
  left: 0;
  background: #5f5f5f;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.link-underline-menu:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (max-width: 768px) {
  .link-underline-menu:hover:before {
    visibility: hidden;
  }
}

.link-underline-menu.active:before {
  background: #ccc;
}


/* 13. section */
.sections {
  position: relative;
  z-index: 5;
}

@media only screen and (max-width: 1200px) {
  .sections {
    width: 100% !important;
  }
}

@media only screen and (max-width: 640px) {
  .sections {
    padding: 0 10px;
  }
}

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

@media only screen and (max-width: 995px) {
  section h2.section-heading {
    font-size: 60px;
    /* font-weight: 700; */
    margin: 0 0 -15px 0;
  }
}

@media only screen and (max-width: 640px) {
  section h2.section-heading {
    font-size: 40px;
    margin: 0 0 -10px 0;
  }
}

section h2.section-heading.section-heading-light {
  color: #fff;
  margin-left: 15px;
  margin-right: 15px;
}

h2.section-subheading,
h2.section-subheading-light {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: -5px;
  text-align: center;
  letter-spacing: 0.05em;
}

h2.section-subheading {
  color: #111;
}

h2.section-subheading-light {
  color: #fff;
  margin-left: 15px;
  margin-right: 15px;
}

h2.section-subheading span,
h2.section-subheading-light span {
  position: relative;
  display: inline-block;
  padding-right: 45px;
  line-height: 1;
}

h2.section-subheading span:before,
h2.section-subheading-light span:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  width: 30px;
  height: 0;
  margin-top: -2px;
}

h2.section-subheading span:before {
  border-top: 2px solid #111;
}

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


/* 14. about */
/* 14.1. about intro years */
.intro-years {
  position: relative;
  width: auto;
  height: auto;
  margin: 434px auto 0 auto;
}

@media only screen and (max-width: 995px) {
  .intro-years {
    margin: 284px auto 0 auto;
  }
}

.intro-years h3 {
  position: relative;
  font-family: 'Montserrat', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 155px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111;
  width: 100%;
  line-height: 100%;
  z-index: 0;
}

.intro-years h2,
.intro-years h4 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.65em;
  color: #5f5f5f;
}

.intro-years h2 {
  margin: 42px 0;
}

.intro-years h4 {
  margin: 45px 0 -5px 0;
}


/* 14.2. about vertical spacer line */
.spacer-line-vertical {
  position: relative;
  display: inline-block;
}

.spacer-line-vertical:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 150px;
  top: 100%;
  left: 50%;
  margin: 142px auto 0 auto;
  border-right: 1px solid #5f5f5f;
}

@media only screen and (max-width: 995px) {
  .spacer-line-vertical:after {
    height: 100px;
    margin: 92px auto 0 auto;
  }
}


/* 14.3. about fullwidth IMG */
.img-fullwidth-wrapper {
  position: relative;
  min-height: 550px;
}

@media only screen and (max-width: 995px) {
  .img-fullwidth-wrapper {
    min-height: 500px;
  }
}

.img-fullwidth {
  position: absolute;
  height: auto;
  min-height: 550px;
  top: 0;
  bottom: 0;
}

@media only screen and (max-width: 995px) {
  .img-fullwidth {
    min-height: 500px;
  }
}

.img-fullwidth.img-fullwidth-bg-light {
  background: #fafafa;
  text-align: center;
  padding: 0 150px;
  margin-top: -10px;
}

@media only screen and (max-width: 995px) {
  .img-fullwidth.img-fullwidth-bg-light {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 640px) {
  .img-fullwidth.img-fullwidth-bg-light {
    padding: 0 10px;
  }
}

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


/* 14.4. about testimonials */
.testimonials-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.testimonials-carousel,
.testimonials-quote,
.testimonials-quote-img {
  -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.testimonials-quote-img {
  position: relative;
  font-size: 100px;
  font-weight: 700;
  color: rgba(95, 95, 95, .25);
  margin: 0 auto 56px auto;
}

.testimonials-quote p {
  text-align: center;
}

.testimonials-signature {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: #111;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 62px auto 0 auto;
}

.testimonials-signature:before {
  content: "― ";
  display: inline-block;
}


/* 14.5. about skills */
.about-skills-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 74px -3px;
  padding: 0;
  text-align: center;
  letter-spacing: -0.04em;
  color: #111;
}

#about-skills p {
  text-align: center;
  margin-top: 11px;
}

.about-skills {
  margin-top: 5px;
}

@media only screen and (max-width: 995px) {
  .about-skills.about-skills-correction {
    margin-top: 100px;
  }
}


/* 14.6. about skills bar */
.show-skillbar {
  position: relative;
  padding: 0;
  margin: 0;
  padding-left: 0;
  text-align: left;
}

.skillbar {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 21px;
  margin: 29px 0 82px 0;
  background: none;
  letter-spacing: 0.05em;
}

.skillbar-title {
  position: absolute;
  width: auto;
  height: 21px;
  line-height: 21px;
  top: -21px;
  left: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: #5f5f5f;
  background: none;
  padding: 0;
}

.skillbar-bar {
  display: inline-block;
  max-width: 50%;
  height: 1px;
  background: none;
  margin: 0 0 3px 0;
}

.skill-bar-percent {
  position: absolute;
  width: 320px !important;
  top: -41px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 1;
  color: #5f5f5f;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-size: 100px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.04em;
  color: rgba(95, 95, 95, .25);
  background: none;
  z-index: 0;
}


/* 15. works */
/* 15.1. works primary nav */
.menu-item-bg {
  background: #111;
  color: #fff;
}

@media only screen and (max-width: 995px) {
  .menu-item-bg {
    padding: 40px 0;
  }
}

nav.nav-secondary-experience>h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: #fff;
  padding: 0 0 61px 0;
  margin-left: -4px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

@media only screen and (max-width: 995px) {
  nav.nav-secondary-experience>h4 {
    padding: 0 0 21px 0;
  }
}

@media only screen and (max-width: 640px) {
  nav.nav-secondary-experience>h4 {
    margin-left: -9px;
  }
}

nav.nav-secondary-experience li {
  line-height: 2;
  margin-left: -4px;
}

@media only screen and (max-width: 640px) {
  nav.nav-secondary-experience li {
    margin-left: -9px;
  }
}

nav.nav-secondary-experience li span,
nav.nav-secondary-experience li a {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

nav.nav-secondary-experience li span:hover,
nav.nav-secondary-experience li a:hover {
  color: #fff;
  -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;
}

.box-menu-works.fixed nav {
  margin: 20px 0 0 0;
  padding: 0;
}

.box-menu-works.fixed h4,
.box-menu-works.fixed ul,
.box-menu-works.fixed ul li {
  float: left;
  line-height: normal;
  border-bottom: none;
  color: #5f5f5f;
}

.box-menu-works.fixed h4 {
  margin: 0 0 0 20px;
  padding: 5px 10px;
  border: 1px solid transparent;
}

.box-menu-works.fixed ul li {
  margin: 4px 0 0 2px;
}

@media only screen and (max-width: 1200px) {
  .box-menu-works.fixed ul li {
    margin: 11px 0 0 17px;
  }
}

.box-menu-works.fixed ul li span {
  color: #5f5f5f;
  padding: 5px 12px;
  border: none;
}


/* 15.2. works secondary nav */
.box-menu-works {
  width: 50%;
  margin: 0 auto;
}

@media only screen and (max-width: 995px) {
  .box-menu-works {
    width: 100% !important;
    padding: 29px 20px 27px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.box-menu-works.fixed {
  position: fixed;
  top: 70px;
  right: 0;
  min-height: 70px;
  margin: 0;
  background: #f5f5f5;
  -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;
  z-index: 1001;
}

@media only screen and (max-width: 1200px) {
  .box-menu-works.fixed {
    min-height: 106px;
  }
}

@media only screen and (max-width: 995px) {
  .box-menu-works.fixed {
    display: none;
    visibility: hidden;
  }
}


/* 15.3. works col and row */
.col-item,
.row-item {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .col-item {
    height: auto;
    min-height: inherit;
  }
}

.col-item.n-2 {
  width: 50%;
  background: #111;
}

@media only screen and (max-width: 995px) {
  .col-item.n-2 {
    width: 100%;
  }
}

.row-item.n-1 {
  height: 35%;
  background: #fff;
}

.row-item.n-2 {
  height: 50%;
}

@media only screen and (max-width: 995px) {
  .row-item.n-2 {
    height: auto;
    min-height: inherit;
  }
}

.row-item.n-3 {
  height: 65%;
}

@media only screen and (max-width: 995px) {
  .row-item.n-3 {
    height: auto;
    min-height: inherit;
  }
}


/* 15.4. works center col and row */
.box-table {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 995px) {
  .box-table {
    height: auto;
    min-height: inherit;
  }
}

.box-table .box-cell {
  display: table-cell;
  vertical-align: middle;
}

@media only screen and (max-width: 995px) {
  .box-table .box-cell {
    display: block;
    vertical-align: inherit;
  }
}


/* 15.5. works box description - left side */
.box-title {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  padding: 0 150px;
}

@media only screen and (max-width: 995px) {
  .box-title {
    height: auto;
    min-height: inherit;
    padding: 69px 15px 66px 15px;
  }
}

@media only screen and (max-width: 640px) {
  .box-title {
    padding: 69px 10px 66px 10px;
  }
}

.box-title h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: #fff;
  margin: 0 auto;
  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%;
}

.item-desc {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: #fff;
  margin: 4px auto 0 auto;
  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%;
}


/* 15.6. works box description - right side */
.box-description {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.05em;
  color: #5f5f5f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  padding: 0 150px;
}

@media only screen and (max-width: 995px) {
  .box-description {
    padding: 69px 15px 70px 15px;
  }
}

@media only screen and (max-width: 640px) {
  .box-description {
    padding: 69px 10px 70px 10px;
  }
}

.box-description p:last-child {
  margin-bottom: 0;
}


/* 15.7. works photo */
.photo {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  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;
  -webkit-transition: -webkit-transform .2s ease-out;
  -moz-transition: -moz-transform .2s ease-out;
  -ms-transition: -ms-transform .2s ease-out;
  -o-transition: -o-transform .2s ease-out;
  transition: transform .2s ease-out;
}

@media only screen and (max-width: 995px) {
  .photo {
    height: 100%;
    min-height: 500px;
  }
}

@media only screen and (max-width: 768px) {
  .photo {
    min-height: 300px;
  }
}


/* 15.8. works lightbox */
.lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  -webkit-transform: scale(1.75);
  -moz-transform: scale(1.75);
  -ms-transform: scale(1.75);
  -o-transform: scale(1.75);
  transform: scale(1.75);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 999999;
}

.lightbox.open {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
  visibility: visible;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}


/* 15.9. works slideshow */
.cycle-slideshow,
.cycle-slideshow>ul {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 0;
}

.cycle-slideshow .slider-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cycle-slideshow .bt-nav {
  top: 20px;
  right: 20px;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  z-index: 500;
}


/* 15.10. works hover effect */
.icon-works {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -ms-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1;
}

.icon-works a {
  display: inline-block;
  text-decoration: none;
  width: var(--icon-size, 64px);
  /* Adjustable icon size */
  height: var(--icon-size, 64px);
  line-height: var(--icon-size, 44px);
  font-size: var(--icon-font-size, 100px);
  /* Adjustable font size */

  color: #ffffff;
  border-radius: 3px;
  transition: all 0.35s ease-out;
}


.icon-works a,
.icon-works a:hover,
.icon-works a:visited,
.icon-works a:active,
.icon-works a:focus {
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -ms-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -o-transform: scale(0.75);
  transform: scale(0.75);
}

.icon-works a.iw-slide-left {
  -webkit-transform: translate3d(-60px, 0, 0);
  -moz-transform: translate3d(-60px, 0, 0);
  -ms-transform: translate3d(-60px, 0, 0);
  -o-transform: translate3d(-60px, 0, 0);
  transform: translate3d(-60px, 0, 0);
}

.icon-works a.iw-slide-right {
  -webkit-transform: translate3d(60px, 0, 0);
  -moz-transform: translate3d(60px, 0, 0);
  -ms-transform: translate3d(60px, 0, 0);
  -o-transform: translate3d(60px, 0, 0);
  transform: translate3d(60px, 0, 0);
}

.image-works:hover .icon-works a {
  padding: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.icon-works a:hover {

  color: #000000;
}

.icon-works a:hover:after {
  background: #1f232a;
}

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

.icon-works a:before {
  position: relative;
  z-index: 1;
}

.icon-works a i {
  position: relative;
  z-index: 1;
}

.image-works {
  position: relative;
  z-index: 5;
}

.image-works>.hover-effect {
  position: absolute;
  background: #fff;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.35s ease-out;
  -moz-transition: opacity 0.35s ease-out;
  -ms-transition: opacity 0.35s ease-out;
  -o-transition: opacity 0.35s ease-out;
  transition: opacity 0.35s ease-out;
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
  height: -moz-calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.image-works:hover .hover-effect {
  opacity: 0.55;
  -moz-opacity: 0.55;
  -webkit-opacity: 0.55;
  filter: alpha(opacity=55);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}


/* 16. services */
h6.services {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  color: #111;
  text-align: center;
  text-transform: uppercase;
  margin: 72px auto 66px auto;
  padding: 0;
  margin-bottom: 10px;
  /* Reduce space below the heading */
}

@media only screen and (max-width: 995px) {
  h6.services {
    margin: 72px auto 36px auto;
  }
}

.services-color {
  color: rgba(95, 95, 95, 1);
}

.services-columns .border-left-services {
  border-left: 0px solid #cbcbcb;
}

@media only screen and (max-width: 995px) {
  .services-columns .border-left-services {
    border-left: none;
  }
}

.services-columns .border-top-services {
  border-top: none;
}

.services-columns .border-top-services:after {
  content: "";
  position: absolute;
  width: 555px;
  border-bottom: 1px solid #cbcbcb;
  top: -40px;
  left: 0;
  right: 0;
  margin: auto;
}

@media only screen and (max-width: 1200px) {
  .services-columns .border-top-services:after {
    width: 470px;
  }
}

@media only screen and (max-width: 995px) {
  .services-columns .border-top-services:after {
    border-bottom: none;
  }
}

.services-padding {
  padding: 0 90px 0 90px;
  text-align: justify;
}

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

@media only screen and (max-width: 995px) {
  .services-padding-primary {
    margin-top: -74px;
  }
}

@media only screen and (max-width: 995px) {
  .services-padding-secondary {
    margin-top: -35px;
  }
}

.mb40 {
  margin-bottom: 40px !important;
}

.mt40 {
  margin-top: 40px !important;
}

@media only screen and (max-width: 995px) {
  .mt40 {
    margin-top: -35px !important;
  }
}

.services-top-txt {
  padding-bottom: 30px;
}

h6.services.services-bottom-heading {
  margin-top: 33px;
}

.services-bottom-txt {
  padding-bottom: 70px;
}

@media only screen and (max-width: 995px) {
  .services-bottom-txt-last {
    padding-bottom: 0;
  }
}


/* 17. facts */
/* 17.1. facts counter */
.facts-counter-wrapper {
  padding: 0;
  margin-top: 0;
}

@media only screen and (max-width: 995px) {
  .facts-counter-wrapper {
    font-size: 35px;
    margin-top: -10px;
  }
}

.facts-counter-number {
  font-family: 'Montserrat', sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.facts-counter-number.large {
  font-size: 50px;
  margin-top: -15px;
}

@media only screen and (max-width: 995px) {
  .facts-counter-number.large {
    font-size: 35px;
    margin-top: 0;
  }
}

.facts-counter-description {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

@media only screen and (max-width: 995px) {
  .facts-counter-description.facts-counter-description-primary {
    margin-bottom: 55px;
  }
}

.facts-counter-description-img {
  display: block;
  font-size: 25px;
  text-align: center;
  color: #fff;
  margin: 22px 0 23px 0;
}

@media only screen and (max-width: 995px) {
  .facts-counter-description-img {
    font-size: 20px;
    margin: 20px 0 10px 0;
  }
}

.facts-counter-description-img.large {
  font-size: 40px;
  margin: 15px 0 23px 0;
}

@media only screen and (max-width: 995px) {
  .facts-counter-description-img.large {
    font-size: 20px;
    margin: 20px 0 10px 0;
  }
}

.facts-counter-title {
  font-size: 11px;
  letter-spacing: 0.05em;
}

@media only screen and (max-width: 995px) {
  .facts-counter-title {
    font-size: 10px;
  }
}

.facts-counter-title.large {
  font-size: 12px;
}

@media only screen and (max-width: 995px) {
  .facts-counter-title.large {
    font-size: 10px;
  }
}


/* 17.2. facts parallax */
.parallax-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, .75);
  z-index: 0;
}

.parallax {
  display: block;
  width: 1000px;
  height: 600px;
  overflow: hidden;
  padding: 147px 0 300px 0;
  margin: 0 auto;
  /* Centers horizontally */
}


@media only screen and (max-width: 995px) {
  .parallax {
    width: 500px;
    height: 300px;
  }
}

.parallax-facts {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border: none;
  z-index: 1;
}

@media only screen and (max-width: 995px) {
  .parallax-facts {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}


/* 18. contact */
.contact-info-wrapper {
  margin-top: -15px;
}

.contact-info-description {
  font-family: 'Raleway', sans-serif;
  color: #5f5f5f;
  text-align: center;
  text-transform: none;
}

.contact-info-description-img {
  display: block;
  font-size: 30px;
  text-align: center;
  color: #111;
  margin: 15px 0 15px 0;
  padding-bottom: 10px;
}

@media only screen and (max-width: 995px) {
  .contact-info-description-img-secondary {
    margin-top: 60px;
  }
}

.contact-info-text {
  font-size: 14px;
}

.contact-info-text a,
.contact-info-text a:hover {
  text-decoration: none;
}


/* 18.1. contact modal launcher */
.contact-modal-launcher-wrapper {
  position: relative;
  width: 350px;
  height: auto;
  margin: -10px auto 0 auto;
  line-height: 1.5;
}

@media only screen and (max-width: 640px) {
  .contact-modal-launcher-wrapper {
    width: 280px;
  }
}

.contact-modal-launcher-wrapper a,
.contact-modal-launcher-wrapper a:hover {
  text-decoration: none;
}


/* 18.2. contact modal center container */
.center-container-contact-modal {
  position: absolute;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: none;
}

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

.center-block-contact-modal-padding-top {
  padding: 35px 0 0 0;
}

@media only screen and (max-width: 995px) {
  .center-block-contact-modal-padding-top {
    padding: 73px 0 0 0;
  }
}

.center-block-contact-modal-padding-bottom {
  padding: 0 0 35px 0;
}

@media only screen and (max-width: 995px) {
  .center-block-contact-modal-padding-bottom {
    padding: 0 0 69px 0;
  }
}

.center-container-contact-modal h2.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 60px;
  font-weight: 800;
  color: #111;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: -0.08em;
  line-height: 1;
  margin: 0;
  padding: 0 15px;
  z-index: 1;
}

@media only screen and (max-width: 480px) {
  .center-container-contact-modal h2.section-heading {
    padding: 0 30px;
  }
}

@media only screen and (max-width: 995px) {
  .center-container-contact-modal h2.section-heading {
    font-size: 40px;
  }
}

.center-container-contact-modal p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  color: #5f5f5f;
  margin: 20px 0 0 0;
  padding: 0 15px;
}

@media only screen and (max-width: 480px) {
  .center-container-contact-modal p {
    padding: 0 30px;
  }
}


/* 18.3. contact modal inner */
.contact-modal-wrapper {
  position: relative;
  width: 50%;
  margin: 0 auto;
}

@media only screen and (max-width: 1200px) {
  .contact-modal-wrapper {
    width: 90%;
  }
}

.contact-modal {
  position: fixed;
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: calc(100% - 100px);
  height: -webkit-calc(100% - 140px, 100px, 100px, 100px);
  height: -moz-calc(100% - 140px, 100px, 100px, 100px);
  height: calc(100% - 140px, 100px, 100px, 100px);
  top: 70px;
  right: 50px;
  bottom: 50px;
  left: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  visibility: hidden;
  border: none;
  background: #fff;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -o-transform: scale(0.75);
  transform: scale(0.75);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1005;
}

.contact-modal.close {
  visibility: hidden;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.contact-modal.open {
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: calc(100% - 100px);
  height: -webkit-calc(100% - 140px, 100px, 100px, 100px);
  height: -moz-calc(100% - 140px, 100px, 100px, 100px);
  height: calc(100% - 140px, 100px, 100px, 100px);
  top: 70px;
  right: 50px;
  bottom: 50px;
  left: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  visibility: visible;
  border: none;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

@media only screen and (max-width: 640px) {

  .contact-modal,
  .contact-modal.open {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: none;
  }
}

.contact-modal-closer {
  position: relative;
  width: 50px;
  height: auto;
  margin: 31px auto 0 auto;
  font-size: 20px;
  text-align: center;
  color: #111;
  cursor: pointer;
}


/* 18.4. contact modal form */
#contact-form {
  width: 100%;
  margin: 48px auto 0 auto;
  padding: 0;
  text-align: center;
  line-height: 1;
}

form {
  margin: 0;
  padding: 0;
}

#form input {
  position: relative;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #5f5f5f;
  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;
  line-height: 1.5;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: #5f5f5f;
  -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 #5f5f5f;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 5px 5px;
  background: none;
  margin: 5px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  -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 {
  color: #5f5f5f;
  margin: 10px 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: rgba(95, 95, 95, .35);
  -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: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #5f5f5f;
  margin: 0 auto;
  padding: 56px 0 60px 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#form .error {
  position: absolute;
  font-size: 9px;
  text-transform: uppercase;
  text-align: left;
  color: #5f5f5f;
  display: block;
  margin: 0;
  padding: 0;
  letter-spacing: 0.15em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-input-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

:-ms-input-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

::-moz-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

input:-moz-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

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;
}


/* 19. footer */
#footer {
  position: relative;
  height: 50%;
  min-height: inherit;
  overflow: hidden;
  margin: 0 auto;
  /* Center the footer */
  background: none;
  display: flex;
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
  /* Centers vertically */
  text-align: center;
  /* Ensures inline elements are centered */
}


@media only screen and (max-width: 640px) {
  #footer {
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }
}


/* 19.1. footer logo */
.footer-credits-logo {
  margin: 0 auto 60px auto;
}

.footer-credits-logo img {
  width: auto;
  height: auto;
}


/* 19.2. footer social icons */
.social-icons-wrapper {
  position: relative;
  margin: 0 auto;
}

.social-icons-wrapper ul {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

.social-icons-wrapper ul li {
  display: inline-block;
  margin: 0 auto;
  padding: 0 0 0 5px;
}

ul.social-icons {
  font-size: 16px;
  line-height: 1;
  color: #111;
  margin: 0;
  padding: 0;
  position: relative;
}

ul.social-icons a {
  padding: 0;
  color: #111;
  text-decoration: none;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -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;
}

ul.social-icons a:hover {
  padding: 0;
  color: #111;
  text-decoration: none;
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  -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;
}


/* 19.3. footer newsletter form */
section h2.section-heading.newsletter {
  font-size: 25px;
  margin-bottom: 29px;
}

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

#subscribe-wrapper {
  position: relative;
  width: 300px;
  height: 160px;
  margin: 0 auto 79px auto;
  background: none;
  text-align: center;
}

@media only screen and (max-width: 480px) {
  #subscribe-wrapper {
    width: 260px;
  }
}

.newsletter {
  position: relative;
  clear: both;
  border: none;
  background: none;
  padding: 0;
  overflow: hidden;
}

#subscribe input {
  position: relative;
  width: 225px;
  height: 40px;
  text-align: center;
  color: #5f5f5f;
  border: none;
  border-bottom: 1px solid #5f5f5f;
  background: 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;
}

#subscribe input:focus,
#subscribe textarea:focus {
  color: #5f5f5f;
  -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;
}

#subscribe input:hover {
  border-color: rgba(95, 95, 95, .35);
  -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;
}

.subscribe-success {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #5f5f5f;
  margin: 0 auto;
  padding: 56px 0 60px 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#subscribe .subscribe-error {
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  color: #5f5f5f;
  display: block;
  margin: 2px auto 0 auto;
  padding: 0;
  letter-spacing: 0.15em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input[type="text"].subscribe-email::-webkit-input-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

input[type="text"].subscribe-email:-ms-input-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

input[type="text"].subscribe-email::-moz-placeholder {
  font-size: 12px;
  color: #5f5f5f;
}

input:focus.subscribe-email::-webkit-input-placeholder {
  color: transparent;
}

input:focus.subscribe-email:-ms-input-placeholder {
  color: transparent;
}

input:focus.subscribe-email::-moz-placeholder {
  color: transparent;
}

input:focus.subscribe-email:-moz-placeholder {
  color: transparent;
}


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

#preloader {
  position: fixed;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 999999;
}

#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: 50%;
  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);
  }
}


/* 21. center container */
.center-container {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

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


/* 22. divider */
.dividerOT.out-top,
.dividerOT.out-bottom,
.dividerOT.dividerOT-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: none;
}

.dividerOT.out-top,
.dividerOT.out-bottom,
.dividerOT.dividerOT-inner {
  height: 150px;
}

@media only screen and (max-width: 995px) {

  .dividerOT.out-top,
  .dividerOT.out-bottom,
  .dividerOT.dividerOT-inner {
    height: 100px;
  }
}

.dividerOT.dividerOT-inner {
  background: none;
}

.divider-out-port {

  position: relative;
  width: 100%;
  margin: 0 auto;
  background: none;
  height: 50px;
}
@media only screen and (max-width: 995px) {

  .divider-out-port {
    height: 30px;
  }
}


/* 23. buttons */
.bt-nav {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 35px;
  text-indent: -10000px;
  cursor: pointer;
  -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;
}

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

.bt-nav em:after,
.bt-nav em:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  margin-top: 1px;
  margin-left: -5px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.bt-nav em:before {
  margin-left: 3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bt-nav.zoom-item {
  text-indent: inherit;
}

.bt-nav.zoom-item:hover {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.bt-nav.close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  margin: 0 2px;
  font-size: 20px;
  background: #1f232a;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.bt-nav.close em:after,
.bt-nav.close em:before {
  width: 2px;
  height: 20px;
  margin-top: -10px;
  margin-left: -1px;
  background: #fff;
}


/* 24. link underline */
.link-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.link-underline::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  padding: 0;
  background-color: #5f5f5f;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-underline:hover::after {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 25. button effect */
.c-btn {
  position: relative;
  display: inline-block;
  border: 1px solid #111;
  background: none;
  letter-spacing: 0.25em;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  color: #111;
  margin: 20px 0 0 0;
  padding: 11px 25px 9px 25px;
  -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-btn-contact-modal-wrapper-only {
  padding: 18px 25px 16px 25px;
}

.c-btn.fullwidth-liquid {
  width: 225px;
  color: #fff;
  background: #111;
  border: none;
}

.c-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #111;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-btn.fullwidth-liquid::before {
  background: #5f5f5f;
}

.c-btn:hover::before,
a:hover .c-btn::before {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.c-btn span {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.c-btn:hover,
a:hover .c-btn {
  color: #fff;
}

.c-btn.fullwidth-liquid:hover {
  color: #fff;
}

.c-btn.c-btn-inverse-dark {
  font-size: 10px;
  color: #fff;
  margin: 20px 0 0 0;
  padding: 14px 20px;
}

.c-btn.c-btn-inverse-dark {
  background: rgba(0, 0, 0, 1);
}

.c-btn.c-btn-inverse-dark:visited,
.c-btn.c-btn-inverse-dark:active,
.c-btn.c-btn-inverse-dark:focus {}

.c-btn-inverse-dark::before {
  background: rgba(255, 255, 255, 1);
}

.c-btn.c-btn-inverse-dark:hover {
  color: #111;
}


/* 26. to top arrow */
.to-top-arrow {
  position: fixed;
  right: 70px;
  bottom: -10px;
  width: 50px;
  height: 50px;
  line-height: 47px;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background: #1f232a;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -ms-transform: translateY(40px);
  -o-transform: translateY(40px);
  transform: translateY(40px);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -ms-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s;
  z-index: 105;
}

@media only screen and (max-width: 640px) {
  .to-top-arrow {
    right: 20px;
  }
}

.to-top-arrow.show {
  bottom: 50px;
  -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: 640px) {
  .to-top-arrow.show {
    bottom: 0;
  }
}

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


/* 27. Slick v1.6.0 CUSTOM */
/* 27.1. slick slide */
.slick-slide {
  height: 100%;
  background: none;
}

.slick-slider {
  margin-bottom: 0;
  margin-top: 0;
  cursor: auto;
}


/* 27.2. slick slide flickering FIX */
.slick-track,
.slick-list {
  -webkit-perspective: 2000;
  perspective: 2000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* 27.3. slick fullscreen slideshow */
.slick-fullscreen-img-fill {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.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 {
  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 {
  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-dots,
.slick-fullscreen-slideshow .slick-dots {
  position: absolute;
  width: 100%;
  height: 5px;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, .25);
  list-style-type: none;
}

.slick-fullscreen .slick-dots li button,
.slick-fullscreen-slideshow .slick-dots li button {
  display: none;
}

.slick-fullscreen .slick-dots li,
.slick-fullscreen-slideshow .slick-dots li {
  position: absolute;
  float: left;
  width: 0;
  height: 5px;
  left: -5px;
  background: #fff;
}

.slick-fullscreen .slick-dots li.slick-active,
.slick-fullscreen-slideshow .slick-dots li.slick-active {
  width: 100%;
  -webkit-animation: progressDots 4s both;
  -moz-animation: progressDots 4s both;
  -ms-animation: progressDots 4s both;
  -o-animation: progressDots 4s both;
  animation: progressDots 4s both;
}

@-webkit-keyframes progressDots {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes progressDots {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

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

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

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


/* 27.4. slick navigation */
.slick-prev:before,
.slick-next:before {
  font-size: 15px;
  color: #111;
}


/* 28. videos */
/* 28.1. YouTube video */
.YT-bg {
  display: none;
}

@media only screen and (max-width: 880px) {
  .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;
}


/* 28.1.1. jquery.mb.YTPlayer v3.1.13 CUSTOM */
.mb_YTPBar .mb_YTPProgress {
  background: #fff;
  height: 10px;
}

.mb_YTPBar .mb_YTPseekbar {
  background: #5f5f5f;
  height: 10px;
}

.mb_YTPBar .mb_YTPLoaded {
  background: #db0018;
}

.mb_YTPBar {
  opacity: 0.25;
  -moz-opacity: 0.25;
  -webkit-opacity: 0.25;
  filter: alpha(opacity=25);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  z-index: 100 !important;
}

@media only screen and (max-width: 880px) {
  .mb_YTPBar {
    display: none;
    visibility: hidden;
  }
}

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

.mb_YTPBar .buttonBar,
.mb_YTPBar:hover .buttonBar {
  background: none;
}

.mb_YTPBar,
.mb_YTPBar span.mb_YTPUrl a {
  color: #fff;
}

.mb_YTPBar .level {
  background-color: #fff;
}

@media only screen and (max-width: 880px) {

  .mb_YTPBar span.mb_OnlyYT,
  .mb_YTPBar span.mb_YTPUrl {
    display: none;
    visibility: hidden;
  }
}

#changeVideo {
  position: absolute;
  top: 135px;
  right: 155px;
  width: auto;
  margin: 0;
  -webkit-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s;
  -moz-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s;
  -ms-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s;
  -o-transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s;
  transition: 1.2s cubic-bezier(0.67, 0.02, 0.2, 0.97) 2.3s;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  cursor: pointer;
  z-index: 100;
}

@media only screen and (max-width: 995px) {
  #changeVideo {
    top: auto;
    bottom: 75px;
    right: 75px;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.page-loaded #changeVideo {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#changeVideo .active {
  color: #111;
  background: rgba(255, 255, 255, 1);
}

@media only screen and (max-width: 480px) {
  .mb_YTPBar .mb_YTPUrl.ytpicon {
    display: none;
  }
}


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

@media only screen and (max-width: 880px) {
  .vimeo-bg {
    position: relative;
    display: block;
    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;
  }

  #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;
}


/* 29. elements home call */
/* 29.1. main navigation logo home call */
.logo {
  margin: 23px 0 0 25px;
}

@media only screen and (max-width: 995px) {
  .logo {
    margin: 3px 0 0 5px;

  }
}

.logo.logo-home-call {
  margin: 3px 0 0 5px;
}


/* 29.2. main navigation home call */
.main-navigation {
  padding: 20px 24px 0 0;
}

@media only screen and (max-width: 995px) {
  .main-navigation {
    padding: 0 4px 0 0;
  }
}

.main-navigation.main-navigation-home-call {
  padding: 0 4px 0 0;
}


/* 29.3. home credits home call */
.bottom-credits {
  left: 50%;
  bottom: 16px;

}

@media only screen and (max-width: 995px) {
  .bottom-credits {
    left: 50%;
    bottom: -14px;
    font-size: 7px;
  }
}

.bottom-credits.bottom-credits-home-call {
  left: 50%;
  bottom: -14px;
}


/* 29.4. social icons home call */
.social-icons-wrapper-share {
  right: 40px;
  bottom: 39px;
}

@media only screen and (max-width: 995px) {
  .social-icons-wrapper-share {
    right: 20px;
    bottom: 11px;
  }
}

.social-icons-wrapper-share.social-icons-wrapper-share-home-call {
  right: 20px;
  bottom: 11px;
}


/* 30. 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);
  }
}


/* 31. news */
#news p {
  margin-left: 0;
  margin-right: 0;
}

@media only screen and (max-width: 1200px) {
  #news p {
    margin-left: 40px;
    margin-right: 40px;
  }
}

@media only screen and (max-width: 640px) {
  #news p {
    margin-left: 0;
    margin-right: 0;
  }
}

.post-all-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.post-all-heading.post-all-heading-dark {
  color: #111;
}

#news-carousel {
  z-index: 10;
}

#news .section-news-item {
  opacity: 0.25;
  -moz-opacity: 0.25;
  -webkit-opacity: 0.25;
  filter: alpha(opacity=25);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  -webkit-transform: scale3d(0.8, 0.8, 1);
  -moz-transform: scale3d(0.8, 0.8, 1);
  -ms-transform: scale3d(0.8, 0.8, 1);
  -o-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#news .owl-item.active.center .section-news-item {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale3d(1.0, 1.0, 1);
  -moz-transform: scale3d(1.0, 1.0, 1);
  -ms-transform: scale3d(1.0, 1.0, 1);
  -o-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);
}

.owl-carousel .owl-item img {
  margin: 0;
  padding: 0;
}

.section-news-item .section-news-content img {
  max-width: 100%;
  -webkit-transition: all .8s ease-out;
  -moz-transition: all .8s ease-out;
  -ms-transition: all .8s ease-out;
  -o-transition: all .8s ease-out;
  transition: all .8s ease-out;
}

.section-news-item:hover .section-news-content img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.section-news-content {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
  min-width: 250px;
  height: auto;
  text-align: left;
}

.section-news-content img {
  max-width: 100%;
  vertical-align: top;
  margin: 0;
  padding: 0;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.section-news-content .date,
.modal-content .date {
  position: relative;
  width: 100%;
  background: none;
  text-align: center;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  margin: -20px auto -2px auto;
  padding: 75px 0 0 0;
}

.modal-content .date {
  color: #111;
  font-weight: 600;
}

.section-news-content figcaption {
  position: relative;
  width: 100%;
  background: #111;
  padding: 0 90px;
}

@media all and (min-width: 1920px) {
  .section-news-content figcaption {
    padding: 0 100px;
  }
}

@media only screen and (max-width: 995px) {
  .section-news-content figcaption {
    padding: 0 45px;
  }
}

.section-news-content h3,
.modal-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.05em;
  color: #fff;
  margin: -2px auto -1px auto;
}

@media all and (min-width: 1920px) {

  .section-news-content h3,
  .modal-content h3 {
    margin: -3px auto;
  }
}

.modal-content h3 {
  color: #111;
}

.section-news-content p {
  color: #fff;
  text-align: center;
  margin: -3px auto;
  padding: 0;
}

.section-news-txt {
  margin-left: 0;
  margin-right: 0;
}

@media only screen and (max-width: 1200px) {
  .section-news-txt {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media only screen and (max-width: 640px) {
  .section-news-txt {
    margin-left: 0;
    margin-right: 0;
  }
}

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


/* 31.1. news modal */
.news-modal .modal-content {
  min-height: 100%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.news-modal .modal-content img {
  margin: 1px 0;
}

.modal-body p {
  position: relative;
  bottom: 1px;
  margin: -7px auto 0 auto;
  color: #5f5f5f;
}

@media only screen and (max-width: 995px) {
  .modal-body p {
    margin: -5px auto 0 auto;
  }
}


/* 31.2. news modal video */
.news-modal-video-container {
  position: relative;
  height: 0;
  padding-top: 30px;
  padding-bottom: 56.25%;
  margin: 1px 0;
  overflow: hidden;
  border: none;
}

.news-modal-video-container iframe,
.news-modal-video-container object,
.news-modal-video-container embed {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
}


/* 32. vertical spacer */
.vertical-spacer {
  position: relative;
  width: 1px;
  height: 80px;
  background: #fff;
  margin: 1px auto;
}

.vertical-spacer.vertical-spacer-dark {
  background: #5f5f5f;
}

@media all and (min-width: 1920px) {
  .vertical-spacer {
    height: 90px;
  }
}

@media only screen and (max-width: 995px) {
  .vertical-spacer {
    height: 70px;
  }
}


/* 33. the button */
.the-button-wrapper {
  position: relative;
  width: 165px;
  height: auto;
  line-height: 1.5;
  margin: 0 auto;
  padding: 0;
  left: 0;
  text-align: center;
  cursor: pointer;
}

@media all and (min-width: 1920px) {
  .the-button-wrapper {
    width: 205px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 640px) {
  .the-button-wrapper {
    width: 165px;
    margin: 0 auto;
  }
}

.the-button-wrapper.the-button-wrapper-more {
  width: 165px;
  margin: 0 auto;
}

.the-button {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.10em;
  color: #111;
  background: none;
  padding: 10px 40px 0 40px;
  margin-top: 10px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.the-button.the-button-light {
  color: #fff;
}

@media all and (min-width: 1920px) {
  .the-button {
    font-size: 12px;
    letter-spacing: 0.25em;
  }
}

@media only screen and (max-width: 640px) {
  .the-button {
    font-size: 10px;
    letter-spacing: 0.10em;
  }
}

.the-button.the-button-more {
  font-size: 10px;
  letter-spacing: 0.10em;
  margin: 3px auto 12px auto;
}

.the-button:hover::before,
.the-button.the-button-more:hover::before {
  width: 100%;
}

.the-button:hover::after,
.the-button.the-button-more:hover::after {
  width: 100%;
}

.the-button::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 38px;
  top: -2px;
  left: -6px;
  border: 1px solid #111;
  border-right: 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;
}

.the-button.the-button-light::before {
  border: 1px solid #fff;
  border-right: none;
}

@media all and (min-width: 1920px) {
  .the-button::before {
    width: 20px;
    height: 47px;
    top: -5px;
  }
}

@media only screen and (max-width: 640px) {
  .the-button::before {
    width: 15px;
    height: 38px;
    top: -2px;
  }
}

.the-button.the-button-more::before {
  width: 15px;
  height: 38px;
  top: -2px;
}

.the-button::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 38px;
  top: -2px;
  right: -6px;
  border: 1px solid #111;
  border-left: 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;
}

.the-button.the-button-light::after {
  border: 1px solid #fff;
  border-left: none;
}

@media all and (min-width: 1920px) {
  .the-button::after {
    width: 20px;
    height: 47px;
    top: -5px;
  }
}

@media only screen and (max-width: 640px) {
  .the-button::after {
    width: 15px;
    height: 38px;
    top: -2px;
  }
}

.the-button.the-button-more::after {
  width: 15px;
  height: 38px;
  top: -2px;
}


/* 34. Owl Carousel v2.2.0 CUSTOM */
.owl-buttons {
  position: static;
}

.owl-prev,
.owl-next {
  position: absolute;
  display: block;
  top: 50%;
  margin-top: -35px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  text-align: center;
  -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#news-carousel .owl-prev,
#news-carousel .owl-next {
  color: #fff;
}

@media only screen and (max-width: 480px) {

  #news-carousel .owl-prev,
  #news-carousel .owl-next {
    display: none;
    visibility: hidden;
  }
}

.owl-prev {
  left: -50px;
}

.owl-next {
  right: -50px;
}

.owl-prev::before,
.owl-next::before {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background: #1f232a;
  -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

#news-carousel .owl-prev::before,
#news-carousel .owl-next::before {
  background: #1f232a;
}

.owl-prev::before {
  left: 55px;
  top: 9px;
}

#news-carousel .owl-prev::before {
  left: 75px;
}

@media only screen and (max-width: 640px) {
  #news-carousel .owl-prev::before {
    left: 35px;
  }
}

.owl-next::before {
  right: 55px;
  top: 9px;
}

#news-carousel .owl-next::before {
  right: 75px;
}

@media only screen and (max-width: 640px) {
  #news-carousel .owl-next::before {
    right: 35px;
  }
}

.owl-prev .owl-custom,
.owl-next .owl-custom {
  position: relative;
}

.owl-prev .owl-custom {
  position: relative;
  top: 8px;
  left: 54px;
}

#news-carousel .owl-prev .owl-custom {
  left: 74px;
}

@media only screen and (max-width: 640px) {
  #news-carousel .owl-prev .owl-custom {
    left: 34px;
  }
}

.owl-next .owl-custom {
  position: relative;
  top: 8px;
  right: 54px;
}

#news-carousel .owl-next .owl-custom {
  right: 74px;
}

@media only screen and (max-width: 640px) {
  #news-carousel .owl-next .owl-custom {
    right: 34px;
  }
}

.owl-prev:hover,
.owl-next:hover {
  -webkit-transition: 0 none;
  -moz-transition: 0 none;
  -ms-transition: 0 none;
  -o-transition: 0 none;
  transition: 0 none;
}

.owl-prev:hover::before,
.owl-next:hover::before,
.owl-prev:active::before,
.owl-next:active::before,
.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.owl-carousel:hover .owl-prev {
  left: -30px;
}

.owl-carousel:hover .owl-next {
  right: -30px;
}


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

.inner-divider-large {
  height: 130px;
}

@media all and (min-width: 1920px) {
  .inner-divider-large {
    height: 150px;
  }
}

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

.inner-divider {
  height: 50px;
}

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

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


.adslogo {
  height: auto;
  /* Default height */
  width: auto;
  /* Maintain aspect ratio */
}

/* Reduce height by 50% when screen is 995px or smaller */
@media only screen and (max-width: 995px) {
  .adslogo {
    height: 25px;
    /* 50% of original height */
  }
}



.about-us {
  display: flex;
  align-items: flex-start;
  /* Align image and text vertically */
  justify-content: center;
  flex-wrap: wrap;
  /* Allows elements to stack on smaller screens */
  margin: 50px 0;
}

.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  /* Ensures the image doesn't get too large */
  height: auto;
  border-radius: 10px;
  /* Optional: adds rounded corners */
}

.about-text {
  text-align: justify;
  flex: 1;
  padding: 0px;
  font-size: 16px;
  
  line-height: 1.8;
  /* Adjust this value for more or less spacing */
}

/* Responsive Design for Mobile */
@media (max-width: 995px) {
  .about-us {
    flex-direction: column;
    /* Stack image and text vertically */
    text-align: center;
  }

  .about-image {
    order: -1;
    /* Moves the image above the text on smaller screens */
    width: 100%;
  }

  .about-image img {
    max-width: 100%;
    /* Make image responsive */
  }

  .about-text {
    padding: 20px;
    text-align: center;
  }
}


.founder-info {
  margin-top: 20px;
  /* Adds space from the last paragraph */
  text-align: left;
  /* Aligns the content to match the paragraph */
}

.founder-signature {
  width: 150px;
  /* Adjust as needed */
  height: auto;
  display: block;
}

.founder-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.founder-title {
  font-size: 14px;
  color: #666;
  /* Subtle text color */
  margin-top: -5px;
  /* Reduces space between name and title */
}

/* Responsive Fix for Smaller Screens */
@media (max-width: 995px) {
  .founder-info {
    text-align: center;
    /* Centers everything on smaller screens */
  }

  .founder-signature {
    width: 120px;
    /* Slightly smaller on mobile */
    display: block;
    /* Ensures it behaves like a block element */
    margin: 0 auto;
    /* Centers the image */
  }
}


.services-imgs {
  width: 400px;
  /* Default size */
  height: 400px;
  /* Keep it square */
  border-radius: 10px;
  /* Rounded corners */
  display: block;
  margin: 20px auto;
  /* Centers the image */
  object-fit: cover;
  /* Ensures the image maintains aspect ratio */
}

/* Responsive Scaling */
@media (max-width: 1200px) {
  .services-imgs {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 995px) {
  .services-imgs {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 768px) {
  .services-imgs {
    width: 150px;
    height: 150px;
  }
}

.row-item.n-4 {
  display: flex;
  justify-content: center;
  align-items: center;
}








/* 🔹 Demo Reel Section */
.port-demo-reel {
  width: 100%;
  height: 400px; /* Fixed height */
  background-image: url('../img/portf/header.jpg'); /* Replace with actual image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .port-demo-reel {
    width: 100%;
    height: 200px;
    
  }
}

/* 🔹 Hero Container - Full Screen */
.hero-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 🔹 Full-Screen Image */
.port-demo-reel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.port-demo-reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔹 White Overlay (Initially Hidden) */
.port-demo-reel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0); /* Fully transparent initially */
  transition: background 0.35s ease-out;
  z-index: 5; /* Ensures it overlays the image but stays behind text */
}

/* 🔹 Show White Overlay on Hover */
.port-demo-reel:hover::before {
  background: rgba(0, 0, 0, 0.75); 
}


/* 🔹 Play Button Positioned in Center */
.portfolio-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
}

/* 🔹 Play Button Styling */
.portfolio-play-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: var(--icon-size, 80px);
  height: var(--icon-size, 80px);
  font-size: var(--icon-font-size, 30px);
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  border-radius: 50%;
  transition: transform 0.35s ease-out;
}

.portfolio-play-button a i {
  font-size: inherit;
  color: #087fee;
}

/* 🔹 Play Button Hover Effect */
.port-demo-reel:hover .portfolio-play-button a {
  transform: scale(1.4);
}

/* 🔹 Large Hero Text (Centered Vertically, Left-Aligned) */
.hero-overlay-text {
  position: absolute;
  top: 50%;
  left: 10%; /* Align text towards the left */
  line-height: 90px;
  transform: translateY(-50%);
  text-align: left;
  color: white;
  font-size: 85px; /* Large text */
  font-weight: bold;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8); /* Soft text shadow for readability */
  z-index: 10;
}

/* 🔹 Responsive Adjustments */
@media (max-width: 1424px) {
  .hero-overlay-text {
    font-size: 70px;
    /* Align text towards the left */
    line-height: 70px;
    left: 10%;
  }
}

@media (max-width: 1024px) {
  .hero-overlay-text {
    font-size: 50px;
    line-height: 60px;
    top: 10%; /* Moves text to the top */
    left: 50%;
    transform: translate(-50%, 0); /* Centers text horizontally */
    text-align: center; /* Ensures text is centered */
    width: 90%; /* Keeps text within bounds */
  }
}


@media (max-width: 768px) {
  .hero-overlay-text {
    font-size: 50px;
    left: 8%;
    line-height: 60px;
    top: 10%; /* Moves text to the top */
    left: 50%;
    transform: translate(-50%, 0); /* Centers text horizontally */
    text-align: center; /* Ensures text is centered */
    width: 90%; /* Keeps text within bounds */
  }
}

@media (max-width: 480px) {
  .hero-overlay-text {
    font-size: 50px;
    line-height: 60px;
    top: 10%; /* Moves text to the top */
    left: 50%;
    transform: translate(-50%, 0); /* Centers text horizontally */
    text-align: center; /* Ensures text is centered */
    width: 90%; /* Keeps text within bounds */
  }
}




/* 🔹 Fullscreen Modal */
/* 🔹 Ensure Modal is Above Everything */
.modal.ams-styling {
  display: none;
  position: fixed;
  z-index: 9999 !important; /* Super high to override all elements */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}


/* 🔹 Modal Content */
.modal-content {
  position: relative;
  width: 90%;
  max-width: 1920px;
}

/* 🔹 Plyr Video Styling */
.plyr {
  width: 100%;
  height: auto;
}

/* 🔹 Close Button */
.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* 🔹 Mobile Adjustments */
@media (max-width: 768px) {
  .modal-content {
      width: 95%;
  }
}








/* 🔹 Portfolio Image Grid */
.port-demo-gall {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two images per row */
  width: calc(100% - 220px);
  gap: 0;
  margin: 0 auto;
  padding: 0;
}

/* 🔹 Image Wrapper */
.port-demo-gall a {
  position: relative;
  display: block;
  overflow: hidden;
}

/* 🔹 Image Styling */
.port-demo-gall img {
  width: 100%;
  height: 800px;
  object-fit: cover;
  display: block;
  border: none;
  transition: transform 0.4s ease-in-out;
}

/* 🔹 Subtle Zoom-in on Hover */
.port-demo-gall a:hover img {
  transform: scale(1.05);
}

/* 🔹 Overlay Container */
.overlay-ams-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0); /* Initially transparent */
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* 🔹 Show White Overlay with Text on Hover */
.port-demo-gall a:hover .overlay-ams-gallery {
  background: rgba(255, 255, 255, 0.65); /* White overlay at 65% opacity */
  opacity: 1;
  border: 60px solid black; /* Thick solid border */
}

/* 🔹 Overlay Text Styling */
.overlay-ams-gallery h3 {
  font-size: 24px;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase; /* Keep title in uppercase */
  font-weight: bold;
}

.overlay-ams-gallery p {
  font-size: 14px;
  margin: 5px auto 0; /* Centers the text */
  padding: 10px 20px;
  text-transform: none; /* Ensure description remains in normal case */
  width: 75%; /* Set text width to 70% of its container */
  max-width: 75%; /* Ensures it doesn't exceed 70% */
  text-align: center; /* Keeps the text neatly aligned */
}


/* 🔹 Responsive Adjustments */
@media (max-width: 1024px) {
  .port-demo-gall img {
    height: 400px;
  }
  .overlay-ams-gallery h3 {
    font-size: 20px;
  }
  .overlay-ams-gallery p {
    font-size: 12px;
  }
  .port-demo-gall a:hover .overlay-ams-gallery {
    
    border: 30px solid black; /* Thick solid border */
  }
}

@media (max-width: 768px) {
  .port-demo-gall {
    grid-template-columns: 1fr; /* One image per row */
    width: calc(100% - 100px);
  }
  .port-demo-gall img {
    height: 300px;
  }
  .port-demo-gall a:hover .overlay-ams-gallery {
    
    border: 20px solid black; /* Thick solid border */
  }
}

@media (max-width: 480px) {
  .port-demo-gall img {
    height: 250px;
  }
  .overlay-ams-gallery h3 {
    font-size: 18px;
  }
  .port-demo-gall a:hover .overlay-ams-gallery {
    
    border: 10px solid black; /* Thick solid border */
  }
}








.contact-ams-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px; /* Adds padding for better spacing */
}

/* 🔹 Mobile Version */
@media only screen and (max-width: 768px) {
  .contact-ams-form {
    max-width: 100%; /* Ensures it takes full width */
    padding: 15px; /* Adjusts padding for smaller screens */
    gap: 15px; /* Reduces spacing */
  }

  .input-group input,
  .input-group textarea {
    font-size: 14px; /* Slightly smaller font */
    padding: 8px; /* Adjust padding for touch-friendly input */
  }

  .submit-btn button {
    width: 100%; /* Makes the button full width */
    font-size: 14px; /* Adjusts button text size */
    padding: 12px;
  }
}



/* Input Groups */
.input-group {
  position: relative;
  width: 100%;
}

/* Input & Textarea Fields */
.input-group input,
.input-group textarea {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  font-size: 16px;
  outline: none;
  text-align: left; /* Ensures left alignment for all fields */
}

/* Underline Hover Effect (Blue) */
.input-group input:hover,
.input-group textarea:hover {
  border-bottom: 1px solid rgb(0, 0, 0);
}

/* Underline Active Effect (Red) */
.input-group input:focus,
.input-group textarea:focus {
  border-bottom: 1px solid rgb(0, 119, 255); /* Turns red when active */
}

/* Default Label Styling */
.input-group label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

/* Move Label Up & Shrink When Active or When Text is Present */
.input-group input:focus + label,
.input-group textarea:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:not(:placeholder-shown) + label {
  top: 5px;
  font-size: 12px;
  color: rgb(0, 0, 0);
}

/* Fix for older browsers */
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:not(:placeholder-shown) + label {
  display: block;
}

/* Fix for Inputs Losing Focus */
.input-group input:valid + label,
.input-group textarea:valid + label {
  top: 5px;
  font-size: 12px;
  color: rgb(0, 0, 0);
}



/* Fix Message Field Text Alignment */
.input-group textarea {
  text-align: left; /* Ensures text is aligned to the left */
  resize: none; /* Prevents textarea resizing */
  height: 100px; /* Adjust as needed */
}

/* Submit Button */
.submit-btn {
  text-align: center;
  
}

.submit-btn button {
  background-color:rgb(0, 119, 255);
  color: white;
  height: 60px;
  width: 100%;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 5px;
}

.submit-btn button:hover {
  background-color: #000000;
}


/* 🔹 Custom Divider */
.contact-ams-divider {
  position: relative;
  width: 100%;
  height: 60px; /* Default height */
  margin: 0 auto;
  background: none;
}

/* 🔹 Responsive Height for Mobile */
@media only screen and (max-width: 995px) {
  .contact-ams-divider {
    height: 40px; /* Reduced height for smaller screens */
  }
}


/* 🔹 Full-Screen Background */
.contact-section {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Ensures full-screen height */
  background: url('../img/bkgrnd/2.jpg') no-repeat center center/cover; /* Replace with your actual background image */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  
}

/* 🔹 Contact Box (Solid Background & Shadow) */
.contact-box {
  background: white; /* Solid background */
  padding: 40px;
  border-radius: 5px; /* Smooth rounded corners */
  box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.486); /* Soft shadow */
  width: 80%; /* Adjust as needed */
  max-width: 1300px; /* Prevents it from stretching too wide */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 🔹 Ensure the Contact Form & Image Inside Are Styled */
.contact-box .about-image img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* Matches box rounding */
  
}

.contact-box .contact-ams-form {
  width: 50%; /* Takes half the space */
  padding: 20px;
}

@media (max-width: 995px) {
  .contact-box {
      flex-direction: column;
      text-align: center;
      width: 80%;
  }
  
  .contact-box .contact-ams-form {
      width: 100%;
  }
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

.input-error {
  border-bottom: 2px solid red !important;
}