@import url("./colours.css");

/*
 * Globals
 */
/*
 * Base structure
 */
body {
  font: 400 15px/1.8 "Noto Sans", sans-serif;
  color: var(--brand-alternative);
}

.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.circle-images-container {
  padding: 20px 120px;
}

.bg-brand-primary {
  background-color: var(--dark-green);
  border: none;
  color: var(--french-gray);
}

.bg-brand-primary h3 {
  color: #fff;
}

h3,
h4 {
  margin: 10px 0 30px 0;
  letter-spacing: 5px;
  font-size: 20px;
  color: var(--dark-green);
}

.asterik-point {
  color: #fff;
}

/*
 * Header/Footer
 */
/* Add a dark background color with a little bit see-through */
.navbar {
  margin-bottom: 0;
  background-color: var(--brand-alternative);
  border: 0;
  letter-spacing: 4px;
  opacity: 0.9;
  font-family: Ubuntu, sans-serif;
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

/* Add a gray color to all navbar links */
.navbar li a,
.navbar .navbar-brand {
  color: var(--french-gray) !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
  color: #fff !important;
}

/* The active link */
.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
  border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
  color: #fff;
  background-color: #555 !important;
}

/* Dropdown links */
.dropdown-menu li a {
  background-color: #fff !important;
  color: #000 !important;
}

/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
  background-color: var(--emerald) !important;
}

.nav-tabs li a {
  color: var(--dark-green);
}

/* Add a dark background color to the footer */
footer {
  background-color: var(--dark-green);
  color: var(--french-gray);
  padding: 32px;
}

footer a {
  color: #f5f5f5;
}

footer a:hover {
  color: var(--earth-yellow);
  text-decoration: none;
}

/*
 * Images
 */
.circle-images {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: 80%;
  height: 80%;
  opacity: 0.7;
}

.circle-images:hover {
  border-color: #f1f1f1;
}

.mad-logo {
  height: 100%;
}

/*
 * Carousel
 */
.carousel-inner img {
  width: 100%;
  /* Set width to 100% */
  margin: auto;
}

.carousel-caption h3 {
  color: #fff !important;
}

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
    /* Hide the carousel text when the screen is less than 600 pixels wide */
  }
}

/*
 * Buttons
 */
.cta-container {
  padding: 1rem;
}

/* Green buttons with extra padding and without rounded borders */
.btn,
.btn-alternative {
  padding: 10px 20px;
  border-radius: 0;
  transition: 0.2s;
  max-width: 100%;
  white-space: normal;
}

.btn {
  border: 1px solid var(--emerald);
  background-color: var(--emerald);
  color: var(--dark-green);
}

.btn-alternative {
  border: 1px solid var(--earth-yellow);
  background-color: var(--earth-yellow);
  color: var(--brand-alternative);
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover,
.btn:focus {
  border: 1px solid #fff;
  background-color: #fff;
  color: var(--brand-alternative);
}

.btn-alternative:hover,
.btn-alternative:focus {
  border: 1px solid var(--french-gray);
  background-color: var(--french-gray);
  color: var(--brand-alternative);
}

.image-grid-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.image-grid-column {
  flex: 25%;
  max-width: 50%;
  padding: 0 4px;
}

.image-grid-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .image-grid-column {
    flex: 50%;
    max-width: 50%;
  }

  .zoom {
    width: 250px;
    height: 250px;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .image-grid-column {
    flex: 100%;
    max-width: 100%;
  }

  .zoom {
    width: 200px;
    height: 200px;
  }
}

@media screen and (min-width: 800px) {
  .zoom {
    width: 350px;
    height: 350px;
  }
}

.thumbnail p {
  margin-top: 15px;
  color: #555;
}

.margin-bm-1 {
  margin-bottom: 1rem;
}

.margin-rt-1 {
  margin-right: 1rem;
}

.social-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer Classes */
.pb-3 {
  padding-bottom: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.justify-content-center {
  display: flex;
  justify-content: center !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.zoom {
  padding: 50px;
  transition: transform 0.2s;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(3); /* IE 9 */
  -webkit-transform: scale(3); /* Safari 3-8 */
  transform: scale(3);
}