/*
	font-family: "utopia-std",sans-serif;
	font-family: "nimbus-sans",sans-serif;	
*/
@media only screen and (min-width : 768px), only screen and (min-height : 815px) {

body { padding: 0 0 0 55px; transition: padding .3s; background-color: #000; font-family: "nimbus-sans",sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	body.show-header { padding-top: 155px; }

#header { position: fixed; top: 0px; left: 0px; z-index: 98; width: 100%; background-color: #fff; height: 0px; transition: height .3s; overflow: hidden; padding-left: 55px; } 
	body.show-header #header { height: 155px; }

#header .logo { position: absolute; top: 33px; left: 130px; }

#header a { color: #2a5554; text-transform: uppercase; font-size: 13px; font-weight: bold; text-decoration: none; position: absolute; font-weight: bold; top: 68px; }
	#header a:hover { text-decoration: underline; }

#header a.link-packard {  left: 365px; background: transparent url(../images/bg-link-blank.png) center right no-repeat; padding-right: 20px; }
#header a.link-learn { left: 570px; background: transparent url(../images/bg-link-blank.png) center right no-repeat; padding-right: 20px; }

#header .social-links { position: absolute; right: 20px; top: 64px; margin: 0px; padding: 0px; width: 200px; }
	#header .social-links li { float: left; display: inline-block; margin-right: 10px; }
	#header .social-links li a { display: block; height: 24px; width: 24px; text-indent: -9999px; position: static; opacity: 1; transition: .3s; }
		#header .social-links li a:hover { opacity: .7; }

	#header .social-links li a.twitter { background: transparent url(../images/social-twitter.gif) 0 0 no-repeat; }
	#header .social-links li a.facebook { background: transparent url(../images/social-facebook.gif) 0 0 no-repeat; }
	#header .social-links li a.linkedin { background: transparent url(../images/social-linkedin.gif) 0 0 no-repeat; }

/* NAVIGATION */

#menu { position: fixed; top: 0px; left: 0px; background-color: #fff; z-index: 99; }

#navigation { height: 100%; position: fixed; z-index: 99; top: 0px; width: 55px; background-color: #fff; margin-top: 0px !important; left: 0px !important; box-shadow: inset -4px 0px 2px -2px rgba(0, 0, 0, 0.2); -webkit-backface-visibility: hidden; }

	#navigation #header-toggle { text-indent: -9999px; position: absolute; top: 0px; left: 0px; width: 55px; height: 51px; border-bottom: 1px solid #d7d7d7; background: transparent url(../images/btn-header.gif) center center no-repeat; }
	#navigation #btn-prev { display: block; background: transparent url(../images/btn-prev.png) center center no-repeat; height: 50px; width: 55px; text-indent: -9999px; position: absolute; left: 0px; top: 52px; border-bottom: 1px solid #d7d7d7; }
	#navigation #btn-next { display: block; background: transparent url(../images/btn-next.png) center center no-repeat; height: 50px; width: 55px; text-indent: -9999px; position: absolute; left: 0px; top: 103px; border-bottom: 1px solid #d7d7d7; }	
	
	#navigation #header-toggle, #navigation #btn-prev, #navigation #btn-next { transition: .3s; }
	#navigation #header-toggle:hover, #navigation #btn-prev:hover, #navigation #btn-next:hover { background-color: #dfdfdf; }

	#navigation #btn-auto { display: block; background: transparent url(../images/btn-auto.png) center -58px no-repeat; height: 55px; width: 55px; text-indent: -9999px; position: absolute; left: 0px; bottom: 0px; border-top: 1px solid #d7d7d7; transition: background-position .2s; overflow: hidden; }

		#navigation #btn-auto:hover { background-position-y: 0px; }
		#navigation #btn-auto.on { background-position-y: 0px; }
	
	
	#navigation #btn-auto #timer { display: none; position: absolute; height: 50px; width: 50px; top: 3px; left: 3px; z-index: -1; }
		#navigation #btn-auto.on #timer { display: block; }
	

	#navigation ul { list-style-type: none; position: absolute; width: 55px; top: 160px; left: 0px; margin: 0px; padding: 25px 0px 0; }
		#navigation li { margin: 0px; padding: 0px; }
		#navigation li a { transition: margin .3s, background-color .3s; text-decoration: none; display: block; width: 100%; padding: 2px 0px 5px; text-align: center; }
		#navigation li a span { display: block; height: 3px; width: 3px; background-color: #2a3b3b; border: 1px solid #d5d5d5; border-radius: 5px; text-align: center; margin: 0 auto;  }
			#navigation li.active a { margin-bottom: 70px; }
			#navigation li a:hover span, #navigation li.active a span { border: 1px solid #2a3b3b; background-color: #fff; }

	.tooltip { background: #fff; pointer-events: none; opacity: 0; display: inline-block; position: absolute; padding: 5px 10px; font-size: 10px; color: #2b2d2d; margin-top: 20px; text-align: center; text-decoration: none; text-transform: uppercase; box-shadow: 0 0 7px black; z-index: 0; white-space: nowrap;  z-index: -2; }
	.tooltip.active { opacity: 1;  margin-top: 5px; transition: all 0.2s ease; z-index: 100; }
	.tooltip.out { opacity: 0; margin-top: -20px; }



/* SLIDE STYLES */
.section { position: relative; background-color: #000; width: 100%; height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; }
.image-holder { overflow: hidden; width: 100%; height: 100%; position: relative; }
	.section .background { position: absolute; top: 0px; left: 0px; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; -webkit-backface-visibility: hidden; }
	.section .foreground { position: absolute; top: 0px; left: 0px; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; transition: 1s .2s; -webkit-backface-visibility: hidden; }
	.image-holder .placeholder { display:none; }

.section .foreground.fade { opacity: 0; }
.section.active .foreground.fade { opacity: 1; }

.section .foreground.up { top: 12%; }
.section.active .foreground.up { top: 0px; }

.section .foreground.left { left: 9%; }
.section.active .foreground.left { left: 0px; }

.section .foreground.down { top: -12%; }
.section.active .foreground.down { top: 0px; }

.section .foreground.right { left: -9%; }
.section.active .foreground.right { left: 0px; }

.section .foreground.scale-down { transform: scale(1.1); }
.section.active .foreground.scale-down { transform: scale(1); }

.section .foreground.scale-up { transform: scale(1); }
.section.active .foreground.scale-up { transform: scale(1.1); }


.intro-text-holder { position: absolute; width: 800px; margin-left: -400px; left: 50%; top: 40%; margin-top: -100px; text-align: center; } 
	.intro-text-holder h1 { text-align: center; color: #fff; font-size: 62px; line-height: 91px; font-weight: normal; font-family: "utopia-std",sans-serif; margin-top: 15px; }
	.intro-text-holder a.begin { border: 1px solid #fff; padding: 20px 45px 40px; background: rgba(0,0,0,0.2) url(../images/bg-link-begin.png) center 50px no-repeat; display: inline-block; text-align: center; margin: 0 auto; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 13px; transition: .3s; font-weight: bold; }
		.intro-text-holder a.begin:hover { background-color: rgba(0,0,0,.7); }
	
	
.text-holder { position: absolute; height: 100%; width: 30%; background: rgba(40,44,44,0.9); padding: 2%; top: 0px; left: 0px; min-width: 375px; transition: width .3s .3s;  box-sizing: border-box; }
	.text-holder * { transition: opacity .3s .6s; }
	.text-holder h1 { color: #fff; font-family: "utopia-std",sans-serif; font-weight: normal; font-size: 51px; line-height: 34px; margin: 23px 0 0; }
	.text-holder h2 { color: #c8d5d5; text-transform: uppercase; font-size: 12px; line-height: 18px; margin-bottom: 32px; font-weight: normal; }
	.text-holder h3 { color: #fff; font-size: 33px; line-height: 40px; font-family: "utopia-std",sans-serif; font-weight: normal; margin-bottom: 13px; }
	.text-holder p { color: #fff; font-size: 16px; line-height: 28px; }
	.text-holder p a { color: #e0e2c6; text-decoration: none; transition: .3s; }
	.text-holder p.more-info { margin-top: 35px;  }
	.text-holder p.more-info a { border: 1px solid #e0e2c6; text-transform: uppercase; padding: 10px 40px 10px 18px; font-size: 12px; background: transparent url(../images/btn-more-info.png) 95px 12px no-repeat; font-weight: bold;  }
		.text-holder p.more-info a:hover { background-color: #222; }
			

.section.active	.text-holder.full { width: 100%; }
.section.active	.text-holder.full * { opacity: 0; transition: opacity .3s; }


.full-text-holder {  position: absolute; height: 100%; width: 100%; padding: 2%; top: 0px; left: 0px; z-index: -1; opacity: 0; transition: opacity .3s, z-index 0s .3s; }
	.full-text-holder .scroller { height: 75%; width: 50%; overflow: auto; margin: 0 auto; margin-top: 10%; }
	.full-text-holder a.close { background: transparent url(../images/btn-close.png) center center no-repeat; display: block; height: 64px; width: 64px; position: absolute; top: 30px; right: 100px; z-index: 999; text-indent: -9999px; }
		.full-text-holder a.close:hover { background-color: #222; }

	.full-text-holder.open { opacity: 1; z-index: 50; transition: opacity .5s .5s; }

.full-text-holder p { color: #fff; font-size: 16px; line-height: 28px; }


/*.section.active .text-holder * {  opacity: 1; /* transition: opacity 1.2s 0s;  }*/




.pietimer {
    position:relative;
    top: 0px; left: 0px; 
    font-size: 200px;
    width:1em;
    height:1em;
    float: left;
}
.pietimer > .percent {
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
}
.pietimer > .slice {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px,1em,1em,0.5em);
}
.pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pietimer > .slice > .pie {
    border: .05em solid #c0c0c0;
    position:absolute;
    width:0.9em; /* 1 - (2 * border width) */
    height:0.9em; /* 1 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em; 
    border-radius:0.5em; 
}
.pietimer > .slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
.pietimer.fill > .percent {
    display: none;
}
.pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: #c0c0c0;
    width:1em;
    height:1em;
}


/*body.loading { overflow: hidden; width: 100%; height: 100%;  }
body.loading #load-cover { opacity: 1; z-index: 999; position: absolute; top: 0px; left: 0px; }
*/
body #load-cover { opacity: 1; z-index: 999; position: absolute; top: 0px; left: 0px; background: #2a3b3b url(../images/preload.gif) center 60% no-repeat; width: 100%; height: 100%; display: block; }
	body #load-cover #load-logo { background: transparent url(../images/load-logo.png) center center no-repeat; width: 216px; height: 109px; top: 42%; left: 50%; margin-left: -108px; position: absolute; }
	
}

@media only screen and (max-width : 767px), only screen and (max-height : 815px) {

	* { transition: none !important; }
	html, body { padding: 0px !important; overflow: auto; position: static; background-color: #000; position: relative; }
	
	#navigation { display: none; visibility: hidden; position: static; }
	#header {  } 
	/*
	body { margin-top: 125px;  }
	#header { position: fixed; width: 100%; height: 125px !important; background-color: #fff; display: block; visibility: visible; }
		#header .logo { position: absolute; top: 15px; left: 22px; }
		#header a.link-packard { display: none; }
		#header a.link-learn { display: none; }
		
		#header .social-links { position: absolute; right: 20px; top: 50px; margin: 0px; padding: 0px; width: 150px; }
			#header .social-links li { float: left; display: inline-block; margin-right: 10px; }
			#header .social-links li a { display: block; height: 24px; width: 24px; text-indent: -9999px; position: static; opacity: 1; transition: .3s; }
				#header .social-links li a:hover { opacity: .7; }
		
			#header .social-links li a.twitter { background: transparent url(../images/social-twitter.gif) 0 0 no-repeat; }
			#header .social-links li a.facebook { background: transparent url(../images/social-facebook.gif) 0 0 no-repeat; }
			#header .social-links li a.linkedin { background: transparent url(../images/social-linkedin.gif) 0 0 no-repeat; }
	*/
	
	
	#preload { display: none; visibility: hidden; }
	
	.section { position: relative; background-color: #000; overflow: hidden; height: auto !important; }
	.image-holder { overflow: hidden; width: 100%; height: auto; position: relative; }
		.section .background { position: absolute; top: 0px; left: 0px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; }
		.section .foreground { position: absolute; top: 0px; left: 0px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; }
		.image-holder .placeholder { display: block; width: 100%; height: auto; }

	.full-text-holder { height: 0px; display: none; }
	.full-text-holder .scroller { height: 75%; width: 96%; overflow: auto; margin: 0 auto; }	

.intro-text-holder { position: static; width: 100%; text-align: center; background: rgba(40,44,44,0.9); margin: 0px; padding: 0px; position: static; }
	.intro-text-holder h1 { text-align: center; color: #fff; font-size: 62px; line-height: 80px; font-weight: normal; font-family: "utopia-std",sans-serif; margin: 0px; padding: 30px 0;  }
	.intro-text-holder a.begin { display: none; }
	.intro-text-holder img { position: absolute; top: 15%; left: 50%; margin-left: -108px; }


	.text-holder { position: static; height: auto; width: 100%; background: rgba(40,44,44,0.9); padding: 2%; }
		.text-holder h1 { color: #fff; font-family: "utopia-std",sans-serif; font-weight: normal; font-size: 51px; line-height: 34px; margin: 23px 0 0; }
		.text-holder h2 { color: #c8d5d5; text-transform: uppercase; font-size: 12px; line-height: 18px; margin-bottom: 32px; font-weight: normal; }
		.text-holder h3 { color: #fff; font-size: 33px; line-height: 40px; font-family: "utopia-std",sans-serif; font-weight: normal; margin-bottom: 13px; }
		.text-holder p { color: #fff; font-size: 16px; line-height: 28px; }
		.text-holder p a { color: #e0e2c6; text-decoration: none; transition: .3s; }
		.text-holder p.more-info { margin-top: 35px;  }
		.text-holder p.more-info a { border: 1px solid #e0e2c6; text-transform: uppercase; padding: 10px 40px 10px 18px; font-size: 12px; background: transparent url(../images/btn-more-info.png) 95px 12px no-repeat; font-weight: bold;  }
			.text-holder p.more-info a:hover { background-color: #222; }


	body #load-cover { opacity: 1; z-index: 999; position: absolute; top: 0px; left: 0px; background: #2a3b3b url(../images/preload.gif) center center no-repeat; width: 100%; height: 100%; display: block; background-size: 50% auto; }
		body #load-cover #load-logo { background: transparent url(../images/load-logo.png) center center no-repeat; width: 108px; height: 55px; top: 50%; margin-top: -55px; left: 50%; margin-left: -54px; position: absolute; }


.section.active	.text-holder.full { width: 100%; }
.section.active	.text-holder.full * { opacity: 0; transition: opacity .3s; }

.full-text-holder { position: absolute; height: 100%; width: 100%; padding: 2%; top: 0px; left: 0px; z-index: -1; opacity: 0; transition: opacity .3s, z-index 0s .3s; box-sizing: content-box; }
.full-text-holder.open { opacity: 1; z-index: 50; transition: opacity .5s .5s; background: rgba(40, 44, 44, 0.9); display: block; padding-top: 100px;  }

	.full-text-holder a.close { background: transparent url(../images/btn-close.png) center center no-repeat; display: block; height: 64px; width: 64px; position: absolute; top: 30px; right: 30px; z-index: 999; text-indent: -9999px; }
		.full-text-holder a.close:hover { background-color: #222; }

	.full-text-holder.open { opacity: 1; z-index: 50; transition: opacity .5s .5s; }

.full-text-holder p { color: #fff; font-size: 16px; line-height: 28px; }

	
}