@import url('https://fonts.googleapis.com/css?family=Poppins');

/*colors

dark gray: #221F1F
red: #EF4123
darker red button hover: #c9361c
md gray: #454141
light gray: #E2DCDE
blue: #2ca3dc

*/

body {
	/* Move down content because we have a fixed navbar that is 3.5rem tall */
	padding-top: 3.5rem;
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
}

.hero-heading{
	font-weight: bold;
	letter-spacing: 2;	
}
nav{}
.navbar{
	background: #ffffff;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
ul.nav.navbar-nav.mr-auto{margin-left: 40px;}
ul.navbar-nav.ml-auto{margin-right: 40px;}
nav img{
	max-height: 50px;
	-webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}
nav a {
  color: black;
  text-transform: uppercase;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a.nav-link{
	font-size: .9rem;
}
/*nav.navbar.shrink .nav-link.active{
	border-radius: 0;
	background: #ef4123;
	color: white !important;
}*/
.navbar-light .navbar-nav .nav-link{
	color: #000000;
}
.nav-pills .show>.nav-link{
	background-color: #27897d;
	border-radius: 0;
}
.navbar-light .navbar-nav .show>.nav-link{
	color: #ffffff;
}
.dropdown-menu{
	border: none;
	border-radius: 0;
	background: #e2dcde;
}
.dropdown-item{
	background: #e2dcde;
}

.navbar-light .navbar-nav .active>.nav-link{
	/*color: white;
	background:magenta;*/
	
}
nav.navbar.shrink {
  min-height: 35px;
  background: rgba(255,255,255,0.7);
}
nav.navbar.shrink svg#logo {
  width: 250px;
}
nav.navbar h2{
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
nav.navbar.shrink h2{
	font-size: 24px;
}
  
nav.navbar.shrink .nav-link{
	color: #212529;
}
.navbar-light .navbar-nav .nav-link:hover{
	color: rgba(0.0.0.0.6);
}
nav.navbar.shrink img{
	max-height: 35px;
	
}
nav.navbar.shrink a {
  font-size: 15px;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}
nav.navbar.shrink .navbar-toggle {
  margin: 8px 15px 8px 0;
  padding: 4px 5px;
}
.navbar-light .navbar-nav .nav-link.active{
	color: white;
}
.nav-pills .nav-link.active, .show>.nav-pills .nav-link:after{
	
}
nav.navbar.shrink .nav-link.active{
	color: black;
}
ul.navbar-nav.nav-pills.custom-pill.ml-auto{
	background: rgba(226,220,222,0.75);
}
li.nav-item{
	padding-left: 15px;
}

#hero{
  /*background: #3e4b54 url('img/hero2_lg.jpg') center center / cover no-repeat fixed;*/
  background-image: url('img/tlc_hero-home-5000x700.jpg');
  background-position: top;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  height: 300px;
}
#hero.hero-secondary{
	height: 250px;
	margin-top: 2rem;
}
#hero.about-us{
	background-image: url('img/tlc_hero-about-us-md.jpg');
	background-size: cover;
}
#hero.parts{
	background-image: url('img/tlc_hero-parts-md.jpg');
	background-size: cover;
}
#hero.bricks{
	background-image: url('img/tlc_hero-bricks-md.jpg');
	background-size: cover;
}
#hero.contact-us{
	background-image: url('img/tlc_hero-contact-us-md.jpg');
	background-size: cover;
}
#hero.service{
	background-image: url('img/tlc_hero-service-md.jpg');
	background-size: cover;
}
#hero.upgrades{
	background-image: url('img/tlc_hero-upgrades-md.jpg');
	background-size: cover;
}
#hero.component-repair{
		background-image: url('img/tlc_hero-comp-repair-md.jpg');
		background-size: cover;
}
#hero.custom{
	background-image: url('img/tlc_hero-custom-md.jpg');
	background-size: cover;
}
#hero.tubes{
	background-image: url('img/tlc_hero-tubes-md.jpg');
	background-size: cover;
}
#hero.buy-rent{
	background-image: url('img/tlc_buy-rent-solder_md.jpg');
	background-size: cover;
}
#hero.privacy{
	background-image: url('img/tlc_hero-privacy_md.jpg');
	background-size: cover;
}
h2.display-4{
	font-size: 3rem;
}
#announcement .container-fluid{
	background: #EF4123;
	padding: 1.5rem;
}
#announcement{
	color: #ffffff;
}
#announcement a.btn{
	background: #ffffff;
	color: #EF4123;
}
#announcement a.btn:hover{
	background: #454141;
	color: white;
}
#covid-modal .modal-content{
	border-radius: 0;
	border: none;
}
#covid-modal .modal-header{
	background: #EF4123;
	color: white;
	border-radius: 0;
}
#covid-modal .btn{
	background: #EF4123;
	color: white;
	border: 1px solid #ef4123;
}
#covid-modal .btn:hover{
	
	background: #ffffff;
	color: #EF4123;
}
h4.card-title.four-features{
	font-size:1.25rem;
}
p.card-text.four-features{
	font-size: 0.9rem;
}
.btn.cta{
	margin: 15px;
}
.btn.cta:hover{
	background: #ff6d6a;
	color: white;
	border-color: #ff6d6a;
}
a.btn.btn-outline-light.btn-sm.text-uppercase {
    margin-top: .75rem;
}
a.btn.btn-outline-light.btn-sm:hover{
	color: #204652;
}
#hero-caption{
  width: 100%;
  
}
.svg-line{
	fill: white;
}
.fa-rounded{
	color: #ffffff;
	background: #454141;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	text-align: center;
	line-height: 120px;
	vertical-align: middle;
	margin: 0 auto;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-bottom: 20px;
}
.fa-rounded.alt {
    background: rgba(107,99,100,0.5);
}

