@charset "utf-8";

body {
	margin:0;
	padding:25px 0;
	background:#ebebeb;
}

.page-container {
	max-width:700px;
	width:calc(100% - 450px);
	width:-moz-calc(100% - 450px);
	width:-webkit-calc(100% - 450px);
	width:-o-calc(100% - 450px);
	margin:auto;
	height:auto;
	overflow:hidden;
	padding:0 225px;
	background:white;	
    font-family: 'Roboto', sans-serif;
}

p {
	font-size:17px;
	line-height:26px;
	margin:15px 0;
}

h1, h3 {
	font-family: 'Lato', sans-serif;
	font-weight:900;	
}

h1 { 
	font-size:37px;
	margin:20px 0;
	}
	
h3 { 
	font-size:26px;
	margin:25px 0 10px 0;
}

.discussionArea {
	padding:20px;
	border:2px solid #f0f0f0;
	border-radius:10px;
	height:auto;
	width:auto;
	overflow:hidden;
}

.logo {
	display:block;
	margin:55px auto 65px auto;
	width:202px;
	height:51px;
}


.userMessage {
	width:calc(100% - 42px);
	width:-webkit-calc(100% - 42px);
	width:-o-calc(100% - 42px);	
	width:-moz-calc(100% - 42px);	
	height:auto;
	overflow:hidden;
	padding:15px 20px 15px 20px;
	border:1px solid #e8e8e8;
	border-radius:25px;
	border-top-right-radius:0!important;
	margin-bottom:30px;
	line-height:24px;
	font-size:17px;
	background:#fafafa;
}

p a {
	text-decoration:none;
	color:#dd6c1f;
	font-weight:bold;
}

.botMessage {
	width:calc(100% - 42px);
	width:-webkit-calc(100% - 42px);
	width:-o-calc(100% - 42px);	
	width:-moz-calc(100% - 42px);	
	height:auto;
	overflow:hidden;	
	padding:15px 20px 15px 20px;
	border:1px solid #dd6c1f;
	border-radius:25px;
	border-top-left-radius:0!important;
	background:#fbf6f2;
	line-height:21px;
	font-family:Courier New;
}

.botCont {
	float:left;
	width:auto;
	max-width:60%;
	clear:both;
	height:auto;
	overflow:hidden;
	background:url(../images/Bot-user.png) no-repeat top left;
	padding-left:45px;
}

.userCont {
	float:right;
	width:auto;
	max-width:60%;
	clear:both;
	height:auto;
	overflow:hidden;	
	background:url(../images/real-User.png) no-repeat top right;
	padding-right:45px;
}

.big-UserCont {
	margin:10px 0;
	display:block;
	height:auto;
	float:left;
	clear:both;
	overflow:hidden;
	width:auto;
	max-width:80%;		
	background:url(../images/real-User.png) no-repeat top left;
	padding-left:55px;
}

.clear {
	width:auto;
	height:auto;
	overflow:hidden;
	display:block;
}

.big-botCont {
	margin:10px 0;
	display:block;
	height:auto;
	overflow:hidden;
	width:auto;
	float:left;
	clear:both;
	max-width:80%;		
	background:url(../images/Bot-user.png) no-repeat top left;
	padding-left:55px;
}

.bigBotMessage {
	width:auto;
	max-width:calc(100% - 58px);
	max-width:-webkit-calc(100% - 58px);
	max-width:-o-calc(100% - 58px);	
	max-width:-moz-calc(100% - 58px);	
	height:auto;
	overflow:hidden;	
	padding:26px 28px;
	border:1px solid #dd6c1f;
	border-radius:25px;
	border-top-left-radius:0!important;
	line-height:21px;
	font-family:Courier New;
	margin:10px 0;
}

.bigUserMessage{
	width:calc(100% - 60px);
	width:-webkit-calc(100% - 60px);
	width:-o-calc(100% - 60px);	
	width:-moz-calc(100% - 60px);	
	height:auto;
	overflow:hidden;
	padding:26px 28px;
	border:2px solid #e5e5e5;
	border-radius:25px;
	border-top-left-radius:0!important;
	line-height:24px;
	font-size:17px;
	margin:10px 0;
}

pre { margin:0;}

.cta-area {
	background:#fafafa url(../images/spotbot-app-icon.png) no-repeat;
	background-position:95% 25px;
	padding:30px;
	min-height:195px;
	text-align:left;
}

.ctaText {
	padding-bottom:40px;
	font-size:26px;
	line-height:36px;
	color:#f48233;
	font-family: 'Lato', sans-serif;	
}

.black {
	font-weight:900;
	color:#df6d1f;
}
	
@media screen and (max-width:1800px) {
	.logo {
		margin-bottom:30px!important;
	}

	.logo, .logo img {
		width:150px!important;	
		height:150px;
	}
}

@media screen and (max-width:1215px) {
	.page-container {
		padding:25px 10%!important;	
		width:calc(100% - 20%)!important;
		width:-moz-calc(100% - 20%)!important;
		width:-webkit-calc(100% - 20%)!important;
		width:-o-calc(100% - 20%)!important;
	}
}

@media screen and (max-width:1215px) {
.logo {
	margin-bottom:30px!important;
}

.logo, .logo img {
	width:150px!important;	
	height:150px;
}

h1 {
font-size:27px!important;	
}
.botCont, .userCont {
	max-width:75%!important;
}
}

@media screen and (max-width:550px) {
.botCont, .userCont {
	max-width:88%!important;
}
}

/* Messenger styles */

