/*---------------------------------
------ ARTICLES STYLES ----
----------------------------------*/




/*--- QUOTATION TEXT STYLES
---------------------------------*/


.h2quotebox {
		display:flex;
    font-family: 'Roboto Slab', serif;
  	font-weight: 400;
    font-size: 25px;
    line-height: 48px;
    color: #333;
    margin-bottom: 20px;
}
.doublequote {
		color: #01B0B9;
    font-size: 55px;

}

.doublequoteLeft {
		position: relative;
  	bottom: -24px;
}

.doublequoteRight {
		position: relative;
  	bottom: -24px;
}
.quotereferenceName {
	color: #01B0B9;

}


.quoteborderdarkteal {
	border-left: solid #00465A; /* Dark Teal */
}


.quoteborderteal {
	border-left: solid #00B0B9; /* Brighthouse Green */
}

.quoteborderleft {
		text-align: left;
    font-weight: 200;
    padding: 0px 0px 10px 20px;
}

.itagname {
		text-transform: uppercase;
    font-size: x-large;
    font-weight: 400;
}

.quotetagname {
    font-family: 'Roboto', serif;
    font-size: x-large;
    font-weight: 400;
}


/*--- H STYLES
----------------------------------*/
.h2fontsize {
	font-size: 45px;
	line-height: 55px;
}

.h2fontsizestepheader {
	font-size: 45px;
	line-height: 55px;
	padding-top: 20px;
}


.h3fontsize {
  font-size: 40px;
	line-height: 50px;
}

.h4fontsize {
	font-size: 35px;
	line-height: 45px;
}



/*--- H2 HEADER STYLES
----------------------------------*/


.H2articlecontainer {
  display: flex;
  flex-wrap: wrap;
  font-family: 'Roboto', serif;
  margin-bottom: 16px;
}

.numberBox {
  width: 67px;
  font-size: 90px;
  display: flex;
  align-items: center;
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
}

.headerBox {
  width: 600px;
  font-size: 34px;
  line-height: 44px;
  display: flex;
  align-items: center;
}

