﻿html{
    font-family: 'Montserrat', sans-serif !important;
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
    font-family: 'Montserrat', sans-serif !important;
}
sup{
    font-size: 55%;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
.merriweather{
    font-family: 'Merriweather', serif;
}
    
.roboto{
    font-family: Roboto, sans-serif !important;
}
.robotoBold{
    font-family:Roboto;
    font-weight:bolder;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.Title-LinesOnSides {
    position: relative;    
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
.Title-LinesOnSides:before, .Title-LinesOnSides:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: #AEB3B8;
}
.Title-LinesOnSides:before {
    margin-left: -52%;
    text-align: right;
}

.Title-LinesOnSides:after {
    margin-left: 3%;    
}
.footer-seperator{
    margin-left:1.2em;
    margin-right:1.2em;
}
/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

.parallax {
    margin-left: -15px;
    margin-right: -15px;
    z-index:-1;
    /* The image used */
    background-image: url('/Content/Images/ddna_hp_showrm_bkg_comp.jpg');
    /* Set a specific height */        
    min-height: 100px;
    width:100%;
    height:100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position:absolute;
}

.rotate {
    -webkit-animation: rotation 2s infinite linear;
            animation: rotation 2s infinite linear;
            animation-iteration-count: 3;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

@keyframes rotation {
    from {-ms-transform: rotate(0deg);}
    to   {-ms-transform: rotate(359deg);}

    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rotate-reverse {
    -webkit-animation: rotation-reverse 2s infinite linear;
            animation: rotation-reverse 2s infinite linear;
            animation-iteration-count: 3;
}

@-webkit-keyframes rotation-reverse {
    from {-webkit-transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);}
}

@keyframes rotation-reverse {
    from {-ms-transform: rotate(359deg);}
    to   {-ms-transform: rotate(0deg);}

    from {transform: rotate(359deg);}
    to   {transform: rotate(0deg);}
}

.learnMoreBlueButton{
    opacity:.7;
}
.learnMoreBlueButton:hover{
    opacity:1;
}

.circleIndicators{
    height: 24px !important;
    width: 24px !important;
    border-radius: 12px !important;
}

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid #cccccc;
}
.descPanel{
    background-color: rgb(238, 238, 238);
    padding: .5rem;
    padding-left:0px;
    font-size:90%;
}
.descPanel:before{
    position: relative;
  top: -5px;
  left: 0;
  display: block;
  width: 40%;
  height: 1px;
  content: "";
  background-color: #9c9c9c;
}
.bBotDashedLine{
    border-bottom:1px dashed #b6babf;
    width:90%;
    margin-left:5%;
}
.packageDescPanel{
    /*border-bottom:1px dashed #b6babf;*/
    /*border-left:1px dashed #b6babf;
    border-right:1px dashed #b6babf;*/
}
.packageDescText{
    font-style:italic;
        font-weight:normal;
}
.noBorder{
    border:0px !important;
}

.itemTitle{
        font-size:1.07rem;
        text-decoration:none;
        font-weight:500;
        font-style:italic;
    }
.itemTitle > a{
    color:#333!important;
}
.itemTitle > a:hover{
    color:#018bcb!important;
    text-decoration:none !important;
}
.itemTitle.is-active > a{
    color:#018bcb !important;
    font-weight:bold;
}
.itemTitle.is-active > a:after{
    text-decoration:none;    
    display: inline-block !important;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
  float: right;
}

.carousel-indicators li {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  background-color: #a4a4a6;
}

.carousel-indicators li::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.carousel-indicators li::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
}

.headerFixed {
    position:fixed;
    top:0px;
    width:100%;
    z-index:100;
}
.videoHeader {
  position: relative;
  background-color: black;
  height: auto;
  min-height: 12rem;
  width: 100%;
  overflow: hidden;
}

.videoHeader video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.videoHeader .container {
  position: relative;
  z-index: 2;
}

.videoHeader .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/*@media (pointer: coarse) and (hover: none) {
  .videoHeader {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  .videoHeader video {
    display: none;
  }
}*/

#percentDIV { 
background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 no-repeat; min-height: 200px;  
}
 
