#potrait {
	position: absolute;
	display: none;
	top: 0;
	left: 50%;
	padding: 30px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	z-index: 9999999;
	background-color: #F48023;
	-webkit-transform: translate(-50%,50%);
	transform: translate(-50%,50%);
}
body {
	background-color: #999999;
	overflow: hidden;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	outline: 0;
}
#loadingScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:999;
	background: url(../images/loader.gif) no-repeat center center #999;
}
.mtop10 {
	margin-top: 10px;
}
.relative {
	position: relative;
}
.jci-container {
	position: relative;
	width: 90%;
	height: 100vh;
	background-color: #fff;
	margin: 0 auto;
	overflow: hidden;
}
.loading {
	position: absolute;
	width: 55%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: loading 3s 5s 1 forwards ease-out;
	-moz-animation: loading 3s 5s 1 forwards ease-out;
	animation: loading 3s 5s 1 forwards ease-out;
}

.intro_loading {
	position: absolute;
	width: 55%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: intro_loading 1s 3s 1 forwards ease-out;
	-moz-animation: intro_loading 1s 3s 1 forwards ease-out;
	animation: intro_loading 1s 3s 1 forwards ease-out;
}

.jci-menu {
    position: absolute;
    z-index: 999;
    top: 58%;
    left: 16.5%;
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    -webkit-animation: menu 2s 6s 1 forwards;
    animation: menu 2s 6s 1 forwards;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.jci-menu>ul>li {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	background-color: rgba(255,255,255,0.1);
	-webkit-border-radius: 50%;	
	border-radius: 50%;	
}
.jci-menu>ul>li:nth-child(1) {
	z-index: 4;
	width: 646px;
	height: 646px;
	-webkit-animation: logoPartsAnimation1 2s 6s 1 forwards;
	animation: logoPartsAnimation1 2s 6s 1 forwards;
	background-color: rgba(255,255,255,0.2);
}
.jci-menu>ul>li:nth-child(2) { 
	z-index: 6;
	width: 524px;
	height: 524px;
	margin: 60px;
	-webkit-animation: logoPartsAnimation2 2s 6s 1 forwards;
	animation: logoPartsAnimation2 2s 6s 1 forwards;
	background-color: rgba(255,255,255,0.3);
}
.jci-menu>ul>li:nth-child(3) {
	z-index: 8;
	width: 402px;
	height: 402px;
	margin: 121px 121px;
	-webkit-animation: logoPartsAnimation3 2s 6s 1 forwards;
	animation: logoPartsAnimation3 2s 6s 1 forwards;
	background-color: rgba(255,255,255,0.4);
}
.jci-menu>ul>li:nth-child(4) {
	z-index: 10;
	width: 280px;
	height: 280px;
	margin: 181px 182px;
}
.jci-menu>ul>li img {
	display: block;
	cursor: pointer;
	border-radius: 50%;
	-webkit-transition: all 1s;
    transition: all 1s;
}
.jci-menu>ul>li>span {
	display: block;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.jci-vrf-works {
	width: 100%;
	height: 100vh;
	-webkit-animation: bgcolor 0s 8s forwards;
	animation: bgcolor 0s 8s forwards;
}
.submenu1 {
	position: absolute;
    z-index: 7;
    top: 468px;
    left: 187px;
	display: none;
	width: 256px;
	padding-top: 83px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0979b9+0,7db9e8+100&1+58,0+100 */
	background: -moz-linear-gradient(top,  rgba(9,121,185,1) 0%, rgba(76,158,212,1) 58%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(9,121,185,1) 0%,rgba(76,158,212,1) 58%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(9,121,185,1) 0%,rgba(76,158,212,1) 58%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0979b9', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
}
#submenu2 {
    z-index: 5;
    top: 532px;
    left: 181px;
    width: 260px;
    padding-top: 15px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b6c1+0,7db9e8+100&0.5+58,0+100 */
background: -moz-linear-gradient(top,  rgba(0,182,193,0.5) 0%, rgba(73,184,216,0.5) 58%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,182,193,0.5) 0%,rgba(73,184,216,0.5) 58%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,182,193,0.5) 0%,rgba(73,184,216,0.5) 58%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000b6c1', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */

}
#submenu3 {
z-index: 3;
top: 590px;
left: 155px;
width: 350px;
padding-top: 55px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7dbb00+0,7db9e8+100&0.7+58,0+100 */
background: -moz-linear-gradient(top,  rgba(125,187,0,0.7) 0%, rgba(125,186,135,0.7) 58%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(125,187,0,0.7) 0%,rgba(125,186,135,0.7) 58%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(125,187,0,0.7) 0%,rgba(125,186,135,0.7) 58%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b37dbb00', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */

}
.submenu1 li {
	position: relative;
	display: block;
}
.submenu1 li a {
	display: block;
	padding: 8.5px 7px 8.5px 9px;
	text-align: right;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
    font-family: 'TradeGothic';
    -webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.submenu1 li:hover a, .submenu1 li a.active {
	text-decoration: none;
	background-color: rgba(0,0,0,0.5);
}
.jci-menu li:nth-child(3).active:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 402px;
	height: 402px;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: menuborder3 0.7s forwards;
	animation: menuborder3 0.7s forwards;
}
.jci-menu li:nth-child(2).active:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 524px;
	height: 524px;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: menuborder2 0.7s forwards;
	animation: menuborder2 0.7s forwards;
}
.jci-menu li:nth-child(1).active:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 646px;
	height: 646px;
	border: 2px solid #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: menuborder1 0.7s forwards;
	animation: menuborder1 0.7s forwards;
}
.jci-main section {
    position: fixed;
    top: 0;
    right: 5%;
    display: none;
    float: right;
    width: 720px;
    margin: 0 30px;
    padding: 25px 40px;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(255,255,255,0.85);
}
.jci-main section h2 {
	color: #666666;
	font-size: 52px;
	font-weight: bold;
	margin-top: 0;
	margin-left: -2px;
	margin-bottom: 10px;
}
.jci-main section p {
	font-size: 19px;
    color: #000;
}
.jci-main section ul {
	margin-top: 20px;
	padding-left: 16px;
	font-style: italic;
}
.outdoor-animation img:nth-child(2), .outdoor-animation img:nth-child(3) {
    position: absolute;
    top: 86px;
    left: 167px;
}
.outdoor-animation img:nth-child(3){
    top: 275px;
}
.click {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #666666;
	font-style: italic;
}
.click:before {
    content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    background-color: #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.click:after {
	content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    border:1px solid #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: click 0.6s infinite;
    animation: click 0.6s infinite;
}
.click2 {
	position: relative;
	display: inline-block;
	
}
.click2:before {
    content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    background-color: #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.click2:after {
	content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    border:1px solid #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: click 0.6s infinite;
    animation: click 0.6s infinite;
}
.outdoor-animation.animated img:nth-child(2) {
	left: 100%;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.outdoor-animation.animated img:nth-child(3) {
	left: 100%;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
.outdoor-animation.animated_reverse img:nth-child(2) {
	left: 47%;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.outdoor-animation.animated_reverse img:nth-child(3) {
	left: 47%;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
.indoor-animation {
	position: relative;
	padding-top: 250px;
}
.indoor-animation li {
	margin: 10px;
}
.indoor-animation li:nth-child(4), .indoor-animation li:nth-child(5) {
	position: absolute;
	top: 0;
	right: 0;
}
.indoor-animation li:nth-child(5) {
	top: 100px;
}
.indoor-animation .click  img:nth-child(2) {
	display: none;
}
.indoor-animation .animated.click  img:first-child {
	position: absolute;
	-webkit-transform: translate(90%, -350%) scale(3.5);
    transform: translate(90%, -350%) scale(3.5);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.indoor-animation li:nth-child(2) .animated.click  img:first-child {
	-webkit-transform: translate(-30%, -350%) scale(3.5);
	transform: translate(-30%, -350%) scale(3.5);
}
.indoor-animation li:nth-child(3) .animated.click  img:first-child {
	-webkit-transform: translate(-150%, -500%) scale(3.5);
	transform: translate(-150%, -500%) scale(3.5);
}
.indoor-animation li:nth-child(4) .animated.click  img:first-child {
	-webkit-transform: translate(-335%, 70%) scale(2.5);
	transform: translate(-335%, 70%) scale(2.5);
}
.indoor-animation li:nth-child(5) .animated.click  img:first-child {
	-webkit-transform: translate(-360%, -60%) scale(2);
	transform: translate(-360%, -60%) scale(2);
}
.indoor-animation li:nth-child(6) .animated.click  img:first-child {
	-webkit-transform: translate(-273%, -265%) scale(2.9);
	transform: translate(-273%, -265%) scale(2.9);
}
.indoor-animation li:nth-child(7) .animated.click  img:first-child {
	-webkit-transform: translate(105%, -660%) scale(3.5);
	transform: translate(105%, -660%) scale(3.5);
}
.indoor-animation li:nth-child(8) .animated.click  img:first-child {
	-webkit-transform: translate(-70%, -320%) scale(2.5);
	transform: translate(-70%, -320%) scale(2.5);
}
.indoor-animation li:nth-child(9) .animated.click  img:first-child {
	-webkit-transform: translate(-190%, -370%) scale(2.8);
	transform: translate(-190%, -370%) scale(2.8);
}
.indoor-animation li:nth-child(10) .animated.click  img:first-child {
	-webkit-transform: translate(-310%, -400%) scale(2.8);
	transform: translate(-310%, -400%) scale(2.8);
}
.indoor-animation li p {
	position: absolute;
	display: none;
    font-size: 16px;
    width: 300px;
    text-align: center;
}

.indoor-animation li:nth-child(1) .animated.click  p {
	display: block;
	-webkit-transform: translate(20%, -450%);
	transform: translate(20%, -450%);
}
.indoor-animation li:nth-child(2) .animated.click  p {
	-webkit-transform: translate(-20%, -420%);
	transform: translate(-20%, -420%);
}
.indoor-animation li:nth-child(3) .animated.click  p {
	-webkit-transform: translate(-70%, -560%);
	transform: translate(-70%, -560%);
}
.indoor-animation li:nth-child(4) .animated.click  p {
	-webkit-transform: translate(-100%, 400%);
	transform: translate(-100%, 400%);
}
.indoor-animation li:nth-child(5) .animated.click  p {
	-webkit-transform: translate(-120%, -300%);
	transform: translate(-120%, -300%);
}
.indoor-animation li:nth-child(6) .animated.click  p {
	-webkit-transform: translate(-130%, -600%);
	transform: translate(-130%, -600%);
}
.indoor-animation li:nth-child(7) .animated.click  p {
	-webkit-transform: translate(30%, -960%);
	transform: translate(30%, -960%);
}
.indoor-animation li:nth-child(8) .animated.click  p {
	-webkit-transform: translate(0%, -1060%);
	transform: translate(0%, -1060%);
}
.indoor-animation li:nth-child(9) .animated.click  p {
	-webkit-transform: translate(-120%, -990%);
	transform: translate(-120%, -990%);
}
.indoor-animation li:nth-child(10) .animated.click  p {
	-webkit-transform: translate(-160%, -960%);
	transform: translate(-160%, -960%);
}
.indoor-animation .animated.click  img:nth-child(2) {
	display: inline-block;
	opacity: 0.3;
}
.jci-main section.w-55 {
	width: 792px;
}
#refrigerant-piping .animation1-content {
	position: absolute;
	top: 40px;
	right: 90px;
	width: 0px;
	height: 0px;
	background-color: #00bce4;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-transition: width 2s, height 2s, background-color 2s;
	-moz-transition: width 2s, height 2s, background-color 2s;
	transition: width 2s, height 2s, background-color 2s;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);
}
#refrigerant-piping .animation1-content.animated {
	opacity: 1!important;
	width: 600px;
	height: 590px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
}
#refrigerant-piping .animation1-content img {
	display: none;
	cursor: pointer;
	width: 100%;
	max-width: 100%;
}


.hide {
	display: none;
}
.refrigerant-piping-tabs li {
	-webkit-border-radius: 20px 20px 0 0;
	border-radius: 20px 20px 0 0;
}
.refrigerant-piping-tabs li a {
	border: 0 !important;
}
.refrigerant-piping-tabs li a:hover, .refrigerant-piping-tabs li.active a {
	background-color: transparent !important;
}
.refrigerant-piping-tabs li:first-child, .refrigerant-piping-tabs .tab-content .tab-pane {
	background-color: rgba(0, 188, 228, 0.3);
}
.refrigerant-piping-tabs li:last-child, .refrigerant-piping-tabs .tab-content .tab-pane:last-child {
	background-color: rgba(228, 91, 0, 0.3);
}
.refrigerant-piping-tabs .tab-content {
	position: relative;
	height: 370px;
	overflow: hidden;
	-webkit-border-radius: 0 0 20px 20px;
	border-radius: 0 0 20px 20px;
	-webkit-box-shadow: 2px 3px 3px 1px rgba(0,0,0,0.3);
	box-shadow: 2px 3px 3px 1px rgba(0,0,0,0.3);
}

.tab-content div {
    position:relative;
}




#jci-refrigerant-piping1 img, #jci-refrigerant-piping1 p, #jci-refrigerant-piping2 img, #jci-refrigerant-piping2 p {
	position: absolute;
	-webkit-transition: all 2s ease-out;
	transition: all 2s ease-out;
}
#jci-refrigerant-piping1 p {
    width: 239px;
    top: 291px;
    left: 40%;
    -webkit-animation: jci-refrigerant-piping6 1s forwards;
    animation: jci-refrigerant-piping6 1s forwards;
}

