body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: fixed;
  display: flex;
}

h2 {
  font-family: CenturyGothic;
  color: white;
  font-size: 4vh;
  margin: 5vh;
}

h3 {
  font-size: 3vh;
  font-family: CenturyGothic;
  position: relative;
  color: white;
  margin: auto;
  font-weight: normal;
}

@font-face {
   font-family: CenturyGothic;
   src: url(centurygothic.ttf);
}

@font-face {
   font-family: CenturyGothic;
   src: url(centurygothicbold.ttf);
   font-weight: bold;
}

#arrow{
  transform: rotate(90deg);
  position: relative;
  top: 2vh;
  animation: arrowAnim 3s infinite;
}

@keyframes arrowAnim{
  0% { top:2vh; }
  30% { top:2vh; }
  40% { top:3vh; }
  50% { top: 2vh; }
  60% { top:3vh; }
  70% { top:2vh; }
  100% { top:2vh; }
}

.sideNav {
  position: absolute;
  right: 3vw;
  top: 20vh;
  display: none;
}

#leftarrow{
  cursor: pointer;
  margin: 0 0 3vh 0;
}

#rightarrow{
  cursor: pointer;
  margin: 0 0 3vh 0;
}

.dot {
  height: 15px;
  width: 15px;
  background-color: rgba(0,0,0,.4);
  border-radius: 50%;
  margin: 0vh 0vh 7vh 2vh;
  transition: .5s;
}

#navBar {
  height: 10vh;
  width: 100vw;
  border-bottom: 2px solid white;
  display: flex;
  background-color: rgba(0,0,0,0.7)
}

#logo {
  display: block;
  transition: 1s;
  width: 8vh;
  height: 8vh;
  padding: 1vh 0 0 1vh;
}

#menuButton {
  padding: 3.5vh;
  cursor: pointer;
  display: none;
}

#hamburgerPanel {
  z-index: 3;
  height: 100vh;
  width: 100vw;
  background-color: white;
  position: absolute;
  left: -100vw;
  top: 10vh;
  transition: 1s;
}

#hamburgerPanel > * {
  font-size: 4vh;
  font-family: CenturyGothic;
  color: black;
  text-align: center;
  margin-top: 14vh;
  font-weight: bold;
  cursor: pointer;
}

#companyName {
  margin: auto;
  font-family: CenturyGothic;
  font-weight: bold;
  color: rgba(255, 255, 255,1);
  cursor: pointer;
  transition: 1s;
}

.topNav {
  flex: 1;
  margin: auto;
  padding-left: 4vw;
  display: none;
  font-size: 3vh;
  font-family: CenturyGothic;
  position: relative;
  color: white;
  font-weight: normal;
  cursor: pointer;
}

#contact {
  position: absolute;
  right: 3vw;
  top: 4vh;
  cursor: pointer;
}

#mainArea {
  height: 90vh;
  display: flex;
}

.page{
  position: absolute;
  height: 100%;
  width: 100vw;
  z-index: -1;
  /* transition: 1s; */
  transform: translate(100vw, 0);
  display: flex;
}

#pageZero {
  position: absolute;
  top: 0;
  z-index: -3;
  background-image: url("bg5.png");
  background-attachment: fixed;
  background-position: center;
  transform: translate(0vw, 0);
  filter: blur(0);
  background-repeat: no-repeat;
  background-size: cover;
}

#zeroOverlay {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,1);
  transition: 1s;
}

#pageOne {
  background-color: rgba(31, 171, 248,1);
}

#pageTwo {
  background-color: rgba(38, 49, 177, 1);
}

#pageThree {
  background-color: rgba(171, 47, 193,1);
}

#pageFour {
  background-color: rgba(244,97,4,1);
}

.pageName{
  position: absolute;
  font-family: CenturyGothic;
  font-weight: bold;
  color: rgba(255,255,255,0.36);
}

.quote {
  position: absolute;
  font-size: 4vh;
  font-family: CenturyGothic;
  font-weight: bold;
  color: rgba(255,255,255,1);
  left: 15vh;
  top: 72vh;
}

.contentContainer{
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 10vh;
  height: 62vh;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
}

#initialContent {
  transition: 1s;
  position: absolute;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
}

.content{
  display: flex;
  width: 35vw;
  height: 20vh;
  margin-top: 5vh;
  margin-left: 9vw;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 7vw;
  transition: 1s;
  cursor: pointer;
}

.content:hover {
    background: rgba(0, 0, 0, 0.5);
}

