/*

    Template Name   : CHPPR
    *****************************************      
    - Fonts
    - Header
    - Hero
    - Footer
    - Responsive CSS
    
*/

/*    Fonts    */
h1 {font-size: 2.25rem;}
h2 {font-size: 1.65rem; margin-bottom: 1.5rem;}
h3 {font-size: 1.25rem;}
h4 {font-size: 1.1rem;}
.maincontent a:not(.button):not(.accordion .accordion-navigation > a) {color:#007298; text-decoration: underline;}
a:focus {outline: 1px dashed #bd4f19;}

.smallText {font-size: 0.8rem;}

/*    Header    */
.contain-to-grid, #topmast {background: #00356F;}
#topmast {
  color: #fff;
  border-top: 7px solid #BD5228;
  padding-bottom: 1rem;
}
#topmast a {color: #fff;}
.top-bar {
  background: #00356F;
  text-align: center;
}
.top-bar-section {
  display: inline-block;
  width: 94%;
}
.top-bar-section li:not(.has-form) a:not(.button) {background: transparent;}
.top-bar ul, .top-bar ul li {background: #00356F;}
.top-bar ul li a {
  color: #fff;
  text-transform: uppercase;}
/* .menu-text {color: #fff;} */
input#q {
  width: 160px;
  float: left;
  padding: 0 1rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  border: none;
  background: #4B78AA;
  color: #fff;
}
#q::-webkit-input-placeholder  {color: #9FB3CD; text-align: center;}
#q::-moz-placeholder  {color: #9FB3CD; text-align: center; opacity: 1;}
#q:-ms-input-placeholder {color: #9FB3CD; text-align: center;}
#q:focus {border: solid 1px #ccc;}
#btnG {
  float: left;
  height: 1.5rem;
  padding: 0 1.2rem;
  margin: 0;
}
.button.donate {
    float: right;
    clear: right;
    background-color: #bd4f19;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
  }

/*    Hero    */
.hero {
  position: relative;
  background: url('/research/centers/chppr/hero.jpg') no-repeat center center;
  background-size: cover;
  background-color:  #00356f;
  color: #fff;
  height: 40vh; }
