@media (max-width: 700px) {
 nav ul, nav .contain{
   display: none !important;
 }
 .canvas {
    width: 160vw !important;
}
 #maintext {
   width: unset !important;
   padding-top: 26vh !important;
 }
 #otherHeaderText {
   display: none !important;
 }
 #mobileHeaderText {
   display: block !important;
 }
 #mobileHeaderTextParent {
   /* left: 5vw !important; */
 }
 #maintext span {
   font-size: 14vw !important;
   line-height: 1.1em !important;
   letter-spacing: -0.75vw !important;
 }
 #mainoptions {
   margin-top: 35vh !important;
   transform: scale(0.8) translateX(-12.5%)!important;
 }
 #headeroption3 {
  margin-left: 0vw !important;
 }
 #mainoptions a {
   font-size: 7vw !important;
   line-height: 1.6em !important;
   letter-spacing: -0.9px !important;
   padding: 2vw 3.5vw !important;
    border-radius: 10px;
 }

 .scroll-indicator-controller {
     left: 1.8vw !important;
     height: 77.5vh !important;
 }

 .coldlogo {
   left: 10% !important;
 }
 .burger {
   right: 3vh !important;
 }

 .mmopen {
   margin-left: 20vw !important;
 }
 .mobilemenu {
   padding-top: 16vh !important;
   width: 80vw !important;
 }
 .navmessage {
   margin-left: 7.5vw !important;
   width: unset !important;
 }
 .navmessage a {
   line-height: 120% !important;
   font-size: 8vw !important;
 }
 .navsuboptions .navmessage a {
   font-size: 6vw !important;
 }
 .navsuboptions .navmessage {
   height: 6vh !important;
 }
 #navbreak {
   height: 10vh !important;
 }


 #statement {
   padding: 30vh 7vw 25vh !important;
 }
 #statement h1:nth-child(1) {
   font-size: 4vw !important;
 }
 #statementtext {
   font-size: 5.2vw !important;
   line-height: 1.25em !important;
   letter-spacing: 1px !important;
 }

 #maintitle h3 {
   font-size: 15vw;
   letter-spacing: -4px !important;
   margin: 0 0 0pt !important;
   padding: 6vh 0 0vh !important;
 }

 #maintitle h1 {
    transform: translateY(450%)  !important;
    letter-spacing: -1px  !important;
    font-size: 2.5vw  !important;
  }

 #secServices {
    padding-top: 40vh;
}

 .servicesSection {
     min-height: unset !important;
 }
 /* .servicesSection-1 {
   padding-top: 5vh;
 } */
 .servicesWrap {
   height: 70vh !important;
 }
 .servicesChild {
   width: unset !important;
   font-size: 4vh !important;
   right: unset !important;
   left: 8% !important;
 }
 .servicesChild2 h2, .servicesChild2 span, .servicesChild2 p   {
   letter-spacing: -0.6px !important;
   font-size: 2.2vh !important;
 }
 .servicesChild2 .br {
    margin: 0.9vh 0 !important;
}
.contactButton {
    padding: 1.2vh !important;
}
 .contactButton span {
   font-size: 3vw !important;
 }
 #portContactButton span {
    font-size: 2.2vw !important;
}

 #serviceImage1 {width: 85% !important;height: 105%;transform: translate(25vw,8vh) !important;}
 #serviceImage2 {width: 90% !important;height: 105%;transform: translate(32vw, 9vh) !important;}
 #serviceImage3 {width: 105% !important;height: 110%;transform: translate(15vw, 10vh) !important;}

 #secPortfolio #maintitle {
   transform: skewY(-10deg) translate(0vh,2vh) scale(1.2) !important;
 }
 .portProject {
   border: 0.5pt dashed rgba(224,224,224, 0.7) !important;
 }
 #portProject1 {width: 62vw !important;height: 54vw !important;top: 9vw !important;left: 3vw !important;}
 #portProject2 {width: 58vw !important; height: 54vw !important; top: 92vw !important; left: 11vw !important;}
 #portProject3 {width: 57vw !important; height: 50vw !important; top: 49vw !important; left: 40vw !important;}
 #portProject4 {width: 65vw !important; height: 40vw !important; top: 175vw !important; left: 6vw !important;}
 #portProject5 {width: 60vw !important; height: 37vw !important; top: 143vw !important; left: 35vw !important;}
 #portProject6 {width: 56vw !important; height: 35vw !important; top: 210vw !important; left: 40vw !important; z-index: 2 !important;}
 .projectInfo {
   line-height: 110% !important;
   letter-spacing: -0.1px !important;
   font-size: 2.5vw !important;
 }
 #portProject1 .projectInfo span:nth-child(1) {
   font-size: 5.5vw !important;
 }
 #portProject1 .projectInfo span:nth-child(2) {
   line-height: 110% !important;
   letter-spacing: -0.1px !important;
   font-size: 2.5vw !important;
 }
 .projectInfo span:nth-child(2) {
   padding-top: 1.5vh !important;
   font-size: 4.45vw !important;
 }

 #secHowIndex {
   margin-top: 0vh !important;
 }
 .secHow #maintitle {
   transform: skewY(-10deg) translate(0vh,2vh) scale(1.2) !important;
 }
 .howStepsContainer {
   margin-left: 9% !important;
   width: 90% !important;
 }
 .howSteps span {
   line-height: 135% !important;
   letter-spacing: -0.39vw !important;
   font-size: 6vw !important;
 }

 .grid-container {
   height: 145vh !important;
   margin-top: 15vh !important;
 }

 .scrollHalf {
   position: absolute !important;
   border: 2px dashed rgba(225,225,225,0.6) !important;
   box-shadow: -5px -5px 25px #1f1f1f !important;
   filter: brightness(.5) !important;
   border-radius: 2pt !important;
 }
 .scrollHalfWrapL .scrollHalf:nth-child(1) {
   width: 65vw !important;
   height: 60vw !important;
   top: 75vw !important;
   left: 10vw !important;
   z-index: 1 !important;
 }
 .scrollHalfWrapL .scrollHalf:nth-child(2) {
   width: 45vw !important;
   height: 40vw !important;
   top: 60vw !important;
   left: 5vw !important;
   z-index: 3 !important;
 }

 .scrollHalfWrapR .scrollHalf:nth-child(1) {
   width: 65vw !important;
   height: 60vw !important;
   top: 75vw !important;
   left: 27.5vw !important;
   z-index: 1 !important;
 }
 .scrollHalfWrapR .scrollHalf:nth-child(2) {
   width: 45vw !important;
   height: 40vw !important;
   top: 60vw !important;
   left: 50vw !important;
   z-index: 3 !important;
 }

 .scrollHalfWrapR, .scrollHalfWrapL {
   position: absolute !important;
   top: 0 !important;
   right: 0 !important;
   height: 100% !important;
   width: 100% !important;
   filter: drop-shadow(-15px 20px 12px #0f0f0f) !important;
 }
 #point1 {
   margin-top: -5vh !important;
 }
 .point {
   padding: 2rem;
   margin-bottom: unset !important;
 }
 .point img {
   width: 100% !important;
   height: 100% !important;
 }
 .scrollHeader .point {
   align-items: unset !important;
   padding: 17vh 4rem !important;
 }
 .point article {
   flex-basis: 78% !important;
 }

 .point .articleL {
   margin-left: 9vw !important;
 }
 .point .articleR {
   margin-left: 20vw !important;
 }

 .point h1, .point h3 {
   font-size: 9vw !important;
   margin-bottom: 0vh !important;
 }
 .point p {
   font-size: 2.5vw !important;
 }

 .contactWrap {
   padding: 10vh 0vw 0 0vw !important;
   flex-direction: column !important;
   transform: scale(0.90) !important;
 }
 .contactDetails {
    width: 100% !important;
    margin-right: 0% !important;
    padding-left: 0vw !important;
 }
 .contactDetails span {
   font-size: 5vw !important;
   letter-spacing: -1.4px !important;
 }
 .contactform {
   width: 100vw !important;
   margin: 0vh 0vw 10vh 0vw !important;
   padding: 0vh !important;
 }
 .contactform input, .contactform select, .contactform option, .contactform textarea, .contactform input::placeholder, .contactform p, .contactform textarea::placeholder {
   font-size: 2.5rem !important;
 }

 #bookBody{
    font-size: 3.5vw !important;
    line-height: 110% !important;
    letter-spacing: -1.2px !important;
 }


 #quotesubmit {
     height: 18vh !important;
 }
 #quotesubmit input {
     padding: 20pt !important;
 }
 .brmobile {
   display: none !important;
 }
 .mobileShow {
   display: block !important;
 }
 .pointButton {
   right: 4vh  !important;
   bottom: 4vh !important;
 }
 .pointButton span{
   font-size: 4.5vw !important;
 }

 footer {
   padding: 2vh 2vh 2vh 2vh !important;
 }
 .footLeft {
   font-size: 3vw !important;
 }
 .contactMethods a {
   font-size: 4.5vw !important;
 }
 .footRight a {
   background-size: 0% 0.4vh!important;
 }
 .footLink:hover, .footRight a:hover {
   background-size: 100% 0.4vh!important ;
 }
}


