﻿body {
    /*background: #444;*/
    /*padding-bottom:2em;*/
}

.main-menu-wrapper {
    position: sticky;
    top: 0px;
    z-index: 1;
    /*display: inline-block;
    float: right;*/
}

.main-wrapper {
    position: relative;
    min-height: 100%;
}

.menu-wrapper {
    padding: 0px;
}

    .menu-wrapper .navbar {
        border-radius: 0px;
    }

    .menu-wrapper .menu {
        width: 100%;
        list-style: none;
        padding-left: 0px;
    }

        /*.menu-wrapper .menu li{
    float:right;
}*/

        .menu-wrapper .menu li a {
            color: #fff;
            display: inline-block;
            padding: 10px 15px;
            font-size: 18px;
            float: left;
            font-weight: 100;
        }

    /*.navbar-brand img {
    max-width: 70%;
    display: inline-block;
    margin-top: 7%;
}*/

    .menu-wrapper .navbar-brand {
        padding: 0px;
    }

.parallax-test {
    background: transparent;
    min-height: 500px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0,0,0,0.5);*/
    z-index: 2;
}

.content {
    padding: 20px;
    /*text-align: center;
    background: #444;
    color: #fff;*/
    font-size: 1.2em;
    min-height: auto;
}

.parallax-test h1 {
    position: absolute;
    top: 35%;
    left: 50%;
    font-size: 50px;
    color: white;
    padding: 10px;
    border: 5px solid #fff;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.content .text-content {
    /*margin: 30px auto;*/
        margin-top: 15px;
    /*display: table;*/
}

.cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 30px;
}


    .cell p {
        font-size: 0.8em;
        margin: 10px;
        text-align: justify;
    }

#menu a.option i {
    margin-right: 5px;
    font-size: 1.3em;
}

.content .icon {
    font-size: 2em;
}

.cell ul {
    padding: 0px;
    text-align: left;
    font-size: 0.8em;
}

.footer {
    background: #f6c14d;
    color: #000;
    /*text-align: center;*/
    padding: 1.2em;
    /*margin-top: 6em;*/
    /*height:60px;
    position:absolute;
    bottom:0;*/
    width: 100%;
}

.custom-navbar-inverse {
    background-color: #222;
}

.navbar-inverse {
    border-color: #222;
}

.input-field {
    width: 45%;
    margin: 10px 5px;
    padding: 12px;
    border: 1px solid #444;
    font-size: 12px;
}

textarea.input-field {
    width: 92%;
    resize: none;
    height: 120px;
}

.form-wrapper {
    padding: 30px 10px;
    border: 2px solid #fff;
}

.button {
    background: #cacaca;
    border: 1px solid #cacaca;
    padding: 12px;
    width: 92%;
    color: #000;
}

    .button:hover {
        background: #ff2d2d;
        color: #fff;
        border-color: #ff2d2d;
    }

/*.owl-carousel img{
    width:auto;
}*/

.clients img {
    padding: 10px;
}

.content h3 {
    text-decoration: underline;
    margin:0px;
}

.morelink {
    font-size: 12px;
    text-align: right;
}

    .morelink a {
        text-decoration: none;
        cursor: pointer;
        color: #fff;
    }

/*13-09-2017*/

/*.companyprofile-wrapper .text-content {
    display: block;
    text-align: justify;
}

    .companyprofile-wrapper .text-content p, .unit-wrapper .text-content p {
        text-align: justify;
        font-size: 0.9em;
        width: 93%;
        margin: 10px auto;
    }

    .companyprofile-wrapper .text-content h3, .unit-wrapper .text-content h3 {
        font-size: 1em;
        width: 92%;
        margin: 0px auto;
    }

    .companyprofile-wrapper .text-content ul, .unit-wrapper .text-content ul, .unit-wrapper .text-content ol {
        font-size: 0.9em;
        padding-left: 10px;
        width: 90%;
        margin: 0px auto;
        text-align: left;
    }*/

.img90per {
    max-width: 90%;
    margin: 0px auto;
}

.paddingtop30 {
    padding-top: 30px;
}

