/* ------------------------------------------------------------
screen.css

Inouk Demers

# : id selector, targets single specific element within a unique id
	used for something that will appear once, eg sidebar, banner
. is a class selector, targets multiple elements with a particular class
	used where style is repeated, eg special header for error messages h1.error
	for any conflicts btw id & class selectors, id overrides because it is more specific

------------------------------------------------------------ */


/* insert @font-face info here as well as css reset */


@font-face {
	font-family: 'Cala-Light';
	src: url('../webfonts/hoftype_-_cala-light-webfont.eot');
	src: url('../webfonts/hoftype_-_cala-light-webfont.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/hoftype_-_cala-light-webfont.svg#Cala-Light') format('svg');	
	url('../webfonts/hoftype_-_cala-light-webfont.woff') format('woff'),
	url('../webfonts/hoftype_-_cala-light-webfont.ttf') format('truetype');
	/* normally svg is placed after truetype */   
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke: 1px transparent;
	text-rendering:optimizeLegibility;
}


/* @media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    
	font-family: 'Cala-Light';
    
	src: url('../webfonts/hoftype_-_cala-light-webfont.svg#Cala-Light') format('svg');
    
} */

@font-face {
    
	font-family: 'glovis Italic';
    
	src: url('../webfonts/glovis-webfont.eot');
    
	src: url('../webfonts/glovis-webfont.eot?#iefix') format('embedded-opentype'),

	url('../webfonts/glovis-webfont.svg#glovisitalic') format('svg'),
    	
	url('../webfonts/glovis-webfont.woff') format('woff'),
         
	url('../webfonts/glovis-webfont.ttf') format('truetype');         
	/* normally svg is placed after truetype */   
	font-weight: normal;
	/* font-style: normal; */
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke: 1px transparent;
	text-rendering:optimizeLegibility;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    
	font-family: 'glovis Italic';
    
	src: url('../webfonts/glovis-webfont.svg#glovisitalic') format('svg');
    
}

}

@font-face {
    
	font-family: 'InconsolataMedium';
    
	src: url('../webfonts/inconsolata-webfont.eot');
    
	src: url('../webfonts/inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
     	
	url('../webfonts/inconsolata-webfont.svg#InconsolataMedium') format('svg'),     	
	url('../webfonts/inconsolata-webfont.woff') format('woff'),
         
	url('../webfonts/inconsolata-webfont.ttf') format('truetype');         
	/* normally svg is placed after truetype */   
	/* font-weight: lighter;
	font-style: normal; */
	/* -webkit-font-smoothing: antialiased; */
	-webkit-text-stroke: 1px transparent;
	text-rendering:optimizeLegibility;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    
	font-family: 'InconsolataMedium';
    
	src: url('../webfonts/inconsolata-webfont.svg#InconsolataMedium') format('svg');
    
}}

@font-face {
    
	font-family: 'eurostileregular';
    
	src: url('../webfonts/eurosti-webfont.eot');
    
	src: url('../webfonts/eurosti-webfont.eot?#iefix') format('embedded-opentype'),
 url('../webfonts/eurosti-webfont.woff') format('woff'),
 url('../webfonts/eurosti-webfont.ttf') format('truetype'),
  url('../webfonts/eurosti-webfont.svg#eurostileregular') format('svg');
 
	font-weight: normal;
    
	font-style: normal;
	

-webkit-font-smoothing: antialiased;
	-webkit-text-stroke: 1px transparent;
	text-rendering:optimizeLegibility;
}

/* makeshift css reset */  

{  
    margin: 0;  
    padding: 0;  
}  

/* tell the browser to render HTML 5 elements as block */  

footer, aside, nav, article {  
	display: block;  
} 

/* block-level elements */

html {

}

body {
	margin: 0 auto;
	padding: 0 20px 20px 20px;
	font: 16px Inconsolata, sans-serif;
	color: #323232;
	background-repeat: repeat-y;
	background-attachment: fixed;
	background: url('../images/background textures/darkgrey.jpg');
	-ms-filter: brightness(1.3);
	background-size: cover;
	-webkit-background-size: cover;
}

.section {
	/* font-family: InconsolataMedium, sans-serif; */
	font-size: 15px;
	width: 90%;
	color: #222;
	text-align: justify;
	text-justify: newspaper;
	margin: 0 auto;
}

.aside {
	/* font-family: InconsolataMedium, sans-serif; */
	font-size: 15px;
	color: #222;
	width: 90%;
	text-align: left;
	margin: 0 auto;
	background-color: #dedede;
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	-moz-box-shadow: 2px 4px 6px -2 #ccc;
	-webkit-box-shadow: 2px 4px 6px -2px #ccc;
	box-shadow: 2px 4px 6px -2px #ccc;
	
}

h1 {
	position: relative;
	font-family: "eurostileregular", sans-serif; 
	/* or Heimat Grotesk, Orator Std, Sina-Regular */
	-ms-font: "eurostileregular", sans-serif;
	font-size: 70px; 
	font-weight: lighter;
	text-align: center;
	letter-spacing: 4px;
	vertical-align: top;
	color: #323232; 
}

