/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */
 .flexslider {
		width: 100%;
		margin: 0 auto;
		box-shadow: none;
}
.banner-animation {

    width: auto !important;
    display: inline-block !important;

}
.flexslider li {
		position: relative;
}

.flexslider li .meta {
		position: absolute;
		top: 50px;
		left: 0;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-family: 'Roboto', sans-serif;
		width:100%
}

.flexslider li h1 {

    margin-bottom: 0;
    font-size: 72px;
    font-weight: bold;

}

.flexslider li .category {
	display: inline-block;
	width: 58%;
	text-align: right;
	position: absolute;
	right: 50px;
	text-align: center;
	top: 0px
}

.flexslider li .category p {
	font-size: 43px;
	line-height:50px;
	padding-top:60px
}
.meta {
	text-align: center;
}

.flexslider li h1,
.flexslider li h2,
.flexslider li .category p,
.flexslider li .category span {
		-webkit-animation-duration: .6s;
		animation-duration: .6s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeOutLeft;
		animation-name: fadeOutLeft;
}

.flexslider li.flex-active-slide .meta h1,
.flexslider li.flex-active-slide .meta h2,
.flexslider li.flex-active-slide .meta .category p,
.flexslider li.flex-active-slide .meta .category span {
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
		-webkit-animation-duration: .6s;
		animation-duration: .6s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeInLeft;
		animation-name: fadeInLeft;
}

.banner-animation {
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
		-webkit-animation-duration: .6s;
		animation-duration: .6s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeOutimg;
		animation-name: fadeOutimg;
}

.flexslider li.flex-active-slide .meta h2 {
		-webkit-animation-delay: .5s;
		animation-delay: .5s;
}

.flexslider li.flex-active-slide .meta .category p {
		-webkit-animation-delay: .6s;
		animation-delay: .6s;
}

.flexslider li.flex-active-slide .meta .category span {
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
}

.flex-direction-nav {
		position: absolute;
		top: 0;
		left: 30px;
		width:100%
}
.flex-direction-nav {
  display:none
}
.flex-direction-nav a {
		text-decoration: none;
		display: block;
		position: absolute;
		top: 50px;
		z-index: 10;
		overflow: hidden;
		opacity: .5;
		cursor: pointer;
		color: #fff;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
		text-align: left;
		left: -10px;
}


.flexslider:hover .flex-prev {
		left: -10px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
		opacity: 1;
}

.flex-direction-nav a:before {
		font-family: FontAwesome;
		
		font-size: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 0;
		padding: 2px;
		font-size: 19px;
    line-height: 27px;
}
.flex-prev:before {
	content: '\f104';
}
.flex-next:before {
content: '\f105' ;
}

@-webkit-keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@keyframes fadeInLeft {
		0% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
		100% {
				opacity: 1;
				-webkit-transform: none;
				transform: none;
		}
}

@-webkit-keyframes fadeOutLeft {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}
}

@keyframes fadeOutLeft {
		0% {
				opacity: 1;
		}
		100% {
				opacity: 0;
				transform: translate3d(-100%, 0, 0);
		}
}
@keyframes fadeOutimg {
		0% {
				opacity:0;
		}
		100% {
				opacity: 1;
				-webkit-transform: translate3d(-300%, 0, 0);
				transform: translate3d(-300%, 0, 0);
		}
}



.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
	outline:none
}
.slides, .flex-control-nav, .flex-direction-nav {
	margin:0;
	padding:0;
	list-style:none
}
@font-face {
font-family:'flexslider-icon';
src:url("fonts/flexslider-icon.eot");
src:url("fonts/flexslider-icon.eot?#iefix") format("embedded-opentype"), url("fonts/flexslider-icon.woff") format("woff"), url("fonts/flexslider-icon.ttf") format("truetype"), url("fonts/flexslider-icon.svg#flexslider-icon") format("svg");
font-weight:normal;
font-style:normal
}
.flexslider {
	margin:0;
	padding:0
}
.flexslider .slides>li {
	display:none;
	-webkit-backface-visibility:hidden
}
.flexslider .slides img {
	width:100%;
	display:block
}
.flex-pauseplay span {
	text-transform:capitalize
}
.slides:after {
	content:"\0020";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0
}
html[xmlns] .slides {
	display:block
}
* html .slides {
	height:1%
}
.no-js .slides>li:first-child {
	display:block
}
.flexslider {
	position:relative;
	zoom:1
}
.flex-viewport {
	max-height:2000px;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease
}
.loading .flex-viewport {
	max-height:300px
}
.flexslider .slides {
	zoom:1
}
.carousel li {
	margin-right:5px
}
.flex-direction-nav {
*height:0
}
.flex-direction-nav a {
	display:block;
	width:40px;
	height:40px;
	margin:-20px 0 0;
	position:absolute;
	top:230px;
	z-index:10;
	overflow:hidden;
	opacity:0;
	cursor:pointer;
	color:rgba(255, 255, 255, 0.8);
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all .3s ease
}
.flex-direction-nav .flex-prev {
	left:-50px
}
.flex-direction-nav .flex-next {
	right:-50px;
	text-align:right
}
.flexslider:hover .flex-prev {
	opacity:0.7;
	left:10px
}
.flexslider:hover .flex-next {
	opacity:0.7;
	right:10px
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
	opacity:1
}
.flex-direction-nav .flex-disabled {
	opacity:0 !important;
	filter:alpha(opacity=0);
	cursor:default
}
.flex-pauseplay a {
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	bottom:5px;
	left:10px;
	opacity:0.8;
	z-index:10;
	overflow:hidden;
	cursor:pointer;
	color:#000
}
.flex-pauseplay a:before {
	font-family:"flexslider-icon";
	font-size:20px;
	display:inline-block;
	content:'\f004'
}
.flex-pauseplay a:hover {
	opacity:1
}

.flex-control-nav {
	width:100%;
	position:absolute;
	bottom:-40px;
	text-align:center
}
.flex-control-nav li {
	margin:0 6px;
	display:inline-block;
	zoom:1;
*display:inline
}
.flex-control-paging li a {
	width:11px;
	height:11px;
	display:block;
	background:#666;
	background:rgba(0, 0, 0, 0.5);
	cursor:pointer;
	text-indent:-9999px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	border-radius:20px;
	-webkit-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.3);
	box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.3)
}
.flex-control-paging li a:hover {
	background:#333;
	background:rgba(0, 0, 0, 0.7)
}
.flex-control-paging li a.flex-active {
	background:#000;
	background:rgba(0, 0, 0, 0.9);
	cursor:default
}
.flex-control-thumbs {
	margin:5px 0 0;
	position:static;
	overflow:hidden
}
.flex-control-thumbs li {
	width:25%;
	float:left;
	margin:0
}
.flex-control-thumbs img {
	width:100%;
	display:block;
	opacity:.7;
	cursor:pointer
}
.flex-control-thumbs img:hover {
	opacity:1
}
.flex-control-thumbs .flex-active {
	opacity:1;
	cursor:default
}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity:1;
left:10px
}
.flex-direction-nav .flex-next {
opacity:1;
right:10px
}
}
