.btn-outline {
  color: #666;
  background-color: transparent;
  border-color: #666;
}

.btn-outline:hover {
  color: #428bca;
  border-color: #428bca;
}

.homepage-product .btn {
  margin-bottom: 5px;
}

.btn-outline-white {
  color: #FFF;
  background-color: transparent;
  border-color: #FFF;
}

.btn-outline-white:hover {
  color: #0CF;
  border-color: #0CF;
}

.btn-primary {
  border-color: #428bca;
}

.btn-success {
  border-color: #5cb85c;
}

.page-content h1 {
  font-family: "Open Sans", "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  margin-top: 0px;
}


/* Added to test video 092118 Alex Olvera */

#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  max-height: 360px;
  margin-left: -300px;
  margin-top: -180px;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}

.test:hover ~ .test2 {
  display: none;
}
/* Added to test video 090221 Alex Olvera */
#fade2 {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light2 {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  max-height: 360px;
  margin-left: -300px;
  margin-top: -180px;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

#boxclose2 {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose2:before {
  content: "×";
}

#fade2:hover ~ #boxclose2 {
  display:none;
}

.test2:hover ~ .test2 {
  display: none;
}
/* Added to test video 090221 Alex Olvera */
footer {
  background-color: #181f2b !important; 
  color: #FFF !important; 
  border-top: 0px !important;
  margin-top: 15px; 
  padding-top: 15px;
  font-size: 11px;
  font-family: "Open Sans", "cronos-pro-display", sans-serif;
  font-weight: 300;
  background-image: linear-gradient(180deg, #478ac9, transparent);
}

footer h3 {
  margin-top: 0px;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

footer .col-sm-2, footer .col-sm-3 {
  padding-top: 10px;
}

footer .copyright {
  margin-top: 10px;
}

footer a {
  color: #7c9ebb;
}

footer a:hover {
  color: #0CF;
  text-decoration: underline;
}

/* chat container at footer */
		/* start 110724 */
		/* Style the chat box container */
		#chat-box-container {
			position: fixed;
			font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
			bottom: 45px;
			right: 0px;
			width: 490px;
			transition: height 0.3s ease-in-out;
		}

		/* Style the chat box header */
		#chat-box-header {
			background-color: #0CF;
			color: #fff;
			padding: 10px;
			cursor: pointer;
			
		}
		#chat-box-body{
			height: 375px;
			display: none;
		}		
		/* Hide the chat box body initially */
		.hidden {
			height: 20px;
		}

		/* Show the chat box body when clicked */
		.show {
			height: 30px;
			display: block;
		}	
			
		/* End of new chat container 110724*/
		.chat_bubble {
    		position: relative;
    		background: linear-gradient(31deg, #1092ce 36%, #3de091 100%);
    		color: #ffffff;
    		font-family: Arial;
    		font-size: 20px;
    		line-height: 55px;
    		box-shadow: 2.5px 2.5px 2.5px 0px #A3A3A3;
    		text-align: center;
    		width: 150px;
    		border-radius: 20px;
    		padding: 0px;
		}
		.chat_bubble:after {
    		content: '';
    		position: absolute;
    		display: block;
    		width: 0;
    		z-index: 1;
    		border-style: solid;
    		border-width: 0 34px 20px 0;
    		border-color: transparent #1092ce transparent transparent;
    		bottom: -20px;
    		left: 42%;
    		margin-left: -17px;
		}
		.chat_bubble:hover{
		  color: white;
		  background-color: grey;
		  cursor: pointer;
		}
		.parent {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			padding-bottom: 20px;
			padding-right: 10px;
		}

		.div1 { grid-area: 1 / 1 / 2 / 2; }
		.div2 { grid-area: 1 / 3 / 3 / 3; }
/*  -------------------------END-----------------*/
/* Added to test video 090221 Alex Olvera */
.chatbot {
    height: 4rem;
    width: 8rem;
    border-radius: 36px;
    border: 4px solid #949494;
    padding: 0 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    transform: translateY(0);
    animation: chatDownUp 2s ease-in-out infinite;
}

.chatbot::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: -1.3rem;
    left: 2rem;
    border-left: 2px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid #949494;
}

.chatbot_loading {
    height: 0.8rem;
    width: 0.8rem;
    border-radius: 50%;
    background-color: #949494;
    transform: scale(1);
}

.chatbot_loading:nth-child(1) {
    animation: pulse 1.5s ease-in-out infinite;
    animation-delay: 0;
}

.chatbot_loading:nth-child(2) {
    animation: pulse 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.chatbot_loading:nth-child(3) {
    animation: pulse 1.5s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* ************ANIMATION************* */

@keyframes chatDownUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1rem);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bgTransition {
    0% {
        background-position: 0% 80%;
    }
    50% {
        background-position: 80% 100%;
    }
    100% {
        background-position: 0% 90%;
    }
}