#jci-refrigerant-piping1.active img:nth-child(2) {
	top: 66px;
	left: 73px;
	-webkit-animation: jci-refrigerant-piping6 1s forwards;
	animation: jci-refrigerant-piping6 1s forwards;
}
#jci-refrigerant-piping1.active img:nth-child(3) {
	-webkit-animation: jci-refrigerant-piping1 1s forwards;
	animation: jci-refrigerant-piping1 1s forwards;
}
#jci-refrigerant-piping1.active img:nth-child(4) {
	-webkit-animation: jci-refrigerant-piping3 1s forwards;
	animation: jci-refrigerant-piping3 1s forwards;
}
#jci-refrigerant-piping1.active img:nth-child(5) {
	-webkit-animation: jci-refrigerant-piping2 1s forwards;
	animation: jci-refrigerant-piping2 1s forwards;
}
#jci-refrigerant-piping1.active img:nth-child(6) {
	-webkit-animation: jci-refrigerant-piping4 1s forwards;
	animation: jci-refrigerant-piping4 1s forwards;
}
#jci-refrigerant-piping1.active img:nth-child(7) {
	-webkit-animation: jci-refrigerant-piping5 1s forwards;
	animation: jci-refrigerant-piping5 1s forwards;
}
.refrigerant-piping-tabs ul {
	padding: 0 !important;
}
.refrigerant-piping-tabs .tab-content div {
    height: 370px;
}