.fa-rounded:hover{
	background: #27897d;
}
#about-bcg{
	background-image: url('img/tlc_about-1056x940.jpg');
	background-position: left;
	background-repeat: no-repeat;
	height: 250px;	
}
#tlc-about{
	overflow: hidden;
}
h2.p-0-override {padding-bottom: 4rem;
}

.display-3{
	font-size: 3.5rem;
}
.btn{
	border-radius: 0;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.feature-content{
	padding: 3rem 0;
	overflow: hidden;
}
.feature-stripes{
	
}
.feature-heading{
	padding: 7rem 0;
}
.card{
	border: none;
}
.card-deck-header{
	padding-bottom: 3rem;
}
.card-deck-header h2{
	text-transform: uppercase;
}
.card-img-top {
    width: 40%;
    margin: 0 auto;
}
.card-group.portfolio{
	width: 100%;
}
.card-img-overlay.d-flex.custom{
	padding: 0;
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.card.portfolio.custom{
	margin: .25rem;
}
.card-img{
	border-radius: 0;
}
.card-img-overlay.d-flex.custom:hover{
	opacity: 1;
	background-color: rgba(0,0,0,0.6);
	cursor: default;
}
.card-group.portfolio{
	
}
.card.portfolio{
	background: transparent;
	border-radius: 0;
	margin: 1em;
}
.card.portfolio a{
	color: white;
}
.card.portfolio a:hover{
	text-decoration: none;
}
img.card-img-top.parts {
    width: 100%;
}
a.no-hover-underline{
	text-decoration: none;
}
a.no-hover-underline:hover{
	color: #27897d;
}
.four-features{
	color: #212529;
}

.feature-content img{
	margin-bottom:-10rem;
}
.feature-alt{
	background: #e2dcde;
}
.feature-stripes{
	color: rgba(69,65,65,0.05);
	background: repeating-linear-gradient( -10deg, 
  											rgba(69,65,65,0.05), 
  											rgba(69,65,65,0.05) 50%, 
  											#ffffff 50%, 
  											#ffffff 100%);
}
.feature-dark{
	background: #454141;
	color: white;
	margin-bottom: 0;
}
.feature-dark h2{
	color: white;
}
.feature-med{
	background: rgba(69,65,65,0.6);
	color: white;
	margin-bottom: 0;
}

#about{
	background: url('img/contact-bcg.jpg') bottom center no-repeat;
	background-size: cover;
}
.about-us-text{
	padding: 1.875rem;
}
.about-us-text.full{
	padding-top: 3rem;
	padding-bottom: 3rem;

}
.col-sm.bricks {
    padding: 0;
    margin: 0 0.25rem;
    background: #e2dcde;
    color: #454141;
}

#parts-list-service .col-sm-bricks{
	background: rgba(255,255,255,0.9)!important;
}

.brick-wrapper h5{
	padding: 0;
	font-size: 1rem
}
    
    
.brick-wrapper:hover{
	color: #27897d;
	transition-delay: 0;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	cursor: default;
}
.contact-text{
	background: #27897d;
	color: white;
	padding: 1.875rem;
}
#contact{
}
/*Tubes Page*/

