@charset "utf-8";
/* CSS Document */

* {  box-sizing: border-box;}
		h2 { font-size: 2em; text-transform: uppercase; text-align: center;}
		h3 {font-size: 1.5em; text-transform: uppercase;}
		h4 {
			margin: 10px 0 10px 0;
			letter-spacing: 10px;
			font-size: 20px;
			color: #111;
		}
		
		.lh-2 {line-height: 2.8em !important}		
	
		
		.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
		position: relative;
		min-height: 1px;
		padding-right: 0; 
		padding-left: 0px;}
			
		.container2, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
			width: 100%;
			/*padding-right: var(--bs-gutter-x,.75rem);
			padding-left: var(--bs-gutter-x,.75rem);*/
			margin-right: auto;
			margin-left: auto;
		}
		
		.container2 {margin: 1em 0;padding: 0;}	
		.subContainer, .subContainerVideo {padding-top:25px!important;padding-bottom:25px!important; width: 100%; margin: 0 auto;}	
		.subContainer2 {padding-top:0;padding-bottom:0; width: 75%; margin: 0 auto;}
        .subContainer3 {padding-top:25px;padding-bottom:25px; width: 75%; margin: 0 auto;}

.mt-3 {margin-top: 1em;}
.pt-3 {padding-top: 1em;}

		
/* STATS SECTION */
		.stats{
		   background-image: url("images/Diversity_stats.png");
		   background-size: cover;
		   height: 518px;
		   width: 1280px; 
		}
		.centered {
		  position: absolute;
		  top: 45%;
		  left: 38%;
		  transform: translate(-50%, -50%);
		}
		.bottom-left {
		  position: absolute;
		  bottom: -40px;
    	  left: 109px;
		  color: #fff;
		  font-size: 12px;
		}
		
	#hero img {display:block; height:auto; width:100%}
		
	.style1 { padding-left:8%!important;padding-right:4%!important;padding-top:3%!important;}
	.style2 {padding-left:8%!important;padding-right:4%!important;padding-top:3%!important;}
	.style1 {padding-top:30px; padding-bottom: 50px!important;width: 69%; margin: 0 auto;}
	.style2 {padding-left:8%!important;padding-right:8%!important;padding-top:50px!important;padding-bottom:50px!important;}
	.logostyle {padding-top:25px!important;padding-bottom:25px!important; width: 100%; margin: 0 auto;}
	
.containerDei {
  float: left;
  width: 100%;
  position: relative;
  left: 0;
}

.containerDei:before,
.containerDei:after {
  content: " ";
  display: table;
}

.containerDei:after {
  clear: both;
}

.left-column {
  float: left;
  width: 50%;
  height: 100%;
  position: absolute;
}

.left-column2 {
  float: right;
  width: 50%;
  position: relative;
  padding: 0;
  margin: 0;         
}
	
.right-column {
  float: left;
  width: 50%;
  height: 100%;
  position: absolute;
}

.right-column2 {
  float: right;
  width: 50%;
  position: relative;
  padding: 0;
  margin: 0;          
}