.paddingright30 {
    padding-right: 30px;
}

/*.gov,.pri{
    padding-top:30px;
}*/

.clients-wrapper .section {
    padding: 10px;
}

    .clients-wrapper .section h4 {
        padding: 10px;
    }

.clients-wrapper h3 {
    color: #fff;
    text-align: center;
}

.address-section {
    width: 250px;
    height: 135px;
    /*text-align: left;*/
    background: #ffffff;
    color: #000;
    padding: 10px;
    border: 2px solid #aaa;
    margin: 10px auto;
    box-shadow: -9px 6px 12px 4px #d6d6d6;
}

    .address-section span {
        display: block;
    }

    .address-section .shop-name {
        border-bottom: 1px solid #aaa;
        font-size: 16px;
    }

    .address-section .address {
        font-size: 12px;
        /*text-align: left;*/
        margin: 5px auto;
    }

    .address-section .contacts {
        font-size: 12px;
    }

.shophere-wrapper h4 {
    text-align: left;
    padding-left: 40px;
}

.shophere-wrapper .text-content, .unit-wrapper .text-content {
    width: 100%;
}

.width100 {
    width: 100%;
}

.navbar {
    margin-bottom: 0px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    right: 20%;
    border: 1px solid #000;
    padding: 12px;
    width: 120px;
    background: transparent;
}

    .slider-btn:hover {
        background: #ff0000;
        color: #fff;
        border: 1px solid #ff0000;
    }

.slider-wrapper {
    padding: 0px;
}

.Brand-wrapper {
    background: radial-gradient(circle,#868686,#101010);
    /*background-image: url(../Images/KOFBrandImage.png); background-size: cover; background-repeat: no-repeat;*/
        padding: 10%;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../Images/BackgroundX.png);
}

    .Brand-wrapper .header {
        color: #fff !important;
        font-size: 2em;
        text-align: center;
    }

    .Brand-wrapper .text-content {
        /*color: #fff;
        position: absolute;
        bottom: 5%;
        left: 0;
        padding-top: 2%;
        right: 0;*/
            color: #fff;
    width: 100%;
    }

.header {
    color: #000;
    font-size: 2em;
    /*background: #ff0000;*/
    text-align: center;
    /*padding: 0px 10px 1.1em 10px;*/
    padding: 20px;
}

.Brand-wrapper img {
    width: 70%;
}

.products-wrapper img {
    max-width: 85% !important;
    margin: 0px auto;
    padding:30px;
}

.products-wrapper {
    padding: 2%;
}

    .products-wrapper ul.products {
        padding-left: 10px;
        list-style: none;
        /*color: #000;*/
    }

    .products-wrapper .col-md-4, .products-wrapper .col-md-3, .cooperative-wrapper .col-md-3, .cooperative-wrapper .col-md-4 {
        /*padding: 20px;*/
        /*margin: 0px 5px;*/
        /*background: rgba(0, 0, 0, 0.63);*/
        /*height: 200px;*/
    }

    .products-wrapper .category-header {
        /* text-decoration: underline; */
        padding: 20px;
        color: #fff;
        text-align: center;
        border-right: 1px solid #232323;
        background: #000;
    }

.cooperative-wrapper {
    padding: 2%;
}

.logo {
    max-width: 100%;
    width: 80px;
    padding: 15px;
}

.text-content {
    /*text-align: center;*/
    /*padding: 0px 20px 0px 20px;*/
    color: #000;
    /*width: 50%;
    margin: 0px auto;*/
}

.cooperative-wrapper .col-md-12 {
    padding: 20px;
    margin: 0px 5px;
    /*background: rgba(0, 0, 0, 0.63);*/
}

.cooperative-wrapper .row .header {
    font-size: 1.2em;
    text-decoration: underline;
    padding: 10px;
    color: #000;
    background: transparent;
}

.navbar-inverse .navbar-nav > li > a {
    color: #000 !important;
}

.cooperative-wrapper .text-content {
    width: 100%;
}

/*14-10-2017*/

.text-big {
    font-size: 2em;
}

.text-small {
    font-size: 1em;
}

