/*
Theme Name: Allee Willis - Home page 
Author: AP
*/

/* #Misc
/***********************************************************/
body { padding-top: 0; font-size: 16px; line-height: 23px; color: #000; font-family: Arial, sans-serif; background: #ea9dc7 url(images/Artboard-8.jpg) no-repeat top center; background-size:cover;}
iframe, object, embed{ max-width:100%; }
sup{ vertical-align: super; font-size: smaller; }
sub{ vertical-align: sub; font-size: smaller; }
code{ font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace; }
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:before, .clearfix:after {
	display: table;
    content: " ";	
}
.clearfix:after, .clearfix, .clearfix:before {
	clear: both;
}


/* #Images
/***********************************************************/
img, a img { border:none; padding: 0; margin:0; display:inline-block; max-width: 100%; height:auto; width:auto; image-rendering: optimizeQuality; }

/* #Links
/***********************************************************/
	a { text-decoration: none; outline: 0; max-width:100%; max-width:none\9; }
	a:hover, a:focus, a:visited { outline: 0; text-decoration: none;}
	p a, p a:visited { line-height: inherit; }
	a img { border: 0}
	
/***********************************************************/
/***** HEADINGS / Typography  ******************************/
/***********************************************************/

h1,h2,h3,h4,h5 { margin-top: 0; }
	h1 { font-size: 26px; line-height: 1.1em; margin-bottom: 14px; }
	h2 { font-size: 26px; line-height: 1.1em; margin-bottom: 10px; }
	h3 { font-size: 20px; line-height: 1.1em; margin-bottom: 8px; } 
	h4 { font-size: 18px; line-height: 1.1em; margin-bottom: 4px; } 
	h5 { font-size: 16px; line-height: 1.1em; }						
	h6 { font-size: 14px; line-height: 1.1em; }
	
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6{ margin-top:1.4em; }
p { margin: 1em 0; }
p img { margin: 0; }
em, i { font-style: italic; }
strong, b{ font-weight: bold;  }
small { font-size: 80%; }
blockquote{ border-left-style:solid; border-left-width:7px; padding-left:20px; margin-bottom:1em; margin-right:1em; font-size: 16px; line-height: 1.5em; }
blockquote small, blockquote cite, blockquote small a, blockquote cite a, blockquote a small, blockquote a cite{font-size: 12px;}

#playlist li:hover .hover1 {
	-webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
	-ms-transition: all .6s ease;
	-o-transition: all .6s ease;
	transition: all .6s ease;
}

.text-center {text-align: center;}
.alignnone {float: none; margin: 1%;}
.col {
	position: relative;
    min-height: 1px;
	float: left;
}
.col-sm-1 {width: 10%}
.col-sm-2 {width: 19.333%}
.col-sm-3 {width: 30%;}
.col-sm-3-3 {width: 33.3334%;}
.col-sm-4 {width: 40%}
.col-sm-6 {width: 50%;}

img {max-width: 100%;}

/* #Custom
/***********************************************************/
#main {position: relative;}
#wrapper {max-width: 960px; margin: 0 auto;}
#row4 {margin-top: 0; margin-bottom: 30px}
#row4 img {margin-top: 5px;}
.attribution {font-size: 12px;}
.mobile {display: none;}

/** Playlist **/
#playlist {padding: 0; margin: 0; text-align: center;}
#playlist li {list-style: none; text-align: center; width: 10%; float: left; padding: 0}
#playlist li .hover1 {visibility: hidden; top: -15px; position: relative;}
#playlist li:hover .hover1 {visibility: visible;}
#playlist li:hover {cursor: pointer;}
.player {
    height: 0;  
    width: 0;
}

/** main icon **/
#main-icon {padding-left: 15px; padding-right: 15px;}
.main-icon .image-icon {position: absolute; left: auto; right: 0;     width: 100%;} 
/*.main-icon .image1 { width: 296px; height: 395px; }*/
.main-icon .image2 {visibility: hidden;}
.main-icon:hover .image2 {visibility: visible;}
.main-icon:hover .image1 {visibility: hidden;}
.main-icon img {margin-bottom: 20px; max-width: 200px;     margin-top: 25px;}
.facebook2 {padding-top: 0;}
.technology {padding-top: 30px;}
.contact, .find {display: inline-block;}


