/********* loader *********/
.preloader{
  background: white !important;
  height:100% !important;
  left:0px !important;
  width:100% !important;
  position: fixed !important;
  z-index: 10000 !important;
  padding-top: 13%;
 display: none;
}

.printer{
   position: absolute;
   left:200px;
   width:100px;
   margin-top:-80px;
   margin-left: 90px;
}
.loadercirlce{
  height:200px;
  width:200px;
  border-radius: 200px;
  padding: 30px;
  background-color: #f3f3f3;
  margin-bottom: 30px;
  position: relative;

}

.swing{
-webkit-animation:linear infinite alternate;
-webkit-animation-name: run;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes run {
    0% { left: 0;}
    50%{ left : 8%;}
    100%{ left: 0;}
}


/********* loader *********/
.separeateright
{
  position: relative;
  padding-right: 20px;
}
.separeateright:after{
  content: '|';
  position: absolute;
  color: white;
  right:0px;
  top:5px;
}

.navcolor .dropdown-toggle{
  background: transparent !important;
}

.shopbtn{
  background: white;
  color: black !important;
  padding:2px  13px;
    border-radius: 5px;
}
.shopbtn:hover{
  border-radius: 50px;

}

@import url('https://fonts.googleapis.com/css?family=Raleway');

.notifyjs-corner
{
z-index:2000 !important
}

::selection {
    color: #fff;
    background-color: #00AA8D
}

.coln{
  float: right;
}

.text-caps{
  text-transform: uppercase;
}

.rounded{
  border-radius: 50px !important;
}

.sliderfont{
font-family: 'Rye', cursive !important;
}

.bgtheme{
 background: #00aa8d !important;
 color: white !important;
}

.line-head{
 border-bottom: 1px solid #ddd;
 padding-bottom: 10px !important;
}

.fbold{
  font-weight: bold !important;
}

.mb-0{
  margin-bottom: 0px;
}
.mt-0{
  margin-top: 0px;
}
.m-0{
  margin: 0px;
}

.p-0{
 padding: 0px;
}
/***** floating card *****/
.calltocard{
  z-index:1000;
  position:fixed;
  left:40px;
  bottom:20px;
  width:325px;
  border-radius:2px;
}
.calltocard ._3dpintingbg{
  height:132px;
  width:130px;
  background-position:center right;
  border-radius:3px  70px   70px 3px;
  margin-left:-4px;
}

.closebtn{
  position:absolute;
  right:-5px;
  top:5px
}

.calltodesc{
  padding:20px 0px;
  margin-top:8px;
}

@media screen and (max-width: 600px) {
  .calltocard{
    width:270px;
    bottom:50px;
  }
  .calltocard ._3dpintingbg{
    height:100px;
    width:100px;
  }

 .calltodesc p{
  font-size: 12px;
 }

 .notificationcard{
   left:5% !important;
   width:90% !important;
 }


}

/***** floating card *****/

/***** Shopping callto action ****/

.calltoact{
  background-color:#00AA8D !important;
  min-height:40px;
  position:fixed !important;
  z-index:11000 !important;
  width:300px !important;
  border-radius: 20px;
  bottom:30px;
  left:20px;
  text-align: center;
  padding:  20px;
  box-shadow: 0 10px 20px 0 rgba(0,13,36,.16), 0 2px 8px 0 rgba(0,13,36,.08) !important;

}
.calltoact .remove{
  margin-left: 5px;
  position: absolute;
  right:20px;
  top:15px;
  background: white;
  height: 17px;
  width:17px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 1111;
  color: #00aa8d;
}
.calltoact .remove:hover{
  color: #f44336;
}

.calltotitle{
  padding-top:15px;
  margin-top:5px;
  color:white;

}

.calltoact .btn{
  margin-top:15px;
  padding-top:5px;
  padding-bottom:5px;
  font-size: 12px;
}

.customlft{
  position: relative;
  left: 22%;
  padding-bottom: 60px;
  padding-top: 10px;
}

.shoppingcircle{
  height:60px;
  width:60px;
  border-radius: 60px;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 4px rgba(0,0,0,.05), 0 6px 10px rgba(0,0,0,.08) !important;
  padding: 14px;
}

.shoppingcircle:nth-child(1){

}

.shoppingcircle:nth-child(2){
  margin-left: 45px !important;
}
.shoppingcircle:nth-child(3){
  margin-left: 85px !important;
}


/***** Shopping callto action ****/


/************ notification popup card ****************/

.notificationcard{
  z-index:10000;
  position:fixed;
  left:35%;
  top:10px;
  width:400px;
  border-radius:2px;
}

.notificationcard ._3dpintingbg{
  height:82px;
  width:80px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 23px;
}


.notificationcard .btns{
  padding-bottom:15px;
  margin-top:15px;
  float:right;
}



/************ notification popup card ****************/


/****** for navbar header color change **********/

.verticalLine {
    border-left: 2px dotted #5D5D5D;
}
.unstyle li{
  list-style: none;
}



#jssor_1{
position: relative;
margin: 0 auto;
 top: 0px;
  left: 0px;
  width: 900px;
   height: 435px;
    overflow: hidden;
     visibility: hidden;
}

 .slider_resize{
   cursor: default;
    position: relative;
     top: 0px;
     left: 0px;
      width: 900px;
       height: 500px;
       overflow: hidden;
 }

.sliderfont{
  font-size: 30px;
}
 .slidergrey{
 background-color:rgba(0,0,0,0.4);
 position:absolute;
 width:100%;
 height:100%;
 z-index:1
}
 @media screen and (max-width: 767px) {

   #jssor_1{
      height: 350px;
   }


   .slider_resize{

        width: 605px;
         height: 350px;

   }


   .sliderfont{
     font-size: 18px;
   }

 }




.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }


.highcharts-credits{
  display: none;
}
.jssora22l, .jssora22r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 58px;
    cursor: pointer;
    background: url('img/a22.png') center center no-repeat;
    overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }




/****** for navbar header color change *********/

/*********** custom columns **************/

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
/*********** custom columns **************/

.bgindustryimage{
  height:200px;
  background-attachment: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom:0px;

   -webkit-transition: .5s all ease-out;
   -moz-transition: .5s all ease-out;
   transition: .5s all ease-out;
}
.bgindustryimage:hover{
  -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
 z-index: 1;
 position: relative;
 -webkit-transition: .5s all ease-out;
 -moz-transition: .5s all ease-out;
 transition: .5s all ease-out;
}
.weserve{
  text-align: center;
  color: white;
  text-transform: uppercase;
    padding-top: 90px;
    font-size: 25px;
}

