/*
  [CSS Index]12
  
  ---
  
  Template Name: Quantex - Creative Coming Soon Template
  Author:  ex-nihilo
  Version: 1.0
*/


/*
  1. TEMPLATE BACKGROUNDS
    1.1. title IMG BACKGROUND
    1.2. subscribe IMG BACKGROUND
    1.3. slick fullscreen - ken burns slideshow ZOOM/FADE IMG BACKGROUND
    1.4. swiper parallax IMG BACKGROUND
  2. reset
  3. layout
  4. upper page
  5. center container
  6. hero container
    6.1. hero bg
    6.2. hero fullscreen FIX
  7. preloader
  8. video play button
  9. page title
  10. videos
    10.1. Vimeo video
    10.2. YouTube video
    10.3. HTML5 video
  11. ken burns slideshow
  12. Slick v1.6.0 CUSTOM
    12.1. slick slide
    12.2. slick slide flickering FIX
    12.3. slick fullscreen slider
    12.5. slick fullscreen slideshow ZOOM/FADE transition
  13. swiper parallax
  14. section panels
    14.1. overlay
    14.2. panel
  15. elements
  16. newsletter form
  17. the button
  18. lower page
  19. countdown //DISABLE
  20. divider
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. title IMG BACKGROUND */
.page-title.page-title-home {
background-image: url(../img/page-title/page-title-home.webp);
}


/* 1.2. subscribe IMG BACKGROUND */
.page-title.page-title-subscribe {
background-image: url(../img/page-title/page-title-newsletter.webp);
}


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

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

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

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


/* 1.4. swiper parallax IMG BACKGROUND */
.swiper-slide-parallax-bg {	
background-image: url(../img/background/parallax-bg.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%;
}

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

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: 16px;
font-style: normal;
font-weight: 500;
text-align: left;
color: #2e2e2e;
background: #000;
 -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;
line-height: 1.5;
}

a {
color: #ff264a;
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;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

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

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

@media only screen and (max-width: 880px) {
  p {
	font-size: 15px;
  }
}

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

strong {
font-weight: bold;
}

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

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

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

.section-light {
background: #fff;
}

.section-dark {
background: #000;
}


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


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

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

.center-container {
position: relative;
}

@media only screen and (max-width: 995px) {
  .center-container {
    position: absolute;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 1;
  }
}

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


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


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


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


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

.preloader-bg.preloader-bg-light {
background: #fff;
}

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

#preloader.preloader-light {
background: #fff;
}

#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(255, 255, 255, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader.loader-dark {
border: 3px solid rgba(0, 0, 0, .15);
}

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

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

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


/* 8. video play button */
.video-play-btn-wrapper {
width: 100%;
height: auto;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
margin: 40px auto 0 auto;
}

.icon-play {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 22px solid #ff264a;
border-bottom: 15px solid transparent;
margin-left: 8px;
-webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
}

.video-play-btn {
width: 80px;
height: 80px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #ff264a;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
position: relative;
-webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
cursor: pointer;
}

.video-play-btn:hover {
border-color: #fff;
}

.video-play-btn.video-play-btn-dark:hover {
border-color: #2e2e2e;
}

.video-play-btn:hover:before,
.video-play-btn:hover:after {
border-color: #fff;
background-color: #fff;
-webkit-animation-duration: 2s;
        animation-duration: 2s;
}

.video-play-btn.video-play-btn-dark:hover:before,
.video-play-btn.video-play-btn-dark:hover:after {
border-color: #2e2e2e;
background-color: #2e2e2e;
}

.video-play-btn:hover .icon-play {
border-left-color: #fff;
}

.video-play-btn.video-play-btn-dark:hover .icon-play {
border-left-color: #2e2e2e;
}