.home.hero { background-color:  #fff; }
/*.hero .intro {
    position: absolute;
    bottom: 20px;
  }*/
.hero .intro div {text-shadow: 1px 1px 2px #000;}
.hero .intro > div {position: absolute;bottom: 20px;}
.hero h1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 300;
    /*text-align: right;*/ }
.hero p {
    color: #fff;
    line-height: 1.75em;
    font-weight: 200;
    margin-bottom: 2rem; }
/*.home.hero h1 {color: #000;text-shadow: 1px 1px 2px #ccc !important;}*/
/*.home.hero p {color: #333;text-shadow: 1px 1px 2px #ccc !important;}*/

/*    Main Content Region    */
  .maincontent .medium-4:not(:last-child) {border-right: 1px solid #999;}
  .panel.promo {padding-bottom: 5rem; background: transparent; border: none;}
  .panel.promo h3 {font-size: 1.2rem; line-height: 1.3}
  .panel.promo a:not(.button) {color: #00356f;}
  .button {background-color: #00356f;}
  .button.floor {position: absolute; bottom: 3rem; left: 4.5rem;}
  .mt20 {margin-top: 20px;}

#twitter-widget-0 {height: 500px !important;}

/*    Footer    */  
footer {background-color: /*#cecdcd*/ #eaeaea;
  border-bottom: 8px solid #00356f;
  padding: 1rem 0;}
  
  footer a {color:#007298!important; text-decoration: underline;}

/* WIDGETS */

/*
 ==================================================
           ACCORDIONS and TABS
 ==================================================
 */

.accordion {
    margin: 0 0 20px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

/*.accordion a:before {
    font-family: foundation-icons;
    content: "\f199";
    font-size: 1.1rem;
    padding-right: 0.5rem;
}


.accordion .active >a:before {
    content: "\f176";
}*/

/* added on 11-04-2022 */ 

.accordion-navigation a[aria-expanded="false"]:before {
    font-family: foundation-icons;
    content: "\f199";
    font-size: 1.1rem;
    padding-right: 0.5rem;
}


.accordion-navigation.active a[aria-expanded="true"]:before {
  font-family: foundation-icons;  
  content: "\f176";
  font-size: 1.1rem;
    padding-right: 0.5rem;
}

.accordion .accordion-navigation {margin-bottom: 1px !important;}
.accordion-navigation .fa {color: #bd4f19;}
.accordion-navigation .fa-chevron-right {display: inline-block;}
.accordion-navigation .fa-chevron-down {display: none;}
.accordion-navigation.active .fa.fa-chevron-right {display: none;}
.accordion-navigation.active .fa.fa-chevron-down {display: inline-block;}
.accordion .accordion-navigation > a,
.accordion dd > a {
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0.6rem 1rem;
    background: #0c356d;
    background: -moz-linear-gradient(top, #0c356d 0%, #314866 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c356d), color-stop(100%,#314866));
    background: -webkit-linear-gradient(top, #0c356d 0%,#314866 100%);
    background: -o-linear-gradient(top, #0c356d 0%,#314866 100%);
    background: -ms-linear-gradient(top, #0c356d 0%,#314866 100%);
    background: linear-gradient(to bottom, #0c356d 0%,#314866 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c356d', endColorstr='#314866',GradientType=0 );
}
.accordion .accordion-navigation > a:hover,
.accordion dd > a:hover {
    background: #0c356d;
}
.accordion .accordion-navigation.active > a,
.accordion dd.active > a {
    background: #ae6042;
    color: #ffffff;
}
.accordion .accordion-navigation > a.green,
.accordion dd > a.green,
.accordion .accordion-navigation > a.green:hover,
.accordion dd > a.green:hover,
.accordion .accordion-navigation.active > a.green,
.accordion dd.active > a.green {
    background-color: #388753;
}
.accordion .accordion-navigation > a.blue,
.accordion dd > a.blue,
.accordion .accordion-navigation > a.blue:hover,
.accordion dd > a.blue:hover,
.accordion .accordion-navigation.active > a.blue,
.accordion dd.active > a.blue {
    background-color: #44697c;
}
.accordion .accordion-navigation > a.purple,
.accordion dd > a.purple,
.accordion .accordion-navigation > a.purple:hover,
.accordion dd > a.purple:hover,
.accordion .accordion-navigation.active > a.purple,
.accordion dd.active > a.purple {
    background-color: #9460a5;
}
/*
.accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
  background: #eaeaea;
  background: -moz-linear-gradient(top, #eaeaea 0%, #f9fafb 10%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(10%,#f9fafb), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top, #eaeaea 0%,#f9fafb 10%,#ffffff 100%);
  background: -o-linear-gradient(top, #eaeaea 0%,#f9fafb 10%,#ffffff 100%);
  background: -ms-linear-gradient(top, #eaeaea 0%,#f9fafb 10%,#ffffff 100%);
  background: linear-gradient(to bottom, #eaeaea 0%,#f9fafb 10%,#ffffff 100%)
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#ffffff',GradientType=0 );
}
*/
ul.tabs {
 border-bottom: 1px solid #ccc;
 height: 40px;
 line-height: 0.5;
}
ul.tabs li.active {
 border-top: 3px solid #0c356d;
 margin-top: -3px;
 background-color: #fff;
}
/* ul.tabs li a:focus {outline: none;} */
ul.tabs li.active a {
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}
ul.tabs .tab-title > a, ul.tabs .tab-title > a:hover {background-color: transparent;}
.wrapper ul.tabs .tab-title > a {text-decoration: none;}
.wrapper ul.tabs .tab-title > a:hover, ul.tabs .tab-title > a:focus {text-decoration: underline; outline-style: none;}

/* Foundation Icons */
@font-face {
  font-family: "foundation-icons";
    src: url("/global/fonts/foundation-icons/foundation-icons.eot");
    src: url("/global/fonts/foundation-icons/foundation-icons.eot?#iefix") format("embedded-opentype"),
    url("/global/fonts/foundation-icons/foundation-icons.woff") format("woff"),
    url("/global/fonts/foundation-icons/foundation-icons.ttf") format("truetype"),
    url("/global/fonts/foundation-icons/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fi-social-facebook:before,
.fi-social-flickr:before,
.fi-social-instagram:before,
.fi-social-linkedin:before,
.fi-social-twitter:before,
.fi-social-youtube:before,
.fi-social-pinterest:before,
.fi-social-tumblr:before,
.fi-lock:before,
.fi-magnifying-glass {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}
.fi-social-facebook:before { content: "\f1c4"; }
.fi-social-flickr:before { content: "\f1c5"; }
.fi-social-instagram:before { content: "\f1cd"; }
.fi-social-linkedin:before { content: "\f1d0"; }
.fi-social-twitter:before { content: "\f1e4"; }
.fi-social-youtube:before { content: "\f1ea"; }
.fi-social-pinterest:before { content: "\f1d6"; }
.fi-social-tumblr:before { content: "\f1e3"; }
.fi-lock:before { content: "\f16a"; }
.fi-magnifying-glass:before {
  content: "\f16c"; 
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#socialgrid {
  text-align: center;
  padding-top: 20px;
}
#socialmedia {
  list-style: none;
  display: inline-block;
}
#socialmedia li {
  float: left;
  margin-right: 0.6rem;
}
#socialmedia i, #socialmedia span {
  font-size: 2.6rem;
  color: #191a1c;
  margin-right: 0.4rem;
}
#socialmedia a:hover {text-decoration: none;}
#socialmedia i.fi-social-facebook:hover {color: #3b5998;}
#socialmedia i.fi-social-twitter:hover {color: #55acee;}
#socialmedia i.fi-social-youtube:hover {color: #cd201f;}
#socialmedia i.fi-social-pinterest:hover {color: #0077b5;}
#socialmedia i.fi-social-tumblr:hover {color: #ff0084;}
#socialmedia i.fi-social-instagram:hover {color: #3f729b;}
#socialmedia i:hover {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #3D98B3,0 0 30px #3D98B3,0 0 40px #3D98B3,0 0 50px #3D98B3,0 0 75px #3D98B3;}

   #socialmedia span 
{color:#656565;}
#socialmedia span:hover:before 
{color:#007298;
transform: scale(1.1);
transition: transform .3s ease;
    text-decoration:none;
}

/*    Medium and Up    */
@media only screen and (min-width: 40.063em) {
  .top-bar-section {width: auto;}
  .top-bar-section li:not(.has-form) a:hover:not(.button) {
    margin-top: -2px;
    border-top: 2px solid #007297;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .hero.home {height: 60vh;}
  .hero .tech-img {
    height: 18rem;
    width: 18rem;
  }
  .hero .intro div {padding-left: 0;}
    .hero h1 {
      font-size: 2.5rem;}
    /*.hero p {text-align: right;}*/
  #q {border-bottom-left-radius: 0.5rem;}
  #btnG {border-bottom-right-radius: 0.5rem;}
  #socialgrid {text-align: right; padding-top: 0;}
  #socialmedia {float: right;}

}