@import url(footer.css);

/*---------------------------------------------------------------------------
  GLOBAL SETTINGS
---------------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   /*  -webkit-user-select: none;                  prevent copy paste, to allow, change 'none' to 'text' */

  font-family: 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica,  Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  background-color: transparent;
}

a {
  outline: none;
  color: #f7941e;
  text-decoration: underline;
  -webkit-font-smoothing: subpixel-antialiased;
}

a.sectionAnchor {
  top: -100px;
  position: absolute;
}

a#home.sectionAnchor {
  top: 0;
  position: absolute;
  display: none;
}

h2 {
  font-size: 4.6em;
  font-size: 2.2vw;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
  position: relative;
  color: #00aeef;
}

h3 {
  font-size: 3.6em;
  font-size: 1.5vw;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin: .6em 0 0 0;
  padding: 0;
  position: relative;
  color: #00aeef;
}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

small {
	font-size: 1.3em;
}

strong {
	  font-family: 'AvenirLTStd-Medium', 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica,  Arial, sans-serif;
	  font-weight: 400;
}

.btn {
  font-family: 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 2.8em;
  font-size: 1.4vw;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: normal;
  color: #f7941e;
  border: 2px solid #f7941e;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  float: left;
  margin-right: 32px;
  text-decoration: none;
  text-align: center;
  padding: 2.1% 7% 2.2%;
  margin-top: 16px;
  display: block;
}

.btn:hover {
  color: #ffffff;
  border: 2px solid #ffffff;
}

