html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 65px 0 0 0;
    overflow-x: hidden; 
}

@media (min-width:451px) and (max-width:550px) {
   .banner-div {
      padding-top: 1rem !important; 
   }
 }
@media (min-width:401px) and (max-width:450px) {
   .banner-div {
      padding-top: 6rem !important; 
   }
 }
@media screen and (max-width: 400px) {
   .banner-div {
      padding-top: 3rem !important; 
   }
 }

.btn-primary:active {color:none !important;}
.btn-primary:hover {border-color:none !important;}
.btn-primary.focus, .btn-primary:focus {box-shadow:none !important;}

/*.navbar-brand {background-color:red !important;}*/

/*style external links*/
a:not(
        [class*="navbar-brand"],
        [class*="cc-footer-social-icon"],
	[class*="footerCTAbutton"],
	[class*="card-text-btn"],
	[href^="#"],
	[href^="/"],
	[href*="localhost"],
	[href*="prod.cmplxsys.w3.uvm.edu"],
        [href*="staging.cmplxsys.w3.uvm.edu"],
        [href*="vermontcomplexsystems.org"]
)::after {
  content: '\2197';
}


/*footer*/

.cc-footer {
  background-color: #154734 !important;
}

.cc-contact-footer-p {
   color: #fff !important;
}

.footerCTAbutton {
   color: #212b36 !important;
   background-color:rgba(255, 209, 0, .9) !important; /*rgba(255, 209, 0, 1)*/
 }

.footerCTAbutton:hover {
      color: #212b36 !important;
       background-color:rgba(255, 209, 0, 1) !important; /*rgba(255, 209, 0, .8)*/
     }

.cc-footer-copy {
    margin-bottom: 10px;
}

.footer-item {margin-right: 10px;}

/*
.cc-footer-social-icon {
    background-color: #FFD100 !important;
}
*/

/*end footer*/

#accordion {
   margin: 0 auto;
   max-width: 500px;
}

.lead {
   color: #000000 !important; /* #212b36 !important; */
   letter-spacing: normal;
}

.card-body a, .lead#lead a, .group_lead a {
color: #154734 !important;
}

.card-body a:hover {
   color: #154734 !important;
   text-decoration: none !important;
}

.lead#lead a:hover, .group_lead a:hover {
   color: #154734 !important;
   text-decoration: underline !important;
}   
 
.bg-dark {
   font-size: 110% !important;
}
.cc-footer-link-lg {
   font-size: 150% !important;
}

.bg-dark a, .cc-footer-link-lg a {
   color:rgba(255, 209, 0, 1) !important; /*rgba(255, 209, 0, 1)*/
}

.bg-dark a:hover, .cc-footer-link-lg a:hover {
   color:rgba(255, 209, 0, .9) !important; /*rgba(255, 209, 0, .9)*/
}

.footer-links a {
   color:rgba(255, 255, 255, 1) !important;
}

.footer-links a:hover {
   color:rgba(255, 255, 255, .8) !important;
}

.my-container {
   margin-left: 5rem !important;
   margin-right: 5rem !important;
}

/******START IMG-TXT STREAM HORIZONTAL CARDS*******/

.img-txt-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body h2 {
   color: #212b36 !important;
}

.img-txt-card a.d-block h2:hover  {
   color: #154734 !important; 
}

.img-link {
   border-bottom: 3px solid transparent;
}

.img-link:hover {
   border-bottom: 3px solid #154734;
}

/*******END IMG-TXT STREAM HORIZONTAL CARDS*****/


/**************START CARDS************/
.card-img-top {
    /*width: 100%;
    height: 50vh;*/
    object-fit: contain;
}

.card {
   width: 100%;
   border: none !important;
   border-radius: 0.25rem !important; 
}

.card-title {
   font-weight: 500;
   font-size: 120%;
}

p.card-description {
   /*font-size: 120% !important;*/
}

.card:hover, .card-body:hover, .card-title:hover {  /*.card-body a:hover, */
   text-decoration: none !important;
}

.card-body h5, .card-body p {
   color: #212b36 !important;
}

