@charset "utf-8";
/* -----------------------------------------------------

* Filename: media.css
* Description: media queries style sheet for Vanguard West Legal Services, PLLC
* Version: 1
* Website: http://www.vanguardwestlegalaz.com
* Author: John Curtis

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

@media screen and (max-width: 1350px) {
	nav ul.menu li a:link, nav .menu li a:visited {font-size: 16px;}
	header #phone-addy-menu {width: 539px;}
	.bodycopy {width: 85%;}
	#bridge-internal p {padding: 10% 200px;}
}

@media screen and (max-width: 1154px) {
	header #phone-addy-menu {
		float: right;
		width: 380px;
	}

	/* #mobile-buttons {display: block;} */
	.hamburger {
		display: block;
		width: 35px;
		height: 5px;
		position: absolute;
		top: 120%;
		left: 85%;
		cursor: pointer;
	}
	.hamburger::before {
		background-color: #000;
		position: absolute;
		bottom: 9px;
		display: block;
		width: 100%;
		height: 5px;
		content: '';
		-webkit-transition: top .25s ease .3s, -webkit-transform .25s;
		transition: top .25s ease .3s, -webkit-transform .25s;
		transition: top .25s ease .3s, transform .25s;
		transition: top .25s ease .3s, transform .25s, -webkit-transform .25s;
	}
	.hamburger::after {
		background-color: #000;
		position: absolute;
		top: 9px;
		left: 0;
		display: block;
		width: 100%;
		height: 5px;
		content: '';
		-webkit-transition: bottom .25s ease .3s, -webkit-transform .25s;
		transition: bottom .25s ease .3s, -webkit-transform .25s;
		transition: bottom .25s ease .3s, transform .25s;
		transition: bottom .25s ease .3s, transform .25s, -webkit-transform .25s;
	}
	.hamburger.close::before {
		top: 0;
		width: 100%;
		height: 90%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.hamburger.close .patty {
		display: none;
	}
	.hamburger.close::after {
		top: 0;
		width: 100%;
		height: 90%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.hamburger .patty {			
		background-color: #000;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 5px;
		margin: auto;
	}

	#mobile-buttons ul {text-align: center; margin-bottom: 0;}
		#mobile-buttons ul li {
			list-style: none;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 18px;
			line-height: 26px;
			color: #f7f4d1;
			margin: 0;
			padding: 10px 5px;
			border-top: 1px solid #000;
			background: #cd5e27;
			display: block;}
		#mobile-buttons ul a:first-child li {border-top: none;}
		#mobile-buttons ul li.color-variant {background: #5F6366;}
		#mobile-buttons ul li span {font-size: 16px; font-style: italic; text-transform: none;}
		#mobile-buttons a:link, #mobile-buttons a:visited {text-decoration: none; color:#fff;}
		#mobile-buttons a:hover, #mobile-buttons a:active {color: #fff;}
		#mobile-buttons a:hover li, #mobile-buttons a:active li {background: #f7f4d1; color: #000;}

	#header-hrline-top {
		background: #000; 
		height: 6px; 
		width: 100%;		
		display: block;
	}
	nav {display: none;} 
	.pic-wrapper, .header-pic-wrapper {border-top: 6px solid #000;}
	#bridge-home, #bridge-internal {height: 390px;}
	#bridge-internal p {padding: 9% 200px;}
}

@media screen and (max-width: 1075px) {
	.float.contact {margin: 0 0 20px 30px;}
	.form-contact .row-captcha {margin: 0 0 35px 440px;}	
	input[type="text"], input[type="email"] {
		width: 300px;
	}
	textarea {width: 300px;}
	.button.btn-post {margin-left: 284px;}
}

@media screen and (max-width: 980px) {	
	header #logo img {width: 400px; height: auto;}
	#bridge-home, #bridge-internal {height: 340px;}
	#bridge-home h3 {font-size: 30px;}
	#bridge-home p {font-size: 23px; line-height: 25px;}
	#bridge-internal p {padding: 11% 75px; font-size: 23px; line-height: 25px;}

	.form-contact label {
		float: none;
	}
	input[type="text"], input[type="email"] {
		float: none; 
		display: block; 
		max-width: 550px;
		width: 95.5%;
	}
	select {
		float: none; 
		display: block; 
		max-width: 550px;
		width: 98.5%;
	}
	textarea {
		max-width: 100%;
		width: 95.5%;
	}
	.agreeyntext {
		width: 90%;
	}
	#result-message {
		margin-left: 0;
	}
	.form-contact .row-captcha {
		width: auto;
		margin: 0 0 35px 0;
	}
	.button.btn-post {
		margin-left: 0;
	}
}