@media screen and (max-width: 998px) {
  .bgindustryimage{
      height:150px;
  }
  .weserve{
    text-align: center;
    color: white;
    text-transform: uppercase;
    padding-top: 60px;
    font-size: 20px;
  }
}




/********* for navbar ************/
#lightbox{
  display: none;
}
body {
     position: relative;
  background-color:#f2f2f2;
 }
 .w3-card,.w3-card-4{
   background-color: white;
 }
h1,h2,h3,h4,h5,h6,input{
  color:#324864;
  /*font-family: 'Raleway', sans-serif !important;*/
  font-family: 'Roboto Condensed', sans-serif !important;
}
p,a,label,b,input,md-radio-button{
  /*font-family: 'Raleway', sans-serif !important;;*/
  font-family: 'Roboto Condensed', sans-serif !important;
}

a:focus,
a:hover{
  text-decoration: none;
  color:#324864;
}


.navbar{
z-index: 2000 !important;
margin-bottom: 0px;
padding: 5px;
border-radius: 0px;
border: none;
background-color: white
}
.navbar-nav li a {
    display: block;
    text-align: center;
    -webkit-transition: .5s all ease-out;
    -moz-transition: .5s all ease-out;
    transition: .5s all ease-out;
    border-bottom: 3px solid transparent;

    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
     color:grey;
}

.navbar-nav li a:hover {
    background-color: transparent !important;
    color:  #00AA8D !important;/******* old color #FA5746*****/
}



.navbar-nav li.active a  {
    border-bottom: 3px solid #00AA8D;
    color:  #00AA8D !important;
    background-color: transparent !important;
}


.btn-navbtn{
  background: transparent;
  color:#00AA8D !important;
  font-size: 20px;
}

/*********************************/
.btn-orange{

  border:2px solid #FA5746;
  background-color: white;
  color:#FA5746;
}
.btn-orange:hover{

  border:2px solid #00AA8D;
  background-color: white;
  color:#00AA8D;
}


.btn-card{
  background-color: white;
  border:none;
  color: #00897b;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

.btn-card:focus,
.btn-card:hover{
  background-color: white;
  border:none;
  color: #00897b;
}

.w3-card-2{
  background-color: white;
}

.lb-dataContainer{
margin-top:20px;
}
.btn-orng{


  background-color:#00AA8D;
  color: white;
}
.btn-orng:hover{

border-color:#00AA8D;
  color:#00AA8D;
  background-color: transparent;
}

.btn-orng:focus{

border-color:#00AA8D;
  color:#00AA8D;
  background-color: transparent;
}

.md-orng{
  background-color:#00AA8D !important;
  color: white !important;

}

.md-orng2{
  background-color:#FEC10D !important;
  color: white !important;

}

/********** input field color ************/
.md-input-invalid label{
color: red !important;
}

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: #00AA8D !important;
}
md-input-container:not(.md-input-invalid) .md-input {
    border-color: #00AA8D !important;
}
md-input-container:not(.md-input-invalid) label {
    color: #00AA8D !important;
}


md-input-container:not(.md-select-invalid).md-select-focused .md-input {
    border-color: #00AA8D !important;
}
md-input-container:not(.md-select-invalid) .md-select {
    border-color: #00AA8D !important;
}
md-input-container:not(.md-select-invalid) label {
    color: #00AA8D !important;
}
/********** input field color ************/

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

img {
  width: 100%;
  height: auto;

}

h2 {
  text-align:center;
	padding-bottom: 1em;
}

.slick-dots {
	text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  li {
    display:inline-block;
    margin-left: 4px;
    margin-right: 4px;
    &.slick-active {
      button {
        background-color:black;
      }
    }
    button {
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color:#999;
      border:none;
      width: 15px;
      height: 15px;
      border-radius:50%;
    }
		:hover{
			background-color: black;
		}
  }
}

/* Custom Arrow */
.prev{
	color: #999;
	position: absolute;
	top: 38%;
	left: -2em;
	font-size: 1.5em;
		:hover{
			cursor: pointer;
			color: black;
		}
}
.next{
	color: #999;
	position: absolute;
	top: 38%;
	right: -2em;
	font-size: 1.5em;
	:hover{
			cursor: pointer;
			color: black;
		}
}

@media screen and (max-width: 800px) {
    .next {
        display: none !important;
    }
}


.slick-dots{
  display:none !important;
}


.btn-gold{
 background-color: #00AA8D;
 color:white;
 border-color:#00AA8D;
}
.btn-gold:hover{
 background-color: transparent;
 color:#00AA8D;
 border-color:#00AA8D;
}

.btn-home{
 background-color: transparent;
 color:#00AA8D;
 border-color:#00AA8D;
}
.btn-home:hover{
  background-color: transparent;
  color:#00AA8D;
  border-color:#00AA8D;
}
/************** social media **************/

