img {
  position: relative;
  display: inline-block;

}

.fadein{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.one{ width: 45%; left: 10vw; top: 10vh;}
.two{ width: 60%; left: 30vw; top: 20vh;}
.three{ /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 40%; left: -1vw; top: 40vh;}
.four{width: 50%;  left: 3vw; top: 70vh; }


.row{
position: relative;
height: 600vh;

}
.menu_icon{
  width: 49px;
  height: auto;
  position: fixed;
  top:80px;
  right:80px;
  z-index: 1;
}



.fullsizePic{
height: 100vh;
background: url(../stylesheets/Process/fullsize.jpg) no-repeat center center;
background-size: cover;

}

.tab{
background: #E0E0E0;

}
.tab p{
color: #A38814;
font-size: 1.5em;
position: relative;
left: 50vw;
-webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
width: 50%;
text-align: center;
padding: 30px;
}


.topButton{
  visibility: hidden;
width: 15px;
height: 15px;
z-index: 50;
position: fixed;
bottom: 93px;
right: 95px;
padding: 15px;
background: #A38814;
border-radius: 2px;

}
.topButton img{
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%,50%);
}


body{
  font-family: 'Champagne-Limousines';
}
.container{
  padding-top: 50px;
  margin-top:  100px;
  /*position: relative;
  width: 600px;
  left: 50%;
  top: 130vh;
  transform: translate(-50%, 0);*/
}
.thumbnail-list {
  position: relative;
  width: 70vw;
  /*width: 552.44px;*/
  left: 50%;


  -webkit-transform: translate(-50%, 0);

          -ms-transform: translate(-50%, 0);

          transform: translate(-50%, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack:distribute;
      -webkit-justify-content:space-around;
      justify-content:space-around;
  padding: 0;
  flex-wrap: wrap;
}
.processStep{
  position: absolute;

  top: 0;
  left:0;
  width:100%;
  height: 100%;
  color: #A38814;
  text-align: center;
  opacity: 1;
}
.processStep p{
  font-family: 'Champagne-Limousines';
  font-size: 1.3vw;
  width: 100%;
  margin: 0;
  position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.processStep:hover{
  color: white;
}



.thumbnail-item {
  margin : 1.5vw;
  display: inline-block;
  position: relative;
  min-width: 18vw;
  max-width: 18vw;
  min-height: 18vw;
  max-height: 18vw;
  margin-bottom: 3vw;
  background: #1B1C21;
  overflow: hidden;
}



.thumbnail-image {
background: #1B1C21;
background-blend-mode: multiply;
width: 18vw;
height: 18vw;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;

}
.thumbnail-item:hover .thumbnail-image {
opacity: 0.4;
  -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
          transform: scale(1.2);
}


.vertical-line{
  position: relative;
  left: 50vw;
  -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  margin: 5vw 0;
}

.firstMaterial{
  padding-top:5vw;
  margin:0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
  /*width: 50%;
  position: relative;
  transform: translate(-50%, 3vw);
  left: 50%;*/
}
.left{
  width: 300px;

  color: rgb(27, 28, 33);
  font-size: 34px;
  font-family: 'Champagne___Limousines_Bold';
  text-align: right;
}

.right{

  font-size: 15pt;
  line-height: 36px;
  color: rgb(119, 119, 119);
  margin-left: 65.27px;
  width: 422px;
}





ul{
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}

.firstMaterialWithPhoto{
  margin:60px 0 0;
  padding: 0;

  list-style: none;
  text-align: center;
  width: 40%;
  position: relative;
  display: inline-block;

}

.firstMaterialWithPhoto .left{
  position: relative;
  right: 65.27px;
}


.firstMaterialWithPhoto .right{
    margin: 0;
    width: 100%;
    display: block;

}

.firstMaterialWithPhoto .right p{
  position: absolute;
  right: 65.27px;
  text-align: right;
  width: 310px;

}

.secondProcess{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.secondProcessOne{
  width: 50vw;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          -webkit-flex-grow: 2;
          flex-grow: 2;
  -ms-flex-preferred-size: 50%;
      -webkit-flex-basis: 50%;
      flex-basis: 50%;

}

.h3{
  font-size: 34px;
}




.secondSTwo{
  margin-top: 177px;
}

.makingMoldImgOne{
  float: left;
  opacity: 0;
width: 40.625vw;
margin-left: 7.958vw;
}
.makingMoldImgTwo{
  opacity: 0;
width: 37.5vw;
margin-top: 10vw;
float: left;
}

.secondMaterialWithPhoto{
/*  padding:60px 0 0 3vw;
  margin:0;
  list-style: none;
  text-align: center;
  width: 35vw;
  position: relative;
  display: inline-block; */

  margin:60px 0 0 0;
  padding: 0;
  padding-left: 65.27px;
  list-style: none;
  text-align: center;
  width: -webkit-calc(50% - 65.27px);
  width: calc(50% - 65.27px);
  position: relative;
  display: inline-block;

}

.secondMaterialWithPhoto .left{
  position: relative;
  font-size: 34px;
  text-align: left;
}
.secondMaterialWithPhoto .right{
  margin: 0;

  display: block;
}
.secondMaterialWithPhoto .right p{
  position: relative;

  text-align: left;
  width: 32.329vw;
}

.colorBox{
  margin-top: 150px;
  width: 100%;
  height: 200px;
  background: rgb(27, 28, 33);
  position: relative;
}
.colorBox p{
  margin:0; padding: 0;
  font-size: 32px;

  color: #A38814;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.lastPic{
  width: 100%;
  height:39.062vw;
  clear: both;
  padding-top: 150px;
  overflow: hidden;
}
.lastPic img{
  position: absolute;
  z-index: -1;
  display: block;
  height:39.062vw;
  width: 100%;
}
.lastPic li{
  color: #D3D3D3;
}

.margintopCenter{
  margin-top: 19.531vw;
  -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.box{
  position: absolute;
  z-index: 0;
  display: block;
  height:39.062vw;
  width: 100%;
  background: rgba(27,28,33,0.8);
}


.twoImg{
  margin-top: 130px;
  text-align: center;
}
.twoImg img{
  margin: 0 3%;
  width: 40%;
}

.secondSThree{
  padding: 150px 0;
}

.secondSThree img{
  width: 60%;
  height: 30vw;
  -o-object-fit: cover;
     object-fit: cover;

  float: right;
}
.Acetate{
  padding-top: 60px;
  list-style: none;
  width: -webkit-calc(40% - 65.27px);
  width: calc(40% - 65.27px);
  padding-right: 65.27px

}
.AcetateRight{

font-size: 15pt;
line-height: 36px;
text-align: right;
padding-left: 10vw;
color: rgb(119, 119, 119);

}
.winsor{
  padding-top: 150px;
  width: 100%;
  height: 30vw;
}
.winsor img{
  float: left;
  width: 60%;
  height: 30vw;
  -o-object-fit: cover;
     object-fit: cover;


}
.winsorText{
  margin: 60px 0 0 0;
padding: 0 0 0 65.27px;
list-style: none;
text-align: left;
width: 23%;
position: relative;
display: inline-block;
}
.winsorLeft{
  color: rgb(27, 28, 33);
  font-size: 34px;
  font-family: 'Champagne___Limousines_Bold';
}

.winsorRight{
  font-size: 15pt;
  color: rgb(119, 119, 119);
  line-height: 1.5;
}

.processof{
  width: 100%;
  height: 200px;
  background: #1B1C21;
  color: #A38814;
  font-size: 32px;
  font-family: 'cambriai', 'Droid Serif', serif;
  position: relative;

}
.processofCont{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

.lastFullsizeImg{
  height: 100vh;
  background: url(../stylesheets/Process/15.jpg) no-repeat center center;
  background-size: cover;
  margin-bottom: -40px;
}



.footer{
  margin-top: 0;
}

.title{
  width: 604px;
}



@media screen and (max-width: 768px) {
.main{
  height: -webkit-calc(100vh - 65px);
  height: calc(100vh - 65px);
}

.menu_icon{
  width: 20px;
  height: auto;
  top:30px;
  right:20px;
}

.title{
  width: 70%;
}
.scroll{
  width:10%;
  height: auto;
}



.fullsizePic{
  margin-bottom: 50px;
}

.container{
  padding-top: 0;
}



.tab p{
font-size: 14px;
text-align: center;
width: 80%;
}
.fadein{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.one{ width: 100%; left: 0; top: 10vh;}
.two{ width: 100%; left: 30vw; top: 20vh;}
.three{ /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 100%; left: -1vw; top: 40vh;}
.four{width: 100%;  left: 3vw; top: 70vh; }


.title{
  width: 84.921vw;
}

.thumbnail-list {
  margin: 0;
  width: 90vw;
  -ms-flex-pack: distribute;
      -webkit-justify-content: space-around;
      justify-content: space-around;
}

.thumbnail-item {
margin : 1.5vw;
display: inline-block;
position: relative;
min-width: 40vw;
max-width: 40vw;
min-height: 40vw;
max-height: 40vw;
margin-bottom: 3vw;
background: #1B1C21;
overflow: hidden;
}



.thumbnail-image {
background: #1B1C21;
background-blend-mode: multiply;
width: 40vw;
height: 40vw;
opacity: 0.2;
-webkit-transition: all 1s;
transition: all 1s;

}



.processStep p{
font-size: 14px;

}
.firstMaterial{
display: block;
padding-left: 20px;
padding-right: 20px;
}
.left{
line-height: 1.5;
font-size: 30px;
width: 100%;
text-align: left;
}

.right{
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-left: 0;
margin-top: 10px;
width: 100%;
}

.secondSTwo{
margin-top: 0px;
padding-left: 20px;
padding-right: 20px;
}
.secondSTwo img{
width: 100%;

margin: 0;
margin-top: 50px;
}
.secondMaterialWithPhoto{
margin: 0;
margin-top: 10px;
padding: 0;
width: 100%;
}
.secondMaterialWithPhoto .left{
font-size: 30px;

}
.secondMaterialWithPhoto .right p{
width: 100%;
margin: 0;
margin-top: 10px;
}

.lastPic{
height: 400px;
padding-top: 50px;
}
.lastPic img{
height: 300px;
-o-object-fit: cover;
   object-fit: cover;
}
.twoImg{
margin-top: 0;
}
.box{
height: 300px;
}

.secondSThree{
padding: 50px 0 0 0;
}

.margintopCenter{
margin:0;
padding:0;
margin-top: 150px;
padding-left: 20px;
padding-right: 20px;
}
.margintopCenter .left{
text-align: center;
}
.margintopCenter .right{
text-align: center;
}

.twoImg img{
width: 100%;
margin:0;
padding:0;
}

.secondSThree img{
width: 100%;
height: auto;
padding-left: 20px;
padding-right: 20px;
display: block;
}

.Acetate{
margin: 0;
padding: 0;
width: 100%;

margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
}

.AcetateRight{
padding: 0;
text-align: left;
}

.AcetateRight p{
margin: 0;
margin-top: 10px;
line-height: 1.5;
font-size: 16px;
}

.winsor{
height: auto;
padding-top: 50px;
padding-bottom: 50px;
}

.winsor img{
width: 100%;
height: auto;
padding-left: 20px;
padding-right: 20px;
}

.winsorText{
margin: 0;
padding: 0;
width: 100%;

margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
}

.winsorLeft{

font-size: 30px;
}
.winsorRight p{
margin: 0;
margin-top: 10px;
}
#Assembling{
text-align: center;
}
.processof{
font-size: 23px;
text-align: center;
width: 100%;
}

.topButton{
  right: 20px;
  bottom: 50px;
}
.topButton img{
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%,50%);

}



}