body { margin: 0; font-family: 'Roboto', sans-serif; }
button { font-family: 'Roboto', sans-serif; }
header { background-color: #17445d; position: fixed; width: 100vw; z-index: 9; }
.logo { padding: 20px; }
img { max-width: 100%; }
#menu { display: block; width: 80%; padding-top: 20px; }
#menu li { display: inline-block; padding-right: 40px; cursor: pointer; }
#menu a { text-decoration: none; color: #fefefe; font-weight: 900; font-size: 17px; transition: 0.5s; }
.wid25 { display: inline-block; width: 25%; float: left; }
.wid50 { display: inline-block; width: 50%; float: left; }
.wid75 { display: inline-block; width: 75%; float: left; }
.row:after { content: ""; display: table; clear: both; }
.phone_nr { padding-right: 5px; color: #ef7f1a; }
#menu li:hover a { color: #ef7f1a; margin-top: 10px; }
.column { width: 1200px; margin: auto; display: block; }

section { padding: 30px; }

#skaiciuokle .col { background-color: #eeeeee; border-bottom: 3px #fff solid; min-height: 150px; }
#skaiciuokle img { max-width: 70%; }
.colimg { text-align: center; }
.col40 { width: 40%; flex: 2; }
.col20 { width: 20%; flex: 1; padding-top: 20px; }
.col100 { width: 100%; }
#skaiciuokle img { padding: 10px 30px; }
.flex { display: flex; }

.bubble {
	display: inline-block;
    border: 2px solid #ff7f27;
    width: 21px;
    height: 21px;
    border-radius: 100px;
    text-align: center;
}
.bubble span { font-weight: 500; }
.bubble i { padding-top: 3px; color: #ff7f27; }
.select_name { text-transform: uppercase; font-size: 12px; font-weight: 900; padding-left: 10px; }
#skaiciuokle select {
	margin-left: 35px;
    width: 160px;
    height: 40px;
    border-color: #ff7f27;
}

#raud_j_label { display: block; padding-left: 32px; font-size: 12px; padding-top: 20px; }

#angos_mat { padding-left: 35px; }
#angos_mat label:first-child { padding-top: 15px; }
#angos_mat label { font-size: 12px; display: block; padding-top: 5px; display: block; }
#angos_mat input { border: 1px solid #ff7f27; display: block; }

#angos_mat_skaic { padding-left: 35px; padding-top: 30px; padding-bottom: 15px; }
#angos_mat_skaic label { font-size: 12px; padding-top: 5px; color: #7f7f7f; display: block; }
#angos_mat_skaic input { border: 1px solid #7f7f7f; color: #c3c3c3; display: block; }

.textarea_col { text-align: right; padding-top: 15px; }
.textarea_col textarea { border-radius: 10px; margin-right: 20px; }

#total_count span { font-weight: 900; }
#total_count p { margin: 0; font-size: 14px; margin-left: 38px; }

#step7 { margin-top: 40px; }
#step7 .col { min-height: unset; border: 0; }
#step7 button {
    width: 30%;
    padding: 8px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    font-weight: 700;
    background-color: #ff7f27;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 2px solid #ff7f27;
}
#step7 button:hover {
    color: #ff7f27;
    background-color: #fff;
    transition: 0.5s;
}
#step7 button:disabled {
    background-color: grey;
    cursor: no-drop;
    color: #fff;
    border-color: grey;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* Could be more or less, depending on screen size */
    border-radius: 15px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content .col { width: 50%; flex: 1; }
