/* CSS Document for Retrofit for iPad Devices - mainly book process */
/* by Developer LSE - 31 May 2015 */


/* -------      max-width:1024px       ------- */

@media (max-width:1024px)
{

/* --------------------  Progress bar content Steps 1 - 4  ----------------- */
    #progress-bar-steps {
        max-width: 945px;
        width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }
    .progress-bar-step {
        padding: 20px 22px 17px;
        float: left;
        max-width: 191px;
        width: 20%;
        color: #c7c9cd;
        border-right: 1px solid #d2d2d2;
    }
    .progress-bar-step.current {
        background: #434b56;
        color: #fff;
    }
    .progress-bar-step.done {
        color: #656d78;
    }
    .progress-bar-step.last {
        border: none;
    }
    .progress-bar-step.done .step_number {
        background: url(../images/step_done.png) no-repeat center transparent;
        color: transparent;
        font-size: 0px;
    }
    .progress-bar-step.current .step_number {
        background: url(../images/step_current.png) no-repeat center transparent;
    }
    .progress-bar-step .step_number {
        background: url(../images/step.png) no-repeat center transparent;
        height: 45px;
        width: 45px;
        line-height: 3;
        text-align: center;
        float: left;
    }
    .progress-bar-step .step_name {
        float: left;
        margin: 11px 8px;
        max-width: 130px;
        width: 60%;
    }

}


/* -------      max-width:920px       ------- */

@media (max-width:920px)
{
    #progress-bar-steps {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }
    .progress-bar-step {
        padding: 20px 22px 17px;
        float: left;
        max-width: 191px;
        width: 18%;
        color: #c7c9cd;
        border-right: 1px solid #d2d2d2;
    }
    .progress-bar-step.current {
        background: #434b56;
        color: #fff;
    }
    .progress-bar-step.done {
        color: #656d78;
    }
    .progress-bar-step.last {
        border: none;
    }
    .progress-bar-step.done .step_number {
        background: url(../images/step_done.png) no-repeat center transparent;
        color: transparent;
        font-size: 0px;
    }
    .progress-bar-step.current .step_number {
        background: url(../images/step_current.png) no-repeat center transparent;
    }
    .progress-bar-step .step_number {
        background: url(../images/step.png) no-repeat center transparent;
        height: 45px;
        width: 45px;
        line-height: 3;
        text-align: center;
        float: left;
    }
    .progress-bar-step .step_name {
        float: left;
        margin: 11px 8px;
        max-width: 130px;
        width: 100%;
        font-size: 13px;
    }

}


/* -------      max-width:752px       ------- */

@media (max-width:660px)
{
    #progress-bar {
        max-width: 100%;
        width: 100%;
    }

    #progress-bar-steps {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }
    .progress-bar-step {
        padding: 20px 22px 17px;
        float: left;
        max-width: 191px;
        width: 16%;
        color: #c7c9cd;
        border-right: 1px solid #d2d2d2;
    }
    .progress-bar-step.current {
        background: #434b56;
        color: #fff;
    }
    .progress-bar-step.done {
        color: #656d78;
    }
    .progress-bar-step.last {
        border: none;
    }
    .progress-bar-step.done .step_number {
        background: url(../images/step_done.png) no-repeat center transparent;
        color: transparent;
        font-size: 0px;
    }
    .progress-bar-step.current .step_number {
        background: url(../images/step_current.png) no-repeat center transparent;
    }
    .progress-bar-step .step_number {
        background: url(../images/step.png) no-repeat center transparent;
        height: 45px;
        width: 45px;
        line-height: 3;
        text-align: center;
        float: left;
    }
    .progress-bar-step .step_name {
        float: left;
        margin: 11px 8px;
        max-width: 130px;
        width: 100%;
        font-size: 13px;
    }

}


/* -------      max-width:520px       ------- */

@media (max-width:520px)
{

    #progress-bar-steps {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }
    .progress-bar-step {
        padding: 20px 22px 17px;
        float: left;
        max-width: 191px;
        width: 14%;
        color: #c7c9cd;
        border-right: 1px solid #d2d2d2;
    }

    .progress-bar-step .step_name {
        float: left;
        margin: 11px 8px;
        max-width: 100px;
        width: 100%;
        font-size: 12px;
    }

}


/* -------      max-width:440px       ------- */

@media (max-width:440px)
{

    #progress-bar-steps {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        font-size: 15px;
    }
    .progress-bar-step {
        padding: 12px 12px 17px;
        float: left;
        max-width: 191px;
        width: 17%;
        color: #c7c9cd;
        border-right: 1px solid #d2d2d2;
    }
    .progress-bar-step .step_name {
        float: left;
        margin: 11px 8px;
        max-width: 90px;
        width: 100%;
        font-size: 12px;
    }

}


