/* Mobile Portrait View */

.main-nav ul li a:hover {
	text-decoration: none;
}

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

	* {

		box-sizing: border-box;
	}

	/* Header Css */
	#topbar {
		padding: 10px 0;
	}
	.top-inner {
		width: 95%;
	}
	.top-right, .top-left {
		float: none;
		text-align: center;
		margin-left: 0;
	}
	.top-right p {
		float: none;
		text-align: center;
	}

	#topbar .top-left p {
		float: none;
		line-height: 30px;
	}

	#header {
		width: 100%;
		padding: 0;
		position: inherit !important;
		margin-top: 0;
	}

	.header-inner {
		width: 95%;
		padding-bottom: 0;
		border-bottom: none;
	}

	#header .logo {
		text-align: center;
		position: relative;
		top: 0;
	}

	.toggle {
		display: block;
	}
	.toggle a {
		width: 100%;
		color: #ffffff;
		background: url(../images/mobile_nav_right.png) no-repeat right center #a476d8;
		padding: 10px 10px;
		margin-top: 20px;
		font-size: 16px;
	}
	.toggle a:hover {
		color: #ffffff !important;
	}
	.toggle a.active {
		color: #ffffff;
	}
	.main-nav {
		display: none;
	}
	.main-nav {
		float: none;
		margin: 0;
		position: relative;
		overflow-x: hidden;
	}
	.main-nav ul {
		background: #a476d8;
		color: #000;
		width: 100%;
		float: none !important;
		margin-left: 0;
	}

	.main-nav ul li {

		border-top: 1px #303030 solid;
		display: block;
		float: none;
		text-align: left;
	}

	.main-nav ul li a {

		padding: 5px 10px;
		display: block;
		color: #ffffff !important;
	}

	.main-nav ul li ul, .nav ul li ul ul {

		display: block !important;
	}

	#header .header-inner .main-nav ul li:hover ul {

		background: none;
	}

	.main-nav ul li ul li a:before {

		content: "\00BB \00a0";
	}

	.main-nav ul li ul li a {

		padding-left: 20px !important;
	}

	.main-nav ul li ul li ul li a {

		padding-left: 30px !important;
	}

	/* ------ Extra ------ */

	#sitemain iframe {

		max-width: 100%;
		height: auto;
	}

	/* --------- Pages ------- */

	.content-area {

		width: 95%;
		margin: 0 auto;
		padding: 50px 0;
	}

	.site-main {

		width: 100%;
		margin: 0;
		padding: 0;
		float: none;
	}

	#sidebar {

		width: auto;
		margin: 60px 0 0;
		padding: 0;
		float: none;
	}

	.nivo-directionNav a {

		top: 36% !important;
	}

	section {

		padding: 0;
	}

	.pagearea-inner {

		position: inherit;
		top: 0;
		margin-top: 20px;
	}

	.services-box {

		width: 100%;
		margin: 0 0 20px;
		border-right: none;
	}

}

/* Mobile Landscape View */

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

	* {

		box-sizing: border-box;
	}

	#slider {

		margin-top: 20px;
	}

	#slider .top-bar {

		text-align: center;
	}
	.container {
		/*width: 95%;*/
	}

	/* Header Css */

	#topbar {
		padding: 10px 0;
	}

	.top-inner {
		width: 95%;
	}

	.top-right, .top-left {
		float: none;
		text-align: center;
		margin-left: 0;
	}

	.top-right p {
		float: none;
		text-align: center;
	}

	#topbar .top-left p {
		float: none;
		line-height: 30px;
	}

	#header {
		width: 100%;
		padding: 0;
		position: inherit !important;
		margin-top: 0;
	}

	.header-inner {
		width: 95%;
		padding-bottom: 0;
		border-bottom: none;
	}

	#header .logo {
		text-align: center;
		position: relative;
		top: 0;
	}

	.toggle {
		display: block;
	}

	.toggle a {
		width: 100%;
		color: #ffffff;
		background: url(../images/mobile_nav_right.png) no-repeat right center #a476d8;
		padding: 10px 10px;
		margin-top: 20px;
		font-size: 16px;
	}

	.toggle a:hover {
		color: #ffffff !important;
	}

	.toggle a.active {
		color: #ffffff;
	}

	.main-nav {
		display: none;
	}

	.main-nav {
		float: none;
		margin: 0;
		position: relative;
		overflow-x: hidden;
	}

	.main-nav ul {
		background: #a476d8;
		color: #000;
		width: 100%;
		float: none !important;
		margin-left: 0;
		padding-left: 0;
	}

	.main-nav ul li {
		border-top: 1px #835eac solid;
		display: block;
		float: none;
		text-align: left;
	}

	.main-nav ul li a {

		padding: 5px 10px;
		display: block;
		color: #ffffff !important;
	}

	.main-nav ul li ul, .nav ul li ul ul {

		display: block !important;
	}

	#header .header-inner .main-nav ul li:hover ul {

		background: none;
	}

	.main-nav ul li ul li a:before {

		content: "\00BB \00a0";
	}

	.main-nav ul li ul li a {

		padding-left: 20px !important;
	}

	.main-nav ul li ul li ul li a {

		padding-left: 30px !important;
	}

	/* ------ Extra ------ */

	#sitemain iframe {

		max-width: 100%;
		height: auto;
	}

	/* --------- Pages ------- */

	.content-area {

		width: auto;
		margin: 0 20px;
		padding: 50px 0;
	}

	.site-main {

		width: auto;
		margin: 0;
		padding: 0;
		float: none;
	}

	#sidebar {

		width: auto;
		margin: 60px 0 0;
		padding: 0;
		float: none;
	}

	.nivo-directionNav a {

		top: 36% !important;
	}

	.pagearea-inner {

		position: inherit;
		top: 0;
		margin-top: 20px;
	}

	section {

		padding: 0;
	}

	h2.section_title {

		font-size: 30px;
	}

	.services-box {

		width: 100%;
		margin: 0 0 20px;
		border-right: none;
	}

}

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

	h2.section-title {

		line-height: 48px;
		font-size: 35px !important;
	}

	.cat_comments {

		height: auto;
	}

}

