/* Initial Positions for theme elements */
.back-to-school-theme #back-to-school .characters.init-state,
.back-to-school-theme #back-to-school .title-block.init-state {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

.back-to-school-theme #back-to-school .title-block.init-state #dot {
    bottom:-1200px;
}

.back-to-school-theme #back-to-school .title-block.init-state #train {
    left:-1229px;
}

.back-to-school-theme #dot,
.back-to-school-theme #train {
    -webkit-transition-property: bottom, left, right, opacity, scale;
    -moz-transition-property: bottom, left, right, opacity, scale;
    -ms-transition-property: bottom, left, right, opacity, scale;
    -o-transition-property: bottom, left, right, opacity, scale;
    transition-property: bottom, left, right, opacity, scale;

    -webkit-transition-duration: .95s;
    -moz-transition-duration: .95s;
    -ms-transition-duration: .95s;
    -o-transition-duration: .95s;
    transition-duration: .95s;

    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Clouds float by */
@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: animateCloud 105s linear infinite;
	-moz-animation: animateCloud 105s linear infinite;
	animation: animateCloud 105s linear infinite;

	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.x2 {
	-webkit-animation: animateCloud 90s linear infinite;
	-moz-animation: animateCloud 90s linear infinite;
	animation: animateCloud 90s linear infinite;

	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x3 {
	-webkit-animation: animateCloud 100s linear infinite;
	-moz-animation: animateCloud 100s linear infinite;
	animation: animateCloud 100s linear infinite;

	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x4 {
	-webkit-animation: animateCloud 88s linear infinite;
	-moz-animation: animateCloud 88s linear infinite;
	animation: animateCloud 88s linear infinite;

	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

/* OBJECTS */

.cloud, .cloud3 {
	background: url('../images/cloud-1.png');
	height: 70px;
	position: relative;
	width: 200px;
}

.cloud:after, .cloud:before {
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	height: 70px;
	left: 50px;
	top: -50px;
	width: 200px;
}

.cloud:before {
	width: 200px;
	height: 70px;
	right: 50px;
	top: -90px;
}

.cloud2, .cloud4 {
	background: url('../images/cloud-2.png');
	height: 55px;
	position: relative;
	width: 170px;
}

.cloud:after, .cloud:before {
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	height: 55px;
	left: 50px;
	top: -50px;
	width: 170px;
}

.cloud:before {
	width: 170px;
	height: 55px;
	right: 50px;
	top: -90px;
}

/* Loaded Theme Styles */
.back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer{
    margin-bottom: 0px;
    background: url('../images/bg.png');
    background-position: center 160px;
    background-size:100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top:0;
    position:absolute;
}

.back-to-school-theme .scroll-panel.theme-section #theme-stage {
    margin-bottom: 0px;
    background: #00b8f1;
    background-size:100%;
    width: 100%;
    height: 100%;
    top:0;
    position:absolute;
}

.back-to-school-theme #back-to-school{
    position: absolute;
    width: 750px;
    left: 50%;
    margin-left: -375px;
    bottom: 0;
    top: 0;
}

.back-to-school-theme .title-block{
    width: 850px;
    height: 406px;
    background-size: 100%;
    position: absolute;
    bottom: 275px;
    right: -314px;
    z-index:2;
}

.back-to-school-theme .character-stage{
    position: absolute;
}

.back-to-school-theme #dot{
    right: 240px;
    max-width: 130px;
    bottom: -244px;
    z-index: 2;
}
.back-to-school-theme #train{
    left: -320px;
    max-width: 950px;
    top: 100px;
}
.back-to-school-theme #mobile-school{
    right: 0px;
    max-width: 800px;
    bottom: 0px;
    display:none;
}
.back-to-school-theme #platform{
    left: -256px;
    right: auto;
    min-width: 1240px;
    bottom: -22px;
}
.back-to-school-theme .character-stage .character{
    width: 100%;
}

/* show circles */

.back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
    width: 360px;
    height: 386px;
    background-size: 100%;
    position: absolute;
    bottom: 79px;
    right: 189px;
    z-index:3;
}

.back-to-school-theme .show-area {
    height: 119px;
    max-width: 900px;
    margin: 5% auto 0 auto;
    position: relative;
}

.back-to-school-theme .image-holder {
	width: 100%;
	height: 359px;
	position: absolute;
	top: 0;
}

.back-to-school-theme .show-area-front {
    position: absolute;
    left: 0;
    right: 0;
    height: 119px;
    width: 322px;
    z-index: 100;
    top: -20px;
}

