/* CSS Document for Chronic Pain  */

/* begin home page CSS */

.chronic-banner {
	background-image:url(/assets/images/prevention/chronic-disease/chronic-pain-management/chonic-pain-hero3.jpg) !important;
	color:white;
  background-position: center;
  background-repeat:no-repeat;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
	margin:0;/* margins must be zeroed out on background color rows -Jackson */
	padding:0;
	min-height:60vh; /* Makes height automatically stretch to size of screen by 80% - Jackson*/
}

.chronic-banner h1 {
  font-size: 4.05em;
  font-weight: bold;
  line-height: 70px;
  color: #fff !important;
  margin-top: 30%
}

.chronic-banner p {
  font-size: 2.5em;
  margin-top: 35px;
  line-height: 40px;
}

.content .box-content.thumbnail {
  max-width: none;
}

.container .box-item {
  min-height: 298px;
  background-color: #e6e6e6;
  padding: 26px;
  cursor:pointer;
}

.container .box-item:hover {
  transition: background-color 1s ease;
  background-color: #f5f5f5;
}

.container .box-item h4 {
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 2px solid #db4233;
  padding-bottom: 10px;
  margin-top: 20%;
}

.box-item .chevron-content div {
  padding-left: 0px;
  padding-right: 0px;
}

.box-item .chevron-content .fas {
  font-size: 2em;
  margin-top: 40%;
  color: #db4233;
}

/* Animate Arrows (Right & Left) */
.box-item:hover .chevron-content .fas {
   animation: bounce-right .5s infinite alternate;
  -webkit-animation: bounce-right .5s infinite alternate;
}

@keyframes bounce-right {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes bounce-right {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
/* End Animation */



/* Text Shine Animation */
.box-item:hover h4.shine {
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 75px;
    color: rgba(255, 255, 255, 0.05);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shine {
    0% {
        background-position: -1250px 0px;
    }
    100% {
        background-position: 1250px 0px;
    }
}
/* End Animation */


.box-item .chevron-content p {
  font-size: 1.07em;
}

/* Arrow Bounce Animation (Up & Down) */
.chronic-banner .fas {
  color: #db4233;
  font-size: 65px;
  animation: bounce .5s infinite alternate;
  -webkit-animation: bounce .5s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
/* End Animation */


@media screen and (max-width: 768px) {

  .box-item {
    margin-top: 30px;
  }

  div.top-buffer{
    margin-top: 0px;
  }
}

.tagline {
	padding-top:15px;
	padding-bottom:15px;
	padding-left:40px;
}

.tagline-es {
	padding-top:15px;
	padding-bottom:15px;
}

.banner-container h2 {

	margin:0;
	padding-top:20px;
	color:#ffffff;
	cursor:pointer;

}


.bordered {

	border: solid 1px #ddd;
}

.disclaimer.alert.alert-default {
  border-left: 0px;
}

.box-content.thumbnail.large-box {
	max-width:100%;
   background-color:#f5f5f5;
}


.box-content.thumbnail span.custom-feature1 {
	padding-bottom: 10px;
}



/* end home page CSS */




.table-bordered.wic-table,.table-bordered.wic-table th,.table-bordered.wic-table td {
	border-color:#004FA3;
}