.transports-block {
  margin: 75px 0;
}

.transports-banner {
  width: 100%;
	padding: 35px 0;
	background-color: rgb(42, 42, 42);
}

.transports-banner .site-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.transports-banner-block {
	max-width: 33.33%;
	padding-left: 75px;
}

.transports-banner-block:first-of-type {
	padding-left: 0;
}

.transports-banner-block h3 {
	line-height: 1.2;
	color: rgb(255, 255, 255);
}

.transports-banner-block p {
	margin: 0;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.1;
	font-style: italic;
	color: rgba(255, 255, 255, 0.7);
}

.smaller-text {
	font-size: 30px;
	font-weight: 300;
	margin-left: 0.5em;
	font-style: italic;
	letter-spacing: 0px;
	color: rgba(255, 255, 255, 0.7);
}

.transports-banner-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.transports-banner-link p {
	max-width: 50%;
}

.transports-banner-link p.available {
	color: rgb(130, 190, 130);
}

.transports-banner-link a {
	font-size: 20px;
	font-weight: 700;
	margin-left: 25px;
	padding: 10px 20px;
	font-style: italic;
	text-decoration: none;
	color: rgb(255, 255, 255);
}

.transports-banner-link a.not-available {
	background-color: var(--darkred);
}

.transports-banner-link a.not-available:hover,
.transports-banner-link a.not-available:focus {
	background-color: var(--lightred);
}

.transports-banner-link a.available {
	background: linear-gradient(270deg, rgb(130, 190, 130), rgb(100, 165, 100));
	background-size: 400% 400%;

	-webkit-animation: buttonBg 2.5s ease infinite;
	-moz-animation: buttonBg 2.5s ease infinite;
	animation: buttonBg 2.5s ease infinite;
}

.transports-banner-link a.available:hover,
.transports-banner-link a.available:focus {
	background: linear-gradient(270deg, rgb(130, 190, 130), rgb(160, 220, 160));
	background-size: 400% 400%;

	-webkit-animation: buttonBg 2.5s ease infinite;
	-moz-animation: buttonBg 2.5s ease infinite;
	animation: buttonBg 2.5s ease infinite;
}

.transports-banner-link a.available:focus:not(:hover) {
	outline: 3px solid rgb(130, 190, 130);
}

@-webkit-keyframes buttonBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes buttonBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes buttonBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


/*Editor only*/


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Responsive 1500px - 1451px
--------------------------------------------------------------*/
@media screen and (max-width: 1500px) and (min-width: 1451px) {

	.transports-banner-link a {
		font-size: 20px;
		margin-left: 25px;
		padding: 10px 15px;
	}

}

/*--------------------------------------------------------------
## Responsive 1450px - 1025px
--------------------------------------------------------------*/
@media screen and (max-width: 1450px) and (min-width: 1025px) {

	.transports-block {
	  margin: 50px 0;
	}

	.transports-banner {
		padding: 25px 0;
	}

	.transports-banner .site-wrapper {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.transports-banner-block {
		max-width: 33.33%;
		padding-left: 35px;
	}

	.transports-banner-block h3 {
		font-size: 45px;
	}

	.transports-banner-block p {
		font-size: 22px;
	}

	.smaller-text {
		font-size: 22px;
	}

	.transports-banner-link {
		flex-direction: row;
		align-items: center;
	}

	.transports-banner-link p {
		max-width: 50%;
	}

	.transports-banner-link a {
		font-size: 16px;
		margin-left: 15px;
		padding: 10px 12px;
	}

}

/*--------------------------------------------------------------
## Responsive 1024px - 641px
--------------------------------------------------------------*/
@media screen and (max-width: 1024px) and (min-width: 641px) {

  .transports-block {
	  margin: 35px 0;
	}

	.transports-banner {
		padding: 25px 0;
	}

	.transports-banner .site-wrapper {
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.transports-banner-block {
		width: 50%;
		max-width: 50%;
		padding-left: 25px;
	}

	.transports-banner-block:first-of-type {
	}

	.transports-banner-block:nth-of-type(2) {
		order: 3;
		padding-left: 0;
		margin-top: 20px;
	}

	.transports-banner-block:nth-of-type(3) {
		order: 2;
	}

	.transports-banner-block p {
		font-size: 22px;
	}

	.smaller-text {
		font-size: 22px;
	}

	.transports-banner-link {
		flex-direction: row;
		align-items: center;
	}

	.transports-banner-link p {
		max-width: 50%;
	}

	.transports-banner-link a {
		font-size: 16px;
		margin-left: 15px;
		padding: 10px 12px;
	}


}

/*--------------------------------------------------------------
## Responsive 640px - 300px
--------------------------------------------------------------*/
@media screen and (max-width: 640px) and (min-width: 401px) {

	.transports-block {
	  margin: 25px 0;
	}

	.transports-banner {
		padding: 25px 0;
	}

	.transports-banner .site-wrapper {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.transports-banner-block {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		margin-top: 15px;
	}

	.transports-banner-block:first-of-type {
		margin-top: 0;
	}

	.transports-banner-block:nth-of-type(2) {
		order: 3;
	}

	.transports-banner-block:nth-of-type(3) {
		order: 2;
	}

	.transports-banner-block p {
		font-size: 22px;
	}

	.smaller-text {
		font-size: 22px;
	}

	.transports-banner-link {
		flex-direction: row;
		align-items: center;
	}

	.transports-banner-link p {
		max-width: 50%;
	}

	.transports-banner-link a {
		font-size: 16px;
		margin-left: 15px;
		padding: 10px 12px;
	}

}

/*--------------------------------------------------------------
## Responsive 640px - 300px
--------------------------------------------------------------*/
@media screen and (max-width: 400px) and (min-width: 300px) {

	.transports-block {
	  margin: 25px 0;
	}

	.transports-banner {
		padding: 25px 0;
	}

	.transports-banner .site-wrapper {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.transports-banner-block {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		margin-top: 15px;
	}

	.transports-banner-block:first-of-type {
		margin-top: 0;
	}

	.transports-banner-block:nth-of-type(2) {
		order: 3;
	}

	.transports-banner-block:nth-of-type(3) {
		order: 2;
	}

	.transports-banner-block p {
		font-size: 18px;
	}

	.smaller-text {
		font-size: 18px;
	}

	.transports-banner-link {
		flex-direction: row;
		align-items: center;
	}

	.transports-banner-link p {
		max-width: 50%;
	}

	.transports-banner-link a {
		font-size: 16px;
		margin-left: 15px;
		padding: 10px 12px;
	}


}