/*--------------- Background Colour */
#wrapper {
    background: #ffffff;
}

/*--------------- Font Family */
@import url("https://use.typekit.net/pjl2hgc.css")

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:italic;font-weight:900;font-stretch:normal;
}

@font-face {
font-family:"merriweather";
src:url("https://use.typekit.net/pjl2hgc.css") format("woff2"),url("https://use.typekit.net/pjl2hgc.css") format("woff"),url("https://use.typekit.net/pjl2hgc.css") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

.tk-merriweather { font-family: "merriweather",serif; }

/*--------------- Menu Footer Font Family and Size */
#header {
  font-family: "merriweather", serif;
  font-weight: 900;
  font-weight: bold;
  font-style: normal;
  color: #000000;
  font-size: 20px;
}

#top-menu  {
  font-size: 20px;
 }

 #header .header-top a[data-depth="0"] {
     color: #000000;
     text-transform: uppercase;
     font-size: 20px;
     font-weight: bold;
 }

/* Link hover menu Colour */
 #header .header-top a:hover[data-depth="0"] {
     color: #328ede;
 }

 .top-menu a[data-depth="0"] {
     font-family: "merriweather", serif;
     font-weight: 900;
     font-style: normal;
       font-weight: bold;
 }

/*--------------- Footer Font Family and Size */
.footer-container .h3,.footer-container .h4 {
  font-family: "merriweather", serif;
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-size: 20px;
}

p.h3.myaccount-title.hidden-sm-down {
  font-size: 20px;
}

.blockcms-title, .myaccount-title, .myaccount-title a, .block-contact-title {
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
}

/*--------------- Breadcrumb Font Family and Size */
.breadcrumb {
  color: #000000!important;
  font-family: "merriweather", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}

/*--------------- Button Colour #24b9d7 */
.btn-primary {
    color: #fff;
    background-color: #000000;
    border-color: rgba(0,0,0,0);
}

.btn-primary:active, .btn-primary.active, .open>.btn-primary.dropdown-toggle {
    background-color: #328ede;
}

.btn-primary:hover {
    background-color: #328ede;
}

.btn.btn-default {
    background-color: #000000;
}

/*--------------- Link Colour and Hover - Body */
a:hover {
    color: #328ede;
    text-decoration: none;
}

a {
    color: #000000;
    text-decoration: none;
}

/*--------------- Link Colour Hover - footer */
.footer-container li a:hover {
    color: #328ede;
}

/*--------------- Remove Blog Button for "View all categories" & "View all latest posts"*/
.blog_view_all_button{
         display:none
}

/*--------------- Remove bottom margin from block "latest posts" on Blog home page */
.ybc_blog_sidebar .ybc_blog_content_block_item {
    margin-bottom: 20px;
}

/*--------------- Colour font change on contact form */
.contact-rich {
    color: #000000;
}

/*--------------- Remove Page header */
.page-header{
         display:none
}

/*--------------- Subscription newsletter */
.block_newsletter #block-newsletter-label {
    font-weight: bold;
}

/*--------------- image on front page of the post */
.ybc_blog_img_wrapper img, .blog-product-list img {
  height: auto;
}

/*--------------- Remove top margin from read more on Blog home page */
.page-content.page-cms ul, dl, ol, p, ul {
    margin-bottom: 20px;
}

/*-------------Reduce spacing above Newsletter block */
#footer {
	padding-top: 0px;
}

.block, .ybc_block_latest, .ybc_blog_ltr_mode, .page_home, .ybc_block_default {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/*-------------Modifying font size and line-height for the newsletter header in custom.css */
.block_newsletter #block-newsletter-label {
    font-size: 0.95rem;
    line-height: -1.75rem;
}

/**************** Custom HTML block CSS for Block 4 */

/* Div customisation */
.wrper {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    }
/* Image customisation */
#badge > img {
    width: 70%;
}

/* Text customisation */
.badge_text{
    line-height: 20%;
    padding-top: 10px
}

.type_cert {
  font-family: "merriweather", serif;
  font-weight: 900;
  font-weight: bold;
  color: #000000;
  font-size: 15px;
}

.cert_name{
    font-weight: bold;
    color: #000000;
    font-size: 0.7rem;
}

.year_valid {
    font-style: italic;
    color: #000000;
    font-size: 0.7rem;
}

/* Button color customisation */
.completed {
    color: #ffffff;
    background-color: darkgreen;
    font-weight: bold;
    border-color: darkgreen;
}

.completing {
    color: #000000;
    background-color: orange;
    font-weight: bold;
    border-color: orange;
}

