/********* add css for bin login PT **********/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
*{
    margin: 0;
    padding: 0;
}

body{ text-align: center; background: url(../cssImages/header-bg.gif) repeat-x;font-family: BentonSansRegular,Arial,Helvetica,Sans-serif;}
body .benton-bold {
    font-family: BentonSansBold,Arial,Helvetica,Sans-serif;
}

body .benton-book {
    font-family: BentonSansBook,Arial,Helvetica,Sans-serif;
}

body .benton-light {
    font-family: BentonSansLight,Arial,Helvetica,Sans-serif;
}


body .benton-medium {
    font-family: BentonSansMedium,Arial,Helvetica,Sans-serif;
}

body .benton-regular {
    font-family: BentonSansRegular,Arial,Helvetica,Sans-serif;
}


html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
#buckets
.inlineBlock {
display: inline-block;
*display:block;
zoom: 1;
}

/********* NAVIGATION AREA **********/

#header{ margin: 0 auto; max-width: 1000px; min-width: 830px; height: 90px; position: relative;}
#AmexLogo{ float: left; 
           margin: 18px 0 0 6px; 
           background: url(../cssImages/logo_bluebox.gif) no-repeat;
           width: 63px;
           height: 54px;
}



#RH{
    float: right;
    text-align: right;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

#contact-area{
    margin: 4px 10px 0 0;
    float: right;
    font-family: Helvetica,Arial,Verdana,san-serif;
    color: #000;
    font-size: 11px;
}
#contact-area a{
    font-family: Helvetica,Arial,Verdana,san-serif;
    color: #036;
    font-size: 11px;
    margin-right: 8px;
    text-decoration: none;
}

#login{
    background-image: url(https://network.americanexpress.com/us/en/amexconnect/cssImages/BG_Middle_Dark_22pxHigh.gif);
    /* background-repeat: no-repeat; */
    /* width: 55px; */
    height: 18px;
    margin-right: 5px;
    float: right;
    border: 0;
}



#filigree{
    background: url(../cssImages/gns-filigree.jpg) repeat-x;
    background-position: top;
    padding-top: 75px;
    float: left;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
    color: #454545;
    font-size: 12px;
}

#filigree a:link{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: none;}
#filigree a:visited{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: none;}
#filigree a:hover{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: underline;}



#no-filigree{
    background-position: top;
    padding-top: 25px;
    float: left;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
    color: #454545;
    font-size: 12px;
}

#no-filigree a:link{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: none;}
#no-filigree a:visited{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: none;}
#no-filigree a:hover{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #015480;  text-decoration: underline;}



/********* SLIDER **********/

#slider-container {max-width: 100%; background-color: #E8E8E8;position: relative;top: -6px;}
#hero-slider {margin: 0 auto; width: 1000px;height: 350px; position: relative;overflow:hidden;}

.no-js #hero-slider{overflow-y:scroll;}
.slider-bg {background: url(../cssImages/slider-bg.gif) repeat-x; height: 25px; width: 100%; }



#hero-slider{position:relative;}

#slider1{position:absolute;}

.carousel-item {
    float: left;
    height: 350px;
    width: 1000px;
position: relative; 
}


.carousel-item  .carousel-item-video iframe{
    height: 350px;
    width: 1000px;
z-index:0;
}
.carousel-item-video + .text-panel {
background-color: transparent;
display:none;
}

#slider2{
height: 190px;
position: relative;  
   margin: 0px auto;  
}

#scroll-left{
position: absolute; left: 0; top: 78px; z-index: 999;outline: 0;
}

#scroll-right{
position: absolute; right:10px; top: 78px; z-index: 999;outline: 0;
}

.no-js #scroll-left , .no-js #scroll-right {display:none;}

.carousel-item-slider{float: left;
height: 190px;
margin-right: 7px;
width:235px;}

.text-panel
{   position:absolute;
    background-color: #015480;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    bottom: 0;
    color: #FFFFFF;
    float: left;
    font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif;
    font-size: 14px;
    margin-left: 525px;
    padding: 20px;
    right: auto;
    text-align: left;
    width: 40%
}



.text-panel p{
font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif;
    font-size: 14px;
line-height: 18px;
}


.text-panel-area{
width: 360px;
height: 105px;
float: left;
text-align: left;
position: absolute;
bottom: 0;
right:6%;
padding: 20px 20px 20px 20px;
background-color: #015480;
font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
color: white;
font-size: 14px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-left-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}


