/*

* Total Bali Villas

* Copyright 2013, Adwin Dwitaufani ( Rubicz )

* www.rubicz.com

*

* This Page is about basic styles of our website

*/



/*@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(http://fonts.googleapis.com/css?family=Raleway:400);*/



/* Clearfix */

.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

.clearfix {

    *zoom: 1;

}





/* #Navigation

================================================== */



body{

	width: 100%;

	position: relative;

	display: block;

	font-smooth: always;

	-webkit-font-smoothing: subpixel-antialiased;  	

	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

   	font-weight: 300;

   	overflow-x: hidden;

}



.wrapperx{

	margin: 0px auto;

	max-width: 1310px;

}



#navig #brand{

	float: left;

	width: 550px;

}



#navig #brand #logo{

	width: 100px;

	height: 101px;

	text-indent: -9999px;

	float: left;

	display: block;

	text-indent: -9999px;

	background: url("images/totalbali-logo.png");

	background-repeat: no-repeat;

	position: relative;

	margin-top: 20px;

	margin-bottom: 20px;

	margin-right: 15px;

}



#navig #brand h2{

	word-spacing: -2px;

	letter-spacing: -1px;

	text-transform: uppercase;

	font-size: 22px;

	line-height: 22px;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 700;

	color: #0093d0;

	text-decoration: none;	

	margin-top: 45px;

	float: left;

}



#navig #brand p{

	font-size: 12px;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 400;

	color: #333333;

	text-decoration: none;	

	float: left;

	margin-top: 7px;



}



#navig ul#menu{

	float: right;

	display: block;

	position: relative;

	margin-top: 60px;

}



#navig ul#menu li{

	display: inline;

}



#navig ul#menu li a{

	text-transform: uppercase;

	font-size: 15px;

	font-family: 'Alegreya Sans', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 500;

	color: #3c3a37;

	float: left;

	margin-left: 15px;

	text-decoration: none;

	padding: 5px 8px;

  	-webkit-transition: all 0.3s ease-out;

       -moz-transition: all 0.3s ease-out;

         -o-transition: all 0.3s ease-out;

            transition: all 0.3s ease-out;

}



#navig ul#menu li a:hover,

#navig ul#menu li a:active,

#navig ul#menu li a.selected{

	color: #ffffff;

	background: #3aa6d0;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

}



/* #Hidden Menu

================================================== */

#navz {

	height: 40px;

	width: 100%;

	background: #f8f8f8;

	font-size: 14px;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 400;

	position: relative;

	display: none;

	margin-bottom: 15px;

	border: 1px solid #eaeaea;

	clear: both;

}



#navz ul {

	padding: 0;

	margin: 0 auto;

}



#navz li {

	display: inline;

	float: left;

	margin: 0px;

}



#navz a {

	color: #777777;

	display: inline-block;

	width: 100px;

	text-align: center;

	text-decoration: none;

	line-height: 40px;

}



#navz li a {

	box-sizing:border-box;

	-moz-box-sizing:border-box;

	-webkit-box-sizing:border-box;

}



#navz li:last-child a {

	border-right: 0;

}



#navz a:hover, #nav a:active {

	background-color: #74ccf1;

	color: #ffffff;

}



#navz a.selected {

	background-color: #74ccf1;

	color: #ffffff;

}



#navz a#pull {

	display: none;

}



.warning{

	clear: both;

	margin-bottom: 40px;

	width: 96%;

	padding: 2%;

	background: #ffdfdf;

	color: #333333;

	border: 1px solid #ffa2a2;	

	font-weight: 400;

	font-family: 'Raleway', Helvetica, Verdana, Arial, sans-serif;

	font-size: 13px;

	line-height: 22px;	

	text-align: center;

	display: none;

}



.warning-success{

	clear: both;

	margin-bottom: 40px;

	width: 96%;

	padding: 2%;

	background: #e0fff4;

	color: #333333;

	border: 1px solid #5feeb7;	

	font-weight: 400;

	font-family: 'Raleway', Helvetica, Verdana, Arial, sans-serif;

	font-size: 13px;

	line-height: 22px;	

	text-align: center;

	display: none;

}



span.red{

	background: #bd0000;

	color: #ffffff;

	padding: 1px 5px;

	display: none;

	float: left;

	font-weight: 400;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-size: 12px;

	line-height: 13px;	

}



/* #Media ( Slideshow )

================================================== */

#slideshow{

	width: 100%;

	height: auto;

	clear: both;

	margin: 0px auto;

	position: relative;

	overflow: hidden;

	z-index: 5;

}



#slideshow a.caption{

	letter-spacing: -2px;

	position: absolute;

	left: 10%;

	bottom: 90px;

	text-transform: uppercase;

	font-size: 36px;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 700;	

	color: #ffffff;

	text-shadow: 0px 1px 1px #333;

	text-decoration: none;

	

}



.rslides {

  position: relative;

  list-style: none;

  overflow: hidden;

  width: 100%;

  padding: 0;

  margin: 0;

  }



.rslides li {

  -webkit-backface-visibility: hidden;

  position: absolute;

  display: none;

  width: 100%;

  left: 0;

  top: 0;

  margin: 0px;

padding: 0px;

  }



.rslides li:first-child {

  position: relative;

  display: block;

  float: left;

  }