.border-top {border-top: 1px solid #ccc;}
.border-left {border-left: 1px solid #ccc;}

footer {margin: 0 1em;}
footer ul {list-style: none;}
		
		
@media only screen and (max-width: 600px) {
  	.colorblock h3 { font-size: 2em; text-transform: uppercase;	}
	.colorblock {padding:3em;}
	.colorblock ul {font-size: 1em;}
	.colorblock li {padding: 10px;}
	
.left-column {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

.left-column2 {
  float: right;
  width: 100%; 
  position: relative;
  padding: 0;
  margin: 0;       
}
	
.right-column {
  float: left;
  width: 100%;
  position: relative;
}

.right-column2 {
  float: right;
  width: 100%;
  height:100%;
  position: relative;
  padding: 0;
  margin: 0;          
}
    
    .subContainer, .subContainer2, .subContainer3 {
        width: 90%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
	
}	
		
@media only screen and (max-width: 1024px) {
			.navbar-default {margin-top: 0}
			.navbar {top: 5px;}
		}
		
@media screen and (max-width: 993px) {	
	
	.style1 { padding-left:0!important;padding-right:0!important;padding-top:3%!important;}
	.style1 h3 {padding-left: 10px; padding-top: 0;}
	.style1 p {padding-left: 10px; padding-top: 2px;}
	
	.style2 { padding-left:0!important;padding-right:0!important;padding-top:3%!important;}
	.style2 h3 {padding-left: 10px; padding-top: 0}
	.style2 p {padding-left: 10px; padding-top: 0px; padding-bottom: 10px;}
	}
				
/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
	.stats{
       background-image: url("images/Diversity_stats.png");
   }
	
	.flex-containerdei ul {
    font-size: .6em !important;
	}
		
	.colorblock {
    margin: .5em;
	}
	
	h3 {
    margin: 10px 0 10px 0;  
	}
	
	.colorblock h3 {
    font-size: 1.2em;
    text-transform: uppercase;		
	}
	.colorblock ul {
    font-size: 1em;
	}
	
	
    .centered {
    position: absolute;
    top: 28%;
    left: 47%;
    /* transform: translate(-50%, -50%); */
    width: 600px;		
	}
	
	.bottom-left {
    position: absolute;
    bottom: -80px;
    left: 22%;
    color: #fff;
    font-size: 9px;
	}
	
	.subContainerVideo {
    padding-top: 25px!important;
    padding-bottom: 50px!important;
    width: 95%;
    margin: 0 auto;
	}	
	
	
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
			
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.colorblock {
    padding: .5em;
	}
	
	h3 {
    margin: 10px 0 10px 0;  
	}
	
	.colorblock h3 {
    font-size: 1.2em;
    text-transform: uppercase;		
	}
	.colorblock ul {
    font-size: 1em;
	}
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
	.colorblock {
    padding: 1em;
	}
	
	h3 {
    margin: 10px 0 20px 0;  
	}
	
	.colorblock h3 {
    font-size: 1.5em;
    text-transform: uppercase;	
	}
	.colorblock ul {
    font-size: 1em;
	}	
}


/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
	.colorblock {
    padding: 4em;
	}
	
	h3 {
    margin: 10px 0 30px 0;  
	}
	
	.colorblock h3 {
    font-size: 2em;
    text-transform: uppercase;	
	}
	.colorblock ul {
    font-size: 1em;
	}
	
}

@media (min-width: 1399.98px) { 
	.blockimg {
    width: 60%!important;
    /* padding-left: 11%!important; */
    padding-right: 2%!important;
    padding-top: 30px!important;
    padding-bottom: 25px!important;
	}	
}

/* XX-Large devices (larger desktops)
 No media query since the xxl breakpoint has no upper bound on its width */

.video {
    /* float: left; */
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
		
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
		
.video iframe, .video .videos {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
	
/* VIDEO THUMBNAILS */
.video-thumbnails2 {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
}

.video-thumbnails2 li {
	float: left;
	width: 15%;	
	display: inline-block;
}

.video-thumbnails2 li a {
	color: #666;
    text-decoration: none;
    width: calc(100% - 1em);
    display: inline-block;
    font-size: .85em;
    line-height: 1.3em;
    margin: 10px 0 10px 0;
}
.video-thumbnails2 li:nth-child(6n+1) {
	clear: left;
}
.video-thumbnails2 a img {
	height: auto;
	width: 100%;
	margin: 0 0 .5em;

}
.video-thumbnails2 li a img.play-video {
	height: 29px;
	width: 30px;
	padding: 0;
	margin-top: -40px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 125px;
	position: relative;
	display: none;
}
.video-thumbnails2 li em {
	height: 20px;
	width: 20px;
	display: block;
}
.video-thumbnails2 li a.last {
	/*margin-right: 0;*/
}
.video-thumbnails2 li a:nth-child(6n+1) {
	margin-right: 0;
}

.video-thumbnails2 span.title {
    color: #02579e;
    font-size: 1em;
	font-weight: bold;
    float: left;
    clear: left;
}
.video-title {
	color: #02579e;
	font-size: 1.5em;
	margin: 0;
	font-family: 'Open Sans', sans-serif; 
	font-style: normal;
	text-transform: uppercase;
	padding: 10px 0 0;
	line-height: 1.2em;
	letter-spacing: .5px;
}
/* END VIDEO THUMBNAILS */
		
.flex-containerdei {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}	
.flex-containerdei ul {font-size: .6em;}
.flex-containerdei li {padding: 10px;}		
		
.flex-item-leftDiv {
  background-color: #cad4e2;
  padding: 2em;
  flex: 50%;
}	
.flex-item-leftDiv h2 {font-size: 1.1em; text-transform: uppercase; text-align: center; padding-bottom: 20px}	
.flex-item-rightDiv {  
  padding: 0px;
  flex: 50%;
}
.flex-item-right2 {
  background-color: #cad4e2;
  padding: 1.8em;
  flex: 50%;
}
.flex-item-right2 h2 {font-size: 1.1em; text-transform: uppercase; text-align: center; padding-bottom: 20px}
.flex-item-left2 {  
  padding: 0px;
  flex: 50%;
}
.flex-item-rightDiv img { width: 100%; height: 100%;}
.flex-item-left2 img { width: 100%; height: 100%;}
		
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-rightDiv, .flex-item-leftDiv, .flex-item-left2 {
    flex: 100%;
  }
		
	.flex-item-leftDiv, .flex-item-right2 {
    padding: 1em;
  }
}	
.flex-containerVid {
  display: flex;
}

.flex-containerVid > div {  
  color: white;
  width: 238px;
  height: auto;
  margin: 10px 0 10px 0;
  text-align: left;
  font-size: 15px;
}
		
/* Hide the images by default */
.deiSlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #fff;
  padding: 2px 16px;
  color: #000;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 33.33%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
  padding-left: 0;
  padding-right: 5px;
}

.active,
.demo:hover {
  opacity: 1;
}

@media only screen and (max-width: 1105px) {
	.col {
		margin: 0 auto !important;
	}
}

/* article color blocks */

.w_lic {
    direction: rtl;
    color: #3b3b3b;
    background: #fff;
}
		article {padding-top: 2em; padding-bottom: 2em;}
		
.w_lic .w_lic_inner {
    display: table;
    width: 100%;
}
	
		
.w_lic .w_lic_inner li {
    padding: 10px;
}
	
.w_lic .w_lic_image {
    position: relative;
    background-image: url("/public/images/Diversity_Image_blocks_AfricanAmerican.png");
    background-size: 100%;
    background-size: cover;
	background-position: center;
	}
.w_lic .w_lic_image2 {
    position: relative;
    background-image: url("/public/images/Diversity_Image_blocks_Hispanic.png");
    background-size: 100%;
    background-size: cover;
	background-position: center;
	}
	
.w_lic .w_lic_image3 {
    position: relative;
    background-image: url("/public/images/Diversity_Image_blocks_Asian.png");
    background-size: 100%;
    background-size: cover;
	background-position: center;
	}
	
.w_lic .w_lic_image4 {
    position: relative;
    background-image: url("/public/images/Diversity_Image_blocks_women.png");
    background-size: 100%;
    background-size: cover;
	background-position: center;
	}
	
.w_lic .w_lic_image, .w_lic .w_lic_image2, .w_lic .w_lic_image3, .w_lic .w_lic_image4 {
    display: table-cell;
    direction: ltr;
    height: 100%;
    width: 50%;
	background-color: #cad4e2;	
}
		
.w_lic .w_lic_body {
    display: table-cell;
    direction: ltr;
    height: 100%;
    width: 50%;
	background-color: #cad4e2;	
	padding: 5em 5em 18em 11em;
}
	
.w_lic .w_lic_body2 {
    display: table-cell;
    direction: ltr;
    height: 100%;
    width: 50%;
	background-color: #cad4e2;	
	padding: 5em 5em 18em 5em;
}

	
@media (min-width: 620px) and (max-width: 919px){			
	.w_lic .w_lic_body {
		padding-top: 40px;
		padding-right: 40px;
		padding-bottom: 40px;
		padding-left: 40px;
	}	
	.w_lic .w_lic_body2 {
		padding-top: 40px;
		padding-right: 40px;
		padding-bottom: 40px;
		padding-left: 40px;
	}	
}
		
@media (max-width: 619px){

	.w_lic {
		display: block;
		height: auto;
		direction: ltr;
		text-align: center;
	}		
						
.w_lic .w_lic_image {
    background-image: url("/public/images/Diversity_Image_blocks_AfricanAmerican.png");
    height: 300px;
    width: 100%;
}
.w_lic .w_lic_image2 {
    background-image: url("/public/images/Diversity_Image_blocks_Hispanic.png");
    height: 300px;
    width: 100%;
}
.w_lic .w_lic_image3 {
    background-image: url("/public/images/Diversity_Image_blocks_Asian.png");
    height: 300px;
    width: 100%;
}
.w_lic .w_lic_image4 {
    background-image: url("/public/images/Diversity_Image_blocks_women.png");
    height: 300px;
    width: 100%;
}

.w_lic .w_lic_body, .w_lic .w_lic_body2 {
	width: auto;
	min-height: 239px;
	padding-top: 50px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 20px;
	background-color: #cad4e2;
}
.w_lic .w_lic_image, .w_lic .w_lic_image2, .w_lic .w_lic_image3, .w_lic .w_lic_image4,.w_lic .w_lic_body {
	display: block;
	direction: ltr;		
}

.w_lic .w_lic_inner {
	display: block;
	width: 100%;
}
	
.howcanwehelp2 {
    height: 520px;
    /* overflow: hidden; */
    /* position: relative; */
    background-image: url(http://test.primerica.com/public/images/how-can-we-help_index.jpg);
    background-size: contain;
    width: 100%;
    border: 1px solid red;
    background-position: center;
}
	
	
}		
	
.bootCols{  
  margin:0;
  box-sizing:border-box;
  padding:5px; 
}