@font-face {
    font-family: 'Ubuntu';
    src: url('/fonts/Ubuntu-Regular.ttf');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: "Ubuntu",sans-serif;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.8;
    color: #000;
}

h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 60px;
    color: #E20C19;
}

p {
    margin: 0;
}

.container {
    padding: 0;
}

.row {
    margin: 0;
}

.padding-none {
    padding: 0;
}

.mar-none {
    margin: 0;
}

.mar-bot30 {
    margin-bottom: 30px;
}

.mar-bot60 {
    margin-bottom: 30px;
}

.padding-right-none {
    padding-right: 0;
}

.padding-left-none {
    padding-left: 0;
}
.padding30{padding:30px;}
.bg-grey {
    background-color: #EFEDEA;
}

.bg-light-grey {
    background-color: #DEDBD6;
}

.bg-dark-grey {
    background-color: #CFCBC3;
}

.color-red {
    color: #E20C19 !important;
}

.color-black {
    color: #333333 !important;
}

.color-dark-grey {
    color: #766E68 !important;
}

.bold {
    font-weight: bold !important;
}

.text-right {
    text-align: right;
}
.weight500{font-weight:500 !important;}

/*Header*/
.navbar {
    background-color: #fff;
    height: 70px;
    border-top: 10px solid #e20c19;
    border-bottom: 3px solid #D2CCCB;
    margin: 0;
}

    .navbar .container .logo {
        position: absolute;
        top: 24px;
    }

