/* GENERAl */ 

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

/* html,
body {
  font-family: 'Raleway', sans-serif;
  font-size: 100%;
  font-weight: 300;
  color: #505050;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background: linear-gradient(rgba(237, 215, 215, 0.24),rgba(0, 0, 0, 0.49)), url(https://static.pexels.com/photos/734004/pexels-photo-734004.jpeg) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;

} */

/* REUSABLE COMPONENTS */

h2 {
  color: #fff;
  font-family: 'Playfair Display', Serif;
  font-size: 180%;
  font-weight: 300;
  
}

p {
  color: rgb(0, 0, 0);
  line-height: 120%;
  margin-bottom: 10px;
}

a {
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  border-radius: 20px;
  font-size: 120%;
}

/* MAIN */

.main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
}
/* .section-content {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  width: 75%;
  max-width: 500px;
  margin: 5px auto;
  padding: 10px 10px;
} */

.content-wrapper {
  display: inline-block;
  width: 100%;
  /* margin: ; */
  text-align: center;
}


.box {
  width: 100%;
  margin: 10;
  padding: 10%;
  border: 1px hidden;
  position: relative;
}

.box-1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.2)),url(https://images.pexels.com/photos/545331/pexels-photo-545331.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 10px 10px 0 0;
}

.box-2 {
  background: linear-gradient(rgb(252, 252, 252),rgba(255, 255, 255, 0.2));
  background-size: cover; 
  /* border-radius: 0 0 10px 10px */
}

.first {
  display: block;
  position: relative;
  max-width: 100%;
}

.second {
  position: relative;
  padding: 20px;
  border: 1px solid #fff;
}

.box-1 .second {
  opacity: 0;
  backface-visibility: hidden;
}

.box-2 .second {
  opacity: 0;
  backface-visibility: hidden;
}

.box-1:hover {
  background-image: linear-gradient(rgba(134, 89, 89, 0.88),rgba(134, 89, 89, 0.74)),url(https://images.pexels.com/photos/545331/pexels-photo-545331.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
  transition: background-image 0.3s;

}
.box-1:hover .second {
  opacity: 1;
  transition: opacity 0.8s;
}

.box-1:hover .first {
  opacity: 0;
}


.box-2:hover {
  background: url('../img/brushBlue.jpg');
  background-size: cover; 
  transition: background 2s;
}

.box-2:hover .second {
  opacity: 1;
  transition: opacity 0.8s;
}

/* .box-2:hover .first {
  opacity: 0;
} */


/* Media queries */ 


@media screen and (max-width: 500px) {
  body {
      height: auto;
  }
  p {
      font-size: 90%;
  }
}

@media screen and (max-height: 500px) {
body {
  height: auto;
}
}