.container {
	width: 100%;
	margin:0 auto;
}

#info {
	position: absolute;
	top:30%;
	left:50%;
	width: 600px;
	margin-left:-300px;
	margin-top:-150px;
	font-family: 'Roboto', Helvetica, Arial;
	z-index:1000;
	color:#fff;
	font-weight:300;	
}

#info h1 {
	font-size:40px;
	text-transform:uppercase;
	text-align:center;
}

#info p.styles {
	margin:0 0 20px 0;
	padding:0;
	text-align:center;
	width: 100%;
}

#info p.styles a {
	display:inline-block;
	padding:5px 15px;
	background: rgba(0,0,0,0.5);
	text-decoration:none;
	margin:0 10px;
}

#info p.styles a.active, 
#info p.styles a:hover {
	background: #fff;
	color:#333;
} 

#info p {
	width: 80%;
	text-align:center;
	margin:0 auto;
	line-height: 24px;
}

#info a {
	color:#fafafa;
}

#info p.social {
	width: 220px;
	margin:0 auto;
	margin-top:33px;
}

/* override flexslider default style */
.flexslider {
	border:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	margin:0px;
	overflow:hidden;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;	
}

.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
	z-index:900;
}

.flex-control-paging li a {
	background: transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	border:2px solid #fff;	
}

.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
	background-color: #fff ;
}

.flex-direction-nav {
	height:90px;
	width: 100%;
	position: absolute;
	top:50%;
	left:0;
	margin: -50px 0 0; 	
	z-index:100;
}

.flex-direction-nav li {
	overflow:visible;
}

.flex-direction-nav a  { 
	overflow:visible;
	width: 90px; 
	height: 90px; 
	margin: 0; 
	opacity: 1;  
	top:0;
	color: rgba(0,0,0,0.8); 
	text-indent:-9999em;
	text-shadow: none; 
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 
	background-color: rgba(0,0,0,0.5) ;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;	
}

.flex-direction-nav .arrow {
	position: absolute;
	top:0;
	left:0;
	width: 90px; 
	height: 90px; 
	background: transparent url('../img/nav.png') no-repeat 5px 5px;	
	z-index:200;
}

.flex-direction-nav a.flex-next .arrow {
	background-position: -75px 5px ;
}

.flex-direction-nav .flex-prev { left:0px; }
.flex-direction-nav .flex-next { right:0px; text-align: left;}
.flexslider:hover .flex-prev { left:0; opacity:1}
.flexslider:hover .flex-next { right:0; opacity:1}
.flexslider:hover .flex-prev:hover .arrow { left:0; background-position:5px -95px; background-color: #fff;}
.flexslider:hover .flex-next:hover .arrow { right:0; background-position: -75px -95px ;opacity:1;  background-color: #fff;}

.flexslider:hover .flex-prev:hover,
.flexslider:hover .flex-next:hover {
	background-color: #fff;
	opacity:1; 
}



  @media (min-width: 760px) and (max-width: 1223px) {
          .container {
	width: 100%;
	margin:0 auto;
}

#info {
	position: absolute;
	top:30%;
	left:50%;
	width: 600px;
	margin-left:-300px;
	margin-top:-150px;
	font-family: 'Roboto', Helvetica, Arial;
	z-index:1000;
	color:#fff;
	font-weight:300;	
}

#info h1 {
	font-size:40px;
	text-transform:uppercase;
	text-align:center;
}

#info p.styles {
	margin:0 0 20px 0;
	padding:0;
	text-align:center;
	width: 100%;
}

#info p.styles a {
	display:inline-block;
	padding:5px 15px;
	background: rgba(0,0,0,0.5);
	text-decoration:none;
	margin:0 10px;
}

#info p.styles a.active, 
#info p.styles a:hover {
	background: #fff;
	color:#333;
} 

#info p {
	width: 80%;
	text-align:center;
	margin:0 auto;
	line-height: 24px;
}

#info a {
	color:#fafafa;
}

#info p.social {
	width: 220px;
	margin:0 auto;
	margin-top:33px;
}