.modal-content p { margin: 5px; font-size: 14px; }
.modal-content p span { font-weight: 700; }
.modal-content h3 { font-size: 22px; color: #ff7f27; }
.modal-content label { display: block; font-size: 14px; }
.modal-content input {
    display: block;
    margin-bottom: 10px;
    width: 80%;
    padding: 10px;
    border: 1px solid #ff7f27;
    border-radius: 10px;
}
.modal-content button {
    width: 50%;
    padding: 8px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    font-weight: 700;
    background-color: #ff7f27;
    text-transform: uppercase;
    margin: 10px 0;
    border: 2px solid #ff7f27;
}
.modal-content button:hover {
    color: #ff7f27;
    background-color: #fff;
    transition: 0.5s;
}
.have_questions { padding: 40px 0 0 0; }
.have_questions p { font-size: 22px; font-weight: 900; color: #ff7f27; }
.have_questions a { color: #ff7f27; text-decoration: none; }
.have_questions a:hover { font-size: 27px; transition: 0.5s; }

#modal_errors span { font-size: 13px; display: block; font-weight: 700; }
#modal_errors span.success { color: #3c763d; }
#modal_errors span.error { color: #a94442; }

#formos_klaida { text-align: center; color: red; font-weight: 900; display: none; }

@media only screen and (max-width: 1300px) {
    .column { width: 100%; }
    #skaiciuokle select { width: 80%; }
    #skaiciuokle input[type="text"], #skaiciuokle input[type="number"]  { width: 100%; }
    ul#menu { width: 100%; }
    #comments { width: 90%; }
}
@media only screen and (max-width: 900px) {
    #skaiciuokle select { width: 75%; }
    #skaiciuokle .col { min-height: unset; padding-bottom: 20px; }
    #step7 .hidemob { display: none; }
    #step7 .col20 { width: 60%; flex: 3; }
}
@media only screen and (max-width: 800px) {
    #skaiciuokle .flex { display: block; }
    .col { display: block; width: 100%; }
    #skaiciuokle img { padding: 10px 0; max-width: 100%; }
    #skaiciuokle .col { border: 0; }
    .column.flex { margin-bottom: 30px; }
    .bubble { margin: 0 0 20px 40px; }
    #step7 .col20 { width: 100%; }
    #step7 .column.flex { margin-bottom: 0; }
    .modal-content input { width: 100%; }
    .modal-content { width: 90%; }
    #skaiciuokle input[type="text"], #skaiciuokle input[type="number"]  { width: 75%; }
    #step7 { margin-top: 0; }
    #step7 button { width: 80%; }
}

#menu li.icon_burger { display: none; }
@media only screen and (max-width: 1000px) {
    #menu li:not(:first-child) { display: none; }
    #menu li.icon_burger {
        float: right;
        display: block;
        position: absolute;
        right: 10px;
        top: 16px;
        padding-right: 20px;
    }

    #menu.responsive {position: relative;}
    #menu.responsive li {
        float: none;
        display: block;
        text-align: left;
        padding: 10px 0;
    }
    #menu.responsive li.icon_burger {
        right: 50px;
        top: 0;
        padding: 0 20px 0 0;
    }
    #menu.responsive li:first-child {
        padding: 0 0 10px 0;
    }
}

@media only screen and (max-width: 600px) {
    #menu { padding-top: 5px; }
}

#i_ang_plot {
    position: absolute;
    left: 51%;
    transform: translate(-50%, -20%);
}
#i_ang_auks {
    position: absolute;
    top: 50%;
    right: 20%;
}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
    #i_ang_plot { transform: translate(-50%, -50%); }
    #i_ang_plot, #i_ang_auks { font-size: 12px; }
}
@media only screen and (min-width: 600px) and (max-width: 700px) {
    #i_ang_auks { right: 18%; }
}
@media only screen and (max-width: 600px) {
    #i_ang_auks { right: 10%; }
    #i_ang_plot { top: 0; transform: translate(-50%, 0%); }
}

.have_questions.mobile { display: none; }
@media only screen and (max-width: 550px) {
    .have_questions.mobile { display: block !important; }
    .have_questions.dekstop { display: none; }
}

section#head { padding-top: 110px; }
.description { font-weight: 500; font-size: small; text-align: center; }
.description .block { background-color: #c3c3c3 !important; padding: 10px 20px; text-align: justify; }
@media only screen and (min-width: 800px) {
    .description { padding: 10px; }
}
@media only screen and (max-width: 835px) {
    .description { padding-bottom: 0 !important; }
    .wid50 { width: 100%; padding-bottom: 20px; }
}
#selected_red { display: none; color: #ec0000; }

#kontaktai { background-color: #17445d; width: 100%; color: #fff; }
#kontaktai div.row { padding: 25px;  }
#kontaktai a { color: #fff; text-decoration: none; }
#kontaktai .wid50 div { display: inline-block; vertical-align: middle; padding-left: 10px; }

.description .button_to_block {
    width: 60%;
    padding: 8px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    font-weight: 700;
    background-color: #ff7f27;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 2px solid #ff7f27;
    cursor: pointer;
}
.description .button_to_block:hover {
    color: #ff7f27;
    background-color: #fff;
    transition: 0.5s;
}

@media only screen and (max-width: 800px) {
    .description .block { display: none; }
}
@media only screen and (min-width: 800px) {
    .description .button_to_block { display: none; }
}

#head p { text-align: justify; }