/* CSS Reset */
    #element { margin:0; padding:0; font-size:100%; line-height:1; }
     
    /* #element rules: */
    #element { margin:5px 0 10px; font-size:13px; line-height:1.5; 

}

@font-face{ 
	font-family: 'GandhiSans';
	src: url('GandhiSans.eot');
	src: url('WebGandhiSansFont.eot?#iefix') format('embedded-opentype'),
	     url('GandhiSans.woff') format('woff'),
	     url('GandhiSans.ttf') format('truetype'),
	     url('GandhiSans.svg#webfont') format('svg');
}

@media all and (orientation:landscape) {
	.in-slide-content {
	height:100%;
	min-width:45vh;
	line-height: 100%;

	right: -40px;
	margin:40px;
	padding:3%;
	padding-right: 50px;
	padding-left: 60px;


	float: right;
	text-align: justify-all;
	border-left-width: 50px;
	border-left-style: solid;
	border-left-color: white;
   }

   .grad-land, .grad-port {
   	bottom: 0;
   	right: 0;
   }

 

div.mc-image {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-size: auto 100%;}

	#arrowcont {
		font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
		font-size: 1.2vw;
		padding-right: 30%; /*vertical alignment*/}

		#titletext {
		height: 76.7vh;
		bottom: 0;
		position: absolute;
		right: 0;
		width: 100%;
		pointer-events: none; /*enables clicking through this element on underlying links*/
		z-index: -11111;
		background-color: transparent;
	}

		.landscapetitle {
	pointer-events: auto;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	font-size: 2vw;
	top: 56vh; /*vertical positioning*/
	z-index: 100000000;
	position: absolute;
	text-align: left;
	right: 50px;
	width: 41vh; /*horizontal positioning*/
	pointer-events: auto;
	display: block;
}

	#menulayer {
		pointer-events:auto; 
		padding-left: 66%;}

	a.js-offcanvas-trigger {visibility: hidden;
		}

	iframe {
	display: block;
	width: 100%;
	height: 95%;
	background-color: white;
	}

	

.explore {
	margin-bottom:2000px;
	pointer-events: auto;
			}



			#explorer {
		left: 4.6em;
		position: absolute;
		right: 0;
		width: 50px;
		height: 50px;
		top: 50px;
		pointer-events: none; /*enables clicking through this element on underlying links*/
		z-index: 73297387837974923;
		mix-blend-mode: difference;
  	text-decoration: none !important;
			
	}

	.exploremenu {
		font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
		color: white;
		text-align: justify;
		width: 50px;
		font-size: 40px;
		line-height: 0.25em;
		font-weight:normal;
		padding-bottom: 0.5em;
		-webkit-font-smoothing:antialiased;
		text-decoration: none !important;
			}


.c-offcanvas {
  /*mix-blend-mode: lighten; /*xerox effect > overlay; eroded > hard-light. was lighten*/
  }}

@media all and (orientation:portrait) {
	.in-slide-content {
	width:100%;
	bottom:0;
	left: -40px;
	margin:40px;
	padding:3%;
	padding-left: 55px;
	height:33.34vh;
	border-right-width: 1000px;
	border-right-style: solid;
	border-right-color: white;
	margin-right: 200px;
	padding-right: 0px;
	text-align: justify-all;

}
 .grad-land, .grad-port {
   	/*bottom: 60%;*/
   	top: 0;
   	left: 0;
   	 transform: rotate(180deg); 
   }

div.mc-image {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-size:100% auto;}
	

	.blimover {
    width: 100% !important;
    height: 50% !important;
    z-index: 1000 !important;
    position: absolute !important;
    bottom: 0% !important;
    left: 0 !important;
   
}
	

#arrowcont {
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size: 1.2vw;
	max-height: 33.34vh;

	}

			.landscapetitle {
	pointer-events: auto;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	font-size: 2vw;
	top: 5vh; /*vertical positioning*/
	z-index: 100000000;
	position: absolute;
	text-align: right;

	right: 48px;
	width: 41vh;
}

	#titletext {
	visibility: visible;
	width:10%;
	line-height: 1em; 
	height: auto;
}

	a.js-offcanvas-trigger-left {visibility: hidden;
		}

iframe {
	display: block;
	width: 95%;
	height: 90%;
pointer-events: auto;}

