/*
  [CSS Index]
  
  ---
  
  Author:  ex-nihilo
*/


/*
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
    1.2. benefits IMG BACKGROUND
    1.3. parallax IMG BACKGROUND
  2. reset
  3. layout
  4. upper page
  5. center container
  6. section
  7. heading
  8. footer
  9. hero container
  10. to top arrow
  11. intro years
  12. facts counter
  13. skills bar
  14. parallax
  15. link underline
  16. three step method
  17. fullwidth IMG
  18. preloader
  19. layout
  20. preview
  21. works hover
  22. spacer
  23. navigation
  24. intro
  25. overlay
  26. the button
  27. scroll indicator
  28. the line
  29. intro txt
  30. the button LIGHT
  31. Slick CUSTOM
  32. divider
  33. override
  34. vertical lines
  35. button more
*/


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

/*
@media only screen and (max-width: 995px) {
  .bg-img-SINGLE {
    background-image: url(../intro-images/img/background/SINGLE-bg-mobile.jpg);
  }
}
*/


/* 1.2. benefits IMG BACKGROUND */
.img-fullwidth-benefits-carousel-1 {
background-image: url(../intro-images/img/benefits/benefits-carousel-1.jpg);
}


/* 1.3. parallax IMG BACKGROUND */
.parallax-purchase {
background-image: url(../intro-images/img/parallax/parallax-purchase.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;
}

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

body {
/* line-height: 1; */
}

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


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

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

p {
font-size: 14px;
line-height: 2;
letter-spacing: normal;
font-weight: 500;
color: #5f5f5f;
padding-bottom: 30px;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

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

strong {
font-weight: bold;
}

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

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

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


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


/* 5. center container */
.center-container {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

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


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

section {
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

section#three-step-method {
margin: 0 auto 60px auto;
}

section.section-parallax {
margin: 0;
padding: 0;
}


/* 7. heading */
h2.section-heading {
position: relative;
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 75px;
text-align: center;
text-transform: uppercase;
letter-spacing: -0.04em;
color: #000;
margin: 0 auto -3px auto;
width: 100%;
line-height: 100%;
z-index: 1;
}

@media all and (min-width: 1920px) {
  h2.section-heading {
    font-size: 85px;
	margin: -8px auto -3px auto;
  }
}

@media only screen and (max-width: 1200px) {
  h2.section-heading {
    font-size: 65px;
	margin: -8px auto -1px auto;
  }
}

@media only screen and (max-width: 640px) {
  h2.section-heading {
    font-size: 55px;
	margin: -6px auto -1px auto;
  }
}

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

h2.section-heading span {
color: #db0018;
}

h2.section-heading.section-heading-small {
font-size: 55px;
margin: -13px auto -7px auto;
line-height: 1.25;
}

@media only screen and (max-width: 995px) {
  h2.section-heading.section-heading-small {
    font-size: 35px;
    margin: -6px auto -4px auto;
  }
}

h2.section-subheading {
font-family: 'Oswald', sans-serif;
font-size: 13px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
margin: 0 auto;
text-align: center;
letter-spacing: 0.05em;
color: #5f5f5f;
}

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

h2.section-subheading span:before {
content: "";
position: absolute;
display: block;
top: 50%;
right: 0;
width: 20px;
height: 0;
margin-top: 0;
border-top: 1px solid #5f5f5f;
}

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

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


/* 8. footer */
#footer {
padding: 0;
text-align: center;
}

.footer-credits {
margin: 0 auto -27px auto;
}

.footer-credits-logo {
margin: -3px auto -2px auto;
}

.footer-credits-copyright-wrapper {
height: 40px;
}

.footer-credits-copyright {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.05em;
z-index: 100;
}


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

.hero-bg {
position: relative;
width: 100%;
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;
}

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


/* 10. to top arrow */
.to-top-arrow {
position: fixed;
right: 30px;
bottom: -10px;
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
font-size: 16px;
text-align: center;
color: #fff;
background: #db0018;
        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: 768px) {
  .to-top-arrow {
    right: 15px;
  }
}

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

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

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


/* 11. intro years */
.intro-years {
position: relative;
width: auto;
height: auto;
margin: -32px auto 0 auto;
}

.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: #000;
}

.intro-years h2 {
margin: 0 auto;
}

.intro-years h4 {
margin: -3px 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: #000;
width: 100%;
line-height: 100%;
margin: -20px auto;
z-index: 0;
}


/* 12. facts counter */
.facts-counter-number {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 35px;
font-weight: 700;
line-height: 100%;
text-align: center;
color: #fff;
margin: -4px auto;
}


/* 13. skills bar */
.show-skillbar {
position: relative;
margin: 40px 0 0 0;
text-align: left;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .show-skillbar {
	padding: 0 30px 0 20px;
  }
}

.show-skillbar {
padding: 0 200px;
}

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

@media only screen and (max-width: 995px) {
  .show-skillbar {
	margin: 50px 0 0 0;
  }  
}

@media only screen and (max-width: 880px) {
  .show-skillbar {
    padding: 0 30px;
  } 
}

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

.skillbar {
position: relative;
display: inline-block;
width: 100%;
height: 21px;
margin: 0 0 30px 0;
background: none;
}

.skillbar-title {
position: absolute;
width: auto;
height: 21px;
line-height: 21px;
top: -21px;
left: 0;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #5f5f5f;
padding: 0;
letter-spacing: 0.05em;
}

.skillbar-bar {
display: inline-block;
width: 0px;
height: 1px;
background: #ccc;
margin: 0 0 3px 0;
}

.skill-bar-percent {
position: absolute;
height: auto;
line-height: 1;
top: -21px;
right: 0;
color: #5f5f5f;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
}


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

.parallax {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
padding: 100px 30px;
}

@media all and (min-width: 1920px) {
  .parallax {
    padding: 200px 30px;
  }
}

@media only screen and (max-width: 768px) {
  .parallax {
    padding: 100px 15px;
  } 
}

.parallax-purchase {
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: 100px solid #000;
z-index: 1;
}

@media only screen and (max-width: 1200px) {
  .parallax-purchase {
    border: 30px solid #000;
  } 
}

@media only screen and (max-width: 768px) {
  .parallax-purchase {
    border: 15px solid #000;
  }
}


/* 15. link underline */
.link-underline {
position: relative;
display: inline-block;
}

.link-underline::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #5f5f5f;
-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);
}

