/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.ofContainer {
  max-width: unset !important;
  margin: 0 !important;
  width: 100%;
  display: block;
  padding: 46px 4.3% 54px 4.3%;
}
.ofContainer .ofGrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 1.5%;
}
.ofContainer p:first-of-type {
  font-family: 'BauerBodoniStdBlackItalic' !important;
	font-weight: 900;
	font-style: italic;
	font-size: 72px !important;
	color: #FFFFFF !important;
	text-align: center;
	line-height: 70px;
  margin-bottom: 10px !important;
}
.ofContainer.ofContent:last-of-type p:first-of-type{
  position: relative;
}
.ofContainer.ofContent:last-of-type p:first-of-type::after {
  content: "+";
  position: absolute;
  top: -5px;
  right: 35px;
  font-family: 'BauerBodoniStdBlackItalic' !important;
	font-weight: 900;
	font-style: italic;
	font-size: 72px !important;
	color: #FFFFFF !important;
}
.ofContainer p:last-of-type {
  font-family: "Gotham A", "Gotham B" !important;
	font-weight: normal !important;
	font-size: 22px !important; 
	color: #FFFFFF !important;
	line-height: 31px;
  text-align: center;
  margin: 0 !important;
  text-transform: uppercase;
}
.ofContainer .ofControls {
  display: none;
}
.ofContainer .ofPrev {
  cursor: pointer;
  margin-right: 5px !important;
}
.ofContainer .ofNext {
  cursor: pointer;
  margin-left: 5px !important;
}
.ofMobile {
  display: none;
}
@media only screen and (max-width: 1400px) {
  .ofContainer {
    padding-left: 15px;
    padding-right: 15px;
  }
  .ofContainer.ofContent:last-of-type p:first-of-type::after {
    right: 25px;
  }
}
@media only screen and (max-width: 1300px) {
  .ofContainer .ofContent:last-of-type p:first-of-type::after {
    right: 5px;
  }
}
@media only screen and (max-width: 1200px) {
  .ofContainer .ofContent:last-of-type p:first-of-type::after {
    right: 0px;
  }
}
@media only screen and (max-width: 1100px) {
  .ofContainer .ofGrid {
    grid-template-columns: 1fr;
  }
  .ofContainer .ofContent {
    text-align: center;
  }
  .ofContainer .ofContent:last-of-type p:first-of-type{
    display: inline;
  }
  .ofContainer .ofContent:last-of-type p:first-of-type::after {
    right: -55px;
    top: 0;
  }
  .ofContainer .ofControls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 26px;
  }
  .ofContainer .dotContainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ofContainer {
    display: none;
  }
  .ofMobile {
    display: block !important;
  }
}