@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400');

	@font-face {
   		font-family: misolight;
    	src: url('https://www.antumbra.eu/assets/fonts/miso-light-webfont.woff2') format('woff2'),
        url('https://www.antumbra.eu/assets/fonts/miso-light-webfont.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
	}

	a:visited, a:link, a:active {
		text-decoration: none;
	}

	.cont a:link, .cont a:visited, .cont a:active {
		color: #ffb400;
		text-decoration: none;
    	font-style: normal;
    	font-size: 14px;
    	font-family: 'source code pro', monospace;
		font-weight: 300;
	}

	.cont a:hover {
	    color: #ffb400;
	    text-decoration: underline;
    	font-style: normal;
    	font-size: 14px;
    	font-family: 'source code pro', monospace;
		font-weight: 300;
	}

	.condensed {
		font-family: misolight, sans-serif;
		letter-spacing: 1.5px;
		font-weight: 300;
	}

	.error {
		font-family: misolight, sans-serif;
		letter-spacing: 1.5px;
		font-weight: 300;
		font-size: 300px;
		color: #ffffff;
		line-height: 0;
		margin-bottom: 150px;
	}

	.monospace {
		font-family: 'source code pro', monospace;
		font-weight: 300;

	}

	.light {
		color: #ffffff;
	}

	body {
		background-color: #161616;
		padding: 0px;
		margin: 0px;
	}

	h2 {
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		font-size: 50px;
		color: white;
		padding: 0px;
		margin-bottom: 20px;
	}

	h3 {
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		font-size: 30px;
		color: white;
		padding: 0px;
		margin-bottom: 20px;
		line-height: 1;
	}

	h4 {
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		font-size: 20px;
		color: white;
		padding-top: 30px;
		margin-bottom: 10px;
		line-height: 1;
	}

	p {
		color: white;
		line-height: 1.5;
    	font-style: normal;
    	font-size: 14px;
    	font-family: 'source code pro', monospace;
		font-weight: 300;
	}

	.answer a:link, .answer a:visited, .answer a:active {
		color: #ffb400;
		text-decoration: none;
    	font-style: normal;
    	font-size: 14px;
    	font-family: 'source code pro', monospace;
		font-weight: 300;
	}

	.answer a:hover {
	    color: #ffb400;
	    text-decoration: underline;
    	font-style: normal;
    	font-size: 14px;
    	font-family: 'source code pro', monospace;
		font-weight: 300;
	}

	.question a:link, .question a:visited, .question a:active {
		color: #ffffff;
		text-decoration: none;
		opacity: 1;
	}

	.question a:hover {
	    color: #ffffff;
	    text-decoration: none;
	    opacity: 0.5;
	}

	div.faq {
		width: 100%;
	}

	td.qnumber {
		width: 60px;
		vertical-align: top;
	}

	.numcirc {
		position: relative;
		top: 4px;
	}

	.numcircle {
	    width: 40px;
	    height: 40px;
	    border: 1px solid white;
	    text-align:  center;
	    vertical-align:  middle;
	    border-radius: 20px;
	    position:  relative;
	    top: -5px;
	}

	.answer p {
		margin-top: 0px;
	}

	.answer p:last-child {
		margin-bottom: 0px;
	}

	td.qtd {
		padding-left: 0px;
	}

	td.atd {
		padding: 0px 0px 0px 20px;
		border-left: 1px solid #ffffff;
	}

	td.qsepa {
		height: 40px;
	}

	h2.faq {
		position: relative;
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		line-height: 0px;
		font-size: 200px;
		color: white;
		padding: 0px;
		margin-bottom: 150px;
		margin-left: -14px;
		margin-top: 80px;
	}

	h3.question {
		margin-top: 0px;
		margin-bottom: 20px;
		text-transform: uppercase;
	}

	.toolbox {
		width: 50%;
	}

	.toolboxdesc {
		width: 50%;
	}

	.toolboxspacer {
		height: 200px;
	}

	.capinput {
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		font-size: 50px;
		width: 100%;
		height: 80px;
		display: block;
		background-color: #161616;
		color: #ffffff;
		text-align: left;
		border: 0px;
		border-bottom: 1px #ffffff solid;
		outline: none;
		margin-bottom: 20px;
		margin-top: 28px;
		padding-left: 0px;

	}

	.capoutput {
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: column;
	}

	.capdesc {
		position: relative;
    	top: 15px;
    	margin-right: 20px;
	}

	.capoutput p {
		display: inline;
	}

	p.unit {
		opacity: 0;
		color: #777777;
	}

	h2.bom {
		position: relative;
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		line-height: 0px;
		font-size: 200px;
		color: white;
		padding: 0px;
		margin-bottom: 40px;
		margin-left: -14px;
		margin-top: 80px;
	}

	h3.bom {
		font-family: misolight, sans-serif;
		font-weight: 300;
		letter-spacing: 1.5px;
		font-size: 30px;
		color: white;
		padding: 0px;
		margin-bottom: 0px;
		line-height: 1;
	}

	
	.bom td {
	    border: 1px solid white;
		padding: 10px;
	}

	tr.bomitem {
		color: white;
		border: 1px solid white; 
	}

	tr.bomheader {
		background-color: white;
		color: #161616;
		border: 1px solid;
		position: sticky;
	}

	.bom tr:nth-child(even){background: }
	.bom tr:nth-child(odd){
		background-color: #313131;
	}


	tr.sepa {
		border: 0px; 
		color: #ffffff !important;
		height: 80px;
		vertical-align: bottom;
		background-color: #161616 !important;
	}
	tr.sepa td {
		border: 0px; 
	}

	td.qty {
	    width: 30px;
	}
	td.mref {
	    width: 150px;
	}
	td.ind {
	    width: 300px;
	}
	td.spc {
	    width: 50px;
	}

	.bom {
		width: 100%;
		border: 0px solid;
		border-color: white;
		border-collapse: collapse;
		font-size: 12px;
	}


	.bomtable {
		display: inline;
	}

	#bombox {
		width: 70%;
		display: flex;
		flex-direction: column; 
		position: relative;
		top: 100px;
		margin: 0px auto 150px auto;
	}

	.bombutton {
			display:inline-block;
   			margin-right:5px;
			border-width: 1px;
			border-style: solid;
			border-color: white;
			padding-top: 4px;
			height: 40px;
			background-color: rgba(0,0,0,0);
		    color: #FFFFFF;
		    font-size: 20px;
		    width: 80px;
		}

	.bombutton:hover {
			background-color: #FFFFFF;
			color: #161616;
		}

	.bactive {
		background-color: #FFFFFF;
		color: #161616;
	}

	#burger {
		display: none;
		pointer-events: auto;
	}

	#desc {
		padding-top: 5px;
	}


	.antumbra {
			pointer-events: auto;
			font-family: misolight;
			font-weight: 300;
			position: relative;
			top: 0px;
			color: #FFFFFF;
			font-size: 26px;
			line-height: 1;
			padding: 0px 0px 0px 10px;
			margin: 0px;
			text-decoration: none;
			float: right;
			letter-spacing: 1.5px;
	}

	.logo {
		fill: #FFFFFF;
	}

		#menu_container {
			pointer-events: none;
			position: fixed;
			z-index: 1;
			width: 100vw;
			padding: 0px;
			display: -webkit-flex;
    		display: flex;
		}

		#menu {
			width: 100%;
			margin: 20px;
    		display: -webkit-flex;
    		display: flex;
      	 	-webkit-justify-content: space-between;
    		justify-content: space-between;
		}

		#logo {
			pointer-events: auto;
			position: relative;
			padding: 0px;
		}

		.module_desc {
			display: none;
		}

		.module_title {
			display: none;
		}

		#menu_items {
			pointer-events: auto;
			position: relative;
			top:3px;
			
			color: #FFFFFF;
		}

		#menu_items ul {
			list-style-type: none;
			font-size: 26px;
			line-height: 1;
			padding: 0px;
			margin: 0px;
		}

		#menu_items ul a {
			text-decoration: none;
			color: white;
		}

		#menu_items ul a:link {
			opacity: 0.5;
		}

		#menu_items ul a:hover {
			opacity: 1;
		}

		#social_container {
			pointer-events: none;
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 100%;
			margin-top: 0px;
			bottom: 0px;
			display: -webkit-flex;
    		display: flex;
		}

		#social {
			pointer-events: auto;
			position: relative;
			margin: auto 20px 20px auto;
			width: 80px;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: space-between;
    		justify-content: space-between;
		}

		.hidden {
			display: none;
		}

		#modules {
			position: absolute;
			top: -30px;
			height: 100%;
			width: 100vw;
			margin: auto;
			display: -webkit-flex;
    		display: flex;
    		-webkit-flex-direction: column;
    		flex-direction: column;
    	}



		#modules_header {
			position: relative;
			margin: auto auto 0px auto;
			border-bottom: 1px white solid;
			width: 860px;
			text-align: center;
		}

		#modules_footer {
			position: relative;
			margin: 0px auto auto auto;
			border-top: 1px white solid;
			width: 860px;
			text-align: center;
			height: 50px;
		}

		#module_scroller {
			margin: 30px auto 30px auto;
			display: -webkit-flex;
    			display: flex;
			justify-content: center;
			-webkit-justify-content: center;
		}

		.module_wrap {

		}

		.module {
			z-index: 1;
			position: relative;
			width: auto;
			display:block;
			height: 300px;
			-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
			box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
			background-color: rgba(0,0,0,0.5);
			margin: 10px 10px 10px 10px;
			opacity: 0.2;
			-webkit-filter: grayscale(100%);
    		filter: grayscale(100%);
    		-webkit-transition: opacity 0.2s, grayscale 0.2s; /* Safari */
    		transition: opacity 0.2s, grayscale 0.2s;
		}
		.module:hover {
			opacity: 1;
			-webkit-filter: grayscale(0%);
    		filter: grayscale(0%);
		}

		#makeMeScrollable
		{
			width:100vw;
			height: 420px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			padding: 0;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;

		}

		#headerimage {
			position: fixed;
			pointer-events: none;
			width: 100vw;
			height: 100vh;
			top: 0;
			z-index: 0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% ;
			-webkit-filter: grayscale(100%);
    		filter: grayscale(100%);
    		opacity: 0.1;
    		
		}

		.downarrow {
			position: relative;
			top:-200px;
			display: -webkit-flex;
    		display: flex;
    		
		}

		@keyframes blink {
		    0%   {opacity: 0.3}
		    50%  {opacity: 1}
		    100%  {opacity: 0.3}
		}

		.downarrow img {
			margin: auto;
			opacity: 0.3;
			animation-name: blink;
    		animation-duration: 1s;
    		animation-delay: 2s;
    		animation-iteration-count: infinite;
		}

		

		#headertitle {
			width: 640px;
			height: 100vh;
			z-index: 1;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: space-between;
    		justify-content: space-between;
    		margin: 0px auto 0px auto;
		}

		.headerletter {
			font-size: 200px;
			color: white;
			padding: 0px;
			margin-bottom: 20px;
			margin: auto 0px auto 0px;
		}

		#contentbox {
			width: 640px;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: space-between;
    		justify-content: space-between;
    		margin: 0px auto 0px auto;
		}

		#faqbox {
			width: 640px;
    		margin: 0px auto 0px auto;
		}

		#leftcontainer {
			width: 300px;
		}

		#rightcontainer {
			width: 300px;
		}

		#preview_spacer {
			height: 44px;
		}

		#preview_container {
			position: sticky;
			/*
			background-size: auto 400px;
			background-position: 49.9%;
			background-repeat: no-repeat;
			*/
			top: 44px;
			width: 300px;
			height: 400px;
			display: -webkit-flex;
    		display: flex;
    		justify-content: center;
    		margin-bottom: 20px;
    		padding: 0px;
		}
		.stack {
			position: absolute;
		}

		.preview_image {	
			margin: 0px auto 0px auto;
			height: 400px;
			width: auto;
			-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
			box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
			background-color: rgba(0,0,0,0.5);
			-webkit-transition: opacity 0.5s; /* Safari */
    		transition: opacity 0.5s;
		}

		.pcb_image {	
			margin: 0px auto 0px auto;
			height: 400px;
			width: auto;
		}

		.preview_image:hover {
			opacity: 0.5;
			-webkit-filter: grayscale(100%);
    		filter: grayscale(100%);
		}

		.spec {
    		width: 80px;
    		height: 22px;
		}

		ul.resources {
			color: white;
		    list-style-type: circle;
		    text-align: left;
		    padding-left: 20px;
		    margin-top: 0px;
		}

		.resources li {
			padding-top: 10px;
			color: #ffffff;
			text-decoration: none;
	    	font-style: normal;
	    	font-size: 14px;
	    	font-family: 'source code pro', monospace;
			font-weight: 300;
		}

		.downloadContainer {
			width: 640px;
			position: relative;
			top: 100px;
			margin-left: auto;
			margin-right: auto;
		}

		.amount {
				border-width: 1px;
			border-style: solid;
			border-color: white;
			height: 55px;
			padding-left: 20px;
		    background-color: #FFFFFF;
		    width: 80px;
		    font-size: 20px;
			}

			.submitButton {
				border-width: 1px;
				border-style: solid;
				border-color: white;
				padding-top: 1px;
				height: 59px;
				background-color: rgba(0,0,0,0);
			    color: #FFFFFF;
			    font-size: 20px;
			    padding-left: 20px;
			    padding-right: 20px;
			    position: relative;
			    top: 0px;
			    width: 140px;

			}
			.submitButton:hover {
				background-color: #FFFFFF;
				color: #161616;
			}
			.amount:focus {
				outline: none;
		box-shadow: none;
			}
			.submitButton:focus {
				outline: none;
		box-shadow: none;
			}
			#sub {
				display: none;
			}

			.fa-download {
				font-size: 20px;
			}

			.fa-paypal {
				font-size: 20px;
			}

			.currency {
				font-size: 30px;
				margin-right: 20px;
				color: #efede9;
				margin-left: 5px;
			}
			
