@charset "utf-8";

/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
}

.header {
    width: 80%;
    margin: auto;
    margin-top: 15px;
}

.fb-logo {
    margin-top: 15px;
}

.search-2 {
    position: absolute;
    z-index: 99;
    top: 50px;
    background: #fff;
    padding: 10px;
    font-size: 14px;
}

@media (max-width: 420px) {
    .search-2 {
        font-size: 9px;
    }
}

@media (max-width: 420px) {
    a.anchor {
        padding: 3px 10px 3px 10px;
    }
    #txtHint .anchor:hover {
        background-color: #1473b9;
        color: #fff;
    }
}

a.anchor {
    border: 32px;
    height: 25px;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
}

#txtHint .anchor:hover {
    background-color: #1473b9;
    color: #fff;
}

#custom-search-input {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

#custom-search-input .search-query {
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -28px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #D9230F;
}

.search-query:focus + button {
    z-index: 3;
}

.search {
    float: left;
    padding-bottom: 20px;
}

.menu-box {
    width: 100%;
    background-color: #1473b9;
    margin-top: 15px;
}


/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
#container {
    width: 80%;
    margin: auto;
}

.toggle,
[id^=drop] {
    display: none;
}


/* Giving a background-color to the nav container. */

nav {
    margin: auto;
    width: 90%;
    padding: 0;
    background-color: #1473b9;
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: "";
    display: table;
    clear: both;
}


/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    z-index: 50;
}


/* Positioning the navigation items inline */

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background-color: #1473b9;
}


/* Styling the links */

nav a {
    display: block;
    padding: 12px 15px !important;
    color: #FFF;
    font-size: 16px;
    text-decoration: none;
}

nav ul li ul li:hover {
    background: #000000;
}


/* Background color change on Hover */

nav a:hover {
    background-color: #000000;
    color: #fff;
    text-decoration: none;
}


/* Hide Dropdowns by Default
 * and giving it a position of absolute */

nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 50px;
}


/* Display Dropdowns on Hover */

nav ul li:hover > ul {
    display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
    width: 250px;
    float: none;
    display: list-item;
    position: relative;
}


/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left: 170px;
}


/* Change ' +' in order to change the Dropdown symbol */

li > a:after {
    content: ' ';
}

li > a:only-child:after {
    content: '';
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width: 1300px) {
    nav {
        margin: auto;
    }
    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
        text-align: center;
    }
    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        background-color: #254441;
        padding: 14px 20px;
        color: #FFF;
        font-size: 16px;
        text-decoration: none;
        border: none;
        text-align: center;
        font-weight:normal;
    }
    .toggle:hover {
        background-color: #000000;
    }
    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }
    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
    }
    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }
    nav ul ul ul a {
        padding: 0 80px;
    }
    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }
    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121;
    }
    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }
    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
    nav a {
        background-color: #254441;
    }
}

@media all and (max-width: 330px) {
    nav ul li {
        display: block;
        width: 100%;
    }
}

