/*
Template Name: Ivana - Under Construction Template
Author: ThemeManiac
*/

body {font-family: 'Roboto Condensed', Arial;}

.wrapper {width: 800px; margin: 0 auto;}
.main-frame{position: absolute; top: 40%; width: 100%;}
.main{background: url(../img/main-bg.png) repeat-x; width: 100%; position: absolute; }
.top-main{padding: 9px 0px 0px 23px; margin-left: 38px; width: 86px; height: 20px; background: #ffffff; font-family: 'GnuolaneFree', Arial, Tahoma; color: #fff; font-size: 13px; margin-bottom: 1px;}
.main-text{ color: #fff;  background: transparent; width: 150px;  padding-left: 59px; margin-top: 0px; position: absolute; margin-top: -65px; z-index: 3; line-height: 19px; font-family: 'GnuolaneFree', Arial; font-size: 15px; text-transform: uppercase;}

h1 {color: #fff; font-size: 45px; background: transparent; width: 300px;  padding-left: 59px; margin-top: 0px; position: absolute; margin-top: -65px; z-index: 3; line-height: 19px; font-family: 'GnuolaneFree', Arial; text-transform: uppercase;}
h2 {color: #fff; font-size: 15px; background: transparent; width: 300px;  padding-left: 59px; margin-top: 0px; position: absolute; margin-top: -35px; z-index: 3; line-height: 19px; font-family: 'GnuolaneFree', Arial; font-weight:normal;}
a {color: #ebebeb;}
a:hover {color: #ffffff; text-decoration:none;}
.main-text span {color:#ffffff; font-size: 18px;}

.navigation {float: left; margin-top: 10px}
#navigationpanel{position: relative; margin-left: 470px; z-index: 1}
div.menu-headline {display: none;}
#panel {position:absolute; left:-220px; width: 585px; /*450px;*/ height: 94px; background: url(../img/menu-bg.png) repeat; border-left: 1px dotted #4e4e4e;}
.panel_button { position: absolute; left:0px; width:19px; height: 18px; cursor: pointer; padding: 7px}
#panel ul{margin:0px 22px; padding-top: 2px; height: 100%}
#panel ul li{float: left; padding-right:15px; list-style: none; margin: 37px 0px 0px 15px; border-right: 1px solid #666666 }
#panel ul li.last{border-right: none}
#panel ul li a{font-family: 'GnuolaneFree', Arial, Tahoma; color: #fff; font-size: 13px; text-decoration: none; text-transform: uppercase;}
#panel ul li a:hover{color: #ff003c;}

.countdown{margin: auto; margin-top: 0px; margin-bottom: 10x; }
#logotitle{ color: #fff;  background: url(../img/countdown-bg.png) repeat; width: 335px; height: 94px; padding-left: 230px; position: absolute; z-index: 2;}
#logotitle2{ width: 350px; height: 94px; padding-left: 38px; }
.time{float: left;  margin-right: 20px; font-family: 'LeagueGothicRegular', Arial, SansationRegular; opacity: 1; }
.time span{font-size: 15px; font-family: 'LeagueGothicRegular', Arial, SansationRegular; text-transform: uppercase; line-height: 15px;}
.days{text-align: left; margin-top: 13px; padding-bottom: 0px; font-size: 61px; border-right: 1px dotted #666666; padding-right: 20px; line-height: 55px;}
.hours{text-align: left; margin-top: 13px; padding-bottom: 0px; font-size: 61px; border-right: 1px dotted #666666; padding-right: 20px; line-height: 55px;}
.minutes{text-align: left; margin-top: 13px; padding-bottom: 0px; font-size: 61px; border-right: 1px dotted #666666; padding-right: 20px; line-height: 55px;}
.seconds{text-align: left; margin-top: 13px; padding-bottom: 0px; font-size: 61px; line-height: 55px}


.contactf{float: left; font-size: 10px ; color: #fff; padding-top: 15px; padding-left: 0px;}
.contactf span{font-weight: 300; font-size: 11px; padding-left: 58px; font-family:arial; color:#a7a7a7;}
.contactf li{list-style: none;}
.contactf a{color: #a7a7a7; text-decoration: none;}
.contactf a:hover{color: #d5d5d5;}


.social-icons{float: left; padding-top: 12px; padding-left: 20px}
.social-icons ul li{float: left; margin-right: 15px; list-style: none}
.social-icons ul li img{opacity: 0.7}

.tipsy { padding: 5px; font-size: 11px; background-repeat: no-repeat; background-image: url(../img/tipsy.gif); margin-top: -25px; }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: #fff; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

  
#supersized-loader {background:url(../img/progress-black.gif) no-repeat center center;}
#controls-wrapper {border-right: #ff003c solid 10px; background:url(../img/footer-bg.png) repeat-x; }
#cboxContent{background: url(../img/page-bg.png) repeat;}
.colorbox-title {border-left: 0px solid #ffffff; color: #fff; border-bottom: 1px dotted #595959; margin-bottom: 10px; font-size: 18px}
.colorbox-inline-title {border-left: 0px solid #ffffff; color: #fff; border-bottom: 1px dotted #595959; padding: 10px 0px 5px 0px; font-size: 20px;text-transform:uppercase;}
#mcs_container .customScrollBox .content p{color:#fff; }
#mcs_container .customScrollBox .content p.alt{color:#fff}
#cboxLoadingOverlay{background:#000; }
#cboxLoadingGraphic{background:#000; }
#cboxOverlay{background:#000}
#cboxClose{ background:url(./images/close.png) no-repeat;}

.panel_button { 
padding-top:25px;
}
			
#progress-back{ background:url('../img/progress-back.png') repeat-x; }
#progress-bar{ background:url('../img/progress-bar.png') repeat-x; }
#slidecaption {color:#fff;}
#slidecounter {color:#fff;}

.panel2_button2 {background: #ffffff}
.hide_button2{background: none}


#banners {     
    position: absolute;
    bottom: 55px;
    text-align: center;
    left: 0px;
    right: 0px;
}

/* HOVERS */

.hover-text {
    color: #5f5f5f;
    margin-left: 50px;
    margin-top: 35px;
	padding-right: 50px;
	font-size: 11px;
	font-style: italic; 
	text-transform: uppercasee;
	text-align: center;
	line-height: 28px;
}

.hover-view {
    color: #fff;
    margin-left: 94px;
    margin-top: -3px;
	display: block;
	width: 28px;
	height: 28px; 
	background: url(../images/zoom.png) no-repeat center;
	font-size: 11px;
	text-transform: uppercasee;
	text-align: center;
	line-height: 28px;
}
.hover-view a{color: #fff; text-decoration: none}
.hover-view a:hover{color: #fff; text-decoration: underline}

.portfolio-hover {
    background: transparent;
    height: 100%;
    overflow: hidden;
    width: 220px;
	height: 125px;
    z-index: 99;
	position: absolute;
	top:0px; left:0px; right:0px; bottom:0px; 
	display: none;
	left: 0px;
	top: 0px
}

.hover-port{float: left; margin-right: 15px}
.hover-port p{font-size: 11px; color: #fff; width: 160px; padding-top: 10px}
.portfolio-line{margin: 20px 20px 0px 40px; float: left}
.portfolio-line p{font-size: 13px; color: #fff; padding: 5px 30px 10px 0px; font-weight:300; line-height: 1.3;}


div, span, p, a, button, img, span { outline: none;}

.vip img {
	-webkit-filter: blur(2px) grayscale(1) !important;
    filter: blur(2px) grayscale(1) !important;
}

.albumbox {
  	margin: 0px auto 20px;
  	left:0px;
  	right: 0px;
	overflow-y: auto;
    height: 130px;  	
}

.albumbox img {
	margin: 0 2% 2% 0%; /*15px 20px 6px 0px;*/
	width: 10%;
	padding: 0;
	float: left;
	border: 1px solid #bebebe;
}

.albumbox img:hover{
    opacity: .8;
  	-webkit-transition: all .2s ease;
  	-moz-transition: all .2s ease;
  	-o-transition: all .2s ease;
  	transition: all .2s ease;
}

.albumbox li {
    padding: 0;
  	margin: 0;
  	list-style-type: none;
}

.album { 
	display: inline-block;
    min-width: 80px;
    max-width: 100px;
  	width: 23%;
    text-align: center;
  	padding: 0 15px 30px 0;
	vertical-align: top;
}

.album img { 
	max-width: 100%; 
	border: 1px solid #333; 
}
.album a span { 
	text-transform: uppercase; 
	font-size: 11px; 
	color:#fff;
}
.album a:hover span { 
	color: #fff;
}

.btn-dark {
	cursor: pointer;
    margin-top: 10px;
	padding: 12px 25px;
	display: inline-block;
	background: #222;
	letter-spacing: 2px;
	font-weight: 400;
	color: #fff;
	font-size: 10px;
	line-height:12px;
	border:1px solid #fff;
    text-transform: uppercase;
	outline: none;
	position: relative;
	overflow:hidden;
    text-decoration: none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.btn-dark:hover {
	background: #fff;
	color: #003055;
    font-weight: 400;
    border: 1px solid #fff;
}

/* width : 1120px ----------- */
@media only screen and (max-width : 1120px),
only screen and (max-device-width : 1120px){

	#panel {width: 475px !important;}
	#colorbox {left: 0px !important;right: 0px;margin: 0px auto;}
}


/* width : 1000px ----------- */
@media only screen and (max-width : 1000px),
only screen and (max-device-width : 1000px){

	#panel div.menu-headline {text-transform: uppercase;background: url(../img/menu-icon.png) no-repeat center left;padding: 2px 0px 0px 25px;margin: 35px 20px;float: left;display: block;color: #fff;font-family: "GnuolaneFree",Arial,Tahoma;cursor: pointer;}
	#panel {height: auto;width: 100% !important;max-width: 165px;}
	#panel:after {background: rgba(0, 0, 0, 0) url("../img/main-bg.png") repeat scroll 0 0;position: absolute;content: '';width: 100%;height: 100%;left: 0px;top: 0px;bottom: 0px;z-index: -1;}
	#panel ul {display: none;clear: both;padding: 10px 20px;position: relative;}
	#panel ul li {border-right: 0px;border-bottom: 1px solid #666;float: none;display: block;margin: 0px;padding: 10px 0px;}
	#panel ul li a {display: block;}

	.panel_button {display: none !important;}
}


/* width : 820px ----------- */
@media only screen and (max-width : 820px),
only screen and (max-device-width : 820px){
	
	#controls-wrapper {height: auto !important;background-repeat: repeat !important;padding: }
	.contactf {display: block;clear: both;padding: 15px 5px !important;}
	.contactf span {padding-left: 5px;}
	/*#slidecaption {line-height: 30px !important;}
	#slidecounter {line-height: 30px !important;}
	#tray-button {margin-top: 10px !important;}*/

	#progress-back {display: none !important;}

	#slidecaption {display: none;}
	#slidecounter {display: none;}
	#tray-button {display: none;}
}


/* width : 785px ----------- */
@media only screen and (max-width : 785px),
only screen and (max-device-width : 785px){

	#colorbox {width: inherit !important;}
	#cboxWrapper, #cboxOverlay {width: 100% !important;}
	#cboxContent {width: 100% !important;background: none !important;}
	#cboxContent #about, #cboxContent #services, #cboxContent #rates, #cboxContent #gallery, #cboxContent #bookings {padding: 0px 30px;overflow-y: auto;height: 400px !important;}
	#cboxLoadedContent {width: 100% !important;background: url(../img/page-bg.png) repeat;margin-bottom: 0px !important;height: auto !important;}
	.colorbox-inline-title {width: inherit !important;margin: 10px 0px 0px 0px !important;float: none !important;}

	.portfolio-line {margin: 20px 0px 0px 0px !important;}
	.portfolio-line p {padding: 5px 0px 10px 0px !important;}

	.cboxIframe {margin-top: 45px !important;}
}


/* width : 650px ----------- */
@media only screen and (max-width : 650px),
only screen and (max-device-width : 650px){

	.main-frame {background: rgba(0, 0, 0, 0) url("../img/main-bg.png") repeat scroll 0 0;top: 0px;}
	#logotitle2 {display: none;}
	.main {background: none;display: block;padding: 20px 0px;position: relative;width: 100%;}
	.main a {text-decoration: none;}
	.main h1 {clear: both;display: block;line-height: 45px;margin: 0px auto;padding: 0px;position: relative;text-align: center;width: 100%;}
	.main h2 {clear: both;display: block;margin: 0px auto;position: relative;padding: 0px;width: 100%;text-align: center;}
	a#availability {top: 118px;}
	#navigationpanel {margin: 0px;position: relative;}
	#panel {max-width: 99% !important;}
	#panel div.menu-headline {margin: 10px 20px;}
}


/* width : 600px ----------- */
@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px){
	
	/*#controls-wrapper {height: 65px !important;}*/
}








/* width : 1120px ----------- */
@media only screen and (max-width : 1120px),
only screen and (max-device-width : 1120px){

	/*h1 {padding: 0px;text-align: center;}
	h2 {padding: 0px;text-align: center;}
	#logotitle2 {width: 262px;}
	#navigationpanel {margin-left: 300px;}
	.hide_button {left: auto !important;right: 30px;}
	#panel {width: auto;left: 0px !important;}

	*/
}