.explore {
	pointer-events: auto;
			}



			#explorer {
		right: 3em;
		/*float: right;*/
		position: fixed;
		width: 50px;
		height: 100px;
		bottom: -10px;
		pointer-events: none; /*enables clicking through this element on underlying links*/
		z-index: 73297387837974923;
		mix-blend-mode: difference;
  	text-decoration: none !important;
			
	}

	.exploremenu {
		font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
		text-align: justify-all;
		color: white;
		width: 50px;
		font-size: 4.5vw;
		line-height: 0.25em;
		font-weight:normal;
		-webkit-font-smoothing:antialiased;
		text-decoration: none !important;
			}

 .c-offcanvas {
  /*mix-blend-mode: overlay; /*xerox effect > overlay; eroded > hard-light. was lighten*/
}

	}



			/* I wanted to center my loader */
			#cycle-loader {
				height:32px;
				left:50%;
				margin:-8px 0 0 -8px;
				position:absolute;
				top:50%;
				width:32px;
				z-index:999;
			}
			
			/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
			#maximage {
	display:none;/* Only use this if you fade it in again after the images load */
	position:fixed !important;
	z-index: 0;
	/*background-color: gray;*/
	overflow: visible;
			}
			
			/*Set my gradient above all images*/
			#gradient {
				left:0;
				height:100%;
				position:absolute;
				top:0;
				width:100%;
				z-index:999;
			}
			
			/*Set my logo in bottom left*/
			#logo {
				bottom:22px;
				font-weight: normal;
				z-index:1000;
			}
			#logo img {
				width:100%;
			}

		#arrowcont {
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size: 1.2vw;
	position: fixed;
	right: 0.5em; /*distance between element and outer right. was -0.2em*/
	z-index:1000000000 !important;
	text-decoration: none;
	text-align: left;
	text-indent: 50%;
	font-style: normal;
	mix-blend-mode: exclusion;
	transform-origin:97% 0%; /* set to the upper-left corner */
	-ms-transform: rotate(-90deg); /* IE 9 */
	-ms-transform-origin:97% 0%; /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Safari and Chrome */
	-webkit-transform-origin:97% 0%;
	border-bottom-width: 100px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
}

	#arrowcont:hover {
	/*background-color: white;
	overflow: hidden !important;*/
	/*border-bottom-width: 50px;*/
	/*border-bottom-style: solid;
	border-bottom-color: white;*/
}


		#arrow_left, #arrow_right {
				/*padding-left: 5px;*/
				font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
				font-size:1.2vw;
				color: gray; 
				font-weight:normal;
				z-index:1000000000 !important;
				text-decoration: none;
				mix-blend-mode: exclusion;
				margin-right: 33vh;

			}
			#arrow_left {
				/*right:86px;*/
				visibility: hidden;
			}
			
			#arrow_left:hover, #arrow_right:hover {
				/*bottom:29px;*/
				text-decoration: overline;
				mix-blend-mode: exclusion; 
			}
			#arrow_left:active, #arrow_right:active {
				/*bottom:28px;*/
				text-decoration: overline;
				mix-blend-mode: exclusion;
			}
		
			a {color:gray;text-decoration:underline; }
			a:hover {text-decoration:none;}
			
			.in-slide-content {
	color:gray; /*as #ddd*/
	/*transition: background 0.5s linear;*/
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size:1.2vw;
	font-weight:normal;
	text-align: justify-all;
	
	position:relative;
	width:25%;
	z-index:99999999 !important; /* Show above .gradient */
	/*text-shadow: 0 1px 0 #fff;*/
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-font-smoothing:antialiased;
	max-height: 100%; /* this & next line are IMPORTANT!*/
	overflow-y: auto;
	scrollbar-width: none;
	pointer-events: auto;
	background-color: white; /*this & next lines are for the white box*/
	box-shadow: 0 -40px 0 white;
	/*border-bottom: 20px solid white;
	padding-left: 120px;
	border-right-color: white;
	border-right-style: solid;
	border-right-width: 50px;*/
	background-size:cover;
	overflow: hidden;
			}


a[href*="://"]{
	text-decoration: underline;
}

a[href*="://"]:hover{
	/*text-decoration: underline;*/
}

a[href*="://"]::after {
	content : "↑";
	margin: 0 0 0 0.3em;
	font-size: 0.6vw;
	display:inline-block;
	line-break: avoid;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: super;
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    line-height:100%;
}


/*.in-slide-content:hover { 
  background-color: white;
 color: gray;
 box-shadow: 0 -40px 0 white;
 border-bottom: 20px solid white;
 padding-left: 120px;
 
  
  /*color: #fff }*/