@media (max-width: 1100px) and (min-width: 700px) {
 nav ul {
   display: none !important;
 }
 #maintext {
   width: unset !important;
 }
 #otherHeaderText {
   display: none !important;
 }
 #mobileHeaderText {
   display: block !important;
 }
 #maintext span {
   font-size: 12vw !important;
   line-height: 1.15em !important;
   letter-spacing: -0.75vw !important;
 }
 #mainoptions {
   margin-top: 45vh !important;
 }
 #mainoptions a {
   font-size: 5vw !important;
   line-height: 1.6em !important;
   letter-spacing: -0.9px !important;
 }

 .mmopen {
   margin-left: 40vw !important;
 }
 .mobilemenu {
   padding-top: 16vh !important;
   width: 60vw !important;
 }
 .navmessage {
   margin-left: 7.5vw !important;
 }
 .navsuboptions .navmessage a {
   line-height: 120% !important;
   font-size: 3.5rem !important;
 }

 .scroll-indicator-controller {
   left: 2.5vw;
 }

 #statement {
   padding: 55vh 7vw 25vh !important;
 }
 #statement h1:nth-child(1) {
   font-size: 3.5vw !important;
 }
 #statementtext {
   font-size: 5.5vw!important;
   line-height: 1.25em!important;
   letter-spacing: 2px!important;
 }

 #maintitle h3 {
   letter-spacing: -8px !important;
   margin: 0 0 0pt !important;
   padding: 6vh 0 0vh !important;
 }

 #secServices{
  padding-top: 60vw;
 }
 
 .servicesChild {
   width: 60% !important;
   font-size: 4vh !important;
   right: unset !important;
   left: 10% !important;
 }
 .servicesChild2 h2, .servicesChild2 span, .servicesChild2 p {
   letter-spacing: -0.6px !important;
   font-size: 2.2vh !important;
 }
 .contactButton span {
   font-size: 2vw !important;
 }
 #serviceImage1 {width: 85% !important;height: 80%;transform: translateX(15vw) !important;}
 #serviceImage2 {width: 90% !important;height: 80%;transform: translate(15vw, 0vh) !important;}
 #serviceImage3 {width: 105% !important;height: 100%;transform: translate(8vw, -3vh) !important;}

 #secPortfolio #maintitle {
   transform: skewY(-10deg) translate(0vh,2vh) scale(1.2) !important;
 }
 #portProject1 {width: 56vw !important;height: 48vw !important;top: 9vw !important;left: 4vw !important;}
 #portProject2 {width: 51vw !important; height: 45vw !important; top: 75vw !important; left: 13vw !important;}
 #portProject3 {width: 45vw !important; height: 45vw !important; top: 36vw !important; left: 50vw !important;}
 #portProject4 {width: 50vw !important; height: 30vw !important; top: 136vw !important; left: 6vw !important;}
 #portProject5 {width: 45vw !important; height: 37vw !important; top: 112vw !important; left: 47vw !important;}
 #portProject6 {width: 56vw !important; height: 35vw !important; top: 164vw !important; left: 40vw !important; z-index: 2 !important;}
 .projectInfo {
   line-height: 110% !important;
   letter-spacing: -0.1px !important;
   font-size: 2.5vw !important;
 }
 #portProject1 .projectInfo span:nth-child(1) {
   font-size: 5.5vw !important;
 }
 #portProject1 .projectInfo span:nth-child(2) {
   line-height: 110% !important;
   letter-spacing: -0.1px !important;
   font-size: 2.5vw !important;
 }
 .projectInfo span:nth-child(2) {
   padding-top: 1.5vh !important;
   font-size: 4.45vw !important;
 }


 .secHow #maintitle {
   transform: skewY(-10deg) translate(0vh,6vh) scale(1.2) !important;
 }
 .howStepsContainer {
   margin-left: 7.7% !important;
   width: 68% !important;
 }
 .howSteps span {
   font-size: 5vw !important;
 }

 .grid-container {
   height: 145vh !important;
 }


 .contactWrap {
   padding: 24vh 0vw 0 0vw !important;
   /* flex-direction: column; */
 }
 .contactDetails {
     width: 45% !important;
     margin-right: 0% !important;
 }
 .contactDetails span {
   font-size: 4vw !important;
   letter-spacing: -1.4px !important;
 }
 .contactDetails .layer {
   transform: translate(2.5vw, -4vh) !important;
 }
 .contactform {
   width: 49% !important;
   margin: 3vh 1vw 10vh 1vw !important;
   padding: 5vh !important;
 }
 .contactform input, .contactform select, .contactform option, .contactform textarea, .contactform input::placeholder, .contactform p, .contactform textarea::placeholder {
   font-size: 2.5rem !important;
 }
 #quotesubmit {
     height: 13vh !important;
 }
 #quotesubmit input {
     padding: 20pt !important;
 }
 .brmobile {
   display: none !important;
 }
 .mobileShow {
   display: block !important;
 }

 footer {
   padding: 2vh 2vh 2vh 2vh !important;
 }
 .footLeft {
   font-size: 1.5vw !important;
 }
 .contactMethods a {
   font-size: 4.5vw !important;
   line-height: 110% !important;
 }

}


