body {
	background: #afafaf;
	font-family: Courier New;
}
a {
	color:#000000;
}
ul.index {
	color: #ffffff;
	list-style-type: none;
	margin-bottom: 1px;
}
ul.index.right {
	float:right
}
ul.index li {
    display: inline;
    margin-left: 50px;
	padding:0px;
	font-size:30px;
	font-weight:normal;
}
ul.index li:before {
	 content: "█";
	 font-size: 16px;
     vertical-align: calc(5px);
}
ul.index li:first-child:before {
	 content: "";
 }
ul.index li:first-child { 
	margin-left: -40px;
}

ul.nav {
	color: #000000;
	list-style-type: none;
	float: right;
}
ul.nav li {
    display: inline;
    margin-left: 20px;
	padding:0px;
	
}
ul.nav li a {
	font-size:20px;
	font-weight:bold;
	color:#000000;
	text-decoration:none;
}

ul.menu {
	color: #000000;
	list-style-type: none;
	float: left;
	margin-top: 100px;
	color: #ffffff;
	font-size: 20px;
	margin-top: 40px;
}
ul.menu li a, .fotolayer a, ul.index a {
	color:#ffffff;
	text-decoration:none;
}
ul.menu li a.active {
	color:#000;
}
/* ------------- */


.box {
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
	width: 1240px;
}
.box.index {
	margin-top:-100px;
	
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

.box-header {
	float:left;
	margin-left:280px;
}
.box-nav {
	float:left;
	width:280px;
}
.box-content {
	float:left;
	background:#ffffff;
	color:#000000;
	margin-top: 40px;
	width:calc(100% - 290px);
	min-height: 300px;
}
.nobg {
	background:none;
}
.content {
	margin:60px;
	font-family: arial;
}
.margin-top {
	margin-top:25px;
}
.margin-bottom {
	margin-bottom:25px;
}

/* img div */
.responsive-container {
    position: relative;
    width: 23%;
	float:left;
	background: #000;
    border: 6px solid #afafaf;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

.background {
     background: #000000;
	 position:fixed;
	 width:100%;
	 height:100%;
	 top:0px;
	 left:0px;
	 z-idnex:10;
	 opacity: 0.8; 
}
.fotolayer { 
    position: fixed;
     top: 50%;
     left: 50%;
     /* bring your own prefixes */
     transform: translate(-50%, -50%);
	/*
	z-idnex:20;
	position: fixed;
	right: 0;
	left: 0;
	top: 30px;
	margin-right: auto;
	margin-left: auto;
	width: -moz-fit-content;
	    width: -webkit-fit-content;
	    width: -ms-fit-content;
	    width: -o-fit-content;
	    width: fit-content;
	*/
}
.fotolayer img { 
	/*border:20px solid #000;
	max-width:100%;
	height:auto;*/
	
}

/* Medium Devices, Desktops */
@media only screen and (max-height : 1080px) {
	#bigfoto {
		    height: 600px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-height : 1081px) {

}


#title {
	color: #fff;
	text-align:center;
}
.none {
	display:none;
}