/*Service Repair Page*/
#service-menu{
	background: url('img/tlc_service-menu-bcg_dk.jpg') center center no-repeat;
	background-size: cover;
	height: 400px;
	color: white;
}
.card.text-center.service-menu {
    background: transparent;
}
.fa-rounded.white{
	color: #ef4123;
	background: #ffffff;
}
.four-features.white{
	color: #ffffff;
	font-size: 1.1rem;
}

/*Component Repair Page*/
#left-col-bcg-image{
  background: url('img/tlc_comp-repair-board.jpg') center center;
  background-size: cover;
  height: 300px;
}
#right-col-bcg-image{
  background: url('img/tlc_comp-repair-tubes2.jpg') center center;
  background-size: cover;
  height: 300px;
}
#left-col-2-bcg-image{
  background: url('img/tlc_comp-repair-arm.jpg') center center;
  background-size: cover;
  height: 300px;
}
#right-col-2-bcg-image{
	background: url('img/tlc_comp-accessories.jpg') center center;
  background-size: cover;
  height: 300px;	
}
.btn.alt-hover:hover{
	background-color: #ffffff;
}




.btn.btn-primary {
    background: #454141;
    border-color: #454141;
    margin-top: 5px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn.btn-primary:hover{
	background: #ffffff;
	color: #454141;
}
.btn.btn-danger {
    color: #fff;
    background-color: #EF4123;
    border-color: #EF4123;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-danger:hover{	
	background-color: transparent;
	border-color: #EF4123;
	color: #EF4123;
}
.row.d-flex.row-two {
    margin-top: 25px;
}
.form-control{
	border-radius: 0;
	margin: 5px 0;
}
a.contact-link{
	color: #ffffff; 
	text-decoration: underline;
}
a.contact-link:hover{
	color: #cccccc;
}
section#feature-three{
	margin: 6rem 0 0 0;
}
p.lead.about{
	margin: 2rem 0 2rem 0;
}
.container-fluid.map{
	margin: 0;
	padding: 0;
}

/*Upgrades Flowchart Cards*/
.card.flowchart{
	color: #212529;
    border-radius: 0;
    background: #fff;
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    padding: 14px 28px;
}

.card.flowchart:hover{
     transform: scale(1.05);
}

