@font-face {
	font-family: MonReg;
	src: url('../font/Montserrat-Regular.otf');
}

@font-face {
	font-family: MonSemiBold;
	src: url('../font/Montserrat-SemiBold.otf');
}

/* nav top */
*{ font-family: MonReg; }


.socialMediaDiv .heartFil i{ color: rgba(185,2,191,1);  }

.blogReadMore{ color: rgba(185,2,191,1);}
.userFace{ height: 50px; width: 50px; background-position: center; background-size: cover; border-radius: 50%;  }
.userProfilePic div{ display: inline-block; vertical-align: middle;  }    

.userProfilePic .username{ font-weight: bold; padding-left: 10px;   }

.username .nameUser{ font-family: MonSemiBold; }
.username .dateUser{ color: #666; font-size: 0.85em;  }
.username div{ display: block; }
.userProfilePic{ margin-bottom: 2.5%; }

#blogFetchMain{ margin-top: 120px;  }
#navTwo{ transition:  all 0.5s; }   

#desktopHeader{ position: fixed; top: 0px; left: 0px; right: 0px; z-index: 9999;     }
body{ background-color: #efefef; }
#navOne{ background-color: #FFF; padding: 0px 0px; box-shadow: 0px 1px 4px rgba(0,0,0,0.25); border-bottom: 0px solid transparent ;    }
.navSecond{ font-family: MonReg;   }

.navSecond ul{ list-style: none; }
.navSecond ul li{ display: inline-block; padding: 12px 25px 5px 0px;  }
.navSecond ul li a{ color: #24292d; font-size: 0.85em; letter-spacing: 0.75px   }
.navSecond ul li a:hover{ text-decoration: none; }
.navFirstNav{ }
.navFirstNav .firstNavItem{ display: inline-block;  }
.navFirstNav .firstNavItem{  }
.firstNavItem a{ color: rgba(0,0,0,0.5); text-transform: uppercase; font-family: MonSemiBold; letter-spacing: 0.5px;   }
.firstNavItem a:hover{ text-decoration: none; }
.searchIconI{ background-color: rgba(0,0,0,.05); padding: 25px; text-align: center; }
.searchIconI i{ font-size: 1.2em; }
.searchIcon i{ font-size: 2em; color: rgba(0,0,0,0.5);    }
.searchIconMain .searchBox{ display: inline-block; }
.searchInputText input[type="text"]{  border: 0px;  padding: 10px 25px 10px 0px; color: #24292d; margin-right: 10px;   width: 300px; border-bottom: 1px solid #efefef; text-align: left; outline: none; transition: all 0.5s;   }

.searchInputText input[type="text"]:focus{  border-bottom: 1px solid #24292d;}

.loginDivMain div{ display: inline-block;  }
.loginDivMain{ background: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%);  color: #FFF; margin-left: -5px;   background-color: #24292d; padding: 25px; font-family: MonSemiBold;  }
.loginText{ font-family: MonSemiBold; }
.liFirstNav{ padding-left: 20px; }
.setRightTopFirst{ margin-left: 25px; float: right; }
.setLeftSettop{ float: left; padding: 8px 0px 0px 0px;    }
.blogImage{ height: 250px; background-size: cover; border-radius: 5px 5px 0px 0px; position: relative; }
.blogImage::after{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.15); content: " "; background: linear-gradient(to top right, rgba(0,0,0,0.25)  , rgba(0,0,0,0));  }
.blogTitle{ font-family: MonSemiBold; font-size: 1.2em; line-height: 1.6em; color: #24292d; padding: 10px 0px; height: 60px; overflow: hidden;    }
.blogDivMain{ background-color: #FFF;  box-shadow: 0px 2px 2px #ccc; border-radius: 5px; margin-bottom:10% ;     }
.bloggerDetailsSec{ padding: 15px; }
.blogDesc{ font-size: 0.9em; margin: 10px 0px; color: rgba(0,0,0,0.5); line-height: 1.8em; height: 65px; overflow: hidden;     }
#blogFetch{ margin: 0px 20px 0px 40px;    }
.activeSubTab{ border-bottom: 2px solid transparent ;  background-color: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%) !important ;  }
.activeSubTab a{  color: #FFF !important ; font-weight: bold  ; font-family: MonSemiBold;  font-weight: bold; text-align: center; padding: 4px 10px ; border-bottom: 1px solid #24292d; background: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%); border-radius: 5px;           }
.socialMediaDiv{  padding: 5px; margin-bottom: 10px;  }
.socialMediaDiv span i{ padding-right: 10px; }
.socialMediaOther{ padding: 10px 10px; }
.smallPostImage{ height: 180px; background-size: cover; border-radius: 5px 5px 0px 0px;  }
.smallPost{ background-color: #FFF; border-radius: 5px; margin-bottom: 10%; box-shadow: 0px 2px 2px #ccc;    }
.smallPostDesMain{ padding: 5px 10px; text-align: center; }
.smallPostLink{ padding: 5px 0px; }
.smallPostLink a{ color: #24292d; }
.smallPostTitle{ margin-top: 5%; font-weight: bold; }
#footer{ background-color: #000; color: #FFF; padding: 5% 0%;  }
.heaidngFooter{ text-align: center; font-size: 1.75em; margin-bottom: 4%;   }
.subFormFooterEmail{ text-align: center; }
.subFormFooterEmail .footerFormElement{ display: inline-block; }
.subFormIn{ border: 1px solid #FFF; padding: 20px 5px 22px 20px; border-radius: 50px; background-color:#24292d;    }
.footerFormElement input[type="email"]{ width: 350px; padding: 5px;  background-color:#24292d; border: none; font-size: 1.2em; outline: none;      }
.footerFormElement button{ background: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%); border: none; padding: 15px 45px; border-radius: 50px; box-shadow: 0px 2px 0px  rgba(121,60,225,1); outline: none;    }
.footerFormElement i{ font-size: 1.3em; }
#poweredByFooter{ text-align: center; background-color: #000; padding-bottom: 2%;  }
#phoneHeader{ display: none; }
  
#closeBurger{ display: none; }
.blackHumberScreen{ position: fixed; display: none; top: 0px; right: 0px; left: 0px; bottom: 0px; background: rgba(0,0,0,0.75); content: " "; z-index: 9;  }
.hideIcon{display: none; transition:  all 0.1s;  }
.searchBar{ display: none;  box-shadow: 0px 0px 1px #CCC;  }
.socialMediaDiv select{ padding: 1%; border: none; width: 95%;    }


/*blog detail*/

#blogDetailerContainer{ position: fixed; top: 5%; left: 15%; right: 15%; background-color: #FFF; z-index: 999999;   }
#blackScreenDetailBlog{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 9999;   background-color: rgba(0,0,0,0.75); content: " ";}
.topBlogImage{ height: 300px; background-position: center; background-color: #000; background-repeat: no-repeat;   }

@media screen and (max-width:768px){
    
    .mobileSearch input[type="text"]{ padding: 15px; width: 100%; border: 0px; outline: none;    }
    .searchButtonMob button{ background: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%); border: none; color: #FFF;  padding: 15px 0px; font-weight: bold; }
    .searchButtonMob button{ width: 100%; }
    #desktopHeader{ display: none; }
    #blogFetch{margin: 2px; }
    .blogImage{ height: 150px; }
    .blogTitle{ font-size: 1em; line-height: auto; height: 60px;   }
    .blogDesc{ font-size: 0.85em; }
    .blogDesc{ margin: 5px 0px; height: 40px;  }
    .footerFormElement input[type="email"]{width: 180px; }
    .footerFormElement i { display: none; }
    .footerFormElement button{  padding: 10px 10px; border-radius: 50px; box-shadow: 0px 2px 0px  rgba(121,60,225,1); outline: none; font-size: 0.85em;     }
    .heaidngFooter{ font-size: 1.25em; margin-bottom: 10%;  }
    .subFormIn{padding: 10px 4px 15px 10px;   }
    .footerPoweredBy{ padding: 5% 0%: }
    .smallPostImage{ height: 120px; }
    .smallPostTitle{ font-size: 0.85em; margin-top: 0%;  }
    .smallPostLink{ padding: 0px; }
    .smallPostLink a{ font-size: 0.75em; }
    
    /*mobile screen*/
    
    #phoneHeader{ display: block; }
    
    .scrollBarTopFixed{ position: fixed; top: 0px; left: 0px; right:0; height: 65px; background-color: #FFF; z-index: 9999; box-shadow: 0px 1px 1px #CCC;     }
    #blogFetchMain{ margin-top: 80px;  }
    .logoMob{ padding: 7px 15px; }
    .humberMenuMob{ padding: 18px 0px; }
    .mobileSearchIcon{  padding: 18px 0px; font-size: 1.55em; }
    .humberMenuMob i{ font-size: 2em; }
    #mobileNavFetch{ position: fixed; z-index: 999; top: 60px;  background-color: #FFF; height: 100vh; padding-bottom: 200px;  overflow: scroll; right: 0px; left: 110%; transition: all 0.5s;   }
    .mobNavLi{padding: 15px 25px; border-bottom: 1px dashed #efefef;   }
    .mobNavLi a{ color: #24292d; font-weight: bold; }
    .mobNavOne{ background-color: #24292d; color: #FFF; }
    .mobNavOne .mobNavLi a{ color: #FFF; }
    .loginButton{background: linear-gradient(to right, rgba(185,2,191,1) 0%, rgba(121,60,225,1) 100%); padding: 20px 25px; }
    .loginPhone{ font-size: 1.8em; margin: -6px 0px -10px 0px;   }
 
}