.one-by-one-banner{
	z-index : 20;
	position: absolute;
	overflow: hidden;
}        

.one-by-one-banner .oneByOne_item{
	position: absolute;
	width   : 100%;
	height  : 270px;
}        

.one-by-one-banner{
	width: 100%;
	height: 100%;
}
.oneByOne2{
	width: 100%;
	overflow: hidden;
}



/* slide 1 */ 
.one-by-one-banner .oneByOne_item .text1{      
	
	position: relative;
	float: left;
	margin: 40px 12px 0 48px;
	color: #FFFFFF;	
	font-size: 24px;  
	background: #9ACD32;
	padding: 8px;
}

.one-by-one-banner .oneByOne_item .text2{  
	clear: left;
	position: relative;
	float: left;
	margin: 4px 12px 0 48px;
	color: #EFEFEF;    
	background: #808000;
	padding: 8px;
	font-size: 12px;
} 
                                
.one-by-one-slider{
	position: relative;
	height: 270px;
}

.one-by-one-banner img.img1{
	position: absolute;
	top: 0;
	left: 0;
}


.one-by-one-slider .buttonArea{
    /*float: left;
    left: 50%;
    z-index:50;
    position: absolute;            
    top: 100%;
    
	margin-top:-32px;	*/
}                     
.one-by-one-slider .buttonCon{
    float: left;
    left: -50%;
    position: relative;        
}
.one-by-one-slider .buttonCon .theButton {
	display: block;
	color: #B22222;
	width: 20px;
	height: 22px;
	background: url(../images/assets/circlebutton.png) no-repeat;
	text-indent: -9999px;
	border: 0;
	margin-right: 3px;
	float: left;
}
.one-by-one-slider .buttonArea a.active {
	background-position: 0 -22px;
}     
      
                      
.one-by-one-banner .oneByOne_item span{
	font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
}                                                                                              

.one-by-one-banner .oneByOne_item a{
	text-decoration: none;
	color: #0066FF;
}


.one-by-one-banner .oneByOne_item img{
	position: absolute;
	top: 0;
	left: 0;
}
.one-by-one-banner .oneByOne_item span.wp1{
  	clear: left;
	position: relative;
	float: left;
	margin: 120px 12px 0 300px; 
	color: #FFFFFF;
	font-size: 20px;
	padding: 8px; 
}         

.one-by-one-banner .oneByOne_item img.wordpress{
	position: absolute;
	top: 8px;
	left: 0;
}        

.one-by-one-banner .oneByOne_item span.wp2{
  	clear: left;
	position: relative;
	float: left;
	margin: 120px 12px 0 0px; 
	color: #333333;
	width: 240px;
	font-size: 12px;
	background: #FFFFFF;
	padding: 8px; 
} 
.one-by-one-banner .oneByOne_item span.wp2 a{
	text-decoration: underline;
}  

.example2 .oneByOne_item .vimeoDemo{
	position: absolute;
	z-index: 200;
	top: 0;
	left: 0;
}



.one-by-one-slider .arrowButton {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	top: 50%;
	height: 0;
	overflow: visible;
}
.one-by-one-slider .arrowButton .prevArrow,
.one-by-one-slider .arrowButton .nextArrow {
	width   : 40px;
	height  : 80px;
	position: absolute;
	top     : 50%;
	margin-top: -40px;
}
.one-by-one-slider .arrowButton .prevArrow{
	left: 12px;
} 
.one-by-one-slider .arrowButton .nextArrow{
	right: 12px;	
} 


/* the css for the animation */

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-ms-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-ms-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}


#main-container .one-by-one-banner .oneByOne_item{
	height: 402px;
}
#main-container .one-by-one-slider{
	height: 402px;
	position: absolute;
	top:42px;
	left:0px;
	width:100%;
    display: block;
    float: left;
}

/******************************************************************************/
.no-bold {
	font-weight: normal !important;
}
/* One by One slides - common stuff ----------------------------------------- */
.one-by-one-slider .slide-1,
.one-by-one-slider .slide-2,
.one-by-one-slider .slide-3 {
	width     : 100%;
	height    : 100%;
	color     : #FFF;
	min-width : 320px;
	padding   : 60px 30px 30px;
	-webkit-box-sizing : border-box;
	-moz-box-sizing    : border-box;
	box-sizing         : border-box;
}

