@charset "utf-8";
/* CSS Document */


body{margin:0px auto; padding:0px auto;}
@font-face {font-family:'Poppins'; src: url(https://fillinvoice.com/fonts/Poppins-Light.ttf);}
@font-face {font-family:'Questrial'; src: url(https://fillinvoice.com/fonts/Questrial-Regular.ttf);}
@font-face {font-family:'Aaa'; src: url(https://fillinvoice.com/fonts/Poppins-Light.ttf);}
@font-face {font-family:'Erass'; src: url(../fonts/ERASMD.TTF);}
@font-face {font-family:'Poppins'; src: url(../fonts/Poppins-Light.TTF);}
@font-face {font-family:'WorkSans'; src: url(../fonts/WorkSans-Light.TTF);}
@font-face {font-family:'Lobster'; src: url(../fonts/Lobster-Regular.ttf);}

@font-face {font-family:'lobster'; src: url(https://fillinvoice.com/fonts/Lobster-Regular.ttf);}
@font-face {font-family:'ElMessiri'; src: url(../fonts/ElMessiri-Regular.ttf);}
@font-face {font-family:'Courgette'; src: url(../fonts/Courgette-Regular.ttf);}
@font-face {font-family:'Archivo'; src: url(../fonts/Archivo-Medium.ttf);}
@font-face {font-family:'Almarai'; src: url(../fonts/Almarai-Light.ttf);}
@font-face {font-family:'AguafinaScript'; src: url(../fonts/AguafinaScript-Regular.ttf);}
@font-face {font-family:'Oswald'; src: url(../fonts/Oswald-SemiBold.ttf);}
@font-face {font-family:'RedHat'; src: url(../fonts/RedHatDisplay-Regular.ttf);}
@font-face {font-family:'Fredoka'; src: url(https://fillinvoice.com/fonts/FredokaOne-Regular.ttf);}


h2{ font-family:Arial, Helvetica, sans-serif; font-size:50px;  color:#444; margin-bottom:10px; margin-top:50px;}
h3{ font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#444;  line-height:28px; font-weight:700; margin-top:40px; xcolor:#F00; margin-bottom:-2px;}
br{  margin-bottom: 12px;  display: block;}
li{ margin-top:15px;}
p{ margin-top:5px; margin-bottom:40px; } 
 
#blog_frame{ width:100%; max-width:1256px;    min-width:1000px; height:auto;  float:left;  display:block;    overflow:hidden;  margin-left:calc((100% - 1256px)/2);  margin-top:40px;}
#blog_frame_left{width:826px; height:auto; overflow:hidden; float:left;  }
#blog_frame_right{width:320px; height:auto; float:right;}

#blog_title_top{width:100%; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:48px; font-weight:300; border-bottom:1px solid; color:#333;}
#blog_title_bottom{width:100%; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300; margin-top:6px;}

.adframe_728{width:100%; height:auto; float:left; text-align:center; margin-top:40px; margin-bottom:40px;}
.adframe_300x250{width:100%; height:250px; float:left; text-align:center; xmargin-top:40px; margin-bottom:40px;}
.adframe_pop_art{width:100%; height:auto; float:left; text-align:center; margin-bottom:40px; margin-top:40px;}

.article_intro{width:100%; xheight:214px; height:auto; float:left;}
											.article_intro_left{width:264px;  xheight:214px;   height:142px; float:left;  overflow: hidden; position: relative; background-color:#999; border-radius:15px;  padding-top:12px; padding-left:20px; padding-right:20px; 											 border:3px solid; border-color:#666; font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:700; color:#fff;}
.article_intro_left img{width: 100%; height: 100%; object-fit: cover;  display: block;}

.article_intro_right{width:456px; height:77px; float:right}
.article_intro_right_title{width:100%; height:56px; float:left;  font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:700; color:#2a3c3d; }
.article_intro_right_title a:link{ text-decoration:none; color:#2a3c3d;}
.article_intro_right_title a:visited{text-decoration:none; color:#2a3c3d;}


.article_intro_right_date{width:100%; height:16px; float:right; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; margin-top:5px;   color:#06C;; }
.article_intro_right_description{xwidth:100%; width:456px; height:86px; float:right;  font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:300; margin-top:4px; line-height:24px; color:#666; }

.article_intro_right_link_frame{width:456px; height:50px; float:right; }
.article_intro_author_left{width:50px; height:50px; float:left; border-radius: 50%; display:inline-block; }
.article_intro_author_right{width:88px;  height:38px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; color:#333;  margin-top:15px;  margin-left:7px;}
.article_intro_category_left{width:50px; height:50px; float:left; border-radius: 50%; display:inline-block; }
.article_intro_category_right{width:124px; xheight:38px; height:20px; float:left;    font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; color:#346C8D; xline-height:42px; margin-top:16px; margin-left:7px;}
.article_intro_category_right a:link{text-decoration:none; color:#346C8D; }
.article_intro_category_right a:hover{text-decoration:none; color:#346C8D; }
.article_intro_category_right a:visited{text-decoration:none; color:#346C8D; }
											.article_intro_article_left{width:50px; height:50px; float:left; border-radius: 50%; display:inline-block; xbackground-color:#09F; margin-left:7px;  }
.article_intro_article_right{width:60px; height:38px; float:left;  font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:700;  color:#09F; margin-top:8px;  margin-left:7px; }
.article_intro_article_right a:link{color:#09F; text-decoration:none;}
.article_intro_article_right a:visited{color:#09F; text-decoration:none;}
.article_intro_list_separator{width:100%; height:60px; float:left;}



#category_frame{width:100%; height:420px; float:left;  }
.category_btns{width:90%; height:45px; float:left;  font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:700; color:#556364; border-bottom:1px solid; border-bottom-color:#ccc; cursor:pointer;}
.category_btns:hover{background-color:#f5f5f5;}

.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.category_btns_left{width:66px; height:45px; float:left;  position: relative; opacity:50%;}
.category_btns_right{width:220px; height:45px; float:left;  font-family:'Poppins'; font-size:20px; font-weight:300; color:#556364; line-height:46px;}


#popular_articles_frame{width:100%; height:auto; float:left;}
#popular_articles_header{width:calc(100% - 30px); xheight:60px; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:700; color:#2a3c3d; margin-bottom:6px; padding-left:30px;}
#popular_articles_month{width:calc(100% - 30px); height:60px; xheight:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:#2a3c3d; padding-left:30px;}
.popular_articles{width:100%; height:150px; float:left; margin-bottom:30px;}
.popular_articles_left{width:146px; height:150px; float:left; display:none; }
.popular-articles-image {zwidth: 100%;  width: auto;  object-fit: cover; /* optional: crops to fill if needed */ height: 150px;  display: block;}
.popular_articles_right{width:150px; height:84px; xfloat:right; float:left; margin-left:30px;}
.popular_articles_right_inner_wrapper{width:150px; height:130px; float:right;}
.popular_articles_right_top{width:150px; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300; color:#000;}
.popular_articles_right_mid{width:150px; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#666;  margin-top:10px;}
.popular_articles_right_mid_2{display:none;}
.popular_articles_right_bottom{width:70px; height:20px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:700; color:#FFF; text-align:center; line-height:20px; cursor:pointer; background-color:#0CC;}


.navigator_seperator{width:100%; height:40px; float:left;}
.navigator_btns{width:44px; height:44px;  border-radius: 50%; float:left; margin-left:44px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 36px;  font-family:'Questrial';  font-weight:700;  font-size:22px;  line-height:44px;  color:#aaa; cursor:pointer; text-align:center;}
.navigator_btns:hover{ background-color:#0CC; color:#FFF;}
#navigator_frame_outer{width:88%; height:100px; margin:0px auto; padding:0px auto; text-align:center;  Xmargin-left:calc((100vw - 90%)/2);}
#blog_navigator_frame{width:auto; height:150px;  xfloat:left;   float:left;    margin-left:calc((100% - 506px)/2);   padding-right:44px;}



/* ARTICLE.PHP */
#category_link{width:98%; height:30px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:300; color:#666679; padding-left:0.3%; margin-top:20px;}
#category_link  a:link{ text-decoration:none; color:#555;}
#category_link  a:hover{ text-decoration:none; color:#3CF;}
#category_link  a:visited{ text-decoration:none; color:#555;}
#category_link  a:active{ text-decoration:none; color:#555;}
#article_title{width:100%; height:auto; font-family:Arial, Helvetica, sans-serif; font-size:60px; margin-bottom:20px; color:#285278; font-weight:700; }
#author_details_frame{width:100%; height:auto; float:left; }
#author_image{width:72px; height:52px; float:left;}
#author_name{width:auto; height:20px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;color:#666679; margin-top:16px; border-right: 1px solid; border-right-color:#666679; padding-right:16px;}
#date_published{width:auto; height:20px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;color:#666679; margin-top:16px;   padding-left:16px;}

#main_article_image{width:100%; height:auto; float:left; margin-top:30px; margin-bottom:40px;}
.full-width-image {width: 100%; height: auto; display: block;}

#article_frame{width:100%; height:auto; float:left; font-family:'Poppins'; font-size:18px; color:#666; font-weight:300; line-height:38px;}












#container{max-width: 2280px; min-width:1200px; height:auto; margin:0px auto; padding:0px auto;  }

 
#top_frame{width:100%; height:710px; margin:0px auto; padding:0px auto; }
#title_frame{width:84%; height:110px; margin:0px auto; padding:0px auto; }
#title_inner{width:300px; height:100px; float:left;}
#title{width:300px; height:auto; float:left;  font-family:'lobster'; font-size:50px; font-weight:300; color:#069; line-height:50px; margin-top:20px;}
#slogan{width:280px; height:auto; float:left;  margin-left:2px; font-family:'ElMessiri'; font-size:20px;  
Xcolor:#F99; color:#F99; font-weight:700; line-height:20px; margin-top:5px; }

#navigator_frame{width:660px; height:32px; float:right; margin-top:30px;}
.nav_btns{width:auto; height:30px; float:left;  margin-left:34px; font-family:"Fredoka"; font-size:16px; font-weight:300; Xcolor:#06C; color:#66C;}
.nav_btns_red{width:auto; height:30px; float:left; margin-left:34px; font-family:"Fredoka"; font-size:16px; font-weight:300; color:#F03;}
.nav_btns_blue{width:auto; height:30px; float:left; margin-left:34px; font-family:"Fredoka"; font-size:16px; font-weight:300; color:#09F;}

 


.footer{width:100%; height:167px; margin:0px auto; padding:0px auto;  margin-top:50px; border-top:1px solid; border-top-color:#ccc; }
#footer_top{width:884px; height:20px; margin:0px auto; padding:0px auto;  margin-top:40px;}
.footer_top_btns{width:auto; height:20px; float:left;  margin-left:15px; cursor:pointer;font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;   color:#888;}
.footer_top_btns a:link{ text-decoration:none; color:#888;}
.footer_top_btns a:hover{color:#06F; text-decoration:underline;}
.footer_top_btns a:visited{color:#888; text-decoration:none;}


#footer_mid{width:190px; height:40px; margin:0px auto; padding:0px auto;  margin-top:15px; }
.social_media_icons{width:38px; height:38px; float:left; margin-left:12px; cursor:pointer;}
#footer_lower{width:800px; height:auto; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:12px; }
#footer_bottom{width:800px; height:20px; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:2px;}











@media screen and (max-width: 1300px) {
#container{width:100%; max-width: 1300px; min-width:280px; height:auto; margin:0px auto; padding:0px auto; xbackground-color:#fCC;}

#blog_frame{max-width:1256px; min-width:700px; height:auto; margin:0px auto; padding:0px auto; float:center; display:block; overflow:hidden;  margin-top:40px;}
#blog_frame_left{width:826px; height:auto; float:left; xbackground-color:#9F0;}
#blog_frame_right{width:320px; height:auto; float:right; xbackground-color:#FC0;}

#article_title{width:96%; padding-left:2%; padding-right:2%; font-size:40px;}
#category_link{width:94%; padding-left:2%; padding-right:2%;}
#author_details_frame{width:96%; padding-left:2%; padding-right:2%;}
#main_article_image{width:96%; padding-left:2%; padding-right:2%;}
#article_frame{width:96%; padding-left:2%; padding-right:2%; font-family:'Poppins';}

}





@media screen and (max-width: 1170px) {
#blog_frame{width:100%; max-width:826px; min-width:700px; height:auto; float:left; margin-left:calc((100% - 826px)/2); display:block; overflow:hidden;  margin-top:40px;}
#blog_frame_left{width:826px; height:auto; float:left; xbackground-color:purple;  }
#blog_frame_right{width:100%; height:auto; float:right; xbackground-color:palegreen;}
#category_frame{ display:none;}
 
#popular_articles_frame{ margin-top:40px;}
.popular_articles{width:100%; height:290px; float:left; margin-bottom:30px; xbackground-color:#FF0;}

.popular_articles_left{width:304px;  height:214px; float:left;  xbackground-color:#909;}
.popular-articles-image { width: auto;  object-fit: cover; /* optional: crops to fill if needed */ height: 214px;  display: block;}

.popular_articles_right{ width:calc(100% - 356px); height:130px; float:right;   xbackground-color:#390;}
.popular_articles_right_inner_wrapper{width:100%; xbackground-color:#F30;}
 
.popular_articles_right_top{width:100%; font-size:20px;}
.popular_articles_right_mid{width:100%; font-size:16px;  xbackground-color:#F90;}
.popular_articles_right_bottom{ float:right; xbackground-color:#9FF;}


#top_frame{text-align:center; }

#title_frame{width:auto; display:inline-block;}
#navigator_frame{display:none;}

#popular_articles_header{padding-top:60px; border-top:1px solid; border-top-color:#ccc; margin-top:20px;}
}







@media screen and (max-width:  910px) {
#blog_frame{max-width:700px; min-width:280px; height:auto; float:left; margin-left:calc((100% - 700px)/2); display:block; overflow:hidden;  margin-top:40px; xbackground-color:#966;  xvisibility:hidden;}
#blog_frame_left{width:96%; padding-left:2%; padding-right:2%; height:auto; float:left;   xbackground-color:#F36;  xopacity:20%; xvisibility:hidden;}
#main_article_image{width:100%; padding-left:0%; padding-right:0%;}

.article_intro{width:100%; xheight:214px; height:auto; float:left;  xbackground-color:#F6F;}
.article_intro_left{width:180px; height:130px;}
.article_intro_right{width:calc(100% - 200px); height:130px; float:right; xbackground-color:#F90; }
.article_intro_right_title{height:auto;}
.article_intro_right_description{width:100%; height:auto;}
.article_intro_right_link_frame{width:100%; margin-top:10px;}

#popular_articles_frame{width:96%; padding-left:2%; padding-right:2%; height:auto; float:right;  xbackground-color:#900; }

.popular_articles{width:100%; height:150px; float:left; margin-bottom:30px; xbackground-color:#FF0;}

.popular_articles_left{width:180px;  height:130px; float:left;  xbackground-color:#909;}
.popular_articles_right{ width:calc(100% - 200px); height:120px; float:right;   xbackground-color:#390;}
.popular_articles_right_inner_wrapper{xwidth:150px; height:120px; xfloat:right;}

.popular-articles-image {  width: auto;  object-fit: 100%; /* optional: crops to fill if needed */ height: 100%;  display: block;}

#article_frame{line-height:28px;}




.footer{width:100%; height:400px;; margin:0px auto; padding:0px auto;  margin-top:50px; border-top:1px solid; border-top-color:#ccc; }
#footer_top{width:300px; height:auto; margin:0px auto; padding:0px auto; text-align:center; margin-bottom:40px;     margin-top:40px; xbackground-color:#9F6;}
.btn_wrapper{width:auto;   height:24px; float:center; xdisplay:flex; margin:0px auto; padding:0px auto; display: inline-block;}
.footer_top_btns{width:auto; height:24px; float:left;  margin-right:25px; cursor:pointer;font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;   color:#888; }
.footer_top_btns a:link{ text-decoration:none; color:#888;}
.footer_top_btns a:hover{color:#06F; text-decoration:underline;}
.footer_top_btns a:visited{color:#888; text-decoration:none;}


#footer_mid{width:190px; height:40px; margin:0px auto; padding:0px auto;  margin-top:15px;}
.social_media_icons{width:38px; height:38px; float:left; margin-left:12px; cursor:pointer;}
#footer_lower{width:220px; height:auto; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:12px;}
#footer_bottom{width:220px; height:20px; margin:0px auto; padding:0px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#999; text-align:center; margin-top:2px;}

#author_name{width:calc(100% - 100px); xbackground-color:#69F; margin-top:6px; border-right:0px;}

#date_published{ xbackground-color:#F60; text-align:left; padding-left:0px; margin-top:2px;}

.navigator_btns{width:32px; height:32px;  border-radius: 50%; float:left; margin-left:34px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 36px;  font-family:'Questrial';  font-weight:700;  font-size:16px;  line-height:34px;  color:#aaa; cursor:pointer; text-align:center;}
#blog_navigator_frame{width:auto; height:150px;  xfloat:left;   float:left;    margin-left:calc((100% - 348px)/2);  padding-right:44px;}

}


@media screen and (max-width: 716px) {
#container{width:100%;}
#blog_frame{width:100%; margin-left:0px;}
#blog_frame_left{width:96%; margin-left:0px;}
}


@media screen and (max-width: 610px) {

#blog_frame_left{xbackground-color:#FFC; }
#article_title{font-size:32px;}


.article_intro_right_link_frame{width:auto; height:auto; float:left;}

.article_intro_right_title{font-size:18px;}
.article_intro_right_description{font-size:14px;}
.article_intro_author_left{ width:30px; height:30px; margin-top:4px;}
.article_intro_author_right{width:70px; height:auto;  xmargin-top:2px; margin-top:10px; font-size:10px; margin-left:5px;  }
.article_intro_category_left{width:30px; height:30px; margin-left:6px; margin-top:4px;}
.article_intro_category_right{width:90px; height:auto; margin-top:12px; font-size:10px; margin-left:5px;}
.article_intro_article_left{width:30px; height:30px; margin-left:6px; margin-top:4px;}
.article_intro_article_right{width:46px; height:auto; margin-top:7px; font-size:10px; margin-left:5px; line-height2:0px;}

.article_intro_right_description{width:96%; padding-left:2%; padding-right:2%; height:auto; float:right; line-height:18px;}


#popular_articles_header{width:96%; padding-left:2%;  xheight:60px; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:700; color:#2a3c3d;}
#popular_articles_month{padding-left:7px;}

.popular_articles_right_top{ font-size:18px;}
.popular_articles_right_mid{ font-size:12px; display:none;}
.popular_articles_right_mid_2{display:block; width:100%;; height:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:300; color:#666;  margin-top:10px; xbackground-color:#FF6;}

.popular_articles{width:100%; height:auto; float:left; margin-bottom:30px; xbackground-color:#FF0;}

.popular_articles_left{display:none;}
.popular_articles_right{ width:96%; height:auto; padding-left:2%; padding-right:2%; }

.popular_articles_right_inner_wrapper{xwidth:150px; height:auto; xfloat:right;}

 
}


@media screen and (max-width: 400px) {
.article_intro_left{width:100%; height:auto; float:left; background-color:#F69; overflow: hidden; position: relative;}
.article_intro_right{width:100%; height:auto;}
.article_intro_right_title{width:96%; padding-left:2%; padding-right:2%; font-size:18px;}
.article_intro_right_date{width:96%; height:16px; padding-left:2%; padding-right:2%;  float:left;  }

 

}