#NavLogo {
	display:inline;
	height:80%;
	opacity:0;
	margin:0;
	-o-transition:		all .2s;
	-moz-transition:	all .2s ease-out;
	-webkit-transition:	all .2s ease-out;
	transition:			all .2s ease-out;

}

.dropbtn {
  background-color: none;
  color: inherit;
  border: none;
  padding: inherit;
  font-size: inherit;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  right:0;
  left: -50%;
  margin-right: -50%;
  width:auto;
  padding:1em 0;
  color:white;
  background-color: #7bb4cc;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

/* Links inside the dropdown */
.dropdown-content a {
  color: inherit;
  padding: inherit;
  text-decoration: none;
  display: block !important;
  white-space: nowrap;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {}


.v2022 {
	overflow:hidden;
}
.v2022 #Signup {
	display:block;
}
.v2022 .col3 .btn,
.v2022 #Integrate .btn {
	display:none;
}

#WhyAutomate h3 {
	font-size: 1.8rem;
	line-height: 2.5rem;
	color: #fff;
	font-style:italic;
	margin:0;
}
#Testimonials h3 {
	font-size: 1.6rem;
	line-height: 2.2rem;
	color: #fff;
	font-style:italic;
	padding-top:2em;
}
#Clients h1 {
	padding-bottom:15px;
}
#Header h1, #Contact h3, #Contact h4, #Contact h6 {
    color: #64a79d; /*teal*/
}
#For h1 br,
#Templates h1 br,
#Clients h1 br, 
#Onboarding .item h4 br {
	display:none;
}
#DIFY h1 br {
	display:block;
}

@media (min-width: 401px){
	.v2022 #Navbar #Menu {
		display:flex;
	}
	.v2022 #Menu .lft {
		display: inline-flex;
		position:relative;
		width: auto;
		vertical-align: middle;
		align-items:center;
		text-align: left;
		padding-left: 2%;
		white-space: nowrap;
	}
	.v2022 #Menu .rgt {
		display: inline-flex;
		position:relative;
		width: auto;
		text-align: right;
		align-items:center;
		padding-right: 2%;
		white-space: nowrap;
	}
	.v2022 #Menu #Links {
		display: inline-flex;
		flex-flow:row;
		position:relative;
		width: inherit;
		justify-content: end;
		padding:0 2em;

		-o-transition:		all .2s;
		-moz-transition:	all .2s ease-out;
		-webkit-transition:	all .2s ease-out;
		transition:			all .2s ease-out;
	}
	.v2022 #Menu .lft a,
	.v2022 #Menu .rgt a {
		display: inline-flex;	
	}
	.v2022 #Menu .lft .icon,
	.v2022 #Menu .rgt .icon {
		display: flex;
		align-items: end;
		vertical-align: middle;
		font-size: 36px;
		width: 36px;
		height: auto;
		padding: 0;
		border: 0;
		color: inherit;
		overflow: visible;
	}
	.v2022 #Navbar #AP-icon {
		display:none;
	}
}
.v2022 #Menu a {
	font-family: 		"Avenir Next LT Pro", "Muli", Helvetica, Arial, sans-serif;
	font-weight:		600;
	font-size: 			0.8rem;
	text-transform:		uppercase;
	text-rendering:		optimizeLegibility;
}
.v2022 .btn,
.v2022 #Menu a.btn {
	display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    text-align: center;
	text-transform:		uppercase;
	text-rendering:		optimizeLegibility;

	font-family: 		"Avenir Next LT Pro", "Muli", Helvetica, Arial, sans-serif;
	font-weight:		600;	
	line-height: 1;
    padding: 1em 2em 1.1em;
    margin: 0;
	max-height:52px;

    border: 1px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: #99c942; /*apple*/

    -o-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
	
    -moz-box-shadow: 0;
    -webkit-box-shadow: 0;
    box-shadow: 0;
	
    -o-transition: all .10s;
    -moz-transition: all .10s ease-out;
    -webkit-transition: all .10s ease-out;
    transition: all .10s ease-out;
}
.v2022 .btn .icon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    font-size: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    color: inherit;
    overflow: hidden;
    line-height: 1.2;
}
.v2022 .xxx .btn .icon {
    font-size: 72px;
    width: 72px;
    height: 60px;
    line-height: 1;
}
.v2022 .xxx .btn {
    color: #7bb4cc;
}
.v2022 .icon.mod {
	margin-left: -24px;
    -o-transform:		scale(0.8);
    -moz-transform:		scale(0.8);
    -webkit-transform:	scale(0.8);
    transform:			scale(0.8);
}
.v2022 .pad-topbtm {
	padding: 70px 0;
}
.v2022 .pad-top {
	padding-top:70px;
}
.v2022 .pad-btm {
	padding-bottom:70px;
}
.v2022 .hero .container {
    margin-bottom: 70px;
}
.v2022 .hero h1, 
.v2022 .hero .h1 {
    font-size: 2.375rem;
    letter-spacing: -0.02em;
	line-height: 2.813rem;
	color: inherit;
	margin-bottom:25px;
}
.xxx {
	display: inline-block;
    margin: 1.5em 0 0;
    padding: 0;
    font-size: 1em;
    line-height: 0;
}

