/* FONT IMPORT */
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto:ital,wght@0,700;1,900&display=swap');
  @import url("https://use.typekit.net/iqb4xtq.css");
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Roboto+Condensed&display=swap');

/* -- VARIABLE COLOR SECTION -- */
:root {

   --main-font: 'Roboto Condensed', sans-serif;
  --main-color: #ffca04;
  /*  BACKGROUNDS */
  --form-back: #e2af15;
  --site-bg: #fff;
  --site-bg-two: #fff;


  /*Landing Bars*/
  --top-bar-color: #fff;
  --header-text-color:#fff;
  --secondary-bar-color: #0d2c6b;

  /* First bar button */
  --top-button-color: #0d2c6b;
  --top-button-color-dark: #082050;
  --top-bar-button-text-color:#ffca04;

  /*Second bar button */
  --second-bar-button-color:#ffca04;
  --second-bar-button-color-dark:#ecbb04;
  --second-bar-button--text-color:#0d2c6b;



  /* MAIN BUTTONS */
  --button-color: #fff;
  --button-text-color: #0c2435;


  /*  TEXTS */
  --form-text-color: #000;
  --offers-color: #fff;
  --lines: #d5aa32;

  /* INPUT BOXES */
  --borders: #eee;
  --input-background: #fff;

  /* FOOTER SECTION */


  --privacy-color-form: #0d2c6b;

  --privacy-color: #feffff;
  --footer-background: #231f20;
  --footer-border: #fff;
  --footer-button: #000;
}


.tradein {
  display: inline-block;
}

.no-tradein {
  display: none;
}


/*
--------------------------------------------------------------------------------
*NO WIN SITE*
EVERY SITE WILL BE DEFAULTED TO A WIN SITE
CHANGE DISPLAY TO DISPLAY:NONE TO REMOVE WIN SITE VERBIAGE
CHANGE DISPLAY:NONE TO DISPLAY:INLINE-BLOCK TO SHOW NO WIN SITE INFO
*/

.win {
  display: inline-block;
}

.noWin {
  display: none;
}



/*
--------------------------------------------------------------------------------
*ADD FONT*
COPY THIS SECTION FROM FONT SOURCE (LIKE ADOBE FONTS) 
*/
.mainFont {
font-family: var(--main-font);
font-weight: 500;
font-style: normal;
}







/*
--------------------------------------------------------------------------------
*MAIN STYLES SECTION BEGINS*
88888888888888888888888888888888888888888888888888888888888
88888888888888888888888888888888888888888888888888888888888
8888888888888888888888888P''  ''988888888888888888888888888
8888888888888888P"88888P          988888'988888888888888888
8888888888888888  '9888            888P'  88888888888888888
888888888888888888bo '9  d8o  o8b  P' od8888888888888888888
888888888888888888888bob 88'  '88 dod8888888888888888888888
888888888888888888888888    db    8888888888888888888888888
88888888888888888888888888      888888888888888888888888888
88888888888888888888888P' bo  od' 8888888888888888888888888
88888888888888888888P' od88888888bo '9888888888888888888888
888888888888888888   d88888888888888b   8888888888888888888
8888888888888888888oo8888888888888888oo88888888888888888888
88888888888888888888888888888888888888888888888888888988888

IF YOU NEED TO CHANGE THEME COLORS USE THE VARIABLES AT TOP OF THIS CSS
THIS SECTION BELOW SHOULDN'T NEED TO BE TOUCHED OR CHANGED PER DEMO. 
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
*/


h1, h2, h3, h4, h5, p{
font-family: var(--main-font);
}

.btn{
  font-family: var(--main-font);
  font-weight:100 !important;
  border-radius:10px !important;
}


.bar {
  min-height: 915px;
}
@media (min-width: 1200px) {
  
.bar {
min-height: 100vh;
}
}





.formLabels {
  color: var(--form-text-color);
  font-family: var(--main-font);
  font-size:14px;
font-weight:100;
}
.formLabelsHeader {
  color: var(--header-text-color);
  font-family: var(--main-font);
}

.mainColor {
  color: var(--main-color);
}

.lines {
  border-top: 2px solid var(--main-color);
}

.slider:before {
background-color: var(--main-color);
}

