@import url("css/content.css");
@import url("css/showcase.css");
@import url("css/portfolio.css");
@import url("css/shortcodes.css");
@import url("css/assets.css");



  html,body{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size:16px;
    height:100%;
    width:100%;
    color:#444;
    background-color:#fff;
    
  }
  
  html {
    box-sizing: border-box;
    margin-right: 0px!important;
    overflow: visible!important;
  }
  
  body {
    overflow: hidden;
    overflow-y:scroll;
    -webkit-transition: opacity 0.2s ease-in-out 0.2s;
    transition: opacity 0.2s ease-in-out 0.2s;
  }
  
  body.smooth-scroll {
    overflow:hidden;
  }
  
  body.hidden {
    opacity:0;
  }
  
  main {
    -webkit-transition: background 0.5s ease-in-out 0s;
    transition: background 0.5s ease-in-out 0s;
  }
  
  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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }
  
  article,
  aside,
  details,
  figcaption,
  footer,
  header,
  hgroup,
  nav,
  section {
    display: block;
  }
  
  audio {
    display: inline-block;
    max-width: 100%;
  } 
  
  address {
    font-style: italic;
    margin-bottom: 24px;
  }
  
  abbr[title] {
    border-bottom: 1px dotted #2b2b2b;
    cursor: help;
  }
  
  b,
  strong {
    font-weight: 600;
    color:#000;
  }
  
  .light-content b, .light-content strong, .dark-section b, .dark-section strong {
    font-weight: 600;
    color:#fff;
  }
  
  .light-content .light-section b, .light-content .light-section strong {
    font-weight: 600;
    color:#000;
  }
  
  cite,
  dfn,
  em,
  i {
    font-style: italic;
  }
  
  mark, ins {
    background: none repeat scroll 0 0 #000;
    text-decoration: none;
    color: #fff;
    padding: 2px 8px;
    display: inline-block;
    border-radius: 2px;
  }
  
  .light-content mark, .light-content ins, .dark-section mark, .dark-section ins {
    background: none repeat scroll 0 0 #fff;
    color:#000;
  }
  
  .light-content .light-section mark, .light-content .light-section ins {
    background: none repeat scroll 0 0 #111;
    color:#fff;
  }
  
  code,
  kbd,
  tt,
  var,
  samp,
  pre {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
    line-height: 1.6;
  }
  
  pre {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    margin-bottom: 24px;
    max-width: 100%;
    overflow: auto;
    padding: 12px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color:rgba(0,0,0,0.05)
  }
  
  .light-content pre, .dark-section pre {
    background-color:rgba(255,255,255,0.05);
    color:#fff;
  }
  
  .light-content .light-section pre {
    background-color:rgba(0,0,0,0.05);
    color:#000;
  }
  
  blockquote,
  q {
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
    quotes: none;
  }
  
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  
  blockquote {
    color: #000;
    line-height: 1.6;
    font-size: 1.5rem;
    margin-bottom: 2.1875rem;
    font-weight: 500;
    padding-left: 3.5rem;
    margin: 0 0 1.5625rem;
    position:relative;
  }
  
  .light-content blockquote, .dark-section blockquote {
    color: #fff;
  }
  
  .light-content .light-section blockquote {
    color: #000;
  }
  
  blockquote::before {
    content: "\275D";
    position: absolute;
    left: 0;
    top: 5px;
    line-height: 1;
    font-size: 3rem;
    font-weight: 500;
  }
  
  blockquote cite,
  blockquote small {
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }
  
  .light-content blockquote cite, .light-content blockquote small {
    color:#fff;
  }
  
  blockquote em,
  blockquote i,
  blockquote cite {
    font-style: normal;
  }
  
  blockquote strong,
  blockquote b {
    font-weight: 600;
  }
  
  small {
    font-size: smaller;
  }
  
  big {
    font-size: 125%;
  }
  
  sup,
  sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sup {
    bottom: 1ex;
  }
  
  sub {
    top: .5ex;
  }
  
  dl {
    margin-bottom: 24px;
  }
  
  dt {
    font-weight: bold;
  }
  
  dd {
    margin-bottom: 24px;
  }
  
  ul,
  ol {
    list-style: none;
    margin: 0 0 24px 20px;
  }
  
  ul,
  ol {
    list-style: none;
    margin:20px 0 25px 20px;
  }
  
  ul {
    list-style: disc;
  }
  
  ol {
    list-style: decimal;
  }
  
  li > ul,
  li > ol {
    margin: 20px 0px 15px 25px;
  }
  
  li {
    line-height: 20px;
    color:#444;
    margin-bottom:25px;
  }
  
  .light-content li, .dark-section li {
    color: #ccc;
  }
  
  .light-content .light-section li {
    color: #444;
  }
  
  figure {
    margin:0;
    position:relative;
    display: block;
  }
  
  figure.has-parallax {   
    overflow:hidden;
  }
  
  .full figure.has-parallax {   
    overflow:hidden;
    height:100vh;
  }
  
  figure img {
    max-width:100%;
  }
  
  .has-parallax-content > img {
    width:100%;
    height: 100%;
    position:absolute;
    display:block;
    object-position: center; 
    object-fit: cover;
  }
  
  figcaption {
    background-color: rgba(0,0,0,0.3);
    bottom: 0px;
    color: #fff;
    font-weight:400;
    font-size: 10px;
    padding: 5px 10px;
    position: absolute;
    right: 0px;
    z-index: 10;
    border-radius:0;
  }
  
  fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 24px;
    padding: 0;
  }
  
  legend {
    white-space: normal;
  }
  
  button, input {
    line-height: normal;
  }
  
  input,
  textarea {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
  }
  
  button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
  }
  
  button[disabled],
  input[disabled] {
    cursor: default;
  }
  
  input[type="checkbox"],
  input[type="radio"] {
    padding: 0;
  }
  
  input[type="search"] {
    -webkit-appearance: textfield;
  }
  
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  
  textarea {
    overflow: auto;
    vertical-align: top;
  }
  
  table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin-bottom: 24px;  
    width: 100%;
    color:#444;
  }
  
  thead, .light-content .light-section thead {
    background-color:rgba(0,0,0,1);
    color:#fff;
  }
  
  .light-content thead, .dark-section thead {
    background-color:rgba(255,255,255,1);
  }
  
  thead tr, .light-content .light-section thead tr {
    color:#fff;
  }
  
  .light-content thead tr, .dark-section thead tr {
    color:#000;
  }
  
  tr, .light-content .light-section tr {
    color:#444;
  }
  
  .light-content tr, .dark-section tr{
      color:#CCC;
  }
  
  tr:nth-child(2n), .light-content .light-section tr:nth-child(2n) {
      background-color:rgba(0,0,0,0.05);
  }
  
  .light-content tr:nth-child(2n), .dark-section tr:nth-child(2n){
      background-color:rgba(255,255,255,0.1);
  }
  
  caption, th, td {
    font-weight: normal;
    text-align: left;
  }
  
  th {
    border-width: 0 1px 1px 0;
    padding: 10px;
  }
  
  td {
    border-width: 0 1px 1px 0;
    padding: 10px;
  }
  
  del {
    color: #767676;
  }
  
  hr {
    border: 0;
    height: 28px;
    width:100%;
    float:none;
    margin:0;
    display:inline-block;
    opacity: 1!important;
    -webkit-transition: translateY(0px)!important;
    transform: translateY(0px)!important;
  }
  
  hr.animated-line {
    height:2px;   
    padding-top:12px;
    padding-bottom:12px;
  }
  
  hr.animated-line:before {
    content: ""; 
    display: block; 
    width:0;
    height:2px;
    background:rgba(0,0,0,1);
  }
  
  .light-content hr.animated-line:before, .dark-section hr.animated-line:before {
    background:rgba(255,255,255,1);
  }
  
  .light-content .light-section hr.animated-line:before {
    background:rgba(0,0,0,1);
  }
  
  hr.animated.animated-line:before {
    width:100%;
    -webkit-transition: width 0.7s ease-in-out 0.1s;
    transition: width 0.7s ease-in-out 0.1s;
  }
  
  hr:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
  }
  
  ::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
  }
  
  ::-moz-selection {
    background: #000;
    color: #fff;
    text-shadow: none;
  }
  
  img {
    border: 0 none;
    max-width: 100%;
    vertical-align: middle;
    height:auto;
  }
    
  h1, h2, h3, h4, h5, h6 {    
    font-weight:500;
    color:#000;
    margin-bottom:10px;
  }
  
  h1.big-title{
    font-size:10vw;
    line-height:13vw;
    font-weight:500;    
    margin-left:-0.7vw;
  }
  
  h1.big-title span {
    display:table;
    margin-top:-2vw;  
  }
  
  h1{
    font-size: calc(1rem + 4.15vw);
    line-height: calc(1rem + 5.5vw);
  }
  
  h1 span {
    display:table;
    margin-top:-0.7vw;  
  }
  
  h1.inline-title span {
    display: inline-table;
    margin-right:0.7vw;
  }
  
  h2{
    font-size: calc(1rem + 3vw);
    line-height: calc(1rem + 4.5vw);
  }
  
  h2 span {
    display:table;
    margin-top:-0.7vw;  
  }
  
  h2.inline-title span {
    display: inline-table;
    margin-right:0.7vw;
  }
  
  h3{
    font-size: calc(1rem + 2vw);
    line-height: calc(1rem + 3.5vw);
  }
  
  h3 span {
    display:table;
    margin-top:-0.7vw;  
  }
  
  h3.inline-title span {
    display: inline-table;
    margin-right:0.7vw;
  }
  
  h4{
    font-size: calc(1rem + 1vw);
    line-height: calc(1rem + 2.5vw);  
  }
  
  h5{
    font-size: calc(1rem + 0.42vw);
    line-height: calc(1rem + 1.5vw);
  }
  
  h6 {
    font-size:18px;
    line-height: 36px;
  }
  
  h6.has-icon {
    padding-left: 20px;
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    position: relative;
  }
  
  h6.has-icon::before {
    font: var(--fa-font-solid);
    content: "\f101";
    font-size: 12px;
    line-height: inherit;
    text-align: left;
    position: absolute;
    left: 0;
  }
  
  .no-margins {
    margin:0;
  }
  
  .light-content h1, .light-content h2, .light-content h3, .light-content h4, .light-content h5, .light-content h6, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6 {
    color: #fff;
  }
  
  .light-content .light-section h1, .light-content .light-section h2, .light-content .light-section h3, .light-content .light-section h4, .light-content .light-section h5, .light-content .light-section h6 {
    color: #000;
  }
  
  p {
    font-size:18px;
    line-height: 36px;
    /* margin-bottom: 25px; */
    color:#444;
  }
  
  .light-content p, .dark-section p{
    color:#aaa;
  }
  
  .light-content .light-section p {
    color:#444;
  }
  
  .bigger {
    font-size: 18px;
    line-height: 32px;
  }
  
  .smaller {
    font-size: 12px;
    line-height: 24px;
  }
  
  .container {
    max-width:1280px;
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
  }
  
  .container::after {
    clear: both;
    content: " ";
    display: table;
  }
  
  a:hover, a:active {
    outline: 0;
    color: #000;
  }
  
  a, .light-content .light-section a {
    text-decoration: none;
    color: #000;
    outline: 0;
  }
  
  .light-content a, .dark-section a, .white-header a {
    color: #000;
  }
  
  .light-content .white-header a {
    /* color:#000; */
  }
  
  a:hover {
    text-decoration:none;
  }
  
  .one_half {
      width: 48%!important;
  } 

  .one_third {
    width: 30.6%!important;
  } 

  .one_fourth {
    width: 22%!important;
  } 

  .one_fifth {
    width: 16.8%!important;
  } 

  .one_sixth {
    width: 13.33%!important;
  } 

  .two_fifth {
    width: 37.6%!important;
  } 

  .two_fourth {
    width: 48%!important;
  }   

  .two_third {
    width: 65.33%!important;
  } 

  .three_fifth {
    width: 58.4%!important;
  } 

  .three_fourth {
    width: 74%!important;
  } 

  .four_fifth {
    width: 79.2%!important;
  } 

  .five_sixth {
    width: 82.67%!important;
  } 

  .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
    float: left!important;
    margin-bottom: 10px!important;
    margin-right: 4%!important;
    position: relative!important;
  }

  .last {
    margin-right:0px!important;
  }
  
  .text-align-left {
    text-align:left;
  }
  
  .text-align-center {
    text-align:center;
  }
  
  .text-align-right {
    text-align:right;
  }
  
  .outer {
    display:table;
    width:100%;
    height:100%;
  }
  
  .inner {
    display:table-cell;
    vertical-align:middle;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  
  .light-section-wrapper, .dark-section-wrapper {
    margin-left: calc(50% - 50vw)!important;
    margin-right: calc(50% - 50vw)!important;
    max-width: 1000%!important;
    width: 100vw!important;
  }
  
  .light-section-container, .dark-section-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
  }
  
  .content-row {
    position:relative;
    width: 75%;
    margin:0 auto;
    z-index:1;
    opacity:1;
    box-sizing:border-box;
  }
  
  .content-row::after {
    clear: both;
    content: " ";
    display: table;
  }
  
  .small {
    max-width:780px;
    width:100%;
    margin:0 auto;
  }
  
  .large {
    max-width:1380px;
    width:100%;
    margin:0 auto;
  }
  
  .full {
    margin-left: calc(50% - 50vw)!important;
    margin-right: calc(50% - 50vw)!important;
    max-width: 1000%!important;
    width: 100vw!important;
  }
  
  .row_padding_top {
    padding-top:8vw;
  }
  
  .row_padding_bottom {
    padding-bottom:8vw;
  }
  
  .row_padding_left {
    padding-left:80px;
  }
  
  .row_padding_right {
    padding-right:80px;
  }
  
  .row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 80px;
    padding-right: 80px;
  }
  
  #rotate-device {
    width:100%;
    height:100%;
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    background-color:#0f1010;
    background-image:url(images/rotate.png);
    background-size:100px 100px;
    background-position:center;
    background-repeat:no-repeat;
    display:none;
  }
  
  i.arrow-icon {
    border: solid #000;
    border-width: 0px 3px 3px 0px;
    box-sizing:border-box;
    display: block;
    position:relative;
    top:0px;
    left:0px;
    height: 15px;
    width: 15px;
  }
  
  .light-content i.arrow-icon, .dark-content .item i.arrow-icon {
    border: solid #fff;
    border-width: 0px 3px 3px 0px;
  }
  
  .light-content .change-header i.arrow-icon, .dark-content .change-header i.arrow-icon {
    border: solid #000;
    border-width: 0px 3px 3px 0px;
  }
  
  i.arrow-icon::after {
    content: "";
    position: absolute;
    width: 33px;
    height: 3px;
    top: 0px;
    left: -15px;
    background-color: #000;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .light-content i.arrow-icon:after, .light-content .change-header i.arrow-icon::after, .dark-content .item i.arrow-icon::after {
    background-color: #fff;
  }
  
  .light-content .change-header i.arrow-icon::after, .dark-content .change-header i.arrow-icon::after {
    background-color:#000;
  }

/*--------------------------------------------------
  02. Magic Cursor
---------------------------------------------------*/ 
  
  
  #magic-cursor {
    position: absolute;
    left:0;
    top:0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index:10000;
    -webkit-transition: opacity 0.2s ease-in-out 0.5s;
    transition: opacity 0.2s ease-in-out 0.5s;
  }
  
  .hidden-ball #magic-cursor {
    opacity:0!important;
    visibility:hidden;
  }
  
  #ball {
    position: fixed;
    width: 80px;
    height: 80px;
    border: 2px solid #999999;
    border-radius: 50%;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;
     -webkit-transform: scale(0.5);
      transform: scale(0.5);  
  }
  
  .mfp-zoom-out-cur #ball {
    opacity:0;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
  }
  
  .light-content #ball, #ball.over-movie,  .light-content #ball.with-icon {
    border: 2px solid #999999;
    border-color:#999999;
  }
  
  #ball:before {
    font: var(--fa-font-solid);
    content: "\f106";
    font-size:14px;
    width:8px;
    height:16px;
    line-height:16px;
    text-align:center;
    position:absolute;
    left: 32px;
    top: -42px;
    color:#999;
    opacity:0;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball:before {
    color:#999;
  }
  
  #ball::after {
    font: var(--fa-font-solid);
    content: "\f107";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: 32px;
    top: 100px;
    color: #999;
    opacity:0;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball:before, .light-content #ball:after {
    color:#999;
  }
  
  .scale-up #ball:before, .scale-drag-horizontal #ball:before {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-drag-horizontal #ball:before {
    color: #fff;
  }
  
  .scale-up #ball:after, .scale-drag-horizontal #ball:after {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-drag-horizontal #ball:after {
    color: #fff;
  }
  
  .scale-up.scale-none #ball:before, .scale-up.scale-none #ball:after {
    opacity:0;
  }
  
  #ball-drag-x {
    position: absolute;
    width: 72px;
    height: 72px;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;  
  }
  
  #ball-drag-x::before {
    font: var(--fa-font-solid);
    content: "\f053";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: -37px;
    top: 30px;
    color: #000;
    opacity: 0;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball-drag-x:before {
    color:#fff;
  }
  
  #ball-drag-x::after {
    font: var(--fa-font-solid);
    content: "\f054";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    right: -40px;
    left: auto;
    top: 30px;
    color: #000;
    opacity: 0;
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball-drag-x:before, .light-content #ball-drag-x:after {
    color:#fff;
  }
  
  .drag-cursor-white #ball-drag-x:before, .drag-cursor-white #ball-drag-x:after {
    color:#fff;
  }
  
  .drag-cursor-black #ball-drag-x:before, .drag-cursor-black #ball-drag-x:after {
    color:#000;
  }
  
  .scale-drag-x #ball-drag-x:before {
    opacity:1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-drag-x #ball-drag-x:after {
    opacity:1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-up.scale-drag #ball-drag-x:before, .scale-up.scale-drag #ball-drag-x:after {
    opacity:0;
  }
  
  #ball-drag-y {
    position: absolute;
    width: 72px;
    height: 72px;
    pointer-events: none;
    opacity:1;
    box-sizing:border-box;  
  }
  
  #ball-drag-y:before {
    font: var(--fa-font-solid);
    content: "\f077";
    font-size:14px;
    width:8px;
    height:16px;
    line-height:16px;
    text-align:center;
    position:absolute;
    left: 32px;
    top: -40px;
    color:#000;
    opacity:0;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball-drag-y:before {
    color:#fff;
  }
  
  #ball-drag-y::after {
    font: var(--fa-font-solid);
    content: "\f078";
    font-size: 14px;
    width: 8px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    position: absolute;
    left: 32px;
    top: 100px;
    color: #000;
    opacity:0;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball-drag-y:before, .light-content #ball-drag-y:after {
    color:#fff;
  }
  
  .scale-drag-y #ball-drag-y:before {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-drag-y #ball-drag-y:after {
    opacity:1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .scale-up.scale-drag #ball-drag-y:before, .scale-up.scale-drag #ball-drag-y:after {
    opacity:0;
  }
  
  #ball i {
    color:#fff;
    width:76px;
    height:80px;
    line-height:78px;
    text-align:center;
    font-size:14px;
    display:block;
    opacity:1;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  #ball p {
    color:#fff;
    width:66px;
    height:16px;
    line-height:16px;
    padding-top:0px;
    padding-left:5px;
    margin:0;
    text-align:center;
    font-size:12px;
    font-weight:600;
    display:block;
    opacity:1;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content #ball p {
    color:#fff;
  }
  
  #ball p.first {
    padding-top:22px;
  }
  
  .light-content #ball i, #ball.over-movie i, .light-content #ball.with-icon i {
    color:#fff;
  }
  
  .drag-cursor-white #ball i, .drag-cursor-white #ball.with-icon i {
    color:#fff;
  }
  
  .drag-cursor-black #ball i, .drag-cursor-black #ball.with-icon i {
    color:#000;
  }
  
  .light-content #ball.with-icon.dark-icon i {
    color:#000;
  }
  
  .scale-up #ball i {
    opacity:0;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  #ball.with-icon i {
    width:76px;
  }
  
  #ball.with-icon i:nth-child(2) {
    display:none;
  }
  
  #ball.close-icon i {
    width:75px;
    height:76px;
    font-size:14px;
  }
  
  #ball.over-movie i.fa-play, #ball.over-movie.pause-movie i.fa-pause {
    display:block;
  }
  
  #ball.over-movie i.fa-pause, #ball.over-movie.pause-movie i.fa-play {
    display:none;
  }
  
  #ball-loader {
    width: 100px;
    height: 100px;
    position:absolute;
    background-color: transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #999999;
    border-left: 4px solid transparent;
    border-top: 4px solid transparent;
    border-radius: 100px;
    box-sizing: border-box;
    opacity:0;
    -webkit-transform: translate(-14px, -14px) rotate(0deg);
    transform: translate(-14px, -14px) rotate(0deg);
    -webkit-animation: rotating 0.8s ease-in-out infinite;
    animation: rotating 0.8s ease-in-out infinite;
    -webkit-transition: opacity 0s ease-in-out 0s;
    transition: opacity 0s ease-in-out 0s;
  }
  
  .light-content #ball-loader { 
    border-bottom: 4px solid #999999;
  }
  
  .show-loader #ball-loader {
    opacity:1;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    transition: opacity 0.2s ease-in-out 0s;
  }
  
  @keyframes rotating {
      0% {
    -webkit-transform: translate(-14px, -14px)rotate(0deg);
    transform:  translate(-14px, -14px) rotate(0deg);
      }
    
    95% {
        -webkit-transform:  translate(-14px, -14px) rotate(350deg);
    transform:  translate(-14px, -14px) rotate(350deg);
      }
    
      100% {
        -webkit-transform:  translate(-14px, -14px) rotate(360deg);
    transform:  translate(-14px, -14px) rotate(360deg);
      }
  }
  
  .show-loader a, .show-loader nav, .scale-up a, .scale-up .hide-ball, scale-up .link, .scale-up .button-wrap, .scale-up #burger-wrapper, .scale-up .disable-drag, .scale-drag a, .scale-drag .move-title {
    pointer-events:none!important;
  }
  
  .disable-cursor #magic-cursor {
    display:none;
  }
  
  #ball i.arrow-icon {
    border: solid #000;
    border-width: 3px 3px 0px 0px;
    box-sizing:border-box;
    display: block;
    position:absolute;
    top:28px;
    left:30px;
    height:20px;
    width:20px;
  }
  
  .light-content #ball i.arrow-icon {
    border: solid #fff;
    border-width: 3px 3px 0px 0px;
  }
  
  #ball i.arrow-icon:after {
    content:"";
    position:absolute;
    width:30px;
    height:3px;
    top:8px;
      left:-8px;
    background-color:#000;
    transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
  }
  
  .light-content #ball i.arrow-icon:after {
    background-color:#fff;
  }
  
  
