/* CSS for Carmeco.com/equipment.html
Author: Kelli Stasiak r Jared Carr
Updated:09/10/2020*/
/* Top Portion of the page */
#equipmentSelection
{
  height: 50vw;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: black;
  z-index: 9999;
}
#equipmentSelection a
{
  font-size: 4vw;
  font-weight: bold;
  color: #e3eeaa;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
#equipmentSelection:hover
{
  text-shadow: 2px 2px 10px black;
}
#stampContainer
{
  display: inline-block;
  overflow: hidden;
  padding: 0;
  padding-top: 2vw;
  left: 0;
  margin: 0;
}
/* While the stampContainer is hovered the stapPress will changeImage this includes the text also if it is hovered on */
#stampContainer:hover #stampPress
{
  opacity: 1;
  transform: scale(1.25); /* (125% zoom) */
  -webkit-transform: scale(1.25);
  overflow: hidden;
}
#stampBlackBox
{
  visibility: hidden;
}
#stampPress
{
  line-height: 25vw;
  position: relative;
  opacity: .5;
  height: 49.5vw;
  padding: 0;
  margin: 0;
  transition: transform 1s; /* Animation */
  -webkit-transition: 1s ease;
}
#stampPressWord
{
  text-align: center;
  margin-top: -28vw;
  margin-left: 5vw;
  position: absolute;
  line-height: 4vw;
}
#brakePressContainer
{
  display: inline-block;
  overflow: hidden;
  padding: 0;
  padding-top: 2vw;
  margin: 0;
}
#brakePressContainer:hover #brakePress
{
  opacity: 1;
  transform: scale(1.25); /* (125% zoom) */
  -webkit-transform: scale(1.25);
  overflow: hidden;
  opacity: 1;
}
#brakePressBlackBox
{
  visibility: hidden;
}
#brakePress
{
  line-height: 25vw;
  position: relative;
  opacity: .6;
  height: 49.5vw;
  padding: 0;
  margin: 0;
  margin-top: 2vw;
  transition: transform 1s; /* Animation */
  -webkit-transition: 1s ease;
  overflow: hidden;
}
#brakePressWord
{
  text-align: center;
  margin-top: -30vw;
  margin-left: 6vw;
  position: absolute;
  line-height: 4vw;
}
#laserEquipContainer
{
  display: inline-block;
  overflow: hidden;
  padding: 0;
  padding-top: 2vw;
  right: 0;
  margin: 0;
}
#laserEquipBlackBox
{
  visibility: hidden;
}
#laserEquip
{
  height: 49.5vw;
  opacity: .7;
  padding: 0;
  margin: 0;
  transition: transform 1s; /* Animation */
  -webkit-transition: 1s ease;
  overflow: hidden;
}
#laserEquipContainer:hover #laserEquip
{
  opacity: 1;
  transform: scale(1.25); /* (125% zoom) */
  -webkit-transform: scale(1.25);
  overflow: hidden;
  opacity: 1;
}
#laserEquipWord
{
  text-align: center;
  margin-top: -28vw;
  margin-left: 7vw;
  position: absolute;
  line-height: 4vw;
}
/* ^^^Start of the equipment section^^^ */
#equipmentInfo
{
  position: relative;
  height: auto;
  padding: 1vw;
  margin: 1vw;
  top: 0;
  z-index: 0;
  background-image: url("/images/metal.png");
  height: auto;
  background-size: cover;
  /* Makes the background image fixed to the div */
  background-attachment: fixed;
  background-repeat: no-repeat;
  width: 98%;
}
#equipmentInfo h2
{
  clear:both;
  z-index: 2;
  padding-top: 1vw;
  font-size:2.5vw;
}
#LookAtMeContainer
{
  padding-bottom: 4vw;
  margin-bottom: 1vw;
  top:0;
  height:42vw;
  position: relative;
}
#LookAtMeContainer a
{
  font-size: 1vw;
}
#lookAtMeLaserCutting
{
  display: block;
}
/* used for the anchors above 3 separate Divs
needed for location in smaller viewports */
#LocationDivStamp, #LocationDivBrake, #LocationDivLaser
{
  visibility: hidden;
  position: absolute;
  margin-top: -7vw;
}
/* #stampList and brakeList is orginally hidden
on-click javascript will display list */
#brakelist .LookAtMe, #stampList .LookAtMe
{
  display: none;
}
.LookAtMe a:hover
{
  color: #e3eeaa !important;
}
#stampList p:hover, #brakelist p:hover,
#lookAtMeLaserCutting p:hover, #lookAtMeMisc p:hover
{
  color: #e3eeaa;
  cursor: pointer;
}
.equip
{
  margin-left: 27vw;
  top:0vw;
  position: absolute;
}
/* MAIN IMAGES FOR THE EQUIPMENT */
.pressMainImage
{
  height: 30vw;
  z-index: 2;
}

.brakeMainImage{
  height: 20vw;
  z-index: 2;
}

/* THUMBNAILS FOR EQUIPMENT */
.thumbnails
{
  z-index: 2;
}
.thumbnails img
{
  height: 12vw;
  display: inline-block;
  padding-left: 0vw;
  padding-right: 1vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
}
#brakePressExpand .thumbnails img, #laserCuttingContainer .thumbnails img,
#misEquip .thumbnails img
{
  height: 8.15vw !important;
}
#stampingPressContainer .thumbnails
{
  padding-left: 23vw;
  margin-top: -11vw;
}
#brakePressExpand .thumbnails
{
  margin-top: 20vw;
}
#laserCuttingContainer .thumbnails
{
  margin-top:-10vw;
  display: inline-block;
  clear: left;
  width:35vw;
}
#miscEquip .thumbnails
{
  margin-top: 5vw;
  display: inline-block;
  clear: left;
  width:35vw;
}
/* MESSING WITH THE ALIGNMENT OF THE UL AND LI */
#stampingPressContainer li, #brakePressExpand li,
#laserCuttingContainer li, #miscEquip li
{
  color: #bababa;
  font-family: 'Oswald', sans-serif;
  padding-top: 0vw;
  padding-bottom: 0vw;
  margin-top: 0vw;
  margin-bottom: 0vw;
  clear:both;
  line-height: 3vw;
  font-size: 1.25vw !important;
  white-space: nowrap;
}
#stampingPressContainer ul
{
  margin-left: 6vw;
}
/* I had to adjust this section due to it is the on with the
most bullet points */
#theBoss ul
{
  margin-top:-1vw;
}
#bliss h3{
  margin-left: 1vw;
  margin-bottom: 1vw;
}
#laserCuttingContainer ul, #miscEquip ul, #brakePressExpand ul
{
  margin-left: 31vw;
  margin-top: -20vw;
}
#laserCuttingContainer li, #miscEquip li
{
  padding: .5vw;
}
/* Hiding these Elements They will
 be used in a smaller viewport */
