*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;  
 
}
 
ul[class],
ol[class] {
  padding: 0;
}
 
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

 
ul[class],
ol[class] {
  list-style: none;
}


a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}


img {
  max-width: 100%;
  display: block;
}


/*article > * + * {
  margin-top: 1em;
}*/




@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
         -o-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 10px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 16px;
    border: 2px solid #fff;
}

/* set button(top and bottom of the scrollbar) */
body::-webkit-scrollbar-button {
    display:none;
}



a, a:-webkit-any-link {
  color: #fff;
  text-decoration: none;
}

ul {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
}

body {
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.1;
  background-image: none;
  background-color: #1f1f1f;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-image: url(img/gradient.jpg);    
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  -webkit-transition: background-image .8s ease-in-out;
  -o-transition: background-image .8s ease-in-out;
  transition: background-image .8s ease-in-out;  
  padding: 64px;
}


body::after {
 content: '';
    display: block;
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(img/noise.gif);
    opacity: .07;
    background-size: 400px;
    mix-blend-mode: screen;
    pointer-events: none;
}

header{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}



nav>ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-column-gap: 48px;
     -moz-column-gap: 48px;
          column-gap: 48px;
  list-style-type: none;
}

.menu, .login {
  display:  none;
}

.logo-v {display: none;}

.logo img{
  max-height: 80px;
  /*transition: 1s;*/
}

.logo, nav a {
  cursor: pointer;
}

nav a {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3em;
}

nav a::after {
  display: block;
    content: '';
    opacity: 0;
    height: 2px;
    width: 0%;
    background: -o-linear-gradient(left, white, transparent);
    background: -webkit-gradient(linear, left top, right top, from(white), to(transparent));
    background: linear-gradient(90deg, white, transparent);
    margin-top: 4px;
    border-radius: 2px;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;

}

nav a.active::after {
  opacity: 1;
    width: 100%;
}

header a{
  transition: .4s;
}

header a:hover {
  opacity: .7;
}





.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;  
  flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

main {
  overflow: scroll;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


main::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
 /* height: 68vh;
  height: calc(var(--vh, 1vh) * 68);*/
}

article {
      
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 0;
    -webkit-transition:   opacity .6s  ease;
    -o-transition:   opacity .6s  ease;
    transition:   opacity .6s  ease;
}


article.active {
  height: 60vh;
  opacity: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 

}


.description {
  width: 66%;
}

.home section {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}

.home .description {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
    gap: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

h2 {
  text-transform: uppercase;
    font-size: 1.2em;
}


h2::after {
  display: block;
    content: ''; 
    height: 2px;
     width: 100%;
    max-width: 360px;
    background: -o-linear-gradient(left, white, transparent);
    background: -webkit-gradient(linear, left top, right top, from(white), to(transparent));
    background: linear-gradient(90deg, white, transparent);
    margin-top: 16px;
    border-radius: 2px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}



.home h3 {
    font-size: 4em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}



.home .description p {
  font-size: 1em;
  line-height: 1.5em;
  font-family: 'Montserrat', sans-serif;
}

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}



 
.description h3 {
  font-size: 4em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.description ul {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
}

.description li {
  line-height: 1.5em;
}

.description p {
  font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.5em;
}




.strategy, .theme {
  height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


.strategy.active, .theme.active {
  height: 100%;
  opacity: 1;
}

.illustration {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 100%;
}


.illustration img {
          -o-object-fit: contain;
             object-fit: contain;
      max-width:100%;
      max-height: 100%;      
  opacity: 0;
  -webkit-transition: .7s;
  -o-transition: .7s;
  transition: .7s;
}

section.active .illustration img {
  opacity:  1;
}


.portfolio-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
}

 
@-webkit-keyframes theme4 {
  0%   {background-image: url(img/theme-4-1.jpg);}
  33%  {background-image: url(img/theme-4-2.jpg);}
  66%  {background-image: url(img/theme-4-3.jpg);}
  100%   {background-image: url(img/theme-4-1.jpg);}
}

 
@keyframes theme4 {
  0%   {background-image: url(img/theme-4-1.jpg);}
  33%  {background-image: url(img/theme-4-2.jpg);}
  66%  {background-image: url(img/theme-4-3.jpg);}
  100%   {background-image: url(img/theme-4-1.jpg);}
}

 
@-webkit-keyframes theme5 {
  0%   {background-image: url(img/theme-5-1.jpg);}
  33%  {background-image: url(img/theme-5-2.jpg);}
  66%  {background-image: url(img/theme-5-3.jpg);}
  100%   {background-image: url(img/theme-5-1.jpg);}
}

 
@keyframes theme5 {
  0%   {background-image: url(img/theme-5-1.jpg);}
  33%  {background-image: url(img/theme-5-2.jpg);}
  66%  {background-image: url(img/theme-5-3.jpg);}
  100%   {background-image: url(img/theme-5-1.jpg);}
}

 
@-webkit-keyframes theme6 {
  0%   {background-image: url(img/theme-6-1.jpg);}
  33%  {background-image: url(img/theme-6-2.jpg);}
  66%  {background-image: url(img/theme-6-3.jpg);}
  100%   {background-image: url(img/theme-6-1.jpg);}
}

 
@keyframes theme6 {
  0%   {background-image: url(img/theme-6-1.jpg);}
  33%  {background-image: url(img/theme-6-2.jpg);}
  66%  {background-image: url(img/theme-6-3.jpg);}
  100%   {background-image: url(img/theme-6-1.jpg);}
}

 
@-webkit-keyframes theme7 {
  0%   {background-image: url(img/theme-7-1.jpg);}
  33%  {background-image: url(img/theme-7-2.jpg);}
  66%  {background-image: url(img/theme-7-3.jpg);}
  100%   {background-image: url(img/theme-7-1.jpg);}
}

 
@keyframes theme7 {
  0%   {background-image: url(img/theme-7-1.jpg);}
  33%  {background-image: url(img/theme-7-2.jpg);}
  66%  {background-image: url(img/theme-7-3.jpg);}
  100%   {background-image: url(img/theme-7-1.jpg);}
}



body[scroll="4"] { 
  -webkit-animation: 15s infinite theme4; 
          animation: 15s infinite theme4;
 background-image: url(img/theme-4-1.jpg);
 -webkit-animation-delay: 2s;
         animation-delay: 2s;
}

body[scroll="5"] { 
  -webkit-animation: 15s infinite theme5; 
          animation: 15s infinite theme5;

 background-image: url(img/theme-5-1.jpg);
 -webkit-animation-delay: 2s;
         animation-delay: 2s;
}

body[scroll="6"] {
  -webkit-animation: 15s infinite theme6;
          animation: 15s infinite theme6;

 background-image: url(img/theme-6-1.jpg);
 -webkit-animation-delay: 2s;
         animation-delay: 2s;
}
body[scroll="7"] {
  -webkit-animation: 15s infinite theme7;
          animation: 15s infinite theme7;

 background-image: url(img/theme-7-1.jpg);
 -webkit-animation-delay: 2s;
         animation-delay: 2s;
}




form {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


input {
  margin: -34px 0 24px;
    height: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}




input, button, textarea, select  { 
    font: inherit;
    background: transparent;
    border: 0px solid #fff;
    max-width: 720px;
    outline: none !important;
    overflow: hidden;
    padding: 24px 0;
    color: #fff;
    border-bottom: 2px solid #fff;
}

input[type="submit"] {
  border: none;
  cursor:pointer;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ffffffb3;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ffffffb3;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ffffffb3;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #ffffffb3;
}

input::placeholder, textarea::placeholder {
  color: #ffffffb3;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  color:#fff;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
textarea {
  height: 72px;
}

input:not([value=""]),
input:focus, button:focus, textarea:focus, select:focus,
input:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible {
    margin: 8px 0 24px;
    caret-color: #fff;
  
}

#messageSubmit {
  opacity: .3; 
  width: 70px;
  pointer-events: none;
}

#messageSubmit.active {
  opacity: 1; 
  pointer-events: auto;
}


#messageSent {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .7s;
  -o-transition: .7s;
  transition: .7s;
}

