/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 /* PROGRAM INITIALS */
 .flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
   justify-content: flex-start;
 }
 .flex-item-menu {
   border-left: 4px solid #515151;
   padding-left:10px;
   height: 40px;
   margin: 10px;
   font-size: 16px;
   line-height: 21px;
   cursor: pointer;
 }
 .flex-item-menu.active{
   font-weight: 700;
   border-left: 4px solid #c0b388;
 }
 .flex-item-menu.active span, h4#program-title {
   color:#e0607e;
 }
 .flex-item-menu span {
   color:#fff;
 }
 .flex-item {
     background-color: #ffffff;
     width: 80px;
     height: 80px;
     margin: 10px;
     padding:5px;
     color: #7f3a4a;
     font-size: 27px;
     font-weight: 700;
     cursor: pointer;
 }

 .flex-item span {
     bottom: -36px;
     left: 4px;
     position: relative;
 }
 .flex-item span.arrow {
     width: 15px;
     height: 15px;
     border-top: 3px solid #DEDBDD;
     border-right: 3px solid #B59BA1;
     top: -35px;
     left: 50px;
     position: relative;
     display: -webkit-box;
 }
 .flex-item:hover span.arrow {
     border-top: 3px solid #7f3a4a;
     border-right: 3px solid #7f3a4a;
 }
 .flex-item-desc {
     width: 0px;
     height: 60px;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     -webkit-transition: width 0.5s;
     transition: width 0.5s;
     text-indent: -9000em;
     margin-top: 20px;
     overflow: hidden;
 }
 .flex-item:hover + .flex-item-desc{
    width: 120px;
    text-indent: 0em;
 }

/* PROGRAM PAGE STYLES */
 body.single-cciprograms #nav-and-content{
	 padding-top: 1rem;
 }

 #program-slider{
   -webkit-transition: background-image 2s ease-in-out;
   transition: background-image 2s ease-in-out;
   margin-top: 1rem;
  }

  #program-slider .slider-content-item-info{
    float:right;
    position:relative;
    background:#181c25cc;
    padding:0px 20px 15px 20px;
    margin:30px;
    min-width:315px;
    max-width:345px;
  }

  @media only screen and (max-width: 767px){
    #program-slider .slider-content-item-info{
      margin:15px;min-width:initial;
    }
  }
  #program-slider .slider-content-item-info h3{
    color:#fff;font-size:25.5px;font-size:1.5rem;
  }
  #program-slider .slider-content-item-info p{
    color:#fff;
  }
  #program-slider .slider-content-item-info .learn-more{
    padding:5px 15px;margin-top:10px;float:right;clear:both; color: #fff; font-weight: 500;
  }
  #program-slider .slider-content-item-info .learn-more span{
    color:#fff;font-size:18.7px;font-size:1.1rem;margin-right:10px;font-weight:700;
  }
  #program-slider .slider-content-item-info .learn-more i{
    background:#9a8d71;width:18px;box-shadow:-1px -1px #27282f;font-size:18.7px;font-size:1.1rem;transition:all 0.3s ease;color:white;text-align:center;line-height:1.1rem;
  }
  #program-slider .slider-content-item-info .close-box {
    position: absolute;
    top: 5px;
    right: 12px;
    color: #9c9c9c;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}


 a.apply-button{
   float:right;
   background: #3d3f47;
   padding: 6px 20px;
   color: #ffffff;
   font-size:18px;
 }
 a.apply-button-sidebar, a.info-button-sidebar{
   float: left;
   background: #fafafa;
   padding: 14px 10px 14px 20px;
   color: #3f3f3f;
   font-size: 18px;
   width: 100%;
   text-align: left;
   border-bottom: 1px solid #ececf1;
 }
 a.apply-button-sidebar{
  background: #782f41;
 }
 a.apply-button-sidebar:hover{
  background: #923c51;
 }
 a.apply-button-sidebar strong{
     color: white;
     font-weight: 700;
     font-size: 18px;
 }
 a.apply-button-sidebar strong:hover{
    color: white;
 }
 a.info-button-sidebar{
   background: #fafafa;
   font-weight: 500;
 }
 a.info-button-sidebar:hover{
   text-decoration: none;
   background: rgba(236,236,241,.5);
;
 }
 a.button-sidebar.active{
   background: #a0a0a2;
   color: #ffffff;
   font-weight: 700;
   text-decoration: none;
 }

 a.button-sidebar.active:before{
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  padding-right: 10px;
 }

 .info-box h2.content-header{
   color: #9d5b6a;
   font-size: 1.9rem;
   margin-bottom:30px;
   margin-top:0px
 }

