.kwicks {
	height: 19.6em;
}
.kwicks > li {
	height: 100%;
	position:relative;
}



#panel-1  {
	
background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%), url(../images/sword1.jpg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2))), url(../images/sword1.jpg);
background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/sword1.jpg);
background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/sword1.jpg);
background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 5100%), url(../images/sword1.jpg);
background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/sword1.jpg);	

background-position: bottom, 60% center !important;
 
	}
 
#panel-1.kwicks-expanded {
    background-position: bottom, 77% center !important;
}



#panel-2  {
	
background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%), url(../images/karate1b.jpg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2))), url(../images/karate1b.jpg);
background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1b.jpg);
background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1b.jpg);
background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 5100%), url(../images/karate1b.jpg);
background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1b.jpg);	

background-position: bottom, 46% center !important;
 
	}
 
#panel-2.kwicks-expanded {
    background-position: bottom, 77% center !important;
}



#panel-3  {
	
background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%), url(../images/karate1c.jpg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2))), url(../images/karate1c.jpg);
background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1c.jpg);
background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1c.jpg);
background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 5100%), url(../images/karate1c.jpg);
background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/karate1c.jpg);	

background-position: bottom, 64% center !important;
 
}

#panel-3.kwicks-expanded {
    background-position: center center  !important;
}

#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    
    font-size: 1.5em;
    left: 5%;
    line-height: 1.2em; 
    top: 23%;
 
 
}

#panel-2 > h2 {
    font-size: 1.5em;
    left: 27%;
    line-height: 1.2em;
    top: 30%;
}

#panel-1 > p, #panel-2 > p, #panel-3 > p, #panel-4 > p, #panel-5 > p {
 
    font-size: 1em;
    left: 21%;
    line-height: 1.2em;    
    top: 45%;

}



#panel-1 > h2, #panel-1 > p, #panel-2 > h2, #panel-2 > p, #panel-3 > h2, #panel-3 > p, #panel-4 > h2, #panel-4 > p, #panel-5 > h2, #panel-5 > p { 
	font-family: oswald; position: absolute;
    margin: 0;
    padding: 0;	
	opacity: 0;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
	
	-webkit-transition: all 0.6s ease-in 0s;
	-moz-transition: all 0.6s ease-in 0s;
	-ms-transition: all 0.6s ease-in 0s;
	-o-transition: all 0.6s ease-in 0s;
	transition: all 0.6s ease-in 0s;
	}


#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.kwicks li > div {
    bottom: 4%;
    font-family: "Noto Sans";
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: 0.2em;
    opacity: 0;
	display:none;
    position: absolute;
    right: 4%;
    text-transform: uppercase;
}

.kwicks li > div a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.kwicks li > div a:hover { color:#4ACB0D;}

.kwicks li > div a::before {
    background-image: url("../images/button.png");
    background-size: cover;
    content: "GO";
    font-size: 1em;
    padding: 16px 13px 19px;
    position: relative;
    top: -2.8em;
	color:#FFFFFF;		
}

li.kwicks-expanded  > div { 
     display:inline-block; 
	-webkit-animation: showMe 1s forwards 0.8s;
	-moz-animation: showMe 1s forwards 0.8s;
	animation: showMe 1s forwards 0.8s;
	
	}

.kwicks li > div a:hover::before, .kwicks li > div a:focus::before {
   color:#4ACB0D; font-weight:bold;
}


#panel-1.kwicks-expanded > h2, #panel-1.kwicks-expanded > p, #panel-2.kwicks-expanded > h2, #panel-2.kwicks-expanded > p, #panel-3.kwicks-expanded > h2, #panel-3.kwicks-expanded > p, #panel-4.kwicks-expanded > h2, #panel-4.kwicks-expanded > p, #panel-5.kwicks-expanded > h2, #panel-5.kwicks-expanded > p {
	opacity:1;

	-webkit-transition: all 0.6s ease-in 0.2s;
	-moz-transition: all 0.6s ease-in 0.2s;
	-ms-transition: all 0.6s ease-in 0.2s;
	-o-transition: all 0.6s ease-in 0.2s;
	transition: all 0.6s ease-in 0.2s;

} 

.kwicks-collapsed h2, .kwicks-collapsed  p,  .kwicks-collapsed  div {display:none;}
 


#panel-4 {
	
background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%), url(../images/aikido1.jpg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2))), url(../images/aikido1.jpg);
background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/aikido1.jpg);
background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/aikido1.jpg);
background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 5100%), url(../images/aikido1.jpg);
background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/aikido1.jpg);	

background-position: bottom, 59% center !important;
 
	}
 
#panel-4.kwicks-expanded {
    background-position: bottom, 77% center !important;
}
#panel-5  {
	
background: -moz-linear-gradient(top,  rgba(69,72,77,0.2) 0%, rgba(0,0,0,0.2) 100%), url(../images/kobudo1.jpg);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.2)), color-stop(100%,rgba(0,0,0,0.2))), url(../images/kobudo1.jpg);
background: -webkit-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/kobudo1.jpg);
background: -o-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/kobudo1.jpg);
background: -ms-linear-gradient(top,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 5100%), url(../images/kobudo1.jpg);
background: linear-gradient(to bottom,  rgba(69,72,77,0.2) 0%,rgba(0,0,0,0.2) 100%), url(../images/kobudo1.jpg);	