.carousel-control {
    opacity: 1 !important;
    /*bottom: 35px;
    top: inherit;*/
    left: inherit;
    color: #000;
    display: none;
}

    .carousel-control.left, .carousel-control.right {
        background-image: none;
    }

    /*.carousel-control.left {
        right: 40px;
    }*/

    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
        font-size: 18px;
    }

.whysafal-wrapper {
    padding: 2%;
    background: #f6c14d /*ff7835*/;
    color: #000;
    background-image: url(../Images/Background4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    .whysafal-wrapper .header {
        color: #000;
    }

    .whysafal-wrapper ul {
        padding-left: 10px;
        /*list-style:none;*/
    }

        .whysafal-wrapper ul li {
            padding-bottom: 10px;
        }


.subheader {
    padding: 0px 10px;
    font-size: 18px;
}

/*.thumbsup-bg{
        background-image:url(../Images/thumbsup.png);background-repeat: no-repeat;background-position-x: left;background-size:contain;
    }

    .trophy-bg{
        background-image:url(../Images/trophy.png);background-repeat: no-repeat;background-position-x: right;background-size: contain;
    }*/

/*15-10-2017*/
.red-band {
    padding: 20px;
    background: #ff0000;
    color: #fff;
    text-align: center;
}

ul.awards-list {
    list-style-image: url('../Images/trophybullet.png');
    padding: 3px 0px 3px 10px;
    margin: 0;
}

.padright60px {
    padding-right: 60px;
}

ul.whysafallist {
    direction: rtl;
    list-style-image: url('../Images/thumbsupbullet.png');
    padding: 3px 0px 3px 10px;
    margin: 0;
}

/*16-10-2017*/

.socialmedia-wrapper {
    background: #222;
    padding: 5px;
}

    .socialmedia-wrapper ul {
        margin-bottom: 0px;
    }

        .socialmedia-wrapper ul li a {
            font-size: 14px;
            color: #fff;
            text-decoration: none;
        }


.menu-wrapper .navbar-inverse {
    background: #f6c14d;
    color: #000;
    border: 1px solid #f6c14d;
}

/*17-10-2017*/

.footer img {
    width: 50px;
    margin: 0px 3px;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: -5px;
}

/*18-10-2017*/

.productlist {
    /*padding: 20px;
    margin: 0px auto;
    width: 80%;*/
    /*height: 240px;*/
}

/*Tansparent background */

/*.oil , .oil .category-header{
    background:rgba(246, 193, 77, 0.54);
    color:#000;
}

.agri,.agri .category-header{
    background:rgba(135, 161, 0, 0.54);
    color:#000;
}

.organic , .organic .category-header{
    background:rgba(107, 82, 22, 0.54);
    color:#000;
}*/

/*Solid Background*/

/*.oil ,.oil .category-header{
    background:#f6c14d;
    color:#fff;
}

.agri,.agri .category-header{
    background:#87a100;
    color:#fff;
}

.organic,.organic .category-header{
    background:#6b5216;
    color:#fff;
}*/

.tabletest {
    display: table;
}

.tablecell {
    display: table-cell;
}

.Cell1,.Cell2{
    display:table-cell;
    width:50%;
        vertical-align: middle;
}

.agri{
    background:#829c00 !important;
}

.oil-header{
    background:#e6bc45 !important;
}

.organic{
    background:#575d27 !important;
}

/*07-11-2017*/
.unit-wrapper, .aboutus-wrapper, .contactus-wrapper,.offlineshop-wrapper,.safalproducts-wrapper,.operations-wrapper,.media-wrapper {
    margin-top: 50px;
    margin-bottom: 50px;
}

    /*08-11-2017*/
    .contactus-wrapper .Kof-card {
        background: #fff;
        color: #444;
        border: 1px solid #efefef;
        margin-top: 40%;
        padding: 0px 20px;
        box-shadow: 1px 3px 20px 0px #dabfbf;
            transform: rotate(-7deg);
            width:400px;
    }

        .contactus-wrapper .Kof-card .card-header,
        .contactus-wrapper .Kof-card .card-body,
        .contactus-wrapper .Kof-card .card-footer {
            padding: 10px 0px;
            text-align: center;
        }

        .contactus-wrapper .Kof-card .card-header,
        .contactus-wrapper .Kof-card .card-body {
            border-bottom: 1px solid #ddd;
        }

            .contactus-wrapper .Kof-card .card-header img {
                width: 35px;
                float: left;
                margin-top: 10px;
            }

        .contactus-wrapper .Kof-card .card-body {
            font-size: 13px;
        }

            .contactus-wrapper .Kof-card .card-body span {
                display: block;
                width: 100%;
            }

        .contactus-wrapper .Kof-card .card-footer {
        }


            .contactus-wrapper .Kof-card .card-footer span {
                color: #bd221b;
                font-size: 9px;
                font-weight: 700;
            }

    .contactus-wrapper .company {
        color: #bd221b;
        font-size: 14px;
        padding: 0px 20px;
        font-weight: 700;
    }

    .contactus-wrapper .title {
        font-size: 20px;
        padding: 20px 20px 0px 20px;
        text-align: center;
        display: block;
    }

    .contactus-wrapper .border {
        display: block;
        width: 90%;
        margin: 30px auto 0px auto;
        border: 1px solid #efefef;
    }

    .contactus-wrapper .text-small {
        width: 100%;
        display: block;
        text-align: center;
    }

.enquiry-form-wrapper {
    margin-top: 20px;
    padding: 30px;
    border: 1px #cecece solid;
    background:#efefef;
}

.contactus-wrapper .form-field {
    margin-top: 15px;
    font-size: 13px;
}

    .contactus-wrapper .form-field textarea {
        resize: none;
        height: 100px;
    }

    .contactus-wrapper .form-field .submit {
        width: 100%;
        padding: 15px;
        text-align: center;
        color: #fff;
        background: #ff0000;
        border: 1px solid #ff0000;
        transition:.5s;
    }

    .contactus-wrapper .form-field .submit:hover{
        background:#000;
    }

    .offlineshop-wrapper .content .text-content{
        display:block;
    }

    .product{
        width: 245px;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 10px;
    margin: 10px;
    }

    .product img{
        padding:10px;
        transition-timing-function: linear;
        transition:.3s transform linear;
    }

    .product img:hover{        
        transform:scale(1.1) rotate(10deg) ;
    }

    .product .product-name{
        font-size:12px;
        padding: 0px 0px 5px 0px;
        border-bottom:1px solid #ccc;
        width:100%;
        display:block;
    }


    /*10-11-2017*/

    .contactus-wrapper .form-control{
        border-radius:0px;
    }

    /*11-11-2017*/
    .aboutus-wrapper ul{
            padding-left: 20px;
    }


    img.filler-img1{
        max-width: 60%;
    margin: 30px auto 0px auto;
    box-shadow: -9px 9px 3px #ccc;
    border: 40px solid #9c4646;
    padding: 30px;
    transform: rotate(-10deg);
    }

    img.filler-img1:nth-child(odd){
        border: 40px solid #d6c464;
    }

    img.filler-img2{
        max-width: 60%;
    margin: 30px auto 0px auto;
    box-shadow: -9px 9px 3px #ccc;
    border: 40px solid #d62626;
    padding: 30px;
    transform: rotate(10deg);
    }

        img.filler-img2:nth-child(odd) {
            border: 40px solid #2a2779;
        }

        .aboutus-wrapper,.operations-wrapper{
            font-size:12px;
        }

@media(max-width:768px) {
    .cell, .text-content {
        display: block;
    }

    .content {
        padding: 10px;
    }

    .cell {
        padding: 10px;
    }

    .input-field, textarea.input-field {
        width: 100%;
        margin: 10px auto;
    }

    .text-content {
        width: 100%;
    }

    .Brand-wrapper .text-content {
        position: inherit;
    }

    .contactus-wrapper .Kof-card{
        margin-top:10%;
        margin-bottom:10%;
    }
}

@media (max-width:480px){
    .contactus-wrapper .Kof-card {
        width:100%;
    }
}