@import url("https://use.typekit.net/uco5kmo.css");

#page{
    background: #0C3148;
}

#page u{

text-decoration: none;
 border-bottom: 2px solid #0c3148;
}

#page_content {
  font-family: "proxima-nova", sans-serif;
  font-weight: 500;
  font-style: normal; }
 

#page h1, #page h2 {
  font-weight: 700; }

p.lead{
    color:#A8C813;
}

#page_content p {
    font-size:20px;
}

#page_content .well{
    font-size:20px;
}

#page_content .well h3 {
  font-size: 1.75em;
}

#page_content .well h3 {  font-size: 1.5em;
}


#page_content h3.dkblue{
    color:#0C3148;
}

.breadcrumb a, .breadcrumb a:visited, .breadcrumb a:active, .breadcrumb a:focus, .breadcrumb a:hover {
    color: #fff;
    border-color: #fff;
}

#global_footer {
    padding:0;
}
#microsite_header .navbar .nav>li{
    float: left;
}

#microsite_header .navbar .nav>li a{
   font-size:1.25em;
}

#microsite_header .navbar-inner {
    background-color: transparent;
    box-shadow: none;
    border:none;

}

#microsite_header .navbar .nav > li a:link, #microsite_header .navbar .nav > li a:visited  {
    color:#fff;
     text-decoration: none;
    text-shadow: none;
    padding-left:1em;
    padding-right:1em;
    font-weight: 700;
}

#microsite_header .navbar .nav > li a:hover, #microsite_header .navbar .nav > li a:active {
    color:#A8C813;
}


#microsite_header .navbar .nav > li:first-of-type a {
    padding-left:0;
}


#microsite_header .navbar .nav>li:last-child{

float:right;
    border-radius:0.5em;
    background: #A8C813;
    color: #222;
    text-decoration: none;
    text-shadow: none;
    margin-left:0.5em;
    font-weight: 700;
}

#microsite_header .navbar .nav>li:last-child a{
    color: #222;
}


#microsite_header .navbar .nav > li:last-of-type:hover {
    border-radius:0.5em;
    background: #fff;
  
}
#microsite_header .navbar .nav > li:last-of-type:hover a{
      color: #0C3148;
}



@media (min-width: 48em) {
  #page h1.big {
    font-size: 4em; } }
.breakout-bg {
  background: #0C3148;
  color: #fff; 
    font-weight: 700;}

.breakout-bg.alternate{
    color:#222;
    background:#fff;
}


.breakout-bg.alternate-two{
    color:#0C3148;
    background:#A8C813;
}


.breakout-bg.alternate-three{
    background:#51A1D9;
    color: #0C3148;
}


.breakout-bg.alternate-three a:link, .breakout-bg.alternate-three a:visited{
    color: #222;
    border-bottom:1px solid #222;

}

.breakout-bg.alternate-three a:hover, .breakout-bg.alternate-three a:active{
    color: #0C3148;
    border-bottom:1px solid #0C3148;
}


.breakout-bg.bg.yellow {
    background-color: #dce169;
}


a[role="button"].primary {
     color: #222;
    border: 0;
    background-color: #A8C813;
    border-radius: 0.5em;

}


a[role="button"].primary:hover {
     color: #222;
    background-color: #fff;
}



details summary {
    background: #A8C813;
    border-radius: 0.5em;
    color:#0C3148;
    font-weight: 700;
    margin-bottom: 1em;
    padding-left:4rem;
}


details>summary::before {
    border: 1px solid;
    border-radius: 500em;
    content: "+";
    font-size: 2rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    position: absolute;
    top: 0.75rem;
    color: #fff;
    border-color: #fff;
    border-width: 0.125rem;

}


details summary[aria-expanded="true"]:before, .no-details details.open>summary:before {
    content: "-";
    padding: 0.25rem 0.75rem;
    color: #fff;
    border-color: #fff;
}

details > div{
    background:#fff;
    padding:1em;;
    margin-bottom:1em;
}


a.overlay-image {
    border-bottom: none!important;
}

.overlay-image .caption {
    position: static;
    background: #A8C813;
    color:#0C3148;
    border-bottom-left-radius: 0.5em;
     border-bottom-right-radius: 0.5em;
    font-weight:700;
}



