/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
* {
    box-sizing: border-box;
}

body {
	margin-top:50px;
  padding-bottom: 40px;
  color: #5a5a5a;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


.navbar-home img{float:left;}
.navbar-home .c1{color:#000; font-size:15pt;}
.navbar-home .c2{color: #25aaed; font-size:14pt;}
.navbar-home .c3{font-size:13pt;}

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu ul.dropdown-menu {
	display:none !important;
}
.dropdown-submenu:hover .dropdown-menu {
	display:block !important;
    top: 0;
    left: 100%;
    margin-top: -1px;
}
.caret-right {
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 5px solid;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: top;
    width: 0;
	vertical-align: middle;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 40px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.product{text-align:center;}
.product-item{position:relative; border:1px solid #ccc}
.product .hot{ background: transparent url('../images/sale-tag.png') no-repeat; width:80px; height:61px; position:absolute; top:1px; right:10px;}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

/********************** NHTU Fix **************************/
/* Responsive Carousel */
@media (max-width: 766px) {
  .carousel {
    height: 240px;
  }
   /* Declare heights because of positioning of img element */
   .carousel .item {
		height: 240px;
    }
}
@media (max-width: 480px) {
  .carousel {
    height: 140px;
  }
   /* Declare heights because of positioning of img element */
   .carousel .item {
		height: 140px;
    }
}

/* Hover dropdown */
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }
 
/* Menu style */
.dropdown-menu li{
	height:40px;
    line-height:40px;
	vertical-align:middle;
}
.dropdown-menu li a{
	font-size: 1.2em;
}
.hotline p {font-size:1.2em; font-weight:bold; margin:12px 10px 0 0;}
.hotline p span{color:red;}
.justify{text-align: justify;
    text-justify: inter-word;}
	

@-webkit-keyframes is-visible{
    0%{opacity:0;visibility:visible;}
    100%{opacity:1;}
}
.visible {
  visibility: visible;
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // IE8
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=100); // IE 5-7
  -webkit-transition: is-visible 1s linear;
  -moz-transition: is-visible 1s linear;
  -o-transition: is-visible 1s linear;
  transition: is-visible 1s linear;
}
@-webkit-keyframes is-hidden{
    0%{opacity:1;visibility:visible;}
    99%{opacity:0;}
    100%{opacity:0;visibility: hidden;}
}
.hidden {
  visibility: hidden;
  opacity: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE8
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=0); // IE 5-7

  -webkit-transition: visibility 1s 0s, opacity 1s linear;
  -moz-transition: visibility 1s 0s, opacity 1s linear;
  -o-transition: visibility 1s 0s, opacity 1s linear;
  transition: visibility 1s 0s, opacity 1s linear;
}
#scroll {
	position:fixed;
	right:5px;
	bottom:5px;
	cursor:pointer;
	width:50px;
	height:50px;
	background-color:#3498db;
	text-indent:-9999px;
	-webkit-border-radius:60px;
	-moz-border-radius:60px;
	border-radius:60px
}
#scroll span {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-10px;
	margin-top:-15px;
	height:0;
	width:0;
	border:10px solid transparent;
	border-bottom-color:#ffffff;
}
#scroll:hover {
	background-color:#e74c3c;
	opacity:1;filter:"alpha(opacity=100)";
	-ms-filter:"alpha(opacity=100)";
}


.container .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.container .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.container .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.container .price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.container .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.container .price .grey {
    background-color: #eee;
    font-size: 20px;
}

.container .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.image img{height:130px;}

@media only screen and (max-width: 600px) {
    .container .columns {
        width: 100%;
    }
}

