/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

a,
a:active,
a:link {
  color:#BA0000;
}     

a.visited {
  color: #770000;
  text-decoration: underline;
}

a:hover {
  color:#666;
} 

a.btn-success {
  color: #FFF;
  }

.layout-container {
  padding: 2rem 0;
}

.logo img {
  height: 30px;
  // margin-top: -.5rem;
}

.layout-content {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

footer h2 {
  font-size: 1rem;
  text-transform: uppercase;
}

#block-tweme-breadcrumbs {
  display: none;
}

#block-tweme-local-tasks {
  margin-bottom: 1rem;
}

#block-tweme-content img {
  max-width: 100%;
  height: auto;
}

#background-image-layer {
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(255,255,255,0.5);
  z-index: -100;
  visibility: hidden;
}

.mosaic {
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;  
}

.mosaic .mosaic-tile {
  display: inline-block;
}

.mosaic img {
  width: 100% !important;
  height: auto !important;
}

// Extra small devices (portrait phones, less than 576px)
@media all and (min-width: 351px) and (max-width: 575px)  {
  .mosaic {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
  }
}
// Small devices (landscape phones, less than 768px)
@media all and (min-width: 576px) and (max-width: 767px) {
  .mosaic {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
  }
}

// Medium devices (tablets, less than 992px)
@media all and (min-width: 768px) and (max-width: 991px) {
  .mosaic {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
  }
}

// Large devices (desktops, less than 1200px)
@media all and (min-width: 992px) and (max-width: 1199px) {
  .mosaic {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
  }
}

// X-Large devices
@media all and (min-width: 1200px) {
  .mosaic {
    -moz-column-count:    5;
    -webkit-column-count: 5;
    column-count:         5;
  }
}

#background-image-layer.processing {
  z-index: 100;
  visibility: visible;
}

.processing .mosaic-tile img {
 opacity: 0;
} 

.processing .mosaic-tile.visible img {
 opacity: 1;
} 
  
.processing .mosaic-tile.visible.fadeOut img {
  opacity: 0.5;
  transition: all 1s ease;
}

#background-image-layer.processing.fadeOutBack {
  opacity: 0.2;
  z-index: -100;
  transition: all 3s ease, z-index 2s linear 3s;
  -webkit-transition: all 3s ease, z-index 2s linear 3s;
  -moz-transition: all 3s ease, z-index 2s linear 3s;
}
#background-image-layer.processed {
  z-index: -100;
  opacity: 0.2;
  visibility: visible;
}


.layout-container.processing {
  background-color: rgba(255,255,255,0.95);
  transition: all 2s ease 5s;
  -webkit-transition: all 2s ease 5s;
  -moz-transition: all 2s ease 5s;
}
.layout-container.processed {
  background-color: rgba(255,255,255,0.95);
} 

ul.links.inline {
  list-style-type: none;
  padding-left: 0;
}

@media (min-width: 576px) {
  .pull-right {
    padding-left: 2em;
  }
}

.organization {
  font-size: 140%;
  font-variant: small-caps;
}

.service-list {
  margin: 1em 0;
}

.service-list div {
  display: inline-block;
  padding-right: 1em;
  font-variant: small-caps;
}

.author {
  padding: 10px 0;
  color: #666;
  font-weight: 450;
}

body {
  font-family: Georgia, serif;
  font-size: 16px;
}
h1, h2, h3, h4, h5 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.card {
  border: none;
  margin-top: 10px;
  margin-bottom: 20px;
}

.view-taxonomy-term .view-header {
  margin: 1em 0;
  font-size: 110%;
}