/** 
 Theme Name:   Mango Language
 Theme URI:    
 Description:  
 Author:       Ripplepop
 Author URI:   
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /** == Add your own styles below this line ==
--------------------------------------------**/




ul {
  padding-bottom: 0 !important;
}



/** -------------- Hubspot Form ---------------- **/

.hbspt-form fieldset span {
  font-size: 14px;
}

.hbspt-form input[type=date]:focus,
.hbspt-form input[type=email]:focus,
.hbspt-form input[type=number]:focus,
.hbspt-form input[type=password]:focus,
.hbspt-form input[type=search]:focus,
.hbspt-form input[type=tel]:focus,
.hbspt-form input[type=text]:focus,
.hbspt-form input[type=url]:focus,
.hbspt-form select:focus,
.hbspt-form textarea:focus {
  box-shadow: 0px 5px 15px -7px rgb(0 0 0 / 10%);

}

.hbspt-form input[type=date],
.hbspt-form input[type=email],
.hbspt-form input[type=number],
.hbspt-form input[type=password],
.hbspt-form input[type=search],
.hbspt-form input[type=tel],
.hbspt-form input[type=text],
.hbspt-form input[type=url],
.hbspt-form select,
.hbspt-form textarea {
  border-color: #fff !important;
}

.hbspt-form .hs-input {
  margin-bottom: 20px;
  margin-top: 5px;
}

.hbspt-form fieldset {
  max-width: unset !important;
}

.hbspt-form .hs-button {
  background-color: #1d98d5 !important;
  border-radius: 5px !important;
}

.hbspt-form .hs-button:hover {
  background-color: #215387 !important;
  border-color: #215387 !important;
}

.hbspt-form input,
.hbspt-form select,
.hbspt-form optgroup,
.hbspt-form textarea {
  font-size: 16px;
}


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


/**===============================================**/
/**COLOR VARIABLES on TEXT ONLY [SENT BY ERIKA (2/8/2023)]**/
/**===============================================**/

.grammar-orange-1{ color:#df7523; }

.grammar-yellow-1{ color:#ffc845; }

.grammar-magenta-1, .grammar-magenta-2, .grammar-magenta-3{ color:#c41a7d; }

.grammar-purple-1{ color:#8712b6; }

.grammar-red-1, .grammar-red-2{color:#f93923; }

.grammar-blue-1{ color:#00a9e0; }
.grammar-darkblue-1{color:#005e82;}

.grammar-green-1, .grammar-green-2, .grammar-green-3 {color:#00b140;}

.grammar-lightgray-1{color:#d9d9d9;}

.grammar-translation-1{color:#666666;}

.grammar-grammarbox-1{color:#005E82;}



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

/**============================================================================**/
/**RESOURCE ARTICLES ARCHIVE **/
/**============================================================================**/


#hs-eu-cookie-confirmation {
	display: none;
}

#category-filters .jet-list-tree__children {
	display: none;
	padding-bottom: 10px;
}

#category-filters .jet-list-tree > .jet-list-tree__parent {
	display: none !important;
}

.filter-accordion .jet-list-tree__parent {
	display: none !important;
}

.filter-accordion .jet-list-tree__children {
	padding-left: 0 !important;
}

.accordion_btn_al.active + .jet-list-tree__children {
/* 	display: block !important; */
} 

.accordion_btn_al {
	color: #fff;
	cursor: pointer;
	display: block;
	padding-bottom: 5px;
	padding-top: 5px;
}

.accordion_btn_al::before {
	background-color: #fff;
	border-radius: 3px;
	color: #2b6cb0;
	content: "\f067";
	height: 18px;
	width: 18px;
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size: 10px;
	padding: 4px;
	margin-right: 10px;
}

.accordion_btn_al.active::before {
	content: "\f068";
}

/**============================================================================**/
/**RESOURCE ARTICLES SINGLE POST AREA**/
/**============================================================================**/
#resource-article-single-post h1 {
  font-size: 50px;
  line-height: 57px;
}

#resource-article-single-post h2 {
  font-size: 40px;
  line-height: 48px;
}

#resource-article-single-post h3 {
  font-size: 35px;
  line-height: 39px;
}

#resource-article-single-post h4 {
  font-size: 30px;
  line-height: 32px;
}

#resource-article-single-post h5 {
  font-size: 28px;
  line-height: 29px;
}

#resource-article-single-post h6 {
  font-size: 25px;
  line-height: 29px;
}

#resource-article-single-post #ras-terms a.elementor-post-info__terms-list-item {
  word-break: keep-all;
  display: inline-block;
}

#resource-article-single-post ul li,
#resource-article-single-post ol li {
  line-height: 33px !important;
}
/*======================================================*/
/*Meta Tags - Article Type category area */
/*======================================================*/
span.elementor-icon-list-text span.elementor-post-info__terms-list {
  color: #fff !important;
}



