/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 979px) {

	.container {
		width: 720px;
		margin: 0 auto;
	}

	/* logo-3w */
	.logo-3w { display: none;}
	
	body { min-width: inherit; }
	
	header { width: 100%; }
	
	header .nav-collapse { width: 100%; }
	header nav .menu {
		margin: 0;
		padding-top: 5px;
		width: 100%;
	}
	header nav .menu li { margin-left: 0; }
	header .menu > li {
		margin-top: 5px;
		width: 100%;
		padding-left: 16px;
		background-color: #f78e1d;
		background-color: rgba(247, 142, 29, 0.4); 
	}
	header nav .menu li a {
		padding: 5px 0;
		color: #fff;
	}
	header nav .menu li:hover { background-color: #fff; }
	header nav .menu li:hover a {
		color: #000;
		text-shadow: none;
	}
	
	.nav-toggle {
		text-decoration: none;
		float: right;
		margin-top: 34px;
		margin-right: 16px;
		font-size: 18px;
		color: #333333;
	}
	.nav-toggle:hover {
		color: #fff;
		text-shadow: 0px 0px 3px dark-creme;	
	}
	
	.wrapper { width: 100%; }
	
	.home .main.full-width { width: auto; }
	
	.home .flexslider {
		width: 356px;
		height: 309px;
	}
	.home .flexslider .slides li img {
		width: 356px;
		height: 309px;	
	}
	
	.home .main { float: none; }
	
	.home .main.min-height { width: 300px; }
	
	.home .main.full-width.min-height { width: auto; }
	
	.home .main .btn.bottom-right {
		position: relative;
		bottom: 0;
		right: 0;
	}
	.home .main .btn.bottom-left {
		position: relative; 
		bottom: 0;
		left: 0;
	}
	
	.blocks {
		width: auto;
		padding-top: 15px;
		margin-left: -15px;
		margin-top: -15px;
	}
	.blocks .block {
		width: 230px;
		margin-left: 15px;
		margin-top: 15px;
		overflow: hidden;	
	}
	.blocks .block > a {
		display: block;
		padding: 2px;	
	}
	.blocks .block img {
		width: 100%;
		height: auto;
		margin: 0;		
	}
	
	.blocks-small {
		width: auto;
		margin-left: -20px; 
	}
	.blocks-small .block {
		width: 161px;
		height: 161px;
		margin-left: 20px;
		overflow: hidden;	
		padding: 2px;
	}
	.blocks-small .block img {
		width: 161px;
		height: 125px;
		margin: 0;	
	}
	
	footer { width: 100%; }
	
}


/* ==========================================================================
   Extra small devices (phones, less than 768px)
   ========================================================================== */

@media (max-width: 767px) {

	.container { width: auto;}

	body { min-width: 320px;}

	/* contact-form */
	.contact-form td { display: block;}
	.contact-form input[type=text], .contact-form  select, .contact-form  textarea { width: 100%;}
	
	/* logo-3w */
	.logo-3w { display: none;}
	
	header { width: 100%; }
	
	header .nav-collapse { width: 100%; }
	header nav .menu {
		margin: 0;
		padding-top: 5px;
		width: 100%;
	}
	header nav .menu li { margin-left: 0; }
	header .menu > li {
		margin-top: 5px;
		width: 100%;
		padding-left: 16px;
		background-color: #f78e1d;
		background-color: rgba(247, 142, 29, 0.4); 
	}
	header nav .menu li a {
		padding: 5px 0;
		color: #fff;
	}
	header nav .menu li:hover { background-color: #fff; }
	header nav .menu li:hover a {
		color: #000;
		text-shadow: none;
	}
	
	.nav-toggle {
		text-decoration: none;
		float: right;
		margin-top: 34px;
		margin-right: 16px;
		font-size: 18px;
		color: #333333;
	}
	.nav-toggle:hover {
		color: #fff;
		text-shadow: 0px 0px 3px dark-creme;	
	}
	
	.wrapper { width: 100%; }
	
	.home .main { float: none; }

	.home .main.full-width { width: auto; }
	
	.home .flexslider { display: none; }
	
	.home .main { width: auto; float: none; }
	.home .main.min-height { min-height: inherit; }
	
	.home table { width: 100% !important; }
	.home table.responsive tr td {
		float: left;
		width: 100%;
	}
	
	.home .main .btn.bottom-right {
		position: relative;
		bottom: 0;
		right: 0;
	}
	.home .main .btn.bottom-left {
		position: relative; 
		bottom: 0;
		left: 0;
	}
	
	.blocks {
		width: 300px;
		margin: 0 auto;
		margin-top: -20px;
	}
	.blocks .block {
		margin: 0;
		margin-top: 20px;
		width: 300px;
		height: 300px;
		overflow: hidden	
	}
	.blocks .block > a {
		display: block;
		padding: 2px;	
	}
  .blocks .block img {
	  width: 100%;
	  height: auto;
	  margin: 0;	
  }
	
	.blocks-small {
		width: 300px;
		margin: 0 auto;
	}
	.blocks-small .block {
		margin: 0;
		margin-top: 20px;
		padding: 2px;
		width: 300px;
		height: 300px;
		overflow: hidden	
	}
	  .blocks-small .block img {
		  width: 296px;
		  height: 264px;
		  margin: 0;	
	  }
	
	footer { width: 100%; }
	
	footer ul {
		display: table;
		margin: 0 auto;	
	}
	footer ul > li { float: none; }
	footer ul > li span { border: none; }
	
}


/* ==========================================================================
   Responive nav
   ========================================================================== */

@media screen and (min-width: 980px) {
	
	.js .nav-collapse { position: relative;}
	.js .nav-collapse.closed { max-height: none;}
	.nav-toggle { display: none;}
	
}
@media screen and (max-width: 979px) { 

	.js .nav-collapse {
		clip: rect(0 0 0 0);
		max-height: 0;
		position: absolute;
		display: block;
		overflow: hidden;
		zoom: 1;
	}
	.nav-collapse.opened {
		max-height: 9999px;
	}
	.nav-toggle {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	
	.js .nav-collapse-0.opened { max-height: none !important; }
	
}