/*
Desktop
****************************************/
@media (min-width: 1200px){
	a.logo img{
		margin:0 0 0 4em;
	}
}
@media (min-width: 992px) and (max-width: 1199px){
	/* Header */
	.site-heading{
		padding:0 15px 0;
	}
	.navbar{
		position:static;
	}
	.bx-wrapper img{
		max-width:98.5%;
	}
	.webform-component-textarea label{
		margin:0 0.3em 0 0;
	}
	.i18n-en .navbar-default .navbar-nav>li>a{
		padding:0 10px 0 10px;
	}
	/* Front */
	.view-home .views-field-title{
		width:250px;
  	}
	/* About Us */
	.page-node-3 .block-item,
	.page-node-18 .block-item,
	.page-node-19 .block-item,
	.page-node-20 .block-item{
		margin:0 1em 0;
	}
}

/*
Tablets
****************************************/
@media (max-width: 991px){
	/*Skeleton*/
	#wrapper{
		background:transparent url('../images/bg-top-mobile.jpg') no-repeat center top;
		-webkit-background-size: 1200px 488px;
	  background-size: 1200px 488px;
	}
	#wrapper-inner{
		background:transparent url('../images/bg-bottom-mobile-992.jpg') no-repeat center bottom;
	}
	
	/* Header */
	img.hd-site{
		margin:4em 0 0;
	}
	.site-heading{
		padding:0 15px 0;
	}
	.navbar{
		min-height:58px;
		position:static;
		background-position:center top;
	}
	.navbar-header {
    float: none;
  }
  .header-supplementary-menu{
	  padding:12px 15px 0 0;
  }
  .block-lang{
	  width:71px;
  }
  .block-lang a{
	  height:30px;
  }
  .block-lang .link-lang-chi a{
	  width:34px;
	  background-image:url('../images/btn-lang-chi-mobile.png');
  }
  .block-lang .link-lang-eng a{
	  width:37px;
	  background-image:url('../images/btn-lang-eng-mobile.png');
  }
  .btn-share a{
		width:69px;
		height:26px;
		background-image:url('../images/btn-share-facebook-mobile.png');
	}
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-collapse{
		width:722px;
		margin:0.8em 0 0;
		background:transparent url('../images/bg-nav-toggle.gif');
		border-radius:8px;
	}
	.navbar-collapse:before{
		width: 12px; 
		height: 7px; 
		content: "";
		display: block;
		background-image:url('../images/bg-nav-toggle-icon.png');
		position: absolute;
		left: 28px;
		top: 41px;
	}
  .navbar-nav {
    float: none!important;
    margin: 0.5em 0 0.5em 0;
  }
  .navbar-nav>li {
    float: none;
    margin:0 0 0.5em 0;
    padding:0 0 0.3em 0;
    background:transparent url('../images/divdeder-nav-toggle.png') no-repeat left bottom;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-default .navbar-nav>li>a{
    padding:5px 0 7px;
    color:#2f2c32;
  }
  .navbar-default .navbar-nav>li>a:hover,
  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:hover,
  .navbar-default .navbar-nav>.open>a:focus{
    color:#5d90b5;
  }
  .navbar-nav>li.last{
    background:none;
  }
  .navbar-default .navbar-nav>li.last>a{
    padding:5px 0 0;
  }
  .navbar-default .navbar-nav>.dropdown>a .caret{
    border-top-color:#2f2c32;
    border-bottom-color:#2f2c32;
  }
  .navbar-default .navbar-nav>.dropdown>a:hover .caret,
	.navbar-default .navbar-nav>.dropdown.active>a:hover .caret{
		border-top-color:#5d90b5;
		border-bottom-color:#5d90b5;
	}
  .dropdown-menu{
    margin:0 0 1em;
    position:static;
    background-color:transparent;
    box-shadow:none;
  }
  .dropdown-menu:before{
    display:none;
  }
  .dropdown-menu>li>a{
    text-align:left;
  }
  .dropdown-menu>li>a:before{
    content:"";
    border-style: solid;
    border-width: 2.5px 0 2.5px 3px;
    border-color: transparent transparent transparent #2f2c32;
    display:block;
    position:relative;
    left:-10px;
    top:12px;
  }
  .i18n-en .btn-share a{
		width:79px;
		background-image:url('../images/en/btn-share-facebook-mobile.png');
	}
  
  /*Front */
  .front .main-container{
	  margin:1em auto 7em;
  }
  #block-carouseld-carouseld{
	  height:auto;
	  margin:0 0 2em; 
  }
  .bx-wrapper{
	  margin:0;
	  padding:0.5em;
	  background-color:white;
	  border-radius:8px;
  }
  .bx-viewport a img{
	  height:auto;
  }
  .block-slider-title{
	  top:72%;
  }
  .bx-controls,
  .bx-wrapper .bx-pager,
  .bx-wrapper .bx-controls-auto{
	  position:static;
  }
  .bx-wrapper .bx-pager.bx-default-pager a{
	  width:13px;
	  height:13px;
  }
  .bx-wrapper .bx-pager.bx-default-pager a:hover,
  .bx-wrapper .bx-pager.bx-default-pager a.active{
	  width:15px;
	  height:15px;
  }
  .feature-button{
	  margin:0;
  }
  .feature-button .list-inline>li{
	  margin:1em 0;
  }
  .front-feature{
	  background:none;
  }
  .view-home{
	  margin:0 0 1em;
	  padding:0 0 2em;
	  background:transparent url('../images/divdeder-front-feature.png') no-repeat left bottom;
  }
  .view-home .view-header{
	  margin:0 0 2em;
	  text-align:center;
  }
  .view-home .views-field-title{
	  width:auto;
	  float:none;
  }
	
	/* About Us */
	.page-node-3 .block-item,
	.page-node-18 .block-item,
	.page-node-19 .block-item,
	.page-node-20 .block-item{
		margin:0 0.5em 0;
	}
  
	/* Greenlife Style */
	.page-node-41 .form-textarea-wrapper,
	.page-node-43 .form-textarea-wrapper{
		width:80%;
	}
	
  /* Green Wiki */
  .node-vegetable .field-label{
		width:20%;
	}
	.node-vegetable .field-items{
		width:79%;
	}
  
  /* Common Element */
  .webform-container-inline label{
		width:18%;
	}
	.form-control,
	.form-text{
		width:80%;
	}
	.form-radios{
		width:80%;
	}
  .webform-container-inline.webform-component-textarea .form-textarea-wrapper{
		width:79.5%;
	}
	.webform-component-textarea label{
		margin:0 0.3em 0 0;
	}
	.i18n-en .form-textarea-wrapper{
		width:79.5%;
	}
	
	
  /* Footer */
  a.btn-facebook-page{
	  margin:1em 0 2em;
	  float:left;
  }
  .footer-bottom .pull-right{
	  float:none !important;
	  clear:both;
  }
}