.v2022 .hero p,
.v2022 .bannerbg p {
	font-size: 1.2rem;
	line-height: 1.7rem;
    color: #2c4a5b;
}
.v2022 .hero h5, 
.v2022 .hero .h5 {
    font-size: 1.125rem;
	font-family: "Avenir Next LT Pro", "Muli", Helvetica, Arial, sans-serif;
	text-transform:uppercase;
} 

#Onboarding .rgt .item p {
	font-size: 1rem;
	line-height: 1.5rem;
	color: #fff;
	margin-top:0;
}
#Onboarding .rgt .item h4 {
	margin-bottom: 0.2em;
}
#Onboarding .rgt .item .glyph {
	top:10px;
	margin:0;
}

.v2022 section h1, 
.v2022 section .h1 {
    font-size: 2.625rem;
	line-height: 3rem;
    letter-spacing: -0.02em;
	max-width:1000px;
}

.v2022 h2, 
.v2022 .h2 {
    font-size: 1.438rem; /*23px*/
	line-height:2rem;
}
.v2022 h2.emphasis, 
.v2022 .h2.emphasis {
    font-size: 2.25rem; /*36px*/
	line-height:2rem;
	font-style: italic;
	margin-bottom: 0.2em;
}
}
.bannerbg h1,
.bannerbg .h1 {
    font-size: 3rem;
    letter-spacing: -0.02em;
}

.bannerbg {
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}
.bannertext {
	display:inline-block;
	margin: auto;
	text-align: center;
}
#WhyAutomate.bannerbg {
	background-image: url(../_assets/website/bg_adam-keynote.png);
	background-size: cover !important;
	/*background-color: #000;*/
}

@media screen and (min-width: 1620px) {
	#WhyAutomate.bannerbg {
		background-image: url(../_assets/website/bg_adam-keynote.png);
		background-size: contain !important;
		background-color: #000;
	}
}

@media screen and (min-width: 1920px) {
	#WhyAutomate.bannerbg {
		background-image: url(../_assets/website/bg_adam-keynote.png);
		background-size: contain !important;
		background-color: #000;
	}
}
	#WhyAutomate .bannertext {
		width: 70%;
		padding: 4em 3em;
		float:right;
	}
#WhyAutopilot.bannerbg {
	background-image: url(../_assets/website/bg_Teamwork-rgt.png);
	background-size: cover;	
	background-color: #7bb4cc;
}
	#WhyAutopilot .bannertext {		
		width: 53%;
		padding: 4em 3em;
		float:left;
	}
	#WhyAutopilot h1 {
		color: #2c4a5b;
	}
#Onboarding.bannerbg {
	background-image: url(../_assets/website/bg_Onboarding.jpg);
	background-size: cover;
	background-color: #000;
}
	#Onboarding .bannertext {
		width: 60%;
		padding: 3em 0em 5em;
		float:right;
	}
	#Onboarding h1 {
		color:#fff;
	}
#Features .item h4 {	
	margin-bottom: 15px;
}
#Features p {
	padding-bottom:1em;
	padding-left:2em;
	padding-right:2em;
}
/*#Features*/ 
#BuiltFor, #Reduce, #Increase, #Integrate {
}
	#Features #BuiltFor .item.lft {
		padding:3em;
	}
	#Features #Integrate .item.lft {
}

#InTeams h1 {
	font-size:3.1rem;
	line-height:3.3rem;
}
#InTeams #FlexRow {
}
#InTeams #TagLine h4 {
	width:85%;
	padding-right:5%;
	margin:0;
	text-align:right;
}
#InOffice .col3 .item p {
    padding: 0 1em;
}
#Resellers.bannerbg {
	background-image: url(../_assets/website/bg_Resellers.jpg);
	background-size: cover;
	background-color: #000;
	margin-bottom:2em;
}
	#Resellers .bannertext {
		width: 53%;
		padding: 4em 3em;
		float:right;
	}
	#Resellers .bannertext p {
		font-size:1.1rem;
		color:#fff;
		padding-bottom:20px;
	}
	#Resellers .bannerpic {
		width: 50%;
		text-align: center;
		position: absolute;
		bottom: 0;
		top: 0;
		left: -1em;
	}
	#Resellers .img-wrapper {
		position:absolute;
		bottom:-1.5em;
		width:100%;
		overflow:visible;
	}
	#Resellers #Picture {
		display:inline-block; position:relative; height:auto; width:100%;
	}
	#Resellers #Picture .screenshot {
		position:absolute;
		top: -0.5em;
		right: 3em;
		width: 40%;
		height: auto;
		z-index: 1;
	}
	#Resellers h1 {
		color: #fff;
	}
#Testimonials.bannerbg {
}
	#Testimonials .bannertext {
		width: 66%;
		padding: 2em;
		float:left;	
	}
	#Testimonials .bannerpic {
		width: 30%;
	    display: inline-block;
		height: 100%;
		text-align: center;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 4em;
	}
	#Testimonials .bannerpic > div {
		position:absolute;
		bottom:0;
		height:100%;
	}
	#Testimonials #Picture img {
		height: auto;
		max-height: 105%;
		width: auto;
		position: absolute;
		bottom: 0;
	}
	#Testimonials h4 {
		color: #2c4a5b; /*gunmetal*/
	}

