/*------------------------
1.  HERO
3.  HERO SLIDE GENERIC TEXT
4.  HOME SLIDE
5.  UPDATE / NEWS SLIDE
6.  CUSTOM DEV OEM SLIDE
7.  API SERVER SLIDE
8.  HERO SLIDE BUTTONS
9.  BACKGROUND GROW FEATURE
10. TECH BAR
11. CAROUSEL
-------------------------->*/


/*------------------------
    HERO
-------------------------->*/

#hero_home { height: 540px; margin: 0 auto; position:relative; background-color:#1573BD;}
#hero-container {height:540px;overflow:hidden;}

	#hero-container .item .container {
		width:960px;
	}

		#hero-container .item .container .col {
			padding-top:3.571em;
		}

.hero_slide{ height: 540px; overflow: hidden; }
	.hero_slide h1.white
	{
		-webkit-text-shadow: 0px 2px 2px rgba(25,25,112,.4);
		-moz-text-shadow: 0px 2px 2px rgba(25,25,112,.4);
		text-shadow: 0px 2px 2px rgba(25,25,112,.4);
	}
    .no-shadow {
        -webkit-text-shadow: none;
        -moz-text-shadow: none;
        text-shadow: none;
    }
    .hero_slide h3.white
    {
        -webkit-text-shadow: 0px 2px 2px rgba(25,25,112,.4);
        -moz-text-shadow: 0px 2px 2px rgba(25,25,112,.4);
        text-shadow: 0px 2px 2px rgba(25,25,112,.4);
    }

/* Used for ANY animated items in a container */
.animation {
	position: absolute;
	-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
	.animation.invisible {
		display:none; visibility:initial;
	}

/*----------------------
    HERO SLIDE BUTTONS
------------------------*/

#hero_home a.btn {
    -webkit-text-shadow: 0px 2px 2px rgba(0,0,0,.0);
    -moz-text-shadow: 0px 2px 2px rgba(0,0,0,.0);
    text-shadow: 0px 2px 2px rgba(0,0,0,.0);
	color: White !important;
    background:  rgba(0, 160,255,.6);
    border: 1px solid rgba(255,255,255,.2);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
}
	#hero_home a.btn:hover{
		color: White !important;
		background:  rgba(0, 140,235,.8);
		border: 1px solid rgba(255,255,255,.2);
	}


/*--------------------
	HOME SLIDE BACKGROUNDS
----------------------*/

.hero_slide     { background: url(../img/home/home-slider-bkg.jpg) no-repeat center bottom; background-size: cover;}
 /* #oem_new.hero_slide 	{ background: url(../img/home/home-slider-bkg-oem.jpg) no-repeat center bottom; background-size: cover;} */



/*--------------------
	HOME SLIDE
----------------------*/
#home{
	background: #257ab2 url(../img/home/home-slider-main.jpg) no-repeat center bottom;
	border-bottom: 0px solid transparent;
}

.tagcloud {	background: url(../img/home/home-slider-main4.png) no-repeat; }


/*------------------------
	API SERVER SLIDE
-------------------------*/
#api_server {}

/*NEW ANIMATION*/
.imgApi  {
	width:450px;
	height:385px;
	position: relative;
}

.api_cloud1     {width:391px; height:217px; left:66px; top:26px;  background: url(../img/home/api_cloud1_light.png) no-repeat; z-index: 800;}
.api_cloud2     {width:225px; height:158px; left:0px; top:147px;  background: url(../img/home/api_cloud2_light.png) no-repeat; z-index: 801;}
.api_cloud3     {width:226px; height:157px; left:275px; top:145px;  background: url(../img/home/api_cloud3_light.png) no-repeat; z-index: 802;}
.api_rest       {width:165px; height:113px; left:163px; top:165px;  background: url(../img/home/api_rest.png) no-repeat; z-index: 804;}
.api_lowerText  {width:382px; height:134px;  left:53px; top:284px;  background: url(../img/home/api_lowerText.png) no-repeat; z-index: 804;}

.api_swoosh     {width:179px; height:271px; left:154px; top:63px;  background: url(../img/home/api_swoosh.png) no-repeat; z-index: 803;}
.api_upperText  {width:372px; height:99px; left:93px; top:115px;  background: url(../img/home/api_upperText.png) no-repeat; z-index: 805;}
.dark .api_cloud1     {width:391px; height:217px; left:66px; top:26px;  background: url(../img/home/api_cloud1.png) no-repeat; z-index: 800;}
.dark .api_cloud2     {width:225px; height:158px; left:0px; top:146px;  background: url(../img/home/api_cloud2.png) no-repeat; z-index: 801;}
.dark .api_cloud3     {width:226px; height:157px; left:254px; top:167px;  background: url(../img/home/api_cloud3.png) no-repeat; z-index: 802;}
.dark .api_swoosh     {width:443px; height:319px; left:20px; top:70px;  background: url(../img/home/api_swoosh_dark.png) no-repeat; z-index: 803;}
.dark .api_upperText  {width:372px; height:99px; left:93px; top:115px;  background: url(../img/home/api_upperText_dark.png) no-repeat; z-index: 805;}


