/*
----------------------------

Name:     "Bohnsack Design" mobile styles
Designer: Chris Bohnsack
URL:      www.bohnsackdesign.com
Date:     1, 2012 v1.0

----------------------------------------------- */


/* MOBILE CSS */
@media only screen and (max-width: 767px) {
	
/* ----------------------------------------------- 
//////////////////////////////////////////////////
mobile style overrides 
//////////////////////////////////////////////////
----------------------------------------------- */


a:visited{ color: #333;}
a{ color:#333;}

body{   -webkit-text-size-adjust: none;}

#header-bg { width:100%; min-width:200px; height: 75px; margin:0 auto; background-image:none; background:url(../_images/bg-header.gif) #f8f8f8 repeat-x 0px;}
#header { width:auto; margin:0 auto; position:relative;}
#logo { padding:5px 0 0 5px; width:auto;}
#logo a{ background:url("../_images/logo-bohnsack-circle.png") no-repeat; background-size: 75px; height:75px; width:75px; }

	a.pancake{display: block; text-indent: -9999px; background-color:#000; padding: 5px; width: 40px; float:right;}
	a.pancake > span{ overflow: hidden; display: block; border-top: 3px solid #FFF; margin: 5px;}
	
#navigation { display:none;}
#secondary-navigation { display:none;}
#mobile-navigation{ display:block; position:absolute; top:15px; right:10px; left: 10px; font-size:11px; z-index:1001;}

	ul.submenu{top:40px; position: relative;}
	
#mobile-navigation ul{ letter-spacing:2px; width: 100%;}
#mobile-navigation ul li{ width:100%; text-align:right;}



#mobile-navigation ul li a:hover{ color:#CCC; background-color: #999;}
#mobile-navigation ul li ul{ display: none;}
#mobile-navigation ul li:hover ul{ display: block;}
#mobile-navigation ul li ul li{ width:100%; text-align:left;}
#mobile-navigation ul li ul li a{ display:block; background-color:#333; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-decoration:none;  padding:5px 10px 5px 10px; color:#FFF; font-size:14px; margin: 1px 0 0 0;
-webkit-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .2);}
#mobile-navigation ul li ul li ul li a{ margin-left: 15px;}


#home-link{ display:none;}


.tparrows{ display:none;}

/* ----------------------------------------------- 
//////////////////////////////////////////////////
content area 
//////////////////////////////////////////////////
----------------------------------------------- */

#container{ margin:0 auto; width:auto; text-align:left; padding:20px;}

#container a{ padding:0; text-decoration:underline;}

#container p {padding:0px 0px 20px 0px;}

#container ul {padding:5px 0px 10px 5px;}
#container ul li {background:url(/_images/bullet.gif) no-repeat 10px 7px; padding:0px 0px 10px 20px;}

#container ol {padding:5px 0px 10px 30px; }
#container ol li {padding:0px 0px 10px 0px;list-style-type:decimal;}





.hr{ margin:20px 0 20px 0; border-top: 1px #CCCCCC dotted; }

/* home page  -------------------------------------- */

.fullwidthbanner-container{ z-index:1;min-width:100%;}

.fullwidthbanner h3{ padding:5px 0 0 0;}

#column1{ width: auto; float:left; border-left: none; }
#column2{ display:none;}

.home-slider #container{ padding:20px;}
.home-slider #header-bg{ height:75px;}
.home-slider #column1{ width:auto; float:left; border-left: none; font-size:13px; padding:0px; }
.home-slider #column2{ width:auto; float:left;}

.tp-bullets{ display:none;}

#news{padding:0 0 20px 0px;}
#member{padding:20px 0 10px 0px; border-top: 1px #CCCCCC dotted; color:#999999;}


#left-column{ display:none;}

#right-column{float:none; padding:0px; width:auto; }


.thumbnail { width:130px; margin:0 10px 10px 0; float:left;}
.thumbnail img{ width:130px;}
.thumbnail-banners { width:90px; margin:0 20px 20px 0; float:left;}

.pull-quote-left {width:150px; float:left; font-size:18px; font-style:italic; padding:0px 10px 10px 0px; color: #999999; line-height:24px; border-right:dotted #CCCCCC 1px; margin:0px 20px 10px 0px;}
.pull-quote-right {width:150px; float:right; font-size:18px; font-style:italic; padding:0px 0px 10px 10px; color: #999999; line-height:24px; border-left:dotted #CCCCCC 1px; margin:0px 0px 10px 10px;}



/* ----------------------------------------------- 
//////////////////////////////////////////////////
portfolio 
//////////////////////////////////////////////////
----------------------------------------------- */

#portfolio-page #header-bg{ height:70px;}
#portfolio-page #container{ width:auto; padding:0 20px 40px 20px;}

#portfolio-page #left-column { width:30px; padding:135px 0 0 0px; display:block;}
#portfolio-page #left-column h1{
	font-family:ArchivoNarrowBold;
	text-transform:uppercase;
	font-size:35px;
	letter-spacing:1px;
	font-weight:normal;
}

#portfolio-page #right-column { width:90%; float:none; margin:0 0 0 30px; }

	.portfolio-container{ padding:30px 20px 20px 20px !important;}
	.portfolio-container #filter{ margin: 0;}
	
#filters ul{font-family:ArchivoNarrowRegular; border-bottom:none; margin:0 20px 0px 0; height:auto;}
#filters ul li{  float:none; margin:0 0px 3px 0; padding:0; text-transform:uppercase; letter-spacing:2px; background:none;}	
#filters ul li a{ padding:4px 10px; display:block; line-height:16px; text-decoration:none; background-color:#FFF; border:1px solid #CCC; -webkit-border-radius: 8px; border-radius: 8px; display:block;}
#filters ul li a:hover{background-color:#ccc; color:#FFF;}
#filters ul li.current a{ background-color:#ccc; color:#FFF;}

ul#portfolio li{ background:none; padding:0;}

ul#portfolio li img{ width:70px; height:70px;}
.thumbnail{ width:70px; height:70px;}


/* ----------------------------------------------- 
//////////////////////////////////////////////////
footer 
//////////////////////////////////////////////////
----------------------------------------------- */

#footer{ padding:20px 0 20px 0; border-top: 1px #CCCCCC dotted; font-size:11px; color:#999999; }
#copyright{ float:left; width: auto;}
#social-networks{ width: auto; float:left; text-align:left; padding:10px 0 0 0;}
#social-networks a{ text-decoration:none;}
#social-networks img { padding:0 0 8px 0; }

.seo-links{ display:none;}



/* ----------------------------------------------- 
//////////////////////////////////////////////////
form 
//////////////////////////////////////////////////
----------------------------------------------- */
.form-element { width:320px;}

#recaptcha_widget{ border:dotted #CCCCCC 1px; background-color:#FFFFFF; padding:10px; width:300px;}

}