/* ************************************* /
/* styles present in wood version 3.0.0 */
/* ************************************* */

/***********/
/*** SDG ***/
/***********/
hr.sdg-line {
  background-image: url("../img/sdg/sdg-line.png");
  background-size: 340px 3px;
  height: 3px;
  width: 100%;
  background-repeat: repeat-x;
  background-position: center bottom;
  margin: 10px 0 15px;
  border-top: none;
}

.row.sdg-bottomline {
  background-image: url("../img/sdg/sdg-line.png");
  background-size: 340px 3px;
  background-repeat: repeat-x;
  background-position: center bottom;
}
.row.sdg-bottomline.row-light, .row.sdg-bottomline.row-lighter {
  border-bottom: 0;
}

.row.sdg-topline {
  background-image: url("../img/sdg/sdg-line.png");
  background-size: 340px 3px;
  background-repeat: repeat-x;
  background-position: center top;
}
.row.sdg-topline.row-light, .row.sdg-topline.row-lighter {
  border-top: 0;
}

/* SDG icons */
.sdg {
  color: white;
  display: block;
  float: left;
  text-align: center;
  padding-top: 1px;
  position: relative;
}
.sdg.sdg-sm {
  width: 28px !important;
  height: 28px !important;
  margin: 0 2px 2px 0;
  transition: width 0.3s ease-in-out 0.3s, height 0.3s ease-in-out 0.3s;
}
.sdg .sdg-label {
  line-height: 28px;
  width: 28px;
  font-size: 20px;
  float: left;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.1em;
  margin-left: -1px;
  transition: color 0.3s ease-in-out;
}
.sdg .sdg-text {
  font-weight: 700;
  opacity: 0;
  font-size: 8px;
  text-align: left;
  line-height: 1em;
  margin-top: 5px;
  margin-right: 5px;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
  margin-left: 28px;
  letter-spacing: -0.35px;
}
.sdg .sdg-logo {
  width: 100%;
  height: 100px;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.sdg.sdg-sm:hover, .sdg.sdg-md {
  width: 100px !important;
  height: 100px !important;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.sdg.sdg-sm:hover .sdg-label, .sdg.sdg-md .sdg-label {
  color: rgba(0, 0, 0, 0.4);
}
.sdg.sdg-sm:hover .sdg-text, .sdg.sdg-md .sdg-text {
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out 0.3s;
}
.sdg.sdg-sm:hover .sdg-logo, .sdg.sdg-md .sdg-logo {
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.3s;
}
.sdg.sdg-sm:hover.sdg-icon .sdg-text,
.sdg.sdg-sm:hover.sdg-icon .sdg-label, .sdg.sdg-md.sdg-icon .sdg-text,
.sdg.sdg-md.sdg-icon .sdg-label {
  display: none;
}
.sdg.sdg-sm:hover.sdg-icon .sdg-logo, .sdg.sdg-md.sdg-icon .sdg-logo {
  width: 120px;
  height: 120px;
  background-size: 100% 100%;
  position: absolute;
  top: -28px;
  left: -10px;
}

.sdg-00 {
  background-color: #aaaaaa;
}
.sdg-00 .sdg-logo {
  background-image: url("../img/sdg/sdg00.svg");
}
.sdg-00.active ~ hr {
  margin-left: 0%;
  background-color: #aaaaaa;
}
.sdg-00:hover ~ hr {
  margin-left: 0% !important;
  background-color: #aaaaaa !important;
}

.sdg-01 {
  background-color: #eb1c2d;
}
.sdg-01 .sdg-logo {
  background-image: url("../img/sdg/sdg01.svg");
}
.sdg-01.active ~ hr {
  margin-left: 5.5555%;
  background-color: #eb1c2d;
}
.sdg-01:hover ~ hr {
  margin-left: 5.5555% !important;
  background-color: #eb1c2d !important;
}

.sdg-02 {
  background-color: #d3a029;
}
.sdg-02 .sdg-logo {
  background-image: url("../img/sdg/sdg02.svg");
}
.sdg-02.active ~ hr {
  margin-left: 11.111%;
  background-color: #d3a029;
}
.sdg-02:hover ~ hr {
  margin-left: 11.111% !important;
  background-color: #d3a029 !important;
}

.sdg-03 {
  background-color: #279b48;
}
.sdg-03 .sdg-logo {
  background-image: url("../img/sdg/sdg03.svg");
}
.sdg-03.active ~ hr {
  margin-left: 16.6665%;
  background-color: #279b48;
}
.sdg-03:hover ~ hr {
  margin-left: 16.6665% !important;
  background-color: #279b48 !important;
}

.sdg-04 {
  background-color: #c31f33;
}
.sdg-04 .sdg-logo {
  background-image: url("../img/sdg/sdg04.svg");
}
.sdg-04.active ~ hr {
  margin-left: 22.222%;
  background-color: #c31f33;
}
.sdg-04:hover ~ hr {
  margin-left: 22.222% !important;
  background-color: #c31f33 !important;
}

.sdg-05 {
  background-color: #ef402b;
  background-color: #ef402b;
}
.sdg-05 .sdg-logo {
  background-image: url("../img/sdg/sdg05.svg");
}
.sdg-05.active ~ hr {
  margin-left: 27.7775%;
  background-color: #ef402b;
}
.sdg-05:hover ~ hr {
  margin-left: 27.7775% !important;
  background-color: #ef402b !important;
}

.sdg-06 {
  background-color: #00aed9;
}
.sdg-06 .sdg-logo {
  background-image: url("../img/sdg/sdg06.svg");
}
.sdg-06.active ~ hr {
  margin-left: 33.333%;
  background-color: #00aed9;
}
.sdg-06:hover ~ hr {
  margin-left: 33.333% !important;
  background-color: #00aed9 !important;
}

.sdg-07 {
  background-color: #fdb714;
}
.sdg-07 .sdg-logo {
  background-image: url("../img/sdg/sdg07.svg");
}
.sdg-07.active ~ hr {
  margin-left: 38.8885%;
  background-color: #fdb714;
}
.sdg-07:hover ~ hr {
  margin-left: 38.8885% !important;
  background-color: #fdb714 !important;
}

.sdg-08 {
  background-color: #8e1938;
}
.sdg-08 .sdg-logo {
  background-image: url("../img/sdg/sdg08.svg");
}
.sdg-08.active ~ hr {
  margin-left: 44.444%;
  background-color: #8e1938;
}
.sdg-08:hover ~ hr {
  margin-left: 44.444% !important;
  background-color: #8e1938 !important;
}

.sdg-09 {
  background-color: #f36c25;
}
.sdg-09 .sdg-logo {
  background-image: url("../img/sdg/sdg09.svg");
}
.sdg-09.active ~ hr {
  margin-left: 49.9995%;
  background-color: #f36c25;
}
.sdg-09:hover ~ hr {
  margin-left: 49.9995% !important;
  background-color: #f36c25 !important;
}

.sdg-10 {
  background-color: #e21384;
}
.sdg-10 .sdg-logo {
  background-image: url("../img/sdg/sdg10.svg");
}
.sdg-10.active ~ hr {
  margin-left: 55.555%;
  background-color: #e21384;
}
.sdg-10:hover ~ hr {
  margin-left: 55.555% !important;
  background-color: #e21384 !important;
}

.sdg-11 {
  background-color: #f99d26;
}
.sdg-11 .sdg-logo {
  background-image: url("../img/sdg/sdg11.svg");
}
.sdg-11.active ~ hr {
  margin-left: 61.1105%;
  background-color: #f99d26;
}
.sdg-11:hover ~ hr {
  margin-left: 61.1105% !important;
  background-color: #f99d26 !important;
}

.sdg-12 {
  background-color: #d08c2b;
}
.sdg-12 .sdg-logo {
  background-image: url("../img/sdg/sdg12.svg");
}
.sdg-12.active ~ hr {
  margin-left: 66.666%;
  background-color: #d08c2b;
}
.sdg-12:hover ~ hr {
  margin-left: 66.666% !important;
  background-color: #d08c2b !important;
}

.sdg-13 {
  background-color: #47773e;
}
.sdg-13 .sdg-logo {
  background-image: url("../img/sdg/sdg13.svg");
}
.sdg-13.active ~ hr {
  margin-left: 72.2215%;
  background-color: #47773e;
}
.sdg-13:hover ~ hr {
  margin-left: 72.2215% !important;
  background-color: #47773e !important;
}

.sdg-14 {
  background-color: #007cbc;
}
.sdg-14 .sdg-logo {
  background-image: url("../img/sdg/sdg14.svg");
}
.sdg-14.active ~ hr {
  margin-left: 77.777%;
  background-color: #007cbc;
}
.sdg-14:hover ~ hr {
  margin-left: 77.777% !important;
  background-color: #007cbc !important;
}

.sdg-15 {
  background-color: #3eb048;
}
.sdg-15 .sdg-logo {
  background-image: url("../img/sdg/sdg15.svg");
}
.sdg-15.active ~ hr {
  margin-left: 83.3325%;
  background-color: #3eb048;
}
.sdg-15:hover ~ hr {
  margin-left: 83.3325% !important;
  background-color: #3eb048 !important;
}

.sdg-16 {
  background-color: #02558b;
}
.sdg-16 .sdg-logo {
  background-image: url("../img/sdg/sdg16.svg");
}
.sdg-16.active ~ hr {
  margin-left: 88.888%;
  background-color: #02558b;
}
.sdg-16:hover ~ hr {
  margin-left: 88.888% !important;
  background-color: #02558b !important;
}

.sdg-17 {
  background-color: #183667;
}
.sdg-17 .sdg-logo {
  background-image: url("../img/sdg/sdg17.svg");
}
.sdg-17.active ~ hr {
  margin-left: 94.4435%;
  background-color: #183667;
}
.sdg-17:hover ~ hr {
  margin-left: 94.4435% !important;
  background-color: #183667 !important;
}

/* SDG graph */
.sdg-graph {
  display: inline-table;
  width: 100%;
  margin-top: 120px;
}
.sdg-graph .sdg {
  width: 5.38%;
  height: auto;
  margin-right: 0.5%;
}
.sdg-graph .sdg .sdg-bar {
  position: absolute;
  width: 100%;
}
.sdg-graph .sdg .sdg-bar .sdg-quantity {
  font-size: 10px;
  color: #a0a0a0;
  margin-top: -15px;
}

/* SDG nav */
.sdg-nav .sdg {
  width: 5.0555%;
  height: auto;
  padding: 0;
  margin: 0 0.5% 0 0;
  background-color: transparent;
}
.sdg-nav .sdg img {
  opacity: 0.3;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
@media only screen and (max-width: 767px) {
  .sdg-nav .sdg {
    width: 10.61%;
    margin: 0 0.5% 0.5% 0;
  }
  .sdg-nav .sdg img {
    opacity: 0.25;
  }
  .sdg-nav .sdg .sdg-active {
    display: none;
  }
}
@media only screen and (max-width: 479px) {
  .sdg-nav .sdg {
    width: 15.66%;
    margin: 0 1% 1% 0;
  }
}
.sdg-nav .sdg:hover img, .sdg-nav .sdg.active img {
  opacity: 1;
}
.sdg-nav hr.sdg-active {
  height: 5px;
  width: 5.0555%;
  margin-bottom: 0;
  transition: 0.3s ease-in-out;
  border-top: 2px solid #fafafa;
  float: left;
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .sdg-nav hr.sdg-active {
    display: none;
  }
}

/* SDG box */
.sdg-box {
  border-bottom: 3px solid transparent;
  border-image: url("../img/sdg/sdg-line.png");
  border-image-slice: 6;
  border-image-repeat: repeat;
  padding: 20px 0 10px;
  position: relative;
  margin-bottom: 1.2em;
}

/***********/
/* Gallery */
/***********/

.gallery {
  position: relative;
  display: block;
  margin: 0 auto;
}
.gallery .img-responsive {
  max-width: initial;
  width: 100%;
}
.gallery .gallery-caption {
  /* On iPhone and iPad, don't hide the caption => Hide only when the hover functionality is available.
  We use the negation because IE and FF does not support hover media query */
  opacity: 0;
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.gallery .gallery-caption .gallery-caption-content {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.gallery .gallery-caption .gallery-caption-content .gallery-caption-content-txt {
  padding: 0 10px;
}
.gallery:hover .gallery-caption {
  opacity: 0.9;
}
.gallery:focus {
  outline: none;
}

@media not (hover:none) {
  .gallery .gallery-caption {
    opacity: 0.75;
  }
}