.separateContainer {
	max-width: 1279px;
	margin: 0 auto;
	width: 65%;
}
/* .playImage{
	width:100px;
	    margin-left: 210px;
	    margin-top: 250px;
	
	height:100px;
} */


.headingWhite {
	color: white;
}
.justifyAlign1{
	    text-align: -webkit-left;
	    line-height: 26px;
	
}
.italic{
	font-weight:600;
}
.subHeading {
	color: #b6e8f7;
}

.container {
	max-width: 1279px;
}

.p4 {
	font-size: 1.6rem;
}

.bannerText {
		color: rgb(105, 105, 105)
	}

@media only screen and (max-width: 960px) and (min-width: 600px) {
	.v-header {
		height: 375px;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    position: relative;
	} 
	.text-section {
	    width: 75%;
	}
}

@media only screen and (max-width: 1280px) and (min-width: 960px) {
	.v-header {
		height: 476px;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    position: relative;
	} 
}

@media only screen and (min-width: 1280px) and (max-width: 1550px) {	
	.v-header {
		height: 575px;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    position: relative;
	} 
}

@media only screen and (min-width: 1550px) {	
	.v-header {
		height: 760px;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    position: relative;
	} 
}	
	
.fullscreen-video-wrap {
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	}
	
.fullscreen-video-wrap video {
		height: 100%;
	    width: 100%;
	    object-fit: fill;
	}
	
	
.header-content {
	width: 50%;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    /* bottom: 0px; */
    /* position: absolute; */
    /* text-align: center; */
   /*  padding: 2%; */
    /* color: #fd940b; */
    /* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); */
    font-weight: 600;
}

	.header-overlay {
		height: 100%;
	    width: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    background: #225470;
	    z-index: 1;
	    opacity: 0.65;
	}
	
	
	
	.text-section p {
		width: 60%;
	}
	
	
		

.herotextContainer {
	padding-top: 0%;
	padding-bottom: 2%;
	background-color: #ece9e2;
	color: #006684;
}

.herotextContainer1 {
	background-image: url(../images/data-connectors-banner/connectorsTextbackground.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: white;
    height: 375px;
}

.herotextContainer2 {
	padding-top: 0%;
    padding-bottom: 2%;
    background-color: #006684;
    color: white;
}

#app-button {
	background-color: black;
    padding: 0px;
}
.cardsContainer {
	padding-top: 3%;
	padding-bottom: 6%;
	background-color: whitesmoke;
}

.yujaCards {
	background-color: #006684;
	border-radius: 8px;
	border-left: 4px solid #006684;
}

.yujaCards figure {
	display: block;
	padding: 20px;
}

.yujaCards:hover {
	border-left: 4px solid #fd940b;
}

.cardsTileFooter {
	background-color: transparent;
}

.cardsTileFooter figcaption {
	margin: 0 auto;
}

#cardId {
	box-shadow: none;
	background-color: rgba(0, 0, 0, 0);
}

#buttonStyle {
	background-color: #f9a65b;
	text-transform: capitalize;
	line-height: 50px;
	padding: 0 15px;
	font-weight: 600;
	color: #172a33;
}

.cardContent {
	color: #efefef;
}

.anchorFont {
	color: #f9ad6c;
	font-weight: bolder;
	font-size: 1.7rem;
	text-transform: capitalize;
}

#cardContentDiv {
	height: 126px;
}
.playIcon {
		height: 20px;
	    width: 20px;
	   
	}
@media only screen and (max-width: 600px) {
	#cardTitle {
		-webkit-box-flex: 1;
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		height: 135px;
	}
	.v-header {
		height: 195px;
	    display: flex;
	    align-items: center;
	    color: #fff;
	    position: relative;
	} 
	
	#bannerButton {
	    background-color: none;
	    background-color: #006684;
	    font-weight: 600;
	    text-transform: capitalize;
	    font-size: 10px;
	    /* line-height: 47px;
	    padding: 0 10px 0 10px; */
	    height: auto;
	    
	}
	
	.text-section {
	    width: 60%;
	}
	.playIconAnchor {
		 margin-top: 20%;
	}
}
@media only screen and (min-width: 960px) {
	
	.text-section {
	    width: 48%;
	}
}
@media only screen and (min-width: 600px) {
	#cardTitle {
		-webkit-box-flex: 1;
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		height: 158px;
	}
	
	#bannerButton {
	display: inline-flex;
    background-color: none;
    background-color: #006684;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 47px;
    padding: 0 10px 0 10px;
    height: auto;
    
	}
	
	
}

/* .chip {
    display: flex;
    border: 2px solid #fd940b;
    padding-right: 33px;
    font-size: 1.8rem;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    position:fixed;
  bottom:20px;
  left:20px;
  z-index : 4;
} */
.phoneIcon {
	padding-left: 13px;
	padding-top: 13px;
}

.headingCard {
	color: white;
	text-align: center;
}

.chip img {
	float: left;
	margin: 0 10px 0 -25px;
	height: 50px;
	width: 50px;
	border-radius: 50%;
}

#connectorsImage {
	border-radius: 2px 2px 0 0;
	height: 56px;
	width: 56px;
	transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease; 
}

