@charset "utf-8";

a:visited,
a:link,
a:active {
    color: black;
    text-decoration: none;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
@media screen and (max-width: 4500px) and (min-width: 1101px) {

    html,
    body {
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
    }

    body {
        background: white;
    }
	.error_message{
		color: red;
		font-size: 14px;
		font-family: "OpenSans-Regular";
		float: left;
		clear: both;
		margin-top: 5px;
		display: none;
	}

    #header {
        width: 1100px;
        height: auto;
        margin: 0 auto;
        overflow: auto;
    }

    #header_logo {
        width: 284px;
        height: 40px;
        background: url('../images/logo.png');
        margin-top: 45px;
        display: inline-block;
        float: left;
        clear: both;
    }

    #header_text {
        color: black;
        font-size: 15px;
        font-family: "OpenSans-SemiBold";
        width: 130px;
        clear: both;
        float: left;
        margin-top: 20px;
    }

    #header_line {
        width: 83px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 17px;
    }

    #ankieta1 {
        width: 1100px;
        height: auto;
        margin: 0 auto;
    }

    #step1 {
    }
    #step2 {
        display: none;
    }
    #step3 {
        display: none;
    }
    #step4 {
        display: none;
    }
    #step5 {
        display: none;
    }
    #step6 {
        display: none;
    }
    #step7 {
        display: none;
    }
    #step_last{
        display: none;
    }
    #step6_opis{
        margin-top: 40px;
    }
    #step1_img {
        width: 286px;
        height: 179px;
        background: url('../images/start_img.png');
        margin-left: 407px;
        margin-top: 20px;
        display: inline-block;
    }

    #step1_info {
        width: 920px;
        color: black;
        font-size: 20px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        margin-top: 20px;
    }

    #step1_line {
        width: 190px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 45px;
    }

    #step1_title {
        width: 920px;
        color: black;
        font-size: 20px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        margin-top: 50px;
        margin-bottom: 40px;
    }

    .step1_star_box {
        float: left;
        clear: both;
    }

    .star_green {
        width: 48px;
        height: 46px;
        background: url('../images/green_star.png');
        float: left;
        margin-right: 12px;
    }

    .star_gray {
        width: 48px;
        height: 46px;
        background: url('../images/gray_star.png');
        float: left;
        margin-right: 12px;
    }

    .star_text {
        color: black;
        font-size: 19px;
        font-family: "OpenSans-Regular";
        float: left;
        clear: both;
        margin-top: 10px;
        margin-bottom: 30px;
        margin-left: 12px;
    }

    #step1_button_start {
        width: 240px;
        height: 73px;
        background: #71D6C5;
        float: left;
        clear: both;
        color: white;
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-left: 430px;
        font-family: "OpenSans-SemiBold";
        margin-top: 10px;
        margin-bottom: 110px;
        cursor: pointer;
    }

    .step_title {
        width: 785px;
        font-family: "OpenSans-SemiBold";
        color: black;
        font-size: 22px;
        margin-top: 60px;
    }

    .step_line {
        width: 190px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 25px;
    }

    div.stars {
        width: 314px;
        display: inline-block;
        float: left;
        clear: both;
        margin-top: 50px;
    }

    input.star {
        display: none;
    }

    label.star {
        width: auto;
        height: auto;
        float: right;
        padding: 0px;
        font-size: 46px;
        color: #CCCCCC;
        transition: all .2s;
        margin-right: 20px;
        cursor: pointer;
    }

    input.star:checked ~ label.star:before {
        content: '\f005';
        color: #71D6C5;
        transition: all .25s;
    }

    label.star:before {
        content: '\f005';
        font-family: FontAwesome;
    }
    .opis{
        width: 763px;
        height: 240px;
        border: 1px solid black;
        float: left;
        clear: both;
        font-size: 20px;
        font-family: "OpenSans-Regular";
        padding: 10px;
        color: black;
        margin-top: 55px;
        outline: 0px;
        resize: none;
    }
    .button_back{
        width: 246px;
        height: 73px;
        border: 3px solid #71D6C5;
        color: #71D6C5;
        float: left;
        clear: both;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-top: 60px;
        cursor: pointer;
    }
    .button_next{
        width: 246px;
        height: 73px;
        border: 3px solid #71D6C5;
        background: #71D6C5;
        color: white;
        float: left;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-top: 60px;
        margin-left: 30px;
        cursor: pointer;
    }
    #step_button_send{
        width: 252px;
        height: 79px;
        border: 0px;
        outline: 0;
        background: #71D6C5;
        color: white;
        float: left;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        margin-top: 60px;
        margin-left: 30px;
        cursor: pointer;
    }
    .step_img_bottom{
        width: 582px;
        height: 365px;
        background: url('../images/bottom_img.png');
        float: right;
        clear: both;
        margin-top: -120px;
        margin-bottom: 40px;
    }
    .step_label{
        font-family: "OpenSans-SemiBold";
        font-size: 22px;
        float: left;
        clear: both;
        color: black;
        margin-top: 55px;
        margin-bottom: -35px;
    }
    .first_label{
        margin-top: 25px;
    }
    .opis::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: gray;
    }

    .opis::-moz-placeholder {
        /* Firefox 19+ */
        color: gray;
    }

    .opis:-ms-input-placeholder {
        /* IE 10+ */
        color: gray;
    }

    .opis:-moz-placeholder {
        /* Firefox 18- */
        color: gray;
    }
    #step_last_img{
        width: 200px;
        height: 167px;
        margin: 0 auto;
        margin-top: 60px;
        background: url('../images/end_img.png')
    }
    #step_last_title{
        width: 890px;
        color: black;
        font-size: 20px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        margin-top: 50px;
    }
    #step_last_text{
        color: black;
        font-size: 20px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        margin-top: 50px;
    }
    #step_last_line{
        width: 110px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 25px;
    }
}