/**===============================================**/
/** Indented listing left **/
/**===============================================**/
.listwrap span.elementor-icon-list-icon {
    position: absolute;
    top: 13px;
    left: -10px;
}

.listwrapnumber {
  counter-reset: ul;
}

.listwrapnumber li::before {
  counter-increment: ul;
  content: counter(ul) ". ";
  position: absolute;
  top: -3px;
  left: -10px;
}
.listwrapbookmark span.elementor-icon-list-icon{
	   position: absolute;
    top: 7px;
    left: -10px;
}


/**===============================================**/
/**Number list Paragraph**/
/**===============================================**/

span.numtxt {
    position: absolute;
    margin-left: -30px;
}

.single-content .wp-block-button__link {
    text-decoration: none;
}


/**===============================================**/
/** Listing with Diamond Icon CSS **/
/**===============================================**/
strong.blk_diamond_normal::before {
    content: "\2756";
    margin-right: 10px;
    font-weight: 100;
}

strong.blk_diamond_bold::before {
    content: "\2756";
    margin-right: 10px;
    font-weight: 600;
}

.blk_diamond_normal::before {
    content: "\2756";
    margin-right: 10px;
    font-weight: 100;
	list-style:none;
}

.blk_diamond_bold::before {
    content: "\2756";
    margin-right: 10px;
    font-weight: 600;
	list-style:none;
}

ul li.blk_diamond_normal,
ul li.blk_diamond_bold{
    list-style: none;
}


a.hyperlink-text:hover {
    color: #0056b3 !important;
}


/**===============================================**/
/**Hyperlinks with Light Blue color with underline (Dark Blue on hover)**/
/**===============================================**/

.hyperlink-text h1 a,
.hyperlink-text h2 a,
.hyperlink-text h3 a,
.hyperlink-text h4 a,
.hyperlink-text h5 a,
.hyperlink-text h6 a,
a.hyperlink-text {
  color: #1d98d5 !important;
  text-decoration: underline !important;
  font-weight: inherit;
}

.hyperlink-text h1 a:hover,
.hyperlink-text h2 a:hover,
.hyperlink-text h3 a:hover,
.hyperlink-text h4 a:hover,
.hyperlink-text h5 a:hover,
.hyperlink-text h6 a:hover,
a.hyperlink-text:hover {
  color: #0056b3 !important;
}

/**===============================================**/
/**Hyperlinks with Light Blue color WITHOUT underline (Dark Blue on hover)**/
/**===============================================**/

.hyperlink-text2 h1 a,
.hyperlink-text2 h2 a,
.hyperlink-text2 h3 a,
.hyperlink-text2 h4 a,
.hyperlink-text2 h5 a,
.hyperlink-text2 h6 a,
a.hyperlink-text {
  color: #1d98d5 !important;
  font-weight: inherit;
}

.hyperlink-text2 h1 a:hover,
.hyperlink-text2 h2 a:hover,
.hyperlink-text2 h3 a:hover,
.hyperlink-text2 h4 a:hover,
.hyperlink-text2 h5 a:hover,
.hyperlink-text2 h6 a:hover,
a.hyperlink-text2:hover {
  color: #0056b3 !important;
}


/**===============================================**/
/**Hyperlinks with Light Blue color WITHOUT underline 
(Dark Blue on hover with Underline)**/
/**===============================================**/

