/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v85/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-size: 40px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}


:root{
    --skin-hover: rgba(0, 0, 0, 0.1); 
    --skin-color:  rgba(255, 255, 255, 0.7);
}
.default-skin{
  font-family: 'Questrial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  font-smooth: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
   --skin: #2a2a2e;
   --skin-hover: #2098D1; 
   --skin-color: rgba(255, 255, 255, 0.8); 
}
.light-skin{
   --skin: #f0f0f0;
   --skin-hover: #ddd; 
   --skin-color:  #232323;
}
.menu-body.visibility{
  visibility: hidden;
}
.menubar{

}
.menu-trigger{
    position: absolute;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    top: 10px;
    padding: 0 4px;
    color: rgb(0 0 0 / 80%);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
   

}
.menu-trigger:hover{
  opacity: 0.8;
-webkit-opacity: 0.8;
}


.menu-trigger.left{
    right: 22px;

}

.menu-trigger.right{
   right: 20px;
}
.sticky{
position: absolute;
    top: 0px;
    right: 0;
    z-index: 9999;
}

.menu-container{
  font-family: 'Questrial', sans-serif;
   overflow: auto;
   display: block;
   top: 120px;
   
}

.menu-container::-webkit-scrollbar {
  width: 4px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2); 
}
 
.menu-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.11); 
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.position-left{
   left: -270px;
}
.position-right{
   right: -270px;
}

.position-left.open{
    left: 0;
}

.position-right.open{
    right: 0;
}

.menu-container,
.menu-head,
.menu-left,
.menu-left.open
.menu-right,
.menu-right.open{
    transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -ms-transition: .4s;
   
}

.menu-container,
.menu-head{
    background: #ffffff;
    position: fixed;
    z-index: 1000;
    width: 270px;
    
}
.menu-head .layer{

}
.wapp {
    padding: .75rem 0;
    color: #1a1f45;
    font-weight: 700;
}
.lin {
    display: block;
    border-top: 1px solid #979797;
    border-bottom: 1px solid #979797;
}

.menu-head{
   height: 120px;
   box-sizing: border-box; 
   margin: 0px;
   top: 0;
   
}

.menu-items {
  list-style: none;
  font-size: 14px;
}

.dropdown-heading,
.menu-items li a{
   text-decoration: none;
    padding: 4px;
    padding-left: 29px;
   display: block;
  color: rgb(0 0 0 / 80%);
   border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
   margin: 0;
   cursor: pointer;
   user-select: none;
  -webkit-user-select: none;
}
/* Icon Style */
.menu-items li i{
   font-size: 16px;
   margin-right: 10px;
 }
.dropdown-heading{
  -webkit-tap-highlight-color: transparent;
}
	
.dropdown-heading:hover,
.menu-items li a:hover{
    background: #552090;
    color: white;
}



@keyframes fadeIn{
   from{
     opacity: 0;
    -webkit-opacity: 0;
    }
    to{
     opacity: 1;
    -webkit-opacity: 1;
   }
}
@-webkit-keyframes fadeIn{
   from{
     opacity: 0;
    -webkit-opacity: 0;
    }
    to{
     opacity: 1;
    -webkit-opacity: 1;
   }
}


/* Dropdowns */
.has-sub ul{
   list-style: none;
   overflow: hidden;
   display: none;
   background: #f2f9f9;
}



.has-sub ul li a{

   display: block;

   padding: 12px 33px;

   border-bottom: 0;

   font-size: 13px;
   color: #444;
   transition: .1s;
   -webkit-transition: .1s;
   border-bottom: 1px dotted #e1e1e1;
}

.has-sub ul li a:hover{
   background: #dedede;
   transition: .1s;
 -webkit-transition: .1s;
}

.has-sub span{

  display: block;

  box-sizing: border-box;

  

}



.has-sub i.d-arrow{
   float: right;
   margin-right: 10px;  
   transition: 0.360s;
   font-size: 16px;
}



.has-sub .d-arrow.d-down{
   transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
   transition: 0.360s;
 -webkit-transition: 0.360s;
 -moz-transition: 0.360s;

}
 
.col{

   
}
.row{

    
}
.for-name {
   max-width: 140px;
   padding: 10px;
   color: var(--skin-color);
}
.for-pic {
    max-width: 70px;
}

.profile-pic img{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.01);
   object-fit: cover;
  
}
.menu-head h3 {
   top: -35px;
   font-size: 13pt;
   font-weight: 400;
  
}