/* override flexslider default style */
.flexslider {
	border:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	margin:0px;
	overflow:hidden;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;	
}

.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
	z-index:900;
}

.flex-control-paging li a {
	background: transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	border:2px solid #fff;	
}

.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
	background-color: #fff ;
}

.flex-direction-nav {
	height:70px;
	width: 100%;
	position: absolute;
	top:50%;
	left:0;
	margin: -50px 0 0; 	
	z-index:100;
}

.flex-direction-nav li {
	overflow:visible;
}

.flex-direction-nav a  { 
	overflow:visible;
	width: 70px; 
	height: 70px; 
	margin: 0; 
	opacity: 1;  
	top:0;
	color: rgba(0,0,0,0.8); 
	text-indent:-9999em;
	text-shadow: none; 
	-webkit-transition:  all 0.3s ease-out; 
	-moz-transition:  all 0.3s ease-out; 
	transition:  all 0.3s ease-out; 
	background-color: rgba(0,0,0,0.5) ;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;	
}

.flex-direction-nav .arrow {
	position: absolute;
	top:0;
	left:0;
	width: 70px; 
	height: 70px; 
	background: transparent url('../img/nav.png') no-repeat -4px -4px;	
	z-index:200;
}

.flex-direction-nav a.flex-next .arrow {
	background-position: -86px -5px ;
}