.v2022 #Menu-wrapper {
	color:				#7bb4cc;
	background-color: 	transparent;
		-o-transition:		all .2s;
	-moz-transition:	all .2s ease-out;
	-webkit-transition:	all .2s ease-out;
	transition:			all .2s ease-out;
}
.v2022 #Menu a, .menu a {
    color: unset;
	line-height: 1.2;
}
.v2022 #Menu-icon span {
    background: #7bb4cc;
}
.v2022 .hero {
	position:			relative;
	background-color:	transparent;
	padding-top:		60px;
}

#Jrny-Path .flow {
	width:55%;
}
#Benefits .para > div {
	height: fit-content !important;
    background: yellow;
}
#Benefits .item {
    margin-bottom: unset !important;
}
.col2 .item {
    width: 49.5%;
    vertical-align: middle !important;
	float:none !important;
}

#Hero .item:hover .glyph {
    -webkit-transform:	none;
    transform:			none;
    -webkit-transition:-webkit-transform .4s ease-out;
    transition:			transform .4s ease-out;
}
#Hero .process:hover .glyph {
    -webkit-transform:	translateY(-10px);
    transform:			translateY(-10px);
    -webkit-transition:-webkit-transform .4s ease-out;
    transition:			transform .4s ease-out;
}
#Hero .row .item {
    padding-bottom:20px;
}

#Hero .block-style .process {
    position: absolute;
    width: 120px;
	height: 120px;
	padding:0;
	border:0;
    border-radius: 4px;
	background:#fff;
    -webkit-box-shadow: 0px 2px 8px rgb(0 0 0 / 50%);
    box-shadow: 0px 2px 8px rgb(0 0 0 / 50%);
	z-index: 1; 
}
#Hero .block-style .process .style {
    padding: 6px 10px;
	border: 0;
    border-radius: 0;
	background:none;
	
}
#Hero .block-style .process .glyph {
    width:4.4em;
	height:auto;
}
#Hero .block-style .process .title {
    height: auto;
	text-transform:uppercase;
	font-family:inherit;
	font-weight:bold;
	font-size: 0.8em;
	line-height: 1.2;
	color:#64a79d;
	padding-top:0.2em;
}
#Hero .block-style .process:hover {
    z-index:            101;
    color:				#2c4a5b !important;

    -o-transform:		scale(1.1);
    -moz-transform:		scale(1.1);
    -webkit-transform:	scale(1.1);
    transform:			scale(1.1);

    -moz-box-shadow:	0 6px 12px rgba(0,0,0,0.2);
    -webkit-box-shadow:	0 6px 12px rgba(0,0,0,0.2);
    box-shadow:			0 6px 12px rgba(0,0,0,0.2);
}
#Hero .block-style .process {
    z-index:            100;
    color:              #64a79d; /*teal*/
    display:            inline-block;
        
    -o-transform:       scale(0.8);
    -moz-transform:     scale(0.8);
    -webkit-transform:  scale(0.8);
    transform:          scale(0.8);

    -moz-box-shadow:    0;
    -webkit-box-shadow: 0;
    box-shadow:         0;

    -o-transition:      all .60s;
    -moz-transition:    all .60s ease-out;
    -webkit-transition: all .60s ease-out;
    transition:         all .60s ease-out;

    cursor:             pointer;
}
.process .AP-jet {
    position: absolute;
	width: auto;
	height:auto;
	z-index: 2;
	line-height:0;
	color: #7bb4cc; 
}

.bannerslide {
  overflow: visible;
  width: 100%;
  margin: 50px auto;
}
.slider-content {
  width: auto;
  font-size:0;
}
.slider-content .item {
  display: inline-block;
  width:auto;
  float: none;
  padding:0;
  font-size:1rem;
}
.slider-content .item .process {
    display: block !important;
    width: 180px !important;
    height: auto;
    margin: 6px !important;
    border-radius: 10px;
}
.slider-content .process .style {
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
	background-color: #fff;
}
.slider-content .process .style.off {
    background-color:	#f5f5f5 !important;
}
.slider-content .process .glyph {
    width: 100%;
    height: 90px;
    margin: auto;
}
.slider-content .item .process:hover {
	z-index:900 !important;
	position:relative;
}
.slider-content .item .tag {
  font-size:0.5em;
  line-height:1em;
  padding:6px;
}
.slider-content .process .title {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    height: 44px;

	font-size:0.8em;
	line-height:1.2em;
	text-transform:uppercase;
	font-weight:bold;
}
.slider-content .process .title br {
    display:            block;
}
.slider-content .process .title h4 br {
    display:            block;
}