.tileFooter {
	background-color: transparent;
	color: black;
	/* padding-top: 6%; */
}

.tileFooter figcaption {
	margin: 0 auto;
}

.paddingProperty {
	padding-bottom: 5%;
	padding-top: 5%;
}

.grow:hover {
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}

a .grow:hover {
    outline-width: 1px;
    outline-color: darkgray;
    outline-style: auto;
}

/* ********************************************Back to Top Button CSS************************************************** */
#back2Top {
	width: 52px;
	line-height: 52px;
	border-radius: 35px;
	overflow: hidden;
	z-index: 999;
	display: none;
	cursor: pointer;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: rgba(0, 0, 0, 0.12);
	color: rgba(0, 0, 0, 0.38);
	/* border: 1px solid #006684; */
	text-align: center;
	font-size: 30px;
	text-decoration: none;
}

#back2Top:hover {
	background-color: #006684;
	color: #fd940b;
}

.chip {
	display: none;
	max-width: 50px;
	-webkit-transition: max-width 1s;
	transition: max-width 1s;
	vertical-align: top;
	overflow: hidden;
	display: flex;
	border: 2px solid #fd940b;
	/* padding-right: 33px; */
	font-size: 1.8rem;
	height: 50px;
	line-height: 50px;
	border-radius: 32px;
	background-color: #f1f1f1;
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 4;
}

.chip:hover {
	max-width: 28rem;
	border: 2px solid #fd940b;
	padding-right: 14px;
	font-size: 1.8rem;
	height: 50px;
	line-height: 50px;
	border-radius: 30px;
	background-color: #f1f1f1;
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 4;
}

.chip:hover .chipText a {
	padding-left: 18px;
	color: #006684;
	text-decoration: none;
	display: block;
}

.iconDiv {
	height: 50px;
	width: 50px;
	border-radius: 35px;
	/* border: 2px solid #fd940b; */
	background-color: #006684;
}

.iconDiv a {
	color: white;
}

.chipText a {
	display: none;
}

.fingerBullet {
	margin-right: 10px;
	height: 18px;
}

/* ##################################################Carousal Style####################################### */
.cardsPadding {
	padding: 15px;
}

.cardContentDiv {
	height: 186px;
	color: #ece9e2;
}

.cardTitle {
	-webkit-box-flex: 1;
	-webkit-flex: 0 1 auto;
	flex: 0 1 auto;
	height: 182px;
}

html {
	overflow-y: scroll;
}

.container {
	position: relative;
}

.sliderheight {
	height: 481px;
}

.slick-initialized .slick-slide {
	height: auto;
	cursor: pointer;
}

.your-class {
	height: 405px;
	overflow: hidden;
}

.headingCorousel1 {
	color: white;
	text-align: center;
	padding: 3%;
	line-height: 1.43;
	font-weight: 500;
	/*     text-transform: uppercase;
 */
	margin-left: 1%;
}

.productInfoButton.btn-large {
	background-color: #006684;
}

.btn, .btn-large {
	background-color: #006684;
	color: white;
}

.corouselbackground {
	/* background-color: #86dff9; */
	background-image: url(../images/sample/YujaaLoginPageBackGround.png);
	height: 760px;
	overflow: hidden;
	width: 100%;
}

.corouselbackground2 {
	background-color: #006684;
	height: 810px;
	overflow: hidden;
}

.fontHidden {
	color: black;
	font-size: 16px;
}

.animate:hover {
	margin-top: -70px;
}

.animate {
	transition: 0.6s;
}

.arrows {
	height: 30px;
	padding-top: 2px;
	cursor: pointer;
	color: #006684;
}

.iconsleftCorosel {
	cursor: pointer;
	float: right;
	position: relative;
	right: 6%;
	display: flex;
	color: #006684;
}

.iconsleftCorosel1 {
	cursor: pointer;
	float: right;
	position: relative;
	right: 6%;
	display: flex;
	MARGIN-TOP: 25%;
}

#left1 {
	color: #006684 !important;
}

#right1 {
	color: #006684;
}

.your-class, .your-class1
  img {
	width: 100%;
	height: 450px;
}

.fontCorousel {
	text-align: justify;
	color: #828282 !important;
	margin: 20px;
	font-size: 14px;
}

.fontCorousel1 {
	text-align: justify;
	color: #828282 !important;
	margin: 12px;
	font-size: 14px;
}

.marginTop {
	margin-top: 8%;
}

.fontCorousel1 {
	text-align: center;
	font-weight: 600;
	line-height: 118%;
	color: #828282;
}

.innerCorousel {
	width: 265px;
	padding: 0%;
	margin: 10px;
	height: 471px;
	overflow: hidden;
	position: relative;
	border-left: 4px solid #96e3fa;
	border-radius: 8px;
	color: white;
	font-weight: 600;
	background-color: #50656b;
}

.innerCorousel:HOVER {
	border-left: 4px solid #fd940b;
}

.imageHeight {
	height: 488px;
}

.headingCorousel {
	padding: 1%;
}

.corouselPadding {
	margin-top: 30%
}