.link-underline:hover::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);
}


/* 16. three step method */
.three-step-method-heading {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
margin: 3px 0 15px 0;
text-align: left;
color: #000;
}

.three-step-method-number {
position: absolute;
top: 0;
font-family: "Montserrat", sans-serif;
font-size: 140px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.04em;
color: rgba(0, 0, 0, .45);
z-index: -1;
}

@media only screen and (max-width: 880px) {
  .three-step-method-number {
    font-size: 100px;
  }
}

#three-step-method p {
padding-left: 100px;
text-align: left;
}

.three-step-method-block {
top: -8px;
margin-bottom: 0;
}
  
@media all and (min-width: 1920px) {
  .three-step-method-block {
	margin-bottom: -35px;
  }
}

@media only screen and (max-width: 995px) {
  .three-step-method-block {
	margin-bottom: 55px;
  }
}

@media only screen and (max-width: 880px) {
  .three-step-method-block {
	margin-bottom: -5px;
  }
}

@media only screen and (max-width: 995px) {
  .three-step-method-block:last-child {
    margin-bottom: -5px;
  }
}

@media only screen and (max-width: 880px) {
  .three-step-method-block:last-child {
    margin-bottom: -75px;
  }
}


/* 17. fullwidth IMG */
.img-fullwidth-wrapper {
position: relative;
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .img-fullwidth-wrapper {
    min-height: 396px;
  }
}

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

.img-fullwidth {
min-height: 600px;
}

@media (min-width: 992px) {
  .img-fullwidth {
    position: absolute;
	width: 50vw;
    height: auto;
    top: 0;
    bottom: 0;
  }
}

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

.img-fullwidth-all {
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;
}


/* 18. 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: auto;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(0, 0, 0, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

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

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


/* 19. layout */
h2 {
font-family: 'Oswald', sans-serif;
font-size: 13px;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
color: #5f5f5f;
text-align: center;
margin: 0 auto;
padding: 0;
line-height: 1;
}


/* 20. preview */
img {
vertical-align: middle;
max-width: 100%;
}

.preview-img-info {
padding: 19px 0 14px 0;
}

