/* *************************
 * webfootdigital.com // version 1.0.1
 * by Michael Duck // duck@webfootdigital.com
 *
 * webfoot_style.css // main site stylesheet (includes responsive queries)
 ************************* */

		/* color palate:
		 * #FFFFFF - white
		 * #333333 - black/dark gray
		 * #DDDDDD - light gray
		 * #DAA520 - goldenrod
		 * #FFD700 - gold
		 * #FFFF66 - off-yellow
		 */

		* {
			margin: 0;
			padding: 0;
			border: 0 solid #DAA520; /* sets the color for ALL BORDERS */
		}
	
		a {
			color: inherit; 
			text-decoration:none;
		}
		ul, ol {list-style: none;}
		
		header, footer, nav {display: block;} /* for browsers that don't know how to handle semantic elements */
	
		html, body, .formElement {
			font:normal normal normal 100% Verdana,Helvetica,Arial,sans-serif;
			text-align: center;
			line-height: normal;
			background: #FFFFFF;
		 	color: #DAA520;
			-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
		}

		/* in root-ems with pixel fallbacks */
		/* standard, for reference:
		h1, h2 {font-size: 24px;font-size: 1.5rem;}
		h3 {font-size: 20px; font-size: 1.25rem;}
		h4 {font-size: 16px; font-size: 1rem;}
		h5 {font-size: 13px; font-size: 0.83rem;}
		h6 {font-size: 11px; font-size: 0.67rem; color: #999; text-transform: uppercase;}	*/	
		
		h1, h2 {font-size: 16px;font-size: 1rem;font-weight: bold;}
		h3 {font-size: 16px; font-size: 1rem;font-weight: normal;}
		h4, h5 {font-size: 13px; font-size: 0.83rem; text-transform: uppercase;}
		h6 {font-size: 11px; font-size: 0.67rem; color: #999; text-transform: uppercase;}

		#logo {
			display: block;
			margin: 0 auto 24px; margin: 0 auto 1.5rem;
			width: 95%;
			padding-bottom: 30%;
			background: url('/webfoot_assets/graphics/webfoot-350x109.gif') no-repeat center;
			background-size:contain;
		}
		#logo img {display:none;}

		#container {
			margin: 0 auto;
			width: 95%;
			max-width: 900px;
			padding-bottom: 32px; padding-bottom: 2rem;
		}

		#container>* {
			padding-bottom: 24px; padding-bottom: 1.5rem;
		}

		#container h2.services {
			display: none;
			font-size: 14px; font-size: .875rem;
			padding-bottom: 8px; padding-bottom: .5rem;
		}

		h2.services span {
			display: inline-block;
			padding: 0 8px; padding: 0 .5rem;
		}

		#container h3.where {
			display: none;
			font-size: 13px; font-size: 0.83rem; 
			padding-bottom: 24px; padding-bottom: 1.5rem;
		}
		
		#mainNav {
			padding-bottom: 0;
			position: relative;
			height: 32px; height: 2rem;
		}
		#mainNav ul { 
			width: 75%;
			z-index: 600;
	/*		overflow: hidden; */
			position: absolute;
			bottom: 0;
			left: 20%;
			background: #FFFFFF;
		}
		#mainNav li {width: 100%;}
		
		#mainNav li a {
			display: none;
			width: 49%;
			float: left;
			text-transform: uppercase;
			font-size: 12px; font-size: .75rem;
			line-height: 32px; line-height: 2rem;
			-webkit-border-top-left-radius: 16px;
			-webkit-border-top-right-radius: 16px;
			-moz-border-radius-topleft: 16px;
			-moz-border-radius-topright: 16px;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;			
			border-width: 2px;
			border-bottom-width: 0;
			background: #FFFFFF;
			margin-left: -1%;
			margin-right: -1%;
			position: relative;
			bottom: 0;
		}

		#mainNav li:first-child a {z-index: 604;margin-left: 0;}
		#mainNav li:nth-child(2) a {z-index: 603;}
		#mainNav li:nth-child(3) a {z-index: 602;}
		#mainNav li:nth-child(4) a {z-index: 601;}

		#mainNav ul:not(.menuPopOut) li a:hover {
			z-index: 999;
			padding-top: .125rem;
			padding-bottom: .125rem;
			margin-bottom: -1rem;
			top: -.25rem;
		}

		#mainNav li a.active {
			display: block;
			z-index: 998;
			background: #DAA520;
			color: #FFFFFF;
		}
		#mainNav li a.menuOpen {display: block;}

		#mainNav ul.menuPopOut {
			width: 80%;
			left: 9%;
			top: -32px;top: -2rem;
			bottom: auto;
			border-width: 3px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

		#mainNav ul.menuPopOut li {
			width: 90%;
			margin: 0 auto;
			border-top-width: 1px;
			padding: 8px 0; padding: .5rem 0;
		}

		#mainNav ul.menuPopOut li:first-child {border-top-width: 0;}

		#mainNav ul.menuPopOut li a {
			float: none;
			display: block;
			width: auto;
			border-width: 0;
			font-size: 16px;font-size: 1rem;
			padding: 8px 0;padding: .5rem 0;
			color: #333333;
			background: #FFFFFF;
			-webkit-border-radius: 16px;
			-moz-border-radius: 16px;
			border-radius: 16px;
		}
		#mainNav ul.menuPopOut li a.active {color: #333333;background: #FFFFFF;}
		
		#mainNav ul.menuPopOut li.menuOpenLi {display: none;}
		#mainNav ul.menuPopOut li a.menuClose {color: #DAA520;}

		div#content {
			border-width: 3px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			margin-bottom: 16px; margin-bottom: 1rem;
			color: #333333;
			font-size: 14px; font-size: .875rem;
			padding: 20px 5%; padding: 1.25rem 5%;
			min-height: 368px; min-height: 23rem;
			background: url('/webfoot_assets/graphics/webfoot-waiting-animation.gif') no-repeat center 160px;
			background-position: center 10rem;
		}
		
		div#target {background: #FFFFFF;}

		div#content p, div#content #aboutPage h3 {
			margin: 20px 0 0; margin: 1.25rem 0 0;
			line-height: 16px; line-height: 1rem;
			line-height: 16px; line-height: 1.125rem;
			text-align: left;
		}
		div#content p:first-child, div#content #aboutPage h3:first-child {margin-top: 0;}	
		div#content #aboutPage h3 {
			font-size: 15px;font-size: .94rem;
			font-weight: bold;
		}
		
		p a {color: #DAA520;text-decoration: underline;}
		p a:hover {text-decoration: none;text-shadow: 0 0 0.3rem #FFFF66;}
		div#content hr {
			width: 66%;
			margin: 20px auto 0; margin: 1.25rem auto 0;
			border-top-width: 2px;
		}
		
		div#content .photoWrap {
			display: block;
			float: right;
			margin-left: 16px; margin-left: 1rem;
			margin-bottom: 16px; margin-bottom: 1rem;
		}

		div#content .photo {
			display: block;
			width: 100%;
			-webkit-border-radius: 16px;
			-moz-border-radius: 16px;
			border-radius: 16px;		
		}
		
		div#content .photo img {display: none;}

		div#content .selfieWrap {
			width: 50%;
			max-width: 206px;
		}		
		div#content .selfie {
			padding-top: 150%;
			background: url('/webfoot_assets/images/wfd-selfie2021-206x309.jpg') no-repeat center;
			background-size:cover;	
		}
		
		div#content .devicesWrap {
			width: 60%;
			max-width: 230px;
		}		
		div#content .devices {
			padding-top: 75%;
			background: url('/webfoot_assets/images/webfoot-devices-200x150.jpg') no-repeat center;
			background-size:cover;
		}		
		
		#clips h3 {font-size: 13px; font-size: 0.83rem;}
		#clips ul {padding-top: 24px; padding-top: 1.5rem;}
		
		#clips .sample {
			border-top-width: 2px;
			width: 66%;
			margin: 0 auto;
			padding: 24px 0; padding: 1.5rem 0;
		}
		#clips .sample a, #clips .sample p {display:block;margin: 0 -25%;}
		#clips .sample .testimonial a {display: inline; margin: 0;}
		#clips .sample span {display:block;}
		#clips .sampleHeading {
			font-size: 13px; font-size: .83rem;
			font-weight: bold;
			padding-bottom: 12px; padding-bottom: .75rem;
		}
		#clips .sampleHeading span {font-size: 12px; font-size: .75rem; font-weight: normal;}
		#clips .sampleHeading span.sampleLink {color: #DAA520; text-decoration: underline;}
		#clips .sampleHeading span.sampleLink.smallLink {font-size: 9px; font-size: .55rem;}
		#clips a:hover .sampleHeading span.sampleLink {text-decoration: underline; text-shadow: 0 0 0.3rem #FFFF66;}
		
