@import url("https://use.typekit.net/hjy7xge.css");

/***********************************************/
/* CSS @imports must be at the top of the file */
/***********************************************/

/*------------PRESETS-------------*/
.virtual-header > .row-fluid-wrapper {
  max-width: 1200px;
  margin: 3em auto!important;
  padding: 1em;
  float: none!important;
}
a:hover {cursor: pointer!important;}
a:focus, a:active, a:hover {outline: none; text-decoration: none;}

/*************************/
/*       TYPOGRAPHY     */
/************************/

.text-white, .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p {color: #ffffff;}
.text-blue, .text-blue h1, .text-blue h2, .text-blue h3, .text-blue h4, .text-blue h5, .text-blue h6, .text-blue p {color: #0075AA;}
.text-green, .text-green h1, .text-green h2, .text-green h3, .text-green h4, .text-green h5, .text-green h6, .text-green p {color: #00B2A9;}
.text-goGreen, .text-goGreen h1, .text-goGreen h2, .text-goGreen h3, .text-goGreen h4, .text-goGreen h5, .text-goGreen h6, .text-goGreen p {color: #00A252;}
.text-red, .text-red h1, .text-red h2, .text-red h3, .text-red h4, .text-red h5, .text-red h6, .text-red p {color: #AF272F;}

.text-center, .text-center h1, .text-center h2, .text-center h3, .text-center h4, .text-center h5, .text-center h6, .text-center p {text-align: center;}
.caps, .caps h1, .caps h2, .caps h3, .caps h4, .caps h5, .caps h6, .caps p {text-transform: uppercase;}
.text-bold, .text-bold h1, .text-bold h2, .text-bold h3, .text-bold h4, .text-bold h5, .text-bold h6, .text-bold p {font-weight: 900;}

.heroHead {padding-bottom: 10px; max-width: 650px; display: block; margin: auto!important;}
.heroHead h1 {font-family: ff-good-headline-web-pro-com, sans-serif; font-weight: 700; letter-spacing: 2px; margin: 0;font-size: 45px!important; line-height: .9;  }
.heroTxt {max-width: 600px; display: block; margin: auto!important;}
.mainHead h2 {font-family: ff-good-headline-web-pro-com, sans-serif; font-weight: 600; letter-spacing: 1px; margin: 0;font-size: 35px!important; line-height: 1;}
.subHead h3 {font-family: museo-sans, sans-serif; letter-spacing: 2px; font-weight: 900; font-size: 16px!important; line-height: 1; margin: 0;}
.heroTxt p, .paraTxt p, .iconTxt p, .prodTxt p, .vidTxt p  {font-family: museo-sans, sans-serif; letter-spacing: .25px; font-weight: 300; margin:0;font-size: 14px!important; line-height: 1.5;}
.studyHead h4 {font-family: ff-good-headline-web-pro-com, sans-serif; font-weight: 700; letter-spacing: 1px; margin:0;}
.sourcesTxt li {font-family: museo-sans, sans-serif; letter-spacing: .25!important; font-weight: 300; font-size: 11px!important; line-height: 1; padding:0;}
.testimonialLocation {font-family: museo-sans, sans-serif; letter-spacing: 3px; font-weight: 700; margin: 0; font-size: 13px!important; line-height: 1;}
.testimonialName {font-family: museo-sans, sans-serif; font-weight: 700;font-size: 16px!important; line-height: 1;}
.testimonialTxt {padding-bottom: 15px; line-height: 1.25; font-family: museo-sans, sans-serif; letter-spacing: .25px; font-weight: 300; margin:0;font-size: 14px!important;}
.statTxt {font-family: museo-sans, sans-serif; font-weight: 500; float: center;}
.iconHead h5 {font-family: museo-sans, sans-serif; font-weight: 700; margin: 0; padding-bottom: 10px; font-size: 16px; line-height: 1.25;}
.prodHeadline h4 {font-family: ff-good-headline-web-pro-com, sans-serif; font-weight: 700; letter-spacing: 1px; margin: 0; text-transform: uppercase;font-size: 35px!important; line-height: 1;}
.prodHead h5 {font-family: museo-sans, sans-serif; letter-spacing: .5px; font-weight: 700; margin: 0;}
.heroTxt p, .heroHead h1, .heroLeft {text-align: center;}
.iconTxt p {font-size: 14px; line-height: 18px;}
.vidTxt p {max-width: 800px; display: block; margin: auto; padding-top: 20px; }
.row-fluid .subHead {min-height: auto;}

/*************************/
/*       BUTTONS        */
/************************/

.btnWrap {padding-top: 15px;}

.ojBtn, .blueBtn, .greenBtn, .redBtn, .turqBtn {
  font-size: 16px!important;
  font-family: museo-sans, sans-serif;
  letter-spacing: .25; margin: 0;
  padding: 10px 40px!important;
}

.borderBtn {
  background-color: transparent; 
  border: solid 2px #fff; 
  padding: 10px 30px;
  color: #fff;
  font-size: 16px!important;
  font-family: museo-sans, sans-serif;
  letter-spacing: .25; margin: 0;
  transition: all 1s ease-out; 
}
.borderBtn .btnIcon {width: 16px; height: auto; padding-right: 10px; display: inline;}
.borderBtn:hover {
  cursor: pointer; 
  background-color: rgba(0, 0, 0, 0.25);
}

/*************************/
/*         HERO         */
/************************/
#heroSection {
  background-position: center bottom; 
  background-size: cover; 
  background-repeat: no-repeat;
  padding: 40px;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2023/Opalescence%20Phase%206/Landing_Page/BKGD-Image-Opal.jpg');
}
.heroTxt {padding: 5px 0; 
   
}
.opalLogo_Hero {
  width: 80%; 
  max-width: 325px; height: auto; 
  padding-bottom: 20px; 

}
#heroLinks {padding-top: 20px; padding-bottom: 30px;}
#heroLinks .turqBtn {min-width: 105px; }
#heroLinks .shopLeft_btn { padding-bottom: 10px;}
#heroLinks .borderBtn {display: block; margin: auto;}
/*************************/
/*     VIDEO SECTION    */
/************************/

.vidWrap {padding-top: 20px;}
.vidImg {width: 100%; max-width: 650px!important; height: auto;transition: all 1s ease-out; float: none; display: block; margin: auto; -webkit-filter: brightness(100%);}
.vidImg:hover {-webkit-filter: brightness(80%);}

/*************************/
/*     TESTIMONIALS      */
/************************/

#clinicianTestimonials {
  background-position: center top; 
  background-size: cover; 
  background-repeat: no-repeat;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2021/Q3_OpalescenceLeader/Landing%20Page/Mobile_Globe_angledBG.jpg');
}
#Pf {
  background-position: center top; 
  background-size: cover; 
  background-repeat: no-repeat;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2023/Opalescence%20Phase%206/Landing_Page/PF-background.jpg');
}
#Go{
  background-position: center top; 
  background-size: cover; 
  background-repeat: no-repeat;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2023/Opalescence%20Phase%206/Landing_Page/PF-background.jpg');
}
#Boost {
  background-position: center top; 
  background-size: cover; 
  background-repeat: no-repeat;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2023/Opalescence%20Phase%206/Landing_Page/PF-background.jpg');
}
#Family{
  background-position: center top; 
  background-size: cover; 
  background-repeat: no-repeat;
  background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2023/Opalescence%20Phase%206/Landing_Page/Blue%20Background.png');
}
.shop-family {
  padding-top: 34px;
}