#jci-refrigerant-piping2 p {
    width: 239px;
    top: 67px;
    left: 20%;
    -webkit-animation: jci-refrigerant2-piping6 1s forwards;
    animation: jci-refrigerant2-piping6 1s forwards;
}

#jci-refrigerant-piping2.active img:nth-child(2) {
	top: 106px;
	left: 73px;
	-webkit-animation: jci-refrigerant2-piping6 1s forwards;
	animation: jci-refrigerant2-piping6 1s forwards;
}
#jci-refrigerant-piping2.active img:nth-child(3) {
	-webkit-animation: jci-refrigerant2-piping1 1s forwards;
	animation: jci-refrigerant2-piping1 1s forwards;
}
#jci-refrigerant-piping2.active img:nth-child(4) {
	-webkit-animation: jci-refrigerant2-piping3 1s forwards;
	animation: jci-refrigerant2-piping3 1s forwards;
}
#jci-refrigerant-piping2.active img:nth-child(5) {
	-webkit-animation: jci-refrigerant2-piping2 1s forwards;
	animation: jci-refrigerant2-piping2 1s forwards;
}
#jci-refrigerant-piping2.active img:nth-child(6) {
	-webkit-animation: jci-refrigerant2-piping4 1s forwards;
	animation: jci-refrigerant2-piping4 1s forwards;
}
#jci-refrigerant-piping2.active img:nth-child(7) {
	-webkit-animation: jci-refrigerant2-piping5 1s forwards;
	animation: jci-refrigerant2-piping5 1s forwards;
}
.refrigerant-piping-tabs ul {
	padding: 0 !important;
}
.refrigerant-piping-tabs .tab-content div {
    height: 370px;
}
#jci-compressor-technology .panel-heading {
	padding: 0;
}
#jci-compressor-technology .panel-heading a, #jci-metasys-integration .panel-heading a {
	display: block;
	font-size: 22px;
	text-shadow: 0px 2px 3px rgba(0,0,0,0.3);
	color: #fff;
	padding: 10px 15px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5fcde5+0,008bc3+100 */
	background: rgb(95,205,229); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(95,205,229,1) 0%, rgba(0,139,195,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(95,205,229,1) 0%,rgba(0,139,195,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(95,205,229,1) 0%,rgba(0,139,195,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fcde5', endColorstr='#008bc3',GradientType=0 ); /* IE6-9 */
}
/***** Ajit ******/
#section-metasys-integration{
	padding:25px 40px;
	overflow-y: auto;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 5%;
	width: 800px;
	margin: 0 30px;
	padding: 25px 40px;
	overflow: hidden;
	overflow-y: auto;
}

#jci-metasys-integration .panel-heading a:focus{
	color:#fff !important;
}

#jci-metasys-integration .panel{
	background:none;
}

#jci-metasys-integration .panel ul{
	margin-top:10px;
}

#jci-metasys-integration .panel .panel-body{
	padding:0px !important;
	border-top:0px !important;
}

#jci-metasys-integration .panel .panel-heading{
	padding:0px !important;
}

#jci-metasys-integration .panel .panel-body li{
	margin-bottom:20px;
	font-size:19px;
}

#jci-metasys-integration .panel .panel-body .extra-text{
	font-size:15px;
}

#jci-metasys-integration .panel .panel-body .padding-right-none{
	padding-right:0;
}

#jci-metasys-integration .panel .panel-body .padding-left-none{
	padding-left:0;
}



#jci-metasys-integration .panel .panel-body .list-style-none{
	list-style:none;
}



#jci-metasys-integration .panel .panel-body .click-circle:before {
    content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    background-color: #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	cursor:pointer;
}

