#banner{
		-webkit-font-smoothing: antialiased;
    	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
        width: 300px;
        height: 250px;
        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;
		  background: url(assets/greencover.svg) left center; 
		  opacity: 1;
	   }

	  	#banner #backgroundColorTwo{
		  top:-550px;
		  left:-520px;
		  width: 550px;
          height: 550px;
		  background: url(assets/redcover.svg) left center; 
		  opacity: 1;
	   }
	
	   #banner #backgroundColorThree{
		  top:-550px;
		  left:-520px;
		  width: 550px;
          height: 550px;
		  background: url(assets/greencovertwo.svg) left center; 
		  opacity: 1;
	   }


   #banner #text1{
	   	top:60px;
	   	right: 0px;
	    color: #fff;
        font-size: 26px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text2{
	   	top:103px;
	   	right: 0px;
	    color: #fff;
        font-size: 26px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
      #banner #text2Next{
	   	top:146px;
	   	right: 0px;
	    color: #fff;
        font-size: 26px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }

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

	#banner #characterTwo{
		left:5px;
		height:131px;
		width:99px;
		top:100px;
		background: url(assets/dad.svg) left center; 
		z-index: 5;
		opacity: 1;
	}

	#banner #characterThree{
		top:50px;
		left:95px;
		height:242px;
		width:84px;
		-webkit-backface-visibility: hidden;
		-ms-transform: scale(0.6,0.6); /* IE 9 */
    	-webkit-transform: scale(0.6,0.6); /* Safari */
    	transform: scale(0.5,0.5);	
		background: url(assets/mum.svg) left center; 
		z-index: 5;
		opacity: 1;
	}
	
	#banner #characterFour{
		left:83px;
		top:150px;
		height:38px;
		width:28px;
		-webkit-backface-visibility: hidden;
		background: url(assets/baby.svg) left center; 
		z-index: 6;
		opacity: 1;
	}
	
	#banner #characterFive{
		left:5px;
		height:131px;
		width:99px;
		top:100px;
		background: url(assets/dadwings.svg) left center; 
		z-index: 1;
	}

	#banner #characterSix{
		left:83px;
		top:128px;
		height:103px;
		width:32px;
		-webkit-backface-visibility: hidden;
		background: url(assets/kid.svg) left center; 
		z-index: 9;
	}
	
	#banner #characterSeven{
		top:0px;
		left:-30px;
		height:95px;
		width:82px;
		background: url(assets/triangle1.svg) left center; 
		z-index: 10;
		opacity: 1;
	}
	
	#banner #characterEight{
		left:35px;
		top:115px;
		height:115px;
		width:49px;
		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:60px;
	   	right: 0px;
	    color: #fff;
        font-size: 26px;
	    z-index: 4;
	    background: #1e786c;
       padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text4{
	   	top:103px;
	   	right: 0px;
	    color: #fff;
        font-size: 26px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }

   #banner #text5{
	   	top:146px;
	   	right: 0px;
	    color: #fff;
        font-size: 25px;
	    z-index: 4;
	    background: #1e786c;
        padding:4px 6px 4px 6px;
	    text-align: right;
   }
	
   #banner #text6{
	   	top:92px;
	    width: 100%;
	    color: #095050;
        font-size: 21px;
	    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:115px;
	    width: 100%;
	    color: #095050;
        font-size: 21px;
	    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:138px;
	    width: 100%;
	    color: #095050;
        font-size: 21px;
	    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: 298px;
		height: 248px;
		border:solid 1px black;
	}
	

	#banner #logoSmall {
		right:9px;
		height:43px;
		width:167px;
		top:3px;
		background: url(assets/CommunityLife_Life_LOGOsmall_german.svg) left center; 
		z-index: 20;
		-ms-transform: scale(1.1,1.1); /* IE 9 */
    	-webkit-transform: scale(1.1,1.1); /* Safari */
    	transform: scale(1.1,1.1);
		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:-25px;
		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%;
     }