*{
        box-sizing: border-box;
    }






    html, body {
          
            width: 100%;
            height: 100%;
            

        }
    
    body{
       
        background-color: #F94661;
        margin: 0;
        padding: 0;
        font-family: 'Zilla Slab', serif;
        color: #000000;
        transition: width 1s;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        overflow-y: scroll;
        
        -webkit-overflow-scrolling: touch;
        -webkit-font-smoothing: antialiased;

    }

#scene2{
  

}

.title{
  position: absolute;
  text-align: center;
  width: 100vw;
  top: 50px;
  opacity: 0.3;
  color: #fff;
  font-size: 10px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;

}

.wordmark{
  background:url('../img/wordmark.svg') center center;
  background-repeat: no-repeat;
   background-size:cover;
  color: #fff;
  position: absolute;
  width: 600px;
  height: 80px;
  bottom:30px;
  text-align: center;
  z-index: 1000;
  
}

.container{
 /*     width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;*/
  display: flex;
justify-content: center;
align-items: center;

}



.image-container{
  z-index: -50;
  position: absolute;
  top: 0;
  left:0;
  background:url('../img/background2-1.gif') center center;
        background-size:cover;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: all 2s ease-out;
}

.image-container.hover{
  opacity: 1;
}

.image-container2{
  z-index: -50;
  position: absolute;
  top: 0;
  left:0;
  background:url('../img/background1-3.gif') center center;
        background-size:cover;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: all 2s ease-out;
}

.image-container2.hover{
  opacity: 1;
}



#Layer_1{

height: 50vh;
width: auto;
/*margin-top: 25vh;*/

}

.logo{
	/*transform: scale(0.5);*/
	  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: dash 2s ease 1.5s forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}



.menu-item{
    color: #F94661;
   /* background-color: blue;*/
  
  float: none;
  position: absolute;
  width: 50vw;
  height: 50vh;
  right: 0;
  top: 25vh;
  
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 1s ease-out;
}

.menu-item:hover{
  
  /*transform: translate(80%, 58%);*/
}


.item1{
  position: absolute;

  transform: translateX(0px);

 transition: all 300ms ease-out;
}

.item1.hover{
  color: #05005E;
  transform: translateX(10px);
}



.item1-bg{
position: absolute;
background-color: #05005E;

opacity: 0;
width: 200vw;
height: 100vh;
top: 50vh;


transform: translateX(50vw) rotate(-45deg) ;
transition: all 500ms cubic-bezier(0.935, 0.010, 0.250, 0.995); /* custom */
}

.item1-bg.hover{
transform: translateX(-10%) rotate(-45deg) ;
opacity: 1;
background-color: #F94661;
}
/*#item1:hover + #item1-bg{
transform: rotate(45deg) translateX(0px);
}*/


.contact-box{
  position: absolute;
/*  background-color: green;*/
  width: 25vw;
  height: 50vh;
  margin-top: 20px;
  margin-right: 40px;
  opacity: 0;
  color: white;
  line-height: 20px;
  transform: translateX(10vw);

  transition: all 500ms cubic-bezier(0.935, 0.010, 0.250, 0.995); /* custom */

}

.contact-box.hover{
  transform: translateX(0vw);
  opacity: 1;

}

.portfolio-box{
  position: absolute;
  width: 25vw;
  height: 50vh;
  margin-top: 20px;
  margin-right: 40px;
  opacity: 0;
  color: white;
  line-height: 20px;
  
  transform: translateX(-10vw);

  transition: all 500ms cubic-bezier(0.935, 0.010, 0.250, 0.995); /* custom */

}

.portfolio-box.hover{
  transform: translateX(0vw);
  opacity: 1;

}



.menu-item2{
  color: #F94661;
  
  position: absolute;
  width: 50vw;
  height: 50vh;
  right: 0;
  top: 0;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;




  transition: all 1s ease-out;
}