.quote{
    font-size:2em;
    font-weight:700;
    line-height: 120%;
}

#home-nav-buttons a {
  color: #fff !important;
  font-size: 1.25em;
  font-weight: 700;
  border: 0;
  line-height: 130%;
  box-shadow: none;
  background: transparent; }

.llb-block {
  display: none;
  padding-bottom: 0.5em; }

.llb-block.active {
  display: block;
  padding-bottom: 0.5em; }

.llb-block .container{
    padding:1em;
}

#llb-buttons a[role=button] {
  color: #fff;
  box-shadow: none;
  text-shadow: none;
  border: 0;
  margin-top: 1.5em;
  min-height: 85px;
  line-height: 125%; }

#llb-buttons a {
  background: transparent; }

#llb-buttons a:hover {
  transform: scale(1.25); }

@media (min-width: 37.5em) {
  #llb-buttons a[role=button] {
    min-height: auto; } }
.llb-block.active .front-content, .llb-block .flip-content {
  display: none; }

.front-content .llb-times  .twelve{
    background:#A8C813;
    padding:0.5em;
    border-radius:0.5em;
    line-height: 150%;
    margin-bottom:1em;
}

.front-content .llb-times  .twelve a {
    cursor: pointer;
    color:#222;
    font-size:1em;
    font-weight:700;
    border-bottom:none!important;
  
}


.well {
  background:rgba(12, 49, 72,0.75);
  border-radius: 0.5em;
  color: #fff; 
font-weight: 700;}

.well h2, .well h3{
       color:#fff;
  }
.well h3{
    font-weight:700;
}



.breakout-bg a:link,  .breakout-bg a:visited{
       color:#697E0C;
    border-bottom:1px solid #A8C813;
  }


.breakout-bg a:hover,  .breakout-bg a:active{
       color:#fff;;
    border-bottom:1px solid #fff;
  }

.breakout-bg a.lightblue-link:link,  .breakout-bg a.lightblue-link:visited{
       color:#51A1D9;
    border-bottom:1px solid #51A1D9;
  }


.breakout-bg a.lightblue-link:hover,  .breakout-bg a.lightblue-link:active{
       color:#fff;;
    border-bottom:1px solid #fff;
  }





.well a:link, .well a:visited{
       color:#fff!important;
    border-bottom:1px solid #fff!important;
  }

.well a:hover, .well a:active{
       color:#fff!important;
    border-bottom:1px solid #fff!important;
  }
  

  

.well.blue{
    background:#51A1D9;
    color:#0C3148;
}

.well.blue h2{
    color:#0C3148;
}

#page .well a[role="button"].primary:link, #page  .well a[role="button"].primary:visited,
#page .well a[role="button"].primary:hover, #page  well a[role="button"].primary:active{
     color: #222!important;
     font-weight:700;
}


a.blue-link:link, a.blue-link:visited{
       color:#0C3148!important;
    border-bottom:1px solid #0C3148!important;
  }

 a.blue-link:hover,  a.blue-link:active{
       color:#222!important;
    border-bottom:1px solid #222!important;
  }




.well.alternate{
     background:#fff!important;
    color:#0C3148;
    border:0;
}


.well.alternate a:link, .well.alternate a:visited{
	  color: #0C3148!important;
	  border-bottom:1px solid #0C3148!important;
}

.well.alternate a:hover, .well.alternate a:hover{
	  color: #A8C813!important;
	  border-bottom:1px solid #A8C813!important;
}

.well.blue a:link,.well.blue a:visited{
    	  color: #0C3148!important;
	  border-bottom:1px solid #0C3148!important;
}

.well.blue a:hover,.well.blue a:active{
    	  color: #fff!important;
	  border-bottom:1px solid #fff!important;
}


.well.alternate h2
.well.alternate h3{
    color: #0C3148;
}


.well.alternate-two{
background:#456374 !important;
}



.highlight-green{
       color:#A8C813
}
.highlight-white{
       color:#fff!important;
}

.highlight-grey{
       color:#757575!important;
}

.quote-wrap{
    border-radius:0.5em;
    width:90%;
    margin:0 auto;
    padding:1em;
    background:#A8C813;
    color: #0C3148;
}


