/* CSS Document */

/*  Milestones      
------------------------------------------------------------- */
#carouselExampleIndicators4,
#carouselExampleIndicators3,
#carouselExampleIndicators2,
#carouselExampleIndicators {
    border: 2px solid #94BEED;
    border-radius: 15px;
}
.carousel-control-prev,
.carousel-control-next {
    border-radius: 15px;
    color: #162E51;
}
#carouselExampleIndicators4 > .carousel-inner > .carousel-item,
#carouselExampleIndicators3 > .carousel-inner > .carousel-item,
#carouselExampleIndicators2 > .carousel-inner > .carousel-item,
#carouselExampleIndicators > .carousel-inner > .carousel-item {
    padding: 20px 17%;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card.hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.img-tantrum {
  cursor: pointer;
}
.image-container {
  position: relative;
  display: inline-block;
}
.image-container > .overlay-text {
  position: absolute;
  top: 0%;
  left: 0%;
  right:0%;
  bottom: 0%;
/*  transform: translate(-50%, -50%);*/
  color: white;
  background-color: rgba(0, 0, 0, 0.75); /* Transparent background for text */
  padding: 10px;
  border-radius: 5px;
}
.image-container > .overlay-text.coping-overlay {
  border-radius: 25px;
  font-size: 16px;
}
.image-container > .overlay-text.coping-overlay > h4 {
  font-size: 18px;
}
.image-container > .overlay-text.focused-overlay {
  border-radius: 25px;
  font-size: 18px;
}

.ab-feedback,
.ab-sit {
  border-radius: 25px;
  border:solid 1px #94BEED;
  margin-top: 25px;
}
.ab-h {
  border-bottom:solid 1px #94BEED;
  padding: 20px 10px;
}
.ab-q {
  padding: 20px;
}
.ab-q:hover,
.ab-q:focus {
  background: #EFEFEF;
}
.ab-ql {
  border-bottom-left-radius: 25px;
}
.ab-qr {
  border-bottom-right-radius: 25px;
}
.ab-correct:hover,
.ab-correct:focus,
.ab-correct {
  background: #94BEED;
}
.ab-wrong:hover,
.ab-wrong:focus,
.ab-wrong {
  background: #F8DFE2;
}
.contact {
  border-radius: 20px;
  border: 1px solid #162E51;
}
.contact-img {
  border-radius: 0 20px 20px 0;
}
.styles {
  border: solid 8px #172E51;
  background: #F6EFDE;
  border-radius: 25px;
  padding: 10px;
}
.styles-col {
  background: #172E51;
  color: #F6EFDE;
  border-radius: 10px;
  padding: 10px;
}
.emotions {
  border: solid 1px #015FA2;
  border-radius: 25px
}
.emotions-header {
  background: #015FA2;
  border-radius: 25px 25px 0 0;
}
.emotions-footer {
  background: #015FA2;
  border-radius: 0 0 25px 25px;
}
.emotions-row {
  background: #F8F4F2;
}
.emotions-col {
  background: #172E51;
  color: #F6EFDE;
  border-radius: 10px;
  padding: 10px;
}
.carousel-indicators {
  margin-top: 10px;
}
.talk-container {
  background: #102F52;
  border-radius: 15px;
  padding: 10px;
}
.talk-row {
  background: #2D1F21;
  padding: 10px;
}
.talk-tip-row {
  background: #fff;
  border: solid 1px #000;
}
.img-tips {
  height: 72px;
}
.prep-img {
  max-height: 75px;
}
.img-tantrum {
  border-radius: 10px;
}
.img-rounded {
  border-radius: 15px;
}

/* AT quiz
-------------------------------------------------- */
.question-container {
    border:  solid 2px #01649B;
    border-radius: 5px 5px 0 0;
    padding: 8px 5px;
    min-height: 320px;
}
.question-footer {
    background: #004277;
    color: white;
    border-radius: 0 0 5px 5px;
    padding: 8px 5px;
}
.question-body i {
    cursor: pointer;
}
.at-quiz-btn {
    color: #fff;
    background: transparent;
    border: none;
}

/* Extra large devices (large desktops)*/
/* No media query since the extra-large breakpoint has no upper bound on its width*/

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .overlay-text.time-overlay,
  .overlay-text.tantrum-overlay,
  .overlay-text.night-overlay {
    font-size: 16px;
    line-height: 18px;
  }
  /*.overlay-text.focused-overlay {
    font-size: 16px;
    line-height: 18px;
  }*/
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .discipline > button {
    font-size: 16px;
  }
  .overlay-text.time-overlay {
    font-size: 18px;
    line-height: 20px;
  }
}

@media only screen and (max-width: 770px) {

}
/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .contact-img {
    border-radius: 0 0 20px 20px;
  }
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .overlay-text {
    font-size: 16px;
    line-height: 18px;
  }
  .carousel-item > p {
    font-size: 14px;
    padding: 5px;
    line-height: 16px;
  }
}

/* custom*/
@media (max-width: 450px) {

}