@font-face {
  font-family: "Audiowide";
  font-display: swap;
  src: url(fonts/Audiowide-Regular.eot) format('eot');
  src: url(fonts/Audiowide-Regular.eot?) format('eot'),
	  url(fonts/Audiowide-Regular.woff) format('woff'), 
	  url(fonts/Audiowide-Regular.ttf) format('ttf');
}
body, html, #machine {
	padding:0;
	margin:0;
}
p {
	margin: 0;
	
}
body, html {
	width:100%;
	height:100%;
	}
body {
    position:fixed;
    overflow: hidden;
	overflow-x: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23300'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#container {
	position:relative;
	
}
#machine {
	height: 100%;
	width: 100%;
	position:relative;
	left:0;
	top:0;
	}
#flash-desktop, #flash-mobile {
	display: none;
	margin-top:50px;
	text-align:center;
}

#home-btn {
	position:fixed;
	top:5px;
	left:5px;
	z-index:9999;
	
}
#zoom-btn-out {
	position:absolute;
	bottom:5px;
	right:67px;
}
#zoom-btn-in {
	position:absolute;
	bottom:5px;
	right:130px;
}
#trans-btn-up {
	position:absolute;
	top:5px;
	right:5px;
}
#trans-btn-down {
	position:absolute;
	top:64px;
	right:5px;
}
#screen-btn {
	position:absolute;
	bottom:5px;
	right:5px;
}

 .btn-large {
	 border-radius: 80px;
	 font-weight: bold;
  padding: 0 10px;
  color: rgb(34, 184, 240)
}
 .btn-large i {
	font-size:2.5rem;
 }
#trans-up {
	margin-bottom:5px;
}

#dropdown-content {
  display:none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
#dropdown-content a {
  transition: background-color 0.2s; 
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {	
  background-color: #000 !important;
}

#pub-left {
    display:block;
    position:absolute;
    left:0;
    bottom:15vh;
}
#pub-left, .pub-left {
     height:70vh;
     width:10vw;
 }
#pub-down {
    display:block;
    position:absolute;
    bottom:0;
    left:15vw;
}
#pub-down, .pub-down {
    height:10vh;
    width:70vw;
}
@media (max-aspect-ratio: 2/1) {
    #pub-down {
        display:block;
    }
    .pub-down {
        display:inline-block;
    }
    #pub-left, .pub-left {
        display:none;
    }
	#machine {		
		height: calc(100vh - 90px);
	}
}
@media (min-aspect-ratio: 2/1) {
    #pub-left {
        display:block;
    }
    .pub-left {
        display:inline-block;
    }
    #pub-down, .pub-down {
        display:none;
    }
	#machine {		
		left: 160px;
		width: calc(100vw - 160px);
	}
}
a.inactive {
	cursor:default;
}
#dropdown-content a.inactive:hover {
	background-color: #263238 !important;
}

.audiowide {
	font-family:Audiowide;
}

.machines .col {
	width:20%;
	height:180px;
}
.machines a {
	display:table-cell;
	height:150px;
	width:100%;
	vertical-align:middle;
	position:relative;
}
.machines a img {	
	position:relative;
	width:100%;
	transition: all 0.25s ease-in-out;
	left:0;
	top:0;
}
.machines a:hover img {
	width:140%;	
	left:-20%;
	top:-20%;
	z-index:1000;
}