/* 
WOO CUSTOM STYLESHEET
---------------------

Instructions:

Add your custom styles in this file instead of style.css so it 
is easier to update the theme. Simply copy an existing style 
from style.css to this file, and modify it to your liking. */

#slides {
    padding: 30px 0 15px;
}

#slide-box {
	overflow:hidden;
	position:relative;
    background: #E5EBF0 url(images/bg-slider.png) no-repeat bottom center;
    padding-bottom: 23px;
}

ul.slides_container {
	position:relative;
}

.navbar-toggle {
    display: none;
    position: absolute;
    padding: 9px 10px;
    background-color: #3B658F;
    background-image: none;
    border: 2px solid #fff;
    border-radius: 4px;
    right: 13px;
    top: 30px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

#main .block {
	width: 303px;
}

@media only screen and (max-width: 960px) {
	body {
		min-width: inherit;
	}
    #header-container {
        padding: 0 10px;
    }
    #navigation {
        display: block;
        float: none;
        clear: both;
        padding-top: 20px;
    }
	#slide-box {
		width: 100%;;
	}
	.slides_container {
		width: 100%;
	}
	.slide {
		width: auto;
		min-height: inherit;
	}
	.slide-image {
		width: auto;
	}
	.slide-img {
		width: 100%;	
		height: auto;
	}
    .col-full {
        width: auto;
    }
    body.home #content {
        /* padding: 20px 10px; */
    }
    #main {
    	width: 92% !important;
    	/* padding: 0 10px; */
    
    	margin: 0 auto;
    	float: none;
}
    #main .block {
        margin: 0 !important;
    }
    #main .infobox {
        width: 33%;
    }
    #main .infobox img {
    	width: 90%;
    	height: auto;
    }
    #main .infobox .title, #main .infobox .entry {
    	padding: 0 12px;
    }
	#copyright, #credit {
    	margin: 7px 10px 0;;
    }
    #portfolio {
    	width: 100%;
    }
	#portfolio .portfolio {
		width: 31% !important;
	}
	#portfolio .portfolio .portfolio-img {
		padding: 0 10px;
	}
	#portfolio .portfolio img {
		width: 90%;
		max-width: 250px;
		height: auto;
	}
	#portfolio .portfolio h3 {
		padding: 5px 10px;
	}

}

@media only screen and (max-width: 840px) {
    #menu-top> li > a {
    	padding: 6px 8px;
    }
    #title-container {
    	padding: 5px !important;	
    }
    #title-container h1, #title-container .cat {
    	margin: 12px !important;
    	display: block;
    }
    #title-container .archive_header {
    	width: 100%;
    }
}

@media only screen and (max-width: 760px) {
	#menu-top > li > a {
    	padding: 6px 5px;
    	font-size: 16px;
    }
}

@media only screen and (max-width: 665px) {
	.navbar-toggle {
		display: block;
	}
	#header {
		padding-top: 20px;
	}
	#logo {
        margin-left: 10px;
    }
    #logo img {
    	width: 140px;
    }
    #navigation {
    	display: none;
    }
    #navigation.in {
    	display: block;
    }

	#menu-top li {
		float: none;
		display: block;
	}
	#navigation .nav li ul li:first-child {
		background: none;
	}
	#menu-top > li > ul {
		display: none;
		position: inherit;
		width: 100%;
		margin: 5px 0 0 0 !important;
		padding: 0 !important;
		border: 0;
	}
	#menu-top > li:hover > ul {
		display: block;
	}
	#menu-top > li > ul > li {
		display: block;
		float: none;
		clear: both;
		padding: 0 0 0 15px;
		margin: 0 0 1px 0;
  		position: inherit;
  		width: auto;
	}
	#menu-top > li > ul > li a {
		display: block;
  		width: auto;
		float: none;
		background: transparent;
	}
	#menu-top > li > ul > li > ul {
		margin-left: 100px !important;
	}
	#slides, #slide-box {
		padding: 0;
		border : none;
		background: none;
	}
	#slides {
		box-shadow: 0px 2px 6px #aaa;
	}
	#main .infobox {
        width: 100%;
    }
    #main .infobox img {
    	width: 96%;
    	height: auto;
    }
    #main h2.section-title {
		font-size: 18px;
    }
    .section .post .title {
    	font-size: 17px;
    	margin: 5px 0 0;
    }
    #copyright, #credit {
    	float: none;
    }
	#portfolio .portfolio {
		width: 100% !important;
	}
	#portfolio .portfolio img {
		width: 34%;
		float: left;
		margin: 0 10px 10px 0;
	}
}

@media only screen and (max-width: 565px) {
	.gallery .gallery-item {
		width: 50% !important;
	}
	.gallery br {
		clear: none !important;
	}
	#portfolio .portfolio img {
		width: 40%;
		float: left;
		margin: 0 10px 10px 0;
	}
}

@media only screen and (max-width: 370px) {
	.gallery-item img {
		width: 120px !important;
		height: auto;
	}
	#portfolio .portfolio img {
		width: 30%;
		float: left;
		margin: 0 10px 10px 0;
	}
}