*{
  padding:0;
  margin:0;
  box-sizing: border-box;
  /*outline: 1px solid #f00 !important;*/
}

body {
  overflow-x: hidden;
  font-family: Oswald;
  font-size: 2vh;
  font-weight: 300;
  color: gray;
}

@font-face {
  font-family: 'hansonbold' ;
  src: url('./font/font');
}

@font-face {
  font-family: 'hansonbold';
  src: url('../fonts/hanson-webfont.woff2') format('woff2'),
  url('../fonts/hanson-webfont.woff') format('woff'),
  url('../fonts/hanson-webfont.woff') format('woff'),
  url('./font/hanson.otf');
  font-weight: normal;
  font-style: normal;
}

/* ONPOINT YELLOW: #ffd900 */
/* USE: Hanson for offline viewing */
/* USE: hansonbold for online viewing */
/* ALT + SHIFT + F = Format Code */

/*0000000000000000000000000000000000000000000000000000000000000000000000000 LOADING PAGE */

.loaderSKI {
  width: 20vh;
  aspect-ratio: 1;
  border-radius: 50%;
  border: .7vh solid;
  border-color: #000 #0000;
  animation: l1 .75s infinite;
  position: absolute;
}
@keyframes l1 {to{transform: rotate(.5turn)}}

.slant{
  width:100%;
}

.slant-graphic{
  height: 100vh;
  float: left;
  transform: translateX(-33.58vh);
}

.loaderlogoo{
  position: absolute;
}

