/* Enter Your Custom CSS Here */

/* Make bootstrap button smaller for mobile devices */


@media screen and (max-width: 340px) {
  .btn-group-lg>.btn, .btn-lg {
      font-size: 15px;
  }
}

.ip-docs {
  width: 100%;
}

.summary {
  float: left;
  padding-top: 20px;
}

.ip-paper {
  float: left;
  position: relative;
  width: 20%;
  height: 350px;
  margin: 1%;
}

.paper-name {
 font-family: arial;
}


@media screen and (max-width: 1309px) {
 	.ip-paper {
   	width: 30%;
    height: 375px;
  }
}

@media screen and (max-width: 917px) {
 	.ip-paper {
   	width: 46%;
    margin: 2%;
  }
}

@media screen and (max-width: 840px) {
 	.ip-paper {
   	width: 42%;
    margin: 4%;
  }
  	.paper-name {
   	font-family: arial;
    position: absolute;
    bottom: 25px;
    left: 0; 
  }
}

@media screen and (max-width: 616px) {
 	.ip-paper {
   	width: 92%;
    margin: 4%;
  }
  .paper-name {
  left: none;
  }
}

.ip-paper img {
  animation-name: paperDown;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}

.ip-paper img:hover {
  box-shadow: 0px 10px 20px black;
  animation-name: paperUp;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}


@keyframes paperUp {
	from {transform: translateY(0);}
    to {transform: translateY(-10px);}
  	from {box-shadow: 0px 0px 0px black; }
  	to {box-shadow 0px 10px 20px black; }
}


@keyframes paperDown {
	from {transform: translateY(-10px);}
    to {transform: translateY(0);}
    from {box-shadow: 0px 10px 20px black; }
  	to {box-shadow 0px 0px 0px black; }
}

/* Original box-shadow: 0px 10px 30px black */
.ip-title {
	width: 300px;
  	height: 100px;
}

.ip-search-icon {
  position: absolute;
  position: absolute;
  left: 50%;
  font-size: 100px;
  margin-left: -50px;
}