.item2{
 position: absolute;
 color: #F94661
 transform: translateX(0px);

 transition: all 300ms ease-out;

}

.item2.hover{
 
 color: #05005E;
 transform: translateX(10px);

}

.item2-bg{
  position: absolute;
  background-color: #05005E;
  width: 200vw;
  height: 100vh;
  top: 20vh;

  transform: translateX(100vw) rotate(45deg) ;
  transition: all 500ms cubic-bezier(0.935, 0.010, 0.250, 0.995); /* custom */
}

.item2-bg.hover{
  transform: translateX(15vw) rotate(45deg) ;
  background-color: #F94661;
}


/*#item1:hover + #item1-bg{
transform: rotate(45deg) translateX(0px);
}*/

.menu-item3{
  color: #F94661;
  
  position: absolute;
  width: 50vw;
  height: 50vh;
  left: 0;
  top: 0;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 1s ease-out;
}

.menu-item4{
  color: #F94661;

/*  background-color: green;*/
  position: absolute;
  width: 50vw;
  height: 50vh;
  left: 0;
  top: 25vh;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 1s ease-out;
}


canvas#scene2{
  transition: all 1s ease-out;

}

canvas#scene{
  transition: all 1s ease-out;

}




.item4-bg{
position: absolute;
background-color: #05005E;
opacity: 0;
width: 200vw;
height: 100vh;
top: 50vh;

transform: translateX(-100vw) rotate(45deg) ;
transition: all 500ms cubic-bezier(0.935, 0.010, 0.250, 0.995); /* custom */
}

.item4-bg.hover{
transform: translateX(-80vw) rotate(45deg) ;
background-color: #F94661;
opacity: 1;
}

.item4{
  position: absolute;
  transform: translateX(0px);

 transition: all 300ms ease-out;
}

.item4.hover{
  color: #05005E;
  transform: translateX(10px);
}

#clipPath2{

	/*transform: translateX(0px);*/

  animation: popup 2s  ease  2s forwards;
   
	
}

@keyframes popup {
        0%  {transform: translateX(10px)}
      
      100%{transform: translateX(0px)}
    }

.logo-part2 {
  fill-opacity: 0;
  clip-path: url(#clipPath2);
  /*transform: translateX(0px);*/
   animation: popupo 2s  ease  2s forwards;
  
}

/*
.sampleClass {
  float:none;
}

@media only screen and (max-width: 600px){
  .sampleClass {
    float:left;
  }
}*/



@media (max-width: 1400px) {
  #Layer_1{
    transform: scale(0.75);
  }

 
}



@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */


       #Layer_1{
        transform: scale(0.75);
        margin: 50px;
      }

      .menu-item{
         
        float: left;
        width: 100vw;
        top: 50vh;

      }

      .menu-item4{
        width: 100vw;

        top: 0;

      }

      .wordmark{
       
        bottom: 0px;
      }

    
      .js .page{
        padding: 0;
      }


      .item1-bg{
        display: none;
      }
      .item4-bg{
        display: none;
      }

      .image-container{
         display: none;
      }
       .image-container2{
         display: none;
      }

    
  }

  @media (max-width: 600px) {
           #Layer_1{
        transform: scale(0.75);
        margin: 50px;
      }

      .menu-item{
        
        float: left;
        width: 100vw;
        top: 50vh;

      }

      .menu-item4{
        width: 100vw;
        top: 0;

      }

      .wordmark{
       
        bottom: 0px;
      }

    
      .js .page{
        padding: 0;
      }


      .item1-bg{
        display: none;
      }
      .item4-bg{
        display: none;
      }

      .portfolio-box{
        display: none;
      }

      .contact-box{
        display: none;
      }

      .image-container{
         display: none;
      }
       .image-container2{
         display: none;
      }
  }

@keyframes popupo {
        0%  {fill-opacity: 0;}
      
      100%{fill-opacity: 1;}
    }