@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");


/*== Parent Template CSS ==*/
/* ======================== */
:root{
    --pinkish-purple: #5555ae;
    --medium-blue: #0082a4;
    --greenish-blue: #a1d4ca;
    --light-blue: #6cd3e3;
    --light-purple2:#9392bf;
    --bright-orange: #FF7445;
    --white-smoke: #F5F5F4;
    --white: #FFF;
    --light-purple: #CBC3E3;
    --dark-gray: #7D7C7C;
    --black: #000;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
}

.content{
    display: flex;
    justify-content: space-between;
    width: 850px;
    margin: 10px;
}

.content2{
  display: flex;
  justify-content: space-between;
  margin: 10px;
}

.box-lightblu{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 500px;
  border-radius: 20px;
  margin: 0 auto;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(69, 90, 96, 30%);
}

.box-lightblu2{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 800px;
  border-radius: 20px;
  margin: 0 auto;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(69, 90, 96, 30%);
}

.box-lightblu3{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 380px;
  border-radius: 20px;
  margin: 0 auto;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(69, 90, 96, 30%);
}


.box-purple{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 292px;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    background: var(--white);
    box-shadow: 0 1rem 2rem rgba(203, 195, 227, 30%);
}

.box-purple2{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 390px;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(203, 195, 227, 30%);
}

.box-purple3{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 800px;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(203, 195, 227, 30%);
}

.box-torquise{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 292px;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    background: var(--white);
    box-shadow: 0 1rem 2rem rgba(0, 51, 64, 30%);
}

.box-torquise3{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 800px;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(0, 51, 64, 30%);
}

.box-lightgreen{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 292px;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    background: var(--white);
    box-shadow: 0 1rem 2rem rgba(63, 83, 79, 30%);
}

.box-lightgreen3{
  display: flex;
  flex-direction: column;
  height: auto;
  width: 800px;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(63, 83, 79, 30%);
}

.title{
    width: 100%;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: lighter;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    color: var(--white-smoke);
}

.example_trauma .title{
  background: var(--light-blue);
}

.alcohol .title{
  background: var(--light-purple2);
}

.behavioral .title{
    background: var(--pinkish-purple);
}

.cognitive .title{
    background: var(--medium-blue);
}

.physical .title{
    background: var(--greenish-blue);
}

.view{
    display: block;
    width: 100%;
    padding: 20px 0 20px;

    background: var(--white-smoke);
}

.icon{
    display: flex;
    justify-content: center;
}

.icon img{
  width: 35px;
	border-radius: 5px;
  margin-right: 15px;
}

.cost{
    display: flex;
    justify-content:center;
    flex-direction: row;
    margin-top: 10px;
}

.amount{
    font-size: 2.8em;
    font-weight: bolder;
}

.detail{
    margin: auto 0 auto 5px;
    width: 70px;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 15px;
    color: #7D7C7C;
}

.description{
    margin: 15px auto;
    font-size: 1rem;
    color: #7D7C7C;
}

ul{
    list-style: none;
}

li.items3{
    margin-top: 2px;
}

li.items3::before{
    content: "";
    background-image: url("https://i.postimg.cc/ht7g996V/check.png");
    background-position: center;
    background-size: cover;
    opacity: 0.5;

    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

/* Responsiveness:Start */
@media screen and (max-width:970px) {
    .content{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 50px auto;
        width:100%;
    }
    .cognitive, .physical{
        margin-top: 25px;
    }
}
/* Responsiveness:End */

.zoom {
	transition: transform .2s;
  }
  
  .zoom:hover {
	-ms-transform: scale(1.05); /* IE 9 */
	-webkit-transform: scale(1.05); /* Safari 3-8 */
	transform: scale(1.05); 
  }

  .zoom2 {
    transition: transform .2s;
    }
    
    .zoom2:hover:hover {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1); 
    }

  .text-content4 {
    font-size: 1.1rem;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* Circle */
.hover15 {
	position: relative;
}
.hover15::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 	100%;
		height: 100%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}

