.integration-nav-container 
	@include desktop
		margin: 0
.integration-nav
	margin: 0 1rem
.integration-overflow 
    overflow-x: hidden

.integrate-container
	@include phone	 
		padding: 0 2.5rem
		text-align: center
	.align-items-center
		margin: 0
		justify-content: space-evenly
.integrate-container-2
	@include phone
		padding: 0 2.5rem
.integrate-container-4
	@include phone
		padding: 0 1.8rem

.integration-features
	list-style-type: none
	color: #fff
	padding: 0 12rem 0 2rem
	@include phone
		padding: 0
	li
		display: flex
		justify-content: space-between
		align-items: center
		margin-bottom: 1.2rem
		font-size: 1.6rem
		font-weight: 400
		@include desktop
			font-size: 1.2rem
		@include phone
			width: 100%
		.integration-tick
			width: 70px
			height: 70px
			border: 2px dashed #757575
			position: relative
			@include desktop
				width: 58px
				height: 58px
			@include phone
				width: 50px
				height: 50px
			img
				width: 100%
				position: absolute
				left: 14px
				top: -10px
				height: 100%
				@include desktop
					top: -9px
					height: auto
				@include phone
					position: relative
					width: auto

.advantage-integration
	ul
		list-style-type: none
		margin: 0
		padding: 0
		li
			padding: 1rem 0 0 1rem
			margin-bottom: 0.5rem
			font-size: 1.6rem
			font-weight: 400
			@include desktop
				font-size: 1.2rem

.integration_details
	h1
		font-size: 4rem
		font-weight: 600
		@include desktop
			font-size: 3rem
		@include phone
			font-size: 3rem
	h4
		font-size: 2rem
		font-weight: 500
		margin-bottom: 5rem
		@include desktop
			font-size: 1.4rem
			margin-bottom: 2rem
		@include phone
			font-size: 1.5rem
			margin-bottom 3rem

.hero-para
	width: 50%
	@include phone
		width: 100%
.plus-sign
	width: 86px
	height: 81px

.integration-bg-red
	background-color: #AE0013

.integration-bg-orange
	background-color: #DA7425

.integration-bg-blue
	background-color: #06357A

.integration-bg-darkblue
	background-color: #002D73
.integration-bg-lightblue
	background-color: #0070B9
.integration-bg-darkgreen
	background-color: #006443
.integration-bg-grey
	background-color: #6D6E71
.integration-bg-orangefade
	background-color: #C97340
.integration-bg-black
	background-color: #1F1F1F
.integration-bg-aquablue
	background-color: #005295
	
.integration-feature-section
	h2
		font-size: 4rem
		font-weight: 600
		@include desktop
			font-size: 3rem
		@include phone
			font-size: 2.5rem

.integration-para
	font-size: 1.5rem
	font-weight: 400
	@include desktop
		font-size: 1.2rem
	@include phone 
		20px
.integration-button
	padding: 0.8rem 3rem
	border-radius: 30px
	background-color: #00A01A
	border: 1px solid #00A01A
	font-size: 1.2rem
	font-weight: 400
	width: 40%
	margin-top: 1rem
	color: #fff 
	&:hover
		color: #fff
		opacity: 0.9

.integration-benefits
	h6
		font-size: 2rem
	h3
		font-size: 3rem
		font-weight: 600
		@include desktop
			font-size: 2.4rem
	h4
		font-size: 1.8rem
		font-weight: 500
		@include desktop
			font-size: 1.4rem
	p
		font-size: 1.5rem
		font-weight: 400
		margin-bottom: 2rem
		@include desktop
			font-size: 1.2rem
	.flex-row
		@include phone
			flex-wrap: wrap
		.flex-column
			@include phone
				width: 100% !important
				padding: 0 1rem

.curved-line-animate
	stroke-dasharray: 20
	stroke-dashoffset: 300
	animation: dash 2s linear forwards infinite

