.cb-sidebar-widget .codetipi-15zine-widget .wpforms-widget {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* CRA -- code to design the individual elements of the menu (NOTE: the names below must first be set under Appearance > Menus and then under the CSS field for each menu item) */

li.welcome-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.welcome-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-right: 10px; /* CRA - to make space between the menu items */
}

li.countries-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.countries-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-right: 10px; /* CRA - to make space between the menu items */
}

li.reviews-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.reviews-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-right: 10px; /* CRA - to make space between the menu items */
}

li.travel-tips-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.travel-tips-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-right: 10px; /* CRA - to make space between the menu items */
}

li.meet-charles-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.meet-charles-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-left: 130px; /* CRA - to make space between the menu items */
  margin-right: 10px;
}

li.contact-2pp-menu:hover a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #20750C !important; /* CRA - background color on stable (not clicked or hovered) */
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  font-size: 18px; /* CRA - font size, stating the obvious */
}

li.contact-2pp-menu a { /* CRA -- ignore the warning about the over-qualification -- if this is deleted then it messes with the menu and it DOES NOT work as per the code below */
  background: #0B0B8A !important;
  border-radius: 10px; /* CRA - makes the nice rounded corners, the higher the value the more rounded */
  color: #FFFFFF; /* CRA - text color over the background */
  transition: 0s;
  font-size: 18px; /* CRA - font size, stating the obvious */
  margin-right: 10px; /* CRA - to make space between the menu items */
}


/*-----------------------------------------------------------------------------------------------*/

/* CRA - formatting for the Global Sidebar */

.cb-sidebar-widget-title .cb-widget-title .widget-title .title {
    font-size: 18px;
    text-align: center;
    border-bottom: 2px solid #0B0B8A;
    margin-bottom: 5px;
    margin-top: 5px;
}

.cb-body-light .widget-title {
    font-size: 18px;
    text-align: center;
    border-bottom: 2px solid #0B0B8A;
}

.cb-sidebar {
    margin-bottom: 10px;
}

.sidebar {
    width: 100%;
    float: center;
}


/* CRA - formatting for the Search Bar on the Global Sidebar */
.is-search-input a {
    font-family: montserrat;
    font-size: 18px;
    border-radius: 10px;
}

/* ------------------------------------------------------------------------------------------- */

/* CRA - CSS code to format the Heading and the Post Title for 'Other Posts' at the bottom of each of the posts */

/* CRA - CSS code to format the Heading for 'Other Posts' at the bottom of each of the posts */
#jp-relatedposts h3.jp-relatedposts-headline em {
    font-size: 18px;
    font-style: normal;
    font-family: montserrat;
    color: #0B0B8A;
    font-weight: 900;
}

/* CRA - CSS code to format the Post Title for the left post ('Post0 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post0.jp-relatedposts-post-thumbs > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
}

/* CRA - HOVER STATUS -- CSS code to format the Post Title for the left post ('Post1 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post0.jp-relatedposts-post-thumbs:hover > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    text-decoration: none;
}

/* CRA - CSS code to format the Post Title for the middle post ('Post1 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post1.jp-relatedposts-post-thumbs > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
}

/* CRA - HOVER STATUS -- CSS code to format the Post Title for the middle post ('Post1 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post1.jp-relatedposts-post-thumbs:hover > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    text-decoration: none;
}

/* CRA - CSS code to format the Post Title for the right post ('Post2 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post2.jp-relatedposts-post-thumbs > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
}

/* CRA - HOVER STATUS -- CSS code to format the Post Title for the right post ('Post2 in the code below') at the bottom of each of the posts */
#jp-relatedposts > div > div.jp-relatedposts-post.jp-relatedposts-post2.jp-relatedposts-post-thumbs:hover > h4 > a {
    display: block;
    font-family: montserrat;
    color: #0B0B8A;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    text-decoration: none;
}

/*-----------------------------------------------------------------------------------------------*/

/* CRA -- to justify the text across all pages, posts, etc. (I added this CSS code into this box when the Justify Plug-In stopped working and caused all my text to left align, which I hate) */

