/***** STYLES FOR WHY SACRAMENTO WEB PAGES *****/

/* =====================================
          General Styles
======================================== */
.detailpage .page-header {
      font-size: 1.75em;
}
.detailpage .page-header h1 {
  color: #002855;
}
.panel-body h2,
.panel-2column-listings .panel-title {
    font-size: 1.5em;
    color: #002855;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
}
.detailpage .maincol .panel-plain > .panel-heading h2 {
    font-size: 1.5em;
    margin-bottom: 5px;
}
.panel-plain > .panel-heading h2 {
    color: #002855;
    font-weight: 500;
}
.tab-content ul li, 
.panel-body ul li {
    margin-bottom: 10px;
}
.smalltext {
  color: #666;
}
.col-66percent.maincol > .panel-plain > .panel-body > h1 {
	display: none;
}


/* =====================================
          Marquee Video
======================================== */

.overlay { /* changes play button overlay to blue */
  opacity: 1;
  /*  width: 50%;
    height: 50%;
    position: absolute;
    top: 45px;
    left: 35%;
    background-image: url(/global/images/icons/play-icon-blue.png); */
}
.flexslider.single .slides .slide-item a:hover > .overlay {
    opacity: 0.8;
}
/* =====================================
          Embeded YouTube Videos
======================================== */
.panel-plain.video {
  margin-bottom: 0;
}
.panel-plain.video iframe {
     height: 480px;
  }
@media (min-width: 768px) and (max-width: 1360px) {
   .panel-plain.video iframe {
       height: 400px;
    }
}
@media (max-width: 767px) {
   .panel-plain.video iframe {
       height: 300px;
    }
}
      

/* =====================================
          2 Column Listing
======================================== */
.visible-md {  
   display: block !important; /*reveals horizontal rule */
}
.panel-2column-listings hr {
  display: none;
}
.panel-2column-listings .panel-heading {
  padding-left: 0;
  padding-bottom: 0;
  margin-bottom: 5px;
}
.panel-2column-listings .panel-body > .row {
  margin-top: 30px
}
.panel-2column-listings .panel-body > div:nth-of-type(2) {
       margin-top: 10px
 }
.panel-2column-listings .panel-body > div:first-child {
  margin-top: 0
}
.panel-2column-listings .video-box {
  margin-top: 0;
}
.panel-2column-listings .video-box .overlay {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 45px;
    left: 35%;
    /* background-image: url(/global/images/icons/play-icon-blue.png); */
}

@media (min-width: 541px) and (max-width: 767px) {
    .col-66percent.maincol .panel-2column-listings .row .col-33percent-sm {
        width: 33%;
        display: inline-block;
        vertical-align: top;
    }
    .col-66percent.maincol .panel-2column-listings .row .col-66percent-sm {
        width: 66%;
        display: inline-block;
        vertical-align: top;
    }
}
.col-66percent.maincol .panel-2column-listings {
    box-shadow: none;
}
.col-66percent.maincol .panel-2column-listings .video-box, 
.col-66percent.maincol .panel-2column-listings .video-thumbnail {
  max-width: none;
}
.col-66percent.maincol .panel-2column-listings .panel-body {
    padding: 0;
}
.col-66percent.maincol .panel-2column-listings .row .col-66percent-sm h2 { 
    margin: 0 !important;
}
.col-66percent.maincol .panel-2column-listings .row .col-66percent-sm h2 .glyphicon-chevron-right { 
   font-size: 16px;
   padding-top: 6px;
  padding-left: 0;
   line-height: 1;
}
.col-66percent.maincol .panel-2column-listings .row .col-66percent-sm ul {
   padding-inline-start: 5px;
   margin-bottom: 0;
}
.col-66percent.maincol .panel-variation-4 .row .col-50percent ul {
   padding-inline-start: 25px;
}
.col-66percent.maincol .panel-2column-listings .row .col-66percent-sm li { 
    margin: 8px 0;
}
  .col-66percent.maincol .panel-2column-listings .row .col-66percent-sm li:last-of-type {
    margin: 8px 0 0;
  }
@media (max-width: 540px) {
    .col-66percent.maincol .panel-2column-listings .row .col-66percent-sm li {
      margin: 15px 0;
  }
    .col-66percent.maincol .panel-2column-listings .row .col-66percent-sm li:last-of-type {
      margin: 15px 0 0;
  }
}
.col-66percent.maincol .panel-2column-listings .row .col-33percent-sm img {
    display: block;
    width: 90%;
    margin: 0 auto;
}
@media (max-width: 540px) {
  .col-66percent.maincol .panel-2column-listings .row .col-33percent-sm img {
      width: 100%;
  }
}
/* ===================================== 
   PANEL PROMO CARDS styles
======================================== */
.panel-promo-cards {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.panel-promo-cards hr {
    display: none;
}
.panel-promo-cards > .panel-heading {
    padding-left: 0;
}
.panel-promo-cards > .panel-heading h2 {
    color: #002855;
    font-weight: 600;
    margin-bottom: -15px;
    font-size: 1.5em;
}
.panel-promo-cards > .panel-body {
    padding-left: 0;
    padding-right: 0;
}
.promo-card-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-bottom: 20px;
}
.promo-card {
    background: #f7f7f7;
    border: 1px solid #ccd4e0;
    min-height: 420px;
}
.promo-card .video-box, .video-thumbnail {
    max-width: none;
}
@media (max-width: 520px) { 
    .promo-card {
 		margin-top: 20px;
    }
}
.promo-card img{
   width: 100%;
}
.promo-card-wrapper:hover .promo-card img{
    opacity: .70;
}
.promo-card-textarea {
    padding: 20px 15px 15px;
}
.promo-card-textarea h3 {
    font-size: 1.325em;
    font-weight: 500;
    margin-top: 0;
}
.promo-card-textarea h3, 
.promo-card-textarea h4 {
    color: #002855;
}
.promo-card-textarea h3:hover, 
.promo-card-textarea h4:hover {
    color: #1a3e68;
}
.glyphicon-chevron-right {
    padding-left: 0;
    vertical-align: top;
    padding-bottom: 4px;
    font-size: 14px;
    top: 2px;
}