.tips-slide {
 display:flex;
    color:#fff;
      align-items: center;
  justify-content: center;
    text-align:center;
    background:#0C3148;
    font-size:1.75em;
    border-radius: 0.5em;
    line-height:130%;
 }


.tips-slide img.right{
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.tips-slide img.left{
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}


.tips-slide p{
    margin-top:0.25em;
}


.tips-slide strong{
   font-size:2em;
    font-weight: 700;
    color:#A8C813;
}



.reveal {
  position: relative;
  opacity: 0; }

.reveal.active {
  opacity: 1; }

.active.fade-bottom {
  animation: fade-bottom 0.8s; }

.active.fade-left#one {
  animation: fade-left 1s; }

.active.fade-left#two {
  animation: fade-left 1.6s; }

.active.fade-left#three {
  animation: fade-left 2s; }

.active.fade-left#four {
  animation: fade-left 2.5s; }

.active.fade-left#five {
  animation: fade-left 2.9s; }

.active.fade-right {
  animation: fade-right 1s ease-in; }

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

.breakout-area.beactive-wrap{
    background:url(/-/Media/Images/socialcareandhealth/public%20health/livelongerbetter/beactive-bg.jpg) no-repeat;
    background-size:cover;
    font-weight:700;
}

.breakout-area.hydration-wrap{
    background:url(/-/Media/Images/socialcareandhealth/public%20health/livelongerbetter/hydration-bg.jpg) no-repeat;
    background-size:cover;
    font-weight:700;
}

.breakout-area.partner-wrap{
    background:url(/-/Media/Images/socialcareandhealth/public%20health/livelongerbetter/partnerbg.jpg) no-repeat;
    background-size:cover;
    font-weight:700;
}

.breakout-area#stayactiveeveryday{
    background:url(/-/Media/Images/socialcareandhealth/public%20health/livelongerbetter/staysteadybg.jpg) no-repeat;
    background-size:cover;
    font-weight:700;
}



.primary.closeBtn{
    background:#A8C813;
    color:#0C3148;
    border:0;
    text-shadow: none;
    box-shadow: none;
}

.thick-border-top{
    border-top:1em solid #fff;
}

.thick-border-bottom{
    border-bottom:1em solid #fff;
}

.pad-double-bottom{
    padding-bottom:2em;
}




@media only screen and (min-width:32em) {
	.info-boxes-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 200px;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
}
.info-boxes {
	-ms-flex-preferred-size: 21%;
	flex-basis: 21%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	color: #fff;
	border: 1px solid #999;
	text-align: center;
	-webkit-transition: all 0.8s;
	-o-transition: all 0.8s;
	transition: all 0.8s;
	position: relative;
    margin:0!important;
}
.info-boxes:hover, .info-boxes.active {
	background: #A8C813;
}
.info-boxes:hover p, .info-boxes.active p {
	color: #0C3148!important;
}
.info-boxes-container#first .info-boxes.active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(240, 171, 0, 0);
	border-top-color: #A8C813;
	border-width: 10px;
	margin-left: -10px;
}
.info-boxes-container#second .info-boxes.active:before {
	top: 0%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: none;
	border-bottom-color: #A8C813;
	border-width: 10px;
	margin-left: -10px;
	margin-top: -20px;
}
.info-boxes p {
	width: 80%;
	text-align: center;
	    font-size:1em;

	line-height: 140%;
	color: #222;
	-webkit-transition: color 0.4s;
	-o-transition: color 0.4s;
	transition: color 0.4s;
}
.info-boxes.active p, .info-boxes:hover p {
	color: #000;
}
@media only screen and (max-width:600px) {
	.info-boxes-container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		height: 200px;
	}
}
.info-boxes {
	background: #fff;
	padding: 5px;
	border: 1px solid #fff;
	font-family: din-2014, sans-serif;
	font-size: 18px;
	padding-top: 25px;
	min-width: 0;
}
.info-boxes-container svg {
	fill: #A8C813;
	width: auto;
	max-height: 68px;
	-webkit-transition: fill 0.4s;
	-o-transition: fill 0.4s;
	transition: fill 0.4s;
}
.info-boxes-container svg#glasses {
	width: 75px;
}
.info-boxes-container .info-boxes:hover svg, .info-boxes-container .info-boxes.active svg {
	fill: #0C3148;;
}
.info-box-details-container {
	margin: 0;
}
.info-box-details {
	padding: 0;
	color: #222;
	border: 1px solid #fff;
	line-height: 180%;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	background: #fff;
	display: none;
}
.info-box-details.show-on-phones {
	display: block;
}
ul.info-box-details-container, ul.info-box-details {
	margin-top: 0 !important;
}

