@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
/* sbg technosolutions.net */

/*=====================Default Css ===============================*/

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {padding: 0px;margin: 0px;}
.clr:after {clear: both;}

.clr:before, .clr:after {clear: both;content: "";display: table;}
.clr {  *zoom:1;}

p, li, span, a {font-family: 'Rajdhani', sans-serif;font-size: 15px;color: #000;list-style-type: none; font-weight: 500; line-height:24px;}


h1,h2,h3,h4,h5,h6{font-family: 'Encode Sans Condensed', sans-serif; padding:0px; margin:0px;}

img{width:100%; outline:0px;}

ul li{ list-style-type:none;}
       
.container {  width: 1200px!important; margin: 0px auto!important; padding: 0px!important}

/*=====================================================================================================================================================*/

.bg-line-right {background: url(../images/bg-line-right.png) no-repeat;width: 30%;background-position: right;height: 20px;margin: 32px 0px;float: right;} 
.bg-line-left{}
.bg-line-center {background: url(../images/bg-line-center.png)no-repeat;width: 30%;background-position: center;height: 20px;margin: 10px auto;}

/**/

a.more {border: 1px solid #029bda; font-weight: normal;padding: 9px 12px;background: #01a0e2; float: right; text-transform: uppercase;text-decoration: none;
    color: #ffffff;}

a.more i { right: -10px; position: relative; top: 2px;}

.main-heading-center {  color: #2f3946; text-transform: uppercase; font-size: 23px; text-align: center; font-weight: 500; letter-spacing: 2px;}
   

/*===========================================Default Css ===========================================*/
/*===========================================Default Css ===========================================*/


.outer-most{ background:url(../images/slider/1.jpg); background-size:cover; background-attachment: fixed; }

.bg-black {height: 700px; background: rgba(0, 0, 0, 0.64);}

/*PARTICLE JS*/

.count-particles{background: #000022;position: absolute;top: 48px; left: 0; width: 80px;  color: #13E8E9; font-size: .2em; text-align: left; text-indent: 4px;
  line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif;  font-weight: bold;}

.js-count-particles{  font-size: 1.1em;}

#stats,.count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px;}

#stats{ border-radius: 3px 3px 0 0; overflow: hidden;}

.count-particles{ border-radius: 0 0 3px 3px;}

/* ---- particles.js container ---- */

.banner {   position: relative; z-index:0;}

#particles-js {
    background-image: none;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: -100px;width:100%;
}


/*ICON BAR*/

.icon-bar {background: #252525; margin-top: -8px;}
.icon-bar ul {display: table; table-layout: fixed; width: 100%; overflow: hidden;}
.icon-bar ul li { display: table-cell; vertical-align: middle; padding: 20px 10px;position: relative; font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center; border-right: 1px solid #333131;}
.icon-bar ul  li a { display: block;  height: 100%;  color: #9d9d9d; text-decoration:none;}
.icon-bar ul li a .ico {  position: relative;  top: 0;  display: block;  margin: 0 auto 0px;   -webkit-transition: top .2s linear;transition: top .2s linear;
    width: 35px;   line-height: 1;}
.icon-bar ul li .info { -webkit-transition: color .2s linear;  transition: color .2s linear; color: #ccc; text-transform: uppercase; letter-spacing: 1px;
  transition: color .2s linear;} 

.icon-bar ul li:hover a .ico {  top: -5px;}
.icon-bar ul li:hover .info{color: #01a0e2;}

/*WELCOME LAYER*/

.welcome-layer {  text-align: center;padding: 8% 0 2% 0;}
.welcome-layer ul{ text-align:center;}
.welcome-layer ul.br-bottom { border-bottom: 1px dashed #ccc;}
.welcome-layer ul li {width: 33.33%;border-left: 1px dashed #ccc;display: inline-block;margin-left: -5px;box-sizing: border-box;padding: 3%;}
.welcome-layer ul li:first-child {border-left: 0px;}
.welcome-layer ul li h5 {text-transform: uppercase;color: #01a0e2;font-size: 15px;font-weight: 700; margin: 7px 0px;  letter-spacing: 1px;}
.welcome-layer ul li i {font-size: 30px;width: 60px;height: 60px; display: block; margin: 0px auto;}

/*ABOUT*/

.about-layer {box-shadow: inset 0 -1px 2px rgba(175, 175, 175, 0.93);background: #f9f9f9;padding: 10% 0px 2% 0px;}
.about-left { width: 47%;float: left; position: relative;}
.about-left h2 { text-transform: uppercase;  color: #2f3946;}
.about-right {  width: 50%; float: right;  position: relative;}
.about-right ul li {  margin: 0;  padding: 0 0 50px 0;  list-style-type: none;  list-style-position: outside;   clear: both;   position: relative;   min-height: 60px;}
article.article-icon-entry h4 { color: #00a0e3;font-weight: 700; font-size: 16px; letter-spacing: 1px;}
.iconlist_icon {height: 64px; width: 64px;line-height: 64px;font-size: 30px;text-align: center;border-radius: 500px;padding: 8px;position: relative;
    float: left; margin-right: 30px; margin-left: 2px; z-index: 5; color: #fff; background-color: #00a0e3; box-sizing: border-box;}                                                                                                                                                        
.iconlist-timeline { position: absolute; top: 1%;left: 32px;width: 1px;height: 99%;border-right-width: 1px;border-right-style: dashed;height: 100%; border-color:#999;}

.about-right ul li:nth-child(1) .iconlist_icon { background: #cb79c5;}
.about-right ul li:nth-child(1) h4 { color: #cb79c5;}

.about-right ul li:nth-child(2) .iconlist_icon { background: #A7D244;}
.about-right ul li:nth-child(2) h4 { color: #A7D244;}

.about-right ul li:nth-child(3) .iconlist_icon { background: #F3B030;}
.about-right ul li:nth-child(3) h4 { color:#F3B030;}

.about-right ul li:nth-child(4) .iconlist_icon { background: #f37676;}
.about-right ul li:nth-child(4) h4 { color: #f37676;}

/* clients logo css slider */

.clients-layer {position: relative; top: 48px;}
.customer-logos {background: #232931;padding: 15px;}
.customer-logos:before {border-left: 20px solid transparent;left: -20px; content: ""; position: absolute; border-bottom: 60px solid #232931;top: 2px;}
.customer-logos:after {border-right: 20px solid transparent;right: -20px; content: "";position: absolute;border-bottom: 60px solid #232931;top: 2px;}
.slick-slide { margin: 0px 20px;}

.slick-slide img { width: 100%;}
.slick-slider{ position: relative;display: block; box-sizing: border-box;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
              user-select: none;-webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color:  transparent;}
.slick-list{   position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus{ outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,.slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);}      
.slick-track{position: relative; top: 0; left: 0; display: block;}
.slick-track:before,.slick-track:after{display: table;content: '';}
.slick-track:after{ clear: both;}
.slick-loading .slick-track{ visibility: hidden;}
.slick-slide{ display: none; float: left; height: 100%; min-height: 1px; border:1px solid #ccc;}
[dir='rtl'] .slick-slide{  float: right;}

.slick-slide img{   display: block;}
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{ visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

/*TESTIMONIAL*/

.testimonial-layer {
    background: url(../images/testimonial1.jpg) no-repeat;
    background-size: 100%;
    padding: 20px 0px;
    background-position: center center;
    background-attachment: fixed;
}
.testi{ width:100%; float: none!important; }

.testi {width: 100%;float: none!important; }
.slides {width: 100%; text-align: center; position: relative;  box-sizing: border-box;  margin-top: 30px; border: 0px solid #656565; padding: 3%;}
.slides p {color: #fff;font-size: 18px;line-height: 26px;padding: 0px 5%;}
.slides h5 { font-size: 20px; text-transform: uppercase; margin-top: 35px; color: #fff; font-weight: normal;letter-spacing: 2px;}
.slides i { color: #b7b7b7; font-size: 25px; position: relative;}

.fa-quote-left {left: -5px!important;top: -3px;}
.fa-quote-right { right: -5px!important; top: 12px;}
.flickity-viewport{
    width: 100%!important;
}
.testiImg{
    width: 100px;
    height: 100px;
    border-radius:100%;
    margin: 0px auto;
    overflow: hidden;
}

.testiImg img{
    width: 100%;
}

/**/
p.filter_topic  { text-align: center; }

p.filter_topic a {background: #01a0e2;color: #ffffff;padding: 8px 27px;display: inline-block;text-transform: uppercase;font-weight: 500; letter-spacing: 1px;}

.filter-image ul {margin-top: 25px;}  
    
.filter-image ul li {width: 22.33%;border: 1px solid #ccc;display: inline-block;margin: 10px;}


    
    




/*FOOTER*/

.footer_top {background: #232931;color: #fff;padding: 6% 0 0% 0;}
.footer_top h4 { text-align: center; font-weight: normal; letter-spacing: 1px;  font-size: 23px;}
.footer_top ul li {
    width: 24.33%;
    float: left;
    border: 1px solid #323942;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 25px;
    min-height: 150px;
}
.footer_top ul li i {background: #2f3946; width: 35px; height: 35px; border-radius: 100%;line-height: 35px;font-size: 15px;margin-bottom: 15px;color: #c5deff;
}

.footer_top ul li h5 { font-size: 18px;  font-weight: lighter;  letter-spacing: 1px;  text-transform: uppercase; color: #e2e2e2;}
.footer_top ul li p { font-size: 13px;color: #a9c2e2;}
.footer_top ul li p a {
    color: #c5deff;
    font-size: 18px;
    text-decoration: none;
    margin: 5px 7px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background: #2f3946;
    display: inline-block;
    border-radius: 100%;
}

/*Footer*/

.footer-layer { background: #2f3946; padding:10px 0px;}
.foo_left { width: 50%;  float: left;}
.foo_right {  width: 50%;  float: right;}
.foo_right ul li { display: inline-block;}
.footer-layer p, .footer-layer li a {  color: #ccc;  font-size: 12px;  text-decoration: none;  text-transform: uppercase;}
.foo_right ul {  text-align: right;}
.foo_right ul li a { margin-left:15px;}

/*===================================================================================================================================================*/
/*=========================================================INNER PAGE CSS============================================================================*/
/*===================================================================================================================================================*/

/*About Page*/

.about { padding: 5% 0px;}

.ul_timeline{ position:relative }

.ul_timeline > li {margin-bottom: 20px; position: relative;}

.ul_timeline  > li > .timeline-icon {
    color: #fff;width: 100px;height: 100px;line-height: 50px;font-size: 1.4em;text-align: center; position: absolute;top: 45px;left: 48%;margin-left: -25px;
    background-color: #999999;z-index: 10;border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%;border-bottom-left-radius: 50%;
}
.timeline-icon i {  font-size: 45px; line-height: 100px;}

.ul_timeline li > .timeline-panel { width: 38%;  float: left;  background: #e8e7e7;  border-radius: 2px;   padding: 20px;   position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);}

.ul_timeline  li > .timeline-pane2 {width:38%; float: right;border: 1px solid #d4d4d4;border-radius: 2px;padding: 20px;position: relative;-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);}

.ul_timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px;
    display: inline-block;  border-top: 14px solid transparent;  border-left: 14px solid  #e8e7e7; border-right: 0 solid #fff; border-bottom: 14px solid transparent;
    content: " ";}

.ul_timeline > li > .timeline-pane2:before {
    position: absolute;top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent;border-left: 15px solid #ccc;border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;content: " "; border-left-width: 0;border-right-width: 15px;left: -15px;right: auto;}
.timeline-panel h4 {  font-size: 20px; margin-bottom:20px;}
.timeline-panel p {  font-size: 15px;}

/*====inverted CSS===*/

.ul_timeline > li.timeline-inverted > .timeline-panel {float: right;}

.timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0;border-right-width: 15px;left: -15px;right: auto;}

.ul_timeline > li.timeline-inverted > .timeline-pane2 { float: left;}

.ul_timeline > li.timeline-inverted > .timeline-pane2:before {position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent;
    border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " ";left: auto;}

.ul_timeline > li.timeline-inverted > .timeline-panel:after {border-left-width: 0; border-right-width: 14px; left: -14px; right: auto;border-right-color: #e8e7e7;
}

/*Contact Page*/

.query_form { width: 33%;background: #fff;padding: 2%;box-sizing: border-box;float: left;box-shadow: 0px 0px 4px #545454bf;}
.contact-form {width: 100%; margin: 0px auto; box-sizing: border-box;}
.query_form input {width: 100%; padding: 2%; box-sizing: border-box;margin-top: 15px;font-size: 13px;line-height: 20px;font-family: 'Encode Sans Condensed', sans-serif;}
.query_form textarea { width: 100%; padding: 2%; box-sizing: border-box;  margin-top: 15px;}
.query_form a { background: #333232; padding: 4px 15px;display: inline-block; border-radius: 1px; color: #fff; text-transform:uppercase;margin-top: 15px;}
.map {width: 67%; float:right;box-shadow: 0px 0px 4px #545454bf;}
.map iframe { width: 100%;  height: 328px;}

/*================*/

#work {padding: 8% 0 2% 0;}
    
#contact {padding: 7% 0 2% 0;}

/*=======================================================*/

/* Filter and search options */

#price-range {width: 370px; margin: 10px auto 30px auto;  text-align: center;  font-weight: bold;}

#value-min, #value-max {width: 100px; border: none; background-color: #f1f1f1;}

#slider { margin: 30px 0 30px 0; }

/* Filter and search options */

#buttons, #search {text-align: center; margin-bottom: 30px;}

/* Filter buttons */

button {
    margin: 5px 6px;
    border: 0px;
    padding: 4px 16px 4px 16px;
    font-family: 'Encode Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    border: 1px solid #2196F3;
    color: #2196F3;
    letter-spacing: 1px;
    background: #fff;
    font-weight: 600;
    line-height: 30px;
}

button:hover, button.active {
    background-color: #21a2f6;
    color: #fff;
    cursor: pointer;
}

/* Search input */

input {font-size: 120%;border: 1px solid #999;padding: 5px;}

input:hover { border: 1px solid #666; }

input:focus {border: 1px solid #00cccc;  outline: none;}

/* Gallery of images */

#gallery {text-align: center;width: 100%; margin: 0 auto;}

#gallery img {
    width: 18%;
    border: 1px solid #c1bfbf;
    margin: 9px;
    -webkit-box-shadow: 0 0 3px 3px #ccc;
    box-shadow: 0 0 3px 3px #ebebeb;
    display: inline-block;
}

/* Table styles */

table { margin: 0 auto; width: 780px;}

table#rates { width: 380px; }

th, td { border-radius: 3px;  color: #333;  padding: 7px 10px 5px 10px;  min-width: 9em;  text-align: left;}

th { background-color: #d7d7d7;  font-weight: bold;  text-transform: uppercase;}

td { background-color: #fff; }

table.sortable th:hover { cursor: pointer; }

th.ascending, th.descending, table.sortable th:hover { background-color: #00cccc; color: #fff;}

/* Arrows for table sorting */

th.ascending:after {font-size: 60%;content: '\25B2';float: left;padding: 4px 5px 0 0;}

th.descending:after { font-size: 60%;content: '\25BC'; float: left;  padding: 4px 5px 0 0;}

.about { width: 780px;  margin: 0 auto 40px auto;}

.about:after { content: ""; display: table; clear: both;}

.about h2 { text-align: left;float: left;}

.bio {float: right;  width: 195px;}

.bio img { float: left; width: 50px; height: 50px;  margin-right: 10px;}

.location {padding-left: 74px;  background-image: url('../img/pointer.png'); background-repeat: no-repeat; background-position: 60px 1px;  font-size: 90%;}

/*=================*/


/*Occasional Packk form*/

.sbgSec{
    width: 100%;
    padding: 10px 0px;
    box-sizing: border-box;
}

.ocplogo{
    width: 100px;
    float: left;

}

.ocplogo img{
    width: 100%;
}

.ocpStep{
    width: 100%;
    float: right;
    list-style-type: none;
    text-align: left;
}

.ocpStep li{
    display: inline-block;
    margin-right: 20px;
}


.selectionSt{
    border: 2px solid #eee;
    box-sizing: border-box;
}

.sky-form header{
    font-family: 'Encode Sans Condensed', sans-serif !important;
}


/*Occasional Pack slip*/

.occasionOrderDetails{
    width: 100%;
    padding: 0px 0px 20px 0px;
}

.occasionSlip{
    width: 100%;
}

.occasionSlip table{
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

.occasionSlip table td,th{
    vertical-align: top;
    text-transform: none;
    background-color: #fff;
    color: #000;
    font-family: 'Rajdhani', sans-serif;font-size: 15px;    border: 1px solid #ccc
}


.slipLogo{
    height: 100px;
}

.slipLogo img{
    height: 100%;
    width: auto;
}

.slipCtrl{
    position: fixed;
    top: 100px;
    right: 0px
}

.col-12{
    width: 100%!important;
}