#Hero .item.rgt {
    position: absolute;
    height: 100%;
    display: inline-block;
    bottom: 0;
    top: 0;
    margin-left: 2em;
}
#Hero .img-wrapper {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0 auto;
    overflow: visible;
}
#Hero .img1 {
    display: block;
    height: 100%;
    max-width: unset;
    margin-left: 22%;
	padding-top:5%;
}
#Hero .img2 {
    position: absolute;
    bottom: -4%;
    left: 0%;
	margin-left: 13%;
	height:65%;
    width:auto;

    //-webkit-box-shadow: -17px 10px 34px -18px rgb(0 0 0 / 50%);
    //box-shadow: -17px 10px 34px -18px rgb(0 0 0 / 50%);
}


.logo-USP {
	display: block;
	width: auto;
    margin: 0;
    padding: 0;
	position: absolute;
	right: 9%;
	font-size: 52%;
	font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 0.5;
	text-transform: uppercase;
	color: #7bb4cc;
    z-index: 1;
}

.emphasize {
	font-weight:600;
	font-style:italic;
	color:#7bb4cc;
}
.item h1, .item h2, .item h3, .item h4 {
    position: relative;
}
.fwd {
    position: absolute;
    top: 0;
	right: -0.7em;
}

/*----------------------------*/

.bg_image, .pb_cover, 
.slide_content > .pb_content-media {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.pb_cover {
    position: relative;
    height: 95vh;
}

.v2022 .btn-apple,
.btn-apple {
	border-color:#99c942 !important;
	background-color: #99c942 !important;
	color:#fff !important;
	-webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
}
a.btn-apple:hover {
	border-color:#2c4a5b !important;
	background-color: #2c4a5b !important;
	color:#fff !important;
}
	.no-border {
		border:none !important;
	}
.bg-tint-apple {
	background-color: #e0eec6;
}
.bg-tint-sky {
	background-color: #e5f0f5;
}
.screenshot {
	-webkit-box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
	box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
}
.clientlogo {
    max-height: 60px;
    max-width: 200px;
}

#DIFY.dify {
	position:			relative;
	background-color:	transparent;
}
.dify .container {
	display:			block;
	position:			relative;
	z-index:			2;
}
.dify .bg-white {
	display:			block;
	position:			absolute;
	bottom:				0;
	left:				0;
	width:				100%;
	height:				80px;
	z-index:			1;
}
.dify h1, .dify h2, .dify h3, .dify h4, .dify h5, .dify h6,
h1, h2, h3, h4, h5, h6 {
	margin:0 auto 30px;
}
.dify p {
}


.button-block {
	display:inline-flex;
	position:relative;
	text-align:center;
}
#DIFY .button-block {
	width:42%;
	left:12.5%;

    padding-left: 0;
	padding-top: 0.5em;
    margin-bottom: 1.2em;
}

/* BRAND */	   
#DIFY #Brand {
	display:block;
	position:relative;
	width:40%;
	left:13%;
    padding-left: 0;
	padding-top: 0.5em;
    margin-bottom: 1.2em;
	text-align:center;
}
#DIFY #Brand h4 {
	display:inline-block;
	font-size:0.7rem !important;
	font-weight:700 !important;
	color: #7bb4cc;
	margin-top: 0.5em;
	letter-spacing:0.05em;
	white-space:nowrap;
}
#DIFY #Hero_Pic {
	display: block;
	width:100%;
	height:auto;
	position:relative;
	margin-bottom:10px;
/*
	left:0;
	position: absolute;
	bottom: 10px;
	z-index:3;
	*/
}
#DIFY #Hero_Pic #Device {
	display: block;
    width: 60%;
    z-index: 2;
    position: relative;
    margin-left: 7%;
}
#DIFY .img2 {
    position: absolute;
    bottom: 0;
    left: 0%;
	width:20%;
    margin-left: 5%;
	z-index: 3;
}
#DIFY #Hero_Flow {
	display:block;
	position:absolute;
	top:0;
	right:8%;
	z-index:4;
	float:right;
}
#DIFY #Hero_Flow .container {
	width:360px;
	padding: 2em 1em;
	border:1px solid #ccc;
	box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
	background-color:#7bb4cc;
}
#DIFY #Hero_Flow .row {
}
#DIFY #Hero_Flow .glyph {
	display: inline-block;
	position: relative;
	top:-4px;
	width: 7em;
	height: 7em;
	background:#fff;
	border-radius:50%;
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
}
#DIFY #Hero_Flow .glyph.lft {
	margin-right: -3em;
	left: -3em;
	float: left;
}
#DIFY #Hero_Flow .glyph.rgt {
	margin-left: -3em;
	right: -3em;
	float: right;
}
#DIFY #Hero_Flow .flow {
	display:block;
	padding:0 2rem;
}
#DIFY #Hero_Flow p {
	font-size: 0.8rem;
	line-height:1.5;
	color:#2c4a5b;
}
#DIFY #Hero_Flow p,
#DIFY #Hero_Flow h4 {
	text-align: center;
	margin: 0 3.5rem;
}
#DIFY #Hero_Flow h4 {
	margin-top: 0.6em;
	margin-bottom: 0.2em;
	color:#fff;
	line-height: 1.1;
}
#DIFY #Flow-Sign p br {
	display:none;
}
#End h4 {
	font-size:1rem;
}
#End #Logo {
    width: 55%;
    margin: 0.8em 0;
}