h2 {
	position: relative;
	float: left;
	text-align: left;
	font-family: "glovis Italic", serif;
	-ms-font: "Cala-Light";
	font-size: 20px;
	font-weight: lighter; /* this corrects font in IE */
	font-style: normal;
	color: #464646;
	
}

table {
	/* font-family: "InconsolataMedium", sans-serif;
	font-size: 15px; */
}

form, object {
	display: inline;
}

figure {
	text-align: center;
}

figcaption {
	/* font-family: "InconsolataMedium", sans-serif; */
	font-size: 14px;
	color: #333;
}

mark {
	background-color: #5483AA;
	padding: 3px 13px 4px 7px;
	border-radius: 0px 10px 10px 0px;
	color: #E7E7E7;
}

img {
	border: 0px;
}


/* ------------------- divs --------------------- */

#background {
	position: absolute;
	padding: 20px;
	width: 800px;
	text-align: left;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 0 0 20px 20px;
	-moz-border-radius: 0 0 20px 20px;
	behavior: url(PIE.htc);
	z-index: 1;
}

.content-wrap {
	display: table;
	margin: auto;
	width: 100%;
}

.leftcolumn, .rightcolumn {
	display: table-column;
	width: 46%;
	margin: 0 10px 0 0px;
}

.leftcolumn {
	float: left;
}

.rightcolumn {
	float: right;
}

.leftcolumn table, .rightcolumn table {
	width: 100%;
}

.contentbox {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 10px 0px 10px;
	border-radius: 0 20px 20px 0px;
	-moz-border-radius: 0 20px 20px 0px;
	-khtml-border-radius: 0 20px 20px 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #d2d2d2;
}

.right {
	/* used for payment bag */
	font-family: InconsolataMedium, sans-serif;
	font-size: 16px;
	float: right;
}

.youtube-player {
	margin: 0 auto;
	display: block;
	z-index: 2;
}

.circle2 {
	background: #474747;
	position: relative;
	display: table-cell;
	width: 42px;
	height: 20px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	color: #fff;
	/* font-family: "Cala-Light", serif; */
}

.innerTEXT {
	position: relative;
	top:1px;
	left:5px;
}



/* ------------------------- links -------------------------------- */

a:link {
	text-decoration:none;
	padding: 0 4px 0 4px;
	color:#d3d3d3;
}

a:visited {
	text-decoration:none;
	padding: 0 4px 0 4px;
	color:#d3d3d3;
}

a:hover {
	/* text-decoration:none;
	padding: 0 4px 0 4px;
	color:#d3d3d3; */
}

a:active {
	text-decoration:none;
	color:#d3d3d3;
}

a.index {
	text-decoration:none;
	padding: 0 2px 0 2px;
	color: #4D7391;
}

a.index: visited {
	text-decoration:none;
	border-bottom:1px dotted;
	padding: 0 2px 0 2px;
	color: #767676;
}

a.index:hover {
	text-decoration:none;
	/* border-bottom: 0px; */
	color: #222;
}

/*  fancybox  */

/*! fancyBox v2.0.5 fancyapps.com | fancyapps.com/fancybox/#license */


.fancybox-tmp iframe, .fancybox-tmp object {
	
	vertical-align: top;
	
	padding: 0;
	
	margin: 0;
}



.fancybox-wrap {
	
	position: absolute;
	
	top: 0;
	
	left: 0;
	
	z-index: 1002;
}



.fancybox-outer {
	
	position: relative;
	
	padding: 0;
	
	margin: 0;
	
	background: #f9f9f9;
	
	color: #444;
	
	text-shadow: none;
	
	-webkit-border-radius: 4px;
	   
	-moz-border-radius: 4px;
			
	border-radius: 4px;
}



.fancybox-opened {
	
	z-index: 1003;	
}



.fancybox-opened .fancybox-outer {
	
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   
	-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}



.fancybox-inner {
	
	width: 100%;
	
	height: 100%;
	
	padding: 0;
	
	margin: 0;
	
	position: relative;
	
	outline: none;
	
	overflow: hidden;
}



.fancybox-error {
	
	color: #444;
    
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    
	margin: 0;
    
	padding: 10px;
}



.fancybox-image, .fancybox-iframe {
	
	display: block;
	
	width: 100%;
	
	height: 100%;
	
	border: 0;
	
	padding: 0;
	
	margin: 0;
	
	vertical-align: top;
}



.fancybox-image {
	
	max-width: 100%;
	
	max-height: 100%;
}



#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	
	background-image: url('fancybox_sprite.png');
}



#fancybox-loading {
	
	position: fixed;
	
	top: 50%;
	
	left: 50%;
	
	margin-top: -22px;
	
	margin-left: -22px;
	
	background-position: 0 -108px;
	
	opacity: 0.8;
	
	cursor: pointer;
	
	z-index: 1010;
}



