@font-face {
  font-family: "Horsemen";
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  src: url("../../fonts/urban-motard/Horsemen.woff2") format("woff2"), url("../../fonts/urban-motard/Horsemen.html") format("woff"), url("../../fonts/urban-motard/Horsemen-2.html") format("truetype");
}
body {
  background-image: url("../../img/scrambler/urban-motard/Scrambler-Ducati-Urban-Motard-Background.jpg");
  background-color: #FFFFFF;
  background-repeat: repeat-y;
  background-position: top center;
}

a {
  color: #FF1219;
}

.separatorLine {
  background: #FF1219;
}

/*
 * --- HEADER ---
 */
#siteHead .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen:hover svg path, #mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen:hover svg path {
  fill: #FF1219;
}
#siteHead.transparentHeader.navTop .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .socialLinks .socialLinksWrapper .item .fontColor:hover, #mainMenu.transparentHeader.navTop .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .socialLinks .socialLinksWrapper .item .fontColor:hover {
  color: #FF1219;
}
#siteHead.transparentHeader.navTop .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen:hover svg path, #mainMenu.transparentHeader.navTop .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen:hover svg path {
  fill: #FF1219;
}

/*
 * --- MAIN MENU ---
 */
#mainMenu {
  /*
   * ExternalWrap fix for very large screens with aspect ratio of 32:9
   */
}
#mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .languageSwitch .flagContainer .flag.flagLight {
  display: initial;
}
#mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .languageSwitch .flagContainer .flag.flagDark {
  display: none;
}
#mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .socialLinks .socialLinksWrapper .item .fontColor:hover {
  color: #FF1219;
}
#mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen svg path {
  fill: #FFFFFF;
}
#mainMenu .externalWrap .mainWrap .headerInside .contentWrap.right.headerNav .menuOpen:hover svg path {
  fill: #FF1219;
}
#mainMenu .externalWrap .mainWrap.mainMenuContent .insideWrapper .gridWrap .left .menuWrapper ul li a:hover {
  color: #FF1219;
}
#mainMenu .externalWrap .mainWrap.mainMenuContent .insideWrapper .gridWrap .right .loopNewsContainer .loopNews a .buttonsWrapper .button {
  color: #FF1219;
}
#mainMenu .externalWrap .mainWrap.mainMenuContent .insideWrapper .gridWrap .right .loopNewsContainer .loopNews a .buttonsWrapper .button:hover {
  color: #FFFFFF;
}
#mainMenu .externalWrap .mainWrap.mainMenuContent .insideWrapper #bottomBarMobile .socialLinks .socialLinksWrapper .item .fontColor:hover {
  color: #FF1219;
}
#mainMenu .externalWrap .mainWrap.mainMenuContent .insideWrapper #bottomBarMobile .externalTools a svg path {
  fill: #FF1219;
}
/*
 * --- FOOTER ---
 */
.siteFooter .mainWrap .footerItem.footerLogo svg path {
  fill: #FF1219;
}
.siteFooter .mainWrap .footerItem.footerLink a:hover, .siteFooter .mainWrap .footerItem.footerLink a:active {
  color: #FF1219;
}
.siteFooter .mainWrap .footerItem.footerAction .scramblerConfiguratorLink a svg path {
  fill: #FF1219;
}
.siteFooter .mainWrap .footerItem.footerAction .radioScramblerLink a {
  background: #FF1219;
}
.siteFooter .mainWrap .footerItem.footerAction .socialLinks .socialLinksWrapper .item .fontColor {
  color: #FF1219;
}
@-webkit-keyframes btnAni {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes btnAni {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@-webkit-keyframes btnAni2 {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes btnAni2 {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.button.raised {
  background: url("../../img/scrambler/urban-motard/Scrambler-Ducati-Urban-Motard-Button-Sprite.jpg") no-repeat;
  border: 1px solid #FF1219;
  background-size: 2300% 100%;
  color: #FFFFFF;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  -webkit-animation: btnAni2 0.6s steps(29) forwards;
  animation: btnAni2 0.6s steps(29) forwards;
}
.button.raised svg {
  fill: #FFFFFF;
}
.button.raised:hover, .button.raised:focus {
  background: url("../../img/scrambler/urban-motard/Scrambler-Ducati-Urban-Motard-Button-Sprite.jpg") no-repeat;
  background-size: 2300% 100%;
  -webkit-animation: btnAni 0.6s steps(29) forwards;
  animation: btnAni 0.6s steps(29) forwards;
  color: #FFFFFF;
}
/*
 * --- LIGHTBOX ---
 */
.fancybox-container .fancybox-inner .fancybox-progress {
  background: #FF1219;
}
.fancybox-container .fancybox-inner .fancybox-button:hover {
  color: #FF1219;
}
/*
 * From width 0 to 479
 */
#stripeBikeLook360 .insideWrapper .look360Header .function .actions .rotate:hover svg path {
  fill: #FF1219;
}
#stripeBikeLook360 .insideWrapper .look360Header .function.tech .label a:hover {
  color: #FF1219;
}
#stripeBikeLook360 .insideWrapper .look360-tribute-pro-logo img {
  width: 50%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 35px auto;
}
#stripeBikeLook360 .insideWrapper .look360Gallery .look360BackgroundContainer .look360Background {
  height: 75%;
}
#stripeBikeLook360 .insideWrapper .look360Gallery .look360Icon {
  left: 15px;
  max-width: 100px;
}
#musicButtonContainer .mainWrap #musicButton {
  border-color: #FF1219;
}
#musicButtonContainer .mainWrap #musicButton .equalizerContainer .equalizerLine {
  background-color: #FF1219;
}
#musicButtonContainer .mainWrap #musicButton:hover {
  border-color: #FF1219;
  background: #FF1219;
}
#musicButtonContainer .mainWrap #musicButton:hover .equalizerContainer .equalizerLine {
  background-color: #FFFFFF;
}
.single-moto #main #pageStripe .stripeContent .singleMotoTitle .separatorTitle {
  font-family: "Horsemen", sans-serif;
  font-weight: normal;
  line-height: 2;
  margin-bottom: 40px;
}
.single-moto #main #pageStripe {
  padding-bottom: 0;
}
.single-moto #main #pageStripe .stripeContent .stripe:last-child {
  padding-bottom: 0;
}
@media all and (min-width: 1025px) {
  .single-moto #main #pageStripe .stripeContent .singleMotoTitle .separatorTitle {
    font-size: 60px;
  }
}
.single-moto #main #pageStripe .stripeContent .singleMotoTitle .separatorTitle .claim-red-text {
  color: #FF1219;
}
.single-moto #main #pageStripe .stripeContent .singleMotoTitle .separatorLine {
  display: none;
}

