/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
ul{margin: 0; padding: 0;}
p{padding: 0; margin: 0;}
ul li{list-style: none;}
a{text-decoration: none;}
h1, h2, h3, h4, h5, h6{margin: 0; padding: 0;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{margin: 0; padding: 0; color: #8A8282; font-family: 'Roboto', sans-serif; /*font-family: 'Roboto Condensed', sans-serif;*/ background: url(../img/bg2.jpg);}
#main{width: 1000px; margin: 0 auto; background: #fff;box-shadow:2px 2px 2px rgba(105, 103, 103, 0.75); border: 1px solid rgba(204, 195, 195, 0.84);}
.header{}
.top_header{width:100%; height: 40px; background:url(../img/bg1.jpg); opacity: 0.3; box-shadow:2px 2px 2px rgba(143, 132, 132, 0.32);}
.top_header span{font-weight: 700; padding-right: 5px;}
.logo{width:200px; float: left; margin-top: 16px; margin-left: 16px;}
.logo img{width: 100%;}
.menu{float: right; margin-top: 50px;}
.menu ul{ /*  background:url(../img/menu-line.png) */ background: #0070c0; box-shadow: -4px -2px 4px 0px rgb(221, 221, 221); }
.menu ul li{float: left; position: relative;}
.menu ul li a {padding: 10px 30px; font-family: 'Roboto Condensed', sans-serif; display: block; color: #fff; text-transform: uppercase; font-size: 14px; background: url(../img/bread-bullet.png)  no-repeat; background-position:0 15px; background-size: 4px 10px;transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
.menu ul li:frist-child{}
.menu ul li ul{display: none; position: absolute; top: 39px; z-index: 999; box-shadow: none; left: -194px; width: 526px; background: #000;}
.menu ul li ul li{float: left; position: relative;}
.menu ul li ul li a{ padding: 10px 20px; display: block; ; text-align: left; font-size: 12px; }
.menu ul li ul li:last-child a{border-bottom: 0;}
.menu ul li a:hover{background:#febf00; color:#000; border-radius: 0px; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.menu ul li:first-child a{}
.menu ul li:hover ul{display: block;}
.menu ul ul ul{display: none !important; position: absolute; top: 36px; z-index: 999; box-shadow: none; right: 190px; border-bottom-left-radius: 10px;  border-bottom-right-radius: 10px; left: -298px;  background: rgba(179, 212, 252, 0.9) ; border:1px solid #8C8A8A;}
.menu ul ul ul li{float: left; width: 33%; clear: right; height: 50px;}
.menu ul ul ul li a{color: #000;}
.menu ul ul li:hover ul {display: block !important;}



#slider{position: relative; margin-left: 0px;}

.container{ width: 100%;}
.content{}
.cont_right{float: left; width: 30%;}
.cont_left p{ font-size: 14px; line-height: 20px; padding: 20px; text-align: justify; color: #8A8282;} 
.cont_left{float: left; width: 70%;}
.nesevent{ float: right; width: 250px; padding: 20px; border: 1px solid #EDECEC; box-shadow:2px 2px 2px rgba(105, 103, 103, 0.75);  margin: 5px 7px 6px 4px; background:url(../img/shadow-line.png) repeat-y;}
.nesevent h3{font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 700; color: #0b3060 ; text-transform: uppercase; text-decoration: underline; letter-spacing: 1px;}
.nesevent ul{}
.nesevent ul li{font-size: 14px; color: #8A8282; line-height: 22px;}

#slider .slideshow{width: 1000px;}
.footer{background:#0070c0 ; height: 40px;}
.footer p{float: left; color: #fff; font-size: 14px; padding: 10px 20px 0 20px;}
.footer p:nth-child(2){float: right;}
.footer a{float: right; color: #fff; padding-left: 10px;}

.top_header{}
.top_header p{color: #fff; float: left; padding: 7px 20px; font-family: 'Roboto Condensed', sans-serif;}
.top_header ul{color: #000; float: right;}
.top_header ul li{color: #000; float: left;}
.top_header ul li a{width: 35px; height: 35px; text-indent: -2000px; display: block; }
.top_header ul li:nth-child(1) a{}
.top_header ul li:nth-child(2) a{}
.top_header ul li:nth-child(3) a{}


/*Contact*/
.contact_enq, .contact{float: left; width: 50%;}
.enq_form{ width: 80%; margin-left: 80px;}
.enq_form h3{ font-size: 18px; color: #febf00; margin: 20px 0; text-transform: uppercase;}
.enq_form ul{}
.enq_form ul li{clear: both; padding-bottom: 10px;}
.enq_form ul li label{clear: both; padding-bottom: 10px; display: block; font-size: 14px;}
.enq_form ul li input{ width: 70%; padding:12px 20px 10px; background: none; border: 1px solid #D6D0D0;}
.enq_form ul li textarea{ width: 70%; padding:9px 20px 7px; background: none; border: 1px solid #ADA7A7; height: 60px;}
.enq_form ul li .btnlist{padding: 10px 30px; background: #eb1727; color: #fff; width: auto; border: none; text-transform: uppercase;}
.contact_address{  padding-left: 30px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #0070c0;     margin-right: 40px;}
.contact_address:last-child{border-bottom: 0;}
.contact_address h3{ font-size: 18px; color: #febf00; margin: 20px 0; text-transform: uppercase;}
.contact_address h4{font-size: 18px; color: #0070c0; margin: 10px 0; text-transform: uppercase;}
.contact_address h6{font-size: 18px; color: #eb1727; margin: 0 0 10px; text-transform: uppercase;}
.contact_address p{ font-size: 14px; color: #8A8282;}
.contact_address p span{font-weight: 700;}
.Partno{margin: 10px 0 0 30px;}
.Partno h5{font-weight: 700; font-size: 14px; margin-top: 20px;}
.Partno p{font-size: 14px; color: #8A8282;}

/*Electical Constracting*/
.elect_pow{padding: 20px 20px 10px;}
.product_content_left{float: left; width: 250px;}
.bradcam{}
.bradcam ul{}
.bradcam ul li{ float: left; padding-right: 15px;}
.bradcam ul li a { display: block; color: #000; font-size: 12px; text-transform: uppercase;}
.bradcam ul .selected a{ color: #eb1727; font-weight: 700; text-decoration: underline;}

.elec_contr{ margin-top: 30px; background: url(../img/bcpart.png) 10px center repeat-x; width: 96%;}
.elec_contr h2{color: #0070c0; font-weight: 700; font-size: 18px; background: #fff; text-transform: uppercase; float: left; margin-left: 40px; padding: 0 10px;}
.product_content_right{float: left; width: 710px; height: 500px; overflow-x: auto;}
.prodtit{ margin-top: 20px;}
.prodtit ul{padding-right: 30px;}
.prodtit ul li{ line-height: 24px; padding-left: 20px; background: url(../img/projaros.png) left -30px no-repeat;}
.prodtit ul li:hover{background: url(../img/projaros.png) left -2px no-repeat;}
.prodtit ul li a{color: #000; display: block; padding-bottom: 5px; border-bottom: 1px solid #000; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
.prodtit ul li a:hover{ color: #eb1727; border-bottom: 1px solid #eb1727; font-weight: 700; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.prodtit ul .selected{background: url(../img/projaros.png) left top no-repeat;}
.prodtit ul .selected a{color: #eb1727; font-weight: 700;}

.electpows{ margin: 15px 0;}
.electpows h5{color: #febf00; font-size: 16px; text-transform: uppercase; margin-bottom: 10px;}
.electpows p{font-size: 14px; color: #8A8282;}
.elec_product{ width: 90%; border: 1px solid #DCDCDC; padding: 20px;  box-shadow: 0px 0px 37px 0px rgba(206, 198, 198, 0.52) inset;     border-radius: 30px; margin-bottom: 20px;}
.elpd{text-align: center;}
.elpd h5{ display: inline-block; color: #0070c0; font-size: 18px; text-transform: uppercase;
    border-bottom:2px solid #febf00;/*   background: url(../img/base64/head_hr.png) left bottom repeat-x; */  margin-bottom: 10px; padding: 0 10px;}
.elpd ul{padding-left: 30px;}
.elpd ul li{padding-left: 10px; text-align: left; list-style: url(../img/val_bul.png); font-size: 14px;}
.mar_space{ margin-top: 30px;}

/*Abput Us*/
.about_content{padding: 20px;}
.abt_tit{width: 96%;}
.abt_cont{}
.abt_conts{}
.abt_conts h5{ }
.abt_conts h6{}
.abt_procont{ margin: 0 50px;}
.abt_procont h5{font-size: 18px; padding: 10px 0; font-weight: 700; color: #eb1727; }
.abt_procont h6{ font-size: 16px; padding: 10px 0; font-weight: 700;color: #febf00;}
.abt_procont p{font-size: 14px; line-height: 22px; padding: 0 0px 20px 0px;}
.abt_procont ul{ padding-left: 20px;}
.abt_procont ul li{ line-height: 26px; list-style: url(../img/yes.png);}
.abt_product{}
.abt_product h4{ font-size: 16px; font-weight: 700; margin: 10px 0 5px;}
.abt_product h6{ font-size: 16px; font-weight: 700; padding: 5px 0;}

/*Client*/
.clent_content{padding: 30px;}
.clent_content ul{}
.clent_content ul li{float: left;  text-align: center; margin-right: 20px; margin-bottom: 20px;}
.clent_content ul li:nth-child(3n){margin-right: 0;}
.clent_part{display: inline-block; position: relative;  border: 1px solid #E2E2E2; width: 280px; height: 220px; z-index: 99;}
.client_tit{}
.client_tit h4{}
.clent_part{ }
.client_tit{display: none; position: absolute; top: 100px;  text-transform: uppercase; transition: all 4s ease; -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -o-transition: all 4s ease;}
.clent_part:hover .client_tit{display: block; top: 0; background:rgba(0, 0, 0, 0.8); width: 100%; height: 100%;transition: all 4s ease; -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -o-transition: all 4s ease; }
.client_tit h3{text-align: center; color: #fff; font-size: 16px; font-weight: 700; padding-top: 30px; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; padding-left: 5px; padding-right: 5px;}
.client_tit:hover h3{padding-top: 20px;transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.client_tit p{ text-align: justify; font-size: 11px; line-height: 16px; color: #fff; padding:20px 20px 0; text-align: center; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
 .client_tit:hover p{padding: 10px 20px 0;transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
/*Trading Products*/
.trad_products{width: 500px; height: auto;}
.electric_product{width: 210px; float: right;}
.eleprod{}
.eleprod ul{ padding-left: 10px;}
.eleprod ul li{clear: both; padding-bottom: 2px;}
.eleprod ul li a{color: #fff; display: block;  padding: 5px 5px; background: #0070c0; border-bottom: 1px solid #fff; border-radius: 5px; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.eleprod ul li a:hover{background: #febf00 ; box-shadow: 0 0 37px 0 #A1B8CC  inset; color: #fff; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.eleprod .selected a{background: #febf00 ; box-shadow: 0 0 37px 0 #A1B8CC  inset; color: #fff;}

/*Product Material*/
.product_materials{}
.prodlist{}
.product_img{float: left; border: 1px solid #C7C7C7; border-radius: 10px; box-shadow: 2px 2px 0px 0px rgba(199, 199, 199, 0.34);}
.product_img img{width: 100%; border-radius: 10px; overflow: hidden; width: 200px; height: 200px; transition: all 1s ease;}
.product_img img:hover{transform: scale(1.2)}
.product_des{float: left; width: 53%; padding: 0 10px 0 20px;}
.product_des h5{ font-size: 18px; padding-bottom: 5px; padding-top: 10px; color: #eb1727;}
.product_des p{ font-size: 14px; padding-bottom: 10px;}
.product_des ul{ margin-top: 15px;}
.product_des ul li{ font-size: 14px;}
.prodban{ margin-top: 50px; width: 98%; background: #F1F1F1; border-radius: 10px; border:2px solid rgba(10, 71, 208, 0.35); box-shadow: 0 0 37px 0 #A1B8CC  inset;}
.prodban ul{}
.prodban li{float: left; margin:22px;}
/* .prodban li:nth-child(1), .prodban li:nth-child(2){margin-bottom: 0;} */
.prodban li a{ display: block; width: 200px; height: 150px; overflow: hidden; border-radius: 10px; }
.prodban li a img{border-radius: 10px; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}
.prodban li a img:hover{transform: scale(1.2); display: block; width: 200px; height: 150px; overflow: hidden; transition: all 4s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}

.proddres_cod{  clear: both; display: inline-block; margin-top: 20px;  width: 100%;}
.proddres_cod h6{font-size: 16px; padding: 5px 0; font-family: 'Roboto Condensed', sans-serif; color: #eb1727;}
.proddres_cod ul{}
.proddres_cod ul li{font-size: 14px; background: url(../img/round-arrow.png)  left center no-repeat; background-size: 10px 10px; padding-left: 15px;}
.prodfull{width: 95%; padding-left: 0;}
.prodrange{margin-top: 30px; background: #0070c0; border-radius: 10px;}
.prodrange p{font-size: 12px; padding: 10px; color: #fff;}

.prodes_list{float: left; margin-bottom: 20px;}
.deslind{width: 150px; float: left; padding-right: 10px;}
.deslind img{width: 100%;}
.deslind_des{}
.deslind_des h5{font-size: 18px; color: #eb1727; padding-bottom: 10px;}
.deslind_des p{font-size: 14px; padding-bottom: 10px;}
.deslind_des a{background: #000; color: #fff; padding: 5px 25px; text-transform: uppercase; margin-top: 15px; float: right; margin-right: 10px;border: 1px solid #eb1727;  transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
.deslind_des a:hover{background:#eb1727; color: #fff; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; }
.eleprod h4{font-size:20px; color:#eb1727; text-align: center; padding-bottom: 5px; padding-top: 5px; margin-bottom: 10px; margin-left: 10px;  border: 2px solid #eb1727;}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}