#DIFY #Hero_Flow h3 {
	line-height:1.2;
	padding:0 0.4rem;
	color: #64a79d; /*teal*/
}
#DIFY #Hero_Flow h3 br {
}
#DIFY .divider {
	display:block;
	width: 64%;
	border:none;
	border-bottom:1px solid #ccc;
	margin: auto auto 5em;
	text-align:center;
}
#DIFY .divider .ac-icon {
	display: inline-block;
	box-sizing: content-box;
	background-color: white;
	height: 4em;
	padding: 1em;
	position: relative;
	top: 3em;
}
#DIFY .divider .ac-icon > img {
	height:100%
}

#End #Logo {
	display:			inline-block;
	position:			relative;
	padding:			0;
	border:				0;
	text-indent:		-9999em;
	overflow:			hidden;
	background:			url(../_assets/logos/AP-transform%20blu.png) center no-repeat;
	background-size:	contain;
	width:				100%;
	height:				auto;
	max-width:          700px !important;
}

@media (max-width:1200px)
{
	#DIFY #Brand {
		left: 8%;
	}
}
@media (max-width:1000px)
{
	#End h4 {
		font-size:1rem;
	}
	#DIFY #Hero_Flow h3 {
		max-width:600px;
		line-height:1.2;
		padding:0 1.2rem;
		margin:auto;
		margin-bottom:0.5em;
	}
}
@media (min-width:481px) and (max-width:991px)
{
	#DIFY #Hero_Flow {
		width:98%;
		display:block;
		position:relative;
		right:0;
		bottom:0px;
		float:none;
		margin:auto;
		z-index:4;
	}
	#DIFY #Hero_Flow .container {
		width:100%;
		padding: 2em 0.4em 1em;
		border:1px solid #7bb4cc;
		box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
		-webkit-box-shadow: 0 5px 16px 0 rgba(0,0,0,0.2);
		background-color:white;
	}
	#DIFY #Hero_Flow .row {
		display:inline-block;
		width:25%;
		padding:1em 0.8em;
		text-align:center;
		float:left;
	}
	#DIFY #Hero_Flow .glyph {
		display: block;
		position: relative;
		width: 80%;
		height: auto;
		margin:auto;
		border-radius:50%;
		box-shadow: none;
		-webkit-box-shadow: none;
	}
	#DIFY #Hero_Flow .glyph.lft {
		margin-right: auto;
		left: auto;
		float: none;
	}
	#DIFY #Hero_Flow .glyph.rgt {
		margin-left: auto;
		right: auto;
		float: none;
	}
	
	#DIFY #Hero_Flow .flow {
		display:none;
		padding:0 2rem;
	}
	#DIFY #Hero_Flow p br {
		display:none;
	}
	#DIFY #Hero_Flow p {
		font-size: 0.8rem;
		line-height:1.5;
	}
	#DIFY #Hero_Flow p,
	#DIFY #Hero_Flow h4 {
		text-align: center;
		margin: 0;
	}
	#DIFY #Hero_Flow h4 {
		margin:1em auto 0.5em;
		font-size:unset;
		font-weight:700 !important;
		color:#99c942; /*apple*/
		line-height: 1.1;
	}
	#DIFY #Flow-Process h4 {
	}
}

@media (max-width:990px)
{
	#DIFY #Brand {
		display:block;
		width:90%;
		position:relative;
		top:1em;
		left:auto;
		z-index:auto;
		text-align:center;
		margin:auto;
	}
	#DIFY #Brand #Logo,
	#End #Logo {
		display:table;
		width: 100%;
		position:relative;
		height: 2em;
		margin:auto;
		padding:0 10% 1%;
	}
	#DIFY .dify {
		padding-top: unset;
	}
	#DIFY #Hero_Pic {
		display: block;
		width:100%;
		height:auto;
		position: relative;
		left:auto;
		bottom: auto;
		z-index:3;
		margin-bottom:-30%
	}
	#DIFY #Hero_Pic #Device {
		display:block;
		width:100%;
		padding-top:3em;
		z-index:2;
	
		position:relative;
		top:0;
		right:unset;
	}


	#DIFY .divider {
		width:78%;
	}
}
@media (max-width:940px)
{
	#DIFY #Brand h4 {
		font-size:0.8rem;
		font-weight:600 !important;
		color: #7bb4cc;
		margin:auto;
		margin-top: 0.5em;
		letter-spacing:0.06em;
		white-space:normal;
	}
}
@media (max-width:840px)
{

}