#percentDIV { 
  background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 repeat fixed; min-height: 200px;
  height: 200px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 100%; 
  position: relative; 
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#percentDIV article { 
  height: 200px; 
  position: absolute; 
  text-align: center; 
  top: 0px; 
  width: 100%; 
  color:white;
  align-content:center;
}

.signUpHeaderDIV{
    padding-top: 33vw;
}
.signUpTextDIV{
    position: absolute;
    top: 70%;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
}

#nadaDIV { 
background: url('/Content/Images/nada-fca-repeat-bg-comp.jpg') 50% 0 no-repeat; min-height: 140px;  
} 
#nadaDIV { 
  background: url('/Content/Images/nada-fca-repeat-bg-comp.jpg') 50% 0 repeat fixed; min-height: 140px; 
  height: 140px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 100%; 
  position: relative; 
  /*-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);*/
}
 
#nadaDIV article { 
  height: 140px; 
  position: absolute; 
  text-align: center; 
  top: 0px; 
  width: 100%; 
  color:white;
  align-content:center;
}

#bmw-header-image{
    padding-top: 27vw; background-size:cover; background-repeat: no-repeat; background-image:url(/Content/Images/loaner-header.jpg);
}

.vertCenterBuffer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.carousel-indicators .active {
  background-color: #585859;
}

.mainTitle{
    font-size:3.1rem;
    line-height:3.1rem;
}
.mainText{
    font-size:1.3rem;
}
.signUpNowHPButton{
    background-color:#c8312f;
    font-size:1rem;
    padding:.4rem 1rem;
    margin-top: 0.5rem !important;
    font-weight: 700 !important;
}
.nav-link{
    font-size: 1.2vw;
}
.whyDealerDNAslider{
    /*position: relative; top: 30%; left: 60%; width: 40%; height:60%; vertical-align:text-top;*/
    top: 20%; height:60%;
}
.bottomNav{
    background-color:rgba(0,0,0,0.37);
}
.topNav{
    background-color:rgba(4,24,39,0.851);
}
.totalNavDiv{
    position: fixed;
    z-index:5;
    padding: 0px 0px 20px 0px;
}
.removePadTop{
    padding-top:0px !important;
}

.growingUnderline:after {
  content: "";
  position: absolute;
  width: 88%;
  height: 2px;
  bottom: 0;
  left: 6%;
  background: #5ab3de;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .1s linear;
}
.growingUnderline:hover:after,
.growingUnderline:focus:after {
  visibility: visible;
  transform: scaleX(1);
}

@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 4px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 4px;
     }
  55% {height: 4px;}
  100% {
      transform: scaleX(1.05);
      height: 3rem;
     }
}

@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

.absoluteToMobile{
    position: absolute;
    top:0;
}

.fcaEnrollHeaderImg{
    padding-top: 27vw;
    background-size:cover;
    background-repeat: no-repeat;
    background-image:url('/Content/images/fca-header-bg-clean.jpg');    
}
.fcaEnrollHeaderLogo{
    position: relative;
    top: -30%;
}
.whyDealerDNAbg{
        padding-top: 73%;
        background-size: cover;
        background-repeat: no-repeat;
        background-image:url('/Content/images/WHY DDNA Bkg.jpg');
    }

.screenWidth{
    width:85%;
}

    .cogLarge{
        position:absolute;
        top:9%;
        left:8%;
        width:12%;
    }

    .cogSmall{
        position:absolute;
        top:6%;
        left:20%;
        width:8%;
    }