// @keyframes dash
//   from
//     stroke-dashoffset: 300
//   to 
//     stroke-dashoffset: 0

.dashed-one
  stroke-dasharray: 20


.path 
  stroke-dasharray: 1000
  stroke-dashoffset: 1000
  animation: dash 2s linear forwards 2
  // animation-delay: 5s
.path2
  stroke-dasharray: 1000
  stroke-dashoffset: 1000
  animation: dash 2s linear forwards 2
  // animation-delay: 7s


@keyframes dash 
  from 
    stroke-dashoffset: 1000
  
  to 
    stroke-dashoffset: 0

.integration-advantage
	justify-content: space-evenly
	@include phone
		padding: 0 1.5rem
	.right-div
		width: 40%
		background: #FFFFFF
		box-shadow: -2px 11px 26px 17px rgba(0, 0, 0, 0.25)
		border-radius: 24px
		padding: 3rem
		@include phone
			width: 100%
			padding: 0
	.left-div
		box-shadow: -2px 11px 16px 8px rgba(0, 0, 0, 0.25)
		border-radius: 27px
		padding: 3rem
		color: #ffffff
		width: 40%
		display: flex
		flex-direction: column
		justify-content: center
		@include phone
			width: 100%
			padding: 0
	h2
		font-weight: 600
		font-size: 2.4rem
		text-align: center
		@include desktop
			font-size: 1.9rem
.integration-button-red
	padding: 0.8rem 3rem
	border-radius: 30px
	background-color: #AE0013
	border: 2px solid #fff
	font-size: 1.2rem
	font-weight: 400
	margin-top: 1rem
	color: #fff 
	&:hover
		color: #fff
		opacity: 0.9
.integration-button-green
	padding: 0.8rem 3rem
	border-radius: 30px
	background-color: #0DC12A
	border: 2px solid #fff
	font-size: 1.2rem
	font-weight: 400
	margin-top: 1rem
	color: #fff 
	&:hover
		color: #fff
		opacity: 0.9
.integrate-hero
	background-image: url(../background/overlay/Restaurant-Back-Office.png)
	color: #ffffff
	background-color: $dark
	.mask
		background-image: url(../background/overlay/isometric-squares.svg)
		background-size: contain
		background-position: center bottom -5%
	.container
		z-index: 10
	.card
		border-radius: 1.75rem	
		width: 15rem
		margin: 15px auto
		height: 15rem

.getting-started-header
	align-items: center
	h2
		font-weight: 600
		font-size: 3rem
		@include desktop
			font-size: 2rem
.getting-started-div
	p
		font-weight: 600
		font-size: 1.5rem
		margin: 0
		@include desktop
			font-size: 19px
.getting-started-icons
	@include phone
		flex-wrap: wrap
		justify-content: flex-start !important
		padding-left: 1rem
	.d-flex
		@include phone
			padding: 1.5rem
	.arrow-icon
		@include phone
			display: none
.schedule-background
	position: relative
	overflow: hidden
	height: 120vh
	width: 100%
	background-size: cover
	background-repeat: no-repeat
	align-items: center
	justify-content: space-evenly
	@include phone
		background-image: none !important
		height: auto
		flex-direction: column
.schedule-container
	width: 100%
	.container
		#appointmentsDiv
			#appointmentsContainer
				.card3d
					left: 0 !important
				.hiddenCard
					@include desktop
						height: 100%
						overflow: scroll
.icon-circle
	background: #FFFFFF
	box-shadow: -6px 2px 11px rgba(0, 0, 0, 0.25)
	width: 90px
	height: 90px
	border-radius: 50%
	display: flex
	justify-content: center
	align-items: center
	margin: 3rem 0
	@include phone
		display: none
.icon-circle:nth-child(even)
	align-self: flex-end
.green-line
	width: 400px
	height: 0
	border: 1px solid #0DC12A

.trusted-companies-div
	.company-icons
		justify-content: space-around
		align-items: center
		flex-wrap: wrap
		div
			@include phone
				padding: 2rem 0 

