/* CSS Document */

body, html{
	margin: 0;
	padding-top: 0.5%;
	font-family: sans-serif;
	font-size:12px;
	text-transform: uppercase;
	text-align: center;
	color: black;
	line-height:18px;
	letter-spacing: 0.2px;
	}
	
a {
	color: black;
	text-decoration: none;
	}

a:hover {
	text-decoration: none;
	}

a.active {
	text-decoration: none;
	}

a:hover.active {
	text-decoration: underline;
	}

#title{
}

#alt-caption{
	text-align: center;
	position: absolute;
	bottom: 1%;
	left:0;
	right:0;
	z-index: 1000;
	color: lightgrey;
    text-transform: none;
	font-size: 10px;
	}

#navb{
	text-align: left;
	position: absolute;
	left:4%;
	bottom: 1%;
	top:0;
	z-index: 1000;
	text-transform: uppercase;
	}
	
#navn{
	text-align: left;
	position: absolute;
	left:0;
	bottom: 1%;
	top:0%;
	z-index: 1000;
	text-transform: uppercase;
	}
	
#slide {
  bottom:1%;
  font-size:10px;
  position:absolute;
  left:4%;
  text-align:right;
  z-index:1000;
  text-decoration: ;
    }


.text{
	text-align: center;
	position: absolute;
	top: 30%;
	bottom: 0;
	left: 0;
	right:0;
	z-index: 1000;
	color: black;
	text-transform: none;
}


#info{
	text-align: right;
	position: absolute;
	bottom: 1%;
	right: 4%;
	z-index: 1000;
	font-size: 10px;
	}
	
#back{
	text-align: left;
	position: absolute;
	bottom: 1%;
	left: 4%;
	z-index: 1000;
	color: grey;
	font-size: 12px;
	}	


#wrapper{
    position: absolute;
    width: 90%;
    height: 90%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}


.document {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document img { 
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
    height: auto !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	}


	
	
/* ----------- PORTRAIT ----------- */

@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px)
  	and (orientation: portrait) {
  
	
#info{
	text-align: right;
	position: absolute;
	bottom: 1%;
	right: 4%;
	left:0;
	}
	

#wrapper{
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 15%;
    margin: auto;
	}
        
#slide {
  display: none;
    }

.document img { 
	position: absolute;
	max-width: 99%;
	max-height: 99%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	}

        
	
}



/* ----------- PORTRAIT IPAD ----------- */

@media only screen 
  and (min-width: 736px) 
  and (max-width: 768px)
  	and (orientation: portrait) {
  		

#wrapper{
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document {
    position: absolute;
    width: auto;
    height: 70%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80px;
    margin: auto;
	}

.document img { 
	position: absolute;
	max-width: 99%;
	max-height: 99%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	}


}

	

/* ----------- LANDSCAPE ----------- */

@media all and (min-width: 0px)
 		and (max-width: 736px)
		and (orientation: landscape) {
			

#title{
display: none;
}

#info {
	display: none;
	}
	
#alt-caption{
	display: none;
	}

#slide {
 display: none;
    }
	

#wrapper{
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
	}

.document {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document img { 
	position: absolute;
	max-width: 99%;
	max-height: 99%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 1px;
	margin: auto;
	cursor: pointer;
	}

	
}


/* ----------- LANDSCAPE IPAD ----------- */

@media all and (min-device-width: 736px)
 		and (max-device-width: 1130px)
		and (orientation: landscape) {
			

	
#title{
display: none;
}

#info{
	display: none;
	}
	
#alt-caption{
	display: none;
	}
	
#slide {
 display: none;
    }



#wrapper{
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	}

.document img { 
	position: absolute;
	max-width: 99%;
	max-height: 99%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	}
	

}