@font-face {
  font-family: 'IntroRegular';
  src:  url('../fonts/IntroRegular.ttf') format('truetype');
}

html {
    font-size: 16px;
}

body {
    font-family: 'IntroRegular', sans-serif;
    background-color: #fff;
    color: #537b70;
    font-weight: normal;
    min-width: 320px;
}

.clear {
    clear: both;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

/********* top *************/

.top-bg {
    font-family: 'Arial', sans-serif;
    background-color: #537b70;
}

.top {
    padding: 5px 0;
}

.top a {
    color: #fff;
    text-decoration: none;
}

.top a:hover {
    text-decoration: underline;
}

.top ul {
    margin: 0;
    padding: 0;
    margin-left: 3px;
    float: left;
}

.top ul li {
    display: inline-block;
    margin-right: 15px;
}

.top ul li a {
    font-size: 14px;
    text-transform: uppercase;
}

.top a:last-child {
    float: right;
}

.top a span {
    width: 30px;
    height: 30px;
    border: 1px solid #9eb7b1;
    border-radius: 15px;
    margin-right: 10px;
}

.top a span i {
    color: #9eb7b1;
    padding: 0 5px;
}

/********* header - nav *************/

.header {
    margin-top: 15px;
}

.header h1 {
    margin: 0;
    padding: 0;
    float: right;
}

.header h1 a {
    color: #537b70;
    font-size: 30px;
    text-transform: uppercase;
    text-decoration: none;
}

.menu {
    float: left;
}

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.navbar-nav {
/*    margin-left: -36px;*/
}

.navbar-nav li {
    border: 3px solid  #537b70;
    margin-left: 5px;
}

.nav.navbar-nav li a {
    text-transform: uppercase;
    color: #537b70;
    padding: 10px;
}

.navbar-nav li a:hover {
    background-color: #537b70;
    color: #fff;
}

.nav.navbar-nav .active-link {
    background-color: #537b70;
    color: #fff;
}

.navbar-toggle .icon-bar {
    background-color: #537b70;
    width: 32px;
    height: 4px;
}

/********* content *************/

.wrapp-info {
    padding: 0 0 20px 0;
    border-bottom: 3px solid #537b70;
    margin-bottom: 5px;
}

.main-info {
    width: 80%;
}

.main-info div {
    width: 19%;
    min-height: 60px;
    border: 3px solid #537b70;
    float: left;
    margin-right: 5px;
}

.main-info div p {
    margin: 0;
    padding: 0;
    color: #fff;
    padding-left: 5px;
    min-height: 20px;
    background-color: #537b70;
    text-transform: uppercase;
}

.main-info div p span {
    font-size: 12px;
    text-transform: none;
}

.inp {
    width: 97%;
    min-height: 50px;
    font-size: 36px;
    color: #000;
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
}

/********* content - subject *************/

.wrapp-choice {
    margin: 0 auto;
    border-bottom: 3px solid #537b70;
    margin-bottom: 5px;
    color: #5b8b7d;
}

.main-choice {
    width: 17%;
    margin-bottom: 10px;
}

.main-choice p {
    margin: 0;
    padding: 5px 50px 0 0;
    text-align: right;
}

.sub-choice {
    margin-bottom: 5px;
    width: 80%;
}

.choice {
    background-color: #fff;
    margin: 3px 0;
    border: 1px solid #598679;
}

.choice:hover {
    background-color: #537b70;
    color: #fff;
}

.choice.active {
    background-color: #537b70;
    border: 1px solid #598679;
    margin: 3px 0;
    color: #fff;
    outline: none;
    box-shadow: none;
}

.sub-choice button span {
    font-size: 12px;
}

/******* out summa ********/

.out-summa {
    width: 99%;
    margin-top: 15px;
    margin-bottom: 20px;
}

.padd {
    padding-left: 5px;
    padding-right: 5px;
}

.without-discount, .percent-discount-l, .percent-discount-r, .discount, .amount, .val {
    min-height: 100px;
    border: 3px solid #598679;
    margin-bottom: 7px;
    text-align: center;
    padding-bottom: 10px;
}

.without-discount div p, .percent-discount-l div p, .percent-discount-r div p, .discount div p, 
.val div p {
    text-align: center;
    text-transform: uppercase;
}

#all-cost, .percent-discount-l input, .percent-discount-r input, #with-discount, .amount input, #val {
    font-size: 32px;
    color: #000;
}

.percent-discount-l > div, .percent-discount-r > div, .amount > div {
    color: #fff;
    min-height: 20px;
    background-color: #598679;
}

/******** button ********/

.section-btn {
    margin: 15px 0;
}

.section-btn button {
    border: none;
    outline: none;
    border-radius: 0;
    color: #fff;
    margin-right: 5px;
    padding: 5px;
}

#sendData, #res-discount {
    background-color: #598679;
    border: 2px solid #598679;
}

#reset {
    background-color: #000;
    border: 2px solid #000;
}

#sendData:hover, #res-discount:hover, #reset:hover {
    background-color: #fff;
    color: #598679;
}

#reset:hover {
    border: 2px solid #598679;
}

/****** out-info ******/

#out-info {
    padding: 10px 0;
    width: 75%;
    min-height: 180px;
    display: none;
}