.colorBarborder {
  width: 100%;
  height: 4px;
  margin-top: 16px;
  background-image: url(https://www.brighthousefinancial.com/content/dam/images/web/consumer/assets/icons/color-bar.svg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 800px;
}


.colorBarGradient {
   height: 4px;
   background: linear-gradient(to right, #00B0B9 0%,#00B0B9 33%,#4CC35D 33%,#4CC35D 65%,#97D700 65%,#97D700 100%);
   width: 100%;
   margin-top: 10px;
}




/*--- CTA Box STYLES
----------------------------------
P tag
---------------------------------*/
p {
  padding-bottom: 20px !important;
}



/*--- CTA Box STYLES
----------------------------------
Did You Know
---------------------------------*/

.didyouknowbox {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 25px;
  background-color: #F8F8F8;

}

.didyouknowboxlong {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 25px 25px 25px 25px;
  background-color: #F8F8F8;

}

.didyouknowboxicon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 88px;
  margin-right: 10px;
}

.didyouknowboxtext {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 500px;
}

.didyouknowtextlg {
/*  font-family: 'Roboto', serif;
  font-size: 25px;
  line-height: 35px; */
  font-weight: 300;
  color: #333;
}

.didyouknowtextsml {
  font-family: 'Roboto', serif;
  font-size: 15px !important;
  line-height: 25px !important;
  font-weight: 400;
  margin: 0px;
  padding-bottom: 0px !important;

}

.didyouknowboxtextlong {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.didyouknowboxiconsml {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 66px;
  margin-right: 10px;
}


.didyouknowtextsmlbold {
  font-weight: 600;
}

.didyouknowboxtextlink {
  color: #00465a;
  font-weight: 400;
}

/* create a new line before element */
#boldheaderline:after {
    content:"\a";
    white-space: pre;
}



/*----------------------------------
CTA BOX AND HEADLINE
---------------------------------*/

.ctabox {
  display: flex;
  flex-wrap: wrap;
   width: 100%;
 	padding: 1px 40px 40px 40px;
   background-color: #F8F8F8;

}
.ctaboxtopborder {
  border-top: 10px solid #01B0B9;

}

.ctaboxbottomborder {
  border-bottom: 10px solid #97D700;

}
.ctaboxtopbottomborder {
  border-top: 10px solid #01B0B9;
  border-bottom: 10px solid #26BA8B;

}

.ctaboxtext {
 	  width: 100%;
    padding-bottom: 0px;
  	/* font-family: 'Roboto Slab', serif;
   font-size: 20px;
   font-weight: 500;
   line-height: 35px; */
}

.ctaboxheaderbox {
 	width: 100%;
   padding-top: 39px;
   padding-bottom: 0px;
  text-align: left;

}
/*
.h4articleheader {
  text-align: left;
 	font-family: 'Roboto', serif;
   font-size: 35px;
   font-weight: 600;
   line-height: 45px;

}
*/

.colorBarGradient {
   height: 4px;
   background: linear-gradient(to right, #00B0B9 0%,#00B0B9 33%,#4CC35D 33%,#4CC35D 65%,#97D700 65%,#97D700 100%);
   width: 100%;
   margin-top: 10px;
}


.colorBarGradientbottom {
   height: 8px;
   background: linear-gradient(to right, #00B0B9 0%,#00B0B9 33%,#4CC35D 33%,#4CC35D 65%,#97D700 65%,#97D700 100%);
   width: 100%;
}

/*--------------------------------------------------------------------
RELATED HOW-TO CTA BOX STYLES - HOW-TO GUIDE CTA FOR OLS JOB AID PAGES
------------------------------------------------------------------*/
.articlecardctabox {
	text-align: left;
	padding: 15px 15px 75px 15px;
	border: 1px solid;
	border-color: #828282;
	font-size: 18px;
}








/*---- MEDIA QUERIES
-------------------------------------------------*/




@media screen and (max-width:320px){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize {
		font-size: 30px;
		line-height: 40px;
	}
	.h2fontsizestepheader {
		padding-top: 20px;
		font-size: 30px;
		line-height: 40px;
	}

  .numberBox {
    width: 34px;
    font-size: 46px;
  }
  .headerBox {
    width: 250px;
    font-size: 14px;
    line-height: 22px;
  }

}

@media screen and (min-width:375px){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize {
		font-size: 30px;
		line-height: 40px;
	}

	.h2fontsizestepheader {
		padding-top: 20px;
		font-size: 30px;
		line-height: 40px;
	}

  .numberBox {
    width: 34px;
    font-size: 46px;
  }
  .headerBox {
    width: 250px;
    font-size: 14px;
    line-height: 22px;
  }

}

@media screen and (min-width:410px){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize {
		font-size: 30px;
		line-height: 40px;
	}
	.h2fontsizestepheader  {
		padding-top: 20px;
		font-size: 30px;
		line-height: 40px;
	}
  .numberBox {
    width: 34px;
    font-size: 46px;
  }
  .headerBox {
    width: 250px;
    font-size: 14px;
    line-height: 22px;
  }

}


@media screen and (min-width:425px){
	  /*   .H2articlecontainer {
	      margin-bottom: 16px;
	    }
	  ----------*/

		.h2fontsize {
			font-size: 30px;
			line-height: 40px;
		}
		.h2fontsizestepheader {
			padding-top: 20px;
			font-size: 30px;
			line-height: 40px;
		}
	  .numberBox {
	    width: 41px;
	    font-size: 60px;
	  }
	  .headerBox {
	    width: 340px;
	    font-size: 19px;
	    line-height: 29px;
		}


}


@media only screen and (min-width:39.9375em){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize {
		font-size: 30px;
    line-height: 40px;
	}
	.h2fontsizestepheader  {
		padding-top: 20px;
		font-size: 30px;
		line-height: 40px;
	}

  .numberBox {
    width: 53px;
    font-size: 75px;
  }
  .headerBox {
    width: 550px;
    font-size: 29px;
    line-height: 39px;
  }

}



@media screen and (min-width:47.938em){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize {
		font-size: 40px;
		line-height: 50px;
	}
	.h2fontsizestepheader  {
		padding-top: 20px;
		font-size: 40px;
		line-height: 50px;
	}
  .numberBox {
    width: 53px;
    font-size: 75px;
  }
  .headerBox {
    width: 410px;
    font-size: 23px;
    line-height: 34px;
  }

}




@media screen and (min-width:58.0625em){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
			.h2fontsize  {
		    font-size: 40px;
		    line-height: 50px;
		}

		.h2fontsizestepheader {
			padding-top: 20px;
			font-size: 40px;
			line-height: 50px;
	}

	  .headerBox {
	    width: 510px;
	    font-size: 26px;
	    line-height: 38px;
		}


}

@media only screen and (min-width:58.125em) and (max-width:63.9375em){
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize  {
		font-size: 40px;
		line-height: 50px;
	}
	.h2fontsizestepheader   {
		padding-top: 20px;
		font-size: 40px;
		line-height: 50px;
	}
  .numberBox {
    width: 55px;
    font-size: 80px;
  }
  .headerBox {
    width: 575px;
    font-size: 29px;
    line-height: 38px;
  }
}



@media screen and (min-width: 64em)  {
  /*   .H2articlecontainer {
      margin-bottom: 16px;
    }
  ----------*/
	.h2fontsize  {
		font-size: 40px;
		line-height: 50px;
	}
	.h2fontsizestepheader   {
		padding-top: 20px;
		font-size: 40px;
		line-height: 50px;
	}
    .headerBox {
      width: 465px;
      font-size: 26px;
      line-height: 38px;
    }
}


/* LARGE */
@media screen and (min-width: 74.9375em)  {
/*   .H2articlecontainer {
    margin-bottom: 16px;
  }
----------*/
	.h2fontsize  {
		font-size: 45px;
		line-height: 55px;
	}
	.h2fontsizestepheader  {
		padding-top: 20px;
		font-size: 45px;
		line-height: 55px;
	}
  .numberBox {
    width: 62px;
    font-size: 90px;
  }
  .headerBox {
    width: 560px;
    font-size: 31px;
    line-height: 42px;
  }
}

@media screen and (max-width:425px){
        /*   .H2articlecontainer {
            margin-bottom: 16px;
          }
        ----------*/
        .didyouknowboxlong {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
        }
        .didyouknowbox {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
        }
        .didyouknowboxiconsml {
          align-items: flex-start;
          justify-content: center;
          width: 100%;
          margin-bottom: 20px;
          margin-right: 0px;
        }

        .didyouknowboxicon {
          align-items: flex-start;
          justify-content: center;
          width: 100%;
          margin-bottom: 20px;
          margin-right: 0px;
        }
        .didyouknowboxtext {
          align-items: flex-start;
          justify-content: flex-start;
          width: 100%
        }

}
	@media only screen and (max-width: 39.9375em){
		.bulletfontsize {
			font-size: 14px;
		}

	}