.info-box-details {
		padding: 1em;
	}


@media only screen and (min-width:32em) {
	.info-box-details-container {
		margin: 0 1.5%;
	}
	
	.info-box-details p {
		width: 80%;
	}
	.info-box-details.active.show-on-phones {
		display: block !important;
	}
}
.info-box-details h2 {
	color: #0C3148 !important;
	-webkit-transition: color 0.4s;
	-o-transition: color 0.4s;
	transition: color 0.4s;
}
.info-box-details-container {
	overflow: hidden;
}
.info-box-details.active {
	display: block;
	-webkit-animation: slide-in .3s ease-out;
	animation: slide-in .3s ease-out;
}
@-webkit-keyframes slide-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes slide-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}


a[href$=".pdf"]:after, a[href$=".csv"]:after, a[href$=".doc"]:after, a[href$=".docx"]:after, a[href$=".xls"]:after, a[href$=".xlsx"]:after, a[href$=".rtf"]:after, a[href*="LinkViewer.aspx"]:after, a[href*="linkviewer.aspx"]:after {
    border: 1px solid #fff;
    color: #fff;
}

.llb-times a{
    padding-right:75%;
}

.font-125{
    font-size:1.25em;
}


/*mobile updates Sept 24 */

@media (max-width: 37.5em) {
    #home-nav-buttons  .three.columns,
    #llb-buttons .three.columns{
        width: 50%;
    }
    
    .hydration-buttons#llb-buttons  .three.columns{
         width: 33.3%;
    }
    
    .tips-slide strong {
    font-size: 2em;
    font-weight: 700;
    color: #A8C813;
    display:none;
}
    
    .tips-slide span{
            
         font-weight: 700;
    color: #A8C813;
    }
    
    
    .front-content .llb-times  .twelve a {
    white-space: pre-wrap;
  
}

    .d-block{
        display:block;
        white-space: normal;
    }
    
    img.scale-with-grid.hyd-ico{
        width:50px;
        margin:0 auto;
    }
    
    
    .mob-center{
        text-align: center;
    }
    
}


@media (min-width: 37.5em) {
    .tips-slide span{
            
        display:none;
    }
    
    
      .tips-slide strong {
display:block;
}
}


   .display-flex{
	display:block;
   }


@media(min-width:37.5em){
   .display-flex{
	display:flex;
   }
}

/* QUOTES */

.big-quote p {
    rotate: -3deg;
}

.big-quote.yellow {
	background: #0c3148;
}

.big-quote p span {
    line-height: 2;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 3px 10px;
    
}

.big-quote.blue p span {
    background: #0c3148;
    color: #dce169;
   
}

.big-quote.yellow p span {
    background: #dce169;
    color:  #0c3148;
}


.big-quote:before {
	content: "";
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    top:50px;
    right: 10px;
    background-repeat: no-repeat;
    background-size: contain; 
}


.big-quote.blue:before {
    background-image: url(/-/media/files/CSS/microsites/live-longer-better/llb-quote-left-blue);
 }

.big-quote.yellow:before {
    background-image: url(/-/media/files/CSS/microsites/live-longer-better/llb-quote-left-yellow);
}

.big-quote p:after {
	content: "";
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 60px;
	bottom: -30px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.big-quote.blue p:after {
	background-image: url(/-/media/files/CSS/microsites/live-longer-better/llb-quote-right-blue);
  }

.big-quote.yellow p:after {
	background-image: url(/-/media/files/CSS/microsites/live-longer-better/llb-quote-right-yellow);
  }

@media only screen and (min-width:48em){
	
    .columns.eight .big-quote {
    	margin: 0 5em 0 2em;
 	}
}