/*
 * Flexbox SASS mixins
 * The spec: http://www.w3.org/TR/css3-flexbox
 * Useful Links:
 * - https://www.w3schools.com/css/css3_flexbox.asp
 * - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */
/*
 * Flexbox display
 */
/*
 * Inline flex display
 */
/*
 * https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
 */
/*
 * Set the transform origin (for rotating elements)
 */
#urban-motard-unveiling-video.stripe-hero .heroWrapper img.hero-image-mobile {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap {
  max-width: none;
  position: static;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap {
    position: absolute;
  }
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__content {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 25px;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__content {
    width: 50%;
    margin-bottom: 0;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__image {
  width: 100%;
  height: auto;
  max-width: 95%;
  opacity: 0;
  margin: 0 auto;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__image {
    max-width: 97%;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__decorator {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__decorator .turnMeIntoAMask {
  stroke-linecap: round;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-mobile {
  margin-top: 70px;
  margin-bottom: 25px;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-mobile {
    display: none;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-mobile .urban-motard__logo {
  width: 60%;
  max-width: 450px;
  height: auto;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-desktop {
  margin-bottom: 50px;
  display: none;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-desktop {
    display: block;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo-desktop .urban-motard__logo {
  width: 60%;
  height: auto;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__logo {
  display: block;
  margin: 0 auto;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .urban-motard__lettering {
  fill: transparent;
  stroke-width: 1px;
  stroke: #000000;
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .boxContent {
  width: 100%;
  margin-bottom: 50px;
}
@media all and (min-width: 1025px) {
  #urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .boxContent {
    width: 50%;
    margin-bottom: 0;
  }
}
#urban-motard-unveiling-video.stripe-hero .heroWrapper .mainWrap .boxContentWrapper .boxContent .buttonsWrapper {
  margin-top: -10px;
  -webkit-justify-content: center;
  justify-content: center;
}

.separatorWrapper .separatorLine {
  background: #FF1219;
}
/*
 * --- BASIC GALLERY ---
 */
.stripe-gallery_content .mainWrap .basicSliderPaginationContainer .swiper-pagination-bullet.swiper-pagination-bullet-active-main {
  background: #FF1219;
}
.tabsSlider .insideWrapper .tabsMenu li a {
  color: #000000;
}
.tabsSlider .insideWrapper .tabsMenu li a:after {
  background: #D0D0D0;
}
.tabsSlider .insideWrapper .tabsMenu li a:hover:after {
  background: #FF1219 !important;
}
.tabsSlider .insideWrapper .tabsMenu li.ui-tabs-active a:after {
  background: #FF1219 !important;
}
.scramblerTable .row {
  border-bottom-color: #666666;
}
.scramblerTable .row:hover {
  background: #FFFFFF;
}
.scramblerTable .row:first-child {
  border-top-color: #666666;
}
.scramblerTable .row .cell {
  transition: 0.3s ease;
}
.bike-feature .contentBlocksWrap .contentBlock .separatorLine {
  background: url("../../img/scrambler/urban-motard/Urban-Motard-Features-Separator.png") no-repeat;
  background-size: 100% 100%;
  height: 12px;
  width: 50%;
  max-width: 165px;
}
@media all and (min-width: 1400px) {
  .bike-feature .contentBlocksWrap .contentBlock .separatorLine {
    height: 25px;
  }
}

.boxWrap:before, .boxWrap .overlay:before {
  border-color: transparent transparent transparent #F2F2F2;
}
.boxWrap:after, .boxWrap .overlay:after {
  border-color: transparent #F2F2F2 transparent transparent;
}

#stripeBikeHero .imageTitle {
  opacity: 0;
}
#stripeBikeHero .separatorLine {
  opacity: 0;
}
#stripeBikeHero .separatorSubtitle {
  opacity: 0;
}
#stripeBikeHero .messageText {
  opacity: 0;
}
#stripeBikeHero .button {
  opacity: 0;
  visibility: hidden;
}

.singleMotoTitle {
  opacity: 0;
}
.singleMotoTitle .claim-black-text, .singleMotoTitle .claim-red-text {
  display: inline-block;
  opacity: 0;
}

.bike-feature .contentBlock {
  opacity: 0;
}

.stripe-boxes_content {
  opacity: 0;
}
.stripe-boxes_content .title, .stripe-boxes_content .text, .stripe-boxes_content .buttonsWrapper {
  opacity: 0;
}

/*
 * Import template page specific style
 */