/*--------------------------------------------------
  03. Page Preloader
---------------------------------------------------*/ 
  
  .disable-ajaxload .preloader-wrap {
    display:none;
  }
  
  .preloader-wrap {
    width: 100%;
    height:100%;
    position: fixed;
    top: 0; 
    bottom: 0;
    background: #000;
    z-index : 1800;
    text-align:center;
  }
  
  .preloader-wrap .outer {
    padding: 0px;
    box-sizing:border-box;
  }
  
  .preloader-wrap .inner {
    vertical-align:middle;
    box-sizing:border-box;
  }
  
  .percentage-wrapper {
    height: 20px;
    position:absolute;
    margin-bottom: 20px;
    right:80px;
    bottom:40px;
  }
  
  .percentage-intro {
    height: 20px;
    position:absolute;
    margin-bottom: 20px;
    left:80px;
    bottom:40px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color:rgba(255,255,255,0.6);
  }
  
  .percentage {
    opacity: 1;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    width:30px;
    height: 100px;
    color:rgba(255,255,255,0.6);
    display: table;
    margin: 0 auto;
  }
/*  #percentage2 {
    opacity: 1;
    font-size: px;
    font-weight: 500;
    line-height: 20px;
    width:30px;
    height: 100px;
    color:rgba(255,255,255,0.6);
    display: table;
    margin: 0 auto;
  }*/
  
  .percentage::after {
    content: "%";
    width: 20px;
    height: 20px;
    font-size: 25pxpx;
    line-height: 20px;
    color:rgba(255,255,255,0.6);
  }
  
  .trackbar {
    width: auto;
    height: auto;
    margin:0 auto;
    display:table;
    position: relative;
    padding:20px;
    opacity: 1;
    overflow:hidden;
  }
  
  .loadbar {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0px;
    right: 0;
    overflow: hidden;
  }
  
  .hold-progress-bar {
    width: 0%;
    height: 0px;
    background: rgba(0,0,0,1);
    position: absolute;
    top: 0px;
    left: 0;
    right:0;
    overflow: hidden;
  }
  
  .preloader-intro {
    font-weight:500;
    position: relative;
    display:block;
    font-size:10vw;
    line-height:13vw;
    height:13vw;
    color:#fff;
    overflow:hidden;
    margin:0;
  }
  
  .preloader-intro li {
    list-style:none;
    line-height:inherit;
    margin:0;
    color:#fff;
  }
  
/*--------------------------------------------------
  04. Header Elements
---------------------------------------------------*/ 
  
    
  header {
    width:100%;
    height: 100px;
    left:0;
    top:0;
    background-color: rgba(23, 23, 23,75%) !important;
    position: fixed;
    box-sizing:border-box;
    z-index:1000;
    -webkit-transition: background 0.4s ease-in-out 0.3s;
    transition: background 0s ease-in-out 0s;
  }
  
  #header-container {
    box-sizing: border-box;
    height: inherit;
    padding: 20px 80px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    z-index: 20;
    opacity: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-visible #header-container{
    opacity:1;
    height: 66px;
  }
  
  #logo {
    position: relative;
    display: table;
    pointer-events: initial;
    z-index: 10;
    /* top: 15px; */
    float: left;
  }
  
  #logo a {
    display:block;
    -webkit-transition: transform 0.5s ease-in-out 0.1s;
    transition: transform 0.5s ease-in-out 0.1s;  
  }
  
  #logo a.disable, .open #logo a {
    pointer-events: none;
  }
  
  #logo img {
    display: block;
    height: 50px;
    width: auto;
    max-width:none;
    -webkit-transition: opacity 0.15s ease-in-out 0s;
    transition: opacity 0.15s ease-in-out 0s;
  }
  
  #logo img.black-logo {
    opacity:1;
  }
  
  .light-content #logo img.black-logo {
    opacity:0;
  }
  
  #logo img.white-logo {
    /* position:absolute; */
    top:0;
    /* left:0; */
    opacity:0;
  }
  
  .light-content #logo img.white-logo {
    opacity:1;
  }
  
  .white-header #logo img.black-logo {
    opacity:0;
  }
  
  .light-content .white-header #logo img.black-logo {
    opacity:1;
  }
  
  .light-content .white-header.over-white-section #logo img.black-logo, .show-loader1 .light-content .white-header #logo img.black-logo {
    opacity:0;
  }
  
  .white-header #logo img.white-logo {
    opacity:1;
  }
  
  
  
  .light-content .white-header.over-white-section #logo img.white-logo, .show-loader1 .light-content .white-header #logo img.white-logo {
    opacity:1;
  }
  
  .menu-open.light-content .slide-in #logo img.white-logo {
    opacity:1;
  }
  
  nav {
    pointer-events: none;
  }
  
  nav.open {
    pointer-events: initial;
  }
  
  .dark-content-header #logo img.black-logo {
    opacity:1!important;
  }
  
  .dark-content-header #logo img.white-logo {
    opacity:0!important;
  }
  
  .light-content-header #logo img.black-logo {
    opacity:0!important;
  }
  
  .light-content-header #logo img.white-logo {
    opacity:1!important;
  }
  
  @media all and (min-width: 1025px) {
    
    .classic-menu nav {
      position: relative;
      width: auto;
      top: 0px;
      -webkit-transition: all 0.2s ease-in-out 0.5s;
      transition: all 0.2s ease-in-out 0.5s;
      display:block;
      float:right;
      height: 60px;
      margin: 10px 0;
      background-color:transparent!important;
    }
    
    .classic-menu .flexnav {
      display: block;
      float: right;
      position: relative;
      width: auto;
      max-height: 60px;
    }
    
    .classic-menu .flexnav li ul {   
      min-width: 180px;
    } 
    
    .classic-menu .flexnav .touch-button {
      background: transparent none repeat scroll 0 0;
    } 
    
    .flexnav .touch-button .navicon {
      display:none;
    }
    
    .classic-menu .flexnav li {    
      background: transparent none repeat scroll 0 0;
      padding:0 25px;
      padding-bottom:20px;
      padding-top:20px;
    }
    
    .classic-menu .menu-timeline {
      opacity:1!important;
      -webkit-transition: translateY(0px)!important;
      transform: translateY(0px)!important;
      pointer-events:initial;
    }
    
    .classic-menu .flexnav li:last-child {
      padding-right:0px;
    }
    
    .classic-menu .before-span {
      opacity:1!important;
      -webkit-transition: translateY(0px)!important;
      transform: translateY(0px)!important;
      
    }
    
    .classic-menu .flexnav li a {    
      background: transparent none repeat scroll 0 0;
      padding: 0 5px;
      position:relative;
      border-left: medium none;
      color:#000;   
      font-size:16px;
      font-weight:500;
      line-height:20px;
      display:block;
      overflow:hidden;
      -webkit-transition: all 0.15s ease-in-out;
      transition: all 0.15s ease-in-out;
    }
    
    .light-content .classic-menu .flexnav li a { 
      color:#fff;   
    }
    
    .light-content  .classic-menu.white-header .flexnav li a { 
      color:#000;   
    }
    
    .classic-menu.white-header .flexnav li a { 
      color:#fff;   
    }
    
    .flexnav:hover li a {
      color: rgba(0,0,0,0.4);
    }
    
    .light-content .classic-menu .flexnav:hover li a {
      color: rgba(255,255,255,0.4);
    }
    
    .classic-menu.white-header .flexnav:hover li a {
      color: rgba(255,255,255,0.4);
    }
    
    .light-content  .classic-menu.white-header .flexnav:hover li a {
      color: rgba(0,0,0,0.4); 
    }
    
    .classic-menu .flexnav li:hover a {
      color:#000;
    }
    
    .light-content .classic-menu .flexnav li:hover a {
      color:#fff;
    }
    
    .classic-menu.white-header .flexnav li:hover a {
      color:#fff;
    }
    
    .light-content .classic-menu.white-header .flexnav li:hover a {
      color:#000;
    }
  
    .classic-menu .flexnav li a span {
      position: relative;
      display: block;
      -webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transform-origin: 100% 0%;
    }
    
    .classic-menu .flexnav li a span::before {
      position: absolute;
      top: 100%;
      width:100%;
      left:0;
      content: attr(data-hover);
    }
    
    .classic-menu .flexnav li:hover a span {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      transform-origin: 0% 0%;
    }
    
    .classic-menu .flexnav li ul li a { 
      padding:0 20px 20px;
      background-color:transparent;
      font-size:14px;
      font-weight:500;
      text-transform:none;
      color:#fff!important;
      opacity:0.6;
      -webkit-transition: all 0.05s ease-in-out;
      -moz-transition: all 0.05s ease-in-out;
      -o-transition: all 0.05s ease-in-out;
      -ms-transition: all 0.05s ease-in-out;
      transition: all 0.05s ease-in-out;
    }
    
    .classic-menu .flexnav li ul li a.link::before {
      display:none;
    }
    
    .classic-menu .flexnav li ul li a.active, .classic-menu .flexnav li ul li a:hover {
      opacity:1;
    }
    
    .classic-menu .flexnav li > ul li {
      margin-left:0;
      padding:0;
      opacity: 1 !important;
      transform: none !important;
    }
    
    .classic-menu .flexnav li ul {
      -webkit-transform: translate3d(0px, 30px, 0px);
      transform: translate3d(0px, 30px, 0px);
      display:block!important;
      opacity:0!important;
      height:inherit!important;
      overflow:visible!important;
      visibility:hidden;
      left:15px;
      top:60px;
      padding-top:20px;
      background: #000;   
      border-radius:3px;
      -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
    }
    
    .classic-menu .flexnav li:last-child ul {
      left:auto;
      right:-10px;
    }
    
    .classic-menu .flexnav li ul ul {
      left:5px!important;

    }
    
    .classic-menu .flexnav li ul:after {
      display: block;
      content: '';
      position: absolute;
      top: -6px;
      left: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 9px;
      border-color: transparent transparent #000;
    }
    
    .classic-menu .flexnav li:last-child ul:after {
      left: auto;
      right: 20px;
    }
    
    .classic-menu .flexnav ul li ul:after {
      display: block;
      content: '';
      position: absolute;
      top: 15px;
      left: -10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 9px;
      border-color: transparent transparent #000;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    
    .classic-menu .flexnav li ul li > ul, .classic-menu .flexnav li ul.open ul.open {
      top: -5px;
      z-index:10;
    }
    
    .classic-menu .flexnav li:last-child ul li > ul, .classic-menu .flexnav li:last-child ul.open ul.open {
      margin-left: -100%;
      left:-5px!important;
      right:auto;
      top: 0;
    }
    
    .classic-menu .flexnav li:last-child ul li ul::after {
      right: -10px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    
    .classic-menu .flexnav ul li ul li a {
      background: #000;
    }
    
    .classic-menu .flexnav ul li ul li ul li a {
      background: #000;
    }
    
    .classic-menu .flexnav li ul.flexnav-show {
      -webkit-transform: translate3d(0px, 0px, 0px);
      transform: translate3d(0px, 0px, 0px);
      opacity:1!important;
      visibility:visible;
      -webkit-transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;
      transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;  
    }
    
    .classic-menu .flexnav .touch-button {
      display:none;
    }
        
    
    /*-- Full Screen Menu --*/  
        
    .fullscreen-menu .nav-height {
      overflow-y: scroll;
      position: relative;
      height: 100%;
      padding: 40px 0;
      padding-right: 30px;
      width: calc(100% + 30px);
      box-sizing: border-box;
    }
    
    .fullscreen-menu nav {
      height: 100vh;
      position: fixed;
      top:0;
      left:0;
      width: 100%;
      box-sizing: border-box;
      visibility: visible;
      pointer-events:none;
      opacity:0;
      padding:20px 0;   
      -webkit-transition: all 0.2s ease-in 0.6s;
      transition: all 0.2s ease-in 0.6s;
    }
    
    .fullscreen-menu nav.open {
      visibility:visible;
      pointer-events:initial;
      opacity:1;
      -webkit-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
    }
    
    .fullscreen-menu .flexnav {
      max-height: 2000px;
      -webkit-transition: all 0.2s ease-in 0.6s;
      transition: all 0.2s ease-in 0.6s;
      display: table;
      width: 100%;
      padding:0 20px;
      box-sizing:border-box;
      margin: 0 auto;
      float: none;
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 50px;
    }
    
    .fullscreen-menu .flexnav.flexnav-show {
      -webkit-transition: all .3s ease-out 0.2s;
      transition: all .3s ease-out 0.2s;  
    }
    
    .fullscreen-menu .flexnav li {
      text-align:center;
      padding:0;
      box-sizing:border-box;
      float:none;     
    }
    
    .fullscreen-menu .menu-timeline {
      opacity:0;
    }
    
    .fullscreen-menu .flexnav .touch-button {
      width: 100%;
      display: block;
      height:100px;
    }
    
    .fullscreen-menu .flexnav li ul li .touch-button {
      height:32px;
    }
    
    .fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
            opacity:1;
        }
    
    .fullscreen-menu .flexnav .touch-button .navicon {
      display:none;
    }
    
    .fullscreen-menu .flexnav li.link {
      border-bottom: none;  
    }
    
    .fullscreen-menu .flexnav li a {
      font-weight: 500;
      font-size: calc(1rem + 4.15vw);
      /* line-height: calc(1rem + 5.5vw); */
      padding:0;
      -webkit-transition: all .1s ease-in-out 0s;
      transition: all .1s ease-in-out 0s;
    }
    
    @media only screen and (max-width: 1466px) {
  
      .fullscreen-menu .flexnav li a {
        font-size: calc(1rem + 5.15vw);
        line-height: calc(1rem + 7vw);
      }
  
    }
    
    .fullscreen-menu .flexnav li a {
      color:#000;
    }
    
    .fullscreen-menu.invert-header .flexnav li a {
      opacity: 1;
      color: #fff;
      font-size: 17px;
      /* transition: 0.5s; */
    }
    
    .fullscreen-menu .flexnav:hover li a, .fullscreen-menu .flexnav.hover li a {
      /* opacity:0.3; */
    }
    
    .fullscreen-menu .flexnav li:hover a, .fullscreen-menu .flexnav li a.active{
      /* opacity:1; */
    }
    
    .fullscreen-menu .flexnav:hover li ul li a {
      opacity:0.3;
    }
    
    .fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
      opacity:1;
    }
    
    .fullscreen-menu .flexnav a.link::before {
      display:none;
    }
    
    .fullscreen-menu .flexnav li ul {
      margin-bottom:20px;
      /* position:relative; */
      left:0;
    }
    
    .fullscreen-menu .flexnav li ul:after {
      display:none;
    }
    
    .fullscreen-menu .flexnav li ul li a {
      padding: 6px 0;
      font-size: 16px;
      line-height:28px;
      font-weight:500;
      border-top: none;
      text-transform:none;
    }
    
    .fullscreen-menu .flexnav ul li ul li a {
      background:transparent;
    }
    
    .fullscreen-menu .flexnav li ul li > ul, .fullscreen-menu .flexnav li ul.open ul.open {
      margin-left: 0;
      top: 0;
    }
    
    .fullscreen-menu .menu-timeline {
      opacity:1;
    }
    
    .fullscreen-menu .menu-timeline .before-span {
      opacity: 1 !important;
      display:block;
      -webkit-transform: translateY(120px);
      transform: translateY(0) !important;
    }
    
    .fullscreen-menu .flexnav li, .fullscreen-menu .flexnav li a  {
      background-color:transparent;
      border:0;
    }
    
    .fullscreen-menu .flexnav li a span {
      position: relative;
      display: block;
      -webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transform-origin: 100% 0%;
      overflow:hidden;
    }
    
    .fullscreen-menu .open .flexnav li a span {
      overflow:visible;
    }
    
    .fullscreen-menu .flexnav li a span::before {
      position: absolute;
      top: 100%;
      width:100%;
      left:0;
      content: attr(data-hover);
    }
    
    
    
    .fullscreen-menu .flexnav li.hover a  span {
      -webkit-transform: translateY(-100%)!important;
      transform: translateY(-100%)!important;
      transform-origin: 0% 0%;
    }
  
  }

  nav, nav.open {
    -webkit-transition: all 0s ease-in 0s;
    transition: all 0s ease-in 0s;
    background:transparent;
  }

  #burger-wrapper {
    width: 40px;
    height: 40px;
    float: right;
    top: 0px;
    right: 0;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: initial;
  }
  
  .classic-menu .button-wrap.right.menu {
    display:none;
  }

  .burger-dots #menu-burger {
    top:0px;
    width: 25px;
    height: 25px;
    position: relative;
    margin: 0 auto;   
    z-index:2;
    pointer-events: none;
  }
  
  .menu-overlay #menu-burger {
    display:block;
  }

  .burger-dots #menu-burger span {
    display: block;
    position: absolute;
    height: 5px;
    width: 5px;
    border-radius:5px;
    background-color: #000;
    opacity: 1;
    top:10px;
    left:0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
    transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
  }
  
  #burger-wrapper .touch-button {
    display:none;
  }

  .burger-dots #menu-burger span:nth-child(1) {
      left: 0px;
  }
  
  .burger-dots #menu-burger span:nth-child(2){
      left: 10px;
  }
  
  .burger-dots #menu-burger span:nth-child(3){
      left: 20px;
  }
  
  .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(1) {
      left: 10px;
  }
  
  .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(3) {
      left: 10px;
  }
  
  .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(1) {
      left: 3px;
  }
  
  .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(3) {
      left: 3px;
  }
  
  .burger-dots #menu-burger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top:12px;
    height: 2px;
    width:20px;
    left: 3px;
  }
  
  .burger-dots #menu-burger.open span:nth-child(2) {
     -webkit-transform: scale(0);
    transform: scale(0);
  }
  
  .burger-dots #menu-burger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top:12px;
    height: 2px;
    width:20px;
    left: 3px;
  }
  
  .button-wrap.right.burger-lines {
    right: -30px;
  }
  
  .burger-lines #menu-burger {
    width: 16px;
    height: 22px;
    position: relative;
    margin: 0 auto;   
    z-index:2;
    pointer-events: none;
  }
  
  .burger-lines #menu-burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    opacity: 1;
    right: 0;
    background-color:#000;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
    transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
  }
  
  .burger-lines #menu-burger span:nth-child(1) {
    top: 7px;
  }
  
  .burger-lines #menu-burger span:nth-child(2){
    top: 15px;
  }
  
  .burger-lines #menu-burger span:nth-child(3){
    display:none;
  }
  
  .burger-lines #menu-burger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top:10px;
  }
  
  .burger-lines #menu-burger.open span:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top:10px;
  }
  
  .light-content #menu-burger span {
    background-color:#fff;
  }
  
  .white-header #menu-burger span {
    background-color:#fff;
  }
  
  .light-content .white-header #menu-burger span {
    background-color:#000;
  }
  
  .light-content .white-header.over-white-section #menu-burger span, .show-loader1 .light-content .white-header #menu-burger span {
    background-color:#fff;
  }
  
  .dark-content-header #menu-burger span {
    background-color:#000!important;
  }
  
  .light-content-header #menu-burger span {
    background-color:#fff!important;
  }
  
  .dark-content-header .button-text {
    color:#000!important;
  }
  
  .light-content-header .button-text {
    color:#fff!important;
  }
  
  
