/* CSS Document */

/* backgrounds */

.masterContainer {width:100%;height:350px;min-height:350px;position: relative;overflow: hidden;}

.animContainer {width:2120px;height:350px;margin:0 auto;position: relative;}

.masterPumpkin {width: 100%;height: 350px;z-index:8;}

.bg01 {width:100%;height:350px;z-index: 1;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/01_bgSkyAndMoon.png'); background-position: 50% 50%;background-size: cover;animation: aniBg01 5s alternate infinite linear;}

.bg02 {width:100%;height:350px;z-index: 1;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/01_bgSkyAndMoon_blue.png'); background-position: 50% 50%;background-size: cover; animation: aniBg02 5s alternate infinite linear;}

.bgBlack {width:100%;height:350px;z-index: 11;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/01_bgSkyAndMoon_black.png'); background-position: 50% 50%;background-size: cover; animation: aniBg03 5s alternate infinite linear;}

.thunder {width:100%;height:350px;z-index: 12;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/08_thunder.png'); background-position: 50% 50%;background-size: cover; animation: aniThunder 5s alternate infinite linear;}

/* ++ castle ++ */

.castle {width:100%;height:350px;z-index: 3;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/03_bgHillsAndCastle.png'); background-position: 50% 50%;background-size: cover;}

.castleLights {width:100%;height:350px;z-index: 4;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/09_castle_lights00.png'); background-position: 50% 50%;background-size: cover;animation: aniCastleLights 5s alternate infinite linear;}

/* ++ fog 01 ++ */

.firstFog {
	width:3840px;height:350px;z-index: 2;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/02_fogs_v2.png'); background-position: 50% 90%; overflow: hidden;background-size: 135%; background-repeat: no-repeat;
}

.anima01 {
  animation: move-left 6s infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

/* ++ fog 02 ++ */

.secondFog {
	width:3000px;height:350px;z-index: 5;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/04_fogs_v2.png'); background-position: 50% 100%; background-size: 135%; background-repeat: no-repeat;
}

.anima02 {
  animation: move-right 5s infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: linear;
}


/* ++ fog 03 ++ */

.thirdFog {
	width:5000px;height:350px;z-index: 10;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/07_fog_v2.png'); background-position: 50% 100%; background-size: cover; background-repeat: no-repeat; opacity: 0.8;
}

.anima03 {
  animation: move-center 6s infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}


/* ++ Pumpkins ++ */

.pumpkinsOn, .pumpkinsOff {
	width:100%;height:350px;position: absolute;top:0px;left:0px; background-position: 50% 50%;background-size: cover; 
}

.pumpkinsOn {
	background-image:url('/anibanner/imgs/3840x/06_pumpkins_LightsOff.png'); z-index: 8;
}


.pumpkinsOff {
	background-image:url('/anibanner/imgs/3840x/06_pumpkins.png'); z-index: 9;animation: aniBg02 5s alternate infinite linear;
}

.pumpkinsCutout {width:100%;height:350px;z-index: 7;position: absolute;top:0px;left:0px; background-image:url('/anibanner/imgs/3840x/05_yellowCutouts.png'); background-position: 50% 50%;background-size: cover;animation: aniSwapCutouts 5s alternate infinite linear;}


/* animations */

@keyframes aniBg01 {
	0% { opacity: 1; }
	45% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0; }
}

@keyframes aniBg02 {
	0% { opacity: 0; }
	45% { opacity: 0;}
	50% { opacity: 1;}
	100% { opacity: 1; }
}

@keyframes aniBg03 {
	0% { opacity: 0; }
	45% { opacity: 0;}	
	50% { opacity: 0.5;}
	55% { opacity: 0;}
	100% { opacity: 0; }
}

@keyframes aniThunder {
	0% { opacity: 0; }
	45% { opacity: 0;}	
	49% { opacity: 1;}
	51% { opacity: 1;}
	55% { opacity: 0;}
	100% { opacity: 0; }
}

@keyframes aniSwapCutouts {
	0% { background-image: url("/anibanner/imgs/3840x/05_yellowCutouts_neutral.png"); }
	49% { background-image: url("/anibanner/imgs/3840x/05_yellowCutouts_neutral.png"); }
	50% { background-image: url("/anibanner/imgs/3840x/05_yellowCutouts.png"); }
	100% { background-image: url("/anibanner/imgs/3840x/05_yellowCutouts.png"); }	
}

@keyframes aniCastleLights {
	0% { background-image: url("/anibanner/imgs/3840x/09_castle_lights00.png"); }
	37% { background-image: url("/anibanner/imgs/3840x/09_castle_lights00.png"); }
	38% { background-image: url("/anibanner/imgs/3840x/09_castle_lights01.png"); }
	42% { background-image: url("/anibanner/imgs/3840x/09_castle_lights02.png"); }
	46% { background-image: url("/anibanner/imgs/3840x/09_castle_lights03.png"); }
	50% { background-image: url("/anibanner/imgs/3840x/09_castle_lights04.png"); }
	54% { background-image: url("/anibanner/imgs/3840x/09_castle_lights05.png"); }
	100% { background-image: url("/anibanner/imgs/3840x/09_castle_lights05.png"); }
}

@keyframes move-left {
    0% { transform: translateX(-50px);opacity: 1; }
    50% { opacity: 0.8;}
    100% { transform: translateX(50px);opacity: 1; }
}

@keyframes move-center {
    0% { transform: translateX(100px); }
    100% { transform: translateX(-100px); }
}

@keyframes move-right {
    0% { transform: translateX(-100px);opacity: 0.8; }
    50% { opacity: 1;}
    100% { transform: translateX(100px);opacity: 0.8; }
}


/* eyes */

.massiveContainerToStoreTheEyesOhNoes { width:100%; height:350px; z-index: 7; position: absolute; }

.eyeContainer {
  	position: absolute;
    z-index:7;
}
.eye {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background: #ffff00;
}
.eye:after { /*pupil*/
  position: absolute;
  bottom: 17px;
  right: 10px;
  width: 10px;
  height: 12px;
  background: #680800;
  content: " ";
  border-radius:40%;
}

.one {left: calc(50% - 550px); top: 243px;}
.two {left: calc(50% - 513px); top: 242px;}
.three {left: calc(50% - 373px); top: 221px;}
.four {left: calc(50% - 333px); top: 218px;}
.five {left: calc(50% - 218px); top: 224px;}
.six {left: calc(50% - 153px); top: 225px;}
.seven {left: calc(50% + 298px); top: 244px;}
.eight {left: calc(50% + 338px); top: 240px;}

/* ++ Media Queries ++ */

@media only screen and (min-width: 320px) and (max-width: 991px){
    .animContainer {width:110%;height:300px;margin:0 auto;padding-left:140px}
    .masterBG {margin-left:-140px}
    .masterPumpkin {width: 1400px;height: 300px;margin-left: calc(50% - 700px);z-index:8;}
    .bg01 {height:300px; background-image:url('/anibanner/imgs/1400x/01_bgSkyAndMoon.png'); background-position: 0% 50%;}
    .bg02 {height:300px; background-image:url('/anibanner/imgs/1400x/01_bgSkyAndMoon_blue.png'); background-position: 0% 50%;}
    .bgBlack {height:300px; background-image:url('/anibanner/imgs/1400x/01_bgSkyAndMoon_black.png'); background-position: 50% 50%;}
    .thunder {height:300px; background-image:url('/anibanner/imgs/1400x/08_thunder.png'); background-position: 50% 50%;}
    .castle {height:300px; background-image:url('/anibanner/imgs/1400x/03_bgHillsAndCastle.png'); background-position: 50% 50%;}
    .castleLights {height:300px; background-image:url('/anibanner/imgs/1400x/09_castle_lights00.png'); background-position: 50% 50%;}
    .firstFog {width:1400px;height:300px;background-image:url('/anibanner/imgs/1400x/02_fogs_v2.png'); background-position: 0% 73%;}
    .secondFog {width:1400px;height:300px;background-image:url('/anibanner/imgs/1400x/04_fogs_v2.png'); background-position: 0% 100%;}
    .thirdFog {width:1400px;height:300px;background-image:url('/anibanner/imgs/1400x/07_fog_v2.png'); background-position: 0% 100%;}
    .pumpkinsOn, .pumpkinsOff {	height:300px;background-position: 50% 50%;}
    .pumpkinsOn { background-image:url('/anibanner/imgs/1400x/06_pumpkins_LightsOff.png'); }
    .pumpkinsOff { background-image:url('/anibanner/imgs/1400x/06_pumpkins.png');  }
    .pumpkinsCutout {height:300px;background-image:url('/anibanner/imgs/1400x/05_yellowCutouts.png'); background-position: 50% 50%;}
    .massiveContainerToStoreTheEyesOhNoes { height:300px; }    
    .eye {height: 15px;width: 15px;}
    .eye:after {bottom: 8px;right: 5px;width: 8px;height: 10px;}    
    .one {left: calc(50% - 467px); top: 215px;}
    .two {left: calc(50% - 434px); top: 212px;}
    .three {left: calc(50% - 320px); top: 195px;}
    .four {left: calc(50% - 280px); top: 194px;}
    .five {left: calc(50% - 182px); top: 197px;}
    .six {left: calc(50% - 124px); top: 199px;}
    .seven {left: calc(50% + 259px); top: 213px;}
    .eight {left: calc(50% + 293px); top: 211px;}    

    @keyframes aniSwapCutouts {
        0% { background-image: url("/anibanner/imgs/1400x/05_yellowCutouts_neutral.png"); }
        49% { background-image: url("/anibanner/imgs/1400x/05_yellowCutouts_neutral.png"); }
        50% { background-image: url("/anibanner/imgs/1400x/05_yellowCutouts.png"); }
        100% { background-image: url("/anibanner/imgs/1400x/05_yellowCutouts.png"); }	
    }

    @keyframes aniCastleLights {
        0% { background-image: url("/anibanner/imgs/1400x/09_castle_lights00.png"); }
        37% { background-image: url("/anibanner/imgs/1400x/09_castle_lights00.png"); }
        38% { background-image: url("/anibanner/imgs/1400x/09_castle_lights01.png"); }
        42% { background-image: url("/anibanner/imgs/1400x/09_castle_lights02.png"); }
        46% { background-image: url("/anibanner/imgs/1400x/09_castle_lights03.png"); }
        50% { background-image: url("/anibanner/imgs/1400x/09_castle_lights04.png"); }
        54% { background-image: url("/anibanner/imgs/1400x/09_castle_lights05.png"); }
        100% { background-image: url("/anibanner/imgs/1400x/09_castle_lights05.png"); }
    }
    
    @keyframes move-left {
        0% { transform: translateX(-25px);opacity: 1; }
        50% { opacity: 0.8;}
        100% { transform: translateX(25px);opacity: 1; }
    }

    @keyframes move-center {
        0% { transform: translateX(50px); }
        100% { transform: translateX(-50px); }
    }

    @keyframes move-right {
        0% { transform: translateX(-50px);opacity: 0.8; }
        50% { opacity: 1;}
        100% { transform: translateX(50px);opacity: 0.8; }
    }
}




@media only screen and (min-width: 992px) and (max-width: 1920px){

    .animContainer {margin-left: calc(50% - 960px);}

/*   .bg01 {background-image:url('/anibanner/imgs/1920x/01_bgSkyAndMoon.png');}
    .bg02 {background-image:url('/anibanner/imgs/1920x/01_bgSkyAndMoon_blue.png');}
    .bgBlack {background-image:url('/anibanner/imgs/1920x/01_bgSkyAndMoon_black.png');}
    .thunder {background-image:url('/anibanner/imgs/1920x/08_thunder.png');}
    .castle {background-image:url('/anibanner/imgs/1920x/03_bgHillsAndCastle.png');}
    .castleLights {background-image:url('/anibanner/imgs/1920x/09_castle_lights00.png');}
    .pumpkinsOn {background-image:url('/anibanner/imgs/1920x/06_pumpkins_LightsOff.png');}
    .pumpkinsOff {background-image:url('/anibanner/imgs/1920x/06_pumpkins.png');}
    .pumpkinsCutout {background-image:url('/anibanner/imgs/1920x/05_yellowCutouts.png');}
    .massiveContainerToStoreTheEyesOhNoes { height:350px; }    
    
    @keyframes aniSwapCutouts {
        0% { background-image: url("/anibanner/imgs/1920x/05_yellowCutouts_neutral.png"); }
        49% { background-image: url("/anibanner/imgs/1920x/05_yellowCutouts_neutral.png"); }
        50% { background-image: url("/anibanner/imgs/1920x/05_yellowCutouts.png"); }
        100% { background-image: url("/anibanner/imgs/1920x/05_yellowCutouts.png"); }	
    }

    @keyframes aniCastleLights {
        0% { background-image: url("/anibanner/imgs/1920x/09_castle_lights00.png"); }
        37% { background-image: url("/anibanner/imgs/1920x/09_castle_lights00.png"); }
        38% { background-image: url("/anibanner/imgs/1920x/09_castle_lights01.png"); }
        42% { background-image: url("/anibanner/imgs/1920x/09_castle_lights02.png"); }
        46% { background-image: url("/anibanner/imgs/1920x/09_castle_lights03.png"); }
        50% { background-image: url("/anibanner/imgs/1920x/09_castle_lights04.png"); }
        54% { background-image: url("/anibanner/imgs/1920x/09_castle_lights05.png"); }
        100% { background-image: url("/anibanner/imgs/1920x/09_castle_lights05.png"); }
    }*/

}