#wrap {
margin: 0 auto;
width: 1000px;
text-align: center;
}
.subtitle {
font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
color: white;
font-size: 14px;
}


#left-content {
float: left;
text-align: left;
width: 400px;
margin-right: 20px;
font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
color: #454545;
font-size: 12px;
margin-left:40px;
}


.blue-title {
font-family: "BentonSansLight", Helvetica,Arial,Verdana,san-serif;
color: #152B75;
font-size: 20px;
margin-bottom: 20px;
line-height: 1.3em;
}


#right-content {
float: right;
text-align: left;
width: 480px;
font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
color: #454545;
font-size: 12px;
margin-right: 20px;
}


#right-content h1{margin-bottom: 15px;}

#right-content hr{margin-bottom:  30px;}

#cards {
float: right;
width: 480px;
text-align: center;
margin-bottom: 30px;
}
.inline-block{display: inline-block;*display:inline;zoom:1;}
.product-image 
{margin-bottom: 15px;
margin-left: 20px;
margin-right: 10px;
float: left;}
.product-image img{
width: 125px;
height: 80px;}

#hero-nav{position: absolute;
bottom: 0px;
right: 6%;
z-index: 0;
width: auto;
height: auto;
background-color: #015480;
padding: 15px 10px;
}

#hero-nav.video{
bottom: 50%;
left: 0;
width: 100%;
background-color: transparent;
padding: 0;
}

.no-js #hero-nav {display:none;}


#bx-prev {
background: url("../cssImages/arrow-left.png") no-repeat scroll 0 0 transparent;
color: white;
display: block;
float: left;
height: 36px;
overflow: hidden;
text-indent: -9999px;
width: 19px;
margin: 0 10px 0 0;
}

#bx-prev.video{

background: url("../cssImages/arrow-left-new.png") no-repeat scroll 0 0 transparent;

}

.background{
background-color:#000000 !important;
}
#bx-next {
background: url("../cssImages/arrow-right.png") no-repeat scroll 0 0 transparent;
color: white;
margin: 0 0 0 9px;
display: block;
float: left;
height: 36px;
overflow: hidden;
text-indent: -9999px;
width: 19px;
}

#bx-next.video {
background: url("../cssImages/arrow-right-new.png") no-repeat scroll 0 0 transparent;
float: right;
}


#place-here {

color: #FFFFFF;
font-weight: bold;
float: left;
font-family: arial;
font-size: 14px;
margin-top: 10px;
}


#total {
top: 10px;
color: #FFFFFF;
display: block;
float: left;
font-family: arial;
font-size: 14px;
margin-top: 10px;
}