#messageSent.active {
  opacity:1;
  visibility: visible;
}





footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height:   24px;
}

#bullets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%; 
}

.group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
   gap: 18px;
}

 

.bullet {
      display: none;
    width: 20px;
    height: 20px;
    border-radius: 24px;
    border: 2px #fff solid; 
    -webkit-transition: .6s; 
    -o-transition: .6s; 
    transition: .6s;
    cursor: pointer;
}

.bullet.active {
  background: -o-radial-gradient(#ffffffa8, transparent);
  background: radial-gradient(#ffffffa8, transparent);
  cursor: unset;
  pointer-events: none;
}

.strtgs .bullet-strategy, .thms .bullet-theme {
  display:  block;
}
 




.copy {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: .2;
}

.contact .copy {
  opacity: 1;
}


@media (max-height: 720px) {


    .logo img {
      max-height:   120px;
    }

    .description h3 {
      font-size:  2em;
    }

     body {
    padding: 24px;
    font-size: 12px;
  }

  .bullet {
    width: 16px;
    height: 16px;
  }

}



@media (max-width: 650px) {


  body {
    padding: 24px;
    font-size: 12px;
  }

 /* body::after {
    opacity: 0.2;
    background-size: 200px;
    mix-blend-mode: difference; 
    z-index: -1;
  }*/

  header {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }


  .menu{
    background: url(img/menu.svg);
    display:  block;
    width: 20px;
    height: 18px;
    z-index: 9999;
  }
  .login{
    background: url(img/login.svg);
     display:  block;
    width: 20px;
    height: 18px;
  }

  nav  {
        width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    background-color: rgb(31 31 31 / 95%);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 0;
    pointer-events: none;
    -webkit-transition:   .4s;
    -o-transition:   .4s;
    transition:   .4s;
  }

  nav.active {
    opacity:  1;
    pointer-events:   all;  
  }


  nav>ul  {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    gap: 24px;
    font-size: 24px;
  }


  .logo-h {display: none;}

  .logo-v {display: block;}

   .logo img {
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
   }

  .logo img

  body[scroll="0"] .logo img {
    max-height: 180px;
    margin: 3vh auto;
    margin: calc(var(--vh, 1vh) * 3) auto;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
  }

  main {
    overflow: hidden;
  }

  .container {
    height: 100%;
  }

 

  .home section {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 36px;
  }

  article {
    text-align: center;
  }

  section {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  h2::after {
    display: none;
  }



  .description {
    width: 100%;
  }

  .description ul {
    list-style-type: none;
  }

  .description h3, .home h3 {
    font-size: 28px;
  }

  .strategy.active, .page.active {
    overflow: visible;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }

  .illustration {

        max-height: 25vh;
  }

  .illustration img {
    width: auto;
    height:   100%;
    max-height:   25vh; 
  }

  .portfolio-header {
    gap: 12px;
  }

  .group {
    gap:12px;
  }

  .bullet {
    width: 16px;
    height: 16px;
  }

  .copy {
    text-align: center;
    font-size: 8px;
  }
}