#fancybox-loading div {
	
	width: 44px;
		
	height: 44px;
	
	background: url('fancybox_loading.gif') center center no-repeat;
}



.fancybox-close {
	
	position: absolute;
	
	top: -18px;
	
	right: -18px;
	
	width: 36px;
		height: 36px;
	
	cursor: pointer;
	
	z-index: 1004;
}



.fancybox-nav {
	
	position: absolute;
	
	top: 0;
	
	width: 40%;
	
	height: 100%;
	
	cursor: pointer;
	
	background: transparent url('blank.gif'); /* helps IE */
	
	z-index: 1003;
}



.fancybox-prev {
	
	left: 0;	
}



.fancybox-next {
	
	right: 0;
}



.fancybox-nav span {
	
	position: absolute;
	
	top: 50%;
		width: 36px;
	
	height: 36px;
	
	margin-top: -18px;
	
	cursor: pointer;
	
	z-index: 1003;
		
	visibility: hidden;
}



.fancybox-prev span {
	
	left: 20px;
	
	background-position: 0 -36px;
}



.fancybox-next span {
	
	right: 20px;
	
	background-position: 0 -72px;
}



.fancybox-nav:hover span {
	
	visibility: visible;
}



.fancybox-tmp {
	
	position: absolute;
	
	top: -9999px;
		left: -9999px;
	
	padding: 0;
	
	overflow: visible;
	
	visibility: hidden;
}



/* Overlay helper, this controls the black background */



#fancybox-overlay {
	
	/* visibility: hidden; */
	position: fixed;
	
	top: 0;
	left: 0;

	right: 0;
	overflow: hidden;

	display: none;
	
	z-index: 1001;
	
	background: #000;}



/* Title helper */



.fancybox-title {
		
	visibility: hidden;	
	
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	
	position: relative;
	
	text-shadow: none;
	
	z-index: 1005;
}



.fancybox-opened .fancybox-title {
	
	visibility: visible;
}



.fancybox-title-float-wrap {
	
	position: absolute;
	
	bottom: 0;
	
	right: 50%;
	
	margin-bottom: -35px;
	
	z-index: 1003;
	
	text-align: center;
}



.fancybox-title-float-wrap .child {
	
	display: inline-block;
	
	margin-right: -100%;
	
	padding: 2px 20px;
	
	background: transparent; 

/* Fallback for web browsers that doesn't support RGBa */
	
	background: rgba(0, 0, 0, 0.8);
	
	-webkit-border-radius: 15px;
	   
	-moz-border-radius: 15px;
			
	border-radius: 15px;
	
	text-shadow: 0 1px 2px #222;
	
	color: #FFF;
	
	font-weight: bold;
	
	line-height: 24px;
	
	white-space: nowrap;
}



.fancybox-title-outside-wrap {
	
	position: relative;
	
	margin-top: 10px;
	
	color: #fff;
}



.fancybox-title-inside-wrap {
	
	margin-top: 10px;
}



.fancybox-title-over-wrap {
	
	position: absolute;
	
	bottom: 0;
	
	left: 0;	
	
	color: #fff;
	
	padding: 10px;
		
	background: #000;
	background: rgba(0, 0, 0, .8);
}


/* -------------------------------- MEDIA QUERIES ----------------- */

/* create link to resize browser window */
/* max-width is width of the browser window */
/* max-device-width is width of the actual device screen */

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

	h1 {
	font-size: 10px;
	}
	body {
	width: 100%;
	}
	#background {
	width: 100%;
	}
	.aside, .section, .leftcolumn, .rightcolumn {
	width: 100%;
	}
	.contentbox {
	width: 85%;
	}
}

/* iPhone 5 only */
@media only screen
and (min-width: 560px)
and (max-width: 1136px)
and (min-device-width: 560px) 
and (max-device-width: 1136px) 
and (-webkit-min-device-pixel-ratio: 2) {

	h1 {
	font-size: 60px;
	}
	body {
	width: 100%;
	}
	#background {
	width: 100%;
	}
	.aside, .section, .leftcolumn, .rightcolumn {
	width: 100%;
	}
	.contentbox {
	width: 85%;
	}
}

/* Desktops and laptops  */
@media only screen 
and (min-width : 1224px)
and (min-device-width: 1224px)
and (max-device-width: 1536px) 
{
	h1 {
	font-size: 80px;
	}
}

/* iPads (portrait & landscape) */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	h1 {
	font-size: 70px;
	}
	#background {
	width: 800px;
	}
	.leftcolumn, .rightcolumn{
	width: 47%;
	}
}

@media only screen 
and (max-width : 768px),
and (max-device-width : 1024px){
	h1 {
	font-size: 44px;
	}
	h2 {
	font-size: 20px;
	}
	#background {
	width: 90%;
	}
	.aside, .section, .leftcolumn, .rightcolumn {
	width: 100%;
	}
	.contentbox {
	width: 85%;
	}
}