.animation {
width: 100%;
display: none;
position: relative;
margin:0;
font-size:14px!important;
}

.animation:after {
padding-top: 56.25%; /* 16:9 ratio */
display: block;
content: '';
}

.animation h2 {
font-size: 1.5em!important;
line-height: 1.2em!important;
margin: 0!important;
color:#FFF!important;
}

.animation h3 {
font-size: 1.5em!important;
line-height: 1.2em!important;
margin: 0!important;
letter-spacing: -0.9px!important;
color:#FFF!important;
}

.animation ul {
margin:10px 0 10px 0!important;
}

.animation p {
margin: 1% 0!important;
}

.animation li {
margin:0 0 1% 20px!important;
list-style-type:square!important;
}

.calloutbox-left, .calloutbox-right {
min-width:320px;
width:auto;
height:auto!important;
}

.l2000-frame, .l1000-frame {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: white;
display: block;
overflow: hidden;
font-size: 100%;
}

.base img {width: 100%; height: auto; }
.base, .menu {		 
-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-o-user-select: none; 
}

.hotspot {width: 87px; height: 87px; cursor:pointer; }
#hotspot1 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 61%; left: 23.33%;}
#hotspot2 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 43%; left: 27.25%;}
#hotspot3 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 42%; left: 15.5%;}
#hotspot4 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 38.5%; left: 42.5%;}
#hotspot5 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 26.5%; left: 65%;}
#hotspot6 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 44%; left: 80.66%;}
#hotspot7 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 54%; left: 67.5%;}
#hotspot8 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 18%; left: 44.5%;}
#hotspot9 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 32%; left: 54%;}
#hotspot10 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 43%; left: 58.5%;}
#hotspot11 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 20%; left: 60.5%;}
#hotspot12 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 34%; left: 31%;}
#hotspot13 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 23%; left: 40%;}
#hotspot14 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 54%; left: 51%;}
#hotspot15 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 17.5%; left: 52%;}
#hotspot16 {position: absolute; z-index: 103; width: 5%; height: 5%; top: 22%; left: 62.5%;}

.animation img {-webkit-transform: translateZ(0px);}
.animation ul {padding: 0; margin: 0 0 0 1.3vw;}

.img-41M {position: absolute; top: 70%; bottom: 0; left: 25%; height: 1%; z-index: 200; opacity: 0;}
.img-41M2 {position: absolute; top: 50%; bottom: 0; left: 55%; height: 1%; z-index: 200; opacity: 0;}
div#callout-41M, div#callout-41M2 {position: absolute; top: 35%; bottom: auto; right: -100%; margin-left: 100%; z-index: 301; width: 20%; height: 18%; opacity: 0;}

.battery-pack {position: absolute; top: 50%; bottom: 0; left: 28%; height: 1%; z-index: 200; opacity: 0;}
div#callout-battery-pack {position: absolute; top: 55%; bottom: auto; right: -100%; margin-left: 100%; z-index: 301; width: 22%; height: 16%; opacity: 0;}

.L1000-rack {position: absolute; top: 50%; bottom: 0; left: 18%; height: 1%; z-index: 200; opacity: 0;}
div#callout-L1000-rack {position: absolute; top: 35%; bottom: auto; left: -100%; margin-right: 100%; z-index: 301; width: 18%; height: 18%; opacity: 0;}

.battery-management-system {position: absolute; top: 0; bottom: 0; left: 0; right: 0; vertical-align:middle; width: 100%; z-index: 200; opacity: 0;}
div#callout-battery-management-system {position: absolute; top: 55%; bottom: auto; right: -100%; margin-left: 100%; z-index: 301; width: 25%; height: 18%; opacity: 0;}

.system-controller {position: absolute; top: 0; bottom: 0; left: 0; right: 0; vertical-align:middle; width: 100%; z-index: 200; opacity: 0;}
div#callout-system-controller {position: absolute; top: 55%; bottom: auto; right: -100%; margin-left: 100%; z-index: 301; width: 20%; height: 20%; opacity: 0;}

.container {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 200; opacity: 0;}
div#callout-container {position: absolute; top: 15%; bottom: auto; left: -100%; margin-right: 100%; z-index: 301; width: 20%; height: 12%;  opacity: 0;}