.title{ font-family: "BentonSansLight", Helvetica,Arial,Verdana,san-serif; color: #fff; font-size: 20px; margin-bottom: 28px;}


.text-panel-area .title{margin-bottom: 20px;font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; }

.text-panel-area hr{margin-bottom: 15px;}

a.getthecard {
background: #152B75;
padding: 6px 10px;
border-radius: 5px;border-radius: 0\0/; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif;
color: white;
font-size: 12px;
text-decoration: none;
float: right;
margin-top: 15px;
}


a.getthecard:hover {
background: #FFFFFF;
color: #152B75;
}


#controls a:link{font-family: Helvetica,Arial,Verdana,san-serif; color: #fff; font-size: 12px; text-decoration: none;}
#controls a:visited{font-family: Helvetica,Arial,Verdana,san-serif; color: #fff; font-size: 12px; text-decoration: none;}
#controls a:hover{font-family: Helvetica,Arial,Verdana,san-serif; color: #fff; font-size: 12px; text-decoration: none;}

.learnmore{ 
float: left;
color: #FFFFFF !important;
display: inline-block;
font-size: 90%;
font-weight: bold;
line-height: 29px;
overflow: visible;
text-decoration: none !important;
border-radius: 5px;border-radius: 0\0/; 
height: 31px;
padding:0 10px 0 10px;
float: left;
border: 0;
text-align: center;
margin-top: 28px;

background-color:#245ebf;

 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a1a4d), to(#245ebf));
 
  background: -webkit-linear-gradient(top, #245ebf, #0a1a4d);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #245ebf, #0a1a4d);

  /* IE 10 */
  background: -ms-linear-gradient(top, #245ebf, #0a1a4d);

  /* IE 6-9 */
  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#245ebf', endColorstr='#0a1a4d',GradientType=0 ); /* IE6-9 */

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #245ebf, #0a1a4d);
}

.learnmore:hover
{ 
color:#002663 !important;
background-color:#EAEBEB;

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cfcfcf), to(#FFFFFF));
  background: -webkit-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* IE 10 */
  background: -ms-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* IE 6-9 */
  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 */

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #FFFFFF, #cfcfcf);

}

/****** BUCKETS ******/

#slider-prev, #slider-next{border: 0;}

#slider2 .item-box{ font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #000; font-size: 11px; padding: 8px 10px 0 10px;}
#slider2 .item-title{font-family: "BentonSansRegular", Helvetica,Arial,Verdana,san-serif; color: #000; font-size: 16px; padding: 10px 2px 0 2px;}

#item-purple{ width: 232px;  height: 160px; position: relative; }
#purple-btn{ width: 76px; height: 27px; float: none; position: absolute; top: 72px; left: 55px;}

#item-grey{ width: 232px;  height: 160px; position: relative; }
#grey-btn{ width: 76px; height: 27px; float: none; position: absolute; top: 72px; left: 55px;}

.item-orange{ width: 232px;  height: 160px; position: relative; }
.slider-btn{  height: 27px; float: none; position: absolute; top: 80px; left: 70px;}

#item-green{ width: 232px;  height: 160px; position: relative; }
#green-btn{  width: 76px; height: 27px; float: none; position: absolute; top: 72px; left: 55px;}

.purple h3, .purple a {color: #5E2750;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.aqua h3, .aqua a {color: #006890;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.teal h3, .teal a {color: #008566;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.green h3, .green a {color: #00693C;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.yellow h3, .yellow a {color: #CE8E00;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.orange h3, .orange a {color: #A33F1F;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.grey h3, .grey a {color: #4D4F53;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}
.blue h3, .blue a {color: #002633;background-color: #FFFFFF;border: 2px solid #e9e9e9;border-radius: 4px 4px 4px 4px;}

.grey h3,.orange h3,.green h3,.blue h3,.purple h3, .aqua h3,.teal h3, .yellow h3
{font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif; font-size: 16px; }



.grey p,.orange p,.green p,.blue p,.purple p,  .aqua p,.teal p, .yellow p{font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif; font-size: 11px;}


#contentCarousel {text-align: center; margin: 25px auto 10px; max-width: 1000px; position: relative; padding: 0 10px;}
#buckets {text-align: center; margin: 0 auto;overflow: hidden;
height: 190px;
width: 968px; }

.no-js #buckets {overflow:visible;}

.hide {display:none!important;}

#slider2 .item-title {
    font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif;
    font-size: 16px;
    padding: 10px 2px 0;
    margin-top: -190px;
}


#item-grey,.item-orange,#item-green, #item-purple {background:none;}


body{background:none;}

#slider2 a
{
    
    font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif;
    font-size: 10px;
    font-weight:bold;
    padding: 5px 10px;
    text-decoration: none;
    height:10px;
    line-height:10px;
  }



.no-js  #iC_NoJS {padding: 10px;
margin: 0 auto;font-weight:bold;text-align: center;}

div#ContentBlock {
  width: 75%;
  margin: 15px auto;
  position: relative;
}
.issuercontent {
  /* width: 50%; */
  display: inline-block;
  width: 41%;
  margin: 0 4%;
}
.divider {
  display: inline-block;
  float:left;
  background-color: #D0D8DC;
  width: 1px;
  height: 100%;
  position: absolute;
}
.logo_img {
  text-align: left;
}
.logo_img img {

  width: 215px;
  height: 50px;
}
.issuer-desc p{
  COLOR: #000000;
  padding: 20px 0 0 0px;
  width: 100%;
  font-weight: bold;
  text-align: left;
  font-size: 12px;
  line-height: normal;
}
.rightalign {
  text-align: right;
    padding: 20px 0px 0px 0px;
	  margin-right: 3%;
}
.leftalign
{float:left;}

.rightalign  a,.rightalign a:visited{
  background-color:#245ebf;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a1a4d), to(#245ebf)); 
  background: -webkit-linear-gradient(top, #245ebf, #0a1a4d)
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #245ebf, #0a1a4d);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 11px;
    border-radius: 5px;
  }
  .rightalign  a:hover{
color:#002663 !important;
background-color:#EAEBEB;

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cfcfcf), to(#FFFFFF));
  background: -webkit-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* IE 10 */
  background: -ms-linear-gradient(top, #FFFFFF, #cfcfcf);

  /* IE 6-9 */
  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 */

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #FFFFFF, #cfcfcf);
  }
.issuer-shortdesc {
  color: #004d7e;
  width: auto;
  font-size: 10px;
  line-height: normal;
  font-weight: bold;
  text-align: left;
  padding: 20px 0px 0px 0px;
  }
  
  #slider-title {
  color: rgb(77, 79, 83);
  font-family: BentonSansMedium, Helvetica, Arial, Verdana, san-serif;
  padding-top: 1.5%;
}
  
  @media screen and (min-width: 780px) and (max-width: 1000px) {

 body{ width: 100%;}
  #slider-container{
  width: 100%;
  height:100%;
  text-align:center;
  }
  .carousel-item  img{
     width: 1000px;
	 height: 350px;
	
   }
   .carousel-item  .carousel-item-video iframe{
     width: 100%;
	 height: 350px;
	 }

.carousel-item {
float: left;
height: 35%;
width: 100%;
}


#hero-slider {
height:350px;
width: 100% !important;
}
.bx-wrapper img {
width: 100%;
height 100%;
display: block;
}

 .text-panel{
  width: 39%;
  height: 149px;
  bottom: 0px;
   margin-left:58%;
    }
	#bxslider{
	width: 100% !important;
	}


