/* CSS Document */

body{
	background-color:grey;
}
.card{border:none;
background-color:rgb(95, 131, 160)}


@media (min-width: 300px) {
	  /* show 4 items */
	  .carousel-inner .active,
	  .carousel-inner .active + .carousel-item,
	  .carousel-inner .active + .carousel-item + .carousel-item
	 {
		    display: block;
			  text-align: center;
	}
	
	}


.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item
 {
	      transition: none;
}


.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
	    position: relative;
	    transform: translate3d(0, 0, 0);
}

/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
	      position: relative;
	      transform: translate3d(-100%, 0, 0);
	      visibility: visible;

}

/* farthest right hidden item must be absolue position for animations */

.carousel-inner .carousel-item-prev.carousel-item-right {
	position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    display: block;
	    visibility: visible;

}

/* right or prev direction */

.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
	      position: relative;
	      
	      visibility: visible;
	      display: block;
	      
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  background-size: 100%, 100%;
  
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color:black;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color:black;
}

.header {
	overflow: hidden;
	background-color: #f1f1f1;
	padding: 20px 10px;
  }
  
  .header a {
	float: left;
	color: black;
	text-align: center;
	padding: 12px;
	text-decoration: none;
	font-size: 18px; 
	line-height: 25px;
	border-radius: 4px;
  }
  
  .header a.logo {
	font-size: 25px;
	font-weight: bold;
  }
  
  .header a:hover {
	background-color: #ddd;
	color: black;
  }
  
  .header a.active {
	background-color: dodgerblue;
	color: white;
  }
  
  .header-right {
	float: right;
  }
  
  @media screen and (max-width: 200px) {
	.header a {
	  float: none;
	  display: block;
	  text-align: left;
	}
	
	.header-right {
	  float: none;
	}
  }
  .img-thumbnail{        
    width: 200px; 
    height: 150px;
}

.img-thumbnail img{
	
    width: 100%;
    height: 200px;
    display: block;
}






















