/* #Tablet & Mobile
================================================== */
@media only screen and (max-width: 977px) {
	/* --- Layout --- */
	img   { max-width: 100%; height: auto }
	.container               { max-width: 978px; width: auto; padding: 0 15px }
	input[type="text"], 
	#product .column-222 img, .nav select, #contactform input, #contactform textarea, .content .head + a img,
	#comments input, #comments textarea, #cancel-comment-reply-link { height:auto !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box }

	/* --- Comment Form --- */
	#comments input[type="text"], #comments textarea, 
	#comments label, #comments input[type="submit"], #cancel-comment-reply-link,
	#contactform input[type="text"], #contactform textarea, #contactform input { width: 100% }
	#comments label                                                            { margin-bottom: 20px; padding-top: 5px }
	#comments input[type="text"], #comments input[type="submit"], 
	#comments textarea, #cancel-comment-reply-link, #contactform input[type="submit"],
	#contactform textarea, #contactform input[type="text"]                     { padding: 10px }
	#cancel-comment-reply-link                                                 { margin: 10px 0 20px; text-align: center }

	/* --- Sidebar Widget --- */
	#sidebar .box ul.three-col,
	#sidebar .box ul.three-col.middle,
	#sidebar .box ul.two-col { float: none; width: auto; margin: 0 }

	/* --- SlideShow Page Template --- */
	#slideshow #widebox                 { height: auto }
	#slideshow img                      { width: auto; max-width: 100%; height: auto }
	#slideshow .slides_control          { width: 100%; height: 300px; width: 100% !important }
	#slideshow .slides_container        { width: 100% }
	#slideshow .slides_container .slide { width: 100%; height:100% }
	#slideshow .description             { top: auto; left: 0; right: 0; bottom: 0; width: auto }
	#slideshow .description p           { display: none }
}

/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 977px) {
	/* --- Layout --- */
	.column-474, .masthead #mast_desc { width: 48.4662% }
	.column-222, #product .column-222 { width: 22.6993%; margin-right: 3.0674% }
	#wrap #product .column-222 { margin-right:0; margin-left:22px;}
	#wrap #product .column-222:first-child{ margin-left:0;}
	.column-642                       { width: 65.6441% }
	.column-306, #twitter             { width: 31.2883% }
	.column-138                       { width: 14.1104% }
	.left-pane, .navigation           { width: 65.6441%; position: relative }
	.content-wrapper .left-pane       { width: 100% }
	.single-page                      { width: auto !important }
	.content, #comments               { width: 75% }
	.content .column-323              { width: 56.2875% }
	.full-page, 
	.page-template-page-contact-php .content { padding: 3.0674%; width: 93.8652% !important }
	.full-page .head,
	.page-template-page-contact-php .content .head { margin: -3.0674%; margin-bottom: 25px }
	li.cat-title a { padding: 8px 12px; }

	#profile                          { width: 62.5766%; padding-right: 3.0674% }
	#twitter #colabsmap               { width: 100%; height: 170px }

	/* --- Post --- */
	.content img.alignleft, .content img.left, .content img[align="left"] {
		padding: 1.2%;
		width: 37.3125%;
		margin: 5px 4% 15px 0;
	}
	.navigation { float: right; width: 85.0574%; margin-left: 0 }

	/* --- Carousel --- */
	li.cat-title a { margin: 0 0 -3px -1px }

	/* --- Footer Widget --- */
	#links div.left { margin-right: 3.0674% }

	/* --- Slideshow --- */
	#slideshow .slides_control { height: 350px }
	#tabs li{
		margin-right:5px;
	}
	.carousel-container .caroufredsel_wrapper li{
		margin-left:11px;
		margin-right:20px;
		width:auto !important;
	}
	/*#header .nav select {
		width: 86%;
		display: block;
		margin: 10px 0 0;
		padding: 7px 5px;
		background: #D1DBE5 url(../images/icon-arrow-select.png) no-repeat 98% center;
		border: 1px solid #3D6181;
		-webkit-appearance: none;
		   -moz-appearance: none;
			  -o-apperance: none;
		-webkit-box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
		   -moz-box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
				box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}*/
}

/*  #Mobile All
================================================== */
@media only screen and (max-width: 767px) {

	/* --- Navigation --- */
	#header .nav select {
		width: 100%;
		display: block;
		margin: 20px 0 0;
		padding: 7px 5px;
		background: #D1DBE5 url(../images/icon-arrow-select.png) no-repeat 98% center;
		border: 1px solid #3D6181;
		-webkit-appearance: none;
		   -moz-appearance: none;
			  -o-apperance: none;
		-webkit-box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
		   -moz-box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
				box-shadow: 0 11px 10px rgba(255,255,255,.5) inset;
		-webkit-border-radius: 5px;
		   -moz-border-radius: 5px;
				border-radius: 5px;
	}

	/* --- Header --- */
	.nav ul { display: none }
	#search-box { width: 100%; margin-top: 20px }
	#search-box input.field, .content-wrapper, .left-pane, #contactform label { width: 100% }
	#header .blogname { width: auto; text-align: center }

	/* --- Headline --- */
	.column-474, .masthead #mast_desc, #profile, #twitter, #sidebar,
	#twitter #colabsmap, #links .column-138, #header .nav { width: 100% }
	.full-page { width: auto !important }
	.masthead .column-474 { text-align: center }
	.masthead #mast_desc { margin-top: 0 }

	/* --- Product --- */
	#product .column-222 { margin-bottom: 20px }
	#profile { padding-right: 0; background: none }
	#twitter { margin-bottom: 30px }

	/* --- Widget --- */
	#twitter #colabsmap { height: 200px }

	/* --- Post --- */
	.content { padding: 3.0674%; width: 93.8652% }
	.content.single-page { padding: 3.0674%; width: 93.8652% !important }
	.content .head { margin: -3.0674%; margin-bottom: 25px }
	.left-pane { margin-bottom: 30px }
	.left-pane .column-323 { width: 70% }
	.left-pane .time, .left-pane .social { position: static; float: left }
	.left-pane .time, .left-pane .social li { float: left; margin: 0 15px 15px 0}
	.left-pane .social .facebook { width: 50px }
	.content h3 .right { position: static; float: none; display: block }
	.content .head + a { width: 25%; float: left }

	/* --- TabRousel --- */
	#tabrousel #tabs { display: none }
	#tabrousel .list-wrap { padding-bottom: 60px }
	.list-wrap span.lhandle a, .list-wrap span.rhandle a { top: auto; bottom: 15px }
	.list-wrap span.lhandle a { left: 38% }
	.list-wrap span.rhandle a { right: 38% }
	.page-template-page-gallery-php #tabrousel #tabs { display: block }

	/* --- Pagination --- */
	.navigation { width: 100%; margin-left: 0 }

	/* --- Comments --- */
	#comments { width: auto; margin-left: 0 }

}