.donation {
	width: 320px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.previewContainer {
	width: 100%;
	flex-basis: 100%;
	margin-left: auto;
	margin-right: auto;
	align-content: center;
	display: flex;
	margin-bottom: 0px;
}
.previewImage {
	height: 300px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

.donationItem {
	width: 100%;
	flex-basis: 100%;
	align-content: center;
	text-align: center
}

/* Calibration */
.marblescontainer {

}

.marblesdesc {
	width: 100%;
}
.calibrationbox {
	width: 100%;
}

table.marbles {
	width: 100%;
	font-family: 'source code pro', monospace;
	font-weight: 300;
	font-size: 14px;
	color: white;
}

table.marbles td {
	height: 30px;
}

table.marbles p {
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
    

.marbles input {
	width: 80px;
	font-family: 'source code pro', monospace;
	font-weight: 300;
	font-size: 14px;
	border: 0px;
	border-radius: 2px;
	padding: 4px;
	margin-right: 10px;

}

.marbles .htitle {
	width: 60px;
}

.marbles .celltitle {
	width: 80px;
}

.marbles .value {
	width: 150px;
	color: white;
}

.generatebut {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

.codetextcont {
	width: 100%;
	height: 200px;
	font-family: 'source code pro', monospace;
	font-weight: 300;
	font-size: 14px;
	border: 1px solid white;
	border-radius: 2px;
}


.codetext {
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 14px 20px;
}



/*--carousel--*/
.carousel {
	width: 100vw;
	overflow: hidden;
	position: relative;
	z-index: 0;
	margin: 100px 0px 100px 0px;
				display: flex;
				display: -webkit-flex;
				flex-direction: column;
				-webkit-flex-direction: column;
}
		
		.ui-carousel-item {
			float: left;
			display: inline;
			margin: 20px;
			padding: 00px 0px 0px 0px;
			width: 500px;
			height: 500px;
		}

		.ui-carousel-item img {
			width: 100%;
			height: 100%;
			-webkit-filter: grayscale(100%);
    		filter: grayscale(100%);
    		opacity: 0.1;
    		color:#fff;
    		-webkit-transition: opacity 0.5s, grayscale 0.5s; /* Safari */
    		transition: opacity 0.5s, grayscale 0.5s;
		}

		.ui-carousel-item.ui-carousel-current img {
			-webkit-filter: grayscale(0%);
    		filter: grayscale(0%);
    		opacity: 1;
    		-webkit-transition: opacity 0.5s, grayscale 0.5s; /* Safari */
    		transition: opacity 0.5s, grayscale 0.5s;
		}

		.ui-carousel-item.ui-carousel-current div {
			-webkit-filter: grayscale(0%);
    		filter: grayscale(0%);
    		opacity: 1;
		}

		/*--vertical--*/
		.vertical .ui-carousel-item {
			float: none;
			display: block;
		}

		.ui-carousel-button img {
			width: 100%;
			height: 100%;
		}


		.ui-carousel-button {
			width: 50px;
			height: 50px;
			background-repeat: no-repeat;
			background-position: center;
			float: left;
			display: inline;
			margin: 0px 5px 0px 5px;
			opacity: 0.3;
			box-sizing: border-box;
    		-moz-box-sizing: border-box;
    		-webkit-box-sizing: border-box;
		}

		.ui-carousel-button:hover {
			opacity: 1;
			border:1px white solid;
		}

		.ui-carousel-prev {
			background-image: url("https://www.antumbra.eu/assets/images/arrow_left.svg");
			margin: 0px;
		}

		.ui-carousel-prev:hover {
			border:0px;
		}

		.ui-carousel-next:hover {
			border:0px;
		}
		
		.ui-carousel-next {
			background-image: url("https://www.antumbra.eu/assets/images/arrow_right.svg");
			margin: 0px;
		}

		.ui-carousel-paginationList {
			padding: 0px;
			margin: 0px;
		}

		.carousel-pagination {
			width: 640px;
			margin: 0px auto 0px auto;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: space-between;
    		justify-content: space-between;
		}

		.imgcaption {
			background-color: rgba(0,0,0,0.5);
			position: relative;
			display: inline-block;
			top: -64px;
			left: 0px;
			margin: 20px;
			padding: 5px 10px 5px 10px;
			color: white;
			
			font-size: 8px;
			opacity: 0;
		}

		#modulerack {
			background-color: #161616;
			pointer-events: none;
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 80px;
			margin-top: 0px;
			bottom: 0px;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: center;
    		justify-content: center;
    		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
			-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
			box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
		}

		#modulerack img {
			pointer-events: auto;
			height: 80px;
			opacity:0.5;
		}

		#modulerack img:hover {
			opacity:1;
		}

		#tooltip {
			pointer-events: none;
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 80px;
			margin-top: 0px;
			bottom: 60px;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: center;
    		justify-content: center;
    		-webkit-transition: opacity 0.2s; /* Safari */
    		transition: opacity 0.2s;
    		opacity: 0;
		}

		#tooltiptext {
			background-color: #FFFFFF;
			position: absolute;
			display: inline-block;
			height: 20px
			margin: 0px;
			padding: 10px 15px 5px 15px;
			color: #161616;
			font-size: 30px;
		}
		.specs {
			padding-top: 20px;
		}

		.specs p {
			height:20px;
			padding: 0px;
			margin: 0px;
			line-height: 0;
		}

		.socialicons {
			width: 40px;
			height: 40px;
			display: -webkit-flex;
    		display: flex;
		}

		.socialicons a {
			margin:auto;
			margin-top: 12px;
		}

		.contacttitle {
			padding-top: 20px;
		}

		.b {
			border-width: 1px;
			border-style: solid;
			border-color: white;
			padding-top: 4px;
			height: 59px;
			background-color: rgba(0,0,0,0);
		    color: #FFFFFF;
		    font-size: 20px;
		    width: 100%;
		    margin-left: 20px;
		}

		.input {
			border-width: 1px;
			border-style: solid;
			border-color: white;
			height: 55px;
			padding-left: 20px;
		    background-color: #FFFFFF;
		    width: 100%;
		    font-size: 20px;
		}

		.b:hover {
			background-color: #FFFFFF;
			color: #161616;
		}
		
		.emailinput {
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: space-between;
    		justify-content: space-between;
    		padding-top: 20px;
    		max-width: 300px;
		}

		#facebox {
			padding-top: 40px;
			padding-bottom: 40px;
		}

		.contactbox {
			 padding-top: 40px;
		}

		#contactbg {
			 background-image: url('https://www.antumbra.eu/assets/images/logo_single.svg');
			 width: 100vw;
			 height: 100vh;
			 position: fixed;
			 pointer-events: none;
			 background-repeat: no-repeat;
			 background-position: -200% 20%;
			 background-size: 80% auto;
			 /*background-size: 60% 180%;*/
		}

		.buybutton {
			border-width: 1px;
			border-style: solid;
			border-color: white;
			padding-top: 4px;
			height: 59px;
			background-color: rgba(0,0,0,0);
		    color: #FFFFFF;
		    font-size: 20px;
		    width: 100%;
		}

		.buybutton:hover {
			background-color: #FFFFFF;
			color: #161616;
		}

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

			#content {
				position: relative;
				/*top: 150px;*/
			}

			#menu {
				background-color: #FFFFFF;
				padding: 0px;
				margin: 0px;
			}
			.contactbox {
			 padding-top: 80px;
			}

			#modules {
				padding-top: 60px;
			}

			#logo {
				padding: 20px 20px 20px 60px;
			}

			.logo {
				fill: #161616;
			}

			.antumbra {
				color: #161616;
			}

			#menu_items {
				pointer-events: auto;
				position: relative;
				top:5px;
				
				color: #161616;
				padding: 16px 60px 20px 20px;
			}

			#menu_items ul {
				list-style-type: none;
				font-size: 26px;
				float: left;
				line-height: 1;
				padding: 0px;
				margin: 0px;
			}
			#menu_items li {
				display: inline;
				padding-left: 20px;
			}

			#menu_items ul a {
				text-decoration: none;
				color: #161616;
			}

			#menu_items ul a:link {
				opacity: 1;
			}

			#menu_items ul a:hover {
				opacity: 0.5;
			}
			#headerimage {
				background-size:100% auto  ;
			}

		}

		@media screen and (max-width:1024px) {
			#headerimage {
				background-size: auto 100%;
			}
		}

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

			#modules_header {
				width: 90vw;
			}

			#modules_footer {
				width: 90vw;
			}

			.contactbox {
			 padding-top: 60px;
			}

		}


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

			#burger {
				display: block;
				pointer-events: auto;
				position: relative;
				top:5px;
				color: #161616;
				padding: 14px 20px 20px 20px;
				width: 26px;
				float: right;			}

			#menu {
				display: block;
				
			}

			#menu_items {
				display: none;
				pointer-events: none;
				opacity: 0;
			}

			#menu_items li {
				display: block;
				margin: auto;
				pointer-events: none;
			}

			#menu_items li a {
				display: block;
				margin: auto;
				pointer-events: auto;
			}

			#menu_items ul {
				width: 80vw;
				height: 80vh;
				font-size: 72px;
				display: flex;
				display: -webkit-flex;
				flex-direction:column;
				-webkit-flex-direction:column;
				-webkit-justify-content: center;
    			justify-content: center;
			}

			#logo {
				padding: 12px 10px 10px 20px;
				float: left;

			}

			#headertitle {
				width: 80vw;
			}

			#contentbox {
				-webkit-justify-content: center;
    			justify-content: center;
    			-webkit-flex-wrap: wrap;
    			flex-wrap: wrap;
    			width: 100vw;
			}

			#leftcontainer {
				width: 100vw;
				margin: 0px 20px 0px 20px;
			}

			#rightcontainer {
				width: 100vw;
				margin: 0px 20px 0px 20px;
			}

			#modules_header {
				width: 100vw;
				border: 0px;
				text-align: left;
			}

			#preview_container {
				width: 100vw;
				height: 100vw;
				background-size: auto 99.8vw;
			}

			#preview_image {
				height: 100vw;
			}

			.ui-carousel-item {
				width: 60vw;
				height: 60vw;
			}

			#gallery {
				margin-top: 20px;
				margin-bottom: 120px;
			}

			.carousel-pagination {
				width: 100vw;
			}

			#headerimage {
				height: 100vh;
				background-size: auto 100%;
			}


			#modules {
				z-index: 0;
				height: 100vh;
				width: 100vw;
			}

			h2.title {
				margin-left: 20px;
				margin-top: 60px;
			}

			#module_scroller {
				display: block;
				margin: 20px 20px 0px 20px;
			}

			.module_wrap {
				width: 300px;
				height: 300px;
				display: -webkit-flex;
    			display: flex;
    			-webkit-justify-content: center;
    			justify-content: center;
    			float: right;
			}

			.module {
				margin: auto;
				height: 300px;
				opacity: 1;
				-webkit-filter: grayscale(0%);
    			filter: grayscale(0%);

			}

			.module_title {
				position: relative;
				color: #FFFFFF;
				font-size: 30px;
				text-decoration: none;
				display: block;
			}

			.module_desc {
				position: relative;
				color: #FFFFFF;
				font-size: 20px;
				text-decoration: none;
				padding-top: 20px;
				line-height: 1.1;
				display: block;
			}

			.module_container {
				padding-bottom: 50px;
				height: 300px;
				display:block;
			}

			#social_container {
				position: fixed;
				height: auto;
				background-color: #161616;
			}

			#social {
				margin: 15px 20px 10px auto;
			}

			#modulerack {
				display: none;
			}

			#contactbg {
		    	display: none;
			}

		}

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

			.module_wrap {
				width: 200px;
				height: 200px;
			}

			.module {
				margin: auto;
				height: 200px;

			}

		}


		@media screen and (max-width:400px) {
			.antumbra {
				font-size: 30px;
				color: #161616;
			}

			#menu {
				background-color: #FFFFFF;
				padding: 0px;
				margin: 0px;
				z-index: 1;
			}

			#menu_items {
				display: none;
				pointer-events: auto;
				position: relative;
				top:3px;
				
				color: #161616;
				padding: 16px 20px 20px 20px;
			}

			#logo {
				padding-left: 20px;
			}

			#modules_header {
				width: 100vw;
				text-align: left;
				border: 0px;
			}

			#modules_footer {
				width: 100vw;
				border: 0px;
			}

			#modules {
				z-index: 0;
			}

			h2.title {
				margin-left: 20px;
				margin-top: 60px;
			}

			#module_scroller {
				display: block;
				margin: 20px 20px 0px 20px;
			}

			.module_wrap {
				width: 150px;
				height: 150px;
				display: -webkit-flex;
    			display: flex;
    			-webkit-justify-content: center;
    			justify-content: center;
    			float: right;
			}

			.module {
				margin: auto;
				height: 150px;
				opacity: 1;
				-webkit-filter: grayscale(0%);
    			filter: grayscale(0%);

			}

			.module_title {
				position: relative;
				color: #FFFFFF;
				font-size: 30px;
				text-decoration: none;
			}

			.module_desc {
				position: relative;
				color: #FFFFFF;
				font-size: 20px;
				text-decoration: none;
				padding-top: 20px;
				line-height: 1.1;
			}

			.module_container {
				padding-bottom: 50px;
				height: 150px;
			}

			#headertitle {
				width: 80vw;
			}

			.headerletter {
				font-size: 80px;
			}

			#modulerack {
				display: none;
			}

			.ui-carousel-item {
				width: 100vw;
				height: 100vw;
			}

			#gallery {
				margin-bottom: 60px;
			}

			h4 {
				padding-top: 40px;
			}

			h3 {
				line-height: 1;
			}

			.input {
		    	width: 90%;
			}

		    .emailinput {
		    	max-width: 280px;
		    }

		}