.card.flowchart h4{
  font-weight: 600;
}
span.number{
	background: #ef4123;
	border-radius: 50%;
	font-size: 1.1rem;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	color: #ffffff;
	display: inline-block;
	line-height: 1.5em;
	margin-right: 9px;
	text-align: center;
	width: 1.5em;
	font-weight: normal;
}
.flowchart.card-1{
  /*background-image: url(https://ionicframework.com/img/getting-started/ionic-native-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/
}

.flowchart.card-2{
   /*background-image: url(https://ionicframework.com/img/getting-started/components-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/
}

.flowchart.card-3{
   /*background-image: url(https://ionicframework.com/img/getting-started/theming-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/}
.flowchart.card-4{
  /*background-image: url(https://ionicframework.com/img/getting-started/ionic-native-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/
}

.flowchart.card-5{
   /*background-image: url(https://ionicframework.com/img/getting-started/components-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/
}

.flowchart.card-6{
   /*background-image: url(https://ionicframework.com/img/getting-started/theming-card.png);
      background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;*/
}

#footer-main{
	background: #221f1f;
	color: white;
	font-size: 0.8rem;
	padding: 2.5rem 0;
}
#footer-main a{
	color: white;
}
img.tiny-logo{
	max-width: 40%;
}
.footer-hr{
	border-top: 1px solid rgba(255,255,255,0.2);
}
p.footer-contact{
	margin-bottom: 0.5rem;
}
p.footer-contact i{
	padding-right: .5rem;
	padding-left: .5rem;
}

/*Media Queries*/
@media screen and (max-width: 768px){
	/*Small Res*/
	#hero.hero-secondary{
		height: 175px;
	}
	h2.display-4{
		font-size: 1.75rem;
	}
	#hero.about-us{
		background-image: url('img/tlc_hero-about-us-sm.jpg');
		background-size: cover;
	}
	#hero.parts{
		background-image: url('img/tlc_hero-parts-sm.jpg');
		background-size: cover;
	}
	#hero.bricks{
		background-image: url('img/tlc_hero-bricks-sm.jpg');
		background-size: cover;
	}
	#hero.contact-us{
		background-image: url('img/tlc_hero-contact-us-sm.jpg');
		background-size: cover;
	}
	#hero.service{
		background-image: url('img/tlc_hero-service-sm.jpg');
		background-size: cover;
	}
	#hero.upgrades{
		background-image: url('img/tlc_hero-upgrades-sm.jpg');
		background-size: cover;
	}
	#hero.component-repair{
		background-image: url('img/tlc_hero-comp-repair-sm.jpg');
		background-size: cover;
	}
	#service-menu{
		height: 600px;
	}
	#hero.custom{
		background-image: url('img/tlc_hero-custom-sm.jpg');
		background-size: cover;
	}
	#hero.tubes{
		background-image: url('img/tlc_hero-tubes-sm.jpg');
		background-size: cover;
	}
	#hero.buy-rent{
		background-image: url('img/tlc_buy-rent-solder_sm.jpg');
		background-size: cover;
	}
	#hero.privacy{
		background-imaage: url('img/tlc_hero-privacy_sm.jpg');
		background-size: cover;
	}
	#announcement .container-fluid{
		margin-top: 0;
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
	#announcement h4{
		font-size: .9rem;
	}
	#announcement a.btn{
		font-size: .8rem
	}
}
@media screen and (max-width: 767px){
	/*.col-sm{
		flex-basis: 100%;
	}
	.col-sm.bricks{
		margin: 1rem;
	}*/
	.row.five-by-row.bottom{
		margin-bottom: 3rem;
	}
}
@media screen and (max-width: 575px){
	#service-menu{
		height: 1064px;
	}
}
@media screen and (max-width: 320px){
	h2.display-4{
		font-size: 1rem;
	}
}

@media screen and (min-width: 576px){
	.card-deck.foq .card{
		flex: 1 0 30%;
	}
	
}
@media screen and (min-width: 576px) and (max-width: 840px){
	p.card-text.sale-grid{
		font-size: 1.2vh;
	}
}