/* REMOVED BY CRA SINCE THE JUSTIFY FUNCTION STARTED WORKING AGAIN AND THE CODE THAT WAS DELETED WAS MESSING WITH THE ALIGNMENT OF THE ARTICLE TITLES WHEN VIEWED AS CATEGORIES */


/*-----------------------------------------------------------------------------------------------*/

/* CRA -- VARIOUS AD-HOC FORMATTING ADJUSTMENTS */

/* CRA -- CHANGE TO DARK BLUE THE COLOR OF TITLES ON THE CATEGORY SUMMARY PAGES */

.cb-body-light .title a {
    color: #0B0B8A;
}

.block-wrap a {
    font-family: montserrat;
}



/* Example: targeting the blog title over the featured image */
.featured-title, .home .site-title, .hero-title {
  color: #FFFFFF
}




/* CRA -- CSS CODE RELATED TO THE BACKGROUND / BORDER COLORS ACROSS PAGES, POSTS, CATEGORIES, TAGS */

/* CRA -- CHANGE THE BORDER COLOR ACROSS ALL PAGES AND POSTS */
body {
    background-color: #B7EEF5;
    padding-top: 0%;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 3%;
    margin: 100;
    /*border-style: solid;*/
    /*border-color: #0B0B8A;*/
    /* - CRA - you can also use border-right-color etc... as requred */
}




/* CRA -- CODE TO REMOVE THE STANDARD 15ZINE FOOTER SO THAT IT CAN BE REPLACED WITH THE ONE CREATED WITH ELEMENTOR */
.site-footer ul {
    display: none;
    }


/* CRA -- CHANGE THE WIDTH OF THE FOOTERS TO ALIGN IT WITH THE WIDTH OF THE CONTENT*/
.wrap, .tipi-row {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1320px;
}


/* CRA -- TO CHANGE THE SPACING IN THE BOTTOM WIDGET, I.E. THE GAP BETWEEN THE LEFT MARGIN AND THE FIRST BLOCK OF TEXT 
@media only screen and (min-width: 768px)
{.site-footer #cb-widgets {
    padding: 0px;
    margin: 40;
    */


/* CRA -- TO CHANGE THE SPACING IN THE BOTTOM FOOTER, I.E. THE GAPS BETWEEN THE TOP AND THE TOP TEXT AND THE BOTTOM AND THE BOTTOM TEXT */
@media only screen and (min-width: 768px)
{.site-footer .cb-footer-lower {
    padding: 0px 0 0px;
    font-size: 12px;
    letter-spacing: 4px;
    margin: 0px;
}


/* CRA -- TO REDUCE TO ZERO THE PADDING UNDER THE COPYRIGHT IN THE FOOTER */
}@media only screen and (min-width: 768px)
{.site-footer #cb-widgets {
    padding: 0px 0;
}

/* CRA -- TO CHANGE THE TEXT COLOR OF THE ITEMS IN THE FOOTER FROM BLACK TO DARK BLUE */
.cb-footer-light .site-footer a {
    color: #0B0B8A;
}





/*-----------------------------------------------------------------------------------------------*/

/* CRA -- CSS CODE RELATED TO THE MAIN MENU, I.E. MENU ITEMS AT THE TOP OF THE SITE*/



/* CRA -- to change the background color behind the main menu, i.e. the box that goes across the screen from edge to edge, at the top */
.site-skin-1, .site-skin-11 {
/* CRA -- background of the box that goes across the screen from edge to edge, at the top (Currently Set to Light Blue (#B7EEF5)*/    
    background: #B7EEF5;
  /* CRA -- not sure what the next section of the code does but set to Bright Green (#2AEA1A) just in case it pops out somewhere*/    
    color: #2AEA1A;
}





/*-----------------------------------------------------------------------------------------------*/

/* CRA -- CSS CODE RELATED TO THE PAGES AND POSTS*/

/* CRA -- to change the font color of the main headings on the pages and posts */
.cb-body-light h1, .cb-body-light h2, .cb-body-light h3, .cb-body-light h4, .cb-body-light h5 {
    font-size: 32px;
    color: #0B0B8A;
}



