@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
@import 'https://fonts.googleapis.com/css?family=Arima+Madurai|Dancing+Script';
@import 'https://fonts.googleapis.com/css?family=Maven+Pro';
 body {
	width: 100%;
	background-color: #333;
	 font-family: 'PT Sans Narrow', sans-serif;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
/* I wanted to center my loader */

#cycle-loader {
	height: 32px;
	left: 50%;
	margin: -8px 0 0 -8px;
	position: absolute;
	top: 50%;
	width: 32px;
	z-index: 999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/

#maximage {
	display: none;
	/* Only use this if you fade it in again after the images load */
	position: fixed !important;
}
/*Set my gradient above all images*/

#gradient {
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 999;
}
/*Set my logo in bottom left*/

#logo {
	top: 15px;
	height: auto;
	left: 20px;
	position: absolute;
	z-index: 1000;
}
#logo img {
	margin-right: 10px;
}
#logodark {
	padding-top: 15px;
	padding-left: 0px;
	text-align: center;
}
#logodark img:first-child {
	margin-bottom: 3px;
}
#arrow_left,
#arrow_right {
	bottom: 30px;
	height: 67px;
	position: absolute;
	right: 30px;
	width: 36px;
	z-index: 1000;
}
#arrow_left {
	right: 86px;
}
#arrow_left:hover,
#arrow_right:hover {
	bottom: 29px;
}
#arrow_left:active,
#arrow_right:active {
	bottom: 28px;
}
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.in-slide-content {
	color: #333;
	font-family: 'Helvetica Neue', helvetica;
	font-size: 60px ;
	font-weight: bold;
	letter-spacing: -2px;
	margin: 20% auto;
	text-transform: uppercase;
	position: relative;
	width: 1000px;
	line-height: 55px;
	text-align: center;
	z-index: 9999;
	/* Show above .gradient */
	color: #fff !important;
	text-shadow: 0 2px 2px #333 !important;
	-webkit-font-smoothing: antialiased;
}
header {
	position: absolute;
	width: 100%;
	z-index: 99;
	background-image: url(lib/images/topshadow-b.png);
	background-repeat: repeat-x;
	height: 350px;
}
.overlay {
	background: rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 999;
	display: none;
}
.light-text {
	color: #ddd;
	text-shadow: 0 1px 0 #666;
}