.testimonialCarousel {padding-top: 20px;}

/*************************/
/*     ICON SECTION     */
/************************/
#iconBg .iconWrap {margin: 0!important; padding: 2%; width: 100%!important;}
.iconImg img {display: block; margin: auto; height: 85px!important; width: auto!important; padding-bottom: 15px;}



/*************************/
/*     LAYOUT STYLES    */
/************************/
.pad-row {padding: 40px 8%;}

/*************************/
/*    MEDIA QUERIES      */
/************************/

@media screen and (min-width: 768px) {
  .pad-row {padding: 40px 5%;}
  #heroSection {-webkit-}
  #iconBg .iconWrap {width: 48%!important; min-height: 300px;}
  #gscWrap .row-fluid {display: flex;}
  .statWrap {padding: 0;}
  .prodHead h5 {min-height: 40px;}
  .prodTxt p {min-height: 90px;}
  #heroLinks .shopLeft_btn { text-align: right; padding-bottom: 0;}
  #heroLinks .borderBtn {margin: 0;}
}

@media screen and (min-width: 805px) {
  #prodContainer .prodWrap {min-height: 32em;}
  #Go .goImage {order: 1;}
    
}

@media (min-width: 768px) and (max-width: 1399px) {
  #iconBg .fw-tab {width: 100%!important; display: block; margin: auto!important; max-width: 500px; float: none!important;}
}