@media screen and (min-width: 768px){
	.row.five-by-row{
		margin-bottom: 3rem;
	}
	h2.display-4.main-tagline{
		font-size: 2rem;
	}
	.card-deck.foq .card{
		flex: 1 0 0%;
	}
	
	
}
@media screen and (max-width: 990px){
	.col-sm{
		flex-basis: 100%;
	}
	.col-sm.bricks{
		margin: 1rem;
	}
}
@media screen and (max-width: 991px){
	ul.navbar-nav.nav-pills.custom-pill.ml-auto{
		margin-right: 0;
		text-align: right;
		padding-right: 15px;
	}
	.dropdown-menu.show{
		text-align: right;
		background: rgba(39,137,125,0.3);
	}
	a.dropdown-item{
		background:transparent;
	}
	.dropdown-item:focus, .dropdown-item:hover{
		background: rgba(255,255,255,0.25);
	}
}
@media screen and (min-width:991px){
	/*Lg Res*/
	nav img{
		max-height: 70px;
	}
	nav.navbar.shrink img{
		max-height: 50px;
		
	}
	ul.navbar-nav.nav-pills.custom-pill.ml-auto{
		background: transparent;
	}
	li.nav-item{
		padding-left: 0;
	}
	svg#logo{
		width: 300px;
	}
	.feature-row{
		display: flex;
		align-items: center;
	}
	.hero-caption{
		
	}
	h2.display-4{
		font-size: 3.5rem;
	}
	h2.display-4.main-tagline{
		font-size: 3.5rem;
	}
	h4.card-title.four-features{
		font-size:1.5rem;
	}
	p.card-text.four-features{
		font-size: 1rem;
	}
	.jumbotron{
		padding:8rem 2rem;
	}
	#hero{
		height: 650px;
		margin-top: 3.5rem;
	}
	#announcement .container-fluid{
		margin-top: -4rem;
	}
	#about-bcg{
		background-size: contain;
		height: 450px;
	}
	#hero.hero-secondary{
		height: 400px;
		margin-top: 3rem;
	}
	#services{
		margin-top: -19px;
	}
	.display-3{
		font-size: 4.5rem;
	}	
	#hero.about-us{
		background-image: url('img/tlc_hero-about-us-lg.jpg');
		background-size: cover;
	}
	#hero.parts{
		background-image: url('img/tlc_hero-parts-lg.jpg');
		background-size: cover;
	}
	#hero.bricks{
		background-image: url('img/tlc_hero-bricks-lg.jpg');
		background-size: cover;
	}
	#hero.contact-us{
		background-image: url('img/tlc_hero-contact-us-lg.jpg');
		background-size: cover;
	}
	#hero.service{
		background-image: url('img/tlc_hero-service-lg.jpg');
		background-size: cover;
	}
	#hero.upgrades{
		background-image: url('img/tlc_hero-upgrades-lg.jpg');
		background-size: cover;
	}
	#hero.component-repair{
		background-image: url('img/tlc_hero-comp-repair-lg.jpg');
		background-size: cover;
	}
	#hero.custom{
		background-image: url('img/tlc_hero-custom-lg.jpg');
		background-size: cover;
	}
	#hero.tubes{
		background-image: url('img/tlc_hero-tubes-lg.jpg');
		background-size: cover;
	}
	#hero.buy-rent{
		background-image: url('img/tlc_buy-rent-solder_lg.jpg');
		background-size: cover;
	}
	#hero.privacy{
		background-image: url('img/tlc_hero-privacy_lg.jpg');
		background-size: cover;
	}

	.brick-wrapper h5{
		font-size: 1.2rem;
	}
	@media screen and (min-width: 900px){
	  #left-col-bcg-image,
	  #right-col-bcg-image,
	  #left-col-2-bcg-image,
	  #right-col-2-bcg-image{
	    height: 500px;
	  }
	}
}
@media screen and (min-width: 1156px){
	#about-bcg{
		background-attachment: fixed;
	}
}
@media screen and (min-width: 1200px){
	#hero.hero-secondary{
		height: 520px;
	}
	.four-features.white{
		font-size: 1.25rem;
	}
	a.nav-link{
		font-size: 1rem;
	}
}