@import url('reset.css');

body {
    min-height: 500px;
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	text-align:justify;
	color:#000;
	background:url(../images/bg.jpg) repeat-x;
	
}
a{ 
			color:#000; 
			font-family: "Raleway", sans-serif;
			text-decoration:none;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			-transition: all 0.3s ease-in-out; }
a:hover{ 
			color:#333; 
			font-family: "Raleway", sans-serif;
			text-decoration:none;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			-transition: all 0.3s ease-in-out; }

#navtabl{display: block;}
#navbs{display: none;}
.marginL{ margin-left:10px;}

@media (max-width: 767px){
#navtabl{display: none;}
#navbs{display: block;}
.marginL{margin-left:0;}
}
/*----------------------------header----------------------------------*/

#toptab{ width:100%; height:25px; background:#cc0001;}
.toptab{ max-width:992px; margin: 0 auto; padding-top:2px; font-family: 'Raleway', sans-serif; font-size:10px; color:#fff; text-align:center; letter-spacing:4px;}
@media (max-width: 991px){
.toptab{ max-width:992px; margin: 0 auto; padding-top:2px; font-family: 'Raleway', sans-serif; font-size:10px; color:#fff; text-align:center; letter-spacing:2px;}
}

#header{ height:auto; width:100%; margin:0 auto; padding-top:10px;}

.header{ margin:0px auto; max-width:992px; color:#000; font-family: "Raleway", sans-serif; }

.logo_top{ position:absolute; margin-top:15px; margin-left:100px; padding-left:18px;}
.logo_bottom{ position:absolute; margin-top:90px; margin-left:100px; padding-left:18px;}

.logo_txt{ background:#6C4B1A; height:45px; width:100%; position:absolute; margin-top:45px; margin-left:95px; padding:0 18px; }

.menu{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,b9bdc4+100 */
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiOWJkYzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(185,189,196,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(185,189,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(185,189,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b9bdc4',GradientType=0 ); /* IE6-8 */
width:auto; color:#333; font-family: "Raleway", sans-serif; font-size:13px; float:right; z-index:2; border:thin solid #ccc; height:45px; margin-top:45px; }
/*.menu a{ color:#000; font-family: "Raleway", sans-serif; font-size:13px; padding:15px 15px; border-right:thin solid #ccc; text-transform:uppercase; position:relative; }
.menu a:hover{ color:#fff; background:#cc0001; }

@media (max-width: 955px){
.menu a{ color:#000; font-family: "Raleway", sans-serif; font-size:13px; padding:15px 5px; border-right:thin solid #ccc; text-transform:uppercase; position:relative; margin-top:10px; }
}*/


/* Main */
#menu{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;  
}

#menu li{
	float: left;
	position: relative;
}

#menu a{
	float: left;
	padding:11px 15px;
	color: #000;
	font-family: 'Raleway', sans-serif; 
	font-size:13px; 
	text-decoration: none;
	border-right:thin solid #ccc;
	text-transform:uppercase; 
}

#menu a:hover{
	background:#cc0001;
	color: #fff;
}

#menu li:hover > a{
	color: #fff;
}

*html #menu li a:hover{ /* IE6 */
	color: #fff;
}

#menu li:hover > ul{
	margin-top:-5px;
	display: block;
}

#menu > li:first-child a{
}
@media (max-width: 910px){
#menu a{
	float: left;
	padding:11px 6px;
	color: #000;
	font-family: 'Raleway', sans-serif; 
	font-size:13px; 
	text-decoration: none;
	border-right:thin solid #ccc;
	text-transform:uppercase; 
}
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 99999;    
    background: #fff;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
	width:220px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
	border-bottom:thin solid #666;
    /*-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;*/
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
	color:#333;
	border:none;
}

*html #menu ul a{ /* IE6 */   
	height: 10px;
	width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
	height: 10px;
	width: 150px;
}

#menu ul a:hover{
	color:#fff;
	/*background: #333;*/
}

#menu ul li:first-child a{
    /*-moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;*/
}

/*#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #6E6F72;
}*/

#menu ul li:first-child a:hover:after{
    border-bottom-color: #6E6F72; 
}

#menu ul li:last-child a{
    /*-moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;*/
}

/* Clear floated elements */
#menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

/*----------------------------footer----------------------------------*/

