*{
  margin: 0;
  font-family:'Heebo', sans-serif;
}

/* start of the preloader */
#overlay{
  background:white;
  position:fixed;
  width:100%;
  height:100vh;
  z-index:200;
}

.preloader{
  position:fixed;
  width:100px;
  height:100px;
  margin: auto;
  top: calc( 50% - 50px ); left: calc( 50% - 50px );
  z-index:501;
}

.block{
  width:100%;
}

#block1{
  background-color:#56D0E7;
  height:40%;
  animation: animation 3s ease-in-out infinite;
}

#block2{
  background-color:#0096C7;
  height:20%;
  margin-top: 10%;
  animation: animation2 3s ease-in-out infinite;
}

#block3{
  background-color:#255B9F;
  height:20%;
  margin-top:10%;
  animation: animation3 3s ease-in-out infinite;
}

@keyframes animation {
  0%,100%{
    transform: translateY(0);
  }
  33% {
    transform: translateY(calc( 100px * 0.3 ));
  }
  66% {
    transform: translateY(calc( 100px * 0.6 ));
  }
}

@keyframes animation2 {
  0%,100%{
    transform: translateY(0);
  }
  33% {
    transform: translateY(calc( 100px * 0.3 ));
  }
  66% {
    transform: translateY(calc( 100px * -0.5 ));
  }
}

@keyframes animation3 {
  0%,100%{
    transform: translateY(0);
  }
  33% {
    transform: translateY(calc( 100px * -0.8 ));
  }
  66% {
    transform: translateY(calc( 100px * -0.5 ));
  }
}

/* end of css preloader */

.nav{
  width:40%;
  height:100vh;
  background:white;
  position : fixed;
}

.none{
 opacity : 0;
}

.dnone{
  display:none;
}

.menu{
  width : 70%;
  position : absolute;
  margin-left :15%;
  color: #4a4a4a;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-45%);
  transform: translateY(-45%);
}

.text1{
  font-weight:700;
  font-size:4.2vw;
  margin-bottom:1.5vw;
  line-height: 5.5vw;
}

.text2{
  font-weight:200;
  padding-right:20%;
  font-size:1.3vw;
}

.text3{
  font-size:5.5vw!important;
  line-height: 5.5vw!important;
}

.links{
  margin-top:2.5vw;
  display:inline-flex;
  display : none;
}

.imgL{
  filter:invert(30%);
  width:3vw;
  opacity:80%;
  margin-right:1.5vw;
}
.imgL:hover{
  opacity:100%;
}

.contactB{
  background:#0096C7;
  width:50%;
  height:4vw;
  border-radius:4vw;
  margin-top : 3vw;
  text-align: center;
  line-height: 4vw;
  font-size:1.3vw;
  color : white;
  cursor:pointer;
  border: none;
}

.contactB:hover{
  filter: brightness(115%);
}

.button{
  width:30%;
}

.contactForm{
  z-index: 101;
  display: none;
}

input{
  width: 100%;
  height: 2.5vw;
  border: none;
  border-radius: 0.1vw;
  color: #4a4a4a;
  font-size: 1.5vw;
  font-weight:200;
  padding: 0 0.5vw!important;
  outline: none;
}

input:first-child{
  margin-top:0.5vw;
}

textarea{
  width: 100%;
  height: 2.5vw;
  border: none;
  border-radius: 0.1vw;
  color: #4a4a4a;
  font-size: 1.5vw;
  font-weight:200;
  padding: 0 0.5vw!important;
  outline: none;
}

.line{
  width:100%;
  height:2px;
  background: #4a4a4a;
  margin-bottom: 3vw;
}
.button{
  margin-top: 1vw;
}

.closeForm{
  position: relative;
  top:1vw;
  left:2vw;
  color: #4a4a4a;
  cursor: pointer;
}

.wrapper{
  float:right;
  width:60%;
  display:inline-grid;
  grid-template-columns: 1fr;
  background:red;
}

.project{
  height:80vh;
  min-width:300px;
  min-height:330px;
  background:yellow;
}

.coverImg{
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}


.projectTitle{
  position:relative;
  background:rgba(0,0,0,0.2);
  height : 100%;
  top:-100%;
  pointer-events: none;
}

.projectTitle p{
  position:absolute;
  font-size: 1.5vw;
  padding-left:4vw;
  color:white;
  z-index : 103;
}

.project:hover .projectTitle{
  background:rgba(0,0,0,0.13);
}

.number{
  top:0;
  left:0;
  margin-top:4vw;
  font-weight:lighter;
}

.category{
  bottom:2vw;
  left:0;
  margin-bottom:4vw;
  font-weight:lighter;
}

.title{
  bottom:0;
  left:0;
  margin-bottom:4vw;
  font-size: 1.8vw;
}

.transition{
  transition: all 0.5s ease-in;
}