@media (min-width:750px) and (max-width:1000px)
{
	#DIFY #Flow-Sign h4 br,
	#DIFY #Flow-Sign h4 span {
		display:none;
	}
}
@media (max-width:710px)
{
	#Benefits h1 br {
		display:none;
	}
}
@media (max-width:680px)
{
	#DIFY #Hero_Pic {
		margin-bottom: -32%;
	}
	#DIFY #Hero_Flow h3 br {
		display:none;
	}
	#DIFY #Hero_Flow h3 {
		margin-bottom:1em;
	}
}
@media (min-width:481px) and (max-width:680px)
{
}
@media (max-width:480px){
	
	#DIFY #Brand {
		width: 100%;
	}
	#DIFY #Brand #Logo {
		padding:0 5% 1%;
	}
	#DIFY #Brand h4 {
	}
	#DIFY #Hero_Flow {
		width:auto;
		display:block;
		position:relative;
		right:0;
		bottom:0px;
		float:none;
		margin:auto 0.6em;
		z-index:4;
	}
	#DIFY #Hero_Flow .container {
	    width: auto;
	}
	#DIFY #Hero_Flow .row {
	}
	#DIFY #Hero_Flow .glyph {
		display: inline-block;
		position: relative;
		width: 5em;
		height: 5em;
		border-radius:50%;
		box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
		-webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
	}
	#DIFY #Hero_Flow .glyph.lft {
		margin-right: -2em;
		left: -2em;
		float: left;
	}
	#DIFY #Hero_Flow .glyph.rgt {
		margin-left: -2em;
		right: -2em;
		float: right;
	}
	#DIFY #Hero_Flow .flow {
		padding:0 1rem;
	}
	#DIFY #Hero_Flow .flow img {
		height:90%;
	}
	#DIFY #Hero_Flow p {
		font-size: 0.8rem;
		line-height:1.5;
	}
	#DIFY #Hero_Flow p {
		text-align: center;
		margin: 0 4.5em;
	}
	#DIFY #Hero_Flow h4 {
		text-align: center;
		margin: 0 3em;
	}
	#DIFY #Flow-Sign h4 br,
	#DIFY #Flow-Sign h4 span {
		display:none;
	}
				#Flow-Sign p br {
					display:inline-block;
				}
				#Flow-Collect p br {
					display:none;
				}
	#DIFY #Hero_Flow h3 {
		padding: 0 3%;
	}

	#Benefits h1 {
		line-height:1.1;
	}
}

@media (max-width:430px)
{
	#DIFY #Hero_Pic {
		margin-bottom: -34%;
	}
}
@media (max-width:400px)
{
	#DIFY #Hero_Flow p, 
	#DIFY #Hero_Flow h4 {
		margin: 0 4.5em;
	}
	#DIFY .divider {
		margin: auto auto 4em;
	}
}
@media (max-width:370px)
{
	#DIFY #Hero_Flow h3 {
		font-size:1.2rem !important;
	}
}
/* CONDENSED HERO - alternative design */

.condense-hero #Brand {
	left:12%;
	margin-top:1.2em;
}
.condense-hero #Hero_Pic {
}
.condense-hero #Hero_Pic #Device {
	width:50%;
	right:10%;
}
.condense-hero #Hero_Flow {
	top:0;
}
.condense-hero #Hero_Flow .container {
	width:360px;
	padding: 2em 1em 1em;
}
.condense-hero #Hero_Flow .row {
}
.condense-hero #Hero_Flow .glyph {
	display: inline-block;
	position: relative;
	top:unset;
	width: 6em;
	height: 6em;
	border-radius:50%;
	border:4px solid #99c942;
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
}
.condense-hero #Hero_Flow .glyph.lft {
	margin-right: -1em;
	left: -2em;
	float: left;
}
.condense-hero #Hero_Flow .glyph.rgt { 
	/* rightside override */
	margin-right: 2em;
	left: 1em;
	float: left;
}
.condense-hero #Hero_Flow .flow {
	/* hide arrows */
	display:block;
	height:1em;
	border-left:5px solid #99c942;
	margin:0 1em;
}
.condense-hero #Hero_Flow .flow img {
	/* hide arrows */
	display:none;
}
.condense-hero #Hero_Flow p br,
.condense-hero #Hero_Flow h4 br,
.condense-hero #Hero_Flow h4 span {
	display:none;
}
.condense-hero #Hero_Flow p {
	font-size: 0.8rem;
	line-height:1.5;
}
.condense-hero #Hero_Flow p,
.condense-hero #Hero_Flow h4 {
	/* align left */
	text-align: left;
	margin: 0;
}
.condense-hero #Hero_Flow h4 {
	margin-top: 0.6em !important;
	margin-bottom: 0.2em;
	font-size:1.31rem;
	font-weight:700 !important;
	color:#99c942; /*apple*/
	line-height: 1.1;
}
.condense-hero #Flow-Process h4 {
	margin-top: inherit;
}
.condense-hero #Hero_Flow h3 {
	line-height:1.2;
	padding:0 1.2rem;
	color: #64a79d; /*teal*/
}
.condense-hero .bg-tint-apple {
	background-color: #fff;
}
.condense-hero .bg-tint-sky {
	background-color: #fff;
}

