body {
	padding-top: 90px;
	font-family: "Roboto", serif;
	letter-spacing: 0.02rem;
}

a {
	text-decoration: none;
	color: #254658 !important;
}

.no-scrollbar {
	scrollbar-width: none; /* Firefox */
  	-ms-overflow-style: none; /* Internet Explorer and Edge */
  	-webkit-overflow-scrolling: touch; /* For touch scrolling */
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.fs-7 {
	font-size: 0.8rem !important;
}



/*********** FONT ***************/

.font-square {
	font-family: 'Saira', sans-serif;	
}

.font-tall {
	font-family: 'Big Shoulders Display', sans-serif;
	letter-spacing: 1px;
}

.font-art {
	font-family: "Playfair Display", serif;		
}

.font-diploma {
  	font-family: "Fleur De Leah", cursive;
}

.font-diptext {
  	font-family: "MonteCarlo", cursive;
}

.font-vibe {
  	font-family: "Great Vibes", cursive;
}

.font-roboto {
  	font-family: "Roboto", serif;
}


/********** LETTER SPACING *************/


.letterspace-0 {
	letter-spacing: 0px;
}

.letterspace-1 {
	letter-spacing: 1px;
}

.letterspace-2 {
	letter-spacing: 2px;
}

.letterspace-3 {
	letter-spacing: 3px;
}

.letterspace-4 {
	letter-spacing: 4px;
}

.letterspace-5 {
	letter-spacing: 5px;
}

.letterspace-6 {
	letter-spacing: 6px;
}

.letterspace-7 {
	letter-spacing: 7px;
}

.letterspace-8 {
	letter-spacing: 8px;
}

.letterspace-9 {
	letter-spacing: 9px;
}

/*********** NAV **************/

.nav-scroller {
	position: relative;
	z-index: 2;
	overflow-y: hidden;
	border-bottom: solid 1px #bbb;
}

.nav-scroller .nav {
	display: flex;
	flex-wrap: nowrap;
	margin-top: 0px;
	overflow-x: auto;
	text-align: center;
	-webkit-overflow-scrolling: touch;
}

.nav-underline {
	gap: 0;
	margin: 0 auto;
}

.nav-underline .nav-link {
	padding-top: 0;
	padding-bottom: 0;
	font-size: .875rem;
	color: #2E2B29;
}

.nav-underline .nav-link:hover {
	color: #70302D;
}

.nav-scroller .divider {
    border-right: solid 1px #888;
    height: 46px;
}

.nav-scroller .divider-50 {
    border-right: solid 1px #888;
    height: 54px;
}

.nav-scroller .divider-60 {
    border-right: solid 1px #888;
    height: 66px;
}


.nav-underline .nav-link {
    border-bottom: 0;
}

.nav-underline .nav-link.active, .nav-underline .nav-link.active span {
	color: #8B2D2C !important;
}

.nav-underline .nav-link.active, .nav-underline .show>.nav-link {
    font-weight: normal;
}

@media (max-width: 767.98px) {

	html, body {
		overflow-x: hidden; 
	}
	
	.offcanvas-collapse {
		position: fixed;
		top: 56px; /* Height of navbar */
		bottom: 0;
		left: 100%;
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		overflow-y: auto;
		visibility: hidden;
		transition: transform .3s ease-in-out, visibility .3s ease-in-out;
		background-image: url("/media/images/black-vintage-background.png");
	   	background-repeat: repeat;
	}
	.offcanvas-collapse.open {
		visibility: visible;
		transform: translateX(-100%);
	}
	
	.navbar-dark .navbar-nav .nav-item > a {
		text-transform: uppercase;
		letter-spacing: 2px;
	}
	
	.navbar-dark .navbar-nav .nav-item:not(:last-child) {
		border-bottom: solid 1px #aaa;
	}
	
	.nav-scroller .divider {
	    height: 40px;
	}
	
	.nav-scroller .divider-50 {
	    height: 50px;
	}
	
	.nav-scroller .divider-60 {
	    height: 66px;
	}
	
	/*********************/
	
	.popupFormContainer input, .popupFormContainer select {
		height: 3rem;
	}
}


@media (min-width: 768px) {

	.navbar {
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.nav-scroller .nav {
	    justify-content: center;
	}	
	
	.nav-underline .nav-link i {
	    margin-right: 5px;
	}
	
	.navbar-dark .navbar-nav .nav-item {
		
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.navbar-dark .navbar-nav .nav-item:not(:last-child) {
		border-right: solid 1px #aaa;
	}
	
	.navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .2rem;
        padding-left: .2rem;
    }
}


/********************** FORM VALIDATION ******************************/


.form-control.invalid, .was-validated .form-control.invalid, textarea.form-control.invalid, .was-validated textarea.form-control.invalid {
    border-color: #dc3545;
}

.form-control.invalid, .was-validated .form-control.invalid, textarea.form-control.invalid, .was-validated textarea.form-control.invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.form-control.valid, .was-validated .form-control.valid, textarea.form-control.valid, .was-validated textarea.form-control.valid {
    border-color: #1cbb8c;
}

.form-control.valid, .was-validated .form-control.valid, textarea.form-control.valid, .was-validated textarea.form-control.valid {
    border-color: #1cbb8c;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

textarea.form-control.invalid, .was-validated textarea.form-control.invalid, textarea.form-control.valid, .was-validated textarea.form-control.valid {
	background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
}


/************************ SLIDER BANNER ****************************/

.topBannerSwiper {
	height: 500px;
}

@media (min-width: 768px) {
	.topBannerSwiper {
		height: 600px;
	}
}

.swiper-slide-banner::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    border: solid 5px black;
    display: block;
    position: absolute;
    
}

.swiper-slide-banner .swiper-caption {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
    width: 100%;
}


/******************** BACKGROUND COLOR ***************************************/


.paper-vintage-background {
	background-image: url("/media/images/paper-vintage-background.jpg");
    background-repeat: repeat;
}

.yellow-vintage-background {
	background-image: url("/media/images/yellow-vintage-background.png");
    background-repeat: repeat;
}

.white-vintage-background {
	background-image: url("/media/images/white-vintage-background.png");
    background-repeat: repeat;
}

.black-vintage-background {
	background-image: url("/media/images/black-vintage-background.png");
    background-repeat: repeat;
}


.red-vintage-background {
	background-image: url("/media/images/red-vintage-background.png");
    background-repeat: repeat;
	
}

.blue-vintage-background {
	background-image: url("/media/images/blue-vintage-background.png");
    background-repeat: repeat;
}

.brown-vintage-background {
	background-image: url("/media/images/brown-vintage-background.png");
    background-repeat: repeat;
}

.box-vintage-background {
	background-image: url("/media/images/box-vintage-background.jpg");
    background-repeat: repeat;
}


.form-padding-background-color {
	background-color: #F5F4ED !important;
}

.form-outer-border-color {
	border: solid 1px #B44819 !important;
}

.no-background {
	background-color: transparent !important;
}

.brown-vintage-color {
	color: #5F3822 !important;
}

.gray-vintage-color {
	color: #212529 !important;
}

.blue-vintage-color {
	color: #254658 !important;
}

/***************** HORIZONAL CARD **********************/

.vintage-card {
	flex-direction: row;
	max-width: 30em;
	border: 0;
	box-shadow: 0 7px 7px rgba(0, 0, 0, 0.18);
}

.vintage-card img {
	max-width: 40%;
	margin: auto;
	padding: 0.5em;
	border-radius: 0.7em;
}

			
/****************** VINTAGE BUTTON *********************/

.btn-vintage-blue {

  --bs-btn-color: #f4eee2;
  --bs-btn-bg: #3f6178;
  --bs-btn-border-color: #294354;

  --bs-btn-hover-color: #fffaf0;
  --bs-btn-hover-bg: #345369;
  --bs-btn-hover-border-color: #243b4a;

  --bs-btn-active-color: #fffaf0;
  --bs-btn-active-bg: #294454;
  --bs-btn-active-border-color: #1e303c;

  border-width: 1px;
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 0 #1e303c,
    0 4px 8px rgba(25, 40, 50, .18);

  transition: all .15s ease;
}

.btn-vintage-blue:hover {
  transform: translateY(-1px);
}

.btn-vintage-blue:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.25),
    0 1px 0 #1e303c;
}