/* CRA -- to change the font color of the second line, after the main headings, on the pages and posts */
.block-title-wrap p {
    color: #0B0B8A;
    margin: 5px 0 0;
    letter-spacing: 1px;
}


/* CRA -- to change the color of the wide line alongside the various category and tag summary pages */
.cb-body-light .block-title-wrap .title:after {
    background: #0B0B8A;
}



/* CRA -- to change the background color of the reading time and the number of likes buttons alongside the category list of the posts */
.cb-body-light .byline-shaded .byline-part:not(.cats) {
    color: #FFFFFF;
    background-color: #0B0B8A;
}




/* CRA -- to change the color of the URL links included in posts BEFORE being clicked (the color #0000EE is regarded as the BEST for hyperlink colors)*/
.single-post .entry-content a {
color: #0000EE;
}


/* CRA -- to change the color of the URL links included in posts AFTER being clicked*/
.single-post .entry-content a:visited {
color: #631AEA;
}


/* CRA -- to change the formatting of the tags at the bottom of each post*/
.cb-body-light .widget_tag_cloud a, .cb-body-light .tags-title, .cb-body-light .cb-tags a, .cb-body-light .bbp-topic-tags a {
    font-size: 10pt;
    font-weight: 900;
    color: #0B0B8A;
    background:#87E9F6;
    border: 2px solid #0B0B8A;
    border-radius: 10px;
    padding-top: 8pt;
    padding-bottom: 8pt;
    padding-left:12pt;
    padding-right:12pt;
}


/* - CRA -- set the formatting of the tag box to green background, white text, round corners on hover */
.cb-body-light .widget_tag_cloud:hover a, .cb-body-light .tags-title:hover, .cb-body-light .cb-tags:hover a, .cb-body-light .bbp-topic-tags:hover a {
    font-size: 10pt;
    font-weight: 900;
    color: #FFFFFF;
    background:#20750C;
    border: 2px solid #20750C;
    border-radius: 10px;
    padding-top: 8pt;
    padding-bottom: 8pt;
    padding-left:12pt;
    padding-right:12pt;
}






/* CRA -- to change the formatting of the category blocks overlying the sliders for each post (NOTE: the 'color' option below does not appear to work??)*/
.cats .cat-with-bg {
    font-size: 1.2em;
    border-radius: 2px;
    padding: 4px 4px;
    text-decoration:none;
    color: #0B0B8A;
}

.cats .cat-with-bg-dark {
    background: #0B0B8A;
    color: #0B0B8A;
}




/*-----------------------------------------------------------------------------------------------*/

/* CRA -- CSS CODE RELATED TO THE MAIN PAGE*/

/* CRA -- to change the font color and font size of the post titles, overlying the featured image, when the various categories are viewed, specifically on the main page of the blog */
.block-wrap .title a {
    color: #FFFFFF;
    font-weight: 900;
}

