/* TO DO
- understand (at)media inheritance
- from rem to em
- from px to em ?
- do we need #wrapper ?
- TO BE SOLVED for not having to doulbe touch on iPad
*/

header.topMenu {
  padding: 1rem 1rem 0 1rem;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: rgb(15, 15, 15);
}

section {
  width: 100%;
}

img {
  width: 100%;
}

h1 {
  text-align: center;
  font-size: 3.5rem;
  font-weight: 100;
  color: white;
}

h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 100;
  color: white;
}

h3 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 100;
  color: white;
}

.description {
  text-align: center;
  font-size: 1.2em;
  font-weight: 400;
  color: rgb(170, 170, 170);;
}

.thumbTitle {
  margin: 0;
  padding-left: 0.4rem;
  height: 1.1rem;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 100;
  color: rgb(180, 180, 180);;
}


/**
 ** Mosaic structure
 **/

#wrapper { /* ?????? */
  padding: 5px 25px 100px 25px;
  max-width: 1200px;
  margin: 0 auto;
}

#portfolio {
  margin: 30px 0 0 0;
}

article {
  float: left;
  width: 30%;
  margin: 0 1.6% 3% 1.6%;
  opacity: 1;
  transition: 0.2s;
  -webkit-transition: 0.2s;
}

/* TO BE SOLVED for not having to doulbe touch on iPad */
@media (min-width: 1025px) {
  article:hover {
    opacity: 0.7;
  }
}

/* trick to maintain 16/9 ration for the video iframe */
.video-wrapper {
  display: none; /* don't display if not mobile */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}



/**
 ** media queries
 **/
@media (max-width: 780px) {
  article {
    width: 45%;
    margin: 0 2.5% 3.3% 2.5%;
  }
}

/* mobile landscape */
@media (max-device-width: 640px) {
  #wrapper {
    padding: 0px 0px 40px 0px;
  }

  article {
    width: 45%;
    margin: 0 2.5% 3.3% 2.5%;
  }

  .mfp-iframe {
    display: none;
  }

  /* trick to maintain 16/9 ration for the video iframe */
  .video-wrapper {
    display: block;
  }
}


/* @media screen and (max-width: 550px) { */
@media (max-width: 550px) {
  #wrapper {
    padding: 10px 0px 40px 0px;
  }

  #portfolio {
    padding: 0;
    text-align: center;
  }

  article {
    float: none;
    display: inline-block;
    width: 90%;
    margin: 30px 0 0 0;
  }

  .thumbTitle {
    padding-top: 0.4rem;
    height: 1.1rem;
    font-size: 1.1rem;
  }

  .mfp-iframe {
    display: none;
  }

  .video-wrapper {
    display: block;
  }
}



/**
 ** clearfix
 **/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0; height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}