/* Tablet View */

@media screen and (max-width: 999px) and (min-width: 720px) {

	* {

		box-sizing: border-box;
	}

	.pagearea-inner {

		top: -90px !important;
	}

	#slider {

		margin-top: 20px;
	}

	.nivo-caption {

		width: 70% !important;
		bottom: 18% !important;
		background-color: transparent !important;
	}

	#slider .top-bar h2 {

		font-size: 22px;
	}

	#slider .top-bar p {

		font-size: 11px;
		line-height: normal;
	}

	.container {

		/* width: 95%; */

	}

	#topbar {

		padding: 10px 0;
	}

	.top-inner {

		width: 95%;
	}

	.top-right, .top-right .social-icons {

		float: right;
		margin-left: 0;
	}

	.top-right p {

		float: none;
		text-align: center;
	}

	#topbar .top-left p {

		float: none;
		line-height: 30px;
	}

	#header {

		width: 100%;
		padding: 0;
		position: inherit !important;
		margin-top: 0;
	}

	.header-inner {

		width: 95%;
		padding-bottom: 0;
		border-bottom: none;
	}

	#header .logo {

		text-align: center;
		position: relative;
		top: 0;
	}

	.toggle {

		display: block;
	}

	.toggle a {

		width: 100%;
		color: #ffffff;
		background: url(../images/mobile_nav_right.png) no-repeat right center #a476d8;
		padding: 10px 10px;
		margin-top: 20px;
		font-size: 16px;
	}

	.toggle a:hover {

		color: #ffffff !important;
	}

	.toggle a.active {

		color: #ffffff;
	}

	.main-nav {

		display: none;
	}

	.main-nav {

		float: none;
		margin: 0;
		position: relative;
		overflow-x: hidden;
	}

	.main-nav ul {

		background: #a476d8;
		color: #000;
		width: 100%;
		float: none !important;
		margin-left: 0;
	}

	.main-nav ul li {

		border-top: 1px #835eac solid;
		display: block;
		float: none;
		text-align: left;
	}

	.main-nav ul li a {

		padding: 5px 10px;
		display: block;
		color: #ffffff !important;
	}

	.main-nav ul li ul, .nav ul li ul ul {

		display: block !important;
	}

	#header .header-inner .main-nav ul li:hover ul {

		background: none;
	}

	.main-nav ul li ul li a:before {

		content: "\00BB \00a0";
	}

	.main-nav ul li ul li a {

		padding-left: 20px !important;
	}

	.main-nav ul li ul li ul li a {

		padding-left: 30px !important;
	}

	/* --------- Pages ------- */

	.content-area {

		width: auto;
		margin: 0 20px;
		padding: 50px 0;
	}

	.site-main {

		width: 60%;
		margin: 0;
		padding: 0;
		float: left;
	}

	#sidebar {

		width: 35%;
		margin: 0;
		padding: 0;
		float: right;
	}

	section {

		padding-bottom: 0;
	}

	.services-box {

		width: 33%;
		margin: 0 0 20px;
		border-right: none;
	}

}

@media screen and (min-width: 1000px) {

	.sitenav ul li ul li {

		display: block;
		position: relative;
		float: none;
	}

	.sitenav ul li ul li a {

		display: block;
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px #313131 solid;
	}

	.site-main {

		width: 70%;
	}

}

@media screen and (min-width: 1000px) and (max-width: 1159px) {

	.top-inner, .header-inner, .container {

		/*width: 95%;*/

	}

	.sitenav ul {

		font-size: 10px;
	}

	.sitenav ul li:hover > ul {

		top: 83px;
	}

	.nivo-caption {

		top: 17% !important;
		height: auto !important;
	}

	.cat_comments {

		left: 35px;
		width: 25%;
	}

	.content-area {

		width: 95%;
	}

	#navigation {

		width: auto;
		padding: 10px 0;
	}

	.nivo-caption {

		width: 60% !important;
		background-color: transparent !important;
		overflow: visible !important;
	}

	.services-box {

		padding: 0 15px 22px !important;
	}

}