/**

   ++++++++++++++++++++++++++++++++++++++++++++++++++++++
   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 {
         font-size: 14px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         outline: none;
    }
    /* Search box */
     .form-inline .form-control {
         border-radius:50px;
         -webkit-border-radius:50px;
         -moz-border-radius:50px;
         -o-border-radius:50px;
         border-radius: 50px;
         border: 0px;
         font-size: 14px;
    }
     #tfn_nav .search-bx {
         position: relative;
         display: block;
         margin-left: -30px;
    }
    /* Dropdown Navbar */
     #tfn_nav .dropdown-menu {
         border-radius:3px;
         -webkit-border-radius:3px;
         -moz-border-radius:3px;
         -o-border-radius:3px;
         border-top-left-radius:0px;
         border-top-right-radius:0px;
         margin:8px 0px 0px;
         padding:0px;
    }
     #tfn_nav .dropdown-item {
         display: block;
         width: 100%;
         padding: 12px 20px;
         font-size:14px;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav a.dropdown-item {
         border-bottom:1px solid #ccc;
    }
     #tfn_nav a.dropdown-item:last-child {
         border-bottom: 1px solid #ccc;
    }
     #bsec .alert {
         margin-top: 55px;
    }
     #tfn_nav .bg-dark {
         background-color: #111111 !important;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link {
         color: #7d7d7d;
    }
    /* Navbar Hover */
     #tfn_nav .navbar-dark .navbar-nav .nav-link:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link:hover {
         color: #fff;
    }
     #tfn_nav .dropdown-item:focus, #tfn_nav .dropdown-item:hover {
         color: #fff;
         text-decoration: none;
         background-color: #444444;
    }
     #tfn_nav .form-control:focus {
         color: #444;
         background-color: #f0f0f0;
         border-color: #444;
         outline: 0;
         box-shadow: none;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .form-control {
         font-family: 'Open Sans',sans-serif;
    }
    /* Navbar Submenu */
     #tfn_nav .dropdown-submenu {
         position: relative;
    }
     #tfn_nav .dropdown-submenu a::after {
         transform: rotate(-90deg);
         position: absolute;
         right: 6px;
         top: 22px;
    }
     #tfn_nav .dropdown-submenu .dropdown-menu {
         top: -10px;
         left: 100%;
         margin-left: 0px;
         margin-right: .1rem;
		 margin-top: 0px;
		 margin-bottom: 0px;
		 border: transparent;
    }
     #tfn_nav .pad-20 {
         padding:25px;
    }
    /* Navbar Modal */
     #tfn_nav .modal-content {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;
        White+Gloss+%232 */
         background: rgb(255,255,255);
        /* Old browsers */
         background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
        /* IE6-9 fallback on horizontal gradient */
    }
     #tfn_nav .modal-header, #tfn_nav .modal-footer {
         border-bottom: transparent;
         border-top: transparent;
    }
     #tfn_nav .search-ico {
         color: #ccc;
         font-size: 25px;
         padding-top: 6px;
         padding-bottom: 6px;
    }
     #tfn_nav .search-ico:hover {
         color: #333;
    }
     #tfn_nav h5.modal-title {
         font-family: 'Open Sans',sans-serif;
    }
    /* flat-color-navbar-4 Begin */
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-nav {
         color: #ddd;
    }     #tfn_nav .dropdown-item-dropdown:focus, #tfn_nav .dropdown-item-dropdown:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }
    /* flat-color-navbar-4 End */
    /* texture-bg-navbar-4 Begin */
    /* Background Texture */
     #tfn_nav .bg-texture {
         background:url('http://via.placeholder.com/50x50')repeat;
    }
     #tfn_nav .dropdown-texture:focus, #tfn_nav .dropdown-texture:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture:focus, #tfn_nav .navbar-dark .navbar-nav .nav-texture:hover {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture {
         color: #ddd;
    }
    /* texture-bg-navbar-4 End */
    /* bg-navbar-4 Begin */
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:hover{
         color: #F0433A;
    }
     .hvr-bg-underline:before {
         background: #F0433A !important;
    }
    /* bg-navbar-4 End */
    /* gradient-color-navbar-4 Begin */
     #tfn_nav .bg-gradient {
         background: #45484d;
        /* Old browsers */
         background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
        /* IE6-9 */
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient {
         color: #ddd;
    }
     #tfn_nav .dropdown-gradient:focus, #tfn_nav .dropdown-gradient:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient:focus, #tfn_nav .navbar-dark .navbar-nav .nav-gradient:hover {
         color: #fff;
    }
     .hvr-gradient-underline:before{
         background:#fff !important;
    }
    /* gradient-color-navbar-4 End */
    /* transparent-color-navbar-4 Begin */
     #tfn_nav .bg-transparent {
         background-color: transparent !important;
         font-family: 'Open Sans',sans-serif;
		 border-bottom: 1px solid rgb(221, 221, 221,0.4);
    }
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-transparent {
         color: #ddd;
    }
     #tfn_nav .dropdown-transparent:focus, #tfn_nav .dropdown-transparent:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
    /* transparent-color-navbar-4 End */
    /* Main images & Title */
     .main-img {
         position:relative;
         display:block;
         margin:0 auto;
    }
     .main-img h2 {
         text-align: center;
         position: absolute;
         top: 35%;
         left: 15%;
         right: 15%;
         font-size: 30px;
         font-weight: 800;
         letter-spacing: 1px;
         color: #fff;
         text-shadow: 2px 2px #000;
    }
	#tfn_nav .animation{	
	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
	-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,.5);
    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 */
    /* Navbar Begin */
     #tfn_nav .navbar-expand-lg .navbar-nav .nav-link {
         font-size: 14px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         outline: none;
    }
    /* Search box */
     .form-inline .form-control {
         border-radius:50px;
         -webkit-border-radius:50px;
         -moz-border-radius:50px;
         -o-border-radius:50px;
         border-radius: 50px;
         border: 0px;
         font-size: 14px;
    }
     #tfn_nav .search-bx {
         position: relative;
         display: block;
         margin-left: -30px;
    }
    /* Dropdown Navbar */
     #tfn_nav .dropdown-menu {
         border-radius:3px;
         -webkit-border-radius:3px;
         -moz-border-radius:3px;
         -o-border-radius:3px;
         border-top-left-radius:0px;
         border-top-right-radius:0px;
         margin:8px 0px 0px;
         padding:0px;
    }
     #tfn_nav .dropdown-item {
         display: block;
         width: 100%;
         padding: 12px 20px;
         font-size:14px;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav a.dropdown-item {
         border-bottom:1px solid #ccc;
    }
     #tfn_nav a.dropdown-item:last-child {
         border-bottom: 1px solid #ccc;
    }
     #bsec .alert {
         margin-top: 55px;
    }
     #tfn_nav .bg-dark {
         background-color: #111111 !important;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link {
         color: #7d7d7d;
    }
    /* Navbar Hover */
     #tfn_nav .navbar-dark .navbar-nav .nav-link:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link:hover {
         color: #fff;
    }
     #tfn_nav .dropdown-item:focus, #tfn_nav .dropdown-item:hover {
         color: #fff;
         text-decoration: none;
         background-color: #444444;
    }
     #tfn_nav .form-control:focus {
         color: #444;
         background-color: #f0f0f0;
         border-color: #444;
         outline: 0;
         box-shadow: none;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .form-control {
         font-family: 'Open Sans',sans-serif;
    }
    /* Navbar Submenu */
     #tfn_nav .dropdown-submenu {
         position: relative;
    }
     #tfn_nav .dropdown-submenu a::after {
         transform: rotate(-90deg);
         position: absolute;
         right: 6px;
         top: 22px;
    }
     #tfn_nav .dropdown-submenu .dropdown-menu {
         top: -10px;
         left: 100%;
         margin-left: 0px;
         margin-right: .1rem;
		 margin-top: 0px;
		 margin-bottom: 0px;
		 border: transparent;
    }
     #tfn_nav .pad-20 {
         padding:25px;
    }
    /* Navbar Modal */
     #tfn_nav .modal-content {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;
        White+Gloss+%232 */
         background: rgb(255,255,255);
        /* Old browsers */
         background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
        /* IE6-9 fallback on horizontal gradient */
    }
     #tfn_nav .modal-header, #tfn_nav .modal-footer {
         border-bottom: transparent;
         border-top: transparent;
    }
     #tfn_nav .search-ico {
         color: #ccc;
         font-size: 25px;
         padding-top: 6px;
         padding-bottom: 6px;
    }
     #tfn_nav .search-ico:hover {
         color: #333;
    }
     #tfn_nav h5.modal-title {
         font-family: 'Open Sans',sans-serif;
    }
    /* flat-color-navbar-4 Begin */
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-nav {
         color: #ddd;
    }     #tfn_nav .dropdown-item-dropdown:focus, #tfn_nav .dropdown-item-dropdown:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }
    /* flat-color-navbar-4 End */
    /* texture-bg-navbar-4 Begin */
    /* Background Texture */
     #tfn_nav .bg-texture {
         background:url('http://via.placeholder.com/50x50')repeat;
    }
     #tfn_nav .dropdown-texture:focus, #tfn_nav .dropdown-texture:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture:focus, #tfn_nav .navbar-dark .navbar-nav .nav-texture:hover {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture {
         color: #ddd;
    }
    /* texture-bg-navbar-4 End */
    /* bg-navbar-4 Begin */
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:hover{
         color: #F0433A;
    }
     .hvr-bg-underline:before {
         background: #F0433A !important;
    }
    /* bg-navbar-4 End */
    /* gradient-color-navbar-4 Begin */
     #tfn_nav .bg-gradient {
         background: #45484d;
        /* Old browsers */
         background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
        /* IE6-9 */
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient {
         color: #ddd;
    }
     #tfn_nav .dropdown-gradient:focus, #tfn_nav .dropdown-gradient:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient:focus, #tfn_nav .navbar-dark .navbar-nav .nav-gradient:hover {
         color: #fff;
    }
     .hvr-gradient-underline:before{
         background:#fff !important;
    }
    /* gradient-color-navbar-4 End */
    /* transparent-color-navbar-4 Begin */
     #tfn_nav .bg-transparent {
         background-color: transparent !important;
         font-family: 'Open Sans',sans-serif;
		 border-bottom: 1px solid rgb(221, 221, 221,0.4);
    }
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-transparent {
         color: #ddd;
    }
     #tfn_nav .dropdown-transparent:focus, #tfn_nav .dropdown-transparent:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
    /* transparent-color-navbar-4 End */
    /* Main images & Title */
     .main-img {
         position:relative;
         display:block;
         margin:0 auto;
    }
     .main-img h2 {
         text-align: center;
         position: absolute;
         top: 26%;
         left: 15%;
         right: 15%;
         font-size: 70px;
         font-weight: 800;
         letter-spacing: 1px;
         color: #fff;
         text-shadow: 2px 2px #000;
    }
		/* Humbar Menu */ 
	#tfn_nav .navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: transparent;
   }
   #tfn_nav button:focus {
    outline: none;
}
}
/* 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;
         font-size: 14px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         outline: none;
    }
    /* Search box */
     .form-inline .form-control {
         border-radius:50px;
         -webkit-border-radius:50px;
         -moz-border-radius:50px;
         -o-border-radius:50px;
         border-radius: 50px;
         border: 0px;
         font-size: 14px;
    }
     #tfn_nav .search-bx {
         position: relative;
         display: block;
         margin-left: -30px;
    }
    /* Dropdown Navbar */
     #tfn_nav .dropdown-menu {
         border-radius:3px;
         -webkit-border-radius:3px;
         -moz-border-radius:3px;
         -o-border-radius:3px;
         border-top-left-radius:0px;
         border-top-right-radius:0px;
         margin:8px 0px 0px;
         padding:0px;
    }
     #tfn_nav .dropdown-item {
         display: block;
         width: 100%;
         padding: 12px 20px;
         font-size:14px;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav a.dropdown-item {
         border-bottom:1px solid #ccc;
    }
     #tfn_nav a.dropdown-item:last-child {
         border-bottom: 1px solid #ddd;
    }
     #bsec .alert {
         margin-top: 55px;
    }
     #tfn_nav .bg-dark {
         background-color: #222 !important;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link {
         color: #7d7d7d;
    }
    /* Navbar Hover */
     #tfn_nav .navbar-dark .navbar-nav .nav-link:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link:hover {
         color: #fff;
    }
     #tfn_nav .dropdown-item:focus, #tfn_nav .dropdown-item:hover {
         color: #fff;
         text-decoration: none;
         background-color: #444444;
    }
     #tfn_nav .form-control:focus {
         color: #444;
         background-color: #f0f0f0;
         border-color: #444;
         outline: 0;
         box-shadow: none;
         font-family: 'Open Sans',sans-serif;
    }
     #tfn_nav .form-control {
         font-family: 'Open Sans',sans-serif;
    }
    /* Navbar Submenu */
     #tfn_nav .dropdown-submenu {
         position: relative;
    }
     #tfn_nav .dropdown-submenu a::after {
         transform: rotate(-90deg);
         position: absolute;
         right: 6px;
         top: 22px;
    }
     #tfn_nav .dropdown-submenu .dropdown-menu {
         top: -10px;
         left: 100%;
         margin-left: 0px;
         margin-right: .1rem;
    }
     #tfn_nav .pad-20 {
         padding:25px;
    }
    /* Navbar Modal */
     #tfn_nav .modal-content {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;
        White+Gloss+%232 */
         background: rgb(255,255,255);
        /* Old browsers */
         background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
        /* IE6-9 fallback on horizontal gradient */
    }
     #tfn_nav .modal-header, #tfn_nav .modal-footer {
         border-bottom: transparent;
         border-top: transparent;
    }
     #tfn_nav .search-ico {
         color: #ccc;
         font-size: 25px;
         padding-top: 6px;
         padding-bottom: 6px;
    }
     #tfn_nav .search-ico:hover {
         color: #333;
    }
     #tfn_nav h5.modal-title {
         font-family: 'Open Sans',sans-serif;
    }
    /* flat-color-navbar-4 Begin */
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-nav {
         color: #ddd;
    }     #tfn_nav .dropdown-item-dropdown:focus, #tfn_nav .dropdown-item-dropdown:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }
    /* flat-color-navbar-4 End */
    /* texture-bg-navbar-4 Begin */
    /* Background Texture */
     #tfn_nav .bg-texture {
         background:url('http://via.placeholder.com/50x50')repeat;
    }
     #tfn_nav .dropdown-texture:focus, #tfn_nav .dropdown-texture:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture:focus, #tfn_nav .navbar-dark .navbar-nav .nav-texture:hover {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-texture {
         color: #ddd;
    }
    /* texture-bg-navbar-4 End */
    /* bg-navbar-4 Begin */
     #tfn_nav .background {
         background:url(../image/bg-4.jpg) center center !important;
         background-repeat:repeat-x;
         background-size:contain;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg {
         color: #fff;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:focus, #tfn_nav .navbar-dark .navbar-nav .nav-link-bg:hover{
         color: #F0433A;
    }
     .hvr-bg-underline:before {
         background: #F0433A !important;
    }
    /* bg-navbar-4 End */
    /* gradient-color-navbar-4 Begin */
     #tfn_nav .bg-gradient {
         background: #45484d;
        /* Old browsers */
         background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
        /* FF3.6-15 */
         background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
        /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
        /* IE6-9 */
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient {
         color: #ddd;
    }
     #tfn_nav .dropdown-gradient:focus, #tfn_nav .dropdown-gradient:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient:focus, #tfn_nav .navbar-dark .navbar-nav .nav-gradient:hover {
         color: #fff;
    }
     .hvr-gradient-underline:before{
         background:#fff !important;
    }
    /* gradient-color-navbar-4 End */
    /* transparent-color-navbar-4 Begin */
     #tfn_nav .bg-transparent {
         background-color: transparent !important;
         font-family: 'Open Sans',sans-serif;
		 border-bottom: 1px solid rgb(221, 221, 221,0.4);
    }
     #tfn_nav .bg-dark-bg {
         background-color:#222 !important;
         font-family: 'Open Sans',sans-serif;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-transparent {
         color: #ddd;
    }
     #tfn_nav .dropdown-transparent:focus, #tfn_nav .dropdown-transparent:hover {
         text-decoration: none;
         color: #555;
         background: #eee;
    }
    /* transparent-color-navbar-4 End */
    /* Main images & Title */
     .main-img {
         position:relative;
         display:block;
         margin:0 auto;
    }
     .main-img h2 {
         text-align: center;
         position: absolute;
         top: 30%;
         left: 15%;
         right: 15%;
         font-size: 70px;
         font-weight: 800;
         letter-spacing: 1px;
         color: #fff;
         text-shadow: 2px 2px #000;
    }
	#tfn_nav .animation{	
	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
	-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;
}
}
/* Large screens -- -- -- -- -- - */
 @media screen and (min-width: 1824px) {
    /* Styles */
}
 @media (min-width: 768px) {
    /* sub menu hover for flate-color */
     ul.navbar-nav li:hover > ul.dropdown-menu {
         display: block;
    }
     #navbar {
         text-align: center;
    }
     #tfn_nav .dropdown-menu-dropdown {
         border-radius:3px;
         -webkit-border-radius:3px;
         -moz-border-radius:3px;
         -o-border-radius:3px;
         border-top-left-radius:0px;
         border-top-right-radius:0px;
         margin:0px 0px 0px;
         padding:0px;
    }
     #tfn_nav .nav-pos{
         padding:0px;
    }
     #tfn_nav .navbar-dark .navbar-nav .nav-link-nav {
         display: block;
         padding: 18px 18px;
    }
     #tfn_nav a.dropdown-item-dropdown{
         border-top:transparent;
    }
    /* sub menu hover for Gradient */
     #tfn_nav .navbar-dark .navbar-nav .nav-gradient {
         display: block;
         padding: 18px 18px;
    }
    /* sub menu hover for texture */
     #tfn_nav .navbar-dark .navbar-nav .nav-texture {
         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.9s;
	animation-duration: 0.9s;
	-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%;
}
/* icon color */
 .fa.fa-circle {
     font-size:10px;
}
 .red-color {
     color:#FF0000;
}
 .yellow-color {
     color:#FFFF00;
}
 .blue-color {
     color:#00FFFF;
}