.hyperlink-text3 h1 a,
.hyperlink-text3 h2 a,
.hyperlink-text3 h3 a,
.hyperlink-text3 h4 a,
.hyperlink-text3 h5 a,
.hyperlink-text3 h6 a,
a.hyperlink-text3 {
  color: #1d98d5 !important;
  font-weight: inherit;
}

.hyperlink-text3 h1 a:hover,
.hyperlink-text3 h2 a:hover,
.hyperlink-text3 h3 a:hover,
.hyperlink-text3 h4 a:hover,
.hyperlink-text3 h5 a:hover,
.hyperlink-text3 h6 a:hover,
a.hyperlink-text3:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

/**===============================================**/
/**Hyperlinks with Light Green color**/
/**===============================================**/

.hyperlink-text-green h1 a,
.hyperlink-text-green h2 a,
.hyperlink-text-green h3 a,
.hyperlink-text-green h4 a,
.hyperlink-text-green h5 a,
.hyperlink-text-green h6 a,
a.hyperlink-text-green {
  color: #47AA42 !important;
  text-decoration: underline !important;
  font-weight: inherit;
}

.hyperlink-text-green h1 a:hover,
.hyperlink-text-green h2 a:hover,
.hyperlink-text-green h3 a:hover,
.hyperlink-text-green h4 a:hover,
.hyperlink-text-green h5 a:hover,
.hyperlink-text-green h6 a:hover,
a.hyperlink-text-green:hover {
  color: #47AA42 !important;

}


/**===============================================**/
/**Hyperlinks with LIME GREEN color**/
/**===============================================**/
.hyperlink-text4 h1 a,
.hyperlink-text4 h2 a,
.hyperlink-text4 h3 a,
.hyperlink-text4 h4 a,
.hyperlink-text4 h5 a,
.hyperlink-text4 h6 a,
a.hyperlink-text4{
  color: #80b5a8 !important;
  font-weight: inherit;
}
.hyperlink-text4 h1 a:hover,
.hyperlink-text4 h2 a:hover,
.hyperlink-text4 h3 a:hover,
.hyperlink-text4 h4 a:hover,
.hyperlink-text4 h5 a:hover,
.hyperlink-text4 h6 a:hover,
a.hyperlink-text4:hover{
  color: #80b5a8 !important;
  text-decoration: underline !important;
}
/**===============================================**/
/**Hyperlinks with LIME GREEN color** Hover blue underline/
/**===============================================**/
.hyperlink-text5 h1 a,
.hyperlink-text5 h2 a,
.hyperlink-text5 h3 a,
.hyperlink-text5 h4 a,
.hyperlink-text5 h5 a,
.hyperlink-text5 h6 a,
a.hyperlink-text5{
  color: #80b5a8 !important;
  font-weight: inherit;
	}
.hyperlink-text5 h1 a:hover,
.hyperlink-text5 h2 a:hover,
.hyperlink-text5 h3 a:hover,
.hyperlink-text5 h4 a:hover,
.hyperlink-text5 h5 a:hover,
.hyperlink-text5 h6 a:hover,
a.hyperlink-text5:hover{
    text-decoration: underline !important;
	text-decoration-color: #0056b3 !important;
	

}

/**===============================================**/
/**Hyperlinks with baby blue color** Hover blue underline/
/**===============================================**/

.hyperlink-text6 h1 a,
.hyperlink-text6 h2 a,
.hyperlink-text6 h3 a,
.hyperlink-text6 h4 a,
.hyperlink-text6 h5 a,
.hyperlink-text6 h6 a,
a.hyperlink-text6{
  color: #1d98d5 !important;
  font-weight: inherit;
	}

.hyperlink-text6 h1 a:hover,
.hyperlink-text6 h2 a:hover,
.hyperlink-text6 h3 a:hover,
.hyperlink-text6 h4 a:hover,
.hyperlink-text6 h5 a:hover,
.hyperlink-text6 h6 a:hover,
a.hyperlink-text6:hover{
    color: #0056b3 !important;
  

}
/**===============================================**/
/**Hyperlinks with baby blue color same color for underline** 
/**===============================================**/
.hyperlink-text7 h1 a,
.hyperlink-text7 h2 a,
.hyperlink-text7 h3 a,
.hyperlink-text7 h4 a,
.hyperlink-text7 h5 a,
.hyperlink-text7 h6 a,
a.hyperlink-text7{
  color: #00a9e0 !important;
  font-weight: inherit;
	}