.youtube-video,
video {
	left: 0;
	position: absolute;
	top: 0;
}
.navicon {
	position: fixed;
	right: 30px;
	top: 40px;
	z-index: 999;
}
@-webkit-keyframes navigationicon {
	0% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: perspective(400px) translateZ(0px) rotateY(0deg) scale(1);
	}
	10% {
		-webkit-animation-timing-function: ease-out;
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
	}
	12.5% {
		-webkit-animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
	}
	20% {
		-webkit-animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);
	}
	25% {
		-webkit-animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);
	}
	100% {
		-webkit-animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);
	}
}
@keyframes navigationicon {
	0% {
		animation-timing-function: ease-out;
		transform: perspective(400px) translateZ(0px) rotateY(0deg) scale(1);
	}
	10% {
		animation-timing-function: ease-out;
		transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
	}
	12.5% {
		animation-timing-function: ease-in;
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
	}
	20% {
		animation-timing-function: ease-in;
		transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);
	}
	25% {
		animation-timing-function: ease-in;
		transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);
	}
	100% {
		animation-timing-function: ease-in;
		transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);
	}
}
.stayon {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 999;
}
.stayon p {
	color: #fff;
	font-family: 'Arima Madurai', cursive;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	float: left;
}
.stayon h3 {
	float: left;
	font-size: 25px;
	color: #fff;
	font-family: 'Dancing Script', cursive;
	margin-right: 5px;
}
.stayon ul {
	float: left;
	margin: 0px;
}
.stayon ul li {
	float: left;
	list-style: none;
	margin: 0px;
}
.stayon ul li a {
	color: #fff;
	font-size: 20px !important;
	padding: 6px 5px;
	display: block;
}
.split {
	clear: both;
}
#maximage {
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
#navbartabclose {
	cursor: pointer;
	display: none;
}
#navbartab {
	cursor: pointer;
	animation: navigationicon 6s linear 3;
	-webkit-animation: navigationicon 6s linear 3;
}
#vidtabclose {
	cursor: pointer;
	display: none;
}
#vidtabclose img {
	margin: 5px 0 0 0px;
}
#vidtab {
	margin: 5px 0 0 0px;
	cursor: pointer;
}
#navbgnew {
	width: 240px;
	height: 100vh;
	background: rgb(47, 47, 47);
	top: 0;
	left: -240px;
	z-index: 9999999999 !important;
	position: fixed;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.video {
	width: 100%;
	overflow: hidden;
	position: fixed;
	display: none;
}
#vidtabi {
	cursor: pointer;
}
.videolink {
	text-align: center;
	width: 100%;
	margin: 20px 0 20px 0px;
}
.videolink a {
	background-color: #996600;
	color: #fff;
	padding: 8px 0 5px 0px;
	display: block;
	font-family: 'Arima Madurai', cursive;
	text-transform: uppercase;
	text-decoration: none;
}
.videolink a:hover {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}
nav {
	width: 100%;
	margin: 14px 0 0 0px;
}
nav ul {
	width: auto;
}
nav ul li {
	list-style: none;
	text-align: center;
}
nav ul li a {
	padding: 9px 0 9px 0px;
	font-family: 'Maven Pro', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	color: #FFF;
	border-bottom: solid 1px #505050;
	display: block;
}
nav ul li a:hover {
	color: #E3E3E3;
	text-decoration: none;
	border-bottom: solid 1px #505050;
	background-color: #181818;
}
nav ul li:hover {
	color: #E3E3E3;
	text-decoration: none;
	background-color: #181818;
}
nav ul ul li:hover {
	color: transparent;
	text-decoration: none;
	border-bottom: transparent;
	background-color: transparent;
}
nav ul li:hover ul {
	display: block;
}
nav ul ul {
    position: absolute;
    left: 100%;
    width: 500px;
    margin-top: -39px;
    background-color: #FFF;
	display: none;
}
nav ul ul.productmenu {
    margin: 0;
    top: 0;
	width: 600px;
}
nav ul ul.productmenu li {
	width: 33.3%;
}
nav ul ul * {
	box-sizing: border-box;
}
nav ul li.submenu-parent a::before {
    content: "";
    display: none;
    position: absolute;
    width: 0px;
    height: 0px;
    border-bottom: 12px solid transparent;
    border-top: 12px solid transparent;
    border-right: 12px solid #fff;
    right: 0px;
    margin-top: -2px;
}
nav ul li.submenu-parent:hover a::before {
	display: block;
}
nav ul ul h3 {
    font-size: 36px;
    color: #C42216;
    margin-bottom: 8px;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: normal;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.9px;
    margin-top: 8px;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 8px;
}
nav ul ul li {
    width: 50%;
    float: left;
    padding: 0 5px;
}
nav ul ul li a {
    color: #333;
    border-color: #e9e9e9;
    padding: 10px;
	transition: 0.5s;
}
nav ul ul li a:hover {
    color: #C32216;
    text-decoration: none;
    border-bottom: solid 1px #e9e9e9;
    background-color: #fff;
	transition: 0.5s;
}
nav ul ul li a img {
    width: 70%;
}
nav ul ul li a span {
    display: block;
    padding-top: 6px;
}
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.fade-in.two {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay:0.4s;
  animation-delay: 0.4s;
}

.fade-in.three {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 10.8;
  animation-delay: 0.8s;
}

