/* CSS by dyersmith-frey.com */

/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
img {border: 0px; vertical-align: bottom;}

/* start general styles */
html { overflow-y: scroll; }
.mobile {display:none;}
body {
	background:#FFFFFF;
	font-family:'LetterGothicW01-Regular',Arial,sans-serif;
	-webkit-font-smoothing: antialiased; 
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust:none;
	height: auto;
	}

p {font-family:'LetterGothicW01-Regular',Arial,sans-serif; font-size: 18px; line-height: 24px; padding-top:20px; color:#000;}

sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

h1 {font-size:32px; line-height:38px; color:#000; margin:0px 0 0 0; padding:0; text-align:center;}
h2 {font-size:20px; line-height:26px; color:#000; margin:25px 0 0 0; padding:0 0 0px 0; text-align:center;}
h3 {font-size:24px; line-height:24px; color:#000; margin:0px 0 0 0; padding:0 0 36px 0;}
h4 {font-size:24px; line-height:26px; color:#000; margin:50px 0 0 0; padding:0 0 0px 0; text-align:center;}

.trans {-webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}
.trans:hover {-webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}

/* end general styles */

/* start link styles */
a:link, a:visited {
	font-style:normal;
	text-decoration:none;
	color:#2F453C;
	}
a:hover {
	text-decoration:underline;
	}
/* end link styles */


/* start sitebuild styles  desktop */

.container {margin:auto; position:relative; padding:0px 20px 0px; max-width:970px; text-align:center;}
.headercontainer {margin:auto; position:relative; padding:0px 20px 0px; max-width:970px;}

#contentcontainer {display:none;}

#headerwrapper {background:#2F453C; z-index:99; width:100%; position:fixed; height:54px;}

#contact {background:#2F453C; z-index:99; width:100%; position:fixed; top:54px; display:none; padding:10px 0 40px;}
#contact h1, #contact h3, #contact p, #contact a {color:#FFF;}
#contact h3 {font-size:20px; padding:30px 0 0px;}
#contact p {padding-top:10px; font-size:16px;}
#contact a:hover {text-decoration:underline;}

.contactbox {width:50%; padding:50px 0 0; text-align:center; float:left;}

#headerspacer {height:52px;}

#contentwrapper {background:#FFF; z-index:3; position:relative; overflow:hidden;}
#content {padding:0 20px 80px; background:#FFF; position:relative; max-width:1000px; margin:0 auto 0;}
#content img {width:100%;}

#logo {width:290px; position:absolute; left:10px; top:15px; z-index:99;}
#logo img {width:100%;}

/* navigation */
#navigation {margin:0px 0 0 0px; overflow:hidden; position:absolute; right:85px; top:17px;}
#navigation ul li {margin:0px 0 0px 20px; float:left; display:block; list-style:none; position:relative;}
#navigation ul li a {color:#FFF; font-size:15px; line-height:20px; padding:0px; text-decoration:none; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}
#navigation ul li a:hover {color:#999; text-decoration:none; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}
#navigation ul li a.active {color:#999; text-decoration:none;}

#navigationlang {margin:0px 0 0 0px; overflow:hidden; position:absolute; right:10px; top:17px;}
#navigationlang ul li {margin:0px 0 0px 6px; float:left; display:block; list-style:none; position:relative;}
#navigationlang ul li a {color:#999; font-size:15px; line-height:20px; padding:0px; text-decoration:none; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}
#navigationlang ul li a:hover {color:#fff; text-decoration:none; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;}
#navigationlang ul li a.active {color:#fff; text-decoration:none; cursor:default;}

.mobile {display:none !important;}

#mobilenavi {position:absolute; right:20px; top:10px; width:24px; height:24px; z-index:99;}
#mobilenavi a {border:0;}
#mobilenavi img {width:100%;}

.socialwrapper {margin:40px auto 0; width:195px; text-align:center;}
.socialwrapper p {padding:0 0 20px 0; font-size:20px;}
.socialbox {width:65px; height:50px; overflow:hidden; margin:0; float:left;}
.socialbox img {height:100px; width:65px; margin-top:0px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; cursor:pointer;}
.socialbox img:hover {height:100px; width:65px; margin-top:-50px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; cursor:pointer;}


.topimg {position:relative; text-align:center;}
.topimg img {width:100%;}

.topimgarrow {position:absolute; width:75px; height:75px; left:50%; margin-left:-37px; bottom:50px; display:none; z-index:15; opacity:0.4}
.topimgarrow img {width:100%;}

.introtext {padding:30px 0 10px 0;}
.introtext2 {padding:100px 0 10px 0;}

.introvideo {padding:90px 0 4px 0px; text-align:center;}
.introvideo h1 {padding:30px 0 5px 0;}
.introvideo p {padding:0 60px;}

.galleryheader {padding:90px 0 20px 0;}
.introgallerywrapper {padding:0 0 90px 0;}

.introboxwrapper {background:#F1F1F1; padding:60px 0 50px 0;}
.introbox {width:46%; float:left; text-align:center;}
.introbox img {width:100%; padding-bottom:30px;}
.introbox a {display:block; padding-top:20px;}
.introleft {margin:0 4% 0 0;}
.introright {margin:0 0 0 4%;}

.intronews {padding:90px 0 60px 0;}

.vitalogo {width:330px; padding:90px 0 60px 0; margin:auto;}
.vitalogo img {width:100%;}

.vitadownload {padding:10px 0px; width:220px; margin:50px auto 0px; color:#FFF; background:#2F453C;}
.vitadownload:hover {background:#F1F1F1; color:#2F453C; text-decoration:none !important;}
a.vitadown {text-decoration:none !important;}

.vitalink {display:block; padding:40px 0 20px;}

.contentboxwrapper {margin:70px 0 30px 0;}
.contentboxwrapper2 {margin:70px 0 60px 0;}

.newsboxleft {width:50%; box-sizing:border-box; float:left; padding:0 40px 0 0;}
.newsboxright {width:50%; box-sizing:border-box; float:left; padding:90px 0 0 40px;}
.newsbox {box-sizing:border-box; padding:30px 15px; margin-bottom:70px; font-size:14px; border-bottom:1px solid #2F453C;}
.newsbox h2 {color:#000; font-size:26px; line-height:32px; padding:0; margin:0;}
.newsbox img {width:100%; padding:10px 0 0px 0;}
.newsimgwrapper {margin:15px 0 30px;}
.newstextspacer {height:10px;}

.newsboxstart {box-sizing:border-box; padding:30px 15px; max-width:600px; margin:auto; font-size:14px;}
.newsboxstart h2 {color:#000; font-size:26px; line-height:32px; padding:0; margin:0;}
.newsboxstart img {width:100%; padding:10px 0 0px 0;}

.projectwrapper {padding:70px 0 20px 0;}
.projectbox {width:46%; float:left; text-align:left;}
.projectbox h2 {color:#000; font-size:26px; line-height:32px; padding:0; margin:0; text-align:left; letter-spacing:-0.06em;}
.projectleft {margin:0 4% 40px 0;}
.projectright {margin:0 0 40px 4%;}
.projectimgwrapper {padding-bottom:20px;}
.projectimgwrapper img {width:100%;}

.projectgallerywrapper {padding:10px 0 10px;}
.projectgallerywrapper img {height:80px; padding:0 7px 7px 0; float:left;}

.gallerywrapper {margin:20px 0 0 0;}
.gallerybox {width:32%; float:left; margin:6px 0.5% 6px;}
.gallerybox img {padding-bottom:0px; width:100%;}
.gallerymore {display:none; height:0; margin:0px 0.5% 0px;}
.showgallery {display:block; z-index:999; margin-top:10px;}

.gallerymore2 {display:none; height:0; margin:0px 0.5% 0px;}
.showgallery2 {display:block; z-index:999; margin-top:10px;}

.gallerydownload {padding:10px 0px; width:270px; margin:20px auto 0px; color:#FFF; background:#2F453C;}
.gallerydownload:hover {background:#F1F1F1; color:#2F453C; text-decoration:none !important;}
a.gallerydown {text-decoration:none !important;}



.textcontainer {padding:50px 10px;}

#footerwrapper {background:#2F453C; padding:10px 0 10px; margin:70px 0 0 0; display:none; color:#FFF; font-size:14px;}

.topvideocontainer {background:#000;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top:0px; height:0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}	

.videoWrapper2 {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top:0px; height:0; margin:auto; max-width:1200px; max-height:670px !important; overflow:hidden;}
.videoWrapper2 iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width:1200px; max-height:670px;}	


@media screen and (min-width: 1200px) {
	.videoWrapper2 {position: relative; padding-bottom: 0; height:670px; /* 16:9 */ padding-top:0px; margin:auto; max-width:1200px; max-height:670px !important; overflow:hidden;}

}


/* --Mobile */
#mobile {display:none;}
/* Image Overlay */
.tintimg {display:block;}
.tint {position: relative; cursor: pointer; -webkit-shadow: rgba(0,0,0,.2) ; -moz-shadow: rgba(0,0,0,.2); box-shadow: rgba(0,0,0,.2);}
.tint:before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear;}
.tint:hover:before {background: rgba(255,255,255, 0.5);}

/* --Clearfix */
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}
.clear {clear:both;}

/* Media Queries
***********************/
@media screen and (max-width: 900px) {
	#logo {width:200px; position:absolute; left:10px; top:18px; z-index:99;}
	#navigation ul li {margin:0px 0 0px 20px; float:left; display:block; list-style:none; position:relative;}
	.topimgarrow {visibility:hidden;}
	
	.contentboxwrapper {margin:40px 0 30px 0;}
	.contentboxwrapper2 {margin:40px 0 60px 0;}
	
	.newsboxleft {width:50%; box-sizing:border-box; float:left; padding:0 20px 0 0;}
	.newsboxright {width:50%; box-sizing:border-box; float:left; padding:70px 0 0 20px;}
	.newsbox h2 {color:#000; font-size:22px; line-height:28px; padding:0; margin:0;}
	
}

@media screen and (max-width: 760px) {
	.desktop {display:none;}
	.mobile {display:inherit !important;}
	
	h1 {font-size:20px; line-height:28px; color:#000; margin:0px 0 0 0; padding:0; text-align:center;}
	h2 {font-size:16px; line-height:20px; color:#000; margin:20px 0 0 0; padding:0 0 0px 0; text-align:center;}
	h3 {font-size:18px; line-height:24px; color:#000; margin:0px 0 0 0; padding:0 0 16px 0;}
	h4 {font-size:20px; line-height:26px; color:#000; margin:30px 0 0 0; padding:0 0 0px 0; text-align:center;}
	p {font-family:'LetterGothicW01-Regular',Arial,sans-serif; font-size: 16px; line-height: 20px; padding-top:15px; color:#000;}
	
	.socialwrapper {margin:30px auto 0; width:100px; text-align:center;}
	.socialwrapper p {padding:0 0 10px 0; font-size:16px;}
	.socialbox {width:32px; height:25px; overflow:hidden; margin:0; float:left;}
	.socialbox img {height:50px; width:32px; margin-top:0px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; cursor:pointer;}
	.socialbox img:hover {height:50px; width:32px; margin-top:-25px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; cursor:pointer;}
	
	.container {padding:0px 10px 0px;}
	.headercontainer {margin:auto; position:relative; padding:0px 0px 0px; max-width:970px;}
	#headerspacer {height:44px;}
	#headerwrapper {background:#2F453C; z-index:99; width:100%; position:fixed; height:44px; opacity:1;}
	#logo {width:150px; position:absolute; left:10px; top:15px; z-index:99;}
	
	#navigation {margin:0px 0 0 0px; width:100%; overflow:hidden; position:relative; background:#2F453C; left:0px; top:0px; padding:50px 0 10px 0; display:none;}
	#navigation ul li {margin:0px 0 0px 0px; padding:5px 0; width:100%; text-align:center; float:left; display:block; list-style:none; position:relative;}
	#navigation ul li a {color:#fff; line-height:20px; padding:0px; text-decoration:none;}
	
	.introvideo {padding:40px 0 20px 0px; border-bottom:1px solid #2F453C; text-align:center;}
	.introvideo h1 {padding:20px 0 5px 0;}
	.introvideo p {padding:0 0px;}
	
	.galleryheader {padding:40px 0 20px 0;}
	
	.introbox {width:100%; float:left; text-align:center;}
	.introbox img {width:100%; padding-bottom:20px;}
	.introleft {margin:0  0 0;}
	.introright {margin:30px 0 0 0;}
	.intronews {padding:40px 0 0px 0;}
	
	.newsboxstart {box-sizing:border-box; padding:30px 0px; max-width:600px; margin:auto; font-size:14px;}
	.newsboxstart h2 {color:#000; font-size:20px; line-height:26px; padding:0; margin:0;}
	
	.vitalogo {width:200px; padding:40px 0 20px 0; margin:auto;}
	.introtext2 {padding:40px 0 10px 0;}
	
	.contentboxwrapper {margin:70px 0 30px 0;}
	.contentboxwrapper2 {margin:10px 0 30px 0;}
	
	.newsbox {box-sizing:border-box; padding:20px 0px; margin-bottom:10px; font-size:14px; border-bottom:1px solid #2F453C;}
	.newsimgwrapper {margin:15px 0 10px;}
	
	.gallerybox {width:32%; float:left; margin:6px 0.5% 6px;}
	
	.projectwrapper {padding:30px 0 20px 0;}
	.projectbox {width:48%; float:left; text-align:left;}
	.projectbox h2 {color:#000; font-size:22px; line-height:28px; padding:0; margin:0; text-align:left;}
	.projectleft {margin:0 2% 20px 0;}
	.projectright {margin:0 0 20px 2%;}

	.homebottomspacer {height:80px;}

	#contact {background:#2F453C; z-index:9; width:100%; position:absolute; top:235px; display:none; padding:0px 0 30px;}
	#contact h1, #contact h3, #contact p, #contact a {color:#FFF;}
	#contact h3 {font-size:18px;}
	#contact a:hover {text-decoration:underline;}
	
	#footerwrapper {background:#2F453C; padding:10px 0 10px; margin:30px 0 0 0; display:none; color:#FFF; font-size:14px;}
	
	#dyersmithfrey-signature {display:none;}
}

@media screen and (max-width: 500px) {
	.gallerybox {width:49%; float:left; margin:6px 0.5% 0px;}
	.projectbox {width:100%; float:left; text-align:left;}
	.projectleft {margin:0 0 20px 0;}
	.projectright {margin:0 0 20px 0;}
}
/* Start Signature Styles */
#dyersmithfrey-signature {
	position:fixed;
	width:15px;
	height:15px;
	right:2px;
	bottom:1px;
	z-index:1000;
	}
/* End Signature Styles */