@media (min-width: 1003px){
    .modal-dialog{
        max-width: 800px !important;
    }
}

.close{
    position: relative;
    top:23px;
    right:4px;
    float:right !important;
}

.modal-content {
    background-color: transparent;
    border: none;
}

.olcards,
.olcards * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.olcards {
  list-style: none;
  counter-reset: cardCount;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  --cardsGap: 1rem;
  gap: var(--cardsGap);
  padding-bottom: var(--cardsGap);
}
.olcards li {
  counter-increment: cardCount;
  display: flex;
  color: white;
  --labelOffset: 1rem;
  --arrowClipSize: .5rem;
  margin-top: var(--labelOffset);
}

.olcards li::before {
  content: counter(cardCount, decimal-leading-zero);
  background: white;
  color: var(--cardColor);
  font-size: 2em;
  font-weight: 700;
  transform: translateY(calc(-1 * var(--labelOffset)));
  margin-right: calc(-1 * var(--labelOffset));
  z-index: 1;
  display: flex;
  padding-inline: 0.5em;
}
.olcards li.num2 .content {
  box-shadow: 0 0 5px #000;
}
.olcards li.num3 .content {
  box-shadow: 0 0 5px #000;
}
.olcards li .content {
  background-color: var(--cardColor);
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
  display: inline-flex;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
    var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
  grid-template-areas:
    "icon title"
    "icon text";
  gap: 0.25em .25em;
  clip-path: polygon(
    0 0,
    calc(100% - var(--arrowClipSize)) 0,
    100% 50%,
    calc(100% - var(--arrowClipSize)) 100%,
    calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
    0 calc(100% + var(--cardsGap))
  );
  position: relative;
}
.olcards li .content::before {
  content: "";
  position: absolute;
  width: var(--labelOffset);
  height: var(--labelOffset);
  background: var(--cardColor);
  left: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: brightness(0.75);
}
.olcards li .content::after {
  content: "";
  position: absolute;
  height: var(--cardsGap);
  width: var(--cardsGap);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
  left: 0;
  top: 100%;
}
.olcards li .icon {
  grid-area: icon;
  align-self: center;
  font-size: 1.5em;
}
.olcards li .content .title {
  grid-area: title;
  font-size: 1.17em;
  font-weight: 700;
  text-align: inherit;
}
.olcards li .content .text {
  grid-area: text;
  font-size: 1em;
  font-weight: 700;
  text-align: inherit;
  color:white;
  width: 100%;
}

ol li.num1:hover::before {
  transform: scale(1.1);
  box-shadow: 0 0 10px #000;
}

ol li.num2:hover::before {
  transform: scale(1.1);
}

ol li.num1:hover {
  color: #ffee10;
  box-shadow: 0 0 5px #000;
  clip-path: polygon(
    0 0,
    calc(100% - var(--arrowClipSize)) 0,
    100% 50%,
    calc(100% - var(--arrowClipSize)) 100%,
    calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
    0 calc(100% + var(--cardsGap))
  );
}