.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* -------------------------------- */
#Benefits .row {
    max-width: 960px;
    margin: auto;
	display:block;
	position:relative;
}
#Benefits .row .divider {
	display:block;
	position:absolute;
	bottom:1.8em;
	width:90%;
	height:0;
	margin:0 5%;
	border-bottom:1px solid #ccc;
	z-index:-1;
}
#Benefits .row.rgt .item {
	float:right;
}
#Benefits .item {
    display: inline-block;
    width: 45%;
	padding:0;
	margin-bottom:-3em; /*this tightens the rows*/
}
#Benefits .item .illo {
	width:100%;
    height:auto;
	margin:auto;
}
#Benefits .para {
    display: inline-block;
    width: 55%;

	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
    padding: 0;
	text-align:center;
}
#Benefits .para > div {
	display:block;

	position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
	margin:auto;
	padding-bottom:1em;
}
#Benefits .para h4 {
	font-family: "Avenir Next LT Pro", "Muli", Helvetica, Arial, sans-serif;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	color: #7bb4cc;
}
#Benefits .para h4 span {
	display:block;
}
#Benefits .para h4 br {
	display:none;
}
#Benefits .para p {
	max-width:370px;
	margin:auto;
}
#Partners #Picture {
	display:inline-block;
	position:relative; 
	float:left;
	top:-1em;
	margin-left:2em; 
	margin-right:2em;
	width:44%;
	height:auto;
}
#Partners #Picture #DocuSign {
	position: absolute; 
	top:-0.5em; 
	right:3em; 
	width:40%; 
	height:auto; 
	z-index:1;
}

/* -------------------------------- */
@media (max-width:990px)
{
	#Benefits .para div {
		padding-bottom:unset;
	}
	#Benefits #Cracks .para h4 {
		max-width:300px;
		padding:0;
	}
	#Benefits .divider {
		width:100%;
		margin:0;
		bottom:1em;
	}
}

@media (max-width:840px)
{
	#Benefits .item, 
	#Benefits .para {
		width: 50%;
	}
	#Benefits .item {
		margin-bottom:0;
	}
	#Benefits .para > div {
		padding: 0 1em;
	}
	#Benefits .para h4 {
		padding: 0 1em;
	}
	#Benefits .para p br {
		display:none;
	}
	#Benefits .row .divider {
		display:none;
	}
}

@media (max-width:710px)
{
	.autocollect #Benefits h1 br {
		display:none;
	}
}
@media (max-width:680px)
{
	#Partners #Picture {
	position:relative; 
	float:none;
	top:0;
	margin-left:0; 
	margin-right:0;
	width:80%;
	height:auto;
	}
	#Partners {
		text-align:center;
		margin:auto;
	}
	.popup-close {
		color: #aaaaaa;
		float: right;
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 28px;
		font-weight: bold;
		z-index: 999999999 !important;
	}
}
@media (min-width:481px) and (max-width:680px)
{
	#Benefits .row {
		display:inline-block;
		width:50%;
		float:left;
		margin-bottom:2em;
	}
	#Benefits .item .illo {
		width:80%;
		margin:auto;
	}
	#Benefits .item, 
	#Benefits .para {
		width:100%;
		position:relative;
	}
	#Benefits .para > div {
		width:100%;
		transform:none;
		top:unset;
	}
	#Benefits .para h4 {
		font-size:1rem;
		padding:0;
		max-width:240px !important;
	}
	#Benefits #Onward h4 br {
		display:block;
	}
	#Benefits #Brisk {
		clear:left;
	}
}
@media (max-width:480px){

	#Benefits .row {
		margin-bottom:1.5em;
	}
	#Benefits .row,
	#Benefits .row .item,
	#Benefits .row .para,
	#Benefits .row .para > div {
		display:block;
		position:relative;
		transform:none;
		width:100%;
		float:none;
	}
	#Benefits .para h4 {
		padding:0;
	}
	#Benefits .item .illo {
		width:60%;
	}

	.autocollect #Benefits .section-header, 
	.autocollect #End .section-header {
		padding-left:0;
		padding-right:0;
	}
	.autocollect #Benefits h1 {
		line-height:1.1;
	}
	.popup-close {
		color: #aaaaaa;
		float: right;
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 28px;
		font-weight: bold;
		z-index: 999999999 !important;
	}
}

@media (max-width:640px){
	#Hero .row .item {
	}
	.bannertext {
		width: 100% !important;
		padding: 3em 1em !important;
	}
	.bannerpic {
		width: 100%;
	}
	.col2 .item {
		width:	100% !important;
		display: block;
	}
	.popup-close {
		color: #aaaaaa !important;
		float: right !important;
		position: absolute !important;
		right: 20px !important;
		top: 20px !important;
		font-size: 28px !important;
		font-weight: bold !important;
		z-index: 999999999 !important;
	}
}

