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



/*  Font Embedding */

@font-face {
    font-family: 'GothamNarrow-Book';
    src: url('fonts/GothamNarrow-Book/GothamNarrow-Book.eot?#iefix') format('embedded-opentype'),  url('fonts/GothamNarrow-Book/GothamNarrow-Book.otf')  format('opentype'),
    url('fonts/GothamNarrow-Book/GothamNarrow-Book.woff') format('woff'), url('fonts/GothamNarrow-Book/GothamNarrow-Book.ttf')  format('truetype'), url('fonts/GothamNarrow-Book/GothamNarrow-Book.svg#GothamNarrow-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamNarrow-Light';
    src: url('fonts/GothamNarrow-Light/GothamNarrow-Light.eot?#iefix') format('embedded-opentype'),  url('fonts/GothamNarrow-Light/GothamNarrow-Light.otf')  format('opentype'),
    url('fonts/GothamNarrow-Light/GothamNarrow-Light.woff') format('woff'), url('fonts/GothamNarrow-Light/GothamNarrow-Light.ttf')  format('truetype'), url('fonts/GothamNarrow-Light/GothamNarrow-Light.svg#GothamNarrow-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamNarrow-Medium';
    src: url('fonts/GothamNarrow-Medium/GothamNarrow-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/GothamNarrow-Medium/GothamNarrow-Medium.otf')  format('opentype'),
    url('fonts/GothamNarrow-Medium/GothamNarrow-Medium.woff') format('woff'), url('fonts/GothamNarrow-Medium/GothamNarrow-Medium.ttf')  format('truetype'), url('fonts/GothamNarrow-Medium/GothamNarrow-Medium.svg#GothamNarrow-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}


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



/* General / Foundation Overrides */

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

#contact > div.row{
    max-width: 100%;
}

body{
    /* Uncomment this to make the website unresponsive, and use small columns in the html */
    /* min-width: 1050px; */
    /*font-family: 'Open Sans', Arial, sans-serif;*/
    font-family: 'GothamNarrow-Light';
    background-color: #fff;
    color: #000000;
    font-size: 15px;
}

body p,
body li{
    color: #000000;
    font-size: 15px;
    font-family: 'GothamNarrow-Light';
}

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

div.wpcf7 .screen-reader-response{
    width: 100%;
    min-height: 37px;
    height: auto;
    position: relative;
}

div.wpcf7 .screen-reader-response ul{
    display: none;
}

input[type="submit"] {
    border: none;
    color: #ffffff;
    background: #ffb202;
    display: table;
    font-family: 'GothamNarrow-Book';
    font-size: 14px;
    padding: 10px 15px;
    text-transform: uppercase;
    float: right;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea,
[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus{
    -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);
    margin-bottom: 5px;
    color: #fff;
    font-family: 'GothamNarrow-Book';
    font-size: 14px;
    background: transparent;
    border: 1px solid #fff;
}

textarea{
    resize: none;
}

select{
    background-color: transparent;
    color: #fff;
    background-image: url("img/arrow_down.png");
    margin-bottom: 5px;
}

select option{
    color: #000;
}

/*input[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}*/



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

.tp-bullets.simplebullets.round .bullet{
    background: url("img/inactive.png") no-repeat scroll center;
    height: 12px;
    width: 12px;
}

.tp-bullets.simplebullets.round .bullet.selected{
    background: url("img/active.png") no-repeat scroll center;
}

.tp-caption{
    color: #fff !important;
    font-family: 'GothamNarrow-Book';
    font-size: 25px;
    line-height: 25px;
}

.tp-caption h3{
    font-family: 'GothamNarrow-Book';
    color: #fff;
    font-size: 42px;
    line-height: 42px;
}

.tp-caption h2{
    font-family: 'GothamNarrow-Medium';
    color: #ffb202;
    font-size: 50px;
    line-height: 50px;
    text-transform: uppercase;
}

/* Header & Menu */

header{
    background-color: #ffffff;
    padding: 10px 0;
}

#logo{
    display: inline-block;
}

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

.menu a{
    color: #333333;
    text-transform: uppercase;
}

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

.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.selected{
    color: #ffb202;;
}

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

#menu-item-157, #menu-item-149,
.menu-item-157{
    background: rgba(0, 0, 0, 0) url("img/borders.png") no-repeat scroll right center;
    text-align: left;
}

#menu-item-157 a, #menu-item-149 a,
.menu-item-157 a{
    width: 80px;
}

/* Footer * Copyright */

footer{
    background: url("img/footer_bg.jpg") no-repeat scroll center;
    padding: 15px 0;
    background-size: cover;
    height: 135px;
}

footer .affiliates h4{
    font-family: 'GothamNarrow-Medium';
    color: #ffb300;
    text-transform: uppercase;
}

footer .affiliates ul{
    margin-bottom: 12px;
}

footer .affiliates ul li{
    display: inline-block;
    list-style: none;
    margin-right: 10px;

}

footer .affiliates ul li a{
    border-right: 1px solid #ffffff;
    color: #fff;
    padding: 0px 13px 0px 0px;
}

footer .affiliates ul li:last-of-type a{
    border-right: none;
}

.site_info{
    border-top: 1px solid #797979;
    padding-top: 12px;
}

.copyright{
    text-align: left;
}

.copyright p{
    color: #fff;
    margin-bottom: 0px;
    font-size: 12px;
}

.web_design_by{
    float: right;
    background: url("img/firstcom_logo.png") no-repeat scroll left center;
    padding-left: 30px;
    margin-bottom: 0px;
    color: #fff;
    font-size: 12px;
}

p.web_design_by a{
    font-size: 12px;
    color: #fff;
}

p.web_design_by a:hover{
    color: #0f69a8;
    text-decoration: underline;
}



/* Content */

.slider{
    
}

.banner{
    height: 350px;
    background: url('img/banner_s_1.jpg') no-repeat scroll center center;
    background-size: cover;
    margin-bottom: 60px;
}

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

.home  .section_content{
    padding: 10px 0px 20px 0px;
}

h1.title_wrapper {
    padding-bottom: 10px;
    margin-bottom: 30px;
    background: url("img/title_border.png") no-repeat scroll bottom center;
    font-size: 30px;
    color: #ffb202;
    text-transform: uppercase;
    font-family: 'GothamNarrow-Medium';
    text-align: center;
}

h1.title_wrapper .title_1{
    font-family: 'GothamNarrow-Light';
}

.post_content_margin{
    margin-bottom: 50px;
}

.box{
    background: #f1f1f1;
    width: 356px;
}

.featured_content .column:nth-child(1) .box_top{
    border-top: 2px solid #ff7902;
}

.featured_content .column:nth-child(2) .box_top{
    border-top: 2px solid #ffb202;
}

.featured_content .column:nth-child(3) .box_top{
    border-top: 2px solid #00a651;
}

.box .box_content{
    padding: 20px 42px 10px 42px;
    text-align: center;
}

.box .box_content p strong{
    font-family: 'GothamNarrow-Book';
    margin-bottom: 15px;
}

.box_bottom{
    width: 356px;
    height: 113px;
    margin-bottom: 30px;
}

.featured_content .column:nth-child(1) .box_bottom{
    background: url("img/about_bb_1.png") no-repeat scroll;
}

.featured_content .column:nth-child(2) .box_bottom{
    background: url("img/about_bb_2.png") no-repeat scroll;
}

.featured_content .column:nth-child(3) .box_bottom{
    background: url("img/about_bb_3.png") no-repeat scroll;
}

#about .image_wrapper {
    height: 55px;
    margin-bottom: 20px;
    position: relative;
}

#about  .image_wrapper img {
    left: 50%;
    margin: 0 -50% 0 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    max-width: 55px;
    max-height: 55px;
}

.featured_content{
    background: url("img/banner01.jpg") no-repeat scroll top 100px center;
    min-height: 609px;
    width: 100%;
    position: relative;
}

#services .column:nth-child(1) .services_box, #services .column:nth-child(2) .services_box{
    border-top: 2px solid #ff7902 !important;
}

