/*!
 * Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template/scrolling-nav)
 * Copyright 2013-2020 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-scrolling-nav/blob/master/LICENSE)
 */
@media only screen and (max-width: 720px) {

  body{ 
    font-size: 1em; 
  }

  .row > h2 {
    font-size: 1.3em;
  }

  .description > h2 {
    font-size: 1.3em;
  }
  
  .row > img {
    display: none;
  }

  .property {
    width: 20vw;
  }

  .grade {
    width: 25vw;
  }

  .app {
    padding-left: 5%;
    padding-right: 5%;
  }

  table {
    table-layout: fixed;
    width:100%;
  }

  section:not(#about) {
    padding-top: 8vh;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 8vh;
  }

  #about {
    padding: 8%
  }

  .nanum {  
    font-size:30px;
  }

}

@media only screen and (min-width: 720px) {

  .nanum {  
    font-size: 3vw;
  }

}

html,body {
  position: relative;
  margin: 0;
  font-family:'Nanumbarungothic';
  height: 100%;
}

header {
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.pexels.com/photos/1595104/pexels-photo-1595104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}

section {
  padding-top: 5%;
  padding-bottom: 5%;
}

.row > div[class*='col-lg-4'] {
  display: flex;
  flex:1 0 auto;
  padding: 8px;
}

.row > img {
  object-fit: contain;
}

.description > h2 {
  font-weight: bold;
  padding-bottom: 3%;
}

.row > h2 {
  font-weight: bold;
  padding-bottom: 3%;
}

.description > p {
  text-align: justify;
  line-height: 180%;
}

.nanum {  
  font-weight: 700;
  font-family: 'NanumSquare';
  color:aliceblue;
  text-align: right; 
}

.card-img {
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}

.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.02);
  opacity:0.3;
}

.card:hover .card-img-overlay{
    color: black;
}

.card-img-overlay>h4, .card-img-overlay>p{
    visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
    visibility: visible;
}

.card:hover .card-img-overlay p{
    font-size:1.5em;
    letter-spacing:0.02em;
}