.m365 {
    background-color: #328ede;
    font-weight: bold;
    border-color: #328ede;
}

.itsec {
    color: #ffffff;
    background-color: #000000;
    font-weight: bold;
    border-color: #000000;
}

.itfram {
    color: #ffffff;
    background-color: grey;
    font-weight: bold;
    border-color: grey;
}

.cserv {
    color: #ffffff;
    background-color: purple;
    font-weight: bold;
    border-color: purple;
}

.codes {
    color: #ffffff;
    background-color: #7F82BB;
    font-weight: bold;
    border-color: #7F82BB;
}

/**************** Custom HTML block CSS for Block 6 and 7 */
.articont-margin {
   margin-left: 100px;
}

.dte {
    font-weight: bold;
    color: red;
    display: none;
}

.sbjct {
    text-decoration: underline;
    color: blue;
    display: none;
}

.auth {
    font-weight: bold;
    color:black;
    display: none;
}

.articont {
   font-style: italic;
   color:black;
}

body .articont {
  font-size: 0.6rem;
  line-height: 1rem;
}
/**************** Custom HTML block CSS for other screen*/
/* Medium devices (576px and up) */
@media screen and (min-width: 575px) {

/*Custom HTML block CSS for Block 4*/
/* Div customisation */
.wrper {
    margin-left: 50px;
}

/* Image customisation */
#badge > img {
      width: 100%;
}

/* Text customisation */
.badge_text{
    line-height: 40%;
}

.type_cert {
  font-size: 26px;
}

.cert_name{
    font-weight: bold;
    color: #000000;
    font-size: 1.1rem;
}

.year_valid {
    font-style: italic;
    color: #000000;
    font-size: 0.9rem;
}

/*Custom HTML block CSS for Block 6 and 7*/
.articont-margin {
    margin-left: 160px;
}

body .articont {
  font-size: 0.8rem;
  line-height: 1rem;
}

}

/**************** Custom HTML block CSS for other screen*/
/* Medium devices (768px and up) */
@media screen and (min-width: 768px) {
/*Custom HTML block CSS for Block 6 and 7*/
.dte {
    font-weight: bold;
    color: red;
    display: revert;
}

.sbjct {
    text-decoration: underline;
    color: blue;
    display: revert;
    margin-left: 20px;
}

.auth {
    font-weight: bold;
    color:black;
    display: revert;
}

.articont {
   font-style: italic;
   color:black;
    display: revert;
}

.subj-margin {
    margin-left: 77px;
}

.auth-margin {
    margin-left: 65px;
}

.articont-margin {
    margin-left: 160px;
}

body .articont {
  font-size: 0.8rem;
  line-height: 1rem;
}

}

/**************** Custom HTML block CSS for other screen*/
/* Medium devices (992px and up) */
@media screen and (min-width: 992px) {

/*Custom HTML block CSS for Block 4*/
/* Div customisation */
.wrper {
  margin-left: 200px;
}

/*Custom HTML block CSS for Block 6 and 7*/
.dte {
    font-weight: bold;
    color: red;
    display: revert;
}

.sbjct {
    text-decoration: underline;
    color: blue;
    display: revert;
}

.auth {
    font-weight: bold;
    color:black;
    display: revert;
}

.articont {
   font-style: italic;
   color:black;
    display: revert;
}

body .articont {
  font-size: 0.8rem;
  line-height: 1rem;
}

}
/**************** Custom HTML block CSS for other screen*/
/* Medium devices (1200px and up) */
@media screen and (min-width: 1200px) {

/*Custom HTML block CSS for Block 6 and 7*/
.dte {
    font-weight: bold;
    color: red;
    display: revert;
}

.sbjct {
    text-decoration: underline;
    color: blue;
    display: revert;
}

.auth {
    font-weight: bold;
    color:black;
    display: revert;
}

.articont {
   font-style: italic;
   color:black;
    display: revert;
}

body .articont {
  font-size: 1rem;
  line-height: 1rem;
}


}

/**************** Custom HTML block CSS for other screen*/
/* Medium devices (1400px and up) */
@media screen and (min-width: 1400px) {

/*Custom HTML block CSS for Block 6 and 7*/
.dte {
    font-weight: bold;
    color: red;
    display: revert;
}

.sbjct {
    text-decoration: underline;
    color: blue;
    display: revert;
}

.auth {
    font-weight: bold;
    color:black;
    display: revert;
}

.articont {
   font-style: italic;
   color:black;
    display: revert;
}

body .articont {
  font-size: 1rem;
  line-height: 1rem;
}


}