@media(max-width:768ox){
  .olcards li .icon{
    display:none;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 4px 3px 7px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.4;
  font-family: sans-serif;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
}
.blog-card a {
  color: inherit;
}
.blog-card a:hover {
  color: #9392bf;
}
.blog-card:hover .photo {
  transform: scale(1.3) rotate(3deg);
}
.blog-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
}
.blog-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}
.blog-card .details,
.blog-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}
.blog-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}
.blog-card .details a {
  -webkit-text-decoration: dotted underline;
          text-decoration: dotted underline;
}
.blog-card .details ul li {
  display: inline-block;
}
.blog-card .details .author:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: "";
}
.blog-card .details .date:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: "";
}
.blog-card .details .tags ul:before {
  font-family: FontAwesome;
  content: "";
  margin-right: 10px;
}
.blog-card .details .tags li {
  margin-right: 2px;
}
.blog-card .details .tags li:first-child {
  margin-left: -4px;
}
.blog-card .description {
  padding: 1rem;
  background: #f0a84d;
  position: relative;
  z-index: 1;
}
.blog-card .description h1,
.blog-card .description h2 {
  font-family: Poppins, sans-serif;
}
.blog-card .description h1 {
  line-height: 1;
  margin: 0;
  font-size: 1.7rem;
  color:#fff;
}
.blog-card .description h2 {
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #a2a2a2;
  margin-top: 5px;
}
.blog-card .description .read-more {
  text-align: right;
}
.blog-card .description .read-more a {
  color: #5ad67d;
  display: inline-block;
  position: relative;
}
.blog-card .description .read-more a:after {
  content: "";
  font-family: FontAwesome;
  margin-left: -10px;
  opacity: 0;
  vertical-align: middle;
  transition: margin 0.3s, opacity 0.3s;
}
.blog-card .description .read-more a:hover:after {
  margin-left: 5px;
  opacity: 1;
}
.blog-card p {
  position: relative;
  margin: 1rem 0 0;
}
.blog-card p:first-of-type {
  margin-top: 1.25rem;
}
.blog-card p:first-of-type:before {
  content: "";
  position: absolute;
  height: 5px;
  background: #9392bf;
  width: 35px;
  top: -0.75rem;
  border-radius: 3px;
}
.blog-card:hover .details {
  left: 0%;
}
@media (min-width: 640px) {
  .blog-card {
    flex-direction: row;
    max-width: 800px;
  }
  .blog-card .meta {
    flex-basis: 40%;
    height: auto;
  }
  .blog-card .description {
    flex-basis: 60%;
  }
  .blog-card .description:before {
    transform: skewX(-3deg);
    content: "";
    background: #f0a84d;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .blog-card.alt {
    flex-direction: row-reverse;
  }
  .blog-card.alt .description:before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }
  .blog-card.alt .details {
    padding-left: 25px;
  }
}

@media (pointer:none), (pointer:coarse) {
  .blog-card .details {
    left:0;
  }

  .teen{width:100%}
}

@media(max-width:768px){
  .teen{width:100%}
}

.blog-card{
  background-color: ghostwhite;
}

/*counter css*/
.counter-list {
  width: 100%;
  margin: auto;
  background-color: #f0f8ff;
  border-radius:5px;
  color:#fff
}
.counters {
  border-top: 2px dashed;
  border-color: #0082a4 !important;
  margin:0; padding: 30px;
  counter-increment: section;
  position: relative;
}



.counters:nth-child(even):before {
  content: counter(section);
  right: 100%; 
  margin-right: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 3px;
  height: 40px;
  width: 40px;
  background-color: #0082a4;
  text-align:center;
  color: white;
  font-size: 120%;
}

.counters:nth-child(odd):before {
  content: counter(section);
  left: 100%; 
  margin-left: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 3px;
  height: 40px;
  width: 40px;
  background-color: #0082a4;
  text-align:center;
  color: white;
  font-size: 120%;
}

.counters:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px; 
  padding-right: 0;
  background-color:
}

.counters:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px; 
  padding-left: 0;
}

.counters:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
}

.counters:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