.aliceblue{color: #f0f8ff;}
.antiquewhite{color: #faebd7;}
.aqua{color: #00ffff;}
.aquamarine{color: #7fffd4;}
.azure{color: #f0ffff;}
.beige{color: #f5f5dc;}
.bisque{color: #ffe4c4;}
.black{color: #000000;}
.blanchedalmond{color: #ffebcd;}
.blue{color: #0000ff;}
.blueviolet{color: #8a2be2;}
.brown{color: #a52a2a;}
.burlywood{color: #deb887;}
.cadetblue{color: #5f9ea0;}
.chartreuse{color: #7fff00;}
.chocolate{color: #d2691e;}
.coral{color: #ff7f50;}
.cornflowerblue{color: #6495ed;}
.cornsilk{color: #fff8dc;}
.crimson{color: #dc143c;}
.cyan{color: #00ffff;}
.darkblue{color: #00008b;}
.darkcyan{color: #008b8b;}
.darkgoldenrod{color: #b8860b;}
.darkgray{color: #a9a9a9;}
.darkgrey{color: #a9a9a9;}
.darkgreen{color: #006400;}
.darkkhaki{color: #bdb76b;}
.darkmagenta{color: #8b008b;}
.darkolivegreen{color: #556b2f;}
.darkorange{color: #ff8c00;}
.darkorchid{color: #9932cc;}
.darkred{color: #8b0000;}
.darksalmon{color: #e9967a;}
.darkseagreen{color: #8fbc8f;}
.darkslateblue{color: #483d8b;}
.darkslategray{color: #2f4f4f;}
.darkslategrey{color: #2f4f4f;}
.darkturquoise{color: #00ced1;}
.darkviolet{color: #9400d3;}
.deeppink{color: #ff1493;}
.deepskyblue{color: #00bfff;}
.dimgray{color: #696969;}
.dimgrey{color: #696969;}
.dodgerblue{color: #1e90ff;}
.firebrick{color: #b22222;}
.floralwhite{color: #fffaf0;}
.forestgreen{color: #228b22;}
.fuchsia{color: #ff00ff;}
.gainsboro{color: #dcdcdc;}
.ghostwhite{color: #f8f8ff;}
.gold{color: #ffd700;}
.goldenrod{color: #daa520;}
.gray{color: #808080;}
.grey{color: #808080;}
.green{color: #008000;}
.greenyellow{color: #adff2f;}
.honeydew{color: #f0fff0;}
.hotpink{color: #ff69b4;}
.indianred{color: #cd5c5c;}
.indigo{color: #4b0082;}
.ivory{color: #fffff0;}
.khaki{color: #f0e68c;}
.lavender{color: #e6e6fa;}
.lavenderblush{color: #fff0f5;}
.lawngreen{color: #7cfc00;}
.lemonchiffon{color: #fffacd;}
.lightblue{color: #add8e6;}
.lightcoral{color: #f08080;}
.lightcyan{color: #e0ffff;}
.lightgoldenrodyellow{color: #fafad2;}
.lightgray{color: #d3d3d3;}
.lightgrey{color: #d3d3d3;}
.lightgreen{color: #90ee90;}
.lightpink{color: #ffb6c1;}
.lightsalmon{color: #ffa07a;}
.lightseagreen{color: #20b2aa;}
.lightskyblue{color: #87cefa;}
.lightslategray{color: #778899;}
.lightslategrey{color: #778899;}
.lightsteelblue{color: #b0c4de;}
.lightyellow{color: #ffffe0;}
.lime{color: #00ff00;}
.limegreen{color: #32cd32;}
.linen{color: #faf0e6;}
.magenta{color: #ff00ff;}
.maroon{color: #800000;}
.mediumaquamarine{color: #66cdaa;}
.mediumblue{color: #0000cd;}
.mediumorchid{color: #ba55d3;}
.mediumpurple{color: #9370db;}
.mediumseagreen{color: #3cb371;}
.mediumslateblue{color: #7b68ee;}
.mediumspringgreen{color: #00fa9a;}
.mediumturquoise{color: #48d1cc;}
.mediumvioletred{color: #c71585;}
.midnightblue{color: #191970;}
.mintcream{color: #f5fffa;}
.mistyrose{color: #ffe4e1;}
.moccasin{color: #ffe4b5;}
.navajowhite{color: #ffdead;}
.navy{color: #000080;}
.oldlace{color: #fdf5e6;}
.olive{color: #808000;}
.olivedrab{color: #6b8e23;}
.orange{color: #ffa500;}
.orangered{color: #ff4500;}
.orchid{color: #da70d6;}
.palegoldenrod{color: #eee8aa;}
.palegreen{color: #98fb98;}
.paleturquoise{color: #afeeee;}
.palevioletred{color: #db7093;}
.papayawhip{color: #ffefd5;}
.peachpuff{color: #ffdab9;}
.peru{color: #cd853f;}
.pink{color: #ffc0cb;}
.plum{color: #dda0dd;}
.powderblue{color: #b0e0e6;}
.purple{color: #800080;}
.rebeccapurple{color: #663399;}
.red{color: #ff0000;}
.rosybrown{color: #bc8f8f;}
.royalblue{color: #4169e1;}
.saddlebrown{color: #8b4513;}
.salmon{color: #fa8072;}
.sandybrown{color: #f4a460;}
.seagreen{color: #2e8b57;}
.seashell{color: #fff5ee;}
.sienna{color: #a0522d;}
.silver{color: #c0c0c0;}
.skyblue{color: #87ceeb;}
.slateblue{color: #6a5acd;}
.slategray{color: #708090;}
.slategrey{color: #708090;}
.snow{color: #fffafa;}
.springgreen{color: #00ff7f;}
.steelblue{color: #4682b4;}
.tan{color: #d2b48c;}
.teal{color: #008080;}
.thistle{color: #d8bfd8;}
.tomato{color: #ff6347;}
.turquoise{color: #40e0d0;}
.violet{color: #ee82ee;}
.wheat{color: #f5deb3;}
.white{color: #ffffff;}
.whitesmoke{color: #f5f5f5;}
.yellow{color: #ffff00;}
.yellowgreen{color: #9acd32;}