#contentCarousel {max-width: 720px;}
#buckets {max-width: 720px;}

#scroll-right {
right: -8px;
z-index: 999;
}
#scroll-left {
left: -12px;
}

.wrap {max-width: 96%; min-width: 55%;}
  #header{ margin: 0 auto; max-width: 100%; min-width: 55%;}
  #slider-container{width: 100%; }


a.learnmore {

float: left;
border: 0;
/*margin-top: 1.5%;*/
position: absolute;
bottom: 11%;
}
a.learnmore:hover {

float: left;
position: absolute;
border: 0;
}
a {
   outline: 0;
}

div#ContentBlock {
  width: 100%;
}
}




/********* TABLET **********/

@media screen and (min-width: 501px) and (max-width: 780px){
 body{ width: 100%;}
  #slider-container{
  width: 100%;
  text-align:center;
  }
    .carousel-item  img{
    height: 297px;
	  width:848px;
	  float:left;}
	  
  .carousel-item  .carousel-item-video iframe{
   height: 298px;
	  width:100%;
	  float:left;
  
  }
	 .carousel-item {
float: left;
 height:733px;
 width:367px;
}

 .text-panel{
  width: 39%;
  height: 60%;
  bottom: 0px;
  margin-left:55%;
 
  }
  .text-panel p {
font-family: "BentonSansRegular",Helvetica,Arial,Verdana,san-serif;
font-size: 12px;
line-height: 17px;
}

	
  #hero-slider {
     width: 100%;
    height: 100% !important;}


.title{margin-bottom: 24px;}

.learnmore {
   float: left;
    border: 0;
position: absolute;
bottom: 11%;

}
.learnmore:hover {
float: left;
position: absolute;
border: 0;
}


#contentCarousel{
margin: 10px auto 20px;

width:90%;}

#buckets {max-width: 480px;}
#scroll-left {
left: -12px;
}


.wrap {max-width: 96%; min-width: 55%;}
  #header{ margin: 0 auto; max-width: 100%; min-width: 55%;}
  #slider-container{
  width: 100%;
  height:297px;}
  panel p {

font-size: 12px;
line-height: 18px;
}

.title {
font-family: "BentonSansLight", Helvetica,Arial,Verdana,san-serif;
color: #fff;
font-size: 18px;
margin-bottom: 28px;
}

#scroll-right {
right: 12px;
}
#scroll-left {
left: 6px;
}

div#ContentBlock {
  width: 100%;
}

}

@media screen and (max-width: 780px)
{
#hero-nav {
width:auto;
right:3%;}


}

@media screen and (max-width: 676px){#slider-container{top:0px;}}


@media screen and (max-width: 670px){
#hero-nav {
    width: auto;}
}