/* CRA -- To change the font color of the second line on the main page, i.e. under the headings */
.cb-body-light .block-title-wrap .block-subtitle {
    color: #0B0B8A;
}



}@media only screen and (min-width: 768px)
{.sidebar {
    margin-top: 40px;
    background: #EA1FEA;
    margin-bottom: 40px;
}


/*-----------------------------------------------------------------------------------------------*/

/* CRA -- CSS CODE RELATED TO THE OTHER MATTERS NOT COVERED ABOVE*/

/* CRA -- to change the hover color for hyperlinks across the site, except on the main page and excluding the items noted below */
a:not(.cb-body-light):hover {
  background-color: #B7EEF5;
}

/* CRA -- NOTE -- the CSS code for Form 553 was moved to the CSS code for that specific page, i.e. the Contact 2PP page */

/* CRA -- to change the formatting of the SPECIFIC FORM, i.e. the SUBSCRIPTION REQUEST FORM (WPForm Number 943) */

/* CRA – CSS coding for the subscription form in the footer */

#wpforms-943-field_1 /* CRA - The 'Name' field */
{background-color: #B7EEF5;
color: #0B0B8A;
font-weight: 600;
font-family: Montserrat;
width: 250px;
/*padding-bottom: 10px; (CRA - use this to increase the padding WITHIN the INPUT BOX)*/
}

#wpforms-943-field_2 /* CRA - The 'E-Mail Address' field */
{background-color: #B7EEF5;
color: #0B0B8A;
font-weight: 600;
font-family: Montserrat;
width: 380px;
/*padding-bottom: 10px; (CRA - use this to increase the padding WITHIN the INPUT BOX)*/
}

#wpforms-submit-943.wpforms-submit
    {background-color: #87E9F6;
    font-weight: 600;
    color: #0B0B8A;
    padding: 0px 15px;
    text-align: left;
    font-family: Montserrat;
    width: 380px;
    height: 38px;
}

#wpforms-form-943 button[type=submit]:hover
    {background-color: #20750C; /* Background Color on Hover = CRA Standard Blue for Hover */
    color: #FFFFFF;
    border: 1px solid #20750C;
    font-weight: 600;
    font-family: Montserrat;
    width: 380px;
    height: 38px;
}

/* CRA – CSS coding for the subscription form in the sidebar */

#wpforms-2348-field_1 /* CRA - The 'Name' field */
{   
    background-color: #B7EEF5;
    border: 1px solid #0B0B8A;
    color: #0B0B8A;
    font-weight: 600;
    font-family: Montserrat;
    width: 250px;
    padding-top: 1px;
/*padding-bottom: 10px; (CRA - use this to increase the padding WITHIN the INPUT BOX)*/
}

#wpforms-2348-field_2 /* CRA - The 'E-Mail Address' field */
{
    background-color: #B7EEF5;
    border: 1px solid #0B0B8A;
    color: #0B0B8A;
    font-weight: 600;
    font-family: Montserrat;
    width: 380px;
/*padding-bottom: 10px; (CRA - use this to increase the padding WITHIN the INPUT BOX)*/
}

#wpforms-submit-2348.wpforms-submit
{
    background-color: #87E9F6;
    border: 1px solid #0B0B8A;
    font-weight: 600;
    color: #0B0B8A;
    padding: 0px 15px;
    text-align: left;
    font-family: Montserrat;
    width: 300px;
    height: 38px;
}

#wpforms-form-2348 button[type=submit]:hover
    {background-color: #20750C; /* Background Color on Hover = CRA Standard Blue for Hover */
    color: #FFFFFF;
    border: 1px solid #20750C;
    border-radius: 10px;
    font-weight: 600;
    font-family: Montserrat;
    width: 300px;
    height: 38px;
}


}




p {
  text-align: justify;
}

/*orionk changes ... fix menu background color */
@media only screen and (min-width: 768px) {
    body .mm-skin-2 .mm-art .sub-menu {
        background: #fff;
    }
}


/* orionk changes ... Color of read-count-heart */
.byline-shaded .likes-count a *{
	color:#fff; 
}

/* orionk changes ... Color of title, excerpt , sidebar */
.cb-sidebar-widget .block-wrap .title a,
body.category .block-wrap .title a,
body.category .block-wrap .excerpt{
	color:#0b0b8a	
}


/* orionk changes ... fix menu sometimes showing blue */
ul#menu-main-menu li ul.sub-menu li a { 
  background-color : rgb(32,117,12) !important;
}
/* orionk changes ... fix font on RELATED POSTS */
body #jp-relatedposts h3.jp-relatedposts-headline em{
	font-family: 'montserrat'
}

/* orionk changes ... fix post tags changing colors both on mouse hover */
@media only screen and (min-width: 768px) {
	
	html .cb-body-light .cb-tags:hover a{
		background-color:#87E9F6; 
		color:#0B0B8A ; 
	}
	
  html  .cb-body-light .cb-tags a:hover {
        font-size: 10pt;
        font-weight: 900;
        color: #FFFFFF;
        background: #20750C;
        border: 2px solid #20750C;
        border-radius: 10px;
        padding-top: 8pt;
        padding-bottom: 8pt;
        padding-left: 12pt;
        padding-right: 12pt;
    }
}