/* Custom styling for Merced site */

html {
	font-family: 'Open Sans', 'San Francisco', 'Segoe UI', 'Roboto', sans-serif;
	  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
	  height: 100%;
}

/* body padding-bottom to allow for fixed navbar - add height of navbar to push images/text below navbar */

body {
	padding-top: 0px;
    background-color: #fff;
	height: 100%;
}

/* adjusts in-page links to display below the fixed navbar */
:target:before {
  content:"";
  display:block;
  height:70px; /* fixed header height*/
  margin:-70px 0 0; /* negative fixed header height */
}

/* Font styling ----------------------------- */
h1, h2 {
	font-family: 'Lato', sans-serif;
    font-weight: 900;
	}

h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
}

p {
	font-family: 'Open Sans', 'Segoe UI', 'San Francisco', 'Roboto', sans-serif;
	color: #3F3F3F;
	font-weight:400;
}

li {
	font-family: 'Open Sans', sans-serif;
	color: #3F3F3F;
	font-weight:400;
}
.display-1, .display-2 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

.display-3, .display-4 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

/* FA icon color class for Font Awesome 5 icons */
.fa-sm {
    color: darkgray;
}

/* theme color tweaks > add class to items to change bg color ----------------------------- */

.bg-dkblue {
    background-color: #215086;
}
.bg-dkgry {
    background-color: #282828;
}
.bg-ltgry {
    background-color: #eeeeee;
    background-image: url(../img/noise-bg.jpg);
    background-repeat: repeat;
}

.bg-blue {
    background-color: #2A69AE;
}
.bg-ltaqua {
    background-color: #658EAA;
}
.bg-none {
    background: transparent;
}

/* Button color tweaks > add class to btn to change color ---------------------------- */
.btn-blue {
    color: #fff;
    background-color: #2A69AE;
}
.btn-blue:hover,.btn-blue:active  {
    color: #fff;
    background-color: #215086;
}

/* Navbar scroll color shift class ------------------- */
.fixed-top.scrolled {
  background-color: #282828 !important;
  transition: background-color 200ms linear;
}

/* Custom text selection color classes -------------------------- */
::selection {
  background: #658EAA; /* WebKit/Blink Browsers */
  color: #fff;
}

/* Home page/ splash page styling / page header styling --------------------- */

.cover-lg {
    background-image: url(../img/canal-sunrise_attrb-veronica-adrover.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 16em;
}


.cover-md {
    background-image: url(../img/canal-sunrise_attrb-veronica-adrover.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-public {
    background-image: url(../img/public-meeting-bg.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-board {
    background-image: url(../img/board-meeting-bg.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-group {
    background-image: url(../img/people-group-overlay-bg.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-binders {
    background-image: url(../img/binders.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-no-img {
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}


/* Card column responsiveness ---------------------------- */

@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

/* text responsiveness ------------ */

@media only screen and (max-width: 576px) {
    .display-1, .display-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 3em;
    }

    .display-3, .display-4 {
        font-family: 'Lato', sans-serif;
        font-weight: 900;
        font-size: 1.8em;
        text-shadow: none;
    }
    h3 {
        font-size: 1.4em;
    }
    p.lead {
        font-size: 1em;
    }
}

/* Text Effects ----------------------------- */

.text-shadow {
  color: #fff;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}
.retroshd {
  color: #fff;
  letter-spacing: .05em;
  text-shadow: 4px 4px 0px #3e3e3e;
}
.retroshd:hover {
    text-decoration: none;
}

@media only screen and (max-width: 576px){
    .retroshd {
      text-shadow: none;
    }
}

/* Fluid Gallery classes for lightbox image gallery ---------------- */

.fluid-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.fluid-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: "Font Awesome 5 Pro";
    content: "\f06e";
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}


.fluid-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(60, 60, 60, 0.7);
    content: '';
    transition: 0.4s;
}

.fluid-gallery .lightbox:hover:after,
.fluid-gallery .lightbox:hover:before {
    opacity: 1;
}

.baguetteBox-button {
    background-color: transparent !important;
}