body {
	font-family: 'Karla', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
	line-height: 1.6em;
	color: #a4a4a4;
	background-color: #fff;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: #3d3d3d;
	line-height: 1.3;
	margin-top: 1em;
}

h2 {
	font-weight: 300;
	font-size: 2em;
	margin-bottom: .3em;
}

p {
	font-weight: normal;
	font-size: 1.2em;
	line-height: 1.5em;
	text-align: left;
}

a {
	text-decoration: none;
	border: none;
	color: #ADB2DA;
	font-weight: 700;
}

a:hover {
	opacity: .8;
}

.divider {
	width: 100%;
	height: 20px;
	border-bottom: 1px solid #f1f1f1;
	margin: 2em 0 2em 0;
	color: #f1f1f1;
}



.hero {
	height: 670px;
	background: #fff;
	/*background-image: url(../images/baxter-shot.png);*/
	background-size: 70%;
	background-position: center top;
	background-repeat: no-repeat;
	text-align: center;
	margin-bottom: 0;
}

.hero h1 {
	font-size: 2.4em;
	font-weight: 400;
    margin-top: 0.1em;
	margin-bottom: 20px;
	color: #151B4C;
    line-height: 50px;
}

.hero h2 {
	color: #a4a4a4;
	font-weight: 300;
	font-size: 1.3em;
	line-height: 1.5;
	margin-top: .3em;
	margin-bottom: 0;
    
	padding-left: 3em;
	padding-right: 3em;

}

.headline {
	width: 60%;
	display: inline-block;
    margin-top: 10em;
    margin-bottom: 8em;
}

/*Begin Mailchimp Signup Form*/

#mc_embed_signup {
	border: none;
 
  padding-left: 0;
    margin-bottom: 1em;
    margin-top: 2em;
}

/*Do not remove the .clear class. This keeps it inline*/
.mc-field-group {
	display: inline-block;
}

#entry_1553297869, #entry_2005546700 {
	font-size: 0.9em;
	font-weight: 500;
	letter-spacing: .03em;
	color: #a8a8a8;
	background-color: #fff;
	padding: 1em 1em;
	border: 1px solid #E6E6E7;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
	margin-left: 0;
/*    margin-top: 10px;*/
}

/*Do not remove the .clear class. This keeps it inline*/
.clear {
	display: inline-block;
}

.button {
	border: none;
	font-size: .9em;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
	background-color: #77B5EE;
	padding: 1em 3em;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
    margin-left: .2em;
/*    margin-top: 10px;*/
}


.submit-button {
	border: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
	background-color: #77B5EE;
	padding: 1em 1.5em;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
    
    margin-top: 10px;
}

::-webkit-input-placeholder { /* WebKit browsers */
	   color:    #77B5EE;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color:    #77B5EE;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color:    #77B5EE;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	   color:   #77B5EE;
	}

.button:hover, .submit-button:hover {
	background-color: #88D37A;
}

/*End Mailchimp Signup Form CSS*/


.grids h2 {
	color: #151B4C;
	font-size: 1.8em;
	margin-top: .3em;
	margin-bottom: .1em;
	text-align: left;
	padding: 0;
}

img {
	border: 1px solid red important!;
}

.footer-divider {
	width: 100%;
	height: 20px;
	border-bottom: 1px solid #f1f1f1;
	margin: 5em 0 2em 0;
	color: #f1f1f1;
}

.footer {
	font-size: .8em;
	color: #ccc;
	width: 100%;
	text-align: center;
	margin-top: 3em;
	margin-bottom: 3em;
}

.footer p {
	padding-bottom: 2em;
	text-align: center;
	margin-left: 13em;
	margin-right: 13em;
}


.wrap-img {
    max-width: 100%;
}

.hero-img {
    margin-top: 50px;
    margin-bottom: 30px;
    max-height: 400px;
    max-width: 70%;
    
}

.mobile-img {
        display: none !important;   
    }




.baxter-avatar {
    height: 50px;
    display: inline-block;
    line-height: 50px;
    vertical-align: middle;
}

.fb-messenger {
    background-color:  #0084ff;
    margin-top: 50px;

/*    background-image: url("../images/messenger-logo.png") no-repeat top center;*/
    
  
}

.fb-messenger:hover {
    background-color:  #0084ff;
    opacity: 0.9;
}

.inline-image {
    height: 30px;
    display: inline-block;
    vertical-align: middle;

}

.finale {
    margin-top: 3em !important;
    text-align: center !important;
}

.hint {
    font-size: .99em;
	color: #ccc;
	width: 100%;
	text-align: center;
	margin-top: 1em;
	
	text-align: center;
	
}

.home-button {
    margin-top: 50px;
}

.pricing-button {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0.5em 1.5em;
}

.wrap-header h2 {
    text-align: center !important;
	
}

.wrap-header {
    margin-top: 2em !important;
    margin-bottom: 4em !important;
}

.wrap-header > p {
    text-align: center;
    
}

#get-started-page {
    margin-top: 100px !important;
}


.bot {
    text-align: left;   
    margin-right: 20%;
}

.user {
    text-align: right;
    cursor: pointer !important;
    margin-left: 20%;
    
}

#typing {
    font-style: italic;
    color: #000;
    margin-left: 10px;
 
}

.visible {
    
}

.chat-box {
/*    position: relative;*/
}


/*
.bubble {
     
    z-index: 1;
    background-color: #6A2C70;
    position: absolute;
    
    width: 30px;
    height: 30px;
    border-radius: 1em;
}


.user > .bubble {
   bottom: 30px;
    right: 0px;    
    
}

.bot > .bubble {
   bottom: 30px;
    left: 0px;    
    
}
*/

