#carouselExampleIndicators .carousel-item img{
  height: 35em;
}

.table {
  background-color: #ececec;
}

.image-thumbnails {
  margin: 4.5%;
}

.image-thumbnails > div{
  text-align: center;
  margin: 3.5% auto 5%;
}

.image-thumbnails > div > a{
  color:  #222222;
  font-size: 1.4em;
}

.image-thumbnails > div:hover{
  color: #000000;
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  -moz-transition: 1s;
  -webkit-transition: 1s;
  z-index: 5;
}

.image-thumbnails > div a:hover {
  text-decoration: none;
}

.image-thumbnails img {
  max-width: 6em;
  max-height: 6em;
  border-radius: 100%;
}

.image-thumbnails a:hover img{
  opacity: 0.5;
  transition: opacity 0.6s;
}

.image-thumbnails h4 {
  margin-top: 0.5em;
}

/*------------------DIFERENT SCREENS----------------------*/
@media screen and (max-width: 1050px) {
  #carouselExampleIndicators .carousel-item img{
    height: 25em;
  }

  #special-msg {
    width: 60%;
    height: 40%;
    padding-top: 3%;
  }
}

@media screen and (max-width: 580px) {
  #carouselExampleIndicators .carousel-item img{
    height: 18em;
    margin-top: 25px;
  }

  #special-msg {
    width: 99%;
    height: 45%;
    padding-top: 6%;
  }

 .image-thumbnails > div:first-of-type{
   margin-top: 8%;
 }
}

@media screen and (min-width: 1920px) {
  #carouselExampleIndicators .carousel-item img{
    height: 55em;
  }

 .image-thumbnails{
   margin-top: 4%;
 }

 .image-thumbnails > div{
   margin-bottom: 0;
 }

 .image-thumbnails a {
   margin-left: 0;
   font-size: 2.5em;
 }
 .image-thumbnails img {
   max-width: 9em;
   max-height: 9em;
 }
}

/*------------------POP UP NOTIFICATION----------------------*/

#special-msg {
	width: 30%;
	height: auto;
	margin: 1%;
  padding: 1%;
  position: fixed;
	text-align: center;
  border-radius: 22px;
	animation: fadeIn 1s ease-in both;
  animation-delay: 1s;
  font-size: 0.9em;
  color: white;
  z-index: 2;
  overflow: hidden;
  margin-top: -67px ;
}

#special-msg h3 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 3%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 0.97 ;
		transform: translate3d(0, 0, 0);
	}
}