.moreInfoButton {
  position: absolute;
  top: 54vh;
  left: 43vw;
  width: 11vw;
  height: 5vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 9vw;
  transition: 1s;
  font-family: CenturyGothic;
  font-weight: bold;
  font-size: 15px;
  color: white;
  text-align: center;
  padding-top: 1vh;
  cursor: pointer;
}

#moreInfoButton:hover{
  background-color: rgba(0, 0, 0, .5);
}

#aboutInfo{
    position: absolute;
    display: flex;
    top: 3vh;
    left: 5vw;
    width: 87vw;
    height: 55vh;
    background: rgba(0, 0, 0, 0.15);
    border: 3px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
    transition: 1s;
    overflow-y: scroll;
}

.profile{
  height: 400px;
  width: 400px;
  object-fit: cover;
}

.serviceInfo{
width: 80%;
margin: auto;
}

#aboutText {
  width: 80%;
  margin: auto;
}

#initialServices {
  transition: 1s;
  position: absolute;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
}

#moreServices {
    position: absolute;
    top: 73vh;
    transition: 1s;
    /* display: flex; */
}

#controllerTitle {
  background-color: rgba(0, 0, 0, 0.5);
}

#controllerInfo{
  visibility: visible;
  position: absolute;
}

#outsourcedInfo{
  visibility: hidden;
  position: absolute;
}

#quickbooksInfo{
  visibility: hidden;
  position: absolute;
}

#industryInfo{
  visibility: hidden;
  position: absolute;
}

.serviceColumn{
  display: flex;
  width: 30vw;
  height: 10vh;
  margin-top: 3vh;
  margin-left: 3vw;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 5vw;
  transition: 1s;
  cursor: pointer;
  text-align: center;
}

#moreServicesContent{
  position: absolute;
  display: flex;
  top: 3vh;
  left: 35vw;
  width: 55vw;
  height: 49vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 50px;
  transition: 1s;
  overflow-y: scroll;
}

.serviceBullets{
  font-size: 1.2vw;
  font-family: CenturyGothic;
  color: white;
  width: 80%;
  margin: auto;
  display: none;
}

#googleMap {
  position: absolute;
  top: 5vh;
  left: 5vw;
  width: 35vw;
  height: 30vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 30px;
  transition: 1s;
  overflow: hidden;
}

#contactInfo{
  position: absolute;
  display: flex;
  top: 37vh;
  left: 5vw;
  width: 35vw;
  height: 20vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 30px;
  transition: 1s;
}

#contactText{
  margin: auto;
  color: white;
  font-family: CenturyGothic;
  font-size: 1vw;
}

#contactForm{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 5vh;
    left: 42vw;
    width: 45vw;
    height: 52vh;
    background: rgba(0, 0, 0, 0.15);
    border: 3px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 20px;
    transition: 1s;
    padding: 30px 50px 30px 50px;
}

input{
  border-radius: 10px;
  padding: 10px 0px 10px 10px;
}

form #website{
  display: none;
}

#messageInput {
  height: 10vh;
  border-radius: 10px;
  padding: 10px 0px 10px 10px;
  font-family: Arial;
}

#aboutOne{
  display: block;
  text-align: center;
  padding: -2vh;
}

.detailsHeaders{
  position: absolute;
  width: 20vw;
  height: 10vh;
  left: 10vw;
  margin: 2vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 9vw;
  flex-wrap: wrap;
}

.details {
  visibility: hidden;
  position: relative;
  width: 40vw;
  height: 50vh;
  left: 40vw;
  margin: 4vh;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 9vw;
}

.linksContent{
  display: flex;
  width: 20vw;
  height: 10vh;
  margin-top: 10vh;
  margin-left: 9vw;
  background: rgba(0, 0, 0, 0.15);
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 7vw;
  transition: 1s;
  cursor: pointer;
}

.linksContent:hover {
  background: rgba(0,0,0,0.5);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: 50px;
    margin-right: 50px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.6);
  border-radius: 50px;
  margin: 10% 0;
  margin-right: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.4);
  border-radius: 50px;
    margin-right: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

.wiggle {
  animation: wiggle .5s linear 2 forwards;
  animation-timing-function: ease-in-out;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(20deg); }
  60% { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}

.slideOn {
  left: 1vh;
}

.contactMessage{
  margin: auto;
  position: absolute;
  z-index: 30;
  display: flex;
  left: 20vw;
  top: 80vh;
  width: 60vw;
  height: 10vh;
  background-color: rgba(35,51,175,1);
  color: white;
  border-radius: 50px;
  word-wrap: break-word;
  padding: 0 2vw 0 2vw;
  text-align: center;
}