/*------------------------
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; }


/*---------------------
 v20 SLIDE
-----------------------*/
@media (min-width: 640px) {
    #v20.hero_slide {
        background-image: url("../img/home/home-slider-v20.jpg"), linear-gradient(90deg, rgb(0, 120, 255) 0,rgb(0, 160, 255) 40%);
        background-position:  no-repeat 50% 0;
        background-color:#28ACFF
        }
}

#v20 .intro {
    width: 450px;
    height: 334px;
    padding: 20px 20px 30px 30px;
    margin-left: -20px;
    margin-top: 30px;
    background: rgba(255, 255, 255, .14) ;
    box-shadow: 0 17px 25px 0 rgba(0,0,0,.11);
}

#v20 .intro li{margin-bottom: 2px;}

#v20 .intro li a{ color: #FFFFFF !important; padding: 5px; }

#v20 .tech_bar {
    background-color: rgba(0, 104, 205, .25);
}

#v20 .img {float: right; width: 430px; padding: 50px 0px 40px; margin-top: 30px;
    transform: rotateX(0deg) rotateY(-50deg) rotateZ(0deg) skewY(5deg) skewX(0deg);
}

/*#v20 h1, #v20 h3, #v20 p {text-shadow: none;}*/

#v20 ul {
    width: 100%;
    margin: -10px  0 14px;
}

#v20  ul li{
    padding: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;

}

/*-------------
	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; }