body {
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-top:60px;
	background-color:black;
}

#container{
	width: 1150px;
	margin:auto;
}

h1{
	font:18px Arial, sans serif;
	color:white;
	font-weight:normal;
	padding:0px;
	margin:0px;
}
p{
	font-family: "Arial", sans serif;
	font-size:14px;
	color:white;
	font-weight:normal;
	padding:0px;
	margin:0px;
	line-height:20px;
}

h2 {
	font-family: "Arial", sans serif;
	font-size:14px;
	color:white;
	font-weight:normal;
	padding:0px;
	margin:0px;
	line-height:20px;
	opacity:.4;
}


li {
	list-style-type:none;
}
li,ul{
	margin:0px;
	padding: 0px;
	float:left;
}

#intro {


	padding: 30px 85px 40px 30px;
	margin-bottom: 80px;
	height: 120px;
	
}

#intro p {
	width: 580px;
	line-height:1.6;
	float:right;
	color: #b6b6b6;
}

#intro a {
	color: black;
	text-decoration:none;
}

#intro a:hover .callout{
	color:red;
}

#moverButton{
	float:left;
}

.callout {
	background-color:white;
	color: black;
	padding-left:4px;
	padding-right:4px;
	padding-top:2px;
	padding-bottom:2px;
	font-weight:bold;
	margin-right: 2px;	
	margin-left:2px;
}

.project img{
	padding:0px;
	margin:0px;
}

.project a{
	color:white;
	margin:0px;
	padding:0px;

}

.project a:visited{
	color:white;
}
.project{
	height:460px;
	padding-bottom:60px;
	
}
.content{
	float:left;
	height:460px;
	width: 818px;
	cursor: pointer;
	transition: box-shadow 250ms ease-out;
}

.content:hover  {
	

 -webkit-box-shadow: inset 0px 0px 0px 5px rgba(177,44,44,1);
 box-shadow: inset 0px 0px 0px 5px rgba(177,44,44,1);
 -moz-box-shadow: inset 0px 0px 0px 5px rgba(177,44,44,1);
 
}

.imageField  {
	padding-bottom:60px;	
	overflow:hidden;
}
.imageField img{
	display:block;
	opacity:.3;
}

.imageField li {
	position:relative;
}

.imageField li:hover img{
	opacity:1;
}
.imageField li:hover div{
	opacity:0;
}

.imageField p {
	background:black;
	color:#BCBCBC;
	width:250px;
	padding-left:30px;
	padding-top:15px;
	padding-bottom:25px;
	padding-right:82px;
	font-family: "Arial", sans serif;
	font-weight:normal;
	line-height:20px;
	
}

.project>.reel{
	    background: url('img/reel17Thumb.jpg') center;
		background-size: cover;
}

.project > .toonups {
	background: url('img/toonupsThumb.jpg') center;
	background-size: cover;
}

.project > .phone {
	background: url('img/googyMobiInt.jpg') center;
	background-size: cover;
}

.project > .cloud {
	background: url('img/workdayThumb.jpg') center;
	background-size: cover;
}

.project > .google {
	background: url('img/googyThumb.jpg') center;
	background-size: cover;
}

.project > .kindred {
	background: url('img/kindredThumb.jpg') center;
	background-size: cover;
}

.project > .poppy {
	background: url('img/poppyThumb.jpg') center;
	background-size: cover;
}

.project > .gun {
	background: url('img/gun.jpg') center;
	background-size: cover;
}

.project > .sion {
	background: url('img/sionThumb.jpg') center;
	background-size: cover;
}

.project > .miniReel {
	background: url('img/miniReelThumb.jpg') center;
	background-size: cover;
}

.project > .pog {
	background: url('img/pogChamp.jpg') center;
	background-size: cover;
}

.project > .acu {
	background: url('img/acuThumb.jpg') center;
	background-size: cover;
}

.project > .pengy {
	background: url('img/pengyThumb.png') center;
	background-size: cover;
}

.project > .rain {
	background: url('img/rainThumb.jpg') center;
	background-size: cover;
}

.description{
	float:left;
	height:458px;
	background-color:black;
	padding: 0px 0px 0px 24px;
}

.description h1{
	width:201px;
}

.description p{
	width:230px;
	padding-top:23px;
	opacity:0.78;
}

.description a {
	background-color:white;
	padding-left:4px;
	padding-right:4px;
	padding-top:2px;
	padding-bottom:2px;
	font-weight:bold;
	margin-right: 2px;	
	margin-left:2px;
	color: black;
	text-decoration:none;
}

.description a:visited {
	color:black;
}



/* *{
border:1px solid red;
} */


#bannerTeller {
	
	
	background-color:white;
	height:180px;
	position:relative;
	margin-bottom:100px;
	background-image:url('img/topo.png')
	
}