.one-by-one-slider .slide-1 .img-0, 
.one-by-one-slider .slide-2 .img-0, 
.one-by-one-slider .slide-3 .img-0 {/* The background - center and crop */
	position    : absolute;
	top         : 50%;
	left        : 50%;
}

.one-by-one-slider .slide-1 h1,
.one-by-one-slider .slide-2 h1,
.one-by-one-slider .slide-3 h1 {
	font-family: Lato, sans-serif;
	font-size  : 48px;
	font-weight: bold;
	line-height: 1;
	color      : #FFF;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
	position   : relative;
	left       : 50%;
	margin-left: -438px;
	z-index    : 20;
}

.one-by-one-slider .slide-1 h2,
.one-by-one-slider .slide-2 h2,
.one-by-one-slider .slide-3 h2 {
	font-family: Lato, sans-serif;
	font-size  : 30px;
	font-weight: normal;
	line-height: 1;
	color      : #FFF;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
	position   : relative;
	left       : 50%;
	margin-left: -438px;
	z-index    : 19;
}

.one-by-one-slider .slide-1 h3,
.one-by-one-slider .slide-2 h3,
.one-by-one-slider .slide-3 h3 {
	font-family: Verdana, sans-serif;
	font-size  : 18px;
	font-weight: bold;
	line-height: 1;
	margin     : 20px 0;
	position   : relative;
	left       : 50%;
	margin-left: -438px;
	z-index    : 18;
}

.one-by-one-slider .slide-1 .content,
.one-by-one-slider .slide-2 .content,
.one-by-one-slider .slide-3 .content { /* The text */
	padding    : 0;
	font-size  : 14px;
	line-height: 18px;
	text-align : left;
	position   : relative;
	left       : 50%;
	margin-left: -438px;
	z-index    : 17;
}

.one-by-one-slider .slide-1 .btn-wrap,
.one-by-one-slider .slide-2 .btn-wrap,
.one-by-one-slider .slide-3 .btn-wrap {
	position: relative;
	left       : 50%;
	margin-left: -438px;
	z-index    : 16;
}

.one-by-one-slider .slide-1 .button,
.one-by-one-slider .slide-2 .button,
.one-by-one-slider .slide-3 .button {
	border  : 1px solid #666;
    border-color : rgba(0, 0, 0, 0.2);
	background-clip: padding-box;
	color   : #666666;
    margin  : 30px 0;
    padding : 4px 34px;
    width   : auto;
}




/* One by One slides - slide-1 ---------------------------------------------- */
.one-by-one-slider .slide-1 .img-0 { /* The background - center and crop */
	margin-top  : -201px;
	margin-left : -952px;
}

.one-by-one-slider .slide-1 .img-wrap {
	position: absolute;
	top     : 0;
	left    : 50%;
	width   : 50%;
	height  : 100%;
	max-width: 470px;
}

.one-by-one-slider .slide-1 .img-1,
.one-by-one-slider .slide-1 .img-2,
.one-by-one-slider .slide-1 .img-3 { /* Device images */
	top    : 50%;
	left   : 0;
	margin-top: -140px;
	max-width: 100%;
}

/* Texts */
.one-by-one-slider .slide-1 .content,
.one-by-one-slider .slide-1 h1,
.one-by-one-slider .slide-1 h2,
.one-by-one-slider .slide-1 h3,
.one-by-one-slider .slide-1 .btn-wrap {
	display   : block;
	max-width : 45%;
	text-align: left;
}

.one-by-one-slider .slide-1 .content { /* The text */
	width      : 45%;
}
.one-by-one-slider .slide-1 h3 {
	color      : #C7EAFE;
	text-shadow: 0 0 1px rgba(199, 234, 254, 0.5);
}

@media all and (max-width: 680px) {
	
	.one-by-one-slider .slide-1 .img-wrap {
		top   : 50%;
		width : 54%;
		left  : 23%;
		margin: -18% auto;
	}
	
	.one-by-one-slider .slide-1 .img-1,
	.one-by-one-slider .slide-1 .img-2,
	.one-by-one-slider .slide-1 .img-3 {
		height : auto;
		width  : 100%;
		top: 0;
		margin: 0 auto;
	}
}