.loaderlogo{
  width: 10vh;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 REVEAL */

.hidden {
  opacity: 0;
  filter: blur(2vh);
  transform: translateY(20%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 HEADER NAVIGATION */

.Header-section {
  display: flex;
  position: fixed;
  z-index: 5;
}

.HeaderLOGO{
  display: flex;
}

.HeaderLOGOGRAPHIC{
  height: 6.1vh;
  display: flex;
  margin-left: -2.5vh;
  z-index: -4;
  scale: 1.01;
  transform: translateY(0vh);
}

.HeaderYELLOW{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 8.8vh;
  align-items: center;
  height: 6.1vh;
  width: 100%;
  z-index: -5;
  position: fixed;
  box-shadow: 0px .3vh 2vh rgba(0, 0, 0, .3);  
  box-shadow: 0px 1vh 2vh rgba(0, 0, 0, .05);
  background-color: #ffd900;
}

.NAVBARTEXTCONAINER{
  display: flex;
  z-index: -6;
  gap: 2vh;
  text-transform:uppercase;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.7vh;
  transform: translateX(30%);
}

.WWorks{
  transition: .25s;
  text-decoration: none;
}

.HHome{
  transition: .25s;
  text-decoration: none;
}

.CContact{
  transition: .25s;
  text-decoration: none;
}

.WWorks:Hover{
  filter: blur(.2vh);
}

.HHome:Hover{
  filter: blur(.2vh);
}

.CContact:Hover{
  filter: blur(.2vh);
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 NEXT PAGE */

button {
  font-size: 4vh;
  color: #d1d1d1;
  background-color: rgba(255, 255, 255, .75);
  border-radius: 50%;
  width: 8vh;
  height: 8vh;
  border: none;
  box-shadow: 0px 1vh 2vh rgba(0, 0, 0, .05);
  transition: .5s;
  float: left;
  transform: translateY(1100%);
}

button:hover{
    filter: blur(.5vh);
    cursor: pointer;
}
/*0000000000000000000000000000000000000000000000000000000000000000000000000 NUMBERING */

.page0{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left: 100%;
  margin-top: 10vh;
  opacity: .3;
  transform: translateX(-19vh);
}

.page1{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left: 200%;
  margin-top: 10vh;
  opacity: .3;
  transform: translateX(-28vh);
}

.page2{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left: 300%;
  margin-top: 10vh;
  opacity: .3;
  transform: translateX(-29vh);
}

.page3{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left:300%;
  margin-top: 10vh;
  opacity: .3;
  z-index: 3;
  transform: translateX(17vh);
}

.page4{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left:500%;
  margin-top: 10vh;
  opacity: .3;
  transform: translateX(-29vh);
}

.page5{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  left:600%;
  margin-top: 10vh;
  opacity: .3;
  transform: translateX(-29vh);
}

.page6{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  margin-top: 10vh;
  left:700%;
  opacity: .3;
  transform: translateX(-29vh);
}

.page7{
  font-family: Hansonbold;
  color: #d1d1d1;
  position: absolute;
  font-size: 7vh;
  top:0;
  margin-top: 10vh;
  left:800%;
  opacity: .3;
  margin-top: 10vh;
  transform: translateX(-15vh);
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 0 */

.Welcome-Graphic0{
  height: 101vh;
}

.Description-Container0{
  top: 52%;
  right: 10vh;
  width: 75vh;
  display: block;
  margin: auto;
  position: absolute;
  transform: skewX(-17deg);
  box-shadow: 0px 1vh 2vh rgba(0, 0, 0, .05);
  padding-top: 2vh;
  padding-bottom: 4vh;
  padding-right: 1vh;
  padding-left: 1vh;
  background-color: white;
  z-index: 4;
  background: rgba(255, 255, 255, .50);
  backdrop-filter: blur(5vh);
}

.Title0{
  font-family: Hansonbold;
  font-size: 7vh;
  color: black;
  text-transform: uppercase;
  text-align: center;
  transform: skewX(17deg);
  line-height: 7vh;
}

.Description0{
  text-align: center;
  transform: skewX(17deg);
  padding-right: 5vh;
  padding-left: 5vh;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 SCROLLER */

.Scroller-Assist{
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: blue;
  z-index: 4;
  opacity: 0;
}

.SECTION1{
  position: fixed;
  width: 100%;
  display: flex;
}

.SECTION1 section{
  min-width:100%;
  height: auto;
  height: 100vh;
  display:flex;
  align-items: center;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 1 */

.Welcome-Section1{
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-top: 6.2vh;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-left: 17vh;
  padding-right: 17vh;
  gap:3vh;
}

.Welcome-Description-Container1{
  width: 50%;
}

.Welcome-Title1{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text1{
  font-family: oswald;
  text-align: justify;
}

.Welcome-Graphic-Container1{
  width: 50%;
}

.Welcome-Graphic1{
  width: 100%;
  justify-content: center;
  object-fit: cover;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 2 */

.Welcome-Section2{
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-top: 6.2vh;  
  display: flex;
  align-items: center;
  padding-right: 17vh;
  padding-left: 10vh;
}

.Welcome-Title2{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  margin-right: 10vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text2{
  font-family: oswald;
  text-align: justify;

}

.Welcome-Description-Container2{
  width: 40%;
}

.Welcome-Graphic2{
  width: 100%;
  justify-content: center;
  object-fit: cover;
  padding-right: 2vh;
}

.Welcome-Graphic-Container2{
  width: 60%;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 3 */

.whole-Container3{
  padding-top: 10vh;
  padding-bottom: 10vh;
  display: flex;
  align-items: center;
  margin-top: 6.2vh;  
}

.Left-Side3{
  width: 50%;
  align-items: center;
}

.Welcome-Title3{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  margin-right: 10vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
  margin-left: 17vh;
}

.Welcome-Text3{
  font-family: oswald;
  text-align: justify;
  margin-left: 17vh;
}

.Right-Side3{
  width: 50%; 
    float: right;

}

.Welcome-Graphic3{
  width: 100%;
  transform: translateX(.05vh);

}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 4 */

.Whole-Container4{
  display: flex;
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-top: 6.2vh;  
  align-items: center;
}

.Left-Side4{
  width: 50%;
  align-items: center;
}

.Welcome-Title4{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text4{
  text-align: justify;
  margin-right: 17vh;
}

.Right-Side4{
  width: 50%;
}

.Welcome-Graphic4{
  width: 100%;
    transform: translateX(-.05vh);

}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 5 */

.Welcome-Section5{
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-top: 6.2vh;  
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-right: 17vh;
  padding-left: 17vh;
  gap: 3vh;
}

.Welcome-Title5{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text5{
  font-family: oswald;
  text-align: justify1
}

.Welcome-Description-Container5{
  width: 50%;
  transform: translateX(-1vh);

}

.Welcome-Graphic-Container5{
  width: 50%;
}

.Welcome-Graphic5{
  width: 100%;
  justify-content: center;
  object-fit: cover;
  float: right;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 6 */

.Whole-Container6{
  display: flex;
  padding-top: 10vh;
  padding-bottom: 10vh;
  margin-top: 6.2vh;  
  align-items: center;
  padding-right: 17vh;
  padding-left: 17vh;
}

.Left-Side6{
  width: 50%;
  align-items: center;
  padding-left: 4vh;
}

.Welcome-Title6{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text6{
  font-family: oswald;
  text-align: justify;
}

.Right-Side6{
  width: 50%;
}

.Welcome-Graphic6{
  width: 80%;
  float: right;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 PAGE 7 */

.Welcome-Section7{
  display: flex;
  align-items: center;
  padding-left: 17vh;
  gap: 5vh;
  margin-top: 6.2vh;   
}

.Welcome-Description-Container7{
  width: 40%;
  padding-bottom: 3vh;
}

.Welcome-Title7{
  font-family: Hansonbold;
  text-transform: uppercase;
  font-size: 7vh;
  padding-bottom: .5vh;
  line-height: 6vh;
  color: black;
}

.Welcome-Text7{
  font-family: oswald;
  text-align: justify;
}

.Welcome-Graphic-Container7{
  width: 60%;
}

.Welcome-Graphic7{
  width: 100%;
  float: right;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 SCROLLBAR */

::-webkit-scrollbar{
  width: 0vh;
}

::-webkit-scrollbar-track{
  background: white; 
}

::-webkit-scrollbar-thumb{
  background: #d1d1d1;
  border-radius: 3vh;
}

::-webkit-scrollbar-thumb:Hover{
  background: grey;
}

/*0000000000000000000000000000000000000000000000000000000000000000000000000 SOY MEDIA QUERY */

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

/* (: CREATED BY JOHN BENEDICT MANGCO :) */