/* GENERAL STYLE */

body, p {
  font-family: 'Helvetica Neue', Arial, sans-serif;  
  font-weight: 300;
}

nav {
  border-bottom: solid 3px grey;
}

section {
  padding: 60px 0px;
}

.accordion-toggle, .accordion-toggle:hover, .accordion-toggle:visited, .accordion-toggle:active {
  text-decoration: underline;
  color: #ade;
}


/* HEADER */

.page-header {
  height: 70vh;
  margin-top: 60px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-header h1 {
  font-size: 50px;
  font-weight: bold;
}

.page-header hr {
  border-color: #000000;
  border-width: 3px;
  max-width: 50px;
  margin: 30px auto;
}

.page-header p {
  font-size: 25px;
}

.splash-header {
  color: #fff;
  background-image: url('../assets/img/splash-header-background.jpg');
}

.splash-header-cohort {
  color: #fff;
  background: url('../assets/img/cohort-header-background.jpg') no-repeat center center;
  background-size: cover;
}


/* COLORS */

.rla-primary {
  background-color: #333 !important;
  color: #ddd !important;
}

.rla-primary h1, .rla-primary h2, .rla-primary h3, .rla-primary h4 {
  color: #fff;
}

.rla-secondary {
  background-color: #ddd !important;
  color: #333 !important;
}

.rla-secondary h1, .rla-secondary h2, .rla-secondary h3, .rla-secondary h4 {
  color: #000;
}

.rla-white {
  background-color: white !important;
  color: black !important;
}


/* MODAL */

.modal-title {
  color: black !important;
}

.modal-body {
  color: red !important;
}

/* PORTFOLIO TILES */

.portfolio-tile-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
}

.portfolio-tile {
  border: solid 1px #F8F8F8;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around; 
}

@media screen and (max-width: 600px) {
  .portfolio-tile {
    width: 100%;
    padding: 10px !important;
  } 
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  .portfolio-tile {
    width: 50%;
    padding: 15px !important; 
  } 
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
  .portfolio-tile {
    width: 33.3%;
    padding: 15px !important; 
  } 
}

@media screen and (min-width: 1201px) {
  .portfolio-tile {
    min-height: calc(1/4 * (100vh - 82px));
    width: 25%;
    padding: 15px !important; 
  } 
}

.portfolio-tile h3, .portfolio-tile p {
  margin: 2px; 
}

.portfolio-tile p {
  font-size: .8em; 
}

.portfolio-tile:hover {
  transition: background-color 0.2s ease-out;
  background-color: #2889ED; 
}

  
/* UIKit Style */
  
/* ========================================================================
   Component: Tile
 ========================================================================== */
.uk-tile {
  position: relative;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 40px; }

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-tile {
    padding-left: 30px;
    padding-right: 30px; } }

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 70px;
    padding-bottom: 70px; } }

/*
 * Micro clearfix
 */
.uk-tile::before,
.uk-tile::after {
  content: "";
  display: table; }

.uk-tile::after {
  clear: both; }

/*
 * Remove margin from the last-child
 */
.uk-tile > :last-child {
  margin-bottom: 0; }

/* Size modifiers
 ========================================================================== */
/*
 * XSmall
 */
.uk-tile-xsmall {
  padding-top: 20px;
  padding-bottom: 20px; }

/*
 * Small
 */
.uk-tile-small {
  padding-top: 40px;
  padding-bottom: 40px; }

/*
 * Large
 */
.uk-tile-large {
  padding-top: 70px;
  padding-bottom: 70px; }

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile-large {
    padding-top: 140px;
    padding-bottom: 140px; } }

/*
 * XLarge
 */
.uk-tile-xlarge {
  padding-top: 140px;
  padding-bottom: 140px; }

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-tile-xlarge {
    padding-top: 210px;
    padding-bottom: 210px; } }

/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-tile-default {
  background: #fff; }

/*
 * Muted
 */
.uk-tile-muted {
  background: #f8f8f8; }

/*
 * Primary
 */
.uk-tile-primary {
  background: #1e87f0; }

/*
 * Secondary
 */
.uk-tile-secondary {
  background: #222; }

.news-card {
  width: 100%;
  margin: 5px;
}

.card {
  width: 100%;
  height: 300px;
  margin: 5px !important;
  color: black;
}

.card-container {
  display: flex;
}

.card-img-top {
  min-height: 160px;
}

.workshop-photo-element {
  max-width: 25%;  
}
.workshop-photo {
  width: 100%;
  margin: 0px;
  border: 0px;
  padding: 0px;
}

.workshop-photo-container {
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

a, a:hover, a:visited, a:active {
  color: #ade;
}

#portfolio-content h2 {
  color: black;
}

#portfolio-content p {
  color: black;
}

.modal-body {
  color: black !important;
}

.modal-body img {
  width: 100%;
}