h1, h2, h3, h4{
     font-family: "Racing Sans One", sans-serif;
}
h1{
     font-size: 3em;
}
p {
     font-family: "McLaren", sans-serif;
}
.brandLogo{
     font-family: "Racing Sans One", sans-serif;
}
.heroP {
     font-size: 0.9em;
}
span{
     text-decoration: line-through;
}
.productCard{
     text-decoration: none;
     color: black;
     overflow: hidden;
     &:hover{
          transform: translateY(-3px);
          img {
               transform: scale(105%);
          }
     }
}
.hero {
     position: relative;
     font-size: 180%;
     img {
         width: 100%;
     }
     .heroText {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
         width: 80vw;
         padding: 0;
     }
}
.rotateHero{
     transform: rotateY(180deg);
}

.socialHover{
     &:hover{
          text-decoration: underline;
     }
}

.carousel{
     height: 20%;
}

/*fade in text divs and junk*/
.fade-in {
     opacity: 0;
     transition: all 220ms;
     /*adding a class*/
     &.in-view {
         opacity: 1;
     }
 }