.LookAtMeHeading
{
  visibility: hidden;
  display: none;
  position: relative;
}
.LookAtMeHeading a
{
  font-size: 4vw;
  font-weight: bold;
}
#equipmentContainer p
{
  visibility: hidden;
  display: none;
  font-size: 5vw;
  font-weight: bold;
}
#equipmentContainer p:hover
{
  color: #e3eeaa;
}
/* Hiding all of the .equip class except
The Boss which is the first one in the list
Will be redisplayed on-click through JavaScript */
.equip
{
  display: none;
}
#theBoss
{
  display: block;
}
@media print
{
  #equipmentSelection .col-xs-12
  {
    width: 33%;
  }
  #equipmentSelection
  {
    margin-top: -2vw;
  }
  #stampContainer:hover #stampPress,#brakePressContainer:hover #brakePress,
  #laserEquipContainer:hover #laserEquip
  {
    opacity: .5;
    transform: none;
    -webkit-transform: none;
  }
  #LookAtMeContainer
  {
    display: none;
  }
  #stampingPressContainer ul
  {
    margin-left: 20vw;
    margin-top: -30vw;
  }
  .equip
  {
    display: block;
    position: relative;
    break-inside: avoid;
    margin-bottom: 2vw;
  }
  #stampingPressContainer li, #brakePressExpand li, #laserCuttingContainer li, #miscEquip li
  {
    font-size: 2vw !important;
    padding-right: 2vw;
  }
}
@media only screen and (max-width: 1508px)
{
  #equipSideNav
  {
    height: 44vw;
  }
  #stampingPressContainer
  {
    margin-bottom: 5vw;
  }
}
@media only screen and (max-width: 1235px)
{
  #stampingPressContainer
  {
    padding-bottom: 5vw;
  }s
}
@media only screen and (max-width: 1130px)
{
  #equipSideNav
  {
    height: 47vw;
    top:9vw;
  }
}
@media only screen and (max-width: 1047px)
{
  #stampingPressContainer
  {
    padding-bottom: 15vw;
  }
}
@media only screen and (max-width: 1037px)
{
  #equipSideNav{
    height: 52vw;
  }
}
@media only screen and (max-width: 964px)
{
  #equipSideNav
  {
    height: 57vw;
  }
  #LookAtMeContainer a
  {
    font-size: 1.5vw;
  }
  .equip
  {
    margin-left: 35vw;
  }
  #stampingPressContainer li, #brakePressExpand li, #laserCuttingContainer li, #miscEquip li
  {
    font-size: 1.5vw !important;
  }
  #brakePressExpand li, #laserCuttingContainer li, #miscEquip li
  {
    white-space: inherit;
    word-wrap: break-word;
  }
  #stampingPressContainer ul
  {
    margin-left: 3vw;
    margin-top: 1vw;
  }
  #laserCuttingContainer h2, #miscEquip h2, .brakeMainImage
  {
    margin-left: 10vw;
  }
  #laserCuttingContainer ul, #brakePressExpand ul, #miscEquip ul
  {
    margin-to