/*--------------------------------------------------
  05. Main Content
---------------------------------------------------*/   
  
  #content-scroll {
    z-index:1;
    position:relative;
  }
  
  .smooth-scroll #content-scroll {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1;    
    overflow:hidden; 
  }
  
  .scroll-content {
    cursor:default!important;
  }
  
  .scale-up .scroll-content {
    cursor:grabbing!important;
  }
  
  .scrollbar-track {
    background: transparent!important;
  }
  
  
/*--------------------------------------------------
  06. Footer Elements
---------------------------------------------------*/   
  
  footer {
    position:relative;
    width:100%;
    height:120px;
    z-index:900;
    box-sizing:border-box;
    text-align:center;
    bottom:0;
    left:0;
    overflow:hidden;
    pointer-events:none;
  }
  
  footer.fixed {
    position:fixed;
  }
  
  footer.showcase-footer{
    position:fixed;
  }
  
  #footer-container {
    padding: 0 80px;
    /* margin: 5px auto; */
    height: 68px;
    opacity: 0;
    /* position: absolute; */
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-middle {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: inherit;
    display: table;
    left: 0;
    pointer-events: none;;
  }
  
  .copyright {
    position: relative;
    top: 25px;
    width: auto;
    height: 30px;
    overflow: hidden;
    font-size: 14px;
    line-height: 30px;
    font-weight: 500;
    color: #000;
    pointer-events: initial;
    display: table;
    width: auto;
    padding: 0px 20px 0px 20px;
    max-width: 820px;
    box-sizing:border-box;
    text-align:center;
    margin: 0 auto; 
  }
  
  .light-content .copyright {
    color:#fff;
  }
  
  .socials-wrap {
    position:relative;
    float: right;
    color: #000;
    width: 240px;
    height: 160px;
    box-sizing: border-box;
    pointer-events:initial; 
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .light-content .socials-wrap {
    color: #fff;
  }
  
  footer .socials-wrap {
    margin-top:0px;
  }
  
  .socials-wrap:hover {
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
  }
  
  .socials-text {
    float:right;
    font-size:14px;
    font-weight: 500;
    line-height:40px;
    transform: translateY(73px);
  }
  
  .socials-wrap:hover .socials-text {
    transform: translateY(15px) translateX(5px);
    -webkit-transform: translateY(15px) translateX(5px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;    
  }
  
  .socials-icon {
    float:right;
    width:30px;
    height:40px;
    font-size:14px;
    line-height:40px;
    text-align:right;
    margin-left:10px;
    transform:scale(1) translateY(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .socials-wrap:hover .socials-icon {
    transform:scale(0) translateY(40px);
    width:0;
    margin:0;
    overflow:hidden;
    
  }
  
  .socials-icon:after, .socials-text:after {
    content: "";
    clear: both;
    display: table;
  }
  
  .socials {
    height: auto;
    line-height: 30px;
    position: relative;
    width: auto;
    margin:0 auto;
    margin-top: 10px;
    text-align: center;
    bottom: 0;
    display: table;
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
  }
  
  .socials-wrap .socials {
    display: inline-block;
    width: 100%;
    text-align: right;
  }
  
  .socials li {
    margin-right: 0px;
    margin-left: 10px;
    list-style: none;
    color: #999;
    font-size: 15px;
    margin-bottom: 0;
    line-height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    float: right;
    z-index: 2;
    -webkit-transition: background 0.4s ease-in-out 0s;
    transition: background 0.4s ease-in-out 0s;
  }
  
  .socials-wrap .socials li {
    opacity:0;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  }
  
  .socials-wrap:hover .socials li:nth-child(5) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);    
  }
  
  .socials-wrap:hover .socials li:nth-child(4) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);  
  }
  
  .socials-wrap:hover .socials li:nth-child(3) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);    
  }
  
  .socials-wrap:hover .socials li:nth-child(2) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);  
  }
  
  .socials-wrap:hover .socials li:nth-child(1) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);    
  }
    
  .socials li:last-child {
    margin-left: 0px;
  }
  
  .socials li a {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    display: block;
    height: 40px;
    width: 40px;
    line-height:40px;
    text-align:center;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
  }
  
  .socials:hover li  a {
    opacity:0.3;
  }
  
  .socials li a:hover {
    color: #000;
    opacity:1;
  }
  
  .light-content .socials li a {
    color: #fff;  
  }
  
  .light-content .socials:hover li  a {
    opacity:0.3;
  }
  
  .light-content .socials li a:hover {
    color: #fff;
    opacity:1;
  }
  
  .button-wrap {
    position: relative;
    cursor: pointer;
    top: 0px;
    pointer-events: initial;
    width: auto;
    display: table;
  }
  
  .button-wrap:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
  }
  
  .button-wrap.left {
    float:left;
    left:-32px; 
  }
  
  .button-wrap.right {
    float:right;
    right:-26px;  
  }
  
  #main .button-wrap.left {
    float:none;
    left:-24px;   
  }
  
  #main .button-wrap.button-link.left {
    float:none;
    left:-20px;   
  }
  
  #main .button-wrap.right {
    float:none;
    right:auto;     
  }
  
  #main .button-wrap.button-link.right {
    right:-2px;   
  }
  
  .icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    float:left;
  }
  
  #main .icon-wrap {
    width: 60px;
    height: 60px;
  }
  
  .button-wrap.left .icon-wrap {
    float:left;
  }
  
  .button-wrap.right .icon-wrap {
    float:right;
  }
  
  #main  .text-align-right .button-wrap.right {
    float:right;
  }
  
  .button-icon {
    height: 40px;
    width: 40px;
    color: #000;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }
  
  .light-content .button-icon, .dark-section .button-icon {
    color:#fff;
  }
  
  .light-content .light-section .button-icon {
    color:#000;
  }
  
  .white-header .button-icon {
    color:#fff;   
  }
  
  .light-content .white-header .button-icon {
    color:#000;   
  }
  
  .button-icon i {
    height:40px;
    line-height:40px;
    width:40px;
    text-align:center;
  }
  
  #main .button-icon i {
    line-height:40px;
  }
  
  #main .button-icon i.fa.fa-arrow-right {
    font-size:14px;
  }
  
  .button-text {
    font-weight: 500;
    font-size: 14px;
    line-height:30px;
    margin:25px 0;
    overflow: hidden;
    width:auto;
    padding:0 10px;
    color:#000;
    -webkit-transition: color 0.05s ease-in-out;
    transition: color 0.05s ease-in-out;
  }
  
  #main #hero-footer .button-text span::after {
    content:none;
  }
  
  #main .button-text {
    font-size: 16px;
    line-height:30px;
    font-weight: 400;
    margin:15px 0;
    transition: transform .2s ease-out;
  }
  
  #main #hero .button-text {
    font-weight: 500;
    font-size: 14px;
  }
  
  #main .large-btn .button-text {
    font-size: 18px!important;
    font-weight:500;
    margin:15px 0;
    transition: transform .2s ease-out;
  }
  
  .light-content .button-text, .dark-section .button-text {
    color:#fff;
  }
  
  .light-content .light-section .button-text {
    color:#000;
  }
  
  .white-header .button-text {
    color:#fff;   
  }
  
  .light-content .white-header .button-text {
    color:#000;   
  }
  
  .light-content .white-header.over-white-section .button-text, .show-loader1 .light-content .white-header .button-text {
    color:#fff;   
  }
  
  .button-wrap.left .button-text {
    text-align:left;
    float: left;
  }
  
  .button-wrap.right .button-text {
    text-align:right;
    float: right;
    padding-left:0px;
  }
  
  .button-text span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    width:auto;
    text-align:center;
    transform-origin: 100% 0%;
  }
  
  
  
  
  
  .button-link .button-text, #main .button-link .button-text {
    overflow:visible;
    transition: padding 0.3s ease-out;
  }
  
  .button-link.left .button-text {
    padding-left:0px;
  }
  
  .button-link.left:hover .button-text {
    padding-left:10px;
  }
  
  .button-link .button-text span::before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.3);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.3s ease-out;
  }
  
  .button-link.left .button-text span::before {
    transform-origin: left;
  }
  
  .light-content .button-link .button-text span::before, .dark-section .button-link .button-text span::before {
    background: rgba(255,255,255,0.4);
  }
  
  .light-content .light-section .button-link .button-text span::before {
    background: rgba(0,0,0,0.3);
  }
  
    .button-wrap.button-link:hover .button-text span {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  
  .button-link:hover .button-text span::before {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform-origin: left;
  }
  
  .button-link.left:hover .button-text span::before {
    transform-origin: right;
  }
  
  .button-link .button-icon i {
    background-color:transparent;
    border:1px solid rgba(0,0,0,0.4);
    color:transparent;
    font-size: 14px;
    border-radius:100%;
    transform: scale(0.25);
    box-sizing:border-box;
    transition: all .3s ease-out;
    text-indent:-100px;
    overflow:hidden;
  }
  
  .button-link:hover .button-icon i {
    background-color:#000;
    color:#fff;
    border:1px solid rgba(0,0,0,1);
    transform: scale(1.2);
    text-indent:0px;
  }
  
  .light-content .button-link .button-icon i, .dark-section .button-link .button-icon i {
    border:1px solid rgba(255,255,255,0.4);
  }
  
  .light-content .button-link:hover .button-icon i, .dark-section .button-link:hover .button-icon i {
    background-color:#fff;
    color:#000;
    border:1px solid rgba(255,255,255,1);
  }
  
  .light-content .light-section .button-link .button-icon i {
    border:1px solid rgba(0,0,0,1);
  }
  
  .light-content .light-section .button-link:hover .button-icon i {
    background-color:#000;
    color:#fff;
    border:1px solid rgba(0,0,0,1);
  }
  
  
  .button-link.right .button-icon i {
    transform: scale(0.25) translateX(-40px);
    -webkit-transform: scale(0.25) translateX(-40px);
  }
  
  .button-link.right:hover .button-icon i {
    transform: scale(1.2) translateX(0px);
    -webkit-transform: scale(1.2) translateX(0px);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .button-wrap.left .button-text span {
    text-align:left;
  }
  
  .button-wrap.right .button-text span {
    text-align:right;
  }
  
  .button-text span::before {
    position: absolute;
    width:auto;
    top: 100%;
    left:0;
    content: attr(data-hover);
  }
  
  .header-middle .button-text span::before {
    content: attr(data-on);
  }
  
  .button-wrap:hover .button-text span {
    /* -webkit-transform: translateY(-100%); */
    /* transform: translateY(-100%); */
    /* transform-origin: 0% 0%; */
  }
  
  nav, nav.open {
    -webkit-transition: all 0s ease-in 0s;
    transition: all 0s ease-in 0s;
    background:transparent;
  }
  
/*--------------------------------------------------
  07. Responsive
---------------------------------------------------*/     

      
@media only screen and (max-width: 1466px) {
  
  h1.big-title {
    font-size: 11vw;
    line-height: 14vw;
  }
  
  .row_padding_all {
    padding-left: 60px;
    padding-right: 60px;
  }
  
  .row_padding_left {
    padding-left:60px;
  }
  
  .row_padding_right {
    padding-right:60px;
  }
  
  .preloader-intro {
    font-size: 11vw;
    line-height: 14vw;
    height: 14vw;
  }
  
  .percentage-wrapper {
    right: 60px;
    bottom: 40px;
  }
  
  .percentage-intro {
    left: 60px;
    bottom: 40px;
  }
  
  header {
      height: 100px;
  }
  
  #header-container {
    padding: 10px 60px;
  }
  
  .flexnav li {
      padding: 20px;
  }
  
  footer {
      height: 100px;
  }
  
  #footer-container {
      padding: 0 60px;
    margin: 10px auto;
  }
  
}


@media only screen and (max-width: 1024px) {
  
  h1.big-title {
    font-size: 12vw;
    line-height: 16vw;
  }
  
  .parallax-wrap {
    transform:none!important;
  }
  
  .parallax-element {
    transform:none!important;
  }
  
  .has-parallax figcaption {
    display:none;
  }
  
  .destroy {
    display:none;
  }
  
  .row_padding_left {
    padding-left: 0px;
  }
  
  .row_padding_right {
    padding-right: 0px;
  }
  
  .full.row_padding_left {
    padding-left: 40px;
  }
  
  .full.row_padding_right {
    padding-right: 40px;
  }
  
  .row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .full.row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 40px;
    padding-right: 40px;
  } 
  
  #magic-cursor {
    display:none;
  }
  
  .preloader-intro {
    font-size: 12vw;
    line-height: 16vw;
    height: 16vw;
  }
  
  .percentage-wrapper {
    right: 40px;
    bottom: 20px;
  }
  
  .percentage-intro {
    left: 40px;
    bottom: 20px;
  }
  
  header {
    height:80px;
  }
  
  #header-container {
      padding: 0;
    margin: 0 auto;
  }
  
  #logo {
    left: 40px;
  }
  
  .header-middle {
    display:none;
  }
  
  .button-wrap.right.menu {
    right: 10px;
  }
  
  nav {
    height: 100vh;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    visibility: visible;
    pointer-events:none;
    opacity:0;
    padding:20px 0;   
    -webkit-transition: all 0.2s ease-in 0.6s;
    transition: all 0.2s ease-in 0.6s;
  }
  
  nav.open {
    visibility:visible;
    pointer-events:initial;
    opacity:1;
    background-color: transparent;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  
  .nav-height {
    position: relative;
    height: 100%;
    padding: 40px 0;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }
  
  .flexnav {
    padding: 0 20px;
      max-height: 2000px;
    display: table;
    width: auto;
    margin: 0 auto;
    text-align:center;
    box-sizing:border-box;
    background: transparent;
    -webkit-transition: all 0.2s ease-in 0.6s;
    transition: all 0.2s ease-in 0.6s;
  }
  
  .flexnav.flexnav-show {
    -webkit-transition: all .3s ease-out 0.2s;
    transition: all .3s ease-out 0.2s;  
  }
  
  .flexnav.opacity {
    opacity: 1;
  }
  
  .flexnav li {
    padding:0;
    -webkit-transition: color .15s ease-out 0s;
    transition: color .15s ease-out 0s; 
  }
  
  .flexnav:hover li  {
    color:rgba(255,255,255,0.4)
  }
  
  .flexnav li:hover {
    color:rgba(255,255,255,1)
  }
  
  .flexnav li a, .flexnav li ul li a {
      background: transparent;
  }
  
  .flexnav li a {
    font-weight:500;
    font-size: calc(1rem + 6vw);
    line-height: calc(1rem + 8.5vw);
    padding:0;
    border:none;
    -webkit-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
  }
  
  .flexnav li a {
    color:#000;
  }
  
  .invert-header .flexnav li a {
    color: #fff;
  }
  
  .flexnav:hover li a {
    opacity:0.3;
  }
  
  .flexnav li:hover a, .flexnav li a.active{
    opacity:1;
  }
  
  .flexnav li ul {
    margin-bottom:15px;
  }
  
  .flexnav li ul li a {
    padding: 10px 0;
    font-weight: 500;
    text-transform:none;
    font-size: 14px;
    line-height: 14px;
    border-top: none;
    opacity:0.4;
    -webkit-text-stroke:none;
  }
  
  .flexnav li ul li:hover a, .flexnav li ul li a.active{
    opacity:1;
  }
  
  .flexnav:hover li ul li a {
    opacity:0.3;
  }
  
  .flexnav:hover li ul li a.active, .flexnav:hover li ul li:hover > a {
    opacity:1;
  }
  
  .flexnav ul li ul li a {
    background: transparent;
  }
  
  .flexnav li ul li ul li a {
    padding: 10px 40px; 
  }
  
  .flexnav .touch-button {
    width: 100%;
    display: block;
    height:60px;
  }
  
  .flexnav li ul li .touch-button {
    height:32px;
  }
  
  .flexnav .touch-button .navicon {
    display:none;
  }
  
  #menu-burger span.touch-button {
    display:none;
  }
  
  .classic-menu .button-wrap.right.menu {
    display: block;
  }
  
  footer {
    height: 80px;
  }
  
  #footer-container {
    margin: 0px auto;
    padding: 0 40px;
    height: 80px;
  }
  
  .footer-button-wrap {
      bottom: 80px;
  }
  
  .copyright {
    text-align:center;
  }
  
  .socials-wrap {
    width: 240px;
    height: 40px;
    float:right;
    margin:0 auto;
    right:-10px;
    transform: translateX(0px) translateY(20px)!important;
    -webkit-transform: translateX(0px) translateY(20px)!important;
  }
  
  #footer-container .socials-wrap:hover {
    transform: translateY(20px) !important;
    -webkit-transform: translateY(20px) !important;
  }
  
  .socials-icon, .socials-text {
    display:none;
  }
  
  .socials-wrap .socials {
    margin-top: 5px;
    text-align: right;
    transform: translate(254px, -21px);
  }
  
  .socials-wrap .socials li {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  
  .socials-wrap:hover .socials li {
    opacity: 1;
    transform: translateY(0px)!important;
    -webkit-transform: translateY(0px)!important;
  }
  
  .socials li {
    margin-right: 10px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    margin: 0 5px auto;
    display: inline-block;
    float: none;
  }
  
  .socials li a {
    height: 30px;
    width: 30px;
    line-height: 30px;
  }
  
}