/* -------   max-width:960px - Booking process content below progress bar   ------- */

@media (max-width:960px)
{

    /* -------- Main Form -------- */
    .main-form {
        position: relative;
        background: #fff;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -moz-box-shadow: 0px 0px 2px #666869;
        -webkit-box-shadow: 0px 0px 2px #666869;
        box-shadow: 0px 0px 2px #666869;
    }
    .right-slider #slider-form {
        float: right;
        margin: -349px 130px 34px 0;
    }
    .left-slider #slider-form {
        float: left;
        margin: -349px 0 34px 129px;
    }
    .center-slider #slider-form {
        margin: 20px auto 39px;
        max-width: 940px;
        width: 90%;
    }
    .page .main-form {
        margin: 18px auto;
        max-width: 940px;
        width: 90%;
    }
    .page .main-form .title-form {
        max-width: 910px;
        width: 90%;
        padding: 10px 0 5px 29px;
        text-align: left;
    }
    .main_form_navigation {
        overflow: hidden;
        -webkit-border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }
    .title-form {
        float: right;
        text-align: center;
        width: 229px;
        font-size: 16px;
        line-height: 21px;
        word-spacing: 1px;
    }
    .title-form.current {
        border-top: 5px solid #EF7C37;
        padding: 6px 0 12px;
        width: 229px;
    }
    .title-form.current a{
        color: #434b56;
    }
    .title-form a {
        text-decoration: none;
    }
    .title-form.back {
        background: #eee;
        border-bottom: 1px solid #d2d2d2;
        border-left: 1px solid #d2d2d2;
        border-right: 1px solid #d2d2d2;
        padding: 11px 0;
        -webkit-border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
        letter-spacing: -0.1px;
        word-spacing: 1.6px;
    }
    html, body, #conteiner {
        margin:0;
    }

    #main, form#slider-form.main-form {
        margin:20px auto;
        padding: 0;
    }

	#content > div {
		width-max: 624px;
		/*overflow-x:scroll;*/
	}
		
	.page .sidebar-middle {
		margin:0px;
		width-max: 624px;
	}

}

@media (max-width:960px)
{

    aside#secondary.sidebar-left .widget.info_widget {
        display:none;
    }

    aside#secondary.sidebar-left, div#content.sidebar-middle {
        width-max: 768px;
        width:90%;
        float:none;  /* these 3 lines make it OK */
        margin:10px auto;
        padding: 0;
    }

    div.widget.filter_widget > h4,  div.widget.filter_widget .widget-content-range,  div.widget.filter_widget .widget-content.widget-filter {
        max-width: 350px;
        margin: 0 auto;
        display: none;
    }

     aside#secondary.sidebar-left div.widget h4,  aside#secondary.sidebar-left div.widget div.widget-content, aside#secondary.sidebar-left div.widget div.widget-footer {
        max-width: 350px;
        margin: 0 auto;
        display: block;
    }

	div.widget.faq_nav ul li {
		text-align: center;
	}
	
	aside#secondary div.widget.widget-advertising {
		display:none;
	}

    div.widget.faq_nav ul {
        display:none;
    }

	aside#secondary.sidebar-left div.widget > h4,  aside#secondary.sidebar-left div.widget div.widget-content, aside#secondary.sidebar-left div.widget div.widget-footer {
		display:none;
	}

}


/* -------      max-width:650px       ------- */

@media (max-width:650px)
{

	#content > div {
		width-max: 624px;
		overflow-x:scroll;
	}
	
	.page .sidebar-middle {
		margin:0px;
		width-max: 624px;
	}
	
	#hb-div > div > div.main-block_container > div {
		max-width:350px;
	}

    div.widget.filter_widget > h4,  div.widget.filter_widget .widget-content-range,  div.widget.filter_widget .widget-content.widget-filter {
        max-width: 350px;
        margin: 0 auto;
        display: none;
    }

     div.widget h4,  div.widget div.widget-content,  div.widget div.widget-footer {
        max-width: 350px;
        margin: 0 auto;
        display: block;
    }

    #content.sidebar-middle > form > div.widget.main-widget.product-widget.main-widget-3column {
        overflow-x:scroll;
        margin:0px;
        width-max: 624px;
    }

    #billing_address.billing_address, #billing_address_2.billing_address {
        width:100%;
    }

	div.widget.faq_nav ul li {
		text-align: center;
	}
	
	aside#secondary div.widget.widget-advertising {
		display:none;
	}

}