#footer{ font-family: "Raleway", sans-serif; height:auto; width:100%;  background:#fff; margin-top:20px;}
.footer{ margin:0 auto; max-width:992px; font-size:11px; line-height:16px; color:#000; border-top:thin solid #BCBEC0; padding:10px; margin:0 auto;}



/*----------------------------content----------------------------------*/
	 
#wrapper{ font-family: "Raleway", sans-serif; width:100%;}
.wrapper{ font-family: "Raleway", sans-serif; margin:0 auto; max-width:992px; width:100%; min-height:300px; color:#666666; }

.wrapper p{ padding-bottom:10px; color:#333;}
.wrapper p span{ font-size:18px; color:#cc0001; font-weight:700;}

.idxabt{ background:url(../images/about_bg.jpg); width:100%; height:auto; min-height:300px; padding:20px 10px;}
.abtTitle{ font-family: "Raleway", sans-serif; font-size:24px; color:#FFF; text-align:center; padding:20px; line-height:32px;  font-weight:300;}
.abtTitle span{ font-family: "Raleway", sans-serif; font-size:42px; color:#ffa800; font-weight:700; } 
.abtTxt{ font-family: "Raleway", sans-serif; font-size:14px; color:#FFF; text-align:center; padding:20px; line-height:28px; max-width:992px; margin: 0 auto;}

.proTitle{ font-family: "Raleway", sans-serif; font-size:24px; color:#000; text-align:center; padding:20px; line-height:32px;  font-weight:300;}
.proTitle span{ font-family: "Raleway", sans-serif; font-size:24px; color:#ff0000; font-weight:700; } 

.read{ font-family: "Raleway", sans-serif; font-size:12px; color:#000; padding:10px 30px; width:120px; background:#ffa800;  margin: 0 auto;}
.read:hover{ font-family: "Raleway", sans-serif; font-size:12px; color:#fff; padding:10px 30px; width:120px; background:#cc0001;  margin: 0 auto;}
.logobox{  border:thin solid #ccc; padding-bottom:1px; margin:10px 0; }


/*----------------------------product----------------------------------*/

.responsive-container{
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
	background:#C90;
	border-top-left-radius:10px;
	border-bottom-right-radius:10px;
}
.responsive-container:hover{
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
	background:#eee;
	border-top-left-radius:10px;
	border-bottom-right-radius:10px;
}
.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding:5px;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
	 z-index:1;
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */

/*-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));*/
}


.responsive-containerPro{
    position: relative;
    width: 100%;
	background-image: url(../images/probg.png);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    /*border: 1px solid #ccc;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;*/
	margin-bottom:10px;
}
.img-containerPro {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding:10px;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-containerPro .centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-containerPro img {
	 z-index:1;
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */

/*-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));*/
}

/*----------------------------type setting---------------------------------*/

.title {font-family:"Raleway", san-serif; color:#ffa800; font-size:24px;  margin:15px 0; font-weight:800; width:100%; padding-bottom:15px; border-bottom:thin solid #ddd;}

.title span{font-family:"Raleway", san-serif; color:#000; font-size:24px; font-weight:500;}

.projTitle{ text-align:center; font-weight:bold; font-size:14px; padding-top:5px;}
.proListTitle{ text-align:center; font-weight:bold; font-size:14px; padding:10px 5px; background:#044D66; color:#fff; width:100%; border-top-left-radius:5px; border-top-right-radius:5px;  min-height:62px;}

/*-----------------------------------input field----------------------------------------------*/
.inputMessage{ font-family: 'Open Sans',sans-serif;
	   color: #000;
	   font-size:12px;}
input{
    /*background: linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);*/
	 
	border-radius: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
    transition: all 0.2s linear;
    color: #333;
    position: relative;
    padding: 5px;
}
    &::-webkit-input-placeholder {
       font-family: 'Open Sans',sans-serif;
	   color: #000;
    }
    
    &:-moz-placeholder {
       font-family: 'Open Sans',sans-serif;
	   color: #000;
    }
        
    &:focus{
        font-family: 'Open Sans',sans-serif;
		box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
        outline: none;
    }
textarea{
    /*background: linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);*/
    border-radius: 3px;
    border: 1px solid #3F4343;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
    transition: all 0.2s linear;
    color: #333;
    position: relative;
    padding: 5px;
}

/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  /*margin-right: 19px;*/
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  padding:10px;
  text-align:center;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd #dddddd #ddd #ddd;
  *border-right-color: #ffffff;
  background:#eeeeee;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}