/*
Theme Name: Firstcom Solutions
Author: Firstcom Solutions
Author URI: http://firstcom.com.sg/
Version: 1.0
*/



/*  Font Embedding */

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

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);



/* General / Foundation Overrides */

/* Foundation container size */
.row{
    max-width: 1050px;
}

body{
    /* Uncomment this to make the website unresponsive, and use small columns in the html */
    /* min-width: 1050px; */
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    color: #7a796e;
    font-size: 14px;
}

body p,
body li{
    color: #7a796e;
    font-size: 14px;
}

body a{
    color: inherit;
}

body a:hover,
body a:focus{
    color: #343453;
}

body input,
body textarea{
    margin-bottom: 8px;
}

textarea,
textarea[rows]{
    height: 100px;
}

.margin-bottom-small{
    margin-bottom: 15px;
}

.margin-bottom-medium{
    margin-bottom: 30px;
}

.margin-bottom-large{
    margin-bottom: 60px;
}

.margin-top-small{
    margin-top: 15px;
}

.margin-top-medium{
    margin-top: 30px;
}

.margin-top-large{
    margin-top: 60px;
}


/* WordPress TinyMCE */
/* These styles are required for alignment to work */

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }



/* Wordpress Plugins - Contact Form 7 */

.wpcf7-form-control-wrap{
    width: 100%;
}

.wpcf7-not-valid-tip{
    margin-bottom: 10px;
}

.wpcf7-response-output{
	margin: 0 !important;
}



/* Wordpress Plugins - Slider Revolution */
/* Arrows and Bullets */

/*
.tp-leftarrow{
    width: 18px !important;
    height: 28px !important;
    background-image: url() !important;
}

.tp-rightarrow{
    width: 18px !important;
    height: 28px !important;
    background-image: url() !important;
}

.tp-bullets.simplebullets.round .bullet{
    border-radius: 50%;
    background: none;
    background-color: white;
    border: none;
    width: 14px;
    height: 14px;
    margin: 0 8px;
}

.tp-bullets.simplebullets.round .bullet.selected{
    border-radius: 50%;
    background: none;
    background-color: red;
    border: none;
    width: 14px;
    height: 14px;
}
*/



/* Header & Menu */

header{
    background-color: #fff;
    padding: 10px 0;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
    position: fixed;
    width: 100%;
    z-index: 999;
}

#logo{
    display: inline-block;
}

.menu{
    list-style-type: none;
    margin: 0;
    margin-top: 7px;
}

.menu a{
    color: #7a796e;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
}

.menu > li{
    display: inline-block;
    position: relative;
    margin-right: 1px;
}

.menu > li:not(.menu-text) > a {
    display: block;
    line-height: 1;
    padding: 10px 7px;
}

.menu > li:last-child{
    margin-right: 0;
}

.menu > li:hover > a,
.menu > .current-menu-item > a,
.menu > .current-menu-parent > a,
.menu > .current-page-ancestor > a,
.menu > li > a.active{
    color: #77b116;
}

.menu .sub-menu{
    display: none;
    list-style-type: none;
    margin: 0;
}

.menu > .menu-item-has-children:hover > .sub-menu{
    display: block;
    position: absolute;
}

.menu .sub-menu > li {
    display: block;
    background: white;
    width: 100px;
    text-align: left;
}

.menu .sub-menu > li > a {
    display: block;
    padding: 5px 10px;
}


.off-canvas{
    max-height: none;
}

/* Footer * Copyright */

footer{
    background-color: #fff;
    padding: 20px 0;
}

.copyright{
    text-align: left;
    font-size: 12px;
}

.copyright p{
    margin-bottom: 0px;
}

.footer_menu{
    margin-left: 0px;
    text-align: right;
}

.footer_menu ul{
    margin-bottom: 0px;
}

.footer_menu li{
    list-style: none;
    padding-left: 10px;
    margin-bottom: 0px;
    display: inline-block;
    text-align: left;
    color: #7a796e;
}

.footer_menu li a{
    color: #7a796e;
}

.footer_menu li:last-of-type{
    display: none;
}


/* Content */

.slider_revo{
    margin-top: 145px;
    position: fixed;
    top: 0;
    width: 100%;
}

.slider_revo2 {
    margin-top: 65px;
}

.off-canvas-content{
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,1);
}

.home-content{
    padding: 50px 0;
    background-color: white;
}

.home #content_wrapper {
    margin-top: 670px;
    padding: 0px;
    position: relative;
    width: 100%;
    z-index: 99;
}

.home #content_wrapper.content_wrapper{
    margin-top: 560px;
}

