@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    --primary-black: #383D41;
    --primary-warning: #FFF3CD;
    --primary-blue: #2c6fde;
}



body {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.125rem;
    background-color: #fefefe;
    padding: 0;
    margin: 0;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    list-style: none;
}

nav {
  margin-top:1.375rem;
  font-size: 1.225rem;
  color: var(--primary-blue);
}

nav a {
  color: var(--primary-blue);
}



.main-content {
  width: 70%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 499px) {
    .main-content {
      width: 100%;
      margin: 0;
      padding: 0;
    }
}



.pure-flex {
    display: block;
}

@media screen and (min-width: 770px) {
    .pure-flex {
        display: flex;
        justify-content: start;
        column-gap: 4rem;
    }
}

.pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 5em;
    margin: 0 1em 0 0;
}

aside {
  background: var(--primary-warning);
  border-radius: 3px;
  color: #fff;
  padding: .3em 1em;
}

aside p {
  color: var(--primary-black);
}

#not-found-classrooms {
  display: none;
}



.material-icons {
    display:inline-flex;
    vertical-align: text-bottom;
}

a {
    color: var(--primary-black);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-weight: 700;
}

a:hover,
a:focus {
    opacity: .8;
}

.btn, button {
    font-family : inherit;
    font-size: 1em;
}

.search {
    margin-bottom: 2rem;
}

select, input {
    font-family : inherit;
    font-size: 1em;
}
.pure-form-aligned .pure-control-group label {
    text-align: left; 
    /* display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0; */
}

.features-list {
    list-style-type: none;
    padding-left: 0;
}

.pure-form-message-inline {
    padding-left:0;

}

.pure-form .pure-input-1-5 {
    width: 5rem;
}

.pure-input-1-4 {
    width: 5rem;
}

.pure-table {
    width: 100%;
}

.pure-results-count {
    margin-bottom: 1rem;
    font-weight: 500;
}


.pure-form .pure-checkbox {
    margin-bottom: 1em;
}


.details-top,
.details-bottom {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media screen and (max-width: 600px) {
    .main-search {
        width: 100%;
    }
    .pure-results {
        margin-top: 1rem;
    }
    
}
/* gallerie de photos */
body {
  margin: 0.5rem;
}


.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: .5em;
  row-gap: .5em;
}


.gallery li {
  flex: 1 1 20rem;
  min-height: 20vh;
  /* max-height: calc(50vh - 0.5rem); */
}

.gallery img {
  object-fit: cover;
  width: 100%;
  height: auto;
  opacity: 0.8;
  transition: 180ms opacity ease-in-out;
}

.gallery img:hover {
  opacity: 1;
}

/* panorama */

.panorama {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

#panorama-podium,
#panorama-class
 {
  --aspect-ratio: calc(16 / 9);
  --height: 440px;
  --width: calc(var(--height) * var(--aspect-ratio));
  
  height: var(--height);
  width: var(--width);
  max-width: 100%
  
}