.card:hover .card-title {
   color: #154734 !important; 
}

/*card picture*/
picture img {
  width: 100%;
}

/**************END CARDS************/

/********* start cards_block (used on home page w/ images)*********/
.card-block .card-text a{
   color: #212b36 !important;
 }
.card-block .card-text a.btn {
   color: #212b36 !important;
}
.card-block:hover .card-title {
   color: #212b36 !important;
}
.card-block:hover .card-text a.btn {
   color: #154734 !important; 
}
.card-block:hover .card-text a.d-inline {
   color: #154734 !important; 
}

.card-block img {
   transition: transform .25s;
   width: 100%;
 }
.card-block:hover img {
   transform: scale(1.05);
 }
 .card-block:hover:after {
   opacity: 1;
 }

/**************** end cards_block ****************/

/****************START TEXT CARDS****************/
.text-link {
   text-align: center !important;
}

.card-txt {
   border-radius: 15px !important;
}

.cards-text .card-body {
   text-align: left !important;
}

.cards-text a:hover {
   text-decoration: underline !important;
}

.cards-text .card {
background-color: rgba(255, 209, 0, .4) !important;
}

.cards-text .card:hover .card-title {
   color: #212b36  !important; /*#495057*/
}

.cards-text .card:hover .card-description {
   color: #212b36  !important; /*#495057*/
}

.card-text-btn, a.card-text-btn {
   color: #f6f6f6 !important;
   background-color: rgba(33, 43, 54, 1) !important;
 }

.card-text-btn:hover, a.card-text-btn:hover {
      color: #f6f6f6 !important;
      background-color: rgba(33, 43, 54, .8) !important;
     }


/****************END TEXT CARDS****************/

/**************START RESEARCH CARDS************/

.research-cards .card:hover .research-link {
   border-bottom: 3px solid #154734;
}

/*https://stackoverflow.com/questions/43816331/bootstrap-4-card-image-zoom*/

.research-cards .card-title, .research-cards .card-description {
   padding-left: 0 !important;
   padding-right: 0 !important;
   width: 100%;
}

.research-cards .research-link {
   overflow: hidden;
   position: relative;
   border-bottom: 3px solid transparent;
 }
 .research-cards .research-link:after {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(255,255,255,0.3);
   opacity: 0;
   transition: opacity .25s;
 }
 .research-cards .card img {
   transition: transform .25s;
   width: 100%;
 }
 .research-cards .card:hover img {
   transform: scale(1.2);
 }
 .research-cards .card:hover:after {
   opacity: 1;
 }

.research-cards .card-title {
   margin-bottom: 0;
}

.research-cards .card-text {
   margin-top: 0;
}

/************END RESEARCH CARDS******************/


/****************START BIO CARDS****************/

.bio-cards .card {
   background-color: rgba(255, 209, 0, .4) !important;
   box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25) !important;
   text-align left !important;
 }

.bio-cards .card:hover {
   /*border: 1px solid #d3d3d3 !important;*/
}

.bio-cards .card:hover .card-body {
   /*box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25) !important;*/
}

.bio-cards .bio-img {
   border-bottom: 3px solid transparent;
}

.bio-card:hover .bio-img {        
   border-bottom: 3px solid #154734;
}

.person-div a:not(.bio-btn, .social) {
   color: rgba(21, 71, 52, 1) !important; 
   text-decoration:none;
}

.person-div a:hover:not(.bio-btn:hover, .social:hover) {
   text-decoration:underline;
}

/****************END BIO CARDS****************/

/****************START BIO BUTTONS****************/
.bio-btn, a.bio-btn {
   color: #212b36 !important;
   background-color: rgba(255, 209, 0, .4) !important; /*rgba(255, 209, 0, .4)*/
 }

.bio-btn:hover, a.bio-btn:hover {
      color: #212b36 !important;
       background-color: rgba(255, 209, 0, .2) !important; /*rgba(255, 209, 0, .2)*/
     }

/* font awesome icons in a tags */
a.social {
   color: #212b36 ! important;
}

a.social:hover {
   color: #154734 !important; 
}

/****************END BIO BUTTONS****************/