* { margin: 0; padding: 0; }

html { max-width: 100%; min-height: 100}

body { overflow-x: hidden; height: 100%; width: 100%; justify-content: center; align-items: center; text-decoration: none!important; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; }


/*============= CONTENT =============*/

#trucks_main { background: url('../images/backgrounds/tcs_main_logo_background_1.jpg'); background-color: #FFFFFF; border-right: .125em solid #000000; border-left: .125em solid #000000; padding-bottom: 2em; justify-content: center; align-items: center; text-decoration: none!important; }

.trucks_header { padding: 1.5em; }
.trucks_header img { width: 10.0em; height: auto }

.trucks_content { text-decoration: none!important; }

.wrapper { display: flex; justify-content: center; align-items: center; text-decoration: none!important; }
.wrapper a { text-decoration: none!important; }
.tnail--land { width: 3.75em; height: 2.8125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--land img { width: 3.75em; height: 2.8125em; margin: .0125em; padding: .25em; display: block; }
.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
.tnail--port { width: 3.75em; height: 2.8125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--port img { width: 1.9125em; height: 2.8125em; margin: .0125em; padding: .5em; display: block; }
.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }
.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 0.55em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }


pop-black { color: #000000; }

pop-white { color: #FFFFFF; }

pop-orange { color: #FF6C00; }

/*============= MEDIA QUERIES =============*/
@media (min-width: 375px) { 
	
	.cars_header img { width: 12.0em; height: auto }
	.tnail--land { width: 5.4375em; height: 4.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land img { width: 5.4375em; height: 4.0625em; margin: .0125em; padding: .125em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--port { width: 5.4375em; height: 4.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 3.0625em; height: 4.0625em; margin: .0125em; padding: .5em; display: block; }
	.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 0.75em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }
	
}

@media (min-width: 576px) { 

	body { margin: 0; }
	.trucks_header img { width: 13.0em; height: auto }
	.tnail--land { width: 8.75em; height: 6.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land img { width: 8.75em; height: 6.5625em; margin: .0125em; padding: .125em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--port { width: 8.75em; height: 6.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 4.85em; height: 6.5625em; margin: .0125em; padding: .5em; display: block; }
	.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 0.75em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) { 

	.trucks_header img { width: 15.0em; height: auto }
	.tnail--land { width: 9.375em; height: 7.03125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land img { width: 9.375em; height: 7.03125em; margin: .0125em; padding: .125em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--port { width: 9.375em; height: 7.03125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 5.25em; height: 7.03125em; margin: .0125em; padding: .5em; display: block; }
	.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 0.95em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

	.trucks_header img { width: 16.0em; height: auto }
	.tnail--land { width: 13.4375em; height: 10.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land img { width: 13.4375em; height: 10.0625em; margin: .0125em; padding: .125em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--port { width: 13.4375em; height: 10.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 7.05em; height: 10.0625em; margin: .0125em; padding: .5em; display: block; }
	.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 1.15em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }

}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	.trucks_header img { width: 18.0em; height: auto }
	.tnail--land { width: 15.625em; height: 11.71875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land img { width: 15.625em; height: 11.71875em; margin: .0125em; padding: .125em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--port { width: 15.625em; height: 11.71875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 8.25em; height: 11.71875em; margin: .0125em; padding: .5em; display: block; }
	.layer { opacity: 0; position: absolute; display: inline-block; justify-content: center; align-items: center; font-family: 'Inconsolata', monospace; text-align: center; font-size: 1.35em; font-weight: 600; letter-spacing:1px; transition: all 0.5s ease; -webkit-transform: scale(1, 4); -moz-transform: scale(1, 4); -o-transform: scale(1, 4); transform: scale(1, 4); }
	
}

/*============ BOOTSTRAP BREAK POINTS: =============*/

/* Small devices (landscape phones, 544px and up) 


Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/



/*-- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/*-- Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
  z-index: 1000!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999 !important;
}
.fixed {
  z-index: -999!important;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}