@media all and (max-width: 680px) and (-webkit-min-device-pixel-ratio:1) {
	.one-by-one-slider .slide-1 .img-wrap {
		margin: -26% auto;
	}
}


/* -------------------------------------------------------------------------- */
/* One by One slides - slide-2                                                */
/* -------------------------------------------------------------------------- */
.one-by-one-slider .slide-2 .img-0 { /* The background - center and crop */
	margin-top  : -201px;
	margin-left : -952px;
}

.one-by-one-slider .slide-2 .img-wrap {
	position: absolute;
	top     : 0;
	left    : 50%;
	width   : 46%;
	height  : 100%;
	max-width: 470px;
}

.one-by-one-slider .slide-2 .img-wrap img {
	top    : 5%;
	left   : 0;
	margin : 0;
	max-width: 100%;
	max-height: 90%;
}

.one-by-one-slider .slide-2 h1 {
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 6;
}

.one-by-one-slider .slide-2 h3 {
	color      : rgb(244, 255, 159);
	text-shadow: 0 0 1px rgba(244, 255, 159, 0.5);
}

.one-by-one-slider .slide-2 .content { /* The text */
	width      : 45%;
}

@media all and (max-width: 680px) {
	.one-by-one-slider .slide-2 .img-wrap {
		position : static;
		margin: 0 auto;
		width    : auto;
	}
	.one-by-one-slider .slide-2 .img-wrap img {
		position : static;
		margin   : 0 auto;
		width    : auto;
		height   : 67%;
	}
}

/* -------------------------------------------------------------------------- */
/* One by One slides - slide-3                                                */
/* -------------------------------------------------------------------------- */
.one-by-one-slider .slide-3 .img-0 { /* The background - center and crop */
	margin-top  : -201px;
	margin-left : -952px;
}

.one-by-one-slider .slide-3 .img-wrap {
	position   : relative;
	top        : 0;
	height     : 0;
	overflow   : visible;
	text-align : right;
	width      : 100%;
	max-width  : 940px;
	margin     : 0 auto;
}
.one-by-one-slider .slide-3 .img-wrap .img-1,
.one-by-one-slider .slide-3 .img-wrap .img-2,
.one-by-one-slider .slide-3 .img-wrap .img-3,
.one-by-one-slider .slide-3 .img-wrap .img-4 {
	margin    : -10px 0 0;
	left      : 17%;
	width     : 86%;
	max-width : 782px;
}

.one-by-one-slider .slide-3 h1,
.one-by-one-slider .slide-3 h2,
.one-by-one-slider .slide-3 h3 {
	width: 50%;
}
.one-by-one-slider .slide-3 h3 {
	color      : #C7EAFE;
	text-shadow: 0 0 1px rgba(199, 234, 254, 0.5);
}

/*
@media all and (max-width: 1200px) {
	.one-by-one-slider .slide-3 .img-wrap img {
		-moz-transform: scale(0.9);
	}
}
@media all and (max-width: 1000px) {
	.one-by-one-slider .slide-3 .img-wrap img {
		-moz-transform: scale(0.8);
	}
}
*/
@media all and (max-width: 800px) {
	.one-by-one-slider .slide-3 .btn-wrap {
		margin   : 50px auto 0;
	}
}
@media all and (max-width: 680px) {
	.one-by-one-slider .slide-3 .img-wrap {
		position   : absolute;
		top        : auto;
		bottom     : 25%;
		height     : 46%;
		left       : 0;
		right      : 0;
		max-width  : none;
		margin-left: 0;
	}
	.one-by-one-slider .slide-3 .img-wrap .img-1,
	.one-by-one-slider .slide-3 .img-wrap .img-2,
	.one-by-one-slider .slide-3 .img-wrap .img-3,
	.one-by-one-slider .slide-3 .img-wrap .img-4 {
		margin    : 0;
		left      : 5%;
		width     : 76%;
		max-width : 76%;
	}
}
/*
@media all and (min-width: 1200px) {
	.one-by-one-slider .slide-3 .img-wrap {
		text-align: center;
	}
}

@media all and (min-width: 1020px) {
	.one-by-one-slider .slide-3 .img-wrap {
		left      : 25%;
		right     : 10%;
	}
}

@media all and (min-width: 800px) and (max-width: 1019px) {
	.one-by-one-slider .slide-3 .img-wrap {
		left      : 11%;
		right     : 1%;
	}
}*/

