/*================================
      TABLE OF CONTENTS
==================================

   PROJECT : SP TECH ENGINEERING PVT.LTD	
	
	1.Default
	2.Predefined
	3.Header
	4.Theme
	5.Banner
	6.Home
	7.Pages
	8.Footer
	9.Media Queries
	10.Font Family
	
===================================*/


/*---------------------------------------
   1. Default              
-----------------------------------------*/


body {background: #fff;margin: 0 auto;font-family:"Open Sans",  sans-serif, arial ;font-size: 100%}
html {border: 0 none;margin: 0;padding: 0}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, 
section {border: 0 none;font-family: "Open Sans",  sans-serif, arial ;font-size: 14px; line-height:22px; color:#222; font-style: normal;font-weight: inherit;margin: 0;
padding: 0;outline: 0 none; list-style: none;}
::selection {background:#17894d;color:#fff} 
::-moz-selection {color:#fff; background:#17894d; }


/*---------------------------------------
   2. Predefined   
-----------------------------------------*/

.clr {clear: both}
.fl {float: left}
.fr {float: right}
.ac {text-align: center}
.ar {text-align: right}
.al {text-align: left}
.space10 {width: 100%;height: 10px}
.space20 {width: 100%;height: 20px}
.cf:before, .cf:after {content: "";display: table}
.cf:after {clear: both}
.cf {display:table}

.gc3 {width:100% !important}

.mr10{ margin-right:10px;}
.mr20{ margin-right:20px  ;}
.mt10{ margin-top:10px }
.mt20{ margin-top:20px }
.mb20{ margin-bottom:20px;}
.mb10{ margin-bottom:10px;}
.ml10{ margin-left:10px;}
.ml20{ margin-left:20px ;}
.ml15{ margin-left:15px;}
.mr10{ margin-right:10px;}
.mr15{ margin-right:15px;}
.ml5 {  margin-left:5px; }
.pr10{ padding-right:10px;}
.pr20{ padding-right:20px;}
.pt10{ padding-top:10px }
.pt20{ padding-top:20px }
.pb20{ padding-bottom:20px;}
.pb10{ padding-bottom:10px;}
.pl10{ padding-left:10px;}
.pl20{ padding-left:20px;}

.colorf{color:#fff}
.bigger-txt{ font-size:40px;line-height:34px; }
.big-txt{ font-size:35px !important;font-weight: 600}
.mid-txt{font-size: 30px;font-weight: 600;}
.midder-txt {font-size:25px;}
.small-txt{ font-size:16px;}
.smaller-txt{ font-size:14px ;}


.lh18{ line-height:18px;}
.lh20{ line-height:20px;}
.lh22{ line-height:22px;}
.lh24{ line-height:24px;}
.lh30{ line-height:30px;}
.bold-txt {font-weight:700 !important;}
.light-bold-txt {font-weight:600;}

/*** Hide & Seeek ***/
.desk-only {display: block}
.tab-only {display: none}
.mob-only {display: none}
.desk-none {display: none}
.tab-none {display: block}
.mob-none {display: block}
/*** end ***/


/*---------------------------------------
   3. Header   
-----------------------------------------*/
.top-strip {min-height: 45px;max-height:100%; padding-top:40px}
.top-strip .split-right, .top-strip .split-left {padding: 10px 15px;min-height: 45px;max-height:100%} 
.top-strip .split-right span, .top-strip .split-left span {margin-right:5px}
.top-strip .split-right, .top-strip ul li  a  {border-right: 0px solid #ccc;}
.top-strip ul li  a  span {color:#0172be}
.top-strip .split-left {border-left: 1px solid #ccc;}
.top-strip ul {display:table;float:left;}
.top-strip ul li {padding:0;margin:0;line-height: 0;display:  block;}
.top-strip ul li  a {display: block;padding: 0;margin:0px;max-height:100%;float:  left;font-size:  17px;line-height:  26px;}
.top-strip ul li:first-child a, .top-strip ul li:first-child span {}
.top-strip ul li  a:hover {transition:all ease 0.4s;text-decoration:  underline;}
.top-strip ul li  a:hover span {color:#fff}
.top-strip .split-right span {border-radius: 100%;width: 17px;text-align: center;font-size: 11px;background: #0172be;color: #fff;height: 17px;vertical-align: middle;line-height: 17px;}
font img {width: 20px;margin-left: 5px;padding:0px;float:right;display:table;}
.top-strip ul li i {width: 25px;height: 25px;text-align: center;border-radius: 100%;color: #0171b8;line-height: 21px;border: 2px solid #ccc;font-size:12px;}
/*---------------------------------------
   4. Theme   
-----------------------------------------*/
.theme-1{background:#0172be}
.theme-2{background:#17894d}

.theme-1-txt{color: #0370bc;}
.theme-2-txt{color:#17894d !important}

/*---------------------------------------
   5. Banner   
-----------------------------------------*/
.banner {background:url(../images/banner-1.jpg) no-repeat center;height:520px;width:100%;overflow:hidden;padding:0px;margin:0px;background-size:cover}
.product-banner {background-size:cover !important;height:300px;background-position:  center !important;}
.breadcrumb h1   {font-weight: 600;color: #fff;padding: 20px 0px}
.breadcrumb a {font-size:13px;color:#fff;border-top:1px solid #fff;padding:5px 10px}
.breadcrumb a:hover {border-top:1px solid #fff;color:#fff;transition: all ease 0.9s;background:#0172be }
/*---------------------------------------
   6. Home   
-----------------------------------------*/

/*=======================================
   Service box
/*=======================================*/
.six-boxes {padding:50px 0px; }
.six-boxes .box-left {border-right:1px solid #ccc;border-bottom:1px solid #ccc;padding:40px 0px; height:206px}
.six-boxes .box-right {border-left:1px solid #ccc;border-bottom:1px solid #ccc;padding:40px 0px; height:206px}
.six-boxes .box-middle {border-bottom:1px solid #ccc;padding:40px 0px; height:206px}
.six-boxes .box-bottom-none {border-bottom:0px}
.six-boxes span.title a {padding: 0px 0px 10px 0px; display: block;}
.six-boxes span.title a, .six-boxes span {font-size: 19px;font-weight: 600;color: #0170b9;}
.six-boxes span.title a:hover {color:#0172be;transition:all ease 0.5s;text-docoration:none;}
.six-boxes p {font-size:13px}
.six-boxes  .service-icons img {margin: 0px auto;margin-bottom: 20px;}
.six-boxes .box-left:hover img, .six-boxes .box-right:hover img, .six-boxes .box-middle:hover img {transform:rotate(-360deg);transition:all ease 0.5s}
.six-boxes button {border: 0px;background: none;font-size: 14px;padding-top: 10px;color: #0172be;font-weight: 600;}

/*=======================================
   Logo + Content
/*=======================================*/
.logo-sec img{border-right:2px solid #ccc;margin-right:10px;padding:10px 10px 10px 0px}
.logo-sec span {line-height:35px}

/*=======================================
	Image Background
/*=======================================*/
.pic , .desc {padding:40px 0px}
.our-company .pic {background:url(../images/5.png) no-repeat center;height:400px;background-size:500px}
.keys-of-success  .pic {background:url(../images/solar-family.png) no-repeat center !important;height:400px;background-size:400px  !important}
.our-company{box-shadow: 5px -2px 15px -2px #b6b6b6; background: #f9f9f9;border-bottom: 1px solid #e4e4e4;}
.border {width:100%;display:table;background:url(../images/line-border.png) no-repeat center;height:40px;margin: 20px 0px;}
.simple-line {width:100%;display:table;background:url(../images/line.png) no-repeat center;height:10px;margin: 10px 0px;}
/*=======================================
   Paddings
/*=======================================*/
.welcome-box, .tesimonials-sec, .feature-project, .our-brands, .our-company, .keys-of-success, .events-slider, .gallery-sec {padding:40px 0px}
.our-brands {background:#f9f9f9;}
.our-brands, .feature-project {padding-bottom:90px !important}

/*=======================================
	Common
/*=======================================*/
.feature-project, .gallery-sec, .tesimonials-sec {background:#f9f9f9}
.keys-of-success ul li i {color: #17894d;padding-right:5px}
.keys-of-success ul li {line-height:30px !important}
.common-pages .sec .directors li {
    list-style: none !important;
    background: none;
    padding: 0 0 30px 0;
}
.common-pages .sec .directors {
    padding: 30px 0;
}
p.brnch {
    padding: 10px 0 0 0!important;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    color: #0171b8;
}
.common-pages .sec .directors a {
    text-decoration: none;
    color: #222;
}

p.prsn {
    font-size: 18px;
    padding: 0 !important;
    font-weight: bold;
}
p.desig {
    padding: 0 !important;
}
#pagehigh365 .sec ul {width:auto; padding:0px 0px }


/*=======================================
   Testimonials
/*=======================================*/
.testimonialSlider {border: 1px solid #c6c4c4;border-radius: 100px;position: relative !important;background: #fff;margin-bottom:20px;overflow:hidden}
/*.testimonialSlider  span.fa {position: absolute;right: -30px;top: 35%;background: #3d9b3b;border: 1px sold #ccc;font-size: 35px;padding: 20px;border-radius: 100px;
text-align: center;vertical-align: ;color: #fff;}
*/

.testimonialSlider span.fa {padding:0px 5px;color: #d9d9d9;}
.testi-list li {padding:20px 0px}
.testi-list li p {padding:0px 0px 10px}
/*=======================================
   Feauture Slider
/*=======================================*/
.img-sec {padding:0px}
.des-sec {background:#17894d;padding:10px 20px;box-sizing:border-box;min-height: 367px;}
.des-sec h2 {font-size:34px;color:#fff;text-align:left !important;font-weight:600;border-bottom:1px dashed #99E6BE;padding:30px 0px;margin-bottom:10px;}
.des-sec p {text-align:left !important;color:#fff;padding:0px 0px 10px 0px}
.des-sec button{float:left;background:#17894d;;border:1px solid #fff;border-radius:0px;color:#fff;margin:0px;text-shadow:none}
.des-sec button:hover{background:#fff;color:#0172be;transition:all ease 0.4s;}
/*Vertical marqueee*/


#inner {position: absolute;width:100%}
.inner-wrapper {width:95%;display:block; margin:0  auto;}
#box {position: relative;height: 320px;width: 90%;overflow: hidden;margin:40px auto;border-radius:30px}
#box1 {position: absolute; }
.top {top: 0px;}
.bottom {bottom: 0px;}
.left {left: 0px;}
.right {right: 0px;}
.content {background:url(../images/list-bg.png) no-repeat left 15px;padding: 8px 15px;width:100%;text-align:left;border-bottom:1px dashed #c1c1c1; }
.toLeft {float: left; }


/*---------------------------------------
   Typhography            
-----------------------------------------*/
.six-boxes h1, .our-company h1, .tesimonials-sec  h1, .our-brands h1, .feature-project h1, .gallery-sec h1 {padding: 20px 0px 10px 0px;display: table;width: 100%;}
.keys-of-success h1 {padding:40px 0px 30px 0px;}
.desc p.lead, .desc .lead span {font-size: 14px;font-weight: 600;} 
.desc p.lead{padding:6px 0px 6px 30px }

.sec h1 {font-size: 28px;font-weight: 700;padding: 0px 0px 25px;color: #0172be;float: left;position: relative;margin: 0 0 20px 0;width:100%}
.sec h1::before {content: '';position: absolute;left: 0;bottom: 0;width:100%;border-bottom: double;border-color:  #ccc;}
.sec h3 {font-size: 24px;font-weight: 700;padding: 20px 0px 20px 0px;color: #0172be;float: left;position: relative;width:100%;line-height: 35px;}
.sec p {padding:10px 0px}
.sec a {text-decoration:underline;color:#de4141}


/*---------------------------------------
   7. Pages              
-----------------------------------------*/
main{padding:30px 0px}
section.sec {}
aside.col-md-3 {padding-left:0px}


.common-pages .sec ul {padding:15px 0px;float: left;width:100%}
.common-pages .sec ul li {padding:0px 40px 5px;background:url(../images/list-bg.png) no-repeat 20px 8px;line-height: 25px;}
.common-pages .sec ul li:last-child{padding-bottom:0px}
.common-pages .sec .page-img img {max-width:100%;overflow:hidden}
.common-pages .sec div.col-md-6 {padding:0px 15px 10px 0px}


/*contact-form*/
.form-inline {padding:40px 0px}
.form-inline input[type="text"], .form-inline textarea{border:1px solid #ccc;border-radius:0px;}
.form-inline input[type="text"]:focus, .form-inline textarea:focus {box-shadow:none;border:1px solid #0172be}
.form-inline input.with90 {width: 90%;}
.form-inline .form-group {padding:10px 0px}
.contact-address li {margin:0px 0px 20px;padding:20px}
.contact-address li .box {background:#f5f5f5;margin:0px 0px 20px;padding:20px;height: 240px;}
.contact-address li  p {font-size:20px;padding-bottom:20px;color: #0172be;}
.contact-address li  i {border: 1px solid #0172be;margin-right: 10px;border-radius: 100%;width: 30px;height: 30px;text-align: center;padding-top: 5px;font-size: 16px;background: #0172be;color: #fff;vertical-align:  middle;line-height:  20px;}
#contactus .form-control {padding: 13px 12px; height:auto}

/*enquiry-form*/
.enquiry-box {border: 1px solid #ccc;margin:60px 0 80px}
.enquiry-box .form-inline {padding:0}
.enquiry-box .form-inline input:focus, .enquiry-box .form-inline textarea:focus{box-shadow:none;border:1px solid #0172be}
.enquiry-box::before{content: '';position: absolute;left: 4px;bottom: 4px;width: 0;height: 0;border-bottom: 19px solid #ccc;border-right: 19px solid transparent}
.enquiry-box::after{content: '';position: absolute;right: 4px;bottom: 4px;width: 0;height: 0;border-bottom: 19px solid #ccc;border-left: 19px solid transparent;}
.enquiry-box p {position: relative;top: -25px;background: #e2e2e2;width: 30%;margin: 0px auto;padding: 10px;border-radius: 50px;color: #333;font-size: 20px;}

/*=======================================
   Left Links
/*=======================================*/

.box-one{border:1px solid #ccc}
.box-one{border-top:0px solid #ccc}
.box-one li a {display:block;padding:10px 30px;border-bottom: 1px solid #ddd;font-size:14px;background: #fcfcfc;background:url(../images/links-bg.png) no-repeat 10px 17px;}
.box-one li a:hover {padding-left:40px;transition:all ease 0.4s; background:url(../images/links-bg.png) no-repeat 20px 17px;}
.box-one li:last-child a{border-bottom: 0px}
 li.head {background: #0172be;padding: 10px;color: #fff;font-size: 20px;text-transform: uppercase;font-weight: 600;}
 li.head  i {;font-size: 19px}
.box-two {margin: 40px 0px;padding: 0px;width:100%}
.box-two img{border: 1px solid #ccc;width:100%;max-width:100%}


/*---------------------------------------
   8. Footer              
-----------------------------------------*/
footer {background: #0171b9;padding: 40px 0px !important;}
footer img {width:50px}
footer ul {width: 100%;  float: left;text-align: center;padding:7% 0}
footer ul li {float:left}
footer ul li a{color: #ffffff;display: block;float: left;border-right: 2px solid #f9f9f9;padding: 0px 20px;font-size: 17px;line-height: 19px;f;font-weight: 400;}
footer ul li:first-child a {padding-left:0px}
footer ul li:last-child a {border:0px}
footer ul li a:hover, footer  a:hover  {transition:all ease .5s;color:#C9D2ED}
footer ul li a:active, footer ul li a:foucs {color:#C9D2ED}
footer ul li:last-child a{border-bottom:0px}
footer a, footer p {color:#fff} 
.address-sec {background: #004e80;}
.address-sec p, .address-sec p a {color: #ffffff;}
footer .cntbox {    border: 1px solid #f9f9f9;  padding: 15px 15px;  }


/*---------------------------------------
   9. Media Queries              
-----------------------------------------*/
@media (max-width:767px) {
/*top strip*/
.top-strip .split-right {padding:10px 10px}
.top-strip .split-right{border-right: 0px solid #ccc;border-bottom: 1px solid #ccc;}
.top-strip ul li a {padding: 4px 0px;}
.top-strip div.col-xs-12:first-child {padding-left:10px !important}
.top-strip ul li a { display: block;  margin: 0px; max-height: 100%;  float: left;  font-size: 13px;   line-height: 20px;}
.top-strip ul{float: none !important;display: table; margin: auto !important;}
.top-strip{float:left !important;}
.top-strip { padding-top:0px}

/*menu*/
.navbar-brand {width:230px;}
.navbar-brand img {width:100%;max-width:100%;overflow:hidden}
.navbar-nav {margin:0px -15px;background: #ececec;}
.navbar-nav  li a {border-bottom:1px solid #ccc;    color: #fff; background: #0070bc; padding:10px 20px}


/*dropdown*/
.navbar-nav  ul.dropdown-menu {background: #2d3878 !important;border-radius:0px}
.navbar-nav  ul.dropdown-menu li a {border-bottom: 1px dashed #a5adda;color:#fff !important}
.navbar-nav ul.dropdown-menu li:last-child a {border-bottom:0px}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background-color: #0172be;border-color: #0172be;}

/*six-boxes*/
.six-boxes .row {width:100%;margin:0px}
.six-boxes .box-left {border-right:0px solid #ccc;border-bottom:1px solid #ccc;padding:40px 0px}
.six-boxes .box-right {border-left:0px solid #ccc;border-bottom:1px solid #ccc;padding:40px 0px}
.six-boxes .box-middle {border-bottom:1px solid #ccc;padding:40px 0px}
.box-bottom-none-mobile {border-bottom:0px !important}

/*fonts*/
.big-txt{ font-size:30px;line-height:35px}

/*banner*/
.slide .carousel, .slide .item, .slide .item .active  { 
height: 200px !important;}


/*our-company*/
.our-company .row {width:100%;margin:0px}
.our-company .pic{height: 200px;background-size: 250px}
.keys-of-success .pic{height: 250px;background-size: 240px !important}
.des-sec h2 {font-size: 30px;line-height:30px ;}

/*testimonial-slider*/
.testimonialSlider  p{font-size:13px;padding:0px;text-align:center}
.testimonialSlider .slick-prev {right: 10%;}
.testimonialSlider .client-pic {margin: 0px auto 20px auto;float:none;padding:0px}


/*custom*/
.mob-full {width:100%}
.form-inline input.with90 {
    width: 100%;
}



/*aside*/
aside{padding-top:40px}


/*footer*/
footer .container {width:100%;padding:0px}
footer,  .address-sec p, .address-sec p a, footer ul li  {text-align:center !important; float:none}
footer ul li, footer ul li a {padding:5px; text-align:center; float:left}
footer ul {padding:20px}


}

@media (min-width:768px) and (max-width:1019px) {
/*top strip*/
.top-strip { padding-top:15px}
.top-strip .split-right {padding:20px 0px 20px 0px;font-size:18px}
.top-strip .split-right a {font-size:17px}
.top-strip .split-right{border-right: 0px solid #ccc;}
.top-strip .col-sm-12 {background:#f4f4f4}
.top-strip div.col-sm-6:first-child {padding-left:0px !important}

/*menu*/
.navbar-collapse {padding-right: 0;padding-left: 0;}
.navbar-brand {width: 275px;padding: 15px 0px;}
.navbar-brand img {width:100%;max-width:100%;overflow:hidden}
.navbar {border-top:0px}
.navbar-nav {margin: 10.5px 0px;float: left;}
.nav > li > a {position: relative;display: block;padding: 7px 10px !important;margin-right: 5px; color: #fff;}
.slide .carousel, .slide .item, .slide .item .active  { 
height: 348px !important;}

/*common*/
.common-pages main, .common-pages  section, .common-pages aside, .common-pages .pad-both-no ,
.static-pages main, .static-pages  section, .static-pages aside, .static-pages .pad-both-no 
{padding-left:0px !important;padding-right:0px !important}
.box-two {width:50%}
.static-pages .contact-address {width:100%;padding:auto 0 !important}
.contact-address li .box {height:280px}

/*homepage*/
.six-boxes .col-sm-6 {float:left;border:0px}
.six-boxes .box-right {border:0px} 
.keys-of-success .pic{background-size: 340px !important}
.testimonialSlider  p{font-size:13px;padding:0px}
.testimonialSlider .slick-prev {right: 10%;}
.testimonialSlider .client-pic {width:150px}

/*footer*/
footer ul li.col-sm-6 {padding-bottom:40px}

/*--------------------------------------
    10.Font Family
--------------------------------------*/		   
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url('symbol.css');
.top-strip .split-right, .top-strip, .six-boxes span.title, footer .head, .breadcrumb h1 {font-family:   "Open Sans",  sans-serif, arial;}