.hovereffect {
	position: relative;
}
.hovereffect:hover .hoveroff {opacity: 0;}
.hoveron-wrap {
	opacity: 0;
	display: block;
    bottom: 0; 
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.hovereffect:hover .hoveron-wrap {opacity: 10}
.blog img, .poodle img, .blog, .poodle {line-height: 173px; vertical-align: middle;}

.liveshow {padding-top: 45px;}
.purple {padding-top: 24px;}
.music {padding-top: 25px;}
.art {padding-top: 32px;}
.bubbles {padding-top: 30px;}
.video {padding-top: 5px;}
.techicon {padding-top: 14px;}
.soul {padding-top: 3px;}

/** banner **/ 
#banner {/*max-width: 550px; top: -10px; */ margin: 0 auto; position: relative; }
.banner-item {padding: 0 10px 30px; font-size: 30px; font-weight: 900; width: 22.9%; min-height: 170px;}
.banner-item h3 {margin-top: 5px; font-size: 13px; font-weight: 800;}
.banner-item a h3 {color: #000;}
.red, .banner-item a .red {color: #fb0000}
.banner-text {background-color: #c3342a;} 
.padded-top {padding-top: 42px;}

.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
.displayblock-mobile { display: none;}
@media only screen and ( min-width: 980px ) {
	.atss .at-share-btn .at-icon-wrapper, .atss a .at-icon-wrapper {padding: 2px 0!important;} 
	.atss .at-share-btn, .atss a {width: 2pc!important;}
	.atss .at-share-btn span .at-icon, .atss a span .at-icon {width: 1pc!important; height: 2pc;}
	.atss .at-share-btn:focus, .atss .at-share-btn:hover, .atss a:focus, .atss a:hover {width: 3pc!important;} 
} 

/***********************************************************/
/* #MEDIA QUERIES ******************************************/
/***********************************************************/

@media only screen and ( max-width: 1300px ) {
	.main-icon img.image-icon {max-width: 85%;}
	.main-icon img.image-icon {left: 17px;}
	#row2 img {line-height: 246px; vertical-align: bottom;}
} 

@media only screen and ( max-width: 1024px ) { 
	.technology {padding-top: 8%;}
}

@media only screen and ( max-width: 900px ) {
	.facebook2 {padding-top: 0;}
	.technology {padding-top: 9.5%;}
	#playlist li {width: 20%; padding: 0; height: 92px;}
}

@media only screen and ( max-width: 768px ) {
	.margin-top { margin-top:40px;}
	.banner-item a h3 { margin-bottom: 30px;}
	.banner-item { padding:0px !important;}
	.technology {padding-top: 3.5%;}
	#row1 > .col-sm-2 {float: left; width: 18.333%; clear: none;}
	.displaynone-mobile { display: none !important}
	.displayblock-mobile { display: block !important}
}
  
@media only screen and ( max-width: 767px ) {
	body  {background-size: cover}
	.col {float: none;}
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-3-3, .col-sm-4, .col-sm-6 {width: 100%}
	.mobile {display: block;}
	.desktop {display: none;}
	.col > br {display: none;}
	.main-icon {min-height: 395px; margin-bottom: 40px;}
	.main-icon img {max-height: 395px;}
	.social {padding: 0; position: relative; top: -15px;}
	.social .col-sm-6 {float: none; width: 100%;}
	.facebook2 {padding-top: 0;}
	.col {padding-bottom: 15px;}
	#row1 .bio, #row1 .detroit { float: left; width: 49%; clear: none;}
	#row1 .press, #row1 .liveshow { float: left; width: 49%; clear: none; padding-top: 0;}
	#row1 .photos, #row1 .parties { float: left; width: 49%; clear: none;}
	#row1 .social, #row1 .purple { float: left; width: 49%; clear: none;}
	#row1 .social .facebook1, #row1 .social .facebook {display: inline-block; width: 30%;}
	#row1 .social img.twitter, #row1 .social img.instagram {display: inline-block; position: relative; top: 10px;}
	#row2 > .col-sm-2 {float: left; width: 49%; clear: none;}
	#row2 > .col-sm-2:last-child {width: 100%; float: none;}
	#row2 > .col-sm-1 {float: left; width: 25%; clear: none;}
	#row2 > .col-sm-3 {float: left; width: 75%; clear: none;}
	#row2 > .col-sm-3 > .col-sm-3-3 {width: 33%; float: left;}
	#row1 > .col-sm-2 {float: none; width: 100%; clear: both;}
	#row1 > .col-sm-2 {clear: both;}
	#row1 > .col-sm-2:after, #row1 > .col-sm-2, #row1 > .col-sm-2:before {
		clear: both;
	}
	#row1 > .col-sm-2:before, #row1 > .col-sm-2:after {
		display: table;
		content: " ";
	}

	#row3 > .col-sm-3-3 {float: left; width: 50%;}
	.technology { padding-top: 16%; }	
	.cheesecake {padding-top: 8%;}
	.col.banner-item a.purplecast img {margin-bottom: 15px}
}

@media only screen and ( max-width: 320px ) {
	.technology { padding-top: 22%; }
}
.findsearch ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height:30px;
}

.findsearch li
{

margin: 7px 0;
}

#search {
  background-image: url('css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 80%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 0px solid #ddd;
  margin-bottom: 12px;
}


* {
  box-sizing: border-box;
}



/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}