.helmet-animation{
	height: 200px;
}

.container {
  display: flex;
  width: 1040px;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.card {
  margin: 10px;
  background-color: #C6273B;
  border-radius: 22px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 300px;
}

.card-header img {
  width: 80%;
  height: 300px;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  cursor: pointer;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5x;
  min-height: 150px;
  background-color: #C6273B;
  text-align: center;
}


.card-body p {
  font-size: 13px;
  margin: 0 0 40px;
}
.user {
  display: flex;
  margin-top: auto;
}

.user img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.user-info h5 {
  margin: 0;
}
.user-info small {
  color: #545d7a;
}

.page-breaker{
	margin-top: -7px;
}

.modalDriver{
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:25%;
top:25%;
width:50%;
height:60%;
overflow:auto;
background-color:black;
border: 3px solid #33CCCC;
}

.modalDriver-content{
margin: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-38%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:1;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden;
}


.driver-close {
text-decoration:none;
float:right;
font-size:24px;
font-weight:bold;
color:white;
cursor: pointer;
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

.pagination {
		display: flex;
		justify-content: center;
	}

	.pagination a {
		color: white;
		float: center;
		padding: 8px 16px;
		text-decoration: none;
	}
	
	.pagination a.active {
		background-color: red;
		color: white;
	}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.driver-modal-img{
	max-width:70%;
}


@media (min-width: 300px) and (max-width: 599px){	
	.helmet-animation{
		height: 150px;
	}

	.card-header img {
		width: 70%;
		height: 200px;
		object-fit: fill;
	}
	
	.modalDriver{
		z-index:1;
		display:none;
		padding-top:10px;
		position:fixed;
		left:4%;
		top:25%;
		width:90%;
		height:50%;
		overflow:auto;
		background-color:black;
		border: 3px solid #33CCCC;
	}
	
	.modalDriver-content{
		margin: auto;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.driver-modal-img{
		max-width:100%;
	}
}