/* Placement of Chat image*/
#bai-open-chat-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    color:#FFF;
    width: 100px;
    height: 100px;
    border:none;
    z-index: 10;

    /* Sti til avatar*/
    background: transparent url('https://cp.compendia.no/uploads/images/492_6041085d64259.png') no-repeat scroll 0 0;
    cursor:pointer;
  }
  

/* Bounce in animation*/

 .animated {
          
    background-position: right bottom;          
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 4s;            
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    background-color: #F19001;
    border-radius: .4em;
    padding: 10px;
    color: #FFF;
    position: fixed;
    right: 135px;
    bottom: 65px;
    font-family: Arial;
    z-index:9999 !important;		
         }
.animated:after {
	content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #F19001;
    border-right: 0;
    margin-top: -8px;
}


         
@-webkit-keyframes bounceInRight {
	0% {
    	opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        }
    80% {
    	-webkit-transform: translateX(10px);
    }
    100% {
         -webkit-transform: translateX(0);
       }
   }
         
  @keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}
         
.bounceInRight {
	-webkit-animation-name: bounceInRight;
     animation-name: bounceInRight;
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-10px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}

    @keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-10px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}

.bounceOutRight {
	-webkit-animation-name: bounceOutRight;
     animation-name: bounceOutRight;
}

.hidden {display: none;}




@media (max-width: 767px) {
    /* 60px Henry  */
   #bai-open-chat-btn {
       right: 5px;
       width: 60px;
       height: 60px;
       background: transparent url('https://cp.compendia.no/uploads/images/16_604204ae1594f.png') no-repeat scroll 0 0;
       bottom: 5px;
   } 
   /*Speech bubble*/
    .speech-bubble {    
        bottom:20px;
        right:95px;
    }

    .speech-bubble:after {    
        top: 75%;
        margin-top: -10px;
        margin-right: -20px;
    }   
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    /* 60px Henry bottom */
   #bai-open-chat-btn {
       right: 5px;
       width: 60px;
       height: 60px;
       background: transparent url('https://cp.compendia.no/uploads/images/16_604204ae1594f.png') no-repeat scroll 0 0;
       bottom: 5px;
   }

   /*Speech bubble*/
   .speech-bubble {    
       bottom:20px;
       right:95px;
   }

   .speech-bubble:after {    
       top: 75%;
       margin-top: -10px;
       margin-right: -20px;
   }   
}


/*Ipad Portrait*/

@media only screen and (min-device-width: 768px) and (max-device-width :1024px) and (orientation: portrait) {
   #bai-open-chat-btn {
       right: 15px;
       width: 60px;
       height: 60px;
       background: transparent url('https://cp.compendia.no/uploads/images/16_604204ae1594f.png') no-repeat scroll 0 0;
       bottom: 95px;
   } 
   
   /*Speech bubble*/
   .speech-bubble {    
       bottom:100px;
       right:95px;
   }

   .speech-bubble:after {    
       top: 75%;
       margin-top: -10px;
       margin-right: -20px;
   }   
}


/* Ipad landscape*/

@media only screen and (min-device-width: 768px) and (max-device-width :1024px) and (orientation: landscape) { 
   #bai-open-chat-btn {
       right: 15px;
       width: 60px;
       height: 60px;
       background: transparent url('https://cp.compendia.no/uploads/images/16_604204ae1594f.png') no-repeat scroll 0 0;
       bottom: 45px;
   }    

   /*Speech bubble*/
   .speech-bubble {    
       bottom:20px;
       right:95px;
   }

   .speech-bubble:after {    
       top: 75%;
       margin-top: -10px;
       margin-right: -20px;
   }   
}