<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;"> 
/**

   ++++++++++++++++++++++++++++++++++++++++++++++++++++++
   AUTHOR  : Designcollection
   PROJECT : TFN - Top Fixed Bootstrap 4+ Navbar
   VERSION : 1.0
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++
   
**/

/** # [Table of contents]

* BODY
# 01 - Navigation
# 02 - List Item
# 03 - Submenu List 
# 04 - Search Box
# 05 - Navbar Background 
# 06 - Main Image 
# 07 - DIV Section
# 08 - Content 
# 09 - Footer 

# [Color codes]

Navbar BG : #222222 (Black)
HyperLink : #ffffff (white)
Content   : #e2e3e5 (light gray)
Header h4 : #383d41 (black)
Footer    : #212529 (light black)

a (standard):   #ddd (gray)
a (hover):    #fff (white)

**/

/* Smartphones (portrait and landscape) -- -- -- -- -- - */
 @media screen and (min-width: 320px) and (max-width: 667px) {
	 
    /* Styles */



    /* Navbar Begin */
     #tfn_nav .navbar-expand-lg .navbar-nav .nav-link {
         outline: none;
    }



    /* transparent-color-navbar-4 Begin */
     #tfn_nav .bg-transparent {
         background-color: transparent !important;
		 border: none;
    }
     #tfn_nav .bg-dark-bg {
         background-color: #000000 !important;
         -webkit-transition: all .4s ease-in-out;
         -moz-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
         transition: all .4s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-transparent {
         color: #ffffff;
    }
    /* transparent-color-navbar-4 End */


	#tfn_nav .animation{	
	-webkit-animation-duration: 0.4s;
			animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	}

 @-webkit-keyframes slideUpIn {
	 0% {
		 
		 -webkit-transform: translateY(20px);
	 }
	 100% {
		 
		 -webkit-transform: translateY(0);
	 }
	 
	 0% {
		 -webkit-transform: translateY(20px);
	 }
}

@keyframes slideUpIn {
		0% {
			transform: translateY(20px);
		}
		100% {
			transform: translateY(0);
		}
		0% {
			transform: translateY(20px);
		}
	}

	.slideUpIn {
		-webkit-animation-name: slideUpIn;
				animation-name: slideUpIn;
	}

	/* Humbar Menu */ 
	#tfn_nav .navbar-dark .navbar-toggler {
		color: rgba(255,255,255,.7);
		border-color: transparent;
	}
	#tfn_nav button:focus {
		outline: none;
	}
}



/* Smartphones (landscape) -- -- -- -- -- - */
 @media screen and (min-width: 321px) {
    /* Styles */
}


/* Smartphones (portrait) -- -- -- -- -- - */
 @media screen and (max-width: 320px) {
    /* Styles */
}


/* iPads (portrait and landscape) -- -- -- -- -- - */
 @media screen and (min-width: 668px) and (max-width: 1223px) {
    /* Styles */
}


/* iPads (landscape) -- -- -- -- -- - */
 @media screen and (min-width: 668px) and (max-width: 1223px) and (orientation: landscape) {
    /* Styles */
}


/* iPads (portrait) -- -- -- -- -- - */
 @media screen and (min-width: 668px) and (max-width: 1223px) and (orientation: portrait) {
    /* Styles */
}


/* Desktops and laptops -- -- -- -- -- - */
 @media screen and (min-width: 1224px) {
    /* Styles */

    /* Navbar Begin */
     #tfn_nav .navbar-expand-lg .navbar-nav .nav-link {
         padding-right: 20px;
         padding-left: 20px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         outline: none;
    }
 
    /* Navbar Hover */
     #tfn_nav .navbar-dark .navbar-nav .nav-link:focus, 
     #tfn_nav .navbar-dark .navbar-nav .nav-link:hover {
         color: #ffffff;
    }

}


/* Large screens -- -- -- -- -- - */
 @media screen and (min-width: 1824px) {
    /* Styles */
}


 @media (min-width: 768px) {
    /* sub menu hover for flate-color */
     ul.navbar-nav li:hover &gt; ul.dropdown-menu {
         display: block;
    }
     #navbar {
         text-align: center;
    }
     #tfn_nav .nav-pos{
         padding:0px;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-nav {
         display: block;
         padding: 18px 18px;
    }
    /* sub menu hover for transparent */
     #tfn_nav .navbar-dark .navbar-nav .nav-transparent {
         display: block;
         padding: 18px 18px;
    }
	#tfn_nav .animation{	
		-webkit-animation-duration: 0.4s;
				animation-duration: 0.4s;
		-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
	}

 @-webkit-keyframes slideUpIn {
	 0% {
		 
		 -webkit-transform: translateY(20px);
	 }
	 100% {
		 
		 -webkit-transform: translateY(0);
	 }
	 
	 0% {
		 -webkit-transform: translateY(20px);
	 }
}

@keyframes slideUpIn {
	0% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0);
	}
	0% {
		transform: translateY(20px);
	}
}

    .slideUpIn {
		-webkit-animation-name: slideUpIn;
		animation-name: slideUpIn;
	}
}



/* Underline From Center */
.hvr-underline-from-center {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
}
	
.hvr-underline-from-center:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 51%;
	right: 51%;
	bottom: 0;
	background: #fff;
	height: 3px;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
	
.hvr-underline-from-center:hover:before, 
.hvr-underline-from-center:focus:before, 
.hvr-underline-from-center:active:before {
	left: 15%;
	right: 15%;
}



	
/* Underline From Left */
.hvr-underline-from-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}


.hvr-underline-from-left:hover:before, 
.hvr-underline-from-left:focus:before, 
.hvr-underline-from-left:active:before {
	right: 0;
}

.hvr-underline-from-left:hover:before {
	right: 75%;
}

.search-hover i,
.search-hover i:hover {
	cursor: pointer;
}

.link {
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #B7BE33;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}

.link-animate {

}

.link-animate::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.link-animate:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
</pre></body></html>