/* This file will hold styles that are loaded using the same media query as the narrow, normal and wide grid. */


/********* HOME PAGE DEFAULT **********/



/*-------------------------------------------------------------------

 Only add to this stylesheet if 
 home page items need to be styled differently than 
 in [site-name]-alpha-default.css
 
 
 
 > > > > > Every selector in this sheet should begin with .front class
 
--------------------------------------------------------------------*/





/*--------------------------------------------------------
----------------------------------------------------------

 LAYOUT - home page only 
 
----------------------------------------------------------
---------------------------------------------------------*/


body.front {
	background: #939391 url(../../images/aloe-blacc-name-repeat.png) no-repeat fixed center 100px;
	background-size: 100% auto;
}

.front #section-header {
	height: auto;
	padding: 0;
	margin: 0;
	min-height: 100px;
}

.front #section-content .zone-custom-wrapper {
	border-bottom: 0;
	margin-bottom: 0px;
	position: relative;
}

/* negate default grid */
.front #page .zone.container-12,
.front #page .zone .grid-12 {
	width: 100%;
}

/*------------------ Shared styles ----------------*/

/* Block Titles */
.front .zone-custom-wrapper h2.block-title {
	font-size: 40px;
	font-weight: 400;
	color: #fff;
	letter-spacing: 2px;
	padding: 20px 30px;
	border: 1px solid #888;
	border-color: rgba(136,136,136,0.6);
	margin: 0;
	text-align: center;
	display: inline-block;
}

/* more link */
.front .more-link {
	overflow: hidden; /* clear float */
}
.front .more-link a {
	color: #fff;
	padding: 15px 30px;
	border: 1px solid #888;
	border-color: rgba(136,136,136,0.6);
	display: block;
	text-align: center;
	float: left;
	background-color: rgba(15, 18, 49, 0.6);
}
.front .more-link a:hover {
	background-color: rgba(238,73,73,0.6);
	color: #fff;
}



/*--------------------------------------------------------
----------------------------------------------------------

 MESSAGES - home page only 
 
----------------------------------------------------------
---------------------------------------------------------*/

.front #zone-content-wrapper  {
	top: 200px;
	position: fixed;
	z-index: 10;
	width: 100%;
	max-height: 80%;
	overflow: hidden;
}
.front #zone-content-wrapper #zone-content {
	background: transparent;
	width: 80%;
	margin: 0 auto;
}
.front .messages {
	 margin: 0;
}



/*--------------------------------------------------------
----------------------------------------------------------

 PROMOTIONS BLOCK (TOP) - CUSTOM ZONE 1
 
----------------------------------------------------------
---------------------------------------------------------*/


.front #section-content #zone-custom1-wrapper {
	padding: 0;
	width: 99vw;
	height: 90vh;
}
.front #zone-custom1,
.front #region-custom-1 {
	height: 100%;
}
.front #zone-custom1-wrapper .zone {
	padding-top: 80px;
}

.front .block-views-banner-banner-promotion {
	width: 550px;
	height: 550px;
	position: absolute;
	left: 55%;
	top: 100px;
}
.front .block-views-banner-banner-promotion .block-inner {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	border-radius: 50%;
	text-align: center;
	padding: 8% 15%;
}

/*-------------- Banner text ------------*/
.front .tagline-1 {
	font-size: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #888;
	font-family: Aleo, Georgia, serif;
	font-weight: 100;
	color: #fff;
	font-style: italic;
	margin-bottom: 10px;
}
.front .tagline-2 {
	font-size: 40px;
	margin-bottom: 5px;
	font-family: Aleo, Georgia, serif;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* hide block title */
.front .block-views-banner-banner-promotion h3 {
	display: none;
}

/*----------- Banner Image -----------*/
.front .block-views-banner-banner-promotion .views-field-field-images-1 {
	width: 250px;
	height: auto;
	margin: 0 auto 10px;
}


/*------------- Link ----------*/
.front .block-views-banner-banner-promotion .views-field-field-links-1:before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #888;
	position: relative;
	top: 18px;
	display: block;
	width: 90%;
	margin: 0 auto;
	z-index: 0;
}
.front .block-views-banner-banner-promotion .views-field-field-links-1 a {
	width: 80%;
	padding: 10px 15px;
	background: #ee4949;
	color: rgba(255,255,255,0.5);
	font-size: 25px;
	z-index: 5;
	border-radius: 4px;
	position: relative;
}
.front .block-views-banner-banner-promotion .views-field-field-links-1 a:hover {
	background-color: #000;
	color: #fff;
	text-decoration: none;
}