@media only screen and (max-width: 767px) { 
  
  h1.big-title {
    font-size: 13vw;
    line-height: 17vw;
  }
  
  h1{
    font-size:34px;
    line-height: 48px;
  }
  
  h2{
    font-size: 28px;
    line-height: 44px;
  }
  
  h3{
    font-size:24px;
    line-height: 36px;
    margin-left:-1px;
  }
  
  h4{
    font-size:20px;
    line-height: 30px;
    margin-left:-1px; 
  }
  
  h5{
    font-size:16px;
    line-height: 26px;
    margin-left:-1px;
  }
  
  h6{
    font-size:14px;
    line-height: 24px;
  }
  
  figcaption {
    background-color: rgba(0,0,0,0.3);
    bottom: 0px;
    font-size: 10px;
    padding: 5px 10px;
    right: 0px;
    border-radius: 0;
  }
  
  .text-aligh-right {
    text-align:left;
  }
  
  .one_half {
      width: 100%!important;
  }
  
  .one_half {
      padding-right: 0!important;
  }
  
  .one_half.last {
      padding-left: 0!important;
  }

  .one_third {
    width: 100%!important;
  } 

  .one_fourth {
    width: 100%!important;
  } 

  .one_fifth {
    width: 100%!important;
  } 

  .one_sixth {
    width: 100%!important;
  } 

  .two_fifth {
    width: 100%!important;
  } 

  .two_fourth {
    width: 100%!important;
  }   

  .two_third {
    width: 100%!important;
  } 

  .three_fifth {
    width: 100%!important;
  } 

  .three_fourth {
    width: 100%!important;
  } 

  .four_fifth {
    width: 100%!important;
  } 

  .five_sixth {
    width: 100%!important;
  } 

  .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
    margin-bottom: 20px!important;
    margin-right: 0%!important;
  }
  
  .row_padding_top {
    padding-top:10vw;
  }
  
  .row_padding_bottom {
    padding-bottom:10vw;
  }
  
  .row_padding_left {
    padding-left: 0px;
  }
  
  .row_padding_right {
    padding-right: 0px;
  }
  
  .full.row_padding_left {
    padding-left: 30px;
  }
  
  .full.row_padding_right {
    padding-right: 30px;
  }
  
  .row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .full.row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  hr {
    height: 20px;
  }
  
  .preloader-intro {
    font-size: 13vw;
    line-height: 17vw;
    height: 17vw;
  }
  
  .percentage-wrapper {
    right: 30px;
    bottom: 10px;
  }
  
  .percentage-intro {
    left: 30px;
    bottom: 10px;
  }
  
  #logo {
    left: 30px;
  }
  
  .button-wrap.right.menu.burger-lines {
    right: 0px;
  }
  
  header .button-text {
    display: none;
  }
  
  .flexnav li a {
    font-size: calc(1rem + 7vw);
    line-height: calc(1rem + 9.5vw);
  }
  
  #footer-container {
    padding: 0 30px;
  }
  
  #footer-container #backtotop.button-wrap.left {
    float: none;
    top:10px;
    left: 0;
    right: 0;
    position: absolute;
    display:block;
  }
  
  #backtotop.button-wrap.left .button-text {
    text-align: left;
    float: left;
    display: none;
  }
  
  #backtotop.button-wrap.left .icon-wrap {
    float: none;
    position: absolute;
    right: 0;
    left: auto;
    margin: auto;
    top: 0px;
  }
  
  .footer-middle {
    max-width: 1180px;
    height:20px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 100%;
    top: 0px;
  }
  
  .copyright {
    margin: 0;
    left: 10px;
    top: 10px;
    text-align:left;
  }
  
  footer.showcase-footer .arrows-wrap {
    right: auto;
    left: -30px;
    float: left;
    margin: auto;
  }
  
  footer.showcase-footer .socials-wrap {
    width: 170px;
    float: right;
    left: auto;
    right: 0;
    top: 0;
  }
  
  .socials-wrap {
    width:170px;
    float: none;
    left: -6px;
    right: auto;
    top: 10px;
    margin: 0;
  }
  
  .socials-wrap .socials {
    text-align: left;
  }
  
  .socials li {
    margin: 0 0px auto;
  }
  
}


@media only screen and (max-width: 479px) { 
  
    
  h1.big-title {
    font-size: 14vw;
    line-height: 18vw;
  }
  
  .row_padding_top {
    padding-top:12vw;
  }
  
  .row_padding_bottom {
    padding-bottom:12vw;
  }
    
  .row_padding_left {
    padding-left: 0px;
  }
  
  .row_padding_right {
    padding-right: 0px;
  }
  
  .full.row_padding_left {
    padding-left: 20px;
  }
  
  .full.row_padding_right {
    padding-right: 20px;
  }
  
  .row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .full.row_padding_all {
    padding-top: 4vw;
    padding-bottom: 4vw;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  hr {
    height: 10px;
  }
  
  .preloader-intro {
    font-size: 14vw;
    line-height: 18vw;
    height: 18vw;
  }
  
  .percentage-wrapper {
    right: 20px;
    bottom: 10px;
  }
  
  .percentage-intro {
    left: 20px;
    bottom: 10px;
  }
  
  #logo {
    left: 20px;
  }
  
  .button-wrap.right.menu {
    right: -10px;
  }
  
  .button-wrap.right.menu.burger-lines {
    right: -10px;
  }
  
  #footer-container {
    padding: 0px;
    margin:0;
  }
  
  footer.showcase-footer #footer-container {
    padding: 0px 20px;
  }
  
  .copyright {
    left: 0px;
  }
  
  .socials-wrap {
    float: none;
    left: 14px;
    right: auto;
  }
  
  .arrows-wrap {
    left: -10px;
    width: 80px;
  }
  
  .prev-wrap, .next-wrap {
      width: 40px;
  }
  
  footer.showcase-footer .arrows-wrap {
    right: 0;
    left: 0;
    float: none;
    margin: auto;
  }
  
  footer.showcase-footer .arrows-wrap {
    width: 100%;
  }
  
  footer.showcase-footer .prev-wrap, footer.showcase-footer .next-wrap {
      width: 60px;
  }
  
  footer.showcase-footer .footer-middle {
    top: 0px;
  }
  
  footer.showcase-footer .showcase-subtitles-wrap {
    left: 0;
  }
  
  footer.showcase-footer .socials-wrap {
    display:none;
  }
  
  .button-text {
    display:none;
  }
  
  #main-page-content .button-text, #hero .button-text {
    display:block;
  }
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
    
  #rotate-device {
    display:block;
  }
}
.btn-link{
  position: absolute;
  z-index: 1;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size:30px
}
.content-row.footer-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 340px;
}
.content-row.footer-cont .one_third{
    margin-right:0!important;
    text-align:center
}
.gm-style div:nth-child(2) div:nth-child(2){
        /* background:rgba(23, 23, 23,0.7); */
}
.header-content-top .socials-wrap {
    display: grid;
    place-content: center;
    align-items: center;
    padding-bottom: 25px;
    height: 100%;
    width: 100%;
    }