#jci-metasys-integration .panel .panel-body .click-circle:after {
    content: '';
    display: block;
    position: absolute;
    left: -22px;
    top: 5px;
    width: 11px;
    height: 11px;
    border: 1px solid #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: click 0.6s infinite;
    animation: click 0.6s infinite;
	cursor:pointer;
}

#jci-metasys-integration .panel .panel-body .click-circle,#jci-metasys-integration .panel .panel-body .active{
	position:relative;
}

#jci-metasys-integration .panel .panel-body  .active:before {
    content: '';
    display: block;
    position: absolute;
    left: -40px;
    top: 0px;
	height:32px;
	width:32px;
    background-image:url(../images/arrow-left.png);
}

#jci-metasys-integration .panel .panel-body img{
	float:none;
	max-height:402px;
	margin-right:auto;
	margin-left:auto;
}

#jci-metasys-integration .panel3-info,#jci-metasys-integration .panel4-info{
	padding-top:10px;
}

#jci-metasys-integration .circle-number{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    text-align: center;
    background-color: #15a2d0;
    border: 1px solid grey;
    display: inline-block;
    margin-right: 10px;
}

#jci-metasys-integration .display-inline{
	display:inline;
}	

#jci-metasys-integration .margin-bottom{
	margin-bottom:10px;
}

#jci-metasys-integration .point-img{
	padding:15px;
}

#jci-metasys-integration .topic-hidden,#jci-metasys-integration .point-hidden{
	display:none;
}

#jci-metasys-integration .margin-top{
	margin-top:10px;	
}

#jci-metasys-integration .underline{
	text-decoration:underline;
}

#jci-metasys-integration .max-height{
	max-height:100px;
}

.font-weight{
	font-weight:600;
}


/*********/
p.small {
    font-size: 16px !important;
}
#fresh-air-options .tab-content h4, #fresh-air-options .tab-content p {
	-webkit-animation: fresh-air-options 1s forwards;
	animation: fresh-air-options 1s forwards;
}
#fresh-air-options .tab-content h4 {
	margin-bottom: 20px;
}
#fresh-air-options .nav-tabs>li>a, #fresh-air-options .nav-tabs>li, #controllers .nav-tabs>li>a, #controllers .nav-tabs>li {
	padding: 0!important;
}
#fresh-air-options .nav-tabs, #fresh-air-options .nav-tabs>li:hover>a, #fresh-air-options .nav-tabs>li>a,
#controllers .nav-tabs, #fresh-air-options .nav-tabs>li:hover>a, #controllers .nav-tabs>li>a {
	border: 0;
	background-color: transparent;
}
#fresh-air-options .nav-tabs>li.active>a, #fresh-air-options .nav-tabs>li.active>a:focus, #fresh-air-options .nav-tabs>li.active>a:hover,
#controllers .nav-tabs>li.active>a, #controllers .nav-tabs>li.active>a:focus, #controllers .nav-tabs>li.active>a:hover {
	background-color: transparent;
	opacity: 0.3;
}
.nonItalicList li p,.nonItalicList li {
    font-style: normal;
}
#fresh-air-options1 img {
	-webkit-animation: fresh-air-options1 1s forwards;
	animation: fresh-air-options1 1s forwards;
}
video {
	position: absolute;
	top:0;
	left: 0;
	display: none;
	width: 100%;
    -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
    background: #0063cb;
    height:104%;
}
#fresh-air-options2 img {
	-webkit-animation: fresh-air-options2 1s forwards;
	animation: fresh-air-options2 1s forwards;
}
#fresh-air-options3 img {
	-webkit-animation: fresh-air-options3 1s forwards;
	animation: fresh-air-options3 1s forwards;
}
#controllers .nav.nav-tabs img {
    width: 58px;
    margin-right: 43px;
    margin-left: -2px;
}
#jci-controller1 img {
	-webkit-animation: jci-controller1 1s forwards;
	animation: jci-controller1 1s forwards;
}
#jci-controller2 img {
	-webkit-animation: jci-controller2 1s forwards;
	animation: jci-controller2 1s forwards;
}
#jci-controller3 img {
	-webkit-animation: jci-controller3 1s forwards;
	animation: jci-controller3 1s forwards;
}
#jci-controller4 img {
	-webkit-animation: jci-controller4 1s forwards;
	animation: jci-controller4 1s forwards;
}
#jci-controller5 img {
	-webkit-animation: jci-controller5 1s forwards;
	animation: jci-controller5 1s forwards;
}
#jci-controller6 img {
	-webkit-animation: jci-controller6 1s forwards;
	animation: jci-controller6 1s forwards;
}
#jci-controller7 img {
	-webkit-animation: jci-controller6 1s forwards;
	animation: jci-controller6 1s forwards;
}
.jci-controllertabs .tab-content h4, .jci-controllertabs .tab-content p, .jci-controllertabs .tab-content ul {
	-webkit-animation: jci-controllertabs 1s forwards;
	animation: jci-controllertabs 1s forwards;
}
#accessories .animation p, #accessories .animation img {
	position: absolute;
}
#accessories .animation p, .airblow {
	-webkit-animation: slowtext 1s forwards;