.video_left_listing
	margin-bottom : 20px
	padding: 0px
	li
		margin-bottom: 15px
		text-align: center
		color: #ccc
		list-style-type : none

.app-detail-page
	height : 750px

.int-orange
  background-color: #de7c33
  &:hover
    opacity : 0.9
    background-color: #de7c33
  &:focus
    opacity : 0.9
    background-color: #de7c33
.int-grey
  background-color: #C0C0C0
  &:hover
    opacity : 0.9
    background-color: #C0C0C0
  &:focus
    opacity : 0.9
    background-color: #C0C0C0

.animatable
	visibility: hidden
	-webkit-animation-play-state: paused   
	-moz-animation-play-state: paused     
	-ms-animation-play-state: paused
	-o-animation-play-state: paused   
	animation-play-state: paused 
	@include phone
		animation: none
		visibility: unset

.dont-animate
	@include phone
		animation: none !important

.bounceInRight
	-webkit-animation-name: bounceInRight
	-moz-animation-name: bounceInRight
	-o-animation-name: bounceInRight
	animation-name: bounceInRight
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s	

.bounceInLeft
	-webkit-animation-name: bounceInLeft
	-moz-animation-name: bounceInLeft
	-o-animation-name: bounceInLeft
	animation-name: bounceInLeft
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s	

.fadeIn
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s	
.animated
	visibility: visible
	-webkit-animation-fill-mode: both
	-moz-animation-fill-mode: both
	-ms-animation-fill-mode: both
	-o-animation-fill-mode: both
	animation-fill-mode: both
	-webkit-animation-play-state: running
	-moz-animation-play-state: running
	-ms-animation-play-state: running
	-o-animation-play-state: running
	animation-play-state: running	

@-webkit-keyframes bounceInRight
    0%
        opacity: 0
        -webkit-transform: translateX(2000px)

    60%
        -webkit-transform: translateX(-20px)

    80%
        -webkit-transform: translateX(5px)

    100%
        opacity: 1
        -webkit-transform: translateX(0)

@-moz-keyframes bounceInRight
    0%
        opacity: 0
        -moz-transform: translateX(2000px)

    60%
        -moz-transform: translateX(-20px)

    80%
        -moz-transform: translateX(5px)

    100%
        opacity: 1
        -moz-transform: translateX(0)

@-o-keyframes bounceInRight
    0%
        opacity: 0
        -o-transform: translateX(2000px)

    60%
        -o-transform: translateX(-20px)

    80%
        -o-transform: translateX(5px)

    100%
        opacity: 1
        -o-transform: translateX(0)

@-webkit-keyframes bounceInLeft
    0%
        opacity: 0
        -webkit-transform: translateX(-2000px)

    60%
        -webkit-transform: translateX(20px)

    80%
        -webkit-transform: translateX(-5px)

    100%
        opacity: 1
        -webkit-transform: translateX(0)

@-moz-keyframes bounceinleft
    0%
        opacity: 0
        -moz-transform: translateX(-2000px)

    60%
        -moz-transform: translateX(20px)

    80%
        -moz-transform: translateX(-5px)

    100%
        opacity: 1
        -moz-transform: translateX(0)

@-o-keyframes bounceinleft
    0%
        opacity: 0
        -o-transform: translateX(-2000px)

    60%
        -o-transform: translateX(20px)

    80%
        -o-transform: translateX(-5px)

    100%
        opacity: 1
        -o-transform: translateX(0)

.animated-under-image
	width: 27%
	@include desktop
		width: 22%
	img
		width: 100%
		margin-left: 7rem
		@include desktop
			margin-left: 12rem
.advantage-integration
	ul
		li
			img 
				width: 22px
				height: 22px
@-webkit-keyframes fadeIn
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeIn
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeIn
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeIn
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1		