#content_wrapper .top_wrapper {
    background: transparent url("img/bend.png") no-repeat scroll top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 140px;
    width: 100%;
    margin-top: -110px;
}

.home .section{
    padding: 50px 0px;
}

#profile{
    background: #fbf9f7;
    min-height: 610px;
    text-align: center;

}

#e-fulfillment-center{
    background: #ffffff;
    min-height: 690px;
}

#events{
    background: #ffffff;
    min-height: 690px;
}

#click-collect{
    background: #fbf9f7;
    min-height: 200px;
}

#contact{
    background: url("img/contact_bg.png") no-repeat scroll center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 670px;
}

#grocermart-web{
    padding-bottom: 0px;
}

#bg_parallax{
    /*background: url("img/grocermart-web.jpg") no-repeat scroll top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 1002px;
    width: 100%;*/
    background-attachment: fixed;
    background-image: url("img/grocermart-web.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    width: 100%;
    min-height: 480px;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 50px 0px;
}

.bg_gray{
    background: url("img/bg_gray.png");
    /*min-height: 916px;*/
    min-height: 400px;
    max-width: 1180px;
    margin: 0 auto;
}

.post_content{
    margin-bottom: 50px;
}



.post_content_margin ul{
    margin-left:  13px;
}

.vision ul, .mission ul{
    margin-left:  13px;
}

.e_fulfillment_items .column{
    padding: 0px 10px;
}

.e_fulfillment_items .item_box{
    border: 1px solid #eae7e3;
    text-align: center;
    padding: 10px 30px;
    margin-bottom: 20px;
}

.e_fulfillment_items .item_box h4{
    color: #7a796e;
    font-size: 18px;
    text-transform: uppercase;
}

.e_fulfillment_items .item_box p:last-of-type{
    margin-bottom: 0px;
}

.album_listing .item_box_wrapper{
    background: url("img/album.png");
    height: 204px;
    width: 280px;
    padding-top: 17px;
    padding-left: 0px;
    margin-bottom: 10px;
}

.image_wrapper{
    position: relative;
    height: 170px;
    max-width: 250px;
    margin: 0 auto;
    margin-bottom: 30px;

}

.image_wrapper img {
    left: 50%;
    margin: 0 -50% 0 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 170px;
    max-width: 250px;
}

.item_box_wrapper a:hover .overlay_content{
    display: block;
}

.overlay_content{
    background: rgba(255, 255, 255, 0.80);
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    padding-top: 75px;
    text-align: center;
    display: none;
}

.overlay_content h4{
    color: #77b116;
    font-size: 15px;
}


.map_icon{
    background: url("img/map_icon.png") no-repeat scroll center center;
    height: 97px;
    width: 71px;
    display: inline-block;
    position: relative;
    bottom: -170px;
}

.app_store{
    background: url("img/appstore.png") no-repeat scroll center center;
    height: 39px;
    width: 129px;
    display: inline-block;
}

.google_play{
    background: url("img/googleplay.png") no-repeat scroll center center;
    height: 38px;
    width: 117px;
    display: inline-block;
}

.shop_online{
    background: url("img/shop_online.png") no-repeat scroll center center;
    height: 48px;
    width: 170px;
    display: inline-block;
}

.shop_online span{
    color: #fff;
    margin-top: 13px;
    display: inline-block;
    margin-left: 45px;
}

.shop_online:hover span{
    color: #77b116;
}

h2{
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    line-height: 24px;
    color: #7a796e;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.holder{
    margin-top: 25px;
}

.holder a{
    color: #7a796e;
    font-size: 14px;
}

.holder a:hover,
.holder a.jp-current{
    color: #77b116;
    background: none;
}

.tp-caption > .tp-splitted{
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 15px;
    color: #7a796e;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated2{
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.gmap iframe{
    width: 100%;
    height: 300px;
    line-height: 0;
}

@media screen and (max-width: 39.9375em) {
    .slider_revo {
        margin-top: 39px;
    }

    .tp-caption > .tp-splitted{
        display: none !important;
    }

    #content_wrapper .top_wrapper {
        margin-top: -460px;
    }

    .album_listing .item_box_wrapper{
        margin: 0 auto;
    }

    .grocermart_featured_image{
        display: none;
    }

    #grocermart-web{
        padding-bottom: 15px;
    }

    .home .section {
        padding: 15px 0px;
    }


}

@media screen and (max-width: 1023px) {
    header{
        padding: 0px;
    }

    .menu_header li
    {
        display: block;
    }

    .copyright, .footer_menu{
        text-align: center;
    }
}