/*-----------------------------
 Artist cutout image
-------------------------------*/

.front .artist-cutout-container {
	position: absolute;
	width: 100%;
}
.front .aloe-cutout-img {
	position: relative;
	left: 5%;
	width: 48%;
	display: block;
}

/* Scroll down link */

.front #zone-custom1 .slide-next {
    display: block;
}
.front #zone-custom1 .slide-next {
    bottom: 15%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    z-index: 10;
}
.front .slide-button a {
    display: block;
    position: relative;
    width: 85px;
    height: 85px;
    padding: 28px 10px 0;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-family: Aleo, Georgia, serif;
    font-weight: 100;
    text-align: center;
    color: #FFF;
    transition: all 0.2s ease-in 0s;
    border: 1px solid #fff;
}
.front .slide-button a:hover {
	text-decoration: none;
	background-color: rgba(0,0,0,0.5);
}
.front #zone-custom1 .slide-button a:after {
    font-family: IcoMoonArrows;
    font-size: 20px;
    line-height: 1;
    display: block;
}
.front #zone-custom1 .slide-button a:after {
	 content: "\31";
}

/*--------------------------------------------------------
----------------------------------------------------------

 FEATURE BANNER SLIDESHOW - CUSTOM ZONE 2
 
----------------------------------------------------------
---------------------------------------------------------*/

/* keeps banners from showing up under nav when "scroll" link is used */
.front #zone-custom2-wrapper {
	padding-top: 100px;
}

/*-----------------------------------------

 show/hide mobile or desktop slideshow 
 
-----------------------------------------*/

.front #block-views-banner-feature {
	display: block;
}
.front #block-views-banner-mobile-featured {
	display: none;
}


/*---------------------------------------

 Banner Content
 
---------------------------------------*/

/*------------------------
 text wrapper 
-------------------------*/
.front #views_slideshow_cycle_main_banner-feature #feature-content {
	background-color: rgba(0,0,0,0.8);
	width: 30%;
	height: 100%;
	position: absolute;
	bottom: -1px;
	right: 80px;
	z-index: 2;
	padding: 0px;
}

/*-------------------
 title 
-------------------*/
.front #views_slideshow_cycle_main_banner-feature #feature-content h3 {
	color: #fff;
	margin: 10% 10% 5%;
	font-size: 1.875rem;
	font-size: 2.5vw;
	line-height: 1.3;
}

/*-------------------
 body text 
-------------------*/
.front #views_slideshow_cycle_main_banner-feature .views-field-body {
	color: #999;
	margin: 0 10%;
	font-size: 1em;
	font-size: 1.5vw;
}

/*-------------------
 More link 
-------------------*/
.front #views_slideshow_cycle_main_banner-feature .views-field-field-links-1 {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.front #views_slideshow_cycle_main_banner-feature .views-field-field-links-1 a {
	display: block;
	padding: 20px;
	text-decoration: none;
	background-color: #ee4949;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.250rem;
}
.front #views_slideshow_cycle_main_banner-feature .views-field-field-links-1 a:hover {
	background-color: #fff;
	color: #222;
}
.front #views_slideshow_cycle_main_banner-feature .views-field-field-links-1 a:after {
	content: "\33";
	font-family: IcoMoonArrows;
	font-size: 17px;
	line-height: 17px;
	margin-left: 10px;
	vertical-align: middle;
}

/*--------------------------------

 slideshow controls - NEXT & PREV
 
---------------------------------*/


/*---------- previous ---------*/

.front #views_slideshow_controls_text_previous_banner-feature {
	display: block;
	width: 75px;
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
}
.front #views_slideshow_controls_text_previous_banner-feature a,
.front #views_slideshow_controls_text_next_banner-feature a {
	display: block;
	height: 0;
	padding-top: 75px;
	width: 75px;
	overflow: hidden;
	position: relative;
	border-radius: 40px;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	opacity: .5;
}
.front #views_slideshow_controls_text_previous_banner-feature a:hover,
.front #views_slideshow_controls_text_next_banner-feature a:hover {
	opacity: 1;
}

