* { 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; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; }


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

#links_main { background: url('../images/backgrounds/tcs_main_logo_background_1.jpg'); background-color: #FFFFFF;  justify-content: center; align-items: center; }

.links_header { padding: 0.001em;  }
.links_header img { width: 7.0em; height: auto; }

.links_navagation .navbar { max-height: 2em!important; max-width: 100%!important; background: #FF6C00!important; justify-content: center; align-items: center; }

.links_navagation .navbar .nav-item:hover .nav-link { color: #000000!important;  }
.links_navagation .navbar .navbar-expand .navbar-nav a.nav-link { padding: 0 .25em!important; }

.links_content { height: 9.0em; overflow-y: hidden;  }
.links_content .row { padding-top: 0.25em!important; }

.links_content h1 { font-family: 'Copperplate Gothic'; font-size:  150%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h2 { font-family: 'Copperplate Gothic'; font-size:  140%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h3 { font-family: 'Copperplate Gothic'; font-size:  130%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h4 { font-family: 'Copperplate Gothic'; font-size:  120%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h5 { font-family: 'Copperplate Gothic'; font-size:  110%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h6 { font-family: 'Copperplate Gothic'; font-size:  90%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h7 { font-family: 'Copperplate Gothic'; font-size:  80%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h8 { font-family: 'Copperplate Gothic'; font-size:  70%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
.links_content h9 { font-family: 'Copperplate Gothic'; font-size:  60%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }

.wrapper { display: flex; padding-top: 0.125em; justify-content: center; align-items: center; }

.tnail--land { width: 3.125em; height: 1.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--land:hover { box-shadow: 0 0 .025em .025em #000000; }
.tnail--land img { width: 3.125em; height: 1.0625em; margin: .0125em; padding: .125em .25em; display: block; }
.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }

.tnail--lfill { width: 3.125em; height: 1.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--lfill img { width: 3.125em; height: 1.0625em; margin: .0125em; padding: .125em .25em; display: block; }

.tnail--port { width: 3.125em; height: 1.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--port:hover { box-shadow: 0 0 .025em .025em #000000; }
.tnail--port img { width: 0.45em; height: 1.0625em; margin: .0125em; padding: .125em .25em; display: block; }
.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }

.tnail--pfill { width: 3.125em; height: 1.0625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
.tnail--pfill img { width: 0.45em; height: 1.0625em; margin: .0125em; padding: .125em .25em; 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.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) {
	
	.links_content { height: 11.0em; overflow-y: hidden;  }
	.links_navagation .navbar { max-height: 2em!important; background: #FF6C00!important; justify-content: center; align-items: center; }
	.tnail--land { width: 4.6875em; height: 1.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--land img { width: 4.6875em; height: 1.5625em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--lfill { width: 4.6875em; height: 1.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--lfill img { width: 4.6875em; height: 1.5625em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--port { width: 4.6875em; height: 1.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--port img { width: 0.75em; height: 1.5625em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }
	.tnail--pfill { width: 4.6875em; height: 1.5625em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--pfill img { width: 0.5625em; height: 1.5625em; margin: .0125em; padding: .125em .25em; 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.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); }
	.links_content h1 { font-family: 'Copperplate Gothic'; font-size:  150%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h2 { font-family: 'Copperplate Gothic'; font-size:  140%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h3 { font-family: 'Copperplate Gothic'; font-size:  130%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h4 { font-family: 'Copperplate Gothic'; font-size:  120%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h5 { font-family: 'Copperplate Gothic'; font-size:  110%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h6 { font-family: 'Copperplate Gothic'; font-size:  100%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h7 { font-family: 'Copperplate Gothic'; font-size:  90%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h8 { font-family: 'Copperplate Gothic'; font-size:  80%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h9 { font-family: 'Copperplate Gothic'; font-size:  70%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	
}

@media (min-width: 576px) { 

	.links_content { height: 16.5em; overflow-y: hidden;  }
	.tnail--land { width: 7.8125em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--land img { width: 7.8125em; height: 3.125em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--lfill { width: 7.8125em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--lfill img { width: 7.8125em; height: 3.125em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--port { width: 7.8125em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--port img { width: 1.125em; height: 3.125em; margin: .0125em; padding: .125em .25em; display: block; }
	.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }
	.tnail--pfill { width: 7.8125em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--pfill img { width: 1.125em; height: 3.125em; margin: .0125em; padding: .125em .25em; 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.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); }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) { 
	
	.links_content { height: 19.0em; overflow-y: hidden;  }
	.tnail--land { width: 9.375em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--land img { width: 9.375em; height: 3.125em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--lfill { width: 9.375em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--lfill img { width: 9.375em; height: 3.125em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--port { width: 9.375em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port:hover { box-shadow: 0 0 .025em .025em #000000; }
	.tnail--port img { width: 1.125em; height: 3.125em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }
	.tnail--pfill { width: 9.375em; height: 3.125em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--pfill img { width: 1.05em; height: 3.125em; margin: .0125em; padding: .25em .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.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); }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	
	.links_content { height: 22.0em; overflow-y: hidden;  }
	.tnail--land { width: 12.5em; height: 4.1875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land:hover { box-shadow: 0 0 .05em .025em #000000; }
	.tnail--land img { width: 12.5em; height: 4.1875em; margin: .0125em; padding: .5em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--lfill { width: 12.5em; height: 4.1875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--lfill img { width: 12.5em; height: 4.1875em; margin: .0125em; padding: .5em .5em; display: block; }
	.tnail--port { width: 12.5em; height: 4.1875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port:hover { box-shadow: 0 0 .05em .025em #000000; }
	.tnail--port img { width: 1.5625em; height: 4.1875em; margin: .0125em; padding: .5em .5em; display: block; }
	.tnail--port:hover .layer { opacity: 1; transition: all 0.5s ease; }
	.tnail--pfill { width: 12.5em; height: 4.1875em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--pfill img { width: 1.25em; height: 4.1875em; margin: .0125em; padding: .5em .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.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); }

}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	
	.links_content { height: 29.65em; overflow-y: hidden;  }
	.links_content .row { padding-top: 0.25em!important; }

	.links_content h1 { font-family: 'Copperplate Gothic'; font-size:  250%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h2 { font-family: 'Copperplate Gothic'; font-size:  225%!important; font-weight: 600!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h3 { font-family: 'Copperplate Gothic'; font-size:  200%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h4 { font-family: 'Copperplate Gothic'; font-size:  175%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h5 { font-family: 'Copperplate Gothic'; font-size:  150%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h6 { font-family: 'Copperplate Gothic'; font-size:  125%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h7 { font-family: 'Copperplate Gothic'; font-size:  100%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h8 { font-family: 'Copperplate Gothic'; font-size:  75%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }
	.links_content h9 { font-family: 'Copperplate Gothic'; font-size:  50%!important; font-weight: 500!important; text-shadow: 2px 2px 15px #FF6C00; }


	.links_header img { width: 14.0em; height: auto }
	.tnail--land { width: 15.625em; height: 5.25em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--land:hover { box-shadow: 0 0 .25em .125em #000000; }
	.tnail--land img { width: 15.625em; height: 5.25em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--land:hover .layer { width: 95%; opacity: 1; transition: all 0.5s ease; }
	.tnail--lfill { width: 15.625em; height: 6.25em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--lfill img { width: 15.625em; height: 5.25em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--port { width: 15.625em; height: 5.25em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--port img { width: 1.75em; height: 5.25em; margin: .0125em; padding: .25em .5em; display: block; }
	.tnail--pfill { width: 15.625em; height: 5.25em; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; }
	.tnail--pfill img { width: 1.75em; height: 5.25em; margin: .0125em; padding: .25em .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;
}