.btn-vintage-white {
    --bs-btn-color: #4a3b2a;
    --bs-btn-bg: #fffdf7;
    --bs-btn-border-color: #bca98b;
    --bs-btn-hover-color: #fffdf7;
    --bs-btn-hover-bg: #796248;
    --bs-btn-hover-border-color: #796248;
    --bs-btn-active-bg: #614d37;
    --bs-btn-active-border-color: #614d37;

    border-width: 1px;
    border-radius: 0.35rem;
    box-shadow: 2px 2px 0 rgba(93, 73, 51, 0.22);
    transition: all 0.18s ease;
}

.btn-vintage-white:hover {
    box-shadow: 3px 3px 0 rgba(93, 73, 51, 0.28);
    transform: translate(-1px, -1px);
}

.btn-vintage-white:active {
    box-shadow: 0 0 0 rgba(93, 73, 51, 0.22);
    transform: translate(1px, 1px);
}


/********************* TICKER **************************/

.ticker-top-border {
    box-shadow: inset 0 6px 6px -6px rgba(0, 0, 0, 0.3);
}

.ticker .ticker-track {
    display: flex;
    flex-wrap: nowrap;
}

.ticker .ticker-track div {
	padding-top: 8px;
	padding-bottom: 5px;
    padding-right: 30px;
    padding-left: 30px;
    color: #fff;
}

.ticker .ticker-track div:not(:first-child) {
	box-shadow: inset 6px 0 6px -6px rgba(0, 0, 0, 0.25);   /* left */
}


.ticker .ticker-track div:first-child {
	padding-left: 100px;
}

.ticker .ticker-track div:last-child {
	padding-right: 100px;
}