/* prev icon */
.front #views_slideshow_controls_text_previous_banner-feature a:before {
	content: "\32";
	font-size: 40px;
	position: absolute;
	top: 17px;
	right: 20px;
	font-family: "IcoMoonArrows";
}

/*----------- next -------------*/

.front #views_slideshow_controls_text_next_banner-feature {
	display: block;
	width: 75px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
}

/* next icon */
.front #views_slideshow_controls_text_next_banner-feature a:before {
	content: "\33";
	font-size: 40px;
	position: absolute;
	top: 17px;
	left: 20px;
	font-family: "IcoMoonArrows";
}

/* pause */
.front #views_slideshow_controls_text_pause_banner-feature a {
	display: none;
}


/*--------------------------------------------------------
----------------------------------------------------------

 EVENTS - HOME PAGE ONLY - CUSTOM ZONE 3
 
----------------------------------------------------------
---------------------------------------------------------*/

.front #block-views-events-upcoming {
	width: 45%;
	float: right;
}
.front #zone-custom3-wrapper {
	background-image: url(../../images/bg-dots-black30.png), url(../../images/bg-home-tour-big.jpg);
	background-position: left top, center top;
	background-size: auto auto, 100% auto;
	background-attachment: fixed, scroll;
	background-color: #0f1931;
	background-repeat: repeat, no-repeat;
}
.front #zone-custom3 {
	padding: 150px 4% 150px;
	background: transparent url(../../images/bg-repeating-horiz-line-888.png) repeat-x scroll left 198px;
}

.front .block-events-upcoming .view-content {
	padding: 3% 0;
	background-position: 46px top;
	background-image: url(../../images/bg-vertical-line-home.png);
}

/* Events list items */
.front .block-events-upcoming .teaser-list-row {
	border: 0;
	padding: 10px 0;
}

.front .dateblock {
	background-color: #0F1931;
}

/* Block title */
.front .zone-custom3-wrapper h2.block-title {
	background-color: #0F1931;
}

/* Location */
.front .block-events-upcoming .titles-container h3 {
	font-size: 30px;
	margin: 15px 0 0 0;
	color: #fff;
}
.front .block-events-upcoming .titles-container h4 {
	font-size: 20px;
}
.front .block-events-upcoming .titles-container h4 a:hover {
	color: #888;
}

/* More Link */


/*--------------------------------------------------------
----------------------------------------------------------

 STORE BLOCK - HOME PAGE ONLY - CUSTOM ZONE 4
 
----------------------------------------------------------
---------------------------------------------------------*/

.front #zone-custom4-wrapper {
	background: #d7d7d7 url(../../images/bg-repeating-diag-lines-white.png) repeat scroll left top;
}

/* background horiz line behind h2 */
.front #zone-custom4 {
	padding: 70px 0 70px 4%;
	background: transparent url(../../images/bg-repeating-horiz-line.jpg) repeat-x scroll left 118px;
}

/* Block Title */
.front #zone-custom4-wrapper h2.block-title {
	color: #333;
	padding: 20px;
	border: 1px solid #333;
	display: inline-block;
	background: #d7d7d7 url(../../images/bg-repeating-diag-lines-white.png) repeat scroll left top;
}

/* Layout */
.front #block-views-featured-product-carousel-block {
	width: 100%;
	margin: 0 auto;
}

/* Carousel Item */
.front .jcarousel-skin-updates_carousel .jcarousel-item {
	width: 300px;
	height: 300px;
	margin: 0 20px 0 0;
}


/*----------------------------------

 Carousel Navigation
 
-----------------------------------*/

.front .jcarousel-skin-updates_carousel .jcarousel-next,
.front .jcarousel-skin-updates_carousel .jcarousel-prev {
	padding: 35px;
}
.front .jcarousel-skin-updates_carousel .jcarousel-next-horizontal {
	right: 30px;
}
.front .jcarousel-skin-updates_carousel .jcarousel-prev-horizontal {
	left: -30px;
}
.front .jcarousel-skin-updates_carousel .jcarousel-container-horizontal {
	height: auto;
	margin: auto;
	width: auto;
}

/* icons */
.front .jcarousel-skin-updates_carousel .jcarousel-next:before,
.front .jcarousel-skin-updates_carousel .jcarousel-prev:before {
	left: 17px;
	top: 19px;
}
.front .jcarousel-skin-updates_carousel .jcarousel-next:before {
	content: "\33";
	left: 21px;
}