.chat-text {
    font-size: 20px;
    padding: 10px;
    border-width: 2px;
    margin: 10px;
    display: inline-block;
    border-style: solid;   
    border-radius: 12px;
    border-color: #77B5EE;
        line-height: 130%;
/*
    position: relative;
        z-index: 2;
    background-color: #fff;
*/
}

.user > .chat-text {
    border-style: dashed;
    color: #000;
    margin: 5px;
    
    
}

.user > .chat-text:hover {
    border-style: solid;
    
    
}


.bot > .chat-text {
    border-style: solid;
    color: #000;
    margin: 10px;
    max-width: 80%;
    display: inline-block;
}

.visible > .chat-text {
    border-style: solid;
    color: #fff;
    font-style:normal;
    background-color: #77B5EE;
}

#conversation {
padding-top: 100px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
        min-height: 100%;
    height: 100%;
    margin-bottom: 30px;
  
/*
    margin-left: 30%;
    margin-right: 30%;
*/

}

.chat-text > a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;   
}
/*

.chat-text > a:hover {
    text-decoration:underline;   
}
*/




.logo {
    float: left;
    width: 100%;
    background-size: cover;
  padding-top: 20px;
  padding-left: 40px;
    min-height: 15%;
      position: fixed;
    top: 0;  
    
    vertical-align:middle;
    
    
        background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)); /* Standard syntax */
    z-index: 999;
}

.lastmile-logo {
    height: 50px;
    vertical-align:middle;
}

#logo-text {
    font-size: 20px;
    font-weight: 100;
    margin-left: 5px;
    vertical-align:middle;
    display: inline-block;
    width: 50%;
}

#chat-interface {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100%;
    overflow-y: scroll;
    
}

#footer {
    position: absolute;
    top: 100%;   
}

.in-chat-img {
        width: 95%;
    margin-top: 5px;   
}

.additional-info {
    text-align: center;
    cursor: pointer;
    font-style: italic;
    margin-top: 30px;
    
}

.additional-info > a {
    color: #000;
    font-weight: bold;
    
}

.chat-avatar {
    
     display: inline-block;
    width: 40px;
    vertical-align: top;
    margin-top: 10px;

}


.coffee {
    background-image: url(../images/coffee-background.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 6em;
    
}

.coffee-pos {
    background-image: url(../images/coffee-background-v2.jpg) !important;
    
    
}


.coffee > .headline > h1  {
    font-size: 3em;
    color: #fff !important;
}

.coffee > .headline > h2 {
    color: #fff !important;
    
}

.wrap {
    text-align: center;
}

.small-pics {
    margin: 0 !important;
    padding: 0 !important;
}

.pricing-plans {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

.pricing-plans > h2 {
    text-align: center;
    
}

.pricing-img {
        width: 90%;
    margin-left: 5%;
}

.pricing-text {
    text-align: center;
}

.pricing-example {
    text-decoration: underline;
    font-style: italic;
    text-align: center;
    margin-bottom: 10px;
}



/* Media Queries */
/* Tablet */


@media (max-width: 700px) {
    
    .mobile-img {
        display: inherit !important;   
    }
    
    .desktop-img {
        display: none !important;   
    }
    
    .headline {
        width: 80%;
        
    }
    
    .footer p {
        
        margin-left: 0;
        margin-right: 0;
    }
    
    

}


@media (max-width: 768px) and (min-width: 641px) {

	a {
		text-decoration: none;
		border-bottom: 2px solid;
	}

	a:hover {
		border: none;
	}
    
    .hero-img {
        
        max-width: 90%;
    }

}

/* Mobile */
@media (max-width: 640px) and (min-width: 481px) {

    .hero-img {
        
        max-width: 95%;
    }

}

/* Mobile */
@media (max-width: 480px) and (min-width: 0px) {

  	body {
  		font-size: 17px;
  		line-height: 1.4;
  	}
    
    .hero-img {
        
        max-width: 100%;
    }

  	a {
  		text-decoration: none;
  		border-bottom: 1.5px solid;
 	}

  	a:hover {
  		border: none;
  	}
    
    .hero h1 {
        font-size: 2em;
    }
    
    .coffee > .headline > h1  {
    font-size: 2em;
    
        
    }
    
    .hero h2 {
        font-size: 1em;
        padding: 0;
    }
    
    .wrap-header h2 {
        font-size: 1.3em;
    
    }
    
    .small-pics {
        margin: 0 5% !important;
        padding: 0 !important;
    }
    
    .pricing-img {
        width: 80%;
        margin-left: 10%;
    }
    
    p {
       font-size: 0.9em; 
    }

}


@media (max-width: 900px) {
    
    .coffee {
        padding-top: 6em;
    }
    
    .coffee > .headline {
        margin-top: 3em;
    }
    
    
}


@media (max-width: 600px) {
  #conversation {
    width: 80%;   
  }
    
  #logo-text {
    font-size: 16px;   
    
      
  }
    
    .bot {
       
        margin-right: 10%;
    }   
    
    .bot > .chat-text {
        
        max-width: 70%;
        
    }
    
    .coffee {
        padding-top: 0;
    }
    
    .coffee > .headline {
        margin-top: 3em;
    }
    
    
}


@media (max-width: 400px) {
  #conversation {
    width: 90%;   
  }
    
  #logo-text {
    font-size: 16px;   
    
      
  }
    
    .bot {
       
        margin-right: 0%;
    }   
    
    .bot > .chat-text {
        
        max-width: 60%;
        
    }
    
    .coffee > .headline {
        margin-top: 2em;
    }
}