.balance-of-system {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 200; opacity: 0;}
div#callout-balance-of-system {position: absolute; top: 5%; bottom: auto; left: -100%; margin-right: 100%; z-index: 301; width: 20%;  height: 20%; opacity: 0;}

.l1000-open {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 200; opacity: 0;}
div#callout-l1000-open {position: absolute; top: 35%; bottom: auto; left: -100%; margin-right: 100%; z-index: 301; width: 25%; height: 18%;  opacity: 0;}

.l1000-glow {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 200; opacity: 0;}
div#callout-L1000-glow {position: absolute; top: 33%; bottom: auto; left: -100%; margin-right: 100%; z-index: 301; width: 28%; height: 22%;  opacity: 0;}

.l1000-open-large {position: absolute; top: 2%; bottom: 0; left: 20.5%; right: 0; vertical-align:middle; width: 72.5%; z-index: 200; opacity: 0;}
div#callout-l1000-open-large {position: absolute; top: 40%; bottom: auto; right: -100%; margin-left: 100%; z-index: 301; width: 20%; height: 20%; opacity: 0;}

img.metasys {width: 30%; }

.calloutbox-left, .calloutbox-right {color: white; text-align: left; font-size:1.15em;}
.calloutbox-left h2, .calloutbox-right h2, .calloutbox-left p, .calloutbox-right p {padding: 0;}
.calloutbox-left .callout {cursor: pointer; position: absolute; right: 10px; top: 10px; width: 32px; height: auto; max-width: 38px; max-height: 38px; border-radius:2em; -webkit-transition:all 250ms ease-in-out; transition:all 250ms ease-in-out; }
.calloutbox-right .callout {cursor: pointer; position: absolute; left: 10px; top: 10px; width: 32px; height: auto; max-width: 38px; max-height: 38px; border-radius:2em; -webkit-transition:all 250ms ease-in-out; transition:all 250ms ease-in-out; }
.calloutbox-left .callout:hover,
.calloutbox-right .callout:hover {
	background-color: rgba(0,0,0,0.5);
}
img.callout {user-drag: none; 
-moz-user-select: none;
-webkit-user-drag: none;}

.calloutbox-left {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7bc423+0,46710f+100 */
background: #7bc423; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiYzQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NjcxMGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #7bc423 0%, #46710f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7bc423), color-stop(100%,#46710f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #7bc423 0%,#46710f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #7bc423 0%,#46710f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #7bc423 0%,#46710f 100%); /* IE10+ */
background: linear-gradient(to right,  #7bc423 0%,#46710f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bc423', endColorstr='#46710f',GradientType=1 ); /* IE6-8 */
padding:20px 20px 20px 40px;
}

.calloutbox-right {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#46710f+0,7bc423+100 */
background: #46710f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ2NzEwZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YmM0MjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #46710f 0%, #7bc423 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#46710f), color-stop(100%,#7bc423)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #46710f 0%,#7bc423 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #46710f 0%,#7bc423 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #46710f 0%,#7bc423 100%); /* IE10+ */
background: linear-gradient(to right,  #46710f 0%,#7bc423 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46710f', endColorstr='#7bc423',GradientType=1 ); /* IE6-8 */
padding:20px 20px 20px 60px;
}

#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}

#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #00BCE4;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #4FFF4F;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFFFFF;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@media all and (max-width: 800px) {

.animation {
font-size:14px!important;
}

.calloutbox-left, .calloutbox-right {
top:auto!important;
bottom:0px!important;
}


}

@media all and (max-width: 600px) {

.animation {
font-size:13px!important;
}

.animation li {
margin:0 0 0 20px!important;
}

.calloutbox-left, .calloutbox-right {
width:94%!important;
padding:20px 2% 5px 4%!important;
}

.calloutbox-left img.callout { right: 10px; }
.calloutbox-right img.callout { left:auto; right: 10px; }

.hotspot {
width:40px!important;
height:40px!important;
}

}






/*
     FILE ARCHIVED ON 18:39:30 Oct 7, 2016 AND RETRIEVED FROM THE
     AN OPENWAYBACK INSTANCE ON 7:38:38 Sep 24, 2025.
     JAVASCRIPT APPENDED BY OPENWAYBACK, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/