body {
  background: url('../backgrounds/noisetrans.png') repeat;
}

#header {
  /* height: 100vh; */
}

#headeroverlay {
  background: linear-gradient(180deg,rgba(14,14,14,0) 40%,rgba(14,14,14,0.6) 85%, rgba(14,14,14,1) 100%);
  width: 100%;
  /* height: 100%; */
  position: absolute;
  top: 0;
  z-index: 2;
}

#trail, #swarm {
  position: relative;
  z-index: 1;
}

#maintext {
  position: absolute;
  padding-top: 26vh;
  top: 0;
  left: 10%;
  height: 100%;
  width: 100%;
  display: block;
  align-items: center;
  z-index: 3;
}

#maintext span {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 9vw;
  line-height: 1em;
  letter-spacing: -6px;
  color: #e5e5e5;
  /* text-transform: uppercase; */
}

#mainoptions {
  position: relative;
  margin-top: 10vh;
}

#mainoptions a {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 2vw;
  line-height: 1.6em;
  letter-spacing: -1px;
  color: #e5e5e5;
  padding: 1vw;
  /* background: rgba(255, 255, 255, 0.8); */
  border: 1px solid white;
  border-radius: 10px;
  /* text-transform: uppercase; */
  text-decoration: none;
   background-image: linear-gradient(#5182BC, #5182BC);
   background-size: 0% 0.1em;
   background-position-y: 100%;
   background-position-x: 0%;
   background-repeat: no-repeat;
   transition: all 0.2s ease-in-out;
}
#mainoptions a:hover, #mainoptions a:active, #mainoptions a:focus {
  background-size: 100% 0.1em;
  background: rgba(255, 255, 255, 0.8);
  color: #222;
}

#secStatement {
  background: linear-gradient(180deg, rgba(14,14,14,1) 0%, rgba(14,14,14,0) 15%);
  z-index: 2;
  position: relative;
}
#statement {
  padding: 55vh 0vw 30vh 0vw;
}
#statement p:nth-child(1) {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 600;
  font-size: 1.8vw;
  text-align: justify;
  line-height: 0.2em;
  letter-spacing: -1.5px;
  color: #e5e5e5;
  width: 100%;
  font-style: italic;
}
#statementtext {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 600;
  font-size: 2.8vw;
  text-align: justify;
  line-height: 1.2em;
  letter-spacing: 1px;
  color: #e5e5e5;
  width: 100%;
  font-style: normal;
}

.clutchWidget {
  background: rgba(250, 250, 250, 0.8);
  border-radius: 6px;
  width: 240px;
  /* height: 60px; */
  display: flex;
  align-items: center;
  padding: 1vw;
  justify-content: center;
  transform: scale(0.8) translateX(-12%);
}

/* #servicesMaster {
  position: relative;
}
#servicesContainer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
} */
#servicesContain {
  height: 70vh;
  /* background: #000; */
  display:block;
  position:absolute;
  overflow:hidden;
  z-index: 1;
}
.servicesSection{
  /* border:  2px solid blue; */
  min-height: 80vh;
}
.servicesWrap {
  width: 100%;
  height: 90vh;
  position: relative;
}
.servicesParent, .servicesImage, .servicesChild {
  position: absolute;
  border-radius: 8px;
}
.servicesParent {
  width: 100%;
  height: 100%;
}
.servicesImage {
  /* width: 55%;
  height: 80%; */
  /* background: #00b36b; */
  top: 15%;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  opacity: 0.75;
}
#serviceImage1 {width: 55%;}
#serviceImage2 {width: 80%; transform: translate(-3.5vw, -11vh);}
#serviceImage3 {width: 90%; transform: translate(-10vw, -10vh)}