/*
Phones
****************************************/
@media (max-width: 767px){
	/* Header */
	img.hd-site{
		margin:3em 0 0;
	}
	.block-lang{
		margin:0 0 0 5em;
	}
	.navbar-collapse{
		width:600px;
	}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a{
		color:#333;
	}
	
	/* Center */
	.front .main-container{
		margin:0 auto 7em;
	}
	
	/* Frontpage */
	
	.block-slider-title{
		top:84%;
	}
	.slider-title-text{
		font-size:1.2em;
	}
	
	/* About Us */
	.page-node-3 .block-item,
	.page-node-18 .block-item,
	.page-node-19 .block-item,
	.page-node-20 .block-item{
		margin:0 0.2em 0;
	}
	
	/* Greenlife Style */
	.page-node-41 .form-textarea-wrapper,
	.page-node-43 .form-textarea-wrapper{
		width:75%;
	}
	
	/* Green Wiki */
  .node-vegetable .field-label{
		width:30%;
	}
	.node-vegetable .field-items{
		width:68%;
	}
	.node-vegetable .field-name-body .field-items{
		width:100%;
	}
	
	/* Common Element */
  .webform-container-inline label{
		width:23%;
	}
	.form-control,
	.form-text{
		width:75%;
	}
	.form-radios{
		width:75%;
	}
  .webform-container-inline.webform-component-textarea .form-textarea-wrapper{
		width:74.5%;
	}
	.webform-submit.btn-primary{
		margin:5% auto 0;
	}
	.i18n-en .form-textarea-wrapper{
		width:74.5%;
	}
}

