/* Animations */
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
  60% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } }
/*Scale animation*/
@-webkit-keyframes scale { 25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); } }
@keyframes scale { 25% { -webkit-transform: scale(0.95); transform: scale(0.95); }
  75% { -webkit-transform: scale(1.05); transform: scale(1.05); } }
/* SPINNER CSS */
.loading__wrapper { position: relative; height: 80vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.scaling-squares-spinner, .scaling-squares-spinner * { -webkit-box-sizing: border-box; box-sizing: border-box; }

.scaling-squares-spinner { height: 65px; width: 65px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-animation: scaling-squares-animation 1250ms; animation: scaling-squares-animation 1250ms; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transform: rotate(0deg); transform: rotate(0deg); }

.scaling-squares-spinner .square { height: calc(65px * 0.25 / 1.3); width: calc(65px * 0.25 / 1.3); margin-right: auto; margin-left: auto; border: calc(65px * 0.04 / 1.3) solid #039b9a; position: absolute; -webkit-animation-duration: 1250ms; animation-duration: 1250ms; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.scaling-squares-spinner .square:nth-child(1) { -webkit-animation-name: scaling-squares-spinner-animation-child-1; animation-name: scaling-squares-spinner-animation-child-1; }

.scaling-squares-spinner .square:nth-child(2) { -webkit-animation-name: scaling-squares-spinner-animation-child-2; animation-name: scaling-squares-spinner-animation-child-2; }

.scaling-squares-spinner .square:nth-child(3) { -webkit-animation-name: scaling-squares-spinner-animation-child-3; animation-name: scaling-squares-spinner-animation-child-3; }

.scaling-squares-spinner .square:nth-child(4) { -webkit-animation-name: scaling-squares-spinner-animation-child-4; animation-name: scaling-squares-spinner-animation-child-4; }

@-webkit-keyframes scaling-squares-animation { 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } }

@keyframes scaling-squares-animation { 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } }
@-webkit-keyframes scaling-squares-spinner-animation-child-1 { 50% { -webkit-transform: translate(150%, 150%) scale(2, 2); transform: translate(150%, 150%) scale(2, 2); } }
@keyframes scaling-squares-spinner-animation-child-1 { 50% { -webkit-transform: translate(150%, 150%) scale(2, 2); transform: translate(150%, 150%) scale(2, 2); } }
@-webkit-keyframes scaling-squares-spinner-animation-child-2 { 50% { -webkit-transform: translate(-150%, 150%) scale(2, 2); transform: translate(-150%, 150%) scale(2, 2); } }
@keyframes scaling-squares-spinner-animation-child-2 { 50% { -webkit-transform: translate(-150%, 150%) scale(2, 2); transform: translate(-150%, 150%) scale(2, 2); } }
@-webkit-keyframes scaling-squares-spinner-animation-child-3 { 50% { -webkit-transform: translate(-150%, -150%) scale(2, 2); transform: translate(-150%, -150%) scale(2, 2); } }
@keyframes scaling-squares-spinner-animation-child-3 { 50% { -webkit-transform: translate(-150%, -150%) scale(2, 2); transform: translate(-150%, -150%) scale(2, 2); } }
@-webkit-keyframes scaling-squares-spinner-animation-child-4 { 50% { -webkit-transform: translate(150%, -150%) scale(2, 2); transform: translate(150%, -150%) scale(2, 2); } }
@keyframes scaling-squares-spinner-animation-child-4 { 50% { -webkit-transform: translate(150%, -150%) scale(2, 2); transform: translate(150%, -150%) scale(2, 2); } }
/* SPINNER CSS */
/*  Needed for filters */
.hide { /* You can play with the seconds to change the "animation" */ -webkit-animation: hide .3s ease 0s 1 normal forwards; animation: hide .3s ease 0s 1 normal forwards; -webkit-transform-origin: center; transform-origin: center; }

.show { /* You can play with the seconds to change the "animation" */ -webkit-animation: show .3s ease 0s 1 normal forwards; animation: show .3s ease 0s 1 normal forwards; -webkit-transform-origin: center; transform-origin: center; }

@-webkit-keyframes hide { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; margin: 0; } }

