/* 
 *  Owl Carousel CSS3 Transitions 
 *  v1.3.2
 */

.owl-origin {
	-webkit-perspective: 1200px;
	-webkit-perspective-origin-x : 50%;
	-webkit-perspective-origin-y : 50%;
	-moz-perspective : 1200px;
	-moz-perspective-origin-x : 50%;
	-moz-perspective-origin-y : 50%;
	perspective : 1200px;
}
/* fade */
.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut .7s both ease;
  -moz-animation: fadeOut .7s both ease;
  animation: fadeOut .7s both ease;
}
.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
  -webkit-animation: backSlideOut 1s both ease;
  -moz-animation: backSlideOut 1s both ease;
  animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
  -webkit-animation: backSlideIn 1s both ease;
  -moz-animation: backSlideIn 1s both ease;
  animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
  -webkit-animation: scaleToFade .7s ease both;
  -moz-animation: scaleToFade .7s ease both;
  animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
  -webkit-animation: goDown .6s ease both;
  -moz-animation: goDown .6s ease both;
  animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
  -webkit-animation: scaleUpFrom .5s ease both;
  -moz-animation: scaleUpFrom .5s ease both;
  animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
  -webkit-animation: scaleUpTo .5s ease both;
  -moz-animation: scaleUpTo .5s ease both;
  animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
  0% {opacity: 1}
}
@-moz-keyframes empty {
  0% {opacity: 1}
}
@keyframes empty {
  0% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@-moz-keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes backSlideOut {
  25% { opacity: .5; -webkit-transform: translateZ(-500px); }
  75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut {
  25% { opacity: .5; -moz-transform: translateZ(-500px); }
  75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn {
  0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; -webkit-transform: translateZ(-500px); }
  100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn {
  0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; -moz-transform: translateZ(-500px); }
  100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade {
  to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade {
  to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade {
  to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown {
  from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown {
  from { -moz-transform: translateY(-100%); }
}
@keyframes goDown {
  from { transform: translateY(-100%); }
}

@-webkit-keyframes scaleUpFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
  from { opacity: 0; transform: scale(1.5); }
}

@-webkit-keyframes scaleUpTo {
  to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo {
  to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo {
  to { opacity: 0; transform: scale(1.5); }
}
















.komli-products
{
	width:100%;
	float:left;
}

#prod
{
	width: 60%;
height: 100px;
margin: auto;
}


.product-detail
{
float: left;
position: relative;
margin: auto;
text-align: center;
width: 100%;
}



.kp {
    float:left;
    display:block;
    height: auto;
    width:20%;
    cursor:pointer;
	color:#333;
	font-size:13px;
    box-sizing:border-box;
	line-height:13px;
}



.kp:hover
{
	color:#eb3245;
}

#divWrap
{
	    width: 70%;
    text-align: center;
    margin: auto;
	position:relative;
	
}


#prod .Active{
   color:#eb3245;
}



.k-engage
{
	
	width: 55px;
height: 55px;
margin: auto;
background-repeat: no-repeat;
border-radius: 50%;
background-position: 50% 50%;
margin-top:5px;
margin-bottom:5px;
transition:all 0.3s ease-in-out;
}

.Active .k-engage, .k-engage:hover
{
	width: 55px;
height: 55px;
margin: auto;
background-repeat: no-repeat;
border-radius: 50%;
background-position: 50% 50%;
margin-top:5px;
margin-bottom:5px;
background-color:#eb3245;
transition:all 0.5s ease-in-out;
transform:rotate(360deg)
}


.p1
{
	background:url(../images/komli-engage.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
}

.Active .p1, .p1:hover
{
	background-image: url(../images/komli-engagew.png);
}


.p2
{
	background:url(../images/komli-play.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
}

.Active .p2, .p2:hover
{
	background-image: url(../images/komli-playw.png);
}


.p3
{
	background:url(../images/komli-mobile.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
}

.Active .p3, .p3:hover
{
	background-image: url(../images/komli-mobilew.png);
}


.p4
{
	background:url(../images/komli-audience.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
}

.Active .p4, .p4:hover
{
	background-image: url(../images/komli-audiencew.png);
}


.p5
{
	background:url(../images/komli-roi.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
}

.Active .p5, .p5:hover
{
	background-image: url(../images/komli-roiw.png);
}







/*fadeIn code*/
#divWrap .product-detail{
    display:none;
}
#divWrap .Active{
    display:block;
    -webkit-animation:fadeUp ease-in-out 0.5s;
    animation:fadeUp ease-in-out 0.5s;
}
@-webkit-keyframes fadeUp{
	from{opacity:0;margin-top:30px;}
	to  {opacity:1;margin-top:0;}
}
@keyframes fadeUp{
	from{opacity:0;margin-top:30px;}
	to  {opacity:1;margin-top:0;}
}






#pr-desc
{
	font-size:16px;
	color:#000;
	font-weight:300;
	line-height:26px;
	text-align:center;
}

.porduct-logo
{
	padding-top: 50px;
padding-bottom: 20px;
}


.learn
{
	width:100%;
	float:left;
	text-align:center;
	padding-top:20px;
}