@media screen and (max-width: 1100px) and (min-width: 200px) {

    html,
    body {
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
    }

    body {
        background: white;
    }
	
	.error_message{
		color: red;
		font-size: 12px;
		font-family: "OpenSans-Regular";
		float: left;
		clear: both;
		margin-top: 5px;
		width: 100%;
		text-align: center;
		display: none;
	}
	
    #header {
        width: 320px;
        height: auto;
        margin: 0 auto;
        overflow: auto;
    }

    #header_logo {
        width: 195px;
        height: 27px;
        background: url('../images/logo_mobile.png');
        margin-top: 45px;
        display: inline-block;
        margin-left: 10px;
        float: left;
        clear: both;
    }

    #header_text {
        color: black;
        font-size: 12px;
        font-family: "OpenSans-SemiBold";
        width: 110px;
        clear: both;
        float: left;
        margin-top: 10px;
        margin-left: 10px;
    }

    #header_line {
        width: 83px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 10px;
        margin-left: 10px;
    }

    #ankieta1 {
        width: 320px;
        height: auto;
        margin: 0 auto;
    }

    #step1 {
  
    }
    #step2 {
        display: none;
    }
    #step3 {
        display: none;
    }
    #step4 {
        display: none;
    }
    #step5 {
        display: none;
    }
    #step6 {
        display: none;
    }
    #step7 {
        display: none;
    }
    #step_last{
        display: none;
    }
    #step6_opis{
        margin-top: 40px;
    }
    #step1_img {
        width: 286px;
        height: 179px;
        background: url('../images/start_img.png');
        margin-left: 17px;
        margin-top: 30px;
        display: inline-block;
    }

    #step1_info {
        width: 309px;
        color: black;
        font-size: 18px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        text-align: center;
        margin-left: 5px;
        margin-top: 20px;
        line-height: 30px;
    }

    #step1_line {
        width: 190px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 35px;
        margin-left: 65px;
    }

    #step1_title {
        width: 300px;
        color: black;
        font-size: 18px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        margin-top: 40px;
        text-align: center;
        margin-left: 10px;
        margin-bottom: 40px;
    }

    .step1_star_box {
        width: 300px;
        float: left;
        clear: both;
        margin-left: 15px;
    }

    .star_green {
        width: 48px;
        height: 46px;
        background: url('../images/green_star.png');
        float: left;
        margin-right: 12px;
    }

    .star_gray {
        width: 48px;
        height: 46px;
        background: url('../images/gray_star.png');
        float: left;
        margin-right: 12px;
    }

    .star_text {
        color: black;
        font-size: 19px;
        font-family: "OpenSans-Regular";
        float: left;
        clear: both;
        margin-top: 10px;
        margin-bottom: 30px;
        margin-left: 12px;
    }

    #step1_button_start {
        width: 240px;
        height: 73px;
        background: #71D6C5;
        float: left;
        clear: both;
        color: white;
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-left: 40px;
        font-family: "OpenSans-SemiBold";
        margin-top: 10px;
        margin-bottom: 110px;
        cursor: pointer;
    }

    .step_title {
        width: 300px;
        font-family: "OpenSans-SemiBold";
        color: black;
        font-size: 18px;
        margin-top: 50px;
        margin-left: 10px;
        line-height: 29px;
        text-align: center;
    }

    .step_line {
        width: 190px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 25px;
        margin-left: 65px;
    }

    div.stars {
        width: 314px;
        display: inline-block;
        float: left;
        clear: both;
        margin-top: 35px;
    }

    input.star {
        display: none;
    }

    label.star {
        width: auto;
        height: auto;
        float: right;
        padding: 0px;
        font-size: 46px;
        color: #CCCCCC;
        transition: all .2s;
        margin-right: 16px;
        cursor: pointer;
    }

    input.star:checked ~ label.star:before {
        content: '\f005';
        color: #71D6C5;
        transition: all .25s;
    }

    label.star:before {
        content: '\f005';
        font-family: FontAwesome;
    }
    .opis{
        width: 275px;
        height: 240px;
        border: 1px solid black;
        float: left;
        clear: both;
        font-size: 15px;
        font-family: "OpenSans-Regular";
        padding: 10px;
        color: black;
        margin-top: 35px;
        margin-left: 11px;
        outline: 0px;
        resize: none;
    }
    .button_back{
        width: 246px;
        height: 73px;
        border: 3px solid #71D6C5;
        color: #71D6C5;
        float: left;
        clear: both;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-left: 37px;
        margin-top: 30px;
        cursor: pointer;
    }
    .button_next{
        width: 246px;
        height: 73px;
        border: 3px solid #71D6C5;
        background: #71D6C5;
        color: white;
        float: left;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        line-height: 73px;
        margin-top: 25px;
        margin-left: 37px;
        cursor: pointer;
    }
    #step_button_send{
        width: 252px;
        height: 73px;
        border: 3px solid #71D6C5;
        background: #71D6C5;
        color: white;
        float: left;
        border: 0px;
        outline: 0;
        font-family: "OpenSans-SemiBold";
        font-size: 35px;
        text-align: center;
        margin-top: 25px;
        margin-left: 37px;
        cursor: pointer;
    }
    .step_img_bottom{
        width: 241px;
        height: 151px;
        background: url('../images/bottom_bg_mobile.png');
        float: left;
        clear: both;
        margin-top: 30px;
        margin-left: 39px;
        margin-bottom: 40px;
    }
    .step_label{
        width: 300px;
        margin-left: 10px;
        font-family: "OpenSans-SemiBold";
        font-size: 18px;
        float: left;
        clear: both;
        color: black;
        margin-top: 35px;
        text-align: center;
        margin-bottom: -25px;
    }
    .first_label{
        margin-top: 25px;
    }
    .opis::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: gray;
    }

    .opis::-moz-placeholder {
        /* Firefox 19+ */
        color: gray;
    }

    .opis:-ms-input-placeholder {
        /* IE 10+ */
        color: gray;
    }

    .opis:-moz-placeholder {
        /* Firefox 18- */
        color: gray;
    }
    #step_last_img{
        width: 200px;
        height: 167px;
        margin: 0 auto;
        margin-top: 60px;
        background: url('../images/end_img.png')
    }
    #step_last_title{
        width: 300px;
        color: black;
        font-size: 18px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        text-align: center;
        margin-left: 10px;
        line-height: 30px;
        float: left;
        margin-top: 40px;
    }
    #step_last_text{
        color: black;
        font-size: 18px;
        font-family: "OpenSans-SemiBold";
        clear: both;
        float: left;
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }
    #step_last_line{
        width: 110px;
        height: 1px;
        background: black;
        float: left;
        clear: both;
        margin-top: 30px;
        margin-left: 105px;
        margin-bottom: 50px;
    }


}