/*========================================================================================
              CTA DROPDOWN & ACORDIAN
========================================================================================*/

/* default desktop cta*/
.caret{
  margin-left:5px;
  border:#000d42 5px solid;
  border-color:transparent transparent transparent #000d42;
  display:inline-block;
}
.CTAButton{
  position:relative;
}

.CTAdropdown ul li a, .CTAButton ul li a,.CTA-font18 ul li a{ 
  font-weight:400;
}


@media (min-width:768px){
  .CTAwrapper{
    position: absolute;
    width:100%;
    max-width: 100%;
    font-size:18px;
  }
}

.CTAdropdown, .CTAButton{ 
  display:inline-block; 
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight: 500;
  cursor: pointer;
  z-index:10;
  margin:.8%;
  vertical-align: top;
}
.CTAdropdown .btnImg, 
.CTAdropdown ul li a, .CTAButton{
  text-decoration:none;
  color:#000d42;
  border: #000d42 2px solid;
  background-color:#fff;
  padding: .7em;
  text-align: center;
  box-sizing: border-box;
}
.CTAdropdown ul{
  margin:0;
  padding:0;
  transition: max-height .5s;
  max-height:0;
  overflow:hidden;
}
.CTAdropdown:hover ul{ max-height:400px; }
.CTAdropdown ul li{ list-style: none; }
.CTAdropdown ul li a{
  display: block;
  border-top:0px;
}

.CTAdropdown ul li a:hover{
  color:#fff;
  background-color:#000d42;
  border: #000d42 2px solid;
  border-top: 0px !important;
}



.CTAdropdown #minus, 
.CTAdropdown #plus{ 
  width:5px; 
  padding-right:.5em;
}

.CTAdropdown #plus,
.CTAdropdown:hover #minus{
  display:inline-block;
}

.CTAdropdown:hover #plus,
.CTAdropdown #minus{
  display:none;
}

.CTAdropdown #minus, 
.CTAdropdown #plus{ 
  width:5px; 
  padding-right:.5em;
}



.CTAdropdown .minus, 
.CTAdropdown .plus{ 
  width:5px; 
  padding-right:.5em;
}

.CTAdropdown .plus,
.CTAdropdown:hover .minus{
  display:inline-block;
}

.CTAdropdown:hover .plus,
.CTAdropdown .minus{
  display:none;
}

.CTAdropdown .minus, 
.CTAdropdown .plus{ 
  width:5px; 
  padding-right:.5em;
}

.CTAdropdown span.plusMinus{
  display: inline-block;
  width: 8px;
  padding:0;
}
.CTAdropdown span.plusMinus:after{
  position: relative;
  content: '+'
}

.CTAdropdown .open span.plusMinus:after {
  content: '-';
}

@media (min-width:768px){
  .CTAdropdown:hover span.plusMinus:after{
    content: '-';
  }
}

/*================================ ALTERNATIVE CTA STYLES ============================================*/
/*  blue  inverse*/
.CTAdropdown[data-color="default inverse"] .btnImg, 
.CTAdropdown[data-color="default inverse"] ul li a, 
.CTAButton[data-color="default inverse"]{
  color:#fff;
  border-color: #fff;
  background-color:#000d42;
}
.CTAdropdown[data-color="default inverse"] ul li a:hover{
  color:#000d42;
  background-color:#fff;
}
.CTAButton[data-color="default inverse"] .caret{
  border:#fff 5px solid;
  border-color:transparent transparent transparent #fff;
}

/*  black */
.CTAdropdown[data-color="black"] .btnImg, 
.CTAdropdown[data-color="black"] ul li a, 
.CTAButton[data-color="black"]{
  color:#fff;
  border-color: #fff;
  background-color:#000;
}
.CTAdropdown[data-color="black"] ul li a:hover{
  color:#000;
  background-color:#fff;
}
.CTAButton[data-color="black"] .caret{
  border:#fff 5px solid;
  border-color:transparent transparent transparent #fff;
}



/*  black */
.CTAdropdown[data-color="black inverse"] .btnImg, 
.CTAdropdown[data-color="black inverse"] ul li a, 
.CTAButton[data-color="black inverse"]{
  color:#000;
  border-color: #000;
  background-color:#fff;
}
.CTAdropdown[data-color="black inverse"] ul li a:hover{
  color:#fff;
  background-color:#000;
}
.CTAButton[data-color="black inverse"] .caret{
  border:#000 5px solid;
  border-color:transparent transparent transparent #000;
}


/*  transparent */
.CTAdropdown[data-color="transparent"] .btnImg,
.CTAdropdown[data-color="transparent"] ul li a, 
.CTAButton[data-color="transparent"]{
  background-color: transparent;
  color:#000;
}
@media (max-width: 767px){
  .CTAdropdown[data-color="transparent"] .btnImg,
  .CTAdropdown[data-color="transparent"] ul li a, 
  .CTAButton[data-color="transparent"]{
    background-color: #fff;
    color:#000;
  }
}

/*  white */
.CTAdropdown[data-color="transparent white"] .btnImg, 
.CTAdropdown[data-color="transparent white"] ul li a, 
.CTAButton[data-color="transparent white"]{
  color:#fff;
  border-color: #fff;
  background-color:transparent;
}
.CTAButton[data-color="transparent white"] .caret{
  border:#fff 5px solid;
  border-color:transparent transparent transparent #fff;
}

/*  translucent white */
.CTAdropdown[data-color="translucent white"] .btnImg{
  background-color: transparent;
}
.CTAdropdown[data-color="translucent white"] ul li a, 
.CTAButton[data-color="translucent white"]{
  background-color: rgba(255, 255, 255, 0.6);
}
.CTAdropdown[data-color="translucent white"] ul li a:hover{
  background-color: rgba(0, 0, 0, 0.6);
}