.preview-corner {
position: absolute;
display: block;
width: 40px;
height: 40px;
top: -10px;
right: -10px;
background: #db0018;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.preview-corner-txt {
position: absolute;
top: 12px;
right: 9px;
font-family: 'Oswald', sans-serif;
font-size: 12px;
letter-spacing: 0.05em;
font-weight: 400;
color: #fff;
text-transform: uppercase;
}


/* 21. works hover */
.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 {
/*
position: relative;
display: inline-block;
vertical-align: middle;
text-decoration: none;
width: 180px;
height: 44px;
line-height: 44px;
margin: 0 auto 0 -10px;
top: -23px!important;
background: #fff;
border: 1px solid #fff;
color: #5f5f5f;
-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-border-radius: 3px;
   -moz-border-radius: 3px;
    -ms-border-radius: 3px;
     -o-border-radius: 3px;
        border-radius: 3px;
*/
-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;
}

.icon-works a:hover {
/*
background: #fff;
border: 1px solid #fff;
color: #5f5f5f;
*/
}

.icon-works a:hover:after {
/* background: #fff; */
}

.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!important;
padding: 5px;
margin-top: 30px;
border: 1px solid #ccc;
}

@media only screen and (max-width: 768px) {
  .image-works {
    margin-top: 15px;
  }
}

.image-works>.hover-effect {
position: absolute;
width: -webkit-calc(100% - 10px);
width: -moz-calc(100% - 10px);
width: calc(100% - 10px);
height: -webkit-calc(100% - 10px, 10px, 102px, 10px);
height: -moz-calc(100% - 10px, 10px, 102px, 10px);
height: calc(100% - 10px, 10px, 102px, 10px);
top: 5px;
left: 5px;
bottom: 51px;
right: 5px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
background: #111;
        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;
}

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

.zoom-item {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.04em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
line-height: 40px!important;
}


/* 22. spacer */
.move-up {
margin-top: -30px;
}

@media only screen and (max-width: 768px) {
  .move-up {
    margin-top: -15px;
  }
}

.section-intro {
position: relative;
height: 100%;
margin-left: 15px;
margin-right: 15px;
}

@media only screen and (max-width: 995px) {
  .section-intro {
    margin-left: -67px;
    margin-right: -67px;
  }
}

@media only screen and (max-width: 880px) {
  .section-intro {
    margin-left: -15px;
    margin-right: -15px;
  }
}

.section-demos {
position: relative;
height: auto;
margin-left: 15px;
margin-right: 15px;
}

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

.section-three-step {
position: relative;
height: 100%;
margin-left: 15px;
margin-right: 15px;
}

@media only screen and (max-width: 995px) {
  .section-three-step {
    margin-left: -62px;
    margin-right: -62px;
  }
}

@media only screen and (max-width: 880px) {
  .section-three-step {
    margin-left: -15px;
    margin-right: -15px;
  } 
}


/* 23. navigation */
.logo .logo-light,
.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;
}

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

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

.logo {
padding-top: 19px;
padding-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;
}

@media only screen and (max-width: 1200px) {
  .logo {
	padding-left: 10px;
	margin-left: 0;
  }
}

@media only screen and (max-width: 1080px) {
  .logo {
	padding-left: 0;
	margin-left: -15px;
  }
}

@media only screen and (max-width: 995px) {
  .logo {
	margin-left: -33px;
  }
}

@media only screen and (max-width: 880px) {
  .logo {
    padding-top: 15px;
    padding-left: 8px;
	margin-left: auto;
  }
}

.main-navigation .navbar-nav li a {
position: relative;
font-family: 'Oswald', sans-serif;
font-style: normal;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
padding: 45px 15px 35px 15px;
right: -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;
z-index: 1;
}

@media only screen and (max-width: 1200px) {
  .main-navigation .navbar-nav li a {
	right: 8px;
  }
}

@media only screen and (max-width: 1080px) {
  .main-navigation .navbar-nav li a {
	right: -30px;
  }
}

@media only screen and (max-width: 995px) {
  .main-navigation .navbar-nav li a {
    right: -48px;
  }
}

@media only screen and (max-width: 880px) {
  .main-navigation .navbar-nav li a {
    right: auto;
  }
}

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

.main-navigation .navbar-nav li a:hover {
color: #fff;
-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 .navbar-nav li a:hover {
    color: #000;
  }
}