.stayon_left {
	width: 90%;
	text-align: center;
	margin: auto;
}
.stayon_left p {
	color: #fff;
	font-family: 'Arima Madurai', cursive;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 10px 0 0 0px;
}
.stayon_left h3 {
	font-size: 30px;
	color: #fff;
	font-family: 'Dancing Script', cursive;
	margin: 20px 0 10px 0px;
}
.stayon_left ul {
	margin: 0px;
}
.stayon_left ul li {
	float: left;
	list-style: none;
	margin: 0px;
	width: 50%;
	text-align: center;
}
.stayon_left ul li a {
	color: #fff;
	font-size: 20px !important;
	padding: 6px 5px;
	display: block;
}
footer {
	width: 100%;
	position: fixed;
}
.innerbanner {
	width: 100%;
	background-color: #fff;
}
.innerbanner img {
	width: 100%;
	margin-bottom: -4px;
}
.imatter-container {
	width: 100%;
	background-color: #fff;
	padding: 30px 0 60px;
}
.warrper {
	width: 1300px;
	margin: auto;
}
.breadcurmb {
	width: 100%;
	padding: 20px 0;
	background-color: #000;
	color: #D2D2D2;
	font-size: 16px;
	line-height: 22px;
	font-family: 'Maven Pro', sans-serif;
}
.breadcurmb a {
	color: #fff;
	font-weight: 600;
	font-size: 18px;
}
.breadcurmb a:hover {
	color: #ccc;
}
.imatter {
	width: 100%;
	min-height: 450px;
}
.imatter h3 {
	font-size: 43px;
	color: #333;
	font-family: 'PT Sans Narrow', sans-serif;
	line-height: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.9px;
}
.imatter p {
    font-family: 'PT Sans', sans-serif;
    font-size: 18px;
    line-height: 31px;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
}
.footer_links {
	width: 100%;
	background-color: #333;
	padding: 15px 0;
}
.footer_links:after {
	content: "";
	display: block;
	clear: both;
	box-sizing: border-box;
}
.footer_links .stayon {
	position: relative;
	left: 0px;
	width: 1300px;
	margin: auto;
	bottom: 0px;
}
.freeback {
	width: 100%;
}
.freeback p {
	width: 48%;
	float: left;
	margin: 10px 2% 10px 0% !important;
	text-align: left;
}
.freeback p label {
    width: 100%;
    text-align: left;
    display: block;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #C52317;
}
.freeback p label span {
	display: inline-block;
	color: #f33;
}
.freeback p input,
.freeback p textarea {
	width: 100%;
	padding: 10px 1%;
	font-size: 14px;
	border: 1px solid #DDD;
	margin-top: 2px;
	height: 45px;
	box-sizing: border-box;
	font-size: 19px;
}
.full {
	width: 98% !important;
}
.freeback .full textarea {
    padding: 10px 1%;
    width: 100%;
    min-height: 150px;
}
.button {
	padding: 8px 46px;
	font-size: 16px;
	border-width: 1px 1px 3px;
	border-style: solid;
	border-color: #9E261E;
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
	cursor: pointer;
	border-radius: 3px;
	background-color: #C52317;
	color: #FFF;
	margin-right: 10px;
	transition: 0.5s;
}
.button:hover {
	background-color: #333;
	border-color: #000;
	transition: 0.5s;
}
.greentext {
	color: #519300 !important;
}
.contact_page {
    width: 100%;
    margin-top: 20px;
}
.contact_page .contact-row {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.contact_page .infoarea {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding-right: 15px;
}
.contact_page .infoarea h4 {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 35px;
    line-height: normal;
    margin-bottom: 15px;
    font-weight: 800;
    color: #C52317;
}
.contact_page .infoarea p  {
	margin-bottom: 15px;
	line-height: 28px;
}
.contact_page .maparea {
    width: 50%;
    float: left;
}
.contact_page .maparea iframe {
    height: 350px;
    width: 100%;
    margin-top: 25px;
}
.highlight {
    font-size: 25px !important;
    margin-bottom: 20px !important;
}
.productmenu .demo-y {
    padding-bottom: 25px;
}
.productviewformat {
    width: 100%;
}
.productviewformat::after {
	content: "";
	display: block;
	clear: both;
}
.productviewformat ul {
    width: auto;
    list-style: none;
    margin: 0 -15px;
    padding: 0;
}
.productviewformat ul li {
    width: 33.3%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
}
.fourrows ul li {
	width: 25%;
}
.productviewformat ul li a {
    display: block;
    text-align: center;
    border: 1px solid #efefef;
    box-sizing: border-box;
	transition: 0.9s;
    padding-bottom: 8px;
}
.productviewformat ul li a:hover {
    text-decoration: none;
    border-color: #ddd;
    transition: 0.8s;
    box-shadow: 0px 1px 5px #E4E4E4;
}
.productviewformat ul li a:hover span {
	text-decoration: none;
}
.productviewformat ul li a:hover h4 {
    text-decoration: none;
    color: #202020;
}
.productviewformat ul li a:hover img {
    transform: rotate(10deg) scale(1.1);
    transition: 0.5s;
}
.productviewformat ul li a div.product-image {
    width: 100%;
    overflow: hidden;
}
.productviewformat ul li a div.product-image img {
	transition: 0.5s;
	width: 100%;
}
.productviewformat ul li a span {
    display: block;
    font-size: 25px;
    font-family: 'Maven Pro', sans-serif;
    color: #C52317;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.productviewformat ul li a h4 {
    display: block;
    font-family: 'Maven Pro', sans-serif;
    font-size: 19px;
    color: #666;
    min-height: 44px;
	text-transform: capitalize;
}
.imatter .leftside {
	width: 23%;
	float: left;
}
.imatter .leftside .quicklinks {
    width: 299px;
    background-color: #fff;
}
.imatter .leftside .quicklinks h3 {
    font-size: 28px;
    display: block;
    padding: 14px 5px 11px 5px;
    background-color: #C52317;
    color: #fff;
    text-align: center;
    line-height: 27px;
    margin-bottom: 0;
}
.imatter .leftside .quicklinks ul {
    width: auto;
    margin: 0;
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
}
.imatter .leftside .quicklinks ul li {
    width: 100%;
}
.imatter .leftside .quicklinks ul li a {
    display: block;
    padding: 10px 10px;
    font-size: 16px;
    transition: 0.5s;
    border-bottom: 1px solid #ddd;
    border-left: 5px solid;
    border-left-color: #fff;
	font-family: 'Maven Pro', sans-serif;
}
.imatter .leftside .quicklinks ul li a:hover {
    background-color: #F6F6F6;
    color: #C52317;
    transition: 0.5s;
    border-left: 5px solid #C52317;
	text-decoration: none;
}
.active {
    background-color: #F6F6F6;
    color: #C52317;
    transition: 0.5s;
    border-left: 5px solid #C52317 !important;
}
.rightside {
	width: 75%;
	float: right;
}
.rightside h3 {
	margin-bottom: 5px;
}
.developedby {
	display: none;
}
.footer_links .developedby {
    display: block;
    float: right;
    margin-top: -27px;
    color: #fff;
    font-family: 'Arima Madurai', cursive;
    font-size: 18px;
    text-transform: lowercase;
    letter-spacing: 1px;
    text-align: right;
    line-height: 22px;
}
.footer_links .developedby span {
    font-size: 12px;
    text-transform: uppercase;
}
.button1 {
    padding: 6px 40px;
    font-size: 15px;
    border-width: 1px 1px 3px;
    border-style: solid;
    border-color: #9E261E;
    border-image: none;
    cursor: pointer;
    border-radius: 3px;
    background-color: #C52317;
    color: #FFF;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}
.button1:hover{
    background-color: #000;
    color: #fff;
    border-color: #333;
    
}
.table-data {
    width: 100%;
    border: 1px solid #ddd;
    margin: 15px 0;
    border-collapse: collapse;
}

.table-data thead tr {
    background-color: rgb(197, 35, 23);
    color: rgb(255, 255, 255);
}

.table-data thead tr th {
    border: 1px solid rgb(221, 221, 221);
    line-height: 23px;
    font-family: calibri;
    font-size: 17px;
    font-weight: 500;
    padding: 10px;
    text-align: center;
}

.table-data thead tbody tr {}

.table-data thead tbody tr td {
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 17px;
}

.table-data tr {
    background-color: #fff;
}

.table-data thead tr td {
    text-align: center;
    padding: 11px;
    font-size: 22px;
}
.table-data tr td {
    text-align: center;
    padding: 11px;
    font-size: 16px;
    font-family: 'Maven Pro', sans-serif;
    border: 1px solid rgb(221, 221, 221);
    line-height: 23px;
    color: #666;
	text-transform: capitalize;
}
.feat  li{
list-style:none !important;
}
.demo-y {
max-height: 322px;
}