.twitter {
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 14px;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.twitter:hover {
  color: #FF7D6D;
  text-decoration: none;
}



/* Floating Social Media Bar Style Starts Here */

.fl-fl {
  background: #00AA8D;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 4px;
  width: 190px;
  position: fixed;
  left: -150px;
  z-index: 1000;
  font: normal normal 10px Arial;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.float-sm .fa {
  font-size: 20px;
  color: #fff;
  padding: 10px 0;
  width: 25px;
  margin-right: 0px;
  float:right
}

.fl-fl:hover {
  left: 0;
}

.fl-fl a {
  color: #fff ;
  text-decoration: none;
  text-align: right;
  line-height: 43px!important;
  vertical-align: top!important;
}

.float-fb {
  top: 200px;

}

.float-tw {
  top: 255px;
}

.float-gp {
  top: 310px;
}

.float-rs {
  top: 365px;
}

.float-ig {
  top: 420px;
}

.float-pn {
  top: 470px;
}


.footermob{
  background-color: #2C303A;

  margin-bottom:40px !important;

}
.footerwin{
  background-color: #2C303A;
}
.footer1{
  padding-top: 30px;
  padding-bottom: 30px !important;
}
.footerlinks a {
  color: white;
  text-transform: capitalize !important;
}


.footer1 .active a{
  color: #00AA8D !important;
}



.footer1 .active a:before{
   content: "\f04b";
   font-family: 'FontAwesome';
   position: absolute;
   left:13px;
   font-size: 10px;
   margin-top: 5px;
}


.footer1 .servicesfooter .active a:before{
   content: "\f04b";
   font-family: 'FontAwesome';
   position: absolute;
   left:-12px;
   font-size: 10px;
   margin-top: 5px;
}

.footer1 .industrywecover .active a:before{
   content: "\f04b";
   font-family: 'FontAwesome';
   position: absolute;
   left:-8px;
   font-size: 10px;
   margin-top: 5px;
}

.footerlinks a:hover {
  color: #00AA8D;
}
footer h4{
  color:white !important;
}

.footerbg{
 padding: 0px;
  height: 310px;
  /* Create the parallax scrolling effect */
  background-attachment: relative;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.footerbgcolor{
  background-color: rgba(0,0,0,0.7);
  width:100%;
  height:310px;
}
.footer-2{
  border-top:1px solid #d9d9d9
}

.footsocial li{
  margin-right: 10px;
}

.footsocial li a{
  background: transparent;
}

/*********** material form *******************/


.group 			  {
  position:relative;
  margin-bottom: 35px;

}

.inputMaterial 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
    background: transparent !important;
  border-bottom:1px solid #00AA8D;
}

.inputMaterial:focus 		{ outline:none;}

/* LABEL ======================================= */

.label2 				 {
  color:#00AA8D;
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color: #00AA8D;
  background: transparent !important;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px;
  width:0;
  bottom:0px;
  position:absolute;
  background: #00AA8D;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
  width:50%;

}


/* active state */
.inputMaterial:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
    background: transparent !important;
}




.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}


/********* input number spinner **************/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/********* input number spinner **************/
/****** scroll bar css *****************/
*::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    background: white;
}
*::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
*::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #00AA8D ;
  border-radius: 0px;
  outline: 2px solid grey;

}
/****** scroll bar css *****************/

/****** for navbar header color change *********/

.navcolor{
  background-color:transparent !important;
  border-color:transparent !important;

}
.navcolor2{
  background-color:white !important;
  border-color:white !important;
}
/****** for navbar header color change *********/

/********* form input field ***********/
.form-control{
  background:transparent !important;
  border-color:#00AA8D;
  color:#333 !important;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:black !important;
}
::-moz-placeholder { /* Firefox 19+ */
color:black !important;
}
:-ms-input-placeholder { /* IE 10+ */
color:black !important;
}
:-moz-placeholder { /* Firefox 18- */
color:black !important;
}

select.form-control{
  color:#9C9C9C !important;
}
select.form-control option{
  background-color: white;
  color:#00AA8D !important;
}
/********* form input field ***********/

/*********** tabs ************/
/*tabs */
.nav-pills li a{
border-radius: 0px;
color:#00AA8D;
padding-top:10px !important;

}
.nav-pills li{
border-bottom:1px solid #00AA8D;
}
.nav-pills{

background: transparent !important;
padding:0;
}
.nav-pills>li.active  {

padding:0;

}
.nav-pills>li.active  a{
  background-color: #00AA8D;
}

.nav-pills>li.active  a:hover{
  background-color: transparent;
  color:#00AA8D;
}

.nav-pills>li.active  a:focus{
  background-color: #00AA8D;
  color: white;
}


/********side nav ***********/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 8%;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/*************side nav*************/
/************ modal **************/
.loginRibon {
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-top: 20px solid #00AA8D;
  border-left: 20px solid #F99F2C;
  border-bottom: 20px solid #FCB62A;
  width:90px;
position: absolute;
top:10px;
left:-1px;
color:white;
line-height:0px;
}

.registerRibon {
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-top: 20px solid #00AA8D;
  border-left: 20px solid #F99F2C;
  border-bottom: 20px solid #FCB62A;
  width:120px;
  position: absolute;
  top:10px;
  left:-1px;
  color:white;
  line-height:0px;
}

.fbtag{
  width: 0px;
  height: 0px;
  border-right: 15px solid transparent;
  border-top: 15px solid #4867AA;
  border-left: 15px solid #4867AA;
  border-bottom: 15px solid #4562a1;
  width:80px;
  color:white;
  line-height:0px !important;
  padding-left: 15px;

}
.twtag{
  width: 0px;
  height: 0px;
  border-right: 15px solid transparent;
  border-top: 15px solid #1DA1F2;
  border-left: 15px solid #1DA1F2;
  border-bottom: 15px solid #0e9af1;
  width:80px;
  color:white;
  line-height:0px !important;
  padding-left: 15px;


}
.intag{
  width: 0px;
  height: 0px;
  border-right: 15px solid transparent;
  border-top: 15px solid #4867AA;
  border-left: 15px solid #4867AA;
  border-bottom: 15px solid #4562a1;
  width:80px;
  color:white;
  line-height:0px !important;
  padding-left: 15px;

}
.socialhover:hover{
  width:100px;
  transition: ease-in .5s;

}
/************** modal **********************/



/**************   slider card ************/

.slick-slide{
  height:auto !important;
}

.slick-dots {
  display: none !important;
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  li {
    display:inline-block;
    margin-left: 4px;
    margin-right: 4px;
    &.slick-active {
      button {
        background-color:black;
      }
    }
    button {
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color:#999;
      border:none;
      width: 15px;
      height: 15px;
      border-radius:50%;
    }
    :hover{
      background-color: black;
    }
  }
}

/* Custom Arrow */
.slidercards .prev{
  color: #999;
  position: absolute;
  top: 35%;
  left: 0em;

  font-size: 1.5em;
    :hover{
      cursor: pointer;
      color: black;

    }

}
.slidercards .next{
  color: #999;
  position: absolute;
  top: 35%;
  right: 0em;

  font-size: 1.5em;
  :hover{
      cursor: pointer;
      color: black;
    }
}

.slidercards .prev{
  background-color: red;
  border-radius: 0px 50px 50px 0px  ;
  padding:25px 20px  25px 10px;
  font-size: 35px !important;
  color:white;
}
.slidercards .prev:hover{
  background-color: white;
  color: red;
}
.slidercards .next{
  background-color: red;
  border-radius:50px 0px  0px 50px;
  padding:25px 10px  25px 20px;
  font-size: 35px !important;
  color:white;
}

