#Intro {margin: 0; padding: 0;}
#Intro .inside {}
#Intro .inside img {width: 100%; position: relative; vertical-align: top;}
#Intro .inside .line {border-top: 1px solid #fc3; width: 50px; margin-bottom: 28px;}
#Intro .inside h1 {position: absolute; bottom: 50%; left:70px; text-align: left; width: 80%;background: transparent;
font-size: 150%; line-height: 30px; margin: 0;
font-weight: 300; color: #fff;
}
#Intro .inside h1 span {display: block;}

#Intro .inside .shift {position: absolute; bottom: 50%; right:140px;}
#Intro .inside .shift i {color: #ff0; font-weight: 300;}


/* respond */
@media only screen and (min-width : 800px) {
	#Intro .inside h1 { font-size: 250%; line-height: 50px; bottom: 25%;}
	#Intro .inside h1 span {}
}
@media only screen and (min-width : 1024px) {
	#Intro .inside h1 {left:140px; font-size: 250%; line-height: 50px; bottom: 25%;}
	#Intro .inside h1 span {}
}


/*
FEATURED X ####################################################################
*/
#FeaturedX {}
#FeaturedX .inside {padding-top: 20px; padding-bottom: 30px;/*
padding: 23px 70px 30px 70px;
*/}
#FeaturedX .inside h2 {text-align:left; color:#fff; text-transform:uppercase;font-size: 100%; letter-spacing: .18em; margin-bottom: 30px;}
/* respond */
@media only screen and (min-width : 600px) {
	#FeaturedX .inside {}
	#FeaturedX .inside h2 {}
}
@media only screen and (min-width : 768px) {
	#FeaturedX .inside h2 {}
}
@media only screen and (min-width : 960px) {
	#FeaturedX .inside h2 {}
}

/* Controls the Overlay only .. no breakpoints */
#FeaturedX .container {position: relative;width: 100%;}
#FeaturedX .image {display: block;width: 100%;height: auto;}
#FeaturedX .overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease;background-color: #fff;}
#FeaturedX .container:hover .overlay {opacity: .96;}

#FeaturedX ul.grid {margin: 0; padding: 0; text-align: left;}
#FeaturedX ul.grid li {list-style-type: none; width: 100%; margin: 0; padding: 0;}

/*  response  */
@media screen and (min-width: 800px) {
	#FeaturedX .inside {padding-top: 30px; padding-bottom: 120px;/*padding: 45px 140px 60px 140px;*/}
	#FeaturedX ul.grid li { width: 33.3%; float: left;}
}


#FeaturedX .tInfo { padding: 0 50px 50px 50px; position: absolute; bottom: 6px; }
#FeaturedX .tInfo h3 {font-size: 70%; color: #ccc; margin-bottom: 0; text-transform: uppercase; font-weight: 600; letter-spacing: .18em;}
#FeaturedX .tInfo .copy {color: #000; font-size: 100%; margin-bottom: 10px; font-weight: 400;}

#FeaturedX .tInfo .noMobile {display:none;}

#FeaturedX a.actionBtn {
background: #fc3;color: #000;text-align: center;font-weight: 600;text-transform: uppercase;display: inline-block;
font-size: 70%; padding: 10px 26px; margin: 40px 0 10px 0; letter-spacing: .18em;
}
#FeaturedX a.actionBtn:hover {background: #1a1a1a; color: #fff;}

/*  response  */
@media screen and (min-width: 1300px) {
	#FeaturedX .tInfo {padding: 0 20px 20px 20px;}
	#FeaturedX .tInfo h3 {font-size: 70%;}
	#FeaturedX .tInfo .copy {font-size: 100%;}
	#FeaturedX .tInfo .noMobile {display:block;}
	#FeaturedX a.actionBtn {font-size: 70%; padding: 10px 26px; margin: 40px 0 10px 0;}
}

/* Larger than mobile */
@media (min-width: 400px) {#FeaturedX .overlay {background: white;}}

/* Larger than phablet */
@media (min-width: 550px) {#FeaturedX .overlay {background: white;}}

/* Larger than tablet */
@media (min-width: 750px) {#FeaturedX .overlay {background: white;}}

/* Larger than desktop */
@media (min-width: 1000px) {#FeaturedX .overlay {background: white;}}

/* Larger than Desktop HD */
@media (min-width: 1200px) {#FeaturedX .overlay {background: white;}}


/*
CONTACT ####################################################################
*/
#Contact {background: #1a1a1a; padding: 100px 0;}
#Contact .inside {padding: 0px 70px; text-align:center;}
#Contact .inside h2 {text-transform:uppercase; color: #4d4d4d; margin-top: 0;
font-size: 70%; margin-bottom: 0; text-transform: uppercase; font-weight: 600; letter-spacing: .18em;
}

#Contact .inside ul { margin: 0; padding: 10px 0;}
#Contact .inside ul li {list-style-type: none; display:inline-block; text-align: center; padding: 0 16px 0 0;}
#Contact .inside ul li a {display: block; padding: 0px 0; color: #4d4d4d;}
#Contact .inside ul li a:hover {color: #fff;}

#Contact .inside ul li a i {font-size: 100%;}

#Contact .inside .copyright { padding: 10px 0; color: #4d4d4d;font-size: 70%; margin-bottom: 0; text-transform: uppercase; font-weight: 600; letter-spacing: .18em;}
#Contact .inside .copyright a { color: #4d4d4d;}
#Contact .inside .copyright a:hover { color: #fff;}

/*  response  */
@media screen and (min-width: 800px) {
	#Contact .inside {text-align:left;}
	#Contact .inside h2 {}

	#Contact .inside ul {float:left; width: 60%;}
	#Contact .inside .copyright {float:right; width: 30%; text-align:right;}
}
@media only screen and (min-width : 1024px) {
	#Contact .inside {padding: 0px 140px 0px 140px;}
}