/* =Responsive (Mobile) Design

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

/* Added by josie to make tables responsive

-------------------------------------------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2
    
}


/* Added by josie to make tables responsive

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

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

	body {

	}



	.grid,

	.grid-right {

		display: block;

		float: none;

		width: 100%;

		margin-right: 0;

	}



	.copyright,

	.scroll-top,

	.powered {

		float: left;

	}



	#featured-image .fluid-width-video-wrapper {

		margin: 20px 0 0 0;

	}



	.front-page  #widgets {

		margin-top: 40px;

	}



	.top-widget,

	.front-page  .top-widget {

		margin-top: 0 !important;

	}



	.hide-desktop {

		display: block;

	}



	.show-desktop {

		display: none;

	}



	.hide-980 {

		display: none;

	}



	.show-980 {

		display: block;

	}

}



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

	body {

	}



	#logo {

		float: none;

		margin: 0;

		text-align: center;

	}



	.grid,

	.grid-right {

		float: none;

	}



	#featured-image .fluid-width-video-wrapper {

		margin: 20px 0 0 0;

	}



	.top-widget {

		float: none;

		position: relative;

		width: auto;

		margin: 0 auto 10px auto;

		text-align: center;

	}



	.top-widget .widget-title h3 {

		text-align: center;

	}



	.js .sub-header-menu {

		display: none;

	}



	.js .main-nav {

		clear: both;

		position: relative;

		margin: 0 auto;

		background-color: #585858;

		background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));

		background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);

		background-image: -moz-linear-gradient(top, #585858, #3d3d3d);

		background-image: -ms-linear-gradient(top, #585858, #3d3d3d);

		background-image: -o-linear-gradient(top, #585858, #3d3d3d);

		background-image: linear-gradient(top, #585858, #3d3d3d);



		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);

	}



	.js .main-nav .menu {

		display: none;

		position: absolute;

		z-index: 1000;

		top: 30px;

		width: 100%;

	}



	.js .main-nav .menu ul {

		margin-top: 1px;

	}



	.js .main-nav .menu li {

		float: none;

		border: none;

		background-color: #fff;

	}



	.js .main-nav .menu li a {

		height: 45px;

		padding: 0 15px;

		border: none;

		border-bottom: 1px solid #f5f5f5;

		color: #444;

		text-shadow: none;

		font-size: 13px;

		font-weight: normal;

		line-height: 45px;

		text-align: left;

		cursor: pointer;

	}



	.js .main-nav .menu li.current_page_item,

	.js .menu .current_page_item a,

	.js .menu .current-menu-item a {

		background-color: #f5f5f5;

	}



	.js .main-nav .menu li li:hover {

		background: none !important;

	}



	.js .main-nav .menu li li a {

		position: relative;

		padding: 0 10px 0 30px;

	}



	.js .main-nav .menu li li li a {

		position: relative;

		padding: 0 10px 0 40px;

	}



	.js .main-nav .menu li a:hover,

	.js .main-nav .menu li li a:hover {

		background-color: #f5f5f5 !important;

		background-image: none;



		filter: none;

	}



	.js .main-nav .menu li li a::before {

		position: absolute;

		top: 0;

		left: 20px;

		content: "\2013";

	}



	.js .main-nav .menu li li li a::before {

		position: absolute;

		top: 0;

		left: 20px;

		content: "\2013";

	}



	.js .main-nav .menu li li li a::after {

		position: absolute;

		top: 0;

		left: 30px;

		content: "\2013";

	}



	.js .main-nav .menu li ul {

		visibility: visible;

		position: static;

		background-color: #fff;

	}



	.js .main-nav .menu ul {

		min-width: 0;

	}



	.js .main-nav #responsive_current_menu_item {

		display: block;

		padding: 5px 40px 5px 10px;

		color: #fff;

		font-weight: 700;

		cursor: pointer;

	}



	.js .main-nav a#responsive_menu_button {

		display: block;

		position: absolute;

		top: 0;

		left: 100%;

		width: 23px;

		height: 30px;

		margin-left: -30px;

		background: url("../images/select-icons.png") 0 5px no-repeat;

		cursor: pointer;

	}



	.js .main-nav a#responsive_menu_button.responsive-toggle-open {

		background: url("../images/select-icons.png") 0 -46px no-repeat;

	}



	.top-menu,

	.footer-menu li {

		float: none;

		font-size: 11px;

		text-align: center;

	}



	#author-meta {

		padding: 20px;

	}



	#wrapper .gallery .gallery-item {

		max-width: 100%;

	}



	.hide-650 {

		display: none;

	}



	.show-650 {

		display: block;

	}



	.hide-mobile {

		display: none;

	}



	#footer {

		text-align: center;

	}



	#footer .social-icons {

		padding-bottom: 10px;

		text-align: center;

	}

}



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

	body {

	}



	#logo {

		float: none;

		text-align: center;

	}



	.grid,

	.grid-right {

		float: none;

	}



	#featured-image .fluid-width-video-wrapper {

		margin: 20px 0 0 0;

	}



	.featured-title {

		padding: 40px 20px 0 20px;

		font-size: 40px;

	}



	.featured-subtitle {

		font-size: 24px;

	}



	.navigation .next,

	.navigation .previous {

		display: block;

		margin: 0 auto;

		text-align: center;

	}



	.menu ul,

	.menu li,

	.top-menu,

	.footer-menu li,

	.sub-header-menu li {

		float: none;

		text-align: center;



		text-rendering: optimizeSpeed;

	}



	#wrapper .gallery .gallery-item {

		float: none;

	}



	.hide-480 {

		display: none;

	}



	.show-480 {

		display: block;

	}



	#footer {

		text-align: center;

	}



	#footer .social-icons {

		text-align: center;

	}

}



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

	body {

	}



	#featured p {

		font-size: 12px;

		line-height: 1.5em;

	}



	.featured-title {

		font-size: 35px;

	}



	.featured-subtitle {

		font-size: 15px;

	}



	.call-to-action a.button {

		padding: 7px 17px;

		font-size: 14px;

	}



	.hide-320 {

		display: none;

	}



	.show-320 {

		display: block;

	}

}



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

	body {

	}



	#featured p {

		font-size: 11px;

		line-height: 1.5em;

	}



	.featured-title {

		font-size: 20px;

	}



	.featured-subtitle {

		font-size: 11px;

	}



	.call-to-action a.button {

		padding: 5px 15px;

		font-size: 12px;

	}



	.top-widget area,

	.top-widget select,

	.top-widget textarea,

	.top-widget input[type="text"],

	.top-widget input[type="password"],

	.top-widget input[type="email"] {

		width: 75%;

	}



	.widget-title h3,

	.widget-title-home h3 {

		height: 13px;

		font-size: 14px;

		line-height: 13px;

		text-align: left;

	}



	.hide-240 {

		display: none;

	}



	.show-240 {

		display: block;

	}

}