#banner{
		-webkit-font-smoothing: antialiased;
    	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
        width: 160px;
        height: 600px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
		left: -8px;
		top:-8px;
		-webkit-backface-visibility: hidden;
  		-moz-backface-visibility:    hidden;
  		-ms-backface-visibility:     hidden;
		background: -webkit-linear-gradient(#dddcdb, #ffffff,#ffffff, #dddcdb); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#dddcdb, #ffffff,#ffffff,#dddcdb); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#dddcdb, #ffffff,#ffffff,#dddcdb); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#dddcdb, #ffffff,#ffffff, #dddcdb); /* Standard syntax (must be last) */
		font-family: 'Signika Negative', sans-serif;
    }
    
    #banner img, #banner div{
     	position: absolute;
        opacity: 0;
    }
    
    #banner div {
        text-align: center;
        /*top:170px;*/ 
        /*width: 280px;*/ 
        /*margin-left:10px;*/  
    }

	   #banner #backgroundColor{
		  top:-550px;
		  left:-520px;
		  width: 550px;
          height: 550px;
		  -ms-transform: scale(2,2); /* IE 9 */
    	  -webkit-transform: scale(2,2); /* Safari */
    	  transform: scale(2,2);   
		  background: url(assets/greencover.svg) left center; 
		  opacity: 1;
	   }

	  	#banner #backgroundColorTwo{
		  top:-550px;
		  left:-520px;
		  width: 550px;
          height: 550px;
				-ms-transform: scale(2,2); /* IE 9 */
    	-webkit-transform: scale(2,2); /* Safari */
    	transform: scale(2,2);
			
		  background: url(assets/redcover.svg) left center; 
		  opacity: 1;
	   }
	
	   #banner #backgroundColorThree{
		  top:-550px;
		  left:-520px;
		  width: 550px;
          height: 550px;
		   		-ms-transform: scale(2,2); /* IE 9 */
    	-webkit-transform: scale(2,2); /* Safari */
    	transform: scale(2,2);
		   
		  background: url(assets/greencovertwo.svg) left center; 
		  opacity: 1;
	   }


   #banner #text1{
	   	top:100px;
	   	right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text2{
	   	top:135px;
	   	right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
      #banner #text2Next{
	   	top:170px;
	   	right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }




	#banner #characterOne{
		height:182px;
		width:300px;
		top: 420px;
		background: url(assets/mud.svg) left center; 
		z-index: 1;
		opacity: 1;
	}

	#banner #characterTwo{
		left:-15px;
		height:131px;
		width:99px;
		top:350px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		
		background: url(assets/dad.svg) left center; 
		z-index: 5;
		opacity: 1;
	}

	#banner #characterThree{
		top:355px;
		left:105px;
		height:131px;
		width:44px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		-webkit-backface-visibility: hidden;
		background: url(assets/mum.svg) left center; 
		z-index: 5;
		opacity: 1;
	}
	
	#banner #characterFour{
		left:70px;
		top:410px;
		height:38px;
		width:28px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		-webkit-backface-visibility: hidden;
		background: url(assets/baby.svg) left center; 
		z-index: 6;
		opacity: 1;
	}
	
	#banner #characterFive{
		left:-15px;
		height:131px;
		width:99px;
		top:350px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		background: url(assets/dadwings.svg) left center; 
		z-index: 1;
	}

	#banner #characterSix{
		left:70px;
		top:378px;
		height:103px;
		width:32px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		-webkit-backface-visibility: hidden;
		background: url(assets/kid.svg) left center; 
		z-index: 9;
	}
	
	#banner #characterSeven{
		top:-30px;
		left:-32px;
		height:95px;
		width:82px;
		background: url(assets/triangle1.svg) left center; 
		-ms-transform: scale(0.4,0.4); /* IE 9 */
    	-webkit-transform: scale(0.4,0.4); /* Safari */
    	transform: scale(0.4,0.4);
		z-index: 10;
		opacity: 1;
	}
	
	#banner #characterEight{
		left:18px;
		top:365px;
		height:115px;
		width:49px;
		-ms-transform: scale(0.8,0.8); /* IE 9 */
    	-webkit-transform: scale(0.8,0.8); /* Safari */
    	transform: scale(0.8,0.8);
		background: url(assets/grownupkid.svg) left center; 
		z-index: 9;
	}

	#banner #characterNine{
		left:59px;
		top:-5px;
		height:24px;
		width:55px;
		background: url(assets/triangle2.svg) left center; 
		z-index: 9;
		opacity: 1;
		-ms-transform: scale(0.6,0.6); /* IE 9 */
    	-webkit-transform: scale(0.6,0.6); /* Safari */
    	transform: scale(0.6,0.6);	
	}
	
   #banner #text3{
	   	top:100px;
	   	right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text4{
	   	top:135px;
	    right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }

   #banner #text5{
	   	top:170px;
	   	right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text6{
	   	top:180px;
	    width: 100%;
	    color: #095050;
        font-size: 20px;
	    z-index: 4;
	    text-align: center;
	    opacity: 1;
	   	-ms-transform: scale(0,0); /* IE 9 */
    	-webkit-transform: scale(0,0); /* Safari */
    	transform: scale(0,0);
	   
   }
	
   #banner #text7{
	   	top:205px;
	    width: 100%;
	    color: #095050;
        font-size: 20px;
	    z-index: 4;
	    text-align: center;
	    opacity: 1;
	   	-ms-transform: scale(0,0); /* IE 9 */
    	-webkit-transform: scale(0,0); /* Safari */
    	transform: scale(0,0);
	   
   }
	
   #banner #text8{
	   	top:255px;
	    width: 100%;
	    color: #095050;
        font-size: 20px;
	    z-index: 4;
	    text-align: center;
	   opacity: 1;
	   	-ms-transform: scale(0,0); /* IE 9 */
    	-webkit-transform: scale(0,0); /* Safari */
    	transform: scale(0,0);
	   
   }

 	#banner #strokeOutline{
		z-index: 99;
		position: absolute;
		opacity: 1;
		width: 158px;
		height: 598px;
		border:solid 1px black;
	}
	

	#banner #logoSmall {
		right:-19px;
		height:43px;
		width:167px;
		top:-6px;
		background: url(assets/CommunityLife_Life_LOGOsmall_german.svg) left center; 
		z-index: 20;
		-ms-transform: scale(0.78,0.78); /* IE 9 */
    	-webkit-transform: scale(0.78,0.78); /* Safari */
    	transform: scale(0.78,0.78);
		opacity: 1;
	}
	

    #banner #cta{
		position: absolute;
        font-size: 22px;
        text-align: center;
        background: #c53839;
        color: white;
        padding:6px 7px 8px 10px;
        bottom: 8px;
		font-weight: bold;
        right:-28px;
		z-index: 250;
		opacity: 1;
		-ms-transform: scale(0.7,0.7); /* IE 9 */
    	-webkit-transform: scale(0.7,0.7); /* Safari */
    	transform: scale(0.7,0.7);
    }
	
    #banner:hover #cta{
        background: #095050 ; 
        color: white;
    }

     #banner #bgexit {
         opacity: 1;
         cursor: pointer;
         z-index: 2101;
         width: 100%;
         height: 100%;
     }