@media (min-width: 700px) and (max-width: 875px) {
  .scrollHalfWrapL .scrollHalf:nth-child(1) {
    width: 65vw !important;
    height: 60vw !important;
    top: 65vw !important;
    left: 15vw !important;
    z-index: 1 !important;
  }
  .scrollHalfWrapL .scrollHalf:nth-child(2) {
    width: 45vw !important;
    height: 40vw !important;
    top: 47vw !important;
    left: 8vw !important;
    z-index: 3 !important;
  }

  .scrollHalfWrapR .scrollHalf:nth-child(1) {
    width: 65vw !important;
    height: 60vw !important;
    top: 65vw !important;
    left: 27.5vw !important;
    z-index: 1 !important;
  }
  .scrollHalfWrapR .scrollHalf:nth-child(2) {
    width: 45vw !important;
    height: 40vw !important;
    top: 46vw !important;
    left: 50vw !important;
    z-index: 3 !important;
  }

  .scrollHalfWrapR, .scrollHalfWrapL {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 100% !important;
    filter: drop-shadow(-15px 20px 12px #0f0f0f) !important;
  }
  #point1 {
    margin-top: -5vh !important;
  }
  .point {
    padding: 6rem !important;
  }
  .point .articleL {
    margin-left: 5vw !important;
  }
  .point .articleR {
    text-align: right !important;
    margin-left: 25vw !important;
  }

  .scrollHalf {
    position: absolute !important;
    border: 2px dashed rgba(225,225,225,0.6) !important;
    box-shadow: -5px -5px 25px #1f1f1f !important;
    filter: brightness(.5) !important;
    border-radius: 2pt !important;
  }
  .point img {
    width: 100% !important;
    height: 100% !important;
  }
  .scrollHeader .point {
    align-items: unset !important;
    padding: 15vh 4rem !important;
  }
  .point article {
    flex-basis: 78% !important;
  }
  .point h1, .point h3 {
    font-size: 6.5vw !important;
  }
  .point p {
    font-size: 2vw !important;
  }
  .pointButton {
    right: 4vh  !important;
    bottom: 4vh !important;
    padding: 3vh !important;
  }
  .pointButton span{
    font-size: 3vw !important;
  }
}
@media (min-width: 875px) and (max-width: 1100px) {
  .point h1, .point h3 {
    font-size: 4.5vw !important;
  }
  .point p {
    font-size: 1.15vw !important;
  }
  .pointButton span{
    font-size: 2.25vw !important;
  }
}