.slidercards .next:hover{
  background-color:white ;
  color:red;
}




/*************** slider  card*******************/
/*********** lightbox************/
.lightbox{
  margin-top:-10% !important;
}
/*********** lightbox************/


/*********** index page *********************/

.slidertxt{
    position:absolute;
    top:30px;
    left:30px;
    z-index:0;
    font-size:50px;
    color:#ffffff;
    line-height:60px;
    text-transform:uppercase;
}



.bgimg{
  height: 192.3px;
  background-attachment: absolute;
  background-position: center;
  background-size: cover;

}

.newoverlay .imgcontent{
  padding:35px 15px !important;
  padding-top:135px !important;
  margin:0px 1px;

}

.newoverlay .imgcontent .title{
  margin-bottom:5px;
  color:white !important;
  text-transform:uppercase;
  font-size:18px;
}

.newoverlay .imgcontent p{
  color:white !important;
  font-size:15px
}

.newoverlay {

  top: 0;
  left: 0;
  width: 100%;
  height: 192.3px;
  position: relative;
  z-index: 1;
}

.bottombar{
  background-color: rgba(0, 0, 0, 0.5);
}
.bottombarbtn{
background-color:rgba(0,0,0,1);padding:3px 15px;
}

.bottombar:hover .bottombarbtn{
  background-color: rgba(41, 192, 224, 1);
}
.bottombar:hover{
  background-color: rgba(41, 192, 224, 0.5);
}


.ctobg{
    height: 150px;
  /* Create the parallax scrolling effect */
  background-attachment: absolute;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}
.ctooverlay{
  background-color: rgba(0, 170, 141,0.8);
  height: 150px;
  width:100%;
}
/********** index page *******************/
/********* spare parts page ***********/
.bgparallax {

    height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallaxbggrey{
  background-color: rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  text-align: center;

}
.bgparallx2{
  background-image: url("img/3dprint.jpg");
  height: 180px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallaxbgcolor{
  background-color: rgba(0, 170, 141,0.8);
  width:100%;
  height:100%;
  text-align: center;

}
.cwhite{
  color:white !important
}

.sparebgimg{
  min-height: 300px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1px;
  margin-bottom: 10px;
}
.sparebgimg .bgcolor{
  min-height: 300px;
  background-color: rgba(0, 170, 141,0.8);
  padding: 10px;
  border-radius: 1px;
box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important
}

.sparebgimg .bgcolor .circle{
 width:70px;
 height:70px;
 border-radius: 70px;
 border: 1.4px solid white;
 margin-top: 25px;
 margin-bottom: 25px;
}

.sparebgimg .bgcolor .circle i{
font-size: 30px;
color:white;
line-height: 70px;

}
.splash{
  min-height: 150px;
  padding: 20px;
 border-radius: 2px;
 background-color: white
}
/********* spare Parts Page *********/

/******* start up section ********/
.ctaparallax{
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
    height:305px;
}

.ctaparallax .bggrey{
  background-color: rgba(0,0,0,0.5);
  width:100%;
  height:305px;
  margin-top: 0px;
}

.cttitle{
  font-size:40px;
  margin-top:0px;
  padding-top:20px;
}

@media screen and (max-width: 767px) {
  .mobcenter{
    text-align: center;
  }
  .cttitle{
    font-size:30px;
    margin-top:0px;
    padding-top:20px;
  }
}

.strupbtn{
  border-radius: 3px;
  margin:25px 0px;
  background-color: transparent;
  border-color: white;
}
.strupbtn:hover{
  background-color: #e03d31;
  border-color: #e03d31;
}

.bgcollage{


   background-attachment: absolute;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
}

/*.bgcollage .imgcontent{
  background-color: rgba(255, 255, 255,0.5);
  width:100%;
  height:50px;
}*/
/******* start up section ********/
.text-teal{
  color:#00AA8D !important;
}


/******************* testimonials *********/
.w3-hover-shadow:hover{
box-shadow: 50px 50px 10px #888888;

}


.margintoptestimonialcard{
margin-top:70px;
}

@media screen and (max-width: 767px) {

  .margintoptestimonialcard{
  margin-top:40px;
  }
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.snip1533 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #000000;
display: inline-block;

font-size: 16px;
margin: 35px 7px 35px;
max-width: 310px;
min-width: 250px;

position: relative;
text-align: center;
width: 100%;
background-color: #ffffff;
border-radius: 5px;
border-top: 5px solid #00AA8D;

height:250px;
}

.snip1533 *,
.snip1533 *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}

.snip1533 figcaption {
padding: 13% 10% 12%;
}

.snip1533 figcaption:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #00AA8D;
content: "\f10e";
font-family: 'FontAwesome';
font-size: 32px;
font-style: normal;
left: 50%;
line-height: 60px;
position: absolute;
top: -30px;
width: 60px;
}

.snip1533 h3 {
color: #3c3c3c;
font-size: 20px;
font-weight: 300;
line-height: 24px;
margin: 10px 0 5px;
}

.snip1533 h4 {
font-weight: 400;
margin: 0;
opacity: 0.5;
}

.snip1533 blockquote {
font-style: italic;
font-weight: 300;
margin: 0 0 20px;
}
/******************* testimonials *********/
/************ industries page **********/

