/* CSS for Logo and Savings cta */
.header-container-wrapper {
  padding: 9px 0 2px 0;
}

.safety-header-links ul.menu li, .responsive-menus ul li {
  display: table-cell;
  padding: 0 15px;
  vertical-align: middle;
}

.header-right .header-savings-desc {
  display: none;
}



/****************************************
 -----------------------------------------
 Menu Icons- Background Images
 -----------------------------------------
 *****************************************/
.bw-desktop .responsive-menus-simple {
  display: block !important; /*To overwrite the inline css property applied by slideToggle*/
}
.responsive-menus ul li {
  box-sizing: border-box;
}
.responsive-menus ul li a {
  background-repeat: no-repeat;
}
/*Background Image for About Menu Link*/
.responsive-menus ul li.about-nav a {
  background-image: url(/sites/default/themes/custom/peh_template/images/menu/about_bg.png);
  background-position: 30px center;
}

/*Background Image for Savings Menu Link*/
.responsive-menus ul li.savings-nav a {
  background-image: url(/sites/default/themes/custom/peh_template/images/menu/savings_bg.png);
  background-position: 30px center;
}

/*Background Image for FAQ Menu Link*/
.responsive-menus ul li.faq-nav a {
  background-image: url(/sites/default/themes/custom/peh_template/images/menu/faq_bg.png);
  background-position: 35px center;
}

/*Background Image for Resource Menu Link*/
.responsive-menus ul li.resources-nav a {
  background-image: url(/sites/default/themes/custom/peh_template/images/menu/resources_bg.png);
  background-position: 10px center;
}

/*Search Image for Pharmacy Menu Link*/
.responsive-menus .primary-nav ul.menu li.pharmacy-nav input.form-submit, .responsive-menus ul li.pharmacy-nav input.form-submit {
  position: absolute;
  right: 10px;
  top: 0;
  background: url(/sites/default/themes/custom/peh_template/images/menu/search_img.png) no-repeat 0 center /100% auto;
  height: 34px;
  width: 22px;
  text-indent: -999px;
  cursor: pointer;
  font-size: 0;
}
.responsive-menus .primary-nav ul.menu li.pharmacy-nav a, .responsive-menus ul li.pharmacy-nav a, .responsive-menus .primary-nav ul.menu li.pharmacy-nav a.active {
  width: auto;
  padding: 15px 15px 15px 25px;
}
.responsive-menus .primary-nav ul.menu li.pharmacy-nav a.active {
  border-bottom: none;
}
.responsive-menus .primary-nav ul.menu li.pharmacy-nav form, .responsive-menus ul li.pharmacy-nav form {
  display: inline-block;
  width: 100%;
  position: relative;
  max-width: 177px;
}
.responsive-menus .primary-nav ul.menu li.pharmacy-nav input.form-text, .responsive-menus ul li.pharmacy-nav input.form-text {
  width: 100%;
  height: 34px;
  padding: 0 40px 0 11px;
  box-sizing: border-box;
  margin: 0;
}
/*Hide indication and medication guide link which was previously present in mobile menu*/
.responsive-menus.responsified .responsive-menus-simple li.indications-mob-nav,
.responsive-menus.responsified .responsive-menus-simple li.medication-mob-nav {
  display: none;
}

/*****************************************************************
 ------------------------------------------------------------------
 CSS for Desktop and iPad landscape
 ------------------------------------------------------------------
 *****************************************************************/
