/**
* PROMOS
* ----------------------------------------------
*
*   Date: 2014-06-26
*
* Author: Hillsong Digital Team
*
*  Notes: Promotional Items
*
*/

/*
//====================================================================
//
// DEFAULTS :: MOBILE / SMALL SCREEN (0px - 480px)
//
//====================================================================
*/

 /*
 //----------------------------------
 // Promo Slide In From Left
 //----------------------------------
 */

@-moz-keyframes promoslideinfromleft {
  from { opacity: 0; margin-left: -100px; }
  to   { opacity: 1; margin-left: 0px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes promoslideinfromleft {
  from { opacity: 0; margin-left: -100px; }
  to   { opacity: 1; margin-left: 0px; }
}

@-ms-keyframes promoslideinfromleft {
  from { opacity: 0; margin-left: -100px; }
  to   { opacity: 1; margin-left: 0px; }
}

@-o-keyframes promoslideinfromleft {
  from { opacity: 0; margin-left: -100px; }
  to   { opacity: 1; margin-left: 0px; }
}

@keyframes promoslideinfromleft {
  from { opacity: 0; margin-left: -100px; }
  to   { opacity: 1; margin-left: 0px; }
}

.promotions,
.headerwithslideshow .promotions .slideshowControlDotsWrap {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
	z-index: 0;
    background: rgba(0, 0, 0, 0.75);
}

.animated-promos {

	-webkit-animation: promoslideinfromleft 0.4s ease-out;
  	-moz-animation: promoslideinfromleft 0.4s ease-out;
  	-ms-animation: promoslideinfromleft 0.4s ease-out;
  	-o-animation: promoslideinfromleft 0.4s ease-out;
  	animation: promoslideinfromleft 0.4s ease-out;

}

.promotions-wrap { float: left; width: 100%; height: 100px; margin: 0;overflow: hidden; padding-top: 10px; text-align: left;}

.promotions-slider { display: inline-block; z-index: 1; }

.ie8 .promotions-slider { width: 276px !important; }
.ie8 .promotions-slider > div { width: 100%; }
.ie8 .promotions-detail  { width: 170px !important; }

.promotion-item-content { height: 100%; }
.promotions-wrap a { text-decoration: none; }

.promotions-img{ float: left; display: inline; width: 50px; height: 50px; margin-top: -10px;}
.promotions-detail {float: left; display: inline; height: 35px; }

.promotions-img img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.promotions-detail {
	padding: 3px 5px;
}

.promotions-wrap a:hover .promotions-detail { }

.promotions-detail p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 250px;
}

.promotions-title { font-size: 13px; line-height: 15px; color: #fff; }

.promotions-content { line-height: 15px; color: #aa9055; display: block;}

.promotions .slideshowControlDotsWrap { display: block; bottom: 5%; position: absolute; }
.promotions .slideshowControlDotsWrap .slideshow-dots { color: #fff;  }

.promotions .slideshow-dots span:only-child { display: none; }
.promotion-close-btn {
    color: #aa9055;
    right: 20px;
    bottom: 10px;
    cursor: pointer;
    padding: 20px 10px;
    margin: 3px 15px;
    display: block;
    right: 0;
    position: absolute;
    bottom: 25%;
    width: 16px;
    height: 16px;
    z-index: 5;
}

.promotions span.close {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: transparent;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.promotions span.close:before {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}
.promotions span.close:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}
.promotions span.close:before,
.promotions span.close:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #aa9055;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
/*
//-----------------------
// Header Offsets
//-----------------------
*/

/*.promotions + .headertwo .logo { margin-top: 50px; }*/

/*
//-----------------------
// Lightbox
//-----------------------
*/

/*.inalightbox .promotions { display: none; }*/




/*
//====================================================================
//
// TABLET (Bigger than 767px )
//
//====================================================================
*/
@media only screen and (min-width: 767px) {


	.promotions-wrap { padding-left: 3px; padding-top: 15px; float: none;}
	.promotions-wrap div[data-carousel-item="true"] { visibility: hidden; }
    .promotions-wrap div[data-carousel-item="true"]:first-child { visibility: visible; }

	.promotions-img{ width: 70px; height: 70px; margin-top: 0;}
	.promotions-detail {
		padding: 0 10px;
		height: 70px;
		display: table;
	}
	.promotions-detail p {
		vertical-align: middle;
		display: table-cell;
        width: auto;
	}

	.promotions-title { font-size: 18px; line-height: 20px; }

	.promotions-content { line-height: 20px; display: inline-block;}

	.promotions-wrap .paging-position-wrap { display: block; }
	/*
	//------------------------
	// Has Sub Nav
	//------------------------
	*/

	.hasSubNav .promotions { top: 47px;  }

	/*.promotions + .headertwo .logo { margin-top: 60px; }*/

}

/*
//====================================================================
//
// DEFAULT (Bigger than 979px )
//
//====================================================================
*/
@media only screen and (min-width: 979px) {

	/*.promotions + .headertwo .logo { margin-top: 100px; }*/

}

/*
//====================================================================
//
// MOBILE ONLY OVERRIDE
//
//====================================================================
*/
@media only screen and (max-width: 767px) {

	/*.promotions + .headertwo .logo { margin-top: 100px; }*/
	.promotions + .headertwo .logo { margin-top: 50px; }
}