/*		#clips .sampleImages {overflow: hidden;} */
		#clips .sampleImages .clear {display: block;clear: both;}
		#clips .sample .sampleImages img {
			border: 1px solid #DDDDDD;
			min-height: 100px;
		}
		#clips .sample a:hover .sampleImages img {
			border-color: #DAA520;
			-moz-box-shadow:    0 0 6px 0 #FFFF66;
			-webkit-box-shadow: 0 0 6px 0 #FFFF66;
			box-shadow:         0 0 6px 0 #FFFF66;
		}
		
		#clips .sample img.sampleDesktop {width: 72.21%;margin: 0 3.47%;}
		#clips .sample img.sampleMobile {width: 22.31%;}
		#clips .sample.sampleRight .sampleImages img {float: left;}
		#clips .sample.sampleRight img.sampleDesktop {margin-left: 0;}
		#clips .sample.sampleLeft .sampleImages img {float: right;}
		#clips .sample.sampleLeft img.sampleDesktop {margin-right: 0;}

		div#content #clips p {
			text-align: center;
			padding-top: 12px; padding-top: .75rem;
		}

		.emailForm {
			display: block;
			width: 100%;
			max-width: 350px;
			margin: 0 auto;
		}

		div#content .emailForm p {
			text-align: center;
			margin-bottom: 32px; margin-bottom: 2rem;
			font-size: 13px; font-size: .83rem;
		} 

		form input, .emailForm .formElement {
			border: 1px solid #DDDDDD;
			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
			padding: 10px 16px;
			outline:0;
			color: #333333;
			width: 100%;
			-webkit-appearance: none; /* removes the interior box-shadow that iOS Safari always applies */
		}

		.emailForm .formElement:focus {
			border-color: #DAA520;
			-moz-box-shadow:    0 0 6px 0 #FFFF66;
			-webkit-box-shadow: 0 0 6px 0 #FFFF66;
			box-shadow:         0 0 6px 0 #FFFF66;
		}

		.emailForm .inputRow {padding-bottom: 24px; padding-bottom: 1.5rem;}
		.emailForm label {
			display:block;
			padding-bottom: 4px; padding-bottom: .25rem;
			font-size: .83rem;
		}
		.emailForm .inputWrap {padding-right: 34px;}
		.emailForm #emailMsg {
			height: 256px;height: 16rem;
			text-align: left;
			padding-top: 16px;
			padding-bottom: 16px;
			overflow: auto;
			resize: vertical;
		}
		
		.emailForm .buttonRow {width: 70%;margin: 0 auto;max-width: 200px;}
		.emailForm #emailSend {
			border-color: #DDDDDD;
			padding: 12px; padding: .75rem;
			color: #DDDDDD;
			text-transform: uppercase;
			border-width: 2px;
			-webkit-border-radius: 16px;
			-moz-border-radius: 16px;
			border-radius: 16px;
			cursor: default;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), color-stop(25%, #FFFFFF), to(#FFFFFF)); /* Saf4+, Chrome - needed for iOS bug */ 
		}

		.emailForm #emailSend.ready {
			border-color: #DAA520;
			color: #FFFFFF;
			cursor: pointer;
			background: #DAA520;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#DAA520), color-stop(25%, #DAA520), to(#DAA520)); /* Saf4+, Chrome - needed for iOS bug */ 
		}

		.emailForm #emailSend.ready:focus, .emailForm #emailSend.ready:hover {
			background: #FFFF66;
			border-color: #DAA520;
			color: #DAA520;
		}

		h4.working {
			padding-top: 3rem;
			text-align: center;
			color: #DAA520;
			font-weight: normal;
		}

		#socialLinks {
			padding: 16px 0 8px; padding: 1rem 0 .5rem;
			margin-bottom: 0;
		}

		#socialLinks ul {
			margin: 0 auto;
			width: 144px;
			overflow: hidden;
			position: relative;
		}
		
		#socialLinks li {
			float: left;
			width: 72px;
			height: 66px;
			text-align: center;
			font-size: 9px;
			color: #333333;
		}

		#socialLinks a.wficon {
			display: block;
			width: 32px;
			height: 32px;
			margin: 0 auto 12px;
			background-image: url('/webfoot_assets/graphics/webfoot-social-icons.gif');
			background-repeat: no-repeat;
		}

		#socialLinks a {text-decoration: underline;}
		#socialLinks a:hover {text-decoration: none;text-shadow: 0 0 0.2rem #FFFF66;}

		#socialLinks a#fb.wficon {background-position: 0 0;}
		.notTouch #socialLinks:hover a#fb.wficon, #socialLinks.touchActive a#fb.wficon {background-position: 0 -37px;}
		#socialLinks a#tw.wficon {background-position: 0 -74px;}
		.notTouch #socialLinks:hover a#tw.wficon, #socialLinks.touchActive a#tw.wficon {background-position: 0 -111px;}
		#socialLinks a#em.wficon {background-position: 0 -148px;}
		.notTouch #socialLinks:hover a#em.wficon, #socialLinks.touchActive a#em.wficon {background-position: 0 -185px;}
		#socialLinks a#emHidden {line-height: 20px;}
			
		#socialLinks a.wficon span {display:none;}

		#socialLinks .socialHidden {
			display: none;
			height: 20px;
			overflow: hidden;
		}
		#socialLinks li#socialMask {
			width: 100%;
			height: 24px;
			position: absolute;
			bottom: 0;
			background: #FFFFFF;
			z-index: 10;
		}

		.fakeShiv {clear:both;font-size: 13px;font-size: .8rem;}		
		
		/* MEDIA QUERIES */
		@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
			/* retina displays */
			#logo {background-image: url('/webfoot_assets/graphics/webfoot-700x218.png');}

			#socialLinks a.wficon {
				background-size: 32px;
				background-image: url('/webfoot_assets/graphics/webfoot-social-icons-2x.png');
			}
			
			div#content .selfie {background-image: url('/webfoot_assets/images/wfd-selfie2021-206x309.jpg');}
			div#content .devices {background-image: url('/webfoot_assets/images/webfoot-devices-400x300.jpg');}
		}

		@media screen and (min-width: 350px) {
			#logo {
				background-image: url('/webfoot_assets/graphics/webfoot-600x187.gif');
			}
			h1, h2 {font-size: 18px;font-size: 1.125rem;font-weight: bold;}
			div#content .selfie {background-image: url('/webfoot_assets/images/wfd-selfie2021-206x309.jpg');}
			div#content .devices {background-image: url('/webfoot_assets/images/webfoot-devices-240x180.jpg');}
		}

		@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 350px), screen and (max--moz-device-pixel-ratio: 2) and (min-width: 350px) {
			#logo {background-image: url('/webfoot_assets/graphics/webfoot-1200x374.png');}
			div#content .selfie {background-image: url('/webfoot_assets/images/wfd-selfie2021-206x309.jpg');}
			div#content .devices {background-image: url('/webfoot_assets/images/webfoot-devices-480x360.jpg');}
		}

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

			#container h2.services, #container h3.where {display: block;}

			#mainNav ul, #mainNav ul.menuPopOut { 
				width: 86%;
				left: 7%
			}

			#mainNav li a, #mainNav ul.menuPopOut li a {
				display:block;
				width: 25.4%;
				line-height: 1.5rem;
			}
			#mainNav li a.menuButton {display:none!important;}
			#mainNav li a:hover, #mainNav ul.menuPopOut li a:hover {background: #FFFF66;}
			#mainNav li a.active, #mainNav ul.menuPopOut li a.active {background: #DAA520;color: #FFFFFF;}
			/* necessary only to counteract the .menuPopOut settings, if somehow it's activated on desktop */
			#mainNav ul.menuPopOut {
				top: auto;
				bottom: 0;
				border-width: 0;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
			}
			
			#mainNav ul.menuPopOut li {
				width: 100%;
				border-top-width: 0;
				padding: 0;
			}
			
			#mainNav ul.menuPopOut li a {
				float: left;
				font-size: .75rem;
				padding: 0;
				color: #DAA520;
				border-width: 2px;
				border-bottom-width: 0;
			}
			
			#socialLinks ul {width: 200px;}
			#socialLinks li {width: 100px;}
		}

		
		@media screen and (min-width: 600px) {
			#logo {
				height: 190px;
				max-width: 600px;
				margin-top: 40px;
				margin-bottom: 40px;
				padding-bottom: 0;
			}

			.where .break {display: none;}

			#container h3.where {padding: 1rem 0 3rem;}
			
			#container {
				max-width: 540px;
			}
			#mainNav li a {width: 25.6%;}
			
			#clips ul {padding-top: 2rem;}
			#clips .sample {padding: 2.5rem 0;}
			#clips .sample .sampleImages {width: 66%;min-height: 100px;}
			#clips .sample .sampleHeading {width: 33%;padding-top: 1rem;font-size: 1rem;}
			#clips .sample .sampleHeading span {margin-top: .25rem;}
			#clips .sample.sampleRight .sampleImages {float: right;}
			#clips .sample.sampleRight .sampleHeading {float: left;}
			#clips .sample.sampleLeft .sampleImages {float: left;}
			#clips .sample.sampleLeft .sampleHeading {float: right;}
			#clips .sample p {clear: both;}
			
			#socialLinks {
				padding: 2rem 0 1.5rem;
			}
			#socialLinks ul {width: 260px;}
			#socialLinks li {width: 130px;}
			#socialLinks .socialHidden {display: block;}
		}