@media (min-width: 861px) and (max-width: 1023px) {
  .opalLogo_Hero img {width: 100%!important;}
  .articleImg img {width: 100%!important;}
}

@media screen and (min-width: 992px) {
  .pad-row {padding: 50px 5%;}
  #clinicianTestimonials {background-image: url('https://5802407.fs1.hubspotusercontent-na1.net/hubfs/5802407/1_Ultradent%20Products/Campaigns/2021/Q3_OpalescenceLeader/Landing%20Page/Desktop_Globe_BG_Revised.jpg');}
  .statsSection {padding-bottom: 50px;}
  .leftArticle, .rightArticle {padding-top: 30px;} 
  #iconBg .iconWrap {min-height: 300px;}
  .testimonialCarousel .slick-slide-inner-wrapper {padding: 50px;}
  .testPad {padding: 75px 5% 10px 5%; -webkit-clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);}
  .heroHead h1 {font-size: 60px!important;}
  .mainHead h2 {font-size: 40px!important;} 
  .studyHead h4 {font-size: 28px!important;}
  .subHead h3 {font-size: 18px!important;}
  .prodHead h5 {min-height: auto;}
  .prodTxt p {min-height: 75px;}
  #heroSection {padding: 10vw 5% 12vw 5%;}
  .heroTxt p, .paraTxt p, .iconTxt p, .testimonialTxt p, .prodTxt p, .vidTxt p {font-size: 16px!important;}
  
}

@media screen and (min-width: 1200px) {
  #prodContainer .row-fluid {display:flex;}
  #prodContainer .prodWrap {width: 24%!important; margin: .5%!important;display: grid; min-height: auto;}
  .prodHead h5 {min-height: 50px;}
  .prodTxt p {min-height: 130px;}
  .studyBox {margin: 15px 0;}
  .prodTxt_wrap {padding-bottom: 20px;}
  .leftArticle, .rightArticle {padding-top: 50px;} 
  .opalLogo_Hero {max-width: 425px;}
}

@media screen and (min-width: 1400px) {
  .pad-row {padding: 75px 8%;}
  #heroSection {padding: 10vw 8% 12vw 8%;}
  .statsSection {padding-bottom: 70px;}
  #iconBg .iconWrap {width: 20%!important; min-height: auto;}
  #productSection .prodTxt_wrap {width: 12%!important; padding-right: 1%; align-self: center;}
  #prodContainer {width: 88%!important;}
  #prodContainer .prodWrap {margin-left: 1%!important;}
  #productSection .row-fluid {display: flex;}
  .testPad {padding: 95px 8% 25px 8%;}
  .heroHead h1 {font-size: 75px!important;}
  .mainHead h2 {font-size: 50px!important;}
  .studyHead h4 {font-size: 32px!important;}
  .subHead h3 {font-size: 20px!important;}
  .heroTxt p {font-size: 18px!important; }
  .studyTxt p, .paraTxt p, .testimonialTxt, .prodTxt p {font-size: 16px!important;}
  .testimonialLocation {font-size: 15px!important;}
  .testimonialName {font-size: 18px!important;}
  .iconHead h5, .prodHead h5 {font-size: 18px;}
  .iconTxt p {font-size: 16px; line-height: 20px;}
  .prodHeadline h4 {font-size: 40px!important;}
  .prodHead h5 {min-height: auto;}
  .prodTxt p {min-height: auto;}
}