/*---------------------
 CUSTOM DEV/OEM	SLIDE
-----------------------*/
#oem {}

#oem_alt  {}

.imgOem  {
	width:450px;
	height:450px;
	position: relative;
    top:40px;
}

.imgOem2 {
    top:0px;
}

.api_stack_grid  {width:480px; height:385px; left:0px; top:0px;  background: url(../img/home/api_stack_grid.png) no-repeat;; z-index: 802; }

.api_stack_bottom  {width:322px; height:84px;  left:82px; top:209px; background: url(../img/home/api_stack_bottom.png) no-repeat; z-index: 803; }
.api_stack_top     {width:306px; height:90px;  left:77px;  top:81px; background: url(../img/home/api_stack_top.png)    no-repeat; z-index: 805; }
.api_stack_middle  {width:298px; height:87px;  left:85px;  top:147px; background: url(../img/home/api_stack_middle.png) no-repeat; z-index: 804; }

.api_stack_top.moveUp    {top:51px;}
.api_stack_middle.moveUp {top:;}
.api_stack_bottom.moveUp {top:241px;}

.oem_sources {width:450px; height:540px; left:0px; top:0px;  background: url(../img/home/oem_sources.png) no-repeat;; z-index: 802; }


/*---------------------
 PERFORMANCE SLIDE
-----------------------*/
#performance.hero_slide { background: url(../img/home/home-slider-performance.jpg) no-repeat center center; background-size: cover;}
#performance .intro {
    background: rgba(23, 128, 202, .63) ;
    width: 500px;
    padding: 20px 20px 30px 30px;
    margin-left: -20px;
    margin-top: 30px;
}
 #performance .intro p {margin-bottom: 20px;
    webkit-text-shadow: 0px 2px 2px rgba(0,0,0,.4);
    -moz-text-shadow: 0px 2px 2px rgba(0,0,0,.4);
    text-shadow: 0px 2px 2px rgba(0,0,0,.4);

 }

/*---------------------
 POWERBI SLIDE
-----------------------*/
#powerbi.hero_slide { background: #00A0FF url(../img/home/home-slider-powerbi.png) no-repeat center top; background-size: cover;}
#powerbi .intro {
    width: 460px;
    height: 326px;
    padding: 20px 20px 30px 30px;
    margin-left: -20px;
    margin-top: 30px;
}

/*---------------------
 DATA SYNC SLIDE
-----------------------*/
#datasync.hero_slide { background: white url(../img/home/home-slider-datasync.jpg) no-repeat center center; background-size: cover;}

#datasync .intro {
    background: rgba(19, 123, 181, 0.5);
    width: 768px;
    padding: 20px 20px 30px 30px;
    margin: 30px auto 0;
}


/*---------------------
REDIS SLIDE
-----------------------*/
#redis.hero_slide { background: white url(../img/home/home-slider-redis.jpg) no-repeat center center; background-size: cover;}

#redis .intro {
    background: rgba(37, 53, 73, .17);
    width: 420px;
    padding: 20px 20px 30px 30px;
    margin-left: -20px;
    margin-top: 30px;
}

/*---------------------
 MULESOFT SLIDE
-----------------------*/

#mulesoft.hero_slide { background: white url(../img/home/home-slider-mulesoft2.jpg) no-repeat center center; background-size: cover ;}

#mulesoft .intro {
    width: 500px;
    padding: 20px 20px 30px 30px;
    margin-left: -20px;
    margin-top: 20px;
}
#mulesoft img {margin-right}

 #mulesoft .tech_bar {
	 background-color: rgba(51, 122, 183, 0.15);
 }


/*-----------------------
	UPDATE / NEWS SLIDE
-------------------------*/

#update h1 {}
#update p, #update li {color: #565656; font-style: bold;}
#update h4 {color: #177CB8;}

#update .new_release a {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: grey;
}

#update .new_release li {float: left;
	padding:0px !important;
	margin: 0.214em 0.429em 0.214em 0px;
	list-style:none;
	}
#update li img{ margin-right: 3px;}
#update li a.btn{
    text-align: left;
	padding:  0.357em 10px 0.357em 10px;
    min-width: 4.286em;
	line-height: 1.357em;
	height:1.429em;
	margin: 0px;
	color: #565656 !important;
	background: rgba(234,234,234,.1);
	border: 1px solid rgba(113,113,113,.1);
}

#update li a.btn img {margin-right: 0.357em}

#update li  a.btn:hover {
	color: White !important;
	background: rgba(0, 160,255,.6);
	border: 1px solid rgba(3, 109,172,.6);
    -webkit-text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    -moz-text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, .1);
}

