@keyframes showDes {
	  from {transform: translate(0,-100%);}
	  to {transform: translate(0,0);}
	}

	@keyframes hideDes {
	  0% {transform: translate(0,-100%);}
	  90% {transform: translate(0,0);}
	  100% {display: none;}
	}

	
	html,body {
		height:100%;
		margin:0;
	}

	h1,h2,h3,h4 {
		margin: 0;
		padding: 0;
	}


  	body {
  		margin: 0;
  		padding: 0;
  		font-family: 'Open Sans', sans-serif;
  		color: #404040;
  	}

  	a {
  		color: inherit;
  		text-decoration: none;
  	}

  	hr {
  		color:#b183dc;
  		background: #b183dc;
  		width: 65%;
  	}

  	.header {
  		position: absolute;
  		left: 0;
  		right: 0;
  		top: 0;
  		text-align: center;
  		z-index: 1000;
  	}
	
  	.logo {
  		display: inline-block;
		width:10%;
  	}
	
	.social {
		position:absolute;
		right:0;
		top:0;
		padding:30px 40px;
		z-index: 2000;
		
	}
	
	.social img {
		padding:5px;
		width:30px;
	}
	
	.menu-con {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 300px;
		transform: translate3d(-1300px,0,0);
		transition: transform 1s;
		background-color: #4a00ad;
		opacity: 0.9;
		z-index: 1500;
	}

	.menu-con-active {
		transform: translate3d(0,0,0);
	}

	.menu {
		color:#fff;
		font-size:20px;
		font-weight: 300;
		padding-top:100px;
		z-index: 3000;
	}

	.menu ul{
		list-style: none;
		padding-left: 50px;
	}

	.menu li {
		padding: 2px 0;
		cursor: pointer;
	}

	.otherlinks {
		padding: 20px 70px;
		color:#bf3de6;
	}

	.banner {
		background-image: url(../images/bg.jpg);
		background-size: cover;
		background-position: center;
	}

	.girl {
		position: absolute;
		bottom:0;
		left: 5%;
		right: 55%;
	}

	.title {
		position: absolute;
		top:50%;
		right: 5%;
		left: 55%;
		transform: translateY(-50%);
	}

	.period {
		font-size:70px;
		line-height:80px;
		font-weight:normal;
	}
	
	.article-banner {
		position: absolute;
		width:50%;
		left:5%;
		bottom:5%;
	}
	
	.article-banner h4 {
		color:yellow;
		font-size:20px;
	}
	
	.article-banner h1 {
		font-size:80px;
		font-weight:normal;
		line-height: 75px;
	}

	.article-banner h2 {
		font-size:40px;
		font-weight:normal;
		line-height: 40px;
		color: #ea4292;
	}
	
	.article-banner p {
		font-size:20px;
		color:#fff;
	}

	.bg-white {
		background-image:url(../images/bg_2.jpg);
		background-size:cover;
		position: relative;
	}
	
	.filter-y {
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		bottom: 0;
		opacity: 0.1;
		background-color: yellow;
	}

	.article {
		width:50%;
		margin:0 auto;
		line-height:30px;
	}
	
	.article p{
		padding-top:20px;
		padding-bottom:20px;
		margin:0;
	}
	
	.article h2 {
		font-size:40px;
		line-height:50px;
		font-weight:normal;
	}
	
	.article h3 {
		font-size:25px;
	}

	.article-video {
		background-image: url(../images/bg_cam_video.jpg);
		background-size:cover; 
		padding-left: 10%;
		padding-top:20px;
		padding-bottom: 40px; 
	}

	.article-video h1{
		padding:20px;
		font-family: 'Caveat Brush', cursive;
		color: #fedd40;
		font-size: 50px;
	}

	#article-video-featured {
		width: 45%;
	}
	
	.home-main {
		position: relative;
		/*background-image: url(../images/bg_top.jpg), url(../images/bg_bottom.jpg);*/
		background-image: url(../images/bg_bottom.jpg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.bg-news {
		background-image: url(../images/bg_news.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.bg-product {
		background-image: url(../images/bg_product.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.bg-cal {
		background-image: url(../images/bg_cal.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.bg-sampling {
		background-image: url(../images/bg_sampling.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.bg-video {
		background-image: url(../images/bg_video.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.bg-which {
		background-image: url(../images/bg_which.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.h-title {
		text-align: center;
		color: #ea4292;
		font-size: 50px;
		font-family: 'Caveat Brush', cursive;
		padding-top:50px; 
	}

	.h-news {
		background-color: #fff;
		padding: 5px;
	}

	.h-news-content {
		background-color: #ffd700;
		color: #fff;
		padding: 20px;
		text-align: center;
		min-height: 60px;
	}

	.h-news-content h2{
		text-transform: uppercase;
		font-size:20px;
	}

	.h-news-content p{
		padding: 0;
		margin: 0;
	}

	.news {
		position: absolute;
		left: 10%;
		top: 20%;
		width: 40%;
	}

	.news h4 {
		color: #ffa603;
	}

	.news h1 {
		color: #5005aa;
		font-size: 80px;
		line-height: 80px;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
	}

	.cal {
		position: absolute;
		left: 10%;
		top: 20%;
		width: 40%;
	}

	.cal h1 {
		color: #5005aa;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
		font-size: 100px;
		line-height: 119px;
	}

	.cal p {
		margin: 0;
	}

	.products-con {
		position: absolute;
		left: 10%;
		top: 30%;
		width: 40%;
		color: #404040;
	}

	.products-con h1 {
		color: #5005aa;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
		font-size: 100px;
	}

	.video-main {
		position: absolute;
		left: 10%;
		top: 30%;
		width: 40%;
		color: #404040;
	}

	.video-main h1 {
		color: #5005aa;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
		font-size: 100px;
	}

	.sampling {
		position: absolute;
		top: 20%;
		left: 20%;
		right: 20%;
		text-align: center;
	}

	.sampling h1 {
		color: #5005aa;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
		font-size: 100px;
	}

	.sample-form label{
		font-weight: bold;
		padding-bottom:10px;
		display: inline; 
	}

	#formbuilder-terms {
		float: left;
	}

	.formbuilder-terms {
		border: none;
	}

	.formbuilder-terms-instructions {
		border: none!important;
	}

	.formbuilder-terms > .required {
		display: none!important;
	}

	.copy {
		display: none;
	}

	#terms {
		cursor: pointer;
	}

	.products h2 {
		color: #ea4292;
		text-align: center;
		font-size: 50px;
		font-family: 'Caveat Brush', cursive;
	}

	.products h3 {
		color: #36a8df;
		text-align: center;
		font-size: 20px;
		padding-top: 40px;
	}

	.item {
		position: relative;
		vertical-align: top;
	}

	.item-active .item-img {
		opacity: 0.5;
	} 

	.description {
		display: none;
		position: relative;
		top:100%;
		width: 300%;
		overflow: hidden;
		box-shadow:  
		inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC; 
        padding: 20px 0;
        margin-top:60px; 
	}

	.description h1 {
		color:#36a8df;
	}

	.description div {
		
		transition: transform 1s;
	}

	.description-active {
		display: block;
	}

	.description-active div {
		animation: showDes 250ms ease-in-out both;
	}

	.type1 {
		left: 0%;
	}

	.type2 {
		left: -100%;
	}

	.type3 {
		left: -200%;
	}

	.type4 {
		left: -50%;
	}

	.type5 {
		left: -150%;
	}

	.txt-sample, .text, .emailAddress, .hasDatepicker, .select, .mobileNumber {
		border:1px solid #ff7de7;
		font-size:14px;
		width: 100%;
		padding: 5px;
	}

	.btn-sample {
		margin: 0 auto;
		width: 30%;
		padding: 30px;
	}

	.btn-sample button{
		background: transparent;
		border: none;
	}

	#btn-search {
		width: 39px;
		height: 39px;
		display: block;
		background: url(../images/icon_search.png) center center no-repeat;
		border: none;
		text-indent: -99999px;
		background-size: 80%;
		padding: 0;
		margin: 0;
	}

	#txt-search {
		border: 1px solid #5005aa;
		height: 30px;
		padding: 3px 10px;
		border-radius: 30px;
		margin-top:3px; 
	}

	.ui-datepicker-trigger {
		background-color: #ff7de7;
		display: block;
		height: 30px;
		float: left;
		padding: 2px;
	}

	#datepicker {
		height: 22px;
		border:1px solid #ff7de7;
		float: left;
		font-size: 20px;
		width: 200px;
	}

	.btn-minus {
		height: 30px;
		width: 30px;
		background-image:url(../images/btn_minus.png);
		background-color: #ff7de7;
		background-position: center center;
		background-size: 60% 60%;
		float: left;
		display: block;
		background-repeat: no-repeat;
		padding: 2px;
	}

	.count {
		height: 30px;
		width: 30px;
		font-size: 20px;
		float: left;
		display: block;
		border:1px solid #ff7de7;
		padding: 1px;
		text-align: center;
	}

	.btn-plus {
		height: 30px;
		width: 30px;
		background-image:url(../images/btn_plus.png);
		background-color: #ff7de7;
		background-position: center center;
		background-size: 60% 60%;
		float: left;
		display: block;
		background-repeat: no-repeat;
		padding: 2px;
	}

	#cal-ques h2{
		font-size: 50px;
		font-family: 'Caveat Brush', cursive;
	}

	#cal-ques > div{
		padding-top: 40px;
	}

	.period-tab {
		padding: 20px;
		background-color: #ffbeda;
		float: left;
		color: #fff;
	}

	.period-tab-active {
		background-color: #ff7de7;
	}

	.calendar div{
		float: left;
		width: 14.28%;
		text-align: center;
		padding: 10px 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
		height: 42px;
		display: block;   
	}

	.calendar p {
		margin: 0;
	}

	.p-light {
		background-color: #ffbeda;
	}

	.p-medium {
		background-color: #e7a2fe;
	}

	.p-heavy {
		background-color: #ff7de7;
	}

	#compute {
		width: 20%;
		margin: 0 auto;
		padding-top:40px; 
	}

	.which-main  {
		position: absolute;
		left: 10%;
		top: 20%;
		width: 50%;
		color: #fff;
	}

	.which-main h1 {
		color: #5005aa;
		font-family: 'Sacramento', cursive;
		padding-top: 20px;
		font-size: 100px;
	}

	.which h4{
		padding-top: 40px;
	}

	.which h2 {
		font-size: 50px;
		font-family: 'Caveat Brush', cursive;
	}

	.which ul {
		list-style: none;
	}

	.which li {
		padding: 5px 0;
	}

	#which-form input[type=text] {
		font-size: 14px;
		padding: 5px;
	}

	#which-btn {
		border: none;
		background: transparent;
	}

	#find {
		width: 30%;
		margin: 0 auto;
		padding-top:40px; 
	}

	.which-title {
		color: #ea4292;
		font-size: 50px;
		font-family: 'Caveat Brush', cursive;
	}

	.img-answer {
		text-align: center;
		padding: 40px 0;
	}

	.which-product {
		color: #36a8df;
	}

	/*#cal-ques, #forecast {
		position: absolute;
		left: 0;
		right: 0;
	}*/

	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px; height: 0; overflow: hidden;
		margin: 10px;
	}
	 
	.video-container iframe,
	.video-container object,
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.list-main {
		width: 60%;
		margin: 20px auto;
	}

	.list-main > div{
		height: 200px;
	}

	#privacy {
		display: none;
		position: fixed;
		right: 10px;
		bottom: 10px;
		width: 260px;
		padding: 20px;
		background-color: #4a00ad;
		color: #fff;
		font-size: 12px;
		border-radius: 10px;
		box-shadow: 5px 5px 10px #222;
		z-index: 3000;
	}

	.footer {
		/*background-image:url(../images/footer_bg.jpg);*/
		background-size:cover;
		color:blue;
		padding:100px 40px 40px 40px;
		font-size:12px;
	}

	.hidden {
		animation: hideDes 800ms ease-in-out forwards;
		display: none;
	}

	.show {
		animation: showDes 800ms ease-in-out both;
	}

	.trans {
  	  -webkit-transition: all 800ms ease-out;
  	  -moz-transition: all 800ms ease-out;
  	  -o-transition: all 800ms ease-out;
  	  transition: all 800ms ease-out;
  	}
	
	.unitrade {
		width:250px;
	}
	
	.footer-logo {
		width:130px;
	}

	.table {
		display: table;
	}

	.table-cell {
		display: table-cell;
	}

	.inline-block {
		display: inline-block;
	}
	
  	.container {
  		width: 60%;
  		margin: 0 auto;
  	}

  	.fullscreen {
	  height:100%;
	  min-height:100%;/*for mozilla*/
	  overflow: hidden;
	  position: relative;
	}

	.arrow {
		position: absolute;
		bottom:0;
		left: 0;
		right: 0;
		padding-bottom: 20px;
		width: 3%;
		margin: 0 auto;
		z-index: 10;
	}

	.scroll {
		cursor: pointer;
	}

	.center {
		margin: 0 auto;
	}

  	.align-r {
  		text-align: right;
  	}

  	.align-l {
  		text-align: left;
  	}
	
	.align-c {
		text-align:center;
	}

	.c-white {
		color: #fff;
	}

  	.c-pink {
  		color: #ea4292;
  	}
	
	.y-pink {
  		color: #ffa603;
  	}

  	.font12 {
		font-size:12px;
	}

	.font14 {
		font-size:17px;
	}
	
	.bold {
		font-weight:bold;
	}

  	.hand {
  		font-family: 'Caveat Brush', cursive;
  	}

  	.overflow {
  		overflow: hidden;
  	}
	
	.block {
		display: block;
	}

	.relative {
		position:relative;
	}
	
	.v-align {
		vertical-align: top;
	}

  	.left {
  		float: left;
  	}
	
	.right {
		float:right;
	}

  	.clear {
  		clear: both;
  	}

  	.wd3c {
  		width: 33.33%;
  	}

  	.wd10 {
  		width: 10%;
  	}

  	.wd15 {
  		width: 15%;
  	}

  	.wd20 {
  		width: 20%;
  	}

  	.wd30 {
  		width: 30%;
  	}

  	.wd40 {
  		width: 40%;
  	}

  	.wd45 {
  		width: 45%;
  	}

  	.wd50 {
  		width: 50%;
  	}

  	.wd60c {
  		width: 66.66%;
  	}

  	.wd60 {
  		width: 60%;
  	}

  	.wd80 {
  		width: 80%;
  	}

  	.wd90 {
  		width: 90%;
  	}

  	.pd10 {
  		padding:10px;
  	}

  	.pd20 {
  		padding:20px;
  	}
	
	.pdt20 {
		padding-top:20px;
	}

	.pdt40 {
		padding-top:40px;
	}

	.pdt60 {
		padding-top:60px!important;
	}
	
	.pdb10 {
		padding-bottom:10px;
	}

	.pdb20 {
		padding-bottom:20px;
	}

	.pdb60 {
		padding-bottom:60px!important;
	}
	
	.pdr20 {
		padding-right:20px;
	}

	.pdl20 {
		padding-left:20px;
	}
		
	
	.rt0 {
		padding-top:0!important;
		margin-top:0!important;
	}

  	.fw {
  		width: 100%;
  	}
	
	.box-shadow-menu {
	  position: absolute;
	  left:3%;
	  top:30px;
	  width: 2.3em;
	  height:28px;
	  display:block;
	}
	.box-shadow-menu:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 0.25em;
	  width: 2.3em;
	  height: 0.25em;
	  background: #4a00ad;
	  box-shadow: 
		0 0.50em 0 0 #4a00ad,
		0 1em 0 0 #4a00ad;
	}

	.c-hamburger {
	  left:3%;
	  top:25px;
	  display: block;
	  position: fixed;
	  overflow: hidden;
	  margin: 0;
	  padding: 0;
	  width: 60px;
	  height: 40px;
	  font-size: 0;
	  text-indent: -9999px;
	  appearance: none;
	  box-shadow: none;
	  border-radius: none;
	  border: none;
	  cursor: pointer;
	  transition: background 0.3s;
	  z-index: 2000;
	}

	.c-hamburger:focus {
	  outline: none;
	}

	.c-hamburger span {
	  display: block;
	  position: absolute;
	  top: 21px;
	  left: 10px;
	  right: 10px;
	  height: 4px;
	  background: #4a00ad;
	}

	.c-hamburger span::before,
	.c-hamburger span::after {
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: #4a00ad;
	  content: "";
	}

	.c-hamburger span::before {
	  top: -8px;
	}

	.c-hamburger span::after {
	  bottom: -8px;
	}

	.c-hamburger--htx {
	  /*background-color: #fff;*/
	}

	.c-hamburger--htx span {
	  transition: background 0s 0.3s;
	}

	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
	  transition-duration: 0.3s, 0.3s;
	  transition-delay: 0.3s, 0s;
	}

	.c-hamburger--htx span::before {
	  transition-property: top, transform;
	}

	.c-hamburger--htx span::after {
	  transition-property: bottom, transform;
	}

	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
	  /*background-color: #fff;*/
	}

	.c-hamburger--htx.is-active span {
	  background: none;
	}

	.c-hamburger--htx.is-active span::before {
	  top: 0;
	  transform: rotate(45deg);
	  background-color: #fff;
	}

	.c-hamburger--htx.is-active span::after {
	  bottom: 0;
	  transform: rotate(-45deg);
	  background-color: #fff;
	}

	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
	  transition-delay: 0s, 0.3s;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
	}

	.swiper-pagination {
		bottom: 60px!important;
	}
	
	@media screen and (max-width: 1200px) {
		
		.menu-con {
			width:100%;
		}
		
		.c-hamburger {
			left:3%;
			top:-1px;
			width: 45px;
			height: 32px;
		}
		
		.c-hamburger span::before {
		  top: -6px;
		}

		.c-hamburger span::after {
		  bottom: -6px;
		}
		
		.fullscreen {
			padding-top: 55%;
			height: auto;
			min-height: auto;
		}

		.period {
			font-size:40px;
			line-height:50px;
		}

		.article-banner h4 {
			font-size:20px;
		}
		
		.article-banner h1 {
			font-size:40px;
			line-height: 38px;
		}

		.article-banner h2 {
			font-size:20px;
			line-height: 20px;
		}
		
		.article-banner p{
			font-size:14px;
		}

		.swiper-container {
			height: auto;
		}

		.swiper-pagination {
			bottom: 20px!important;
		}
	}

	@media screen and (max-width: 700px) {
		
		/*.item {
			width:45%;
		}*/

		.btn-sample {
			width: 60%;
		}
		
		.period-tab {
			padding: 10px;
			font-size: 10px;
		}
		
		#compute {
			width: 40%;
		}
		
		.pd20 {
			padding:5px;
		}
		
		.fullscreen {
			padding-top:80px;
		}
		
		.fullscreen div{
			position:relative;
			width:60%;
		}
		
		.mfull {
			padding-top: 55%;
		}
		
		.fullscreen h1{
			font-size:40px!important;
			line-height:40px;
			padding-bottom:10px;
		}
		
		.fullscreen p{
			font-size:10px!important;
		}
		
		.fullscreen br {
				display:none;
		}
		
		.news {
			width:90%;
		}
		
		#article-video-featured {
			width:90%;
		}
		
		#btn-search ,#txt-search{
			display:none;
		}
		
		#video-featured {
			width:100%;
		}
		
		.list-main {
			width:100%;
			margin:0;
		}
		
		.mhidden {
			
		}
		
		.arrow {
			display: none;
		}

		.mfw {
			width:100%;
		}
		
		.mwd45 {
			width:45%;
			min-height: 200px;
		}
		
		.container {
			width:90%;
		}
		
		.box-shadow-menu {
			top: 10px;
			width:1.5em;
			
		}
		
		.box-shadow-menu:before {
			width:1.5em;
			height: 0.15em;
			box-shadow: 
				0 0.30em 0 0 #4a00ad,
				0 0.60em 0 0 #4a00ad;
		}
		
		.logo {
			width:18%;
		}
		
		.social {
			padding: 10px;
		}
		
		.social img {
			width:20px;
			padding:3px;
		}
		
		.period {
			font-size:40px;
			line-height:50px;
		}
		
		.article-banner h4 {
			font-size:10px;
		}
		
		.article-banner h1 {
			font-size:18px;
			line-height: 16px;
		}

		.article-banner h2 {
			font-size:12px;
			line-height: 14px;
		}
		
		.article-banner p{
			font-size:8px;
		}
		
		.article {
			width:80%;
			font-size:14px;
		}
		
		.article h2 {
			 font-size:24px;
			 line-height:30px;
		}
		
		.footer {
			font-size:10px;
		}
		
		.mleft {
			float:left;
		}
		
		.malign-l {
			text-align:left;
		}
		
		.mpdt20 {
			padding-top:20px;
		}
	}