.nav li a:focus,
.nav li a:hover {
color: #fff;
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 {
background: rgba(255, 255, 255, 1);
-webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
     -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .35);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .35);
        box-shadow: 0 0 5px rgba(0, 0, 0, .35);
}

.main-navigation-bg .logo {
padding-top: 6px;
-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 .main-navigation .navbar-nav li a {
color: #000;
padding: 19px 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: #000;
}

@media only screen and (max-width: 768px) {
  .navbar-toggle .icon-bar {
    background: #fff;
	margin-right: -14px;
  }
  
  .main-navigation-bg .navbar-toggle .icon-bar {
    background: #000;
	margin-right: -14px;
  }
  
  .navbar-toggle {
    margin-top: -35px;
    margin-right: 4px;
    -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: -44px;
    margin-right: 4px;
    -webkit-transition: all .4s ease-out;
       -moz-transition: all .4s ease-out;
        -ms-transition: all .4s ease-out;
         -o-transition: all .4s ease-out;
            transition: all .4s ease-out;
  }
  
  .navbar-collapse {
    background: rgba(255, 255, 255, 1);
	margin-top: 23px;
  }
  
  .main-navigation-bg .navbar-collapse {
	margin-top: 3px;
  }
}

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

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


/* 24. intro */
h1.home-page-title {
position: relative;
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 115px;
text-align: center;
text-transform: uppercase;
letter-spacing: -0.02em;
color: #fff;
margin: -14px auto -5px auto;
width: 100%;
line-height: 100%;
z-index: 1;
}

@media only screen and (max-width: 880px) {
  h1.home-page-title {
    font-size: 85px;
    margin: -10px auto -4px auto;
  }
}

@media only screen and (max-width: 640px) {
  h1.home-page-title {
    font-size: 65px;
	margin: -9px auto -2px auto;
  }
}

h2.home-page-title {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 15px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #fff;
margin: -2px 0 0 11px;
}

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

@media only screen and (max-width: 768px) {
  h2.home-page-title {
	display: block;
	visibility: visible;
  } 
}


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

.overlay-top-bottom-dark-15:before,
.overlay-dark-70:before {
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.overlay-top-bottom-dark-15:before {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
}

.overlay-dark-70:before {
background: rgba(0, 0, 0, .7);
}


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

.the-button-wrapper {
margin: -7px auto 0 auto;
}

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

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

.the-button,
.the-button-purchase {
position: relative;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.10em;
color: #db0018;
background: none;
padding: 9px 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;
}

@media all and (min-width: 1920px) {
  .the-button,
  .the-button-purchase {
    font-size: 11px;
    letter-spacing: 0.25em;
	padding: 11px 40px 0 40px;
  }
}

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

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

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

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

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

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

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

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

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


/* 27. scroll indicator */
.scroll-indicator-wrapper {
position: absolute;
width: 1px!important;
height: 100%;
left: 0; left: -1px;
right: 0;
margin-left: auto;
margin-right: auto;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
-webkit-transition: all .7s;
   -moz-transition: all .7s;
    -ms-transition: all .7s;
     -o-transition: all .7s;
        transition: all .7s;
}

.scroll-indicator {
position: absolute;
bottom: 90px;
left: 50%;
-webkit-transform: translate(-50%, 50%);
   -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
z-index: 1005;
}

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

@media only screen and (max-width: 768px) {
  .scroll-indicator {
	display: block;
	visibility: visible;
	bottom: 60px;
  } 
}

.scroll-line {
display: block;
width: 1px;
height: 50px;
background: none;
}

@media only screen and (max-width: 768px) {
  .scroll-line {
    height: 30px;
  }
}

.scroll-line::before {
content: "";
display: block;
width: 1px;
height: 50%;
top: 0;
background-color: #fff;
-webkit-animation: scroll-down 2s ease-in-out infinite;
    -ms-animation: scroll-down 2s ease-in-out infinite;
	    animation: scroll-down 2s ease-in-out infinite;
}

@-webkit-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@-ms-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}


/* 28. the line */
.the-line {
position: relative;
width: 1px;
height: 80px;
background: #5f5f5f;
margin: 1px auto;
}

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

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


/* 29. intro txt */
.intro-txt {
position: relative;
margin: -3px auto -3px auto;
}


/* 30. the button LIGHT */
.the-button-light {
position: relative;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.10em;
color: #fff;
background: none;
padding: 9px 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;
}

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

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

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

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

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

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

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

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

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

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


/* 31. Slick CUSTOM */
.slick-track,
.slick-list {
-webkit-perspective: 2000;
        perspective: 2000;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.slick-slide {
text-align: center;
color: #000;
height: 550px;
background: #fff;
}

@media only screen and (max-width: 880px) {
  .slick-slide {
    height: 450px;
  }
}

@media only screen and (max-width: 640px) {
  .slick-slide {
    height: 350px;
  }
}

.slick-slide-must-haves {
text-align: center;
color: #000;
height: 396px;
background: #fff;
}

@media only screen and (max-width: 995px) {
  .slick-slide-must-haves {
    height: 336px;
  }
}

@media only screen and (max-width: 640px) {
  .slick-slide-must-haves {
	height: 356px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .slick-slide-must-haves {
    height: 396px;
  }
}

@media only screen and (max-width: 480px) {
  .slick-slide-must-haves {
	height: 266px;
  }
}

.slick-slider {
margin-bottom: 0;
margin-top: 0;
cursor: default;
overflow: hidden;
}

.slick-auto {
width: 100%;
height: auto;
}

.slick-auto p {
padding: 20px;
}

.bg-color-1 {
background: #fafafa;
}

.slick-prev,
.slick-next {
position: absolute;
display: block;
top: 50%;
width: 50px;
height: 50px;
line-height: 50px;
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)";
z-index: 1;
visibility: visible;
}

.slick-prev {
left: -35px;
}

.slick-next {
right: -35px;
}

.slick-must-haves .slick-prev,
.slick-must-haves-2 .slick-prev {
left: -35px;
}

.slick-must-haves .slick-next,
.slick-must-haves-2 .slick-next {
right: -35px;
}

.slick-prev:before,
.slick-next:before {
font-size: 12px;
color: #fff;
padding: 0;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
background: #db0018;
-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: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.slick-prev:before {
left: 75px;
top: 9px;
}

.slick-next:before {
right: 75px;
top: 9px;
}

.slick-must-haves .slick-prev:before,
.slick-must-haves-2 .slick-prev:before {
left: 55px;
}

.slick-must-haves .slick-next:before,
.slick-must-haves-2 .slick-next:before {
right: 55px;
}

.slick-prev:hover,
.slick-next:hover {
-webkit-transition: 0 none;
   -moz-transition: 0 none;
	-ms-transition: 0 none;
     -o-transition: 0 none;
        transition: 0 none;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

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

.slick-benefits:hover .slick-prev {
left: -55px;
}

.slick-benefits:hover .slick-next {
right: -55px;
}

.slick-must-haves:hover .slick-prev,
.slick-must-haves-2:hover .slick-prev {
left: -55px;
}

@media only screen and (max-width: 1200px) {
  .slick-must-haves:hover .slick-prev,
  .slick-must-haves-2:hover .slick-prev {
    left: -46px;
  }
}

@media only screen and (max-width: 1080px) {
  .slick-must-haves:hover .slick-prev,
  .slick-must-haves-2:hover .slick-prev {
    left: -50px;
  }
}

@media only screen and (max-width: 880px) {
  .slick-must-haves:hover .slick-prev,
  .slick-must-haves-2:hover .slick-prev {
    left: -55px;
  }
}

.slick-must-haves:hover .slick-next,
.slick-must-haves-2:hover .slick-next {
right: -55px;
}

@media only screen and (max-width: 1200px) {
  .slick-must-haves:hover .slick-next,
  .slick-must-haves-2:hover .slick-next {
    right: -46px;
  }
}

@media only screen and (max-width: 1080px) {
  .slick-must-haves:hover .slick-next,
  .slick-must-haves-2:hover .slick-next {
    right: -50px;
  }
}

@media only screen and (max-width: 880px) {
  .slick-must-haves:hover .slick-next,
  .slick-must-haves-2:hover .slick-next {
    right: -55px;
  }
}


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

.inner-divider {
height: 100px;
}

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

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

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

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

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

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

h2.hide-me {
display: none;
visibility: hidden;
}

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

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


/* 33. override */
body {
background: #151515;
}

.preloader-bg,
#preloader {
background: #000;
}

.loader {
border: 3px solid rgba(255, 255, 255, .15);
}

.loader span {
border-top: 3px solid rgba(255, 255, 255, .75);
}

.main-navigation-bg,
.bg-color-1,
.slick-auto {
background: #111;
}

.slick-slide {
background: none;
}

.slick-slide-must-haves {
background: none;
}

.image-works {
background: #111;
border: 1px solid #2d2d2d;
}

.inner-divider-works {
position: relative;
width: 100%;
margin: 0 auto;
background: none;
height: 30px;
z-index: -1;
}

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

h2.section-heading,
.intro-years h3,
h2,
.three-step-method-heading,
.three-step-method-number,
h2.section-heading.light,
h2.section-subheading.light {
color: #e0e0e0;
}

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

.main-navigation-bg .main-navigation .navbar-nav li a,
.main-navigation-bg .main-navigation .navbar-nav li a:hover,
.intro-years h2,
.intro-years h4 {
color: #5f5f5f;
}

.image-works,
.image-works img,
.image-works>.hover-effect {
-webkit-border-radius: 25px;
   -moz-border-radius: 25px;
    -ms-border-radius: 25px;
     -o-border-radius: 25px;
        border-radius: 25px;
}

.to-top-arrow,
.slick-prev:before,
.slick-next:before {
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav li a,
  .main-navigation .navbar-nav li a:hover {
    color: #5f5f5f;
  }
}

@media only screen and (max-width: 768px) { 
  .main-navigation-bg .navbar-toggle .icon-bar {
    background: #fff;
  }
  
  .navbar-collapse {
    background: #111;
  }
}


/* 34. vertical lines */
.vertical-lines-wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
margin: 0;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 2;
}

.vertical-lines {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.vertical-effect {
position: relative;
width: 25%;
height: 100%;
float: left;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
border-right: 1px solid rgba(119, 119, 119, .2);
}

.vertical-effect::before {
content: "";
position: absolute;
display: block;
width: 3px;
-webkit-animation-direction: normal;
   -moz-animation-direction: normal;
    -ms-animation-direction: normal;
     -o-animation-direction: normal;
        animation-direction: normal;
}

.vertical-effect:first-child::before,
.vertical-effect:last-child::before {
content: "";
position: absolute;
right: -2px;
}

.vertical-effect:first-child::before {
top: 0;
-webkit-animation: raindrop 6s ease-out infinite;
   -moz-animation: raindrop 6s ease-out infinite;
    -ms-animation: raindrop 6s ease-out infinite;
     -o-animation: raindrop 6s ease-out infinite;
        animation: raindrop 6s ease-out infinite;
background: -webkit-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
background: -ms-linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
background: linear-gradient(top, rgba(225, 225, 225, 0), rgba(225, 225, 225, 1));
}

.vertical-effect:last-child::before {
bottom: 0;
-webkit-animation: raindrop-reverse 6s ease-out infinite;
   -moz-animation: raindrop-reverse 6s ease-out infinite;
    -ms-animation: raindrop-reverse 6s ease-out infinite;
     -o-animation: raindrop-reverse 6s ease-out infinite;
        animation: raindrop-reverse 6s ease-out infinite;
background: -webkit-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
background: -ms-linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
background: linear-gradient(top, rgba(225, 225, 225, 1), rgba(225, 225, 225, 0));
}

@-webkit-keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}
@-ms-keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}
@keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}

@-webkit-keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    height: 35%;
  }
}
@-ms-keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    height: 35%;
  }
}
@keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
   }
  100% {
    bottom: 100%;
    height: 35%;
  }
}


/* 35. button more */
.more-wraper-center {
position: relative;
width: 120px!important;
max-width: 120px;
height: 120px;
left: 0;
right: 0; 
margin: 0 auto;
text-align: center;
z-index: 1;
}

.more-wraper-center.more-wraper-center-demos {
top: -23px!important;
}

.more-button-bg-center {
background: none;
border: 2px dashed #e0e0e0;
}

.more-button-circle {
display: block;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
background-clip: content-box;
padding: 2.5px;
cursor: pointer;
}

.more-wraper-center:hover .more-button-circle {
-webkit-animation: spin 5s linear infinite;
   -moz-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
     -o-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite;
}

.more-button-txt-center {
position: absolute;
top: 60px;
left: 60px;
width: 120px!important;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
font-family: 'Oswald', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: normal;
color: #e0e0e0;
margin: 0 auto;
cursor: pointer;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}