@media (max-width:400px){
	
	#NavLogo {
		display:none;
	}
	#Menu .lft .h5,
	#Menu .rgt .h5,
	#Menu #Links #Menu-icon	{
		font-size:13px !important;
		padding:0.2em 0!important;
	}
	.v2022 .section-header {
		padding-left:0;
		padding-right:0;
		margin-bottom:0;
	}
	.v2022 #Hero h1,
	.v2022 #Templates h1, 
	.v2022 #Onboarding h1,
	.v2022 #DIFY h1 {
		font-size: 		1.5rem !important;
	}
	#Hero h1,
	#For h1,
	#Templates h1,
	#Onboarding h1,
	#Features h1,
	#InTeams h1,
	#DIFY h1,
	#Resellers h1,
	#Clients h1,
	#WhyAutomate h3,
	#Testimonials h3 {
		line-height: 2rem;
		margin:0;
	}
	#For h1 br,
	#Templates h1 br,
	#InTeams h1 br, 
	#Clients h1 br,
	#Onboarding .item h4 br	{
		display:block;
	}
	#DIFY h1 br, 
	#End h1 br {
		display:none;
	}
	.fwd {
		display:none;
	}
	.v2022 .xxx .btn {
		display:flex;
		padding: 1em 0 1.1em;
		max-width: 100%;
	}
	.v2022 .xxx .btn span {
		display:block;
	}
	.v2022 .xxx .btn .icon {
		padding: 0;
		overflow: visible;
		margin: 0 -7% 0 -5%;
	}
	.button-block {
		display: block;
	}

    #Hero .item.rgt {
		position: relative;
		margin: auto;
		margin-left: -1em;
		margin-top: 1em;
		padding-bottom: 0;
	}

	#Hero .img-wrapper {
		position: relative;
		width: 100%;
	}
	#Hero .img1 {
		width: 110%;
		height: auto;
		margin-left: 15%;
	}
	#Hero .img2 {
		margin-left: 5%;
	}
	#Hero .block-style .process {
	    transform: scale(0.5);
	}
	
	#Templates .bannerslide {
	    -o-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		margin:0;
	}
	#Onboarding .bannertext {
		padding: 3em 0 !important;
		
	}
	#Onboarding .rgt .item {
		padding: 0 1em !important;
		margin-top:1.5em;
	}
	#Onboarding .rgt .item .glyph {
		position: relative;
		display: block;
		max-width: 100px;
		right: 2em;
	}
	#Onboarding .rgt .item h4 {
		clear: left;
		margin-bottom: 1em;
		padding: 0 8em 0 1em;
	}
	#Onboarding .rgt .item p {
		text-align: center;
	}
	
	#Features #BuiltFor .item.rgt img {
		max-width: 140% !important;
		left: 13%;
		position: relative;
	}
	#Features #BuiltFor .item.lft {
		padding:1em;
	}

	.dify .container {
		margin-bottom: 4em;
	}
	#DIFY #Brand {
		top: 0;
		padding: 0 1.5em;
	}
	#DIFY #Hero_Pic {
		margin-bottom: -10%;
	}
	#DIFY .img2 {
		position: absolute;
		bottom: 0;
		left: -1em;
		width: 35%;
		margin-left: 5%;
		z-index: 3;
	}
	#DIFY #Hero_Pic #Device {
		margin-left: 5%;
		padding-top: 2em;
	}
	
	#DIFY .button-block {
		display: block;
		bottom: -6em;
		left: 0;
		position: absolute;
		width: 100%;
		margin: auto;
	}
	#DIFY #Hero_Flow .container {
		margin-bottom: 2em;
	}
	#DIFY #Hero_Flow p, 
	#DIFY #Hero_Flow h4 {
		margin: 0 2em;
	}
	#InTeams #FlexRow {
		display: flex;
		flex-flow: column-reverse;
	}
	#InTeams #TagLine h4 {
		width:85%;
	}
	#InOffice .col3 .item p {
		padding: 0;
	}
	#Resellers .bannerpic {
		width: 100%;
		left: 0;
		padding: 0;
		position: relative;
		padding-top: 3em;
		padding-bottom: 1em;
	}
	#Resellers .bannertext {
		float: none;
		padding-top: 0 !important;
	}
	#Resellers .img-wrapper {
		position:initial;
		bottom:0;
	}
	#Testimonials .container {
	    position: relative;
	}
	#Testimonials h4 {
		text-align: left;
		width: 50%;
		padding: 0;
		margin: 1em;
	}
	#Testimonials h3 {
		margin-bottom:2em;
	}
	#Testimonials .text-center {
		text-align: left;
	}
	#Testimonials .btn {
		width: 50%;
		text-align: left;
	}
	#Testimonials .bannerpic {
	    display: inline-block;
		right: 0;
		width: 53%;
		height: 100%;
		overflow: hidden;
	}
	#Testimonials .bannerpic > div {
		position: absolute;
		height: 35%;
		bottom: -1.5em;
	}
	#End h1 {
		line-height: 2.3rem;
		font-size: 1.8rem !important;
	}

	.popup-close {
		color: #aaaaaa;
		float: right;
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 28px;
		font-weight: bold;
		z-index: 999999999 !important;
	}
}

/* The Modal (background) */
.popup-modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	padding-top: 20px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.popup-modal-content {
	background-color: transparent;
	margin: auto;
	padding: 20px;
	border: none;
	width: 70%;
}

/* The Close Button */
.popup-close {
	color: #aaaaaa;
	float: right;
	position: relative;
	right: 10%;
	top: -20px;
	font-size: 28px;
	font-weight: bold;
}

.popup-close:hover,
.popup-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}