.textBox {
  color: #3d3d3d;
  background-color: var(--input-background);
  border-radius:10px;
}

.colorBorder {
  border: 3px solid var(--lines);
}

.borderColor {
  border: 3px solid var(--lines);
}

.offersColor {
  color: var(--offers-color);
}

.accentColor {
  color: var(--main-color);
}

.accentColorTwo {
  color: var(--main-color);
}

.footerStyle {
  border-top: 8px solid var(--footer-background);
  background-color: var(--footer-background);
}

.privacyColor {
  color: var(--privacy-color);
}
.privacyColor:hover {
  color: var(--privacy-color);
}

.privacyColorForm {
  color: var(--privacy-color-form);
}
.privacyColorForm:hover {
  color: var(--privacy-color-form);
}

.highlight{
  color: var(--main-color);
}
.ez-highlight{
  color: #8a267e;
}
.ez-highlight-two{
  color: #9dc53f;
}


.topbid-highlight{
  color: #1e325a;
}
.footerButtonOne {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.0);
border-radius:10px;
  text-align: center;
  opacity: 1;
  color: var(--footer-button);
  font-size: 13px;
  width: 260px;
  font-weight: 600;
  border: var(--footer-button) solid 0px;
  padding: 5px;
margin-top:5px;
}

.footerButtonTwo {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.0);
border-radius:10px;
  text-align: center;
  opacity: 1;
  color: var(--footer-button);
  font-size: 10px;
  width: 250px;
  font-weight: 900;
  border: var(--footer-button) solid 2px;
  padding: 5px;
margin-top:5px;
}

@media (min-width: 576px) {
.footerButtonTwo {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.0);
border-radius:10px;
  text-align: center;
  opacity: 1;
  color: var(--footer-button);
  font-size: 10px;
  width: 210px;
  font-weight: 900;
  border: var(--footer-button) solid 2px;
  padding: 5px;
margin-top:5px;
}
}
.footerText {
  color: var(--footer-button);
}
.footerText:hover {
  color: var(--footer-button);
}


.emailBGTrade {
  background-color: var(--form-back);
}

.emailBGTest {
  background-color: var(--button-color);
}