.servicesChild {
  width: 55%;
  height: 50%;
  /* background: #42a6e0; */
  right: 0;
  bottom: 0;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 600;
  font-size: 6vh;
  line-height: 100%;
  text-transform: uppercase;
  color: #e5e5e5;
}
.servicesChild em, .point em {
  color: rgba(81,130,188,1) !important;
}
.servicesChild2 h2, .servicesChild2 span, .servicesChild2 p {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.6px;
  font-size: 3vh;
  color: #e5e5e5;
  text-transform: none !important;
  margin-top: unset !important;
  margin-bottom: unset !important
}
.servicesChild2 a{
  text-decoration: none;
}
.servicesChild2 br {
  display: block;
  margin: 10px 0;
  content: " ";
}



#secPortfolio {
  width: 100vw;
}

.workContain {
  position: relative;
  width: 100vw;
}
.portProject {
  box-shadow: 15px 15px 20px #0c0c0c;
  position: absolute;
  border: 1px dashed #eee;
  border-radius: 2pt;
  background: rgba(20,20,20,0.8);
}
.portProject:hover {
  transform: translateY(-10pt) !important;
  cursor: url('../media/pointer.png'), default !important;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.portBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: brightness(0.5) blur(1px);
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.portBackground:hover {
  filter: brightness(0.45) blur(3px);
  -webkit-filter: brightness(0.45) blur(3px);
}
.projectInfo {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.6px;
  font-size: 1.25vw;
  color: #e5e5e5;
  text-transform: none !important;
  position: absolute;
  right: 2vh;
  bottom: 2vh;

  text-align: right;
  display: grid;
}
.projectInfo span:nth-child(2) {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.5px;
  font-size: 3.5vw;
  color: #e5e5e5;
  padding-top: 3.5vh;
}

#portProject1 .projectInfo span:nth-child(1) {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.5px;
  font-size: 3.5vw;
  color: #e5e5e5;
  text-transform: none !important;
}
#portProject1 .projectInfo span:nth-child(2) {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.6px;
  font-size: 1.75vw;
  color: #e5e5e5;
  text-transform: none !important;
}

#portProject1 {width: 45vw; height: 41vw; top: 9vw; left: 8vw}
#portProject2 {width: 40vw; height: 40vw; top: 61vw; left: 15vw}
#portProject3 {width: 38vw; height: 40vw; top: 27vw; left: 52vw}
#portProject4 {width: 43vw; height: 25vw; top: 108vw; left: 6vw}
#portProject5 {width: 45vw; height: 35vw; top: 91vw; left: 47vw}
#portProject6 {width: 56vw; height: 35vw; top: 133vw; left: 40vw; z-index: 2;}
#portContactButton {width: 25vw; height: 6vw; top: 146vw; left: 9vw; position: absolute;}
#portContactButton span {font-size: 2vw; text-transform: uppercase;}

/* #portProject6 {width: 25vw; height: 40vh; top: vh; left: 60vw} */

#portProject2 .projectInfo, #portProject4 .projectInfo {
  left: 2vh;
  right: unset;
  bottom: 2vh;
  text-align: left;
}

#portProject1 .projectInfo {
  top: 2vh;
  right: 2vh;
  bottom: unset;
}

/* #secHow {
  margin-top: 145vw;
} */

.howStepsContainer {
  margin-left: 10%;
  width: 60%;
}
.howSteps span {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.25vw;
  font-size: 3.5vw;
  color: rgba(229,229,229, 0.2);
  -webkit-transition:all ease-in-out 0.3s;
  -moz-transition:all ease-in-out 0.3s;
  -ms-transition:all ease-in-out 0.3s;
  -o-transition:all ease-in-out 0.3s;
  transition:all ease-in-out 0.3s;
}

#secOurphilosophy {
  height: 100vh;
  width: 100vw;
  background: #1f1f1f;
}
.halfSplit {
  display: flex;
  height: calc(100vh - 200px);
  width: 100%;
  align-items: center;
  justify-content: center;
}
.halfSplit div {
  padding: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hugeTitle {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.17vw;
  font-size: 5vw;
  color: #e5e5e5;
  text-align: left;
}

@media (max-width: 700px) {
  #portContactButton {
    top: 219vw;
    left: 10vw;
    height: 8vw;
  }
}
 @media (max-width: 1100px) and (min-width: 700px) {
   #portContactButton {
     top: 176vw;
     left: 10vw;
   }
 }