* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
}
.item-font {
	font-family: "Roboto Condensed", sans-serif;
}
.bg-theme {
	background-color: coral;
}
.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:1.2rem;
}
.bg-mynav {
	//background:transparent;
	background:white;
	transition:750ms ease;
}
.bg-mynav.scrolled {
	background:white;
	//background:#ffffff00;
	opacity:1;
}
@media only screen and (max-width: 750px) { /* mobile */
	.bg-mynav {
		background:white;
		
	}
}
.navbar-toggler {
	margin-top:0;
}

/*------------- topnav addon -------------*/
.topnav-slogan{
	color:#333;
	font-size:1.2rem;
	text-decoration: none;
	white-space:nowrap;
	padding:0.5rem 4rem;
}
.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;
	}
}

.border-bottom:focus {
	border-bottom: 1px solid orange!important;
	border-color: orange;
	outline: 0;
}
/*------------ 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;
}
.g-F21 {
	grid-area: F21;
}
.g-F22 {
	grid-area: F22;
}
.g-F23 {
	grid-area: F23;
	padding-right:2rem;
}
.g-F24 {
	grid-area: F24;
}
.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;
	}
}