.program-item-menu {
  border-left: 4px solid #515151;
  padding-left:10px;
  margin: 10px 25px 10px 0px;
  font-size: 1.1rem;
  line-height: 21px;
  cursor: pointer;
}
.program-item-menu.active{
  font-weight: 700;
  border-left: 4px solid #c0b388;
}
.program-item-menu.active span, h4#program-title {
  color:#e0607e !important;
}
h4#program-title {
  margin-top:0;
}
.program-item-menu span {
  /*color:#fff;*/
}
.program-initials {
   margin: 0px 6px 10px 0px;
   padding: 5px;
   background-color: rgba(255,255,255,0);
}
.program-initials:hover {
  background-color: rgba(255,255,255,0.1);
  -moz-transition: background-color 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s ease-in-out;
  text-decoration: none;
}
 .program-initials-box {
   width: 72px;
   height: 80px;
   margin: 0px 10px 0px 0px;
   padding: 5px;
   color: #7f3a4a;
   font-size: 23px;
   font-weight: 700;
   cursor: pointer;
   background-color: transparent;
   perspective: 1000px;
   display: inline-block;
 }

 /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card */
 .program-initials-box-inner {
  position: absolute;
  width: 72px;
  height: 72px;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.program-initials:hover .program-initials-box .program-initials-box-inner {
  transform: rotateY(180deg);
}

.program-initials-box-front, .program-initials-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.program-initials-box-front {
  background-color: #ffffff;
  color: black;
}

.program-initials:hover .program-initials-box-front span{
  display:none;
}

.program-initials-box-back {
  background-color: #7f3a4a;
  color: white;
  transform: rotateY(180deg);
}

 .program-initials-box span {
    bottom: 2px;
    left: 10px;
    position: absolute;
 }
 .program-initials:hover .program-initials-box-back span {
    color: #fff;
 }
 .program-initials-box span.arrow {
   width: 15px;
   height: 15px;
   border-top: 3px solid #b17d89;
   border-right: 3px solid #7f3a4a;
   top: 9px;
   left: 48px;
   position: absolute;
   display: -webkit-box;
 }
 .program-initials-box-back span.arrow {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

 .program-initials-box-desc {
     width: 115px;
     color: #1a1a1a;
     font-weight: 500;
     -webkit-transition: width 0.5s;
     transition: width 0.5s;
     overflow: hidden;
     margin-top: 6px;
     line-height: 17px;     
     font-size: 0.95rem;
     vertical-align: top;
     display: inline-block;
 } 
 .program-initials-box-desc span{ color: #1a1a1a; }
 .ischool_home_programs .program-initials-box-desc span { color: #fff; }
 .ischool_home_programs .program-item-menu span  { color: #fff; }

/* PROGRAM BOX FOR ARCHIVES */
 .program-list-box{
   float: left;
   background: #181c25;
   padding: 18px 18px 15px 18px;
   min-height: 190px;
   width: 55%;
 }
 .program-list-title, .program-list-title a, .program-list-title a:visited{
   color: #fff;
   font-size: 1rem;
   margin-top: 0;
   font-weight:700;
 }

 /* PROGRAM BOX FOR ARCHIVES WITH HOVEREFFECT*/

 .hovereffect-program {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #b04259;
}
.hovereffect-program.simple {
    border: 1px solid #8e3949;
    height: 105px;
    background: none;
}
.hovereffect-program:hover {
	cursor: pointer;
}
.hovereffect-program .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  /*background-color: rgba(75,75,75,0.2);*/
  top: 0;
  left: 0;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hovereffect-program img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin:0 !important;
}

.hovereffect-program:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect-program h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 1.3rem;
  overflow: hidden;
  background-color: hsla(0, 0%, 0%, 0.5);
  margin: 0;
  font-weight: 700;
  padding: 5px 20px 2px;
  width: 100%;
}

.hovereffect-program.simple h2 {
    text-transform: none;
    color: #8e3949;
    background-color: inherit;
    font-weight: 500;
    font-size: 1.1rem;
}
.hovereffect-program h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.hovereffect-program.simple h2:after {
  background: #8e3949;
}

.hovereffect-program:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect-program a, .hovereffect-program p, .hovereffect-program .link_desc {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

.hovereffect-program:hover a, .hovereffect-program:hover p, .hovereffect-program:hover .link_desc  {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
@media only screen and (max-width: 51em){
  .hovereffect-program .link_desc {  opacity: 1; display: none; }
}

/* PROGRAM TITLE BOX IN PROGRAM PAGE */
.program-image-overlayer{
  background: #ffffff20;
  width: 100%;
  min-height: 340px;
 }
 #program-title-box{
   float: left;
   background: #181c25;
   padding: 10px 25px 20px 25px;
   min-height: 340px;
   width: 300px;
   background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, rgb(250 250 250) 100%);
   border-left: 4px solid #f5f5f5;
   border-bottom: 4px solid #f5f5f5;
   @media (min-width: 1400px){
    width: 340px;
   }
 }
 #program-title-box .programs-menu-box{  position: relative; }
 #program-title-box a.icon, #program-title-box a:visited.icon{ padding: 3px 0 0 5px;}
 #program-title-box a.icon:hover .dropdown-program-menu {  display: block; }
 #program-title-box a.icon:hover {  color: #ccc; }
 #program-title-box .flex-container{
   margin-bottom: 6px;
   margin-top: 15px;
 }
 #program-title-box .flex-item{
   margin-left:0;
 }
 #program-title-box .program-title{
   color: #434343;
   font-size: 1.6rem;
   font-weight: 300;
   margin-top: 0;
 }
 #program-title-box .program-title span{
  font-weight:700;
 }
 #programs-menu{
   position: absolute;
   left: 200px;
   top: 30px;
 }
 #programs-menu ul.dropdown-program-menu {
   position: absolute;
   background-color: #181c25;
   min-width: 200px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   padding-left: 0;
 }
 #programs-menu ul.dropdown-program-menu li{
   list-style-type: none;
   border-bottom: 1px solid #fff;
   margin: 0;
 }
 #programs-menu .dropdown-program-menu a {
     color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     font-size: 0.9rem;
 }

 #programs-menu .dropdown-program-menu a:hover { background-color: #353c4a; }

 @media only screen and (max-width: 39em){
   #pg-9002-0> .panel-row-style {
     background-position: 76% 85% !important;
   }
   #program-title-box{
     background: rgb(244 244 244 / 82%);
     padding: 10px 10px 20px 25px;
     min-height: 275px;
   }
   .program-image-overlayer{
    min-height: 275px;
   }
 }