/********* LANDSCAPE SMARTPHONE **********/
@media screen and  (min-width: 460px) and (max-width: 600px) {
 

 body{width: 100%;}
 

	 .carousel-item {
float: left;
height: 294px;
width: 588px;
}
  .carousel-item  img{
    height: 204px;
	  width:584px;
	  float:left;}
	  
.carousel-item  .carousel-item-video iframe{
	  height: 204px;
	  width:100%;
	  float:left;
	  }
	  
	  #slider-container {
width: 100%;
height: 204px;
}

  #header{ margin: 0 auto; max-width: 100%; min-width: 406px;}
  #contact{display:none;}
  #change{display:none;}
  #mainmenu{display:none;}
  .slider-c-bg{display:none;}
 
 .text-panel{ position: relative;
 text-align:left;
top: -203px;
left: -15px;
right: 10px;
margin-right:10px;
bottom: 0;
width: 53%;
height: 94%;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
padding: 10px 10px 20px 20px;
font-size: 12px;
display: inline;}

.text-panel p
{font-size: 12px;
line-height:16px;
margin-right:5px;
width:80%;}

#hero-slider {
width: 100%;
height: 207px;
}

 
.learnmore{ 
 position: absolute;
bottom: 18%;}



#scroll-left,#scroll-right{display: none;}
  #slider-container{width: 100%; }
  


  .title{ font-size: 14px; width: 85%;}
  #filigree{ font-size: 10px; }
  #contentCarousel{display:block; width: 90%;
padding: 0 0;margin: 10px 33px 20px !important;}
  #iphone-content{display:none;}
  #right{float:right; max-width:50%;}
  #left{float:left;max-width:50%;}
  .purple-box, .grey-box, .orange-box, .green-box{min-height:100px; }
  #logo-bg{min-width:460px; max-width: 600px; height: 36px;}
  #dropdown{ float: left; display: block; margin: 0px 0 0 20px;}

  #RH{ float: none; width: 200px; right: 0; position: absolute; top: 0px; padding-right:3px; }
  
  
  #buckets{ margin-top: 25px;}
  .previous, .next {display:none;}



 #buckets ul{max-width: 500px;height: auto;}


#buckets li.marginRight{margin-right: 7px;}

  
  #contentCarousel {
display: block;
max-width: 500px;
padding: 0 0;
margin: 10px 10px 20px;
}


#contentCarousel {
    display: block;
    margin: 10px 10px 20px;
    max-width: 467px;
    padding: 0;
}
#contentCarousel {
    display: block;
    margin: 10px 10px 20px;
    max-width: 467px;
    padding: 0;
}

#contentCarousel {
display: block;
width: 90%;
padding: 0 0;
margin: 10px auto 40px !important;
}
#buckets {
height: auto;
}
a {
   outline: 0;
}

#buckets li {

    margin: 0;
}
}
@media screen and (max-width: 540px){
.issuercontent{width:90%;}
.leftalign{float:none;
  border-bottom: 2px solid #D0D8DC;
    padding-bottom: 20px;
}
div#ContentBlock {
  width: 100%;
}

 .divider{float:none;
display:none;
} 


.issuercontent{  margin-top: 9px;}

#buckets {width: 235px;}
}
@media screen and (min-width: 460px) and (max-width: 500px){

 body{width: 100%;}
 
 .carousel-item  img{
    height: 100%;
	  width:100%;
	  float:left;}
	  
.carousel-item  .carousel-item-video iframe{
    height: 170px;
	  width:100%;
	  float:left;}
	  
	 .carousel-item {
float: left;
height: 21%;
width: 100%;
}

#hero-slider {
width: 100%;
height: 169px;
}
#slider-container {
    height: 169px;
    width: 100%;
}
#contentCarousel{
margin-left:2% !important;
}
 #slider-container{
 width:100%
 }
.text-panel
{
left: -293px;
top: -207px;
height: 180px;
}

.learnmore
{position: absolute;
bottom: 12%;}

.learnmore:hover {
position: absolute;
bottom: 12%;
}

.title
{
position: absolute;
margin-top: 37px;
width: 78%;
}

.text-panel p
{
width: 90%;
margin-top: 70px;
}

.carousel-item img
{

width: 482px;
}


 #buckets{
