.changer {
  flex-direction: column;
}

#changingContent {
  padding-left: 0;
}


.solution-banner-sub-content h1:nth-child(2) {
  overflow: visible;
}

/* card moving animation */

.card-container .card-stack {
  width: 340px;
  height: 250px;
  position: absolute;
  right: 180px;
}

.card-container .card-stack .card-list {
  width: 300px;
}

.banner-card {
  transition: all 100ms ease-in-out;
  position: absolute;
  list-style: none;
  height: 300px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  background-size: cover;
}

#admission-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/admission/admission-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#fee-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/fee/fee-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#attendance-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/attendance/attendance-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#staff-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/studentstaff/staff-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#certificate-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/certificate/certificate-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#report-card-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/reportcard/report-card-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#library-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/library/library-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#app-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/app-mgmt/app-generator-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

#skiestag-img-container {
  position: relative;
  width: 385px;
  height: 464px;
  background: url("../images/skiestag/skiestag-banner@2x.png");
  background-size: cover;
  margin-right: 10px;
}

.card-img {
  width: 230px;
}

.card-container .card-stack .card-list li:nth-child(1) {
  top: 36px;
  left: 20px;
  width: 70%;
  border: none;
  opacity: 0.3;
}

.card-container .card-stack .card-list li:nth-child(2) {
  top: 36px;
  left: 20px;
  width: 70%;
  border: none;
  opacity: 0.6;
}

.card-container .card-stack .card-list li:nth-child(3) {
  top: 48px;
  width: 75%;
  border: none;
}

.app-card-container .card-stack {
  bottom: 165px;
}

.transformThis {
  animation: scaleDown 800ms;
  animation-timing-function: ease-in-out;
}

.transformPrev {
  animation: scaleUp 800ms;
  display: none;
  animation-timing-function: ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(50px);
    opacity: 0;
  }

  20% {
    transform: scale(1.15) translateY(40px);
    opacity: 0.1;
  }

  40% {
    transform: scale(1.1) translateY(30px);
    opacity: 0.2;
  }

  60% {
    transform: scale(1.05) translateY(20px);
    opacity: 0.4;
  }

  80% {
    transform: scale(1.01) translateY(10px);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  20% {
    transform: scale(1.01) translateY(20px);
    opacity: 0.8;
  }

  40% {
    transform: scale(1.05) translateY(40px);
    opacity: 0.4;
  }

  60% {
    transform: scale(1.1) translateY(60px);
    opacity: 0.2;
  }

  80% {
    transform: scale(1.15) translateY(80px);
    opacity: 0.1;
  }

  100% {
    transform: scale(1.2) translateY(100px);
    opacity: 0;
  }
}

@keyframes scaleCard {
  0% {
    top: 5px;
  }

  100% {
    top: 24px;
  }
}



.gallery {
  display:flex;
  justify-content: space-between;	
}

.leftContent {
	width:50%;
}

.rightContent {
	height:100vh;
	width:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.desktopContent {
	margin:auto;
}

.desktopContentSection {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:start;
  padding-top: 6rem;
}


.desktopPhotos {
	width:600px;
	height:600px;
	position:relative;
	overflow:hidden;
}

.desktopPhoto {
	position:absolute;
	width:100%;
	height:100%;
}


/* small screen / mobile layout */
.mobileContent {
	display:none;
	width:80vw;
}

.mobilePhoto {
	width:80vw;
	height:80vw;
	margin-top:5em;
	border-radius:6vw;
}

.mobilePhoto img, .desktopPhoto img{
  border-radius: 32px;
}


/* media querie starts here */

@media (max-width: 1366px) {

  #admission-img-container, #fee-img-container, #certificate-img-container, #attendance-img-container, #staff-img-container, #report-card-img-container, #library-img-container, #app-img-container {
    width: 320px;
    height: 385px;
  }

  .card-container .card-stack {
    width: 250px;
    height: 250px;
    right: 135px;
  }

  .desktopContentSection {
    padding-top: 3rem;
  }

  .desktopPhotos {
    width:460px;
  }

}

@media (max-width: 1280px) {

  .desktopPhoto img {
    width:400px;
  }

}

@media (max-width: 1024px) {

  .desktopContentSection {
    padding-top: 0;
  }

  .desktopPhotos {
    width:380px;
  }

}


@media (max-width: 820px) {

  /* Admission page */

  #admission-img-container, #fee-img-container, #certificate-img-container, #attendance-img-container, #staff-img-container, #report-card-img-container, #library-img-container, #app-img-container {
    width: 300px;
    height: 364px;
    margin-right: 0;
  }

  .card-container .card-stack {
    width: 280px;
    height: 280px;
    right: 102px;
  }

  .simplSec .accordion-active {
    border-bottom: none;
    border-radius: 24px;
  }

  .simplSec .accordion-sec {
    background: #FEF8F4;
    border-radius: 12px;
  }

  .simplSec .accordion-sec {
    background: #FEF8F4;
    border-radius: 12px;
  }

  .simplSec .simpl-inner h6 {
    font-weight: 500;
  }

  .left {
		display:none;
	}
	
	.right {
		height:auto;
		width:100%;
    display: flex;
    justify-content: center;
	}	
	
	.desktopPhotos {
		display:none;
	}

  .mobilePhoto {
    width: 60vw;
    height: 60vw;
  }

  .mobilePhoto:first-child {
    margin-top: 0;
  }

  .mobilePhoto:not(:first-child) {
    margin-top: 3rem;
  }
	
	.mobileContent {
    width: 90vw;
		display:block;
	}

  .gallery-content li {
    max-width: unset;
  }

}


/* defines styles for screens up to 599px wide */
@media screen and (max-width: 599px) {

	

}


@media (max-width: 576px) {

  .simplSec .accordion-active {
    padding: 2rem;
  }

  #admission-img-container, #fee-img-container, #certificate-img-container, #attendance-img-container, #staff-img-container, #report-card-img-container, #library-img-container, #app-img-container  {
    margin: 0 auto;
  }

 .report-card-container .card-stack {
    bottom: 80px;
    right: 102px;
  }

  .library-card-container .card-stack {
    bottom: 80px;
    right: 102px;
  }

  .app-card-container .card-stack {
    bottom: 50px;
    right: 102px;
  }


  .mobileContent {
    width: 90vw;
  }

  .mobilePhoto {
    width: 90vw;
    height: 90vw;
  }

  .admission-flow {
    grid-template-columns: repeat(1,1fr);
  }

}


@media (max-width: 430px) { 

}