@media (min-width: 800px) and (max-width: 1150px) {
  #maintext span {
     font-family: 'Roboto', sans-serif !important;
     font-weight: 600 !important;
     font-size: 9vw !important;
     line-height: 1em !important;
     letter-spacing: -4px !important;
     text-align: left !important;
   }
   #maintext {
     padding-top: 32vh !important;
   }
   #mainoptions a {
       font-size: 3vw !important;
   }
   #mainoptions {
     margin-top: 18vh !important;
   }
   #headeroption3 {
    margin-left: 0vw !important;
   }
   #mobileHeaderText {
     display: none !important;
   }
   #otherHeaderText {
     display: block !important;
   }
   #statementtext {
     font-size: 4vw!important;
   }
   .contactButton span {
     font-size: 1.5vw !important;
   }
}

@media (min-width: 1100px) and (max-width: 1310px) {
  nav li a {
   font-size: 1.5vw !important;
 }
 nav ul {
   margin-right: 5vw !important;
 }
 .mmopen {
   margin-left: 55vw !important;
 }
 .mobilemenu {
   padding-top: 16vh !important;
   width: 60vw !important;
 }
  .contactWrap {
    padding: 8vh 2vh !important;
  }
}



@media (min-width: 1100px) {
 #mobileHeaderText {
   display: none !important;
 }
 #otherHeaderText {
   display: block !important;
 }

 .mobileShow {
  display: none;
 }

.workContain {
  transform: scale(0.85);
}

}