@keyframes hide { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; margin: 0; } }
@-webkit-keyframes show { 0% { -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; margin: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes show { 0% { -webkit-transform: scale(0); transform: scale(0); width: 0; height: 0; margin: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); } }
.peec-courses { margin: 7rem 7em; margin-top: 0px; padding: 0; }
.peec-courses .courses-title { font-size: 2.5em; color: #0a526a; font-family: 'AncizarSans-BoldItalic', sans-serif !important; line-height: 1; }
.peec-courses .filters { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; }
.peec-courses .filters .categories { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 20px; width: 40%; }
.peec-courses .filters .categories label { background-color: #0a526a; border-radius: 7px 0 0 7px; color: #fff; font-family: 'AncizarSans-BoldItalic', sans-serif; font-size: 21px; padding: 5px; position: relative; text-align: center; text-transform: uppercase; width: 30%; }
.peec-courses .filters .categories .options { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #0a526a, #0a526a); background-position: calc(100% - 18px), calc(100% - 11px), 100% 0; background-size: 8px 8px, 8px 8px, 1.9em 1.8em; background-repeat: no-repeat; border: 1px solid #0a526a; border-radius: 0 7px 7px 0; color: #0a526a; font-family: 'AncizarSans-BoldItalic', sans-serif; font-size: 22px; height: 40px; padding-left: 10px; position: relative; text-transform: uppercase; width: 70%; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
.peec-courses .filters .categories .options:hover, .peec-courses .filters .categories .options:focus, .peec-courses .filters .categories .options:active { outline: none; }
.peec-courses .filters .categories .options::-ms-expand { display: none; }
.peec-courses .filters .sorting-buttons { text-align: right; width: 60%; }
.peec-courses .filters .sorting-buttons span { color: #0a526a; font-family: 'AncizarSans-BoldItalic', sans-serif; font-size: 22px; margin-right: 5%; }
.peec-courses .filters .sorting-buttons .button-group button { background: #fff; color: #0a526a; font-family: 'AncizarSans-BoldItalic', sans-serif; font-size: 18px; height: 40px; text-align: center; border: 1px solid #0a526a; border-radius: 0; padding-left: 25px; padding-right: 25px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.peec-courses .filters .sorting-buttons .button-group button:hover { background: rgba(188, 215, 245, 0.4); outline: none; }
.peec-courses .filters .sorting-buttons .button-group button:active, .peec-courses .filters .sorting-buttons .button-group button:focus { outline: none; }
.peec-courses .filters .sorting-buttons .button-group .active { background: #0a526a; color: #fff; }
.peec-courses .filters .sorting-buttons .button-group .active:hover { background: #0a526a; }
.peec-courses .courses-wrapper .course-items { margin: 30px -2rem; position: relative; }
.peec-courses .courses-wrapper .course-items .course { display: block; margin: 0; position: relative; }
.peec-courses .courses-wrapper .course-items .course .content { display: block; position: relative; }
.peec-courses .courses-wrapper .course-items .course .content .image { display: block; position: relative; }
.peec-courses .courses-wrapper .course-items .course .content .course-info { border: 0.5px solid #0a526a; color: #0a526a; line-height: 1.1; margin: 0; position: relative; overflow: hidden; padding: 10px 15px; text-align: center; width: 100%; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .name { color: #0a526a; font-family: 'AncizarSans-Bold', sans-serif; font-size: 22px; height: 46px; line-height: 1.1; margin: 0 0 5px; overflow: hidden; padding-top: 10px; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .name.big_string { font-size: 21px; padding-top: 0; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .date { font-family: 'AncizarSans-LightItalic', sans-serif; color: #00957d; font-size: 18px; margin: 0; text-transform: inherit; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .year { font-family: 'AncizarSans-BoldItalic', sans-serif; font-size: 1.2em; position: absolute; bottom: 1em; right: 1.5em; margin: 0; line-height: 1; color: #00957d !important; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .detail { font-family: 'AncizarSans-RegularItalic', sans-serif; font-size: 1.2em; text-transform: inherit; color: #00957d !important; }
.peec-courses .courses-wrapper .course-items .course .content .course-info .detail span { font-family: 'AncizarSans-BoldItalic', sans-serif; }
.peec-courses .courses-wrapper .course-items .course:hover .content .image .cta, .peec-courses .courses-wrapper .course-items .course:hover .content .image::before { opacity: 1; visibility: visible; }
.peec-courses .courses-wrapper .course-items.items-grid { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.peec-courses .courses-wrapper .course-items.items-grid .course { width: calc((100% - 12rem) / 3); margin: 0 2rem 3rem; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.peec-courses .courses-wrapper .course-items.items-grid .course:hover { background-color: rgba(209, 209, 209, 0.4); }
.peec-courses .courses-wrapper .course-items.items-grid .course .content { border: 1px solid #d1d1d1; border-radius: 0.5rem; }
.peec-courses .courses-wrapper .course-items.items-grid .course .content .course-info { padding: 1em 1.5em; position: relative; }
.peec-courses .courses-wrapper .course-items.items-grid .course .content .course-info .name { margin-bottom: 1em; min-height: 70px; }
.peec-courses .courses-wrapper .course-items.items-grid .course .content .course-info .name, .peec-courses .courses-wrapper .course-items.items-grid .course .content .course-info .detail { text-align: left; }
.peec-courses .courses-wrapper .course-items.items-slider { padding: 0 0.5rem; }
.peec-courses .courses-wrapper .course-items.items-slider .course { margin: 0 1.5rem; }
.peec-courses .courses-wrapper .course-items.items-slider .slick-arrow { border: none; background-color: #FFF; font-size: 2em; height: 6rem; outline: none; position: absolute; top: 50%; width: 3.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.peec-courses .courses-wrapper .course-items.items-slider .slick-arrow.prev { left: -3.5rem; }
.peec-courses .courses-wrapper .course-items.items-slider .slick-arrow.next { right: -3.5rem; }
.peec-courses .courses-wrapper .course-items.items-slider .slick-arrow:hover { background-color: rgba(0, 0, 0, 0.05); }

@media screen and (max-width: 40em) { .peec-courses { margin: 3rem; }
  .peec-courses .filters { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap-reverse; flex-flow: row wrap-reverse; margin-top: -45px; }
  .peec-courses .filters .categories { width: 100%; padding-top: 3rem; }
  .peec-courses .filters .categories label { font-size: 15px; width: 32%; }
  .peec-courses .filters .categories .options { height: 31px; font-size: 18px; background-size: 8px 8px, 8px 8px, 1.8em 1.8em; background-position: calc(100% - 16px), calc(100% - 8px), 100% 0; }
  .peec-courses .filters .sorting-buttons { width: 100%; text-align: justify; }
  .peec-courses .filters .sorting-buttons span { font-size: 19px; width: 100%; display: block; margin: 0 0 10px; text-align: left; }
  .peec-courses .filters .sorting-buttons .button-group .sort-by-botton-group { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; }
  .peec-courses .filters .sorting-buttons .button-group button { font-size: 16px; height: 35px; width: 49%; }
  .peec-courses .courses-title { font-size: 1.75em; }
  .peec-courses .courses-wrapper .course-items { margin: 2rem -2rem 30px -2rem; }
  .peec-courses .courses-wrapper .course-items.items-grid { display: grid; grid-template-columns: 1fr; }
  .peec-courses .courses-wrapper .course-items.items-grid .course { width: calc((100% - 4rem) / 1); }
  .peec-courses .courses-wrapper .course-items .slick-dots { bottom: -40px; margin: 0; }
  .peec-courses .courses-wrapper .course-items .slick-dots li { height: 12px; margin: 0 4px; width: 12px; }
  .peec-courses .courses-wrapper .course-items .slick-dots li button { height: 12px; padding: 0; position: relative; width: 12px; border-radius: 50%; border: 2px solid #0a526a; }
  .peec-courses .courses-wrapper .course-items .slick-dots li button::before { display: none; }
  .peec-courses .courses-wrapper .course-items .slick-dots .slick-active button { background-color: #0a526a; }
  .courses { margin-top: 10px; padding: 25px 25px 5px; }
  .courses .filters { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .courses .filters .categories { width: 100%; }
  .courses .filters .categories label { padding-top: 11px; font-size: 17px; }
  .courses .filters .categories .options { background-size: 8px 8px, 8px 8px, 2em 2em; padding: 8px 10px 5px; font-size: 20px; }
  .courses .filters .sorting-buttons { width: 100%; }
  .courses .courses-content .activity { width: 100%; padding: 15px 15px 0px; } }
.peec-courses .courses-wrapper .course-items .course .content .course-info .name { height: unset; }
