/*
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:rgba(0,0,0,0.5); -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;}

#status-msg{background:rgba(0,0,0,0.5); -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;}
#status-msg-wp{ padding:15px 15px 0 15px;}

#top-msg a{ font-size:12px; 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/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/shadow_top.png) repeat-x 0 0; height:1px; width:100%; position:absolute; left: 0; top:0; z-index:99}
#shadow_2 {background: url(../img/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:#262626; width:100%; padding: 60px 0; position:relative;  border-bottom: 4px solid #CCC; border-top: 4px solid #CCC}
#form_area_reserv { background: url(../img/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/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/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;  font-weight:700;
	-khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
	-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);  font-size:12px;}
	
.ie10 .button-back, .ie10 .button-next { border-radius: 0;}
.button-back:hover, .button-next:hover{color: #666;  text-decoration: none; }

.step {clear: left;  min-height:430px;  background:url(../img/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 { color: black; display: block; margin-bottom:3px; position:relative; }
/*.step label { color: #fff; display: block; margin-bottom:3px;  text-shadow: 1px 1px 1px rgba(0,0,0,.4); position:relative; }*/
.step legend { font-size:11px}

.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: 100%;  color:black; 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/white_bg_30.png) repeat-x left bottom; font-weight:600; 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/white_bg_15.png) repeat-x; padding: 7px 20px;  }

input.error{ border-bottom:1px solid #C00}
label.error {background: #333 url(../img/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/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/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%;}
}


/* 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}

}

/* 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 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}

}

header {padding: 25px 0;}
.container .five.columns {min-height:90px;}
#top-msg, #status-msg, .stepy-titles .current-step, .step {background:#F0F0F0;}
.stepy-titles li {background:#999;}
#form_area {padding: 0px 0 0px;border:none;}
#top-msg-wp h2 {border-bottom: 1px solid #ccc;}
#top-msg-wp h2, .stepy-titles div {font-size:16px;font-weight:600;line-height:18px;}
#top-msg-wp p {color:black;}

#status-msg-wp h2 {border-bottom: 1px solid #ccc;}
#status-msg-wp h2, .stepy-titles div {font-size:16px;font-weight:600;line-height:18px;}
#status-msg-wp p {color:black;}

#top-msg-wp p.rights {color:black; position:absolute; bottom:5px; left: 15px;}

#top-msg a {color: Black; }

#uniform-cboMonth {margin-right:15px}
#top-msg { min-height:550px;}
#status-msg { min-height:190px;}


#phone_from {width:160px;}
#cardCVV {width:60px; float:left; margin-right:20px}
#cboMonth {width:60px;}
.galleria{ width: 470px; height: 260px; background: #000 }
.PhoneLabel {margin-right: 138px;float: right;margin-top: -20px;}
.CityText { width:160px!important; float:left; margin-right:20px!important}
.PaypalLabel {text-align:right}
.ppal {margin-top:5px;}


@media(max-width:768px) {

#phone_from {width:110px;}
#cardCVV {width:40px; float:left; margin-right:5px}
#uniform-cboMonth {margin-right:5px}
.galleria{ width: 250px; height: 140px; background: #000 }
#top-msg { min-height:450px;}
.step { min-height:430px; }
.HideIfMobile {display:none;}
.PhoneLabel {margin-right: 88px;}
.CityText {width:110px!important;margin-right:20px!important }
.PaypalLabel {text-align:left}
.ppal {margin-top:5px;float:left!important}

}