/****** FILE: themes/rabe/css/homepage.css *****/
/* MARQUEE */
#marquee{
	display: block;
    position: relative;
	height:100%;
    width: 100%;
	min-height:880px;
}
	#marquee .featured{
    position: absolute;
    left: 2%;
    bottom: 2%;
    width: 15%;
    max-width: 333px;
    min-width: 125px;
	}
  	#marquee .featured img{
      width: 100%;
      height: auto;
  	}
	#marquee .homerotate{
		height:100%;
		width: 100%;
	}
		#marquee .rotatee{
			background:#FFF;
			position: absolute;
    		width: 100%;
			overflow:hidden;
		}
			#marquee .rotatee img{
    			height: 100%;
    			width: 100%;
    			object-fit: cover;
				overflow:hidden;
			}
			#marquee .rotatee .content{
				  bottom: 0;
				  height: 200px;
				  left: 0;
				  margin: auto;
				  position: absolute;
				  top: -150px;
				  right: 0;
			}
				#marquee .rotatee .content h1{
					font: 500 14em/.9em 'AvenirLTStd-Black', sans-serif;
					color: #ffffff;
					letter-spacing:-0.05em;
					text-transform: uppercase;
					text-align: center;
				}
				#marquee .rotatee .content h2{
					font: 100 3em/1em 'AvenirLTStd-light', sans-serif;
					color: #FFF;
					text-transform: uppercase;
					text-align: center;
				}
				#marquee .rotatee .content h2:before {
					content:"______ ";
					position:relative;
					bottom:18px;
				}
				#marquee .rotatee .content h2:after {
					content:" ______";
					position:relative;
					bottom:18px;
				}
					#marquee .rotatee .content h2 span{
						color: #fd8204;
					}
#content {
clear:both;
    top:100%;
}
#content p{
	font: 400 1.385em/1.4em 'AvenirLTStd-Light', sans-serif;
}

#projects{
}
	#projects a{
		float: left;
		position: relative;
		text-decoration: none;
		width: 100%;
	}
		#projects a img{
			width: 100%;
			height: auto;
			filter: grayscale(100%);
		  -webkit-filter: grayscale(100%); /* For Webkit browsers */
		  filter: gray; /* For IE 6 - 9 */
		  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
		  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

		}
		#projects a img:hover{
		filter: grayscale(0%);
		  -webkit-filter: grayscale(0%);
		  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
		}
#footer {
    position: relative;
}


@media handheld, only screen and (max-width: 900px) {
	#marquee{
		height:430px;
		min-height:400px;
		top:-50px;
	}
		#marquee .homerotate{
		height:430px;
	}
		#marquee .rotatee{
			height:430px;
		}
			#marquee .rotatee .content{
				  top: 100px;
			}

				#marquee .rotatee .content h1{
					font: 500 10em/.9em 'AvenirLTStd-Black', sans-serif;
				}

				#marquee .rotatee .content h2:before {
					display:none;
				}
				#marquee .rotatee .content h2:after {
					display:none;
				}
	#projects{
		font-size: 50%;
	}
	#content {
		top:-50px;
	}
}