html {
    height:100%;
	}

body {
	background:#e6e6e6;
	width:100%;
	min-height:100%;
	padding:0;
	margin:0;
	}

/*---------------L I N K S-------------------------*/

a {
	text-decoration:none;
	color:inherit;
	}
	
.internal {
	display:inline-block;
    border-bottom:1px;
	border-bottom-style:dotted;
	}
	
.internal:hover {
	color:#a23125;
	transition: 0.3s;
	}	
	
.external {
	display:inline-block;
    border-bottom:1px;
	border-bottom-style:solid;
	}
	
.external:hover {
	color:#a23125;
	transition: 0.3s;
	}	

/*-------------------------L O G O-----------------------------------*/

#logo {
	background-color:#a23125;
	width: 15vw;
    height: 15vw;
	margin:0;
	left:12vw;
	top:0;
	position:fixed;
	z-index:100;
	transition: 0.3s;
	}
	
#logo img {
	width:7.2vw;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
/*-------------------------M E N U----------------------------------------*/

.vertical-menu {
	background-color:#333;
	width: 15vw;
    height: 15vw;
	color:#F00;
	margin:0;
	left:12vw;
	top:15vw;
	position:fixed;
	z-index:100;
	transition: 0.3s;
	}
	
.vertical-menu #menu {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}

.vertical-menu a {
	color:#8b8b8b;
	display:block;
	padding-left:4vw;
	text-decoration:none;
	font-family:'Titillium Web';
	font-weight:600;
	letter-spacing:0.25vw;
	line-height:2.7vw;
	font-size:1.1vw;
	margin: auto;
	}

.vertical-menu a:hover {
	color:#cfcfcf;		
	transition: 0.3s;
	}

.vertical-menu a.active {
	color:#cfcfcf;
	cursor:text;
	}	


/*---------------H E A D E R + F O O T E R-------------------------*/

.title {			/*DIV: Page title*/
	position:absolute; 
	left:27vw; 
	top:15vw; 
	width:30vw; 
	height:15vw; 
	background-color:#CCC; 
	}
	
.page_title {		/*Page title type*/
	font-family: 'Bungee';
	font-weight:400;
	font-size:4.2vw;
	letter-spacing:0.1vw;
	color:#a23125;
	text-align:left;
	padding-top:3.8vw;
	padding-left:2.8vw;
	line-height:105%;
	width:25vw;
	}

.subtitle { 	/*Page subtitle type*/
	font-family: 'Titillium Web';
	font-size:1.5vw;
	width:20vw;
	padding-top: 0.8vw;
	padding-left:3vw;
	font-weight:400;
	letter-spacing:0.1vw;
	color:#a23125;
	}
	

.copyright {
	font-family: 'Titillium Web';
	font-weight:400;
	letter-spacing:0.1vw;
	color:#fff;
	line-height:150%;
	font-size:0.9vw;
	padding-left:3.5vw;
	}

/*-------------------------M E D I A-----------------------------------*/

@media screen and (max-width: 1200px) and (min-width: 800px){
	
/*----------L O G O-----------*/
#logo {
	width: 17vw;
    height: 17vw;
	left:6vw;
	}
	
#logo img {
	width:8.5vw;
	}	
	
/*----------M E N U------------*/
.vertical-menu {
	width: 17vw;
    height: 17vw;
	left:6vw;
	top:17vw;
	}
	
.vertical-menu a {
	padding-left:4.2vw;
	letter-spacing:0.3vw;
	line-height:3vw;
	font-size:1.3vw;
	}

/*----------H E A D E R + F O O T E R----*/
.title {
	left:23vw; 
	top:17vw; 
	width:35vw; 
	height:17vw; 
	}

.page_title {			/*Page titles: About, Products, Contact*/
	font-size:5vw;
	letter-spacing:0.1vw;
	padding-top:3.7vw;
	padding-bottom:0.3vw;
	padding-left:2.9vw;
	}

.subtitle { 	/*Subtitle*/
	font-size:1.8vw;
	width:20vw;
	padding-left:3.2vw;
	letter-spacing:0.1vw;
	}