/* FACULTY BOX STYLES IN PROGRAM PAGE */
 .faculty-box{
   padding: 0;
   background: #fff;
   -webkit-box-shadow: 9px -9px 0px -5px #ececec;
   -moz-box-shadow: 9px -9px 0px -5px #ececec;
   box-shadow: 9px -9px 0px -5px #ececec;
   height: 130px;
   margin-bottom: 1rem;
   overflow: hidden;
 }
 .faculty-box:hover{
   background: #eee;
   -webkit-box-shadow: 9px -9px 0px -5px #d6d6d6;
   -moz-box-shadow: 9px -9px 0px -5px #d6d6d6;
   box-shadow: 9px -9px 0px -5px #d6d6d6;
 }
 .faculty-box .team img {
    width: 62%;
    margin: 10px;
 }

 @media only screen and (max-width: 51em){
    .faculty-box{ height: auto; max-height: 150px; }
    .faculty-box .team img {
       width: 110px;
    }
 }
 .faculty-name{
     text-align: left;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 15px;
     margin: 15px 0 0;
     line-height: 17px;
 }
 .faculty-title{
   text-align: left;
   font-style: italic;
   margin: 0 0 1em;
   font-size: 0.72rem;
   line-height: 1.1;
 }
 .faculty-info{
   text-align: left;
   margin: 15px 0 1em;
   font-size: 0.9rem;
   line-height: 1.3;
 }
 .courses-list{
   text-align: left;
   margin: 0 0 1em -1em;
   font-size: 0.8rem;
   line-height: 1.1;
 }

/* PROGRAM FILTERS */

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

 .filter {
   margin: 30px 0 10px;
 	text-align: center;
 }

 .filter a {
     display: inline-block;
     padding: 10px;
     position: relative;
     margin-right: 20px;
     margin-bottom: 20px;
     background: #8e3949;
     color: white;
     font-weight: 700;
 }

 .filter a.active, .filter a:hover {
     background: #b13e52;
     text-decoration: underline;
     color: white;
 }

 .boxes {
   display: flex;
   flex-wrap: wrap;
 }

 .boxes a {
   width: 23%;
   border: 2px solid #333;
   margin: 0 1% 20px 1%;
   line-height: 60px;
 }

 .filter a.activeOLD:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   display: inline-block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 15px 15px 0 0;
   border-color: #333 transparent transparent transparent;
 }

 .is-animated {
   animation: .6s zoom-in;
 }

 @keyframes zoom-in {
   0% {
    transform: scale(.1);
   }
   100% {
     transform: none;
   }
 }