#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;
    }

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

	  	#banner #backgroundColorTwo{
		  top:-550px;
		  left:-680px;
		  width: 550px;
          height: 550px;
		  -ms-transform: scale(1.8,1.8); /* IE 9 */
    	  -webkit-transform: scale(1.8,1.8); /* Safari */
		  transform: scale(1.8,1.8);
		  background: url(assets/redcover.svg) left center; 
		  opacity: 1;
	   }
	
	   #banner #backgroundColorThree{
		  top:-550px;
		  left:-680px;
		  width: 550px;
          height: 550px;
		  -ms-transform: scale(1.8,1.8); /* IE 9 */
    	  -webkit-transform: scale(1.8,1.8); /* Safari */
		  transform: scale(1.8,1.8);
		  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:5px 5px 5px 5px;
	    text-align: right;
   }
	
   #banner #text2{
	   	top:138px;
	    right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }
	
      #banner #text2Next{
	   	top:175px;
	    right: 0px;
	    color: #fff;
        font-size: 20px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }

	#banner #characterOne{
		height:143px;
		width:99px;
		top:300px;
		background: url(assets/chicken.svg) left center; 
		z-index: 1;
		opacity: 1;
		left:15px;
		-ms-transform: scale(1,2); /* IE 9 */
    	-webkit-transform: scale(1,2); /* Safari */
    	transform: scale(1.2,1.2);	
	}

	#banner #characterTwo{
		left:40px;
		height:98px;
		width:140px;
		top:445px;
		-ms-transform: scale(0.6,0.6); /* IE 9 */
    	-webkit-transform: scale(0.6,0.6); /* Safari */
    	transform: scale(0.6,0.6);	
		background: url(assets/teddy.svg) left center; 
		z-index: 5;
		opacity: 1;
	}

	#banner #characterThree{
		top:328px;
		left:-50px;
		width:250px;
		height: 162px;
		-ms-transform: scale(0.6,0.6); /* IE 9 */
    	-webkit-transform: scale(0.6,0.6); /* Safari */
    	transform: scale(0.6,0.6);	
		-webkit-backface-visibility: hidden;
		background: url(assets/computer.svg) left center; 
		z-index: 5;
	}
	
	
	#banner #characterSeven{
		top:-20px;
		left:-30px;
		height:95px;
		width:82px;
		background: url(assets/triangle1.svg) left center; 
		z-index: 10;
		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 #characterEight{
		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: 18px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }
	
   #banner #text4{
	   	top:135px;
	   	right: 0px;
	    color: #fff;
        font-size: 18px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }

   #banner #text5{
	   	top:170px;
	   	right: 0px;
	    color: #fff;
        font-size: 18px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }
	
    #banner #text5Next{
	   	top:205px;
	   	right: 0px;
	    color: #fff;
        font-size: 18px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }
	
    #banner #text5NextAgain{
	   	top:240px;
	   	right: 0px;
	    color: #fff;
        font-size: 18px;
	    z-index: 4;
	    background: #1e786c;
        padding:5px 5px 5px 5px;
	    text-align: right;
   }




   #banner #text6{
	   	top:200px;
	    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:225px;
	    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:230px;
	    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:-25px;
		height:43px;
		width:167px;
		top:-6px;
		background: url(assets/CommunityLife_Life_LOGOsmall_german.svg) left center; 
		z-index: 20;
		-ms-transform: scale(0.7,0.7); /* IE 9 */
    	-webkit-transform: scale(0.7,0.7); /* Safari */
    	transform: scale(0.7,0.7);
		opacity: 1;
	}
	
    #banner #cta{
		position: absolute;
        font-size: 22px;
        text-align: center;
        background: #c53839;
        color: white;
        padding:6px 3px 8px 10px;
        bottom: 8px;
		font-weight: bold;
        right:-27px;
		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%;
     }