.introduction-box {
    width: 80%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

h2 {
    font-family: Myriad Pro;
    color: #000;
    text-align: center;
    border-bottom: 2px soild#000;
}

.line {
    background-color: #1473b9;
    height: 2px;
    width: 10%;
    margin: auto;
    margin-bottom: 20px;
}

.line6 {
    border-bottom: 2px soild#f00;
    width: 10%;
    margin: auto;
}

.icon-box {
    padding-top: 50px;
}

.box2 {
    padding-top: 40px;
}

.gallery-box {
    width: 80%;
    margin: auto;
}

.img-box {
    padding-top: 40px;
}

.current {
    background-color: #1473b9;
}

.background-img {
    background-image: url(../images/background-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 60px;
    padding-bottom: 20px;
}

.icon-box2 {
    width: 80%;
    margin: auto;
}

.what {
    font-family: Myriad Pro;
    font-size: 30px;
    color: #FFf;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 50px;
}

.yellow-txt {
    font-family: Myriad Pro;
    font-size: 18px;
    color: #FF0;
    padding-top: 20px;
}

.yellow-txt a:hover {
    color: #fff;
}

.Road Signages {
    padding: 10px;
}

.contact-box {
    width: 100%;
    margin: auto;
    background-color: #1473b9;
}

.contact-small {
    width: 80%;
    margin: auto;
    padding-bottom: 40px;
}

.query {
    font-family: Myriad Pro;
    font-size: 24px;
    color: #FF0;
    text-align: center;
    padding-top: 20px;
    padding-left: 20px;
}

.product a {
    font-family: Myriad Pro;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
}

.product a:hover {
    color: #000;
    text-decoration: none;
}

.map {
    width: 100%;
    margin-top: 60px;
    background-color: #8c8984;
}

.map-small {
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 10px;
}

.map2 {
    width: 100%;
    margin-top: 60px;
}

.adress {
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
}

.adress {
    color: #fff;
}

.adress a:hover {
    color: #000;
}

.footer {
    width: 100%;
    background-color: #01101c;
    text-align: center;
    font-family: Myriad Pro;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}

<!--- road signage ---> @import url(../../netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}

.col-item .photo img {
    margin: 0 auto;
    width: 100%;
}

.col-item .info {
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}

.col-item .price {
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5 {
    line-height: 20px;
    margin: 0;
}

.price-text-color {
    color: #219FD1;
}

.col-item .info .rating {
    color: #777;
}

.col-item .rating {
    /*width: 50%;*/
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.col-item .separator {
    border-top: 1px solid #E1E1E1;
}

.clear-left {
    clear: left;
}

.col-item .separator p {
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

.col-item .separator p i {
    margin-right: 5px;
}

.col-item .btn-add {
    width: 50%;
    float: left;
}

.col-item .btn-add {
    border-right: 1px solid #E1E1E1;
}

.col-item .btn-details {
    width: 50%;
    float: left;
    padding-left: 10px;
}

.controls {
    margin-top: 20px;
}

[data-slide="prev"] {
    margin-right: 0px;
}

.road-product {
    width: 80%;
    margin: auto;
}


/*--- start product-page */

.form-box {
    width: 80%;
    margin: auto;
    background-color: #f2f2f2;
    padding: 20px;
}

input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #00C;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}

.lightbox:target {
    outline: none;
    display: block;
}


/*-----recent-project------*/

.tab-box {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

#recent {
    font-family: Myriad Pro;
    color: #000;
    text-align: center;
    font-size: 24px;
    padding-top: 20px;
}

.small-box {
    width: 82%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}

.img1 .thumbnail {
    width: 100%;
    overflow: hidden;
}

.img1 img {
    -webkit-transition: all 0.5s ease;
    ;
}

.img1 img:hover {
    transform: scale(1.3);
}

.color2 {
    background-color: #ee2128 !important;
    color: #fff;
}

.menu-footer {
    padding-top: 30px;
}

.ourclientss {
    margin-top: 60px;
}

.client-icon {
    width: 100%;
    margin: auto;
    margin-top: 40px;
}

.our-clients {
    width: 80%;
    margin: auto;
}

.client-icon1 {
    width: 100%;
    margin: auto;
    margin-top: 40px;
    display: none;
}

.our-clients1 {
    width: 80%;
    margin: auto;
    display: none;
}

@media (max-width: 420px) {
    .nxt-pre {
        padding-left: 125px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .client-icon {
        width: 100%;
        margin: auto;
        margin-top: 40px;
        display: none;
    }
    .our-clients {
        width: 80%;
        margin: auto;
        display: none;
    }
    .client-icon1 {
        width: 100%;
        margin: auto;
        margin-top: 40px;
        display: block;
    }
    .our-clients1 {
        width: 80%;
        margin: auto;
        display: none;
        display: block;
    }
}

.button-about {
    text-align: center;
}

.btn-danger {
    background-color: #1473b9;
    padding: 5px;
    border: 1px solid#1473b9;
}

.btn-danger:hover {
    background-color: #fff;
    border: 1px solid#1473b9;
    color: #000;
    padding: 5px;
}

.about-table {
    margin-top: 50px;
    margin-bottom: 50px;
}

.blink-no {
    font-family: arial;
    color: #000;
    font-size: 24px;
    text-align: center;
}

@media(max-width: 420px) {
    .blink-no {
        font-family: arial;
        color: #000;
        font-size: 9px;
        text-align: center;
    }
}

.callbox {
    background-color: #;
    width: 100%;
}

.callbox3 {
    width: 20%;
    float: left;
}

.callbox2 {
    width: 80%;
    float: right;
}

.popup2 {
    font-family: arial;
    font-size: 14pt;
    color: #000;
    font-weight: bold;
}