* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
	font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

.bg-theme-dark {
	background-color: white;
}

/*------------- J navbar -------------*/
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  //transition: 0.3s;
}
.nav-item , .nav-item a{
	color:#333; 
	font-size:0.9rem;
}
.bg-mynav {
	//background:transparent;
	background:#ffcc00;
	transition:750ms ease;
}
.bg-mynav.scrolled {
	background:white;
	//background:#ffffff00;
	opacity:1;
}
@media only screen and (max-width: 750px) { /* mobile */
	.bg-mynav {
		background:#ffcc00;
		
	}
}
.navbar-toggler {
	margin-top:0;
}


/*---------bootstrap-4-multi-dropdown-navbar-------------*/

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-menu li > a {
    padding: 10px 15px;
    color: #000;
}

.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
    background: transparent;
    outline: 0;
}

.dropdown-menu .show > .dropdown-toggle::after{
    transform: rotate(-90deg);
}

/*------------- topnav addon -------------*/
.topnav-slogan{
	color:#333;
	font-size:1.2rem;
	text-decoration: none;
	white-space:nowrap;
}
.topnav-button,
.topnav-button a,
.topnav-button a:link,
.topnav-button a:visited,
.topnav-button:active {
	display:flex; 
	color:coral;
	font-size:1.2rem;
	text-decoration:none;
	white-space:nowrap;
	border:1px solid coral;
	border-radius:3rem;
	padding:0.5rem 3.5rem;
	background:#ffffff00;
	cursor:pointer;
}
.topnav-button:hover {
    color:white;
	background-color:rgb(243, 77, 31);
}
@media (min-width: 576px) and (max-width: 768px) {	/* large mobile */
	.topnav-slogan{
		font-weight:600;
		font-style: italic;
	}	
}
@media only screen and (max-width: 576px) { /* mobile */
	.topnav-slogan{
		font-weight:600;
		font-style: italic;
		text-decoration:underline;
		padding:0.5rem 0.5rem;
		margin:0;
	}	
	.topnav-button {
		font-weight:600;
		font-style: italic;
		padding:0.5rem 0.5rem;
		margin:0;
		border:0px solid coral;
	}
}

/*-------------left side---------*/
hr.style-two {
    border: 0;
    height: 1px;
	background-color: unset;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.bg-list {
	background: #ffffffaa;
	border-radius: 10px;
	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.bg-list:hover{
	background: #ffa800aa;
}

.bg-list a {
	color: #000;
	font-size: 0.8rem;
}

.bg-list a:hover {
	color: red;
}

/*------------ footer -------------*/
.ft-container {
	display: grid;
	max-width: 1320px;
	margin: 0 auto 0 auto;
	//justify-content:space-between;
	padding-top:2rem;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"F21 F22 F23 F24";
}
.ft-item, 
.ft-item a{
	color:#333;
	border: 0px solid rgba(0, 0, 0, 0.8);
	font-size: 16px;
	text-align: left;
	text-decoration:none;
	white-space: nowrap;
}
.ft-item p, p:a, p-vsm{
	color:#333;
	font-size:0.2rem;
	line-height:0.5rem;
}
.ft-item h5, 
.ft-item h5-ref{
	color:#333;
	font-size:1.8rem;
	font-weight:600;
	text-decoration:none;
	text-transform: uppercase;
}

.ft-logo {
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
}
.ft-logo h1 {
	font-size:1.5rem;
	color:black;
}
.ft-logo h2 {
	font-size:1rem;
	color:black;
}
@media (max-width: 768px) {
	.ft-container {
		padding:2rem;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto auto;
		grid-column-gap: 20px;
		grid-template-areas:
			"F21 F22"
			"F23 F24";
	}
}
@media (max-width: 576px) {
	.ft-container {
		margin: 0 10px 0 10px;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, min-content);
		grid-template-areas: "F21" "F22" "F23" "F24";
	}
	.ft-item {
		text-align: left;
		padding-left:10px;
	}
	.ft-logo h2 {
		font-size:0.8rem;
		color:black;
	}
	.p-vsm {
		padding-left:30px;
	}
}