.fb-userMessage {
	width:calc(100% - 30px);
	width:-webkit-calc(100% - 30px);
	width:-o-calc(100% - 30px);	
	width:-moz-calc(100% - 30px);	
	height:auto;
	overflow:hidden;
	padding:8px 15px;
	border-radius:20px;
	margin-bottom:30px;
	line-height:24px;
	font-size:17px;
	background:#0084ff;
	color:white;
}



.fb-botMessage {
	width:calc(100% - 30px);
	width:-webkit-calc(100% - 30px);
	width:-o-calc(100% - 30px);	
	width:-moz-calc(100% - 30px);	
	height:auto;
	overflow:hidden;	
	padding:8px 15px;
	border-radius:25px;
	background:#f1f0f0;
	line-height:21px;
	font-family:Courier New;
}


.fb-bigBotMessage {
	width:auto;
	max-width:calc(100% - 58px);
	max-width:-webkit-calc(100% - 58px);
	max-width:-o-calc(100% - 58px);	
	max-width:-moz-calc(100% - 58px);	
	background:#f1f0f0;	
	height:auto;
	overflow:hidden;
	padding:15px;
	border-radius:25px;
	line-height:21px;
	font-family:Courier New;
	margin-bottom:10px;
}

.fb-bigUserMessage{
	color:white;
	width:calc(100% - 30px);
	width:-webkit-calc(100% - 30px);
	width:-o-calc(100% - 30px);	
	width:-moz-calc(100% - 30px);	
	background:#0084ff;
	height:auto;
	overflow:hidden;
	padding:10px 15px;
	border-radius:25px;
	line-height:24px;
	font-size:17px;
	margin-bottom:10px;
}


.quote {
	display:block;
	border-left:2px solid #f37622;
	padding-left:20px;
	font-size:18px;
	line-height:28px;
	font-style:italic;
	max-width:98%;
	color:#848484;
}

.darkBG {
	background:url(../images/darkBG.png) no-repeat center;
	background-size:cover;
	color:white;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}

.darkBG h2{
	font-size:32px;
	color:#f37622;	
	font-weight:900;
	font-family:Lato;
	margin-bottom:0;
}

ul {
	list-style-type:none;	
}

.lightBG {
	background:url(../images/lightBG.png) no-repeat center;
	background-size:cover;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}

.lightBG h2{
	font-size:32px;
	color:#f37622;	
	font-weight:900;
	margin-bottom:0;
	font-family:Lato;
}

.lightBG p {
	font-size:19px;
	margin-top:13px;
}

.darkBG p {
	font-size:19px;
	margin-top:10px;
	margin-bottom:20px;
}

.darkBG ul, .lightBG ul {
	width:100%;
	height:auto;
	overflow:hidden;
	padding:0;
	margin-top:65px;
}


.darkBG ul{
	width:80%;
	height:auto;
	overflow:hidden;
	padding:0;
	margin:55px auto 40px auto;
}

.lightBG ul li {
	float:left;
	width:33.33333333333333%;
	text-align:center;
}

.darkBG ul li{
	float:left;
	width:50%;
	text-align:center;
}

@media screen and (max-width:765px) {
	.lightBG ul li span {
		line-height:22px!important;
	}
}

@media screen and (max-width:620px) {
	.lightBG ul li{
		display:block!important;
		clear:both!important;
		margin:20px auto;
		width:100%;
	}
	
	.lightBG ul li span {
		line-height:40px!important;	
	}
}


.lightBG a img:hover, .darkBG a img:hover {
	opacity:0.7;
}

.testimonial {
	background:#fafafa;
	padding-top:50px;
	padding-bottom:75px;
	text-align:center;
}

.testimonial h2 {
	font-size:32px;
	font-weight:900;
	font-family:Lato;
	padding-bottom:38px;
	display:block;
	background:url(../images/titleLine.png) no-repeat bottom center;
}

.testimonial-body {
	display:block;
	padding-top:80px;
	background:url(../images/quote.png) no-repeat top center;
	margin-top:60px;
	margin-bottom:45px;
	font-family:Lato;
	font-size:20px;
	font-style:italic;
	line-height:36px;
	font-weight:300;
	}

.person {
	font-weight:900;
	font-family:Lato;
	display:block;
	color:#f37622;
	font-size:19px;
}


.person-title {
	display:block;
	font-size:15px;
	color:#979797;
	margin-top:7px;
}


/* SLACK STYLE */

.slackStyle {
	padding:20px;
	width:calc(100% - 40px);
	width:-o-calc(100% - 40px);	
	width:-moz-calc(100% - 40px);
	width:-webkit-calc(100% - 40px);
	height:auto;
	overflow:hidden;
	border:2px solid #f0f0f0;
	border-radius:10px;
	margin:25px 0;
}


.slackBot, .slackUser {
	width:calc(100% - 46px);
	height:auto;
	overflow:hidden;
	line-height:22px!important;
	font-size:17px!important;
	margin:10px 0;
}

.slackStyle .user {
	font-weight:bold;
	display:block;
	color:#2c2d30;	
	line-height:18px;
}


.slackStyle .date {
	color:#a4a4ab!important;
	font-weight:normal!important;
	padding-left:5px;
	font-size:15px;	
}

.slackBotMSG, .slackUserMSG {
	font-size:15px;
	line-height:24px;
	color:#595a5c;
}
.slackBot {
	display:block;
	background:url(../images/Gboot.png) no-repeat top left;
	padding-left:46px;
}

.slackUser {
	display:block;
	background:url(../images/slackUser.png) no-repeat top left;
	padding-left:46px;
}