.copyright {
	line-height:150%;
	font-size:1.2vw;
	padding-left:3vw;
	}	
}



@media screen and (max-width: 800px){

#logo {
	width:18vw;
    height: 18vw;
	left:5vw;
	position:absolute;
	}
	
#logo img {
	width:9.1vw;
	}	

.vertical-menu {
	width: 18vw;
    height: 18vw;
	left:23vw;
	top:0;
	position:absolute;
	}

.vertical-menu a {
	padding-left:3.5vw;
	letter-spacing:0.3vw;
	line-height:3.8vw;
	font-size:1.9vw;
	}	
	
/*----------H E A D E R + F O O T E R----*/
.title {
	left:41vw; 
	top:18vw; 
	width:54vw; 
	height:18vw; 
	}
	
.page_title {	/*Page titles: About, Machines, Contact*/
	font-size:4.5vw;
	letter-spacing:0.2vw;
	padding-top:5vw;
	padding-left:5vw;
	line-height:105%;
	width:40vw;
	}	
	
.subtitle {	
	font-size:2.3vw;
	width:50vw;
	padding-top:0.8vw;
	padding-left:5vw;
	letter-spacing:0.1vw;
	}
	
.copyright {
	font-family: 'Titillium Web';
	font-weight:400;
	letter-spacing:0.08vw;
	color:#fff;
	line-height:150%;
	font-size:1.8vw;
	}	
}	

@media screen and (max-width: 800px) and (orientation: portrait) {

#logo {
	width:18vw;
    height: 18vw;
	left:5vw;
	position:absolute;
	}
	
#logo img {
	width:9.1vw;
	}	

.vertical-menu {
	width: 18vw;
    height: 18vw;
	left:23vw;
	top:0;
	position:absolute;
	}

.vertical-menu a {
	padding-left:3.5vw;
	letter-spacing:0.3vw;
	line-height:3.8vw;
	font-size:1.9vw;
	}	
	
/*----------H E A D E R + F O O T E R----*/
.title {
	left:41vw; 
	top:18vw; 
	width:54vw; 
	height:18vw; 
	}
	
.page_title {	/*Page titles: About, Machines, Contact*/
	font-size:4.5vw;
	letter-spacing:0.2vw;
	padding-top:5vw;
	padding-left:5vw;
	line-height:105%;
	width:40vw;
	}	
	
.subtitle {	
	font-size:2.3vw;
	width:50vw;
	padding-top:0.8vw;
	padding-left:5vw;
	letter-spacing:0.1vw;
	}
	
.copyright {
	font-family: 'Titillium Web';
	font-weight:400;
	letter-spacing:0.08vw;
	color:#fff;
	line-height:150%;
	font-size:1.8vw;
	}	
}	
	
/*Portrait phones*/
@media screen and (max-width: 550px) and (orientation: portrait) {

#logo {
	width:45vw;
    height: 45vw;
	left:5vw;
	position:absolute;
	}
	
#logo img {
	width:17vw;
	}	

.vertical-menu {
	width: 45vw;
    height: 45vw;
	left:50vw;
	top:0;
	position:absolute;
	}

.vertical-menu a {
	padding-left:13vw;
	letter-spacing:0.6vw;
	line-height:7vw;
	font-size:3.2vw;
	}	
	
/*----------H E A D E R + F O O T E R----*/
.title {
	left:5vw; 
	top:45vw; 
	width:90vw; 
	height:27vw; 
	}
	
.page_title {	/*Page titles: About, Machines, Contact*/
	font-size:6vw;
	letter-spacing:0.2vw;
	padding-top:8vw;
	padding-left:8vw;
	line-height:105%;
	width:70vw;
	padding-bottom:1.4vw;
	}	
	
.subtitle {	
	font-size:3.5vw;
	width:70vw;
	padding-top:0;
	padding-left:8vw;
	letter-spacing:0.1vw;
	}
	
.copyright {
	letter-spacing:0.2vw;
	line-height:150%;
	font-size:2.2vw;
	padding-left:8vw;
	padding-top:1vw;
	}	
}	












