@media 
	only screen and (max-width:319px),
	only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait),
	only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) ,
	only screen and (min-width:481px) and (max-width:767px)  
{


.wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#fff;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}


.wh.hp .colFrame {
	padding: 50px 20px;
}

.wh.hp .colFrame .hstBxs {
	flex-wrap:wrap;
}

.wh.hp .hstBxs_li {
    position: relative;
    top: 0;
    margin-bottom: 30px;
    old-height: 202px;
    height: 80px;
	width:100%; 
}

.wh.hp .hstTypBx {
    position: relative;
    top: 0;
    height: 100%;
    background: xx-red;
    border: 1px solid rgba(0, 75, 100, .25);
    overflow: hidden;
    box-shadow: 0px 5px 15px -5px #999;
	width: 100%;
}

.wh.hp .hstTypBx .topBx {
    position: relative;
    top: 0;
    height: 35%;
    background: transparent;
    padding: 10px 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn1 {
    font-family: 'OpenSansBold';
    font-weight: bold;
    font-size: 75%;
    line-height: 1.25em;
    color: rgba(0, 75, 100, 1);
    transition: all .2s ease-in-out;
	display: block;
}

.wh.hp .hstTypBx .btmBx {
    position: relative;
    top: 0;
    height: 65%;
    xx-background: rgba(3, 169, 244, 1);
    padding: 0 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn2 {
    font-family: 'OpenSansRegular';
    font-weight: normal;
    font-size: 80%;
    line-height: 1.0;
    position: relative;
    top: 10px;
    transition: all .2s ease-in-out;
	color:#f00;
}

.wh.hp .wspBnrBxs_btn {
    display: block;
    width: 40%;
    font-family: 'OpenSansSemiBold';
    font-weight: bold;
    font-size: 100%;
    line-height: 1.5em;
    color: #03a9f4;
    background: rgba(0, 75, 100, 1);
    border: 0 solid #03a9f4;
}

.wh.hp .wspBnrBxs_btn > a {
    display: block;
    padding: 15px 20px;
    color: #fff;
}

/* .wh.hp .hstTypBx:hover .topBx {
    height: 45%;
    background: rgba(3,169,244,0);
    transition: all .2s ease-in-out;
} 

.wh.hp .hstTypBx:hover .topBx .spn1 {
    color: rgba(3,169,244,1);
    font-family: 'OpenSansBold';
    font-size: 90%;
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx {
	top:10px;
    height: 55%;
    background: transparent;
    color: rgba(3,169,244,1);
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx .spn2 {
    display: inline-block;
    font-size: 80%;
    margin-bottom: 0px;
    color: red;
    top: -10px;
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
    display: block;
    transition: all .2s ease-in-out;
}*/

/* x319 i320-x480-P i320-x480-L i481-x767 */
}




@media only screen and (min-width:360px) and (max-width:767px) and (orientation: landscape) {

.wh.hp .flipBxGrpCan {
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 0 25px 0;
}
.wh.hp .scene {
    width: 48%;
	height: 150px;
	}

.wh.hp .cfBkHd {
	padding: 10px 10px;
    background: #ffa500;
    border-left: 5px solid #003366;
    color: #fff;
    margin: 0 0 5px 0;
    text-align: left;
}


.wh.hp .cfBack .btmBtnsPnl {
	position: absolute;
	top: 0;
	left: initial;
	width: initial;
	right: 0;
	margin: 0 auto;
	padding: 0px;
	height: 100%;
}


.wh.hp .cfBack .btmBtnsPnl .rvt {
    display: block;
    position: absolute;
    right: 0;
    border: 0 solid #fff;
    border-radius: 50px;
    width: 50px;
    height: 50px margin: 3px;
    overflow: hidden;
    opacity: .5;
    bottom: 0;
    height: 50px;
    zoom: .75;
}


.wh.hp .cfBack .btmBtnsPnl .kmBtnDv {
    position: relative;
    right: 0;
    top: 0;
    display: block;
    border: 0px solid #aaa;
    border-radius: 0px;
    width: 45px;
    height: 45px;
    opacity: .5;
    margin: 0;
    background: #ffd500;
    zoom: .9;
}

/* i360-x767-L*/
}





@media only screen and (min-width:768px) and (max-width:991px) {

.wh.hp .flxItmSec2 {width:47%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#fff;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}

.wh.hp .thrColSec02 {padding:25px 0; xxborder-top:1px solid #ddd; text-align:center}

.wh.hp .flipBxGrpCan {flex-wrap:wrap; margin: 0 0 25px 0;}

.wh.hp .scene {
  xx-width: 200px;
  height: 250px;
  border: 1px solid transparent;
  margin: 20px 0;
  perspective: 800px;
}

.wh.hp .card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.wh.hp .cardFace {
	padding:0px;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	line-height: 1.0em;
	color: white;
	text-align: center;
	font-weight: normal;
	font-size: 1.0em;
}

.wh.hp .cfFront {
	background: rgba(255,255,255,.95) 75% 80% ; 
	color:#ffc900;
	flex-direction:column;
	justify-content: flex-start;
	border: 1px solid #ddd;
}

.wh.hp .cfFr.img-holder  {
	background:red-xx; 
	margin: 0 0 10px 0 ;
	position: relative;
	top: 0;
	width: 100%;
	xx-height: 150px;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 0px;
}

.wh.hp .cfFr.img-holder .iconImg {
	position: relative;
    top: 0;
    left: 0;
	width:100%;
}

.wh.hp .cfFrHd {
    position: relative;
    top: 0;
	padding: 10px 0;
	background: #eaefff;

}

.wh.hp .cfFrHd-txt {
	display: block;
    font-family: 'OpenSansSemiBold';
    font-size: 140%;
    background: #ffaa00;
    background: transparent;
    padding: 0;
    line-height: 1.0em;
}

.wh.hp .cfFrBtn {	
	display:block; 
	border:1px solid #ddd; 
	border-radius:0px; 
	width:125px; 
	margin-top:30px; 
	margin-left:20px;
	background:transparent;
	color:#ccc; 
	transition:all .2s ease;
}

.wh.hp .cfFrBtn:hover { 
	border:1px solid #ffb500; 
	background:linear-gradient(45deg, #ffb500, #ffc900, #ffa400 );  
	box-shadow:5px 3px 5px -1px #999;
	color:#fff;
	transition:all .2s ease;
	}

.wh.hp .cfFrBtnTxt {font:normal normal normal 15px/1.0 'Arial'; display:block; line-height:2.5}



.wh.hp .card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}


/* shevesh 222 */
.wh.hp .cfBack {
	padding:0px;
	background: #ffb500;
	background: #fff;
	transform: rotateY(180deg); 
	pointer-events: none;
	border: 1px solid #ffa400;
}

.wh.hp .cfBkHd {
	xx-background:rgba(200,200,200,0.25);
	background:#ffa500;
	padding:15px 0;
	position: relative;
	top: 0;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 15px;
}

.wh.hp .cfBkTxtBx {
	position:relative;
	top:0px;
	padding:0px 20px;
}

.wh.hp .cfBkTxtBx .ptxt {
    line-height: 1.5;
    font-size: 100%;
	color:#003366;
	text-align: justify;
}

.wh.hp .cfBkHd-txt {
	display: block;
    font-family: OpenSansSemiBold;
    font-size: 150%;
    line-height: 1.0em;
	color:#fff;
}

.wh.hp .cfBkHd-img {
	xxwidth:50px; 
	padding:10px 0 25px 0; 
	xxbackground:#fff; 
	border-radius:50px
}

.wh.hp .cfBkHd .iconBkTop {
	position: absolute;
    top: -120px;
    left: 0;
    zoom: .5;
}

.wh.hp .cfBack .btmBtnsPnl {
	position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    margin: 0 auto;
	padding:5px;
	}

.wh.hp .cfBack .btmBtnsPnl .rvt { 	
    display: block;
    position: relative;
    left: 0;
    border-radius: 100%;
    width: 45px;
    overflow: hidden;
    opacity: .3;
    border: 1px solid #aaa;
    height: 45px;
    margin: 0;
    xx-background: pink;
}

.wh.hp .cfBack .btmBtnsPnl .rvt:hover {opacity:1; }

.wh.hp .cfBack .btmBtnsPnl .rvt a { 
	pointer-events: all; 
	z-index:9; 
	display:block;
	height: 100%;
}


.wh.hp .cfBack .btmBtnsPnl .rvt .flpBk.caretRt01-Gnr:before { 
	xx-display:none;
    transform: rotate(0deg);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border-left: 1px solid transparent;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    top: 12px;
    left: 10px;
}

.wh.hp .cfBack .btmBtnsPnl .rvt .flpBk.caretRt01-Gnr:after { 
    position: relative;
    top: 8px;
    left: 13px;
    width: 10px;
    height: 10px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    transform: rotate(15deg);
    background: transparent;
}


/* 
.wh.hp .cfBack .btmBtnsPnl .rvt a .flipIcn { 
	position: absolute;
	top: -52px;
	left: 0px;
	xx-width: 50px;
	background: #ccc;
} 
*/

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv { 
	position: relative;
    right: 0;
    top: 0;
    display: block;
    border: 1px solid #aaa;
    border-radius: 50px;
    width: 45px;
    height: 45px;
    opacity: .3;
    margin: 0;
}

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv:hover {	opacity:1; }

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv a { 
	pointer-events: all; 
	z-index:9; 
	display:block; 
	position: relative;
    top: 0;
    height: 100%; 
	color: #aaa;
}

.wh.hp .cfBack .btmBtnsPnl .expMore:before {display:none}
.wh.hp .cfBack .btmBtnsPnl .expMore:after {
    position: relative;
    top: 12px;
    width: 20px;
    height: 20px;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #999;
    border-top: 5px solid #999;
    transform: rotate(45deg);
    left: 5px;
}
/* 
.wh.hp .cfBack .btmBtnsPnl .kmBtnDv a .kmBtnTxt {
	display: block;
    line-height: .7;
    height: 100%;
    font-size: 300%;
	padding:5px 0;
} */

/*
.fb1 .cfFr.img-holder  .iconImg {left:-0px}
.fb2 .cfFr.img-holder  .iconImg {left:-110px}
.fb3 .cfFr.img-holder  .iconImg {left:-220px}
.fb4 .cfFr.img-holder  .iconImg {left:-330px}
.fb5 .cfFr.img-holder  .iconImg {left:-440px}
.fb6 .cfFr.img-holder  .iconImg {left:-550px}

.fb2 .cfBkHd .iconBkTop {left:-110px}
.fb3 .cfBkHd .iconBkTop {left:-220px}
.fb4 .cfBkHd .iconBkTop {left:-330px}
.fb5 .cfBkHd .iconBkTop {left:-440px}
.fb6 .cfBkHd .iconBkTop {left:-550px}
*/

.wh.hp .sliderBtnCan {
	position:relative; 
	top:0; 
	width:100%; 
	height:40px;
}

.wh.hp .switch-toggle {
   background: transparent;
   border-radius:100px;
   overflow:hidden;

	justify-content: flex-end;
	padding: 5px 30px;
	width: 206px;
    margin-left: auto;
    padding: 5px 8px;
	border:1px solid #ddd;

}

.wh.hp .switch-toggle input {
  position: absolute;
  opacity: 0;
}

.wh.hp .switch-toggle input + label {
  padding: 7px;
  float:left;
  color: #003366;
  cursor: pointer;
  font-weight:bold;
}

.wh.hp .switch-toggle input:checked + label {
  background: #ffa400;
  border-radius: 50px;
  color: #fff;
  font-weight:bold;
  padding:7px 10px;
}

/*	https://stackoverflow.com/questions/23661970/3-state-css-toggle-switch	*/


/* i768-x991 */
}






@media only screen and (min-width:992px) and (max-width:1199px) {

.wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#fff;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}

.wh.hp .thrColSec02 {padding:25px 0; xxborder-top:1px solid #ddd; text-align:center}

.wh.hp .flipBxGrpCan {flex-wrap:wrap; margin: 0 0 25px 0;}

.wh.hp .scene {
  xx-width: 200px;
  height: 240px;
  border: 1px solid transparent;
  margin: 20px 0;
  perspective: 800px;
}

.wh.hp .card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.wh.hp .cardFace {
	padding:0px;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	line-height: 1.0em;
	color: white;
	text-align: center;
	font-weight: normal;
	font-size: 1.0em;
}

.wh.hp .cfFront {
	background: rgba(255,255,255,.95) 75% 80% ; 
	color:#ffc900;
	flex-direction:column;
	justify-content: flex-start;
	border: 1px solid #ddd;
}

.wh.hp .cfFr.img-holder  {
	background:red-xx; 
	margin: 0 0 10px 0 ;
	position: relative;
	top: 0;
	width: 100%;
	xx-height: 150px;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 0px;
}

.wh.hp .cfFr.img-holder .iconImg {
	position: relative;
    top: 0;
    left: 0;
	width:100%;
}

.wh.hp .cfFrHd {
    position: relative;
    top: 0;
	padding: 10px 0;
	background: #eaefff;

}

.wh.hp .cfFrHd-txt {
	display: block;
    font-family: 'OpenSansSemiBold';
    font-size: 110%;
    background: #ffaa00;
    background: transparent;
    padding: 0;
    line-height: 1.0em;
}

.wh.hp .cfFrBtn {	
	display:block; 
	border:1px solid #ddd; 
	border-radius:0px; 
	width:125px; 
	margin-top:30px; 
	margin-left:20px;
	background:transparent;
	color:#ccc; 
	transition:all .2s ease;
}

.wh.hp .cfFrBtn:hover { 
	border:1px solid #ffb500; 
	background:linear-gradient(45deg, #ffb500, #ffc900, #ffa400 );  
	box-shadow:5px 3px 5px -1px #999;
	color:#fff;
	transition:all .2s ease;
	}

.wh.hp .cfFrBtnTxt {font:normal normal normal 15px/1.0 'Arial'; display:block; line-height:2.5}



.wh.hp .card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}


/* shevesh 222 */
.wh.hp .cfBack {
	padding:0px;
	background: #ffb500;
	background: #fff;
	transform: rotateY(180deg); 
	pointer-events: none;
	border: 1px solid #ffa400;
}

.wh.hp .cfBkHd {
	xx-background:rgba(200,200,200,0.25);
	background:#ffa500;
	padding:12px 0;
	position: relative;
	top: 0;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 10px;
}

.wh.hp .cfBkTxtBx {
	position:relative;
	top:0px;
	padding:0px 15px;
}

.wh.hp .cfBkTxtBx .ptxt {
    line-height: 1.5;
    font-size: 90%;
	color:#003366;
	text-align: justify;
}

.wh.hp .cfBkHd-txt {
	display: block;
    font-family: OpenSansSemiBold;
    font-size: 125%;
    line-height: 1.0em;
	color:#fff;
}

.wh.hp .cfBkHd-img {
	xxwidth:50px; 
	padding:10px 0 25px 0; 
	xxbackground:#fff; 
	border-radius:50px
}

.wh.hp .cfBkHd .iconBkTop {
	position: absolute;
    top: -120px;
    left: 0;
    zoom: .5;
}

.wh.hp .cfBack .btmBtnsPnl {
	position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    margin: 0 auto;
	padding:5px;
	}

.wh.hp .cfBack .btmBtnsPnl .rvt { 	
    display: block;
    position: relative;
    left: 0;
    border-radius: 100%;
    width: 45px;
    overflow: hidden;
    opacity: .3;
    border: 1px solid #aaa;
    height: 45px;
    margin: 0;
    xx-background: pink;
}

.wh.hp .cfBack .btmBtnsPnl .rvt:hover {opacity:1; }

.wh.hp .cfBack .btmBtnsPnl .rvt a { 
	pointer-events: all; 
	z-index:9; 
	display:block;
	height: 100%;
}


.wh.hp .cfBack .btmBtnsPnl .rvt .flpBk.caretRt01-Gnr:before { 
	xx-display:none;
    transform: rotate(0deg);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border-left: 1px solid transparent;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    top: 12px;
    left: 10px;
}

.wh.hp .cfBack .btmBtnsPnl .rvt .flpBk.caretRt01-Gnr:after { 
    position: relative;
    top: 8px;
    left: 13px;
    width: 10px;
    height: 10px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    transform: rotate(15deg);
    background: transparent;
}


/* 
.wh.hp .cfBack .btmBtnsPnl .rvt a .flipIcn { 
	position: absolute;
	top: -52px;
	left: 0px;
	xx-width: 50px;
	background: #ccc;
} 
*/

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv { 
	position: relative;
    right: 0;
    top: 0;
    display: block;
    border: 1px solid #aaa;
    border-radius: 50px;
    width: 45px;
    height: 45px;
    opacity: .3;
    margin: 0;
}

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv:hover {	opacity:1; }

.wh.hp .cfBack .btmBtnsPnl .kmBtnDv a { 
	pointer-events: all; 
	z-index:9; 
	display:block; 
	position: relative;
    top: 0;
    height: 100%; 
	color: #aaa;
}

.wh.hp .cfBack .btmBtnsPnl .expMore:before {display:none}
.wh.hp .cfBack .btmBtnsPnl .expMore:after {
    position: relative;
    top: 12px;
    width: 20px;
    height: 20px;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #999;
    border-top: 5px solid #999;
    transform: rotate(45deg);
    left: 5px;
}
/* 
.wh.hp .cfBack .btmBtnsPnl .kmBtnDv a .kmBtnTxt {
	display: block;
    line-height: .7;
    height: 100%;
    font-size: 300%;
	padding:5px 0;
} */

/*
.fb1 .cfFr.img-holder  .iconImg {left:-0px}
.fb2 .cfFr.img-holder  .iconImg {left:-110px}
.fb3 .cfFr.img-holder  .iconImg {left:-220px}
.fb4 .cfFr.img-holder  .iconImg {left:-330px}
.fb5 .cfFr.img-holder  .iconImg {left:-440px}
.fb6 .cfFr.img-holder  .iconImg {left:-550px}

.fb2 .cfBkHd .iconBkTop {left:-110px}
.fb3 .cfBkHd .iconBkTop {left:-220px}
.fb4 .cfBkHd .iconBkTop {left:-330px}
.fb5 .cfBkHd .iconBkTop {left:-440px}
.fb6 .cfBkHd .iconBkTop {left:-550px}
*/

.wh.hp .sliderBtnCan {
	position:relative; 
	top:0; 
	width:100%; 
	height:40px;
}

.wh.hp .switch-toggle {
   background: transparent;
   border-radius:100px;
   overflow:hidden;

	justify-content: flex-end;
	padding: 5px 30px;
	width: 206px;
    margin-left: auto;
    padding: 5px 8px;
	border:1px solid #ddd;

}

.wh.hp .switch-toggle input {
  position: absolute;
  opacity: 0;
}

.wh.hp .switch-toggle input + label {
  padding: 7px;
  float:left;
  color: #003366;
  cursor: pointer;
  font-weight:bold;
}

.wh.hp .switch-toggle input:checked + label {
  background: #ffa400;
  border-radius: 50px;
  color: #fff;
  font-weight:bold;
  padding:7px 10px;
}

/*	https://stackoverflow.com/questions/23661970/3-state-css-toggle-switch	*/


/* i992-x992 */
}














@media only screen and (min-width:1200px) {

.wh.hp .flxItmSec2 {width:30%; border:1px solid #ffa400; margin-right:10px; height:200px; background: transparent}

.wh.hp .pgMtr.jContainer {
	background:#f7f8f9;	
	xx-background: linear-gradient(-45deg, #ffa400, transparent, transparent, #ffb500);
	xx-background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	xx-background:linear-gradient(45deg,#009,#003366 , transparent, #ffa400);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
	}

@keyframes xx-gradientBG {
	0% {		background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}

.wh.hp .colFrame {
	padding: 50px 0px;
}

.wh.hp .colFrame .hstBxs {
	flex-wrap:wrap;
}

.wh.hp .hstBxs_li {
    position: relative;
    top: 0;
    margin-bottom: 30px;
    old-height: 202px;
    height: 220px;
	width:24%; 
	flex-direction: column;
}



.wh.hp .hstTypBx {
    position: relative;
    top: 0;
    min-height: 100%;
    background: #f7f8f9;
    border: 1px solid rgba(0, 75, 100, .25);
    overflow: hidden;
    box-shadow: 0px 5px 15px -5px #999;
}


.wh.hp .hstTypBx .topBx {
    position: relative;
    top: 0;
    height: 60%;
    background: transparent;
    padding: 20px 20px;
    transition: all .2s ease-in-out;
}
.wh.hp .hstBxs_li:hover .hstTypBx { background: #fff; border: 1px solid rgba(255,100, 200, .5);}

.wh.hp .hstBxs_li:hover .topBx {  height: 40%; }
.wh.hp .hstBxs_li:hover .btmBx {  height: 20%; padding: 0px 20px;}

.wh.hp .hstBxs_li:hover  .wspBnrBxs_btn {display:block; position: relative; top:-75px; width:80%; margin:0 auto; } 


.wh.hp .spn1 {
	display:block; 
    font-family: 'OpenSansBold';
    font-weight: bold;
    font-size: 100%;
    line-height: 1.0em;
    color: rgba(0, 75, 100, 1);
    transition: all .2s ease-in-out;
}

.wh.hp .hstTypBx .btmBx {
    position: relative;
    top: 0;
    height: 45%;
    background: rgba(0, 75, 100, 1);
    padding: 20px 20px;
    transition: all .2s ease-in-out;
}

.wh.hp .spn2 {
    font-family: 'OpenSansRegular';
    font-weight: normal;
    font-size: 100%;
    line-height: 1.25em;
    position: relative;
    top: 0px;
    transition: all .2s ease-in-out;
	color:#fff;
}

.wh.hp .wspBnrBxs_btn {
    display: none;
    width: 100%;
    font-family: 'OpenSansSemiBold';
    font-weight: bold;
    font-size: 125%;
    line-height: 1.0em;
    color: rgba(0, 75, 100, 1);
	background: rgb(255, 204, 0);
    border: rgb(255, 204, 100);
    border-radius: 3px;
}

.wh.hp .wspBnrBxs_btn > a {
    display: block;
    padding: 15px 20px;
    color: #fff;
}
/*

.wh.hp .hstTypBx:hover .topBx {
    height: 45%;
    background: rgba(3,169,244,0);
    transition: all .2s ease-in-out;
}
*/
.wh.hp .hstBxs_li:hover .topBx .spn1 {
    color: rgba(0, 75, 100, 1);
    font-family: 'OpenSansBold';
    font-size: 90%;
    transition: all .2s ease-in-out;
}
/**/
.wh.hp .hstBxs_li:hover .btmBx {
	top:10px;
    height: 55%;
    background: transparent;
    color: rgba(3,169,244,1);
    transition: all .2s ease-in-out;
}

 .wh.hp .hstBxs_li:hover .btmBx .spn2 {
    display: inline-block;
    font-size: 80%;
    margin-bottom: 0px;
    color: red;
    top: -10px;
    transition: all .2s ease-in-out;
} 

/* .wh.hp .hstTypBx:hover .btmBx .wspBnrBxs_btn {
    display: block;
    transition: all .2s ease-in-out;
} */

/* i1200 */
}