margin-top:0px;
max-width: 421px;
}
 
 
    #slider-container {
    height: 169px;
    width: 100%;
}

#hero-slider {
width: 100%;
height: 169px;
}

a {
   outline: 0;
}
#contentCarousel {
    margin-left: 4% !important;
width:96%;
}
#hero-nav{right:0;}
}
/********* PORTRAIT SMARTPHONE **********/
@media screen and (min-width: 0px) and (max-width: 459px) {
  
body{
width: 100%;
text-align: center;}

.carousel-item {

height: 126px;
width: 100%;
}
a {
   outline: 0;
}
.carousel-item img{
height: 160px;
width: 455px;
}
.carousel-item  .carousel-item-video iframe {

height: 315px;
width: 100%;
}
#hero-slider 
{
width: 100%;
height: 335px;}
#scroll-right,#scroll-left{display: none;}

  #header{ margin: 0 auto; max-width: 100%; min-width: 300px;}
  #contact{display:none;}
  #change{display:none;}
  #mainmenu{display:none;}
  .text-panel{ position:relative; right:0;top: -3px; bottom:0; width:94%; height:200px; float:left; max-width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 10px 40px 40px 20px; margin: 0 0 -20px 0; font-size: 12px;}
  .text-panel p{font-size: 12px; line-height: 15px;}
  #slider-container{width: 100%; background-color: #FFFFFF;}
  .slider-c-bg{display:none;}
  .title{ font-size: 14px;margin-bottom: 25px; }
  #filigree{ font-size: 10px; }
  #contentCarousel{display:block;}
  #iphone-content{display:none;}
  .purple-box, .purple-title, .grey-box, .grey-title, .orange-box, .orange-title, .green-box, .green-title{
  max-width: 90% ;
  width:300px;}
  #logo-bg{ width: 100%; height: 36px;}
  #dropdown{ float: left; display: block; margin: 0px 0 0 20px;}
  #RH{ float: none; width: 200px; right: 0; position: absolute; top: 0px; padding-right:3px; }
  #slider2{
  width:100% !important;
  left:10% !important;
  
}  


#buckets ul{left: 0 !important;}
  .previous, .next {display:none;}

#hero-nav {
width: auto;
right: 15%;
}

			#buckets{
			height: auto;
}
   #buckets ul{width: 100%;}
 
  #grey-btn, .slider-btn,#green-btn, #purple-btn{margin-top:100px;top:0px;}

   #slider2 a{margin-top: 82px;}
.learnmore{
float: left;
border: 0;
position: absolute;
bottom: 40%;
}

.learnmore:hover {
float: left;
position: absolute;
bottom: 40%;
border: 0;
}

}
@media screen and (min-width: 0px) and (max-width: 441px) 
{
.carousel-item  .carousel-item-video iframe {
height: 303px;
width: 100%;
}
}
@media screen and (min-width: 0px) and (max-width: 421px) 
{
.carousel-item  .carousel-item-video iframe {
height: 335px;
width: 100%;
}
}
@media screen and (min-width: 0px) and (max-width: 427px) 
{
.carousel-item  .carousel-item-video iframe {
height: 327px;
width: 100%;
}
}
@media screen and (max-width: 415px){
.carousel-item  .carousel-item-video iframe {
height: 330px;
width: 100%;
}
}

@media screen and (min-width: 0px) and (max-width: 320px) {
  
body{
width: 100%;
text-align: center;}
.carousel-item {

height: 126px;
width: 100%;
}
.carousel-item img{

height: 160px;
width: 455px;

}
.carousel-item  .carousel-item-video iframe {

}

#hero-slider 
{

height: 335px;
min-width:320px;}
#scroll-right,#scroll-left{display: none;}

  #header{ margin: 0 auto; max-width: 100%; min-width: 300px;}
  #contact{display:none;}
  #change{display:none;}
  #mainmenu{display:none;}
  .text-panel{ position:relative; right:0;top: -3px; bottom:0; width:94%; height:200px; float:left; max-width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 10px 40px 40px 20px; margin: 0 0 -20px 0; font-size: 12px;}
  .text-panel p{font-size: 12px; line-height: 15px;}
  #slider-container{min-width: 310px; background-color: #FFFFFF;}
  .slider-c-bg{display:none;}
  .title{ font-size: 14px;margin-bottom: 25px; }
  #filigree{ font-size: 10px; }
  #contentCarousel{display:block;}
  #iphone-content{display:none;}
  .purple-box, .purple-title, .grey-box, .grey-title, .orange-box, .orange-title, .green-box, .green-title{
  max-width: 90% ;
  width:300px;}
  #logo-bg{ width: 100%; height: 36px;}
  #dropdown{ float: left; display: block; margin: 0px 0 0 20px;}
  #RH{ float: none; width: 200px; right: 0; position: absolute; top: 0px; padding-right:3px; }
  #slider2{
  width:100% !important;
  left:10% !important;
  min-width:300px;
  
}  
	
	