.mProduct{
  background: url('img/bmock.png');
}

.mBlank{
  background: url('img/mockup.png');
}

.gif{
  width: 99.8%;
  border-radius: 0 0 0.2vw 0.2vw;
  margin-top: 2.49vw;
  margin-left: 0.03vw;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.mMondrian{
  background: url('img/mondrian.png');
}

.mZurinvest{
  background: url('img/Zurinvest.png');
}

.mIcons{
  background : url('img/carwash.png');
  border-radius: 0.3vw;
  background-position: center;
  width: 31vw;
  height: 22.5vw;
}

.mEdge{
  background : url('https://cdn.glitch.com/56ae4988-466f-444e-b04b-c397ceebccf5%2FAnimationE2.gif?v=1631182410757');
  border-radius: 0.3vw;
}

.mShapeIt{
  background: url('https://cdn.glitch.com/56ae4988-466f-444e-b04b-c397ceebccf5%2Fshapeit.png?v=1630868600313');
}

.mFinal{
  border-radius:0.2vw;
  overflow: hidden;
  height: 60vh;
}

.mBlueprinter{
  border-radius:0.2vw;
  overflow: hidden;
}


#finalVideo{
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#BlueprinterVideo{
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#pProduct > .coverImg{
  background:rgb(247 123 170);
}

#pBlueprinter > .coverImg{
  background:#00bbf3;
}

#pMondrian > .coverImg{
  background:#E73C34;
}

#pLilNasX > .coverImg{
  background:#fe852f;
}

#pIcons > .coverImg{
  background: #ffca10;
}

#pEdge > .coverImg{
  background : #aa47e8;
}

#pShapeIt > .coverImg{
  background:#1b942f;
}

#pFinal > .coverImg{
  background:#ff8b40;
}

.mIphone{
  width: calc(7.4vw + 17.25vh);
  height : calc(15vw + 35vh);
}

.mChrome{
  width:40vw;
  height : 22.5vw;
}

.mockup{
  background-size:cover;
  position:relative;
  margin : 0 auto;
  filter: drop-shadow( 0px 0px 10px rgba(0, 0, 0, 0.1) );
}

.mockup:hover {
  z-index : 102;
  filter: brightness(95%);
  cursor: pointer;
}


.projectOverlay{
  z-index: 300;
  width:100%;
  height: 100vh;
  position: absolute;
  color: #4a4a4a;
}

.projectH{
    position: fixed;
    width: 70%;
    background: white;
    padding-top: 80px;
    padding-bottom: 10px;
    top: 0;
}

#close{
  float:right;
  width:36px;
  height:36px;
  display: flex;
  position: Fixed;
  top: 24px;
  right: 24px;
  padding: 4px;
  border-radius: 8px;
  background-color: #ffffffad;
  backdrop-filter: blur(2px);
}

.wrapper2{
  width:100%;
}

.content{
  width:100%;
  height: 480px;
}

.first{
  margin-top: calc(5.5vw + 120px);
}

.last{
  height: 40px
}

.projectBG{
  z-index: 299;
  width:100%;
  height: 100vh;
  background : white;
  position: fixed;
}

.iconsImg1{
  background : url('img/01.jpg');
    background-size: cover;
  background-position: center;
}

.iconsImg2{
  background : url('img/02.jpg');
    background-size: cover;
  background-position: center;
}

.iconsImg3{
  background : url('img/03.jpg');
    background-size: cover;
  background-position: center;
}

#close{
  cursor: pointer;
}

#show1{
  display:none;
}

#show2{
  display:none;
}

#icons{
  display:none;
}

#edge{
  display:none;
}

#final{
  display:none;
}



.two-col{
  display: none ;
  width: 100%;
}

.sideWrapper{
  width: 300px;
  padding: 24px;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  background-color: #F5F5F5;
  box-sizing: border-box;
  z-index: 1000;
}

.spacer{
  width: 100%;
  height: 48px;
}

.mainWrapper{
  width: calc(100% - 348px);
  padding: 24px;
  overflow-y: auto;
  float: right;
  display: flex;
  justify-content: center;
}

.sideNav {
  width: 100%;
}

.sideNav .nav-item {
}

.sideNav .nav-item a {
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;

  font-family: Heebo;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem;

  display: flex;
  padding: 0.75rem 1.125rem;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.75rem;
  margin-bottom: 4px;
}

.nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sideNav .nav-item div .sub-item {
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;

  font-family: Heebo;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 171.429% */

  display: flex;
  align-self: stretch;
  padding-left:2.25rem;


}

.sideNav .nav-item a:hover, .sideNav .nav-item a.active {
  background-color: #FFF;
  color: #2D2D2D;
  fill: #2D2D2D;
}

.sideNav .nav-item a:hover path#Vector, .sideNav .nav-item a.active path#Vector{
  fill: #4e4e4e;
}