.hyperlink-text7 h1 a:hover,
.hyperlink-text7 h2 a:hover,
.hyperlink-text7 h3 a:hover,
.hyperlink-text7 h4 a:hover,
.hyperlink-text7 h5 a:hover,
.hyperlink-text7 h6 a:hover,
a.hyperlink-text7:hover{
    color: #00a9e0 !important;
	 text-decoration: underline !important;
  

}


/**===============================================**/
/** Table Background RED HEADER SECTION colors CSS **/
/**===============================================**/

.header-red {
  background: #f93923 !important;
}


/**===============================================**/
/** Table Background GREEN HEADER SECTION colors CSS **/
/**===============================================**/

.header-green {
  background: #D9EAD3 !important;
}

/**===============================================**/
/** Table Background BLUE HEADER SECTION colors CSS **/
/**===============================================**/

.header-blue {
  background: #cfe2f3 !important;
}

/**===============================================**/
/** Table Background ORANGE HEADER SECTION colors CSS **/
/**===============================================**/

.header-orange {
  background: #df7523 !important;
}

/**===============================================**/
/** Table Background PURPLE HEADER SECTION colors CSS **/
/**===============================================**/

.header-purple {
  background: #c41a7d !important;
}

/**===============================================**/
/** Table Background YELLOW HEADER SECTION colors CSS **/
/**===============================================**/

.header-yellow {
  background: #FFF2CC !important;
}


/**===============================================**/
/** TABLE CELL: Background ORANGE colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-orange,
td.pp-table-cell.bg-orange {
  background: #FCE5CD !important;
}

/**===============================================**/
/** TABLE CELL:  Background PURPLE colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-purple,
td.pp-table-cell.bg-purple {
  background: #c41a7d !important;
}

/**===============================================**/
/** TABLE CELL:  Background RED colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-red,
td.pp-table-cell.bg-red {
  background: #f93923 !important;
}

/**===============================================**/
/** TABLE CELL:  Background Dark PURPLE colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-darkpurple,
td.pp-table-cell.bg-darkpurple {
  background: #c41a7d !important;
}

/**===============================================**/
/** TABLE CELL:   Background Blue colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-blue,
td.pp-table-cell.bg-blue {
  background: #CFE2F3 !important;
}

/**===============================================**/
/** TABLE CELL:  Background Yellow colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-yellow,
td.pp-table-cell.bg-yellow {
  background: #fff2cc !important;
}

/**===============================================**/
/** TABLE CELL:  Background WHITE colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-white,
td.pp-table-cell.bg-white {
  background: #ffffff !important;
}


/**===============================================**/
/** TABLE CELL:  Background GRAY colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-gray,
td.pp-table-cell.bg-gray {
  background: #efefef !important;
}

/**===============================================**/
/** TABLE CELL:  Background Green colors CSS **/
/**===============================================**/

th.pp-table-cell.bg-green,
td.pp-table-cell.bg-green {
  background: #B6D7A8 !important;
}

/**===============================================**/
/** TABLE CELL:  NO BORDER CSS **/
/**===============================================**/
th.pp-table-cell.no-border,
td.pp-table-cell.no-border {
  border: none !important;
}

/**===============================================**/
/** TABLE CELL:  Bottom Dotted BORDER CSS **/
/**===============================================**/
.dotted-border-bottom {
    border-bottom: 1px dotted #000 !important;
}

/*Border Left on Last Child of the Table Class with Border*/
.dotted-border-bottom:last-child {
    border-left: 1px dotted #000 !important;
}

/*Border Left on Last Child of the Table Class without Border*/
.dotted-noborder-bottom:last-child {
    border-left: 1px dotted #000 !important;
}

/**===============================================**/
/** TABLE CELL:  Background light red colors CSS **/
/**===============================================**/
th.pp-table-cell.bg-lred,
td.pp-table-cell.bg-lred{
    background: #EAD1DC !important;
}



/*******************************BUTTONS overall**********************************/
a.elementor-button-link.elementor-button.elementor-size-lg {
  font-size: 19px !important;
  padding: 11px !important;
  border-radius: 4px !important;
}



