/**************************/
/* Mobile */
/**************************/

/* IPHONE 2-4S */ 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	html {margin-top: 0 !important}
	#video-container-0 {background-image: url(images/video-bg.jpg); background-repeat: no-repeat; background-size: cover;}
	video {display: none !important}
}

.page-template-single-php .page-content h1 {padding-left: 0 !important}


.author-bio {padding: 20px; background-color: #e3e3e3; position: relative; display: block;}
.author-bio h3 {font-style: normal}
.author-bio img {margin: 10px 20px 30px 0; width: 150px; height: auto}


/**************************/
/* RESPONSIVE */
/**************************/

@media screen and (max-width: 1024px){
	#logo {width: 70%}
	#nav #responsive-menu-button {background: transparent}
	span.responsive-menu-inner, span.responsive-menu-inner::before, span.responsive-menu-inner::after {background-color: rgba(232,145,12,1)}
	#responsive-menu {display: block}
	#nav li {margin: 0}
	#click-menu {right: 10px !important; top: 25px !important; background-color: #486890 !important; color: #242424; background: transparent !important; position: fixed !important; z-index: 500; display: block !important	}	
	#click-menu.click-menu-active {background-color: transparent !important}
	#click-menu .threeLines .line {height: 3px !important; background-color: #486890 !important; color: #486890 !important; background: #486890 !important}
	#reponsive-menu .responsive-menu li li li a {padding-left: 5% !important}
	#responsive-menu ul ul, #responsive-menu ul ul ul {padding-left: 0 !important}
	#header-wrap.not-transparent #click-menu .threeLines {color: #415a68 !important}
	#header-wrap.not-transparent #click-menu .threeLines .line {background-color: #415a68 !important}

	#lower-body #intro {background-color: #fff; width: 80%; padding: 20px 10%;}
	#lower-body h2 {margin-top: 0}

	#lower-2 {height: 100vh !important}

	h2.headline {font-size: 1.7em !important; line-height: 2em; padding: 30px 30px 5px !important; background-position: center bottom !important}
	#content h1 {font-size: 30px; line-height: 36px; width: 90% !important}
	
	#content h1 {font-size: 1.6em}
	#content h1.h2, #content h2 {font-size: 1.4em}
	#content p {font-size: 1.2em}
	#content img {width: auto; height: auto}
	
	#footer {}
	#footer .hours, #footer .map, #footer .connect {width: 90% !important; margin: 0 auto !important; float: none !important; display: block}
	#footer .map iframe {width: 100%}
	#footer .logo {margin-top: 40px}
	#footer .copyright {padding-bottom: 30px; width: 90%; margin: 0 auto}

	
	#content p.intro {font-size: 19px !important; width: 90% !important}
	#content .alignleft, #content .alignright {}
	.alignleft img {width: 100% !important; height: auto !important; float: none; display: block; }
	.alignright img {width: 100% !important; height: auto !important; float: none; display: block;}
	#lower-2 .col-wrap {width: 100% !important; float: none !important; display: block;}
	#sidebar {display: none !important}
	.page-content {width: 100% !important;}
	.single h1.headline {font-size: 36px !important}
	.entry-content img {height: auto !important}	
	#footer {}
	#footer .menu {display: none !important}
	
}

@media screen and (min-width: 769px) and (max-width: 1024px){
	html {overflow-x: hidden !important}
	body {width: 100% !important; overflow-x: hidden !important; }
	#header-wrap {padding: 0 !important; width: 100%}
	#header {margin: 0 !important; width: 100%}
	.menu-main-menu-container {display: none !important; margin-right: 0 !important}
	#logo {margin-left: 10px !important; float: left !important;}
	#responsive-menu {}
	#responsive-menu ul li ul.sub-menu {margin-bottom: 0 !important}
	#responsive-menu .menu-item-24 {display: none !important}
	#header-top {display: none !important}
	#header-wrap #click-menu .threeLines {color: #fff !important}
	#header-wrap #click-menu .threeLines .line {background: #fff !important}
	#header-wrap.not-transparent #click-menu .threeLines {color: #415a68 !important}
	#header-wrap.not-transparent #click-menu .threeLines .line {background-color: #415a68 !important}
	#click-menu {right: 20px !important; top: 25px !important; background-color: transparent !important; color: #242424; background: transparent !important; position: relative; z-index: 300; display: block !important	}	
	#click-menu.click-menu-active {background-color: transparent !important}
	#click-menu .threeLines .line {height: 3px !important}
	#home-content {width: 100% !important}
	#featured {}
	#featured .content {}
	#featured li {background-size: cover !important; height: 100vh !important; overflow: hidden !important}
	#home-content .featured-text {}	
	#home-content .featured-text iframe {width: 100% !important; display: none !important}
	#home-content .featured-text h1 {margin-top: 40px !important}
	#home-content .featured-text h2 {font-size: 55px !important; padding: 0 10% !important; position: relative; width: 80% !important; margin: 0 !important}
	#home-content .featured-text a {position: relative; margin-top: 10px !important}
	#lower-2 {height: 350px !important; min-height: 350px !important}
	#lower-2 h2 {font-size: 50px !important; width: 90% !important; text-align: center; margin: 0 auto}
	#lower-2 p {font-size: 30px !important; width: 90% !important}
	#lower-3 {height: 600px !important}
	#lower-3 .portfolio .left {width: 100% !important; display: block; float: none !important; position: relative; background-size: cover !important}
	#lower-3 .portfolio .left .content {top: 40px}
	#lower-3 a.link {background-color: transparent; color: #363636 !important; text-align: center; padding: 10px 30px !important; text-decoration: none; position: relative; top: 20px; font-weight: normal !important; border-radius: 5px; border: 1px solid #363636 !important; display: inline-block; text-decoration: none !important; font-size: 18px}
	#lower-body a.link:hover {background-color: #363636; color: #fff; border: 1px solid #363636}
	#lower-3 p a {padding: 0 !important}
	#lower-3 .portfolio .top-right, #lower-3 .portfolio .bottom-right {display: none}
	#video-container-0 {position: absolute; top: 0 !important; background-size: cover; height: 440px !important}
}


@media screen and (min-width : 768px) and (max-width : 1024px) {
	html {overflow-x: hidden !important}
	body {width: 100% !important; overflow-x: hidden !important; }
	#header-wrap {padding: 0 !important; width: 100%}
	#header {margin: 0 !important; width: 100%}
	.menu-main-menu-container {display: none !important; margin-right: 0 !important}
	#logo {margin-left: 10px !important; float: left !important}
	#responsive-menu {}
	#responsive-menu .menu-item-24 {display: none !important}
	#nav-wrap #nav ul ul {position: relative; margin-left: 0}
	#header-top {display: none !important}
	#click-menu {right: 20px !important; top: 25px !important}
	#click-menu.click-menu-active {background-color: transparent !important}
	#home-content {width: 100% !important}
	#featured {}
	#featured .content {padding-top: 100px}
	#post-1 {background-size: contain !important; height: 100vh !important}

	#home-content .featured-text {position: relative; width: 90% !important; margin: 0 auto}	
	#home-content .featured-text h1 {font-size: 4vh; line-height: 4vh; margin-top: 1vh !important;}
	#home-content .featured-text iframe {width: 100% !important; display: none !important}
	#home-content .featured-text h2 {font-size: 70px !important; padding: 0 10% !important; position: relative; width: 80% !important; margin: 0 !important}
	#home-content .featured-text a {position: relative; margin-top: 20px !important; font-size: 4vh !important; display: block}

	#featured #post-1 {background-size: cover !important; background-position: center center !important}
	#post-1 .featured-text .featured-video {display: block !important; width: 60%; height: auto}
	#featured h2 br {display: none}
	#post-1 .featured-text img {width: 90%; height: auto }
	
	#lower-1a .col {width: 29%}

	#lower-2 {height: 100vh !important; min-height: 100vh !important; padding-top: 40px !important }
	#lower-2 h2 {font-size: 30px !important}
	#lower-2 p {font-size: 18px !important; width: 90%; margin: 20px auto 0}
	#lower-2 a.link {top: -10px !important}

	#lower-3 {height: 110vh !important}
	#lower-3 h3 {width: 100%; margin: 0 auto; padding: 7px 0 !important;}
	#lower-3 .wpcf7 {width: 99% !important; margin: 0 auto}
	#lower-3 .wpcf7 .row .input {display: block; position: relative; width: 90%; display: block; margin: 0 auto}
	#lower-3 .wpcf7 .wpcf7-submit {float: none !important; margin: 0 auto; display: block}
	
	#lower-4 {margin-top: 80px}
	#lower-4 h2 {width: 100%; margin: 0 !important; font-size: 5vh; margin-top: 40px !important}
	#lower-4 .col {width: 46%}
	
	#lower-5 li {list-style-type: none}
	
	#sidebar {display: none !important}
	.page-content {width: 100% !important;}
	.single h1.headline {font-size: 36px !important}
	#recaptcha_table {position: relative; left: -40px}
	.entry-content img {height: auto !important}	
	#footer {padding: 20px 0; width: 100%}
	#footer .menu {display: none !important}
}

/* IPHONE 6 */ 

@media screen and (max-width : 667px) {
	html {overflow-x: hidden !important}
	body {width: 100% !important; overflow-x: hidden !important; }
	#header-wrap {padding: 0 !important; width: 100%}
	#header {margin: 0 !important; width: 100%; height: 66px}
	.menu-main-menu-container {display: none !important; margin-right: 0 !important}
	#logo {margin-left: 10px !important; float: left !important}
	#responsive-menu {}
	#responsive-menu .menu-item-24 {display: none !important}
	#nav-wrap #nav ul ul {position: relative; margin-left: 0}	
	#nav-wrap #nav ul ul li {padding: 0 !important; width: 100%}	
	#nav-wrap #nav ul ul li a {padding-left: 0 !important; height: 40px; border: none}		
	#header-top {display: none !important}
	#click-menu {right: 20px !important; top: 0px !important; background-color: transparent !important; color: #242424; background: transparent !important}
	#click-menu.click-menu-active {background-color: transparent !important}
	#click-menu .threeLines .line {background-color: #486890 !important; color: #486890 !important; background: #486890 !important}
	#home-content-wrap {padding-top: 66px}
	#home-content {width: 100% !important}
	#featured {height: 100vh}
	#featured #post-1 {background-position: -110px center !important}
	#featured-wrap #featured li .content {padding-top: 10vh; margin: 0 auto; width: 90%}
	.featured-text {margin: 0 auto; position: relative}
	#post-1 {background-size: cover !important; background-repeat: no-repeat; background-position: -110px center}
	#home-content .featured-text {}	
	#home-content .featured-text iframe {width: 100% !important; display: none !important}
	#home-content .featured-text h1 {font-size: 20px; line-height: 28px !important; width: 90% !important; margin: 0 auto !important}
	#home-content .featured-text h2 {font-size: 50px !important; padding: 0 !important; position: relative; width: 80% !important; margin: 0 auto !important}
	#home-content .featured-text h2.h1 {font-size: 40px !important; line-height: 46px !important; margin-top: 20px !important}
	#home-content .featured-text a {position: relative; margin-top: 20px !important}
	#video-container-0 {position: absolute; top: 0 !important; background-size: cover; height: 440px !important}

	#intro h2 {font-size: 1.5em}

	#lower-1a .col {width: 90%; margin: 0 auto; text-align: center}

	#lower-2
	#lower-2 hr {margin: 0 auto !important; width: 40% !important}
	#lower-3 .latest-news .col {width: 100%}
	#lower-3 {margin-top: 80px !important}
	#lower-3 a {padding: 10px 20px !important; border: none !important}
	#lower-3 .latest-news .col h2, #lower-3 .latest-news .col h2 a {text-align: center}

	#lower-5 .testimonials {width: 90%; margin: 0 auto}

	#content h1 {font-size: 1.61em !important}
	#content h1.h2, #content h2 {font-size: 1.2em !important}
	#content p {font-size: 1.1em !important}
	#content p.intro {width: 100% !important}
	
	#content img {width: 100%; height: auto}
	
	#sidebar {display: none !important}
	.page-content {width: 100% !important;}
	.single h1.headline {font-size: 36px !important}
	.entry-content img {height: auto !important}	
	#footer {padding: 20px 0; width: 100%}
	#footer img {width: 90%; margin: 0 auto}
	#footer .menu {display: none !important}	

}

/* IPHONE 5 */ 
@media screen and (max-width: 568px) {
	#click-menu {top: 25px !important}
	#home-content .featured-text {}	
	#home-content .featured-text h1 {font-size: 20px; line-height: 28px !important; width: 90% !important; margin: 0 auto !important}
	#home-content .featured-text h2 {font-size: 30px; padding: 0 10% !important; position: relative; width: 80% !important; margin: 0 !important}
	#home-content .content {top: 40px !important}
	#home-content .featured-text a.link {font-size: 20px !important; top: 0; margin-top: 10px}
	#lower-2 a.link {top: -10px !important}
	#lower-3 {height: 600px !important}
	#lower-3 .portfolio .left {width: 100% !important; display: block; float: none !important; position: relative; background-size: cover !important}
	#lower-3 .portfolio .left .content {top: 40px}
	#lower-3 a.link {background-color: transparent; color: #363636 !important; text-align: center; padding: 10px 30px !important; text-decoration: none; position: relative; top: 20px; font-weight: normal !important; border-radius: 5px; border: 1px solid #363636 !important; display: inline-block; text-decoration: none !important; font-size: 18px}
	#lower-body a.link:hover {background-color: #363636; color: #fff; border: 1px solid #363636}
	#lower-3 h3 {padding: 0 2% !important}
	#lower-3 hr {width: 40% !important}
	#lower-3 p {padding: 0 2% !important; width: 90% !important; margin: 0 auto !important}
	#lower-3 p a {padding: 0 !important}
	#lower-3 .portfolio .top-right, #lower-3 .portfolio .bottom-right {display: none}

	#content img {width: 100%}
	#content h1 {font-size: 1.6em; line-height: 1.4em}
	#content p.intro {width: 100% !important}
	h2.headline {line-height: 1.1em; }
	#content .features {display: none !important}
	#content.what-we-do .alignright {float: right !important; width: 35% !important}
	#content.what-we-do .alignright img {display: block !important}
	#content.what-we-do .alignright p {font-size: 0.8em !important; line-height: 1em !important}
	
	@media screen and (width: 568px){
		#home-content .featured-text h1 {font-size: 18px; margin-top: 10px !important}
		#lower-2 {height: 200px !important; min-height: 200px !important}
		#lower-2 h2 {font-size: 36px !important; margin-bottom: 0 !important}
		#lower-2 hr {margin-bottom: 7px !important; margin-top: 0 !important}
		#lower-2 p {font-size: 20px !important; width: 100% !important}
		#lower-3 {height: 400px !important}
		#lower-3 h2 {font-size: 40px !important}
		#lower-3 h3 {font-size: 18px !important}
		#lower-3 .portfolio .left {background-position: 0 0 !important}
		#lower-3 .portfolio .left .content {top: 60px !important}
		#content p.intro {width: 100% !important}
		#content.what-we-do .alignright {float: right !important; width: 35% !important}
		#content.what-we-do .alignright p {font-size: 0.8em !important}
		#content .features {display: none !important}
	}
}


/* IPHONE 2-4S */ 
@media screen and (min-width: 320px) and (max-width: 480px) {
	html {overflow-x: hidden !important}
	body {width: 100% !important; overflow-x: hidden !important; }
	#header-wrap {padding: 0 !important; width: 100%}
	#header {margin: 0 !important; width: 100%}
	.menu-main-menu-container {display: none !important; margin-right: 0 !important}
	#logo {margin-left: 10px !important; float: left !important}
	#responsive-menu-title {font-size: 18px !important}
	#responsive-menu .menu-item-24 {display: none !important}
	#responsive-menu li a {font-size: 16px}
	#header-top {display: none !important}
	#click-menu {right: 20px !important; top: 30px !important}
	#click-menu.click-menu-active {background-color: transparent !important}
	#home-content {width: 100% !important}

	#home-content .featured-text {}	
	#home-content .featured-text h1 {font-size: 3vh; line-height: 3.3vh !important; width: 100% !important; margin: 20px auto 0 auto !important}
	#home-content .featured-text h2 {font-size: 30px !important; padding: 0 0 !important; position: relative; width: 100% !important; margin: 0 auto !important}
	#home-content .featured-text a.link {margin-top: 10px !important}

	#featured #post-1 {height: 100vh !important; background-position: -110px center}
	#post-1 .featured-text .featured-video {display: none !important}
	#post-1 .featured-text img {width: 90%; height: auto }
	#featured a.link {font-size: 24px !important}
	#lower-2 {height: 100vh !important; min-height: 100vh !important; padding-top: 40px !important }
	#lower-2 h2 {font-size: 30px !important}
	#lower-2 p {font-size: 18px !important; width: 90%; margin: 20px auto 0}
	#lower-2 a.link {top: -10px !important}

	#lower-3 {height: 110vh !important}
	#lower-3 h3 {width: 100%; margin: 0 auto; padding: 7px 0 !important;}
	#lower-3 .wpcf7 {width: 99% !important; margin: 0 auto}
	#lower-3 .wpcf7 .row .input {display: block; position: relative; width: 90%; display: block; margin: 0 auto}
	#lower-3 .wpcf7 .wpcf7-submit {float: none !important; margin: 0 auto; display: block}
	
	#lower-4 {margin-top: 80px}
	#lower-4 h2 {width: 100%; margin: 0 !important; font-size: 5vh; margin-top: 40px !important}
	#lower-4 .procedure {width: 90% !important}
	#lower-4 .procedure img {width: 100% !important; height: auto}
	
	#footer {}
	#footer .hours, #footer .map, #footer .connect {width: 90% !important; margin: 0 auto !important; float: none !important; display: block}
	#footer .map iframe {width: 100%}
	#footer .logo {margin-top: 40px}
	#footer .copyright {padding-bottom: 30px; width: 90%; margin: 0 auto}
	
	#sidebar {display: none !important}

	#content img {width: 100%}
	#content h1 {font-size: 1.3em; line-height: 1.3em; margin: 0; width: 100% !important	}
	h2.headline {line-height: 1.1em; }

	.page-content {width: 100% !important;}
	.single h1.headline {font-size: 36px !important}
	.entry-content img {height: auto !important}	
	#footer .menu {display: none !important}

	#content.what-we-do .alignright {float: right !important; width: 35% !important}
	#content.what-we-do .alignright img {display: block !important}
	#content.what-we-do .alignright p {font-size: 0.8em !important; line-height: 1em !important}
	
	

	@media screen and (width: 480px){
		#home-content .featured-text {top: 30px !important}
		#home-content .featured-text h2.h1 {font-size: 34px !important}
		#home-content .featured-text h1 {margin-top: 10px !important}
		#home-content .featured-text a.link {margin-top: 10px !important; top: 0 !important}
		#content h1 {font-size: 2.6em}
		#content.what-we-do h1 {font-size: 1.65em !important}
		#content hr {margin-bottom: 20px !important}
		#content.what-we-do .alignright {float: right !important; width: 35% !important}
		#content.what-we-do .alignright p {font-size: 0.8em !important}
		#content .features {display: none !important}
		
	}
}


/**************************/
/* END RESPONSIVE */
/**************************/