#services .services_box{
    border-top: 2px solid #00a651;
}

ul.list_of_services li{
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #777777;
}

ul.list_of_services{
    margin-bottom: 40px;
    text-align: center;
}

ul.list_of_services li{
    margin-bottom: 15px;
}

ul.list_of_services li:last-of-type{
    margin-right: 0px;
}

ul.list_of_services li a{
    color: #787878;
    padding: 10px 30px;
    display: inline-block;
}

ul.list_of_services li a:hover, ul.list_of_services li.current_page_item a{
    color: #fff;
    background: #ffb202;
}

#services{
    background: url("img/services_bg.jpg") no-repeat scroll top 335px center;
    min-height: 722px;
    width: 100%;
    position: relative;
}

.grid_services_display{
    margin-bottom: 195px;
}

#services  .services_title{
    height: 100px;
    position: relative;
    background: #efefef;
}

#services  .services_title h4{
    color: #000000;
    font-family: "GothamNarrow-Medium";
    font-size: 18px;
    left: 50%;
    max-height: 100px;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    width: 100%;
}

#contact.section_content{
    padding: 0px;
}

#contact > .row > .columns > iframe{
    margin-bottom: -10px;
    height: 100vh;
    /*height: 594px !important;*/
}

.contact_details{
    background: url("img/bg_contact_form.jpg") repeat scroll top center;
    /*height: 600px;*/
    height: 100vh;
    color: #fff;
    padding: 15vh 10vh 30vh 10vh;
    /*padding: 30px 75px;*/
}

.contact_details p{
    color: #fff;
}

.contact_details .contact_info{
    margin-bottom: 15px;
}

.contact_details .contact_info h4{
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'GothamNarrow-Medium';
    text-align: center;
    background: url("img/title_border_2.png") no-repeat scroll bottom center;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.contact_details .contact_info h4 .title_1{
    font-family: 'GothamNarrow-Light';
}

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

#pop_up_box{
    background-color: rgba(255, 255, 255, 0.90);
    bottom: 0;
    display: none;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1005;
}