.tagline,
.menu-head h3{
   display: block;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tagline{
   font-size: 11px;
   bottom: 32px;
   display: block;
   
}

/* Dim background effect */
.dim-overlay{
   display: none;
}

.dim-overlay:before {
	content: "";
	background-color: rgba(0, 0, 0, .4);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	z-index: 2;
}
.logo{
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
   font-size: 22px;
}
.logo img{
   width: 130px;
   margin-top: 10px;
   height: auto;

}
.logo a{
   text-decoration: none;
   color: var(--skin-color);
}
.logo a:hover{
   color: var(--skin-hover);
}


header {
	position: relative;
}
.menu-triger {
display: block;

    position: absolute;
    right: 3px;
    top: 14px;
}	
.menu-close {
	display: block;
	width: 28px;
	height: 28px;	
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 100;
}
.menu-popup {
	display: none;	
	background: #fff;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0;
	box-sizing: border-box;
	padding: 30px;
	z-index: 9999;	
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.menu-popup ul {
	margin: 0;
	padding: 0;
}
.menu-popup li {
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.menu-popup li a {
display: block;
    padding: 1.5em 1em;
    background-color: #fff;
    color: #ad9864;
    font-size: 1.5rem;
    line-height: 1.5em;
    font-weight: 300;
    text-align: center;
}
.body_pointer * {
	cursor: pointer;
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 43px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
      color: #383838;
  -webkit-font-smoothing: antialiased;
}


@media only screen and (min-width: 600px) {
.material-icons {
    font-size: 82px;
}
}

@media only screen and (max-width: 250px) {
.material-icons {
       font-size: 25px;
}
}
body {
    background: url(../img/tfn3.jpg) repeat ;
    background-color: #373737;
}
h1, h2, h3, h4, h5, h6 {
    color: #212121;
    text-transform: capitalize;
}
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
h4{
	    background-color: #cecece;
    padding: 3%;
}
.ma4 {
    margin: 1.2rem;
}
.ml-auto, .mx-auto {
    margin-left: auto;
}
.mr-auto, .mx-auto {
    margin-right: auto;
}
img {

	width:100%;
	border:0;
	padding:0;
	margin:0;
}
.animate-fade{
animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    color: white;
  }
  100% {
    color: black;
  }
}

.btn-buy {
    background: rgba(255,255,255,0.2);
}
.rounded {
    border-radius: 0.25rem;
}
.pl-3, .px-3 {
    padding-left: 1rem;
}
.pr-3, .px-3 {
    padding-right: 1rem;
}
.pb-2, .py-2 {
    padding-bottom: 0.5rem;
}
.pt-2, .py-2 {
    padding-top: 0.5rem;
}
.d-flex {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}
@media (max-width: 576px)
* {
    font-size: .9rem;
}
* {
    font-weight: 400;
}

a, * {
    outline: none;
}
.mr-1, .mx-1 {
    margin-right: 0.25rem;
}
.text-center {
    text-align: center;
}
.w-100, .col-sm-4 {
    width: 100%;
}
.button {
    cursor: pointer;
}
.btn-buy .price .old {
    font-size: 16px;
    text-decoration: line-through;
}
.d-block {
    display: block;
}
.font-weight-300 {
    font-weight: 300;
}
.btn-buy .price .new {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.bg-primary{
background-color: #314E85;
}

.myButton {
	box-shadow: -3px 10px 13px -5px #bab8a7;
	background:linear-gradient(to bottom, #ffec64 5%, #e09620 100%);
	background-color:#ffec64;
	border-radius:24px;
	border:1px solid #ffd08a;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-weight:bold;
	padding:12px 38px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
	width: 100%;
	font-size:0.9em;
}
.myButton:hover {
	background:linear-gradient(to bottom, #e09620 5%, #ffec64 100%);
	background-color:#e09620;
}
.myButton:active {
	position:relative;
	top:1px;
}
@media (max-width: 767px) {
    .gifsticky {
      margin-top: -425.4%;
    }
  }
@media (min-width: 768px) and (max-width: 991px) {
    .gifsticky {
      margin-top: -423.7%;
    }
  }
  @media (min-width: 992px) {
    .gifsticky {
      margin-top: -423.5%;
    }
}

@media (min-width: 768px){
.col-sm-4 {
    width: 99.33333333% !important;
}
}
@media only screen and (min-width: 600px) {
.mx-auto {
  width: 100%;
}
}

.menu_rec{
	    font-family: Arial, Helvetica, sans-serif;
    color: #ad9864;
    font-weight: bold;
    position: absolute;
right: 24px;
    top: 254%;
    font-size: 10px;
	
}
@media only screen and (min-width: 600px) {
.menu_rec {
    right: 44px;
    top: 279%;
    font-size: 13px;
}}