@import url('qualtrics-global-blessed2.css?z=1551218778257.1'); @import url('qualtrics-global-blessed1.css?z=1551218778257.1'); .spacing-lg-right { margin-right: 190px; } @media screen and (max-width: 768px) { section.spacing-lg-right, div.container.spacing-lg-right { margin-right: 171px; } section.spacing-lg-right.no-responsive, div.container.spacing-lg-right.no-responsive, .no-responsive section.spacing-lg-right, .no-responsive div.container.spacing-lg-right { margin-right: 190px; } } @media screen and (max-width: 480px) { section.spacing-lg-right, div.container.spacing-lg-right { margin-right: 152px; } section.spacing-lg-right.no-responsive, div.container.spacing-lg-right.no-responsive, .no-responsive section.spacing-lg-right, .no-responsive div.container.spacing-lg-right { margin-right: 190px; } } .spacing-md-right { margin-right: 160px; } @media screen and (max-width: 768px) { section.spacing-md-right, div.container.spacing-md-right { margin-right: 144px; } section.spacing-md-right.no-responsive, div.container.spacing-md-right.no-responsive, .no-responsive section.spacing-md-right, .no-responsive div.container.spacing-md-right { margin-right: 160px; } } @media screen and (max-width: 480px) { section.spacing-md-right, div.container.spacing-md-right { margin-right: 128px; } section.spacing-md-right.no-responsive, div.container.spacing-md-right.no-responsive, .no-responsive section.spacing-md-right, .no-responsive div.container.spacing-md-right { margin-right: 160px; } } .spacing-sm-right { margin-right: 75px; } @media screen and (max-width: 768px) { section.spacing-sm-right, div.container.spacing-sm-right { margin-right: 67px; } section.spacing-sm-right.no-responsive, div.container.spacing-sm-right.no-responsive, .no-responsive section.spacing-sm-right, .no-responsive div.container.spacing-sm-right { margin-right: 75px; } } @media screen and (max-width: 480px) { section.spacing-sm-right, div.container.spacing-sm-right { margin-right: 60px; } section.spacing-sm-right.no-responsive, div.container.spacing-sm-right.no-responsive, .no-responsive section.spacing-sm-right, .no-responsive div.container.spacing-sm-right { margin-right: 75px; } } .spacing-xs-right { margin-right: 34px; } @media screen and (max-width: 768px) { section.spacing-xs-right, div.container.spacing-xs-right { margin-right: 30px; } section.spacing-xs-right.no-responsive, div.container.spacing-xs-right.no-responsive, .no-responsive section.spacing-xs-right, .no-responsive div.container.spacing-xs-right { margin-right: 34px; } } @media screen and (max-width: 480px) { section.spacing-xs-right, div.container.spacing-xs-right { margin-right: 27px; } section.spacing-xs-right.no-responsive, div.container.spacing-xs-right.no-responsive, .no-responsive section.spacing-xs-right, .no-responsive div.container.spacing-xs-right { margin-right: 34px; } } .spacing-tn-right { margin-right: 23px; } @media screen and (max-width: 768px) { section.spacing-tn-right, div.container.spacing-tn-right { margin-right: 20px; } section.spacing-tn-right.no-responsive, div.container.spacing-tn-right.no-responsive, .no-responsive section.spacing-tn-right, .no-responsive div.container.spacing-tn-right { margin-right: 23px; } } @media screen and (max-width: 480px) { section.spacing-tn-right, div.container.spacing-tn-right { margin-right: 18px; } section.spacing-tn-right.no-responsive, div.container.spacing-tn-right.no-responsive, .no-responsive section.spacing-tn-right, .no-responsive div.container.spacing-tn-right { margin-right: 23px; } } .spacing-lg { margin-top: 190px; } @media screen and (max-width: 768px) { section.spacing-lg, div.container.spacing-lg { margin-top: 171px; } section.spacing-lg.no-responsive, div.container.spacing-lg.no-responsive, .no-responsive section.spacing-lg, .no-responsive div.container.spacing-lg { margin-top: 190px; } } @media screen and (max-width: 480px) { section.spacing-lg, div.container.spacing-lg { margin-top: 152px; } section.spacing-lg.no-responsive, div.container.spacing-lg.no-responsive, .no-responsive section.spacing-lg, .no-responsive div.container.spacing-lg { margin-top: 190px; } } .site-content > section.spacing-lg, .site-content > * > section.spacing-lg { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-lg > *:first-child, .site-content > * > section.spacing-lg > *:first-child, .site-content > section.spacing-lg div.container > *:first-child, .site-content > * > section.spacing-lg div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 190px; margin-bottom: 190px; } @media screen and (max-width: 768px) { .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 167px; margin-bottom: 167px; } .site-content > section.spacing-lg div.container.no-responsive, .site-content > * > section.spacing-lg div.container.no-responsive { margin-top: 190px; margin-bottom: 190px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 104px; margin-bottom: 104px; } .site-content > section.spacing-lg div.container.no-responsive, .site-content > * > section.spacing-lg div.container.no-responsive { margin-top: 190px; margin-bottom: 190px; } } .site-content > section.overflow-show.spacing-lg { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 190px; padding-bottom: 190px; } .site-content > section.overflow-show.spacing-lg div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-lg > *:first-child, .site-content > section.overflow-show.spacing-lg div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-lg div.container { margin-top: 0; margin-bottom: 0; } .spacing-md { margin-top: 160px; } @media screen and (max-width: 768px) { section.spacing-md, div.container.spacing-md { margin-top: 144px; } section.spacing-md.no-responsive, div.container.spacing-md.no-responsive, .no-responsive section.spacing-md, .no-responsive div.container.spacing-md { margin-top: 160px; } } @media screen and (max-width: 480px) { section.spacing-md, div.container.spacing-md { margin-top: 128px; } section.spacing-md.no-responsive, div.container.spacing-md.no-responsive, .no-responsive section.spacing-md, .no-responsive div.container.spacing-md { margin-top: 160px; } } .site-content > section.spacing-md, .site-content > * > section.spacing-md { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-md > *:first-child, .site-content > * > section.spacing-md > *:first-child, .site-content > section.spacing-md div.container > *:first-child, .site-content > * > section.spacing-md div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 160px; margin-bottom: 160px; } @media screen and (max-width: 768px) { .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 140px; margin-bottom: 140px; } .site-content > section.spacing-md div.container.no-responsive, .site-content > * > section.spacing-md div.container.no-responsive { margin-top: 160px; margin-bottom: 160px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 88px; margin-bottom: 88px; } .site-content > section.spacing-md div.container.no-responsive, .site-content > * > section.spacing-md div.container.no-responsive { margin-top: 160px; margin-bottom: 160px; } } .site-content > section.overflow-show.spacing-md { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 160px; padding-bottom: 160px; } .site-content > section.overflow-show.spacing-md div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-md > *:first-child, .site-content > section.overflow-show.spacing-md div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-md div.container { margin-top: 0; margin-bottom: 0; } .spacing-sm { margin-top: 75px; } @media screen and (max-width: 768px) { section.spacing-sm, div.container.spacing-sm { margin-top: 67px; } section.spacing-sm.no-responsive, div.container.spacing-sm.no-responsive, .no-responsive section.spacing-sm, .no-responsive div.container.spacing-sm { margin-top: 75px; } } @media screen and (max-width: 480px) { section.spacing-sm, div.container.spacing-sm { margin-top: 60px; } section.spacing-sm.no-responsive, div.container.spacing-sm.no-responsive, .no-responsive section.spacing-sm, .no-responsive div.container.spacing-sm { margin-top: 75px; } } .site-content > section.spacing-sm, .site-content > * > section.spacing-sm { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-sm > *:first-child, .site-content > * > section.spacing-sm > *:first-child, .site-content > section.spacing-sm div.container > *:first-child, .site-content > * > section.spacing-sm div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 75px; margin-bottom: 75px; } @media screen and (max-width: 768px) { .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 66px; margin-bottom: 66px; } .site-content > section.spacing-sm div.container.no-responsive, .site-content > * > section.spacing-sm div.container.no-responsive { margin-top: 75px; margin-bottom: 75px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 41px; margin-bottom: 41px; } .site-content > section.spacing-sm div.container.no-responsive, .site-content > * > section.spacing-sm div.container.no-responsive { margin-top: 75px; margin-bottom: 75px; } } .site-content > section.overflow-show.spacing-sm { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 75px; padding-bottom: 75px; } .site-content > section.overflow-show.spacing-sm div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-sm > *:first-child, .site-content > section.overflow-show.spacing-sm div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-sm div.container { margin-top: 0; margin-bottom: 0; } .spacing-xs { margin-top: 34px; } @media screen and (max-width: 768px) { section.spacing-xs, div.container.spacing-xs { margin-top: 30px; } section.spacing-xs.no-responsive, div.container.spacing-xs.no-responsive, .no-responsive section.spacing-xs, .no-responsive div.container.spacing-xs { margin-top: 34px; } } @media screen and (max-width: 480px) { section.spacing-xs, div.container.spacing-xs { margin-top: 27px; } section.spacing-xs.no-responsive, div.container.spacing-xs.no-responsive, .no-responsive section.spacing-xs, .no-responsive div.container.spacing-xs { margin-top: 34px; } } .site-content > section.spacing-xs, .site-content > * > section.spacing-xs { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-xs > *:first-child, .site-content > * > section.spacing-xs > *:first-child, .site-content > section.spacing-xs div.container > *:first-child, .site-content > * > section.spacing-xs div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 34px; margin-bottom: 34px; } @media screen and (max-width: 768px) { .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 29px; margin-bottom: 29px; } .site-content > section.spacing-xs div.container.no-responsive, .site-content > * > section.spacing-xs div.container.no-responsive { margin-top: 34px; margin-bottom: 34px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 18px; margin-bottom: 18px; } .site-content > section.spacing-xs div.container.no-responsive, .site-content > * > section.spacing-xs div.container.no-responsive { margin-top: 34px; margin-bottom: 34px; } } .site-content > section.overflow-show.spacing-xs { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 34px; padding-bottom: 34px; } .site-content > section.overflow-show.spacing-xs div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-xs > *:first-child, .site-content > section.overflow-show.spacing-xs div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-xs div.container { margin-top: 0; margin-bottom: 0; } .spacing-tn { margin-top: 23px; } @media screen and (max-width: 768px) { section.spacing-tn, div.container.spacing-tn { margin-top: 20px; } section.spacing-tn.no-responsive, div.container.spacing-tn.no-responsive, .no-responsive section.spacing-tn, .no-responsive div.container.spacing-tn { margin-top: 23px; } } @media screen and (max-width: 480px) { section.spacing-tn, div.container.spacing-tn { margin-top: 18px; } section.spacing-tn.no-responsive, div.container.spacing-tn.no-responsive, .no-responsive section.spacing-tn, .no-responsive div.container.spacing-tn { margin-top: 23px; } } .site-content > section.spacing-tn, .site-content > * > section.spacing-tn { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-tn > *:first-child, .site-content > * > section.spacing-tn > *:first-child, .site-content > section.spacing-tn div.container > *:first-child, .site-content > * > section.spacing-tn div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 23px; margin-bottom: 23px; } @media screen and (max-width: 768px) { .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 20px; margin-bottom: 20px; } .site-content > section.spacing-tn div.container.no-responsive, .site-content > * > section.spacing-tn div.container.no-responsive { margin-top: 23px; margin-bottom: 23px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 12px; margin-bottom: 12px; } .site-content > section.spacing-tn div.container.no-responsive, .site-content > * > section.spacing-tn div.container.no-responsive { margin-top: 23px; margin-bottom: 23px; } } .site-content > section.overflow-show.spacing-tn { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 23px; padding-bottom: 23px; } .site-content > section.overflow-show.spacing-tn div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-tn > *:first-child, .site-content > section.overflow-show.spacing-tn div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-tn div.container { margin-top: 0; margin-bottom: 0; } .spacing-lg { margin-bottom: 190px; } @media screen and (max-width: 768px) { section.spacing-lg, div.container.spacing-lg { margin-bottom: 171px; } section.spacing-lg.no-responsive, div.container.spacing-lg.no-responsive, .no-responsive section.spacing-lg, .no-responsive div.container.spacing-lg { margin-bottom: 190px; } } @media screen and (max-width: 480px) { section.spacing-lg, div.container.spacing-lg { margin-bottom: 152px; } section.spacing-lg.no-responsive, div.container.spacing-lg.no-responsive, .no-responsive section.spacing-lg, .no-responsive div.container.spacing-lg { margin-bottom: 190px; } } .site-content > section.spacing-lg, .site-content > * > section.spacing-lg { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-lg > *:first-child, .site-content > * > section.spacing-lg > *:first-child, .site-content > section.spacing-lg div.container > *:first-child, .site-content > * > section.spacing-lg div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 190px; margin-bottom: 190px; } @media screen and (max-width: 768px) { .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 167px; margin-bottom: 167px; } .site-content > section.spacing-lg div.container.no-responsive, .site-content > * > section.spacing-lg div.container.no-responsive { margin-top: 190px; margin-bottom: 190px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-lg div.container, .site-content > * > section.spacing-lg div.container { margin-top: 104px; margin-bottom: 104px; } .site-content > section.spacing-lg div.container.no-responsive, .site-content > * > section.spacing-lg div.container.no-responsive { margin-top: 190px; margin-bottom: 190px; } } .site-content > section.overflow-show.spacing-lg { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 190px; padding-bottom: 190px; } .site-content > section.overflow-show.spacing-lg div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-lg > *:first-child, .site-content > section.overflow-show.spacing-lg div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-lg div.container { margin-top: 0; margin-bottom: 0; } .spacing-md { margin-bottom: 160px; } @media screen and (max-width: 768px) { section.spacing-md, div.container.spacing-md { margin-bottom: 144px; } section.spacing-md.no-responsive, div.container.spacing-md.no-responsive, .no-responsive section.spacing-md, .no-responsive div.container.spacing-md { margin-bottom: 160px; } } @media screen and (max-width: 480px) { section.spacing-md, div.container.spacing-md { margin-bottom: 128px; } section.spacing-md.no-responsive, div.container.spacing-md.no-responsive, .no-responsive section.spacing-md, .no-responsive div.container.spacing-md { margin-bottom: 160px; } } .site-content > section.spacing-md, .site-content > * > section.spacing-md { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-md > *:first-child, .site-content > * > section.spacing-md > *:first-child, .site-content > section.spacing-md div.container > *:first-child, .site-content > * > section.spacing-md div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 160px; margin-bottom: 160px; } @media screen and (max-width: 768px) { .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 140px; margin-bottom: 140px; } .site-content > section.spacing-md div.container.no-responsive, .site-content > * > section.spacing-md div.container.no-responsive { margin-top: 160px; margin-bottom: 160px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-md div.container, .site-content > * > section.spacing-md div.container { margin-top: 88px; margin-bottom: 88px; } .site-content > section.spacing-md div.container.no-responsive, .site-content > * > section.spacing-md div.container.no-responsive { margin-top: 160px; margin-bottom: 160px; } } .site-content > section.overflow-show.spacing-md { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 160px; padding-bottom: 160px; } .site-content > section.overflow-show.spacing-md div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-md > *:first-child, .site-content > section.overflow-show.spacing-md div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-md div.container { margin-top: 0; margin-bottom: 0; } .spacing-sm { margin-bottom: 75px; } @media screen and (max-width: 768px) { section.spacing-sm, div.container.spacing-sm { margin-bottom: 67px; } section.spacing-sm.no-responsive, div.container.spacing-sm.no-responsive, .no-responsive section.spacing-sm, .no-responsive div.container.spacing-sm { margin-bottom: 75px; } } @media screen and (max-width: 480px) { section.spacing-sm, div.container.spacing-sm { margin-bottom: 60px; } section.spacing-sm.no-responsive, div.container.spacing-sm.no-responsive, .no-responsive section.spacing-sm, .no-responsive div.container.spacing-sm { margin-bottom: 75px; } } .site-content > section.spacing-sm, .site-content > * > section.spacing-sm { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-sm > *:first-child, .site-content > * > section.spacing-sm > *:first-child, .site-content > section.spacing-sm div.container > *:first-child, .site-content > * > section.spacing-sm div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 75px; margin-bottom: 75px; } @media screen and (max-width: 768px) { .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 66px; margin-bottom: 66px; } .site-content > section.spacing-sm div.container.no-responsive, .site-content > * > section.spacing-sm div.container.no-responsive { margin-top: 75px; margin-bottom: 75px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-sm div.container, .site-content > * > section.spacing-sm div.container { margin-top: 41px; margin-bottom: 41px; } .site-content > section.spacing-sm div.container.no-responsive, .site-content > * > section.spacing-sm div.container.no-responsive { margin-top: 75px; margin-bottom: 75px; } } .site-content > section.overflow-show.spacing-sm { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 75px; padding-bottom: 75px; } .site-content > section.overflow-show.spacing-sm div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-sm > *:first-child, .site-content > section.overflow-show.spacing-sm div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-sm div.container { margin-top: 0; margin-bottom: 0; } .spacing-xs { margin-bottom: 34px; } @media screen and (max-width: 768px) { section.spacing-xs, div.container.spacing-xs { margin-bottom: 30px; } section.spacing-xs.no-responsive, div.container.spacing-xs.no-responsive, .no-responsive section.spacing-xs, .no-responsive div.container.spacing-xs { margin-bottom: 34px; } } @media screen and (max-width: 480px) { section.spacing-xs, div.container.spacing-xs { margin-bottom: 27px; } section.spacing-xs.no-responsive, div.container.spacing-xs.no-responsive, .no-responsive section.spacing-xs, .no-responsive div.container.spacing-xs { margin-bottom: 34px; } } .site-content > section.spacing-xs, .site-content > * > section.spacing-xs { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-xs > *:first-child, .site-content > * > section.spacing-xs > *:first-child, .site-content > section.spacing-xs div.container > *:first-child, .site-content > * > section.spacing-xs div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 34px; margin-bottom: 34px; } @media screen and (max-width: 768px) { .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 29px; margin-bottom: 29px; } .site-content > section.spacing-xs div.container.no-responsive, .site-content > * > section.spacing-xs div.container.no-responsive { margin-top: 34px; margin-bottom: 34px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-xs div.container, .site-content > * > section.spacing-xs div.container { margin-top: 18px; margin-bottom: 18px; } .site-content > section.spacing-xs div.container.no-responsive, .site-content > * > section.spacing-xs div.container.no-responsive { margin-top: 34px; margin-bottom: 34px; } } .site-content > section.overflow-show.spacing-xs { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 34px; padding-bottom: 34px; } .site-content > section.overflow-show.spacing-xs div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-xs > *:first-child, .site-content > section.overflow-show.spacing-xs div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-xs div.container { margin-top: 0; margin-bottom: 0; } .spacing-tn { margin-bottom: 23px; } @media screen and (max-width: 768px) { section.spacing-tn, div.container.spacing-tn { margin-bottom: 20px; } section.spacing-tn.no-responsive, div.container.spacing-tn.no-responsive, .no-responsive section.spacing-tn, .no-responsive div.container.spacing-tn { margin-bottom: 23px; } } @media screen and (max-width: 480px) { section.spacing-tn, div.container.spacing-tn { margin-bottom: 18px; } section.spacing-tn.no-responsive, div.container.spacing-tn.no-responsive, .no-responsive section.spacing-tn, .no-responsive div.container.spacing-tn { margin-bottom: 23px; } } .site-content > section.spacing-tn, .site-content > * > section.spacing-tn { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.spacing-tn > *:first-child, .site-content > * > section.spacing-tn > *:first-child, .site-content > section.spacing-tn div.container > *:first-child, .site-content > * > section.spacing-tn div.container > *:first-child { margin-top: 0; } .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 23px; margin-bottom: 23px; } @media screen and (max-width: 768px) { .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 20px; margin-bottom: 20px; } .site-content > section.spacing-tn div.container.no-responsive, .site-content > * > section.spacing-tn div.container.no-responsive { margin-top: 23px; margin-bottom: 23px; } } @media screen and (max-width: 480px) { .site-content > section.spacing-tn div.container, .site-content > * > section.spacing-tn div.container { margin-top: 12px; margin-bottom: 12px; } .site-content > section.spacing-tn div.container.no-responsive, .site-content > * > section.spacing-tn div.container.no-responsive { margin-top: 23px; margin-bottom: 23px; } } .site-content > section.overflow-show.spacing-tn { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; overflow: visible; padding-top: 23px; padding-bottom: 23px; } .site-content > section.overflow-show.spacing-tn div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .site-content > section.overflow-show.spacing-tn > *:first-child, .site-content > section.overflow-show.spacing-tn div.container > *:first-child { margin-top: 0; } .site-content > section.overflow-show.spacing-tn div.container { margin-top: 0; margin-bottom: 0; } /* -------------------------------------------------- HELPER CLASSES -------------------------------------------------- These classes make changing colors *much* easier. */ .text-primary { color: #000; } .text-secondary { color: #5fb4e5; } a.text-secondary:hover { color: #339fde; } .text-yellow { color: #ffde00; } a.text-yellow:hover { color: #ccb200; } .text-green { color: #cedf00; } a.text-green:hover { color: #9fac00; } .text-white { color: white; } a.text-white:hover { color: #e6e6e6; } .text-gray-super-lt { color: #f8f8f8; } a.text-gray-super-lt:hover { color: #dfdfdf; } .text-gray-lt { color: #d9e0e2; } a.text-gray-lt:hover { color: #bcc8cc; } .text-gray-md { color: #647077; } a.text-gray-md:hover { color: #4d565b; } .text-black { color: black; } a.text-black:hover { color: #000000; } .btn-text-white { color: white; } a.btn-text-white:hover { color: #e6e6e6; } .btn-text-white:hover { background-color: #3a4145; } .btn-text-white:visited { color: white; } a.btn-text-white:visited:hover { color: #e6e6e6; } .text-shadow-black { text-shadow: 0 0 5px #000; } .bg-primary { color: white; background-color: #e10019; } a.bg-primary:hover { background-color: #ae0013; } .bg-secondary { background-color: #5fb4e5; } a.bg-secondary:hover { background-color: #339fde; } .bg-yellow { background-color: #ffde00; } a.bg-yellow:hover { background-color: #ccb200; } .bg-green { background-color: #cedf00; } a.bg-green:hover { background-color: #9fac00; } .bg-white { background-color: white; } a.bg-white:hover { background-color: #e6e6e6; } .bg-gray-super-lt { background-color: #f8f8f8; } a.bg-gray-super-lt:hover { background-color: #dfdfdf; } .bg-gray-lt { background-color: #d9e0e2; } a.bg-gray-lt:hover { background-color: #bcc8cc; } .bg-gray-md { background-color: #647077; } a.bg-gray-md:hover { background-color: #4d565b; } .bg-black { background-color: black; } a.bg-black:hover { background-color: #000000; } .q-arrow-link { color: #000; } .q-arrow-link .arrow-in-a-circle { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; } .q-arrow-link .arrow-in-a-circle-btn-style { content: ">"; font-family: 'benton-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: 500; right: -0.7em; top: -2px; height: 1.74em; width: 1.74em; line-height: 1.74em; } .q-arrow-link:after { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; } .q-arrow-link:hover, .q-arrow-link:focus, .q-arrow-link:active { color: #0d0d0d; } .q-arrow-link:hover:after, .q-arrow-link:focus:after, .q-arrow-link:active:after, .q-arrow-link:hover:before, .q-arrow-link:focus:before, .q-arrow-link:active:before { background-color: #00b4ef; color: white; } .q-arrow-link.text-black { color: black; } .q-arrow-link.text-black:hover, .q-arrow-link.text-black:focus, .q-arrow-link.text-black:active { color: black; } .q-arrow-link.text-white { color: white; } .q-arrow-link.text-white:hover, .q-arrow-link.text-white:focus, .q-arrow-link.text-white:active { color: white; } .q-arrow-link.btn-style { text-transform: uppercase; font-weight: 600; } .q-arrow-link.btn-style:after { content: ">"; font-family: 'benton-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: 500; right: -0.7em; top: -2px; height: 1.74em; width: 1.74em; line-height: 1.74em; } .q-arrow-link.btn-style:hover, .q-arrow-link.btn-style:focus, .q-arrow-link.btn-style:active { color: #fb001c; } .q-arrow-link.btn-style:hover:after, .q-arrow-link.btn-style:focus:after, .q-arrow-link.btn-style:active:after, .q-arrow-link.btn-style:hover:before, .q-arrow-link.btn-style:focus:before, .q-arrow-link.btn-style:active:before { background-color: #ff152f; color: white; } .q-arrow-link.btn-style.text-black { color: black; } .q-arrow-link.btn-style.text-black:hover, .q-arrow-link.btn-style.text-black:focus, .q-arrow-link.btn-style.text-black:active { color: black; } .q-arrow-link.btn-style.text-white { color: white; } .q-arrow-link.btn-style.text-white:hover, .q-arrow-link.btn-style.text-white:focus, .q-arrow-link.btn-style.text-white:active { color: white; } .q-arrow-link.arrow-before:after { display: none; } .q-arrow-link.arrow-before:before { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; right: 0; margin-right: 1em; } /* -------------------------------------------------- MISC -------------------------------------------------- This is the island of misfit toys for our CSS...basically global stuff that improves the visual look but we don't have an explicit place for it. */ pre { font-size: 0.78em; } @media screen and (max-width: 768px) { pre { white-space: pre-line; overflow: scroll; } } ul.plus-list { padding: 0; } ul.plus-list li { position: relative; padding-left: 17px; list-style-type: none; font-weight: 200; letter-spacing: 0.03em; } ul.plus-list li:before { content: '+'; position: absolute; display: inline; left: 0; margin-right: 8px; font-weight: 300; opacity: 0.5; filter: alpha(opacity=50); } /* -------------------------------------------------- READ MORE SECTION -------------------------------------------------- This is for those sections with links to related articles and blog posts featuring a background image, white text, and a red link (usually toward the bottom of a page) Emmet code (with expanding div): section.qualtrics-read-more>div.container>div.row>(div.read-more-outer.col-md-6>div.read-more-inner>h2+(a[href="#"]>i.qi.qi-)+img.jumbotron-image[src="/wp-content/themes/qualtrics/images/global/read-more/"])*2+(div.expand-inner.clearfix>(div.read-more-outer.col-md-6>div.read-more-inner>h2+(a[href="#"]>i.qi.qi-)+img.jumbotron-image[src="/wp-content/themes/qualtrics/images/global/read-more/"])*2)+div.col-xs-12>a.link-expand.btn-pill.btn-pill-md.btn-stroke-lighter-gray[href="#" data-alternate="Close" scroll="false" data-visible="false"]{View More} - Emmet is a sublime plugin; if you have it, copy paste the above and press tab and voila! Here is some example html (including an expanding div and accompanying "View More" button):

View More
NOTE: the images for these links should be saved in images/global/read-more/ */ .qualtrics-read-more { display: none; } .qualtrics-read-more .container .row > div a.read-more-inner { position: relative; display: block; margin: 45px 0 0; padding: 30px 50px 30px 35px; width: 520px; height: 260px; overflow: hidden; z-index: 1; } .qualtrics-read-more .container .row > div a.read-more-inner h2 { margin-top: 0; margin-bottom: 20px; color: #FFF; font-weight: 200; } .qualtrics-read-more .container .row > div a.read-more-inner span { font-size: 0.85em; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 3px #333; color: #000; } .qualtrics-read-more .container .row > div a.read-more-inner span .arrow-in-a-circle { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span .arrow-in-a-circle-btn-style { content: ">"; font-family: 'benton-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: 500; right: -0.7em; top: -2px; height: 1.74em; width: 1.74em; line-height: 1.74em; } .qualtrics-read-more .container .row > div a.read-more-inner span:after { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span:hover, .qualtrics-read-more .container .row > div a.read-more-inner span:focus, .qualtrics-read-more .container .row > div a.read-more-inner span:active { color: #0d0d0d; } .qualtrics-read-more .container .row > div a.read-more-inner span:hover:after, .qualtrics-read-more .container .row > div a.read-more-inner span:focus:after, .qualtrics-read-more .container .row > div a.read-more-inner span:active:after, .qualtrics-read-more .container .row > div a.read-more-inner span:hover:before, .qualtrics-read-more .container .row > div a.read-more-inner span:focus:before, .qualtrics-read-more .container .row > div a.read-more-inner span:active:before { background-color: #00b4ef; color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.text-black { color: black; } .qualtrics-read-more .container .row > div a.read-more-inner span.text-black:hover, .qualtrics-read-more .container .row > div a.read-more-inner span.text-black:focus, .qualtrics-read-more .container .row > div a.read-more-inner span.text-black:active { color: black; } .qualtrics-read-more .container .row > div a.read-more-inner span.text-white { color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.text-white:hover, .qualtrics-read-more .container .row > div a.read-more-inner span.text-white:focus, .qualtrics-read-more .container .row > div a.read-more-inner span.text-white:active { color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style { text-transform: uppercase; font-weight: 600; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:after { content: ">"; font-family: 'benton-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: 500; right: -0.7em; top: -2px; height: 1.74em; width: 1.74em; line-height: 1.74em; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:hover, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:focus, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:active { color: #fb001c; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:hover:after, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:focus:after, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:active:after, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:hover:before, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:focus:before, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style:active:before { background-color: #ff152f; color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-black { color: black; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-black:hover, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-black:focus, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-black:active { color: black; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-white { color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-white:hover, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-white:focus, .qualtrics-read-more .container .row > div a.read-more-inner span.btn-style.text-white:active { color: white; } .qualtrics-read-more .container .row > div a.read-more-inner span.arrow-before:after { display: none; } .qualtrics-read-more .container .row > div a.read-more-inner span.arrow-before:before { content: "\E042"; font-family: 'Qualtrics Icons'; font-size: 0.8em; display: inline-block; position: relative; right: -0.32em; padding: 0; height: 1.25em; width: 1.25em; line-height: 1.22em; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #000; color: white; right: 0; margin-right: 1em; } .qualtrics-read-more .container .row > div a.read-more-inner span:after { right: -0.85em; text-shadow: none; } .qualtrics-read-more .container .row > div a.read-more-inner img { min-width: 100px; } .qualtrics-read-more .container .row > div a.read-more-inner:hover span { color: #fb001c; } .qualtrics-read-more .container .row > div a.read-more-inner.no-image { margin: 50px 0 0; padding: 0; height: auto !important; } .qualtrics-read-more .container .row > div a.read-more-inner.no-image h2 { margin-bottom: 10px; color: #000; } .qualtrics-read-more .container .row > div a.read-more-inner.no-image span { text-shadow: none; } .qualtrics-read-more .container .row .expand-inner { padding-top: 55px; } .qualtrics-read-more .container .row a.link-expand { float: right; margin-top: 25px; } @media screen and (min-width: 992px) and (max-width: 1200px) { .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer .read-more-inner { width: 440px; } .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer .read-more-inner h2 { font-size: 1.6em; } } @media screen and (max-width: 992px) { .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer .read-more-inner { width: 520px; max-width: 100%; margin: 50px auto 0 !important; } .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer:first-child .read-more-inner { margin-top: 0 !important; } } @media screen and (max-width: 480px) { .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer .read-more-inner { height: 200px; } .qualtrics-read-more .container .row div.read-more-wrapper div.read-more-outer .read-more-inner h2 { font-size: 1.3em; } } .qualtrics-read-more .container .row div.read-more-wrapper div:first-child + div > a.read-more-inner, .qualtrics-read-more .container .row div.read-more-wrapper div:first-child + div + div + div > a.read-more-inner, .qualtrics-read-more .container .row div.read-more-wrapper div:first-child + div + div + div + div + div > a.read-more-inner, .qualtrics-read-more .container .row div.read-more-wrapper div:first-child + div + div + div + div + div + div + div > a.read-more-inner { margin-right: 0; margin-left: auto; } .qualtrics-read-more .container .row div.read-more-wrapper > div:first-child .read-more-inner, .qualtrics-read-more .container .row div.read-more-wrapper > div:first-child + div .read-more-inner { margin-top: 0; } .nav-tabs-blue .active { background-color: #5fb4e5 !important; color: #ffffff !important; } .nav-tabs-blue .active:hover { background-color: #5fb4e5; } .nav-tabs-blue .active:active { background-color: #5fb4e5; } .nav-tabs-blue li { position: relative; display: inline-block; background-color: transparent !important; border: 1px solid #d9e0e2 !important; } @media (max-width: 480px) { .nav-tabs-blue li { width: 100%; } } .nav-tabs-blue li:hover { background-color: #5fb4e5 !important; } .nav-tabs-blue li:active { background-color: #5fb4e5 !important; } .nav-tabs-blue li:visited { background-color: #5fb4e5 !important; } .nav-tabs-blue li:focus { background-color: #5fb4e5 !important; } .nav-tabs-blue #tab-first { margin-right: 5px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px; -webkit-border-top-left-radius: 50px; -moz-border-radius-topleft: 50px; border-top-left-radius: 50px; } .nav-tabs-blue #tab-last { margin-left: 5px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topright: 50px; border-top-right-radius: 50px; } @media (max-width: 480px) { .nav-tabs-blue #tab-last { margin-left: 0px; } } .nav-tabs-blue h2 { font-size: 18px; margin: 0; letter-spacing: 0; } .nav-tabs-blue a { display: block; padding: 10px 15px; border: 0; line-height: 1.66666667; color: #2F393F; font-weight: 500; text-transform: uppercase; } .nav-tabs-blue a:active { color: #ffffff; } .nav-tabs-blue a:visited { background-color: #5fb4e5 !important; } @media (max-width: 992px) { .nav.nav-tabs { margin-left: 20%; } } @media (max-width: 700px) { .nav.nav-tabs { margin-left: 5%; } } @media (max-width: 480px) { .nav.nav-tabs { margin-left: 5%; } } .site-content, .site-footer { overflow-x: hidden; } .q-xm-fix { /* Typography */ /* body text */ } .q-xm-fix h1, .q-xm-fix h2, .q-xm-fix h3, .q-xm-fix h4, .q-xm-fix h5, .q-xm-fix h6, .q-xm-fix p, .q-xm-fix span, .q-xm-fix a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .q-xm-fix h2, .q-xm-fix .hero-text { font-size: 50px/1.5; line-height: 1.1em; font-weight: 200; letter-spacing: -1px; } .q-xm-fix h2 span, .q-xm-fix .hero-text span, .q-xm-fix h2 .hero-accent, .q-xm-fix .hero-text .hero-accent { font-size: 36px; font-weight: 700; text-transform: uppercase; line-height: 0px; letter-spacing: 1px; } @media (min-width: 992px) { .q-xm-fix h2, .q-xm-fix .hero-text { font-size: 50px; } } .q-xm-fix .secondary-text { font-size: 26.5px; line-height: 1.25em; font-weight: 200; } .q-xm-fix .secondary-text .secondary-accent { font-size: 20.5px; font-weight: 700; text-transform: uppercase; line-height: 0px; } .q-xm-fix h3, .q-xm-fix .section-title { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .q-xm-fix .lower-case { text-transform: lowercase; } .q-xm-fix p { font-size: 16px; line-height: 24px; font-weight: 300; } .q-xm-fix body { color: #000; } .q-xm-fix h1.description-title, .q-xm-fix h3 { letter-spacing: 0.5px; font-size: 16px; } .q-xm-fix .clear { clear: both; } .q-xm-fix .page-template-third-tier-template .qualtrics-hero-thin p { line-height: 1.4em; } .q-xm-fix .page-template-third-tier-template .case-study-link .section-title { line-height: 1.3em; font-weight: 600; } /* TODO: Need to fix on page basis instead of !important */ /* -------------------------------------------------- QUALTRICS JUMBOTRON -------------------------------------------------- The qualtrics jumbotron is used all over the place (including inside of other classes), so this class is an attempt to make it dead simple to add large, scaling background images. Here's what the companion HTML looks like:

This is such a fancy little red header

The Qualtrics Style Guide

Welcome. This is the qualtrics style guide.

Click Me
By default, this positions the image as the background of the jumbotron without affecting the colors or margins of the children of the section. */ .qualtrics-jumbotron { position: relative; } .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image { position: absolute; top: 0; left: 0; min-width: 1280px; min-height: 100%; z-index: 0; } .attach-bottom.qualtrics-jumbotron img.hero-image, .attach-bottom.qualtrics-jumbotron img.sidekick-image, .attach-bottom.qualtrics-jumbotron img.jumbotron-image { top: auto; bottom: 0; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { left: auto; right: 0; } @media screen and (min-width: 1600px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image, .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image, .attach-bottom.qualtrics-jumbotron img.hero-image, .attach-bottom.qualtrics-jumbotron img.sidekick-image, .attach-bottom.qualtrics-jumbotron img.jumbotron-image { top: 0; left: 0; right: auto; bottom: auto; width: auto; height: auto; min-width: 100%; min-height: 120%; max-width: 130%; } .attach-bottom.qualtrics-jumbotron img.hero-image, .attach-bottom.qualtrics-jumbotron img.sidekick-image, .attach-bottom.qualtrics-jumbotron img.jumbotron-image { bottom: 0; top: auto; min-height: 150%; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image { left: 0; max-width: 130%; min-width: 100%; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { right: -10%; min-width: 110%; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image { left: -10%; min-width: 110%; max-width: 140%; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { right: -20%; min-width: 120%; } } @media screen and (min-width: 768px) and (max-width: 992px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image { left: -20%; min-width: 120%; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { right: -30%; min-width: 130%; } } @media screen and (min-width: 480px) and (max-width: 768px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image, .attach-bottom.qualtrics-jumbotron img.hero-image, .attach-bottom.qualtrics-jumbotron img.sidekick-image, .attach-bottom.qualtrics-jumbotron img.jumbotron-image { top: auto; bottom: -40%; left: -50%; min-height: 140%; min-width: 150%; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { right: auto; left: -20%; min-width: 120%; } } @media screen and (min-width: 0) and (max-width: 480px) { .qualtrics-jumbotron img.hero-image, .qualtrics-jumbotron img.sidekick-image, .qualtrics-jumbotron img.jumbotron-image { left: -100%; min-width: 200%; max-width: 300%; } .attach-right.qualtrics-jumbotron img.hero-image, .attach-right.qualtrics-jumbotron img.sidekick-image, .attach-right.qualtrics-jumbotron img.jumbotron-image { right: -150%; min-width: 250%; } } .qualtrics-jumbotron h1, .qualtrics-jumbotron .hero-title, .qualtrics-jumbotron h2, .qualtrics-jumbotron .section-title, .qualtrics-jumbotron h3, .qualtrics-jumbotron .description-title, .qualtrics-jumbotron p, .qualtrics-jumbotron a, .qualtrics-jumbotron ul { position: relative; z-index: 5; } .qualtrics-jumbotron h2.text-white { color: #FFF; } .qualtrics-jumbotron.jumbotron-light-text h1, .qualtrics-jumbotron.jumbotron-light-text .hero-title, .qualtrics-jumbotron.jumbotron-light-text p, .qualtrics-jumbotron.jumbotron-light-text ul { color: white; } .qualtrics-jumbotron.overflow-show { overflow: visible; } /* -------------------------------------------------- QUALTRICS HERO -------------------------------------------------- The qualtrics hero is used all over the place, so this class is an attempt to make it dead simple to add heroes. Here's what the companion HTML looks like:

This is such a fancy little red header

The Qualtrics Style Guide

Welcome. This is the qualtrics style guide.

Click Me
By default, this positions the image as the background of the hero, makes the h3 the qualtrics red color, and does all the margins for you. */ .qualtrics-hero { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; position: relative; } .qualtrics-hero div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .qualtrics-hero > *:first-child, .qualtrics-hero div.container > *:first-child { margin-top: 0; } .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image { position: absolute; top: 0; left: 0; min-width: 1280px; min-height: 100%; z-index: 0; } .attach-bottom.qualtrics-hero img.hero-image, .attach-bottom.qualtrics-hero img.sidekick-image, .attach-bottom.qualtrics-hero img.jumbotron-image { top: auto; bottom: 0; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { left: auto; right: 0; } @media screen and (min-width: 1600px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image, .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image, .attach-bottom.qualtrics-hero img.hero-image, .attach-bottom.qualtrics-hero img.sidekick-image, .attach-bottom.qualtrics-hero img.jumbotron-image { top: 0; left: 0; right: auto; bottom: auto; width: auto; height: auto; min-width: 100%; min-height: 120%; max-width: 130%; } .attach-bottom.qualtrics-hero img.hero-image, .attach-bottom.qualtrics-hero img.sidekick-image, .attach-bottom.qualtrics-hero img.jumbotron-image { bottom: 0; top: auto; min-height: 150%; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image { left: 0; max-width: 130%; min-width: 100%; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { right: -10%; min-width: 110%; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image { left: -10%; min-width: 110%; max-width: 140%; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { right: -20%; min-width: 120%; } } @media screen and (min-width: 768px) and (max-width: 992px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image { left: -20%; min-width: 120%; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { right: -30%; min-width: 130%; } } @media screen and (min-width: 480px) and (max-width: 768px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image, .attach-bottom.qualtrics-hero img.hero-image, .attach-bottom.qualtrics-hero img.sidekick-image, .attach-bottom.qualtrics-hero img.jumbotron-image { top: auto; bottom: -40%; left: -50%; min-height: 140%; min-width: 150%; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { right: auto; left: -20%; min-width: 120%; } } @media screen and (min-width: 0) and (max-width: 480px) { .qualtrics-hero img.hero-image, .qualtrics-hero img.sidekick-image, .qualtrics-hero img.jumbotron-image { left: -100%; min-width: 200%; max-width: 300%; } .attach-right.qualtrics-hero img.hero-image, .attach-right.qualtrics-hero img.sidekick-image, .attach-right.qualtrics-hero img.jumbotron-image { right: -150%; min-width: 250%; } } .qualtrics-hero h1, .qualtrics-hero .hero-title, .qualtrics-hero h2, .qualtrics-hero .section-title, .qualtrics-hero h3, .qualtrics-hero .description-title, .qualtrics-hero p, .qualtrics-hero a, .qualtrics-hero ul { position: relative; z-index: 5; } .qualtrics-hero h2.text-white { color: #FFF; } .qualtrics-hero.jumbotron-light-text h1, .qualtrics-hero.jumbotron-light-text .hero-title, .qualtrics-hero.jumbotron-light-text p, .qualtrics-hero.jumbotron-light-text ul { color: white; } .qualtrics-hero.overflow-show { overflow: visible; } .qualtrics-hero div.container { margin-top: 190px; margin-bottom: 190px; } .qualtrics-hero div.container h3, .qualtrics-hero div.container .description-title { margin: 0; font-size: 13px; line-height: 1.66666667; font-weight: 700; letter-spacing: 1px; } .qualtrics-hero div.container h3.spacing-xs, .qualtrics-hero div.container .description-title.spacing-xs { margin-top: 34px; margin-bottom: 34px; } @media screen and (max-width: 768px) { section.qualtrics-hero div.container h3.spacing-xs, section.qualtrics-hero div.container .description-title.spacing-xs, div.container.qualtrics-hero div.container h3.spacing-xs, div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-top: 30px; } section.qualtrics-hero div.container h3.spacing-xs.no-responsive, section.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, div.container.qualtrics-hero div.container h3.spacing-xs.no-responsive, div.container.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, .no-responsive section.qualtrics-hero div.container h3.spacing-xs, .no-responsive section.qualtrics-hero div.container .description-title.spacing-xs, .no-responsive div.container.qualtrics-hero div.container h3.spacing-xs, .no-responsive div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-top: 34px; } } @media screen and (max-width: 480px) { section.qualtrics-hero div.container h3.spacing-xs, section.qualtrics-hero div.container .description-title.spacing-xs, div.container.qualtrics-hero div.container h3.spacing-xs, div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-top: 27px; } section.qualtrics-hero div.container h3.spacing-xs.no-responsive, section.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, div.container.qualtrics-hero div.container h3.spacing-xs.no-responsive, div.container.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, .no-responsive section.qualtrics-hero div.container h3.spacing-xs, .no-responsive section.qualtrics-hero div.container .description-title.spacing-xs, .no-responsive div.container.qualtrics-hero div.container h3.spacing-xs, .no-responsive div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-top: 34px; } } @media screen and (max-width: 768px) { section.qualtrics-hero div.container h3.spacing-xs, section.qualtrics-hero div.container .description-title.spacing-xs, div.container.qualtrics-hero div.container h3.spacing-xs, div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-bottom: 30px; } section.qualtrics-hero div.container h3.spacing-xs.no-responsive, section.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, div.container.qualtrics-hero div.container h3.spacing-xs.no-responsive, div.container.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, .no-responsive section.qualtrics-hero div.container h3.spacing-xs, .no-responsive section.qualtrics-hero div.container .description-title.spacing-xs, .no-responsive div.container.qualtrics-hero div.container h3.spacing-xs, .no-responsive div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-bottom: 34px; } } @media screen and (max-width: 480px) { section.qualtrics-hero div.container h3.spacing-xs, section.qualtrics-hero div.container .description-title.spacing-xs, div.container.qualtrics-hero div.container h3.spacing-xs, div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-bottom: 27px; } section.qualtrics-hero div.container h3.spacing-xs.no-responsive, section.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, div.container.qualtrics-hero div.container h3.spacing-xs.no-responsive, div.container.qualtrics-hero div.container .description-title.spacing-xs.no-responsive, .no-responsive section.qualtrics-hero div.container h3.spacing-xs, .no-responsive section.qualtrics-hero div.container .description-title.spacing-xs, .no-responsive div.container.qualtrics-hero div.container h3.spacing-xs, .no-responsive div.container.qualtrics-hero div.container .description-title.spacing-xs { margin-bottom: 34px; } } @media screen and (min-width: 1200px) and (max-width: 1250px) { .qualtrics-hero div.container h3.header-cx, .qualtrics-hero div.container .description-title.header-cx, .qualtrics-hero div.container h3.header-ei, .qualtrics-hero div.container .description-title.header-ei, .qualtrics-hero div.container h3.header-op, .qualtrics-hero div.container .description-title.header-op, .qualtrics-hero div.container h3.header-mr, .qualtrics-hero div.container .description-title.header-mr { margin-left: 3.5em; } } @media screen and (min-width: 992px) and (max-width: 1047px) { .qualtrics-hero div.container h3.header-cx, .qualtrics-hero div.container .description-title.header-cx, .qualtrics-hero div.container h3.header-ei, .qualtrics-hero div.container .description-title.header-ei, .qualtrics-hero div.container h3.header-op, .qualtrics-hero div.container .description-title.header-op, .qualtrics-hero div.container h3.header-mr, .qualtrics-hero div.container .description-title.header-mr { margin-left: 3.5em; } } @media screen and (max-width: 823px) { .qualtrics-hero div.container h3.header-cx, .qualtrics-hero div.container .description-title.header-cx, .qualtrics-hero div.container h3.header-ei, .qualtrics-hero div.container .description-title.header-ei, .qualtrics-hero div.container h3.header-op, .qualtrics-hero div.container .description-title.header-op, .qualtrics-hero div.container h3.header-mr, .qualtrics-hero div.container .description-title.header-mr { margin-left: 3.5em; } } .qualtrics-hero div.container h1, .qualtrics-hero div.container .hero-title { float: none; margin-top: 24px; margin-bottom: 24px; padding: 0; letter-spacing: 1px; color: #000; } .qualtrics-hero div.container h1.no-spacing, .qualtrics-hero div.container .hero-title.no-spacing { margin: 0; } .qualtrics-hero div.container p { float: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.66666667; font-weight: 400; } .qualtrics-hero div.container .btn-q-primary, .qualtrics-hero div.container .btn-pill { margin-top: 34px; } .qualtrics-hero.hero-light-text h1, .qualtrics-hero.hero-light-text .hero-title, .qualtrics-hero.hero-light-text p, .qualtrics-hero.hero-light-text ul { color: white; } .qualtrics-hero.hero-light-text .container p { font-weight: 200; letter-spacing: 0.03em; } .qualtrics-hero.hero-light-text .text-primary { color: #e10019; } .qualtrics-hero.hero-light-subtitle div.container h3, .qualtrics-hero.hero-light-subtitle div.container .description-title { color: white; } /* -------------------------------------------------- QUALTRICS SIDEKICK -------------------------------------------------- The qualtrics sidekick is used all over the place, so this class is an attempt to make it dead simple to add heroes. Here's what the companion HTML looks like:

Customer Experience

This is the Qualtrics Sidekick. Pun intended.

  • Qualtrics Sidekick®
  • Has this fancy plus list
  • Works pretty much like the qualtrics-hero
I'm so impressed
By default, this positions the image as the background of the sidekick, makes the h3 the qualtrics red color, and does all the margins for you. */ .qualtrics-sidekick { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; position: relative; } .qualtrics-sidekick div.container { padding-bottom: 0; margin-top: 0; padding-top: 0; } .qualtrics-sidekick > *:first-child, .qualtrics-sidekick div.container > *:first-child { margin-top: 0; } .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image { position: absolute; top: 0; left: 0; min-width: 1280px; min-height: 100%; z-index: 0; } .attach-bottom.qualtrics-sidekick img.hero-image, .attach-bottom.qualtrics-sidekick img.sidekick-image, .attach-bottom.qualtrics-sidekick img.jumbotron-image { top: auto; bottom: 0; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { left: auto; right: 0; } @media screen and (min-width: 1600px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image, .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image, .attach-bottom.qualtrics-sidekick img.hero-image, .attach-bottom.qualtrics-sidekick img.sidekick-image, .attach-bottom.qualtrics-sidekick img.jumbotron-image { top: 0; left: 0; right: auto; bottom: auto; width: auto; height: auto; min-width: 100%; min-height: 120%; max-width: 130%; } .attach-bottom.qualtrics-sidekick img.hero-image, .attach-bottom.qualtrics-sidekick img.sidekick-image, .attach-bottom.qualtrics-sidekick img.jumbotron-image { bottom: 0; top: auto; min-height: 150%; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image { left: 0; max-width: 130%; min-width: 100%; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { right: -10%; min-width: 110%; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image { left: -10%; min-width: 110%; max-width: 140%; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { right: -20%; min-width: 120%; } } @media screen and (min-width: 768px) and (max-width: 992px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image { left: -20%; min-width: 120%; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { right: -30%; min-width: 130%; } } @media screen and (min-width: 480px) and (max-width: 768px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image, .attach-bottom.qualtrics-sidekick img.hero-image, .attach-bottom.qualtrics-sidekick img.sidekick-image, .attach-bottom.qualtrics-sidekick img.jumbotron-image { top: auto; bottom: -40%; left: -50%; min-height: 140%; min-width: 150%; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { right: auto; left: -20%; min-width: 120%; } } @media screen and (min-width: 0) and (max-width: 480px) { .qualtrics-sidekick img.hero-image, .qualtrics-sidekick img.sidekick-image, .qualtrics-sidekick img.jumbotron-image { left: -100%; min-width: 200%; max-width: 300%; } .attach-right.qualtrics-sidekick img.hero-image, .attach-right.qualtrics-sidekick img.sidekick-image, .attach-right.qualtrics-sidekick img.jumbotron-image { right: -150%; min-width: 250%; } } .qualtrics-sidekick h1, .qualtrics-sidekick .hero-title, .qualtrics-sidekick h2, .qualtrics-sidekick .section-title, .qualtrics-sidekick h3, .qualtrics-sidekick .description-title, .qualtrics-sidekick p, .qualtrics-sidekick a, .qualtrics-sidekick ul { position: relative; z-index: 5; } .qualtrics-sidekick h2.text-white { color: #FFF; } .qualtrics-sidekick.jumbotron-light-text h1, .qualtrics-sidekick.jumbotron-light-text .hero-title, .qualtrics-sidekick.jumbotron-light-text p, .qualtrics-sidekick.jumbotron-light-text ul { color: white; } .qualtrics-sidekick.overflow-show { overflow: visible; } .qualtrics-sidekick div.container { margin-top: 190px; margin-bottom: 190px; } .qualtrics-sidekick div.container h3, .qualtrics-sidekick div.container .description-title { margin: 0; font-weight: 600; } @media screen and (min-width: 1200px) and (max-width: 1250px) { .qualtrics-sidekick div.container h3.header-cx, .qualtrics-sidekick div.container .description-title.header-cx, .qualtrics-sidekick div.container h3.header-ei, .qualtrics-sidekick div.container .description-title.header-ei, .qualtrics-sidekick div.container h3.header-op, .qualtrics-sidekick div.container .description-title.header-op, .qualtrics-sidekick div.container h3.header-mr, .qualtrics-sidekick div.container .description-title.header-mr { margin-left: 3.5em; } } @media screen and (min-width: 992px) and (max-width: 1047px) { .qualtrics-sidekick div.container h3.header-cx, .qualtrics-sidekick div.container .description-title.header-cx, .qualtrics-sidekick div.container h3.header-ei, .qualtrics-sidekick div.container .description-title.header-ei, .qualtrics-sidekick div.container h3.header-op, .qualtrics-sidekick div.container .description-title.header-op, .qualtrics-sidekick div.container h3.header-mr, .qualtrics-sidekick div.container .description-title.header-mr { margin-left: 3.5em; } } @media screen and (max-width: 823px) { .qualtrics-sidekick div.container h3.header-cx, .qualtrics-sidekick div.container .description-title.header-cx, .qualtrics-sidekick div.container h3.header-ei, .qualtrics-sidekick div.container .description-title.header-ei, .qualtrics-sidekick div.container h3.header-op, .qualtrics-sidekick div.container .description-title.header-op, .qualtrics-sidekick div.container h3.header-mr, .qualtrics-sidekick div.container .description-title.header-mr { margin-left: 3.5em; } } .qualtrics-sidekick div.container h1, .qualtrics-sidekick div.container .hero-title { margin: 0; margin-top: 34px; } .qualtrics-sidekick div.container ul { margin-top: 55px; } @media screen and (max-width: 768px) { .qualtrics-sidekick div.container ul { margin-top: 34px; } } .qualtrics-sidekick div.container .btn-q-primary, .qualtrics-sidekick div.container .btn-pill { margin-top: 23px; } .qualtrics-sidekick.sidekick-light-text h1, .qualtrics-sidekick.sidekick-light-text .hero-title, .qualtrics-sidekick.sidekick-light-text h3, .qualtrics-sidekick.sidekick-light-text .description-title, .qualtrics-sidekick.sidekick-light-text p, .qualtrics-sidekick.sidekick-light-text ul { color: white; } .qualtrics-sidekick.sidekick-light-text .container p { font-size: 18px; font-weight: 200; letter-spacing: 0.03em; } /* RESPONSIVE FOR HERO & SIDEKICK ================================================ */ @media screen and (max-width: 768px) { .qualtrics-hero div.container, .qualtrics-sidekick div.container { margin-top: 75px; margin-bottom: 75px; } .qualtrics-hero div.container h1, .qualtrics-sidekick div.container h1, .qualtrics-hero div.container .hero-title, .qualtrics-sidekick div.container .hero-title { margin-top: 13px; margin-bottom: 13px; } .qualtrics-hero div.container .btn-q-primary, .qualtrics-sidekick div.container .btn-q-primary, .qualtrics-hero div.container .btn-pill, .qualtrics-sidekick div.container .btn-pill { margin-top: 13px; } } /* Line Header This element looks like this: ---------------- HEADER TEXT ---------------- The usage looks like this:

Open Positions

You're able to use default spacing on each one without it interfering with the way they fit together */ hr.qualtrics-hr-break { clear: both; margin-left: 0; margin-right: 0; margin-bottom: 0; border: 0; border-top: 1px #647077 solid; } hr.qualtrics-hr-break.black { border-color: #000; } hr.qualtrics-hr-break.white { border-color: #FFF; } .qualrics-hr-title { margin-top: -0.6em; margin-left: auto; margin-right: auto; padding: 0; background-color: white; text-align: center; min-width: 150px; } h3.qualrics-hr-title { width: 16%; } h4.qualrics-hr-title { width: 14%; } h3.qualrics-hr-title.width-15, h4.qualrics-hr-title.width-15 { width: 15%; } h3.qualrics-hr-title.width-18, h4.qualrics-hr-title.width-18 { width: 18%; } h3.qualrics-hr-title.width-20, h4.qualrics-hr-title.width-20 { width: 20%; } h3.qualrics-hr-title.width-25, h4.qualrics-hr-title.width-25 { width: 25%; } h3.qualrics-hr-title.bg-gray-super-lt, h4.qualrics-hr-title.bg-gray-super-lt { background-color: #f8f8f8; } h3.qualrics-hr-title.bg-gray-lt, h4.qualrics-hr-title.bg-gray-lt { background-color: #d9e0e2; } h3.qualrics-hr-title.bg-gray-md, h4.qualrics-hr-title.bg-gray-md { background-color: #647077; } h3.qualrics-hr-title i, h4.qualrics-hr-title i { font-size: 5.5em; display: block; margin-top: -0.5em; margin-bottom: -0.5em; } /* ------------------------------------------ Logo Strip ------------------------------------------ */ .qualtrics-logos { height: 100%; width: 100%; position: relative; font-weight: normal; } text-align: center; height: 100%; /*.ql-4x{ font-size: 50px; &:before{ font-size: 49px; top: 16px !important; } }*/ } .qualtrics-logos .container > .row > div i { line-height: 0; position: relative; display: block; font-weight: normal !important; overflow: hidden; } .qualtrics-logos .container > .row > div i:before { line-height: 1.5; top: 0 !important; vertical-align: middle; right: 0 !important; font-weight: normal !important; font-size: 50px; background-color: transparent; } @media screen and (min-width: 992px) { .qualtrics-logos .container > .row > div i:before { font-size: 60px; } } @media screen and (min-width: 1200px) { .qualtrics-logos .container > .row > div i:before { font-size: 70px; } } /* -------------------------------------------------- CALL TO ACTION PANEL -------------------------------------------------- This is for those panels with a headline and two buttons. The usage for this looks something like this:

This thing is called a Call to Action panel

That's neat! So helpful
*/ .q-call-to-action-panel.border-top { border-top: 1px #d9e0e2 solid; } .q-call-to-action-panel h2 { text-align: center; font-size: 54px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin-top: 30px; margin-bottom: 15px; font-size: 44px; font-weight: 200; text-transform: none; margin: 0; } .q-call-to-action-panel h2 small, .q-call-to-action-panel h2 .small { font-weight: normal; line-height: 1; color: #d9e0e2; } .q-call-to-action-panel h2 small, .q-call-to-action-panel h2 .small { font-size: 65%; } .q-call-to-action-panel h2 small, .q-call-to-action-panel h2 .small { font-weight: normal; line-height: 1; color: #d9e0e2; } span.q-call-to-action-panel h2 { display: block; } .q-call-to-action-panel h2 small, .q-call-to-action-panel h2 .small { font-size: 65%; } .q-call-to-action-panel section { text-align: center; } .q-call-to-action-panel section a { display: inline-block; } @media screen and (max-width: 768px) { .q-call-to-action-panel a { display: block; width: 85%; margin: 0 auto; } .q-call-to-action-panel a:first-child { margin-bottom: 13px; } } /* -------------------------------------------------- HORIZONTAL ORDERED LIST -------------------------------------------------- The usage for this looks something like this */ .horizontal-ol .container .row h3.empower-subtitle { margin-top: 0; margin-bottom: 23px; color: #5fb4e5; } .horizontal-ol .container .row h1, .horizontal-ol .container .row .hero-title { margin: 0 0 120px; color: #FFF; text-align: center; } .horizontal-ol .container .row .empower-number { float: left; padding-left: 1px; width: 32px; height: 33px; color: #FFF; background-color: #5fb4e5; line-height: 33px; text-align: center; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } .horizontal-ol .container .row .empower-about { margin-left: 50px; } .horizontal-ol .container .row .empower-about h3 { color: #5fb4e5; line-height: 33px; font-weight: 600; } .horizontal-ol .container .row .empower-about p { margin-top: 10px; color: #FFF; font-weight: 200; letter-spacing: 0.03em; } @media screen and (max-width: 992px) { .horizontal-ol .container .row h1, .horizontal-ol .container .row .hero-title { margin-bottom: 80px; } .horizontal-ol .container .row .empower-about { margin-bottom: 35px; } } @media screen and (max-width: 480px) { .horizontal-ol .container .row h1, .horizontal-ol .container .row .hero-title { margin-bottom: 60px; } } /* -------------------------------------------------- INFORMATION LIST -------------------------------------------------- This is for sections that have a grid of divs with an icon above a title and a paragraph. The usage for this looks something like this: Emmet code (with 'col-md-6' divs & no header): section.qualtrics-information-list>div.container>div.row>div.col-md-6*6>i.qi.qi-+h3+p - Emmet is a sublime plugin; if you have it, copy paste the above and press tab and voila!

When it comes to CX, we've got
the bases covered.

I really like bacon

Bacon ipsum dolor amet turkey kielbasa bacon, jerky swine pork loin pork chop capicola cupim. Ribeye pork chop pork loin tongue tri-tip corned beef. Shoulder swine cow landjaeger. Porchetta leberkas short ribs pork alcatra.

I also like cats

Human give me attention meow. Use lap as chair. Pelt around the house and up and down stairs chasing phantoms swat at dog scream at teh bath and chase mice, yet meow. Sleep in the bathroom sink make meme, make cute face hunt by meowing loudly at 5am next to human slave food dispenser. Caticus cuteicus. Sun bathe use lap as chair, and drink water out of the faucet scream at teh bath refuse to leave cardboard box i am the best. Lounge in doorway i am the best inspect anything brought into the house.

NOTE: the columns' divs MUST have no whitespace in between them. This is because we are using display: inline-block to fix the issue of floated divs catching on other divs when the divs have different heights. */ .information-list-module > div { float: none; display: inline-block; vertical-align: top; margin-top: 80px; } .information-list-module > div.q-info-header { margin-top: 0; } .information-list-module i { color: #5fb4e5; font-size: 40px; } .information-list-module h3, .information-list-module .description-title { margin: 8px 0 20px 0; font-weight: 600; line-height: 1.6em; } .information-list-module p { margin: 0; } .information-list-module .q-align-left { margin-left: 4.25%; } @media screen and (max-width: 992px) { .information-list-module .q-align-left { margin-left: 0; } } .qualtrics-information-list .container .row > div { float: none; display: inline-block; vertical-align: top; margin-top: 80px; } .qualtrics-information-list .container .row > div.q-info-header { margin-top: 0; } .qualtrics-information-list .container .row i { color: #5fb4e5; font-size: 40px; } .qualtrics-information-list .container .row h3, .qualtrics-information-list .container .row .description-title { margin: 8px 0 20px 0; font-weight: 600; line-height: 1.6em; } .qualtrics-information-list .container .row p { margin: 0; } .qualtrics-information-list .container .row .q-align-left { margin-left: 4.25%; } @media screen and (max-width: 992px) { .qualtrics-information-list .container .row .q-align-left { margin-left: 0; } } .grid-information-list > div { float: none; display: inline-block; vertical-align: top; margin-top: 80px; } .grid-information-list > div.q-info-header { margin-top: 0; } .grid-information-list i { color: #5fb4e5; font-size: 40px; } .grid-information-list h3, .grid-information-list .description-title { margin: 8px 0 20px 0; font-weight: 600; line-height: 1.6em; } .grid-information-list p { margin: 0; } .grid-information-list .q-align-left { margin-left: 4.25%; } @media screen and (max-width: 992px) { .grid-information-list .q-align-left { margin-left: 0; } } /* -------------------------------------------------- EXPANDING ELEMENT -------------------------------------------------- This is for those sections that have an element that will expand onclick of a button It requires the following: - parent element somewhere up the chain has the class "expand-outer" - content to be expanded is a child of an element with class "expand-inner" - one or more links with the class "link-expand" is inside of the "expand-outer" element and one of which is outside of the "expand-inner" element There can be as many expanding elements on a page as required, but only one "expand-inner" element may be inside of an "expand-outer" element Here is some example html:

=

=

=

=
View More
NOTE: if there are multiple links inside of the expanding section, ALL of the links will update with their alternate texts when ANY of them are clicked on */ .expand-outer { position: relative; } .expand-outer .expand-inner { position: absolute; display: none; width: 100%; left: 0; top: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.3s, filter 0.3s; -webkit-transition: opacity 0.3s, filter 0.3s; z-index: -2; } .expand-outer .expand-inner.show { opacity: 1; filter: alpha(opacity=100); z-index: 0; } .expand-outer .expand-inner.collapse-inner { display: block; position: relative; height: 0; } .expand-outer.border-bottom { border-bottom: 1px #647077 solid; } .expand-outer.border-bottom-lt { border-bottom: 1px #d9e0e2 solid; } .expand-outer.border-top-lt { border-top: 1px #d9e0e2 solid; } .expand-outer.open.open-border-bottom { border-bottom: 1px #647077 solid; } .expand-outer.open.open-border-bottom-lt { border-bottom: 1px #d9e0e2 solid; } /* -------------------------------------------------- EXPANDING SECTION -------------------------------------------------- This is for sections that expand and contain an additional close button, paragraph, and image with a caption; Emmet code: div.expand-outer>(section.qualtrics-sidekick>(div.container>div.row>(div.col-sm-7>h3+h1)+div.col-sm-5>(ul.plus-list>li*3)+a.link-expand.btn-q-primary[href="#" data-alternate="See More" scroll="true" data-visible="false"]{See More}))+img.sidekick-image[src="/wp-content/themes/qualtrics/images/pages/"]

Customer Experience

Exceed expectations
every leg of the journey

  • Post-flight satfisfaction surveys
  • Ad-hoc passenger feedback
See More
Close

I know HTML
How To Meet Ladies

Lorem ipsum testing dis

Lorem ipsum testing dis

In the end, using Qualtrics leads to major leaps in brand loyalty and retention. Pair that with an increased Net Promoter Score and you have an airline that will stay at top flight.

Lorem ipsum dolor sit amet, gravida adipiscing orci tellus quis at, non nibh curabitur. Quis semper, sed quam elit nisl urna urna urna, suspendisse lacinia nibh. Wisi libero, suscipit amet eleifend, arcu pulvinar, iaculis vitae tellus wisi. Eget elementum.

Emloyee 360's

Build a better workforce with fast and customizable 360 employee reviews.

Employee Insight

Discover how passionate your employees are about their work and how proud they are to work for your company. Qualtrics makes it easy to grow your business from the inside out.

*/ .expanded-section .container { position: relative; } .expanded-section .container .row { position: relative; } .expanded-section .container .link-expand { position: absolute; top: -121px; right: 0; } @media screen and (max-width: 992px) { .expanded-section .container .link-expand { right: 15px; } } .expanded-section .container .link-expand.link-caret:after { display: inline-block; font-family: 'Qualtrics Icons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\E044"; } .expanded-section .container.spacing-md .link-expand, .expanded-section .container.spacing-md-top .link-expand { top: -41px; } .expanded-section .container.close-section-link { padding-left: 40px; padding-right: 40px; } .expanded-section .container.close-section-link .link-expand { top: -8px; right: 40px; } .expanded-section .container .main-industry-img { max-width: 100%; } .expanded-section .container .main-industry-img.border-bottom { border-bottom: 1px #d9e0e2 solid; } .expanded-section .container .industry-img-caption { position: absolute; right: 0; top: 17%; } .expanded-section .container .industry-img-caption hr { max-width: 206px; border-top: 5px #5fb4e5 solid; } .expanded-section .container .industry-img-caption p { margin-bottom: 0; color: #5fb4e5; font-weight: 200; } .expanded-section .container .industry-img-caption.extra-padding { padding: 0 15px 0 50px; } @media screen and (max-width: 992px) { .expanded-section .container .industry-img-caption.extra-padding { padding: 0 15px; } } @media screen and (max-width: 992px) { .expanded-section .container .main-industry-img { display: block; margin: 0 auto; } .expanded-section .container .industry-img-caption { position: relative; right: auto; bottom: auto; display: block; margin-top: 50px; } .expanded-section .container .industry-img-caption .expanded-img-caption { margin: 0 auto; width: 100%; max-width: 500px; } } .link-expand.link-caret:after { display: inline-block; font-family: 'Qualtrics Icons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\E044"; position: relative; top: 3px; left: 5px; font-size: 1.15em; } .open .link-expand.link-caret:after { content: "\E047"; top: 2px; } /* -------------------------------------------------- SLANTED CAPTION -------------------------------------------------- This is used to add a caption/label like that in the first section on the home page. The text nests on either the left or right side of the container depending on classes used - to align on the left, use "align-left" along with the "slanted-caption-container" class; "align-right" for the right Here is some example html:

Customer Experience

Delivering world-class customer
satisfaction, one cup at a time

By using Qualtrics and a little early morning coffee, JetBlue boosted its
Net Promoter® Score by 12 points in one year. At JetBlue, a one point increase
means an extra five to eight million dollars in annual revenue. You do the math.

Watch Video

JETBLUE + QUALTRICS
FINDING MILLIONS THROUGH NPS

Jet Blue
*/ .slanted-caption-section .container { position: relative; } .slanted-caption-section .container .col-bl-12 { margin-right: 15px; margin-left: 15px; } .slanted-caption-section .container .slanted-caption-container { display: inline-block; position: absolute; z-index: 1; bottom: 0; left: 0; padding: 18px 0 0; height: 70px; color: #2F393F; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; } .slanted-caption-section .container .slanted-caption-container.caption-3-lines { padding-top: 10px; } .slanted-caption-section .container .slanted-caption-container.top-plus-5 { top: auto; bottom: auto; top: 5%; } .slanted-caption-section .container .slanted-caption-container.top-minus-5 { top: auto; bottom: auto; top: -5%; } .slanted-caption-section .container .slanted-caption-container.top-plus-10 { top: auto; bottom: auto; top: 10%; } .slanted-caption-section .container .slanted-caption-container.top-minus-10 { top: auto; bottom: auto; top: -10%; } .slanted-caption-section .container .slanted-caption-container.top-plus-20 { top: auto; bottom: auto; top: 20%; } .slanted-caption-section .container .slanted-caption-container.top-minus-20 { top: auto; bottom: auto; top: -20%; } .slanted-caption-section .container .slanted-caption-container.bottom-plus-5 { top: auto; bottom: auto; bottom: 5%; } .slanted-caption-section .container .slanted-caption-container.bottom-minus-5 { top: auto; bottom: auto; bottom: -5%; } .slanted-caption-section .container .slanted-caption-container.bottom-plus-10 { top: auto; bottom: auto; bottom: 10%; } .slanted-caption-section .container .slanted-caption-container.bottom-minus-10 { top: auto; bottom: auto; bottom: -10%; } .slanted-caption-section .container .slanted-caption-container.bottom-plus-20 { top: auto; bottom: auto; bottom: 20%; } .slanted-caption-section .container .slanted-caption-container.bottom-minus-20 { top: auto; bottom: auto; bottom: -20%; } .slanted-caption-section .container .slanted-caption-container .slanted-caption { position: absolute; top: 0; right: 0; padding: 0; width: 500%; height: 82px; background: #c0cdda; opacity: 0.7; filter: alpha(opacity=70); } .slanted-caption-section .container .slanted-caption-container .slanted-caption .slanted-caption-desc { color: #fff; } .slanted-caption-section .container .slanted-caption-container .slanted-caption:before { content: ''; position: absolute; right: -97px; border: 10px #c0cdda solid; border-right-color: transparent; border-bottom-color: transparent; border-width: 0px 42px 83px 56px; } .slanted-caption-section .container .slanted-caption-container .slanted-caption-title { position: relative; display: block; padding-right: 25px; padding-left: 15px; line-height: 1.5; font-size: 0.75em; font-weight: 600; z-index: 1; } .slanted-caption-section .container .slanted-caption-container .slanted-caption-title .white { color: #fff; font-weight: 600; } .slanted-caption-section .container .slanted-caption-container.align-right { right: 0; left: auto; } .slanted-caption-section .container .slanted-caption-container.align-right .slanted-caption { left: 0; } .slanted-caption-section .container .slanted-caption-container.align-right .slanted-caption:before { right: auto; left: -97px; border-right-color: #c0cdda; border-left-color: transparent; border-width: 0px 56px 83px 42px; } .slanted-caption-section .container .slanted-caption-container.align-right .slanted-caption-title { padding-right: 0; padding-left: 25px; } .slanted-caption-section .container .slanted-caption-container.slanted-bg-dark .slanted-caption { background: #90a7be; } .slanted-caption-section .container .slanted-caption-container.slanted-bg-dark .slanted-caption:before { border-left-color: #90a7be; } .slanted-caption-section .container .slanted-caption-container.slanted-bg-dark.align-right .slanted-caption:before { border-right-color: #c0cdda; border-left-color: transparent; } @media screen and (max-width: 992px) { .slanted-caption-section .container .slanted-caption-container { padding-top: 13px; } .slanted-caption-section .container .slanted-caption-container .slanted-caption-title { padding-right: 10px; padding-left: 15px; width: 265px; } .slanted-caption-section .container .slanted-caption-container .slanted-caption-title.slanted-mobile-small { width: 235px; } .slanted-caption-section .container .slanted-caption-container.align-right .slanted-caption-title { padding-right: 15px; padding-left: 20px; } } /* -------------------------------------------------- JOURNEY MAP SECTION -------------------------------------------------- */ .journey-map-section .row h1, .journey-map-section .row .hero-title { margin-top: 0; line-height: 70px; text-align: center; } .journey-map-section .row > div.cx-header-outer > p { font-size: 1.16em; font-weight: 200; text-align: center; } .journey-map-section .row .journey-map-outer { position: relative; display: inline-block; max-width: 100%; overflow: hidden; } @media screen and (max-width: 768px) { .journey-map-section .row .journey-map-outer { display: none; } } .journey-map-section .row .journey-map-outer img.journey-map-img { max-width: 100%; } .journey-map-section .row .journey-map-outer .toggle-map-outer { position: absolute; width: 150px; height: 150px; } .journey-map-section .row .journey-map-outer .toggle-map-outer img.mobile-journey-img { display: none; } .journey-map-section .row .journey-map-outer .toggle-map-outer a { display: block; width: 150px; height: 150px; line-height: 150px; text-align: center; cursor: default; } .journey-map-section .row .journey-map-outer .toggle-map-outer a span { display: inline-block; vertical-align: middle; color: #778593; font-size: 0.85em; line-height: normal; } .journey-map-section .row .journey-map-outer .toggle-map-outer div.active-item { position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; } .journey-map-section .row .journey-map-outer .toggle-map-outer.active a span { color: #FFF; } .journey-map-section .row .journey-map-outer .toggle-map-outer.active div.active-item { background-color: #5fb4e5; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-1 { top: 40.47%; left: -0.8%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-2 { top: 66%; left: 20.75%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-3 { top: 36.5%; left: 38.57%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-4 { top: 1.8%; left: 57.8%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-5 { top: 15%; left: 82.1%; } @media screen and (max-width: 1200px) { .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-1 { top: 37.47%; left: -2.6%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-2 { top: 63%; left: 18.95%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-3 { top: 33.5%; left: 36.77%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-4 { top: -1.2%; left: 56.2%; } .journey-map-section .row .journey-map-outer .toggle-map-outer#map-item-5 { top: 12%; left: 80.3%; } } @media screen and (max-width: 768px) { .journey-map-section .row .mobile-journey { padding: 0; } } @media screen and (min-width: 768px) { .journey-map-section .row .mobile-journey .journey-icon-outer { display: none; } } .journey-map-section .row .map-description-outer > div.map-description-inner { display: none; position: relative; } .journey-map-section .row .map-description-outer > div.map-description-inner.active { display: block; } .journey-map-section .row .map-description-outer > div.map-description-inner a.mobile-exit { display: none; position: absolute; right: 17px; top: 17px; width: 30px; height: 30px; color: #000; border: 1px #d9e0e2 solid; line-height: 32px; text-align: center; -webkit-border-radius: 51px; -moz-border-radius: 51px; border-radius: 51px; } @media screen and (max-width: 768px) { .journey-map-section .row .map-description-outer > div.map-description-inner a.mobile-exit { display: block; } } .journey-map-section .row .map-description-outer > div.map-description-inner h3 { font-weight: 600; } @media screen and (max-width: 768px) { .journey-map-section .row .map-description-outer > div.map-description-inner h3 { max-width: 90%; } } .journey-map-section .row .map-description-outer > div.map-description-inner p { font-weight: 200; } .journey-map-section .row .map-description-outer .mobile-map-outer { display: none; position: relative; margin: 0 auto; height: auto; } @media screen and (max-width: 768px) { .journey-map-section .row .map-description-outer .mobile-map-outer { display: block; } } .journey-map-section .row .map-description-outer .mobile-map-outer img.mobile-journey-img { display: block; } .journey-map-section .row .map-description-outer .mobile-map-outer.active-div span { color: #FFF; } .journey-map-section .row .map-description-outer .mobile-map-outer.active-div .active-item { background-color: #5fb4e5; } .journey-map-section .row .map-description-outer .mobile-map-outer.active-div + .map-description-inner { display: block; padding: 30px; border: 1px #7c8d99 solid; border-width: 1px 0; } .journey-map-section .row .map-description-outer .mobile-map-outer.active-div + .map-description-inner h3 { margin-top: 0; } .journey-map-section .row .map-description-outer .mobile-map-outer.active-div + .map-description-inner p { margin-bottom: 0; } .journey-map-section .row .map-description-outer .mobile-map-outer a { position: absolute; bottom: 11px; width: 160px; height: 90px; display: block; line-height: 89px; text-align: center; cursor: default; } .journey-map-section .row .map-description-outer .mobile-map-outer a span { display: inline-block; vertical-align: middle; color: #778593; font-size: 0.85em; line-height: normal; } .journey-map-section .row .map-description-outer .mobile-map-outer div.mobile-journey-img { background-image: url(/wp-content/themes/qualtrics/images/pages/customer-experience/mobile-journey-map.png); background-repeat: no-repeat; display: block; } .journey-map-section .row .map-description-outer .mobile-map-outer .active-item { position: absolute; top: 0; z-index: -1; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-bottom { width: 160px; height: 88px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-bottom .mobile-journey-img { background-position: 0 0; width: 160px; height: 88px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-bottom .active-item { width: 160px; height: 88px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-bottom a { bottom: 0px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded { width: 160px !important; height: 111px !important; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded .mobile-journey-img { background-position: -160px 0 !important; width: 160px !important; height: 111px !important; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded .active-item { width: 160px !important; height: 111px !important; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-top { width: 160px; height: 100px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-top .mobile-journey-img { background-position: -320px 0; width: 160px; height: 100px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-top .active-item { width: 160px; height: 100px; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded-bottom { width: 160px !important; height: 100px !important; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded-bottom .mobile-journey-img { background-position: -480px 0 !important; width: 160px !important; height: 100px !important; } .journey-map-section .row .map-description-outer .mobile-map-outer.journey-mobile-expanded-bottom .active-item { width: 160px !important; height: 100px !important; } @media screen and (max-width: 768px) { .journey-map-section .row .map-description-outer .mobile-map-outer { display: block; } } .journey-map-section .journey-icon-outer { display: inline-block; vertical-align: top; float: left; width: 10%; color: #d9e0e2; text-align: center; } @media screen and (max-width: 992px) { .journey-map-section .journey-icon-outer { width: 20%; margin-bottom: 35px; } } @media screen and (max-width: 768px) { .journey-map-section .journey-icon-outer { width: 33%; margin-bottom: 25px; } } .journey-map-section .journey-icon-outer i { display: block; font-size: 2em; } .journey-map-section .journey-icon-outer span { display: block; margin: 0 auto; width: 65%; font-size: 0.75em; line-height: 1.3em; text-transform: uppercase; font-weight: 500; } @media screen and (max-width: 768px) { .journey-map-section .journey-icon-outer span { width: 100%; } } @media screen and (max-width: 768px) { .journey-map-section .journey-icon-outer i { color: #5fb4e5; } .journey-map-section .journey-icon-outer span { color: #647077; } } .journey-map-section .journey-icon-outer.active i { color: #5fb4e5; } .journey-map-section .journey-icon-outer.active span { color: #647077; } .journey-map-section .journey-map-icons { position: relative; padding-top: 35px; border-top: 1px #d9e0e2 solid; } @media screen and (max-width: 768px) { .journey-map-section .journey-map-icons { display: none; } } .journey-map-section .journey-map-icons .journey-icons-title-wrapper { position: absolute; top: -15px; left: 50%; width: 150px; } .journey-map-section .journey-map-icons .journey-icons-title-wrapper .journey-icons-title { position: relative; left: -50%; display: block; padding: 5px 8px; color: #d9e0e2; background-color: #FFF; font-size: 0.8em; text-align: center; text-transform: uppercase; } /* -------------------------------------------------- EXPANDING GRID -------------------------------------------------- The usage for this looks something like this */ @media screen and (max-width: 1200px) { .grid-expand > .container { margin-top: 120px !important; margin-bottom: 120px !important; } } @media screen and (max-width: 768px) { .grid-expand > .container { margin-top: 80px !important; margin-bottom: 80px !important; } } .grid-expand .row { position: relative; margin-top: -30px !important; } .grid-expand .row .grid-item-outer { margin-top: 30px; } .grid-expand .row .grid-item-outer div.grid-item-inner { position: relative; display: inline-block; width: 100%; height: 164px; line-height: 164px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header { display: inline-block; vertical-align: middle; padding: 0 15px; width: 100%; line-height: 1; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header h2 { margin: 0; padding: 20px; color: #FFF; line-height: 1; text-align: center; font-size: 28px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header h2.font-40 { font-size: 40px; } .grid-expand .row .grid-item-outer div.grid-item-inner:hover .grid-item-header i.ql:before { font-size: 1.1em; } .grid-expand .row .grid-item-outer div.grid-item-inner:hover .grid-item-header h2.font-40 { font-size: 44px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #647077; z-index: -1; } @media screen and (max-width: 768px) { .grid-expand .row .grid-item-outer div.grid-item-inner { height: 150px; line-height: 150px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header h2 { font-size: 25px; } } @media screen and (max-width: 600px) { .grid-expand .row .grid-item-outer div.grid-item-inner { height: 120px; line-height: 120px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header h2 { font-size: 25px; } } @media screen and (max-width: 480px) { .grid-expand .row .grid-item-outer { margin-top: 15px; } .grid-expand .row .grid-item-outer div.grid-item-inner { height: 150px; line-height: 150px; } .grid-expand .row .grid-item-outer div.grid-item-inner .grid-item-header h2 { font-size: 30px; } } .grid-expand .row .grid-item-outer:hover div.grid-item-inner .grid-item-bg { background-color: #41494d; } .grid-expand .row .grid-item-outer.active div.grid-item-inner .grid-item-bg { background-color: #e10019; } .grid-expand .grid-expanded-wrapper { position: relative; } .grid-expand .grid-expanded-item { position: absolute; display: none; padding: 0 15px; width: 100%; left: 0; top: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.3s, filter 0.3s; -webkit-transition: opacity 0.3s, filter 0.3s; z-index: -2; } .grid-expand .grid-expanded-item.show { opacity: 1; filter: alpha(opacity=100); z-index: 0; } .grid-expand .grid-expanded-item.collapse-inner { position: relative; display: block; float: left; height: 0; } .grid-expand .grid-expanded-item .grid-pointer { position: absolute; top: 14px; left: 175px; border: 0 #0A1118 solid; border-width: 0 20px 17px; border-left-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .grid-expand .grid-expanded-item .grid-expanded-inner { margin-top: 30px; padding: 80px 85px; overflow: hidden; position: relative; } @media screen and (max-width: 992px) { .grid-expand .grid-expanded-item .grid-expanded-inner { padding: 70px 65px; } } @media screen and (max-width: 768px) { .grid-expand .grid-expanded-item .grid-expanded-inner { padding: 55px 45px; } } @media screen and (max-width: 480px) { .grid-expand .grid-expanded-item .grid-expanded-inner { padding: 30px 15px; } } .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { position: absolute; top: 0; left: 0; min-width: 1280px; min-height: 100%; z-index: 0; } .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { top: auto; bottom: 0; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { left: auto; right: 0; } @media screen and (min-width: 1600px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { top: 0; left: 0; right: auto; bottom: auto; width: auto; height: auto; min-width: 100%; min-height: 120%; max-width: 130%; } .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { bottom: 0; top: auto; min-height: 150%; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { left: 0; max-width: 130%; min-width: 100%; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { right: -10%; min-width: 110%; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { left: -10%; min-width: 110%; max-width: 140%; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { right: -20%; min-width: 120%; } } @media screen and (min-width: 768px) and (max-width: 992px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { left: -20%; min-width: 120%; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { right: -30%; min-width: 130%; } } @media screen and (min-width: 480px) and (max-width: 768px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-bottom.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { top: auto; bottom: -40%; left: -50%; min-height: 140%; min-width: 150%; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { right: auto; left: -20%; min-width: 120%; } } @media screen and (min-width: 0) and (max-width: 480px) { .grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { left: -100%; min-width: 200%; max-width: 300%; } .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.hero-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.sidekick-image, .attach-right.grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { right: -150%; min-width: 250%; } } .grid-expand .grid-expanded-item .grid-expanded-inner h1, .grid-expand .grid-expanded-item .grid-expanded-inner .hero-title, .grid-expand .grid-expanded-item .grid-expanded-inner h2, .grid-expand .grid-expanded-item .grid-expanded-inner .section-title, .grid-expand .grid-expanded-item .grid-expanded-inner h3, .grid-expand .grid-expanded-item .grid-expanded-inner .description-title, .grid-expand .grid-expanded-item .grid-expanded-inner p, .grid-expand .grid-expanded-item .grid-expanded-inner a, .grid-expand .grid-expanded-item .grid-expanded-inner ul { position: relative; z-index: 5; } .grid-expand .grid-expanded-item .grid-expanded-inner h2.text-white { color: #FFF; } .grid-expand .grid-expanded-item .grid-expanded-inner.jumbotron-light-text h1, .grid-expand .grid-expanded-item .grid-expanded-inner.jumbotron-light-text .hero-title, .grid-expand .grid-expanded-item .grid-expanded-inner.jumbotron-light-text p, .grid-expand .grid-expanded-item .grid-expanded-inner.jumbotron-light-text ul { color: white; } .grid-expand .grid-expanded-item .grid-expanded-inner.overflow-show { overflow: visible; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-exit { position: absolute; top: 35px; right: 35px; width: 35px; height: 35px; color: #FFF; line-height: 36px; text-align: center; border: 2px #FFF solid; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-exit.grid-exit-dark { color: #000; border-color: #000; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content { position: relative; z-index: 1; color: #FFF; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content > * { float: none; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content p { font-weight: 200; letter-spacing: 0.03em; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .customer-success-wrapper a.q-arrow-link { color: #FFF; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .customer-success-wrapper a.q-arrow-link:hover { text-decoration: underline; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .customer-success-wrapper div:first-child { padding-right: 30px; border-right: 1px #FFF solid; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .customer-success-wrapper div:first-child + div { padding-left: 30px; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .grid-list-overview { float: left; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .grid-list-overview ul { margin: 0 0 1.6em; padding: 0; list-style-type: none; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .grid-list-overview ul li { margin: 0 0 1.1em; line-height: 1em; font-size: 0.8em; } .grid-expand .grid-expanded-item .grid-expanded-inner .grid-expanded-content .grid-list-overview ul li.overview-title { margin: 0 0 0.7em; color: #5fb4e5; line-height: 1.7em; font-weight: 600; text-transform: uppercase; } .grid-expand .grid-expanded-item .grid-expanded-inner .custom-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2F393F; z-index: -2; } .grid-expand .grid-expanded-item .grid-expanded-inner img.jumbotron-image { width: auto; min-height: auto; } /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/wp-content/themes/qualtrics/images/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('/wp-content/themes/qualtrics/images/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../img/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('/wp-content/themes/qualtrics/images/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, 0.8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/wp-content/themes/qualtrics/images/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('/wp-content/themes/qualtrics/images/ancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } #mkto-add-calendar div:first-child { bottom: 209px!important; }