/*--------------------------------------------------------
----------------------------------------------------------

 COMMUNITY BLOCK - HOME PAGE ONLY - CUSTOM ZONE 5
 
----------------------------------------------------------
---------------------------------------------------------*/

.front .zone-custom5-wrapper {
	background-image: url(../../images/bg-dots-black30.png), url(../../images/bg-aloe-live-stadium.jpg);
	background-position: left top, center top;
	background-size: auto auto, 100% auto;
	background-attachment: fixed, scroll;
	background-color: #121437;
	background-repeat: repeat, no-repeat;
}

/* background horiz line behind h2 */
.front #zone-custom5 {
	padding: 150px 4% 150px;
	background: transparent url(../../images/bg-repeating-horiz-line-888.png) repeat-x scroll left 198px;
}
.front .region-custom-5-inner {
	width: 50%;
}

/* Block title */
.front .zone-custom5-wrapper h2.block-title {
	background-color: #121437;
}

.front .zone-custom5-wrapper .view-content {
	background: url('../../images/bg-vertical-line-home.png') repeat-y scroll 25px top transparent;
	padding: 4% 0;
}

/* POSTS */
.front .node-post {
	padding: 20px 20px 20px 40px;
	background-color: rgba(15, 18, 49, 0.6);
	margin-bottom: 30px;
	margin-left: 26px;
	border: 0;
}
.front .post-body .post-update .field-name-body p {
	font-size: 16px;
	line-height: 25px;
	color: #888;
}
.front .community-user-full-name .field-items {
	font-size: 20px;
	padding: 0.7% 0;
	font-weight: 700;
}

/* profile image */
.front .community-user-profile-image {
	border: 1px solid #888;
	border-color: rgba(136,136,136,0.6);
	margin-left: -65px;
	background-color: #000;
}

/* user name */
.front .community-user-full-name {
	font-size: 27px;
	line-height: 28px;
}
.front .community-user-full-name a:hover {
	color: #fff;
}
/* post date */
.front .community-post-created-date {
	color: #888;
}
.front .community-post-stats-wrapper .stat-post-type {
	border: 1px solid #888;
	border-color: rgba(136,136,136,0.6);
	border-radius: 5px;
}
.front .community-post-stats-wrapper .stats-item {
	text-transform:capitalize;
	font-size: 13px;
}
.front .community-post-stats-wrapper .stat-comment-count:before, 
.front .community-post-stats-wrapper .stat-like-count:before {
	color: #bbb;
	text-transform:none;
}
.front .community-post-media-wrapper {
	border-bottom: 1px solid #888;
	border-top:1px solid #888;
	border-color: rgba(136,136,136,0.3);
}
/* View button */
.front .community-post-media-wrapper .post-view a {
	background-color: transparent;
	border: 1px solid #888;
	border-color: rgba(136,136,136,0.6);
}
.front .community-post-media-wrapper .post-view a:hover {
	background-color: rgba(238,73,73,0.6);
}

/* positioning - negate default margin */
.front .community-user-full-name, 
.front .community-post-created-date, 
.front .community-post-media-wrapper, 
.front .view-content ul.post-groups-wrapper, 
.front .community-feed-row .user-accounts-share-links-container, 
.front .community-post-stats-wrapper {
	margin-left: 0;
}

/* back to top button */
.front #zone-custom5 .slide-next {
	margin-top: 50px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	bottom: -50px;
}
.front #zone-custom5 .slide-button a {
	padding-top: 20px;
}
.front #zone-custom5 .slide-button a:before {
	content: "\30";
	font-family: IcoMoonArrows;
	font-size: 20px;
	line-height: 1;
	display: block;
}




/* -------------------------------------------------
 iPad media queries - overrides
---------------------------------------------------*/

/* non retina ipad 1 & 2 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
	/* make bg images not fixed */
	.front #zone-custom3-wrapper,
	.front .zone-custom5-wrapper {
		background-attachment: scroll, scroll;
	}
}

/* retina iPad */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 
	/* make bg images not fixed */
	.front #zone-custom3-wrapper,
	.front .zone-custom5-wrapper {
		background-attachment: scroll, scroll;
	}
	
}