@font-face { 
  font-family:Avalon-Bold;
  src:url(./fonts/TR-Avalon-Bold-webfont.eot);
  src:url(./fonts/TR-Avalon-Bold-webfont.eot#iefix) format("embedded-opentype"),url(https:./fonts/TR-Avalon-Bold-webfont.woff2) format("woff2"),url(//trekcdnprod.azureedge.net/hybris/fonts/TR-Avalon-Bold-webfont.woff) format("woff"),url(./fonts/TR-Avalon-Bold-webfont.ttf) format("truetype"),url(./fonts/TR-Avalon-Bold-webfont#Avalon-Bold) format("svg");
  font-weight:400;
  font-style:normal;
} 
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap'); 
@font-face { 
  font-family:Avalon-Bold;
  font-weight:400;
  font-style:normal;
  src:url(./fonts/TR-Avalon-Bold-webfont.ca97fe1d.woff2) format("woff2"),url(./fonts/TR-Avalon-Bold-webfont.2396a210.woff) format("woff");
} 
@font-face { 
  font-family:Avalon-Bold;
  src:url(./fonts/TR-Avalon-Bold-webfont.eot);
  src:url(./fonts/TR-Avalon-Bold-webfont.eot?#iefix) format("embedded-opentype"),url(https:./fonts/TR-Avalon-Bold-webfont.woff2) format("woff2"),url(//trekcdnprod.azureedge.net/hybris/fonts/TR-Avalon-Bold-webfont.woff) format("woff"),url(./fonts/TR-Avalon-Bold-webfont.ttf) format("truetype"),url(./fonts/TR-Avalon-Bold-webfont#Avalon-Bold) format("svg");
  font-weight:400;
  font-style:normal;
} 
  body {  
    background:#fff;
    font-weight:400;
    line-height:1.6rem;
    color:#313131;
    font-size:.875rem;
    font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  }  
@media only screen and (min-width: 40rem){     
  body {  
    font-size:.875rem;
    line-height:1.6rem;
  }  
}  
@media only screen and (min-width: 64rem){     
  body {  
    font-size:.875rem;
    line-height:1.6rem;
  }  
}  
body { 
/* CSS Variables that may have been missed get put on body */ 
    --tw-ring-inset:  var(--tw-empty,/*!*/ /*!*/);  
    --tw-ring-inset:  var(--tw-empty,/*!*/ /*!*/);  
} 

* { 
    box-sizing: inherit;
} 

* { 
    box-sizing: border-box; 
    border-width: 0; 
    border-style: solid;
} 

* { 
    border-color: currentColor;
} 

* { 
    box-sizing: border-box;
} 

* { 
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 
} 

div { 
    margin: 0; 
    padding: 0;
} 

.grid-container { 
    padding-right: .625rem; 
    padding-left: .625rem; 
    max-width: 75rem; 
    margin-left: auto; 
    margin-right: auto;
} 

@media print, screen and (min-width: 40em){ 
  .grid-container { 
    padding-right: .9375rem; 
    padding-left: .9375rem;
  } 
}     

@media (min-width: 1024px){ 
  .lg\:mb-0 { 
    margin-bottom: 0;
  } 
}     

body { 
    padding: 0; 
    background: #fff; 
    font-weight: 400; 
    line-height: 1.5; 
    color: #313131; 
    -moz-osx-font-smoothing: grayscale;
} 

body { 
    font-size: .875rem; 
    line-height: 1.6rem;
} 

@media only screen and (min-width: 40rem){ 
  body { 
    font-size: .875rem; 
    line-height: 1.6rem;
  } 
}     

@media only screen and (min-width: 64rem){ 
  body { 
    font-size: .875rem; 
    line-height: 1.6rem;
  } 
}     

body { 
    margin: 0; 
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
} 

body { 
    font-family: inherit; 
    line-height: inherit;
} 

body { 
    line-height: 1.6rem;
} 

body { 
    font-family: Roboto,arial,helvetica,sans-serif; 
    background-color: var(--white); 
    -webkit-font-smoothing: antialiased;
} 

body { 
    min-height: 100vh;
} 

html { 
    box-sizing: border-box; 
    font-size: 100%;
} 

html { 
    tab-size: 4; 
    line-height: 1.15; 
    -webkit-text-size-adjust: 100%;
} 

html { 
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; 
    line-height: 1.5;
} 

html { 
    min-height: 100vh;
} 

:root { 
    --white: #fff; 
    --gray-100: #1a1a1a; 
    --gray-30: #bababa; 
    --gray-05: #f4f4f4; 
    --blue-100: #007ab8; 
    --pdl-color-active: var(--blue-100); 
    --pdl-color-text-link: var(--gray-100); 
    --pdl-color-text-link-disabled: var(--gray-30); 
    --pdl-color-border-tab-active: var(--pdl-color-active); 
} 

*,:after,:before { 
    box-sizing: inherit;
} 

*,:after,:before { 
    box-sizing: border-box; 
    border-width: 0; 
    border-style: solid;
} 

*,:after,:before { 
    border-color: currentColor;
} 

*,:after,:before { 
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 
} 

h2 { 
    margin: 0; 
    padding: 0;
} 

h2 { 
    font-family: Roboto,arial,helvetica,sans-serif; 
    font-style: normal; 
    font-weight: 400; 
    color: inherit; 
    text-rendering: optimizeLegibility;
} 

h2 { 
    font-size: 1rem; 
    line-height: 1.4; 
    margin-top: 0; 
    margin-bottom: 0;
} 

@media print, screen and (min-width: 40em){ 
  h2 { 
    font-size: 1rem;
  } 
}     

@media print, screen and (min-width: 64em){ 
  h2 { 
    font-size: 1rem;
  } 
}     

h2 { 
    margin: 0;
} 

h2 { 
    font-size: inherit; 
    font-weight: inherit;
} 

h2 { 
    font-family: Roboto,arial,helvetica,sans-serif;
} 

h2 { 
    font-size: 1.5rem;
} 

@media print, screen and (min-width: 40em){ 
  h2 { 
    font-size: 1.5rem;
  } 
}     

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    white-space: nowrap; 
    border-width: 0;
} 

.mb-6 { 
    margin-bottom: 3.5rem;
} 

.sprocket__card { 
    max-width: 75rem; 
    margin-right: auto; 
    margin-left: auto; 
    display: flex; 
    flex-flow: row wrap;
} 

.primary-feature__card { 
    margin-bottom: 1rem;
} 

.productPrimaryFeaturesComponent article:last-of-type.primary-feature__card  { 
    margin-bottom: 0;
} 

.productPrimaryFeaturesComponent article:last-of-type.primary-feature__card::after { 
    content: ""; 
    height: 1px; 
    background-color: var(--gray-05); 
    margin: 2.5rem 0; 
    width: calc(100% - 20px); 
    transform: translateX(10px);
} 

@media print, screen and (min-width: 40em){ 
  .productPrimaryFeaturesComponent article:last-of-type.primary-feature__card::after { 
    margin: 3.5rem 0; 
    width: calc(100% - 30px); 
    transform: translateX(15px);
  } 
}     

.sprocket__card__image { 
    flex: 0 0 100%; 
    max-width: 100%; 
    padding-right: .625rem; 
    padding-left: .625rem;
} 

@media print, screen and (min-width: 40em){ 
  .sprocket__card__image { 
    padding-right: .9375rem; 
    padding-left: .9375rem;
  } 
}     

@media print, screen and (min-width: 64em){ 
  .sprocket__card__image { 
    flex: 0 0 66.6666666667%; 
    max-width: 66.6666666667%; 
    padding-right: .625rem; 
    padding-left: .625rem;
  } 
}     

@media print, screen and (min-width: 64em) and (min-width: 40em){ 
  .sprocket__card__image { 
    padding-right: .9375rem; 
    padding-left: .9375rem;
  } 
}     

.sprocket__card__details { 
    flex: 0 0 100%; 
    max-width: 100%; 
    padding-right: .625rem; 
    padding-left: .625rem;
} 

@media print, screen and (min-width: 40em){ 
  .sprocket__card__details { 
    padding-right: .9375rem; 
    padding-left: .9375rem;
  } 
}     

@media print, screen and (min-width: 64em){ 
  .sprocket__card__details { 
    flex: 0 0 33.3333333333%; 
    max-width: 33.3333333333%; 
    padding-right: .625rem; 
    padding-left: .625rem;
  } 
}     

@media print, screen and (min-width: 64em) and (min-width: 40em){ 
  .sprocket__card__details { 
    padding-right: .9375rem; 
    padding-left: .9375rem;
  } 
}     

h3 { 
    margin: 0; 
    padding: 0;
} 

h3 { 
    font-family: Roboto,arial,helvetica,sans-serif; 
    font-style: normal; 
    font-weight: 400; 
    color: inherit; 
    text-rendering: optimizeLegibility;
} 

h3 { 
    font-size: 1rem; 
    line-height: 1.4; 
    margin-top: 0; 
    margin-bottom: 0;
} 

@media print, screen and (min-width: 40em){ 
  h3 { 
    font-size: 1rem;
  } 
}     

@media print, screen and (min-width: 64em){ 
  h3 { 
    font-size: 1rem;
  } 
}     

h3 { 
    margin: 0;
} 

h3 { 
    font-size: inherit; 
    font-weight: inherit;
} 

h3 { 
    font-family: Roboto,arial,helvetica,sans-serif;
} 

.primary-feature__card__header { 
    font-family: Avalon-Bold,sans-serif; 
    font-size: 1.5rem; 
    line-height: 1.625rem; 
    margin-bottom: 0;
} 

@media print, screen and (min-width: 40em){ 
  .primary-feature__card__header { 
    font-size: 1.5rem; 
    line-height: 1.625rem; 
    margin-bottom: .5rem;
  } 
}     

@media print, screen and (min-width: 64em){ 
  .primary-feature__card__header { 
    font-size: 1.5rem; 
    line-height: 1.625rem;
  } 
}     

@media print, screen and (min-width: 40em){ 
  .primary-feature__card__header { 
    border-top: 2px solid var(--gray-100); 
    margin-top: 0; 
    padding-top: 1rem;
  } 
}     

p { 
    margin: 0; 
    padding: 0;
} 

p { 
    margin-bottom: 1.5rem; 
    font-size: inherit; 
    line-height: 1.6; 
    text-rendering: optimizeLegibility;
} 

p { 
    margin: 0;
} 

.primary-feature__card__body { 
    margin-top: .5rem;
} 

a { 
    background-color: #0000;
} 

a { 
    line-height: inherit; 
    text-decoration: none; 
    cursor: pointer;
} 

a { 
    color: #313131;
} 

a { 
    color: inherit; 
    text-decoration: inherit;
} 

.button { 
    text-decoration: none;
} 

.button { 
    height: 3.125rem;
} 

.button { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    height: auto; 
    margin: 0; 
    padding: .875em 1.5em; 
    -webkit-appearance: none; 
    appearance: none; 
    background: var(--gray-100); 
    border: 1px solid #0000; 
    border-radius: 0; 
    transition: all .25s ease-out; 
    font-family: inherit; 
    font-size: 1rem; 
    line-height: 1; 
    text-align: center; 
    color: var(--white); 
    cursor: pointer;
} 

.button--primary { 
    background-color: #1a1a1a; 
    border-color: #1a1a1a; 
    color: var(--white);
} 

a,a:hover { 
    color: #313131;
} 

.button--primary:hover { 
    background-color: #313131; 
    border-color: #313131; 
    color: var(--white);
} 

img { 
    border-style: none;
} 

img { 
    display: inline-block; 
    vertical-align: middle; 
    max-width: 100%; 
    height: auto; 
    -ms-interpolation-mode: bicubic;
} 

img { 
    border-style: solid;
} 

img { 
    display: block; 
    vertical-align: middle;
} 

img { 
    max-width: 100%; 
    height: auto;
} 

.lazyloaded { 
    opacity: 1; 
    transition: opacity .3s;
} 

.w-full { 
    width: 100%;
} 

.sprocket__card__image img  { 
    display: block; 
    max-width: 100%; 
    height: auto;
} 

.lazyload { 
    opacity: 0;
}