/* SLIDER CSS by Kam Stewart copyright 2014; MIT license http://www.opensource.org/licenses/mit-license.html */
/* 		<section class="company" id="sectLeapfrog"><a name="sectLeapfrog"></a> 							100vw;		*/
/* 			<div class="scroller" id="slideshowLeapfrog"><!-- Contains the horizontal scrollbar --> 	300vw		*/
/* 				<div class="content"><!-- Very wide - all slides side-by-side -->						100vw	 	*/
/* 					<div class="page slide" id="lf1-pane">										 		94vw		*/

.page { /* debug */
	border: inherit;
 	/*border: 1px solid fuchsia; */
}

/* *************************************** Slider ******************************************** */

.scroller{
	position: absolute;
	overflow: hidden;  
	width: 100vw;
	height: 100vh;		
	}

.content { /* 16 (max number of slides); sorry horizontal scroll only atm */
	width: 1500vw;
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; 
	flex-flow: row nowrap;
	justify-content:flex-start;	
}

	/* 	Panels of content - the image */
.slide {
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; 
	width: 96vw;
	min-width: 96vw;
	margin-left: 2vw; /* 2vw; */
	margin-right: 2vw; /* 2vw; */
	}
.slideRow {
	flex-flow: row wrap;
	justify-content:center;
}

.slideCol/* , .Col */ {
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
	flex-flow: column nowrap;				
	width: 96vw;
	min-width: 96vw;
	margin-left: 2vw;
	margin-right: 2vw;
}

	/* ************* Left - Right Scroll Buttons */
.arrow {
	position: absolute;
	display: block;
	width: 32px;
	height: 60px;
	background: url(../img/gen/page-arrow.svg) no-repeat;
    text-decoration: none;border: 0;
	outline: none 0;
	cursor: pointer;
	opacity: .7;filter: alpha(opacity=70);zoom: 1; 	

	top: 50%;
/* 	margin-top: -2vh; */

	z-index: 3;
	line-height: 0;
	font-size: 0;
}
.arrow.left {     
	left: 2.4vw;
	-webkit-transform: scale(-1);-moz-transform: scale(-1);-o-transform: scale(-1);-ms-transform: scale(-1);transform: scale(-1);
	}
	
.arrow.right {
	right: 2.4vw;
	margin-left: -29px;
	}
.arrow:hover {
/* 	background-color: hsla(43,0%,0%,.2); */
	opacity: 1.0;
	/*filter: alpha(opacity=40);zoom: 1; 	*/
	outline: none 0;cursor: pointer;

	filter: drop-shadow(0 0 4px rgba(0, 38, 255, 0.98)); 	
}
.arrow:active, .arrow:focus{
/* 	background-color: hsla(43,50%,50%,.4); */
	opacity: .5;
	/*filter: alpha(opacity=100);zoom: 1; 	*/
	outline: none 0;
	/*filter: drop-shadow(0 0 6px rgb(0, 38, 255)); */

}



/* nav DOTS ==================================== */
nav.slideDots { 
	/*display: block; */
	position: relative;
	top: 94vh;
	height:20px; 
	width: 100vw;
/* 	margin-left: -100vw;  */
	margin-right: 0;

	-webkit-tap-highlight-color:transparent; 
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; 
	flex-flow: row wrap;
	justify-content:center;	
	align-items: flex-start;
	z-index:5; 
/* 	border: 1px solid gray; */
}

nav.slideDots .dotsWrapper { 
	position: absolute;
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; 
	flex-flow: row nowrap;
	justify-content:center; 
	top: 0; 
	width:400px; 
	/*margin-left: -200px; */
/* 	border: 1px solid silver; */
}

@media only screen and (min-device-width:320px) and (max-device-width:480px),
only screen and (min-device-width:481px) and (max-device-width:768px) {
	nav.slideDots { 
		/*top:auto; */
		bottom:0; 
	}
}

/* ipad */
@media only screen and (min-device-width:481px) and (max-device-width:768px) {
	nav.slideDots { bottom:16px; }
}

nav.slideDots ul { 
	position: relative; /* new */
	display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; 
	flex-flow: row wrap;
	justify-content:center;	
	padding: 0;	margin:0; width:100%; 
	list-style-type: none;
	
/* 	border: 1px solid fuchsia; */
}

nav.slideDots .dot a { -webkit-tap-highlight-color:rgba(0,0,0,.25); }

.dots .dot { 
	position:relative; 
	margin:0 8px; 
	width:12px; height:12px; 
/* 	border: 1px solid red; */
}

.dots .dot a { 
	position:absolute; top:1px; left:1px; width:8px; height:8px; /* 	text-indent: 100%;  */
	padding: 0;	
	outline:none; 
	white-space: nowrap; 
	overflow: hidden; 
	background-color:#666; 
	border:1px solid transparent;
	border-radius:50%;
	/*-webkit-transform:translateZ(0);*/
/*
  -webkit-transition:background-color 0.25s, border-color 0.25s;
     -moz-transition:background-color 0.25s, border-color 0.25s;
          transition:background-color 0.25s, border-color 0.25s;
*/
	        transition: background-color 1s, border-color 1s;
}
.dots .dot a:hover { background:#444;cursor: pointer; }
.dots .dot a.active { 
	top:0; left:0; 
	width:10px; height:10px; 
	/*border:1px solid #666; */
	border:1px solid transparent;
	background:transparent; 
}




@media only screen and (max-device-width:480px) {
	.slideDots { height:40px; }
	.dots .dot { margin:0 8px; width:20px; height:20px; }
	.dots .dot a { top:2px; left:2px; height:10px; width:10px; border:2px solid transparent; }
    .dots .dot a.active { height:16px; width:16px; }
}

nav .dark.dots .dot a { background:#222; }
nav .dark.dots .dot a.active { border-color:#222; background-color:transparent; }

nav .gray.dots .dot a { background:#808080; }
nav .gray.dots .dot a.active { border-color:#808080; background-color:transparent; }

nav .light.dots .dot a { background:#eee; }
nav .light.dots .dot a.active { border-color:#eee; background-color:transparent; }


/* @media only screen and (-webkit-min-device-pixel-ratio: 2) {}  */