/* Small screens only */
@media only screen and (max-width: 40em) {
	.padding-top-2em-small { padding-top: 2em; }
	.expand-on-small { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; margin-bottom: 0.225em !important;  }
	.tabs-content.vertical>.content { padding: 1rem 0 !important; }
	blockquote.testimonial { border-left: none; }
	.noscroll-small-only { overflow: hidden; }
	.reveal-modal.popup.small { width: 100%; }
}

/* Medium and smaller */
@media only screen and (max-width: 64.063em) {
	.padding-top-2em-mobile { padding-top: 2em; }
	.noscroll-medium-down { overflow: hidden; }
	.left-off-canvas-menu,.right-off-canvas-menu {
		-webkit-backface-visibility: hidden;
		width: 15.625rem;
		top: 0;
		bottom: 0;
		position: fixed;
		overflow-x: hidden;
		overflow-y: auto;
		background: rgba(141,198,63,.98);
		z-index: 1001;
		box-sizing: content-box;
		/*transition: transform 500ms ease 0s;*/
		transition: left 500ms ease; /* Need to animate left instead of transform because position:fixed will not work with transform */
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	.left-off-canvas-menu *,.right-off-canvas-menu * { -webkit-backface-visibility: hidden; }
	.left-off-canvas-menu { 
		/*-webkit-transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate(-100%, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		left: 0;*/
		left: -15.625rem;
	}
	.move-right .left-off-canvas-menu { left: 0; }
	.right-off-canvas-menu {
		-ms-transform: translate(100%, 0);
		-webkit-transform: translate3d(100%, 0, 0);
		-moz-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		-o-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		right: 0;
	}

	.move-right > .inner-wrap {
/*	  -ms-transform: translate(15.625rem, 0);
	  -webkit-transform: translate3d(15.625rem, 0, 0);
	  -moz-transform: translate3d(15.625rem, 0, 0);
	  -ms-transform: translate3d(15.625rem, 0, 0);
	  -o-transform: translate3d(15.625rem, 0, 0);
	  transform: translate3d(15.625rem, 0, 0);*/
	  left: 15.625rem;
	}
	.move-right .exit-off-canvas {
	  -webkit-backface-visibility: hidden;
	  transition: background 300ms ease;
	  cursor: pointer;
	  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.08), 4px 0 5px rgba(0, 0, 0, 0.05);
	  display: block;
	  position: absolute;
	  background: rgba(255, 255, 255, 0.2);
	  border: none;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 1002;
	  -webkit-tap-highlight-color: transparent; }

	.move-left > .inner-wrap {
	  -ms-transform: translate(-15.625rem, 0);
	  -webkit-transform: translate3d(-15.625rem, 0, 0);
	  -moz-transform: translate3d(-15.625rem, 0, 0);
	  -ms-transform: translate3d(-15.625rem, 0, 0);
	  -o-transform: translate3d(-15.625rem, 0, 0);
	  transform: translate3d(-15.625rem, 0, 0); }
	.move-left .exit-off-canvas {
	  -webkit-backface-visibility: hidden;
	  transition: background 300ms ease;
	  cursor: pointer;
	  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08), 4px 0 5px rgba(0, 0, 0, 0.05);
	  display: block;
	  position: absolute;
	  background: rgba(255, 255, 255, 0.2);
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 1002;
	  -webkit-tap-highlight-color: transparent; }

	.offcanvas-overlap .exit-off-canvas {
	  -webkit-backface-visibility: hidden;
	  transition: background 200ms ease;
	  cursor: pointer;
	  display: block;
	  position: absolute;
	  background: rgba(255, 255, 255, 0.3);
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 1002;
	  -webkit-tap-highlight-color: transparent; }

	.topmenu { padding-top: 0; }
	.topmenu>ul { display: block; margin: 0; padding: 0; height: auto; margin: 2rem 0; text-align: right; }
	.topmenu>ul>li { display: block; margin: 0; padding: 0; border-bottom: solid 1px rgba(255,255,255,0.1); float: none; }
	.topmenu a { color: #111111 !important; padding: .85rem 2rem; text-transform: uppercase; font-size: 1.15rem; font-weight: 300; transition: all .2s ease; }
	.topmenu>ul>li>a.active { background: rgba(255,255,255,.1); font-weight: 300; color: #ffffff !important; }
	.topmenu a:hover { background: rgba(255,255,255,.1); color: #111111 !important; }
	.offcanvas-header { display: block; }
	ul.off-canvas-submenu.open { display: block; }
}

/* Medium screens and up */
@media only screen and (min-width: 40.063em) {
	h1.page-header { font-size: 2.125rem; }
	.left-block { padding: 0 5em 0 3em; }
	.right-block { padding: 0 3em 0 5em; }
	.medium-border-left { border-left: solid 1px #eeeeee; }
	.medium-border-right { border-right: solid 1px #eeeeee; }
	.gray .medium-border-left { border-color: #dddddd; }
	.gray .medium-border-right { border-color: #dddddd; }
	.features li { padding: 2em 3em; }
	.dashboard-service .header { font-size: 1.5em; }
	#clientarea-wrapper,#clientarea-topbar-inner { max-width: 95%; }
	.reveal-modal.responsive { width: 65%; max-width: 550px; }
	#clientarea-main .tabs dd.active a, .tabs .tab-title.active a { border-right: none; }
	.gutter-left-medium-up { margin-left: 1em; }
	#header2 { padding: 2em 0; }
	#flyout-content .header { font-size: 2.3125rem; }	
	.panel-label {
		border: solid 1px #eeeeee;
		border-top: 0;
		border-right: 0;
		position: absolute;
		right: 0;
		top: 0;
		padding: .25em .75em;
	}
	blockquote.alt1.right { width:425px; margin-left:2em }
	.right-sidebar-medium-up { float: right; border-width:5px;width:350px;margin-left:2em }
	#frontpage-callout { font-size: 1.375em; }
}

/* Medium only */
@media only screen and (min-width: 40.063em) and (max-width: 64.063em) {
	.reveal-modal.xlarge-on-medium, dialog.xlarge-on-medium { width: 90%; }
	.reveal-modal.large-on-medium, dialog.large-on-medium { width: 70%; }
	.reveal-modal.medium-on-medium, dialog.medium-on-medium { width: 60%; }
	.reveal-modal.small-on-medium, dialog.small-on-medium { width: 40%; }
	.reveal-modal.tiny-on-medium, dialog.tiny-on-medium { width: 30%; }
}

/* Large up */
@media only screen and (min-width: 64.063em) {
	h1.page-header { font-size: 2.3125rem; }
	h1.page-header.large { font-size: 2.8125rem; }
	#header { padding: 2rem 0 5rem 0; }
	#header-page { padding-top: 0; margin-top: 0; }
	#menu-toggle { display: none; }
	#frontnav { padding: 1rem 0; }
	#subnav { display: block; }
	#logosection, #menusection { padding-top: 4rem; padding-bottom: .5rem; }
	#logosection { border-right: solid 1px #eeeeee; padding-right: 2rem; }
	#menusection { padding-left: 2rem; }
	.topmenu.page a { color: inherit; line-height: 2; border-bottom: solid 3px transparent; transition: border-color .25s ease }
	.topmenu.page a:hover { border-bottom: solid 3px rgba(141,198,63,.25); }
	.topmenu.page a.active { border-bottom: solid; color: #8dc63f; }
	.horizontal-section { padding: 5em 0; }
	.padding-top-5em { padding-top: 5em; }
	.price-table { margin: 0; }
	.price-table.highlighted { position: relative; top: -20px; padding-top: 20px; padding-bottom: 20px; }
	.footer-vborder-large-up { border-left: solid 1px #cccccc; }
	.padding-left-4em-large-up { padding-left: 4em; }
	.padding-left-2em-large-up { padding-left: 2em; }
	.padding-right-2em-large-up { padding-right: 2em; }
	.circle-icon.large-onlarge { font-size: 4.75em; }
	.large-border-left { border-left: solid 1px #dddddd; }
	.large-border-right { border-right: solid 1px #dddddd; }
	.gray .large-border-right { border-color: #dddddd; }
	.gray .large-border-left { border-color: #dddddd; }
	.features-block li { padding: 0 2.625rem 3.25rem; }
	#flyout-content { width: 500px; left: -520px; text-align: left; padding: 5em 3em; }
	#flyout-overlay {
		-webkit-backface-visibility: hidden;
		transition: background 200ms ease;
		cursor: pointer;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.08), 4px 0 5px rgba(0, 0, 0, 0.05);
		display: block;
		border: none;
		position: absolute;
		background: rgba(255, 255, 255, 0.2);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		-webkit-tap-highlight-color: transparent;
	}
	.wizard-steps { padding: 3rem 3.5rem; }
	.wizard-steps.horizontal .stepsarrow { top: 50%; right: 0; margin-top: -.875em; margin-right: -1.215em; }
	.wizard-steps.horizontal .stepsarrow>.fi-arrow-right { display: inline-block; }
	.wizard-steps.horizontal .stepsarrow>.fi-arrow-down { display: none; }
	.horizontal-section .stepsarrow { display: block !important; }
	.reveal-modal.responsive { width: 40%; }
	#testimonials .slick-prev { left: -140px; right: auto; }
	#testimonials .slick-next { left: auto; right: -140px; }
	#clientarea-left-pane { padding-right: 350px; }
	#clientarea-right-pane { 
		position: absolute;
		top: 0;
		right: 0;
		width: 350px;
		height: 100%;
		border-left: solid 1px #ffffff;
		box-shadow: -1px 0 0 #eeeeee;
	}
	ul.off-canvas-submenu { display: none !important; }
	#header-page.sticky { position: fixed; width: 100%; background: #ffffff; top: 0; margin-top: -30px; z-index: 100; }
	section.sticky { margin-top: 100px; }
	.half-width-large-up { width: 50%; }
	#frontpage-callout { font-size: 1.5em; }
	#themes-featured .theme-container { opacity: 0.5; }
}
/* Extra large (1440px+) */
@media only screen and (min-width: 90.063em) { 
	#clientarea-wrapper,#clientarea-topbar-inner { max-width: 1400px; }
/*	#clientarea-right-pane { width: 450px; }
	#clientarea-left-pane { padding-right: 450px; }
	#clientarea-search { width: 370px; }*/
	.reveal-modal.responsive { width: 30%; }
}