.back-to-school-theme .show-character {
	position: absolute;
	width: 95px;
	height: 95px;
	float: left;
	left: 0;
	z-index: 50;
    border-radius: 50%;
}

.back-to-school-theme .circle-backs {
    position: absolute;
    height: 119px;
    width: 322px;
    left: 0px;
    top: -30px;
}

.back-to-school-theme .circle-background {
    background: #F6E5EB;
    border-radius: 50%;
    position: absolute;
    height: 95px;
    width: 95px;
    top: 12px;
}

.back-to-school-theme .linkers {
	position: absolute;
	height: 95px;
	width: 322px;
    top: -19px;
}

.back-to-school-theme .character-linker {
  border: 5px solid #fff;
  border-radius: 50%;
  position: absolute;
  width: 86px;
  height: 86px;
  cursor: pointer;
  z-index: 100;
}

/* Media Queries */

@media only screen and (min-width: 1601px) {

}
@media only screen and (max-width: 1600px)  {
    .back-to-school-theme #dot {
        bottom: -104px;
    }
}
@media only screen and (max-width: 1380px) {
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 220px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
    .back-to-school-theme #dot {
        right: 300px;
        max-width: 120px;
        bottom: -164px;
        z-index: 2;
    }
}
@media only screen and (max-width: 1025px) {
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 460px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
    .back-to-school-theme #train {
        left: -220px;
        max-width: 760px;
        top: 180px;
    }
    .back-to-school-theme #dot {
        right: 350px;
        max-width: 110px;
        bottom: -154px;
        z-index: 2;
    }
    .back-to-school-theme #platform {
        left: -116px;
        right: auto;
        min-width: 1000px;
        bottom: 37px;
    }
    .back-to-school-theme .show-character {
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }
    .back-to-school-theme .character-linker {
        width: 75px;
        height: 75px;
    }
    .back-to-school-theme .circle-background {
        height: 75px;
        width: 75px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        width: 257px;
        height: 323px;
        right: 255px;
    }
    .back-to-school-theme .show-area-front {
        width: 257px;
    }
    .back-to-school-theme .linkers {
        width: 257px;
    }
    #back-to-school > div > div > div.linkers > a:nth-child(2),
    #back-to-school > div > div > div.show-area-front > div.image-holder > div:nth-child(2),
    #back-to-school > div > div > div.circle-backs > div:nth-child(2){
        left:93px !important;
    }
    #back-to-school > div > div > div.linkers > a:nth-child(3),
    #back-to-school > div > div > div.show-area-front > div.image-holder > div:nth-child(3),
    #back-to-school > div > div > div.circle-backs > div:nth-child(3){
        left:183px !important;
    }
}
@media only screen and (max-width: 775px) {
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround,
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .characters,
    .back-to-school-theme #dot,
    .back-to-school-theme #train {
        display:none;
    }
    .back-to-school-theme #mobile-school {
        display: block;
        left: -290px;
        max-width: 1100px;
        bottom: -310px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        background: none;
    }
}
@media only screen and (max-width: 601px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        left: -260px;
        max-width: 920px;
        bottom: -530px;
    }
}
@media only screen and (max-width: 500px) {
      .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        left: -150px;
        max-width: 724px;
        bottom: -370px;
    }
}
@media only screen and (max-width: 480px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -266px;
        left: -141px;
        max-width: 600px;
    }
}


@media only screen and (min-width: 1601px) and (max-height: 1200px) {
    .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 841px;
	}
}
@media only screen and (max-width: 1600px) and (max-height: 1200px) {
    .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 841px;
	}
}
@media only screen and (max-width: 1380px) and (max-height: 1200px) {
     .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 841px;
	}
}
@media only screen and (max-width: 1025px) and (max-height: 1200px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 841px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 211px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
}
@media only screen and (max-width: 775px) and (max-height: 1200px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 841px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -408px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        background: none;
    }
}
@media only screen and (max-width: 601px) and (max-height: 1200px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -507px;
    }
}
@media only screen and (max-width: 500px) and (max-height: 1200px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -377px;
    }
}
@media only screen and (max-width: 480px) and (max-height: 1200px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -257px;
    }
}