.out {
    margin: 0;
    margin-left: -5px;
    width: 100%;
    min-height: 170px;
    clear: both;
    display: flex;
    justify-content: space-around;
}


.out-first-div {
    width: 20%;
    margin-left: 10px;
}

.out-first-div span {
    text-transform: none;
}

.out-second-div {
    width: 77%;
}

.out-first-div, .out-second-div {
    margin: 5px;
    min-height: 150px;
    border: 3px solid #598679;
    position: relative;
}

.out-second-div {
    color: #000;
    padding: 5px;
    text-transform: uppercase;
}

.number-order {
    color: #fff;
    padding: 5px;
    min-height: 20px;
    background-color: #598679;
    text-transform: uppercase;
}

.date-order {
    color: #000;
    padding: 5px;
    text-transform: uppercase;
}

.printbtn {
    border: none;
    outline: none;
    color: #fff;
    background-color: #598679;
    border: 2px solid #598679;
    margin: 10px 5px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.printbtn:hover {
    background-color: transparent;
    color: #598679; 
}

/*** placeholder ***/

input::-webkit-input-placeholder {
    color:#d1d0d0;
}
input::-moz-placeholder {
    color:#d1d0d0;
}

input:-moz-placeholder {
    color:#d1d0d0;
}

input:-ms-input-placeholder {
    color:#d1d0d0;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus:-ms-input-placeholder {
    color: transparent;
}

/********* input type number *********/

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
    -moz-appearance:textfield;
}


@media only screen and (max-width: 1200px) {
    .header h1 {
        float: none;
        margin-bottom: 10px;
    }
    
    .menu {
        float: none;
    }
    
    .navbar-nav {
        margin-left: -6px;
    }
    
    .main-info {
        width: 95%;
    }
    #out-info {
    min-height: 200px;
    }
    .out {
    min-height: 180px;
    }
    .out-first-div, .out-second-div {
    min-height: 170px; 
    }
    .printbtn {
        float:none;
    }
    
}

@media only screen and (max-width: 992px) {
    .navbar-nav li a {
        padding: 10px 5px;
    }
    .inp {
        font-size: 28px;
    }
    #out-info {
        width: 100%;    
    }
    .out {
        width: 100%;    
    }
    .out-first-div, .out-second-div {  
        width: 100%;
        float: none;    
    }
    .out-first-div {
        min-height: 100px;
    }
    
}

@media only screen and (width: 768px) {
    .nav.navbar-nav {
        margin-left: -15px;
    }
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .header h1 {
        text-align: center;
/*        margin-left:  15px;*/
    }
    
    .navbar-nav {
        margin: 0 auto;
        margin-top: 10px;
    }
    .navbar-nav li {
        border: 1px solid  #537b70;
        margin-bottom: 5px;
    }
    .content {
        padding: 0 10px;
    }
    .main-info {
        margin: 0 auto;
        width: 95%;
    }
    .main-info div {
        width: 100%;  
        float: none;
        margin-left: 0;
        margin-bottom: 5px;    
    }
    .inp {
    font-size: 24px;
    }
    .wrapp-choice {
        padding: 0 20px;
    }
    .main-choice {
        float: none;
        width: 95%;
    }
    .sub-choice {
        float: none;
        width: 95%;
    }
    .main-choice p {
        margin: 0;
        padding: 0;
        text-align: left;
    }
    .sub-choice button span {
        font-size: 10px;
    }
    .without-discount, .percent-discount-l, .percent-discount-r, .discount, .amount, .val {
        min-height: 50px;
    }
    
    #all-cost, .percent-discount-l input, .percent-discount-r input, #with-discount, .amount input, #val {
        font-size: 24px;
    }
    .padd {
        padding-left: 15px;
        padding-right: 15px;
    }
    .section-btn {
        text-align: center;
    }

}

@media only screen and (max-width: 600px) {
    .main-choice, .sub-choice {
        padding-left: 12px;
    }
    .sub-choice button {
        width: 100%;
        padding: 5px 0;
    }
    .section-btn {
        margin: 20px 0;
    }
    
}

@media only screen and (max-width: 480px) {
    .navbar-nav {
        margin-left: 4px;
    }
    .navbar-nav li {
        width: 96%;
    }
    .main-info {
        padding: 0 6px;
        width: 100%;
    }
    .main-info div {
        margin: 0 auto;
        width: 95%;
        float: none;
        margin-bottom: 5px;    
    }
    .inp {
    min-height: 30px;
    }
    .choice, .active {
        padding: 0 3px;
    }
    .out-summa {
        margin: 0;
        margin: 20px auto;
    }
    .section-btn button {
        width: 90%;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 320px) {
    .top-bg {
        min-height: 30px;
    }
    .top a {
        color: #fff;
        line-height: 40px;
    }
    .header h1 {
        margin-bottom: 0;
        font-size: 24px;
    }
    .navbar-nav {
        margin-left: 0;
    }
    .main-info div p span {
        font-size: 10px;
    }
}

@media print {
    .top, header, .wrapp-info, #choice-btn, .out-summa, .section-btn, .printbtn {
        display: none;
    }
    #out-info {
        display: block;
        width: 100%;
        padding: 20px;
    }
    
    .out-first-div, .out-second-div {
        border: none;
        border-bottom: 2px solid #537b70;
        font-size: 14px;
    }
}