.landing-bg {
  background-color: var(--site-bg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  height: 100vh;
  padding-right: 0;
  min-height: 815px;
}

.site-bg-two {
  background-color: var(--site-bg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  height: 100vh;
  padding-right: 0;
  min-height: 815px;
}

.site-bg {
  background: var(--site-bg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  height: 100vh;
  padding-right: 0;
  min-height: 815px;
}

.win-prizes{
border:2px solid var(--button-color); 
color: var(--button-color);
}

.colorBlock {
  background-color: var(--button-color);
  color: var(--button-text-color);
}

.ui-widget-header {
  border: 0px !important;
  background: var(--button-color) !important;
  color: var(--button-text-color) !important;
  font-weight: 300 !important;
  height: 60px !important;
}

.ui-widget-header .ui-state-active {
  background: var(--button-color) !important;
  font-weight: bold;
  color: var(--button-text-color) !important;
}

.ui-widget-header .ui-state-focus {
  background-color: var(--button-color) important;
  font-weight: bold;
  color: var(--button-text-color) !important;
}

#phoneTab {
  display: block;
  height: auto !important;
  position: absolute;
  right: -320px;
  margin-top: 24px;
  z-index: 1010;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: var(--button-color) !important;
}



/*
--------------------------------------------------------------------------------
*NO TOUCHY*
88888888888888888888888888888888888888888888888888888888888
88888888888888888888888888888888888888888888888888888888888
8888888888888888888888888P''  ''988888888888888888888888888
8888888888888888P"88888P          988888'988888888888888888
8888888888888888  '9888            888P'  88888888888888888
888888888888888888bo '9  d8o  o8b  P' od8888888888888888888
888888888888888888888bob 88'  '88 dod8888888888888888888888
888888888888888888888888    db    8888888888888888888888888
88888888888888888888888888      888888888888888888888888888
88888888888888888888888P' bo  od' 8888888888888888888888888
88888888888888888888P' od88888888bo '9888888888888888888888
888888888888888888   d88888888888888b   8888888888888888888
8888888888888888888oo8888888888888888oo88888888888888888888
88888888888888888888888888888888888888888888888888888988888

IF YOU NEED TO CHANGE THEME COLORS USE THE VARIABLES AT TOP OF THIS CSS
THIS SECTION BELOW SHOULDN'T NEED TO BE TOUCHED OR CHANGED PER DEMO. 
--------------------------------------------------------------------------------
*/
.red-line{
  background-color:var(--top-button-color)!important;
  height:6px;
  width:110px;
}

.ez-line{
  background-color: #9dc53f !important;
  height:6px;
  width:110px;
}
.topbid-line{
  background-color: #ea3e3e !important;
  height:6px;
  width:110px;
}

.disclaimer-bg {
  background-color: #fff;
}

@media (min-width: 1200px) {
  .mainLandingAdjust {
    margin-top: 13%;
    width: 100%;
  }
}

@media (min-width: 1300px) {
  .mainLandingAdjust {
    margin-top: 8%;
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .mainLandingAdjust {
    margin-top: 6%;
    width: 100%;
  }
}

@media (min-width: 1500px) {
  .mainLandingAdjust {
    margin-top: 0px;
    width: 80%;
  }
}

@media (min-width: 1600px) {
  .mainLandingAdjust {
    margin-top: 0px;
    width: 83%;
  }
}

.winSize {
  width: 85%;
  height: auto;
  margin-bottom: 10px;
  margin-top: 6.8%;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1575px) {
  .winSize {
    width: 85%;
    height: auto;
    margin-bottom: 10px;
    margin-top: 6.5%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1725px) {
  .winSize {
    width: 85%;
    height: auto;
    margin-bottom: 10px;
    margin-top: 5.5%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1825px) {
  .winSize {
    width: 85%;
    height: auto;
    margin-bottom: 10px;
    margin-top: 4.5%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.check{
height:30px; 
width:30px;
margin-top:10px;
}



.headerFont{
font-size:20px;
font-family: var(--main-font);
font-weight: 800;
font-style: normal;


}
.formFont{
font-size:14px;
font-family: var(--main-font);
font-weight: 400;
font-style: normal;
}
.subHeaderFont{
font-size:15px;
font-family: var(--main-font);
font-weight: 400;
font-style: normal;
}

.smallHeader{
font-size:12px;
font-family: var(--main-font);
font-weight: 400;
font-style: normal;
}
.smallestHeader{
font-size:11px;
font-family: var(--main-font);
font-weight: 400;
font-style: normal;
}

.finalText{
margin-top:0px;
padding-left:5px;
padding-right:5px;
}

@media (min-width: 576px) {
.finalText{
margin-top:13%;
}
.check{
height:50px; 
width:50px;
margin-top:10px;
}


.headerFont{
font-size:26px;
}
.formFont{
font-size:22px;
}

.subHeaderFont{
  font-size:13px;
  }

@media (min-width: 992px) {
  .subHeaderFont{
    font-size:15px;
    }
  }
  
  @media (min-width: 1200px) {
    .subHeaderFont{
      font-size:19px;
      }
  }


.smallHeader{
font-size:19px;
}
.smallestHeader{
font-size:15px;
}
}



.topBar {
  background-color: var(--top-bar-color);
  min-height: 70px;
  display: flex !important;
  align-items: center !important;
}
@media (min-width: 1440px) {
.topBar {
  background-color: var(--top-bar-color);
  min-height: 80px;
}
}
.secondBar {
  display: flex !important;
  align-items: center !important;
  background-color: var(--secondary-bar-color);
  min-height: 60px;
  box-shadow: inset 0 0.4rem 1.2rem rgba(0,0,0,.2) !important;
}

/* Top Bar Buttons */

.topBarButton {
  background-color: var(--top-button-color)!important;
  color: var(--top-bar-button-text-color)!important;
  font-size:10px!important;
  float:right;
  font-weight:900;
  width:90px;
  margin-top:-5px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6);
}

@media (min-width: 768px) {
.topBarButton {
  background-color: var(--top-button-color)!important;
  color: var(--top-bar-button-text-color)!important;
  font-weight: 900 !important;
  font-size:22px !important;
  width:100%;
}
}


@media (min-width: 1200px) {
  .topBarButton {
    background-color: var(--top-button-color)!important;
    color: var(--top-bar-button-text-color)!important;
    font-weight: 900 !important;
    font-size:28px !important;
    width:100%;
  }
  }


  .topBarButton:hover{
    background-color: var(--top-button-color-dark)!important;
    transform: scale(1.02);
  }

.secondBarButton {
  background-color: var(--second-bar-button-color)!important;
  color: var(--second-bar-button--text-color)!important;
  font-weight: 600 !important;
  font-size:10px!important;
  float:right;
  width:90px;
  margin-top:-5px;
}

@media (min-width: 768px) {
.secondBarButton {
    background-color: var(--second-bar-button-color)!important;
    color: var(--second-bar-button--text-color)!important;
    font-weight: 600 !important;
    font-size:15px!important;
    width:100%;
    margin-top:4px;
  }
}

@media (min-width: 1200px) {

  .secondBarButton {
    background-color: var(--second-bar-button-color)!important;
    color: var(--second-bar-button--text-color)!important;
    font-weight: 600 !important;
    font-size:17px!important;
    width:100%;
    margin-top:2px;
  }

}

.secondBarButton:hover{
  background-color: var(--second-bar-button-color-dark)!important;
  transform: scale(1.02);
}


/* Top Bar Buttons Ends */

.topBarImage{
margin-top:5px;
padding-left:5px;
padding-right:5px;
}
@media (min-width: 576px) {
.topBarImage{
margin-top:20px;
}
}
@media (min-width: 992px) {
.topBarImage{
margin-top:15px;
}
}

@media (min-width: 1200px) {
.topBarImage{
margin-top:-5px;
}
}

a {
  color: #fff;
}

a:hover {
  text-transform: none;
  text-decoration: none;
  color:#eaa524;
}


.facebookShare {
  display: none;
}

.random {
  color: var(--button-text-color);
}

.mainFont {
 font-family: var(--main-font);
font-weight: 900;
}




      body{
           overflow-x: hidden;

        }
@media (max-width: 499px) {
      html{
            overflow-x: hidden;
        }
}




/*--------------------------Animations-------------------------------------*/

.navbar{
  display:block !important;
  margin-bottom: 0px !important;
  
 }
@media (min-width: 768px) {
  .navbar{
   display:none !important;
   margin-bottom: 0px !important;
  }
}







@media (min-width: 768px) {
  .btn-link{
    font-size:9px !important;
    font-family: var(--main-font);
    color: #777 !important;
    font-style: normal;
    }
  }
  @media (min-width: 992px) {

    .btn-link{
      font-size:12px !important;
      font-family: Roboto, Helvetica Neue, sans-serif;
       color: #777 !important;
      font-style: normal;
      }


  }  
  @media (min-width: 1200px) {
  
    .btn-link{
      font-size:13px !important;
      font-family: var(--main-font);
       color: #777 !important;
      font-style: normal;
      }
  
  }
  @media (min-width: 1440px) {
  
    .btn-link{
      font-size:15px !important;
      font-family: var(--main-font);
       color: #777 !important;
      font-style: normal;
      width: auto;
      }
  
  }
  .btn-link:hover{
    font-size:15px;
    font-family: var(--main-font);
    text-decoration: none !important;
    background-color: var(--top-button-color)!important;
    color: #fff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,.6);
    font-style: normal;
    transform: scale(1.04);
    }

    .btn {
      white-space: normal; /* Allow text to wrap */
    }

    .btn:focus {
      outline: none !important; 
      box-shadow: none !important;
  }

  .container-fluid {
    padding-left: 25px !important;
    padding-right: 25px !important;
}


@media (min-width: 1200px) {
  .container-fluid {
      padding-left: 105px !important;
      padding-right: 105px !important;
  }
}

@media (min-width: 1440px) {
    .container-fluid {
        padding-left: 125px !important;
        padding-right: 125px !important;
    }
}

/* Three panel section */

.panel-default{
  border: 0px solid transparent !important;
}

.three-panel-section{
    display: flex;
    align-items: center;
  background-color: #353435;
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.2) !important;
  min-height: 100px;
}


.panel-selection-area{
  background-color: #231f20;
}

 .panel-footer-section {
padding: 10px 15px;
background-color: #353435 !important;
border-top: 0px solid #ddd !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 3px !important;
text-align: center;
}

.subPanelFont{
  font-size:11px;
  }

  @media (min-width: 768px) {
    .subPanelFont{
      font-size:14px;
      }
  }
@media (min-width: 992px) {
  .subPanelFont{
    font-size:16px;
    }
  }
  
  @media (min-width: 1200px) {
    .subPanelFont{
      font-size:19px;
      }
  }
/* Three panel section end */

/* Buttons */
a:hover {
  text-decoration: none !important;
}
.main-button{
  background-color: var(--top-button-color)!important;
  color: var(--top-bar-button-text-color)!important;
  font-weight:400 !important;
  border: 2px solid var(--top-button-color)!important;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6);

}
.main-button:hover {
  background-color: var(--top-button-color-dark)!important;
  border: 2px solid var(--top-button-color-dark)!important;
}
.main-button-ez{
  background-color: #8b287f !important;
  color: #FFF !important;
  font-weight:400 !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6);
}
.main-button-topbid{
  background-color: #1e325a !important;
  color: #FFF !important;
  font-weight:400 !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6);
}
.panel-header{
  text-transform: uppercase !important;
  font-weight:900;
  font-size:12px;
}
.panel-info{
  text-transform: uppercase !important;
  font-size:10px;
}
@media (min-width: 992px) {
.panel-header{
  text-transform: uppercase !important;
  font-weight:900;
  font-size:19px;
}
.panel-info{
  text-transform: uppercase !important;
  font-size:13px;
  color:#777;
}
}

.form-control{
  font-size: 1.4rem !important;
}

.testDriveBG{
  background-color: var(--main-color);
}

/* Final Page Text Sizes */


.finalFont{
  font-size:17px;
  }

@media (min-width: 992px) {
  .finalFont{
    font-size:19px;
    }
  }
  
  @media (min-width: 1200px) {
    .finalFont{
      font-size:21px;
      }
  }

  @media (min-width: 1440px) {

    .finalFont{
      font-size:23px;
      }

  }


  .main-button-dark{
    background-color: #231f20 !important;
    color:#FFF !important;
    font-size: 17px !important;
    font-weight:400 !important;
    margin-top:10px;
    margin-bottom:10px;
    }
  @media (min-width: 768px) { 
    .main-button-dark{
    background-color: #231f20 !important;
    color:#FFF !important;
    font-size: 17px !important;
    font-weight:400 !important;
    text-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.7) !important;
    }
  }

    .main-button-dark:hover{
    background-color:#131111 !important;
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.2) !important;
    transform: scale(1.02);
    }


        /* Define the animation */
        @keyframes throb {
          0% { transform: scale(1); }
          50% { transform: scale(1.1); }
          100% { transform: scale(1); }
          }

      /* Apply the animation to the element */
      .throb-animation {
          animation: throb 5s infinite;
          /* You can adjust the animation duration and iteration as needed */
       }



  .topBar,
       .secondBar {
         display: none !important;
       }
     
     

     /* Styles for screens above 768px */
     @media (min-width: 768px) {
     
      .topBar,
      .secondBar {
        display:flex !important;
      }
    }


    /* Modal Content */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
      z-index: 1;
    }
    .modal-content {

      width: 95%;

    }
    .main-button{
      font-size:10px !important;
      
    }
.main-button:hover{
  
  transform: scale(1.02);

}
    .main-button-ez{
      font-size:10px !important;
    }
    .main-button-topbid{
      font-size:10px !important;
    }



    @media (min-width: 768px) {

      .main-button{
        font-size:17px !important;
      }

      .main-button-ez{
        font-size:17px !important;
      }
      .main-button-topbid{
        font-size:17px !important;
      }

    .modal-content {
      background-color: rgba(255, 255, 255, 0.95) !important;
      margin: 5% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 50% !important;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    }
    /* Close Button */
    .close {
      color: var(--main-color);
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #aaa;
      text-decoration: none;
      cursor: pointer;
    }

    .bg-dark{
      box-shadow: inset 0 0.4rem 1.2rem rgba(0,0,0,.2) !important;
    }

/* Mobile modal fix: scrollable overlay so tall forms (offer-claim) aren't cut off on small screens */
.modal { width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .modal-content { margin: 20px auto 40px; }
}