@import './mixins';
@import './colors';

a, a:hover  {
  color: $todos-palette1a;
}

.bg-dark {
  background-color: $todos-palette1 !important;
}

h4.page-header {
  line-height: 2em;
  font-size: 2em;
}

@include breakpoint(mobile) {
  h4.page-header {
    line-height: 1.3em;
    font-size: 1.5em;
  }
}

.App > .container { // Because of fixed header, previously page-header {
  /* margin-top: 30px; */
}

.page-header {
  margin-top: 10px;
}

#react-root > div > div.container > div > div.alert {
  margin-top: 20px;
}

div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p,
div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
  font-size: 12px;
}

div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a:hover,
div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
//   color: $todos-palette2;
}

.bg-image-about-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-image: url('/photos/about-1.jpg');
  height: 600px;
  margin: 0px -350px 20px -350px;
}

@include breakpoint(mobile) {
 .bg-image-about-full {
   background-image: url('/photos/about-1-peq.jpg');
   /* height: 400px; other photo */
  }
}