.cards {
  background-color: var(--cardColor);
  --inlinePadding: 1em;
  --boxPadding: 0.5em;
  display: inline-flex;
  padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
  grid-template-areas:
      "icon title"
      "icon text";
  gap: 0.25em 0.25em;
  clip-path: polygon( 0 0, calc(100% - var(--arrowClipSize)) 0, 100% 50%, calc(100% - var(--arrowClipSize)) 100%, calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)), 0 calc(100% + var(--cardsGap)) );
  position: relative;
}
/*============*/
.ollist4 {
  display: flex;
  width: 100%;
  counter-reset: item;
  justify-content: space-between;
  padding:15px;
  border-radius:5px;
}
.ollist4 > * {
  counter-increment: item;
  position: relative;
  display: block;
  width: calc(33.6% - 8px);
  color: white;
  text-align: center;
  padding: 50px 10px;
  box-sizing: border-box;
  max-height: 267px !important;
  height: 267px;
}
.ollist4 > *:before {
  content: counter(item);
  text-align: center;
  display: block;
  color: white;
  position: absolute;
  top: 5px;
  left: 10px;
  font-weight: bold;
  /*font-size: 24px;*/
  /*opacity: 0.5;*/
  opacity:0;
}
.ollist4 > *:not(:last-child):after {
  content: "";
  position: absolute;
  background-color: #b9b9b9;
  width: 10px;
  height: 100%;
  top: 5px;
  right: -10px;
  transform: skewY(45deg);
}
.ollist4 > *:nth-child(0) {
  top: -10px;
  background-color: #3c6562;
  border-radius:4px;
}
.ollist4 > *:nth-child(1) {
  top: 0px;
  background-color: #5555ae;
  border-radius:4px;
}
.ollist4 > *:nth-child(2) {
  top: 10px;
  background-color: #0082a4;
  border-radius:4px;
}
.ollist4 > *:nth-child(3) {
  top: 20px;
  background-color: #a1d4ca;
  border-radius:4px;
}

.ollist5 {
  display: flex;
  width: 100%;
  counter-reset: item;
  justify-content: space-between;
  padding:15px;
  border-radius:5px;
}
.ollist5 > * {
  counter-increment: item;
  position: relative;
  display: block;
  width: calc(33.6% - 8px);
  color: white;
  text-align: center;
  padding: 50px 10px;
  box-sizing: border-box;
  max-height: 267px !important;
  height: 267px;
}
.ollist5 > *:before {
  content: counter(item);
  text-align: center;
  display: block;
  color: white;
  position: absolute;
  top: 5px;
  left: 10px;
  font-weight: bold;
  font-size: 24px;
  opacity: 0;
}
.ollist5 > *:not(:last-child):after {
  content: "";
  position: absolute;
  background-color: #b9b9b9;
  width: 10px;
  height: 100%;
  top: 5px;
  right: -10px;
  transform: skewY(45deg);
}
.ollist5 > *:nth-child(0) {
  top: -10px;
  background-color: #3c6562;
  border-radius:4px;
}
.ollist5 > *:nth-child(1) {
  top: 0px;
  background-color: #a1d4ca;
  border-radius:4px;
}
.ollist5 > *:nth-child(2) {
  top: 10px;
  background-color: #5555ae;
  border-radius:4px;
}
.ollist5 > *:nth-child(3) {
  top: 20px;
  background-color: #0082a4;
  border-radius:4px;
}

.ollist6 {
  display: flex;
  width: 100%;
  counter-reset: item;
  /*justify-content: space-between;*/
  justify-content: inherit;
  padding:15px;
  border-radius:5px;
}
.ollist6 > * {
  counter-increment: item;
  position: relative;
  display: block;
  width: calc(33.6% - 8px);
  color: white;
  text-align: center;
  padding: 50px 10px;
  box-sizing: border-box;
  max-height: 267px !important;
  height: 267px;
}
.ollist6 > *:before {
  content: counter(item);
  text-align: center;
  display: block;
  color: white;
  position: absolute;
  top: 5px;
  left: 10px;
  font-weight: bold;
  font-size: 24px;
  opacity: 0;
}
.ollist6 > *:not(:last-child):after {
  content: "";
  position: absolute;
  background-color: #b9b9b9;
  width: 10px;
  height: 100%;
  top: 5px;
  right: -10px;
  transform: skewY(45deg);
}
.ollist6 > *:nth-child(0) {
  top: -10px;
  background-color: #3c6562;
  border-radius:4px;
}
.ollist6 > *:nth-child(1) {
  top: 0px;
  background-color: #a1d4ca;
  border-radius:4px;
}
.ollist6 > *:nth-child(2) {
  top: 10px;
  background-color: #5555ae;
  border-radius:4px;
}
.ollist6 > *:nth-child(3) {
  top: 20px;
  background-color: #0082a4;
  border-radius:4px;
}

.wrapper4 {
  max-width: 100%;
  margin: 0 auto;
  background-color: ghostwhite;
  border-radius: 5px;
}