#logo_geo {
	
	float:left;
	position:relative;
}

#logo_geo img{
	
	width:280px;
	margin-top:16px;
	margin-left:16px;
	padding:5px;
	
}

#bannerTeller p {
	
	font-family:Courier new, serif;
	color:black;
	
}

#whiteBox {
	
	background-color:white;
	float:left;
	width:760px;
	margin-left: 16px;
	margin-top:21px;
	padding:15px 15px 15px 32px;
	height:180px;
	
}

#geoAnnouncement {
	
	float:left;
	width:250px;
	
}

#geoAnnouncement p {
	
	font-size:25px;
	line-height:32px;
	
}

#geoDescription {
	
	float:left;
	width:420px;
	padding-left:40px;
	
}

#geoDescription p {
	
	line-height:25px;
	font-size:15px;
	
}

#buttonStack ul {
	
	margin-top:16px;
}

#buttonStack li {
	
	background-color:black;
	margin-right:26px;
	padding: 10px 0px 10px 0px;
	width:160px;
	text-align:center;
	float:left;
	
}

#buttonStack a {
	
	color:white;
	text-decoration:none;
	font-family: Courier new, serif;
	float:left;
}

#buttonStack li:hover {
	
	background-color:white;
	color:black;
	outline:1px solid black;
	
}

#logo_geo img:hover {
	
	outline:8px solid black;
	
}

/*------------------------NOW ITS RESPONSIVE-------------------------*/
@media (max-width:1068px) {

#container{
	width:100%
}


.description h1{
	font-family:"Arial", sans serif;
	font-size: 39px !important;
	color:white;
	font-weight:normal;
	padding-top:18px;
	margin:0px;
	width:100%;
}
.description h2 , p{
	font-family: "Arial", sans serif;
	font-size:37px !important;
	color:white;
	font-weight:normal;
	padding-top:10px;
	margin:0px;
	line-height:1.5;
}

.bump {
	padding-bottom:80px;

}

#intro  {
	font-family: "Arial", sans serif;
	font-size:37px !important;
	position:relative;
	padding-top:20px;
	padding-left:80px;
	padding-right:60px;
	height:100%;
	padding-bottom:0px;
	margin-bottom:0px;
}

#intro p {
	float:none;
	width:100%;
}

#moverButton {
	float:none;
}

.project{
	overflow:hidden;
	height:100%;
	width:100%;
	z-index:0;
	border:0px;
}

.content {
	position:relative;
	float:none;
	height:0px;
	width:100%;
	padding-bottom:56.25%;
	overflow:hidden;
	border:0px;
}

.imageField img {
	width:100%;
	opacity:1;
}

.content iframe, .content img{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.description{
	position:relative;
	margin:0px;
	height:100%;
	padding-bottom:46px;
	padding-left:10%;
	padding-right:10px;
	padding-top:23px;
	border:0px;
}
.description p {
	width:90%;
	padding-top:20px;
}
	
.sepBar {
	height:20px; 
	border-right:0px;
}

.imageField div {
	display:none;
	opacity:0;
}

#whiteBox {
	
	margin-left:0px;
	margin-top:0px;
	width:auto;
	height:auto;
	padding-bottom:80px;
	margin-bottom:100px;
	padding-left:10px;
}

#bannerTeller {
	
	position:relative;
	margin-bottom:100px;
	
}

#buttonStack li {
	
	float:none;
	width:90%;
	height:60px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	font-size:30px;
	
}

#buttonStack ul {
	
	width:100%;
	line-height:60px;
	height:auto;
	padding-top:20px;
	
}
#buttonStack {
	
	margin-left:auto;
	margin-right:auto;
	height:auto;
	
	}

#logo_geo {
	
	padding-bottom:8px;
	padding-left:30px;
	
}

#geoAnnouncement, #geoDescription {
	
	float:none;
	width:auto;

}

#geoDescription {
	
	padding-left:0px;
	padding-top:20px;
	
}

#geoDescription p {
	
	font-size:32px !important;
	line-height:55px;
	margin-bottom:50px;
	font-size:25px;
	padding-left:40px;
	padding-right:20px;
}

#geoAnnouncement p {
	
	font-size:32px !important;
	line-height:55px;
	margin-bottom:40px;
	margin-top:20px;
	padding-left:40px;
	padding-right:20px;
	
}

#buttonStack a {

	float:none;

}

@media (max-width:882px) {


#contactBar{
	height:90px;
}

#titleBar{
	padding-top:130px;
}

}
@media (max-width:517px) {
#titleBar{
	clear:both;
	padding-top:160px;
	padding-left:10px;
}

#contactBar{
	height:120px;
}

}