/*!
 *  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.
 */
 html,body{ height:100%;}
.kwicks {
	display: block;
	list-style-type: none;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	background:#000;
}
.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 > li {
height: 100%;
}
.kwicks-expanded {}

#panel-1 { background:url(<?= $room_7_3_webp ?>) no-repeat; background-position: 85% 50%; background-size: auto 105%;}
#panel-1 .inner_bg { width:100%; height:100%; background:#000; z-index:0; position:absolute; opacity:0.5;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#panel-1:hover .inner_bg {opacity:0;}
#panel-1 .logo_box {text-align:center; top:30%; position: relative; z-index:1; width:400px; margin:0 auto;}
#panel-1 .logo_box a {color: #fff;}
#panel-1 .logo_box img {width:300px; height:auto;}
#panel-1 .logo_box .title {width: 100%;}


#panel-2 { background:url(<?= $room_6_1_jgg ?>) no-repeat; background-position: 37% 0%; background-size: auto 104%;}
#panel-2 .inner_bg { width:100%; height:100%; background:#000; z-index:0; position:absolute; opacity:0.5;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#panel-2 .bg-1 {background-size: auto 104%;}
#panel-2:hover .inner_bg {opacity:0;}
#panel-2 .logo_box {text-align:center; top:30%; position: relative; z-index:1; width:400px; margin:0 auto;}
#panel-2 .logo_box a {color: #fff;}
#panel-2 .logo_box img {width:300px; height:auto;}
#panel-2 .logo_box .title {width: 100%;}



#panel-3 { background:url(<?= $room_10_1 ?>) no-repeat; background-position: 70% 0%; background-size: auto 104%;}
#panel-3 .inner_bg { width:100%; height:100%; background:#000; z-index:0; position:absolute; opacity:0.5;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#panel-3 .bg-2 {background-size: auto 105%;}
#panel-3:hover .inner_bg {opacity:0;}
#panel-3 .logo_box {text-align:center; top:30%; position: relative; z-index:1; width:400px; margin:0 auto;}
#panel-3 .logo_box a {color: #fff;}
#panel-3 .logo_box img {width:300px; height:auto;}
#panel-3 .logo_box .title {width: 100%;}

@media screen and (max-width: 1024px){
.kwicks {height: 50vh;}
#panel-1{background-position:75% 0%}
#panel-1 .logo_box {width: 60%;}
#panel-1 .logo_box .title{font-size:1.4em;line-height: 1em;}
#panel-1 .logo_box p {font-size:0.8em;}
#panel-1 .logo_box img {width: 100%;}

#panel-2{background-position:33% 0%}
#panel-2 .logo_box {width: 50%;top: 0%;}
#panel-2 .logo_box .title{font-size:1.4em;line-height: 1em;}
#panel-2 .logo_box p {font-size:0.8em;}
#panel-2 .logo_box img {width: 100%;}

#panel-3{background-position:33% 0%}
#panel-3 .logo_box {width: 50%;top: 10%}
#panel-3 .logo_box .title{font-size:1.4em;line-height: 1em;}
#panel-3 .logo_box p {font-size:0.8em;}
#panel-3 .logo_box img {width: 100%;}

}
@media screen and (max-width: 860px) {
    #panel-2 .logo_box {top: 10%;}
    #panel-3 .logo_box {top: 30%}
}

@media screen and (max-width: 479px) {
    #panel-2 .logo_box {top: 30%;}
    #panel-3 .logo_box {top: 30%}
}