/*!
 *  Kwicks: Sexy Sliding Panels for jQuery - v2.2.1
 *  http://devsmash.com/projects/kwicks
 *
 *  Copyright 2013 Jeremy Martin (jmar777)
 *  Contributors: Duke Speer (Duke3D), Guillermo Guerrero (gguerrero)
 *  Released under the MIT license
 *  http://www.opensource.org/licenses/mit-license.php
 */
/*
 *  This file contains styles that are common to all kwicks instances.  Note that each kwicks instance requires
 *  additional styling - please see the examples for more info.
 */
.kwicks {
	display: block;
	list-style-type: none;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks > * {
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
.kwicks.kwicks-processed > * {
	margin: 0;
	position: absolute;
}
.kwicks-horizontal > * {
	float: left;
}
.kwicks-horizontal > :first-child {
	margin-left: 0;
}
.kwicks-vertical > :first-child {
	margin-top: 0;
}


.kwicks { width: 100%; height: calc(70vh); background: #000 }
.kwicks > li { height: 100%; margin-left: 0; float: left; position: relative; opacity: 0.5 }
.kwicks > li.kwicks-collapsed, .kwicks > li.kwicks-selected.kwicks-collapsed { opacity: 0.5 }
.kwicks > li.kwicks-expanded, .kwicks > li.kwicks-selected { opacity: 1 }
.grow-title { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding-top: 30px; padding-left: 30px; box-sizing: border-box; writing-mode:vertical-lr }
.kwicks > li h3 { position: absolute; bottom: 40px; right: 40px; opacity: 0; transition: all 0.5s }

.kwicks > li .grow-title, .kwicks > li.kwicks-collapsed .grow-title { opacity: 0; transition: all 0.5s }
.kwicks > li.kwicks-expanded .grow-title, .kwicks > li.kwicks-expanded h3 { opacity: 1; transition-delay: 0.5s }
.kwicks > li.kwicks-selected .grow-title, .kwicks > li.kwicks-selected h3 {  opacity: 1 }
.kwicks > li.kwicks-selected.kwicks-collapsed .grow-title, .kwicks > li.kwicks-selected.kwicks-collapsed h3 {  opacity: 0 }


@media ( max-width:800px ) {	
	.kwicks { height: calc(35vh) }
	.grow-title { padding-top: 10px; padding-left: 10px }
}