.indusparebg{
  height:180px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.indusparebg .bgcolor{
  height:180px;
  background-color: rgba(0,0,0,0.5);
  border-bottom: 3px solid #00AA8D;

}
.bgindustrycard{
height:350px;
background-attachment: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.sliderbggrey{
 background-color: rgba(0,0,0,0.5);
 width:100%;
 height:350px;
}
.industrygallerybg{
  height:200px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.industrygallerybg .hoveroverlay{
  background-color:#00AA8D;
  opacity:0;
  width:100%;
  height:200px;
}


.industrygallerybg:hover .hoveroverlay{
  background-color:#00AA8D;
  opacity:0.8;
  width:100%;
  height:200px;
}



.industysubcatbg{
  height:183px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.industriescollapse .panel{
 border-radius: 0px !important;
 border: none;
 margin-top: 0px;
 padding: 0px;
}
.industriescollapse .panel-body{
  border-radius: 0px !important;
  border: none;
  border-top: 1px solid #DDDDDD
}
.industriescollapse .panel-heading{
  border-radius: 0px !important;

}

/*******  medical industry *******/

.flowbg{
  height:130px;
  width:130px;
  border-radius: 130px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
#list {
  list-style: none;
}
.item {
  float: left;
  padding-left: 50px;
  position: relative;
}
.item:before,
.item:after {
  content: "";
  position: absolute;
}
.item:first-child {
  padding-left: 0;
}
.item:first-child:before,
.item:first-child:after {
  display: none;
}
.item:before {
  top: 50%;
  left: 4px;
  width: 32px;
  height: 2px;
  margin-top: -1px;
  background: #bbb;
}
.item:after {
  top: 50%;
  left: 33px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #bbb;
  margin-top: -6px;
}
.item-text {
  display: block;
  padding: 10px 15px;
  background: #00AA8D;
  text-align: center;

box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important
}

@media screen and (max-width: 998px) {

  .item {
    float: left;
    padding-left: 10px;
    position: relative;
  }
}





  .iconlist {
    list-style: none;
    padding: 0;
  }
  .iconlist li {
    padding-left: 1.3em;
    margin-top: 10px;
  }
  .iconlist li:before {
    content: "\f0a9"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.3em; /* same as padding-left set on li */
    width: 1.3em; /* same as padding-left set on li */
    color:#00AA8D;
  }




/******** new flow chart *******/
.nextarrow:after{
  content: "\f101";
  font-family: 'FontAwesome';
  position: absolute;
  top:100px;
  right:-24px;
  font-size: 25px;
  margin-top: 5px;
  z-index: 1;
  color:#00AA8D;
  padding:5px 15px;
  border-radius: 50px;
  background-color: white;
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important
}

@media screen and (max-width: 768px) {
  .nextarrow:after{
   display: none;
  }
}



.medicaltitle{
font-size:35px !important;
}

@media screen and (max-width: 600px) {

  .medicaltitle{
    margin-top: 100px !important;
  font-size:20px !important;
  }
}

/******** new flow chart *******/


.benefitbox{
border:2px solid #00aa8d;
padding:15px;
margin-left:-10px;
position:relative;
z-index:1;
margin-top:-15px
}
.benefittitle{
font-weight:lighter;
border:1px solid #00aa8d;
margin:0px;
padding:10px;
}


/*****************  medical industry **************/


/************ ribbon *****************/


.ribbon-wrapper-green {
  width: 145px ;
  height: 145px !important;
  overflow: hidden;
  position: absolute;
  z-index: 2000 !important;
  top: -3px;
  right: -3px;

  /*border: 1px solid black;*/
}

.ribbon-green {
  font: 12px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 10px 0;
  left: -5px;
  top: 30px;
  width: 190px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #5fd0e8, #00AA8D);
  background-image:    -moz-linear-gradient(top, #5fd0e8, #00AA8D);
  background-image:     -ms-linear-gradient(top, #5fd0e8, #00AA8D);
  background-image:      -o-linear-gradient(top, #5fd0e8, #00AA8D);
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);

}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.ribbon-green a{
  text-decoration:none;
  color: #fff;

}
/************ ribbon ****************/


/*********** clients ************/
/* The image used */
.bgclients{
   height: 90px;
   background-attachment: relative;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }


/********* drop down *************/

.dropdown-menu>li>a {
    color:grey !important;
}


.nav >a, .nav >a:focus, .nav >a:hover {
    color:grey;
    background: transparent !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    color:grey;
    background: transparent !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
    border-bottom: none;
    margin-bottom: -15px;
}
.dropdown ul.dropdown-menu {
    border-radius:4px;
    box-shadow:none;
    margin-top:20px;
    width:200px;
}
.dropdown ul.dropdown-menu:before {
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 30%;
    z-index: 10;

}
.dropdown ul.dropdown-menu:after {
    content: "";
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    position: absolute;
    top: -12px;
    right: 29.2%;
    z-index: 9;
}
/********* drop down *************/



/******************* start up page  list **************

.startup ol {
  list-style: none;
  padding-left: 0px;
}

.big-num {
  counter-increment: big-num;
  position: relative;
  padding: 0.5em 1.5em;
  min-height: 3em;
  margin-bottom: 3em;
}

.big-num:before {
  content: counter(big-num);
  background: #fff;
  color: #324864;
  width:2em;
  border-radius: 50%;
  position: absolute;
  top: -1.0em;
  left: -1.0em;
  font-size: 20px;
  line-height: 2;
  text-align: center;
}




.startup  ol {

  margin: 1em auto;
  border-left: 1px dotted #ccc;
  padding-left: 0px;
}

.big-num {
  background-color: #f8f8f8;
  border-radius: 2px;
}

.big-num:before {
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important
}

.bgstartups{
  background-attachment: relative;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height:400px;
  margin-top: 150px;
}




****************** start up page  list **************/

.bgstartupsimg{
  height: 470px;
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/********** startup page timeline ***************/
.timeline-title
{
  margin-bottom:0px !important;
  padding-top:25px !important;
  text-align: center !important;

  font-weight: lighter;
  color: #00AA8D !important;
  font-size: 15px;
}
.timeline-underline
{
border-bottom: 1px solid #00AA8D;
width:50px;
text-align: center;
padding-top:5px;
}
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #00AA8D;
  left: 50%;
  margin-left: -1.5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
  width: 50%;
  float: left;
  clear: left;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  width: 95%;
  float: left;
  background: #fff;
  /*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);*/
}

.timeline > li > .timeline-panel: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: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline > li > .timeline-badge {
  color: #fff;
  width: 24px;
  height: 24px;
  line-height: 50px;
  font-size: 1em;
  text-align: center;
  position: absolute;
  top: 35px;
  right: -12px;
  /*background-color: #999999;*/
  z-index: 100;
  /*
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  */
}
.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;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-badge > a {
  color: #00AA8D !important;
  background-color: white
}
.timeline-badge a:hover {
  color: grey !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body:before{
  position: absolute;
  margin-top: -9px;
  right:47%;
  display: inline-block;
  border-top:0 solid #fff;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom:  14px solid #fff ;
  content: " ";
}
.timeline-body > p,
.timeline-body > ul {
    padding:20px;
    margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}
.timeline-footer{
    padding:20px;
    background-color:#f4f4f4;
}
.timeline-footer > a{
    cursor: pointer;
    text-decoration: none;
}
.tooltip{

    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0);

}
.tooltip.in{
    /*opacity:0;
    filter:alpha(opacity=80);*/

}
.tooltip.top{
    margin-top:-2px;
}
.tooltip.right{
    margin-left:2px;
}
.tooltip.bottom{
    margin-top:2px;
}
.tooltip.left{
    margin-left:-2px;
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.left .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.bottom .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.right .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip-inner{
    width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#313131;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0;
}
.timeline > li.timeline-inverted{
  float: right;
  clear: right;
  margin-top: 30px;
  margin-bottom: 30px;
}
.timeline > li:nth-child(2){
  margin-top: 60px;
}
.timeline > li.timeline-inverted > .timeline-badge{
  left: -12px;
}

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li {
      margin-bottom: 20px;
      position: relative;
      width:100%;
      float: left;
      clear: left;
    }
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 28px;
        margin-left: 0;
        top: 16px;
    }

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

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

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }

.timeline > li.timeline-inverted{
  float: left;
  clear: left;
  margin-top: 30px;
  margin-bottom: 30px;
}

.timeline > li.timeline-inverted > .timeline-badge{
  left: 28px;
}
}
/********** startup page timeline ***************/


/********** fade in slider ***********/

/* Hide the scrollbar... */

@media screen and (width: 768px) {
  #slide-container
{
      height:600px !important;
}
  #slides{
      height:600px !important;
  }
  .slide
    {

      height:600px !important;

    }
    .slideroverlay{
      height:600px !important;
    }

    /****** index page *********/
      .aligncentertab{
        text-align:center;
      }
    /******** index page ********/
}



#slide-container
  {
    position:relative;
    left:0px;
    width:100%;
    height:350px;
    background-color:#000;
  }

#slides
  {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    padding:0px;
    margin:0px;
  }

.slide
  {
    list-style:none;
    position:absolute;
    width:100%;
    height: 100%;
    opacity:1.0;
    background-size:cover;
    background-position:50% 50%;
    transition: all 1s linear; -webkit-transition: all 1s linear;
  }


.buried
  {
    opacity:0.0;
    visibility:hidden;
  }

.slidernav
  {
    position:absolute;
    z-index:99;
    top:45%;
    cursor:pointer;
    color:#fff;
    opacity:0.7;
    transition: all 0.66s ease; -webkit-transition: all 0.66s ease;
  }

.slidernav:hover { opacity:1.0; }
#left {
  display: none;
  left:3%;
}
#right {
   right:3%;
     display: none;
 }

#vignette { position:absolute; left:0px; top:0px; z-index:9; width:100%; height:100%; }


.slideroverlay{
background-color:rgba(0,0,0,0.5);
position:absolute;
width:100%;
height:100%;
z-index:10;
}

.slidercardheading{
  color:grey;
  font-size:20px;
  font-weight:bold;
  margin-top:3px;
}
/********** fade in Slider **********/

/*************** 3d pinting page **************/

.printingtitle{
  margin-top:0px;
  font-size:45px;
}

.printinguploadbtn{
  border-radius:2px;
  padding:10px 20px;
  font-size:18px;
  margin-top:10px;
  border-radius:40px 0px 40px 0px;
}

@media screen and (max-width: 700px) {

  .printingtitle{

    font-size:25px !important;
  }
}


._3dpintingbg{
  background-attachment: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
._3dpintingoverlay{
 background-color: rgba(0, 170, 141,0.8);
 padding:15px 20px;
}
._3dgradiant{
  background-color: rgba(0, 170, 141,0.8);
  padding:15px 20px;
}

.clientlabel{
  /* Rotate div */
     -ms-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
     padding:10px 25px;
     border-radius:   50px  50px 0px  0px;
     position:fixed;
     z-index:100;
     top:50%;
     margin-bottom: -8px;
     left:-59px;
     letter-spacing: 2px;
     font-size: 15px;
       font-family: 'Roboto Condensed', sans-serif !important;
       box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important
     }


/********** blog page ***************/
.blogbg{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: relative;
  height:220px;
  margin-bottom: 10px;

}
.blogoverlay{
  /* background-color: rgba(0,0,0,0.4); */
  background: linear-gradient(rgba(255,255,255,0) 50%,rgba(246,246,246,0) 50%,rgba(0,0,0,0.9) 95%);
  width: 100%;
  height: 100%;

}

.blogoverlay:hover{
    background: linear-gradient(rgba(255,255,255,0) 50%,rgba(246,246,246,0) 50%,rgba(0, 170, 141,0.7) 95%);
 cursor: pointer;
}

.blogoverlay:hover .title h4,
.blogoverlay:hover .title p,
.blogoverlay:hover .title .text-teal
{
  color:white !important;

}


.title{
  padding: 10px;
 padding-top: 160px;

}
.blogoverlay .title h4{
  font-size: 18px;
  height:40px;
  overflow: hidden;
}
.blogoverlay .title h4,
.blogoverlay .title p
{
  color:white;
}

/********** blog page ***************/

/************ iblog page *************/
.blogimgbg{

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: relative;
  height:400px;
  padding:0px;
  border-radius:15px;
}
.mypanel{
background-color:white;
border:none;
border-radius:15px;
margin-bottom: 10px;
}
.mypanel .panel-body{
background-color:white;
border-color:white;
padding:0px;
border-radius:10px;
overflow:hidden;
}

.mypanel .panel-footer{
  background-color:white;
  border-color:white;
  border-radius:10px;
}
.relatedblogbg{
  background-repeat: no-repeat;
  background-size: cover;
  height:110px;
  border-radius: 3px;
}

.relatedblogcard{
border-radius:5px;
background-color:white;
padding:9px ;
}

.commentbg{
  background-repeat: no-repeat;
  background-size: cover;
  height:100px;
  width:100px;
  border-radius: 100px;
}

.blogdescpanel{
  background-color:white;
  border-color:white;
}

.blogdescpanel .panel-body{
  background-color:white;
  border-color:white;
  border-radius:15px;
}

.relatedblogdesc{
  margin-bottom:4px;
  font-size:14px;
  min-height:60px;
  max-height:80px;
  overflow: hidden;
  margin-top: 5px;
}

.line-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd
}

.nxtprevcard{
 padding: 5px;
 box-shadow: none !important;
 transition: ease-in-out .5s;
 border-radius: 5px;
 margin-bottom: 10px;
}

.nxtprevcard:hover{
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
  transition: ease-in-out .5s;
}
.nxtprevimg{
  background-repeat: no-repeat;
  background-size: cover;
  height:100px;
  width:100px;
}
.nexprv-desc{
  height:60px;
  overflow: hidden;
  margin-bottom: 1px;
}
/************ iblog page *************/


/*********** 3d design page *************/

.designservicetitle{
 font-size:70px;
}
.designservicetitle .btn{
  font-size:28px;
  padding:10px 30px;
  margin-top:8px;
}

.examplebg{
  height:300px;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: relative;
}

.exampleoverlay{
  height:100%;
  background-color: rgba(0,0,0,0);
}

.examplelink:hover
.exampleoverlay{
  background-color: rgba(0,0,0,0.6);
}

.examplelink h5{
  margin-bottom: 30px !important;
}

.examplelink:hover h5{
  color: #00aa8d !important;
  margin-bottom: 30px !important;
}

.expertsbg{
  height:150px;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: relative;
}

.bggetstarted{
  min-height:300px;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: fixed;
}

.getstartedoverlay{
  background-color: rgba(0,0,0,0.6);
  min-height:300px;
  padding: 20px 0px;
  overflow: hidden;
}


.materialbg{
  height:200px;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: relative;
  overflow: hidden;
}

.matoverlay{
  background-color: rgba(0,0,0,.7);
  height:100%;
  padding:70px 20px;
}


.materialscard{
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
  padding:10px;
  border-radius:5px;
  margin-bottom: 20px;
  background-color: white;
  height: 320px;
  overflow: hidden !important;
  cursor: pointer;
}

.materialscard .descdiv{
  padding:15px 10px;
  position: relative;
  transition: ease-out .7s;
  background-color: white;
  height: 260px;
}



.materialscard:hover .descdiv{
  margin-top: -200px;
  transition: ease-in .7s;
}

.materialscard .descdiv .direction{
  position:absolute;
  right:20px;
  margin-top:-35px;
  z-index:100 !important;
  width:40px;
  height:41px;
  border-radius:100px;
  font-size:17px;
  transition: ease-out .7s;
  background-color: #00AA8D;
  color: white;
  padding: 11px 12px;
}


.materialscard:hover .descdiv .direction{
  margin-top:0px;
    transition: ease-in .7s;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(190deg);
    transform: rotate(180deg);
}


.materialscard .descdiv label{
  transition: ease-out .7s;
}

.materialscard:hover .descdiv label{
  margin-top: 50px;
  transition: ease-in .7s;
}

.materialscard .descdiv p{
  height:47px;
  overflow: hidden;
}

.materialscard:hover .descdiv p{
  height:100%;
  overflow: visible;
  transition: ease-in 1s;
}



/************ 3d design service ***********/

/************************* sod login ********************/
sup{
  color:red;
}
.sodloginbg{
  margin-top:24px;
  margin-bottom:0px;
  min-height:100%;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: relative;
}
.loginbggrey{
  margin-top: 10%;
  min-height:380px;
  background-color: rgba(255, 255, 255,0.9);
  border-radius: 5px;
  padding:10px  40px;

}
.bggrey{
  background-color: rgba(0, 0, 0,0.7);
  width:100%;
  height:100%;
}
.logintitle{
  color: rgba(0,0,0,0.8)
}

.btnfloater{
  position: fixed;
  top:20px;
  left:20px;
  border-radius: 30px;
  padding: 8px 30px;
}


/************************* sod login ********************/



/********** faq page ****************/
.faqheadingcard{
  background-color:white;
  border-radius:15px;
  padding:15px;
  margin-top:30px;
  margin-bottom:5px;
}




/*********** mobile side bar  *************/

.side-menu {


  height: 100%;


}
.side-menu .navbar-nav .active a {
  background-color: #068771 !important;
  color:white !important;
  margin-right: -1px;

}
.side-menu .navbar-nav li {
  display: block;
  width: 100%;

}
.side-menu .navbar-nav li a {
  padding: 15px;
}
.side-menu .navbar-nav li a .fa {
  padding-right: 10px;
  margin-left: 10px;
}
.side-menu #dropdown {
  border: 0;
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.side-menu #dropdown .caret {
  float: right;
  margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
  float: right;
}