.fadeInLeft
	animation-name: fadeInLeft
	-moz-animation-name: fadeInLeft
	-o-animation-name: fadeInLeft
	animation-name: fadeInLeft
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s

@keyframes fadeInLeft 
   0% 
      opacity: 0
      transform: translateX(-20px)
   
   100% 
      opacity: 1
      transform: translateX(0)
   

@-webkit-keyframes fadeInLeft
   0% 
      opacity: 0
      transform: translateX(-20px)
   
   100% 
      opacity: 1
      transform: translateX(0)

@-moz-keyframes fadeInLeft
   0% 
      opacity: 0
      transform: translateX(-20px)
   
   100% 
      opacity: 1
      transform: translateX(0)

@-o-keyframes fadeInLeft
   0% 
      opacity: 0
      transform: translateX(-20px)
   
   100% 
      opacity: 1
      transform: translateX(0)  

.fadeInRight
	animation-name: fadeInRight
	-moz-animation-name: fadeInRight
	-o-animation-name: fadeInRight
	animation-name: fadeInRight
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s

@keyframes fadeInRight 
   0% 
      opacity: 0
      transform: translateX(20px)
   
   100% 
      opacity: 1
      transform: translateX(0)
   

@-webkit-keyframes fadeInRight
   0% 
      opacity: 0
      transform: translateX(20px)
   
   100% 
      opacity: 1
      transform: translateX(0)

@-moz-keyframes fadeInRight
   0% 
      opacity: 0
      transform: translateX(20px)
   
   100% 
      opacity: 1
      transform: translateX(0)

@-o-keyframes fadeInRight
   0% 
      opacity: 0
      transform: translateX(20px)
   
   100% 
      opacity: 1
      transform: translateX(0)  		

.fadeInFirst
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 0.75s
	-moz-animation-duration: 0.75s
	-ms-animation-duration: 0.75s
	-o-animation-duration: 0.75s
	animation-duration: 0.75s

.fadeInSecond
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 1s
	-moz-animation-duration: 1s
	-ms-animation-duration: 1s
	-o-animation-duration: 1s
	animation-duration: 1s
.fadeInThird
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 2s
	-moz-animation-duration: 2s
	-ms-animation-duration: 2s
	-o-animation-duration: 2s
	animation-duration: 2s
.fadeInFourth
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 2.5s
	-moz-animation-duration: 2.5s
	-ms-animation-duration: 2.5s
	-o-animation-duration: 2.5s
	animation-duration: 2.5s
.fadeInFifth
	-webkit-animation-name: fadeIn
	-moz-animation-name: fadeIn
	-o-animation-name: fadeIn
	animation-name: fadeIn
	-webkit-animation-duration: 3s
	-moz-animation-duration: 3s
	-ms-animation-duration: 3s
	-o-animation-duration: 3s
	animation-duration: 3s	
@-webkit-keyframes fadeInFirst
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeInFirst
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeInFirst
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeInFirst
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1
@-webkit-keyframes fadeInSecond
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeInSecond
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeInSecond
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeInSecond
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1
@-webkit-keyframes fadeInThird
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeInThird
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeInThird
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeInThird
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1
@-webkit-keyframes fadeInFourth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeInFourth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeInFourth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeInFourth
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1	
@-webkit-keyframes fadeInFifth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-moz-keyframes fadeInFifth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@-o-keyframes fadeInFifth
	0%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

@keyframes fadeInFifth
	0%
		opacity: 0
	60%
		opacity: 0
	20%
		opacity: 0
	100%
		opacity: 1

.fadeInfirsttick
  -webkit-animation-name: fadeIn
  -moz-animation-name: fadeIn
  -o-animation-name: fadeIn
  animation-name: fadeIn
  -webkit-animation-duration: 1s
  -moz-animation-duration: 1s
  -ms-animation-duration: 1s
  -o-animation-duration: 1s
  animation-duration: 1s