animation: slowtext 1s forwards;
}
#accessories .animation p.small {
	font-size: 12px !important;
}
.jci-accessories1 img:nth-child(2) {
	width: 142px;
	left: 60px;
	-webkit-animation: jci-accessories1 1s forwards;
	animation: jci-accessories1 1s forwards;
}
.jci-accessories1 p:nth-child(3) {
	top: 140px;
    left: 240px;
}
.jci-accessories1 p:nth-child(4) {
	top: 300px;
    left: 240px;
}
.jci-accessories2 img:nth-child(2) {
	width: 148px;
	left: 129px;
	-webkit-animation: jci-accessories2 1s forwards;
	animation: jci-accessories2 1s forwards;
}
.jci-accessories2 p:nth-child(3) {
	top: 140px;
    left: 320px;
}
.jci-accessories2 p:nth-child(4) {
	top: 220px;
    left: 60px;
}
.jci-accessories2 p:nth-child(5) {
	top: 300px;
    left: 320px;
}
p.small {
	font-size: 14px;
	line-height: 20px;
}
.jci-menu li:nth-child(3).active img {
	-webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin: 2px 0 2px -1px;
}
.jci-menu li:nth-child(2).active img {
	-webkit-transform: rotate(-110deg);
    transform: rotate(-110deg);
}
.jci-menu li:nth-child(1).active img {
	-webkit-transform: rotate(-137deg);
    transform: rotate(-137deg);
}
.submenu {
	display: none;
}
.inverterBenefits li p {
    font-style: normal;
}
#refrigeration-cycle {
    width: 70%; padding-left: 200px; overflow:hidden;
}
#refrigeration-cycle .nav a {
	position: relative;
    color: black;
    font-style: normal;
    font-size: 18px;
    margin-top: -20px;
    text-align: center;
    font-weight: bold;
}
#refrigeration-cycle .nav {
	border: 0;
}
#refrigeration-cycle .nav a:hover, #refrigeration-cycle .nav li.active a, #refrigeration-cycle .nav a:focus {
    background: transparent;
    border-color: transparent;
}
#refrigeration-cycle .nav a:hover {
	opacity: 0.5;
}
#refrigeration-cycle .nav li.active a:before {
	content: '';
    position: absolute;
    top: 80%;
    left: 15px;
    width: calc(100% - 30px);
    height: 5px;
    background-color: #fb2a2c;
} 