.hpLarge-outsideDiv{
    /*padding-top: 56.4vw;*/
    /*padding-top:41.24vw;*/    
     padding-top: 32.65vw;    
    background-position-y: bottom;
    background-position-x: right;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-image:url('/Content/images/DDNA-HP-BKGHOMEPAGE.jpg');*/
    /*background-image:url('/Content/images/dealerdna-thin-header-image.png');*/
    background-image:url('/Content/images/dealerdna-thin-header-comp.jpg');
}
.hpLarge-absoluteDiv{
    position: absolute;
    top: 52%;
    left: 0;
    width: 100%;
}
.hpSmall-outsideDiv{
    padding-top: 101.7vw;
    background-size:contain;
    background-repeat: no-repeat;
    background-image:url(/Content/Images/ddna_homepage_mobile_comp.jpg);
}
.hpSmall-absoluteDiv{
    position: absolute; top: 70%; left: 3.5%; width: 100%;
}
.nHP-Title{
    font-family: 'Montserrat', sans-serif !important; font-weight: 500;
}
.nHP-Text{
    font-family: Roboto, sans-serif !important;
    line-height:1.4;
    font-weight:200;
}
.signUpNowButton{
    background-color:#c8312f;
    font-size:1.2rem;
    font-weight:bold;
    padding:3px;        
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    margin-top:3px;    
}
.odomNumbers{
    font-size: 4rem; font-family: 'Montserrat', sans-serif !important; font-weight:800 !important;
}
.underlineOnHover:hover{
    text-decoration:underline !important;
}
.packageMainText{
    font-size: 1.75rem;
}
.compareTitle{
    font-size:1.1vw;
}
.compareTitlePrice{
        font-size:1.1vw;
    }
    .price{
        font-size:3rem;
        margin-bottom:0rem;
        color:#333;
    }
    .priceText{
        font-size:1.1rem;
    }

    .enrollPrice{
        font-size:2.8rem;
        margin-bottom:0rem;
        color:#333;
    }
    .enrollPriceText{
        font-size:1.1rem;
    }
    .sfCol{
        font-family:Roboto;
        color:#333;
        /*background-color:#f2f2f2;*/
        padding:0.7rem !important;
        text-align:center;
        /*border-bottom:1px dashed #AEB3B8;*/
        vertical-align: middle;
    }
    .tCol{
        font-family:Roboto;
        color:#333;
        background-color:#fff;
        padding:0.7rem !important;
        text-align:center;
        /*border-bottom:1px dashed #AEB3B8;*/
        /*top:-.5rem;*/
        /*border-left:1px solid #333;
        border-right:1px solid #333;*/
        vertical-align: middle;
        /*-webkit-box-shadow: 0px 10px 25px 0px rgba(145,145,145,0.7);
        -moz-box-shadow: 0px 10px 25px 0px rgba(145,145,145,0.7);
        box-shadow: 0px 10px 25px 0px rgba(145,145,145,0.7);*/
    }
    .fCol{
        font-family:Roboto;
        color:#333;
        /*background-color:#eeeeee;*/
        padding:0.5rem 0.2rem 0.5rem 0.6rem !important;
        /*border-right:1px solid #c1c1c1;
        border-bottom:1px solid #c1c1c1;*/
        /*border-bottom:1px dashed #AEB3B8;*/
        cursor:pointer;
    }
    .textItem{
        font-family: Roboto;
        font-size: 15px;
        margin-bottom: 0px;
        font-weight: 500;
        margin-top:4px;
        color:#3371BB !important;
        font-style:italic;
        /*text-decoration:underline;*/
    }
    .textItem:hover{
        text-decoration:underline;
    }

    .tColPricing{
        color:#fff;
        background-color:#4db1e2;
        padding:1rem !important;
        text-align:center;
        top:-.5rem;
        /*border-left:1px solid #333;
        border-right:1px solid #333;*/

        /*-webkit-box-shadow: 0 9px 0px 0px #4db1e2, 0 -9px 0px 0px white, 10px 2px 15px -5px rgb(50, 113, 144), -10px 2px 15px -5px rgb(50, 113, 144);
        -moz-box-shadow: 0 9px 0px 0px #4db1e2, 0 -9px 0px 0px white, 10px 2px 15px -5px rgb(50, 113, 144), -10px 2px 15px -5px rgb(50, 113, 144);
        box-shadow: 0 9px 0px 0px #4db1e2, 0 -9px 0px 0px white, 10px 2px 15px -5px rgb(50, 113, 144), -10px 2px 15px -5px rgb(50, 113, 144);*/
    }
    .fmFree{
        font-size:1.2rem;
    }
    .sfColTitle{
        color:#fff;
        background-color:#4db1e2;
        padding:1.5rem !important;
        text-align:center;
    }
      .tColTitle{
        color:#fff;
        background-color:#008fd5;
        padding:1.5rem !important;
        text-align:center;
        top:-.5rem;
        z-index:2;
        border-left:1px solid #333;
        border-right:1px solid #333;
        border-top:1px solid #333;

        /*-webkit-box-shadow: 0 15px 0px 0px #4db1e2, 0 -10px 0px 0px white, 10px 10px 10px -5px rgb(50, 113, 144), -10px 10px 10px -5px rgb(50, 113, 144);
        -moz-box-shadow: 0 15px 0px 0px #4db1e2, 0 -10px 0px 0px white, 10px 10px 10px -5px rgb(50, 113, 144), -10px 10px 10px -5px rgb(50, 113, 144);
        box-shadow: 0 15px 0px 0px #4db1e2, 0 -10px 0px 0px white, 10px 10px 10px -5px rgb(50, 113, 144), -10px 10px 10px -5px rgb(50, 113, 144);*/
    }
    .fColTitle{
        padding:1.5rem !important;
    }

    .enrollButton{
        font-weight: 700 !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;        
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
        background-color:#c8312f; 
        border-color:#c8312f;
        font-size:1.4rem;
         /*p-2 pl-lg-5 pl-4 pr-lg-5 pr-4 mt-2 mb-2 font-weight-bold*/
    }
    .enrollButton:hover{
        background-color:#9e1f1e;
        border-color:#9e1f1e;
    }
    .enrollButtonLITE:hover{
        background-color:#45a2dd !important; 
        border-color:#45a2dd !important;
   }
    .enrollButtonprofessional:hover{
        background-color:#45a2dd !important; 
        border-color:#45a2dd !important;
   }
    .enrollButtonStandard:hover{
        background-color:#2eb04a !important; 
        border-color:#2eb04a !important;
    }
    .packagesPanelDIV{
        border-bottom:1px dashed #b6babf;
    }