.navbar-nav #dropdown  a:hover{
  color:white !important;
}

.side-menu #dropdown .panel-body {
  padding: 0;
  background-color: #07c4a4;
}
.side-menu #dropdown .panel-body .navbar-nav {
  width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
  padding-left: 15px;
  border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
  border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
  margin-left: -20px;
  padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
  margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
  padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
  border-bottom: 1px solid #e7e7e7;
}

.side-menu .brand-name-wrapper {
  min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
  display: block;
}


/* Main body section */
.side-body {
  margin-left: 310px;
}
/* small screen */
@media (max-width: 768px) {
  .side-menu {
    position: relative;
    width: 100%;
    height: 0;
    border-right: 0;
  }

  .side-menu  li a{
  text-align: left;

  color:white !important;
  }

.con{
  padding:0px;
}

  .navbar-brand{
    margin-left: 70px;
  }
  .side-menu .brand-name-wrapper .navbar-brand {
    display: inline-block;
  }
  /* Slide in animation */
  @-moz-keyframes slidein {
    0% {
      left: -300px;
    }
    100% {
      left: 10px;
    }
  }
  @-webkit-keyframes slidein {
    0% {
      left: -300px;
    }
    100% {
      left: 10px;
    }
  }
  @keyframes slidein {
    0% {
      left: -300px;
    }
    100% {
      left: 10px;
    }
  }
  @-moz-keyframes slideout {
    0% {
      left: 0;
    }
    100% {
      left: -300px;
    }
  }
  @-webkit-keyframes slideout {
    0% {
      left: 0;
    }
    100% {
      left: -300px;
    }
  }
  @keyframes slideout {
    0% {
      left: 0;
    }
    100% {
      left: -300px;
    }
  }
  /* Slide side menu*/
  /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
  .side-menu-container > .navbar-nav.slide-in {
    -moz-animation: slidein 300ms forwards;
    -o-animation: slidein 300ms forwards;
    -webkit-animation: slidein 300ms forwards;
    animation: slidein 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

  }
  .side-menu-container > .navbar-nav {
    /* Add position:absolute for scrollable menu -> see top comment */
    position: fixed;
    left: -300px;
    width: 300px;
    top: 85px;
    height: 100%;
    border-right: 1px solid #6E645B;
    background-color: #00AA8D;
    -moz-animation: slideout 300ms forwards;
    -o-animation: slideout 300ms forwards;
    -webkit-animation: slideout 300ms forwards;
    animation: slideout 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 10000;
  }
  /* Uncomment for scrollable menu -> see top comment */
  /*.absolute-wrapper{
        width:285px;
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }*/
  @-moz-keyframes bodyslidein {
    0% {
      left: 0;
    }
    100% {
      left: 300px;
    }
  }
  @-webkit-keyframes bodyslidein {
    0% {
      left: 0;
    }
    100% {
      left: 300px;
    }
  }
  @keyframes bodyslidein {
    0% {
      left: 0;
    }
    100% {
      left: 300px;
    }
  }
  @-moz-keyframes bodyslideout {
    0% {
      left: 300px;
    }
    100% {
      left: 0;
    }
  }
  @-webkit-keyframes bodyslideout {
    0% {
      left: 300px;
    }
    100% {
      left: 0;
    }
  }
  @keyframes bodyslideout {
    0% {
      left: 300px;
    }
    100% {
      left: 0;
    }
  }
  /* Slide side body*/
  .side-body {
    margin-left: 5px;
    margin-top: 70px;
    position: relative;
    -moz-animation: bodyslideout 300ms forwards;
    -o-animation: bodyslideout 300ms forwards;
    -webkit-animation: bodyslideout 300ms forwards;
    animation: bodyslideout 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .body-slide-in {
    -moz-animation: bodyslidein 300ms forwards;
    -o-animation: bodyslidein 300ms forwards;
    -webkit-animation: bodyslidein 300ms forwards;
    animation: bodyslidein 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  /* Hamburger */
  .navbar-toggle {
    border: 0;
    float: left;
    padding: 18px;
    margin: 0;
  }

  /* Dropdown tweek */
  #dropdown .panel-body .navbar-nav {
    margin: 0;
  }
}
/*********** mobile side bar ************/


/****** lg desktop only *******/
@media screen and (min-width: 992px) {
  .deskright{
    float: right !important;
  }
}

/****** lg desktop only *******/





/************** mobile screen size **************/
@media (max-width: 760px) {


.mobcenter{
  text-align: center !important;
}

.faqheadingcard{
  margin-top: 80px;
}
.bgparallx2{
  min-height: 250px;
}
.mobileoverflowhid{
  overflow: hidden;
}

.designservicetitle{
  font-size: 35px;
  text-align: center;
}
.designservicetitle .btn{
  font-size:15px !important;
  margin-top:10px !important;
  float: none !important;
}


.customlft {
  position: relative;
  min-height: 55px;
  margin-top: 10px;
  left:27%;
}

.calltoact{
   width: 100% !important;
   left:0px;
   bottom:0px;
   border-radius: 0px;
}


}

/************** mobile screen size **************/
/************** tab screen size **************/

@media screen and (max-width: 768px)  and (min-width: 761px) {

  .designservicetitle{
   font-size:40px;
  }

  .designservicetitle .btn{
    font-size:18px !important;
    margin-top:3px !important;
  }

.calltoact{
  padding-bottom: 20px;
}

.calltoact .strupbtn{
  padding: 7px 10px;
  font-size: 13px;
}
.calltotitle{
  font-size:18px;
}

.customlft{
  padding-left: 5% !important;
}

.w3-modal .w3-card-4{
  margin-top:25% !important;
}

}
/************** tab screen size **************/

/************** md  screen size **************/

@media screen and (max-width: 1199px)  and (min-width: 992px) {


    .calltoact .leftfreespace{
      margin-left:-50px !important;
    }


}



/*********** ipad  navbar collapse ********/
@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/***********  ipad  navbar  collapse ********/
/************** tab screen size **************/


.card-img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  margin-bottom: 5px;
}