#buckets{width:90%;height:660px;}
#buckets ul{left: 0 !important;}
  .previous, .next {display:none;}
.carousel-item-slider {
width:90%;
height: 145px;}

			#buckets{
			min-width:310px;
			}
   #buckets ul{width: 100%;
   min-width:300px;}
  #buckets li{margin:0 2% 20px;width: 95%;}
  #grey-btn, .slider-btn,#green-btn, #purple-btn{margin-top:100px;top:0px;}
 
 
.learnmore{
float: left;
border: 0;
top: 113px;
position: absolute;
margin-top: 5px;
}

.learnmore:hover {
float: left;
position: absolute;
border: 0;
}
#contentCarousel {
text-align: center;
margin: 25px auto 10px;
min-width:300px;
position: relative;
padding: 0 auto;
}
 #filigree{ font-size: 10px; max-width:310px;}
#buckets ul {
left: 3px !important;
}

}
.countryLoginDiv
{
	margin:0 auto;
	width: 45%;  
	min-height:104px; 
	margin-top:10px;
	/*padding-left:10px;
	padding-top:10px;*/
	font-size:10px;
	font-family:BentonSansRegular,Arial,Helvetica,Sans-serif;
 }
 
.instructionalText
{
	width: 57%; 
	text-align: left;
	/* margin-left:2px; */  
	*margin-left:4px;
font-family:BentonSansRegular,Arial,Helvetica,Sans-serif; 
	
	font-size: 11px;
}


.chkbox
{
  padding-left:0px;
  padding-right:0px;  
  margin: 12px 0 0;
}

.log
 {
	font-weight:bold;
	font-size: 13px;
	width: 20%;
	/* margin-left:10px; */
	margin-top:10px;
  	
	font-family:BentonSansMedium,Arial,Helvetica,Sans-serif! important;    
 }
 
.borderClass
 {
    border:1px solid #B8B8B8;  
 
    margin-bottom: 60px;
    padding-top: 25px;
    margin-top: 60px;
    padding-bottom: 25px;
    min-width: 500px;
}
 .none{
 	display:none;
 }
.error
{
	font-family:Arial! important;   
    	color:#FF0000! important;   
	/* width: 55%; */
	margin: auto;
}
  
.collapsedLoginWithoutCountry
{
    width:420px;
    height:22px;
    color:#4d4f53;
    margin:0 auto;   
}
  
.collapsedLoginWithCountry
{
    width:199px;    
    color:#4d4f53;
    margin-left:6px;
    border:1px solid #000000;
 }
.collapsedHeight
 {
    height:22px;
}

.countrySelector
{
  width:207px;
  height:22px;   
  border:1px solid #000000;
  vertical-align:top;
  float:left;
}

.arrow
{
 /* height:22px;*/
  width:10px;
  color:#4d4f53; 
  float:right;
  margin-top:10px;
}
 

.loginContainerWithoutCountry
{
    border:1px solid #000000;
	/*height:104px;*/
	
    /* width:380px; */
	color:#4D4F53;
	border-width:0px; 
	
    margin:0 auto;
	
    padding:2px 10px 10px 10px;
}

.loginContainerWithCountry
{
    border:1px solid #000000;
	height:118px;
	/*width:181px;*/
	border-width:0px; 
	/*margin-left:515px;*/
	padding:6px;
}

.container
{
  padding-top: 10px;
  vertical-align:top;  
  height: 22px;
}

 .leftSpace{margin-left:6px;}

.binData
{    
    /*height:22px;*/
    width:87px;
	margin:0 0 0 0;
}

.loginDivWithCountry
{
    padding-top:8px;
    vertical-align:top;
    margin-left:1px;
 }
 
