@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Work+Sans';
    src: url('https://www.giraffeweb.net/fonts/Work_Sans/static/WorkSans-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}


body{
background-color: #411f01;
font-size:1.2em;
margin:auto;
/*font-family:Tahoma,Arial, Helvetica, sans-serif;*/
font-family: 'Work Sans', sans-serif;
text-align:center;
color:#000000;
margin-top:0px;
}
html, body {height: 100.1%}
div {text-align:center;
color:#000000;}
img {border:none;}

a, a:link, a:visited {
/*color:#C8AE73;*/
color: #914104;

}

a:hover {
color: #D29901;
}
.clra {
	clear: both;
}
.button {
	color:#fff;
	background-color: #DEA82C;
	border-radius: 15px;
	padding:10px;
}
a.button, a:link.button {
	color:#fff;
	text-decoration:none;
	font-size: 120%;
}
a:hover.button {	
	background-color: #914104;
}
.buttonbr {
	color:#fff;
	background-color: #914104;	
	border-radius: 15px;
	padding:10px;
}
a.buttonbr, 
a:link.buttonbr {
	color:#fff;
	text-decoration:none;
	font-size: 120%;
	background-color: #914104;
}
a:hover.buttonbr {
	background-color: #DEA82C;
}
p, li {
text-align:left;
color:#000000;
margin-bottom:0px;
margin-left: 20px;
margin-right: 10px;
font-size: 90%;
}
div.larger {
line-height: 140%;
}
ul {
color:#000000;
text-align:left;
} 

h1, h2, h3, h4, h5 {
color:#914104;
text-align:left;
margin-top:0px;
margin-left: 20px;
/*font-family: Garamond, "Times New Roman", Times, serif;*/
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-style: italic;
}
h3:first-letter {
font-size:larger;
}
h5,h6 {
	font-size: 100%;
	margin-bottom: 0px;
}
#wrapper {
margin:0px auto;
text-align:center;
width:100%;
}
#banner { 
margin: 14px auto 0;
width: 100%;
height:218px;
background-color: #dea82c;

}
.banner a, .banner a:link, .banner a:visited{
	text-decoration: none; 
	color: #333;
}
.bannerdot {
	width:100%;
	height: 12px;
	margin-top:0px;
	margin-bottom:0px;
	background-color: #914104;
}
#logo {
float:left;
width: 352px;
height: 218px;
}
#banner-right {
float:right;
width: 544px;
}
#search-box{
    float: right;
	width: 300px;
	color: #242868;
	text-align:right;
	margin-top: 10px;
	margin-right:20px;
	}
#ptop {
/*padding-top: 100px;*/
	}	
#menu {
text-align:left;
/*background-color: #dea82c;*/
min-height: 30px;
width: 100%;
margin: 0px auto;
background-color: #DEA82C;
box-shadow: 10px 10px 30px rgba(0,0,0,.5);
}

/*menu active page buttons*/
/*home*/ body.hm #menu #hm, body.hm #menu #hm a,
/*about*/ body.ab #menu #ab, body.ab #menu #ab a,
/*community*/ body.sc #menu #sc, body.sc #menu #sc a,
/*web design*/ body.wd #menu #wd, body.wd #menu #wd a,
/*seo*/ body.seo #menu #seo, body.seo #menu #seo a,
/*profiles*/ body.gwp #menu #gwp, body.gwp #menu #gwp a,
/*request*/ body.gr #menu #gr, body.gr #menu #gr a,
/*portfolio*/ body.po #menu #po, body.po #menu #po a,  
/*test*/ body.te #menu #te, body.te #menu #te a  {
color: #914104;
}

#content {
background-size: cover;
background-image: url(images/content-back.jpg);
background-repeat: repeat-y;
width: 100%;
min-height: 1200px;
}