/*******************************MEDIA QUERIES**********************************/
@media (max-width: 767px) {

  /**META TAGS*/
  ul.elementor-inline-items.elementor-icon-list-items.elementor-post-info {
    width: auto !important;
    float: left !important;
  }
}

/*============================================================================*/
/* END OF RESOURCE ARTICLES SINGLE POST AREA*/
/*============================================================================*/


html {
  scrolling-behavior: smooth;
}

body {
  overflow-x: hidden;
}


.no-margin p:last-child {
  margin: 0 !important;
}

.main-header .jet-sub-mega-menu>div.elementor,
.main-header .jet-sub-mega-menu {
  box-shadow: none !important;
}

.video-container {
  display: none;
}

.video-title .jet-listing-dynamic-field__inline-wrap {
  cursor: pointer;
}

.custom-showcase .pp-showcase-navigation-item-wrap .pp-showcase-navigation-title::before {
  content: url(../svg/up.svg);
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  transform: rotate(180deg);
}

.custom-showcase .pp-showcase-navigation-item-wrap.pp-active-slide .pp-showcase-navigation-title::before {
  transform: rotate(0deg);
}

.jet-audio .mejs-controls .mejs-playpause-button.mejs-pause>button:before,
.jet-audio .mejs-controls .mejs-playpause-button.mejs-replay>button:before {
  content: "\f04b" !important;
}

.jet-listing-grid__item:nth-child(odd) .useful-phrases-audio {
  background-color: #fff;
}

.jet-listing-grid__item:nth-child(even) .useful-phrases-audio {
  background-color: #F2F2F2;
}

.jet-listing-grid__item:nth-child(even) .useful-phrases-phonetic {
  background-color: #F2F2F2;
}

.jet-listing-grid__item:nth-child(even) .useful-phrases-language {
  background-color: #DFDFDF;
}


.jet-listing-grid__item:nth-child(odd) .useful-phrases-language {
  background-color: #EBEBEB;
}

.jet-listing-grid__item:nth-child(even) .useful-phrases-english {
  background-color: #F2F2F2;
}

.useful-phrases-tab,
.useful-phrases-table {
  cursor: pointer;
}

.useful-phrases-template {
  display: none;
}


.jet-mega-menu-mega-container__inner {
  padding: 0 !important;
}

.useful-phrases-accordion .elementor-element-populated {
  display: grid;
  grid-template-columns: 55px 1fr;
}

/* -------------------------- Cookie Consent -------------------------- */

#cookie-law-info-bar {
  display: none !important;
}

.cookie-btn-dual .elementor-shortcode {
  display: flex;
  gap: 10px;
}


.cookie-btn-dual .elementor-shortcode a,
.cookie-settings .elementor-shortcode a {
  color: #000 !important;
  background-color: #fff !important;
  border-radius: 3px;
  display: block;
  font-family: 'Graphik';
  font-size: 16px;
  font-weight: 500;
  margin: 0 !important;
  padding: 10px;
  text-align: center;
  width: 100%;
}

/* ---------------------- Lesson CSS ----------------------- */
.english-text-list .jet-listing-grid__items,
.transition-text-list .jet-listing-grid__items {
  --columns: unset !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.transition-text-list .jet-listing-grid__items .lesson-text {
  background-color: transparent;
  cursor: pointer;
}

.transition-text-list .jet-listing-grid__items .lesson-text:hover {
  background-color: #cdebf5;
}


#play-btn-lesson .mejs-controls button:before {
  content: "\f028" !important;
}

#replay-btn-lesson .mejs-controls button:before {
  content: "\f1da" !important;
}

/* Blue Lagoon */
.blue-lagoon .elementor-heading-title,
.blue-lagoon .tippy-arrow {
  color: #005d82 !important;
}

.blue-lagoon .tippy-box {
  background-color: #005d82 !important;
}

/* Geebung */
.geebung .elementor-heading-title,
.geebung .tippy-arrow {
  color: #c78320 !important;
}

.geebung .tippy-box {
  background-color: #c78320 !important;
}

/* Red */

