@font-face {
  font-family: SharpSans;
  src: url(/includes/fonts/SharpSansNo1/SharpSansNo1-Medium.woff);
}

@font-face {
  font-family: SharpSans;
  src: url(/includes/fonts/SharpSansNo1/SharpSansNo1-MediumItalic.woff);
  font-style: italic;
}

@font-face {
  font-family: SharpSans;
  src: url(/includes/fonts/SharpSansNo1/SharpSansNo1-Bold.woff);
  font-weight: bold;
}

@font-face {
  font-family: SharpSans;
  src: url(/includes/fonts/SharpSansNo1/SharpSansNo1-BoldItalic.woff);
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: HelveticaNeue;
  src: url(/includes/fonts/HelveticaNeueLTMedium.woff);
}

@font-face {
  font-family: "abeka-icon";
  src: url(/includes/fonts/abeka-icon.woff);
}


/* HTML STYLES */
html {
  scroll-behavior: smooth;
}
body {
  background-color: #2c2c30;
}

.position-absolute-bottom{
  position: absolute;
  bottom:5px;
  right: 0;
  left: 0;
}
.position-absolute-top{
  position: absolute;
  top:5px;
  right: 0;
  left: 0;
}

/* FONTS */
body {
  font-family: 'Lato', sans-serif; 
  color: #f2f2f2 !important;
}
p {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  
}
ul, ol {
  text-align: left;
  line-height: 22pt;
}
h1, .h1, h2, .h2 {
  font-family: 'SharpSans', sans-serif;
  text-transform: uppercase;
  font-style: normal;
  text-align: center;
  letter-spacing: 1px;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  text-align: center;
  letter-spacing: 1px;
  text-transform: none;
}

h1 {
  font-size: 46px !important;
  line-height: 49px !important;
}
h2 {
  font-size: 28pt;
}
h3 {
  font-size: 24pt;
}
h4 {
  font-size: 18pt;
}
@media (max-width: 767px){
  h1 {
    font: normal 39px/47px 'SharpSans', sans-serif !important;
  }
  h2 {
    font: normal 28px/38px 'SharpSans', sans-serif !important;
  }
  h3 {
    font: normal 27px/38px 'Lato', sans-serif !important;
  }
  h4{
    font: normal 20px/32px 'Lato', sans-serif !important;
  }

}
.scroll-margin {
  scroll-margin-top: 5rem;
}
/*Links*/
a {
  text-decoration: underline;
  color: #f2f2f2;
}

/*Colors*/
.text-light, .text-white {
  color: #f2f2f2 !important;
}
.orange {
  color: #f5ae3c !important;
}
.green {
  color: #bad600 !important;
}
.teal {
  color: #6EC8BA !important;
}
.purple {
  color: #93328e !important;
}
a:hover, a:active, a:focus {
  color: #93328e;
  text-decoration: underline;
}
.contact a:hover, a:active, a:focus {
  text-decoration: underline;
}
.black {
  color: #2c2c30 !important;
}
.tc-link:hover {
  color: #BAD600 !important;
}
.pc-link:hover {
  color: #6EC8BA !important;
}
.ss-link:hover {
  color:#F5AE3C !important;
}

nav > li > a:focus {
  background-color: #2C2C30 !important;
}
button:focus {
    outline: 5px auto #aeaeae !important;
}


/* LINES AND COLOR BARS */
.color-line{
  content: " ";
  width: 100%;
  height: 3px;
  margin-bottom:5px;
}
.line-orange{
  background: #f5ae3c;
}
.line-teal{
  background:#9acfbd;
}
.line-purple {
  background:#93328e;
}
.line-green {
  background:#bad600;
}
.color-dash {
  content: " ";
  width: 40px;
  height: 3px;
  margin-right: 20px;
  display: inline-flex;
}
.color-dash-block {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 17px;
  display: inline-flex;
}