.header-image{
    min-height:500px;
    height:75vh;
    width:100%;
    background-image:url('/images/header-img.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% 50%;
}
.header-content{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    bottom:30%;
}

.header-content h1{
    font-size: 68px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
}

.header-content h1::after{
    display:block;
    height:1px;
    max-width:500px;
    width:100%;
    background-color:currentColor;
    content:'';
    margin:10px auto 0;
}

.header-content p{;
    font-size: 30px;
    font-weight: 300;
    text-align: center;
    color: #FFFFFF;
}

.centertoTop {
    margin-top: 70px;
}

/*Calculation
-------------------------------------------------------------------
*/
/*Introduction*/
.introduction {
    background-color: #fff;
}

    .introduction::before {
        position: absolute;
        display: block;
        height: 22px;
        width: 100%;
        background: url('/images/arrow-white.svg') no-repeat center top;
        content: '';
        z-index: 1;
        margin-top: -22px;
    }

    .introduction h3 {
        padding: 60px 0 82px;
        font-size: 22px;
        font-weight: 300;
        line-height: 35px;
        margin: 0;
    }

.your-details {
    background-color: #EFEDEA;
}

    .your-details::before {
        position: absolute;
        display: block;
        height: 22px;
        width: 100%;
        background: url('/images/arrow-grey.svg') no-repeat center top;
        content: '';
        z-index: 1;
        margin-top: -22px;
    }

    .your-details .container {
        padding: 38px 0 60px 0;
    }

        .your-details .container h2 {
            text-align: center;
            margin: 0;
        }

        .your-details .container h3 {
            font-size: 22px;
            font-weight: 300;
            text-align: center;
            line-height: 35px;
            color: #000000;
            margin: 0 auto 30px auto; 
            width: 75%; 
        }

        .your-details .container .details label {
            width: 100%;
            font-size: 15px;
            font-weight: 500;
            color: #766E68;
            margin-bottom: 10px;
            height: 11px;
        }

        .your-details .container .details input, .your-details .container .details select {
            width: 100%;
            background-color: #FFFFFF;
            border: 1px solid #D2CCCB;
            margin-bottom: 30px;
            padding: 15px 20px;
            font-size: 17px;
        }
         .your-details .container .details select {
            height:62px;
        }

        .your-details .container .survey h4 {
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            color: #766E68;
        }

        .your-details .container .survey input[type="radio"] {
            width: 13px;
            height: 14px;
            font-size: 15px;
            color: #766E68;
        }

        .your-details .container .survey label {
            font-size: 15px;
            font-weight: 300;
            color: #000000;
            margin: 0 0 0 20px;
            vertical-align: top;
        }

.farm-data {
    background-color: #fff;
}

    .farm-data::before {
        position: absolute;
        display: block;
        height: 22px;
        width: 100%;
        background: url('/images/arrow-white.svg') no-repeat center top;
        content: '';
        z-index: 1;
        margin-top: -22px;
    }

    .farm-data .container .farm-data-header {
        border-bottom: 3px solid #EFEDEA;
        margin-bottom: 15px;
        padding: 0 30px;
    }

    .farm-data .container .fa {
        position: absolute;
        right: 40px;
        top: 42px;
        color: #766e68;
        font-size: 25px;
        cursor: pointer;
    }

    .farm-data .container .farm-data-content .content-col {
        padding: 15px 30px;
        display: flex;
        flex-direction: row;
    }

        .farm-data .container .farm-data-content .content-col > [class^="col-"],
        .farm-data .container .farm-data-content .content-col > [class*=" col-"] {
            display: flex;
            align-items: center; /* Align the flex-items vertically */
        }

    .farm-data .container .farm-data-content label {
        font-size: 15px;
        font-weight: 500;
        color: #766E68;
        padding: 20px 0;
        margin: 0;
    }

    .farm-data .container .farm-data-content input {
        background-color: #FFFFFF;
        border: 2px solid #D2CCCB;
        float: right;
        text-align: right;
        padding: 15px 20px;
        font-size: 17px;
        width: 100%;
    }

    .farm-data .container .farm-data-content p {
        font-size: 17px;
        font-weight: 300;
        text-align: right;
        color: #766E68;
        padding: 20px 0;
    }

.calculator .cal-title {
    padding: 0 30px;
}

.calculator .cal-header {
    padding: 20px 30px;
    background-color: #DEDBD6;
}

    .calculator .cal-header p {
        font-size: 15px;
        font-weight: 500;
        text-align: right;
        color: #766E68;
    }

        .calculator .cal-header p.lely {
            color: #E20C19;
        }

.calculator h3 {
    font-family: Ubuntu;
    font-size: 22px;
    font-weight: 500;
    color: #333333;
    padding: 20px 0 20px 30px;
    margin: 0;
    text-transform: uppercase;
}

.calculator .cal-content .content-col {
    padding: 15px 30px;
    display: flex;
    flex-direction: row;
}

    .calculator .cal-content .content-col > [class^="col-"],
    .calculator .cal-content .content-col > [class*=" col-"] {
        display: flex;
        align-items: center; /* Align the flex-items vertically */
    }

.calculator .cal-content label {
    font-size: 15px;
    font-weight: 500;
    color: #766E68;
    padding: 20px 0;
    margin: 0;
}

.calculator .cal-content input {
    background-color: #FFFFFF;
    border: 2px solid #D2CCCB;
    float: right;
    text-align: right;
    padding: 15px 20px;
    font-size: 17px;
    width: 100%;
}

.calculator .cal-content p {
    font-size: 17px;
    font-weight: 300;
    text-align: right;
    color: #766E68;
    padding: 20px 0;
    margin-left: auto;
    margin-right: 0;
}

.btn {
    font-family: Ubuntu;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #E20C19;
    padding: 25px 45px;
    text-transform: uppercase;
    border-radius: 0;
}

.btn:hover, .btn :focus{
        background-color:#DA2B0D;
        color:#fff;
    }
/*Modal*/
.popup {
}

.modal-content {
    border-radius: 0;
    border:none;
}

.modal-body {
    padding: 60px;
}

    .modal-body .close {
        background: url('/images/icon_close.png');
        width: 16px;
        height: 17px;
        text-shadow: none;
        opacity: 1;
    }

    .modal-body h3 {
        font-family: Ubuntu;
        font-size: 30px;
        font-weight: 500;
        color: #E20C19;
        margin: 0 0 20px 0;
    }

    .modal-body p {
        font-size: 15px;
        font-weight: 300;
        color: #333333;
    }
    .modal-body a{font-size: 15px;
        font-weight: 300;}

    .modal-body p.title {
        font-size: 15px;
        font-weight: 500;
        color: #766E68;
    }
    .modal-body h4{font-weight:500;font-size:15px;color:#333333;}

    .modal-body .btn {
        padding: 25px 76px;
        border:none;
    }
    .modal-body .btn:hover, .modal-body .btn :focus{
        background-color:#DA2B0D;
    }
/*Footer*/
.footer {
    background-color: #EFEDEA;
}

    .footer .footer-content {
        padding: 35px 15px;
    }

    .footer p {
        font-family: Ubuntu;
        font-size: 10px;
        font-style: italic;
        text-align: center;
        color: #333333;
    }

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;
}

.table {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.require{color: #E20C19;}
.error{position:relative;}
.field-validation-error{color: #E20C19;position:absolute;top:-30px;}

@media all and (max-width: 1024px) {
    /*.farm-data .container .farm-data-content input {
        padding: 25px 10px;
    }

    .calculator .cal-content input {
        padding: 25px 10px;
    }*/
}

@media all and (max-width: 768px) {
    .navbar{height:20px;}
    .navbar .container .logo {
        top: 15px;
        left: 0;
        right:0;
        margin:0 auto;
    }
    .centertoTop{margin-top:50px;}
    .header-image{max-height:300px;min-height:0;}
    .header-content{top:18%;bottom:0;}
    .header-content h1{font-size:30px;}
    .header-content h1::after{max-width:200px;}
    .header-content p{font-size:20px;line-height:1.25;}

    .padding-left-none, .padding-right-none, .padding-mob {
        padding: 0 15px;
    }
    .padding-mob20{padding:0 20px;}
    .introduction h3{font-size:18px;padding-top:30px;}
    .your-details .container h3{font-size:15px;}
    .calculator h3{font-size:18px;}
    .your-details .container .survey label {
        width: 90%;
        margin-left: 10px;
    }

    .text-center-mob {
        text-align: center !important;
    }

    .farm-data .container .farm-data-content .content-col {
        display: block;
    }

        .farm-data .container .farm-data-content .content-col > [class^="col-"], .farm-data .container .farm-data-content .content-col > [class*=" col-"] {
            display: block;
            text-align: center;
            overflow: hidden;
        }

    .farm-data .container .farm-data-content label {
        text-align: center;
        padding: 0;
    }

    .farm-data .container .farm-data-content .col-xs-11 label {
        margin-left:15%;
    }

    .farm-data .container .farm-data-content input {
        text-align: center;
    }

    .farm-data .container .farm-data-content p {
        text-align: center;
    }

    .mob-flex {
        display: flex !important;
    }

    .calculator .cal-content .content-col {
        display: block;
    }

        .calculator .cal-content .content-col > [class^="col-"], .calculator .cal-content .content-col > [class*=" col-"] {
            display: block;
            text-align: center;
            overflow: hidden;
        }

        .calculator .cal-content .content-col .col-xs-11 label {
            margin-left:15%;
        }


        .calculator .cal-content .content-col label {
            text-align: center;
            padding: 0;
        }

    .calculator .cal-content input {
        text-align: center;
    }

    .calculator .cal-content p {
        text-align: center;
    }

    .calculator h3 {
        text-align: center;
        padding:20px 0;
    }

    .calculator .cal-header p.lely {
        text-align: center;
    }

    .btn {
        width: 100%;
    }

    .modal-dialog {
        width: 100%;
        max-width: 600px;
        margin:5% 0 0 0;
        padding:0 15px;
    }
    .modal-body{padding:30px;}
    .modal-body .btn{padding:20px 76px;}
    .footer p{font-size:13px;}
    .table{height:200px;}
    .mob-bot20{margin-bottom:20px;}
}

@media all and (max-width: 480px) {
    .header-content{top:23%;}
}

@media all and (max-width: 320px) {
    .header-content{top:29%;}
    .calculator .cal-content input{padding:15px 5px;}
}