.filament-card {
  position: relative;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.kg {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.filament-card:hover {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mini-p {
  font-size: 13px;
  color: #6c757d;
  padding-top: 5px;
}

.mb-5 {
  margin-bottom: 20px;
}

.py-4 {
  padding: 0 1rem 1rem 1rem;
}

.d-flex {
  display: flex;
  justify-content: start;
}

.d-flex p {
  margin: 0 10px;
  padding: 15px;
  background-color: red;
  border-radius: 20px;
  margin-bottom: 10px;
} 

.zoom-container {
  position: relative;
  display: inline-block;
}

.zoom-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  display: none;
}

.zoom-img:hover+.zoom-overlay {
  display: block;
}

.filament-color {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 10px;
  transition: transform 0.2s ease; /* Add smooth transition effect */
}

.filament-color:hover {
  transform: scale(1.1); /* Zoom effect on hover */
}

.border-bottom{
  border-bottom: 1px solid #00AA8D !important;
}


.fw-bold{
  font-weight: 600;
}

.custom-list{
  list-style-type: none;
}

.custom-list li::before {
  content: "\2022";
  color: #00AA8D;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -2em;
}

.custom-list-items{
  padding-left: 0;
  padding: 5px 0;
}

@media screen and (max-width: 768px) {
  .text-center{
    text-align: center;
  }
  .py-4 {
    padding: .7rem 1rem 1rem 1rem;
  }
  .filament-color {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
@media screen and (min-width: 768px) {
  .text-lg-start{
    text-align: start;
  }
}

.text-start {
  text-align: start !important;
}


.gallery-image-sub {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-bottom: 30px;
  transition: transform 0.4s ease;
} 

.gallery-image-sub:hover{
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .gallery-image-sub {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }
}

@media (max-width: 500px) {
  .gallery-image-sub {
      width: 100%;
      height: 150px;
      object-fit: cover;
  }
}
.image-container {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-bottom: 30px;
  overflow: hidden;
} 
@media (max-width: 768px) {
  .image-container {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }
}

@media (max-width: 500px) {
  .image-container {
      width: 100%;
      height: 150px;
      object-fit: cover;
  }
}

.fs-5{
  font-size: 3rem !important;
}

.bg-main{
  min-height: 250px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.4s ease;
}

.bg-main:hover {
  background-color: lightblue;
}

.main-font{
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  /* line-height: 20px; */
  font-weight: 400;
  /* text-transform: uppercase; */
}

.w-18{
  width:32%;
}

.w-19{
  width:19%;
}

@media screen and (max-width: 768px) {
  .w-19{
    width: 60%;
  }
  .w-18{
    width:80%;
  }
}