
body {
	font-family: 'Rubik', sans-serif;
	/*padding-top:0px;
	margin-top: 0px;*/
}

h1 {
	font-size: 40px
}
h2 {
	font-size: 32px
}

h3 {
	font-size: 24px
}
p {
	font-family: 'Lato';
	font-size: 20px;
}

.emojis {
	background: url("https://s3.amazonaws.com/trygrowbot/web/Splash_10_16/1x/emoji-illustration%401x.png") repeat center center fixed ; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 500px;

}
.emojis-green {
	background: url("https://s3.amazonaws.com/trygrowbot/web/landing+pages/splash_1_30/emojis_green.png") repeat center center fixed ; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 500px;
	color:white;
}

.emoji-img {
    width: 25px;
    height: 25px;
    vertical-align: text-bottom;
}

.title {
	font-size:1.8em;
	text-transform: uppercase;
	line-height:1.2em;
}
.subtitle {
	font-size: 3.0em;
	/*text-transform: uppercase;*/
	line-height:1.2em;
	/*color:white;*/
}

.emoji {
	font-size:40px;
}
.value-demo {
	border-radius:8px;
}
.values {
	box-shadow: 0px 20px 40px 0px rgba(116, 206, 175, 0.5);

}
.benefits h1 {
	font-size:80px;
}
.green {
	background-color:rgba(116, 206, 175, 1.0);
	color:white;

}
.green h1 {
	font-size: 60px;
}
.gray {
	background-color:#F7F7F7
}
.lead-img {
	/*width:20%;*/
	/*border:2px solid #F7F7F7;*/
	max-width:600px;
	border-radius:5px;
	/*overflow:hidden;*/
		/*margin-bottom:-100px;
		clip-path: inset(0px 0px 80px 0px);*/

	}

	/*pricing*/
	#containerElem .popover {
		width:200px;
		height:250px;
	}

	/*end pricing*/


	/*start 101*/
	.message {
		/*font-family: Lato;*/
	}
	.message a {
		color:#007AB8;
		font-weight:bold;
		/*font-size:80px;*/
	}
	.reaction {
		border:1px solid #C7E6FE;
		border-radius:3px;
		background-color:#F4FAFF;
		color:#63BAFC;
		/*font-size:1.2em;*/
		padding: 4px 6px;
		font-weight:bolder;
	}
	.faq .panel {
		margin: 25px 0px;
	}
	.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
		color:white;
		background-color:#74CEAF;
	}


	/*end 101*/

	/*start landing*/

	.beta {
		font-size: .4em;
		color:rgba(116, 206, 175, 1.0);
	}

	.testimonial-img {
		border-radius:50%;
		width:75px;
	}

	img.logos {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		filter: #CCCCCC; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
		/*max-width:2px;*/
		vertical-align:middle;
	}

	/*end landing*/
	/*start header*/

	.header-shadow {
		box-shadow: 0px 15px 25px rgba(0,0,0,0.1);
	}


	.cbp-af-header {
		position: relative;
		/*position:fixed;*/
		/*adding margin to make up for bullshit p-t-md in container-fluid i cant get rid of*/
		margin-top:-30px;
		top: 0;
		left: 0;
		width: 100%;
		/*background: white;*/
		z-index: 10000;
		height: 100px;
		overflow: hidden;
		-webkit-transition: height 0.3s;
		-moz-transition: height 0.3s;
		transition: height 0.3s;
		/*background:rgba(0,0,0,0.0);*/
		background: url("https://s3.amazonaws.com/trygrowbot/web/Splash_10_16/1x/emoji-illustration%401x.png") repeat center center fixed ; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: 500px;
	}

	.cbp-af-header .cbp-af-inner {
		width: 90%;
		max-width: 80em;
		margin: 0 auto;
		padding: 0 1.875em;
	}

	.cbp-af-header h1,
	.cbp-af-header nav {
		display: inline-block;
		position: relative;
	}

	/* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
	.cbp-af-header h1,
	.cbp-af-header nav a {
		line-height: 100px;
	}
	.cbp-af-header a {
		border: 2px solid rgba(0,0,0,0.0);
		padding:10px;
		border-radius:4px;
	}

	.cbp-af-header h1 {
		text-transform: uppercase;
		color: rgba(116, 206, 175, 1.0);
		letter-spacing: 4px;
		font-size: 1.4em;
		margin: 0;
		float: left;
	}

	.cbp-af-header nav {
		float: right;
		font-size:0.8em;
	}

	.cbp-af-header a {
		color: rgba(116, 206, 175, 1.0);
		font-weight: 700;
		margin: 0 0 0 10px;
		font-size: 1.4em;
	}

	.cbp-af-header a:hover {
		color: rgba(116, 206, 175, 1.0);
	}
	.cbp-af-header a:hover {
		border: 2px solid rgba(116, 206, 175, 1.0);
		text-decoration: none;
		padding:10px;
		border-radius:4px;
	}

	/* Transitions and class for reduced height */
	.cbp-af-header h1,
	.cbp-af-header nav a {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.cbp-af-header.cbp-af-header-shrink {
		height: 20px;
	}

	.cbp-af-header.cbp-af-header-shrink h1,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 20px;
	}

	.cbp-af-header.cbp-af-header-shrink h1 {
		font-size: 1.5em;
	}

	/* Example Media Queries */
	@media screen and (max-width: 55em) {

		.cbp-af-header .cbp-af-inner {
			width: 100%;
		}

		.cbp-af-header h1,
		.cbp-af-header nav {
			display: block;
			margin: 25px auto;
			text-align: center;
			float: none;
		}

		.cbp-af-header h1,
		.cbp-af-header nav a {
			line-height: 15px;
		}

		.cbp-af-header nav a {
			margin: 0 10px;
		}

		.cbp-af-header.cbp-af-header-shrink h1,
		.cbp-af-header.cbp-af-header-shrink nav a {
			line-height: 45px;
		}

		.cbp-af-header.cbp-af-header-shrink h1 {
			font-size: 2em;
		}

		.cbp-af-header.cbp-af-header-shrink nav a {
			font-size: 1em;
		}
	}

	@media screen and (max-width: 32.25em) {
		.cbp-af-header nav a {
			font-size: 1em;
		}
	}

	@media screen and (max-width: 24em) {
		.cbp-af-header nav a,
		.cbp-af-header.cbp-af-header-shrink nav a {
			line-height: 1;
		}
	}


	.bg1 {
		background-color: rgba(47, 135, 157, 1.0);
	}

	/*dancing icon start*/
	/*thanks https://codepen.io/colinkeany/pen/qEXXKr*/

	.bot-icon {
		background-image: url("https://dt9m4jy5pfgf1.cloudfront.net/a4d768b/static/images/splash/props_example/growbot.png");
		background-repeat: no-repeat;
		background-size: 100px 100px;
		height: 100px;
		width: 100px;
		/*margin-left:-8px;*/
		transform: rotate(-45deg);
		transition: all 0.3s ease-in-out;
		animation-name:bot-icon;
		-webkit-animation-name:bot-icon;
		bottom: 0;
	}

	.bot-icon, .bot-icon-shadow {
		animation-duration:1.2s;
		animation-timing-function:ease;
		animation-delay:0s;
		animation-iteration-count:infinite;
		animation-direction:normal;
		animation-play-state:running;
		-webkit-animation-duration:1.2s;
		-webkit-animation-timing-function:ease;
		-webkit-animation-delay:0s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-direction:normal;
		-webkit-animation-play-state:running;
		position:absolute;
		left: 0;
		z-index:1;
	}

	.dancing-icon {
		width: 100px;
		height: 110px;
		margin: 50px auto;
		position: relative;
	}

	.bot-icon-shadow {
		animation-name:bot-icon-shadow;
		-webkit-animation-name:bot-icon-shadow;
		width: 60px;
		height: 5px;
		margin-left:18px;
		/*left: 0px;*/
		position: absolute;
		bottom: 0;
		display: inline-block;
		background: rgba(0,0,0,0.075);
		border-radius: 100px;
		z-index: 0;
	}

	@keyframes bot-icon {
		0%   {top:0;transform:rotate(-15deg)}
		10% {top:-25px;transform:rotate(0deg);}
		50% {top:0;transform:rotate(15deg);}
		60% {top:-25px;transform:rotate(0deg);}
		100% {top:0;transform:rotate(-15deg);}
	}
	
	@-webkit-keyframes bot-icon {
		0%   {top:0;transform:rotate(-15deg)}
		10% {top:-25px;transform:rotate(0deg);}
		50% {top:0;transform:rotate(15deg);}
		60% {top:-25px;transform:rotate(0deg);}
		100% {top:0;transform:rotate(-15deg);}
	}

	@keyframes bot-icon-shadow {
		0%   {transform:scale(1,1);}
		10% {transform:scale(1.3,1)}
		50% {transform:scale(1,1)}
		60% {transform:scale(1.3,1)}
		100% {transform:scale(1,1);}
	}
	
	@-webkit-keyframes bot-icon-shadow {
		0%   {transform:scale(1,1);}
		10% {transform:scale(1.3,1)}
		50% {transform:scale(1,1)}
		60% {transform:scale(1.3,1)}
		100% {transform:scale(1,1);}
	}

	.heart {
		color: #F37476;
		z-index: 0;
		position: absolute;
		top: 50px;
		left: 0;
		font-size: 10px;
		animation-duration:2s;
		-webkit-animation-duration:2s;
		animation-timing-function:ease-in-out;
		animation-iteration-count:infinite;
		animation-direction:normal;
		animation-play-state:running;
		-webkit-animation-timing-function:ease-in-out;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-direction:normal;
		-webkit-animation-play-state:running;
		animation-name:hearts;
		-webkit-animation-name:hearts;
	}

	.heart .icon-heart {
		color: #F37476;
		z-index: 0;
		position: absolute;
		left: 0;
		animation-duration:2s;
		-webkit-animation-duration:2s;
		animation-timing-function:ease-in-out;
		animation-iteration-count:infinite;
		animation-direction:normal;
		animation-play-state:running;
		-webkit-animation-timing-function:ease-in-out;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-direction:normal;
		-webkit-animation-play-state:running;
		animation-name:icon-heart;
		-webkit-animation-name:icon-heart;
		animation-delay:0;
		-webkit-animation-delay:0;
	}

	.hearts-animations .heart:nth-child(1) {
		animation-delay:1.25s;
		-webkit-animation-delay:1.25s;
		left: 12px;
	}

	.hearts-animations .heart:nth-child(2) {
		animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		left: 32px;
	}

	.hearts-animations .heart:nth-child(3) {
		animation-delay:1.75s;
		-webkit-animation-delay:1.75s;
		left: 52px;
	}

	@keyframes hearts {
		0% {transform:rotate(20deg);opacity:0;}
		50% {transform:rotate(-20deg);opacity:1;}
		100% {top:-60px;transform:rotate(20deg);opacity:0;}
	}

	@-webkit-keyframes hearts {
		0% {transform:rotate(20deg);opacity:0;}
		50% {transform:rotate(-20deg);opacity:1;}
		100% {top:-60px;transform:rotate(20deg);opacity:0;}
	}

	@keyframes icon-heart {
		0% {right:20px}
		50% {right:-20px}
		100% {right:20px}
	}

	@-webkit-keyframes icon-heart {
		0% {right:20px}
		50% {right:-20px}
		100% {right:20px}
	}

/*dancing icon end*/