#refrigeration-cycle .nav li:nth-child(2).active a:before {
    background-color: #03a5ee;
} 
#refrigeration-cycle .nav li:nth-child(3).active a:before {
	top: 90%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#03a5ee+0,f5595d+100 */
	background: rgb(3,165,238); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(3,165,238,1) 0%, rgba(245,89,93,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(3,165,238,1) 0%,rgba(245,89,93,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(3,165,238,1) 0%,rgba(245,89,93,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a5ee', endColorstr='#f5595d',GradientType=1 ); /* IE6-9 */
}
#refrigeration-cycle .nav li:nth-child(4).active a:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#03a5ee+0,4b6366+100 */
	background: rgb(3,165,238); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(3,165,238,1) 0%, rgba(75,99,102,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(3,165,238,1) 0%,rgba(75,99,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(3,165,238,1) 0%,rgba(75,99,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a5ee', endColorstr='#4b6366',GradientType=1 ); /* IE6-9 */
} 
#refrigeration-cycle select {
	position: relative;
	font-weight: bold;
	top: -30px;
	width: 300px;
	background: rgba(255, 255, 255, 0.5);
}
.refri-hide {
	display: none;
}
.ref-main-menu {
	position: absolute;
	top: 0;
	right: 30px;
	list-style: none;
}
.ref-main-menu li {
	float: left;
}
.ref-main-menu li a {
	display: block;
	color: #000;
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
	padding: 10px 35px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d3d3d3+0,ebebeb+34,969696+100 */
	background: rgb(211,211,211); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(211,211,211,1) 0%, rgba(235,235,235,1) 34%, rgba(150,150,150,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(211,211,211,1) 0%,rgba(235,235,235,1) 34%,rgba(150,150,150,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(211,211,211,1) 0%,rgba(235,235,235,1) 34%,rgba(150,150,150,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#969696',GradientType=0 ); /* IE6-9 */
}
.ref-main-menu li a.active {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#969696+0,ebebeb+78,d3d3d3+100 */
	background: rgb(150,150,150); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(150,150,150,1) 0%, rgba(235,235,235,1) 78%, rgba(211,211,211,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(150,150,150,1) 0%,rgba(235,235,235,1) 78%,rgba(211,211,211,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(150,150,150,1) 0%,rgba(235,235,235,1) 78%,rgba(211,211,211,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */

}
.ref-main-menu li:first-child a {
	-webkit-border-radius: 30px 0 0 30px;
	-moz-border-radius: 30px 0 0 30px;
	border-radius: 30px 0 0 30px;
}
.ref-main-menu li:last-child a {
	-webkit-border-radius: 0 30px 30px 0;
	-moz-border-radius: 0 30px 30px 0;
	border-radius: 0 30px 30px 0;
}
#refrigeration-cycle img {
    width: 100%;
    margin-left: -200px;
}
#ref-schematic-view img {
	   margin-left: -71px;
    margin-top: -25px;
}
#refrigeration-cycle .nav {
    position: absolute;
    right: 30px;
    margin-top: 25px;
}

.redAir1 {
    position: absolute;
    top: 170px;
    right: 85px;
}.redAir2 {
    top: 215px;
    position: absolute;
    right: 220px;
}.redAir3 {
    position: absolute;
    right: 220px;
    top: 125px;
}
.blueAir1{
    position: absolute;
    right: 90px;
    top: 85px;
}.blueAir2{
    position: absolute;
    top: 240px;
    left: 300px;
}.blueAir3{
    position: absolute;
    top: 275px;
    left: 205px;
}.blueAir4{
    position: absolute;
    top: 230px;
    left: 140px;
}.blueAir5{
    position: absolute;
    left: 35px;
    top: 270px;
}
#page2 a:focus {
    color: firebrick;
    text-decoration: none;
}
.outdoor-animation img:nth-child(2), .outdoor-animation img:nth-child(3) {
    cursor: pointer;
}

/*amination*/
@-webkit-keyframes loading {
	0% {
		width: 55%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	30% {
		width: 30%;
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
	70% {
		opacity: 0;
		width: 30%;
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
	100% {
		opacity: 0;
		width: 30%;	
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
}
@keyframes loading {
	0% {
		width: 55%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	30% {
		width: 30%;
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
	70% {
		opacity: 0;
		width: 30%;
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
	100% {
		opacity: 0;
		width: 30%;	
		top: 65%;
		left: 5%;
		transform: translate(0%, 0%);
	}
}

@-webkit-keyframes intro_loading {
	 0% {
         width: 55%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	100% {		
            width: 18%;
            top: 82%;
            left: 2%;
            z-index: 1000;
            transform: translate(0%, 0%);
	     }
}
@keyframes intro_loading {
	 0% {
		    width: 55%;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
	    }
	
	100% {		
            width: 18%;
            top: 82%;
            left: 2%;
            z-index: 1000;
            transform: translate(0%, 0%);
	     }
}

/*menu*/
@-webkit-keyframes logoPartsAnimation1{
    0%{
        transform: rotate(10deg);
    }
    50%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(-22deg);
    }
}
@keyframes logoPartsAnimation1{
    0%{
        transform: rotate(10deg);
    }
    50%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(-22deg);
    }
}

@-webkit-keyframes logoPartsAnimation2{
    0%{
        transform: rotate(360deg);
    }
    50%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(-35deg);
    }
}
@keyframes logoPartsAnimation2{
    0%{
        transform: rotate(360deg);
    }
    50%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(-35deg);
    }
}

@-webkit-keyframes logoPartsAnimation3{
    0%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(-10deg);
    }
}
@keyframes logoPartsAnimation3{
    0%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(-10deg);
    }
}

@-webkit-keyframes menu {
	0% {
		opacity: 0;
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	5% {
		opacity: 1;
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	50% {
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	100% {
		opacity: 1;
		top: -310px;
	    left: -187px;
	    transform: scale(1);
	}
}
@keyframes menu {
	0% {
		opacity: 0;
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	5% {
		opacity: 1;
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	50% {
		top: 60%;
	    left: 23%;
	    transform: scale(0.3);
	}
	100% {
		opacity: 1;
		top: -310px;
	    left: -187px;
	    transform: scale(1);
	}
}
@-webkit-keyframes menuborder3 {
	0% {
		width: 402px;
		height: 402px;
	}
	95% {
		width: 524px;
		height: 524px;
		margin: -60px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -60px;
	}
}
@keyframes menuborder3 {
	0% {
		width: 402px;
		height: 402px;
	}
	95% {
		width: 524px;
		height: 524px;
		margin: -60px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -60px;
	}
}
@-webkit-keyframes menuborder2 {
	0% {
		width: 524px;
		height: 524px;
	}
	95% {
		width: 646px;
		height: 646px;
		margin: -60px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -60px;
	}
}
@keyframes menuborder2 {
	0% {
		width: 524px;
		height: 524px;
	}
	95% {
		width: 646px;
		height: 646px;
		margin: -60px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -60px;
	}
}
@-webkit-keyframes menuborder1 {
	0% {
		width: 646px;
		height: 646px;
	}
	95% {
		width: 726px;
		height: 726px;
		margin: -40px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -40px;
	}
}
@keyframes menuborder1 {
	0% {
		width: 646px;
		height: 646px;
	}
	95% {
		width: 726px;
		height: 726px;
		margin: -40px;
	}
	100% {
		opacity: 0;
		width: 0px;
		height: 0px;
		margin: -40px;
	}
}
@-webkit-keyframes bgcolor {
	0% {
		background-color: #fff;
	}
	100% {
		background-color: #0063cb;	
	}
}
@keyframes bgcolor {
	0% {
		background-color: #fff;
	}
	100% {
		background-color: #0063cb;	
	}
}
@-webkit-keyframes click {
	0% {
		width: 11px;
		height: 11px;
	}
	100% {
		opacity: 0;
		width: 25px;
		height: 25px;
		margin: -7px;
	}
}
@keyframes click {
	0% {
		width: 11px;
		height: 11px;
	}
	100% {
		opacity: 0;
		width: 25px;
		height: 25px;
		margin: -7px;
	}
}
@-webkit-keyframes jci-refrigerant-piping1 {
	0% {
		top: 40px;
	    left: 433px;
	}
	100% {
		top: 108px;
		left: 33px;
	}
}
@keyframes jci-refrigerant-piping1 {
	0% {
		top: 40px;
	    left: 433px;
	}
	100% {
		top: 108px;
		left: 33px;
	}
}
@-webkit-keyframes jci-refrigerant-piping2 {
	0% {
		top: 166px;
	    right: 455px;
	}
	100% {
		top: 66px;
	    right: 105px;
	}
}
@keyframes jci-refrigerant-piping2 {
	0% {
		top: 166px;
	    right: 455px;
	}
	100% {
		top: 66px;
	    right: 105px;
	}
}
@-webkit-keyframes jci-refrigerant-piping3 {
	0% {
	    top: 186px;
	    right: 455px;
	}
	100% {
		top: 112px;
	    right: 235px;
	}
}
@keyframes jci-refrigerant-piping3 {
	0% {
	    top: 186px;
	    right: 455px;
	}
	100% {
		top: 112px;
	    right: 235px;
	}
}
@-webkit-keyframes jci-refrigerant-piping4 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 154px;
		right: 105px;
	}
}
@keyframes jci-refrigerant-piping4 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 154px;
		right: 105px;
	}
}
@-webkit-keyframes jci-refrigerant-piping5 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 199px;
	    right: 235px;
	}
}
@keyframes jci-refrigerant-piping5 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 199px;
	    right: 235px;
	}
}
@-webkit-keyframes jci-refrigerant-piping6 {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@keyframes jci-refrigerant-piping6 {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@-webkit-keyframes jci-refrigerant2-piping1 {
	0% {
		top: 108px;
		left: 33px;
	}
	100% {
		top: 35px;
		left: 533px;
	}
}
@keyframes jci-refrigerant2-piping1 {
	0% {
		top: 108px;
		left: 33px;
	}
	100% {
		top: 35px;
		left: 533px;
	}
}
@-webkit-keyframes jci-refrigerant2-piping2 {
	0% {
		top: 166px;
	    right: 455px;
	}
	100% {
		top: 216px;
	    right: 495px;
	}
}
@keyframes jci-refrigerant2-piping2 {
	0% {
		top: 166px;
	    right: 455px;
	}
	100% {
		top: 216px;
	    right: 495px;
	}
}
@-webkit-keyframes jci-refrigerant2-piping3 {
	0% {
	    top: 186px;
	    right: 455px;
	}
	100% {
		top: 252px;
	    right: 597px;
	}
}
@keyframes jci-refrigerant2-piping3 {
	0% {
	    top: 186px;
	    right: 455px;
	}
	100% {
		top: 252px;
	    right: 597px;
	}
}
@-webkit-keyframes jci-refrigerant2-piping4 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 224px;
		right: 335px;
	}
}
@keyframes jci-refrigerant2-piping4 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 224px;
		right: 335px;
	}
}
@-webkit-keyframes jci-refrigerant2-piping5 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 259px;
	    right: 430px;
	}
}
@keyframes jci-refrigerant2-piping5 {
	0% {
	    top: 286px;
	    right: 455px;
	}
	100% {
		top: 259px;
	    right: 430px;
	}
}
@-webkit-keyframes jci-refrigerant2-piping6 {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@keyframes jci-refrigerant2-piping6 {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@-webkit-keyframes fresh-air-options {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@keyframes fresh-air-options {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@-webkit-keyframes fresh-air-options1 {
	0% {
	    transform: translate(-60px, -235px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes fresh-air-options1 {
	0% {
	    transform: translate(-60px, -235px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes fresh-air-options2 {
	0% {
	    transform: translate(130px, -225px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes fresh-air-options2 {
	0% {
	    transform: translate(130px, -225px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes fresh-air-options3 {
	0% {
	    transform: translate(320px, -220px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes fresh-air-options3 {
	0% {
	    transform: translate(320px, -220px) scale(0.55);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller1 {
	0% {
	    transform: translate(-105px, 250px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller1 {
	0% {
	    transform: translate(-105px, 250px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller2 {
	0% {
	    transform: translate(57px, 268px) scale(0.32);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller2 {
	0% {
	    transform: translate(57px, 268px) scale(0.32);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller3 {
	0% {
	    transform: translate(193px, 295px) scale(0.50);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller3 {
	0% {
	    transform: translate(193px, 295px) scale(0.50);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller4 {
	0% {
	    transform: translate(205px, 265px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller4 {
	0% {
	    transform: translate(205px, 265px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller5 {
	0% {
	    transform: translate(311px, 290px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller5 {
	0% {
	    transform: translate(311px, 290px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controller6 {
	0% {
	    transform: translate(412px, 290px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes jci-controller6 {
	0% {
	    transform: translate(412px, 290px) scale(0.20);
	}
	100% {
		transform: translate(0px, 0px) scale(1);
	}
}
@-webkit-keyframes jci-controllertabs {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@keyframes jci-controllertabs {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@-webkit-keyframes jci-accessories1 {
    0% {
		top: 60px;
    }
    100% {
	    top: 106px;
	}
}
@keyframes jci-accessories1 {
    0% {
		top: 60px;
    }
    100% {
	    top: 106px;
	}
}
@-webkit-keyframes jci-accessories2 {
    0% {
		top: 60px;
    }
    100% {
	    top: 116px;
	}
    
}
@keyframes jci-accessories2 {
    0% {
		top: 60px;
    }
    100% {
	    top: 116px;
	}
    
}
@-webkit-keyframes slowtext {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}
@keyframes slowtext {
	0% {
	    opacity: 0;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;	
	}
}

/*media*/
@media all and (max-width: 1230px) {
	@-webkit-keyframes menu {
		0% {
			opacity: 0;
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		5% {
			opacity: 1;
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		50% {
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		100% {
			opacity: 1;
			top: -250px;
		    left: -160px;
		    transform: scale(0.8);
		}
	}
	@keyframes menu {
		0% {
			opacity: 0;
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		5% {
			opacity: 1;
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		50% {
			top: 60%;
		    left: 23%;
		    transform: scale(0.3);
		}
		100% {
			opacity: 1;
			top: -250px;
		    left: -160px;
		    transform: scale(0.8);
		}
	}
	.jci-main section {
		transform: scale(0.8) translate(17%,0);
	}
	#refrigerant-piping h2 {
		margin-left: 38px;
	}
	#refrigeration-cycle {
		padding-left: 25px !important;
	    padding-top: 72px;
	}
	#refrigeration-cycle img {
	    width: 100%;
	    margin-left: 0;
	}
	#refrigeration-cycle .tab-content {
	    top: 105px !important;
	}
	video {
	    position: absolute;
	    top: 50%;
	    left: 50%;
        transform: translate(-50%,-50%);
	}
	#content2_ZonedApproach {
		transform: scale(0.8) translate(-40%,5%);
	}
	#content3 {
		transform: scale(0.8) translate(-45%,5%);
	}
}
@media screen and (orientation:portrait) {
	#potrait {
		display: block;
	}
}

#intro_video{
    display: none;
}
.home_link{
    position: absolute;
    width: 55%;
    top: 91%;
    left: 63%;    
    color: #908a8a;
    display: none;
}


.home_click {
	position: relative;
	display: inline-block;
	font-size: 30px;
	color: #666666;
	
}
.home_click:before {
    content: '';
    display: block;
    position: absolute;
    left: -30px;
    top: 12px;
    width: 20px;
    height: 20px;
    background-color: #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.home_click:after {
	content: '';
    display: block;
    position: absolute;
    left: -30px;
    top: 12px;
    width: 20px;
    height: 20px;
    border:1px solid #cc0000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: home_click 0.6s infinite;
    animation: home_click 0.6s infinite;
}

@-webkit-keyframes home_click {
	0% {
		width: 20px;
		height: 20px;
	}
	100% {
		opacity: 0;
		width: 35px;
		height: 35px;
		margin: -7px;
	}
}
@keyframes home_click {
	0% {
		width: 20px;
		height: 20px;
	}
	100% {
		opacity: 0;
		width: 35px;
		height: 35px;
		margin: -7px;
	}
}


/*

    ===============================================
                    SUMAN
    ===============================================

*/
.zIndex_5{
    z-index:5;
}
.zIndex_2{
    z-index:2;
}
.panelBody_margin_right{margin-right:35px;}
.relative{position:relative;}
.absolute{position:absolute;}
.compressureEffImg{margin-left: 113px; width: 84%;}
.clickDrag{font-size:13px; text-align:right;margin-right:30px;}

.inverterBenefits_Li_margin{margin-left:20px;}
.inverterBenefits_Li_p{font-size:18px;}
.refrigeration_Header {margin-top: 48px; margin-left: 37px;}
.up90px{top:90px;}
.refrigeration-cycle-a{margin-top: -38px; line-height: 20px;}
.heat2 {
    /*width: 104%;margin-left: -164px;height: 495px;margin-top: 3px;*/
}
.heatcool2{
    width: 104% !important;
    margin-top: -5px !important;
    margin-left: -205px !important;
}
.cool1{width: 106% !important;
    margin-top: -1px;
    margin-left: -228px !important;}
.cool2{ width: 107% !important;
    margin-left: -231px !important;
    margin-top: -3px !important;
}
.cool3{margin-top: -3px;width: 113%;margin-left: -206px;}
.defrost2 {
    margin-left: -210px !important;
    margin-top: -3px !important;
    /* height: 520px; */
    width: 104% !important;
}
.tSDoor {
    width:110% !important;
}
/*

    ===============================================
                    Sheetal
    ===============================================

*/
.outdoor-animation img:nth-child(2){
	position: absolute;
	top: 86px;
	left: 85px;
}

.outdoor-animation.animated_reverse img:nth-child(2) {
    left: 25.5%;
}
.nopadding
{
	padding:0px;
}
#outdoor-units li p {
    font-size: 16px;
}
#outdoor-units h2
{
	font-size:37px;
}
.outdoor-animation a.click
{
	text-align:left;
}
.sliderul .thumbnail-img ul {
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;
    background: #f2f7fc;
    padding: 0px !important;
    height: 196px;
}

.sliderul .thumbnail-img ul li {
    vertical-align: top;
    display: inline-block;
    list-style: none;
    width: 25%;
    transition: 2s;
    -webkit-transition: 2s;
    padding: 0 15px;
    vertical-align: top;
    height: 100%;
    cursor: pointer;
}

.sliderul .thumbnail-img ul li span {
    position: absolute;
    width: 250px;
    opacity: 0;
    top: 100%;
    float: left;
    -ms-transform: scale(0); /* IE 9 */
    -webkit-transform: scale(0); /* Chrome, Safari, Opera */
    transform: scale(0);
}

.img-description {
    min-height: 250px;
    padding: 0px;
}

.sliderul {
    position: relative;
    overflow: hidden;
}

.imgtoslide {
    opacity: 1 !important;
    left: 0px !important;
    top: 0px !important;
    -webkit-transition: 1s;
    transition: 1s;
    animation-name: example;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    pointer-events: none;
}

@keyframes example {
    from {
        -ms-transform: scale(0); /* IE 9 */
        -webkit-transform: scale(0); /* Chrome, Safari, Opera */
        transform: scale(0);
    }

    to {
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Chrome, Safari, Opera */
        transform: scale(1);
    }
}

.imgdv {
    height: 118px;
    overflow: hidden;
    position: relative;
}

.imgdv img {
    max-height: 90%;
    max-width: 90%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.sliderul p {
    white-space: normal !important;
    font-style: normal;
    text-align: center;
    font-weight: bold;
    line-height: 22px;
    font-size: 17px !important;
}

.img-description p {
    text-align: left;
    font-size: 14px !important;
    font-weight: normal;
}

.activeli {
    background-color: #d9dee2;
}

.activeli .imgdv {
    opacity: 0.8;
}

.activeli {
    pointer-events: none !important;
}

.img-description h3 {
    margin-top: 0px;
    font-size: 22px;
}

.sliderul .thumbnail-img ul::-webkit-scrollbar {
    width: 1px;
    height: 12px;
    background-color: #F5F5F5;
}

.sliderul .thumbnail-img ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.sliderul .thumbnail-img ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(189,189,189)), color-stop(0.72, rgb(189,189,189)), color-stop(0.86, rgb(189,189,189)));
}

.imgtoslide {
    width: 40% !important;
    height: 250px;
}

.imgtoslide img {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 90%;
    max-width: 90%;
}

.img-description ul {
    margin-top: 0px !important;
    font-style: normal !important;
}

.tonnagedata {
    margin-bottom: 25px;
}

.thumbnail-img p {
    line-height: 17px;
    font-size: 15px !important;
}
.img-description li {
    margin-bottom: 3px;
}
.hideimg
{
	display:none;
}

.jci-main section::-webkit-scrollbar {
    width: 10px;
    height: 12px;
    background-color: #F5F5F5;
}

.jci-main section::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.jci-main section::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(189,189,189)), color-stop(0.72, rgb(189,189,189)), color-stop(0.86, rgb(189,189,189)));
}

/* Changeover boxes */
#changeover-boxes ul {
	margin-top: 0px;
}
#changeover-boxes li, #changeover-boxes p {
	font-size: 17px;
	font-style: normal;
}
#changeover-boxes .click
{
	margin-bottom: 10px;
	margin-left: 20px;
}
.blueheader
{
	background-color:#00bae5;
	color:#fff;
	font-size:20px;
	padding:0px 0;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-top:1px solid #000;
}
.blueheader h3{
	margin:0px;
	padding:6px 0px 0 0;
	font-size:20px;
}
.blueheader ul{
	padding:0px;
	margin:0px !important;
	float:right;
	width:100%;
}
.blueheader ul li {
	padding:5px 0px;
	margin: 0px;
	display: inline-block;
	width: 25%;
	text-align: center;
	border-left:1px solid #000;
	float:left;
	cursor:pointer;
}
.changeover-content
{
	border:1px solid #000;
}
.capacitydata
{
	background-color:#dfdfdf;
}
.changeoverbox-img
{
	border-top:1px solid #000;
	height:270px;
}
.activeport
{
	background-color:#0080b6;
}
.nopadding
{
	padding:0px;
}
.changeoverbox-img img
{
	animation-name:grow;
	animation-duration:1s;
	transition:2s;
	animation-fill-mode: forwards;
	margin:0px auto;
	max-width:40%;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
@keyframes grow
{
	from{max-width:0px;}
	to{max-width:40%;}
}
.capacitydata {
	padding: 8px 16px;
}
.capacitydata table {
	font-size: 17px;
	width: 100%;
	font-weight: bold;
}
.capacitydata table td:nth-child(2), .capacitydata table td:nth-child(4) {
	color:#a00000;
	padding-left:15px;
}
.capacitydata table tr td{
	padding:3px 0;
}
#fresh-air-options .sliderul .thumbnail-img ul {
    background: rgba(242, 247, 252,0.5);
	}
#fresh-air-options .activeli {
    background-color: rgba(51, 51, 51,0.1);
}
#fresh-air-options .sliderul .thumbnail-img ul
{
	/*overflow:hidden;*/
}
#fresh-air-options .sliderul
{
	margin-top:50px;
}
.defrost3 {
    margin-top: -1px !important;
    width: 99% !important;
    margin-left: -195px !important;
}
.changeoverimageswap {
    cursor: pointer;
}