.video-play-btn:before {
content: "";
position: absolute;
width: 60px;
height: 60px;
left: 50%;
top: 50%;
border: 1px solid #ff264a;
-webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-animation: 3s pulse infinite;
        animation: 3s pulse infinite;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.video-play-btn:after {
content: "";
position: absolute;
width: 60px;
height: 60px;
left: 50%;
top: 50%;
border: 1px solid #ff264a;
-webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-animation: 3s pulse infinite;
        animation: 3s pulse infinite;
-webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

@-webkit-keyframes pulse {
  0% {
    width: 80px;
    height: 80px;
    opacity: .6;
    background: rgba(255, 38, 74, .2);
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    width: 80px;
    height: 80px;
    opacity: .6;
    background: rgba(255, 38, 74, .2);
  }
  100% {
    width: 160px;
    height: 160px;
    opacity: 0;
  }
}


/* 9. page title */
.page-title {
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;
}

.page-title-content {
position: relative;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 160px;
text-align: center;
text-transform: uppercase;
line-height: 1;
letter-spacing: -0.08em;
color: #2e2e2e;
background: #fff;
mix-blend-mode: lighten;
overflow: hidden;
margin: -20px auto -6px auto;
}

.page-title-content.page-title-content-dark {
color: #fff;
background: #000;
mix-blend-mode: darken;
}

@media all and (min-width: 1920px) {
  .page-title-content {
    font-size: 190px;
	margin: -26px auto -6px auto;
  }
}

@media only screen and (max-width: 1200px) {
  .page-title-content {
    font-size: 100px;
	margin: -12px auto -3px auto;
  }
}

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

@media only screen and (max-width: 880px) {
  .page-title-content {
    font-size: 85px;
	margin: -9px auto -2px auto;
  }
}

@media only screen and (max-width: 640px) {
  .page-title-content {
    font-size: 65px;
	margin: -7px auto 0 auto;
  }
}

.page-title-content.page-title-newsletter {
font-size: 130px;
margin: -16px auto -3px auto;
}

@media all and (min-width: 1920px) {
  .page-title-content.page-title-newsletter {
    font-size: 145px;
	margin: -19px auto -5px auto;
  }
}

@media only screen and (max-width: 1200px) {
  .page-title-content.page-title-newsletter {
    font-size: 85px;
	margin: 25px auto 0 auto;
  }
}

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

@media only screen and (max-width: 880px) {
  .page-title-content.page-title-newsletter {
    font-size: 65px;
	margin: 0 auto;
  }
}


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


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


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

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

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

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

.slick-fullscreen-slideshow-zoom-fade .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-slideshow-zoom-fade .slick-dots li button {
display: none;
}

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

.slick-fullscreen-slideshow-zoom-fade .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-slideshow-zoom-fade {
background: none;
}

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

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


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

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


/* 13. swiper parallax */
.parallax .swiper-button-next,
.parallax .swiper-button-prev {
display: block;
visibility: visible;
width: 20px;
height: 20px;
background-size: 20px 20px;
display: none;
visibility: hidden;
}

.parallax a,
.parallax a:hover {
color: #fff;
}

.parallax .swiper-container {
width: 100%;
height: 100%;
background: #000;
left: 0;
top: 0;
}

.parallax .swiper-slide {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
	
.parallax .parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
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;
}


/* 14. section panels */
/* 14.1. overlay */
#overlay {
position: fixed;
cursor: crosshair;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, .75);
display: none;
z-index: 20;
}


/* 14.2. panel */
#panel-newsletter {
position: fixed;
background: #fff;
bottom: 0;
width: 100%;
height: 325px;
display: none;
z-index: 99999;
}

@media all and (min-width: 1920px) {
  #panel-newsletter {
    height: 335px;
  }
}

@media only screen and (max-width: 995px) {
  #panel-newsletter {
    height: 50%
  }
}

@media only screen and (max-width: 640px) {
  #panel-newsletter {
    height: 100%;
  }
}

.panel-all {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}

.panel-all-inner {
position: absolute;
width: -webkit-calc(100% - 140px);
width: -moz-calc(100% - 140px);
width: calc(100% - 140px);
height: -webkit-calc(100% - 140px);
height: -moz-calc(100% - 140px);
height: calc(100% - 140px);
top: 70px;
right: 70px;
bottom: 70px;
left: 70px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
background: #fff;
overflow-x: hidden;
overflow-y: hidden;
}

.panel-all-inner.panel-all-inner-dark {
background: #000;
}

@media all and (min-width: 1920px) {
  .panel-all-inner {
    overflow-y: hidden;
  }
}

@media only screen and (max-width: 995px) {
  .panel-all-inner {
    overflow-y: auto;
  }
}

.panel-all-subtitle {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
font-style: normal;
text-transform: uppercase;
text-align: center;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
color: #999;
background: none;
margin: -3px auto 0 auto;
}


/* 15. elements */
.top-element,
.left-element,
.right-element,
.right-element-newsletter,
.bottom-element {
position: fixed;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
font-style: normal;
text-transform: uppercase;
text-align: center;
color: #999;
background: none;
border: none;
width: auto;
height: 48px;
line-height: 48px;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
z-index: 2;
}

@media only screen and (max-width: 640px) {
  .left-element,
  .right-element {
    font-size: 13px;
  }
}

.right-element-newsletter {
position: absolute;
color: #000;
}

.right-element-newsletter.right-element-newsletter-light {
color: #fff;
}

.top-element a,
.left-element a,
.right-element a,
.bottom-element a,
.top-element a:hover,
.left-element a:hover,
.right-element a:hover,
.bottom-element a:hover {
outline: none;
text-decoration: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.top-element,
.left-element,
.right-element,
.bottom-element {
-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;
}

.top-element {
margin-left: -73px;
left: 50%;
top: 16px;
}

@media all and (min-width: 1920px) {
  .top-element {
    margin-left: -73px;
	top: 16px;
  }
}

@media only screen and (max-width: 640px) {
  .top-element {
	top: 1px;
  }
}

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

.left-element {
margin-top: -14px;
left: -125px;
top: 50%;
-webkit-transform: rotate(-90deg);	
   -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
}

@media all and (min-width: 1920px) {
  .left-element {
    left: -125px;
  }
}

@media only screen and (max-width: 640px) {
  .left-element {
    left: -125px;
  }
}

.left-element.left-position {
-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);
}

.left-element li a:hover,
.left-element li a:visited,
.left-element li a:active,
.left-element li a:focus {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
font-style: normal;
text-transform: uppercase;
text-align: center;
}