/*
Small Phones
****************************************/

@media (max-width: 599px){
	/* Skeleton */
	.main-container{
		font-size:1.3em;
	}
	
	/* Generic */
	h1, h2, h3{
		margin-top:30px;
		margin-bottom:20px;
	}
	p{
		margin:0 0 25px;
	}
	img.right{
		margin:0 0 20px;
		display:block;
		float:none;
	}
	
	/* Header */
	.site-heading .col-xs-4{	
		width:45%;
	}
	.site-heading .col-xs-8{
		width:55%;
	}
	img.hd-site{
		margin:4em 0 0;
	}
	.block-lang{
		margin:0;
		float:right;
	}
	.btn-share{
		display:none;
	}
	.navbar-collapse{
		width:460px;
		font-size:1.2em;
	}
	.navbar-collapse:before{
		top: 43px;
	}
	.navbar-nav .open .dropdown-menu>li>a,
	.navbar-nav .open .dropdown-menu .dropdown-header{
		padding:10px 15px 10px 25px;	
	}
	.dropdown-menu{
		font-size:1em;	
	}
	
	/* Center */
	.bg-content-bottom{
		margin:-2px 0 0;	
	}
	.row.squeeze{
		padding:0 1em;
		background:white url('../images/bg-content-left-mobile.jpg') repeat-y;
	}
	.breadcrumb{
		top:0;
	}
	
	/* Front */
	.block-slider-title{
	  position:static;
  }
  .carousel-title-left,
  .carousel-title-right{
	  display:none !important;
  }
  .slider-title-text{
	  height:auto;
	  padding:0;
		line-height:130%;
  }
	.bx-wrapper .bx-pager{
		padding-top:0;
	}
	.bx-wrapper .bx-pager.bx-default-pager a{
		width:18px;
		height:18px;
	}
	.bx-wrapper .bx-pager.bx-default-pager a:hover,
	.bx-wrapper .bx-pager.bx-default-pager a.active{
		width:20px;
		height:20px;
	}
  a.front-icon{
	  margin:0 1.2em;
  }
  .view-home .views-field-field-activities-date,
  .view-home .views-field-body{
	  line-height:1.2em;
  }
  .view-home .views-field-field-activities-date{
	  margin:0.5em 0;
  }
  .view-home .view-footer a{
	  width:118px;
	  height:45px;
		margin:1em 0 0;
	  background-image:url('../images/btn-more-activities-mobile.png');
  }
  #block-block-10 .visible-xxs{
		display:block !important;
	}
	#block-block-10 .hidden-xxs{
		display:none !important;
	}
	.i18n-en a.front-icon.item3{
		width:140px;
		margin:0 1em 0 0.5em;
		background-position: 18px 25px;
	}
	.i18n-en a.front-icon{
		margin:0 0.5em;
	}
	.i18n-en a.front-icon.item1,
	.i18n-en a.front-icon.item2,
	.i18n-en a.front-icon.item3,
	.i18n-en a.front-icon.item4{
		width:165px;
	}
	.i18n-en a.front-icon.item1{
		background-position:35px 35px;
	}
	.i18n-en a.front-icon.item1:hover{
		background-position:35px 25px;
	}
	.i18n-en a.front-icon.item3{
		background-position:30px 25px;
	}
	.i18n-en a.front-icon.item3:hover{
		background-position:30px 15px;
	}
	.i18n-en a.front-icon.item4{
		background-position:30px 10px;
	}
	.i18n-en a.front-icon.item4:hover{
		background-position:30px 0;
	}
	.i18n-en a.front-icon.item5{
		margin:-1.5em 0.5em 0;
	}
	.i18n-en .view-home .view-footer a{
		width:176px;
		height:46px;
		background-image:url('../images/en/btn-more-activities-mobile.png');
	}
	
	/* About us */
	img.p-intro-1{
		margin:1em 0 0.5em;
		display:block;
		float:none;
	}
	.page-node-3 .block-item,
	.page-node-18 .block-item,
	.page-node-19 .block-item,
	.page-node-20 .block-item{
		width:45%;
		margin:0 0.2em 0;
	}
	.page-node-3 .block-item .text-name,
	.page-node-18 .block-item .text-name,
	.page-node-19 .block-item .text-name,
	.page-node-20 .block-item .text-name{
		margin:0.8em 0;
		font-size:0.8em;
		line-height:1.2em;
	}
	
	/* Activities */
	.view-latest-activities .views-field-title{
		margin:0 0 1em;
		display:block;
	}
	
	/* Greenlife Style */
	.page-node-41 .form-textarea-wrapper,
	.page-node-43 .form-textarea-wrapper{
		width:70%;
	}
	
	/* Green Wiki */
	.view-vegetable-info .views-field-title{
		margin:0.5em 0;
	}
	.view-vegetable-category .views-row{
		width:100%;
	}
	.view-vegetable-category .views-row a{
		width:210px;
		margin:0.2em auto;
		display:block;	
		text-align:center;
	}
	.node-vegetable .field{
		 padding:0.5em 0;
		 border-bottom:1px #666 dotted;
	}
	 .node-vegetable .field.field-name-field-image,
	 .node-vegetable .field-name-body{
		border-style:none;
	}
  .node-vegetable .field-label{
		width:30%;
		background-color:transparent;
		padding:0;
		border-style:none;
	}
	.node-vegetable .field-items{
		width:68%;
		background-color:transparent;
		padding:0;
		word-wrap:break-word;
	}
	.node-vegetable .field-name-field-image .field-items{
		width:auto;	
	}
	.view-daily-life-tips .views-field-title,
	.view-organic-crops-tips .views-field-title{
		margin:0 0 1em;
		display:block;
	}
	
	/* Footer */
	a.back2top{
		width:146px;
		height:57px;
		margin:20px auto 230px;
		background:transparent url('../images/btn-top-mobile.png') no-repeat;
	}
	.i18n-en a.back2top{
		background:transparent url('../images/en/btn-top-mobile.png') no-repeat;
	}
	
	
	/* Common Element */
  .webform-container-inline label{
		width:28%;
	}
	.form-control,
	.form-text{
		width:70%;
	}
	.form-radios{
		width:70%;
	}
  .webform-container-inline.webform-component-textarea .form-textarea-wrapper{
		width:69.5%;
	}
	.webform-container-inline div.form-item.form-type-radio,
	.webform-container-inline div.form-item.form-type-checkbox{
		width:2em;
	}
	.i18n-en .form-textarea-wrapper{
		width:69.5%;
	}
}