.red .elementor-heading-title,
.red .tippy-arrow {
  color: #ec1e23 !important;
}

.red .tippy-box {
  background-color: #ec1e23 !important;
}

/* Green */

.green .elementor-heading-title,
.green .tippy-arrow {
  color: #47aa41 !important;
}

.green .tippy-box {
  background-color: #47aa41 !important;
}

/* Purple */


.purple .elementor-heading-title,
.purple .tippy-arrow {
  color: #c41a7d !important;
}

.purple .tippy-box {
  background-color: #c41a7d !important;
}


/* Tahiti Gold */


.tahiti-gold .elementor-heading-title,
.tahiti-gold .tippy-arrow {
  color: #df7523 !important;
}

.tahiti-gold .tippy-box {
  background-color: #df7523 !important;
}



/* Eastern Blue */


.eastern-blue .elementor-heading-title,
.eastern-blue .tippy-arrow {
  color: #0087a3 !important;
}

.eastern-blue .tippy-box {
  background-color: #0087a3;
}


/* Christi Green */


.christi-green .elementor-heading-title,
.christi-green .tippy-arrow {
  color: #63a40f !important;
}

.christi-green .tippy-box {
  background-color: #63a40f !important;
}


/* Dark Violet*/


.dark-violet .elementor-heading-title,
.dark-violet .tippy-arrow {
  color: #8712b6 !important;
}

.dark-violet .tippy-box {
  background-color: #8712b6 !important;
}

/* Black */



.black .elementor-heading-title,
.black .tippy-arrow {
  color: #000 !important;
}

.black .tippy-box {
  background-color: #000 !important;
}


/* ESL Courses */

.unit-btn.active {
  background-color: #fff !important;
  color: #1d98d5 !important;
}

.unit-btn {
  cursor: pointer;
}

.unit-section {
  display: none;
}

.unit-section.active {
  display: block;
}


.no-indent ul {
/* 	list-style-position: inside; */
	padding-left: 1em;
	list-style-position: outside;
}

ul {
	padding-bottom: 15px;
}



/* Mobile Header */

.mobile-menu-col>.elementor-widget-wrap {
  overflow-x: hidden;
}

/* Useful Phrases Single */
@media (max-width: 767px) {

  .useful-phrases-table {
    margin: 15px;
    box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
  }

  .useful-phrases-table>.elementor-column-gap-default {
    display: grid !important;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 50px 1fr;
    gap: 0px;
    height: 100%;
  }

  .useful-phrases-table .useful-phrases-audio {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 2;
    width: 100% !important;
  }

  .useful-phrases-table .useful-phrases-audio>.elementor-element-populated {
    background-color: #1d98d5 !important;
  }

  .useful-phrases-table .useful-phrases-english {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-column-end: 5;
    width: 100% !important;
  }


  .useful-phrases-table .useful-phrases-language {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 5;
    width: 100% !important;
  }

  .useful-phrases-table .useful-phrases-phonetic {
    grid-row-start: 3;
    grid-column-start: 2;
    grid-row-end: 4;
    grid-column-end: 5;
    width: 100% !important;
  }

  .useful-phrases-table .useful-phrases-english .elementor-element-populated,
  .useful-phrases-table .useful-phrases-language .elementor-element-populated,
  .useful-phrases-table .useful-phrases-phonetic .elementor-element-populated {
    background-color: #fff !important;
    display: grid !important;
    grid-template-columns: 50px 1fr;
  }


}


/**============================================================================**/
/**SCROLL TEXT ON MOBILE ONLY ARTICLES ARCHIVE **/
/**============================================================================**/

@media (max-width: 768px) {
	.scrollable-mobile {
		white-space: nowrap;
		max-width: 100% !important;
		overflow-x: scroll;
	}
	
/**Headers on resourlce article single post **/
	
  #resource-article-single-post h1 {
    font-size: 40px;
    line-height: 41px;
  }

  #resource-article-single-post h2 {
    font-size: 33px;
    line-height: 33px;
  }

  #resource-article-single-post h3 {
    font-size: 28px;
    line-height: 30px;
  }
}

@media (max-width: 580px) {

  #resource-article-single-post h1 {
    font-size: 30px;
    line-height: 38px;
  }
}