.in-slide-content:hover a{
  /*color: gray;*/
 
} 

				.in-slide-menu {
	color: gray; 
	float:left;
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size:1.2vw;
	font-weight:normal;
	left:0;
	margin:40px;
	padding:20px;
	position:relative;
	bottom:0;
	width:33%;
	z-index:999999999 !important; /* Show above .gradient */
	/*text-shadow: 0 1px 0 #fff;*/
	pointer-events: auto;
	-webkit-font-smoothing:antialiased;
	/*mix-blend-mode: exclusion; /* was: difference*/
			}


			.light-text {color:grey;}
			.smaller-text {
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size:1.2vw;
	line-height: 1.3vw;
	font-weight:normal;
	text-align: justify;
}

			.arrow_yes {
  				visibility: visible;
  				font-weight: normal;
  				font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
				font-size:1.2vw;
				color: gray; 
				z-index:1000;
				text-decoration: none;
				mix-blend-mode: exclusion;}

  			.arrow_no {
  				visibility: visible;
  				font-weight: normal;
  				font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
				font-size:1.2vw;
				color: gray; 
				z-index:1000;
				text-decoration: none;
				mix-blend-mode: exclusion;}

  			* .hanging-indent {
  			padding-left: 2.5vw;
  			text-indent: 0vw;
}

			* .hanging-dropcap {
  			font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
			position: absolute;
			text-align: right;
  			font-weight: normal;
  			left: 3vw;
  			font-size: 1.2vw;
  			direction: rtl;}

  		

#titletext {
	color: gray;
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size:2.4vw; /*was 1.2vw*/
	text-align: justify-all;
	z-index:999999;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-font-smoothing:antialiased;
				}	


	#menulayer {
	color: gray;
	float:left;
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size:1.2vw; /*was 1.2vw*/
	vertical-align: bottom;
				}

		#emdash, #emdash2, #emdash3, #emdash4, #emdash5, #emdash6, #emdash7, #emdash8, #emdash9, #emdash10, #emdash11, #emdash12, #emdash13, #emdash14, #emdash15, #emdash16, #emdash17, #emdash18, #emdash19, #emdash20, #emdash21, #emdash22, #emdash23, #emdash24, #emdash25          {
				color: gray; 
				/*transition: background 0.5s linear;*/
				float:right;
				font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
				font-size:3vw;
				letter-spacing: -0.8vw;
				font-weight: 300;
				text-align: right;
				right: 0.1em;
				margin:40px;
				padding:0%;
				padding-right: 10px;
				position:absolute;
				top:-23px;
				width:30%;
				z-index:10000000000; 
				-webkit-hyphens: auto;
  				-ms-hyphens: auto;
  				hyphens: auto;
				-webkit-font-smoothing:antialiased;
				mix-blend-mode: exclusion; /* screen */}

	

	
p.footnote {
	font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
	font-size: 1vw;
	text-align: left;
	margin-left: 2.7vw;
	margin-top: 2vw;
	padding-left: 0vw;}




/*iFrame container*/
iframe {
	display: block;
	width: 97%;
	height: 95%;
	overflow: hidden;
	
}
/*end iFrame container*/

.js-offcanvas-trigger-left, .js-offcanvas-trigger {
font-family:'GandhiSans', 'Helvetica Neue', helvetica, Verdana, Geneva, sans-serif;
font-size: 1.2vw;
z-index: 99999;
text-decoration: none;
color: gray;
-webkit-font-smoothing:antialiased;}

.js-offcanvas-trigger-left:hover, .js-offcanvas-trigger:hover {
text-decoration: overline;}

.grad-land {
  background: linear-gradient(to left, 
      rgb(128,128,128) 25%, rgb(192,192,192) 25%, rgb(169,169,169) 50%, rgb(190,190,190) 50%, rgb(211,211,211) 75%, rgb(245,245,245) 75% ); 
  width: 3vw;
  height: 2vw;
  position: absolute;
  z-index: 743856456456384;}

  .grad-land:hover, .grad-port:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          transform-origin: center center;
}

.grad-port {
  background: linear-gradient(to top, 
      rgb(128,128,128) 25%, rgb(192,192,192) 25%, rgb(169,169,169) 50%, rgb(190,190,190) 50%, rgb(211,211,211) 75%, rgb(245,245,245) 75% );
  width: 2vw;
  height: 3vw;
  position: absolute;
  z-index: 743856456456384;
}


body { /*overflow-y: auto*/;
	overflow: hidden !important;
	font-kerning: normal;
}
	
	div.grid {
	background-image: url(../../iPadGridThirds.png);
	background-repeat: repeat;
	background-position: 0px 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100000000;
	position: absolute;
	visibility: hidden;
	}


.blimover {
    width: 70% !important;
    height: 70% !important;
    z-index: 1000 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
   
}
	

			.cryptedmail:after {
  			content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
  			hyphens: none; }

  			.cryptedvoip:after {
  			content: "@" attr(data-tld);
  			hyphens: none; }