@media (min-width: 992px) and (max-width:1300px) {
    .whyDealerDNAslider{
        top: 15%; height:70%;
    }
    .synergieTitle{
        font-size:1.7rem;
    }
    .fcaEnrollHeaderLogo{
        position: relative;
        top: -30%;
    }
    
.mainTitle{
    font-size:2.1rem;
    line-height:2rem;
}
.mainText{
    font-size:1.1rem;
}

.signUpNowHPButton{
    background-color:#c8312f;
    font-size:1rem;
    padding:.8rem;
    margin-top: 0.5rem !important;
    font-weight: 700 !important;
}
    .textItem{
            font-family: Roboto;
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 500;
    color:#3371BB !important;
    }
    .sfColTitle > h3{
        font-size:1.2rem;
    }
    .sfColTitle{
        padding:1.2rem !important;
    }
    .tColTitle > h3{
        font-size:1.2rem;
    }
    .tColTitle{
        padding:1.2rem !important;
    }
    .fmFree{
        font-size:1rem;
    }
    .itemTitle{
        font-size:1.07rem;
        padding:0rem;
        text-decoration:none;
    }
    .compareTitle{
        font-size:1.4vw;
    }
    .compareTitlePrice{
        font-size:1.4vw;
    }
}

@media (min-width: 768px) and (max-width:992px){
    .whyDealerDNAslider{
        top: 5%; height:95%
    }
      .fcaEnrollHeaderLogo{
        position: relative;
        top: -30%;
        left:25%;
        max-width:50%;
    }
      .hpLarge-outsideDiv{ 
     padding-top: 45vw;
}
.hpLarge-absoluteDiv{
    position: absolute;
    top: 46%;
    left: 0;
    width: 100%;
}
    .synergieTitle{
        font-size:1.5rem;
    }
     .mainTitle{
    font-size:1.7rem;
    line-height:1.7rem;
    }
     .mainText{
        font-size:1rem;
    }
.signUpNowHPButton{
    background-color:#c8312f;
    font-size: 1rem;
    padding:.6rem;
    margin-top: 0.3rem !important;
    margin-bottom: 0.3rem !important;
    font-weight: 700 !important;
}
    .price{
        font-size:2.2rem;
        margin-bottom:0rem;
        color:#333;
    }
    .priceText{
        font-size:.7rem;
    }
    .enrollPrice{
        font-size:2.2rem;
        margin-bottom:0rem;
        color:#333;
    }
    .enrollPriceText{
        font-size:.7rem;
    }
    .textItem{
            font-family: Roboto;
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 500;
    color:#3371BB !important;
    }
    .sfColTitle > h3{
        font-size:1rem;
    }
    .sfColTitle{
        padding:1rem !important;
    }
    .tColTitle > h3{
        font-size:1rem;
    }
    .tColTitle{
        padding:1rem !important;
    }
    .compareTitle{
        font-size:1.7vw;
    }
    .compareTitlePrice{
        font-size:1.7vw;
    }
    #bmw-header-image{
        padding-top: 27vw;
        background-size:cover;
        background-repeat: no-repeat;
        background-image:url(/Content/Images/loaner-header.jpg);
    }
}

