@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto-Regular.ttf')  format('truetype');
}

@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/Roboto-Bold.ttf')  format('truetype');
  font-weight: bold;
}

body {
	font-family: 'Roboto', sans-serif;
}

.container {
	max-width: 1100px;
}

.navbar-light .navbar-brand {
	font-size: 2rem;
}

.navbar-light .navbar-nav .nav-link {
	color: #6493B5;
}

.navbar-light .navbar-nav .dropdown-menu .dropdown-item {
	color: #6493B5;
}

.navbar-light .navbar-nav .dropdown-menu .dropdown-item:hover {
	color: #474747;
}

.card { 
	overflow: hidden;
	position: relative;
}

#product-box.card img{
 	transition: 200ms linear;
    transform: scale(1.0);
}

#product-box.card:hover img{
	transform: scale(1.1);
}

#product-box .card-body {
    position: absolute;
    top: 30%;
    width: 80%;
    left: 10%;
    opacity: 0.6;
    background-color: black;
}

#product-box .card-body h5{
	color: white;
}

footer {
	background-color: #6493B5;
	opacity: 0.9;
}

#myTab .nav-item {
	font-size: 0.8rem;
}

#myTabContent .card {
 /*width: 15.9rem;*/
 /*display: flex;*/
 /*margin-right: 1rem;*/
 /*box-sizing: border-box;*/
}

.cardsWrapper {
/*	display: flex;
	justify-content: space-between;*/
}

@media (max-width: 576px) {

/*HOME PAGE CUSTOM EDITS*/


#slogan-products {
	height: 2rem !important; 
}

#slogan-products h4 {
	font-size: 1rem;
}

form {
	margin-right: 0;
}

/*END OF HOMEPAGE CUSTOM EDITS*/




	#myTab {
		display: flex;
		flex-direction: column !important;
	}

	#myTabContent #myTab .card-img .card-img-top img {
		max-height: 200px;
	}




	.navbar-light .navbar-brand {
		font-size: 1.2rem;
	}

	ul.navbar-nav.ml-auto,
	ul.navbar-nav.ml-auto .dropdown-item {
		font-size: 0.7rem;
	}

	#navbarDropdownMenuLink {
		font-size: 0.7rem;
	}

	#myTabContent,
	#myTabContent .row {
		display: flex;
		justify-content: center;
	}
}



/*TYPOGRAPHY MEDIA TYPE*/

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}