@media only screen and (max-width: 640px) {
  .left-element li a:hover,
  .left-element li a:visited,
  .left-element li a:active,
  .left-element li a:focus {
    font-size: 13px;
  }
}

.left-element li {
display: inline;
padding-left: 10px;
}

.left-element li span {
color: #999;
padding-left: 10px;
}

.right-element {
margin-top: -36px;
right: -40px;
top: 50%;
-webkit-transform: rotate(90deg);	
   -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
        transform: rotate(90deg);
cursor: pointer;
}

@media all and (min-width: 1920px) {
  .right-element {
    right: -40px;
  }
}

@media only screen and (max-width: 640px) {
  .right-element {
    right: -47px;
  }
}

.right-element.right-position {
-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);
}

.right-element span {
color: #ff264a;
padding-right: 10px;
font-size: 20px;
position: relative;
top: 2px;
}

.right-element-newsletter {
margin-top: -36px;
right: 20px;
top: 50%;
-webkit-transform: rotate(90deg);	
   -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
        transform: rotate(90deg);
cursor: pointer;
}

@media all and (min-width: 1920px) {
  .right-element-newsletter {
    right: 20px;
  }
}

@media only screen and (max-width: 640px) {
  .right-element-newsletter {
    font-size: 13px;
	right: 9px;
  }
}

.right-element-newsletter.right-position {
-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);
}

.bottom-element {
margin-left: -110px;
left: 50%;
bottom: 20px;
}

@media all and (min-width: 1920px) {
  .bottom-element {
    margin-left: -110px;
	bottom: 20px;
  }
}

@media only screen and (max-width: 995px) {
  .bottom-element {
    margin-left: -85px;
	bottom: 18px;
  }
}

@media only screen and (max-width: 640px) {
  .bottom-element {
	bottom: 3px;
  }
}

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


/* 16. newsletter form */
#subscribe-wrapper {
position: relative;
width: auto;
height: 125px;
margin: -9px auto 0 auto;
background: none;
text-align: center;
z-index: 1;
}

@media all and (min-width: 1920px) {
  #subscribe-wrapper {
    height: 126px;
	margin: 9px auto 0 auto;
  }
}

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

#subscribe input {
position: relative;
width: 177px;
height: 47px;
border-bottom: 1px solid #2e2e2e;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 10px 0 7px 0;
bottom: 25px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: 500;
text-align: center;
color: #2e2e2e;
-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.subscribe-light input {
border-bottom: 1px solid #fff;
color: #fff;
}

@media all and (min-width: 1920px) {
  #subscribe input {
    width: 217px;
  }
}

#subscribe input:focus,
#subscribe textarea:focus {
color: #2e2e2e;
-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.subscribe-light input:focus,
#subscribe.subscribe-light textarea:focus {
color: #fff;
}

#subscribe input:hover {
border-color: rgba(255, 38, 74, .5);
-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: 'Open Sans', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: #999;
margin: 0 auto;
padding: 50px 0 0 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: #2e2e2e;
display: block;
margin: 9px auto 0 auto;
padding: 0;
letter-spacing: 0.15em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 600;
}

#subscribe.subscribe-light .subscribe-error {
color: #fff;
}

input[type="text"].subscribe-email::-webkit-input-placeholder {
font-size: 14px;
font-weight: 500;
color: #2e2e2e;
}

input[type="text"].subscribe-email:-ms-input-placeholder{
font-size: 14px;
font-weight: 500;
color: #2e2e2e;
}

input[type="text"].subscribe-email::-moz-placeholder {
font-size: 14px;
font-weight: 500;
color: #2e2e2e;
}

input[type="text"].subscribe-email.subscribe-email-light::-webkit-input-placeholder {
color: #fff;
}

input[type="text"].subscribe-email.subscribe-email-light:-ms-input-placeholder{
color: #fff;
}

input[type="text"].subscribe-email.subscribe-email-light::-moz-placeholder {
color: #fff;
}

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; }
		  
input:focus.subscribe-email.subscribe-email-light::-webkit-input-placeholder { color: transparent; }
     input:focus.subscribe-email.subscribe-email-light:-ms-input-placeholder { color: transparent; }
         input:focus.subscribe-email.subscribe-email-light::-moz-placeholder { color: transparent; }
          input:focus.subscribe-email.subscribe-email-light:-moz-placeholder { color: transparent; }
		  
		  
/* 17. 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 {
position: relative;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.10em;
color: #2e2e2e;
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:hover:before {
width: 100%;
}

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

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

@media all and (min-width: 1920px) {
  .the-button-submit {
    width: 205px;
	border: none;
  }
}

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


/* 18. lower page */
.lower-page {
min-height: 100%;
margin: 0;
padding: 0;
}

.lower-content p {
font-weight: 400;
letter-spacing: 0.05em;
padding: 10px;
}

.sections {
position: relative;
z-index: 5;
}

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

.inner-divider-post {
height: 40px;
}

@media only screen and (max-width: 995px) {
  .inner-divider-post-mobile {
    display: block;
	visibility: visible;
    height: 40px;
  }
}