@media (min-width:640px) and (max-width: 768px) {
       .bottomNav{
    background-color:rgba(0,0,0,0.839);
}
       .synergieTitle{
        font-size:1.4rem;
    }
         .fcaEnrollHeaderLogo{
        position: relative;
        top: -30%;
        left:25%;
        max-width:50%;
    }
     .whyDealerDNAslider{
        top: 5%; height:95%;
    }
     .mainTitle{
    font-size:2.8rem;
    line-height:2.8rem;
    }
     .mainText{
        font-size:1.2rem;
    }
.signUpNowHPButton{
    background-color:#c8312f;
    font-size:1rem;
    padding:.7rem;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    font-weight: 700 !important;
}
      .itemTitle{
        text-decoration:none;
    }
     #percentDIV { 
    background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 no-repeat; min-height: 660px;  
}
 
    #bmw-header-image{
        padding-top: 27vw;
        background-size:cover;
        background-repeat: no-repeat;
        background-image:url(/Content/Images/loaner-header.jpg);
    }
    .compareTitle{
        font-size:2vw;
    }
    .compareTitlePrice{
        font-size:2vw;
    }
    #percentDIV { 
      background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 repeat fixed; min-height: 660px; 
      height: 660px; 
      margin: 0 auto; 
      width: 100%; 
      max-width: 100%; 
      position: relative; 
      -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
      box-shadow: 0 0 50px rgba(0,0,0,0.8);
    }
 
    #percentDIV article { 
      height: 660px; 
      position: absolute; 
      text-align: center; 
      top: 50px; 
      width: 100%; 
      color:white;
      align-content:center;
    }

   
    .hpSmall-outsideDiv{
    padding-top: 99vw;
    background-size:contain;
    background-repeat: no-repeat;
    background-image:url(/Content/Images/ddna_homepage_mobile_comp.jpg);
}
    
    .price{
        font-size:2rem;
        margin-bottom:0rem;
        color:#333;
    }
    .priceText{
        font-size:.7rem;
    }
    .enrollPrice{
        font-size:2rem;
        margin-bottom:0rem;
        color:#333;
    }
    .enrollPriceText{
        font-size:.7rem;
    }
    .textItem{
            font-family: Roboto;
    font-size: 15px;
    margin-bottom: 0px;
    font-weight: 500;
    
    }
    .sfColTitle > h3{
        font-size:.9rem;
    }
    .sfColTitle{
        padding:.9rem !important;
    }
    .tColTitle > h3{
        font-size:.9rem;
    }
    .tColTitle{
        padding:1rem !important;
    }
      .packageMainText{
    font-size: 1rem;
}
}

@media (min-width:0px) and (max-width: 640px) {

    
    #bmw-header-image{
       padding-top: 53vw;
        background-size: 175%;
        background-repeat: no-repeat;
        background-position-x: right;
        background-image:url(/Content/Images/loaner-header.jpg);
    }
    .absoluteToMobile{
    position: relative;
}
    .packageMainText{
    font-size: 16px;
}
    .compareTitle{
        font-size:4vw;
    }
    .compareTitlePrice{
        font-size:3.5vw;
    }
    .fcaEnrollHeaderImg{
    padding-top: 45vw;
    background-size:cover;
    background-repeat: no-repeat;
    /*background-image:url('/Content/images/fca-enroll-header-mobile.jpg');*/    
}
      .fcaEnrollHeaderLogo{
        position: relative;
        top: -30%;
        left:15%;
        max-width:70%;
    }
    .whyDealerDNAbg{
        padding-top: 10%;
        background-size: cover;
        min-height: 1200px;
        background-image:url('/Content/images/WHY DDNA Bkg.jpg');
    }
    .synergieTitle{
        font-size:1.2rem;
    }
    .bottomNav{
    background-color:rgba(0,0,0,0.839);
    padding: 0.5rem 1rem !important;
}
    .whyDealerDNAslider{
        position: relative !important;
        top: 0%;
        left: 2%;
        width: 96%;
        height:90%;
        vertical-align:text-top;
        min-height:600px;
    }
    .whyDealerDNAtitle{
        font-size:1.5rem;
    }
    .whyDealerDNAsmall{
        font-size:1.3rem;
    }
    .mainTitle{
    font-size:2.2rem;
    line-height:2.2rem;
    }
    .mainText{
        font-size:1.2rem;
    }
    
