/*------------------------------------------------------------------------------------
Theme Name: 	B2B News Online Theme
Author: 		
Description:	Default stylesheet for B2B News Online Website
Version: 1.0.0
Tags: 
/*=========================== site globals ===========================*/
html	{scroll-behavior: smooth;}

body    {font-family: Corbel;}
h1      {font-size: 2rem; margin-bottom: 2rem;}
h2      {font-size: 1.5rem; margin-bottom: 1.5rem;}
h3      {font-size: 1.375rem; margin-bottom: 1rem;}
h4      {font-size: 1.25rem; margin-bottom: 1rem;}
h5      {font-size: 1.125rem; margin-bottom: 1rem;}
h1, h2, h3, h4, h5       {font-weight: bold; line-height: 1; margin-top: 0;}
p	            {font-size: 1.125rem; line-height: 1.1875; margin-bottom: 1rem;}
p:last-child    {margin-bottom: 0;}

.black  	        {color: #000;}
.blue, .blue a      {color: #00B1F2;}
.offblack           {color: #333;}
.white, .white a    {color: #FFF;}

.black-bg               {background-color: #000;}
.blue-bg                {background-color: #00B1F2;}
.white-bg               {background-color: #FFF;}

.pink-bg               {background-color: #FF00fF;}

.fa-105x                {font-size: 1.5em} /* custom size for font awesome icons*/

.blackbtn               {background-color: #000; border: 2px solid #000;}
.bluebtn                {background-color: #00B1F2; border: 2px solid #00B1F2;}
.bluebtnfixed           {background-color: #00B1F2; border: 2px solid #00B1F2;}
.offblackbtn            {background-color: #333; border: 2px solid #FFF;}
.whitebtn               {background-color: #FFF; border: 2px solid #FFF;}

.blackbtn, .bluebtn, .bluebtnfixed, .offblackbtn     {border-radius: 2px; box-sizing: border-box; color: #FFF; display: inline-block; font-size: 1rem; font-weight: bold; padding: 5px 15px; text-transform: capitalize;}

.blackbtn:hover         {background-color: #FFF; border: 2px solid #4f1070; color: #4f1070; transition: all 0.5s;}
.bluebtn:hover          {background-color: #FFF; border: 2px solid #fe0772; color: #fe0772; transition: all 0.5s;}
.offblackbtn:hover      {background-color: #00B1F2; border: 2px solid #00B1F2; color: #fff; transition: all 0.5s;}
.whitebtn:hover         {background-color: #FE0772; border: 2px solid #FFF; color: #FFF; transition: all 0.5s;}

.dateandtime            {color: #000; font-size: 1.125rem;}

/*============================ start header > menu navigation ============================*/
header                      {border-bottom: 1px solid #C0C0C0;}
header div.container        {align-items: center; position: relative; width: 1440px; z-index: 8;}
header img.logo             {height: 43px;}

#nav-menu                   {font-size: 1.275rem; /* justify-content: flex-end; */ overflow: hidden; padding: 10px 0 0; text-transform: capitalize;}
#nav-menu ul    	        {list-style-type: none; margin: 0; overflow: hidden; padding-left: 0 !important;}
#nav-menu ul li	            {display: inline-block; padding: 0;}
#nav-menu ul li a           {color: #333; display: block; font-weight: bold; margin: 0 3rem 0 0;}
#nav-menu ul li a::after    {background: #333; content:''; display:block; height:2px; margin-top:3px; transition:width .4s; width: 0;}
#nav-menu ul li a:hover     {color: #00B1F2; text-decoration: none;}
#nav-menu ul li a:hover::after    {width: 105%;}

#nav-menu ul li.current_page_item a   {color: #00B1F2;}

#menu .grid-4       {padding: 28px 0;} 

#mobile-menu, #mobile-nav         {display: none;}

.whitebordertop     {border-top: 2px solid #FFF;}

/*--------------------------- homepage slider ---------------------------*/
main.homepage h1 a, main.homepage h2 a, main.homepage h3 a, main.homepage h4 a    {color: #000;}
main.homepage h1 a:hover, main.homepage h2 a:hover, main.homepage h3 a:hover, main.homepage h4 a:hover    {color: #00B1F2;}

main.homepage h3 a:hover    {color: #00B1F2;}

main.homepage .hero h2      {font-size: 1.5rem;}
main.homepage .hero h3      {font-size: 1.25rem;}
main.homepage .hero h4      {font-size: 1rem;}
main.homepage ul.post-categories, main.homepage ul.post-categories li {list-style-type: none; margin: 0.5rem 0; padding: 0;}
main.homepage ul.post-categories li a {background-color: #000; color: #FFF; display: inline-block; padding: 5px 10px; text-transform: capitalize;}

#homeherosingle img         {height: 550px !important;}
#homeherodouble img         {height: 242px !important;}
#homeherotriple img         {height: 155px !important;}

.bluetopborder              {border-top: 3px #00B1F2 solid;}

.homespotlight .grid-6:first-of-type, .homespotlight .grid-6:nth-of-type(5)    {margin-left: 0;}

.homespotlight .grid-6      {margin-bottom: 5px; min-height: 370px; width: 23.42% !important;}   
.homespotlight img          {height: 260px;}

/*--------------------------- category pages ---------------------------*/
main.categorypage a         {color: #000;}

/*--------------------------- articles ---------------------------*/
main.articledetail p        {font-size: 1.25rem;}
main.articledetail ul li    {font-size: 1.125rem;}
main.articledetail ul li    {font-size: 1.125rem;}

main.articledetail ul.post-categories   {display: inline-block;}
main.articledetail ul.post-categories, main.homepage ul.post-categories li {list-style-type: none; margin: 0.5rem 0; padding: 0;}
main.articledetail ul.post-categories li a {background-color: #000; color: #FFF !important; display: inline-block; padding: 5px 10px; text-transform: capitalize;}

#articledetailbox   a       {color: #00B1F2; font-weight: bold;}

#relatedarticlesection h4 a {color: #000;}
#relatedarticlesection h4 a:hover {color: #00B1F2;}

/*=========================== Blank Default Page ===========================*/
main.aboutus h1, main.contactus h1, main.defaultpage h1         {border-bottom: 5px solid #00B1F2; padding-right: 8px;}
.h1pagetitle                {border-bottom: 5px solid #00B1F2; padding-right: 8px;}

main.defaultpage ol li a    {display: inline-block; font-size: 1.25rem; line-height: 1; margin-bottom: 1rem;}

/*============================ contact page ============================*/
.hidden-fields-container    {display: none;}
main.contactus p input, main.contactus p textarea {border: 1px solid #333; border-radius: 2px; box-sizing: border-box; font-size: 1.25rem; padding: 7px 10px; width: 100%;}

form img                    {display: block; width: 100px !important;}
input._wpcf7_captcha_challenge_captcha-1, input.wpcf7-captchar,input.wpcf7-submit    {width: 110px !important;}

input.wpcf7-submit
{background-color: #000; box-sizing: border-box; color: #FFF; display: inline-block; font-size: 1rem; padding: 5px 15px; text-transform: capitalize;}

input.wpcf7-submit:hover   {background-color: #00B1F2; transition:background-color .4s;}

/*++++++++++++++++++++++++++++ start footer ++++++++++++++++++++++++++++ */
footer                      {color: #FFF;}
footer ul    	            {list-style-type: none; margin: 0; overflow: hidden; padding-left: 0 !important;}
footer ul li	            {display: block; padding: 0;}
footer ul li a              {color: #FFF; display: inline-block; font-size: 1.25rem; font-weight: bold; margin: 0 0 1rem;}
footer ul li a::after       {background: #FFF; content:''; display:block; height:2px; margin-top:3px; transition:width .4s; width: 0;}
footer ul li a:hover        {color: #00B1F2; text-decoration: none;}
footer ul li a:hover::after {width: 105%;}

footer ul li.current_page_item a   {color: #00B1F2;}

footer h5                   {color: #00B1F2; font-size: 2rem; margin-bottom: 3rem; text-transform: capitalize;}


/*======================================================== start mobile ========================================================*/
@media screen and (min-width: 320px) and (max-width: 767px) {
/*--------------------------- mobile globals ---------------------------*/


/*============================ mobile header > menu navigation ============================*/
header div.container        {align-items: center; position: relative; width: 100% !important; z-index: 8;}

nav#mobile-menu     {display: none; height: auto;}
/*  #site-navmenu   {float: right; padding: 5px 0; width: 10%;}     */

#mobile-menu            {font-size: 1.275rem; overflow: hidden; padding: 0; text-transform: capitalize; width: 100%;}
#mobile-menu ul    	    {list-style-type: none; margin: 0; overflow: hidden; padding: 0; text-align: center;}

#mobile-menu ul li	        {border-bottom: 1px solid #FFF; display: block; padding: 0;}
#mobile-menu ul li:hover	{background-color: #00B1F2;}

#mobile-menu ul li.current_page_item	    {background-color: #00B1F2; border-bottom: 1px solid #FFF; display: block; padding: 0;}
#mobile-menu ul li.current_page_item a      {color: #FFF;}
#mobile-menu ul li:last-of-type	            {border-bottom: 0;}
#mobile-menu ul li a            {color: #FFF; display: block; font-weight: bold; margin: 0; padding: 10px 0; width: 100%;}
#mobile-menu ul li a:hover      {color: #FFF; text-decoration: none;}

#mobile-nav     {display: block; float: right; /* width: 8.41% ; */}

/*++++++++++++++++++++++++++++ start mobile homepage ++++++++++++++++++++++++++++ */
main.defaultpage, main.aboutus, main.homepage, main.categorypage, main.contactus   {padding-top: 1rem;}

main.homepage .hero h1, main.homepage .hero h2, main.homepage .hero h3, main.homepage .hero h4      {font-size: 1.25rem; margin-bottom: 0;}

.homespotlight .grid-6 {margin-bottom: 2rem; min-height: auto; width: 100% !important;}

#homeherosingle img         {height: 245px !important;}
#homeherodouble img         {height: 245px !important;}
#homeherotriple img         {height: 245px!important;}

}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++ start tablet +++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width: 768px) and (max-width: 1023px) {

/*--------------------------- tablet globals ---------------------------*/
.container, .container-width    {min-width: 95% !important; padding-left: 0 !important; padding-right: 0 !important;}


/*============================ tablet header > menu navigation ============================*/
header div.container        {align-items: center; position: relative; width: 100% !important; z-index: 8;}
header img.grid-8           {width: 13.66%;}

nav#mobile-menu     {display: none; height: auto;}
/*  #site-navmenu   {float: right; padding: 5px 0; width: 10%;}     */

#mobile-menu            {font-size: 1.275rem; overflow: hidden; padding: 0; text-transform: capitalize; width: 100%;}
#mobile-menu ul    	    {list-style-type: none; margin: 0; overflow: hidden; padding: 0; text-align: center;}

#mobile-menu ul li	        {border-bottom: 1px solid #FFF; display: block; padding: 0;}
#mobile-menu ul li:hover	{background-color: #00B1F2;}

#mobile-menu ul li.current_page_item	    {background-color: #00B1F2; border-bottom: 1px solid #FFF; display: block; padding: 0;}
#mobile-menu ul li.current_page_item a      {color: #FFF;}
#mobile-menu ul li:last-of-type	            {border-bottom: 0;}
#mobile-menu ul li a            {color: #FFF; display: block; font-weight: bold; margin: 0; padding: 10px 0; width: 100%;}
#mobile-menu ul li a:hover      {color: #FFF; text-decoration: none;}

#mobile-nav     {display: block; float: right; /* width: 8.41% ; */}

/*++++++++++++++++++++++++++++ start tablet homepage ++++++++++++++++++++++++++++ */
main.defaultpage, main.aboutus, main.homepage, main.categorypage, main.contactus   {padding-top: 1rem;}

main.homepage #homeherosingle           {width: 100% !important;}
main.homepage #homeherodouble           {margin: 0; width: 100% !important;}

div.herodoubleeachbox                   {float: left; width: 47.9% !important;}
div.herodoubleeachbox:nth-child(odd)    {margin-left: 0;}
div.herodoubleeachbox:nth-child(even)   {margin-left: 4.2%;}

#homeherotriple                         {margin: 0 0 2rem 0; width: 100%;}

main.homepage .hero h1                  {font-size: 1.5rem;}
main.homepage .hero h2                  {font-size: 1.375rem;}
main.homepage .hero h4                  {font-size: 1.25rem;}

div.herotripleeachbox                   {float: left; margin-left: 4.2%; width: 30.53% !important;}
div.herotripleeachbox:first-of-type     {margin-left: 0;}

main.homepage .grid-6                   {color: #000; width: 47.9% !important;}
main.homepage .grid-6:nth-child(odd)    {margin-left: 0;}
main.homepage .grid-6:nth-child(even)   {margin-left: 4.2%;}

/*--------------------------- category pages ---------------------------*/
main.categorypage .grid-6         {color: #000; width: 47.9% !important;}
main.categorypage .grid-6:nth-child(odd)    {margin-left: 0;}
main.categorypage .grid-6:nth-child(even)   {margin-left: 4.2%;}


/*+++++++++++++++++++++++++++ category pages +++++++++++++++++++++++++++*/
footer h5 {font-size: 1.75rem;}


}
/*===================================== End tablet (min-width: 768px) and (max-width: 1023px)  =====================================*/


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++ start Laptops ++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width: 1024px) and (max-width: 1680px) {

main.homepage   h3, main.categorypage   h3  {font-size: 1.2rem; margin-bottom: 1rem;}
     
     
    
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
   
}


@media screen and (min-width: 1200px) and (max-width: 1439px) {

}