/*this is the wrapper for the whole page*/
.instructure {
  width: 100vw;
  /*width: 1265px;*/
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background: blue;*/
}
/*this is where the nav bar begins~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
nav {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 105px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 4px -2px rgba(0,0,0,.05), 0 0 20px rgba(0,0,0,.05);
  background-color: rgba(255,255,255,.93);
  transition: all .5s ease 0s;
}
.linkHolder{
  width: 940px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*background: yellow;*/
}
/*this is the sizing of the main logo*/
.instLogo{
  height: 22.4px;
  width: 198px;
}
/*this is where you find the link text*/
.navH1{
  color: #6e6e6e;
  text-decoration: none;
  /*padding: 0 10px;*/
  font-family: "din light",Arial,sans-serif;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 1px;
}
.navH1:hover{
  color: #57c8e7;
  cursor: pointer;
}
/*the main content starts here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.mainContent{
  width: 100vw;
  margin-top: 135px;
  /*background: yellow;*/
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*the mainTop content starts here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.mainTop{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainTopH1{
  letter-spacing: 1px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-size: 47px;
  line-height: 1!important;
  color: #6e6e6e;
  font-family: "proxima nova thin",arial,sans-serif;
}
.keyWord{
  width: 190px;
  display: inline-block;
  border-bottom: 3px solid #6e6e6e;
  font-size: 30px;
  color: #57c8e7;
}
.itemHolder{
  height: 445px;
  width: 100%;
  max-width: 1440px;
  background-image: url('https://www.instructure.com/img/home-header-blank.png');
  background-position: center bottom;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.school{
  width: 280px;
  height: 221px;
  background-image: url('https://www.instructure.com/img/HIED.png');
}
.school:hover{
  background-image: url('https://www.instructure.com/img/HIED-hover.png');
  cursor: pointer;
}
.house{
  width: 116px;
  height: 169px;
  background-image: url('https://www.instructure.com/img/house.png');
}
.house:hover{
  background-image: url('https://www.instructure.com/img/house-hover.png');
  cursor: pointer;
}
.smallBiz{
  width: 109px;
  height: 203px;
  background-image: url('https://www.instructure.com/img/SM-business.png');
}
.smallBiz:hover{
  background-image: url('https://www.instructure.com/img/SM-business-hover.png');
  cursor: pointer;
}
.officeBuild{
  width: 172px;
  height: 297px;
  background-image: url('https://www.instructure.com/img/ENT.png');
}
.officeBuild:hover{
  background-image: url('https://www.instructure.com/img/Corp-hover.png');
  cursor: pointer;
}
.Rocket{
  width: 156px;
  height: 239px;
  background-image: url('https://www.instructure.com/img/rocket.png');
}
/*.Rocket:hover{
  background-image: url('https://www.instructure.com/img/rocket-hover.png');
  cursor: pointer;
}*/
.Rocket:hover {
  background-image: url('https://www.instructure.com/img/rocket-hover.png');
  cursor: pointer;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.buildings{
  margin: 0 15px 155px 15px;
}
#flyAway{
  transition: all 400ms linear;
}
.boxText{
  position: absolute;
  bottom: 65px;
  text-align: center;
  font-size: 16px;
  color: #6e6e6e;
  font-family: "proxima nova light",arial,sans-serif;
  line-height: 1.25;
}
/*the middleBar content starts here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.middleBar{
  margin-top: 15px;
  height: 43px;
  width: 100%;
  background: url('https://www.instructure.com/img/color-strip.png') no-repeat top center;
}
/*the mainBottom content starts here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.mainBottom{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 567px;
  max-width: 1440px;
  background: url('https://www.instructure.com/img/home-header-2.png') no-repeat bottom center;
}
.bottomHolder{
  display: flex;
  flex-direction: row;
}
.arc{
  position: relative;
  width: 629px;
  height: 387px;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.arc:hover{
  cursor: pointer;
  filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
}
.arcVideo{
  /*z-index: -1;
  position: absolute;*/
  width: 629px;
  height: 387px;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.arcLogo{
  color: white;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
}
.arcLogoImg{
  margin-top: 20px;
  height: 53px;
  width: 188px;
}
.arcLogoH1{
  font-family: 'proxima nova',Arial,sans-serif;
  font-size: 21px;
  text-align: center;
  margin-top: 15px;
}
.arcInfo{
  position: absolute;
  bottom: 86px;
  margin-left: 35px;
  font-family: 'proxima nova thin',Arial,sans-serif;
  color: #fff;
  /*background: green;*/
}
.arcInfoH1{
  margin-top: 20px;
  font-size: 32.7px;
}
.arcInfoH3{
  margin-top: 30px;
  font-size: 21px;
  max-width: 320px;
}
.arcInfoH2{
  margin-top: 25px;
  font-size: 23px;
  text-decoration: underline;
}
.canvasBridgeHolder{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 25px;

}
.canvas{
  background-image: url('https://www.instructure.com/img/Canvas-call-out.png');
}
.bridge{
  background-image: url('https://www.instructure.com/img/Bridge-call-out.png');
}
.cbBoxes{
  width: 307px;
  height: 172px;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.cbBoxes:hover{
  cursor: pointer;
  filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
}
/*the footer starts here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
footer{
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 265px;
  background: #fff;
  border-top: 2px solid #c8c8c8;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background: yellow;*/
}
.movingBar{
  max-width: 1440px;
  /*position: absolute;*/
  margin-top: -2px;
  transition: all 0.6s ease 0s;
  height: 5px;
  /*width: 75px;
  margin-left: 153px;*/
  /*left: 671px;*/
  background: #bfbfbf;
}
.footerLinkHolder{
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /*background: blue;*/
}
.footerLinks{
  margin-top: 40px;
  margin-left: 40px;
  font-weight: 700;
  font-family: "proxima nova bold",arial,sans-serif;
  font-size: 15px;
  color: #6e6e6e;
}
.foot:hover{
  cursor: pointer;
}
.socialBtns{
  margin-right: 15px;
}
.socialBtns:hover{
  cursor: pointer;
}
.footerTxt{
  font-family: "proxima nova light",arial,sans-serif;
  color: #6e6e6e;
  font-size: 13px;
  line-height: 1.5;
}
.txtMargin{
  padding-top: 15px;
}
.txtSmall{
  font-size: 10px;
}