.signUpNowHPButton{
    background-color:#c8312f;
    font-size:1rem;
    padding:.7rem;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    font-weight: 700 !important;
}
    .nav-link{
        font-size: 4vw;
        font-weight: bold;        
    }

    .hpSmall-outsideDiv{
    padding-top: 98.4vw;
    background-size:contain;
    background-repeat: no-repeat;
    background-image:url(/Content/Images/ddna_homepage_mobile_comp.jpg);
}

     #percentDIV { 
        background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 no-repeat; min-height: 710px;  
    }
 
    #percentDIV { 
      background: url('/Content/Images/ddna_numbrs_bkg_comp.jpg') 50% 0 repeat fixed; min-height: 710px; 
      height: 710px; 
      margin: 0 auto; 
      width: 100%; 
      max-width: 100%; 
      position: relative; 
      -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
      box-shadow: 0 0 50px rgba(0,0,0,0.8);
    }
 
    #percentDIV article { 
      height: 710px; 
      position: absolute; 
      text-align: center; 
      top: 50px; 
      width: 100%; 
      color:white;
      align-content:center;
    }

    #nadaDIV { 
        background: url('/Content/Images/nada-fca-repeat-bg-comp.jpg') 50% 0 no-repeat; min-height: 100px;  
    }
 
    #nadaDIV { 
      background: url('/Content/Images/nada-fca-repeat-bg-comp.jpg') 50% 0 repeat fixed; min-height: 100px; 
      height: 100px; 
      margin: 0 auto; 
      width: 100%; 
      max-width: 100%; 
      position: relative; 
    }
 
    #nadaDIV article { 
      height: 100px; 
      position: absolute; 
      text-align: center; 
      top: 0px; 
      width: 100%; 
      color:white;
      align-content:center;
    }

    .signUpTextDIV{
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
}
    
    .signUpHeaderDIV{
        padding-top: 60vw;
    }

    .removePadTop{
        padding-top:0px !important;
    }
    .hpLarge-outsideDiv{
        display:none;
    }
    
    .price{
        font-size:1.5rem;
        margin-bottom:0rem;
        color:#333;
    }
    .priceText{
        font-size:.8rem;
    }

    .enrollPrice{
        font-size:2.8rem;
        margin-bottom:0rem;
        color:#333;
    }
    .enrollPriceText{
        font-size:.8rem;
    }

    .textItem{
            font-family: Roboto;
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 500;
    min-height:42px;
    
    }
    .fCol{
        padding-top: .1rem !important;
    padding-bottom: .1rem !important;
    padding-right: .2rem !important;
    }
    .sfCol{
        padding:.1rem !important;
    }
    .tCol{
        padding:.1rem !important;
    }
    .fColTitle > h3{
        font-size:1.1rem;
    }
    .sfColTitle > h3{
        font-size:.6rem;
    }
    .sfColTitle{
        padding:.8rem .1rem !important;
    }
    .tColTitle > h3{
        font-size:.6rem;
    }
    .tColTitle{
        padding:.8rem .1rem !important;
    }
    .tColPricing{
        padding:.1rem !important;
    }
    .waivedText{
        font-size:.8rem;
    }

    .enrollButton{
        font-weight: 700 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;        
        margin-bottom: 0.4rem !important;
        margin-top: 0.4rem !important;       
        background-color:#c8312f; 
        font-size:1.6rem;  
        border-color:#c8312f;
    }
}