/*  tanslucent black */
.CTAdropdown[data-color="translucent black"] .btnImg{
  background-color: transparent;
}
.CTAdropdown[data-color="translucent black"] ul li a, 
.CTAButton[data-color="translucent black"]{
  background-color: rgba(0, 0, 0, 0.4);
}
.CTAdropdown[data-color="translucent black"] ul li a:hover{
  color:inherit;
  background-color: rgba(255, 255, 255, 0.6);
}

/* DROP DOWN BERAKPOINT styling */
@media (min-width: 1200px){
  .CTAdropdown, .CTAButton{ font-size: .77777777777em; /*14px*/ }
  .CTA-font18{ font-size:1em; /*18px*/ }
}

@media (max-width: 1200px) and (min-width:768px){
  .CTAdropdown, .CTAButton{ font-size: .7em; }
  .CTA-font18{ font-size:.9em }
}

              /* divison pages overrides */
              @media (max-width: 1050px) and (min-width:900px){
                #divisionPage_RegionTop .CTAdropdown, .CTAButton{ font-size: .6em; }
                #divisionPage_RegionTop .CTA-font18{ font-size:.8em }
              }
              @media (max-width: 900px) and (min-width:768px){
                #divisionPage_RegionTop .CTAdropdown, .CTAButton{ font-size: .5em; }
                #divisionPage_RegionTop .CTA-font18{ font-size:.7em }
              }


@media (max-width: 767px){
  .CTAwrapper{
      width:96%;
      margin:0 auto;
      text-align: center;
  }
  .CTAdropdown, .CTAButton {
      font-size: 1.1em;
      font-weight: bold;
      letter-spacing: 0px;
      position:relative;
      margin:0 auto;
      width: 90%;
      margin-top:.5em;
  }
  .CTAdropdown ul li a, .CTAButton ul li a{ font-size: .9em;}

  .CTAButton.half{ width:48%; margin:0 .8%;}
  .CTAButton.half:first{ margin-right:1%; }

  .caret{ display:none; }

  .CTAdropdown ul.accordianMenu-list, .CTAdropdown:hover ul.accordianMenu-list{ max-height:800px; }

  .CTAdropdown .btnImg,.CTAButton{
    padding: .8em .5em;
    text-align: center;
  }

  .accordianMenu-list{ display:none;}

  .CTAdropdown ul li a, .CTAdropdown ul li a:hover{
    border:0px 0 2px 0;
    border-style: solid;
    padding: 3%;
  }
}


@media screen and (max-width:600px){
  .CTAButton.half{ margin:0 .6%; }
}

@media screen and (max-width: 540px){
  .CTAdropdown, .CTAButton, .CTAButton.half{ font-size: .9em; }
}










/*========================================================================================
              COPY STYLES
========================================================================================*/

.e1, .h1, .sc1, .shoph1{ pointer-events: none; }

.e1{
  font-size: 1.2em;
  font-weight: bold;

}
.h1{
  font-size: 3em;
  font-weight: bold;
  margin: .2em 0 .5em 0;
}
.sc1{
    font-size: 1.2em;
    font-weight: 100; 
    margin-bottom: 1em;
}
.shoph1{
  font-size: 1.2em;
    font-weight: bold; 
    text-transform: uppercase;
}

.copyWrap{
  text-align: center;
  position:relative;
  padding: 0 5%;
}

.copyWrap.copyClickThrough{ pointer-events: none; }

.e1:hover, .h1:hover, .sc1:hover, .shoph1:hover{ text-decoration: none; }




/*COPY STYLES CHAGES AT DIFFERENT BREAKPOINTS*/
@media screen and (max-width: 1300px) and (min-width:1000px){
  .h1{
    font-size: 2.6em;
      margin: .2em 0 .4em 0;
  }
  .sc1,.shoph1{ font-size: 1.1em; }
}
@media screen and (max-width: 1000px) and (min-width:768px){
  .h1{
    font-size: 2em;
      margin: .1em 0 .3em 0;
  }
  .sc1,.shoph1{ font-size: .9em; }
}
@media screen and (max-width: 400px){
  .h1{ font-size: 2.2em; }
  .sc1,.shoph1{ font-size: 1em; }
}

@media screen and (min-width:768px){
  .whiteFont-at-lg{ color:#fff; }
}

@media screen and (max-width: 767px){
  .copyWrap{
    padding: 2% 2%;
    width:96%;
    text-align: center;
  }

  .blackFont-at-md{ color:#000; }
  .whiteFont-at-md{ color:#fff; }
}





/*========================================================================================
                  KEYLINE
========================================================================================*/
.keyline{
  border:0px;
  margin:40px 0;
}
.keyline[data-color="blue"]{ border:#000d42 solid 3px; }
.keyline[data-color="grey"]{ border:#ccc solid 3px; }
.keyline[data-color="black"]{ border:#000 solid 3px; }
.keyline[data-color="black-1px"]{ border:#000 solid 1px; margin:10px 0; }





/*========================================================================================
          Flex Attributes
========================================================================================*/

.flexCenter{
  display: -webkit-flex;
  display:flex;
  -webkit-align-items: center;
  align-items:center;
}

@media only screen and (min-width:768px){
  .flexOrder2{
    -webkit-order: 2;
    order: 2;
  }
  .flexOrder1{
    -webkit-order: 1;
    order: 1;
  }
  .flexOrder2, .flexOrder1{
  display: -webkit-flex;
  display:flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
}



/*========================================================================================
          Other Useful Styles
========================================================================================*/

.alignCenter{
  text-align: center;
}