ol.four { counter-reset: item 3 }
ol.six { counter-reset: item 6 }

.title2 {
    width: 100%;
    padding: 10px 0;
    font-size: 1.4rem !important;
    font-weight: lighter;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /*color: #3e4893;*/
    color:#fff;
    text-shadow: 0 7.36px 10.896px #283f33, 0 -2px 1px #a1afa8
}

.b1 {
  list-style-type: none;
  background: url('../images/1-01.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b1-teen {
  list-style-type: none;
  background: url('../images/1-01.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b1-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-01.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b2 {
  list-style-type: none;
  background: url('../images/1-02.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b2-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-02.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b3 {
  list-style-type: none;
  background: url('../images/1-03.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b3-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-03.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b4 {
  list-style-type: none;
  background: url('../images/1-04.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b4-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-04.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b5 {
  list-style-type: none;
  background: url('../images/1-05.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b5-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-05.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b6 {
  list-style-type: none;
  background: url('../images/1-06.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b6-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-06.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b7 {
  list-style-type: none;
  background: url('../images/1-07.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b7-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-07.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b8 {
  list-style-type: none;
  background: url('../images/1-08.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b8-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-08.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}

.b9 {
  list-style-type: none;
  background: url('../images/1-09.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
  background-color: #a1d4ca !important;
}

.b9-spanish {
  list-style-type: none;
  background: url('../images/ICONS_Spanish-09.png') no-repeat;
 /* padding-left: 40px;*/
  margin-bottom: 40px;
  background-size: 274px 266px;
}


.ag-format-container {
  width: 870px;
  margin: 0 auto;
}

.ag-courses_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  padding: 50px 0;
}
.ag-courses_item {
  -ms-flex-preferred-size: calc(33.33333% - 30px);
  flex-basis: calc(33.33333% - 30px);

  margin: 0 15px 30px;

  overflow: hidden;

  border-radius: 28px;
}
.ag-courses-item_link {
  display: block;
  padding: 30px 20px;
  background-color: #919191;

  overflow: hidden;

  position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
  text-decoration: none;
  color: #FFF;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
  -webkit-transform: scale(10);
  -ms-transform: scale(10);
  transform: scale(10);
}
.ag-courses-item_title {
  min-height: 87px;
  margin: 0 0 25px;

  overflow: hidden;

  font-weight: bold;
  font-size: 30px;
  color: #FFF;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date-box {
  font-size: 18px;
  color: #FFF;

  z-index: 2;
  position: relative;
}
.ag-courses-item_date {
  font-weight: bold;
  color: #f9b234;

  -webkit-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease
}
.ag-courses-item_bg {
  height: 128px;
  width: 128px;
  background-color: #f9b234;

  z-index: 1;
  position: absolute;
  top: -75px;
  right: -75px;

  border-radius: 50%;

  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
  background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
  background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
  background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
  background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
  background-color: #4c49ea;
}



@media only screen and (max-width: 979px) {
  .ag-courses_item {
    -ms-flex-preferred-size: calc(50% - 30px);
    flex-basis: calc(50% - 30px);
  }
  .ag-courses-item_title {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }

}
@media only screen and (max-width: 639px) {
  .ag-courses_item {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .ag-courses-item_title {
    min-height: 72px;
    line-height: 1;

    font-size: 24px;
  }
  .ag-courses-item_link {
    padding: 22px 40px;
  }
  .ag-courses-item_date-box {
    font-size: 16px;
  }
}

.notification {
  background-color: #add8e6 !important;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 5px 5px #00000033;
  font-weight: 500;
  gap: 15px;
  overflow: hidden;
  border: 1px solid #28998b;
}

/*Button 82 CSS */
.button-82-pushable {
	position: relative;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	outline-offset: 4px;
	transition: filter 250ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
  }
  
  .button-82-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition:
	  transform
	  600ms
	  cubic-bezier(.3, .7, .4, 1);
  }
  
  .button-82-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient(
	  to left,
	  hsl(241deg, 26%, 66%) 0%,
    hsl(241deg, 63%, 64%) 8%,s
	  hsl(241deg, 63%, 64%) 92%,
	  hsl(241deg, 26%, 66%) 100%
	);
  }
  
  .button-82-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    background: hsl(268deg, 34%, 56%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
    height: 112px;
    max-height: 116px;  
  }
  
  @media (min-width: 768px) {
	.button-82-front {
	  font-size: 1.3rem;
	  padding: 12px 42px;
	}
  }
  
  .button-82-pushable:hover {
	filter: brightness(110%);
	-webkit-filter: brightness(110%);
  }
  
  .button-82-pushable:hover .button-82-front {
	transform: translateY(-6px);
	transition:
	  transform
	  250ms
	  cubic-bezier(.3, .7, .4, 1.5);
  }
  
  .button-82-pushable:active .button-82-front {
	transform: translateY(-2px);
	transition: transform 34ms;
  }
  
  .button-82-pushable:hover .button-82-shadow {
	transform: translateY(4px);
	transition:
	  transform
	  250ms
	  cubic-bezier(.3, .7, .4, 1.5);
  }
  
  .button-82-pushable:active .button-82-shadow {
	transform: translateY(1px);
	transition: transform 34ms;
  }
  
  .button-82-pushable:focus:not(:focus-visible) {
	outline: none;
  }

  @charset "UTF-8";
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
/* Large Devices, Wide Screens */
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
/* Medium Devices, Desktops */
/* Small Devices, Tablets */
/* Extra Small Devices, Phones */
/* Custom, iPhone Retina */
/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
  /* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
  /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
  /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
  /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* For landscape layouts only */
}
/*******Nuevos mensajes de error******/
.new-message-box {
  margin: 15px 0;
  padding-left: 20px;
  margin-bottom: 25px !important;
}

.new-message-box p {
  font-size: 1.15em;
  font-weight: 600;
}

.info-tab {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  top: 8px;
}

.info-tab {
  float: left;
  margin-left: -23px;
}

.info-tab i::before {
  width: 24px;
  height: 24px;
  box-shadow: inset 12px 0 13px rgba(0, 0, 0, 0.5);
}

.info-tab i::after {
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom-color: #fff;
  border-left-color: #fff;
  bottom: -18px;
}

.info-tab i::before, .info-tab i::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -17px;
  transform: rotateX(60deg);
}

.note-box, .warning-box, .tip-box-success, .tip-box-danger, .tip-box-warning, .tip-box-info, .tip-box-alert {
  padding: 12px 8px 3px 26px;
}

/***Success****/
.new-message-box-success {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-success {
  background: #8BC34A;
}

.tip-box-success {
  color: #33691E;
  background: #DCEDC8;
}

.tip-icon-success::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-success i::before {
  background: #8BC34A;
}

/*******Danger*******/
.new-message-box-danger {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-danger {
  background: #f44336;
}

.tip-box-danger {
  color: #b71c1c;
  background: #FFCCBC;
}

.tip-icon-danger::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-danger i::before {
  background: #f44336;
}

/*******warning*******/
.new-message-box-warning {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-warning {
  background: #FFEB3B;
}

.tip-box-warning {
  color: #212121;
  background: #FFF9C4;
}

.tip-icon-warning::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: #212121;
}

.tip-icon-warning i::before {
  background: #FFEB3B;
}

/*******info*******/
.new-message-box-info {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-box-info {
  color: #01579B;
  background: #B3E5FC;
}

.tip-icon-info {
  background: #03A9F4;
}

.tip-icon-info::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-info i::before {
  background: #03A9F4;
}

/*******info*******/
.new-message-box-alert {
  background: #FF6F00;
  padding: 3px;
  margin: 10px 0;
}

.tip-box-alert {
  color: #212121;
  background: #FFF8E1;
}

.tip-icon-alert {
  background: #FF6F00;
}

.tip-icon-alert::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-alert i::before {
  background: #FF6F00;
}

/*************************/
body {
  background-color: #ffffff;
}