@charset "utf-8";
@import url("http://fonts.googleapis.com/css?family=Oswald");
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

a:link, a:visited, a:active, a:hover, a:focus {text-decoration: none; color: #000000;}

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

*:focus {
    outline: none;
}

html {
    background: white;
}

body {
    font-family: 'Nanum Gothic', 'Oswald';
    padding: 0;
    background: transparent;
}

.grid {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 1px;
}

.item {
    padding: 10%;
    display: grid;
    place-items: center;
	background-position:center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: content-box;
}

.item::before {
      content: "";
      display: block;
      padding-bottom: 100%;
      grid-area: 1 / 1 / 2 / 2;
}

.item > img { 
     width: 100%;
     height: 100%;
      //grid-area: 1 / 1 / 2 / 2;
      transform: translate(-50%, -50%);
}

.gridB {
    background: transparent;
    display: grid;
    width:100%;
    margin: 0;
    min-height: 343px;
    grid-template-columns: repeat(auto-fit, minmax(343px, auto));
    grid-auto-rows: minmax(343px, auto);
    grid-gap: 0;
    gap: 1px;
    justify-content: center;
    align-content: center;
	-o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.grid-ani {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

.itemB {
    width: 100%
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: lightgrey !important;
}

.logo {
    width: 186px;
    height: auto;
    float: left;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    opacity: 0.5;
}
 
.logo:hover {
    opacity: 1;
}

.finder {
  width: 40px;
  height: 40px;
  float: right;
  bottom: 10px !important;
  right: 10px !important;
  position: fixed;
  background-color: black;
  border-radius: 50%;
  text-align: center;
}

.finder > i {
  margin-top: 12px;
  color: white;
}

md-dialog {
	max-width: 700px;
	max-height: 90%;
	border-radius: 0;
	box-shadow: none;
	border: 1px solid lightgrey;
	padding: 10px;
}

md-backdrop.md-opaque {
	opacity: .80;
	background-color: white;
}

.dialog-close {
  width: 40px;
  height: 40px;
  float: right;
  top: 10px;
  right: 10px;
  position: fixed;
  background-color: black;
  border-radius: 50%;
  text-align: center;
}

.card-img {
  width: 100%;
  height: 180px;
  padding:15px;
  background-size: contain;
  background-color: #f4f2f3;
  background-repeat: no-repeat;
  background-position: center; 
  background-origin: content-box;
  cursor: pointer;
}

.card-img2 {
  width: 100%;
  height: 200px;
  padding: 0px;
  background-size: contain;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center; 
  background-origin: content-box;
  cursor: pointer;
}

.card-inside {
  cursor: pointer;
	height:30px;
}

.card-description {
	text-align:center;
	margin-top:5px;
}

.add-item {
    float: right;
    top: 10px;
    right: 10px;
    position: fixed;
}
.edit-item {
  margin-bottom: 10px;
}

@media (max-width:700px) {
    .grid {
	  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	.logo {
		width: 60px;
	}
}

@media (min-width:701px) and (max-width:900px) {
    .grid {
	  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	.logo {
		width: 100px;
	}
}