#copy {
color:#000000;
width: 66%;
float:left;
margin: auto auto auto 30px;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
 box-shadow: 5px 5px 20px #000;
	-moz-box-shadow: 5px 5px 20px #000;
	-khtml-box-shadow: 5px 5px 20px #000;
	border-radius: 10px;
	background-color: #FFFBF8;
	background-color:rgba(254, 250, 251, 0.50);
}
.contentr {
	float:left;
	width: 80%;
}
.copy-back {
color:#000000;
width: 80%;
text-align:center;
margin: auto;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
 box-shadow: 5px 5px 20px #000;
	-moz-box-shadow: 5px 5px 20px #000;
	-khtml-box-shadow: 5px 5px 20px #000;
	border-radius: 10px;
	background-color: #FFFBF8;
	background-color:rgba(254, 250, 251, 0.50);
}
.copy-home {
color:#000000;
width: 80%;
text-align:center;
margin: auto;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
 box-shadow: 5px 5px 20px #000;
	-moz-box-shadow: 5px 5px 20px #000;
	-khtml-box-shadow: 5px 5px 20px #000;
	/*border-radius: 10px;*/
	background-color: #FFFBF8;
	background-color:rgba(254, 250, 251, 0.50);
}
.copy-home2 {
color:#fff;
width: 80%;
text-align:center;
margin: 40px auto;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
 background-color:rgba(254, 250, 251, 1);
}
.copy-home3 {
	color:#fff;
width: 80%;
text-align:center;
margin: auto;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
}
.box3 {
	width: 31%;
	float:left;
	padding: .5%;
}
.box2 {
	width: 48%;
	float:left;
	padding: .5%;
}
.box23 {
	width: 65%;
	float:left;
	padding: .5%;
}
.copy-home5 {
	color:#fff;
width: 100%;
text-align:center;
margin: auto;
font-weight: normal;
padding-top:20px;
padding-bottom: 20px;
}
.box5 {
	width: 18%;
	float:left;
	padding: .5%;
}
#home-boxes {
	width:80%;
	margin:auto;
	text-align:center;
}
.rghtwhbox {
	width:100%; 
	max-width:300px;  
	padding:10px; 
	background-color:#f4f4f4; 
	margin-left:auto; 
	margin-right:auto;
	text-align:center;
}
.rghtwhbox h4 {
	text-align:center;
}
.home-gold {
  color: #000;
  background-color:rgba(222, 168, 44,1);
  width: 80%;
  text-align:center;
  margin: 40px auto;
  font-weight: normal;
  padding-top:20px;
  padding-bottom: 20px;
	
}
.home-gold::after {
	clear:both;
}
.box-gold {
	border: 10px solid #fff;	
	color: #000;
	background-color:#dea82c;
	width: 140px;height:140px;
	float:left;
	padding: 2%;
	border-radius: 50px;
	-moz-border-radius: 50%;
    -webkit-border-radius: 50%;
	 margin: 0 3% 20px;
	font-size: 200%;
}
#left-col {
max-width: 490px;
float:left;
background-color:#811700;
}
#home-box {
float:left;width: 30%;margin-right: 10px;
}
#home-box h2 {
text-align:center;
}
#profile-box {
   float:left;
	width:18%;
	padding-right: 15px;
}

#footer {

font-size: 75%;
color: #676302;
width:100%;
margin:0px auto;
text-align:center;
background-color:#fdfafa;
min-height: 50px;

}
#footer p {
color: #ffffff;font-weight: bold;}
#footer a, #footer a:link, #footer a:visited {
color: #811700;
text-decoration:none;}

#giraffe {
color: #811700;
font-size: 70%;
margin:auto;
text-align:center;
}
#giraffe a, #giraffe a:link, #giraffe a:visited {
color: #811700;
text-decoration:none;
}



.float-left {
float:left;}

.float-right {
float:right;}

.left{
text-align:left;
}
.center {
text-align:center;}
.right {
text-align:right;}
.nobot-margin {
margin-bottom: 0px;
}
.notop-margin {
margin-top:0px;}
.larger {
font-size: larger;
}
.smaller {
font-size: smaller;
}
.title-line {
vertical-align:bottom;
width: 400px;
height: 27px;
}
#check { font-size: 10px; width: 20px; display: none; visibility: hidden; z-index: 0; }

