/*
Theme Name: Mastenia - Premium form wizard landing page
Theme URI: http://www.ansonika.com/mastenia/
Description: Hotel Paradise is created by <a href="http://www.ansonika.com">Ansonika</a>.
Version: 1.0.0
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

CSS STRUCTURE:

1. SITE STRUCTURE
2.  PAGES AND CONTENT
3. MISC
4. MEDIA QUERIES

/*============================================================================================*/
/* 1. SITE STRUCTURE */
/*============================================================================================*/

/* #Site Header
================================================ */
header{background: #fff; width:100%; padding:15px 0 5px 0; }
#top-msg{background: url(../../img/webform/bg_msg.png) repeat-x; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);box-shadow: 3px 3px 3px rgba(0,0,0,0.3); margin-bottom:20px; color:#CCC; line-height:16px;}
#top-msg-wp{ padding:15px 15px 0 15px;}

#top-msg a{ color:#fff; }

#top-nav ul{ float:right; margin-top:25px;  margin-right:-10px; font-weight:bold; font-size:12px;}
#top-nav ul a { color:#7d7d7d; text-decoration:none;}
#top-nav ul a:hover, #top-nav ul a#active{ color:#323232;}
#top-nav ul li {background:url(../../img/webform/menu_footer_divider.png) left center no-repeat; float:left; padding-left:10px; margin-right:10px }
#top-nav ul li:first-child{ background:none;}
#shadow {background: url(../../img/webform/shadow_top.png) repeat-x 0 0; height:4px; width:100%; position:absolute; left: 0; top:0; z-index:99}
#shadow_2 {background: url(../../img/webform/shadow_bottom.png) repeat-x 0 0; height:4px; width:100%; position:absolute; left: 0; bottom:0; z-index:99}

#top-nav ul li a#purchase { color: #C33;}
#top-nav ul li a#purchase:hover { color:#323232;}

/* Button Responsive Menu*/
.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin:  0px 0 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.show{display:block!important}

/* #Site Footer
================================================ */
footer {border-top: 2px solid #ddd; padding-top:10px; margin-top:30px; margin-bottom:30px;}	
.copy { font-size:12px; padding-top:10px;text-align:right;}

/* #Content
================================================ */
#content_1, #content_2, #content_3, #content_4 { padding-top:40px}
#content_1 article, #content_2 article { margin-bottom:25px !important;}

#form_area { background: transparent/*url(/images/bg2.png)*/ /*no-repeat*/ top center; width:100%; height:100%; /*background-color:#629cb2;*/ padding: 30px 0; position:absolute; color:#fff; border-bottom: 0px solid #CCC; /*border-top: 4px solid #CCC*/}
#form_area_reserv { background: url(../../img/webform/blur_2.jpg) no-repeat top center; width:100%; padding: 60px 0; position:relative; color:#fff; border-bottom: 4px solid #CCC; border-top: 4px solid #CCC}
#form_area_survey { background:#356070; width:100%; padding: 60px 0; position:relative; color:#fff; border-bottom: 4px solid #CCC; border-top: 4px solid #CCC}

.container2 { background: url(../../img/webform/white_bg_15.png) repeat; padding:30px; }
.box { border-top: 4px solid #CCC}
.box a {background:#f6f6f6 top right; height:90px; text-align:center; padding-top:30px; margin-bottom:20px; width:100%; display:block; -webkit-transition: background .6s ease;-moz-transition: background .6s ease;-ms-transition: background .6s ease; -o-transition: background .6s ease;transition: background .6s ease;}
.box a:hover {background:#c9eaee url(../../img/webform/plus_corner.png) no-repeat bottom right;}
.about_strip { text-align:center;}

h3.question { font-size:16px; font-weight:600; padding-bottom:10px; border-bottom:3px double #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.4); color:#fff; margin-bottom:20px; display:inline-block; line-height:20px; width:100%;}

/*============================================================================================*/
/* 2. PAGE AND CONTENT */
/*============================================================================================*/
.button-back { float: left; }
.button-next { float: right; }
a.button-back, a.button-next {text-decoration:none; color:#fff; }
.button-back, .button-next {
	 color: #fff; cursor: pointer; padding: 8px 20px; text-decoration: none; background: /*#f37410*/ url(../../img/webform/button_bg9.png) repeat-x 0 0; font-weight:700;
	-khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /*border-top: 1px solid #fac068; border-left: 1px solid #fac068;*/
	-moz-box-shadow: 1px 2px  2px rgba(0,0,0,0.3);-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.3);box-shadow: 1px 2px 2px rgba(0,0,0,0.3); text-shadow: 1px 1px 1px rgba(0,0,0,.4); font-size:12px;}
	
.ie10 .button-back, .ie10 .button-next { border-radius: 0;}
.button-back:hover, .button-next:hover{color: #333; text-shadow: 1px 1px 1px rgba(255,255,255,.8); text-decoration: none; }

.step {clear: left;   background:url(../../img/webform/white_bg_15.png) repeat; padding:30px 60px; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}

.step label { text-align:justify; font-weight:lighter; color: #fff; display: block; margin-bottom:3px;  /*text-shadow: 1px 1px 1px rgba(0,0,0,.4);*/ position:relative; font-size:100%; line-height:110%;}
.step legend { font-size:11px}

/* BUBBLE */
/*.jfk-bubble {
  background: url("../images/bg-input.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  margin-right: 40px;
  border-bottom: solid 1px #ccc;
  border-radius: 4px;
  position: absolute;
  z-index: 1201 !important;
  padding: 16px;
  line-height: 17px;
  display: none;
  opacity: 0;
  left: 365px;
  top: 455px;  
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  color: white;
}*/

.jfk-bubble {
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid;
  border-color: #bbb #bbb #a8a8a8;
  */
  background: url("../images/bg-input.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  margin-right: 80px;
  border-bottom: solid 1px #ccc;
  border-radius: 4px;
  position: absolute;
  z-index: 1201 !important;
  padding: 11px;
  /*width: 205px;*/
  line-height: 12px;
  display: none;
  opacity: 0;
  left: 320px;
  top: 456px;  
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  /*-webkit-transition: all 0.218s;*/
  /*transition: all 0.218s;*/
  color: white;
}


.jfk-bubble.active {
  display: block;
  opacity: 1;
}

/* bubble arrow */
.jfk-bubble-arrow {
  position: absolute;
  top: 20px;
}
.jfk-bubble-arrow:after, .jfk-bubble-arrow:before{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}
.jfk-bubble-arrow:before {
  border: 8px solid;
  border-color: transparent #999;
  top: -8px;
}
.jfk-bubble-arrow:after {
  border: 9px solid;
  border-color: transparent #bbb;
  top: -9px;
}

.jfk-bubble-arrowright {
  left: -9px;
}
.jfk-bubble-arrowright:after,  .jfk-bubble-arrowright:before{
  border-left-width: 0;
}


.error-image { background: #111 url('../img/alert.png') no-repeat right top;}
ul.stepy-titles { margin:0; padding:0;}
.stepy-titles { list-style: none; margin: 0; padding: 0; width: 126%;  color:#fff; margin-bottom:0; height:40px; }
.stepy-titles li:first-child {margin-left:0;}
.stepy-titles li { /*cursor: pointer;*/ float: left; padding: 7px 20px; background:url(../../img/webform/white_bg_30.png) repeat-x left bottom; font-weight:500; margin-bottom:0px;  margin-left:2px; position:relative; font-size:16px; }
.stepy-titles li span { font-size:11px; display: block; font-weight:normal; }
.stepy-titles .current-step { cursor: auto; background:url(../../img/webform/white_bg_15.png) repeat-x; padding: 7px 20px;  }

input.error{ border-bottom:1px solid #C00}
label.error {background: #333 url(../../img/webform/alert.png) no-repeat 5px 5px; color: #fff; display: block; float: left; font-size: 11px ; height: 20px; padding: 6px 10px 0px  25px;  font-weight:400; margin:8px 5px 0 0; -khtml-border-radius: 5px; -moz-border-radius: 5px; -opera-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-clip: border-box;}
.ie10 label.error {border-radius: 0; }
input[type="submit"].finish:hover, input[type="submit"].finish:active {color: #333; text-shadow: 1px 1px 1px rgba(255,255,255,.8);}


/*============================================================================================*/
/* 3. MISC */
/*============================================================================================*/
.magnify_2{ background:url(../../img/webform/zoom_1.png) no-repeat 50% 50%; display:none; height:92%; left:0; position:absolute; top:0; width:100%; z-index:999; text-align:center; line-height:160px; font-weight:600; font-size:11px; color:#fff; }
.pictures div{ position:relative}
.line{ border-left:1px dotted  #ccc; padding-left:35px;}

/* list bullets*/
ul.list_3{ margin-left:10px; margin-bottom:20px;}
ul.list_3 li{background:url(../../img/webform/tick_1.png) no-repeat left 3px;line-height:18px;padding-left:20px;}

/*============================================================================================*/
/* 4. MEDIA QUERIES */
/*============================================================================================*/


/* Tablet Portrait size to standard 960 (devices and browsers) ================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.step {padding:30px 45px; }
select { width:85%;}

.jfk-bubble {
  left: 270px;
  margin-right: 70px;
}
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#form_area, #form_area_reserv, #form_area_survey { padding: 30px 0;}

.step {padding:30px ; }
input.long{ width:93%}
.columns.line{ background:none }
.line{padding-top:35px; padding-left:0; border-left:none;}
.stepy-titles li {padding: 15px 10px;  font-size:12px; }
.stepy-titles li span { display:none; }
.stepy-titles .current-step { padding: 15px 10px;  }

#top-nav		{width:100%;float:left;}
#top-nav			{display:none;}
#top-nav ul	{float: none; padding:10px 0; margin:0;}
#top-nav ul li 	{float: none; border-top: 1px solid #ddd; font-size:14px; padding:0; margin:0;}
#top-nav ul li a	{ display:block; padding:5px;}
#top-nav ul li a:hover{ background-color:#ddd;}
#top-nav ul a#active{ color:#323232; background-color:#ddd;}
.btn-responsive-menu{display:block;}	

footer ul.social-bookmarks {float:none;  display:block;  text-align:center;}	
ul.social-bookmarks li{ display:inline-block; float:none}

.copy {padding-top:20px; text-align:center}

.jfk-bubble {
  position: relative;
  left: 0;
  top:0;
  margin-right: 0px;
  margin-bottom: 20px;
}

.password{
min-width: 96%;
}

#radioname{
min-width: 96%;
}

.jfk-bubble-arrow {
	display:none;
}

}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
select { width:85%;}
input.long{ width:90%}
textarea.uniform { width:93%; min-height:95px;}

#form_area, #form_area_reserv, #form_area_survey { padding: 30px 0;}

.step {padding:30px ; }
.columns.line{ background:none }
.line{padding-top:35px; padding-left:0; border-left:none;}
.stepy-titles li {padding: 15px 9px;  font-size:10px; }
.stepy-titles li span { display:none; }
.stepy-titles .current-step { padding: 15px 10px;  }

#top-nav		{width:100%;float:left;}
#top-nav			{display:none;}
#top-nav ul	{float: none; padding:10px 0; margin:0;}
#top-nav ul li 	{float: none; border-top: 1px solid #ddd; font-size:14px; padding:0; margin:0;}
#top-nav ul li a	{ display:block; padding:5px;}
#top-nav ul li a:hover{ background-color:#ddd;}
#top-nav ul a#active{ color:#323232; background-color:#ddd;}
.btn-responsive-menu{display:block;}	

footer ul.social-bookmarks {float:none;  display:block;  text-align:center;}	
ul.social-bookmarks li{ display:inline-block; float:none}

.copy {padding-top:20px; text-align:center}

.jfk-bubble {
  position: relative;
  left: 0;
  top:0;
  margin-bottom: 20px;
  margin-right: 0px;
}

.password{
min-width: 96%;
}

#radioname{
min-width: 96%;
}

.jfk-bubble-arrow {
	display:none;
}
}