@media screen and (max-width: 950px) {
	.float {float: none; display: block; margin: 5px auto 28px;}
	.contact-details {display: flex; flex-direction: column-reverse; text-align: center;}
	.float.contact {margin: 30px auto; max-width: 380px; width: auto;}
	.form-contact {float: none; width: auto;}
	.button.btn-post {float: none;}
}

@media screen and (max-width: 912px) {
	.services h2 {text-align: center;}
	.services p {text-align: center;}
	.services img {
		float: none;
		display: block;
		margin: 0 auto 25px;
	}
	#bridge-home, #bridge-internal {height: 330px;}
	#bridge-home p, #bridge-internal p {font-size: 20px; line-height: 24px;}
	#bridge-internal p {padding: 11% 75px;}
	.form-contact.nocaptcha {
		width: 71%;
	}
}

@media screen and (max-width: 866px) {
	header #banner {height: auto;}
	header #logo {
		float: none;
    	margin: 0 auto;
	}
	header #phone-addy-menu {
		float: none;
		margin: 0 auto;
		align-items: stretch;
	}
	header #phone {margin-top: 80px;}
	header #addy {text-align: left;}
	.hamburger {
		position: relative;
		top: -175px;
		left: 46%;
	}
}

@media screen and (max-width: 825px) {
	/* main nav dropdown button width */
	nav li ul {min-width: 190px;}
}

@media screen and (max-width: 800px) {
	#result-message {width: auto;}
}

@media screen and (max-width: 750px) {
	#hero-home {
		margin: 0 auto 250px;
		max-width: 750px;
	}

	.pic-wrapper {
		max-width: 750px;
		max-height: 250px;
	}

	.mobileonly {display: inline;}
	.nonmobile {display: none;}

	.bodycopy {padding: 12px;}
	
	#construction {display: block;}
		#construction p {padding-top: 0;}
	.bodycopy h1 {line-height: 44px;}
}

@media screen and (max-width: 730px) {
	#bridge-home h3 {font-size: 28px; padding: 6% 0 20px;}
	#bridge-internal p {padding: 13% 75px;}
}

@media screen and (max-width: 630px){
	#bridge-home p {padding: 25px 50px;}
	#bridge-internal p {padding: 14% 50px;}
	label {
		font-size: 18px;
		line-height: 22px;
	}
	.form-contact.nocaptcha label {
		float: none;
	}
	.button.btn-post {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (max-width: 568px) {
	#bridge-home, #bridge-internal {height: 380px;}
	#bridge-internal p {padding: 19% 50px;}
	.agreeyntext {width: 85%;}
	.button.btn-post {font-size: 17.5px; line-height: 21px; min-width: 410px;}
	.sources {word-break: break-all;}
}

@media screen and (max-width: 520px) {
	label {
		font-size: 17px;
		line-height: 21px;
	}
}

@media screen and (max-width: 495px) {
	label {
		font-size: 16px;
		line-height: 20px;
	}
}

@media screen and (max-width: 480px) {
	#bridge-home h3 {padding: 6% 0 10px;}
	img.float {max-width: 100%; width: auto; height: auto;}
	label {
		font-size: 15px;
		line-height: 19px;
	}
	.modal { /* for the modal popup window to the privacy agreement */
        width: 100%;
        height: 90%;
        max-width: none;
        max-height: none;
        border-radius: 0; /* edge-to-edge look */
    }
	.button.btn-post {font-size: 16px; line-height: 21px; min-width: 380px;}
}

@media screen and (max-width: 450px) {
	header #logo img {max-width: 350px; width: 100%; height: auto;}
	header #phone {font-size: 18px;}
	header #addy {font-size: 16px;}
	#bridge-home p {padding: 25px;}
	#bridge-internal p {padding: 20% 25px;}
	.contact-text p {font-size: 18px; line-height: 22px;}
	.float.contact {max-width: 100%; width: auto; height: auto;}
	label {
		font-size: 18px;
		line-height: 22px;
	}
	.button.btn-post {font-size: 15px; line-height: 18px; min-width: 355px;}
	.bodycopy.privacy a {word-break: break-all;}

	/* Correct iOS not supporting fixed BGs */
	.unfix-ios-bg {
		@supports (-webkit-touch-callout: none) {
			background-attachment: initial !important;
		}
	}
}

@media screen and (max-width: 420px) {
	.newline {
		display: inline;
	}
	.contact-text p {
		font-size: 17px;
		line-height: 21px;
	}
	input[type="text"], input[type="email"] {
		max-width: 304px;
	}
	select {
		width: 99.5%;
		max-width: 304px;
	}
	textarea {
		max-width: 304px;
	}
	.button.btn-post {
		font-size: 13px;
		min-width: 320px;
	}
}

@media screen and (max-width: 380px) {
	header #phone-addy-menu {width: 375px;}
	.contact-text p {
		font-size: 16px;
		line-height: 20px;
	}
}