.corouselFirst {
	display: block;
	margin: 0 auto;
	width: 300px;
}

h6 {
	color: #006684;
}

.flow-text {
	color: #006684;
}

.commentsText {
	color: white !important;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.maindivCorousel {
	background: lightgrey;
	background-color: white;
	min-height: 444px;
	width: 100%;
	z-index: 1;
	backface-visibility: hidden;
	position: relative;
}

.blogsPadding {
	margin-right: 90%;
}

.slick-slide {
	min-height: 350px;
}

.slick-initialized .slick-slide {
	width: 321.75px;
}

.slick-slide img {
	display: block;
	height: auto;
}

.productInfoButton.btn-large {
	background-color: #006684;
}

.btn, .btn-large {
	background-color: #006684;
	color: white;
}

i.left {
	color: white;
}

i.right {
	color: white;
}

.hidden {
	display: none;
	margin: auto;
}

.innerCorousel:hover  .hidden {
	display: block;
}

.left {
	height: 35px;
	width: 35px;
}

.right {
	height: 35px;
	width: 35px;
}

#img-circle {
	border-radius: 60%;
	background-color: white;
	height: 90px;
	width: 90px;
	margin: 0 auto;
}

#svg {
	display: block;
}

.navPro {
	color: #006684 !important;
}

.navSol {
	color: #006684 !important;
}

.navPar {
	color: #006684 !important;
}

.navLea {
	color: #006684 !important;
}

.pricing {
	color: black;
}

.SignIn {
	color: black;
}

.SignupFree {
	color: black;
	float: right !important;
	amrgin-left: 20px;
}

.pricing:hover {
	-webkit-transform: scale(1.106);
	-moz-transform: scale(1.106);
	transform: scale(1.106);
	background-color: #fd940b;
	color: white !important;
}

.SignIn:hover {
	-webkit-transform: scale(1.106);
	-moz-transform: scale(1.106);
	transform: scale(1.106);
	background-color: #fd940b;
	color: white !important;
}

.SignupFree:hover {
	background-color: #fd940b;
	color: white !important;
	float: right !important;
}
/* .imageCorousel{
margin-top:5px;
}
     */
.imageBorder {
	display: block;
	margin: 0 auto;
	height: 55px;
	width: 55px;
	padding: 7%;
	border-radius: 88px;
	margin-top: 6%;
	background-color: white;
}

.fontColor {
	color: #184856;
}

 /* ##################################################Twitter Tweets Style####################################### */
 

		.arrow {
cursor: pointer;
display: block;
height: 64px;
margin-top: -7px;
outline: medium none;
position: absolute;
top: 50%;
/* width: 64px; */
z-index: 5;
}

.arrow.prev {
/* left: -16px; */
opacity: .8;
transition: all 0.2s linear 0s;
}
.arrow.next {
opacity: .8;
right: 0px;
transition: all 0.2s linear 0s;
}
/* .material-icons
{
	font-size:50px !important;
} */
.arrow.prev:hover{
opacity:1;
}
.arrow.next:hover{
opacity:1;
}


.slider {
height: 182px;
position: relative;
/* width: 100%; */

-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
/* -webkit-transform-style: preserve-3d; */
/* -moz-transform-style: preserve-3d; */
/* -ms-transform-style: preserve-3d; */
/* -o-transform-style: preserve-3d; */
/* transform-style: preserve-3d; */
}
.slide {
/* position: absolute; */
top: 0;
left: 0;
/* width:80%;  */
padding: 5px 10px 10px 10px;
margin: 0 auto;
}
.slide.ng-hide-add {
opacity:1;

}
.slide.ng-hide-add.ng-hide-add-active {
opacity:0;
}
.slide.ng-hide-remove {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
display:block!important;
opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}

.tweetClass {
	text-align: center;
    color: black !important;
    text-decoration: none;
    font-weight: 600;
}

.tweetClass:HOVER {
    color: #19768c !important;
    font-weight: 600;
}

.tweetText {
	color: #5d686b;
	font-size: 1.3rem;
	font-weight: 700;
}

.tweets-container {
	padding-top: 3%;
	padding-bottom: 5%;
}
.slider-sec {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	/* border: 1px solid #a9a9a9; */
	    border-radius: 3px;
	    background-color: #e9eaea;
}

.slider-header {	
	padding: 1px;
    background-color: #d5f0fc;
    border: 1px solid #a9a9a9;
  }
  
  .slider-header h3 {
  	text-align: center;
    margin: 0.6em 0px 0.6em 0px;
  }
  
  .arrow .material-icons {
	font-size:35px !important;
} 

.twitterImg {
	height: 30px;
    width: 30px;
}

 .twitImgDiv {
	padding: 3px 10px 3px 10px;
	background-color: #5f8da0;
}

.twitImgDiv span {
	bottom: 7px;
    position: relative;
    left: 1%;
} 

#dividerline {
	width: 30%;
	margin: 0 auto;
}

.dateDiv {
	margin-top: -1%;
    padding-bottom: 1px;
}

#tweetButton {
	background-color: #006684;
    text-transform: capitalize;
    line-height: 40px;
    padding: 0 15px;
    font-weight: 600;
    color: white;
}