@media only screen and (min-width: 1000px) , only screen and (min-device-width: 1000px) and (orientation: landscape) {
  /*Top Menu and Main Menu CSS*/
  .safety-header-links ul.menu, .responsive-menus ul {
    display: table;
    height: 50px;
    width: 100%;
  }
  .safety-header-links ul li a.visible-lg {
    display: inline !important; /* To override common display property of visible-lg class */
  }
  .header-savings-text {
    text-align: center;
  }

  .header-savings-text div {
    margin-bottom: 5px;
  }

  .header-savings-text .btn-primary {
    max-width: 160px;
    max-height: 35px;
  }

  .header-savings-card img {
    height: 100%;
    max-height: 114px;
    max-width: 173px;
    width: 100%;
  }

  /*****************************************************************
   ------------------------------------------------------------------
   CSS for Main Menu
   ------------------------------------------------------------------
   *****************************************************************/

  .responsive-menus {
    position: relative;
    width: 100% !important; /*To overwrite inline css of the responsive menu module*/
    background-color: #005daa;
  }
  /*Box Shadow below Menu*/
  .bw-desktop .responsive-menus::after {
    bottom: -37px;
    content: "";
    position: absolute;
    width: 100%;
    background: url(/sites/default/themes/custom/peh_template/images/menu/shadow.png) no-repeat;
    height: 37px;
    z-index: 1;
  }
  .responsive-menus .primary-nav ul.menu li {
    padding: 0;
    text-align: center;
    border-right: 1px solid #7fb6e4;
    height: 50px;
  }
  .responsive-menus .primary-nav ul.menu li.about-nav {
    border-left: 1px solid #7fb6e4;
  }

  .responsive-menus .primary-nav ul.menu li, .responsive-menus .primary-nav ul.menu li.active-link:hover {
    background: #0071d1; /* Old browsers */
    background: -moz-linear-gradient(top,  #0071d1 0%, #006bc5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0071d1 0%,#006bc5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0071d1 0%,#006bc5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0071d1', endColorstr='#006bc5',GradientType=0 ); /* IE6-9 */
  }
  .responsive-menus .primary-nav ul.menu li.active-link{
    background: #01345f; /* Old browsers */
    background: -moz-linear-gradient(top,  #01345f 0%, #01345f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #01345f 0%, #01345f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #01345f 0%, #01345f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01345f', endColorstr='#01345f',GradientType=0 ); /* IE6-9 */
  }

  /*Css for Pharmacy Finder link*/
  .responsive-menus .primary-nav ul.pharmacy-menu-enabled li.pharmacy-nav, .responsive-menus .primary-nav ul.menu li.pharmacy-nav:hover, .responsive-menus .primary-nav ul.menu li.pharmacy-nav a:hover {
    background: #50aaf0;
    text-align: left;
    border-bottom: none;
  }

  /*Removing border from Indications and Medications desktop link*/
  .responsive-menus .primary-nav ul.menu li.indications-mob-nav, .responsive-menus .primary-nav ul.menu li.medication-mob-nav {
    border: none;
  }
  /*Css for the anchor tags of the main menu on the hover and active*/
  .responsive-menus .primary-nav ul.menu li a {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
  }
  .responsive-menus .primary-nav ul.menu li a {
    padding: 15px 5px 15px 25px;
    border-bottom: none;
  }

  .responsive-menus .primary-nav ul.menu li a:hover {
    background-color: #4095dc;
  }

  .responsive-menus .primary-nav ul.menu li.active-link a.active:hover {
    background-color: transparent;
  }

  /***************************************************
   ----------------------------------------------------
   CSS for 5 Menu Links including Pharmacy Finder Nav
   ----------------------------------------------------
   ***************************************************/
  /*All Menu links without pharmacy finder*/
  .responsive-menus .primary-nav ul.menu-5-links li {
    width: 15%;
  }

  /*Pharmacy Finder Menu link*/
  .responsive-menus .primary-nav ul.menu-5-links li.pharmacy-nav {
    width: 40%;
  }

  /***************************************************
   ----------------------------------------------------
   CSS for 4 Menu Links including Pharmacy Finder Nav
   ----------------------------------------------------
   ***************************************************/

  /*All Menu links without pharmacy finder*/
  .responsive-menus .primary-nav ul.menu-4-links.pharmacy-menu-enabled li {
    width: 20%;
  }

  /*Pharmacy Finder Menu link*/
  .responsive-menus .primary-nav ul.menu-4-links.pharmacy-menu-enabled li.pharmacy-nav {
    width: 40%;
  }

  /***************************************************
   ----------------------------------------------------
   CSS for 4 Menu Links excluding Pharmacy Finder Nav
   ----------------------------------------------------
   ***************************************************/
  .responsive-menus .primary-nav ul.menu-4-links li {
    width: 25%;
  }

  /*****************************************************************
   ------------------------------------------------------------------
   CSS for 3 Menu Links excluding Savings and Pharmacy Finder Nav
   ------------------------------------------------------------------
   *****************************************************************/

  .responsive-menus .primary-nav ul.menu-3-links li {
    width: 33.4%;
  }

  .header-savings-text .btn-primary a {
    height: 35px;
  }
}

/*****************************************************************
 ------------------------------------------------------------------
 CSS for Mobile and iPad potrait
 ------------------------------------------------------------------
 *****************************************************************/
@media only screen and (max-width: 999px) , only screen and (max-device-width: 999px) and (orientation: portrait) {
  #header {
    margin: 0 0 25px 0;
  }

  .header-container-wrapper {
    padding: 15px 0;
    margin: 0 10px;
    display: block;
    vertical-align: top;
  }

  .header-container{
    position: relative;
  }
  .logo-img img {
    width: 100%;
    max-width: 180px;
  }
  .mobile-savings-logo {
    width: 90px;
    height: 73px;
    position: absolute;
  }
  .dv-desktop.bw-mobile .mobile-savings-logo, .dv-desktop.bw-tablet .mobile-savings-logo{
    right: 88px;
    top: 21px;
  }
  .dv-mobile.bw-mobile .mobile-savings-logo{
    right: 50px;
    top: 6px;
  }
  .dv-tablet.bw-tablet .mobile-savings-logo{
    right: 90px;
  }
  .mobile-savings-logo img{
    width: 100%;
    height: auto;
  }

  .responsive-menus ul {
    height: 100%;
  }

  .responsive-menus.responsified span.toggler {
    top: 0;
    right: 16px;
    box-shadow: none;
    border-radius: 0;
    text-transform: uppercase;
    color: #0071d3;
    background: transparent;
    font-size: 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    margin: -60px 17px 0 0;
    float: right;
  }
  .responsive-menus.responsified span.toggler span {
    display: block;
    position: absolute;
    height: 7px;
    width: 52px;
    background: #0071d2;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  .responsive-menus.responsified span.toggler span:nth-child(1) {
    top: 0;
  }
  .responsive-menus.responsified span.toggler span:nth-child(2), .responsive-menus.responsified span.toggler span:nth-child(3) {
    top: 15px;
  }
  .responsive-menus.responsified span.toggler span:nth-child(4) {
    top: 31px;
  }
  .responsive-menus.responsified.responsive-toggled span.toggler span:nth-child(1) {
    left: 50%;
    top: 18px;
    width: 0;
  }
  .responsive-menus.responsified.responsive-toggled span.toggler span:nth-child(2) {
    transform: rotate(45deg);
  }
  .responsive-menus.responsified.responsive-toggled span.toggler span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .responsive-menus.responsified.responsive-toggled span.toggler span:nth-child(4) {
    left: 50%;
    top: 18px;
    width: 0;
  }
  .responsive-menus.responsified.responsive-toggled span.toggler {
    border-bottom: none;
  }
  .responsive-menus.responsified span.toggler span.menu-text {
    position: static;
    margin: 24px 0 0 -4px;
    background: transparent;
  }
  .responsive-menus.responsified {
    height: 0;
    position: relative;
    width: 100% !important;
  }
  .responsive-menus.responsified .responsive-menus-simple, .responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple {
    top: 25px;
    position: absolute;
    border-radius: 0;
    box-shadow: none;
    display: none;
    z-index: 99;
  }

  /*Gradient Background for Mobile Menu*/
  .responsive-menus.responsified .responsive-menus-simple li {
    background: #005fb1; /* Old browsers */
    background: -moz-linear-gradient(top,  #005fb1 0%, #0062b7 5%, #0063b6 8%, #0065bd 12%, #0067bc 15%, #0069c4 21%, #016ac5 27%, #006cc7 28%, #016dc8 43%, #0068c1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #005fb1 0%,#0062b7 5%,#0063b6 8%,#0065bd 12%,#0067bc 15%,#0069c4 21%,#016ac5 27%,#006cc7 28%,#016dc8 43%,#0068c1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #005fb1 0%,#0062b7 5%,#0063b6 8%,#0065bd 12%,#0067bc 15%,#0069c4 21%,#016ac5 27%,#006cc7 28%,#016dc8 43%,#0068c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    display: table;
  }

  /*Gradient Background for Mobile Menu When Active*/
  .responsive-menus.responsified .responsive-menus-simple li.active-link {
    background: #4187c5; /* Old browsers */
    background: -moz-linear-gradient(top,  #4187c5 0%, #408acb 5%, #408ac7 7%, #3e8cce 12%, #408ecc 15%, #418ed2 19%, #408fd2 27%, #4192d4 28%, #408fd1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4187c5 0%,#408acb 5%,#408ac7 7%,#3e8cce 12%,#408ecc 15%,#418ed2 19%,#408fd2 27%,#4192d4 28%,#408fd1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4187c5 0%,#408acb 5%,#408ac7 7%,#3e8cce 12%,#408ecc 15%,#418ed2 19%,#408fd2 27%,#4192d4 28%,#408fd1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }

  /*Background Image for About Menu Link*/
  .responsive-menus ul li.home-mob-nav a {
    background-image: url(/sites/default/themes/custom/peh_template/images/menu/home_mob_bg.png);
  }
  .responsive-menus ul li.savings-nav a {
    background-image: url(/sites/default/themes/custom/peh_template/images/menu/savings_mob_bg.png);
  }

  /*CSS for Pharmacy Navigation menu link in Mobile only*/
  .responsive-menus ul li.pharmacy-nav {
    display: table;
  }
  .responsive-menus.responsified ul li.pharmacy-nav a {
    background-image: url(/sites/default/themes/custom/peh_template/images/menu/pharmacy_mob_bg.png);
    width: 50%;
  }
  .responsive-menus.responsified .responsive-menus-simple li a {
    padding: 0 0 0 65px;
    border: 0 none;
    background-repeat: no-repeat;
    background-position: 25px center;
    text-transform: initial;
    display: table-cell;
    height: 60px;
    vertical-align: middle;
  }
  .responsive-menus ul li.pharmacy-nav form {
    display: table-cell;
    top: 13px;
    width: 50%;
  }

  .responsive-menus ul li.pharmacy-nav .form-item-zipcode{
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
  }
  .responsive-menus ul li.pharmacy-nav input.form-submit {
    background: url(/sites/default/themes/custom/peh_template/images/menu/search_img_mob.png) no-repeat 0 center /70% auto;
    left: 123px;
  }

  .responsive-menus ul li.pharmacy-nav form, .responsive-menus ul li.pharmacy-nav input.form-text {
    max-width: 150px;
  }
  .responsive-menus ul li.pharmacy-nav input.form-text {
    padding: 0 27px 0 11px;
  }

  /*CSS for Indication and Medication Links in Mobile only*/
  .responsive-menus.responsified .responsive-menus-simple li.medication-mob-nav {
    border-left: 1px solid #3482c7;
  }
  .responsive-menus.responsified .responsive-menus-simple li.indications-mob-nav a, .responsive-menus.responsified .responsive-menus-simple li.medication-mob-nav a {
    padding: 23px 10px 23px 25px;
  }
  /****************************************
   -----------------------------------------
   CSS for Safety Header Links
   -----------------------------------------
   *****************************************/
  .safety-header-links ul.menu li {
    padding: 0 10px;
    line-height: 12px;
  }
  .safety-header-links ul.menu li.pfizer-nav {
    padding: 0 10px 0 0;
  }
  .top-menu-container .safety-header-links {
    position: relative;
    height: 88px;
  }
  .safety-header-links .indications-desktop-nav {
    position: absolute;
    left: 53px;
    bottom: 12px;
  }
  .safety-header-links .medication-desktop-nav {
    position: absolute;
    left: 134px;
    bottom: 12px;
  }

  /****************************************
   -----------------------------------------
   Shadow of the Header
   -----------------------------------------
   *****************************************/
  .content-wrapper::before {
    background: url(/sites/default/themes/custom/peh_template/images/menu/shadow.png) no-repeat 0 0 transparent;
    position: absolute;
    top: 0px;
    left: 0;
    content: " ";
    height: 37px;
    width: 100%;
    background-size: 100% 58%;
  }
}

/*****************************************************************
------------------------------------------------------------------
CSS FOR iPHONE 6 STARTS HERE
------------------------------------------------------------------
*****************************************************************/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio : 2)
and (orientation : landscape){
  .mobile-savings-logo{
    right: 90px;
  }
}

/*****************************************************************
------------------------------------------------------------------
CSS FOR iPHONE 6+ STARTS HERE
------------------------------------------------------------------
*****************************************************************/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio : 3)
and (orientation : landscape){
  .dv-mobile.bw-mobile .mobile-savings-logo{
    right: 90px;
  }
}

/*****************************************************************
------------------------------------------------------------------
CSS FOR iPHONE 5 STARTS HERE
------------------------------------------------------------------
*****************************************************************/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait) {
  .responsive-menus.responsified .responsive-menus-simple li.medication-mob-nav a{
    padding: 17px 10px 23px 25px;
  }
  .dv-mobile.bw-mobile .mobile-savings-logo{
    right: 25px;
    top: 23px;
  }
  .mobile-savings-logo img{
    width: 70%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landsacpe) {
  .dv-mobile.bw-mobile .mobile-savings-logo{
    right: 50;
  }
}


/*****************************************************************
------------------------------------------------------------------
CSS FOR Savings Logo STARTS HERE
------------------------------------------------------------------
*****************************************************************/
@media only screen and (max-width: 635px) {
  .chrome.dv-desktop.bw-mobile .mobile-savings-logo, .chrome.dv-desktop.bw-tablet .mobile-savings-logo{
    right: 53px;
    top: 6px;
  }
}