@media only screen and (min-width: 1601px) and (max-height: 1010px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 794px;
    }
}
@media only screen and (max-width: 1600px) and (max-height: 1010px) {
    .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 794px;
	}
}
@media only screen and (max-width: 1380px) and (max-height: 1010px) {
     .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 794px;
	}
}
@media only screen and (max-width: 1025px) and (max-height: 1010px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 794px;
    }
}
@media only screen and (max-width: 775px) and (max-height: 1010px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 794px;
    }
}
@media only screen and (max-width: 601px) and (max-height: 1010px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
}
@media only screen and (max-width: 500px) and (max-height: 1010px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
}
@media only screen and (max-width: 480px) and (max-height: 1010px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
}


@media only screen and (min-width: 1900px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 690px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 112px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
}
@media only screen and (max-width: 1899px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 690px;
    }
}
@media only screen and (max-width: 1600px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 690px;
	}
}
@media only screen and (max-width: 1380px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
	 	min-height: 690px;
	}
    .back-to-school-theme #train {
        top: 160px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        bottom: 19px;
    }
    .back-to-school-theme #platform {
        left: -216px;
        min-width: 1180px;
        bottom: 8px;
    }
}
@media only screen and (max-width: 1025px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 690px;
    }
    .back-to-school-theme #train {
        top: 240px;
    }
}
@media only screen and (max-width: 775px) and (max-height: 888px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 690px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -480px;
    }
}
@media only screen and (max-width: 601px) and (max-height: 888px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
}
@media only screen and (max-width: 500px) and (max-height: 888px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -377px;
    }
}
@media only screen and (max-width: 480px) and (max-height: 888px) {
    .home .theme-section #theme-stage .theme-big-active{
        display:block;
    }
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -259px;
    }
}


@media only screen and (min-width: 1900px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme #platform {
        bottom: -172px;
    }
    .back-to-school-theme #train {
        top: 166px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        bottom: 13px;
    }
    .back-to-school-theme #platform {
        bottom: -80px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 62px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
}
@media only screen and (max-width: 1899px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme #train {
        top: 158px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        bottom: 20px;
    }
    .back-to-school-theme #platform {
        left: -230px;
        min-width: 1200px;
        bottom: -31px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        margin-bottom: 0px;
        background: url(../images/bg.png);
        background-position: center 42px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        top: 0;
        position: absolute;
    }
}
@media only screen and (max-width: 1601px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme #dot {
        max-width: 100px;
    }
}
@media only screen and (max-width: 1380px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme #train {
        top: 203px;
        left: -240px;
        max-width: 810px;
    }
    .back-to-school-theme #dot {
        right: 360px;
    }
    .back-to-school-theme #platform {
        left: -169px;
        min-width: 1090px;
    }
     .back-to-school-theme .show-character {
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }
    .back-to-school-theme .character-linker {
        width: 75px;
        height: 75px;
    }
    .back-to-school-theme .circle-background {
        height: 75px;
        width: 75px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        width: 257px;
        height: 323px;
        right: 253px;
        bottom: 46px;
    }
    .back-to-school-theme .show-area-front {
        width: 257px;
    }
    .back-to-school-theme .linkers {
        width: 257px;
    }
    #back-to-school > div > div > div.linkers > a:nth-child(2),
    #back-to-school > div > div > div.show-area-front > div.image-holder > div:nth-child(2),
    #back-to-school > div > div > div.circle-backs > div:nth-child(2){
        left:93px !important;
    }
    #back-to-school > div > div > div.linkers > a:nth-child(3),
    #back-to-school > div > div > div.show-area-front > div.image-holder > div:nth-child(3),
    #back-to-school > div > div > div.circle-backs > div:nth-child(3){
        left:188px !important;
    }
}
@media only screen and (max-width: 1025px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme #train {
        top: 225px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage .static-surround {
        bottom: 28px;
    }
    .back-to-school-theme #dot {
        right: 450px;
        bottom: -194px;
    }
    .back-to-school-theme #platform {
        left: -109px;
        min-width: 960px;
        bottom: -9px;
    }
}
@media only screen and (max-width: 776px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 530px;
    }
    .back-to-school-theme .scroll-panel.theme-section #theme-stage #cloud-layer {
        background: none;
    }
    .back-to-school-theme #mobile-school {
        bottom: -549px;
    }
}
@media only screen and (max-width: 601px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
}
@media only screen and (max-width: 500px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -396px;
    }
}
@media only screen and (max-width: 480px) and (max-height: 715px) {
    .back-to-school-theme .scroll-panel.theme-section {
        min-height: 635px;
    }
    .back-to-school-theme #mobile-school {
        bottom: -266px;
    }
}