.bgLeftButtonSmall
{

	background-image: url('../cssImages/BG_ButtonLeft_22pxHigh.gif');
   	
	width: 5px;
 	height: 22px;
	
 	

}

.bgRightButtonSmall
{

	background-image: url('../cssImages/BG_ButtonRight_22pxHigh.gif');
	
	width: 5px;
 	height: 22px;

}

.loginButton
 { 
   font-size:10px;
   /* font-family:Arial; */   
   height:22px;
   width:74px;     
   background-color: #173460;
   color:#ffffff;
   border-radius: 3px;
   background-image: url('../cssImages/BG_Middle_22pxHigh.gif');
   background-repeat: x-repeat;
   border: 0 none;  
   vertical-align: top;
 cursor:pointer; 
   
   padding: 4px 17px;
}
 .loginButton:hover
  {
   
   background-image: url('../cssImages/BG_Middle_Dark_22pxHigh.gif');
   background-repeat: x-repeat;   
  }

.cardmember
{
  color: #006890; 
  height:27px; 
  width:150px;
}
  
.data
 {
   font-size: 11px;
   height:22px;
   width: 23%; 
   /* float: left; */
   margin-bottom:4px;
   -bracket-:hack[; 
   margin-top:4px; ];
  
}
.rememberMe
{

  vertical-align:text-top;
  cursor:pointer;

  font-size: 11px;

}
 
.dataCountry
 {
    font-size:7px;
    font-family:Arial;
	height:22px;
	width:87px; 
	margin-left:1px;  
}
#close, .close
{
 width: 15px;
 height:9px; 
 margin-top:5px;
 margin-right:5px; 
 background-image: url(https://network.americanexpress.com/us/en/amexconnect/cssImages/close-icon.gif);
 background-repeat: no-repeat;
 cursor:pointer;  
}
.close
{
position:fixed;
	 margin-left:800px;
}
#helpBox
{
 
background-color: #4D4F53;
width: 251px;
height: 215px;
position:absolute;
left:550px;
top:450px;
z-index: 3000;
}

.help {
color: #009BBB !important;
}
.close
{
position:fixed;
	 margin-left:800px;
}
#helpBox
{
 
background-color: #4D4F53;
width: 251px;
height: 215px;
position:absolute;
left: 33%;
top: 100px;
z-index: 3000;
}

.help {
color: #009BBB !important;
font-size: 11px;
/* padding-top: 10px; */
/* margin-top: 10px; */
}

#wells_helpBox
{
 
background-color: #4D4F53;
width: 251px;
height: 215px;
position:absolute;
left:125px;
top:350px;
z-index: 5000;
}


{
 
background-color: #4D4F53;
width: 251px;
height: 215px;
position:absolute;
left:200px;
top:200px;
z-index: 5000;
}

.helpBoxTitle
{
font-family: BentonSansRegular,Arial,Helvetica,Sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: right;

}

.helpBoxBottomText
{
font-family: BentonSansRegular,Arial,Helvetica,Sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-bottom:19px;
width: 210px;
text-align: right;

}

.helpBoxLeftText
{
font-family: BentonSansMedium,Arial,Helvetica,Sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-left: 15px;
margin-top:77px;
}

.helpCardArt
{
  margin-top:20px;
  margin-bottom:26px; 
*margin-top:-70px;
}

.helpCardArt img
{
  height:95px;
  width:150px;
 

   
}

.alignRightHelp
{
   /* float:right; */
   margin-right:24px;
    margin-right: 9px;
    
   margin-top: 16px;
   -bracket-:hack[; 
     float:right; ];
}


.jcarousel-control
{
    width:420px;
}
.verticalAlignBottomPT1.inlineBlock {
    padding-top: 15px;
}
.alignRight
 {
     float:right;
     font-size:20px;
     font-weight:bold;
     padding-top:15px;
 }
.alignRightClose
 {
     float:right;
     -bracket-:hack[; 
     float:right; ]; /*chrome*/
	 
 }
#Div1 {
    /* width: 100%; */
    text-align: left;
    /* margin-left: -59%; */
    /* WIDTH: 60%; */
    /* margin: auto; */
}
@media screen and (max-width: 500px)
{
.countryLoginDiv.borderClass {
    width: 90%;
    min-width: 320px;
    max-width:500px
}

.log
{
  width:25%;
}
.instructionalText
{
  width:70%;
}
}