header .show-for-large > .row,
footer > .row,
footer > .site_info > .row,
#pop_up_box > .row,
#pop_up_box .pop_up_affiliates{
    max-width: 1250px;
}

#pop_up_box #pop_up_logo{
    margin-bottom: 70px;
    display: inline-block;
    margin-top: 10%;
}

#pop_up_box .pop_up_affiliates > .column{
    padding: 0px 6px;
}

#pop_up_box .pop_up_affiliates a{
    color: #666666;
    font-family: 'GothamNarrow-Book';
    font-size: 18px;
    text-transform: uppercase;
}

#pop_up_box .pop_up_affiliates a.selected{
    color: #ffb202;
}

#pop_up_box #close_pop_up{
    padding-top: 45px;
    display: inline-block;
    text-align: right;
    float: right;
    margin-right: 5px;
}

#side_bar{
    position: fixed;
    right: -280px;
    top: 155px;
    z-index: 1005;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

#side_bar ul li{
    background: rgba(0, 0, 0, 0) url("img/inactive.png") no-repeat scroll left top 7px;
    padding-left: 18px;
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}

#side_bar ul li a{
    padding-top: 0px;
    font-size: 13px;
    font-family: 'GothamNarrow-Book';
    color: #b4b4b4;
    text-transform: uppercase;
}

#side_bar li.selected{
    background: rgba(0, 0, 0, 0) url("img/active.png") no-repeat scroll left top 7px;
}

#side_bar li.selected a{
    color: #ffb202;
}

@media screen and (max-width: 1023px) {
    .box{
        width: auto;
        margin-bottom: 10px;
    }

    .box_bottom, #side_bar, .carton_delivery, .home .list_of_services{
        display: none;
    }

    .menu-item-157, .menu-item-149{
        /*display: none !important;*/
    }

    .mobile_menu{
        display: none;
    }

    .mobile_menu > .column{
        padding: 0px !important;
    }

    .menu > li{
        display: table;
    }

    .menu {
        margin-top: 11px;
        border-top: 1px solid #ffb202;
        padding-top: 5px;
    }

    .menu>li:not(.menu-text)>a{
        padding: 5px 15px;
    }

    #view_menu{
        border: 1px solid #fab131;
        padding: 9px 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
    }

    #view_menu span.icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #fab131;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
        margin-bottom: 5px;
    }

    #view_menu span:last-of-type{
        margin-bottom: 0px;
    }

    .banner {
        height: 150px !important;
        margin-bottom: 30px  !important;
    }

    .featured_content .column:nth-child(1) .box_content {
        border-bottom: 2px solid #ff7902;
    }

    .featured_content .column:nth-child(2) .box_content {
        border-bottom: 2px solid #ffb202;
    }

    .featured_content .column:nth-child(3) .box_content {
        border-bottom: 2px solid #00a651;
    }

    #services {
        min-height: 650px;
        background: none;
    }

    #services  .services_title{
        margin-bottom: 10px;
    }

    .grid_services_display{
        margin-bottom: 0px;
    }

    .mobile #logo{
        margin-bottom: 10px !important;
    }

    #logo{
        text-align: center;
    }

    footer {
        background: url("img/footer_bg.jpg") repeat scroll center;
        height: auto;
    }

    footer .affiliates{
        text-align: center;
    }

    .site_info{
        text-align: center;
    }

    .copyright{
        margin-bottom: 10px;
    }

    .copyright p{
        text-align: center;
    }

    .web_design_by {
        float: none;
        background: none;
        padding-left: 0px;
        text-align: center;
    }
}

/* Small only */
@media screen and (max-width: 39.9375em) {
    header{
        padding-bottom: 0px;
    }

    .mobile #logo{
        width: 100%;
        margin: 0 auto;
    }

    .mobile #logo img{
        width: 143px;
    }

    .slider_revo{
        margin-bottom: 20px;
    }

    .banner {
        height: 120px !important;
        margin-bottom: 20px  !important;
    }

    .home  .section_content{
        padding: 0px 0px 20px 0px;
    }

    .box .box_content {
        padding: 20px 5px 10px 5px;
        text-align: center;
    }

    #services {
        min-height: 380px;
        background: none;
    }

    #services .services_title {
        height: 45px;
    }

    ul.list_of_services {
        margin-bottom: 20px;
        text-align: center;
    }

    ul.list_of_services li {
        display: inline-block;
        margin-right: 0px;
        margin-bottom: 5px;
    }

    ul.list_of_services li a {
        color: #787878;
        padding: 5px 10px;
        display: inline-block;
    }

    .contact_details {
        padding: 30px 15px;
    }

    .contact_details {
        background: url("img/bg_contact_form.jpg") repeat scroll top center;
        height: auto;
        min-height: 375px;
    }

    #view_affiliates{
        float: right;
    }

    #view_affiliates, #view_menu{
        display: inline-block;
        margin-top: 4px;
    }
}