.header-content-top .socials-wrap:hover{transform:translateX(0)}
.header-content-top{height: 36px;position: relative;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #484848;padding: 0 70px;}
.header-content-top .socials-wrap .socials{
    margin-top: -10px;
}
.header-content-top .socials-wrap .socials li{opacity:1}
.button-wrap.right.menu.burger-lines.mobile-menu {
    display: none;
}
@media screen and (max-width:1200px){
  .button-wrap.right.menu.burger-lines{
    display: none;
    z-index: 99999999;
}
    .header-content-top{display:none}
    .button-wrap.right.menu.burger-lines.mobile-menu {
    display: block;
    position: relative;
    top: -75px;
}
  .panels-container > .panel{width: 75vw;}
}
.over-sidebar {background: #171717 !important;}
.language{display:flex;justify-content:center;align-items:center;gap: 11px;position: absolute;right: 75px;}
.language a img {
    width: 30px;
    height: auto;
}
.slowed-text h5 , .slowed-text h1 {
    color: #000;
}

footer ul.socials {
    margin-top: 35px;
    /* right: 0; */
}
.newsletter {
    background: #171717;
    display: grid;
    /* place-content: center; */
    width: 100%;
    text-align: center;
}
.newsletter div#contact-formular form {display: flex;width:100%;justify-content: center;align-items: center;flex-direction: column;}
.newsletter div#contact-formular #message{margin-bottom:20px;font-weight:700;font-size:30px}
.newsletter input{
    color: rgba(250,250,250,1) !important;
    border-bottom: 1px solid rgba(250,250,250,0.3) !important;
    }
.newsletter input:focus{color:#fff !important;}
.newsletter .input_label{background-color:#fff !important}
.newsletter  .button-border.outline{    border: solid 3px #fff !important;}
.newsletter input::placeholder{color:#fff !important}
.language a , .language span {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    transition: 0.5s;
}
.language a:hover{transition:0.5s;opacity:0.3}
.about-us{background:#fff}
.about-us .content {
    padding: 70px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}
.about-us .content .img-content{flex:1}
.about-us .content .info-content{flex:1}
.about-us .content .info-content h3{color:#000;text-align: center;}
.about-us .content .info-content .button-box{margin-top:25px;display: flex;justify-content: center;align-items: center;}
.about-us .content .info-content .button-border{border:solid 3px #000}
.about-us .content .info-content .button-border a{color:#000;padding: 20px;cursor: pointer;transition: 0.5s;}
.portfolio-wrap .button-box.has-animation.animated {
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-us .content .info-content .button-border a:hover{transition:0.5s;opacity: 0.7;}
.portfolio-wrap .button-box.has-animation.animated a{padding:20px;cursor: pointer;transition: 0.5s;}
.portfolio-wrap .button-box.has-animation.animated a:hover{transition:0.5s;opacity:0.5}
@media screen and (max-width:1200px){
  .about-us .content{flex-direction: column;}
  .about-us .content .info-content .button-box{display:flex;justify-content:center}
}
@media screen and (max-width:990px){
  .socials-wrap .socials{transform: translate(158px, -21px);}
  .content-row.footer-cont{flex-direction: column;margin-top: 60px;}
}
p.about-title {
    text-align: center;
}
.one_half h4 {
    font-size: 50px;
}
.language a.active {
    display: block;
  opacity: 1;
}
.language a{
    display:block;
  color:#fff!important;
  font-size:14px !important;
  opacity: 0.5 ;
}/*------------------------------------------------------------------
  Project:  Humpton - Creative Portfolio Template
  Version:  1.0
  Last change:  15/08/2022
  Assigned to:  www.ClaPat.com 
  Primary use:  Showcase Portfolio 
  -------------------------------------------------------------------*/
  
  @import url("css/content.css");
  @import url("css/showcase.css");
  @import url("css/portfolio.css");
  @import url("css/shortcodes.css");
  @import url("css/assets.css");
  
  
  /*------------------------------------------------------------------
  
  01. General Styles
  02. Magic Cursor
  03. Page Preloader
  04. Header Elements
  05. Main Content 
  06. Footer Elements
  07. Responsive Media Querries
  
  -------------------------------------------------------------------*/
  
    
  /*--------------------------------------------------
    01. General Settings
  ---------------------------------------------------*/
  
    html,body{
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size:16px;
      height:100%;
      width:100%;
      color:#444;
      background-color:#fff;
          }
    
    html {
      box-sizing: border-box;
      margin-right: 0px!important;
      overflow: visible!important;
    }
    
    body {
      overflow: hidden;
      overflow-y:scroll;
      -webkit-transition: opacity 0.2s ease-in-out 0.2s;
      transition: opacity 0.2s ease-in-out 0.2s;
    }
    
    body.smooth-scroll {
      overflow:hidden;
    }
    
    body.hidden {
      opacity:0;
    }
    
    main {
      -webkit-transition: background 0.5s ease-in-out 0s;
      transition: background 0.5s ease-in-out 0s;
    }
    
    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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0;
      margin: 0;
      outline: 0;
      padding: 0;
      vertical-align: baseline;
    }
    
    article,
    aside,
    details,
    figcaption,
    footer,
    header,
    hgroup,
    nav,
    section {
      display: block;
    }
    
    audio {
      display: inline-block;
      max-width: 100%;
    } 
    
    address {
      font-style: italic;
      margin-bottom: 24px;
    }
    
    abbr[title] {
      border-bottom: 1px dotted #2b2b2b;
      cursor: help;
    }
    
    b,
    strong {
      font-weight: 600;
      color:#000;
    }
    
    .light-content b, .light-content strong, .dark-section b, .dark-section strong {
      font-weight: 600;
      color:#fff;
    }
    
    .light-content .light-section b, .light-content .light-section strong {
      font-weight: 600;
      color:#000;
    }
    
    cite,
    dfn,
    em,
    i {
      font-style: italic;
    }
    
    mark, ins {
      background: none repeat scroll 0 0 #000;
      text-decoration: none;
      color: #fff;
      padding: 2px 8px;
      display: inline-block;
      border-radius: 2px;
    }
    
    .light-content mark, .light-content ins, .dark-section mark, .dark-section ins {
      background: none repeat scroll 0 0 #fff;
      color:#000;
    }
    
    .light-content .light-section mark, .light-content .light-section ins {
      background: none repeat scroll 0 0 #111;
      color:#fff;
    }
    
    code,
    kbd,
    tt,
    var,
    samp,
    pre {
      font-family: 'Raleway', sans-serif;
      font-size: 15px;
      -webkit-hyphens: none;
      -moz-hyphens:    none;
      -ms-hyphens:     none;
      hyphens:         none;
      line-height: 1.6;
    }
    
    pre {
      -webkit-box-sizing: border-box;
      -moz-box-sizing:    border-box;
      box-sizing:         border-box;
      margin-bottom: 24px;
      max-width: 100%;
      overflow: auto;
      padding: 12px;
      white-space: pre;
      white-space: pre-wrap;
      word-wrap: break-word;
      background-color:rgba(0,0,0,0.05)
    }
    
    .light-content pre, .dark-section pre {
      background-color:rgba(255,255,255,0.05);
      color:#fff;
    }
    
    .light-content .light-section pre {
      background-color:rgba(0,0,0,0.05);
      color:#000;
    }
    
    blockquote,
    q {
      -webkit-hyphens: none;
      -moz-hyphens:    none;
      -ms-hyphens:     none;
      hyphens:         none;
      quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: "";
      content: none;
    }
    
    blockquote {
      color: #000;
      line-height: 1.6;
      font-size: 1.5rem;
      margin-bottom: 2.1875rem;
      font-weight: 500;
      padding-left: 3.5rem;
      margin: 0 0 1.5625rem;
      position:relative;
    }
    
    .light-content blockquote, .dark-section blockquote {
      color: #fff;
    }
    
    .light-content .light-section blockquote {
      color: #000;
    }
    
    blockquote::before {
      content: "\275D";
      position: absolute;
      left: 0;
      top: 5px;
      line-height: 1;
      font-size: 3rem;
      font-weight: 500;
    }
    
    blockquote cite,
    blockquote small {
      color: #2b2b2b;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
    }
    
    .light-content blockquote cite, .light-content blockquote small {
      color:#fff;
    }
    
    blockquote em,
    blockquote i,
    blockquote cite {
      font-style: normal;
    }
    
    blockquote strong,
    blockquote b {
      font-weight: 600;
    }
    
    small {
      font-size: smaller;
    }
    
    big {
      font-size: 125%;
    }
    
    sup,
    sub {
      font-size: 75%;
      height: 0;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    
    sup {
      bottom: 1ex;
    }
    
    sub {
      top: .5ex;
    }
    
    dl {
      margin-bottom: 24px;
    }
    
    dt {
      font-weight: bold;
    }
    
    dd {
      margin-bottom: 24px;
    }
    
    ul,
    ol {
      list-style: none;
      margin: 0 0 24px 20px;
    }
    
    ul,
    ol {
      list-style: none;
      margin:20px 0 25px 20px;
    }
    
    ul {
      list-style: disc;
    }
    
    ol {
      list-style: decimal;
    }
    
    li > ul,
    li > ol {
      margin: 20px 0px 15px 25px;
    }
    
    li {
      line-height: 20px;
      color:#444;
      margin-bottom:25px;
    }
    
    .light-content li, .dark-section li {
      color: #ccc;
    }
    
    .light-content .light-section li {
      color: #444;
    }
    
    figure {
      margin:0;
      position:relative;
      display: block;
    }
    
    figure.has-parallax {   
      overflow:hidden;
    }
    
    .full figure.has-parallax {   
      overflow:hidden;
      height:100vh;
    }
    
    figure img {
      max-width:100%;
    }
    
    .has-parallax-content > img {
      width:100%;
      height: 100%;
      position:absolute;
      display:block;
      object-position: center; 
      object-fit: cover;
    }
    
    figcaption {
      background-color: rgba(0,0,0,0.3);
      bottom: 0px;
      color: #fff;
      font-weight:400;
      font-size: 10px;
      padding: 5px 10px;
      position: absolute;
      right: 0px;
      z-index: 10;
      border-radius:0;
    }
    
    fieldset {
      border: 1px solid rgba(0, 0, 0, 0.1);
      margin: 0 0 24px;
      padding: 0;
    }
    
    legend {
      white-space: normal;
    }
    
    button, input {
      line-height: normal;
    }
    
    input,
    textarea {
      background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
    }
    
    button, html input[type="button"], input[type="reset"], input[type="submit"] {
      cursor: pointer;
    }
    
    button[disabled],
    input[disabled] {
      cursor: default;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
      padding: 0;
    }
    
    input[type="search"] {
      -webkit-appearance: textfield;
    }
    
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    
    button::-moz-focus-inner, input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    
    textarea {
      overflow: auto;
      vertical-align: top;
    }
    
    table {
      border-collapse: separate;
      border-spacing: 0;
      border-width: 1px 0 0 1px;
      margin-bottom: 24px;  
      width: 100%;
      color:#444;
    }
    
    thead, .light-content .light-section thead {
      background-color:rgba(0,0,0,1);
      color:#fff;
    }
    
    .light-content thead, .dark-section thead {
      background-color:rgba(255,255,255,1);
    }
    
    thead tr, .light-content .light-section thead tr {
      color:#fff;
    }
    
    .light-content thead tr, .dark-section thead tr {
      color:#000;
    }
    
    tr, .light-content .light-section tr {
      color:#444;
    }
    
    .light-content tr, .dark-section tr{
      color:#CCC;
    }
    
    tr:nth-child(2n), .light-content .light-section tr:nth-child(2n) {
      background-color:rgba(0,0,0,0.05);
    }
    
    .light-content tr:nth-child(2n), .dark-section tr:nth-child(2n){
      background-color:rgba(255,255,255,0.1);
    }
    
    caption, th, td {
      font-weight: normal;
      text-align: left;
    }
    
    th {
      border-width: 0 1px 1px 0;
      padding: 10px;
    }
    
    td {
      border-width: 0 1px 1px 0;
      padding: 10px;
    }
    
    del {
      color: #767676;
    }
    
    hr {
      border: 0;
      height: 28px;
      width:100%;
      float:none;
      margin:0;
      display:inline-block;
      opacity: 1!important;
      -webkit-transition: translateY(0px)!important;
      transform: translateY(0px)!important;
    }
    
    hr.animated-line {
      height:2px;   
      padding-top:12px;
      padding-bottom:12px;
    }
    
    hr.animated-line:before {
      content: ""; 
      display: block; 
      width:0;
      height:2px;
      background:rgba(0,0,0,1);
    }
    
    .light-content hr.animated-line:before, .dark-section hr.animated-line:before {
      background:rgba(255,255,255,1);
    }
    
    .light-content .light-section hr.animated-line:before {
      background:rgba(0,0,0,1);
    }
    
    hr.animated.animated-line:before {
      width:100%;
      -webkit-transition: width 0.7s ease-in-out 0.1s;
      transition: width 0.7s ease-in-out 0.1s;
    }
    
    hr:after {
      clear: both;
      content: " ";
      display: block;
      height: 0;
      visibility: hidden;
    }
    
    ::selection {
      background: #000;
      color: #fff;
      text-shadow: none;
    }
    
    ::-moz-selection {
      background: #000;
      color: #fff;
      text-shadow: none;
    }
    
    img {
      border: 0 none;
      max-width: 100%;
      vertical-align: middle;
      height:auto;
    }
      
    h1, h2, h3, h4, h5, h6 {    
      font-weight:500;
      color:#000;
      margin-bottom:10px;
    }
    
    h1.big-title{
      font-size: 6vw;
      line-height:13vw;
      font-weight:500;
      margin-left:-0.7vw;
    }
    
    h1.big-title span {
      display:table;
      margin-top:-2vw;  
    }
    
    h1{
      font-size: calc(1rem + 4.15vw);
      line-height: calc(1rem + 5.5vw);
    }
    
    h1 span {
      display:table;
      margin-top:-0.7vw;  
    }
    
    h1.inline-title span {
      display: inline-table;
      margin-right:0.7vw;
    }
    
    h2{
      font-size: calc(1rem + 3vw);
      line-height: calc(1rem + 4.5vw);
    }
    
    h2 span {
      display:table;
      margin-top:-0.7vw;  
    }
    
    h2.inline-title span {
      display: inline-table;
      margin-right:0.7vw;
    }
    
    h3{
      font-size: calc(1rem + 2vw);
      line-height: calc(1rem + 3.5vw);
    }
    
    h3 span {
      display:table;
      margin-top:-0.7vw;  
    }
    
    h3.inline-title span {
      display: inline-table;
      margin-right:0.7vw;
    }
    
    h4{
      font-size: calc(1rem + 1vw);
      line-height: calc(1rem + 2.5vw);  
    }
    
    h5{
      font-size: calc(1rem + 0.42vw);
      line-height: calc(1rem + 1.5vw);
    }
    
    h6 {
      font-size:18px;
      line-height: 36px;
    }
    
    h6.has-icon {
      padding-left: 20px;
      box-sizing: border-box;
      display: inline-block;
      width: auto;
      position: relative;
    }
    
    h6.has-icon::before {
      font: var(--fa-font-solid);
      content: "\f101";
      font-size: 12px;
      line-height: inherit;
      text-align: left;
      position: absolute;
      left: 0;
    }
    
    .no-margins {
      margin:0;
    }
    
    .light-content h1, .light-content h2, .light-content h3, .light-content h4, .light-content h5, .light-content h6, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6 {
      color: #fff;
    }
    
    .light-content .light-section h1, .light-content .light-section h2, .light-content .light-section h3, .light-content .light-section h4, .light-content .light-section h5, .light-content .light-section h6 {
      color: #000;
    }
    
    p {
      font-size:18px;
      line-height: 36px;
      /* margin-bottom: 25px; */
      color:#444;
    }
    
    .light-content p, .dark-section p{
      color:#aaa;
    }
    
    .light-content .light-section p {
      color:#444;
    }
    
    .bigger {
      font-size: 18px;
      line-height: 32px;
    }
    
    .smaller {
      font-size: 12px;
      line-height: 24px;
    }
    
    .container {
      max-width:1280px;
      width:100%;
      margin:0 auto;
      box-sizing:border-box;
    }
    
    .container::after {
      clear: both;
      content: " ";
      display: table;
    }
    
    a:hover, a:active {
      outline: 0;
      color: #000;
    }
    
    a, .light-content .light-section a {
      text-decoration: none;
      color: #000;
      outline: 0;
    }
    
    .light-content a, .dark-section a, .white-header a {
      color: #000;
    }
    
    .light-content .white-header a {
      /* color:#000; */
    }
    
    a:hover {
      text-decoration:none;
    }
    
    .one_half {
      width: 48%!important;
    } 
  
    .one_third {
      width: 30.6%!important;
    } 
  
    .one_fourth {
      width: 22%!important;
    } 
  
    .one_fifth {
      width: 16.8%!important;
    } 
  
    .one_sixth {
      width: 13.33%!important;
    } 
  
    .two_fifth {
      width: 37.6%!important;
    } 
  
    .two_fourth {
      width: 48%!important;
    }   
  
    .two_third {
      width: 65.33%!important;
    } 
  
    .three_fifth {
      width: 58.4%!important;
    } 
  
    .three_fourth {
      width: 74%!important;
    } 
  
    .four_fifth {
      width: 79.2%!important;
    } 
  
    .five_sixth {
      width: 82.67%!important;
    } 
  
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
      float: left!important;
      margin-bottom: 10px!important;
      margin-right: 4%!important;
      position: relative!important;
    }
  
    .last {
      margin-right:0px!important;
    }
    
    .text-align-left {
      text-align:left;
    }
    
    .text-align-center {
      text-align:center;
    }
    
    .text-align-right {
      text-align:right;
    }
    
    .outer {
      display:table;
      width:100%;
      height:100%;
    }
    
    .inner {
      display:table-cell;
      vertical-align:middle;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }
    
    .light-section-wrapper, .dark-section-wrapper {
      margin-left: calc(50% - 50vw)!important;
      margin-right: calc(50% - 50vw)!important;
      max-width: 1000%!important;
      width: 100vw!important;
    }
    
    .light-section-container, .dark-section-container {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
    }
    
    .content-row {
      position:relative;
      width: 75%;
      margin:0 auto;
      z-index:1;
      opacity:1;
      box-sizing:border-box;
    }
    
    .content-row::after {
      clear: both;
      content: " ";
      display: table;
    }
    
    .small {
      max-width:780px;
      width:100%;
      margin:0 auto;
    }
    
    .large {
      max-width:1380px;
      width:100%;
      margin:0 auto;
    }
    
    .full {
      margin-left: calc(50% - 50vw)!important;
      margin-right: calc(50% - 50vw)!important;
      max-width: 1000%!important;
      width: 100vw!important;
    }
    
    .row_padding_top {
      padding-top:8vw;
    }
    
    .row_padding_bottom {
      padding-bottom:8vw;
    }
    
    .row_padding_left {
      padding-left:80px;
    }
    
    .row_padding_right {
      padding-right:80px;
    }
    
    .row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 80px;
      padding-right: 80px;
    }
    
    #rotate-device {
      width:100%;
      height:100%;
      position:fixed;
      z-index:1000;
      top:0;
      left:0;
      background-color:#0f1010;
      background-image:url(images/rotate.png);
      background-size:100px 100px;
      background-position:center;
      background-repeat:no-repeat;
      display:none;
    }
    
    i.arrow-icon {
      border: solid #000;
      border-width: 0px 3px 3px 0px;
      box-sizing:border-box;
      display: block;
      position:relative;
      top:0px;
      left:0px;
      height: 15px;
      width: 15px;
    }
    
    .light-content i.arrow-icon, .dark-content .item i.arrow-icon {
      border: solid #fff;
      border-width: 0px 3px 3px 0px;
    }
    
    .light-content .change-header i.arrow-icon, .dark-content .change-header i.arrow-icon {
      border: solid #000;
      border-width: 0px 3px 3px 0px;
    }
    
    i.arrow-icon::after {
      content: "";
      position: absolute;
      width: 33px;
      height: 3px;
      top: 0px;
      left: -15px;
      background-color: #000;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    
    .light-content i.arrow-icon:after, .light-content .change-header i.arrow-icon::after, .dark-content .item i.arrow-icon::after {
      background-color: #fff;
    }
    
    .light-content .change-header i.arrow-icon::after, .dark-content .change-header i.arrow-icon::after {
      background-color:#000;
    }
  
  /*--------------------------------------------------
    02. Magic Cursor
  ---------------------------------------------------*/ 
    
    
    #magic-cursor {
      position: absolute;
      left:0;
      top:0;
      width: 30px;
      height: 30px;
      pointer-events: none;
      z-index:10000;
      -webkit-transition: opacity 0.2s ease-in-out 0.5s;
      transition: opacity 0.2s ease-in-out 0.5s;
    }
    
    .hidden-ball #magic-cursor {
      opacity:0!important;
      visibility:hidden;
    }
    
    #ball {
      position: fixed;
      width: 80px;
      height: 80px;
      border: 2px solid #999999;
      border-radius: 50%;
      pointer-events: none;
      opacity:1;
      box-sizing:border-box;
       -webkit-transform: scale(0.5);
        transform: scale(0.5);  
    }
    
    .mfp-zoom-out-cur #ball {
      opacity:0;
      -webkit-transition: opacity 0.2s ease-in-out 0s;
      transition: opacity 0.2s ease-in-out 0s;
    }
    
    .light-content #ball, #ball.over-movie,  .light-content #ball.with-icon {
      border: 2px solid #999999;
      border-color:#999999;
    }
    
    #ball:before {
      font: var(--fa-font-solid);
      content: "\f106";
      font-size:14px;
      width:8px;
      height:16px;
      line-height:16px;
      text-align:center;
      position:absolute;
      left: 32px;
      top: -42px;
      color:#999;
      opacity:0;
      transform: translateY(-20px);
      -webkit-transform: translateY(-20px);
      transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball:before {
      color:#999;
    }
    
    #ball::after {
      font: var(--fa-font-solid);
      content: "\f107";
      font-size: 14px;
      width: 8px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      position: absolute;
      left: 32px;
      top: 100px;
      color: #999;
      opacity:0;
      transform: translateY(20px);
      -webkit-transform: translateY(20px);
      transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball:before, .light-content #ball:after {
      color:#999;
    }
    
    .scale-up #ball:before, .scale-drag-horizontal #ball:before {
      opacity:1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-drag-horizontal #ball:before {
      color: #fff;
    }
    
    .scale-up #ball:after, .scale-drag-horizontal #ball:after {
      opacity:1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-drag-horizontal #ball:after {
      color: #fff;
    }
    
    .scale-up.scale-none #ball:before, .scale-up.scale-none #ball:after {
      opacity:0;
    }
    
    #ball-drag-x {
      position: absolute;
      width: 72px;
      height: 72px;
      pointer-events: none;
      opacity:1;
      box-sizing:border-box;  
    }
    
    #ball-drag-x::before {
      font: var(--fa-font-solid);
      content: "\f053";
      font-size: 14px;
      width: 8px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      position: absolute;
      left: -37px;
      top: 30px;
      color: #000;
      opacity: 0;
      transform: translateX(-20px);
      -webkit-transform: translateX(-20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball-drag-x:before {
      color:#fff;
    }
    
    #ball-drag-x::after {
      font: var(--fa-font-solid);
      content: "\f054";
      font-size: 14px;
      width: 8px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      position: absolute;
      right: -40px;
      left: auto;
      top: 30px;
      color: #000;
      opacity: 0;
      transform: translateX(20px);
      -webkit-transform: translateX(20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball-drag-x:before, .light-content #ball-drag-x:after {
      color:#fff;
    }
    
    .drag-cursor-white #ball-drag-x:before, .drag-cursor-white #ball-drag-x:after {
      color:#fff;
    }
    
    .drag-cursor-black #ball-drag-x:before, .drag-cursor-black #ball-drag-x:after {
      color:#000;
    }
    
    .scale-drag-x #ball-drag-x:before {
      opacity:1;
      transform: translateX(0px);
      -webkit-transform: translateX(0px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-drag-x #ball-drag-x:after {
      opacity:1;
      transform: translateX(0px);
      -webkit-transform: translateX(0px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-up.scale-drag #ball-drag-x:before, .scale-up.scale-drag #ball-drag-x:after {
      opacity:0;
    }
    
    #ball-drag-y {
      position: absolute;
      width: 72px;
      height: 72px;
      pointer-events: none;
      opacity:1;
      box-sizing:border-box;  
    }
    
    #ball-drag-y:before {
      font: var(--fa-font-solid);
      content: "\f077";
      font-size:14px;
      width:8px;
      height:16px;
      line-height:16px;
      text-align:center;
      position:absolute;
      left: 32px;
      top: -40px;
      color:#000;
      opacity:0;
      transform: translateY(-20px);
      -webkit-transform: translateY(-20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball-drag-y:before {
      color:#fff;
    }
    
    #ball-drag-y::after {
      font: var(--fa-font-solid);
      content: "\f078";
      font-size: 14px;
      width: 8px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      position: absolute;
      left: 32px;
      top: 100px;
      color: #000;
      opacity:0;
      transform: translateY(20px);
      -webkit-transform: translateY(20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball-drag-y:before, .light-content #ball-drag-y:after {
      color:#fff;
    }
    
    .scale-drag-y #ball-drag-y:before {
      opacity:1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-drag-y #ball-drag-y:after {
      opacity:1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .scale-up.scale-drag #ball-drag-y:before, .scale-up.scale-drag #ball-drag-y:after {
      opacity:0;
    }
    
    #ball i {
      color:#fff;
      width:76px;
      height:80px;
      line-height:78px;
      text-align:center;
      font-size:14px;
      display:block;
      opacity:1;
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    #ball p {
      color:#fff;
      width:66px;
      height:16px;
      line-height:16px;
      padding-top:0px;
      padding-left:5px;
      margin:0;
      text-align:center;
      font-size:12px;
      font-weight:600;
      display:block;
      opacity:1;
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content #ball p {
      color:#fff;
    }
    
    #ball p.first {
      padding-top:22px;
    }
    
    .light-content #ball i, #ball.over-movie i, .light-content #ball.with-icon i {
      color:#fff;
    }
    
    .drag-cursor-white #ball i, .drag-cursor-white #ball.with-icon i {
      color:#fff;
    }
    
    .drag-cursor-black #ball i, .drag-cursor-black #ball.with-icon i {
      color:#000;
    }
    
    .light-content #ball.with-icon.dark-icon i {
      color:#000;
    }
    
    .scale-up #ball i {
      opacity:0;
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    #ball.with-icon i {
      width:76px;
    }
    
    #ball.with-icon i:nth-child(2) {
      display:none;
    }
    
    #ball.close-icon i {
      width:75px;
      height:76px;
      font-size:14px;
    }
    
    #ball.over-movie i.fa-play, #ball.over-movie.pause-movie i.fa-pause {
      display:block;
    }
    
    #ball.over-movie i.fa-pause, #ball.over-movie.pause-movie i.fa-play {
      display:none;
    }
    
    #ball-loader {
      width: 100px;
      height: 100px;
      position:absolute;
      background-color: transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid #999999;
      border-left: 4px solid transparent;
      border-top: 4px solid transparent;
      border-radius: 100px;
      box-sizing: border-box;
      opacity:0;
      -webkit-transform: translate(-14px, -14px) rotate(0deg);
      transform: translate(-14px, -14px) rotate(0deg);
      -webkit-animation: rotating 0.8s ease-in-out infinite;
      animation: rotating 0.8s ease-in-out infinite;
      -webkit-transition: opacity 0s ease-in-out 0s;
      transition: opacity 0s ease-in-out 0s;
    }
    
    .light-content #ball-loader { 
      border-bottom: 4px solid #999999;
    }
    
    .show-loader #ball-loader {
      opacity:1;
      -webkit-transition: opacity 0.2s ease-in-out 0s;
      transition: opacity 0.2s ease-in-out 0s;
    }
    
    @keyframes rotating {
      0% {
      -webkit-transform: translate(-14px, -14px)rotate(0deg);
      transform:  translate(-14px, -14px) rotate(0deg);
      }
      
      95% {
      -webkit-transform:  translate(-14px, -14px) rotate(350deg);
      transform:  translate(-14px, -14px) rotate(350deg);
      }
      
      100% {
      -webkit-transform:  translate(-14px, -14px) rotate(360deg);
      transform:  translate(-14px, -14px) rotate(360deg);
      }
    }
    
    .show-loader a, .show-loader nav, .scale-up a, .scale-up .hide-ball, scale-up .link, .scale-up .button-wrap, .scale-up #burger-wrapper, .scale-up .disable-drag, .scale-drag a, .scale-drag .move-title {
      pointer-events:none!important;
    }
    
    .disable-cursor #magic-cursor {
      display:none;
    }
    
    #ball i.arrow-icon {
      border: solid #000;
      border-width: 3px 3px 0px 0px;
      box-sizing:border-box;
      display: block;
      position:absolute;
      top:28px;
      left:30px;
      height:20px;
      width:20px;
    }
    
    .light-content #ball i.arrow-icon {
      border: solid #fff;
      border-width: 3px 3px 0px 0px;
    }
    
    #ball i.arrow-icon:after {
      content:"";
      position:absolute;
      width:30px;
      height:3px;
      top:8px;
        left:-8px;
      background-color:#000;
      transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    .light-content #ball i.arrow-icon:after {
      background-color:#fff;
    }
    
    
  /*--------------------------------------------------
    03. Page Preloader
  ---------------------------------------------------*/ 
    
    .disable-ajaxload .preloader-wrap {
      display:none;
    }
    
    .preloader-wrap {
      width: 100%;
      height:100%;
      position: fixed;
      top: 0; 
      bottom: 0;
      background: #000;
      z-index : 1800;
      text-align:center;
    }
    
    .preloader-wrap .outer {
      padding: 0px;
      box-sizing:border-box;
    }
    
    .preloader-wrap .inner {
      vertical-align:middle;
      box-sizing:border-box;
    }
    
    .percentage-wrapper {
      height: 20px;
      position:absolute;
      margin-bottom: 20px;
      right:80px;
      bottom:40px;
    }
    
    .percentage-intro {
      height: 20px;
      position:absolute;
      margin-bottom: 20px;
      left:80px;
      bottom:40px;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      color:rgba(255,255,255,0.6);
    }
    
    .percentage {
      opacity: 1;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      width:30px;
      height: 100px;
      color:rgba(255,255,255,0.6);
      display: table;
      margin: 0 auto;
    }
    
    .percentage::after {
      content: "%";
      width: 20px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      color:rgba(255,255,255,0.6);
    }
    
    .trackbar {
      width: auto;
      height: auto;
      margin:0 auto;
      display:table;
      position: relative;
      padding:20px;
      opacity: 1;
      overflow:hidden;
    }
    
    .loadbar {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0);
      position: absolute;
      top: 0px;
      right: 0;
      overflow: hidden;
    }
    
    .hold-progress-bar {
      width: 0%;
      height: 0px;
      background: rgba(0,0,0,1);
      position: absolute;
      top: 0px;
      left: 0;
      right:0;
      overflow: hidden;
    }
    
    .preloader-intro {
      font-weight:500;
      position: relative;
      display:block;
      font-size:10vw;
      line-height:13vw;
      height:13vw;
      color:#fff;
      overflow:hidden;
      margin:0;
    }
    
    .preloader-intro li {
      list-style:none;
      line-height:inherit;
      margin:0;
      color:#fff;
    }
    
  /*--------------------------------------------------
    04. Header Elements
  ---------------------------------------------------*/ 
    
      
    header {
      width:100%;
      height: 124px;
      left:0;
      top:0;
      background-color: rgba(23, 23, 23,75%) !important;
      position: fixed;
      box-sizing:border-box;
      z-index:1000;
      -webkit-transition: background 0.4s ease-in-out 0.3s;
      transition: background 0s ease-in-out 0s;
    }
    
    #header-container {
      box-sizing: border-box;
      height: inherit;
      padding: 18px 80px;
      margin: 0 auto;
      position: relative;
      width: 100%;
      z-index: 20;
      opacity: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header-visible #header-container{
      opacity:1;
      height: 80px;
    }
    
    #logo {
      position: relative;
      display: table;
      pointer-events: initial;
      z-index: 10;
      /* top: 15px; */
      float: left;
    }
    
    #logo a {
      display:block;
      -webkit-transition: transform 0.5s ease-in-out 0.1s;
      transition: transform 0.5s ease-in-out 0.1s;  
    }
    
    #logo a.disable, .open #logo a {
      pointer-events: none;
    }
    
    #logo img {
      display: block;
      height: 84px;
      width: auto;
      max-width:none;
      -webkit-transition: opacity 0.15s ease-in-out 0s;
      transition: opacity 0.15s ease-in-out 0s;
    }
    
    #logo img.black-logo {
      opacity:1;
    }
    
    .light-content #logo img.black-logo {
      opacity:0;
    }
    
    #logo img.white-logo {
      /* position:absolute; */
      top:0;
      left:0;
      opacity:0;
    }
    
    
    .white-header #logo img.black-logo {
      opacity:0;
    }
    
    .light-content .white-header #logo img.black-logo {
      opacity:1;
    }
    
    .light-content .white-header.over-white-section #logo img.black-logo, .show-loader1 .light-content .white-header #logo img.black-logo {
      opacity:0;
    }
    
    .white-header #logo img.white-logo {
      opacity:1;
    }
    
  
    
    .light-content .white-header.over-white-section #logo img.white-logo, .show-loader1 .light-content .white-header #logo img.white-logo {
      opacity:1;
    }
    
    .menu-open.light-content .slide-in #logo img.white-logo {
      opacity:1;
    }
    
    nav {
      pointer-events: none;
    }
    
    nav.open {
      pointer-events: initial;
    }
    
    .dark-content-header #logo img.black-logo {
      opacity:1!important;
    }
    
    .dark-content-header #logo img.white-logo {
      opacity:0!important;
    }
    
    .light-content-header #logo img.black-logo {
      opacity:0!important;
    }
    
    .light-content-header #logo img.white-logo {
      opacity:1!important;
    }
    
    @media all and (min-width: 1025px) {
      
      .classic-menu nav {
        position: relative;
        width: auto;
        top: 0px;
        -webkit-transition: all 0.2s ease-in-out 0.5s;
        transition: all 0.2s ease-in-out 0.5s;
        display:block;
        float:right;
        height: 60px;
        margin: 10px 0;
        background-color:transparent!important;
      }
      
      .classic-menu .flexnav {
        display: block;
        float: right;
        position: relative;
        width: auto;
        max-height: 60px;
      }
      
      .classic-menu .flexnav li ul {   
        min-width: 180px;
      } 
      
      .classic-menu .flexnav .touch-button {
        background: transparent none repeat scroll 0 0;
      } 
      
      .flexnav .touch-button .navicon {
        display:none;
      }
      
      .classic-menu .flexnav li {    
        background: transparent none repeat scroll 0 0;
        padding:0 25px;
        padding-bottom:20px;
        padding-top:20px;
      }
      
      .classic-menu .menu-timeline {
        opacity:1!important;
        -webkit-transition: translateY(0px)!important;
        transform: translateY(0px)!important;
        pointer-events:initial;
      }
      
      .classic-menu .flexnav li:last-child {
        padding-right:0px;
      }
      
      .classic-menu .before-span {
        opacity:1!important;
        -webkit-transition: translateY(0px)!important;
        transform: translateY(0px)!important;
        
      }
      
      .classic-menu .flexnav li a {    
        background: transparent none repeat scroll 0 0;
        padding: 0 5px;
        position:relative;
        border-left: medium none;
        color:#000;   
        font-size:16px;
        font-weight:500;
        line-height:20px;
        display:block;
        overflow:hidden;
        -webkit-transition: all 0.15s ease-in-out;
        transition: all 0.15s ease-in-out;
      }
      
      .light-content .classic-menu .flexnav li a { 
        color:#fff;   
      }
      
      .light-content  .classic-menu.white-header .flexnav li a { 
        color:#000;   
      }
      
      .classic-menu.white-header .flexnav li a { 
        color:#fff;   
      }
      
      .flexnav:hover li a {
        color: rgba(0,0,0,0.4);
      }
      
      .light-content .classic-menu .flexnav:hover li a {
        color: rgba(255,255,255,0.4);
      }
      
      .classic-menu.white-header .flexnav:hover li a {
        color: rgba(255,255,255,0.4);
      }
      
      .light-content  .classic-menu.white-header .flexnav:hover li a {
        color: rgba(0,0,0,0.4); 
      }
      
      .classic-menu .flexnav li:hover a {
        color:#000;
      }
      
      .light-content .classic-menu .flexnav li:hover a {
        color:#fff;
      }
      
      .classic-menu.white-header .flexnav li:hover a {
        color:#fff;
      }
      
      .light-content .classic-menu.white-header .flexnav li:hover a {
        color:#000;
      }
    
      .classic-menu .flexnav li a span {
        position: relative;
        display: block;
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transform-origin: 100% 0%;
      }
      
      .classic-menu .flexnav li a span::before {
        position: absolute;
        top: 100%;
        width:100%;
        left:0;
        content: attr(data-hover);
      }
      
      .classic-menu .flexnav li:hover a span {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        transform-origin: 0% 0%;
      }
      
      .classic-menu .flexnav li ul li a { 
        padding:0 20px 20px;
        background-color:transparent;
        font-size:14px;
        font-weight:500;
        text-transform:none;
        color:#fff!important;
        opacity:0.6;
        -webkit-transition: all 0.05s ease-in-out;
        -moz-transition: all 0.05s ease-in-out;
        -o-transition: all 0.05s ease-in-out;
        -ms-transition: all 0.05s ease-in-out;
        transition: all 0.05s ease-in-out;
      }
      
      .classic-menu .flexnav li ul li a.link::before {
        display:none;
      }
      
      .classic-menu .flexnav li ul li a.active, .classic-menu .flexnav li ul li a:hover {
        opacity:1;
      }
      
      .classic-menu .flexnav li > ul li {
        margin-left:0;
        padding:0;
        opacity: 1 !important;
        transform: none !important;
      }
      
      .classic-menu .flexnav li ul {
        -webkit-transform: translate3d(0px, 30px, 0px);
        transform: translate3d(0px, 30px, 0px);
        display:block!important;
        opacity:0!important;
        height:inherit!important;
        overflow:visible!important;
        visibility:hidden;
        left:15px;
        top:60px;
        padding-top:20px;
        background: #000;   
        border-radius:3px;
        -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
      }
      
      .classic-menu .flexnav li:last-child ul {
        left:auto;
        right:-10px;
      }
      
      .classic-menu .flexnav li ul ul {
        left:5px!important;
  
      }
      
      .classic-menu .flexnav li ul:after {
        display: block;
        content: '';
        position: absolute;
        top: -6px;
        left: 20px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 9px;
        border-color: transparent transparent #000;
      }
      
      .classic-menu .flexnav li:last-child ul:after {
        left: auto;
        right: 20px;
      }
      
      .classic-menu .flexnav ul li ul:after {
        display: block;
        content: '';
        position: absolute;
        top: 15px;
        left: -10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 9px;
        border-color: transparent transparent #000;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
      
      .classic-menu .flexnav li ul li > ul, .classic-menu .flexnav li ul.open ul.open {
        top: -5px;
        z-index:10;
      }
      
      .classic-menu .flexnav li:last-child ul li > ul, .classic-menu .flexnav li:last-child ul.open ul.open {
        margin-left: -100%;
        left:-5px!important;
        right:auto;
        top: 0;
      }
      
      .classic-menu .flexnav li:last-child ul li ul::after {
        right: -10px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
      
      .classic-menu .flexnav ul li ul li a {
        background: #000;
      }
      
      .classic-menu .flexnav ul li ul li ul li a {
        background: #000;
      }
      
      .classic-menu .flexnav li ul.flexnav-show {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
        opacity:1!important;
        visibility:visible;
        -webkit-transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;
        transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;  
      }
      
      .classic-menu .flexnav .touch-button {
        display:none;
      }
          
      
      /*-- Full Screen Menu --*/  
          
      .fullscreen-menu .nav-height {
        overflow-y: scroll;
        position: relative;
        height: 100%;
        padding: 40px 0;
        padding-right: 30px;
        width: calc(100% + 30px);
        box-sizing: border-box;
      }
      
      .fullscreen-menu nav {
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        box-sizing: border-box;
        visibility: visible;
        pointer-events:none;
        opacity:0;
        padding:20px 0;   
        -webkit-transition: all 0.2s ease-in 0.6s;
        transition: all 0.2s ease-in 0.6s;
      }
      
      .fullscreen-menu nav.open {
        visibility:visible;
        pointer-events:initial;
        opacity:1;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
      }
      
      .fullscreen-menu .flexnav {
        max-height: 2000px;
        -webkit-transition: all 0.2s ease-in 0.6s;
        transition: all 0.2s ease-in 0.6s;
        display: table;
        width: 100%;
        padding:0 20px;
        box-sizing:border-box;
        margin: 0 auto;
        float: none;
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 50px;
      }
      
      .fullscreen-menu .flexnav.flexnav-show {
        -webkit-transition: all .3s ease-out 0.2s;
        transition: all .3s ease-out 0.2s;  
      }
      
      .fullscreen-menu .flexnav li {
        text-align:center;
        padding:0;
        box-sizing:border-box;
        float:none;     
      }
      
      .fullscreen-menu .menu-timeline {
        opacity:0;
      }
      
      .fullscreen-menu .flexnav .touch-button {
        width: 100%;
        display: block;
        height:100px;
      }
      
      .fullscreen-menu .flexnav li ul li .touch-button {
        height:32px;
      }
      
      .fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
        opacity:1;
      }
      
      .fullscreen-menu .flexnav .touch-button .navicon {
        display:none;
      }
      
      .fullscreen-menu .flexnav li.link {
        border-bottom: none;  
      }
      
      .fullscreen-menu .flexnav li a {
        font-weight: 500;
        font-size: calc(1rem + 4.15vw);
        /* line-height: calc(1rem + 5.5vw); */
        padding:0;
        -webkit-transition: all .1s ease-in-out 0s;
        transition: all .1s ease-in-out 0s;
      }
      
      @media only screen and (max-width: 1466px) {
    
        .fullscreen-menu .flexnav li a {
          font-size: calc(1rem + 5.15vw);
          line-height: calc(1rem + 7vw);
        }
    
      }
      
      .fullscreen-menu .flexnav li a {
        color:#000;
      }
      
      .fullscreen-menu.invert-header .flexnav li a {
        opacity: 1;
        color: #fff;
        font-size: 17px;
        /* transition: 0.5s; */
      }
      
      .fullscreen-menu .flexnav:hover li a, .fullscreen-menu .flexnav.hover li a {
        /* opacity:0.3; */
      }
      
      .fullscreen-menu .flexnav li:hover a, .fullscreen-menu .flexnav li a.active{
        /* opacity:1; */
      }
      
      .fullscreen-menu .flexnav:hover li ul li a {
        opacity:0.3;
      }
      
      .fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
        opacity:1;
      }
      
      .fullscreen-menu .flexnav a.link::before {
        display:none;
      }
      
      .fullscreen-menu .flexnav li ul {
        margin-bottom:20px;
        /* position:relative; */
        left:0;
      }
      
      .fullscreen-menu .flexnav li ul:after {
        display:none;
      }
      
      .fullscreen-menu .flexnav li ul li a {
        padding: 6px 0;
        font-size: 16px;
        line-height:28px;
        font-weight:500;
        border-top: none;
        text-transform:none;
      }
      
      .fullscreen-menu .flexnav ul li ul li a {
        background:transparent;
      }
      
      .fullscreen-menu .flexnav li ul li > ul, .fullscreen-menu .flexnav li ul.open ul.open {
        margin-left: 0;
        top: 0;
      }
      
      .fullscreen-menu .menu-timeline {
        opacity:1;
      }
      
      .fullscreen-menu .menu-timeline .before-span {
        opacity: 1 !important;
        display:block;
        -webkit-transform: translateY(120px);
        transform: translateY(0) !important;
      }
      
      .fullscreen-menu .flexnav li, .fullscreen-menu .flexnav li a  {
        background-color:transparent;
        border:0;
      }
      
      .fullscreen-menu .flexnav li a span {
        position: relative;
        display: block;
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transform-origin: 100% 0%;
        overflow:hidden;
      }
      
      .fullscreen-menu .open .flexnav li a span {
        overflow:visible;
      }
      
      .fullscreen-menu .flexnav li a span::before {
        position: absolute;
        top: 100%;
        width:100%;
        left:0;
        content: attr(data-hover);
      }
      
      
      
      .fullscreen-menu .flexnav li.hover a  span {
        -webkit-transform: translateY(-100%)!important;
        transform: translateY(-100%)!important;
        transform-origin: 0% 0%;
      }
    
    }
  
    nav, nav.open {
      -webkit-transition: all 0s ease-in 0s;
      transition: all 0s ease-in 0s;
      background:transparent;
    }
  
    #burger-wrapper {
      width: 40px;
      height: 40px;
      float: right;
      top: 0px;
      right: 0;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      pointer-events: initial;
    }
    
    .classic-menu .button-wrap.right.menu {
      display:none;
    }
  
    .burger-dots #menu-burger {
      top:0px;
      width: 25px;
      height: 25px;
      position: relative;
      margin: 0 auto;   
      z-index:2;
      pointer-events: none;
    }
    
    .menu-overlay #menu-burger {
      display:block;
    }
  
    .burger-dots #menu-burger span {
      display: block;
      position: absolute;
      height: 5px;
      width: 5px;
      border-radius:5px;
      background-color: #000;
      opacity: 1;
      top:10px;
      left:0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
      transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
    }
    
    #burger-wrapper .touch-button {
      display:none;
    }
  
    .burger-dots #menu-burger span:nth-child(1) {
        left: 0px;
    }
    
    .burger-dots #menu-burger span:nth-child(2){
        left: 10px;
    }
    
    .burger-dots #menu-burger span:nth-child(3){
        left: 20px;
    }
    
    .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(1) {
        left: 10px;
    }
    
    .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(3) {
        left: 10px;
    }
    
    .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(1) {
        left: 3px;
    }
    
    .button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(3) {
        left: 3px;
    }
    
    .burger-dots #menu-burger.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      top:12px;
      height: 2px;
      width:20px;
      left: 3px;
    }
    
    .burger-dots #menu-burger.open span:nth-child(2) {
       -webkit-transform: scale(0);
      transform: scale(0);
    }
    
    .burger-dots #menu-burger.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top:12px;
      height: 2px;
      width:20px;
      left: 3px;
    }
    
    .button-wrap.right.burger-lines {
      right: -30px;
    }
    
    .burger-lines #menu-burger {
      width: 16px;
      height: 22px;
      position: relative;
      margin: 0 auto;   
      z-index:2;
      pointer-events: none;
    }
    
    .burger-lines #menu-burger span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      opacity: 1;
      right: 0;
      background-color:#000;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
      transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
    }
    
    .burger-lines #menu-burger span:nth-child(1) {
      top: 7px;
    }
    
    .burger-lines #menu-burger span:nth-child(2){
      top: 15px;
    }
    
    .burger-lines #menu-burger span:nth-child(3){
      display:none;
    }
    
    .burger-lines #menu-burger.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top:10px;
    }
    
    .burger-lines #menu-burger.open span:nth-child(2) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top:10px;
    }
    
    .light-content #menu-burger span {
      background-color:#fff;
    }
    
    .white-header #menu-burger span {
      background-color:#fff;
    }
    
    .light-content .white-header #menu-burger span {
      background-color: #fff;
    }
    
    .light-content .white-header.over-white-section #menu-burger span, .show-loader1 .light-content .white-header #menu-burger span {
      background-color:#fff;
    }
    
    .dark-content-header #menu-burger span {
      background-color:#000!important;
    }
    
    .light-content-header #menu-burger span {
      background-color:#fff!important;
    }
    
    .dark-content-header .button-text {
      color:#000!important;
    }
    
    .light-content-header .button-text {
      color:#fff!important;
    }
    
    
  /*--------------------------------------------------
    05. Main Content
  ---------------------------------------------------*/   
    
    #content-scroll {
      z-index:1;
      position:relative;
    }
    
    .smooth-scroll #content-scroll {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index:1;    
      overflow:hidden; 
    }
    
    .scroll-content {
      cursor:default!important;
    }
    
    .scale-up .scroll-content {
      cursor:grabbing!important;
    }
    
    .scrollbar-track {
      background: transparent!important;
    }
    
    
  /*--------------------------------------------------
    06. Footer Elements
  ---------------------------------------------------*/   
    
    footer {
      position:relative;
      width:100%;
      height:120px;
      z-index:900;
      box-sizing:border-box;
      text-align:center;
      bottom:0;
      left:0;
      overflow:hidden;
      pointer-events:none;
    }
    
    footer.fixed {
      position:fixed;
    }
    
    footer.showcase-footer{
      position: relative;
    }
    
    #footer-container {
      padding: 0 80px;
      /* margin: 5px auto; */
      height: 68px;
      opacity: 0;
      /* position: absolute; */
      width: 100%;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .footer-middle {
      position: absolute;
      margin: 0 auto;
      width: 100%;
      height: inherit;
      display: table;
      left: 0;
      pointer-events: none;;
    }
    
    .copyright {
      position: relative;
      top: 25px;
      width: auto;
      height: 30px;
      overflow: hidden;
      font-size: 14px;
      line-height: 30px;
      font-weight: 500;
      color: #fff;
      pointer-events: initial;
      display: table;
      width: auto;
      padding: 0px 20px 0px 20px;
      max-width: 820px;
      box-sizing:border-box;
      text-align:center;
      margin: 0 auto;
    }
    
    .light-content .copyright {
      color:#fff;
    }
    
    .socials-wrap {
      position:relative;
      float: right;
      color: #fff;
      width: 240px;
      height: 160px;
      box-sizing: border-box;
      pointer-events:initial;
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .light-content .socials-wrap {
      color: #fff;
    }
    
    footer .socials-wrap {
      margin-top:0px;
    }
    
    .socials-wrap:hover {
      transform: translateY(-40px);
      -webkit-transform: translateY(-40px);
    }
    
    .socials-text {
      float:right;
      font-size:14px;
      font-weight: 500;
      line-height:40px;
      transform: translateY(73px);
    }
    
    .socials-wrap:hover .socials-text {
      transform: translateY(15px) translateX(5px);
      -webkit-transform: translateY(15px) translateX(5px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;    
    }
    
    .socials-icon {
      float:right;
      width:30px;
      height:40px;
      font-size:14px;
      line-height:40px;
      text-align:right;
      margin-left:10px;
      transform:scale(1) translateY(20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .socials-wrap:hover .socials-icon {
      transform:scale(0) translateY(40px);
      width:0;
      margin:0;
      overflow:hidden;
      
    }
    
    .socials-icon:after, .socials-text:after {
      content: "";
      clear: both;
      display: table;
    }
    
    .socials {
      height: auto;
      line-height: 30px;
      position: relative;
      width: auto;
      margin:0 auto;
      margin-top: 10px;
      text-align: center;
      bottom: 0;
      display: table;
      transform: translateX(15px);
      -webkit-transform: translateX(15px);
    }
    
    .socials-wrap .socials {
      display: inline-block;
      width: 100%;
      text-align: right;
    }
    
    .socials li {
      margin-right: 0px;
      margin-left: 10px;
      list-style: none;
      color: #999;
      font-size: 15px;
      margin-bottom: 0;
      line-height: 40px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      width: 40px;
      float: right;
      z-index: 2;
      -webkit-transition: background 0.4s ease-in-out 0s;
      transition: background 0.4s ease-in-out 0s;
    }
    
    .socials-wrap .socials li {
      opacity:0;
      transform: translateY(20px);
      -webkit-transform: translateY(20px);
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    
    .socials-wrap:hover .socials li:nth-child(5) {
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
      opacity:1;
      transform: translateY(10px);
      -webkit-transform: translateY(10px);    
    }
    
    .socials-wrap:hover .socials li:nth-child(4) {
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
      opacity:1;
      transform: translateY(10px);
      -webkit-transform: translateY(10px);  
    }
    
    .socials-wrap:hover .socials li:nth-child(3) {
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
      opacity:1;
      transform: translateY(10px);
      -webkit-transform: translateY(10px);    
    }
    
    .socials-wrap:hover .socials li:nth-child(2) {
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
      opacity:1;
      transform: translateY(10px);
      -webkit-transform: translateY(10px);  
    }
    
    .socials-wrap:hover .socials li:nth-child(1) {
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
      opacity:1;
      transform: translateY(10px);
      -webkit-transform: translateY(10px);    
    }
      
    .socials li:last-child {
      margin-left: 0px;
    }
    
    .socials li a {
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      display: block;
      height: 40px;
      width: 40px;
      line-height:40px;
      text-align:center;
      -webkit-transition: opacity 0.2s ease-in-out;
      transition: opacity 0.2s ease-in-out;
    }
    
    .socials:hover li  a {
      opacity:0.3;
    }
    
    .socials li a:hover {
      color: #fff;
      opacity:1;
    }
    
    .light-content .socials li a {
      color: #fff;  
    }
    
    .light-content .socials:hover li  a {
      opacity:0.3;
    }
    
    .light-content .socials li a:hover {
      color: #fff;
      opacity:1;
    }
    
    .button-wrap {
      position: relative;
      cursor: pointer;
      top: 0px;
      pointer-events: initial;
      width: auto;
      display: table;
    }
    
    .button-wrap:after {
      clear: both;
      content: " ";
      display: block;
      height: 0;
      visibility: hidden;
    }
    
    .button-wrap.left {
      float:left;
      left:-32px; 
    }
    
    .button-wrap.right {
      float:right;
      right:-26px;  
    }
    
    #main .button-wrap.left {
      float:none;
      left:-24px;
      opacity: 0.5;
      cursor: pointer;
    }
    
    #main .button-wrap.button-link.left {
      float:none;
      left:-20px;   
    }
    
    #main .button-wrap.right {
      float:none;
      right:auto;     
    }
    
    #main .button-wrap.button-link.right {
      right:-2px;   
    }
    
    .icon-wrap {
      width: 80px;
      height: 80px;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      float:left;
    }
    
    #main .icon-wrap {
      width: 60px;
      height: 60px;
    }
    
    .button-wrap.left .icon-wrap {
      float:left;
    }
    
    .button-wrap.right .icon-wrap {
      float:right;
    }
    
    #main  .text-align-right .button-wrap.right {
      float:right;
    }
    
    .button-icon {
      height: 40px;
      width: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
    }
    
    .light-content .button-icon, .dark-section .button-icon {
      color:#fff;
    }
    
    .light-content .light-section .button-icon {
      color:#000;
    }
    
    .white-header .button-icon {
      color:#fff;   
    }
    
    .light-content .white-header .button-icon {
      color:#000;   
    }
    
    .button-icon i {
      height:40px;
      line-height:40px;
      width:40px;
      text-align:center;
    }
    
    #main .button-icon i {
      line-height:40px;
    }
    
    #main .button-icon i.fa.fa-arrow-right {
      font-size:14px;
    }
    
    .button-text {
      font-weight: 500;
      font-size: 14px;
      line-height:30px;
      margin:25px 0;
      overflow: hidden;
      width:auto;
      padding:0 10px;
      color: #fff;
      -webkit-transition: color 0.05s ease-in-out;
      transition: color 0.05s ease-in-out;
    }
    
    #main #hero-footer .button-text span::after {
      content:none;
    }
    
    #main .button-text {
      font-size: 16px;
      line-height:30px;
      font-weight: 400;
      margin:15px 0;
      transition: transform .2s ease-out;
    }
    
    #main #hero .button-text {
      font-weight: 500;
      font-size: 14px;
    }
    
    #main .large-btn .button-text {
      font-size: 18px!important;
      font-weight:500;
      margin:15px 0;
      transition: transform .2s ease-out;
    }
    
    .light-content .button-text, .dark-section .button-text {
      color:#fff;
    }
    
    .light-content .light-section .button-text {
      color:#000;
    }
    
    .white-header .button-text {
      color:#fff;   
    }
    
    .light-content .white-header .button-text {
      color:#000;   
    }
    
    .light-content .white-header.over-white-section .button-text, .show-loader1 .light-content .white-header .button-text {
      color:#fff;   
    }
    
    .button-wrap.left .button-text {
      text-align:left;
      float: left;
    }
    
    .button-wrap.right .button-text {
      text-align:right;
      float: right;
      padding-left:0px;
    }
    
    .button-text span {
      position: relative;
      display: inline-block;
      -webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      width:auto;
      text-align:center;
      transform-origin: 100% 0%;
    }
    
    
    
    
    
    .button-link .button-text, #main .button-link .button-text {
      overflow:visible;
      transition: padding 0.3s ease-out;
    }
    
    .button-link.left .button-text {
      padding-left:0px;
    }
    
    .button-link.left:hover .button-text {
      padding-left:10px;
    }
    
    .button-link .button-text span::before {
      content: '';
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: rgba(0,0,0,0.3);
      transform: scaleX(1);
      transform-origin: right;
      transition: transform 0.3s ease-out;
    }
    
    .button-link.left .button-text span::before {
      transform-origin: left;
    }
    
    .light-content .button-link .button-text span::before, .dark-section .button-link .button-text span::before {
      background: rgba(255,255,255,0.4);
    }
    
    .light-content .light-section .button-link .button-text span::before {
      background: rgba(0,0,0,0.3);
    }
    
    .button-wrap.button-link:hover .button-text span {
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
    
    .button-link:hover .button-text span::before {
      transform: scaleX(0);
      -webkit-transform: scaleX(0);
      transform-origin: left;
    }
    
    .button-link.left:hover .button-text span::before {
      transform-origin: right;
    }
    
    .button-link .button-icon i {
      background-color:transparent;
      border:1px solid rgba(0,0,0,0.4);
      color:transparent;
      font-size: 14px;
      border-radius:100%;
      transform: scale(0.25);
      box-sizing:border-box;
      transition: all .3s ease-out;
      text-indent:-100px;
      overflow:hidden;
    }
    
    .button-link:hover .button-icon i {
      background-color:#000;
      color:#fff;
      border:1px solid rgba(0,0,0,1);
      transform: scale(1.2);
      text-indent:0px;
    }
    
    .light-content .button-link .button-icon i, .dark-section .button-link .button-icon i {
      border:1px solid rgba(255,255,255,0.4);
    }
    
    .light-content .button-link:hover .button-icon i, .dark-section .button-link:hover .button-icon i {
      background-color:#fff;
      color:#000;
      border:1px solid rgba(255,255,255,1);
    }
    
    .light-content .light-section .button-link .button-icon i {
      border:1px solid rgba(0,0,0,1);
    }
    
    .light-content .light-section .button-link:hover .button-icon i {
      background-color:#000;
      color:#fff;
      border:1px solid rgba(0,0,0,1);
    }
    
    
    .button-link.right .button-icon i {
      transform: scale(0.25) translateX(-40px);
      -webkit-transform: scale(0.25) translateX(-40px);
    }
    
    .button-link.right:hover .button-icon i {
      transform: scale(1.2) translateX(0px);
      -webkit-transform: scale(1.2) translateX(0px);
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .button-wrap.left .button-text span {
      text-align:left;
    }
    
    .button-wrap.right .button-text span {
      text-align:right;
    }
    
    .button-text span::before {
      position: absolute;
      width:auto;
      top: 100%;
      left:0;
      content: attr(data-hover);
    }
    
    .header-middle .button-text span::before {
      content: attr(data-on);
    }
    
    #main .button-wrap:hover {
      /* -webkit-transform: translateY(-100%); */
      /* transform: translateY(-100%); */
      /* transform-origin: 0% 0%; */
      opacity: 1;
    }
    
    nav, nav.open {
      -webkit-transition: all 0s ease-in 0s;
      transition: all 0s ease-in 0s;
      background:transparent;
    }
    
  /*--------------------------------------------------
    07. Responsive
  ---------------------------------------------------*/     
  
        
  @media only screen and (max-width: 1466px) {
    
    h1.big-title {
      font-size: 11vw;
      line-height: 14vw;
    }
    
    .row_padding_all {
      padding-left: 60px;
      padding-right: 60px;
    }
    
    .row_padding_left {
      padding-left:60px;
    }
    
    .row_padding_right {
      padding-right:60px;
    }
    
    .preloader-intro {
      font-size: 11vw;
      line-height: 14vw;
      height: 14vw;
    }
    
    .percentage-wrapper {
      right: 60px;
      bottom: 40px;
    }
    
    .percentage-intro {
      left: 60px;
      bottom: 40px;
    }
    
    header {
      height: 120px;
    }
    
    #header-container {
      padding: 10px 60px;
    }
    
    .flexnav li {
      padding: 20px;
    }
    
    footer {
      height: 100px;
    }
    
    #footer-container {
      padding: 0 60px;
      margin: 10px auto;
    }
    
  }
  
  
  @media only screen and (max-width: 1024px) {
    
    h1.big-title {
      font-size: 12vw;
      line-height: 16vw;
    }
    
    .parallax-wrap {
      transform:none!important;
    }
    
    .parallax-element {
      transform:none!important;
    }
    
    .has-parallax figcaption {
      display:none;
    }
    
    .destroy {
      display:none;
    }
    
    .row_padding_left {
      padding-left: 0px;
    }
    
    .row_padding_right {
      padding-right: 0px;
    }
    
    .full.row_padding_left {
      padding-left: 40px;
    }
    
    .full.row_padding_right {
      padding-right: 40px;
    }
    
    .row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 0px;
      padding-right: 0px;
    }
    
    .full.row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 40px;
      padding-right: 40px;
    } 
    
    #magic-cursor {
      display:none;
    }
    
    .preloader-intro {
      font-size: 12vw;
      line-height: 16vw;
      height: 16vw;
    }
    
    .percentage-wrapper {
      right: 40px;
      bottom: 20px;
    }
    
    .percentage-intro {
      left: 40px;
      bottom: 20px;
    }
    
    header {
      height:80px;
    }
    
    #header-container {
      padding: 0;
      margin: 0 auto;
    }
    
    #logo {
      left: 40px;
    }
    
    .header-middle {
      display:none;
    }
    
    .button-wrap.right.menu {
      right: 10px;
    }
    
    nav {
      height: 100vh;
      position: fixed;
      width: 100%;
      box-sizing: border-box;
      visibility: visible;
      pointer-events:none;
      opacity:0;
      padding:20px 0;   
      -webkit-transition: all 0.2s ease-in 0.6s;
      transition: all 0.2s ease-in 0.6s;
    }
    
    nav.open {
      visibility:visible;
      pointer-events:initial;
      opacity:1;
      background-color: transparent;
      -webkit-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
    }
    
    .nav-height {
      position: relative;
      height: 100%;
      padding: 40px 0;
      width: 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }
    
    .flexnav {
      padding: 0 20px;
      max-height: 2000px;
      display: table;
      width: auto;
      margin: 0 auto;
      text-align:center;
      box-sizing:border-box;
      background: transparent;
      -webkit-transition: all 0.2s ease-in 0.6s;
      transition: all 0.2s ease-in 0.6s;
    }
    
    .flexnav.flexnav-show {
      -webkit-transition: all .3s ease-out 0.2s;
      transition: all .3s ease-out 0.2s;  
    }
    
    .flexnav.opacity {
      opacity: 1;
    }
    
    .flexnav li {
      padding:0;
      -webkit-transition: color .15s ease-out 0s;
      transition: color .15s ease-out 0s; 
    }
    
    .flexnav:hover li  {
      color:rgba(255,255,255,0.4)
    }
    
    .flexnav li:hover {
      color:rgba(255,255,255,1)
    }
    
    .flexnav li a, .flexnav li ul li a {
      background: transparent;
    }
    
    .flexnav li a {
      font-weight:500;
      font-size: calc(1rem + 6vw);
      line-height: calc(1rem + 8.5vw);
      padding:0;
      border:none;
      -webkit-transition: all .1s ease-in-out 0s;
      transition: all .1s ease-in-out 0s;
    }
    
    .flexnav li a {
      color:#000;
    }
    
    .invert-header .flexnav li a {
      color: #fff;
    }
    
    .flexnav:hover li a {
      opacity:0.3;
    }
    
    .flexnav li:hover a, .flexnav li a.active{
      opacity:1;
    }
    
    .flexnav li ul {
      margin-bottom:15px;
    }
    
    .flexnav li ul li a {
      padding: 10px 0;
      font-weight: 500;
      text-transform:none;
      font-size: 14px;
      line-height: 14px;
      border-top: none;
      opacity:0.4;
      -webkit-text-stroke:none;
    }
    
    .flexnav li ul li:hover a, .flexnav li ul li a.active{
      opacity:1;
    }
    
    .flexnav:hover li ul li a {
      opacity:0.3;
    }
    
    .flexnav:hover li ul li a.active, .flexnav:hover li ul li:hover > a {
      opacity:1;
    }
    
    .flexnav ul li ul li a {
      background: transparent;
    }
    
    .flexnav li ul li ul li a {
      padding: 10px 40px; 
    }
    
    .flexnav .touch-button {
      width: 100%;
      display: block;
      height:60px;
    }
    
    .flexnav li ul li .touch-button {
      height:32px;
    }
    
    .flexnav .touch-button .navicon {
      display:none;
    }
    
    #menu-burger span.touch-button {
      display:none;
    }
    
    .classic-menu .button-wrap.right.menu {
      display: block;
    }
    
    footer {
      height: 80px;
    }
    
    #footer-container {
      margin: 0px auto;
      padding: 0 40px;
      height: 80px;
    }
    
    .footer-button-wrap {
      bottom: 80px;
    }
    
    .copyright {
      text-align:center;
    }
    
    .socials-wrap {
      width: 240px;
      height: 40px;
      float:right;
      margin:0 auto;
      right:-10px;
      transform: translateX(0px) translateY(20px)!important;
      -webkit-transform: translateX(0px) translateY(20px)!important;
    }
    
    #footer-container .socials-wrap:hover {
      transform: translateY(20px) !important;
      -webkit-transform: translateY(20px) !important;
    }
    
    .socials-icon, .socials-text {
      display:none;
    }
    
    .socials-wrap .socials {
      margin-top: 5px;
      text-align: right;
      transform: translate(254px, -21px);
    }
    
    .socials-wrap .socials li {
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
    }
    
    .socials-wrap:hover .socials li {
      opacity: 1;
      transform: translateY(0px)!important;
      -webkit-transform: translateY(0px)!important;
    }
    
    .socials li {
      margin-right: 10px;
      line-height: 30px;
      height: 30px;
      width: 30px;
      margin: 0 5px auto;
      display: inline-block;
      float: none;
    }
    
    .socials li a {
      height: 30px;
      width: 30px;
      line-height: 30px;
    }
    
  }
  
  
  @media only screen and (max-width: 767px) { 
    
    h1.big-title {
      font-size: 13vw;
      line-height: 17vw;
    }
    
    h1{
      font-size:34px;
      line-height: 48px;
    }
    
    h2{
      font-size: 28px;
      line-height: 44px;
    }
    
    h3{
      font-size:24px;
      line-height: 36px;
      margin-left:-1px;
    }
    
    h4{
      font-size:20px;
      line-height: 30px;
      margin-left:-1px; 
    }
    
    h5{
      font-size:16px;
      line-height: 26px;
      margin-left:-1px;
    }
    
    h6{
      font-size:14px;
      line-height: 24px;
    }
    
    figcaption {
      background-color: rgba(0,0,0,0.3);
      bottom: 0px;
      font-size: 10px;
      padding: 5px 10px;
      right: 0px;
      border-radius: 0;
    }
    
    .text-aligh-right {
      text-align:left;
    }
    
    .one_half {
      width: 100%!important;
    }
    
    .one_half {
      padding-right: 0!important;
    }
    
    .one_half.last {
      padding-left: 0!important;
    }
  
    .one_third {
      width: 100%!important;
    } 
  
    .one_fourth {
      width: 100%!important;
    } 
  
    .one_fifth {
      width: 100%!important;
    } 
  
    .one_sixth {
      width: 100%!important;
    } 
  
    .two_fifth {
      width: 100%!important;
    } 
  
    .two_fourth {
      width: 100%!important;
    }   
  
    .two_third {
      width: 100%!important;
    } 
  
    .three_fifth {
      width: 100%!important;
    } 
  
    .three_fourth {
      width: 100%!important;
    } 
  
    .four_fifth {
      width: 100%!important;
    } 
  
    .five_sixth {
      width: 100%!important;
    } 
  
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
      margin-bottom: 20px!important;
      margin-right: 0%!important;
    }
    
    .row_padding_top {
      padding-top:10vw;
    }
    
    .row_padding_bottom {
      padding-bottom:10vw;
    }
    
    .row_padding_left {
      padding-left: 0px;
    }
    
    .row_padding_right {
      padding-right: 0px;
    }
    
    .full.row_padding_left {
      padding-left: 30px;
    }
    
    .full.row_padding_right {
      padding-right: 30px;
    }
    
    .row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 0px;
      padding-right: 0px;
    }
    
    .full.row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 30px;
      padding-right: 30px;
    }
    
    hr {
      height: 20px;
    }
    
    .preloader-intro {
      font-size: 13vw;
      line-height: 17vw;
      height: 17vw;
    }
    
    .percentage-wrapper {
      right: 30px;
      bottom: 10px;
    }
    
    .percentage-intro {
      left: 30px;
      bottom: 10px;
    }
    
    #logo {
      left: 30px;
    }
    
    .button-wrap.right.menu.burger-lines {
      right: 0px;
    }
    
    header .button-text {
      display: none;
    }
    
    .flexnav li a {
      font-size: calc(1rem + 7vw);
      line-height: calc(1rem + 9.5vw);
    }
    
    #footer-container {
      padding: 0 30px;
    }
    
    #footer-container #backtotop.button-wrap.left {
      float: none;
      top:10px;
      left: 0;
      right: 0;
      position: absolute;
      display:block;
    }
    
    #backtotop.button-wrap.left .button-text {
      text-align: left;
      float: left;
      display: none;
    }
    
    #backtotop.button-wrap.left .icon-wrap {
      float: none;
      position: absolute;
      right: 0;
      left: auto;
      margin: auto;
      top: 0px;
    }
    
    .footer-middle {
      max-width: 1180px;
      height:20px;
      position: absolute;
      margin: 0 auto;
      left: 0;
      width: 100%;
      top: 0px;
    }
    
    .copyright {
      margin: 0;
      left: 10px;
      top: 10px;
      text-align:left;
    }
    
    footer.showcase-footer .arrows-wrap {
      right: auto;
      left: -30px;
      float: left;
      margin: auto;
    }
    
    footer.showcase-footer .socials-wrap {
      width: 170px;
      float: right;
      left: auto;
      right: 0;
      top: 0;
    }
    
    .socials-wrap {
      width:170px;
      float: none;
      left: -6px;
      right: auto;
      top: 10px;
      margin: 0;
    }
    
    .socials-wrap .socials {
      text-align: left;
    }
    
    .socials li {
      margin: 0 0px auto;
    }
    
  }
  
  
  @media only screen and (max-width: 479px) { 
    
      
    h1.big-title {
      font-size: 14vw;
      line-height: 18vw;
    }
    
    .row_padding_top {
      padding-top:12vw;
    }
    
    .row_padding_bottom {
      padding-bottom:12vw;
    }
      
    .row_padding_left {
      padding-left: 0px;
    }
    
    .row_padding_right {
      padding-right: 0px;
    }
    
    .full.row_padding_left {
      padding-left: 20px;
    }
    
    .full.row_padding_right {
      padding-right: 20px;
    }
    
    .row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 0px;
      padding-right: 0px;
    }
    
    .full.row_padding_all {
      padding-top: 4vw;
      padding-bottom: 4vw;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    hr {
      height: 10px;
    }
    
    .preloader-intro {
      font-size: 14vw;
      line-height: 18vw;
      height: 18vw;
    }
    
    .percentage-wrapper {
      right: 20px;
      bottom: 10px;
    }
    
    .percentage-intro {
      left: 20px;
      bottom: 10px;
    }
    
    #logo {
      left: 20px;
    }
    
    .button-wrap.right.menu {
      right: -10px;
    }
    
    .button-wrap.right.menu.burger-lines {
      right: -10px;
    }
    
    #footer-container {
      padding: 0px;
      margin:0;
    }
    
    footer.showcase-footer #footer-container {
      padding: 0px 20px;
    }
    
    .copyright {
      left: 0px;
    }
    
    .socials-wrap {
      float: none;
      left: 14px;
      right: auto;
    }
    
    .arrows-wrap {
      left: -10px;
      width: 80px;
    }
    
    .prev-wrap, .next-wrap {
      width: 40px;
    }
    
    footer.showcase-footer .arrows-wrap {
      right: 0;
      left: 0;
      float: none;
      margin: auto;
    }
    
    footer.showcase-footer .arrows-wrap {
      width: 100%;
    }
    
    footer.showcase-footer .prev-wrap, footer.showcase-footer .next-wrap {
      width: 60px;
    }
    
    footer.showcase-footer .footer-middle {
      top: 0px;
    }
    
    footer.showcase-footer .showcase-subtitles-wrap {
      left: 0;
    }
    
    footer.showcase-footer .socials-wrap {
      display:none;
    }
    
    .button-text {
      display:none;
    }
    
    #main-page-content .button-text, #hero .button-text {
      display:block;
    }
  }
  
  @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
    
    #rotate-device {
      display:block;
    }
  }
  .btn-link{
    position: absolute;
    z-index: 1;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    font-size:30px
  }
  .content-row.footer-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 340px;
    flex-flow: wrap;
    flex-direction: column;
    margin-top: 60px;
  }
  .content-row.footer-cont .one_third{
    flex: 1;
    margin-right:0!important;
    text-align:center;
    width: 100% !important;
    /* margin-bottom: 62px !important; */
  }