.slide-text .btn {`
    border: 2px solid #ffffff;
    color: #fff;
    letter-spacing: 0.2em;
    padding: 1.5% 4.5%;
    text-transform: uppercase;
}

.wrapper {``
    margin: 0 auto;
    max-width: 86%;
    padding: 0 7% 1.5%;
    position: relative;
}

.mbl {
  display: none;
}

/*---------------------------------------------------------------------------
  LOGO BAR
---------------------------------------------------------------------------*/

#topBarContainer {
  position: fixed;
  top: 0;
  left: 0;
  height: 75px;
  width: 100%;
  z-index: 10000;
  background-color: #224099;
  border-bottom: 1px solid #658fa8;
}



#pandoraLogo {
  background-image: url(https://pandora.com/static/programs/everywhere/_img/pandoraLogo2.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  margin-left: 3%;
  position: absolute;
  width: 18%;
  z-index: 3000;
}

#topBarBtns {
  position: fixed;
  right: 4%;
  top: 25px;
  z-index: 1000;
}

#topBarBtns a {

	color: #00aeef;
    font-size: 19px;
    text-decoration: none;


}

#topBarBtns .btn {
  color: #00adef;
  border: 2px solid #00adef;
  display: inline-block;
  width: auto;
  font-size: 1.65em;
  padding: 12px 0px 13px;
  margin: 0 0 0 15px;
  min-width: 116px;
}

#topBarBtns .btn:hover {
  color: #ffffff;
  border: 2px solid #ffffff;
}

/*---------------------------------------------------------------------------
  NAV BAR
---------------------------------------------------------------------------*/
#mbl_menuIcon {
  display: none;
}

#navBarContainer::before, #navBarContainer::after {
  content:"";
  height: 1px;
  background-image: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(169,223,248,1)), to(rgba(0,166,231,1)), color-stop(0.45, rgba(148,216,246,1)), color-stop(0.55, rgba(148,216,246,1)));
  background-image: -webkit-linear-gradient(rgba(169,223,248,1) 0%, rgba(148,216,246,1) 45%, rgba(148,216,246,1) 55%, rgba(0,166,231,1) 100%);
  background-image:
    -moz-linear-gradient(rgba(148,216,246,1) 0%, rgba(0,166,231,1) 45%, rgba(0,166,231,1) 55%, rgba(169,223,248,1) 100%);
  background-image:
    -o-linear-gradient(rgba(148,216,246,1) 0%, rgba(0,166,231,1) 45%, rgba(0,166,231,1) 55%, rgba(169,223,248,1) 100%);
  background-image:
    linear-gradient(to right, rgba(148,216,246,1) 0%, rgba(0,166,231,1) 45%, rgba(0,166,231,1) 55%, rgba(169,223,248,1) 100%);
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  background-position: 0 0, 100% 100%;
  background-repeat:no-repeat;
  display: block;
}

#navBarContainer {
  font-family: 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', Helvetica, Arial, sans-serif;
  font-weight: 100;
  height: 64px;
  width: 100%;
 position: fixed; top: 75px; bottom: 1px;
  z-index: 2000;
  opacity: 1;
  font-weight: 100;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  -ms-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYzBmMyIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjE1JSIgc3RvcC1jb2xvcj0iIzAwYzBmMyIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDY3YzYiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  rgba(0,192,243,0.85) 0%, rgba(0,192,243,0.85) 15%, rgba(0,103,198,0.85) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,192,243,0.85)), color-stop(15%,rgba(0,192,243,0.85)), color-stop(100%,rgba(0,103,198,0.85)));
  background: -webkit-linear-gradient(left,  rgba(0,192,243,0.85) 0%,rgba(0,192,243,0.85) 15%,rgba(0,103,198,0.85) 100%);
  background: -o-linear-gradient(left,  rgba(0,192,243,0.85) 0%,rgba(0,192,243,0.85) 15%,rgba(0,103,198,0.85) 100%);
  background: -ms-linear-gradient(left,  rgba(0,192,243,0.85) 0%,rgba(0,192,243,0.85) 15%,rgba(0,103,198,0.85) 100%);
  background: linear-gradient(to right,  rgba(0,192,243,0.85) 0%,rgba(0,192,243,0.85) 15%,rgba(0,103,198,0.85) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a600c0f3', endColorstr='#a60067c6',GradientType=1 );
}

#navBarContainer .wrapper {
  max-width: 98%;
  padding: 0 1%;
}

#navContainer {
  z-index: 2000;
}

#topNav {
  list-style: none;
  height: 62px;
  min-width: 1200px;
  width: 90%;
  margin: auto;
  border-left: 1px solid rgb(185,229,251);
  border-left: 1px solid rgba(185,229,251,0.3);
}

/* topNav items */
#topNav li {
  float: left;
  width: 24.5%;
  height: 62px;
  position: relative;
  border-right: 1px solid rgb(185,229,251);
  border-right: 1px solid rgba(185,229,251,0.3);

  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.6em;
  font-weight: 100;
  color: #b9e5fb;
  text-align: center;
}

/* other topNav links */
#topNav li a {
  text-decoration: none;
  display: block;
  line-height: 50px;
  width: 100%;
  padding-top: 6px;
  margin-right: 1px;
  color: #e1f4fd;
  border-bottom: 6px solid transparent;
}

#topNav li a:hover {
  color: #ffffff;
  border-bottom: 6px solid #ffffff;
}

#topNav li a.active {
  color: #ffffff;
  cursor: default;
  border-bottom: 6px solid #ffffff;
}

/*---------------------------------------------------------------------------
  CONTENT - FULL WIDTH IMAGE AREA
---------------------------------------------------------------------------*/

.fullBleed {
  width: 100%;
}

.fullBleed.image {
  text-align: center;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;

}

.fullBleedImageMask {
  height: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.fullBleedImageMask img {
  /* on img load, margin-left is calculated dynamically, then its set to visible */
  width: 100%;
  margin-top: -4px;
}

.slide-text {
  font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica,  Arial, sans-serif;
  font-weight: 300;
  color: #ffffff;
  position: absolute;
  bottom: 20%;
}

.button {
    border-color: #f7941e;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    display: inline-block;
    margin-top: 2%;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
	font-weight:400;
	font-size: 1.3vw;
}


#talkImg .fullBleedImageText:last-child  {
  top: 40%;
}

#main .fullBleedImageMask {
  min-height: 700px;
}

#main .slide-text {
  width: auto;
  color: #8ed7f7;
  line-height: 1;
  top: 34%;
}

.slide-text.left {
  left: 7%;

  text-align:left;
}

.slide-text.right {
  right: 10%;
  left: auto;

  text-align:right;
}

.slide-text {
    position: absolute;
    z-index: 10000;
}

.slide-text.alt-slide {
	left: 50%;
}

.slide-text h1 {
  font-size: 11em;
  font-size: 7.3vw;
  font-weight: 100;
  letter-spacing: -0.01em;
  margin: 0 0 0 -8px;
  padding: 0;
  text-shadow: 1px 1px .75em rgba(23, 102, 171, 0.8);
}

.slide-text h2 {
  font-size: 4.6em;
  font-size: 3.2vw;
  font-weight: 100;
  line-height: 1.1em;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px .75em rgba(23, 102, 171, 0.8);
  position: relative;
  width: 50%;
  color: #fff;
}

.car-search h2 {
  font-size: 4.6em;
  font-size: 2.2vw;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px .75em rgba(23, 102, 171, 0.8);
  position: relative;
  color: #fff;
}

.slide-text.alt-slide {
	width: 60%;
}

.slide-text h2 .trade {
  font-size: 50%;
  position: absolute;
  top: 0;
}

.slide-text h3 {
  font-size: 3.6em;
  font-size: 1.75vw;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin: .6em 0 0 0;
  padding: 0;
  text-shadow: 1px 1px .75em rgba(23, 102, 171, 0.8);
  position: relative;
  width: 65%;
  color:#fff;
}

.car-search h3 {
  font-size: 3.6em;
  font-size: 1.5vw;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin: .6em 0 0 0;
  padding: 0;
  text-shadow: 1px 1px .75 rgba(23, 102, 171, 0.8);
  position: relative;
  color:#fff;
}

.slide-text h3 .trade {
  font-size: 50%;
  position: absolute;
  top: 0;
}

.iconBtn {
  position: relative;
  z-index: 0;
  padding: 2.1% 11% 2.2% 5%;
  width: auto;
}

.iconBtn span:first-child {
  margin: 0;
}

.iconBtn #video {
  background-image: url(http://pandora.com/static/ads/mip/splash/img/icon_watch.png);
  background-size: auto 51%;
  background-position: center;
  background-repeat: no-repeat;
  width: 24%;
  height: 100%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #f7941e;
  border-left: 1px solid rgba(247,148,30,0.4);
}

.iconBtn #video.over {
  background-image: url(http://pandora.com/static/ads/mip/splash/img/icon_watch_over.png);
  border-left: 1px solid #ffffff;
  border-left: 1px solid rgba(255,255,255,0.4);
}

.iconBtn #twitter {
  background-image: url(http://pandora.com/static/ads/mip/splash/img/icon_twitter.png);
  background-size: auto 48%;
  background-position: center;
  background-repeat: no-repeat;
  width: 26%;
  height: 100%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #f7941e;
  border-left: 1px solid rgba(247,148,30,0.4);
}

.iconBtn #twitter.over {
  background-image: url(http://pandora.com/static/ads/mip/splash/img/icon_twitter_over.png);
  border-left: 1px solid #ffffff;
  border-left: 1px solid rgba(255,255,255,0.4);
}


/*---------------------------------------------------------------------------
  CONTENT - COLUMN LAYOUT
---------------------------------------------------------------------------*/

.fullBleed.content {
  padding: 2% 0 3% 0;
  position: relative;
  color: #727272;
}

.fullBleed.content:last-child{
  padding-bottom: 10%;
}
.columnRow {
	clear: both;
    display: block;
    width: 100%;
}

.column {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 4%;
}

.columnRow p,
.columnRow ul {
  color: #555;
  line-height: 1.6;
  font-size: 2.3em;
  font-size: 1.4vw;
  font-weight: 300;
  margin: 1% 0 24px;
  -webkit-font-smoothing: antialiased;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .columnRow p,
.columnRow ul {
  font-weight:400;
}
}

.columnRow p.blue {
  color: #00aeef;
  font-size: 2.3em;
}

.columnReg {
  width: 47%;
}

#paidSmImg {
  padding-bottom: 5%;
}

.columnLg {
  width: 64%;
}

.columnSm {
  width: 29%;
  height: 100%;

}
.columnSm p {
  font-size: 1.3vw;
}

.columnReg:nth-child(2n+1) {
  margin-left: 0;
}

.column img {
  max-width: 100%;
}

.dropShadow {
  border: 2px solid #ffffff;
  -moz-box-shadow: 0 0 2px 2px rgba(166, 166, 166, 0.3);
  -webkit-box-shadow: 0 0 2px 2px rgba(166, 166, 166, 0.3);
  box-shadow: 0 0 2px 2px rgba(166, 166, 166, 0.3);
  margin-top: -25%;
}

.roundImgContainer {
  margin-top: -35%;
  position: relative;
  width: 92%;
}

.roundOver {
  position: absolute;
  z-index: 100;
  width: 100%;
  top: 0;
  left: 0;
}

#paidOver {
  top: -18%;
}

.roundImgDiv {
  position: relative;
  z-index: 0;
  margin: 0 0 0 9%;
  width: 75%;
  height: 75%;
}

#paidContent .roundImgDiv {
  padding-top: 13%;
}

#talkContent .roundImgDiv {
  padding-top: 8%;
  padding-left: 8%;
}

.roundImg {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

#source {
  font-size: 1.6em;
  color: #a5a5a5;
  font-style: italic;
  padding-top: 10px;
}

#aboutContent {
  background-image: url(http://pandora.com/static/ads/mip/splash/img/about_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left bottom;
}

#talkContent .roundImgContainer {
  margin-left: 10%;
}


/*---------------------------------------------------------------------------
  SLIDER
---------------------------------------------------------------------------*/


.responsiveHeight {
	height: 660px;
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
	margin-top:75px;
}

.responsiveHeight > .inner {
	position: absolute;
	width: 100%;
	height: 100%;
}

.iosSlider {
	position: relative;
	top: 0;
	left: 0;
	overflow: visible;
	width: 100%;
	height: 100%;
}

.iosSlider .slider {
	width: 100%;
	height: 100%;
}

.iosSlider .slider .slide {
	float: left;
	width: 2000px;
	height: 100%;
	text-align: center;
}

.iosSlider .slider .slide img {
	width: 100%;
}

@media screen and (max-width: 2034px) {

	.responsiveHeight {
		height: 0;
		padding: 0 0 32% 0;
	}

	.iosSlider .slider .slide img {
		height: 100%;
	}

}


	#dots {
		position: absolute;
		bottom: 25px;
		left: 50%;
		width: 400px;
		margin-left: -200px;
		z-index: 1000;
		text-align: center;
	}

		.dot {
			width: 10px;
			height: 10px;
			margin: 0 8px;
			display: inline-block;
			background-color: #fff;
			border-radius: 8px;
			background-color: transparent;
    		border: 1px solid #fff;
		}

		.dot.active {
			background-color: #fff;
		}

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

/*---------------------------------------------------------------------------
  CUSTOM PAGE STYLES - MOBILE
---------------------------------------------------------------------------*/

#stores .column {
	text-align: center;
}

#stores .column img {
	height:20%;

}

/*---------------------------------------------------------------------------
  CUSTOM PAGE STYLES - HOME
---------------------------------------------------------------------------*/

#home-partners {
	clear: both;
    display: block;
    float: left;
    position: relative;
    width: 100%;
}

#select-partner {
	float: left;
    width: 30%;
	margin-right: 4%;
}

#select-partner h3 a {
	 color: #00aeef;
	 text-decoration:none;
	 display:block;
	 width: 100%;
}

#select-partner h3 {
	 padding: 3%;
	 border: 1px #fff solid;
}

#select-partner h3:hover,
#select-partner h3.active {
		border: 1px #00aeef solid;

	background-image: url(http://pandora.com/static/programs/everywhere/_img/select-arrow-active.png);
	background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 100%;


}


#partner-result h3 {
	border: 1px #00aeef solid;
	background-image: url(http://pandora.com/static/programs/everywhere/_img/result-arrow-collapse.png);
	background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 100%;
	 padding: 3%;

}

#partner-result h3.close {
	background-image: url(http://pandora.com/static/programs/everywhere/_img/result-arrow-active.png);

}

#partner-result h3  a {
	  color: #00aeef;
	 text-decoration:none;
	  display:block;
	 width: 100%;
}


#partner-result {
	width: 66%;
	float: left;
}

.result {
	display:none;
}

/*---------------------------------------------------------------------------
  CUSTOM PAGE STYLES - AUTO
---------------------------------------------------------------------------*/

.car-search {
	width: 100%;
	padding: 4% 0;
	background-image: url(http://pandora.com/static/programs/everywhere/_img/search-bkg.jpg);
	background-size: cover;
	color: #fff;
	margin-top: 3%;
}


.car-search select {
	background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.5em;
    font-weight: 100;
    letter-spacing: 0.1em;
    outline: medium none;
    padding: 0.5em;
    text-transform: uppercase;
	font-family: 'AvenirLTStd-Light', 'Avenir Next', 'Avenir', Helvetica, Arial, sans-serif;
	width: 100%;
	z-index: 1000;
	position: relative;
	border-radius: 0;
	-webkit-border-radius: 0;

}

.car-select {
	display: inline-block;
    margin-right: 1%;
    margin-top: 1%;
    position: relative;
}

.car-select img {
    border-left: 1px solid #fff;
    height: 100%;
    position: absolute;
    right: 0;
}

#select-year {
	width: 15%
}



#select-make,
#select-model {
	width: 25%;
}

.car-search option {
	color: #444;
    margin: 5% 8%;
}

h3.available {
	background-image: url(http://pandora.com/static/programs/everywhere/_img/check.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position:left center;
	padding-left: 3%;
}

.unselectable {
    background-color: #cccccc;
    pointer-events: none;
}

/*---------------------------------------------------------------------------
  CUSTOM PAGE STYLES - BUSINESS
---------------------------------------------------------------------------*/

.benefitIcon {
	float: left;
    margin-left: -6%;
    margin-right: 1%;
    position: absolute;
    width: 5%;
}
.benefitIcon img {
	height: auto;
    width: 100%;
}

.businessBenefit {
	display: block;
    float: left;
    padding-left: 3%;
    width: 93%;
}