.rslides img {

  display: block;

  height: auto;

  float: left;

  width: 100%;

  border: 0;

  margin: 0px;

padding: 0px;

  }





#slideshow .sld_nav{

	background: #0093d0;

	position: absolute;

	float: left;

	left: 10%;

	bottom:40px;

	z-index: 30;

	text-transform: uppercase;

	font-size: 13px;

	font-family: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

	font-weight: 700;

	text-decoration: none;

	color: #ffffff;		

	padding: 10px 15px;

	border-radius: 30px;

	-webkit-border-radius: 30px;

	-moz-border-radius: 30px;  

  	-webkit-transition: all 0.5s ease-out;

       -moz-transition: all 0.5s ease-out;

         -o-transition: all 0.5s ease-out;

            transition: all 0.5s ease-out;		

}



#slideshow .sld_nav:hover,

#slideshow .sld_nav:active{

	border-radius: 3px;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px; 

	border: none;  	

}



#slideshow .sld_nav.next{

	left: 15.5%;

}



/* #Responsive Normal

===================================================================== */

@media only screen and (min-width: 1245px) and (max-width: 1375px) {



.wrapperx{ max-width: 1135px; }



}



/* #Responsive Medium

===================================================================== */

@media only screen and (min-width: 960px) and (max-width: 1244px) {



.wrapperx{ max-width: 940px;}	



#navig #brand{

	float: left;

	margin-left: -100px;

	width: 550px;

}



#navig ul#menu{

	float: right;

	display: block;

	position: relative;

	margin-right: -100px;

}



#slideshow{

	clear: both;

	background: #eaeaea;

	height: auto;

}



#slideshow img{

	width: 100%;

	height: auto;	

	max-height: 550px;

}



#slideshow .sld_nav.next{

	left: 17.5%;

}





}





/* #Responsive iPad

===================================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {



.wrapperx{ 

	width: 760px;

}



#navig{

}

	

#navig #brand{

	float: none;

	margin: 0px auto;

	width: 430px;

}



#navig #brand #logo{

	float: none;

	margin: 0px auto;

	margin-top: 20px;

	margin-bottom: 20px;

}



#navig #brand h2{

	margin-top: 0px;

	float: left;

	clear: both;

	width: 100%;

	text-align: center;

}



#navig #brand p{

	margin-top: 7px;

	margin-bottom: 15px;

	float: left;

	clear: both;

	width: 100%;

	text-align: center;

}



#navig ul#menu{

	float: none;

	display: none;

	clear: both;

	position: relative;

	margin-top: 60px;

	margin: 0px auto;

	width: 490px;

	background: aqua !important;

	margin-bottom: 240px !important;

	margin-top: 100px !important;

	opacity: 0;

}



#slideshow{

	clear: both;

	background: #eaeaea;

	height: auto;

}



#slideshow img{

	width: 100%;

	height: auto;	

	max-height: 550px;

}	



#slideshow .sld_nav.next{

	left: 19%;

}





	/* #Navigation

	================================================== */	

	#navz {height: auto;display: block;}

  	#navz ul {width: 100%;display: none;height: auto;}

  	#navz li {width: 100%;float: left;position: relative;}

  	#navz li a {border-bottom: 1px solid #eaeaea;}

  	#navz a {text-align: left;width: 100%;text-indent: 25px;}

	#navz a#pull {display: block;background-color: #f8f9f9;color: #777777;width: 100%;position: relative;}

	#navz a#pull:after {content:"";background: url('images/nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;position: absolute;right: 15px;top: 10px;

	}

	

}



/* #Responsive iPad

===================================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	

.wrapper{ max-width: 440px; }	



#navig #brand{

	float: none;

	margin: 0px auto;

	width: 430px;

}



#navig #brand #logo{

	float: none;

	margin: 0px auto;

	margin-top: 20px;

	margin-bottom: 20px;

}



#navig #brand h2{

	margin-top: 0px;

	float: left;

	clear: both;

	width: 100%;

	text-align: center;

}



#navig #brand p{

	margin-top: -7px;

	float: left;

	clear: both;

	width: 100%;

	text-align: center;

}



#navig ul#menu{

	float: none;

	display: none;

	clear: both;

	position: relative;

	margin-top: 60px;

	margin: 0px auto;

	width: 490px;

	background: aqua !important;

	margin-bottom: 240px !important;

	margin-top: 100px !important;

	opacity: 0;

}



#slideshow{

	clear: both;

	background: #eaeaea;

	height: auto;

}



#slideshow img{

	width: 100%;

	height: auto;	

	max-height: 550px;

}	



#slideshow .sld_nav.next{

	left: 25%;

}



	/* #Navigation

	================================================== */	

	#navz {height: auto;display: block;}

  	#navz ul {width: 100%;display: none;height: auto;}

  	#navz li {width: 100%;float: left;position: relative;}

  	#navz li a {border-bottom: 1px solid #eaeaea;}

  	#navz a {text-align: left;width: 100%;text-indent: 25px;}

	#navz a#pull {display: block;background-color: #f8f9f9;color: #777777;width: 100%;position: relative;}

	#navz a#pull:after {content:"";background: url('images/nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;position: absolute;right: 15px;top: 10px;

	}



}