.content-row.footer-cont .one_third:nth-child(2){/* padding-right:30px; */}
  .gm-style div:nth-child(2) div:nth-child(2){
      /* background:rgba(23, 23, 23,0.7); */
  }
  .header-content-top .socials-wrap {
    display: grid;
    place-content: center;
    align-items: center;
    padding-bottom: 25px;
    height: 100%;
    width: 100%;
    }
  .header-content-top .socials-wrap:hover{transform:translateX(0)}
  .header-content-top{height: 36px;position: relative;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #484848;padding: 0 70px;}
  .header-content-top .socials-wrap .socials{
    margin-top: -10px;
  }
  .header-content-top .socials-wrap .socials li{opacity:1}
  .button-wrap.right.menu.burger-lines.mobile-menu {
    display: none;
  }
  @media screen and (max-width:1200px){
    .button-wrap.right.menu.burger-lines{
    display: none;
  }
    .header-content-top{display:none}
    .button-wrap.right.menu.burger-lines.mobile-menu {
    display: block;
    position: relative;
    top: -75px;
  }
    .panels-container > .panel{width: 75vw;}
  }
  .over-sidebar {background: #171717 !important;}
  .language{display:flex;justify-content:center;align-items:center;gap: 11px;position: absolute;right: 75px;}
  .language a img {
    width: 30px;
    height: auto;
  }
  .slowed-text h5 , .slowed-text h1 {
    color: #000;
  }
  
  footer ul.socials {
    margin-top: 35px;
    /* right: 0; */
  }
  .newsletter {
    background: #171717;
    display: grid;
    /* place-content: center; */
    width: 100%;
    text-align: center;
    padding-bottom: 0;
    margin: 50px 0;
    padding-top: 50px;
  }
  .newsletter div#contact-formular form {display: flex;width:100%;justify-content: center;align-items: center;flex-direction: column;}
  .newsletter div#contact-formular #message{margin-bottom:20px;font-weight:700;font-size:30px}
  .newsletter input{
    color: rgba(250,250,250,1) !important;
    border-bottom: 1px solid rgba(250,250,250,0.3) !important;
    }
  .newsletter input:focus{color:#fff !important;}
  .newsletter .input_label{background-color:#fff !important}
  .newsletter  .button-border.outline{    border: solid 3px #fff !important;}
  .newsletter input::placeholder{color:#fff !important}
  .language a , .language span {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    transition: 0.5s;
  }
  .language a:hover{transition:0.5s;opacity:0.3}
  .about-us{background:#fff}
  .about-us .content {
    padding: 70px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
  }
  .about-us .content .img-content{flex:1}
  .about-us .content .info-content{flex:1}
  .about-us .content .info-content h3{color:#000;text-align: center;}
  .about-us .content .info-content .button-box{margin-top:25px;display: flex;justify-content: center;align-items: center;}
  .about-us .content .info-content .button-border{border:solid 3px #000}
  .about-us .content .info-content .button-border a{color:#000;padding: 20px;cursor: pointer;}
  .portfolio-wrap .button-box.has-animation.animated {
    display: flex;x
    justify-content: center;
    align-items: center;
  }
  .portfolio-wrap .button-box.has-animation.animated a{padding:20px;cursor: pointer;}
  @media screen and (max-width:1200px){
    .about-us .content{flex-direction: column;}
    .about-us .content .info-content .button-box{display:flex;justify-content:center}
  }
  @media screen and (max-width:990px){
    .socials-wrap .socials{transform: translate(158px, -21px);}
    .content-row.footer-cont{width: 100%;/* flex-direction: column; *//* margin-top: 60px; */margin-bottom: 300px;margin: 0px;text-align: center;display: flex;justify-content: center;padding: 10px 8px;margin-top: 32px;}
  }
  p.about-title {
    text-align: center;
  }
  .one_half h4 {
    font-size: 50px;
  }
  .language a.active {
    display: block;
  }
  .language a{
    display: block;
    opacity: 1;
  }
  

h4.has-mask-fill.proje-h4 {
    font-size: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.footer-middle a.link {
    color: #fff;
}

div#map_canvas > iframe {
    width: 100%;
    height: 100%;
}
.bg-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(27,26,26,.35);
}
.bg-parallax {
    background-attachment: fixed;
}
.content-row.footer-cont.contact {
    margin: 0;
    /* padding-top: 150px; */
    width: 100%;
}
.proje-detay .two_fourth {
    width: 100% !important;
}
.projeSwiper figure a img {width: 100%;height: auto;}
@media screen and (max-width:768px){
  .projeSwiper figure a img {width: 90vw}
}

.servisler {
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    padding-top:  0 !important;
    padding: 80px 150px;
}
@media screen and (max-width:1025px){
  .servisler{padding:80px}
}
@media screen and (max-width:990px){
  .servisler{display:grid;place-content: center;gap: 50px;}
  .servisler .one_third{width:100% !important}

}
@media (max-width: 992px){
.pagetitle__heading {
    font-size: 35px;
}
}
@media (min-width: 320px) and (max-width: 767px){
.page-title {
    padding-top: 50px;
    padding-bottom: 50px;
}
.page-title .pagetitle__heading {
    font-size: 23px!important;
    margin-bottom: -4px;
}
.page-title .container {
    margin-top: 42px;
    padding: 0 50px;
}
}
div#blog-effects {
    display: flex;
    justify-content: center;
    align-items: center;
}
div#blog-effects a{color:#000 !important}
div#blog-effects p{margin-top:20px}
div#blog-effects .post-title span{color:#000 !important;background-image: linear-gradient(#000, #000);}
div#blog-effects .button-border{border:solid #000}
div#blog-effects .button-border span{color:#000}
.news-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
div#post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.haber-detay{background:#fff}
div#post-image{margin-bottom:50px;margin-left:auto;margin-right:auto;flex: 1;width: 100%;display: none;}
#blog-post-content{/* width: 100%; */padding: 80px 81px;padding-top: 0;margin:0 auto;background:#fff;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 50px;}
#blog-post-content p{color:#000}
.haber-detay span {
    color: #000;
}
.haber-detay .hero-title{font-size:5vw}

#blog-post-content{
    flex: 1;
    width: 47%;
    padding: 50px;
    border: 1px solid rgba(191, 203, 224, 0.75);
}
#blog-post-content h1{font-size: 40px;line-height: 52px;}
.blog-page{background:#fff}
@media screen and (max-width:990px){
  #blog-post-content{
    border:none;
    width: 80%;
  }
  div#blog-effects{
    display:grid;
    gap: 60px;
  }
}

.hakkimizda-hero .hero-subtitle{font-size: 38px;}
.haber-data {
    color: #fff;
    font-size: 20px;
    margin: 20px 0;
}
h2.detay-haber {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 52px;
}
@media screen and (max-width:1024px){
  #blog-post-content{
    display: gridy;
  }
}
.layout{margin-left:80px}
@media screen and (max-width:768px){
  .layout {margin-left: 20px;margin-top: 40px;}
  #blog-post-content h1{font-size: 26px;line-height: 41px;}
  #blog-post-content{
    border:none;
    width: 100%;
    padding: 0;
  }
}

.layout h1{margin:0;color:#000 !important}
.layout p{color:#000 !important;display: none;}
.layout a{color:#000 !important}
/*--------------------------------------------------
  03. Page Preloader
---------------------------------------------------*/ 

.preloader-wrap {
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #000;
  z-index :1200;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-wrap .outer {
  padding: 0px;
  box-sizing:border-box;
}

.preloader-wrap .inner {
  vertical-align:middle;
  box-sizing:border-box;
}

.percentage-wrapper {
  position:relative;
  background:#000;
  min-width:6vw;
  padding:0 50px;
  display: table;
  margin: 0 auto;
  z-index:10;
}

.percentage {
  opacity: 1;
  font-size:160px;
  line-height:160px;
  font-weight: 500;
  font-family: 'Bebas Neue', cursive;
  color: #fff;
  display: table;
  margin: 0 auto;
}

.percentage::before {
  content: "";
  width: 100%;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  position: fixed;
  text-align:center;
  top: calc(100vh - 80px);
  left:0;
  opacity:0.3;
}

.trackbar {
  width:calc(100% - 120px);
  height: 2px;
  margin-top: 0px;
  position: absolute;
  top: 50vh;
  left: 60px;
  right: auto;
  opacity: 1;
  /* background:  rgba(255,255,255,0.1); */
  z-index:1;
}

.loadbar {
  width: 0%;
  height: 2px;
  background: rgba(255,255,255,1);
  position: relative;
  margin:0 auto;
  display:table;
  top: 0px;
  left: auto;
  right:auto;
  overflow: hidden;
}

.hold-progress-bar {
  width: 0%;
  height: 2px;
  background: rgba(0,0,0,1); 
  position: relative;
  margin:0 auto;
  display:table;
  top: 0px;
  left: auto;
  right:auto;
  overflow: hidden;
}
.overview {background:#fff;color:#000;padding: 0 0px;padding-bottom: 70px;}
.overview .header{height: 15%;color:#000;font-size: 50px;padding-left: 20px;display: flex;justify-content: start;align-items: center;}
.proje-content{/* display:grid; *//* grid-template-columns: 25% 75%; */}
.list{padding:0 20px;font-size: 18px;line-height: 36px;}
ul.items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.items .item{color:#000;font-size:18px;font-weight: normal;width: 100%;}
.items .item span{font-weight:600}
.list p {color:#000}
@media screen and (max-width:990px){
  .proje-content{grid-template-columns:none;place-items: center;gap: 20px;}
  .list{padding:0}
}
.item.haberler-detay.active {
    height: 100%;
}
#map{/* margin-top:90px; */}
.kvkk {display:flex;width:100%;position:relative;margin-bottom:20px}
.kvkk .kvkk-label{padding-left:30px;cursor: pointer;}
.kvkk .kvkk-input{position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;visibility:hidden;}
.kvkk .kvkk-label::before{content:"";position:absolute;left:0;width:15px;height:15px;border:1px solid #000;border-radius:5px}
.kvkk .kvkk-label::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:5px;background:#000;opacity:0;visibility:hidden;transition:0.5s}
.kvkk .kvkk-input:checked ~ .kvkk-label::after{transition:0.5s;opacity:1;visibility:visible;}
.share-links {
    margin-top:25px;
    padding: 20px;
    border-top:1px solid rgba(191, 203, 224, 0.75);
    border-bottom:1px solid rgba(191, 203, 224, 0.75);
}

.share-links {display:flex;justify-content:start;align-items:center;list-style: none;gap: 25px;width: 100%;}

.share-link{margin:0;font-size: 20px;}
.share-link a{font-size:20px;transition:0.5s}
.share-link a:hover i{transition:0.5s;color:red}
.bloglar-container {/* display:flex; */flex-wrap:wrap;/* padding: 0px 20%; */gap: 20px;width: 50%;margin: 0 auto;}
.bloglar{/* flex:30%; */overflow:hidden;}
.bloglar a .blog-img{overflow:hidden}
.bloglar a img{transition:0.5s}
.bloglar a:hover img{/* transform:scale(1.5); */}
.bloglar .blog-img img{width:100%;/* height: 100%; *//* object-fit: cover; */}
.bloglar.blog-img img{height:350px;}

.bloglar .blog-content{/* height: 250px; */padding:20px;border:1px solid rgba(191, 203, 224, 0.75);overflow:hidden;}
.bloglar .blog-content .blog-baslik{
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 3; */
  /* -webkit-box-orient: vertical; */
  /* overflow: hidden; */
  font-size: 25px;
  line-height: 34px;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  }
.bloglar .blog-content .blog-ozet{
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 4; */
  /* -webkit-box-orient: vertical; */
  /* overflow: hidden; */
  line-height: 34px;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  }
.other-blog {
    width: 78% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}
.other-blog .bloglar .blog-img img{/* height:350px !important; */}
.fotter-top {
    background-color: rgb(23, 23, 23);
}

.servisler .box-icon-content{height:100%}
.servisler .one_third{margin:0 !important}
.servisler::after{display:none}
.ser-content .box-icon{height: 121px;}
.servisler svg{
    width: 100px;
    height: 100%;
    /* margin-bottom: 50px; */
}
.ser-content h4{font-size:30px;text-align:center;/* margin-top:30px; */}
.services , .client h1{font-size:55px}
.over-content{
    /* display: flex; */
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    }

  h2.detay-haber {
    margin-top: 25px;
  }
  .chart {
   justify-content: flex-start;
   border-radius: 100px;
   align-items: center;
   position: relative;
   display: flex;
   height: 40px;
   width: 80%;
 }
@media screen and (max-width:990px){
  .bloglar-container{padding:0}
}
@media screen and (max-width: 767px){
  .bloglar{flex:100%}
  .ser-content h4{font-size:20px}
}
    .chart span {
      /* You can modify the value below to change the distance between the percentage number and the bar */
      margin-left: 5px;
      color: #fff;
      font-weight: bolder;
      position: absolute;
      top:0;
      left: 0;
      animation: spanLoad 3s normal forwards;
    }
  
  .bar {
    /* You can modify the total time used for the animation here */
    animation: load 3s normal forwards;
    /* 
    Add a little spice by having a shadow below the bar.
    Feel free to comment out this line below to have an even LITE version :D 
    */
    
  
    
    background: #fff;
    height: 1px;
    width: 0;
  } 
  
  @keyframes load {
    0% {
      width: 0;
    }
    100% {
      /* You need to change the percentage below to match the value in the corresponding <span> */
      width: 100%;
    }
  }
  @keyframes spanLoad {
    0% {
      left: 0;
    }
    100% {
      /* You need to change the percentage below to match the value in the corresponding <span> */
      left: 97%;
    }
  }

.socials-top.mob .socials li i{font-size: 34px;}
.socials-top.mob .socials li a{opacity:1;}
.inner.mob-head {
    vertical-align: unset;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100%;
}
.grid-sizer,
.grid-item {
  width: 33%;
}

.grid-item {
  float: left;
  margin-bottom: 20px;
}

.grid-item img {
  display: block;
  max-width: 100%;
  height: auto;
}
.main-content {
    width: 90%;
    margin: auto;
}
@media screen and (max-width:1025px){
  .bloglar-container{width:100%}
}
.socials-top.mob ul {
    display: flex;
    gap: 20px;
}
@media screen and (max-width:990px){
  .content-row.footer-cont .one_third:nth-child(2){padding-right:0}
}
@media screen and (max-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer,
.grid-item{ width: 100%; }
  }
  input[type="image"] {
    height: auto !important;
    padding-right: 0;
}

.proje-tipleri {
    font-family:'Raleway', sans-serif;
    font-weight: 400;
    font-size: 19px;
    padding-left: 87px;
    border: none;
    background: transparent !important;
    margin-bottom: 40px;
}


@media(max-width:769px){

.proje-tipleri {
    padding-left: 10px!important;
    margin-top: 20px!important;
}
}
span.datatipbutton {
    font-family: 'Raleway';
    font-size: 23px;
    font-weight: 400;
}

.dataft + .dataft {
    border-left: 1px solid #222;
}