@media (max-width: 479px){
	/*Skeleton*/
	#wrapper-inner{
		background:transparent url('../images/bg-bottom-mobile-480.jpg') no-repeat center bottom;
	}
	
	/* Header */
	img.hd-site{
		margin:2em 0 0;
	}
	.navbar-collapse{
		width:360px;
	}
	
	/* Center */
	.page-header{
		font-size:1.8em;
	}

	/* Front */
	.front .main-container{
	  margin:1em auto 4em;
  }
	.slider-title-text{
		font-size:1.3em;
	}
	.bx-wrapper .bx-pager.bx-default-pager a{
	  width:15px;
	  height:15px;
  }
  .bx-wrapper .bx-pager.bx-default-pager a:hover,
  .bx-wrapper .bx-pager.bx-default-pager a.active{
	  width:17px;
	  height:17px;
  }
  a.front-icon.item5{
		margin:-2.5em 0 0;
	}
  .view-home .views-field-field-activities-image{
		margin:0 15px 20px 0;
	}
	.view-home .view-header{
		margin:0 0 1em;
	}
	.view-home .view-footer a{
	  margin:1em 0 0;
  }
  .view-home h2{
	  margin-top:0;
	  margin-bottom:0;
  }
  .i18n-en a.front-icon{
		margin:0 0 -1em;
		font-size:0.9em;
	}
	.i18n-en a.front-icon.item1,
	.i18n-en a.front-icon.item2,
	.i18n-en a.front-icon.item3{
		width:150px;
	}
	.i18n-en a.front-icon.item4{
		width:120px;		
	}
	.i18n-en a.front-icon.item4{
		background-position:0 10px;
	}
	.i18n-en a.front-icon.item4:hover{
		background-position:0 0;
	}
	.i18n-en a.front-icon.item5{
		margin:-2.5em 0 0;
	}
	
	/* Course */
	table.table-course td{
		word-wrap: break-word;
	}
	table.table-course td.col-hd{
		width:30%;
	}
	
	/* Greenlife Style */
	.page-node-41 .form-textarea-wrapper,
	.page-node-43 .form-textarea-wrapper{
		width:63%;
	}
	.node-vegetable .content{
		display:block;
	}
	.node-vegetable .field{
		display:block;
	}
	.node-vegetable .field-label{
		width:100%;
		display:block;
	}
	.node-vegetable .field-items{
		width:100%;
		display:block;
	}
	
  /* Footer */
	.footer-top .col-xs-3,
	.footer-top .col-xs-4{
		width:50%;
	}
	.footer-top .col-xs-5{
		width:100%;
		margin:1.5em 0;
	}
}