/*  #Mobile (Portrait)
================================================== */
@media only screen and (min-width: 240px) and (max-width:479px) {

	/* --- Product Column ---*/
	#product .column-222 { width: 100%; margin-right: 0; margin-left: 0 }

	/* --- Carousel --- */
	.list-wrap span.lhandle a { left: 20px }
	.list-wrap span.rhandle a { right: 20px }
	.carousel-container { width: 100%; }
	.carousel-container li { margin-left: 0 }
	#slideshow .slides_container .slide { background: #000 }

	/* --- Post --- */
	.content .head + a { width: 35%; margin-right: 10px }
	.left-pane .column-323 { float: none; width: auto }

	/* --- Footer --- */
	#copyright .right { float: left; margin-top: 10px }
}

/*  #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	/* --- Product --- */
	#product .column-222 { width: 45%; margin-left: 4.08%; }
	#product .column-222 img { float: left; width: 50%; margin: 0 10px 10px 0 }
	#product .column-222:nth-child(2n+3) { margin-left: 0; clear: left }

	/* --- Footer --- */
	#links .column-138 { width: 45%; margin-right: 0; float:left }
	#links .column-138:nth-child(even) { float: right; margin-right: 0 }
	#links .column-138:nth-child(2n+3) { clear:left }
	#copyright .right { clear:left; float: none; display: block }
}



/* #Mobile Menu
=================================================================== */
.btn-navbar {
  display: none;
  color: #fff;
  border: 1px solid #000;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2));
  background-image: -moz-linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2));
  background-image: -o-linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2));
  background-image: -ms-linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2));
  background-image: linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.2));
  float: right;
  margin: 5px;
  padding: 7px 10px;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.075), 0 0 5px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.075), 0 0 5px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.075), 0 0 5px rgba(255, 255, 255, 0.1);
}
.btn-navbar .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #f5f5f5;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  -ms-border-radius: 1px;
  border-radius: 1px;
}
.btn-navbar .icon-bar + .icon-bar {
  margin-top: 3px;
}
.nav-collapse.collapse {
  height: auto;
  overflow: visible;
}
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  overflow: visible \9;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

/* Set Mobile menu style for tablet and below
------------------------------------------------------------------- */
@media (max-width: 977px) {
  .nav-collapse {
    clear: both;
  }
  .nav-collapse ul {
    float: none;
    display: block;
  }
  .nav-collapse.collapse > div {
    margin-bottom: 20px;
  }
  .nav-collapse, .nav-collapse.collapse {
    height: 0;
    overflow: hidden;
  }
  .btn-navbar {
    display: block;
  }
  .nav-collapse li a:hover:after, 
  .nav-collapse .sf-menu > li:hover > a:after, 
  .nav-collapse .current-menu-item > a:after {
    display: none;
  }

  #header .nav,
  #search-box,
  #search-box input.field {
  	width: 100%;
  }
  #search-box {
  	margin: 10px 0;
  }
  #search-box input.field {
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  }
  #header .nav {
  	text-align: left;
  }
  #header .nav ul li {
  	display: block;
  	float: none;
  }
  #header .nav ul li a,
  #header .nav li li a, 
  #header .nav li li a:link, 
  #header .nav li li a:visited {
  	padding: 9px 0;
  	line-height: 1;
  	display: block;
  	font-size: 14px;
  	color: #fff !important;
  }
  #header .nav li li a, 
  #header .nav li li a:link, 
  #header .nav li li a:visited {
  	border: none;
  }
  .nav li ul ul {
  	margin: 0 0 0 20px;
  }
  span.sf-arrow {
  	display: none;
  }
  .nav li li .sfHover a:before {
  	display: none;
  }

  /* Sub Menu
  ----------------------------------------------------------------- */
  .nav-collapse ul ul {
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    position: static;
    border: none;
    background: none;
    margin-left: 20px;
    width: auto;
    float: none;
    width: auto !important;
    opacity: 1 !important;
    position: static !important;
    background: none !important;
  }
  .nav-collapse ul ul li {
    border: none;
    width: auto;
  }
}

.clearfix, .header {
  *zoom: 1;
}
.clearfix:before, .clearfix:after,
.header:before, .header:after {
  display: table;
  content: "";
}
.clearfix:after,
.header:after {
  clear: both;
}

@media (min-width: 980px) {
  .nav-collapse.collapse {
    height: auto !important
  }
}