.fadeInsecondtick
  -webkit-animation-name: fadeIn
  -moz-animation-name: fadeIn
  -o-animation-name: fadeIn
  animation-name: fadeIn
  -webkit-animation-duration: 1.5s
  -moz-animation-duration: 1.5s
  -ms-animation-duration: 1.5s
  -o-animation-duration: 1.5s
  animation-duration: 1.5s
.fadeInthirdtick
  -webkit-animation-name: fadeIn
  -moz-animation-name: fadeIn
  -o-animation-name: fadeIn
  animation-name: fadeIn
  -webkit-animation-duration: 2s
  -moz-animation-duration: 2s
  -ms-animation-duration: 2s
  -o-animation-duration: 2s
  animation-duration: 2s
.fadeInfourthtick
  -webkit-animation-name: fadeIn
  -moz-animation-name: fadeIn
  -o-animation-name: fadeIn
  animation-name: fadeIn
  -webkit-animation-duration: 2.5s
  -moz-animation-duration: 2.5s
  -ms-animation-duration: 2.5s
  -o-animation-duration: 2.5s
  animation-duration: 2.5s
.fadeInfifthtick
  -webkit-animation-name: fadeIn
  -moz-animation-name: fadeIn
  -o-animation-name: fadeIn
  animation-name: fadeIn
  -webkit-animation-duration: 3s
  -moz-animation-duration: 3s
  -ms-animation-duration: 3s
  -o-animation-duration: 3s
  animation-duration: 3s  
@-webkit-keyframes fadeInfirsttick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes fadeInfirsttick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-o-keyframes fadeInfirsttick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeInfirsttick
  0%
    opacity: 0
  60%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1
@-webkit-keyframes fadeInsecondtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes fadeInsecondtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-o-keyframes fadeInsecondtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeInsecondtick
  0%
    opacity: 0
  60%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1
@-webkit-keyframes fadeInthirdtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes fadeInthirdtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-o-keyframes fadeInthirdtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeInthirdtick
  0%
    opacity: 0
  60%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1
@-webkit-keyframes fadeInfourthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes fadeInfourthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-o-keyframes fadeInfourthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeInfourthtick
  0%
    opacity: 0
  60%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1  
@-webkit-keyframes fadeInfifthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-moz-keyframes fadeInfifthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@-o-keyframes fadeInfifthtick
  0%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1

@keyframes fadeInfifthtick
  0%
    opacity: 0
  60%
    opacity: 0
  20%
    opacity: 0
  100%
    opacity: 1									
.bounceIn
  -webkit-animation-name: bounceIn
  -moz-animation-name: bounceIn
  -o-animation-name: bounceIn
  animation-name: bounceIn
  -webkit-animation-duration: 2s
  -moz-animation-duration: 2s
  -ms-animation-duration: 2s
  -o-animation-duration: 2s
  animation-duration: 2s   

@-webkit-keyframes bounceIn
  0%
    opacity: 0
    -webkit-transform: scale(.3)
  50%
    -webkit-transform: scale(1.05)

  70%
    -webkit-transform: scale(.9)

  100%
    opacity: 1
    -webkit-transform: scale(1)

@-moz-keyframes bounceIn
  0%
    opacity: 0
    -moz-transform: scale(.3)

  50%
    -moz-transform: scale(1.05)

  70%
    -moz-transform: scale(.9)

  100%
    opacity: 1
    -moz-transform: scale(1)

@-o-keyframes bounceIn
  0%
    opacity: 0
    -o-transform: scale(.3)

  50%
    -o-transform: scale(1.05)

  70%
    -o-transform: scale(.9)

  100%
    opacity: 1
    -o-transform: scale(1)

@keyframes bounceIn
  0%
    opacity: 0
    transform: scale(.3)

  50%
    transform: scale(1.05)

  70%
    transform: scale(.9)

  100%
    opacity: 1
    transform: scale(1)

.adp-margin
	margin: 6rem 0
	@include desktop
		margin: 4rem 0
	@include phone
		margin 3 rem 0