/* One by One slides - common stuff override -------------------------------- */
@media all and (max-width: 1020px) {
	.one-by-one-slider .slide-1 .content,
	.one-by-one-slider .slide-1 h1,
	.one-by-one-slider .slide-1 h2,
	.one-by-one-slider .slide-1 h3,
	.one-by-one-slider .slide-1 .btn-wrap,

	.one-by-one-slider .slide-2 .content,
	.one-by-one-slider .slide-2 h1,
	.one-by-one-slider .slide-2 h2,
	.one-by-one-slider .slide-2 h3,
	.one-by-one-slider .slide-2 .btn-wrap,

	.one-by-one-slider .slide-3 .content,
	.one-by-one-slider .slide-3 h1,
	.one-by-one-slider .slide-3 h2,
	.one-by-one-slider .slide-3 h3,
	.one-by-one-slider .slide-3 .btn-wrap {
		margin-left : 0;
		left        : 0;
	}
}

@media all and (max-width: 800px) {
	.one-by-one-slider .slide-1 .hide-on-mediumscreen,
	.one-by-one-slider .slide-2 .hide-on-mediumscreen,
	.one-by-one-slider .slide-3 .hide-on-mediumscreen {
		display: none !important;
	}
}

@media all and (max-width: 680px) {
	
	.one-by-one-slider .slide-1,
	.one-by-one-slider .slide-2,
	.one-by-one-slider .slide-3	{
		text-align: center;
		padding   : 20px;
	}
	
	.one-by-one-slider .slide-1 .hide-on-smallscreen,
	.one-by-one-slider .slide-2 .hide-on-smallscreen,
	.one-by-one-slider .slide-3 .hide-on-smallscreen,
	.one-by-one-slider .slide-1 .hide-on-mediumscreen,
	.one-by-one-slider .slide-2 .hide-on-mediumscreen,
	.one-by-one-slider .slide-3 .hide-on-mediumscreen {
		display: none !important;
	}
	
	.one-by-one-slider .slide-1 .btn-wrap,
	.one-by-one-slider .slide-2 .btn-wrap,
	.one-by-one-slider .slide-3 .btn-wrap {
		position : absolute;
		margin   : 0 auto;
		bottom   : 15px;
		top      : auto;
		display  : block !important;
		left     : 0;
		right    : 0;
		z-index  : 5;
	}
	
	.one-by-one-slider .slide-1 .content,
	.one-by-one-slider .slide-1 h1,
	.one-by-one-slider .slide-1 h2,
	.one-by-one-slider .slide-1 h3,
	.one-by-one-slider .slide-1 .btn-wrap,

	.one-by-one-slider .slide-2 .content,
	.one-by-one-slider .slide-2 h1,
	.one-by-one-slider .slide-2 h2,
	.one-by-one-slider .slide-2 h3,
	.one-by-one-slider .slide-2 .btn-wrap,

	.one-by-one-slider .slide-3 .content,
	.one-by-one-slider .slide-3 h1,
	.one-by-one-slider .slide-3 h2,
	.one-by-one-slider .slide-3 h3,
	.one-by-one-slider .slide-3 .btn-wrap {
		display   : block;
		max-width : none;
		text-align: center;
		margin    : 0 auto;
		width     : auto;
		left      : 0;
	}
}

@media all and (min-width: 1201px) {
	.one-by-one-slider .slide-1 .content,
	.one-by-one-slider .slide-1 h1,
	.one-by-one-slider .slide-1 h2,
	.one-by-one-slider .slide-1 h3,
	.one-by-one-slider .slide-1 .btn-wrap,

	.one-by-one-slider .slide-2 .content,
	.one-by-one-slider .slide-2 h1,
	.one-by-one-slider .slide-2 h2,
	.one-by-one-slider .slide-2 h3,
	.one-by-one-slider .slide-2 .btn-wrap,

	.one-by-one-slider .slide-3 .content,
	.one-by-one-slider .slide-3 h1,
	.one-by-one-slider .slide-3 h2,
	.one-by-one-slider .slide-3 h3,
	.one-by-one-slider .slide-3 .btn-wrap {
		margin-left: -468px !important;
	}
	.one-by-one-slider .img-wrap img {
		margin-right: 0 !important;
	}
}
/******************************************************************************/