.imgUpdate {
	background: #fff url(../img/home/home-slider-update.png) no-repeat -80px 0;
    border-bottom: 0px solid transparent;
	width:470px;
	height:385px;
	position: relative;
}
.imgUpdate .sources1, .imgUpdate .sources2 {height: 180px; width: 420px; top:40px;  position: absolute;  margin-left: 45px; z-index:802;}
.imgUpdate .sources1 {background: url(../img/home/update_source1.png) no-repeat 0px 0px;}
.imgUpdate .sources2 {background: url(../img/home/update_source2.png) no-repeat 0px 0px;}



/*-----------------------
SDK
-------------------------*/

.imgSdk  {
	width:450px;
	height:385px;
	position: relative;
}

.sdk_lines, .sdk_embed, .sdk_block {
	position: absolute;
	-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}

.sdk_embed { width:200px; height:136px; left:160px; top:172px; background: url(../img/home/oem_embed.png) no-repeat -58px -40px; z-index: 810; }
.sdk_block { width:26px; height:30px; left:248px; top:175px; background: url(../img/home/oem_embed2.png) no-repeat; z-index: 811; display: none;}
.sdk_lines { width:450px; height:385px; left:0px; top:40px; background: url(../img/home/oem_lines.png) no-repeat; z-index: 811; display: none; }
.sdk_block.moveDown  {top:225px;}


/*---- Show half size ----*/
.imgSdk.small  { width:auto; height:auto;}
.small .sdk_embed {width:100px; height:68px; background: url(../img/home/oem_embed_small.png) no-repeat -29px -20px; left:80px; top:86px;}
.small .sdk_block { width:13px; height:15px; background: url(../img/home/oem_embed2_small.png) no-repeat; left:124px; top:50px;}
.small .sdk_lines { width:225px; height:193px; background: url(../img/home/oem_lines_small.png) no-repeat; top:20px;}
.small .sdk_block.moveDown  {top:113px;}


/*-------------
	TECH_BAR & CONTAINER
--------------*/

#tech_container, .tech_bar {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0px;
    z-index: 800;
}

/*TECH_BAR COLORS*/


#tech_container ul {
    width: 620px;
    margin: 0 auto;
}


#tech_container .menu li span {
    display: block;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    color: white;
}

/*-------------
	CAROUSEL
----------------*/
.carousel-control {color: #dedede; transition: color 0.2s ease 0s;  text-shadow: none; }
.carousel-control:hover {opacity: .6; color: #00A0FF;}
.carousel-control:focus {color: #dedede;}


/*CAROUSEL INDICATORS*/
#home-hero-slider ol.carousel-indicators li {
    color: #117CB8;
    text-indent: 0 !important;
    border: 0px;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    opacity: 0.7;
    width: 12px;
    margin: 0px;
}
#home-hero-slider  ol.carousel-indicators li.dark {
    /*color: black;*/
}
#home-hero-slider  ol.carousel-indicators li.active {
    background-color: transparent !important;
}
#home-hero-slider  ol.carousel-indicators li:before {
    content: "\f111"; /*"\f10c"*/
    color: #8bcff5;
}
#home-hero-slider  ol.carousel-indicators li.active:before {
    content: "\f111"; /*"\f192"*/
    color: white;
}

#home-hero-slider.carousel-indicators {
    bottom: -4px !important;
}


/*CAROUSEL CONTROL*/
#hero_home .carousel-control {
    z-index: 999;
    width: 5%;
}
#hero_home .carousel-control .fa-chevron-circle-left,
#hero_home .carousel-control .fa-chevron-circle-right {
    position: absolute;
    bottom: 34px;
    display: inline-block;
    font-size: 30px;
}
#hero_home .carousel-control.right i {
    left: 0px;
}
#hero_home .carousel-control.left i {
    right: 0px;
}
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

/*-------------
    CALL OUT
----------------*/
#call_out { min-height: 350px; background-image: linear-gradient( 180deg, #177CB8, #1f9ce6); overflow: auto; margin-bottom: 40px;}


/*-------------
    TOOlTIP
----------------*/
.tooltip {color:white; background: black; opacity: .2;}

.carousel-inner a.btn {
	margin:0px;
}

/*-------------
    Indicators
----------------*/
#home-hero-slider { width: 100%; margin-left: 0px;left: 0px;bottom:0px !important; margin-bottom: 22px;}
#home-hero-slider li{ display: inline-block; width: 139px; height: 60px; background-color: #87c0e0; opacity: 1; border: 2px solid transparent; border-radius: 0px;}
#home-hero-slider li.active {border: 2px solid rgba(255, 255, 255, 1);}
#home-hero-slider li:before{ content: none;}
#home-hero-slider li img{ height: 60px;  ; filter: grayscale(60%); -webkit-filter: grayscale(60%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; opacity: 1;}
#home-hero-slider li.active img{ height: 60px;  filter: grayscale(0%); -webkit-filter: grayscale(0%); opacity: 1; }