.google-maps {
        position: relative;
        padding-bottom: 75%; /* This is the aspect ratio*/
        height: 0;
        overflow: hidden;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/* begin social media chicklets
------------------------------------------------------------------*/
.gwfb {
	position:fixed; 
	top:260px; 
	width:22px; 
	height:72px; 
	z-index:8765; 
	right:0; 
	cursor:pointer; 
	/*background-image:url(images/facebook.png); */
	background-repeat:no-repeat; 
	background-position:right;
	}
	

.gwtw {
	position:fixed; 
	top:340px; 
	width:22px; 
	height:72px;  
	z-index:8765; 
	right:0; 
	cursor:pointer; 
	/*background-image:url(images/youtube.png);*/
	background-repeat:no-repeat; 
	background-position:right;
	}	

.gwli {
	position:fixed; 
	top:418px; 
	width:22px; 
	height:72px; 
	z-index:8765; 
	right:0; 
	cursor:pointer; 
	background-repeat:no-repeat; 
	background-position:right;
	}
/*end chicklets
------------------------------------------------------------------*/
.wht {
color:#fff;
}

/* Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 801px) {
#wrapper {
  width: 100%;
  }

}

@media only screen and (max-width: 800px) {

#wrapper {
  width: 100%;
  }

}
@media only screen and (max-width: 768px) {

#wrapper {
  width: 100%;
  }
#ptop {
padding-top: 0px;
width: 100%;
height:auto;
	}
#banner-right {
float:none;
width: 100%;

}
#search-box{
    float: none;
	width: 100%;
	
	text-align:center;
	margin:auto;
	}

#content {
/*background: transparent url(none) top center no-repeat scroll;*/
	background: transparent none top center no-repeat scroll;
}
#copy {
  width:90%;
  float:none;
  margin: auto auto auto auto;
}
#home-box {
  float:none;
  width: 90%;
  margin: auto;
 }
.title-line {
  width: 90%;
  height: 3px;
 }
#profile-box {
 float:none;
 width:100%;
 }
}

@media only screen and (max-width: 600px) {
#banner {
min-height: 340px;
}

#banner-right {
float:none;
width: 100%;

}
#search-box{
    float: none;
	width: 100%;
	
	text-align:center;
	margin:auto;
	}
#ptop {
padding-top: 0px;
width: 100%;
height:auto;
	}
#logo {
  float:none;
  width: 100%;
  height: auto;
}
#wrapper {
  width: 100%;
  }
#content {
background: transparent url(none) top center no-repeat scroll;
}
#copy {
  width:90%;
  float:none;
  margin: auto auto auto auto;
}
.copy-home,
.copy-home2,
.home-gold,
.copy-home3 {
width: 90%;
}
.box2,
.box3,
.box23{
	width: 100%;
	float:none;
	padding: .0px;
}

#home-box {
  float:none;
  width: 90%;
  margin: auto;
 }
.title-line {
  width: 90%;
  height: 3px;
 }

.box5 {
	width: 100%;
	float:none;
	padding: 0px;
}
.contentr {
	float:none;
	width: 99%;
}
#profile-box {
 float:none;
 width:100%;
 }
}
@media only screen and (max-width: 320px) {
#banner {
min-height: 340px;
}

#banner-right {
float:none;
width: 100%;

}
#search-box{
    float: none;
	width: 100%;
	
	text-align:center;
	margin:auto;
	}
#ptop {
padding-top: 0px;
width: 50%;
height:auto;
	}
#logo {
  float:none;
  width: 100%;
  height: auto;
}
#mimg {
 width: 90%;
  height: auto;
  }
#wrapper {
  width: 100%;
  }
#content {
background: transparent url(none) top center no-repeat scroll;
}
#copy {
  width:100%;
  float:none;
  margin: auto auto auto auto;
}
.copy-home,
.copy-home2,
.home-gold,
.copy-home3 {
width: 90%;
}
.box2,
.box3,
.box23{
	width: 100%;
	float:none;
	padding: .0px;
}
#home-box {
  float:none;
  width: 100%;
  margin: auto;
 }
.box5 {
	width: 100%;
	float:none;
	padding: 0px;
}
.title-line {
  width: 100%;
  height: 3px;
 }
.contentr {
	float:none;
	width: 99%;
}
#profile-box {
float:none;
width:100%;
}
}