.sideNav .nav-item a.active::before {
  color: #2D2D2D;
}

.projectWrapper {
  width: 100%;
  max-width: 1000px;
}


.projectWrapper section {
  margin-bottom: 40px;
}

.projectWrapper img {
  max-width: 100%;
  height: auto;
}

.projectWrapper h1 {
  font-family: Heebo;
  margin-bottom: 1.5em;
  font-size: 3em;
  color: #000;
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.projectWrapper h2 {
  font-family: Heebo;
  font-size: 2em;
  color: #333;
  font-weight: 500;
  padding-bottom: 0.5rem;
  padding-top: 1rem;
}

.projectWrapper h3 {
  font-family: Heebo;
  font-size: 1.5em;
  color: #666;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.projectWrapper h4 {
  font-family: Heebo;
  font-size: 1.2em;
  color: #666;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.projectWrapper section {
  margin-bottom: 1.5em;
}

.projectWrapper img {
  max-width: 100%;
  height: auto;
}

.projectWrapper p {
  font-family: Heebo;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #585C62;
}

.projectWrapper ul p {
  margin-bottom: 1rem;
}

.projectTag {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.edgeTag {
  color: #aa47e8;
}

.finalTag{
  color: #ff8b40;
}

.BlueprinterTag{
  color: #00bbf3;
}

.videoInline, #image-compare{
  border-radius: 0.5rem;
  border: 2px solid #ececec ;
  margin-bottom: 2rem;
}


.imageCompare{
  height: 100%!important;
  max-width: unset!important;
}



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

  .nav{
     width:100%;
    height:700px;
    background:white;
    position : absolute;
  }
  .wrapper{
    float:left;
    margin-top:700px;
    width:100%;
    display:inline-grid;
    grid-template-columns: 1fr;
    background:red;
}

  .menu{
    margin-left :15%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .text1{
    font-weight:700;
    font-size:60px;
    margin-bottom:30px;
    line-height: 80px;
  }

  .text2{
    font-weight:200;
    padding-right:10%;
    font-size:20px;
  }

  .text3{
    font-size:60px!important;
    line-height: 80px!important;
  }

  .links{
    margin-top:40px;
    display:inline-flex;
    display: none;
  }

  .imgL{
    filter:invert(30%);
    width:45px;
    opacity:80%;
    margin-right:25px;
  }
  .imgL:hover{
    opacity:100%;
  }

  .contactB{
    background:#0096C7;
    width:250px;
    height:60px;
    border-radius:60px;
    margin-top : 50px;
    text-align: center;
    line-height: 60px;
    font-size:20px;
    color : white;
  }

  .button{
    width:150px;
  }

  .contactText{
    margin-bottom: 10px;
  }

  input{
    height: 50px;
  }

  input:first-child{
    margin-top:20px;
  }

  .line{
    margin-bottom: 50px;
  }

  .lastLine{
    margin-bottom: 0;
  }

  textarea{
    height: 40px;
  }

  .closeForm{
    top:10px;
    left:20px;
  }

  .project{height:70vh;}

  .projectTitle p{
    font-size: 20px;
  }

  .category{
    bottom:24px;
  }

  .title{
    font-size: 25px;
  }

  .mIphone{
    width:  calc((7.4vw + 17.25vh) * 1.2);
    height : calc((15vw + 35vh) * 1.2);
  }

  .mChrome{
    width:85vw;
    height : 47.9vw;
  }

  .gif{
    width: 99.7%;
    margin-top: 5.39vw;
    margin-left: 0.13vw;
    border-radius: 0 0 0.3vw 0.3vw;
  }

  .mBlank{
    border-radius: 0.4vw;
  }

  .mIcons{
    width: 85vw;
    height: 60vw;
    border-radius: 0.8vw;
  }

  .mEdge{border-radius: 0.8vw;}


  .mFinal{
    height : 50vh;
  }


  .wrapper2{
    width:100%;
  }

  .projectH{
    width: 85%;
    font-size: 10vw;
    padding-left: 0.5%;
    padding-right: 0.5%;
    left: 7%;
    padding-top: 50px;
    padding-bottom: 20px;
  }


  .first {
      margin-top: calc(10vw + 120px);
  }



  .sideWrapper{
    margin-left: -280px;
    transition: margin 0.3s;
  }

  .sideWrapper:hover{
    margin-left: 0px;
    transition: margin 0.3s;
  }

  .mainWrapper{
    width: calc(100% - 68px);
  }

  .projectWrapper h1 {
    font-size: 2.1em;
  }
  
  .projectWrapper h2 {
    font-size: 1.5em;
  }
  
  .projectWrapper h3 {
    font-size: 1.2em;
  }
  
  .projectWrapper h4 {
    font-size: 1em;
  }


}


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

  .menu{
    margin-left :15%;
  }

  .contactText{
    font-size: 13vw;
  }
}