body {
    /*background-image: url("../img/home-img.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    height: 50%;*/
}


.procedure_category .container .row .col-lg-12 {
    margin-top:100px;
}

.procedure_category .container .background {
    background-color: rgba(17, 43, 91, 0.47);
    margin: auto;
}


.banner {
    /*background-image: url("../img/banner.jpg");*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    opacity: .85;
    top: 90px;
    left: 0;
    max-width: 100%;
    z-index: 1;
    max-height: 100%;
}

@media(min-width: 1200px) {
    .banner {
        /*background-image: url("../img/banner.jpg");*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        opacity: .85;
        top: 90px;
        left: 0;
        max-width: 100%;
        z-index: 1;
        max-height: 110%;
    }
}

@media(min-width: 1400px) {
    .banner {
        /*background-image: url("../img/banner.jpg");*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        opacity: .85;
        top: 90px;
        left: 0;
        max-width: 100%;
        z-index: 1;
        max-height: 110%;
    }
}

@media(min-width: 1440px) {
    .banner {
        /*background-image: url("../img/banner.jpg");*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        opacity: .85;
        top: 90px;
        left: 0;
        max-width: 100%;
        z-index: 1;
        max-height: 110%;
    }
}


/* ----------------------------------------  */

#info {
    margin-top: 280px;
    margin-bottom: 10px;
}

@media(min-width: 545px) {
    #info {
        margin-top: 300px;
        margin-bottom: 10px;
    }
}

@media(min-width: 630px) {
    #info {
        margin-top: 360px;
        margin-bottom: 10px;
    }
}

@media(min-width: 686px) {
    #info {
        margin-top: 400px;
        margin-bottom: 10px;
    }
}

@media(min-width: 768px) {
    #info {
        margin-top: 420px;
        margin-bottom: 10px;
    }
}

@media(min-width: 800px) {
    #info {
        margin-top: 460px;
        margin-bottom: 10px;
    }
}

@media(min-width: 880px) {
    #info {
        margin-top: 460px;
        margin-bottom: 10px;
    }
}

@media(min-width: 940px) {
    #info {
        margin-top: 500px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1020px) {
    #info {
        margin-top: 550px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1100px) {
    #info {
        margin-top: 550px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1200px) {
    #info {
        margin-top: 600px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1235px) {
    #info {
        margin-top: 600px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1300px) {
    #info {
        margin-top: 600px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1350px) {
    #info {
        margin-top: 720px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1400px) {
    #info {
        margin-top: 760px;
        margin-bottom: 10px;
    }
}

@media(min-width: 1440px) {
    #info {
        margin-top: 830px;
        margin-bottom: 10px;
    }
}

@media(min-width: 2440px) {
    #info {
        margin-top: 85rem;
        margin-bottom: 10px;
    }
}

@media(min-width: 2570px) {
    #info {
        margin-top: 90rem;
        margin-bottom: 10px;
    }
}

@media(min-width: 2600px) {
    #info {
        margin-top: 85rem;
        margin-bottom: 10px;
    }
}

@media(min-width: 3280px) {
    #info {
        margin-top: 110rem;
        margin-bottom: 10px;
    }
}

.top {
    /*margin-top: 6%;*/
    z-index: 1;
    position: center;
    margin-bottom: 10%;
    /*
    background-color: #f3701e;
    width: 1300px;
    height: 500px;
    left: 0;
    right: 0;
    position: relative;
    */
}

.column {
    float: left;
    text-align: center;
    width: 33.33%;
    padding: 15px;
}

.column-middle {
    float: left;
    text-align: center;
    width: 70%;
    padding: 15px;
}

.column-middle h2 {
    color: #f7931e;
}

.column-side {
    float: left;
    text-align: center;
    width: 15%;
    padding: 15px;
}

.column h2 {
    color: #f7931e;
    font-size: 20px;
}

.column p {
    font-size: 15px;
}

.column img {
    width: 110px;
    height: 110px;
    margin-bottom: 30px;
}

.bottom {
    margin-top: 0%;
    margin-bottom: 4%;
}

@media(min-width: 768px) {
    .bottom .column img {
        width: 130px;
        height: 130px;
        margin-bottom: 15px;
    }

    .bottom .column h2 {
        font-size: 25px;
    }

    .bottom .column p {
        font-size: 17px;
    }
}

@media(min-width: 945px) {
    .bottom .column img {
        width: 150px;
        height: 150px;
        margin-bottom: 15px;
    }
}

@media(min-width: 1200px) {
    .bottom .column img {
        width: 180px;
        height: 180px;
        margin-bottom: 20px;
    }
}

@media(min-width: 1400px) {
    .bottom .column img {
        width: 180px;
        height: 180px;
        margin-bottom: 20px;
    }
}

.row img {
    cursor: pointer;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .column {
        width: 100%;
    }
}

.why-banner {
    display: inline-block;
    margin-top: 50px;
}

.why-banner img {
    height: 250px;
    width: 280px;
}


.why-banner .why-text{
    color: #f7931e;
    float: right;
    padding-right: 0px;
    padding-top: 0px;
    padding-left: 10px;
    width: 43%;
}

.why-banner .why-text h2{
    color: #f7931e;
    font-size: 23px;
}

.why-banner .why-text p {
    font-size: 13px;
}

@media(min-width: 320px) {
    .why-banner img {
        height: 320px;
        width: 380px;
        float: left;
    }
    .why-banner .why-text{
        color: #f7931e;
        float: right;
        margin-right: 2rem;
        padding-right: 35px;
        padding-top: 10px;
        padding-left: 15px;
        width: 65%;
    }
    .why-banner .why-text h2 {
        font-size: 25px;
    }
    .why-banner .why-text p {
        font-size: 15px;
    }
}

@media(min-width: 768px) {
    .why-banner img {
        height: 320px;
        width: 360px;
    }
    .why-banner .why-text{
        color: #f7931e;
        float: right;
        margin-right: 11rem;
        padding-right: 8px;
        padding-top: 5px;
        padding-left: 15px;
        width: 45%;
    }
    .why-banner .why-text h2 {
        font-size: 25px;
    }
    .why-banner .why-text p {
        font-size: 15px;
    }
}

@media(min-width: 991px) {
    .why-banner img {
        height: 320px;
        width: 380px;
        float: left;
    }
    .why-banner .why-text{
        color: #f7931e;
        float: right;
        margin-right: 0px;
        padding-right: 35px;
        padding-top: 10px;
        padding-left: 15px;
        width: 53%;
    }
    .why-banner .why-text h2 {
        font-size: 25px;
    }
    .why-banner .why-text p {
        font-size: 15px;
    }
}

@media(min-width: 1200px) {
    .why-banner img {
        height: 450px;
        width: 500px;
    }
    .why-banner .why-text{
        color: #f7931e;
        float: right;
        margin-right: 0px;
        padding-right: 50px;
        padding-top: 70px;
        padding-left: 25px;
        width: 50%;
    }
}

@media(min-width: 1400px) {
    .why-banner img {
        height: 450px;
        width: 500px;
    }
    .why-banner .why-text{
        color: #f7931e;
        float: right;
        margin-right: 0px;
        padding-right: 50px;
        padding-top: 70px;
        padding-left: 25px;
        width: 50%;
    }
}