@media (min-width: 521px) {
    .panel-promo-cards .col-33percent {
        width: 33.33333333333333%;
        float: left;
        margin-top: 15px;
    }
    .panel-promo-cards .col-50percent {
        width: 50%;
        float: left;
    }
    .panel-promo-cards .panel-body .row > div {
        padding-right: 15px;
        padding-left:  0;
    }
    .panel-promo-cards > .panel-body {
        padding-left: 15px;
        padding-right: 0;
        padding-bottom: 0;
    }
}

.panel-2column-listings.hr-rules {
	padding-top: 30px;
  	padding-bottom: 15px;
  	border-top: 1px solid #d9dfe6;
    border-bottom: 1px solid #d9dfe6;
}

/* =====================================
          Sacramento Page
======================================== */
/** Places to Live **/
.panel-2column-listings.places-to-live {
  margin: 30px 0 0;
}
.panel-2column-listings.places-to-live .panel-body > div:first-child {
  margin-top: 10px;
}
.places-to-live .row .col-50percent ul {
   margin-bottom: 0;
}
.panel-plain.places-to-live {
  margin: 0 0 30px;
}
@media (max-width: 540px){
   .panel-plain.places-to-live {
     margin: -10px 0 10px;
   }
}
.panel-plain.places-to-live .panel-body hr{
  display: none;
}

@media (min-width: 541px) {
  .panel-plain.places-to-live .row .col-50percent {
      width: 50%;
      float: left;
  }
}
.panel-plain.places-to-live .panel-body {
  margin-top: 5px;
}

/** Farm to Fork Promo **/
.col-66percent.maincol .panel-variation-4 {
  margin-bottom: 30px;
}
@media (min-width: 541px) {
  .col-66percent.maincol .panel-variation-4 .row .col-50percent {
      width: 50%;
      float: left;
  }
}

/* testimonials */
.col-66percent.maincol .panel-plain.mb-10 {
  margin-bottom: 10px;
}
.col-66percent.maincol .panel-variation-4.mb-20 {
  margin-bottom: 20px;
}

.testimonial-head {
    font-size: 1.4em;
    color: #1a3e68;
    font-weight: 600;
    padding-bottom: 20px;
}
  
  
.testimonial {
	padding: 0 15px 15px 20px;
}

.testimonial p.headline {
  color: #1a3e68;
  font-size: 1.125em;
  line-height: 1.5em;
}

.maincol .panel-plain > .panel-heading h2.testimonial {
  font-size:1.6em;
  margin-bottom:-10px;
}

.testimonial img.img-responsive-left {
	margin-right:30px;
	margin-bottom:30px;
}

.testimonial img.img-responsive-right {
    margin-left:0;
	margin-bottom:15px;
}

.testimonial .quote-left,
.testimonial .quote-right  {
    display: block;
    position: relative;
    z-index: 2;
}

.testimonial .quote-left::before,
.testimonial .quote-right::before  {
    color: #ffffff;
    content: '\201C';
    position: absolute;
    font-size: 9em;
    z-index: -1;
    margin-left: -20px;
    line-height: .5;
}

.testimonial.blue .quote-left::before,
.testimonial.blue .quote-right::before  {
	color:#e5e9ef;
}

@media (max-width:413px) {
  .testimonial .img-responsive-left,
  .testimonial .img-responsive-right  {
    float:none;
  }
}
@media (min-width:414px) {
  .testimonial img.img-responsive-right {
	margin-left:30px;
	margin-bottom:30px;
    }
}

.profile-image,
.profile-body {
  margin-left:15px
}

@media (max-width:530px) {
  .profile-image .img-responsive-left {
    float:none;
  }
}

@media (min-width:531px) {
.profile-body {
  margin-left:175px;
}
}

/* panel variation 3 styles */

.panel-variation-3 {
	background-color: #f8eecc; 
	border: 1px solid #e9cc66;
}

.panel-variation-4 {
	background-color: #eceff3; 
	border: 1px solid #ccd4e0;;
}

.quote-row {
    border: none!important;
    margin-bottom: 0!important;
}


/* Promo card styles, inlcuding styles for video modal component with promo card image */

.promo-card .video-box, .promo-card .video-box img {
    margin: 0;
    padding: 0;
}

.promo-card .video-box .overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-position: center;
}

.promo-card.video {
    position: relative;
}

.promo-card.video img:hover .overlay {
    opacity: 0.7;
}

.promo-card ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.promo-card ul li:last-child {
    margin-bottom: 0;
}

.promo-card img:hover h3 {
    text-decoration: underline;
}

.promo-card.video .promo-card-wrapper {
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.promo-card.video .video-box:hover {
    opacity: .70;
}

.promo-card.video ul li {
    color: #002855;
}

.promo-card-wrapper {
    margin-bottom: 0; 
}

.promo-card-wrapper:hover img {
    opacity: .70;
}

/* End promo card styles, inlcuding styles for video modal component with promo card image */