background-position: bottom, 63% center !important;
 
	}
 
#panel-5.kwicks-expanded {
    background-position: center bottom, center center !important;
}


#panel-1, #panel-2, #panel-3, #panel-4, #panel-5 { 
	background-size: cover, cover !important;


	-webkit-transition: background-position 0.6s ease-in 0.2s;
	-moz-transition: background-position 0.6s ease-in 0.2s;
	-ms-transition: background-position 0.6s ease-in 0.2s;
	-o-transition: background-position 0.6s ease-in 0.2s;
	transition: background-position 0.6s ease-in 0.2s;
	
	}

#panel-1 {
	background-color: #53b388;
}
#panel-2 {
	background-color: #5a69a9;
}
#panel-3 {
	background-color: #c26468;
}
#panel-4 {
	background-color: #bf7cc7;
}
#panel-5 {
	background-color: #5a42a9;
}

[data-title]::after {
    bottom: 4.5em;
    color: #fff;
    content: attr(data-title);
    display: inline-block;
    font-family: oswald;
    font-size: 1.5em;
    letter-spacing: 0.07em;
    position: absolute;
    text-transform: uppercase;
	
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
    transform: rotate(90deg);
	
	-webkit-transform-origin: left bottom 0;
	-moz-transform-origin: left bottom 0;
	-ms-transform-origin: left bottom 0;
	-o-transform-origin: left bottom 0;
    transform-origin: left bottom 0;
	
	-webkit-transition: all 0.9s ease-in-out 0s;
	-moz-transition: all 0.9s ease-in-out 0s;
	-ms-transition: all 0.9s ease-in-out 0s;
	-o-transition: all 0.9s ease-in-out 0s;
	transition: all 0.9s ease-in-out 0s;	
	
}




/*480px*/
@media only screen and (min-width: 30.000em) {

#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    font-size: 1.8em;
}

	
.kwicks {height: 22.6em;}	

} /*480px*/
 
 
 
 /*620px*/
@media only screen and (min-width: 38.750em) {
#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    font-size: 2em;
}

#panel-2 > p {
    left: 33%;   
}
#panel-1 > p, #panel-2 > p, #panel-3 > p, #panel-4 > p, #panel-5 > p {
       top: 53%;
}
.kwicks {height: 23.2em;}


}  /*620px*/


 


/*768px*/
@media only screen and (min-width:48.000em){

#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    font-size: 3em;
}

#panel-1 > p, #panel-2 > p, #panel-3 > p, #panel-4 > p, #panel-5 > p {
    font-size: 1.7em;
    top: 49%;
}


#panel-1 {background-position:  bottom, 56% center !important;}		
#panel-2 {background-position:  bottom, 46% center !important;}		
#panel-3 {background-position:  bottom, 61% center !important;}	
#panel-4 {background-position:  bottom, 53% center !important;}
#panel-5 {background-position:  bottom, 59% center !important;}

.kwicks {height: 33.5em;}

}  /*768px*/


/*800px*/
@media only screen and (min-width:50.000em){
 
.kwicks {height: 43.5em;}

}  /*800px*/


/*1000px*/
@media only screen and (min-width:62.500em){

#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    font-size: 4.5em;
}

#panel-1 > p, #panel-2 > p, #panel-3 > p, #panel-4 > p, #panel-5 > p {
    font-size: 2.2em;
}

.kwicks {height: 46.2em;}	
	
}  /*1000px*/	



/*1280px*/
@media only screen and (min-width:80em){
	
#panel-1 {
    background-position:  bottom, 53% center !important;
}
#panel-2 {
    background-position:  bottom, 45% center !important;
}	
#panel-3 {
    background-position:  bottom, 64% center !important;
}
#panel-4 {
    background-position:  bottom, 55% center !important;
}
#panel-5 {
    background-position:  bottom, 60% center !important;
}
}  /*1280px*/
 


/*1920px*/
@media only screen and (min-width:120em){

#panel-1 > h2, #panel-2 > h2, #panel-3 > h2, #panel-4 > h2, #panel-5 > h2 {
    font-size: 5.5em;
}
#panel-1 > p, #panel-2 > p, #panel-3 > p, #panel-4 > p, #panel-5 > p {
    font-size: 3.2em;
}
	
#panel-1 {
    background-position:  bottom, 52% center !important;
}
#panel-2 {
    background-position:  bottom, 52% center !important;
}
#panel-3 {
    background-position:  bottom, 71% center !important;
}
#panel-4 {
    background-position:  bottom, 55% center !important;
}	
#panel-5 {
    background-position:  bottom, 66% center !important;
}

}  /*1920px*/

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
 

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

.kwicks{height: 16em;} 
 
}


/* keyframes */
 
@keyframes showMe {
 
	100% {
		opacity:1;
	}
}

@-webkit-keyframes showMe {
 
	100% {
		opacity:1;
	}
}

@-moz-keyframes showMe {
 
	100% {
		opacity:1;
	}
}
 


/* keyframes */
 
@keyframes learnMore {
 
	100% {
		display:block;
		opacity:1;
	}
}

@-webkit-keyframes learnMore {
 
	100% {
		display:block;
		opacity:1;
	}
}

@-moz-keyframes learnMore {
 
	100% {
		display:block;
		opacity:1;
	}
}