.flex-direction-nav .flex-prev { left:0px; }
.flex-direction-nav .flex-next { right:0px; text-align: left;}
.flexslider:hover .flex-prev { left:0; opacity:1}
.flexslider:hover .flex-next { right:0; opacity:1}
.flexslider:hover .flex-prev:hover .arrow { left:0; background-position:-5px -105px; background-color: #fff;}
.flexslider:hover .flex-next:hover .arrow { right:0; background-position: -88px -105px ;opacity:1;  background-color: #fff;}

.flexslider:hover .flex-prev:hover,
.flexslider:hover .flex-next:hover {
	background-color: #fff;
	opacity:1; 
}
        }


      



         /* general style */
		.preview {
			width: 270px;
			height:90px;
			position: absolute;
			top:0;
			left:90px;
			z-index:100;
			-webkit-transition:  all 0.3s ease-out; 
			-moz-transition:  all 0.3s ease-out; 
			transition:  all 0.3s ease-out; 	
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;	
			-webkit-perspective-origin: 100% 50%;
			perspective-origin: 100% 50%;
			-webkit-perspective: 1000px;
			perspective: 1000px;										
		}
		
		.preview img {
			position: absolute;
			left:0;
			top:0;
			width: 90px;	
			z-index:10;		
		}
		
		.preview .alt {
			position: absolute;
			left:90px;
			top:0;
			background: #fff;
			width: 180px;
			height:90px;
			color:#000;
			text-indent:0;
			text-transform: uppercase;
			text-align:center;
			font-size:14px;
			line-height:90px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			-webkit-transition:  all 0.3s ease-out; 
			-moz-transition:  all 0.3s ease-out; 
			transition:  all 0.3s ease-out; 				
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;	
			z-index:5;			
					
		}
		
		
		/* previous button */		
		.flex-prev {
			-webkit-perspective-origin: 100% 50%;
			perspective-origin: 100% 50%;
			-webkit-perspective: 1000px;
			perspective: 1000px;					
		}
		
		.flex-prev .preview,
		.flex-prev .preview .alt {
			-webkit-transform: rotateY(90deg);
			transform: rotateY(90deg);
			-webkit-transform-origin: 0% 50%;
			transform-origin: 0% 50%;
		}
		

		/* next button */
		.flex-next {
			-webkit-perspective-origin: 0% 50%;
			perspective-origin: 0% 50%;			
			-webkit-perspective: 1000px;
			perspective: 1000px;
		}
		
		.flex-next .preview,
		.flex-next .preview .alt {
			right:90px;
			left:auto;	
			-webkit-transform: rotateY(-90deg);
			transform: rotateY(-90deg);
			-webkit-transform-origin: 100% 50%;
			transform-origin: 100% 50%;	
		}	
		
		.flex-next .preview img {
			position: absolute;
			left:180px;
			top:0;
			width: 90px;
		}
		
		.flex-next .preview .alt {		
			left:0;
		}
		
		/* hover style */
		.flex-direction-nav a:hover .preview,
		.flex-direction-nav a:hover .preview .alt {
			opacity:1;
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);						
		}

		.flex-direction-nav a:hover .preview .alt {		
			-webkit-transition-delay: 0.3s;
			transition-delay: 0.3s;			
		}
	
	
		/* different hover style for flexslider nav */
		.flex-direction-nav a {
			-webkit-transition:  none; 
			-moz-transition: none; 
			transition:  none;		
		}	
	

	    @media (min-width: 760px) and (max-width: 1223px) {
	        /* general style */
	        .preview {
	            width: 270px;
	            height: 90px;
	            position: absolute;
	            top: 0;
	            left: 70px;
	            z-index: 100;
	            -webkit-transition: all 0.3s ease-out;
	            -moz-transition: all 0.3s ease-out;
	            transition: all 0.3s ease-out;
	            -webkit-backface-visibility: hidden;
	            backface-visibility: hidden;
	            -webkit-perspective-origin: 100% 50%;
	            perspective-origin: 100% 50%;
	            -webkit-perspective: 1000px;
	            perspective: 1000px;
	        }

	            .preview img {
	                position: absolute;
	                left: 0;
	                top: 0;
	                width: 70px;
	                z-index: 10;
	            }

	            .preview .alt {
	                position: absolute;
	                left: 70px;
	                top: 0;
	                background: #fff;
	                width: 140px;
	                height: 70px;
	                color: #000;
	                text-indent: 0;
	                text-transform: uppercase;
	                text-align: center;
	                font-size: 11px;
	                line-height: 72px;
	                -webkit-box-sizing: border-box;
	                -moz-box-sizing: border-box;
	                -o-box-sizing: border-box;
	                -webkit-transition: all 0.3s ease-out;
	                -moz-transition: all 0.3s ease-out;
	                transition: all 0.3s ease-out;
	                -webkit-backface-visibility: hidden;
	                backface-visibility: hidden;
	                z-index: 5;
	            }


	        /* previous button */
	        .flex-prev {
	            -webkit-perspective-origin: 100% 50%;
	            perspective-origin: 100% 50%;
	            -webkit-perspective: 1000px;
	            perspective: 1000px;
	        }

	            .flex-prev .preview,
	            .flex-prev .preview .alt {
	                -webkit-transform: rotateY(90deg);
	                transform: rotateY(90deg);
	                -webkit-transform-origin: 0% 50%;
	                transform-origin: 0% 50%;
	            }


	        /* next button */
	        .flex-next {
	            -webkit-perspective-origin: 0% 50%;
	            perspective-origin: 0% 50%;
	            -webkit-perspective: 1000px;
	            perspective: 1000px;
	        }

	            .flex-next .preview,
	            .flex-next .preview .alt {
	                right: 0px;
	                left: auto;
	                -webkit-transform: rotateY(-90deg);
	                transform: rotateY(-90deg);
	                -webkit-transform-origin: 100% 50%;
	                transform-origin: 100% 50%;
	            }

	                .flex-next .preview img {
	                    position: absolute;
	                    left: 130px;
	                    top: 0;
	                    width: 70px;
	                }

	                .flex-next .preview .alt {
	                    left: 0;
	                }

	        /* hover style */
	        .flex-direction-nav a:hover .preview,
	        .flex-direction-nav a:hover .preview .alt {
	            opacity: 1;
	            -webkit-transform: rotateY(0deg);
	            transform: rotateY(0deg);
	        }

	            .flex-direction-nav a:hover .preview .alt {
	                -webkit-transition-delay: 0.3s;
	                transition-delay: 0.3s;
	            }


	        /* different hover style for flexslider nav */
	        .flex-direction-nav a {
	            -webkit-transition: none;
	            -moz-transition: none;
	            transition: none;
	        }
	    }


          @media (max-width: 759px) {
           
             
        }