/*

 DEMO: http://tutsplus.github.io/create-a-masked-background-effect-with--background-attachment--fixed--/ 
 TUTORIAL: http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
 
*/

 
.backg-hover-effect img {
  max-width: 100%;
  height: auto;
}

.backg-hover-effect h1 {
  font-size: 3em;
  margin: 0.563em 0;
}
.backg-hover-effect h2 {
  font-size: 2.25em;
  margin: 0.625em 0;
}
.backg-hover-effect h3 {
  font-size: 1.5em;
  margin: 1.313em 0;
}
.backg-hover-effect h4 {
  font-size: 1.313em;
  margin: 1.313em 0;
}
.backg-hover-effect h5 {
  font-size: 1.125em;
  margin: 1.313em 0;
}
.backg-hover-effect h6 {
  font-size: 1em;
  margin: 0.75em 0;
}
.backg-hover-effect .smallscreen {
  display: none;
}
.backg-hover-effect .content {
  font-size: 1.475rem;
  background-size: 49% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.backg-hover-effect .separator {
  font-size: 1.875rem;
  padding: 1.618em 0;
  text-align: center;
}
.backg-hover-effect .right-bghover {
  padding: 1.618em 6.472em 3.236em 50%;
  background-position: 0 50%;
}
.backg-hover-effect .left-bghover {
  padding: 1.618em 50% 3.236em 6.472em;
  background-position: 100% 50%;
}
.backg-hover-effect .illustration_01 {
  /* background-color: #e74c3c */
  background-image: url("../img/illustration_01.png");
}
.backg-hover-effect .illustration_02 {
 /* background-color: #f39c12 */
  background-image: url("../img/illustration_02.png");
}
.backg-hover-effect .illustration_03 {
  /* background-color: #18bc9c */
  background-image: url("../img/illustration_03.png");
}
.backg-hover-effect .illustration_04 {
  /* background-color: #3498db */
  background-image: url("../img/illustration_04.png");
}
@media (max-width: 106.25rem) {
  .backg-hover-effect .wrapper,
  .backg-hover-effect .separator {
    font-size: 1.6875rem;
  }
}
@media (max-width: 93.75rem) {
 .backg-hover-effect  .content,
 .backg-hover-effect  .separator {
    font-size: 1.5rem;
  }
 .backg-hover-effect  .right-bghover {
    padding: 1.618em 4.854em 1.618em 50%;
  }
 .backg-hover-effect  .left-bghover {
    padding: 1.618em 50% 1.618em 4.854em;
  }
}
@media (max-width: 81.25rem) {
  .backg-hover-effect .content,
  .backg-hover-effect .separator {
    font-size: 1.3125rem;
  }
  .backg-hover-effect .right-bghover {
    padding: 1.618em 3.236em 1.618em 45%;
    background-size: 44% auto;
    background-position: 0 55%;
  }
 .backg-hover-effect  .left-bghover {
    padding: 1.618em 45% 1.618em 3.236em;
    background-size: 44% auto;
    background-position: 100% 55%;
  }
}
@media (max-width: 68.75rem) {
  .backg-hover-effect .content,
 .backg-hover-effect  .separator {
    font-size: 1.125rem;
  }
 .backg-hover-effect  .right-bghover {
    padding: 1.618em 3.236em 1.618em 40%;
    background-size: 39% auto;
    background-position: 0 60%;
  }
 .backg-hover-effect  .left-bghover {
    padding: 1.618em 40% 1.618em 3.236em;
    background-size: 39% auto;
    background-position: 100% 60%;
  }
}
@media (max-width: 50rem) {
 .backg-hover-effect  .smallscreen {
    display: block;
  }
 .backg-hover-effect  .right-bghover {
    padding: 1.618em 3.236em;
    background-image: none;
  }
 .backg-hover-effect  .left-bghover {
    padding: 1.618em 3.236em;
    background-image: none;
  }
}
@media (max-width: 31.25rem) {
.backg-hover-effect   .right-bghover {
    padding: 1.618em 1.618em;
  }
 .backg-hover-effect  .left-bghover {
    padding: 1.618em 1.618em;
  }
}
@media (max-width: 12rem) {
  html {
    min-width: 12rem;
  }
}