
@media(max-width: 1900px) {
	body, html {
		font: 400 20px/22px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 50px/70px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 28px/38px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 1700px) {
	body, html {
		font: 400 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 47px/68px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 26px/36px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 1580px) {
	body, html {
		font: 400 14px/18px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 45px/66px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 24px/34px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 1300px) {
	body, html {
		font: 400 12px/18px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 40px/60px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 20px/30px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 1024px) {
	body, html {
		font: 400 16px/24px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 30px/50px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 16px/26px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 780px) {
	body, html {
		font: 400 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 30px/50px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 20px/30px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media(max-width: 400px) {
	body, html {
		font: 400 14px/18px "Roboto", Arial, Helvetica, sans-serif;
	}
	h2	{
		font: 300 36px/50px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
	h3	{
		font: 300 16px/26px "Roboto Condensed", Arial, Helvetica, sans-serif;
	}
}
@media screen and (orientation: portrait) {
	#wrapper, footer, .buttons {
		width: 100% !important;
	}
	.desktop	{
		display: none !important;
	}
	#menu-holder.fixed {
		box-shadow: none !important;
		height: auto !important;
		position: relative !important;
	}
	.logo.width20	{
		width: 40%;
	}
	#menu .right.width80	{
		width: 60%;
	}
	.langs	{
		max-width: 100% !important;
	}
	.div.main-logo .txt {
		width: 100% !important;
	}
	.home-holder .left.text, .home-holder .right {
		flex: 100% !important;
	}
	div.central-hold {
    	flex: 0 1 32%;
	}
	.service	{
		flex: 100%;
	}
	.portfolio .holder .left	{
		flex: 100%;
		min-height: 500px !important;
		background-position: bottom center !important;
		order: 2;
	}
	#page .contact-us form {
		padding: 0 !important;
		width: 100% !important;
	}
	#page .contact-us form label.captcha span.title {
		width: 100% !important;
	}
	.footer-center .column {
    	flex: 1 1 50%;
	}
	#created-by 	{
		text-align: center !important;
	}
	.submenu.project.width49	{
		width: 100%;
	}
}
@media screen and (orientation: portrait) and (max-width: 760px) {
	.logo.width20	{
		width: 60%;
	}
	#menu .right.width80	{
		width: 40%;
	}
	div.main-logo h2 {
		height: 4em !important;
		top: 10% !important;
	}
	div.main-logo .txt {
		display: none !important;
	}
	.home-holder .left.text, .home-holder .right {
		flex: 100% !important;
	}
	div.central-hold {
    	flex: 0 1 49%;
	}
	.portfolio .holder .left	{
		min-height: 350px !important;
	}
	.footer-center .column {
    	flex: 1 1 100%;
		text-align: center !important;
	}
	.footer-center .column h4, .footer-center .column h5, .footer-center .column li, .footer-center .column #newsletter label.align-left {
		text-align: center !important;
	}
	.footer-center a.go-to-map {
		display: none !important;
	}
	.footer-center .social	{
		margin: 1% auto !important;
		width: 100px !important;
	}
	#newsletter input.v {
		width: 29.5% !important;
	}
}
@media screen and (orientation: landscape) and (max-width: 1024px) {
	#wrapper, footer, .buttons {
		width: 100% !important;
	}
	.desktop	{
		display: none !important;
	}
	#menu-holder.fixed {
		box-shadow: none !important;
		height: auto !important;
		position: relative !important;
	}
	.logo.width20	{
		width: 40%;
	}
	#menu .right.width80	{
		width: 60%;
	}
	.langs	{
		max-width: 100% !important;
	}
	.div.main-logo .txt {
		width: 100% !important;
	}
	.home-holder .left.text, .home-holder .right {
		flex: 100% !important;
	}
	div.central-hold {
    	flex: 0 1 32%;
	}
	#page .contact-us form {
		padding: 0 !important;
		width: 100% !important;
	}
	#page .contact-us form label.captcha span.title {
		width: 100% !important;
	}
	.footer-center .column {
    	flex: 1 1 50%;
	}
	#created-by 	{
		text-align: center !important;
	}
	.submenu.project.width49	{
		width: 100%;
	}
}
@media screen and (orientation: landscape) and (max-width: 650px) {
	.logo.width20	{
		width: 60%;
	}
	#menu .right.width80	{
		width: 40%;
	}
	div.main-logo h2 {
		height: 4em !important;
		top: 10% !important;
	}
	div.main-logo .txt {
		display: none !important;
	}
	.home-holder .left.text, .home-holder .right {
		flex: 100% !important;
	}
	div.central-hold {
    	flex: 0 1 49%;
	}
	.footer-center .column {
    	flex: 1 1 100%;
		text-align: center !important;
	}
	.footer-center .column h4, .footer-center .column h5, .footer-center .column li, .footer-center .column #newsletter label.align-left {
		text-align: center !important;
	}
	.footer-center a.go-to-map {
		display: none !important;
	}
	.footer-center .social	{
		margin: 1% auto !important;
		width: 100px !important;
	}
	#newsletter input.v {
		width: 29.5% !important;
	}
}
@media screen and (max-width: 1024px) {
	.mobile	{
		display: block !important
	}
	/*NAVIGATION*/
	button {
		font-family: "Roboto", Arial, Helvetica, sans-serif;
		font-size: 14px;
		cursor: pointer;
		border: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.buttons {
		background: #c0c0c0;
		height: 50px;
		margin: 0 auto;
		width: 98%;
	}
	.buttons button {
		background: url('../img/menu-icon.png') center center no-repeat;
		background-size: contain;
		height: 50px;
		float: left;
		margin: 0px 0 0 5px;
		color: #fff;
		width: 100px;
	}
	.buttons button:hover,
	.buttons button.active {
		opacity: .7;
	}
	.buttons button:focus {
		outline: none
	}
	button.close-menu {
		background-color: #c0c0c0;
		color: #fff;
	}
	button.close-menu:focus {
		outline: none
	}
	.mCSB_inside > .mCSB_container {
		margin-right: 15px !important;
	}
	nav.menu {
		position: fixed;
		z-index: 20;
		background-color: #8b898a;
		overflow-x: hidden;
		overflow-y: visible;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	nav.menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}	
	nav.menu ul li {
		float: none;
	}
	nav.menu a, nav.menu li span  {
		font-weight: 300;
		color: #fff;
		font: 1.6em/1.2em "Roboto Condensed", Arial, Helvetica, sans-serif;
		text-align: left;
	}
	nav.push-menu-left {
		top: 0;
		width: 300px;
		height: 100%;
		z-index: 9999;
	}
	nav.push-menu-left li {
		display: block;
		text-align: left;
		border-bottom: solid 1px #747474;
	}
	nav.menu ul li:hover {
		background: #5e5e5e;
	}
	nav.push-menu-left li a, nav.push-menu-left li span {
		display: block;
		padding: 15px 10px;
		width: 230px;
	}
	nav.push-menu-left li a.show {
		background: url('../img/down.png') center center no-repeat;
		background-size: contain;
		cursor: pointer;
		margin: -49px 5px 0 0;
		padding: 15px 0px;
		width: 30px;
	}
	nav.push-menu-left li:first-child, nav.push-menu-left li:last-child {
		border-bottom: none
	}
	nav.menu ul li ul.child {
		background: #747474;
		display: none;
		text-align: left;
		width: 100%;
	}
	nav.menu ul li ul.child.display {
		display: block !important;
	}
	nav.push-menu-left li ul.child li a {
		padding: 15px 5px 15px 15px;
	}
	nav.menu ul li ul.child li:hover {
		background: #5e5e5e;
	}
	nav.push-menu-left ul.child li, nav.push-menu-left ul.child li:first-child {
		border-bottom: solid 1px #5e5e5e;
	}
	nav.push-menu-left ul.child li:last-child {
		border-bottom: none
	}
	nav.menu ul ul.child li a {
		font: 1.3em "Roboto Condensed", Arial, Helvetica, sans-serif;
		padding: 2%;
		text-transform: none;
	}
	nav.push-menu-left a {
		display: block;
	}
	nav.push-menu-left button.close-menu {
		height: 50px;
		background: url('../img/close.png') center center no-repeat;
		background-size: contain;
		width: 50px;
	}
	nav.push-menu-left button.close-menu:hover {
		opacity: .7;
	}
	nav.push-menu-left {
		left: -300px
	}
	body.pml-open nav.push-menu-left {
		left: 0
	}
	body.pml-open #wrapper {
		left: 300px
	}
	body.pmr-open #wrapper {
		left: -300px
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 150;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
	}
}
@media screen and (max-width: 500px) {
	.no-small-mobile	{
		display: none;
	}
}
@media all and (max-width: 860px) { 
	.buttons br {
	  	display: none
	}
	.buttons button {
	  	padding: 10px 20px
	}
}
@media all and (max-width: 330px) { 
	nav.push-menu-left {
	  	top: 0;
	  	width: 100%;
	}
	nav.push-menu-left {
	  	left: -100%
	}
	body.pml-open nav.push-menu-left {
	  	left: 0
	}
	body.pmr-open nav.push-menu-right {
	  	right: 0
	}
	body.pml-open #wrapper {
	  	left: 100%
	}
	body.pmr-open #wrapper {
	  	left: -100%
	}
}