@media (max-width: 384px){
	/* Header */
	a.logo{
		margin:1.9em 0 0;
	}
	img.hd-site{
		margin:2em 0 0;
	}
	.site-heading .col-xs-4{	
		width:45%;
	}
	.site-heading .col-xs-8{
		width:55%;
		padding-left:0;
	}
	.navbar-collapse{
		width:300px;
	}
	
	/* Center */
	.bg-content-bottom{
		margin:-2px 0 0;	
	}
	
	/* Front */
	.slider-title-text{
		font-size:1em;
	}
	a.front-icon{
		margin:0 0 -1em;
	}
	a.front-icon.item3{
		margin:-2em 1em 0 0;
	}
	.view-home .views-field-body{
	  line-height:1.4em;
  }
	
	/* About Us */
	.page-node-3 .block-item,
	.page-node-18 .block-item,
	.page-node-19 .block-item,
	.page-node-20 .block-item{
		width:100%;
		margin:0 0 0.8em;
	}
	
	/* Greenlife Style */
	.page-node-41 .form-item label,
	.page-node-43 .form-item label{
		width:80px;
	}
  
  /* Green Wiki */
  .view-vegetable-info .item-list ul li{
		height:auto;
	}
  
  /* Common Element */
  .webform-container-inline label{
		width:38%;
	}
	.form-control,
	.form-text{
		width:60%;
	}
	.form-radios{
		width:60%;
	}
  .webform-container-inline.webform-component-textarea .form-textarea-wrapper{
		width:59.5%;
	}
	.i18n-en .form-textarea-wrapper{
		width:59.5%;
	}
	
	/* Other */
	.visible-xxs{
		display:block !important;
	}
	.hidden-xxs{
		display:none !important;
	}
}