@charset "UTF-8";
/* CSS Document */

/*****Basic Elements*****/  
/*Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.*/  

body {
	background: url(../res/img/bg.jpg) center center no-repeat fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family:Arial, Helvetica, sans-serif;
}
  
/*****Generic Classes*****/  
/*Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently*/
  

/*****Basic Layout*****/  
/*Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site*/
  

  
/*****Header*****/  
/*Define all elements in the header*/
  
#logo {
	height: auto;
    left: 50%;
    margin-left: -565px;
    margin-top: -460px;
    position: absolute;
    width: 122px;
    top:50%;
}
  
/*****Content*****/  
/*Define all elements in the content area*/

#pdfDownload {
	top: 45px;
	font-size: 12px;
	z-index: 1;
    text-shadow: 1px 1px 1px rgba(0,0,0,1);
    left: 50%;
    margin-left: 430px;
    margin-top: -460px;
    position: absolute;
    width: 150px;
    top:50%;
}

#pdfDownload img {
	width: 32px;
	height: auto;
}

#pdfDownload a {
	color: rgb(255,255,255);
}

.magazine-viewport .next-button, .magazine-viewport .previous-button {
	height: 800px;
}

.magazine-viewport .previous-button-hover, .magazine-viewport .previous-button-down {
	background-position:-4px 384px;
}

.magazine-viewport .next-button-hover, .magazine-viewport .next-button-down {
	background-position:-38px 384px;
}
  
.thumbnails .thumb-hover span {
	color: rgb(255,255,255);
}
  
/*****Footer*****/  
/*Define all elements in the footer*/
  

  
/*****Etc*****/  
/*Continue to define the other sections one by one*/
  
@media screen and (max-height: 967px) {
	#logo {
		display: none !important;
	}
	#pdfDownload {
		font-size: 10px;
		width: 30px;
		padding-right: 5px;
		position: fixed;
		top: 45px;
		margin-left: -60px;;
		margin-top: 0;
		width: 30px;
		left: 100%;
	}
}

@media only screen and (max-width: 1024px) and (orientation : landscape) {
	.thumbnails {
		display: none;
	}
}


@media screen and (max-width: 768px) {
	#logo {
		display: none !important;
	}
	.thumbnails > div {
		position: absolute !important;
		bottom: 15px !important;
		width: 100% !important;
	}
	.thumbnails img {
		width: 24px !important;
		height: auto;
	}	
}