/* BACKGROUNDS */
.bg-purple {
  background-color: #93328E;
}
.bg-white {
  background-color: #ffffff;
}
.bg-gradient {
  background-image: linear-gradient(#7a7a7a, #545454);
}
.bg-gradient .bio p {
  color: #e2e2e2 !important;
}
.bg-black {
  background-color: #000000;
  color: #e2e2e2;
}
.bg-black p {
  color: #e2e2e2 !important;
}
.bg-dark {
  background-color: #2c2c30 !important;
}
.bg-orange {
  background-color: #f5ae3c !important;
}
.bg-green-fade {
  background-color: rgba(186,214,0,0.5);
}
.bg-orange-fade {
  background-color: rgba(245,174,60,0.5);
}
.bg-teal-fade {
  background-color: rgba(154,207,189,0.5);
}
.bg-purple-fade {
  background-color: rgba(147,50,142,0.5);
}
.parallax-window {
  background-attachment: fixed;
  background-size:cover;
}
.dark-overlay {
  box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 55%);
}
/*Navbar*/
.navbar {
  width: 100%;
  color: #f2f2f2;
  border-radius: 0%;
  margin-bottom: 0px;
  background-blend-mode: multiply;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.navbar-dark .navbar-nav .nav-link {
  color: #f2f2f2;
}
.tc-navbar-brand, .ss-navbar-brand, .pc-navbar-brand {
width: 120px;
}

li.tc-nav-item, li.pc-nav-item, li.ss-nav-item {
  padding-left: 30px;
}
.nav-item, .pc-nav-item {
  padding: 8px 15px;
  background-color: #2c2c30;
  top:1px;
}
.nav-link:focus {
  background-color: #2c2c30 !important;
  color:#fff;
}
.nav-link {
  text-decoration: none;
  color: #f2f2f2;
  text-transform: uppercase;
}
.nav-link:hover {
  text-decoration: none;
  background-color: transparent !important;
}
.navbar-nav li {
  list-style-type: none;
  margin-bottom: 0px;
}
.ss-nav-item a:focus, .tc-nav-item a:focus, .pc-nav-item a:focus {
  background-color: transparent !important;
}
.ss-nav-item a:hover, .ss-nav-item a:active {
  color: #f5ae3c !important;
}
.tc-nav-item a:hover, .tc-nav-item a:active {
  color: #bad600 !important;
}
.pc-nav-item a:hover, .pc-nav-item a:active {
  color: #6EC8BA !important;
  background-color: #2c2c30;
}
.tc-register {
  color: #bad600 !important;
}
.pc-register {
  color: #6EC8BA !important;
}
.pc-register:hover {
  color: #ffffff !important;
  transition: all 0.25s ease;
}
.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  background-color: transparent !important;
}
/* HEADER */
.ss-img {
  background-image: url(https://static.abeka.com/abeka-events/images/summer-seminar/hero.jpg);
  background-size: cover;
  background-position: top center;
  min-height: 50vh;
}
.pc-img {
  background-image: url(https://static.abeka.com/abeka-events/images/principals-clinic/hero.jpg);
  background-size: cover;
  background-position: top center;
  min-height: 50vh;
}
.tc-img {
  background-image: url(https://static.abeka.com/abeka-events/images/teachers-clinic/hero-24.jpg);
  background-size: cover;
  background-position: top center;
  min-height: 50vh;
}
.application-img {
  background-image: url(https://static.abeka.com/abeka-events/images/principals-clinic/hero.jpg);
  background-size: cover;
  background-position: top center;
  min-height: 30vh;
}
.save-tab {
  position: absolute;
  top: 55px;
  height: 95px;
  width: 200px;
  padding: 15px;
  right: 20px;
  border-radius: 0px 0px 15px 15px;
  text-align: center;
  z-index: 1;
}
.save-bar-link {
  width: 100%;
  text-decoration: none;
}
.save-bar-link, .save-bar-link:hover, .save-bar-link:focus {
  text-decoration: none;
}
.save {
  position: relative;
  color: #ffffff;
  font-size: 25pt;
  line-height: 22pt;
  top: -7px;
  font-weight: 400;
  display: inline-block;
  text-decoration: none;
}
.save-sub {
  color: #ffffff;
  font-size: 20pt;
  margin: -20px 0 0 0;
  text-decoration: none;
}
/*MAtch Height*/
.match-height-15 {
  height: 15%;

}

/* RIBBON */
.ribbon {
  position: absolute;
  top: 50px;
  height: 195px;
  width: 200px;
  right: 20px;
  text-align: center;
  border-right:100px solid #93328e;
  border-left:100px solid #93328e;
  border-bottom:30px solid transparent;
}
@media screen and (max-width: 771px){
  .ribbon, .save-tab {
    display: none;
  }
  /* .navbar { 
    height: 110px !important;
  } */
}
@media screen and (min-width: 771px){
  .save-bar {
    display: none;
  }
}
/* END RIBBON */
.free-tab {
  position: absolute;
  height: 50px;
  width: 200px;
  padding: 15px;
  margin-right: 50px;
  right: 50px;
  border-radius: 0px 0px 15px 15px;
  text-align: center;
}
.free-tab a {
  text-decoration: none;
}
.free {
  position: relative;
  color: #ffffff;
  font-size: 1.5em;
  line-height: 22pt;
  top: -7px;
  font-weight: 400;
  display: inline-block;
  text-decoration: underline;
}
@media (max-width:768px) {
  .free-tab {
    margin-right: 33px;
  }
}

.free-circle-box {
  border: 3px solid #ffffff;
  border-radius: 50%; 
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 140px 10px 10px 83px;
}
.free-circle {
  position: relative;
  top: 35px;
  text-align: center;
  color: #ffffff !important;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 28pt;
}
.free-circle-mobile {
  position: relative;
  top: 30px;
  text-align: center;
  color: #ffffff !important;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 28pt;
}
.free-circle-box-mobile {
  border: 3px solid #ffffff;
  border-radius: 5px 5px 5px 5px; 
  max-width: 400px;
  height: 100px;
  position: inherit;
  margin: auto;
}
.free-circle:hover {
  text-decoration: underline;
}
@media only screen and (min-width: 1360px) {
  .free-circle-box {
    border: 3px solid #ffffff;
    border-radius: 50%; 
    width: 250px;
    height: 250px;
    position: absolute;
    margin: 120px 10px 10px 130px;
  }
  .free-circle {
    top: 55px;
    font-size: 3em;
    font-weight: 400;
    line-height: 32pt;
  }
}
@media only screen and (min-width: 1560px) {
  .free-circle-box {
    border: 3px solid #ffffff;
    border-radius: 50%; 
    width: 300px;
    height: 300px;
    position: absolute;
    margin: 110px 10px 10px 160px;
  }
  .free-circle {
    top: 65px;
    font-size: 3.5em;
    font-weight: 400;
    line-height: 36pt;
  }
}
@media only screen and (max-width: 981px) {
  .free-circle-box {
    display: none;
  }
}
@media only screen and (min-width: 981px) {
  .free-circle-box-mobile {
    display: none;
  }
}
@media only screen and (max-width: 431px) {
  .free-circle-mobile {
    font-size: 2em;
  }
}
/* CARDS */
.card-border {
  transition: 0.3s;
  border-radius: 5px;
  border: 2px solid #7a7a7a;
  background-color: #2c2c30;
  height: auto;
  width: auto; 
  margin: 0 auto !important;
} 
/* .card {
  transition: 0.3s;
  border-radius: 5px;
  border: 2px solid #7a7a7a;
  background-color: #2c2c30;
  height: 100% !important;
  margin: 10px 0px;
}
.card-body {
  padding: 2px 16px;
}
.card-image {
  padding: 30px 10px 10px;
}
.card-row {
  display: flex;
}

@media screen and (max-width:997px){
  .card-list {
    flex-wrap: wrap;
    display: inline;
  }
  .pc-card {
    height: 165px;
    max-width: 325px;
  }
  .pc-card-md {
    min-width: 325px;
  }
}
@media screen and (min-width: 997px){
  .pc-spacer1 {
    display: none;
  }
}
*/
/* TABLES */
td, th {
	vertical-align: middle;
}

@media only screen and (max-width: 760px) {
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
    tr {
      margin: 0 0 1rem 0;
    }
      td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
      }
      .mobile-head {
        font-weight: bold;
        background-color: #f5ae3c !important;
      }
    }


.mask-black-fade:not(.no-mask) .container:after {
	background: rgba(0, 0, 0, .2);
}


/* BIO */
.bio .read-more {
	cursor: pointer;
}
.bio.open .read-more {
	display: none;
}
.bio .hidden-content {
	display: none;
}
.bio.open .hidden-content {
	display: inline;
}
.bio .read-less {
	display: none;
}
.bio.open .read-less {
	display: inline;
	text-decoration: underline;
	cursor: pointer;
}
.bio {
  text-align: left !important;
  padding-bottom: 15px;
}


.text-left-center, .text-right-center {
  text-align:center;
}


/* TESTIMONIALS / QUOTES */
.ss-hero-quote blockquote:before {
  content: "\f10d";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  left: -65px;
  top: 20%;
  padding-left: 20px;
  font-size: 30pt;
  color: #f5ae3c;
  text-shadow: none;
  font-weight: 600;
}
.ss-hero-quote blockquote:after {
  content: "\f10e";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  right: -65px;
  top: 20%;
  padding-right: 20px;
  font-size: 30pt;
  color: #f5ae3c;
  text-shadow: none;
  font-weight: 600;
}
.tc-hero-quote blockquote:before {
  content: "\f10d";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  left: -65px;
  top: 20%;
  padding-left: 20px;
  font-size: 30pt;
  color: #bad600;
  text-shadow: none;
  font-weight: 600;
}
.tc-hero-quote blockquote:after {
  content: "\f10e";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  right: -65px;
  top: 20%;
  padding-right: 20px;
  font-size: 30pt;
  color: #bad600;
  text-shadow: none;
  font-weight: 600;
}
.tc-hero-quote blockquote, .pc-hero-quote blockquote, .ss-hero-quote blockquote  {
  position: relative;
  color: #ffffff;
  text-align: center;
  padding: 1% 3% 1% 3%;
  font-size: 16px;
  width: 80%;
  margin: 0 auto;
}
.pc-hero-quote blockquote:before {
  content: "\f10d";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  left: -65px;
  top: 20%;
  padding-left: 20px;
  font-size: 30pt;
  color: #6EC8BA;
  text-shadow: none;
  font-weight: 600;
}
.pc-hero-quote blockquote:after {
  content: "\f10e";
  font-family: "Font Awesome 6 Pro";
  position: absolute;
  right: -65px;
  top: 20%;
  padding-right: 20px;
  font-size: 30pt;
  color: #6EC8BA;
  text-shadow: none;
  font-weight: 600;
}


hr {
  border-top: 2px solid #7a7a7a;
}

.Question {
  font-size: 18px !important;
  line-height: 26px !important;
}

/* BUTTONS */
.disabled-button, .disabled-button:hover, .disabled-button a:hover  {
  background-color: grey;
  opacity: 0.7;
  color: black !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.orange-button  {
  background-color: transparent;
  border: 2px solid #F5AE3C !important;
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.orange-button:hover, .orange-button:active, .orange-button:focus {
  background-color: #f5ae3c !important;
  border: 2px solid #F5AE3C !important;
}
.teal-button  {
  background-color: transparent;
  border: 2px solid #6EC8BA !important;
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.teal-button:hover, .teal-button:active, .teal-button:focus {
  background-color: #6EC8BA !important;
  border: 2px solid #6EC8BA !important;
}
.purple-button-alt {
  background-color: #83328e;
  border: 2px solid #93328e !important;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.purple-button-alt:hover, .purple-button-alt:active, .purple-button-alt:focus {
  background-color: black !important;
  border: 2px solid black !important;
  color: #ffffff;
}
.purple-button  {
  background-color: transparent;
  border: 2px solid #93328e !important;
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.purple-button:hover, .purple-button:active, .purple-button:focus {
  background-color: #93328e !important;
  border: 2px solid #93328e !important;
}
.green-button  {
  background-color: transparent;
  border: 2px solid #bad600 !important;
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;
}
.green-button:hover, .green-button:active, .green-button:focus {
  background-color: #bad600 !important;
  border: 2px solid #bad600 !important;
}
.white-button  {
  background-color: transparent;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  border: none;
  border-radius: 3px;
  letter-spacing: .36px;
  margin:8px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  cursor: default !important;

}
.white-button:hover, .white-button:active, .white-button:focus {
  background-color: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: #F5AE3C !important;
}

/* TABLES */
.ex-schedule td {
  color: #ffffff;
  padding: 10px;
  text-align: left;
}



/* ICONS */
.orangeSquare {
  background-color: #f5ae3c !important;
    color: #ffffff;
    padding: 8px;
    margin: 0 5px 15px 0px;
    border-radius: 3px;
}
.greenSquare {
  background-color: #bad600 !important;
    color: #ffffff;
    padding: 8px;
    margin: 0 5px 15px 0px;
    border-radius: 3px;
}
.tealSquare {
  background-color: #6EC8BA !important;
    color: #ffffff;
    padding: 8px;
    margin: 0 5px 15px 0px;
    border-radius: 3px;
}
.listStyle li:before {
  color: #000000 !important;
}

/*Homepage*/
.homepage-hero {
  background-image: url(//static.abeka.com/abeka-events/images/homepage-bkg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 120px 0px !important;
}
.event-box {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  opacity: .8;
  transition: .25s;
}
.event-box:hover {
  opacity: 1;
  transition: .25s;
}
.event-box img {
  max-width: 200px;
}
@media (min-width: 768px) {
 .event-box {
  width: 33%;
  height: 450px;
}
.event-box img {
  max-width: 250px;
}
}
  
/* MODAL STYLES */
.modal-content{
  padding: 0 40px 40px;
}
.modal-backdrop{
  z-index: 999998 !important;
}

.modal-title {
  font-size: 25px;
  background-color: transparent !important;
}
body.isMobile .modal {
  background: transparent;
  padding: 25% 2% !important; 
}
body.isMobile .modal-content .modal-body {
  top: 0px;
  margin: 50px 0 0;
}


@media only screen and (max-width: 700px) {
  .nav .menu-item a {
    padding: 20px 10px;
    font-size: 16px;
  }
  .nav {
    padding: 30px 10px;
    background-color: #2c2c30;
  }
  .ss-logo {
    max-width: 300px !important;
    text-align: center;
  }
  .tc-logo, .pc-logo {
    max-width: 450px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 400px) {
  .ss-logo {
    max-width: 250px !important;
    text-align: center;
  }
  .tc-logo {
    max-width: 300px !important;
    text-align: center;
  }
}
@media only screen and (max-width: 580px) {
  .pc-logo {
    max-width: 100% !important;
    text-align: center;
  }
}
.ss-logo {
  max-width: 400px;
  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, .5));
}
.tc-logo, .pc-logo {
  max-width: 450px;
  padding-top: 20px;
  padding-bottom: 20px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .5));
}

h3.ui-state-default {
  background-color: #545454 !important;
  color: #ffffff !important;
  border: 2px solid #7a7a7a !important;
}
.img-mask.img-circle, .img-mask-mdall.img-circle {
  border-radius: 100%;
  border:none !important;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

@media screen and (min-width:768px) {
  
  .text-left-center {
   text-align:left !important;
  }
  .text-right-center {
    text-align: right !important;
  }
}